:root{--bg: #f6f7f9;--surface: #ffffff;--border: #e2e5ea;--text: #1b1f24;--muted: #5b6472;--primary: #2563eb;--primary-contrast: #ffffff;--danger: #dc2626;--success: #16a34a;--warning: #b45309;--radius: 8px;--sidebar-w: 232px}@media (prefers-color-scheme: dark){:root{--bg: #0f1319;--surface: #161b22;--border: #2a313b;--text: #e6e9ee;--muted: #9aa4b2;--primary: #4f8cff;--danger: #f87171;--success: #4ade80;--warning: #fbbf24}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:10;border-radius:var(--radius)}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100%}.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:16px}.brand{font-weight:700;font-size:1.1rem;margin-bottom:16px}.sidebar nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.sidebar a{display:block;padding:8px 10px;border-radius:var(--radius);color:var(--text);text-decoration:none}.sidebar a:hover{background:var(--bg)}.sidebar a.active{background:var(--primary);color:var(--primary-contrast)}.content{display:flex;flex-direction:column;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface)}.topbar__right{display:flex;align-items:center;gap:12px}.topbar__tagline{color:var(--muted)}.main{padding:20px;overflow-x:auto}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}h1{font-size:1.4rem;margin:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.tile{display:flex;flex-direction:column;gap:4px}.tile__value{font-size:2rem;font-weight:700}.tile__label{color:var(--muted)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600;font-size:.85rem}.row-actions{display:flex;gap:6px}.form{display:flex;flex-direction:column;gap:12px;max-width:480px}.form--inline{flex-direction:row;align-items:flex-end;max-width:none;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:4px}.field span{font-size:.85rem;color:var(--muted)}input,select{padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font:inherit}input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.btn{padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);cursor:pointer;font:inherit}.btn:hover{border-color:var(--primary)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn--primary{background:var(--primary);color:var(--primary-contrast);border-color:var(--primary)}.btn--ghost{background:transparent}.btn--danger{color:var(--danger)}.state{padding:24px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted)}.state__title{font-weight:600;color:var(--text);margin:0 0 4px}.state--error{border-color:var(--danger)}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:middle}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation:none}}.banner{padding:10px 12px;border-radius:var(--radius);margin-bottom:12px;border:1px solid var(--border)}.banner--success{border-color:var(--success)}.banner--warning{border-color:var(--warning)}.banner--error{border-color:var(--danger)}.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0}.code-block{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px;overflow-x:auto;font-size:.85rem;margin:0}.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem;background:var(--bg);border:1px solid var(--border)}.chip--online,.chip--succeeded,.chip--success{border-color:var(--success);color:var(--success)}.chip--critical,.chip--failed,.chip--failure{border-color:var(--danger);color:var(--danger)}.chip--warning,.chip--degraded{border-color:var(--warning);color:var(--warning)}.login{display:grid;place-items:center;min-height:100vh;padding:20px}.login__card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px}.login__brand{margin:0}.login__tagline{color:var(--muted);margin:0 0 8px}@media (max-width: 720px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border)}}.topology-canvas{width:100%;height:520px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:grab;touch-action:none}.topology-canvas:active{cursor:grabbing}.topology-link{stroke:var(--muted);stroke-width:2;cursor:pointer}.topology-link--active{stroke:var(--success)}.topology-link--standby{stroke:var(--warning);stroke-dasharray:8 4}.topology-link--down{stroke:var(--danger);stroke-dasharray:2 6}.topology-link--planned{stroke:var(--muted);stroke-dasharray:4 8}.topology-link--relayed{stroke-width:4}.topology-link.is-selected{stroke-width:6}.topology-node{cursor:pointer}.topology-node circle{fill:var(--surface);stroke:var(--primary);stroke-width:3}.topology-node--hub circle{stroke-width:5}.topology-node--warn circle{stroke:var(--warning)}.topology-node.is-selected circle{fill:var(--primary)}.topology-node text{fill:var(--text);font-size:22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.claim-code{display:block;margin:.5rem 0;font-size:1.75rem;letter-spacing:.15em;font-weight:600}.card--nested{margin:.75rem 0;background:transparent;border-style:dashed}