@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg-primary:#06090f;--bg-secondary:#0c1220;--bg-surface:#111a2e;--bg-surface-hover:#162040;--bg-surface-active:#1a2750;--bg-glass:#0c1220d9;--text-primary:#e4e9f2;--text-secondary:#7e8ca3;--text-muted:#465168;--text-inverse:#06090f;--accent-primary:#6366f1;--accent-primary-hover:#818cf8;--accent-primary-glow:#6366f12e;--accent-secondary:#a78bfa;--accent-cyan:#22d3ee;--accent-cyan-glow:#22d3ee1a;--accent-gradient:linear-gradient(135deg,#6366f1,#a78bfa,#22d3ee);--accent-gradient-subtle:linear-gradient(135deg,#6366f11f,#a78bfa14);--status-success:#34d399;--status-success-bg:#34d3991a;--status-warning:#fbbf24;--status-warning-bg:#fbbf241a;--status-error:#f87171;--status-error-bg:#f871711a;--status-info:#60a5fa;--status-info-bg:#60a5fa1a;--border-subtle:#ffffff0a;--border-medium:#ffffff14;--border-strong:#ffffff24;--border-accent:#6366f14d;--space-2xs:2px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--shadow-xs:0 1px 2px #0006;--shadow-sm:0 2px 6px #00000059;--shadow-md:0 4px 14px #0006;--shadow-lg:0 8px 30px #00000080;--shadow-xl:0 16px 50px #0009;--shadow-glow:0 0 20px #6366f126;--shadow-glow-lg:0 0 40px #6366f133;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace;--text-xs:11px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--line-tight:1.3;--line-normal:1.6;--tracking-tight:-.02em;--tracking-normal:0em;--sidebar-width:260px;--sidebar-collapsed-width:68px;--header-height:56px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s cubic-bezier(.4,0,.2,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:var(--line-normal);min-height:100vh;overflow-x:hidden}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}.app-shell{min-height:100vh;display:flex;position:relative}.app-shell:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20%,#6366f10a 0%,#0000 60%),radial-gradient(at 80% 20%,#22d3ee08 0%,#0000 50%);position:fixed;inset:0}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-subtle);z-index:100;transition:width var(--transition-base);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#6366f133 30%,#6366f11a 70%,#0000 100%);width:1px;position:absolute;top:0;bottom:0;right:-1px}.sidebar-header{padding:var(--space-lg)var(--space-md);border-bottom:1px solid var(--border-subtle);align-items:center;gap:var(--space-sm);display:flex}.sidebar-logo{border-radius:var(--radius-md);background:var(--accent-gradient);color:#fff;width:36px;height:36px;box-shadow:var(--shadow-glow);flex-shrink:0;justify-content:center;align-items:center;font-size:15px;font-weight:800;display:flex;position:relative}.sidebar-logo:after{content:"";border-radius:var(--radius-md);background:var(--accent-gradient);opacity:0;z-index:-1;animation:4s ease-in-out infinite logoPulse;position:absolute;inset:-2px}@keyframes logoPulse{0%,to{opacity:0;transform:scale(1)}50%{opacity:.3;transform:scale(1.08)}}.sidebar-title{font-size:var(--text-md);letter-spacing:var(--tracking-tight);color:var(--text-primary);white-space:nowrap;font-weight:700;overflow:hidden}.sidebar-title-sub{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500}.sidebar-brand{flex-direction:column;display:flex;overflow:hidden}.sidebar-nav{padding:var(--space-md)var(--space-sm);gap:var(--space-2xs);flex-direction:column;flex:1;display:flex;overflow-y:auto}.sidebar-section-label{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:var(--space-md)var(--space-md)var(--space-xs);font-weight:600}.sidebar-nav-item{padding:9px var(--space-md);border-radius:var(--radius-sm);font-size:var(--text-base);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-weight:500;display:flex;position:relative;overflow:hidden}.sidebar-nav-item:before{content:"";background:var(--accent-primary);width:3px;height:0;transition:height var(--transition-fast);border-radius:0 2px 2px 0;position:absolute;top:50%;left:0;transform:translateY(-50%)}.sidebar-nav-item:hover{background:var(--bg-surface-hover);color:var(--text-primary)}.sidebar-nav-item.active{background:var(--accent-primary-glow);color:var(--accent-primary-hover)}.sidebar-nav-item.active:before{height:20px}.sidebar-nav-icon{text-align:center;opacity:.8;flex-shrink:0;width:22px;font-size:16px}.sidebar-nav-item.active .sidebar-nav-icon{opacity:1}.sidebar-nav-item:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px;background:var(--bg-surface-hover);color:var(--text-primary)}.btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-primary-glow)}.input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-1px}a:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:var(--radius-xs)}.sidebar-nav-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sidebar-footer{padding:var(--space-md);border-top:1px solid var(--border-subtle);align-items:center;gap:var(--space-sm);display:flex}.sidebar-footer-dot{background:var(--status-success);border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:3s ease-in-out infinite statusPulse;box-shadow:0 0 8px #34d39966}@keyframes statusPulse{0%,to{box-shadow:0 0 6px #34d3994d}50%{box-shadow:0 0 14px #34d39999}}.sidebar-footer-text{font-size:var(--text-xs);color:var(--text-muted);font-weight:500}.main-content{margin-left:var(--sidebar-width);padding:var(--space-xl)var(--space-2xl);min-height:100vh;transition:margin-left var(--transition-base);z-index:1;flex:1;position:relative}.page-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border-subtle)}.page-header h1{font-size:var(--text-2xl);letter-spacing:var(--tracking-tight);color:var(--text-primary);font-weight:800;line-height:var(--line-tight)}.page-header p{font-size:var(--text-base);color:var(--text-secondary);margin-top:var(--space-xs)}.page-header-actions{gap:var(--space-sm);margin-top:var(--space-md);display:flex}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);position:relative;overflow:hidden}.card:before{content:"";background:var(--accent-gradient);opacity:0;height:1px;transition:opacity var(--transition-base);position:absolute;top:0;left:0;right:0}.card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-md);transform:translateY(-1px)}.card:hover:before{opacity:.6}.card-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.card-title{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600}.card-value{font-size:var(--text-3xl);letter-spacing:var(--tracking-tight);font-weight:800;line-height:var(--line-tight)}.card-value--gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.card-label{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-sm)}.card-icon{border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.card-icon--accent{background:var(--accent-primary-glow);color:var(--accent-primary)}.card-icon--success{background:var(--status-success-bg);color:var(--status-success)}.card-icon--warning{background:var(--status-warning-bg);color:var(--status-warning)}.card-icon--error{background:var(--status-error-bg);color:var(--status-error)}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);letter-spacing:.01em;align-items:center;gap:6px;padding:4px 12px;font-weight:600;display:inline-flex}.badge--success{background:var(--status-success-bg);color:var(--status-success)}.badge--warning{background:var(--status-warning-bg);color:var(--status-warning)}.badge--error{background:var(--status-error-bg);color:var(--status-error)}.badge--info{background:var(--status-info-bg);color:var(--status-info)}.badge--accent{background:var(--accent-primary-glow);color:var(--accent-primary)}.badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px;animation:2.5s ease-in-out infinite dotPulse}@keyframes dotPulse{0%,to{opacity:1}50%{opacity:.35}}.btn{justify-content:center;align-items:center;gap:var(--space-sm);font-family:var(--font-sans);font-size:var(--text-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;padding:8px 16px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:0 1px 3px #6366f14d}.btn--primary:hover{background:var(--accent-primary-hover);box-shadow:var(--shadow-glow)}.btn--ghost{color:var(--text-secondary);border-color:var(--border-medium);background:0 0}.btn--ghost:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-strong)}.btn--danger{color:var(--status-error);background:0 0;border-color:#f871714d}.btn--danger:hover{background:var(--status-error-bg);border-color:var(--status-error)}.btn--sm{font-size:var(--text-xs);padding:5px 10px}.data-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--text-sm)}.data-table th{text-align:left;font-weight:600;font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-sm)var(--space-md);border-bottom:1px solid var(--border-subtle)}.data-table td{padding:var(--space-sm)var(--space-md);color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);transition:background var(--transition-fast)}.data-table tr:hover td{background:var(--bg-surface-hover);color:var(--text-primary)}.input{background:var(--bg-primary);border:1px solid var(--border-medium);border-radius:var(--radius-sm);width:100%;font-family:var(--font-sans);font-size:var(--text-base);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);padding:8px 12px}.input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow);outline:none}.input::placeholder{color:var(--text-muted)}.label{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs);font-weight:600;display:block}.grid{gap:var(--space-md);display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}.grid-7{grid-template-columns:repeat(7,1fr)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.text-mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-secondary{color:var(--text-secondary)}.text-accent{color:var(--accent-primary)}.fade-in{animation:.3s forwards fadeIn}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.slide-in{animation:.35s cubic-bezier(.4,0,.2,1) forwards slideIn}@keyframes slideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.stagger>*{opacity:0;animation:.35s forwards fadeIn}.stagger>:first-child{animation-delay:50ms}.stagger>:nth-child(2){animation-delay:.1s}.stagger>:nth-child(3){animation-delay:.15s}.stagger>:nth-child(4){animation-delay:.2s}.stagger>:nth-child(5){animation-delay:.25s}.stagger>:nth-child(6){animation-delay:.3s}.stagger>:nth-child(7){animation-delay:.35s}.stagger>:nth-child(8){animation-delay:.4s}.stagger>:nth-child(9){animation-delay:.45s}@media (max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}.main-content{padding:var(--space-lg)var(--space-xl)}}@media (max-width:768px){.sidebar{width:var(--sidebar-collapsed-width)}.sidebar-title,.sidebar-title-sub,.sidebar-nav-label,.sidebar-footer-text,.sidebar-section-label{display:none}.sidebar-header{padding:var(--space-md);justify-content:center}.sidebar-nav-item{justify-content:center;padding:10px}.sidebar-footer{justify-content:center}.main-content{margin-left:var(--sidebar-collapsed-width);padding:var(--space-md)}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.widget-shell{background:var(--bg-surface);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:var(--space-lg);height:100%;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.widget-shell--clickable{cursor:pointer}.widget-shell--clickable:hover{border-color:var(--border-strong);box-shadow:var(--shadow-glow)}.widget-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.widget-header-left{align-items:center;gap:var(--space-sm);display:flex}.widget-icon{color:var(--text-muted)}.widget-title{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:0;font-weight:500}.widget-error{font-size:var(--text-xs);color:var(--status-warning)}.widget-skeleton{gap:var(--space-sm);flex-direction:column;display:flex}.skeleton-line{background:var(--border-medium);border-radius:var(--radius-xs);height:14px;animation:1.5s ease-in-out infinite pulse}.skeleton-line.w-75{width:75%}.skeleton-line.w-66{width:66%}.skeleton-line.w-50{width:50%}.widget-body-stack{gap:var(--space-sm);flex-direction:column;display:flex}.widget-metric-row{align-items:center;gap:var(--space-sm);display:flex}.widget-metric-value{font-size:var(--text-lg);font-weight:600}.widget-metric-big{font-size:var(--text-2xl);font-weight:700;font-family:var(--font-mono)}.widget-metric-label{font-size:var(--text-xs);color:var(--text-muted)}.widget-detail-row{justify-content:space-between;align-items:center;display:flex}.widget-detail-label{font-size:var(--text-xs);color:var(--text-secondary)}.widget-detail-value{font-size:var(--text-xs);color:var(--text-primary)}.widget-detail-value--mono{font-family:var(--font-mono);font-weight:500}.widget-divider{background:var(--border-subtle);height:1px;margin:var(--space-xs)0}.widget-alert{align-items:center;gap:var(--space-xs);font-size:var(--text-xs);padding:var(--space-xs)var(--space-sm);border-radius:var(--radius-sm);display:flex}.widget-alert--critical{color:var(--status-error);background:var(--status-error-bg)}.widget-alert--warning{color:var(--status-warning);background:var(--status-warning-bg)}.progress-track{background:var(--border-medium);border-radius:var(--radius-full);height:6px;overflow:hidden}.progress-fill{border-radius:var(--radius-full);height:100%;transition:width var(--transition-slow)}.critical-banner{background:var(--status-error-bg);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid #f871714d}.critical-pill{align-items:center;gap:var(--space-xs);padding:var(--space-xs)var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--status-error);background:#f871711a;font-weight:500;display:inline-flex}.live-dot{background:var(--status-success);border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse}.live-dot--error{background:var(--status-error)}.btn--xs{font-size:var(--text-xs);padding:var(--space-xs)var(--space-sm)}.btn--live{color:var(--status-success);background:#34d3991a;border-color:#34d39933}.text-success{color:var(--status-success)}.text-error{color:var(--status-error)}.text-warning{color:var(--status-warning)}.text-xs{font-size:var(--text-xs)}.agent-card{gap:var(--space-sm);flex-direction:column;display:flex}.agent-card-header{align-items:center;gap:var(--space-sm);display:flex}.agent-avatar{width:36px;height:36px;font-weight:700;font-size:var(--text-sm);background:var(--accent-primary-glow);color:var(--accent-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.agent-avatar[data-agent=catherine]{color:#a78bfa;background:#8b5cf626}.agent-avatar[data-agent=calyce]{color:#f472b6;background:#ec489926}.agent-avatar[data-agent=soho]{color:#22d3ee;background:#22d3ee26}.agent-avatar[data-agent=gracielo]{color:#34d399;background:#34d39926}.agent-avatar[data-agent=mark]{color:#fbbf24;background:#fbbf2426}.agent-card-info{flex:1;min-width:0}.agent-card-name{font-weight:600;font-size:var(--text-sm);color:var(--text-primary);display:block}.agent-card-role{font-size:var(--text-xs);color:var(--text-muted);display:block}.agent-status-badge{align-items:center;gap:var(--space-xs);flex-shrink:0;display:flex}.agent-status-dot{border-radius:50%;width:8px;height:8px}.agent-status-label{font-size:var(--text-xs);font-weight:500}.agent-card-section{padding-top:var(--space-xs);border-top:1px solid var(--border-subtle)}.agent-card-section-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px;font-weight:500}.agent-card-section-value{font-size:var(--text-xs);color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;overflow:hidden}.agent-card-footer{padding-top:var(--space-xs);border-top:1px solid var(--border-subtle);margin-top:auto}.timeline-container{position:relative}.timeline-line{background:var(--border-medium);width:1px;position:absolute;top:0;bottom:0;left:17px}.timeline-event{gap:var(--space-sm);padding:var(--space-sm)var(--space-md);border-radius:var(--radius-sm);color:inherit;transition:background var(--transition-fast);text-decoration:none;display:flex;position:relative}.timeline-event:hover{background:var(--bg-surface)}.timeline-event-dot{z-index:1;background:var(--bg-surface);width:36px;height:36px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.timeline-event-dot[data-agent=catherine]{color:#a78bfa;background:#8b5cf626}.timeline-event-dot[data-agent=calyce]{color:#f472b6;background:#ec489926}.timeline-event-dot[data-agent=soho]{color:#22d3ee;background:#22d3ee26}.timeline-event-dot[data-agent=gracielo]{color:#34d399;background:#34d39926}.timeline-event-dot[data-agent=mark]{color:#fbbf24;background:#fbbf2426}.timeline-event-content{flex:1;min-width:0;padding-top:2px}.timeline-event-text{font-size:var(--text-sm);color:var(--text-primary);margin:0}.timeline-event-agent{font-weight:600}.timeline-event-link{color:var(--text-muted);opacity:0;transition:opacity var(--transition-fast);flex-shrink:0;margin-top:4px}.timeline-event:hover .timeline-event-link{opacity:1}.metric-gauge{gap:var(--space-xs);flex-direction:column;display:flex}