:root{
  --bg:#04070d; --panel:rgba(8,14,24,.86); --line:rgba(94,234,212,.18);
  --acc:#5eead4; --acc2:#f0a63c; --txt:#d7e4ea; --dim:#6b8291; --danger:#ff5d5d;
  --mono:'SFMono-Regular',ui-monospace,'Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:14px}
#cesiumContainer{position:absolute;inset:0}
.cesium-viewer-bottom{display:none!important}
#scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px);opacity:.35}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}

/* top bar */
#topbar{position:absolute;top:0;left:0;right:0;z-index:25;display:flex;align-items:center;gap:16px;
  padding:10px 16px;background:linear-gradient(180deg,rgba(4,7,13,.9),rgba(4,7,13,0));}
#brand{display:flex;align-items:center;gap:8px;letter-spacing:2px;font-weight:700}
#brand-mark{color:var(--acc);font-size:20px}
#brand-name b{color:var(--acc)}
#searchbar{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:6px 10px;backdrop-filter:blur(6px)}
.search-icon{color:var(--acc)}
#searchInput{flex:1;background:none;border:none;outline:none;color:var(--txt);font-family:var(--mono);font-size:14px}
#searchBtn{background:var(--acc);color:#04211c;border:none;border-radius:4px;padding:5px 14px;
  font-family:var(--mono);font-weight:700;letter-spacing:1px;cursor:pointer}
#searchBtn:hover{filter:brightness(1.15)}
#clockbox{margin-left:auto;text-align:right;line-height:1.2}
#localTime{display:block;color:var(--acc);font-size:15px}
#localTz{font-size:10px;color:var(--dim);letter-spacing:1px}

/* hero */
#hero{position:absolute;inset:0;z-index:20;display:flex;align-items:safe center;justify-content:center;overflow-y:auto;
  background:radial-gradient(ellipse at 50% 40%,rgba(4,7,13,.25),rgba(4,7,13,.88));transition:opacity .6s;padding:20px}
#hero.gone{opacity:0;pointer-events:none}
.hero-inner{max-width:640px;text-align:center}
.hero-kicker{color:var(--acc2);letter-spacing:3px;font-size:11px;margin-bottom:18px}
#hero h1{font-size:clamp(26px,4.5vw,44px);line-height:1.25;margin-bottom:18px;color:#eef7f5}
.hero-sub{color:var(--dim);line-height:1.65;margin-bottom:26px;font-size:13px}
.hero-examples{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--acc);border-radius:20px;
  padding:8px 18px;font-family:var(--mono);font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--acc);background:rgba(94,234,212,.08)}
.hero-hint{color:#3d4f5c;font-size:11px;letter-spacing:1px}

/* homepage saved/recent places */
#homePlaces{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:2px auto 20px;max-width:600px}
.hp-section{flex:1;min-width:230px;max-width:290px;text-align:left}
.hp-head{color:var(--acc2);letter-spacing:2px;font-size:10px;margin-bottom:8px;text-align:center}
.hp-list{max-height:150px;overflow-y:auto;padding-right:2px}
#homePlaces .pl-go{display:flex;flex-direction:column;width:100%}

/* loader */
#loader{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;background:rgba(4,7,13,.55);backdrop-filter:blur(2px)}
#loader.hidden{display:none}
.loader-ring{width:64px;height:64px;border:2px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loaderText{color:var(--acc);letter-spacing:3px;font-size:12px}

/* data panel */
#panel{position:absolute;top:64px;right:12px;bottom:120px;width:340px;z-index:10;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);overflow:hidden}
#panelHeader{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;
  border-bottom:1px solid var(--line);gap:8px}
#placeName{color:var(--acc);font-weight:700;font-size:14px;letter-spacing:.5px}
#placeSub{color:var(--dim);font-size:11px;margin-top:3px;word-break:break-word}
#panelToggle,#chatToggle{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;
  width:26px;height:22px;cursor:pointer;font-size:10px;flex:none;display:none}
