/* ═══════════════════════════════════
   MAKROIQTISODIYOT QUIZ — style.css
   ═══════════════════════════════════ */
:root {
  --bg:#0d1117; --bg2:#161b22; --bg3:#21262d; --card:#1c2129;
  --border:#30363d;
  --primary:#3b82f6; --primary-dim:rgba(59,130,246,.13);
  --green:#22c55e;   --green-dim:rgba(34,197,94,.13);
  --red:#ef4444;     --red-dim:rgba(239,68,68,.12);
  --yellow:#f59e0b;  --teal:#14b8a6;
  --text:#e6edf3; --text2:#8b949e; --text3:#484f58;
  --radius:14px; --r2:10px; --r3:8px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:68px;
}
[data-theme="light"] {
  --bg:#f1f5f9; --bg2:#fff; --bg3:#e2e8f0; --card:#fff;
  --border:#cbd5e1; --text:#0f172a; --text2:#475569; --text3:#94a3b8;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; line-height:1.6;
}
button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ── HEADER ── */
.hdr {
  position:sticky; top:0; z-index:100;
  background:var(--bg2); border-bottom:1px solid var(--border);
  height:52px; padding:0 16px;
  display:flex; align-items:center; gap:10px;
}
.hdr-logo { font-size:16px; font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--teal));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hdr-sp { flex:1; }
.hdr-pill { background:var(--bg3); border:1px solid var(--border);
  border-radius:20px; padding:4px 11px; font-size:12px; color:var(--text2); }
.hdr-pill strong { color:var(--primary); }
.hdr-btn { background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; }

/* ── VIEWS ── */
.view { display:none; }
.view.active { display:block; animation:fu .2s ease; }
@keyframes fu { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }

/* ══════════════════════════════
   HOME
   ══════════════════════════════ */
.home-wrap { max-width:640px; margin:0 auto; padding:18px 16px 80px; }

/* Tabs */
.tabs { display:flex; background:var(--bg3); border-radius:var(--r2);
  padding:4px; gap:4px; margin-bottom:20px; }
.tab { flex:1; padding:9px; border:none; border-radius:var(--r3);
  background:transparent; color:var(--text2); font-size:14px; font-weight:600;
  transition:.15s; }
.tab.active { background:var(--bg2); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.3); }

/* ── TEST TAB ── */
.test-section { display:none; }
.test-section.active { display:block; }

.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-bottom:12px;
}
.card-title { font-size:14px; font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:8px; }

.count-row { display:flex; gap:7px; margin-bottom:14px; }
.cp {
  flex:1; padding:10px 4px; text-align:center; border:1.5px solid var(--border);
  background:var(--bg3); border-radius:var(--r2); font-size:15px; font-weight:700;
  color:var(--text2); transition:.12s;
}
.cp.sel { background:var(--primary-dim); border-color:var(--primary); color:var(--primary); }
.cp:active { transform:scale(.93); }

.start-btn {
  width:100%; padding:14px; border:none; border-radius:var(--r2);
  background:var(--primary); color:#fff; font-size:15px; font-weight:700;
  box-shadow:0 4px 16px rgba(59,130,246,.4); transition:.12s;
}
.start-btn:active { transform:scale(.97); opacity:.9; }

.divider { display:flex; align-items:center; gap:10px; margin:8px 0;
  font-size:12px; color:var(--text3); }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--border); }

.all-btn {
  width:100%; padding:15px 18px; border:none; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--teal),#0d9488);
  color:#fff; font-size:15px; font-weight:700;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 16px rgba(20,184,166,.35); transition:.12s;
}
.all-btn:active { transform:scale(.97); opacity:.9; }
.all-btn-txt { flex:1; text-align:left; }
.all-btn-sub { font-size:12px; opacity:.75; font-weight:500; margin-top:2px; }

/* ── LEARN TAB ── */
.learn-section { display:none; }
.learn-section.active { display:block; }

.topic-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); margin-bottom:10px; overflow:hidden;
}
.topic-head {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
.topic-head:active { background:var(--bg3); }
.topic-ico { font-size:22px; flex-shrink:0; }
.topic-ttl { font-size:15px; font-weight:700; flex:1; }
.topic-arr { font-size:18px; color:var(--text3); transition:transform .2s; flex-shrink:0; }
.topic-card.open .topic-arr { transform:rotate(90deg); }
.topic-body { display:none; padding:0 16px 16px; border-top:1px solid var(--border); }
.topic-card.open .topic-body { display:block; animation:fu .18s ease; }

/* Topic body styles */
.topic-body p { font-size:14px; color:var(--text2); line-height:1.7; margin-bottom:10px; }
.topic-body p:last-child { margin-bottom:0; }
.topic-body h4 { font-size:13px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; }
.def-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:var(--bg3); border-radius:var(--r3); margin-bottom:7px; font-size:14px; }
.def-ico { font-size:18px; flex-shrink:0; }
.def-txt { color:var(--text2); line-height:1.55; flex:1; }
.def-txt strong { color:var(--text); }
.formula-box {
  background:var(--primary-dim); border:1px solid rgba(59,130,246,.25);
  border-radius:var(--r3); padding:12px 14px; margin-bottom:8px;
  font-size:13px; font-family:ui-monospace,'SF Mono',Consolas,monospace;
  color:var(--primary); line-height:1.8;
}
.formula-box .fl { color:var(--text2); font-family:inherit; font-style:italic; font-size:12px; }
.example-box {
  background:rgba(20,184,166,.07); border:1px solid rgba(20,184,166,.2);
  border-radius:var(--r3); padding:11px 13px; margin-bottom:8px;
  font-size:13px; color:var(--text2); line-height:1.65;
}
.example-box strong { color:var(--teal); }
.warn-box {
  background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2);
  border-radius:var(--r3); padding:11px 13px; margin-bottom:8px;
  font-size:13px; color:var(--text2); line-height:1.65;
}
.warn-box strong { color:var(--yellow); }
.mini-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:8px; }
.mini-table th {
  background:var(--bg3); padding:7px 10px; text-align:left;
  border:1px solid var(--border); font-weight:700; color:var(--text2);
  font-size:12px; text-transform:uppercase; letter-spacing:.03em;
}
.mini-table td { padding:7px 10px; border:1px solid var(--border); color:var(--text2); }
.mini-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }

/* ══════════════════════════════
   QUIZ VIEW
   ══════════════════════════════ */
.q-prog { height:3px; background:var(--bg3); }
.q-prog-fill { height:100%; background:var(--primary); transition:.3s; }

.q-wrap { max-width:640px; margin:0 auto; padding:14px 16px calc(var(--nav-h) + var(--safe-b) + 14px); }

/* topbar */
.q-topbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.back-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; color:var(--text2); font-size:13px; white-space:nowrap;
}
.back-btn:active { opacity:.7; }
.q-badge {
  border-radius:20px; padding:4px 10px; font-size:11px; font-weight:700;
  background:var(--primary-dim); border:1px solid rgba(59,130,246,.3); color:var(--primary);
  white-space:nowrap;
}
.q-sp { flex:1; }
.q-frac { font-size:13px; font-weight:700; color:var(--text2); }
.finish-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; color:var(--text2); font-size:13px; white-space:nowrap;
}
.finish-btn:active { opacity:.7; }

/* Question card */
.q-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-bottom:12px;
}

/* Embedded table */
.q-table { width:100%; border-collapse:collapse; margin-bottom:14px;
  font-size:13px; border-radius:var(--r3); overflow:hidden; }
.q-table th {
  background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.2);
  padding:8px 12px; text-align:left; font-weight:700; color:var(--primary); font-size:12px;
}
.q-table td { padding:8px 12px; border:1px solid var(--border); color:var(--text2); }
.q-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }
.q-table-label {
  font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:6px; opacity:.8;
}

.q-text { font-size:15px; font-weight:600; line-height:1.6; }
@media(min-width:480px){ .q-text { font-size:16px; } }

/* Options */
.opts { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.opt {
  background:var(--bg3); border:1.5px solid var(--border);
  border-radius:var(--r2); padding:13px 14px; cursor:pointer;
  display:flex; gap:11px; align-items:flex-start; min-height:50px;
  transition:border-color .1s,background .1s;
}
.opt:not(.locked):active { transform:scale(.98); }
.opt:not(.locked):hover { border-color:var(--primary); background:var(--primary-dim); }
.opt-l {
  width:27px; height:27px; border-radius:7px; background:var(--bg2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; flex-shrink:0; margin-top:1px;
}
.opt-t { font-size:14px; line-height:1.5; flex:1; padding-top:2px; }
.opt.correct { border-color:var(--green); background:var(--green-dim); }
.opt.correct .opt-l { background:rgba(34,197,94,.2); border-color:var(--green); color:var(--green); }
.opt.wrong   { border-color:var(--red); background:var(--red-dim); }
.opt.wrong   .opt-l { background:rgba(239,68,68,.15); border-color:var(--red); color:var(--red); }
.opt.dimmed  { opacity:.3; }
.opt.locked  { cursor:default; }

/* Bottom nav */
.bot-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--bg2); border-top:1px solid var(--border);
  padding:10px 16px calc(10px + var(--safe-b));
  display:flex; align-items:center; gap:8px;
}
.bnav-prev, .bnav-next {
  border:none; border-radius:var(--r2); height:50px; padding:0 16px;
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
  transition:.12s; flex-shrink:0;
}
.bnav-prev:active,.bnav-next:active { transform:scale(.94); }
.bnav-prev { background:var(--bg3); border:1px solid var(--border); color:var(--text2); min-width:50px; }
.bnav-prev:disabled { opacity:.22; cursor:default; }
.bnav-ctr { flex:1; text-align:center; font-size:14px; font-weight:700; color:var(--text2); }
.bnav-next { background:var(--bg3); border:1px solid var(--border); color:var(--text2); min-width:50px; }
.bnav-next.on {
  background:var(--primary); color:#fff; border-color:transparent; flex:1;
  box-shadow:0 4px 16px rgba(59,130,246,.45); font-size:15px;
}

/* ══════════════════════════════
   RESULTS
   ══════════════════════════════ */
.res-wrap { max-width:640px; margin:0 auto; padding:24px 16px 80px; }
.score-ring { width:130px; height:130px; margin:0 auto 16px; position:relative; }
.score-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg   { fill:none; stroke:var(--bg3); stroke-width:8; }
.ring-fill { fill:none; stroke-width:8; stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.score-c { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.score-pct { font-size:28px; font-weight:800; }
.score-sub { font-size:12px; color:var(--text3); }
.res-title { text-align:center; font-size:20px; font-weight:800; margin-bottom:4px; }
.res-sub   { text-align:center; font-size:14px; color:var(--text2); margin-bottom:24px; }
.res-btns { display:flex; flex-direction:column; gap:8px; }
.res-btn { padding:14px; border:none; border-radius:var(--r2);
  font-size:15px; font-weight:700; transition:.12s; }
.res-btn:active { transform:scale(.97); }

/* Misc */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:2px; }
@media(max-width:360px) { .count-row { gap:5px; } .cp { font-size:13px; } }