/* ═══════════════════════════════════════════════════
   myLab — Sci-Fi HUD Theme
   Accent: #06bc91  |  Base: Pure Black
   Style: Angular HUD / Galacta / Avatar
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --accent: #06bc91;
  --accent-rgb: 6, 188, 145;
  --accent-dim: rgba(6,188,145,0.2);
  --accent-glow: rgba(6,188,145,0.5);
  --accent-bright: #1df5c2;
  --bg: #000000;
  --bg-panel: rgba(4, 18, 14, 0.65);
  --bg-panel-solid: rgba(2, 10, 8, 0.85);
  --bg-inner: rgba(6,188,145,0.03);
  --border: rgba(6,188,145,0.1);
  --border-bright: rgba(6,188,145,0.35);
  --text: #d4f5eb;
  --text-2: rgba(212,245,235,0.55);
  --text-3: rgba(212,245,235,0.25);
  --danger: #ff4d5e;
  --warning: #ffb020;
  --info: #5ba8ff;
  --success: #06bc91;
  --sidebar-w: 230px;
  --topbar-h: 52px;
  --clip: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --clip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --transition: 0.2s ease;
}

/* ── Light Theme ─────────────────────────────────── */
:root[data-theme="light"] {
  --accent: #0d9668;
  --accent-rgb: 13, 150, 104;
  --accent-dim: rgba(13,150,104,0.15);
  --accent-glow: rgba(13,150,104,0.2);
  --accent-bright: #0a7d56;
  --bg: #f0f2f5;
  --bg-panel: rgba(255,255,255,0.92);
  --bg-panel-solid: rgba(255,255,255,0.97);
  --bg-inner: rgba(13,150,104,0.03);
  --border: rgba(0,0,0,0.1);
  --border-bright: rgba(13,150,104,0.3);
  --text: #1a1a2e;
  --text-2: #4a5568;
  --text-3: #8896a6;
  --danger: #dc2626;
  --warning: #d97706;
  --info: #2563eb;
  --success: #0d9668;
}

[data-theme="light"] body {
  background: #f0f2f5 !important;
  color: var(--text);
}

[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 10% 40%, rgba(13,150,104,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(13,150,104,0.02) 0%, transparent 40%);
}

[data-theme="light"] body::after {
  background-image: none;
}

[data-theme="light"] .scanline-overlay {
  display: none;
}

[data-theme="light"] .sidebar {
  background: rgba(255,255,255,0.98) !important;
  border-right-color: rgba(0,0,0,0.08);
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
}

[data-theme="light"] .topbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(0,0,0,0.06);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="light"] .glass {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .glass::before { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .glass::after { background: none; }

[data-theme="light"] .input {
  background: #f7f8fa;
  border-color: rgba(0,0,0,0.12);
  color: #1a1a2e;
}
[data-theme="light"] .input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,150,104,0.1);
}
[data-theme="light"] .input::placeholder { color: #a0aec0; }

[data-theme="light"] .btn {
  background: rgba(13,150,104,0.06);
  border-color: rgba(13,150,104,0.2);
}
[data-theme="light"] .btn:hover {
  background: rgba(13,150,104,0.12);
}
[data-theme="light"] .btn-danger {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.2);
}

