:root{
  --bg:#0e1416; --panel:#161f22; --panel2:#1d282c; --line:#26343a;
  --teal:#00A4A7; --teal-dim:#0b6d6f; --text:#eaf2f3; --muted:#8fa3a8;
  --good:#2ecc71; --bad:#ff6b5e; --warn:#ffb648; --bus:#d4351c;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  max-width:640px; margin:0 auto; min-height:100vh;
}
header{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px}
.brand{display:flex; align-items:baseline; gap:8px}
.logo{font-weight:800; letter-spacing:1px; background:var(--teal); color:#04211f; padding:3px 8px; border-radius:7px; font-size:18px}
.sub{color:var(--muted); font-weight:600}
.status-pill{font-size:13px; font-weight:700; padding:6px 11px; border-radius:999px;
  background:var(--panel2); color:var(--muted); border:1px solid var(--line); max-width:52%; text-align:right; line-height:1.2}
.status-pill.good{color:var(--good); border-color:#1f5f3e}
.status-pill.bad{color:var(--bad); border-color:#7a2f2a; background:#26181a}

main{padding:6px 14px 24px}
.primary{width:100%; border:0; border-radius:16px; padding:18px; font-size:18px; font-weight:800;
  background:linear-gradient(180deg,var(--teal),var(--teal-dim)); color:#04211f;
  box-shadow:0 6px 18px rgba(0,164,167,.28); cursor:pointer}
.primary:active{transform:translateY(1px)}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px}
.chip{border:1px solid var(--line); background:var(--panel); color:var(--text);
  padding:9px 13px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer}
.chip:active{background:var(--panel2)}
.chip.add{border-style:dashed; color:var(--muted)}
.chip.home,.chip.work{border-color:var(--teal-dim)}
.chip.bus{border-color:#5a2b24}

/* weather strip */
.weather{margin:14px 0 2px}
.wx-head{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; margin-bottom:8px}
.wx-title{color:var(--muted); font-size:12px; font-weight:600}
.wx-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.wx-cell{flex:0 0 auto; width:54px; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:3px}
.wx-cell.now{border-color:var(--teal); background:#12292a}
.wx-h{font-size:12px; color:var(--muted)}
.wx-i{font-size:18px; line-height:1}
.wx-t{font-weight:800; font-variant-numeric:tabular-nums}
.wx-p{font-size:11px; color:var(--muted)}
.wx-p.hi{color:var(--warn); font-weight:700}

#results{margin-top:14px}
.hint{color:var(--muted); text-align:center; padding:22px 12px; font-size:15px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1}}
.card.loading,.card.error{color:var(--muted); text-align:center; padding:26px}
.card.error{color:var(--bad)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card-head h2{margin:0; font-size:21px}
.fav-toggle{background:none; border:0; font-size:24px; cursor:pointer; color:#3a4a50; line-height:1}
.fav-toggle.on{color:var(--warn)}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 4px; color:var(--muted); font-size:14px}
.meta .wet{color:var(--warn); font-weight:700}

.deps{list-style:none; margin:12px 0 0; padding:0}
.deps li{display:flex; align-items:center; gap:10px; padding:12px 2px; border-top:1px solid var(--line)}
.deps li:first-child{border-top:0}
.deps li.none{justify-content:center; color:var(--muted)}
.dep-main{flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.dep-right{display:flex; flex-direction:column; align-items:flex-end; gap:2px}
.route{background:var(--bus); color:#fff; font-weight:800; padding:2px 8px; border-radius:7px; font-size:13px; min-width:34px; text-align:center}
.dest{font-weight:700}
.plat{color:var(--muted); font-size:12px}
.mins{font-variant-numeric:tabular-nums; font-weight:800; color:var(--teal); font-size:16px}
.leave{font-size:12px; color:var(--muted)}
.leave.go{color:var(--good); font-weight:800}
.leave.miss{color:var(--bad)}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.updated{color:var(--muted); font-size:12px}
.refresh{background:var(--panel2); border:1px solid var(--line); color:var(--text);
  padding:8px 12px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer}
.reason{margin-top:10px; padding:10px 12px; background:#26181a; border:1px solid #7a2f2a; border-radius:12px; color:#ffd7d1; font-size:13px}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; z-index:20}
.modal.hidden{display:none}
.sheet{background:var(--panel); width:100%; max-width:640px; margin:0 auto; border-radius:18px 18px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom)); max-height:82vh; display:flex; flex-direction:column}
.sheet-head{display:flex; align-items:center; justify-content:space-between}
.sheet-head h2{margin:0; font-size:18px}
.icon-btn{background:var(--panel2); border:1px solid var(--line); color:var(--text); width:34px; height:34px; border-radius:10px; font-size:15px; cursor:pointer}
.seg{display:flex; gap:6px; background:var(--bg); padding:4px; border-radius:12px; border:1px solid var(--line); margin-top:12px}
.seg button{flex:1; padding:9px; border:0; background:none; color:var(--muted); font-weight:700; border-radius:9px; cursor:pointer}
.seg button.on{background:var(--panel2); color:var(--text)}
#stationFilter{margin:12px 0; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:16px; width:100%}
.station-list{list-style:none; margin:0; padding:0; overflow:auto}
.station-list li{padding:14px 6px; border-top:1px solid var(--line); cursor:pointer; font-weight:600}
.station-list li.none{color:var(--muted); cursor:default; text-align:center}
.station-list li.added{color:var(--muted)}
.station-list li .tick{color:var(--warn); float:right}

footer{color:#5c6f75; text-align:center; font-size:11px; padding:8px 16px 22px}