/* ===== INTRO FONT ===== */
@font-face {
    font-family: 'Intro';
    src: url('/static/fonts/intro-cyrillic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-04FF;
}
@font-face {
    font-family: 'Intro';
    src: url('/static/fonts/intro-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-007F;
}
@font-face {
    font-family: 'Intro';
    src: url('/static/fonts/intro-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0080-00FF;
}

/* ===== DESIGN TOKENS ===== */
:root {
    /* Core - warm espresso */
    --bg: #0f0d0a;
    --bg-secondary: #1a1714;
    --bg-card: rgba(255, 248, 235, 0.03);
    --text: #f0ebe3;
    --text-secondary: rgba(240, 235, 227, 0.62);
    --hint: #9a8e7f;

    /* Accent - warm gold/copper */
    --primary: #c4956a;
    --primary-soft: rgba(196, 149, 106, 0.12);
    --primary-glow: rgba(196, 149, 106, 0.25);
    --accent: #d4a574;
    --accent-soft: rgba(212, 165, 116, 0.10);
    --accent-glow: rgba(212, 165, 116, 0.2);
    --gradient-primary: linear-gradient(135deg, #b8865a 0%, #d4a574 45%, #e8c49a 100%);
    --danger: #c45c5c;
    --danger-soft: rgba(196, 92, 92, 0.12);

    /* Semantic aliases (#9 — were undefined) */
    --text-primary: #f0ebe3;
    --text-tertiary: #9a8e7f;
    --surface-elevated: rgba(255, 248, 235, 0.06);
    --border: rgba(196, 149, 106, 0.12);

    /* Glass - warm tinted */
    --glass-bg: rgba(196, 149, 106, 0.06);
    --glass-border: rgba(196, 149, 106, 0.12);
    --glass-blur: 24px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px var(--accent-glow);
    --shadow-primary-glow: 0 4px 20px rgba(196, 149, 106, 0.2);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --app-padding: 16px;
    --app-max-width: 420px;

    /* Typography — editorial warmth.
       Scale: xs→5xl is an editorial hero-first scale. Use xl/2xl for
       section headings, 3xl for standard hero, 4xl/5xl reserved for
       onboarding / result reveal — the two moments that must feel huge. */
    --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Montserrat', sans-serif;
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 38px;
    --text-5xl: 52px;

    /* Letter-spacing — tight for hero, relaxed for caps labels */
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-wide: 0.04em;
    --tracking-wider: 0.1em;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Motion tokens — every transition should use one of these.
       Linear-grade feel: fast for button states, medium for screen transitions,
       slow for the 'wow' reveal moments. All ease-out except the tiny 'quick'
       which uses standard ease. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --duration-quick: 160ms;
    --duration-fast: 240ms;
    --duration-medium: 360ms;
    --duration-slow: 600ms;

    /* Numbers — tabular everywhere we show counts, prices, stats */
    --num-feature: "tnum" 1;
}

/* ===== LIGHT THEME ===== */
body.light {
    --bg: #f5f0e8;
    --bg-secondary: #fffcf7;
    --bg-card: rgba(255, 252, 247, 0.8);
    --text: #2a2218;
    --text-secondary: rgba(42, 34, 24, 0.6);
    --hint: #8a7e6f;
    --text-primary: #2a2218;
    --text-tertiary: #8a7e6f;
    --surface-elevated: rgba(255, 252, 247, 0.9);
    --border: rgba(160, 120, 80, 0.15);

    --primary: #a07850;
    --primary-soft: rgba(160, 120, 80, 0.08);
    --primary-glow: rgba(160, 120, 80, 0.08);
    --accent: #8b6940;
    --accent-soft: rgba(139, 105, 64, 0.06);
    --accent-glow: rgba(139, 105, 64, 0.05);
    --gradient-primary: linear-gradient(135deg, #8b6940 0%, #b08860 45%, #c4a070 100%);

    --glass-bg: rgba(255, 252, 247, 0.7);
    --glass-border: rgba(160, 120, 80, 0.1);

    --shadow-sm: 0 2px 8px rgba(42, 34, 24, 0.04);
    --shadow-md: 0 4px 16px rgba(42, 34, 24, 0.06);
    --shadow-lg: 0 8px 32px rgba(42, 34, 24, 0.08);
    --shadow-glow: 0 0 20px rgba(160, 120, 80, 0.06);
    --shadow-primary-glow: 0 4px 16px rgba(160, 120, 80, 0.1);

    --danger: #b84040;
    --danger-soft: rgba(184, 64, 64, 0.08);

    background: var(--bg);
}

body.light::before {
    background:
        radial-gradient(ellipse 60% 50% at 20% 20%, rgba(160, 120, 80, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 80% 80%, rgba(139, 105, 64, 0.05) 0%, transparent 60%);
}

body.light::after {
    background:
        radial-gradient(ellipse 50% 50% at 70% 30%, rgba(160, 120, 80, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(139, 105, 64, 0.04) 0%, transparent 60%);
}

body.light .onboarding-overlay {
    background: linear-gradient(180deg, transparent 0%, var(--bg) 85%);
}

body.light .balance-card::before {
    background: radial-gradient(circle, rgba(160, 120, 80, 0.07), transparent 70%);
}

body.light .balance-card::after {
    background: radial-gradient(circle, rgba(139, 105, 64, 0.05), transparent 70%);
}

body.light .locked-overlay {
    background: rgba(245, 240, 232, 0.85);
}

body.light .paywall-sheet {
    background: #fffcf7;
}

/* ===== PURPLE THEME (dark) ===== */
body.theme-purple {
    --bg: #0a0a1a;
    --bg-secondary: #0f0f2a;
    --bg-card: rgba(255, 255, 255, 0.04);
    --text: #e8eaf6;
    --text-secondary: rgba(232, 234, 246, 0.65);
    --hint: #8f94c0;
    --text-primary: #e8eaf6;
    --text-tertiary: #8f94c0;
    --surface-elevated: rgba(255, 255, 255, 0.06);
    --border: rgba(124, 108, 240, 0.15);

    --primary: #7c6cf0;
    --primary-soft: rgba(124, 108, 240, 0.12);
    --primary-glow: rgba(124, 108, 240, 0.25);
    --accent: #a855f7;
    --accent-soft: rgba(168, 85, 247, 0.10);
    --accent-glow: rgba(168, 85, 247, 0.2);
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #a855f7 100%);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.12);

    --glass-bg: rgba(124, 108, 240, 0.07);
    --glass-border: rgba(124, 108, 240, 0.15);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(168, 85, 247, 0.2);
    --shadow-primary-glow: 0 4px 20px rgba(124, 108, 240, 0.2);
}

body.theme-purple::before {
    background:
        radial-gradient(ellipse 60% 50% at 15% 15%, rgba(124, 108, 240, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 85% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 60%);
}
body.theme-purple::after {
    background:
        radial-gradient(ellipse 50% 50% at 70% 25%, rgba(124, 108, 240, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 25% 75%, rgba(168, 85, 247, 0.04) 0%, transparent 60%);
}
body.theme-purple .balance-card::before { background: radial-gradient(circle, rgba(124, 108, 240, 0.12), transparent 70%); }
body.theme-purple .balance-card::after { background: radial-gradient(circle, rgba(168, 85, 247, 0.1), transparent 70%); }
body.theme-purple .hero-img { filter: drop-shadow(0 8px 40px rgba(124, 108, 240, 0.35)) drop-shadow(0 4px 20px rgba(168, 85, 247, 0.25)); }
body.theme-purple .onboarding-bg { background: radial-gradient(ellipse at 50% 30%, rgba(124, 108, 240, 0.12) 0%, rgba(168, 85, 247, 0.06) 40%, transparent 70%); }
body.theme-purple .referral-card { border-color: rgba(168, 85, 247, 0.15); }
body.theme-purple .balance-gens { border-top-color: rgba(124, 108, 240, 0.1); }

/* Purple light */
body.theme-purple.light {
    --bg: #f0f0fa;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.75);
    --text: #1a1a2e;
    --text-secondary: rgba(26, 26, 46, 0.62);
    --hint: #65658e;
    --text-primary: #1a1a2e;
    --text-tertiary: #65658e;
    --surface-elevated: rgba(255, 255, 255, 0.9);
    --border: rgba(99, 96, 232, 0.15);
    --primary: #6360e8;
    --primary-soft: rgba(99, 96, 232, 0.08);
    --primary-glow: rgba(99, 96, 232, 0.08);
    --accent: #9333ea;
    --accent-soft: rgba(147, 51, 234, 0.06);
    --accent-glow: rgba(147, 51, 234, 0.05);
    --gradient-primary: linear-gradient(135deg, #5b5ef0 0%, #7c3aed 45%, #9333ea 100%);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(99, 96, 232, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 20px rgba(99, 96, 232, 0.06);
    --shadow-primary-glow: 0 4px 16px rgba(99, 96, 232, 0.1);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.08);
}
body.theme-purple.light::before {
    background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(99, 96, 232, 0.06) 0%, transparent 60%),
                radial-gradient(ellipse 50% 60% at 80% 80%, rgba(147, 51, 234, 0.05) 0%, transparent 60%);
}
body.theme-purple.light::after {
    background: radial-gradient(ellipse 50% 50% at 70% 30%, rgba(99, 96, 232, 0.04) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 30% 70%, rgba(147, 51, 234, 0.04) 0%, transparent 60%);
}
body.theme-purple.light .locked-overlay { background: rgba(240, 240, 250, 0.85); }
body.theme-purple.light .paywall-sheet { background: #fff; }

/* ===== GREEN THEME (dark) ===== */
body.theme-green {
    --bg: #080f0a;
    --bg-secondary: #0d1a10;
    --bg-card: rgba(255, 255, 255, 0.04);
    --text: #e3f0e8;
    --text-secondary: rgba(227, 240, 232, 0.62);
    --hint: #7fa08a;
    --text-primary: #e3f0e8;
    --text-tertiary: #7fa08a;
    --surface-elevated: rgba(255, 255, 255, 0.06);
    --border: rgba(78, 173, 107, 0.15);

    --primary: #4ead6b;
    --primary-soft: rgba(78, 173, 107, 0.12);
    --primary-glow: rgba(78, 173, 107, 0.25);
    --accent: #2dd4a0;
    --accent-soft: rgba(45, 212, 160, 0.10);
    --accent-glow: rgba(45, 212, 160, 0.2);
    --gradient-primary: linear-gradient(135deg, #38a169 0%, #48bb78 45%, #68d391 100%);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.12);

    --glass-bg: rgba(78, 173, 107, 0.06);
    --glass-border: rgba(78, 173, 107, 0.14);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 30px rgba(45, 212, 160, 0.2);
    --shadow-primary-glow: 0 4px 20px rgba(78, 173, 107, 0.2);
}

body.theme-green::before {
    background:
        radial-gradient(ellipse 60% 50% at 15% 15%, rgba(78, 173, 107, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 85% 80%, rgba(45, 212, 160, 0.06) 0%, transparent 60%);
}
body.theme-green::after {
    background:
        radial-gradient(ellipse 50% 50% at 70% 25%, rgba(78, 173, 107, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 25% 75%, rgba(45, 212, 160, 0.04) 0%, transparent 60%);
}
body.theme-green .balance-card::before { background: radial-gradient(circle, rgba(78, 173, 107, 0.12), transparent 70%); }
body.theme-green .balance-card::after { background: radial-gradient(circle, rgba(45, 212, 160, 0.1), transparent 70%); }
body.theme-green .hero-img { filter: drop-shadow(0 8px 40px rgba(78, 173, 107, 0.35)) drop-shadow(0 4px 20px rgba(45, 212, 160, 0.25)); }
body.theme-green .onboarding-bg { background: radial-gradient(ellipse at 50% 30%, rgba(78, 173, 107, 0.12) 0%, rgba(45, 212, 160, 0.06) 40%, transparent 70%); }
body.theme-green .referral-card { border-color: rgba(45, 212, 160, 0.15); }
body.theme-green .balance-gens { border-top-color: rgba(78, 173, 107, 0.1); }

/* Green light */
body.theme-green.light {
    --bg: #eef7f0;
    --bg-secondary: #f8fcf9;
    --bg-card: rgba(248, 252, 249, 0.8);
    --text: #18291c;
    --text-secondary: rgba(24, 41, 28, 0.6);
    --hint: #5e8a68;
    --text-primary: #18291c;
    --text-tertiary: #5e8a68;
    --surface-elevated: rgba(248, 252, 249, 0.9);
    --border: rgba(56, 145, 90, 0.15);
    --primary: #38915a;
    --primary-soft: rgba(56, 145, 90, 0.08);
    --primary-glow: rgba(56, 145, 90, 0.08);
    --accent: #22976e;
    --accent-soft: rgba(34, 151, 110, 0.06);
    --accent-glow: rgba(34, 151, 110, 0.05);
    --gradient-primary: linear-gradient(135deg, #2f855a 0%, #38a169 45%, #48bb78 100%);
    --glass-bg: rgba(248, 252, 249, 0.7);
    --glass-border: rgba(56, 145, 90, 0.1);
    --shadow-sm: 0 2px 8px rgba(24, 41, 28, 0.04);
    --shadow-md: 0 4px 16px rgba(24, 41, 28, 0.06);
    --shadow-lg: 0 8px 32px rgba(24, 41, 28, 0.08);
    --shadow-glow: 0 0 20px rgba(56, 145, 90, 0.06);
    --shadow-primary-glow: 0 4px 16px rgba(56, 145, 90, 0.1);
    --danger: #b84040;
    --danger-soft: rgba(184, 64, 64, 0.08);
}
body.theme-green.light::before {
    background: radial-gradient(ellipse 60% 50% at 20% 20%, rgba(56, 145, 90, 0.06) 0%, transparent 60%),
                radial-gradient(ellipse 50% 60% at 80% 80%, rgba(34, 151, 110, 0.05) 0%, transparent 60%);
}
body.theme-green.light::after {
    background: radial-gradient(ellipse 50% 50% at 70% 30%, rgba(56, 145, 90, 0.04) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 30% 70%, rgba(34, 151, 110, 0.04) 0%, transparent 60%);
}
body.theme-green.light .locked-overlay { background: rgba(238, 247, 240, 0.85); }
body.theme-green.light .paywall-sheet { background: #f8fcf9; }

/* Telegram theme overrides */
body[data-theme="dark"] {
    --bg: var(--tg-theme-bg-color, #0f0d0a);
    --text: var(--tg-theme-text-color, #f0ebe3);
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.5;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 15% 15%, rgba(196, 149, 106, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 85% 80%, rgba(212, 165, 116, 0.06) 0%, transparent 60%);
    animation: bgPulse 10s ease-in-out infinite;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 50% at 70% 25%, rgba(196, 149, 106, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 25% 75%, rgba(180, 140, 100, 0.04) 0%, transparent 60%);
    animation: bgPulse 10s ease-in-out infinite 5s;
}

@keyframes bgPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.app {
    max-width: var(--app-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ===== GRAIN OVERLAY ===== */
body::before,
body::after {
    /* existing gradient backgrounds stay */
}

.app::before {
    content: '';
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}

/* ===== SCREENS ===== */
.screen {
    /* No auto-animation — applied via .screen-entering class to prevent re-triggering */
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--app-padding);
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}
.screen-entering {
    /* instant switch — no animation in TG mini app */
}
}

@keyframes screenOut {
    to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: none; }
}

.screen-exiting {
    display: none !important;
}

/* Staggered card entrance — only when screen is entering */
.screen-entering .card:nth-child(1) { animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.03s both; }
.screen-entering .card:nth-child(2) { animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both; }
.screen-entering .card:nth-child(3) { animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.09s both; }
.screen-entering .card:nth-child(4) { animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
.screen-entering .card:nth-child(5) { animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    transition:
        transform var(--duration-quick) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        opacity var(--duration-quick) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--gradient-primary, var(--primary));
    color: #fff;
    box-shadow: var(--shadow-primary-glow);
}

.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: saturate(0.4) brightness(0.8);
}
.btn-primary:disabled:active {
    transform: none;
}

.btn-outline {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.btn-outline:active {
    background: var(--accent-soft);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-lg {
    width: 100%;
    padding: 15px 24px;
    font-size: var(--text-lg);
    border-radius: var(--radius-lg);
}

.btn-icon svg {
    flex-shrink: 0;
}

.btn-back {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: var(--space-3);
    margin: 0 0 var(--space-3) calc(-1 * var(--space-3));
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.btn-bookmark {
    background: none;
    border: none;
    color: var(--hint);
    cursor: pointer;
    padding: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-bookmark:active {
    transform: scale(0.9);
    color: var(--primary);
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border-top: 1px solid var(--glass-border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px 12px;
    background: none;
    border: none;
    color: var(--hint);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    min-height: 44px;
}

.nav-btn.active { color: var(--primary); }
.nav-btn.active svg { stroke: var(--primary); }
.nav-btn.active::after {
    display: none;
}

.nav-pill {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: calc(100% / 3);
    background: var(--gradient-primary);
    border-radius: 3px 3px 0 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    box-shadow: 0 0 8px var(--primary-glow);
}

/* ===== GLASS CARD ===== */
.card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            var(--shadow-md),
            0 0 0 1px var(--glass-border);
    }
}

.card:active {
    transform: scale(0.985);
}

.card-title {
    font-size: var(--text-sm);
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: var(--space-3);
    line-height: 1.3;
}

/* ======================
   1. ONBOARDING
   ====================== */
.onboarding {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.onboarding-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(196, 149, 106, 0.12) 0%, rgba(212, 165, 116, 0.06) 40%, transparent 70%);
}

.onboarding-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 90%);
}

.onboarding-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 var(--app-padding) 60px;
    width: 100%;
    max-width: var(--app-max-width);
    min-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.onboarding-hero {
    width: 220px;
    height: 220px;
    margin: 0 auto var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 40px rgba(196, 149, 106, 0.35)) drop-shadow(0 4px 20px rgba(212, 165, 116, 0.25));
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px var(--primary-glow));
}

.logo-img-sm {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.btn-logo-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.onboarding-title {
    font-family: var(--font);
    font-size: var(--text-4xl);
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
    line-height: 1.02;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: brandShimmer 6s ease-in-out infinite;
}

.onboarding-tagline {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.45;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}

/* ======================
   1b. ONBOARDING — SINGLE SCREEN
   ======================
   Rewrote 2026-04-11: instead of 5 absolute-positioned slides with
   crossfade choreography (prone to 1-frame flash), the whole onboarding
   is one vertical scroll. No transitions to manage, clearer UX, single
   decision point. The `.ob-step*` slide classes below are kept for
   backwards compatibility but are no longer used by the HTML. */
.ob-step { display: none; }  /* legacy, kept to avoid CSS errors */

.ob-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.ob-progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ob-slide-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: var(--primary-soft);
    margin: 0 auto var(--space-4);
}
.ob-slide-desc {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-6);
    text-align: center;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}
.ob-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.ob-store-tag {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.ob-question {
    font-family: var(--font);
    font-size: var(--text-3xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-align: center;
    margin-bottom: var(--space-4);
    line-height: 1.08;
    text-transform: none;
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
}

.ob-hint {
    font-size: var(--text-sm);
    color: var(--hint);
    text-align: center;
    margin-bottom: var(--space-4);
}

.ob-consent {
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-5);
    line-height: 1.5;
}

.ob-skip {
    margin-top: var(--space-3);
    opacity: 0.6;
}

/* Theme picker */
.ob-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.ob-theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 2px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    cursor: pointer;
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
}
.ob-theme-card:active { transform: scale(0.95); }
.ob-theme-card.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
    box-shadow: 0 0 16px var(--primary-glow);
}

.ob-theme-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}
.ob-preview-gold {
    background: linear-gradient(135deg, #1a1714 0%, #0f0d0a 50%);
    box-shadow: inset 0 0 30px rgba(196, 149, 106, 0.15);
}
.ob-preview-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(196, 149, 106, 0.3) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(212, 165, 116, 0.2) 0%, transparent 50%);
}
.ob-preview-purple {
    background: linear-gradient(135deg, #0f0f2a 0%, #0a0a1a 50%);
    box-shadow: inset 0 0 30px rgba(124, 108, 240, 0.15);
}
.ob-preview-purple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(124, 108, 240, 0.3) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.2) 0%, transparent 50%);
}
.ob-preview-green {
    background: linear-gradient(135deg, #0d1a10 0%, #080f0a 50%);
    box-shadow: inset 0 0 30px rgba(78, 173, 107, 0.15);
}
.ob-preview-green::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 40%, rgba(78, 173, 107, 0.3) 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, rgba(45, 212, 160, 0.2) 0%, transparent 50%);
}

.ob-theme-name { white-space: nowrap; }

/* Chips */
.ob-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-5);
}
.ob-chips-col {
    flex-direction: column;
    align-items: stretch;
}

.ob-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    min-height: 44px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.chip-icon {
    flex-shrink: 0;
    vertical-align: middle;
    opacity: 0.7;
}
.ob-chip.selected .chip-icon,
.type-chip.active .chip-icon {
    opacity: 1;
}
.ob-chip:active { transform: scale(0.95); }
.ob-chip.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
    box-shadow: 0 0 12px var(--primary-glow);
}

.ob-chip-wide {
    border-radius: var(--radius-lg);
    text-align: left;
    justify-content: flex-start;
    padding: 14px 20px;
}

/* B2B offer */
.ob-b2b-offer {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    animation: obFadeIn 0.3s ease;
}
.ob-b2b-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.5;
    text-align: center;
}
.ob-b2b-btn {
    text-decoration: none;
}

/* ======================
   1.5 FIRST HOOK
   ====================== */
.first-hook {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--space-6);
    text-align: center;
}

