/* ── HEAT PUMP OVERVIEW ───────────────────────────────── */
.hp {
    --hp-hot: var(--vz-danger);
    --hp-warm: var(--vz-warning);
    --hp-cool: var(--vz-info);
    --hp-good: var(--vz-success);
    --hp-surface: var(--vz-secondary-bg);
    --hp-surface-soft: rgba(var(--vz-light-rgb), 0.03);
    --hp-border: var(--vz-border-color);
    --hp-heading: var(--vz-heading-color);
    --hp-text: var(--vz-body-color);
    --hp-muted: rgba(var(--vz-body-color-rgb), 0.72);
    --hp-subtle: rgba(var(--vz-body-color-rgb), 0.54);
    --hp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    color: var(--hp-text);
}

.hp a {
    color: inherit;
}

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

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

/* COP HERO */
.hp-cop-hero {
    background:var(--hp-surface);
    border:1px solid var(--hp-border);
    border-radius:5px;
    padding:1.5rem 1.6rem;
    margin-bottom:1.5rem;
    display:grid;
    grid-template-columns:minmax(160px, auto) minmax(0, 1fr) minmax(110px, auto);
    gap:1.5rem;
    align-items:center;
    transition: border-color .5s, box-shadow .5s;
    position:relative; overflow:hidden;
    box-shadow: var(--hp-shadow);
}
.hp-cop-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% -20%, rgba(var(--vz-danger-rgb), 0.06) 0%, transparent 60%);
    pointer-events:none;
}
.hp-cop-hero.cop-good  { border-color:rgba(var(--vz-success-rgb),.32); box-shadow:0 10px 28px rgba(var(--vz-success-rgb),.08); }
.hp-cop-hero.cop-warn  { border-color:rgba(var(--vz-warning-rgb),.32); box-shadow:0 10px 28px rgba(var(--vz-warning-rgb),.08); }
.hp-cop-hero.cop-low   { border-color:rgba(var(--vz-danger-rgb),.32);  box-shadow:0 10px 28px rgba(var(--vz-danger-rgb),.08); }
.hp-cop-hero.cop-idle  {
    border-color:rgba(var(--vz-info-rgb),.22);
    box-shadow:var(--hp-shadow);
}
.hp-cop-hero.cop-zombie {
    border-color:rgba(159, 232, 112, .22);
    box-shadow:0 10px 28px rgba(159, 232, 112, .08);
}
.hp-cop-hero.cop-idle::before {
    background:radial-gradient(ellipse at 50% -20%, rgba(var(--vz-info-rgb), 0.05) 0%, transparent 60%);
}
.hp-cop-hero.cop-zombie::before {
    background:radial-gradient(ellipse at 50% -20%, rgba(159, 232, 112, .08) 0%, transparent 60%);
}

/* COP value */
.hp-cop-val-wrap { text-align:center; min-width:140px; }
.hp-cop-label {
    font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--hp-subtle); margin-bottom:.5rem;
    font-weight:600;
}
.hp-cop-number {
    font-size:clamp(2.6rem, 5vw, 3.6rem); font-weight:700;
    line-height:1;
    transition: color .5s;
    color:var(--hp-hot);
    letter-spacing:-.04em;
}
.hp-cop-number.good { color:var(--hp-good); }
.hp-cop-number.warn { color:var(--hp-warm); }
.hp-cop-number.low  { color:var(--hp-hot); }
.hp-cop-number.idle { color:var(--hp-heading); opacity:.72; }
.hp-cop-rating {
    font-size:.76rem;
    margin-top:.45rem;
    color:var(--hp-muted);
    transition:color .5s;
}
.hp-cop-rating.idle {
    color:var(--vz-info);
}
.hp-cop-zombie {
    display:none;
    align-items:center;
    gap:.45rem;
    margin-top:.7rem;
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#a6e36d;
    font-weight:700;
}
.hp-cop-zombie.show {
    display:inline-flex;
}
.hp-cop-zombie i {
    font-size:.85rem;
    color:#9fe870;
    text-shadow:0 0 10px rgba(159, 232, 112, .18);
}
.hp-cop-zombie span {
    opacity:.92;
}