[data-theme="light"] .health-item {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .sensor-card {
  background: #fff;
  border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .nav-item { color: #4a5568; }
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.03); color: #1a1a2e; }
[data-theme="light"] .nav-item.active { background: rgba(13,150,104,0.08); color: var(--accent); }

[data-theme="light"] .ai-msg-body pre {
  background: #f4f5f7;
  border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .toggle-group { background: #f0f2f5; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .toggle-btn { color: #8896a6; }
[data-theme="light"] .toggle-btn.active { background: rgba(13,150,104,0.12); color: var(--accent); }

[data-theme="light"] .card-title { text-shadow: none; }
[data-theme="light"] .topbar-clock { text-shadow: none; }
[data-theme="light"] .sidebar-brand .name { text-shadow: none; }
[data-theme="light"] .sidebar-brand .mark { text-shadow: none; }
[data-theme="light"] .sensor-val { text-shadow: none; }
[data-theme="light"] .data-value { text-shadow: none; color: var(--accent); }

/* Light theme for login page */
[data-theme="light"] .logo-text { text-shadow: none; }
[data-theme="light"] .logo-mark { text-shadow: none; }
[data-theme="light"] .hud-corner { border-color: rgba(13,150,104,0.1); }
[data-theme="light"] .login-card { box-shadow: 0 2px 16px rgba(0,0,0,0.06); }

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family: 'Rajdhani', sans-serif;
  background: #000;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Background Effects ─────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 10% 40%, rgba(var(--accent-rgb),0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(var(--accent-rgb),0.04) 0%, transparent 40%);
  pointer-events:none; z-index:0;
  animation: ambientPulse 15s ease-in-out infinite alternate;
}
@keyframes ambientPulse { 0%{opacity:.5} 100%{opacity:1} }

body::after {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.02) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events:none; z-index:0;
}

/* ── Scanline Overlay ───────────────────────────── */
.scanline-overlay {
  position:fixed; inset:0;
  pointer-events:none; z-index:9998;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),0.25); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ═══════════════════════════════════════════════════
   GLASS PANEL — Angular HUD Style
   ═══════════════════════════════════════════════════ */

.glass {
  background: var(--bg-panel-solid);
  clip-path: var(--clip);
  position: relative;
  transition: all var(--transition);
  isolation: isolate;
}

/* Outer glow border via shadow on a wrapper trick — we use outline glow */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  pointer-events: none;
  z-index: 2;
}

/* Corner accent marks */
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    /* top-left corner */
    linear-gradient(135deg, rgba(var(--accent-rgb),0.25) 0px, rgba(var(--accent-rgb),0.25) 1px, transparent 1px) no-repeat 0 0 / 30px 30px,
    /* bottom-right corner */
    linear-gradient(315deg, rgba(var(--accent-rgb),0.25) 0px, rgba(var(--accent-rgb),0.25) 1px, transparent 1px) no-repeat 100% 100% / 30px 30px,
    /* top glow line */
    linear-gradient(90deg, transparent 5%, rgba(var(--accent-rgb),0.2) 30%, rgba(var(--accent-rgb),0.4) 50%, rgba(var(--accent-rgb),0.2) 70%, transparent 95%) no-repeat 0 0 / 100% 1px;
  pointer-events: none;
  z-index: 3;
}

.glass:hover::before {
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: inset 0 0 30px rgba(var(--accent-rgb), 0.03);
}

/* ── Card Parts ─────────────────────────────────── */
.card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 11px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.06);
  position: relative; z-index: 4;
}

.card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.card-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb), 0.08);
  clip-path: var(--clip-sm);
  font-size: 0.8rem; flex-shrink: 0;
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

.card-body {
  padding: 14px 18px 18px;
  position: relative; z-index: 4;
}

.card-actions {
  margin-left: auto;
  display: flex; gap: 6px; align-items: center;
}

/* ── Status Dots ────────────────────────────────── */
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-on { background:var(--success); box-shadow:0 0 4px var(--accent-glow), 0 0 10px rgba(var(--accent-rgb),0.25); animation:dotPulse 2.5s infinite; }
.dot-off { background:var(--danger); box-shadow:0 0 4px rgba(255,77,94,0.5); }
.dot-warn { background:var(--warning); box-shadow:0 0 4px rgba(255,176,32,0.5); }
.dot-idle { background:var(--text-3); }
@keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Buttons — Angular HUD ──────────────────────── */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  padding: 7px 14px;
  clip-path: var(--clip-sm);
  cursor: pointer;
  transition: all var(--transition);
  outline: none;
  white-space: nowrap;
  position: relative;
}
.btn:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  text-shadow: 0 0 8px var(--accent-glow);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.1);
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:rgba(var(--accent-rgb),0.12); border-color:rgba(var(--accent-rgb),0.35); }
.btn-danger { color:var(--danger); border-color:rgba(255,77,94,0.15); background:rgba(255,77,94,0.06); }
.btn-danger:hover { background:rgba(255,77,94,0.15); border-color:rgba(255,77,94,0.35); text-shadow:0 0 8px rgba(255,77,94,0.5); }
.btn-sm { padding:4px 10px; font-size:0.68rem; }
.btn-icon { width:26px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center; clip-path:none; border-radius:4px; font-size:0.85rem; }
.btn-ghost { background:transparent; border-color:transparent; clip-path:none; }
.btn-ghost:hover { background:rgba(255,255,255,0.05); }

