/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-zvf6r9sjzu] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
}

main[b-zvf6r9sjzu] {
    flex: 1;
}

.sidebar[b-zvf6r9sjzu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-zvf6r9sjzu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zvf6r9sjzu]  a, .top-row[b-zvf6r9sjzu]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-zvf6r9sjzu]  a:hover, .top-row[b-zvf6r9sjzu]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-zvf6r9sjzu]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-zvf6r9sjzu] {
        justify-content: space-between;
    }

    .top-row[b-zvf6r9sjzu]  a, .top-row[b-zvf6r9sjzu]  .btn-link {
        margin-left: 0;
    }
}

/* Sidebar layout disabled — app uses full-width pages (no side nav).
   Keeping row flex here pushed Account/Login content to the left. */
@media (min-width: 641px) {
    .sidebar[b-zvf6r9sjzu] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zvf6r9sjzu] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-zvf6r9sjzu]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-zvf6r9sjzu], article[b-zvf6r9sjzu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-zvf6r9sjzu] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zvf6r9sjzu] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-9ervwzpt5o] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-9ervwzpt5o] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-9ervwzpt5o] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-9ervwzpt5o] {
    font-size: 1.1rem;
}

.bi[b-9ervwzpt5o] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-9ervwzpt5o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-9ervwzpt5o] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-9ervwzpt5o] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-9ervwzpt5o] {
        padding-bottom: 1rem;
    }

    .nav-item[b-9ervwzpt5o]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-9ervwzpt5o]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-9ervwzpt5o]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-9ervwzpt5o] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9ervwzpt5o] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-9ervwzpt5o] {
        display: none;
    }

    .nav-scrollable[b-9ervwzpt5o] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dtvvtzj71u],
.components-reconnect-repeated-attempt-visible[b-dtvvtzj71u],
.components-reconnect-failed-visible[b-dtvvtzj71u],
.components-pause-visible[b-dtvvtzj71u],
.components-resume-failed-visible[b-dtvvtzj71u],
.components-rejoining-animation[b-dtvvtzj71u] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-retrying[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-failed[b-dtvvtzj71u],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dtvvtzj71u] {
    display: block;
}


#components-reconnect-modal[b-dtvvtzj71u] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dtvvtzj71u 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dtvvtzj71u 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dtvvtzj71u 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dtvvtzj71u]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dtvvtzj71u 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dtvvtzj71u {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dtvvtzj71u {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dtvvtzj71u {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dtvvtzj71u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dtvvtzj71u] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dtvvtzj71u] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dtvvtzj71u] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dtvvtzj71u] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-dtvvtzj71u] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dtvvtzj71u] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dtvvtzj71u 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dtvvtzj71u] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dtvvtzj71u {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AllZonesTimeline.razor.rz.scp.css */
/* AllZonesTimeline — shell allineata alle pagine recenti + timeline più alte */

.azt-page[b-25gmdg0dur] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 14px 48px;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
}

.app.azt-page[b-25gmdg0dur] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));
}

@media (max-width: 600px) {
    .azt-page[b-25gmdg0dur] {
        padding: 10px 10px 48px;
    }
}

/* ── Header ── */
.azt-top[b-25gmdg0dur] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 4px;
}

.azt-back[b-25gmdg0dur] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.45rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.azt-brand[b-25gmdg0dur] {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.azt-brand h1[b-25gmdg0dur] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}

.azt-meta[b-25gmdg0dur] {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text3);
}

.azt-legend[b-25gmdg0dur] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 2px 2px 12px;
    margin-bottom: 4px;
}

.azt-legend-item[b-25gmdg0dur] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text2);
}

.azt-content[b-25gmdg0dur] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 8px;
    box-sizing: border-box;
    overflow: visible;
}

/* Card piano */
.azt-floor.zjd-list-card[b-25gmdg0dur] {
    margin-bottom: 14px;
    padding: 14px 12px 12px;
    border-radius: 16px;
}

.azt-floor-header[b-25gmdg0dur] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--border);
}

.azt-floor-name[b-25gmdg0dur] {
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--text);
}

.azt-floor-count[b-25gmdg0dur] {
    font-size: 0.75rem;
    color: var(--text3);
    font-family: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace;
}

/* Scala ore: offset = larghezza label zona + gap */
.azt-hours[b-25gmdg0dur] {
    margin-top: 0 !important;
    margin-bottom: 10px;
    padding-left: calc(88px + 10px) !important;
    box-sizing: border-box;
}

.azt-row[b-25gmdg0dur] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    min-width: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 12px;
    padding: 6px 2px;
}

.azt-row:last-child[b-25gmdg0dur] {
    margin-bottom: 0;
}

.azt-row:active[b-25gmdg0dur] {
    background: var(--surface2);
}

.azt-zone-label[b-25gmdg0dur] {
    flex: 0 0 88px;
    width: 88px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 2px;
}

.azt-zone-icon[b-25gmdg0dur] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.azt-zone-name[b-25gmdg0dur] {
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.azt-zone-timeline[b-25gmdg0dur] {
    flex: 1;
    min-width: 0;
}

.azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline {
    margin-bottom: 0;
}

/* ── Timeline più alte (compact overview) ── */
.azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact {
    --zjd-bar-radius: 12px;
}

.azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact .zjd-bar {
    height: 52px; /* era 40px */
}

.azt-zone-timeline[b-25gmdg0dur]  .zjd-seg-name {
    font-size: 0.72rem;
}

.azt-zone-timeline[b-25gmdg0dur]  .zjd-seg-hours {
    font-size: 0.62rem;
}

@media (min-width: 480px) {
    .azt-zone-label[b-25gmdg0dur] {
        flex-basis: 110px;
        width: 110px;
    }

    .azt-hours[b-25gmdg0dur] {
        padding-left: calc(110px + 10px) !important;
    }

    .azt-zone-name[b-25gmdg0dur] {
        font-size: 0.82rem;
    }
}

@media (min-width: 600px) {
    .azt-page[b-25gmdg0dur] {
        padding: 16px 18px 48px;
    }

    .azt-zone-label[b-25gmdg0dur] {
        flex-basis: 132px;
        width: 132px;
    }

    .azt-hours[b-25gmdg0dur] {
        padding-left: calc(132px + 12px) !important;
    }

    .azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact .zjd-bar {
        height: 56px;
    }

    .azt-floor.zjd-list-card[b-25gmdg0dur] {
        padding: 16px 14px 14px;
    }
}

@media (min-width: 900px) {
    .azt-page[b-25gmdg0dur] {
        max-width: 1100px;
        padding: 18px 20px 56px;
    }

    .azt-zone-label[b-25gmdg0dur] {
        flex-basis: 150px;
        width: 150px;
    }

    .azt-hours[b-25gmdg0dur] {
        padding-left: calc(150px + 14px) !important;
    }

    .azt-zone-name[b-25gmdg0dur] {
        font-size: 0.88rem;
    }

    /* Desktop: barre ancora un po’ più alte */
    .azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact .zjd-bar {
        height: 62px;
    }

    .azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact {
        --zjd-bar-radius: 14px;
    }

    .azt-row[b-25gmdg0dur] {
        gap: 12px;
        margin-bottom: 12px;
        padding: 8px 4px;
    }

    .azt-row:hover[b-25gmdg0dur] {
        background: color-mix(in srgb, var(--surface2) 80%, transparent);
    }

    .azt-floor.zjd-list-card[b-25gmdg0dur] {
        margin-bottom: 16px;
        padding: 18px 16px 16px;
    }
}

@media (min-width: 1100px) {
    .azt-zone-timeline[b-25gmdg0dur]  .zjd-timeline-compact .zjd-bar {
        height: 66px;
    }
}
/* /Components/Pages/ClimatePage.razor.rz.scp.css */
/* Header extra actions: icone su tablet/desktop, overflow ⋯ su mobile */
.cl-header-extra[b-lflbp0vc2r] {
    display: none;
    align-items: center;
    gap: 4px;
}

.cl-more[b-lflbp0vc2r] {
    position: relative;
    display: flex;
    align-items: center;
}

.cl-more-backdrop[b-lflbp0vc2r] {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: transparent;
}

.cl-more-sheet[b-lflbp0vc2r] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    min-width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.cl-more-item[b-lflbp0vc2r] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
}

.cl-more-item i[b-lflbp0vc2r] {
    font-size: 1.05rem;
    color: var(--topbar-icon, #7E57C2);
    width: 1.2em;
    text-align: center;
}

.cl-more-item:active[b-lflbp0vc2r],
.cl-more-item:hover[b-lflbp0vc2r] {
    background: var(--surface2);
}

@media (min-width: 721px) {
    .cl-header-extra[b-lflbp0vc2r] {
        display: flex;
        margin-left: 10px;
    }

    .cl-more[b-lflbp0vc2r] {
        display: none;
    }
}

/* Climatizzazione — layout mockup climate-v1 (≥1100 desktop multi-piano) */

.climate-page[b-lflbp0vc2r] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
}

/* Scroll pagina intera (desktop multi-colonna / mobile con tante zone) */
.app.climate-page[b-lflbp0vc2r] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));
}

.cl-header[b-lflbp0vc2r] {
    padding: 14px 14px 0;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .cl-header[b-lflbp0vc2r] {
        padding: 10px 10px 0;
    }
}

.climate-page[b-lflbp0vc2r]  .climate-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-title-ico[b-lflbp0vc2r] {
    color: #60A5FA;
    font-size: 1.05rem;
    flex-shrink: 0;
}

html[data-theme="light"] .cl-title-ico[b-lflbp0vc2r] {
    color: #2563EB;
}

/* ── Mobile vs desktop floors ── */
.cl-floors-mobile[b-lflbp0vc2r] {
    display: block;
    padding: 0 14px;
}

.cl-floors-desktop[b-lflbp0vc2r] {
    display: none;
}

@media (max-width: 600px) {
    .cl-floors-mobile[b-lflbp0vc2r] {
        padding: 0 10px;
    }
}

@media (min-width: 1100px) {
    .cl-floors-mobile[b-lflbp0vc2r] {
        display: none;
    }

    .cl-floors-desktop[b-lflbp0vc2r] {
        display: grid;
        grid-template-columns: repeat(var(--cl-floor-cols, 3), minmax(0, 1fr));
        /* Colonne 1fr uguali; il separatore sta nel gap (non ruba larghezza) */
        column-gap: 28px;
        row-gap: 20px;
        align-items: start;
        padding: 0 20px 8px;
    }

    .cl-header[b-lflbp0vc2r] {
        padding: 14px 20px 0;
    }

    /* Separatore verticale centrato nel gap tra piani */
    .cl-floors-desktop .cl-floor-col[b-lflbp0vc2r] {
        position: relative;
        min-width: 0; /* evita overflow che sbilancia 1fr */
    }

    .cl-floors-desktop .cl-floor-col:not(:first-child)[b-lflbp0vc2r]::before {
        content: "";
        position: absolute;
        left: -14px; /* metà di column-gap 28px */
        top: 6px;
        bottom: 6px;
        width: 1px;
        background: color-mix(in srgb, var(--border2, var(--border)) 75%, transparent);
        pointer-events: none;
    }
}

/* ── Mobile tabs ── */
.cl-tabs[b-lflbp0vc2r] {
    margin-bottom: 10px;
    gap: 6px;
}

/* ── Mobile floor strip (più alta e ariosa) ── */
.cl-floor-strip[b-lflbp0vc2r] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 14px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.cl-floor-strip .fs-cell[b-lflbp0vc2r] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 14px 14px 15px;
    border: none;
    border-radius: 0;
    background: transparent;
    line-height: 1.15;
}

.cl-floor-strip .fs-cell + .fs-cell[b-lflbp0vc2r] {
    border-left: 1px solid var(--border);
}

.cl-floor-strip .fs-label[b-lflbp0vc2r] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cl-floor-strip .fs-val[b-lflbp0vc2r] {
    font-size: 1.15rem;
    font-weight: 800;
    gap: 4px;
}

.cl-floor-strip .fs-unit[b-lflbp0vc2r] {
    font-size: 0.75rem;
    font-weight: 650;
}

.cl-floor-strip .ico-temp[b-lflbp0vc2r],
.cl-floor-strip .ico-hum[b-lflbp0vc2r] {
    font-size: 0.95rem;
}

/* Fan bar spacing under strip */
.cl-floors-mobile[b-lflbp0vc2r]  .fan-bar {
    margin-top: 0;
    margin-bottom: 12px;
}

/* Content padding for zone grid on mobile */
.cl-content[b-lflbp0vc2r] {
    flex: none;
    overflow: visible;
    padding: 0 0 8px;
}

/* ── Desktop floor column ──
   Solo l’header (titolo + medie + sparkline) è “card”.
   Fan e zone restano aperti sul fondo pagina → niente doppio bordo. */
.cl-floor-col[b-lflbp0vc2r] {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cl-floor-col-head[b-lflbp0vc2r] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding: 16px 16px 14px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.cl-floor-name[b-lflbp0vc2r] {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cl-floor-stats[b-lflbp0vc2r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 0;
    align-items: stretch;
}

/* Temp e umid: stessa altezza, sparkline ancorate in basso */
.cl-floor-stat[b-lflbp0vc2r] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 72px;
}

.cl-floor-stat-row[b-lflbp0vc2r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.cl-floor-stat[b-lflbp0vc2r]  .cl-spark {
    display: block;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 10px;
    height: 28px;
}

.cl-floor-lk[b-lflbp0vc2r] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
}

.cl-floor-lv[b-lflbp0vc2r] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cl-floor-lv i[b-lflbp0vc2r] {
    font-size: 1.1rem;
    margin-right: 1px;
}

.cl-floor-lv .u[b-lflbp0vc2r] {
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--text3);
    margin-left: 1px;
}

/* Separatore non più necessario: la card header ha già il bordo inferiore */
.cl-floor-col-divider[b-lflbp0vc2r] {
    display: none;
}

.cl-floor-fan[b-lflbp0vc2r] {
    margin-bottom: 0;
}

.cl-floor-fan[b-lflbp0vc2r]  .fan-bar {
    margin-top: 0;
    /* Stessa “peso” visivo delle zone, senza annidarsi in un bordo esterno */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.cl-floor-zones[b-lflbp0vc2r] {
    margin-top: 0;
    gap: 12px;
}

.cl-floor-empty[b-lflbp0vc2r] {
    font-size: 0.82rem;
    color: var(--text3);
    padding: 4px 2px;
}

/* ── Summary KPI ── */
.cl-summary[b-lflbp0vc2r] {
    gap: 8px;
    margin-bottom: 14px;
}

.cl-sum-chip[b-lflbp0vc2r] {
    gap: 4px;
    min-width: 0;
}

/* Mobile: valore sopra, label sotto (markup ha sc-text prima) */
.cl-sum-chip .sc-val[b-lflbp0vc2r] {
    order: 1;
}

.cl-sum-chip .sc-text[b-lflbp0vc2r] {
    order: 2;
}

/* Hint nascosto su mobile (card compatte) */
.cl-summary .sc-hint[b-lflbp0vc2r] {
    display: none;
}

.cl-summary .sc-den[b-lflbp0vc2r],
.cl-summary .sc-unit[b-lflbp0vc2r] {
    font-size: 0.72em;
    font-weight: 650;
    color: var(--text3);
    margin-left: 2px;
}

/* Override app.css .sc-val span { font-size: 11px } che schiacciava emoji/numeri */
.cl-summary .sc-val span[b-lflbp0vc2r] {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.cl-summary .sc-val-split[b-lflbp0vc2r] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.cl-summary .sc-part[b-lflbp0vc2r] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text);
}

.cl-summary .sc-emo[b-lflbp0vc2r] {
    font-size: 1.05em;
    line-height: 1;
    opacity: 1;
}

.cl-summary .sc-num[b-lflbp0vc2r] {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: var(--text);
}

/* Desktop: riga orizzontale, valore grande a destra, hint sotto label */
@media (min-width: 1100px) {
    .cl-summary[b-lflbp0vc2r] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 18px;
    }

    .cl-sum-chip[b-lflbp0vc2r] {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 16px 20px;
        padding: 18px 22px !important;
        min-height: 92px;
        text-align: left !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    }

    .cl-sum-chip .sc-val[b-lflbp0vc2r],
    .cl-sum-chip .sc-text[b-lflbp0vc2r] {
        order: 0;
    }

    .cl-sum-chip .sc-text[b-lflbp0vc2r] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .cl-sum-chip .sc-lbl[b-lflbp0vc2r] {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--text2);
    }

    .cl-sum-chip .sc-hint[b-lflbp0vc2r] {
        display: block;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--text3);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .cl-sum-chip .sc-val[b-lflbp0vc2r] {
        flex-shrink: 0;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        font-family: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace;
    }

    .cl-sum-chip .sc-val .ico-temp[b-lflbp0vc2r],
    .cl-sum-chip .sc-val .ico-hum[b-lflbp0vc2r] {
        font-size: 1.35rem;
        margin-right: 4px;
    }

    .cl-sum-chip .sc-den[b-lflbp0vc2r],
    .cl-sum-chip .sc-unit[b-lflbp0vc2r] {
        font-size: 1rem;
        font-weight: 650;
        margin-left: 4px;
        color: var(--text3);
    }

    /* Device attivi: emoji + numeri alla stessa scala del resto (2rem) */
    .cl-sum-chip .sc-val-split[b-lflbp0vc2r] {
        gap: 22px;
    }

    .cl-sum-chip .sc-part[b-lflbp0vc2r] {
        gap: 8px;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        font-family: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace;
    }

    .cl-sum-chip .sc-emo[b-lflbp0vc2r] {
        font-size: 1.65rem;
        line-height: 1;
    }

    .cl-sum-chip .sc-num[b-lflbp0vc2r] {
        font-size: 2rem;
        font-weight: 800;
    }

    button.cl-sum-chip:hover[b-lflbp0vc2r] {
        border-color: var(--border2);
        background: var(--surface2);
    }

    button.cl-sum-chip:focus-visible[b-lflbp0vc2r] {
        outline: 2px solid color-mix(in srgb, #60A5FA 45%, transparent);
        outline-offset: 2px;
    }
}
/* /Components/Pages/CommandHistoryPage.razor.rz.scp.css */
.ch-page[b-agcnph1efn] {
    --ch-open: #EAB308;
    --ch-closed: #94A3B8;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}

html[data-theme="light"] .ch-page[b-agcnph1efn] {
    --ch-open: #CA8A04;
    --ch-closed: #64748B;
}

@media (max-width: 600px) {
    .app.ch-page[b-agcnph1efn] { max-width: 100%; margin: 0; width: 100%; }
}

.ch-page *[b-agcnph1efn], .ch-page *[b-agcnph1efn]::before, .ch-page *[b-agcnph1efn]::after { box-sizing: border-box; }

.ch-top[b-agcnph1efn] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 0;
}
.ch-back[b-agcnph1efn] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.45rem; flex-shrink: 0; cursor: pointer;
}
.ch-brand[b-agcnph1efn] { min-width: 0; flex: 1; }
.ch-kicker[b-agcnph1efn] {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text3);
}
.ch-brand h1[b-agcnph1efn] {
    margin: 2px 0 0; font-size: 1.22rem; font-weight: 750;
    letter-spacing: -0.03em; line-height: 1.2;
}

.ch-content[b-agcnph1efn] { padding: 14px 14px 40px; }

.ch-filters[b-agcnph1efn] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ch-chip[b-agcnph1efn] {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text2);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem; font-weight: 750;
    cursor: pointer;
}
.ch-chip.on[b-agcnph1efn] {
    background: var(--text);
    color: var(--bg);
    border-color: transparent;
}
.ch-chip i[b-agcnph1efn] { font-size: 0.95rem; }

.ch-day-nav[b-agcnph1efn] {
    display: flex; align-items: center; gap: 6px;
    margin: 4px 0 16px;
}
.ch-nav-arrow[b-agcnph1efn] {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface2); color: var(--text);
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; padding: 0;
}
.ch-nav-arrow:disabled[b-agcnph1efn] { opacity: 0.35; cursor: default; }
.ch-day-label[b-agcnph1efn] {
    flex: 1; min-width: 0;
    border: 1px solid var(--border); background: var(--bg);
    border-radius: 10px; padding: 6px 10px; text-align: center;
}
.ch-day-main[b-agcnph1efn] {
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.ch-day-sub[b-agcnph1efn] { margin-top: 1px; font-size: 11px; color: var(--text3); font-weight: 500; }
.ch-today-pill[b-agcnph1efn] {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px;
    background: var(--text); color: var(--bg);
}

.ch-block-head[b-agcnph1efn] {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text3); margin: 0 0 10px 2px;
}

.ch-empty[b-agcnph1efn] { margin: 8px 2px; font-size: 0.85rem; color: var(--text3); font-weight: 550; }

.ch-activity[b-agcnph1efn] { list-style: none; margin: 0; padding: 0; }
.ch-act[b-agcnph1efn] {
    display: grid;
    grid-template-columns: 5.4rem 40px 1fr;
    align-items: stretch;
    column-gap: 12px;
    min-height: 76px;
}
.ch-act-time[b-agcnph1efn] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem; color: var(--text3); font-weight: 650;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center;
}
.ch-act-rail[b-agcnph1efn] {
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.ch-act-rail[b-agcnph1efn]::before {
    content: "";
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
}
.ch-act:first-child .ch-act-rail[b-agcnph1efn]::before { top: 50%; }
.ch-act:last-child .ch-act-rail[b-agcnph1efn]::before { bottom: 50%; }
.ch-act:only-child .ch-act-rail[b-agcnph1efn]::before { display: none; }
.ch-act-icon[b-agcnph1efn] {
    position: relative; z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: var(--surface2);
    color: var(--text3);
    box-shadow: 0 0 0 3px var(--bg);
}
.ch-act-icon.open[b-agcnph1efn] { background: var(--ch-open); color: #1a1404; }
.ch-act-icon.closed[b-agcnph1efn] { background: var(--ch-closed); color: #0f1419; }
.ch-act-icon.err[b-agcnph1efn] { background: #F87171; color: #1a0a0a; }
html[data-theme="light"] .ch-act-icon.open[b-agcnph1efn] { color: #422006; }
html[data-theme="light"] .ch-act-icon.closed[b-agcnph1efn] { color: #fff; }
.ch-act-mask[b-agcnph1efn] {
    width: 58%; height: 58%;
    background-color: currentColor;
    -webkit-mask: var(--ch-ico) center / contain no-repeat;
    mask: var(--ch-ico) center / contain no-repeat;
}

.ch-act-body[b-agcnph1efn] {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.ch-act:last-child .ch-act-body[b-agcnph1efn] { border-bottom: 0; }

.ch-act-main[b-agcnph1efn] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    width: 100%;
    border: 0; background: none; padding: 0;
    color: inherit; text-align: left; cursor: pointer;
    font-family: inherit;
}
.ch-act-main.static[b-agcnph1efn] { cursor: default; }
.ch-act-title[b-agcnph1efn] {
    grid-column: 1; grid-row: 1;
    font-weight: 750; letter-spacing: -0.02em;
}
.ch-act-sub[b-agcnph1efn] {
    grid-column: 1; grid-row: 2;
    margin-top: 2px;
    font-size: 0.78rem; color: var(--text3); font-weight: 550;
}
.ch-act-chev[b-agcnph1efn] {
    grid-column: 2; grid-row: 1 / span 2;
    color: var(--text3); font-size: 0.95rem;
}

.ch-kids[b-agcnph1efn] {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ch-kid[b-agcnph1efn] {
    display: grid;
    grid-template-columns: 5.2rem 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
}
.ch-kid-time[b-agcnph1efn] {
    font-family: ui-monospace, Consolas, monospace;
    color: var(--text3); font-variant-numeric: tabular-nums;
}
.ch-kid-name[b-agcnph1efn] { font-weight: 650; }
.ch-kid-act[b-agcnph1efn] { color: var(--text3); }
.ch-kid-ok[b-agcnph1efn] { font-weight: 750; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; }
.ch-kid-ok.ok[b-agcnph1efn] { color: #86EFAC; }
.ch-kid-ok.err[b-agcnph1efn] { color: #FCA5A5; }
html[data-theme="light"] .ch-kid-ok.ok[b-agcnph1efn] { color: #15803D; }
html[data-theme="light"] .ch-kid-ok.err[b-agcnph1efn] { color: #B91C1C; }
/* /Components/Pages/DoorsPage.razor.rz.scp.css */
/* Porte e serrature — from mockup doors-v1 */

.do-page[b-k0cj0j7lgj] {
    --acc: #FB923C;
    --acc-soft: rgba(251, 146, 60, 0.14);
    --acc-ink: #FDBA74;
    --ok: #4ADE80;
    --ok-soft: rgba(74, 222, 128, 0.12);
    --ok-ink: #86EFAC;
    --warn: #FBBF24;
    --unlock: #F06048;
    --unlock-soft: rgba(240, 96, 72, 0.15);
    --unlock-ink: #FCA5A5;
    --door-open: #EAB308;
    --door-open-soft: rgba(234, 179, 8, 0.14);
    --door-open-ink: #FDE68A;
    --danger: #F87171;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}

html[data-theme="light"] .do-page[b-k0cj0j7lgj] {
    --acc: #EA580C;
    --acc-soft: #FFEDD5;
    --acc-ink: #C2410C;
    --ok: #16A34A;
    --ok-soft: #DCFCE7;
    --ok-ink: #15803D;
    --unlock: #DC2626;
    --unlock-soft: #FEE2E2;
    --unlock-ink: #B91C1C;
    --door-open: #CA8A04;
    --door-open-soft: #FEF9C3;
    --door-open-ink: #A16207;
}

@media (max-width: 600px) {
    .app.do-page[b-k0cj0j7lgj] { max-width: 100%; margin: 0; width: 100%; }
}

.do-page *[b-k0cj0j7lgj], .do-page *[b-k0cj0j7lgj]::before, .do-page *[b-k0cj0j7lgj]::after { box-sizing: border-box; }

.do-top[b-k0cj0j7lgj] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 0;
}
.do-back[b-k0cj0j7lgj] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.45rem; flex-shrink: 0; cursor: pointer;
}
.do-brand[b-k0cj0j7lgj] { min-width: 0; flex: 1; cursor: pointer; }
.do-hist-btn[b-k0cj0j7lgj] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.15rem; flex-shrink: 0; cursor: pointer;
    padding: 0;
}
.do-hist-btn:hover[b-k0cj0j7lgj] { color: var(--text); border-color: var(--border2); }
.do-brand h1[b-k0cj0j7lgj] {
    margin: 0; font-size: 1.28rem; font-weight: 700;
    letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px;
}
.do-brand h1 i[b-k0cj0j7lgj] { color: var(--acc); font-size: 1.1rem; }
.do-meta[b-k0cj0j7lgj] { margin-top: 3px; font-size: 0.8rem; color: var(--text3); font-weight: 500; }
.do-content[b-k0cj0j7lgj] { padding: 14px 14px 40px; }

.do-section[b-k0cj0j7lgj] { margin-bottom: 18px; }
.do-section-label[b-k0cj0j7lgj] {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text3); margin: 0 0 10px 2px;
}

.do-empty[b-k0cj0j7lgj] {
    text-align: center; padding: 36px 16px;
    border: 1px dashed var(--border2); border-radius: 16px; color: var(--text3);
}
.do-empty i[b-k0cj0j7lgj] { font-size: 2rem; color: var(--acc); opacity: 0.7; display: block; margin-bottom: 10px; }
.do-empty p[b-k0cj0j7lgj] { margin: 0 0 6px; font-weight: 600; color: var(--text2); }
.do-empty-sub[b-k0cj0j7lgj] { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text3) !important; }

/* Lock card */
.do-lock[b-k0cj0j7lgj] {
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--border);
    background:
        radial-gradient(ellipse 80% 70% at 12% 35%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 55%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 18px 16px 16px;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.do-lock.is-unlocked[b-k0cj0j7lgj],
.do-lock.is-unlocking[b-k0cj0j7lgj] {
    background:
        radial-gradient(ellipse 85% 75% at 12% 35%, color-mix(in srgb, var(--unlock) 18%, transparent), transparent 58%),
        var(--surface);
    border-color: color-mix(in srgb, var(--unlock) 40%, var(--border));
    box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--unlock) 10%, transparent) inset;
}
.do-lock.is-locked[b-k0cj0j7lgj],
.do-lock.is-locking[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--ok) 22%, var(--border));
}
.do-lock.is-locking[b-k0cj0j7lgj] {
    background:
        radial-gradient(ellipse 85% 75% at 12% 35%, color-mix(in srgb, var(--ok) 14%, transparent), transparent 58%),
        var(--surface);
}

.do-lock-row[b-k0cj0j7lgj] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.do-lock-viz[b-k0cj0j7lgj] {
    position: relative;
    width: 68px; height: 82px;
    flex-shrink: 0;
    display: grid; place-items: end center;
    margin-top: 2px;
}
.do-shackle[b-k0cj0j7lgj] {
    position: absolute;
    top: 4px; left: 50%;
    width: 32px; height: 30px;
    margin-left: -16px;
    border: 4px solid #8B909A;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.3s;
    transform-origin: 15% 90%;
    z-index: 1;
}
.do-lock.is-unlocked .do-shackle[b-k0cj0j7lgj],
.do-lock.is-unlocking .do-shackle[b-k0cj0j7lgj] {
    transform: rotate(-26deg) translate(-2px, -1px);
    border-color: color-mix(in srgb, var(--unlock) 45%, #A8ADB8);
}
.do-lock.is-locked .do-shackle[b-k0cj0j7lgj],
.do-lock.is-locking .do-shackle[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--ok) 45%, #8B909A);
}
.do-lock.is-locking .do-shackle[b-k0cj0j7lgj] {
    animation: do-shackle-pulse-b-k0cj0j7lgj 0.9s ease-in-out infinite;
}
.do-lock.is-unlocking .do-shackle[b-k0cj0j7lgj] {
    animation: do-shackle-wiggle-b-k0cj0j7lgj 0.85s ease-in-out infinite;
}
@keyframes do-shackle-pulse-b-k0cj0j7lgj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
@keyframes do-shackle-wiggle-b-k0cj0j7lgj {
    0%, 100% { transform: rotate(-22deg) translate(-2px, -1px); }
    50% { transform: rotate(-30deg) translate(-3px, -2px); }
}
.do-lock-body[b-k0cj0j7lgj] {
    position: relative; z-index: 2;
    width: 50px; height: 44px;
    border-radius: 11px;
    background: linear-gradient(160deg, #3A404C 0%, #2A2F3A 55%, #22262F 100%);
    border: 1px solid var(--border2);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: grid; place-items: center;
    transition: box-shadow 0.3s, border-color 0.3s;
}
html[data-theme="light"] .do-lock-body[b-k0cj0j7lgj] {
    background: linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 100%);
}
.do-lock.is-locked .do-lock-body[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--ok) 35%, var(--border2));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--ok) 16%, transparent);
}
.do-lock.is-unlocked .do-lock-body[b-k0cj0j7lgj],
.do-lock.is-unlocking .do-lock-body[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--unlock) 48%, var(--border2));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 20px color-mix(in srgb, var(--unlock) 24%, transparent);
}
.do-lock.is-locking .do-lock-body[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--ok) 35%, var(--border2));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 16px color-mix(in srgb, var(--ok) 16%, transparent);
}
.do-keyhole[b-k0cj0j7lgj] {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
}
.do-keyhole[b-k0cj0j7lgj]::after {
    content: "";
    position: absolute;
    left: 50%; top: 7px;
    width: 4px; height: 8px;
    margin-left: -2px;
    background: var(--bg);
    border-radius: 0 0 2px 2px;
}

.do-lock-info[b-k0cj0j7lgj] { flex: 1; min-width: 0; padding-top: 2px; }
.do-lock-kicker[b-k0cj0j7lgj] {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text3); margin-bottom: 6px;
}
.do-lock-name[b-k0cj0j7lgj] {
    font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 7px; line-height: 1.25;
}
.do-lock-name i[b-k0cj0j7lgj] { color: var(--acc); font-size: 0.95rem; }
.do-lock.is-unlocked .do-lock-name i[b-k0cj0j7lgj],
.do-lock.is-unlocking .do-lock-name i[b-k0cj0j7lgj] { color: var(--unlock); }
.do-lock.is-locking .do-lock-name i[b-k0cj0j7lgj] { color: var(--ok); }

.do-pills[b-k0cj0j7lgj] {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.do-pill[b-k0cj0j7lgj] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    font-size: 0.74rem; font-weight: 700;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text2);
}
.do-pill .dot[b-k0cj0j7lgj] {
    width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.do-pill.locked[b-k0cj0j7lgj] {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
    color: var(--ok-ink);
}
.do-pill.unlocked[b-k0cj0j7lgj] {
    background: var(--unlock-soft);
    border-color: color-mix(in srgb, var(--unlock) 42%, transparent);
    color: var(--unlock-ink);
}
.do-pill.unlocked .dot[b-k0cj0j7lgj] {
    background: var(--unlock);
    box-shadow: 0 0 8px color-mix(in srgb, var(--unlock) 55%, transparent);
    animation: do-pulse-b-k0cj0j7lgj 1.2s ease-in-out infinite;
}
.do-pill.door-closed[b-k0cj0j7lgj] {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 28%, transparent);
    color: var(--ok-ink);
}
.do-pill.door-open[b-k0cj0j7lgj] {
    background: var(--door-open-soft);
    border-color: color-mix(in srgb, var(--door-open) 38%, transparent);
    color: var(--door-open-ink);
}
.do-pill.door-open .dot[b-k0cj0j7lgj] {
    background: var(--door-open);
    box-shadow: 0 0 8px color-mix(in srgb, var(--door-open) 50%, transparent);
    animation: do-pulse-b-k0cj0j7lgj 1.2s ease-in-out infinite;
}
.do-pill.transitioning[b-k0cj0j7lgj] {
    font-weight: 750;
}
.do-pill.transitioning.locking[b-k0cj0j7lgj] {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    color: var(--ok-ink);
}
.do-pill.transitioning.unlocking[b-k0cj0j7lgj] {
    background: var(--unlock-soft);
    border-color: color-mix(in srgb, var(--unlock) 42%, transparent);
    color: var(--unlock-ink);
}
.do-pill.transitioning .dot[b-k0cj0j7lgj] {
    animation: do-pulse-b-k0cj0j7lgj 0.7s ease-in-out infinite;
}
@keyframes do-pulse-b-k0cj0j7lgj {
    0%, 100% { opacity: 1; } 50% { opacity: 0.45; }
}

.do-batt[b-k0cj0j7lgj] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface2) 90%, transparent);
    border: 1px solid var(--border2);
    font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
    flex-shrink: 0; align-self: flex-start;
}
.do-batt.ok[b-k0cj0j7lgj] { color: var(--ok-ink); }
.do-batt.mid[b-k0cj0j7lgj] { color: var(--warn); }
.do-batt.low[b-k0cj0j7lgj] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.do-batt-ico[b-k0cj0j7lgj] {
    width: 18px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px;
    position: relative; flex-shrink: 0;
}
.do-batt-ico[b-k0cj0j7lgj]::after {
    content: ""; position: absolute; right: -3px; top: 1.5px;
    width: 2px; height: 5px; background: currentColor; border-radius: 0 1px 1px 0;
}
.do-batt-ico .fill[b-k0cj0j7lgj] {
    position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px;
    border-radius: 1px; background: currentColor;
}

.do-cmds[b-k0cj0j7lgj] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.do-cmd[b-k0cj0j7lgj] {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 13px 12px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 750;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text2); cursor: pointer;
    transition: border-color 0.12s, background 0.12s, transform 0.1s, color 0.12s;
}
.do-cmd i[b-k0cj0j7lgj] { font-size: 1.15rem; color: var(--text3); }
.do-cmd:hover:not(:disabled)[b-k0cj0j7lgj] { border-color: var(--border2); color: var(--text); }
.do-cmd:active:not(:disabled)[b-k0cj0j7lgj] { transform: scale(0.97); }
.do-cmd:disabled[b-k0cj0j7lgj] { opacity: 0.38; cursor: not-allowed; }
.do-cmd.lock[b-k0cj0j7lgj] {
    background: var(--ok-soft);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
    color: var(--ok-ink);
}
.do-cmd.lock i[b-k0cj0j7lgj] { color: var(--ok); }
.do-cmd.unlock[b-k0cj0j7lgj] {
    background: var(--unlock-soft);
    border-color: color-mix(in srgb, var(--unlock) 42%, transparent);
    color: var(--unlock-ink);
}
.do-cmd.unlock i[b-k0cj0j7lgj] { color: var(--unlock); }

.do-feedback[b-k0cj0j7lgj] {
    min-height: 1.15em; margin: 8px 2px 0;
    font-size: 0.82rem; color: var(--text2); font-weight: 600;
}

/* Door sensors */
.do-doors[b-k0cj0j7lgj] { display: flex; flex-direction: column; gap: 8px; }
.do-door[b-k0cj0j7lgj] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.do-door:hover[b-k0cj0j7lgj] { border-color: var(--border2); }
.do-door:focus-visible[b-k0cj0j7lgj] {
    outline: 2px solid color-mix(in srgb, var(--acc) 55%, transparent);
    outline-offset: 2px;
}
.do-door.open[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--door-open) 34%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--door-open) 10%, var(--surface)), var(--surface) 70%);
}
.do-door.closed[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--ok) 18%, var(--border));
}
.do-door.moving[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--door-open) 34%, var(--border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--door-open) 10%, var(--surface)), var(--surface) 70%);
}
.do-door-ico[b-k0cj0j7lgj] {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; flex-shrink: 0;
    font-size: 1.15rem;
    background: var(--surface2); color: var(--text3);
}
.do-door-ico.mask[b-k0cj0j7lgj] {
    background-color: currentColor;
    -webkit-mask: var(--do-icon) center / 58% no-repeat;
    mask: var(--do-icon) center / 58% no-repeat;
    background-image: none;
}
.do-door.closed .do-door-ico:not(.mask)[b-k0cj0j7lgj] { background: var(--ok-soft); color: var(--ok); }
.do-door.closed .do-door-ico.mask[b-k0cj0j7lgj] { background: none; background-color: var(--ok); }
.do-door.open .do-door-ico:not(.mask)[b-k0cj0j7lgj],
.do-door.moving .do-door-ico:not(.mask)[b-k0cj0j7lgj] { background: var(--door-open-soft); color: var(--door-open); }
.do-door.open .do-door-ico.mask[b-k0cj0j7lgj],
.do-door.moving .do-door-ico.mask[b-k0cj0j7lgj] { background: none; background-color: var(--door-open); }
.do-door.moving .do-door-badge[b-k0cj0j7lgj] {
    background: var(--door-open-soft); color: var(--door-open-ink);
    border: 1px solid color-mix(in srgb, var(--door-open) 38%, transparent);
}

