:root{
  --bg:#0f172a; --card:#1e293b; --card2:#273549; --line:#334155;
  --ink:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8;
  --good:#34d399; --bad:#f87171; --warn:#fbbf24; --purple:#a78bfa; --pink:#f472b6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; -webkit-text-size-adjust:100%;
}
a{color:var(--accent)}
button{font-family:inherit}

/* top bar */
.topbar{position:sticky; top:0; z-index:500; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; background:#0f172aee; backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.brand{font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px}
.nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nav .who{font-size:12px; color:var(--muted)}
.tab{cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); background:none; border:none; padding:7px 10px; border-radius:8px}
.tab.active{color:var(--ink); background:var(--card2)}

main{max-width:960px; margin:0 auto; padding:18px calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px}
h2{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
h3{margin:0 0 6px; font-size:16px}
.pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--card2); border:1px solid var(--line); color:var(--muted)}
.pill.live{color:var(--good); border-color:var(--good)}
.pill.off{color:var(--muted)} .pill.warn{color:var(--warn); border-color:var(--warn)}
.pill.pending{color:var(--warn); border-color:var(--warn)} .pill.active{color:var(--good); border-color:var(--good)}
.pill.disabled{color:var(--bad); border-color:var(--bad)} .pill.admin{color:var(--purple); border-color:var(--purple)}

.btn{appearance:none; cursor:pointer; font-weight:600; font-size:13px; color:var(--bg); background:var(--accent); border:none; border-radius:9px; padding:9px 14px}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn.sm{padding:6px 10px; font-size:12px}
.btn.danger{background:var(--bad); color:#3b0a0a}
.btn.good{background:var(--good); color:#052e1c}
.btn:disabled{opacity:.5; cursor:default}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.link{color:var(--accent); cursor:pointer; font-size:12px; background:none; border:none; padding:0}
.spacer{flex:1}

label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600}
input,select,textarea{width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:10px 11px; font-size:16px; font-family:inherit}
textarea{min-height:60px; resize:vertical}
.field{margin-bottom:12px}
.err{color:var(--bad); font-size:13px; margin-top:8px; min-height:16px}
.ok{color:var(--good); font-size:13px; margin-top:8px}

/* auth */
.auth-wrap{max-width:400px; margin:8vh auto; padding:0 16px}
.auth-wrap .card{padding:22px}
.auth-tabs{display:flex; gap:8px; margin-bottom:16px}
.auth-tabs .tab{flex:1; text-align:center; border:1px solid var(--line)}

/* trip list */
.trip-card{display:flex; align-items:center; gap:14px; padding:14px; background:var(--card2); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; cursor:pointer}
.trip-card:hover{border-color:var(--accent)}
.trip-card .body{flex:1; min-width:0}
.trip-card .nm{font-weight:700; font-size:15px}
.trip-card .meta{font-size:12px; color:var(--muted)}
.trip-card .owner{font-size:11px; color:var(--purple)}

/* editor */
#map{height:360px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.leaflet-container{background:#0b1220}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.dot{width:11px; height:11px; border-radius:50%; display:inline-block}
.maphint{font-size:12px; color:var(--warn); margin-top:8px; display:none}

.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:4px}
.metric{background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.metric .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.metric .val{font-size:20px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums}
.metric .val small{font-size:12px; color:var(--muted); font-weight:600}
.progress{height:12px; background:var(--card2); border-radius:6px; overflow:hidden; margin:12px 0; border:1px solid var(--line); position:relative}
.progress .fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--good)); transition:width .5s}

