/* ===========================================================================
   CourtFlow — designsysteem
   Kleuren afgeleid van het logo: diep navy, fris blauw, limegroen.
   Geen externe fonts/CDN: alles werkt offline.
   =========================================================================== */

:root {
  /* Merkkleuren */
  --navy:        #0E2A47;
  --navy-700:    #17385c;
  --navy-500:    #2b537c;
  --blue:        #1E9BF0;
  --blue-600:    #1682d6;
  --green:       #86C440;
  --green-600:   #6fab2f;

  /* Neutralen */
  --bg:          #eef2f7;
  --bg-2:        #e5ebf3;
  --card:        #ffffff;
  --ink:         #0E2A47;
  --muted:       #5b6b7b;
  --line:        #e2e8f0;
  --line-strong: #cfd8e3;

  /* Status */
  --ok:          #2fa84f;
  --warn:        #e8a33d;
  --danger:      #e05656;

  /* Vorm & schaduw */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(14,42,71,.06), 0 2px 8px rgba(14,42,71,.05);
  --shadow:    0 6px 24px rgba(14,42,71,.10);
  --shadow-lg: 0 20px 60px rgba(14,42,71,.18);

  --grad: linear-gradient(100deg, var(--blue) 0%, #35b0d8 45%, var(--green) 100%);
  --grad-soft: linear-gradient(160deg, rgba(30,155,240,.10), rgba(134,196,64,.10));

  --maxw: 1040px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(1200px 600px at 80% -10%, #f4f8ff 0%, var(--bg) 42%) fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Achtergrond-decor ------------------------------------------------------- */
.bg-decor { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; }
.blob-a { width: 46vw; height: 46vw; right: -12vw; top: -14vw;
  background: radial-gradient(circle at 30% 30%, var(--blue), transparent 70%); }
.blob-b { width: 40vw; height: 40vw; left: -14vw; bottom: -18vw;
  background: radial-gradient(circle at 60% 40%, var(--green), transparent 70%); opacity: .28; }

/* Layout ------------------------------------------------------------------ */
.app { position: relative; z-index: 1; min-height: 100%; }
.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section { padding: 34px 0; }
.stack { display: grid; gap: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.center { text-align: center; }
.muted { color: var(--muted); }
.hide { display: none !important; }

/* Basismaat voor alle lijn-iconen -----------------------------------------
   Een <svg> zonder eigen maat valt terug op 100% van zijn container en wordt
   dan enorm. Dat was de oorzaak van het uitgerekte pictogram in de
   groepsbadge, en trof ook modalkoppen, info-regels en kaarttitels. Deze regel
   staat bewust vóór de specifieke regels (knoppen, tabs, badges), zodat die
   hun eigen maat kunnen blijven zetten. */
svg { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* Topbar ------------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid var(--line);
}
.topbar .container { display: flex; align-items: center; gap: 14px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--navy); }
.brand b { font-weight: 800; letter-spacing: .2px; font-size: 1.08rem; }
.brand b span { color: var(--blue); }
.topbar nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }

/* Typografie -------------------------------------------------------------- */
h1,h2,h3 { line-height: 1.15; margin: 0 0 .4em; color: var(--navy); letter-spacing: -.02em; }
h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 850; }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.12rem; font-weight: 750; }
p { margin: 0 0 1em; }
.lead { font-size: 1.12rem; color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; color: var(--blue); }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Knoppen ----------------------------------------------------------------- */
.btn {
  --bg: var(--card); --fg: var(--navy); --bd: var(--line-strong);
  appearance: none; border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font: inherit; font-weight: 700; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 18px; height: 18px; }