.first-hook-badge {
    margin-bottom: var(--space-3);
    animation: badgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-hook-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.first-hook-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.first-hook-subtitle strong {
    color: var(--primary);
    font-weight: 800;
}

.first-hook-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 280px;
    margin-bottom: var(--space-6);
}

.fh-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
}

.fh-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fh-step-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.first-hook .btn-lg {
    width: 100%;
    max-width: 280px;
    margin-bottom: var(--space-2);
}

.first-hook .btn-outline {
    opacity: 0.6;
}

/* ======================
   2. CABINET
   ====================== */
.cabinet-header {
    text-align: center;
    margin-bottom: var(--space-4);
}

.cabinet-brand {
    font-family: var(--font);
    font-size: clamp(22px, 6vw, var(--text-2xl));
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: brandShimmer 6s ease-in-out infinite;
}

.cabinet-greeting {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 600;
}

@keyframes brandShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Balance card */
.balance-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        var(--shadow-md),
        0 0 40px var(--accent-glow);
}

.balance-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -15%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(196, 149, 106, 0.12), transparent 70%);
    pointer-events: none;
}

.balance-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.1), transparent 70%);
    pointer-events: none;
}

.balance-badge {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    position: relative;
}

.balance-value-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.balance-label {
    font-size: var(--text-sm);
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.balance-value {
    font-size: var(--text-5xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    background: var(--gradient-primary, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px var(--primary-glow)) drop-shadow(0 0 8px var(--accent-glow));
}

.balance-unit {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-secondary);
    margin-left: var(--space-2);
    letter-spacing: 0;
    vertical-align: middle;
}

/* Contextual sub-line: "1 примерка ≈ 39 ₽" — honesty over hiding */
.balance-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.balance-meta::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* When skeleton is inside, reset the gradient clip so shimmer shows correctly */
.balance-value:has(.skeleton) {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    filter: none;
}

.balance-gens {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(196, 149, 106, 0.1);
    position: relative;
    opacity: 0.8;
}

.gens-label {
    font-size: var(--text-sm);
    color: var(--hint);
}

.gens-value {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-secondary);
}

