:root{
  --bg:#0b1f33;
  --panel:#0f2740;
  --panel-2:#143352;
  /* translucent chrome (top bar fade, instrument pills, floating tools) — these
     MUST re-map in night mode so no blue-white light survives */
  --chrome:rgba(11,31,51,.92);
  --chrome-soft:rgba(20,51,82,.72);
  --topbar-fade:linear-gradient(180deg, rgba(11,31,51,.96), rgba(11,31,51,.78) 70%, rgba(11,31,51,0));
  --bottombar-fill:#0f2740;   /* solid — the safe-area padding must read as part of the bar */
  --ink:#eaf2fb;
  --muted:#bcd0e6;
  --line:#1e3f5e;
  --accent:#19b3c6;
  --accent-2:#2f80ed;
  --green:#2ecc71;
  --amber:#f5a623;
  --red:#ff4d4f;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --topbar-h:64px;
  --bottombar-h:62px;
  --dock-bottom:calc(var(--safe-bottom) + 12px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;overscroll-behavior:none;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  user-select:none; -webkit-user-select:none;
  overflow:hidden; position:fixed; inset:0;
}

/* touch-action:none — the map owns ALL touch gestures. Leaflet only applies
   this while its own drag/touchZoom handlers are enabled; we disable those in
   rotated mode, and without it the BROWSER grabs the pinch and zooms the whole
   page. Forced here so it can never drop off. */
#map{position:absolute; inset:0; z-index:0; background:#aadaff; touch-action:none;}
/* course-up: oversized square centred on the viewport, rotated as a whole so
   tiles always cover the screen corners */
#map.rotated{
  inset:auto; left:50%; top:50%;
  transform-origin:center center;
  transform:translate(-50%,-50%);
  transition:transform .3s ease;
}
/* while the user is actively twisting, track the fingers 1:1 (no easing lag) */
#map.rotated.twisting{transition:none;}

/* ---------- Top bar ---------- */
#topbar{
  position:absolute; top:0; left:0; right:0; z-index:600;
  height:calc(var(--topbar-h) + var(--safe-top));
  padding:calc(var(--safe-top) + 6px) 8px 6px;
  display:flex; align-items:center; gap:6px;
  background:var(--topbar-fade);
  pointer-events:none;
}
#topbar > *{pointer-events:auto;}
.brand{display:flex; align-items:center; flex-shrink:0;}
.brand img{border-radius:6px;}
.instruments{display:flex; gap:5px; flex:1; overflow-x:auto; scrollbar-width:none;}
/* very narrow phones: the chart icon yields to the instruments */
@media (max-width:379px){ .brand{display:none;} }
.instruments::-webkit-scrollbar{display:none;}
.inst{
  background:var(--chrome-soft); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:10px;
  padding:4px 5px; min-width:46px; text-align:center; line-height:1.05;
  display:flex; flex-direction:column; justify-content:center; flex-shrink:0;
}
.inst .lbl{font-size:10px; color:var(--muted); letter-spacing:.6px;}
.inst .val{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums;}
.inst .unit{font-size:10px; color:var(--muted);}
/* position pill: coordinates stack into two lines, so its width is one
   coordinate — fits every phone without scrolling the row */
.inst.pos{min-width:0; padding:4px 7px;}
.inst.pos .val{font-size:10.5px; font-weight:600; line-height:1.3; white-space:normal; max-width:74px;}
.gps-pill{
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  background:var(--chrome-soft); border:1px solid var(--line); color:var(--ink);
  border-radius:20px; padding:6px 8px; font-size:10px; font-weight:600;
}
.gps-pill .dot{width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 6px var(--red);}
.gps-pill.fix .dot{background:var(--green); box-shadow:0 0 6px var(--green);}
.gps-pill.fix.poor .dot{background:var(--amber); box-shadow:0 0 6px var(--amber);}
.gps-pill.searching .dot{background:var(--amber); box-shadow:0 0 6px var(--amber); animation:pulse 1s infinite;}
.gps-pill.stale .dot{background:var(--red); box-shadow:0 0 6px var(--red); animation:pulse .8s infinite;}
.gps-pill.stale{border-color:var(--red);}
@keyframes pulse{50%{opacity:.3}}