.btn svg.flip { transform: scaleX(-1); }
.btn-primary { --bg: var(--grad); --fg: #fff; --bd: transparent; box-shadow: 0 8px 22px rgba(30,155,240,.32); }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(30,155,240,.42); }
.btn-navy { --bg: var(--navy); --fg: #fff; --bd: transparent; }
.btn-ghost { --bg: transparent; --bd: transparent; --fg: var(--navy); }
.btn-danger { --bg: #fff; --fg: var(--danger); --bd: #f2c7c7; }
.btn-danger:hover { --bg: var(--danger); --fg: #fff; }
.btn-sm { padding: 7px 13px; font-size: .86rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 15px 26px; font-size: 1.05rem; }

/* Kaarten ----------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 22px;
}
.card.pad-lg { padding: 30px; }
.card-hover { transition: transform .16s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Formulieren ------------------------------------------------------------- */
label.field { display: grid; gap: 6px; font-weight: 650; font-size: .92rem; color: var(--navy); }
.field .hint { font-weight: 500; color: var(--muted); font-size: .82rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=time], input[type=date], select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 11px 13px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,155,240,.15);
}
.input-code { letter-spacing: .2em; text-transform: uppercase; font-weight: 800; text-align: center; font-size: 1.15rem; }

/* Chips / badges ---------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--grad-soft); border: 1px solid var(--line); font-weight: 650; font-size: .86rem; color: var(--navy);
}
.chip .x { cursor: pointer; opacity: .6; font-weight: 800; }
.chip .x:hover { opacity: 1; color: var(--danger); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.badge-blue { background: rgba(30,155,240,.14); color: var(--blue-600); }
.badge-green { background: rgba(134,196,64,.18); color: var(--green-600); }
.badge-navy { background: rgba(14,42,71,.08); color: var(--navy); }
.badge-warn { background: rgba(232,163,61,.16); color: #b9791f; }
.badge-muted { background: #eef1f5; color: var(--muted); }
/* Iconen in een badge moeten net als in knoppen op maat staan, anders duwt het
   pictogram de tekst uit de badge. */
.badge svg { width: 15px; height: 15px; flex: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.group-badge { max-width: 40vw; }

/* Avatar ------------------------------------------------------------------ */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; color: #fff; flex: none;
  background: var(--navy); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

/* Segmented tabs ---------------------------------------------------------- */
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: #eaeff5; border-radius: 999px; border: 1px solid var(--line); flex-wrap: wrap; }
.tabs button {
  appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--muted);
  padding: 8px 15px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .15s;
}
.tabs button.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.tabs button:hover:not(.active) { color: var(--navy); }
.tabs svg { width: 16px; height: 16px; }

/* Hero -------------------------------------------------------------------- */
.hero { padding: 50px 0 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; justify-content: center; }

/* Sessiekaart / planning -------------------------------------------------- */
.session {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 16px; align-items: center;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: .16s;
}
.session:hover { box-shadow: var(--shadow); }
.session.mine { border-color: rgba(30,155,240,.55); box-shadow: 0 0 0 3px rgba(30,155,240,.10); }
.session.past { opacity: .62; }
.datecell { text-align: center; background: var(--grad-soft); border-radius: var(--r-sm); padding: 8px 6px; border: 1px solid var(--line); }
.datecell .d { font-size: 1.5rem; font-weight: 850; color: var(--navy); line-height: 1; }
.datecell .m { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-600); }
.datecell .w { font-size: .72rem; color: var(--muted); }
.lineup { display: flex; gap: 8px; flex-wrap: wrap; }
.player-pill { display: inline-flex; align-items: center; gap: 8px; background: #f4f7fb; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; font-weight: 650; font-size: .9rem; }
.player-pill.guest { background: rgba(232,163,61,.12); border-color: rgba(232,163,61,.35); }
.player-pill.empty { background: repeating-linear-gradient(45deg, #f6f8fb, #f6f8fb 6px, #eef2f7 6px, #eef2f7 12px); color: var(--muted); padding: 6px 14px; }
.player-pill .avatar { width: 26px; height: 26px; font-size: .7rem; }

/* Teamindeling (na loten) ------------------------------------------------- */
.teams { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--grad-soft); border: 1px solid var(--line); }
.court { display: grid; gap: 6px; }
.court-lbl { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.court-teams { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team { display: flex; gap: 6px; flex-wrap: wrap; }
.vs { font-weight: 850; color: var(--muted); font-size: .78rem; letter-spacing: .06em; }
.player-pill.sm { font-size: .84rem; padding: 3px 10px 3px 3px; background: #fff; }
.player-pill.sm .avatar { width: 22px; height: 22px; font-size: .62rem; }

/* Reeksen: één speeldag kan er meerdere hebben (wisselen om de 30/45 min) --- */
.reeksen { display: grid; gap: 10px; }
.reeks-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reeks-lbl { font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em;
  color: var(--navy); }
.reeks-kop .opnieuw { margin-left: auto; padding: 4px 9px; font-size: .78rem; opacity: .75; }
.reeks-kop .opnieuw:hover { opacity: 1; }
.reeks-kop .opnieuw svg { width: 15px; height: 15px; }
/* Nog te loten: zelfde vorm, maar duidelijk leeg */
.teams.leeg { background: #fff; border-style: dashed; }

/* Groepen wisselen -------------------------------------------------------- */
/* De groepsbadge in de kop is een knop geworden */
button.badge { border: 0; font: inherit; font-size: .74rem; font-weight: 800; cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease; }
button.badge:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.group-badge svg:last-child { opacity: .6; }

.acc-row { display: flex; align-items: center; gap: 6px; }
.acc-row.huidig .acc-pick { border-color: rgba(30,155,240,.5); background: var(--grad-soft); }
.acc-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; text-align: left;
  appearance: none; font: inherit; cursor: pointer; padding: 10px 14px;
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.acc-pick:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--blue); }
.acc-pick:disabled { cursor: default; }
.acc-pick svg { width: 18px; height: 18px; margin-left: auto; flex: none; opacity: .5; }
.acc-pick .badge { margin-left: auto; flex: none; }
.acc-txt { display: grid; min-width: 0; line-height: 1.25; }
.acc-txt .muted { font-size: .82rem; display: flex; align-items: center; gap: 5px; }
.acc-txt .muted svg { width: 13px; height: 13px; margin: 0; opacity: .8; }

/* Staat van het opslaan. Blijft weg zolang alles vlot loopt; verschijnt enkel
   als er iets te melden valt. Links onderaan, uit de weg van de tabbalk. */
.syncpil { position: fixed; left: 14px; bottom: 14px; z-index: 60;
  padding: 7px 13px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  color: var(--muted); }
.syncpil.bezig { color: var(--blue-600); border-color: rgba(30,155,240,.4); }
.syncpil.fout  { color: var(--danger); border-color: #f2c7c7; background: #fff6f6; }
.syncpil.lokaal { color: var(--muted); }
@media (max-width: 720px) { .syncpil { bottom: 76px; } }

/* De beheerder zelf in de spelerslijst van de wizard: niet weg te klikken */
.chip.ik { background: var(--grad-soft); border-color: rgba(30,155,240,.45); font-weight: 750; }

/* Beheerder zet spelers af-/aanwezig voor één speeldag -------------------- */
.wierij { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.wierij:last-child { border-bottom: 0; }
.wierij .btn { flex: none; }

/* Rij met naam + persoonlijke code ---------------------------------------- */
.coderow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.coderow:last-child { border-bottom: 0; }
.code.sm { font-weight: 850; letter-spacing: .14em; color: var(--navy); font-size: .98rem;
  font-variant-numeric: tabular-nums; }

/* Uitslagen --------------------------------------------------------------- */
.team.wint .player-pill { background: rgba(134,196,64,.20); border-color: rgba(134,196,64,.55); font-weight: 750; }
.vs.score { font-size: 1.05rem; font-weight: 850; color: var(--navy); letter-spacing: 0; }
.setrij { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.hint-regel { margin: 0; font-size: .85rem; display: flex; gap: 7px; align-items: flex-start; }
.hint-regel svg { width: 15px; height: 15px; margin-top: 2px; }
.setpil { font-size: .78rem; font-weight: 800; color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
/* Invoerrij voor één set / voor de gewonnen games */
.setinvoer { display: grid; grid-template-columns: 58px 1fr 16px 1fr; align-items: center; gap: 10px; }
.setinvoer .muted { font-size: .82rem; font-weight: 650; }
.setinvoer input { text-align: center; font-weight: 800; font-size: 1.05rem; }
.setinvoer .streep { text-align: center; color: var(--muted); font-weight: 800; }

/* Punten per game — dichtgeklapt, want lang niet iedereen vult dit in ------- */
.gamedetail { border-top: 1px solid var(--line); padding-top: 10px; }
.gamedetail > summary { cursor: pointer; font-weight: 750; font-size: .88rem; color: var(--navy);
  list-style: none; display: flex; align-items: center; gap: 7px; }
.gamedetail > summary::-webkit-details-marker { display: none; }
.gamedetail > summary::before { content: "▸"; color: var(--muted); font-size: .8rem; }
.gamedetail[open] > summary::before { content: "▾"; }
.gameraster { display: grid; gap: 6px; margin-top: 10px; }
.gamerij { display: grid; grid-template-columns: 40px 1fr 14px 1fr; align-items: center; gap: 8px; }
.gamerij .muted { font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.gamerij .streep { text-align: center; color: var(--muted); font-weight: 800; }
.gamerij select { padding: 6px 8px; font-size: .9rem; font-weight: 750; text-align: center; }
/* Kolomkop met de duonamen. Zonder die kop leest het streepje in het midden
   als een scheiding tussen twee kolommen i.p.v. tussen twee duo's. */
.gamerij.kop { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.gamerij.kop .ellip { text-align: center; text-transform: none; letter-spacing: 0;
  font-size: .78rem; color: var(--navy); }
/* Voorbij de achtste rij pas op vraag: zestien lege rijen schrikken af */
.gameraster .gamerij.extra { display: none; }
.gameraster.toon-alles .gamerij.extra { display: grid; }
.gamedetail .meer { margin-top: 10px; }
.gameraster.toon-alles ~ .meer { display: none; }
/* "Winst" kleurt groen, zodat je per rij meteen ziet wie het spelletje pakte */
.gamerij select.winst { background: rgba(134,196,64,.20); border-color: rgba(134,196,64,.6);
  color: var(--green-600); font-weight: 850; }

/* Segmentkeuze (reeksen, telsysteem) -------------------------------------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px;
  background: #eef1f5; border: 1px solid var(--line); }
.seg button { appearance: none; border: 0; background: transparent; font: inherit; font-weight: 750;
  font-size: .88rem; color: var(--muted); padding: 7px 15px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.seg button:hover { color: var(--navy); }
.seg button.aan { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.check { display: flex; align-items: center; gap: 9px; font-size: .9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.lijst { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: .92rem; }
.waarschuw { color: #b9791f; font-weight: 700; }

/* Statistiekrijen --------------------------------------------------------- */
.tabs.sub { background: #e8edf4; }
.stat-row { display: grid; grid-template-columns: 30px 1fr 120px 58px; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.stat-row:last-child { border-bottom: 0; }
.stat-naam { display: grid; min-width: 0; line-height: 1.3; }
.stat-naam .muted { font-size: .82rem; }
.pctteken { font-size: .7rem; font-weight: 700; color: var(--muted); margin-left: 1px; }
/* Winst / gelijk / verlies in één balk */
.wlbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eaeff5; }
.wlbar > span { display: block; height: 100%; }
.wlbar .w { background: linear-gradient(90deg, var(--green), var(--green-600)); }
.wlbar .d { background: #cfd8e3; }
.wlbar .l { background: rgba(224,86,86,.55); }
/* Vormbolletjes: laatste partijen */
.vormrij { display: inline-flex; gap: 3px; flex: none; }
.vormrij i { width: 8px; height: 8px; border-radius: 50%; display: block; background: #cfd8e3; }
.vormrij i.winst { background: var(--green-600); }
.vormrij i.verlies { background: var(--danger); }
.vormrij i.gelijk { background: var(--line-strong); }
/* Kerncijfers */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.kpi .n2 { font-size: 1.12rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.lbl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* Standings / balk -------------------------------------------------------- */
.stand-row { display: grid; grid-template-columns: 30px 1fr 120px 46px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.stand-row:last-child { border-bottom: 0; }
.rank { font-weight: 850; color: var(--muted); text-align: center; }
.bar { height: 10px; background: #eaeff5; border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.count { text-align: right; font-weight: 800; }

/* Uitleg-stappen ---------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.step .num { counter-increment: step; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-weight: 850; box-shadow: var(--shadow-sm); }
.step .num::before { content: counter(step); }

/* Code-weergave (na aanmaak) --------------------------------------------- */
.codebox { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  background: #f7fafc; border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 14px 16px; }
.codebox .code { font-size: 1.5rem; font-weight: 850; letter-spacing: .18em; color: var(--navy); }
.codebox .lbl { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* Toasts ------------------------------------------------------------------ */
.toasts { position: fixed; z-index: 60; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; width: min(92vw, 440px); }
.toast { background: var(--navy); color: #fff; padding: 13px 16px; border-radius: var(--r); box-shadow: var(--shadow-lg);
  display: flex; gap: 10px; align-items: center; animation: pop .25s ease both; }
.toast.ok { background: #14653a; }
.toast.warn { background: #8a5a12; }
.toast.err { background: #8a2222; }
.toast svg { width: 20px; height: 20px; flex: none; }

/* Modal ------------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(14,42,71,.45); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px; animation: fade .2s ease both; }
.modal { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(96vw, 560px);
  max-height: 90vh; overflow: auto; animation: pop .25s ease both; }
.modal header { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.modal header > svg { width: 20px; height: 20px; color: var(--blue); }
.modal header h3 { margin: 0; }
.modal .body { padding: 22px; }
.modal .foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
.icon-btn { appearance: none; border: 0; background: #eef2f7; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; margin-left: auto; }
.icon-btn:hover { background: #e2e8f0; }

/* ===========================================================================
   OPENING-ANIMATIE
   Choreografie in beats: gloed → terrein tekent zich → bal vliegt in →
   logo landt → ringen → glans → en dan lost het geheel op in de startpagina.
   De laatste stap is bewust een dubbele overgang: eerst kleurt een sluier de
   splash om naar exact dezelfde achtergrond als de app, dán fade de splash
   weg. Daardoor zie je geen sprong van donker naar licht.
   Duur: ± 3,8 s; tikken slaat over.
   =========================================================================== */
/* BELANGRIJK — waarom de uitgang met transitions werkt en niet met animaties.
   Zodra een klasse de animation-lijst van een element wijzigt, VERVANGT CSS die
   lijst. Wat de oude animatie vasthield valt dan weg en de eigenschap springt
   terug naar de basiswaarde: één frame zichtbaar = een knipper. Dat gebeurde
   hier meermaals (backstop vs. uitgang, zweving vs. uitgang, hero-animatie met
   dezelfde naam). Daarom raakt de uitgang nu géén enkele animation-lijst meer
   aan: hij verloopt volledig via transitions op eigenschappen die door geen
   animatie bezet zijn. De kinderen (gloed, zweving, stipjes) blijven rustig
   doorlopen en faden simpelweg mee met de ouder. */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(900px 620px at 50% 32%, #14395f 0%, var(--navy) 58%, #061726 100%);
  overflow: hidden;
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1),
              visibility 0s linear .8s;
}
/* Sluier in de kleur van de app-achtergrond → naadloze overgang */
.splash::after {
  content: ""; position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none;
  background: radial-gradient(1200px 600px at 80% -10%, #f4f8ff 0%, var(--bg) 42%);
  transition: opacity .45s ease .12s;
}
/* Uitgang: de sluier licht op naar de app-achtergrond en het geheel lost op */
.splash.leaving { opacity: 0; transform: scale(1.04); visibility: hidden; }
.splash.leaving::after { opacity: 1; }

/* Gloed */
.splash-glow { position: absolute; width: 82vmax; height: 82vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(30,155,240,.32), rgba(134,196,64,.13) 42%, transparent 62%);
  animation: splashGlow 1s ease-out both, glowPulse 3s ease-in-out 1s infinite; }

/* De swoosh uit het logo tekent zich uit ------------------------------------
   Twee curves — limegroen boven, fris blauw onder — in dezelfde vorm als de
   swoosh in het logo. pathLength="1" maakt de "tekenen"-animatie exact: de
   streep is genormaliseerd, dus hij komt precies op het einde van de lijn uit.
   De bal rijdt over de bovenste curve; de keerpunten hieronder zijn punten van
   diezelfde bézier, zodat hij echt op de lijn blijft. */
.splash-flow { position: absolute; width: min(88vw, 720px); height: auto; overflow: visible;
  fill: none; stroke-linecap: round; }
/* Alleen de twee swoosh-lijnen tekenen zich uit — niet de naden van de bal */
.splash-flow .f1, .splash-flow .f2 {
  stroke-width: 5; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: flowDraw 1.15s cubic-bezier(.4,0,.25,1) both,
             flowRecede 1s ease 1.8s both;
}
.splash-flow .f1 { stroke: var(--green); animation-delay: .25s, 1.8s; }
.splash-flow .f2 { stroke: var(--blue);  animation-delay: .45s, 2s; }
/* De bal zelf.
   Geen `filter: drop-shadow` meer: een filter op iets dat elk frame beweegt
   dwingt de browser telkens tot opnieuw rasteren, en dat liet de opening op
   ± 15 fps draaien (gemeten op een schermopname van Chris, 12 aug). De gloed
   komt nu van een vervagende radiale cirkel áchter de bal — die schaalt gewoon
   mee en kost niets. `linear` is essentieel: zie de keyframes onderaan. */
.splash-flow .fball { animation: ballRide 1.28s linear .3s both; will-change: transform; }
/* Specifieker dan `.fball circle` hieronder, anders krijgt de gloed het
   balverloop én een randje. */
.splash-flow .fball .gloed { fill: url(#cf-gloed); stroke: none; }
.splash-flow .fball circle { fill: url(#cf-bal); stroke: rgba(255,255,255,.25); stroke-width: .8; }
.splash-flow .seam { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.5; stroke-linecap: round; }
/* De tweede helft van de rit. Specifieker dan de regel hierboven, zodat deze
   bal ballRide niet óók uitvoert. Het logo ligt erbovenop (later in de DOM),
   dus tot voorbij de tegel is hij vanzelf niet te zien. */
/* `forwards` i.p.v. `both`, met dekking 0 als basis: anders zou hier vanaf het
   eerste frame een bal stil in het midden staan wachten tot zijn beurt. */
.splash-flow .fball.out { opacity: 0; animation: ballOut 1.11s linear 1.58s forwards; }

/* Uiteenspatten op de punt van de swoosh */
.splash-flow .fburst circle { transform-box: fill-box; transform-origin: center; }
.splash-flow .fring { fill: none; stroke: rgba(134,196,64,.9); stroke-width: 2.5;
  animation: burstRing .62s cubic-bezier(.2,.8,.2,1) 2.58s both; }
.splash-flow .fspark { fill: var(--green); animation: sparkFly .5s cubic-bezier(.2,.7,.3,1) 2.6s both; }
.splash-flow .s1 { --dx: 27px;  --dy: -21px; }
.splash-flow .s2 { --dx: 31px;  --dy: 11px; }
.splash-flow .s3 { --dx: 7px;   --dy: -31px; }
.splash-flow .s4 { --dx: 17px;  --dy: 27px; }

/* Logo */
.splash-inner { position: relative; display: grid; justify-items: center; }
/* Het zweven zit op een eigen laag. Zo raken de twee animaties elkaar niet:
   de tegel doet binnenkomen en weggaan, het laagje doet het op-en-neer. */
/* will-change zet deze lagen op de GPU. Zonder dat werd het logo (een PNG van
   1254×1254) elk frame opnieuw geschaald en getekend, samen met de gloed — dat
   was de tweede helft van het haperen. */
.splash-lift { animation: tileBreathe 3.4s ease-in-out 1.7s infinite; will-change: transform; }
.splash-tile { width: clamp(220px, 58vw, 360px);
  animation: splashLogo 1.05s cubic-bezier(.2,.9,.2,1) .55s both; will-change: transform, opacity; }

/* Ringen */
.splash-ring { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px;
  border-radius: 50%; border: 2px solid rgba(134,196,64,.7);
  animation: splashRing 1.5s cubic-bezier(.2,.8,.2,1) 1.25s both; will-change: transform, opacity; }
.splash-ring.r2 { border-color: rgba(30,155,240,.55); animation-delay: 1.45s; }
.splash-ring.r3 { border-color: rgba(255,255,255,.35); animation-delay: 1.65s; }

/* Opstijgende stipjes */
.splash-dots { position: absolute; inset: 0; pointer-events: none; }
.splash-dots i { position: absolute; bottom: 16%; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.75); opacity: 0;
  animation: dotRise 2.6s ease-in-out infinite; }
.splash-dots i:nth-child(1) { left: 18%; animation-delay: 1.3s; }
.splash-dots i:nth-child(2) { left: 31%; animation-delay: 1.7s; background: rgba(134,196,64,.85); }
.splash-dots i:nth-child(3) { left: 46%; animation-delay: 1.5s; }
.splash-dots i:nth-child(4) { left: 62%; animation-delay: 1.9s; background: rgba(30,155,240,.85); }
.splash-dots i:nth-child(5) { left: 75%; animation-delay: 1.4s; }
.splash-dots i:nth-child(6) { left: 87%; animation-delay: 2.1s; background: rgba(134,196,64,.7); }

.splash-swoosh { position: absolute; top: 0; left: -45%; width: 45%; height: 100%; filter: blur(16px);
  background: linear-gradient(100deg, transparent, rgba(30,155,240,.40), rgba(134,196,64,.40), transparent);
  animation: splashSwoosh 1.5s cubic-bezier(.4,0,.2,1) .3s both; }

@keyframes splashLogo   { 0% { opacity: 0; transform: scale(.7) translateY(22px) rotate(-3deg); }
                         62% { opacity: 1; transform: scale(1.05) rotate(.6deg); }
                        100% { opacity: 1; transform: none; } }
@keyframes tileBreathe  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes splashGlow   { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes glowPulse    { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: .82; } }
@keyframes flowDraw     { to { stroke-dashoffset: 0; } }
@keyframes flowRecede   { to { opacity: .32; } }
/* Punten op de bovenste curve (bézier 8,118 → 80,58 → 148,62 → 212,96).
   BELANGRIJK: de timing-function staat op `linear`. CSS past de easing namelijk
   toe op ELK keyframe-interval apart, dus met een ease-curve remde de bal af en
   versnelde hij opnieuw bij élk tussenpunt — vijf keer per seconde, en dat is
   precies wat als "haperen" aanvoelt. De snelheid zit nu in de púnten: ze zijn
   op booglengte berekend, dichter bij elkaar waar hij traag gaat. Genereren kan
   opnieuw met het scriptje uit de sessie van 12 aug (zie CONTEXT.md). */
@keyframes ballRide     { 0%   { opacity: 0; transform: translate(8px, 118px) scale(.55); }
                          5%   { transform: translate(8.9px, 117.2px) scale(.663); }
                          10%  { opacity: 1; transform: translate(11.7px, 115px) scale(.775); }
                          15%  { transform: translate(16.3px, 111.4px) scale(.887); }
                          20%  { transform: translate(23px, 106.4px) scale(1); }
                          25%  { transform: translate(31.7px, 100.4px) scale(1); }
                          30%  { transform: translate(42.4px, 93.9px) scale(1); }
                          35%  { transform: translate(53.6px, 88px) scale(1); }
                          40%  { transform: translate(65.2px, 82.8px) scale(1); }
                          45%  { transform: translate(77.2px, 78.5px) scale(1); }
                          50%  { transform: translate(89.5px, 75.2px) scale(1); }
                          55%  { transform: translate(102px, 72.9px) scale(1); }
                          60%  { transform: translate(114.6px, 71.7px) scale(1); }
                          65%  { transform: translate(127.3px, 71.5px) scale(1); }
                          70%  { transform: translate(140px, 72.4px) scale(1); }
                          75%  { transform: translate(152.6px, 74.3px) scale(1); }
                          80%  { transform: translate(164.9px, 77.1px) scale(1); }
                          85%  { transform: translate(177.1px, 80.8px) scale(1); }
                          90%  { transform: translate(189px, 85.2px) scale(1); }
                          95%  { transform: translate(200.7px, 90.3px) scale(1); }
                          100% { transform: translate(212px, 96px) scale(1); } }
/* Tweede helft, bézier 212,96 → 268,126 → 330,128 → 412,78. Zelfde aanpak.
   Begint op dekking 0 (fill-mode "both" toont de beginstand al tijdens de
   vertraging) en op exact het punt waar de eerste helft stopte, zodat de
   overgang achter het logo niet te zien is. Op het einde rekt hij uit in de
   rijrichting en spat hij uiteen. */
@keyframes ballOut      { 0%    { opacity: 1; transform: translate(212px, 96px) scale(1); }
                          4.6%  { transform: translate(221px, 100.6px) scale(1); }
                          9.2%  { transform: translate(230.3px, 104.7px) scale(1); }
                          13.8% { transform: translate(239.7px, 108.3px) scale(1); }
                          18.4% { transform: translate(249.3px, 111.3px) scale(1); }
                          23%   { transform: translate(259.1px, 113.7px) scale(1); }
                          27.6% { transform: translate(269px, 115.6px) scale(1); }
                          32.2% { transform: translate(279.1px, 116.7px) scale(1); }
                          36.8% { transform: translate(289.2px, 117.3px) scale(1); }
                          41.4% { transform: translate(299.2px, 117.2px) scale(1); }
                          46%   { transform: translate(309.3px, 116.4px) scale(1); }
                          50.6% { transform: translate(319.3px, 115.1px) scale(1); }
                          55.2% { transform: translate(329.2px, 113.2px) scale(1); }
                          59.8% { transform: translate(339.1px, 110.8px) scale(1); }
                          64.4% { transform: translate(348.7px, 107.9px) scale(1); }
                          69%   { transform: translate(358.3px, 104.6px) scale(1); }
                          73.6% { transform: translate(368.3px, 100.6px) scale(1); }
                          78.2% { transform: translate(378.7px, 96px) scale(1.06, .97); }
                          82.8% { transform: translate(389.4px, 90.7px) scale(1.12, .93); }
                          87.4% { transform: translate(400.5px, 84.7px) scale(1.2, .88); }
                          92%   { opacity: 1; transform: translate(412px, 78px) scale(1.3, .84); }
                          100%  { opacity: 0; transform: translate(412px, 78px) scale(2.1); } }
@keyframes burstRing    { 0%  { opacity: 0; transform: scale(.25); }
                          12% { opacity: .95; }
                          100% { opacity: 0; transform: scale(3.2); } }
@keyframes sparkFly     { 0%  { opacity: 0; transform: translate(0, 0) scale(1); }
                          10% { opacity: 1; }
                          100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
/* Begint op dekking 0: met fill-mode "both" geldt de beginstand al tijdens de
   vertraging, en anders staat de ring van het eerste frame af stil in beeld. */
@keyframes splashRing   { 0% { opacity: 0; transform: scale(.4); }
                         14% { opacity: .9; }
                        100% { opacity: 0; transform: scale(2.8); } }
@keyframes dotRise      { 0% { opacity: 0; transform: translateY(0) scale(.6); }
                         25% { opacity: .9; }
                        100% { opacity: 0; transform: translateY(-32vh) scale(1.1); } }
@keyframes splashSwoosh { from { left: -45%; } to { left: 125%; } }

/* De app komt binnen terwijl de splash oplost.
   Enkel op #app zelf, dat geen eigen animatie had — er wordt dus niets
   vervangen, alleen toegevoegd. Bewust GEEN aparte animatie meer op het
   hero-logo: dat betekende zijn lopende animatie vervangen, waardoor het logo
   eerst op onzichtbaar sprong en daarna weer opkwam. Precies dat zag je als
   knipperen, want de splash was op dat moment al half doorschijnend. */
#app.arriving { animation: appIn 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes appIn { from { opacity: .3; transform: scale(.982) translateY(12px); } to { opacity: 1; transform: none; } }
/* Wie "verminder beweging" aan heeft, ziet de opening helemaal niet */
@media (prefers-reduced-motion: reduce) { .splash { display: none; } }

/* Animaties --------------------------------------------------------------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.reveal > *:nth-child(2) { animation-delay: .06s; }
.reveal > *:nth-child(3) { animation-delay: .12s; }
.reveal > *:nth-child(4) { animation-delay: .18s; }
.reveal > *:nth-child(5) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Divider / misc ---------------------------------------------------------- */
.hr { height: 1px; background: var(--line); border: 0; margin: 6px 0; }
.kpi { display: grid; gap: 2px; }
.kpi .n { font-size: 1.7rem; font-weight: 850; color: var(--navy); }
.kpi .l { font-size: .82rem; color: var(--muted); font-weight: 650; }
.list-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wizard-progress { display: flex; gap: 8px; margin-bottom: 18px; }
.wizard-progress .seg { height: 6px; border-radius: 999px; background: #dbe3ec; flex: 1; overflow: hidden; }
.wizard-progress .seg.done { background: var(--grad); }
.footer { padding: 30px 0 50px; color: var(--muted); font-size: .86rem; }
.footer a { color: var(--blue-600); }

/* ===========================================================================
   VISUELE LAAG — logo-behandeling, diepte en beweging
   Het logo is één lockup: beeldmerk (de C met bal) + woordmerk + tagline.
   Klein weergeven maakt de tekst erin onleesbaar, dus snijden we met CSS
   enkel het beeldmerk eruit voor de topbar. De volledige lockup gebruiken we
   groot — in de hero en de opening — waar ze tot haar recht komt.
   =========================================================================== */

/* Beeldmerk uitsnijden. --s = gewenste hoogte van het merk.
   Opgemeten in de bron (1254x1254): het merk staat op x 0,310–0,726 en
   y 0,191–0,546. Onderstaande waarden bevatten ± 5,5% lucht rondom. */
.mark {
  --s: 36px;
  position: relative; flex: none; overflow: hidden;
  width: calc(var(--s) * 1.168); height: var(--s);
  border-radius: 10px; background: #f6f9f8;
  box-shadow: 0 1px 3px rgba(14,42,71,.10), 0 0 0 1px rgba(14,42,71,.06);
  transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s ease;
}
.mark img { position: absolute; height: auto; width: calc(var(--s) / .3948);
  left: calc(var(--s) / .3948 * -.2874); top: calc(var(--s) / .3948 * -.171); }
.brand:hover .mark { transform: rotate(-4deg) scale(1.07); box-shadow: 0 6px 16px rgba(14,42,71,.18); }
.brand b { transition: letter-spacing .3s ease; }
.brand:hover b { letter-spacing: .4px; }

/* De volledige lockup als "app-tegel" */
.logo-tile { position: relative; z-index: 1; border-radius: 26px; overflow: hidden; background: #f6f9f8;
  box-shadow: 0 22px 55px rgba(14,42,71,.22), inset 0 0 0 1px rgba(255,255,255,.75); }
.logo-tile img { display: block; width: 100%; height: auto; }

/* Hero: logo als middelpunt, met halo en een rondlopend balletje */
.hero-logo {
  position: relative; isolation: isolate; width: clamp(200px, 44vw, 300px); margin: 0 auto 8px;
  animation: heroIn 1s cubic-bezier(.2,.9,.2,1) both, float 7s ease-in-out 1.1s infinite;
}
.hero-logo .halo { position: absolute; inset: -13%; z-index: 0; border-radius: 50%; filter: blur(30px); opacity: .5;
  background: conic-gradient(from 0turn, var(--blue), var(--green), #35b0d8, var(--blue));
  animation: spin 18s linear infinite; }
.hero-logo .orbit { position: absolute; inset: -7%; z-index: 0; animation: spin 12s linear infinite; }
.hero-logo .orbit i { position: absolute; top: -6px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 18px rgba(134,196,64,.95); }
@keyframes heroIn { from { opacity: 0; transform: scale(.86) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes spin   { to { transform: rotate(1turn); } }
@keyframes float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }

/* Achtergrond leeft traag mee (aurora) ------------------------------------ */
.blob-c { width: 34vw; height: 34vw; left: 42%; top: 34%;
  background: radial-gradient(circle at 50% 50%, #35b0d8, transparent 70%); opacity: .18; }
.blob-a { animation: drift1 28s ease-in-out infinite alternate; }
.blob-b { animation: drift2 34s ease-in-out infinite alternate; }
.blob-c { animation: drift3 40s ease-in-out infinite alternate; }
@keyframes drift1 { from { translate: 0 0; scale: 1; } to { translate: -7vw 6vh; scale: 1.18; } }
@keyframes drift2 { from { translate: 0 0; scale: 1; } to { translate: 6vw -5vh; scale: 1.12; } }
@keyframes drift3 { from { translate: 0 0; scale: .9; } to { translate: -4vw -7vh; scale: 1.2; } }

/* Kaarten: haarfijne kleurrand geeft diepte zonder lawaai ----------------- */
.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(155deg, rgba(255,255,255,.95), rgba(30,155,240,.28) 45%, rgba(134,196,64,.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-hover { transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease; }
.card-hover:hover { transform: translateY(-5px); }

/* Iconen in de landingskaarten: gradiënt-tegel die kantelt bij hover ------ */
.chip-icon { width: 48px; height: 48px; padding: 0; justify-content: center; border: 0; border-radius: 16px;
  background: var(--grad); color: #fff; box-shadow: 0 10px 24px rgba(30,155,240,.30);
  transition: transform .3s cubic-bezier(.2,.9,.2,1); }
.chip-icon svg { width: 22px; height: 22px; }
.feature:hover .chip-icon { transform: rotate(-7deg) scale(1.08); }

/* Knoppen: lichtveeg bij hover -------------------------------------------- */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); opacity: 0; }
.btn:hover::after { animation: sheen .75s ease; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 125%; opacity: 0; } }

/* Actieve tab krijgt de merkgradiënt -------------------------------------- */
.tabs button.active { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(30,155,240,.32);
  animation: tabPop .32s cubic-bezier(.2,.9,.2,1); }
@keyframes tabPop { from { transform: scale(.9); } to { transform: none; } }

/* Speeldag: gradiëntrand als jij speelt, accent op de datum --------------- */
.session { position: relative; overflow: hidden; }
.session.mine::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.datecell { position: relative; overflow: hidden; }
.datecell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.player-pill { transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s ease; }
.player-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.avatar { transition: transform .2s cubic-bezier(.2,.9,.2,1); }
.player-pill:hover .avatar { transform: scale(1.08); }

/* Standbalken lopen op ---------------------------------------------------- */
.bar > span { transform-origin: left center;
  animation: grow .9s cubic-bezier(.2,.8,.2,1) var(--d, 0ms) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Binnenkomst van lijsten en secties ------------------------------------- */
@keyframes popIn { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pop-in { animation: popIn .5s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
  /* Scroll-reveal: pas zichtbaar wanneer JS de klasse .in zet.
     Staat bewust binnen no-preference, zodat inhoud nooit onzichtbaar blijft. */
  .r-up { opacity: 0; transform: translateY(24px); }
  .r-up.in { opacity: 1; transform: none;
    transition: opacity .75s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms),
                transform .75s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms); }
}
/* ---- De trekking ------------------------------------------------------- */
.teams.drawn .reeks-kop .badge { animation: popIn .4s ease both; }
.teams.drawn { animation: popIn .4s cubic-bezier(.2,.9,.2,1) both; }
.teams { position: relative; overflow: hidden; transition: box-shadow .3s ease; }

/* Terwijl de namen rollen: het blok spant zich op en er loopt licht over */
.teams.rolling { box-shadow: 0 0 0 2px rgba(30,155,240,.40), 0 10px 34px rgba(30,155,240,.22);
  animation: rollShake 1.6s ease-in-out; }
.teams.rolling::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation: rollSweep .85s linear infinite;
}
.teams.rolling .player-pill:not(.locked) { opacity: .72; filter: blur(.3px); }
.teams.rolling .player-pill:not(.locked) .nm { color: var(--muted); }
.teams.rolling .player-pill:not(.locked) .avatar { animation: avatarSpin .45s linear infinite; }
.teams.rolling .vs { animation: vsBeat .5s ease-in-out infinite; }

/* Vastklikken: kort opblazen met een groene flits */
.player-pill.locked { animation: lockIn .5s cubic-bezier(.2,.9,.2,1) both; z-index: 1; }
@keyframes lockIn {
  0%   { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(134,196,64,.5); border-color: var(--green); }
  55%  { transform: scale(.99); box-shadow: 0 0 0 3px rgba(134,196,64,.28); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(134,196,64,0); }
}
@keyframes rollSweep  { from { left: -40%; } to { left: 110%; } }
@keyframes rollShake  { 0%, 100% { translate: 0 0; } 20% { translate: -2px 0; } 45% { translate: 2px 0; } 70% { translate: -1px 0; } }
@keyframes avatarSpin { to { transform: rotate(1turn); } }
@keyframes vsBeat     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* Toegankelijkheid: duidelijke toetsenbordfocus --------------------------- */
:focus-visible { outline: 3px solid rgba(30,155,240,.55); outline-offset: 2px; }
.nowrap { white-space: nowrap; }

/* ===========================================================================
   Responsive — dezelfde pagina past zich aan de schermbreedte aan.
   Geen toestel-detectie: die raadt verkeerd en veroudert. CourtFlow wordt
   vooral op een gsm gebruikt, dus vanaf 720px gaat alles naar één kolom,
   worden raakvlakken vingergroot en verhuist de tabbalk naar onderaan.
   =========================================================================== */
@media (max-width: 980px) {
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .container { width: min(100% - 28px, var(--maxw)); }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .section { padding: 24px 0; }
}
@media (max-width: 720px) {
  /* Vingergrote raakvlakken (richtlijn ± 44px) */
  .btn { padding: 12px 18px; min-height: 44px; }
  .btn-sm { padding: 9px 14px; min-height: 40px; font-size: .88rem; }
  .btn-lg { padding: 14px 22px; font-size: 1rem; }
  .icon-btn { width: 40px; height: 40px; }
  /* 16px voorkomt dat iOS bij het tikken in een veld inzoomt */
  input[type=text], input[type=email], input[type=password], input[type=number],
  input[type=time], input[type=date], select, textarea { font-size: 16px; padding: 13px; }
  /* Ruimte houden voor een herstelcode van 14 tekens op een smal scherm */
  .input-code { font-size: 1.2rem; letter-spacing: .18em; padding: 15px 10px; }
  /* Punten per game: op een gsm mag de rij niet uit elkaar geduwd worden door
     de 16px-invoervelden, dus smallere selects met minder ruimte ertussen. */
  .gamerij { grid-template-columns: 30px 1fr 12px 1fr; gap: 6px; }
  .gamerij select { padding: 10px 4px; font-size: 15px; }
  .seg button { padding: 10px 14px; min-height: 40px; }

  /* Kop compacter */
  .topbar .container { height: 56px; gap: 10px; }
  .topbar nav .label { display: none; }
  .mark { --s: 30px; }
  .brand b { font-size: .98rem; }
  .group-badge { max-width: 30vw; }

  /* Hero & kaarten */
  .hero { padding: 22px 0 16px; }
  .hero-logo { width: clamp(190px, 56vw, 250px); }
  .hero-actions { gap: 10px; width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .card { padding: 18px; border-radius: var(--r); }
  .card.pad-lg { padding: 20px; }

  /* Speeldag als volle kaart, knoppen op een eigen rij */
  .session { grid-template-columns: 54px 1fr; gap: 12px; padding: 14px; }
  .session .actions { grid-column: 1 / -1; }
  .session .actions .btn { flex: 1 1 auto; justify-content: center; }
  .datecell .d { font-size: 1.3rem; }
  .datecell { padding: 6px 4px; }
  .court-teams { gap: 6px; }

  /* Codes */
  .codebox { grid-template-columns: 1fr; gap: 12px; }
  .codebox .code { font-size: 1.3rem; }
  .coderow { flex-wrap: wrap; }
  .stand-row { grid-template-columns: 24px 1fr 58px 34px; gap: 8px; }
  .stat-row { grid-template-columns: 22px 1fr 46px; gap: 8px; }
  .stat-row .wlbar { grid-column: 2 / -1; }
  .setinvoer { grid-template-columns: 52px 1fr 14px 1fr; gap: 8px; }
  .step { grid-template-columns: 36px 1fr; gap: 12px; }
  .step .num { width: 36px; height: 36px; border-radius: 11px; }

  /* Tabbalk vast onderaan, binnen duimbereik */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; justify-content: space-around; gap: 0; flex-wrap: nowrap;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: rgba(255,255,255,.95); backdrop-filter: saturate(140%) blur(10px);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(14,42,71,.07);
  }
  .tabs button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    padding: 7px 2px; border-radius: 12px; font-size: .67rem; }
  .tabs button .label { font-size: .67rem; }
  .tabs svg { width: 21px; height: 21px; }
  .tabs button.active { background: var(--grad-soft); color: var(--navy); box-shadow: none; }
  /* Ruimte vrijhouden zodat de tabbalk niets bedekt */
  .footer { padding: 24px 0 calc(96px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); width: min(94vw, 440px); }
  .modal { width: 100%; max-height: 92vh; }
}