@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Exo+2:wght@300;400;500;600&display=swap');

:root {
  --hud: #00d4ff;
  --hud-glow: rgba(0,212,255,0.40);
  --hud-dim: rgba(0,212,255,0.06);
  --hud-border: rgba(0,212,255,0.18);
  --red: #ff3d3d;
  --green: #00ff88;
  --gold: #ffa500;
  --bg: #020c16;
  --panel: rgba(0,10,22,0.97);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body { width:100%; height:100dvh; background:var(--bg); font-family:'Exo 2',sans-serif; overflow:hidden }

/* ── SHELL ── */
.shell { display:flex; flex-direction:column; width:100vw; height:100dvh; background:var(--bg); position:relative; overflow:hidden; padding-bottom:env(safe-area-inset-bottom) }
.grid-bg { position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--hud-dim) 1px,transparent 1px),linear-gradient(90deg,var(--hud-dim) 1px,transparent 1px);
  background-size:40px 40px }
#particleCanvas { position:absolute; inset:0; z-index:0; pointer-events:none }
.scanline { position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.05) 3px,rgba(0,0,0,0.05) 4px) }
.corner { position:absolute; width:22px; height:22px; pointer-events:none; z-index:10 }
.corner.tl { top:10px; left:10px; border-top:2px solid var(--hud); border-left:2px solid var(--hud) }
.corner.tr { top:10px; right:10px; border-top:2px solid var(--hud); border-right:2px solid var(--hud) }
.corner.bl { bottom:10px; left:10px; border-bottom:2px solid var(--hud); border-left:2px solid var(--hud) }
.corner.br { bottom:10px; right:10px; border-bottom:2px solid var(--hud); border-right:2px solid var(--hud) }

/* ── HEADER ── */
.hdr { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:11px 24px 10px; border-bottom:1px solid var(--hud-border); background:var(--panel); flex-shrink:0 }
.hdr-left { display:flex; align-items:center; gap:14px }
.arc { width:42px; height:42px; border-radius:50%; border:2px solid var(--hud); display:flex; align-items:center;
  justify-content:center; position:relative; cursor:pointer; animation:arcpulse 2.5s ease-in-out infinite; flex-shrink:0 }
.arc::before { content:''; position:absolute; width:28px; height:28px; border-radius:50%;
  border:1.5px solid rgba(0,212,255,0.28); animation:arcpulse 2.5s ease-in-out infinite reverse }
.arc-dot { width:9px; height:9px; border-radius:50%; background:var(--hud); z-index:1 }
@keyframes arcpulse { 0%,100%{box-shadow:0 0 8px var(--hud-glow)} 50%{box-shadow:0 0 26px var(--hud-glow),0 0 52px rgba(0,212,255,0.10)} }
.hdr-title { font-family:'Orbitron',monospace; font-size:17px; font-weight:700; color:var(--hud); letter-spacing:4px; text-shadow:0 0 14px var(--hud-glow) }
.hdr-sub { font-size:9px; color:rgba(0,212,255,0.4); letter-spacing:2px; font-family:'Share Tech Mono',monospace; margin-top:2px }
.hdr-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px }
.status-row { display:flex; align-items:center; gap:8px }
.sdot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
.stxt { font-family:'Share Tech Mono',monospace; font-size:11px; color:rgba(0,255,136,0.85); letter-spacing:1.5px }
.model-badge { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.55);
  padding:2px 8px; border:1px solid rgba(0,212,255,0.2); border-radius:3px; letter-spacing:1px }
.browser-badge { font-family:'Share Tech Mono',monospace; font-size:9px; padding:2px 8px; border-radius:3px; letter-spacing:1px }
.browser-badge.ok { color:rgba(0,255,136,0.75); border:1px solid rgba(0,255,136,0.25) }
.browser-badge.warn { color:rgba(255,165,0,0.85); border:1px solid rgba(255,165,0,0.3) }

/* ── METRICS BAR ── */
.metrics { position:relative; z-index:10; display:flex; border-bottom:1px solid var(--hud-border); background:rgba(0,7,16,0.92); flex-shrink:0 }
.metric { flex:1; padding:6px 12px; border-right:1px solid var(--hud-border); cursor:default }
.metric:last-child { border-right:none }
.metric.clickable { cursor:pointer }
.metric.clickable:hover .mval { color:#fff }
.mlbl { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.38); letter-spacing:1.5px; text-transform:uppercase }
.mval { font-family:'Orbitron',monospace; font-size:12px; font-weight:500; color:var(--hud); margin-top:2px; transition:color 0.2s }
.mbar { height:2px; background:rgba(0,212,255,0.07); border-radius:1px; overflow:hidden; margin-top:3px }
.mfill { height:100%; border-radius:1px; transition:width 0.6s ease }

