/* ── Font display: swap to prevent invisible text during load ── */
@font-face { font-display: swap; }

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --safe:  #10d98e;
  --safe-d:rgba(16,217,142,.12);
  --warn:  #f59e0b;
  --warn-d:rgba(245,158,11,.12);
  --crit:  #ef4444;
  --crit-d:rgba(239,68,68,.12);
  --info:  #3b9eff;
  --info-d:rgba(59,158,255,.12);
  --gold:  #c9a227;
  --gold-d:rgba(201,162,39,.15);
  --r: 10px;
  --hh: 58px;
  --font: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --brand: 'Orbitron', monospace;
  --ease: cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] {
  --bg:    #0b0d11; --bg2: #12151a; --s: #12151a; --s2: #181c23;
  --b:     #1f242e; --b2:  #272d3a;
  --t:     #e4e8f0; --t2:  #58647a; --t3: #343c4d;
  --acc:   #c9a227; --acc-d: rgba(201,162,39,.15);
  --sh:    rgba(0,0,0,.5);
}
[data-theme="dark-blue"] {
  --bg:    #0a1628; --bg2: #0d1e35; --s: #0f2342; --s2: #122848;
  --b:     #1a3a5c; --b2:  #1e4570;
  --t:     #cce4ff; --t2:  #5a9ecf; --t3: #1e4570;
  --acc:   #c9a227; --acc-d: rgba(201,162,39,.15);
  --sh:    rgba(0,10,30,.55);
  --safe:  #10d98e; --warn: #f59e0b; --crit: #ef4444; --info: #0ea5e9;
}
[data-theme="light"] {
  --bg:    #f0f4f8; --bg2: #e8ecf2; --s: #ffffff; --s2: #f8fafc;
  --b:     #e2e8f0; --b2:  #cbd5e1;
  --t:     #1a2035; --t2:  #64748b; --t3: #94a3b8;
  --acc:   #b8860b; --acc-d: rgba(184,134,11,.1);
  --sh:    rgba(0,0,0,.08);
  --safe:  #059669; --warn: #d97706; --crit: #dc2626; --info: #2563eb;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  min-width: 1280px;
}
body {
  font-family: var(--font);
  background: var(--bg); color: var(--t);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-width: 1280px;
  margin: 0; padding: 0;
  width: 100%;
}

/* ── ZOOM-AS-PICTURE SHELL ─  */
#app-shell {
  width: 100%;
  min-width: 1280px;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--b2); border-radius:2px; }

/* ─── PARTICLE CANVAS ─────────────────────────────────────── */
#particleCanvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0;
  transition:opacity 1s;
}
#particleCanvas.visible { opacity:1; }

/* ─── HEADER ─────────────────────────────────────────────── */
.header {
  position:sticky; top:0; left:0; right:0;
  width:100%;
  height:var(--hh); z-index:1000;
  background:var(--s);
  border-bottom:1px solid var(--b);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 20px; gap:12px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-sizing:border-box;
}
.header::after {
  content:'';
  position:absolute; bottom:0; left:-100%; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent);
  animation:scanline 4s ease-in-out infinite;
}
@keyframes scanline {
  0%   { left:-100%; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

.header-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; cursor:pointer; }
.logo-circle {
  width:36px; height:36px; border-radius:50%;
  border: 2px solid rgba(201,162,39,.5);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  box-shadow: 0 0 12px rgba(201,162,39,.3);
}
.logo-circle img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.wordmark { font-family:var(--brand); font-size:14px; font-weight:700; letter-spacing:.05em; color:var(--acc); text-shadow:0 0 20px rgba(201,162,39,.3); }
.view-crumb {
  font-family:var(--mono); font-size:11px; color:var(--t2);
  background:var(--bg2); border:1px solid var(--b);
  padding:2px 8px; border-radius:4px; letter-spacing:.02em;
}

#liveClock { display:flex; flex-direction:column; align-items:center; font-family:var(--mono); }
#clockTime { font-size:15px; font-weight:500; letter-spacing:.04em; color:var(--t); text-shadow: 0 0 12px rgba(201,162,39,.35); }
#clockDate { font-size:10px; color:var(--t2); letter-spacing:.04em; margin-top:1px; }

.header-center { display:flex; align-items:center; gap:14px; flex:1; justify-content:center; min-width:0; }
.status-chip { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--t2); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--t3); transition:background .4s, box-shadow .4s; }
.dot.live { background:var(--safe); box-shadow:0 0 0 3px rgba(16,217,142,.2); animation:dotPulse 2s ease-in-out infinite; }
.dot.err  { background:var(--crit); box-shadow:0 0 0 3px rgba(239,68,68,.2); }
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(16,217,142,.2); }
  50%      { box-shadow:0 0 0 6px rgba(16,217,142,.06); }
}

