:root {
  --bg: #07111f;
  --bg-2: #0b1730;
  --surface: rgba(13, 24, 43, .65);
  --surface-2: rgba(18, 33, 57, .5);
  --surface-3: rgba(255,255,255,.04);
  --line: rgba(161, 184, 217, .12);
  --line-strong: rgba(126, 151, 188, .25);
  --text: #f3f7ff;
  --muted: #9cafc9;
  --dim: #70829e;
  --purple: #9b7cff;
  --cyan: #46d8ff;
  --green: #51e39b;
  --amber: #ffc96b;
  --red: #ff6f8e;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --radius: 24px;
  --radius-sm: 16px;
  --blur: blur(28px);
  --transition: all .35s cubic-bezier(.25,.46,.45,.94);
  --hover-scale: 1.025;
  --glass-opacity: .55;
}

/* ===== THEMES ===== */
[data-theme="light"] {
  --bg: #eef4fb;
  --bg-2: #dce7f6;
  --surface: rgba(255,255,255,.7);
  --surface-2: rgba(255,255,255,.55);
  --surface-3: rgba(16,31,51,.04);
  --line: rgba(31,53,82,.1);
  --line-strong: rgba(31,53,82,.2);
  --text: #102035;
  --muted: #60728d;
  --dim: #8393aa;
  --shadow: 0 24px 70px rgba(56,79,112,.18);
}

[data-theme="retro"] {
  --bg: #0a0a0a;
  --bg-2: #1a1a1a;
  --surface: rgba(0,20,0,.75);
  --surface-2: rgba(0,30,0,.55);
  --surface-3: rgba(0,255,0,.03);
  --line: rgba(0,255,0,.15);
  --line-strong: rgba(0,255,0,.3);
  --text: #33ff33;
  --muted: #22cc22;
  --dim: #1a881a;
  --purple: #33ff33;
  --cyan: #33ff33;
  --green: #33ff33;
  --amber: #33ff33;
  --red: #ff3333;
  --shadow: 0 0 30px rgba(0,255,0,.05);
  --font-body: 'Courier New', 'Share Tech Mono', monospace;
  --font-heading: 'Courier New', 'Share Tech Mono', monospace;
  --blur: blur(4px);
}

[data-theme="cyberpunk"] {
  --bg: #0a0a1a;
  --bg-2: #0f0f2a;
  --surface: rgba(10,10,30,.65);
  --surface-2: rgba(20,15,40,.5);
  --text: #f0ecff;
  --muted: #a89bc0;
  --dim: #6b5f8a;
  --purple: #b07cff;
  --cyan: #00f0ff;
  --green: #50ffa0;
  --amber: #ffcc44;
  --red: #ff4470;
  --shadow: 0 24px 70px rgba(100,70,200,.15);
}

[data-theme="forest"] {
  --bg: #0a1a0e;
  --bg-2: #0d2a12;
  --surface: rgba(10,30,15,.65);
  --text: #d4f0d6;
  --muted: #7aad7e;
  --dim: #4d7a52;
  --purple: #8bc34a;
  --cyan: #4caf50;
  --green: #66bb6a;
  --amber: #ffb300;
  --red: #ef5350;
  --font-body: 'Playfair Display', serif;
  --font-heading: 'Playfair Display', serif;
}

[data-theme="ocean"] {
  --bg: #00142a;
  --bg-2: #002240;
  --surface: rgba(0,30,60,.6);
  --text: #d0ecff;
  --muted: #6aacd0;
  --dim: #3a7a9a;
  --purple: #64b5f6;
  --cyan: #00e5ff;
  --green: #00e676;
  --amber: #ffd740;
  --red: #ff5252;
}

[data-theme="matrix"] {
  --bg: #000;
  --bg-2: #0a0a0a;
  --surface: rgba(0,20,0,.7);
  --text: #00ff41;
  --muted: #00cc33;
  --dim: #008822;
  --purple: #00ff41;
  --cyan: #00ff41;
  --green: #00ff41;
  --amber: #00ff41;
  --red: #ff0041;
  --font-body: 'Share Tech Mono', monospace;
  --font-heading: 'Share Tech Mono', monospace;
  --blur: blur(3px);
}

