/* ---------- COLOR THEME PRESETS (12) — all dark-background, override base :root ---------- */
body.theme-picker--cyberpunk {
    --bg: #05010F;
    --bg2: #0D0221;
    --fg: #F5F5FF;
    --overlay-rgb: 245, 245, 255;
    --navshell-rgb: 5, 1, 15;
    --muted: #9D7BC9;
    --locked: #1A0B2E;
    --accent: #FF00E5;
    --accent-dark: #B300A3;
    --accent-light: #FF6FEF;
    --teal: #00FFF0;
    --teal-dark: #00B8AD;
    --teal-light: #7CFFF5;
    --success: #00FF9C;
    --error: #FF003C;
    --gold: #FFEA00;
    --purple: #7A00FF;
    --accent-rgb: 255, 0, 229;
    --teal-rgb: 0, 255, 240;
    --purple-rgb: 122, 0, 255;
    --success-rgb: 0, 255, 156;
}

body.theme-picker--anime {
    --bg: #150826;
    --bg2: #210E3B;
    --fg: #FFF0FA;
    --overlay-rgb: 255, 240, 250;
    --navshell-rgb: 21, 8, 38;
    --muted: #B292D9;
    --locked: #2D1447;
    --accent: #FF3D9A;
    --accent-dark: #C71D6E;
    --accent-light: #FF8FC4;
    --teal: #4FD8FF;
    --teal-dark: #1D93B8;
    --teal-light: #A0ECFF;
    --success: #5BFFB0;
    --error: #FF5277;
    --gold: #FFD34F;
    --purple: #B94FFF;
    --accent-rgb: 255, 61, 154;
    --teal-rgb: 79, 216, 255;
    --purple-rgb: 185, 79, 255;
    --success-rgb: 91, 255, 176;
}

body.theme-picker--gold {
    --bg: #120D04;
    --bg2: #1E1608;
    --fg: #FDF3DA;
    --overlay-rgb: 253, 243, 218;
    --navshell-rgb: 18, 13, 4;
    --muted: #A5915F;
    --locked: #241B0C;
    --accent: #E8B84B;
    --accent-dark: #A8791E;
    --accent-light: #F6D888;
    --teal: #C9A227;
    --teal-dark: #8C6F16;
    --teal-light: #E9CE6E;
    --success: #B7C95B;
    --error: #C9502F;
    --gold: #FFD700;
    --purple: #8A6A2A;
    --accent-rgb: 232, 184, 75;
    --teal-rgb: 201, 162, 39;
    --purple-rgb: 138, 106, 42;
    --success-rgb: 183, 201, 91;
}

body.theme-picker--matrix {
    --bg: #000500;
    --bg2: #001A05;
    --fg: #D6FFDD;
    --overlay-rgb: 214, 255, 221;
    --navshell-rgb: 0, 5, 0;
    --muted: #5FBE7C;
    --locked: #012608;
    --accent: #00FF41;
    --accent-dark: #00A82B;
    --accent-light: #7CFFAA;
    --teal: #00FF9C;
    --teal-dark: #00B36E;
    --teal-light: #8CFFD1;
    --success: #00FF41;
    --error: #FF3131;
    --gold: #B6FF00;
    --purple: #3DFF7A;
    --accent-rgb: 0, 255, 65;
    --teal-rgb: 0, 255, 156;
    --purple-rgb: 61, 255, 122;
    --success-rgb: 0, 255, 65;
}

body.theme-picker--sakura {
    --bg: #1B0E17;
    --bg2: #2A1522;
    --fg: #FFEAF4;
    --overlay-rgb: 255, 234, 244;
    --navshell-rgb: 27, 14, 23;
    --muted: #C79DBA;
    --locked: #301A29;
    --accent: #FF6FB5;
    --accent-dark: #C43F82;
    --accent-light: #FFB3D9;
    --teal: #7ED1C9;
    --teal-dark: #459088;
    --teal-light: #B3EAE3;
    --success: #8FE3A5;
    --error: #F16A7A;
    --gold: #F6C89F;
    --purple: #C990E0;
    --accent-rgb: 255, 111, 181;
    --teal-rgb: 126, 209, 201;
    --purple-rgb: 201, 144, 224;
    --success-rgb: 143, 227, 165;
}

