.iv {
    --iv-ink: #172033;
    --iv-text: #172033;
    --iv-muted: #697386;
    --iv-line: #dfe5ec;
    --iv-panel: #ffffff;
    --iv-panel-soft: #fbfcfd;
    --iv-page: #f4f7f9;
    --iv-control: #ffffff;
    --iv-warning-surface: #fffaf0;
    --iv-alert-surface: #fff8e9;
    --iv-alert-border: #f0cf9b;
    --iv-alert-text: #784b0b;
    --iv-solar: #e6a817;
    --iv-solar-soft: #fff7df;
    --iv-front-icon: #786315;
    --iv-front-icon-bg: #f7f2d7;
    --iv-pergola-icon: #95662c;
    --iv-pergola-icon-bg: #fff0df;
    --iv-good: #1a8f64;
    --iv-warn: #c67911;
    --iv-bad: #c34848;
    --iv-blue: #3976b8;
}

[data-bs-theme="dark"] .iv {
    --iv-text: #e8edf5;
    --iv-muted: #9ba8bb;
    --iv-line: #354052;
    --iv-panel: #222a38;
    --iv-panel-soft: #1c2431;
    --iv-page: #181f2a;
    --iv-control: #273141;
    --iv-warning-surface: #30291d;
    --iv-alert-surface: #332916;
    --iv-alert-border: #6e5529;
    --iv-alert-text: #f0c66d;
    --iv-solar-soft: #37301f;
    --iv-front-icon: #d8c45f;
    --iv-front-icon-bg: #34311f;
    --iv-pergola-icon: #e0a662;
    --iv-pergola-icon-bg: #36291e;
    --iv-blue: #6ca5df;
}