[data-theme="sunset"] {
  --bg: #1a0a06;
  --bg-2: #2a1008;
  --surface: rgba(40,20,12,.65);
  --text: #ffecd6;
  --muted: #d4a080;
  --dim: #a07050;
  --purple: #ff8a65;
  --cyan: #ffab91;
  --green: #ffcc80;
  --amber: #ffb74d;
  --red: #ff5252;
  --font-body: 'Poppins', sans-serif;
  --font-heading: 'Poppins', sans-serif;
}

[data-theme="aurora"] {
  --bg: #060820;
  --bg-2: #0a1040;
  --surface: rgba(10,20,50,.6);
  --text: #d8d8ff;
  --muted: #8888bb;
  --dim: #555588;
  --purple: #b388ff;
  --cyan: #82b1ff;
  --green: #69f0ae;
  --amber: #ffd740;
  --red: #ff6f8e;
  --font-body: 'Rajdhani', sans-serif;
  --font-heading: 'Rajdhani', sans-serif;
}

[data-theme="candy"] {
  --bg: #180a18;
  --bg-2: #2a0a22;
  --surface: rgba(40,10,30,.6);
  --text: #ffddee;
  --muted: #cc88bb;
  --dim: #995588;
  --purple: #d48aff;
  --cyan: #ff66cc;
  --green: #66ffcc;
  --amber: #ffcc66;
  --red: #ff4466;
  --font-body: 'Poppins', sans-serif;
  --font-heading: 'Poppins', sans-serif;
}

/* ===== BASE ===== */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh;
  color:var(--text);
  font-family: var(--font-body, 'Inter', ui-sans-serif, system-ui, sans-serif);
  background: var(--bg);
  overflow-x:hidden;
  transition: background .8s ease, color .6s ease;
  position:relative;
}

/* ===== DYNAMIC BACKGROUND ===== */
#bg-canvas {
  position:fixed; inset:0; z-index:-2;
  width:100%; height:100%;
  display:block;
}

.bg-overlay {
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(155,124,255,.08), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(70,216,255,.06), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 70%);
  transition: all .3s ease;
}

/* ===== GLASS MORPHISM WITH DEPTH ===== */
.glass-panel {
  position:relative;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.02) inset;
  border-radius: var(--radius);
  padding: 1.2rem;
  transition: var(--transition);
  overflow:hidden;
  isolation:isolate;
}

.glass-panel::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255,255,255,.05) 0%, 
    transparent 60%);
  pointer-events:none;
  opacity:0;
  transition: opacity .5s ease;
  z-index:0;
}

.glass-panel:hover::before {
  opacity:1;
}

.glass-panel:hover {
  border-color: var(--line-strong);
  box-shadow:
    var(--shadow),
    0 0 50px rgba(155,124,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-3px) scale(1.005);
}

.glass-panel > * {
  position:relative;
  z-index:1;
}

/* ===== RETRO CRT EFFECT ===== */
[data-theme="retro"] .glass-panel {
  border-color: rgba(0,255,0,.2);
  box-shadow: 0 0 20px rgba(0,255,0,.03), inset 0 0 60px rgba(0,255,0,.02);
}

[data-theme="retro"] .glass-panel::after {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, 
    rgba(0,255,0,.01) 0px, 
    rgba(0,255,0,.01) 2px, 
    transparent 2px, 
    transparent 4px);
  pointer-events:none;
  z-index:2;
  animation: crtScan 8s linear infinite;
}

@keyframes crtScan {
  0% { transform:translateY(-100%); }
  100% { transform:translateY(100%); }
}

[data-theme="retro"] body {
  background: #0a0a0a;
  text-shadow: 0 0 4px rgba(0,255,0,.3);
}

[data-theme="retro"] .brand-mark {
  background: rgba(0,255,0,.2);
  box-shadow: 0 0 30px rgba(0,255,0,.1);
}

[data-theme="retro"] .brand-mark span {
  background: #33ff33;
  box-shadow: 0 0 20px #33ff33;
}

