:root { --bg:#0a1a24; --fg:#e8f4f2; --acc:#4ecdc4; --card:#122433; --warn:#fc6; --line:#1e3344; --amber:#d4a017; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); padding-bottom: 58px; }
.hidden { display: none !important; }
.top { display:flex; justify-content:space-between; align-items:flex-start; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:1.2rem; }
h2 { margin:0 0 .5rem; font-size:1.05rem; }
h3 { margin:0 0 .4rem; font-size:.9rem; }
.sub { margin:.15rem 0 0; font-size:.75rem; opacity:.75; }
.pills { display:flex; gap:.35rem; }
.pill { font-size:.7rem; padding:.25rem .5rem; border-radius:999px; background:#1e3344; }
.pill.ok { background:#1a4a3a; color:var(--acc); }
.pill.muted { opacity:.7; }
.route-view { min-height: calc(100vh - 120px); }
.layout { display:grid; grid-template-columns:1fr 320px; min-height:calc(100vh - 120px); }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } }
.map-panel { position:relative; min-height:360px; }
.map-tools { position:absolute; top:.5rem; right:.5rem; z-index:2; }
.map-tools button { margin:0; background:rgba(18,36,51,.92); }
#map { position:absolute; inset:0; }
.side { padding:.5rem; overflow:auto; border-left:1px solid var(--line); }
.card { background:var(--card); border-radius:10px; padding:.65rem; margin-bottom:.5rem; }
.card h2 { margin:0 0 .5rem; font-size:.95rem; }
button { margin:.15rem; padding:.45rem .6rem; border-radius:6px; border:1px solid #2a5068; background:#1e3344; color:var(--fg); cursor:pointer; font-size:.82rem; }
button.primary { background:var(--acc); color:#062018; font-weight:600; border:none; width:100%; }
button.ghost { background:transparent; width:100%; }
.row { display:flex; flex-wrap:wrap; }
.row.danger button { border-color:#a33; }
.hint { font-size:.75rem; opacity:.8; margin:.35rem 0; }
.view-lead { font-size:.88rem; opacity:.85; margin:0 0 .75rem; }
.bar { height:6px; background:#1e3344; border-radius:4px; overflow:hidden; margin:.35rem 0; }
.bar div { height:100%; width:0; background:var(--acc); }
#telemetry dl { display:grid; grid-template-columns:auto 1fr; gap:.2rem .5rem; font-size:.8rem; margin:0; }
.toast { position:fixed; bottom:4.5rem; left:50%; transform:translateX(-50%); background:#1e3344; padding:.6rem 1rem; border-radius:8px; z-index:9; max-width:90vw; }
.toast.ok { border:1px solid var(--acc); }
.toast.warn { border:1px solid var(--warn); }
.back-link { display:inline-block; margin:.35rem 0; color:var(--acc); text-decoration:none; font-size:.82rem; }
#view-hub, #view-shell { padding:.65rem; max-width:720px; margin:0 auto; }
.hub-head h2 { margin:0; }
.hub-section { margin-bottom:.85rem; }
.hub-section h3 { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--acc); opacity:.9; }
.hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
.hub-item, a.hub-item {
  display:flex; flex-direction:column; gap:.12rem; padding:.55rem .65rem; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--fg); text-decoration:none; min-height:3.2rem;
}
.hub-item:active, a.hub-item:hover { border-color:rgba(78,205,196,.4); background:rgba(78,205,196,.08); }
.hub-label { font-weight:700; font-size:.88rem; }
.hub-desc { font-size:.72rem; opacity:.72; }
.hub-actions { text-align:center; }
.btn-link { display:block; margin-top:.5rem; color:var(--acc); font-size:.8rem; }
.status-dl { display:grid; grid-template-columns:auto 1fr; gap:.2rem .6rem; font-size:.82rem; margin:0; }
.shell-open { margin-top:.35rem; }
.shell-hash code { font-size:.72rem; word-break:break-all; }
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
  background:#0d1e2a; border-top:1px solid var(--line); padding:.25rem 0 calc(.25rem + env(safe-area-inset-bottom));
  z-index:8;
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.35rem .2rem;
  color:var(--fg); text-decoration:none; font-size:.65rem; opacity:.75; border:none; background:transparent;
}
.nav-btn.active { opacity:1; color:var(--acc); }
.nav-ico { font-size:1.1rem; line-height:1; }
.nav-txt { font-size:.62rem; }