/* ── Inputs ─────────────────────────────────────── */
.input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  color: var(--text);
  padding: 9px 12px;
  clip-path: var(--clip-sm);
  outline: none;
  width: 100%;
  transition: all var(--transition);
}
.input:focus { border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.1); background:rgba(0,0,0,0.5); }
.input::placeholder { color:var(--text-3); }

/* ── Toggle ─────────────────────────────────────── */
.toggle-group {
  display:flex; gap:2px;
  background:rgba(0,0,0,0.3);
  padding:2px;
  border:1px solid rgba(var(--accent-rgb),0.08);
  clip-path: var(--clip-sm);
}
.toggle-btn {
  padding:6px 14px; border:none; background:transparent;
  color:var(--text-3);
  font-family:'Rajdhani',sans-serif; font-weight:600; font-size:0.8rem; letter-spacing:0.5px;
  cursor:pointer; transition:all var(--transition);
}
.toggle-btn.active {
  background:rgba(var(--accent-rgb),0.15);
  color:var(--accent);
  text-shadow:0 0 6px var(--accent-glow);
}

/* ── Data Row ───────────────────────────────────── */
.data-row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.05); }
.data-row:last-child { border-bottom:none; }
.data-label { font-size:0.9rem; color:var(--text-2); }
.data-value { font-family:'JetBrains Mono',monospace; font-size:0.88rem; color:var(--accent-bright); text-shadow:0 0 4px rgba(var(--accent-rgb),0.2); }

/* ── Badge ──────────────────────────────────────── */
.badge { display:inline-block; padding:3px 8px; font-size:0.68rem; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; font-family:'Rajdhani',sans-serif; clip-path:var(--clip-sm); }
.badge-on { background:rgba(var(--accent-rgb),0.12); color:var(--accent); border:1px solid rgba(var(--accent-rgb),0.2); }
.badge-off { background:rgba(255,77,94,0.1); color:var(--danger); border:1px solid rgba(255,77,94,0.2); }
.badge-warn { background:rgba(255,176,32,0.1); color:var(--warning); border:1px solid rgba(255,176,32,0.2); }
.badge-idle { background:rgba(255,255,255,0.05); color:var(--text-3); border:1px solid rgba(255,255,255,0.08); }
.badge-info { background:rgba(91,168,255,0.1); color:var(--info); border:1px solid rgba(91,168,255,0.2); }

/* ── Log Entry ──────────────────────────────────── */
.log-entry { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.03); font-family:'JetBrains Mono',monospace; font-size:0.78rem; line-height:1.5; }
.log-entry:last-child { border-bottom:none; }
.log-time { color:var(--text-3); white-space:nowrap; flex-shrink:0; }
.log-event { font-weight:600; flex-shrink:0; min-width:65px; }
.log-detail { color:var(--text-2); word-break:break-all; }