/* ===== HEADER ===== */
.topbar {
  position:sticky; top:16px; z-index:50;
  width:min(1480px, calc(100% - 32px));
  margin:16px auto 0;
  min-height:76px;
  border-radius:20px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  transition: var(--transition);
}

.topbar:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow), 0 0 50px rgba(155,124,255,.04);
}

.brand-block { display:flex; align-items:center; gap:14px; min-width:0; }
.brand-mark {
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(145deg, rgba(155,124,255,.9), rgba(70,216,255,.9));
  display:grid; place-items:center;
  position:relative;
  box-shadow: 0 10px 30px rgba(115,93,255,.25);
  transition: var(--transition);
  flex-shrink:0;
}
.brand-mark:hover { transform:scale(1.06) rotate(-3deg); box-shadow:0 14px 40px rgba(115,93,255,.35); }
.brand-mark::after {
  content:''; position:absolute; inset:1px; border-radius:13px;
  background:rgba(5,12,25,.2);
}
.brand-mark span {
  width:5px; border-radius:8px; background:white; z-index:1;
  box-shadow:0 0 14px rgba(255,255,255,.6);
}
.brand-mark span:nth-child(1){height:12px}
.brand-mark span:nth-child(2){height:20px}
.brand-mark span:nth-child(3){height:15px}

.eyebrow {
  color:var(--muted); font-size:.65rem; letter-spacing:.2em;
  font-weight:800; text-transform:uppercase;
}
.brand-block h1 {
  margin:3px 0 0; font-size:1.05rem; letter-spacing:-.02em;
  white-space:nowrap; font-family:var(--font-heading, 'Inter');
}
.topbar-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.connection-pill {
  border:1px solid var(--line);
  background:var(--surface-3);
  border-radius:999px;
  padding:7px 14px;
  display:flex; align-items:center; gap:8px;
  color:var(--muted);
  font-size:.75rem; font-weight:700;
  transition:var(--transition);
}
.connection-pill:hover { border-color:var(--cyan); background:rgba(70,216,255,.05); }

.clock-block { text-align:right; min-width:110px; }
.clock-block strong {
  display:block; font-size:.92rem;
  font-variant-numeric:tabular-nums;
  transition:var(--transition);
}
.clock-block strong:hover { color:var(--cyan); }
.clock-block span {
  display:block; color:var(--muted); font-size:.64rem; margin-top:2px;
}

.icon-button {
  width:40px; height:40px;
  border:1px solid var(--line);
  background:var(--surface-3);
  border-radius:12px;
  cursor:pointer;
  transition:var(--transition);
  display:grid; place-items:center;
  font-size:1.1rem;
}
.icon-button:hover {
  border-color:var(--line-strong);
  transform:translateY(-2px) scale(1.05);
  background:var(--surface-2);
  box-shadow:0 8px 30px rgba(0,0,0,.15);
}
.icon-button:active { transform:scale(.93); }

