/* ---------- 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
}