/* Energy flow */
.hp-energy-flow {
    display:flex; flex-direction:column; gap:1rem; flex:1;
}
.hp-flow-row {
    display:flex; align-items:center; gap:1rem;
}
.hp-flow-label {
    font-size:.7rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--hp-subtle); min-width:105px; font-weight:600;
}
.hp-flow-bar-wrap {
    flex:1; height:6px; background:rgba(var(--vz-light-rgb),.08);
    border-radius:3px; overflow:hidden;
}
.hp-flow-bar-wrap.idle {
    background:rgba(var(--vz-light-rgb),.04);
}
.hp-flow-bar {
    height:100%; border-radius:3px;
    transition: width .8s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.hp-flow-bar.electric { background:linear-gradient(90deg,var(--vz-info),var(--vz-primary)); }
.hp-flow-bar.heat     { background:linear-gradient(90deg,var(--hp-warm),var(--hp-hot)); }
.hp-flow-bar.idle {
    width:0 !important;
    min-width:0 !important;
    opacity:0;
    background:transparent !important;
}
.hp-flow-val {
    font-size:.98rem; font-weight:600;
    min-width:70px; text-align:right; letter-spacing:.04em;
}
.hp-flow-val.electric { color:var(--vz-info); }
.hp-flow-val.heat     { color:var(--hp-hot); }
.hp-flow-val.idle {
    color:var(--hp-muted);
    font-size:.9rem;
}

/* Efficiency ratio */
.hp-efficiency {
    text-align:center; min-width:120px;
}
.hp-eff-label {
    font-size:.66rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--hp-subtle); margin-bottom:.4rem; font-weight:600;
}
.hp-eff-ratio {
    font-size:1.2rem; font-weight:700;
    color:var(--hp-hot); opacity:.8; letter-spacing:.02em;
    transition: color .5s;
}
.hp-eff-ratio.idle {
    color:var(--hp-heading);
    opacity:.72;
}
.hp-eff-arrow {
    font-size:1.3rem; opacity:.25; display:block; margin-top:.15rem;
}
.hp-eff-arrow.idle {
    opacity:.14;
}
.hp-eff-arrow.zombie {
    color:#9fe870;
    opacity:.24;
}
.hp-eff-note {
    display:none;
    margin-top:.45rem;
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--hp-subtle);
    font-weight:700;
}
.hp-eff-note.show {
    display:block;
}
.hp-eff-note.zombie {
    color:#a6e36d;
    opacity:.82;
}

/* DATA CARDS ROW */
.hp-cards {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:1rem; margin-bottom:1.4rem;
}
@media(max-width:768px){ .hp-cards { grid-template-columns:1fr; } }
@media(max-width:992px){
    .hp-cop-hero {
        grid-template-columns:1fr;
    }
    .hp-cop-val-wrap,
    .hp-efficiency {
        text-align:left;
    }
}

.hp-card {
    background:var(--hp-surface); border:1px solid var(--hp-border);
    border-radius:5px; padding:1.15rem 1.2rem;
    position:relative; overflow:hidden;
    transition: border-color .4s, box-shadow .4s;
    box-shadow: var(--hp-shadow);
}
.hp-card > * {
    position: relative;
    z-index: 1;
}
.hp-card-trend {
    position: absolute;
    inset: .55rem .55rem auto .55rem;
    height: calc(100% - 1.1rem);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 4px;
}
.hp-card-trend::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.02) 52%, rgba(15, 23, 42, 0.10) 100%),
        linear-gradient(90deg, rgba(15, 23, 42, 0.20), rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.00) 82%, rgba(15, 23, 42, 0.18));
}
.hp-card-trend-chip {
    position: absolute;
    top: .6rem;
    right: .7rem;
    padding: .16rem .38rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--vz-info-rgb), .08);
    background: rgba(var(--vz-info-rgb), .05);
    color: rgba(var(--vz-info-rgb), .72);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hp-card-trend-select {
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 2;
    padding: .2rem 1.1rem .2rem .48rem;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - .55rem) calc(50% - 1px),
        calc(100% - .32rem) calc(50% - 1px);
    background-size: .24rem .24rem, .24rem .24rem;
    background-repeat: no-repeat;
}
.hp-card-trend-select:focus {
    outline: none;
    border-color: rgba(var(--vz-primary-rgb), .18);
    box-shadow: 0 0 0 .16rem rgba(var(--vz-primary-rgb), .08);
}
.hp-card-trend-select option {
    color: var(--hp-heading);
    background: var(--hp-surface);
}
.hp-card-trend-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
    pointer-events: auto;
    cursor: crosshair;
}
.hp-card-trend-grid {
    fill: none;
    stroke-width: .7;
}
.hp-card-trend-area {
    fill: currentColor;
}
.hp-card-trend-line {
    fill: none;
    stroke-width: 1;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}