.iv { color: var(--iv-text); max-width: 1480px; margin: 0 auto; padding: 12px 0 80px; }
.iv-head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 1.25rem; margin-bottom: 1.5rem; }
.iv-hero, .iv-head-right { background: linear-gradient(135deg, rgba(var(--vz-primary-rgb), .08), rgba(var(--vz-success-rgb), .03) 46%, var(--iv-panel) 100%); border: 1px solid var(--iv-line); border-radius: 5px; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.iv-hero { padding: 1.5rem; position: relative; overflow: hidden; }
.iv-head-right { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.iv-kicker, .iv-eyebrow { color: var(--iv-solar); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.iv-kicker { display: inline-flex; gap: 8px; align-items: center; margin-bottom: .85rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(var(--vz-primary-rgb), .12); color: var(--vz-primary); }
.iv h1 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; margin: 0 0 .45rem; }
.iv-head p { color: var(--iv-muted); max-width: 42rem; margin: 0; }
.iv-meta-label { color: var(--iv-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .45rem; }
.iv-status { border: 1px solid var(--iv-line); border-radius: 5px; background: var(--iv-panel-soft); padding: .55rem .6rem .55rem .85rem; display: flex; align-items: center; gap: .65rem; }
.iv-live-dot, .iv-state-dot { width: 9px; height: 9px; border-radius: 50%; background: #aab3c0; flex: 0 0 auto; }
.iv-live-dot.is-live, .iv-device-state.is-live .iv-state-dot { background: var(--iv-good); box-shadow: 0 0 0 4px rgba(26,143,100,.13); }
.iv-live-dot.is-error, .iv-device-state.is-stale .iv-state-dot { background: var(--iv-bad); }
.iv-status-copy { display: grid; flex: 1; }
.iv-status-copy strong { font-size: .82rem; }
.iv-status-copy span { color: var(--iv-muted); font-size: .7rem; }
.iv-icon-btn { border: 1px solid var(--iv-line); border-radius: 3px; background: var(--iv-control); color: var(--iv-muted); width: 34px; height: 34px; }
.iv-icon-btn:hover { color: var(--iv-blue); border-color: #b9c9dc; }
.iv-nav { display: flex; gap: .65rem; flex-wrap: wrap; }
.iv-nav a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .95rem; border-radius: 5px; border: 1px solid var(--iv-line); background: var(--iv-panel-soft); color: var(--iv-text); font-size: .82rem; font-weight: 600; text-decoration: none; transition: all .2s ease; }
.iv-nav a:hover { transform: translateY(-1px); border-color: rgba(var(--vz-primary-rgb), .28); background: rgba(var(--vz-primary-rgb), .08); color: inherit; }

.iv-summary { background: var(--iv-ink); border-radius: 5px; overflow: hidden; margin-bottom: 18px; }
.iv-summary-head { padding: 15px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.iv-summary-head div { display: grid; }
.iv-summary-head span { color: var(--iv-solar); font-size: .68rem; text-transform: uppercase; font-weight: 800; letter-spacing: .09em; }
.iv-summary-head strong { color: #fff; }
.iv-summary-head small { color: #96a2b5; }
.iv-summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.iv-summary-item { padding: 19px 22px; display: grid; gap: 3px; border-right: 1px solid rgba(255,255,255,.1); }
.iv-summary-item:last-child { border-right: 0; }
.iv-summary-item > span { color: #aeb8c9; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.iv-summary-item strong { color: #fff; font-size: 1.45rem; }
.iv-summary-item small { color: #96a2b5; }

.iv-alert { display: flex; align-items: center; gap: 12px; border: 1px solid var(--iv-alert-border); background: var(--iv-alert-surface); color: var(--iv-alert-text); border-radius: 5px; padding: 13px 16px; margin-bottom: 18px; }
.iv-alert div { display: grid; }
.iv-alert span { font-size: .8rem; opacity: .86; }

.iv-topology { background: var(--iv-page); border: 1px solid var(--iv-line); border-radius: 5px; padding: 18px; }
.iv-inverter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.iv-inverter { background: var(--iv-panel); border: 1px solid var(--iv-line); border-radius: 5px; overflow: hidden; min-width: 0; }
.iv-inverter.is-stale { border-color: #e5b4b4; }
.iv-inverter-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--iv-line); }
.iv-inverter-name { display: flex; align-items: baseline; gap: 11px; }
.iv-inverter-name span { background: var(--iv-ink); color: #fff; border-radius: 3px; padding: 4px 7px; font-weight: 800; font-size: .72rem; }
.iv-inverter-name strong { font-size: 1rem; }
.iv-device-id { display: block; color: var(--iv-muted); font-size: .72rem; margin-top: 4px; }
.iv-device-state { display: flex; gap: 8px; align-items: center; color: var(--iv-muted); font-size: .76rem; font-weight: 700; }
.iv-paths { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--iv-line); }
.iv-string { background: var(--iv-panel); min-height: 126px; padding: 22px 18px; display: flex; gap: 14px; align-items: center; }
.iv-string.is-warning { background: var(--iv-warning-surface); }
.iv-array-icon { width: 42px; height: 42px; border-radius: 5px; display: grid; place-items: center; color: #836008; background: var(--iv-solar-soft); }
.iv-array-icon.front { color: var(--iv-front-icon); background: var(--iv-front-icon-bg); }
.iv-array-icon.pergola { color: var(--iv-pergola-icon); background: var(--iv-pergola-icon-bg); }
.iv-string-main { display: grid; gap: 3px; }
.iv-string-power { font-size: 1.45rem; letter-spacing: -.02em; }
.iv-string-electrical { color: var(--iv-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.iv-device { background: var(--iv-panel-soft); border-top: 1px solid var(--iv-line); padding: 16px 18px; display: grid; grid-template-columns: auto minmax(150px, 1fr); align-items: center; gap: 14px; }
.iv-device-icon { width: 42px; height: 42px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: var(--iv-blue); }
.iv-device > div:nth-child(2) { display: grid; }
.iv-device > div:nth-child(2) span { color: var(--iv-muted); font-size: .72rem; }
.iv-device-power { font-size: 1.2rem; }
.iv-device dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.iv-device dl div { border-left: 1px solid var(--iv-line); padding-left: 16px; display: grid; }
.iv-device dt { color: var(--iv-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.iv-device dd { margin: 2px 0 0; font-weight: 750; }
.iv-device dl small, .iv-backup-row small { color: var(--iv-muted); font-size: .68rem; margin-top: 2px; }

.iv-bus { display: grid; place-items: center; position: relative; height: 58px; }
.iv-bus-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #afbdcd; }
.iv-bus-node { z-index: 1; background: var(--iv-ink); color: #fff; border-radius: 3px; padding: 8px 13px; display: flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 750; }
.iv-destinations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iv-destination { background: var(--iv-panel); border: 1px solid var(--iv-line); border-radius: 5px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.iv-destination > i { color: var(--iv-blue); width: 26px; text-align: center; font-size: 1.05rem; }
.iv-destination div { display: grid; }
.iv-destination span { color: var(--iv-muted); font-size: .72rem; }
.iv-bus-backup { margin-top: 10px; }
.iv-bus-backup .iv-bus-node { background: #6f5314; }
.iv-bus-backup .iv-bus-line { background: #9b7928; }
.iv-backup-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.iv-backup-row .iv-destination { border-color: color-mix(in srgb, var(--iv-solar) 35%, var(--iv-line)); }
.iv-backup-row .iv-destination > i { color: var(--iv-solar); }
.iv-backup-row .iv-destination > div { display: grid; }
.iv-backup-row .iv-backup-total { background: var(--iv-warning-surface); }

.iv-diagnostics { margin-top: 22px; }
.iv-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 12px; }
.iv-section-head h2 { margin: 2px 0 0; font-size: 1.35rem; }
.iv-section-head > span { color: var(--iv-muted); font-size: .75rem; max-width: 460px; text-align: right; }
.iv-check-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iv-check { border: 1px solid var(--iv-line); background: var(--iv-panel); border-radius: 5px; padding: 15px; display: flex; gap: 11px; min-height: 82px; }
.iv-check > i { margin-top: 3px; color: var(--iv-good); }
.iv-check.is-warning > i { color: var(--iv-warn); }
.iv-check.is-error > i { color: var(--iv-bad); }
.iv-check.is-pending > i { color: var(--iv-muted); }
.iv-check div { display: grid; align-content: start; gap: 3px; }
.iv-check strong { font-size: .84rem; }
.iv-check span { color: var(--iv-muted); font-size: .74rem; line-height: 1.45; }

@media (max-width: 991px) {
    .iv-head { grid-template-columns: 1fr; }
    .iv-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .iv-summary-item:nth-child(2) { border-right: 0; }
    .iv-inverter-grid { grid-template-columns: 1fr; }
    .iv-device { grid-template-columns: auto 1fr; }
    .iv-device dl { grid-column: 1 / -1; }
    .iv-check-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .iv { padding-top: 0; }
    .iv-summary-grid, .iv-destinations, .iv-backup-row { grid-template-columns: 1fr; }
    .iv-summary-head { align-items: flex-start; gap: 6px; flex-direction: column; }
    .iv-summary-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .iv-inverter-head, .iv-section-head { align-items: flex-start; flex-direction: column; }
    .iv-device dl { grid-template-columns: 1fr; gap: 10px; }
    .iv-device dl div { border-left: 0; border-top: 1px solid var(--iv-line); padding: 9px 0 0; }
    .iv-section-head > span { text-align: left; }
}