body.theme-picker--ocean {
    --bg: #010B14;
    --bg2: #03192B;
    --fg: #E4FBFF;
    --overlay-rgb: 228, 251, 255;
    --navshell-rgb: 1, 11, 20;
    --muted: #6FA9C4;
    --locked: #052033;
    --accent: #00B4FF;
    --accent-dark: #0072A8;
    --accent-light: #7DDBFF;
    --teal: #00E5D0;
    --teal-dark: #0A8F82;
    --teal-light: #7FFFEF;
    --success: #3DFFB8;
    --error: #FF5C5C;
    --gold: #FFC93D;
    --purple: #3D5AFF;
    --accent-rgb: 0, 180, 255;
    --teal-rgb: 0, 229, 208;
    --purple-rgb: 61, 90, 255;
    --success-rgb: 61, 255, 184;
}

body.theme-picker--sunset {
    --bg: #1A0700;
    --bg2: #2E0F02;
    --fg: #FFF2E8;
    --overlay-rgb: 255, 242, 232;
    --navshell-rgb: 26, 7, 0;
    --muted: #D19776;
    --locked: #31150A;
    --accent: #FF5C33;
    --accent-dark: #C43A17;
    --accent-light: #FF9B76;
    --teal: #FFA63D;
    --teal-dark: #C97418;
    --teal-light: #FFCC8C;
    --success: #FFB03D;
    --error: #FF2E4D;
    --gold: #FFD23D;
    --purple: #FF3D7A;
    --accent-rgb: 255, 92, 51;
    --teal-rgb: 255, 166, 61;
    --purple-rgb: 255, 61, 122;
    --success-rgb: 255, 176, 61;
}

body.theme-picker--royal {
    --bg: #0A0518;
    --bg2: #160B2E;
    --fg: #F2E9FF;
    --overlay-rgb: 242, 233, 255;
    --navshell-rgb: 10, 5, 24;
    --muted: #A79BC9;
    --locked: #1E1038;
    --accent: #B026FF;
    --accent-dark: #7A16B8;
    --accent-light: #D28CFF;
    --teal: #5D5FEF;
    --teal-dark: #3A3CAD;
    --teal-light: #A5A6FF;
    --success: #5DEFA0;
    --error: #FF4D6D;
    --gold: #E8C15A;
    --purple: #8A2BE2;
    --accent-rgb: 176, 38, 255;
    --teal-rgb: 93, 95, 239;
    --purple-rgb: 138, 43, 226;
    --success-rgb: 93, 239, 160;
}

body.theme-picker--crimson {
    --bg: #0D0000;
    --bg2: #210404;
    --fg: #FFE9E9;
    --overlay-rgb: 255, 233, 233;
    --navshell-rgb: 13, 0, 0;
    --muted: #C48787;
    --locked: #260808;
    --accent: #FF1E3C;
    --accent-dark: #B30E27;
    --accent-light: #FF6B7F;
    --teal: #FF5C5C;
    --teal-dark: #B83333;
    --teal-light: #FF9E9E;
    --success: #4FE38A;
    --error: #FF0033;
    --gold: #E8B84B;
    --purple: #8A0F2C;
    --accent-rgb: 255, 30, 60;
    --teal-rgb: 255, 92, 92;
    --purple-rgb: 138, 15, 44;
    --success-rgb: 79, 227, 138;
}

body.theme-picker--emerald {
    --bg: #00120A;
    --bg2: #012415;
    --fg: #E4FFF1;
    --overlay-rgb: 228, 255, 241;
    --navshell-rgb: 0, 18, 10;
    --muted: #5FBE95;
    --locked: #04301C;
    --accent: #00E68A;
    --accent-dark: #00A863;
    --accent-light: #7DFFC4;
    --teal: #1DE9B6;
    --teal-dark: #12A87F;
    --teal-light: #7FFFDC;
    --success: #00E68A;
    --error: #FF5C5C;
    --gold: #C9E85B;
    --purple: #2BE29A;
    --accent-rgb: 0, 230, 138;
    --teal-rgb: 29, 233, 182;
    --purple-rgb: 43, 226, 154;
    --success-rgb: 0, 230, 138;
}

body.theme-picker--arctic {
    --bg: #010A14;
    --bg2: #031C2E;
    --fg: #EAFBFF;
    --overlay-rgb: 234, 251, 255;
    --navshell-rgb: 1, 10, 20;
    --muted: #7FB3CC;
    --locked: #052236;
    --accent: #4FD8FF;
    --accent-dark: #1D93B8;
    --accent-light: #A0ECFF;
    --teal: #7FE3FF;
    --teal-dark: #3D9EC4;
    --teal-light: #C9F5FF;
    --success: #6FF0D0;
    --error: #FF6F91;
    --gold: #DDEFFF;
    --purple: #6FA8FF;
    --accent-rgb: 79, 216, 255;
    --teal-rgb: 127, 227, 255;
    --purple-rgb: 111, 168, 255;
    --success-rgb: 111, 240, 208;
}