.pulse-dot, .status-dot, .power-dot {
  width:8px; height:8px; border-radius:50%;
  display:inline-block;
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(255,201,107,.1);
  transition:var(--transition);
}
.pulse-dot { animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

/* ===== PAGE SHELL ===== */
.page-shell {
  width:min(1480px, calc(100% - 32px));
  margin:24px auto 48px;
}

/* ===== HERO ===== */
.hero-grid { display:grid; grid-template-columns:1.65fr .85fr; gap:18px; }
.hero-card {
  border-radius:var(--radius);
  padding:32px 30px;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  position:relative;
  transition:var(--transition);
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-card:hover {
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:var(--shadow), 0 0 60px rgba(155,124,255,.06);
}
.hero-card::after {
  content:'';
  position:absolute; width:350px; height:350px;
  right:-160px; bottom:-180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(70,216,255,.12), transparent 68%);
  pointer-events:none;
}
.hero-copy { max-width:760px; position:relative; z-index:1; }

.status-label {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:rgba(81,227,155,.08);
  border:1px solid rgba(81,227,155,.14);
  color:#b7f9d9;
  font-size:.65rem; letter-spacing:.1em; font-weight:800;
  transition:var(--transition);
}
.status-label:hover { background:rgba(81,227,155,.14); }

.hero-copy h2 {
  margin:16px 0 10px;
  font-size:clamp(2rem,3.8vw,3.8rem);
  line-height:1.02; letter-spacing:-.055em;
}
.hero-copy h2 span {
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-copy p {
  margin:0; max-width:700px; color:var(--muted);
  line-height:1.7; font-size:.9rem;
}

.hero-metrics {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin-top:24px; position:relative; z-index:1;
}
.hero-metric {
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  transition:var(--transition);
}
.hero-metric:hover {
  border-color:var(--cyan);
  background:rgba(70,216,255,.04);
  transform:translateY(-2px);
}
.hero-metric span {
  display:block; font-size:.58rem; letter-spacing:.14em;
  color:var(--dim); font-weight:800;
}
.hero-metric strong {
  display:block; margin-top:5px; font-size:.92rem;
  font-variant-numeric:tabular-nums;
}

.quick-status {
  border-radius:var(--radius);
  padding:24px;
  min-height:280px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  transition:var(--transition);
}
.quick-status:hover { border-color:var(--line-strong); }

.section-heading {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px;
  margin-bottom:16px;
}
.section-heading.compact { margin-bottom:14px; }
.section-heading h3 {
  margin:6px 0 0; font-size:1.15rem; letter-spacing:-.03em;
}
.heading-note { margin:6px 0 0; color:var(--muted); font-size:.75rem; }

.health-orb {
  width:13px; height:13px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 20px rgba(255,201,107,.4);
  transition:var(--transition);
}
.health-orb:hover { transform:scale(1.3); }

.health-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.health-item {
  display:flex; gap:10px; align-items:center;
  padding:11px 13px; border-radius:14px;
  border:1px solid var(--line);
  background:var(--surface-3);
  transition:var(--transition);
}
.health-item:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
  transform:translateX(4px);
}

.mini-icon {
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  font-size:.9rem; font-weight:900;
  flex-shrink:0;
}
.mini-icon.violet, .node-logo.purple, .insight-icon.purple {
  color:#d5c8ff; background:rgba(155,124,255,.14);
  border:1px solid rgba(155,124,255,.17);
}
.mini-icon.cyan, .node-logo.cyan, .insight-icon.cyan {
  color:#b8f2ff; background:rgba(70,216,255,.11);
  border:1px solid rgba(70,216,255,.15);
}
.mini-icon.green {
  color:#c1f9da; background:rgba(81,227,155,.11);
  border:1px solid rgba(81,227,155,.15);
}
.mini-icon.amber, .insight-icon.amber {
  color:#ffe7b1; background:rgba(255,201,107,.11);
  border:1px solid rgba(255,201,107,.15);
}

.health-item small {
  display:block; color:var(--dim);
  font-size:.58rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:800;
}
.health-item strong {
  display:block; margin-top:3px; font-size:.8rem;
}

.system-note {
  margin-top:12px; color:var(--muted); font-size:.7rem;
  padding:10px 12px; border-top:1px solid var(--line);
  line-height:1.5; transition:var(--transition);
}
.system-note:hover { color:var(--text); }

/* ===== ROOMS ===== */
.section-block { margin-top:30px; }
.room-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
.room-card {
  border-radius:var(--radius); padding:22px;
  overflow:hidden; position:relative;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  transition:var(--transition);
}
.room-card::before {
  content:'';
  position:absolute; inset:0 auto auto 0;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--purple),transparent 75%);
  opacity:.7;
  transition:var(--transition);
}
.room-card:nth-child(2)::before {
  background:linear-gradient(90deg,var(--cyan),transparent 75%);
}
.room-card:hover {
  transform:translateY(-4px) scale(1.005);
  border-color:var(--line-strong);
  box-shadow:var(--shadow), 0 20px 60px rgba(0,0,0,.2);
}
.room-card:hover::before { height:3px; opacity:1; }

