:root{
  --navy:#001B3D; --gold:#D4AF37; --blue:#4A6FA5; --gray:#F2F2F2;
  --ink:#1b1f24; --muted:#5b6470; --line:#d9dde3; --ok:#1e7a46; --warn:#b26a00; --bad:#b3261e;
  --paper:#ffffff; --hl:#fff4c2;
  --top-h:60px; --nav-h:64px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--gray);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* top bar */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top-h);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:12px;z-index:20}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--gold);color:var(--navy);font-weight:bold;display:grid;place-items:center;font-size:18px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.brand-text small{color:#c9d3e3;font-size:12px}
.top-mid{font-weight:bold;font-size:15px;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-right{display:flex;align-items:center;gap:14px}
.cand{font-size:13px;color:#c9d3e3;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timer{font-variant-numeric:tabular-nums;font-weight:bold;background:rgba(255,255,255,.12);padding:6px 10px;border-radius:6px;font-size:15px;min-width:74px;text-align:center}
.timer.low{background:var(--gold);color:var(--navy)}
.timer.critical{background:var(--bad);color:#fff}
.vol{display:flex;align-items:center;gap:6px;color:#c9d3e3}
.vol input{width:80px;accent-color:var(--gold)}

main{padding:calc(var(--top-h) + 16px) 16px calc(var(--nav-h) + 24px);min-height:100%;outline:none}
main.no-nav{padding-bottom:32px}

/* generic cards */
.card{background:var(--paper);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);padding:24px;max-width:860px;margin:0 auto 16px}
.card h1{font-size:26px;margin:0 0 8px;color:var(--navy)}
.card h2{font-size:21px;margin:0 0 10px;color:var(--navy)}
.lead{color:var(--muted);margin-top:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:12px 22px;font-weight:bold;background:var(--navy);color:#fff;min-height:46px}
.btn:hover{background:#0a2b57}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.gold:hover{background:#c49f2c}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:block;margin:16px 0}
.field label{display:block;font-weight:bold;margin-bottom:6px}
.field input{width:100%;max-width:420px;padding:12px;border:1.5px solid var(--line);border-radius:8px;font-size:16px}
.sections{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.sec{border:1px solid var(--line);border-radius:10px;padding:14px;background:#fbfcfd}
.sec b{display:block;color:var(--navy)}
.sec span{color:var(--muted);font-size:14px}
.rules{padding-left:20px}
.rules li{margin:6px 0}
.notice{background:#eef3fa;border-left:4px solid var(--blue);padding:12px 14px;border-radius:6px;margin:14px 0}
.notice.warn{background:#fff7e0;border-color:var(--gold)}

/* phase banner (listening) */
.phase{position:sticky;box-shadow:0 4px 10px rgba(0,0,0,.15);top:calc(var(--top-h) + 8px);z-index:5;max-width:1100px;margin:0 auto 14px;background:var(--navy);color:#fff;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.phase .ph-label{font-weight:bold}
.phase .ph-sub{color:#c9d3e3;font-size:14px}
.phase .ph-count{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:bold;background:var(--gold);color:var(--navy);padding:4px 10px;border-radius:6px}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:4px;background:var(--gold);animation:eq 1s infinite ease-in-out}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none;height:10px}}

/* question area */
.qwrap{max-width:1100px;margin:0 auto}
.part-head{background:#fff;border-radius:10px;padding:14px 18px;margin-bottom:14px;border-left:5px solid var(--gold)}
.part-head h2{margin:0;font-size:18px;color:var(--navy)}
.part-head p{margin:4px 0 0;color:var(--muted)}
.group{background:#fff;border-radius:10px;padding:18px;margin-bottom:14px}
.group .gi{margin:0 0 6px;font-weight:bold;color:var(--navy);font-size:15px}
.group .instr{margin:0 0 14px}
.form-card h4,.summary h4{margin:0 0 10px;color:var(--navy)}
.form-table{border-collapse:collapse;width:100%}
.form-table td{border:1px solid var(--line);padding:9px 10px;vertical-align:middle}
.form-table td:first-child{width:38%;background:#f7f9fb;font-weight:bold;font-size:15px}
.summary p{line-height:2.4}
.gap{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.qnum{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:5px;background:var(--navy);color:#fff;font-size:12px;font-weight:bold;padding:0 4px}
.gap input{width:150px;max-width:44vw;padding:6px 8px;border:1.5px solid #9aa4b1;border-radius:6px;font-size:16px;background:#fff}
.gap input:focus{border-color:var(--blue);background:#f6f9ff}
.sa-list{padding-left:0;list-style:none;margin:0}
.sa-list li{margin:0 0 14px}
.choice-q{margin:0 0 18px}
.choice-q .stem{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.opts{display:grid;gap:6px;padding-left:32px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;background:#fff}
.opt:hover{border-color:var(--blue)}
.opt input{margin-top:4px;accent-color:var(--navy);width:18px;height:18px;flex:none}
.opt.sel{border-color:var(--navy);background:#eef3fa}
.opt .ol{font-weight:bold;min-width:18px}
.tfng .opts{grid-template-columns:repeat(3,minmax(0,1fr));}
.sel-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef0f3}
.sel-row:last-child{border-bottom:0}
.sel-row .sp{flex:1}
.sel-row select{padding:8px 10px;border:1.5px solid #9aa4b1;border-radius:6px;font-size:16px;background:#fff;min-width:90px;max-width:62vw}
.map-img{display:block;width:100%;max-width:560px;margin:0 auto 14px;border:1px solid var(--line);border-radius:8px;background:#fff}
.headings-box{border:1.5px solid var(--navy);border-radius:8px;padding:12px 14px;margin-bottom:14px;background:#fbfcfd}
.headings-box h4{margin:0 0 6px;color:var(--navy)}
.headings-box ul{list-style:none;padding:0;margin:0}
.headings-box li{padding:3px 0}
.q-anchor{scroll-margin-top:calc(var(--top-h) + 90px)}
.flash{animation:flash 1.2s}
@keyframes flash{0%{background:var(--hl)}100%{background:transparent}}

/* split view (reading & writing) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:calc(100vh - var(--top-h) - var(--nav-h) - 90px);max-width:1400px;margin:0 auto}
.pane{background:#fff;border-radius:10px;overflow:auto;padding:20px;-webkit-overflow-scrolling:touch}
.pane.q-pane{background:var(--gray);padding:0}
.passage h2{margin:0 0 4px;color:var(--navy);font-size:20px}
.passage .pmeta{color:var(--muted);font-size:14px;margin:0 0 14px}
.passage p{margin:0 0 14px;line-height:1.7}
.passage .pl{font-weight:bold;color:var(--navy);margin-right:6px}
.tabs{display:none}
.ptabs{display:flex;gap:8px;max-width:1400px;margin:0 auto 10px}
.ptab{border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:8px;padding:8px 14px;font-weight:bold}
.ptab.on{background:var(--navy);color:#fff}

/* writing */
.task-box{border:1.5px solid var(--ink);padding:12px 14px;margin:10px 0;border-radius:4px}
.w-pane{display:flex;flex-direction:column;background:#fff}
.w-pane textarea{flex:1;width:100%;min-height:280px;border:1.5px solid #9aa4b1;border-radius:8px;padding:14px;font:16px/1.7 Arial,Helvetica,sans-serif;resize:none}
.w-pane textarea:focus{border-color:var(--blue);outline:none}
.wbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px;color:var(--muted);font-size:14px;gap:10px;flex-wrap:wrap}
.wc{font-weight:bold;color:var(--ink)}
.wc.under{color:var(--warn)}
.chart-img{display:block;width:100%;max-width:600px;margin:10px auto}

/* bottom nav */
.navbar{position:fixed;left:0;right:0;bottom:0;min-height:var(--nav-h);background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px 16px;z-index:20}
.palette{display:flex;gap:4px;flex:1;overflow-x:auto;padding:4px 0;scrollbar-width:thin}
.pal-group{display:flex;gap:4px;align-items:center;padding-right:10px;margin-right:6px;border-right:1px solid var(--line)}
.pal-group:last-child{border-right:0}
.pal-group .pg-l{font-size:12px;font-weight:bold;color:var(--muted);margin-right:4px;white-space:nowrap}
.pal{width:32px;height:32px;border-radius:6px;border:1.5px solid #9aa4b1;background:#fff;font-size:13px;font-weight:bold;color:var(--ink);flex:none;padding:0}
.pal.done{background:var(--navy);border-color:var(--navy);color:#fff}
.nav-actions{display:flex;gap:8px;flex:none}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,10,30,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal-card{background:#fff;border-radius:12px;max-width:480px;width:100%;padding:22px}
.modal-card h3{margin:0 0 8px;color:var(--navy)}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}

/* done */
.progress{height:10px;background:#e6e9ee;border-radius:6px;overflow:hidden;margin:12px 0}
.progress i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}
.big-check{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:34px;margin-bottom:10px}

/* mobile */
@media (max-width:900px){
  :root{--top-h:56px}
  .brand-text small{display:none}
  .cand{display:none}
  .sections{grid-template-columns:1fr}
  .split{display:block;height:auto}
  .pane{overflow:visible;margin-bottom:12px}
  .split.show-q .p-pane{display:none}
  .split.show-p .q-pane{display:none}
  .tabs{display:flex;position:sticky;top:calc(var(--top-h) + 4px);z-index:6;gap:6px;margin:0 0 10px;background:var(--gray);padding:4px 0}
  .tabs button{flex:1;border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:8px;padding:10px;font-weight:bold}
  .tabs button.on{background:var(--navy);color:#fff}
  .w-pane textarea{min-height:55vh}
  .tfng .opts{grid-template-columns:1fr}
  .opts{padding-left:0}
  .form-table td:first-child{width:42%;font-size:14px}
  .vol input{width:60px}
  .top-mid{font-size:13px}
  .nav-actions .btn{padding:10px 14px}
}
@media (max-width:520px){
  .brand-text{display:none}
  .card{padding:18px}
  .card h1{font-size:22px}
}
.wpal{white-space:nowrap}
@media (max-width:520px){.wpc{display:none}.palette .wpal{padding:6px 10px!important}}