/* OCN Practice Center — shared styles */
:root{
  /* Brand */
  --navy:#0B3D5C; --navy2:#12557e; --accent:#1f7a8c;
  /* Surfaces & text */
  --bg:#eef2f5; --panel:#ffffff; --panel-2:#f4f6f8;
  --line:#d7dee4; --line-2:#c4ccd3; --ink:#1c2733; --ink-2:#43505c; --muted:#5d6b78;
  --sel-bg:#f1f7fb; --tag-real-bg:#e8eef6; --bar-track:#e6ebef;
  /* Status */
  --good:#1b7f4b; --good-bg:#e6f5ec; --bad:#b0203a; --bad-bg:#fbe9ec;
  --flag:#d9822b; --answered:#cfe3d6; --answered-border:#9cc0a9; --answered-ink:#1c4a30;
  --feedback-ok-border:#a8d8bd; --feedback-no-border:#e3b2bc; --rat-ink:#33404c;
  /* Buttons */
  --btn-bg:#0B3D5C; --btn-bg-hover:#12557e;
  --shadow:0 1px 3px rgba(16,40,60,.12);
}
:root[data-theme="dark"]{
  --navy:#0e2a3d; --navy2:#2f86c4; --accent:#3aa6bb;
  --bg:#0f141a; --panel:#1a212b; --panel-2:#10161d;
  --line:#2b3641; --line-2:#3a4654; --ink:#e6edf3; --ink-2:#c0cad4; --muted:#9aa7b3;
  --sel-bg:#16242f; --tag-real-bg:#1b2c3a; --bar-track:#28323d;
  --good:#46c985; --good-bg:#123222; --bad:#f0717f; --bad-bg:#371820;
  --flag:#e0913f; --answered:#173a28; --answered-border:#2f6b48; --answered-ink:#9ee0b9;
  --feedback-ok-border:#2c6244; --feedback-no-border:#6f2c38; --rat-ink:#c0cad4;
  --btn-bg:#1f6f9f; --btn-bg-hover:#2782ba;
  --shadow:0 1px 3px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s}
a{color:var(--navy2)}
.wrap{max-width:1000px;margin:0 auto;padding:24px}

/* Theme toggle (portal: floating; exam: in the top bar via .icon-btn) */
.theme-toggle{position:fixed;top:14px;right:16px;z-index:40;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;
  cursor:pointer;box-shadow:var(--shadow)}
.theme-toggle:hover{background:var(--sel-bg)}

/* ---------- Portal ---------- */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:48px 24px;text-align:center}
.hero h1{margin:0 0 6px;font-size:30px;letter-spacing:.2px}
.hero p{margin:0;opacity:.92;font-size:15px}
.section-title{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);
  margin:34px 0 14px;font-weight:700}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--shadow)}
.card h2{margin:0 0 6px;font-size:20px;color:var(--navy2)}
.card .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;margin-bottom:12px}
.tag.study{background:var(--good-bg);color:var(--good)}
.tag.real{background:var(--tag-real-bg);color:var(--navy2)}
.card ul{margin:10px 0 18px;padding-left:18px;color:var(--muted);font-size:14px}
.card li{margin:4px 0}
.btn{display:inline-block;background:var(--btn-bg);color:#fff;text-decoration:none;border:0;cursor:pointer;
  padding:12px 22px;border-radius:8px;font-size:15px;font-weight:600;transition:background .15s}
.btn:hover{background:var(--btn-bg-hover)}
.btn.ghost{background:var(--panel);color:var(--navy2);border:1.5px solid var(--navy2)}
.btn.ghost:hover{background:var(--sel-bg)}
.btn.lg{width:100%;text-align:center}
.pdf-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdf-row{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px}
.pdf-row .nm{font-weight:600;font-size:14px}
.pdf-row a{font-size:13px;text-decoration:none;margin-left:10px;white-space:nowrap}
.disclaimer{color:var(--muted);font-size:12px;margin:34px 0 10px;line-height:1.5}

/* ---------- Exam shell ---------- */
.exam-body{background:var(--panel-2)}
.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:52px;position:sticky;top:0;z-index:30}
.topbar .left{font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}
.topbar .center{font-size:14px;font-weight:600;opacity:.95}
.topbar .right{display:flex;align-items:center;gap:14px;font-size:14px}
.mode-pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px}
.score-chips{display:flex;gap:8px}
.chip{background:rgba(255,255,255,.14);padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600}
.chip.ok{background:rgba(120,230,170,.22)}
.chip.no{background:rgba(255,150,160,.22)}
.timer{font-variant-numeric:tabular-nums;font-weight:700;background:rgba(255,255,255,.12);
  padding:4px 10px;border-radius:6px;min-width:78px;text-align:center}
