:root{color-scheme:dark;--bg:#0b1020;--panel:#131b2e;--line:#293650;--text:#e4ecfb;--muted:#99aac4;--cyan:#65d4e7;--red:#ff657c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.9 Tahoma,Arial,sans-serif}h1{font-size:27px;margin:3px 0}h2{font-size:20px}button,input,select{font:inherit;border:1px solid var(--line);border-radius:9px;padding:9px 15px;color:var(--text);background:#1a2540}button{cursor:pointer}button:hover,button.selected{border-color:var(--cyan);color:var(--cyan)}input:focus{outline:2px solid var(--cyan)}button:disabled{opacity:.5;cursor:wait}label{display:block}header{display:flex;justify-content:space-between;align-items:center;padding:25px 35px;border-bottom:1px solid var(--line);gap:20px}.eyebrow{font:11px monospace;letter-spacing:2px;color:var(--cyan)}nav{display:flex;gap:8px;padding:16px 30px;flex-wrap:wrap}.tab{margin:0 30px 30px;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:22px}.toolbar{display:flex;gap:15px;align-items:center;flex-wrap:wrap}.toolbar input[type=checkbox]{accent-color:var(--cyan)}.legend{display:flex;gap:20px;color:var(--muted);margin:20px 0;flex-wrap:wrap}.green{color:#5ee0ae}.red{color:var(--red)}#graph{width:100%;height:65vh;min-height:460px;touch-action:none;background:radial-gradient(ellipse,#1b2a46,transparent 70%);border-radius:10px}svg text{font:11px monospace;fill:#d3e0f5;pointer-events:none}svg circle,svg line{cursor:pointer}svg line{stroke:#3e5474;stroke-width:1.5}svg line.active{stroke:#50cbab;stroke-width:2.3}svg line.error{stroke:var(--red);stroke-width:4}svg circle{fill:#192c49;stroke:#61bfd2;stroke-width:2}svg circle.error{fill:#492637;stroke:var(--red)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}.card{background:#1b2841;border-radius:12px;padding:22px}.card strong{display:block;font:29px monospace;margin-top:13px;color:var(--cyan)}pre{white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left;background:#0b1222;border-radius:10px;padding:20px;font:12px/1.8 monospace;max-height:60vh;overflow:auto}.pill{padding:7px 15px;border-radius:20px;background:#173b39;color:#81e3c8;margin-left:15px}.danger{border-color:#9d4057;color:#ff8a9b}.footnote,small,p{color:var(--muted)}table{width:100%;border-collapse:collapse;margin-top:18px}td,th{text-align:right;border-bottom:1px solid var(--line);padding:12px;overflow-wrap:anywhere}tr:hover{background:#1a2842}td:first-child{direction:ltr}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;width:min(880px,95vw);max-height:90vh}dialog::backdrop{background:#030817bb}#notice{padding:0 30px 12px;color:var(--cyan)}#login{min-height:100vh;display:grid;place-items:center}#login[hidden]{display:none}form{width:min(430px,90vw);padding:40px;background:var(--panel);border:1px solid var(--line);border-radius:20px}form input{display:block;width:100%;margin:8px 0 20px}form button{width:100%;background:#165b70}#loginError{color:var(--red)}.event{padding:12px;border-bottom:1px solid var(--line)}@media(max-width:650px){header{padding:15px;display:block}nav{padding:15px}.tab{margin:0 10px;padding:12px}#graph{min-height:360px}table{font-size:11px}td,th{padding:6px}}

/* EVENT_SEVERITY_V1 */
svg line.warning{stroke:#f6c453;stroke-width:3}
svg circle.warning{fill:#493c1f;stroke:#f6c453}
.warning-label,.severity-warning>strong{color:#f6c453}
.severity-error>strong{color:#ff657c}
.error-report-card.severity-warning{border-color:#a88735}
.error-report-card.severity-warning .error-summary{color:#f6c453}

/* SPIDER_LAYOUT_V2 */
.spider-guides{pointer-events:none}
.spider-guides ellipse{fill:none;stroke:#476080;stroke-width:1;stroke-dasharray:4 8;opacity:.35}
#graph text{font-size:11px;paint-order:stroke;stroke:#101a2c;stroke-width:3px;stroke-linejoin:round}
#graph line{opacity:.38}
#graph line.active,#graph line.warning,#graph line.error{opacity:1}
#graph circle:hover{stroke:white;stroke-width:3}
dialog::backdrop{background:#030817b8;cursor:pointer}

/* SPIDER_TOPOLOGY_V3 */
.spider-summary{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:12px 0;padding:12px 18px;border:1px solid #293e61;border-radius:12px;background:#0d182c}
.spider-summary b{color:#a1eff4;direction:ltr;display:inline-block}
.spider-summary span,.spider-metrics{color:#a0b4ce;font-size:12px}
#graph{background:radial-gradient(ellipse at center,#142f46 0,#0b1729 58%,#080f1d 100%);min-height:540px}
#graph .web-ring,#graph .web-spoke{fill:none;stroke:#53849c;stroke-width:1;opacity:.24}
#graph .web-spoke{opacity:.18}
#graph .connection-thread{fill:none;stroke:#6b8ba1;stroke-width:1.25;opacity:.65;pointer-events:none}
#graph .connection-thread.active{stroke:#4bd4b2;stroke-width:2.3;opacity:.9}
#graph .connection-thread.warning{stroke:#f6c453;stroke-width:3.5;opacity:1}
#graph .connection-thread.error{stroke:#ff657c;stroke-width:4;opacity:1}
#graph .connection-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:stroke;cursor:pointer}
#graph .connection.faded{opacity:.09}
#graph .connection:hover .connection-thread{stroke-width:4;opacity:1}
#graph .web-node circle{fill:#152e46;stroke:#88d7e5;stroke-width:2;filter:drop-shadow(0 0 4px #65d4e740)}
#graph .web-node circle.error{fill:#472435;stroke:#ff657c}
#graph .web-node circle.warning{fill:#493c1f;stroke:#f6c453}
#graph .web-node.selected circle{stroke-width:4}
#graph .web-node.dim{opacity:.3}
#graph .web-node:hover{opacity:1}
#graph text{font-size:10px;fill:#e2f2fb;stroke:#081222;stroke-width:4px}
@media(max-width:650px){#graph{min-height:400px}.spider-summary{padding:10px}}
.event-fa{direction:rtl;text-align:right;background:#182940;border-radius:10px;padding:16px;margin-bottom:14px}
.event-fa b{color:#e2edf8;font-size:15px}
.event-fa p{margin:8px 0}
.error-report-card{margin:18px 0;padding:20px;border:1px solid #44526d;border-radius:12px;background:#101a2c}
.error-report-card pre{font-size:14px;line-height:1.8;user-select:text}
.error-report-card .error-summary{color:#ff91a4;max-height:160px}
.error-report-card summary{cursor:pointer;margin-top:15px}
.report-payload:not([hidden]){display:block;width:100%;height:220px;direction:ltr;text-align:left;margin-top:12px;font:13px monospace}

/* WEB_USERS_V1 */
#userSearchForm{width:100%;padding:12px;display:flex;flex-wrap:wrap;gap:12px}
#userSearchForm input{width:auto;flex:1;min-width:160px;margin:0}
#userSearchForm button{width:auto}
#userPager{margin-top:18px}
#usersTable tbody tr{cursor:pointer}

/* USERS_PAGES_50_V1 */
#userSearchForm{background:#0b1222;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:18px}
#userSearchForm input{min-width:180px;padding:12px;background:transparent}
#userPager{direction:ltr;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:18px}
#userPageInfo{direction:rtl;margin-right:auto;color:var(--muted)}
#userPageButtons{display:flex;align-items:center;gap:8px}
#userPageButtons button{min-width:42px;padding:8px 12px}
#userPageButtons button.selected{opacity:1;background:#21354e;border-color:var(--cyan);color:var(--cyan)}
#userPageButtons span{padding:0 6px;color:var(--muted)}
@media(max-width:650px){
 #userPageInfo{width:100%;text-align:right}
 #userPageButtons{gap:4px}
 #userPageButtons button{min-width:30px;padding:6px}
}

#graph .connection-hit{stroke-width:18;pointer-events:stroke}