/* Home is one cluster workspace: this node and its topology. */
.cluster-toolbar, .cluster-controls, .cluster-map-heading, .cluster-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cluster-toolbar { margin-bottom: 1.1rem; flex-wrap: wrap; }
.cluster-heading { min-width: 0; }
.cluster-heading h2 { font-size: 1.35rem; font-weight: 650; margin-bottom: 0.3rem; }
.cluster-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; font-size: 0.8125rem; color: var(--text-secondary); }
.cluster-summary strong { font-weight: 600; color: var(--text); }
.cluster-health { display: inline-flex; align-items: center; gap: 0.4rem; }
.cluster-health.is-reachable { color: var(--success-text); }
.cluster-health.is-unreachable, .cluster-summary .needs-attention { color: var(--error-text); }
.cluster-controls { font-size: 0.75rem; color: var(--text-secondary); gap: 0.8rem; }
.cluster-controls label, .cluster-map-heading label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; white-space: nowrap; }
#cluster-refresh { border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); padding: 0.45rem 0.85rem; font: inherit; cursor: pointer; }
#cluster-refresh:hover { border-color: var(--accent); }
#cluster-refresh:disabled { opacity: 0.6; cursor: wait; }
.cluster-message { padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--error); border-radius: 5px; margin-bottom: 0.8rem; font-size: 0.8125rem; }
.cluster-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); height: 560px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; }
.cluster-map-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-alt); }
.cluster-map-heading { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-light); }
.cluster-map-heading h3 { margin: 0; font-size: 0.6875rem; letter-spacing: 0.09em; }
.cluster-map-heading label { font-size: 0.6875rem; color: var(--text-secondary); }
.cluster-map-viewport { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; background-image: radial-gradient(var(--border) 0.7px, transparent 0.7px); background-size: 18px 18px; }
.cluster-map { position: relative; flex-shrink: 0; margin: auto 0; }
.cluster-empty { margin: auto; padding: 2rem; text-align: center; font-size: 0.875rem; color: var(--text-secondary); }
.cluster-links { position: absolute; width: 100%; height: 100%; inset: 0; }
.cluster-edge { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.6; }
.cluster-edge.is-replica { stroke-dasharray: 5 5; }
.cluster-edge.is-current { stroke: var(--accent); opacity: 0.9; stroke-width: 2; }
.cluster-probe-label { fill: var(--text-secondary); font-size: 10px; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--surface-alt); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.cluster-node { position: absolute; width: 150px; transform: translate(-50%, -50%); }
.cluster-node-link { display: block; width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; box-shadow: 0 2px 4px var(--shadow); }
.cluster-node-link[href]:hover { border-color: var(--accent); }
.cluster-node-link:not([href]) { cursor: default; }
.cluster-node-link.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-shadow); }
.cluster-node-link.is-replica { border-style: dashed; }
.cluster-node-link.is-unreachable { border-color: var(--error); }
.cluster-node-heading { display: flex; align-items: center; gap: 0.45rem; padding-right: 1.25rem; }
.cluster-node-actions { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: 1.25rem; cursor: pointer; }
.cluster-node-actions:hover { background: var(--surface-alt); color: var(--text); }
.node-menu { position: fixed; z-index: 100; width: 230px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 0.3rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: 0 6px 24px var(--shadow); }
.node-menu[hidden], .node-action-feedback[hidden] { display: none; }
.node-menu-title { padding: 0.5rem 0.6rem; color: var(--text-secondary); font-size: 0.6875rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border-light); margin-bottom: 0.25rem; }
.node-menu [role="menuitem"] { display: block; width: 100%; padding: 0.55rem 0.6rem; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: inherit; font-size: 0.8125rem; text-align: left; text-decoration: none; cursor: pointer; }
.node-menu [role="menuitem"]:hover, .node-menu [role="menuitem"]:focus { background: var(--surface-alt); outline: 2px solid var(--accent); outline-offset: -2px; }
.node-menu [aria-disabled="true"] { opacity: 0.5; cursor: default; }
.node-action-feedback { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 101; max-width: calc(100vw - 2rem); padding: 0.7rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px var(--shadow); font-size: 0.8125rem; overflow-wrap: anywhere; }
.cluster-node-heading strong { font-size: 0.8125rem; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cluster-node-icon { color: var(--text-secondary); font-size: 0.8125rem; flex-shrink: 0; }
.is-leader .cluster-node-icon, .is-leader .cluster-node-role { color: var(--accent); }
.cluster-node-role { display: block; margin: 0.1rem 0 0.55rem 1.15rem; font-size: 0.7rem; color: var(--text-secondary); }
.cluster-node-health { display: flex; align-items: center; gap: 0.35rem; font-size: 0.625rem; color: var(--text-secondary); }
.cluster-this-node { margin-left: auto; color: var(--accent); white-space: nowrap; }
.cluster-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.cluster-dot.is-reachable { background: var(--success); }
.cluster-dot.is-unreachable { background: var(--error); }
.cluster-map-footer { padding: 0.65rem 1rem; border-top: 1px solid var(--border-light); font-size: 0.6875rem; color: var(--text-secondary); flex-wrap: wrap; gap: 0.25rem; }
.cluster-perspective { margin-top: 0.7rem; font-size: 0.6875rem; color: var(--text-secondary); }
.node-inspector { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); }
.inspector-heading { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-light); }
.inspector-eyebrow { display: block; margin-bottom: 0.4rem; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-secondary); }
.inspector-heading h2 { font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; line-height: 1.3; }
.inspector-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.65rem; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-secondary); }
.inspector-state > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.inspector-body { padding: 0 1.1rem 1rem; overflow: auto; min-height: 0; scrollbar-width: thin; }
.inspector-meta { padding: 0.9rem 0; }
.inspector-meta > div + div { margin-top: 0.6rem; }
.inspector-meta dt { font-size: 0.625rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.inspector-meta dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.75rem; overflow-wrap: anywhere; margin-top: 0.1rem; }
.inspector-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 0.6rem; padding: 0.9rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.inspector-stats dt { font-size: 0.6875rem; color: var(--text-secondary); }
.inspector-stats dd { font-size: 0.8125rem; font-weight: 600; overflow-wrap: anywhere; }
#status #detail-sections { margin-top: 0.5rem; }
#status .detail-section { border-bottom: 1px solid var(--border-light); border-radius: 0; box-shadow: none; margin: 0; }
#status .detail-section-header { padding: 0.6rem 0; font-size: 0.75rem; list-style: none; }
#status .detail-section-header::-webkit-details-marker { display: none; }
#status .detail-section-header:hover { color: var(--accent); background: transparent; }
#status .detail-section[open] .detail-section-body { display: block; }
#status .detail-section[open] .arrow { transform: rotate(90deg); }
#status .detail-table { font-size: 0.6875rem; }
#status .detail-table td { padding: 0.35rem 0.2rem; }
#status .detail-table td:first-child { white-space: normal; width: 45%; }
#status .raw-json-toggle { margin-top: 1rem; text-align: left; }
#status .toggle-btn { font-size: 0.6875rem; padding: 0.35rem 0.6rem; }
.inspector-note { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; margin-top: 0.8rem; }
.inspector-note.is-stale { color: var(--error-text); }
#status [hidden] { display: none; }
#status button:focus-visible, #status summary:focus-visible, .cluster-node-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 800px) {
    .header-content { flex-wrap: wrap; gap: 0.5rem; }
    nav { order: 4; width: 100%; overflow-x: auto; }
    .tab { flex: 1; padding-left: 0.7rem; padding-right: 0.7rem; }
    .cluster-workspace { grid-template-columns: 255px minmax(0, 1fr); }
    .cluster-node { width: 130px; }
    .cluster-node-link { padding: 0.6rem; }
    .cluster-this-node { font-size: 0.55rem; }
}
@media (max-width: 680px) {
    .cluster-workspace { grid-template-columns: 1fr; height: auto; }
    .cluster-map-viewport { max-height: 400px; }
    .cluster-map { min-width: 310px; }
    .cluster-map-panel { grid-row: 1; }
    .node-inspector { border-right: 0; border-top: 1px solid var(--border); }
    .inspector-heading { padding: 0.9rem 1rem; }
    .inspector-body { max-height: 400px; }
    .cluster-controls { width: 100%; justify-content: flex-end; }
    .cluster-node { width: 125px; }
}