/* ============================================================
   Huisstijl Lab023 — gedeelde stijl voor alle sites
   Eén bron voor lettertype, kleuren en de kop "Mijn + thema".
   Het themawoord staat altijd in blauw (--accent).
   Kaarten en achtergrond volgen de glaslook van mijnweer.
   ============================================================ */

:root {
  --bg:     #061225;                  /* diepe navy basis */
  --kaart:  rgba(15, 36, 67, .72);    /* half-doorzichtig paneel */
  --rand:   rgba(255, 255, 255, .10); /* dunne lichte rand */
  --tekst:  #f7fbff;                  /* hoofdtekst */
  --muted:  #9db0c9;                  /* bijschriften */

  --accent: #4dabf7;                  /* themakleur: altijd blauw */

  --gas:    #f4a261;
  --geld:   #69db7c;

  --radius:     20px;                 /* kaarten */
  --radius-app: 32px;                 /* buitenste paneel */
}

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

body {
  min-height: 100vh;
  color: var(--tekst);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(44, 135, 205, .25), transparent 32rem),
    radial-gradient(circle at 90% 90%, rgba(105, 74, 207, .20), transparent 30rem),
    linear-gradient(145deg, #071a32, var(--bg));
}

/* Buitenste paneel: <main class="app"> ... </main> */
.app {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-app);
  background: rgba(5, 18, 39, .68);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Kop: <h1 class="merk">Mijn<em>Verbruik</em></h1> */
.merk {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.merk em {
  color: var(--accent);
  font-style: normal;
}

.merk-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  margin-bottom: 18px;
}

/* Herbruikbare kaart (glaslook) */
.kaart {
  padding: 20px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--kaart);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}