/* ── TABS ── */
.tabs { display:flex; background:rgba(0,5,12,0.95); border-bottom:1px solid var(--hud-border); flex-shrink:0; z-index:10; position:relative }
.tab { flex:1; padding:8px 4px; text-align:center; cursor:pointer; font-family:'Share Tech Mono',monospace; font-size:10px;
  color:rgba(0,212,255,0.35); letter-spacing:1px; border-right:1px solid var(--hud-border); transition:all 0.2s; user-select:none }
.tab:last-child { border-right:none }
.tab:hover { color:rgba(0,212,255,0.7); background:rgba(0,212,255,0.04) }
.tab.active { color:var(--hud); background:rgba(0,212,255,0.08); border-bottom:2px solid var(--hud) }

/* ── TAB PANELS ── */
.panel { display:none; flex:1; flex-direction:column; overflow:hidden }
.panel.active { display:flex }

/* ── CONTENT ── */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:5 }

/* ── VOICE CORE ── */
.voice-core { display:flex; flex-direction:column; align-items:center; padding:10px 24px 8px; gap:8px;
  background:rgba(0,4,10,0.78); border-bottom:1px solid var(--hud-border); flex-shrink:0 }
.waveform-wrap { width:100%; height:40px }
#waveCanvas { width:100%; height:40px; display:block }
.viz-row { display:flex; align-items:center; gap:28px; justify-content:center; width:100% }
.viz-dots { display:flex; align-items:center; gap:10px }
.vdot { width:12px; height:12px; border-radius:50%; background:rgba(0,212,255,0.15); border:1.5px solid rgba(0,212,255,0.3); transition:background 0.15s,box-shadow 0.15s,transform 0.15s }
.viz-dots.standby .vdot { background:rgba(0,212,255,0.10); border-color:rgba(0,212,255,0.2); box-shadow:none }
.viz-dots.listening .vdot { background:var(--red); border-color:var(--red); animation:dotbeat-red 0.55s ease-in-out infinite }
.viz-dots.listening .vdot:nth-child(2){animation-delay:.1s} .viz-dots.listening .vdot:nth-child(3){animation-delay:.2s}
.viz-dots.listening .vdot:nth-child(4){animation-delay:.3s} .viz-dots.listening .vdot:nth-child(5){animation-delay:.4s}
.viz-dots.thinking .vdot { background:var(--gold); border-color:var(--gold); animation:dotbeat-gold 0.9s ease-in-out infinite }
.viz-dots.thinking .vdot:nth-child(2){animation-delay:.18s} .viz-dots.thinking .vdot:nth-child(3){animation-delay:.36s}
.viz-dots.thinking .vdot:nth-child(4){animation-delay:.54s} .viz-dots.thinking .vdot:nth-child(5){animation-delay:.72s}
.viz-dots.speaking .vdot { background:var(--green); border-color:var(--green); animation:dotbeat-green 0.4s ease-in-out infinite }
.viz-dots.speaking .vdot:nth-child(1){animation-delay:.0s;animation-duration:.38s}
.viz-dots.speaking .vdot:nth-child(2){animation-delay:.08s;animation-duration:.42s}
.viz-dots.speaking .vdot:nth-child(3){animation-delay:.16s;animation-duration:.36s}
.viz-dots.speaking .vdot:nth-child(4){animation-delay:.24s;animation-duration:.44s}
.viz-dots.speaking .vdot:nth-child(5){animation-delay:.32s;animation-duration:.40s}
@keyframes dotbeat-red  {0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,61,61,0.6)}  50%{transform:scale(1.55);box-shadow:0 0 10px 4px rgba(255,61,61,0)}}
@keyframes dotbeat-gold {0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,165,0,0.5)}  50%{transform:scale(1.45);box-shadow:0 0 10px 4px rgba(255,165,0,0)}}
@keyframes dotbeat-green{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,136,0.55)} 50%{transform:scale(1.60);box-shadow:0 0 12px 5px rgba(0,255,136,0)}}
.orb-ring { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.orb-ring::before,.orb-ring::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(0,212,255,0.18) }
.orb-ring::before { width:72px; height:72px; animation:spin1 5s linear infinite }
.orb-ring::after  { width:56px; height:56px; animation:spin1 8s linear infinite reverse }
@keyframes spin1 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.orb { width:48px; height:48px; border-radius:50%; background:rgba(0,18,32,0.92); border:2px solid rgba(0,212,255,0.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; z-index:2;
  transition:border-color 0.3s,background 0.3s; user-select:none }
.orb:hover  { border-color:var(--hud); background:rgba(0,38,58,0.9) }
.orb.listening { border-color:var(--red);   background:rgba(38,0,0,0.9);   animation:orbred   0.6s ease-in-out infinite }
.orb.speaking  { border-color:var(--green); background:rgba(0,28,14,0.9);  animation:orbgreen 1.0s ease-in-out infinite }
.orb.thinking  { border-color:var(--gold);  background:rgba(28,14,0,0.9) }
.orb.error     { border-color:var(--red);   background:rgba(28,0,0,0.9) }
@keyframes orbred  {0%,100%{box-shadow:0 0 0 0 rgba(255,61,61,0.45)}  50%{box-shadow:0 0 0 12px rgba(255,61,61,0)}}
@keyframes orbgreen{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,0.40)} 50%{box-shadow:0 0 0 12px rgba(0,255,136,0)}}
.orb-state { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:2px; color:rgba(0,212,255,0.55); text-transform:uppercase }
.orb-tip   { font-family:'Share Tech Mono',monospace; font-size:9px;  color:rgba(0,212,255,0.26); letter-spacing:1px; text-align:center }
.transcript-zone { width:100%; background:rgba(0,12,24,0.88); border:1px solid rgba(0,212,255,0.1); border-radius:6px;
  padding:7px 14px; min-height:30px; font-size:12px; color:rgba(200,240,255,0.45); font-family:'Share Tech Mono',monospace;
  letter-spacing:0.5px; line-height:1.5; border-left:2px solid rgba(0,212,255,0.22); transition:border-left-color 0.3s,color 0.3s }