.hp-card-trend-focus-line {
    fill:none;
    stroke:rgba(255,255,255,.18);
    stroke-width:.8;
    vector-effect:non-scaling-stroke;
    opacity:0;
}
.hp-card-trend-focus-dot {
    fill:var(--hp-heading);
    stroke:rgba(15, 23, 42, .5);
    stroke-width:.8;
    vector-effect:non-scaling-stroke;
    opacity:0;
}
.hp-card-trend-empty {
    fill: none;
    stroke: rgba(var(--vz-light-rgb), .06);
    stroke-width: 1.1;
    stroke-dasharray: 4 5;
}
.hp-card-trend-flow .hp-card-trend-chip {
    border-color: rgba(var(--vz-info-rgb), .08);
    background-color: rgba(var(--vz-info-rgb), .05);
    color: rgba(var(--vz-info-rgb), .72);
}
.hp-card-trend-flow .hp-card-trend-grid {
    stroke: rgba(var(--vz-info-rgb), .03);
}
.hp-card-trend-flow .hp-card-trend-area {
    color: rgba(var(--vz-info-rgb), .10);
}
.hp-card-trend-flow .hp-card-trend-line {
    stroke: rgba(var(--vz-info-rgb), .34);
}
.hp-card-trend-dhw .hp-card-trend-chip {
    border-color: rgba(var(--vz-danger-rgb), .08);
    background-color: rgba(var(--vz-danger-rgb), .05);
    color: rgba(var(--vz-danger-rgb), .72);
}
.hp-card-trend-dhw .hp-card-trend-grid {
    stroke: rgba(var(--vz-danger-rgb), .026);
}
.hp-card-trend-dhw .hp-card-trend-area {
    color: rgba(var(--vz-danger-rgb), .08);
}
.hp-card-trend-dhw .hp-card-trend-line {
    stroke: rgba(var(--vz-danger-rgb), .30);
}
.hp-card-trend-space .hp-card-trend-chip {
    border-color: rgba(var(--vz-warning-rgb), .08);
    background-color: rgba(var(--vz-warning-rgb), .04);
    color: rgba(var(--vz-warning-rgb), .68);
}
.hp-card-trend-space .hp-card-trend-grid {
    stroke: rgba(var(--vz-warning-rgb), .026);
}
.hp-card-trend-space .hp-card-trend-area {
    color: rgba(var(--vz-warning-rgb), .075);
}
.hp-card-trend-space .hp-card-trend-line {
    stroke: rgba(var(--vz-warning-rgb), .28);
}
.hp-spark-tooltip {
    position:fixed;
    z-index:1200;
    min-width:120px;
    max-width:220px;
    padding:.5rem .65rem;
    border-radius:5px;
    border:1px solid rgba(var(--vz-light-rgb), .12);
    background:rgba(15, 23, 42, .92);
    color:#fff;
    box-shadow:0 10px 30px rgba(0, 0, 0, .22);
    pointer-events:none;
    opacity:0;
    transform:translateY(4px);
    transition:opacity .12s ease, transform .12s ease;
    backdrop-filter:blur(8px);
}
.hp-spark-tooltip.show {
    opacity:1;
    transform:translateY(0);
}
.hp-spark-tooltip-time {
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.62);
    font-weight:700;
}
.hp-spark-tooltip-value {
    margin-top:.18rem;
    font-size:.84rem;
    color:#fff;
    font-weight:700;
}
.hp-card::after {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--hp-hot), transparent);
    opacity:.25;
}
.hp-card-icon {
    width:2.5rem;
    height:2.5rem;
    border-radius:5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.05rem;
    color:var(--vz-primary);
    background:rgba(var(--vz-primary-rgb), 0.12);
    opacity:.9;
    margin-bottom:.95rem;
    transition: opacity .3s, color .3s;
}
.hp-card-label {
    font-size:.72rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--hp-subtle); margin-bottom:.45rem; font-weight:600;
}
.card-ashp-flowrate-rt .hp-card-sub,
.card-ashp-dhw-rt .hp-card-sub,
.card-ashp-space-temps-rt .hp-card-sub {
    max-width: 68%;
}
.hp-card-val {
    font-size:clamp(1.85rem, 2.6vw, 2.15rem); font-weight:700;
    line-height:1; color:var(--hp-heading); transition: color .4s;
    display:inline;
    letter-spacing:-.04em;
}
.hp-card-unit {
    font-size:.82rem; color:var(--hp-subtle);
    margin-left:.3rem;
    font-weight:600;
}
.hp-card-badge {
    display:inline-block; font-size:.68rem;
    letter-spacing:.08em; padding:2px 10px; border-radius:999px;
    background:rgba(var(--vz-danger-rgb),.12); color:var(--hp-hot);
    border:1px solid rgba(var(--vz-danger-rgb),.2); margin-bottom:.6rem;
    transition: background .4s, color .4s, border-color .4s;
}
.hp-card-badge.cold  { background:rgba(var(--vz-info-rgb),.12); color:var(--hp-cool); border-color:rgba(var(--vz-info-rgb),.2); }
.hp-card-badge.warm  { background:rgba(var(--vz-warning-rgb),.12); color:var(--hp-warm); border-color:rgba(var(--vz-warning-rgb),.2); }
.hp-card-badge.hot   { background:rgba(var(--vz-danger-rgb),.12); color:var(--hp-hot);  border-color:rgba(var(--vz-danger-rgb),.2); }
.hp-card-badge.scald { background:rgba(var(--vz-danger-rgb),.16);  color:var(--hp-hot); border-color:rgba(var(--vz-danger-rgb),.28); }
.hp-card-sub {
    font-size:.8rem; color:var(--hp-muted);
    margin-top:.5rem; line-height:1.6;
}
.hp-card-sub b { color:var(--hp-heading); font-weight:600; }

