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

    :root {
      --bg:        #0a1520;
      --surface:   #0f1e2e;
      --surface2:  #162840;
      --surface3:  #1e3350;
      --border:    #1e3a54;
      --text:      #e4f0f8;
      --muted:     #94b4c8;
      --dim:       #86aabf;
      --accent:    #00b4d8;
      --accent2:   #48cae4;
      --warm:      #f59e0b;
      --cold:      #60a5fa;
      --green:     #34d399;
      --red:       #f87171;
      --radius:    12px;
      --radius-sm: 8px;

      /* Typeschaal — één bewuste set i.p.v. 43 losse groottes. Tekst voor
         labels/body/koppen, display voor de grote getallen, en de hero-cijfers
         behouden hun eigen maat als blikvanger. */
      --fs-2xs: 0.65rem;  --fs-xs: 0.75rem;  --fs-sm: 0.85rem;
      --fs-md:  0.95rem;  --fs-lg: 1.10rem;  --fs-xl: 1.25rem;
      --fs-d1:  1.5rem;   --fs-d2: 2.0rem;   --fs-d3: 3.0rem;
      --fs-hero-icon: 4.5rem;  --fs-hero-temp: 5.0rem;  --fs-hero-temp-m: 4.0rem;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── Top bar ────────────────────────────────────────────── */
    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 10;
      transition: box-shadow .25s ease, background .25s ease;
    }
    .topbar.scrolled {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
    }
    .topbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;   /* mag krimpen zodat de titel afkapt i.p.v. de rechterkant weg te duwen */
    }
    .logo-mark {
      display: block; flex-shrink: 0; border-radius: 7px;
    }
    .logo-text {
      font-size: var(--fs-md);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: var(--text);
      white-space: nowrap;      /* nooit over meerdere regels breken */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .logo-text span { color: var(--accent); }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: var(--fs-xs);
      color: var(--muted);
    }
    /* Hartslag en stationsingang zijn samengevoegd tot één chip. Voorheen
       stonden ze los, met de toestelnaam als label — die zei niet wat een
       klik opleverde en stond bovendien al in de footer. */
    #freshness {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 11px;
      font-size: var(--fs-xs);
      line-height: 1;
      white-space: nowrap;
      color: var(--muted);
      cursor: pointer;
      transition: border-color .2s ease, color .2s ease;
    }
    #freshness:hover,
    #freshness:focus-visible { border-color: var(--accent); color: var(--text); }
    #freshness .fr-live { color: var(--text); font-weight: 500; }
    #freshness .fr-sep  { color: var(--dim); }
    /* Debug wordt onthouden in localStorage en kon daardoor maandenlang
       ongemerkt aanstaan, ook op productie. Als hij aanstaat, hoort dat
       zichtbaar te zijn — en met één klik uit te zetten. */
    #freshness .fr-debug {
      background: rgba(251,191,36,0.18); color: #fcd34d;
      border-radius: 4px; padding: 1px 5px; font-size: var(--fs-2xs);
      font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer;
    }
    #freshness .fr-debug:hover { background: rgba(251,191,36,0.3); }
    #freshness .fr-info { display: inline-flex; color: var(--dim); margin-left: 1px; }
    #freshness:hover .fr-info { color: var(--accent); }
    #freshness-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(74,222,128,0.16);
      flex: 0 0 auto;
      transition: background 0.5s, box-shadow 0.5s;
    }

    /* ── Hero ───────────────────────────────────────────────── */
    .hero {
      background: #0d2843;
      border-top: 3px solid var(--accent);
      border-bottom: 1px solid var(--border);
      padding: 22px 28px 18px;
      position: relative;
      overflow: hidden;
    }
    #hero-map {
      position: absolute;
      inset: -10px;              /* overscan zodat de blur geen randen toont */
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      /* Esri "Dark Gray" is al donker en neutraal. Bewust wat meer gedimd +
         zachtere blur zodat de kaart als subtiele textuur naar de achtergrond
         zakt (herkenbaar bij aandachtig kijken, maar niet opdringerig). */
      filter: blur(1.3px) brightness(0.72);
    }
    #hero-map img { display: block; }
    /* Leaflet zoom-knoppen en attributie verbergen */
    #hero-map .leaflet-control { display: none !important; }
    .hero-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 36px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    /* Links de identiteit (icoon + temperatuur + conditie + gevoel) als één
       blok; rechts het datapaneel. Naast elkaar i.p.v. gestapeld → kortere
       hero, dus de meetkaarten komen eerder boven de vouw. */
    .hero-identity { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
    .hero-id-text { display: flex; flex-direction: column; }
    .hero-icon { font-size: var(--fs-hero-icon); line-height: 1; flex-shrink: 0; }
    .hero-temp {
      font-size: var(--fs-hero-temp);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
      color: #fff;
    }
    .hero-temp sup {
      font-size: var(--fs-d1);
      font-weight: 400;
      vertical-align: super;
      color: var(--muted);
      margin-left: 4px;
    }
    .hero-meta {
      flex: 0 1 560px; min-width: 260px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .hero-condition {
      font-size: var(--fs-lg);
      font-weight: 600;
      color: var(--text);
      margin-top: 6px;
    }
    .hero-feels {
      font-size: var(--fs-sm);
      color: var(--muted);
      margin-top: 2px;
    }
    .hero-feels b { color: var(--text); }
    .hero-minmax {
      display: flex;
      gap: 40px;
      margin-top: 0;
    }
    .hero-mm {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .hero-mm .lbl {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--dim);
      font-weight: 600;
    }
    .hero-mm .val { font-size: var(--fs-xl); font-weight: 700; }
    .val-hi { color: var(--warm); }
    .val-lo { color: var(--cold); }
    .hero-mm-time {
      font-size: var(--fs-2xs);
      color: var(--dim);
      margin-top: 2px;
    }


    /* ── Content area ───────────────────────────────────────── */
    .content {
      max-width: 1240px;
      margin: 0 auto;
      padding: 16px 28px 32px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
    }
    @media (max-width: 900px) {
      .content { padding: 12px 16px; }
    }
    @media (max-width: 480px) {
      .content { grid-template-columns: 1fr; padding: 10px 10px; }
    }
    /* Mobiele volgorde: luchtdruk → neerslag → vocht → wind, rest daarna */
    @media (max-width: 600px) {
      .content > * { order: 10; }
      #tile-press { order: 1; }
      #tile-rain  { order: 2; }
      #tile-hum   { order: 3; }
      #tile-wind  { order: 4; }
    }

    /* ── Cards ──────────────────────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .card-header {
      padding: 10px 14px 0;
      font-size: var(--fs-2xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent2);
    }
    .card-body { padding: 8px 14px 12px; }
    /* Inklapbare secties (24u overzicht, 5-daagse) */
    .collapsible > .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 10px;
      cursor: pointer;
      user-select: none;
    }
    .collapse-chevron {
      flex: 0 0 auto;
      color: var(--dim);
      font-size: var(--fs-md);
      line-height: 1;
      transition: transform .25s ease;
    }
    .collapsible.collapsed > .card-body { display: none; }
    .collapsible.collapsed .collapse-chevron { transform: rotate(-90deg); }
    /* Hint (bv. "klik op een dag") alleen tonen als open; samenvatting alleen als dicht */
    .card-summary {
      display: none;
      font-weight: 400;
      font-size: var(--fs-2xs);
      letter-spacing: 0.04em;
      text-transform: none;
      color: var(--dim);
      margin-left: 8px;
    }
    .collapsible.collapsed .card-summary { display: inline; }
    /* span helpers */
    .card-span2 { grid-column: span 2; }
    .card-span3 { grid-column: span 3; }
    .card-full  { grid-column: 1 / -1; }
    /* Tabletbreedte (o.a. 10,9" iPad): het auto-fit-grid geeft daar 3 kolommen,
       maar vier tegels tellen alleen netjes uit op 2 of 4. Forceer 2 kolommen,
       dan staan de tegels 2+2 en spannen steden/radar (span 2) de volle breedte.
       Op desktop (>1024px) blijft het 4-koloms grid, waar steden en radar juist
       mooi naast elkaar passen. */
    @media (min-width: 600px) and (max-width: 1024px) {
      .content { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 800px) {
      .card-span2 { grid-column: span 2; }
      .card-span3 { grid-column: span 2; }
    }
    @media (max-width: 480px) {
      .card-span2, .card-span3 { grid-column: span 1; }
    }

    /* ── Radar card ─────────────────────────────────────────── */
    .radar-wrap {
      position: relative;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: #0a1520;
      aspect-ratio: 1 / 1;   /* gelijk aan het vierkante Buienradar-beeld → geen randen */
    }
    .radar-map { position: absolute; inset: 0; }
    .radar-map img { position: absolute; display: block; }
    .radar-map img.rv { opacity: 0.9; }
    .radar-head { display: flex; align-items: center; justify-content: space-between; }
    .radar-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,0.05); }
    .rtab {
      font: inherit; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.01em;
      padding: 3px 10px; border: 0; border-radius: 6px; cursor: pointer;
      background: transparent; color: var(--dim); transition: background .15s ease, color .15s ease;
    }
    .rtab:hover { color: var(--muted); }
    .rtab.active { background: var(--accent); color: #04222f; }
    .radar-legend { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-2xs); color: var(--dim); }
    .radar-legend .rl-bar { flex: 1; height: 8px; border-radius: 4px;
      background: linear-gradient(to right, #cfe8ff, #6db3ff, #2a72d6, #12408f, #7b3fb0, #d64545); }
    .radar-expand {
      position: absolute; top: 6px; right: 8px; z-index: 2;
      width: 26px; height: 26px; border-radius: 6px;
      background: rgba(10,21,32,0.6); border: 1px solid rgba(255,255,255,0.15);
      color: #cfe3f2; cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: var(--fs-md); line-height: 1;
    }
    .radar-expand:hover { background: rgba(10,21,32,0.85); }
    .radar-time {
      position: absolute; top: 6px; left: 8px; z-index: 2;
      font-size: var(--fs-2xs); color: #e4f0f8; background: rgba(10,21,32,0.6);
      padding: 2px 7px; border-radius: 5px; display: flex; align-items: center; gap: 4px;
    }
    /* Meelopende radar-tijd, naast de zoomknoppen (linksboven) */
    .radar-clock {
      position: absolute; top: 12px; left: 52px; z-index: 1000;
      font-size: var(--fs-xs); font-weight: 600; color: #eaf3fb; background: rgba(10,21,32,0.72);
      padding: 3px 10px; border-radius: 20px; display: flex; align-items: center; gap: 6px;
      pointer-events: none; white-space: nowrap; letter-spacing: 0.02em;
    }
    /* 2-uurs neerslagverwachting */
    .rain2h { margin-top: 12px; }
    .rain2h-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
    .rain2h-head .rlbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    .rain2h-txt { font-size: var(--fs-xs); font-weight: 600; color: var(--accent2); }
    .rain2h svg { width: 100%; height: 42px; display: block; }
    /* Radar-popup besturing */
    .radar-ctrls { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
    .radar-play {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: rgba(0,180,216,0.12); border: 1px solid rgba(0,180,216,0.3); color: var(--accent2);
      cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
    }
    .radar-ctrls input[type=range] { flex: 1; accent-color: var(--accent); }
    .radar-ctrls .rc-time { font-size: var(--fs-xs); color: var(--muted); min-width: 82px; text-align: right; }

    /* Wereldsteden */
    #cities-card { display: flex; flex-direction: column; }
    #cities-card .card-body { flex: 1; display: flex; flex-direction: column; }
    #cities-list { flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .city-row {
      display: flex; align-items: center; gap: 12px; width: 100%; flex: 1;
      padding: 10px 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
      border-radius: 10px; color: var(--text); text-align: left; cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .city-row:hover { background: rgba(255,255,255,0.05); border-color: var(--accent); }
    .city-flag {
      width: 30px; height: 22px; border-radius: 3px; flex-shrink: 0; object-fit: cover;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.1); display: block;
    }
    .records-modal-header .city-flag { width: 26px; height: 19px; }
    .city-name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; display: flex; flex-direction: column; gap: 1px; }
    .city-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .city-country { font-size: var(--fs-2xs); color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .city-time { font-variant-numeric: tabular-nums; }
    /* Vaste kolombreedtes voor het rechterblok, zodat de weer-icoontjes (en
       daarmee ook wind + temp) recht onder elkaar uitlijnen — anders schuift
       het icoon mee met de wisselende breedte van de windrichting (W/WNW/WZW). */
    .city-wx { font-size: var(--fs-d1); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; }
    .city-wind { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; width: 52px; }
    .cw-arrow { font-size: var(--fs-md); width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; color: var(--accent2); transform-box: view-box; transform-origin: 50% 50%; }
    .city-temp { font-size: var(--fs-xl); font-weight: 800; color: #fff; min-width: 2.4em; text-align: right; }
    .city-tail { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 44px; flex-shrink: 0; }
    .city-go { color: var(--dim); font-size: var(--fs-lg); }
    /* Vastzetten vanuit de daglijst — zelfde plek als het kruisje bij een
       vastgezette stad, zodat de staart van elke rij één betekenis houdt. */
    /* Let op: .city-pin bestond al — dat is de rode kaartmarkering in de
       stadspopup. Deze knop heet daarom city-pin-btn. */
    .city-pin-btn {
      color: var(--dim); line-height: 0; padding: 3px 4px; cursor: pointer;
      border-radius: 4px; display: inline-flex; align-items: center;
    }
    .city-pin-btn:hover { color: var(--accent); background: rgba(0,180,216,0.12); }
    .city-pin-btn.full  { opacity: 0.35; cursor: default; }
    .city-pin-btn.full:hover { color: var(--dim); background: none; }
    .city-remove {
      color: var(--dim); font-size: var(--fs-xl); line-height: 1; padding: 0 4px; cursor: pointer;
      border-radius: 4px;
    }
    .city-remove:hover { color: var(--red); background: rgba(248,113,113,0.12); }
    .city-pinned-dot { color: var(--accent2); font-size: 0.7em; margin-left: 4px; }
    .city-divider { height: 1px; background: var(--border); margin: 4px 8px; flex: 0 0 auto; }
    .city-section {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--dim);
      font-weight: 500;
      margin: 10px 8px 3px;
      flex: 0 0 auto;
    }
    .city-section:first-child { margin-top: 2px; }
    /* Zoekveld */
    .city-search { position: relative; margin-top: 8px; }
    #city-search-input {
      width: 100%; box-sizing: border-box; padding: 8px 12px;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px;
      color: var(--text); font-size: 16px; font-family: inherit;
    }
    #city-search-input:focus { outline: none; border-color: var(--accent); }
    #city-search-input::placeholder { color: var(--dim); }
    .city-search-results {
      position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30;
      background: #13293f; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.45); display: none;
    }
    .city-search-results.open { display: block; }
    .city-sug {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
      border-bottom: 1px solid var(--border); font-size: var(--fs-sm);
    }
    .city-sug:last-child { border-bottom: none; }
    .city-sug:hover { background: rgba(255,255,255,0.05); }
    .city-sug img { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
    .city-sug .cs-sub { color: var(--muted); font-size: var(--fs-xs); }
    /* Steden op smalle schermen: de naam is het belangrijkst en moet leesbaar
       blijven. De wind (pijl + richting) verhuist naar de stadspopup — die
       toont 'm toch al, inclusief km/u — zodat de naam de ruimte krijgt.
       Deze regels staan bewust ná de basis-stadstijlen: anders wint bij
       gelijke specificiteit de basisregel (source order) en gebeurt er niets. */
    @media (max-width: 480px) {
      .city-row { gap: 8px; }
      .city-wind { display: none; }
    }
    .city-pin { position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
      width: 14px; height: 14px; transform: translate(-50%, -100%); }
    .city-pin::before {
      content: ''; position: absolute; left: 50%; top: 0; width: 14px; height: 14px;
      background: #ef4444; border: 2px solid #fff; border-radius: 50% 50% 50% 0;
      transform: translateX(-50%) rotate(-45deg); box-shadow: 0 2px 5px rgba(0,0,0,0.45);
    }
    .radar-stamp {
      position: absolute;
      bottom: 6px; right: 8px;
      font-size: var(--fs-2xs);
      color: rgba(255,255,255,0.45);
      z-index: 1;
    }

    /* ── Wind card ──────────────────────────────────────────── */
    .wind-layout {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .wind-top-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .wind-bft-block { flex: 1; }
    .compass-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
    .compass-caption { font-size: var(--fs-2xs); color: var(--muted); text-align: center; line-height: 1.15; max-width: 78px; }
    .compass-caption b { color: var(--accent2); font-weight: 700; }
    .compass-wrap {
      width: 80px; height: 80px;
      flex-shrink: 0;
    }
    .compass-wrap svg { width: 100%; height: 100%; }
    #compass-needle { transform-box: view-box; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.4,0,.2,1), opacity .6s ease; }
    /* Live gemeten richting = felle cyaan naald; geschatte/laatst bekende
       richting (windstilte) = grijs en vager, zodat je in één oogopslag ziet
       of het de actuele wind is. */
    #compass-needle .needle-tip { transition: fill .6s ease; }

    .wind-bft-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 2px;
    }
    .bft-number {
      font-size: var(--fs-d2);
      font-weight: 800;
      line-height: 1;
      color: #fff;
    }
    .bft-label { font-size: var(--fs-xs); color: var(--muted); }
    .bft-desc  { font-size: var(--fs-sm); font-weight: 500; color: var(--accent); margin-bottom: 0; }
    /* Windrichting voluit, vlak onder de omschrijving — hier is volle breedte,
       dus ook "Noord-Noord-West" past op één regel. */
    .bft-dir   { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-top: 2px; }
    .wind-bars {
      display: flex;
      gap: 3px;
      align-items: flex-end;
      height: 24px;
      width: 100%;
      margin: 2px 0 6px;
    }
    .wind-bar {
      flex: 1;
      border-radius: 2px 2px 0 0;
      background: var(--surface3);
      transition: background 0.4s;
    }
    .wind-bar.active { background: var(--accent); }
    .wind-detail-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 6px;
    }
    .wd-stat { text-align: center; min-width: 0; }
    .wd-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); margin-bottom: 3px; white-space: nowrap; font-weight: 500;}
    .wd-val { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; }

    /* ── Pressure card ──────────────────────────────────────── */
    .pressure-main {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 8px;
    }
    .pressure-val { font-size: var(--fs-d2); font-weight: 700; line-height: 1; color: #fff; }
    .pressure-unit { font-size: var(--fs-sm); color: var(--muted); }
    .pressure-trend-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .trend-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 20px;
      font-size: var(--fs-xs);
      font-weight: 600;
      background: var(--surface2);
      white-space: nowrap;
    }
    .trend-badge .trend-span { font-weight: 500; opacity: 0.6; }
    .trend-badge.up   { color: var(--warm); border: 1px solid #7c3b0040; }
    .trend-badge.down { color: var(--cold); border: 1px solid #1e3a7040; }
    .trend-badge.flat { color: var(--muted); border: 1px solid var(--border); }

    /* Pressure gauge arc */
    .gauge-wrap { margin-top: 12px; }
    #gauge-arc { transition: stroke-dashoffset 1s ease; }

    /* ── Rain card ──────────────────────────────────────────── */
    .rain-main {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 2px;
    }
    .rain-val  { font-size: var(--fs-d2); font-weight: 700; line-height: 1; color: #fff; }
    .rain-unit { font-size: var(--fs-sm); color: var(--muted); }
    .rain-row  {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      color: var(--muted);
      margin-top: 8px;
      gap: 8px;
    }
    .rain-row-item { display: flex; flex-direction: column; gap: 2px; }
    .rain-row-item .rlbl {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .rain-row-item .rval { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
    .rain-bar-outer {
      height: 4px;
      background: var(--surface3);
      border-radius: 2px;
      margin-top: 8px;
      overflow: hidden;
    }
    .rain-bar-inner {
      height: 100%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 2px;
      transition: width 0.8s ease;
    }

    /* ── Regenmeter (maatglas) + intensiteitsmeter ──────────────── */
    .rain-gauge-row { display: flex; align-items: flex-start; gap: 16px; }
    .rain-next { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; line-height: 1.4; }
    .rain-next b { color: var(--text); font-weight: 600; }
    .rain-next svg { vertical-align: -0.15em; }
    .rain-last { font-size: var(--fs-xs); color: var(--dim); margin-top: 4px; line-height: 1.4; }
    .rain-last b { color: var(--muted); font-weight: 600; }
    .rain-tube { flex-shrink: 0; }
    #rain-water, #rain-water-top { transition: y 0.8s ease, height 0.8s ease; }
    .rain-gauge-num { display: flex; flex-direction: column; }
    .rain-int { margin-top: 14px; }
    .rain-int-head {
      display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
    }
    .rain-int-head .rlbl {
      font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
    }
    .rain-int-val { font-size: var(--fs-xs); color: var(--muted); }
    .rain-int-val b { color: var(--text); font-size: var(--fs-lg); font-weight: 700; }
    .rain-int-track {
      position: relative; height: 8px; border-radius: 4px;
      background: var(--surface3);
    }
    .rain-int-marker {
      position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px;
      background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.55);
      transform: translateX(-50%); transition: left 0.6s ease;
    }
    /* IJkpunten op de balk: de grenzen licht|matig (2.5) en matig|zwaar (7.6),
       op hun sqrt-positie zodat de marker af te lezen valt tegen de zones. */
    .rain-int-tick {
      position: absolute; top: 0; width: 1px; height: 8px;
      background: rgba(255,255,255,0.20);
    }
    .rain-int-scale {
      display: flex; justify-content: space-between; align-items: baseline;
    }
    .rain-int-zone { font-size: var(--fs-sm); font-weight: 600; color: var(--accent2); }
    .rain-int-max { font-size: var(--fs-2xs); color: var(--dim); }
    @media (max-width: 480px) { .rain-gauge-row { justify-content: center; } }

    /* ── Luchtvochtigheid: vullende druppel ─────────────────────── */
    .hum-drop-row { display: flex; align-items: flex-start; gap: 18px; }
    .hum-drop { flex-shrink: 0; }
    #hum-water, #hum-water-top { transition: y 0.8s ease, height 0.8s ease; }
    .hum-drop-info { display: flex; flex-direction: column; gap: 3px; }
    .hum-drop-val { display: flex; align-items: baseline; gap: 4px; }
    .hum-drop-val #h-val { font-size: var(--fs-d2); font-weight: 800; color: #fff; line-height: 1; }
    .hum-drop-pct { font-size: var(--fs-md); color: var(--muted); }
    .hum-drop-desc { font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }
    .hum-trend { font-size: var(--fs-xs); font-weight: 600; margin-top: 2px; min-height: 1em; }
    .hum-dew { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
    .hum-dew b { color: var(--text); }
    .hum-mist { font-size: var(--fs-xs); color: var(--accent2); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .hum-cloud { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
    .hum-cloud b { color: var(--text); font-weight: 600; }
    @media (max-width: 480px) { .hum-drop-row { justify-content: center; } }

    /* Behaaglijkheid-strip */
    .hum-comfort { padding-top: 18px; }
    .hum-comfort-head {
      display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px;
    }
    .hum-comfort-head .rlbl {
      font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
    }
    .hum-comfort-zone { font-size: var(--fs-sm); font-weight: 600; color: var(--accent2); }
    .hum-comfort-track {
      position: relative; height: 8px; border-radius: 4px;
      background: var(--surface3);
    }
    .hum-comfort-marker {
      position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px;
      background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.55);
      transform: translateX(-50%); transition: left 0.6s ease;
    }
    .hum-comfort-scale {
      display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--dim); margin-top: 5px;
    }

    /* ── Barometer-wijzer (druk-tile) ────────────────────────── */
    .press-top-row { display: flex; align-items: flex-start; gap: 14px; }
    .baro-dial-wrap { width: 100px; height: 100px; flex-shrink: 0; margin-top: -14px; }
    .baro-dial-wrap svg { width: 100%; height: 100%; display: block; }
    /* transform-box: view-box → 50% 50% = het echte viewBox-midden (50,50), niet
       het bounding-box-midden van de asymmetrische naald (punt boven, contragewicht
       onder). Zonder dit draait de naald in Safari om een te hoog punt en staat scheef. */
    #baro-needle { transform-box: view-box; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.4,0,.2,1); }
    .press-info { flex: 1; min-width: 0; }
    #tile-press .pressure-forecast { justify-content: center; margin-top: 4px; }

    /* Onder-de-balk-regels op gelijke hoogte, zodat de balken exact uitlijnen */
    .rain-int-scale, .hum-comfort-scale {
      margin-top: 6px; line-height: 15px; min-height: 15px;
    }

    /* ── Luchtkwaliteit (AirLink / EAQI) ─────────────────────── */
    .modal-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin: 16px 0 0; }
    /* Station-info: klikbare chip/footer + spec-rijen */
    .footer-station { cursor: pointer; transition: color .2s ease; }
    .footer-station:hover { color: var(--text); }
    .station-spec { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .station-spec:last-child { border-bottom: none; padding-bottom: 2px; }
    .station-spec-img {
      width: 66px; height: 66px; flex: 0 0 auto; border-radius: 12px;
      background: var(--surface3); display: flex; align-items: center; justify-content: center;
    }
    .station-spec-img svg { width: 54px; height: 54px; }
    .station-spec-txt { min-width: 0; }
    .station-spec-txt b { display: block; color: var(--text); font-size: var(--fs-md); margin-bottom: 3px; }
    .station-spec-txt span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
    .station-spec-txt .station-meta { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--dim); }
    .station-spec-txt .station-meta b { color: var(--accent2); font-weight: 600; }
    .station-status { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
    .station-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
    /* Inklapbare uitleg met "i" (bv. in de bliksem-popup) */
    .modal-info { margin-top: 16px; }
    .modal-info > summary {
      cursor: pointer; list-style: none; user-select: none;
      display: inline-flex; align-items: center; gap: 7px;
      font-size: var(--fs-xs); color: var(--accent2);
    }
    .modal-info > summary::-webkit-details-marker { display: none; }
    .modal-info .info-i {
      display: inline-flex; align-items: center; justify-content: center;
      width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
      font-size: 10px; font-weight: 700; font-style: italic;
      background: rgba(0,180,216,0.15); color: var(--accent2);
    }
    .modal-info ul { margin: 10px 0 0; padding-left: 4px; list-style: none; }
    .modal-info li { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
    .modal-info li b { color: var(--text); font-weight: 600; }
    /* Wind-ijking (10m-referentie) */
    /* IJking staat onderaan de wind-popup en is ingeklapt: het is
       eigenaar-diagnostiek, geen inhoud waar de popup mee moet openen. */
    .ijking-details {
      margin-top: 22px; padding-top: 14px;
      border-top: 1px solid rgba(148,163,184,0.18);
    }
    .ijking-details > summary {
      cursor: pointer; list-style: none;
      font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.09em;
      text-transform: uppercase; color: var(--dim);
      display: flex; align-items: center; gap: 7px;
    }
    .ijking-details > summary::-webkit-details-marker { display: none; }
    .ijking-details > summary::before {
      content: '▸'; font-size: var(--fs-sm); letter-spacing: 0;
      transition: transform 0.18s ease;
    }
    .ijking-details[open] > summary::before { transform: rotate(90deg); }
    .ijking-details > summary:hover { color: var(--accent); }
    /* Bladeren door de maandelijkse windroos */
    .rose-nav {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      margin-top: 8px;
    }
    .rose-nav b {
      min-width: 88px; text-align: center; color: var(--text);
      font-weight: 600; font-size: var(--fs-sm); text-transform: capitalize;
    }
    .rose-arrow {
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(255,255,255,0.05); border: 1px solid var(--border);
      color: var(--muted); font-size: var(--fs-md); line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .15s, color .15s;
    }
    .rose-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
    .rose-arrow:disabled { opacity: 0.3; cursor: default; }
    /* Herbruikbare tooltip */
    [data-tip] { cursor: help; }
    #tip {
      position: fixed; z-index: 200; max-width: 220px;
      background: #17334a; color: var(--text);
      border: 1px solid var(--border); border-radius: 7px;
      padding: 6px 10px; font-size: var(--fs-xs); line-height: 1.4;
      box-shadow: 0 6px 20px rgba(0,0,0,0.5);
      opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
    }
    #tip.show { opacity: 1; }
    .wind-cal { margin-top: 8px; }
    .wind-cal-row {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: var(--fs-sm); color: var(--muted); padding: 5px 0;
      border-bottom: 1px solid var(--border);
    }
    .wind-cal-row b { color: var(--text); font-weight: 600; }
    .wind-cal-badge {
      font-size: var(--fs-xs); font-weight: 600; padding: 2px 9px; border-radius: 999px;
      background: rgba(148,163,184,0.15); color: var(--muted); white-space: nowrap;
    }
    .wind-cal-badge.ok    { background: rgba(52,211,153,0.16); color: #6ee7b7; }
    .wind-cal-badge.prelim{ background: rgba(251,191,36,0.16); color: #fcd34d; }
    .wind-cal-badge.weak  { background: rgba(248,113,113,0.16); color: #fca5a5; }
    .wind-cal-note { font-size: var(--fs-xs); color: var(--dim); line-height: 1.5; margin-top: 9px; }
    /* Maanstand-modal */
    .moon-row { display: flex; align-items: center; gap: 20px; }
    .moon-big { font-size: 92px; line-height: 1; flex-shrink: 0; }
    .moon-name { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
    .moon-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
    .moon-sub b { color: var(--text); font-weight: 600; }
    .moon-rise-row { display: flex; gap: 10px; margin-top: 14px; }
    .moon-rise-item { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); color: var(--muted); }
    .moon-rise-item b { color: var(--text); font-weight: 600; margin-left: 3px; }
    .mr-ic { font-weight: 700; margin-right: 4px; }
    .mr-up { color: #7dd3fc; }
    .mr-dn { color: #94a3b8; }
    .city-rain { margin-top: 12px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; min-height: 20px; }
    .city-rain svg { flex-shrink: 0; }
    /* Wereldinzet rechtsonder op de stadskaart */
    .city-inset {
      position: absolute; right: 8px; bottom: 8px; z-index: 3;
      width: 132px; height: 132px;
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 6px; overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      background: #dce9f0;
    }
    .city-inset img { width: 100%; height: 100%; display: block; }
    .city-inset-dot {
      position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
      border-radius: 50%; background: #ef4444; border: 1.5px solid #fff;
      box-shadow: 0 0 3px rgba(0,0,0,0.5);
    }
    @media (max-width: 480px) { .city-inset { width: 96px; height: 96px; } }
    .city-dist { margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; }
    .city-dist svg { flex-shrink: 0; }
    .city-dist b { color: var(--text); font-weight: 600; }
    .city-pop { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .city-pop svg { flex-shrink: 0; }
    .city-pop b { color: var(--text); font-weight: 600; }
    /* Het peiljaar ontbreekt in de bron; dat hoort op het scherm te staan
       en niet alleen in de code. */
    .city-pop-note { color: var(--dim); font-size: var(--fs-xs); }
    .city-rain.wet { color: var(--text); }
    .city-rain .cr-em { color: var(--text); font-weight: 600; }
    .moon-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
    .moon-phase-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 5px; text-align: center; }
    .moon-phase-item.soon { border-color: var(--accent); }
    .mp-ic { font-size: 25px; line-height: 1; display: block; margin-bottom: 5px; }
    .mp-lbl { font-size: var(--fs-2xs); color: var(--dim); line-height: 1.2; }
    .mp-date { font-size: var(--fs-xs); color: var(--text); font-weight: 600; margin-top: 3px; }
    .aqi-row { display: flex; align-items: center; gap: 16px; }
    .aqi-dot {
      flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
      background: var(--surface3); box-shadow: 0 0 0 4px rgba(255,255,255,0.04);
      transition: background .5s ease;
    }
    .aqi-info { min-width: 0; }
    .aqi-cat { font-size: var(--fs-d1); font-weight: 800; line-height: 1.05; color: var(--text); }
    .aqi-sub { font-size: var(--fs-xs); color: var(--muted); margin: 2px 0 6px; }
    .aqi-pm { font-size: var(--fs-xs); color: var(--dim); }
    .aqi-pm b { color: var(--text); font-weight: 600; }
    .aqi-pm .sep { margin: 0 6px; opacity: 0.5; }
    .aqi-meter { padding-top: 18px; }
    .aqi-meter-track {
      position: relative; height: 8px; border-radius: 4px;
      background: var(--surface3);
    }
    .aqi-meter-fill {
      position: absolute; left: 0; top: 0; height: 8px; width: 0; border-radius: 4px;
      background: var(--accent2); transition: width .6s ease, background .5s ease;
    }
    .aqi-meter-marker {
      position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px;
      background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.65);
      transform: translateX(-50%); transition: left 0.6s ease, background .5s ease;
    }
    .aqi-meter-scale {
      display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--dim);
      margin-top: 5px; line-height: 15px; min-height: 15px;
    }

    /* ── Zonkracht / UV-index (Open-Meteo) ───────────────────── */
    .uv-row { display: flex; align-items: center; gap: 16px; }
    .uv-dial {
      flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%;
      border: 3px solid var(--surface3); background: var(--surface3);
      display: flex; align-items: center; justify-content: center;
      transition: border-color .5s ease;
    }
    .uv-dial-val { font-size: var(--fs-d1); font-weight: 800; line-height: 1; color: var(--text); }
    .uv-info { min-width: 0; }
    .uv-cat { font-size: var(--fs-xl); font-weight: 800; line-height: 1.05; color: var(--text); }
    .uv-sub { font-size: var(--fs-xs); color: var(--muted); margin: 2px 0 6px; }
    .uv-max { font-size: var(--fs-xs); color: var(--dim); }
    .uv-max b { color: var(--text); font-weight: 600; }
    .uv-advice { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }
    .uv-meter { padding-top: 14px; }
    .uv-meter-track {
      position: relative; height: 8px; border-radius: 4px;
      background: var(--surface3);
    }
    .uv-meter-fill {
      position: absolute; left: 0; top: 0; height: 8px; width: 0; border-radius: 4px;
      background: var(--accent2); transition: width .6s ease, background .5s ease;
    }
    .uv-meter-marker {
      position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px;
      background: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.65);
      transform: translateX(-50%); transition: left 0.6s ease, background .5s ease;
    }
    .uv-meter-scale {
      display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--dim);
      margin-top: 5px; line-height: 15px; min-height: 15px;
    }

    /* Desktop: het onderste element van druk/regen/vocht wordt naar de onderkant
       van de tegel geduwd (barometer-vooruitblik, intensiteits- en behaaglijk-
       heidsbalk), zodat de tegels de hoogte vullen i.p.v. bovenin te klitten. */
    @media (min-width: 601px) {
      #tile-press, #tile-rain, #tile-hum { display: flex; flex-direction: column; }
      #tile-press .card-body, #tile-rain .card-body, #tile-hum .card-body {
        flex: 1; display: flex; flex-direction: column;
      }
      /* Druk heeft korte inhoud; verdeel de ruimte gelijkmatig i.p.v. alles
         onderin (dat gaf een groot gat in het midden bij een hoge tegel). */
      #tile-press .card-body { justify-content: space-evenly; }
      #tile-press .pressure-forecast { justify-content: flex-start; }
      #tile-rain .rain-int, #tile-hum .hum-comfort { margin-top: auto; }
    }

    /* ── Forecast card ──────────────────────────────────────── */
    .forecast-row { margin-top: 10px; }
    /* ── 7-daagse als lijngrafiek ──────────────────────────────── */
    .fc-chart { position: relative; max-width: 1160px; margin: 0 auto; }
    .fc-days, .fc-winds { display: grid; grid-template-columns: repeat(7, 1fr); }
    .fc-day-h { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 2px; }
    .fc-dn { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
    .fc-dt { font-size: var(--fs-2xs); font-weight: 400; color: var(--dim); line-height: 1; }
    .fc-day-h.today .fc-dn { color: var(--accent); }
    .fc-ic { font-size: 1.85rem; line-height: 1; }
    .fc-ic svg { width: 1em; height: 1em; vertical-align: -0.15em; }
    .fc-svg { width: 100%; height: auto; display: block; }
    .fc-svg .fc-hi-t { font-size: 12px; font-weight: 700; fill: #fff; }
    .fc-svg .fc-lo-t { font-size: 12px; fill: #8fb4d0; }
    .fc-svg .fc-prec-t { font-size: 10px; fill: #7fb0e0; }
    .fc-winds { margin-top: 4px; }
    .fc-wnd-h { text-align: center; font-size: var(--fs-sm); color: var(--muted); }
    .fc-wnd-h svg { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 2px; }
    .fc-hit { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
    .fc-hit > button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; transition: background .15s; }
    @media (hover: hover) { .fc-hit > button:hover { background: rgba(255,255,255,0.05); } }
    .fc {
      background: var(--surface2);
      border-radius: var(--radius-sm);
      padding: 10px 10px 8px;
      transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
      cursor: pointer;
      position: relative;
    }
    /* Zelfde hover-taal als de klikbare tiles: accentrand + lichte lift */
    @media (hover: hover) {
      .fc:hover {
        background: var(--surface3);
        box-shadow: 0 0 0 1px var(--accent);
        transform: translateY(-2px);
      }
    }
    .fc.today { background: var(--surface3); border: 1px solid var(--border); }
    .fc-rain.dry { opacity: 0.45; }
    /* top row: day name + icon side by side */
    .fc .fc-top  {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .fc .fc-day  { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .fc .fc-icon { font-size: var(--fs-d1); line-height: 1; }
    /* temps on one line */
    .fc .fc-temps { font-size: var(--fs-md); margin-bottom: 6px; }
    .fc .fc-hi   { font-weight: 700; color: var(--warm); }
    .fc .fc-sep  { color: var(--dim); margin: 0 3px; font-size: var(--fs-xs); }
    .fc .fc-lo   { color: var(--cold); }
    /* rain + wind stacked compactly */
    .fc .fc-meta { display: flex; flex-direction: column; gap: 2px; }
    .fc .fc-rain { font-size: var(--fs-2xs); color: #7cb3e8; }
    .fc .fc-wnd  { font-size: var(--fs-2xs); color: var(--muted); }

    /* ── Lightning banner ───────────────────────────────────── */

    /* ── Hero sun row ───────────────────────────────────────── */
    .hero-chips {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0;
    }
    .hero-chip {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(0,180,216,0.08); border: 1px solid rgba(0,180,216,0.30);
      border-radius: 20px; padding: 4px 11px; cursor: pointer;
      font-size: var(--fs-xs); color: var(--muted);
      transition: border-color .2s ease, background .2s ease;
    }
    .hero-chip b { color: var(--text); font-weight: 500; }
    .hero-chip:hover { background: rgba(0,180,216,0.16); border-color: rgba(0,180,216,0.55); }
    .hero-chip-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--surface3); flex: 0 0 auto;
    }
    .hero-chip-go { color: var(--accent); font-size: var(--fs-sm); }

    /* Zonbalk (overdag) + nacht-regeltje */
    .hero-sunbar { margin-top: 0; max-width: 560px; }
    .sunbar-labels {
      display: flex; justify-content: space-between; align-items: baseline;
      font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px;
    }
    .sunbar-labels .sb-end { display: inline-flex; align-items: center; gap: 6px; }
    /* Zon op/onder-icoontjes groter dan de tijd-tekst, zodat meteen duidelijk is
       wat ze betekenen (erfden anders de kleine label-grootte ≈12px). */
    .sunbar-labels .sb-end [data-ico] svg { width: 1.65em; height: 1.65em; }
    .sunbar-labels b { color: var(--text); font-weight: 500; }
    .sunbar-labels .sb-len { font-size: var(--fs-2xs); color: var(--dim); }
    /* Nacht: tijden bóven een lijntje — zelfde opbouw als de dag-balk
       (labels boven, streep eronder) i.p.v. tijden inline naast de lijn. */
    .hero-nightline {
      display: flex; flex-direction: column; gap: 6px;
      font-size: var(--fs-xs); color: var(--muted);
    }
    .hero-nightline .nl-labels { display: flex; justify-content: space-between; align-items: center; }
    .hero-nightline .nl-part { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    /* Zon op/onder-icoontjes ook 's nachts groter, gelijk aan de dag-balk. */
    .hero-nightline .nl-part [data-ico] svg { width: 1.65em; height: 1.65em; }
    /* Nacht-voortgang: zelfde balk als overdag, maar in koele nacht-kleuren. */
    .hero-nightbar-track { position: relative; height: 4px; background: var(--surface3); border-radius: 2px; }
    .hero-nightbar-fill { height: 100%; background: linear-gradient(90deg, #24406b, #8aa9dd); border-radius: 2px; transition: width 1s ease; }
    .hero-nightbar-dot { position: absolute; top: -4px; width: 12px; height: 12px; background: #dbe4f0; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 8px rgba(219,228,240,0.4); transition: left 1s ease; }
    .hero-nightline b { color: var(--text); font-weight: 500; }

    /* ── Dagvoortgang balk ──────────────────────────────────── */
    .hero-daybar {
      margin-top: 16px;
      max-width: 560px;
    }
    .hero-daybar-track {
      height: 4px;
      background: var(--surface3);
      border-radius: 2px;
      position: relative;
    }
    .hero-daybar-fill {
      height: 100%;
      background: linear-gradient(90deg, #f59e0b55, #fde68a);
      border-radius: 2px;
      transition: width 1s ease;
    }
    .hero-daybar-dot {
      position: absolute;
      top: -4px;
      width: 12px; height: 12px;
      background: #fbbf24;
      border-radius: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 8px #fbbf2460;
      transition: left 1s ease;
    }
    /* ── Records knop ───────────────────────────────────────── */
    /* Zelfde geometrie als de Live-chip ernaast: gelijke padding, radius en
       regelhoogte, zodat ze even hoog zijn. De emoji is vervangen door het
       SVG-staafje dat ook in de modaltitel en op de tegels staat — een
       kleuremoji was het enige gekleurde glyph in de hele chrome, en hij
       maakte de knop zo breed dat hij op mobiel over twee regels brak. */
    .records-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      background: rgba(0,180,216,0.12);
      border: 1px solid rgba(0,180,216,0.3);
      /* Wit, niet cyaan: in de rest van de interface betekent cyaan
         "hier zit interactie" (het pijltje, het info-teken) en wit "dit is
         de waarde die je leest". De tint en de rand markeren deze knop al
         genoeg; cyaan lettertekst maakte er een derde signaal van met een
         afwijkende betekenis. */
      color: var(--text);
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 1;
      padding: 4px 11px;
      border-radius: 20px;
      cursor: pointer;
      letter-spacing: 0.03em;
      transition: background 0.15s;
    }
    .records-btn .rb-ico { display: inline-flex; width: 14px; height: 14px; }
    .records-btn .rb-ico svg { width: 100%; height: 100%; display: block; }
    .records-btn:hover { background: rgba(0,180,216,0.22); }

    /* ── Modals (records / uur / neerslag) ───────────────────── */
    .records-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5,12,22,0.82);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .records-modal-overlay.open { display: flex; animation: modalFade .25s ease; }
    @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
    .records-modal-card {
      background: linear-gradient(180deg, #13293f 0%, #0d1d2f 100%);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 0;
      width: min(480px, 94vw);
      max-height: 88vh;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,0.62);
      animation: modalPop .28s cubic-bezier(.2,.8,.25,1);
    }
    @keyframes modalPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
    .records-modal-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 18px;
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      background: rgba(0,180,216,0.06);
    }
    .records-modal-header .rm-title { display: flex; align-items: center; gap: 9px; flex: 1; }
    .records-modal-header .rm-ico { color: var(--accent); font-size: var(--fs-lg); display: inline-flex; }
    .records-modal-body { padding: 18px; overflow-y: auto; max-height: calc(88vh - 60px); }
    .records-modal-close {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      color: var(--muted);
      width: 30px; height: 30px;
      border-radius: 50%;
      font-size: var(--fs-md);
      cursor: pointer;
      line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
      flex-shrink: 0;
    }
    .records-modal-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }
    /* Temperatuur-records als genestelde bereikbalken */
    /* position + padding maken ruimte voor de doorlopende vriespuntlijn
       en het 0°-label dat er bovenop staat. */
    .rec-temp-ranges { position: relative; padding-top: 18px; }
    /* PADDING, geen margin: .tr-track heeft al margin-bottom 22px en is het
       laatste kind, dus een margin op .tr-row klapt daarmee samen tot het
       maximum en verandert niets. Padding klapt niet samen. */
    .tr-row { margin-bottom: 0; padding-bottom: 16px; }
    /* Datum achter de waarde: één laag minder, dus de balk mag dichter op de
       volgende rij staan zonder dat het druk wordt. */
    .tr-samen .tr-track { margin: 22px 0 8px; }
    /* Past het label niet naast de waarde bínnen de balk, dan klapt het naar
       buiten. Bij een smalle balk is daar juist ruimte in overvloed. */
    .tr-track.tr-buiten .tr-v.tr-min { transform: translateX(-100%); padding-right: 7px; }
    .tr-track.tr-buiten .tr-v.tr-max { transform: translateX(100%);  padding-left: 7px; }
    .tr-vd {
      color: var(--dim); font-weight: 400; font-size: var(--fs-xs);
    }
    .tr-v.tr-min .tr-vd { margin-left: 5px; }
    .tr-v.tr-max .tr-vd { margin-right: 5px; }
    .tr-lbl { font-size: var(--fs-xs); color: var(--muted); }
    .tr-track { position: relative; height: 12px; border-radius: 6px; background: var(--surface2); margin: 22px 0 22px; }
    .tr-seg { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(to right, #5b93d6, #7fb0e0, #e8913c); }
    .tr-v { position: absolute; top: -19px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
    .tr-v.tr-max { text-align: right; }
    .tr-v em { display: none; }
    .tr-d { position: absolute; top: 16px; font-size: var(--fs-2xs); color: var(--dim); white-space: nowrap; }
    .tr-d.tr-max { text-align: right; }
    /* Vriespunt: één lijn van boven het eerste label tot aan de as. */
    .tr-zero {
      position: absolute; top: 17px; bottom: 18px; width: 0; z-index: 3;
      border-left: 2px dashed rgba(226,240,248,0.5);
      pointer-events: none;
    }
    .tr-zero-lbl {
      position: absolute; top: -15px; left: 1px; transform: translateX(-50%);
      font-size: var(--fs-2xs); font-weight: 600; color: rgba(226,240,248,0.6);
      white-space: nowrap;
    }
    /* Waarden en datums boven de lijn houden. De halo in de kaartkleur wist
       de stippellijn precies om de tekens heen — bij de rijen die onder nul
       komen begint het minimumlabel links van de lijn en liep die er anders
       dwars doorheen. Een rechthoekige achtergrond zou hier lomp zijn. */
    .tr-v, .tr-d {
      z-index: 4;
      text-shadow: 0 0 4px #13293f, 0 0 4px #13293f, 0 0 3px #13293f;
    }
    .tr-axis { position: relative; height: 14px; margin-top: 4px; }
    .tr-axis span { position: absolute; transform: translateX(-50%); font-size: var(--fs-2xs); color: var(--dim); }
    .tr-empty { font-size: var(--fs-sm); color: var(--dim); padding: 6px 0 10px; }

    /* Knopje op een tile om een detail-popup te openen */
    .tile-btn {
      background: rgba(0,180,216,0.12);
      border: 1px solid rgba(0,180,216,0.28);
      color: var(--accent2);
      border-radius: 8px;
      padding: 3px 7px;
      font-size: var(--fs-md);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      line-height: 1;
      transition: background .15s;
    }
    .tile-btn:hover { background: rgba(0,180,216,0.24); }
    .card-header.with-btn { display: flex; align-items: center; justify-content: space-between; }

    /* Wind-stats in de windhistorie-popup */
    .wind-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px 12px;
    }
    /* Vier kaartjes → netjes 2×2 (rij "vandaag", rij "ooit") i.p.v. 3+1 */
    .wind-stats.cols-2 { grid-template-columns: repeat(2, 1fr); }
    @media (max-width: 420px) { .wind-stats.cols-2 { grid-template-columns: 1fr; } }
    /* Vijf kaartjes → 2 boven ("vandaag/gisteren") + 3 onder (records), volle rijen */
    .wind-stats.cols-2-3 { grid-template-columns: repeat(6, 1fr); }
    .wind-stats.cols-2-3 > :nth-child(-n+2) { grid-column: span 3; }
    .wind-stats.cols-2-3 > :nth-child(n+3)  { grid-column: span 2; }
    @media (max-width: 520px) {
      .wind-stats.cols-2-3 { grid-template-columns: repeat(2, 1fr); }
      .wind-stats.cols-2-3 > * { grid-column: auto; }
    }
    .wind-stat {
      padding: 10px 14px 12px;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      border-left: 2px solid var(--accent);
    }
    .wind-stat .ws-lbl {
      font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--dim); font-weight: 600; margin-bottom: 3px;
    }
    .wind-stat .ws-lbl b { color: var(--accent2); font-weight: 700; }
    .wind-stat .ws-val { font-size: var(--fs-d1); font-weight: 800; color: #fff; line-height: 1.1; }
    .wind-stat .ws-val span { font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); }
    /* Beaufort op een eigen regel: naast "26.6 km/u" erbij zou de tegel te
       breed worden en op mobiel afbreken. */
    .wind-stat .ws-val .ws-bft {
      display: block; margin-top: 1px;
      font-size: var(--fs-2xs); font-weight: 600; color: var(--accent2);
    }

    /* Barometerverwachting op de luchtdruk-tile */
    .pressure-forecast {
      display: flex; align-items: center; gap: 7px;
      margin-top: 0;
      font-size: var(--fs-sm); color: var(--text);
    }
    .pressure-forecast .pf-ico { font-size: var(--fs-lg); display: inline-flex; flex-shrink: 0; }
    /* Duiding dat dit een barometer-vooruitblik is, niet de huidige lucht:
       klein kopje boven de tekst i.p.v. alles op één (wrappende) regel. */
    .pressure-forecast .pf-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .pressure-forecast .pf-lead { color: var(--muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
    /* Verwachting-banner in de druk-popup */
    .press-forecast-banner {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: rgba(0,180,216,0.08);
      border: 1px solid rgba(0,180,216,0.2);
      border-radius: 10px;
    }
    .press-forecast-banner .pf-ico { font-size: var(--fs-d2); display: inline-flex; flex-shrink: 0; }
    .press-forecast-banner .pfb-title {
      font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--accent2); font-weight: 700; margin-bottom: 1px;
    }

    /* Klimaat-context regel in de hero */
    .hero-climate {
      margin-top: 7px; font-size: var(--fs-xs); color: var(--dim);
      display: block; line-height: 1.45;
    }
    .hero-climate b { color: var(--muted); font-weight: 600; }
    /* De hero-klimaatregel staat in het rechter meta-blok, direct onder de
       temperatuur-extremen (Hoogste/Laagste/Trend) — logisch gegroepeerd, op
       één regel; de flex-gap van .hero-meta regelt de tussenruimte. */
    #hero-climate { margin-top: 0; }
    /* Temperatuur-historie: pal naast het cijfer i.p.v. verloren in de hoek,
       top-uitgelijnd met de bovenkant van het grote getal. */
    .hero-temp-line { display: flex; align-items: flex-start; gap: 12px; }
    .hero-hist-btn { align-self: flex-start; margin-top: 6px; flex-shrink: 0; }
    /* Temp-historie + maanstand als klein knoppen-stapeltje naast de
       temperatuur, verticaal gecentreerd tegen het hoge getal. */
    .hero-temp-btns { display: inline-flex; flex-direction: column; gap: 6px; align-self: center; flex-shrink: 0; }

    /* Waarschuwingsbanners */
    .warnings {
      max-width: 1240px; margin: 12px auto 0; padding: 0 28px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .warnings:empty { display: none; }
    .warning {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 10px;
      font-size: var(--fs-sm); font-weight: 600;
      border: 1px solid;
    }
    .warning .w-ico { font-size: var(--fs-d1); display: inline-flex; flex-shrink: 0; }
    .warning.frost { background: rgba(96,165,250,0.12);  border-color: rgba(96,165,250,0.4);  color: #bcd6ff; }
    .warning.storm { background: rgba(251,146,60,0.12);  border-color: rgba(251,146,60,0.4);  color: #ffd3ac; }
    .warning.heat  { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); color: #ffc4c4; }
    .warning.rain  { background: rgba(0,180,216,0.12);   border-color: rgba(0,180,216,0.4);   color: #a6e8f6; }
    .warning.thunder { background: rgba(250,204,21,0.13); border-color: rgba(250,204,21,0.45); color: #fde68a; }
    .warning.thunder .w-ico { color: #facc15; }
    @media (max-width: 900px) { .warnings { padding: 0 16px; } }

    /* ── Sparklines ─────────────────────────────────────────── */
    .spark-wrap {
      margin-top: 12px;
      position: relative;
    }
    .spark-wrap svg {
      /* Hoogte mee laten schalen met de breedte (uniform, geen vervorming) in
         plaats van vast op 58px. In een bredere popup worden de grafieken zo
         ruim twee keer zo hoog en de staven een stuk beter leesbaar. */
      width: 100%;
      height: auto;
      display: block;
    }
    .spark-minmax {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-2xs);
      color: var(--dim);
      margin-top: 2px;
    }
    /* ── Bliksemkaart ───────────────────────────────────────── */
    .lightning-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .lightning-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
    }
    .lstat-val  { font-size: var(--fs-d2); font-weight: 800; color: #fff; line-height: 1.1; }
    .lstat-lbl  { font-size: var(--fs-2xs); color: var(--dim); text-transform: uppercase;
                  letter-spacing: 0.07em; font-weight: 500;}
    @media (max-width: 480px) {
      .lightning-row { grid-template-columns: 1fr; }
    }

    /* 24u grafiekenrij */
    .charts-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .charts-row-2 { grid-template-columns: repeat(2, 1fr); }
    .chart-item-label {
      font-size: var(--fs-2xs);
      color: var(--dim);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 6px; font-weight: 500;}
    @media (max-width: 600px) {
      .charts-row { grid-template-columns: 1fr; gap: 16px; }
    }

    /* ── Temperatuurrecords ─────────────────────────────────── */
    .records-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 12px;
    }
    .rec {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 10px 14px 12px;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      border-left: 2px solid transparent;
    }
    .rec-max { border-left-color: #f97316; }
    .rec-min { border-left-color: #60a5fa; }
    .rec-label {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--dim);
      font-weight: 500;
    }
    .rec-date { font-size: var(--fs-xs); color: var(--accent2); }
    .rec-max .rec-val { font-size: var(--fs-d1); font-weight: 800; color: #f97316; line-height: 1.1; }
    .rec-min .rec-val { font-size: var(--fs-d1); font-weight: 800; color: #60a5fa; line-height: 1.1; }
    .rec-rain { border-left-color: #00b4d8; }
    .rec-rain .rec-val { font-size: var(--fs-d1); font-weight: 800; color: #00b4d8; line-height: 1.1; }
    .records-section-label {
      font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--accent); font-weight: 700; margin: 4px 2px 8px;
    }
    .records-section-label:not(:first-of-type) { margin-top: 18px; }

    /* ── Uurverwachting ──────────────────────────────────────── */
    .hourly-strip {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: thin;
      scrollbar-color: var(--surface3) transparent;
    }
    .hourly-strip::-webkit-scrollbar { height: 4px; }
    .hourly-strip::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
    .hc {
      flex: 1 0 72px;
      background: var(--surface2);
      border-radius: var(--radius-sm);
      padding: 10px 8px 8px;
      text-align: center;
      max-width: 100px;
    }
    .hc.hc-now { background: var(--surface3); border: 1px solid var(--border); }
    .hc .hc-time  { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
    .hc .hc-icon  { font-size: var(--fs-xl); line-height: 1; margin-bottom: 3px; }
    .hc .hc-temp  { font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .hc .hc-prec  { font-size: var(--fs-2xs); color: #7cb3e8; margin-bottom: 1px; }
    .hc .hc-wind  { font-size: var(--fs-2xs); color: var(--muted); }

    /* ── Footer ─────────────────────────────────────────────── */
    .footer {
      border-top: 1px solid var(--border);
      padding: 16px 28px;
      font-size: var(--fs-2xs);
      color: var(--dim);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 1240px;
      margin: 0 auto;
    }
    .footer a { color: var(--muted); text-decoration: none; }
    .footer a:hover { color: var(--accent); }

    /* ── Moderne verbeteringen ──────────────────────────────── */
    /* Dynamische hero-kleur (JS zet --hero-tint / --hero-glow / --hero-accent) */
    .hero {
      background:
        radial-gradient(120% 140% at 15% 0%, var(--hero-tint, #12395e) 0%, #0d2843 55%, #0a1f36 100%);
      border-top-color: var(--hero-accent, var(--accent));
    }
    /* Kaart dimmen (vlakke laag) + gekleurde gloed, statisch bovenop de tegels */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(10,22,38,0.50), rgba(10,22,38,0.50)),
        radial-gradient(130% 160% at 12% -15%, var(--hero-glow, rgba(45,212,191,0.40)) 0%, transparent 60%);
    }

    /* Kaart-hover: de accentrand is voorbehouden aan kaarten die écht klikbaar
       zijn (.card-clickable opent z'n historie). Overige kaarten krijgen enkel
       een zachte schaduw, zodat ze niets beloven. */
    .card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    .card-clickable { cursor: pointer; }
    .card-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    @media (hover: hover) {
      .card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
      .card-clickable:hover { border-color: var(--accent); transform: translateY(-2px); }
      .card-clickable:hover .tile-btn {
        background: rgba(0,180,216,0.26);
        border-color: rgba(0,180,216,0.55);
      }
    }

    /* Entree-animatie: kaarten faden gestaggerd in bij laden */
    @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .content > .card { opacity: 0; animation: cardIn .5s ease forwards; }
    .content > .card:nth-child(1)  { animation-delay: .00s; }
    .content > .card:nth-child(2)  { animation-delay: .04s; }
    .content > .card:nth-child(3)  { animation-delay: .08s; }
    .content > .card:nth-child(4)  { animation-delay: .12s; }
    .content > .card:nth-child(5)  { animation-delay: .16s; }
    .content > .card:nth-child(6)  { animation-delay: .20s; }
    .content > .card:nth-child(7)  { animation-delay: .24s; }
    .content > .card:nth-child(8)  { animation-delay: .28s; }
    .content > .card:nth-child(n+9){ animation-delay: .32s; }

    /* Live-puls op de freshness-dot bij elke update */
    @keyframes freshPulse { 0% { transform: scale(1); } 40% { transform: scale(2.1); } 100% { transform: scale(1); } }
    #freshness-dot.pulse { animation: freshPulse .7s ease; }

    /* Skeleton-shimmer op de hero-temperatuur tijdens het laden */
    @keyframes shimmer { to { background-position: -200% 0; } }
    body.is-loading .hero-temp {
      color: transparent;
      border-radius: 10px;
      background: linear-gradient(90deg, #123a5e 25%, #1d4d74 50%, #123a5e 75%);
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
    }
    body.is-loading .hero-temp sup { visibility: hidden; }

    /* Toetsenbord-focus zichtbaar maken */
    a:focus-visible, button:focus-visible, .records-btn:focus-visible,
    [tabindex]:focus-visible, .fc:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }

    /* Tekstselectie in accentkleur */
    ::selection { background: rgba(0,180,216,0.32); color: #fff; }

    /* Themende scrollbar */
    * { scrollbar-width: thin; scrollbar-color: var(--surface3) transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 6px; border: 2px solid var(--bg); }
    ::-webkit-scrollbar-thumb:hover { background: var(--border); }

    /* SVG-weer-iconen schalen mee met de font-size van hun container */
    .hero-icon svg, .hc-icon svg, .fc-icon svg,
    .hero-sun-item svg, .hc-prec svg, .hc-wind svg,
    .fc-rain svg, .fc-wnd svg, #hero-moon-icon svg { vertical-align: -0.15em; }

    /* Zachte fade als een waarde verandert */
    @keyframes valueFade { from { opacity: .35; } to { opacity: 1; } }
    .value-changed { animation: valueFade .5s ease; }

    /* Respecteer systeemvoorkeur voor minder beweging */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
      .content > .card { opacity: 1; }
    }
    /* Nieuwe-versie melding (subtiele toast onderin) */
    .update-toast {
      position: fixed; left: 50%; transform: translateX(-50%);
      top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 10000;
      display: none; align-items: center; gap: 12px;
      background: var(--surface2); border: 1px solid var(--accent); border-radius: 999px;
      padding: 8px 10px 8px 16px; box-shadow: 0 10px 34px rgba(0,0,0,0.45);
      font-size: var(--fs-sm); color: var(--text); white-space: nowrap; max-width: calc(100vw - 20px);
    }
    .update-toast > span { white-space: nowrap; }
    .update-toast.show { display: flex; animation: valueFade .4s ease; }
    .update-toast button {
      font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
      background: var(--accent); color: #04222f; border: 0; border-radius: 999px; padding: 6px 15px;
    }
    /* Voor schermlezers en zoekmachines, visueel verborgen */
    .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;
    }

    /* ── Mobile verbeteringen (< 480px) — bewust ACHTERAAN de
       stylesheet, ná de componentregels: anders wint bij gelijke
       specificiteit de basisregel (source order) en slaan de mobiele
       verkleiningen/padding niet aan. Zie eerdere windkolom-bug. */
    @media (max-width: 480px) {
      /* Topbar: op de smalle iPhone-breedte past titel + Records + Live-chip
         niet naast elkaar. Records wordt icoon-only (scheelt het meest),
         de titel iets kleiner, en de rechterkant compacter. */
      .topbar { padding: 0 14px; }
      .logo-text { font-size: var(--fs-sm); }
      .topbar-right { gap: 10px; }
      .records-btn .rb-label { display: none; }
      .records-btn { padding: 5px 7px; gap: 0; }

      /* Hero: compact en gecentreerd (klassieke weer-app stijl) */
      .hero { padding: 14px 14px 12px; }
      .hero-inner {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 4px;
        text-align: center;
      }
      /* Icoon náást de temperatuur (niet erboven) → minder gestapeld. Het
         icoon+tekst-blok wordt als geheel gecentreerd; de tekst zelf is
         links uitgelijnd, zodat het als één compacte kop leest. */
      .hero-identity { flex-direction: row; align-items: center; gap: 14px; }
      .hero-id-text { align-items: flex-start; text-align: left; max-width: none; }
      /* Klimaatregel is secundaire context; op mobiel weg om hoogte te sparen
         (JS zet 'm inline op display, dus hier !important). */
      #hero-climate { display: none !important; }
      .hero-icon { font-size: var(--fs-d3); margin-bottom: 0; }
      .hero-temp { font-size: var(--fs-hero-temp-m); }
      .hero-meta { min-width: 0; width: 100%; flex: 0 1 auto; gap: 8px; align-items: center; }
      .hero-chips { justify-content: center; }
      .hero-condition { font-size: var(--fs-md); }
      .hero-feels { font-size: var(--fs-xs); margin-bottom: 6px; }
      /* Zonbalk volle breedte, anders klitten opkomst/ondergang in het midden. */
      .hero-sunbar { width: 100%; }
      .hero-sunbar .sunbar-labels { width: 100%; }
      .hero-sun {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 14px;
        font-size: var(--fs-2xs);
        margin-top: 4px;
      }
      .hero-daybar { max-width: 100%; margin-top: 8px; }
      .hero-minmax {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-top: 6px;
      }
      .hero-mm { align-items: center; }
      .hero-mm .lbl { font-size: var(--fs-2xs); }
      .hero-mm .val { font-size: var(--fs-md); }
      .hero-mm-time { font-size: var(--fs-2xs); }

      /* Hero: daybar verbergen bespaart ~40px hoogte */
      .hero-daybar { display: none; }
      /* Sun-rij: max 2 items per rij (opkomst + ondergang), rest op volgende rij */
      .hero-sun { gap: 6px 16px; }

      /* Cards: compactere padding, gecentreerde tekst */
      .card { border-radius: 10px; }
      .card-header { padding: 8px 12px 0; text-align: center; }
      .card-body { padding: 8px 14px 12px; text-align: center; }

      /* Wind card: kompas-rij centreren, detail centreren */
      .wind-top-row { justify-content: center; }
      .compass-wrap { width: 58px; height: 58px; }
      .bft-number { font-size: var(--fs-d1); }
      .wind-bars { justify-content: center; }

      /* Luchtdruk: dial + waarden centreren, dial iets kleiner */
      .press-top-row { justify-content: center; }
      .baro-dial-wrap { width: 84px; height: 84px; }
      .pressure-main { justify-content: center; }
      .pressure-trend-row { justify-content: center; }
      .pressure-val { font-size: var(--fs-d1); }

      /* Neerslag: centreren */
      .rain-main { justify-content: center; }
      .rain-val { font-size: var(--fs-d1); }
      .rain-row { justify-content: center; }
      .rain-row-item { align-items: center; }

      /* Luchtvochtigheid: centreren */
      .hum-main { justify-content: center; }

      /* Uurverwachting strip op mobiel */
      .hc { min-width: 52px; padding: 6px 8px 5px; }
      .hc .hc-icon { font-size: var(--fs-lg); }
      .hc .hc-temp { font-size: var(--fs-sm); }

      /* 7-daagse-grafiek: horizontaal scrollbaar op mobiel, met een minimale
         breedte zodat de labels leesbaar blijven i.p.v. samen te knijpen. */
      .forecast-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
      }
      .fc-chart { min-width: 900px; }
      .forecast-row::-webkit-scrollbar { display: none; }
      .fc { padding: 10px 8px 8px; min-width: 120px; }
      .fc .fc-icon { font-size: var(--fs-xl); }
      .fc .fc-temps { font-size: var(--fs-sm); }
      .fc .fc-rain, .fc .fc-wnd { font-size: var(--fs-2xs); }
    }