/* ============================================================
   TOKENS — DARK (default)
   ============================================================ */
:root {
  --color-primary: #8B5CF6;
  --color-primary-light: #A78BFA;
  --color-primary-dark: #7C3AED;
  --color-primary-50: rgba(139,92,246,0.12);
  --color-primary-glow: rgba(139,92,246,0.35);
  --color-brand: #E61C24;
  --color-success: #10B981;
  --color-success-light: rgba(16,185,129,0.15);
  --color-warning: #F59E0B;
  --color-warning-light: rgba(245,158,11,0.15);
  --color-error: #EF4444;
  --color-error-light: rgba(239,68,68,0.15);
  --color-info: #3B82F6;
  --color-info-light: rgba(59,130,246,0.15);
  --color-bg: #0B0B14;
  --color-surface: rgba(20,20,32,0.75);
  --color-surface-solid: #14141F;
  --color-surface-2: rgba(28,28,42,0.7);
  --color-text: #B8B8D0;
  --color-text-heading: #F0F0FF;
  --color-muted: #6B6B8A;
  --color-border: rgba(255,255,255,0.07);
  --color-border-glow: rgba(139,92,246,0.3);
  --glass-bg: rgba(17,17,27,0.65);
  --glass-bg-heavy: rgba(14,14,22,0.88);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: blur(20px);
  --glass-blur-sm: blur(12px);
  --font: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px;
  --sp6:24px; --sp8:32px; --sp10:40px; --sp12:48px; --sp16:64px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:9999px;
  --sh-sm: 0 2px 8px rgba(0,0,0,0.4);
  --sh-md: 0 4px 16px rgba(0,0,0,0.45);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.5);
  --sh-glow: 0 0 24px rgba(139,92,246,0.25);
  --sh-glow-sm: 0 0 12px rgba(139,92,246,0.2);
  --t-fast: 150ms ease-out;
  --t-normal: 250ms ease-out;
  --sidebar-w: 260px;
  --sidebar-collapsed: 64px;
  --topbar-h: 64px;
}

/* Light mode */
.light {
  --color-primary: #7C3AED;
  --color-primary-light: #8B5CF6;
  --color-primary-50: rgba(124,58,237,0.08);
  --color-primary-glow: rgba(124,58,237,0.2);
  --color-bg: #F0F0F8;
  --color-surface: rgba(255,255,255,0.85);
  --color-surface-solid: #FFFFFF;
  --color-surface-2: rgba(245,245,252,0.8);
  --color-text: #333350;
  --color-text-heading: #1A1A2E;
  --color-muted: #6B6B8A;
  --color-border: rgba(0,0,0,0.08);
  --glass-bg: rgba(255,255,255,0.75);
  --glass-bg-heavy: rgba(255,255,255,0.92);
  --glass-border: rgba(0,0,0,0.08);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sh-md: 0 4px 16px rgba(0,0,0,0.1);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.12);
  --color-success: #059669;
  --color-success-light: rgba(5,150,105,0.1);
  --color-warning: #D97706;
  --color-warning-light: rgba(217,119,6,0.1);
  --color-error: #DC2626;
  --color-error-light: rgba(220,38,38,0.1);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes aurora-1 { 0%,100%{transform:translate(0,0) scale(1) rotate(0deg);opacity:.6} 33%{transform:translate(40px,-30px) scale(1.15) rotate(5deg);opacity:.8} 66%{transform:translate(-20px,20px) scale(.95) rotate(-3deg);opacity:.5} }
@keyframes aurora-2 { 0%,100%{transform:translate(0,0) scale(1.1) rotate(0deg);opacity:.5} 33%{transform:translate(-50px,30px) scale(1) rotate(-6deg);opacity:.7} 66%{transform:translate(30px,-40px) scale(1.2) rotate(4deg);opacity:.4} }
@keyframes aurora-3 { 0%,100%{transform:translate(0,0) scale(.95) rotate(0deg);opacity:.4} 50%{transform:translate(20px,40px) scale(1.1) rotate(8deg);opacity:.6} }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
@keyframes page-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slide-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
@keyframes spin { to{transform:rotate(360deg)} }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:var(--font); font-size:16px; line-height:1.6; color:var(--color-text); background:var(--color-bg); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { font-family:var(--font); cursor:pointer; border:none; background:none; }
input { font-family:var(--font); }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:99px; }
.light ::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.15); }

