:root{--bg: #0b0f17;--surface: #111722;--surface-2: #161d2a;--line: #222b3a;--line-strong: #2f3a4d;--text: #e6e9ef;--text-2: #aab2c0;--muted: #7b8597;--good: #3fb37f;--warn: #d6a93f;--bad: #e5534b;--info: #5b8def;--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}html[dir=rtl] body{font-family:Noto Kufi Arabic,Inter,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:2px solid var(--info);outline-offset:2px}.boot{height:100%;display:grid;place-content:center;justify-items:center;color:var(--muted);gap:12px}.boot img{width:48px;opacity:.8}.stage{min-height:100%;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:14px 22px;max-width:1920px;margin:0 auto}.card{background:var(--surface);border:1px solid var(--line);border-radius:8px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand img{width:34px;height:34px;object-fit:contain}.brand h1{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}.brand p{margin:1px 0 0;color:var(--muted);font-size:13px}.top-right{display:flex;align-items:center;gap:12px}.live{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;border:1px solid var(--line);color:var(--text-2);font-weight:600;font-size:12px;letter-spacing:.06em}.live i{width:7px;height:7px;border-radius:50%;background:var(--good)}.live b{font-family:var(--mono);font-weight:500;letter-spacing:0;color:var(--text)}.live.off i{background:var(--muted)}.live.shared{text-transform:none;letter-spacing:0;font-weight:500}@media (max-width: 700px){.live.shared{display:none}}.langs{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.langs button{border:0;background:none;padding:5px 10px;font-size:12px;font-weight:600;color:var(--muted)}.langs button+button{border-inline-start:1px solid var(--line)}.langs button.on{background:var(--surface-2);color:var(--text)}.narrator{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px 18px;border-radius:8px;background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--tone)}.narrator h2{margin:0;font-size:clamp(18px,1.5vw,24px);font-weight:600;letter-spacing:-.01em}.narrator p{margin:4px 0 0;font-size:clamp(13.5px,1vw,16px);color:var(--text-2);line-height:1.45}.narrator-dot{width:12px;height:12px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 22%,transparent)}.tone-good{--tone: var(--good)}.tone-bad{--tone: var(--bad)}.tone-warn{--tone: var(--warn)}.tone-info{--tone: var(--info)}.pause-timer{font-family:var(--mono);font-size:clamp(24px,2.2vw,36px);font-weight:500;color:var(--text);min-width:5ch;text-align:right}.pause-timer small{font-size:.5em;margin-left:4px;color:var(--muted)}.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:12px;min-height:0}.diagram{padding:6px 14px 14px;display:flex;flex-direction:column;min-width:0}.topology{width:100%;height:auto;display:block}.topology,.strip,.node-cards{direction:ltr}.box{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1}.box.alarm{stroke:var(--bad)}.box-title{fill:var(--text);font-size:16px;font-weight:600}.box-tech{fill:var(--muted);font-size:12px;font-weight:400;font-family:var(--mono)}.box-sub{fill:var(--text-2);font-size:13px}.link-idle{fill:none;stroke:var(--line);stroke-width:1.5}.link-live{fill:none;stroke:#55607a;stroke-width:2}.link-live.stuck{stroke:var(--bad)}.link-read{fill:none;stroke-width:1.5;stroke-opacity:.45}.link-lock{fill:none;stroke:#5d5536;stroke-width:1.2;stroke-dasharray:2 5}.link-lock.expiring{stroke:var(--bad)}.packet.stuck{fill:var(--bad)}.read-packet{fill:var(--surface);stroke-width:2.2}.flow-legend text{fill:var(--muted);font-size:12.5px}.wal-base{fill:none;stroke:var(--line-strong);stroke-width:1.5}.wal-flow{fill:none;stroke-width:2;stroke-dasharray:2 14;stroke-linecap:round;animation:flow 1.1s linear infinite}.wal-flow.fast{animation-duration:.4s}.wal-label{fill:var(--muted);font-size:12px}.node-id{fill:#0b0f17;font-size:20px;font-weight:700;font-family:var(--mono)}.node-site{fill:var(--text);font-size:15px;font-weight:600}.primary-ring{fill:none;stroke:var(--warn);stroke-width:1.5;stroke-opacity:.7}.sync-ring{fill:none;stroke-width:1.5;stroke-dasharray:10 8;animation:spin 3s linear infinite;transform-box:fill-box;transform-origin:center}.dead-ring{fill:none;stroke:var(--bad);stroke-width:1.5}.dead-ring.cut{stroke:var(--warn);stroke-dasharray:6 6}.primary-tag{fill:#2c2410;stroke:var(--warn);stroke-width:1}.primary-tag-text{fill:var(--warn);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.dead-mark circle{fill:var(--bg);stroke:var(--bad);stroke-width:1.5}.dead-mark path{fill:none;stroke:var(--bad);stroke-width:2.4;stroke-linecap:round}.status-isolated .dead-mark circle,.status-isolated .dead-mark path{stroke:var(--warn)}.ttl-track{fill:var(--bg);stroke:#3a2422;stroke-width:3.5}.ttl-ring{fill:none;stroke:var(--bad);stroke-width:3.5;transition:stroke-dasharray .5s linear}.ttl-text{fill:var(--text);font-size:14px;font-weight:600;font-family:var(--mono)}html[dir=rtl] .topology text{font-family:Noto Kufi Arabic,Inter,sans-serif}html[dir=rtl] .topology .node-id,html[dir=rtl] .topology .ttl-text,html[dir=rtl] .topology .box-tech{font-family:var(--mono)}.node-cards{display:grid;gap:12px}html[dir=rtl] .node-card{direction:rtl}.node-card{background:var(--surface-2);border:1px solid var(--line);border-top:2px solid var(--node);border-radius:8px;padding:10px 14px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}.status-down.node-card{border-top-color:var(--bad)}.status-isolated.node-card{border-top-color:var(--warn)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.node-title{display:flex;align-items:baseline;gap:8px;min-width:0}.node-title b{font-family:var(--mono);font-size:15px;font-weight:700}.node-title span{color:var(--text-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;padding:3px 8px;border-radius:4px;border:1px solid var(--line-strong);color:var(--text-2)}.status-primary .chip{border-color:var(--warn);color:var(--warn);background:#2c2410}.status-standby .chip{border-color:#2c5a45;color:var(--good);background:#12261d}.status-catching_up .chip,.status-starting .chip{border-color:#2b4a80;color:#8fb2f5;background:#131f36}.status-down .chip{border-color:#6b2a27;color:#f08a84;background:#2a1414}.status-isolated .chip,.status-demoting .chip{border-color:#6b5520;color:var(--warn);background:#2c2410}.hint{color:var(--muted);font-size:12.5px;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-card dl{margin:2px 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.node-card dt{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.node-card dd{margin:2px 0 0;font-family:var(--mono);font-size:16px;font-weight:500}.inside{font-size:12.5px;color:var(--warn);border:1px solid #4a3d1c;background:#1f1a0e;border-radius:6px;padding:5px 8px}.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.actions button,.toolbar button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface);border-radius:6px;padding:5px 10px;font-size:12.5px;font-weight:500;color:var(--text-2);transition:background .15s,border-color .15s,color .15s}.actions button:hover:not(:disabled),.toolbar button:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:#45526a}.break:hover:not(:disabled){border-color:var(--bad)!important;color:#f6b3ae!important}.recover{border-color:#2c5a45!important;color:var(--good)!important}.icon{flex:none}.icon path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.side{display:flex;flex-direction:column;gap:12px;min-height:0}.side>.card,.side>.stats,.side>.toolbar{flex-shrink:0}.side>.events{flex:1 1 auto;flex-shrink:1;min-height:0;overflow:hidden}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stat{padding:12px 14px;display:flex;flex-direction:column;gap:2px}.stat-label{font-size:12px;color:var(--text-2);font-weight:500}.stat b{font-family:var(--mono);font-size:22px;font-weight:500;display:flex;align-items:center;gap:8px;color:var(--text)}.stat.big b{font-size:28px}.stat .icon{width:20px;height:20px;color:var(--good)}.stat small{color:var(--muted);font-size:11.5px;line-height:1.35}.stat.tone-bad b{color:var(--bad)}.stat.tone-warn b{color:var(--warn)}.side h3{margin:0;font-size:12px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.share{padding:12px 14px}.share small{color:var(--muted);font-size:11.5px}.share-rows{display:grid;gap:7px;margin-top:8px}.share-row{display:grid;grid-template-columns:2.6em 1fr 3em;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;direction:ltr}.share-track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}.share-fill{height:100%;border-radius:4px;transition:width .5s ease}.share-row span:last-child{text-align:right;color:var(--text-2)}.events{padding:12px 14px}.events ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.events li{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:8px;font-size:13px;line-height:1.4;color:var(--text-2)}.events li:first-child{color:var(--text)}.events li.empty{display:block;color:var(--muted)}.events time{font-family:var(--mono);font-size:11.5px;color:var(--muted)}.events .dot{width:7px;height:7px;border-radius:50%;transform:translateY(-1px)}.link{padding:12px 14px}.link small{display:block;margin-top:6px;color:var(--muted);font-size:11.5px;line-height:1.35}.link-presets{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden}.link-presets button{border:0;background:var(--surface);padding:6px 2px;font-size:11px;font-weight:500;color:var(--muted);display:grid;gap:2px;line-height:1.2}.link-presets button+button{border-inline-start:1px solid var(--line-strong)}.link-presets button b{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--text-2)}.link-presets button.on{background:#17233c;color:#a9c2f5;opacity:1}.link-presets button.on b{color:var(--text)}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}.toolbar .error{color:var(--bad)}.toolbar .readonly{color:var(--muted)}.bottom{padding:10px 16px}.strip-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}.legend{display:inline-flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}.legend i.fail{background:var(--bad)}.strip-row{display:grid;grid-template-columns:5.5em 1fr;align-items:center;gap:8px}.strip-row>span{font-size:12px;font-weight:600;color:var(--text-2)}.strip{width:100%;height:40px;display:block;margin-top:2px}.strip-base{stroke:var(--line)}.strip-fail{fill:var(--bad)}@keyframes flow{to{stroke-dashoffset:-16}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (min-width: 1101px) and (min-height: 960px){.stage{height:100vh;min-height:0}.diagram{min-height:0;justify-content:space-between}.side{overflow:hidden}}@media (max-width: 1100px){.main{grid-template-columns:1fr}}@media (max-width: 700px){.stage{padding:12px 16px}.top{flex-wrap:wrap}.narrator{grid-template-columns:auto 1fr}.pause-timer{grid-column:1 / -1;text-align:start}.node-cards{grid-template-columns:1fr!important}.stat.big b{font-size:22px}}.node-site,.wal-label,.ttl-text{paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}