:root{--bg-canvas: #FFFFFF;--bg-page: #F1F5F9;--bg-subtle: #E2E8F0;--bg-muted: #CBD5E1;--bg-overlay: rgba(15,23,42,.6);--sidebar-bg: #0F172A;--sidebar-border: rgba(255,255,255,.08);--sidebar-text: #94A3B8;--sidebar-text-hover: #CBD5E1;--sidebar-text-active:#FFFFFF;--sidebar-active-bg: rgba(239,68,68,.2);--sidebar-active-bar: #ef4444;--sidebar-section: #475569;--sidebar-width: 220px;--sidebar-collapsed: 56px;--topbar-bg: #FFFFFF;--topbar-border: #CBD5E1;--topbar-height: 56px;--border-subtle: #E2E8F0;--border-default: #CBD5E1;--border-strong: #94A3B8;--border-focus: #ef4444;--border-focus-danger:#EF4444;--text-primary: #020617;--text-secondary: #1E293B;--text-muted: #475569;--text-placeholder: #94A3B8;--text-inverse: #F8FAFC;--text-link: #ef4444;--text-dim: #94A3B8;--hr-from: #4F46E5;--hr-to: #7C3AED;--hr-gradient: linear-gradient(135deg, #4F46E5, #7C3AED);--hr-bg: #EEF2FF;--hr-bg-hover: #E0E7FF;--hr-text: #3730A3;--hr-text-muted: #4F46E5;--hr-border: #A5B4FC;--hr-accent: #6366F1;--fin-from: #0EA5E9;--fin-to: #10B981;--fin-gradient: linear-gradient(135deg, #0EA5E9, #10B981);--fin-bg: #F0F9FF;--fin-bg-hover: #E0F2FE;--fin-text: #0C4A6E;--fin-text-muted: #0284C7;--fin-border: #7DD3FC;--fin-accent: #0EA5E9;--ops-from: #F97316;--ops-to: #F59E0B;--ops-gradient: linear-gradient(135deg, #F97316, #F59E0B);--ops-bg: #FFF7ED;--ops-bg-hover: #FFEDD5;--ops-text: #9A3412;--ops-text-muted: #EA580C;--ops-border: #FDBA74;--ops-accent: #F97316;--gov-from: #0F172A;--gov-to: #059669;--gov-gradient: linear-gradient(135deg, #0F172A, #059669);--gov-bg: #F8FAFC;--gov-bg-hover: #F1F5F9;--gov-text: #0F172A;--gov-text-muted: #334155;--gov-border: #CBD5E1;--gov-accent: #059669;--success: #059669;--success-bg: #F0FDF4;--success-text: #166534;--success-border: #BBF7D0;--warning: #D97706;--warning-bg: #FFFBEB;--warning-text: #92400E;--warning-border: #FDE68A;--danger: #DC2626;--danger-bg: #FEF2F2;--danger-text: #991B1B;--danger-border: #FECACA;--info: #2563EB;--info-bg: #EFF6FF;--info-text: #1D4ED8;--info-border: #BFDBFE;--font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--font-weight-regular: 400;--font-weight-medium: 500;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base:14px;--text-md: 15px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 28px;--text-display: 32px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 28px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-2xl: 22px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);--shadow-sm: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06);--shadow-md: 0 4px 6px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);--shadow-lg: 0 8px 16px rgba(15,23,42,.06), 0 16px 40px rgba(15,23,42,.1);--shadow-xl: 0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);--shadow-focus: 0 0 0 3px rgba(239,68,68,.15);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .32s cubic-bezier(.4, 0, .2, 1);--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--transition: .15s ease;--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--bg-elevated: #F8FAFC;--sre-accent: #ef4444;--sre-gradient: linear-gradient(135deg, #ef4444, #dc2626);--p1-color: #ef4444;--p1-bg: rgba(239,68,68,.1);--p2-color: #f59e0b;--p2-bg: rgba(245,158,11,.1);--p3-color: #6366f1;--p3-bg: rgba(99,102,241,.1);--ok-color: #10b981;--ok-bg: rgba(16,185,129,.1);--dot-green: #10b981;--dot-red: #ef4444;--dot-yellow: #f59e0b;--dot-gray: #6b7280}.dark{--bg-canvas: #161B28;--bg-page: #0A0B10;--bg-subtle: #1E2535;--bg-muted: #334155;--bg-overlay: rgba(0,0,0,.85);--sidebar-bg: #080C14;--sidebar-border: rgba(255,255,255,.06);--sidebar-text: #64748B;--sidebar-text-hover: #94A3B8;--sidebar-active-bg: rgba(239,68,68,.15);--sidebar-active-bar: #ef4444;--topbar-bg: #161B28;--topbar-border: #1E2535;--border-subtle: #1E2535;--border-default: #334155;--border-strong: #475569;--text-primary: #FFFFFF;--text-secondary: #F1F5F9;--text-muted: #94A3B8;--text-placeholder: #64748B;--text-link: #f87171;--text-dim: #374151;--bg-elevated: #1E2535;--hr-bg: #1e1b4b;--hr-bg-hover: #2d2870;--hr-text: #A5B4FC;--hr-border: #3730A3;--fin-bg: #0c2a4a;--fin-bg-hover: #0e3a62;--fin-text: #7DD3FC;--fin-border: #0369A1;--ops-bg: #431407;--ops-bg-hover: #5c1d0a;--ops-text: #FDBA74;--ops-border: #C2410C;--gov-bg: #0F172A;--gov-bg-hover: #1E293B;--gov-text: #F1F5F9;--gov-border: #334155;--success-bg: #064e3b;--success-text: #6ee7b7;--success-border: #059669;--warning-bg: #451a03;--warning-text: #fcd34d;--warning-border: #d97706;--danger-bg: #450a0a;--danger-text: #fca5a5;--danger-border: #dc2626;--info-bg: #172554;--info-text: #93c5fd;--info-border: #2563eb;--shadow-xs: 0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.15);--shadow-sm: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.25);--shadow-md: 0 4px 6px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.3);--shadow-lg: 0 8px 16px rgba(0,0,0,.25), 0 16px 40px rgba(0,0,0,.35);--shadow-xl: 0 20px 40px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.25);--shadow-focus: 0 0 0 3px rgba(239,68,68,.2);--p1-color: #ef4444;--p1-bg: rgba(239,68,68,.1);--p2-color: #f59e0b;--p2-bg: rgba(245,158,11,.1);--p3-color: #818cf8;--p3-bg: rgba(99,102,241,.12);--ok-color: #34d399;--ok-bg: rgba(16,185,129,.1);--dot-green: #34d399;--dot-red: #f87171;--dot-yellow: #fbbf24;--dot-gray: #6b7280}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg-page);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}.sre-layout{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--topbar-height) 1fr;height:100vh;overflow:hidden}.sre-topbar{grid-column:1 / -1;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);display:flex;align-items:center;padding:0 var(--space-6);gap:var(--space-4);box-shadow:var(--shadow-xs);z-index:var(--z-sticky);position:relative}.sre-sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);padding:var(--space-4) 0;overflow-y:auto;overflow-x:hidden}.sre-main{overflow-y:auto;overflow-x:hidden;padding:var(--space-6);background:var(--bg-page)}.sre-mobile-nav{display:none}@media (max-width: 768px){.sre-layout{grid-template-columns:1fr;grid-template-rows:var(--topbar-height) 1fr 64px;height:100dvh}.sre-topbar{padding:0 var(--space-4);gap:var(--space-3)}.sre-sidebar{display:none}.sre-main{padding:var(--space-4) var(--space-3);padding-bottom:calc(64px + var(--space-4));overflow-y:auto}.sre-mobile-nav{display:flex;align-items:stretch;background:var(--sidebar-bg);border-top:1px solid var(--sidebar-border);grid-column:1;z-index:var(--z-sticky)}.mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;border:none;background:none;color:var(--sidebar-text);font-size:10px;font-weight:500;font-family:var(--font-sans);cursor:pointer;position:relative;transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent}.mobile-nav-item.active{color:#fff}.mobile-nav-item.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:32px;height:2px;background:var(--sre-accent);border-radius:0 0 2px 2px}.mobile-nav-icon{font-size:18px;line-height:1}.mobile-nav-badge{position:absolute;top:4px;right:calc(50% - 14px);background:var(--p1-color);color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:6px;min-width:14px;text-align:center}.topbar-hide-mobile{display:none!important}.topbar-compact{font-size:.75rem!important;padding:4px 10px!important}}.card{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);transition:box-shadow var(--transition-base),border-color var(--transition-base)}.card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);flex-wrap:wrap;gap:var(--space-2)}.card-title{font-size:var(--text-2xs);font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}@media (max-width: 768px){.stat-grid{grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}}@media (max-width: 400px){.stat-grid{grid-template-columns:1fr}}.stat-card{background:var(--bg-canvas);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);transition:box-shadow var(--transition-base),border-color var(--transition-base),transform var(--transition-fast)}.stat-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong);transform:translateY(-1px)}.stat-label{font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-2)}.stat-value{font-size:var(--text-3xl);font-weight:700;line-height:1;color:var(--text-primary);font-family:var(--font-mono)}.stat-sub{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)}@media (max-width: 768px){.stat-value{font-size:var(--text-2xl)}}.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--radius-full);font-size:var(--text-2xs);font-weight:500;text-transform:uppercase;letter-spacing:.06em;border:1px solid transparent;white-space:nowrap}.badge-p1{background:var(--p1-bg);color:var(--p1-color);border-color:#ef444440}.badge-p2{background:var(--p2-bg);color:var(--p2-color);border-color:#f59e0b40}.badge-p3{background:var(--p3-bg);color:var(--p3-color);border-color:#6366f140}.badge-ok{background:var(--ok-bg);color:var(--ok-color);border-color:#10b98140}.badge-gray{background:var(--bg-subtle);color:var(--text-muted);border-color:var(--border-default)}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}.dot-green{background:var(--dot-green);box-shadow:0 0 0 2px #10b98140}.dot-red{background:var(--dot-red);animation:pulse-red 2s infinite}.dot-yellow{background:var(--dot-yellow)}.dot-gray{background:var(--dot-gray)}@keyframes pulse-red{0%,to{box-shadow:0 0 #ef444499}50%{box-shadow:0 0 0 6px #ef444400}}.terminal{background:#04050a;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;height:320px;overflow-y:auto;color:#a0d9b5;-webkit-overflow-scrolling:touch}.terminal-line{padding:1px 0;word-break:break-word}.terminal-line.error{color:#f87171}.terminal-line.warn{color:#fbbf24}.terminal-line.info{color:#6ee7b7}.terminal-line.debug{color:#475569}.terminal-ts{color:#374151;margin-right:8px}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);margin:0 var(--space-2);border-radius:var(--radius-md);color:var(--sidebar-text);font-size:var(--text-md);font-weight:500;text-decoration:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);border-left:2px solid transparent}.nav-item:hover{background:#ffffff0d;color:var(--sidebar-text-hover);transform:translate(2px)}.nav-item.active{color:#fff;background:var(--sidebar-active-bg);border-left-color:var(--sidebar-active-bar);padding-left:calc(var(--space-3) - 2px)}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.data-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.data-table th{text-align:left;padding:var(--space-3) var(--space-4);color:var(--text-muted);font-weight:500;text-transform:uppercase;font-size:var(--text-2xs);letter-spacing:.07em;border-bottom:1px solid var(--border-default);white-space:nowrap}.data-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}.data-table tbody tr:first-child td{color:var(--text-primary);font-weight:500}.data-table tr:hover td{background:var(--bg-subtle);color:var(--text-primary)}.data-table tr:last-child td{border-bottom:none}.incident-card{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background var(--transition-fast);-webkit-tap-highlight-color:transparent}.incident-card:last-child{border-bottom:none}.incident-card:active{background:var(--bg-subtle)}.incident-card.selected{background:var(--bg-elevated);border-left:2px solid var(--sre-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:7px 16px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer;border:none;transition:all var(--transition-fast);font-family:var(--font-sans);white-space:nowrap;text-decoration:none;-webkit-user-select:none;user-select:none;min-height:36px;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--sre-gradient);color:#fff;box-shadow:var(--shadow-xs)}.btn-primary:hover{opacity:.88;box-shadow:var(--shadow-sm)}.btn-ghost{background:var(--bg-subtle);color:var(--text-secondary);border:1px solid var(--border-default)}.btn-ghost:hover{background:var(--bg-muted);border-color:var(--border-strong)}.btn-danger{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-border)}.btn-danger:hover{opacity:.88}@media (max-width: 768px){.btn{min-height:40px;padding:8px 14px}}.mobile-conn-dot{display:none!important}@media (max-width: 768px){.mobile-conn-dot{display:flex!important}}.filter-pills{display:flex;gap:var(--space-2);flex-wrap:wrap}@media (max-width: 768px){.filter-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:var(--space-2);scrollbar-width:none}.filter-pills::-webkit-scrollbar{display:none}}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);gap:var(--space-4);flex-wrap:wrap}@media (max-width: 768px){.page-header{margin-bottom:var(--space-4)}}.page-title{font-size:var(--text-xl);font-weight:500;color:var(--text-primary)}.page-subtitle{font-size:var(--text-sm);color:var(--text-muted);margin-top:2px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-5)}@media (max-width: 768px){.grid-2,.grid-3{grid-template-columns:1fr;gap:var(--space-4)}}.health-bar{display:flex;gap:32px;align-items:center;flex-wrap:wrap;row-gap:var(--space-3)}@media (max-width: 768px){.health-bar{gap:var(--space-5)}.health-bar>div{min-width:calc(50% - 10px)}}.code-diff{background:#04050a;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.7;overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}.diff-add{color:#6ee7b7;background:#10b98114}.diff-remove{color:#f87171;background:#ef444414}.diff-meta{color:#475569}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-10);color:var(--text-muted);font-size:var(--text-sm);gap:var(--space-3);text-align:center}.empty-state-icon{font-size:2rem;opacity:.4}.conn-banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;border:1px solid}.conn-banner-warn{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}.conn-banner-error{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}.incident-detail-panel{position:fixed;bottom:64px;left:0;right:0;background:var(--bg-canvas);border-top:1px solid var(--border-default);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-5);z-index:var(--z-modal);max-height:75vh;overflow-y:auto;box-shadow:var(--shadow-xl);transform:translateY(0);animation:slide-up .2s ease}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.incident-detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);z-index:calc(var(--z-modal) - 1)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}::selection{background:#ef444426;color:var(--text-primary)}:focus{outline:none}:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-md)}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.animate-fade{animation:fade-in .2s ease both}