/* DHW cycle indicator */
.hp-dhw-active {
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.72rem; letter-spacing:.06em;
    margin-top:.5rem; color:var(--hp-muted);
}
.hp-dhw-dot {
    width:6px; height:6px; border-radius:50%; background:#555;
    transition: background .3s;
}
.hp-dhw-dot.active {
    background:var(--hp-hot);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Steam effect */
.hp-card.steaming::before,
.hp-card.steaming::after {
    content:''; position:absolute; top:-10px;
    width:50px; height:50px;
    background:radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 60%);
    border-radius:50%;
    animation: steam 3s infinite ease-in-out;
}
.hp-card.steaming::before { left:75%; }
.hp-card.steaming::after  { left:85%; animation-delay:1.5s; }
@keyframes steam {
    0%   { opacity:0; transform:translateY(0) scale(.5); }
    50%  { opacity:.7; transform:translateY(-20px) scale(1); }
    100% { opacity:0; transform:translateY(-40px) scale(1.5); }
}

/* ENTRY ANIMATIONS */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}
.hp-cop-hero { animation: fadeUp .5s ease both; }
.hp-card:nth-child(1) { animation: fadeUp .5s .08s ease both; }
.hp-card:nth-child(2) { animation: fadeUp .5s .14s ease both; }
.hp-card:nth-child(3) { animation: fadeUp .5s .20s ease both; }