/* ===========================================================
   Rang palitrasi. Yorug' va qorong'i tema faqat shu
   o'zgaruvchilarni almashtiradi — qolgan hamma joy o'zgarmaydi.
   =========================================================== */
:root {
  color-scheme: light;
  --bg:       #f1f5f9;
  --surface:  #ffffff;
  --surface2: #e9eef5;
  --surface3: #dde5ee;
  --fg:       #0f172a;
  --muted:    #64748b;
  --faint:    #94a3b8;
  --line:     #dbe3ec;
  --brand:    #0ea5e9;
  --brand-600:#0284c7;
  --accent:   #0891b2;
  --shadow:   0 1px 2px rgba(15,23,42,.06), 0 8px 24px -16px rgba(15,23,42,.25);
}

html.dark {
  color-scheme: dark;
  --bg:       #070b14;
  --surface:  #0f1726;
  --surface2: #162033;
  --surface3: #1e2a41;
  --fg:       #e8eef7;
  --muted:    #94a3b8;
  --faint:    #64748b;
  --line:     rgba(255,255,255,.08);
  --brand:    #0ea5e9;
  --brand-600:#0284c7;
  --accent:   #22d3ee;
  --shadow:   0 8px 30px -16px rgba(0,0,0,.7);
}

body { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.scroll-hidden::-webkit-scrollbar { width: 0; height: 0; }
.scroll-hidden { scrollbar-width: none; }

/* Kartalarga yengil soya (yorug' temada ajralib turishi uchun) */
.bg-surface { box-shadow: none; }
html:not(.dark) .bg-surface { box-shadow: var(--shadow); }

/* ---------- Yon menyu ---------- */
.nav-item {
  display: block; padding: .65rem .85rem; border-radius: .75rem;
  color: var(--muted); font-weight: 600; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface2); color: var(--fg); }
.nav-active { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }

/* ---------- Segment tugmalari ---------- */
.seg { display: block; cursor: pointer; }
.seg > span {
  display: grid; place-items: center; padding: .8rem .5rem;
  border-radius: .85rem; background: var(--surface); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 700; color: var(--muted);
  transition: all .15s; text-align: center; min-height: 3rem;
}
.seg:hover > span { border-color: var(--brand); color: var(--fg); }
.seg > input:checked + span {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-color: var(--brand); color: var(--brand);
}

/* ---------- Kalit (toggle) ---------- */
input.switch {
  appearance: none; width: 3.25rem; height: 1.75rem; border-radius: 999px;
  background: var(--surface3); position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0;
}
input.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--faint);
  transition: transform .2s, background .2s;
}
input.switch:checked { background: color-mix(in srgb, var(--brand) 35%, transparent); }
input.switch:checked::after { transform: translateX(1.5rem); background: var(--brand); }

/* ---------- Javob variantlari ---------- */
.option-btn { transition: border-color .15s, background .15s, transform .08s; }
.option-btn:active { transform: scale(.995); }
.option-correct {
  border-color: #10b981 !important;
  background: color-mix(in srgb, #10b981 14%, var(--surface)) !important;
}
.option-wrong {
  border-color: #f43f5e !important;
  background: color-mix(in srgb, #f43f5e 14%, var(--surface)) !important;
}
.option-picked { border-color: var(--brand) !important; }

/* ---------- Forma elementlari ---------- */
input[type="text"], input[type="tel"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"],
select, textarea {
  color: var(--fg);
}
select option { background: var(--surface); color: var(--fg); }
input::placeholder, textarea::placeholder { color: var(--faint); }

.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Planshet va telefon ---------- */
@media (max-width: 640px) {
  .seg > span { min-height: 2.75rem; font-size: .75rem; padding: .6rem .35rem; }
}

/* ---------- Orqa fondagi logotip ---------- */
.has-logo-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--logo-bg);
  background-repeat: no-repeat;
  background-position: center 45%;
  background-size: min(70vw, 620px);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
html.dark .has-logo-bg::before { opacity: .35; }
.has-logo-bg > * { position: relative; z-index: 1; }

/* Chop etishda fon kerak emas */
@media print { .has-logo-bg::before { display: none; } }

/* ---------- Savol raqamlari paneli ----------
   Ranglar CSS'da aniq belgilangan: Tailwind CDN dinamik qo'shilgan
   sinflarni har doim ham generatsiya qilmaydi, shuning uchun raqamlar
   yashil/qizil bo'lmay qolardi. */
.strip-btn {
  width: 2rem; height: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
@media (min-width: 640px) {
  .strip-btn { width: 2.25rem; height: 2.25rem; font-size: .875rem; }
}
.strip-btn:hover { border-color: var(--brand); }

.strip-correct {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
}
.strip-wrong {
  background: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #fff !important;
}
.strip-answered {
  background: var(--surface3) !important;
  border-color: var(--line) !important;
  color: var(--fg) !important;
}
.strip-current {
  outline: 3px solid var(--brand);
  outline-offset: 1px;
  transform: scale(1.08);
}
/* Javob berilmagan, lekin hozir ochiq turgan savol */
.strip-current:not(.strip-correct):not(.strip-wrong):not(.strip-answered) {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}