/* CSS domain: energy */
    .energy-page {
      width: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-rows: 1fr;
      gap: var(--gap);
      background: var(--bg);
      color: var(--text);
      padding: var(--dashboard-page-padding);
      overflow: hidden;
    }

    .energy-layout {
      display: grid;
      grid-template-rows: auto auto auto auto auto;
      gap: var(--dashboard-energy-layout-gap);
      min-height: 0;
    }

    .energy-hero-grid {
      display: grid;
      grid-template-columns: 1.45fr 0.95fr;
      gap: var(--dashboard-energy-grid-gap);
    }

    .energy-panel {
      position: relative;
      justify-content: flex-start;
      gap: var(--dashboard-panel-gap);
      padding: var(--dashboard-panel-padding);
      overflow: hidden;
    }

    .energy-hero-grid .energy-panel {
      padding: var(--dashboard-energy-hero-panel-padding);
      gap: var(--dashboard-energy-hero-panel-gap);
    }

    .energy-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: var(--dashboard-card-inset);
    }

    .energy-panel-net {
      background:
        radial-gradient(circle at top right, rgba(93, 177, 255, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(31,44,64,0.96), rgba(23,26,31,0.98));
    }

    .energy-panel-price {
      background:
        radial-gradient(circle at top right, rgba(255, 192, 93, 0.18), transparent 44%),
        linear-gradient(180deg, rgba(59,44,22,0.96), rgba(29,24,19,0.98));
      box-shadow:
        0 0 0 1px rgba(255, 193, 102, 0.05),
        0 14px 28px rgba(0,0,0,0.2),
        0 0 42px rgba(210, 137, 52, 0.14),
        inset 0 0 56px rgba(255, 183, 77, 0.05);
    }

    .energy-panel-price.is-very-cheap,
    .energy-panel-price.is-cheap {
      background:
        radial-gradient(circle at top right, rgba(116, 220, 148, 0.2), transparent 44%),
        linear-gradient(180deg, rgba(28,58,37,0.96), rgba(22,28,23,0.98));
      box-shadow:
        0 0 0 1px rgba(129, 235, 166, 0.05),
        0 14px 28px rgba(0,0,0,0.2),
        0 0 42px rgba(86, 193, 117, 0.16),
        inset 0 0 56px rgba(123, 231, 154, 0.06);
    }

    .energy-panel-price.is-normal {
      background:
        radial-gradient(circle at top right, rgba(255, 206, 102, 0.2), transparent 44%),
        linear-gradient(180deg, rgba(66,51,25,0.96), rgba(30,25,19,0.98));
      box-shadow:
        0 0 0 1px rgba(255, 212, 116, 0.05),
        0 14px 28px rgba(0,0,0,0.2),
        0 0 42px rgba(214, 160, 56, 0.15),
        inset 0 0 56px rgba(255, 197, 86, 0.05);
    }

    .energy-panel-price.is-expensive,
    .energy-panel-price.is-very-expensive {
      background:
        radial-gradient(circle at top right, rgba(255, 132, 102, 0.22), transparent 44%),
        linear-gradient(180deg, rgba(68,34,24,0.96), rgba(31,22,19,0.98));
      box-shadow:
        0 0 0 1px rgba(255, 154, 124, 0.05),
        0 14px 28px rgba(0,0,0,0.2),
        0 0 46px rgba(220, 95, 66, 0.18),
        inset 0 0 56px rgba(255, 140, 102, 0.06);
    }

    .energy-panel-label {
      font-size: var(--dashboard-label-size);
      font-weight: var(--dashboard-label-weight);
      color: var(--dashboard-label-color);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .energy-main-value {
      font-size: var(--dashboard-main-value-size);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-tight-line-height);
      letter-spacing: var(--dashboard-energy-main-letter-spacing);
    }

    .energy-price-value {
      font-size: var(--dashboard-price-value-size);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-tight-line-height);
      letter-spacing: var(--dashboard-energy-main-letter-spacing);
    }

    .energy-price-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: var(--dashboard-energy-row-gap);
    }

    .energy-price-meta {
      display: grid;
      gap: var(--dashboard-energy-meta-gap);
      justify-items: end;
      padding-top: var(--dashboard-energy-price-meta-top);
      min-width: var(--dashboard-energy-price-meta-width);
    }

    .energy-price-meta-row {
      display: inline-flex;
      align-items: center;
      gap: var(--dashboard-energy-meta-gap);
      font-size: var(--dashboard-energy-price-meta-size);
      color: rgba(255,255,255,0.72);
      line-height: var(--dashboard-energy-tight-line-height);
      white-space: nowrap;
    }

    .energy-price-meta-symbol {
      font-size: var(--dashboard-energy-price-symbol-size);
      color: rgba(255,255,255,0.54);
    }

    .energy-price-meta-value {
      font-weight: var(--dashboard-metric-value-weight);
      color: rgba(255,255,255,0.92);
      letter-spacing: var(--dashboard-energy-meta-value-letter-spacing);
    }

    .energy-status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--dashboard-energy-row-gap);
      flex-wrap: wrap;
    }

    .energy-status-text {
      font-size: var(--dashboard-energy-status-size);
      font-weight: var(--dashboard-status-weight);
      color: rgba(255,255,255,0.94);
    }

    .energy-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--dashboard-energy-pill-min-height);
      padding: var(--dashboard-energy-pill-padding);
      border-radius: var(--dashboard-pill-radius);
      font-size: var(--dashboard-energy-pill-size);
      font-weight: var(--dashboard-badge-weight);
      letter-spacing: var(--dashboard-energy-pill-letter-spacing);
      color: #f8fbff;
      background: rgba(255,255,255,0.1);
    }

    .energy-pill.is-import {
      background: rgba(93, 177, 255, 0.18);
      color: #bfe0ff;
    }

    .energy-pill.is-export {
      background: rgba(98, 214, 154, 0.18);
      color: #c7ffd9;
    }

    .energy-pill.is-neutral {
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.9);
    }

    .energy-pill.is-very-cheap {
      background: rgba(98, 214, 154, 0.18);
      color: #c7ffd9;
    }

    .energy-pill.is-cheap {
      background: rgba(128, 217, 107, 0.18);
      color: #d4ffbf;
    }

    .energy-pill.is-normal {
      background: rgba(255, 216, 102, 0.2);
      color: #ffe9a4;
    }

    .energy-pill.is-expensive,
    .energy-pill.is-very-expensive {
      background: rgba(255, 147, 92, 0.2);
      color: #ffd0ba;
    }

    .energy-panel-note {
      font-size: var(--dashboard-note-size);
      color: var(--dashboard-note-color);
      line-height: 1.35;
    }

    .energy-quarter-card {
      background:
        radial-gradient(circle at top right, rgba(95, 179, 255, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(29,31,36,0.98), rgba(23,24,29,0.98));
      min-height: 0;
      padding-bottom: var(--dashboard-energy-quarter-padding-bottom);
    }

    .energy-quarter-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--dashboard-energy-quarter-header-gap);
      margin-bottom: var(--dashboard-energy-quarter-header-margin);
    }

    .energy-quarter-title {
      font-size: var(--dashboard-title-size);
      font-weight: var(--dashboard-card-title-weight);
      line-height: 1.1;
    }

    .energy-quarter-subtitle {
      margin-top: var(--dashboard-energy-quarter-subtitle-top);
      font-size: var(--dashboard-meta-size);
      color: rgba(255,255,255,0.62);
      line-height: 1.35;
    }

    .energy-quarter-summary {
      font-size: var(--dashboard-meta-size);
      color: rgba(255,255,255,0.75);
      text-align: right;
      white-space: nowrap;
    }

    .energy-quarter-strip {
      height: var(--dashboard-energy-quarter-strip-height);
      display: grid;
      grid-template-columns: repeat(96, minmax(0, 1fr));
      align-items: end;
      gap: var(--dashboard-energy-quarter-strip-gap);
      margin-bottom: var(--dashboard-energy-quarter-strip-margin);
    }

    .energy-quarter-bar {
      border-radius: 999px;
      min-height: var(--dashboard-energy-quarter-bar-min-height);
      opacity: var(--dashboard-energy-quarter-bar-opacity);
      transition: var(--dashboard-energy-quarter-bar-transition);
    }

    .energy-quarter-bar.is-current {
      transform: translateY(var(--dashboard-energy-quarter-current-offset));
      box-shadow: var(--dashboard-energy-quarter-current-shadow);
      opacity: 1;
      filter: brightness(var(--dashboard-energy-quarter-current-brightness));
    }

    .energy-quarter-footer {
      display: grid;
      gap: var(--dashboard-energy-quarter-footer-gap);
      font-size: var(--dashboard-energy-quarter-footer-size);
      color: rgba(255,255,255,0.72);
      line-height: 1.25;
      margin-top: var(--dashboard-energy-quarter-footer-top);
    }

    .energy-quarter-axis {
      display: grid;
      grid-template-columns: repeat(96, minmax(0, 1fr));
      align-items: start;
      gap: var(--dashboard-energy-quarter-axis-gap);
      width: 100%;
      color: rgba(255,255,255,0.58);
      font-size: var(--dashboard-energy-quarter-axis-size);
      letter-spacing: var(--dashboard-energy-axis-letter-spacing);
    }

    .energy-quarter-axis-label {
      white-space: nowrap;
      transform: translateX(-50%);
      justify-self: start;
    }

    .energy-quarter-axis-label.is-start {
      transform: none;
    }

    .energy-quarter-axis-label.is-end {
      transform: translateX(-100%);
    }

    .energy-quarter-hints {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--dashboard-energy-quarter-hints-gap);
      font-size: var(--dashboard-energy-quarter-hints-size);
      color: rgba(255,255,255,0.68);
    }

    .energy-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--dashboard-energy-grid-gap);
    }

    .energy-stat-card {
      background:
        linear-gradient(180deg, rgba(34,35,40,0.96), rgba(24,24,27,0.98));
      min-height: var(--dashboard-energy-stat-card-min-height);
    }

    .energy-stat-title {
      font-size: var(--dashboard-label-size);
      font-weight: var(--dashboard-label-weight);
      color: rgba(255,255,255,0.64);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .energy-stat-value {
      font-size: var(--dashboard-stat-value-size);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-value-line-height);
      letter-spacing: var(--dashboard-energy-value-letter-spacing);
      margin-top: var(--dashboard-energy-stat-value-top);
    }

    .energy-stat-note {
      font-size: var(--dashboard-energy-stat-note-size);
      color: rgba(255,255,255,0.58);
      line-height: 1.35;
      margin-top: auto;
    }

    .energy-phase-card,
    .energy-context-card {
      background:
        linear-gradient(180deg, rgba(34,35,40,0.96), rgba(24,24,27,0.98));
    }

    .energy-phase-card {
      min-height: var(--dashboard-energy-phase-card-min-height);
    }

    .energy-context-card {
      min-height: var(--dashboard-energy-context-card-min-height);
    }

    .energy-section-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--dashboard-energy-section-header-gap);
      margin-bottom: var(--dashboard-energy-section-header-margin);
    }

    .energy-section-title {
      font-size: var(--dashboard-title-size);
      font-weight: var(--dashboard-card-title-weight);
      line-height: 1.1;
    }

    .energy-section-subtitle {
      font-size: var(--dashboard-meta-size);
      color: rgba(255,255,255,0.58);
      line-height: 1.35;
    }

    .energy-phase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--dashboard-energy-grid-gap);
    }

    .energy-source-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--dashboard-energy-grid-gap);
    }

    .energy-phase-item {
      border-radius: var(--dashboard-energy-item-radius);
      background: rgba(255,255,255,0.04);
      padding: var(--dashboard-energy-phase-item-padding);
      display: grid;
      gap: var(--dashboard-energy-phase-item-gap);
    }

    .energy-phase-name {
      font-size: var(--dashboard-energy-phase-name-size);
      font-weight: var(--dashboard-label-weight);
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .energy-phase-value {
      font-size: clamp(28px, 3.8vw, 42px);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-tight-line-height);
      letter-spacing: var(--dashboard-energy-value-letter-spacing);
    }

    .energy-phase-meta {
      font-size: var(--dashboard-energy-phase-meta-size);
      color: rgba(255,255,255,0.64);
      line-height: 1.35;
    }

    .energy-source-item {
      position: relative;
      overflow: hidden;
      border-radius: var(--dashboard-energy-item-radius);
      background: rgba(255,255,255,0.04);
      padding: var(--dashboard-energy-source-item-padding);
      display: grid;
      gap: var(--dashboard-energy-source-item-gap);
      align-content: start;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }

    .energy-source-item::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .energy-source-item.is-producing::before {
      opacity: 1;
      background: radial-gradient(circle at top right, rgba(255, 205, 112, 0.18), transparent 48%);
    }

    .energy-source-item.is-charging::before {
      opacity: 1;
      background: radial-gradient(circle at top right, rgba(113, 224, 139, 0.18), transparent 48%);
    }

    .energy-source-item.is-discharging::before {
      opacity: 1;
      background: radial-gradient(circle at top right, rgba(255, 146, 102, 0.18), transparent 48%);
    }

    .energy-source-name {
      font-size: var(--dashboard-label-size);
      font-weight: var(--dashboard-label-weight);
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .energy-source-value {
      font-size: var(--dashboard-source-value-size);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-tight-line-height);
      letter-spacing: var(--dashboard-energy-value-letter-spacing);
      margin-top: var(--dashboard-energy-source-value-top);
    }

    .energy-source-state {
      font-size: var(--dashboard-label-size);
      font-weight: var(--dashboard-status-weight);
      color: rgba(255,255,255,0.82);
      line-height: 1.3;
      min-height: var(--dashboard-energy-source-state-min-height);
    }

    .energy-source-note {
      font-size: var(--dashboard-note-size);
      color: rgba(255,255,255,0.56);
      line-height: 1.35;
      margin-top: auto;
    }

    .energy-context-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--dashboard-energy-grid-gap);
    }

    .energy-context-card.is-hidden {
      display: none;
    }

    .energy-context-item {
      border-radius: var(--dashboard-energy-context-item-radius);
      background: rgba(255,255,255,0.04);
      padding: var(--dashboard-energy-context-item-padding);
      display: grid;
      gap: var(--dashboard-energy-context-item-gap);
    }

    .energy-context-label {
      font-size: var(--dashboard-energy-context-label-size);
      font-weight: var(--dashboard-label-weight);
      color: rgba(255,255,255,0.58);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .energy-context-value {
      font-size: var(--dashboard-energy-context-value-size);
      font-weight: var(--dashboard-metric-value-weight);
      line-height: var(--dashboard-energy-value-line-height);
      letter-spacing: var(--dashboard-energy-context-letter-spacing);
    }

    .energy-context-note {
      font-size: var(--dashboard-energy-context-note-size);
      color: rgba(255,255,255,0.52);
      line-height: 1.35;
    }