.energy-page { max-width: 1160px; }
.energy-panel { padding: clamp(16px,3vw,30px); margin: 24px 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; min-width: 0; }
.energy-heading { display: flex; align-items: center; gap: 16px; }
.energy-heading h2 { margin: 4px 0; font-size: clamp(1.3rem,3vw,1.9rem); }
.energy-step { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: #186c53; font-weight: 800; font-size: 1.2rem; }
.energy-page p, .energy-page li, .energy-page label { font-size: 1rem; line-height: 1.7; }
.energy-page label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.energy-fields { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin: 22px 0; }
.energy-page input, .energy-page select { width: 100%; min-width: 0; min-height: 50px; font-size: max(16px,1rem); }
#energy-form .button, .energy-help .button { min-height: 52px; max-width: 100%; white-space: normal; font-size: max(16px,1rem); overflow-wrap: anywhere; text-align: center; }
.energy-page :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.energy-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.energy-actions .button { flex: 1 1 180px; }
.energy-page .energy-hint { color: var(--muted); font-size: 1rem; }
.energy-device { min-width: 0; margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.energy-device-head { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.energy-device-head > label:first-child { flex: 1 1 180px; }
.energy-device-head > label { flex: 0 1 90px; }
#energy-form .energy-priority { flex: 1 1 150px; flex-direction: row; align-items: center; min-height: 50px; }
#energy-form .energy-priority input { width: 22px; min-height: 22px; height: 22px; flex: 0 0 22px; }
.energy-device .energy-fields { grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 12px; }
.energy-device .energy-radio-fields { grid-template-columns: repeat(5,minmax(0,1fr)); }
.energy-usage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.energy-add { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; }
.energy-add label { flex: 1 1 240px; }
.energy-add .button { flex: 1 1 180px; }
.energy-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.energy-summary > div { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.energy-summary strong { display: block; font-size: clamp(1.5rem,4vw,2.1rem); color: var(--green-dark); font-variant-numeric: tabular-nums; }
.energy-summary span { display: block; font-size: 1rem; }
.energy-scenarios { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.energy-scenario { min-width: 0; padding: 20px; border: 1px solid var(--line); border-top: 5px solid var(--energy-color); border-radius: 16px; }
.energy-scenario h3 { margin-top: 0; font-size: 1.2rem; }
.energy-duration { display: block; font-size: clamp(1.5rem,4vw,2rem); font-variant-numeric: tabular-nums; }
.energy-scenario progress { display: block; width: 100%; height: 14px; accent-color: var(--energy-color); }
.energy-scenario p { margin: 14px 0; }
.energy-normal { --energy-color: #b25d20; }
.energy-saver { --energy-color: #2566b3; }
.energy-critical { --energy-color: #14805e; }
.energy-chart { margin: 28px 0; }
.energy-chart svg { display: block; width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.energy-grid { stroke: var(--line); fill: none; }
.energy-line { stroke: var(--energy-color); stroke-width: 3; vector-effect: non-scaling-stroke; fill: none; }
.energy-saver.energy-line { stroke-dasharray: 9 5; }
.energy-critical.energy-line { stroke-dasharray: 3 4; }
.energy-legend, .energy-axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 1rem; margin: 12px 0; }
.energy-legend span { border-left: 5px solid var(--energy-color); padding-left: 8px; }
.energy-savings { padding-left: 24px; }
.energy-savings li { padding: 12px 0; }
.energy-breakdown summary { cursor: pointer; min-height: 52px; padding: 12px 0; font-size: 1rem; font-weight: 700; }
.energy-breakdown ul { padding-left: 24px; }
.energy-page [hidden] { display: none !important; }
@media (max-width: 900px) { .energy-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } .energy-device .energy-radio-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) {
  .energy-summary, .energy-scenarios, .energy-usage, .energy-device .energy-fields { grid-template-columns: minmax(0,1fr); }
  .energy-panel { padding: 16px; }
  .energy-device { padding: 14px; }
}
@media (max-width: 420px) { .energy-fields { grid-template-columns: minmax(0,1fr); } .energy-heading { align-items: start; gap: 10px; } .energy-step { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .energy-page * { scroll-behavior: auto; transition: none; } }
.energy-device-power { margin-block: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.energy-device-power summary { cursor: pointer; font-weight: 750; line-height: 1.6; }
.energy-device-power[open] .energy-fields { margin-top: 16px; }
.energy-usage { padding: 16px; border-radius: 14px; background: var(--green-soft); }
.energy-scenario { border-top: 5px solid var(--green); box-shadow: var(--shadow); }
.energy-duration { font-variant-numeric: tabular-nums; }