/* ============================================================
   AURORA
   ============================================================ */
.aurora { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora-blob { position:absolute; border-radius:50%; filter:blur(80px); }
.aurora-blob-1 { top:-20%; left:-10%; width:55vw; height:55vw; background:radial-gradient(circle,#7C3AED 0%,#5B21B6 40%,transparent 70%); opacity:.65; animation:aurora-1 18s ease-in-out infinite; }
.aurora-blob-2 { top:-15%; right:-15%; width:50vw; height:50vw; background:radial-gradient(circle,#2563EB 0%,#1D4ED8 40%,transparent 70%); opacity:.45; animation:aurora-2 22s ease-in-out infinite; filter:blur(90px); }
.aurora-blob-3 { bottom:-25%; left:30%; width:45vw; height:45vw; background:radial-gradient(circle,#0D9488 0%,#0F766E 40%,transparent 70%); opacity:.33; animation:aurora-3 26s ease-in-out infinite; filter:blur(100px); }
.aurora-overlay { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 0%,var(--color-bg) 75%); }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app { display:flex; height:100vh; overflow:hidden; position:relative; z-index:1; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width:var(--sidebar-w);
  background:rgba(8,8,16,0.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-right:1px solid rgba(255,255,255,0.06);
  display:flex; flex-direction:column;
  flex-shrink:0; overflow:hidden;
  z-index:100;
  transition:width 400ms cubic-bezier(0.34,1.2,0.64,1);
  position:relative;
}
.sidebar.collapsed { width:var(--sidebar-collapsed); }
.sidebar-glow-line { position:absolute; right:0; top:15%; bottom:15%; width:1px; background:linear-gradient(to bottom,transparent,rgba(139,92,246,0.4),transparent); pointer-events:none; }
.sidebar-header { height:var(--topbar-h); display:flex; align-items:center; padding:0 var(--sp5); border-bottom:1px solid rgba(255,255,255,0.05); gap:var(--sp3); overflow:hidden; flex-shrink:0; }
.sidebar-logo-icon { width:30px; height:30px; border-radius:var(--r-md); background:linear-gradient(135deg,#E61C24 0%,#8B5CF6 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 2px 12px rgba(139,92,246,0.4); }
.sidebar-logo-text { font-size:15px; font-weight:900; color:#fff; white-space:nowrap; letter-spacing:-0.02em; }
.sidebar-logo-text span { color:#A78BFA; }
.sidebar.collapsed .sidebar-logo-text { display:none; }
.sidebar-nav { flex:1; padding:var(--sp4) var(--sp3); display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:var(--sp3); padding:10px var(--sp4); border-radius:var(--r-md); color:rgba(255,255,255,0.4); font-size:13px; font-weight:500; transition:all var(--t-fast); border:1px solid transparent; white-space:nowrap; overflow:hidden; cursor:pointer; width:100%; text-align:left; }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px; }
.sidebar.collapsed .nav-item span:last-child { display:none; }
.nav-item:hover { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); }
.nav-item.active { background:linear-gradient(135deg,rgba(139,92,246,0.2) 0%,rgba(139,92,246,0.1) 100%); color:#fff; border-color:rgba(139,92,246,0.3); font-weight:700; box-shadow:0 0 12px rgba(139,92,246,0.15); }
.nav-logout { color:rgba(255,255,255,0.3) !important; flex:1; }
.nav-logout:hover { background:rgba(239,68,68,0.1) !important; color:rgba(239,68,68,0.8) !important; border-color:rgba(239,68,68,0.15) !important; }
.sidebar-bottom { padding:var(--sp3); border-top:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; gap:4px; }
.sidebar.collapsed .sidebar-bottom { flex-direction:column; }
.collapse-btn { padding:8px; border-radius:var(--r-md); color:rgba(255,255,255,0.25); transition:all var(--t-fast); display:flex; align-items:center; justify-content:center; }
.collapse-btn:hover { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.6); }

/* ============================================================
   MAIN + TOPBAR
   ============================================================ */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; position:relative; z-index:1; }
.topbar { height:var(--topbar-h); background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); border-bottom:1px solid var(--color-border); display:flex; align-items:center; padding:0 var(--sp6); gap:var(--sp3); flex-shrink:0; position:sticky; top:0; z-index:50; }
.topbar-title-wrap { flex:1; display:flex; align-items:center; gap:var(--sp3); }
.topbar-icon { font-size:16px; color:var(--color-primary); opacity:.6; }
.topbar-title { font-size:15px; font-weight:700; color:var(--color-text-heading); letter-spacing:-0.01em; }
.topbar-actions { display:flex; align-items:center; gap:var(--sp3); }
.live-badge { display:flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-full); background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2); font-size:11px; font-weight:700; color:var(--color-success); }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--color-success); animation:pulse-dot 2s ease-in-out infinite; display:block; }
.mock-badge { padding:3px 8px; border-radius:var(--r-full); background:var(--color-primary-50); color:var(--color-primary-light); font-size:11px; font-weight:700; border:1px solid rgba(139,92,246,0.2); }
.icon-btn { padding:var(--sp2); border-radius:var(--r-md); color:var(--color-muted); display:flex; align-items:center; transition:all var(--t-fast); border:1px solid transparent; }
.icon-btn:hover { background:var(--color-primary-50); color:var(--color-primary-light); border-color:var(--color-border-glow); }
.expand-btn { padding:var(--sp2); border-radius:var(--r-md); color:var(--color-muted); display:flex; align-items:center; transition:all var(--t-fast); border:1px solid transparent; }
.expand-btn:hover { background:var(--color-primary-50); color:var(--color-primary-light); }

/* ============================================================
   SLA BAR
   ============================================================ */
.sla-bar { padding:var(--sp2) var(--sp6); border-bottom:1px solid var(--color-border); background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); display:flex; align-items:center; gap:var(--sp3); flex-wrap:wrap; flex-shrink:0; min-height:36px; }
.sla-label { font-size:10px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.1em; flex-shrink:0; }
.sla-pill { display:flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-full); font-size:11px; font-weight:700; cursor:default; }
.sla-pill-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.sla-time { opacity:.65; font-size:10px; }
.sla-on-track { background:rgba(16,185,129,0.1); color:#34D399; border:1px solid rgba(16,185,129,0.2); }
.sla-at-risk   { background:rgba(245,158,11,0.1); color:#FCD34D; border:1px solid rgba(245,158,11,0.25); }
.sla-breached  { background:rgba(239,68,68,0.1);  color:#FCA5A5; border:1px solid rgba(239,68,68,0.25); }

/* ============================================================
   CONTENT + PAGES
   ============================================================ */
.content { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.page { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.page-enter { animation:page-in .25s ease-out forwards; }

/* ============================================================
   PIPELINE
   ============================================================ */
.page-toolbar { display:flex; align-items:center; justify-content:space-between; padding:var(--sp5) var(--sp6) var(--sp4); flex-shrink:0; flex-wrap:wrap; gap:var(--sp3); }
.toolbar-right { display:flex; align-items:center; gap:var(--sp3); }
.updated-at { font-size:12px; color:var(--color-muted); }
.pipeline-layout { flex:1; display:flex; overflow:hidden; min-height:0; }
.pipeline-grid { flex:1; overflow-y:auto; padding:0 var(--sp6) var(--sp6); display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp3); align-content:start; }

/* Pipeline step card */
.step-card { width:100%; text-align:left; background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--sp4); cursor:pointer; transition:all var(--t-fast); }
.step-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:rgba(139,92,246,0.25); }
.step-card.selected { background:linear-gradient(135deg,rgba(139,92,246,0.15) 0%,rgba(139,92,246,0.08) 100%); border-color:rgba(139,92,246,0.45); box-shadow:0 0 0 3px rgba(139,92,246,0.15),var(--sh-glow-sm); }
.step-card.status-error { border-color:rgba(239,68,68,0.4); box-shadow:0 0 16px rgba(239,68,68,0.12); }
.step-card.status-warning { border-color:rgba(245,158,11,0.35); box-shadow:0 0 16px rgba(245,158,11,0.1); }
.step-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp3); }
.step-num { font-size:10px; font-weight:700; color:var(--color-muted); letter-spacing:.08em; font-family:monospace; }
.step-name { font-size:13px; font-weight:700; color:var(--color-text-heading); margin-bottom:var(--sp2); line-height:1.3; letter-spacing:-0.01em; }
.step-error-preview { font-size:11px; margin-top:var(--sp2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.step-last-run { font-size:11px; color:var(--color-muted); margin-top:var(--sp2); }

/* Drilldown panel */
.drilldown { width:380px; flex-shrink:0; background:var(--glass-bg-heavy); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border-left:1px solid var(--color-border); display:flex; flex-direction:column; overflow:hidden; animation:fade-in .2s ease-out; }
.drilldown-header { padding:var(--sp5) var(--sp6); border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; gap:var(--sp3); flex-shrink:0; }
.drilldown-header-info { flex:1; }
.drilldown-step-num { font-size:11px; font-weight:700; color:var(--color-muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:4px; }
.drilldown-name { font-size:15px; font-weight:700; color:var(--color-text-heading); margin-bottom:4px; }
.drilldown-desc { font-size:13px; color:var(--color-muted); }
.drilldown-body { flex:1; overflow-y:auto; padding:var(--sp5) var(--sp6); }
.drilldown-meta { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp3); margin-bottom:var(--sp5); }
.drilldown-meta-item { padding:var(--sp3); border-radius:var(--r-md); background:rgba(255,255,255,0.03); border:1px solid var(--color-border); }
.drilldown-meta-item.full { grid-column:1/-1; }
.meta-label { font-size:11px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; display:flex; align-items:center; gap:4px; }
.meta-value { font-size:13px; font-weight:600; color:var(--color-text-heading); }
.error-box { padding:var(--sp3) var(--sp4); border-radius:var(--r-md); background:var(--color-error-light); border:1px solid rgba(239,68,68,.2); margin-bottom:var(--sp5); font-size:13px; color:#FCA5A5; font-family:monospace; font-weight:600; }
.section-title { font-size:12px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp3); }
.cause-card { border:1px solid var(--color-border); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp3); }
.cause-head { padding:var(--sp3) var(--sp4); background:var(--color-warning-light); font-size:13px; font-weight:600; color:#FCD34D; }
.cause-body { padding:var(--sp3) var(--sp4); font-size:12px; color:var(--color-text); line-height:1.6; }
.healthy-box { padding:var(--sp4); border-radius:var(--r-md); background:var(--color-success-light); border:1px solid rgba(16,185,129,.2); text-align:center; font-size:13px; font-weight:600; color:#34D399; }
.close-btn { padding:var(--sp1); border-radius:var(--r-sm); color:var(--color-muted); display:flex; flex-shrink:0; transition:background var(--t-fast); }
.close-btn:hover { background:rgba(255,255,255,0.06); }

/* Pipeline summary chips */
.summary-chips { display:flex; align-items:center; gap:var(--sp3); flex-wrap:wrap; }

/* ============================================================
   SEARCH
   ============================================================ */
.search-wrap { padding:var(--sp6); max-width:860px; margin:0 auto; width:100%; }
.search-bar-wrap { display:flex; align-items:center; gap:var(--sp3); padding:var(--sp3) var(--sp4); border-radius:var(--r-xl); border:1px solid var(--color-border); background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); margin-bottom:var(--sp5); box-shadow:var(--sh-sm); }
.search-icon { color:var(--color-muted); flex-shrink:0; }
.search-input { flex:1; border:none; outline:none; font-size:15px; color:var(--color-text-heading); background:transparent; }
.search-input::placeholder { color:var(--color-muted); }
.search-clear { color:var(--color-muted); display:flex; align-items:center; padding:2px; }
.search-hints { display:flex; gap:var(--sp4); flex-wrap:wrap; }
.hint-pill { display:flex; align-items:center; gap:var(--sp2); padding:var(--sp3) var(--sp4); border-radius:var(--r-md); border:1px solid var(--color-border); background:var(--glass-bg); font-size:13px; color:var(--color-muted); }
.hint-icon { font-size:14px; }

/* Search results */
.result-card { background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); border:1px solid var(--color-border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.result-header { padding:var(--sp5) var(--sp6); border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; gap:var(--sp4); }
.result-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--color-info-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--color-info); }
.result-title { font-size:16px; font-weight:700; color:var(--color-text-heading); margin-bottom:4px; }
.result-sub { font-size:13px; color:var(--color-muted); }
.result-price { text-align:right; flex-shrink:0; }
.result-price-val { font-size:18px; font-weight:700; color:var(--color-text-heading); }
.result-price-sub { font-size:11px; color:var(--color-muted); }
.result-meta { padding:var(--sp3) var(--sp6); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--color-border); }
.result-body { padding:var(--sp5) var(--sp6); }
.field-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:var(--sp4); padding:var(--sp4); border-radius:var(--r-md); background:rgba(255,255,255,0.02); border:1px solid var(--color-border); }
.field-label { font-size:11px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.field-value { font-size:13px; font-weight:600; color:var(--color-text-heading); }
.field-value.mono { font-family:monospace; }
.section-head { display:flex; align-items:center; gap:var(--sp2); margin-bottom:var(--sp3); margin-top:var(--sp5); font-size:12px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.06em; }
.order-line { border:1px solid var(--color-border); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp3); }
.order-line-header { padding:var(--sp3) var(--sp4); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; gap:var(--sp3); }
.order-line-title { font-size:13px; font-weight:700; color:var(--color-text-heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.order-line-isbn { font-size:11px; font-family:monospace; color:var(--color-muted); margin-top:2px; }
.order-line-body { padding:var(--sp3) var(--sp4); display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:var(--sp3); }
.no-result { padding:var(--sp12); text-align:center; color:var(--color-muted); }
.no-result svg { display:block; margin:0 auto var(--sp3); opacity:.4; }

/* ============================================================
   HEALTH
   ============================================================ */
.health-grid { flex:1; overflow-y:auto; padding:var(--sp6); display:grid; grid-template-columns:repeat(auto-fit,minmax(480px,1fr)); gap:var(--sp8); align-content:start; }
.health-section-title { font-size:12px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp3); }
.health-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp3); }
.health-card { background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); border:1px solid var(--color-border); border-radius:var(--r-lg); padding:var(--sp4); box-shadow:var(--sh-sm); }
.health-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp3); }
.health-card-name { font-size:13px; font-weight:700; color:var(--color-text-heading); }
.health-stats { display:flex; gap:var(--sp4); flex-wrap:wrap; }
.health-stat-label { font-size:11px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em; }
.health-stat-value { font-size:12px; font-weight:600; color:var(--color-text); }
.health-error { margin-top:var(--sp3); padding:var(--sp2) var(--sp3); border-radius:var(--r-md); background:var(--color-error-light); font-size:11px; color:#FCA5A5; font-family:monospace; }
.feeds-table-wrap { background:var(--glass-bg); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); border:1px solid var(--color-border); border-radius:var(--r-lg); overflow:hidden; }
.feeds-table { width:100%; border-collapse:collapse; }
.feeds-table th { padding:var(--sp3) var(--sp4); text-align:left; font-size:11px; font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.feeds-table td { padding:var(--sp3) var(--sp4); font-size:12px; color:var(--color-text); border-bottom:1px solid var(--color-border); }
.feeds-table tr:last-child td { border-bottom:none; }
.feeds-table tr.stuck { background:var(--color-error-light); }
.feeds-table td.mono { font-family:monospace; }
.td-right { text-align:right; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-full); font-size:12px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.badge-sm { padding:2px 8px; font-size:11px; }
.badge-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.badge-dot-sm { width:5px; height:5px; }

.badge-healthy  { background:rgba(16,185,129,0.12);  color:#34D399; border:1px solid rgba(16,185,129,0.25); }
.badge-warning  { background:rgba(245,158,11,0.12);  color:#FCD34D; border:1px solid rgba(245,158,11,0.25); }
.badge-error    { background:rgba(239,68,68,0.12);   color:#FCA5A5; border:1px solid rgba(239,68,68,0.25); }
.badge-running  { background:rgba(59,130,246,0.12);  color:#93C5FD; border:1px solid rgba(59,130,246,0.25); }
.badge-idle     { background:rgba(107,107,138,0.12); color:#9090B0; border:1px solid rgba(255,255,255,0.06); }
.badge-degraded { background:rgba(245,158,11,0.12);  color:#FCD34D; border:1px solid rgba(245,158,11,0.25); }
.badge-down     { background:rgba(239,68,68,0.12);   color:#FCA5A5; border:1px solid rgba(239,68,68,0.25); }
.badge-info     { background:rgba(59,130,246,0.12);  color:#93C5FD; border:1px solid rgba(59,130,246,0.25); }
.badge-primary  { background:var(--color-primary-50); color:var(--color-primary-light); border:1px solid rgba(139,92,246,0.25); }
.badge-muted    { background:rgba(255,255,255,0.05); color:var(--color-muted); border:1px solid var(--color-border); }

.dot-pulse { animation:pulse-dot 2s ease-in-out infinite; }
.dot-healthy  { background:#10B981; box-shadow:0 0 6px rgba(16,185,129,0.4); }
.dot-warning  { background:#F59E0B; box-shadow:0 0 6px rgba(245,158,11,0.4); }
.dot-error    { background:#EF4444; box-shadow:0 0 6px rgba(239,68,68,0.4); }
.dot-running  { background:#3B82F6; box-shadow:0 0 6px rgba(59,130,246,0.4); }
.dot-idle     { background:#6B6B8A; }
.dot-degraded { background:#F59E0B; box-shadow:0 0 6px rgba(245,158,11,0.4); }
.dot-down     { background:#EF4444; box-shadow:0 0 6px rgba(239,68,68,0.4); }

/* Status badges for feeds */
.feed-done        { background:rgba(16,185,129,0.12);  color:#34D399; }
.feed-in_progress { background:rgba(59,130,246,0.12);  color:#93C5FD; }
.feed-cancelled   { background:rgba(107,107,138,0.12); color:#9090B0; }
.feed-fatal       { background:rgba(239,68,68,0.12);   color:#FCA5A5; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary { display:inline-flex; align-items:center; gap:var(--sp2); padding:10px var(--sp5); border-radius:var(--r-md); background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%); color:#fff; font-size:14px; font-weight:700; border:none; cursor:pointer; transition:transform var(--t-fast),box-shadow var(--t-fast); box-shadow:0 4px 16px rgba(139,92,246,0.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(139,92,246,0.45); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-full { width:100%; justify-content:center; }
.btn-outline { display:inline-flex; align-items:center; gap:var(--sp2); padding:var(--sp2) var(--sp3); border-radius:var(--r-md); border:1px solid var(--color-border); background:var(--glass-bg); color:var(--color-muted); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--t-fast); }
.btn-outline:hover { border-color:var(--color-border-glow); color:var(--color-primary-light); background:var(--color-primary-50); }

/* ============================================================
   FORMS
   ============================================================ */
.field-group { margin-bottom:var(--sp4); }
.field-group label { display:block; font-size:13px; font-weight:600; color:var(--color-muted); margin-bottom:6px; }
.field-group input { width:100%; padding:10px 14px; border-radius:var(--r-md); border:1px solid var(--color-border); background:rgba(255,255,255,0.04); color:var(--color-text-heading); font-size:14px; outline:none; transition:border-color var(--t-fast),box-shadow var(--t-fast); }
.field-group input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-50); }
.light .field-group input { background:rgba(0,0,0,0.03); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:44px; }
.eye-btn { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--color-muted); display:flex; align-items:center; padding:2px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body { overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-wrap { position:relative; z-index:1; width:100%; max-width:420px; margin:0 var(--sp6); }
.login-card { background:var(--glass-bg-heavy); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); border-radius:var(--r-2xl); padding:var(--sp10) var(--sp8); box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,246,.15); }
.login-logo { display:flex; align-items:center; gap:var(--sp3); margin-bottom:var(--sp8); }
.login-logo-icon { width:44px; height:44px; border-radius:var(--r-lg); background:linear-gradient(135deg,#E61C24 0%,#8B5CF6 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(139,92,246,.35); flex-shrink:0; }
.login-logo-name { font-size:18px; font-weight:900; color:var(--color-text-heading); line-height:1.2; }
.login-logo-name span { color:#A78BFA; }
.login-logo-sub { font-size:11px; color:var(--color-muted); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.login-heading { font-size:22px; font-weight:700; color:var(--color-text-heading); margin-bottom:6px; }
.login-subheading { font-size:14px; color:var(--color-muted); margin-bottom:var(--sp8); }
.login-form { display:flex; flex-direction:column; }
.login-error { display:flex; align-items:flex-start; gap:var(--sp2); padding:var(--sp3) var(--sp4); border-radius:var(--r-md); background:var(--color-error-light); border:1px solid rgba(239,68,68,.25); margin-bottom:var(--sp5); font-size:13px; color:#FCA5A5; line-height:1.5; }
.login-footer { margin-top:var(--sp6); text-align:center; font-size:12px; color:var(--color-muted); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.slide-up { animation:slide-up .45s ease-out; }
.fade-in { animation:fade-in .3s ease-out; }