.header-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.tsw { display:flex; gap:1px; background:var(--bg); border:1px solid var(--b); border-radius:8px; padding:3px; }
.tb { background:none; border:none; cursor:pointer; padding:3px 9px; border-radius:5px; font-size:11px; font-weight:600; font-family:var(--font); color:var(--t2); transition:all .15s; }
.tb.on { background:var(--acc); color:#000; box-shadow:0 2px 8px rgba(201,162,39,.35); }
.tb:hover:not(.on) { background:var(--b); color:var(--t); }

button {
  font-family:var(--font); font-size:13px; font-weight:500;
  border:none; cursor:pointer; border-radius:var(--r);
  transition:all .18s var(--ease);
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; white-space:nowrap;
}
.bg { background:transparent; color:var(--t2); border:1px solid var(--b2); }
.bg:hover { background:var(--b); color:var(--t); }
.bp { background:var(--acc); color:#000; font-weight:600; box-shadow:0 0 0 0 rgba(201,162,39,.4); }
.bp:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,162,39,.3); }
.bd { background:var(--crit-d); color:var(--crit); border:1px solid rgba(239,68,68,.25); }
.bd:hover { background:rgba(239,68,68,.2); }
.bs { background:var(--s2); color:var(--t); border:1px solid var(--b); }
.bs:hover { background:var(--b); }
.btn-sm { padding:5px 10px; font-size:12px; }

.mono-tag { display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; background:var(--bg2); border:1px solid var(--b); color:var(--t2); border-radius:6px; padding:3px 10px; }
.acc-tag { background:var(--acc-d); border-color:rgba(201,162,39,.25); color:var(--acc); }

/* ─── INTRO PAGE ──────────────────────────────────────────── */
#introView {
  position:absolute; top:0; left:0; right:0; bottom:0;
  min-height:100vh;
  z-index:2000; overflow:hidden;
}
.intro-bg {
  position:absolute; inset:0;
  background: linear-gradient(160deg,
    #0a0e0a 0%,
    #0d1a10 20%,
    #081510 40%,
    #0a1a1a 60%,
    #0b0d11 100%
  );
}
/* Animated environmental elements */
.rain-layer {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.raindrop {
  position:absolute; top:-20px;
  width:1.5px; border-radius:1px;
  background:linear-gradient(to bottom, transparent, rgba(100,180,255,.4));
  animation: rainfall linear infinite;
}
@keyframes rainfall {
  to { transform: translateY(110vh) translateX(-10px); }
}
.flood-glow {
  position:absolute; bottom:0; left:0; right:0;
  height:40%;
  background: linear-gradient(to top, rgba(16,100,80,.25) 0%, transparent 100%);
  pointer-events:none;
}
.lightning-flash {
  position:absolute; inset:0;
  background:rgba(200,220,255,.03);
  pointer-events:none;
  animation: lightning 8s ease-in-out infinite;
}
@keyframes lightning {
  0%,89%,91%,100% { opacity:0; }
  90% { opacity:1; }
}
/* Intro content */
.intro-content {
  position:relative; z-index:10;
  height:100vh; display:flex;
  flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px; padding-top:0;
  text-align:center; gap:0;
}
.intro-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.25);
  color:var(--acc); border-radius:20px;
  padding:5px 14px; font-size:11px; font-weight:600;
  letter-spacing:.08em; margin-bottom:16px;
  text-transform:uppercase;
  animation: fadeDown .6s ease both .2s;
}
.intro-badge::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--acc); animation:dotPulse 2s ease-in-out infinite;
}
.intro-logo-wrap {
  display:flex; align-items:center; justify-content:center;
  gap:16px; margin-bottom:12px;
  animation: fadeDown .6s ease both .3s;
}
.intro-logo-circle {
  width:72px; height:72px; border-radius:50%;
  border:3px solid rgba(201,162,39,.5);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 40px rgba(201,162,39,.35), 0 0 80px rgba(201,162,39,.1);
  flex-shrink:0; overflow:hidden;
}
.intro-logo-circle img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.intro-wordmark {
  font-family:var(--brand);
  font-size:clamp(36px, 6vw, 64px);
  font-weight:900; letter-spacing:.08em;
  color:var(--acc);
  text-shadow:0 0 40px rgba(201,162,39,.5), 0 0 80px rgba(201,162,39,.2);
}
.intro-fullname {
  font-size:12px; color:var(--t2); letter-spacing:.15em;
  text-transform:uppercase; margin-bottom:14px;
  animation: fadeDown .6s ease both .4s;
}
.intro-headline {
  font-size:clamp(18px, 2.5vw, 26px);
  font-weight:600; color:var(--t);
  max-width:640px; line-height:1.4;
  margin-bottom:10px;
  animation: fadeDown .6s ease both .5s;
}
.intro-sub {
  font-size:14px; color:var(--t2);
  max-width:560px; line-height:1.7;
  margin-bottom:28px;
  animation: fadeDown .6s ease both .6s;
}
.intro-pillars {
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; margin-bottom:28px;
  animation: fadeDown .6s ease both .7s;
}
.pillar {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--b2);
  border-radius:10px; padding:10px 14px;
  font-size:12px; font-weight:500;
  transition:all .2s;
}
.pillar:hover { background:var(--acc-d); border-color:rgba(201,162,39,.3); }
.pillar-icon { font-size:18px; }

