/* Returvarme besparelsesberegner — hybrid-palette (dæmpet blå base + orange accent) */
:root {
  --blue: #1E3A5F;
  --orange: #E86C2C;
  --green: #1E8449;
  --ink: #222a35;
  --muted: #667085;
  --line: #e2e8f0;
  --bg: #f6f8fb;
  --card: #ffffff;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.b-wrap { max-width: 920px; margin: 0 auto; padding: 28px 18px 40px; }

.b-head h1 { color: var(--blue); font-size: 1.7rem; margin: 0 0 6px; }
.b-head p { color: var(--muted); margin: 0 0 20px; max-width: 60ch; }

.b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 720px) { .b-grid { grid-template-columns: 1fr; } }
.b-chart-card { grid-column: 1 / -1; }

.b-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.b-result-card h2 { color: var(--blue); font-size: 1.05rem; margin: 0 0 12px; }

.b-field { margin-bottom: 18px; }
.b-field:last-child { margin-bottom: 0; }
.b-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--ink); }

input[type="number"] {
  width: 100%;
  padding: 11px 12px;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
}
input[type="number"]:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,108,44,.15); }

input[type="range"] { width: 100%; accent-color: var(--orange); margin-top: 4px; }
.b-range-legend { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 4px; gap: 8px; }
.b-range-legend span:nth-child(2) { text-align: center; }

.b-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: .92rem; }
.b-row span:first-child { color: var(--muted); }
.b-big { font-size: 1.15rem; font-weight: 700; color: var(--blue); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.b-big strong { color: var(--blue); }
.b-accent strong { color: var(--orange); font-weight: 700; }
.b-sub { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.b-green { color: var(--green); font-weight: 600; }

.b-chart-title { margin: 18px 0 6px; font-size: .8rem; color: var(--muted); }
.b-chart { width: 100%; }

.b-note { font-size: .74rem; color: var(--muted); margin: 12px 0 4px; }
.b-src { font-size: .72rem; color: var(--muted); margin: 0; }
.b-muted { color: var(--muted); font-size: .9rem; }

.b-foot { margin-top: 22px; text-align: center; font-size: .75rem; color: var(--muted); }