/* After Dark Systems — Certification Exam
   Neon palette + .panel aesthetic, lifted from building.css / game2045.css. */
:root{
  --neon:#37e0ff; --neon-dim:#1b6e80; --hot:#ff2a4d; --gold:#ffce4a;
  --ink:#05070d; --panel:rgba(8,14,24,.82); --edge:rgba(55,224,255,.35);
  --good:#2effa0;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(55,224,255,.08), transparent 60%),
    var(--ink);
  color:#dbeeff;
  font-family:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}

/* ---- top HUD ---- */
#hud{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; gap:16px;
  align-items:center; padding:11px 18px;
  background:linear-gradient(180deg,rgba(3,6,12,.95),rgba(3,6,12,.55) 70%,transparent);
  border-bottom:1px solid rgba(55,224,255,.12)}
#hud .tag{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--neon)}
#examTitle{flex:none; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#progress{flex:1; text-align:center; color:#9fc2da}
#timer{flex:none; font-size:20px; font-weight:700; letter-spacing:.06em; color:var(--good);
  font-variant-numeric:tabular-nums; min-width:84px; text-align:right}
#timer.warn{color:var(--hot); text-shadow:0 0 14px rgba(255,42,77,.6); animation:pulse 1s steps(2) infinite}
@keyframes pulse{50%{opacity:.45}}

/* ---- layout ---- */
#exam-root{max-width:920px; margin:0 auto; padding:78px 18px 60px}

/* ---- panels ---- */
.panel{position:relative; background:var(--panel); border:1px solid var(--edge); border-radius:14px;
  padding:26px 28px; backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.55),inset 0 0 40px rgba(55,224,255,.05)}