#cards{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
#cards::-webkit-scrollbar{width:6px}#cards::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.card{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:rgba(4,9,16,.5)}
.card h3{font-size:10px;letter-spacing:2px;color:var(--acc2);margin-bottom:8px;font-weight:700}
.card .count{color:var(--acc)}
.card-body{font-size:12.5px;line-height:1.6}
.dim{color:var(--dim)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:1px 0}
.kv .k{color:var(--dim)}
.kv .v{color:var(--txt);text-align:right}
.big-metric{font-size:22px;color:var(--acc);font-weight:700}
.row-item{padding:4px 0;border-top:1px dashed rgba(94,234,212,.12)}
.row-item:first-child{border-top:none}
.row-item .sub{color:var(--dim);font-size:11px}
.mag{color:var(--acc2);font-weight:700}
a{color:var(--acc)}
.radio-btn{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;
  padding:2px 8px;cursor:pointer;font-family:var(--mono);font-size:11px;margin-right:6px}
.radio-btn.playing{background:var(--acc);color:#04211c}

/* chat */
#chat{position:absolute;left:12px;bottom:12px;width:min(430px,calc(100vw - 24px));z-index:11;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;backdrop-filter:blur(8px);overflow:hidden}
#chatHeader{padding:9px 14px;font-size:11px;letter-spacing:2px;color:var(--acc);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px}
#chatExpand{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;
  width:26px;height:22px;cursor:pointer;font-size:11px;flex:none;margin-left:auto}
#chatHeader #chatToggle{margin-left:6px}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
#messages{height:220px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
#messages::-webkit-scrollbar{width:6px}#messages::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.msg{max-width:88%;padding:8px 11px;border-radius:8px;line-height:1.55;font-size:13px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:rgba(94,234,212,.12);border:1px solid var(--line)}
.msg.bot{align-self:flex-start;background:rgba(240,166,60,.07);border:1px solid rgba(240,166,60,.22)}
.msg.bot .src{display:block;margin-top:6px;font-size:10px;color:var(--dim);letter-spacing:1px}
.msg.typing{color:var(--dim)}
#chatForm{display:flex;border-top:1px solid var(--line)}
#chatInput{flex:1;background:none;border:none;outline:none;color:var(--txt);padding:11px 14px;font-family:var(--mono);font-size:13px}
#chatSend{background:none;border:none;color:var(--acc);font-size:16px;cursor:pointer;padding:0 14px}

/* hud */
#hud{position:absolute;right:12px;bottom:12px;z-index:10;text-align:right}
#coords{font-size:10.5px;color:var(--dim);letter-spacing:1px;margin-bottom:8px}
#toggles{display:flex;gap:12px;justify-content:flex-end;align-items:center;font-size:10.5px;letter-spacing:1px}
#toggles label{color:var(--dim);cursor:pointer;display:flex;gap:4px;align-items:center}
#toggles input{accent-color:var(--acc)}
#resetGlobe{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;
  padding:4px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;cursor:pointer}
#resetGlobe:hover{background:rgba(94,234,212,.1)}

/* toast */
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:40;background:var(--panel);
  border:1px solid var(--danger);color:#ffb3b3;padding:10px 18px;border-radius:6px;font-size:13px}
#toast.hidden{display:none}

@media (max-width:820px){
  #topbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  #brand-name{font-size:13px}
  #searchbar{order:3;flex-basis:100%;max-width:none}
  #clockbox{margin-left:auto}
  #panel{top:118px;left:10px;right:10px;bottom:auto;width:auto;max-height:38vh;border-radius:8px}
  #panel.collapsed-mobile #cards{display:none}
  #panelToggle{display:block}
  #chat{left:0;bottom:0;width:100%;border-radius:10px 10px 0 0}
  #chat.minimized #chatBody{display:none}
  #chatToggle{display:block}
  #hud{display:none}
  #messages{height:170px}
  .hp-list{max-height:16vh}
  .hp-section{min-width:200px}
  #homePlaces{gap:10px;margin-bottom:14px}
  .hero-sub{margin-bottom:18px}
  #hero{padding-bottom:340px}
}