.intro-cta-row {
  display:flex; align-items:center; gap:12px;
  animation: fadeDown .6s ease both .8s;
}
.intro-enter {
  background:var(--acc); color:#000; font-weight:700;
  font-size:15px; padding:12px 32px; border-radius:12px;
  box-shadow:0 0 30px rgba(201,162,39,.4);
  transition:all .2s;
}
.intro-enter:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 40px rgba(201,162,39,.5);
}
.intro-secondary {
  background:transparent; color:var(--t2);
  border:1px solid var(--b2); padding:12px 24px; border-radius:12px;
}
.intro-secondary:hover { background:var(--b); color:var(--t); }

@keyframes fadeDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:none; }
}


/* ─── INTRO PAGE: THEME-ISOLATED (always dark) ───────────── */
/* Override all CSS variables inside #introView so it never
   changes regardless of [data-theme] selection              */
#introView,
#introView *,
#mascotGuide,
#mascotGuide * {
  --bg:    #0b0d11; --bg2: #12151a; --s: #12151a; --s2: #181c23;
  --b:     #1f242e; --b2:  #272d3a;
  --t:     #e4e8f0; --t2:  #58647a; --t3: #343c4d;
  --acc:   #c9a227; --acc-d: rgba(201,162,39,.15);
  --sh:    rgba(0,0,0,.5);
}
/* Ensure the intro background is always the dark atmospheric gradient */
.intro-bg {
  background: linear-gradient(160deg,
    #0a0e0a 0%,
    #0d1a10 20%,
    #081510 40%,
    #0a1a1a 60%,
    #0b0d11 100%
  ) !important;
}
/* Pillar cards locked to dark style */
.pillar {
  background: rgba(255,255,255,.04) !important;
  border-color: #272d3a !important;
  color: #e4e8f0 !important;
}
.pillar:hover {
  background: rgba(201,162,39,.15) !important;
  border-color: rgba(201,162,39,.3) !important;
}
/* Mascot bubble locked dark */
.mascot-bubble {
  background: #12151a !important;
  border-color: #272d3a !important;
  color: #e4e8f0 !important;
}
/* Intro secondary button locked */
.intro-secondary {
  border-color: #272d3a !important;
  color: #58647a !important;
}
.intro-secondary:hover {
  background: #1f242e !important;
  color: #e4e8f0 !important;
}