.transcript-zone.active { color:rgba(200,240,255,0.92); border-left-color:var(--hud) }

/* ── CHAT LOG ── */
.chatlog { flex:1; overflow-y:auto; padding:12px 20px; display:flex; flex-direction:column; gap:9px;
  scrollbar-width:thin; scrollbar-color:rgba(0,212,255,0.14) transparent }
.chatlog::-webkit-scrollbar { width:4px }
.chatlog::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.14); border-radius:2px }
.msg { display:flex; flex-direction:column; gap:3px; animation:msgIn 0.28s ease }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg.user   { align-items:flex-end }
.msg.friday { align-items:flex-start }
.bubble { max-width:80%; padding:9px 14px; border-radius:8px; font-size:13px; line-height:1.68 }
.msg.user   .bubble { background:rgba(0,212,255,0.07); border:1px solid rgba(0,212,255,0.18); color:rgba(255,255,255,0.82); border-bottom-right-radius:2px }
.msg.friday .bubble { background:rgba(0,20,38,0.92); border:1px solid rgba(0,212,255,0.13); color:rgba(210,245,255,0.92); border-bottom-left-radius:2px; border-left:2px solid var(--hud) }
.ftag  { font-family:'Orbitron',monospace; font-size:9px; color:rgba(0,212,255,0.58); letter-spacing:1.5px; font-weight:700; margin-bottom:2px }
.mmeta { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.22); padding:0 3px }
.typing-bubble { display:flex; align-items:center; gap:5px; padding:10px 14px }
.td { width:6px; height:6px; border-radius:50%; background:var(--hud); animation:tdot 1.4s infinite }
.td:nth-child(2){animation-delay:.2s} .td:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
.tool-badge { display:inline-flex; align-items:center; gap:5px; font-family:'Share Tech Mono',monospace; font-size:9px;
  color:rgba(0,255,136,0.75); background:rgba(0,255,136,0.06); border:1px solid rgba(0,255,136,0.22);
  border-radius:3px; padding:2px 8px; margin-bottom:5px; letter-spacing:1px }

/* ── QUOTA ALERT ── */
.quota-alert { display:none; align-items:center; gap:10px; padding:9px 18px;
  background:rgba(255,165,0,0.08); border-bottom:1px solid rgba(255,165,0,0.25);
  font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(255,165,0,0.85); letter-spacing:1px; flex-shrink:0; z-index:9; position:relative }
.quota-alert.show { display:flex }
.quota-bar-wrap { flex:1; height:3px; background:rgba(255,165,0,0.15); border-radius:2px; overflow:hidden }
.quota-bar { height:100%; background:var(--gold); border-radius:2px; transition:width 1s linear }

/* ── BOTTOM ── */
.bottom { position:relative; z-index:10; padding:9px 18px 12px; border-top:1px solid var(--hud-border); background:rgba(0,6,14,0.97); flex-shrink:0 }
.quick-cmds { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px }
.qc { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(0,212,255,0.5); background:rgba(0,212,255,0.04);
  border:1px solid rgba(0,212,255,0.12); padding:4px 9px; border-radius:4px; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px; white-space:nowrap }
