:root { --bg:#f5f6f8; --fg:#1d2330; --card:#fff; --muted:#6b7280; --line:#d8dce3; --acc:#2563eb;
  --up:#16a34a; --warn:#d97706; --down:#dc2626; --fwd:#16a34a; --blk:#f59e0b; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:16px; align-items:center; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); }
nav { display:flex; gap:4px; flex-wrap:wrap; flex:1; }
button { font:inherit; padding:6px 12px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; }
button:hover { border-color:var(--acc); }
button.active, button.on { background:var(--acc); color:#fff; border-color:var(--acc); }
button.danger { border-color:var(--down); color:var(--down); }
button.link { border:none; background:none; color:var(--muted); }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
textarea { width:100%; font-family:ui-monospace, monospace; }
main { padding:12px 16px; }
.hidden { display:none !important; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.hint { color:var(--muted); }
.legend { margin-left:auto; color:var(--muted); display:flex; gap:6px; align-items:center; }
.lg { display:inline-block; width:14px; height:4px; border-radius:2px; }
.lg.up { background:var(--up); } .lg.warn { background:var(--warn); } .lg.down { background:var(--down); }
.lg.fwd { background:var(--fwd); height:5px; } .lg.blk { background:repeating-linear-gradient(90deg, var(--blk) 0 4px, transparent 4px 7px); height:5px; }
.split { display:flex; gap:12px; height:calc(100vh - 120px); }
#cy { flex:1; background:var(--card); border:1px solid var(--line); border-radius:8px; }
aside { width:380px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; }
aside:empty { display:none; }
table { width:100%; border-collapse:collapse; background:var(--card); }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:8px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:12px; }
.checks { display:flex; flex-wrap:wrap; gap:4px 12px; max-height:200px; overflow:auto; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:10; }
.overlay .card { width:300px; }
.err { color:var(--down); white-space:pre-wrap; }
.ok { color:var(--up); }
.st-up { color:var(--up); } .st-down { color:var(--down); } .st-warn { color:var(--warn); }
pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px; white-space:pre-wrap; max-height:50vh; overflow:auto; font-size:12px; }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); min-width:360px; max-width:90vw; }
dialog form { display:flex; flex-direction:column; gap:8px; }
dialog label { display:flex; flex-direction:column; gap:2px; color:var(--muted); }
.row { display:flex; gap:8px; } .row > * { flex:1; }
.seg { border:1px solid var(--line); border-radius:6px; padding:6px; margin:6px 0; }
.seg.sel { border-color:var(--acc); }
.seg input { width:70px; }
.badge { display:inline-block; padding:0 6px; border-radius:8px; font-size:12px; border:1px solid currentColor; }
@media (max-width: 800px) { .split { flex-direction:column; height:auto; } #cy { height:60vh; } aside { width:auto; } }
button.gear { font-size:18px; line-height:1; padding:4px 10px; }
.subnav { border-bottom:1px solid var(--line); padding-bottom:8px; }
.docs { display:flex; gap:16px; align-items:flex-start; }
.docs ul { list-style:none; margin:0; padding:8px; width:260px; flex-shrink:0; background:var(--card); border:1px solid var(--line); border-radius:8px; position:sticky; top:8px; }
.docs li a { display:block; padding:6px 8px; border-radius:6px; color:var(--fg); text-decoration:none; }
.docs li a.active, .docs li a:hover { background:var(--acc); color:#fff; }
.md { flex:1; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 24px 24px; }
.md table { width:auto; margin:8px 0; }
.md th, .md td { border:1px solid var(--line); }
.md code { font-family:ui-monospace, monospace; font-size:13px; background:var(--bg); padding:1px 4px; border-radius:4px; }
.md pre code { background:none; padding:0; }
.md blockquote { margin:8px 0; padding:4px 12px; border-left:4px solid var(--warn); background:var(--bg); }
.md .mermaid { margin:12px 0; text-align:center; }
.release { margin-bottom:12px; }
.release h3 { margin:0; }
.release h4 { margin:8px 0 0; }
.badge.ok { color:var(--up); margin-left:8px; }
@media (max-width: 800px) { .docs { flex-direction:column; } .docs ul { width:auto; position:static; } }
body.no-w-map .w-map, body.no-w-devices .w-devices, body.no-w-l2 .w-l2, body.no-w-wg .w-wg,
body.no-w-ops .w-ops, body.no-w-system .w-system, body.no-r-system .r-system, body.not-admin .adm { display:none !important; }
table.perm { width:auto; } table.perm td, table.perm th { padding:4px 12px; text-align:center; } table.perm td:first-child { text-align:left; }
label.inline { flex-direction:row !important; align-items:center; gap:6px; }
.badge.write { color:var(--up); } .badge.read { color:var(--acc); }
.perm-cell .badge { margin:1px 0; }
tr.muted td { opacity:.55; }