.room-topline {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.room-title { display:flex; align-items:center; gap:10px; }
.node-logo {
  width:42px; height:42px; border-radius:13px;
  display:grid; place-items:center; font-size:1.2rem;
  transition:var(--transition);
  flex-shrink:0;
}
.node-logo:hover { transform:rotate(-6deg) scale(1.08); }
.room-kicker {
  color:var(--dim); font-size:.58rem;
  letter-spacing:.14em; font-weight:800;
}
.room-title h4 { margin:4px 0 0; font-size:1.05rem; }
.room-title h4 em {
  font-style:normal; color:var(--muted); font-weight:500;
}
.node-state {
  display:flex; gap:7px; align-items:center;
  color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.08em;
}

.room-values {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:22px 0 14px;
}
.big-reading {
  padding:16px; border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  display:flex; align-items:flex-start; gap:12px;
  transition:var(--transition);
}
.big-reading:hover {
  border-color:var(--cyan);
  background:rgba(70,216,255,.04);
}
.reading-icon {
  width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  color:var(--cyan);
  border:1px solid rgba(70,216,255,.18);
  background:rgba(70,216,255,.08);
  transition:var(--transition);
}
.big-reading.temperature .reading-icon {
  color:#d4c7ff;
  border-color:rgba(155,124,255,.18);
  background:rgba(155,124,255,.08);
}
.big-reading strong {
  font-size:2.4rem; line-height:.9;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  transition:var(--transition);
}
.big-reading div>span { margin-left:3px; color:var(--muted); }
.big-reading small {
  display:block; margin-top:5px;
  color:var(--dim);
  text-transform:uppercase; letter-spacing:.09em;
  font-size:.55rem; font-weight:800;
}

.metric-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.metric-strip>div {
  padding:9px 10px; border-radius:12px;
  background:var(--surface-3);
  border:1px solid var(--line);
  min-width:0;
  transition:var(--transition);
}
.metric-strip>div:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.metric-strip span {
  display:block; font-size:.52rem;
  color:var(--dim); letter-spacing:.1em; font-weight:800;
}
.metric-strip strong {
  display:block; margin-top:3px; font-size:.7rem;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

.room-footer {
  margin-top:12px; display:flex;
  align-items:center; justify-content:space-between; gap:10px;
  color:var(--dim); font-size:.65rem;
}
.alert-tag {
  color:#ffdbe2;
  border:1px solid rgba(255,111,142,.22);
  background:rgba(255,111,142,.09);
  padding:4px 9px; border-radius:999px;
  font-size:.58rem; font-weight:900; letter-spacing:.08em;
  transition:var(--transition);
}
.alert-tag:hover { background:rgba(255,111,142,.18); }
.hidden { display:none !important; }

/* ===== DASHBOARD GRID ===== */
.dashboard-grid {
  display:grid; grid-template-columns:1.6fr .75fr; gap:18px; margin-top:30px;
}
.chart-panel, .insight-panel, .outage-panel, .data-panel {
  border-radius:var(--radius); padding:22px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  transition:var(--transition);
}
.chart-panel:hover, .insight-panel:hover,
.outage-panel:hover, .data-panel:hover {
  border-color:var(--line-strong);
}

.chart-heading { align-items:center; }
.chart-summary { color:var(--muted); font-size:.7rem; }

.chart-controls {
  display:grid;
  grid-template-columns:150px minmax(260px,1fr) 150px auto auto;
  align-items:end; gap:10px; margin-bottom:14px;
}
.control-group label {
  display:block; margin-bottom:5px;
  color:var(--dim); font-size:.58rem;
  letter-spacing:.09em; font-weight:800; text-transform:uppercase;
}
select, input[type="date"], input[type="time"] {
  width:100%; color:var(--text);
  border:1px solid var(--line);
  background:rgba(0,0,0,.12);
  border-radius:11px;
  padding:9px 11px;
  outline:none;
  transition:var(--transition);
}
select:hover, input:hover { border-color:var(--line-strong); }
select:focus, input:focus {
  border-color:rgba(70,216,255,.45);
  box-shadow:0 0 0 3px rgba(70,216,255,.08);
}

.segmented {
  display:flex; gap:3px; padding:3px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface-3);
}
.segmented button {
  flex:1; border:0; border-radius:7px;
  padding:7px 6px;
  background:transparent; color:var(--muted);
  cursor:pointer; font-size:.66rem; font-weight:800;
  transition:var(--transition);
}
.segmented button:hover {
  color:var(--text); background:rgba(255,255,255,.04);
}
.segmented button.active {
  color:white;
  background:linear-gradient(90deg,rgba(155,124,255,.25),rgba(70,216,255,.15));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.primary-button, .outline-button {
  border-radius:11px; padding:9px 14px;
  cursor:pointer; font-size:.68rem; font-weight:850;
  transition:var(--transition);
}
.primary-button {
  border:1px solid transparent;
  color:#07111f;
  background:linear-gradient(90deg,#b69eff,#6edfff);
  box-shadow:0 8px 22px rgba(104,147,255,.15);
}
.primary-button:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 35px rgba(104,147,255,.22);
}
.primary-button:active { transform:scale(.96); }
.outline-button {
  color:var(--text); border:1px solid var(--line);
  background:var(--surface-3);
}
.outline-button:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
  transform:translateY(-2px);
}

.chart-wrap {
  min-height:360px; position:relative; padding-top:8px;
}
#main-chart {
  width:100% !important; height:360px !important;
}
.chart-empty, .table-empty {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  color:var(--muted); pointer-events:none;
}
.empty-icon {
  width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--cyan); font-size:1.4rem;
  background:var(--surface-3);
  transition:var(--transition);
}

