:root {
  --bg: #030712; --bg2: #0a0f1e; --bg3: #0d1526;
  --panel: rgba(13,21,38,0.88);
  --border: rgba(0,255,200,0.12); --border2: rgba(255,60,60,0.15);
  --teal: #00ffc8; --teal2: #00d4a8;
  --red: #ff3c3c; --red2: #ff6b6b;
  --gold: #ffd700; --gold2: #ffb300;
  --text: #e0f0ff; --text2: #7a9ab8;
  --glow-teal: 0 0 24px rgba(0,255,200,0.45);
  --glow-red: 0 0 24px rgba(255,60,60,0.45);
  --glow-gold: 0 0 24px rgba(255,215,0,0.35);
}

body.light-mode {
  --bg: #f3f4f6; --bg2: #ffffff; --bg3: #e5e7eb;
  --panel: rgba(255, 255, 255, 0.85);
  --border: rgba(0, 0, 0, 0.1); --border2: rgba(255, 60, 60, 0.2);
  --text: #111827; --text2: #4b5563;
  --glow-teal: 0 0 15px rgba(0, 200, 160, 0.3);
  --teal: #00b38c;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { 
  background: var(--bg); 
  color: var(--text); 
  font-family: 'Inter', 'Hind Siliguri', sans-serif; 
  min-height: 100vh; 
  overflow-x: hidden; 
  line-height: 1.6;
}
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(0,255,200,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,200,0.025) 1px,transparent 1px); background-size:44px 44px; pointer-events:none; z-index:0; }
.amb { position:fixed; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:0; }
.a1 { width:600px; height:600px; background:rgba(0,255,200,0.035); top:-150px; left:-150px; }
.a2 { width:500px; height:500px; background:rgba(255,60,60,0.035); bottom:-150px; right:-150px; }
.a3 { width:350px; height:350px; background:rgba(255,215,0,0.02); top:40%; left:40%; }

/* ─── SIDEBAR ─── */
.sidebar { width:76px; background:rgba(8,13,26,0.97); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:18px 0; position:fixed; height:100vh; z-index:200; backdrop-filter:blur(24px); }
body.light-mode .sidebar { background: rgba(255,255,255,0.97); }

.logo { position:relative; width:46px; height:46px; background:linear-gradient(135deg,var(--teal),var(--red)); border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:'Orbitron',monospace; font-weight:900; font-size:13px; color:#000; margin-bottom:28px; box-shadow:var(--glow-teal); animation:logoPulse 3s ease-in-out infinite; cursor:pointer; letter-spacing:-1px; z-index:2; overflow:hidden; transform-style:preserve-3d; transition:transform 0.1s ease; }
.logo::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(transparent,rgba(255,255,255,0.8),transparent); animation:spin 4s linear infinite; z-index:-1; }
.logo::after { content:''; position:absolute; inset:2px; background:linear-gradient(135deg,var(--bg),var(--panel)); border-radius:10px; z-index:-1; }
.logo span { background:linear-gradient(135deg,var(--teal),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; z-index:3; pointer-events: none; }
.logo:hover { box-shadow:0 0 30px var(--teal),0 0 60px var(--red); }
@keyframes logoPulse { 0%,100% { box-shadow:0 0 15px rgba(0,255,200,0.4); } 50% { box-shadow:0 0 40px rgba(0,255,200,0.85),0 0 70px rgba(0,255,200,0.2); } }
@keyframes spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }

.nav-item { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-bottom:6px; transition:all .3s; position:relative; color:var(--text2); font-size:20px; border:1px solid transparent; }
.nav-item:hover, .nav-item.active { background:rgba(0,255,200,0.08); border-color:var(--border); color:var(--teal); box-shadow:var(--glow-teal); }
.nav-item.active::before { content:''; position:absolute; left:-1px; width:3px; height:26px; background:var(--teal); border-radius:0 3px 3px 0; box-shadow:var(--glow-teal); }
.nav-tip { position:absolute; left:62px; background:rgba(8,13,26,0.99); border:1px solid var(--border); padding:6px 13px; border-radius:9px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; font-family:'JetBrains Mono',monospace; color:var(--teal); z-index:300; }
body.light-mode .nav-tip { background: #fff; }
.nav-item:hover .nav-tip { opacity:1; }
.sb-bottom { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--teal); animation:blink 2s ease-in-out infinite; box-shadow:var(--glow-teal); }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* ─── MAIN ─── */
.main { margin-left:76px; flex:1; padding:22px; display:flex; flex-direction:column; gap:18px; position:relative; z-index:1; }

