.energy-shell { width: min(1260px, calc(100% - 40px)); }
.energy-hero { grid-template-columns: 1.12fr .88fr; }
.energy-workspace { grid-template-columns: 282px minmax(0, 1fr); }
.energy-stage { padding-bottom: 24px; }
.energy-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--line); color: #c9d8d5; font-size: 12px; line-height: 1.5; }
.energy-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }
.energy-views { display: grid; grid-template-columns: minmax(190px,.7fr) minmax(210px,.8fr) minmax(330px,1.5fr); gap: 13px; }
.energy-view { min-width: 0; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.energy-view-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px 8px; border-bottom: 1px solid rgba(41,66,71,.7); }
.energy-view-head h3 { margin: 0; font-size: 13px; }
.energy-view-head span { color: var(--muted); font: 10px "DM Mono", monospace; }
.energy-motion-scene, .energy-graph { display: block; width: 100%; height: auto; }
.vertical-axis { stroke: #416168; stroke-width: 1; }
.energy-ground { stroke: #78908d; stroke-width: 2; }
.travel-path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 5 5; }
.energy-velocity { stroke: var(--orange); stroke-width: 2.4; }
.energy-body { fill: var(--orange); stroke: #fff1d8; stroke-width: 2; filter: drop-shadow(0 0 7px rgba(255,173,104,.6)); }
.energy-key-point { fill: var(--panel-deep); stroke: var(--cyan); stroke-width: 2; }
.apex-energy-point { stroke: var(--yellow); }
.energy-annotation { fill: #b0c6c3; font: 10px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 4px; }
.apex-energy-label { fill: var(--yellow); }
.height-grid-line, .energy-grid-line { stroke: #234047; stroke-width: 1; stroke-dasharray: 2 6; }
.energy-bars-panel { display: grid; min-height: 360px; padding: 26px 18px 18px; align-content: center; }
.energy-bars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: end; }
.energy-bar-item { display: grid; grid-template-rows: 190px 24px 24px; text-align: center; }
.energy-bar-track { position: relative; width: min(48px,75%); height: 180px; margin: auto; border: 1px solid #365158; background: #102226; }
.energy-bar-track i { position: absolute; inset: auto 0 0; display: block; height: 0; background: var(--orange); transition: height .08s linear; }
.energy-bar-item:nth-child(2) i { background: var(--cyan); }
.energy-bar-item:nth-child(3) i { background: var(--yellow); }
.energy-bar-item b { color: #dcebe8; font: 500 11px "DM Mono", monospace; }
.energy-bar-item span { color: var(--muted); font: 9px "DM Mono", monospace; white-space: nowrap; }
.energy-bars-panel p { margin: 14px 0 0; color: var(--muted); font: 10px "DM Mono", monospace; text-align: center; }
.energy-grid-axis { stroke: #66817e; stroke-width: 1.15; }
.kinetic-path, .potential-path, .total-path { fill: none; stroke-width: 2.4; }
.kinetic-path { stroke: var(--orange); }
.potential-path { stroke: var(--cyan); }
.total-path { stroke: var(--yellow); stroke-dasharray: 6 4; }
.energy-cursor { stroke: #d9eae7; stroke-width: 1.1; stroke-dasharray: 4 4; }
.kinetic-point { fill: var(--orange); }
.potential-point { fill: var(--cyan); }
.total-point { fill: var(--yellow); }
.energy-event-line { stroke: var(--yellow); stroke-width: 1; stroke-dasharray: 3 4; }
.energy-event-label { fill: var(--yellow); font: 9px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 4px; }
.energy-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.energy-metrics .metric:nth-child(n+5) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
.energy-metrics .metric:nth-child(5) { padding-left: 0; border-left: 0; }
.energy-metrics .metric-value { font-size: 17px; line-height: 1.35; }
.energy-metrics .compact { font-size: 13px; }
.related-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px !important; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

@media (max-width: 980px) { .energy-views { grid-template-columns: repeat(2,minmax(0,1fr)); } .graph-view { grid-column: 1 / -1; } }
@media (max-width: 900px) { .energy-workspace { grid-template-columns: 260px minmax(0,1fr); } }
@media (max-width: 820px) { .energy-shell { width: min(calc(100% - 24px),650px); } .energy-hero, .energy-workspace { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .energy-status { display: block; }
  .energy-status span { display: block; margin-top: 5px; }
  .energy-views { grid-template-columns: 1fr; }
  .graph-view { grid-column: auto; }
  .energy-motion-scene, .energy-graph { min-height: 330px; }
  .energy-annotation, .energy-motion-scene .axis-label { font-size: 13px; }
  .energy-graph .tick, .energy-graph .axis-label, .energy-event-label { font-size: 12px; }
  .energy-bars-panel { min-height: 320px; }
  .energy-bar-item { grid-template-rows: 155px 24px 24px; }
  .energy-bar-track { height: 145px; }
  .energy-metrics { grid-template-columns: 1fr; }
  .energy-metrics .metric, .energy-metrics .metric:nth-child(n) { margin-top: 0; padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .energy-metrics .metric:last-child { border-bottom: 0; }
}