a,
button,
.category-chip,
.product-card,
.btn,
.sheet-icon-btn,
.avatar-option {
    touch-action: manipulation; /* Remove 300ms tap delay */
    user-select: none; /* Prevent accidental text selection */
    -webkit-user-select: none;
}

:root {
    /* Цветовая палитра */
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --text-primary: #000000;
    --text-secondary: #444444;
    --accent-color: #f9e532;
    --accent-hover: #e0ce2d;
    --border-color: #d1d1d1;

    --shadow-sm: 0 4px 6px rgba(44, 34, 30, 0.05);
    --shadow-md: 0 8px 15px rgba(44, 34, 30, 0.08);
    --shadow-lg: 0 20px 25px rgba(44, 34, 30, 0.1);

    --border-radius: 20px;
    --card-radius: 24px;

    --font-main: 'Inter', sans-serif;
    --font-heading: 'NauryzRedKeds', 'Bebas Neue', sans-serif;
    --font-product: 'InterLocal', sans-serif;

    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 20px);

    --font-size-base: clamp(14px, 4vw, 16px);
    --font-size-h: clamp(20px, 5vw, 24px);

    --ios-easing: cubic-bezier(0.32, 0.72, 0, 1);
    --ios-easing-sheet: cubic-bezier(0.32, 0.72, 0, 1);

    --ios-switch-bg: #e9e9ea;
    --ios-switch-active: #34c759;
    --modal-stack-scale: 0.955;
    --modal-deep-stack-scale: 0.92;
    --modal-stack-peek-y: -64px;
    --modal-deep-stack-peek-y: -92px;
    --modal-stack-blur: 1.8px;
    --modal-deep-stack-blur: 3.6px;
}

@font-face {
    font-family: 'NauryzRedKeds';
    src: url('./assets/fonts/NauryzRedKeds.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'InterLocal';
    src: url('./assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent !important; /* Global removal of gray highlight */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

html,
body,
#app,
#app * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#app input,
#app textarea,
#app [contenteditable='true'],
#app [contenteditable='plaintext-only'] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Global Inertial Scroll */
.bottom-sheet,
.modal-centered,
.overflow-y-auto {
    -webkit-overflow-scrolling: touch !important;
}

button:disabled,
.checkout-btn:disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* Base scroll smoothness */
html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch; /* Unified iOS momentum scroll */
}

html {
    height: -webkit-fill-available;
    background-color: var(--bg-color);
    overscroll-behavior-y: none; /* Отключаем нативный pull-to-refresh */
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

body {
    min-height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.5;
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overscroll-behavior-y: none;
}

.no-scroll {
    overflow: hidden !important;
    touch-action: none; /* Блокирует системные жесты на фоне */
}

/* Но при этом разрешаем тач-события внутри шторок */
.bottom-sheet {
    overscroll-behavior: contain; /* Предотвращает просачивание скролла на фон */
    touch-action: pan-y; /* Разрешает только вертикальный свайп внутри */
}

/* Скрываем полосу прокрутки для всех элементов */
*::-webkit-scrollbar {
    display: none !important;
}

* {
    -ms-overflow-style: none !important; /* IE and Edge */
    scrollbar-width: none !important; /* Firefox */
}

.app-version-label {
    font-size: 10.4px;
    color: #ccc;
    margin-top: 9.6px;
    opacity: 0.6;
}

.app-about-version {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0.4rem;
}

.media-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-promo-section {
    margin-top: 32px;
    padding-bottom: 0;
    width: 100%;
}

.app-footer-inline {
    padding: 16px 20px;
    text-align: center;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 16px;
}

.app-footer-email {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 17.6px;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 19.2px;
    letter-spacing: 0.5px;
}

.footer-copy-inline {
    margin: 0;
    padding: 0;
    opacity: 0.4;
    font-size: 12px;
    font-weight: 500;
    color: #a1a1a1;
}

.fc-avatar-more {
    background: var(--surface-color);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12.8px;
    font-weight: 700;
}

.cart-item-volume {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 1px;
}

.cart-item-size {
    font-size: 11px;
    opacity: 0.75;
}

.cart-nutrition-card {
    background: transparent;
    border-radius: 0;
    padding: 4px 20px 8px;
    margin: 2px 20px 12px;
    box-shadow: none;
}

.cart-nutrition-grid {
    display: flex;
    justify-content: center;
    gap: 42px;
    text-align: center;
    font-size: 13px;
}

.cart-nutrition-value {
    font-size: 19px;
    font-weight: 500;
}

.cart-nutrition-label {
    color: var(--text-secondary);
}

.auth-resend-action {
    color: #007aff;
    font-weight: 600;
    cursor: pointer;
}

.avatar-option-card {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fce928;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.avatar-option-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

#app {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--bg-color);
    position: relative;
    min-height: auto;
}

@media (min-width: 601px) {
    #app {
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
    }
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    line-height: 1.1 !important;
    margin: 0 !important;
    min-height: 1.2em;
}

.section-title {
    margin-bottom: 24px !important;
    padding: 0 20px;
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(11.2px + var(--safe-area-inset-top, 0px)) 20px 8px !important;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100; /* Вернули в общий поток, чтобы хедер блюрился под оверлеем */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    color: #111;
}

.app-main {
    position: relative;
    width: 100%;
    display: block;
}

.hero-gif-section {
    margin: 0 !important;
    padding: 0 !important;
    position: sticky;
    top: 0;
    display: block;
    z-index: 10;
    width: 100%;
    overflow: visible;
}

.menu-wrapper {
    position: relative;
    z-index: 20; /* Меню всегда выше гифки в плане слоев */
    background: var(--surface-color);
    display: block;
    min-height: auto; /* Убираем возможные растягивания */
    height: auto;
    overflow: visible;
}

.active-order-widget {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    padding: 10px 0 4px;
}

.active-order-widget[hidden] {
    display: none;
}

.active-order-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.44));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.72),
        0 16px 44px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(34px) saturate(170%);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    cursor: pointer;
    transition:
        transform 0.25s var(--ios-easing),
        opacity 0.2s;
}

.active-order-card:active {
    transform: scale(0.97);
}

.active-order-pill {
    display: grid;
    grid-template-columns: minmax(86px, 0.78fr) minmax(96px, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 9px 14px;
}

.active-order-pill-info {
    min-width: 0;
}

.active-order-pill-label {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-pill-number {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-panel {
    padding: 13px 14px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.active-order-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.active-order-kicker {
    margin: 0 0 3px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.active-order-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

.active-order-number {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.active-order-summary {
    margin: 7px 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.order-progress {
    width: 100%;
}

.order-progress-compact {
    min-width: 0;
}

.order-progress-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
}

.order-progress-compact .order-progress-track {
    height: 18px;
}

.order-progress-track::before,
.order-progress-fill {
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
    content: '';
}

.order-progress-compact .order-progress-track::before,
.order-progress-compact .order-progress-fill {
    left: 8px;
    right: 8px;
    height: 3px;
}

.order-progress-track::before {
    background: rgba(0, 0, 0, 0.1);
}

.order-progress-fill {
    right: auto;
    width: 0;
    background: var(--accent-color);
    box-shadow: 0 2px 8px rgba(249, 229, 50, 0.38);
}

.order-progress[data-status='1'] .order-progress-fill {
    width: calc(50% - 10px);
}

.order-progress[data-status='2'] .order-progress-fill {
    width: calc(100% - 20px);
}

.order-progress-compact[data-status='1'] .order-progress-fill {
    width: calc(50% - 8px);
}

.order-progress-compact[data-status='2'] .order-progress-fill {
    width: calc(100% - 16px);
}

.order-progress-dot {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    border: 3px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.order-progress-compact .order-progress-dot {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.order-progress-dot.is-active {
    border-color: var(--accent-color);
    background: #111;
}

.order-progress-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 5px;
    color: rgba(0, 0, 0, 0.44);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.order-progress-labels span:nth-child(2) {
    text-align: center;
}

.order-progress-labels span:nth-child(3) {
    text-align: right;
}

.order-progress-labels span.is-active {
    color: #111;
}

.active-order-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.active-order-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.active-order-item span:first-child {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-order-dismiss {
    width: 100%;
    min-height: 34px;
    margin-top: 10px;
    border: none;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
}

#heroViewport {
    width: 100%;
    height: 50vh;
    min-height: 350px;
    overflow: hidden;
    transform-origin: top center;
    transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1);
}

.is-ios-safari-browser .app-header {
    top: calc(-1 * var(--safe-area-inset-top, 0px)) !important;
    padding-top: calc(8px + var(--safe-area-inset-top, 0px)) !important;
    background: transparent !important;
}

.is-ios-safari-browser #heroViewport {
    margin-top: calc(-1 * var(--safe-area-inset-top, 0px)) !important;
    height: calc(50vh + var(--safe-area-inset-top, 0px)) !important;
    min-height: calc(350px + var(--safe-area-inset-top, 0px)) !important;
}

.header-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.header-center {
    flex: 0;
    display: flex;
    justify-content: center;
}

.header-icon {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.location-select {
    background: transparent !important;
    border: none !important;
    font-size: 14.4px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Promo Banner */
.promo-section {
    margin: 32px -20px 0;
    overflow: hidden;
}

.brand-logo-wrapper {
    background-color: transparent;
    padding: 6px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand-logo-mask {
    background-color: var(--text-primary);
    width: 130px;
    height: 32px;
    -webkit-mask: url('assets/logo/mainlogo.svg') no-repeat center;
    mask: url('assets/logo/mainlogo.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 20px 24px 20px;
}

.promo-section {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px) !important;
}

.promo-slider::-webkit-scrollbar {
    display: none;
}

.promo-banner {
    flex: 0 0 88%;
    aspect-ratio: 4 / 1.1;
    /* Пропорция для сохранения высоты около 100px при ширине в 88% */
    background: linear-gradient(135deg, #f9e532 0%, #e3d251 100%);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: var(--shadow-ios);
}

.promo-banner.student-banner {
    padding: 0;
    background: transparent;
    /* Убрал фон, чтобы не просвечивал */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    /* Убрал рамку, которая могла создавать микро-полосы */
}

.promo-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    /* Микро-зум, чтобы убрать зазоры по краям */
}

.promo-banner.student-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-banner.student-banner::before {
    display: none !important;
}

.promo-generated-banner {
    background: #f9e532;
}

.promo-generated-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.62) 42%,
        rgba(255, 255, 255, 0) 72%
    );
    pointer-events: none;
}

.promo-banner::before {
    content: '🎓';
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-size: 100px;
    opacity: 0.15;
    transform: rotate(-15deg);
}

.promo-generated-banner::before {
    display: none;
}

.promo-content {
    position: absolute;
    left: 20px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 52%;
    color: #111;
}

.promo-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 0.95 !important;
    letter-spacing: 0;
}

.promo-content p {
    font-size: 13px;
    opacity: 0.72;
    max-width: 100%;
    line-height: 1.15;
}

@media (max-width: 430px) {
    .promo-generated-banner .promo-content {
        left: 16px;
        width: 48%;
        max-width: 170px;
    }

    .promo-generated-banner .promo-content h3 {
        font-size: 15.5px !important;
        line-height: 0.92 !important;
        margin-bottom: 5px !important;
        min-height: 0;
    }

    .promo-generated-banner .promo-content p {
        font-size: 11.5px;
        line-height: 1.08;
    }
}

@media (max-width: 360px) {
    .promo-generated-banner .promo-content {
        left: 14px;
        width: 47%;
        max-width: 150px;
    }

    .promo-generated-banner .promo-content h3 {
        font-size: 14px !important;
    }

    .promo-generated-banner .promo-content p {
        font-size: 10.5px;
    }
}

/* Categories Scroll */
.categories-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 10px 0 12px;
    margin-bottom: 4px;
    background: var(--surface-color);
}

.menu-wrapper.categories-fixed {
    padding-top: var(--categories-sticky-height, 0px);
}

.categories-section.is-pwa-spacer {
    visibility: hidden;
    pointer-events: none;
}

.categories-section.is-pwa-fixed {
    position: fixed !important;
    top: var(--categories-fixed-top, 0px);
    left: 50%;
    width: 100%;
    max-width: 600px;
    transform: translateX(-50%);
    z-index: 120;
    margin-bottom: 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.035);
    will-change: transform;
}

.is-standalone-pwa {
    --categories-fixed-top: var(--safe-area-inset-top, 0px);
}

.is-standalone-pwa .categories-section.is-pwa-fixed::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--categories-fixed-top, 0px));
    height: var(--categories-fixed-top, 0px);
    background: var(--surface-color);
}

