/* ── ENERGY OVERVIEW ────────────────────────────────────── */
.eg {
    --eg-solar: var(--vz-warning);
    --eg-generation: var(--vz-success);
    --eg-battery: var(--vz-info);
    --eg-import: var(--vz-danger);
    --eg-surface: var(--vz-secondary-bg);
    --eg-surface-soft: rgba(var(--vz-light-rgb), 0.03);
    --eg-border: var(--vz-border-color);
    --eg-heading: var(--vz-heading-color);
    --eg-text: var(--vz-body-color);
    --eg-muted: rgba(var(--vz-body-color-rgb), 0.72);
    --eg-subtle: rgba(var(--vz-body-color-rgb), 0.54);
    --eg-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    color: var(--eg-text);
}

.eg a {
    color: inherit;
}

/* ── HEADER ──────────────────────────────────────────────── */
.eg-head {
    display:grid;
    grid-template-columns:minmax(0, 1.7fr) minmax(280px, 1fr);
    gap:1.25rem;
    margin-bottom:1.5rem;
}
@media(max-width:992px) {
    .eg-head {
        grid-template-columns:1fr;
    }
}
.eg-hero,
.eg-head-right {
    background: linear-gradient(135deg, rgba(var(--vz-primary-rgb), 0.08), rgba(var(--vz-success-rgb), 0.03) 46%, var(--eg-surface) 100%);
    border:1px solid var(--eg-border);
    border-radius:5px;
    box-shadow: var(--eg-shadow);
}
.eg-hero {
    padding:1.5rem;
    position:relative;
    overflow:hidden;
}
.eg-hero::after {
    content:"";
    position:absolute;
    width:11rem;
    height:11rem;
    right:-4rem;
    bottom:-4rem;
    border-radius:50%;
    background:radial-gradient(circle, rgba(var(--vz-warning-rgb), 0.18), transparent 68%);
    pointer-events:none;
}
.eg-kicker {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem .8rem;
    border-radius:999px;
    background:rgba(var(--vz-primary-rgb), 0.12);
    color:var(--vz-primary);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.85rem;
}
.eg-head h1 {
    color:var(--eg-heading);
    font-size:clamp(1.7rem, 2.6vw, 2.25rem);
    font-weight:600;
    letter-spacing:-.03em;
    margin:0 0 .45rem;
}
.eg-head p {
    color:var(--eg-muted);
    margin:0;
    max-width:42rem;
}
.eg-head-right {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:1rem;
    padding:1.25rem;
}
.eg-meta-label {
    color:var(--eg-subtle);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.45rem;
}
.eg-status {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.6rem .85rem;
    border-radius:999px;
    border:1px solid var(--eg-border);
    background:var(--eg-surface-soft);
    color:var(--eg-muted);
    font-size:.78rem;
    font-weight:500;
}
.eg-status-dot {
    width:7px; height:7px; border-radius:50%;
    background:#555; transition:background .5s, box-shadow .5s;
}
.eg-status-dot.live { background:var(--eg-generation); box-shadow:0 0 0 .3rem rgba(var(--vz-success-rgb), .16); animation:eg-pulse 2s ease-in-out infinite; }
.eg-status-dot.error { background:var(--eg-import); box-shadow:0 0 0 .3rem rgba(var(--vz-danger-rgb), .16); }
@keyframes eg-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* nav links */
.eg-nav {
    display:flex;
    gap:.65rem;
    flex-wrap:wrap;
}
.eg-nav a {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.65rem .95rem;
    border-radius:5px;
    border:1px solid var(--eg-border);
    background:var(--eg-surface-soft);
    color:var(--eg-heading);
    font-size:.82rem;
    font-weight:600;
    text-decoration:none;
    transition:all .2s ease;
}
.eg-nav a:hover {
    transform:translateY(-1px);
    border-color:rgba(var(--vz-primary-rgb), .28);
    background:rgba(var(--vz-primary-rgb), .08);
}

