:root {
  --bg: #0f172a;
  --panel: #1e293b;
  --panel-border: #334155;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --cheap: #22c55e;
  --neutral: #f59e0b;
  --expensive: #ef4444;
  --auto: #64748b;
  --force_charge_grid: #22c55e;
  --deny_discharge: #f59e0b;
  --discharge_only: #ef4444;
  --solar_surplus: #facc15;
  --cheap_grid: #22c55e;
  --paused: #64748b;
  --off: #475569;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--panel-border); }
.topbar h1 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; flex: 0 0 auto; }
.topbar .env { color: var(--muted); font-size: 0.875rem; text-transform: uppercase; flex: 1 1 auto; }
.topbar .user-area { color: var(--muted); font-size: 0.875rem; }
.topbar .user-area .user { color: var(--text); font-weight: 500; }
.topbar .user-area a { color: var(--accent); text-decoration: none; }
.topbar .user-area a:hover { text-decoration: underline; }

.topnav { display: flex; gap: 1rem; flex: 0 0 auto; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.topnav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

#history h2 { font-size: 1rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1rem 0; }
.history-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0.5rem; overflow: hidden; font-size: 0.875rem; }
.history-table thead th { text-align: left; padding: 0.75rem 1rem; color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; border-bottom: 1px solid var(--panel-border); background: rgba(255,255,255,0.02); }
.history-table tbody td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.history-table .time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-table .price, .history-table .soc, .history-table .flow { font-variant-numeric: tabular-nums; }
.history-table .band { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.history-table .band-cheap { color: var(--cheap); }
.history-table .band-neutral { color: var(--neutral); }
.history-table .band-expensive { color: var(--expensive); }
.history-table .bat, .history-table .wb { font-weight: 500; font-size: 0.8125rem; white-space: nowrap; }
.history-table .bat.mode-auto, .history-table .wb.mode-auto, .history-table .wb.mode-off { color: var(--auto); }
.history-table .bat.mode-force_charge_grid { color: var(--force_charge_grid); }
.history-table .bat.mode-deny_discharge { color: var(--deny_discharge); }
.history-table .bat.mode-discharge_only { color: var(--discharge_only); }
.history-table .wb.mode-cheap_grid { color: var(--cheap_grid); }
.history-table .wb.mode-solar_surplus { color: var(--solar_surplus); }
.history-table .wb.mode-paused { color: var(--paused); }
.history-table .reason { color: var(--muted); font-size: 0.8125rem; max-width: 32rem; }
.history-table .amps { color: var(--muted); font-weight: 400; font-size: 0.75rem; }

.login-wrap { display: flex; justify-content: center; padding: 4rem 1rem; }
.login-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0.75rem; padding: 2rem; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 1rem; }
.login-card h2 { margin: 0 0 0.5rem 0; font-weight: 600; }
.login-card label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.login-card label span { color: var(--muted); }
.login-card input { background: var(--bg); color: var(--text); border: 1px solid var(--panel-border); border-radius: 0.375rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
.login-card input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.login-card button { background: var(--accent); color: #0f172a; border: 0; border-radius: 0.375rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.login-card button:hover { filter: brightness(1.1); }
.login-error { color: var(--expensive); margin: 0; font-size: 0.875rem; padding: 0.5rem 0.75rem; background: rgba(239,68,68,0.1); border-radius: 0.375rem; }

main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.card h3 { margin: 0 0 0.5rem 0; color: var(--muted); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.card .value { margin: 0; font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.card .value .unit { font-size: 1rem; color: var(--muted); margin-left: 0.25rem; }
.card .mode { margin: 0.25rem 0; font-size: 0.875rem; font-weight: 600; }
.card .band { margin: 0.25rem 0; font-size: 0.875rem; text-transform: uppercase; }
.card .reason { color: var(--muted); font-size: 0.8125rem; margin-top: 0.5rem; line-height: 1.4; }
.card .muted { color: var(--muted); }

.card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.875rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; font-variant-numeric: tabular-nums; }

.card.price.band-cheap { border-color: var(--cheap); }
.card.price.band-cheap .band { color: var(--cheap); }
.card.price.band-neutral { border-color: var(--neutral); }
.card.price.band-neutral .band { color: var(--neutral); }
.card.price.band-expensive { border-color: var(--expensive); }
.card.price.band-expensive .band { color: var(--expensive); }

.card.battery.mode-auto .mode { color: var(--auto); }
.card.battery.mode-force_charge_grid { border-color: var(--force_charge_grid); }
.card.battery.mode-force_charge_grid .mode { color: var(--force_charge_grid); }
.card.battery.mode-deny_discharge { border-color: var(--deny_discharge); }
.card.battery.mode-deny_discharge .mode { color: var(--deny_discharge); }
.card.battery.mode-discharge_only { border-color: var(--discharge_only); }
.card.battery.mode-discharge_only .mode { color: var(--discharge_only); }

.card.wallbox.mode-solar_surplus { border-color: var(--solar_surplus); }
.card.wallbox.mode-solar_surplus .mode { color: var(--solar_surplus); }
.card.wallbox.mode-cheap_grid { border-color: var(--cheap_grid); }
.card.wallbox.mode-cheap_grid .mode { color: var(--cheap_grid); }
.card.wallbox.mode-paused { border-color: var(--paused); }
.card.wallbox.mode-paused .mode { color: var(--paused); }
.card.wallbox.mode-off .mode { color: var(--off); }

.badge-readonly { display: inline-block; margin-left: 0.5rem; padding: 0.125rem 0.4rem; font-size: 0.625rem; font-weight: 500; background: rgba(56,189,248,0.15); color: var(--accent); border: 1px solid rgba(56,189,248,0.3); border-radius: 0.25rem; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.04em; }

#settings { max-width: 640px; }
#settings h2 { font-size: 1rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1rem 0; }
.settings-card { padding: 1.5rem; }
.settings-card h3 { margin: 0 0 0.5rem 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); text-transform: none; }
.settings-card .muted { font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.25rem 0; }
.settings-card .status { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.875rem; margin: 0 0 1.25rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--panel-border); }
.settings-card .status dt { color: var(--muted); }
.settings-card .status dd { margin: 0; color: var(--text); }
.settings-form { display: flex; flex-direction: column; gap: 0.875rem; }
.settings-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; }
.settings-form label span { color: var(--muted); }
.settings-form input { background: var(--bg); color: var(--text); border: 1px solid var(--panel-border); border-radius: 0.375rem; padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
.settings-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.settings-form .row { display: flex; gap: 0.75rem; }
.settings-form button { background: var(--accent); color: #0f172a; border: 0; border-radius: 0.375rem; padding: 0.625rem 1rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.settings-form button:hover { filter: brightness(1.1); }
.settings-form-secondary { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--panel-border); }
.btn-danger { background: var(--expensive); color: white; border: 0; border-radius: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; cursor: pointer; }
.btn-danger:hover { filter: brightness(1.1); }

.flash { padding: 0.75rem 1rem; border-radius: 0.375rem; margin-bottom: 1rem; font-size: 0.875rem; border: 1px solid; }
.flash-ok { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #86efac; }
.flash-error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #fca5a5; }

.card.pool.pool-on { border-color: var(--cheap); }
.card.pool.pool-on .mode { color: var(--cheap); }
.card.pool.pool-off { border-color: var(--paused); }
.card.pool.pool-off .mode { color: var(--paused); }
.card.pool.pool-unknown .mode { color: var(--muted); }

#consumption { margin-top: 2rem; }
#consumption h2 { font-size: 1rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }

.consumption-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 0.75rem; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0.5rem; }
.consumption-totals > div { display: flex; flex-direction: column; gap: 0.25rem; }
.consumption-totals .label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.consumption-totals .value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.consumption-totals .unit { font-size: 0.875rem; color: var(--muted); margin-left: 0.25rem; font-weight: 400; }

.consumption-bars { display: flex; gap: 2px; align-items: flex-end; height: 120px; padding: 0.5rem; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0.5rem; overflow-x: auto; }
.consumption-bars .cbar {
  flex: 1 1 auto;
  min-width: 14px;
  height: var(--h, 30%);
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.consumption-bars .cbar:hover { opacity: 0.85; }
.consumption-bars .cbar .hour { color: var(--muted); font-size: 0.625rem; position: absolute; bottom: -1.25rem; }

#forecast { margin-top: 2rem; }
#forecast h2 { font-size: 1rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.forecast-bars { display: flex; gap: 2px; align-items: flex-end; height: 160px; padding: 0.5rem; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 0.5rem; overflow-x: auto; }
.forecast-bars .bar {
  flex: 1 1 auto;
  min-width: 6px;
  height: var(--h, 30%);
  background: var(--neutral);
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.forecast-bars .bar.cheap { background: var(--cheap); }
.forecast-bars .bar.expensive { background: var(--expensive); }
.forecast-bars .bar.now { box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.forecast-bars .bar:hover { opacity: 0.85; }
.forecast-bars .bar .hour { color: var(--text); font-size: 0.625rem; position: absolute; bottom: -1.25rem; }

footer { padding: 1rem 1.5rem; color: var(--muted); font-size: 0.75rem; border-top: 1px solid var(--panel-border); margin-top: 2rem; }

.muted { color: var(--muted); }