:root{--bg:#0c0a09;--bg-raise:#141010;--bg-card:#191412;--bg-hover:#201916;--border:#2b221d;--border-strong:#3d2f26;--text:#f3ede7;--muted:#a5948a;--faint:#6f625b;--accent:#e8590c;--accent-bright:#ff7a2f;--accent-soft:#e8590c24;--green:#37b24d;--green-soft:#37b24d24;--red:#e03131;--red-soft:#e0313124;--blue:#4c6ef5;--amber:#f59f00;--radius:14px;--radius-sm:10px;--font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;--mono:"Cascadia Code", "JetBrains Mono", Consolas, monospace}*{box-sizing:border-box}html{background:var(--bg);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--font);color:var(--text);background:radial-gradient(1100px 500px at 85% -10%,#e8590c12,transparent 60%),var(--bg);min-height:100vh;margin:0;font-size:14.5px;line-height:1.5}a{color:var(--accent-bright);text-decoration:none}::selection{background:var(--accent-soft)}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--border);background:var(--bg-raise);flex-direction:column;flex-shrink:0;gap:4px;width:224px;height:100vh;padding:20px 12px;display:flex;position:sticky;top:0;overflow-y:auto}.brand{align-items:center;gap:10px;padding:4px 10px 18px;display:flex}.brand-mark{background:linear-gradient(135deg,var(--accent),#b23c05);border-radius:8px;flex-shrink:0;width:26px;height:26px;position:relative}.brand-mark:after{content:"";background:var(--bg-card);border-radius:3px;position:absolute;inset:7px 6px 6px}.brand-name{letter-spacing:.02em;font-size:15px;font-weight:700}.brand-sub{color:var(--faint);margin-top:-2px;font-size:11px;display:block}.nav-link{border-radius:var(--radius-sm);color:var(--muted);align-items:center;gap:10px;padding:8px 10px;font-weight:500;transition:background .15s,color .15s;display:flex}.nav-link:hover{background:var(--bg-hover);color:var(--text)}.nav-link.router-link-active{background:var(--accent-soft);color:var(--accent-bright)}.nav-link svg{opacity:.9;flex-shrink:0;width:16px;height:16px}.nav-section{text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:16px 10px 6px;font-size:10.5px}.sidebar-footer{border-top:1px solid var(--border);color:var(--faint);margin-top:auto;padding:12px 10px 0;font-size:11.5px}.main{flex-direction:column;flex:1;min-width:0}.content,.main,.topbar{display:flex}.topbar{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5;background:#0c0a09db;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px;position:sticky;top:0}.content{flex-direction:column;gap:20px;width:100%;max-width:1280px;margin:0 auto;padding:24px 28px 48px}.page-head h1{margin:0;font-size:21px;font-weight:700}.page-head p{color:var(--muted);margin:4px 0 0;font-size:13px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card-title{margin:0;font-size:14.5px;font-weight:650}.card-sub{color:var(--muted);margin:3px 0 12px;font-size:12.5px}.grid-kpi{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}.grid-2,.grid-chart-row,.grid-kpi{gap:14px;display:grid}.grid-2{grid-template-columns:1fr 1fr}.grid-chart-row{grid-template-columns:2fr 1fr}@media (width<=1080px){.grid-2,.grid-chart-row{grid-template-columns:1fr}}@media (width<=860px){.app-shell{flex-direction:column}.sidebar{flex-flow:wrap;align-items:center;width:100%;height:auto;padding:10px 12px;position:static}.nav-section,.sidebar-footer{display:none}.content{padding:16px 14px 40px}}.kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:3px;padding:14px 16px;display:flex}.kpi-label{color:var(--muted);font-size:12px;font-weight:550}.kpi-value{font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1.15}.kpi-hint{color:var(--faint);font-size:11.5px}.kpi.good .kpi-value{color:var(--green)}.kpi.bad .kpi-value{color:var(--red)}.kpi.accent .kpi-value{color:var(--accent-bright)}.chart{width:100%;height:300px}.chart-sm{height:230px}.chart-skeleton{border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--bg-card) 40%,var(--bg-hover) 50%,var(--bg-card) 60%);background-size:200% 100%;width:100%;height:300px;animation:1.4s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.table-wrap{overflow-x:auto}table.data{border-collapse:collapse;width:100%;font-size:13px}table.data th{text-align:left;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);border-bottom:1px solid var(--border-strong);white-space:nowrap;padding:8px 10px;font-size:11px;font-weight:600}table.data td{border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;vertical-align:top;padding:9px 10px}table.data tr:hover td{background:var(--bg-hover)}table.data td.num,table.data th.num{text-align:right}.mono{font-family:var(--mono);font-size:12px}.chip{border:1px solid var(--border-strong);color:var(--muted);white-space:nowrap;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600;display:inline-block}.chip.client{color:var(--accent-bright);background:var(--accent-soft);border-color:#e8590c66}.chip.server{color:var(--blue);background:#4c6ef51f;border-color:#4c6ef566}.chip.good{color:var(--green);background:var(--green-soft);border-color:#37b24d66}.chip.bad{color:var(--red);background:var(--red-soft);border-color:#e0313166}.range-tabs{border:1px solid var(--border-strong);border-radius:999px;display:inline-flex;overflow:hidden}.range-tabs button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;padding:6px 14px;font-size:12.5px;font-weight:600}.range-tabs button+button{border-left:1px solid var(--border-strong)}.range-tabs button.active{background:var(--accent-soft);color:var(--accent-bright)}.btn{border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text);border-radius:var(--radius-sm);font:inherit;cursor:pointer;align-items:center;gap:8px;padding:8px 16px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn:hover{background:var(--bg-hover)}.btn.primary,.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-bright)}input.input,select.input{background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--radius-sm);font:inherit;padding:8px 12px;font-size:13px}input.input:focus,select.input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}.filters{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.login-wrap{place-items:center;min-height:100vh;padding:20px;display:grid}.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;flex-direction:column;gap:14px;width:100%;max-width:380px;padding:32px 30px;display:flex;box-shadow:0 24px 70px #00000073}.login-card h1{margin:6px 0 0;font-size:19px}.login-error{color:var(--red);background:var(--red-soft);border-radius:var(--radius-sm);border:1px solid #e0313159;padding:9px 12px;font-size:13px}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--muted);font-size:12px;font-weight:600}.empty{padding:34px 10px;font-size:13px}.empty,.loading{color:var(--faint);text-align:center}.loading{padding:20px}.error-box{background:var(--red-soft);color:#ffb3b3;border-radius:var(--radius-sm);border:1px solid #e0313166;padding:12px 16px;font-size:13px}