:root { --bg:#0f172a; --muted:#64748b; --accent:#0ea5e9; --border:#e2e8f0; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; display:flex; flex-direction:column; color:#0f172a; }
.topbar { background:var(--bg); color:#fff; padding:.55rem 1rem; display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.brand { font-weight:700; }
.sub { color:#94a3b8; font-size:.9rem; }
main { flex:1; display:flex; min-height:0; }
#map { flex:1; }
#panel { width:320px; overflow-y:auto; border-left:1px solid var(--border); background:#f8fafc; padding:.8rem; }
.totals { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.totals div { background:#fff; border:1px solid var(--border); border-radius:8px; padding:.5rem .6rem; }
.totals b { display:block; font-size:1.15rem; }
.totals span { color:var(--muted); font-size:.78rem; }
.controls { display:flex; gap:.5rem; margin:.8rem 0; }
button { flex:1; border:0; border-radius:8px; padding:.55rem; font:inherit; font-weight:600; cursor:pointer; background:var(--accent); color:#fff; }
#fit { background:#e2e8f0; color:#0f172a; }
.legend { font-size:.78rem; color:var(--muted); margin-bottom:.6rem; }
.legend .bar { display:block; height:8px; border-radius:4px; margin:.25rem 0 .1rem;
  background:linear-gradient(90deg,#1e3a8a,#0ea5e9,#22c55e,#facc15,#f97316,#dc2626); }
.legend .ends { display:flex; justify-content:space-between; }
.legend em { font-style:normal; }
.legend .gap { display:block; margin-top:.3rem; }
#trips { list-style:none; padding:0; margin:0; }
#trips li { background:#fff; border:1px solid var(--border); border-radius:8px; padding:.5rem .6rem; margin-bottom:.4rem; cursor:pointer; display:flex; gap:.6rem; align-items:center; }
#trips li:hover, #trips li.active { border-color:var(--accent); background:#f0f9ff; }
#trips .num { flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--bg); color:#fff; display:grid; place-items:center; font-size:.8rem; font-weight:700; }
#trips .meta { font-size:.8rem; color:var(--muted); }
.day { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:.6rem 0 .3rem; }
.trip-icon { background:var(--bg); color:#fff; border:2px solid #fff; border-radius:50%; display:grid !important; place-items:center; font:700 11px system-ui; box-shadow:0 1px 3px #0006; }
.boat-icon { font-size:22px; line-height:1; filter:drop-shadow(0 1px 2px #000a); }
.hud { background:#0f172ae0; color:#fff; padding:.35rem .6rem; border-radius:6px; font-size:.85rem; }
@media (max-width:760px) {
  main { flex-direction:column; }
  #map { flex:none; height:58vh; }
  #panel { width:auto; border-left:0; border-top:1px solid var(--border); flex:1; }
}