.timer.warn{background:#9e2436}
.icon-btn{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;
  padding:4px 9px;cursor:pointer;font-size:12px}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn.danger{border-color:#e8a3ad;color:#ffe1e5}
.icon-btn.danger:hover{background:#9e2436;border-color:#9e2436;color:#fff}

.layout{display:grid;grid-template-columns:218px 1fr;gap:0;height:calc(100vh - 52px)}
.nav-panel{background:var(--bg);border-right:1px solid var(--line);padding:12px 10px 12px 14px;overflow-y:auto;scrollbar-gutter:stable}
.nav-panel h4{margin:2px 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.nav-cell{position:relative;aspect-ratio:1/1;border:1px solid var(--line-2);background:var(--panel);border-radius:6px;
  font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav-cell:hover{border-color:var(--navy2)}
.nav-cell.answered{background:var(--answered);border-color:var(--answered-border);color:var(--answered-ink)}
.nav-cell.current{outline:2px solid var(--navy2);outline-offset:0;border-color:var(--navy2)}
.nav-cell.flagged::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;
  background:var(--flag);border-radius:2px;box-shadow:0 0 0 1.5px var(--bg)}
.legend{margin-top:14px;font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:13px;height:13px;border-radius:3px;display:inline-block;border:1px solid var(--line-2)}
.legend .l-ans{background:var(--answered)} .legend .l-cur{background:var(--panel);outline:2px solid var(--navy2)}
.legend .l-flag{background:var(--flag);border-color:var(--flag)}

.main{overflow-y:auto;padding:26px 30px}
.q-area{max-width:760px;margin:0 auto}
.q-meta{font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.3px}
.q-stem{font-size:18px;font-weight:600;line-height:1.5;margin:2px 0 20px}
.options{display:flex;flex-direction:column;gap:11px}
.option{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1.5px solid var(--line);
  border-radius:9px;padding:13px 15px;cursor:pointer;transition:border-color .12s,background .12s;font-size:15px}
.option:hover{border-color:var(--navy2)}
.option .letter{flex:0 0 26px;height:26px;border:1.5px solid var(--line-2);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--ink-2)}
.option.selected{border-color:var(--navy2);background:var(--sel-bg)}
.option.selected .letter{background:var(--navy2);color:#fff;border-color:var(--navy2)}
.option.correct{border-color:var(--good);background:var(--good-bg)}
.option.correct .letter{background:var(--good);color:#fff;border-color:var(--good)}
.option.wrong{border-color:var(--bad);background:var(--bad-bg)}
.option.wrong .letter{background:var(--bad);color:#fff;border-color:var(--bad)}
.option.locked{cursor:default}
.feedback{margin-top:18px;border-radius:9px;padding:14px 16px;font-size:14px;line-height:1.5;display:none}
.feedback.show{display:block}
.feedback.ok{background:var(--good-bg);border:1px solid var(--feedback-ok-border)}
.feedback.no{background:var(--bad-bg);border:1px solid var(--feedback-no-border)}
.feedback .verdict{font-weight:700;margin-bottom:4px}
.feedback.ok .verdict{color:var(--good)} .feedback.no .verdict{color:var(--bad)}
.feedback .rat{color:var(--rat-ink)}

.bottombar{border-top:1px solid var(--line);background:var(--panel);padding:12px 16px;position:sticky;bottom:0}
.bar-inner{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.bottombar .grp{display:flex;gap:10px}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.flag{background:var(--panel);color:var(--flag);border:1.5px solid var(--flag)}
.btn.flag.on{background:var(--flag);color:#fff}
.btn.end{background:var(--panel);color:var(--bad);border:1.5px solid var(--bad)}
.btn.end:hover{background:var(--bad-bg)}

/* ---------- Overlays: start / review / results ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,16,24,.6);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:20px}
.modal{background:var(--panel);border-radius:14px;max-width:620px;width:100%;padding:30px;box-shadow:0 12px 40px rgba(0,0,0,.4);
  max-height:90vh;overflow-y:auto}
.modal h2{margin:0 0 4px;color:var(--navy2);font-size:24px}
.modal .sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.modal ul{color:var(--ink);font-size:14px;line-height:1.6}
.modal .actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

.result-score{text-align:center;margin:8px 0 18px}
.result-score .big{font-size:54px;font-weight:800;line-height:1}
.result-score .big.pass{color:var(--good)} .result-score .big.fail{color:var(--bad)}
.result-score .pf{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.pf.pass{color:var(--good)} .pf.fail{color:var(--bad)}
.tallies{display:flex;justify-content:center;gap:26px;margin:14px 0 8px;flex-wrap:wrap}
.tally{text-align:center}.tally .n{font-size:24px;font-weight:700}.tally .l{font-size:12px;color:var(--muted)}
.tally .n.ok{color:var(--good)}.tally .n.no{color:var(--bad)}
.domain-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.domain-table th,.domain-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.domain-table th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.bar{height:8px;background:var(--bar-track);border-radius:5px;overflow:hidden;min-width:90px}
.bar > i{display:block;height:100%;background:var(--accent)}
.hidden{display:none!important}
@media(max-width:760px){
  .mode-grid,.pdf-list{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .nav-panel{display:none}
  .topbar .left .ttl{display:none}
}