/* ============================================================
 * theme.css — MEDLEARN.UZ Yagona Dizayn Tokenlari va Qorong'u Rejim (v3)
 *   - Yorug' rejim (Light): Yumshoq tibbiy qog'oz (#F4F1EB) va oq kartalar (#FFFFFF)
 *   - Qorong'u rejim (Dark): Chuqur tibbiy tun (#0D1424), aniq kartalar (#152238)
 *     va yuqori kontrastli o'qilishi oson matnlar (#FFFFFF / #CBD5E1).
 *   - Kitob o'qish sahifasida "Sepiya" (data-mode="sepia") yoqilganda sepiya ustuvor qoladi.
 * ============================================================ */

:where(:root) {
  --paper: #F4F1EB;
  --bg: #F4F1EB;
  --bg-page: #F4F1EB;
  --read: #F7F3EA;
  --cream2: #FAF8F5;
  --card: #FFFFFF;
  --card-bg: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8F6F0;
  --header-bg: rgba(244, 241, 235, 0.94);
  --tabbar-bg: rgba(255, 255, 255, 0.96);

  --ink: #16233F;
  --ink-2: #1B2A4A;
  --ink2: #26324D;
  --slate: #56617A;
  --muted: #56617A;
  --soft: #5A5266;
  --slate-light: #8E99AF;
  --faint: #8A93A6;

  --line: #E6E2D9;
  --line-2: #EFECE6;
  --line-light: #EFECE6;
  --line2: #D8D2C5;

  --azure: #2F6DB0;
  --accent: #2F6DB0;
  --blue: #2F6DB0;
  --azure-soft: #E8F0F8;
  --accent-soft: #E8F0F8;
  --blue-soft: #E8F0F8;

  --eosin: #D63A6A;
  --danger: #D63A6A;
  --pink: #D63A6A;
  --rose: #E11D48;
  --eosin-soft: #FBE9EF;
  --danger-soft: #FCE6E6;
  --rose-soft: #FFE4E6;
  --err: #B3261E;
  --err-soft: #FBE6E3;

  --ok: #1E7A57;
  --green: #1E7A57;
  --emerald: #10B981;
  --teal: #0D9488;
  --sage: #0D8275;
  --ok-soft: #E7F4EE;
  --green-soft: #E7F4EE;
  --emerald-soft: #ECFDF5;
  --teal-soft: #E6F6F4;
  --sage-soft: #E6F5F3;

  --gold: #E0A93B;
  --gold-soft: #FBF1DC;
  --warn: #C77A1B;
  --warn-soft: #FBF1DC;

  --violet: #6B4CA0;
  --purple: #6B4CA0;
  --violet-soft: #EFEAF7;
  --wash: #EFEAF7;

  --shadow: 0 1px 2px rgba(22, 35, 63, 0.05), 0 10px 26px rgba(22, 35, 63, 0.07);
  --shadow-sm: 0 1px 3px rgba(19, 34, 56, 0.05);
  --shadow-md: 0 8px 24px rgba(19, 34, 56, 0.07);
  --shadow-lg: 0 20px 60px rgba(22, 35, 63, 0.2);
}

/* ============================================================
 * 🌙 QORONG'U REJIM (CHUQUR TIBBIY TUN — YUQORI KONTRASTLI)
 * ============================================================ */