/* ── ENERGY FLOW DIAGRAM ─────────────────────────────────── */
.eg-flow-grid {
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr);
    gap:1rem;
    margin-bottom:1.5rem;
    align-items:stretch;
}
.eg-flow-wrap {
    background:var(--eg-surface);
    border:1px solid var(--eg-border);
    border-radius:5px;
    overflow:hidden;
    position:relative;
    box-shadow:var(--eg-shadow);
}
.eg-flow-wrap::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right, rgba(var(--vz-primary-rgb), 0.08), transparent 28%),
        linear-gradient(180deg, rgba(var(--vz-light-rgb), 0.02), transparent 35%);
}
.eg-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--eg-border);
}
.eg-panel-title {
    display:flex;
    flex-direction:column;
    gap:.2rem;
}
.eg-panel-title strong {
    color:var(--eg-heading);
    font-size:.95rem;
    font-weight:600;
}
.eg-panel-title span {
    color:var(--eg-subtle);
    font-size:.8rem;
}
#drawing {
    width:100%;
    max-width:100%;
    min-height:0;
    margin:0 auto;
    padding:.35rem 0 1.1rem;
}
#drawing svg {
    display:block;
    width:100%;
    max-width:100%;
}
.eg-array-card {
    background:var(--eg-surface);
    border:1px solid var(--eg-border);
    border-radius:5px;
    overflow:hidden;
    position:relative;
    box-shadow:var(--eg-shadow);
}
.eg-array-card::before {
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top left, rgba(var(--vz-warning-rgb), 0.1), transparent 30%),
        linear-gradient(180deg, rgba(var(--vz-light-rgb), 0.02), transparent 35%);
}
.eg-array-body {
    position:relative;
    padding:1.15rem 1.2rem 1.1rem;
}
.eg-array-chart-wrap {
    position:relative;
    width:240px;
    height:240px;
    max-width:100%;
    margin:0 auto 1rem;
}
.eg-array-donut {
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at center, var(--eg-surface) 0 56%, transparent 57%),
        conic-gradient(from -90deg, rgba(148, 163, 184, 0.18) 0 100%);
    box-shadow:inset 0 0 0 1px rgba(var(--vz-light-rgb), .05);
}
.eg-array-center {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    text-align:center;
}
.eg-array-total {
    color:var(--eg-heading);
    font-size:1.8rem;
    font-weight:700;
    letter-spacing:-.04em;
    line-height:1;
}
.eg-array-total small {
    font-size:.8rem;
    font-weight:600;
    color:var(--eg-subtle);
    margin-left:.25rem;
    letter-spacing:.02em;
}
.eg-array-sub {
    margin-top:.35rem;
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--eg-subtle);
    font-weight:600;
}
.eg-array-sub.idle {
    color:rgba(var(--vz-body-color-rgb), .5);
}
.eg-array-legend {
    display:grid;
    gap:.65rem;
}
.eg-array-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.7rem .8rem;
    background:rgba(var(--vz-light-rgb), .03);
    border:1px solid rgba(var(--vz-light-rgb), .06);
    border-radius:5px;
}
.eg-array-item-label {
    display:flex;
    align-items:center;
    gap:.55rem;
    min-width:0;
}
.eg-array-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 auto;
}
.eg-array-dot.rear { background:#f59e0b; box-shadow:0 0 0 .25rem rgba(245, 158, 11, .12); }
.eg-array-dot.front { background:#34d399; box-shadow:0 0 0 .25rem rgba(52, 211, 153, .12); }
.eg-array-dot.pergola { background:#38bdf8; box-shadow:0 0 0 .25rem rgba(56, 189, 248, .12); }
.eg-array-name {
    color:var(--eg-heading);
    font-size:.82rem;
    font-weight:600;
}
.eg-array-meta {
    color:var(--eg-subtle);
    font-size:.72rem;
}
.eg-array-value {
    text-align:right;
    white-space:nowrap;
}
.eg-array-watts {
    color:var(--eg-heading);
    font-size:.95rem;
    font-weight:700;
    letter-spacing:-.02em;
}
.eg-array-share {
    color:var(--eg-subtle);
    font-size:.72rem;
    margin-top:.1rem;
}

/* ── SECTION LABELS ──────────────────────────────────────── */
.eg-section { margin-bottom:1.5rem; }
.eg-section-head {
    display:flex; align-items:center; gap:1rem;
    margin-bottom:.9rem;
}
.eg-section-label {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    color:var(--eg-heading);
    font-size:.98rem;
    font-weight:600;
    white-space:nowrap;
}
.eg-section-line {
    flex:1; height:1px; background:linear-gradient(90deg, rgba(var(--vz-primary-rgb), .22), transparent 82%);
}

/* ── CARDS GRID ──────────────────────────────────────────── */
.eg-cards {
    display:grid; gap:1rem;
}
.eg-cards-4 { grid-template-columns: repeat(4,1fr); }
.eg-cards-3 { grid-template-columns: repeat(3,1fr); }
.eg-cards-2 { grid-template-columns: repeat(2,1fr); }
.eg-cards-feature {
    grid-template-columns:1fr;
    width:min(100%, calc((100% - 2rem) / 3));
}
@media(max-width:1100px) { .eg-cards-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:768px)  { .eg-cards-4, .eg-cards-3, .eg-cards-2, .eg-cards-feature { grid-template-columns: 1fr; width:100%; } }

/* ── BASE CARD ───────────────────────────────────────────── */
.eg-card {
    background:var(--eg-surface); border:1px solid var(--eg-border);
    border-radius:5px; padding:1.15rem 1.2rem;
    position:relative;
    overflow:hidden;
    transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow:var(--eg-shadow);
}
.eg-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    border-radius:5px 5px 0 0;
    background:linear-gradient(90deg, rgba(var(--vz-primary-rgb), .7), rgba(var(--vz-success-rgb), .35));
    opacity:.55;
    pointer-events:none;
}
.eg-card > * {
    position:relative;
    z-index:1;
}
.eg-card-trend {
    position:absolute;
    inset:.55rem .55rem auto .55rem;
    height:calc(100% - 1.1rem);
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    border-radius:4px;
}
.eg-card-trend::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.02) 52%, rgba(15, 23, 42, 0.10) 100%),
        linear-gradient(90deg, rgba(15, 23, 42, 0.20), rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.00) 82%, rgba(15, 23, 42, 0.18));
}
.eg-card-trend-chip {
    position:absolute;
    top:.6rem;
    right:.7rem;
    padding:.16rem .38rem;
    border-radius:999px;
    border:1px solid rgba(var(--vz-warning-rgb), .08);
    background:rgba(var(--vz-warning-rgb), .05);
    color:rgba(var(--vz-warning-rgb), .72);
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.eg-card-trend-select {
    pointer-events:auto;
    appearance:none;
    -webkit-appearance:none;
    position:absolute;
    z-index:2;
    padding:.2rem 1.1rem .2rem .48rem;
    cursor:pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - .55rem) calc(50% - 1px),
        calc(100% - .32rem) calc(50% - 1px);
    background-size:.24rem .24rem, .24rem .24rem;
    background-repeat:no-repeat;
}
.eg-card-trend-select:focus {
    outline:none;
    border-color:rgba(var(--vz-primary-rgb), .18);
    box-shadow:0 0 0 .16rem rgba(var(--vz-primary-rgb), .08);
}
.eg-card-trend-select option {
    color:var(--eg-heading);
    background:var(--eg-surface);
}
.eg-card-trend-demand .eg-card-trend-chip {
    border-color:rgba(148, 163, 184, .08);
    background-color:rgba(148, 163, 184, .05);
    color:rgba(203, 213, 225, .72);
}
.eg-card-trend-svg {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    shape-rendering:geometricPrecision;
    pointer-events:auto;
    cursor:crosshair;
}
.eg-card-trend-grid {
    fill:none;
    stroke:rgba(var(--vz-warning-rgb), .035);
    stroke-width:.7;
}
.eg-card-trend-area {
    fill:currentColor;
}
.eg-card-trend .eg-card-trend-area {
    color:rgba(245, 158, 11, .1);
}
.eg-card-trend-line {
    fill:none;
    stroke:rgba(var(--vz-warning-rgb), .34);
    stroke-width:1;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    vector-effect:non-scaling-stroke;
}
.eg-card-trend-focus-line {
    fill:none;
    stroke:rgba(255, 255, 255, .18);
    stroke-width:.8;
    vector-effect:non-scaling-stroke;
    opacity:0;
}
.eg-card-trend-focus-dot {
    fill:var(--eg-heading);
    stroke:rgba(15, 23, 42, .5);
    stroke-width:.8;
    vector-effect:non-scaling-stroke;
    opacity:0;
}
.eg-card-trend-empty {
    fill:none;
    stroke:rgba(var(--vz-light-rgb), .06);
    stroke-width:1.1;
    stroke-dasharray:4 5;
}
.eg-card-trend-demand .eg-card-trend-grid {
    stroke:rgba(148, 163, 184, .03);
}
.eg-card-trend-demand .eg-card-trend-area {
    color:rgba(203, 213, 225, .1);
}
.eg-card-trend-demand .eg-card-trend-line {
    stroke:rgba(203, 213, 225, .34);
}
.eg-card-trend-solar-soft .eg-card-trend-chip {
    border-color:rgba(var(--vz-warning-rgb), .08);
    background-color:rgba(var(--vz-warning-rgb), .04);
    color:rgba(var(--vz-warning-rgb), .66);
}
.eg-card-trend-solar-soft .eg-card-trend-grid {
    stroke:rgba(var(--vz-warning-rgb), .026);
}
.eg-card-trend-solar-soft .eg-card-trend-area {
    color:rgba(245, 158, 11, .075);
}
.eg-card-trend-solar-soft .eg-card-trend-line {
    stroke:rgba(245, 158, 11, .28);
}
.eg-card-trend-solar-muted .eg-card-trend-chip {
    border-color:rgba(245, 158, 11, .07);
    background-color:rgba(245, 158, 11, .035);
    color:rgba(251, 191, 36, .62);
}
.eg-card-trend-solar-muted .eg-card-trend-grid {
    stroke:rgba(245, 158, 11, .022);
}
.eg-card-trend-solar-muted .eg-card-trend-area {
    color:rgba(251, 191, 36, .06);
}
.eg-card-trend-solar-muted .eg-card-trend-line {
    stroke:rgba(251, 191, 36, .24);
}
.eg-card-trend-harvest .eg-card-trend-chip {
    border-color:rgba(var(--vz-success-rgb), .08);
    background-color:rgba(var(--vz-success-rgb), .05);
    color:rgba(var(--vz-success-rgb), .72);
}
.eg-card-trend-harvest .eg-card-trend-grid {
    stroke:rgba(var(--vz-success-rgb), .026);
}
.eg-card-trend-harvest .eg-card-trend-area {
    color:rgba(var(--vz-success-rgb), .065);
}
.eg-card-trend-harvest .eg-card-trend-line {
    stroke:rgba(var(--vz-success-rgb), .24);
}
.eg-card-trend-gridday .eg-card-trend-chip {
    border-color:rgba(148, 163, 184, .08);
    background-color:rgba(148, 163, 184, .05);
    color:rgba(203, 213, 225, .72);
}
.eg-card-trend-gridday .eg-card-trend-grid {
    stroke:rgba(148, 163, 184, .05);
}
.eg-card-trend-gridday .eg-card-trend-area {
    color:rgba(94, 234, 212, .09);
}
.eg-card-trend-gridday .eg-card-trend-line {
    stroke:rgba(94, 234, 212, .48);
}
.eg-card-trend-midline {
    fill:none;
    stroke:rgba(148, 163, 184, .16);
    stroke-width:.9;
    vector-effect:non-scaling-stroke;
}
.eg-card-trend-battery .eg-card-trend-chip {
    border-color:rgba(var(--vz-info-rgb), .08);
    background-color:rgba(var(--vz-info-rgb), .05);
    color:rgba(var(--vz-info-rgb), .72);
}
.eg-card-trend-battery .eg-card-trend-grid {
    stroke:rgba(var(--vz-info-rgb), .03);
}
.eg-card-trend-battery .eg-card-trend-area {
    color:rgba(var(--vz-info-rgb), .1);
}
.eg-card-trend-battery .eg-card-trend-line {
    stroke:rgba(var(--vz-info-rgb), .34);
}
.eg-spark-tooltip {
    position:fixed;
    z-index:1200;
    min-width:120px;
    max-width:220px;
    padding:.5rem .65rem;
    border-radius:5px;
    border:1px solid rgba(var(--vz-light-rgb), .12);
    background:rgba(15, 23, 42, .92);
    color:#fff;
    box-shadow:0 10px 30px rgba(0, 0, 0, .22);
    pointer-events:none;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .12s ease, transform .12s ease;
    backdrop-filter:blur(8px);
}
.eg-spark-tooltip.show {
    opacity:1;
    transform:translateY(0);
}
.eg-spark-tooltip-time {
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.62);
    font-weight:700;
}
.eg-spark-tooltip-value {
    margin-top:.18rem;
    font-size:.84rem;
    color:#fff;
    font-weight:700;
}

