:root{
  --bg:#0b0c0e;
  --surface:#15171b;
  --surface2:#1c1f25;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --txt:#f3f4f6;
  --mut:#9aa0aa;
  --mut2:#6b7280;
  --accent:#ffc400;
  --accent-ink:#1a1305;
  --good:#2fbf71;
  --good-bg:rgba(47,191,113,.14);
  --bad:#ff5d5d;
  --bad-bg:rgba(255,93,93,.14);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
#app{
  max-width:560px;
  margin:0 auto;
  padding:max(20px,env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));
}
button{font-family:inherit;cursor:pointer;color:inherit;border:none;background:none}
i.ti{font-style:normal}

/* hero / home */
.hero{padding:14px 2px 8px}
.badge{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent);padding:5px 11px;border-radius:999px;margin-bottom:16px;
}
.hero h1{font-size:30px;line-height:1.12;font-weight:700;margin:0 0 12px;letter-spacing:-.01em}
.lede{color:var(--mut);font-size:15px;margin:0;max-width:42ch}

.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 10px;text-align:center}
.snum{font-size:24px;font-weight:700;color:var(--accent)}
.slabel{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}

.modes{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.mode{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;
  transition:border-color .15s,background .15s,transform .05s;
}
.mode:hover{border-color:var(--line2);background:var(--surface2)}
.mode:active{transform:scale(.99)}
.mi{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent)}
.mt{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.mtitle{font-weight:600;font-size:16px}
.mdesc{font-size:13px;color:var(--mut)}
.mchev{color:var(--mut2);font-size:20px}
.foot{color:var(--mut2);font-size:12px;margin-top:22px;text-align:center}

/* quiz top bar */
.qbar{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.ghost{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--mut)}
.ghost:hover{color:var(--txt);border-color:var(--line2)}
.track{flex:1;height:7px;background:var(--surface2);border-radius:999px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:999px;transition:width .25s ease}
.qcount{font-size:13px;color:var(--mut);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* question card */
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 18px 18px}
.chip{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);background:var(--surface2);padding:4px 11px;border-radius:999px}
.signwrap{display:flex;justify-content:center;margin:16px 0 4px}
.signplate{background:#fff;border-radius:14px;padding:18px 22px;width:160px;height:160px;display:flex;align-items:center;justify-content:center}
.signplate svg{width:100%;height:100%;max-height:124px}
.signplate.sm{width:84px;height:84px;padding:10px}
.qtext{font-size:19px;line-height:1.4;font-weight:600;margin:16px 0 18px}

.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  display:block;text-align:left;width:100%;font-size:15px;line-height:1.4;font-weight:500;
  background:var(--surface2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;
  transition:border-color .12s,background .12s,transform .05s;
}
.opt:hover:not(.locked){border-color:var(--line2)}
.opt:active:not(.locked){transform:scale(.99)}
.opt.locked{cursor:default}
.opt.right{background:var(--good-bg);border-color:var(--good);color:#bff3d4}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:#ffc9c9}

/* feedback */
.fbbox{display:flex;gap:11px;align-items:flex-start;border-radius:13px;padding:14px 15px;margin-top:16px}
.fbbox.good{background:var(--good-bg)}
.fbbox.bad{background:var(--bad-bg)}
.fbbox i{font-size:21px;margin-top:1px}
.fbbox.good i{color:var(--good)}
.fbbox.bad i{color:var(--bad)}
.fbtitle{font-weight:600;font-size:15px;margin-bottom:2px}
.fbbox.good .fbtitle{color:var(--good)}
.fbbox.bad .fbtitle{color:var(--bad)}
.fbtext{font-size:14px;color:var(--mut);line-height:1.5}

.primary{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:16px;
  border-radius:13px;padding:15px;transition:filter .12s,transform .05s;
}
.primary:hover{filter:brightness(1.05)}
.primary:active{transform:scale(.99)}
.secondary{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--surface);color:var(--txt);font-weight:600;font-size:15px;border:1px solid var(--line2);
  border-radius:13px;padding:14px;
}
.secondary:hover{background:var(--surface2)}

/* results */
.resultwrap{text-align:center;padding-top:8px}
.ring{width:150px;height:150px;border-radius:50%;margin:8px auto 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:7px solid var(--line)}
.ring.pass{border-color:var(--good)}
.ring.fail{border-color:var(--accent)}
.rpct{font-size:44px;font-weight:700;line-height:1}
.ring.pass .rpct{color:var(--good)}
.ring.fail .rpct{color:var(--accent)}
.rfrac{font-size:14px;color:var(--mut);margin-top:4px}
.rtitle{font-size:24px;font-weight:700;margin:10px 0 4px}
.rmsg{color:var(--mut);font-size:15px;margin:0 auto 18px;max-width:34ch}
.ractions{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.ractions .primary{margin-top:0}

.revh{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:8px 0 12px}
.revcard{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-bottom:10px}
.revsign{margin-bottom:12px}
.revq{font-weight:600;font-size:15px;margin-bottom:8px}
.reva{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--good);font-weight:600;margin-bottom:6px}
.reve{font-size:13px;color:var(--mut);line-height:1.5}
.perfect{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--good);font-weight:600;font-size:16px;padding:14px;background:var(--good-bg);border-radius:13px}

@media(max-width:380px){
  .hero h1{font-size:26px}
  .signplate{width:140px;height:140px}
}