/* ─── TOPBAR ─── */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; background:var(--panel); border:1px solid var(--border); border-radius:18px; backdrop-filter:blur(22px); }
.empire-brand { display:flex; align-items:center; gap:14px; }
.empire-title { font-family:'Orbitron',monospace; font-size:20px; font-weight:900; background:linear-gradient(90deg,var(--teal),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:3px; text-shadow:0 0 20px rgba(0,255,200,0.3); position:relative; display:inline-block; }
.empire-title::after { content:''; position:absolute; bottom:-4px; left:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--teal),var(--gold),transparent); opacity:0.7; }
.empire-sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text2); letter-spacing:2px; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.clock-box { font-family:'Orbitron',monospace; font-size:15px; color:var(--teal); padding:9px 18px; background:rgba(0,255,200,0.05); border:1px solid rgba(0,255,200,0.15); border-radius:10px; letter-spacing:2px; }
.date-box { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text2); text-align:center; }
.icon-btn { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; position:relative; font-size:17px; border:1px solid rgba(255,255,255,0.07); background:rgba(255,255,255,0.03); }
body.light-mode .icon-btn { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); }
.icon-btn:hover { border-color:var(--teal); box-shadow:var(--glow-teal); }
.icon-btn.red-btn { border-color:rgba(255,60,60,0.15); background:rgba(255,60,60,0.05); }
.icon-btn.red-btn:hover { box-shadow:var(--glow-red); }
.badge { position:absolute; top:-5px; right:-5px; width:18px; height:18px; background:var(--red); border-radius:50%; font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; animation:badgePop 1.5s ease-in-out infinite; }
@keyframes badgePop { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
.owner-card { display:flex; align-items:center; gap:10px; padding:8px 16px; background:linear-gradient(135deg,rgba(255,215,0,0.07),rgba(255,215,0,0.02)); border:1px solid rgba(255,215,0,0.22); border-radius:11px; }
.owner-av { width:34px; height:34px; background:linear-gradient(135deg,var(--gold),#ff8c00); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; color:#000; font-family:'Orbitron',monospace; }
.owner-name { font-size:13px; font-weight:700; color:var(--gold); }
.owner-role { font-size:9px; color:rgba(255,215,0,0.45); font-family:'JetBrains Mono',monospace; letter-spacing:1px; }
body.light-mode .owner-role { color: #d97706; }

/* ─── AI HERO BANNER ─── */
.ai-hero { background:linear-gradient(135deg,rgba(0,255,200,0.06),rgba(13,21,38,.92) 45%,rgba(255,60,60,0.05)); border:1px solid var(--border); border-radius:22px; padding:22px 28px; display:flex; align-items:center; gap:22px; position:relative; overflow:hidden; backdrop-filter:blur(22px); }
body.light-mode .ai-hero { background: linear-gradient(135deg, rgba(0,255,200,0.1), rgba(255,255,255,0.95), rgba(255,60,60,0.1)); border: 1px solid var(--border); }
.ai-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--teal),transparent); animation:scan 3.5s linear infinite; }
@keyframes scan { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
.ai-orb-wrap { position:relative; width:70px; height:70px; flex-shrink:0; }
.ai-orb-ring { position:absolute; inset:0; border-radius:50%; border:2px solid transparent; background:conic-gradient(var(--teal),var(--red),var(--gold),var(--teal)) border-box; -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; animation:spin 6s linear infinite; }
.ai-orb-core { position:absolute; inset:6px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:26px; }
.ai-orb-core.speaking { animation:orbBob 0.5s ease-in-out infinite; }
@keyframes orbBob { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
.ai-content { flex:1; }
.ai-tag { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--teal); letter-spacing:3px; margin-bottom:5px; }
.ai-text { font-size:15px; font-weight:600; line-height:1.55; }
.ai-text span { color:var(--teal); }
.ai-controls { display:flex; align-items:center; gap:10px; margin-top:12px; }
.ai-inp { flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:11px; padding:11px 16px; color:var(--text); font-family:'Inter',sans-serif; font-size:13px; outline:none; max-width:380px; }
body.light-mode .ai-inp { background: rgba(0,0,0,0.02); }
.ai-inp::placeholder { color:var(--text2); }
.ai-inp:focus { border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,255,200,0.08); }
.btn-send { width:40px; height:40px; background:linear-gradient(135deg,var(--teal),var(--teal2)); border:none; border-radius:10px; color:#000; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; flex-shrink:0; }
.btn-send:hover { box-shadow:var(--glow-teal); transform:scale(1.07); }
.btn-voice { width:40px; height:40px; background:rgba(255,60,60,0.1); border:1px solid rgba(255,60,60,0.25); border-radius:10px; color:var(--red); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .3s; flex-shrink:0; }
.btn-voice:hover, .btn-voice.on { box-shadow:var(--glow-red); }
.btn-voice.on { animation:voiceGlow 0.8s ease-in-out infinite; background:rgba(255,60,60,0.2); }
@keyframes voiceGlow { 0%,100% { box-shadow:0 0 8px rgba(255,60,60,0.3); } 50% { box-shadow:0 0 30px rgba(255,60,60,0.9); } }
.voice-waves { display:flex; align-items:center; gap:3px; margin-left:8px; opacity:0; transition:opacity .3s; }
.voice-waves.on { opacity:1; }
.wave { width:3px; border-radius:3px; background:var(--red); animation:waveBounce 0.5s ease-in-out infinite; }
.wave:nth-child(1) { height:8px; animation-delay:0s; }
.wave:nth-child(2) { height:16px; animation-delay:.1s; }
.wave:nth-child(3) { height:24px; animation-delay:.2s; }
.wave:nth-child(4) { height:16px; animation-delay:.3s; }
.wave:nth-child(5) { height:8px; animation-delay:.4s; }
@keyframes waveBounce { 0%,100% { transform:scaleY(.4); } 50% { transform:scaleY(1); } }

/* ─── STAT CARDS ─── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:13px; }
.sc { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:18px 16px; position:relative; overflow:hidden; backdrop-filter:blur(20px); transition:all .3s; cursor:pointer; }
.sc:hover { transform:translateY(-3px); box-shadow:0 10px 35px rgba(0,0,0,.35); }
.sc::after { content:''; position:absolute; top:-10px; right:-10px; width:70px; height:70px; border-radius:50%; filter:blur(22px); opacity:.25; }
.sc.t::after { background:var(--teal); } .sc.t:hover { border-color:var(--teal); box-shadow:0 10px 35px rgba(0,0,0,.3),var(--glow-teal); }
.sc.r::after { background:var(--red); } .sc.r:hover { border-color:var(--red); box-shadow:0 10px 35px rgba(0,0,0,.3),var(--glow-red); }
.sc.g::after { background:var(--gold); } .sc.g:hover { border-color:var(--gold); box-shadow:0 10px 35px rgba(0,0,0,.3),var(--glow-gold); }
.sc.b::after { background:#4fc3f7; } .sc.b:hover { border-color:#4fc3f7; }
.sc.p::after { background:#b388ff; } .sc.p:hover { border-color:#b388ff; }
.sc-icon { font-size:22px; display:block; margin-bottom:10px; }
.sc-val { font-family:'Orbitron',monospace; font-size:26px; font-weight:700; display:block; margin-bottom:3px; }
.sc.t .sc-val { color:var(--teal); }
.sc.r .sc-val { color:var(--red); }
.sc.g .sc-val { color:var(--gold); }
.sc.b .sc-val { color:#4fc3f7; }
.sc.p .sc-val { color:#b388ff; }
.sc-lbl { font-size:10px; color:var(--text2); font-family:'JetBrains Mono',monospace; letter-spacing:1px; }

/* ─── PANELS ─── */
.panel { background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:22px; backdrop-filter:blur(22px); position:relative; overflow:hidden; }
.ph { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.pt { font-family:'Orbitron',monospace; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--teal); }
.pb { font-family:'JetBrains Mono',monospace; font-size:9px; padding:4px 11px; border-radius:20px; border:1px solid var(--border); color:var(--text2); }
.pb.live { border-color:rgba(0,255,200,.3); color:var(--teal); background:rgba(0,255,200,.06); }

/* Quick cmd panel */
.cmd-btn { padding:11px 15px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); color:var(--text); font-size:12px; font-family:'Inter',sans-serif; cursor:pointer; transition:.3s; text-align:center; font-weight:600; }
body.light-mode .cmd-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.15); color: var(--text); }
.cmd-btn:hover { border-color:var(--teal); color:var(--teal); background:rgba(0,255,200,.06); transform:translateY(-1px); }

