*{box-sizing:border-box}body{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;background:#0c2d48;color:#1f2937;overflow:hidden}
#topbar{position:fixed;top:0;left:0;right:0;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:6px 14px;background:rgba(15,23,42,.9);backdrop-filter:blur(8px);color:#fff;z-index:20;gap:6px;flex-wrap:wrap}
.brand{font-weight:800;font-size:19px;letter-spacing:1px}nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
button{font:inherit;border:0;border-radius:10px;padding:7px 12px;background:#e2e8f0;cursor:pointer}button:hover{filter:brightness(1.08)}
nav button{background:rgba(255,255,255,.14);color:#fff}nav .primary{background:linear-gradient(135deg,#f59e0b,#ef4444);font-weight:800;box-shadow:0 0 14px #f59e0b88}
.badge{font-size:12px;background:#0ea5e9;padding:5px 10px;border-radius:20px}
#scene{position:fixed;inset:0}#labels{position:fixed;inset:0;pointer-events:none;z-index:5}
.lbl{position:absolute;transform:translate(-50%,-100%);background:rgba(255,255,255,.9);padding:3px 8px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:auto;cursor:pointer;border-left:4px solid var(--c)}
.lbl.hub{background:#fde68a;font-size:14px}
#dir{position:fixed;left:10px;top:66px;bottom:44px;width:250px;background:rgba(255,255,255,.93);border-radius:14px;padding:10px;z-index:10;display:flex;flex-direction:column;gap:6px}
#dir input,#dir select{padding:7px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}#islandList{list-style:none;margin:0;padding:0;overflow:auto}
#islandList li{padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;border-left:5px solid var(--c);margin-bottom:4px;background:#f8fafc}#islandList li:hover{background:#e0f2fe}
#islandList small{color:#64748b;display:block}
#panel{position:fixed;right:10px;top:66px;bottom:44px;width:min(520px,94vw);background:#fff;border-radius:14px;z-index:25;display:flex;flex-direction:column;box-shadow:0 10px 40px #0006;overflow:hidden}
.panel-top{position:sticky;top:0;background:#fff;z-index:5;border-bottom:1px solid #e2e8f0;padding-bottom:8px;position:relative}
#panelHead{padding:14px 136px 6px 16px}#panelHead h2{margin:0 0 4px;font-size:20px}.tabs{display:flex;gap:4px;padding:0 12px;flex-wrap:wrap}.tabs button.on{background:#0ea5e9;color:#fff}
#panelBody{overflow:auto;padding:12px 16px;font-size:14px;line-height:1.7;flex:1}
.panel-foot{padding:8px 14px;border-top:1px solid #e2e8f0;background:#f8fafc}
.back-arch-btn{width:100%;padding:10px 14px;font-weight:800;font-size:15px;border-radius:999px;background:linear-gradient(135deg,#0284c7,#0ea5e9);color:#fff;box-shadow:0 4px 12px rgba(14,165,233,.35)}
.hidden{display:none!important}
.close{position:absolute;right:10px;top:10px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(15,23,42,.3);z-index:10;display:inline-flex;align-items:center;gap:4px}
.close:hover{background:linear-gradient(135deg,#ef4444,#dc2626)}
#modal{position:fixed;inset:0;background:#0009;z-index:35;display:flex;align-items:center;justify-content:center}
.mbox{position:relative;background:#fff;border-radius:16px;width:min(980px,96vw);max-height:90vh;overflow:auto;padding:20px}
.modal-top{position:sticky;top:-20px;display:flex;justify-content:flex-end;z-index:10;margin:-10px -6px 6px 0;pointer-events:none}
.modal-top .close{position:static;pointer-events:auto}
h3{margin:12px 0 6px;color:#0369a1}table{border-collapse:collapse;width:100%}td,th{border:1px solid #e2e8f0;padding:5px;vertical-align:top}
textarea{width:100%;min-height:80px;font:inherit;padding:6px;border:1px solid #cbd5e1;border-radius:8px}
.task{background:#f8fafc;border-radius:10px;padding:8px;margin:8px 0}.tag{display:inline-block;font-size:11px;background:#e0e7ff;color:#3730a3;padding:2px 7px;border-radius:10px;margin-right:4px}
.npc{background:#fef3c7;border-radius:10px;padding:6px 10px;margin:4px 0;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chips button.on{background:#f59e0b;color:#fff}
.opt{display:block;width:100%;text-align:left;margin:6px 0;padding:10px;background:#f1f5f9}.opt.sel{background:#bae6fd;outline:2px solid #0284c7}
.bar{height:10px;background:#e2e8f0;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(135deg,#22c55e,#0ea5e9)}
.score{font-size:46px;font-weight:900;color:#ef4444}.ok{border-left:5px solid #22c55e}.ng{border-left:5px solid #ef4444}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.card{background:#f8fafc;border-radius:12px;padding:10px;border-top:5px solid var(--c)}
video{width:100%;max-height:60vh;background:#000;border-radius:12px}
footer{position:fixed;bottom:0;left:0;right:0;height:34px;line-height:34px;text-align:center;background:rgba(15,23,42,.85);color:#e2e8f0;font-size:13px;z-index:20}footer a{color:#7dd3fc}
@media(max-width:800px){
  #topbar{padding:6px 10px}
  .brand{font-size:14px;width:100%}
  nav button{padding:5px 8px;font-size:12px}
  .badge{font-size:11px;padding:3px 8px}
  #dir{top:auto;bottom:38px;height:26vh;width:auto;left:8px;right:8px;padding:8px}
  body.panel-open #dir{display:none!important}
  #panel{left:8px;right:8px;width:auto;top:92px;bottom:40px;z-index:25}
  #panelHead{padding:12px 132px 6px 12px}
  #panelHead h2{font-size:17px}
  .tabs button{padding:6px 8px;font-size:12px;flex:1}
}
@media print{body{overflow:visible}#topbar,#dir,#scene,#labels,footer{display:none}}