.categories-fixed-portal {
    position: fixed;
    top: var(--categories-fixed-top, 0px);
    left: 50%;
    width: 100%;
    max-width: 600px;
    transform: translate3d(-50%, -8px, 0);
    z-index: 120;
    padding: 10px 0 12px;
    background: var(--surface-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 140ms ease,
        transform 180ms var(--ios-easing);
    will-change: transform, opacity;
}

.categories-fixed-portal.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

.categories-fixed-portal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--surface-color) 0%,
        rgba(255, 255, 255, 0.82) 42%,
        rgba(255, 255, 255, 0) 100%
    );
}

.is-standalone-pwa .categories-fixed-portal::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--categories-fixed-top, 0px));
    height: var(--categories-fixed-top, 0px);
    background: var(--surface-color);
}

.categories-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--surface-color) 0%,
        rgba(255, 255, 255, 0.82) 42%,
        rgba(255, 255, 255, 0) 100%
    );
}

.categories-scroll {
    display: flex;
    overflow-x: auto;
    position: relative;
    z-index: 1;
    padding: 0 20px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Firefox */
}

.categories-scroll::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.category-chip {
    background-color: transparent;
    border: none;
    color: #999999;
    padding: 4px 8px;
    font-size: 20px;
    font-family: var(--font-heading);
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.3s ease,
        transform 0.15s cubic-bezier(0.1, 0, 0.2, 1);
    border-radius: 0;
    letter-spacing: 0.5px;
}

.category-chip:active {
    transform: scale(0.92);
}

.category-chip.active {
    background-color: transparent;
    border: none;
    color: var(--text-primary);
    box-shadow: none;
}

/* Info Plate Section */
.info-plate-section {
    padding: 0 20px 48px;
    position: relative;
    overflow: hidden;
}

.info-plate {
    background: #f2f2f2;
    border-radius: var(--card-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.info-line {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
}

.info-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
}

.info-socials {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.info-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 16.8px;
    display: inline-block;
}

.info-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 17.6px;
}

.info-social-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.info-social-link svg {
    width: 24px;
    height: 24px;
}

.info-social-link:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.info-social-link.vk {
    color: #4c75a3;
}

.info-social-link.tg {
    color: #0088cc;
}

.info-social-link.yt {
    color: #ff0000;
}

.app-footer-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 20px;
}

.app-footer-social-link {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    transition:
        transform 160ms ease,
        opacity 160ms ease;
}

.app-footer-social-link:active {
    transform: scale(0.94);
}

.app-footer-social-link img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 10px;
}

/* Swiper (iOS Style) */
.menu-track,
.hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.1, 0, 0.2, 1);
}

.hero-track {
    height: 100%;
    transform-origin: center center;
    /* Изменено с top для компенсации зазора */
    transition:
        transform 0.4s cubic-bezier(0.1, 0, 0.2, 1),
        scale 0.4s cubic-bezier(0.1, 0, 0.2, 1);
}

#heroViewport.pulling-active {
    overflow: visible !important;
}

.menu-track.no-transition,
.hero-track.no-transition {
    transition: none !important;
}

.menu-track {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.menu-track.is-swiping .category-page {
    display: flex !important;
    max-height: none !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Показываем весь контент для бесшовного свайпа */
    overflow-y: visible !important;
    pointer-events: auto !important;
}

.menu-track {
    display: flex;
    width: 100%;
    align-items: flex-start;
    will-change: transform;
}

.category-page,
.hero-page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.hero-page {
    height: 100%;
}

.category-page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    padding: 0 20px calc(90px + var(--safe-area-inset-bottom)); /* Запас под высоту плавающей корзины */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Устраняем "бездны": неактивные страницы не занимают места */
    height: 0;
    min-height: auto;
    overflow: hidden;
    visibility: hidden;
    opacity: 1;
    pointer-events: none;
    will-change: transform;
}

.category-page.active {
    height: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

/* При перетягивании (класс на родителе) показываем соседей */
.menu-track.is-dragging .category-page {
    height: auto;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    opacity: 1;
    align-items: stretch;
}

/* Растягивание последней карточки на всю ширину при нечётном количестве (вертикальный вид) */
.product-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.product-grid > .product-card:last-child:nth-child(odd) .product-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.product-grid > .product-card:last-child:nth-child(odd) .product-title {
    font-size: 19.2px;
}

/* Footer Schedule */
.schedule {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    margin-bottom: 19.2px;
    align-items: center;
}

.schedule-label {
    font-size: var(--font-size-h);
    opacity: 1;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.schedule-time {
    font-size: var(--font-size-h);
    font-weight: 500;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

/* Удаляем старые анимации появления */
.product-grid.slide-in-right,
.product-grid.slide-in-left,
#heroViewport.slide-in {
    animation: none !important;
}

.product-card {
    background-color: var(--surface-color);
    border-radius: var(--card-radius);
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition:
        transform 0.1s cubic-bezier(0.1, 0, 0.2, 1),
        box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    min-width: 0;
}

.product-card:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.product-card.product-card-origin-hidden {
    opacity: 0;
}

.product-card.product-card-origin-returning {
    transition:
        opacity 180ms ease,
        transform 0.1s cubic-bezier(0.1, 0, 0.2, 1),
        box-shadow 0.2s ease;
}

#productSheet.product-sheet-returning {
    -webkit-clip-path: inset(
        var(--product-return-crop-top, 0px) 0 var(--product-return-crop-bottom, 0px) 0 round
            var(--product-return-clip-radius, 28px)
    );
    clip-path: inset(
        var(--product-return-crop-top, 0px) 0 var(--product-return-crop-bottom, 0px) 0 round
            var(--product-return-clip-radius, 28px)
    );
}

#productSheet.product-sheet-dragging {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

#productSheet #contentScroll {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

#productSheet.product-sheet-returning .sheet-hero-controls,
#productSheet.product-sheet-returning #contentScroll,
#productSheet.product-sheet-returning #sheetCartCapsule {
    opacity: var(--product-return-content-opacity, 1);
}

#productSheet.product-sheet-return-animating .sheet-hero-controls,
#productSheet.product-sheet-return-animating #contentScroll,
#productSheet.product-sheet-return-animating #sheetCartCapsule {
    transition: opacity 220ms ease;
}

.product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background-color: #f5efeb;
    border-radius: 20px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 16.8px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-family: var(--font-product);
    text-transform: none !important; /* Убираем капслок */
    line-height: 1.25;
    min-height: 41.6px;
    /* Минимальная высота для выравнивания кнопок */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.product-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-price {
    font-weight: 500;
    font-size: 16.8px;
    color: var(--text-primary);
    font-family: var(--font-product);
}

.add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: #111111;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.add-btn svg {
    stroke-width: 2.35;
}

