:root{
  --bg:#05070b;
  --bg-deep:#020305;
  --panel:rgba(11,17,28,0.74);
  --panel-solid:#0b111c;
  --panel-border:rgba(148,178,209,0.14);
  --panel-border-hi:rgba(148,178,209,0.28);
  --text-hi:#eaf1f8;
  --text:#c3d1e0;
  --text-dim:#71889f;
  --text-faint:#455770;
  --amber:#ffb238;
  --amber-dim:#8a6423;
  --cyan:#4fd8e8;
  --green:#3ecf6e;
  --yellow:#ffd23e;
  --orange:#ff9138;
  --red:#ff4d4d;
  --purple:#b84fe0;
  --maroon:#7e1d2c;
  --font-mono:'IBM Plex Mono',monospace;
  --font-sans:'IBM Plex Sans',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--bg);
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--amber); color:#000; }
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background:var(--panel-border-hi); border-radius:3px; }
::-webkit-scrollbar-track{ background:transparent; }

#app{ position:relative; width:100vw; height:100vh; }
#globe-canvas{ position:absolute; inset:0; z-index:1; cursor:grab; }
#globe-canvas.dragging{ cursor:grabbing; }

/* ---------- Loading screen ---------- */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--bg-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; transition:opacity .8s ease, visibility .8s ease;
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--panel-border-hi); border-top-color:var(--amber);
  animation:spin 1.1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-text{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; color:var(--text-dim); text-transform:uppercase; }
.loader-title{ font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--text-hi); }

/* ---------- Top bar ---------- */
#topbar{
  position:absolute; top:0; left:64px; right:0; height:56px; z-index:20;
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:linear-gradient(180deg, rgba(5,7,11,.85), rgba(5,7,11,0));
  pointer-events:none;
}
#topbar > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:6px; }
.brand-mark{ width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 32% 32%, #6fd3ff, #1c5fb8 55%, #0a2242); box-shadow:0 0 14px rgba(79,216,232,.45); flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; color:var(--text-hi); }
.brand-text span{ font-size:9.5px; color:var(--text-dim); letter-spacing:.14em; text-transform:uppercase; }

.search-wrap{ position:relative; flex:1; max-width:420px; }
.search-box{
  width:100%; height:36px; border-radius:8px; border:1px solid var(--panel-border);
  background:var(--panel); backdrop-filter:blur(10px); color:var(--text-hi);
  font-family:var(--font-sans); font-size:13px; padding:0 14px 0 34px; outline:none;
  transition:border-color .15s ease;
}
.search-box:focus{ border-color:var(--amber-dim); }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; opacity:.55; }
#mic-btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); }
#mic-btn:hover{ color:var(--amber); background:rgba(255,255,255,.06); }
#mic-btn svg{ width:15px; height:15px; }
#mic-btn.listening{ color:var(--red); animation:pulse 1s ease-in-out infinite; }
#mic-btn.unsupported{ display:none; }
#lang-select{
  height:34px; border-radius:8px; border:1px solid var(--panel-border); background:var(--panel);
  color:var(--text); font-family:var(--font-mono); font-size:11px; padding:0 8px; outline:none; cursor:pointer; flex-shrink:0;
}
.tb-item .tb-label{ display:none; }
.search-results{
  position:absolute; top:42px; left:0; right:0; background:var(--panel-solid);
  border:1px solid var(--panel-border-hi); border-radius:8px; overflow:hidden; z-index:30;
  display:none; box-shadow:0 12px 30px rgba(0,0,0,.5);
}
.search-results.show{ display:block; }
.search-result-item{ padding:9px 14px; font-size:12.5px; color:var(--text); cursor:pointer; border-bottom:1px solid var(--panel-border); }
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:rgba(255,178,56,.08); color:var(--text-hi); }
.search-result-item small{ color:var(--text-dim); }

