.energy-calculator { margin-block: 2rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #c8d9cf; border-radius: 1rem; background: #fff; color: #183d2c; overflow-wrap: anywhere; }
.energy-calculator [hidden] { display: none !important; }
.energy-calculator__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.energy-calculator label { display: block; font-weight: 700; margin-bottom: .5rem; }
.energy-calculator input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .7rem; border: 1px solid #64766c; border-radius: .4rem; background: #fff; color: #183d2c; font: inherit; }
.energy-calculator input[aria-invalid="true"] { border-color: #9d2222; }
.energy-calculator__fields p { margin: .5rem 0; font-size: .95rem; }
.energy-calculator__error { min-height: 1.5em; color: #9d2222; }
.energy-calculator button { min-height: 44px; padding: .75rem 1rem; border: 0; border-radius: .4rem; background: #185b39; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.energy-calculator :is(input, button, summary, a):focus-visible { outline: 3px solid #185b39; outline-offset: 4px; }
.energy-calculator__result { min-height: 6em; margin-top: 1rem; font-weight: 700; }
.energy-calculator summary { cursor: pointer; min-height: 44px; padding-block: .5rem; font-weight: 700; }
.energy-calculator a { color: #185b39; text-decoration: underline; }
@media (max-width: 600px) { .energy-calculator__fields { grid-template-columns: 1fr; gap: .75rem; } }