/* Steps row */
.steps-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    justify-content: space-between;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.steps-row .step-item {
    min-width: 0;
}

.step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    font-weight: 700;
    flex-shrink: 0;
}

.step-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.3;
}

.step-arrow {
    color: var(--hint);
    margin-top: 8px;
    flex-shrink: 0;
    opacity: 0.5;
}

/* Settings row */
.settings-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) 0 var(--space-5);
    border-top: 1px solid var(--glass-border);
    padding-top: var(--space-4);
}

.settings-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    min-height: 56px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-family: var(--font);
    cursor: pointer;
    transition: color var(--duration-quick) var(--ease-out), background var(--duration-quick) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.settings-btn svg { opacity: 0.6; transition: opacity var(--duration-quick) var(--ease-out); }
.settings-btn:hover { color: var(--text); }
.settings-btn:hover svg { opacity: 1; }
.settings-btn:active {
    background: var(--accent-soft);
    transform: scale(0.97);
}

.lang-flag {
    font-size: var(--text-base);
    line-height: 1;
}

/* Model picker */
.model-hint {
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-3);
}

.model-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.model-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px var(--space-4);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: var(--text-base);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    text-align: left;
}

.model-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s;
    border-radius: inherit;
}

.model-btn.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-primary-glow);
}

.model-btn.active::before {
    background: var(--gradient-primary);
    opacity: 0.06;
}

