:root{--bg:#f4f1ea;--card:#fff;--ink:#1b2430;--mute:#667085;--line:#e3ded2;--accent:#1d5fd1;--ok:#14803c;--warn:#b45309}
@media(prefers-color-scheme:dark){:root{--bg:#10151c;--card:#1a212b;--ink:#eef1f5;--mute:#98a2b3;--line:#2a3441;--accent:#6aa1ff;--ok:#4ade80;--warn:#fbbf24}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
#brand{background:#1b2430;padding:calc(env(safe-area-inset-top) + 8px) 14px 0;line-height:0}
#brand img{height:22px;width:auto;display:block}
header{display:flex;gap:8px;align-items:flex-end;padding:6px 12px 8px;background:#1b2430;color:#fff}
.pick{flex:1;min-width:0}
.pick label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.pick input{width:100%;font:inherit;font-size:16px;padding:9px 10px;border-radius:10px;border:0;background:#2b3646;color:#fff}
.pick input::placeholder{color:#9aa6b8}
#swap{border:0;background:#2b3646;color:#fff;font-size:20px;width:40px;height:40px;border-radius:10px;flex:none}
#mapwrap{position:relative;flex:1 1 42%;min-height:200px;background:var(--bg);touch-action:none;border-bottom:1px solid var(--line)}
#map{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
#zoomctl{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:row;gap:6px}
#zoomctl button{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1}
#panel{flex:1 1 58%;overflow:auto;padding:12px 12px calc(env(safe-area-inset-bottom) + 16px);-webkit-overflow-scrolling:touch}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.card h2{margin:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.big{font-size:22px;font-weight:700}
.sub{color:var(--mute);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:9px 14px;border-radius:999px;font:inherit;font-size:15px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.badge{display:inline-block;min-width:22px;height:22px;border-radius:11px;color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:22px;padding:0 7px;vertical-align:1px}
.train{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.train:first-of-type{border-top:0}
.train .d{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.train .m{font-weight:700;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.step{display:flex;gap:10px;padding:8px 0}
.step+.step{border-top:1px dashed var(--line)}
.bar{width:6px;border-radius:3px;flex:none}
.alert{border-left:4px solid var(--warn);background:var(--card);padding:10px 12px;border-radius:10px;margin-bottom:10px;font-size:14px;border:1px solid var(--line);border-left-width:4px;border-left-color:var(--warn)}
.row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.link{background:none;border:0;color:var(--accent);font:inherit;font-size:14px;padding:4px 0}
.err{color:var(--warn);font-size:14px}
.empty{color:var(--mute);padding:6px 0}
svg text{font:9px -apple-system,sans-serif;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}

#tapmode{position:absolute;left:8px;bottom:8px;display:flex;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#tapmode button{border:0;background:none;color:var(--ink);font:inherit;font-size:13px;padding:9px 11px}
#tapmode button.on{background:var(--accent);color:#fff}
.note{color:var(--mute);font-size:13px;margin:6px 2px 0}
.lbl{font-size:12px;color:var(--mute);margin:10px 0 6px}
.stale{border-left-color:#b42318}

#sugg{position:fixed;left:8px;right:8px;z-index:20;max-height:46vh;overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
#sugg[hidden]{display:none}
.sg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.sg:first-child{border-top:0}
.sg:active{background:var(--bg)}
.sg b{font-weight:600}
.sg .dots{display:flex;gap:3px;flex:none}
.sg .pin{color:#d62839;font-size:12px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.sgnote{padding:10px 14px;color:var(--mute);font-size:14px;border-top:1px solid var(--line)}
.alert b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);margin-bottom:2px}
.alert.soft{border-left-color:var(--line)}
.alert.soft b{color:var(--mute)}
.seg{display:flex;margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;padding:10px}
.seg button.on{background:var(--accent);color:#fff}
.timerow{margin-top:10px}
input[type=time],.tname,#tripname{font:inherit;font-size:16px;padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
input[type=time]{width:100%}
.savebox{display:flex;gap:8px;align-items:center;margin-top:10px}
#tripname{flex:1;min-width:0}
.trip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;padding:10px 0}
.card .trip:first-of-type,.card .row+.trip{border-top:0}
.tripedit{display:flex;gap:8px;align-items:center;margin-top:8px}
.tname{flex:1;min-width:0}
.plan{margin:8px 0 0;padding-left:18px}
.plan li{margin:4px 0}
.m.good{color:var(--ok);font-size:13px}
.m.bad{color:var(--warn);font-size:13px}
.train .m{min-width:90px}
.eq{margin-top:8px}