/* ── Modal ──────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(10px); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal { width:90%; max-width:400px; padding:22px; }
.modal h3 { font-family:'Orbitron',sans-serif; font-size:0.82rem; font-weight:600; color:var(--accent); margin-bottom:18px; letter-spacing:2px; text-shadow:0 0 10px var(--accent-glow); }
.modal .form-group { margin-bottom:14px; }
.modal .form-group label { display:block; font-size:0.78rem; color:var(--text-2); margin-bottom:5px; letter-spacing:1px; text-transform:uppercase; font-weight:500; }
.modal .form-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }

/* ── Toast ──────────────────────────────────────── */
.toast-container { position:fixed; top:16px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 18px; font-size:0.85rem; font-weight:500; animation:slideIn 0.25s ease; min-width:200px; clip-path:var(--clip-sm); backdrop-filter:blur(10px); }
.toast-success { background:rgba(var(--accent-rgb),0.12); border:1px solid rgba(var(--accent-rgb),0.3); color:var(--accent); }
.toast-error { background:rgba(255,77,94,0.12); border:1px solid rgba(255,77,94,0.3); color:var(--danger); }
@keyframes slideIn { from{transform:translateX(60px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Scroll body ────────────────────────────────── */
.scroll-body { max-height:280px; overflow-y:auto; }

/* ── Empty state ────────────────────────────────── */
.empty { text-align:center; padding:28px 16px; color:var(--text-3); font-size:0.9rem; }
.empty-icon { font-size:1.3rem; margin-bottom:6px; opacity:0.2; }

/* ── Coming Soon ────────────────────────────────── */
.coming-soon {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:350px; text-align:center; gap:14px;
}
.coming-soon .cs-icon { font-size:2.5rem; opacity:0.1; filter:drop-shadow(0 0 20px rgba(var(--accent-rgb),0.3)); }
.coming-soon .cs-title { font-family:'Orbitron',sans-serif; font-size:1rem; font-weight:600; color:var(--text-2); letter-spacing:2px; }
.coming-soon .cs-sub { font-size:0.82rem; color:var(--text-3); max-width:320px; line-height:1.6; }
.coming-soon .cs-badge {
  padding:5px 16px; font-family:'Orbitron',sans-serif; font-size:0.55rem; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; clip-path:var(--clip-sm);
  background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.15); color:var(--accent);
}

/* ── Range Slider ───────────────────────────────── */
input[type="range"] { -webkit-appearance:none; width:100%; height:2px; background:rgba(var(--accent-rgb),0.12); border-radius:1px; outline:none; margin-top:6px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; background:var(--accent); border-radius:2px; cursor:pointer; box-shadow:0 0 6px var(--accent-glow); }

/* ── Spinner ────────────────────────────────────── */
.spinner { width:16px; height:16px; border:2px solid rgba(var(--accent-rgb),0.15); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Utility ────────────────────────────────────── */
.hidden { display:none !important; }
.text-accent { color:var(--accent); }
.text-danger { color:var(--danger); }
.text-mono { font-family:'JetBrains Mono',monospace; }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }

/* ═══════════════════════════════════════════════════
   LAYOUT — Sidebar + Main
   ═══════════════════════════════════════════════════ */

.app { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: rgba(2,6,4,0.95);
  border-right: 1px solid rgba(var(--accent-rgb),0.08);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  backdrop-filter:blur(16px);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.sidebar-brand {
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.06);
  display:flex; align-items:center; gap:10px;
}
.sidebar-brand .mark {
  width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.2);
  clip-path:var(--clip-sm);
  font-family:'Orbitron',sans-serif; font-weight:800; font-size:0.75rem; color:var(--accent);
  text-shadow:0 0 8px var(--accent-glow); flex-shrink:0;
}
.sidebar-brand .name { font-family:'Orbitron',sans-serif; font-size:0.68rem; font-weight:700; letter-spacing:3px; color:var(--accent); text-shadow:0 0 12px rgba(var(--accent-rgb),0.3); }
.sidebar-brand .sub { font-size:0.5rem; color:var(--text-3); letter-spacing:1.5px; }

.sidebar-nav { flex:1; padding:8px 6px; overflow-y:auto; }

.nav-section { margin-bottom:4px; }
.nav-section-label { font-family:'Orbitron',sans-serif; font-size:0.56rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); padding:10px 12px 4px; }

.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; transition:all var(--transition);
  color:var(--text-2); font-size:0.9rem; font-weight:500;
  border-left:2px solid transparent; margin-bottom:1px;
}
.nav-item:hover { background:rgba(var(--accent-rgb),0.04); color:var(--text); }
.nav-item.active {
  background:rgba(var(--accent-rgb),0.06);
  color:var(--accent);
  border-left-color:var(--accent);
  text-shadow:0 0 6px rgba(var(--accent-rgb),0.2);
}
.nav-item .nav-icon { width:16px; text-align:center; font-size:0.85rem; flex-shrink:0; opacity:0.6; }
.nav-item.active .nav-icon { opacity:1; }
.nav-item .nav-badge {
  margin-left:auto; font-family:'Orbitron',sans-serif; font-size:0.45rem; padding:1px 6px;
  background:rgba(var(--accent-rgb),0.08); color:var(--accent); font-weight:600; letter-spacing:1px;
  clip-path:var(--clip-sm);
}
.nav-item .nav-badge.soon { background:rgba(255,255,255,0.03); color:var(--text-3); }

.sidebar-footer {
  padding:10px 14px; border-top:1px solid rgba(var(--accent-rgb),0.06);
  display:flex; align-items:center; gap:10px;
}
.sidebar-footer .user-avatar {
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.15);
  clip-path:var(--clip-sm);
  font-weight:700; font-size:0.65rem; color:var(--accent); flex-shrink:0;
}
.sidebar-footer .user-name { font-size:0.78rem; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-footer .user-role { font-size:0.55rem; color:var(--text-3); letter-spacing:1px; text-transform:uppercase; }

/* ── Main Content ────────────────────────────────── */
.main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-height:100vh; }