.insight-list { display:flex; flex-direction:column; gap:10px; }
.insight-card {
  display:grid; grid-template-columns:34px 1fr; gap:10px;
  padding:14px; border-radius:15px;
  border:1px solid var(--line);
  background:var(--surface-3);
  transition:var(--transition);
}
.insight-card:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
  transform:translateX(4px);
}
.insight-icon {
  width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
}
.insight-card small {
  display:block; color:var(--dim);
  font-size:.58rem; text-transform:uppercase;
  letter-spacing:.1em; font-weight:800;
}
.insight-card strong {
  display:block; margin-top:4px; font-size:.88rem;
}
.insight-card p {
  margin:4px 0 0; color:var(--muted);
  font-size:.68rem; line-height:1.5;
}

/* ===== OUTAGE ===== */
.outage-panel { margin-top:30px; overflow:hidden; }
.outage-live-grid {
  display:grid; grid-template-columns:1.25fr .75fr; gap:14px;
}
.outage-main, .cycle-card {
  border:1px solid var(--line); border-radius:17px; padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  transition:var(--transition);
}
.outage-main:hover, .cycle-card:hover { border-color:var(--line-strong); }

.power-state-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.power-state {
  display:flex; align-items:center; gap:8px; font-size:.78rem;
}
.countdown-label { color:var(--muted); font-size:.68rem; }

.countdown {
  margin:12px 0 4px;
  font-size:clamp(2.2rem,4.8vw,3.8rem);
  font-weight:900; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,#fff,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:var(--transition);
}
.countdown-sub { margin:0; color:var(--muted); font-size:.75rem; }

.progress-track {
  height:8px; margin:16px 0;
  background:rgba(255,255,255,.06);
  border-radius:999px; overflow:hidden;
}
.progress-track span {
  display:block; width:0; height:100%;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:999px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}

.outage-times {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
}
.outage-times>div {
  padding:10px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-3);
  transition:var(--transition);
}
.outage-times>div:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.outage-times small {
  display:block; color:var(--dim);
  font-size:.52rem; letter-spacing:.09em; font-weight:800;
}
.outage-times strong {
  display:block; margin-top:4px; font-size:.8rem;
}