/* Floating Cart Widget */
.floating-cart {
    position: fixed;
    bottom: calc(12px + var(--safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 420px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24));
    backdrop-filter: blur(34px) saturate(170%);
    -webkit-backdrop-filter: blur(34px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.72),
        0 18px 50px rgba(0, 0, 0, 0.16);
    border-radius: 28px;
    padding: 12.8px 22.4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 900;
    cursor: pointer;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s;
}

.floating-cart:active {
    transform: translateX(-50%) scale(0.96);
}

.fc-info {
    display: flex;
    flex-direction: column;
}

.fc-sum {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-product);
}

.fc-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.fc-avatars {
    display: flex;
    align-items: center;
}

.fc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
}

.fc-avatar:not(:first-child) {
    margin-left: -12px;
}

/* Overlays and Modals */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Затемнение 0.5 по ТЗ */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 200ms ease,
        visibility 200ms ease;
}

.overlay.view-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block !important; /* Убеждаемся, что display: none от общего класса не срабатывает сразу */
}

/* Base Modal (Legacy) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background: var(--bg-color);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-top-left-radius: 32px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: none;
    /* Убираем тень по умолчанию */
    visibility: hidden;
    /* Скрываем из отрисовки в закрытом состоянии */
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    visibility: visible;
}

.close-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--surface-color);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    z-index: 10;
}

.modal-image {
    width: 100%;
    height: 250px;
    background-color: var(--surface-color);
    border-radius: 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-details h3 {
    font-size: 24px;
    margin-bottom: 8px;
}

.modal-details p {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 15.2px;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-price {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-product);
}

.add-to-cart-btn {
    background-color: var(--accent-color);
    color: #111111;
    border: none;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 17.6px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(227, 210, 81, 0.3);
    transition: transform 0.2s ease;
}

.add-to-cart-btn:active {
    transform: scale(0.96);
}

/* App Views & Nav Logic */
.view-hidden {
    display: none !important;
}

.nav-icon-wrapper {
    position: relative;
    display: inline-flex;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--accent-color);
    color: #111111;
    font-size: 10.4px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    border: 1.5px solid var(--surface-color);
}

/* Cart Screen */
.cart-items-container {
    padding: 0 0 0;
    display: flex;
    flex-direction: column;
}

.cart-items-group {
    background: #f7f7f7;
    border-radius: 20px;
    margin: 0 20px 6px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 64px 16px;
    font-size: 17.6px;
}

.cart-item-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: 0;
    background: transparent;
}

.cart-item-wrapper:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 78px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    z-index: 3;
    pointer-events: none;
}

.cart-item-swipe-bg {
    position: absolute;
    top: 8px;
    right: 10px;
    bottom: 8px;
    width: 74px;
    background: #ff4d4f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 1;
    border-radius: 17px;
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.cart-item-wrapper.revealing-delete .cart-item-swipe-bg {
    opacity: 1;
    transform: translateX(0);
}

.cart-item {
    background: #f7f7f7;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    position: relative;
    z-index: 2;
    transition:
        transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 220ms ease;
    touch-action: pan-y;
    will-change: transform;
    box-shadow: none;
    border-radius: 0;
}

.cart-item.swiping-left {
    transition: none;
}

.cart-item.deleted {
    transform: translateX(-110%) !important;
    opacity: 0;
}

.cart-item-img {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    object-fit: cover;
    background: #f0f0f0;
}

.cart-item-info {
    flex-grow: 1;
}

.cart-item-title {
    font-weight: 500;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.12;
}

.cart-item-price {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-primary);
}

/* Cart Qty Control */
.cart-qty-ctrl {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 18px;
    padding: 2px 6px;
    min-width: 86px;
    justify-content: space-between;
}

.qty-btn {
    background: transparent;
    border: none;
    width: 23px;
    height: 23px;
    font-size: 18px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qty-btn:active {
    background: #e0e0e0;
}

.qty-val {
    width: 22px;
    text-align: center;
    font-weight: 600;
    font-size: 17px;
}

@media (max-width: 430px) {
    .cart-items-group {
        margin-left: 20px;
        margin-right: 20px;
    }

    .cart-item {
        padding: 8px 14px;
        gap: 10px;
    }

    .cart-item-wrapper:not(:last-child)::after {
        left: 72px;
        right: 14px;
    }

    .cart-item-img {
        width: 44px;
        height: 44px;
    }

    .cart-item-title {
        font-size: 13.5px;
    }

    .cart-item-price {
        font-size: 16px;
    }

    .cart-qty-ctrl {
        min-width: 84px;
        padding: 2px 6px;
    }

    .qty-val {
        width: 22px;
        font-size: 16px;
    }
}

/* Cross-sell Container */
#crossSellContainer {
    position: static;
    background: var(--surface-color);
}

.cart-scroll-area {
    padding-top: 122px;
    padding-bottom: calc(220px + var(--safe-area-inset-bottom));
}

.cross-sell-section {
    margin-top: 0;
    padding-top: 16px;
}

.cross-sell-title {
    font-weight: 600;
    font-size: 17.6px;
    margin-bottom: 14px;
    padding: 0 20px;
}

.cross-sell-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 0 20px 18px;
    scrollbar-width: none;
}

.cross-sell-scroll::-webkit-scrollbar {
    display: none;
}

.cross-sell-card {
    flex: 0 0 120px;
    width: 120px;
    background: var(--surface-color);
    border-radius: 16px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.cross-sell-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
    background: #eee;
    flex-shrink: 0;
}

.cross-sell-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cross-sell-name {
    font-size: 12.8px;
    font-weight: 400;
    margin-bottom: 3.2px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.cross-sell-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.cross-sell-price {
    font-weight: 500;
    font-size: 14.4px;
}

.cross-sell-add {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #111;
    border: none;
    font-weight: bold;
    font-size: 17.6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cross-sell-add:active {
    transform: scale(0.9);
}

.cart-footer {
    position: fixed;
    bottom: calc(70px + var(--safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    background: var(--surface-color);
    padding: 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 90;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: var(--text-secondary);
}

.cart-total-row strong {
    font-size: 22.4px;
    color: var(--text-primary);
}

.checkout-btn {
    background: var(--accent-color);
    color: #111111;
    border: none;
    padding: 17.6px;
    border-radius: 16px;
    font-weight: 500;
    font-size: 17.6px;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(227, 210, 81, 0.2);
    transition: transform 0.15s cubic-bezier(0.1, 0, 0.2, 1);
}

#cartFooter {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.46)) !important;
    backdrop-filter: blur(30px) saturate(170%);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-bottom: 0;
}

.checkout-btn,
.capsule-add-btn,
.add-btn,
button[style*='background: var(--accent-color)'] {
    font-weight: 500 !important;
}

#paymentItemSBP,
.sheet-cart-capsule {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.32)) !important;
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.58);
}

#paymentItemCard.payment-card-soon {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    cursor: default;
    background:
        linear-gradient(180deg, rgba(255, 232, 35, 0.28) 0%, rgba(255, 255, 255, 0.52) 78%), rgba(255, 255, 255, 0.56) !important;
    border: 1px solid rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#paymentItemCard.payment-card-soon .u-style-032 {
    width: 100%;
}

.payment-soon-badge {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.payment-soon-text {
    color: rgba(0, 0, 0, 0.62);
    font-size: 0.86rem;
    line-height: 1.3;
}

.checkout-btn:active {
    transform: scale(0.96);
    background-color: var(--accent-hover);
}

/* Profile Screen */
.profile-card {
    margin: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface-color);
    padding: 24px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.profile-avatar {
    width: 60px;
    height: 60px;
    background: #f5efeb;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
}

.profile-info h3 {
    margin-bottom: 1.6px;
    font-size: 19.2px;
}

.profile-info p {
    color: var(--text-secondary);
    font-size: 13.6px;
}

.profile-menu {
    margin: 24px 20px;
    background: var(--surface-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.profile-menu-item {
    display: flex;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    cursor: pointer;
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.text-danger {
    color: #ff4b4b;
}

/* About & Footer */
.about-card {
    margin: 0 20px 32px;
    background: var(--surface-color);
    padding: 24px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
}

.about-card h3 {
    margin-bottom: 8px;
}

.app-footer {
    padding: 24px 20px 16px;
    text-align: center;
    color: var(--text-secondary);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
}

.social-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 13.6px;
}

.footer-address {
    font-size: 13.6px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.footer-copy {
    font-size: 12px;
    opacity: 0.6;
}

.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 600px;
    background: var(--surface-color);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 0;
    z-index: 1010;
    transition: transform 220ms ease-in; /* Время закрытия по умолчанию */

    max-height: 100dvh;
    overflow-y: auto;
    visibility: hidden;
    display: flex;
    flex-direction: column;
}

.bottom-sheet.show {
    transform: translateX(-50%) translateY(0);
    transition: transform 280ms var(--ios-easing); /* Время открытия по ТЗ */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    visibility: visible;
}

@media (max-width: 600px) {
    .bottom-sheet {
        max-width: 100% !important;
        height: auto !important;
        max-height: 92dvh !important;
        border-top-left-radius: 28px !important;
        border-top-right-radius: 28px !important;
    }

    /* Высокие шторки с фиксированной высотой */
    #productSheet,
    #cartSheet,
    #profileSheet,
    #authSheet {
        height: 92dvh !important;
        max-height: 92dvh !important;
    }

    /* Средние шторки — по контенту, но не больше 80% */
    #settingsSheet,
    #feedbackSheet,
    #aboutSheet {
        height: auto !important;
        max-height: 80dvh !important;
    }

    /* Маленькие шторки — строго по контенту */
    #ingredientsSheet,
    #emailSheet,
    #paymentSheet,
    #addCardSheet,
    #installSheet,
    #iosInstallSheet,
    #orderConfirmSheet,
    #underDevelopmentSheet {
        height: auto !important;
        max-height: 70dvh !important;
    }

    /* Центрированные модалки (не bottom-sheet) */
    #deleteAccountModal,
    #logoutModal {
        height: auto !important;
        max-height: 60dvh !important;
    }

    #app {
        max-width: 100% !important;
    }
}