html.dark:not([data-mode="sepia"]),
html.dark:not([data-mode="sepia"]) body,
html.dark:not([data-mode="sepia"]) .app,
html.dark:not([data-mode="sepia"]) .preq-scrim,
html.dark:not([data-mode="sepia"]) .tf-scrim,
html.dark:not([data-mode="sepia"]) .tf-sheet,
html.dark:not([data-mode="sepia"]) .tf-payscrim,
html.dark:not([data-mode="sepia"]) .tf-toast,
html.dark:not([data-mode="sepia"]) .be-view {
  color-scheme: dark;

  --paper: #0D1424 !important;
  --bg: #0D1424 !important;
  --bg-page: #0D1424 !important;
  --tf-paper: #0D1424 !important;
  --read: #111A2E !important;
  --cream2: #111A2E !important;

  --card: #16233A !important;
  --card-bg: #16233A !important;
  --bg-card: #16233A !important;
  --tf-card: #16233A !important;
  --bg-card-hover: #1E304F !important;
  --header-bg: rgba(13, 20, 36, 0.94) !important;
  --tabbar-bg: rgba(15, 23, 42, 0.96) !important;

  /* Matnlar — maksimal o'qilishi oson kontrast (WCAG AAA) */
  --ink: #FFFFFF !important;
  --tf-ink: #FFFFFF !important;
  --ink-2: #F8FAFC !important;
  --ink2: #E2E8F0 !important;
  --slate: #CBD5E1 !important;
  --tf-slate: #CBD5E1 !important;
  --muted: #CBD5E1 !important;
  --soft: #CBD5E1 !important;
  --slate-light: #94A3B8 !important;
  --faint: #94A3B8 !important;

  --line: rgba(255, 255, 255, 0.13) !important;
  --tf-line: rgba(255, 255, 255, 0.13) !important;
  --line-2: rgba(255, 255, 255, 0.08) !important;
  --line-light: rgba(255, 255, 255, 0.08) !important;
  --line2: rgba(255, 255, 255, 0.18) !important;

  /* Yorqin aksent ranglar (to'q fonda aniq o'qilishi uchun) */
  --azure: #60A5FA !important;
  --tf-azure: #60A5FA !important;
  --accent: #60A5FA !important;
  --blue: #60A5FA !important;
  --azure-soft: rgba(96, 165, 250, 0.18) !important;
  --tf-azure-soft: rgba(96, 165, 250, 0.18) !important;
  --accent-soft: rgba(96, 165, 250, 0.18) !important;
  --blue-soft: rgba(96, 165, 250, 0.18) !important;

  --eosin: #FB7185 !important;
  --tf-eosin: #FB7185 !important;
  --danger: #F87171 !important;
  --pink: #FB7185 !important;
  --rose: #FB7185 !important;
  --eosin-soft: rgba(251, 113, 133, 0.18) !important;
  --danger-soft: rgba(248, 113, 113, 0.18) !important;
  --rose-soft: rgba(251, 113, 133, 0.18) !important;
  --err: #F87171 !important;
  --err-soft: rgba(248, 113, 113, 0.18) !important;

  --ok: #34D399 !important;
  --tf-ok: #34D399 !important;
  --green: #34D399 !important;
  --emerald: #34D399 !important;
  --teal: #2DD4BF !important;
  --sage: #2DD4BF !important;
  --ok-soft: rgba(52, 211, 153, 0.18) !important;
  --green-soft: rgba(52, 211, 153, 0.18) !important;
  --emerald-soft: rgba(52, 211, 153, 0.18) !important;
  --teal-soft: rgba(45, 212, 191, 0.18) !important;
  --sage-soft: rgba(45, 212, 191, 0.18) !important;

  --gold: #FBBF24 !important;
  --tf-gold: #FBBF24 !important;
  --gold-soft: rgba(251, 191, 36, 0.18) !important;
  --warn: #FBBF24 !important;
  --warn-soft: rgba(251, 191, 36, 0.18) !important;

  --violet: #C084FC !important;
  --tf-violet: #C084FC !important;
  --purple: #C084FC !important;
  --violet-soft: rgba(192, 132, 252, 0.18) !important;
  --tf-violet-soft: rgba(192, 132, 252, 0.18) !important;
  --wash: rgba(192, 132, 252, 0.18) !important;

  --btn: #2563EB !important;
  --btn-t: #FFFFFF !important;

  --shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
  --tf-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

/* ============================================================
 * 1. ASOSIY FON, PASTKI TABBAR VA STICKY HEADERLAR
 * ============================================================ */
html.dark:not([data-mode="sepia"]),
html.dark:not([data-mode="sepia"]) body {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
}

/* Pastki Tabbar (tabbar.css keshda bo'lsa ham 100% qorong'u rejimda ishlaydi) */
html.dark:not([data-mode="sepia"]) .tabbar,
html.dark:not([data-mode="sepia"]) #tabbar {
  background: var(--tabbar-bg) !important;
  border-top-color: var(--line) !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5) !important;
}
html.dark:not([data-mode="sepia"]) .tabbar .tbtab {
  color: #94A3B8 !important;
}
html.dark:not([data-mode="sepia"]) .tabbar .tbtab.on {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .tabbar .tbtab.on .ti {
  background: rgba(96, 165, 250, 0.22) !important;
  color: #60A5FA !important;
}

/* Sticky sarlavhalar (Header) va pastki navigatsiya panellari */
html.dark:not([data-mode="sepia"]) header:not(.ph):not(.studio-bar),
html.dark:not([data-mode="sepia"]) .qa-screen .qh,
html.dark:not([data-mode="sepia"]) .vpl-h,
html.dark:not([data-mode="sepia"]) .vpl,
html.dark:not([data-mode="sepia"]) body.tg-fs .player:not(.immersive):not(.reading) .vpl,
html.dark:not([data-mode="sepia"]) .qfoot,
html.dark:not([data-mode="sepia"]) .sm-foot,
html.dark:not([data-mode="sepia"]) .lnav {
  background: var(--header-bg) !important;
  border-color: var(--line) !important;
}

/* ============================================================
 * 2. BOSH SAHIFA (INDEX.HTML) — BENTO GRID, MUSOBAQAXONA VA KARTALAR
 * ============================================================ */
/* Musobaqaxona Hero kartasi */
html.dark:not([data-mode="sepia"]) .mcard.bento-hero {
  background: radial-gradient(180px 120px at 100% 0%, rgba(244, 63, 94, 0.22), transparent 70%),
              linear-gradient(150deg, #1E1B36 0%, #17223B 60%, #152238 100%) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
}
html.dark:not([data-mode="sepia"]) .hero-trophy-icon {
  background: rgba(244, 63, 94, 0.22) !important;
}
html.dark:not([data-mode="sepia"]) .hero-sub-ticker {
  background: rgba(13, 20, 36, 0.78) !important;
  border-color: rgba(251, 113, 133, 0.3) !important;
}
html.dark:not([data-mode="sepia"]) .hero-sub-slide .s-ttl {
  color: #FDA4AF !important;
}
html.dark:not([data-mode="sepia"]) .hero-sub-slide .s-sub {
  color: #F1F5F9 !important;
}
/* 3 ta Musobaqa segment tugmasi (24/7 Kviz, Jonli Duel, Turnirlar) — oq fon o'rniga to'q shaffof karta */
html.dark:not([data-mode="sepia"]) .hero-chip-btn {
  background: rgba(13, 20, 36, 0.82) !important;
  border-color: rgba(251, 113, 133, 0.30) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
html.dark:not([data-mode="sepia"]) .hero-chip-btn:hover {
  background: rgba(30, 48, 79, 0.92) !important;
  border-color: rgba(251, 113, 133, 0.55) !important;
}
html.dark:not([data-mode="sepia"]) .hero-chip-label {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .hero-chip-badge.st-open {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #6EE7B7 !important;
}
html.dark:not([data-mode="sepia"]) .hero-chip-badge.st-soon {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .hero-chip-badge.st-live {
  background: rgba(244, 63, 94, 0.25) !important;
  color: #FDA4AF !important;
}

/* Bento modullar (Videodarslar, Kutubxona, Interaktiv, Test bazasi) — xira oq-kulrang gradient o'rniga toza to'q gradient */
html.dark:not([data-mode="sepia"]) .mcard.sec-blue,
html.dark:not([data-mode="sepia"]) .mcard.acc-blue {
  background: radial-gradient(130px 95px at 100% 0%, rgba(56, 189, 248, 0.20), transparent 70%),
              linear-gradient(160deg, #182B49 0%, #152238 100%) !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
}
html.dark:not([data-mode="sepia"]) .mcard.sec-red,
html.dark:not([data-mode="sepia"]) .mcard.acc-pink:not(.bento-hero) {
  background: radial-gradient(130px 95px at 100% 0%, rgba(251, 113, 133, 0.20), transparent 70%),
              linear-gradient(160deg, #271E38 0%, #152238 100%) !important;
  border-color: rgba(251, 113, 133, 0.30) !important;
}
html.dark:not([data-mode="sepia"]) .mcard.sec-violet,
html.dark:not([data-mode="sepia"]) .mcard.acc-violet {
  background: radial-gradient(130px 95px at 100% 0%, rgba(192, 132, 252, 0.20), transparent 70%),
              linear-gradient(160deg, #211D3B 0%, #152238 100%) !important;
  border-color: rgba(192, 132, 252, 0.30) !important;
}
html.dark:not([data-mode="sepia"]) .mcard.sec-gold,
html.dark:not([data-mode="sepia"]) .mcard.acc-gold {
  background: radial-gradient(130px 95px at 100% 0%, rgba(251, 191, 36, 0.20), transparent 70%),
              linear-gradient(160deg, #27232F 0%, #152238 100%) !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
}
html.dark:not([data-mode="sepia"]) .mcard.acc-green {
  background: radial-gradient(130px 95px at 100% 0%, rgba(45, 212, 191, 0.20), transparent 70%),
              linear-gradient(160deg, #142B38 0%, #152238 100%) !important;
  border-color: rgba(45, 212, 191, 0.30) !important;
}
html.dark:not([data-mode="sepia"]) .bento-tile-body .mt {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .bento-tile-body .ms {
  color: #E2E8F0 !important;
}
html.dark:not([data-mode="sepia"]) .cline {
  color: #CBD5E1 !important;
}
html.dark:not([data-mode="sepia"]) .cline b {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .bento-tile-foot {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark:not([data-mode="sepia"]) .bento-arrow {
  color: #60A5FA !important;
}
html.dark:not([data-mode="sepia"]) .tag-open {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F9 !important;
}
html.dark:not([data-mode="sepia"]) .msect span {
  color: #CBD5E1 !important;
}

/* Bosh sahifa qo'shimcha kartalari (Kanal a'zosi, Upsell, Paketlar, Mashhur) */
html.dark:not([data-mode="sepia"]) .mvip {
  background: var(--card) !important;
  border-color: rgba(34, 158, 217, 0.35) !important;
  border-left: 5px solid #229ED9 !important;
}
html.dark:not([data-mode="sepia"]) .mvip-k {
  color: #38BDF8 !important;
}
html.dark:not([data-mode="sepia"]) .mvip-t,
html.dark:not([data-mode="sepia"]) .mvip-s b {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .mvip-s {
  color: #CBD5E1 !important;
}
html.dark:not([data-mode="sepia"]) .mben-note {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #6EE7B7 !important;
}
html.dark:not([data-mode="sepia"]) .upsell {
  background: linear-gradient(155deg, #172542 0%, #1F1D3D 60%, #262038 100%) !important;
  border-color: var(--line2) !important;
}
html.dark:not([data-mode="sepia"]) .upsell .u-price,
html.dark:not([data-mode="sepia"]) .upsell .u-chip {
  background: rgba(13, 20, 36, 0.7) !important;
  color: #FFFFFF !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .pk-poster,
html.dark:not([data-mode="sepia"]) .pk-banner {
  background: linear-gradient(155deg, #251E38 0%, #1E223D 55%, #17253E 100%) !important;
  border-color: var(--line2) !important;
}
html.dark:not([data-mode="sepia"]) .pk-poster .pp-k {
  color: #FBBF24 !important;
}
html.dark:not([data-mode="sepia"]) .va-cta-wrap::before {
  background: linear-gradient(to bottom, rgba(22, 35, 58, 0), rgba(22, 35, 58, 0.98)) !important;
}
html.dark:not([data-mode="sepia"]) .va-btn-s,
html.dark:not([data-mode="sepia"]) .tf-btn.s {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #CBD5E1 !important;
}
html.dark:not([data-mode="sepia"]) .va-li.off,
html.dark:not([data-mode="sepia"]) .tf-li.off {
  color: #64748B !important;
}
html.dark:not([data-mode="sepia"]) .va-li.off .ck,
html.dark:not([data-mode="sepia"]) .tf-li.off .tf-ck {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #64748B !important;
}
html.dark:not([data-mode="sepia"]) .vthumbh .play {
  background: rgba(13, 20, 36, 0.85) !important;
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .app[data-htheme="a"] .vhero,
html.dark:not([data-mode="sepia"]) .app[data-htheme="c"] .vhero {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .motif-a .grid {
  opacity: 0.08 !important;
}

/* ============================================================
 * 3. KUTUBXONA, VIDEODARSLAR VA NAZARIY DARSLAR
 * ============================================================ */
/* Kitob o'qish (.rd-body) — avval #2D3748 / #2A2620 qotirilgan edi */
html.dark:not([data-mode="sepia"]) body.lib-reader .rd-body,
html.dark:not([data-mode="sepia"]) .rd-body,
html.dark:not([data-mode="sepia"]) .bd-desc,
html.dark:not([data-mode="sepia"]) .pt-sec p,
html.dark:not([data-mode="sepia"]) .rule,
html.dark:not([data-mode="sepia"]) .descr {
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) body.lib-reader header #tocBtn,
html.dark:not([data-mode="sepia"]) .drawer-head {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
/* Videodarslar: body.vid-list #body .vcard da !important bor edi */
html.dark:not([data-mode="sepia"]) body.vid-list #body .vcard,
html.dark:not([data-mode="sepia"]) .vcard {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .vprice,
html.dark:not([data-mode="sepia"]) .vthumb2 .vlkic,
html.dark:not([data-mode="sepia"]) .lk-m-cover .lkbadge,
html.dark:not([data-mode="sepia"]) .ccard .lockov .lk {
  background: rgba(13, 20, 36, 0.88) !important;
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .voffer .u-opt.best,
html.dark:not([data-mode="sepia"]) .nz-pwb .b-top,
html.dark:not([data-mode="sepia"]) .nz-pwb .u-opt.best,
html.dark:not([data-mode="sepia"]) .sm-offer .u-opt.best,
html.dark:not([data-mode="sepia"]) .aoffer .u-opt.best,
html.dark:not([data-mode="sepia"]) .ansnote,
html.dark:not([data-mode="sepia"]) .quizb {
  background: var(--bg-card-hover) !important;
  border-color: var(--line2) !important;
  color: var(--ink) !important;
}

/* ============================================================
 * 4. PROFIL, TEST BAZASI, REYTING VA MUSOBAQAXONA
 * ============================================================ */
html.dark:not([data-mode="sepia"]) .tarif {
  background: linear-gradient(135deg, #27221A 0%, #1A233A 100%) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}
html.dark:not([data-mode="sepia"]) .tarif .trow span:last-child {
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .tarif .tbadge.b0 {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #F1F5F9 !important;
}
html.dark:not([data-mode="sepia"]) .tarif .tbadge.b1 {
  background: rgba(96, 165, 250, 0.22) !important;
  color: #93C5FD !important;
}
html.dark:not([data-mode="sepia"]) .mus-medal-row,
html.dark:not([data-mode="sepia"]) .tb-resume-bar {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.32) !important;
}
html.dark:not([data-mode="sepia"]) .mus-medal-row .mtxt b,
html.dark:not([data-mode="sepia"]) .mus-medal-row .mtxt span,
html.dark:not([data-mode="sepia"]) .tr-tag,
html.dark:not([data-mode="sepia"]) .tr-sub,
html.dark:not([data-mode="sepia"]) .quizb .qopt.ok,
html.dark:not([data-mode="sepia"]) .quizb .qwin .wt,
html.dark:not([data-mode="sepia"]) .quizb .qwin .wt b,
html.dark:not([data-mode="sepia"]) .quizb .qwin .sc,
html.dark:not([data-mode="sepia"]) .dq-item.done .dq-txt,
html.dark:not([data-mode="sepia"]) .dq-xp,
html.dark:not([data-mode="sepia"]) .note {
  color: #6EE7B7 !important;
}
html.dark:not([data-mode="sepia"]) .mist {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), var(--card)) !important;
}
html.dark:not([data-mode="sepia"]) .lobby {
  background: radial-gradient(120% 80% at 50% 0, rgba(244, 63, 94, 0.18), transparent 60%), var(--card) !important;
}
html.dark:not([data-mode="sepia"]) .rrow.top1,
html.dark:not([data-mode="sepia"]) .drow.top1 {
  background: linear-gradient(100deg, rgba(251, 191, 36, 0.18), var(--card) 60%) !important;
}
html.dark:not([data-mode="sepia"]) .rrow.top2,
html.dark:not([data-mode="sepia"]) .drow.top2 {
  background: linear-gradient(100deg, rgba(148, 163, 184, 0.18), var(--card) 60%) !important;
}
html.dark:not([data-mode="sepia"]) .rrow.top3,
html.dark:not([data-mode="sepia"]) .drow.top3 {
  background: linear-gradient(100deg, rgba(249, 115, 22, 0.18), var(--card) 60%) !important;
}
html.dark:not([data-mode="sepia"]) .podium-slot.first .podium-bar,
html.dark:not([data-mode="sepia"]) .badge-p1,
html.dark:not([data-mode="sepia"]) .ha-rank-badge {
  background: rgba(251, 191, 36, 0.2) !important;
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .ha-rank-badge .r-num {
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .podium-slot.second .podium-bar,
html.dark:not([data-mode="sepia"]) .badge-p2 {
  background: rgba(148, 163, 184, 0.2) !important;
  color: #E2E8F0 !important;
}
html.dark:not([data-mode="sepia"]) .podium-slot.third .podium-bar,
html.dark:not([data-mode="sepia"]) .badge-p3 {
  background: rgba(249, 115, 22, 0.2) !important;
  color: #FDBA74 !important;
}

/* ============================================================
 * 5. UMUMIY KARTALAR, TUGMALAR VA RO'YXAT ELEMENTLARI
 * ============================================================ */
/* Ortga, yopish, qidiruv va yordamchi tugmalar */
html.dark:not([data-mode="sepia"]) .back,
html.dark:not([data-mode="sepia"]) .crumb,
html.dark:not([data-mode="sepia"]) .crumb-back,
html.dark:not([data-mode="sepia"]) .vtb-back,
html.dark:not([data-mode="sepia"]) .vtb-brand,
html.dark:not([data-mode="sepia"]) .header-brand-badge,
html.dark:not([data-mode="sepia"]) .toifa-back-btn,
html.dark:not([data-mode="sepia"]) .toc-btn,
html.dark:not([data-mode="sepia"]) #libFoot .arw,
html.dark:not([data-mode="sepia"]) .rd-nav button:not(.primary):not(.rp-btn-unlock):not(.rp-btn-next):not(.nx),
html.dark:not([data-mode="sepia"]) .sm-arrow,
html.dark:not([data-mode="sepia"]) .btn.ghost,
html.dark:not([data-mode="sepia"]) .btn.sec,
html.dark:not([data-mode="sepia"]) .tc-btn.retry,
html.dark:not([data-mode="sepia"]) .btn-cancel,
html.dark:not([data-mode="sepia"]) .btn-attach,
html.dark:not([data-mode="sepia"]) .myq-btn,
html.dark:not([data-mode="sepia"]) .statbtn,
html.dark:not([data-mode="sepia"]) .labtn {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Barcha oq kartalar (#fff berilgan konteynerlar) */
html.dark:not([data-mode="sepia"]) .bento-card,
html.dark:not([data-mode="sepia"]) .tb-bento-hero,
html.dark:not([data-mode="sepia"]) .tb-seg,
html.dark:not([data-mode="sepia"]) .tb-unlock,
html.dark:not([data-mode="sepia"]) .tb-catpay,
html.dark:not([data-mode="sepia"]) .exam-hero,
html.dark:not([data-mode="sepia"]) .cat-lock-h,
html.dark:not([data-mode="sepia"]) .mx-card,
html.dark:not([data-mode="sepia"]) .toifa-dir-card,
html.dark:not([data-mode="sepia"]) .step-pill,
html.dark:not([data-mode="sepia"]) .tinfo-card,
html.dark:not([data-mode="sepia"]) .prize-table,
html.dark:not([data-mode="sepia"]) .main-switcher,
html.dark:not([data-mode="sepia"]) .modal-bx,
html.dark:not([data-mode="sepia"]) .g-modal-box,
html.dark:not([data-mode="sepia"]) .lg-card,
html.dark:not([data-mode="sepia"]) .mben-item,
html.dark:not([data-mode="sepia"]) .rd-paywall,
html.dark:not([data-mode="sepia"]) .rd-pay-teaser,
html.dark:not([data-mode="sepia"]) .rd-paywall .rp-btn-toc,
html.dark:not([data-mode="sepia"]) .searchbar,
html.dark:not([data-mode="sepia"]) .qitem,
html.dark:not([data-mode="sepia"]) .cap,
html.dark:not([data-mode="sepia"]) .hero-card-a,
html.dark:not([data-mode="sepia"]) .pmodal-box,
html.dark:not([data-mode="sepia"]) .cd-card,
html.dark:not([data-mode="sepia"]) .cd-ring .in,
html.dark:not([data-mode="sepia"]) .dl-ring .in,
html.dark:not([data-mode="sepia"]) .mx-ring i,
html.dark:not([data-mode="sepia"]) .mist .ic,
html.dark:not([data-mode="sepia"]) .crow-mr i,
html.dark:not([data-mode="sepia"]) .quizb .qopt:not(.ok):not(.no),
html.dark:not([data-mode="sepia"]) .rc-nextlock,
html.dark:not([data-mode="sepia"]) .endcard .ec-next,
html.dark:not([data-mode="sepia"]) .endcard .ec-replay.big,
html.dark:not([data-mode="sepia"]) .mine .st-row,
html.dark:not([data-mode="sepia"]) .dq-item:not(.done) .dq-check,
html.dark:not([data-mode="sepia"]) .badge-item.on,
html.dark:not([data-mode="sepia"]) .qa-file,
html.dark:not([data-mode="sepia"]) .qatt-file,
html.dark:not([data-mode="sepia"]) .qlockhint,
html.dark:not([data-mode="sepia"]) .lpod.p1,
html.dark:not([data-mode="sepia"]) .st-pod.p1,
html.dark:not([data-mode="sepia"]) .dpod.p1,
html.dark:not([data-mode="sepia"]) .dwin,
html.dark:not([data-mode="sepia"]) .empty-mus-card,
html.dark:not([data-mode="sepia"]) .podium-wrap,
html.dark:not([data-mode="sepia"]) .podium-badge,
html.dark:not([data-mode="sepia"]) .resulthero,
html.dark:not([data-mode="sepia"]) .revcard .rn,
html.dark:not([data-mode="sepia"]) .reels-frame,
html.dark:not([data-mode="sepia"]) .lesson-iframe {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Ikkilamchi fonli bloklar (--paper) */
html.dark:not([data-mode="sepia"]) .sub-steps-panel,
html.dark:not([data-mode="sepia"]) .tdc-row,
html.dark:not([data-mode="sepia"]) .mx-excard,
html.dark:not([data-mode="sepia"]) .mx-seq,
html.dark:not([data-mode="sepia"]) .mx-step-row,
html.dark:not([data-mode="sepia"]) .mx-topic-card,
html.dark:not([data-mode="sepia"]) .mx-main-tabs,
html.dark:not([data-mode="sepia"]) .hero-metric-pill,
html.dark:not([data-mode="sepia"]) .eh-stat,
html.dark:not([data-mode="sepia"]) .cat-lock-h .chl b,
html.dark:not([data-mode="sepia"]) .tcc.locked,
html.dark:not([data-mode="sepia"]) .tcc-go,
html.dark:not([data-mode="sepia"]) .crow.locked,
html.dark:not([data-mode="sepia"]) .cmb-progress,
html.dark:not([data-mode="sepia"]) .ha-stat-box,
html.dark:not([data-mode="sepia"]) .ha-foot,
html.dark:not([data-mode="sepia"]) .main-tabs,
html.dark:not([data-mode="sepia"]) .leader-filter-strip,
html.dark:not([data-mode="sepia"]) .dsubtabs,
html.dark:not([data-mode="sepia"]) .pseg,
html.dark:not([data-mode="sepia"]) .tnode.locked,
html.dark:not([data-mode="sepia"]) .nz-topic.locked .tcard,
html.dark:not([data-mode="sepia"]) .nz-sublock,
html.dark:not([data-mode="sepia"]) .ncc.locked,
html.dark:not([data-mode="sepia"]) .pnode.locked .pcard,
html.dark:not([data-mode="sepia"]) .finish .fin-stats,
html.dark:not([data-mode="sepia"]) .finish .fin-locked,
html.dark:not([data-mode="sepia"]) .finish .fin-test.locked,
html.dark:not([data-mode="sepia"]) .finish .fin-gate.free,
html.dark:not([data-mode="sepia"]) .sm-toc,
html.dark:not([data-mode="sepia"]) .sm-toc-i.locked .n,
html.dark:not([data-mode="sepia"]) .cmp-cell .cbox,
html.dark:not([data-mode="sepia"]) .ig-imgbox,
html.dark:not([data-mode="sepia"]) .qimg-wrap,
html.dark:not([data-mode="sepia"]) .g-modal-close,
html.dark:not([data-mode="sepia"]) .vrow2.is-active,
html.dark:not([data-mode="sepia"]) .tile,
html.dark:not([data-mode="sepia"]) .hs-play,
html.dark:not([data-mode="sepia"]) .mimg,
html.dark:not([data-mode="sepia"]) .qimg,
html.dark:not([data-mode="sepia"]) .opt .othumb,
html.dark:not([data-mode="sepia"]) .optg,
html.dark:not([data-mode="sepia"]) .p-img,
html.dark:not([data-mode="sepia"]) .p-audio,
html.dark:not([data-mode="sepia"]) .p-aud,
html.dark:not([data-mode="sepia"]) .cover,
html.dark:not([data-mode="sepia"]) .cover.book,
html.dark:not([data-mode="sepia"]) .rev-badge.n {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Inline style'larda #fff / #ffffff / #FAF8F5 / #FAF9F6 / #F8FAFC qotirilgan elementlar uchun avtomatik himoya */
html.dark:not([data-mode="sepia"]) [style*="background:#ffffff"],
html.dark:not([data-mode="sepia"]) [style*="background: #ffffff"],
html.dark:not([data-mode="sepia"]) [style*="background:#FFFFFF"],
html.dark:not([data-mode="sepia"]) [style*="background: #FFFFFF"],
html.dark:not([data-mode="sepia"]) [style*="background:#fff;"],
html.dark:not([data-mode="sepia"]) [style*="background: #fff;"],
html.dark:not([data-mode="sepia"]) [style$="background:#fff"],
html.dark:not([data-mode="sepia"]) [style$="background: #fff"] {
  background: var(--card) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) [style*="background:#FAF8F5"],
html.dark:not([data-mode="sepia"]) [style*="background:#FAF9F6"],
html.dark:not([data-mode="sepia"]) [style*="background:#F8FAFC"],
html.dark:not([data-mode="sepia"]) [style*="background:#F8F7F4"],
html.dark:not([data-mode="sepia"]) [style*="background:#F1F5F9"],
html.dark:not([data-mode="sepia"]) [style*="background:#f8fafc"],
html.dark:not([data-mode="sepia"]) [style*="background:#f1f5f9"],
html.dark:not([data-mode="sepia"]) [style*="background:#f7f9fc"],
html.dark:not([data-mode="sepia"]) [style*="background:#EAE6DF"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Background:var(--ink) bo'lgan tugmalar uchun qorong'u rejimda matn rangi xavfsizligi */
html.dark:not([data-mode="sepia"]) [style*="background:var(--ink)"],
html.dark:not([data-mode="sepia"]) [style*="background: var(--ink)"] {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Kutubxona hero va davom etilayotgan kitob banneri */
html.dark:not([data-mode="sepia"]) .cont {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .cont .lbl {
  background: rgba(30, 122, 87, 0.25) !important;
  color: #34D399 !important;
}
html.dark:not([data-mode="sepia"]) .cont .lbl .dot {
  background: #34D399 !important;
}
html.dark:not([data-mode="sepia"]) .cont .pbar {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Testbaza va Profil sahifalari komponentlari */
html.dark:not([data-mode="sepia"]) .tb-bento-hero {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .tb-seg {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .badge-item.on {
  background: var(--card) !important;
}
html.dark:not([data-mode="sepia"]) .sic[style*="#FEF3C7"],
html.dark:not([data-mode="sepia"]) [style*="background:#FEF3C7;color:#D97706"] {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #FDE68A !important;
}

/* Test va Interaktiv javob variantlari (.opt, .t-opt, .mlbl, .seqrow) */
html.dark:not([data-mode="sepia"]) .opt:not(.ok):not(.bad):not(.sel):not(.on),
html.dark:not([data-mode="sepia"]) .t-opt:not(.ok):not(.bad):not(.sel):not(.on),
html.dark:not([data-mode="sepia"]) .mlbl:not(.ok):not(.bad):not(.sel):not(.on),
html.dark:not([data-mode="sepia"]) .seqrow:not(.ok):not(.bad):not(.sel):not(.on),
html.dark:not([data-mode="sepia"]) .optg .cap {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .opt .mk,
html.dark:not([data-mode="sepia"]) .t-opt .mk,
html.dark:not([data-mode="sepia"]) .timer {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Tablar, chiplar va segment tugmalar */
html.dark:not([data-mode="sepia"]) .tab:not(.on),
html.dark:not([data-mode="sepia"]) .chip:not(.on) {
  background: var(--card) !important;
  color: var(--slate) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .main-tabs button.on,
html.dark:not([data-mode="sepia"]) .mx-main-tab.on,
html.dark:not([data-mode="sepia"]) .pseg button.on,
html.dark:not([data-mode="sepia"]) .dsubtab.on,
html.dark:not([data-mode="sepia"]) .filter-btn.active,
html.dark:not([data-mode="sepia"]) .sm-ctl button.on,
html.dark:not([data-mode="sepia"]) .sm-seg button.on,
html.dark:not([data-mode="sepia"]) body.lib-reader header .rmini .rmi.on {
  background: var(--bg-card-hover) !important;
  color: var(--ink) !important;
}

/* Hover holatlari */
html.dark:not([data-mode="sepia"]) .mx-step-row:hover,
html.dark:not([data-mode="sepia"]) .mx-topic-card:hover,
html.dark:not([data-mode="sepia"]) .mx-topic-card.has-sub.expanded,
html.dark:not([data-mode="sepia"]) .mx-excard:hover,
html.dark:not([data-mode="sepia"]) .sm-toc-i:hover,
html.dark:not([data-mode="sepia"]) header .back:hover,
html.dark:not([data-mode="sepia"]) .gown .gh:hover,
html.dark:not([data-mode="sepia"]) .gitem:hover,
html.dark:not([data-mode="sepia"]) .acc .ah:hover,
html.dark:not([data-mode="sepia"]) .setrow:hover,
html.dark:not([data-mode="sepia"]) .info-row:hover,
html.dark:not([data-mode="sepia"]) .vtb-back:hover,
html.dark:not([data-mode="sepia"]) .btn.ghost:hover,
html.dark:not([data-mode="sepia"]) .opt:not(.ok):not(.bad):hover,
html.dark:not([data-mode="sepia"]) .t-opt:not(.ok):not(.bad):hover {
  background: var(--bg-card-hover) !important;
}

/* Input, Textarea, Select */
html.dark:not([data-mode="sepia"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark:not([data-mode="sepia"]) textarea,
html.dark:not([data-mode="sepia"]) select {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .searchbar input {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Jadval sarlavhalari, Toast xabarlar, Flip-karta va Audio tugmalar (avval background: var(--ink); color: #fff bo'lganlar) */
html.dark:not([data-mode="sepia"]) table.bt th,
html.dark:not([data-mode="sepia"]) .be-view table.bt th,
html.dark:not([data-mode="sepia"]) .be-view .flip-front,
html.dark:not([data-mode="sepia"]) .be-view .ab-play,
html.dark:not([data-mode="sepia"]) .be-view .ba-handle,
html.dark:not([data-mode="sepia"]) .ba-handle,
html.dark:not([data-mode="sepia"]) .seqrow .pos,
html.dark:not([data-mode="sepia"]) .mtnum,
html.dark:not([data-mode="sepia"]) .snum,
html.dark:not([data-mode="sepia"]) .pv-num,
html.dark:not([data-mode="sepia"]) .nfs > b,
html.dark:not([data-mode="sepia"]) .toast,
html.dark:not([data-mode="sepia"]) .nztoast,
html.dark:not([data-mode="sepia"]) .ptoast,
html.dark:not([data-mode="sepia"]) .side {
  background: #1E3A5F !important;
  color: #FFFFFF !important;
}

/* Faol tablar, chiplar va asosiy harakat tugmalari (background: var(--ink); color: #fff bo'lganlar) */
html.dark:not([data-mode="sepia"]) .chip.on,
html.dark:not([data-mode="sepia"]) .chip.active,
html.dark:not([data-mode="sepia"]) .tab.on,
html.dark:not([data-mode="sepia"]) .ms-tab.on,
html.dark:not([data-mode="sepia"]) .seg button.on,
html.dark:not([data-mode="sepia"]) .tb-seg button.on,
html.dark:not([data-mode="sepia"]) .subtab.on,
html.dark:not([data-mode="sepia"]) .vtab.on,
html.dark:not([data-mode="sepia"]) .libtab.on,
html.dark:not([data-mode="sepia"]) .navsub button.on,
html.dark:not([data-mode="sepia"]) .modeseg button.on,
html.dark:not([data-mode="sepia"]) .simopt.on,
html.dark:not([data-mode="sepia"]) .ochip.on,
html.dark:not([data-mode="sepia"]) .cat-chip.active,
html.dark:not([data-mode="sepia"]) .wmp.on,
html.dark:not([data-mode="sepia"]) .nav a.active,
html.dark:not([data-mode="sepia"]) .drawer .di.cur,
html.dark:not([data-mode="sepia"]) .btn-read:not(.lock),
html.dark:not([data-mode="sepia"]) .btn-start,
html.dark:not([data-mode="sepia"]) .redo,
html.dark:not([data-mode="sepia"]) .pbtn.dark,
html.dark:not([data-mode="sepia"]) .g-modal-btn,
html.dark:not([data-mode="sepia"]) .lockcard .lkbtn,
html.dark:not([data-mode="sepia"]) .rd-nav button.nx,
html.dark:not([data-mode="sepia"]) .preq .pp-apply,
html.dark:not([data-mode="sepia"]) .preq .pp-sug .sbtn,
html.dark:not([data-mode="sepia"]) [style*="background:var(--ink)"] {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #3B82F6 !important;
}

/* ============================================================
 * 6. JADVALLAR, BLOKLAR (.be-view) VA TO'LOV OYNASI (pay.css)
 * ============================================================ */
html.dark:not([data-mode="sepia"]) .be-view .callout p {
  color: var(--ink2) !important;
}
html.dark:not([data-mode="sepia"]) .be-view div.bt mark,
html.dark:not([data-mode="sepia"]) div.bt mark {
  background: rgba(251, 191, 36, 0.25) !important;
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .be-view div.bt code,
html.dark:not([data-mode="sepia"]) div.bt code {
  background: var(--paper) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .be-view table.bt,
html.dark:not([data-mode="sepia"]) .be-view .tblbox table.bt td:first-child {
  background: var(--card) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .be-view table.bt tr:nth-child(even) td,
html.dark:not([data-mode="sepia"]) .be-view .tblbox table.bt tr:nth-child(even) td:first-child {
  background: var(--paper) !important;
}
html.dark:not([data-mode="sepia"]) .be-view .tbl-fade.r {
  background: linear-gradient(270deg, var(--card), transparent) !important;
}
html.dark:not([data-mode="sepia"]) .be-view .tbl-fade.l {
  background: linear-gradient(90deg, var(--card), transparent) !important;
}
html.dark:not([data-mode="sepia"]) .be-view .vp-cap {
  background: var(--card) !important;
  color: var(--slate) !important;
}

/* To'lov oynasi (pay.css) va Barchasini ochish (.vbuyall) */
html.dark:not([data-mode="sepia"]) .preq .popt.payme-opt,
html.dark:not([data-mode="sepia"]) .preq .popt.admin-opt,
html.dark:not([data-mode="sepia"]) .preq .phero,
html.dark:not([data-mode="sepia"]) .preq .phero.plain,
html.dark:not([data-mode="sepia"]) .preq .ppromo.is-applied,
html.dark:not([data-mode="sepia"]) .preq .p-open-notice,
html.dark:not([data-mode="sepia"]) .vopen-all,
html.dark:not([data-mode="sepia"]) .vbuyall,
html.dark:not([data-mode="sepia"]) .demohint {
  background: var(--bg-card-hover) !important;
  border-color: var(--line2) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .vbuyall .stat-pill,
html.dark:not([data-mode="sepia"]) .vbuyall .banner-action,
html.dark:not([data-mode="sepia"]) .preq .pp-code-tag,
html.dark:not([data-mode="sepia"]) .preq .pp-remove-btn,
html.dark:not([data-mode="sepia"]) .preq .pp-once {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .vbuyall .banner-title,
html.dark:not([data-mode="sepia"]) .vbuyall .t,
html.dark:not([data-mode="sepia"]) .vbuyall .ownl b,
html.dark:not([data-mode="sepia"]) .pay-users b {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .vbuyall .banner-desc,
html.dark:not([data-mode="sepia"]) .vbuyall .s,
html.dark:not([data-mode="sepia"]) .vbuyall .row .per,
html.dark:not([data-mode="sepia"]) .vbuyall .banner-action .cur-p small {
  color: var(--slate) !important;
}
html.dark:not([data-mode="sepia"]) .vbuyall .rule-notice {
  background: rgba(251, 191, 36, 0.16) !important;
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .vbuyall .rule-notice b {
  color: #FFFFFF !important;
}
html.dark:not([data-mode="sepia"]) .preq .ptimer-box {
  background: rgba(242, 92, 138, 0.16) !important;
  border-color: rgba(242, 92, 138, 0.32) !important;
}
html.dark:not([data-mode="sepia"]) .preq .ptimer-txt {
  color: #FDA4AF !important;
}
html.dark:not([data-mode="sepia"]) .preq .ptimer-clock {
  background: var(--card) !important;
  color: #FB7185 !important;
}
html.dark:not([data-mode="sepia"]) .preq .plive p,
html.dark:not([data-mode="sepia"]) .preq .plive p b,
html.dark:not([data-mode="sepia"]) .preq .phero.plain .hl,
html.dark:not([data-mode="sepia"]) .preq .phero.plain .new,
html.dark:not([data-mode="sepia"]) .preq .phero.plain .cur,
html.dark:not([data-mode="sepia"]) .preq .p-open-notice b,
html.dark:not([data-mode="sepia"]) .preq .pp-applied-title {
  color: var(--ok) !important;
}

/* ============================================================
 * 7. STATUS CHIPLARI VA OLTIN/KULRANG BELGILAR
 * ============================================================ */
/* Oltin/Qahrabo rangli narx va qulf teglari (avval #8a6516 / #92400E bo'lgan barcha matnlar) */
html.dark:not([data-mode="sepia"]) .tag-prem,
html.dark:not([data-mode="sepia"]) .mcard.mus-soon .mtag,
html.dark:not([data-mode="sepia"]) .ms.ms-soon,
html.dark:not([data-mode="sepia"]) .pk-compact .pc-tag,
html.dark:not([data-mode="sepia"]) .va-li .ck.ck-na,
html.dark:not([data-mode="sepia"]) .tf-li .tf-ck.tf-ck-na,
html.dark:not([data-mode="sepia"]) .rd-paywall .rp-badge,
html.dark:not([data-mode="sepia"]) .rd-pay-teaser .rp-ti-tag,
html.dark:not([data-mode="sepia"]) .bt-tag.lock,
html.dark:not([data-mode="sepia"]) .btn-read.lock,
html.dark:not([data-mode="sepia"]) .vtag.price,
html.dark:not([data-mode="sepia"]) .voffer .oc-ic,
html.dark:not([data-mode="sepia"]) .voffer .u-opt .price,
html.dark:not([data-mode="sepia"]) .vchip.files,
html.dark:not([data-mode="sepia"]) .vtag.files,
html.dark:not([data-mode="sepia"]) .lk-m-tag,
html.dark:not([data-mode="sepia"]) .resume-bar .rt,
html.dark:not([data-mode="sepia"]) .tcc-tag.paid,
html.dark:not([data-mode="sepia"]) .tc-btn.lock,
html.dark:not([data-mode="sepia"]) .lbadge,
html.dark:not([data-mode="sepia"]) .crow-pc,
html.dark:not([data-mode="sepia"]) .nz-tag.paid,
html.dark:not([data-mode="sepia"]) .nz-tag.lock,
html.dark:not([data-mode="sepia"]) .nz-pwb .b-ic,
html.dark:not([data-mode="sepia"]) .nz-pwb .u-opt .price,
html.dark:not([data-mode="sepia"]) .quizb .qht,
html.dark:not([data-mode="sepia"]) .labtn.has,
html.dark:not([data-mode="sepia"]) .lockcard .lksoon,
html.dark:not([data-mode="sepia"]) .aoffer .u-opt .price,
html.dark:not([data-mode="sepia"]) .uiprice .uinew,
html.dark:not([data-mode="sepia"]) .uiprice .uicur,
html.dark:not([data-mode="sepia"]) .demohint .t {
  color: #FDE68A !important;
}

/* Progress chiziqlari va neytral bo'linmalar */
html.dark:not([data-mode="sepia"]) .mx-bar,
html.dark:not([data-mode="sepia"]) .tcc-bar,
html.dark:not([data-mode="sepia"]) .cmb-prog-bar,
html.dark:not([data-mode="sepia"]) .progress,
html.dark:not([data-mode="sepia"]) .pmodal-close,
html.dark:not([data-mode="sepia"]) .g-modal-bar,
html.dark:not([data-mode="sepia"]) .ft.no .ic,
html.dark:not([data-mode="sepia"]) .mx-seq .tk.todo,
html.dark:not([data-mode="sepia"]) .mx-step-row.is-next .mx-step-num,
html.dark:not([data-mode="sepia"]) .mist.off a {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--slate) !important;
}

/* Skeleton yuklagichlar */
html.dark:not([data-mode="sepia"]) .skel,
html.dark:not([data-mode="sepia"]) .qshim {
  background: linear-gradient(90deg, #16233A, #203354, #16233A) !important;
  background-size: 200% 100% !important;
}

/* Status chiplari: Yashil / Ko'k / Oltin / Qizil / Binafsha */
html.dark:not([data-mode="sepia"]) .step-pill.is-done,
html.dark:not([data-mode="sepia"]) .step-pill.is-done .sp-num,
html.dark:not([data-mode="sepia"]) .qopt.correct,
html.dark:not([data-mode="sepia"]) .qp-score,
html.dark:not([data-mode="sepia"]) .qcard .qc-tag,
html.dark:not([data-mode="sepia"]) .dq-item.done,
html.dark:not([data-mode="sepia"]) .dq-badge,
html.dark:not([data-mode="sepia"]) .rprize,
html.dark:not([data-mode="sepia"]) .rule-icon,
html.dark:not([data-mode="sepia"]) .ptype.audio,
html.dark:not([data-mode="sepia"]) .paid-tag,
html.dark:not([data-mode="sepia"]) .score-toast,
html.dark:not([data-mode="sepia"]) .mlive2.v-kviz {
  background: var(--ok-soft) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  color: #6EE7B7 !important;
}

html.dark:not([data-mode="sepia"]) .step-pill.is-good,
html.dark:not([data-mode="sepia"]) .step-pill.is-current,
html.dark:not([data-mode="sepia"]) .step-pill.is-good .sp-num,
html.dark:not([data-mode="sepia"]) .mx-excard.full .mx-excard-tag,
html.dark:not([data-mode="sepia"]) .ha-stat-box.highlight,
html.dark:not([data-mode="sepia"]) .my-rank-banner,
html.dark:not([data-mode="sepia"]) .hero-badge,
html.dark:not([data-mode="sepia"]) .cd-lbl,
html.dark:not([data-mode="sepia"]) .ptype.video,
html.dark:not([data-mode="sepia"]) .pay-users {
  background: var(--azure-soft) !important;
  border-color: rgba(96, 165, 250, 0.35) !important;
  color: #93C5FD !important;
}

html.dark:not([data-mode="sepia"]) .step-pill.is-mid,
html.dark:not([data-mode="sepia"]) .step-pill.is-mid .sp-num,
html.dark:not([data-mode="sepia"]) .mx-excard.fast .mx-excard-tag,
html.dark:not([data-mode="sepia"]) .mix-notice,
html.dark:not([data-mode="sepia"]) .qp-timer:not(.danger),
html.dark:not([data-mode="sepia"]) .mx-tag-stages,
html.dark:not([data-mode="sepia"]) .prizebtn,
html.dark:not([data-mode="sepia"]) .p-hero .pill,
html.dark:not([data-mode="sepia"]) .payrow.pending,
html.dark:not([data-mode="sepia"]) .st-row.me,
html.dark:not([data-mode="sepia"]) .g-modal-icon.fire,
html.dark:not([data-mode="sepia"]) .g-modal-icon.xp,
html.dark:not([data-mode="sepia"]) .g-modal-rule.fire,
html.dark:not([data-mode="sepia"]) .g-modal-rule.xp,
html.dark:not([data-mode="sepia"]) .finish .fin-gate.wait,
html.dark:not([data-mode="sepia"]) .mlive2.v-soon,
html.dark:not([data-mode="sepia"]) .mlive2.v-duel,
html.dark:not([data-mode="sepia"]) .pay-stock {
  background: var(--gold-soft) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: #FDE68A !important;
}

html.dark:not([data-mode="sepia"]) .step-pill.is-fail,
html.dark:not([data-mode="sepia"]) .step-pill.is-fail .sp-num,
html.dark:not([data-mode="sepia"]) .qopt.wrong,
html.dark:not([data-mode="sepia"]) .qp-timer.danger,
html.dark:not([data-mode="sepia"]) .mx-mistake-strip,
html.dark:not([data-mode="sepia"]) .quizb .qopt.no,
html.dark:not([data-mode="sepia"]) .tmr.warn,
html.dark:not([data-mode="sepia"]) .t-timer.warn,
html.dark:not([data-mode="sepia"]) .rvopt.rvbad,
html.dark:not([data-mode="sepia"]) .hero-live-pill,
html.dark:not([data-mode="sepia"]) .ptype.image,
html.dark:not([data-mode="sepia"]) .bt-tag.buy.disc,
html.dark:not([data-mode="sepia"]) .mlive2.v-turnir,
html.dark:not([data-mode="sepia"]) .pay-section {
  background: var(--eosin-soft) !important;
  border-color: rgba(251, 113, 133, 0.35) !important;
  color: #FDA4AF !important;
}

html.dark:not([data-mode="sepia"]) .u-opt.best-opt,
html.dark:not([data-mode="sepia"]) .drow.me,
html.dark:not([data-mode="sepia"]) .dbtn-full,
html.dark:not([data-mode="sepia"]) .dchip,
html.dark:not([data-mode="sepia"]) .bt-tag.sub,
html.dark:not([data-mode="sepia"]) .st-plus {
  background: var(--violet-soft) !important;
  border-color: rgba(192, 132, 252, 0.35) !important;
  color: #D8B4FE !important;
}

/* ============================================================
 * 8. ADMIN PANEL VA ICHKI MODUL BOSHQARUVCHILARI (*_admin.html)
 * ============================================================ */
/* Asosiy layout, dashboard va konteynerlar */
html.dark:not([data-mode="sepia"]) .shell,
html.dark:not([data-mode="sepia"]) .layout,
html.dark:not([data-mode="sepia"]) .content,
html.dark:not([data-mode="sepia"]) .main,
html.dark:not([data-mode="sepia"]) .wrap {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Topbar, Panellar, Kartochkalar va Bloklar */
html.dark:not([data-mode="sepia"]) .topbar,
html.dark:not([data-mode="sepia"]) .panel,
html.dark:not([data-mode="sepia"]) .scard,
html.dark:not([data-mode="sepia"]) .gcard,
html.dark:not([data-mode="sepia"]) .arow,
html.dark:not([data-mode="sepia"]) .dk-card,
html.dark:not([data-mode="sepia"]) .dk-sec,
html.dark:not([data-mode="sepia"]) .opanel,
html.dark:not([data-mode="sepia"]) .soon,
html.dark:not([data-mode="sepia"]) .gate,
html.dark:not([data-mode="sepia"]) .qitem,
html.dark:not([data-mode="sepia"]) .blk,
html.dark:not([data-mode="sepia"]) .hcard,
html.dark:not([data-mode="sepia"]) .kpi,
html.dark:not([data-mode="sepia"]) .sbox,
html.dark:not([data-mode="sepia"]) .pres,
html.dark:not([data-mode="sepia"]) .seat,
html.dark:not([data-mode="sepia"]) .post,
html.dark:not([data-mode="sepia"]) .sh-item-card,
html.dark:not([data-mode="sepia"]) .sh-demo-box,
html.dark:not([data-mode="sepia"]) .catrow {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Panel sarlavhalari, kichik sarlavhalar va matnlar */
html.dark:not([data-mode="sepia"]) .panel .ph,
html.dark:not([data-mode="sepia"]) .hd h1,
html.dark:not([data-mode="sepia"]) .topbar .pt,
html.dark:not([data-mode="sepia"]) .aname,
html.dark:not([data-mode="sepia"]) .dk-nm,
html.dark:not([data-mode="sepia"]) .dk-sz,
html.dark:not([data-mode="sepia"]) .dk-path,
html.dark:not([data-mode="sepia"]) .gn,
html.dark:not([data-mode="sepia"]) .mn,
html.dark:not([data-mode="sepia"]) .ott,
html.dark:not([data-mode="sepia"]) .oamt,
html.dark:not([data-mode="sepia"]) .psec-h,
html.dark:not([data-mode="sepia"]) .scard .v {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

html.dark:not([data-mode="sepia"]) .panel .ph .note,
html.dark:not([data-mode="sepia"]) .hd .sub,
html.dark:not([data-mode="sepia"]) .topbar .pt small,
html.dark:not([data-mode="sepia"]) .ameta,
html.dark:not([data-mode="sepia"]) .gm,
html.dark:not([data-mode="sepia"]) .mm,
html.dark:not([data-mode="sepia"]) .osub,
html.dark:not([data-mode="sepia"]) .otime,
html.dark:not([data-mode="sepia"]) .omut,
html.dark:not([data-mode="sepia"]) .scard .k,
html.dark:not([data-mode="sepia"]) .dk-card .l,
html.dark:not([data-mode="sepia"]) .dk-sec .hint,
html.dark:not([data-mode="sepia"]) .dk-foot,
html.dark:not([data-mode="sepia"]) .mut,
html.dark:not([data-mode="sepia"]) label,
html.dark:not([data-mode="sepia"]) .pfld .lbl {
  color: var(--slate) !important;
}

/* Topbar qidiruv va tugmalari */
html.dark:not([data-mode="sepia"]) .topbar .burger,
html.dark:not([data-mode="sepia"]) .topbar .search,
html.dark:not([data-mode="sepia"]) .topbar .tbtn,
html.dark:not([data-mode="sepia"]) .crumb-back {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .topbar .search input {
  color: var(--ink) !important;
  background: transparent !important;
}

/* Jadvallar (Tables) — foydalanuvchilar, statistikalar, buyurtmalar */
html.dark:not([data-mode="sepia"]) table,
html.dark:not([data-mode="sepia"]) th,
html.dark:not([data-mode="sepia"]) td,
html.dark:not([data-mode="sepia"]) .matrix th,
html.dark:not([data-mode="sepia"]) .matrix td,
html.dark:not([data-mode="sepia"]) .dk-row,
html.dark:not([data-mode="sepia"]) .orow,
html.dark:not([data-mode="sepia"]) .grow,
html.dark:not([data-mode="sepia"]) .mrow {
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) th,
html.dark:not([data-mode="sepia"]) .matrix th {
  color: var(--slate) !important;
  background: transparent !important;
}
html.dark:not([data-mode="sepia"]) tr:hover td,
html.dark:not([data-mode="sepia"]) .orow:hover,
html.dark:not([data-mode="sepia"]) .arow:hover,
html.dark:not([data-mode="sepia"]) .vrow:hover,
html.dark:not([data-mode="sepia"]) .irow:hover {
  background: var(--bg-card-hover) !important;
}

/* Form elementlari: Input, Select, Textarea */
html.dark:not([data-mode="sepia"]) input:not([type="checkbox"]):not([type="radio"]),
html.dark:not([data-mode="sepia"]) select,
html.dark:not([data-mode="sepia"]) textarea,
html.dark:not([data-mode="sepia"]) .qta,
html.dark:not([data-mode="sepia"]) .pfld input,
html.dark:not([data-mode="sepia"]) .pfld select,
html.dark:not([data-mode="sepia"]) .mb input,
html.dark:not([data-mode="sepia"]) .mb select,
html.dark:not([data-mode="sepia"]) .mb textarea,
html.dark:not([data-mode="sepia"]) .toolbar input,
html.dark:not([data-mode="sepia"]) .toolbar select {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) input::placeholder,
html.dark:not([data-mode="sepia"]) textarea::placeholder {
  color: var(--faint, #94A3B8) !important;
}

/* Savollar va Suhbatlar (Q&A Chat) — Eng muhim o'qilmay qolgan qism */
html.dark:not([data-mode="sepia"]) .qthread,
html.dark:not([data-mode="sepia"]) .qthread.pending {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .qt-head {
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .qt-head:hover,
html.dark:not([data-mode="sepia"]) .qthread.open .qt-head {
  background: var(--bg-card-hover) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .qt-nm {
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .qt-prev,
html.dark:not([data-mode="sepia"]) .qt-sub,
html.dark:not([data-mode="sepia"]) .qt-time {
  color: var(--slate) !important;
}
html.dark:not([data-mode="sepia"]) .qmc {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .qmc-top {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .qmc-scroll {
  background: var(--paper) !important;
}
html.dark:not([data-mode="sepia"]) .qm-q {
  background: #1E2D4A !important;
  color: #FFFFFF !important;
  border: 1px solid var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .qm-a {
  background: rgba(30, 122, 87, 0.22) !important;
  color: #ECFDF5 !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
}
html.dark:not([data-mode="sepia"]) .qans {
  background: rgba(30, 122, 87, 0.22) !important;
  color: #ECFDF5 !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
}
html.dark:not([data-mode="sepia"]) .qtext {
  color: var(--ink) !important;
}

/* Modallar va Scrim oynalari */
html.dark:not([data-mode="sepia"]) .modal,
html.dark:not([data-mode="sepia"]) .qfv-ov .qfv-card,
html.dark:not([data-mode="sepia"]) .hd-box {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .modal .mh,
html.dark:not([data-mode="sepia"]) .qfv-ov .qfv-h {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .modal .mb {
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .modal .mf {
  background: var(--card) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .aib,
html.dark:not([data-mode="sepia"]) .qmc-x,
html.dark:not([data-mode="sepia"]) .qfv-ov .qfv-x,
html.dark:not([data-mode="sepia"]) .modal-x {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Tugmalar va Chiplar */
html.dark:not([data-mode="sepia"]) .btn.ghost {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .btn-action {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .btn-action.manage {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}
html.dark:not([data-mode="sepia"]) .zb,
html.dark:not([data-mode="sepia"]) .vchip,
html.dark:not([data-mode="sepia"]) .ochip {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark:not([data-mode="sepia"]) .ochip.on,
html.dark:not([data-mode="sepia"]) .vchip.on {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* Sozlamalar, paketlar va narxlar */
html.dark:not([data-mode="sepia"]) .port-sec,
html.dark:not([data-mode="sepia"]) .price-row,
html.dark:not([data-mode="sepia"]) .uni-note,
html.dark:not([data-mode="sepia"]) .savebar,
html.dark:not([data-mode="sepia"]) .pkg-collapse-body {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .pkg-chip-item,
html.dark:not([data-mode="sepia"]) .pkg-chip-head,
html.dark:not([data-mode="sepia"]) .b-item,
html.dark:not([data-mode="sepia"]) .item-pill,
html.dark:not([data-mode="sepia"]) .cap,
html.dark:not([data-mode="sepia"]) .grow,
html.dark:not([data-mode="sepia"]) .mrow,
html.dark:not([data-mode="sepia"]) .uni-row {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark:not([data-mode="sepia"]) .item-pill .title-left,
html.dark:not([data-mode="sepia"]) .pkg-left {
  color: var(--ink) !important;
}

/* Oltin va qahrabo belgilar */
html.dark:not([data-mode="sepia"]) .kpi-tag.gold,
html.dark:not([data-mode="sepia"]) .pkg-badge-pill,
html.dark:not([data-mode="sepia"]) .offchip,
html.dark:not([data-mode="sepia"]) .cap-hidbadge,
html.dark:not([data-mode="sepia"]) .obadge.new,
html.dark:not([data-mode="sepia"]) .zt,
html.dark:not([data-mode="sepia"]) .dk-card.warn .n {
  color: #FDE68A !important;
}
html.dark:not([data-mode="sepia"]) .dk-card.warn {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark:not([data-mode="sepia"]) .dk-bar,
html.dark:not([data-mode="sepia"]) .dk-q .bar {
  background: rgba(255, 255, 255, 0.12) !important;
}
html.dark:not([data-mode="sepia"]) .dk-keep {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--slate) !important;
}

/* ============================================================
 * UNIVERSAL INLINE STYLE OVERRIDES (To'q matnlar va oq fonlar himoyasi)
 * ============================================================ */
/* 1. Qorong'u fonda ko'rinmay qoladigan barcha to'q matnlar */
html.dark:not([data-mode="sepia"]) [style*="color:#16233F"],
html.dark:not([data-mode="sepia"]) [style*="color: #16233F"],
html.dark:not([data-mode="sepia"]) [style*="color:#16233f"],
html.dark:not([data-mode="sepia"]) [style*="color: #16233f"],
html.dark:not([data-mode="sepia"]) [style*="color:#0f172a"],
html.dark:not([data-mode="sepia"]) [style*="color: #0f172a"],
html.dark:not([data-mode="sepia"]) [style*="color:#1e293b"],
html.dark:not([data-mode="sepia"]) [style*="color: #1e293b"],
html.dark:not([data-mode="sepia"]) [style*="color:#334155"],
html.dark:not([data-mode="sepia"]) [style*="color: #334155"],
html.dark:not([data-mode="sepia"]) [style*="color:#3A4256"],
html.dark:not([data-mode="sepia"]) [style*="color: #3A4256"],
html.dark:not([data-mode="sepia"]) [style*="color:#2b3a55"],
html.dark:not([data-mode="sepia"]) [style*="color: #2b3a55"],
html.dark:not([data-mode="sepia"]) [style*="color:#000000"],
html.dark:not([data-mode="sepia"]) [style*="color: #000000"],
html.dark:not([data-mode="sepia"]) [style*="color:#000;"],
html.dark:not([data-mode="sepia"]) [style*="color: #000;"],
html.dark:not([data-mode="sepia"]) [style*="color:#111"],
html.dark:not([data-mode="sepia"]) [style*="color:#222"],
html.dark:not([data-mode="sepia"]) [style*="color:#333"] {
  color: var(--ink) !important;
}

/* 2. O'rtacha to'q kulrang matnlar */
html.dark:not([data-mode="sepia"]) [style*="color:#56617A"],
html.dark:not([data-mode="sepia"]) [style*="color: #56617A"],
html.dark:not([data-mode="sepia"]) [style*="color:#475569"],
html.dark:not([data-mode="sepia"]) [style*="color: #475569"] {
  color: var(--slate) !important;
}

/* 3. Och fonli qotirilgan bloklar */
html.dark:not([data-mode="sepia"]) [style*="background:#F4F1EB"],
html.dark:not([data-mode="sepia"]) [style*="background: #F4F1EB"],
html.dark:not([data-mode="sepia"]) [style*="background:#F1F6FB"],
html.dark:not([data-mode="sepia"]) [style*="background: #F1F6FB"],
html.dark:not([data-mode="sepia"]) [style*="background:#FBFAF7"],
html.dark:not([data-mode="sepia"]) [style*="background: #FBFAF7"],
html.dark:not([data-mode="sepia"]) [style*="background:#FAF8F4"],
html.dark:not([data-mode="sepia"]) [style*="background: #FAF8F4"],
html.dark:not([data-mode="sepia"]) [style*="background:#FFFDF9"],
html.dark:not([data-mode="sepia"]) [style*="background: #FFFDF9"],
html.dark:not([data-mode="sepia"]) [style*="background:#FFFCF5"],
html.dark:not([data-mode="sepia"]) [style*="background: #FFFCF5"] {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* ============================================================
 * 9. 🎨 MAVZU TANLAGICH (THEME SWITCHER UI — Profil va Header uchun)
 * ============================================================ */
.ml-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}
.ml-theme-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ml-theme-lbl .si {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--azure-soft);
  color: var(--azure);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.ml-theme-seg {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
}
.ml-theme-seg button {
  border: 0;
  background: transparent;
  color: var(--slate);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.ml-theme-seg button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.ml-theme-quick {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, background 0.15s ease;
}
.ml-theme-quick:active {
  transform: scale(0.92);
}

/* Admin panelda "Qorong'u rejim (Tema)" funksiyasi O'CHIRILGAN bo'lsa (standart holat) — barcha tema tugmalarini yashiramiz */
html:not(.ml-theme-enabled) .ml-theme-quick,
html:not(.ml-theme-enabled) .ml-theme-row {
  display: none !important;
}