.ha-observability{border-top:4px solid #315c9b}
.ha-headline{font-size:24px;font-weight:800;padding:16px 18px;border-radius:10px;margin-bottom:18px;background:#e8eef7;color:#23446f}
.ha-headline.master{background:#e6f7ee;color:#08763e}.ha-headline.slave{background:#fff4da;color:#8a5700}
.ha-headline.transition{background:#e8efff;color:#244f9e}.ha-headline.error{background:#ffe8e8;color:#a41313}
.ha-phase-spotlight{margin:-8px 0 18px;padding:13px 16px;border-radius:9px;background:#edf3ff;color:#244f9e;font-size:18px;font-weight:800;text-align:center}
.ha-recovery-banner{display:flex;flex-direction:column;gap:5px;margin:-8px 0 18px;padding:14px 16px;border:1px solid #e3a432;border-radius:9px;background:#fff8e8;color:#704700}.ha-recovery-banner[hidden]{display:none}.ha-recovery-banner strong{font-size:16px}.ha-recovery-banner small{color:#785d28}
.ha-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#64718a}.ha-section-title h2{color:#172033}
.ha-topology{display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1.2fr) minmax(190px,1fr);align-items:stretch;gap:18px;margin:18px 0}
.ha-server{position:relative;display:flex;min-height:118px;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:2px solid;border-radius:14px;text-align:center}.ha-server span{font-size:17px;font-weight:800}.ha-server strong{font-size:20px}.ha-server small{color:#66758c}.ha-server-led{position:absolute;top:12px;right:12px;width:14px;height:14px;border:2px solid rgba(255,255,255,.95);border-radius:50%;background:#9ca3af;box-shadow:0 0 0 1px rgba(23,32,51,.18),0 0 7px rgba(23,32,51,.15)}.ha-server-led.online{background:#18ad62;box-shadow:0 0 0 1px rgba(8,118,62,.22),0 0 8px rgba(24,173,98,.55)}.ha-server-led.offline{background:#dc3545;box-shadow:0 0 0 1px rgba(176,24,38,.22),0 0 8px rgba(220,53,69,.5)}.ha-server-led.unknown{background:#9ca3af}.master-server{border-color:#32a46a;background:#eefaf3;color:#08763e}.slave-server{border-color:#e3a432;background:#fff8e8;color:#8a5700}
.ha-replication-flow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#315c9b;text-align:center}.ha-replication-flow span{width:100%;overflow:hidden;font-weight:800;white-space:nowrap}.ha-replication-flow small{font-size:15px;color:#45546a}
.ha-summary-strip{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:13px;border-radius:9px;background:#f5f7fa;color:#4b5870}
.ha-technical,.ha-db-names{margin-top:18px;border-top:1px solid #e2e7ed;padding-top:12px}.ha-technical summary,.ha-db-names summary{cursor:pointer;color:#315c9b;font-weight:800}.ha-technical[open] summary,.ha-db-names[open] summary{margin-bottom:12px}
.ha-esp-observability,.ha-network-paths{margin-top:22px;padding-top:18px;border-top:1px solid #dce3eb}.ha-esp-observability h2{color:#172033}.ha-network-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.ha-network-head h3{margin:0 0 4px;color:#172033;font-size:17px}.ha-network-head small{color:#64718a}.ha-network-refresh{border:0;border-radius:8px;padding:9px 13px;background:#315c9b;color:#fff;font-weight:800;cursor:pointer}.ha-network-refresh:disabled{cursor:wait;opacity:.6}.ha-network-refresh-status{min-height:18px;margin:7px 0;color:#536078;font-size:12px;text-align:right}
.ha-network-table-wrap{width:100%;overflow-x:auto;border:1px solid #dfe5ec;border-radius:9px}.ha-network-table{min-width:760px}.ha-network-table-head,.ha-network-row{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(125px,.8fr) minmax(205px,1.4fr) 75px 85px;align-items:center;gap:10px}.ha-network-table-head{padding:9px 12px;background:#f0f3f7;color:#64718a;font-size:11px;font-weight:800;text-transform:uppercase}.ha-network-row{min-height:54px;padding:9px 12px;border-top:1px solid #e5e9ef}.ha-network-route{font-weight:800;white-space:nowrap}.ha-network-state{display:grid;grid-template-columns:10px 1fr;align-items:center;gap:8px}.ha-network-state strong{font-size:13px;white-space:nowrap}.ha-network-dot{width:10px;height:10px;border-radius:50%;background:#9ca3af}.ha-network-dot.healthy{background:#18ad62}.ha-network-dot.problem{background:#dc3545}.ha-network-dot.unknown{height:auto;border-radius:0;background:transparent;color:#7b8492;font-style:normal}.ha-network-dot.unknown::before{content:"—"}.ha-network-metric{color:#45546a;white-space:nowrap}.ha-network-path-result{white-space:normal}.ha-network-empty{padding:14px;color:#718096;text-align:center}
.ha-network-details{margin-top:13px}.ha-network-card{margin-top:12px;padding:14px;border:1px solid #dfe5ec;border-radius:9px}.ha-network-card h4{margin:0 0 10px}.ha-network-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin-bottom:12px;color:#536078;font-size:13px}.ha-hop-table-wrap{width:100%;overflow-x:auto}.ha-hop-table{min-width:430px;border:1px solid #e1e6ed;border-radius:7px;overflow:hidden}.ha-hop-head,.ha-hop{display:grid;grid-template-columns:55px 1fr 90px;gap:10px;align-items:center}.ha-hop-head{padding:7px 9px;background:#eef2f6;color:#64718a;font-size:11px;font-weight:800;text-transform:uppercase}.ha-hop{min-height:30px;padding:5px 9px;border-top:1px solid #e7ebef;font-family:Consolas,monospace;font-size:12px}.ha-hop span:last-child{text-align:right}
.ha-manual-failover{margin-top:22px;padding:16px;border:1px solid #efc8c8;border-radius:9px;background:#fffafa}.ha-manual-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.ha-manual-head h3{margin:0 0 4px;font-size:17px}.ha-manual-head small{color:#725f5f}.ha-action-button{display:inline-flex;border:1px solid #315c9b;border-radius:8px;padding:9px 13px;background:#315c9b;color:#fff;font-weight:800;cursor:pointer;text-decoration:none}.ha-action-button:disabled{cursor:not-allowed;opacity:.5}.ha-action-button.danger-outline{border-color:#b52525;background:#fff;color:#a41313}.ha-action-button.danger{border-color:#a41313;background:#a41313}.ha-manual-message{min-height:18px;margin-top:9px;color:#59667c;font-size:13px}.ha-manual-result{margin-top:10px}.ha-manual-result>strong{display:block;margin-bottom:10px}.ha-manual-grid{display:grid;grid-template-columns:150px 1fr;gap:7px 14px;padding:11px;border-radius:7px;background:#fff}.ha-manual-grid span{color:#64718a;font-size:12px;font-weight:800}.ha-manual-failures{margin-top:10px;color:#a41313;font-size:13px}.ha-manual-ack{display:flex;align-items:flex-start;gap:8px;margin:14px 0;color:#7b1d1d;font-weight:700}.ha-manual-ack input{width:auto;margin-top:2px}
.ha-web-sync-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid #e2e7ed}.ha-web-sync-actions small{max-width:650px;color:#59667c;line-height:1.4}.ha-web-sync-actions .ha-action-button{white-space:nowrap}
.ha-replication-repair{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:12px 14px;border:1px solid #e8b45b;border-radius:9px;background:#fff8e8}.ha-replication-repair[hidden]{display:none}.ha-replication-repair strong,.ha-replication-repair small{display:block}.ha-replication-repair strong{color:#8a5100}.ha-replication-repair small{margin-top:4px;color:#6c5a3c;line-height:1.4}.ha-replication-repair .ha-action-button{white-space:nowrap;background:#a96300;border-color:#a96300}
.ha-kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.ha-kv-grid>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid #e5e9ef}
.ha-kv-grid span{color:#59667c}.ha-kv-grid strong{text-align:right;overflow-wrap:anywhere}
.ha-kv-grid .wide{grid-column:1/-1}.ha-error{margin-top:14px;padding:13px;border-radius:8px;background:#ffe8e8;color:#a41313;font-weight:700}
.ha-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e6eaf0;color:#47546a;font-weight:800}
.ha-badge.active{background:#ffe2b8;color:#8a4a00}.ha-badge.off{background:#e6f7ee;color:#08763e}
.ha-badge.warning{background:#ffe8c2;color:#8a4a00}.ha-badge.error{background:#ffe1e1;color:#a41313}
.ha-db-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin:18px 0}.ha-db-compare>div:not(.ha-db-divider){display:flex;flex-direction:column;align-items:center;gap:7px;padding:17px;border-radius:12px;background:#f5f7fa}.ha-db-compare span{font-weight:800;color:#4b5870}.ha-db-compare strong{font-size:30px;color:#172033}.ha-db-compare small{color:#64718a}.ha-db-divider{color:#64718a;font-size:12px;font-weight:800;text-align:center}
.ha-db-status-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.ha-db-status-grid>div{display:flex;min-height:74px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:10px;border:1px solid #e1e6ed;border-radius:9px;text-align:center}.ha-db-status-grid span{font-size:12px;color:#64718a;font-weight:800}.ha-db-status-grid strong{color:#172033}.ha-db-status-grid strong.ok{color:#08763e}.ha-db-status-grid strong.warning{color:#9a5b00}.ha-db-note{margin:14px 0 0;color:#64718a;font-size:13px;text-align:center}
.ha-event-history{margin-bottom:0}.ha-event-details{margin:10px 0;color:#315c9b}.ha-event-details summary{cursor:pointer;font-weight:800}.ha-event-details small{display:block;margin-top:7px;color:#64718a}.ha-events{border:1px solid #e1e6ed;border-radius:9px;overflow:hidden}.ha-event-details:not([open])+.ha-events .ha-event:nth-child(n+5){display:none}.ha-event{display:grid;grid-template-columns:170px 160px 160px 100px 1fr;gap:10px;padding:10px 12px;border-top:1px solid #e8ecf1;font-size:13px}.ha-event:first-child{border-top:0}.ha-event strong{overflow-wrap:anywhere}.ha-event.failed{background:#fff0f0}.ha-event.blocked{background:#fff7e8}.ha-event-empty{padding:18px;color:#718096;text-align:center}
@media(max-width:800px){.ha-topology{grid-template-columns:1fr}.ha-replication-flow span{transform:rotate(90deg);width:auto}.ha-db-compare{grid-template-columns:1fr}.ha-db-status-grid{grid-template-columns:1fr 1fr}.ha-kv-grid{grid-template-columns:1fr}.ha-kv-grid .wide{grid-column:auto}.ha-network-head,.ha-manual-head,.ha-web-sync-actions,.ha-replication-repair{align-items:flex-start;flex-direction:column}.ha-network-refresh-status{text-align:left}.ha-network-meta{grid-template-columns:1fr}.ha-event{grid-template-columns:1fr 1fr}.ha-event-detail{grid-column:1/-1}.ha-headline{font-size:19px}.ha-web-sync-actions .ha-action-button,.ha-replication-repair .ha-action-button{width:100%;justify-content:center}}