:root{
  --bg:#121417; --card:#1d2026; --line:#2c313a;
  --text:#e8eaed; --muted:#9aa0a8;
  --accent:#3b82f6; --accent-dk:#2563eb;
  --good:#22c55e; --bad:#ef4444; --warn:#f59e0b;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%;
}
.app-header{
  padding:1.25rem 1rem .75rem; text-align:center;
  border-bottom:1px solid var(--line);
}
.app-header h1{margin:0; font-size:1.5rem; letter-spacing:.5px}
.tagline{margin:.25rem 0 0; color:var(--muted); font-size:.85rem}
main{max-width:640px; margin:0 auto; padding:1rem 1rem 2rem}
.screen{display:none}
.screen.active{display:block}
h2{font-size:1.15rem; margin:1.25rem 0 .75rem}
h2.mt{margin-top:2rem}
h3{font-size:1rem; margin:1.25rem 0 .5rem}
.field-group{margin-bottom:1.25rem}
.field-group label{display:block; font-weight:600; margin-bottom:.5rem}
.hint{color:var(--muted); font-weight:400; font-size:.85rem}

.seg{display:flex; gap:.5rem}
.seg button{
  flex:1; padding:.7rem .25rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); color:var(--text);
  font-size:1rem; cursor:pointer;
}
.seg button span{font-size:.75rem; color:var(--muted)}
.seg button.active{border-color:var(--accent); background:#1a2740; font-weight:600}

.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chips button{
  padding:.45rem .75rem; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--text); font-size:.85rem; cursor:pointer;
}
.chips button.active{border-color:var(--accent); background:#1a2740; font-weight:600}

.btn{
  display:block; width:100%; padding:.85rem; margin-top:1rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card); color:var(--text); font-size:1rem; cursor:pointer;
}
.btn.primary{background:var(--accent); border-color:var(--accent-dk); color:#fff; font-weight:600}
.btn.ghost{background:transparent; color:var(--muted)}
.btn-row{display:flex; gap:.5rem}
.btn-row .btn{margin-top:1rem}
.hidden{display:none !important}

.quiz-top{margin-bottom:1rem}
.progress{height:8px; background:var(--card); border-radius:4px; overflow:hidden}
.progress div{height:100%; width:0; background:var(--accent); transition:width .25s}
.quiz-meta{display:flex; justify-content:space-between; margin-top:.4rem;
  font-size:.8rem; color:var(--muted)}

.card{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.25rem}
.stem{font-size:1.05rem; margin:0 0 1rem}
.options{display:grid; gap:.6rem}
.options button{
  text-align:left; padding:.8rem .9rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg); color:var(--text);
  font-size:.95rem; cursor:pointer;
}
.options button:hover{border-color:var(--accent)}
.options button.correct{border-color:var(--good); background:#12351f}
.options button.wrong{border-color:var(--bad); background:#3d1a1a}
.options button:disabled{cursor:default; opacity:.9}

.feedback{margin-top:1rem; border-top:1px solid var(--line); padding-top:1rem}
.verdict{font-weight:700; margin:0 0 .5rem}
.verdict.good{color:var(--good)}
.verdict.bad{color:var(--bad)}
.explain{color:var(--muted); font-size:.92rem; margin:0 0 .75rem}

.score-ring{
  width:120px; height:120px; margin:1rem auto; border-radius:50%;
  border:8px solid var(--accent); display:flex; align-items:center; justify-content:center;
}
.score-ring span{font-size:1.75rem; font-weight:700}
.score-line{text-align:center; color:var(--muted)}

.breakdown{display:grid; gap:.5rem}
.bd-row{display:flex; justify-content:space-between; align-items:center;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:.6rem .8rem; font-size:.9rem}
.bd-row.weak{border-color:var(--warn)}
.bd-row .weak-tag{color:var(--warn); font-size:.75rem; font-weight:700; margin-left:.5rem}

.stats-summary{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem}
.stat{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:.6rem .8rem; font-size:.85rem}
.stat b{display:block; font-size:1.1rem}
.stat.weak{border-color:var(--warn)}

.history-list{display:grid; gap:.5rem}
.hist{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:.6rem .8rem; font-size:.85rem;
  display:flex; justify-content:space-between; gap:.5rem}
.hist .date{color:var(--muted)}

.review-item{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem; margin-bottom:.75rem}
.review-item .stem{font-size:.95rem}
.review-item .pick-ok{color:var(--good)}
.review-item .pick-bad{color:var(--bad)}
.review-item .explain{margin:.5rem 0 0}

.app-footer{
  text-align:center; color:var(--muted); font-size:.75rem;
  padding:1.5rem 1rem; border-top:1px solid var(--line);
}
@media (min-width:700px){ main{padding:1.5rem 0 3rem} }

/* ---- v2: Practice Lab ---- */
.main-nav{display:flex; gap:.5rem; justify-content:center; margin-top:.9rem}
.main-nav button{
  padding:.5rem 1.5rem; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--text); font-size:.9rem; cursor:pointer;
}
.main-nav button.active{background:var(--accent); border-color:var(--accent-dk); color:#fff; font-weight:600}
.lab-tabs{margin-bottom:1rem}
.labtab{display:none}
.labtab.active{display:block}

/* terminal */
.terminal{
  background:#0b0d10; border:1px solid var(--line); border-radius:var(--radius);
  font-family:Consolas,"Cascadia Mono",Menlo,monospace; font-size:.82rem;
  margin-top:.75rem; overflow:hidden;
}
.term-out{
  height:320px; overflow-y:auto; padding:.75rem;
  color:#d4d4d4; white-space:pre-wrap; word-break:break-word;
}
.term-line{min-height:1.2em}
.term-echo{color:#fff}
.term-prompt{color:#4ec9b0}
.term-form{
  display:flex; align-items:center; gap:.4rem;
  border-top:1px solid var(--line); padding:.6rem .75rem;
}
.term-input{
  flex:1; background:transparent; border:none; outline:none;
  color:#fff; font:inherit; min-width:0;
}

/* fix-it labs */
.lab-list{display:grid; gap:.6rem; margin-bottom:1rem}
.lab-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem; text-align:left; color:var(--text); cursor:pointer; width:100%;
}
.lab-card h3{margin:0 0 .3rem; font-size:.95rem}
.lab-card p{margin:0; color:var(--muted); font-size:.82rem}
.lab-card.done{border-color:var(--good)}
.lab-card .lab-done-tag{color:var(--good); font-size:.75rem; font-weight:700}
.lab-steps{margin-bottom:.5rem}
.lab-step{
  display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem;
  padding:.35rem 0; color:var(--muted);
}
.lab-step .box{
  flex:none; width:1.1em; height:1.1em; border:1px solid var(--line);
  border-radius:3px; margin-top:.15em; text-align:center; line-height:1;
}
.lab-step.done{color:var(--text)}
.lab-step.done .box{background:var(--good); border-color:var(--good); color:#06230f}
.lab-step.done .box::after{content:"✓"; font-size:.8em; font-weight:700}

/* field notes */
.note-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin-bottom:.75rem;
}
.note-card h3{margin:0 0 .15rem; font-size:.95rem}
.note-card .note-domain{color:var(--accent); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.note-card .note-field{font-size:.9rem; margin:.5rem 0}
.note-card .note-tip{
  font-size:.85rem; background:var(--bg); border-left:3px solid var(--warn);
  padding:.5rem .7rem; border-radius:0 8px 8px 0; margin:0;
}
.drill-meta{color:var(--muted); font-size:.8rem; margin:0 0 .5rem}
.drill-q{
  font-family:Consolas,Menlo,monospace; font-size:1.6rem; letter-spacing:.35em;
  text-align:center; margin:.5rem 0; color:#4ec9b0;
}
.drill-score{font-size:1.2rem; font-weight:700; text-align:center}