:root{
  --ink:#0b1420; --panel:#101c2c; --panel2:#15243a; --line:#22374f;
  --phos:#3ee88f; --phos-dim:#1f6b47; --amber:#ffb347; --red:#ff5d5d;
  --text:#e7eef5; --sub:#7f93ab;
  --easy:#3ee88f; --medium:#ffd166; --hard:#ff9a4d; --national:#ff5d5d;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --ink:#0b1420; --panel:#101c2c; }
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:'Iowan Old Style','Georgia',serif;
  min-height:100%;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(62,232,143,.05), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(255,90,90,.04), transparent 40%);
}
.mono{font-family:'SF Mono','Menlo','Consolas',monospace;}
.wrap{max-width:720px; margin:0 auto; padding:28px 18px 60px;}
.brand{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px;}
.brand h1{font-size:1.15rem; font-weight:600; letter-spacing:.02em; margin:0; color:var(--text);}
.brand span{color:var(--phos); font-family:inherit;}
.tag{font-size:.72rem; color:var(--sub); font-family:inherit;}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:14px; padding:26px;
}

/* START SCREEN */
.start h2{font-size:1.6rem; line-height:1.25; margin:0 0 8px; font-weight:600;}
.start p{color:var(--sub); font-size:.95rem; line-height:1.5; margin:0 0 22px;}
label{display:block; font-size:.78rem; color:var(--sub); margin:16px 0 6px; font-family:'SF Mono','Menlo',monospace; letter-spacing:.02em;}
input[type=text]{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:8px;
  color:var(--text); padding:12px 14px; font-size:1rem; font-family:inherit;
}
input[type=text]:focus{outline:none; border-color:var(--phos);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  padding:9px 15px; border-radius:20px; border:1px solid var(--line); background:transparent;
  color:var(--sub); font-size:.85rem; cursor:pointer; font-family:inherit;
}
.chip.active{border-color:var(--phos); color:var(--phos); background:rgba(62,232,143,.08);}
.startBtn{
  margin-top:26px; width:100%; padding:15px; border-radius:9px; border:none;
  background:var(--phos); color:#062015; font-size:1rem; font-weight:700; cursor:pointer;
  font-family:inherit; letter-spacing:.01em;
}
.startBtn:active{transform:scale(.99);}
.startBtn:disabled{opacity:.4; cursor:not-allowed;}

/* QUIZ HUD */
.hud{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap;}
.stat{font-family:'SF Mono','Menlo',monospace; font-size:.78rem; color:var(--sub);}
.stat b{color:var(--text); font-size:.95rem;}
.badges{display:flex; gap:8px; align-items:center;}
.badge{
  font-family:'SF Mono','Menlo',monospace; font-size:.68rem; text-transform:uppercase;
  padding:4px 9px; border-radius:5px; letter-spacing:.06em; border:1px solid currentColor;
}
.b-easy{color:var(--easy);} .b-medium{color:var(--medium);}
.b-hard{color:var(--hard);} .b-national{color:var(--national);}

.timerTrack{height:5px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:20px;}
.timerBar{height:100%; background:var(--phos); width:100%; transition:width 1s linear, background .3s;}
.timerBar.warn{background:var(--amber);}
.timerBar.danger{background:var(--red);}

.qnum{font-family:'SF Mono','Menlo',monospace; font-size:.72rem; color:var(--sub); margin-bottom:10px;}
.qtext{font-size:1.22rem; line-height:1.5; margin:0 0 22px; font-weight:600;}

.opts{display:grid; gap:10px;}
.opt{
  text-align:left; padding:13px 16px; border-radius:9px; border:1px solid var(--line);
  background:var(--ink); color:var(--text); font-size:.98rem; cursor:pointer;
  font-family:inherit; display:flex; gap:12px; align-items:center; transition:border-color .15s, background .15s;
}
.opt:hover:not(:disabled){border-color:var(--phos-dim);}
.opt .k{font-family:'SF Mono','Menlo',monospace; color:var(--sub); font-size:.8rem; min-width:14px;}
.opt.correct{border-color:var(--phos); background:rgba(62,232,143,.1);}
.opt.wrong{border-color:var(--red); background:rgba(255,93,93,.1);}
.opt:disabled{cursor:default; opacity:.85;}

