:root {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --border:    #334155;
  --text:      #e2e8f0;
  --muted:     #94a3b8;
  --solar:     #fbbf24;
  --home:      #60a5fa;
  --battery:   #34d399;
  --feed-in:   #a78bfa;
  --grid:      #f87171;
  --inverter:  #fb923c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

header {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.02em; }
header h1 span { color: var(--solar); margin-right: .4rem; }

#last-update { font-size: .8rem; color: var(--muted); }

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

/* ── cards ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem 1rem;
  text-align: center;
}

.card .icon { font-size: 1.5rem; margin-bottom: .4rem; }
.card .value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.card .unit  { font-size: .85rem; color: var(--muted); margin-left: .2rem; }
.card .label { font-size: .78rem; color: var(--muted); margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.card .sub   { font-size: .82rem; color: var(--muted); margin-top: .2rem; }

.card.solar    .value { color: var(--solar); }
.card.home     .value { color: var(--home); }
.card.battery  .value { color: var(--battery); }
.card.feed-in  .value { color: var(--feed-in); }
.card.grid     .value { color: var(--grid); }
.card.inverter .value { color: var(--inverter); }

/* ── charts ── */
.chart-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}

.chart-header h2 { font-size: .95rem; font-weight: 600; }

.tab-group { display: flex; gap: .35rem; }
.tab {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: .4rem;
  padding: .3rem .75rem;
  font-size: .78rem;
  cursor: pointer;
  transition: all .15s;
}
.tab.active, .tab:hover {
  background: var(--solar);
  border-color: var(--solar);
  color: #000;
}

.chart-wrap { position: relative; height: 260px; }