:root{
  --paper:#F7F8FA; --surface:#FFFFFF; --surface-2:#F0F2F6;
  --ink:#1A2238; --ink-2:#3B4664; --muted:#626E8C;
  --rule:#DCE1EA; --rule-strong:#C2CAD8;
  --flag:#B3402F; --flag-soft:#FAEAE7;
  --warn:#9A6B1E; --warn-soft:#F5EDDE;
  --ok:#1C7A66; --ok-soft:#E2F1ED;
  --shadow:0 1px 2px rgba(26,34,56,.06), 0 8px 24px -16px rgba(26,34,56,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12162A; --surface:#1A2038; --surface-2:#222945;
    --ink:#E8EBF2; --ink-2:#C3CADC; --muted:#95A0BC;
    --rule:#2C3454; --rule-strong:#3D476B;
    --flag:#E1765F; --flag-soft:#341E1B;
    --warn:#D9A94E; --warn-soft:#2E2716;
    --ok:#4FBFA4; --ok-soft:#12302A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#12162A; --surface:#1A2038; --surface-2:#222945;
  --ink:#E8EBF2; --ink-2:#C3CADC; --muted:#95A0BC;
  --rule:#2C3454; --rule-strong:#3D476B;
  --flag:#E1765F; --flag-soft:#341E1B;
  --warn:#D9A94E; --warn-soft:#2E2716;
  --ok:#4FBFA4; --ok-soft:#12302A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  font-size:16px; line-height:1.7; margin:0;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}
a{color:inherit}

/* ---------- shell ---------- */
.wrap{max-width:920px; margin:0 auto; padding:0 16px 72px}

header.top{padding:clamp(28px,6vw,52px) 0 20px; display:flex; flex-direction:column; gap:12px}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
}
.eyebrow .dot{width:3px;height:3px;border-radius:50%;background:var(--rule-strong);flex:none}
h1{font-size:clamp(28px,6vw,42px); line-height:1.15; font-weight:700; letter-spacing:-.01em; margin:0}
.lede{font-size:16px; color:var(--ink-2); margin:0; max-width:54ch}
.facts{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.fact{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px;
  border:1px solid var(--rule); border-radius:2px; padding:3px 8px;
  color:var(--ink-2); background:var(--surface);
}
.countdown{
  display:flex; align-items:baseline; gap:10px; margin-top:6px;
  padding:12px 16px; border:1px solid var(--rule); border-left:3px solid var(--flag);
  border-radius:3px; background:var(--surface); box-shadow:var(--shadow);
}
.countdown b{font-size:30px; line-height:1; font-family:"IBM Plex Mono",monospace; color:var(--flag)}
.countdown span{font-size:14px; color:var(--ink-2)}

/* ---------- tabs ---------- */
nav.tabs{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--rule); margin:0 -16px; padding:0 8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs ul{display:flex; gap:2px; list-style:none; margin:0; padding:0; min-width:max-content}
nav.tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:500; color:var(--muted);
  padding:13px 12px; border-bottom:2px solid transparent; white-space:nowrap;
}
nav.tabs button:hover{color:var(--ink-2)}
nav.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--flag); font-weight:700}
.tabcount{
  display:inline-block; margin-left:5px; font-size:11px; font-family:"IBM Plex Mono",monospace;
  background:var(--flag); color:#fff; border-radius:9px; padding:1px 6px; vertical-align:1px;
}

main{padding-top:28px}
section[hidden]{display:none !important}
.panel{display:flex; flex-direction:column; gap:18px}
h2{font-size:20px; font-weight:700; margin:8px 0 0; letter-spacing:-.01em}
h2:first-child{margin-top:0}
.sub{font-size:14.5px; color:var(--muted); margin:-10px 0 0}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--shadow); overflow:hidden;
}
.card-b{padding:16px 18px}

