:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a1020;--panel:#0f172ab3;--panel-border:#3b82f62e;--accent:#3b82f6;--cyan:#22d3ee;--text:#e2e8f0;--muted:#94a3b8;--good:#22c55e;--warn:#f59e0b;--bad:#ef4444}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}body{background:radial-gradient(1200px 500px at 20% -10%, #3b82f61f, transparent 60%), radial-gradient(900px 500px at 90% 0%, #22d3ee14, transparent 55%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;background-attachment:fixed;font-family:Microsoft YaHei,-apple-system,Segoe UI,PingFang SC,Helvetica,Arial,sans-serif}a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}.card{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;padding:18px;box-shadow:0 8px 30px #00000040}.card-title{color:#cbd5e1;align-items:center;gap:8px;margin:0 0 14px;font-size:15px;font-weight:700;display:flex}.card-title .dot{background:var(--accent);width:6px;height:6px;box-shadow:0 0 8px var(--accent);border-radius:50%}.app{max-width:1360px;margin:0 auto;padding:24px 20px 60px}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.app-header h1{background:linear-gradient(90deg,#60a5fa,#22d3ee);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:22px}.app-header .sub{color:var(--muted);font-size:13px}.status{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.status .live{background:var(--good);width:8px;height:8px;box-shadow:0 0 8px var(--good);border-radius:50%;animation:2s infinite pulse}.status .dead{background:var(--bad);border-radius:50%;width:8px;height:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.btn{color:#93c5fd;cursor:pointer;background:#3b82f626;border:1px solid #3b82f666;border-radius:8px;padding:7px 14px;font-size:13px;transition:all .15s}.btn:hover{background:#3b82f647}.config-banner{color:#fcd34d;background:#f59e0b14;border:1px solid #f59e0b66;border-radius:12px;margin-bottom:20px;padding:14px 18px;font-size:14px;line-height:1.6}.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:18px;display:grid}.kpi{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px;position:relative;overflow:hidden}.kpi .label{color:var(--muted);margin-bottom:8px;font-size:12px}.kpi .value{font-size:26px;font-weight:800;line-height:1.1}.kpi .value .unit{color:var(--muted);margin-left:2px;font-size:14px;font-weight:500}.kpi .foot{color:var(--muted);margin-top:6px;font-size:11px}.kpi.warn .value{color:#f87171}.kpi.accent .value{color:#60a5fa}.kpi.good .value{color:#4ade80}.chart-box{width:100%;height:280px}.chart-box.tall{height:320px}.grid-2{grid-template-columns:1fr 1fr;gap:18px;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:18px;display:grid}@media (width<=980px){.grid-2,.grid-3{grid-template-columns:1fr}}.alert-list{flex-direction:column;gap:12px;display:flex}.alert-item{border:1px solid var(--panel-border);background:#0f172a80;border-radius:10px;align-items:center;gap:12px;padding:12px 14px;display:flex}.alert-item .tag{border-radius:999px;flex-shrink:0;padding:3px 10px;font-size:12px;font-weight:700}.alert-item.triggered{border-color:#ef444480}.alert-item.triggered .tag{color:#f87171;background:#ef44442e}.alert-item.ok .tag{color:#4ade80;background:#22c55e29}.alert-item .info{flex:1;font-size:13px;line-height:1.5}.alert-item .info .strong{color:#e2e8f0;font-weight:700}.rank-list{flex-direction:column;gap:8px;display:flex}.rank-item{align-items:center;gap:10px;font-size:13px;display:flex}.rank-item .rank{color:#93c5fd;background:#3b82f626;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:flex}.rank-item .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.rank-item .bar-wrap{background:#94a3b826;border-radius:999px;width:90px;height:6px;overflow:hidden}.rank-item .bar{background:linear-gradient(90deg,#3b82f6,#22d3ee);border-radius:999px;height:100%}.rank-item .num{color:var(--muted);text-align:right;flex-shrink:0;width:56px;font-size:12px}.hot-table{border-collapse:collapse;width:100%;font-size:13px}.hot-table th,.hot-table td{text-align:left;border-bottom:1px solid #94a3b81f;padding:8px 10px}.hot-table th{color:var(--muted);font-size:12px;font-weight:600}.hot-table td.title{text-overflow:ellipsis;white-space:nowrap;max-width:320px;overflow:hidden}.hot-table .cat{color:#93c5fd;background:#3b82f61f;border-radius:6px;padding:2px 8px;font-size:11px;display:inline-block}.hot-table .sent-bad{color:#f87171}.hot-table .sent-good{color:#4ade80}.hot-table .sent-neutral{color:#94a3b8}.matrix-wrap{align-items:stretch;gap:18px;display:flex}.matrix-chart{flex:1;min-width:0}.sla-panel{flex-shrink:0;width:240px;font-size:13px}.sla-item{border-bottom:1px solid #94a3b81f;justify-content:space-between;padding:8px 0;display:flex}.level-badge{border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700;display:inline-block}.level-高{color:#f87171;background:#ef44442e}.level-中{color:#fbbf24;background:#f59e0b2e}.level-低{color:#4ade80;background:#22c55e29}.recharts-default-tooltip{color:#e2e8f0;background:#0f172a!important;border:1px solid #3b82f64d!important;border-radius:8px!important}.footer{text-align:center;color:#475569;margin-top:30px;font-size:12px}