:root{--accent: #4f46e5;--accent-600: #4338ca;--accent-weak: #eef2ff;--accent-ring: rgba(79, 70, 229, .35);--bg: #f4f5f7;--surface: #ffffff;--surface-2: #fafbfc;--surface-3: #f1f2f4;--border: #e3e6ea;--border-strong: #cdd2d9;--text: #17191c;--text-2: #3d4149;--muted: #6b7280;--muted-2: #9aa1ac;--side-bg: #14161c;--side-bg-2: #1b1e26;--side-text: #c7ccd6;--side-muted: #7c8494;--side-active: #262a35;--side-accent: #8b93ff;--ok: #16a34a;--ok-bg: #e7f6ec;--warn: #d97706;--warn-bg: #fdf1e3;--err: #dc2626;--err-bg: #fdeaea;--info: #2563eb;--info-bg: #e8f0fe;--neutral: #6b7280;--neutral-bg: #eef0f2;--r-sm: 5px;--r: 8px;--r-lg: 12px;--r-pill: 999px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);--shadow: 0 4px 12px rgba(16, 24, 40, .08);--shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);--sidebar-w: 244px;--topbar-h: 56px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{height:100%}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"side top" "side main";height:100vh}.app.collapsed{--sidebar-w: 64px}.sidebar{grid-area:side;background:var(--side-bg);color:var(--side-text);display:flex;flex-direction:column;overflow:hidden}.brand{height:var(--topbar-h);display:flex;align-items:center;gap:10px;padding:0 18px;color:#fff;font-weight:700;letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}.brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent) 0%,#7c83ff 100%);display:grid;place-items:center;color:#fff;font-size:14px;flex:0 0 auto;box-shadow:inset 0 0 0 1px #ffffff26}.app.collapsed .brand span{display:none}.nav{flex:1;overflow-y:auto;padding:10px 8px 20px}.nav::-webkit-scrollbar{width:8px}.nav::-webkit-scrollbar-thumb{background:#2b2f3a;border-radius:8px}.nav-group{margin-top:14px}.nav-group>.nav-label{color:var(--side-muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px}.app.collapsed .nav-label{visibility:hidden;height:8px}.nav-item{display:flex;align-items:center;gap:11px;padding:8px 12px;margin:1px 0;border-radius:var(--r-sm);color:var(--side-text);cursor:pointer;white-space:nowrap;font-weight:500}.nav-item:hover{background:var(--side-bg-2);text-decoration:none}.nav-item.active{background:var(--side-active);color:#fff;font-weight:600}.nav-item.active .nav-ico{color:var(--side-accent)}.nav-ico{width:18px;height:18px;flex:0 0 auto;color:var(--side-muted);display:grid;place-items:center}.app.collapsed .nav-item span{display:none}.nav-item .badge{margin-left:auto}.topbar{grid-area:top;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 20px}.topbar .collapse{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;display:grid;place-items:center}.topbar .collapse:hover{background:var(--surface-3);color:var(--text)}.topbar .crumbs{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;min-width:0}.topbar .crumbs strong{color:var(--text);font-weight:600}.topbar .spacer{flex:1}.topbar .search{position:relative}.topbar .search input{width:260px;max-width:32vw;padding:7px 10px 7px 32px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2);font:inherit;font-size:13px;color:var(--text)}.topbar .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);background:var(--surface)}.topbar .search .si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted-2)}.env-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent-600);border:1px solid #dfe3ff}.env-chip.staging{background:var(--warn-bg);color:var(--warn);border-color:#f3dcc0}.iconbtn{border:1px solid var(--border);background:var(--surface);color:var(--text-2);width:34px;height:34px;border-radius:var(--r);cursor:pointer;display:grid;place-items:center}.iconbtn:hover{background:var(--surface-3)}.usermenu{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px 4px 4px;border-radius:var(--r)}.usermenu:hover{background:var(--surface-3)}.usermenu .who{font-size:12.5px;line-height:1.2}.usermenu .who small{color:var(--muted);font-size:11px}.main{grid-area:main;overflow-y:auto}.page{padding:22px 28px 60px;max-width:1680px;margin:0 auto}.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}.page-title{font-size:21px;font-weight:680}.page-sub{color:var(--muted);font-size:13px;margin-top:3px}.page-actions{display:flex;gap:9px;align-items:center}.avatar{width:32px;height:32px;border-radius:var(--r-pill);background:var(--accent-weak);color:var(--accent-600);display:grid;place-items:center;font-weight:650;font-size:12.5px;flex:0 0 auto;text-transform:uppercase}.avatar.lg{width:52px;height:52px;font-size:18px}.avatar.sq{border-radius:var(--r)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px 16px;box-shadow:var(--shadow-sm);position:relative;transition:box-shadow .12s,transform .12s}.kpi.clickable{cursor:pointer}.kpi.clickable:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.kpi .kpi-label{color:var(--muted);font-size:12px;font-weight:550;display:flex;align-items:center;gap:7px}.kpi .kpi-val{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:6px;line-height:1.1}.kpi .kpi-val small{font-size:15px;font-weight:600;color:var(--muted)}.kpi .kpi-foot{margin-top:5px;font-size:12px;color:var(--muted)}.kpi .kpi-ico{position:absolute;top:14px;right:14px;color:var(--muted-2)}.kpi.accent{border-left:3px solid var(--accent)}.kpi.ok-l{border-left:3px solid var(--ok)}.kpi.warn-l{border-left:3px solid var(--warn)}.kpi.err-l{border-left:3px solid var(--err)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}.panel-head h3{font-size:14.5px;font-weight:640;display:flex;align-items:center;gap:8px}.panel-head .sub{color:var(--muted);font-size:12px;font-weight:400}.panel-body{padding:16px}.panel-body.flush{padding:0}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}@media (max-width: 1200px){.grid-2,.grid-3{grid-template-columns:1fr}}.tbl-wrap{width:100%;overflow-x:auto}table.tbl{width:100%;border-collapse:collapse;font-size:13px}table.tbl thead th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0;z-index:1;white-space:nowrap}table.tbl tbody td{padding:10px 14px;border-bottom:1px solid var(--surface-3);vertical-align:middle}table.tbl tbody tr:last-child td{border-bottom:none}table.tbl tbody tr.clickable{cursor:pointer}table.tbl tbody tr.clickable:hover{background:var(--accent-weak)}table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}table.tbl .primary{font-weight:600;color:var(--text)}.cell-id{display:flex;align-items:center;gap:10px;min-width:0}.cell-id .txt{min-width:0}.cell-id .txt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell-id .txt small{color:var(--muted);font-size:11.5px}.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap}.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}.pill.ok{color:var(--ok);background:var(--ok-bg)}.pill.warn{color:var(--warn);background:var(--warn-bg)}.pill.err{color:var(--err);background:var(--err-bg)}.pill.info{color:var(--info);background:var(--info-bg)}.pill.neutral{color:var(--neutral);background:var(--neutral-bg)}.tag{display:inline-block;padding:1px 7px;border-radius:var(--r-sm);background:var(--surface-3);color:var(--text-2);font-size:11.5px;font-weight:500;border:1px solid var(--border)}.mono{font-family:var(--mono);font-size:12px}.muted{color:var(--muted)}.muted-s{color:var(--muted);font-size:12px}.hidden{display:none!important}.linklike{background:none;border:none;padding:0;color:var(--accent);font:inherit;font-size:12px;cursor:pointer}.linklike:hover{text-decoration:underline}tr.subrow>td{background:var(--surface-2)}.livedot{width:9px;height:9px;border-radius:50%;display:inline-block}.livedot.active{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}.livedot.idle{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}.livedot.offline{background:var(--muted-2);box-shadow:0 0 0 3px var(--neutral-bg)}.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:550;cursor:pointer;white-space:nowrap}.btn:hover{background:var(--surface-3)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-600)}.btn.sm{padding:5px 10px;font-size:12px}.btn.ghost{border-color:transparent;background:transparent;color:var(--accent-600)}.btn.danger{color:var(--err);border-color:var(--err)}.btn.danger:hover{background:var(--err);color:#fff}.btn.ghost:hover{background:var(--accent-weak)}.btn:disabled{opacity:.5;cursor:not-allowed}.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden}.seg button{border:none;background:var(--surface);padding:6px 13px;font:inherit;font-size:12.5px;font-weight:550;cursor:pointer;color:var(--text-2);border-right:1px solid var(--border)}.seg button:last-child{border-right:none}.seg button.on{background:var(--accent);color:#fff}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}.tab{padding:9px 14px;border:none;background:transparent;font:inherit;font-size:13.5px;font-weight:550;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}.tab:hover{color:var(--text)}.tab.active{color:var(--accent-600);border-bottom-color:var(--accent)}.filterbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px}.filterbar input,.filterbar select{padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);font:inherit;font-size:13px;color:var(--text)}.filterbar input:focus,.filterbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.filterbar .fsearch{position:relative}.filterbar .fsearch input{padding-left:30px;min-width:220px}.filterbar .fsearch .si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted-2)}.fselect{padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);font:inherit;font-size:13px;color:var(--text)}.fselect:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}label.rl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.state{text-align:center;padding:40px 20px;color:var(--muted)}.state .state-ico{width:44px;height:44px;margin:0 auto 12px;border-radius:var(--r-lg);background:var(--surface-3);display:grid;place-items:center;color:var(--muted-2)}.state h4{color:var(--text-2);font-weight:600;margin-bottom:4px}.state p{margin:0;font-size:13px;max-width:440px;margin-inline:auto}.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,#e9ebee 37%,var(--surface-3) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--r-sm)}@keyframes sk{0%{background-position:100% 50%}to{background-position:0 50%}}.sk-row{height:14px;margin:9px 0}.exlist{display:flex;flex-direction:column}.exrow{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--surface-3);cursor:pointer}.exrow:last-child{border-bottom:none}.exrow:hover{background:var(--surface-2)}.exrow .ex-ico{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;flex:0 0 auto}.exrow .ex-body{flex:1;min-width:0}.exrow .ex-body b{font-weight:600}.exrow .ex-body small{display:block;color:var(--muted)}.ex-ico.warn{background:var(--warn-bg);color:var(--warn)}.ex-ico.err{background:var(--err-bg);color:var(--err)}.ex-ico.ok{background:var(--ok-bg);color:var(--ok)}.ex-ico.info{background:var(--info-bg);color:var(--info)}.tl-item{display:grid;grid-template-columns:82px 24px 1fr;gap:4px;align-items:start}.tl-time{text-align:right;color:var(--muted);font-size:12px;padding-top:12px;font-variant-numeric:tabular-nums}.tl-rail{position:relative;display:flex;justify-content:center}.tl-rail:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--surface-3)}.tl-node{width:11px;height:11px;border-radius:50%;background:var(--surface);border:2px solid var(--muted-2);margin-top:12px;z-index:1}.tl-node.active{border-color:var(--ok)}.tl-node.idle{border-color:var(--warn)}.tl-node.evt{border-color:var(--accent)}.tl-node.sec{border-color:var(--err)}.tl-card{margin:6px 0;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}.tl-card .tl-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.tl-card .tl-main b{font-weight:600}.tl-card details{margin-top:6px}.tl-card summary{cursor:pointer;color:var(--muted);font-size:12px}.tl-card .tech{margin-top:6px;font-size:12px;color:var(--muted);display:grid;grid-template-columns:auto 1fr;gap:2px 12px}.tl-card .tech b{color:var(--text-2);font-weight:500}.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .12s,transform .12s;border-top:3px solid var(--muted-2)}.tile:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.tile.active{border-top-color:var(--ok)}.tile.idle{border-top-color:var(--warn)}.tile.offline{border-top-color:var(--muted-2)}.tile-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.tile-head .txt{min-width:0}.tile-head .txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-meta{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}.tile-meta .row{display:flex;justify-content:space-between;gap:8px}.tile-meta .row span:last-child{color:var(--text-2);font-weight:500;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:550}.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.shot{margin:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-3);cursor:pointer;box-shadow:var(--shadow-sm)}.shot img{display:block;width:100%;height:118px;object-fit:cover;background:var(--surface-3)}.shot figcaption{padding:7px 10px;font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between}.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#eef1ff 0%,var(--bg) 55%)}.login-card{width:380px;max-width:92vw;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px 28px}.login-card .brand-lg{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;margin-bottom:4px}.login-card .brand-lg .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#7c83ff);display:grid;place-items:center;color:#fff}.login-card p.sub{color:var(--muted);margin:2px 0 22px;font-size:13px}.login-card label{display:block;font-size:12.5px;font-weight:550;color:var(--text-2);margin:12px 0 5px}.login-card input{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--r);font:inherit;font-size:14px}.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}.login-card .btn{width:100%;justify-content:center;margin-top:20px;padding:10px}.login-err{color:var(--err);font-size:12.5px;margin-top:12px;min-height:16px}.drawer-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#10141c6b;z-index:50;display:flex;justify-content:flex-end}.drawer{width:560px;max-width:94vw;background:var(--surface);height:100%;box-shadow:var(--shadow-lg);overflow-y:auto;animation:slidein .16s ease}@keyframes slidein{0%{transform:translate(24px);opacity:.6}to{transform:none;opacity:1}}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}.drawer-body{padding:20px}img.full{width:100%;border-radius:var(--r);border:1px solid var(--border);background:var(--surface-3)}.row-flex{display:flex;align-items:center;gap:10px}.wrap-flex{display:flex;gap:8px;flex-wrap:wrap}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mb-0{margin-bottom:0}.right{margin-left:auto}.hbar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}.hbar>i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}@media (max-width: 900px){.app{grid-template-columns:0 1fr}.app .sidebar{position:fixed;z-index:60;width:244px;height:100%;transition:transform .16s}.app:not(.mobile-open) .sidebar{transform:translate(-100%)}}.mh-dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle}.mh-matrix th.mh-col{text-align:center;font-size:11px;white-space:nowrap}.mh-matrix td.mh-cell{text-align:center}.mh-legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;border-top:1px solid var(--border);color:var(--text-2);font-size:12px}.mh-leg{display:inline-flex;align-items:center;gap:6px}.notif-center{position:absolute;top:46px;right:0;width:360px;max-height:460px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:40}.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600}.notif-item{padding:11px 14px;border-bottom:1px solid var(--surface-3);font-size:13px}.notif-item.unread{background:var(--accent-weak)}.notif-item .nt{font-weight:550}.notif-item .nb{color:var(--text-2);font-size:12px;margin-top:2px}.notif-item .nm{color:var(--muted-2);font-size:11px;margin-top:3px}.bell-wrap{position:relative}.bell-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--err);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}.mp-wrap{display:flex;flex-direction:column;gap:10px}.mp-media{width:100%;max-height:60vh;background:#000;border-radius:var(--r)}audio.mp-media{max-height:54px;background:var(--surface-3)}.mp-timeline{display:flex;flex-wrap:wrap;gap:5px}.mp-seg{min-width:30px;padding:4px 8px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--r-sm);font-size:12px;cursor:pointer;color:var(--text-2)}.mp-seg:hover{background:var(--surface-3)}.mp-seg.active{background:var(--accent);border-color:var(--accent);color:#fff}.live-video{width:100%;max-height:60vh;background:#000;border-radius:var(--r)}.live-status{display:flex;align-items:center;gap:8px;font-size:13px}