[data-integration=electricity] .electricity-status{font-family:inherit;cursor:pointer;transition:background .2s,color .2s,transform .14s ease}
[data-integration=electricity] .electricity-status:active{transform:scale(.94)}
[data-integration=electricity] .electricity-status.is-pressed{animation:electricity-status-press .34s ease-out}
@keyframes electricity-status-press{0%{transform:scale(1);box-shadow:0 0 0 0 #58c6b259}30%{transform:scale(.94)}65%{transform:scale(1.04)}100%{transform:scale(1);box-shadow:0 0 0 7px #58c6b200}}
[data-integration=electricity][data-state=connected] .electricity-status{color:#448c83;border-color:#a0d7cd80;background:#e1f4ee80}
[data-integration=electricity][data-state=stale] .electricity-status{color:#aa8357;background:#fff2dc80}
[data-integration=electricity] .electricity-status:focus-visible{outline:2px solid #17afdd;outline-offset:3px}
[data-integration=electricity] .electricity-value{flex:none;gap:8px}
.electricity-power{margin-left:auto;max-width:60%;text-align:right;color:#829ab4;font-size:11px;line-height:1.5;white-space:nowrap}
.electricity-power strong{font-size:15px;color:#426982;font-weight:550}
.electricity-chart{position:relative;flex:1;min-height:0;width:100%;color:#1cb3df;display:flex;align-items:center;justify-content:center;overflow:hidden}
.electricity-chart svg{display:block;width:100%;height:100%;overflow:visible;stroke:none}
.electricity-chart .energy-grid{stroke:#a7c2dc35;stroke-width:1;vector-effect:non-scaling-stroke}
.electricity-chart .energy-bar{fill:currentColor;opacity:.36;transition:opacity .2s}
.electricity-chart .energy-bar.today{opacity:.85}.electricity-chart .energy-bar:hover{opacity:1}
.electricity-chart text{fill:#8b9eb8;stroke:none;font-size:9px;font-family:inherit}
.electricity-empty{font-size:10px;color:#96a9c0;text-align:center}
.electricity-footnote{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#8b9eb8;line-height:1.4;margin-top:4px;flex:none;white-space:nowrap}
.electricity-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid #e1eaf1;border-radius:22px;padding:28px;background:#f3f8fd;color:#35506d;box-shadow:0 20px 70px #2b466b35;font-family:inherit}
.electricity-dialog::backdrop{background:#253c5855;backdrop-filter:blur(6px)}
.electricity-dialog[open]{animation:electricity-dialog-enter 320ms cubic-bezier(.16,1,.3,1) both;transform-origin:50% 45%}
.electricity-dialog[open]::backdrop{animation:settings-backdrop-enter 260ms ease both}
.electricity-dialog[open].is-closing{animation:electricity-dialog-leave 180ms ease both;pointer-events:none}
.electricity-dialog[open].is-closing::backdrop{animation:settings-backdrop-leave 180ms ease both}
@keyframes electricity-dialog-enter{from{opacity:0;transform:translateY(18px) scale(.94)}65%{opacity:1;transform:translateY(-2px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes electricity-dialog-leave{to{opacity:0;transform:translateY(8px) scale(.98)}}
.electricity-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.electricity-dialog h2{margin:0;font-size:22px;line-height:1.4}.electricity-dialog p{font-size:16px;line-height:1.8;color:#748ba6}
.electricity-dialog .icon-button{flex:none;width:36px;height:36px;font-size:24px}
.electricity-dialog .energy-connection{white-space:pre-line}
.electricity-dialog .energy-qr{display:block;width:240px;max-width:100%;height:auto;margin:15px auto;border:10px solid #fff;border-radius:10px}
.electricity-dialog [hidden]{display:none}
.electricity-dialog .energy-login{width:100%;border:0;border-radius:12px;background:#28acd6;color:white;padding:12px;font:inherit;font-size:16px;cursor:pointer}
.electricity-dialog .energy-login:disabled{opacity:.5;cursor:wait}
.electricity-dialog[data-readonly=true] .energy-login:disabled{cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
  [data-integration=electricity] .electricity-status{transition:none}
  [data-integration=electricity] .electricity-status:active{transform:none}
  [data-integration=electricity] .electricity-status.is-pressed,
  .electricity-dialog[open],.electricity-dialog[open]::backdrop,
  .electricity-dialog[open].is-closing,.electricity-dialog[open].is-closing::backdrop{animation:none}
}
@media(max-width:820px){.electricity-power{font-size:9px}.electricity-power strong{font-size:12px}.electricity-footnote{font-size:8px}}
@media(max-height:660px) and (min-width:821px){.electricity-footnote{font-size:8px}.electricity-chart text{font-size:8px}.electricity-power{font-size:9px}.electricity-power strong{font-size:12px}}