.eg-card:hover { transform:translateY(-2px); border-color:rgba(var(--vz-primary-rgb), .22); }
.eg-card.card-success {
    background:var(--eg-surface);
    border-color:rgba(var(--vz-success-rgb), .35);
    box-shadow:0 12px 28px rgba(var(--vz-success-rgb), .09);
}
.eg-card.card-danger  {
    background:var(--eg-surface);
    border-color:rgba(var(--vz-danger-rgb), .35);
    box-shadow:0 12px 28px rgba(var(--vz-danger-rgb), .09);
}

.eg-card-icon {
    width:2.5rem;
    height:2.5rem;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    color:var(--vz-primary);
    background:rgba(var(--vz-primary-rgb), 0.12);
    margin-bottom:.95rem;
    transition:opacity .3s, color .3s;
}
.eg-card-label {
    color:var(--eg-subtle); font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; font-weight:600; margin-bottom:.5rem;
}

.eg-card h2 {
    font-size:clamp(1.65rem, 2.2vw, 2.05rem); font-weight:650;
    line-height:1; color:var(--eg-heading); margin:0 0 .45rem;
    transition:color .4s;
    display:flex; align-items:baseline; gap:.25rem; flex-wrap:wrap;
}
.eg-card h2.updated { color:#fff; }
.eg-card h2 .counter-value { letter-spacing:-.04em; }
.eg-card h2 .measurement-name {
    font-size:.82rem; color:var(--eg-subtle); font-weight:600; letter-spacing:0;
}

.eg-card .sub-data {
    color:var(--eg-muted); font-size:.82rem;
    line-height:1.65; margin-top:.35rem;
}
.eg-card .sub-data b { color:var(--eg-heading); font-weight:600; }

.eg-card.card-solar-generation-total h2,
.eg-card.card-solar-generation-today-total h2,
.eg-card.card-solar-home-demand h2 {
    font-size:clamp(1.85rem, 2.4vw, 2.2rem);
}

/* avatar-title — kept for JS battery icon updates, styled as card icon  */
.eg-card .avatar-title {
    display:none; /* icon updates go into .eg-card-icon via JS, this is fallback */
}

/* battery card icon colour */
.card-battery-charge .eg-bat-icon { color:var(--eg-battery); background:rgba(var(--vz-info-rgb), 0.12); }

/* solar number colour overrides */
.card-solar-generation h2,
.card-solar-generation2 h2,
.card-solar-generation-total h2 { color:var(--eg-solar); }
.card-solar-generation-total .sub-data {
    max-width:68%;
}
.card-solar-generation .sub-data,
.card-solar-generation2 .sub-data {
    max-width:68%;
}
.card-solar-generation-today-total .sub-data {
    max-width:68%;
}
.card-solar-generation-today .sub-data {
    max-width:68%;
}
.card-solar-home-demand .sub-data {
    max-width:68%;
}
.card-battery-charge .sub-data {
    max-width:68%;
}
.card-solar-generation-today h2 {
    color:var(--eg-heading);
}
.card-solar-generation-today.net-export h2 {
    color:var(--eg-generation);
}
.card-solar-generation-today.net-import h2 {
    color:var(--eg-import);
}
.card-solar-generation-today.net-balanced h2 {
    color:var(--eg-heading);
}
.card-solar-generation-today-total h2 { color:var(--eg-generation); }
.card-solar-home-demand h2 { color:var(--eg-heading); }

/* battery number colour */
.card-battery-charge h2 { color:var(--eg-battery); }
.card-battery-energy-stored h2 { color:var(--eg-battery); }
.card-battery-energy-space-available h2 { color:rgba(var(--vz-info-rgb), .8); }

/* grid card */
.card-grid-home-demand h2 { color:var(--eg-heading); }
.eg-card.card-success .card-grid-home-demand h2 { color:var(--eg-generation); }
.eg-card.card-danger  .card-grid-home-demand h2 { color:var(--eg-import); }
.grid-status {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-top:.55rem;
    padding:.38rem .7rem;
    border:1px solid rgba(var(--vz-light-rgb), .08);
    border-radius:999px;
    background:rgba(var(--vz-light-rgb), .03);
    color:var(--eg-muted);
    font-size:.76rem;
    font-weight:600;
}
.grid-status-dot {
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(var(--vz-light-rgb), .26);
}
.grid-status.importing { color:var(--eg-import); }
.grid-status.importing .grid-status-dot { background:var(--eg-import); box-shadow:0 0 0 .25rem rgba(var(--vz-danger-rgb), .12); }
.grid-status.exporting { color:var(--eg-generation); }
.grid-status.exporting .grid-status-dot { background:var(--eg-generation); box-shadow:0 0 0 .25rem rgba(var(--vz-success-rgb), .12); }
.grid-status.idle { color:var(--eg-muted); }

.grid-capacity {
    display:grid;
    gap:.7rem;
    margin-top:.9rem;
}
.grid-cap-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:.5rem .85rem;
    align-items:center;
}
.grid-cap-meta {
    min-width:0;
}
.grid-cap-label {
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--eg-subtle);
    font-weight:600;
}
.grid-cap-sub {
    margin-top:.16rem;
    color:var(--eg-muted);
    font-size:.75rem;
}
.grid-cap-value {
    text-align:right;
    white-space:nowrap;
}
.grid-cap-strong {
    color:var(--eg-heading);
    font-size:.9rem;
    font-weight:700;
}
.grid-cap-share {
    margin-top:.08rem;
    color:var(--eg-subtle);
    font-size:.72rem;
}
.grid-cap-bar {
    grid-column:1 / -1;
    position:relative;
    height:7px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(var(--vz-light-rgb), .08);
}
.grid-cap-fill {
    position:absolute;
    inset:0 auto 0 0;
    width:0%;
    border-radius:999px;
    transition:width .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.grid-cap-fill.export,
.grid-cap-fill.import {
    background:var(--grid-fill-color, rgba(var(--vz-success-rgb), .88));
    box-shadow:0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.grid-quality {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:.75rem;
    margin-top:.9rem;
}
.grid-quality-tile {
    border:1px solid rgba(148,163,184,.14);
    border-radius:4px;
    background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
    padding:.75rem .9rem;
    min-height:92px;
}
.grid-quality-label {
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--eg-muted);
}
.grid-quality-value {
    margin-top:.35rem;
    font-size:1.15rem;
    font-weight:700;
    line-height:1.1;
    color:var(--eg-heading);
}
.grid-quality-value.good { color:var(--eg-generation); }
.grid-quality-value.warn { color:#f59e0b; }
.grid-quality-value.alert { color:var(--eg-import); }
.grid-quality-meta {
    margin-top:.2rem;
    font-size:.8rem;
    color:var(--eg-muted);
}
.grid-quality-meta.good { color:rgba(var(--vz-success-rgb), .82); }
.grid-quality-meta.warn { color:rgba(245, 158, 11, .9); }
.grid-quality-meta.alert { color:rgba(var(--vz-danger-rgb), .88); }
@media(max-width:576px) {
    .grid-quality { grid-template-columns:1fr; }
}

/* power flow arrows */
.power-flow {
    display:none; align-items:center; gap:.3rem; margin-top:.5rem;
    font-size:.78rem;
}
.power-flow.import { color:var(--eg-import); }
.power-flow.export { color:var(--eg-generation); }
.arrow-import, .arrow-export {
    display:inline-flex; gap:2px;
}

/* Battery 3D panel — full-width block below the metric cards */
.eg-battery-3d {
    background:var(--eg-surface); border:1px solid var(--eg-border);
    border-radius:5px; margin-top:1rem; overflow:hidden;
    position:relative;
    width:min(100%, calc((100% - 2rem) / 3));
    box-shadow:var(--eg-shadow);
}
#battery-svg {
    width:100%;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding:2.25rem 1rem 1rem;
}
#battery-svg canvas {
    display:block;
}
#chargeTextContainer {
    position:absolute;
    top:.85rem;
    right:auto;
    bottom:auto;
    left:1rem;
    display:inline-flex;
    width:auto;
    max-width:max-content;
    height:auto;
    align-items:baseline;
    gap:.35rem;
    padding:.25rem .55rem;
    border-radius:999px;
    background:rgba(var(--vz-info-rgb), .12);
    color:var(--eg-battery);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:1;
    text-align:left;
    pointer-events:none;
}
#chargeTextContainer .soc-value {
    font-size:.95rem;
    letter-spacing:-.03em;
}
#chargeTextContainer .soc-label {
    color:var(--eg-subtle);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.08em;
}

