/* ===== Platforma dizaynlari (admin → «Umumiy sozlamalar» → Dizayn) =====
   main  — asosiy: to'q ko'k (tokens.css dagi ranglar, bu faylda o'zgartirilmaydi)
   dark  — qorong'u: neytral grafit (deyarli qora), urg'u — logotipdagi moviy
   light — yorqin: oq va och kulrang-ko'k fon, to'q matn, urg'u — logotipning to'q moviy-yashili
   Mavzu <html data-theme="..."> orqali tanlanadi (app.js → applyTheme). Kirish sahifasi (tungi yo'l) hamma mavzuda bir xil. */

/* ---------- Qorong'u ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0e1013;
  --c-surface: #17191d;
  --c-surface-2: #1f2227;
  --c-surface-3: #282c32;
  --c-text: #ececee;
  --c-text-muted: #9ba1aa;
  --c-border: #2a2e35;
  --c-border-strong: #393e46;
  --c-primary: #3cc4dc;
  --c-primary-strong: #72d6e8;
  --c-primary-soft: #13303a;
  --c-btn: #138ea8;
  --c-btn-hover: #19a3bf;
  --c-overlay: rgba(0, 0, 0, 0.74);
  --c-card: rgba(23, 25, 29, 0.95);
  --grad-hero: linear-gradient(135deg, #1d2025 0%, #1a2b32 55%, #0c5f72 100%);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 16px 40px rgba(0, 0, 0, 0.55);
  --wm-opacity: 0.035;
}
[data-theme="dark"] .input::placeholder { color: #727985; }
[data-theme="dark"] .toast { background: #ececee; color: #0e1013; }
[data-theme="dark"] .pc-band { background: linear-gradient(100deg, #1c1f24 0%, #19292f 60%, #0f4f60 100%); }
[data-theme="dark"] .qz-question { border-color: #2a4650; background: linear-gradient(135deg, #1a2a30 0%, #15181c 100%); }
[data-theme="dark"] .qz-num { background: linear-gradient(180deg, #19262b 0%, #121518 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 0 0 3px var(--c-bg); }
[data-theme="dark"] .qz-media { background: #0a0b0d; }
[data-theme="dark"] .qz-media.empty { background: radial-gradient(circle at 50% 38%, #1a2c32 0%, #0e1013 72%); }

/* ---------- Yorqin ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #eef2f5;
  --c-surface: #ffffff;
  --c-surface-2: #f3f6f9;
  --c-surface-3: #e5ebf0;
  --c-text: #1c2733;
  --c-text-muted: #5a6876;
  --c-border: #dbe3ea;
  --c-border-strong: #c4cfd9;
  --c-primary: #0b7189;
  --c-primary-strong: #085a6e;
  --c-primary-text: #ffffff;
  --c-primary-soft: #e0f1f5;
  --c-btn: #0b7f98;
  --c-btn-hover: #096b81;
  --c-accent: #0fa6c0;
  --c-brand-cyan: #0a8ea6;
  --c-success: #15874f;
  --c-success-soft: #e0f3e9;
  --c-danger: #c93c3c;
  --c-danger-soft: #fbe9e9;
  --c-warning: #a3670c;
  --c-warning-soft: #fcf1dc;
  --c-focus: #0b7189;
  --c-overlay: rgba(16, 28, 40, 0.48);
  --c-card: rgba(255, 255, 255, 0.96);
  --shadow-1: 0 1px 2px rgba(20, 40, 60, 0.06), 0 4px 14px rgba(20, 60, 80, 0.06);
  --shadow-2: 0 14px 34px rgba(20, 40, 60, 0.18);
  --shadow-hero: 0 14px 32px rgba(20, 50, 70, 0.22);
  --wm-opacity: 0.05;
}
[data-theme="light"] .btn-primary { box-shadow: 0 4px 12px rgba(11, 113, 137, 0.22); }
[data-theme="light"] .input::placeholder { color: #8a97a4; }
[data-theme="light"] .input:focus { box-shadow: 0 0 0 3px rgba(11, 113, 137, 0.15); }
[data-theme="light"] .toast { background: #1c2733; color: #ffffff; }
[data-theme="light"] .noimg { background: rgba(0, 0, 0, .04); }

/* Bosh sahifa: raqamlar va bo'lim sarlavhalari */
[data-theme="light"] .kpi-val b { color: var(--c-text); }
[data-theme="light"] .kpi-bar { background: rgba(20, 40, 60, .08); }
[data-theme="light"] .kpi-label { color: color-mix(in srgb, var(--k) 55%, var(--c-text)); }
[data-theme="light"] .pc-band { background: linear-gradient(100deg, #0f4d64 0%, #0b6a82 60%, #0d8ca6 100%); border-color: transparent; box-shadow: 0 8px 20px -12px rgba(11, 90, 110, 0.55); }
[data-theme="light"] .pc-band-text p { color: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .pc-tile { border-color: color-mix(in srgb, var(--t) 30%, var(--c-border)); box-shadow: var(--shadow-1); }
[data-theme="light"] .pc-tile.tone-violet { --t: #7a63e0; }
[data-theme="light"] .pc-tile.tone-blue { --t: #3f74e0; }

/* Test oynasi */
[data-theme="light"] .qz-question { border-color: #bcdde7; background: linear-gradient(135deg, #e4f3f7 0%, #f8fbfc 100%); }
[data-theme="light"] .qz-qmeta { color: #3a7d90; }
[data-theme="light"] .qz-qtext { color: #1c2733; }
[data-theme="light"] .qz-num { border-color: rgba(11, 113, 137, .35); background: #ffffff; color: #2f7488; box-shadow: 0 2px 6px rgba(20, 60, 80, .12), 0 0 0 3px var(--c-bg); }
[data-theme="light"] .qz-num b { color: #0b5d70; }
[data-theme="light"] .qz-num i { color: rgba(47, 116, 136, .6); }
[data-theme="light"] .qz-save { border-color: var(--c-border-strong); background: #ffffff; color: #4f8798; }
[data-theme="light"] .qz-save:hover { color: var(--c-primary); }
[data-theme="light"] .qz-media { background: #e8edf1; }
[data-theme="light"] .qz-media.empty { background: radial-gradient(circle at 50% 38%, #dcf0f5 0%, #eef2f5 72%); }
[data-theme="light"] .qz-brand img { filter: drop-shadow(0 8px 18px rgba(20, 60, 80, .25)); }
[data-theme="light"] .qz-brand b { color: #1c2733; }
[data-theme="light"] .qz-brand small { color: #0b7189; }
[data-theme="light"] .qz-ans { background: #ffffff; }
[data-theme="light"] .qz-ans:hover:not(:disabled) { background: var(--c-primary-soft); }
[data-theme="light"] .qz-ans.right { background: #e2f5ea; color: #0f4d2f; }
[data-theme="light"] .qz-ans.wrong { background: #fbe6e6; color: #7a1c1c; }
[data-theme="light"] .qz-key { background: var(--c-surface-2); }

/* Darajalar va boshqa kartochkalar */
[data-theme="light"] .when-wish, [data-theme="light"] .when-box .when-wish { color: #a3670c; }

/* Pastki menyu (telefon) va chap menyu (keng ekran) */
[data-theme="light"] .tabbar { background: #ffffff; box-shadow: 0 -4px 18px rgba(20, 40, 60, 0.08); }
[data-theme="dark"] .tabbar { background: #131518; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); }
@media (min-width: 1024px) {
  [data-theme="light"] .tabbar { box-shadow: 4px 0 18px rgba(20, 40, 60, 0.07); }
  [data-theme="dark"] .tabbar { box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5); }
}

/* Darajalar: sakkizburchak kartochka och fonda — yozuvlar to'q, daraja rangida */
[data-theme="light"] .lv-card h2 { color: color-mix(in srgb, var(--b) 75%, #10202b); }
[data-theme="light"] .lv-card p { color: color-mix(in srgb, var(--b) 85%, #10202b); }