.topbar-stat{ font-family:var(--font-mono); font-size:11.5px; color:var(--text); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar-stat .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
#clock{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); white-space:nowrap; }

/* ---------- Left taskbar ---------- */
#taskbar{
  position:absolute; top:0; left:0; bottom:0; width:64px; z-index:25;
  background:rgba(8,12,19,.88); backdrop-filter:blur(14px);
  border-right:1px solid var(--panel-border);
  display:flex; flex-direction:column; align-items:center; padding:14px 0;
}
.tb-logo{ width:30px; height:30px; margin-bottom:16px; border-radius:8px; background:radial-gradient(circle at 32% 30%, #6fd3ff, #163d76 60%, #061224); box-shadow:0 0 12px rgba(79,216,232,.35); }
.tb-scroll{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; overflow-y:auto; width:100%; padding-bottom:8px; }
.tb-item{
  position:relative; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); flex-shrink:0; transition:background .15s ease, color .15s ease;
}
.tb-item svg{ width:19px; height:19px; }
.tb-item:hover{ background:rgba(255,255,255,.05); color:var(--text-hi); }
.tb-item.active{ background:rgba(255,178,56,.12); color:var(--amber); }
.tb-item.active::before{ content:''; position:absolute; left:-14px; width:3px; height:20px; border-radius:2px; background:var(--amber); }
.tb-tooltip{
  position:absolute; left:56px; top:50%; transform:translateY(-50%); white-space:nowrap;
  background:var(--panel-solid); border:1px solid var(--panel-border-hi); padding:5px 10px; border-radius:6px;
  font-size:11.5px; color:var(--text-hi); opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:40;
  font-family:var(--font-mono);
}
.tb-item:hover .tb-tooltip{ opacity:1; }
.tb-badge{ position:absolute; top:2px; right:2px; font-size:7px; font-family:var(--font-mono); background:var(--amber-dim); color:var(--amber); padding:1px 3px; border-radius:3px; letter-spacing:.05em; }
.tb-status{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:10px; border-top:1px solid var(--panel-border); width:100%; }
.tb-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---------- Panels (glass) ---------- */
.panel{
  background:var(--panel); backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--panel-border); border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px 10px; border-bottom:1px solid var(--panel-border); }
.panel-head h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.panel-head .live-tag{ font-family:var(--font-mono); font-size:9px; color:var(--green); display:flex; align-items:center; gap:4px; letter-spacing:.1em; }
.panel-head .live-tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 1.6s ease-in-out infinite; }
.panel-body{ padding:14px; }

/* ---------- View layers ---------- */
.view-layer{ position:absolute; inset:0; z-index:10; pointer-events:none; display:none; }
.view-layer.active{ display:block; }
.view-layer > *{ pointer-events:auto; }

/* Dashboard */
#view-dashboard .stack-left{ position:absolute; top:72px; left:80px; width:230px; display:flex; flex-direction:column; gap:12px; }
#view-dashboard .stack-right{ position:absolute; top:72px; right:16px; width:300px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 180px); overflow-y:auto; }
#view-dashboard .stack-bottom{ position:absolute; left:80px; right:322px; bottom:16px; display:flex; gap:12px; }
.big-aqi{ font-family:var(--font-mono); font-size:38px; font-weight:700; color:var(--text-hi); line-height:1; }
.aqi-label{ font-size:13px; margin-top:4px; font-weight:600; }
.mini-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--panel-border); font-size:12.5px; }
.mini-row:last-child{ border-bottom:none; }
.mini-row .rank{ color:var(--text-faint); font-family:var(--font-mono); width:16px; display:inline-block; }
.mini-row .val{ font-family:var(--font-mono); font-weight:600; }
.stat-card{ flex:1; padding:12px 14px; }
.stat-card .num{ font-family:var(--font-mono); font-size:22px; color:var(--text-hi); font-weight:700; }
.stat-card .lbl{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }

/* legend bar */
.legend-bar{ position:absolute; left:80px; bottom:100px; display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid var(--panel-border-hi); }
.legend-seg{ padding:6px 12px; font-family:var(--font-mono); font-size:9.5px; color:#050505; text-align:center; min-width:64px; }
.legend-seg b{ display:block; font-size:11px; }

/* Pollution detail panel */
.detail-panel{ position:absolute; top:72px; right:16px; width:320px; display:flex; flex-direction:column; gap:12px; }
.aqi-hero{ display:flex; align-items:center; gap:14px; padding:16px; }
.aqi-hero .circle{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-mono); font-weight:700; font-size:20px; color:#050505; }
.pollutant-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:0 14px 14px; }
.pollutant-chip{ background:rgba(255,255,255,.03); border:1px solid var(--panel-border); border-radius:8px; padding:8px 6px; text-align:center; }
.pollutant-chip .p-val{ font-family:var(--font-mono); font-weight:700; color:var(--text-hi); font-size:14px; }
.pollutant-chip .p-lbl{ font-size:9px; color:var(--text-dim); margin-top:2px; letter-spacing:.05em; }
.chart-wrap{ padding:10px 14px 14px; height:140px; }
.close-x{ cursor:pointer; color:var(--text-dim); font-size:16px; line-height:1; padding:2px 6px; border-radius:4px; }
.close-x:hover{ background:rgba(255,255,255,.08); color:var(--text-hi); }

