:root{--bg: #0b0f19;--surface: #131826;--surface-alt: #1a2030;--surface-hover: #1e2534;--border: #232b3b;--border-strong: #2f3a4f;--text: #e7ecf3;--text-muted: #94a3b8;--text-subtle: #64748b;--accent: #6366f1;--accent-hover: #818cf8;--accent-soft: rgba(99, 102, 241, .14);--p1: #f87171;--p1-soft: rgba(248, 113, 113, .13);--p2: #fbbf24;--p2-soft: rgba(251, 191, 36, .13);--p3: #38bdf8;--p3-soft: rgba(56, 189, 248, .13);--p4: #94a3b8;--p4-soft: rgba(148, 163, 184, .12);--ok: #22c55e;--ok-soft: rgba(34, 197, 94, .13);--fatal: #e879f9;--radius-sm: 7px;--radius: 11px;--radius-lg: 16px;--shadow-sm: none;--shadow: none;--ring: 0 0 0 3px rgba(99, 102, 241, .35);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sidebar-w: 244px;--topbar-h: 64px;--content-max: none;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}:root[data-theme=light]{--bg: #f6f8fb;--surface: #ffffff;--surface-alt: #f1f5f9;--surface-hover: #f8fafc;--border: #e2e8f0;--border-strong: #cbd5e1;--text: #0f172a;--text-muted: #5a6b82;--text-subtle: #94a3b8;--accent: #4f46e5;--accent-hover: #4338ca;--accent-soft: #eef2ff;--p1: #dc2626;--p1-soft: #fee2e2;--p2: #b45309;--p2-soft: #fef3c7;--p3: #0284c7;--p3-soft: #e0f2fe;--p4: #64748b;--p4-soft: #f1f5f9;--ok: #15803d;--ok-soft: #dcfce7;--fatal: #a21caf;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);--shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.011em}:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.icon{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-sm{width:14px;height:14px}.icon-lg{width:20px;height:20px}.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:var(--sp-5) var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5);position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:block;padding:0 var(--sp-2)}.brand-logo{height:26px;width:auto;display:block}.brand-logo--light{display:none}:root[data-theme=light] .brand-logo--dark{display:none}:root[data-theme=light] .brand-logo--light{display:block}.brand-sub{font-size:11.5px;color:var(--text-subtle);margin-top:5px;letter-spacing:.01em}.nav{display:flex;flex-direction:column;gap:2px}.nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);padding:0 10px var(--sp-2)}.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:500;font-size:13.5px;position:relative;transition:background .15s,color .15s}.nav a:hover{background:var(--surface-alt);color:var(--text)}.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.nav a.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}.nav a .icon{opacity:.85}.nav .count{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;font-weight:650;color:var(--p1);background:var(--p1-soft);padding:1px 7px;border-radius:999px}.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-3)}.user-chip{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);background:var(--surface-alt)}.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:650;font-size:12px}.user-name{font-size:12.5px;font-weight:600;line-height:1.3}.user-role{font-size:11px;color:var(--text-subtle)}.main{display:flex;flex-direction:column;min-width:0}.topbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;min-height:var(--topbar-h);padding:var(--sp-3) var(--sp-6);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(140%) blur(10px);position:sticky;top:0;z-index:20}.topbar h1{font-size:20px;font-weight:650}.topbar .sub{font-size:13px;color:var(--text-muted);margin-top:1px}.spacer{flex:1}.content{padding:var(--sp-5) var(--sp-6) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5);width:100%;max-width:var(--content-max);margin:0 auto}@media(max-width:1080px){.topbar,.content{padding-left:var(--sp-5);padding-right:var(--sp-5)}}@media(max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;align-items:center;gap:var(--sp-4);overflow-x:auto;padding:var(--sp-3) var(--sp-4);border-right:none;border-bottom:1px solid var(--border)}.sidebar .nav{flex-direction:row}.nav a.active:before{display:none}.nav-label,.brand-sub,.sidebar-foot .user-chip{display:none}.sidebar-foot{margin-top:0;flex-direction:row}.topbar{padding:var(--sp-3) var(--sp-4)}.content{padding:var(--sp-4) var(--sp-4) var(--sp-6);gap:var(--sp-4)}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;gap:10px;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}.card-head h3{font-size:15px;font-weight:620}.card-head .hint{font-size:12.5px;color:var(--text-subtle)}.card-body{padding:var(--sp-5)}.grid{display:grid;gap:var(--sp-4)}.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}.grid-2{grid-template-columns:1.75fr 1fr;gap:var(--sp-5)}.grid-2b{grid-template-columns:1fr 1fr;gap:var(--sp-5)}.grid-3{grid-template-columns:2.1fr 1fr 1.15fr;gap:var(--sp-5)}@media(max-width:1500px){.grid-3{grid-template-columns:1.6fr 1fr}}@media(max-width:1100px){.grid-2,.grid-2b,.grid-3{grid-template-columns:1fr}}.kpi{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px}.kpi-top{display:flex;align-items:flex-start;gap:var(--sp-3)}.kpi .label{font-size:12.5px;font-weight:500;color:var(--text-muted);letter-spacing:.01em;flex:1}.kpi-icon{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--surface-alt);color:var(--text-muted)}.kpi .value{font-size:30px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.kpi .foot{font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi.is-p1 .value{color:var(--p1)}.kpi.is-p1 .kpi-icon{background:var(--p1-soft);color:var(--p1)}.kpi.is-p2 .value{color:var(--p2)}.kpi.is-p2 .kpi-icon{background:var(--p2-soft);color:var(--p2)}.kpi.is-ok .value{color:var(--ok)}.kpi.is-ok .kpi-icon{background:var(--ok-soft);color:var(--ok)}.delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:620;padding:2px 7px;border-radius:999px;font-variant-numeric:tabular-nums}.delta-up{color:var(--p2);background:var(--p2-soft)}.delta-down{color:var(--ok);background:var(--ok-soft)}.delta-flat{color:var(--text-muted);background:var(--surface-alt)}.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.5}.badge-P1{color:var(--p1);background:var(--p1-soft);border-color:color-mix(in srgb,var(--p1) 26%,transparent)}.badge-P2{color:var(--p2);background:var(--p2-soft);border-color:color-mix(in srgb,var(--p2) 26%,transparent)}.badge-P3{color:var(--p3);background:var(--p3-soft);border-color:color-mix(in srgb,var(--p3) 26%,transparent)}.badge-P4{color:var(--p4);background:var(--p4-soft);border-color:color-mix(in srgb,var(--p4) 26%,transparent)}.badge-soft{color:var(--text-muted);background:var(--surface-alt);border-color:var(--border)}.badge-ok{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 26%,transparent)}.lvl{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em}.lvl-FATAL{color:var(--fatal)}.lvl-ERROR{color:var(--p1)}.lvl-WARNING{color:var(--p2)}.lvl-INFO{color:var(--p3)}.lvl-DEBUG{color:var(--text-subtle)}.tag{font-size:11px;padding:1.5px 7px;border-radius:5px;background:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);font-family:var(--mono)}select,input[type=search],input[type=text],input[type=password],textarea{background:var(--surface-alt);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 11px;font-size:13px;font-family:inherit;outline:none;min-width:0;transition:border-color .15s,box-shadow .15s}select:hover,input:hover,textarea:hover{border-color:var(--border-strong)}select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}input::placeholder,textarea::placeholder{color:var(--text-subtle)}input[type=search]{min-width:230px}input:disabled,select:disabled{opacity:.55;cursor:not-allowed}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:var(--surface-alt);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 13px;font-size:13px;font-weight:550;font-family:inherit;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .06s}.btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--surface-alt);color:var(--text);border-color:var(--border)}.btn-danger:hover{color:var(--p1);border-color:color-mix(in srgb,var(--p1) 40%,transparent)}.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);font-weight:600;padding:11px var(--sp-4);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}tbody td{padding:13px var(--sp-4);border-bottom:1px solid var(--border);vertical-align:top}tbody tr:last-child td{border-bottom:none}tbody tr.clickable{cursor:pointer;transition:background .12s}tbody tr.clickable:hover{background:var(--surface-alt)}.cell-msg{max-width:540px}.cell-msg .title{font-weight:570}.cell-msg .meta{color:var(--text-subtle);font-size:12px;margin-top:3px}.num{font-variant-numeric:tabular-nums;text-align:right}.mono{font-family:var(--mono);font-size:12px}.meter{height:6px;border-radius:999px;background:var(--surface-alt);overflow:hidden}.meter>span{display:block;height:100%;border-radius:999px;transition:width .4s ease}.stack-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-alt)}.stack-bar>span{display:block;height:100%}.legend{display:flex;flex-wrap:wrap;gap:var(--sp-4);font-size:12px;color:var(--text-muted)}.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}.drawer-backdrop{position:fixed;inset:0;background:#02061099;backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;height:100vh;width:min(600px,100vw);background:var(--surface);border-left:1px solid var(--border);z-index:61;transform:translate(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);overflow-y:auto;display:flex;flex-direction:column}.drawer.open{transform:none}.drawer-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2}.drawer-body{padding:var(--sp-5) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);font-weight:600;margin-bottom:var(--sp-2)}pre.code{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 13px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--text-muted);margin:0;white-space:pre-wrap;word-break:break-word}ul.reasons{margin:0;padding-left:18px;color:var(--text-muted);font-size:13px}ul.reasons li{margin-bottom:5px}.kv{display:grid;grid-template-columns:132px 1fr;gap:7px var(--sp-3);font-size:13px}.kv dt{color:var(--text-subtle)}.kv dd{margin:0}.empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--text-subtle);font-size:13px}.skeleton{background:linear-gradient(90deg,var(--surface-alt) 25%,var(--border) 50%,var(--surface-alt) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm);height:12px}@keyframes shimmer{to{background-position:-200% 0}}.status-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted)}.status-pill i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);flex:none}.status-pill.offline i{background:var(--p1);box-shadow:0 0 0 3px var(--p1-soft)}.banner{display:flex;gap:10px;align-items:flex-start;padding:12px var(--sp-4);border-radius:var(--radius-sm);background:var(--p1-soft);border:1px solid color-mix(in srgb,var(--p1) 30%,transparent);color:var(--text);font-size:13px;line-height:1.55}.live-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 0 var(--ok-soft);animation:pulse 2s ease-out infinite}.live-dot.is-offline{background:var(--p4);animation:none}.live-dot.is-connecting{background:var(--p2);animation:pulse 1s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.stream{max-height:420px;overflow-y:auto;overflow-x:hidden}.stream-row{display:grid;grid-template-columns:62px 58px 1fr;gap:var(--sp-2);align-items:baseline;padding:8px var(--sp-4);border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}.stream-row:hover{background:var(--surface-alt)}.stream-row .time{font-family:var(--mono);font-size:11px;color:var(--text-subtle)}.stream-row .body{min-width:0}.stream-row .msg{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-row .meta{display:block;font-size:11px;color:var(--text-subtle);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-row.is-new{animation:flash-in .9s ease-out}@keyframes flash-in{0%{background:var(--accent-soft);transform:translateY(-3px);opacity:.4}to{background:transparent;transform:none;opacity:1}}.stream-row.is-p1{box-shadow:inset 2px 0 0 var(--p1)}.stream-row.is-p2{box-shadow:inset 2px 0 0 var(--p2)}.counter{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--text-muted);background:var(--surface-alt);padding:2px 8px;border-radius:999px}.uptime-strip{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.uptime-item{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface-alt);font-size:12.5px;line-height:1.35;white-space:nowrap;transition:border-color .15s,transform .06s}.uptime-item:hover{border-color:var(--border-strong)}.uptime-item:active{transform:translateY(1px)}.uptime-item.is-down{border-color:color-mix(in srgb,var(--p1) 50%,transparent);background:var(--p1-soft)}.uptime-item.is-degraded{border-color:color-mix(in srgb,var(--p2) 45%,transparent)}.uptime-dot{width:8px;height:8px;border-radius:50%;flex:none}.uptime-item.is-down .uptime-dot{animation:pulse 1.6s ease-out infinite}.uptime-name{font-weight:600}.uptime-meta{color:var(--text-subtle);font-variant-numeric:tabular-nums;font-size:11.5px}.uptime-item.is-down .uptime-meta{color:var(--p1);font-weight:600}:root[data-focus] .sidebar{display:none}:root[data-focus] .shell{grid-template-columns:1fr}:root[data-focus] .topbar{padding-left:var(--sp-5)}.btn-focus.is-active{background:var(--accent);border-color:var(--accent);color:#fff}