/* White Cart override */
#cartSheet {
    background: #ffffff;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

/* Modal Stacking System v18.21 */

/* Level 1: Base Modals (Cart, Profile, Product) */
#profileOverlay,
#productOverlay,
#cartOverlay {
    z-index: 1000;
}
#profileSheet,
#productSheet,
#cartSheet {
    z-index: 1010;
}

/* Level 2: Sub-modals (Settings) */
#settingsOverlay {
    z-index: 1020;
}
#settingsSheet {
    z-index: 1030;
}

/* Level 3: Top-level Modals (About, Feedback, Email, Payment, Ingredients, AvatarPicker) */
#aboutOverlay,
#feedbackOverlay,
#emailOverlay,
#paymentOverlay,
#addCardOverlay,
#ingredientsOverlay,
#avatarPickerOverlay,
#deleteAccountOverlay {
    z-index: 1040;
}
#aboutSheet,
#feedbackSheet,
#emailSheet,
#paymentSheet,
#addCardSheet,
#ingredientsSheet,
#avatarPickerSheet,
#deleteAccountModal {
    z-index: 1050;
}

#feedbackSheet .sheet-header {
    min-height: 70px !important;
    padding-top: 18px !important;
    padding-bottom: 4px !important;
}

#underDevelopmentOverlay {
    z-index: 2940;
}

#underDevelopmentSheet {
    z-index: 2950;
}

.sheet-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-color);
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    height: auto !important;
    min-height: 90px !important;
    padding: 24px 20px 8px !important; /* Увеличили верхний отступ до 24px (24px) */
    box-sizing: border-box;
}

#addCardSheet .sheet-header {
    padding-top: 6.4px;
}

.sheet-icon-btn {
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    font-size: 17.6px;
}

/* Unified Liquid Glass Buttons (iOS 17-18 Style) for Sheets */
.sheet-icon-btn {
    min-height: 48px;
    height: 48px;
    width: 48px;
    min-width: 48px; /* ГАРАНТИЯ: не сплющит */
    flex-shrink: 0; /* ГАРАНТИЯ: не сплющит во flex-контейнерах */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26));
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
    color: #111;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.75),
        0 8px 22px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    padding: 0;
    -webkit-appearance: none;
    outline: none;
}

.modal-close-btn {
    position: relative;
    font-size: 0 !important;
}

.modal-close-btn > * {
    opacity: 0;
}

.modal-close-btn::before,
.modal-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.modal-close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Minimal Header Profile Icon */
.header-icon-btn {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: transform 0.2s ease;
    padding: 0;
    -webkit-appearance: none;
    outline: none;
}

/* Interactive Buttons Global scale effect */
button:not(.no-anim),
.sheet-icon-btn,
.header-icon-btn,
.add-btn,
.checkout-btn,
.size-opt {
    transition:
        transform 120ms ease,
        opacity 120ms ease,
        background-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}

button:active:not(.no-anim),
.sheet-icon-btn:active,
.header-icon-btn:active,
.add-btn:active,
.checkout-btn:active,
.size-opt:active {
    transform: scale(0.96) !important;
}

/* Size Variants */
.sheet-icon-btn-large {
    width: 48px;
    height: 48px;
}

.sheet-icon-btn-xl {
    width: 52px;
    height: 52px;
}

/* Visual Overrides for context */
.sheet-icon-btn-solid {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.32));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.text-danger {
    color: #ff4d4f !important;
}

.cart-clear-btn:active {
    background: rgba(255, 77, 79, 0.12);
}

/* Nutrition Layout */
.nutrition-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* Расстояние между элементами КБЖУ */
    margin-top: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.nutri-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрируем всё внутри (цифру и текст) */
    min-width: 60px;
}

.nutri-val {
    font-size: 18.4px;
    font-weight: 500; /* Сделали еще тоньше (Medium) */
    color: var(--text-primary);
    line-height: 1.1;
    text-align: center;
}

.nutri-label {
    font-size: 11.52px;
    color: var(--text-secondary);
    margin-top: 3px;
    font-weight: 500;
    text-align: center;
}

/* Product Sheet Cart Capsule */
.sheet-cart-capsule {
    position: absolute;
    bottom: calc(8px + var(--safe-area-inset-bottom));
    left: 32px; /* Сделали чуть уже */
    right: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 12px; /* Увеличили высоту через padding */
    background: #ffffff;
    border-radius: 40px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 0 1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.3s ease;
}

.size-selector {
    display: flex;
    position: relative;
    background: #f4f4f4 !important;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 3px;
    width: 180px; /* Увеличено со 165px для лучшей вместимости текста мл */
    height: 48px; /* Чуть увеличили высоту для лучшего баланса с новой шириной */
    align-items: stretch;
}

.size-indicator {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(33.333% - 4px);
    height: calc(100% - 6px);
    background: var(--accent-color);
    border-radius: 20px; /* Соответствует внешнему радиусу для эффекта вложенности */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
}

.size-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    position: relative;
    background: transparent;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.size-opt:active {
    transform: scale(0.9);
}

.size-opt .size-letter {
    font-weight: 600;
    font-size: 20px; /* Чуть крупнее для баланса */
    color: var(--text-secondary);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(10px);
}

.size-opt .size-vol {
    font-size: 11.2px;
    color: #111;
    font-weight: 300; /* Максимально тонкий */
    opacity: 0;
    transform: translateY(14px);
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.size-opt.active .size-letter {
    font-weight: 850;
    color: var(--text-primary);
    transform: translateY(-2px);
}

.size-opt.active .size-vol {
    opacity: 1;
    transform: translateY(-5px); /* Еще ближе, почти вплотную */
}

.capsule-add-btn {
    background: #fce311;
    border: none;
    padding: 0 24px;
    height: 48px;
    border-radius: 24px;
    font-family: var(--font-product);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

/* Modal Centered */
.modal-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-color);
    padding: 32px;
    border-radius: 28px;
    width: 90%;
    max-width: 400px;
    z-index: 1021;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.close-modal-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 19.2px;
    cursor: pointer;
}

/* Support Dropdown */
.support-dropdown {
    position: absolute;
    top: 64px;
    left: 24px;
    background: var(--surface-color);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    z-index: 102;
}

.support-dropdown a {
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.support-dropdown a:last-child {
    border: none;
}

/* Profile Elements */
.profile-phone {
    color: var(--text-secondary);
}

/* Navigation stack for profile */
.profile-view-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.profile-main-view,
.profile-settings-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface-color);
    display: flex;
    flex-direction: column;
}

.profile-settings-view {
    transform: translateX(100%);
}

.profile-view-wrapper.show-settings .profile-main-view {
    transform: translateX(-30%);
    opacity: 0.5;
}

.profile-view-wrapper.show-settings .profile-settings-view {
    transform: translateX(0);
}

/* Settings List Rows */
.settings-list {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-left {
    display: flex;
    flex-direction: column;
    gap: 3.2px;
}

.settings-row-label {
    font-weight: 600;
    font-size: 16px;
}

.settings-row-sub {
    font-size: 13.6px;
    color: var(--text-secondary);
}

/* Settings Groups (Plates) */
.settings-group {
    background: #f7f7f7;
    border-radius: 20px;
    margin-bottom: 24px;
    overflow: hidden;
}

.settings-group .settings-row {
    padding: 17.6px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.settings-group .settings-row:last-child {
    border-bottom: none;
}

.settings-row-value {
    font-weight: 500;
    color: #bbb;
}

.name-edit-input {
    border: none;
    background: transparent;
    text-align: right;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0;
    outline: none;
    width: 150px;
}

.name-edit-input::placeholder {
    color: #ccc;
}

/* Apple Style Toggle */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
}

.ios-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ios-switch-bg);
    transition: 0.4s;
    border-radius: 34px;
}

