:root{
  --bg:#0b1220; --surface:#131c2e; --surface2:#1b2740; --line:#28354f; --text:#e8eefc; --dim:#93a3c4; --accent:#4f8cff;
  --ok:#22c55e; --okbg:#0f2f1e; --bad:#ef4444; --badbg:#331419;
  --warn:#f59e0b; --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-font-smoothing:antialiased;
}
#app{max-width:680px;margin:0 auto;padding:16px 16px 40px}
h1,h2,h3{margin:0 0 12px;line-height:1.25}
h1{font-size:22px;letter-spacing:-.02em}
h2{font-size:18px}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}

/* header */
.top{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.top .back{font-size:15px;color:var(--dim);padding:8px 10px 8px 0}
.top .title{font-weight:650;font-size:17px;flex:1;min-width:0}
.top .meta{font-size:13px;color:var(--dim);white-space:nowrap}

/* countdown banner */
.countdown{
  background:linear-gradient(135deg,#1e3a8a,#3730a3);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;
}
.countdown .days{font-size:34px;font-weight:750;letter-spacing:-.03em;line-height:1}
.countdown .lbl{font-size:13px;color:#c7d6ff;margin-top:6px}

/* cards / menu */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin-bottom:12px;
}
.menu{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.menu button{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;min-height:64px;
  transition:background .15s;
}
.menu button:active{background:var(--surface2)}
.menu .ic{
  width:40px;height:40px;flex:none;border-radius:11px;background:var(--surface2);
  display:grid;place-items:center;font-size:19px;font-weight:700;color:var(--accent);
}
.menu .tx{flex:1;min-width:0}
.menu .tx b{display:block;font-weight:620;font-size:16px}
.menu .tx span{display:block;font-size:13px;color:var(--dim);margin-top:2px}
.menu .arrow{color:var(--dim);font-size:18px;flex:none}

/* progress bars */
.bar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px;
  transition:width .3s}
.bar.ok>i{background:var(--ok)} .bar.bad>i{background:var(--bad)}
.bar.warn>i{background:var(--warn)}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:6px}
.row .k{font-size:14px} .row .v{font-size:13px;color:var(--dim);white-space:nowrap}

/* question */
.qmeta{font-size:12px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:10px;font-weight:600}
.qtext{font-size:18px;line-height:1.45;font-weight:500;margin-bottom:18px}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:14px;min-height:56px;line-height:1.4;
  transition:border-color .15s,background .15s;
}
.choice:active{background:var(--surface2)}
.choice .ltr{
  width:26px;height:26px;flex:none;border-radius:8px;background:var(--surface2);
  display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--dim);
}
.choice.sel{border-color:var(--accent)}
.choice.right{border-color:var(--ok);background:var(--okbg)}
.choice.right .ltr{background:var(--ok);color:#04220f}
.choice.wrong{border-color:var(--bad);background:var(--badbg)}
.choice.wrong .ltr{background:var(--bad);color:#2a0709}
.choice[disabled]{cursor:default}

/* explanation */
.exp{margin-top:18px;border-radius:var(--radius);padding:16px;
  border:1px solid var(--line);background:var(--surface)}
.exp.right{border-color:#1f6b3f;background:var(--okbg)}
.exp.wrong{border-color:#7f2933;background:var(--badbg)}
.exp .verdict{font-weight:700;font-size:15px;margin-bottom:8px;display:flex;
  align-items:center;gap:8px}
.exp .body{font-size:15px;line-height:1.55;color:#dbe5f8}
.exp .body p{margin:0 0 10px} .exp .body p:last-child{margin:0}
.exp .tip{margin-top:12px;padding:11px 13px;background:rgba(255,255,255,.05);
  border-radius:10px;font-size:14px;line-height:1.5}
.exp .tip b{color:var(--warn)}
.exp code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;
  font-size:13.5px}

/* sticky action bar */
.actions{position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 62%,transparent);margin-top:20px}
.btn{display:block;width:100%;background:var(--accent);color:#fff;font-weight:650;
  font-size:16px;border-radius:12px;padding:16px;text-align:center;min-height:54px}
.btn:active{filter:brightness(.9)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.btn.danger{background:var(--bad)}
.btn[disabled]{opacity:.45;cursor:default}
.btn2{display:flex;gap:10px} .btn2>*{flex:1}

/* exam timer */
.timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.timer.low{color:var(--bad)}

/* results */
.score{text-align:center;padding:22px 0 8px}
.score .big{font-size:52px;font-weight:750;letter-spacing:-.03em;line-height:1}
.score .sub{color:var(--dim);font-size:14px;margin-top:8px}
.score .pill{display:inline-block;margin-top:14px;padding:7px 16px;border-radius:99px;
  font-size:14px;font-weight:650}
.pill.pass{background:var(--okbg);color:#4ade80;border:1px solid #1f6b3f}
.pill.fail{background:var(--badbg);color:#f87171;border:1px solid #7f2933}

.list{display:flex;flex-direction:column;gap:8px}
.tag{display:inline-block;font-size:11px;padding:3px 8px;border-radius:99px;
  background:var(--surface2);color:var(--dim);font-weight:600;letter-spacing:.03em}
.tag.state{background:#3b2a12;color:#fbbf24}
.tag.national{background:#132a45;color:#60a5fa}
.empty{text-align:center;color:var(--dim);padding:40px 20px;font-size:15px}
.flash{font-size:13px;color:var(--dim);text-align:center;margin-top:10px}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}

/* countdown is tappable to set or change the exam date */
button.countdown{display:block;width:100%;text-align:left;border:none;cursor:pointer}
button.countdown:active{filter:brightness(.92)}
.countdown.noexam{background:linear-gradient(135deg,#334155,#1e293b);
  border:1px solid var(--line)}
.countdown.noexam .lbl{color:#b6c4de}

/* date picker */
.dateinput{
  width:100%;background:var(--surface2);color:var(--text);
  border:1.5px solid var(--line);border-radius:12px;padding:14px;
  font:inherit;min-height:52px;
}
.dateinput:focus{outline:none;border-color:var(--accent)}
label{font-size:15px}