:root{--bg-primary:#0f1117;--bg-secondary:#1a1d27;--bg-card:#22263a;--bg-card-hover:#2a2f45;--bg-surface:#2d3248;--text-primary:#e8eaed;--text-secondary:#9aa0b0;--text-muted:#6b7280;--accent-blue:#3b82f6;--accent-green:#10b981;--accent-yellow:#f59e0b;--accent-purple:#8b5cf6;--accent-red:#ef4444;--accent-pink:#ec4899;--status-ok:#10b981;--status-degraded:#f59e0b;--status-stopped:#ef4444;--status-unknown:#6b7280;--border-color:#2d3248;--border-radius:12px;--border-radius-sm:8px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;font-family:var(--font-sans);--header-height:56px;--nav-height:64px}[data-theme=light]{--bg-primary:#f5f7fa;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f0f2f5;--bg-surface:#e5e7eb;--text-primary:#1a1d27;--text-secondary:#4b5563;--text-muted:#9ca3af;--border-color:#d1d5db}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-primary);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-size:16px;line-height:1.5}#root{flex-direction:column;height:100%;display:flex}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.card{background:var(--bg-card);border-radius:var(--border-radius);padding:var(--spacing-md);border:1px solid var(--border-color)}.card-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--spacing-sm);font-size:.75rem;font-weight:600}.badge{border-radius:999px;align-items:center;padding:2px 8px;font-size:.7rem;font-weight:500;display:inline-flex}.badge-ok{background:color-mix(in srgb, var(--status-ok) 20%, transparent);color:var(--status-ok)}.badge-degraded{background:color-mix(in srgb, var(--status-degraded) 20%, transparent);color:var(--status-degraded)}.badge-stopped{background:color-mix(in srgb, var(--status-stopped) 20%, transparent);color:var(--status-stopped)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.skeleton{background:linear-gradient(90deg, var(--bg-card) 25%, var(--bg-surface) 50%, var(--bg-card) 75%);border-radius:var(--border-radius-sm);background-size:200% 100%;animation:2s ease-in-out infinite pulse}