.ios-slider:before {
    position: absolute;
    content: '';
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

input:checked + .ios-slider {
    background-color: var(--ios-switch-active);
}

input:checked + .ios-slider:before {
    transform: translateX(20px);
}

.profile-card-clickable {
    background: #f7f7f7;
    padding: 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-card-clickable:active {
    transform: scale(0.98);
}

.settings-input-row {
    overflow: hidden;
    max-height: 0;
    transition:
        transform 0.3s ease-out,
        opacity 0.3s ease;
}

.settings-input-row.open {
    max-height: 100px;
}

.settings-email-input {
    width: 100%;
    padding: 12.8px 16px;
    border-radius: 12px;
    border: 1px solid #eee;
    background: #fdfdfd;
    font-family: inherit;
    font-size: 15.2px;
    margin-bottom: 16px;
}

/* Order History */
.history-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.history-item-info {
    flex: 1;
}

.history-item-title {
    font-weight: 600;
    margin-bottom: 3.2px;
}

.history-item-price {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 15.2px;
    margin-top: 4px;
}

.repeat-btn {
    background: var(--surface-color);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.repeat-btn:active {
    background: var(--accent-color);
}

.product-accordion summary::-webkit-details-marker {
    display: none;
}

.product-accordion[open] .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-arrow {
    transition: transform 0.3s;
}

.heart-btn.active svg {
    fill: #ff4d4f;
    stroke: #ff4d4f;
    transform: scale(1.15);
}

.heart-btn svg {
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Size Selectors Restored - Cleaned up to avoid overlapping backgrounds and bold text */
.size-opt.active .size-letter {
    color: #111 !important;
}

.size-opt.active .size-vol {
    opacity: 1 !important;
    font-weight: 300 !important; /* Убираем жирный, возвращаем тонкий */
}

.size-letter {
    width: 34px;
    height: 34px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.3s;
    background: transparent;
    color: var(--text-primary);
}

.size-vol {
    font-size: 10.4px;
    transition: all 0.3s;
    margin-top: 2px;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* Убираем transform из анимации, оставляем только прозрачность */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    overflow: hidden;
    /* Форсируем аппаратное ускорение для стабильности с первого кадра */
    transform: translateZ(0);
}

#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Centered Modals */
.modal-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 92%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 40px;
    padding: 29px 28.8px 40px !important;
    z-index: 2200;
    text-align: center;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 220ms ease-in,
        opacity 200ms ease; /* Время закрытия */
    overflow: visible !important;
}

.overlay:not(.view-hidden) + .modal-centered,
.overlay:not(.view-hidden) .modal-centered {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition:
        transform 280ms var(--ios-easing),
        opacity 200ms ease; /* Время открытия */
}

@media (max-width: 767px) {
    .modal-centered {
        left: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: translateY(100%) !important;
        border-radius: 32px 32px 0 0 !important;
        padding-bottom: calc(24px + var(--safe-area-inset-bottom)) !important;
    }
}

.overlay:not(.view-hidden) + .modal-centered,
.overlay:not(.view-hidden) .modal-centered {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 767px) {
    .overlay:not(.view-hidden) + .modal-centered,
    .overlay:not(.view-hidden) .modal-centered {
        transform: translateY(0) !important;
        opacity: 1;
        visibility: visible;
    }
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    color: #111;
    white-space: nowrap; /* По умолчанию в одну строку (для Выхода) */
}

#deleteAccountModal .modal-title {
    white-space: normal;
    text-align: center !important;
    width: 100%;
}

.modal-mascot-sync {
    width: 150px !important; /* Гарантированный размер 150px */
    margin: 0 auto 24px; /* Центрирование */
    overflow: visible !important;
}

.modal-mascot-sync img {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible !important;
}

.modal-text {
    font-size: 18.4px;
    color: #111;
    line-height: 1.4;
    margin-bottom: 40px;
    padding: 0 16px;
    font-weight: 500;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-actions button {
    width: 100%;
    min-height: 48px;
    padding: 12.8px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary {
    background: var(--accent-color);
    color: #111;
}

.btn-primary:active {
    background: var(--accent-hover);
    transform: scale(0.97);
}

.btn-outline-red {
    background: none;
    color: #ff4d4f;
    border: 1.5px solid #ff4d4f !important;
}

.btn-outline-red:active {
    background: rgba(255, 77, 79, 0.05);
    transform: scale(0.97);
}

/* Blur effect on overlay when modal is active */
#logoutOverlay {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background: rgba(0, 0, 0, 0.3);
    z-index: 2150;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* --- Performance & Accessibility v18.99i --- */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Force Global Header Symmetry & Pure White Theme (Moved from index.html v19.40) */
.sheet-header {
    height: 72px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
}

.bottom-sheet {
    background: #ffffff !important;
    bottom: 0 !important;
}

.sheet-header h2,
.sheet-header h3 {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

#cartSheet > .sheet-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 12 !important;
    height: 124px !important;
    min-height: 124px !important;
    padding: 24px 20px 42px !important;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(255, 255, 255, 0.74) 74%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    border-bottom: none !important;
}

.modal-centered h2,
.modal-centered h3,
.modal-title {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 24px !important;
    width: 100% !important;
}

h2,
h3 {
    margin: 0 !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
}

.modal-centered {
    padding: 24px 28.8px 40px !important;
    background: #ffffff !important;
}

.modal-title {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- PWA Install & Toast Styles v19.45 --- */
.meren-toast {
    position: fixed;
    bottom: 110px; /* Выше таббара если есть */
    left: 50%;
    transform: translateX(-50%) translateY(200px);
    background: #111;
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    font-size: 15.2px;
    font-weight: 700;
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.meren-toast.show {
    transform: translateX(-50%) translateY(0);
}

#appUpdatePrompt {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-area-inset-bottom));
    z-index: 13000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: 430px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    background: rgba(17, 17, 17, 0.92);
    color: #fff;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition:
        transform 260ms var(--ios-easing),
        opacity 180ms ease;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

#appUpdatePrompt.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.app-update-prompt__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.app-update-prompt__copy strong {
    font-size: 14px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 0;
}

.app-update-prompt__copy span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
}

.app-update-prompt__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-update-prompt__actions button {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.app-update-prompt__actions button[data-update-reload] {
    background: var(--accent-color);
    color: #111;
}

@media (max-width: 370px) {
    #appUpdatePrompt {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .app-update-prompt__actions {
        justify-content: stretch;
    }

    .app-update-prompt__actions button {
        flex: 1;
    }
}

#installSheet,
#iosInstallSheet {
    z-index: 10001 !important;
}
#installOverlay,
#iosInstallOverlay {
    z-index: 10000 !important;
}
/* --- Auth Sheet & Login Flow --- */
.auth-screens-container {
    position: relative;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.auth-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    transition:
        transform 0.5s var(--ios-easing),
        opacity 0.3s ease;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    background: var(--bg-color);
}

.auth-screen.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.auth-screen.prev {
    transform: translateX(-30%);
    opacity: 0;
}

/* --- Under Development Sheet --- */
.under-development-content {
    position: relative;
    padding: 32px 24px calc(32px + var(--safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 232, 35, 0.18) 0%, rgba(255, 255, 255, 0) 42%), #fff;
}

.under-development-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.under-development-badge {
    width: 76px;
    height: 76px;
    margin: 12px 0 20px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--accent-color);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}

.under-development-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.under-development-content h2 {
    margin: 0 0 12px;
    color: #111;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: 0.5px;
}

.under-development-content p {
    max-width: 330px;
    margin: 0 0 28px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}

.under-development-action {
    width: 100%;
    height: 58px;
    border-radius: 20px;
    font-size: 16.8px;
    font-weight: 800;
    animation: none;
}

.auth-hero {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}

.auth-mascot {
    width: 130px;
    height: auto;
    display: block;
    margin: 0 auto;
    animation: authFloat 3s ease-in-out infinite;
}

@keyframes authFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 24px;
}

.auth-input-group {
    margin-bottom: 16px;
}

.auth-label {
    font-size: 13px;
    font-weight: 700;
    color: #a1a1a1;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
    letter-spacing: 0.5px;
}

.auth-input {
    width: 100%;
    height: 56px;
    padding: 0 20px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 18px;
    font-family: var(--font-main);
    font-size: 17px;
    outline: none;
    transition: all 0.2s;
}

.auth-input:focus {
    background: #fff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(249, 229, 50, 0.15);
}

.sms-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 24px 0;
}

.sms-cell {
    width: 56px;
    height: 68px;
    background: #f5f5f7;
    border: 2px solid transparent;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    font-family: var(--font-heading);
    outline: none;
    transition: all 0.2s;
}

.sms-cell:focus {
    border-color: var(--accent-color);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.social-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.social-auth-btn {
    height: 56px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.social-auth-btn:active {
    background: #f5f5f7;
    transform: scale(0.95);
}

.auth-demo-code-hint {
    width: fit-content;
    margin: -16px auto 22px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(249, 229, 50, 0.24);
    color: #111;
    font-size: 13px;
    font-weight: 700;
}

.auth-footer {
    margin-top: auto;
    font-size: 12px;
    text-align: center;
    color: #999;
    padding-bottom: 20px;
}

/* --- Safe Area & Bottom Sheet Padding Fixes --- */
.bottom-sheet {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Для шторок где уже есть свой padding-bottom у контента внутри — перекрываем */
#cartSheet,
#productSheet {
    padding-bottom: 0;
}

/* Compact non-scrollable settings sheet */
#settingsSheet {
    height: min(90vh, 760px) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

#settingsSheet .sheet-header {
    min-height: 82px !important;
    padding: 17.6px 20px 4px !important;
    flex-shrink: 0;
}

#settingsSheet .settings-avatar-row {
    margin-top: 4.8px !important;
    margin-bottom: 21.6px !important;
    flex-shrink: 0;
}

#settingsSheet .settings-avatar-row > div > div:first-child {
    width: 122px !important;
    height: 122px !important;
    border-radius: 61px !important;
}

#settingsSheet .settings-avatar-row > div > div:last-child {
    width: 26px !important;
    height: 26px !important;
    border-radius: 13px !important;
}

#settingsSheet .settings-content {
    padding: 0 20px 20px !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#settingsSheet .settings-group {
    margin-bottom: 15.2px !important;
    border-radius: 20px !important;
    padding: 6.4px 20px !important;
}

#settingsSheet .settings-group > div {
    padding-top: 13.76px !important;
    padding-bottom: 13.76px !important;
}

#settingsSheet .settings-content > button {
    padding: 16px !important;
    margin-top: 5.6px !important;
    margin-bottom: 12.8px !important;
}

#settingsSheet .settings-content > div:last-child button {
    font-size: 13.12px !important;
}

/* Compact non-scrollable about sheet */
#aboutSheet {
    height: min(90vh, 760px) !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

#aboutSheet .sheet-header {
    position: relative !important;
    min-height: 72px !important;
    padding: 16px 20px 0 !important;
    flex-shrink: 0;
    background: transparent !important;
}

#aboutSheet .about-content {
    flex: 1;
    min-height: 0;
    padding: 5.6px 20px 20px !important;
    overflow: hidden;
    justify-content: flex-start;
}

#aboutSheet .about-brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 26.4px;
}

#aboutSheet .about-brand-block img {
    width: 220px !important;
    margin-bottom: 12px !important;
}

#aboutSheet .about-brand-block span {
    margin-bottom: 9.6px !important;
    font-size: 15.2px !important;
}