.stop-row{display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line)}
.stop-row:last-child{border-bottom:none}
.stop-row .idx{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; flex:none; color:#0f172a}
.stop-row .body{flex:1; min-width:0}
.stop-row .nm{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stop-row .meta{font-size:12px; color:var(--muted)}
.stop-row.passed{opacity:.45} .stop-row.passed .nm{text-decoration:line-through}
.stop-row .leg{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.stop-row .mv{cursor:pointer; color:var(--muted); background:none; border:none; font-size:15px; padding:0 3px}
.stop-row .mv:hover{color:var(--ink)}
.stop-row .rm{cursor:pointer; color:var(--muted); background:none; border:none; font-size:18px; padding:0 3px}
.stop-row .rm:hover{color:var(--bad)}
.expander{font-size:12px; color:var(--accent); cursor:pointer; padding:8px 4px; display:inline-block}

.suggest{margin-top:8px; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:none}
.suggest .item{padding:10px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--line)}
.suggest .item:last-child{border-bottom:none}
.suggest .item:hover{background:var(--card2)}

/* tables */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em}
td.num{text-align:right; font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}

.chk{display:flex; align-items:center; gap:12px; background:var(--card2); border:1px solid var(--line); border-left-width:4px; border-radius:8px; padding:10px 13px; margin-top:9px}
.chk .badge{font-size:11px; font-weight:800; padding:3px 9px; border-radius:6px; white-space:nowrap}
.chk.pass{border-left-color:var(--good)} .chk.pass .badge{background:var(--good); color:#052e1c}
.chk.fail{border-left-color:var(--bad)} .chk.fail .badge{background:var(--bad); color:#3b0a0a}
.chk .txt{font-size:13px} .chk .txt b{color:#fff}
.note{font-size:12px; color:var(--muted); margin-top:12px}
.slider-row{display:flex; align-items:center; gap:10px}
input[type=range]{flex:1; accent-color:var(--accent); width:auto}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--line); color:var(--ink); padding:11px 16px; border-radius:10px; font-size:13px; z-index:1000; opacity:0; transition:opacity .3s; pointer-events:none}
.toast.show{opacity:1}
.hidden{display:none !important}
.center-msg{text-align:center; color:var(--muted); padding:30px 10px}

/* ===================== v2 additions ===================== */
/* light theme */
html[data-theme="light"]{
  --bg:#eef2f7; --card:#ffffff; --card2:#f3f6fb; --line:#dbe3ee;
  --ink:#0f172a; --muted:#5b6b7f; --accent:#0284c7;
}
html[data-theme="light"] .topbar{background:#ffffffe6}
html[data-theme="light"] .leaflet-container{background:#dfe7f0}

.themebtn{cursor:pointer;background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:5px 9px;font-size:14px}

/* emoji markers */
.mk{font-size:20px;line-height:1;text-align:center;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.mk.poi{font-size:15px;opacity:.9}
.mk .num{position:absolute;top:-6px;right:-8px;background:var(--accent);color:#04222f;
  font-size:9px;font-weight:800;border-radius:8px;padding:0 3px;line-height:13px}

/* per-stop weather chip */
.wx-chip{font-size:12px;color:var(--muted);white-space:nowrap;display:inline-flex;gap:3px;align-items:center}

/* directions */
.dir-leg{margin-top:10px;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.dir-row{display:flex;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:13px;align-items:baseline}
.dir-row:last-child{border-bottom:none}
.dir-row .ic{width:22px;flex:none;text-align:center}
.dir-row .d{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}

/* elevation */
.elev{width:100%;height:120px;background:var(--card2);border:1px solid var(--line);border-radius:10px}
.elev-meta{display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--muted)}
.elev-meta b{color:var(--ink)}

/* pois */
.poibtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.poi-list{margin-top:10px;max-height:230px;overflow:auto}
.poi-row{display:flex;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px}
.poi-row:last-child{border-bottom:none}
.poi-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* mobile */
@media (max-width:560px){
  .nav .who{display:none}
  #map{height:300px}
  .metrics{grid-template-columns:1fr 1fr}
  h1{font-size:17px}
}

/* print: only the itinerary window uses this stylesheet minimally */
@media print{
  .topbar,.no-print{display:none !important}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;box-shadow:none}
}

/* ===================== Places page + modal ===================== */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{cursor:pointer;font-size:13px;font-weight:600;padding:7px 12px;border-radius:20px;
  background:var(--card2);border:1px solid var(--line);color:var(--muted);user-select:none}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.chip.sm{font-size:12px;padding:5px 10px}
.filt-group{margin-top:12px}
.filt-group .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;font-weight:700}
.checks-row{display:flex;gap:14px;flex-wrap:wrap}
.chk-lbl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);cursor:pointer}
.chk-lbl input{width:16px;height:16px;accent-color:var(--accent)}
#pmap{height:260px;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-top:12px}

.place-row{display:flex;gap:12px;align-items:flex-start;padding:12px 6px;border-bottom:1px solid var(--line)}
.place-row:last-child{border-bottom:none}
.place-row .pico{font-size:20px;flex:none;width:26px;text-align:center}
.place-row .pbody{flex:1;min-width:0}
.place-row .pnm{font-weight:700;font-size:14px}
.place-row .pmeta{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.place-row .pacts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.badge2{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--card2);border:1px solid var(--line);color:var(--muted)}
.badge2.open{color:var(--good);border-color:var(--good)}
.badge2.closed{color:var(--bad);border-color:var(--bad)}
.badge2.tag{color:var(--accent);border-color:var(--line)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(2,6,23,.72);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow:auto}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:820px;width:100%;padding:18px;margin:auto}
.modal h3{display:flex;align-items:center;gap:8px}
.modal .x{margin-left:auto;cursor:pointer;background:none;border:none;color:var(--muted);font-size:22px}
.wk-stop{padding:12px 0;border-bottom:1px solid var(--line)}
.wk-stop:last-child{border-bottom:none}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.wk-day{background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 4px;text-align:center}
.wk-day .d{font-size:10px;text-transform:uppercase;color:var(--muted)}
.wk-day .e{font-size:20px;margin:2px 0}
.wk-day .hi{font-size:12px;font-weight:700}
.wk-day .lo{font-size:11px;color:var(--muted)}
.wk-day .p{font-size:10px;color:var(--accent)}
@media (max-width:560px){ .wk-days{grid-template-columns:repeat(4,1fr)} }