.model-btn:not(.active):active {
    transform: scale(0.97);
    background: var(--glass-bg);
}

.model-emoji {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    flex-shrink: 0;
    color: var(--primary);
}

.model-btn.active .model-emoji {
    background: var(--primary-soft);
}

.model-info {
    flex: 1;
    min-width: 0;
}

.model-name {
    font-weight: 600;
    font-size: var(--text-base);
    display: block;
}

.model-desc {
    font-size: var(--text-xs);
    color: var(--hint);
    margin-top: 2px;
    display: block;
}

.model-btn.active .model-desc {
    color: var(--text-secondary);
}

.model-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s;
}

.model-btn.active .model-check {
    border-color: var(--primary);
    background: var(--primary);
}

.model-check svg {
    display: none;
}

.model-btn.active .model-check svg {
    display: block;
}

/* Preview modal */
.preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s;
}

.preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.preview-content {
    position: relative;
    width: 100%;
    max-width: var(--app-max-width);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.preview-close {
    position: absolute;
    top: 0;
    right: var(--space-4);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}

.preview-close:active {
    background: rgba(255, 255, 255, 0.2);
}

.preview-img {
    max-width: 100%;
    max-height: 65vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    object-fit: contain;
}

.preview-product-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--primary);
}
.preview-product-link a {
    color: var(--primary);
    text-decoration: none;
    font-size: var(--text-sm);
    word-break: break-all;
}

.preview-link-edit {
    width: 100%;
}
.preview-link-edit .btn {
    width: 100%;
}

.preview-content .ba-slider {
    max-width: 100%;
    max-height: 65vh;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.preview-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

/* Promo card */
.promo-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.promo-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    font-family: var(--font);
    line-height: 44px;
    outline: none;
    transition: border-color 0.2s;
}

.promo-input:focus {
    border-color: var(--primary);
}

.promo-input::placeholder {
    color: var(--hint);
}

.promo-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: 44px;
    white-space: nowrap;
    border-radius: var(--radius-md);
}

.promo-message {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    min-height: 18px;
    font-weight: 600;
}

.promo-message.success {
    color: #22c55e;
}

.promo-message.error {
    color: var(--danger);
}

/* Referral card */
.referral-card {
    border-color: rgba(212, 165, 116, 0.15);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        var(--shadow-lg),
        0 0 60px var(--primary-glow);
}

.referral-hero {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.referral-hero-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    background: var(--gradient-primary, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.referral-hero-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.referral-desc {
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.referral-stats {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--glass-border);
    flex-wrap: wrap;
}

.referral-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    align-items: center;
}

.referral-stat-value {
    font-size: var(--text-xl);
    font-weight: 700;
}

.referral-stat-label {
    font-size: var(--text-sm);
    color: var(--hint);
}

/* Referral milestone progress */
.ref-milestone {
    margin: var(--space-3) 0;
}

.ref-milestone-bar {
    position: relative;
    height: 8px;
    background: var(--surface-elevated);
    border-radius: 4px;
    overflow: visible;
}

.ref-milestone-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px var(--primary-glow);
}

.ref-milestone-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ref-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-elevated);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: var(--text-tertiary);
    transition: all 0.3s;
    z-index: 2;
}

.ref-marker.reached {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 6px var(--primary-glow);
}

.ref-marker-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-tertiary);
    white-space: nowrap;
    font-weight: 600;
}

.ref-milestone-hint {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-align: center;
}

/* ======================
   3. TRYON SCREEN
   ====================== */
.tryon-screen {
    padding-top: var(--space-3);
}

/* Furniture type picker */
.furniture-type-picker {
    margin-bottom: var(--space-4);
}

.picker-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: var(--space-2);
}

.type-chips {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.type-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.type-chip:active {
    transform: scale(0.95);
}

.type-chip.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
    box-shadow: 0 0 12px var(--primary-glow);
}

/* Two upload cards side by side */
.tryon-uploads {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-bottom: var(--space-4);
    position: relative;
}

.tryon-card {
    flex: 1;
    aspect-ratio: 3/4;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1.5px dashed var(--glass-border);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

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

.tryon-card.has-image {
    border-style: solid;
    border-color: var(--primary);
}

.tryon-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.tryon-card.has-image .tryon-card-img { display: block; }
.tryon-card.has-image .tryon-card-placeholder { display: none; }

.tryon-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--hint);
    padding: var(--space-3);
    text-align: center;
}

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

.tryon-card-hint {
    font-size: var(--text-sm);
    color: var(--hint);
}

.tryon-card-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.badge-good {
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(196, 149, 106, 0.25);
}

.badge-example {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(212, 165, 116, 0.25);
}

/* Divider between cards */
.tryon-divider {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tryon-divider-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary, var(--primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px var(--primary-glow);
}

.tryon-divider-icon svg {
    transform: rotate(-90deg);
}

/* Generate button */
.btn-generate-text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.btn-generate-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

.btn-sm {
    padding: 12px var(--space-4);
    min-height: 44px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

/* Locked state */
.tryon-locked {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--radius-lg);
    pointer-events: all;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 26, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--hint);
    cursor: pointer;
    transition: background 0.2s;
}

.locked-overlay:active {
    background: rgba(8, 12, 26, 0.85);
}

.locked-text {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
}

.locked-hint {
    font-size: var(--text-sm);
    color: var(--hint);
}

/* Paywall modal */
.paywall-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.paywall-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.paywall-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--app-max-width);
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-4) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    animation: sheetUp 0.3s ease;
}

@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: none; }
}

.paywall-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--glass-border);
    margin: 0 auto var(--space-4);
}

.paywall-icon {
    display: block;
    margin: 0 auto var(--space-3);
    color: var(--primary);
}

.paywall-title {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.paywall-desc {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-5);
}

/* History grid */
.tryon-history {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--glass-border);
}

.tryon-history-header {
    margin-bottom: var(--space-3);
}

.tryon-history-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.tryon-history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.history-item {
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.history-item:active {
    transform: scale(0.95);
}

.history-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-2);
}

.history-empty-illustration {
    opacity: 0.35;
    margin-bottom: var(--space-2);
}

.history-empty-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-secondary);
}

.history-empty-text {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    max-width: 240px;
    line-height: 1.5;
}

/* History category filter chips */
.history-categories {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
}

.history-categories::-webkit-scrollbar {
    display: none;
}

.history-cat-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 10px 14px;
    min-height: 44px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.history-cat-chip:active {
    transform: scale(0.95);
}

.history-cat-chip.active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
    box-shadow: 0 0 12px var(--primary-glow);
}



@keyframes spin { to { transform: rotate(360deg); } }

/* ======================
   7. TOPUP
   ====================== */
.topup-screen {
    padding-top: var(--space-4);
}

.topup-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
}

.topup-section {
    margin-bottom: var(--space-5);
}

.topup-label {
    font-size: var(--text-sm);
    color: var(--hint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-3);
}

/* Packages */
.packages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.packages-extra {
    margin-top: 0;
}

.packages-toggle {
    width: 100%;
    margin-bottom: var(--space-4);
}

.package {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
    text-align: center;
    position: relative;
    color: var(--text);
    min-height: 100px;
}

.package:active { transform: scale(0.98); }

.package.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 20px var(--primary-glow);
}

.package.popular {
    border-color: rgba(196, 149, 106, 0.3);
}

.package-badge {
    position: absolute;
    top: -8px;
    right: 50%;
    transform: translateX(50%);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    background: var(--gradient-primary, var(--primary));
    color: #fff;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.package-gens {
    font-size: var(--text-2xl);
    font-weight: 700;
    background: var(--gradient-primary, var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.package-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.package-price {
    font-size: var(--text-lg);
    font-weight: 700;
}

.package-per {
    font-size: var(--text-sm);
    color: var(--hint);
}

.topup-hint {
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-4);
}

/* Topup card in cabinet */
.topup-card {
    text-align: center;
}
.topup-card .card-title {
    text-align: left;
}
.topup-card .topup-hint {
    text-align: left;
}

.payment-methods {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pay-logo {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--hint);
    letter-spacing: 0.5px;
}

/* ======================
   8. NO BALANCE
   ====================== */
.empty-screen {
    padding-top: var(--space-8);
    text-align: center;
}

.empty-illustration {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    color: var(--accent);
}

.empty-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.empty-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}