/* ─── MASCOT GUIDE ────────────────────────────────────────── */
#mascotGuide {
  position:absolute; bottom:24px; right:24px; z-index:2100;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.mascot-bubble {
  background:var(--s); border:1px solid var(--b2);
  border-radius:16px 16px 4px 16px;
  padding:12px 16px; max-width:280px;
  font-size:13px; line-height:1.5; color:var(--t);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  position:relative;
  animation: bubbleIn .3s var(--ease) both;
}
@keyframes bubbleIn {
  from { opacity:0; transform:scale(.85) translateY(8px); }
  to   { opacity:1; transform:none; }
}
.mascot-bubble strong { color:var(--acc); }
.bubble-actions { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.bubble-btn {
  background:var(--acc-d); color:var(--acc); border:1px solid rgba(201,162,39,.3);
  border-radius:8px; padding:4px 10px; font-size:11px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.bubble-btn:hover { background:var(--acc); color:#000; }
.mascot-avatar {
  width:70px; height:70px; cursor:pointer;
  filter:drop-shadow(0 4px 16px rgba(201,162,39,.3));
  transition:transform .2s;
  animation:mascotFloat 3s ease-in-out infinite;
}
.mascot-avatar:hover { transform:scale(1.08) rotate(-3deg); }
@keyframes mascotFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}

/* ─── PUBLIC VIEW ────────────────────────────────────────── */
#publicView { min-height:calc(100vh - var(--hh)); position:relative; z-index:1; }
.map-shell {
  position:relative;
  height:calc(100vh - var(--hh) - 20px);
  margin:10px; border-radius:16px;
  overflow:visible; border:1px solid var(--b);
  box-shadow:0 8px 40px var(--sh);
  transition:box-shadow .6s;
}
.map-shell:hover { box-shadow:0 12px 60px var(--sh), 0 0 0 1px rgba(201,162,39,.15); }
#map { width:100%; height:100%; border-radius:16px; overflow:hidden; }

.tile-bar {
  position:absolute; bottom:110px; right:20px; z-index:500;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(11,13,17,.88);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:4px;
  backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.tile-btn {
  background:transparent; border:none; color:rgba(255,255,255,.5);
  font-size:11px; font-weight:600; font-family:var(--font);
  padding:5px 12px; border-radius:6px; cursor:pointer;
  transition:all .15s;
}
.tile-btn:hover { background:rgba(255,255,255,.08); color:#fff; }
.tile-btn.on { background:rgba(201,162,39,.25); color:var(--acc); }

.map-leg {
  position:absolute; bottom:20px; left:20px; z-index:500;
  background:rgba(11,13,17,.88);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 14px;
  backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.leg-hd { font-size:10px; font-weight:700; color:rgba(255,255,255,.4); letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; font-family:var(--mono); }
.leg-row { display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.7); margin-bottom:3px; }
.leg-pip { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ─── WEATHER WIDGET ─────────────────────────────────────── */
#weatherWidget {
  position: absolute; top: 16px; right: 16px; z-index: 500;
  width: 220px; cursor: move; user-select: none;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--wx-border);
  background: var(--wx-bg);
  transition: box-shadow .2s, transform .2s;
}
#weatherWidget:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 50px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
}

/* Theme tokens for weather */
[data-theme="dark"] {
  --wx-bg:       rgba(13,16,22,.92);
  --wx-border:   rgba(255,255,255,.09);
  --wx-header:   linear-gradient(135deg, rgba(30,40,60,.9) 0%, rgba(18,24,36,.95) 100%);
  --wx-loc:      rgba(180,200,230,.55);
  --wx-temp:     #e8f0ff;
  --wx-unit:     rgba(180,200,230,.5);
  --wx-desc:     rgba(180,200,230,.45);
  --wx-divider:  rgba(255,255,255,.07);
  --wx-lbl:      rgba(160,185,220,.38);
  --wx-val:      rgba(200,220,255,.8);
  --wx-chip-bg:  rgba(255,255,255,.05);
  --wx-chip-bd:  rgba(255,255,255,.08);
  --wx-glow:     rgba(59,158,255,.18);
}
[data-theme="dark-blue"] {
  --wx-bg:       rgba(8,22,50,.93);
  --wx-border:   rgba(100,180,255,.14);
  --wx-header:   linear-gradient(135deg, rgba(15,40,90,.95) 0%, rgba(10,28,65,.98) 100%);
  --wx-loc:      rgba(140,200,255,.6);
  --wx-temp:     #c8e8ff;
  --wx-unit:     rgba(140,200,255,.5);
  --wx-desc:     rgba(140,200,255,.45);
  --wx-divider:  rgba(100,180,255,.1);
  --wx-lbl:      rgba(100,175,255,.4);
  --wx-val:      rgba(160,210,255,.85);
  --wx-chip-bg:  rgba(59,130,255,.08);
  --wx-chip-bd:  rgba(100,180,255,.15);
  --wx-glow:     rgba(30,100,255,.22);
}
[data-theme="light"] {
  --wx-bg:       rgba(255,255,255,.92);
  --wx-border:   rgba(0,0,0,.08);
  --wx-header:   linear-gradient(135deg, rgba(235,242,255,.98) 0%, rgba(220,232,255,.95) 100%);
  --wx-loc:      rgba(60,90,140,.6);
  --wx-temp:     #1a2a4a;
  --wx-unit:     rgba(60,90,140,.55);
  --wx-desc:     rgba(60,90,140,.5);
  --wx-divider:  rgba(0,0,0,.07);
  --wx-lbl:      rgba(50,80,130,.45);
  --wx-val:      rgba(20,50,120,.85);
  --wx-chip-bg:  rgba(50,100,200,.06);
  --wx-chip-bd:  rgba(50,100,200,.12);
  --wx-glow:     rgba(37,99,235,.12);
}

/* Header band */
.wx-header {
  background: var(--wx-header);
  padding: 14px 14px 10px;
  position: relative;
  overflow: hidden;
}
.wx-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 0%, var(--wx-glow) 0%, transparent 65%);
  pointer-events: none;
}
.wx-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.wx-location-row {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.wx-nav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--wx-loc); font-size: 13px; font-weight: 700;
  padding: 0 3px; line-height: 1; opacity: 0.7;
  transition: opacity .15s, transform .15s;
  user-select: none;
}
.wx-nav-btn:hover { opacity: 1; transform: scale(1.2); }
.wx-nav-btn:active { transform: scale(0.95); }
.wx-location {
  font-size: 10px; font-weight: 700; color: var(--wx-loc);
  text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; gap: 4px;
}
.wx-location::before {
  content: '📍'; font-size: 9px; opacity: .8;
}
.wx-icon-wrap {
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
  animation: wxIconFloat 4s ease-in-out infinite;
}
@keyframes wxIconFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.wx-temp-row {
  display: flex; align-items: baseline; gap: 2px; margin-bottom: 2px;
}
.wx-temp {
  font-size: 42px; font-weight: 900; color: var(--wx-temp);
  font-family: var(--brand); line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.wx-unit {
  font-size: 16px; font-weight: 600; color: var(--wx-unit);
  align-self: flex-start; margin-top: 8px;
}
.wx-desc {
  font-size: 11px; color: var(--wx-desc);
  font-style: italic; letter-spacing: .02em;
}

/* Body */
.wx-body { padding: 10px 14px 14px; }
.wx-divider {
  height: 1px; background: var(--wx-divider); margin-bottom: 10px;
}
.wx-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.wx-chip {
  background: var(--wx-chip-bg); border: 1px solid var(--wx-chip-bd);
  border-radius: 10px; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .2s;
}
.wx-chip:hover { background: var(--wx-chip-bd); }
.wx-stat-lbl {
  font-size: 9px; font-weight: 700; color: var(--wx-lbl);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: var(--mono); display: flex; align-items: center; gap: 3px;
}
.wx-stat-val {
  font-size: 13px; font-weight: 700; color: var(--wx-val);
  font-family: var(--mono);
}

/* Popup styles */
.leaflet-popup-content-wrapper { background:var(--s); border:1px solid var(--b2); border-radius:12px !important; box-shadow:0 8px 32px rgba(0,0,0,.5); padding:0; overflow:hidden; }
.leaflet-popup-content { margin:0 !important; padding:14px; min-width:220px; font-family:var(--font); }
.leaflet-popup-tip-container { display:none; }
.popup-name { font-size:14px; font-weight:700; color:var(--t); margin-bottom:2px; }
.popup-id { font-family:var(--mono); font-size:10px; color:var(--t2); margin-bottom:8px; }
.popup-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.popup-chip { background:var(--bg2); border:1px solid var(--b); border-radius:7px; padding:7px 8px; }
.popup-chip-label { font-size:10px; color:var(--t2); font-family:var(--mono); margin-bottom:2px; }
.popup-chip-val { font-size:12px; font-weight:700; }
.popup-chip-val.on-water { color:var(--warn); }
.popup-chip-val.on-float { color:var(--crit); }
.popup-chip-val.off { color:var(--t3); }
.popup-foot { margin-top:8px; font-size:10px; color:var(--t2); font-family:var(--mono); border-top:1px solid var(--b); padding-top:6px; }

/* Alert banner */
#alertBanner {
  position:absolute; top:var(--hh); left:50%; transform:translateX(-50%) translateY(-100%);
  z-index:999;
  background:var(--crit); color:#fff;
  padding:8px 20px; border-radius:0 0 12px 12px;
  font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:10px;
  transition:transform .3s var(--ease);
  pointer-events:none;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
#alertBanner.show  { transform:translateX(-50%) translateY(0); pointer-events:auto; }
#alertBanner.critical { background:var(--crit); }
#alertBanner.warning  { background:var(--warn); color:#000; }
#alertBanner.info     { background:var(--info); }
.banner-loc { opacity:.75; font-size:11px; font-family:var(--mono); }

/* ─── ALERT PANEL ────────────────────────────────────────── */
#alertPanel {
  position:absolute; top:var(--hh); right:0; bottom:0;
  width:320px; z-index:900;
  background:var(--s); border-left:1px solid var(--b);
  transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column;
}
#alertPanel.open { transform:none; }
.panel-head { padding:14px 16px; border-bottom:1px solid var(--b); display:flex; align-items:center; justify-content:space-between; }
.panel-title { font-size:13px; font-weight:700; }
.panel-x { background:none; border:none; color:var(--t2); font-size:18px; padding:2px 6px; cursor:pointer; border-radius:6px; }
.panel-x:hover { background:var(--b); color:var(--t); }
.panel-body { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
.panel-foot { padding:10px; border-top:1px solid var(--b); }

#alertBtn {
  position:absolute; bottom:72px; right:20px; z-index:850;
  background:var(--s); border:1px solid var(--b2);
  color:var(--t); padding:9px 16px; border-radius:10px;
  box-shadow:0 4px 20px var(--sh);
  font-weight:600; font-size:13px;
}
#alertBtn:hover { background:var(--b); }
#alertBtn .cnt {
  background:var(--crit); color:#fff;
  border-radius:10px; font-size:11px; font-weight:700;
  padding:1px 6px; min-width:18px; text-align:center;
}
#alertBtn .cnt.zero { background:var(--t3); }