.qc:hover { color:var(--hud); border-color:rgba(0,212,255,0.32); background:rgba(0,212,255,0.09) }
.input-row { display:flex; gap:9px; align-items:center }
.tinp { flex:1; background:rgba(0,14,28,0.88); border:1px solid rgba(0,212,255,0.17); color:#c8f0ff;
  font-family:'Share Tech Mono',monospace; font-size:12px; padding:9px 14px; border-radius:6px; outline:none; letter-spacing:0.5px; transition:border-color 0.2s }
.tinp:focus { border-color:rgba(0,212,255,0.48) }
.tinp::placeholder { color:rgba(0,212,255,0.22) }
.send-btn { background:rgba(0,212,255,0.09); border:1px solid rgba(0,212,255,0.28); color:var(--hud); padding:9px 18px;
  border-radius:6px; cursor:pointer; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:1.5px; transition:all 0.2s; white-space:nowrap }
.send-btn:hover { background:rgba(0,212,255,0.19); border-color:var(--hud) }

/* ── FINANCE PANEL ── */
.finance-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; padding:12px 16px; gap:10px }
.fin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; flex-shrink:0 }
.ticker-card { background:rgba(0,10,22,0.92); border:1px solid var(--hud-border); border-radius:6px; padding:10px 12px; cursor:default }
.ticker-sym  { font-family:'Orbitron',monospace; font-size:12px; color:var(--hud); letter-spacing:2px }
.ticker-name { font-family:'Share Tech Mono',monospace; font-size:8px; color:rgba(0,212,255,0.35); margin-top:2px }
.ticker-price{ font-family:'Orbitron',monospace; font-size:16px; color:#fff; margin-top:6px }
.ticker-chg  { font-family:'Share Tech Mono',monospace; font-size:10px; margin-top:2px }
.ticker-chg.up   { color:var(--green) }
.ticker-chg.down { color:var(--red) }
.fin-news { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,212,255,0.14) transparent }
.fin-news::-webkit-scrollbar { width:4px }
.fin-news::-webkit-scrollbar-thumb { background:rgba(0,212,255,0.14); border-radius:2px }
.news-item { border-bottom:1px solid var(--hud-border); padding:10px 4px; cursor:pointer; transition:background 0.2s }
.news-item:hover { background:rgba(0,212,255,0.04) }
.news-src   { font-family:'Share Tech Mono',monospace; font-size:8px; color:rgba(0,212,255,0.4); letter-spacing:1px }
.news-title { font-family:'Exo 2',sans-serif; font-size:12px; color:rgba(200,240,255,0.85); margin-top:3px; line-height:1.5 }
.news-time  { font-family:'Share Tech Mono',monospace; font-size:8px; color:rgba(0,212,255,0.25); margin-top:3px }
.fin-refresh{ font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.4); background:rgba(0,212,255,0.05);
  border:1px solid var(--hud-border); padding:5px 12px; border-radius:4px; cursor:pointer; transition:all 0.2s; letter-spacing:1px; align-self:flex-start; flex-shrink:0 }
.fin-refresh:hover { color:var(--hud); border-color:rgba(0,212,255,0.4) }
.fin-status { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.3); letter-spacing:1px }