/* Chat inputs / Forms */
.chat-inp { background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:11px; padding:10px 14px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px; outline:none; }
body.light-mode .chat-inp { background: rgba(0,0,0,0.02); }
.chat-inp:focus { border-color:var(--teal); }
.chat-inp::placeholder { color:var(--text2); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
  background-size: 200% 100%;
  animation: skeletonLoad 1.5s infinite;
  border-radius: 4px;
}
body.light-mode .skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
  background-size: 200% 100%;
}
@keyframes skeletonLoad { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Widget */
.widget-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:13px; }
.widget { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:17px; backdrop-filter:blur(20px); }
.w-title { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text2); letter-spacing:2px; margin-bottom:10px; }
.w-main { font-family:'Orbitron',monospace; font-size:24px; font-weight:700; }
.w-sub { font-size:11px; color:var(--text2); margin-top:3px; }

/* Watermark */
.watermark { position:fixed; bottom:16px; right:90px; font-family:'Orbitron',monospace; font-size:9px; color:rgba(0,255,200,.15); letter-spacing:3px; pointer-events:none; z-index:0; }

/* Toast */
.toast { position:fixed; top:20px; right:20px; background:rgba(8,13,26,.98); border:1px solid var(--teal); border-radius:15px; padding:15px 20px; min-width:270px; max-width:340px; z-index:9999; backdrop-filter:blur(24px); box-shadow:var(--glow-teal); display:none; animation:toastIn .4s ease; }
body.light-mode .toast { background: rgba(255,255,255,0.98); color: var(--text); }
@keyframes toastIn { from { transform:translateX(120px); opacity:0; } to { transform:translateX(0); opacity:1; } }
.toast-head { font-family:'Orbitron',monospace; font-size:10px; color:var(--teal); letter-spacing:2px; margin-bottom:4px; font-weight:bold; }
.toast-body { font-size:13px; color:var(--text); }