/* Placeholder / Phase 2 pages */
.placeholder-view{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; }
.placeholder-card{ max-width:560px; padding:32px 36px; text-align:left; }
.placeholder-card .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; color:var(--amber); text-transform:uppercase; margin-bottom:10px; }
.placeholder-card h2{ font-size:22px; color:var(--text-hi); font-weight:600; margin-bottom:10px; }
.placeholder-card p{ font-size:13.5px; color:var(--text-dim); line-height:1.6; margin-bottom:16px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.feature-chip{ font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); background:rgba(79,216,232,.08); border:1px solid rgba(79,216,232,.2); padding:4px 9px; border-radius:100px; }

/* Bottom timeline / mode strip (Live Earth + Pollution + Disasters) */
.mode-strip{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:2px; padding:4px; border-radius:10px; }
.mode-btn{ font-family:var(--font-mono); font-size:11px; letter-spacing:.03em; padding:8px 16px; border-radius:7px; color:var(--text-dim); cursor:pointer; background:transparent; border:none; }
.mode-btn.active{ background:rgba(255,178,56,.14); color:var(--amber); }
.mode-btn:hover:not(.active){ color:var(--text-hi); }

/* range selector */
.range-strip{ position:absolute; top:72px; left:80px; display:flex; gap:2px; padding:4px; border-radius:10px; }
.range-btn{ font-family:var(--font-mono); font-size:10.5px; padding:7px 13px; border-radius:6px; color:var(--text-dim); cursor:pointer; background:transparent; border:none; }
.range-btn.active{ background:rgba(255,178,56,.14); color:var(--amber); }

/* Population panel */
.pop-info{ position:absolute; top:72px; left:80px; width:250px; display:flex; flex-direction:column; gap:12px; }
.source-note{ font-size:10.5px; color:var(--text-faint); line-height:1.5; padding:10px 14px; font-family:var(--font-mono); }

/* Disaster list */
.quake-list{ max-height:340px; overflow-y:auto; }
.quake-item{ padding:9px 14px; border-bottom:1px solid var(--panel-border); cursor:pointer; font-size:12px; }
.quake-item:hover{ background:rgba(255,255,255,.04); }
.quake-item .mag{ font-family:var(--font-mono); font-weight:700; font-size:14px; display:inline-block; width:34px; }
.quake-item .place{ color:var(--text); }
.quake-item .time{ color:var(--text-faint); font-size:10px; display:block; margin-top:2px; font-family:var(--font-mono); }

/* Zoom controls */
#zoom-controls{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; z-index:15; }
.zoom-btn{ width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:16px; font-family:var(--font-mono); }
.zoom-btn:hover{ color:var(--amber); border-color:var(--panel-border-hi); }

/* crosshair / marker tooltip */
#marker-tip{ position:fixed; z-index:60; background:var(--panel-solid); border:1px solid var(--panel-border-hi); border-radius:8px; padding:8px 12px; font-size:11.5px; pointer-events:none; display:none; box-shadow:0 10px 24px rgba(0,0,0,.5); }
#marker-tip b{ color:var(--text-hi); font-family:var(--font-mono); }

/* AI assistant fab */
#ai-fab{ position:absolute; bottom:78px; right:16px; z-index:20; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:linear-gradient(135deg, rgba(255,178,56,.18), rgba(79,216,232,.14)); border:1px solid var(--panel-border-hi); box-shadow:0 10px 26px rgba(0,0,0,.4); }
#ai-fab svg{ width:22px; height:22px; color:var(--amber); }

@media (max-width: 900px){
  .stack-right, .detail-panel{ width:260px; }
}