/* ===== CYCLE RULE - ANIMATED ORBIT ===== */
.cycle-card { display:flex; align-items:center; gap:18px; }
.cycle-orbit {
  width:130px; height:130px; flex:0 0 130px;
  border-radius:50%;
  position:relative;
  transition:var(--transition);
  background: radial-gradient(circle at 30% 30%, rgba(155,124,255,.05), transparent 60%);
}
.cycle-orbit .orbit-ring {
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px dashed rgba(155,124,255,.25);
  animation: spinOrbit 12s linear infinite;
}
.cycle-orbit .orbit-ring:nth-child(2) {
  border-color: rgba(70,216,255,.15);
  animation-duration: 18s;
  animation-direction: reverse;
  inset:10px;
}
.cycle-orbit .orbit-ring:nth-child(3) {
  border-color: rgba(255,201,107,.12);
  animation-duration: 24s;
  inset:20px;
}
@keyframes spinOrbit {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

.cycle-orbit .orbit-dot {
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  box-shadow: 0 0 20px currentColor;
  animation: floatDot 4s ease-in-out infinite alternate;
}
.cycle-orbit .orbit-dot:nth-child(4) {
  top:0; left:50%; transform:translateX(-50%);
  color:var(--purple);
  background:var(--purple);
  animation-duration: 3.2s;
}
.cycle-orbit .orbit-dot:nth-child(5) {
  bottom:6px; left:6px;
  color:var(--cyan);
  background:var(--cyan);
  animation-duration: 4.1s;
  animation-delay: .5s;
}
.cycle-orbit .orbit-dot:nth-child(6) {
  bottom:6px; right:6px;
  color:var(--amber);
  background:var(--amber);
  animation-duration: 3.7s;
  animation-delay: 1s;
}
@keyframes floatDot {
  0% { transform:translateY(-6px) scale(1); opacity:.7; }
  100% { transform:translateY(6px) scale(1.2); opacity:1; }
}

.cycle-orbit .orbit-center {
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:1.5rem; font-weight:900;
  color:var(--text);
  text-shadow: 0 0 30px rgba(155,124,255,.2);
  letter-spacing:-.05em;
}

.cycle-card h4 { margin:5px 0 8px; font-size:.95rem; }
.cycle-card p { margin:5px 0; color:var(--muted); font-size:.67rem; line-height:1.5; }

.outage-days {
  display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px;
}
.outage-day {
  padding:14px; border:1px solid var(--line);
  border-radius:15px; background:var(--surface-3);
  transition:var(--transition);
}
.outage-day:hover {
  border-color:var(--line-strong);
  background:var(--surface-2);
  transform:translateY(-2px);
}
.outage-day.today {
  border-color:rgba(70,216,255,.25);
  box-shadow:inset 0 0 0 1px rgba(70,216,255,.06);
}
.outage-day.today:hover {
  border-color:var(--cyan);
  box-shadow:0 0 30px rgba(70,216,255,.06);
}
.outage-day .day-label {
  color:var(--dim); font-size:.58rem;
  text-transform:uppercase; letter-spacing:.1em; font-weight:800;
}
.outage-day strong { display:block; margin-top:5px; font-size:.72rem; }
.outage-day b { display:block; margin-top:4px; font-size:.95rem; }

.reference-banner {
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:11px 13px;
  border:1px dashed rgba(155,124,255,.25);
  border-radius:14px;
  background:rgba(155,124,255,.04);
  transition:var(--transition);
}
.reference-banner:hover {
  border-color:var(--purple);
  background:rgba(155,124,255,.07);
}
.reference-banner small {
  display:block; color:var(--dim);
  font-size:.52rem; letter-spacing:.09em; font-weight:800;
}
.reference-banner strong {
  display:block; margin-top:3px; font-size:.8rem;
}
.reference-note { margin-left:auto; color:var(--muted); font-size:.65rem; }

/* ===== DATA TABLE ===== */
.data-panel { margin-top:30px; }
.table-wrap { overflow:auto; position:relative; }
table {
  width:100%; border-collapse:collapse; min-width:620px;
}
th, td {
  text-align:left; padding:11px 11px;
  border-bottom:1px solid var(--line);
  font-size:.7rem;
  transition:var(--transition);
}
th {
  color:var(--dim); text-transform:uppercase;
  letter-spacing:.08em; font-size:.55rem;
}
td { color:var(--muted); }
td strong { color:var(--text); }
tr:hover td { background:var(--surface-3); }

/* ===== FOOTER ===== */
.site-footer {
  width:min(1480px, calc(100% - 32px));
  margin:0 auto 40px;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  color:var(--dim); font-size:.62rem;
}

/* ===== TOASTS ===== */
.toast-stack {
  position:fixed; right:16px; bottom:16px;
  z-index:100; display:flex; flex-direction:column; gap:8px;
}
.toast {
  max-width:360px; border:1px solid var(--line);
  border-radius:14px; padding:11px 14px;
  background:rgba(9,18,33,.92);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
  color:var(--text); font-size:.7rem;
  animation:toast-in .3s cubic-bezier(.4,0,.2,1) both;
}
.toast.error { border-color:rgba(255,111,142,.3); }
.toast.ok { border-color:rgba(81,227,155,.3); }
@keyframes toast-in {
  from{opacity:0;transform:translateY(12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ===== MODALS ===== */
.modal {
  border:0; padding:0; background:transparent;
  width:min(520px,calc(100% - 24px)); color:var(--text);
}
.modal::backdrop {
  background:rgba(3,9,18,.7);
  backdrop-filter:blur(6px);
}
.modal-card {
  border-radius:24px; padding:24px;
  position:relative;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.modal-close {
  position:absolute; top:14px; right:14px;
  width:35px; height:35px; border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-3);
  cursor:pointer; font-size:1.2rem;
  transition:var(--transition);
  display:grid; place-items:center;
}
.modal-close:hover {
  border-color:var(--red);
  background:rgba(255,111,142,.1);
  transform:rotate(90deg);
}
.modal-card h3 { margin:8px 0 6px; font-size:1.3rem; }
.modal-note { margin:0 0 16px; color:var(--muted); font-size:.7rem; line-height:1.6; }
.modal-card label {
  display:block; margin:12px 0;
  color:var(--muted); font-size:.7rem; font-weight:700;
}
.modal-card label input, .modal-card label select { margin-top:6px; }
.modal-preview {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border:1px dashed rgba(70,216,255,.25);
  border-radius:12px;
  background:rgba(70,216,255,.04);
  transition:var(--transition);
}
.modal-preview:hover { border-color:var(--cyan); }
.modal-preview span { color:var(--muted); font-size:.66rem; }
.modal-preview strong { font-size:.74rem; }
.modal-actions {
  display:flex; justify-content:flex-end; gap:8px; margin-top:16px;
}
.wide-modal { width:min(860px,calc(100vw - 24px)); }
.modal-table { max-height:65vh; }

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
  .hero-grid, .dashboard-grid { grid-template-columns:1fr; }
  .outage-live-grid { grid-template-columns:1fr; }
  .chart-controls { grid-template-columns:150px minmax(240px,1fr) 150px auto; }
  .hero-card, .quick-status { min-height:auto; }
}
@media (max-width:820px) {
  .topbar { position:relative; top:0; align-items:flex-start; flex-direction:column; }
  .topbar-tools { width:100%; justify-content:space-between; }
  .brand-block h1 { white-space:normal; }
  .hero-metrics { grid-template-columns:1fr 1fr; }
  .room-grid { grid-template-columns:1fr; }
  .chart-controls { grid-template-columns:1fr 1fr; }
  .control-group.grow { grid-column:span 2; }
  .chart-controls .primary-button, .chart-controls .outline-button { width:100%; }
  .date-control { grid-column:span 2; }
  .outage-days { grid-template-columns:1fr; }
  .reference-note { display:none; }
  .metric-strip { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .page-shell, .topbar, .site-footer { width:min(100% - 20px,1480px); }
  .topbar { padding:13px; }
  .hero-card, .quick-status, .chart-panel, .insight-panel,
  .outage-panel, .data-panel, .room-card { padding:17px; }
  .hero-copy h2 { font-size:2.1rem; }
  .hero-metrics { grid-template-columns:1fr 1fr; }
  .health-grid { grid-template-columns:1fr; }
  .room-values { grid-template-columns:1fr 1fr; }
  .chart-controls { grid-template-columns:1fr; }
  .control-group.grow, .date-control { grid-column:auto; }
  .segmented { overflow:auto; }
  .segmented button { min-width:88px; }
  .outage-times { grid-template-columns:1fr 1fr; }
  .outage-times>div:last-child { grid-column:1/-1; }
  .cycle-card { flex-direction:column; align-items:flex-start; }
  .cycle-orbit { align-self:center; }
  .connection-pill { max-width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .clock-block { min-width:auto; }
  .topbar-tools { gap:6px; }
  .modal-card { padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}