/* ======================
   9. ERROR
   ====================== */
.error-screen {
    padding-top: var(--space-8);
    text-align: center;
}

.error-illustration {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--danger-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    color: var(--danger);
}

.error-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.error-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.error-refund {
    font-size: var(--text-sm);
    color: var(--primary);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.error-detail {
    font-size: var(--text-sm);
    color: var(--hint);
    margin-bottom: var(--space-8);
}

/* ======================
   LOADING STATE
   ====================== */
.loading .balance-value,
.loading .gens-value {
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}

/* ======================
   UTILITIES
   ====================== */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================
   CROP MODAL
   ====================== */
.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    padding: var(--app-padding);
    padding-bottom: calc(var(--app-padding) + 70px + env(safe-area-inset-bottom, 0px));
}

.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.crop-title {
    font-size: var(--text-lg);
    font-weight: 700;
}

.crop-done-btn {
    padding: 10px 20px;
    min-height: 44px;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.crop-hint {
    font-size: var(--text-sm);
    color: var(--hint);
    text-align: center;
    margin-bottom: var(--space-3);
}

.crop-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    touch-action: none;
}

.crop-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.crop-selection {
    position: absolute;
    border: 3px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    cursor: move;
    touch-action: none;
}

/* 3x3 grid lines inside selection */
.crop-selection::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(255,255,255,0.25) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.25) 1px, transparent 1px);
    background-size: 33.333% 33.333%;
    pointer-events: none;
}

/* Corner handles */
.crop-selection::after {
    content: '';
    position: absolute;
    inset: -3px;
    pointer-events: none;
    border: none;
    background:
        /* top-left */
        linear-gradient(var(--primary), var(--primary)) 0 0 / 20px 3px no-repeat,
        linear-gradient(var(--primary), var(--primary)) 0 0 / 3px 20px no-repeat,
        /* top-right */
        linear-gradient(var(--primary), var(--primary)) 100% 0 / 20px 3px no-repeat,
        linear-gradient(var(--primary), var(--primary)) 100% 0 / 3px 20px no-repeat,
        /* bottom-left */
        linear-gradient(var(--primary), var(--primary)) 0 100% / 20px 3px no-repeat,
        linear-gradient(var(--primary), var(--primary)) 0 100% / 3px 20px no-repeat,
        /* bottom-right */
        linear-gradient(var(--primary), var(--primary)) 100% 100% / 20px 3px no-repeat,
        linear-gradient(var(--primary), var(--primary)) 100% 100% / 3px 20px no-repeat;
}

/* ======================
   SOURCE PICKER MODAL
   ====================== */
.source-modal {
    position: fixed;
    inset: 0;
    z-index: 350;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.source-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.source-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--app-max-width);
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-4) var(--space-5) calc(var(--space-8) + 70px + env(safe-area-inset-bottom, 0px));
    animation: sheetUp 0.3s ease;
}

.source-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--glass-border);
    margin: 0 auto var(--space-4);
}

.source-title {
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.source-btn {
    margin-bottom: var(--space-2);
    justify-content: center;
}

.source-btn svg {
    flex-shrink: 0;
}

body.light .source-sheet {
    background: #fff;
}

/* ======================
   SKELETON LOADING
   ====================== */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--glass-bg) 25%, var(--glass-border) 50%, var(--glass-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    user-select: none;
}

.skeleton-text {
    min-width: 60px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ======================
   TRYON HEADER & TITLE
   ====================== */
.tryon-header {
    text-align: center;
    margin-bottom: var(--space-5);
}

.tryon-title {
    font-family: var(--font);
    font-size: var(--text-2xl);
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: brandShimmer 6s ease-in-out infinite;
    margin-bottom: var(--space-2);
    line-height: 1.2;
}

/* ======================
   FURNITURE TYPE PICKER (glass card)
   ====================== */
.furniture-type-picker {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.furniture-type-picker .picker-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--hint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-3);
    display: block;
}

.furniture-type-picker .type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.furniture-type-picker .type-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.furniture-type-picker .type-chip:active {
    transform: scale(0.95);
}

.furniture-type-picker .type-chip.active {
    border-color: transparent;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        var(--gradient-primary) border-box;
    border: 1.5px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--text);
    box-shadow: 0 0 16px var(--primary-glow), var(--shadow-primary-glow);
}

/* ======================
   TRYON LIGHT THEME OVERRIDES
   ====================== */
body.light .tryon-title {
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

body.light .furniture-type-picker {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-sm);
}

body.light .furniture-type-picker .type-chip {
    background: rgba(255, 255, 255, 0.6);
    border-color: var(--glass-border);
}

body.light .furniture-type-picker .type-chip.active {
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--gradient-primary) border-box;
    border: 1.5px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 12px var(--primary-glow), var(--shadow-primary-glow);
}

/* ===== ENHANCED UPLOAD CARDS v2 ===== */

/* Upload cards - premium glass with gradient border */
.tryon-card {
    min-height: 200px;
    background:
        linear-gradient(160deg, rgba(196, 149, 106, 0.07) 0%, rgba(212, 165, 116, 0.05) 50%, rgba(180, 140, 100, 0.04) 100%),
        var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 2px dashed rgba(196, 149, 106, 0.28);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 40px rgba(196, 149, 106, 0.03);
    transition: border-color 0.4s ease, transform 0.15s ease, box-shadow 0.4s ease, background 0.5s ease;
    position: relative;
}

/* Subtle inner glow pseudo-element */
.tryon-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(196, 149, 106, 0.06), transparent 70%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.tryon-card:hover,
.tryon-card:focus-within {
    border-color: rgba(196, 149, 106, 0.55);
    box-shadow:
        var(--shadow-md),
        0 0 28px var(--primary-glow),
        0 0 8px rgba(212, 165, 116, 0.1);
}

.tryon-card:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-sm);
}

/* Card with image loaded - gradient border trick */
.tryon-card.has-image {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
        linear-gradient(135deg, var(--primary) 0%, var(--accent) 60%, #3b82f6 100%) border-box;
    box-shadow:
        var(--shadow-md),
        0 0 24px var(--primary-glow),
        0 0 8px var(--accent-glow);
}

.tryon-card.has-image::before {
    opacity: 0;
}

.tryon-card.has-image:hover {
    box-shadow:
        var(--shadow-lg),
        0 0 36px var(--primary-glow),
        0 0 18px var(--accent-glow);
}

/* Placeholder state */
.tryon-card-placeholder {
    gap: var(--space-3);
}

.tryon-card-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--primary);
    opacity: 0.45;
    filter: drop-shadow(0 0 10px var(--primary-glow));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-3px) scale(1.06);
    }
}

.tryon-card-label {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text);
    margin-top: var(--space-1);
    text-shadow: 0 0 20px rgba(196, 149, 106, 0.15);
}

.tryon-card-hint {
    font-size: var(--text-sm);
    color: var(--hint);
    opacity: 0.75;
    letter-spacing: 0.3px;
}