/* ---------- day ---------- */
.day{border-left:3px solid var(--rule-strong)}
.day.is-warn{border-left-color:var(--warn)}
.day.is-miss{border-left-color:var(--flag)}
.day-h{
  display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer;
  user-select:none;
}
.day-h:hover{background:var(--surface-2)}
.dnum{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.06em;
  color:var(--muted); flex:none; width:52px;
}
.dnum b{display:block; font-size:15px; color:var(--ink); letter-spacing:0}
.dtitle{flex:1; min-width:0}
.dtitle strong{display:block; font-size:16px; font-weight:600; line-height:1.35}
.dtitle em{
  display:block; font-style:normal; font-size:13px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.chev{flex:none; color:var(--muted); transition:transform .18s; font-size:13px}
.day[open] .chev{transform:rotate(90deg)}
.day-b{padding:14px 18px 18px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:14px}
.day-b:empty{display:none}

.pill{
  font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 7px; border-radius:2px;
  border:1px solid var(--rule); color:var(--ink-2); background:var(--surface-2); flex:none;
}
.pill.warn{color:var(--warn); border-color:var(--warn); background:var(--warn-soft)}
.pill.miss{color:var(--flag); border-color:var(--flag); background:var(--flag-soft)}
.pill.ok{color:var(--ok); border-color:var(--ok); background:var(--ok-soft)}

.blk{display:flex; flex-direction:column; gap:6px}
.blk-t{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.blk ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px}
.blk li{font-size:14.5px; color:var(--ink-2)}

.drive{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:10px 12px; border-radius:3px; background:var(--surface-2);
  font-size:14px;
}
.drive.warn{background:var(--warn-soft); border:1px solid var(--warn)}
.drive b{font-family:"IBM Plex Mono",monospace; font-size:15px}
.drive .n{color:var(--muted); font-size:13.5px; flex-basis:100%}

.note{padding:11px 14px; border-radius:3px; font-size:14px; line-height:1.6; border:1px solid}
.note.warn{background:var(--warn-soft); border-color:var(--warn); color:var(--ink)}
.note.miss{background:var(--flag-soft); border-color:var(--flag); color:var(--ink)}
.note.ok{background:var(--ok-soft); border-color:var(--ok); color:var(--ink)}

/* ---------- stay ---------- */
.stay{border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.stay-h{
  display:flex; align-items:center; gap:9px; padding:9px 13px;
  background:var(--surface-2); font-size:14.5px; font-weight:600;
}
.stay-w{padding:9px 13px; font-size:13.5px; color:var(--muted); border-bottom:1px solid var(--rule)}
.stay ul{list-style:none; margin:0; padding:0}
.stay li{padding:10px 13px; border-top:1px solid var(--rule); font-size:14px; display:flex; gap:9px; flex-wrap:wrap; align-items:baseline}
.stay li:first-child{border-top:0}
.stay li .nm{font-weight:600; color:var(--ink)}
.stay li .nt{color:var(--muted); font-size:13.5px; flex-basis:100%; margin-top:-2px}

.fixes{display:flex; flex-direction:column; gap:10px}
.fix{border:1px solid var(--rule); border-radius:3px; padding:12px 14px; background:var(--surface-2)}
.fix h4{margin:0 0 5px; font-size:15px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.fix p{margin:0; font-size:14px; color:var(--ink-2)}
.fix .st{margin-top:6px; font-size:13px; color:var(--muted)}

/* ---------- tables ---------- */
.tw{overflow-x:auto; border:1px solid var(--rule); border-radius:4px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:480px; font-size:14px}
th,td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top}
th{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--surface-2);
  white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
.num{font-family:"IBM Plex Mono",monospace; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
tr.hl td{background:var(--ok-soft)}
tr.key td{background:var(--warn-soft); font-weight:600}

/* ---------- flights ---------- */
.grp{border:1px solid var(--rule); border-radius:4px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow)}
.grp.best{border-color:var(--ok); border-width:2px}
.grp.worse{opacity:.72}
.grp-h{padding:14px 18px; border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline}
.grp-h .who{font-size:17px; font-weight:700}
.grp-h .pl{font-size:14px; color:var(--muted)}
.grp-h .tt{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:19px; font-weight:600}
.grp-h .tt small{font-size:12px; color:var(--muted); font-weight:400; margin-left:6px}
.leg{padding:12px 18px; border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.leg:last-child{border-bottom:0}
.leg .cd{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px; width:58px; flex:none}
.leg .tm{font-family:"IBM Plex Mono",monospace; font-size:14px}
.leg .dr{font-size:12.5px; color:var(--muted)}
.leg .pr{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:14px; white-space:nowrap}
.leg .tg{flex-basis:100%; font-size:13px; color:var(--muted)}

.verdict{
  border:2px solid var(--ok); background:var(--ok-soft); border-radius:4px; padding:16px 18px;
  display:flex; flex-direction:column; gap:8px;
}
.verdict .row{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; font-size:15px}
.verdict .row .v{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:600}
.verdict .save{font-size:14px; color:var(--ink-2)}

/* ---------- checklist ---------- */
.chk{list-style:none; margin:0; padding:0}
.chk li{border-top:1px solid var(--rule)}
.chk li:first-child{border-top:0}
.chk label{display:flex; gap:11px; align-items:flex-start; padding:12px 16px; cursor:pointer; font-size:14.5px}
.chk label:hover{background:var(--surface-2)}
.chk input{margin:4px 0 0; width:17px; height:17px; flex:none; accent-color:var(--flag)}
.chk input:checked ~ .tx{text-decoration:line-through; color:var(--muted)}
.chk .u{color:var(--flag); font-family:"IBM Plex Mono",monospace; font-size:11px; border:1px solid var(--flag); border-radius:2px; padding:1px 5px; flex:none; margin-top:2px}
.chk-bar{padding:11px 16px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:12px}
.chk-bar button{appearance:none;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:13.5px;text-decoration:underline}

/* ---------- tips ---------- */
.tips{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tip{border:1px solid var(--rule); border-radius:4px; background:var(--surface); padding:14px 16px}
.tip h4{margin:0 0 5px; font-size:15px; display:flex; gap:8px; align-items:center}
.tip p{margin:0; font-size:14px; color:var(--ink-2)}

.issue{display:flex; gap:12px; padding:14px 16px; border-top:1px solid var(--rule)}
.issue:first-child{border-top:0}
.issue .sv{flex:none; font-size:18px; line-height:1.4}
.issue h4{margin:0 0 3px; font-size:15px}
.issue .dy{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); display:block; margin-bottom:3px}
.issue p{margin:0; font-size:14px; color:var(--ink-2)}

footer{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px;
}
.theme-btn{
  appearance:none; background:var(--surface); border:1px solid var(--rule); border-radius:3px;
  color:var(--muted); cursor:pointer; font:inherit; font-size:12.5px; padding:3px 9px; margin-left:auto;
}

/* ---------- small utilities (replace inline styles in app.js) ---------- */
.stay-bare{border:0}
.stay-foot{border-bottom:0; border-top:1px solid var(--rule)}
.stay-date{color:var(--muted); font-size:12px}
.blk-p{margin:0; font-size:14.5px; color:var(--ink-2)}
.cell-sub{color:var(--muted); font-size:13px}
.nowrap{white-space:nowrap}
.sub-tight{margin-top:10px}
.verdict .was{color:var(--muted)}