/* ---------- Banners ---------- */
.banner{
  position:absolute; left:8px; right:8px; top:calc(var(--topbar-h) + var(--safe-top) + 4px);
  z-index:650; background:var(--panel-2); border:1px solid var(--accent);
  border-radius:12px; padding:8px 12px; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
/* top banners start clear of the always-present MOB button (top-left) so the
   alarm icon/first word is never hidden behind it */
#anchor-banner, #alarm-banner{ left:72px; }
/* when the anchor-watch strip AND an alarm are both up, stack them and drop
   the tool column below both */
#anchor-banner:not(.hidden) ~ #alarm-banner{ top:calc(var(--topbar-h) + var(--safe-top) + 62px); }
#anchor-banner:not(.hidden) ~ #alarm-banner:not(.hidden) ~ #map-tools{ top:calc(var(--topbar-h) + var(--safe-top) + 124px); }
.banner.alarm{background:#3a0d0d; border-color:var(--red); animation:flash .8s infinite;}
@keyframes flash{50%{background:#5a1414}}
.banner-btn{margin-left:auto; background:var(--accent); border:none; color:#06222b; font-weight:700; border-radius:8px; padding:0 16px; min-height:44px;}
.banner.alarm .banner-btn{background:var(--red); color:#fff;}

/* ---------- Map tools ---------- */
#map-tools{
  position:absolute; right:10px; z-index:560;
  top:calc(var(--topbar-h) + var(--safe-top) + 16px);
  display:flex; flex-direction:column; gap:8px;
}
.tool{
  position:relative;
  width:48px; height:48px; border-radius:12px; border:1px solid var(--line);
  background:var(--chrome); color:var(--ink); display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.tool svg{width:24px; height:24px;}
.tool.active{background:var(--accent); color:#06222b; border-color:var(--accent);}
#tool-extra{display:flex; flex-direction:column; gap:8px;}
/* alert dot mirrored onto the cluster button when AIS risk while collapsed */
#t-more.has-alert::after{content:""; position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--red); border:2px solid var(--bg);}

/* ---------- Crosshair ---------- */
#crosshair{position:absolute; inset:0; z-index:540; pointer-events:none; display:grid; place-items:center;}
.ch-h,.ch-v{position:absolute; background:var(--red); opacity:.8;}
.ch-h{width:40px; height:2px;} .ch-v{height:40px; width:2px;}
.ch-readout{
  position:absolute; top:calc(50% + 28px); background:var(--chrome);
  border:1px solid var(--line); border-radius:8px; padding:10px 14px; font-size:13px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  pointer-events:auto;   /* tappable "done" chip — finishes the measurement */
}
.ch-readout::after{content:" · ✓ done"; color:var(--accent); font-weight:700;}

/* ---------- Zoom controls ---------- */
#zoom-controls{
  position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:560;
  display:flex; flex-direction:column; gap:7px;
}
.zbtn{
  width:48px; height:48px; border-radius:12px; border:1px solid var(--line);
  background:var(--chrome); color:var(--ink); font-size:26px; line-height:1; font-weight:400;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.zbtn:active{background:var(--accent); color:#06222b; border-color:var(--accent); transform:scale(.94);}
#z-reset{font-size:0;}

/* ---------- MOB ---------- */
/* MOB lives top-left under the status bar — a safety control that must never be
   covered by the bottom HUDs/nav bar */
#mob{
  position:absolute; left:10px; z-index:700;
  top:calc(var(--topbar-h) + var(--safe-top) + 10px);
  width:52px; height:52px; border-radius:50%; border:3px solid #fff;
  background:var(--red); color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px;
  box-shadow:0 3px 12px rgba(255,77,79,.55);
}
#mob:active{transform:scale(.94);}
#mob.active{
  background:#101010; color:#fff; border-color:var(--red); font-size:11px;
  animation:mobpulse 1.1s infinite;
}
@keyframes mobpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,79,.6)}50%{box-shadow:0 0 0 10px rgba(255,77,79,0)}}

/* ---------- Bottom bar ---------- */
#bottombar{
  position:absolute; left:0; right:0; bottom:0; z-index:600;
  height:calc(var(--bottombar-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--bottombar-fill);
  border-top:1px solid var(--line);
  display:flex; justify-content:center; align-items:center; gap:4px;
  transition:transform .25s ease;
}
/* reclaim chart space: hide the nav bar while panning or when a bottom HUD is up */
body.panning #bottombar, body.hud-on #bottombar{ transform:translateY(120%); }
/* keep the top tool stack clear of the alarm/anchor banners */
body.banner-on #map-tools{ top:calc(var(--topbar-h) + var(--safe-top) + 62px); }
.nav-btn{
  background:none; border:none; color:var(--muted); flex:1 1 0; max-width:92px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; padding:6px 0; height:100%;
}
.nav-btn .ico{font-size:20px; line-height:1;}
.nav-btn.active{color:var(--accent);}

/* ---------- Bottom sheet ---------- */
.sheet{
  position:absolute; left:0; right:0; z-index:700;
  bottom:calc(var(--bottombar-h) + var(--safe-bottom));
  max-height:62vh; background:var(--panel);
  border-radius:18px 18px 0 0; border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
  transform:translateY(0); transition:transform .25s ease; display:flex; flex-direction:column;
}
.sheet.hidden{transform:translateY(110%);}
.sheet-handle{display:grid; place-items:center; padding:8px;}
.sheet-handle span{width:42px; height:5px; border-radius:3px; background:var(--line);}
.sheet-head{display:flex; align-items:center; padding:0 16px 10px; border-bottom:1px solid var(--line);}
.sheet-head h2{margin:0; font-size:17px;}
#sheet-close{margin-left:auto; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:8px; font-size:17px;}
.sheet-body{padding:12px 16px 20px; overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* ---------- List items / cards ---------- */
.list-item{
  display:flex; align-items:center; gap:12px; padding:11px 12px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; margin-bottom:8px;
}
.list-item .li-ico{font-size:22px; width:30px; text-align:center;}
.list-item .li-main{flex:1; min-width:0;}
.list-item .li-title{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.list-item .li-sub{font-size:11px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums;}
.li-actions{display:flex; gap:6px;}
.icon-btn{background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:8px; width:40px; height:40px; font-size:16px;}
.icon-btn.danger{color:var(--red);}

.empty{text-align:center; color:var(--muted); padding:30px 10px; font-size:13px;}
.empty .big{font-size:34px; display:block; margin-bottom:8px; opacity:.7;}

/* ---------- Buttons / forms ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#06222b; border:none; border-radius:10px;
  padding:11px 14px; font-size:14px; font-weight:700; width:100%;
}
.btn.secondary{background:var(--panel-2); color:var(--ink); border:1px solid var(--line);}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--ink);}
.btn.danger{background:var(--red); color:#fff;}
.btn-row{display:flex; gap:8px; margin-top:10px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px;}
.field input,.field select{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:11px; font-size:15px;
}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{padding:8px 12px; border-radius:20px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-size:13px;}
.chip.on{background:var(--accent); color:#06222b; border-color:var(--accent);}
.row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line);}
.row .r-label{font-size:14px;}
.row .r-sub{font-size:11px; color:var(--muted);}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.seg button{background:var(--panel-2); color:var(--muted); border:none; padding:8px 12px; font-size:13px;}
.seg button.on{background:var(--accent); color:#06222b; font-weight:700;}
.switch{position:relative; width:48px; height:28px;}
.switch input{display:none;}
.switch .sl{position:absolute; inset:0; background:var(--line); border-radius:20px; transition:.2s;}
.switch .sl::before{content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .sl{background:var(--green);}
.switch input:checked + .sl::before{transform:translateX(20px);}

/* ---------- Layers menu ---------- */
#layers-menu{
  position:absolute; right:62px; z-index:570;
  top:calc(var(--topbar-h) + var(--safe-top) + 60px);
  width:210px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:8px; box-shadow:0 6px 20px rgba(0,0,0,.5);
}
#layers-menu .lm-row{display:flex; align-items:center; justify-content:space-between; padding:9px 8px; border-radius:8px;}
#layers-menu .lm-row:active{background:var(--panel-2);}
#layers-menu .lm-row span{font-size:13px;}

/* ---------- Boat / markers ---------- */
.boat-marker{transform-origin:center;}
.wp-label{
  background:var(--chrome); border:1px solid var(--line); color:var(--ink);
  border-radius:6px; padding:2px 6px; font-size:11px; white-space:nowrap;
}
/* circled route-waypoint numbers (chartplotter style) */
.wp-num{
  width:24px; height:24px; border-radius:50%; background:#fff; color:#7a4a00;
  border:2.5px solid #f5a623; display:grid; place-items:center;
  font-size:12px; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.leaflet-popup-content-wrapper{background:var(--panel); color:var(--ink); border:1px solid var(--line);}
.leaflet-popup-tip{background:var(--panel);}
.leaflet-popup-content{margin:10px 12px; font-size:13px;}
.leaflet-popup-content b{color:var(--accent);}
.leaflet-container{background:#aadaff; font-family:inherit;}
.leaflet-control-attribution{font-size:9px; background:rgba(11,31,51,.6)!important; color:var(--muted)!important;}
.leaflet-control-attribution a{color:var(--accent)!important;}
.leaflet-bar a{background:var(--panel)!important; color:var(--ink)!important; border-color:var(--line)!important;}

/* ---------- Toast ---------- */
.toast{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(var(--bottombar-h) + var(--safe-bottom) + 18px); z-index:800;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:10px 16px; border-radius:22px; font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,.4);
  max-width:80vw; text-align:center;
}
.toast.hidden{display:none;}

/* ---------- Active Go-To nav HUD ---------- */
.nav-hud{
  position:absolute; left:8px; right:8px; z-index:600;
  bottom:var(--dock-bottom);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--accent); border-radius:14px; padding:10px 12px;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
.nav-hud .nh-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.nav-hud .nh-arrow{
  width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--bg);
  border:1px solid var(--line); display:grid; place-items:center;
}
.nav-hud .nh-arrow svg{width:26px; height:26px; transition:transform .3s;}
.nav-hud .nh-name{font-weight:700; font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav-hud .nh-stop{background:var(--red); color:#fff; border:none; border-radius:8px; padding:0 16px; min-height:44px; font-weight:700; font-size:13px;}
.nav-hud .nh-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; text-align:center;}
.nav-hud .nh-cell{background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:5px 3px;}
.nav-hud .nh-cell .k{font-size:9px; color:var(--muted); letter-spacing:.5px;}
.nav-hud .nh-cell .v{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;}
.nav-hud .nh-xte{margin-top:7px;}
.nav-hud .nh-xte .bar{position:relative; height:8px; background:var(--bg); border:1px solid var(--line); border-radius:5px;}
.nav-hud .nh-xte .mid{position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:var(--muted);}
.nav-hud .nh-xte .dot{position:absolute; top:50%; width:10px; height:10px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%);}
.nav-hud .nh-xte .lbl{display:flex; justify-content:space-between; font-size:9px; color:var(--muted); margin-top:3px;}

/* ---------- weather / port readouts ---------- */
.kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px;}
.kv .k{color:var(--muted);}
.wx-big{display:flex; gap:12px; margin-bottom:8px;}
.wx-big .b{flex:1; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:10px; text-align:center;}
.wx-big .b .n{font-size:24px; font-weight:800; font-variant-numeric:tabular-nums;}
.wx-big .b .l{font-size:10px; color:var(--muted);}
.tag{display:inline-block; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:11px; margin:2px 4px 2px 0;}

/* ---------- windguru-style forecast table ---------- */
.wg-table{border-collapse:collapse; font-size:11px; font-variant-numeric:tabular-nums;}
.wg-table th, .wg-table td{padding:3px 4px; text-align:center; min-width:26px; border-right:1px solid rgba(128,128,128,.12);}
.wg-table tr{border-bottom:1px solid rgba(128,128,128,.12);}
.wg-table th:first-child{
  position:sticky; left:0; background:var(--panel); text-align:left;
  font-size:10px; color:var(--muted); font-weight:600; min-width:58px; z-index:1;
}
.wg-table tr:nth-child(-n+2) th{color:var(--muted); font-size:10px; font-weight:700;}
.wg-table td{color:var(--ink);}

/* ---------- isobar overlay labels ---------- */
.iso-lbl{background:var(--chrome); color:var(--ink); font-size:9px; padding:0 4px;
  border-radius:4px; white-space:nowrap; transform:translate(-50%,-50%); opacity:.9;}
.iso-hl{font-size:22px; font-weight:900; transform:translate(-50%,-50%);
  text-shadow:0 0 4px #fff, 0 0 6px #fff;}
.iso-hl.h{color:#1546c9;} .iso-hl.l{color:#c9151b;}

/* ---------- DWD synoptic chart viewer ---------- */
#synoptic{position:absolute; inset:0; z-index:920; background:#e8ecf0; display:flex; flex-direction:column;}
.syn-bar{
  display:flex; align-items:center; gap:8px; padding:calc(var(--safe-top) + 8px) 10px 8px;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.syn-bar .seg{flex:1;}
.syn-bar .seg button{flex:1; padding:10px 6px;}
.syn-btn{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); font-size:18px; flex-shrink:0;
}
.syn-scroll{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; position:relative;}
.syn-scroll img{display:block; width:200%; max-width:none;}
/* small floating pill — the big PNG paints progressively, which is useful
   feedback on slow marine connections; the pill says "still coming" without
   making the partial chart look broken */
.syn-loading{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); width:max-content;
  background:var(--chrome); color:var(--ink); font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:18px; border:1px solid var(--line);
  box-shadow:0 3px 12px rgba(0,0,0,.4); pointer-events:none; z-index:2;
}
.syn-attr{
  padding:6px 10px calc(var(--safe-bottom) + 8px); background:var(--panel);
  border-top:1px solid var(--line); font-size:10px; color:var(--muted); text-align:center;
}
body.theme-night #synoptic{background:#1a1a1a;}
body.theme-night .syn-scroll img{filter:brightness(.72);}

/* ---------- legend ---------- */
.leg-row{display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line);}
.leg-sym{width:30px; display:grid; place-items:center; flex-shrink:0;}
.leg-name{font-size:13px; font-weight:600;}
.leg-desc{font-size:11px; color:var(--muted); margin-top:1px;}

/* ---------- tool badge (AIS count) ---------- */
.tool-badge{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--accent); color:#06222b; font-size:10px; font-weight:800;
  display:none; align-items:center; justify-content:center; line-height:1; border:1px solid var(--bg);
}
.tool-badge.show{display:flex;}
.tool-badge.danger{background:var(--red); color:#fff;}
.tool{position:relative;}

/* ---------- wind / replay control bars ---------- */
#wind-ctrl, #replay-ctrl{
  position:absolute; left:8px; right:8px; z-index:620;
  bottom:var(--dock-bottom);
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px; display:flex; align-items:center; gap:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
#wind-ctrl input[type=range], #replay-ctrl input[type=range]{flex:1; accent-color:var(--accent); min-width:60px;}
#wind-ctrl button, #replay-ctrl button{background:var(--panel-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; min-width:40px; height:40px; font-size:14px; flex-shrink:0;}
#wind-ctrl #wf-time, #replay-ctrl span{font-size:11px; color:var(--muted); min-width:62px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ring-lbl{display:inline-block; background:var(--chrome); color:#9fdfe8; font-size:10px; padding:1px 5px; border-radius:5px; white-space:nowrap; transform:translate(-50%,-50%);}
.ring-lbl.amber{color:#f5c46a;}

/* ---------- onboarding / help overlay ---------- */
#onboard{
  position:absolute; inset:0; z-index:900; background:rgba(0,0,0,.6);
  display:grid; place-items:center; padding:18px;
}
.ob-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:18px 16px; max-width:400px; max-height:86vh; overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.ob-card h2{margin:0 0 12px; font-size:18px;}
.ob-row{display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:13px; line-height:1.45; border-bottom:1px solid var(--line);}
.ob-row .ob-g{flex-shrink:0; width:74px; font-weight:700; font-size:12px;}
.ob-warn{
  margin:12px 0; padding:10px 12px; border:1px solid var(--amber); border-radius:10px;
  background:rgba(245,166,35,.08); font-size:12px; line-height:1.45;
}

/* Hebrew: text-heavy panels read RTL; the chart layout itself stays fixed */
body.rtl-text .sheet-body, body.rtl-text .ob-card, body.rtl-text .banner,
body.rtl-text #layers-menu, body.rtl-text .toast{direction:rtl;}
body.rtl-text .banner-btn{margin-left:0; margin-right:auto;}

.hidden{display:none !important;}
.progress{height:6px; background:var(--bg); border-radius:4px; overflow:hidden; margin-top:8px;}
.progress > i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s;}

/* ---------- Night mode ---------- */
/* Red/orange-on-black preserves dark adaptation. The chrome vars remap too so
   the top/bottom bars, pills and floating buttons all go dark — no blue light. */
body.theme-night{
  --bg:#0a0a0a;--panel:#101010;--panel-2:#171717;--line:#2a2a2a;
  --ink:#ff6b3d;--muted:#c56a45;--accent:#ff6b3d;--accent-2:#ff6b3d;
  --chrome:rgba(10,10,10,.92);
  --chrome-soft:rgba(18,18,18,.78);
  --topbar-fade:linear-gradient(180deg, rgba(8,8,8,.96), rgba(8,8,8,.78) 70%, rgba(8,8,8,0));
  --bottombar-fill:#101010;
}
body.theme-night #map{filter:brightness(.55) sepia(.5) hue-rotate(-15deg) saturate(1.4);}
body.theme-night .leaflet-container{background:#1a0e08;}
body.theme-night .btn{color:#1a0800;}
body.theme-night .gps-pill.fix .dot{background:#ff6b3d; box-shadow:0 0 6px #ff6b3d;}
/* emoji glyphs can't tint — dim them so they don't glare at night */
body.theme-night .nav-btn .ico, body.theme-night .li-ico, body.theme-night .empty .big{filter:grayscale(1) sepia(1) saturate(3) hue-rotate(-25deg) brightness(.8);}