#hecc-app{

    --bg:#11141b;
    --surface:#1a1f29;
    --surface-2:#212836;
    --line:#2c3444;
    --text:#eef1f6;
    --text-mute:#8b93a6;
    --text-dim:#5e6779;
    --electric:#f4c04a;
    --electric-dim:#5c4c22;
    --gas:#49c7e8;
    --gas-dim:#204651;
    --solar:#f0914a;
    --solar-dim:#4f3320;
    --heatpump:#8b8ff0;
    --heatpump-dim:#302f57;
    --good:#6fd19b;
    --bad:#e8657a;
    --radius:14px;
  
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  
  padding:24px;
  border-radius:20px;
  isolation:isolate;
}

  
  #hecc-app *{box-sizing:border-box;}
  
  
  @media (prefers-reduced-motion: reduce){
    #hecc-app *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  #hecc-app a{color:inherit;}
  #hecc-app .hecc-wrap{max-width:1180px;margin:0 auto;padding:32px 20px 80px;}

  /* ---------- Header ---------- */
  #hecc-app header.hecc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap;}
  #hecc-app .hecc-brand{display:flex;align-items:center;gap:10px;}
  #hecc-app .hecc-brand-mark{
    width:34px;height:34px;border-radius:8px;
    background:linear-gradient(135deg,var(--electric),var(--solar));
    display:flex;align-items:center;justify-content:center;
    font-size:18px;flex:none;
  }
  #hecc-app .hecc-brand-name{font-family:'Big Shoulders Display',sans-serif;font-weight:800;font-size:20px;letter-spacing:0.02em;color:var(--text);}
  #hecc-app .hecc-brand-tag{font-size:12px;color:var(--text-dim);margin-top:-2px;}
  #hecc-app .hecc-status-pill{
    font-size:11px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
    color:var(--good);border:1px solid rgba(111,209,155,0.4);background:rgba(111,209,155,0.08);
    padding:5px 10px;border-radius:100px;
  }

  /* ---------- Hero ---------- */
  #hecc-app .hecc-hero{
    background:radial-gradient(120% 140% at 20% -10%, #232b3b 0%, var(--surface) 55%);
    border:1px solid var(--line);
    border-radius:20px;
    padding:36px 32px 30px;
    margin-bottom:28px;
    position:relative;
    overflow:hidden;
  }
  #hecc-app .hecc-hero h2{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:900;
    font-size:clamp(28px,4vw,42px);
    line-height:1.02;
    margin:0 0 8px;
    letter-spacing:0.01em;
  }
  #hecc-app .hecc-hero p.hecc-sub{color:var(--text-mute);font-size:15px;max-width:520px;margin:0 0 26px;}

  #hecc-app .hecc-meter-row{display:flex;gap:36px;align-items:center;flex-wrap:wrap;}

  /* Gauge */
  #hecc-app .hecc-gauge-box{flex:none;width:260px;max-width:100%;}
  #hecc-app .hecc-gauge-caption{text-align:center;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);margin-top:2px;}

  /* Digital readout */
  #hecc-app .hecc-readout{flex:1;min-width:260px;}

  @media (max-width:480px){
    #hecc-app .hecc-wrap{padding:20px 14px 60px;}
    #hecc-app .hecc-hero{padding:24px 18px 22px;}
    #hecc-app .hecc-meter-row{flex-direction:column;align-items:stretch;}
    #hecc-app .hecc-gauge-box{width:100%;max-width:220px;margin:0 auto;}
    #hecc-app .hecc-readout{min-width:0;text-align:center;}
    #hecc-app .hecc-chips{justify-content:center;}
    #hecc-app .hecc-digits{justify-content:center;}
  }
  #hecc-app .hecc-readout-label{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
  #hecc-app .hecc-digits{
    font-family:'IBM Plex Mono',monospace;
    font-weight:700;
    font-size:clamp(40px,6vw,64px);
    color:var(--text);
    display:flex;align-items:baseline;gap:2px;
  }
  #hecc-app .hecc-digits .hecc-cents{font-size:0.4em;color:var(--text-mute);margin-left:4px;}
  #hecc-app .hecc-digits span.hecc-tick{
    display:inline-block;
    transition:transform 0.25s ease, opacity 0.25s ease;
  }
  #hecc-app .hecc-digits.hecc-flip span.hecc-tick{animation:heccTickFlip 0.35s ease;}
  @keyframes heccTickFlip{
    0%{transform:translateY(-6px);opacity:0.3;}
    100%{transform:translateY(0);opacity:1;}
  }
  #hecc-app .hecc-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
  #hecc-app .hecc-chip{
    display:flex;align-items:center;gap:7px;
    background:var(--surface-2);border:1px solid var(--line);
    padding:7px 12px;border-radius:100px;font-size:13px;color:var(--text-mute);
  }
  #hecc-app .hecc-chip .hecc-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  #hecc-app .hecc-chip b{color:var(--text);font-weight:600;font-family:'IBM Plex Mono',monospace;font-size:12.5px;}

  /* ---------- Main layout ---------- */
  #hecc-app .hecc-layout{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start;}
  @media (max-width:860px){#hecc-app .hecc-layout{grid-template-columns:1fr;}}

  #hecc-app .hecc-panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
  }
  #hecc-app .hecc-panel + .hecc-panel{margin-top:22px;}
  #hecc-app .hecc-panel h2{
    font-family:'Big Shoulders Display',sans-serif;
    font-weight:700;font-size:19px;margin:0 0 4px;letter-spacing:0.01em;
  }
  #hecc-app .hecc-panel .hecc-hint{font-size:12.5px;color:var(--text-dim);margin:0 0 18px;}

  #hecc-app .hecc-field{margin-bottom:16px;}
  #hecc-app .hecc-field:last-child{margin-bottom:0;}
  #hecc-app .hecc-field label{
    display:flex;justify-content:space-between;align-items:baseline;
    font-size:12.5px;color:var(--text-mute);margin-bottom:6px;
  }
  #hecc-app .hecc-field label span.hecc-val{font-family:'IBM Plex Mono',monospace;color:var(--text);font-size:12.5px;}
  #hecc-app input[type=range]{
    width:100%;height:4px;border-radius:2px;background:var(--surface-2);
    -webkit-appearance:none;appearance:none;outline:none;accent-color:var(--electric);
  }
  #hecc-app input[type=range]:focus-visible{outline:2px solid var(--electric);outline-offset:4px;}
  #hecc-app select, #hecc-app input[type=number]{
    width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
    padding:9px 10px;border-radius:8px;font-size:13.5px;font-family:'Inter',sans-serif;
  }
  #hecc-app select:focus-visible, #hecc-app input[type=number]:focus-visible{outline:2px solid var(--electric);outline-offset:2px;}
  #hecc-app .hecc-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  #hecc-app .hecc-segmented{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:3px;}
  #hecc-app .hecc-segmented button{
    flex:1;background:transparent;border:none;color:var(--text-mute);font-size:12.5px;font-weight:600;
    padding:8px 4px;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;transition:background .15s, color .15s;
  }
  #hecc-app .hecc-segmented button.hecc-active{background:var(--electric);color:#1a1508;}
  #hecc-app .hecc-segmented button:focus-visible{outline:2px solid var(--electric);outline-offset:2px;}

  #hecc-app .hecc-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  #hecc-app .hecc-toggle-row span{font-size:13.5px;color:var(--text);font-weight:500;}
  #hecc-app .hecc-switch{position:relative;width:42px;height:24px;flex:none;}
  #hecc-app .hecc-switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;}
  #hecc-app .hecc-slider-pill{
    position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--line);
    border-radius:100px;transition:background .2s;
  }
  #hecc-app .hecc-slider-pill::before{
    content:"";position:absolute;width:16px;height:16px;left:3px;top:2px;
    background:var(--text-dim);border-radius:50%;transition:transform .2s, background .2s;
  }
  #hecc-app .hecc-switch input:checked + .hecc-slider-pill{background:var(--solar-dim);border-color:var(--solar);}
  #hecc-app .hecc-switch input:checked + .hecc-slider-pill::before{transform:translateX(18px);background:var(--solar);}
  #hecc-app .hecc-switch input:focus-visible + .hecc-slider-pill{outline:2px solid var(--solar);outline-offset:2px;}

  #hecc-app .hecc-solar-fields{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  #hecc-app .hecc-solar-fields.hecc-open{max-height:400px;}

  #hecc-app button.hecc-reset{
    width:100%;margin-top:18px;background:transparent;border:1px solid var(--line);color:var(--text-mute);
    padding:10px;border-radius:9px;font-size:12.5px;cursor:pointer;font-family:'Inter',sans-serif;
  }
  #hecc-app button.hecc-reset:hover{color:var(--text);border-color:var(--text-dim);}

  /* ---------- Comparison bars ---------- */
  #hecc-app .hecc-bars{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
  #hecc-app .hecc-bar-row{display:flex;align-items:center;gap:12px;}
  #hecc-app .hecc-bar-label{width:120px;flex:none;font-size:13px;color:var(--text-mute);display:flex;align-items:center;gap:7px;}
  #hecc-app .hecc-bar-label .hecc-dot{width:9px;height:9px;border-radius:50%;flex:none;}
  #hecc-app .hecc-bar-track{flex:1;background:var(--surface-2);border-radius:100px;height:14px;position:relative;overflow:hidden;}
  #hecc-app .hecc-bar-fill{height:100%;border-radius:100px;transition:width .4s ease;}
  #hecc-app .hecc-bar-amount{width:80px;flex:none;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text);}
  #hecc-app .hecc-bar-row.hecc-current .hecc-bar-label{color:var(--text);font-weight:600;}
  #hecc-app .hecc-bar-row.hecc-current .hecc-bar-track{box-shadow:0 0 0 1px var(--electric) inset;}

  /* ---------- Solar payback ---------- */
  #hecc-app .hecc-solar-empty{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    background:var(--surface-2);border:1px dashed var(--line);border-radius:10px;padding:16px 18px;
    font-size:13.5px;color:var(--text-dim);
  }
  #hecc-app .hecc-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2px;}
  @media (max-width:560px){#hecc-app .hecc-stat-grid{grid-template-columns:1fr 1fr;}}
  #hecc-app .hecc-stat{
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 14px 12px;
  }
  #hecc-app .hecc-stat .hecc-stat-label{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;}
  #hecc-app .hecc-stat .hecc-stat-value{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:20px;color:var(--text);}
  #hecc-app .hecc-stat .hecc-stat-value.hecc-good{color:var(--good);}
  #hecc-app .hecc-stat .hecc-stat-value.hecc-solar{color:var(--solar);}

  #hecc-app .hecc-chart-wrap{margin-top:18px;}
  #hecc-app .hecc-legend{display:flex;gap:16px;font-size:12px;color:var(--text-mute);margin-bottom:8px;}
  #hecc-app .hecc-legend span{display:flex;align-items:center;gap:6px;}
  #hecc-app .hecc-legend .hecc-dot{width:8px;height:8px;border-radius:50%;}

  #hecc-app footer.hecc-note{
    margin-top:28px;font-size:12px;color:var(--text-dim);line-height:1.6;
    border-top:1px solid var(--line);padding-top:16px;
  }