.feedback{margin-top:18px; padding:16px 18px; border-radius:9px; font-size:.92rem; line-height:1.55; display:none;}
.feedback.show{display:block;}
.feedback.good{background:rgba(62,232,143,.08); border:1px solid var(--phos-dim);}
.feedback.bad{background:rgba(255,93,93,.08); border:1px solid #6b2a2a;}
.feedback .fh{font-family:'SF Mono','Menlo',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:block;}
.feedback.good .fh{color:var(--phos);} .feedback.bad .fh{color:var(--red);}
.recoveryNote{margin-top:8px; font-size:.78rem; color:var(--amber); font-family:'SF Mono','Menlo',monospace;}

.nextBtn{
  margin-top:18px; width:100%; padding:13px; border-radius:9px; border:1px solid var(--phos);
  background:transparent; color:var(--phos); font-weight:700; cursor:pointer; font-size:.95rem;
  font-family:inherit; display:none;
}
.nextBtn.show{display:block;}
.nextBtn:hover{background:rgba(62,232,143,.08);}

/* SUMMARY */
.summary h2{font-size:1.5rem; margin:0 0 4px;}
.summary .big{font-size:2.6rem; font-weight:700; color:var(--phos); font-family:'SF Mono','Menlo',monospace; margin:14px 0 2px;}
.summary .bigLabel{color:var(--sub); font-size:.82rem; margin-bottom:22px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
.gcell{background:var(--ink); border:1px solid var(--line); border-radius:8px; padding:14px;}
.gcell .n{font-family:'SF Mono','Menlo',monospace; font-size:1.3rem; font-weight:700;}
.gcell .l{color:var(--sub); font-size:.75rem; margin-top:2px;}
.subjBar{margin-bottom:10px;}
.subjBar .row{display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:5px;}
.subjBar .track{height:6px; background:var(--line); border-radius:3px; overflow:hidden;}
.subjBar .fill{height:100%; background:var(--phos);}
.restartBtn{
  margin-top:20px; width:100%; padding:14px; border-radius:9px; border:none;
  background:var(--phos); color:#062015; font-weight:700; font-size:.95rem; cursor:pointer; font-family:inherit;
}

.hidden{display:none !important;}
.streak{color:var(--amber);}
/* --- Additions for DB-driven build --- */
#subjectChips{max-height:180px; overflow-y:auto; padding-right:2px;}
.chip.small{font-size:.78rem; padding:7px 12px;}
.loadingNote{color:var(--sub); font-size:.85rem; margin-top:14px; display:none;}
.loadingNote.show{display:block;}
#subjBadge{max-width:230px; white-space:normal; line-height:1.3; text-align:right;}
.typedRow{display:flex; gap:10px;}
#typedInput{
  flex:1; background:var(--ink); border:1px solid var(--line); border-radius:9px;
  color:var(--text); padding:13px 16px; font-size:1rem; font-family:inherit;
}
#typedInput:focus{outline:none; border-color:var(--phos);}
#typedSubmit{
  padding:0 22px; border-radius:9px; border:1px solid var(--phos); background:transparent;
  color:var(--phos); font-weight:700; cursor:pointer; font-family:inherit; font-size:.95rem;
}
#typedSubmit:hover{background:rgba(62,232,143,.08);}
#typedSubmit:disabled{opacity:.4; cursor:not-allowed;}
.typeTag{font-size:.65rem; color:var(--sub); font-family:'SF Mono','Menlo',monospace; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
.errBox{background:rgba(255,93,93,.08); border:1px solid #6b2a2a; border-radius:9px; padding:16px; color:var(--text); font-size:.9rem;}