/* Alert items */
.alert-item {
  background:var(--s2); border:1px solid var(--b2);
  border-radius:10px; padding:10px 12px;
  animation:alertSlideIn .25s var(--ease) both;
}
@keyframes alertSlideIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none} }
.alert-item.critical { background:var(--crit-d); border-color:rgba(239,68,68,.2); }
.alert-item.warning  { background:var(--warn-d); border-color:rgba(245,158,11,.2); }
.alert-item.info     { background:var(--info-d); border-color:rgba(59,158,255,.2); }
.alert-item.error    { background:var(--crit-d); border-color:rgba(239,68,68,.2); }
.alert-time  { font-size:11px; color:var(--t2); margin-bottom:3px; font-family:var(--mono); }
.alert-title { font-size:13px; font-weight:600; margin-bottom:2px; }
.alert-item.critical .alert-title { color:var(--crit); }
.alert-item.warning  .alert-title { color:var(--warn); }
.alert-item.info     .alert-title { color:var(--info); }
.alert-item.error    .alert-title { color:var(--crit); }
.alert-body { font-size:12px; color:var(--t2); }

/* ─── ADMIN LAYOUT ───────────────────────────────────────── */
.sidebar {
  position:absolute; top:var(--hh); left:0;
  width:200px; background:var(--s);
  border-right:1px solid var(--b);
  display:flex; flex-direction:column; z-index:100;
  min-height:calc(100vh - var(--hh));
}
.sidebar-nav { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; }
.sidebar-footer { padding:10px; border-top:1px solid var(--b); }
.nav-label { font-size:10px; font-weight:700; color:var(--t3); letter-spacing:.1em; text-transform:uppercase; padding:6px 8px 2px; font-family:var(--mono); }
.nav-item {
  background:none; border:none; color:var(--t2); width:100%;
  justify-content:flex-start; gap:8px; padding:8px 10px;
  border-radius:8px; font-size:13px; font-weight:500; text-align:left;
}
.nav-item:hover { background:var(--b2); color:var(--t); }
.nav-item.active { background:var(--acc-d); color:var(--acc); }
.nav-item svg { width:16px; height:16px; flex-shrink:0; }
.bc {
  background:var(--crit); color:#fff;
  border-radius:10px; font-size:10px; font-weight:700;
  padding:1px 5px; min-width:16px; text-align:center;
  margin-left:auto; display:none;
}
.bc.show { display:block; }

