:root {
  color-scheme: dark;
  --bg: #07110f;
  --panel: #0e1d19;
  --border: rgba(226, 239, 232, .12);
  --text: #f3f7f1;
  --muted: #91a59d;
  --solar: #ffc857;
  --home: #4de2bd;
  --consumption: #b48cff;
  --import: #ff7b72;
  --export: #70a9ff;
  --danger: #ff8c84;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--text); background: radial-gradient(circle at 14% -5%, rgba(77,226,189,.09), transparent 32rem), var(--bg); }
.topbar, main, footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.brand, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.brand { font-size: 18px; font-weight: 750; }
.brand-mark { width: 24px; height: 24px; border: 5px solid var(--solar); border-radius: 50%; box-shadow: 0 0 20px rgba(255,200,87,.28); }
.topbar-actions { color: var(--muted); font-size: 13px; }
.status-pill { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; }
.status-pill.online { color: var(--home); }
.status-pill.offline, .measurement-incoherent { color: var(--danger); }
.link-button { color: var(--muted); border: 0; background: transparent; cursor: pointer; }
main { padding: 58px 0; }
.hero { margin-bottom: 38px; }
.hero h1 { margin: 7px 0; font-size: clamp(34px, 6vw, 68px); letter-spacing: -.05em; }
.hero p { color: var(--muted); }
.eyebrow { margin: 0; color: var(--home) !important; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.metric-grid article, .chart-panel, .login-card { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.metric-grid h2 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-grid strong { display: block; margin-top: 22px; font-size: 28px; font-variant-numeric: tabular-nums; }
.metric-grid article:nth-child(1) strong { color: var(--solar); }
.metric-grid article:nth-child(2) strong { color: var(--consumption); }
.metric-grid small { display: block; min-height: 1.3em; margin-top: 8px; color: var(--muted); }
.chart-panel { margin-top: 18px; }
.chart-panel h2 { margin: 5px 0 18px; }
.chart-note { margin: -9px 0 18px; color: var(--muted); font-size: 13px; }
#history-chart { width: 100%; height: 360px; }
#imported-history-chart { width: 100%; height: 370px; }
.remote-history { margin-top: 48px; padding: 28px 30px 30px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.24); }
.remote-history-head, .history-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-modes { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.14); overflow: hidden; }
.history-modes button, .history-navigation button, .history-navigation input { padding: 7px 11px; color: var(--muted); border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.history-modes button.selected { color: #07110f; background: #f3f7f1; font-weight: 750; }
.history-navigation { position:relative; justify-content:center; gap:22px; min-height:82px; margin:30px 0 22px; padding-right:210px; }.history-navigation button { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--border); font-size:23px; line-height:1; }.history-navigation input { min-height:34px; border:1px solid var(--border); color:var(--text); }.history-navigation span { position:absolute; top:0; right:0; padding:7px 10px; color:var(--muted); border:1px solid var(--border); border-radius:8px; font-size:11px; }
.history-totals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 20px 0; border-block: 1px solid var(--border); }.history-totals small { color: var(--muted); }.history-totals strong { display: block; margin-top: 10px; font-size: 26px; }.history-totals article:nth-child(1) strong { color: var(--solar); }.history-totals article:nth-child(2) strong { color: var(--consumption); }.history-totals article:nth-child(3) strong { color: var(--home); }.history-totals article:nth-child(4) strong { color: var(--import); }.history-totals article:nth-child(5) strong { color: var(--export); }
.history-legend { display: flex; gap: 18px; margin: 20px 0; font-size: 12px; }.history-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; }.legend-self::before { background: var(--home); }.legend-import::before { background: var(--import); }.legend-export::before { background: var(--export); }
@media (max-width: 900px) { .history-totals { grid-template-columns: repeat(2, 1fr); }.remote-history-head { align-items: flex-start; flex-direction: column; }.history-navigation { flex-wrap: wrap; }.history-navigation span { width: 100%; margin-left: 0; text-align: center; } }
footer { padding: 24px 0 40px; color: var(--muted); border-top: 1px solid var(--border); font-size: 12px; }
.login-page { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: min(420px, calc(100% - 32px)); }
.login-card h1 { margin: 28px 0 20px; }
.login-card label { display: block; margin: 14px 0; color: var(--muted); font-size: 13px; }
.login-card input { width: 100%; margin-top: 7px; padding: 12px; color: var(--text); border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
.login-card button { width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 9px; background: var(--home); color: #04110d; font-weight: 750; cursor: pointer; }
.login-error { padding: 10px; color: var(--danger); border: 1px solid rgba(255,140,132,.3); border-radius: 8px; }
@media (max-width: 900px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } .topbar { align-items: flex-start; flex-direction: column; padding: 18px 0; } .topbar-actions { flex-wrap: wrap; } }
@media (max-width: 520px) { .metric-grid { grid-template-columns: 1fr; } .topbar, main, footer { width: min(100% - 28px, 1180px); } }