/* Photo loaded - image styling */
.tryon-card-img {
    border-radius: calc(var(--radius-lg) - 2px);
    animation: photoReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes photoReveal {
    from {
        opacity: 0;
        transform: scale(1.06);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Badge - gradient with animated glow */
.tryon-card-badge {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow:
        0 2px 12px var(--primary-glow),
        0 0 20px rgba(196, 149, 106, 0.18);
    padding: 5px 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    animation: badgePulseGlow 2.5s ease-in-out infinite alternate;
}

@keyframes badgePulseGlow {
    0% {
        box-shadow:
            0 2px 10px var(--primary-glow),
            0 0 14px rgba(196, 149, 106, 0.12);
    }
    100% {
        box-shadow:
            0 2px 18px var(--accent-glow),
            0 0 28px rgba(212, 165, 116, 0.22);
    }
}

/* Image load shimmer */
.tryon-card.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--glass-bg) 25%,
        rgba(255,255,255,0.06) 50%,
        var(--glass-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmerSweep 1.2s ease-in-out infinite;
    z-index: 2;
    border-radius: var(--radius-lg);
}

@keyframes shimmerSweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes imageReveal {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

.tryon-card.has-image .tryon-card-img {
    animation: imageReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes badgePop {
    0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.tryon-card-badge {
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Divider - gradient line connector with orb */
.tryon-divider {
    width: 48px;
    position: relative;
}

.tryon-divider::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(196, 149, 106, 0.15) 15%,
        var(--primary) 35%,
        var(--accent) 65%,
        rgba(212, 165, 116, 0.15) 85%,
        transparent 100%
    );
    border-radius: 1px;
    opacity: 0.5;
}

/* Glow dots at line ends */
.tryon-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(196, 149, 106, 0.12), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.tryon-divider-icon {
    width: 38px;
    height: 38px;
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 28px var(--primary-glow),
        0 0 8px var(--accent-glow),
        0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== LIGHT THEME: UPLOAD CARDS v2 ===== */

body.light .tryon-card {
    background:
        linear-gradient(160deg, rgba(175, 130, 90, 0.05) 0%, rgba(196, 160, 120, 0.03) 50%, rgba(165, 125, 85, 0.02) 100%),
        var(--glass-bg);
    border: 2px dashed rgba(175, 130, 90, 0.2);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 30px rgba(175, 130, 90, 0.02);
}

body.light .tryon-card::before {
    background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(175, 130, 90, 0.04), transparent 70%);
}

body.light .tryon-card:hover,
body.light .tryon-card:focus-within {
    border-color: rgba(175, 130, 90, 0.45);
    box-shadow:
        var(--shadow-md),
        0 0 20px var(--primary-glow);
}

body.light .tryon-card.has-image {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--primary) 0%, var(--accent) 60%, #4f46e5 100%) border-box;
    border: 2px solid transparent;
    box-shadow:
        var(--shadow-md),
        0 0 18px var(--primary-glow);
}

body.light .tryon-card.has-image::before {
    opacity: 0;
}

body.light .tryon-card-placeholder svg {
    color: var(--primary);
    filter: drop-shadow(0 0 6px var(--primary-glow));
}

body.light .tryon-card-label {
    color: var(--text);
    text-shadow: none;
}

body.light .tryon-card-badge {
    box-shadow:
        0 2px 10px var(--primary-glow),
        0 0 12px rgba(175, 130, 90, 0.08);
}

body.light .tryon-divider::before {
    opacity: 0.35;
}

body.light .tryon-divider::after {
    background: radial-gradient(circle, rgba(175, 130, 90, 0.06), transparent 70%);
}

body.light .tryon-divider-icon {
    box-shadow:
        0 0 16px var(--primary-glow),
        0 4px 10px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

/* ======================
   POLISHED: GENERATE BUTTON
   ====================== */
#btn-generate {
    position: relative;
    padding: 18px 28px;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    color: #fff;
    box-shadow:
        0 4px 24px var(--primary-glow),
        0 0 48px rgba(196, 149, 106, 0.2),
        0 0 80px rgba(212, 165, 116, 0.1);
    transition: transform 0.15s, box-shadow 0.3s, opacity 0.3s, filter 0.3s;
    overflow: hidden;
}

#btn-generate::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

/* Enabled state: pulsing glow */
#btn-generate:not(:disabled) {
    animation: generateGlow 2.5s ease-in-out infinite;
}

@keyframes generateGlow {
    0%, 100% {
        box-shadow:
            0 4px 24px var(--primary-glow),
            0 0 48px rgba(196, 149, 106, 0.2),
            0 0 80px rgba(212, 165, 116, 0.1);
    }
    50% {
        box-shadow:
            0 4px 32px rgba(196, 149, 106, 0.45),
            0 0 64px rgba(196, 149, 106, 0.3),
            0 0 100px rgba(212, 165, 116, 0.18);
    }
}

#btn-generate:not(:disabled):active {
    transform: scale(0.97);
    animation: none;
    box-shadow:
        0 2px 16px var(--primary-glow),
        0 0 32px rgba(196, 149, 106, 0.15);
}

/* Logo icon glow inside button */
#btn-generate .btn-logo-icon {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* Disabled state: clearly inactive */
#btn-generate:disabled {
    opacity: 0.5;
    filter: saturate(0.3) brightness(0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
    animation: none;
}

#btn-generate:disabled .btn-logo-icon {
    filter: none;
    opacity: 0.5;
}

/* ======================
   POLISHED: PROGRESS BAR
   ====================== */
.progress-container {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

.progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.progress-header-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: 700;
    color: var(--text-secondary);
}
.progress-header-timer {
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
}

.progress-bar {
    height: 8px;
    background: rgba(196, 149, 106, 0.1);
    border-radius: var(--radius-full);
    border: 1px solid rgba(196, 149, 106, 0.12);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 12px var(--primary-glow);
}

/* Glow dot at the end of progress fill */
.progress-fill::before {
    content: '';
    position: absolute;
    top: -2px; right: -4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--primary);
    animation: progressDot 1.5s ease-in-out infinite;
}

@keyframes progressDot {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.4); }
}

.progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0.05) 80%,
        transparent 100%
    );
    animation: progressShimmer 1.8s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

.progress-status {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-3);
    font-weight: 600;
    letter-spacing: 0.3px;
    animation: statusPulse 1.8s ease-in-out infinite;
    transition: opacity 0.3s;
}

.progress-status.updating {
    opacity: 0;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ======================
   POLISHED: RESULT SECTION
   ====================== */
.tryon-result {
    margin-top: var(--space-6);
    animation: resultAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes resultAppear {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* "Результат" label: restrained editorial caption with a leading dot */
.tryon-result-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--primary);
}
.tryon-result-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    flex-shrink: 0;
}

/* Result image: glowing showcase frame */
.tryon-result-image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-4);
    border: 1.5px solid transparent;
    background:
        var(--bg) padding-box,
        linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    box-shadow:
        var(--shadow-lg),
        0 0 32px var(--primary-glow),
        0 0 64px rgba(212, 165, 116, 0.1);
}

.tryon-result-image::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(196, 149, 106, 0.15), rgba(212, 165, 116, 0.1));
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: frameGlow 3s ease-in-out infinite alternate;
}

@keyframes frameGlow {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== BEFORE/AFTER SLIDER ===== */
.ba-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}

.ba-before {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.ba-after-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 50%);
    will-change: clip-path;
}

.ba-after {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    will-change: left;
}

.ba-handle-line {
    position: absolute;
    inset: 0;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.ba-handle-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: #fff;
    pointer-events: auto;
}

.ba-label {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s;
}

.ba-slider:hover .ba-label,
.ba-slider.dragging .ba-label {
    opacity: 1;
}

.ba-label-before { left: 12px; }
.ba-label-after { right: 12px; }

@keyframes baIntroSweep {
    0% { left: 15%; }
    50% { left: 85%; }
    100% { left: 50%; }
}

.ba-slider.intro .ba-handle {
    animation: baIntroSweep 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Action buttons: hero download + secondary share */
.tryon-result-primary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.result-btn-hero {
    width: 100%;
    padding: 14px var(--space-4);
    font-size: var(--text-base);
    font-weight: 800;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-primary-glow);
    transition: transform 0.15s, box-shadow 0.2s;
}

.result-btn-hero:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.result-btn-share {
    width: 100%;
    padding: 10px var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.result-btn-share:hover,
.result-btn-share:active {
    opacity: 1;
}

.product-link-row {
    margin-bottom: var(--space-3);
}
.product-link-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.7;
}
.product-link-input {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.product-link-input input {
    flex: 1;
    padding: 10px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-sm);
    outline: none;
}
.product-link-input input:focus {
    border-color: var(--primary);
}
.product-link-saved {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

.tryon-result-actions {
    display: flex;
    gap: var(--space-3);
}

.tryon-result-actions .btn {
    flex: 1;
    padding: 12px var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-lg);
}

/* ======================
   POLISHED: COST DISPLAY
   ====================== */
.tryon-cost {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--hint);
    margin-top: var(--space-3);
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.2px;
    min-height: 18px;
}

/* ======================
   POLISHED: LIGHT THEME OVERRIDES
   ====================== */

/* Generate button - light */
body.light #btn-generate {
    box-shadow:
        0 4px 20px rgba(175, 130, 90, 0.2),
        0 0 40px rgba(175, 130, 90, 0.08);
}

body.light #btn-generate:not(:disabled) {
    animation: generateGlowLight 2.5s ease-in-out infinite;
}

@keyframes generateGlowLight {
    0%, 100% {
        box-shadow:
            0 4px 20px rgba(175, 130, 90, 0.2),
            0 0 40px rgba(175, 130, 90, 0.08);
    }
    50% {
        box-shadow:
            0 4px 28px rgba(175, 130, 90, 0.3),
            0 0 56px rgba(175, 130, 90, 0.12);
    }
}