/* ── SETTINGS MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:100;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(5px) }
.modal-overlay.hidden { display:none }
.modal { background:rgba(2,12,24,0.98); border:1px solid rgba(0,212,255,0.26); border-radius:10px;
  padding:26px 30px; width:440px; max-width:95vw; max-height:90vh; overflow-y:auto; position:relative }
.modal-title { font-family:'Orbitron',monospace; font-size:13px; font-weight:700; color:var(--hud); letter-spacing:3px; margin-bottom:6px }
.modal-sub { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(0,212,255,0.38); letter-spacing:1px; margin-bottom:18px; line-height:1.65 }
.field-label { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(0,212,255,0.5); letter-spacing:1.5px; margin-bottom:5px; text-transform:uppercase }
.field-input { width:100%; background:rgba(0,18,36,0.92); border:1px solid rgba(0,212,255,0.2); color:#c8f0ff;
  font-family:'Share Tech Mono',monospace; font-size:12px; padding:9px 12px; border-radius:5px; outline:none; margin-bottom:14px; transition:border-color 0.2s }
.field-input:focus { border-color:rgba(0,212,255,0.52) }
.field-note { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.3); margin-top:-10px; margin-bottom:14px; line-height:1.65; letter-spacing:0.5px }
.modal-sep { height:1px; background:rgba(0,212,255,0.1); margin:16px 0 }
.modal-btns { display:flex; gap:10px; margin-top:8px }
.mbtn { flex:1; padding:10px; border-radius:5px; cursor:pointer; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:1.5px; transition:all 0.2s }
.mbtn.primary   { background:rgba(0,212,255,0.12); border:1px solid rgba(0,212,255,0.36); color:var(--hud) }
.mbtn.primary:hover { background:rgba(0,212,255,0.22) }
.mbtn.secondary { background:transparent; border:1px solid rgba(0,212,255,0.12); color:rgba(0,212,255,0.4) }
.mbtn.secondary:hover { border-color:rgba(0,212,255,0.26); color:rgba(0,212,255,0.62) }
.voice-select { width:100%; background:rgba(0,18,36,0.92); border:1px solid rgba(0,212,255,0.2); color:#c8f0ff;
  font-family:'Share Tech Mono',monospace; font-size:11px; padding:9px 12px; border-radius:5px; outline:none; margin-bottom:6px; cursor:pointer }
.voice-select option { background:#020c16; color:#c8f0ff }
.voice-test-btn { font-family:'Share Tech Mono',monospace; font-size:9px; color:rgba(0,212,255,0.5); background:rgba(0,212,255,0.05);
  border:1px solid rgba(0,212,255,0.18); padding:5px 12px; border-radius:4px; cursor:pointer; margin-bottom:14px; letter-spacing:1px; transition:all 0.2s }
.voice-test-btn:hover { color:var(--hud); border-color:rgba(0,212,255,0.38) }

/* ── WORLD MAP MODAL ── */
.map-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.88); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center }
.map-overlay.hidden { display:none }
.map-hdr { width:92vw; max-width:1100px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.map-title { font-family:'Orbitron',monospace; font-size:13px; font-weight:700; color:var(--hud); letter-spacing:3px; text-shadow:0 0 10px var(--hud-glow) }
.map-close { background:rgba(255,61,61,0.1); border:1px solid rgba(255,61,61,0.38); color:var(--red); padding:6px 16px;
  border-radius:5px; cursor:pointer; font-family:'Orbitron',monospace; font-size:10px; letter-spacing:1.5px; transition:all 0.2s }
.map-close:hover { background:rgba(255,61,61,0.25) }
.map-frame { position:relative; width:92vw; max-width:1100px; height:70vh; border:1px solid rgba(0,212,255,0.35); border-radius:10px; overflow:hidden; box-shadow:0 0 60px rgba(0,212,255,0.12) }
#worldMap { width:100%; height:100%; background:var(--bg) }
.map-footer { width:92vw; max-width:1100px; display:flex; gap:8px; margin-top:9px; flex-wrap:wrap }
.map-btn { font-family:'Share Tech Mono',monospace; font-size:10px; color:rgba(0,212,255,0.6); background:rgba(0,212,255,0.05);
  border:1px solid rgba(0,212,255,0.18); padding:4px 11px; border-radius:4px; cursor:pointer; transition:all 0.2s; letter-spacing:0.5px }
.map-btn:hover { color:var(--hud); border-color:rgba(0,212,255,0.42); background:rgba(0,212,255,0.10) }
.map-btn.lit { color:var(--gold); border-color:rgba(255,165,0,0.45); background:rgba(255,165,0,0.07) }
.leaflet-tile-pane { filter:brightness(0.78) saturate(0.6) hue-rotate(185deg) }
.leaflet-control-attribution { background:rgba(0,12,24,0.8)!important; color:rgba(0,212,255,0.28)!important; font-size:8px!important }
.leaflet-control-attribution a { color:rgba(0,212,255,0.38)!important }
.leaflet-control-zoom a { background:rgba(0,18,32,0.92)!important; color:var(--hud)!important; border-color:rgba(0,212,255,0.22)!important }

/* ── MOBILE ── */
@media (max-width:600px) {
  .hdr { padding:10px 14px 8px }
  .hdr-title { font-size:13px; letter-spacing:2px }
  .hdr-sub,.model-badge { display:none }
  .metrics { overflow-x:auto; scrollbar-width:none }
  .metrics::-webkit-scrollbar { display:none }
  .metric { min-width:72px; padding:5px 8px }
  .mlbl { font-size:7.5px } .mval { font-size:11px }
  .bubble { font-size:12px; max-width:92% }
  .quick-cmds { gap:5px }
  .qc { font-size:9px; padding:5px 8px }
  .tinp { font-size:12px; padding:10px 12px }
  .send-btn { padding:10px 12px; font-size:9px }
  .fin-grid { grid-template-columns:repeat(2,1fr) }
}