#aboutSheet .about-brand-block div {
    margin-bottom: 4.8px !important;
    font-size: 13.12px !important;
}

#aboutSheet .about-brand-block button {
    margin-bottom: 0 !important;
    font-size: 14.72px !important;
    padding: 2.4px 0 !important;
}

#aboutSheet .about-links-group {
    border-radius: 20px !important;
    padding: 8.8px 19.2px !important;
}

#aboutSheet .about-links-group a {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

#aboutSheet .about-links-group span {
    font-size: 15.68px !important;
}

#aboutSheet .about-contact {
    margin-top: 18.4px !important;
    font-size: 15.2px !important;
}

/* App-wide sheet header fade */
.bottom-sheet > .sheet-header {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(255, 255, 255, 0.74) 74%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    border-bottom: none !important;
}

:is(#cartSheet, #profileSheet, #settingsSheet, #ingredientsSheet) > .sheet-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 12 !important;
    height: 124px !important;
    min-height: 124px !important;
    padding: 24px 20px 42px !important;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    pointer-events: auto;
}

#profileSheet .profile-sticky-header {
    padding-top: calc(16px + 104px) !important;
}

#settingsSheet .settings-avatar-row {
    margin-top: 104px !important;
}

#ingredientsSheet > .sheet-header + div {
    padding-top: 104px !important;
}

/* Compact branded order confirmation sheet */
#orderConfirmSheet {
    height: auto !important;
    padding: 0 !important;
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
    overflow-y: auto;
}

.order-confirm-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 20px calc(18px + var(--safe-area-inset-bottom));
    text-align: center;
}

.order-confirm-title {
    font-family: var(--font-heading);
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: 0.5px;
}

.order-confirm-card {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    background: #f9f9f9;
    text-align: left;
}

.order-confirm-row,
.order-confirm-total-row,
.order-confirm-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.order-confirm-row {
    margin-bottom: 10px;
}

.order-confirm-row:last-of-type {
    margin-bottom: 0;
}

.order-confirm-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.order-confirm-strong {
    color: #111;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
}

.order-confirm-items-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, 0.14);
}

.order-confirm-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

.order-confirm-item {
    color: #111;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.order-confirm-item span:first-child {
    min-width: 0;
}

.order-confirm-item span:last-child {
    flex-shrink: 0;
    font-weight: 800;
}

.order-confirm-total-row {
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #111;
    font-size: 16px;
    font-weight: 900;
}

.order-confirm-total-row span:last-child {
    font-size: 18px;
}

.order-confirm-payment {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.order-confirm-payment span {
    color: #111;
    font-weight: 800;
}

.order-confirm-wait {
    margin: 0 0 4px;
}

.order-confirm-time {
    color: #111;
    font-size: 30px;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.order-confirm-caption {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.order-confirm-button {
    width: 100%;
    height: 54px;
    border-radius: 18px !important;
    animation: none;
    font-size: 17px;
    font-weight: 800;
    text-transform: none !important;
}

@media (max-width: 380px) {
    .order-confirm-content {
        gap: 12px;
        padding: 16px 18px calc(16px + var(--safe-area-inset-bottom));
    }

    .order-confirm-card {
        padding: 16px 18px;
    }

    .order-confirm-time {
        font-size: 28px;
    }
}

/* Final interaction polish */
.app-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 16px;
}

.header-left,
.header-center,
.header-icon {
    min-width: 0;
}

.header-center {
    justify-self: center;
    grid-column: 2;
}

.header-left {
    justify-self: start;
    max-width: min(30vw, calc(50vw - 96px), 120px);
}

.header-icon {
    justify-self: end;
}

#locationVisual,
#currentLocDisplay {
    max-width: 100%;
}

#currentLocDisplay {
    display: block;
    font-size: clamp(12px, 3.35vw, 14.4px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirm-dialog-overlay {
    z-index: 3000 !important;
}

.confirm-dialog-modal {
    z-index: 3010 !important;
}

#authOverlay {
    z-index: 2920;
}

#authSheet {
    z-index: 2930;
}

#authSheet.auth-fullscreen {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-bottom: 0 !important;
    background: var(--accent-color) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

#authSheet.auth-fullscreen.show {
    transform: translateX(-50%) translateY(0) !important;
}

#authSheet.auth-fullscreen #authStep2 > div:first-child,
#authSheet.auth-fullscreen #authStep3 > div:first-child {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
}

#authSheet.auth-fullscreen .auth-screens-container {
    overflow: hidden;
}

#authSheet.auth-fullscreen .auth-screen {
    background: #fff !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#authSheet.auth-fullscreen #authStep2,
#authSheet.auth-fullscreen #authStep3 {
    background: linear-gradient(
        to bottom,
        var(--accent-color) 0,
        var(--accent-color) var(--auth-yellow-height, 50dvh),
        #fff var(--auth-yellow-height, 50dvh),
        #fff 100%
    ) !important;
}

#authSheet.auth-fullscreen #authStep2 {
    --auth-yellow-height: clamp(210px, 28dvh, 250px);
}

#authSheet.auth-fullscreen #authStep3 {
    --auth-yellow-height: clamp(388px, 49dvh, 440px);
}

#authSheet.auth-fullscreen .auth-yellow-header img {
    flex-shrink: 0;
}

#authSheet.auth-fullscreen .auth-register-header {
    height: clamp(210px, 28dvh, 250px) !important;
}

#authSheet.auth-fullscreen .auth-sms-header {
    height: clamp(388px, 49dvh, 440px) !important;
}

#authSheet.auth-fullscreen .auth-sms-header img:first-child {
    margin-bottom: 30px !important;
}

#authSheet.auth-fullscreen .auth-sms-header img:last-child {
    width: 210px !important;
}

#authSheet.auth-fullscreen .auth-form-card {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding: clamp(36px, 5.2dvh, 48px) 24px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

#authSheet.auth-fullscreen .auth-register-card {
    padding-top: clamp(38px, 5.5dvh, 52px) !important;
}

#authSheet.auth-fullscreen .auth-sms-card {
    padding-top: clamp(38px, 5.5dvh, 52px) !important;
}

#authSheet.auth-fullscreen .auth-action-stack {
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

#authSheet.auth-fullscreen #authStep2 .auth-action-stack {
    gap: 13px !important;
}

#authSheet.auth-fullscreen #authStep3 #authCodeContainer {
    margin-bottom: 34px !important;
}

#authSheet.auth-fullscreen #authStep3 #authTimerArea {
    margin-bottom: 36px !important;
}

#authSheet.auth-fullscreen .auth-secondary-btn {
    background: #f2f2f7 !important;
    color: #111 !important;
}

.sheet-icon-btn.modal-close-btn {
    color: #111;
}

.sheet-icon-btn.modal-close-btn::before,
.sheet-icon-btn.modal-close-btn::after {
    width: 17px;
    height: 2px;
}

#settingsEmailInput::placeholder {
    color: #a1a1a1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

#settingsEmailInput:focus {
    color: #111;
}

#settingsOverlay.profile-drilldown-overlay {
    background: rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#profileSheet {
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.bottom-sheet.show.modal-stack-under,
#profileSheet.profile-under-settings {
    transform: translateX(-50%) translateY(12px) scale(0.92);
    transform-origin: center center;
    opacity: 1;
    filter: blur(1.4px) saturate(0.98);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.modal-centered.modal-stack-under {
    transform: translate(-50%, -50%) scale(0.92) !important;
    transform-origin: center center;
    opacity: 1;
    filter: blur(1.4px) saturate(0.98);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.overlay.modal-stack-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#settingsSheet.profile-drilldown-sheet {
    transform: translateX(-50%) translate3d(100vw, 0, 0);
    transition:
        transform 360ms var(--ios-easing),
        box-shadow 280ms ease;
    visibility: hidden;
    will-change: transform;
}

#settingsSheet.profile-drilldown-sheet.show {
    transform: translateX(-50%) translate3d(0, 0, 0);
    transition:
        transform 360ms var(--ios-easing),
        box-shadow 280ms ease;
    visibility: visible;
}

#settingsSheet.profile-drilldown-sheet.show.modal-stack-under {
    transform: translateX(-50%) translateY(8px) scale(0.955) !important;
    opacity: 1;
}

#settingsSheet.profile-drilldown-sheet.closing-to-profile {
    transform: translateX(-50%) translate3d(100vw, 0, 0) !important;
    visibility: visible;
}

.cart-items-group {
    transform: translateZ(0);
    contain: layout paint;
}

.cart-item-wrapper {
    min-height: 64px;
}

.cart-item {
    min-height: 64px;
    transform: translate3d(0, 0, 0);
    transition:
        transform 320ms var(--ios-easing),
        opacity 220ms ease,
        background-color 180ms ease;
}

.cart-item-qty-updated {
    background-color: #fbfbfb;
}

.qty-btn {
    transition:
        transform 140ms ease,
        background-color 160ms ease;
}

.qty-btn:active {
    transform: scale(0.86);
}

.qty-val,
.cart-item-price,
#cartTotalSum {
    font-variant-numeric: tabular-nums;
}

.cart-item-swipe-bg svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.15;
}

#orderConfirmTotal,
#orderConfirmItems .order-confirm-item span:last-child {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', var(--font-product), sans-serif;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.money-currency {
    font-family:
        Arial,
        'Helvetica Neue',
        Helvetica,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    font-variant: normal;
}

