/* Minimal theme to match the index look for Network+ PBQ pages */
:root{
  --bg:#f6f7f9; --muted:#6b7280; --accent:#0b5cff; --ok:#16a34a; --bad:#ef4444; --line:#d1d5db; --panel:#ffffff; --shadow:rgba(16,24,40,0.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--bg),#ffffff); color:#111827; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:36px auto;padding:28px;background:var(--panel);border-radius:10px;box-shadow:0 8px 24px var(--shadow);}

/* Navigation */
.pbq-nav{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pbq-nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px;border:1px solid transparent;font-size:14px}
.pbq-nav a.current{background:#111827;color:#fff;border-color:rgba(0,0,0,0.06)}

.banner .tag{font-size:12px;color:var(--muted);margin-bottom:6px}
.banner h1{margin:0 0 8px 0;font-size:20px}
.banner p{margin:0;color:var(--muted);font-size:14px}

/* Tabs */
.tabs{display:flex;gap:8px;margin:18px 0}
.tab-btn{background:transparent;border:1px solid var(--line);padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}
.tab-btn.active{background:linear-gradient(180deg,#f8fafc,#eef2ff);border-color:rgba(11,92,255,0.12);color:var(--accent);font-weight:600}

/* Panels */
.panel{display:none;padding-top:12px}
.panel.active{display:block}
.scenario{background:#fbfdff;border:1px solid var(--line);padding:14px;border-radius:8px;margin-bottom:14px;color:#0f172a}

/* Tables */
table{width:100%;border-collapse:collapse;margin-bottom:8px}
thead th{background:#fbfbfc;text-align:left;padding:8px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600}
tbody td{padding:10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}

.controls{display:flex;gap:8px;margin:12px 0}
.act{padding:8px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;border-color:rgba(11,92,255,0.12)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}

.score-panel{display:none;margin-top:10px;padding:10px;border-radius:8px;border:1px solid var(--line);background:#fff}
.score-panel.visible{display:block}
.score-head{display:flex;align-items:baseline;gap:8px}
.score-num{font-weight:700;font-size:14px;padding:4px 8px;border-radius:6px}
.score-num.pass{background:rgba(22,163,74,0.12);color:var(--ok)}
.score-num.fail{background:rgba(239,68,68,0.06);color:var(--bad)}
.score-sub{color:var(--muted);font-size:13px}
.score-msg{color:var(--muted);font-size:13px;margin-top:6px}

/* Question blocks & options */
.qblock{border:1px solid var(--line);padding:10px;border-radius:8px;margin-bottom:10px;background:#fff}
.qtext{font-weight:600;margin-bottom:8px}
.qrow{display:flex;gap:8px;flex-wrap:wrap}
.radio-opt{padding:8px 10px;border-radius:8px;border:1px solid var(--line);cursor:pointer;background:transparent;color:#111827}
.radio-opt.picked{border-color:var(--accent);background:linear-gradient(180deg,#eef2ff,#f8fbff)}
.radio-opt[disabled]{opacity:0.5}
.explain{display:none;margin-top:8px;color:var(--muted);font-size:13px}
.qblock .explain{display:none}
.qblock.show-explain .explain{display:block}

/* verdict icons and graded rows */
.verdict-icon{display:inline-block;width:20px;text-align:center;font-weight:700}
.verdict-icon.ok{color:var(--ok)}
.verdict-icon.bad{color:var(--bad)}
.graded-correct{background:rgba(22,163,74,0.04)}
.graded-wrong{background:rgba(239,68,68,0.03)}
.show-explain .explain{display:block}

/* Draggable list */
.sortable{list-style:none;padding:0;margin:8px 0;border:1px dashed var(--line);border-radius:8px}
.sortable li{padding:12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;background:#fff}
.sortable li:last-child{border-bottom:none}
.sortable li.dragging{opacity:0.6}
.handle{cursor:grab;color:var(--muted);}
.step-tag{margin-left:auto;color:var(--muted);font-size:12px}

.footnote{margin-top:18px;color:var(--muted);font-size:13px}

/* small responsive tweaks */
@media (max-width:640px){.wrap{margin:18px;padding:16px}.tabs{flex-wrap:wrap}.qrow{flex-direction:column}.pbq-nav{gap:6px}}

/* utility */
.hidden{display:none}