/* 駕駛艙固定是暗色:座艙照明本來就壓低,亮色主題在這裡沒有意義。 */
:root {
  color-scheme: dark;
  --bg: #07090c; --panel: #0d1117; --mfd: #050807; --line: #1f2a24; --ink: #d9e6df; --dim: #7d8f86;
  --hud: #7cffb2; --amber: #ffb547; --red: #ff5a52; --cyan: #6fd3ff; --frame: #111418; --frame-edge: #2a3036;
  --sel: #ffe066;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 14px/1.45 "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; overflow: hidden; }
button { font: inherit; color: var(--ink); background: #18211c; border: 1px solid #2c3a32; border-radius: 6px;
  padding: 5px 10px; cursor: pointer; }
button:hover { border-color: var(--hud); }
button.on, button.tog.on { background: #14402a; border-color: var(--hud); color: var(--hud); }
button.warn { background: #3a1a12; border-color: var(--amber); color: var(--amber); }
button.ghost { background: transparent; }
.dim { color: var(--dim); }
.err { color: var(--red); margin-top: 10px; white-space: pre-wrap; }

#app { display: grid; grid-template-rows: 64vh 36vh; height: 100vh; }
#view { position: relative; overflow: hidden; background: #000; }
#gl, #hud, #frame, #plasma, #flame { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud { pointer-events: none; }
#frame { pointer-events: none; }
#plasma { pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, rgba(255,120,60,.55) 70%, rgba(255,70,160,.8) 100%); }
#flame { pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(to top, rgba(255,170,80,.45), transparent 40%); }
#orbitCtl { position: absolute; right: 14px; top: 40px; display: flex; flex-direction: column; gap: 6px; }
#orbitCtl button { min-width: 44px; background: rgba(13,17,23,.8); }
#orbitCtl #zIn, #orbitCtl #zOut { font-size: 18px; line-height: 1; padding: 6px 0; }
#gl { touch-action: none; }
.gcard { position: absolute; right: 70px; bottom: 18px; width: min(520px, 46%); max-height: 86%; overflow-y: auto;
  background: rgba(8,14,12,.94); border: 1px solid var(--hud); border-radius: 12px; padding: 14px 18px; z-index: 5;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); font-size: 13.5px; }
.gcard h3, .lessons h3 { margin: 0 0 8px; color: var(--hud); font-size: 17px; }
.gcard ul, .lessons ul { padding-left: 20px; margin: 6px 0; }
.gcard li, .lessons li { margin: 3px 0; }
.gcard .row, .lessons .row { padding: 8px 0 0; border-top: 0; }
.gbar { display: grid; grid-template-columns: 6em 1fr 6em; align-items: center; gap: 8px; margin: 3px 0; font-size: 12.5px; }
.gbar i { display: block; height: 10px; border-radius: 3px; }
.gbar b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.lessons { max-width: 1060px; }
.lhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.langsel { color: var(--dim); font-size: 13px; }
.card a, .gcard a { color: var(--cyan); }
.ghostlink { font-size: 13px; margin-right: 6px; }
.langsel select { font: inherit; color: var(--ink); background: #18211c; border: 1px solid #2c3a32; border-radius: 6px; padding: 4px 8px; }
.lgrid { display: grid; grid-template-columns: 250px 1fr; gap: 18px; margin-top: 8px; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tabs button { text-align: left; }
.trow { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.trow input[type=range] { width: 200px; vertical-align: middle; accent-color: var(--hud); }
.strip { display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px; margin-top: 6px; }
.strip i, .legend i { display: block; height: 16px; border-radius: 2px; }
.legend i { display: inline-block; width: 14px; height: 10px; margin: 0 4px 0 10px; vertical-align: middle; }
.strip i.both, .legend i.both { background: #2fbf71; } .strip i.arr, .legend i.arr { background: #e0a84a; }
.strip i.dep, .legend i.dep { background: #4a7bd0; } .strip i.none, .legend i.none { background: #2a3036; }
.strip i.cur { outline: 2px solid #fff; outline-offset: 1px; }
.strip-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.legend { font-size: 12px; color: var(--dim); }
@media (max-width: 760px) { .lgrid { grid-template-columns: 1fr; } .gcard { width: 92%; right: 4%; } }
#badge { position: absolute; right: 14px; top: 10px; font-size: 12px; color: var(--dim); background: rgba(0,0,0,.5);
  padding: 2px 8px; border-radius: 10px; }
#caution { position: absolute; left: 70px; top: 76px; padding: 6px 16px; border-radius: 6px;
  background: rgba(60,10,6,.85); border: 1px solid var(--red); color: #ffd6d2; font-weight: 600; letter-spacing: .04em;
  animation: blink 1s steps(2) infinite; }
#caution.amber { background: rgba(60,40,6,.85); border-color: var(--amber); color: #ffe7c2; }
@keyframes blink { 50% { opacity: .55; } }

#panel { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 8px; padding: 8px; background: var(--panel);
  border-top: 2px solid #1a1f24; min-height: 0; }
.mfd { background: var(--mfd); border: 2px solid #1c2420; border-radius: 10px; display: flex; flex-direction: column;
  min-height: 0; box-shadow: inset 0 0 18px rgba(124,255,178,.05); }
.mfd header { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 12px; color: var(--hud);
  border-bottom: 1px solid var(--line); letter-spacing: .05em; }
#map { flex: 1; width: 100%; min-height: 0; cursor: crosshair; }
.list { flex: 1; overflow-y: auto; font-size: 13px; }
.list table { width: 100%; border-collapse: collapse; }
.list td, .list th { padding: 3px 6px; text-align: left; white-space: nowrap; }
.list th { color: var(--dim); font-weight: 400; font-size: 11px; position: sticky; top: 0; background: var(--mfd); }
.list tr.alt { cursor: pointer; }
.list tr.alt:hover { background: #10201a; }
.list tr.sel { background: #2a2a10; color: var(--sel); }
.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ok { color: var(--hud); } .bad { color: var(--red); } .amb { color: var(--amber); }
.row { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row .sp { flex: 1; }
.row button { padding: 4px 8px; }
.warp { padding: 4px 6px !important; }
.warp.on { color: var(--hud); border-color: var(--hud); }
#sys { padding: 6px 10px; font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: center; }
#sys .bar { height: 8px; background: #16201b; border-radius: 4px; overflow: hidden; position: relative; }
#sys .bar i { position: absolute; inset: 0 auto 0 0; background: var(--hud); }
#sys .bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--red); }
.eng { display: inline-block; padding: 0 6px; border-radius: 4px; margin-right: 4px; font-size: 12px; border: 1px solid; }
.log { flex: 1; overflow-y: auto; font-size: 12px; color: var(--dim); padding: 4px 10px; border-top: 1px solid var(--line); }
.log div b { color: var(--ink); font-weight: 400; }

.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2,4,6,.82); z-index: 10; padding: 16px; }
.overlay.modal { background: rgba(2,4,6,.45); }
.card { max-width: 860px; width: 100%; max-height: 92vh; overflow-y: auto; background: #0b1110; border: 1px solid #22322a;
  border-radius: 14px; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.card h1 { margin: 0 0 6px; font-size: 26px; color: var(--hud); }
.card h2 { margin: 16px 0 8px; font-size: 18px; }
.card .lead { color: #c3d3cb; }
.card .fine { color: var(--dim); font-size: 12px; margin-top: 16px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.choices button { text-align: left; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.choices button b { font-size: 15px; color: var(--hud); }
.choices button span { color: #b4c4bc; font-size: 13px; }
.choices button.rec { border-color: var(--hud); }
.choices button.rec b::after { content: "  建議"; font-size: 11px; color: var(--dim); }
.keys td { padding: 2px 10px 2px 0; } .keys td:first-child { color: var(--hud); }
details summary { cursor: pointer; color: var(--dim); margin-top: 12px; }
.timer { height: 6px; background: #1a2420; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.timer i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: left; }
.pred { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.pred td, .pred th { padding: 4px 8px; border-bottom: 1px solid #1c2823; text-align: left; }
.pred th { color: var(--dim); font-weight: 400; }
.pred td.num { text-align: right; font-variant-numeric: tabular-nums; }
#decide .card { border-color: var(--amber); }
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.res div { background: #0f1815; border-radius: 8px; padding: 8px 10px; }
.res div small { display: block; color: var(--dim); font-size: 11px; }
.res div b { font-size: 18px; font-variant-numeric: tabular-nums; }