:root{
  --accent: #00E7F0;
  --accent2: #9C27B0;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.06);
  --glow: 0 0 30px rgba(0,231,240,.35), 0 0 60px rgba(156,39,176,.25);
}

* { box-sizing: border-box; }
body { 
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1000px 600px at 10% 10%, #141427, #0b0b14) fixed;
  color: #e9eef5;
}
.app-wrap { opacity: 1; transition: opacity .4s ease .15s; }
.invisible-on-preload { opacity: 0; }

/* Sidebar */
#sidebar { width: 260px; background: var(--card); min-height: 100vh; backdrop-filter: blur(8px); }
#sidebar .brand{ font-family: 'Orbitron', sans-serif; letter-spacing: .5px; }
#sidebar .nav-link { padding: .6rem 1rem; border-radius: .6rem; margin: .1rem .5rem; }
#sidebar .nav-link:hover, #sidebar .nav-link.active { background: var(--glass); color: #fff; box-shadow: inset var(--glow); }

/* Hero */
.hero { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; }
.hero::before{
  content:""; position:absolute; inset:-20%; background:
  radial-gradient(40% 40% at 20% 20%, rgba(0,231,240,.3), transparent 60%),
  radial-gradient(40% 40% at 80% 30%, rgba(156,39,176,.25), transparent 60%),
  radial-gradient(40% 40% at 50% 80%, rgba(0,231,240,.18), transparent 60%);
  filter: blur(40px); animation: float 12s ease-in-out infinite alternate;
}
@keyframes float { from{transform: translateY(-10px)} to{transform: translateY(10px)} }
.hero .hero-inner{ position:relative; padding: 2.2rem; }
.eyebrow{ text-transform: uppercase; font-size:.75rem; letter-spacing:.2rem; color:#9aa7b3; }
.title{ font-family:'Orbitron', sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.6rem); margin: .2rem 0 .4rem; }
.lead{ color:#b7c1cc; margin:0 0 .8rem; }
.chips .chip{ display:inline-block; padding:.35rem .6rem; border:1px solid rgba(255,255,255,.15); border-radius:999px; margin:.15rem .25rem 0 0; background:rgba(255,255,255,.05); }

/* Panels / KPI */
.panel{ border:1px solid rgba(255,255,255,.12); border-radius:16px; background:var(--card); box-shadow: var(--glow); }
.panel-header{ padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); font-weight:600; }
.panel-body{ padding:1rem; }

.kpi{ padding:1rem 1.2rem; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:var(--card); box-shadow: var(--glow); }
.kpi .label{ color:#9aa7b3; font-size:.9rem; }
.kpi .value{ font-size: clamp(1.8rem, 3vw, 2.2rem); font-weight:700; letter-spacing:.5px; }
.kpi .sub{ color:#9aa7b3; font-size:.85rem; }

/* Map */
.leaflet-container { background: #0d0f13; }

/* Status dot */
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px rgba(255,255,255,.4); }
.dot-red{ background:#e74c3c; } .dot-green{ background:#27ae60; } .dot-yellow{ background:#f1c40f; }

/* Preloader */
.preloader{
  position:fixed; inset:0; background: radial-gradient(70% 50% at 50% 30%, #121423, #07070d);
  display:flex; align-items:center; justify-content:center; z-index:9999; color:#e9eef5;
}
.preloader-inner{ width:min(420px,90%); text-align:center; }
.logo-wrap{ margin-bottom:1rem; }
.logo{ font-family:'Orbitron',sans-serif; font-size:2.2rem; letter-spacing:.06em; }
.logo .accent{ color: var(--accent); text-shadow: 0 0 20px rgba(0,231,240,.6); }
.progress{ width:100%; height:8px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.16); }
.progress .bar{ width:0%; height:100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: var(--glow); transition: width .2s ease; }
.hint{ margin-top:.8rem; color:#9aa7b3; font-size:.95rem; line-height:1.35; letter-spacing:.2px; }
.hidden{ display:none !important; }

/* Canvas safety */
#chartThroughput, #chartEnergy, #chartIPM { max-height: 360px !important; }
canvas { max-width: 100% !important; height: auto; }
html, body { overflow-x: hidden; }

/* Logo sizing (sidebar + preloader) */
.brand-logo { height: 28px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(0,231,240,.35)); }
.logo-img { height: 76px; width: auto; display: inline-block; filter: drop-shadow(0 0 12px rgba(0,231,240,.45)); }