.do-door-main[b-k0cj0j7lgj] {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.do-door-name-row[b-k0cj0j7lgj] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    min-width: 0; width: 100%;
}
.do-door-name[b-k0cj0j7lgj] {
    font-size: 0.95rem; font-weight: 750; letter-spacing: -0.02em; min-width: 0;
}
.do-door-badge[b-k0cj0j7lgj] {
    font-size: 0.7rem; font-weight: 750;
    padding: 4px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
}
.do-door.closed .do-door-badge[b-k0cj0j7lgj] {
    background: var(--ok-soft); color: var(--ok-ink);
    border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
}
.do-door.open .do-door-badge[b-k0cj0j7lgj] {
    background: var(--door-open-soft); color: var(--door-open-ink);
    border: 1px solid color-mix(in srgb, var(--door-open) 38%, transparent);
}
.do-door .do-batt[b-k0cj0j7lgj] {
    flex-shrink: 0; align-self: center;
    padding: 4px 8px; font-size: 0.7rem;
}

@media (max-width: 520px) {
    .do-door-name-row[b-k0cj0j7lgj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Modal */
.do-modal-bg[b-k0cj0j7lgj] {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px);
}
.do-modal[b-k0cj0j7lgj] {
    position: fixed; z-index: 41; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 340px);
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: var(--surface); border: 1px solid var(--border2);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    text-align: center;
}
.do-modal-ico[b-k0cj0j7lgj] {
    width: 48px; height: 48px; margin: 0 auto 12px;
    border-radius: 14px; display: grid; place-items: center;
    background: var(--unlock-soft); color: var(--unlock); font-size: 1.35rem;
}
.do-modal h2[b-k0cj0j7lgj] { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; }
.do-modal p[b-k0cj0j7lgj] { margin: 0 0 6px; font-size: 0.88rem; color: var(--text2); line-height: 1.45; font-weight: 500; }
.do-modal-pin[b-k0cj0j7lgj] {
    width: 100%; margin-top: 12px; padding: 12px 14px;
    border-radius: 12px; border: 1px solid var(--border2);
    background: var(--bg); color: var(--text);
    font-size: 1.25rem; font-weight: 700; letter-spacing: 0.35em;
    text-align: center; outline: none;
}
.do-modal-pin:focus[b-k0cj0j7lgj] {
    border-color: color-mix(in srgb, var(--unlock) 45%, var(--border2));
}
.do-modal-err[b-k0cj0j7lgj] {
    margin-top: 8px !important;
    font-size: 0.8rem !important;
    color: var(--unlock-ink) !important;
    font-weight: 650 !important;
}
.do-modal-actions[b-k0cj0j7lgj] { display: flex; gap: 8px; margin-top: 16px; }
.do-modal-btn[b-k0cj0j7lgj] {
    flex: 1; padding: 12px 14px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 750; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
}
.do-modal-btn:disabled[b-k0cj0j7lgj] { opacity: 0.5; cursor: not-allowed; }
.do-modal-btn.danger[b-k0cj0j7lgj] {
    background: var(--unlock-soft);
    border-color: color-mix(in srgb, var(--unlock) 44%, transparent);
    color: var(--unlock-ink);
}
/* /Components/Pages/EnergyFlowPage.razor.rz.scp.css */
/* Energia page — live flow + metric cards + day strip */

.en-page[b-z8dh1zjnew] {
    --en-solar: #FBBF24;
    --en-solar-soft: rgba(251, 191, 36, 0.14);
    --en-solar-ink: #FDE68A;
    --en-bat: #60A5FA;
    --en-bat-soft: rgba(96, 165, 250, 0.14);
    --en-bat-ink: #BFDBFE;
    --en-home: #34D399;
    --en-home-soft: rgba(52, 211, 153, 0.14);
    --en-home-ink: #A7F3D0;
    --en-grid: #94A3B8;
    --en-ev: #A78BFA;
    --en-ev-soft: rgba(167, 139, 250, 0.16);
    --en-ok: #4ADE80;
    --en-danger: #F87171;
    --en-radius: 18px;
    --en-radius-sm: 14px;
    --en-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 14px 40px;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
}

/*
  Override .app { height: 100svh } — su mobile tagliava "giornata in sintesi"
  perché il contenuto è più alto del viewport e lo scroll interno non bastava.
  Altezza = contenuto; scroll della pagina/documento.
*/
.app.en-page[b-z8dh1zjnew] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

html[data-theme="light"] .en-page[b-z8dh1zjnew] {
    --en-solar: #D97706;
    --en-solar-soft: #FEF3C7;
    --en-solar-ink: #92400E;
    --en-bat: #2563EB;
    --en-bat-soft: #DBEAFE;
    --en-bat-ink: #1E40AF;
    --en-home: #059669;
    --en-home-soft: #D1FAE5;
    --en-home-ink: #065F46;
    --en-grid: #64748B;
    --en-ev: #7C3AED;
    --en-ev-soft: #EDE9FE;
    --en-ok: #15803D;
    --en-danger: #DC2626;
}

@media (max-width: 600px) {
    .en-page[b-z8dh1zjnew] {
        padding: 10px 10px 40px;
        padding-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 48px));
    }
}

/* ── Header ── */
.en-top[b-z8dh1zjnew] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-top: 4px;
}

.en-back[b-z8dh1zjnew] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.45rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.en-brand[b-z8dh1zjnew] {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.en-brand h1[b-z8dh1zjnew] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.en-brand h1 i[b-z8dh1zjnew] {
    color: var(--en-solar);
    font-size: 1.05rem;
}

.en-meta[b-z8dh1zjnew] {
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.en-live-dot[b-z8dh1zjnew] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--en-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--en-ok) 22%, transparent);
}

.en-chip[b-z8dh1zjnew] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--en-solar-soft);
    color: var(--en-solar-ink);
    border: 1px solid color-mix(in srgb, var(--en-solar) 30%, transparent);
    flex-shrink: 0;
}

.en-chip.idle[b-z8dh1zjnew] {
    background: var(--surface2);
    color: var(--text3);
    border-color: var(--border);
}

/* ── Stage ── */
.en-stage[b-z8dh1zjnew] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

@media (min-width: 900px) {
    .en-stage[b-z8dh1zjnew] {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 16px;
        align-items: stretch;
    }
}

/* ── Flow ── */
.en-flow-card[b-z8dh1zjnew] {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--en-solar) 12%, transparent), transparent 55%),
        radial-gradient(70% 50% at 85% 70%, color-mix(in srgb, var(--en-bat) 10%, transparent), transparent 50%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--en-radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 6px 10px;
    /* Flex: header fisso + diagramma centrato in verticale se la card è più alta (desktop stretch) */
    display: flex;
    flex-direction: column;
}

@media (min-width: 900px) {
    .en-flow-card[b-z8dh1zjnew] {
        padding: 14px 10px 12px;
    }
}

.en-flow-head[b-z8dh1zjnew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 6px;
    flex-shrink: 0;
}

.en-flow-head h2[b-z8dh1zjnew] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
}

.en-flow-hint[b-z8dh1zjnew] {
    font-size: 0.72rem;
    color: var(--text3);
}

@media (max-width: 720px) {
    .en-flow-head .en-loads-link[b-z8dh1zjnew] {
        padding: 2px 8px;
        font-size: 0.65rem;
        line-height: 1.15;
        gap: 2px;
    }
    .en-flow-head .en-loads-link i[b-z8dh1zjnew] { font-size: 0.8rem; }
}

/* ── Diagram: scala naturale viewBox 360×300 (come pagina originale)
   Evitare min-height/flex grandi: allungano l’SVG e gonfiano nodi + label. */
.ef-diagram[b-z8dh1zjnew] {
    width: 100%;
    max-width: 420px; /* tetto desktop: non sparare a tutta colonna */
    height: auto;
    display: block;
    /* Centra in orizzontale e, se c’è spazio flex, anche in verticale */
    margin: auto;
    overflow: visible;
    flex: 0 0 auto;
}

.ef-diagram.has-ev[b-z8dh1zjnew] {
    max-width: 420px;
}

@media (min-width: 900px) {
    .ef-diagram[b-z8dh1zjnew] {
        max-width: 460px; /* leggermente più comodo su desktop, senza sproporzioni */
    }
}

.ef-node[b-z8dh1zjnew] {
    fill: var(--surface);
    stroke-width: 2.8;
}

.ef-node.solar[b-z8dh1zjnew] {
    stroke: var(--en-solar);
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45));
}

.ef-node.bat[b-z8dh1zjnew] {
    stroke: var(--en-bat);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

.ef-node.home[b-z8dh1zjnew] {
    stroke: var(--en-home);
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

.ef-home-link[b-z8dh1zjnew] { cursor: pointer; }
.ef-home-hit[b-z8dh1zjnew] { fill: transparent; pointer-events: all; }
.ef-home-link:hover .ef-node.home[b-z8dh1zjnew] {
    filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.7));
}

.ef-node.grid[b-z8dh1zjnew] {
    stroke: var(--en-grid);
    filter: drop-shadow(0 0 8px rgba(100, 116, 139, 0.35));
}

.ef-node.ev[b-z8dh1zjnew] {
    stroke: var(--en-ev);
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.4));
}

.ef-icon.solar[b-z8dh1zjnew] { color: var(--en-solar); stroke: var(--en-solar); }
.ef-icon.bat[b-z8dh1zjnew] { color: var(--en-bat); stroke: var(--en-bat); }
.ef-icon.home[b-z8dh1zjnew] { color: var(--en-home); stroke: var(--en-home); }
.ef-icon.grid[b-z8dh1zjnew] { color: var(--en-grid); stroke: var(--en-grid); }
.ef-icon.ev[b-z8dh1zjnew] { color: var(--en-ev); stroke: var(--en-ev); }

/* Stesse misure dell’originale (px schermo: non gonfiano col viewBox) */
.ef-node-label[b-z8dh1zjnew] {
    font-size: 14px;
    font-weight: 600;
    fill: var(--text);
    text-anchor: middle;
}

.ef-node-pct[b-z8dh1zjnew] {
    font-size: 10px;
    font-weight: 700;
    fill: var(--en-bat);
    font-family: var(--en-mono);
}

.ef-node-kw[b-z8dh1zjnew] {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--en-mono);
    letter-spacing: -0.02em;
}

@media (max-width: 380px) {
    .ef-node-kw[b-z8dh1zjnew] { font-size: 13px; }
}

.ef-node-kw.solar[b-z8dh1zjnew] { fill: var(--en-solar); }
.ef-node-kw.bat[b-z8dh1zjnew] { fill: var(--en-bat); }
.ef-node-kw.home[b-z8dh1zjnew] { fill: var(--en-home); }
.ef-node-kw.grid[b-z8dh1zjnew] { fill: var(--en-grid); }
.ef-node-kw.ev[b-z8dh1zjnew] { fill: var(--en-ev); }

.ef-flow[b-z8dh1zjnew] {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    opacity: 0.14;
    stroke: #94A3B8;
}

.ef-flow.active[b-z8dh1zjnew] {
    opacity: 0.95;
    stroke-dasharray: 8 10;
    animation: ef-flow-b-z8dh1zjnew 0.9s linear infinite;
}

.ef-flow.active.reverse[b-z8dh1zjnew] {
    animation-direction: reverse;
}

.ef-flow.solar.active[b-z8dh1zjnew] {
    stroke: var(--en-solar);
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.55));
}

.ef-flow.bat.active[b-z8dh1zjnew] {
    stroke: var(--en-bat);
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

.ef-flow.home.active[b-z8dh1zjnew] {
    stroke: var(--en-home);
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

.ef-flow.grid.active[b-z8dh1zjnew] {
    stroke: var(--en-grid);
    filter: drop-shadow(0 0 4px rgba(100, 116, 139, 0.45));
}

.ef-flow.idle[b-z8dh1zjnew] {
    opacity: 0.1;
    stroke-dasharray: none;
    animation: none;
    filter: none;
}

@keyframes ef-flow-b-z8dh1zjnew {
    to { stroke-dashoffset: -18; }
}



/* ── Metrics ── */
.en-metrics[b-z8dh1zjnew] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
}

@media (min-width: 900px) {
    .en-metrics[b-z8dh1zjnew] { gap: 12px; }
}

.en-metric[b-z8dh1zjnew] {
    position: relative;
    /* visible: tooltip sparkline può uscire sopra senza taglio */
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--en-radius-sm);
    padding: 12px 12px 0;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.en-metric[b-z8dh1zjnew]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    z-index: 1;
}

.en-metric.solar[b-z8dh1zjnew]::before { background: var(--en-solar); }
.en-metric.home[b-z8dh1zjnew]::before { background: var(--en-home); }
.en-metric.bat[b-z8dh1zjnew]::before { background: var(--en-bat); }

.en-m-top[b-z8dh1zjnew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.en-m-label[b-z8dh1zjnew] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
}

.en-m-ico[b-z8dh1zjnew] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.en-metric.solar .en-m-ico[b-z8dh1zjnew] { background: var(--en-solar-soft); color: var(--en-solar); }
.en-metric.home .en-m-ico[b-z8dh1zjnew] { background: var(--en-home-soft); color: var(--en-home); }
.en-metric.bat .en-m-ico[b-z8dh1zjnew] { background: var(--en-bat-soft); color: var(--en-bat); }

.en-m-badge[b-z8dh1zjnew] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.en-m-badge.prod[b-z8dh1zjnew] {
    background: var(--en-solar-soft);
    color: var(--en-solar-ink);
    border-color: color-mix(in srgb, var(--en-solar) 28%, transparent);
}

.en-m-badge.charge[b-z8dh1zjnew] {
    background: color-mix(in srgb, var(--en-ok) 14%, transparent);
    color: var(--en-ok);
    border-color: color-mix(in srgb, var(--en-ok) 30%, transparent);
}

.en-m-badge.discharge[b-z8dh1zjnew] {
    background: color-mix(in srgb, var(--en-danger) 14%, transparent);
    color: #FCA5A5;
    border-color: color-mix(in srgb, var(--en-danger) 30%, transparent);
}

.en-m-badge.idle[b-z8dh1zjnew] {
    background: var(--surface2);
    color: var(--text3);
    border-color: var(--border);
}

.en-m-body[b-z8dh1zjnew] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    align-items: end;
    margin-top: 8px;
    padding-bottom: 4px;
}

.en-m-main[b-z8dh1zjnew] { min-width: 0; }

.en-m-side[b-z8dh1zjnew] {
    text-align: right;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2px;
}

.en-m-val[b-z8dh1zjnew] {
    font-family: var(--en-mono);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.en-metric.solar .en-m-val[b-z8dh1zjnew] { color: var(--en-solar); }
.en-metric.home .en-m-val[b-z8dh1zjnew] { color: var(--en-home-ink); }
.en-metric.bat .en-m-val[b-z8dh1zjnew] { color: var(--en-bat-ink); }

.en-m-sub[b-z8dh1zjnew] {
    font-size: 0.7rem;
    color: var(--text3);
    line-height: 1.25;
    margin-top: 2px;
}

.en-m-sub strong[b-z8dh1zjnew] {
    color: var(--text2);
    font-weight: 650;
}

.en-m-side-lbl[b-z8dh1zjnew] {
    font-size: 0.62rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
}

.en-m-side-val[b-z8dh1zjnew] {
    font-family: var(--en-mono);
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

/* Battery power + arrow */
.en-bat-power[b-z8dh1zjnew] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.en-bat-dir[b-z8dh1zjnew] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.en-bat-power.up .en-bat-dir[b-z8dh1zjnew] {
    background: color-mix(in srgb, var(--en-ok) 16%, transparent);
    color: var(--en-ok);
}

.en-bat-power.down .en-bat-dir[b-z8dh1zjnew] {
    background: color-mix(in srgb, var(--en-danger) 16%, transparent);
    color: var(--en-danger);
}

.en-bat-power.idle .en-bat-dir[b-z8dh1zjnew] {
    background: var(--surface2);
    color: var(--text3);
}

.en-bat-power.up .en-m-val[b-z8dh1zjnew] { color: var(--en-ok); }
.en-bat-power.down .en-m-val[b-z8dh1zjnew] { color: var(--en-danger); }
.en-bat-power.idle .en-m-val[b-z8dh1zjnew] { color: var(--text2); }

.en-soc-side[b-z8dh1zjnew] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.en-soc-ring[b-z8dh1zjnew] {
    --p: 72;
    --c: #4ADE80;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    background:
        radial-gradient(circle at center, var(--surface) 56%, transparent 57%),
        conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface2) 0);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px var(--border);
}

.en-soc-ring span[b-z8dh1zjnew] {
    font-family: var(--en-mono);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text);
}

/* Quality bands (same as dashboard) */
.en-soc-ring.fill-ok[b-z8dh1zjnew] { --c: #22C55E; }
.en-soc-ring.fill-good[b-z8dh1zjnew] { --c: #4ADE80; }
.en-soc-ring.fill-fair[b-z8dh1zjnew] { --c: #FBBF24; }
.en-soc-ring.fill-mid[b-z8dh1zjnew] { --c: #F59E0B; }
.en-soc-ring.fill-low[b-z8dh1zjnew] { --c: #F97316; }
.en-soc-ring.fill-empty[b-z8dh1zjnew] { --c: #EF4444; }

/* Sparkline styles live in EnSparkline.razor.css (CSS isolation) */
@media (min-width: 900px) {
    .en-m-val[b-z8dh1zjnew] { font-size: 1.8rem; }
    .en-metric[b-z8dh1zjnew] { padding: 14px 14px 0; }
}

/* ── Day strip ── */
.en-day[b-z8dh1zjnew] {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--en-radius);
    box-shadow: var(--shadow-sm);
    padding: 14px;
}

.en-day[b-z8dh1zjnew]::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--en-solar) 14%, transparent), transparent 70%);
    pointer-events: none;
}

.en-day-head[b-z8dh1zjnew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.en-day-head h2[b-z8dh1zjnew] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.en-day-links[b-z8dh1zjnew] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

.en-loads-link[b-z8dh1zjnew] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, #34D399 16%, transparent);
    color: #A7F3D0;
    border: 1px solid color-mix(in srgb, #34D399 32%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s, background 0.12s;
}

.en-loads-link:hover[b-z8dh1zjnew] { background: color-mix(in srgb, #34D399 24%, transparent); }
.en-loads-link:active[b-z8dh1zjnew] { transform: scale(0.97); }

html[data-theme="light"] .en-loads-link[b-z8dh1zjnew] {
    color: #047857;
    background: #D1FAE5;
    border-color: #A7F3D0;
}

.en-stats-link[b-z8dh1zjnew] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: color-mix(in srgb, #C084FC 14%, transparent);
    color: #E9D5FF;
    border: 1px solid color-mix(in srgb, #C084FC 32%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s, background 0.12s;
}

.en-stats-link:hover[b-z8dh1zjnew] {
    background: color-mix(in srgb, #C084FC 22%, transparent);
}

.en-stats-link:active[b-z8dh1zjnew] { transform: scale(0.97); }

html[data-theme="light"] .en-stats-link[b-z8dh1zjnew] {
    color: #6B21A8;
    background: #F3E8FF;
    border-color: #E9D5FF;
}

/* Mobile 2×2 mini-card; desktop: hero full-width + 4 colonne */
.en-day-grid[b-z8dh1zjnew] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.en-day-hero[b-z8dh1zjnew] {
    grid-column: 1 / -1;
}

@media (min-width: 721px) {
    .en-day-grid[b-z8dh1zjnew] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.en-day-hero[b-z8dh1zjnew] {
    border-radius: var(--en-radius-sm);
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(145deg, color-mix(in srgb, var(--en-solar) 14%, var(--surface2)), var(--surface2));
    border: 1px solid color-mix(in srgb, var(--en-solar) 28%, var(--border));
}

.en-day-hero .k[b-z8dh1zjnew] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
}

.en-day-hero .v[b-z8dh1zjnew] {
    margin-top: 4px;
    font-family: var(--en-mono);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--en-solar-ink);
    line-height: 1.05;
}

.en-day-hero .delta[b-z8dh1zjnew] {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 750;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--en-ok) 16%, transparent);
    color: var(--en-ok);
}

.en-day-hero .delta.worse[b-z8dh1zjnew] {
    background: color-mix(in srgb, var(--en-danger) 14%, transparent);
    color: #FCA5A5;
}

.en-day-cell[b-z8dh1zjnew] {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--en-radius-sm);
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.en-day-cell .k[b-z8dh1zjnew] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
}

.en-day-cell .v[b-z8dh1zjnew] {
    margin-top: 4px;
    font-family: var(--en-mono);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.en-day-cell .v.home[b-z8dh1zjnew] { color: var(--en-home-ink); }
.en-day-cell .v.imp[b-z8dh1zjnew] { color: #FCA5A5; } /* import = prelievo */
.en-day-cell .v.suff[b-z8dh1zjnew] { color: #2DD4BF; }
.en-day-cell .v.bal[b-z8dh1zjnew] { color: var(--en-ok); }

html[data-theme="light"] .en-day-cell .v.imp[b-z8dh1zjnew] { color: #B91C1C; }

.en-day-cell .s[b-z8dh1zjnew] {
    margin-top: 3px;
    font-size: 0.7rem;
    color: var(--text3);
}

.en-day-cell .s .up[b-z8dh1zjnew] { color: var(--en-ok); font-weight: 700; }
.en-day-cell .s .down[b-z8dh1zjnew] { color: #FCA5A5; font-weight: 700; }

.en-suff[b-z8dh1zjnew] {
    margin-top: 12px;
    position: relative;
    z-index: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.en-suff .row[b-z8dh1zjnew] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
    gap: 10px;
}

.en-suff .row span:first-child[b-z8dh1zjnew] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text2);
}

.en-suff .row span:last-child[b-z8dh1zjnew] {
    font-family: var(--en-mono);
    font-size: 0.82rem;
    font-weight: 800;
    color: #2DD4BF;
}

.en-suff .bar[b-z8dh1zjnew] {
    height: 8px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.en-suff .bar > i[b-z8dh1zjnew] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14B8A6, #34D399 55%, #FBBF24);
}

.en-suff .legend[b-z8dh1zjnew] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 8px;
    font-size: 0.68rem;
    color: var(--text3);
}

.en-suff .legend b[b-z8dh1zjnew] {
    color: var(--text2);
    font-weight: 700;
}

@media (min-width: 900px) {
    .en-day-hero .v[b-z8dh1zjnew] { font-size: 2.1rem; }
    .en-day-cell .v[b-z8dh1zjnew] { font-size: 1.35rem; }
}
/* /Components/Pages/EnSparkline.razor.rz.scp.css */
/* Scoped to EnSparkline — must live here (Blazor CSS isolation) */

.en-chart[b-dood0509er] {
    margin: 8px -12px 0;
    height: 64px;
    position: relative;
    /* overflow visible: il tip può uscire sopra la card senza tagliarsi */
    overflow: visible;
    width: calc(100% + 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-top: 1px solid color-mix(in srgb, var(--border, rgba(255,255,255,0.08)) 70%, transparent);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg, #0F1115) 35%, transparent));
}

.en-chart svg[b-dood0509er] {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100% - 14px); /* spazio assi sotto */
}

.en-chart .en-hit[b-dood0509er] {
    cursor: crosshair;
}

.en-chart-axis[b-dood0509er] {
    flex: 0 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 0.55rem;
    font-weight: 650;
    color: var(--text3, #A8A59C);
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0.75;
}

.en-chart-axis span[b-dood0509er] {
    flex: 0 0 auto;
}

.en-tip[b-dood0509er] {
    position: absolute;
    /* Sopra il grafico e leggermente a destra del punto: non resta sotto il cursore */
    top: 0;
    transform: translate(calc(-50% + 14px), calc(-100% - 10px));
    z-index: 5;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface, #181B22) 96%, #000);
    border: 1px solid var(--border2, rgba(255,255,255,0.14));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}

.en-tip .t[b-dood0509er] {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text3, #A8A59C);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.en-tip .v[b-dood0509er] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text, #F2F0EC);
}

@media (min-width: 900px) {
    .en-chart[b-dood0509er] {
        height: 72px;
        margin-left: -14px;
        margin-right: -14px;
        width: calc(100% + 28px);
    }
}
/* /Components/Pages/FloorSparkline.razor.rz.scp.css */
.cl-spark[b-3hs2jsohr3] {
    display: block;
    width: 100%;
    height: 28px;
    margin-top: 2px;
}

.cl-spark.zd-sensor-spark[b-3hs2jsohr3] {
    height: 36px;
    margin-top: 0;
    flex: 0 0 auto;
}

.cl-spark path.line[b-3hs2jsohr3] {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cl-spark path.area[b-3hs2jsohr3] {
    opacity: 0.22;
}

.cl-spark.t path.line[b-3hs2jsohr3] {
    stroke: #FBBF24;
}

.cl-spark.t path.area[b-3hs2jsohr3] {
    fill: #FBBF24;
}

.cl-spark.h path.line[b-3hs2jsohr3] {
    stroke: #38BDF8;
}

.cl-spark.h path.area[b-3hs2jsohr3] {
    fill: #38BDF8;
}

html[data-theme="light"] .cl-spark.t path.line[b-3hs2jsohr3] {
    stroke: #D97706;
}

html[data-theme="light"] .cl-spark.t path.area[b-3hs2jsohr3] {
    fill: #D97706;
}

html[data-theme="light"] .cl-spark.h path.line[b-3hs2jsohr3] {
    stroke: #0284C7;
}

html[data-theme="light"] .cl-spark.h path.area[b-3hs2jsohr3] {
    fill: #0284C7;
}
/* /Components/Pages/GatesPage.razor.rz.scp.css */
.gates-page[b-wcg7161wqc] {
    --gt-mono: ui-monospace, Consolas, monospace;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
}



/* Full bleed on phone — come StatisticsPage: desktop tiene .app max-width */
@media (max-width: 600px) {
    .app.gates-page[b-wcg7161wqc] {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }

    .gates-page .gt-content[b-wcg7161wqc] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .gates-page .gt-global-icon[b-wcg7161wqc] {
        width: 52px;
        height: 52px;
    }

    .gates-page .gt-global-split .gt-global-icon[b-wcg7161wqc] {
        width: 46px;
        height: 46px;
    }

    .gates-page .gt-pulse-btn[b-wcg7161wqc] {
        min-height: 128px;
    }

    .gates-page .gt-pulse-btn .gt-cmd-icon[b-wcg7161wqc] {
        width: 56px;
        height: 56px;
    }

    .gates-page .gt-pulse-btn.intent-pulse .gt-cmd-icon[b-wcg7161wqc] {
        width: 62px;
        height: 62px;
    }
}

/* SVG monochrome da wwwroot/icons via mask + currentColor */
.gt-cmd-icon[b-wcg7161wqc] {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--gt-icon) center / contain no-repeat;
    mask: var(--gt-icon) center / contain no-repeat;
}

.gt-cmd-icon-sm[b-wcg7161wqc] {
    width: 1.15em;
    height: 1.15em;
}

.gt-header[b-wcg7161wqc] {
    padding: 12px 14px 0;
}

.gt-detail-header[b-wcg7161wqc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gt-back-btn[b-wcg7161wqc] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: var(--text2);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.gt-hist-btn[b-wcg7161wqc] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--text2);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: auto;
}
.gt-hist-btn:hover[b-wcg7161wqc] { color: var(--text); border-color: var(--border2); }

.gt-title[b-wcg7161wqc] {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gt-title i[b-wcg7161wqc] { color: #64748B; font-size: 1.1rem; }

.gt-sub[b-wcg7161wqc] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text3);
    margin-top: 3px;
}

.gt-content[b-wcg7161wqc] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gt-section-title[b-wcg7161wqc] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
    margin-bottom: 8px;
}

/* Global */
.gt-global-btn[b-wcg7161wqc] {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 18px 14px;
    font: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
}

.gt-global-btn:disabled[b-wcg7161wqc] {
    opacity: 0.45;
    cursor: default;
}

.gt-global-btn i[b-wcg7161wqc] { font-size: 22px; }

/* Icone lock: elemento dominante nelle azioni rapide */
.gt-global-icon[b-wcg7161wqc] {
    width: 48px;
    height: 48px;
}

.gt-global-split .gt-global-icon[b-wcg7161wqc] {
    width: 42px;
    height: 42px;
}

.gt-global-action[b-wcg7161wqc] {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}

.gt-global-btn.open[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-open) 16%, var(--surface));
    color: var(--gt-open);
    border: 1px solid color-mix(in srgb, var(--gt-open) 35%, transparent);
}

.gt-global-btn.close[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-pulse) 16%, var(--surface));
    color: var(--gt-pulse);
    border: 1px solid color-mix(in srgb, var(--gt-pulse) 40%, transparent);
}

.gt-global-split[b-wcg7161wqc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.gt-global-split .gt-global-btn[b-wcg7161wqc] {
    padding: 12px 8px;
    font-size: 13px;
}

.gt-global-gate[b-wcg7161wqc] {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
}

.gt-global-sub[b-wcg7161wqc] {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1.25;
    text-align: center;
}

.gt-global-btn.intent-open[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-open) 16%, var(--surface));
    color: var(--gt-open);
    border: 1px solid color-mix(in srgb, var(--gt-open) 35%, transparent);
}

.gt-global-btn.intent-pulse[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-pulse) 16%, var(--surface));
    color: var(--gt-pulse);
    border: 1px solid color-mix(in srgb, var(--gt-pulse) 40%, transparent);
}

.gt-global-btn.intent-stop[b-wcg7161wqc],
.gt-global-btn.moving[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-move) 16%, var(--surface));
    color: var(--gt-move);
    border: 1px solid color-mix(in srgb, var(--gt-move) 35%, transparent);
}

.gt-moving-tag[b-wcg7161wqc] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
}

.gt-hint[b-wcg7161wqc] {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text3);
    line-height: 1.35;
}

/* Cards: due colonne — garage | slide (mobile-first) */
.gt-cards[b-wcg7161wqc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

.gt-card[b-wcg7161wqc] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 196px;
}

.gt-card.closed[b-wcg7161wqc] { border-color: rgba(21, 128, 61, 0.25); }
.gt-card.open[b-wcg7161wqc] { border-color: rgba(234, 179, 8, 0.4); }
.gt-card.moving[b-wcg7161wqc] {
    border-color: color-mix(in srgb, var(--gt-move) 45%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gt-move) 16%, transparent);
}

.gt-card-top[b-wcg7161wqc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.gt-card-name[b-wcg7161wqc] {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    color: var(--text);
}

.gt-card-title[b-wcg7161wqc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.gt-badge[b-wcg7161wqc] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gt-badge.closed[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-open) 16%, var(--surface));
    color: var(--gt-open);
}

.gt-badge.open[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-pulse) 16%, var(--surface));
    color: var(--gt-pulse);
}

.gt-badge.moving[b-wcg7161wqc] {
    background: color-mix(in srgb, var(--gt-move) 16%, var(--surface));
    color: var(--gt-move);
}

.gt-badge.unknown[b-wcg7161wqc] {
    background: var(--surface2);
    color: var(--text3);
}

.gt-unconfigured[b-wcg7161wqc] {
    margin: 0;
    font-size: 11px;
    color: var(--text3);
    line-height: 1.35;
    flex: 1;
}

.gt-unconfigured code[b-wcg7161wqc] {
    font-size: 10px;
    background: var(--surface2);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Bottone comando: icona dominante, area touch comoda su mobile */
.gt-pulse-btn[b-wcg7161wqc] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 120px;
    border: none;
    border-radius: 14px;
    padding: 18px 10px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.gt-pulse-btn:disabled[b-wcg7161wqc] {
    opacity: 0.45;
    cursor: default;
}

.gt-pulse-btn.intent-open[b-wcg7161wqc] {
    background: var(--gt-open-fill);
    color: #fff;
}

/* Fermo + non closed: solo icona (garage-open / slide-arrow-right), giallo. */
.gt-pulse-btn.intent-pulse[b-wcg7161wqc] {
    background: var(--gt-pulse);
    color: #422006;
}

/* Icone cancello: dominante in ogni stato */
.gt-pulse-btn .gt-cmd-icon[b-wcg7161wqc] {
    width: 52px;
    height: 52px;
}

.gt-pulse-btn.intent-pulse .gt-cmd-icon[b-wcg7161wqc] {
    width: 58px;
    height: 58px;
}

.gt-pulse-btn.intent-stop[b-wcg7161wqc] {
    background: var(--gt-move);
    color: var(--gt-move-ink);
}

/* Schermi stretti: un po' più compatti ma restano due colonne */
@media (max-width: 360px) {
    .gt-card[b-wcg7161wqc] {
        padding: 8px;
        min-height: 168px;
    }

    .gt-global-icon[b-wcg7161wqc] {
        width: 40px;
        height: 40px;
    }

    .gt-global-split .gt-global-icon[b-wcg7161wqc] {
        width: 36px;
        height: 36px;
    }

    .gt-pulse-btn[b-wcg7161wqc] {
        min-height: 100px;
        font-size: 14px;
        padding: 12px 8px;
    }

    .gt-pulse-btn .gt-cmd-icon[b-wcg7161wqc] {
        width: 44px;
        height: 44px;
    }

    .gt-pulse-btn.intent-pulse .gt-cmd-icon[b-wcg7161wqc] {
        width: 50px;
        height: 50px;
    }

    .gt-card-name[b-wcg7161wqc] {
        font-size: 13px;
    }
}

.gt-feedback[b-wcg7161wqc] {
    margin: 0;
    font-size: 12px;
    color: var(--text2);
    text-align: center;
}
/* /Components/Pages/HeatPumpBoostDetail.razor.rz.scp.css */
/* Boost detail — reuse hp-page palette via shared tokens where possible */
.boost-detail[b-30a7ru7rom] {
    --bd-dhw: #2DD4BF;
    --bd-dhw-deep: #5EEAD4;
    --bd-ok: #4ADE80;
    --bd-error: #F87171;
    --bd-cool: #60A5FA;
    --bd-power: #A5B4FC;
    --bd-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 14px 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    color: var(--text);
}

/* Mobile: scroll documento se contenuto lungo (come altre pagine) */
.app.boost-detail[b-30a7ru7rom] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));
}

@media (max-width: 600px) {
    .boost-detail[b-30a7ru7rom] {
        padding: 0 10px 20px;
    }
}

.bd-main[b-30a7ru7rom] {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

html[data-theme="light"] .boost-detail[b-30a7ru7rom] {
    --bd-dhw: #0D9488;
    --bd-dhw-deep: #0F766E;
    --bd-ok: #15803D;
    --bd-error: #B91C1C;
    --bd-cool: #1A6BC8;
    --bd-power: #6366F1;
}

.bd-header[b-30a7ru7rom] {
    padding: 12px 0 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
}

.bd-detail-header[b-30a7ru7rom] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-back-btn[b-30a7ru7rom] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 1.45rem;
    color: var(--text2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
}

.bd-header-text[b-30a7ru7rom] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.bd-title[b-30a7ru7rom] {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bd-title i[b-30a7ru7rom] {
    color: var(--bd-dhw-deep);
    opacity: 0.9;
    font-size: 1.1rem;
}

.bd-sub[b-30a7ru7rom] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text3);
    margin-top: 3px;
    font-family: var(--bd-mono);
}

.bd-header-actions[b-30a7ru7rom] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bd-nav-btn[b-30a7ru7rom] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.bd-nav-btn:disabled[b-30a7ru7rom] {
    opacity: 0.35;
    cursor: not-allowed;
}

.bd-nav-btn:not(:disabled):active[b-30a7ru7rom] {
    background: var(--surface2);
}

.bd-status-row[b-30a7ru7rom] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.bd-badge[b-30a7ru7rom] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid transparent;
}

.bd-badge.ok[b-30a7ru7rom] {
    color: var(--bd-ok);
    background: var(--ok-soft);
    border-color: rgba(21, 128, 61, 0.28);
}

.bd-badge.muted[b-30a7ru7rom] {
    color: var(--text2);
    background: var(--surface2);
    border-color: var(--border);
}

.bd-badge.warn[b-30a7ru7rom] {
    color: #B45309;
    background: var(--warn-soft);
    border-color: rgba(180, 83, 9, 0.25);
}

.bd-badge.err[b-30a7ru7rom] {
    color: var(--bd-error);
    background: var(--danger-soft);
    border-color: rgba(185, 28, 28, 0.25);
}

.bd-sample-count[b-30a7ru7rom] {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--bd-mono);
}

.bd-section[b-30a7ru7rom] {
    margin-top: 12px;
}

.bd-section-title[b-30a7ru7rom] {
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    margin-bottom: 6px;
    font-weight: 500;
}

.bd-card[b-30a7ru7rom] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}

.bd-card.bd-summary[b-30a7ru7rom] {
    border-top: 2px solid var(--bd-dhw);
}

/* Mobile: tutte le cell in griglia 2 col piene (display:contents annulla le righe) */
.bd-sum-grid[b-30a7ru7rom] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bd-sum-row[b-30a7ru7rom] {
    display: contents;
}

.bd-sum-cell[b-30a7ru7rom] {
    background: var(--surface2);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
}

/* Mobile: niente enfasi primary (tutte uguali come prima) */
.bd-sum-cell.primary[b-30a7ru7rom] {
    background: var(--surface2);
    border: none;
    box-shadow: none;
    min-height: 0;
    padding: 10px;
}

.bd-sum-label[b-30a7ru7rom] {
    font-size: 9px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.bd-sum-value[b-30a7ru7rom] {
    font-family: var(--bd-mono);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
}

.bd-sum-value .unit[b-30a7ru7rom] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
    margin-left: 2px;
}

.bd-sum-value.dhw[b-30a7ru7rom] { color: var(--bd-dhw-deep); }
.bd-sum-value.energy[b-30a7ru7rom] { color: var(--bd-power); }
.bd-sum-value.ok[b-30a7ru7rom] { color: var(--bd-ok); }
.bd-sum-value.cool[b-30a7ru7rom] { color: var(--bd-cool); }

.bd-sum-meta[b-30a7ru7rom] {
    font-size: 10px;
    color: var(--text2);
    margin-top: 3px;
    font-family: var(--bd-mono);
}

.bd-chart-card[b-30a7ru7rom] {
    padding: 12px 10px 8px;
}

.bd-chart-head[b-30a7ru7rom] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 4px;
}

.bd-chart-title[b-30a7ru7rom] {
    font-size: 12px;
    font-weight: 700;
}

.bd-chart-legend[b-30a7ru7rom] {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--bd-mono);
}