body.light #btn-generate:disabled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    filter: saturate(0.35) brightness(0.85);
}

body.light #btn-generate .btn-logo-icon {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* Progress bar - light */
body.light .progress-bar {
    background: rgba(175, 130, 90, 0.06);
    border-color: rgba(175, 130, 90, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.light .progress-fill {
    box-shadow: 0 0 8px var(--primary-glow);
}

body.light .progress-fill::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.1) 80%,
        transparent 100%
    );
}

/* Result section - light */
body.light .tryon-result-image {
    background:
        #fff padding-box,
        linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    box-shadow:
        var(--shadow-md),
        0 0 24px var(--primary-glow);
}

body.light .tryon-result-image::before {
    background: linear-gradient(135deg, rgba(175, 130, 90, 0.06), rgba(196, 160, 120, 0.04));
}

body.light .tryon-result-label {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Cost - light */
body.light .tryon-cost {
    color: var(--hint);
    opacity: 0.85;
}

.hidden { display: none !important; }

/* ===== BETA BADGE ===== */
.beta-badge {
    display: inline-block;
    font-family: var(--font);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: var(--gradient-primary);
    color: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    margin-left: 6px;
    box-shadow: 0 0 8px var(--primary-glow);
    line-height: 1.4;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9);
    opacity: 0.75;
}

/* ===== ABOUT SCREEN ===== */
.about-screen {
    padding: var(--app-padding) var(--app-padding) calc(80px + env(safe-area-inset-bottom, 0));
    max-width: var(--app-max-width);
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cards spacing */
.about-screen .card {
    margin-bottom: var(--space-3);
}

/* About description text */
.about-text {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    margin: var(--space-2) 0 0;
}

/* ---- Steps (tutorial) ---- */
/* About: how-it-works steps */
.how-steps {
    display: flex;
    flex-direction: column;
}

.how-step {
    display: flex;
    gap: var(--space-3);
}

.how-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 32px;
}

.how-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.how-step-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, var(--primary), transparent);
    opacity: 0.3;
    margin: 4px 0;
}

.how-step-body {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding-bottom: var(--space-4);
}

.how-step:last-child .how-step-body {
    padding-bottom: 0;
}

.how-step-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.how-step-icon-accent {
    background: var(--accent-soft);
    color: var(--accent);
}

.how-step-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.how-step-desc {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* About: swipe carousel */
.swipe-carousel {
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.swipe-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-3);
    scrollbar-width: none;
    padding: 0 2px;
}

.swipe-track::-webkit-scrollbar { display: none; }

.swipe-slide {
    flex: 0 0 85%;
    scroll-snap-align: center;
    min-width: 0;
}

.swipe-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-3);
}

.swipe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hint);
    opacity: 0.3;
    transition: opacity 0.3s, background 0.3s, transform 0.3s;
}

.swipe-dot.active {
    opacity: 1;
    background: var(--primary);
    transform: scale(1.3);
}

/* About: tips */
.about-tips {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.about-tip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.about-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
}

.about-tip-text {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
}

/* About: use case SVG icons */
.usecase-icon-svg {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

/* Hide old step elements in about */
.about-steps .step-arrow { display: none; }

/* ---- Use cases ---- */
.about-usecases {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.usecase-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.usecase-item:active {
    background: var(--primary-soft);
}

.usecase-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}

.usecase-text {
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.45;
    opacity: 0.85;
}

/* ---- B2B Card ---- */
.about-b2b-card {
    border: 1px solid transparent;
    background:
        var(--glass-bg),
        linear-gradient(var(--bg), var(--bg)) padding-box,
        var(--gradient-primary) border-box;
    background-origin: border-box;
    background-clip: padding-box, padding-box, border-box;
    position: relative;
    overflow: hidden;
}

.about-b2b-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    z-index: 0;
}

.about-b2b-card > * {
    position: relative;
    z-index: 1;
}

.about-b2b-btn {
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    width: 100%;
    box-shadow: var(--shadow-primary-glow);
}

/* ---- Version footer ---- */
.about-version {
    text-align: center;
    color: var(--hint);
    font-size: var(--text-sm);
    margin-top: var(--space-6);
    opacity: 0.55;
    letter-spacing: 0.5px;
}

/* ---- Light theme overrides for about screen ---- */
body.light .about-tip-icon {
    background: rgba(175, 130, 90, 0.08);
}
body.light .usecase-icon-svg {
    background: rgba(196, 160, 120, 0.08);
}

body.light .usecase-icon {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(175, 130, 90, 0.12);
}

body.light .about-b2b-card {
    background:
        var(--glass-bg),
        linear-gradient(#fff, #fff) padding-box,
        var(--gradient-primary) border-box;
    background-origin: border-box;
    background-clip: padding-box, padding-box, border-box;
}

body.light .about-b2b-card::before {
    background: rgba(255, 255, 255, 0.75);
}

body.light .beta-badge {
    box-shadow: 0 0 8px var(--primary-glow), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ======================
   ADDITIONAL LIGHT THEME OVERRIDES
   ====================== */

/* Bottom nav: white-ish glass instead of dark glass */
body.light .bottom-nav {
    background: rgba(255, 255, 255, 0.72);
    border-top-color: rgba(175, 130, 90, 0.08);
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04);
}

/* Balance value glow: much softer in light */
body.light .balance-value {
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

/* Balance gens border */
body.light .balance-gens {
    border-top-color: rgba(175, 130, 90, 0.08);
}

/* Onboarding background: lighter radials */
body.light .onboarding-bg {
    background: radial-gradient(ellipse at 50% 30%, rgba(165, 125, 85, 0.08) 0%, rgba(196, 160, 120, 0.04) 40%, transparent 70%);
}

/* Hero image: softer drop shadow in light */
body.light .hero-img {
    filter: drop-shadow(0 8px 32px rgba(165, 125, 85, 0.15)) drop-shadow(0 4px 16px rgba(196, 160, 120, 0.1));
}

/* Logo image glow: softer */
body.light .logo-img {
    filter: drop-shadow(0 4px 14px var(--primary-glow));
}

/* Cabinet logo: softer glow */
body.light .cabinet-logo {
    filter: drop-shadow(0 4px 12px var(--primary-glow));
}

/* Locked overlay: light background instead of dark */
body.light .locked-overlay:active {
    background: rgba(240, 240, 250, 0.9);
}

/* History items: lighter borders */
body.light .history-item {
    border-color: rgba(175, 130, 90, 0.1);
}

/* History category chips: white bg in light */
body.light .history-cat-chip {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(175, 130, 90, 0.1);
}

body.light .history-cat-chip.active {
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Packages: white glass in light */
body.light .package {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(175, 130, 90, 0.1);
}

body.light .package.selected {
    box-shadow: 0 0 16px var(--primary-glow);
}

body.light .package.popular {
    border-color: rgba(175, 130, 90, 0.2);
}

/* Pay logos: white bg */
body.light .pay-logo {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(175, 130, 90, 0.08);
}

/* Settings buttons: white glass */
body.light .settings-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(175, 130, 90, 0.1);
}

/* Model buttons: white bg */
body.light .model-btn {
    background: var(--bg-secondary);
    border-color: rgba(175, 130, 90, 0.1);
}

body.light .model-btn.active {
    box-shadow: 0 0 0 1px var(--primary), 0 4px 14px var(--primary-glow);
}

body.light .model-btn:not(.active):active {
    background: rgba(255, 255, 255, 0.6);
}

body.light .model-emoji {
    background: rgba(255, 255, 255, 0.6);
}

/* Badges (good / example): readable on light */
body.light .badge-good {
    background: rgba(175, 130, 90, 0.1);
    border-color: rgba(175, 130, 90, 0.2);
}

body.light .badge-example {
    background: rgba(196, 160, 120, 0.1);
    border-color: rgba(196, 160, 120, 0.2);
}

/* Promo input: white bg */
body.light .promo-input {
    background: var(--bg-secondary);
    border-color: rgba(175, 130, 90, 0.12);
}

/* Referral card: lighter accent border */
body.light .referral-card {
    border-color: rgba(196, 160, 120, 0.15);
}

/* Empty / Error illustration: lighter tints */
body.light .empty-illustration {
    background: rgba(196, 160, 120, 0.08);
}

body.light .error-illustration {
    background: rgba(220, 38, 38, 0.08);
}

/* Crop modal: light bg */
body.light .crop-modal {
    background: var(--bg);
}

/* Skeleton: lighter shimmer */
body.light .skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.5) 25%, rgba(175,130,90,0.06) 50%, rgba(255,255,255,0.5) 75%);
    background-size: 200% 100%;
}