body.theme-picker--galaxy {
    --bg: #08041A;
    --bg2: #130A2E;
    --fg: #EDE8FF;
    --overlay-rgb: 237, 232, 255;
    --navshell-rgb: 8, 4, 26;
    --muted: #9C8FC9;
    --locked: #1B1038;
    --accent: #8A5CFF;
    --accent-dark: #5A2FCC;
    --accent-light: #B79CFF;
    --teal: #5CE1FF;
    --teal-dark: #2E9FCC;
    --teal-light: #A0F0FF;
    --success: #6BFFC4;
    --error: #FF6BAE;
    --gold: #FFD86B;
    --purple: #B26CFF;
    --accent-rgb: 138, 92, 255;
    --teal-rgb: 92, 225, 255;
    --purple-rgb: 178, 108, 255;
    --success-rgb: 107, 255, 196;
}

body.theme-picker--feruza {
    --bg: #001515;
    --bg2: #012626;
    --fg: #E0FFFC;
    --overlay-rgb: 224, 255, 252;
    --navshell-rgb: 0, 21, 21;
    --muted: #6FC9BC;
    --locked: #013333;
    --accent: #00FFC2;
    --accent-dark: #00B389;
    --accent-light: #7FFFE0;
    --teal: #00D9FF;
    --teal-dark: #0099B8;
    --teal-light: #7FEFFF;
    --success: #4DFFB8;
    --error: #FF5C7A;
    --gold: #FFE066;
    --purple: #26FFDB;
    --accent-rgb: 0, 255, 194;
    --teal-rgb: 0, 217, 255;
    --purple-rgb: 38, 255, 219;
    --success-rgb: 77, 255, 184;
}

body.theme-picker--vulqon {
    --bg: #0D0300;
    --bg2: #1F0800;
    --fg: #FFEDE0;
    --overlay-rgb: 255, 237, 224;
    --navshell-rgb: 13, 3, 0;
    --muted: #CC8A6B;
    --locked: #331100;
    --accent: #FF4500;
    --accent-dark: #B82F00;
    --accent-light: #FF8C5C;
    --teal: #FF7A1A;
    --teal-dark: #CC5500;
    --teal-light: #FFB380;
    --success: #FFAE42;
    --error: #FF1A1A;
    --gold: #FFD23D;
    --purple: #FF6B35;
    --accent-rgb: 255, 69, 0;
    --teal-rgb: 255, 122, 26;
    --purple-rgb: 255, 107, 53;
    --success-rgb: 255, 174, 66;
}

* {
    transition: background-color .45s ease, border-color .45s ease, color .35s ease;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.16), transparent 38%),
        radial-gradient(circle at 80% 15%, rgba(var(--teal-rgb), 0.15), transparent 36%),
        radial-gradient(circle at 30% 85%, rgba(var(--purple-rgb), 0.14), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(var(--success-rgb), 0.08), transparent 35%);
    filter: blur(40px);
    animation: auroraDrift 48s ease-in-out infinite alternate;
    transition: background 1.2s ease, opacity .5s ease;
    will-change: transform;
}

body::after {
    content: "";
    position: fixed;
    inset: -15%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 65% 35%, rgba(var(--teal-rgb), 0.10), transparent 42%),
        radial-gradient(circle at 15% 70%, rgba(var(--accent-rgb), 0.09), transparent 40%);
    filter: blur(60px);
    animation: auroraDriftAlt 64s ease-in-out infinite alternate;
    transition: background 1.2s ease, opacity .5s ease;
    will-change: transform;
    opacity: .8;
}

@keyframes auroraDrift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-2%, 3%) scale(1.08);
    }

    100% {
        transform: translate(3%, -2%) scale(1.03);
    }
}

@keyframes auroraDriftAlt {
    0% {
        transform: translate(0, 0) scale(1.05);
    }

    50% {
        transform: translate(3%, -3%) scale(1);
    }

    100% {
        transform: translate(-3%, 2%) scale(1.1);
    }
}

@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        animation: none;
    }

    /* App-wide consideration (master spec PART 8 §25): shorten every
       animation/transition to near-instant rather than disabling them
       outright (some communicate state, e.g. a completed checkmark —
       removing them entirely would remove information, not just motion). */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body.theme-picker--light::before {
    opacity: .55;
}

body.theme-picker--light::after {
    opacity: .4;
}