/* webcams */
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cam-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;cursor:pointer;background:rgba(0,0,0,.25)}
.cam-item:hover{border-color:var(--acc)}
.cam-thumb{width:100%;height:78px;object-fit:cover;display:block;background:#000}
.cam-live-btn{height:78px;display:flex;align-items:center;justify-content:center;gap:6px;color:#fbbf24;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;background:rgba(251,191,36,.06)}
.cam-meta{padding:5px 7px;font-size:10.5px;line-height:1.35}
.cam-meta b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-meta span{color:var(--dim)}
.cam-item.cam-off .cam-thumb{opacity:.25;filter:grayscale(1)}
.cam-item.cam-off::after{content:'FEED OFFLINE';display:block;text-align:center;color:var(--danger);font-size:9px;letter-spacing:1px;padding:2px 0}
#camModal{position:fixed;inset:0;z-index:60;background:rgba(2,6,10,.82);display:flex;align-items:center;justify-content:center;padding:18px}
#camModal.hidden{display:none}
#camModalBox{background:var(--panel);border:1px solid var(--line);border-radius:8px;max-width:720px;width:100%;max-height:88vh;display:flex;flex-direction:column}
#camModalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
#camModalClose{background:none;border:none;color:var(--acc);font-size:15px;cursor:pointer}
#camModalBody{padding:12px 14px;overflow:auto}
#camModalBody img,#camModalBody video{width:100%;border-radius:6px;background:#000;display:block}
#camModalNote{margin-top:8px;font-size:11px}
@media (max-width:820px){
  .cam-grid{grid-template-columns:1fr 1fr}
  #camModalBox{max-height:76vh}
}

/* place actions (save / share) */
#placeActions{display:flex;gap:8px;margin-top:8px}
.actbtn{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;
  padding:3px 10px;font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:pointer}
.actbtn:hover{border-color:var(--acc);filter:brightness(1.15)}
.actbtn.on{background:rgba(94,234,212,.14);border-color:var(--acc)}
.mini-btn{background:none;border:1px solid var(--line);color:var(--dim);border-radius:3px;
  padding:1px 7px;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;cursor:pointer;margin-left:6px}
.mini-btn:hover{color:var(--danger);border-color:var(--danger)}

/* saved / history rows */
.pl-row{display:flex;align-items:stretch;gap:6px;margin-bottom:6px}
.pl-go{flex:1;min-width:0;text-align:left;background:rgba(94,234,212,.05);border:1px solid var(--line);
  border-radius:5px;padding:6px 9px;cursor:pointer;display:flex;flex-direction:column;gap:1px;font-family:var(--mono)}
.pl-go:hover{border-color:var(--acc);background:rgba(94,234,212,.12)}
.pl-name{color:var(--acc);font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{color:var(--dim);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-del{background:none;border:1px solid var(--line);border-radius:5px;color:var(--dim);
  padding:0 8px;cursor:pointer;font-size:11px}
.pl-del:hover{color:var(--danger);border-color:var(--danger)}

/* share sheet */
#shareSheet{position:fixed;inset:0;z-index:60;background:rgba(2,6,10,.82);display:flex;align-items:center;justify-content:center;padding:18px}
#shareSheet.hidden{display:none}
#shareBox{background:var(--panel);border:1px solid var(--line);border-radius:8px;max-width:420px;width:100%;padding:0 0 12px}
#shareHead{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:1px;color:var(--acc)}
#shareHead button{background:none;border:none;color:var(--acc);font-size:15px;cursor:pointer}
#sharePlace{padding:10px 14px 4px;font-size:12px;color:var(--txt)}
#shareGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px}
.share-opt{background:rgba(94,234,212,.06);border:1px solid var(--line);border-radius:5px;color:var(--txt);
  padding:9px 10px;font-family:var(--mono);font-size:12px;cursor:pointer;text-align:left}
.share-opt:hover{border-color:var(--acc);background:rgba(94,234,212,.14);color:var(--acc)}
#shareNote{padding:0 14px;font-size:10.5px;color:var(--dim);line-height:1.5}
@media (max-width:640px){ #shareGrid{grid-template-columns:1fr 1fr} }

/* housing */
.kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:12px}
.kv span{color:var(--dim)}
.kv b{color:var(--txt);font-weight:700}
.kv b.up{color:var(--acc)}
.kv b.down{color:var(--danger)}
.src-note{font-size:10.5px;color:var(--dim);line-height:1.5;margin-top:6px}
.out-link{display:block;color:var(--acc);font-size:12px;margin-top:6px;text-decoration:none}
.out-link:hover{text-decoration:underline}

/* street imagery */
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.st-item{position:relative;display:block;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#000}
.st-item img{width:100%;height:84px;object-fit:cover;display:block}
.st-item:hover{border-color:var(--acc)}
.st-src{position:absolute;left:0;right:0;bottom:0;font-size:8.5px;color:#d7e4ea;background:rgba(2,6,10,.72);padding:1px 5px;letter-spacing:.5px}

/* v16 - street level + signals */
.osm-wrap{position:relative;width:100%;aspect-ratio:16/10;border:1px solid rgba(94,234,212,.25);border-radius:6px;overflow:hidden;background:#0b1220}
.osm-frame{width:100%;height:100%;border:0}
.osm-credit{font-size:10.5px;color:var(--dim);margin:4px 0 8px}
.osm-credit a{color:var(--acc);text-decoration:none}
.osm-credit a:hover{text-decoration:underline}
.st-broken{display:flex;align-items:center;justify-content:center;min-height:74px;color:var(--dim);font-size:10.5px;border:1px dashed rgba(94,234,212,.25);border-radius:6px;text-align:center;padding:6px}
.rf-group{margin-top:10px}
.rf-group:first-child{margin-top:2px}
.rf-group>b{display:block;font-size:11px;letter-spacing:.08em;margin-bottom:2px}

/* ---------- v17 - listen & decode + chat upgrade ---------- */
.ear-btn{background:none;border:1px solid var(--acc);color:var(--acc);border-radius:4px;
  padding:5px 12px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1px;margin-top:4px}
.ear-btn.playing{background:var(--danger);border-color:var(--danger);color:#2a0505}
.ear-state{color:var(--dim);font-size:10.5px;margin-left:8px}
.ear-live{color:var(--acc);font-size:11.5px;min-height:15px;margin-top:7px;font-style:italic;word-break:break-word}
.ear-log{margin-top:6px;max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.ear-log::-webkit-scrollbar{width:5px}.ear-log::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ear-line{font-size:11.5px;line-height:1.5;border-top:1px dashed rgba(94,234,212,.12);padding-top:4px}
.ear-ts{color:var(--dim);font-size:9.5px;margin-right:6px;letter-spacing:.5px}
.code-note{color:var(--acc2);font-size:10px}
#decodeForm{display:flex;gap:6px;margin-top:5px}
#decodeInput{flex:1;min-width:0;background:rgba(4,9,16,.6);border:1px solid var(--line);border-radius:4px;
  color:var(--txt);padding:6px 8px;font-family:var(--mono);font-size:12px;outline:none}
#decodeInput:focus{border-color:var(--acc)}
.decode-hits{margin-top:7px;font-size:11.5px;line-height:1.65}
.decode-hits b{color:var(--acc)}
#chat.expanded{width:min(780px,calc(100vw - 24px))}
#chat.expanded #messages{height:min(52vh,560px)}
@media (max-width:820px){
  #chat{z-index:26}
  #chat.expanded{position:fixed;top:5vh;left:0;right:0;bottom:0;width:100%;border-radius:14px 14px 0 0;
    display:flex;flex-direction:column;z-index:58}
  #chat.expanded #chatBody{flex:1;display:flex;flex-direction:column;min-height:0}
  #chat.expanded #messages{flex:1;height:auto}
  body.chat-open #panel{display:none}
  .msg{font-size:14px;line-height:1.6;max-width:92%}
  #chatInput{font-size:16px;padding:13px 14px}
  #messages{height:190px}
}

/* ---------- v19: in-app live streams, traffic, voice briefing ---------- */
.live-btn{display:block;width:100%;text-align:left;background:rgba(125,255,138,.06);border:1px solid rgba(125,255,138,.35);
  color:#7dff8a;border-radius:4px;padding:7px 9px;margin-top:6px;font:11.5px/1.4 monospace;cursor:pointer}
.live-btn:hover{background:rgba(125,255,138,.14);border-color:#7dff8a}
.live-sub{display:block;color:var(--dim);font-size:10px;margin-top:2px}
.tr-legend{font-size:11px;margin:2px 0 8px;letter-spacing:.04em}
.tr-row{display:flex;gap:8px;padding:6px 0;border-top:1px dashed rgba(94,234,212,.12);font-size:11.5px;line-height:1.45}
.tr-row:first-of-type{border-top:none}
.tr-ico{font-size:13px;line-height:1.2;flex:0 0 16px;text-align:center}
.tr-row .sub{color:var(--dim);font-size:10.5px;margin-top:1px}
.tr-delay{color:#ffd166;font-size:11px;margin-top:1px}
.out-link.inline{display:inline;margin-top:0}
#streamModal{position:fixed;inset:0;z-index:60;background:rgba(2,6,10,.84);display:flex;align-items:center;justify-content:center;padding:18px}
#streamModal.hidden{display:none}
#streamModalBox{background:var(--panel);border:1px solid var(--line);border-radius:8px;max-width:760px;width:100%;max-height:88vh;display:flex;flex-direction:column}
#streamModalHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.04em}
#streamModalClose{background:none;border:none;color:var(--acc);font-size:15px;cursor:pointer}
#streamModalBody{padding:12px 14px;overflow:auto}
.stream-wrap{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:6px;overflow:hidden}
.stream-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.actbtn.brief{border-color:rgba(125,255,138,.5);color:#7dff8a}
.actbtn.brief:hover{border-color:#7dff8a}
#briefBar{margin:10px 12px 0;padding:10px 12px;border:1px solid rgba(125,255,138,.35);border-radius:6px;background:rgba(125,255,138,.05)}
#briefBar.hidden{display:none}
#briefHead{display:flex;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.08em;color:#7dff8a;margin-bottom:6px}
#briefText{font-size:12px;line-height:1.6;margin-bottom:8px}
#briefControls{display:flex;gap:8px}
#briefControls .radio-btn{flex:1}
@media (max-width:720px){
  #streamModalBox{max-height:80vh}
  #briefBar{margin:8px 10px 0}
}

/* globe controls: zoom + legend (v20) */
#globeCtl{position:absolute;left:12px;bottom:325px;z-index:12;display:flex;flex-direction:column;gap:8px}
.gctl{width:44px;height:44px;border-radius:8px;background:var(--panel);border:1px solid var(--line);
  color:var(--acc);font-family:var(--mono);font-size:22px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.gctl:hover{background:rgba(94,234,212,.12);border-color:var(--acc)}
.gctl:active{transform:scale(.94)}
.gctl:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gctl-legend{font-size:9px;letter-spacing:1px;color:var(--acc2);height:30px}

/* dot detail card (v20) */
#dotCard{position:fixed;z-index:45;width:min(300px,calc(100vw - 24px));max-height:min(62vh,480px);
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.55);overflow:hidden}
#dotCard.hidden{display:none}
#dotCardHead{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line)}
#dotCardBadge{font-size:9px;letter-spacing:1px;padding:2px 6px;border:1px solid var(--line);border-radius:3px;color:var(--acc2);white-space:nowrap}
#dotCardTitle{flex:1;font-size:12px;color:var(--txt);font-weight:700;word-break:break-word}
#dotCardClose{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;width:24px;height:22px;cursor:pointer;font-size:10px;flex:none}
#dotCardBody{overflow-y:auto;padding:10px 12px;font-size:12px;line-height:1.55}
.dc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dc-btn{background:var(--acc);color:#04211c;border:none;border-radius:4px;padding:7px 12px;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1px;cursor:pointer;text-decoration:none;display:inline-block}
.dc-btn.ghost{background:none;border:1px solid var(--line);color:var(--acc)}
.dc-note{margin-top:8px;color:var(--dim);font-size:10.5px;line-height:1.5}

/* map legend sheet (v20) */
#legendSheet{position:fixed;inset:0;z-index:60;background:rgba(2,6,10,.82);display:flex;align-items:center;justify-content:center;padding:18px}
#legendSheet.hidden{display:none}
#legendBox{width:min(430px,100%);max-height:84vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(8px)}
#legendHead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--acc);letter-spacing:2px;font-size:12px}
#legendClose{background:none;border:1px solid var(--line);color:var(--acc);border-radius:4px;width:26px;height:22px;cursor:pointer;font-size:10px}
#legendBody{padding:12px 16px;font-size:12px}
.lg-group{margin-bottom:12px}
.lg-group>b{display:block;color:var(--acc2);font-size:10px;letter-spacing:2px;margin-bottom:6px}
.lg-row{display:flex;align-items:center;gap:9px;padding:2px 0;color:var(--txt);flex-wrap:wrap}
.lg-row .lg-dot{margin-left:0}
.lg-dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.lg-row span[style*="color"]{width:14px;text-align:center;flex:none}
.lg-foot{color:var(--dim);font-size:10.5px;border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}

@media (max-width:820px){
  #globeCtl{left:10px;right:auto;bottom:286px;z-index:27;flex-direction:row;gap:8px;align-items:flex-end}
  .gctl{width:46px;height:46px;font-size:23px}
  .gctl-legend{font-size:9px;letter-spacing:1px;height:46px;width:62px}
}

/* v21 alerts + voice */
.alert-plan{border-color:rgba(251,191,36,.45);color:#fbbf24}
#briefVoice{color:#7dff8a}
.alert-box{width:min(560px,calc(100vw - 24px));max-height:min(820px,calc(100vh - 24px));overflow:auto}
.alert-box label,.alert-box fieldset{display:block;color:#cbd5e1;font-size:12px;letter-spacing:.04em;margin:10px 0}
.alert-box input:not([type=checkbox]),.alert-box select{width:100%;margin-top:5px;background:#071018;border:1px solid #264457;color:#eef6f8;border-radius:6px;padding:10px;font:inherit}
.alert-box fieldset{border:1px solid #203846;border-radius:8px;padding:8px 12px}.alert-box fieldset label{margin:7px 0}.alert-box input[type=checkbox]{margin-right:7px}
.alert-status,.alert-safety{border:1px solid #31495a;background:rgba(8,23,32,.86);padding:10px;border-radius:8px;font-size:11px;line-height:1.45}.alert-status strong{display:block;color:#fbbf24;margin-bottom:3px}.alert-safety strong{color:#7dff8a}
.alert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.alert-preview{white-space:pre-wrap;word-break:break-word;background:#03090d;color:#9ad5df;border-radius:7px;padding:10px;min-height:34px;font:10px/1.45 ui-monospace,monospace;margin-top:10px}.modal-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.danger{border-color:#ff5d5d!important;color:#ff8d8d!important}
@media(max-width:600px){.alert-box{max-height:calc(100vh - 10px);width:calc(100vw - 10px)}.alert-grid{grid-template-columns:1fr}.modal-actions .radio-btn{flex:1 1 45%;min-height:44px}}

.modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:rgba(0,5,9,.78);backdrop-filter:blur(4px)}.modal-box{position:relative;z-index:1;background:#07131b;border:1px solid #28556a;border-radius:10px;box-shadow:0 22px 80px rgba(0,0,0,.65);padding:16px;color:#d9edf0}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.modal-head h2{margin:2px 0 0;font-size:18px;color:#5eead4}.modal-x{background:#0b1d27;border:1px solid #365568;border-radius:6px;color:#cce7ed;width:40px;height:40px}.eyebrow{font-size:10px;letter-spacing:.18em;color:#fbbf24}

/* v22: alert destinations */
.dest-list{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.dest-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:6px 8px}
.dest-kind{font-size:10px;letter-spacing:.12em;color:#7dd3fc;flex:0 0 auto}
.dest-val{font-size:12px;word-break:break-all;flex:1 1 140px}
.dest-code{width:56px;font-size:12px;padding:3px 6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:inherit}
.dest-add{display:flex;gap:6px;margin:6px 0}
.dest-add input{flex:1;min-width:0}
.chip{font-size:9px;letter-spacing:.1em;padding:2px 6px;border-radius:20px;flex:0 0 auto}
.chip.ok{background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(74,222,128,.35)}
.chip.warn{background:rgba(234,179,8,.14);color:#eab308;border:1px solid rgba(234,179,8,.3)}
.mini-btn.danger{color:#ff5d5d;border-color:rgba(255,93,93,.4)}

/* ---------- v24: my location + travel mode ---------- */
#locBtn,#travelBtn{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line,#2a3550);color:var(--ink,#e8edf7);
  padding:8px 12px;border-radius:8px;font:700 11px/1 monospace;letter-spacing:1px;cursor:pointer;white-space:nowrap}
#locBtn:hover,#travelBtn:hover{border-color:var(--acc)}
#locBtn.busy{opacity:.6;pointer-events:none}
#locBtn span{font-size:10px}
#travelBtn.live{border-color:#38bdf8;color:#38bdf8}
#travelBanner{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;
  background:#2a1207;border:1px solid #f0a63c;color:#ffd9a0;padding:10px 14px;border-radius:10px;font:12px/1.4 monospace;max-width:min(92vw,560px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#travelBanner a{color:#5eead4;font-weight:700;white-space:nowrap}
#travelBanner button{background:none;border:none;color:#ffd9a0;cursor:pointer;font-size:13px}
#travelPanel{position:fixed;left:12px;bottom:12px;z-index:60;width:min(92vw,340px);background:var(--panel,#131a2b);border:1px solid var(--line,#2a3550);
  border-radius:12px;padding:12px 14px;font:11px/1.5 monospace;color:var(--ink,#e8edf7);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.tp-title{font-weight:700;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tp-state{padding:2px 8px;border-radius:6px;background:#333;font-size:10px}
.tp-state.live{background:#0c4a3a;color:#5eead4}
.tp-state.warn{background:#4a3a0c;color:#eab308}
.tp-fix{color:#9fb0cc;margin-bottom:8px}
.tp-row{display:flex;gap:8px;margin-bottom:8px}
.tp-note{color:#7688aa;font-size:10px;margin-top:6px;border-top:1px dashed var(--line,#2a3550);padding-top:6px}
.hidden{display:none!important}


/* ---------- v28: PWA install + update bar ---------- */
#installBtn{display:inline-flex;align-items:center;gap:5px}
#installBtn.installed{opacity:.55;cursor:default;border-color:#2a3550}
#installCard{max-width:430px;width:calc(100vw - 24px)}
.install-os p{margin:6px 0;font-size:13px;line-height:1.5}
.install-os ol{margin:6px 0 10px 18px;font-size:13px;line-height:1.6}
.install-note{font-size:11px;color:#8fb3bd;line-height:1.5;margin-top:10px}
.install-go{display:block;width:100%;margin:10px 0 4px;padding:12px;border-radius:8px;border:1px solid #5eead4;background:#04211c;color:#5eead4;font-weight:700;letter-spacing:.08em}
.install-go:disabled{opacity:.45;cursor:default}
#updateBar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:10px;background:#07131b;border:1px solid #5eead4;border-radius:9px;padding:9px 12px;color:#d9edf0;font-size:12px;box-shadow:0 12px 44px rgba(0,0,0,.6)}
#updateBar.hidden{display:none}
#updateBtn{background:#5eead4;color:#04211c;border:none;border-radius:6px;padding:7px 12px;font-weight:700}
@media(max-width:600px){#installBtn span{display:none}#updateBar{width:calc(100vw - 20px);box-sizing:border-box}}

#aboutLink{display:inline-flex;align-items:center;padding:0 12px;height:34px;border:1px solid #2a3550;border-radius:7px;color:#8fb3bd;font:11px ui-monospace,monospace;letter-spacing:.1em;text-decoration:none}
#aboutLink:hover{color:#5eead4;border-color:#5eead4}
@media(max-width:600px){#aboutLink{height:30px;padding:0 9px;font-size:10px}}

.chip-link{display:inline-flex;align-items:center;border:1px solid #2a3550;border-radius:999px;padding:6px 14px;color:#8fb3bd;font:11px ui-monospace,monospace;letter-spacing:.06em;text-decoration:none}
.chip-link:hover{color:#5eead4;border-color:#5eead4}
@media(max-width:600px){#aboutLink{display:none}}


/* ---------- v30: mobile home hierarchy + install discoverability ---------- */
@media(max-width:600px){
  #topbar{gap:6px;padding:7px 9px}
  #clockbox{display:none}
  #topbar button,#aboutLink{height:34px;padding:0 9px;font-size:10px;letter-spacing:.05em;border-radius:7px;flex:0 0 auto}
  #aboutLink{display:inline-flex;align-items:center}
  #installBtn span{display:inline}
  #locBtnTxt{display:none}
  .hero-examples .chip-link{display:none}
  #brand{flex:0 0 auto;margin-right:auto}
  #hero{align-items:flex-start;padding-top:112px;padding-bottom:300px}
  #hero h1{font-size:23px;line-height:1.22;margin-bottom:12px}
  .hero-kicker{font-size:9px;letter-spacing:.22em;margin-bottom:8px}
  .hero-sub{display:none}
  .hero-examples{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 2px;max-width:100%;-webkit-overflow-scrolling:touch}
  .hero-examples::-webkit-scrollbar{display:none}
  .chip,.chip-link{white-space:nowrap;flex:0 0 auto}
  #hero:not(.gone)~#panel.collapsed-mobile{display:none}
}

/* v30: very small phones (<=380px) - keep header on one row, INSTALL stays labeled */
@media(max-width:380px){
  #topbar{gap:4px;padding:6px}
  #topbar button,#aboutLink{height:31px;padding:0 6px;font-size:9px;letter-spacing:.03em}
  #brand-name{font-size:12px;letter-spacing:.16em}
  #brand-mark{font-size:13px}
  #brand{gap:5px}
}
.tp-state.err{background:#4a0c0c;color:#f87171}

/* v31: primary hero location CTA; header locBtn yields while hero is visible */
#heroLocBtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;margin:20px auto 6px;background:var(--acc);color:#04211c;border:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:15px;line-height:1;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 24px rgba(94,234,212,.35)}
#heroLocBtn.busy{opacity:.75}
#heroLocBtn.blocked{background:#7f1d1d;color:#fecaca;box-shadow:0 4px 24px rgba(248,113,113,.25)}
#heroLocNote{font-size:11px;color:#aebfd0;text-align:center;margin:0 auto 14px;letter-spacing:.04em;max-width:340px;background:rgba(6,12,18,.72);padding:6px 10px;border-radius:8px}
body:has(#hero:not(.gone)) #locBtn{display:none}
@media(max-width:600px){#heroLocBtn{width:100%;min-height:54px;font-size:14px}}