:root { --bg:#0f172a; --card:#1e293b; --line:#334155; --txt:#e2e8f0; --mut:#94a3b8; --acc:#38bdf8; --ok:#34d399; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--txt);
       padding-bottom:72px; }
header { padding:18px 16px 10px; border-bottom:1px solid var(--line); }
header h1 { margin:0; font-size:22px; }
header .sub { color:var(--mut); font-size:13px; }
main { padding:14px 16px; }
.view { display:none; }
.view.active { display:block; }
.list { display:flex; flex-direction:column; gap:10px; }
.empty { color:var(--mut); text-align:center; margin-top:60px; line-height:1.6; }
.hidden { display:none !important; }

.trip-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.trip-card h3 { margin:0 0 6px; font-size:16px; }
.trip-legs { color:var(--mut); font-size:13px; margin-bottom:10px; line-height:1.5; }
.trip-actions { display:flex; gap:8px; flex-wrap:wrap; }
.badge { font-size:11px; padding:2px 8px; border-radius:999px; background:#0b3b46; color:var(--acc); margin-left:6px; }
.badge.run { background:#064e3b; color:var(--ok); }

label { display:block; margin:12px 0 6px; font-size:14px; color:var(--mut); }
label.row { display:flex; align-items:center; gap:10px; }
input, select { width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line);
                background:#0b1220; color:var(--txt); font-size:15px; margin-top:4px; }
.leg-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:14px 0; }
.leg-box h3 { margin:0 0 8px; font-size:15px; }
.leg-box h3 small { color:var(--mut); font-weight:400; }
.search { display:flex; gap:8px; margin-top:8px; }
.search input { margin-top:0; }
.search button { white-space:nowrap; }
.results { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.results .item { padding:9px 11px; background:#0b1220; border:1px solid var(--line); border-radius:9px;
                 font-size:13px; cursor:pointer; }
.results .item:active { border-color:var(--acc); }
.picked { color:var(--ok); font-size:13px; margin-top:8px; }

button { padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:#0b1220;
         color:var(--txt); font-size:14px; cursor:pointer; }
button.primary { background:var(--acc); color:#05222e; border-color:var(--acc); font-weight:700; width:100%; margin-top:10px; }
button.go { background:var(--ok); color:#05231a; border-color:var(--ok); font-weight:700; }
.muted { color:var(--mut); font-size:13px; line-height:1.5; }

.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--card);
        border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tab { flex:1; border:0; border-radius:0; background:transparent; color:var(--mut); padding:16px 0; font-size:14px; }
.tab.active { color:var(--acc); font-weight:700; }

.toast { position:fixed; bottom:84px; left:50%; transform:translateX(-50%); background:#0b3b46;
         color:var(--acc); padding:10px 16px; border-radius:999px; font-size:13px; border:1px solid var(--acc);
         z-index:50; max-width:90%; text-align:center; }