/* Modal depth scaling */
.bottom-sheet.show.modal-stack-under,
#profileSheet.profile-under-settings {
    transform: translateX(-50%) translateY(var(--modal-stack-peek-y)) scale(var(--modal-stack-scale)) !important;
    transform-origin: bottom center;
    filter: blur(var(--modal-stack-blur)) saturate(0.98);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.bottom-sheet.show.modal-stack-deep {
    transform: translateX(-50%) translateY(var(--modal-deep-stack-peek-y)) scale(var(--modal-deep-stack-scale)) !important;
    transform-origin: bottom center;
    filter: blur(var(--modal-deep-stack-blur)) saturate(0.94);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.bottom-sheet.modal-stack-returning,
.modal-centered.modal-stack-returning {
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease,
        opacity 220ms ease !important;
    will-change: transform, filter;
}

#productSheet.show.modal-stack-under {
    transform: translateY(var(--modal-stack-peek-y)) scale(var(--modal-stack-scale)) !important;
    transform-origin: bottom center !important;
}

#productSheet.show.modal-stack-deep {
    transform: translateY(var(--modal-deep-stack-peek-y)) scale(var(--modal-deep-stack-scale)) !important;
    transform-origin: bottom center !important;
}

.modal-centered.modal-stack-under {
    transform: translate(-50%, -50%) scale(var(--modal-stack-scale)) !important;
    transform-origin: center center;
    filter: blur(var(--modal-stack-blur)) saturate(0.98);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

.modal-centered.modal-stack-deep {
    transform: translate(-50%, -50%) scale(var(--modal-deep-stack-scale)) !important;
    transform-origin: center center;
    filter: blur(var(--modal-deep-stack-blur)) saturate(0.94);
    pointer-events: none;
    transition:
        transform 360ms var(--ios-easing),
        filter 280ms ease;
}

#settingsSheet.profile-drilldown-sheet.show {
    transform: translateX(-50%) translate3d(0, 0, 0);
}

#settingsSheet.profile-drilldown-sheet.show.modal-stack-under {
    transform: translateX(-50%) translateY(var(--modal-stack-peek-y)) scale(var(--modal-stack-scale)) !important;
}

#settingsSheet.profile-drilldown-sheet.show.modal-stack-deep {
    transform: translateX(-50%) translateY(var(--modal-deep-stack-peek-y)) scale(var(--modal-deep-stack-scale)) !important;
}

#qaHotspot {
    position: fixed;
    top: max(0px, env(safe-area-inset-top));
    left: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.01;
    z-index: 12000;
    touch-action: manipulation;
}

#qaPanel {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 12px calc(12px + var(--safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 12010;
}

.qa-panel-open #qaPanel {
    opacity: 1;
    pointer-events: auto;
}

.qa-panel-card {
    width: min(100%, 390px);
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 18px;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    transform: translateY(18px);
    transition: transform 220ms var(--ios-easing);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.qa-panel-open .qa-panel-card {
    transform: translateY(0);
}

.qa-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 10px;
}

.qa-panel-header strong {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.qa-panel-header button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.qa-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.qa-panel-grid button {
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.qa-panel-grid button:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.22);
}

.qa-panel-grid .qa-danger {
    grid-column: 1 / -1;
    background: rgba(255, 77, 79, 0.24);
    color: #ffb8b9;
}

/* Extracted from index.html inline styles during static refactor. */
.u-style-001 {
    position: relative;
    padding-left: 0.25rem;
}
.u-style-002 {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.u-style-003 {
    font-size: 0.75rem;
    font-weight: 400;
    color: #111;
    margin-bottom: 2px;
}
.u-style-004 {
    display: flex;
    align-items: center;
    gap: 4px;
}
.u-style-005 {
    font-size: 0.9rem;
    font-weight: 850;
    color: #111;
}
.u-style-006 {
    margin-top: 1px;
}
.u-style-007 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
}
.u-style-008 {
    width: 100%;
    height: 50vh;
    min-height: 350px;
    position: relative;
    overflow: hidden;
}
.u-style-009 {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.1, 0, 0.2, 1);
    will-change: transform;
}
.u-style-010 {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--bg-color), transparent);
    z-index: 2;
    pointer-events: none;
}
.u-style-011 {
    padding: 0;
    overflow: hidden;
    position: relative;
}
.u-style-012 {
    display: flex;
    width: 100%;
    align-items: flex-start;
    will-change: transform;
}
.u-style-013 {
    height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.u-style-014 {
    position: relative;
}
.u-style-015 {
    width: 18px;
    height: 18px;
}
.u-style-016 {
    overflow-y: auto;
    flex: 1;
}
.u-style-017 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    max-width: none;
    box-sizing: border-box;
    background: var(--surface-color);
    padding: 1.25rem 1.25rem calc(1rem + var(--safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.u-style-018 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.u-style-019 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.u-style-020 {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.u-style-021 {
    height: 42px;
    display: flex;
    align-items: center;
}
.u-style-022 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
}
.u-style-023 {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: right;
}
.u-style-024 {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.u-style-025 {
    font-size: 1.4rem;
    line-height: 1;
}
.u-style-026 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.u-style-027 {
    font-size: 1.5rem;
}
.u-style-028 {
    height: auto;
    padding-bottom: calc(2rem + var(--safe-area-inset-bottom));
}
.u-style-029 {
    width: 36px;
}
.u-style-030 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.u-style-031 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--accent-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.u-style-032 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.u-style-033 {
    background: white;
    padding: 0.3rem;
    border-radius: 8px;
    font-weight: 800;
    font-style: italic;
    color: #111;
    font-size: 0.9rem;
}
.u-style-034 {
    font-weight: 600;
}
.u-style-035 {
    color: #000;
}
.u-style-036 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.u-style-037 {
    background: white;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-style-038 {
    color: transparent;
}
.u-style-039 {
    border-bottom: none;
}
.u-style-040 {
    padding: 0 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.u-style-041 {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 18px;
    padding: 1.5rem;
    color: white;
    margin-bottom: 0.5rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.u-style-042 {
    font-size: 0.75rem;
    opacity: 0.6;
    letter-spacing: 1px;
}
.u-style-043 {
    font-size: 1.1rem;
    letter-spacing: 3px;
    font-weight: 600;
}
.u-style-044 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.u-style-045 {
    font-size: 0.65rem;
    opacity: 0.6;
}
.u-style-046 {
    font-size: 0.9rem;
    font-weight: 600;
}
.u-style-047 {
    width: 100%;
    padding: 1rem 1rem;
    font-size: 1rem;
    border: none;
    background: #f4f4f4;
    border-radius: 16px;
    outline: none;
    box-sizing: border-box;
    letter-spacing: 2px;
}
.u-style-048 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.u-style-049 {
    width: 100%;
    padding: 1rem 0.8rem;
    font-size: 1rem;
    border: none;
    background: #f4f4f4;
    border-radius: 16px;
    outline: none;
    box-sizing: border-box;
    letter-spacing: 2px;
}
.u-style-050 {
    width: 100%;
    background: var(--accent-color);
    border: none;
    padding: 1.1rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    color: #111;
    margin-top: 0;
}
.u-style-051 {
    max-width: 340px;
    text-align: center;
    padding: 2rem 1.5rem;
}
.u-style-052 {
    width: 150px;
    height: 150px;
    margin-bottom: 1.5rem;
    object-fit: contain;
}
.u-style-053 {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.55;
    margin: 0 0 2rem;
}
.u-style-054 {
    height: fit-content !important;
    min-height: 100px;
    padding-bottom: calc(1.5rem + var(--safe-area-inset-bottom));
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}
.u-style-055 {
    border-bottom: none;
    padding-top: 0.5rem;
    margin-bottom: 0;
}
.u-style-056 {
    width: 44px;
}
.u-style-057 {
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 0.9;
}
.u-style-058 {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-style-059 {
    padding: 0 1.25rem 1rem;
}
.u-style-060 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.u-style-061 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    background: #f4f4f4;
    border: none;
    padding: 1rem;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    color: #111;
}
.u-style-062 {
    display: none;
}
.u-style-063 {
    height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.u-style-064 {
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
}
.u-style-065 {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 1.5rem;
    background: var(--surface-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
}
.u-style-066 {
    position: relative;
    margin-bottom: 1rem;
}
.u-style-067 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #fce928;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.u-style-068 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.u-style-069 {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #111;
    border: 2.5px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-style-070 {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: var(--font-primary);
    color: #111;
    margin-bottom: 0.2rem;
}
.u-style-071 {
    font-size: 0.9rem;
    font-weight: 500;
    color: #999;
}
.u-style-072 {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2rem;
}
.u-style-073 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.u-style-074 {
    color: var(--text-secondary);
    margin: 0;
}
.u-style-075 {
    height: 90vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #ffffff;
}
.u-style-076 {
    background: transparent;
    border-bottom: none;
}
.u-style-077 {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
}
.u-style-078 {
    position: relative;
    cursor: pointer;
}
.u-style-079 {
    width: 104px;
    height: 104px;
    border-radius: 52px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid white;
}
.u-style-080 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--accent-color);
}
.u-style-081 {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: #111;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.u-style-082 {
    padding: 0 1.25rem 2rem;
}
.u-style-083 {
    background: #f9f9f9;
    border-radius: 22px;
    padding: 0.5rem 1.25rem;
    margin-bottom: 1.25rem;
}
.u-style-084 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.u-style-085 {
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
    cursor: pointer;
}
.u-style-086 {
    font-weight: 600;
    font-size: 0.95rem;
    color: #111;
    text-align: right;
    border: none;
    background: transparent;
    outline: none;
    width: 150px;
    cursor: text;
}
.u-style-087 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}
.u-style-088 {
    font-weight: 500;
    font-size: 0.95rem;
}
.u-style-089 {
    font-weight: 600;
    font-size: 0.95rem;
    color: #a1a1a1;
}
.u-style-090 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.u-style-091 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
}
.u-style-092 {
    font-weight: 600;
    font-size: 0.9rem;
    color: #111;
    text-align: right;
    border: none;
    background: transparent;
    outline: none;
    width: 190px;
    cursor: text;
}
.u-style-093 {
    background: #f9f9f9;
    border-radius: 22px;
    padding: 0.5rem 1.25rem;
    margin-bottom: 2rem;
}
.u-style-094 {
    width: 22px;
    height: 22px;
    border: 2px solid #111;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: serif;
    font-style: italic;
    font-weight: bold;
    font-size: 0.8rem;
    color: #111;
}
.u-style-095 {
    width: 100%;
    background: var(--accent-color);
    border: none;
    padding: 1.1rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    cursor: pointer;
    color: #111;
}
.u-style-096 {
    text-align: center;
}
.u-style-097 {
    background: none;
    border: none;
    color: #a1a1a1;
    font-size: 0.8rem;
    cursor: pointer;
}
.u-style-098 {
    padding: 0.5rem 1.5rem 1.5rem;
}
.u-style-099 {
    width: 100%;
    padding: 1.1rem 1.25rem;
    font-size: 1.1rem;
    border: none;
    background: #f4f4f4;
    border-radius: 16px;
    outline: none;
}
.u-style-100 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem 2rem;
}
.u-style-101 {
    width: 220px;
    height: auto;
    margin-bottom: 1.5rem;
}
.u-style-102 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}
.u-style-103 {
    background: none;
    border: none;
    color: #007aff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 2rem;
}
.u-style-104 {
    width: 100%;
    background: #f9f9f9;
    border-radius: 22px;
    padding: 0.5rem 1.25rem;
}
.u-style-105 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    text-decoration: none;
    color: #111;
    border-bottom: 1px solid #f0f0f0;
}
.u-style-106 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    text-decoration: none;
    color: #111;
}
.u-style-107 {
    margin-top: 2rem;
}
.u-style-108 {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
}
.u-style-109 {
    height: auto;
    padding-bottom: calc(0.75rem + var(--safe-area-inset-bottom));
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}
.u-style-110 {
    opacity: 0;
    pointer-events: none;
}
.u-style-111 {
    text-align: center;
    padding: 0 1.5rem;
}
.u-style-112 {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
.u-style-113 {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0;
}
.u-style-114 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #111;
}
.u-style-115 {
    margin-bottom: 0.8rem;
    border-radius: 18px;
}
.u-style-116 {
    font-weight: 500;
    font-size: 0.8rem;
}
.u-style-117 {
    height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}
.u-style-118 {
    position: relative;
    width: 100%;
    height: 50vh;
    flex-shrink: 0;
    touch-action: pan-y;
}
.u-style-119 {
    width: 100%;
    height: 100%;
    background: #ffffff;
}
.u-style-120 {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, #ffffff, transparent);
    pointer-events: none;
}
.u-style-121 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}
.u-style-122 {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    padding: 0 1.5rem calc(118px + var(--safe-area-inset-bottom));
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.u-style-123 {
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    font-family: var(--font-product);
    font-weight: 800;
    text-transform: none !important;
    line-height: 1.2;
    padding-top: 1rem;
    flex-shrink: 0;
    text-align: center;
}
.u-style-124 {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    flex-shrink: 0;
}
.u-style-125 {
    background: #f4f4f4;
    border: 1px solid #eaeaea;
    padding: 0.6rem 1.4rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.u-style-126 {
    background: rgba(0, 0, 0, 0.5);
}
.u-style-127 {
    height: auto;
    max-height: 80vh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.u-style-128 {
    overflow-y: auto;
    flex: 1;
    padding: 0 1.25rem 2.5rem;
}
.u-style-129 {
    background: #f9f9f9;
    border-radius: 22px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.u-style-130 {
    font-weight: 700;
    font-size: 0.8rem;
    color: #a1a1a1;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    letter-spacing: 0.8px;
}
.u-style-131 {
    font-size: 0.95rem;
    color: #111;
    line-height: 1.5;
    font-weight: 500;
    white-space: pre-line;
}
.u-style-132 {
    background: #f9f9f9;
    border-radius: 22px;
    padding: 1.25rem;
}
.u-style-133 {
    width: 150px;
    height: auto;
}
.u-style-134 {
    height: fit-content !important;
    padding: 0;
    border-radius: 32px 32px 0 0;
}
.u-style-135 {
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.u-style-136 {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.u-style-137 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.u-style-138 {
    font-family: var(--font-heading);
    margin-bottom: 1.25rem;
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.u-style-139 {
    text-align: left;
    width: 100%;
    margin-bottom: 2.5rem;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.u-style-140 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.u-style-141 {
    font-size: 1.4rem;
}
.u-style-142 {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
}
.u-style-143 {
    width: 100%;
    height: 62px;
    font-weight: 800;
    animation: none;
    font-size: 1.1rem;
    border-radius: 20px;
}
.u-style-144 {
    margin-top: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.u-style-145 {
    font-family: var(--font-heading);
    margin-bottom: 0.75rem;
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 1.1;
}
.u-style-146 {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.u-style-147 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    position: relative;
    top: -2px;
}
.u-style-148 {
    position: relative;
    flex-shrink: 0;
    height: 0;
}
.u-style-149 {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
}
.u-style-150 {
    padding: 0;
    padding-top: 40px;
}
.u-style-151 {
    position: relative;
    width: 100%;
    height: 200px;
}
.u-style-152 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 190px;
    z-index: 2;
}
.u-style-153 {
    position: absolute;
    right: -10px;
    top: -5px;
    width: 130px;
    z-index: 1;
}
.u-style-154 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.u-style-155 {
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
    text-transform: none !important;
    letter-spacing: -0.2px !important;
}
.u-style-156 {
    font-size: 15px;
    color: #333;
}
.u-style-157 {
    padding: 20px 24px 0;
}
.u-style-158 {
    margin-bottom: 20px;
    border: 1px solid #e5e5ea;
    background: #fff;
    height: 50px;
    font-size: 16px;
}
.u-style-159 {
    height: 50px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 12px;
    width: 100%;
    margin-bottom: 30px;
    background: var(--accent-color);
    color: #111;
    border: none;
    cursor: pointer;
}
.u-style-160 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: #8e8e93;
    font-size: 13px;
}
.u-style-161 {
    width: 40%;
    height: 1px;
    background: #e5e5ea;
}
.u-style-162 {
    padding: 0 16px;
}
.u-style-163 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}
.u-style-164 {
    background: #f2f2f7;
    border: none;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    color: #111;
    width: 100%;
}
.u-style-165 {
    width: 22px;
    height: 22px;
}
.u-style-166 {
    margin-top: auto;
    padding: 0 24px 30px;
    text-align: center;
    font-size: 12px;
    color: #8e8e93;
    line-height: 1.5;
}
.u-style-167 {
    color: #8e8e93;
    text-decoration: underline;
    font-weight: 600;
}
.u-style-168 {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--accent-color);
}
.u-style-169 {
    background: var(--accent-color);
    height: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    padding-top: 10px;
}
.u-style-170 {
    width: 280px;
}
.u-style-171 {
    background: #ffffff;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    margin-top: -32px;
    padding: 32px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
    position: relative;
}
.u-style-172 {
    margin-bottom: 12px;
}
.u-style-173 {
    font-family: var(--font-main) !important;
    font-size: 24px !important;
    font-weight: 800;
    color: #111;
    margin: 0;
    text-align: center;
    text-transform: none !important;
    letter-spacing: -0.5px !important;
}
.u-style-174 {
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 28px;
    padding: 0 10px;
}
.u-style-175 {
    margin-bottom: 18px;
}
.u-style-176 {
    display: block;
    font-size: 13px;
    color: #111;
    font-weight: 500;
    margin-bottom: 8px;
    margin-left: 4px;
}
.u-style-177 {
    color: #ff3b30;
}
.u-style-178 {
    width: 100%;
    height: 58px;
    background: #fff;
    border: 1px solid #f2f2f7;
    border-radius: 20px;
    padding: 0 20px;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    outline: none;
}
.u-style-179 {
    margin-bottom: 32px;
}
.u-style-180 {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
}
.u-style-181 {
    height: 56px;
    background: var(--accent-color);
    border: none;
    border-radius: 28px;
    font-weight: 600;
    font-size: 16px;
    color: #111;
    cursor: pointer;
    transition: transform 0.1s active;
}
.u-style-182 {
    text-align: center;
    font-size: 14px;
    color: #8e8e93;
    margin: 4px 0;
}
.u-style-183 {
    height: 56px;
    background: #f2f2f7;
    border: none;
    border-radius: 28px;
    font-weight: 600;
    font-size: 16px;
    color: #111;
    cursor: pointer;
    transition: transform 0.1s active;
}
.u-style-184 {
    background: var(--accent-color);
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    padding-top: 10px;
    position: relative;
}
.u-style-185 {
    width: 280px;
    margin-bottom: 50px;
}
.u-style-186 {
    width: 230px;
}
.u-style-187 {
    font-family: var(--font-main) !important;
    font-size: 24px !important;
    font-weight: 800;
    color: #111;
    margin: 0;
    text-align: center;
    text-transform: none !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px;
}
.u-style-188 {
    text-align: center;
    font-size: 15px;
    color: #333;
    margin-bottom: 30px;
}
.u-style-189 {
    color: #007aff;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
}
.u-style-190 {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}
.u-style-191 {
    width: 64px;
    height: 72px;
    background: #f2f2f7;
    border: none;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
}
.u-style-192 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 14px;
    color: #8e8e93;
}
.u-style-193 {
    margin-top: auto;
    padding-bottom: 20px;
}
.u-style-194 {
    width: 100%;
    height: 56px;
    background: var(--accent-color);
    border: none;
    border-radius: 28px;
    font-weight: 600;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}