* { box-sizing: border-box; }
body { font: 14px/1.4 -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
       background: #1a1d23; color: #e6e8eb; margin: 0; padding: 24px; }
header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
h1 { font-size: 20px; margin: 0; }
.muted { color: #888; }
#last-seen.stale { color: #e85c5c; }

/* ---- grouped cards: Battery / (PV + Mains) / OP -------------------------- */
/* Mobile-first: one column, order Battery, PV, Mains, OP (Mains under PV). */
.cards { display: grid; grid-template-columns: 1fr;
         gap: 12px; margin-bottom: 24px; align-items: start; }
/* PV and Mains share a column; Mains sits directly under PV. */
.pvcol { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
.card { background: #262a31; border-radius: 8px; padding: 12px 14px 10px;
        border-top: 3px solid var(--accent); }
.card-mains { --accent: #b07ce8; }
.card-batt  { --accent: #7ed321; }
.card-pv    { --accent: #f6a623; }
.card-op    { --accent: #4a90e2; }
.card h2 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
           color: var(--accent); margin: 0 0 8px; }
.metric { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer;
          border-radius: 4px; }
.metric:hover { background: rgba(255,255,255,0.04); }
.metric input { accent-color: var(--accent); margin: 0; flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.mlbl { color: #8a909a; font-size: 12px; flex: 1; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; }
.metric strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.unit { color: #8a909a; font-size: 11px; width: 28px; flex: none; }
.metric.nochk { cursor: default; padding-left: 29px; }
.metric.nochk:hover { background: none; }
.na { color: #5b616b; font-size: 11px; font-style: italic; margin: 6px 0 0; }

/* ---- charts -------------------------------------------------------------- */
.chart-wrap { background: #262a31; padding: 16px; border-radius: 8px; height: 480px; }
.range-buttons { display: flex; gap: 8px; margin-bottom: 12px; }
.range-buttons button { background: #1a1d23; color: #e6e8eb; border: 1px solid #3a3f47; padding: 6px 14px; border-radius: 4px; cursor: pointer; }
.range-buttons button.active { background: #4a90e2; border-color: #4a90e2; }
.range-buttons .csv { margin-left: auto; color: #4a90e2; text-decoration: none; padding: 6px 0; }
.chart-wrap canvas { width: 100% !important; height: calc(100% - 40px) !important; }
.energy-wrap { height: 340px; margin-top: 24px; }
.section-title { font-size: 13px; letter-spacing: 0.5px; color: #8a909a;
                 text-transform: uppercase; margin: 0 0 12px; }

/* Tablet / phone-in-"desktop-site" (~760–1012px): three columns —
   Battery | PV+Mains | OP. */
@media (min-width: 760px) and (max-width: 1012px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop (>1012px): four cards across, original order Mains, Battery, PV, OP.
   pvcol dissolves so PV and Mains become standalone grid cells again. */
@media (min-width: 1013px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
  .pvcol { display: contents; }
  .card-mains { order: -1; }
}