:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f7f8;--surface:#fff;--surface-muted:#eef2f4;--surface-strong:#e3ebef;--border:#dce3e7;--border-strong:#c8d3d9;--text:#182026;--text-muted:#687782;--text-faint:#8b98a1;--primary:#009fc2;--primary-hover:#0087a6;--primary-soft:#ddf6fb;--success:#168a5b;--success-soft:#ddf5ea;--warning:#b7791f;--warning-soft:#fff2d6;--danger:#c2413a;--danger-soft:#fbe2df;--neutral:#7b8790;--neutral-soft:#e7ecef;--shadow:0 18px 42px #1820261f;--sidebar:248px;--topbar:64px}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#101417;--surface:#171d21;--surface-muted:#20282d;--surface-strong:#273137;--border:#2c363d;--border-strong:#3b4850;--text:#eef3f5;--text-muted:#9aa8b1;--text-faint:#74828a;--primary:#38bbd4;--primary-hover:#60cbe0;--primary-soft:#123a42;--success:#35b779;--success-soft:#123829;--warning:#d8a13a;--warning-soft:#3d3018;--danger:#e05f58;--danger-soft:#421e1c;--neutral:#8d9aa3;--neutral-soft:#2a3237;--shadow:0 18px 42px #00000057}
*{box-sizing:border-box}html,body{background:var(--bg);min-height:100vh;color:var(--text);letter-spacing:0;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;overflow-x:hidden}button,input,select{font:inherit}button{border:0}h1{margin:0;font-size:23px;line-height:1.15}table{border-collapse:collapse;width:100%;min-width:860px}th,td{border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;white-space:nowrap;padding:10px 12px}th{z-index:1;background:var(--surface);color:var(--text-muted);font-size:12px;font-weight:750;position:sticky;top:0}tbody tr{cursor:pointer}tbody tr:hover{background:var(--surface-muted)}
.app{grid-template-columns:var(--sidebar) minmax(0, 1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;gap:18px;height:100vh;padding:18px 14px;display:flex;position:sticky;top:0}.brand{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:0 6px 10px;display:flex}.loginBrand{border-bottom:0;padding:0}.brandMark{color:#fff;background:linear-gradient(135deg, var(--primary), #0d6f82);border-radius:8px;place-items:center;width:34px;height:34px;font-weight:800;line-height:1;display:grid}.brandTitle{gap:1px;display:grid}.brandTitle strong{font-size:15px}.brandTitle span{color:var(--text-muted);font-size:12px}.nav{gap:4px;display:grid}.nav button{width:100%;min-height:36px;color:var(--text-muted);cursor:pointer;text-align:left;background:0 0;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;display:flex}.nav button:hover{background:var(--surface-muted);color:var(--text)}.nav button.active{background:var(--primary-soft);color:var(--primary);font-weight:700}.nav button.disabled{opacity:.45;cursor:not-allowed}.navIcon{color:currentColor;flex:0 0 18px;place-items:center;width:18px;height:18px;display:grid}.sidebarFoot{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;gap:6px;margin-top:auto;padding:12px 10px;display:grid}.sidebarFoot b{font-size:12px}.sidebarFoot span{color:var(--text-muted);font-size:12px;line-height:1.35}.main{grid-template-rows:var(--topbar) minmax(0, 1fr);min-width:0;display:grid}.topbar{z-index:10;height:var(--topbar);background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);grid-template-columns:minmax(240px,520px) 1fr auto;align-items:center;gap:14px;padding:0 22px;display:grid;position:sticky;top:0}.topbarRight{justify-content:flex-end;align-items:center;gap:8px;display:flex}.content{align-content:start;gap:18px;min-width:0;padding:24px;display:grid}.screen{gap:18px;min-width:0;display:grid}.pageHead{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.titleBlock{gap:5px;display:grid}
.search{position:relative}.search svg{color:var(--text-faint);position:absolute;top:50%;left:11px;transform:translateY(-50%)}.search input,.filter,.dateInput{border:1px solid var(--border);background:var(--surface);width:100%;height:38px;color:var(--text);border-radius:8px;outline:none}.search input{padding:0 12px 0 36px}.filter,.dateInput{width:auto;min-width:132px;color:var(--text-muted);padding:0 10px}.search input:focus,.filter:focus,.dateInput:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}.filters{flex-wrap:wrap;align-items:center;gap:8px;display:flex}
.envPill,.userPill,.iconBtn,.btn,.ghostBtn{border:1px solid var(--border);background:var(--surface);height:34px;color:var(--text);white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:7px;padding:0 10px;display:inline-flex}.envPill{color:var(--primary);background:var(--primary-soft);border-color:color-mix(in srgb, var(--primary) 28%, var(--border));font-size:12px;font-weight:700}.userPill{color:var(--text-muted);font-size:12px}.iconBtn,.btn,.ghostBtn{cursor:pointer}.iconBtn:hover,.ghostBtn:hover{background:var(--surface-muted)}.btn{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}.btn:hover{background:var(--primary-hover)}.fullBtn{width:100%;height:40px}
.kpi,.panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;min-width:0}.kpi{align-content:space-between;gap:10px;min-height:98px;padding:14px;display:grid}.kpiTop{justify-content:space-between;align-items:center;gap:10px;display:flex}.kpiLabel{color:var(--text-muted);font-size:12px;font-weight:650}.kpiValue{font-variant-numeric:tabular-nums;font-size:28px;font-weight:800;line-height:1}.kpiNote,.panelMeta,.subtitle,.domain span,.muted{color:var(--text-muted);font-size:12px}.subtitle{margin:0;font-size:13px}.kpiMark{background:var(--neutral);width:8px;height:8px;box-shadow:0 0 0 4px var(--neutral-soft);border-radius:99px}.kpiMark.ok{background:var(--success);box-shadow:0 0 0 4px var(--success-soft)}.kpiMark.warn{background:var(--warning);box-shadow:0 0 0 4px var(--warning-soft)}.kpiMark.danger{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}.panelHead{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:13px 14px;display:flex}.panelTitle{margin:0;font-size:15px;line-height:1.2}
.tableWrap{width:100%;min-width:0;max-width:100%;overflow:auto}.domain{gap:2px;display:grid}.domain strong{font-size:13px}.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.badge{border:1px solid var(--border);min-height:24px;color:var(--neutral);background:var(--neutral-soft);border-radius:999px;align-items:center;gap:6px;padding:0 8px;font-size:12px;font-weight:700;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:99px;width:6px;height:6px}.badge.ok{color:var(--success);background:var(--success-soft);border-color:color-mix(in srgb, var(--success) 28%, var(--border))}.badge.warn{color:var(--warning);background:var(--warning-soft);border-color:color-mix(in srgb, var(--warning) 28%, var(--border))}.badge.danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb, var(--danger) 28%, var(--border))}
.timeline{padding:8px 14px 14px;display:grid}.event{border-bottom:1px solid var(--border);grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 0;display:grid}.event:last-child{border-bottom:0}.eventTime{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}.eventText{gap:2px;min-width:0;display:grid}.eventText b{font-size:13px}.eventText span{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}
.drawerBackdrop{z-index:40;opacity:0;pointer-events:none;background:#10141747;transition:opacity .15s;position:fixed;inset:0}.drawerBackdrop.open{opacity:1;pointer-events:auto}.drawer{z-index:50;background:var(--surface);border-left:1px solid var(--border);width:min(500px,100vw);max-width:100vw;height:100vh;box-shadow:var(--shadow);grid-template-rows:auto minmax(0,1fr);transition:transform .18s;display:grid;position:fixed;top:0;right:0;transform:translate(100%)}.drawer.open{transform:translate(0)}.drawerHead{border-bottom:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:14px;padding:18px;display:flex}.drawerTitle{gap:8px;display:grid}.drawerTitle h2{margin:0;font-size:18px}.drawerBody{align-content:start;gap:14px;padding:16px;display:grid;overflow:auto}.drawerSection{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;gap:10px;padding:13px;display:grid}.kv{grid-template-columns:130px minmax(0,1fr);align-items:center;gap:10px;font-size:13px;display:grid}.kv span{color:var(--text-muted)}
.errorBox,.stateBox{border:1px solid var(--border);color:var(--text-muted);background:var(--surface-muted);border-radius:8px;gap:4px;padding:10px;display:grid}.errorBox,.dangerState{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb, var(--danger) 28%, var(--border))}.skeleton{gap:8px;display:grid}.skeleton span{background:var(--surface-muted);border-radius:8px;height:16px}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.grid2{grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);gap:14px;display:grid}.tabs{border-bottom:1px solid var(--border);gap:6px;padding:0 14px;display:flex}.tab{height:42px;color:var(--text-muted);cursor:pointer;background:0 0;border-bottom:2px solid #0000;padding:0 10px;font-weight:700}.tab.active{color:var(--primary);border-bottom-color:var(--primary)}.detailGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px;display:grid}.summaryBox{border:1px solid var(--border);background:var(--surface-muted);border-radius:8px;gap:7px;min-width:0;padding:12px;display:grid}.summaryBox span{color:var(--text-muted);font-size:12px}.summaryBox strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.loginScreen{background:linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 55%, transparent), transparent 44%), var(--bg);place-items:center;min-height:100vh;padding:24px;display:grid}.loginCard{border:1px solid var(--border);background:var(--surface);width:min(390px,100%);box-shadow:var(--shadow);border-radius:8px;gap:16px;padding:22px;display:grid}.formRow{gap:6px;display:grid}.formRow label{color:var(--text-muted);font-size:12px;font-weight:700}.formRow input{border:1px solid var(--border);background:var(--surface);height:40px;color:var(--text);border-radius:8px;outline:none;padding:0 11px}.formRow input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
@media (max-width:1100px){.app{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:14px 10px}.brandTitle,.navLabel,.sidebarFoot{display:none}.brand{justify-content:center;padding:0 0 12px}.nav button{justify-content:center}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2,.detailGrid{grid-template-columns:1fr}}@media (max-width:760px){.app,.main{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--border);width:100%;height:auto;position:static}.nav{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{grid-template-columns:1fr;gap:10px;height:auto;padding:12px;position:static}.topbarRight{grid-template-columns:auto 42px minmax(0,1fr);justify-content:stretch;width:100%;display:grid}.userPill{text-overflow:ellipsis;max-width:100%;overflow:hidden}.topbarRight .ghostBtn{grid-column:1/-1}.content{padding:14px}.pageHead{flex-direction:column;align-items:flex-start}.kpis{grid-template-columns:1fr}.filters{align-items:stretch}.filter,.dateInput,.ghostBtn{width:100%}}