:root { color-scheme: light dark; --bg:#f5f5f7; --card:rgba(255,255,255,.78); --text:#1d1d1f; --muted:#6e6e73; --line:rgba(60,60,67,.18); --accent:#007aff; --danger:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#000; --card:rgba(28,28,30,.88); --text:#f5f5f7; --muted:#98989d; --line:rgba(235,235,245,.18); } }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body { min-height:100%; margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; }
button,input,select { font:inherit; }
.shell { width:min(680px,100%); min-height:100dvh; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.topbar,.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.topbar { position:sticky; top:0; z-index:20; margin:0 0 18px; padding:8px 0 12px; background:var(--bg); }
h1,h2,p { margin:0; } h1 { font-size:34px; letter-spacing:-.04em; } h2 { font-size:20px; letter-spacing:-.02em; }
.eyebrow { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.icon-button { width:44px; height:44px; border:0; border-radius:50%; background:var(--card); color:var(--accent); font-size:28px; cursor:pointer; }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:18px; margin:12px 0; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.status { min-height:22px; color:var(--muted); font-size:13px; margin:0 4px 8px; } .status.error { color:var(--danger); }
.controls { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.controls > * { width:100%; min-width:0; max-width:100%; }
label { color:var(--muted); font-size:13px; font-weight:600; margin-top:4px; }
input,select { min-width:0; max-width:100%; min-height:44px; border:1px solid var(--line); border-radius:13px; padding:0 12px; background:rgba(120,120,128,.12); color:var(--text); outline:none; text-overflow:ellipsis; white-space:nowrap; } input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,122,255,.18); }
.save-button { min-height:44px; border:0; border-radius:13px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
.section-heading { min-width:0; margin-bottom:14px; } .section-heading > div { min-width:0; } .section-heading select { width:auto; min-width:0; min-height:36px; max-width:135px; padding:0 8px; font-size:13px; }
.arrival-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--line); } .arrival-time { font-size:22px; font-weight:700; letter-spacing:-.03em; } .arrival-destination { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; } .arrival-route { color:var(--muted); font-size:12px; margin-top:3px; } .arrival-actions { display:flex; flex-direction:column; align-items:flex-end; gap:5px; } .arrival-relative { color:var(--accent); font-size:13px; white-space:nowrap; }
.reminder-button,.cancel-reminder { display:inline-flex; visibility:visible; opacity:1; align-items:center; justify-content:center; min-width:58px; min-height:34px; border:1px solid rgba(0,122,255,.28); border-radius:10px; padding:0 10px; background:rgba(0,122,255,.16); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; -webkit-appearance:none; appearance:none; }
.reminder-button:disabled { color:var(--muted); border-color:var(--line); background:rgba(120,120,128,.12); }
.reminder-settings { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.reminder-input-row { display:flex; align-items:center; gap:8px; margin-top:7px; color:var(--muted); font-size:14px; }
.reminder-input-row input { width:92px; }
.active-reminder { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.empty { color:var(--muted); font-size:14px; padding:16px 0; } .muted,.footnote { color:var(--muted); font-size:12px; } .footnote { margin-top:12px; } .favorite { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text); padding:13px 0; cursor:pointer; } .favorite:first-child { border-top:0; }
footer { text-align:center; padding:18px 0; font-size:11px; } footer a { color:var(--muted); }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }