:root{--bg: #0a0e17;--bg-secondary: #111827;--card: #1f2937;--card-strong: #374151;--border: #374151;--text: #e9f2ff;--text-secondary: #9ca3af;--muted: #6b7280;--accent: #06b6d4;--accent-hover: #22d3ee;--success: #22c55e;--warn: #f59e0b;--error: #ef4444;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius: 8px;--radius-lg: 12px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--font-medium: 500;--font-semibold: 600;--font-bold: 700}[data-theme=light]{--bg: #f9fafb;--bg-secondary: #ffffff;--card: #ffffff;--card-strong: #f3f4f6;--border: #e5e7eb;--text: #111827;--text-secondary: #4b5563;--muted: #9ca3af}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.layout{max-width:1400px;margin:0 auto;padding:var(--space-6);min-height:100vh}header{margin-bottom:var(--space-8)}.header-content{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}.header-title{display:flex;align-items:center;gap:var(--space-4)}.header-title h1{font-size:var(--text-3xl);font-weight:var(--font-bold);margin:0;display:flex;align-items:center;gap:var(--space-3)}.header-title p{color:var(--muted);margin-top:var(--space-1)}.header-controls{display:flex;align-items:center;gap:var(--space-4)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-6)}.dashboard-grid.full-width{grid-template-columns:1fr}.widget-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);transition:border-color .2s}.widget-card:hover{border-color:var(--accent)}.widget-card h3{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2)}.widget-card .value{font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--text)}.widget-card .value.success{color:var(--success)}.widget-card .value.warn{color:var(--warn)}.widget-card .value.error{color:var(--error)}.widget-card .subtext{font-size:var(--text-sm);color:var(--muted);margin-top:var(--space-2)}.gauge-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.gauge{width:160px;height:80px;position:relative}.gauge-bg{fill:none;stroke:var(--card-strong);stroke-width:12}.gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .5s ease,stroke .3s ease}.gauge-value{font-size:var(--text-2xl);font-weight:var(--font-bold)}.stats-row{display:flex;gap:var(--space-6);flex-wrap:wrap}.stat-item{flex:1;min-width:100px}.stat-item .label{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.stat-item .value{font-size:var(--text-xl);font-weight:var(--font-semibold);margin-top:var(--space-1)}.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}.status-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--bg-secondary);border-radius:var(--radius)}.status-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0}.status-indicator.healthy{background:var(--success)}.status-indicator.degraded{background:var(--warn)}.status-indicator.down{background:var(--error)}.status-indicator.unknown{background:var(--muted)}.status-item .name{font-size:var(--text-sm);font-weight:var(--font-medium);flex:1}.status-item .latency{font-size:var(--text-xs);color:var(--muted)}.chart-container{width:100%;height:200px;margin-top:var(--space-4)}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--space-4)}.spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:var(--text-sm)}@media (max-width: 768px){.layout{padding:var(--space-4)}.header-content{flex-direction:column}.header-controls{width:100%;justify-content:flex-end}.dashboard-grid{grid-template-columns:1fr}}.admin-badge{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--error);color:#fff;font-size:var(--text-xs);font-weight:var(--font-semibold);padding:var(--space-1) var(--space-2);border-radius:var(--radius);text-transform:uppercase}.error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:var(--space-4);text-align:center}.error-state h2{color:var(--error)}.error-state p{color:var(--muted);max-width:400px}.refresh-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--card-strong);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:var(--text-sm);cursor:pointer;transition:all .2s}.refresh-btn:hover{background:var(--accent);border-color:var(--accent)}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.refresh-btn.spinning svg{animation:spin 1s linear infinite}.last-updated{font-size:var(--text-xs);color:var(--muted);margin-left:auto}