/* AI 特勤局 V3，純靜態、無框架依賴，支援手機、鍵盤及減少動態效果。 */
:root{
  color-scheme:dark;
  --bg:#090f22;--panel:#141f3b;--panel2:#1a2b4b;--edge:#314469;
  --ink:#f3f8ff;--muted:#a8b9d4;--aqua:#6be5ee;--gold:#f9ce72;
  --good:#82e8b3;--danger:#ff9b9b;--button:#3a67e4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 22% 0%,#203d65 0,transparent 33rem),
  radial-gradient(circle at 90% 50%,#1a2550 0,transparent 40rem),var(--bg);
  font-family:system-ui,-apple-system,"Microsoft JhengHei","Noto Sans TC",sans-serif;color:var(--ink);line-height:1.6}
a{color:var(--aqua)}button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.48}
.topbar{padding:1rem max(1rem,calc((100vw - 1160px)/2));display:flex;align-items:center;
  justify-content:space-between;gap:1rem;background:#0b1328ed;border-bottom:1px solid #314469;
  position:relative;z-index:2}
.brand-name{font-weight:900;color:var(--ink);font-size:1.12rem;text-decoration:none;letter-spacing:.03em}
.brand-caption{display:block;color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.top-links{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.top-links a,.top-links button{border:1px solid #415577;border-radius:999px;padding:.45rem .9rem;
  color:var(--ink);background:#192742;text-decoration:none;font-size:.83rem;min-height:42px}
.top-links a:hover,.top-links button:hover{border-color:var(--aqua)}
.layout{max-width:1180px;margin:0 auto;padding:1.5rem 1rem 5rem;display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.3rem}
.sidebar{position:sticky;top:1.2rem;align-self:start;background:#101a33c9;border:1px solid var(--edge);
  border-radius:22px;padding:1rem}
.side-title{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--aqua);font-weight:800;margin:.2rem 0 .7rem}
.status{font-size:.8rem;color:var(--muted);margin:.2rem 0 1rem}
.district-list{display:grid;gap:.55rem}
.district{display:flex;align-items:center;gap:.55rem;padding:.8rem .65rem;border:1px solid #2d3d59;
  border-radius:12px;background:#141e34;color:#8e9fb9;font-size:.83rem}
.district-icon{font-size:1.25rem}
.district-name{flex:1}
.district-state{font-weight:900}
.district.done{background:#102d36;color:var(--good);border-color:#225d61}
.district.current{color:var(--ink);border:1px solid #74dce8;background:#1e3452;box-shadow:0 0 0 2px #47d7ef1c}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem}
.stat{border-radius:10px;background:#21314d;padding:.6rem .35rem;text-align:center}
.stat-label{font-size:.69rem;color:#aebed4;white-space:nowrap}
.stat-value{font-size:1.4rem;font-weight:900;color:#fff;display:block;line-height:1.3}
.progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin:1.1rem 0 .35rem}
.progress-track{height:9px;background:#263b59;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#42b5d3,#78f0a5);transition:width .2s;width:0}
#screen{min-width:0}
.hero-panel,.mission-card,.summary-card{border-radius:25px;border:1px solid #405377;
  background:linear-gradient(160deg,#1d2d50f8,#101c36f9);padding:clamp(1.15rem,4vw,2.6rem);
  box-shadow:0 23px 70px #0004}
.hero-panel{min-height:500px;background:radial-gradient(circle at 90% 10%,#22687570,transparent 18rem),
  radial-gradient(circle at 15% 80%,#4441967a,transparent 19rem),
  linear-gradient(150deg,#1c3457,#111b33)}
.hero-kicker,.eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:900;color:var(--aqua)}
.hero-title{font-size:clamp(2.5rem,7vw,5rem);line-height:1.07;margin:1rem 0 1.2rem;
  letter-spacing:.035em;text-shadow:0 8px 32px #0af2}
.hero-copy{max-width:620px;font-size:1.12rem;color:#d4e4f7}
.hero-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:2rem 0}
.feature{border:1px solid #5c789c67;background:#ffffff10;padding:.9rem;border-radius:12px;font-weight:700}
.action-row{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.3rem}
.action-row.align-end{justify-content:space-between}
.action-row.center{justify-content:center}
.btn{border-radius:12px;border:1px solid #5a7297;padding:.7rem 1.2rem;min-height:48px;font-weight:800;white-space:normal}
.btn.primary{color:#061b31;background:linear-gradient(120deg,#75e8f2,#90c4ff);border:0}
.btn.primary:hover:not(:disabled){filter:brightness(1.1)}
.btn.secondary{color:#e1edff;background:#253656}
.btn.secondary:hover:not(:disabled){background:#355074}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.full{width:100%;margin-top:1.25rem}
.muted,.intro-foot{color:var(--muted);font-size:.84rem}
.intro-foot{margin-top:1.5rem}
.record-strip{margin:1rem 0;border:1px solid var(--edge);border-radius:14px;
  padding:1rem;background:#101b33;font-size:.86rem;color:#c2d6ee}
.source-details{margin-top:1.4rem;border:1px solid #334a6c;border-radius:16px;background:#111d33;padding:1rem 1.3rem}
.source-details summary{cursor:pointer;color:#e3f1ff;font-weight:800}
.source-list{line-height:1.9;padding-left:1.25rem}
.mission-title{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.2;margin:1.1rem 0 1.3rem}
.lead-text{color:#bfcfe6;max-width:650px;margin:.5rem 0 1.4rem}
.story-box{padding:1.1rem 1.25rem;border-left:4px solid #64dbed;background:#0c192e;border-radius:10px;margin-bottom:1.5rem}
.story-tag{font-size:.78rem;font-weight:900;color:var(--aqua)}
.story-text{font-size:1.05rem;margin:.55rem 0 0;white-space:pre-line}
.editor{display:grid;gap:.95rem}
.option-group{border:1px solid var(--edge);border-radius:15px;padding:.95rem;min-width:0;display:grid;gap:.65rem}
.group-label{color:var(--gold);font-weight:900;font-size:.85rem;padding:0 .35rem}
.option-card{display:block;width:100%;min-height:60px;border:1px solid #4b5e7d;
  border-radius:11px;background:#233451;color:var(--ink);padding:.85rem 1rem;
  text-align:left;line-height:1.5;transition:border-color .12s,background .12s}
.option-card:hover:not(:disabled){border-color:#7bdfea;background:#2d4569}
.option-card.selected,.option-card.selected:disabled{background:#1b5163;border:2px solid var(--aqua);color:#fff;opacity:1}
.option-card:disabled:not(.selected){opacity:.6}
.prompt-preview{padding:1rem;background:#0a1730;border:1px dashed #7898be;border-radius:12px}
.preview-label{font-size:.92rem;color:var(--aqua);margin:0 0 .7rem}
.preview-body{white-space:pre-line;margin:0;color:#d7ebfc;font-size:.9rem;line-height:1.8}
.footnote{margin:1.1rem 0 0}
.hint{padding:.8rem 1rem;border:1px solid #886a32;border-radius:10px;color:#ffe6aa;background:#3b2c1f}
.feedback{padding:1.1rem 1.25rem;border:1px solid #476a76;border-radius:15px;margin:1.6rem 0 .3rem;
  background:#102f35}
.feedback.warning{background:#382733;border-color:#795064}
.feedback-title{font-size:1.2rem;margin:0 0 .4rem}
.feedback .reward{font-weight:900;color:var(--gold)}
.feedback .answer{font-weight:700}
.feedback .explanation{color:#d3e1f2;line-height:1.75}
.feedback .concept{padding-top:.6rem;border-top:1px solid #ffffff27;font-size:.85rem;color:#bfeaff}
.summary-card{text-align:center}
.summary-icon{font-size:4rem;margin-bottom:.6rem}
.summary-title{font-size:clamp(1.8rem,5vw,3rem);margin:0 0 1rem}
.summary-score{font-size:clamp(2.5rem,7vw,4.6rem);font-weight:950;line-height:1.2;color:var(--gold);margin:1rem 0}
.rank{font-size:1.2rem;color:var(--aqua)}
.review-board{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;text-align:left;margin:2rem 0}
.review-cell{padding:.9rem;background:#101e36;border:1px solid #3a5274;border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.84rem}
.review-cell strong{color:var(--gold);white-space:nowrap}
footer{padding:2rem 1rem;text-align:center;color:var(--muted);border-top:1px solid #2f3e59;font-size:.79rem}
@media(max-width:900px){
 .layout{grid-template-columns:1fr;gap:.8rem}
 .sidebar{position:static}
 .district-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .district{font-size:.73rem;padding:.65rem .45rem;flex-wrap:wrap}
 .district-name{min-width:0}
 .hud{max-width:500px}
}
@media(max-width:560px){
 .topbar{padding:.65rem .85rem}
 .brand-name{font-size:.9rem}
 .top-links{gap:.3rem}
 .top-links a,.top-links button{font-size:.74rem;padding:.35rem .6rem}
 .layout{padding:.8rem .65rem 3rem}
 .sidebar{padding:.65rem}
 .district-list{display:grid;grid-template-columns:repeat(6,1fr);gap:.32rem}
 .district{padding:.4rem .1rem;display:flex;flex-direction:column;justify-content:center;gap:.1rem;text-align:center}
 .district-name{font-size:0}
 .district-icon{font-size:1.2rem}
 .district-state{line-height:1;font-size:.75rem}
 .stat{padding:.35rem}
 .stat-value{font-size:1rem}
 .stat-label{font-size:.63rem}
 .status{margin-bottom:.4rem}
 .hero-panel,.mission-card,.summary-card{border-radius:18px;padding:1.15rem}
 .hero-panel{min-height:0}
 .hero-features{gap:.4rem}
 .feature{padding:.65rem .5rem;font-size:.8rem}
 .btn{flex:1 1 100%;max-width:100%}
 .option-card{padding:.7rem;min-height:58px}
 .review-board{grid-template-columns:1fr}
 .action-row{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}

.glossary{display:grid;gap:.55rem;margin:1.1rem 0}
.glossary-title{font-size:1rem;color:var(--aqua);margin:.2rem 0}
.glossary-item{background:#1a2d49;border:1px solid #3b5474;border-radius:9px;padding:.55rem .8rem}
.glossary-item summary{font-weight:750;cursor:pointer}
.glossary-item p{margin:.65rem .15rem .3rem;line-height:1.7}