/* ============================================================
   MOBILE / RESPONSIVE (≤760px)
   Desktop layout is many independently-positioned floating panels per page — on a phone screen
   there's no room for that, so JS (js/mobile.js) re-parents each active view's panels into one
   shared bottom drawer at this breakpoint, and the left taskbar becomes a hamburger-triggered
   off-canvas drawer instead of a permanent rail. ============================================================ */
#hamburger-btn{ display:none; width:36px; height:36px; border-radius:8px; align-items:center; justify-content:center; cursor:pointer; color:var(--text-hi); flex-shrink:0; }
#hamburger-btn svg{ width:20px; height:20px; }
#taskbar-backdrop{ display:none; position:fixed; inset:0; background:rgba(2,3,5,.6); z-index:24; backdrop-filter:blur(2px); }
#taskbar-backdrop.show{ display:block; }

#mobile-drawer{ display:none; }
#mobile-drawer-handle{ display:none; }

@media (max-width: 760px){
  #hamburger-btn{ display:flex; }
  #topbar{ left:0; padding:0 12px; gap:10px; }
  .brand-text span{ display:none; }
  #clock{ display:none; }
  .topbar-stat{ display:none; }
  .search-wrap{ max-width:none; }

  #taskbar{
    width:220px; transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:20px 0 40px rgba(0,0,0,.5);
  }
  #taskbar.open{ transform:translateX(0); }
  .tb-item{ width:100%; justify-content:flex-start; gap:10px; padding:0 12px; border-radius:8px; }
  .tb-item span.tb-label{ display:inline; font-size:12.5px; font-family:var(--font-sans); color:inherit; }
  .tb-tooltip{ display:none; } /* labels are inline on mobile instead of hover tooltips */

  #zoom-controls{ right:10px; top:auto; bottom:calc(64px + env(safe-area-inset-bottom)); transform:none; }
  #ai-fab{ right:10px; bottom:calc(64px + 46px + 18px + env(safe-area-inset-bottom)); width:46px; height:46px; }
  #ai-fab svg{ width:19px; height:19px; }

  #place-info-card{ left:8px !important; right:8px !important; bottom:8px !important; transform:none !important; width:auto !important; max-height:46vh !important; z-index:35; }

  /* Shared bottom drawer that JS moves each active view's panels into */
  #mobile-drawer{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:22;
    max-height:70vh;
    background:var(--panel-solid); border-top:1px solid var(--panel-border-hi);
    border-radius:16px 16px 0 0;
    box-shadow:0 -12px 30px rgba(0,0,0,.5);
    transition:max-height .22s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #mobile-drawer.collapsed{ max-height:120px; }
  #mobile-drawer-handle{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; cursor:pointer; flex-shrink:0;
    border-bottom:1px solid var(--panel-border);
  }
  #mobile-drawer-handle .grip{ width:36px; height:4px; border-radius:2px; background:var(--panel-border-hi); position:absolute; left:50%; top:6px; transform:translateX(-50%); }
  #mobile-drawer-handle b{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-hi); }
  #mobile-drawer-handle svg{ width:16px; height:16px; color:var(--text-dim); transition:transform .2s ease; }
  #mobile-drawer.collapsed #mobile-drawer-handle svg{ transform:rotate(180deg); }
  #mobile-drawer-body{ overflow-y:auto; padding:10px 12px 16px; display:flex; flex-direction:column; gap:10px; }
  #mobile-drawer.collapsed #mobile-drawer-body{ display:none; }

  /* Panels reparented into the drawer lose their desktop absolute coordinates */
  #mobile-drawer-body .panel, #mobile-drawer-body > div{
    position:static !important; width:100% !important; max-width:none !important;
    max-height:none !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important;
  }

  /* Filter/legend strips stay pinned near the top of the globe, above the drawer, horizontally scrollable */
  .range-strip{ left:8px !important; right:8px !important; width:auto !important; max-width:none !important; top:64px !important; overflow-x:auto; flex-wrap:nowrap !important; }
  .legend-bar{ left:8px !important; right:8px !important; bottom:calc(72px + env(safe-area-inset-bottom)) !important; overflow-x:auto; }

  .placeholder-card{ max-width:none !important; }
}