.mob-bar { display:none; background:rgba(0,255,200,.08); border-bottom:1px solid var(--border); padding:8px 16px; font-size:11px; color:var(--teal); font-family:'JetBrains Mono',monospace; text-align:center; }

/* Transitions */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.main > * { animation:fadeUp .5s ease both; }
.main > *:nth-child(1) { animation-delay:.05s; } .main > *:nth-child(2) { animation-delay:.1s; } .main > *:nth-child(3) { animation-delay:.15s; }

/* Forms & Select Fixes */
option { background-color: var(--bg2); color: var(--text); }
select { color: var(--text); background-color: rgba(255,255,255,0.04); }
body.light-mode select { background-color: rgba(0,0,0,0.02); }

/* Lite Mode Disable Animations */
.lite-mode * { animation: none !important; transition: none !important; box-shadow: none !important; filter: none !important; }
.lite-mode .amb { display: none !important; }

/* Map overrides */
.leaflet-container { background: var(--bg3) !important; font-family: 'Inter', sans-serif; }
body.light-mode .leaflet-container { background: #e5e7eb !important; }
.leaflet-popup-content-wrapper { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border); backdrop-filter: blur(10px); }
.leaflet-popup-tip { background: var(--panel) !important; border: 1px solid var(--border); }

/* Website Map Styles */
.map-container { width: 100%; height: 100%; min-height: 80vh; position: relative; background: radial-gradient(circle at center, #0a0f1e 0%, #030712 100%); overflow: hidden; border-radius: 20px; border: 1px solid var(--border); }
.hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; background: linear-gradient(135deg, #00ffc8, #0096ff); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 60px rgba(0,255,200,0.4); z-index: 10; animation: pulse 3s infinite; }
.hub-title { font-size: 20px; font-weight: 800; color: #000; }
.hub-sub { font-size: 10px; color: #000; font-family: 'JetBrains Mono'; }
@keyframes pulse { 0%,100%{box-shadow: 0 0 40px rgba(0,255,200,0.4)} 50%{box-shadow: 0 0 80px rgba(0,255,200,0.8)} }
.node { position: absolute; width: 140px; padding: 15px; background: rgba(13,21,38,0.9); border: 2px solid #00ffc8; border-radius: 16px; text-align: center; backdrop-filter: blur(10px); cursor: pointer; transition: 0.3s; z-index: 5; }
.node:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(0,255,200,0.5); }
.node-icon { font-size: 32px; margin-bottom: 8px; }
.node-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.node-stat { font-size: 11px; color: #00ffc8; font-family: 'JetBrains Mono'; }
.node.warning { border-color: #ffd700; }
.node.warning .node-stat { color: #ffd700; }
.line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, #00ffc8, transparent); transform-origin: left center; z-index: 1; opacity: 0.5; }
.details-panel { position: absolute; bottom: -300px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; background: rgba(10,15,30,0.95); border: 1px solid #00ffc8; border-radius: 20px 20px 0 0; padding: 25px; transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; backdrop-filter: blur(20px); }
.details-panel.active { bottom: 0; }
.close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #ff3c3c; font-size: 20px; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.stat-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; text-align: center; }
.stat-val { font-size: 24px; font-weight: 800; color: #00ffc8; font-family: 'JetBrains Mono'; }
.stat-lbl { font-size: 11px; color: #7a9ab8; margin-top: 5px; }