*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;--bg:#0b0f19;--bg-card:#111827;--bg-card-hover:#1a2233;--bg-elevated:#1e293b;--bg-input:#0f172a;--border:#1e293b;--border-strong:#334155;--text:#f1f5f9;--text-dim:#94a3b8;--text-faint:#64748b;--accent:#06b6d4;--accent-hover:#22d3ee;--accent-soft:rgba(6,182,212,.12);--green:#10b981;--red:#f43f5e;--yellow:#f59e0b;--blue:#4cd7f6;--violet:#a78bfa;--radius-sm:4px;--radius:8px;--shadow:0 20px 25px -5px rgba(0,0,0,.6),0 8px 10px -6px rgba(0,0,0,.4);--glow:0 0 10px rgba(6,182,212,.25);--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--font-mono:"JetBrains Mono","SF Mono","Fira Code",Consolas,monospace;--sidebar-w:248px;--topbar-h:56px}body,html{background:var(--bg)}body{color:var(--text);font-family:var(--font-sans);font-size:13px;line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}.mono-text,.num,code{font-family:var(--font-mono);font-variant-numeric:tabular-nums slashed-zero}::-moz-selection{background:#06b6d459}::selection{background:#06b6d459}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}.layout{display:flex;min-height:100vh}.sidebar{background:#0d1220;border-right:1px solid var(--border);bottom:0;display:flex;flex-direction:column;left:0;position:fixed;top:0;width:var(--sidebar-w);z-index:20}.sidebar-logo{align-items:center;border-bottom:1px solid var(--border);display:flex;gap:10px;padding:18px 18px 16px}.sidebar-logo .emblem{background:linear-gradient(135deg,#06b6d440,#10b9811f);border:1px solid rgba(6,182,212,.45);border-radius:var(--radius);box-shadow:var(--glow);color:var(--accent-hover);display:grid;flex-shrink:0;height:34px;place-items:center;width:34px}.sidebar-logo .brand{color:var(--text);font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.2}.sidebar-logo .brand b{color:var(--accent);font-weight:700}.sidebar-logo span{display:block;letter-spacing:.08em}.sidebar-instance,.sidebar-logo span{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;text-transform:uppercase}.sidebar-instance{align-items:center;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;justify-content:space-between;letter-spacing:.06em;margin:12px 12px 4px;padding:8px 10px}.sidebar-instance strong{color:var(--accent);font-weight:500}.sidebar-nav{flex:1;overflow-y:auto;padding:8px 10px}.nav-section{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:14px 10px 6px;text-transform:uppercase}.sidebar-nav a{align-items:center;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-dim);display:flex;font-size:13px;font-weight:500;gap:10px;margin-bottom:1px;padding:7px 10px;transition:background .15s,color .15s,border-color .15s}.sidebar-nav a svg{flex-shrink:0;height:16px;opacity:.85;width:16px}.sidebar-nav a:hover{background:var(--bg-card);color:var(--text)}.sidebar-nav a.router-link-active:not([href="/"]),.sidebar-nav a.router-link-exact-active{background:var(--accent-soft);border-color:#06b6d459;color:var(--accent-hover)}.sidebar-footer{border-top:1px solid var(--border);padding:12px}.health-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;padding:10px 12px}.health-card .row{align-items:center;display:flex;font-size:11px;justify-content:space-between}.health-card .row+.row{margin-top:6px}.health-card .k{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase}.health-card .v{color:var(--text);font-family:var(--font-mono)}.meter{background:var(--bg-elevated);height:4px;margin-top:8px;overflow:hidden}.meter,.meter>i{border-radius:4px}.meter>i{background:linear-gradient(90deg,var(--accent),var(--green));display:block;height:100%}.user-chip{align-items:center;display:flex;gap:10px;padding:4px 2px 10px}.user-chip .avatar{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:50%;color:var(--accent-hover);display:grid;font-size:12px;font-weight:600;height:30px;place-items:center;width:30px}.user-chip .name{color:var(--text);font-size:12px;font-weight:600;line-height:1.2}.user-chip .role{color:var(--text-faint);font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase}.main-wrap{display:flex;flex:1;flex-direction:column;margin-left:var(--sidebar-w);min-width:0}.topbar{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#0b0f19d1;border-bottom:1px solid var(--border);display:flex;gap:10px;height:var(--topbar-h);overflow-x:auto;padding:0 24px;position:sticky;top:0;z-index:15}.topbar .spacer{flex:1}.pill{align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dim);display:inline-flex;font-family:var(--font-mono);font-size:11px;gap:6px;height:28px;padding:0 10px;white-space:nowrap}.pill b{color:var(--text);font-weight:500}.pill b.ok{color:var(--green)}.pill b.warn{color:var(--yellow)}.pill b.bad{color:var(--red)}.pill b.info{color:var(--accent-hover)}.dot{background:var(--text-faint);border-radius:50%;display:inline-block;flex-shrink:0;height:7px;width:7px}.dot.ok{background:var(--green);box-shadow:0 0 8px #10b981b3}.dot.bad{background:var(--red);box-shadow:0 0 8px #f43f5eb3}.dot.warn{background:var(--yellow)}.dot.info{background:var(--accent);box-shadow:0 0 8px #06b6d4b3}.dot.pulse{animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.main-content{flex:1;max-width:1600px;padding:24px;width:100%}.page-header{align-items:flex-end;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:20px}.page-header h1{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-bottom:2px}.page-header p{color:var(--text-dim);font-size:13px}.eyebrow{align-items:center;color:var(--green);display:inline-flex;font-family:var(--font-mono);font-size:10px;gap:8px;letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}.card,.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;padding:18px;position:relative}.card:before,.panel:before{background:linear-gradient(to right,var(--border-strong),transparent);content:"";height:1px;left:12px;pointer-events:none;position:absolute;right:40%;top:-1px}.card h3,.panel h3{font-size:14px;font-weight:600;letter-spacing:-.005em}.panel-head{align-items:flex-start;display:flex;gap:12px;justify-content:space-between;margin-bottom:14px}.panel-head p{color:var(--text-faint);font-size:12px;margin-top:2px}.tag{align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-dim);display:inline-flex;font-family:var(--font-mono);font-size:10px;gap:5px;height:20px;letter-spacing:.04em;padding:0 7px;text-transform:uppercase;white-space:nowrap}.tag.info{background:#06b6d414;border-color:#06b6d473;color:var(--accent-hover)}.tag.ok{background:#10b98114;border-color:#10b98173;color:var(--green)}.tag.bad{background:#f43f5e14;border-color:#f43f5e73;color:var(--red)}.tag.warn{background:#f59e0b14;border-color:#f59e0b73;color:var(--yellow)}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.kpi-grid,.stat-grid{display:grid;gap:12px;margin-bottom:16px}.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.kpi-grid{grid-template-columns:1fr}}.kpi,.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;padding:14px 16px;position:relative}.kpi{display:flex;flex-direction:column;gap:6px;min-height:132px}.kpi.accent-bad{background:linear-gradient(180deg,rgba(244,63,94,.06),var(--bg-card) 60%);border-color:#f43f5e59}.kpi .label,.stat-card .label{align-items:center;color:var(--text-faint);display:flex;font-family:var(--font-mono);font-size:10px;font-weight:500;gap:8px;justify-content:space-between;letter-spacing:.08em;text-transform:uppercase}.kpi .value,.stat-card .value{font-family:var(--font-mono);font-size:26px;font-variant-numeric:tabular-nums slashed-zero;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-top:2px}.kpi .value small{color:var(--text-faint);font-size:12px;font-weight:500;letter-spacing:0;margin-left:6px}.kpi .sub{color:var(--text-faint);font-family:var(--font-mono);font-size:11px}.kpi .spark{height:34px;margin-top:auto}.kpi .spark svg{display:block;height:100%;overflow:visible;width:100%}.kpi .value.green,.stat-card .value.green{color:var(--green)}.kpi .value.red,.stat-card .value.red{color:var(--red)}.kpi .value.blue,.stat-card .value.blue{color:var(--blue)}.kpi .value.yellow,.stat-card .value.yellow{color:var(--yellow)}.delta{font-family:var(--font-mono);font-size:11px;font-weight:500}.delta.up{color:var(--green)}.delta.down{color:var(--red)}.delta.flat{color:var(--text-faint)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;font-size:13px;width:100%}th{background:#0f172a99;border-bottom:1px solid var(--border-strong);color:var(--text-faint);font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-align:left;text-transform:uppercase;white-space:nowrap}td,th{padding:9px 12px}td{border-bottom:1px solid var(--border);vertical-align:middle}tbody tr:nth-child(2n) td{background:#0f172a73}tbody tr:hover td{background:var(--bg-card-hover)}tr.row-alert td{background:#f43f5e0f!important}tr.row-alert td:first-child{box-shadow:inset 2px 0 0 var(--red)}tr.row-selected td{background:#06b6d412!important}tr.row-selected td:first-child{box-shadow:inset 2px 0 0 var(--accent)}.table-foot{color:var(--text-faint);display:flex;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;gap:12px;justify-content:space-between;padding-top:12px}.btn,.table-foot{align-items:center}.btn{background:#1e293b66;border:1px solid transparent;border-color:var(--border-strong);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;display:inline-flex;font-family:inherit;font-size:12px;font-weight:600;gap:6px;height:32px;justify-content:center;padding:0 14px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}.btn svg{height:14px;width:14px}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);border-color:var(--accent);color:#0b0f19}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--glow)}.btn-danger{background:#4c051999;border-color:var(--red);color:#fecdd3}.btn-danger:hover{background:#881337b3;box-shadow:0 0 10px #f43f5e4d}.btn-sm{font-size:11px;height:26px;padding:0 10px}.btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.45}.btn-outline{background:transparent;border:1px solid var(--border-strong);color:var(--text)}.btn-outline:hover{border-color:var(--accent);color:var(--accent-hover)}.btn-secondary{background:#1e293b66;border-color:var(--border-strong);color:var(--text)}.btn-secondary:hover{background:var(--bg-elevated)}.icon-btn{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text-faint);cursor:pointer;display:inline-grid;height:26px;place-items:center;width:26px}.icon-btn svg{height:14px;width:14px}.icon-btn:hover{background:var(--bg-input);border-color:var(--border-strong);color:var(--accent-hover)}.icon-btn.danger:hover{border-color:#f43f5e80;color:var(--red)}.seg{border:1px solid var(--border-strong);border-radius:var(--radius-sm);display:inline-flex;overflow:hidden}.seg button{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-family:var(--font-mono);font-size:11px;height:26px;padding:0 10px}.seg button+button{border-left:1px solid var(--border-strong)}.seg button.active{background:var(--accent-soft);color:var(--accent-hover)}.form-group{margin-bottom:14px}.form-group label{color:var(--text-faint);display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}.form-group input,.form-group select,.form-group textarea,.form-input{background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;font-size:13px;padding:8px 12px;transition:border-color .15s,box-shadow .15s;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}.form-group input[type=checkbox]{accent-color:var(--accent);margin-right:6px;vertical-align:middle;width:auto}.form-group select option{background:var(--bg-card);color:var(--text)}input,select,textarea{color-scheme:dark}.badge{align-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-dim);display:inline-flex;font-family:var(--font-mono);font-size:10px;font-weight:500;gap:5px;height:20px;letter-spacing:.04em;padding:0 7px;text-transform:uppercase;white-space:nowrap}.badge-green{background:#064e3b59;border-color:#10b9818c;color:#34d399}.badge-red{background:#88133759;border-color:#f43f5e99;color:#fb7185}.badge-yellow{background:#78350f59;border-color:#f59e0b8c;color:#fbbf24}.badge-blue{background:#164e6366;border-color:#06b6d48c;color:#67e8f9}.mono{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums slashed-zero;padding:1px 6px}td.mono{background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#030712b3;display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:100}.modal{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);max-height:calc(100vh - 32px);max-width:560px;min-width:min(420px,100%);overflow-y:auto;padding:24px}.modal h2{font-size:16px;font-weight:600;margin-bottom:18px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}.toast-container{display:flex;flex-direction:column;gap:8px;position:fixed;right:16px;top:16px;z-index:200}.toast{animation:slideIn .2s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid;border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:12px;font-weight:500;padding:10px 16px}.toast-success{background:#064e3be6;border-color:var(--green);color:#d1fae5}.toast-error{background:#4c0519eb;border-color:var(--red);color:#fecdd3}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.key-detail{background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;line-height:1.8;margin-top:12px;padding:14px;word-break:break-all}.toolbar{flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:14px}.login-container,.toolbar{align-items:center;display:flex}.login-container{background:radial-gradient(ellipse at 20% 0,rgba(6,182,212,.12),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(16,185,129,.08),transparent 45%),var(--bg);justify-content:center;min-height:100vh;padding:20px}.login-box{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#111827cc;border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);max-width:100%;padding:36px;position:relative;text-align:center;width:400px}.login-box h1{color:var(--text);font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}.login-box p{color:var(--text-dim);font-size:13px;margin-bottom:24px}.empty-state{color:var(--text-faint);padding:40px 20px;text-align:center}.empty-state p{font-size:13px}.chart-container{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;padding:18px;position:relative}.chart-container h3{color:var(--text);font-size:14px;font-weight:600;margin-bottom:14px}.charts-row{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-bottom:16px}@media(max-width:1000px){.charts-row{grid-template-columns:1fr}}.legend{color:var(--text-dim);display:flex;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;gap:14px}.legend i{border-radius:2px;display:inline-block;height:2px;margin-right:6px;vertical-align:middle;width:10px}.legend i.dash{background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px)!important;height:2px}.bar-chart{align-items:flex-end;border-bottom:1px solid var(--border);display:flex;gap:8px;height:200px;padding:16px 0}.bar-chart .bar{background:linear-gradient(180deg,var(--accent),rgba(6,182,212,.25));border-radius:3px 3px 0 0;cursor:default;flex:1;min-width:20px;position:relative;transition:height .3s}.bar-chart .bar:hover{background:var(--accent-hover)}.bar-chart .bar-label{bottom:-24px;color:var(--text-faint)}.bar-chart .bar-label,.bar-chart .bar-value{font-family:var(--font-mono);font-size:10px;left:50%;position:absolute;transform:translate(-50%);white-space:nowrap}.bar-chart .bar-value{color:var(--text);top:-18px}.pie-chart{border-radius:50%;flex-shrink:0;height:160px;position:relative;width:160px}.pie-chart-wrapper{align-items:center;display:flex;gap:24px;padding:12px 0}.pie-legend{display:flex;flex-direction:column;gap:8px}.pie-legend-item{align-items:center;display:flex;font-size:12px;gap:8px}.pie-legend-dot{border-radius:2px;flex-shrink:0;height:8px;width:8px}.toggle{cursor:pointer;display:inline-block;height:20px;position:relative;width:38px}.toggle input{height:0;opacity:0;width:0}.toggle-slider{background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:20px;inset:0;position:absolute;transition:background .2s,border-color .2s}.toggle-slider:before{background:var(--text-dim);border-radius:50%;content:"";height:14px;left:2px;position:absolute;top:2px;transition:transform .2s,background .2s;width:14px}.toggle input:checked+.toggle-slider{background:#06b6d440;border-color:var(--accent)}.toggle input:checked+.toggle-slider:before{background:var(--accent-hover);transform:translate(18px)}.setting-row{align-items:center;border-bottom:1px solid var(--border);display:flex;gap:12px;justify-content:space-between;padding:12px 0}.setting-row:last-child{border-bottom:none}.setting-label{font-weight:500}.setting-label small{color:var(--text-faint);display:block;font-size:12px;font-weight:400;margin-top:2px}.setting-value{color:var(--text-dim);font-family:var(--font-mono);font-size:12px}.checkbox-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.checkbox-grid label{align-items:center;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-sans);font-size:13px;font-weight:400;gap:6px;letter-spacing:0;text-transform:none}.checkbox-grid label input[type=checkbox]{accent-color:var(--accent);height:14px;width:14px}@media(max-width:900px){:root{--sidebar-w:0px}.sidebar{display:none}.main-content{padding:16px}.topbar{padding:0 16px}}