.topbar {
  height:var(--topbar-h); padding:0 20px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.06);
  background:rgba(0,0,0,0.7); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:100;
}
.topbar-hamburger { display:none; background:none; border:none; color:var(--accent); font-size:1.2rem; cursor:pointer; padding:4px; }
.topbar-title { font-family:'Orbitron',sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:2px; flex:1; color:var(--text-2); }
.topbar-clock { font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--accent); text-shadow:0 0 6px rgba(var(--accent-rgb),0.3); }
.topbar-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 4px var(--accent-glow); animation:dotPulse 2.5s infinite; }

.content { flex:1; padding:20px; overflow-y:auto; }
.section { display:none; }
.section.active { display:block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── Grid ────────────────────────────────────────── */
.grid { display:grid; gap:16px; grid-template-columns:1fr; }
.grid-full { grid-column:1/-1; }

/* ── Health Bar ──────────────────────────────────── */
.health-bar { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.health-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:rgba(var(--accent-rgb),0.02);
  border:1px solid rgba(var(--accent-rgb),0.06);
  clip-path:var(--clip-sm);
}
.health-item .h-label { font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-3); font-family:'Orbitron',sans-serif; }
.health-item .h-value { font-family:'JetBrains Mono',monospace; font-size:0.82rem; }

/* ── Device Row ──────────────────────────────────── */
.device-row { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.05); }
.device-row:last-child { border-bottom:none; }
.device-name { font-size:0.95rem; font-weight:600; }
.device-sub { font-size:0.75rem; color:var(--text-3); font-family:'JetBrains Mono',monospace; }

/* ── Sensor Grid ─────────────────────────────────── */
.sensor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sensor-card {
  text-align:center; padding:16px 10px;
  background:rgba(var(--accent-rgb),0.02); border:1px solid rgba(var(--accent-rgb),0.06);
  clip-path:var(--clip-sm);
}
.sensor-val { font-family:'Orbitron',sans-serif; font-size:1.5rem; font-weight:700; color:var(--accent-bright); text-shadow:0 0 10px rgba(var(--accent-rgb),0.3); }
.sensor-label { font-family:'Orbitron',sans-serif; font-size:0.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); margin-top:4px; }
.sensor-unit { font-size:0.68rem; color:var(--text-3); font-family:'JetBrains Mono',monospace; }

/* ── Site Row ────────────────────────────────────── */
.site-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.04); }
.site-row:last-child { border-bottom:none; }
.site-info { flex:1; min-width:0; }
.site-name { font-size:0.9rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-url { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-meta { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.site-ms { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--text-3); }

/* ── Server Item ─────────────────────────────────── */
.srv-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(var(--accent-rgb),0.02); border:1px solid rgba(var(--accent-rgb),0.06);
  clip-path:var(--clip-sm); margin-bottom:8px;
}
.srv-item:last-child { margin-bottom:0; }
.srv-info { flex:1; min-width:0; }
.srv-name { font-size:0.95rem; font-weight:600; }
.srv-ip { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-3); }
.srv-count { text-align:center; flex-shrink:0; }
.srv-count .num { font-family:'Orbitron',sans-serif; font-size:1.2rem; font-weight:700; color:var(--accent-bright); text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.srv-count .lbl { font-family:'Orbitron',sans-serif; font-size:0.45rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-3); }

/* ── Enquiry ─────────────────────────────────────── */
.enq-item { padding:10px 0; border-bottom:1px solid rgba(var(--accent-rgb),0.04); }
.enq-item:last-child { border-bottom:none; }
.enq-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.enq-name { font-weight:600; font-size:0.9rem; }
.enq-email { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--accent); }
.enq-msg { font-size:0.85rem; color:var(--text-2); line-height:1.5; }

/* ── Mobile ──────────────────────────────────────── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:190; }
.sidebar-overlay.show { display:block; }

@media (min-width:640px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .health-bar { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) {
  .grid { grid-template-columns:repeat(3,1fr); }
  .grid-2 { grid-column:span 2; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .topbar-hamburger { display:block; }
  .content { padding:14px; }
}