:root {
      --bar: #16a34a;
      --bar-2: #2563eb;
      --bar-3: #ea580c;
      --bar-4: #eab308;
      --bar-5: #06b6d4;

      --fs-12: clamp(11px, 0.8vw, 12px);
      --fs-13: clamp(12px, 0.9vw, 13px);
      --fs-14: clamp(13px, 1vw, 14px);
      --fs-15: clamp(14px, 1.05vw, 15px);
      --fs-22: clamp(18px, 2.2vw, 22px);

      --r: 14px;
      --pad: clamp(10px, 1.4vw, 14px);

      --head-bg: #111418;
      --head-fg: #e6e6e6;
      --head-border: #1e2329;
      --btn-primary-bg: #111827;
      --btn-primary-fg: #ffffff;
      --btn-primary-border: #273244;
      --btn-primary-hover: #0b0f17;
      --btn-ghost-fg: #111827;
      --btn-ghost-border: rgba(17, 24, 39, .35);
      --btn-ghost-hover: rgba(17, 24, 39, .08);
      --muted: #9aa4b2;
    }

    :root[data-theme="light"] {
      --head-bg: #ffffff;
      --head-fg: #1f2937;
      --head-border: #d7dee8;
      --btn-primary-bg: #111827;
      --btn-primary-fg: #ffffff;
      --btn-primary-border: #273244;
      --btn-primary-hover: #0b0f17;
      --btn-ghost-fg: #1f2937;
      --btn-ghost-border: rgba(15, 23, 42, .25);
      --btn-ghost-hover: rgba(15, 23, 42, .08);
      --muted: #5f6c82;
    }

    .dash-wrap {
      padding: 16px max(16px, env(safe-area-inset-left, 0px)) 44px max(16px, env(safe-area-inset-right, 0px));
      max-width: 1280px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .dash-content {
      position: relative;
    }

    .dash-skeleton{
      position: fixed;
      inset: 0;
      z-index: 20;
      display: block;
      padding: 0;
      background:
        radial-gradient(1400px 720px at 8% -18%, rgba(59, 130, 246, 0.10), transparent 58%),
        radial-gradient(880px 520px at 104% 4%, rgba(22, 163, 74, 0.07), transparent 52%),
        var(--bg);
      color: #e6e6e6;
      pointer-events: all;
      opacity: 1;
      visibility: visible;
      overflow: auto;
    }
    html[data-dash-ready="1"] .dash-skeleton{
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease, visibility 0s linear .2s;
    }
    :root[data-theme="light"] .dash-skeleton{
      background:
        radial-gradient(1200px 800px at 10% -10%, #e7ecf2 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 10%, #f1f4f8 0%, transparent 55%),
        linear-gradient(160deg, #e6ebf2, #f1f4f8 70%);
    }
    .ds-inner{
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 0;
      padding: 0 0 24px;
    }
    .ds-header{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
      background: var(--head-bg);
      border-bottom: 1px solid var(--head-border);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .ds-body{
      padding: 16px max(16px, env(safe-area-inset-left, 0px)) 20px max(16px, env(safe-area-inset-right, 0px));
      display: grid;
      gap: 14px;
    }
    .ds-kpi{
      margin: 2px 0 4px;
      gap: 12px;
    }
    .dash-skeleton .ds-kpi.kpi-row > .kpi{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid var(--grid, #1f2937);
      background: var(--panel, #0f141b);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }
    :root[data-theme="light"] .dash-skeleton .ds-kpi.kpi-row > .kpi{
      background: #ffffff;
      border-color: #d7dee8;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    }
    .dash-skeleton .ds-kpi .kpi-ico.sk-ico-only{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid var(--grid, #1f2937);
      background: color-mix(in srgb, var(--row-bg, #111827) 76%, transparent);
      display: grid;
      place-items: center;
      padding: 0;
      flex-shrink: 0;
    }
    .dash-skeleton .ds-kpi .ds-kpi-ico-fill{
      width: 20px;
      height: 20px;
      border-radius: 7px;
    }
    .ds-kpi .kpi-body{
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ds-kpi .ds-kpi-line{
      height: 11px;
      width: 62%;
      max-width: 140px;
      border-radius: 8px;
    }
    .ds-kpi .ds-kpi-val{
      height: 22px;
      width: 72%;
      max-width: 168px;
      border-radius: 10px;
      margin-top: 0;
    }
    .ds-range-line{
      height: 12px;
      width: min(92%, 340px);
      border-radius: 8px;
      margin: 2px 2px 0;
    }
    .ds-data-panels{
      display: grid;
      gap: 20px;
    }
    .ds-charts-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .ds-chart-card{
      background: var(--panel, #0f141b);
      border: 1px solid var(--grid, #1f2937);
      border-radius: 16px;
      padding: 14px 14px 12px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
      min-height: clamp(380px, 52vh, 560px);
      height: clamp(400px, 54vh, 580px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    :root[data-theme="light"] .ds-chart-card{
      background: #ffffff;
      border-color: #d7dee8;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }
    .ds-chart-card__title{
      height: 15px;
      width: min(58%, 220px);
      border-radius: 999px;
      flex-shrink: 0;
    }
    .ds-chart-card__canvas{
      flex: 1 1 auto;
      min-height: 220px;
      border-radius: 12px;
      margin-top: 2px;
    }
    .ds-chart-card--hint .ds-chart-card__hint{
      height: 11px;
      width: 88%;
      max-width: 420px;
      border-radius: 8px;
      margin-top: 4px;
      flex-shrink: 0;
    }
    .ds-table-card{
      background: var(--panel, #0f141b);
      border: 1px solid var(--grid, #1f2937);
      border-radius: 16px;
      padding: 14px 14px 12px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }
    :root[data-theme="light"] .ds-table-card{
      background: #ffffff;
      border-color: #d7dee8;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }
    .ds-table-lead{
      height: 13px;
      width: min(48%, 260px);
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .ds-table{
      height: min(260px, 42vh);
      min-height: 200px;
      border-radius: 12px;
    }
    .ds-title{ display: none; }
    .ds-ctl{ width: 160px; height: 32px; border-radius: 8px; }
    .ds-header{ grid-template-columns: auto 1fr; }
    .ds-shimmer{
      background: linear-gradient(90deg, #1b2330, #273246, #1b2330);
      background-size: 200% 100%;
      animation: ds-shimmer 1.2s ease-in-out infinite;
    }
    :root[data-theme="light"] .ds-shimmer{
      background: linear-gradient(90deg, #e2e8f0, #f1f5f9, #e2e8f0);
    }
    @keyframes ds-shimmer{
      0%{ background-position: 200% 0; }
      100%{ background-position: -200% 0; }
    }
    @media (max-width: 980px){
      .ds-charts-grid{ grid-template-columns: 1fr; }
      .ds-chart-card{
        min-height: 360px;
        height: min(420px, 58vh);
      }
    }
    @media (max-width: 760px){
      .ds-chart-card{
        min-height: 340px;
        height: min(400px, 58vh);
      }
    }
    @media (max-width: 560px){
      .ds-chart-card{
        min-height: 320px;
        height: min(380px, 62vh);
      }
    }

    @media (max-width: 980px){
      .dash-skeleton .ds-kpi.kpi-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      .dash-skeleton .ds-kpi.kpi-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 380px) {
      .dash-skeleton .ds-kpi.kpi-row{
        grid-template-columns: 1fr;
      }
    }

    header {
      background: var(--head-bg);
      border-bottom: 1px solid var(--head-border);
      color: var(--head-fg);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 10px 14px;
      flex-wrap: wrap;
    }

    header .controls {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    @media (max-width: 760px) {
      header .controls {
        width: 100%;
        justify-content: flex-start;
      }
      header .page-title {
        flex: 1 1 100%;
      }
    }

    header .controls .muted {
      color: color-mix(in srgb, var(--head-fg) 72%, transparent);
      font-weight: 700;
      font-size: var(--fs-12);
    }
    .month-nav-label {
      min-width: 132px;
      text-align: center;
      font-size: 14px;
    }
    /* The shell already shows the page name; in-page header is picker + actions only. */
    header.hdr-controls > .page-title { display: none !important; }

    body.dash-scope {
      --row-bg: var(--bg-1);
      background:
        radial-gradient(1400px 720px at 8% -18%, rgba(59, 130, 246, 0.10), transparent 58%),
        radial-gradient(880px 520px at 104% 4%, rgba(22, 163, 74, 0.07), transparent 52%),
        var(--bg);
    }
    :root[data-theme="light"] body.dash-scope {
      background:
        radial-gradient(1200px 800px at 10% -10%, #e7ecf2 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 10%, #f1f4f8 0%, transparent 55%),
        linear-gradient(160deg, #e6ebf2, #f1f4f8 70%);
    }
    .dash-scope .kpi-row.dash-kpis {
      margin: 4px 0 18px;
      gap: 12px;
    }
    .dash-scope .kpi {
      border-radius: 14px;
      padding: 10px 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    :root[data-theme="light"] .dash-scope .kpi {
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    }
    .dash-scope .kpi:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    }
    :root[data-theme="light"] .dash-scope .kpi:hover {
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    }
    .dash-scope .kpi-ico {
      border-radius: 12px;
    }
    .dash-scope .kpi-label {
      color: var(--muted);
      font-weight: 800;
      font-size: var(--fs-12);
      letter-spacing: .02em;
    }
    .dash-scope .kpi-value {
      font-weight: 800;
      font-size: var(--fs-22);
      margin-top: 4px;
      color: var(--text);
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 980px) {
      .dash-scope .kpi-row.dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      .dash-scope .kpi-row.dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 8px 0 12px;
      }
      .dash-scope .kpi {
        padding: 12px;
      }
      .btn { height: 38px; padding: 0 12px; }
      .tbl { min-width: 640px; }
    }

    .dash-charts-grid {
      margin-top: 8px;
    }

    .charts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    @media (max-width: 980px) {
      .charts {
        grid-template-columns: 1fr;
      }
    }

    .chart-card {
      background: var(--panel, #0f141b);
      border: 1px solid var(--grid, #1f2937);
      border-radius: 16px;
      padding: 14px 14px 12px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
      min-height: clamp(380px, 52vh, 560px);
      height: clamp(400px, 54vh, 580px);
      display: flex;
      flex-direction: column;
    }
    @media (max-width: 760px) {
      .chart-card {
        min-height: 360px;
        height: min(420px, 58vh);
      }
    }
    @media (max-width: 560px) {
      .chart-card {
        min-height: 320px;
        height: min(380px, 62vh);
      }
    }

    .chart-card h3 {
      margin: 0 0 10px;
      font-size: var(--fs-14);
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--text);
      flex: 0 0 auto;
    }

    .chart-card canvas {
      display: block;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      vertical-align: top;
    }

    .dash-chart-hint {
      margin-top: 8px;
      font-size: var(--fs-12);
      line-height: 1.35;
      flex: 0 0 auto;
    }

    .table-card {
      margin-top: 20px;
      background: var(--panel, #0f141b);
      border: 1px solid var(--grid, #1f2937);
      border-radius: 16px;
      padding: 14px 14px 12px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }

    .table-wrap {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      position: relative;
      mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
    }
    @media (max-width: 560px) {
      .table-wrap { mask-image: none; }
    }

    .tbl {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: var(--fs-13);
      min-width: 720px;
    }

    .tbl th, .tbl td {
      border-top: 1px solid #1f2937;
      padding: 10px 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tbl th {
      background: #0b0d10;
      position: sticky;
      top: 0;
      z-index: 2;
      font-weight: 800;
    }

    .tbl th:first-child, .tbl td:first-child {
      position: sticky;
      left: 0;
      z-index: 3;
      background: #0f1216;
    }

    .tbl td .sub {
      display: block;
      font-size: 11px;
      color: #9aa4b2;
      margin-top: 2px;
    }

    .tbl tfoot td, .tbl tr.total-row td {
      border-top: 2px solid #273244 !important;
      font-weight: 900;
    }

    .tbl td.c {
      text-align: right;
    }

    .tbl tbody tr:hover {
      background: rgba(255, 255, 255, .03);
      cursor: pointer;
    }

    .tbl tfoot td, .tbl tr.total-row td {
      border-top: 2px solid #273244 !important;
      font-weight: 900;
    }

    @media (max-width: 760px) {
      .tbl th:nth-child(6), .tbl td:nth-child(6) {
        display: none;
      }

      .tbl th:nth-child(7), .tbl td:nth-child(7) {
        display: none;
      }

      .tbl th:nth-child(8), .tbl td:nth-child(8) {
        display: none;
      }

    }

    @media (max-width: 560px) {
      .tbl th:nth-child(5), .tbl td:nth-child(5) {
        display: none;
      }

      .tbl th:nth-child(4) {
        text-align: center;
      }

      .tbl td:nth-child(4) {
        text-align: center;
      }
    }

    .btn {
      height: 40px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid #273244;
      background: #111827;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
      touch-action: manipulation;
    }

    .btn.ghost {
      color: #eaeef4;
      border: 1px solid rgba(255, 255, 255, .15)
    }

    header .btn {
      background: var(--btn-primary-bg);
      color: var(--btn-primary-fg);
      border-color: var(--btn-primary-border);
    }
    header .btn:hover { background: var(--btn-primary-hover); }
    header .btn.ghost {
      background: transparent;
      color: var(--btn-ghost-fg);
      border-color: var(--btn-ghost-border);
    }
    header .btn.ghost:hover { background: var(--btn-ghost-hover); }

    .input {
      height: 40px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid #273244;
      background: #ffffff;
      color: #000000;
      outline: none;
      width: 100%;
    }

    .input.cal {
      background: #111827;
      color: #fff;
      border: 1px solid #273244;
    }

    select.input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 34px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px
    }

    .muted {
      color: #9aa4b2;
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .b-ok {
      color: #16a34a;
      background: rgba(22, 163, 74, .18);
      border: 1px solid rgba(22, 163, 74, .28);
    }

    .b-blue {
      color: #2563eb;
      background: rgba(37, 99, 235, .18);
      border: 1px solid rgba(37, 99, 235, .28);
    }

    .b-warn {
      color: #ea580c;
      background: rgba(234, 88, 12, .18);
      border: 1px solid rgba(234, 88, 12, .28);
    }

    .b-yellow {
      color: #eab308;
      background: rgba(234, 179, 8, .18);
      border: 1px solid rgba(234, 179, 8, .28);
    }

    .b-cel {
      color: #06b6d4;
      background: rgba(6, 182, 212, .18);
      border: 1px solid rgba(6, 182, 212, .28);
    }

    @supports (background: color-mix(in srgb, black, white)) {
      .b-ok {
        color: var(--bar);
        background: color-mix(in srgb, var(--bar) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--bar) 28%, transparent);
      }

      .b-blue {
        color: var(--bar-2);
        background: color-mix(in srgb, var(--bar-2) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--bar-2) 28%, transparent);
      }

      .b-warn {
        color: var(--bar-3);
        background: color-mix(in srgb, var(--bar-3) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--bar-3) 28%, transparent);
      }

      .b-yellow {
        color: var(--bar-4);
        background: color-mix(in srgb, var(--bar-4) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--bar-4) 28%, transparent);
      }

      .b-cel {
        color: var(--bar-5);
        background: color-mix(in srgb, var(--bar-5) 18%, transparent);
        border: 1px solid color-mix(in srgb, var(--bar-5) 28%, transparent);
      }
    }

    .modal-back {
      position: fixed;
      inset: 0;
      background: #0008;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 20
    }

    .modal {
      background: #0f1216;
      border: 1px solid #1f2937;
      border-radius: var(--r);
      width: min(1000px, 96vw);
      max-height: 88vh;
      overflow: auto
    }

    .modal .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--pad);
      border-bottom: 1px solid #1f2937
    }

    .modal .body {
      padding: var(--pad)
    }

    .close {
      color: #1d1f23;
      border: 1px solid #273244;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer
    }

    .list {
      display: grid;
      gap: 10px
    }

    .item {
      border: 1px solid #1f2937;
      border-radius: 10px;
      padding: 10px
    }

    .item .t {
      font-weight: 900
    }

    .item .meta {
      color: #9aa4b2;
      font-weight: 700;
      margin-top: 2px
    }

    .plant-load-head h3 {
      margin: 0 0 4px;
      font-size: var(--fs-14);
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--text, #e8eef8);
    }

    .dash-table-lead {
      margin: 0;
      font-weight: 500;
      font-size: var(--fs-12);
      line-height: 1.4;
    }

    .plant-load-summary {
      margin: 12px 0 0;
      font-size: var(--fs-13);
      font-weight: 800;
      color: var(--text, #e8eef8);
    }

    .plant-load-list {
      margin-top: 10px;
      border: 1px solid var(--grid, #1f2937);
      border-radius: 12px;
      overflow: auto;
      max-height: min(520px, 62vh);
    }

    .plant-load-empty {
      margin: 0;
      padding: 14px 12px;
      color: var(--muted, #9aa4b2);
      font-size: var(--fs-13);
    }

    .plant-row {
      display: grid;
      grid-template-columns: 28px minmax(140px, 1.4fr) auto minmax(120px, 168px);
      gap: 8px 14px;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      padding: 10px 12px;
      border: 0;
      border-bottom: 1px solid var(--grid, #1f2937);
      background: transparent;
      color: var(--text, #e8eef8);
      font: inherit;
      cursor: pointer;
      appearance: none;
    }

    .plant-main {
      min-width: 0;
    }

    .plant-name,
    .plant-sub {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plant-row:last-child {
      border-bottom: 0;
    }

    .plant-row:hover {
      background: rgba(255, 255, 255, .04);
    }

    .plant-row:focus-visible {
      outline: 2px solid var(--hc-focus, #94a3b8);
      outline-offset: -2px;
    }

    .plant-rank {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted, #9aa4b2);
      text-align: center;
    }

    .plant-name {
      display: block;
      font-weight: 800;
      font-size: var(--fs-14);
    }

    .plant-sub {
      display: block;
      margin-top: 2px;
      font-size: var(--fs-12);
      font-weight: 600;
      color: var(--muted, #9aa4b2);
    }

    .plant-stats {
      display: flex;
      gap: 16px;
    }

    .plant-stat {
      display: flex;
      flex-direction: column;
      min-width: 72px;
    }

    .plant-stat-val,
    .plant-pct {
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .plant-stat-val {
      font-size: var(--fs-15);
    }

    .plant-stat-lbl {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted, #9aa4b2);
    }

    .plant-share {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .plant-share-meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
    }

    .plant-pct {
      font-size: 12px;
    }

    .plant-bar {
      display: block;
      height: 8px;
      border-radius: 4px;
      border: 1px solid var(--grid, #1f2937);
      overflow: hidden;
      background: transparent;
    }

    .plant-bar-fill {
      display: block;
      height: 100%;
      max-width: 100%;
      background: var(--bar, #16a34a);
    }

    .plant-bar-fill[data-on="1"] {
      min-width: 3px;
    }

    @media (max-width: 860px) {
      .plant-row {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
          "rank main"
          "stats stats"
          "share share";
      }

      .plant-rank { grid-area: rank; }
      .plant-main { grid-area: main; }
      .plant-stats { grid-area: stats; }
      .plant-share { grid-area: share; }
    }

    .dash-range-lbl {
      margin: 8px 2px 0;
      font-size: var(--fs-12);
      font-weight: 600;
    }

    .dash-empty-state {
      margin: 14px 0 10px;
      padding: 20px 22px;
      border-radius: 16px;
      border: 1px dashed var(--grid, #1f2937);
      background: color-mix(in srgb, var(--panel, #0f141b) 94%, transparent);
      text-align: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    .dash-empty-state .dash-empty-title {
      margin: 0 0 8px;
      font-size: var(--fs-15);
      font-weight: 800;
      letter-spacing: 0.02em;
      color: var(--text);
    }
    .dash-empty-state .dash-empty-hint {
      margin: 0;
      font-size: var(--fs-13);
      font-weight: 600;
      line-height: 1.45;
      color: var(--muted);
    }
    :root[data-theme="light"] .dash-empty-state {
      background: #f8fafc;
      border-color: #cbd5e1;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }

    .dash-data-panels[hidden] {
      display: none !important;
    }

    :root[data-theme="light"] .dash-scope .kpi,
    :root[data-theme="light"] .chart-card,
    :root[data-theme="light"] .table-card{
      background:#ffffff;
      border-color:#d7dee8;
    }

    :root[data-theme="light"] .chart-card,
    :root[data-theme="light"] .table-card {
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    }

    :root[data-theme="light"] .dash-scope .kpi-label,
    :root[data-theme="light"] .dash-scope .kpi small,
    :root[data-theme="light"] .tbl td .sub,
    :root[data-theme="light"] .item .meta,
    :root[data-theme="light"] .muted{
      color:#5f6c82;
    }

    :root[data-theme="light"] .tbl th,
    :root[data-theme="light"] .tbl td{
      border-top:1px solid #d5dde8;
    }

    :root[data-theme="light"] .tbl th{
      background:#e7ecf2;
      color:#1f2937;
    }

    :root[data-theme="light"] .tbl th:first-child,
    :root[data-theme="light"] .tbl td:first-child{
      background:#f8fafc;
    }

    :root[data-theme="light"] .tbl tbody tr:hover{
      background:rgba(15,23,42,.04);
    }

    :root[data-theme="light"] .tbl tfoot td,
    :root[data-theme="light"] .tbl tr.total-row td{
      border-top:2px solid #b8c4d6 !important;
    }

    :root[data-theme="light"] .plant-load-head h3,
    :root[data-theme="light"] .plant-load-summary,
    :root[data-theme="light"] .plant-row,
    :root[data-theme="light"] .plant-name,
    :root[data-theme="light"] .plant-stat-val,
    :root[data-theme="light"] .plant-pct {
      color: #1f2937;
    }
    :root[data-theme="light"] .plant-load-list,
    :root[data-theme="light"] .plant-row,
    :root[data-theme="light"] .plant-bar {
      border-color: #d7dee8;
    }
    :root[data-theme="light"] .plant-row:hover {
      background: rgba(15, 23, 42, .04);
    }
    :root[data-theme="light"] .input{
      background:#f8fafc;
      border-color:#cdd7e4;
      color:#0f172a;
    }

    :root[data-theme="light"] .input.cal{
      background:#e9eef4;
      color:#0f172a;
      border-color:#c5d0e0;
    }

    :root[data-theme="light"] select.input{
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6c82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }

    :root[data-theme="light"] .btn{
      border-color:#1f2937;
      background:#111827;
      color:#fff;
    }

    :root[data-theme="light"] .modal{
      background:#f3f6fb;
      border-color:#d5dde8;
    }

    :root[data-theme="light"] .modal .head{
      border-bottom:1px solid #d5dde8;
    }

    :root[data-theme="light"] .item{
      border-color:#d5dde8;
      background:#f8fafc;
    }

    :root[data-theme="light"] .close{
      background:#e9eef4;
      color:#1f2937;
      border-color:#cbd5e1;
    }

    [data-hk-modulo-wrap].is-disabled {
      opacity: .6;
    }

    [data-hk-modulo-wrap].is-disabled [data-field="hk-modulo-check"] {
      pointer-events: auto;
      opacity: 1;
    }

    .hkmod-list .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 6px 10px;
      background: #eef2ff;
      color: #3730a3;
      font-weight: 700;
      border: 1px solid #e5e7eb;
    }

    .hkmod-list .chip button {
      border: 0;
      background: transparent;
      cursor: pointer;
      font-weight: 900;
      line-height: 1;
      opacity: .7;
    }

    .hkmod-list .chip button:hover {
      opacity: 1;
    }

    .hkmod-list .chip .x {
      font-size: 0;
      line-height: 1;
    }

    .hkmod-list .chip .x::before {
      content: "×";
      font-size: 14px;
    }

    .hkmod-list .chip .x::after {
      content: "";
    }

    .hkmod-list .chip.dup {
      outline: 2px solid #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, .25);
      transition: outline-color .4s ease, box-shadow .4s ease;
    }

    .last-ctrls {
      display: grid;
      grid-template-columns: 1fr repeat(3, max-content);
      gap: 8px;
      align-items: center;
      margin-bottom: 10px;
    }

    @media (max-width: 760px) {
      .last-ctrls {
        grid-template-columns: 1fr;
      }
    }

    .last-ctrls .input, .last-ctrls select {
      height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid #273244;
      background: #0b0f14;
      color: #eaeef4;
    }

    .last-ctrls .muted {
      font-size: var(--fs-12);
      opacity: .9;
    }

    .item.card {
      display: grid;
      grid-template-columns: 1fr max-content;
      gap: 6px 10px;
      border: 1px solid #1f2937;
      border-radius: 12px;
      padding: 10px;
    }

    .item.card .t {
      display: flex;
      gap: 8px;
      align-items: center;
      font-weight: 900;
    }

    .item.card .meta {
      color: #9aa4b2;
      font-weight: 700;
      margin-top: 2px;
    }

    .item.card .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
    }

    .tag {
      font-size: 11px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: #0b0d10;
      color: #cbd5e1;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .06) inset;
    }

    .dot.c1 {
      background: var(--bar);
    }

    .dot.c2 {
      background: var(--bar-2);
    }

    .dot.c3 {
      background: var(--bar-3);
    }

    .dot.c4 {
      background: var(--bar-4);
    }

    .dot.c5 {
      background: var(--bar-5);
    }

    .badge-days {
      font-size: 11px;
      font-weight: 900;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(148, 163, 184, .12);
      color: #e5e7eb;
      border: 1px solid rgba(148, 163, 184, .25);
    }

    .card .actions {
      display: flex;
      gap: 6px;
      align-self: start;
    }

    .card .actions .btn {
      height: 30px;
      padding: 0 10px;
      font-weight: 800;
      border-radius: 8px;
      border: 1px solid #273244;
      background: #111827;
    }

    .card .actions .btn.ghost {
      background: transparent;
    }

    .card .actions .btn.danger {
      border-color: rgba(239, 68, 68, .4);
      color: #fecaca;
    }

    .modal .body .last-ctrls {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #0f1216;
      padding-bottom: 8px;
      margin-top: -4px;
      border-bottom: 1px solid #1f2937;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .sheet-backdrop {
      position: fixed;
      inset: 0;
      z-index: 99990;
      background: color-mix(in srgb, #020617 42%, transparent);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .18s ease, visibility 0s linear .18s;
    }

    .sheet-backdrop.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .18s ease;
    }

    body.sheet-open {
      overflow: hidden;
    }

    .sheet {
      --da-soft: color-mix(in srgb, var(--g-panel) 88%, var(--text) 3%);
      --da-muted: color-mix(in srgb, var(--text) 60%, transparent);
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 99999;
      box-sizing: border-box;
      width: min(760px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      overflow: hidden;
      border: 1px solid var(--g-line);
      border-radius: 18px;
      background: var(--g-panel);
      color: var(--text);
      font-family: "Montserrat", "Roboto", sans-serif;
      opacity: 0;
      transform: translate(-50%, -48%) scale(.98);
      transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
    }

    .sheet.is-open {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .da-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 12px;
    }

    .da-title {
      margin: 0;
      min-width: 0;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .da-close {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid var(--g-line);
      border-radius: 10px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
    }

    .da-close::before {
      content: "";
      width: 14px;
      height: 14px;
      background-color: currentColor;
      -webkit-mask: url("/assets/icons/icon-x.png") center / contain no-repeat;
      mask: url("/assets/icons/icon-x.png") center / contain no-repeat;
    }

    .da-close:hover {
      background: var(--da-soft);
    }

    .da-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0 16px 14px;
      border-bottom: 1px solid var(--g-line);
    }

    .da-stat {
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--g-line);
      border-radius: 12px;
      background: var(--da-soft);
    }

    .da-stat dt {
      overflow: hidden;
      font-size: 11px;
      font-weight: 700;
      color: var(--da-muted);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .da-stat dd {
      margin: 4px 0 0;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .da-stat.is-active {
      border-color: var(--ok-bd);
      background: var(--ok-bg);
    }

    .da-stat.is-active dd {
      color: var(--ok-fg);
    }

    .da-toolbar {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--g-line);
    }

    .da-toolbar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .da-input {
      box-sizing: border-box;
      height: 36px;
      min-width: 0;
      padding: 0 12px;
      border: 1px solid var(--g-line);
      border-radius: 10px;
      background: var(--da-soft);
      color: var(--text);
      font: 500 13px "Montserrat", "Roboto", sans-serif;
      outline: none;
    }

    .da-input::placeholder {
      color: var(--da-muted);
    }

    .da-input:focus-visible {
      border-color: var(--sp-accent);
      outline: 2px solid color-mix(in srgb, var(--sp-accent) 35%, transparent);
      outline-offset: 0;
    }

    .da-search {
      flex: 1 1 220px;
    }

    select.da-input {
      flex: 0 1 190px;
      appearance: none;
      -webkit-appearance: none;
      padding-right: 32px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 16px;
      cursor: pointer;
    }

    .da-types {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .da-type {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid var(--g-line);
      border-radius: 8px;
      background: transparent;
      color: var(--da-muted);
      font: 700 12px "Montserrat", "Roboto", sans-serif;
      cursor: pointer;
    }

    .da-type:hover {
      background: var(--da-soft);
      color: var(--text);
    }

    .da-type[aria-pressed="true"] {
      border-color: color-mix(in srgb, var(--text) 45%, var(--g-line));
      background: var(--da-soft);
      color: var(--text);
    }

    .da-type-n {
      font-variant-numeric: tabular-nums;
      color: var(--da-muted);
    }

    .da-type:focus-visible {
      outline: 2px solid var(--sp-accent);
      outline-offset: 2px;
    }

    .da-list {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: auto;
      overscroll-behavior: contain;
    }

    .da-item + .da-item {
      border-top: 1px solid var(--g-line);
    }

    .da-group {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 16px;
      border-bottom: 1px solid var(--g-line);
      background: var(--g-panel);
      font-size: 12px;
      font-weight: 800;
    }

    .da-item + .da-group {
      border-top: 1px solid var(--g-line);
    }

    .da-group-n {
      font-weight: 700;
      color: var(--da-muted);
    }

    .da-row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      box-sizing: border-box;
      padding: 10px 16px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .da-row:hover {
      background: var(--da-soft);
    }

    .da-row:focus-visible {
      outline: 2px solid var(--sp-accent);
      outline-offset: -2px;
    }

    .da-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 44px;
      border: 1px solid var(--g-line);
      border-radius: 10px;
      background: var(--da-soft);
      line-height: 1;
    }

    .da-row.is-active .da-date {
      border-color: var(--ok-bd);
      background: var(--ok-bg);
    }

    .da-date-d {
      font-size: 16px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .da-date-m {
      margin-top: 3px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--da-muted);
    }

    .da-main {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .da-row-title,
    .da-row-meta {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .da-row-title {
      font-size: 13.5px;
      font-weight: 700;
    }

    .da-row-meta {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 600;
      color: var(--da-muted);
    }

    .da-chips,
    .da-side {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .da-chips {
      margin-top: 6px;
    }

    .da-side {
      justify-content: flex-end;
      max-width: 240px;
    }

    .da-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border: 1px solid var(--g-line);
      border-radius: 8px;
      background: var(--da-soft);
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.3;
      white-space: nowrap;
    }

    .da-chip--muted {
      font-weight: 600;
      color: var(--da-muted);
    }

    .da-chip--active {
      border-color: var(--ok-bd);
      background: var(--ok-bg);
      color: var(--ok-fg);
    }

    .da-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      border-radius: 50%;
    }

    .da-dot.c1 { background: var(--bar); }
    .da-dot.c2 { background: var(--bar-2); }
    .da-dot.c3 { background: var(--bar-3); }
    .da-dot.c4 { background: var(--bar-4); }
    .da-dot.c5 { background: var(--bar-5); }

    .da-go {
      display: inline-flex;
      align-items: center;
      color: var(--da-muted);
    }

    .da-row:hover .da-go,
    .da-row:focus-visible .da-go {
      color: var(--text);
    }

    .da-empty {
      padding: 28px 16px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--da-muted);
    }

    .da-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      box-sizing: border-box;
      padding: 6px 16px;
      padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--g-line);
      background: var(--da-soft);
    }

    .da-count {
      margin-right: auto;
      font-size: 12px;
      font-weight: 700;
      color: var(--da-muted);
    }

    .da-clear {
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 10px;
      background: transparent;
      color: var(--text);
      font: 700 12px "Montserrat", "Roboto", sans-serif;
      cursor: pointer;
    }

    .da-clear[hidden] {
      display: none;
    }

    .da-clear:hover {
      border-color: var(--g-line);
      background: color-mix(in srgb, var(--g-panel) 80%, var(--text) 6%);
    }

    .da-close:focus-visible,
    .da-clear:focus-visible {
      outline: 2px solid var(--sp-accent);
      outline-offset: 2px;
    }

    @media (max-width: 600px) {
      .sheet {
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        transform: translateY(12px);
      }

      .sheet.is-open {
        transform: none;
      }

      .da-head {
        padding-top: max(14px, env(safe-area-inset-top, 0px));
      }

      .da-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .da-search,
      select.da-input {
        flex-basis: 100%;
      }

      .da-types {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .da-type {
        flex: 0 0 auto;
      }

      .da-row {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 10px 12px;
      }

      .da-date {
        grid-row: span 2;
        align-self: start;
        height: 40px;
      }

      .da-go {
        grid-column: 3;
        grid-row: 1;
      }

      .da-side {
        grid-column: 2 / 4;
        grid-row: 2;
        justify-content: flex-start;
        max-width: none;
      }
    }

    body.dash-scope {
      overflow-x: clip;
    }

    @media (max-width: 760px) {
      .dash-wrap {
        padding: 12px max(12px, env(safe-area-inset-left, 0px))
          max(20px, env(safe-area-inset-bottom, 0px))
          max(12px, env(safe-area-inset-right, 0px));
      }

      .dash-data-panels {
        gap: 14px;
      }

      .charts {
        gap: 12px;
      }

      .chart-card {
        padding: 12px 12px 10px;
        border-radius: 14px;
      }

      .table-card {
        margin-top: 14px;
        padding: 12px 10px 10px;
        border-radius: 14px;
      }

      .table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
      }

      .plant-load-list {
        max-height: min(52dvh, 480px);
        -webkit-overflow-scrolling: touch;
      }

      .plant-row {
        padding: 10px;
      }

      .plant-stat {
        min-width: 64px;
      }

      header.hdr-controls .right-controls > .muted {
        display: none;
      }
    }

    @media (max-width: 560px) {
      .dash-scope .kpi-row.dash-kpis,
      .dash-skeleton .ds-kpi.kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .month-nav-label {
        min-width: 0;
        font-size: 13px;
      }
    }

    @media (max-width: 380px) {
      .dash-scope .kpi-row.dash-kpis,
      .dash-skeleton .ds-kpi.kpi-row {
        grid-template-columns: 1fr;
      }
    }