.content {
  margin-left:200px;
  min-height:calc(100vh - var(--hh)); background:var(--bg);
  padding:20px;
}

/* ─── CARDS ──────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat-card {
  background:var(--s); border:1px solid var(--b);
  border-radius:12px; padding:16px;
  animation:fadeInUp .3s var(--ease) both;
}
.stat-val { font-size:32px; font-weight:700; font-family:var(--brand); margin-bottom:2px; }
.stat-lbl { font-size:11px; color:var(--t2); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.c-safe .stat-val { color:var(--safe); }
.c-warn .stat-val { color:var(--warn); }
.c-crit .stat-val { color:var(--crit); }
.c-blue .stat-val { color:var(--info); }

.card { background:var(--s); border:1px solid var(--b); border-radius:12px; margin-bottom:16px; overflow:hidden; animation:fadeInUp .3s var(--ease) both; }
.card-head { padding:14px 16px; border-bottom:1px solid var(--b); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:13px; font-weight:700; }
.card-body { padding:16px; }
.tbl-wrap { overflow-x:auto; }

table { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; padding:8px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--t2); border-bottom:1px solid var(--b); }
td { padding:8px 12px; border-bottom:1px solid var(--b2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--s2); }

/* ─── PILLS ──────────────────────────────────────────────── */
.pill { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.03em; font-family:var(--mono); }
.pill.safe     { background:rgba(16,217,142,.1); color:var(--safe); border:1px solid rgba(16,217,142,.2); }
.pill.water    { background:rgba(245,158,11,.1);  color:var(--warn); border:1px solid rgba(245,158,11,.2); }
.pill.critical { background:rgba(239,68,68,.1);   color:var(--crit); border:1px solid rgba(239,68,68,.2); }
.pill.unknown  { background:var(--bg2); color:var(--t2); border:1px solid var(--b); }
.pill.stale    { background:var(--bg2); color:var(--t3); border:1px solid var(--b); }
.pill.info     { background:var(--info-d); color:var(--info); border:1px solid rgba(59,158,255,.2); }
.pill.warning  { background:var(--warn-d); color:var(--warn); border:1px solid rgba(245,158,11,.2); }
.pill.error    { background:var(--crit-d); color:var(--crit); border:1px solid rgba(239,68,68,.2); }
.sensor-chip { font-family:var(--mono); font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px; background:var(--bg2); color:var(--t3); border:1px solid var(--b2); }
.sensor-chip.on { background:var(--warn-d); color:var(--warn); border-color:rgba(245,158,11,.3); }
.sensor-chip.on.float { background:var(--crit-d); color:var(--crit); border-color:rgba(239,68,68,.3); }

