:root{color:#e2e8f0;font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#020617;font-family:Avenir Next,Nunito Sans,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{color:#e2e8f0;background:radial-gradient(circle at 20% -10%,#1e293b 0%,#0000 45%),radial-gradient(circle at 80% 10%,#0f172a 0%,#0000 40%),#020617;min-width:320px;margin:0}button,select{font-family:inherit}#root{width:100%}.page-root{flex-direction:column;gap:12px;max-width:1280px;margin:0 auto;padding:18px;display:flex}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:16px;display:flex}.page-header h1{color:#f8fafc;margin:0;font-size:28px;line-height:1.1}.page-header p{color:#94a3b8;margin:6px 0 0}.header-status{color:#94a3b8;flex-wrap:wrap;align-items:center;gap:10px;max-width:620px;font-size:12px;display:flex}.status-chip{text-overflow:ellipsis;white-space:nowrap;border:1px solid #0000;border-radius:8px;align-items:center;max-width:420px;padding:6px 12px;font-size:12px;display:inline-flex;overflow:hidden}.status-chip.normal{color:#86efac;background:#052e16;border-color:#166534}.status-chip.error{color:#fca5a5;background:#3f1d1d;border-color:#7f1d1d}.refresh-btn{color:#e2e8f0;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;display:inline-flex}.refresh-btn:hover{background:#1f2937}.refresh-btn svg{width:16px;height:16px}.refresh-btn.refreshing svg{animation:.8s linear infinite spin}.refresh-btn:disabled{cursor:not-allowed;opacity:.6}@keyframes spin{to{transform:rotate(360deg)}}.control-bar{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172acc;border:1px solid #334155;border-radius:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;padding:10px;display:grid}.control-bar label{color:#cbd5e1;flex-direction:column;gap:6px;font-size:13px;display:flex}.control-bar select{color:#e2e8f0;background:#0b1220;border:1px solid #475569;border-radius:8px;padding:8px}.time-window-control{min-width:180px}.time-window-badges,.option-badge-group{flex-wrap:wrap;gap:6px;display:flex}.time-window-badge,.option-badge{color:#cbd5e1;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:999px;justify-content:center;align-items:center;padding:6px 10px;font-size:12px;line-height:1;display:inline-flex}.time-window-badge:hover,.option-badge:hover{background:#1f2937}.time-window-badge.active,.option-badge.active{color:#f8fafc;background:#1e293b;border-color:#3b82f6}.time-window-badge:disabled,.option-badge:disabled{cursor:not-allowed;opacity:.65}.control-badge-control{min-width:180px}.tab-bar{flex-wrap:wrap;align-items:stretch;gap:8px;display:flex}.metrics-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.tab-item{color:#cbd5e1;cursor:pointer;background:#0f172a;border:1px solid #334155;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;line-height:1;display:inline-flex}.tab-item:hover{background:#1f2937}.tab-item.active{color:#f8fafc;background:#1e293b;border-color:#3b82f6}.tab-item:disabled{cursor:not-allowed;opacity:.65}.tab-badge{text-align:center;border:1px solid #475569;border-radius:999px;min-width:24px;padding:2px 6px;font-size:11px}.filters-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;display:grid}.filter-block{background:#0f172a;border:1px solid #334155;border-radius:10px;min-width:0;margin:0;padding:10px}.filter-block-title{justify-content:space-between;align-items:center;display:flex}.filter-block-title>legend,.filter-block-title>.filter-toggle{color:#e2e8f0;font-weight:600}.filter-block-title>legend{padding:0}.filter-toggle{color:#e2e8f0;cursor:pointer;background:#1e293b;border:1px solid #475569;border-radius:8px;padding:4px 10px;font-size:12px}.checkbox-group{gap:6px;max-height:112px;margin-top:8px;display:grid;overflow:auto}.checkbox-item{color:#cbd5e1;align-items:center;gap:8px;min-width:0;font-size:13px;display:flex}.checkbox-item span{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.status-inline{color:#94a3b8;margin:0;font-size:13px}.empty-text{color:#64748b;padding:4px 0;font-size:13px}.vpn-overlay{z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#020617d9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.vpn-overlay-card{text-align:center;background:#0f172a;border:1px solid #334155;border-radius:14px;width:min(460px,100%);padding:20px;box-shadow:0 16px 30px #00000073}.vpn-overlay-card h2{color:#f8fafc;margin:0 0 8px;font-size:22px}.vpn-overlay-card p{color:#cbd5e1;margin:0 0 14px;line-height:1.5}.vpn-refresh-btn{color:#f8fafc;cursor:pointer;background:#1d4ed8;border:1px solid #475569;border-radius:10px;padding:8px 14px}.vpn-refresh-btn:hover{background:#1e40af}.vpn-refresh-btn:disabled{cursor:not-allowed;opacity:.65}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;display:grid}.kpi-card{background:linear-gradient(#0f172a,#111827);border:1px solid #334155;border-radius:10px;min-width:0;padding:14px;overflow:hidden}.kpi-card h2{color:#94a3b8;overflow-wrap:anywhere;word-break:break-word;margin:0;font-size:14px;line-height:1.35}.kpi-card .kpi-value{color:#f1f5f9;overflow-wrap:anywhere;margin:10px 0 2px;font-size:26px;font-weight:700}.kpi-sub{color:#64748b;font-size:12px}.chart-grid{grid-template-columns:1fr;gap:12px;display:grid}.chart-card{background:#0f172a;border:1px solid #334155;border-radius:10px;min-width:0;padding:12px;overflow:hidden}.chart-card>header{justify-content:space-between;align-items:flex-start;gap:12px;min-width:0;margin-bottom:8px;display:flex}.chart-card h2{overflow-wrap:anywhere;word-break:break-word;color:#e2e8f0;min-width:0;margin:0;font-size:16px}.chart-card .muted{color:#64748b;margin:0;font-size:12px}.chart-body{min-width:0;height:260px}.empty-chart{color:#64748b;justify-content:center;align-items:center;height:260px;font-size:24px;display:flex}.chart-legend{flex-wrap:wrap;gap:8px;max-height:72px;margin-top:8px;padding-right:4px;display:flex;overflow:auto}.legend-item{color:#cbd5e1;background:#1e293b;border:1px solid #334155;border-radius:10px;align-items:flex-start;width:fit-content;max-width:250px;padding:4px 8px;display:inline-flex}.legend-swatch{border-radius:50%;flex:none;width:8px;height:8px;margin-right:6px}.legend-label{white-space:normal;overflow-wrap:anywhere;word-break:break-word;font-size:12px;line-height:1.3}.loading-text{color:#94a3b8;margin:0}.disclaimer{color:#64748b;word-break:break-all;margin:0;font-size:12px}.recharts-text,.recharts-label,.recharts-cartesian-axis-tick text{fill:#94a3b8!important}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:#1f2937}.recharts-tooltip-wrapper .recharts-default-tooltip{color:#e2e8f0!important;background:#111827!important;border-color:#334155!important}.recharts-default-tooltip .recharts-tooltip-label,.recharts-default-tooltip .recharts-tooltip-item-list{color:#e2e8f0!important}@media (width<=900px){.page-root{padding:14px}.page-header h1{font-size:22px}.header-status{width:100%}}