:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --accent: #0ea5e9;
  --accent-ink: #0c4a6e;
  --brand: #facc15;
  --brand-ink: #713f12;
  --good: #15803d;
  --good-bg: #dcfce7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --purple: #7c3aed;
  --purple-bg: #ede9fe;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  margin: 0; padding: 0; color: var(--ink);
  background: var(--bg);
  font-size: 15px; line-height: 1.5;
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.25rem; }
main.wrap { padding-top: 1.5rem; padding-bottom: 4rem; }

/* ---------- Top bar ---------- */
.topbar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f8fafc;
  padding: 0.85rem 0;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand {
  color: var(--brand); text-decoration: none;
  font-weight: 700; font-size: 1.15rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.topnav { display: flex; gap: 0.25rem; margin-left: 0.75rem; }
.topnav a {
  color: #e2e8f0; text-decoration: none;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 0.95rem;
}
.topnav a:hover, .topnav a.active { background: rgba(255,255,255,0.12); color: #fff; }
.region-form { margin-left: auto; }
.region-form select {
  padding: 0.4rem 0.6rem;
  background: rgba(255,255,255,0.08); color: #f8fafc;
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.region-form select option { background: #1e293b; color: #f8fafc; }
.region-form label { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: #cbd5e1; }

/* ---------- Footer ---------- */
footer.wrap {
  padding: 1rem 1.25rem; color: var(--muted); font-size: 0.85rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; border-top: 1px solid var(--line);
  background: var(--surface); max-width: none;
}

/* ---------- Buttons / inputs ---------- */
button, .btn {
  padding: 0.55rem 1rem; background: var(--ink); color: white;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 0.9rem; font-weight: 500;
  transition: background 0.12s ease;
}
button:hover, .btn:hover { background: #1e293b; }
.btn-ghost {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #0284c7; }

input[type="search"], input[type="number"], input[type="text"], select {
  padding: 0.5rem 0.65rem; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); font-size: 0.9rem;
  background: var(--surface); color: var(--ink);
  min-width: 0;
}
input[type="search"]:focus, input[type="number"]:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}

/* ---------- Hero / headline ---------- */
.hero {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 1.25rem;
}
.hero-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.35rem;
  text-decoration: none; color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hero-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,23,42,0.06), 0 8px 20px rgba(15,23,42,0.08); }
.hero-card .label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
}
.hero-card .value {
  font-size: 1.6rem; font-weight: 700; color: var(--ink);
  line-height: 1.1;
}
.hero-card .sub { color: var(--ink-2); font-size: 0.9rem; }
.hero-card .foot { color: var(--muted); font-size: 0.8rem; margin-top: auto; }

.hero-card.savings { border-color: var(--good); background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%); }
.hero-card.savings .value { color: var(--good); }
.hero-card.negative { border-color: var(--line); }
.hero-card.current { border-left: 4px solid var(--brand); }
.hero-card.export { border-left: 4px solid var(--purple); }
.hero-card.cheapest { border-left: 4px solid var(--accent); }

/* ---------- Insights CTA on landing ---------- */
.insights-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 1.2rem; margin-bottom: 1rem;
  border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(105deg, #0f172a 0%, #1e293b 100%);
  color: #f1f5f9; text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.insights-cta:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,0,0,0.15); }
.insights-cta .ic-eyebrow { font-size: 0.7rem; color: #cbd5e1; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 0.15rem; font-weight: 600; }
.insights-cta .ic-title { font-size: 1.05rem; font-weight: 700; color: #fde68a; }
.insights-cta .ic-arrow { font-size: 1.6rem; color: var(--brand); }

/* ---------- Usage panel ---------- */
.usage-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow);
  margin-bottom: 1rem;
  display: grid; gap: 1rem;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 2fr);
  align-items: stretch;
}
.usage-panel h3 {
  margin: 0 0 0.4rem 0; font-size: 0.72rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.usage-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.usage-stats .k { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.usage-stats .v { font-size: 1.35rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.usage-stats .v small { font-size: 0.72rem; color: var(--muted); font-weight: 500; margin-left: 0.25rem; }

.offpeak-bar {
  position: relative; height: 20px; background: #fef3c7; border-radius: 5px;
  overflow: hidden; margin-top: 0.35rem; border: 1px solid #fde68a;
}
.offpeak-bar .off {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  display: flex; align-items: center; justify-content: flex-end;
  color: white; font-size: 0.72rem; font-weight: 700; padding: 0 0.4rem;
}
.offpeak-scale {
  display: flex; justify-content: space-between; font-size: 0.68rem;
  color: var(--muted); margin-top: 0.2rem;
}

.sparkline {
  display: flex; align-items: flex-end; gap: 3px; height: 68px;
  padding: 0.2rem 0; margin-top: 0.3rem;
}
.sparkline .bar {
  flex: 1; background: linear-gradient(180deg, var(--accent) 0%, #0284c7 100%);
  border-radius: 3px 3px 0 0; min-height: 2px;
  position: relative;
  transition: opacity 0.15s;
}
.sparkline .bar:hover { opacity: 0.8; }
.sparkline .bar.partial { background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%); }
.sparkline-scale {
  display: flex; justify-content: space-between;
  font-size: 0.65rem; color: var(--muted); margin-top: 0.15rem;
}

.usage-source-note {
  font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem;
  display: flex; align-items: center; gap: 0.35rem;
}
.usage-source-note::before {
  content: "●"; color: var(--good); font-size: 0.85rem;
}

@media (max-width: 720px) {
  .usage-panel { grid-template-columns: 1fr; }
}

/* ---------- Stat chips ---------- */
.stat-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem 0;
  font-size: 0.85rem;
}
.stat-chip {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem 0.75rem; color: var(--ink-2);
}
.stat-chip strong { color: var(--ink); }

/* ---------- Filter pills ---------- */
.filters-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.filters-card form {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  margin: 0;
}
.filters-card input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.filters-card label { display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.85rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
  text-decoration: none; font-size: 0.8rem; font-weight: 500;
}
.pill:hover { background: #eef2f7; color: var(--ink); }
.pill.active { background: var(--ink); color: white; border-color: var(--ink); }

/* ---------- Tariff list (card-ish rows) ---------- */
.tariff-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.tariff-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(220px, 2fr) minmax(160px, 1fr) minmax(120px, 0.7fr);
  gap: 1rem; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.tariff-row:last-child { border-bottom: 0; }
.tariff-row:hover { background: var(--surface-2); }
.tariff-row.is-current { background: linear-gradient(90deg, rgba(250,204,21,0.14) 0%, transparent 60%); }
.tariff-row.is-current::before {
  content: ""; width: 3px; border-radius: 2px; align-self: stretch;
  background: var(--brand); margin-right: -0.5rem;
}

.tariff-supplier { display: flex; flex-direction: column; gap: 0.15rem; }
.tariff-supplier .sname { font-weight: 600; color: var(--ink); }
.tariff-supplier .sname small { font-weight: 400; color: var(--muted); }

.tariff-name { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tariff-name a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis;
}
.tariff-name a:hover { color: var(--accent); text-decoration: underline; }
.tariff-name .desc { font-size: 0.82rem; color: var(--muted); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.tariff-rate { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.tariff-rate .summary { font-size: 0.88rem; color: var(--ink-2); }

.tariff-meta { text-align: right; font-size: 0.82rem; color: var(--muted);
  display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; }
.tariff-meta .standing { color: var(--ink-2); font-size: 0.9rem; }
.tariff-meta .standing strong { color: var(--ink); font-weight: 600; }
.tariff-meta a { color: var(--accent); text-decoration: none; font-size: 0.78rem; }

/* ---------- Rate bar (mini horizontal visualisation) ---------- */
.rate-bar {
  position: relative; height: 8px; background: #eef2f7;
  border-radius: 4px; overflow: visible;
}
.rate-bar .fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--good) 0%, #eab308 55%, var(--bad) 100%);
  border-radius: 4px; opacity: 0.75;
}
.rate-bar .dot-lo, .rate-bar .dot-hi {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: white;
  border: 2px solid var(--ink);
}
.rate-bar .dot-hi { border-color: var(--bad); }
.rate-bar .dot-lo { border-color: var(--good); }
.rate-bar-scale {
  display: flex; justify-content: space-between; font-size: 0.7rem;
  color: var(--muted); margin-top: 0.15rem;
}

/* ---------- Badges ---------- */
.badges { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.12rem 0.5rem; font-size: 0.72rem;
  border-radius: 999px; background: #eef2f7; color: var(--ink-2);
  border: 1px solid var(--line); font-weight: 500;
}
.badge-current { background: var(--brand); color: var(--brand-ink); border-color: #eab308; font-weight: 700; }
.badge-ev { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.badge-tou { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.badge-export { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.badge-green { background: var(--good-bg); color: var(--good); border-color: #bbf7d0; }
.badge-tracker { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.badge-variable { background: #f1f5f9; color: var(--muted); }
.badge-fixed { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }

/* ---------- Legacy tables (tariff detail etc.) ---------- */
.tariff-table, .rate-table, .region-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.tariff-table th, .tariff-table td,
.rate-table th, .rate-table td,
.region-table th, .region-table td {
  text-align: left; padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--line);
}
.tariff-table thead, .rate-table thead, .region-table thead { background: var(--surface-2); }
.tariff-table thead th, .rate-table thead th, .region-table thead th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
.tariff-table tr.current, .region-table tr.current { background: rgba(250, 204, 21, 0.14); }

/* ---------- Section headers ---------- */
h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.4rem 0; color: var(--ink); }
h2 { font-size: 1.1rem; font-weight: 700; margin: 1.75rem 0 0.75rem 0; color: var(--ink); }
.section-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 1.5rem 0 0.6rem 0; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head .hint { color: var(--muted); font-size: 0.82rem; }

/* ---------- Helpers ---------- */
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.tiny  { font-size: 0.75rem; }
.breadcrumb { margin-bottom: 1rem; }
.breadcrumb a { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.breadcrumb a:hover { text-decoration: underline; }
code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 3px;
  font-size: 0.85em; border: 1px solid var(--line); }

/* ---------- Runs / fetch status ---------- */
.runs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem;
  font-size: 0.78rem;
}
.runs .run {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.2rem 0.65rem; color: var(--muted);
}
.runs .run.ok::before { content: "●"; color: var(--good); margin-right: 0.3rem; }
.runs .run.fail::before { content: "●"; color: var(--bad); margin-right: 0.3rem; }

/* ========== Insights dashboard (bento-grid) ========== */
/* Segmented top control */
.dash-ctrl {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem;
}
.dash-ctrl-left { display: inline-flex; align-items: center; gap: 0.6rem; }
.dash-ctrl-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 700; }
.segmented {
  display: inline-flex; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; box-shadow: var(--shadow); overflow: hidden;
}
.seg-btn {
  padding: 0.35rem 0.9rem; text-decoration: none; color: var(--ink-2);
  font-size: 0.85rem; font-weight: 600; border-radius: 999px;
  transition: background 0.12s, color 0.12s;
}
.seg-btn:hover { background: var(--surface-2); }
.seg-btn.active { background: var(--ink); color: white; }
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
  animation: live-pulse 2s infinite; vertical-align: baseline;
  margin-right: 0.2rem;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Bento grid */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 0.9rem;
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
.row-2 { grid-row: span 2; }

.tile {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.04);
  display: flex; flex-direction: column;
  transition: box-shadow 0.12s, transform 0.12s;
  min-width: 0;
  overflow: hidden;
}
.tile:hover { box-shadow: 0 2px 4px rgba(15,23,42,0.05), 0 6px 22px rgba(15,23,42,0.07); }

.tile-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; flex-wrap: wrap; }
.tile-icon { font-size: 1.15rem; line-height: 1; }
.tile-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 700;
  text-transform: uppercase; color: var(--muted);
}
.tile-mini-head {
  font-size: 0.64rem; letter-spacing: 0.1em; font-weight: 700;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
}
.ti-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* ============ Hero verdict tile ============ */
.tile-verdict {
  color: #f8fafc; border: 0;
  background: linear-gradient(135deg, #0b1220 0%, #1a2740 100%);
  justify-content: space-between; overflow: hidden;
}
.tile-verdict::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(250,204,21,0.16), transparent 60%);
  pointer-events: none;
}
.tile-verdict.verdict-best { background: linear-gradient(135deg, #052e1a 0%, #0f766e 100%); }
.tile-verdict.verdict-best::before { background: radial-gradient(ellipse at top right, rgba(74,222,128,0.22), transparent 60%); }
.tile-verdict.verdict-switch { background: linear-gradient(135deg, #0a1538 0%, #1e40af 100%); }
.tile-verdict.verdict-switch::before { background: radial-gradient(ellipse at top right, rgba(250,204,21,0.24), transparent 55%); }
.tile-verdict.verdict-close { background: linear-gradient(135deg, #3a1d05 0%, #7c2d12 100%); }
.tile-verdict .tile-eyebrow { color: #cbd5e1; }
.tile-verdict .tile-icon { font-size: 1.7rem; }
.hero-h1 {
  font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800;
  letter-spacing: -0.02em; margin: 0; line-height: 1.04; color: #f8fafc;
}
.hl-good { color: #4ade80; }
.hl-save { color: #facc15; }
.hl-bad  { color: #fca5a5; }
.hero-sub { color: #cbd5e1; margin-top: 0.4rem; font-size: 1rem; }
.hero-cta {
  display: inline-block; margin-top: 0.8rem;
  padding: 0.55rem 1rem; border-radius: 8px;
  background: #facc15; color: #111827; font-weight: 700;
  text-decoration: none; transition: transform 0.1s;
}
.hero-cta:hover { transform: translateY(-1px); }
.tile-verdict .tile-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0.4rem 0; }
.tile-verdict .tile-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-mini .hm-k {
  font-size: 0.6rem; letter-spacing: 0.12em; color: #94a3b8;
  text-transform: uppercase; font-weight: 700;
}
.hero-mini .hm-v {
  font-size: 1.7rem; font-weight: 800; color: #f8fafc;
  line-height: 1; font-variant-numeric: tabular-nums; margin-top: 0.25rem;
}
.hero-mini .hm-v span { font-size: 0.7rem; color: #94a3b8; font-weight: 500; margin-left: 0.2rem; }

/* ============ DNA tile ============ */
.tile-dna {
  background: linear-gradient(135deg, #fdf2f8 0%, #ffffff 60%);
  border-color: #fbcfe8;
}
.dna-label-big {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800;
  color: var(--ink); line-height: 1.1; margin: 0.2rem 0 0.6rem 0;
  letter-spacing: -0.01em;
}
.dna-bar {
  position: relative; height: 24px; background: #f1f5f9;
  border-radius: 6px; overflow: hidden; margin-bottom: 0.9rem;
}
.dna-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.dna-bar-text {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 0.8rem; font-weight: 700;
  color: #fff; mix-blend-mode: difference;
}
.dna-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: auto; }
.dna-num {
  font-size: 1.6rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.dna-k {
  font-size: 0.7rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-top: 0.2rem;
}

/* ============ Mini number tiles ============ */
.tile-num {
  background: var(--surface);
  display: flex; flex-direction: column;
}
.num-big {
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
  margin-bottom: 0.2rem;
}
.num-unit {
  font-size: 0.75rem; color: var(--muted); font-weight: 500; margin-left: 0.3rem;
}
.num-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.spark {
  display: flex; align-items: flex-end; gap: 3px;
  height: 36px; margin-top: 0.6rem;
}
.spark .sp-bar {
  flex: 1; background: linear-gradient(180deg, #6366f1, #4338ca);
  border-radius: 2px 2px 0 0; min-height: 2px;
}

/* ============ Polar ============ */
.tile-polar {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%);
  border-color: #bfdbfe;
  justify-content: space-between;
}
.polar-chart { width: 100%; height: auto; display: block; flex: 1; min-height: 280px; }
.polar-foot {
  display: flex; gap: 0.9rem; font-size: 0.78rem; color: var(--ink-2);
  justify-content: center; flex-wrap: wrap;
  padding-top: 0.4rem; border-top: 1px solid var(--line);
  margin-top: 0.5rem;
}
.polar-foot .sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; }

/* ============ Heatmap ============ */
.tile-heat {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%);
  border-color: #c7d2fe;
}
.heat-svg { width: 100%; height: auto; display: block; }
.heat-svg rect { transition: transform 0.1s; transform-origin: center; cursor: pointer; }
.heat-svg rect:hover { transform: scale(1.15); filter: brightness(1.1); }
.heat-legend { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end;
  margin-top: 0.4rem; padding-top: 0.3rem; border-top: 1px solid var(--line); }
.heat-grad {
  display: inline-block; width: 120px; height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #e8f0fa, #1e3a8a);
}

/* ============ Cost chart ============ */
.tile-cost { background: var(--surface); }
.tile-cost .tile-head { justify-content: space-between; }
.tile-legend { display: inline-flex; gap: 0.8rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--ink-2); margin-left: auto; }
.tile-legend .sw { display: inline-block; width: 14px; height: 10px;
  border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; }
.cost-chart { width: 100%; height: auto; display: block; }
.cost-chart .cc-bar { cursor: pointer; transition: filter 0.1s; }
.cost-chart .cc-bar:hover { filter: brightness(1.15); }
.cost-foot { margin-top: 0.3rem; }

.day-detail {
  margin-top: 1rem; padding: 0.9rem 1rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px;
}
.dd-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem; margin-bottom: 0.6rem; }
.dd-title { font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.dd-slots {
  display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px;
  height: 90px; align-items: flex-end; padding: 2px;
  background: white; border: 1px solid var(--line); border-radius: 6px;
}
.dd-slot { height: var(--h, 0%); background: var(--col, #94a3b8);
  min-height: 2px; border-radius: 2px 2px 0 0; transition: filter 0.08s; }
.dd-slot:hover { filter: brightness(1.2); }

/* ============ EV histogram ============ */
.tile-ev {
  background: linear-gradient(135deg, #fefce8 0%, #ffffff 55%);
  border-color: #fde68a;
}
.ev-chart { width: 100%; height: auto; display: block; }
.ev-stats-mini {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
  text-align: center;
}
.ev-stats-mini strong {
  display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ev-stats-mini small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; }

/* ============ Podium (top 3) ============ */
.tile-podium {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%);
  border-color: #a7f3d0;
}
.podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
  margin-top: 0.3rem;
}
.podium-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0.8rem 0.9rem;
  border-radius: 10px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--surface);
  min-height: 150px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.podium-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(15,23,42,0.08); }
.podium-card.pc-1 { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); border-color: #86efac; }
.podium-card.pc-2 { background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border-color: #cbd5e1; }
.podium-card.pc-3 { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); border-color: #fde68a; }
.podium-card.pc-current { outline: 2px solid #eab308; }
.medal { font-size: 2rem; margin-bottom: 0.2rem; }
.pc-name { font-weight: 700; color: var(--ink); line-height: 1.2; font-size: 0.95rem;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-sup { margin-top: 0.15rem; }
.pc-amt { font-size: 1.55rem; font-weight: 800; color: var(--ink);
  margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
.pc-amt span { font-size: 0.7rem; color: var(--muted); font-weight: 500; margin-left: 0.15rem; }
.pc-delta { font-size: 0.8rem; font-weight: 600; margin-top: 0.25rem; }

/* ============ Ranking ============ */
.tile-rank { background: var(--surface); }
.ranking { display: flex; flex-direction: column; gap: 0.4rem; }
.rank-row {
  display: grid;
  grid-template-columns: 34px minmax(200px, 2fr) minmax(180px, 3fr) minmax(110px, 1fr);
  gap: 0.8rem; align-items: center;
  padding: 0.55rem 0.8rem; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background 0.12s;
}
.rank-row:hover { background: #eef2f7; }
.rank-row.rr-current { background: linear-gradient(90deg, #fefce8, #fffef7); border-color: #facc15; }
.rank-row.rr-best { background: linear-gradient(90deg, #ecfdf5, #f0fdf4); border-color: #86efac; }
.rr-pos { font-weight: 800; font-size: 1.1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-row.rr-best .rr-pos { color: var(--good); }
.rank-row.rr-current .rr-pos { color: #92400e; }
.rr-name a { color: var(--ink); font-weight: 700; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.rr-name a:hover { color: var(--accent); }
.rr-name .muted { display: block; margin-top: 0.1rem; }
.rr-bar {
  position: relative; height: 16px; background: #eef2f7;
  border-radius: 4px; overflow: hidden;
}
.rr-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #64748b, #94a3b8); border-radius: 4px;
}
.rr-fill.b { background: linear-gradient(90deg, #15803d, #22c55e); }
.rr-fill.c { background: linear-gradient(90deg, #ca8a04, #facc15); }
.rr-amt { text-align: right; }
.rr-ann {
  font-size: 1.05rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rr-ann span { font-size: 0.68rem; color: var(--muted); font-weight: 500; margin-left: 0.15rem; }
.rr-delta { font-size: 0.78rem; font-weight: 700; margin-top: 0.15rem; }

/* ============ Ribbon ============ */
.tile-history { background: linear-gradient(135deg, #fafaf9 0%, #ffffff 70%); }
.ribbon {
  display: flex; gap: 4px;
  background: var(--surface-2); padding: 4px; border-radius: 10px;
  min-height: 140px;
}
.ribbon-seg {
  flex: 1 1 0; min-width: 180px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  overflow: hidden;
}
.ribbon-seg.current {
  background: linear-gradient(135deg, #fefce8, #fffbeb);
  border-color: #facc15;
}
.rib-top { display: flex; justify-content: space-between; align-items: baseline; }
.rib-date { font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.rib-name {
  font-weight: 700; color: var(--ink); font-size: 0.95rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rib-code {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace;
}
.rib-paid { display: flex; align-items: baseline; gap: 0.3rem; margin-top: auto; }
.rib-amt { font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rib-tag {
  display: inline-block; padding: 0.2rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; margin-top: 0.2rem;
}
.rib-tag.g { background: #dcfce7; color: #065f46; }
.rib-tag.r { background: #fee2e2; color: #7f1d1d; }
.rib-tag.cur { background: #facc15; color: #78350f; }

/* Responsive */
@media (max-width: 1100px) {
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 6; }
  .span-3 { grid-column: span 6; }
  .row-2 { grid-row: auto; }
}
@media (max-width: 720px) {
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .tile-verdict .tile-foot { grid-template-columns: 1fr; }
  .podium { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 30px 1fr 80px; }
  .rank-row .rr-bar { grid-column: 1 / -1; }
}

/* ========== v2 legacy — keep old class names harmless ========== */
/* (unchanged v2-* styles still live further below) */

/* ========== Insights v2 ========== */
.v2-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--muted); text-transform: uppercase;
}
.v2-accent-good { color: var(--good); }
.v2-accent-save { color: var(--accent); }
.v2-accent-bad { color: var(--bad); }
.v2-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw; }

/* --- 1. Verdict hero --- */
.v2-verdict {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  padding: 1.8rem 2rem; margin-bottom: 1.5rem;
  border-radius: var(--radius); box-shadow: 0 4px 24px rgba(15,23,42,0.08);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #f1f5f9; border: 1px solid #1e293b;
}
.v2-verdict-body { display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; }
.v2-verdict .v2-eyebrow { color: #cbd5e1; }
.v2-verdict h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin: 0;
  line-height: 1.05; letter-spacing: -0.02em; color: #f8fafc;
}
.v2-verdict h1 .v2-accent-good { color: #4ade80; }
.v2-verdict h1 .v2-accent-save { color: #facc15; }
.v2-verdict p { margin: 0; color: #cbd5e1; font-size: 1.02rem; max-width: 50ch; }
.v2-cta {
  display: inline-block; margin-top: 0.3rem;
  padding: 0.65rem 1.1rem; background: #facc15; color: #111827;
  font-weight: 700; border-radius: 6px; text-decoration: none;
  transition: transform 0.1s;
}
.v2-cta:hover { transform: translateY(-1px); }
.v2-verdict-best { background: linear-gradient(135deg, #064e3b 0%, #0f766e 100%); border-color: #065f46; }
.v2-verdict-switch { background: linear-gradient(135deg, #172554 0%, #1e40af 100%); border-color: #1e3a8a; }
.v2-verdict-close { background: linear-gradient(135deg, #422006 0%, #78350f 100%); border-color: #7c2d12; }

.v2-verdict-metrics {
  display: grid; grid-template-rows: repeat(3, 1fr); gap: 0.7rem;
}
.v2-metric {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 0.8rem 1rem;
}
.v2-metric-k { font-size: 0.72rem; color: #cbd5e1; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; }
.v2-metric-v {
  font-size: 2rem; font-weight: 800; color: #f8fafc; line-height: 1;
  margin: 0.25rem 0 0.2rem 0; font-variant-numeric: tabular-nums;
}
.v2-metric-v.v2-accent-save { color: #facc15; }
.v2-unit { font-size: 0.8rem; color: #94a3b8; font-weight: 500; margin-left: 0.3rem; }
.v2-metric-sub { color: #94a3b8; font-size: 0.82rem; }

/* --- 2. DNA + Polar --- */
.v2-dna {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem;
  margin-bottom: 1.5rem;
}
.v2-dna-card, .v2-polar-card, .v2-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow);
}
.v2-dna-title {
  font-size: 2rem; font-weight: 800; line-height: 1.05;
  margin: 0.4rem 0 0.5rem 0; color: var(--ink); letter-spacing: -0.01em;
}
.v2-dna-why { color: var(--ink-2); max-width: 40ch; margin: 0; font-size: 0.95rem; }
.v2-dna-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem; margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.v2-stat-v {
  font-size: 1.7rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.v2-stat-k {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; margin-top: 0.3rem;
}

.v2-polar-card { display: flex; flex-direction: column; }
.v2-polar { width: 100%; max-height: 420px; display: block; margin: 0 auto; flex: 1; }
.v2-polar-foot { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 0.3rem; }

/* --- 3. Generic insight card --- */
.v2-card { margin-bottom: 1.5rem; }
.v2-card-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.v2-card-head h2 { margin: 0.3rem 0 0 0; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.v2-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-2); align-items: center; }
.v2-legend span { display: inline-flex; align-items: center; }
.v2-sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 0.3rem; }

/* --- Heatmap --- */
.v2-heatmap { width: 100%; height: auto; display: block; }
.v2-heatmap rect { cursor: pointer; transition: transform 0.1s; transform-origin: center; }
.v2-heatmap rect:hover { transform: scale(1.08); filter: brightness(1.15); }
.v2-heatmap-sub { margin-top: 0.6rem; color: var(--ink-2); font-size: 0.88rem; max-width: 80ch; }
.v2-heatbar {
  display: inline-block; width: 140px; height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #e6eaf0, #3a4d8a);
  margin: 0 0.4rem;
}
.v2-legend-lbl { color: var(--muted); font-size: 0.78rem; }

/* --- Daily stacked chart --- */
.v2-daily { width: 100%; height: auto; display: block; }
.v2-daily .v2-bar { cursor: pointer; transition: filter 0.1s; }
.v2-daily .v2-bar:hover { filter: brightness(1.15); }
.v2-daily-sub { color: var(--muted); font-size: 0.82rem; margin-top: 0.4rem; }

.v2-dd {
  margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem;
  background: var(--surface-2); margin-left: -1.5rem; margin-right: -1.5rem;
  margin-bottom: -1.3rem; padding: 1rem 1.5rem 1.3rem 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.v2-dd-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem; margin-bottom: 0.6rem; }
.v2-dd-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.v2-dd-sub { color: var(--muted); font-size: 0.85rem; }
.v2-dd-slots {
  display: grid; grid-template-columns: repeat(48, 1fr); gap: 1px;
  height: 90px; align-items: flex-end; padding: 2px;
  background: white; border: 1px solid var(--line); border-radius: 5px;
}
.v2-slot { height: var(--h, 0%); background: var(--col, #94a3b8);
  min-height: 2px; border-radius: 2px 2px 0 0; transition: filter 0.08s; }
.v2-slot:hover { filter: brightness(1.2); }
.v2-dd-foot { color: var(--muted); font-size: 0.75rem; margin-top: 0.35rem; }

/* --- Ranking --- */
.v2-ranking { display: flex; flex-direction: column; gap: 0.5rem; }
.v2-rank-row {
  display: grid;
  grid-template-columns: 30px minmax(220px, 2fr) minmax(200px, 3fr) minmax(110px, 1fr);
  gap: 0.8rem; align-items: center;
  padding: 0.6rem 0.8rem; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.v2-rank-row.is-current {
  background: linear-gradient(90deg, #fefce8, var(--surface-2));
  border-color: #facc15;
}
.v2-rank-row.is-best {
  background: linear-gradient(90deg, #ecfdf5, var(--surface-2));
  border-color: #86efac;
}
.v2-rank-num { font-weight: 800; color: var(--muted); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.v2-rank-row.is-best .v2-rank-num { color: var(--good); }
.v2-rank-row.is-current .v2-rank-num { color: #92400e; }
.v2-rank-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.v2-rank-name a:hover { color: var(--accent); }
.v2-rank-sup { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.1rem; }
.v2-rank-bar {
  position: relative; height: 14px; border-radius: 3px;
  background: #eef2f7; overflow: hidden;
}
.v2-rank-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #64748b, #94a3b8); border-radius: 3px;
}
.v2-rank-fill.b { background: linear-gradient(90deg, #15803d, #22c55e); }
.v2-rank-fill.c { background: linear-gradient(90deg, #ca8a04, #eab308); }
.v2-rank-amt { text-align: right; }
.v2-rank-£ { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.v2-rank-delta { font-size: 0.8rem; margin-top: 0.15rem; font-weight: 600; }

/* --- EV stats --- */
.v2-ev-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.v2-ev-stats > div { text-align: left; }

/* --- Ribbon --- */
.v2-ribbon {
  display: flex; gap: 3px;
  background: var(--surface-2); border-radius: 8px; padding: 4px;
  overflow: hidden; min-height: 120px;
}
.v2-ribbon-seg {
  flex-shrink: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 112px;
  overflow: hidden;
}
.v2-ribbon-seg.current {
  background: linear-gradient(135deg, #fefce8, var(--surface));
  border-color: #facc15;
}
.v2-ribbon-top { font-size: 0.72rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; }
.v2-ribbon-body { margin: 0.3rem 0; }
.v2-ribbon-name { font-weight: 700; color: var(--ink); font-size: 0.92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ribbon-code { font-size: 0.68rem; color: var(--muted); font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-ribbon-num { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.v2-ribbon-delta { font-size: 0.75rem; font-weight: 600; }

@media (max-width: 900px) {
  .v2-verdict { grid-template-columns: 1fr; }
  .v2-dna { grid-template-columns: 1fr; }
  .v2-rank-row { grid-template-columns: 30px 1fr 80px; }
  .v2-rank-bar { grid-column: 1 / -1; }
  .v2-ribbon { flex-direction: column; }
  .v2-ribbon-seg { width: 100% !important; }
}

/* Kill the OLD insights CSS below — keep it working but deprecated (pages no longer reference it). */
.verdict {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1.6rem 1.7rem;
  border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
}
.verdict h1 { margin: 0 0 0.4rem 0; font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.01em; }
.verdict p { margin: 0 0 0.6rem 0; color: var(--ink-2); max-width: 58ch; }
.verdict-icon { font-size: 3.2rem; line-height: 1; flex-shrink: 0; }
.verdict-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 600; margin-bottom: 0.15rem; }
.verdict-meta { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.4rem; }
.verdict-best { border-left: 4px solid var(--good); background: linear-gradient(105deg, #f0fdf4 0%, #ffffff 40%); }
.verdict-switch { border-left: 4px solid var(--accent); background: linear-gradient(105deg, #eff6ff 0%, #ffffff 40%); }
.verdict-switch h1 { color: var(--accent-ink); }
.verdict-close { border-left: 4px solid #eab308; background: linear-gradient(105deg, #fefce8 0%, #ffffff 40%); }
.verdict-unknown { border-left: 4px solid var(--muted); }

/* --- Energy DNA --- */
.dna {
  display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1rem;
  margin-bottom: 1.2rem;
}
.dna-cat, .dna-grid {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow);
}
.dna-eyebrow { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 600; margin-bottom: 0.4rem; }
.dna-label { font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.dna-why { font-size: 0.88rem; color: var(--ink-2); margin-top: 0.4rem; }
.dna-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.9rem; align-items: start; }
.dna-grid .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.dna-grid .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.dna-grid .v small { font-size: 0.7rem; color: var(--muted); font-weight: 500; margin-left: 0.25rem; }

/* --- Generic "insight card" --- */
.insight-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}
.insight-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.insight-head h2 { margin: 0; font-size: 1.05rem; }
.insight-head .hint { color: var(--muted); font-size: 0.78rem; }

/* --- Heatmap --- */
.heatmap-wrap { --cell: 1fr; }
.hm-body { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem; align-items: stretch; }
.hm-axis-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px;
  font-size: 0.72rem; color: var(--muted); font-weight: 500; align-items: center;
  padding: 2px 0; }
.hm-axis-days span { text-align: right; padding-right: 0.35rem; }
.hm-axis-hours {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem;
  font-size: 0.65rem; color: var(--muted); margin-bottom: 0.25rem;
}
.hm-axis-hours::before { content: ""; width: 2.5rem; }
.hm-axis-hours { grid-template-columns: 2.5rem 1fr; }
.hm-axis-hours > span { display: inline-block; }
.hm-axis-hours > :first-child { display: contents; }
.hm-axis-hours {
  display: flex; justify-content: space-between; padding-left: 2.6rem;
}
.hm-axis-hours span { width: 1em; text-align: center; }
.hm-axis-hours span:not(.marked) { visibility: hidden; }

.hm-grid {
  display: grid; grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  /* cells filled row-major with (weekday, hour) in that order */
  grid-auto-flow: row;
}
.hm-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: color-mix(in srgb, #1e40af calc(var(--i) * 100%), #f1f5f9);
  transition: transform 0.1s;
  cursor: pointer;
}
.hm-cell:hover { transform: scale(1.35); outline: 2px solid var(--ink); z-index: 2; }

.hm-legend {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem;
  font-size: 0.72rem; color: var(--muted);
}
.hm-grad { display: inline-block; width: 160px; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9, #1e40af); }

/* --- EV section --- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem; margin-bottom: 1rem; }
.ev-grid .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; }
.ev-grid .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.ev-grid .v small { font-size: 0.7rem; color: var(--muted); font-weight: 500; margin-left: 0.25rem; }
.ev-clock-wrap { margin-top: 0.5rem; background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 0.5rem; }
.ev-clock { width: 100%; height: auto; display: block; }

/* --- Daily cost timeline --- */
.daily-timeline {
  display: flex; align-items: flex-end; gap: 2px;
  height: 160px; padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.dt-day {
  flex: 1; min-width: 0; position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; cursor: pointer;
  padding-bottom: 18px;
}
.dt-bar {
  width: 84%; max-width: 16px;
  background: #eab308;
  border-radius: 2px 2px 0 0;
  position: relative; overflow: hidden;
  transition: filter 0.12s, transform 0.12s;
}
.dt-day:hover .dt-bar { filter: brightness(1.1); transform: translateY(-2px); }
.dt-day.active .dt-bar { outline: 2px solid var(--ink); outline-offset: 2px; }
.dt-off {
  width: 100%; background: linear-gradient(180deg, #3b82f6, #1e40af);
  position: absolute; bottom: 0; left: 0;
}
.dt-cost-tick {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--ink); opacity: 0.75;
  pointer-events: none;
}
.dt-label {
  position: absolute; bottom: 2px; left: 0; right: 0;
  text-align: center; font-size: 0.62rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.timeline-legend {
  display: flex; gap: 1.1rem; font-size: 0.78rem; color: var(--muted);
  margin-top: 0.6rem; flex-wrap: wrap;
}
.timeline-legend .sw { display: inline-block; width: 14px; height: 10px;
  border-radius: 2px; vertical-align: middle; margin-right: 0.3rem; }

/* --- Day detail drill-in --- */
.day-detail {
  margin-top: 1rem; border-top: 1px dashed var(--line);
  padding-top: 0.9rem;
}
.dd-head { display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 0.7rem; gap: 0.5rem; }
.dd-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; }
.dd-title { font-size: 1.15rem; font-weight: 700; }
.dd-slots {
  display: grid; grid-template-columns: repeat(48, 1fr);
  gap: 1px; height: 90px; align-items: flex-end;
  background: var(--surface-2); padding: 2px; border-radius: var(--radius-sm);
}
.slot-bar {
  height: var(--h, 0%); background: var(--col, #94a3b8);
  border-radius: 2px 2px 0 0; min-height: 2px;
}

/* --- What-if matrix --- */
.whatif { display: flex; flex-direction: column; gap: 5px; }
.wi-row {
  display: grid; grid-template-columns: minmax(240px, 2fr) minmax(120px, 3fr) minmax(130px, 1fr);
  gap: 0.8rem; align-items: center;
  padding: 0.55rem 0.8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.wi-row.is-current {
  background: linear-gradient(90deg, rgba(250,204,21,0.18), rgba(250,204,21,0.04));
  border-color: #eab308;
}
.wi-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wi-name a:hover { color: var(--accent); }
.wi-name .muted { display: block; margin-top: 0.15rem; }
.wi-bar {
  position: relative; height: 18px; background: #eef2f7;
  border-radius: 3px; overflow: hidden;
}
.wi-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), #38bdf8);
  border-radius: 3px;
}
.wi-bar .fill.best { background: linear-gradient(90deg, #15803d, #22c55e); }
.wi-bar .fill.current { background: linear-gradient(90deg, #eab308, #facc15); }
.wi-bar .fill.cheaper { background: linear-gradient(90deg, #15803d, #4ade80); }
.wi-bar .fill.pricier { background: linear-gradient(90deg, #fb923c, var(--bad)); }
.wi-cost { text-align: right; }
.wi-cost .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.wi-cost .amt small { font-size: 0.7rem; color: var(--muted); font-weight: 500; margin-left: 0.15rem; }
.wi-cost .delta { font-size: 0.78rem; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.wi-cost .delta.g { color: var(--good); font-weight: 600; }
.wi-cost .delta.r { color: var(--bad); }

/* --- Agreements --- */
.agreements { display: flex; flex-direction: column; gap: 0.4rem; }
.ag-row {
  display: grid; grid-template-columns: 1.5fr 2fr 1fr 1fr;
  gap: 0.8rem; align-items: center;
  padding: 0.6rem 0.8rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.ag-row.is-current {
  background: linear-gradient(90deg, rgba(250,204,21,0.16), rgba(250,204,21,0.02));
  border-color: #eab308;
}
.ag-dates { font-weight: 600; font-size: 0.9rem; }
.ag-name code { font-size: 0.7rem; }
.ag-amt { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-amt.g { color: var(--good); }
.ag-amt.r { color: var(--bad); }
.ag-paid, .ag-would { text-align: right; }

@media (max-width: 820px) {
  .dna { grid-template-columns: 1fr; }
  .verdict { flex-direction: column; align-items: flex-start; }
  .verdict-icon { font-size: 2.4rem; }
  .ag-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .ag-name { grid-column: 1 / -1; }
  .wi-row { grid-template-columns: 1fr; }
  .wi-cost { text-align: left; }
}

/* ========== Compare page ========== */
/* ---------- Compare page ---------- */
.mode-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.3rem; box-shadow: var(--shadow);
}
.mt-btn {
  display: block; text-align: center; padding: 0.7rem 1rem;
  border-radius: var(--radius-sm); text-decoration: none;
  color: var(--muted); font-size: 0.9rem;
  transition: background 0.12s;
}
.mt-btn:hover { background: var(--surface-2); color: var(--ink); }
.mt-btn.active {
  background: var(--ink); color: white; font-weight: 500;
}
.mt-btn.active strong { color: white; }
.mt-btn strong { color: var(--ink); }

.cost-row.unreliable { opacity: 0.8; }
.cost-row.unreliable .cost-bar { border: 1px dashed #d97706; }
@media (max-width: 560px) {
  .mode-toggle { grid-template-columns: 1fr; }
}


.assumption-bar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.assumption-bar form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem; align-items: end; margin: 0;
}
.assumption-bar label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.78rem; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.assumption-bar label input,
.assumption-bar label select {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  padding: 0.5rem 0.65rem;
}
.assumption-bar .slider-wrap { display: flex; align-items: center; gap: 0.6rem; }
.assumption-bar .slider-wrap input[type="range"] { flex: 1; }
.assumption-bar .slider-wrap .val {
  min-width: 2.8rem; text-align: right; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.assumption-bar .kind-toggle {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px;
}
.assumption-bar .kind-toggle label {
  margin: 0; cursor: pointer; padding: 0.4rem 0.8rem;
  border-radius: calc(var(--radius-sm) - 2px); color: var(--muted);
  text-transform: none; letter-spacing: 0;
  font-weight: 500; font-size: 0.9rem;
}
.assumption-bar .kind-toggle input { display: none; }
.assumption-bar .kind-toggle input:checked + span {
  background: var(--ink); color: white; padding: 0.4rem 0.8rem; border-radius: calc(var(--radius-sm) - 2px);
  margin: -0.4rem -0.8rem;
}

.assumption-bar .btn-primary {
  background: var(--accent); color: white; padding: 0.65rem 1.25rem;
  font-weight: 600; align-self: end;
}
.assumption-bar .btn-primary:hover { background: #0284c7; }

/* cost chart: each row is a horizontal bar */
.cost-chart { display: flex; flex-direction: column; gap: 6px; }
.cost-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 2fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr);
  gap: 0.75rem; align-items: center;
  padding: 0.55rem 0.8rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background 0.1s ease;
}
.cost-row:hover { background: var(--surface-2); }
.cost-row.is-current {
  background: linear-gradient(90deg, rgba(250,204,21,0.18) 0%, rgba(250,204,21,0.06) 80%);
  border-color: #eab308;
}
.cost-row.unpriced { opacity: 0.55; }

.cost-name { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.cost-name a { color: var(--ink); text-decoration: none; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cost-name a:hover { color: var(--accent); }
.cost-name .sup { color: var(--muted); font-size: 0.78rem; }

.cost-bar {
  position: relative; height: 22px; border-radius: 4px;
  background: #eef2f7; overflow: hidden;
}
.cost-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #38bdf8 100%);
  border-radius: 4px; transition: width 0.2s ease;
}
.cost-bar .fill.cheaper  { background: linear-gradient(90deg, var(--good) 0%, #4ade80 100%); }
.cost-bar .fill.neutral  { background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%); }
.cost-bar .fill.pricier  { background: linear-gradient(90deg, #fb923c 0%, var(--bad) 100%); }
.cost-bar .fill.best     { background: linear-gradient(90deg, #15803d 0%, #22c55e 100%); box-shadow: 0 0 0 2px rgba(34,197,94,0.3) inset; }
.cost-bar .current-marker {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.cost-amount {
  font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; font-size: 1rem;
}
.cost-amount .unit { font-size: 0.72rem; color: var(--muted); font-weight: 500; }
.cost-delta { text-align: right; font-size: 0.88rem; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.cost-delta.cheaper { color: var(--good); }
.cost-delta.pricier { color: var(--bad); }
.cost-delta.neutral { color: var(--muted); }

.cost-legend { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--muted);
  margin-top: 0.5rem; flex-wrap: wrap; }
.cost-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cost-legend .swatch { width: 14px; height: 8px; border-radius: 2px; }

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

/* ---------- Tariff detail ---------- */
.detail-hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
  display: grid; gap: 0.8rem;
}
.detail-hero h1 { margin-bottom: 0.15rem; }
.detail-hero .sub { color: var(--muted); }
.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem; margin-top: 0.5rem;
}
.summary-grid .cell {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem;
}
.summary-grid .cell .label { font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.summary-grid .cell .val { font-weight: 600; color: var(--ink); margin-top: 0.15rem; }

/* 24-hour TOU timeline */
.timeline-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow);
  margin: 1rem 0;
}
.timeline-card h3 {
  margin: 0 0 0.75rem 0; font-size: 0.95rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.tl { position: relative; height: 46px; border-radius: var(--radius-sm);
  overflow: hidden; background: #eef2f7; border: 1px solid var(--line); }
.tl .band {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 0.82rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  overflow: hidden; white-space: nowrap;
}
.tl .band.light { color: var(--ink); text-shadow: none; }
.tl-axis {
  display: grid; grid-template-columns: repeat(24, 1fr);
  font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}
.tl-axis span { text-align: left; position: relative; }
.tl-axis span::before {
  content: ""; position: absolute; top: -0.3rem; left: 0;
  width: 1px; height: 4px; background: var(--line-2);
}
.tl-axis span:nth-child(even) { visibility: hidden; }
.tl-axis span:last-child { visibility: visible; text-align: right; }
.tl-legend {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem;
  font-size: 0.82rem;
}
.tl-legend .lg {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.25rem 0.55rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px;
}
.tl-legend .sw { width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1); }
.tl-legend strong { font-variant-numeric: tabular-nums; }

/* Region list (redesigned) */
.region-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem; margin-top: 0.5rem;
}
.region-grid .rg-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.region-grid .rg-card.is-primary {
  border-color: var(--brand); background: #fffbeb;
}
.region-grid .rg-card .code {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 700; color: var(--ink); font-size: 0.9rem;
}
.region-grid .rg-card .name { color: var(--muted); font-size: 0.78rem; }
.region-grid .rg-card .val { color: var(--ink); font-weight: 600;
  margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .tariff-row {
    grid-template-columns: 1fr; gap: 0.5rem; padding: 0.8rem 1rem;
  }
  .tariff-meta { text-align: left; align-items: flex-start; }
  .topbar .wrap { gap: 0.5rem; }
  .region-form { margin-left: 0; width: 100%; }
  .region-form select { width: 100%; }
  h1 { font-size: 1.4rem; }
}

/* ========== 2026 dashboard rebuild ========== */
:root {
  --bg: #f5f7f4;
  --surface: #ffffff;
  --surface-2: #f7faf8;
  --ink: #14211f;
  --ink-2: #40504d;
  --muted: #71817d;
  --line: #dfe7e2;
  --line-2: #c8d5cf;
  --accent: #0f766e;
  --accent-ink: #083f3b;
  --brand: #d6ef63;
  --brand-ink: #263400;
  --good: #147d47;
  --good-bg: #e7f7ed;
  --bad: #b42318;
  --bad-bg: #fee7e4;
  --warn: #b15c06;
  --warn-bg: #fff1d6;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(20, 33, 31, 0.04), 0 12px 30px rgba(20, 33, 31, 0.07);
}

body {
  background: linear-gradient(180deg, #eef4ef 0, #f5f7f4 320px), var(--bg);
  color: var(--ink);
}

a { color: var(--accent); }
.app-shell { width: min(1440px, calc(100% - 32px)); margin: 0 auto; }
.page-main { padding: 1.25rem 0 4rem; }

.app-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 252, 249, 0.92);
  border-bottom: 1px solid rgba(200, 213, 207, 0.8);
  backdrop-filter: blur(14px);
}
.app-header .app-shell {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: 1rem; align-items: center; min-height: 72px;
}
.brand-mark { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; min-width: 0; }
.brand-icon {
  width: 38px; height: 38px; border-radius: 8px; display: inline-grid; place-items: center;
  background: var(--ink); color: var(--brand); font-weight: 900;
}
.brand-mark strong, .brand-mark small { display: block; line-height: 1.15; }
.brand-mark small { margin-top: 0.15rem; color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.main-nav {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem;
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px;
}
.main-nav a {
  min-width: 92px; text-align: center; color: var(--ink-2); text-decoration: none;
  padding: 0.48rem 0.8rem; border-radius: 6px; font-weight: 700; font-size: 0.88rem;
}
.main-nav a:hover, .main-nav a.active { background: var(--ink); color: #fff; }
.region-picker { justify-self: end; display: flex; align-items: center; gap: 0.55rem; }
.region-picker label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; }
.region-picker select { width: min(270px, 34vw); }

.app-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.footer-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.footer-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.footer-actions form, .hero-actions form { margin: 0; }

.eyebrow {
  display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 850;
}
.decision-hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
  gap: 1rem; align-items: stretch; margin-bottom: 1rem;
}
.decision-copy, .decision-panel, .insight-card, .empty-state-panel, .market-overview, .browse-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.decision-copy {
  min-height: 340px; padding: clamp(1.4rem, 3vw, 2.3rem);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative;
}
.decision-copy::after {
  content: ""; position: absolute; right: -80px; bottom: -110px; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(214, 239, 99, 0.34); pointer-events: none;
}
.needs-switch .decision-copy { background: linear-gradient(135deg, #10312d 0%, #0f766e 100%); color: #fff; }
.needs-switch .decision-copy .eyebrow, .needs-switch .decision-copy p { color: #d8ede8; }
.looks-good .decision-copy { background: linear-gradient(135deg, #f6fbf3 0%, #ffffff 65%); }
.decision-copy h1 {
  max-width: 11ch; margin: 0.55rem 0 0.65rem;
  font-size: clamp(2.5rem, 7vw, 5.9rem); line-height: 0.93; letter-spacing: 0;
}
.decision-copy p { max-width: 62ch; margin: 0; color: var(--ink-2); font-size: 1.03rem; }
.hero-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 0.68rem 1rem; border-radius: 7px; text-decoration: none; font-weight: 800;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: #c7e94b; color: var(--brand-ink); }
.btn-secondary { background: rgba(255,255,255,0.12); color: inherit; border-color: rgba(255,255,255,0.32); }
.looks-good .btn-secondary, .empty-state-panel .btn-secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

.decision-panel { padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.comparison-pair { display: grid; gap: 0.75rem; }
.comparison-pair > div {
  min-height: 132px; padding: 1rem; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 8px; display: flex; flex-direction: column;
}
.metric-label { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.comparison-pair strong { margin-top: 0.4rem; font-size: 2.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.comparison-pair small { color: var(--muted); font-weight: 700; }
.comparison-pair span:last-child { color: var(--ink-2); margin-top: auto; font-size: 0.9rem; line-height: 1.25; }
.meter-track { height: 12px; border-radius: 4px; background: #e8eee9; overflow: hidden; }
.meter-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #89c15d, var(--brand), #f2b84b); }
.meter-caption { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.86rem; font-weight: 700; }

.dashboard-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr) minmax(260px, 0.8fr);
  gap: 1rem; margin-bottom: 1rem;
}
.insight-card { padding: 1rem; min-width: 0; }
.household-card { background: linear-gradient(135deg, #ffffff 0%, #edf8ef 100%); }
.card-head, .section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.card-head a, .section-title a { color: var(--accent); text-decoration: none; font-size: 0.86rem; font-weight: 800; }
.card-head > span:last-child { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.insight-card h2, .market-overview h2, .browse-panel h2, .empty-state-panel h2 {
  margin: 0.42rem 0 0.35rem; font-size: 1.35rem; line-height: 1.12;
}
.insight-card p, .empty-state-panel p { color: var(--ink-2); margin: 0; }
.split-bar { height: 26px; border-radius: 5px; background: #f2dcae; overflow: hidden; margin: 1rem 0 0.85rem; border: 1px solid #ead09d; }
.split-bar span { display: block; height: 100%; background: linear-gradient(90deg, #10433e, #0f766e); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.mini-stats div { padding: 0.7rem; background: rgba(255,255,255,0.72); border: 1px solid var(--line); border-radius: 7px; }
.mini-stats strong { display: block; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mini-stats span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.73rem; font-weight: 700; }
.big-number { margin: 0.6rem 0 0.25rem; font-size: 3rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.big-number small { margin-left: 0.35rem; color: var(--muted); font-size: 0.82rem; font-weight: 800; }
.charging-window, .daily-bars {
  display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 1rem;
  padding-top: 0.3rem; border-top: 1px solid var(--line);
}
.charging-window span, .daily-bars span { flex: 1; min-height: 3px; border-radius: 2px 2px 0 0; background: #a6b2ad; }
.charging-window span.off { background: var(--accent); }
.daily-bars span { background: linear-gradient(180deg, #71ad87, #147d47); }
.empty-state-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; margin-bottom: 1rem; }
.market-overview, .browse-panel { padding: 1rem; margin-bottom: 1rem; }
.section-title { margin-bottom: 0.9rem; align-items: center; }
.section-title h2 { margin-bottom: 0; }
.recommendation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.recommendation {
  position: relative; min-height: 188px; padding: 0.95rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem;
}
.recommendation.best { background: linear-gradient(135deg, #e6f7e8, #ffffff); border-color: #9ed5a8; }
.recommendation.current { outline: 2px solid var(--brand); }
.recommendation .rank {
  width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 6px;
  background: var(--ink); color: #fff; font-weight: 900; margin-bottom: 0.5rem;
}
.recommendation strong { line-height: 1.2; }
.recommendation small { color: var(--muted); font-weight: 700; }
.recommendation b { margin-top: auto; font-size: 1.65rem; line-height: 1; }
.recommendation b span, .recommendation em { color: var(--muted); font-size: 0.78rem; font-style: normal; font-weight: 700; }
.stat-strip { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }
.stat-strip span, .filter-tabs a, .line-badges span {
  border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 0.28rem 0.62rem;
  color: var(--ink-2); font-size: 0.78rem; font-weight: 800; text-decoration: none;
}
.smart-filters {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto auto;
  gap: 0.55rem; align-items: center; margin-bottom: 0.7rem;
}
.smart-filters button { height: 40px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.filter-tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tariff-table-modern { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tariff-line {
  display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(160px, 0.8fr) minmax(230px, 1fr) minmax(96px, 0.45fr);
  gap: 1rem; align-items: center; padding: 0.85rem 1rem; background: var(--surface); color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.tariff-line:last-child { border-bottom: 0; }
.tariff-line:hover { background: #f8fbf8; }
.tariff-line.current { background: linear-gradient(90deg, rgba(214,239,99,0.22), #fff); }
.tariff-line > div:first-child { min-width: 0; }
.tariff-line strong, .rate-cell b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tariff-line > div:first-child span, .standing-cell span { color: var(--muted); font-size: 0.82rem; }
.line-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.line-badges span { padding: 0.18rem 0.5rem; font-size: 0.7rem; }
.line-badges .your { background: var(--brand); border-color: #c7e94b; color: var(--brand-ink); }
.rate-cell { min-width: 0; }
.rate-cell b { color: var(--ink-2); font-size: 0.88rem; }
.market-bar { position: relative; display: block; height: 8px; margin-top: 0.45rem; border-radius: 4px; background: #e7eee9; overflow: hidden; }
.market-bar i { position: absolute; inset-block: 0; border-radius: inherit; background: linear-gradient(90deg, #147d47, #d6ef63, #b42318); }
.standing-cell { text-align: right; font-variant-numeric: tabular-nums; }
.standing-cell strong { display: inline; }
.empty-row { padding: 1rem; color: var(--muted); background: var(--surface); }

@media (max-width: 1120px) {
  .app-header .app-shell { grid-template-columns: 1fr; padding: 0.75rem 0; }
  .main-nav, .region-picker { justify-self: start; }
  .decision-hero, .dashboard-grid { grid-template-columns: 1fr; }
  .recommendation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tariff-line { grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 1fr); }
  .standing-cell { text-align: left; }
}

@media (max-width: 720px) {
  .app-shell { width: min(100% - 20px, 1440px); }
  .brand-mark small { white-space: normal; }
  .main-nav, .region-picker, .region-picker select { width: 100%; }
  .main-nav a { min-width: 0; flex: 1; }
  .decision-copy { min-height: 0; }
  .decision-copy h1 { max-width: none; font-size: clamp(2.2rem, 14vw, 4rem); }
  .mini-stats, .recommendation-grid, .smart-filters { grid-template-columns: 1fr; }
  .empty-state-panel, .footer-inner, .section-title { align-items: flex-start; flex-direction: column; }
  .footer-actions { justify-content: flex-start; }
  .tariff-line { grid-template-columns: 1fr; gap: 0.55rem; }
}

/* ========== In-place refresh (region/tariff switchers) ========== */
main.page-main { transition: opacity 0.15s ease; }
body.busy main.page-main { opacity: 0.45; pointer-events: none; }
body.busy .region-picker select { cursor: progress; }

/* ========== Mobile refinements ========== */
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 720px) {
  /* stacked header is tall — don't pin it over half the viewport */
  .app-header { position: static; }
  .region-picker { flex-wrap: wrap; }

  /* form controls at 16px so iOS doesn't zoom in on focus */
  input[type="search"], input[type="number"], input[type="text"], select { font-size: 16px; }

  /* insights window picker: wrap instead of overflowing */
  .dash-ctrl-left { flex-wrap: wrap; }
  .segmented { flex-wrap: wrap; border-radius: 14px; }

  /* dense SVG charts keep a readable width and pan sideways */
  .chart-scroll > svg { min-width: 680px; }

  /* tariff history ribbon: stack segments */
  .ribbon { flex-direction: column; }
  .ribbon-seg { min-width: 0; flex-basis: auto !important; }

  /* compare page: name and bar full-width, figures underneath */
  .cost-row { grid-template-columns: 1fr auto; row-gap: 0.45rem; }
  .cost-name, .cost-bar { grid-column: 1 / -1; }
  .cost-name a { white-space: normal; }
  .cost-amount { text-align: left; }

  /* data tables pan sideways instead of squashing */
  .rate-table, .tariff-table, .region-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- Login / PIN gate ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.login-body {
  display: grid; place-items: center; min-height: 100vh;
  padding: 1.25rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.login-card {
  width: min(400px, 100%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.75rem 1.6rem;
}
.login-brand {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.35rem;
}
.login-brand strong, .login-brand small { display: block; line-height: 1.15; }
.login-brand small { margin-top: 0.15rem; color: var(--muted); font-size: 0.74rem; }

.login-lead { margin: 0 0 1rem; color: var(--ink-2); }
.login-note { margin: 0; color: var(--muted); font-size: 0.85rem; }
.login-note code {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.1rem 0.3rem; font-size: 0.82rem;
}

.login-form { display: flex; gap: 0.5rem; }
.login-form input {
  flex: 1; padding: 0.6rem 0.7rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: 1.15rem; letter-spacing: 0.28em; text-align: center;
}
.login-form input:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.login-error {
  margin: 0.9rem 0 0; padding: 0.5rem 0.7rem;
  background: var(--bad-bg); color: var(--bad);
  border-radius: var(--radius-sm); font-size: 0.85rem;
}