/* ─── MAP ADMIN ──────────────────────────────────────────── */
.map-admin { border-radius:10px; overflow:hidden; height:280px; background:var(--bg2); }

/* ─── MODALS ─────────────────────────────────────────────── */
.modal { display:none; position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:2000; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal.open { display:flex; }
.modal-box { background:var(--s); border:1px solid var(--b2); border-radius:16px; padding:0; width:min(420px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.6); overflow:hidden; }
.modal-box.wide { width:min(620px,96vw); }
.modal-head { padding:16px 18px; border-bottom:1px solid var(--b); display:flex; align-items:center; justify-content:space-between; }
.modal-head h2 { font-size:16px; font-weight:700; }
.modal-x { background:none; border:none; color:var(--t2); font-size:22px; padding:0 4px; cursor:pointer; border-radius:6px; }
.modal-x:hover { background:var(--b); color:var(--t); }
.modal-actions { padding:14px 18px; border-top:1px solid var(--b); display:flex; gap:8px; justify-content:flex-end; }
.field { padding:8px 18px; display:flex; flex-direction:column; gap:4px; }
.field label { font-size:11px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono); }
.field input { background:var(--bg); border:1px solid var(--b2); color:var(--t); font-family:var(--font); font-size:13px; padding:8px 12px; border-radius:8px; outline:none; transition:border-color .15s; }
.field input:focus { border-color:var(--acc); }
.field small { font-size:11px; color:var(--t3); }
.field-pw { position:relative; }
.field-pw input { width:100%; padding-right:38px; }
.pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--t2); cursor:pointer; padding:4px; border-radius:4px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.pw-toggle svg { width:16px; height:16px; }
.ibox { margin:8px 18px; background:var(--info-d); border:1px solid rgba(59,158,255,.2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--info); line-height:1.5; }
.wbox { margin:8px 18px; background:var(--warn-d); border:1px solid rgba(245,158,11,.2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--warn); line-height:1.5; }
.sbox { margin:8px 18px; background:var(--safe-d); border:1px solid rgba(16,217,142,.2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--safe); line-height:1.5; }