.bd-chart-wrap[b-30a7ru7rom] {
    position: relative;
    height: 160px;
    width: 100%;
}

.bd-chart-wrap.tall[b-30a7ru7rom] {
    height: 180px;
}

.bd-empty[b-30a7ru7rom] {
    text-align: center;
    padding: 48px 20px;
    color: var(--text2);
    font-size: 13px;
}

.bd-empty.soft[b-30a7ru7rom] {
    padding: 24px 16px;
    font-size: 12px;
}

.bd-empty.soft span[b-30a7ru7rom] {
    font-size: 11px;
    color: var(--text3);
}

.bd-empty i[b-30a7ru7rom] {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    opacity: 0.45;
}

.bd-link-btn[b-30a7ru7rom] {
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border2);
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/*
  Desktop ≥900px
  ─ Sintesi KPI a 3×2 (poi 6 col su schermi larghi)
  ─ Charts: temp+energia a sinistra (alta), potenza + COP a destra
  Mobile resta stack verticale invariato.
*/
@media (min-width: 900px) {
    .app.boost-detail[b-30a7ru7rom] {
        max-width: 1200px;
        width: 100%;
        padding: 0 20px 32px;
        box-sizing: border-box;
    }

    .bd-header[b-30a7ru7rom] {
        padding: 14px 0 12px;
    }

    .bd-status-row[b-30a7ru7rom] {
        margin-top: 12px;
        gap: 10px;
    }

    .bd-badge[b-30a7ru7rom] {
        font-size: 0.72rem;
        padding: 5px 12px;
    }

    .bd-sample-count[b-30a7ru7rom] {
        font-size: 0.72rem;
    }

    .bd-section[b-30a7ru7rom] {
        margin-top: 0;
    }

    .bd-section-title[b-30a7ru7rom] {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

    .bd-main[b-30a7ru7rom] {
        gap: 16px;
    }

    /*
      Sintesi desktop (da 900px):
      Riga 1: 3 principali · Riga 2: altre uguali a tutta larghezza
    */
    .bd-sum-grid[b-30a7ru7rom] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .bd-sum-row[b-30a7ru7rom] {
        display: grid;
        gap: 12px 14px;
    }

    .bd-sum-row.primary-row[b-30a7ru7rom] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bd-sum-row.secondary-row[b-30a7ru7rom] {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }

    .bd-card.bd-summary[b-30a7ru7rom] {
        padding: 16px;
        border-radius: 16px;
    }

    .bd-sum-cell[b-30a7ru7rom] {
        padding: 12px 14px 11px;
        border-radius: 12px;
        min-height: 84px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .bd-sum-cell.primary[b-30a7ru7rom] {
        min-height: 108px;
        padding: 16px 16px 14px;
        background: color-mix(in srgb, var(--surface2) 70%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--border2, var(--border)) 80%, transparent);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }

    .bd-sum-cell.primary .bd-sum-label[b-30a7ru7rom] {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
    }

    .bd-sum-cell.primary .bd-sum-value[b-30a7ru7rom] {
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
    }

    .bd-sum-cell.primary .bd-sum-value .unit[b-30a7ru7rom] {
        font-size: 0.95rem;
        font-weight: 650;
    }

    .bd-sum-cell.primary .bd-sum-meta[b-30a7ru7rom] {
        font-size: 0.78rem;
        margin-top: 6px;
    }

    .bd-sum-label[b-30a7ru7rom] {
        font-size: 0.68rem;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .bd-sum-value[b-30a7ru7rom] {
        font-size: 1.28rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .bd-sum-value .unit[b-30a7ru7rom] {
        font-size: 0.8rem;
        font-weight: 650;
    }

    .bd-sum-meta[b-30a7ru7rom] {
        font-size: 0.72rem;
        margin-top: 4px;
    }

    /*
      Charts 900–1099: stack verticale (evita taglio potenza/COP).
      Bento affiancato solo ≥1100.
    */
    .bd-charts[b-30a7ru7rom] {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        min-width: 0;
    }

    .bd-sec-chart-temp[b-30a7ru7rom],
    .bd-sec-chart-power[b-30a7ru7rom],
    .bd-sec-chart-ctx[b-30a7ru7rom] {
        grid-column: auto;
        grid-row: auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin-top: 0;
    }

    .bd-sec-chart-temp > .bd-chart-card[b-30a7ru7rom],
    .bd-sec-chart-power > .bd-chart-card[b-30a7ru7rom],
    .bd-sec-chart-ctx > .bd-chart-card[b-30a7ru7rom] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 14px 14px 12px;
        border-radius: 14px;
    }

    .bd-chart-head[b-30a7ru7rom] {
        margin-bottom: 10px;
    }

    .bd-chart-title[b-30a7ru7rom] {
        font-size: 0.88rem;
    }

    .bd-chart-legend[b-30a7ru7rom] {
        font-size: 0.72rem;
    }

    .bd-chart-wrap[b-30a7ru7rom] {
        height: 220px;
        width: 100%;
        max-width: 100%;
    }

    .bd-chart-wrap.tall[b-30a7ru7rom] {
        height: 260px;
    }

    .bd-sec-chart-temp .bd-chart-wrap.tall[b-30a7ru7rom] {
        height: 300px;
    }
}

/* Desktop largo: bento grafici (temp | potenza+COP) */
@media (min-width: 1100px) {
    .bd-sum-grid[b-30a7ru7rom] {
        gap: 14px;
    }

    .bd-sum-row.primary-row[b-30a7ru7rom],
    .bd-sum-row.secondary-row[b-30a7ru7rom] {
        gap: 14px 16px;
    }

    .bd-sum-cell.primary[b-30a7ru7rom] {
        min-height: 116px;
        padding: 18px 18px 16px;
    }

    .bd-sum-cell.primary .bd-sum-value[b-30a7ru7rom] {
        font-size: 1.95rem;
    }

    .bd-sum-row.secondary-row .bd-sum-cell[b-30a7ru7rom] {
        min-height: 92px;
        padding: 14px 16px;
    }

    .bd-sum-row.secondary-row .bd-sum-value[b-30a7ru7rom] {
        font-size: 1.35rem;
    }

    .bd-charts[b-30a7ru7rom] {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
        grid-template-rows: auto auto;
        gap: 16px 18px;
        align-items: stretch;
    }

    .bd-sec-chart-temp[b-30a7ru7rom] {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .bd-sec-chart-power[b-30a7ru7rom] {
        grid-column: 2;
        grid-row: 1;
    }

    .bd-sec-chart-ctx[b-30a7ru7rom] {
        grid-column: 2;
        grid-row: 2;
    }

    .bd-sec-chart-temp .bd-chart-wrap.tall[b-30a7ru7rom] {
        height: 500px;
    }

    .bd-sec-chart-power .bd-chart-wrap[b-30a7ru7rom] {
        height: 230px;
    }

    .bd-sec-chart-ctx .bd-chart-wrap.tall[b-30a7ru7rom] {
        height: 230px;
    }
}
/* /Components/Pages/HeatPumpPage.razor.rz.scp.css */
/* Heat pump mockup page — scoped styles (prefix hp-). */

.hp-page[b-r2yme2rwuj] {
    --hp-dhw: #2DD4BF;
    --hp-dhw-bg: rgba(45, 212, 191, 0.12);
    --hp-dhw-deep: #5EEAD4;
    --hp-error: #F87171;
    --hp-error-bg: rgba(185, 28, 28, 0.18);
    --hp-ok: #4ADE80;
    --hp-ok-bg: rgba(74, 222, 128, 0.12);
    --hp-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    padding: 0 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    color: var(--text);
}

/* Desktop layout (mockup v1.4): ACS|Perf · Temps|Power — mobile stack */
.hp-main[b-r2yme2rwuj] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 900px) {
    .app.hp-page[b-r2yme2rwuj] {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        overflow-y: visible;
        /* Larghezza piena shell app (1200), non più compressa a 1100 */
        max-width: 1200px;
        width: 100%;
        padding: 0 20px 28px;
        box-sizing: border-box;
    }

    .hp-main[b-r2yme2rwuj] {
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: 16px 20px;
        align-items: stretch;
        width: 100%;
    }

    .hp-sec-acs[b-r2yme2rwuj],
    .hp-sec-perf[b-r2yme2rwuj],
    .hp-sec-temps[b-r2yme2rwuj],
    .hp-sec-power[b-r2yme2rwuj] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-bottom: 0 !important;
    }

    .hp-sec-acs[b-r2yme2rwuj] { grid-column: 1; grid-row: 1; }
    .hp-sec-perf[b-r2yme2rwuj] { grid-column: 2; grid-row: 1; }
    .hp-sec-temps[b-r2yme2rwuj] { grid-column: 1; grid-row: 2; }
    .hp-sec-power[b-r2yme2rwuj] { grid-column: 2; grid-row: 2; }

    .hp-main:not(.has-power) .hp-sec-temps[b-r2yme2rwuj] {
        grid-column: 1 / -1;
    }

    .hp-sec-acs > .hp-card[b-r2yme2rwuj],
    .hp-sec-perf > .hp-card[b-r2yme2rwuj],
    .hp-sec-temps > .hp-card[b-r2yme2rwuj],
    .hp-sec-power > .hp-card[b-r2yme2rwuj] {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .hp-sec-power .hp-power-card[b-r2yme2rwuj] {
        justify-content: center;
    }

    .hp-sec-power .hp-power-inner[b-r2yme2rwuj] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        height: 100%;
    }

    .hp-sec-power .hp-power-row[b-r2yme2rwuj] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hp-sec-power .hp-power-btn[b-r2yme2rwuj] {
        width: 100%;
    }
}

html[data-theme="light"] .hp-page[b-r2yme2rwuj] {
    --hp-dhw: #0D9488;
    --hp-dhw-bg: #E6F7F5;
    --hp-dhw-deep: #0F766E;
    --hp-error: #B91C1C;
    --hp-error-bg: #FEF2F2;
    --hp-ok: #15803D;
    --hp-ok-bg: #F0FDF4;
}

/* ── Header ──────────────────────────────────────── */
.hp-header[b-r2yme2rwuj] {
    padding: 12px 0 10px;
    flex-shrink: 0;
}

.hp-detail-header[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hp-back-btn[b-r2yme2rwuj] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 1.45rem;
    color: var(--text2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
}

.hp-back-btn:active[b-r2yme2rwuj] {
    background: var(--surface2);
}

.hp-header-text[b-r2yme2rwuj] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.hp-title[b-r2yme2rwuj] {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hp-title i[b-r2yme2rwuj] {
    opacity: 0.9;
    font-size: 1.1rem;
}

.hp-sub[b-r2yme2rwuj] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text3);
    margin-top: 3px;
}

.hp-header-badges[b-r2yme2rwuj] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.hp-stats-btn[b-r2yme2rwuj] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border2, rgba(0,0,0,0.13));
    background: var(--surface, #FAFAF8);
    color: var(--text, #1A1A18);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.hp-stats-btn:active[b-r2yme2rwuj] {
    background: var(--surface2, #EEECEA);
}

.hp-stats-btn i[b-r2yme2rwuj] {
    opacity: 0.9;
}

.hp-power-badge[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1.5px solid;
}

.hp-power-badge.on[b-r2yme2rwuj] {
    color: var(--hp-ok);
    background: var(--hp-ok-bg);
    border-color: rgba(21, 128, 61, 0.3);
}

.hp-power-badge.off[b-r2yme2rwuj] {
    color: var(--hp-error);
    background: var(--hp-error-bg);
    border-color: rgba(185, 28, 28, 0.3);
}

.hp-power-badge.unknown[b-r2yme2rwuj] {
    color: var(--text2);
    background: var(--surface2);
    border-color: var(--border2);
}

.hp-power-badge i[b-r2yme2rwuj] {
    font-size: 11px;
}

/* ── Main power control ─────────────────────────── */
.hp-power-section[b-r2yme2rwuj] {
    margin-top: 4px;
}

.hp-power-card[b-r2yme2rwuj] {
    padding: 12px;
}

.hp-power-row[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hp-power-info[b-r2yme2rwuj] {
    flex: 1;
    min-width: 0;
}

.hp-power-status[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hp-power-status.on[b-r2yme2rwuj] { color: var(--hp-ok); }
.hp-power-status.off[b-r2yme2rwuj] { color: var(--hp-error); }
.hp-power-status.unknown[b-r2yme2rwuj] { color: var(--text2); }

.hp-power-hint[b-r2yme2rwuj] {
    font-size: 11px;
    color: var(--text2);
    line-height: 1.35;
}

.hp-power-btn[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 96px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, opacity 0.15s;
}

.hp-power-btn.turn-on[b-r2yme2rwuj] {
    color: #fff;
    background: var(--hp-ok);
    border-color: rgba(21, 128, 61, 0.5);
}

.hp-power-btn.turn-off[b-r2yme2rwuj] {
    color: #fff;
    background: var(--hp-error);
    border-color: rgba(185, 28, 28, 0.45);
}

.hp-power-btn:disabled[b-r2yme2rwuj] {
    opacity: 0.55;
    cursor: not-allowed;
}

.hp-power-btn:not(:disabled):active[b-r2yme2rwuj] {
    opacity: 0.88;
}

.hp-power-btn-spin[b-r2yme2rwuj] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hp-spin-b-r2yme2rwuj 0.7s linear infinite;
}

@keyframes hp-spin-b-r2yme2rwuj {
    to { transform: rotate(360deg); }
}

.hp-power-feedback[b-r2yme2rwuj] {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text2);
}

/* Confirm dialog */
.hp-confirm-overlay[b-r2yme2rwuj] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26, 26, 24, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

.hp-confirm-dialog[b-r2yme2rwuj] {
    width: 100%;
    max-width: 340px;
    background: var(--surface, #FAFAF8);
    border-radius: 16px;
    padding: 22px 18px 16px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.25);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    text-align: center;
}

.hp-confirm-icon[b-r2yme2rwuj] {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.hp-confirm-icon.on[b-r2yme2rwuj] {
    color: var(--hp-ok);
    background: var(--hp-ok-bg);
}

.hp-confirm-icon.off[b-r2yme2rwuj] {
    color: var(--hp-error);
    background: var(--hp-error-bg);
}

.hp-confirm-title[b-r2yme2rwuj] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.hp-confirm-text[b-r2yme2rwuj] {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.45;
    margin: 0 0 18px;
}

.hp-confirm-actions[b-r2yme2rwuj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hp-confirm-btn[b-r2yme2rwuj] {
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border2, rgba(0,0,0,0.13));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hp-confirm-btn.cancel[b-r2yme2rwuj] {
    background: var(--surface2, #EEECEA);
    color: var(--text);
}

.hp-confirm-btn.confirm-on[b-r2yme2rwuj] {
    background: var(--hp-ok);
    border-color: transparent;
    color: #fff;
}

.hp-confirm-btn.confirm-off[b-r2yme2rwuj] {
    background: var(--hp-error);
    border-color: transparent;
    color: #fff;
}

.hp-confirm-btn:disabled[b-r2yme2rwuj] {
    opacity: 0.55;
    cursor: not-allowed;
}

.hp-plant-off-banner[b-r2yme2rwuj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(185, 28, 28, 0.22);
    background: var(--hp-error-bg);
    color: #991B1B;
    font-size: 12px;
    line-height: 1.35;
}

.hp-plant-off-banner > i[b-r2yme2rwuj] {
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.hp-plant-off-banner strong[b-r2yme2rwuj] {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.hp-mode-badge[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1.5px solid;
}

.hp-mode-dot[b-r2yme2rwuj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: hp-pulse-b-r2yme2rwuj 1.6s ease-in-out infinite;
}

.hp-mode-badge.heat[b-r2yme2rwuj] {
    color: var(--heat);
    background: var(--heat-bg);
    border-color: rgba(200, 75, 26, 0.35);
}

.hp-mode-badge.cool[b-r2yme2rwuj] {
    color: var(--cool);
    background: var(--cool-bg);
    border-color: rgba(26, 107, 200, 0.35);
}

.hp-mode-badge.dhw[b-r2yme2rwuj] {
    color: var(--hp-dhw-deep);
    background: var(--hp-dhw-bg);
    border-color: rgba(13, 148, 136, 0.35);
}

@keyframes hp-pulse-b-r2yme2rwuj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Sections / cards ────────────────────────────── */
.hp-section[b-r2yme2rwuj] {
    margin-top: 12px;
    flex-shrink: 0;
}

.hp-section-title[b-r2yme2rwuj] {
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    margin-bottom: 6px;
    font-weight: 500;
}

.hp-card[b-r2yme2rwuj] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow: hidden;
}

.hp-card[b-r2yme2rwuj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border2);
}

.hp-card.hp-dhw[b-r2yme2rwuj] {
    padding: 14px 14px 16px;
}

.hp-card.hp-dhw[b-r2yme2rwuj]::before {
    background: var(--hp-dhw);
}

.hp-card.hp-energy[b-r2yme2rwuj]::before {
    background: linear-gradient(90deg, #E8A317, #22C55E, #64748B);
}

button.hp-card.hp-energy-tap[b-r2yme2rwuj] {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    padding: 12px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

button.hp-card.hp-energy-tap:active[b-r2yme2rwuj] {
    background: var(--surface2, #EEECEA);
}

.hp-energy-open-hint[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.06));
    font-size: 10px;
    font-weight: 600;
    color: var(--text3, #A0A09A);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hp-energy-open-hint i[b-r2yme2rwuj] {
    font-size: 11px;
    opacity: 0.7;
}

.hp-card.hp-perf[b-r2yme2rwuj]::before {
    background: linear-gradient(90deg, var(--heat), #E8A317, var(--hp-dhw));
}

/* Prestazioni panel (mockup): header + 6 KPI + CTA stats */
.hp-perf-panel[b-r2yme2rwuj] {
    padding: 0 !important;
    overflow: hidden;
}

.hp-perf-top[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.hp-perf-valve[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text3);
}

.hp-perf-valve.room[b-r2yme2rwuj] { color: #86EFAC; }
.hp-perf-valve.tank[b-r2yme2rwuj] { color: var(--hp-dhw-deep); }

.hp-perf-kpis[b-r2yme2rwuj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
}

.hp-perf-kpi[b-r2yme2rwuj] {
    padding: 12px 14px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hp-perf-kpi:nth-child(2n)[b-r2yme2rwuj] { border-right: none; }
.hp-perf-kpi:nth-child(n+5)[b-r2yme2rwuj] { border-bottom: none; }

.hp-perf-kpi.idle[b-r2yme2rwuj] { opacity: 0.45; }

.hp-perf-kpi .k[b-r2yme2rwuj] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
    margin-bottom: 4px;
}

.hp-perf-kpi .v[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}

.hp-perf-kpi .v .u[b-r2yme2rwuj],
.hp-perf-kpi .v[b-r2yme2rwuj]  .unit {
    font-size: 0.7rem;
    font-weight: 650;
    color: var(--text3);
    margin-left: 2px;
}

.hp-perf-kpi.cons .v[b-r2yme2rwuj] { color: #FED7AA; }
.hp-perf-kpi.prod .v[b-r2yme2rwuj] { color: #86EFAC; }
.hp-perf-kpi.cop .v[b-r2yme2rwuj] { color: #93C5FD; }
.hp-perf-kpi.day .v[b-r2yme2rwuj] { color: #E9D5FF; }
.hp-perf-kpi.vsyest .v[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.hp-perf-kpi.vsyest .v i[b-r2yme2rwuj] { font-size: 1.15rem; margin-left: -4px; }
.hp-perf-kpi.vsyest.better .v[b-r2yme2rwuj] { color: #86EFAC; }
.hp-perf-kpi.vsyest.worse .v[b-r2yme2rwuj] { color: #FDBA74; }
.hp-perf-kpi.hz .v[b-r2yme2rwuj] { color: #FDE68A; }

html[data-theme="light"] .hp-perf-kpi.cons .v[b-r2yme2rwuj] { color: #C2410C; }
html[data-theme="light"] .hp-perf-kpi.prod .v[b-r2yme2rwuj] { color: #15803D; }
html[data-theme="light"] .hp-perf-kpi.cop .v[b-r2yme2rwuj] { color: #1D4ED8; }
html[data-theme="light"] .hp-perf-kpi.day .v[b-r2yme2rwuj] { color: #7C3AED; }
html[data-theme="light"] .hp-perf-kpi.vsyest.better .v[b-r2yme2rwuj] { color: #15803D; }
html[data-theme="light"] .hp-perf-kpi.vsyest.worse .v[b-r2yme2rwuj] { color: #C2410C; }
html[data-theme="light"] .hp-perf-kpi.hz .v[b-r2yme2rwuj] { color: #A16207; }

.hp-perf-stats[b-r2yme2rwuj] {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: none;
    border-top: 1px solid color-mix(in srgb, #C084FC 28%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, #C084FC 16%, transparent),
        color-mix(in srgb, #C084FC 6%, transparent));
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, opacity 0.1s;
}

.hp-perf-stats:hover[b-r2yme2rwuj] {
    background: linear-gradient(135deg,
        color-mix(in srgb, #C084FC 22%, transparent),
        color-mix(in srgb, #C084FC 10%, transparent));
}

.hp-perf-stats:active[b-r2yme2rwuj] { opacity: 0.92; }

.hp-perf-stats-ico[b-r2yme2rwuj] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, #C084FC 22%, transparent);
    border: 1px solid color-mix(in srgb, #C084FC 40%, transparent);
    color: #E9D5FF;
    font-size: 1.15rem;
}

html[data-theme="light"] .hp-perf-stats-ico[b-r2yme2rwuj] {
    color: #6B21A8;
    background: #F3E8FF;
    border-color: #E9D5FF;
}

.hp-perf-stats-text[b-r2yme2rwuj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hp-perf-stats-text .t[b-r2yme2rwuj] {
    font-size: 0.9rem;
    font-weight: 750;
    color: #F3E8FF;
    line-height: 1.2;
}

.hp-perf-stats-text .s[b-r2yme2rwuj] {
    font-size: 0.72rem;
    font-weight: 500;
    color: #C4B5FD;
    line-height: 1.3;
}

html[data-theme="light"] .hp-perf-stats-text .t[b-r2yme2rwuj] { color: #6B21A8; }
html[data-theme="light"] .hp-perf-stats-text .s[b-r2yme2rwuj] { color: #7C3AED; }

.hp-perf-stats-chev[b-r2yme2rwuj] {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #E9D5FF;
    opacity: 0.9;
}

html[data-theme="light"] .hp-perf-stats-chev[b-r2yme2rwuj] { color: #7C3AED; }

.hp-card.hp-temps[b-r2yme2rwuj]::before {
    background: linear-gradient(90deg, var(--cool), #94A3B8, var(--heat));
}

/* ── ACS ─────────────────────────────────────────── */
.hp-acs-layout[b-r2yme2rwuj] {
    display: grid;
    /* Tanica un po’ più larga per le label; il setpoint ha ancora spazio */
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    /* stretch: meta alta quanto la tanica → setpoint pinabile in basso */
    align-items: stretch;
}

/*
  Tanica leggermente più alta (meno tozza), non esagerata.
  Il blocco setpoint si allinea al bordo inferiore della tanica.
*/
.hp-tank[b-r2yme2rwuj] {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 176px;
    border-radius: 12px;
    border: 1.5px solid var(--border2);
    background: linear-gradient(180deg, var(--surface2) 0%, var(--surface3) 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

@media (min-width: 600px) {
    .hp-tank[b-r2yme2rwuj] {
        min-height: 192px;
    }
}

/* Temp ACS sotto soglia critica: enfasi media (leggibile ma non “allarme”) */
.hp-tank.is-critical[b-r2yme2rwuj] {
    border: 2px solid rgba(185, 28, 28, 0.75);
    background: linear-gradient(180deg, var(--hp-error-bg) 0%, color-mix(in srgb, var(--hp-error) 18%, var(--surface)) 100%);
    box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.3);
    transform-origin: center center;
    animation:
        hp-tank-critical-pulse-b-r2yme2rwuj 1.5s ease-in-out infinite,
        hp-tank-critical-wobble-b-r2yme2rwuj 2.2s ease-in-out infinite;
}

.hp-tank.is-critical .hp-tank-fill[b-r2yme2rwuj] {
    background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 55%, #B91C1C 100%) !important;
    min-height: 8px;
    animation: hp-tank-critical-fill-b-r2yme2rwuj 1.5s ease-in-out infinite;
}

.hp-tank.is-critical .hp-tank-fill[b-r2yme2rwuj]::after {
    display: none;
}

.hp-tank.is-critical .hp-tank-wave[b-r2yme2rwuj] {
    background: radial-gradient(ellipse at center, rgba(254, 226, 226, 0.75) 0%, transparent 70%);
    animation: hp-wave-b-r2yme2rwuj 1.3s ease-in-out infinite;
}

.hp-tank.is-critical .hp-tank-pct[b-r2yme2rwuj] {
    color: #991B1B;
}

.hp-tank.is-critical .hp-tank-pct-unit[b-r2yme2rwuj] {
    color: #B91C1C;
}

.hp-tank.is-critical .hp-tank-quality[b-r2yme2rwuj] {
    color: #B91C1C !important;
    font-weight: 800;
    animation: hp-tank-critical-label-b-r2yme2rwuj 1.5s ease-in-out infinite;
}

@keyframes hp-tank-critical-pulse-b-r2yme2rwuj {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.28);
        border-color: rgba(185, 28, 28, 0.65);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(185, 28, 28, 0);
        border-color: #B91C1C;
    }
}

/* Leggero scuotimento: rotazione sull’asse Z (uscente dallo schermo) */
@keyframes hp-tank-critical-wobble-b-r2yme2rwuj {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-1.6deg); }
    40% { transform: rotate(1.4deg); }
    60% { transform: rotate(-1.1deg); }
    80% { transform: rotate(0.8deg); }
}

@keyframes hp-tank-critical-fill-b-r2yme2rwuj {
    0%, 100% { filter: brightness(1); opacity: 1; }
    50% { filter: brightness(1.1); opacity: 0.9; }
}

@keyframes hp-tank-critical-label-b-r2yme2rwuj {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-tank.is-critical[b-r2yme2rwuj],
    .hp-tank.is-critical .hp-tank-fill[b-r2yme2rwuj],
    .hp-tank.is-critical .hp-tank-wave[b-r2yme2rwuj],
    .hp-tank.is-critical .hp-tank-quality[b-r2yme2rwuj] {
        animation: none;
        transform: none;
    }
    .hp-tank.is-critical[b-r2yme2rwuj] {
        border-color: #B91C1C;
        box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.25);
    }
}

.hp-tank-fill[b-r2yme2rwuj] {
    width: 100%;
    transition: height 0.35s ease, background 0.35s ease;
    position: relative;
}

/* Colori a 6 fasce di qualità; altezza fill lineare 0–100% */
.hp-tank-fill.fill-ok[b-r2yme2rwuj] {
    /* 90+ ottimale */
    background: linear-gradient(180deg, #6EE7B7 0%, #16A34A 55%, #15803D 100%);
}

.hp-tank-fill.fill-good[b-r2yme2rwuj] {
    /* 75–89 buono */
    background: linear-gradient(180deg, #86EFAC 0%, #22C55E 55%, #16A34A 100%);
}

.hp-tank-fill.fill-fair[b-r2yme2rwuj] {
    /* 55–74 discreto */
    background: linear-gradient(180deg, #FDE68A 0%, #FBBF24 50%, #84CC16 100%);
}

.hp-tank-fill.fill-mid[b-r2yme2rwuj] {
    /* 35–54 medio */
    background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 55%, #D97706 100%);
}

.hp-tank-fill.fill-low[b-r2yme2rwuj] {
    /* 15–34 basso */
    background: linear-gradient(180deg, #FDBA74 0%, #F97316 50%, var(--heat) 100%);
}

.hp-tank-fill.fill-empty[b-r2yme2rwuj] {
    /* 0–14 esaurito */
    background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 55%, #B91C1C 100%);
    min-height: 6px;
}

.hp-tank-fill[b-r2yme2rwuj]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent);
}

.hp-tank-fill.fill-empty[b-r2yme2rwuj]::after {
    display: none;
}

.hp-tank-wave[b-r2yme2rwuj] {
    position: absolute;
    top: -4px;
    left: -10%;
    width: 120%;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
    animation: hp-wave-b-r2yme2rwuj 2.8s ease-in-out infinite;
}

@keyframes hp-wave-b-r2yme2rwuj {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6%); }
}

/*
 * Label tanica: pill scura semi-opaca, centrata nella tanica
 * (margin:auto + inset 0 + fit-content — stabile anche con wobble critici).
 */
.hp-tank-label[b-r2yme2rwuj] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: fit-content;
    height: fit-content;
    max-width: calc(100% - 8px);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    gap: 1px;
    padding: 8px 9px 7px;
    border-radius: 10px;
    background: rgba(12, 14, 18, 0.82);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    text-shadow: none;
    box-sizing: border-box;
    text-align: center;
}

html[data-theme="light"] .hp-tank-label[b-r2yme2rwuj] {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.hp-tank-pct[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 17px;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1;
}

.hp-tank-pct-unit[b-r2yme2rwuj] {
    font-size: 9px;
    color: #CBD5E1;
    font-weight: 600;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

html[data-theme="light"] .hp-tank-pct[b-r2yme2rwuj] {
    color: var(--text);
}

html[data-theme="light"] .hp-tank-pct-unit[b-r2yme2rwuj] {
    color: var(--text2);
}

.hp-tank-quality[b-r2yme2rwuj] {
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

/* Qualità su pill scura: tinte chiare ad alto contrasto */
.hp-tank-quality.q-ok[b-r2yme2rwuj] { color: #86EFAC; }
.hp-tank-quality.q-good[b-r2yme2rwuj] { color: #BBF7D0; }
.hp-tank-quality.q-fair[b-r2yme2rwuj] { color: #FDE68A; }
.hp-tank-quality.q-mid[b-r2yme2rwuj] { color: #FCD34D; }
.hp-tank-quality.q-low[b-r2yme2rwuj] { color: #FDBA74; }
.hp-tank-quality.q-empty[b-r2yme2rwuj] { color: #FECACA; } /* esaurito: rosa chiaro leggibile */

html[data-theme="light"] .hp-tank-quality.q-ok[b-r2yme2rwuj] { color: #15803D; }
html[data-theme="light"] .hp-tank-quality.q-good[b-r2yme2rwuj] { color: #16A34A; }
html[data-theme="light"] .hp-tank-quality.q-fair[b-r2yme2rwuj] { color: #65A30D; }
html[data-theme="light"] .hp-tank-quality.q-mid[b-r2yme2rwuj] { color: #B45309; }
html[data-theme="light"] .hp-tank-quality.q-low[b-r2yme2rwuj] { color: var(--heat); }
html[data-theme="light"] .hp-tank-quality.q-empty[b-r2yme2rwuj] { color: #B91C1C; }

/* Critico: pill resta leggibile (rosso su scuro) */
.hp-tank.is-critical .hp-tank-label[b-r2yme2rwuj] {
    background: rgba(127, 29, 29, 0.88);
}

.hp-tank.is-critical .hp-tank-pct[b-r2yme2rwuj] {
    color: #FEE2E2;
}

.hp-tank.is-critical .hp-tank-pct-unit[b-r2yme2rwuj] {
    color: #FECACA;
}

.hp-tank.is-critical .hp-tank-quality[b-r2yme2rwuj] {
    color: #FEE2E2 !important;
}

html[data-theme="light"] .hp-tank.is-critical .hp-tank-label[b-r2yme2rwuj] {
    background: rgba(254, 226, 226, 0.92);
}

html[data-theme="light"] .hp-tank.is-critical .hp-tank-pct[b-r2yme2rwuj] {
    color: #991B1B;
}

html[data-theme="light"] .hp-tank.is-critical .hp-tank-pct-unit[b-r2yme2rwuj] {
    color: #B91C1C;
}

html[data-theme="light"] .hp-tank.is-critical .hp-tank-quality[b-r2yme2rwuj] {
    color: #B91C1C !important;
}

.hp-acs-meta[b-r2yme2rwuj] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

/* Setpoint: bordo inferiore allineato a quello della tanica */
.hp-sp-block[b-r2yme2rwuj] {
    margin-top: auto;
}

.hp-metric-row[b-r2yme2rwuj] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.hp-metric-label[b-r2yme2rwuj] {
    font-size: 12px;
    color: var(--text2);
}

.hp-metric-value[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.hp-metric-value.accent[b-r2yme2rwuj] {
    color: var(--hp-dhw-deep);
}

.hp-metric-value .unit[b-r2yme2rwuj] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text2);
    margin-left: 2px;
}

.hp-divider[b-r2yme2rwuj] {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

.hp-sp-label[b-r2yme2rwuj] {
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
    font-weight: 500;
}

.hp-sp-edit[b-r2yme2rwuj] {
    color: var(--hp-dhw-deep);
    text-transform: none;
    letter-spacing: 0;
}

.hp-sp-pending[b-r2yme2rwuj] {
    color: #B45309;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.hp-sp-value.pending[b-r2yme2rwuj] {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15);
}

.hp-setpoint[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hp-dhw-bg);
    border: 1.5px solid rgba(13, 148, 136, 0.28);
    border-radius: 12px;
    padding: 8px 10px;
}

.hp-sp-btn[b-r2yme2rwuj] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(13, 148, 136, 0.3);
    background: var(--surface);
    font-size: 24px;
    color: var(--hp-dhw-deep);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 0;
}

.hp-sp-btn:active[b-r2yme2rwuj] {
    background: rgba(13, 148, 136, 0.12);
    transform: scale(0.94);
}

.hp-sp-value[b-r2yme2rwuj] {
    font-size: 26px;
    font-weight: 700;
    font-family: var(--hp-mono);
    color: var(--hp-dhw-deep);
    background: var(--surface);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(13, 148, 136, 0.2);
    min-width: 4.2em; /* un filo meno largo: spazio alla tanica allargata */
    text-align: center;
}

.hp-sp-btn:disabled[b-r2yme2rwuj] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Boost ACS — slot per job futuro (setpoint temp → target → restore) */
.hp-boost-btn[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(13, 148, 136, 0.35);
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.12) 0%, rgba(34, 197, 94, 0.08) 100%);
    color: var(--hp-dhw-deep);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    line-height: 2;
    transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}

.hp-boost-btn i[b-r2yme2rwuj] {
    font-size: 15px;
    line-height: 1;
}

.hp-boost-btn:not(:disabled):active[b-r2yme2rwuj] {
    transform: scale(0.98);
    background: rgba(13, 148, 136, 0.18);
}

.hp-boost-btn:disabled[b-r2yme2rwuj] {
    opacity: 0.42;
    cursor: not-allowed;
    border-color: var(--border2);
    background: var(--surface2);
    color: var(--text3);
}

.hp-boost-btn.running[b-r2yme2rwuj] {
    opacity: 1;
    cursor: pointer;
    border-color: rgba(217, 119, 6, 0.4);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: #B45309;
}

.hp-boost-feedback[b-r2yme2rwuj] {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text2);
    text-align: center;
    line-height: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-boost-feedback.link[b-r2yme2rwuj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    /*margin-top: 20px;*/
    padding: 8px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    font-size: 10px;
    font-family: var(--hp-mono);
    /*line-height: 1.2;*/
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hp-boost-feedback.link span[b-r2yme2rwuj] {
    flex: 1;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-boost-feedback.link i[b-r2yme2rwuj] {
    font-size: 11px;
    opacity: 0.45;
    flex-shrink: 0;
}

.hp-boost-feedback.link:active[b-r2yme2rwuj] {
    background: #E4E2DE;
}

.hp-boost-pulse[b-r2yme2rwuj] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: hp-pulse-b-r2yme2rwuj 1.2s ease-in-out infinite;
}

/* ── Energy ──────────────────────────────────────── */
.hp-energy-grid[b-r2yme2rwuj] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
}

.hp-energy-cell[b-r2yme2rwuj] {
    text-align: center;
    padding: 0 3px;
    min-width: 0;
}

.hp-energy-cell + .hp-energy-cell[b-r2yme2rwuj] {
    border-left: 1px solid var(--border);
}

.hp-energy-icon[b-r2yme2rwuj] {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 3px;
    opacity: 0.9;
}

.hp-energy-icon.sun[b-r2yme2rwuj] { color: #FBBF24; }
.hp-energy-icon.bat[b-r2yme2rwuj] { color: #4ADE80; }
.hp-energy-icon.load[b-r2yme2rwuj] { color: #A5B4FC; }
.hp-energy-icon.grid[b-r2yme2rwuj] { color: #CBD5E1; } /* rete: più chiara in dark */

html[data-theme="light"] .hp-energy-icon.sun[b-r2yme2rwuj] { color: #D97706; }
html[data-theme="light"] .hp-energy-icon.bat[b-r2yme2rwuj] { color: #15803D; }
html[data-theme="light"] .hp-energy-icon.load[b-r2yme2rwuj] { color: #6366F1; }
html[data-theme="light"] .hp-energy-icon.grid[b-r2yme2rwuj] { color: #64748B; }

.hp-energy-label[b-r2yme2rwuj] {
    font-size: 9px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}

.hp-energy-value[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
}

.hp-energy-value span[b-r2yme2rwuj] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
    margin-left: 1px;
}

.hp-energy-value.prod-on[b-r2yme2rwuj] { color: #B45309; }
.hp-energy-value.prod-off[b-r2yme2rwuj] { color: var(--text3); }
.hp-energy-value.load[b-r2yme2rwuj] { color: #4F46E5; }
/* Rete: prelievo (negativo HA) vs immessa (positivo HA) */
.hp-energy-value.grid-in[b-r2yme2rwuj] { color: #B91C1C; }
.hp-energy-value.grid-out[b-r2yme2rwuj] { color: var(--hp-ok); }
.hp-energy-value.grid-zero[b-r2yme2rwuj] { color: var(--text3); }

.hp-bat-bar[b-r2yme2rwuj] {
    margin: 6px auto 0;
    width: 72%;
    max-width: 56px;
    height: 5px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
}

.hp-bat-bar > i[b-r2yme2rwuj] {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease, background 0.3s ease;
}

.hp-bat-bar > i.b-hi[b-r2yme2rwuj] { background: #22C55E; }
.hp-bat-bar > i.b-mid[b-r2yme2rwuj] { background: #F59E0B; }
.hp-bat-bar > i.b-lo[b-r2yme2rwuj] { background: #EF4444; }

.hp-energy-hint[b-r2yme2rwuj] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(232, 163, 23, 0.08) 100%);
    border: 1px solid rgba(34, 197, 94, 0.22);
    font-size: 10px;
    line-height: 1.35;
    color: #166534;
}

.hp-energy-hint i[b-r2yme2rwuj] {
    font-size: 12px;
    margin-top: 1px;
    flex-shrink: 0;
    color: #15803D;
}

/* Legacy perf-row (unused after layout mockup) — kept for chip styles */

.hp-chip[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icona + valore + um (niente label “Compressore”) */
.hp-comp-meta[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--hp-mono);
    font-size: 12px;
    color: var(--text2);
    white-space: nowrap;
}

.hp-comp-meta i[b-r2yme2rwuj] {
    font-size: 13px;
    color: #6366F1;
    opacity: 0.9;
}

.hp-comp-meta strong[b-r2yme2rwuj] {
    font-weight: 700;
    color: var(--text);
}

.hp-comp-meta .unit[b-r2yme2rwuj] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text2);
    margin-left: 1px;
}

.hp-comp-meta.idle[b-r2yme2rwuj] {
    color: var(--text3);
}

.hp-comp-meta.idle i[b-r2yme2rwuj] {
    color: var(--text3);
}

.hp-comp-meta.idle strong[b-r2yme2rwuj] {
    font-weight: 600;
    color: var(--text3);
}

/* Valvola 3 vie — discreta, accanto a Hz / chip attività */
.hp-valve-meta[b-r2yme2rwuj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--text3);
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border2);
}

.hp-valve-meta i[b-r2yme2rwuj] {
    font-size: 11px;
    opacity: 0.85;
}

.hp-valve-meta.tank[b-r2yme2rwuj] {
    color: #FDBA74;
    background: rgba(194, 65, 12, 0.18);
    border-color: rgba(253, 186, 116, 0.3);
}

.hp-valve-meta.room[b-r2yme2rwuj] {
    color: var(--hp-dhw-deep);
    background: var(--hp-dhw-bg);
    border-color: color-mix(in srgb, var(--hp-dhw) 20%, transparent);
}

.hp-valve-meta.unknown[b-r2yme2rwuj] {
    color: var(--text3);
}

.hp-chip.heat[b-r2yme2rwuj] {
    background: var(--heat-bg);
    color: var(--heat);
}

.hp-chip.cool[b-r2yme2rwuj] {
    background: var(--cool-bg);
    color: var(--cool);
}

/* ACS: caldo (ambra/corallo) — distinto dal teal della card e dall’heat di impianto */
.hp-chip.dhw[b-r2yme2rwuj] {
    color: #FDBA74;
    background: rgba(194, 65, 12, 0.18);
    border: 1px solid rgba(253, 186, 116, 0.3);
}

html[data-theme="light"] .hp-valve-meta.tank[b-r2yme2rwuj],
html[data-theme="light"] .hp-chip.dhw[b-r2yme2rwuj] {
    color: #C2410C;
    background: color-mix(in srgb, #C2410C 12%, var(--surface));
    border-color: rgba(194, 65, 12, 0.22);
}

.hp-chip.idle[b-r2yme2rwuj] {
    background: var(--surface2);
    color: var(--text3);
    border: 1px solid var(--border2);
    font-weight: 600;
}

.hp-perf-value[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    line-height: 1.15;
    margin-top: 2px;
}

.hp-perf-value .unit[b-r2yme2rwuj] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text2);
    margin-left: 1px;
}

.hp-perf-value.cop[b-r2yme2rwuj] {
    color: var(--hp-ok);
}

.hp-perf-value.energy[b-r2yme2rwuj] {
    color: #4F46E5;
}

/* ── Temperatures (stile mockup: 3 mini-card, centrate in verticale) ── */
.hp-card.hp-temps[b-r2yme2rwuj] {
    justify-content: center;
}

.hp-temps-grid[b-r2yme2rwuj] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    flex: 1;
    align-content: center; /* allinea il blocco 3 mini-card al centro verticale della card */
    width: 100%;
}

.hp-temp-cell[b-r2yme2rwuj] {
    text-align: center;
    padding: 12px 8px;
    min-width: 0;
    min-height: 72px;
    border-radius: 12px;
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hp-temp-cell + .hp-temp-cell[b-r2yme2rwuj] {
    border-left: none; /* non più divisori: ogni cella è una mini-card */
}

.hp-temp-cell.outdoor .hp-temp-value[b-r2yme2rwuj] {
    color: #CBD5E1;
}

.hp-temp-cell:nth-child(2) .hp-temp-value[b-r2yme2rwuj] {
    color: #60A5FA; /* ingresso */
}

.hp-temp-cell:nth-child(3) .hp-temp-value[b-r2yme2rwuj] {
    color: #F97316; /* uscita */
}

html[data-theme="light"] .hp-temp-cell.outdoor .hp-temp-value[b-r2yme2rwuj] { color: #64748B; }
html[data-theme="light"] .hp-temp-cell:nth-child(2) .hp-temp-value[b-r2yme2rwuj] { color: #2563EB; }
html[data-theme="light"] .hp-temp-cell:nth-child(3) .hp-temp-value[b-r2yme2rwuj] { color: #EA580C; }

.hp-temp-label[b-r2yme2rwuj] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.hp-temp-value[b-r2yme2rwuj] {
    font-family: var(--hp-mono);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hp-temp-value span[b-r2yme2rwuj] {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text3);
    margin-left: 1px;
}

@media (min-width: 900px) {
    .hp-temp-cell[b-r2yme2rwuj] {
        min-height: 88px;
        padding: 14px 10px;
    }
    .hp-temp-value[b-r2yme2rwuj] {
        font-size: 1.5rem;
    }
}

/* ── Error ───────────────────────────────────────── */
.hp-error-banner[b-r2yme2rwuj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--hp-error-bg);
    border: 1px solid rgba(185, 28, 28, 0.25);
    border-radius: 10px;
    color: var(--hp-error);
    font-size: 12px;
    line-height: 1.3;
    flex-shrink: 0;
}

.hp-error-banner i[b-r2yme2rwuj] {
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.hp-error-banner strong[b-r2yme2rwuj] {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

@media (max-height: 720px) {
    .hp-section[b-r2yme2rwuj] {
        margin-top: 8px;
    }

    .hp-card[b-r2yme2rwuj] {
        padding: 10px;
    }

    .hp-card.hp-dhw[b-r2yme2rwuj] {
        padding: 12px;
    }

    .hp-sp-btn[b-r2yme2rwuj] {
        width: 40px;
        height: 40px;
    }

    .hp-sp-value[b-r2yme2rwuj] {
        font-size: 22px;
        padding: 6px 12px;
    }
}
/* /Components/Pages/HomeDashboard.razor.rz.scp.css */
/* Home dashboard (mockup v3) — accents default dark (match app.css :root) */

.hd-page[b-xt0808l8tk] {
    --hd-pv: #FBBF24;
    --hd-pv-soft: rgba(251, 191, 36, 0.14);
    --hd-pv-ink: #FDE68A;
    --hd-hp: #E8956A;
    --hd-hp-soft: rgba(232, 149, 106, 0.14);
    --hd-hp-ink: #FED7AA;
    --hd-clima: #60A5FA;
    --hd-clima-soft: rgba(96, 165, 250, 0.14);
    --hd-clima-ink: #BFDBFE;
    /* Cancelli: cyan (diverso da mower verde / tapparelle indaco) */
    --hd-gate: #22D3EE;
    --hd-gate-soft: rgba(34, 211, 238, 0.14);
    --hd-gate-ink: #A5F3FC;
    --hd-ok: #4ADE80;
    --hd-danger: #F87171;
    --hd-radius: 18px;
    --hd-radius-sm: 12px;
    --hd-shadow: var(--shadow);
    --hd-shadow-sm: var(--shadow-sm);

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 14px 40px;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    color: var(--text);
}

html[data-theme="light"] .hd-page[b-xt0808l8tk] {
    --hd-pv: #E8A317;
    --hd-pv-soft: #FEF3C7;
    --hd-pv-ink: #92400E;
    --hd-hp: #D4693B;
    --hd-hp-soft: #FFEDD5;
    --hd-hp-ink: #9A3412;
    --hd-clima: #2563EB;
    --hd-clima-soft: #DBEAFE;
    --hd-clima-ink: #1E40AF;
    --hd-gate: #0891B2;
    --hd-gate-soft: #CFFAFE;
    --hd-gate-ink: #155E75;
    --hd-ok: #15803D;
    --hd-danger: #DC2626;
}

@media (max-width: 600px) {
    .app.hd-page[b-xt0808l8tk] {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
    .hd-page[b-xt0808l8tk] { padding: 10px 10px 32px; }
}

/* Desktop: content-sized height — no inner scrollbar when the dashboard fits the window.
   Mobile keeps .app { height: 100svh } + overflow-y: auto (shell scroll). */
@media (min-width: 721px) {
    .app.hd-page[b-xt0808l8tk] {
        height: auto;
        min-height: 100svh;
        min-height: 100dvh;
        overflow-y: visible;
    }
}

.hd-page *[b-xt0808l8tk],
.hd-page *[b-xt0808l8tk]::before,
.hd-page *[b-xt0808l8tk]::after { box-sizing: border-box; }

/* Header — una riga: titolo · welcome · stato */
.hd-top[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
    padding-top: 2px;
    min-width: 0;
}

.hd-fs-hint[b-xt0808l8tk] {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: -8px 0 14px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, #60A5FA 32%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, #60A5FA 12%, var(--surface));
    color: var(--text2);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

html.clima-fs-hint .hd-fs-hint[b-xt0808l8tk] {
    display: flex;
}

.hd-fs-hint i[b-xt0808l8tk] {
    color: #93C5FD;
    font-size: 1rem;
}

html[data-theme="light"] .hd-fs-hint[b-xt0808l8tk] {
    background: #EFF6FF;
    border-color: #BFDBFE;
}

html[data-theme="light"] .hd-fs-hint i[b-xt0808l8tk] {
    color: #2563EB;
}

.hd-top h1[b-xt0808l8tk] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    flex-shrink: 0;
}

.hd-meta[b-xt0808l8tk] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.88rem;
    color: var(--text3);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 8px;
    overflow: hidden;
    white-space: nowrap;
}

.hd-dot[b-xt0808l8tk] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text3);
    display: inline-block;
}

.hd-dot.on[b-xt0808l8tk] {
    background: var(--hd-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-ok) 25%, transparent);
}

.hd-welcome[b-xt0808l8tk] {
    color: var(--text2);
    font-weight: 600;
}

.hd-admin-pill[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    color: #93C5FD;
    background: color-mix(in srgb, #60A5FA 14%, transparent);
    border: 1px solid color-mix(in srgb, #60A5FA 28%, var(--border));
    user-select: none;
}

html[data-theme="light"] .hd-admin-pill[b-xt0808l8tk] {
    color: #1D4ED8;
    background: #EFF6FF;
    border-color: #BFDBFE;
}

.hd-top-actions[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Batteria device: solo fullscreen (la status bar di sistema non c'è) */
.hd-batt[b-xt0808l8tk] {
    display: none;
    align-items: center;
    gap: 4px;
    color: var(--text3);
    font-size: 0.72rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    user-select: none;
}

html.clima-fs .hd-batt.is-ready[b-xt0808l8tk] {
    display: inline-flex;
}

.hd-batt i[b-xt0808l8tk] {
    font-size: 1.05rem;
    line-height: 1;
}

.hd-batt.is-charging[b-xt0808l8tk] {
    color: var(--hd-ok);
}

.hd-batt.is-low[b-xt0808l8tk] {
    color: var(--hd-danger);
}

.hd-online[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hd-ok);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    user-select: none;
}

.hd-online .hd-dot[b-xt0808l8tk] {
    width: 8px;
    height: 8px;
}

.hd-online-lbl[b-xt0808l8tk] {
    color: var(--text3);
    font-weight: 600;
}

.hd-link-status[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    user-select: none;
    white-space: nowrap;
}

.hd-link-status.wait[b-xt0808l8tk] {
    color: #FBBF24;
    background: color-mix(in srgb, #FBBF24 12%, var(--surface));
    border: 1px solid color-mix(in srgb, #FBBF24 38%, var(--border));
}

.hd-link-status.wait .hd-dot[b-xt0808l8tk] {
    width: 7px;
    height: 7px;
    background: #FBBF24;
}

.hd-link-status.err[b-xt0808l8tk] {
    color: #FECACA;
    background: color-mix(in srgb, #F87171 20%, var(--surface));
    border: 1px solid color-mix(in srgb, #F87171 50%, var(--border));
}

.hd-link-status.err i[b-xt0808l8tk] {
    font-size: 0.95rem;
}

html[data-theme="light"] .hd-link-status.wait[b-xt0808l8tk] {
    background: #FFFBEB;
    color: #B45309;
}

html[data-theme="light"] .hd-link-status.err[b-xt0808l8tk] {
    color: #991B1B;
    background: #FEE2E2;
    border-color: #FECACA;
}

@media (max-width: 720px) {
    .hd-top-actions[b-xt0808l8tk] {
        margin-right: 6px;
        padding-right: 4px;
    }

    .hd-online-lbl[b-xt0808l8tk] {
        display: none;
    }

    .hd-link-status[b-xt0808l8tk] {
        width: 28px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .hd-link-status i[b-xt0808l8tk],
    .hd-link-status .hd-dot[b-xt0808l8tk] {
        font-size: 0.95rem;
    }

    .hd-meta[b-xt0808l8tk] {
        flex-wrap: wrap;
        white-space: normal;
    }
}

.hd-section[b-xt0808l8tk] { margin-bottom: 18px; }

.hd-section-label[b-xt0808l8tk] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin: 0 0 8px 2px;
}

/* Hero cards */
.hd-hero[b-xt0808l8tk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hd-energy-more[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    color: inherit;
}
.hd-energy-more:hover[b-xt0808l8tk] { border-color: var(--border2); }
.hd-energy-more-ico[b-xt0808l8tk] {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center; flex-shrink: 0;
    background: rgba(52, 211, 153, 0.14); color: #34D399; font-size: 0.9rem;
}
.hd-energy-more strong[b-xt0808l8tk] { flex: 1; font-size: 0.88rem; font-weight: 750; }
.hd-energy-more > .bi-chevron-right[b-xt0808l8tk] { color: var(--text3); font-size: 1.05rem; }

@media (max-width: 720px) {
    .hd-energy-more[b-xt0808l8tk] { display: none; }
}

@media (max-width: 720px) {
    /* Stack verticale: più aria tra FV / PdC / Clima per separare le card */
    .hd-hero[b-xt0808l8tk] {
        grid-template-columns: 1fr;
        gap: 18px; /* era 12px */
    }

    /* Spazio tra sezione Energia e card Climatizzazione */
    .hd-section:has(.hd-hero)[b-xt0808l8tk] {
        margin-bottom: 24px; /* era 18px */
    }

    /*
      Accento sinistro solo in idle: a dispositivo attivo resta
      solo la striscia TOP (::before), così non si sommano i due bordi.
    */
    .hd-hero-card.is-idle[b-xt0808l8tk]::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        z-index: 2;
        pointer-events: none;
        border-radius: var(--hd-radius) 0 0 var(--hd-radius);
    }

    .hd-hero-card.pv.is-idle[b-xt0808l8tk]::after {
        background: var(--hd-pv);
    }

    .hd-hero-card.hp.is-idle[b-xt0808l8tk]::after,
    .hd-hero-card.hp.act-idle[b-xt0808l8tk]::after {
        background: color-mix(in srgb, #E8956A 50%, var(--text3));
        opacity: 0.85;
    }

    /* Clima ha già ::before a sinistra: solo un filo più leggibile */
    .hd-clima-card[b-xt0808l8tk]::before {
        width: 3px;
        opacity: 1;
        box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--hd-clima) 35%, transparent);
    }
}

.hd-hero-card[b-xt0808l8tk] {
    position: relative;
    border-radius: var(--hd-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--hd-shadow);
    padding: 16px;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.hd-hero-card:hover[b-xt0808l8tk] {
    border-color: var(--border2);
    box-shadow: var(--hd-shadow), 0 8px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

html[data-theme="light"] .hd-hero-card:hover[b-xt0808l8tk] {
    box-shadow: var(--hd-shadow), 0 8px 24px rgba(26, 26, 24, 0.1);
}

.hd-hero-card[b-xt0808l8tk]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    opacity: 0.95;
}

/* Top accent bar — only when not idle */
.hd-hero-card.pv:not(.is-idle)[b-xt0808l8tk]::before {
    background: linear-gradient(90deg, var(--hd-pv), #F59E0B 60%, transparent);
}

.hd-hero-card.hp:not(.is-idle).act-heat[b-xt0808l8tk]::before {
    background: linear-gradient(90deg, #E8956A, #FBBF24 70%, transparent);
}
.hd-hero-card.hp:not(.is-idle).act-cool[b-xt0808l8tk]::before {
    background: linear-gradient(90deg, #60A5FA, #38BDF8 70%, transparent);
}
/* ACS / DHW: rosso-rosa (non giallo FV) */
.hd-hero-card.hp:not(.is-idle).act-dhw[b-xt0808l8tk]::before {
    background: linear-gradient(90deg, #F43F5E, #FB7185 70%, transparent);
}

/* Idle: no gradient bar, no glow — just card border */
.hd-hero-card.is-idle[b-xt0808l8tk]::before {
    display: none;
}

.hd-glow[b-xt0808l8tk] {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(56px);
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
    top: -70px;
    right: -50px;
}

.hd-hero-card.pv .hd-glow[b-xt0808l8tk] { background: var(--hd-pv); }
.hd-hero-card.hp.act-heat .hd-glow[b-xt0808l8tk] { background: #E8956A; }
.hd-hero-card.hp.act-cool .hd-glow[b-xt0808l8tk] { background: #60A5FA; }
.hd-hero-card.hp.act-dhw .hd-glow[b-xt0808l8tk] { background: #F43F5E; }

.hd-hero-head[b-xt0808l8tk] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hd-hero-title[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.hd-hero-ico[b-xt0808l8tk] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.pv .hd-hero-ico[b-xt0808l8tk] { background: var(--hd-pv-soft); color: var(--hd-pv); }

/* HP icon follows activity (same palette as top accent bar) */
.hp.act-heat .hd-hero-ico[b-xt0808l8tk] {
    background: rgba(232, 149, 106, 0.18);
    color: #FED7AA;
}
.hp.act-cool .hd-hero-ico[b-xt0808l8tk] {
    background: rgba(96, 165, 250, 0.18);
    color: #BFDBFE;
}
.hp.act-dhw .hd-hero-ico[b-xt0808l8tk] {
    background: rgba(244, 63, 94, 0.18);
    color: #FDA4AF;
}
.hp.is-idle .hd-hero-ico[b-xt0808l8tk],
.hp.act-idle .hd-hero-ico[b-xt0808l8tk] {
    background: var(--surface2);
    color: var(--text2);
    border: 1px solid var(--border2);
}

html[data-theme="light"] .hp.act-heat .hd-hero-ico[b-xt0808l8tk] {
    background: #FFEDD5;
    color: #C2410C;
}
html[data-theme="light"] .hp.act-cool .hd-hero-ico[b-xt0808l8tk] {
    background: #DBEAFE;
    color: #1D4ED8;
}
html[data-theme="light"] .hp.act-dhw .hd-hero-ico[b-xt0808l8tk] {
    background: #FFE4E6;
    color: #BE123C;
}
html[data-theme="light"] .hp.is-idle .hd-hero-ico[b-xt0808l8tk],
html[data-theme="light"] .hp.act-idle .hd-hero-ico[b-xt0808l8tk] {
    background: var(--surface2);
    color: var(--text2);
}

.hd-hero-chip[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    max-width: 58%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
}

.hd-hero-chip i[b-xt0808l8tk] { font-size: 0.85em; opacity: 0.95; }

/* PV chip */
.hd-hero-chip.pv-on[b-xt0808l8tk] {
    background: var(--hd-pv-soft);
    color: var(--hd-pv-ink);
    border-color: color-mix(in srgb, var(--hd-pv) 28%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* HP activity chips — align with heat-pump page .hp-chip */
.hd-hero-chip.heat[b-xt0808l8tk] {
    background: rgba(232, 149, 106, 0.16);
    color: #FED7AA;
    border-color: rgba(232, 149, 106, 0.35);
}
.hd-hero-chip.cool[b-xt0808l8tk] {
    background: rgba(96, 165, 250, 0.16);
    color: #BFDBFE;
    border-color: rgba(96, 165, 250, 0.35);
}
.hd-hero-chip.dhw[b-xt0808l8tk] {
    background: rgba(244, 63, 94, 0.16);
    color: #FECDD3;
    border-color: rgba(244, 63, 94, 0.4);
}
.hd-hero-chip.idle[b-xt0808l8tk] {
    background: transparent;
    color: var(--text3);
    border-color: var(--border2);
    font-weight: 650;
    text-transform: none;
}

html[data-theme="light"] .hd-hero-chip.heat[b-xt0808l8tk] {
    background: #FFEDD5;
    color: #9A3412;
    border-color: #FDBA74;
}
html[data-theme="light"] .hd-hero-chip.cool[b-xt0808l8tk] {
    background: #DBEAFE;
    color: #1E40AF;
    border-color: #93C5FD;
}
html[data-theme="light"] .hd-hero-chip.dhw[b-xt0808l8tk] {
    background: #FFE4E6;
    color: #9F1239;
    border-color: #FECDD3;
}

.hd-hero-main[b-xt0808l8tk] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.hd-hero-value[b-xt0808l8tk] {
    font-size: clamp(2rem, 5vw, 2.55rem);
    font-weight: 750;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hd-hero-value small[b-xt0808l8tk] {
    font-size: 0.42em;
    font-weight: 600;
    color: var(--text2);
    margin-left: 4px;
}

.hd-hero-caption[b-xt0808l8tk] {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text2);
    font-weight: 500;
}

.hd-gauge[b-xt0808l8tk] {
    --p: 72;
    --c: var(--hd-pv);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--surface) 58%, transparent 59%),
        conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface2) 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px var(--border);
}

.hd-gauge span[b-xt0808l8tk] {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hd-gauge.hp-g[b-xt0808l8tk] { --c: var(--hd-hp); }
.hd-gauge.bat-g[b-xt0808l8tk] { --c: var(--hd-pv); }

/* % quality bands — ACS tank (hp-g) + battery SOC (bat-g) */
.hd-gauge.hp-g.fill-ok[b-xt0808l8tk],
.hd-gauge.bat-g.fill-ok[b-xt0808l8tk] { --c: #22C55E; }
.hd-gauge.hp-g.fill-good[b-xt0808l8tk],
.hd-gauge.bat-g.fill-good[b-xt0808l8tk] { --c: #4ADE80; }
.hd-gauge.hp-g.fill-fair[b-xt0808l8tk],
.hd-gauge.bat-g.fill-fair[b-xt0808l8tk] { --c: #FBBF24; }
.hd-gauge.hp-g.fill-mid[b-xt0808l8tk],
.hd-gauge.bat-g.fill-mid[b-xt0808l8tk] { --c: #F59E0B; }
.hd-gauge.hp-g.fill-low[b-xt0808l8tk],
.hd-gauge.bat-g.fill-low[b-xt0808l8tk] { --c: #F97316; }
.hd-gauge.hp-g.fill-empty[b-xt0808l8tk],
.hd-gauge.bat-g.fill-empty[b-xt0808l8tk] { --c: #EF4444; }

.hd-gauge.hp-g.fill-ok span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-ok span[b-xt0808l8tk] { color: #86EFAC; }
.hd-gauge.hp-g.fill-good span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-good span[b-xt0808l8tk] { color: #BBF7D0; }
.hd-gauge.hp-g.fill-fair span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-fair span[b-xt0808l8tk] { color: #FDE68A; }
.hd-gauge.hp-g.fill-mid span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-mid span[b-xt0808l8tk] { color: #FCD34D; }
.hd-gauge.hp-g.fill-low span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-low span[b-xt0808l8tk] { color: #FDBA74; }
.hd-gauge.hp-g.fill-empty span[b-xt0808l8tk],
.hd-gauge.bat-g.fill-empty span[b-xt0808l8tk] { color: #FCA5A5; }

html[data-theme="light"] .hd-gauge.hp-g.fill-ok span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-ok span[b-xt0808l8tk] { color: #15803D; }
html[data-theme="light"] .hd-gauge.hp-g.fill-good span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-good span[b-xt0808l8tk] { color: #16A34A; }
html[data-theme="light"] .hd-gauge.hp-g.fill-fair span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-fair span[b-xt0808l8tk] { color: #A16207; }
html[data-theme="light"] .hd-gauge.hp-g.fill-mid span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-mid span[b-xt0808l8tk] { color: #B45309; }
html[data-theme="light"] .hd-gauge.hp-g.fill-low span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-low span[b-xt0808l8tk] { color: #C2410C; }
html[data-theme="light"] .hd-gauge.hp-g.fill-empty span[b-xt0808l8tk],
html[data-theme="light"] .hd-gauge.bat-g.fill-empty span[b-xt0808l8tk] { color: #B91C1C; }

.hd-soc-linear[b-xt0808l8tk] {
    display: none;
    text-align: right;
    min-width: 110px;
    flex-shrink: 0;
}

.hd-soc-val[b-xt0808l8tk] {
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.hd-soc-val span[b-xt0808l8tk] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text3);
    display: block;
    margin-bottom: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hd-soc-bar[b-xt0808l8tk] {
    height: 8px;
    width: 110px;
    border-radius: 999px;
    background: var(--surface2);
    overflow: hidden;
    margin-left: auto;
    border: 1px solid var(--border);
}

.hd-soc-bar > i[b-xt0808l8tk] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--hd-pv), #F59E0B);
}

.hd-kpi-row[b-xt0808l8tk] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto;
}

/* PV desktop only: more room to batteria|rete (arrow + signed kW) */
@media (min-width: 721px) {
    .hd-hero-card.pv .hd-kpi-row[b-xt0808l8tk] {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.82fr) minmax(0, 1.45fr);
        gap: 7px;
    }
}

.hd-kpi[b-xt0808l8tk] {
    background: color-mix(in srgb, var(--surface2) 85%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--hd-radius-sm);
    padding: 10px 10px 9px;
    min-width: 0;
}

.hd-hero-card.pv .hd-kpi:not(.hd-kpi-split)[b-xt0808l8tk] {
    padding: 10px 8px 9px;
}

.hd-kpi .k[b-xt0808l8tk] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.hd-kpi .v[b-xt0808l8tk] {
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hd-kpi .v .u[b-xt0808l8tk] {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text2);
    margin-left: 2px;
}

.hd-kpi .s[b-xt0808l8tk] {
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--text3);
    font-weight: 500;
}

.hd-autarky[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 7px;
    font-size: 0.72rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    letter-spacing: -0.02em;
}
.hd-autarky i[b-xt0808l8tk] { font-size: 0.78rem; line-height: 1; }
.hd-autarky.ok[b-xt0808l8tk] { color: var(--hd-ok); }
.hd-autarky.mid[b-xt0808l8tk] { color: var(--hd-pv); }
.hd-autarky.off[b-xt0808l8tk] { color: var(--text3); opacity: 0.5; }

@media (max-width: 720px) {
    .hd-hero-card.pv .hd-kpi-home .v[b-xt0808l8tk] {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
        white-space: nowrap;
    }
}

.hd-kpi.export .v[b-xt0808l8tk] { color: var(--hd-ok); }
.hd-kpi.import .v[b-xt0808l8tk] { color: var(--hd-danger); }

/* Split KPI: batteria | rete side by side */
.hd-kpi-split[b-xt0808l8tk] {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 0;
    padding: 0;
    overflow: visible;
    min-width: 0;
}

.hd-kpi-half[b-xt0808l8tk] {
    padding: 8px 7px;
    min-width: 0;
    overflow: visible;
}

.hd-kpi-half + .hd-kpi-half[b-xt0808l8tk] {
    border-left: 1px solid var(--border);
}

.hd-kpi-half .v[b-xt0808l8tk] {
    font-size: 0.95rem;
    white-space: nowrap;
}

.hd-bat-flow[b-xt0808l8tk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
}

.hd-bat-flow i[b-xt0808l8tk] {
    font-size: 0.95rem;
    flex-shrink: 0;
    line-height: 1;
    width: 0.9em;
}

.hd-bat-flow > span[b-xt0808l8tk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-kpi-half.bat-charge .v[b-xt0808l8tk],
.hd-kpi-half.bat-charge .hd-bat-flow i[b-xt0808l8tk] {
    color: var(--hd-ok);
}

.hd-kpi-half.bat-discharge .v[b-xt0808l8tk],
.hd-kpi-half.bat-discharge .hd-bat-flow i[b-xt0808l8tk] {
    color: var(--hd-danger);
}

.hd-kpi-half.export .v[b-xt0808l8tk] { color: var(--hd-ok); }
.hd-kpi-half.import .v[b-xt0808l8tk] { color: var(--hd-danger); }

@media (max-width: 720px) {
    /* Linear SOC temporarily off — circular gauge on mobile too (like desktop)
    .hd-hero-card.pv .hd-gauge-ring { display: none; }
    .hd-hero-card.pv .hd-soc-linear { display: block; }
    */

    /* Vertical stack: oggi, casa, rete (no batteria kW on mobile) */
    .hd-hero-card .hd-kpi-row[b-xt0808l8tk] {
        grid-template-columns: 1fr !important;
        gap: 0;
        background: color-mix(in srgb, var(--bg) 40%, transparent);
        border: 1px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
    }

    .hd-hero-card .hd-kpi[b-xt0808l8tk] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 1px 12px;
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        padding: 10px 12px;
    }

    .hd-hero-card .hd-kpi:last-child[b-xt0808l8tk] { border-bottom: none; }
    .hd-hero-card .hd-kpi .k[b-xt0808l8tk] { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
    .hd-hero-card .hd-kpi .s[b-xt0808l8tk] { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
    .hd-hero-card .hd-kpi .v[b-xt0808l8tk] { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.05rem; }

    /* Promote half-cells as full rows; hide battery charge/discharge on phone */
    .hd-hero-card .hd-kpi-split[b-xt0808l8tk] {
        display: contents;
        border: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .hd-hero-card.pv .hd-kpi-bat[b-xt0808l8tk] {
        display: none !important;
    }

    .hd-hero-card .hd-kpi-half[b-xt0808l8tk] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 1px 12px;
        align-items: center;
        padding: 10px 12px;
        border: none;
        border-bottom: 1px solid var(--border);
        background: transparent;
        min-width: 0;
    }

    .hd-hero-card .hd-kpi-half + .hd-kpi-half[b-xt0808l8tk] {
        border-left: none;
    }

    .hd-hero-card .hd-kpi-half:last-child[b-xt0808l8tk],
    .hd-hero-card.pv .hd-kpi-grid[b-xt0808l8tk] {
        border-bottom: none;
    }

    .hd-hero-card .hd-kpi-half .k[b-xt0808l8tk] { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
    .hd-hero-card .hd-kpi-half .s[b-xt0808l8tk] { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
    .hd-hero-card .hd-kpi-half .v[b-xt0808l8tk] {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        font-size: 1.05rem;
        white-space: nowrap;
    }
}

/* Clima — compact card */
.hd-clima-card[b-xt0808l8tk] {
    border-radius: var(--hd-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--hd-shadow-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.hd-clima-card:hover[b-xt0808l8tk] {
    border-color: var(--border2);
    box-shadow: var(--hd-shadow-sm), 0 6px 20px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

html[data-theme="light"] .hd-clima-card:hover[b-xt0808l8tk] {
    box-shadow: var(--hd-shadow-sm), 0 6px 18px rgba(26, 26, 24, 0.08);
}

.hd-clima-card[b-xt0808l8tk]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--hd-clima);
}

.hd-clima-top[b-xt0808l8tk] {
    display: flex;
    align-items: flex-start;
    gap: 10px 12px;
    min-width: 0;
    padding-left: 4px;
}

.hd-clima-head[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 0 0 auto;
}

.hd-clima-ico[b-xt0808l8tk] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--hd-clima-soft);
    color: var(--hd-clima);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.hd-clima-head h2[b-xt0808l8tk] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
}

/* Blocco medie: Media casa + piani */
.hd-clima-metrics[b-xt0808l8tk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.hd-floor-stats-floors[b-xt0808l8tk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hd-device-pills[b-xt0808l8tk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.hd-clima-top .hd-chev[b-xt0808l8tk] {
    flex-shrink: 0;
    color: var(--text3);
    font-size: 1.15rem;
}

.hd-floor-stat[b-xt0808l8tk] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 0.74rem;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--hd-clima-soft);
    border: 1px solid color-mix(in srgb, var(--hd-clima) 20%, transparent);
    min-width: 0;
}

/* Media casa: tono leggermente diverso (più “ink” / bordo più marcato) */
.hd-floor-stat.hd-house-stat[b-xt0808l8tk] {
    background: color-mix(in srgb, var(--hd-clima) 28%, var(--surface2));
    border-color: color-mix(in srgb, var(--hd-clima) 42%, transparent);
}
.hd-floor-stat.hd-house-stat .fn[b-xt0808l8tk] {
    max-width: none;
    color: var(--hd-clima-ink);
    font-weight: 700;
}
.hd-floor-stat.hd-house-stat .fv[b-xt0808l8tk] {
    color: var(--text);
}

.hd-floor-stat .fn[b-xt0808l8tk] {
    font-weight: 650;
    color: var(--text2);
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd-floor-stat .fv[b-xt0808l8tk] {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--hd-clima-ink);
}

.hd-floor-stat .fh[b-xt0808l8tk] {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text2);
}

.hd-pill[b-xt0808l8tk] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hd-clima) 18%, var(--surface2));
    color: var(--hd-clima-ink);
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--hd-clima) 25%, transparent);
}

.hd-pill.off[b-xt0808l8tk] {
    background: var(--surface2);
    color: var(--text3);
    border-color: var(--border);
}

.hd-chev[b-xt0808l8tk] {
    color: var(--text3);
    font-size: 1.2rem;
}

/* Tablet (né telefono né desktop largo):
   [ico Clima casa] [Media casa] [piano1] [piano2] .... [pavimento] [fancoil]
   Tre medie su una riga → card più bassa, stesso contenuto. */
@media (min-width: 721px) and (max-width: 1439px) {
    .hd-clima-top[b-xt0808l8tk] {
        align-items: center;
    }

    .hd-clima-metrics[b-xt0808l8tk] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }

    .hd-floor-stats-floors[b-xt0808l8tk] {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .hd-floor-stat .fn[b-xt0808l8tk] {
        max-width: 6.5rem;
    }
}

/* Desktop largo:
   [ico Clima casa] [Media casa] .............. [pavimento] [fancoil]
                    [piano1] [piano2]   ← sotto Media casa, con gap */
@media (min-width: 1440px) {
    .hd-clima-card[b-xt0808l8tk] {
        gap: 8px;
    }

    .hd-clima-top[b-xt0808l8tk] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 0;
        align-items: start;
    }

    .hd-clima-head[b-xt0808l8tk] {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    /* Device pills: alto a destra, fisse */
    .hd-device-pills[b-xt0808l8tk] {
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
        align-self: center;
        justify-self: end;
    }

    /* Metrics: Media casa + piani in colonna, a destra del titolo */
    .hd-clima-metrics[b-xt0808l8tk] {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        align-self: start;
        gap: 8px; /* respiro tra Media casa e pill piano */
        min-width: 0;
    }

    .hd-floor-stats-floors[b-xt0808l8tk] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hd-floor-stat .fn[b-xt0808l8tk] {
        max-width: 7rem;
    }
}

/* Mobile (compatto):
   [ico Clima casa] .............. [pavimento] [fancoil]
        Media casa   ← sotto il titolo; medie piano nascoste (c’è /climate) */
@media (max-width: 720px) {
    .hd-clima-card[b-xt0808l8tk] {
        gap: 5px;
        padding: 8px 10px 8px 12px;
    }

    .hd-clima-top[b-xt0808l8tk] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 6px;
        padding-left: 2px;
        align-items: center;
    }

    .hd-clima-head[b-xt0808l8tk] {
        grid-column: 1;
        grid-row: 1;
        gap: 8px;
        min-width: 0;
    }

    .hd-clima-ico[b-xt0808l8tk] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        border-radius: 9px;
    }

    .hd-clima-head h2[b-xt0808l8tk] {
        font-size: 0.86rem;
    }

    /* Solo Media casa, allineata sotto la label (past icon) */
    .hd-clima-metrics[b-xt0808l8tk] {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 40px; /* allineata al testo "Clima casa" */
        gap: 0;
        min-width: 0;
    }

    .hd-floor-stats-floors[b-xt0808l8tk] {
        display: none;
    }

    .hd-clima-top .hd-device-pills[b-xt0808l8tk] {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
        align-self: center;
        gap: 4px;
        justify-content: flex-end;
    }

    .hd-clima-top .hd-chev[b-xt0808l8tk] {
        display: none;
    }

    .hd-floor-stat[b-xt0808l8tk] {
        font-size: 0.66rem;
        padding: 3px 8px;
        gap: 3px;
    }

    .hd-floor-stat .fn[b-xt0808l8tk] {
        max-width: 3.6rem;
    }

    .hd-floor-stat.hd-house-stat .fn[b-xt0808l8tk] {
        max-width: none;
    }

    .hd-pill[b-xt0808l8tk] {
        font-size: 0.64rem;
        padding: 3px 7px;
    }
}

/* Contesti — griglia 3 colonne (desktop)
   Riga1: Cancelli · Tapparelle · Luci
   Riga2: Porte · Mower · [Stats + Settings impilati] */
.hd-ctx-panel[b-xt0808l8tk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-items: stretch;
}

.hd-ctx-item[b-xt0808l8tk] {
    border-radius: var(--hd-radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--hd-shadow-sm);
    padding: 12px 12px 10px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.15s ease, background 0.2s ease;
}

.hd-ctx-item:not(.soon):hover[b-xt0808l8tk] {
    border-color: var(--border2);
    box-shadow: var(--hd-shadow-sm), 0 6px 20px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

html[data-theme="light"] .hd-ctx-item:not(.soon):hover[b-xt0808l8tk] {
    box-shadow: var(--hd-shadow-sm), 0 6px 18px rgba(26, 26, 24, 0.08);
}

/* Stessa cella griglia: due card metà larghezza affiancate */
.hd-ctx-stack[b-xt0808l8tk] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    min-height: 96px;
    min-width: 0;
}

.hd-ctx-stack .hd-ctx-item.compact[b-xt0808l8tk] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding: 12px 10px 10px;
    gap: 8px;
}

.hd-ctx-stack .hd-ctx-item.compact .hd-ctx-ico[b-xt0808l8tk] {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
    border-radius: 10px;
}

.hd-ctx-stack .hd-ctx-item.compact h3[b-xt0808l8tk] {
    font-size: 0.82rem;
    line-height: 1.2;
}

.hd-ctx-stack .hd-ctx-item.compact .hd-st[b-xt0808l8tk] {
    font-size: 0.7rem;
}

.hd-ctx-item.soon[b-xt0808l8tk] {
    opacity: 0.88;
    cursor: default;
}

.hd-soon-tag[b-xt0808l8tk] {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 999px;
}

.hd-ctx-ico[b-xt0808l8tk] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.hd-ctx-item.gates .hd-ctx-ico[b-xt0808l8tk] { background: var(--hd-gate-soft); color: var(--hd-gate); }
.hd-ctx-item.settings .hd-ctx-ico[b-xt0808l8tk] { background: var(--surface2); color: var(--text2); }

.hd-ctx-item.lights .hd-ctx-ico[b-xt0808l8tk] { background: rgba(217, 119, 6, 0.15); color: #FBBF24; }
.hd-ctx-item.shutters .hd-ctx-ico[b-xt0808l8tk] { background: rgba(99, 102, 241, 0.15); color: #A5B4FC; }
.hd-ctx-item.mower .hd-ctx-ico[b-xt0808l8tk] { background: rgba(22, 163, 74, 0.15); color: #4ADE80; }
/* Porte e serrature — rosa (lontano dall'ambra delle luci) */
.hd-ctx-item.doors .hd-ctx-ico[b-xt0808l8tk] { background: rgba(244, 114, 182, 0.16); color: #F9A8D4; }
/* Statistiche — violetto (diverso da tapparelle indaco) */
.hd-ctx-item.stats .hd-ctx-ico[b-xt0808l8tk] { background: rgba(192, 132, 252, 0.16); color: #C084FC; }

html[data-theme="light"] .hd-ctx-item.lights .hd-ctx-ico[b-xt0808l8tk] { background: #FEF3C7; color: #D97706; }
html[data-theme="light"] .hd-ctx-item.shutters .hd-ctx-ico[b-xt0808l8tk] { background: #E0E7FF; color: #4F46E5; }
html[data-theme="light"] .hd-ctx-item.mower .hd-ctx-ico[b-xt0808l8tk] { background: #DCFCE7; color: #16A34A; }
html[data-theme="light"] .hd-ctx-item.doors .hd-ctx-ico[b-xt0808l8tk] { background: #FCE7F3; color: #BE185D; }
html[data-theme="light"] .hd-ctx-item.stats .hd-ctx-ico[b-xt0808l8tk] { background: #F3E8FF; color: #9333EA; }

.hd-ctx-item h3[b-xt0808l8tk] {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hd-st[b-xt0808l8tk] {
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--text2);
    font-weight: 600;
    line-height: 1.3;
}

.hd-st em[b-xt0808l8tk] {
    font-style: normal;
    color: var(--text3);
    font-weight: 500;
}

.hd-ctx-item.gates .hd-st strong[b-xt0808l8tk] { color: var(--hd-gate-ink); }

.hd-gate-icons[b-xt0808l8tk] {
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    transform: translateY(-50%);
    pointer-events: none;
}

.hd-ctx-item.gates.has-gate-icons .hd-st[b-xt0808l8tk] {
    visibility: hidden;
}

.hd-gate-chip[b-xt0808l8tk] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Pill nome accanto all'icona — rimuovere se non convince */
.hd-gate-name[b-xt0808l8tk] {
    max-width: 7.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, currentColor 28%, var(--border));
    background: color-mix(in srgb, currentColor 14%, var(--surface));
}

.hd-gate-ico[b-xt0808l8tk] {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--gt-icon) center / contain no-repeat;
    mask: var(--gt-icon) center / contain no-repeat;
}

.hd-gate-chip.open[b-xt0808l8tk] {
    color: var(--gt-pulse);
}

.hd-gate-chip.moving[b-xt0808l8tk] {
    color: var(--gt-move);
}
.hd-ctx-item.doors .hd-st strong[b-xt0808l8tk] { color: #F9A8D4; }
html[data-theme="light"] .hd-ctx-item.doors .hd-st strong[b-xt0808l8tk] { color: #BE185D; }

/* Pill stato (lock / mower) */
.hd-ctx-pill[b-xt0808l8tk] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    line-height: 1.1;
    pointer-events: none;
}
/* Mower “in taglio”: alto a destra (come le altre pill) */
.hd-ctx-pill.mowing[b-xt0808l8tk] {
    color: #86EFAC;
    background: rgba(74, 222, 128, 0.16);
    border: 1px solid color-mix(in srgb, #4ADE80 40%, transparent);
}
html[data-theme="light"] .hd-ctx-pill.mowing[b-xt0808l8tk] {
    color: #15803D;
    background: #DCFCE7;
    border-color: #86EFAC;
}
/* Mower “in ricarica” */
.hd-ctx-pill.charging[b-xt0808l8tk] {
    color: #7DD3FC;
    background: rgba(56, 189, 248, 0.16);
    border: 1px solid color-mix(in srgb, #38BDF8 40%, transparent);
}
html[data-theme="light"] .hd-ctx-pill.charging[b-xt0808l8tk] {
    color: #0369A1;
    background: #E0F2FE;
    border-color: #7DD3FC;
}
/* Mower errore: alto a destra, rosso (priorità su tutte le pill) */
.hd-ctx-pill.error[b-xt0808l8tk] {
    color: #FCA5A5;
    background: rgba(248, 113, 113, 0.18);
    border: 1px solid color-mix(in srgb, #F87171 45%, transparent);
}
html[data-theme="light"] .hd-ctx-pill.error[b-xt0808l8tk] {
    color: #B91C1C;
    background: #FEE2E2;
    border-color: #FECACA;
}
.hd-ctx-pill.unlock[b-xt0808l8tk] {
    color: #FCA5A5;
    background: rgba(240, 96, 72, 0.16);
    border: 1px solid color-mix(in srgb, #F06048 40%, transparent);
}
html[data-theme="light"] .hd-ctx-pill.unlock[b-xt0808l8tk] {
    color: #B91C1C;
    background: #FEE2E2;
    border-color: #FECACA;
}

/* Mower in errore: card in evidenza rossa */
.hd-ctx-item.mower.is-error[b-xt0808l8tk] {
    background: linear-gradient(145deg, color-mix(in srgb, #F87171 16%, var(--surface)), var(--surface) 70%);
    border-color: color-mix(in srgb, #F87171 42%, var(--border));
    box-shadow: var(--hd-shadow-sm), 0 0 0 1px color-mix(in srgb, #F87171 10%, transparent) inset;
}
.hd-ctx-item.mower.is-error .hd-ctx-ico[b-xt0808l8tk] {
    background: rgba(248, 113, 113, 0.18);
    color: #FCA5A5;
}
.hd-ctx-item.mower.is-error .hd-st strong[b-xt0808l8tk] { color: #FCA5A5; }
html[data-theme="light"] .hd-ctx-item.mower.is-error[b-xt0808l8tk] {
    background: linear-gradient(145deg, #FEE2E2, var(--surface) 75%);
    border-color: #FECACA;
}
html[data-theme="light"] .hd-ctx-item.mower.is-error .hd-ctx-ico[b-xt0808l8tk] {
    background: #FEE2E2;
    color: #DC2626;
}
html[data-theme="light"] .hd-ctx-item.mower.is-error .hd-st strong[b-xt0808l8tk] { color: #B91C1C; }

.hd-aside[b-xt0808l8tk] { display: none; }

@media (max-width: 640px) {
    .hd-ctx-item.gates.has-gate-icons[b-xt0808l8tk] {
        grid-template-columns: 40px 1fr auto auto;
    }

    .hd-ctx-item.gates.has-gate-icons .hd-st[b-xt0808l8tk] {
        visibility: visible;
    }

    .hd-ctx-item.gates.has-gate-icons .hd-gate-icons[b-xt0808l8tk] {
        position: static;
        transform: none;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
    }

    .hd-ctx-item.gates.has-gate-icons .hd-aside[b-xt0808l8tk] {
        grid-column: 4;
    }

    .hd-gate-name[b-xt0808l8tk] {
        display: none;
    }

    .hd-gate-ico[b-xt0808l8tk] {
        width: 22px;
        height: 22px;
    }

    .hd-ctx-panel[b-xt0808l8tk] {
        grid-template-columns: 1fr;
        gap: 0;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--hd-shadow-sm);
        overflow: hidden;
    }

    /* Stack → due righe lista normali */
    .hd-ctx-stack[b-xt0808l8tk] {
        display: contents;
        min-height: 0;
    }

    .hd-ctx-item[b-xt0808l8tk] {
        min-height: 0;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: none;
        padding: 12px 14px;
        display: grid;
        grid-template-columns: 40px 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        opacity: 1;
    }

    .hd-ctx-item.compact[b-xt0808l8tk] {
        padding: 12px 14px;
        gap: 2px;
    }

    .hd-ctx-stack .hd-ctx-item.compact .hd-ctx-ico[b-xt0808l8tk] {
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
        border-radius: 11px;
    }

    .hd-ctx-stack .hd-ctx-item.compact h3[b-xt0808l8tk] {
        font-size: 0.9rem;
    }

    .hd-ctx-stack .hd-ctx-item.compact .hd-st[b-xt0808l8tk] {
        font-size: 0.75rem;
    }

    .hd-ctx-panel > .hd-ctx-item:last-of-type[b-xt0808l8tk],
    .hd-ctx-stack .hd-ctx-item.settings[b-xt0808l8tk] { border-bottom: none; }

    .hd-ctx-item.soon[b-xt0808l8tk] { opacity: 0.85; }
    .hd-soon-tag[b-xt0808l8tk] { display: none; }

    /* Pill a destra al posto del chevron */
    .hd-ctx-pill[b-xt0808l8tk] {
        position: static;
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
    }
    .hd-ctx-item.doors:has(.hd-ctx-pill) .hd-aside[b-xt0808l8tk],
    .hd-ctx-item.mower:has(.hd-ctx-pill) .hd-aside[b-xt0808l8tk] {
        display: none;
    }

    .hd-ctx-item:not(.soon):hover[b-xt0808l8tk] {
        transform: none;
        box-shadow: none;
    }

    .hd-hero-card:hover[b-xt0808l8tk],
    .hd-clima-card:hover[b-xt0808l8tk] {
        transform: none;
    }

    .hd-ctx-ico[b-xt0808l8tk] {
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
        border-radius: 11px;
    }

    .hd-ctx-item h3[b-xt0808l8tk] {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.9rem;
        align-self: end;
    }

    .hd-st[b-xt0808l8tk] {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 0.75rem;
        align-self: start;
    }

    .hd-st br[b-xt0808l8tk] { display: none; }
    .hd-st em[b-xt0808l8tk]::before {
        content: " · ";
        color: var(--text3);
    }

    .hd-aside[b-xt0808l8tk] {
        display: block;
        grid-column: 3;
        grid-row: 1 / 3;
        font-size: 0.65rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text3);
        align-self: center;
    }

    .hd-ctx-item:not(.soon) .hd-aside[b-xt0808l8tk] {
        font-size: 1rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }
}

/* FAB torna-su: solo mobile, visibile a fondo pagina (classe su <html>) */
.hd-top-fab[b-xt0808l8tk] {
    display: none;
}

@media (max-width: 720px) {
    .hd-top-fab[b-xt0808l8tk] {
        display: grid;
        place-items: center;
        position: fixed;
        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        z-index: 40;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--border2);
        border-radius: 50%;
        background: var(--surface);
        color: var(--text);
        box-shadow: var(--hd-shadow);
        font-size: 1.2rem;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        transform: translateY(10px) scale(0.92);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    html.hd-at-bottom .hd-top-fab[b-xt0808l8tk] {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .hd-top-fab:active[b-xt0808l8tk] {
        transform: scale(0.94);
    }
}
/* /Components/Pages/HouseLoadsPage.razor.rz.scp.css */
/* Carichi casa — live + periodo (ex Energy flow) */
.el-page[b-lg3vazqd8q] {
    --el-solar: #FBBF24;
    --el-bat: #60A5FA;
    --el-home: #34D399;
    --el-import: #F87171;
    --el-export: #A78BFA;
    --el-chg: #818CF8;
    --el-ok: #4ADE80;
    --el-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 14px 64px;
    color: var(--text);
}

.el-top[b-lg3vazqd8q] {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; padding-top: 4px;
}
.el-back[b-lg3vazqd8q] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.45rem; flex-shrink: 0; cursor: pointer;
}
.el-brand[b-lg3vazqd8q] { min-width: 0; flex: 1; cursor: pointer; }
.el-brand h1[b-lg3vazqd8q] {
    margin: 0; font-size: 1.28rem; font-weight: 750;
    letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px;
}
.el-brand h1 i[b-lg3vazqd8q] { color: var(--el-home); font-size: 1.1rem; }
.el-meta[b-lg3vazqd8q] {
    margin-top: 3px; font-size: 0.8rem; color: var(--text3); font-weight: 500;
    display: flex; align-items: center; gap: 8px;
}
.el-dot[b-lg3vazqd8q] {
    width: 7px; height: 7px; border-radius: 50%; background: var(--el-ok);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.el-demo-btn[b-lg3vazqd8q] {
    font: inherit; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    color: var(--text3); background: var(--surface2);
    border: 1px solid var(--border);
}
.el-demo-btn.on[b-lg3vazqd8q] {
    color: #92400E; background: rgba(251, 191, 36, 0.22);
    border-color: rgba(251, 191, 36, 0.45);
}
.el-demo-pill[b-lg3vazqd8q] {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px;
    background: rgba(251, 191, 36, 0.2); color: #FBBF24;
}
.el-chip[b-lg3vazqd8q] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--el-ok);
    padding: 4px 9px; border-radius: 999px;
    background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.25);
}

.el-card[b-lg3vazqd8q] {
    border-radius: 20px; background: var(--surface);
    border: 1px solid var(--border); padding: 16px;
    margin-bottom: 16px;
}
.el-h2[b-lg3vazqd8q] {
    margin: 0; font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text3);
}
.el-head[b-lg3vazqd8q] {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.el-hint[b-lg3vazqd8q] { font-size: 0.72rem; color: var(--text3); font-weight: 550; }

/* Period (allineato a Statistiche) */
.el-period-box[b-lg3vazqd8q] {
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
}
.el-group-row[b-lg3vazqd8q] {
    display: flex; flex-wrap: nowrap; gap: 4px;
    overflow-x: auto; scrollbar-width: none;
    background: var(--surface2); border-radius: 999px; padding: 3px;
    border: 1px solid var(--border);
}
.el-group-row[b-lg3vazqd8q]::-webkit-scrollbar { display: none; }
.el-group-btn[b-lg3vazqd8q] {
    flex: 0 0 auto; border: none; background: transparent;
    font-size: 11px; font-weight: 600; color: var(--text2);
    padding: 7px 11px; border-radius: 999px; cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
.el-group-btn.active[b-lg3vazqd8q] { background: var(--text); color: var(--bg); }
.el-period-nav[b-lg3vazqd8q] {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px; min-height: 36px;
}
.el-nav-arrow[b-lg3vazqd8q] {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border2); background: var(--surface2);
    color: var(--text); cursor: pointer; display: grid; place-items: center;
}
.el-nav-arrow:disabled[b-lg3vazqd8q] { opacity: 0.35; cursor: default; }
.el-period-label[b-lg3vazqd8q] { flex: 1; text-align: center; min-width: 0; }
.el-period-main[b-lg3vazqd8q] { font-size: 0.92rem; font-weight: 750; }
.el-today-pill[b-lg3vazqd8q] {
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; margin-left: 6px; padding: 2px 6px;
    border-radius: 999px; background: rgba(74, 222, 128, 0.14); color: var(--el-ok);
}
.el-period-sub[b-lg3vazqd8q] { font-size: 0.72rem; color: var(--text3); margin-top: 1px; }
.el-custom-range[b-lg3vazqd8q] {
    display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.el-custom-field[b-lg3vazqd8q] { display: flex; flex-direction: column; gap: 3px; }
.el-custom-field label[b-lg3vazqd8q] { font-size: 0.62rem; font-weight: 700; color: var(--text3); text-transform: uppercase; }
.el-custom-field input[b-lg3vazqd8q] {
    font: inherit; color: var(--text); background: var(--surface2);
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
}
.el-custom-sep[b-lg3vazqd8q] { color: var(--text3); padding-bottom: 8px; }

/* Live flow */
.el-flow-viz[b-lg3vazqd8q] {
    display: grid; grid-template-columns: 1fr 52px 1.2fr;
    gap: 8px; align-items: stretch; min-height: 180px;
}
.el-flow-join[b-lg3vazqd8q] { display: none; }
.el-flow-col[b-lg3vazqd8q] { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.el-node[b-lg3vazqd8q] {
    border-radius: 12px; padding: 10px 12px;
    border: 1px solid var(--border); background: var(--surface2);
}
.el-src[b-lg3vazqd8q] { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.el-fn-row[b-lg3vazqd8q] { display: flex; align-items: center; gap: 10px; width: 100%; }
.el-fn-ico[b-lg3vazqd8q] {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center; font-size: 0.9rem; flex-shrink: 0;
}
.el-fn-t[b-lg3vazqd8q] { font-size: 0.78rem; font-weight: 650; color: var(--text2); }
.el-src .el-fn-v[b-lg3vazqd8q] { margin-left: auto; font-family: var(--el-mono); font-size: 1.1rem; font-weight: 800; }
.el-src .el-fn-v small[b-lg3vazqd8q] { font-size: 0.68rem; color: var(--text3); font-weight: 650; }
.el-fn-meta[b-lg3vazqd8q] { font-size: 0.7rem; font-weight: 550; color: var(--text3); padding-left: 38px; }
.el-fn-bar[b-lg3vazqd8q] {
    margin-left: 38px; height: 5px; border-radius: 999px;
    background: rgba(255,255,255,0.06); overflow: hidden;
}
.el-fn-bar i[b-lg3vazqd8q] { display: block; height: 100%; border-radius: 999px; }
.el-src.solar[b-lg3vazqd8q] { border-color: color-mix(in srgb, var(--el-solar) 30%, var(--border)); }
.el-src.solar .el-fn-ico[b-lg3vazqd8q] { background: rgba(251, 191, 36, 0.14); color: var(--el-solar); }
.el-src.solar .el-fn-bar i[b-lg3vazqd8q] { background: var(--el-solar); }
.el-src.bat[b-lg3vazqd8q] { border-color: color-mix(in srgb, var(--el-bat) 30%, var(--border)); }
.el-src.bat .el-fn-ico[b-lg3vazqd8q] { background: rgba(96, 165, 250, 0.14); color: var(--el-bat); }
.el-src.bat .el-fn-bar i[b-lg3vazqd8q] { background: var(--el-bat); }
.el-src.grid[b-lg3vazqd8q] { border-color: color-mix(in srgb, var(--el-import) 30%, var(--border)); }
.el-src.grid .el-fn-ico[b-lg3vazqd8q] { background: rgba(248, 113, 113, 0.12); color: var(--el-import); }
.el-src.grid .el-fn-bar i[b-lg3vazqd8q] { background: var(--el-import); }
.el-home[b-lg3vazqd8q] {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start;
    background: linear-gradient(145deg, rgba(52, 211, 153, 0.14), var(--surface2) 75%);
    border-color: color-mix(in srgb, var(--el-home) 35%, var(--border));
    padding: 16px;
}
.el-home .el-fn-ico[b-lg3vazqd8q] { background: rgba(52, 211, 153, 0.14); color: var(--el-home); width: 36px; height: 36px; font-size: 1.1rem; }
.el-home .el-fn-row[b-lg3vazqd8q] { flex-wrap: wrap; }
.el-home .el-fn-v[b-lg3vazqd8q] {
    font-family: var(--el-mono); font-size: 1.85rem; font-weight: 800;
    margin-top: 8px; letter-spacing: -0.03em; width: 100%;
}
.el-home .el-fn-v small[b-lg3vazqd8q] { font-size: 0.85rem; color: var(--text3); font-weight: 650; }
.el-home-kpi[b-lg3vazqd8q] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 12px; }
.el-hk[b-lg3vazqd8q] {
    background: color-mix(in srgb, var(--bg) 35%, transparent);
    border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px;
}
.el-hk .k[b-lg3vazqd8q] { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.el-hk .v[b-lg3vazqd8q] { font-family: var(--el-mono); font-size: 0.88rem; font-weight: 800; }
.el-hk .v small[b-lg3vazqd8q] { font-size: 0.65rem; color: var(--text3); }
.el-flow-mid[b-lg3vazqd8q] { display: flex; align-items: center; }
.el-flow-mid svg[b-lg3vazqd8q] { width: 100%; height: 100%; min-height: 160px; }
.el-flow-mid path[b-lg3vazqd8q] { fill: none; stroke-width: 2.5; opacity: 0.55; stroke-linecap: round; }
.el-pills[b-lg3vazqd8q] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.el-pill[b-lg3vazqd8q] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 12px;
    background: var(--surface2); border: 1px solid var(--border);
    font-size: 0.78rem; font-weight: 650;
}
.el-pill i[b-lg3vazqd8q] { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }
.el-pill .v[b-lg3vazqd8q] { font-family: var(--el-mono); font-weight: 800; }

@media (max-width: 720px) {
    .el-flow-viz[b-lg3vazqd8q] { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .el-flow-mid[b-lg3vazqd8q] { display: none; }
    .el-flow-join[b-lg3vazqd8q] {
        display: grid; grid-template-columns: 1fr 1fr 1fr;
        height: 22px; margin: 2px 18% 6px;
    }
    .el-flow-join i[b-lg3vazqd8q] { display: block; width: 3px; height: 100%; margin: 0 auto; border-radius: 99px; opacity: 0.7; }
    .el-home[b-lg3vazqd8q] { padding: 12px; flex: none; }
    .el-home .el-fn-v[b-lg3vazqd8q] { font-size: 1.35rem; margin-top: 0; margin-left: auto; width: auto; }
    .el-fn-meta[b-lg3vazqd8q], .el-fn-bar[b-lg3vazqd8q] { margin-left: 0; padding-left: 0; }
}

/* Balance */
.el-bal-grid[b-lg3vazqd8q] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .el-bal-grid[b-lg3vazqd8q] { grid-template-columns: 1fr 1fr; } }
.el-bal[b-lg3vazqd8q] {
    border-radius: 14px; padding: 12px 13px;
    background: var(--surface2); border: 1px solid var(--border);
}
.el-bal .k[b-lg3vazqd8q] { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); margin-bottom: 5px; }
.el-bal .v[b-lg3vazqd8q] { font-family: var(--el-mono); font-size: 1.3rem; font-weight: 800; }
.el-bal .v small[b-lg3vazqd8q] { font-size: 0.72rem; color: var(--text3); }
.el-bal .s[b-lg3vazqd8q] { margin-top: 3px; font-size: 0.7rem; color: var(--text3); }
.el-bal.hi[b-lg3vazqd8q] {
    background: linear-gradient(145deg, rgba(52, 211, 153, 0.14), var(--surface2));
    border-color: color-mix(in srgb, var(--el-home) 30%, var(--border));
}
.el-bal.hi .v[b-lg3vazqd8q] { color: #6EE7B7; }
.el-bal.hi-pv[b-lg3vazqd8q] {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.16), var(--surface2));
    border-color: color-mix(in srgb, var(--el-solar) 32%, var(--border));
}
.el-bal.hi-pv .v[b-lg3vazqd8q] { color: #FBBF24; }
.el-cov[b-lg3vazqd8q] { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.el-cov-top[b-lg3vazqd8q] { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 0.78rem; font-weight: 650; color: var(--text2); }
.el-cov-bar[b-lg3vazqd8q] { height: 11px; border-radius: 999px; overflow: hidden; display: flex; background: var(--surface2); border: 1px solid var(--border); }
.el-cov-bar i[b-lg3vazqd8q] { display: block; height: 100%; }
.el-cov-leg[b-lg3vazqd8q] { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 9px; font-size: 0.7rem; color: var(--text3); font-weight: 600; }
.el-cov-leg b[b-lg3vazqd8q] { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* Charts */
.el-legend[b-lg3vazqd8q] { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.7rem; font-weight: 650; color: var(--text3); margin: -2px 0 10px; }
.el-legend span[b-lg3vazqd8q] { display: inline-flex; align-items: center; gap: 6px; }
.el-sw[b-lg3vazqd8q] { width: 14px; height: 8px; border-radius: 2px; background: currentColor; }
.el-side[b-lg3vazqd8q] { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 2px; }
.el-chart[b-lg3vazqd8q] {
    position: relative;
    height: 220px; border-radius: 14px; background: var(--surface2);
    border: 1px solid var(--border); padding: 10px 8px 6px;
    overflow: hidden;
}
.el-hits[b-lg3vazqd8q] {
    position: absolute; inset: 10px 8px 22px 36px;
    display: flex;
}
.el-hit[b-lg3vazqd8q] { flex: 1; min-width: 0; cursor: crosshair; }
.el-chart.bi[b-lg3vazqd8q] { height: 268px; }
.el-chart[b-lg3vazqd8q]  svg { width: 100%; height: 100%; display: block; }
.el-chart[b-lg3vazqd8q]  .ax { fill: #8B8790; font-size: 9px; font-weight: 650; }
.el-chart[b-lg3vazqd8q]  .ax-y { text-anchor: end; }
.el-chart[b-lg3vazqd8q]  .grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
@media (max-width: 700px) {
    .el-chart[b-lg3vazqd8q]  .ax-dense { display: none; }
}
.el-kpis[b-lg3vazqd8q] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
@media (max-width: 600px) { .el-kpis[b-lg3vazqd8q] { grid-template-columns: 1fr 1fr; } }
.el-kpi[b-lg3vazqd8q] { border-radius: 12px; padding: 10px; background: var(--surface2); border: 1px solid var(--border); }
.el-kpi .k[b-lg3vazqd8q] { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
.el-kpi .v[b-lg3vazqd8q] { font-family: var(--el-mono); font-size: 1.05rem; font-weight: 800; }
.el-kpi .v small[b-lg3vazqd8q] { font-size: 0.68rem; color: var(--text3); }
.el-kpi .s[b-lg3vazqd8q] { font-size: 0.68rem; color: var(--text3); }

.el-sankey[b-lg3vazqd8q] { overflow: hidden; }
.el-sankey[b-lg3vazqd8q]  svg { display: block; width: 100%; height: 360px; }
.el-sankey[b-lg3vazqd8q]  .sk-link {
    opacity: 0.48;
    mix-blend-mode: screen;
    cursor: pointer;
}
.el-sankey[b-lg3vazqd8q]  .sk-link:hover { opacity: 0.82; }

.el-stack[b-lg3vazqd8q] { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 12px; }
.el-stack span[b-lg3vazqd8q] { display: block; height: 100%; }
.el-load[b-lg3vazqd8q] { border-radius: 14px; border: 1px solid transparent; }
.el-load.open[b-lg3vazqd8q] { background: var(--surface2); border-color: var(--border); }
.el-load-row[b-lg3vazqd8q] {
    display: grid; grid-template-columns: 28px 1fr auto 16px;
    gap: 10px; align-items: center; padding: 10px; border-radius: 12px;
    width: 100%; text-align: left; background: none; border: none; color: inherit; cursor: pointer; font: inherit;
}
.el-load-row.has-live[b-lg3vazqd8q] { grid-template-columns: 28px 1fr auto auto 16px; }
.el-load-row:hover[b-lg3vazqd8q] { background: var(--surface2); }
.el-load.open .el-load-row[b-lg3vazqd8q] { background: transparent; }
.el-load-ico[b-lg3vazqd8q] { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.el-load-name[b-lg3vazqd8q] { font-size: 0.88rem; font-weight: 650; text-align: left; min-width: 0; }
/* PROVA: coppia barre energia/potenza — rimuovere con il blocco in .razor */
.el-load-tracks[b-lg3vazqd8q] {
    grid-column: 2 / -2;
    display: flex; flex-direction: column; gap: 4px;
    margin: -2px 0 1px;
}
.el-load-track-row[b-lg3vazqd8q] {
    display: grid; grid-template-columns: 12px 1fr; gap: 6px; align-items: center;
}
.el-load-track-row > .bi[b-lg3vazqd8q] {
    font-size: 0.72rem; line-height: 1;
}
.el-load-track-row.energy > .bi[b-lg3vazqd8q] {
    color: #FBBF24;
    font-size: 0.8rem;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.65));
}
.el-load-track-row.live > .bi[b-lg3vazqd8q] { color: #6EE7B7; }
.el-load-track[b-lg3vazqd8q] {
    height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.el-load-track i[b-lg3vazqd8q] { display: block; height: 100%; border-radius: 999px; }
html[data-theme="light"] .el-load-track[b-lg3vazqd8q] { background: rgba(0, 0, 0, 0.08); }
.el-load-metric[b-lg3vazqd8q] { text-align: right; min-width: 4.6rem; }
.el-load-metric.live .v[b-lg3vazqd8q] { color: #6EE7B7; }
.el-load-metric .v[b-lg3vazqd8q] { font-family: var(--el-mono); font-size: 0.9rem; font-weight: 800; }
.el-load-metric .p[b-lg3vazqd8q] { font-size: 0.65rem; color: var(--text3); }
.el-chev[b-lg3vazqd8q] { color: var(--text3); transition: transform 0.18s ease; }
.el-load.open .el-chev[b-lg3vazqd8q] { transform: rotate(180deg); }
.el-detail[b-lg3vazqd8q] { display: none; padding: 0 12px 14px; border-top: 1px solid var(--border); margin: 0 8px; }
.el-load.open .el-detail[b-lg3vazqd8q] { display: block; padding-top: 12px; }
.el-detail-chart[b-lg3vazqd8q] {
    position: relative;
    height: 176px; border-radius: 12px; background: var(--surface);
    border: 1px solid var(--border); padding: 8px; margin-bottom: 10px;
    overflow: hidden;
}
.el-detail-chart[b-lg3vazqd8q]  svg { width: 100%; height: 100%; display: block; }
.el-detail-chart .el-hits[b-lg3vazqd8q] { inset: 8px 8px 20px 34px; }
.el-detail-chart[b-lg3vazqd8q]  .ax { fill: #8B8790; font-size: 9px; font-weight: 650; }
.el-detail-chart[b-lg3vazqd8q]  .ax-y { text-anchor: end; }
.el-detail-chart[b-lg3vazqd8q]  .grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
@media (max-width: 700px) {
    .el-detail-chart[b-lg3vazqd8q]  .ax-dense { display: none; }
}
.el-detail-kpis[b-lg3vazqd8q] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 600px) { .el-detail-kpis[b-lg3vazqd8q] { grid-template-columns: 1fr 1fr; } }

.el-tip[b-lg3vazqd8q] {
    position: fixed; z-index: 40; pointer-events: none;
    min-width: 168px; max-width: 260px; padding: 8px 10px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    font-size: 0.72rem; color: var(--text2);
}
.el-tip[b-lg3vazqd8q]  .th {
    font-weight: 800; color: var(--text); margin-bottom: 6px;
    text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em;
}
.el-tip[b-lg3vazqd8q]  .tr {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 2px 0; font-weight: 600;
}
.el-tip[b-lg3vazqd8q]  .tr b { font-family: var(--el-mono); color: var(--text); font-weight: 800; }
.el-tip[b-lg3vazqd8q]  .tot { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border); }
.el-tip[b-lg3vazqd8q]  .dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 2px;
    margin-right: 5px; vertical-align: middle;
}
.el-empty[b-lg3vazqd8q] { font-size: 0.8rem; color: var(--text3); margin: 8px 0 0; }

.el-range[b-lg3vazqd8q] { margin-top: 24px; padding-top: 8px; }
/* /Components/Pages/LightsPage.razor.rz.scp.css */
/* Illuminazione — layout v2 leggero (label piano/zona, card luci) */

.li-page[b-jaalaf4zee] {
    --li: #FBBF24;
    --li-soft: rgba(251, 191, 36, 0.14);
    --li-ink: #FDE68A;
    --li-danger: #F87171;
    --li-danger-soft: rgba(248, 113, 113, 0.12);
    --li-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}

.app.li-page[b-jaalaf4zee] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    max-width: 1100px;
}

html[data-theme="light"] .li-page[b-jaalaf4zee] {
    --li: #D97706;
    --li-soft: #FEF3C7;
    --li-ink: #B45309;
    --li-danger: #DC2626;
    --li-danger-soft: #FEF2F2;
}

@media (max-width: 600px) {
    .app.li-page[b-jaalaf4zee] {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
}

.li-page *[b-jaalaf4zee],
.li-page *[b-jaalaf4zee]::before,
.li-page *[b-jaalaf4zee]::after { box-sizing: border-box; }

.li-top[b-jaalaf4zee] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 0;
}

.li-back[b-jaalaf4zee] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.45rem;
    flex-shrink: 0;
    cursor: pointer;
}

.li-brand[b-jaalaf4zee] { min-width: 0; flex: 1; cursor: pointer; }
.li-brand h1[b-jaalaf4zee] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.li-brand h1 i[b-jaalaf4zee] { color: var(--li); font-size: 1.15rem; }
.li-meta[b-jaalaf4zee] {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--text3);
    font-weight: 500;
}

.li-content[b-jaalaf4zee] {
    padding: 14px 14px 40px;
}

.li-section[b-jaalaf4zee] { margin-bottom: 18px; }

.li-section-label[b-jaalaf4zee] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    margin: 0 0 10px 2px;
}

/* Riepilogo */
.li-summary[b-jaalaf4zee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.li-summary-stat[b-jaalaf4zee] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.li-n[b-jaalaf4zee] {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--li-ink);
    line-height: 1;
}
.li-n span[b-jaalaf4zee] {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text3);
}
.li-lbl[b-jaalaf4zee] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text2);
}

.li-off-all[b-jaalaf4zee] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--li-danger) 35%, var(--border));
    background: var(--li-danger-soft);
    color: var(--danger-text, #FCA5A5);
    cursor: pointer;
    transition: filter 0.12s, transform 0.1s;
}
.li-off-all:hover:not(:disabled)[b-jaalaf4zee] { filter: brightness(1.06); }
.li-off-all:active:not(:disabled)[b-jaalaf4zee] { transform: scale(0.98); }
.li-off-all:disabled[b-jaalaf4zee] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hierarchy leggera */
.li-floor-label[b-jaalaf4zee] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 2px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
}
.li-floor-label[b-jaalaf4zee]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.li-zone[b-jaalaf4zee] { margin-bottom: 14px; }
.li-zone:last-child[b-jaalaf4zee] { margin-bottom: 0; }

.li-zone-label[b-jaalaf4zee] {
    margin: 0 0 8px 4px;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--text2);
}

.li-grid[b-jaalaf4zee] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
@media (max-width: 520px) {
    .li-grid[b-jaalaf4zee] { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
    .app.li-page[b-jaalaf4zee],
    .li-page[b-jaalaf4zee] {
        max-width: 1200px;
    }

    .li-content[b-jaalaf4zee] {
        padding: 16px 20px 48px;
    }

    .li-grid[b-jaalaf4zee] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1100px) {
    .li-grid[b-jaalaf4zee] {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Light cards */
.li-card[b-jaalaf4zee] {
    --lc: var(--li);
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.2s, transform 0.1s;
}
.li-card:hover[b-jaalaf4zee] { border-color: color-mix(in srgb, var(--lc) 30%, var(--border2)); }
.li-card:active[b-jaalaf4zee] { transform: scale(0.985); }
.li-card.readonly[b-jaalaf4zee] { cursor: default; }
.li-card.readonly:hover[b-jaalaf4zee] { border-color: var(--border2); }
.li-card.readonly:active[b-jaalaf4zee] { transform: none; }

.li-card.on[b-jaalaf4zee] {
    background: linear-gradient(160deg, color-mix(in srgb, var(--lc) 16%, transparent), var(--surface) 70%);
    border-color: color-mix(in srgb, var(--lc) 42%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lc) 8%, transparent) inset,
                0 8px 22px -10px color-mix(in srgb, var(--lc) 35%, transparent);
}

.li-card-head[b-jaalaf4zee] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.li-bulb[b-jaalaf4zee] {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--surface2);
    color: var(--text3);
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
.li-card.on .li-bulb[b-jaalaf4zee] {
    background: color-mix(in srgb, var(--lc) 18%, var(--surface2));
    color: var(--lc);
}

.li-info[b-jaalaf4zee] { flex: 1; min-width: 0; }
.li-name[b-jaalaf4zee] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.li-state[b-jaalaf4zee] {
    margin-top: 3px;
    font-size: 0.78rem;
    font-family: var(--li-mono);
    color: var(--text3);
    font-weight: 500;
}
.li-card.on .li-state[b-jaalaf4zee] { color: var(--lc); }

/* Potenza: a destra nell’header, pochi px a sinistra del LED */
.li-power[b-jaalaf4zee] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 4px 6px 0 0; /* stacca un filo dal cerchietto LED */
    padding: 0;
    font-family: var(--li-mono);
    font-size: 0.68rem;
    font-weight: 550;
    color: var(--text3);
    white-space: nowrap;
    opacity: 0.9;
    letter-spacing: 0.01em;
}
.li-power i[b-jaalaf4zee] {
    font-size: 0.7rem;
    color: var(--text3);
    opacity: 0.7;
}
.li-card.on .li-power[b-jaalaf4zee] {
    color: var(--text2);
    opacity: 0.95;
}
.li-card.on .li-power i[b-jaalaf4zee] {
    color: color-mix(in srgb, var(--lc) 45%, var(--text3));
    opacity: 0.9;
}

.li-led[b-jaalaf4zee] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    border: 1px solid var(--border2);
    transition: all 0.2s;
}
.li-card.on .li-led[b-jaalaf4zee] {
    background: var(--lc);
    border-color: var(--lc);
    box-shadow: 0 0 8px 1px color-mix(in srgb, var(--lc) 55%, transparent);
}

/* Preset brightness 10 / 30 / 50 / 70 */
.li-presets[b-jaalaf4zee] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.li-preset[b-jaalaf4zee] {
    padding: 6px 4px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
    font-family: var(--li-mono);
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.li-preset:hover:not(:disabled)[b-jaalaf4zee] {
    border-color: var(--border2);
    color: var(--text2);
}
.li-preset.active[b-jaalaf4zee] {
    color: var(--bg);
    background: var(--lc);
    border-color: color-mix(in srgb, var(--lc) 70%, transparent);
}
.li-card:not(.on) .li-preset[b-jaalaf4zee] { opacity: 0.55; }
.li-preset:disabled[b-jaalaf4zee] { cursor: not-allowed; opacity: 0.4; }

/* Dimmer 1–100% */
.li-dim[b-jaalaf4zee] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.li-slider-wrap[b-jaalaf4zee] {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 40px;
}
.li-slider[b-jaalaf4zee] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--lc) 0%,
        var(--lc) var(--val, 1%),
        var(--surface2) var(--val, 1%)
    );
    border: 1px solid var(--border);
    outline: none;
    cursor: pointer;
}
.li-card:not(.on) .li-slider[b-jaalaf4zee] { opacity: 0.45; }

.li-slider[b-jaalaf4zee]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);
    border: 3px solid var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: grab;
}
.li-slider[b-jaalaf4zee]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);
    border: 3px solid var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: grab;
}

.li-pct[b-jaalaf4zee] {
    font-family: var(--li-mono);
    font-size: 0.82rem;
    color: var(--text2);
    width: 36px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 650;
}

/* Color swatches */
.li-color[b-jaalaf4zee] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.li-color-label[b-jaalaf4zee] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
    margin-bottom: 8px;
}
.li-swatches[b-jaalaf4zee] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.li-card:not(.on) .li-swatches[b-jaalaf4zee] { opacity: 0.45; }

.li-swatch[b-jaalaf4zee] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sw);
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    padding: 0;
    cursor: pointer;
    transition: transform 0.12s;
}
.li-swatch:hover:not(:disabled)[b-jaalaf4zee] { transform: scale(1.08); }
.li-swatch.selected[b-jaalaf4zee] {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
    transform: scale(1.06);
}
.li-swatch:disabled[b-jaalaf4zee] { cursor: not-allowed; }

/* Empty + feedback */
.li-empty[b-jaalaf4zee] {
    text-align: center;
    padding: 36px 16px;
    border: 1px dashed var(--border2);
    border-radius: 16px;
    color: var(--text3);
}
.li-empty i[b-jaalaf4zee] {
    font-size: 2rem;
    color: var(--li);
    opacity: 0.7;
    display: block;
    margin-bottom: 10px;
}
.li-empty p[b-jaalaf4zee] { margin: 0 0 6px; font-weight: 600; color: var(--text2); }
.li-empty-sub[b-jaalaf4zee] { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text3) !important; }
.li-empty code[b-jaalaf4zee] {
    font-family: var(--li-mono);
    font-size: 0.85em;
    background: var(--surface2);
    padding: 1px 5px;
    border-radius: 4px;
}

.li-feedback[b-jaalaf4zee] {
    margin: 8px 2px 0;
    font-size: 0.85rem;
    color: var(--text2);
    font-weight: 600;
}
/* /Components/Pages/MowerPage.razor.rz.scp.css */
/* Automower page — from mockup v1 */
.mw-page[b-ovhynje4hu] {
    --mow: #4ADE80;
    --mow-soft: rgba(74, 222, 128, 0.14);
    --mow-ink: #86EFAC;
    --charge: #38BDF8;
    --charge-soft: rgba(56, 189, 248, 0.14);
    --charge-ink: #7DD3FC;
    --sleep: #A5B4FC;
    --sleep-soft: rgba(165, 180, 252, 0.14);
    --warn: #FBBF24;
    --warn-soft: rgba(251, 191, 36, 0.14);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.14);
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}
html[data-theme="light"] .mw-page[b-ovhynje4hu] {
    --mow: #16A34A;
    --mow-soft: #DCFCE7;
    --mow-ink: #15803D;
    --charge: #0284C7;
    --charge-soft: #E0F2FE;
    --charge-ink: #0369A1;
    --sleep: #6366F1;
    --sleep-soft: #E0E7FF;
    --warn: #CA8A04;
    --warn-soft: #FEF9C3;
    --danger: #DC2626;
    --danger-soft: #FEE2E2;
}
@media (max-width: 600px) {
    .app.mw-page[b-ovhynje4hu] { max-width: 100%; margin: 0; width: 100%; }
}
.mw-page *[b-ovhynje4hu], .mw-page *[b-ovhynje4hu]::before, .mw-page *[b-ovhynje4hu]::after { box-sizing: border-box; }

.mw-top[b-ovhynje4hu] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 0;
}
.mw-back[b-ovhynje4hu] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.45rem; flex-shrink: 0; cursor: pointer;
}
.mw-brand[b-ovhynje4hu] { min-width: 0; flex: 1; cursor: pointer; }
.mw-brand h1[b-ovhynje4hu] {
    margin: 0; font-size: 1.28rem; font-weight: 700;
    letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px;
}
.mw-brand h1 i[b-ovhynje4hu] { color: var(--mow); font-size: 1.1rem; }
.mw-meta[b-ovhynje4hu] { margin-top: 3px; font-size: 0.8rem; color: var(--text3); font-weight: 500; }
.mw-content[b-ovhynje4hu] { padding: 14px 14px 40px; }
.mw-empty[b-ovhynje4hu] {
    text-align: center; padding: 36px 16px;
    border: 1px dashed var(--border2); border-radius: 16px; color: var(--text3);
}
.mw-empty i[b-ovhynje4hu] { font-size: 2rem; color: var(--mow); opacity: 0.7; display: block; margin-bottom: 10px; }
.mw-empty p[b-ovhynje4hu] { margin: 0 0 6px; font-weight: 600; color: var(--text2); }
.mw-empty-sub[b-ovhynje4hu] { font-size: 0.82rem !important; font-weight: 500 !important; color: var(--text3) !important; }
.mw-empty code[b-ovhynje4hu] { font-family: var(--mono); font-size: 0.85em; background: var(--surface2); padding: 1px 5px; border-radius: 4px; }


    
    
    
    
    
    

    
    @media (max-width: 600px) {  }

    

    .mw-section[b-ovhynje4hu] { margin-bottom: 16px; }
    .mw-section-label[b-ovhynje4hu] {
      font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--text3); margin: 0 0 10px 2px;
    }

    /* ── Hero stage ── */
    .mw-hero[b-ovhynje4hu] {
      position: relative;
      border-radius: var(--radius);
      background:
        radial-gradient(ellipse 80% 60% at 50% 70%, rgba(40, 50, 40, 0.35), transparent 70%),
        var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: 12px 10px 14px;
      overflow: hidden;
      transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, border-radius 0.25s;
    }
    /* Contenitore “invisibile” (solo immagine + pills flottanti) */
    .mw-hero.is-bare[b-ovhynje4hu] {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      border-radius: 0;
      padding-left: 4px;
      padding-right: 4px;
    }
    .mw-hero-top[b-ovhynje4hu] {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      min-height: 34px;
      margin-bottom: 18px; /* respiro tra pills e immagine (mobile) */
    }
    @media (min-width: 520px) {
      .mw-hero-top[b-ovhynje4hu] { margin-bottom: 14px; }
    }
    .mw-hero-badge[b-ovhynje4hu] {
      position: relative; z-index: 8;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 11px; border-radius: 999px;
      font-size: 0.78rem; font-weight: 750;
      background: var(--surface2); border: 1px solid var(--border2);
      backdrop-filter: blur(8px);
    }
    .mw-hero.is-bare .mw-hero-badge[b-ovhynje4hu],
    .mw-hero.is-bare .mw-hero-batt[b-ovhynje4hu] {
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      box-shadow: var(--shadow-sm);
    }
    .mw-hero-badge .dot[b-ovhynje4hu] {
      width: 8px; height: 8px; border-radius: 50%; background: var(--text3);
      box-shadow: 0 0 0 0 transparent;
    }
    .mw-hero-badge[data-kind="docked"][b-ovhynje4hu] { color: var(--sleep); border-color: color-mix(in srgb, var(--sleep) 35%, transparent); background: var(--sleep-soft); }
    .mw-hero-badge[data-kind="docked"] .dot[b-ovhynje4hu] { background: var(--sleep); box-shadow: 0 0 8px var(--sleep); }
    .mw-hero-badge[data-kind="charging"][b-ovhynje4hu] { color: var(--charge-ink); border-color: color-mix(in srgb, var(--charge) 40%, transparent); background: var(--charge-soft); }
    .mw-hero-badge[data-kind="charging"] .dot[b-ovhynje4hu] { background: var(--charge); box-shadow: 0 0 8px var(--charge); animation: pulse-dot-b-ovhynje4hu 1.4s ease-in-out infinite; }
    .mw-hero-badge[data-kind="mowing"][b-ovhynje4hu] { color: var(--mow-ink); border-color: color-mix(in srgb, var(--mow) 40%, transparent); background: var(--mow-soft); }
    .mw-hero-badge[data-kind="mowing"] .dot[b-ovhynje4hu] { background: var(--mow); box-shadow: 0 0 8px var(--mow); animation: pulse-dot-b-ovhynje4hu 1s ease-in-out infinite; }
    .mw-hero-badge[data-kind="paused"][b-ovhynje4hu] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
    .mw-hero-badge[data-kind="paused"] .dot[b-ovhynje4hu] { background: var(--warn); }
    .mw-hero-badge[data-kind="returning"][b-ovhynje4hu] { color: var(--charge-ink); border-color: color-mix(in srgb, var(--charge) 35%, transparent); background: var(--charge-soft); }
    .mw-hero-badge[data-kind="returning"] .dot[b-ovhynje4hu] { background: var(--charge); animation: pulse-dot-b-ovhynje4hu 1.2s ease-in-out infinite; }
    .mw-hero-badge[data-kind="error"][b-ovhynje4hu] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
    .mw-hero-badge[data-kind="error"] .dot[b-ovhynje4hu] { background: var(--danger); animation: pulse-dot-b-ovhynje4hu 0.6s steps(1,end) infinite; }
    .mw-hero-badge[data-kind="idle"][b-ovhynje4hu] { color: var(--text2); }
    .mw-hero-badge[data-kind="idle"] .dot[b-ovhynje4hu] { background: var(--text2); }
    @keyframes pulse-dot-b-ovhynje4hu {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.55; transform: scale(0.85); }
    }

    .mw-hero-batt[b-ovhynje4hu] {
      position: relative; z-index: 8;
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; border-radius: 999px;
      background: color-mix(in srgb, var(--surface2) 88%, transparent);
      border: 1px solid var(--border2);
      backdrop-filter: blur(8px);
      font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
      flex-shrink: 0;
    }
    .mw-hero-batt.low[b-ovhynje4hu] { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
    .mw-hero-batt.mid[b-ovhynje4hu] { color: var(--warn); }
    .mw-hero-batt.ok[b-ovhynje4hu] { color: var(--mow-ink); }
    .batt-ico[b-ovhynje4hu] {
      width: 22px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px;
      position: relative; flex-shrink: 0;
    }
    .batt-ico[b-ovhynje4hu]::after {
      content: ""; position: absolute; right: -4px; top: 2px;
      width: 2px; height: 6px; background: currentColor; border-radius: 0 1px 1px 0;
    }
    .batt-ico .fill[b-ovhynje4hu] {
      position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px;
      border-radius: 1px; background: currentColor; width: 70%;
      transition: width 0.25s;
    }

    /* Mower visual */
    .mw-stage[b-ovhynje4hu] {
      position: relative;
      width: min(100%, 560px);
      margin: 0 auto;
      aspect-ratio: 1245 / 830;
    }

    /* Prossima partenza — pill in basso al centro (solo se disponibile) */
    .mw-next[b-ovhynje4hu] {
      display: none;
      margin: 14px auto 0;
      width: fit-content;
      max-width: 100%;
      align-items: center;
      gap: 7px;
      padding: 7px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--charge-ink);
      background: var(--charge-soft);
      border: 1px solid color-mix(in srgb, var(--charge) 32%, transparent);
    }
    .mw-next.show[b-ovhynje4hu] { display: inline-flex; }
    .mw-next i[b-ovhynje4hu] { font-size: 0.95rem; opacity: 0.9; }
    .mw-next .when[b-ovhynje4hu] { font-variant-numeric: tabular-nums; }
    .mw-next .when small[b-ovhynje4hu] {
      font-weight: 650;
      color: var(--text3);
      margin-left: 2px;
    }
    .mw-container[b-ovhynje4hu] {
      position: relative; width: 100%; height: 100%;
      border-radius: 14px; overflow: visible; background: transparent;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55));
      transition: filter 0.5s ease;
    }
    .mw-container svg[b-ovhynje4hu] { width: 100%; height: 100%; display: block; }

    /* Layers default off */
    #lights-group[b-ovhynje4hu], #glow-layer[b-ovhynje4hu],
    #red-group[b-ovhynje4hu], #red-glow[b-ovhynje4hu],
    #red-front-group[b-ovhynje4hu], #red-front-glow[b-ovhynje4hu] { opacity: 0; transition: opacity 0.35s ease; }
    .charge-aura[b-ovhynje4hu], .charge-ring[b-ovhynje4hu], .charge-ring2[b-ovhynje4hu], .battery[b-ovhynje4hu],
    .sleep-aura[b-ovhynje4hu], .sleep-eyes[b-ovhynje4hu], .zzz[b-ovhynje4hu],
    .mow2-glow[b-ovhynje4hu], .mow2-sweep[b-ovhynje4hu], .mow2-sweep2[b-ovhynje4hu], .mow2-dot[b-ovhynje4hu],
    .error-aura[b-ovhynje4hu], .error-icon[b-ovhynje4hu] { opacity: 0; pointer-events: none; }

    /* LED white */
    .is-lights #lights-group[b-ovhynje4hu] {
      opacity: 1; animation: led-pulse-b-ovhynje4hu 2.8s ease-in-out infinite;
    }
    .is-lights #glow-layer[b-ovhynje4hu] { opacity: 0.5; transition: opacity 0.6s ease; mix-blend-mode: screen; }
    .is-lights .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(140,190,255,0.22));
    }
    @keyframes led-pulse-b-ovhynje4hu { 0%,100% { opacity: 0.88; } 50% { opacity: 1; } }

    /* Charging */
    .charge-aura[b-ovhynje4hu] {
      position: absolute; left: 50%; top: 58%; width: 82%; height: 52%;
      transform: translate(-50%, -50%); border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(60,220,255,0.38) 0%, rgba(30,170,255,0.16) 40%, transparent 72%);
      mix-blend-mode: screen; z-index: 1; transition: opacity 0.45s ease;
    }
    .charge-ring[b-ovhynje4hu], .charge-ring2[b-ovhynje4hu] {
      position: absolute; left: 50%; top: 58%; width: 90%; height: 58%;
      transform: translate(-50%, -50%); border-radius: 50%;
      border: 2px solid rgba(100, 220, 255, 0); z-index: 1;
    }
    .charge-ring2[b-ovhynje4hu] { border-width: 1.5px; }
    .battery[b-ovhynje4hu] {
      position: absolute; top: 5%; left: 50%; transform: translateX(-50%);
      width: 46px; height: 24px; border: 2px solid rgba(100, 220, 255, 0.9);
      border-radius: 4px; z-index: 5; background: rgba(0,10,20,0.55);
      box-shadow: 0 0 12px rgba(60,200,255,0.4); transition: opacity 0.35s ease;
    }
    .battery[b-ovhynje4hu]::after {
      content: ''; position: absolute; right: -5px; top: 5px;
      width: 3px; height: 8px; background: rgba(120, 210, 255, 0.7); border-radius: 0 2px 2px 0;
    }
    .battery-fill[b-ovhynje4hu] {
      position: absolute; left: 2px; top: 2px; bottom: 2px; width: 0%;
      background: linear-gradient(90deg, #2a9fff, #5ce0ff); border-radius: 2px;
    }
    .is-charging .charge-aura[b-ovhynje4hu] { opacity: 1; animation: charge-breathe-b-ovhynje4hu 1.7s ease-in-out infinite; }
    .is-charging .charge-ring[b-ovhynje4hu] { opacity: 1; animation: charge-ring-b-ovhynje4hu 1.9s ease-out infinite; }
    .is-charging .charge-ring2[b-ovhynje4hu] { opacity: 1; animation: charge-ring-b-ovhynje4hu 1.9s ease-out 0.95s infinite; }
    .is-charging .battery[b-ovhynje4hu] { opacity: 1; }
    .is-charging .battery-fill[b-ovhynje4hu] { animation: battery-fill-b-ovhynje4hu 2.1s ease-in-out infinite; }
    .is-charging .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 42px rgba(40,190,255,0.45));
    }
    @keyframes charge-breathe-b-ovhynje4hu {
      0%, 100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.45; }
      50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; }
    }
    @keyframes charge-ring-b-ovhynje4hu {
      0% { transform: translate(-50%, -50%) scale(0.7); border-color: rgba(80,230,255,0.7); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1.35); border-color: rgba(80,230,255,0); opacity: 0; }
    }
    @keyframes battery-fill-b-ovhynje4hu {
      0% { width: 12%; } 40% { width: 92%; } 60% { width: 92%; } 100% { width: 12%; }
    }

    /* Mowing v2 */
    .mow2-glow[b-ovhynje4hu] {
      position: absolute; left: 50%; bottom: 4%; width: 85%; height: 32%;
      transform: translateX(-50%); border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(70,210,90,0.28) 0%, rgba(40,150,60,0.1) 55%, transparent 78%);
      mix-blend-mode: screen; z-index: 1;
    }
    .mow2-sweep[b-ovhynje4hu], .mow2-sweep2[b-ovhynje4hu] {
      position: absolute; bottom: 11%; width: 22%; height: 6px; border-radius: 4px;
      background: linear-gradient(90deg, transparent 0%, rgba(120,255,130,0.7) 40%, rgba(180,255,160,0.9) 50%, rgba(120,255,130,0.7) 60%, transparent 100%);
      filter: blur(1.5px); z-index: 2; box-shadow: 0 0 10px rgba(100,240,120,0.5);
    }
    .mow2-sweep[b-ovhynje4hu] { left: 18%; }
    .mow2-sweep2[b-ovhynje4hu] {
      left: 62%; bottom: 13%; width: 18%; height: 5px;
      background: linear-gradient(90deg, transparent 0%, rgba(100,230,120,0.6) 40%, rgba(160,255,150,0.85) 50%, rgba(100,230,120,0.6) 60%, transparent 100%);
      filter: blur(1.2px);
    }
    .mow2-dot[b-ovhynje4hu] {
      position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #7ae06a; z-index: 2;
    }
    .mow2-dot.d1[b-ovhynje4hu] { left: 36%; bottom: 10%; animation-delay: 0s; }
    .mow2-dot.d2[b-ovhynje4hu] { left: 44%; bottom: 9%; animation-delay: 0.3s; }
    .mow2-dot.d3[b-ovhynje4hu] { left: 53%; bottom: 11%; animation-delay: 0.6s; }
    .mow2-dot.d4[b-ovhynje4hu] { left: 61%; bottom: 8%; animation-delay: 0.9s; }
    .mow2-dot.d5[b-ovhynje4hu] { left: 48%; bottom: 12%; animation-delay: 1.2s; }
    .is-mowing .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(70,190,80,0.25));
      animation: mow2-bounce-b-ovhynje4hu 2.4s ease-in-out infinite;
    }
    .is-mowing .mow2-glow[b-ovhynje4hu] { opacity: 1; animation: mow2-glow-b-ovhynje4hu 2.2s ease-in-out infinite; }
    .is-mowing .mow2-sweep[b-ovhynje4hu] { opacity: 1; animation: mow2-sweep-b-ovhynje4hu 2.0s ease-in-out infinite; }
    .is-mowing .mow2-sweep2[b-ovhynje4hu] { opacity: 1; animation: mow2-sweep2-b-ovhynje4hu 2.0s ease-in-out 1.0s infinite; }
    .is-mowing .mow2-dot[b-ovhynje4hu] { animation: mow2-dot-b-ovhynje4hu 1.8s ease-out infinite; }
    .is-mowing.is-lights .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(70,190,80,0.28)) drop-shadow(0 0 18px rgba(140,190,255,0.15));
    }
    @keyframes mow2-bounce-b-ovhynje4hu {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(1.5px); }
    }
    @keyframes mow2-glow-b-ovhynje4hu {
      0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(0.92); }
      50% { opacity: 0.95; transform: translateX(-50%) scaleX(1.06); }
    }
    @keyframes mow2-sweep-b-ovhynje4hu {
      0% { left: 16%; opacity: 0.3; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 62%; opacity: 0.3; }
    }
    @keyframes mow2-sweep2-b-ovhynje4hu {
      0% { left: 64%; opacity: 0.25; } 20% { opacity: 0.9; } 80% { opacity: 0.9; } 100% { left: 18%; opacity: 0.25; }
    }
    @keyframes mow2-dot-b-ovhynje4hu {
      0% { transform: translateY(0) scale(1); opacity: 0.7; }
      100% { transform: translateY(-28px) scale(0.4); opacity: 0; }
    }

    /* Sleep / docked */
    .sleep-aura[b-ovhynje4hu] {
      position: absolute; left: 50%; top: 52%; width: 90%; height: 65%;
      transform: translate(-50%, -50%); border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(140,160,255,0.32) 0%, rgba(100,120,230,0.12) 45%, transparent 72%);
      mix-blend-mode: screen; z-index: 1;
    }
    .sleep-eyes[b-ovhynje4hu] {
      position: absolute; left: 50%; bottom: 20%; width: 52%; height: 12%;
      transform: translateX(-50%); border-radius: 40%;
      background: radial-gradient(ellipse at center, rgba(150,180,255,0.4) 0%, rgba(120,150,255,0.15) 50%, transparent 75%);
      mix-blend-mode: screen; z-index: 2; filter: blur(5px);
    }
    .zzz[b-ovhynje4hu] {
      position: absolute; top: 3%; font-weight: 700;
      color: rgba(180, 200, 255, 0); z-index: 6;
      text-shadow: 0 0 14px rgba(150,175,255,0.75), 0 0 5px rgba(200,220,255,0.5);
      letter-spacing: 0.06em;
    }
    .zzz.z1[b-ovhynje4hu] { left: 56%; font-size: 1.5rem; animation-delay: 0s; animation-duration: 4.0s; }
    .zzz.z2[b-ovhynje4hu] { left: 64%; font-size: 1.15rem; animation-delay: 0.7s; animation-duration: 4.5s; }
    .zzz.z3[b-ovhynje4hu] { left: 60%; font-size: 0.95rem; animation-delay: 1.4s; animation-duration: 3.9s; }
    .zzz.z4[b-ovhynje4hu] { left: 70%; font-size: 1.35rem; animation-delay: 0.35s; animation-duration: 4.8s; }
    .zzz.z5[b-ovhynje4hu] { left: 53%; font-size: 1.05rem; animation-delay: 2.1s; animation-duration: 4.2s; }
    .zzz.z6[b-ovhynje4hu] { left: 67%; font-size: 0.85rem; animation-delay: 2.8s; animation-duration: 3.7s; }
    .zzz.z7[b-ovhynje4hu] { left: 58%; font-size: 1.25rem; animation-delay: 1.0s; animation-duration: 5.0s; }
    .zzz.z8[b-ovhynje4hu] { left: 72%; font-size: 0.9rem; animation-delay: 1.8s; animation-duration: 4.3s; }
    .is-docked .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.5)) drop-shadow(0 0 28px rgba(130,150,240,0.35));
      animation: sleep-breathe-b-ovhynje4hu 3.8s ease-in-out infinite;
    }
    .is-docked .sleep-aura[b-ovhynje4hu] { opacity: 1; animation: sleep-aura-b-ovhynje4hu 3.8s ease-in-out infinite; }
    .is-docked .sleep-eyes[b-ovhynje4hu] { opacity: 1; animation: sleep-eyes-b-ovhynje4hu 3.8s ease-in-out infinite; }
    .is-docked .zzz[b-ovhynje4hu] { animation: zzz-float-b-ovhynje4hu 4.2s ease-in-out infinite; }
    .is-docked #mower-base[b-ovhynje4hu] { filter: brightness(0.82) saturate(0.85); transition: filter 0.8s ease; }
    @keyframes sleep-breathe-b-ovhynje4hu {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(4px) scale(0.985); }
    }
    @keyframes sleep-aura-b-ovhynje4hu {
      0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.92); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    }
    @keyframes sleep-eyes-b-ovhynje4hu {
      0%, 100% { opacity: 0.35; transform: translateX(-50%) scaleY(0.85); }
      50% { opacity: 0.75; transform: translateX(-50%) scaleY(1.1); }
    }
    @keyframes zzz-float-b-ovhynje4hu {
      0% { transform: translate(0,0) scale(0.55) rotate(-12deg); opacity: 0; }
      8% { opacity: 0.95; color: rgba(195,215,255,1); }
      25% { transform: translate(8px,-14px) scale(0.85) rotate(4deg); }
      50% { transform: translate(-10px,-32px) scale(1.05) rotate(-6deg); opacity: 0.9; }
      75% { transform: translate(12px,-48px) scale(1.15) rotate(9deg); opacity: 0.55; }
      100% { transform: translate(-6px,-68px) scale(1.3) rotate(-4deg); opacity: 0; color: rgba(180,200,255,0); }
    }

    /* Error */
    .error-aura[b-ovhynje4hu] {
      position: absolute; left: 50%; top: 55%; width: 95%; height: 70%;
      transform: translate(-50%, -50%); border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255,40,30,0.35) 0%, rgba(200,20,10,0.12) 45%, transparent 70%);
      mix-blend-mode: screen; z-index: 1;
    }
    .error-icon[b-ovhynje4hu] {
      position: absolute; top: 2%; left: 50%; transform: translateX(-50%);
      width: 36px; height: 36px; z-index: 6; transition: opacity 0.3s;
    }
    .is-error .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 36px rgba(255,30,20,0.55)) !important;
      animation: error-shake-b-ovhynje4hu 0.4s linear infinite;
    }
    .is-error .error-aura[b-ovhynje4hu] { opacity: 1; animation: error-aura-pulse-b-ovhynje4hu 0.9s ease-in-out infinite; }
    .is-error .error-icon[b-ovhynje4hu] { opacity: 1; animation: error-icon-pulse-b-ovhynje4hu 0.85s ease-in-out infinite; }
    .is-error #red-group[b-ovhynje4hu], .is-error #red-glow[b-ovhynje4hu] {
      opacity: 1 !important; animation: error-stop-flash-b-ovhynje4hu 0.45s steps(1, end) infinite !important;
    }
    .is-error #red-front-group[b-ovhynje4hu], .is-error #red-front-glow[b-ovhynje4hu] {
      opacity: 1 !important; animation: error-front-flash-b-ovhynje4hu 0.7s steps(1, end) infinite !important;
    }
    @keyframes error-shake-b-ovhynje4hu {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-3px); } 40% { transform: translateX(3px); }
      60% { transform: translateX(-2px); } 80% { transform: translateX(2px); }
    }
    @keyframes error-aura-pulse-b-ovhynje4hu {
      0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
      50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    }
    @keyframes error-icon-pulse-b-ovhynje4hu {
      0%, 100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 4px rgba(255,50,30,0.6)); }
      50% { transform: translateX(-50%) scale(1.15); filter: drop-shadow(0 0 12px rgba(255,40,20,0.9)); }
    }
    @keyframes error-stop-flash-b-ovhynje4hu { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0.1; } }
    @keyframes error-front-flash-b-ovhynje4hu {
      0%, 15% { opacity: 1; } 16%, 30% { opacity: 0.1; }
      31%, 45% { opacity: 1; } 46%, 100% { opacity: 0.1; }
    }

    /* Low battery aura on stage */
    .is-lowbatt .mw-container[b-ovhynje4hu] {
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 28px rgba(255,60,30,0.35)) !important;
    }

    /* ── Commands ── */
    /* Mobile: 2 cols (Start|Pausa + In base). Desktop: 3 cols (Start, Pausa, In base). */
    .mw-cmds[b-ovhynje4hu] {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }
    .mw-cmd[b-ovhynje4hu] {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 14px 10px; border-radius: 14px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 0.82rem; font-weight: 700; color: var(--text2);
      transition: border-color 0.12s, background 0.12s, transform 0.1s, color 0.12s;
    }
    .mw-cmd.mw-cmd-desk[b-ovhynje4hu] { display: none; }
    .mw-cmd.mw-cmd-mob[b-ovhynje4hu] { display: flex; }
    @media (min-width: 520px) {
      .mw-cmds[b-ovhynje4hu] { grid-template-columns: repeat(3, 1fr); }
      .mw-cmd.mw-cmd-desk[b-ovhynje4hu] { display: flex; }
      .mw-cmd.mw-cmd-mob[b-ovhynje4hu] { display: none; }
    }
    .mw-cmd i[b-ovhynje4hu] { font-size: 1.25rem; color: var(--text3); }
    .mw-cmd:hover[b-ovhynje4hu] { border-color: var(--border2); color: var(--text); }
    .mw-cmd:active[b-ovhynje4hu] { transform: scale(0.97); }
    .mw-cmd:disabled[b-ovhynje4hu] { opacity: 0.35; cursor: not-allowed; }
    .mw-cmd.primary[b-ovhynje4hu] { background: var(--mow-soft); border-color: color-mix(in srgb, var(--mow) 35%, transparent); color: var(--mow-ink); }
    .mw-cmd.primary i[b-ovhynje4hu] { color: var(--mow); }
    .mw-cmd.warn[b-ovhynje4hu] { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: #FDE68A; }
    .mw-cmd.warn i[b-ovhynje4hu] { color: var(--warn); }
    .mw-cmd.charge[b-ovhynje4hu] { background: var(--charge-soft); border-color: color-mix(in srgb, var(--charge) 30%, transparent); color: var(--charge-ink); }
    .mw-cmd.charge i[b-ovhynje4hu] { color: var(--charge); }

    /* ── Cutting height ── */
    .mw-height-card[b-ovhynje4hu] {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
    }
    .mw-height-row[b-ovhynje4hu] {
      display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
    }
    .mw-height-head[b-ovhynje4hu] {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .mw-height-ico[b-ovhynje4hu] {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      background: var(--mow-soft);
      color: var(--mow);
      font-size: 1rem;
    }
    .mw-height-row .mw-title[b-ovhynje4hu] { font-weight: 750; font-size: 0.92rem; }
    .mw-height-val[b-ovhynje4hu] {
      font-family: var(--mono); font-weight: 800; font-size: 1.35rem; color: var(--mow-ink);
      font-variant-numeric: tabular-nums;
    }
    .mw-height-slider[b-ovhynje4hu] {
      -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
      border-radius: 999px; outline: none; cursor: pointer;
      background: linear-gradient(90deg, var(--mow) 0%, var(--mow) var(--hval, 50%), var(--surface2) var(--hval, 50%));
      border: 1px solid var(--border);
    }
    .mw-height-slider[b-ovhynje4hu]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
      background: var(--text); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    }
    .mw-height-hints[b-ovhynje4hu] {
      display: flex; justify-content: space-between; margin-top: 6px;
      font-size: 0.68rem; color: var(--text3); font-weight: 600;
    }

    /* ── Stats ── */
    .mw-stats[b-ovhynje4hu] {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }
    @media (min-width: 520px) { .mw-stats[b-ovhynje4hu] { grid-template-columns: repeat(3, 1fr); } }
    .mw-stat[b-ovhynje4hu] {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 12px 12px 11px;
      text-align: left;
      width: 100%;
      color: inherit;
      font: inherit;
    }
    .mw-stat .ico[b-ovhynje4hu] {
      width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
      background: var(--surface2); color: var(--mow); font-size: 0.9rem; margin-bottom: 8px;
    }
    .mw-stat .lbl[b-ovhynje4hu] { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); }
    .mw-stat .val[b-ovhynje4hu] { margin-top: 3px; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
    .mw-stat .val small[b-ovhynje4hu] { font-size: 0.75rem; font-weight: 600; color: var(--text3); }

    /* Uso lame cliccabile — hint soft */
    button.mw-stat.is-action[b-ovhynje4hu] {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: border-color 0.15s, background 0.15s, transform 0.1s;
      position: relative;
    }
    button.mw-stat.is-action:hover:not(:disabled)[b-ovhynje4hu] {
      border-color: color-mix(in srgb, var(--mow) 28%, var(--border));
      background: color-mix(in srgb, var(--mow-soft) 35%, var(--surface));
    }
    button.mw-stat.is-action:active:not(:disabled)[b-ovhynje4hu] { transform: scale(0.98); }
    button.mw-stat.is-action:disabled[b-ovhynje4hu] { opacity: 0.55; cursor: not-allowed; }
    .mw-stat-hint[b-ovhynje4hu] {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      font-size: 0.62rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--text3);
      opacity: 0.72;
    }
    .mw-stat-hint i[b-ovhynje4hu] { font-size: 0.7rem; opacity: 0.85; }

    /* Conferma reset lame */
    .mw-modal-backdrop[b-ovhynje4hu] {
      position: fixed; inset: 0; z-index: 40;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(3px);
    }
    .mw-modal[b-ovhynje4hu] {
      position: fixed; z-index: 41;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 360px);
      padding: 22px 20px 18px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--border2);
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
      text-align: center;
    }
    .mw-modal-ico[b-ovhynje4hu] {
      width: 48px; height: 48px; margin: 0 auto 12px;
      border-radius: 14px; display: grid; place-items: center;
      background: var(--mow-soft); color: var(--mow); font-size: 1.35rem;
    }
    .mw-modal h2[b-ovhynje4hu] {
      margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
    }
    .mw-modal p[b-ovhynje4hu] {
      margin: 0 0 8px; font-size: 0.88rem; color: var(--text2); line-height: 1.45; font-weight: 500;
    }
    .mw-modal-warn[b-ovhynje4hu] {
      font-size: 0.78rem !important; color: var(--text3) !important; font-weight: 600 !important;
    }
    .mw-modal-actions[b-ovhynje4hu] {
      display: flex; gap: 8px; margin-top: 16px;
    }
    .mw-modal-btn[b-ovhynje4hu] {
      flex: 1; padding: 12px 14px; border-radius: 12px;
      font-size: 0.9rem; font-weight: 750; cursor: pointer;
      border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
    }
    .mw-modal-btn:disabled[b-ovhynje4hu] { opacity: 0.5; cursor: not-allowed; }
    .mw-modal-btn.ghost:hover:not(:disabled)[b-ovhynje4hu] { color: var(--text); border-color: var(--border2); }
    .mw-modal-btn.danger[b-ovhynje4hu] {
      background: var(--danger-soft);
      border-color: color-mix(in srgb, var(--danger) 40%, transparent);
      color: #FCA5A5;
    }
    .mw-modal-btn.danger:hover:not(:disabled)[b-ovhynje4hu] { filter: brightness(1.06); }

    /* Banner errore — solo se presente, sotto hero e prima dei comandi */
    .mw-error[b-ovhynje4hu] {
      display: none;
      margin-bottom: 16px;
      border-radius: 14px;
      padding: 12px 14px;
      align-items: flex-start;
      gap: 12px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 22%, var(--surface)), var(--surface) 85%);
      border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 12%, transparent) inset,
                  0 8px 22px -12px color-mix(in srgb, var(--danger) 45%, transparent);
    }
    .mw-error.show[b-ovhynje4hu] { display: flex; }
    .mw-error .ico[b-ovhynje4hu] {
      width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
      display: grid; place-items: center;
      background: var(--danger-soft); color: var(--danger); font-size: 1rem;
      box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 35%, transparent);
    }
    .mw-error .
    .mw-error .lbl[b-ovhynje4hu] {
      font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.04em; color: #FCA5A5; margin-bottom: 4px;
    }
    .mw-error .code[b-ovhynje4hu] {
      font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
      color: var(--danger); letter-spacing: 0.04em; text-transform: uppercase;
      margin-bottom: 3px;
    }
    .mw-error .msg[b-ovhynje4hu] {
      font-size: 0.9rem; font-weight: 750; color: #FECACA; line-height: 1.35;
    }

    /* ── Feedback toast ── */
    .mw-feedback[b-ovhynje4hu] {
      min-height: 1.2em; margin: 4px 2px 0; font-size: 0.82rem;
      color: var(--text2); font-weight: 600;
    }

    
/* /Components/Pages/SensorHistoryPage.razor.rz.scp.css */
.sh-page[b-c3e8sy9umr] {
    --sh-open: #EAB308;
    --sh-open-soft: rgba(234, 179, 8, 0.18);
    --sh-open-ink: #FDE68A;
    --sh-closed: #94A3B8;
    --sh-closed-soft: rgba(148, 163, 184, 0.16);
    --sh-closed-ink: #CBD5E1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}

html[data-theme="light"] .sh-page[b-c3e8sy9umr] {
    --sh-open: #CA8A04;
    --sh-open-soft: #FEF9C3;
    --sh-open-ink: #A16207;
    --sh-closed: #64748B;
    --sh-closed-soft: #E2E8F0;
    --sh-closed-ink: #334155;
}

@media (max-width: 600px) {
    .app.sh-page[b-c3e8sy9umr] { max-width: 100%; margin: 0; width: 100%; }
}

.sh-page *[b-c3e8sy9umr], .sh-page *[b-c3e8sy9umr]::before, .sh-page *[b-c3e8sy9umr]::after { box-sizing: border-box; }

.sh-top[b-c3e8sy9umr] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 0;
}
.sh-back[b-c3e8sy9umr] {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text2); font-size: 1.45rem; flex-shrink: 0; cursor: pointer;
}
.sh-brand[b-c3e8sy9umr] { min-width: 0; flex: 1; }
.sh-kicker[b-c3e8sy9umr] {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text3);
}
.sh-brand h1[b-c3e8sy9umr] {
    margin: 2px 0 0; font-size: 1.22rem; font-weight: 750;
    letter-spacing: -0.03em; line-height: 1.2;
}

.sh-content[b-c3e8sy9umr] { padding: 14px 14px 40px; }

.sh-now[b-c3e8sy9umr] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
}
.sh-now-main[b-c3e8sy9umr] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sh-now-main i[b-c3e8sy9umr] { font-size: 1.35rem; color: var(--text3); }
.sh-now-name[b-c3e8sy9umr] { font-weight: 750; letter-spacing: -0.02em; }
.sh-now-ago[b-c3e8sy9umr] { margin-top: 2px; font-size: 0.78rem; color: var(--text3); font-weight: 500; }
.sh-now-state[b-c3e8sy9umr] {
    font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--border2);
}
.sh-now-state.st-open[b-c3e8sy9umr] { color: var(--sh-open-ink); background: var(--sh-open-soft); border-color: color-mix(in srgb, var(--sh-open) 40%, transparent); }
.sh-now-state.st-closed[b-c3e8sy9umr] { color: var(--sh-closed-ink); background: var(--sh-closed-soft); }

.sh-day-nav[b-c3e8sy9umr] {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 16px;
}
.sh-nav-arrow[b-c3e8sy9umr] {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface2); color: var(--text);
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; padding: 0;
}
.sh-nav-arrow:disabled[b-c3e8sy9umr] { opacity: 0.35; cursor: default; }
.sh-day-label[b-c3e8sy9umr] {
    flex: 1; min-width: 0;
    border: 1px solid var(--border); background: var(--bg);
    border-radius: 10px; padding: 6px 10px; text-align: center;
}
.sh-day-main[b-c3e8sy9umr] {
    font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sh-day-sub[b-c3e8sy9umr] { margin-top: 1px; font-size: 11px; color: var(--text3); font-weight: 500; }
.sh-today-pill[b-c3e8sy9umr] {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px;
    background: var(--text); color: var(--bg);
}

.sh-block[b-c3e8sy9umr] { margin-bottom: 20px; }
.sh-block-head[b-c3e8sy9umr] {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text3); margin: 0 0 10px 2px;
}

.sh-bar[b-c3e8sy9umr] {
    position: relative;
    height: 28px;
    border-radius: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    overflow: hidden;
}
.sh-bar-empty[b-c3e8sy9umr] {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 0.75rem; color: var(--text3); font-weight: 600;
}
.sh-seg[b-c3e8sy9umr] {
    position: absolute; top: 0; bottom: 0;
}
.sh-seg.st-open[b-c3e8sy9umr] { background: var(--sh-open); }
.sh-seg.st-closed[b-c3e8sy9umr] { background: color-mix(in srgb, var(--sh-closed) 72%, var(--surface2)); }
.sh-seg.st-unknown[b-c3e8sy9umr] { background: repeating-linear-gradient(135deg, var(--surface2), var(--surface2) 5px, var(--border) 5px, var(--border) 6px); }
.sh-now-line[b-c3e8sy9umr] {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: var(--text); opacity: 0.75; pointer-events: none;
}

.sh-hours[b-c3e8sy9umr] {
    display: flex; justify-content: space-between;
    margin-top: 6px; padding: 0 1px;
    font-size: 10px; color: var(--text3); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sh-empty[b-c3e8sy9umr] { margin: 8px 2px; font-size: 0.85rem; color: var(--text3); font-weight: 550; }

.sh-activity[b-c3e8sy9umr] { list-style: none; margin: 0; padding: 0; }
.sh-act[b-c3e8sy9umr] {
    display: grid;
    grid-template-columns: 5.4rem 40px 1fr;
    align-items: stretch;
    column-gap: 12px;
    min-height: 76px;
    padding: 0;
}
.sh-act-time[b-c3e8sy9umr] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.82rem; color: var(--text3); font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-align: left;
    display: flex;
    align-items: center;
}
.sh-act-rail[b-c3e8sy9umr] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sh-act-rail[b-c3e8sy9umr]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
    border: none;
}
.sh-act:first-child .sh-act-rail[b-c3e8sy9umr]::before { top: 50%; }
.sh-act:last-child .sh-act-rail[b-c3e8sy9umr]::before { bottom: 50%; }
.sh-act:only-child .sh-act-rail[b-c3e8sy9umr]::before { display: none; }
.sh-act-icon[b-c3e8sy9umr] {
    position: relative;
    z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.12rem;
    background: var(--surface2);
    color: var(--text3);
    box-shadow: 0 0 0 3px var(--bg);
}
.sh-act-mask[b-c3e8sy9umr] {
    width: 58%;
    height: 58%;
    background-color: currentColor;
    -webkit-mask: var(--sh-act-ico) center / contain no-repeat;
    mask: var(--sh-act-ico) center / contain no-repeat;
}
.sh-act-icon.st-open[b-c3e8sy9umr] {
    background: var(--sh-open);
    color: #1a1404;
}
.sh-act-icon.st-closed[b-c3e8sy9umr] {
    background: var(--sh-closed);
    color: #0f1419;
}
html[data-theme="light"] .sh-act-icon.st-open[b-c3e8sy9umr] { color: #422006; }
html[data-theme="light"] .sh-act-icon.st-closed[b-c3e8sy9umr] { color: #fff; }
.sh-act-label[b-c3e8sy9umr] {
    font-weight: 700;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.sh-act:last-child .sh-act-label[b-c3e8sy9umr] { border-bottom: 0; }
/* /Components/Pages/ShuttersPage.razor.rz.scp.css */
/* Tapparelle — idea 1 pills (stile clima), dark-first */

.sh-page[b-o4nis4bztm] {
    --sh: #A5B4FC;
    --sh-soft: rgba(99, 102, 241, 0.15);
    --sh-ink: #C7D2FE;
    --sh-deep: #6366F1;
    --sh-ok: #4ADE80;
    --sh-ok-soft: rgba(74, 222, 128, 0.12);
    --sh-warn: #FBBF24;
    --sh-warn-soft: rgba(251, 191, 36, 0.12);
    --sh-info: #60A5FA;
    --sh-info-soft: rgba(96, 165, 250, 0.12);
    --sh-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    min-height: 100svh;
}

html[data-theme="light"] .sh-page[b-o4nis4bztm] {
    --sh: #4F46E5;
    --sh-soft: #E0E7FF;
    --sh-ink: #3730A3;
    --sh-deep: #4F46E5;
    --sh-ok: #15803D;
    --sh-ok-soft: #DCFCE7;
    --sh-warn: #CA8A04;
    --sh-warn-soft: #FEF9C3;
    --sh-info: #2563EB;
    --sh-info-soft: #DBEAFE;
}

@media (max-width: 600px) {
    .app.sh-page[b-o4nis4bztm] {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
}

.sh-page *[b-o4nis4bztm],
.sh-page *[b-o4nis4bztm]::before,
.sh-page *[b-o4nis4bztm]::after { box-sizing: border-box; }

.sh-top[b-o4nis4bztm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 0;
}

.sh-back[b-o4nis4bztm] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.45rem;
    flex-shrink: 0;
    cursor: pointer;
}

.sh-brand[b-o4nis4bztm] { min-width: 0; flex: 1; }
.sh-brand h1[b-o4nis4bztm] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sh-brand h1 i[b-o4nis4bztm] { color: var(--sh); font-size: 1.15rem; }
.sh-meta[b-o4nis4bztm] {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--text3);
    font-weight: 500;
}

.sh-house-close[b-o4nis4bztm] {
    --close-acc: #E8A317;
    --close-soft: rgba(232, 163, 23, 0.18);
    --close-ink: #FDE68A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--close-acc) 45%, var(--border));
    background: var(--close-soft);
    color: var(--close-ink);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}
html[data-theme="light"] .sh-house-close[b-o4nis4bztm] {
    --close-acc: #D97706;
    --close-soft: #FEF3C7;
    --close-ink: #B45309;
}
.sh-house-close i[b-o4nis4bztm] { font-size: 1.05rem; color: var(--close-acc); }
.sh-house-close:disabled[b-o4nis4bztm] { opacity: 0.4; cursor: not-allowed; }
.sh-house-close:active:not(:disabled)[b-o4nis4bztm] { transform: scale(0.98); }

.sh-house-close-desk[b-o4nis4bztm] {
    display: none;
    flex-shrink: 0;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.84rem;
    margin-left: auto;
}

.sh-house-close-mob[b-o4nis4bztm] {
    display: flex;
    width: calc(100% - 28px);
    margin: 10px 14px 0;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
}

@media (min-width: 721px) {
    .sh-house-close-desk[b-o4nis4bztm] { display: inline-flex; }
    .sh-house-close-mob[b-o4nis4bztm] { display: none; }
}

.sh-content[b-o4nis4bztm] { padding: 14px 14px 40px; }

.sh-section[b-o4nis4bztm] { margin-bottom: 18px; }

.sh-section-label[b-o4nis4bztm] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    margin: 0 0 10px 2px;
}

/* Global actions — compact horizontal */
.sh-global[b-o4nis4bztm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sh-global-btn[b-o4nis4bztm] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.sh-global-btn:active:not(:disabled)[b-o4nis4bztm] { transform: scale(0.98); }
.sh-global-btn:disabled[b-o4nis4bztm] { opacity: 0.45; cursor: not-allowed; }

.sh-global-ico[b-o4nis4bztm] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sh-global-btn.open .sh-global-ico[b-o4nis4bztm] { background: var(--sh-ok-soft); color: var(--sh-ok); }
.sh-global-btn.close .sh-global-ico[b-o4nis4bztm] { background: var(--sh-soft); color: var(--sh); }

.sh-global-txt[b-o4nis4bztm] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-global-action[b-o4nis4bztm] { font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.sh-global-sub[b-o4nis4bztm] { font-size: 0.72rem; color: var(--text3); font-weight: 500; }

/* Floor pills */
.sh-tabs[b-o4nis4bztm] {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 12px;
    padding: 2px 0;
}
.sh-tabs[b-o4nis4bztm]::-webkit-scrollbar { display: none; }

.sh-tab[b-o4nis4bztm] {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text2);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
}
.sh-tab.active[b-o4nis4bztm] {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}
.sh-tab-cnt[b-o4nis4bztm] {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.7;
}

.sh-floor-actions[b-o4nis4bztm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 4px;
}

.sh-floor-btn[b-o4nis4bztm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 14px 10px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 0;
}
.sh-floor-btn i[b-o4nis4bztm] { font-size: 0.95rem; flex-shrink: 0; }
.sh-floor-btn:disabled[b-o4nis4bztm] { opacity: 0.4; cursor: not-allowed; }
.sh-floor-btn:active:not(:disabled)[b-o4nis4bztm] { transform: scale(0.98); }

.sh-floor-btn.close[b-o4nis4bztm] {
    border: 1px solid color-mix(in srgb, var(--sh) 38%, var(--border));
    background: var(--sh-soft);
    color: var(--sh-ink);
}
.sh-floor-btn.open[b-o4nis4bztm] {
    border: 1px solid var(--border2);
    background: var(--surface);
    color: var(--text2);
}

/* Zone list — compact selector rows */
.sh-zone-list[b-o4nis4bztm] {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sh-zone-row[b-o4nis4bztm] {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sh-zone-row:last-child[b-o4nis4bztm] { border-bottom: none; }
.sh-zone-row:hover[b-o4nis4bztm] { background: color-mix(in srgb, var(--surface2) 50%, transparent); }
.sh-zone-row.active[b-o4nis4bztm] {
    background: color-mix(in srgb, var(--sh) 12%, var(--surface));
    box-shadow: inset 3px 0 0 var(--sh-deep);
}

.sh-zone-ico[b-o4nis4bztm] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--sh-soft);
    color: var(--sh);
    font-size: 1.15rem;
}

.sh-zone-main[b-o4nis4bztm] { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-zone-name[b-o4nis4bztm] { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }
.sh-zone-st[b-o4nis4bztm] { font-size: 0.78rem; color: var(--text3); font-weight: 500; }

.sh-zone-badge[b-o4nis4bztm] {
    font-size: 0.68rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.sh-zone-badge.ok[b-o4nis4bztm] { color: var(--sh-ok); background: var(--sh-ok-soft); border-color: color-mix(in srgb, var(--sh-ok) 25%, transparent); }
.sh-zone-badge.mix[b-o4nis4bztm] { color: var(--sh-info); background: var(--sh-info-soft); border-color: color-mix(in srgb, var(--sh-info) 25%, transparent); }
.sh-zone-badge.closed[b-o4nis4bztm] { color: var(--sh-ink); background: var(--sh-soft); border-color: color-mix(in srgb, var(--sh) 28%, transparent); }
.sh-zone-badge.move[b-o4nis4bztm] { color: var(--sh-warn); background: var(--sh-warn-soft); border-color: color-mix(in srgb, var(--sh-warn) 28%, transparent); }

.sh-zone-chev[b-o4nis4bztm] { color: var(--text3); font-size: 1.1rem; transition: transform 0.15s; }
.sh-zone-row.active .sh-zone-chev[b-o4nis4bztm] { color: var(--sh); transform: rotate(90deg); }

/* Detail panel — visually separate from zone list (gestione vs selezione) */
.sh-detail-wrap[b-o4nis4bztm] {
    margin-top: 18px;
    scroll-margin-top: 12px;
}

.sh-detail-label[b-o4nis4bztm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px 4px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sh-ink);
}

.sh-detail-label i[b-o4nis4bztm] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.sh-detail[b-o4nis4bztm] {
    border: 1px solid color-mix(in srgb, var(--sh) 35%, var(--border));
    border-radius: 18px;
    background: var(--surface);
    box-shadow:
        var(--shadow-sm),
        0 0 0 1px color-mix(in srgb, var(--sh) 8%, transparent);
    overflow: hidden;
}

.sh-detail-head[b-o4nis4bztm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--sh) 22%, var(--border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--sh) 16%, var(--surface)) 0%,
            color-mix(in srgb, var(--surface2) 70%, var(--surface)) 100%
        );
}

.sh-detail-head-text[b-o4nis4bztm] {
    min-width: 0;
}

.sh-detail-head h2[b-o4nis4bztm] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--text);
}

.sh-detail-path[b-o4nis4bztm] {
    font-size: 0.78rem;
    color: var(--text2);
    font-weight: 550;
    margin-top: 3px;
}

.sh-detail-close[b-o4nis4bztm] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--text2);
    font-size: 1.05rem;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.sh-detail-close:hover[b-o4nis4bztm] {
    color: var(--text);
    border-color: color-mix(in srgb, var(--sh) 40%, var(--border2));
    background: color-mix(in srgb, var(--sh) 10%, var(--bg));
}

/* Cover card */
.sh-cover[b-o4nis4bztm] {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.sh-cover:last-child[b-o4nis4bztm] { border-bottom: none; }

@media (min-width: 520px) {
    .sh-cover[b-o4nis4bztm] { grid-template-columns: 88px 1fr; }
}

.sh-viz[b-o4nis4bztm] {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-width: 88px;
    border-radius: 10px;
    border: 2px solid color-mix(in srgb, var(--border2) 80%, #64748b);
    background: linear-gradient(180deg, #1e3a5f 0%, #0c1929 100%);
    position: relative;
    overflow: hidden;
    justify-self: center;
}
html[data-theme="light"] .sh-viz[b-o4nis4bztm] {
    background: linear-gradient(180deg, #bfdbfe 0%, #93c5fd 100%);
}

.sh-viz-slats[b-o4nis4bztm] {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--closed, 30%);
    z-index: 1;
    background: repeating-linear-gradient(180deg, #3f3f46 0 5px, #27272a 5px 6px, #52525b 6px 7px);
    border-bottom: 2px solid #71717a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
    transition: height 0.35s ease;
}
.sh-cover.is-moving .sh-viz-slats[b-o4nis4bztm] {
    animation: sh-slat-pulse-b-o4nis4bztm 1.2s ease-in-out infinite;
}
@keyframes sh-slat-pulse-b-o4nis4bztm {
    50% { filter: brightness(1.18); }
}

.sh-viz-box[b-o4nis4bztm] {
    position: absolute;
    bottom: 10%;
    left: 18%;
    right: 18%;
    height: 22%;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, #0f172a 70%, #334155);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0.7;
}

.sh-cover-main[b-o4nis4bztm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sh-cover-top[b-o4nis4bztm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.sh-cover-name[b-o4nis4bztm] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.sh-cover-room[b-o4nis4bztm] {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: var(--text3);
    font-family: var(--sh-mono);
    word-break: break-all;
}

.sh-exp-tag[b-o4nis4bztm] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

.sh-badge[b-o4nis4bztm] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.sh-badge.open[b-o4nis4bztm] { color: var(--sh-ok); background: var(--sh-ok-soft); border-color: color-mix(in srgb, var(--sh-ok) 25%, transparent); }
.sh-badge.closed[b-o4nis4bztm] { color: var(--sh-ink); background: var(--sh-soft); border-color: color-mix(in srgb, var(--sh) 28%, transparent); }
.sh-badge.moving[b-o4nis4bztm] { color: var(--sh-warn); background: var(--sh-warn-soft); border-color: color-mix(in srgb, var(--sh-warn) 28%, transparent); }
.sh-badge.partial[b-o4nis4bztm] { color: var(--sh-info); background: var(--sh-info-soft); border-color: color-mix(in srgb, var(--sh-info) 28%, transparent); }

.sh-pos-row[b-o4nis4bztm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.sh-pos-value[b-o4nis4bztm] {
    font-family: var(--sh-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sh-ink);
}
.sh-pos-value small[b-o4nis4bztm] {
    font-size: 0.75rem;
    color: var(--text3);
    margin-left: 2px;
}
.sh-pos-hint[b-o4nis4bztm] {
    font-size: 0.72rem;
    color: var(--text3);
    text-align: right;
    max-width: 55%;
    line-height: 1.25;
}
.sh-cover.is-moving .sh-pos-hint[b-o4nis4bztm] { color: var(--sh-warn); }

.sh-presets[b-o4nis4bztm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sh-chip[b-o4nis4bztm] {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--text2);
    cursor: pointer;
    font-family: inherit;
}
.sh-chip.active[b-o4nis4bztm] {
    background: var(--sh-soft);
    border-color: color-mix(in srgb, var(--sh) 45%, transparent);
    color: var(--sh-ink);
}
.sh-chip:disabled[b-o4nis4bztm] { opacity: 0.4; cursor: not-allowed; }

.sh-slider-label[b-o4nis4bztm] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text3);
    margin-bottom: 6px;
}

.sh-slider[b-o4nis4bztm] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    outline: none;
    border: 1px solid var(--border);
    background: linear-gradient(
        90deg,
        var(--sh-deep) 0%,
        var(--sh-deep) var(--fill, 50%),
        var(--surface2) var(--fill, 50%),
        var(--surface2) 100%
    );
    cursor: pointer;
}
.sh-slider[b-o4nis4bztm]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sh-ink);
    border: 2px solid #312e81;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.sh-slider:disabled[b-o4nis4bztm] { opacity: 0.45; cursor: not-allowed; }

.sh-tilt-block[b-o4nis4bztm] {
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}

.sh-cmds[b-o4nis4bztm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sh-cmd[b-o4nis4bztm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}
.sh-cmd.open[b-o4nis4bztm] {
    background: color-mix(in srgb, var(--sh-ok) 12%, var(--bg));
    border-color: color-mix(in srgb, var(--sh-ok) 30%, var(--border));
    color: var(--sh-ok);
}
.sh-cmd.close[b-o4nis4bztm] {
    background: var(--sh-soft);
    border-color: color-mix(in srgb, var(--sh) 35%, var(--border));
    color: var(--sh-ink);
}
.sh-cmd.stop[b-o4nis4bztm] {
    grid-column: 1 / -1;
    background: color-mix(in srgb, #F87171 12%, var(--bg));
    border-color: color-mix(in srgb, #F87171 30%, var(--border));
    color: #FCA5A5;
}
.sh-cmd:disabled[b-o4nis4bztm] { opacity: 0.4; cursor: not-allowed; }

.sh-pick-hint[b-o4nis4bztm] {
    margin-top: 14px;
    padding: 28px 18px;
    text-align: center;
    color: var(--text3);
    font-size: 0.9rem;
    line-height: 1.45;
}
.sh-pick-hint i[b-o4nis4bztm] {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--sh);
    opacity: 0.7;
}

.sh-empty[b-o4nis4bztm] {
    padding: 32px 18px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text2);
}
.sh-empty i[b-o4nis4bztm] {
    font-size: 1.8rem;
    color: var(--sh);
    display: block;
    margin-bottom: 10px;
}
.sh-empty-sub[b-o4nis4bztm] {
    font-size: 0.85rem;
    color: var(--text3);
    margin-top: 8px;
}
.sh-empty code[b-o4nis4bztm] {
    font-family: var(--sh-mono);
    font-size: 0.85em;
    background: var(--surface2);
    padding: 1px 5px;
    border-radius: 4px;
}

.sh-feedback[b-o4nis4bztm] {
    margin: 8px 2px 0;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--sh-ink);
}

.sh-modal-bg[b-o4nis4bztm] {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px);
}
.sh-modal[b-o4nis4bztm] {
    position: fixed; z-index: 41; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 340px);
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: var(--surface); border: 1px solid var(--border2);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    text-align: center;
}
.sh-modal-ico[b-o4nis4bztm] {
    width: 48px; height: 48px; margin: 0 auto 12px;
    border-radius: 14px; display: grid; place-items: center;
    font-size: 1.35rem;
}
.sh-modal-ico.close[b-o4nis4bztm] { background: var(--sh-soft); color: var(--sh); }
.sh-modal-ico.open[b-o4nis4bztm] { background: var(--sh-ok-soft); color: var(--sh-ok); }
.sh-modal h2[b-o4nis4bztm] { margin: 0 0 8px; font-size: 1.1rem; font-weight: 800; }
.sh-modal p[b-o4nis4bztm] { margin: 0; font-size: 0.88rem; color: var(--text2); line-height: 1.45; font-weight: 500; }
.sh-modal-actions[b-o4nis4bztm] { display: flex; gap: 8px; margin-top: 16px; }
.sh-modal-btn[b-o4nis4bztm] {
    flex: 1; padding: 12px 14px; border-radius: 12px;
    font-size: 0.9rem; font-weight: 750; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
}
.sh-modal-btn.go[b-o4nis4bztm] {
    border-color: color-mix(in srgb, var(--sh) 40%, var(--border));
    background: var(--sh-soft); color: var(--sh-ink);
}
.sh-modal-btn.ok[b-o4nis4bztm] {
    border-color: color-mix(in srgb, var(--sh-ok) 35%, var(--border));
    background: var(--sh-ok-soft); color: var(--sh-ok);
}
.sh-modal-btn:disabled[b-o4nis4bztm] { opacity: 0.45; cursor: not-allowed; }
/* /Components/Pages/StatisticsPage.razor.rz.scp.css */
/* Statistics page — static mock layout (mobile-first) */
.st-page[b-wob5b2jhxm] {
    --st-heat: #E07A45;
    --st-cool: #60A5FA;
    --st-ok: #4ADE80;
    --st-warn: #FBBF24;
    --st-bad: #F87171;
    --st-cop: #FBBF24;
    --st-acs: #2DD4BF;
    --st-outdoor: #94A3B8;
    --st-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 14px 24px;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Same width with/without vertical scrollbar (tab switch, zone chart open) */
    scrollbar-gutter: stable;
    background: var(--bg);
    color: var(--text);
}

html[data-theme="light"] .st-page[b-wob5b2jhxm] {
    --st-heat: #C84B1A;
    --st-cool: #1A6BC8;
    --st-ok: #15803D;
    --st-warn: #B45309;
    --st-bad: #B91C1C;
    --st-cop: #B45309;
    --st-acs: #0D9488;
    --st-outdoor: #64748B;
}

/* Full bleed only on phone — desktop keeps global .app max-width + center */
@media (max-width: 600px) {
    .app.st-page[b-wob5b2jhxm] {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
}

.st-page *[b-wob5b2jhxm],
.st-page *[b-wob5b2jhxm]::before,
.st-page *[b-wob5b2jhxm]::after {
    box-sizing: border-box;
}

.st-header[b-wob5b2jhxm] {
    padding: 10px 0 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
}

.st-detail-header[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-back-btn[b-wob5b2jhxm] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 1.45rem;
    color: var(--text2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
}

.st-header-text[b-wob5b2jhxm] { flex: 1; min-width: 0; cursor: pointer; }

.st-title[b-wob5b2jhxm] {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-title i[b-wob5b2jhxm] { opacity: 0.9; color: #A78BFA; font-size: 1.1rem; }

.st-sub[b-wob5b2jhxm] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text3);
    margin-top: 3px;
    font-family: var(--st-mono);
}

.st-mock-badge[b-wob5b2jhxm] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--warn-soft);
    color: #92400E;
    border: 1px solid rgba(146, 64, 14, 0.2);
    flex-shrink: 0;
}

/* Period */
.st-period-box[b-wob5b2jhxm] {
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
}

/* Una riga scrollabile (swipe) — altezza fissa */
.st-group-row[b-wob5b2jhxm] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--surface2);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--border);
    touch-action: pan-x;
}

.st-group-row[b-wob5b2jhxm]::-webkit-scrollbar {
    display: none;
}

.st-group-btn[b-wob5b2jhxm] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    padding: 7px 11px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.1;
    font-family: inherit;
    white-space: nowrap;
}

.st-group-btn.active[b-wob5b2jhxm] {
    background: var(--text);
    color: var(--bg); /* non #fff: in dark --text è chiaro → label scura leggibile */
}

.st-period-nav[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    min-height: 36px;
}

.st-nav-arrow[b-wob5b2jhxm] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}

.st-nav-arrow:disabled[b-wob5b2jhxm] {
    opacity: 0.35;
    cursor: default;
}

.st-period-label[b-wob5b2jhxm] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 10px;
    padding: 6px 10px;
    text-align: center;
}

.st-period-main[b-wob5b2jhxm] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

/* Solo badge: indigo (distinto da verde salute / arancio ACS) */
.st-today-pill[b-wob5b2jhxm] {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #A5B4FC;
    background: color-mix(in srgb, #818CF8 22%, var(--surface));
    border: 1px solid rgba(165, 180, 252, 0.4);
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.35;
}

html[data-theme="light"] .st-today-pill[b-wob5b2jhxm] {
    color: #4338CA;
    background: var(--info-soft);
    border-color: rgba(79, 70, 229, 0.28);
}

.st-period-sub[b-wob5b2jhxm] {
    font-size: 10px;
    color: var(--text3);
    margin-top: 1px;
    font-family: var(--st-mono);
}

.st-custom-range[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: end;
    margin-top: 8px;
}

.st-custom-field label[b-wob5b2jhxm] {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--text3);
    margin-bottom: 3px;
}

.st-custom-field input[b-wob5b2jhxm] {
    width: 100%;
    border: 1px solid var(--border2);
    background: var(--bg);
    border-radius: 8px;
    padding: 7px 8px;
    font-family: var(--st-mono);
    font-size: 12px;
    color: var(--text);
}

.st-custom-sep[b-wob5b2jhxm] {
    padding-bottom: 8px;
    color: var(--text3);
    font-size: 12px;
    text-align: center;
}

/* Tabs */
.st-scope-tabs[b-wob5b2jhxm] {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.st-scope-tabs[b-wob5b2jhxm]::-webkit-scrollbar { display: none; }

.st-scope-tab[b-wob5b2jhxm] {
    flex-shrink: 0;
    border: 1px solid transparent;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}

.st-scope-tab.active[b-wob5b2jhxm] {
    background: var(--surface);
    border-color: var(--border2);
    color: var(--text);
    font-weight: 600;
}

/* Sections */
.st-section[b-wob5b2jhxm] { margin-top: 12px; }

.st-section-head[b-wob5b2jhxm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 8px;
}

.st-section-title[b-wob5b2jhxm] {
    font-size: 10px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.45px;
    font-weight: 500;
}

.st-section-meta[b-wob5b2jhxm] {
    font-size: 10px;
    color: var(--text3);
    font-family: var(--st-mono);
}

.st-card[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}

.st-chart-card[b-wob5b2jhxm] { padding: 10px 10px 6px; }

.st-chart-legend[b-wob5b2jhxm] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.st-leg[b-wob5b2jhxm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text2);
    font-weight: 500;
}

.st-leg-dot[b-wob5b2jhxm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.st-chart-wrap[b-wob5b2jhxm] {
    position: relative;
    height: 150px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.st-chart-wrap.sm[b-wob5b2jhxm] { height: 110px; }

.st-chart-wrap canvas[b-wob5b2jhxm] {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

/* KPI comfort — struttura uniforme: label in alto, valore sotto */
.st-kpi-grid[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    align-items: stretch;
}

.st-kpi[b-wob5b2jhxm] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 5px 8px;
    text-align: center;
    min-width: 0;
    min-height: 62px;
}

.st-kpi-lbl[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: 9px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    flex-shrink: 0;
}

.st-kpi-lbl i[b-wob5b2jhxm] {
    font-size: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.st-kpi-lbl span[b-wob5b2jhxm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Area valore: stessa “fascia” verticale sulle 3 card */
.st-kpi-body[b-wob5b2jhxm] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
}

.st-kpi-val[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    line-height: 1.1;
}

.st-kpi-val .u[b-wob5b2jhxm] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text2);
}

/* Esterna: min | max — stessi pt degli altri valori, senza label (colore = significato) */
.st-kpi-split-row[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

.st-kpi-split-cell[b-wob5b2jhxm] {
    flex: 1;
    min-width: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-kpi-split-sep[b-wob5b2jhxm] {
    width: 1px;
    height: 18px;
    background: var(--border, rgba(0,0,0,0.1));
    flex-shrink: 0;
    align-self: center;
}

/* Esterna: font leggermente più piccolo (due valori affiancati) */
.st-kpi-split-cell .st-kpi-val[b-wob5b2jhxm] {
    font-size: 15px;
}
.st-kpi-split-cell .st-kpi-val .u[b-wob5b2jhxm] {
    font-size: 11px;
}

/* Colori classici meteo: min = freddo/blu · max = caldo/rosso */
.st-kpi-split-cell.t-min .st-kpi-val[b-wob5b2jhxm] {
    color: #93C5FD; /* min: blu chiaro in dark */
}
.st-kpi-split-cell.t-min .st-kpi-val .u[b-wob5b2jhxm] {
    color: #BFDBFE;
}

.st-kpi-split-cell.t-max .st-kpi-val[b-wob5b2jhxm] {
    color: #FDBA74; /* max: arancio chiaro in dark */
}
.st-kpi-split-cell.t-max .st-kpi-val .u[b-wob5b2jhxm] {
    color: #FED7AA;
}

html[data-theme="light"] .st-kpi-split-cell.t-min .st-kpi-val[b-wob5b2jhxm] { color: #1D4ED8; }
html[data-theme="light"] .st-kpi-split-cell.t-min .st-kpi-val .u[b-wob5b2jhxm] { color: #3B82F6; }
html[data-theme="light"] .st-kpi-split-cell.t-max .st-kpi-val[b-wob5b2jhxm] { color: #C2410C; }
html[data-theme="light"] .st-kpi-split-cell.t-max .st-kpi-val .u[b-wob5b2jhxm] { color: #EA580C; }

.st-ico-temp[b-wob5b2jhxm] { color: var(--st-heat); }
.st-ico-house[b-wob5b2jhxm] { color: var(--st-ok); } /* media casa / T zone: verde */
.st-ico-hum[b-wob5b2jhxm] { color: var(--st-cool); }
.st-ico-out[b-wob5b2jhxm] { color: #CBD5E1; } /* esterna: chiara in dark */

html[data-theme="light"] .st-ico-out[b-wob5b2jhxm] { color: var(--st-outdoor); }

/* Valore temp esterna (se presente come mono-valore) */
.st-kpi .st-ico-out + .st-kpi-body .st-kpi-val[b-wob5b2jhxm],
.st-kpi-out .st-kpi-val[b-wob5b2jhxm] {
    color: #E2E8F0;
}

html[data-theme="light"] .st-kpi .st-ico-out + .st-kpi-body .st-kpi-val[b-wob5b2jhxm],
html[data-theme="light"] .st-kpi-out .st-kpi-val[b-wob5b2jhxm] {
    color: inherit;
}

/* Floors */
.st-floor-list[b-wob5b2jhxm] { display: flex; flex-direction: column; gap: 6px; }

.st-floor-row[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.st-floor-name[b-wob5b2jhxm] { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-floor-metric[b-wob5b2jhxm] { font-family: var(--st-mono); font-size: 15px; font-weight: 600; white-space: nowrap; }
.st-floor-metric .u[b-wob5b2jhxm] { font-size: 11px; font-weight: 400; color: var(--text2); }
.st-floor-metric.st-floor-temp[b-wob5b2jhxm] { color: var(--st-ok); }
.st-floor-metric.st-floor-temp .u[b-wob5b2jhxm] { color: #16A34A; opacity: 0.85; }

/* Zones — by floor, chart expander under selected row */
.st-zone-col-head[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem 3.25rem 3.25rem;
    gap: 6px;
    padding: 0 10px 2px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.35px;
    margin-bottom: 4px;
    width: 100%;
    min-width: 0;
}

.st-zone-col-head span:not(:first-child)[b-wob5b2jhxm] { text-align: right; }

.st-zone-floors[b-wob5b2jhxm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.st-zone-floor-title[b-wob5b2jhxm] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text3);
    margin-bottom: 6px;
    padding: 0 2px;
}

.st-zone-floor-rows[b-wob5b2jhxm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.st-zone-row[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem 3.25rem 3.25rem;
    gap: 6px;
    align-items: center;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.st-zone-row.selected[b-wob5b2jhxm] {
    background: var(--heat-bg);
    border-color: rgba(200, 75, 26, 0.35);
    box-shadow: inset 3px 0 0 var(--st-heat);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.st-zone-name[b-wob5b2jhxm] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.st-zone-ico[b-wob5b2jhxm] {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}

.st-zone-num[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
}

.st-zone-num.muted[b-wob5b2jhxm] { color: var(--text2); font-weight: 500; }
.st-zone-num .u[b-wob5b2jhxm] { font-size: 10px; font-weight: 400; color: var(--text2); }

.st-zone-chart-slot[b-wob5b2jhxm] {
    margin-top: -6px;
    margin-bottom: 2px;
    padding: 8px 10px 10px;
    background: var(--surface);
    border: 1px solid rgba(200, 75, 26, 0.35);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: inset 3px 0 0 var(--st-heat);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.st-zone-chart-legend[b-wob5b2jhxm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--text2);
}

.st-zleg[b-wob5b2jhxm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.st-zleg .sw[b-wob5b2jhxm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.st-zleg .sw.temp[b-wob5b2jhxm] { background: #4ADE80; }
.st-zleg .sw.hum[b-wob5b2jhxm] { background: #7DD3FC; }

html[data-theme="light"] .st-zleg .sw.temp[b-wob5b2jhxm] { background: #15803D; }
html[data-theme="light"] .st-zleg .sw.hum[b-wob5b2jhxm] { background: #1A6BC8; }
.st-zleg .sw.sp[b-wob5b2jhxm] {
    background: transparent;
    border: 1.5px dashed #A0A09A;
    border-radius: 1px;
    width: 10px;
    height: 6px;
}
.st-zleg .band[b-wob5b2jhxm] {
    width: 12px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.st-zleg .band.plant[b-wob5b2jhxm] {
    background: rgba(200, 75, 26, 0.22);
    border: 1px solid rgba(200, 75, 26, 0.4);
}
.st-zleg .band.fan[b-wob5b2jhxm] {
    background: repeating-linear-gradient(
        -45deg,
        rgba(14, 165, 233, 0.55),
        rgba(14, 165, 233, 0.55) 2px,
        rgba(14, 165, 233, 0.12) 2px,
        rgba(14, 165, 233, 0.12) 4px
    );
    border: 1px solid rgba(14, 165, 233, 0.45);
}

/* Altezza zona: T leggibile senza schiacciare il pannello */
.st-zone-chart-slot .st-chart-wrap[b-wob5b2jhxm] { height: 215px; }

/* Shared full-width blocks so tabs don't change page width */
.st-section[b-wob5b2jhxm],
.st-period-box[b-wob5b2jhxm],
.st-card[b-wob5b2jhxm],
.st-plant-sum[b-wob5b2jhxm],
.st-kpi-grid[b-wob5b2jhxm],
.st-floor-list[b-wob5b2jhxm],
.st-health[b-wob5b2jhxm],
.st-scope-tabs[b-wob5b2jhxm] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.st-plant-sum[b-wob5b2jhxm] { min-width: 0; }
.st-psum[b-wob5b2jhxm] { min-width: 0; max-width: 100%; }

/* Plant summary */
.st-plant-sum[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.st-psum[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    min-width: 0;
    min-height: 78px;
}

.st-psum.dual[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.st-psum-half[b-wob5b2jhxm] {
    padding: 9px 8px 8px;
    min-width: 0;
}

.st-psum-half + .st-psum-half[b-wob5b2jhxm] {
    border-left: 1px solid var(--border);
}

.st-psum.stack[b-wob5b2jhxm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 10px;
}

.st-psum-row[b-wob5b2jhxm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.st-psum-k[b-wob5b2jhxm] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--text3);
    white-space: nowrap;
}

.st-psum-v[b-wob5b2jhxm] {
    margin-top: 4px;
    font-family: var(--st-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.st-psum-row .st-psum-v[b-wob5b2jhxm] { margin-top: 0; font-size: 18px; text-align: right; }

.st-psum-v .u[b-wob5b2jhxm] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text2);
}

.st-psum-s[b-wob5b2jhxm] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.3;
}

.st-psum-s .mono[b-wob5b2jhxm] { font-family: var(--st-mono); font-size: 12px; }

/* Target ACS: meta su una riga (mobile) — tracking e gap ridotti */
.st-psum-s-tight[b-wob5b2jhxm] {
    font-size: 10.5px;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 3px;
}

.st-psum-s-tight .mono[b-wob5b2jhxm] {
    font-size: 10.5px;
    letter-spacing: -0.04em;
}

.st-psum-s-tight .sep[b-wob5b2jhxm] {
    margin: 0 0.15em;
    opacity: 0.55;
}

.st-psum-v.acs[b-wob5b2jhxm] { color: var(--st-acs); }
.st-psum-v.imp[b-wob5b2jhxm] { color: var(--st-heat); }
.st-psum-v.cop[b-wob5b2jhxm] { color: var(--st-cop); }
/* Energia — palette allineata al mockup */
.st-en-sum[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.st-en-row[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Generata: stesso verde “punteggio ok” del tab Impianto (dark-first) */
.st-en-hero[b-wob5b2jhxm] {
    grid-column: 1 / -1;
    background: color-mix(in srgb, var(--st-ok) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--st-ok) 40%, transparent);
    border-radius: 10px;
    padding: 9px 12px;
}

.st-en-hero .st-en-k[b-wob5b2jhxm] {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: #BBF7D0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.st-en-hero .st-en-k i[b-wob5b2jhxm] { font-size: 15px; color: #BBF7D0; }

.st-en-hero .st-en-v[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 26px;
    font-weight: 700;
    color: #BBF7D0;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}

.st-en-hero .st-en-v .u[b-wob5b2jhxm] {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.85;
}

html[data-theme="light"] .st-en-hero[b-wob5b2jhxm] {
    background: var(--ok-soft);
    border-color: rgba(21, 128, 61, 0.28);
}

html[data-theme="light"] .st-en-hero .st-en-k[b-wob5b2jhxm],
html[data-theme="light"] .st-en-hero .st-en-k i[b-wob5b2jhxm],
html[data-theme="light"] .st-en-hero .st-en-v[b-wob5b2jhxm] {
    color: #15803D;
}

html[data-theme="light"] .st-en-hero .st-en-k[b-wob5b2jhxm] { color: #166534; }

.st-en-card[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 0;
}

.st-en-card.dual[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    grid-column: 1 / -1;
}

.st-en-half[b-wob5b2jhxm] {
    padding: 8px 10px;
    min-width: 0;
}

.st-en-half + .st-en-half[b-wob5b2jhxm] {
    border-left: 1px solid var(--border);
}

.st-en-k[b-wob5b2jhxm] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.st-en-k i[b-wob5b2jhxm] {
    font-size: 12px;
    flex-shrink: 0;
}

/* Consumata: ambra più “accesa” in dark + font leggermente più grandi (tutti i temi) */
.st-en-card.tone-home[b-wob5b2jhxm] {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, #FBBF24 40%, transparent);
    background: color-mix(in srgb, #FBBF24 16%, var(--surface));
}

.st-en-card.tone-home .st-en-k[b-wob5b2jhxm] {
    font-weight: 700;
    font-size: 13px;
    color: #FDE68A;
}

.st-en-card.tone-home .st-en-k i[b-wob5b2jhxm] {
    font-size: 15px;
    color: #FCD34D;
}

.st-en-card.tone-home .st-en-v[b-wob5b2jhxm] {
    font-size: 24px;
    margin: 0;
    color: #FDE68A;
}

.st-en-card.tone-home .st-en-v .u[b-wob5b2jhxm] { font-size: 13px; }

html[data-theme="light"] .st-en-card.tone-home[b-wob5b2jhxm] {
    border-color: rgba(202, 138, 4, 0.28);
    background: color-mix(in srgb, var(--st-warn) 12%, var(--surface));
}

html[data-theme="light"] .st-en-card.tone-home .st-en-k[b-wob5b2jhxm] { color: #A16207; }
html[data-theme="light"] .st-en-card.tone-home .st-en-k i[b-wob5b2jhxm] { color: #CA8A04; }
html[data-theme="light"] .st-en-card.tone-home .st-en-v[b-wob5b2jhxm] { color: #CA8A04; }

.st-en-v[b-wob5b2jhxm] {
    margin-top: 3px;
    font-family: var(--st-mono);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.st-en-v .u[b-wob5b2jhxm] {
    font-size: 11px;
    font-weight: 400;
    color: var(--text2);
}

/* Energia: colori contrastati (default dark) */
.st-en-v.export[b-wob5b2jhxm] { color: #7DD3FC; }
.st-en-v.import[b-wob5b2jhxm] { color: #FCA5A5; }
.st-en-v.charge[b-wob5b2jhxm] { color: #A5B4FC; }
.st-en-v.discharge[b-wob5b2jhxm] { color: #C4B5FD; }
.st-en-v.ev[b-wob5b2jhxm] { color: var(--text2); }

.st-en-k .ico-export[b-wob5b2jhxm] { color: #7DD3FC; }
.st-en-k .ico-import[b-wob5b2jhxm] { color: #FCA5A5; }
.st-en-k .ico-charge[b-wob5b2jhxm] { color: #A5B4FC; }
.st-en-k .ico-discharge[b-wob5b2jhxm] { color: #C4B5FD; }
.st-en-k .ico-ev[b-wob5b2jhxm] { color: var(--text3); }

.st-en-half.tone-export[b-wob5b2jhxm] {
    background: color-mix(in srgb, #38BDF8 16%, var(--surface));
}
.st-en-half.tone-import[b-wob5b2jhxm] { background: var(--danger-soft); }
.st-en-half.tone-charge[b-wob5b2jhxm] {
    background: color-mix(in srgb, #818CF8 16%, var(--surface));
}
.st-en-half.tone-discharge[b-wob5b2jhxm] {
    background: color-mix(in srgb, #A78BFA 16%, var(--surface));
}

html[data-theme="light"] .st-en-v.export[b-wob5b2jhxm] { color: #1976D2; }
html[data-theme="light"] .st-en-v.import[b-wob5b2jhxm] { color: #B91C1C; }
html[data-theme="light"] .st-en-v.charge[b-wob5b2jhxm] { color: #4F46E5; }
html[data-theme="light"] .st-en-v.discharge[b-wob5b2jhxm] { color: #5B21B6; }
html[data-theme="light"] .st-en-k .ico-export[b-wob5b2jhxm] { color: #1976D2; }
html[data-theme="light"] .st-en-k .ico-import[b-wob5b2jhxm] { color: #B91C1C; }
html[data-theme="light"] .st-en-k .ico-charge[b-wob5b2jhxm] { color: #4F46E5; }
html[data-theme="light"] .st-en-k .ico-discharge[b-wob5b2jhxm] { color: #5B21B6; }
html[data-theme="light"] .st-en-half.tone-export[b-wob5b2jhxm] { background: var(--info-soft); }
html[data-theme="light"] .st-en-half.tone-charge[b-wob5b2jhxm] { background: var(--info-soft); }
html[data-theme="light"] .st-en-half.tone-discharge[b-wob5b2jhxm] { background: var(--info-soft); }

.st-en-card.en-ev-row[b-wob5b2jhxm] {
    grid-column: 1 / -1;
    padding: 8px 10px;
}

.st-en-card.en-ev-row .st-en-v[b-wob5b2jhxm] {
    margin-top: 0;
    font-size: 18px;
}

/* KPI derivati energia — un filo più grandi */
.st-en-kpi-row[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

.st-en-kpi[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px 10px;
    text-align: center;
    min-width: 0;
}

.st-en-kpi-v[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}

.st-en-kpi-v .u[b-wob5b2jhxm] {
    font-size: 12px;
    font-weight: 400;
    color: var(--text2);
}

.st-en-kpi-v.pos[b-wob5b2jhxm] { color: #15803D; }
.st-en-kpi-v.neg[b-wob5b2jhxm] { color: #B91C1C; }

.st-en-kpi-l[b-wob5b2jhxm] {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text3);
    line-height: 1.25;
}

/* Bilancio barre */
.st-en-balance[b-wob5b2jhxm] {
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    width: 100%;
}

.st-en-balance-title[b-wob5b2jhxm] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--text3);
    margin-bottom: 8px;
}

.st-en-balance-row[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 2.6rem;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 10px;
    color: var(--text2);
}

.st-en-balance-row:last-child[b-wob5b2jhxm] { margin-bottom: 0; }

.st-en-balance-track[b-wob5b2jhxm] {
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    overflow: hidden;
}

.st-en-balance-fill[b-wob5b2jhxm] {
    height: 100%;
    border-radius: 999px;
}

.st-en-balance-row .val[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    color: var(--text);
}

/* Totale macchina: stessa gerarchia delle altre psum (label in alto a sx) */
.st-psum.total[b-wob5b2jhxm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    background: color-mix(in srgb, #818CF8 20%, var(--surface));
    border-color: rgba(165, 180, 252, 0.45);
    padding: 10px 12px;
    min-height: 78px;
}

html[data-theme="light"] .st-psum.total[b-wob5b2jhxm] {
    background: var(--info-soft);
    border-color: rgba(79, 70, 229, 0.22);
}

.st-psum-total-txt[b-wob5b2jhxm] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 1px; /* allinea otticamente al cap-height del valore */
}

.st-psum.total .st-psum-k[b-wob5b2jhxm] {
    color: #C7D2FE;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    line-height: 1.2;
    white-space: normal; /* "Totale macchina" non deve stringersi sul valore */
}

.st-psum.total .st-psum-s[b-wob5b2jhxm] {
    margin-top: 0;
    font-size: 10px;
    color: #A5B4FC;
    opacity: 0.95;
    line-height: 1.25;
}

html[data-theme="light"] .st-psum.total .st-psum-k[b-wob5b2jhxm] { color: #4338CA; }
html[data-theme="light"] .st-psum.total .st-psum-s[b-wob5b2jhxm] { color: #6366F1; }

.st-psum.total .st-psum-s .mono[b-wob5b2jhxm] {
    font-size: 10px;
    font-weight: 600;
}

.st-psum.total .st-psum-v[b-wob5b2jhxm] {
    margin-top: 0;
    color: #E0E7FF;
    font-size: 26px;
    line-height: 1.1;
    text-align: right;
    flex-shrink: 0;
    align-self: center; /* solo il numero resta a mezz’altezza */
}

.st-psum.total .st-psum-v .u[b-wob5b2jhxm] {
    font-size: 13px;
    color: #C7D2FE;
    opacity: 0.9;
}

html[data-theme="light"] .st-psum.total .st-psum-v[b-wob5b2jhxm] { color: #4F46E5; }
html[data-theme="light"] .st-psum.total .st-psum-v .u[b-wob5b2jhxm] { color: #6366F1; }

.st-health-switch[b-wob5b2jhxm] {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.st-health-switch button[b-wob5b2jhxm] {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 8px;
    padding: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    font-family: inherit;
}

.st-health-switch button.active[b-wob5b2jhxm] {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Health compact */
.st-health[b-wob5b2jhxm] {
    margin-bottom: 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

/* .st-health.ok base overridden below with score styles */
.st-health.warn[b-wob5b2jhxm] { background: color-mix(in srgb, var(--st-warn) 12%, var(--surface)); border-color: rgba(180, 83, 9, 0.28); }
.st-health.bad[b-wob5b2jhxm] { background: var(--danger-soft); border-color: rgba(185, 28, 28, 0.25); }

.st-health-main[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.st-health-score[b-wob5b2jhxm] {
    flex-shrink: 0;
    min-width: 40px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--st-mono);
    font-size: 15px;
    font-weight: 700;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
}

.st-health.ok[b-wob5b2jhxm] {
    background: color-mix(in srgb, var(--st-ok) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--st-ok) 40%, transparent);
}

.st-health.ok .st-health-score[b-wob5b2jhxm] {
    background: color-mix(in srgb, var(--st-ok) 22%, var(--surface));
    border-color: color-mix(in srgb, var(--st-ok) 45%, transparent);
    color: #BBF7D0;
}

.st-health.ok .st-health-title[b-wob5b2jhxm] { color: #BBF7D0; }

html[data-theme="light"] .st-health.ok[b-wob5b2jhxm] {
    background: var(--ok-soft);
    border-color: rgba(21, 128, 61, 0.25);
}

html[data-theme="light"] .st-health.ok .st-health-score[b-wob5b2jhxm] {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--st-ok);
}

html[data-theme="light"] .st-health.ok .st-health-title[b-wob5b2jhxm] { color: var(--st-ok); }
.st-health.warn .st-health-score[b-wob5b2jhxm],
.st-health.warn .st-health-title[b-wob5b2jhxm] { color: var(--st-warn); }
.st-health.bad .st-health-score[b-wob5b2jhxm],
.st-health.bad .st-health-title[b-wob5b2jhxm] { color: var(--st-bad); }

.st-health-title[b-wob5b2jhxm] {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.st-health-chevron[b-wob5b2jhxm] {
    font-size: 14px;
    color: var(--text3);
    transition: transform 0.18s ease;
}

.st-health.open .st-health-chevron[b-wob5b2jhxm] { transform: rotate(180deg); }

.st-health-detail[b-wob5b2jhxm] {
    display: none;
    padding: 0 10px 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.st-health.open .st-health-detail[b-wob5b2jhxm] {
    display: block;
    padding-top: 8px;
}

.st-health-sub[b-wob5b2jhxm] {
    font-size: 12px;
    color: var(--text2);
    line-height: 1.4;
    margin-bottom: 6px;
}

.st-health-legend[b-wob5b2jhxm] {
    margin: 0 0 8px;
    font-size: 10px;
    color: var(--text3);
    line-height: 1.35;
}

.st-health-legend strong[b-wob5b2jhxm] {
    color: var(--text2);
    font-weight: 600;
}

.st-health-bars[b-wob5b2jhxm] { display: flex; flex-direction: column; gap: 8px; }

.st-health-bar-row[b-wob5b2jhxm] {
    display: grid;
    /* longer labels: "Efficienza raffrescamento" */
    grid-template-columns: 8.5rem 1fr minmax(5rem, auto);
    gap: 8px;
    align-items: center;
    font-size: 11px;
    color: var(--text2);
}

.st-health-bar-lbl[b-wob5b2jhxm] {
    font-weight: 600;
    font-size: 10px;
    color: var(--text);
    line-height: 1.2;
    white-space: normal;
}

.st-health-track[b-wob5b2jhxm] {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.07);
    overflow: hidden;
}

/* Marker a metà = “nella media” */
.st-health-mid[b-wob5b2jhxm] {
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: rgba(0,0,0,0.22);
    border-radius: 1px;
    z-index: 1;
    pointer-events: none;
}

.st-health-fill[b-wob5b2jhxm] {
    position: relative;
    z-index: 0;
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

/* Verde / ambra / rosso leggibili */
.st-health-fill.hi[b-wob5b2jhxm],
.st-health-fill:not(.mid):not(.lo):not(.hi)[b-wob5b2jhxm] {
    background: linear-gradient(90deg, #4ade80, #16a34a);
}

.st-health-fill.mid[b-wob5b2jhxm] {
    background: linear-gradient(90deg, #fbbf24, #d97706);
}

.st-health-fill.lo[b-wob5b2jhxm] {
    background: linear-gradient(90deg, #f87171, #dc2626);
}

/* legacy class names from earlier scores */
.st-health-fill.low[b-wob5b2jhxm] { background: linear-gradient(90deg, #f87171, #dc2626); }

.st-health-bar-row .pct[b-wob5b2jhxm] {
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    color: var(--text2);
    line-height: 1.2;
    white-space: nowrap;
}

.st-placeholder[b-wob5b2jhxm] {
    text-align: center;
    padding: 28px 16px;
    color: var(--text2);
    font-size: 13px;
    line-height: 1.45;
}

.st-placeholder i[b-wob5b2jhxm] {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    color: var(--text3);
}

.st-hint[b-wob5b2jhxm] {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text2);
    line-height: 1.4;
    padding: 8px 10px;
    background: var(--surface2);
    border-radius: 8px;
    border: 1px dashed var(--border2);
}

/* ── Day scorecard (vs ieri stesso orario) ── */
/* Mobile: stack. ≥640px: hero a sx + mini KPI a dx (meno altezza, meno vuoto). */
.st-scorecard[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.st-score-hero[b-wob5b2jhxm] {
    text-align: center;
    min-width: 0;
}

.st-score-num[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--st-ok);
}

.st-score-num .u[b-wob5b2jhxm] {
    font-size: 13px;
    font-weight: 600;
    color: #16A34A;
}

.st-score-lbl[b-wob5b2jhxm] {
    font-size: 11px;
    color: var(--text2);
    margin-top: 3px;
    line-height: 1.3;
}

.st-score-lbl .hint[b-wob5b2jhxm] {
    display: block;
    font-size: 10px;
    color: var(--text3);
    margin-top: 1px;
}

.st-score-delta[b-wob5b2jhxm] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text2);
    font-size: 11px;
    font-weight: 700;
}

/* Meglio (meno kWh) · peggio (più kWh): arancio (0–1%] · rosso chiaro (1–5%] · rosso scuro >5% */
.st-score-delta.better-soft[b-wob5b2jhxm] {
    background: #DCFCE7;
    color: #15803D;
}

.st-score-delta.better-strong[b-wob5b2jhxm] {
    background: #86EFAC;
    color: #14532D;
}

/* >0 e ≤1%: arancio */
.st-score-delta.worse-orange[b-wob5b2jhxm] {
    background: #FFEDD5; /* orange-100 */
    color: #C2410C;      /* orange-700 */
}

/* >1% e ≤5%: rosso chiaro */
.st-score-delta.worse-soft[b-wob5b2jhxm] {
    background: #FEE2E2; /* red-100 */
    color: #B91C1C;
}

/* >5%: rosso scuro */
.st-score-delta.worse-strong[b-wob5b2jhxm] {
    background: #FCA5A5; /* red-300 */
    color: #7F1D1D;
}

.st-score-delta.flat[b-wob5b2jhxm] {
    background: var(--surface2);
    color: var(--text2);
}

.st-score-context[b-wob5b2jhxm] {
    margin-top: 5px;
    font-size: 10px;
    color: var(--text3);
    font-family: var(--st-mono);
    line-height: 1.3;
}

.st-score-context .dim[b-wob5b2jhxm] { opacity: 0.75; }

.st-score-grid[b-wob5b2jhxm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}

.st-score-cell[b-wob5b2jhxm] {
    background: var(--surface2);
    border-radius: 10px;
    padding: 7px 6px;
    text-align: center;
    min-width: 0;
}

.st-score-cell .k[b-wob5b2jhxm] {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text3);
    font-weight: 600;
}

.st-score-cell .v[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 15px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--text);
}

.st-score-cell .v.cop[b-wob5b2jhxm] { color: var(--st-cop); }
.st-score-cell .v.acs[b-wob5b2jhxm] { color: #C84B1A; }
.st-score-cell .v.imp[b-wob5b2jhxm] { color: var(--st-acs); }
.st-score-cell .v.suff[b-wob5b2jhxm] { color: #0D9488; }
.st-score-cell .v.bal.pos[b-wob5b2jhxm] { color: var(--st-ok); }
.st-score-cell .v.bal.neg[b-wob5b2jhxm] { color: #B91C1C; }
.st-score-cell .v.ac[b-wob5b2jhxm] { color: #0F766E; }
.st-score-cell .v.home[b-wob5b2jhxm] { color: #CA8A04; }
.st-score-cell .v .vu[b-wob5b2jhxm] {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.85;
}

.st-score-cell .s[b-wob5b2jhxm] {
    font-size: 10px;
    color: var(--text2);
    margin-top: 1px;
    line-height: 1.25;
}

.st-score-cell .s .up[b-wob5b2jhxm] { color: #15803D; font-weight: 600; }
.st-score-cell .s .down[b-wob5b2jhxm] { color: #B91C1C; font-weight: 600; }
.st-score-cell .s .flat[b-wob5b2jhxm] { color: var(--text3); font-weight: 600; }

.st-score-num-pv[b-wob5b2jhxm] { color: var(--st-ok) !important; }
.st-score-num-pv .u[b-wob5b2jhxm] { color: #16A34A !important; }

/* Nested section reset when scorecard sits inside energy block */
.st-en-sum + .st-en-kpi-row + .st-section[b-wob5b2jhxm] {
    margin-left: 0;
    margin-right: 0;
}

/* Energy scorecard: only 2 KPI side by side */
.st-scorecard-energy .st-score-grid-2[b-wob5b2jhxm] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

@media (min-width: 640px) {
    .st-scorecard-energy .st-score-grid-2[b-wob5b2jhxm] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        align-content: center;
    }
}

@media (min-width: 900px) {
    .st-scorecard-energy .st-score-grid-2[b-wob5b2jhxm] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tablet+: due colonne, altezza ~ metà dello stack mobile */
@media (min-width: 640px) {
    .st-scorecard[b-wob5b2jhxm] {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        padding: 12px 14px;
    }

    .st-score-hero[b-wob5b2jhxm] {
        flex: 0 1 38%;
        max-width: 280px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border-right: 1px solid var(--border);
        padding-right: 14px;
    }

    .st-score-num[b-wob5b2jhxm] {
        font-size: 34px;
    }

    .st-score-delta[b-wob5b2jhxm] {
        align-self: flex-start;
        margin-top: 8px;
    }

    .st-score-grid[b-wob5b2jhxm] {
        flex: 1 1 0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 8px;
        margin: 0;
        align-content: stretch;
    }

    .st-score-cell[b-wob5b2jhxm] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8px 10px;
    }

    .st-score-cell .v[b-wob5b2jhxm] {
        font-size: 18px;
    }
}

/* Desktop ampio: 4 mini-KPI in riga → card ancora più bassa */
@media (min-width: 900px) {
    .st-scorecard[b-wob5b2jhxm] {
        align-items: center;
        gap: 16px;
    }

    .st-score-hero[b-wob5b2jhxm] {
        flex: 0 0 auto;
        max-width: 260px;
        min-width: 200px;
    }

    .st-score-grid[b-wob5b2jhxm] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 8px;
    }

    .st-score-cell[b-wob5b2jhxm] {
        padding: 10px 8px;
    }
}

/* ── ACS kWh/°C: heatmap + cycle cards ── */
.st-acs-cycle-list[b-wob5b2jhxm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-acs-cycle[b-wob5b2jhxm] {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.st-acs-cycle:active[b-wob5b2jhxm] {
    background: var(--surface2);
    border-color: var(--border2);
}

.st-acs-cycle-top[b-wob5b2jhxm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.st-acs-cycle-title[b-wob5b2jhxm] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.st-acs-cycle-kpi[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 6px;
}

.st-acs-cycle-kpi .u[b-wob5b2jhxm] {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.85;
}

.st-acs-cycle-kpi.g0[b-wob5b2jhxm] { background: #DCFCE7; color: #166534; }
.st-acs-cycle-kpi.g1[b-wob5b2jhxm] { background: #BBF7D0; color: #166534; }
.st-acs-cycle-kpi.g2[b-wob5b2jhxm] { background: #FEF08A; color: #854D0E; }
.st-acs-cycle-kpi.g3[b-wob5b2jhxm] { background: #FDBA74; color: #9A3412; }
.st-acs-cycle-kpi.g4[b-wob5b2jhxm] { background: #FECACA; color: #991B1B; }

.st-acs-cycle-meta[b-wob5b2jhxm] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text2);
    font-family: var(--st-mono);
    line-height: 1.35;
}

.st-acs-list-btn[b-wob5b2jhxm] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border2);
    background: var(--surface);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.st-acs-list-btn i[b-wob5b2jhxm] {
    color: var(--text2);
    font-size: 16px;
}

.st-acs-list-btn .meta[b-wob5b2jhxm] {
    font-size: 11px;
    font-weight: 400;
    color: var(--text3);
    font-family: var(--st-mono);
}

.st-acs-hm[b-wob5b2jhxm] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.st-acs-hm table[b-wob5b2jhxm] {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    min-width: 280px;
}

.st-acs-hm th[b-wob5b2jhxm],
.st-acs-hm td[b-wob5b2jhxm] {
    text-align: center;
    padding: 5px 3px;
    border: 1px solid rgba(0,0,0,0.06);
}

.st-acs-hm th[b-wob5b2jhxm] {
    font-weight: 600;
    color: var(--text3);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--surface2);
}

.st-acs-hm th.corner[b-wob5b2jhxm] {
    text-align: left;
    font-size: 8px;
    line-height: 1.2;
    padding-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.st-acs-hm th.row-h[b-wob5b2jhxm] {
    text-align: left;
    font-family: var(--st-mono);
    font-size: 10px;
    color: var(--text2);
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface2);
    text-transform: none;
    letter-spacing: 0;
}

.st-acs-hm td[b-wob5b2jhxm] {
    font-family: var(--st-mono);
    font-weight: 600;
    font-size: 11px;
    color: var(--text);
}

.st-acs-hm td.g0[b-wob5b2jhxm] { background: #DCFCE7; color: #166534; }
.st-acs-hm td.g1[b-wob5b2jhxm] { background: #BBF7D0; color: #166534; }
.st-acs-hm td.g2[b-wob5b2jhxm] { background: #FEF08A; color: #854D0E; }
.st-acs-hm td.g3[b-wob5b2jhxm] { background: #FDBA74; color: #9A3412; }
.st-acs-hm td.g4[b-wob5b2jhxm] { background: #FECACA; color: #991B1B; }
.st-acs-hm td.empty[b-wob5b2jhxm] {
    background: var(--surface2);
    color: var(--text3);
    font-weight: 400;
}

.st-acs-hm-legend[b-wob5b2jhxm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--text3);
}

.st-acs-hm-legend .sw[b-wob5b2jhxm] {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.06);
}

.st-acs-hm-note[b-wob5b2jhxm] {
    margin: 6px 0 0;
    font-size: 10px;
    color: var(--text3);
    line-height: 1.35;
}
/* /Components/Pages/ZoneDetail.razor.rz.scp.css */
/* Zone detail — mockup zone-detail v1.2 */

.zd-page[b-onpb8lxxwy] {
    --zd-heat: #F97316;
    --zd-heat-soft: rgba(249, 115, 22, 0.14);
    --zd-cool: #60A5FA;
    --zd-cool-soft: rgba(96, 165, 250, 0.14);
    --zd-ok: #4ADE80;
    --zd-ok-soft: rgba(74, 222, 128, 0.12);
    --zd-warn: #FBBF24;
    --zd-mono: ui-monospace, "Cascadia Mono", Consolas, "DM Mono", monospace;
    --zd-radius: 18px;
    --zd-radius-sm: 14px;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px 14px 56px;
    box-sizing: border-box;
    background: var(--bg);
    color: var(--text);
}

.app.zd-page[b-onpb8lxxwy] {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 48px));
}

@media (max-width: 600px) {
    .zd-page[b-onpb8lxxwy] {
        padding: 10px 10px 48px;
    }
}

/* ── Header ── */
.zd-top[b-onpb8lxxwy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-top: 4px;
}

.zd-back[b-onpb8lxxwy] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.45rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
}

.zd-brand[b-onpb8lxxwy] {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.zd-brand h1[b-onpb8lxxwy] {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.zd-ico[b-onpb8lxxwy] {
    font-size: 1.2rem;
    line-height: 1;
}

.zd-meta[b-onpb8lxxwy] {
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--text3);
    font-weight: 500;
}

.zd-actions[b-onpb8lxxwy] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.zd-pwr-chip[b-onpb8lxxwy] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface2);
    color: var(--text3);
    border: 1px solid var(--border);
}

.zd-pwr-chip .dot[b-onpb8lxxwy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.zd-pwr-chip.on[b-onpb8lxxwy] {
    background: var(--zd-ok-soft);
    color: var(--zd-ok);
    border-color: color-mix(in srgb, var(--zd-ok) 30%, transparent);
}

.zd-pwr-chip.on .dot[b-onpb8lxxwy] {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
}

.zd-pwr-chip.monitor[b-onpb8lxxwy] {
    color: var(--monitor, #A1887F);
    background: var(--monitor-bg, rgba(141, 110, 99, 0.12));
    border-color: rgba(141, 110, 99, 0.3);
}

.zd-icon-btn[b-onpb8lxxwy] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0;
}

.zd-icon-btn.on-heat[b-onpb8lxxwy],
.zd-icon-btn.on-cool[b-onpb8lxxwy],
.zd-icon-btn.on[b-onpb8lxxwy] {
    color: var(--zd-ok);
    border-color: color-mix(in srgb, var(--zd-ok) 28%, transparent);
    background: var(--zd-ok-soft);
}

/* ── Sensors ── */
.zd-sensors[b-onpb8lxxwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.zd-sensor[b-onpb8lxxwy] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--zd-radius-sm);
    padding: 14px 12px 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 118px;
    justify-content: center;
    font: inherit;
    color: inherit;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.zd-sensor:active[b-onpb8lxxwy] {
    background: var(--surface2);
}

.zd-sensor .lbl[b-onpb8lxxwy] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
}

.zd-sensor .val[b-onpb8lxxwy] {
    font-family: var(--zd-mono);
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.zd-sensor .val .u[b-onpb8lxxwy] {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text3);
    margin-left: 1px;
}

.zd-sensor .delta[b-onpb8lxxwy] {
    font-family: var(--zd-mono);
    font-size: 0.78rem;
    font-weight: 650;
}

.zd-sensor .delta.pos[b-onpb8lxxwy] { color: var(--zd-heat); }
.zd-sensor .delta.neg[b-onpb8lxxwy] { color: var(--zd-cool); }
.zd-sensor .delta.zero[b-onpb8lxxwy] { color: var(--text3); }

/* Comfort pills — no emoji checks */
.c-badge[b-onpb8lxxwy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
}

.c-badge i[b-onpb8lxxwy] { font-size: 0.72rem; }

.c-badge.ok[b-onpb8lxxwy] {
    color: var(--zd-ok);
    background: var(--zd-ok-soft);
    border: 1px solid color-mix(in srgb, var(--zd-ok) 28%, transparent);
}

.c-badge.cold[b-onpb8lxxwy] {
    color: #93C5FD;
    background: var(--zd-cool-soft);
    border: 1px solid color-mix(in srgb, var(--zd-cool) 30%, transparent);
}

.c-badge.hot[b-onpb8lxxwy] {
    color: #FDBA74;
    background: var(--zd-heat-soft);
    border: 1px solid color-mix(in srgb, var(--zd-heat) 30%, transparent);
}

.c-badge.dry[b-onpb8lxxwy] {
    color: var(--zd-warn);
    background: color-mix(in srgb, var(--zd-warn) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--zd-warn) 28%, transparent);
}

.c-badge.humid[b-onpb8lxxwy] {
    color: #7DD3FC;
    background: color-mix(in srgb, #38BDF8 14%, transparent);
    border: 1px solid color-mix(in srgb, #38BDF8 28%, transparent);
}

.zd-sec[b-onpb8lxxwy] {
    margin-bottom: 16px;
}

.zd-sec-label[b-onpb8lxxwy] {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin: 0 0 10px 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zd-sec-label .hint[b-onpb8lxxwy] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text3);
    opacity: 0.9;
}

.zd-sec-label .hint.manual[b-onpb8lxxwy] {
    color: hotpink;
}

/* Setpoint */
.zd-sp-card[b-onpb8lxxwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--zd-radius-sm);
    padding: 10px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    gap: 12px;
}

.zd-sp-btn[b-onpb8lxxwy] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border2);
    background: var(--surface2);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.zd-sp-btn:active[b-onpb8lxxwy] {
    transform: scale(0.94);
    background: var(--border2);
}

.zd-sp-val-wrap[b-onpb8lxxwy] {
    flex: 1;
    text-align: center;
    background: var(--surface2);
    border-radius: 12px;
    padding: 12px 16px;
}

.zd-sp-val[b-onpb8lxxwy] {
    font-family: var(--zd-mono);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.zd-sp-val .u[b-onpb8lxxwy] {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text3);
}

/* Presets */
.zd-presets[b-onpb8lxxwy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.zd-preset[b-onpb8lxxwy] {
    padding: 12px 8px 10px;
    border-radius: var(--zd-radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.12s, background 0.12s;
}

.zd-preset:disabled[b-onpb8lxxwy] {
    opacity: 0.45;
    cursor: not-allowed;
}

.zd-preset .pi[b-onpb8lxxwy] { font-size: 1.35rem; line-height: 1; }
.zd-preset .pn[b-onpb8lxxwy] { font-size: 0.82rem; font-weight: 650; color: var(--text2); }
.zd-preset .pt[b-onpb8lxxwy] {
    font-family: var(--zd-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text3);
}

.zd-preset.active[b-onpb8lxxwy] {
    border-color: color-mix(in srgb, var(--zd-heat) 45%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--zd-heat) 10%, var(--surface)), var(--surface) 70%);
}

.zd-preset.active .pn[b-onpb8lxxwy],
.zd-preset.active .pt[b-onpb8lxxwy] {
    color: #FDBA74;
    font-weight: 750;
}

.zd-presets.cool .zd-preset.active[b-onpb8lxxwy] {
    border-color: color-mix(in srgb, var(--zd-cool) 45%, var(--border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--zd-cool) 10%, var(--surface)), var(--surface) 70%);
}

.zd-presets.cool .zd-preset.active .pn[b-onpb8lxxwy],
.zd-presets.cool .zd-preset.active .pt[b-onpb8lxxwy] {
    color: #93C5FD;
}

/* Edit CTA + editor */
.zd-edit-cta[b-onpb8lxxwy] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--zd-radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    margin-bottom: 12px;
}

.zd-edit-cta:hover[b-onpb8lxxwy] {
    border-color: var(--border2);
    color: var(--text);
}

.zd-editor[b-onpb8lxxwy] {
    margin-top: 4px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--zd-radius);
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
    /* spazio sotto eventuale sticky/header quando si fa scrollIntoView */
    scroll-margin-top: 16px;
}

.zd-editor h3[b-onpb8lxxwy] {
    margin: 0 0 14px;
    font-size: 0.95rem;
    font-weight: 750;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zd-editor h3 span[b-onpb8lxxwy] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text3);
}

.zd-pe-row[b-onpb8lxxwy] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zd-pe-block[b-onpb8lxxwy] {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.zd-pe-block:last-of-type[b-onpb8lxxwy] {
    border-bottom: none;
    margin-bottom: 8px;
}

.zd-pe-title[b-onpb8lxxwy] {
    font-size: 0.85rem;
    font-weight: 750;
    margin-bottom: 10px;
}

.zd-pe-grid[b-onpb8lxxwy] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.zd-pe-grid label[b-onpb8lxxwy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zd-pe-grid input[b-onpb8lxxwy] {
    padding: 10px 12px;
    border: 1px solid var(--border2);
    border-radius: 10px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

.zd-save-btn[b-onpb8lxxwy] {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: none;
    border-radius: var(--zd-radius-sm);
    background: var(--zd-cool);
    color: #0B1220;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Fan bar in page */
.zd-mobile[b-onpb8lxxwy]  .fan-bar,
.zd-desk-fan[b-onpb8lxxwy]  .fan-bar {
    margin-top: 0;
}

.zd-mobile[b-onpb8lxxwy]  .floor-bar {
    margin-top: 0;
}

/* ════════════ DESKTOP ════════════ */
.zd-desktop[b-onpb8lxxwy] { display: none; }

@media (min-width: 900px) {
    .zd-page[b-onpb8lxxwy] {
        padding: 18px 20px 56px;
    }

    .zd-mobile[b-onpb8lxxwy] { display: none; }
    .zd-desktop[b-onpb8lxxwy] { display: block; }

    .zd-desk-stack[b-onpb8lxxwy] {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .zd-desk-sensors[b-onpb8lxxwy] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .zd-sensor.desk[b-onpb8lxxwy] {
        min-height: 168px;
        padding: 16px 18px 12px;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0;
        justify-content: flex-start;
    }

    .zd-sensor.desk .sensor-top[b-onpb8lxxwy] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
    }

    .zd-sensor.desk .left[b-onpb8lxxwy] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
    }

    .zd-sensor.desk .val[b-onpb8lxxwy] {
        font-size: 2.35rem;
        flex-shrink: 0;
    }

    .zd-sensor.desk .val .u[b-onpb8lxxwy] {
        font-size: 1.1rem;
    }

    /* Sparkline basamento comune */
    .zd-sensor.desk[b-onpb8lxxwy]  .cl-spark.zd-sensor-spark {
        display: block;
        flex: 0 0 auto;
        margin-top: auto;
        padding-top: 12px;
        height: 36px;
    }

    .zd-desk-fan .zd-sec-label[b-onpb8lxxwy] {
        margin-bottom: 8px;
    }

    .zd-desk-plant .zd-sec-label[b-onpb8lxxwy] {
        margin-bottom: 8px;
    }

    /* Preset | Setpoint — fondi allineati */
    .zd-desk-target[b-onpb8lxxwy] {
        display: grid;
        grid-template-columns: 1.35fr 0.9fr;
        gap: 14px;
        align-items: stretch;
    }

    .zd-desk-target .zd-sec[b-onpb8lxxwy] {
        margin: 0;
        display: grid;
        grid-template-rows: auto 1fr;
        min-height: 0;
        height: 100%;
    }

    .zd-desk-target .zd-sec-label[b-onpb8lxxwy] {
        margin-bottom: 8px;
        min-height: 1.35em;
        line-height: 1.35;
    }

    .zd-desk-target .zd-presets[b-onpb8lxxwy] {
        gap: 10px;
        height: 100%;
        min-height: 0;
    }

    .zd-desk-target .zd-preset[b-onpb8lxxwy] {
        padding: 18px 10px 16px;
        min-height: 118px;
        height: 100%;
        gap: 7px;
        justify-content: center;
        box-sizing: border-box;
    }

    .zd-desk-target .zd-preset .pi[b-onpb8lxxwy] { font-size: 1.75rem; }
    .zd-desk-target .zd-preset .pn[b-onpb8lxxwy] { font-size: 1rem; font-weight: 700; }
    .zd-desk-target .zd-preset .pt[b-onpb8lxxwy] { font-size: 0.95rem; font-weight: 750; }

    .zd-sp-card.hero[b-onpb8lxxwy] {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
        padding: 18px 16px;
        gap: 14px;
        justify-content: center;
        align-self: stretch;
    }

    .zd-sp-row[b-onpb8lxxwy] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
    }

    .zd-sp-card.hero .zd-sp-val-wrap[b-onpb8lxxwy] {
        padding: 16px 14px;
    }

    .zd-sp-card.hero .zd-sp-val[b-onpb8lxxwy] {
        font-size: 2.25rem;
    }

    .zd-sp-card.hero .zd-sp-btn[b-onpb8lxxwy] {
        width: 48px;
        height: 48px;
    }

    .zd-sp-cap[b-onpb8lxxwy] {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text3);
        text-align: center;
    }

    .zd-sp-cap.muted[b-onpb8lxxwy] {
        opacity: 0.8;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
    }

    .zd-edit-cta[b-onpb8lxxwy] {
        margin-bottom: 0;
        padding: 14px;
        font-size: 0.9rem;
    }

    .zd-editor.desk[b-onpb8lxxwy] {
        margin: 0;
    }

    .zd-editor.desk .zd-pe-row[b-onpb8lxxwy] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .zd-editor.desk .zd-pe-block[b-onpb8lxxwy] {
        margin: 0;
        padding: 14px;
        border: 1px solid var(--border);
        border-radius: var(--zd-radius-sm);
        background: color-mix(in srgb, var(--surface2) 40%, transparent);
    }

    .zd-editor.desk .zd-save-btn[b-onpb8lxxwy] {
        max-width: 320px;
        margin: 16px auto 0;
    }
}

@media (min-width: 1100px) {
    .zd-desk-stack[b-onpb8lxxwy] { gap: 20px; }
    .zd-desk-sensors[b-onpb8lxxwy] { gap: 16px; }
    .zd-desk-target[b-onpb8lxxwy] {
        gap: 16px;
        grid-template-columns: 1.4fr 0.85fr;
    }
    .zd-sensor.desk[b-onpb8lxxwy] {
        min-height: 180px;
    }
    .zd-sensor.desk .val[b-onpb8lxxwy] {
        font-size: 2.55rem;
    }
    .zd-sensor.desk[b-onpb8lxxwy]  .cl-spark.zd-sensor-spark {
        height: 40px;
        padding-top: 14px;
    }
    .zd-desk-target .zd-preset .pi[b-onpb8lxxwy] { font-size: 1.9rem; }
    .zd-desk-target .zd-preset .pn[b-onpb8lxxwy] { font-size: 1.05rem; }
    .zd-desk-target .zd-preset .pt[b-onpb8lxxwy] { font-size: 1rem; }
}

html[data-theme="light"] .zd-page[b-onpb8lxxwy] {
    --zd-ok: #15803D;
    --zd-ok-soft: rgba(34, 197, 94, 0.12);
}