:root {
  --bg: #0f1720;
  --bg2: #16212e;
  --card: #1c2a3a;
  --card2: #223347;
  --line: #2c3e54;
  --text: #e8eef5;
  --muted: #8da3bb;
  --accent: #38bdf8;
  --accent2: #0ea5e9;
  --green: #22c55e;
  --green-bg: #14361f;
  --red: #ef4444;
  --red-bg: #3a1717;
  --amber: #f59e0b;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans Georgian', system-ui, 'Segoe UI', sans-serif;
  background: linear-gradient(180deg, #0c1219 0%, #0f1720 100%);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,20,29,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 920px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 28px; color: var(--accent); filter: drop-shadow(0 0 8px rgba(56,189,248,.5)); }
.brand-text h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: -.2px; }
.brand-text p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.stats { display: flex; gap: 8px; }
.stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 54px; padding: 5px 8px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--line);
}
.stat-num { font-size: 17px; font-weight: 700; line-height: 1; }
.stat-lbl { font-size: 10px; color: var(--muted); margin-top: 3px; }
.stat-correct .stat-num { color: var(--green); }
.stat-wrong .stat-num { color: var(--red); }
.stat-skipped .stat-num { color: var(--amber); }
.stat-pct .stat-num { color: var(--accent); }
.progressbar { height: 3px; background: var(--line); }
.progressbar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--green)); transition: width .3s; }

/* ---------- Layout ---------- */
.layout { max-width: 920px; margin: 0 auto; padding: 18px; }

/* ---------- Controls ---------- */
.controls { margin-bottom: 16px; }
.control-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 9px; cursor: pointer; font-size: 13px;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: .15s;
}
.filter:hover { border-color: var(--accent); }
.filter.active { background: var(--accent2); border-color: var(--accent); color: #04212e; font-weight: 600; }
.badge { background: rgba(0,0,0,.25); border-radius: 20px; padding: 1px 7px; font-size: 11px; min-width: 18px; text-align: center; }
.filter.active .badge { background: rgba(255,255,255,.3); }

.jump { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mini-exam-btn {
  background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; border: none;
  padding: 8px 13px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow);
}
.mini-exam-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.jump-form { display: flex; gap: 0; }
.jump-form input {
  width: 70px; background: var(--card); border: 1px solid var(--line); color: var(--text);
  padding: 8px 10px; border-radius: 9px 0 0 9px; font-family: inherit; font-size: 14px; border-right: none;
}
.jump-form input:focus { outline: none; border-color: var(--accent); }
.jump-form button {
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; border-radius: 0 9px 9px 0; cursor: pointer; font-family: inherit; font-size: 13px;
}
.jump-form button:hover { background: var(--accent2); color: #04212e; }

.nav-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer; font-family: inherit;
  font-size: 13px; padding: 4px 0; margin-bottom: 6px;
}
.navstrip-wrap {
  max-height: 168px; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px;
}
.navstrip-wrap.collapsed { display: none; }
.navstrip { display: flex; flex-wrap: wrap; gap: 5px; }
.navchip {
  width: 34px; height: 30px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-family: inherit; transition: .1s;
}
.navchip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.navchip.correct { background: var(--green-bg); border-color: var(--green); color: #7ef0a3; }
.navchip.wrong { background: var(--red-bg); border-color: var(--red); color: #ff9b9b; }
.navchip.flagged::after { content: ''; position: absolute; }
.navchip.flagged { box-shadow: inset 0 0 0 2px var(--amber); }
.navchip.current { background: var(--accent); color: #04212e; border-color: var(--accent); font-weight: 700; transform: scale(1.08); }
.navchip.hiddenchip { display: none; }

/* ---------- Mini banner ---------- */
.mini-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(219,39,119,.25));
  border: 1px solid #7c3aed; border-radius: 12px; padding: 10px 16px; margin-bottom: 14px; font-size: 14px;
}
.mini-banner button { background: rgba(0,0,0,.3); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-family: inherit; }

/* ---------- Card ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.qbadge { background: var(--accent2); color: #04212e; font-weight: 700; padding: 4px 12px; border-radius: 20px; font-size: 14px; }
.qpos { color: var(--muted); font-size: 12px; }
.flag-btn { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 36px; height: 32px; cursor: pointer; font-size: 14px; }
.flag-btn.on { background: var(--amber); border-color: var(--amber); color: #2a1a00; }
.qtext { font-size: 18px; font-weight: 600; margin: 0 0 18px; line-height: 1.45; }

.options { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: right;
  background: var(--card2); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 13px 15px; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--text);
  transition: .12s; width: 100%; text-align: left;
}
.opt:hover:not(.locked) { border-color: var(--accent); background: #26384d; }
.opt .opt-letter {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--bg2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--muted);
}
.opt .opt-text { flex: 1; }
.opt.locked { cursor: default; }
.opt.correct { background: var(--green-bg); border-color: var(--green); }
.opt.correct .opt-letter { background: var(--green); color: #04210f; border-color: var(--green); }
.opt.wrong { background: var(--red-bg); border-color: var(--red); }
.opt.wrong .opt-letter { background: var(--red); color: #2a0808; border-color: var(--red); }
.opt.dim { opacity: .55; }

.result-line { margin-top: 14px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.result-line.ok { background: var(--green-bg); color: #7ef0a3; border: 1px solid var(--green); }
.result-line.no { background: var(--red-bg); color: #ff9b9b; border: 1px solid var(--red); }

.card-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-hint, .btn-retry {
  font-family: inherit; font-size: 14px; padding: 9px 16px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line);
}
.btn-hint { background: var(--amber); color: #2a1a00; border-color: var(--amber); font-weight: 600; }
.btn-hint:hover { filter: brightness(1.08); }
.btn-retry { background: var(--card2); color: var(--text); }
.btn-retry:hover { border-color: var(--accent); }

.hint {
  margin-top: 16px; background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(56,189,248,.07));
  border: 1px solid #4a3a1a; border-left: 4px solid var(--amber); border-radius: 11px; padding: 16px 18px;
}
.hint-title { font-weight: 700; color: var(--amber); margin-bottom: 8px; font-size: 14px; }
.hint-body { font-size: 15px; line-height: 1.6; color: #f0e6d8; }

/* ---------- Pager ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pager button {
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-family: inherit;
  padding: 11px 20px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.pager button:hover:not(:disabled) { border-color: var(--accent); background: var(--card2); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager-info { color: var(--muted); font-size: 13px; }

/* ---------- Visitors ---------- */
.visitors {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 4px auto 0; padding: 10px 16px; max-width: 460px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  font-size: 13px; color: var(--muted);
}
.visitors b { color: var(--text); font-weight: 700; }
.v-now { display: inline-flex; align-items: center; gap: 7px; }
.v-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: vpulse 2s infinite;
}
@keyframes vpulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.v-sep { opacity: .5; }

/* ---------- Footer ---------- */
.foot { text-align: center; padding: 10px 0 40px; }
.reset-btn { background: none; border: 1px solid var(--line); color: var(--muted); padding: 8px 16px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13px; }
.reset-btn:hover { border-color: var(--red); color: var(--red); }
.foot-note { color: var(--muted); font-size: 11px; margin-top: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .brand-text h1 { font-size: 14px; }
  .stat { min-width: 46px; padding: 4px 6px; }
  .stat-num { font-size: 15px; }
  .control-row { flex-direction: column; }
  .jump { justify-content: space-between; }
  .qtext { font-size: 16px; }
  .opt { font-size: 14px; }
  .navchip { width: 30px; height: 28px; font-size: 11px; }
}