/* ── AGILE SECTION ───────────────────────────────────────── */
.eg-agile-tiles {
    display:grid; grid-template-columns:repeat(6,1fr); gap:1rem;
    margin-bottom:1.2rem;
}
@media(max-width:1100px) { .eg-agile-tiles { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px)  { .eg-agile-tiles { grid-template-columns:repeat(2,1fr); } }

.eg-tile {
    background:var(--eg-surface); border:1px solid var(--eg-border);
    border-radius:5px; padding:1rem 1.1rem;
    box-shadow:var(--eg-shadow);
}
.eg-tile-label {
    color:var(--eg-subtle); font-size:.68rem; letter-spacing:.08em;
    text-transform:uppercase; font-weight:600; margin-bottom:.45rem;
}
.eg-tile h2 {
    font-size:1.8rem; font-weight:700;
    color:var(--eg-heading); margin:0; line-height:1;
}
.eg-tile h2 small { font-size:.75rem; color:var(--eg-subtle); font-weight:600; }
.eg-tile .hero-value { font-size:1.5rem; color:var(--eg-solar); font-weight:700; }
.eg-tile-low  h2 { color:var(--eg-generation); }
.eg-tile-high h2 { color:var(--eg-import); }
.eg-tile-2hr  h2 { color:var(--eg-battery); }
.eg-tile-3hr  h2 { color:rgba(var(--vz-info-rgb), .82); }
.eg-tile-cost h2 { color:var(--eg-heading); }
.eg-tile-sun  h2, .eg-tile-sun .hero-value { color:var(--eg-solar); }

/* agile date nav */
.eg-agile-nav {
    display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; flex-wrap:wrap;
}
.eg-agile-nav h4 {
    color:var(--eg-heading); font-size:1rem;
    font-weight:600; margin:0; flex:1;
}
.eg-btn {
    background:rgba(var(--vz-light-rgb), .08); border:1px solid rgba(var(--vz-light-rgb), .12); border-radius:5px;
    color:rgba(255, 255, 255, .92); font-size:.8rem; padding:.55rem .9rem;
    cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
    font-weight:600; transition:all .2s ease;
}
.eg-btn:hover {
    border-color:rgba(255, 255, 255, .24);
    background:rgba(var(--vz-primary-rgb), .16);
    color:#fff;
}

/* agile chart wrapper */
.eg-chart-wrap {
    background:var(--eg-surface); border:1px solid var(--eg-border);
    border-radius:5px; padding:1rem; overflow:hidden;
    box-shadow:var(--eg-shadow);
}

/* agile table */
.eg-table-wrap {
    background:var(--eg-surface); border:1px solid var(--eg-border);
    border-radius:5px; overflow:hidden; margin-top:1rem;
    box-shadow:var(--eg-shadow);
}
.eg-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.eg-table thead tr { border-bottom:1px solid var(--eg-border); background:rgba(var(--vz-light-rgb), 0.03); }
.eg-table th {
    padding:.55rem .85rem;
    color:var(--eg-subtle);
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:600;
    font-size:.74rem;
}
.eg-table td {
    padding:.45rem .85rem;
    border-bottom:1px solid var(--eg-border);
    color:var(--eg-muted);
    line-height:1.35;
}
.eg-table tbody tr:last-child td { border-bottom:none; }

/* ── FIXED BOTTOM NAV ────────────────────────────────────── */
.eg-fixed-nav {
    position:fixed; bottom:1.2rem; right:1.2rem; z-index:1000;
    display:flex; gap:.5rem; align-items:center;
    padding:.5rem;
    border:1px solid rgba(var(--vz-light-rgb), .1);
    border-radius:5px;
    background:rgba(var(--vz-secondary-bg-rgb), .2);
    backdrop-filter:blur(6px);
    box-shadow:0 8px 20px rgba(0, 0, 0, .18);
}

/* ── ENTRY ANIMATIONS ────────────────────────────────────── */
@keyframes eg-up {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
}
.eg-flow-wrap,
.eg-array-card  { animation:eg-up .45s ease both; }
.eg-section:nth-child(2) { animation:eg-up .45s .05s ease both; }
.eg-section:nth-child(3) { animation:eg-up .45s .1s ease both; }
.eg-section:nth-child(4) { animation:eg-up .45s .15s ease both; }
.eg-section:nth-child(5) { animation:eg-up .45s .2s ease both; }
.eg-section:nth-child(6) { animation:eg-up .45s .25s ease both; }
.eg-section:nth-child(7) { animation:eg-up .45s .3s ease both; }

@media(max-width:768px) {
    .eg-flow-grid {
        grid-template-columns:1fr;
    }

    .eg-flow-wrap {
        width:100%;
    }

    .eg-battery-3d {
        width:100%;
    }

    .eg-head-right {
        padding:1rem;
    }

    .eg-fixed-nav {
        left:1rem;
        right:1rem;
        bottom:1rem;
        justify-content:center;
    }

    .eg-btn {
        flex:1 1 auto;
        justify-content:center;
    }
}