@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-base: #060810;--bg-surface: #0B0E1C;--bg-elevated: #101428;--bg-hover: #141828;--border: #1B2040;--border-subtle: #0F1328;--accent: #FF5C35;--accent-dim: rgba(255, 92, 53, .12);--accent-glow: rgba(255, 92, 53, .25);--live: #00F0A0;--live-dim: rgba(0, 240, 160, .1);--stream: #5B8DEF;--stream-dim: rgba(91, 141, 239, .1);--warning: #FFAB30;--warning-dim: rgba(255, 171, 48, .1);--error: #FF4060;--error-dim: rgba(255, 64, 96, .1);--text-primary: #D4DCF5;--text-secondary: #7080AA;--text-muted: #384060;--font-display: "Barlow Condensed", sans-serif;--font-body: "DM Sans", sans-serif;--font-mono: "JetBrains Mono", monospace;--sidebar-w: 220px;--topbar-h: 56px;--radius: 8px;--radius-lg: 14px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);line-height:1.5;min-height:100vh;background-image:radial-gradient(circle,#1B2040 1px,transparent 1px);background-size:28px 28px;background-attachment:fixed}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;line-height:1.1}.mono{font-family:var(--font-mono)}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh}.topbar{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 0;background:#060810e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100}.sidebar{grid-column:1;grid-row:2;background:#0b0e1cb3;border-right:1px solid var(--border-subtle);position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:20px 0;display:flex;flex-direction:column}.main-content{grid-column:2;grid-row:2;padding:28px 32px;overflow-y:auto;height:calc(100vh - var(--topbar-h))}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.015) 0%,transparent 60%);pointer-events:none}.card-sm{padding:16px;border-radius:var(--radius)}.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;display:flex;flex-direction:column;gap:8px}.stat-value{font-family:var(--font-display);font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.01em}.stat-label{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);font-family:var(--font-body);font-weight:500;font-size:.875rem;cursor:pointer;transition:all .15s;border:none;text-decoration:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#ff7050;transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn-sm{padding:6px 12px;font-size:.8rem}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.badge-live{background:var(--live-dim);color:var(--live);border:1px solid rgba(0,240,160,.2)}.badge-stream{background:var(--stream-dim);color:var(--stream);border:1px solid rgba(91,141,239,.2)}.badge-warn{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(255,171,48,.2)}.badge-error{background:var(--error-dim);color:var(--error);border:1px solid rgba(255,64,96,.2)}.badge-muted{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}.pulse-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse-ring 2s ease infinite}@keyframes pulse-ring{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.85rem}th{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}td{padding:12px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}tr:last-child td{border-bottom:none}tr:hover td{background:var(--bg-hover);color:var(--text-primary)}.progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;border-radius:2px;transition:width .6s ease}.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--text-secondary);text-decoration:none;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .12s;border-left:2px solid transparent;position:relative}.nav-item:hover{color:var(--text-primary);background:#ffffff08}.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim)}.nav-section{font-family:var(--font-display);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);padding:16px 20px 6px}.health-good{background:var(--live)}.health-warn{background:var(--warning)}.health-bad{background:var(--error)}.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}.page-title{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:.03em}.page-subtitle{font-size:.82rem;color:var(--text-secondary);margin-top:4px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:20px}.section-title{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}.divider{border:none;border-top:1px solid var(--border-subtle);margin:20px 0}.input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;color:var(--text-primary);font-family:var(--font-body);font-size:.875rem;transition:border-color .15s;outline:none}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text-muted)}.label{display:block;font-size:.75rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px;letter-spacing:.02em}.form-group{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100vh)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin .75s linear infinite}@keyframes soundwave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.wave-bar{display:inline-block;width:2px;height:10px;background:var(--live);border-radius:1px;animation:soundwave .8s ease-in-out infinite}.animate-fade-up{animation:fadeUp .4s ease both}.stagger>*:nth-child(1){animation:fadeUp .4s .05s ease both}.stagger>*:nth-child(2){animation:fadeUp .4s .1s ease both}.stagger>*:nth-child(3){animation:fadeUp .4s .15s ease both}.stagger>*:nth-child(4){animation:fadeUp .4s .2s ease both}.stagger>*:nth-child(5){animation:fadeUp .4s .25s ease both}.stagger>*:nth-child(6){animation:fadeUp .4s .3s ease both}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted);gap:12px;text-align:center}.empty-state svg{opacity:.3}.empty-state p{font-size:.85rem}