/* Setup guide */
.guide-step { display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--b); }
.guide-step:last-of-type { border-bottom:none; }
.gnum { width:24px; height:24px; border-radius:50%; background:var(--acc); color:#000; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-step h4 { font-size:13px; font-weight:700; margin-bottom:4px; }
.guide-step p  { font-size:12px; color:var(--t2); line-height:1.6; }
.guide-step pre { background:#0d1117; color:#e2e8f0; border:1px solid var(--b); padding:10px 12px; border-radius:6px; font-size:11.5px; font-family:var(--mono); overflow-x:auto; margin-top:8px; line-height:1.6; }
.guide-step code { background:var(--b); padding:1px 5px; border-radius:4px; font-family:var(--mono); font-size:11.5px; }

/* ─── MISC ───────────────────────────────────────────────── */
.hidden { display:none !important; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.empty-state { padding:40px 20px; text-align:center; color:var(--t2); font-size:13px; }
.empty-state strong { display:block; font-size:15px; font-weight:700; color:var(--t); margin-bottom:6px; }
.stale { font-family:var(--mono); font-size:10px; color:var(--t2); }

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }
.pulsing { animation:pulse 1.5s ease-in-out infinite; }
.stat-card { animation:fadeInUp .3s var(--ease) both; }
.stat-card:nth-child(1){animation-delay:.04s}
.stat-card:nth-child(2){animation-delay:.08s}
.stat-card:nth-child(3){animation-delay:.12s}
.stat-card:nth-child(4){animation-delay:.16s}
.stat-card:nth-child(5){animation-delay:.20s}
.card { animation:fadeInUp .3s var(--ease) both; }

/* countdown + db bar */
#countdown { position:absolute; bottom:48px; right:20px; z-index:800; font-family:var(--mono); font-size:11px; color:var(--t3); background:var(--s); border:1px solid var(--b); border-radius:8px; padding:4px 10px; }
#dbBar { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:800; font-family:var(--mono); font-size:11px; padding:5px 14px; border-radius:8px; border:1px solid transparent; white-space:nowrap; transition:all .3s; }
#dbBar.ok   { background:var(--safe-d); border-color:rgba(16,217,142,.2); color:var(--safe); }
#dbBar.fail { background:var(--crit-d); border-color:rgba(239,68,68,.2); color:var(--crit); }
#dbBar.wait { background:var(--bg2); border-color:var(--b); color:var(--t3); }

/* ─── CHANNEL BADGES ──────────────────────────────────────── */
.channel-row { display:flex; gap:6px; flex-wrap:wrap; }
.ch-badge { display:inline-flex; align-items:center; gap:5px; border-radius:8px; padding:4px 10px; font-size:11px; font-weight:700; text-decoration:none; transition:all .2s ease; cursor:pointer; }
.ch-discord { background:rgba(88,101,242,.15); border:1px solid rgba(88,101,242,.3); color:#7289da; }
.ch-discord:hover { background:rgba(88,101,242,.35); border-color:#7289da; box-shadow:0 0 10px rgba(114,137,218,.4); transform:translateY(-1px); color:#a8b5f5; }
.ch-telegram { background:rgba(0,136,204,.15); border:1px solid rgba(0,136,204,.3); color:#29a0d8; }
.ch-telegram:hover { background:rgba(0,136,204,.35); border-color:#29a0d8; box-shadow:0 0 10px rgba(41,160,216,.4); transform:translateY(-1px); color:#7dcef5; }

.intro-social-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  z-index: 9999;
  pointer-events: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 12px 20px;

  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  backdrop-filter: blur(6px);

  font-family: var(--mono);
}

/* LABEL (HIGHLIGHTED WHITE) */
.intro-social-label {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .95;
  text-shadow: 0 0 10px rgba(255,255,255,.15);
}

/* LINKS (NO BUTTON LOOK) */
.intro-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  text-decoration: none;
  font-size: 13px;
  font-weight: 600;

  position: relative;

  transition: all .2s ease;
}

/* ICONS */
.social-icon {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
  opacity: .8;
  transition: all .2s ease;
}

/* GOLD UNDERLINE */
.intro-social-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;

  width: 0%;
  height: 1px;

  background: var(--acc); /* gold */
  opacity: .9;

  transition: width .25s ease;
}

/* HOVER BASE */
.intro-social-link:hover::after {
  width: 100%;
}

/* ─── DISCORD (VIOLET) ───────────────────────────────────── */
.intro-social-link.discord {
  color: rgba(167, 139, 250, .85);
}

.intro-social-link.discord:hover {
  color: #a78bfa;
  text-shadow: 0 0 12px rgba(167, 139, 250, .35);
}

.intro-social-link.discord:hover .social-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* ─── TELEGRAM (BLUE) ────────────────────────────────────── */
.intro-social-link.telegram {
  color: rgba(59, 130, 246, .85);
}

.intro-social-link.telegram:hover {
  color: #3b82f6;
  text-shadow: 0 0 12px rgba(59, 130, 246, .35);
}

.intro-social-link.telegram:hover .social-icon {
  opacity: 1;
  transform: scale(1.1);
}

/* DIVIDER */
.divider {
  opacity: .3;
  color: rgba(255,255,255,.5);
}
#introView .intro-social-footer {
  position: absolute;
  bottom: 1;
  left: 0;
  right: 0;

  z-index: 9999; 

  pointer-events: auto;
}