h1,h2,h3{margin:0 0 6px; letter-spacing:.03em}
h1{font-size:30px; color:#fff; text-shadow:0 0 18px rgba(55,224,255,.45)}
h2{font-size:19px; color:var(--neon)}
h3{font-size:14px; color:#cfe8f6}
.sub{color:#8fb0c8; font-size:12.5px; line-height:1.55; margin:6px 0 16px; letter-spacing:.02em}
.row{display:flex; gap:14px; flex-wrap:wrap}

/* ---- buttons ---- */
button{font-family:inherit; cursor:pointer; color:#eaf6ff; background:rgba(55,224,255,.08);
  border:1px solid var(--edge); border-radius:9px; padding:11px 16px; font-size:13px;
  letter-spacing:.06em; transition:.15s; text-align:left}
button:hover{background:rgba(55,224,255,.18); border-color:var(--neon); transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.primary{background:var(--neon); color:#04141a; font-weight:700; border-color:var(--neon); text-align:center}
button.primary:hover{box-shadow:0 0 22px rgba(55,224,255,.6)}
button:disabled{opacity:.35; cursor:not-allowed; transform:none}

/* ---- question card ---- */
.q-meta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px}
.q-meta .q-type{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--neon)}
.q-meta .q-points{font-size:11px; color:var(--gold); letter-spacing:.1em}
.q-prompt{font-size:16px; line-height:1.5; color:#fff; margin:6px 0 18px}

/* radio / checkbox option rows (shared) */
.opt{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; margin:8px 0;
  border:1px solid var(--edge); border-radius:10px; cursor:pointer; transition:.15s; background:rgba(55,224,255,.04)}
.opt:hover{border-color:var(--neon); background:rgba(55,224,255,.1)}
.opt.sel{border-color:var(--good); background:rgba(46,255,160,.1)}
.opt input{margin-top:3px; accent-color:var(--neon); flex:none; width:16px; height:16px; cursor:pointer}
.opt span{font-size:13.5px; line-height:1.45; color:#dbeeff}

/* ---- drag-drop ---- */
.dd-pool{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px;
  padding:14px; border:1px dashed rgba(55,224,255,.25); border-radius:10px; min-height:56px}
.dd-pool .dd-pool-label{width:100%; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#7f9fb6; margin-bottom:2px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:9px;
  border:1px solid var(--edge); background:rgba(55,224,255,.08); color:#eaf6ff; font-size:13px;
  cursor:grab; user-select:none; transition:.15s}
.chip:hover{border-color:var(--neon); background:rgba(55,224,255,.16)}
.chip.picked{border-color:var(--gold); background:rgba(255,206,74,.16); box-shadow:0 0 14px rgba(255,206,74,.35)}
.chip.placed{cursor:grab}
.dd-targets{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dd-target{border:1px solid var(--edge); border-radius:10px; padding:12px 14px; background:rgba(8,14,24,.55); transition:.15s}
.dd-target.over{border-color:var(--neon); background:rgba(55,224,255,.12)}
.dd-target .dd-target-label{font-size:12px; color:var(--neon); letter-spacing:.04em; margin-bottom:8px}
.dd-target .dd-slot{min-height:42px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  border:1px dashed rgba(55,224,255,.2); border-radius:8px; padding:6px}
.dd-target.armed{border-color:var(--gold)}

/* ---- terminal ---- */
.terminal{border:1px solid var(--edge); border-radius:10px; overflow:hidden; background:#020a12; margin:8px 0 4px}
.terminal-bar{display:flex; align-items:center; gap:8px; padding:7px 12px;
  background:rgba(55,224,255,.06); border-bottom:1px solid rgba(55,224,255,.18);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--neon)}
.terminal-log{height:300px; overflow-y:auto; padding:12px 14px; font-size:12.5px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word; color:#bfe6d6}
.terminal-log .t-cmd{color:#eaf6ff}
.terminal-log .t-err{color:var(--hot)}
.terminal-log .t-ok{color:var(--good)}
.terminal-log .t-prompt{color:var(--neon)}
.terminal-input-row{display:flex; align-items:center; gap:8px; padding:8px 14px;
  border-top:1px solid rgba(55,224,255,.18); background:rgba(2,8,16,.9)}
.terminal-input-row .t-ps{color:var(--good); font-size:12.5px; flex:none}
.terminal-input{flex:1; background:transparent; border:none; outline:none; color:#eaf6ff;
  font-family:inherit; font-size:12.5px}

/* ---- nav + palette ---- */
.exam-nav{display:flex; justify-content:space-between; gap:14px; margin-top:20px}
.palette{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px;
  padding-top:18px; border-top:1px solid rgba(55,224,255,.15)}
.palette .pal-label{width:100%; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#7f9fb6; margin-bottom:2px}
.pal-btn{width:38px; height:38px; padding:0; text-align:center; font-size:12px; border-radius:8px}
.pal-btn.answered{border-color:var(--good); color:var(--good); background:rgba(46,255,160,.1)}
.pal-btn.current{border-color:var(--neon); background:var(--neon); color:#04141a; font-weight:700}

/* ---- results ---- */
.result-verdict{font-size:46px; font-weight:800; letter-spacing:.04em; text-align:center; margin:6px 0}
.result-verdict.pass{color:var(--good); text-shadow:0 0 24px rgba(46,255,160,.5)}
.result-verdict.fail{color:var(--hot); text-shadow:0 0 24px rgba(255,42,77,.5)}
.result-score{font-size:30px; text-align:center; color:#fff; margin-bottom:4px}
.result-points{text-align:center; color:#9fc2da; font-size:13px; margin-bottom:22px}
.sec-bar{margin:12px 0}
.sec-bar .sec-head{display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; color:#cfe8f6}
.sec-bar .sec-head .sec-pct{color:#9fc2da}
.sec-track{height:12px; border:1px solid var(--edge); border-radius:7px; overflow:hidden; background:rgba(0,0,0,.5)}
.sec-fill{height:100%; width:0; border-radius:6px; transition:width .6s ease;
  background:linear-gradient(90deg,var(--good),var(--neon))}
.sec-fill.weak{background:linear-gradient(90deg,var(--hot),var(--gold))}
.sec-strengthen{font-size:11px; color:var(--gold); text-decoration:none; letter-spacing:.04em; margin-left:8px}
.sec-strengthen:hover{text-decoration:underline}

/* ---- error / loading ---- */
.center-wrap{display:flex; min-height:60vh; align-items:center; justify-content:center}
.loading{color:#8fb0c8; font-size:13px; letter-spacing:.1em; text-align:center}

/* ---- toast ---- */
#toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60;
  background:rgba(3,8,16,.95); border:1px solid var(--edge); color:#eaf6ff; padding:11px 18px;
  border-radius:10px; font-size:12.5px; letter-spacing:.04em; opacity:0; transition:.3s;
  max-width:90vw; text-align:center; pointer-events:none}
#toast.show{opacity:1}

/* ---- certificate card + public verify ---- */
.cert-card{max-width:560px; margin:6vh auto; text-align:center;
  border-color:var(--gold); box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 40px rgba(255,206,74,.12)}
.cert-seal{font-size:12px; letter-spacing:.32em; color:var(--gold); margin-bottom:14px}
.cert-kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8fb0c8; margin:8px 0 2px}
.cert-name{font-size:26px; color:#fff; font-weight:700; text-shadow:0 0 18px rgba(55,224,255,.35)}
.cert-title{font-size:18px; color:var(--neon); margin-top:4px}
.cert-id{margin:16px 0; font-family:ui-monospace,Menlo,monospace; font-size:14px;
  letter-spacing:.12em; color:var(--gold); border:1px dashed rgba(255,206,74,.4);
  border-radius:8px; padding:8px 12px; display:inline-block}
.cert-verify{margin-top:6px}
.cert-meta{margin-top:18px; text-align:left; display:grid; gap:8px}
.cert-meta div{display:flex; justify-content:space-between; font-size:13px;
  border-bottom:1px solid rgba(55,224,255,.12); padding-bottom:6px}
.cert-meta span{color:#8fb0c8} .cert-meta b{color:#eaf6ff}

/* cert share actions (Phase 2: PDF / badge / LinkedIn) */
.cert-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.cert-actions a{flex:1; min-width:140px; text-align:center; text-decoration:none; padding:11px 14px;
  border-radius:10px; font-weight:600; font-size:14px}
.cert-actions a.ghost{background:transparent; border:1px solid var(--edge); color:var(--neon)}
.cert-actions a.ghost:hover{border-color:var(--neon); background:rgba(55,224,255,.08)}
.price-tag{color:var(--gold); font-weight:700; letter-spacing:.02em}