/* Paywall handle: visible on white */
body.light .paywall-handle,
body.light .source-handle {
    background: rgba(175, 130, 90, 0.15);
}

/* Step num in cabinet steps row */
body.light .step-num {
    background: rgba(196, 160, 120, 0.1);
}

/* ======================
   RATING STRIP
   ====================== */
.rating-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}
.rating-prompt {
    font-size: var(--text-sm);
    color: var(--text);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    flex: 1;
    min-width: 0;
}
.rating-buttons {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}
.rating-btn {
    background: var(--surface-elevated);
    border: 1.5px solid var(--glass-border);
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    transition:
        transform var(--duration-quick) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rating-btn:active { transform: scale(0.92); }

/* Thumbs down — turns warm-red on select */
.rating-btn-down.selected {
    background: rgba(196, 92, 92, 0.12);
    border-color: var(--danger);
    color: var(--danger);
}

/* Thumbs up — turns warm-gold on select */
.rating-btn-up.selected {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 6px 20px var(--primary-glow);
}

.rating-thanks {
    text-align: center;
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--primary);
    font-weight: 600;
    margin-top: var(--space-3);
}

/* Negative-feedback panel — soft, never punishing */
.rating-feedback {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    text-align: center;
    animation: cardIn 0.4s var(--ease-out-soft);
}
.rating-feedback-text {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
    margin-bottom: var(--space-3);
}
.rating-feedback-btn {
    width: auto;
    padding: 10px 18px;
    text-decoration: none;
    display: inline-flex;
}

/* ======================
   HINTS BAR (swipeable carousel)
   ====================== */
.hints-bar {
    position: relative;
    margin: 0 0 var(--space-3);
    /* Mirror the horizontal footprint of .card / .furniture-type-picker
       above so hints sit exactly under them. */
}

.hints-track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
}
.hints-track::-webkit-scrollbar { display: none; }

.hint-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    min-height: 64px;
    transition: box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.hint-slide:hover {
    box-shadow: var(--shadow-sm);
}

.hint-slide-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.hint-slide-body {
    flex: 1;
    min-width: 0;
}

.hint-slide-num {
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    opacity: 0.7;
    margin-bottom: 1px;
}

.hint-slide-text {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.35;
}

/* Dots */
.hints-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: var(--space-2);
}

.hints-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hints-dot.active {
    opacity: 1;
    width: 20px;
    border-radius: 3px;
}

/* ======================
   CONFETTI
   ====================== */
.confetti-container {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 60vh;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.confetti-particle {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(60vh) rotate(720deg) scale(0.5); }
}

/* ======================
   UPLOAD CARD PULSE
   ====================== */
.tryon-card:not(.has-image):not(.loading) {
    animation: uploadPulse 3.5s ease-in-out infinite;
}

@keyframes uploadPulse {
    0%, 100% { border-color: var(--glass-border); }
    50%      { border-color: var(--primary); box-shadow: inset 0 0 20px var(--primary-soft); }
}

/* ======================
   PER-THEME GEOMETRY (subtle accents on balance card)
   ====================== */
/* Removed heavy repeating patterns — the ::before/::after radial
   glows defined per-theme above are sufficient decoration. */

/* Package savings */
.package-save {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 2px;
}

/* ======================
   UPSELL STRIP
   ====================== */
.upsell-strip {
    margin-top: var(--space-3);
    background: var(--primary-soft);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    animation: cardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.upsell-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.upsell-strip-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    flex: 1;
}

/* ======================
   RIPPLE EFFECT
   ====================== */
.ripple-host {
    position: relative;
    overflow: hidden;
}

@keyframes rippleExpand {
    from { transform: scale(0); opacity: 0.35; }
    to   { transform: scale(3.5); opacity: 0; }
}

.ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    pointer-events: none;
    animation: rippleExpand 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 10;
}


/* ======================
   POLISH LAYER (v2)
   ====================== */

/* Tabular numerals — anywhere we show counts, prices, or stats.
   Keeps digits at equal width so numbers don't jitter when they update. */
.balance-value,
.balance-meta,
.referral-stat-value,
.ref-milestone-hint,
.progress-header-timer,
.gens-label,
.topup-package-gens,
.topup-package-price,
.history-cat-chip,
.kpi-value,
.num,
.mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Respect prefers-reduced-motion — replace long animations with short
   fades, keep functional transitions snappy. Principle 3: intentional. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ======================
   ONBOARDING v2 (single-screen)
   ====================== */

.onboarding-single {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--app-max-width);
    padding: var(--space-6) var(--app-padding) calc(var(--space-8) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    animation: obSingleIn 0.6s var(--ease-out-soft) both;
}
@keyframes obSingleIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Hero ---- */
.ob-hero {
    text-align: center;
    padding-top: var(--space-5);
}
.ob-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px 5px 10px;
    margin-bottom: var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.ob-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
    animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
    0%,100% { transform: scale(1);   opacity: 0.85; }
    50%     { transform: scale(1.2); opacity: 1; }
}

.ob-hero-logo {
    width: 140px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 12px 40px var(--primary-glow)) drop-shadow(0 4px 20px var(--accent-glow));
    margin: 0 auto var(--space-4);
    display: block;
}

.ob-hero-title {
    font-family: var(--font);
    font-size: var(--text-4xl);
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
    line-height: 1.02;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: brandShimmer 6s ease-in-out infinite;
}
.ob-hero-tagline {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 28ch;
    margin: 0 auto;
}

/* ---- Sections ---- */
.ob-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.ob-section-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--hint);
    padding-left: var(--space-1);
}

/* ---- 3-step list (editorial row layout) ---- */
.ob-steps-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, var(--shadow-md);
}
.ob-step-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    position: relative;
}
.ob-step-row + .ob-step-row {
    border-top: 1px solid var(--glass-border);
}
.ob-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 16px rgba(196, 149, 106, 0.08);
}
.ob-step-body {
    flex: 1;
    min-width: 0;
}
.ob-step-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 2px;
    letter-spacing: var(--tracking-snug);
}
.ob-step-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.ob-step-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--primary);
    opacity: 0.7;
}

/* ---- Store badges grid ---- */
.ob-stores-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ob-store {
    padding: 7px 13px;
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-snug);
    transition: color var(--duration-quick) var(--ease-out), border-color var(--duration-quick) var(--ease-out);
}
.ob-store:hover { color: var(--text); border-color: var(--accent); }

/* ---- Theme picker (new, slicker than legacy .ob-theme-grid above) ---- */
.ob-section .ob-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin: 0;
}
.ob-section .ob-theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out),
        transform var(--duration-quick) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.ob-section .ob-theme-card.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.1);
}
.ob-section .ob-theme-card:active { transform: scale(0.97); }

.ob-section .ob-theme-preview {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ob-preview-gold   { background: linear-gradient(135deg, #b8865a, #d4a574, #e8c49a); }
.ob-preview-purple { background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7); }
.ob-preview-green  { background: linear-gradient(135deg, #2da66e, #4ead6b, #78c489); }

.ob-section .ob-theme-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
    letter-spacing: var(--tracking-snug);
}

/* ---- CTA ---- */
.ob-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    position: sticky;
    bottom: 16px;
    z-index: 2;
}
.ob-cta-note {
    font-size: var(--text-xs);
    color: var(--hint);
    text-align: center;
    letter-spacing: var(--tracking-snug);
}

/* Override the fixed .onboarding flex centering so we can scroll top-to-bottom */
.onboarding {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ======================
   TOPUP CARD preview (cabinet)
   ====================== */
.topup-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-4);
}
.topup-preview-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}
.topup-preview-gens {
    flex-shrink: 0;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--primary);
    width: 40px;
}
.topup-preview-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.topup-preview-label {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.topup-preview-sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ======================
   ABOUT HERO (Обучение screen)
   ====================== */
.about-hero {
    text-align: center;
    padding: var(--space-6) 0 var(--space-5);
    margin-bottom: var(--space-2);
}
.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px 5px 10px;
    margin-bottom: var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.about-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.about-hero-title {
    font-family: var(--font);
    font-size: var(--text-4xl);
    font-weight: 900;
    letter-spacing: var(--tracking-tight);
    line-height: 1.02;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: brandShimmer 6s ease-in-out infinite;
}
.about-hero-lead {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.45;
    max-width: 28ch;
    margin: 0 auto;
}