.navshell,
.journey-board,
.play-lab,
.typing-lab,
.listening-lab,
.modal__overlay {
    position: relative;
    z-index: 1;
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

input,
textarea {
    font-size: 16px;
}

h1,
h2,
h3,
.display {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

button {
    font-family: inherit;
}


/* Har bir rang mavzusi uchun body'ning o'z fon gradienti (orqa fon)
   ham o'zgarishi uchun. Bu FAQAT app.html'da qo'llanadi (sayt/landing
   endi butunlay ALOHIDA fayl bo'lgani uchun bu yerda hech qanday
   :not(.site-landing) chegarasi kerak emas — u umuman mavjud emas). */
body.theme-picker--cyberpunk {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 0, 229, 0.16), transparent 70%),
        linear-gradient(180deg, #05010F 0%, #0D0221 52%, #05010F 100%) !important;
}
body.theme-picker--anime {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 61, 154, 0.16), transparent 70%),
        linear-gradient(180deg, #150826 0%, #210E3B 52%, #150826 100%) !important;
}
body.theme-picker--gold {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(232, 184, 75, 0.16), transparent 70%),
        linear-gradient(180deg, #120D04 0%, #1E1608 52%, #120D04 100%) !important;
}
body.theme-picker--matrix {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(0, 255, 65, 0.16), transparent 70%),
        linear-gradient(180deg, #000500 0%, #001A05 52%, #000500 100%) !important;
}
body.theme-picker--sakura {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 111, 181, 0.16), transparent 70%),
        linear-gradient(180deg, #1B0E17 0%, #2A1522 52%, #1B0E17 100%) !important;
}
body.theme-picker--ocean {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(0, 180, 255, 0.16), transparent 70%),
        linear-gradient(180deg, #010B14 0%, #03192B 52%, #010B14 100%) !important;
}
body.theme-picker--sunset {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 92, 51, 0.16), transparent 70%),
        linear-gradient(180deg, #1A0700 0%, #2E0F02 52%, #1A0700 100%) !important;
}
body.theme-picker--royal {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(176, 38, 255, 0.16), transparent 70%),
        linear-gradient(180deg, #0A0518 0%, #160B2E 52%, #0A0518 100%) !important;
}
body.theme-picker--crimson {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 30, 60, 0.16), transparent 70%),
        linear-gradient(180deg, #0D0000 0%, #210404 52%, #0D0000 100%) !important;
}
body.theme-picker--emerald {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(0, 230, 138, 0.16), transparent 70%),
        linear-gradient(180deg, #00120A 0%, #012415 52%, #00120A 100%) !important;
}
body.theme-picker--arctic {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(79, 216, 255, 0.16), transparent 70%),
        linear-gradient(180deg, #010A14 0%, #031C2E 52%, #010A14 100%) !important;
}
body.theme-picker--galaxy {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(138, 92, 255, 0.16), transparent 70%),
        linear-gradient(180deg, #08041A 0%, #130A2E 52%, #08041A 100%) !important;
}
body.theme-picker--feruza {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(0, 255, 194, 0.16), transparent 70%),
        linear-gradient(180deg, #001515 0%, #012626 52%, #001515 100%) !important;
}
body.theme-picker--vulqon {
    background:
        radial-gradient(900px 500px at 50% -140px, rgba(255, 69, 0, 0.16), transparent 70%),
        linear-gradient(180deg, #0D0300 0%, #1F0800 52%, #0D0300 100%) !important;
}


/* ---------- Umumiy fon (avvalgi final-ui-polish.css dan) ---------- */
html{scroll-behavior:smooth}
body:not(.theme-picker--light){
  background:
    radial-gradient(900px 500px at 8% -5%,rgba(91,80,255,.11),transparent 65%),
    radial-gradient(760px 460px at 100% 0%,rgba(31,214,238,.08),transparent 62%),
    linear-gradient(180deg,#060a12 0%,#080d18 50%,#060a12 100%);
}
/* ---------- LIGHT MODE: kontrastni saqlash (avvalgi final-ui-polish.css dan) ---------- */
.theme-picker--light body,.theme-picker--light{color-scheme:light}
.theme-picker--light .home-hero{background:linear-gradient(145deg,#ffffff,#f3f6fc)!important;border-color:rgba(40,57,91,.12)!important}
.theme-picker--light .home-hero h2{color:#172033!important}
.theme-picker--light .home-hero__copy>p{color:#53617b!important}
.theme-picker--light .play-tile,.theme-picker--light .typing-course__course-card,.theme-picker--light .typing-course__stage-card,.theme-picker--light .essential__card,.theme-picker--light .page__row,.theme-picker--light .dictionary__entry,.theme-picker--light .dictionary__card,.theme-picker--light .store__card{background:#fff!important;border-color:rgba(34,51,84,.12)!important;color:#172033!important}
.theme-picker--light .play-tile__content h3,.theme-picker--light .play-tile__content strong{color:#172033!important}

/* ---------- Global fon (avvalgi ultimate-polish.css dan) ---------- */
body{background:
  radial-gradient(circle at 8% 8%,rgba(0,229,255,.055),transparent 25%),
  radial-gradient(circle at 92% 18%,rgba(176,38,255,.07),transparent 28%),
  linear-gradient(180deg,#070b14 0%,#0a1020 54%,#080c16 100%);}
.learning-stage{max-width:1180px!important;padding-top:22px!important;padding-bottom:90px!important;}
/* ---------- LIGHT THEME (avvalgi ultimate-polish.css dan) ---------- */
body.theme-picker--light{background:linear-gradient(180deg,#f7f9fd,#eef2f8)!important;}.theme-picker--light .home-hero--premium{background:linear-gradient(125deg,#fff,#f3f6fc 65%,#f7f1fb)!important;border-color:rgba(42,65,105,.12)!important;box-shadow:0 25px 65px rgba(48,65,96,.12)!important;}.theme-picker--light .home-hero--premium h2{color:#172033!important;}.theme-picker--light .home-hero--premium .home-hero__copy>p{color:#58657d!important;}.theme-picker--light .home-hero__visual--dashboard{background:rgba(255,255,255,.75)!important;border-color:rgba(42,65,105,.12)!important;}.theme-picker--light .hero-progress-orb__core{background:linear-gradient(145deg,#fff,#eef3fb);}.theme-picker--light .hero-float{background:rgba(255,255,255,.88)!important;border-color:rgba(42,65,105,.12)!important;}.theme-picker--light .hero-float b,.theme-picker--light .hero-panel__goal strong{color:#172033!important;}.theme-picker--light .modal__card,.theme-picker--light .auth__card{background:linear-gradient(145deg,#fff,#f3f6fb)!important;}.theme-picker--light .date-picker__field,.theme-picker--light .menu__item,.theme-picker--light .theme-picker__row,.theme-picker--light .language-picker__picker-card,.theme-picker--light .voice-picker__persona-btn,.theme-picker--light .diff__btn,.theme-picker--light .duration-chip,.theme-picker--light .tc-stage-card,.theme-picker--light .tc-level-btn,.theme-picker--light .ze-step-btn{background:linear-gradient(145deg,#fff,#f3f6fb)!important;color:#172033!important;}.theme-picker--light .dob-value,.theme-picker--light .auth__title,.theme-picker--light .language-picker__picker-name,.theme-picker--light .voice-picker__persona-label{color:#172033!important;}

/* ---------- LIGHT MODE KONTRAST TUZATISHLARI (avvalgi ultimate-quality-fix.css dan) ----------
   Eski komponentlar bo'ylab kontrastni tiklash uchun. */
body.theme-picker--light{color:#162033;background:#f5f7fb!important}
body.theme-picker--light :where(.page,.modal__card,.auth__card,.dictionary__hub,.games__hub,.translator__pane,.zero-english__card,.typing-course__card){color:#162033}
body.theme-picker--light :where(h1,h2,h3,h4,strong,.modal__title,.modal__eyebrow,.menu__item-label,.account__name,.auth__title,.auth__qr strong){color:#162033!important}
/* MUHIM: yuqoridagi keng qamrovli qoida BARCHA h3'larni qora rangga
   o'zgartiradi — lekin ".unit__banner h3" (masalan "1-lager: Poydevor"
   kabi bosqich sarlavhasi) doim rangdor, qorong'i fonda qoladi (kunduzgi
   rejimda ham fon o'zgarmaydi) — shuning uchun uning matni ham oq bo'lib
   qolishi kerak, aks holda matn qorong'i fonda deyarli ko'rinmas bo'lardi. */
body.theme-picker--light .unit__banner h3 { color: #fff !important; }
body.theme-picker--light :where(p,small,.account__note,.auth__sub,.auth__field-label,.account__email,.menu__item-badge,.theme-picker__row-label){color:#5d6b82!important}
body.theme-picker--light :where(input,textarea,select){color:#162033!important;background:#fff!important;border-color:#cfd8e6!important}
body.theme-picker--light :where(.menu__item,.theme-picker__row,.voice-picker__persona-btn,.auth__qr){background:rgba(255,255,255,.88)!important;border-color:#d9e1ec!important}
body.theme-picker--light :where(.modal__card.dark__modal){background:linear-gradient(145deg,#fff,#f2f5f9)!important;color:#162033!important}