/* KOMODO — componenten. Kleur, typografie, radius, schaduw en beweging komen
   uit tokens.css (huisstijl "Varanus", zie DESIGN.md); dit bestand beschrijft
   alleen nog hoe de onderdelen eruitzien: .appbar, .mainrail, .pbtn, .seg,
   .tile, .dcard, .gcard, .panel … De variabelnamen zijn gelijk gebleven aan de
   vorige huisstijl, dus de componenten hieronder zijn ongewijzigd overgenomen. */
@import url('tokens.css');

/* ══ animaties ═══════════════════════════════════════════════════════════ */
@keyframes cardUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes mkIn{ from{scale:0; opacity:0} to{scale:1; opacity:1} }
@keyframes barIn{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes colIn{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
@keyframes lamp{ 0%,100%{opacity:1} 52%{opacity:.32} }

/* eindtoestanden moeten zonder animatie direct kloppen */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ══ paginawissel ════════════════════════════════════════════════════════
   Bewust géén view transition (@view-transition{navigation:auto}): Chrome liet
   daarmee af en toe een half getekende pagina staan (rail en kaarten weg,
   filterbalk wél). Elke navigatie is nu een gewone herlading. */

/* Niet ingelogd (geen Supabase-token in localStorage): niets tekenen tot
   requireApproved() doorstuurt naar auth.html — anders flitst de pagina even. */
html[data-auth="no"] body{visibility:hidden}
/* ══ basis ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ui);
  font-size:13.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  padding:16px 22px 76px; gap:16px;   /* onder: vrije ruimte voor de feedbackknop */
}
button{font:inherit; color:inherit; cursor:pointer}
kbd{
  font-family:var(--font-mono); font-size:11px;
  background:var(--s2); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px;
}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
/* Focus, selectie en links dragen het merkaccent (klei), niet het wedstrijdblauw:
   aka en ao horen alleen bij vechters, scores en markers. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ══ appbar + navigatie ══════════════════════════════════════════════════ */
/* De hoofdnavigatie staat in een vaste rail links (zie MAIN_NAV in cloud.js);
   de bovenbalk houdt wordmark, paginacontext, de pagina-eigen knoppen en het
   accountmenu over. Alleen ingelogde schermen hebben een rail — auth.html en
   privacy.html hebben geen .appbar en blijven op volle breedte staan. */
body:has(> .appbar){padding-left:calc(var(--rail-w) + 22px)}
.mainrail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail-w); z-index:50;
  display:flex; flex-direction:column; gap:3px; overflow-y:auto;
  background:var(--nav-bg); color:var(--nav-on);
  /* het logo staat nu in de kop van de rail, dus de bovenruimte die eerst voor
     de balkregel gereserveerd was is niet meer nodig */
  padding:16px 12px;
}
/* logo als kop van de rail: linksboven in de hoek, op één lijn met de balk */
/* Het demo-label (cloud.js zet <em class="demo">) staat op een eigen regel
   onder het logo; buiten de demo staat er niets. */
.mainrail .wordmark{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:2px 11px; margin-bottom:16px;
}
.mainrail .wordmark em{margin-left:0}
.railnew{
  display:flex; align-items:center; gap:11px; white-space:nowrap; margin:0 0 10px;
  font-size:13px; font-weight:600; color:var(--on-score); background:var(--score);
  text-decoration:none; padding:9px 11px; border-radius:10px; transition:filter .2s;
}
.railnew:hover{filter:brightness(1.06)}
.railnew svg{flex:none; transition:transform .3s ease-out}
.railnew:hover svg{transform:rotate(90deg)}
/* Elk icoontje beweegt bij zweven zoals zijn onderwerp — geen veer, gewoon
   ease-out. Selectie op href, want de iconen zijn inline SVG uit cloud.js. */
.railitem svg *{transform-box:fill-box; transform-origin:center}
.railitem[href="dashboard.html"]:hover path:nth-child(2){transform-origin:center bottom; animation:bars .5s ease-out}
@keyframes bars{ from{transform:scaleY(.15)} to{transform:scaleY(1)} }
.railitem[href="atleten.html"]:hover path:last-child{animation:twinkle .5s ease-in-out}
@keyframes twinkle{ 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.45) rotate(20deg)} }
.railitem[href="index.html"]:hover rect{animation:tile .45s ease-out both}
.railitem[href="index.html"]:hover rect:nth-child(2){animation-delay:.06s}
.railitem[href="index.html"]:hover rect:nth-child(3){animation-delay:.12s}
.railitem[href="index.html"]:hover rect:nth-child(4){animation-delay:.18s}
@keyframes tile{ from{transform:scale(.55); opacity:.3} to{transform:scale(1); opacity:1} }
.railitem[href="tegenstanders.html"]:hover path:nth-child(3),
.railitem[href="tegenstanders.html"]:hover path:nth-child(4){animation:stepin .5s ease-out}
@keyframes stepin{ from{transform:translateX(3px)} to{transform:translateX(0)} }
/* Oog-hover: knipper met ooglid en frons, eindigt in tuurstand; ontspant bij
   weggaan (eyeHover() in cloud.js zet .knipper / .tuur). Pupil alleen
   horizontaal; het oog zelf draait of schaalt niet. */
.wordmark .brow, .wordmark .pupil, .wordmark .lid{transform-box:view-box; transition:transform .9s var(--ease-soft)}
.wordmark .brow{transform-origin:50px 22px; transform:translateY(0) scaleY(1)}
.wordmark .pupil{transform-origin:50px 50px; transform:translateX(0) scaleX(1)}
.wordmark .lid{transform-origin:50px 50px; transform:translateY(-54px)}
/* tuurpose: het eindbeeld van de animatie, vastgezet vóór de terugweg */
.wordmark.tuur .brow{transform:translateY(5px) scaleY(.74)}
.wordmark.tuur .pupil{transform:translateX(0) scaleX(.84)}
.wordmark.tuur .lid{transform:translateY(-36px)}   /* -54 + 18: een derde omlaag */
.wordmark.knipper .brow{animation:oogBrow 1.3s var(--ease-soft) 1 forwards}
.wordmark.knipper .lid{animation:oogLid 1.3s var(--ease-soft) 1 forwards}
.wordmark.knipper .pupil{animation:oogPupil 1.3s var(--ease-soft) 1 forwards}
@keyframes oogLid{
  0%,14%{transform:translateY(-54px)}
  30%,42%{transform:translateY(0)}
  58%{transform:translateY(-58px)}
  72%{transform:translateY(-52px)}
  100%{transform:translateY(-36px)}
}
@keyframes oogBrow{
  0%{transform:translateY(0) scaleY(1)}
  14%{transform:translateY(2px) scaleY(.95)}
  30%,42%{transform:translateY(7px) scaleY(.66)}
  58%{transform:translateY(-3.5px) scaleY(1.08)}
  76%{transform:translateY(1px) scaleY(.96)}
  100%{transform:translateY(5px) scaleY(.74)}
}
@keyframes oogPupil{
  0%,60%{transform:translateX(0) scaleX(1)}
  70%{transform:translateX(15px) scaleX(.84)}
  80%{transform:translateX(12px) scaleX(.86)}
  94%{transform:translateX(-2px) scaleX(.84)}
  100%{transform:translateX(0) scaleX(.84)}
}
.railitem{
  display:flex; align-items:center; gap:11px; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--nav-ink); text-decoration:none;
  padding:9px 11px; border-radius:10px;
  transition:background .2s, color .2s;
}
.railitem svg{flex:none}
.railitem:hover{color:var(--nav-on); background:var(--nav-pill)}
.railitem.on{color:var(--nav-on); font-weight:600; background:var(--nav-pill)}

.appbar{
  /* Vroeger de donkere bovenbalk. Sinds september 2026 is alle navigatie in de
     rail en is dit een gewone kop in de inhoud: paginanaam links, de
     pagina-eigen knoppen rechts. Geen achtergrond, geen negatieve marges. */
  display:flex; align-items:center; justify-content:flex-end; gap:16px; flex-wrap:wrap; row-gap:10px;
  padding:4px 0 2px; min-height:40px;
}
/* Het woordmerk is een bestand, geen letterwerk: DESIGN.md schrijft paden voor,
   nooit live tekst. De bone-variant, want de rail staat op basalt. */
.wordmark{display:flex; align-items:center; white-space:nowrap}
.wordmark .logo-full{width:150px; height:auto; display:block}   /* komo-do is 8% breder dan komodo */
.wordmark .logo-mark{display:none; width:26px; height:auto}
.wordmark em{
  font-style:normal; font-family:var(--font-cond); font-variation-settings:"opsz" 12;
  font-weight:600; letter-spacing:.08em;
  font-size:11px; color:var(--nav-ink); text-transform:uppercase; margin-left:10px;
}
.appbtns{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.appbtns:empty{display:none}

/* Account-acties: eigen bak, altijd in de bovenste regel van de balk.
   'order' bepaalt bij flex-wrap ook de regelindeling, dus dit cluster komt
   vóór de pagina-eigen knoppen te staan, ongeacht de DOM-volgorde. */
/* Account: onderaan de rail (margin-top:auto duwt het naar de voet) */
.appacct{margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:3px}
/* Pagina-eigen gereedschap (analyse heeft er vier) zakt naar een eigen regel:
   een eigen balk in het paginavlak, die zich juist afzet tegen de donkere
   navigatiebalk erboven. De negatieve marges trekken hem randloos door. */
.appbtns.pagetools{
  /* flex-basis is de breedte binnen de padding; de +44px maakt samen met de
     negatieve marges een balk die randloos doorloopt tot beide zijkanten */
  flex:1; justify-content:flex-end;
}
.appbtns.pagetools:empty{display:none}

/* paginacontext naast de wordmark: op welk scherm sta je */
/* paginacontext: nu het logo in de rail staat is dit het eerste in de balk,
   dus zonder scheidingslijntje ervoor */
.pagename{
  font-family:var(--font-display); font-variation-settings:"opsz" 96;
  font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--ink); white-space:nowrap;
  margin-right:auto;
}
.themesw button{padding:7px 11px; display:inline-flex; align-items:center}

/* Accountmenu: één avatarknop in de balk, de rest zit in het uitklapmenu.
   Het menu staat op het paginavlak (--surface), niet op de donkere balk — de
   taal- en themakiezer krijgen daarbinnen dus hun gewone lichte stijl terug. */
.acctmenu{position:relative}
.avatar{
  width:100%; border:0; border-radius:10px; padding:6px 7px; text-align:left;
  background:none; color:var(--nav-on); cursor:pointer;
  display:flex; align-items:center; gap:9px;
  transition:background .2s;
}
.avatar .ini{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--nav-btn);
  font-size:12px; font-weight:700; letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center;
}
.avatar .who{display:flex; flex-direction:column; gap:1px; min-width:0; font-size:13px; font-weight:500; color:var(--nav-ink)}
.avatar .who > *{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar .who small{font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--nav-ink); opacity:.75}
.avatar:hover, .acctmenu.open .avatar{background:var(--nav-pill)}
.acctpop{
  /* fixed, niet absolute: de rail scrollt (overflow-y:auto) en zou het menu
     anders afsnijden op zijn rechterrand. Het menu klapt rechts naast de rail uit. */
  position:fixed; left:calc(var(--rail-w) + 8px); bottom:16px; z-index:60;
  min-width:232px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-card); box-shadow:var(--shadow); padding:8px;
  /* Dicht: onzichtbaar én buiten de tabvolgorde (visibility, niet display —
     display kan niet overgangen). De visibility wacht op het einde van de
     beweging bij het sluiten en schakelt direct bij het openen. */
  opacity:0; visibility:hidden; transform:translateX(-6px) scale(.97);
  transform-origin:bottom left;
  transition:opacity .16s var(--ease-soft), transform .2s var(--ease-pop), visibility 0s .2s;
}
/* onzichtbare brug over het gaatje tussen avatar en menu: zonder deze strook
   raakt de muis onderweg naar beneden even "buiten" het menu */
.acctpop::before{content:""; position:absolute; left:0; right:0; bottom:-9px; height:9px}
.acctmenu.open .acctpop{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .16s var(--ease-soft), transform .2s var(--ease-pop), visibility 0s;
}
.acctwho{
  display:flex; flex-direction:column; padding:5px 10px 10px;
  border-bottom:1px solid var(--line); margin-bottom:5px;
}
.acctwho b{font-size:13px; font-weight:600}
.acctwho span{font-size:11.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctitem{
  font-size:13px; font-weight:500; color:var(--ink2); text-decoration:none; text-align:left;
  background:none; border:0; border-radius:9px; padding:8px 10px;
  transition:background .2s, color .2s;
}
.acctitem:hover{color:var(--ink); background:var(--s2)}
/* taal en licht/donker naast elkaar op één regel: twee segmented controls */
.acctrow{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 4px 8px; margin:3px 0; border-bottom:1px solid var(--line);
}
/* alleen op het donkere balk-/railvlak; in het menu staat de gewone focusring goed */
.railitem:focus-visible, .avatar:focus-visible{outline-color:var(--nav-on)}

/* knop met icoon + label; actief = het venster staat open */
.pagetools .abtn.hasicon{gap:7px}
.pagetools .abtn.hasicon svg{flex:none}
.abtn.iconly{padding-inline:9px}
.pagetools .abtn.on{background:var(--score); border-color:var(--score); color:var(--on-score)}
.pagetools .abtn.on:hover{background:var(--score); border-color:var(--score); color:var(--on-score); filter:brightness(1.05)}

/* ══ knoppen ═════════════════════════════════════════════════════════════ */
/* primair = bevestigen (inkt); accent = toevoegen (--score) */
.pbtn{
  /* zijpadding hoort bij de knop zelf: los in een formulier (Uitnodigen) of
     lege staat plakte de tekst anders tegen de rand. In actierijen vult
     flex:1 de breedte alsnog. */
  flex:1; text-align:center; font-size:13px; font-weight:700; line-height:1.3;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  border-radius:var(--r-btn); padding:10px 18px;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  transition:filter .18s, transform .1s;
}
.pbtn:hover{filter:brightness(1.15)}
html[data-theme="light"] .pbtn:hover, :root:not([data-theme]) .pbtn:hover{filter:brightness(1.9)}
.pbtn:active{transform:scale(.985)}
.pbtn.ghost{
  background:var(--s2); color:var(--ink); border:1px solid var(--line); font-weight:600;
}
.pbtn.ghost:hover{filter:none; background:var(--s3)}
.pbtn.danger{flex:0 0 46px; background:var(--s2); border-color:var(--line); color:var(--ink2)}
.pbtn.danger:hover{filter:none; background:var(--aka); border-color:var(--aka); color:#fff}
.savestate{font-family:var(--font-mono); font-size:11.5px; color:var(--ink3); align-self:center; white-space:nowrap}
.pbtn.slim{flex:0 0 auto; padding:9px 15px; font-size:13px; text-decoration:none; display:inline-block}

/* toevoeg-acties dragen de accentkleur */
#btnNew, #btnNew2, #btnNewGoal, #btnNewGoal2{
  background:var(--score); border-color:var(--score); color:var(--on-score); font-weight:600;
}
#btnNew:hover, #btnNew2:hover, #btnNewGoal:hover, #btnNewGoal2:hover{filter:brightness(1.06)}

.abtn{
  font-size:12.5px; font-weight:600; background:var(--s2); border:1px solid var(--line);
  border-radius:10px; padding:8px 13px; color:var(--ink2); text-decoration:none;
  display:inline-flex; align-items:center;
  transition:background .2s, border-color .2s, color .2s;
}
.abtn:hover{color:var(--ink); background:var(--s3); border-color:var(--line)}
.abtn.del:hover{color:var(--aka); border-color:var(--aka); background:var(--aka-soft)}

/* ══ segmented controls ══════════════════════════════════════════════════ */
/* één patroon voor .seg, .modeseg, .viewtoggle, .langsw, .stepgroup */
.seg, .modeseg, .viewtoggle, .langsw, .stepgroup, .themesw{
  display:inline-flex; background:var(--s2); border:0; border-radius:var(--r-btn);
  padding:3px; gap:2px; overflow:visible;
}
.seg button, .modeseg button, .viewtoggle button, .viewtoggle a, .langsw .langbtn,
.stepgroup .tbtn, .themesw button{
  text-align:center; font-size:12.5px; font-weight:600; white-space:nowrap;
  color:var(--ink3); background:transparent; border:0;
  border-radius:var(--r-seg); padding:7px 13px;
  transition:background .2s, color .2s, box-shadow .2s;
}
/* alleen de AKA/AO-schakelaar vult de volle breedte */
.seg button{flex:1}
.seg button:hover, .modeseg button:not(.on):hover, .viewtoggle button:not(.on):hover, .viewtoggle a:hover,
.langsw .langbtn:not(.on):hover, .themesw button:not(.on):hover{color:var(--ink)}
/* actieve segment-knop: opgetild wit vlak */
.modeseg button.on, .viewtoggle button.on, .viewtoggle a.on, .langsw .langbtn.on,
.themesw button.on, .seg.kind button.on{
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-seg);
}
/* aka/ao-segment draagt de vechterkleur */
.seg button.on-aka{background:var(--aka); color:var(--on-fighter)}
.seg button.on-ao{background:var(--ao); color:var(--on-fighter)}

/* ══ kaarten & panelen ═══════════════════════════════════════════════════ */
.tile, .dcard, .mcard, .gcard, .panel, .insight, .goal, .opprow, .aadmin,
.authcard, .emptystate, .timeline, .scorebar{
  background:var(--surface); border:0; border-radius:var(--r-card);
  box-shadow:var(--shadow);
}
.page-doc{display:block}
.page-doc .appbar{margin-bottom:22px}

/* gestaggerde binnenkomst voor kaartroosters */
.dash.enter > *, .matchgrid.enter > *, .matchlist.enter > *, .goalgrid.enter > *, .insights.enter > *{
  animation:cardUp .5s both;
}
.dash.enter > *:nth-child(1), .matchgrid.enter > *:nth-child(1), .matchlist.enter > *:nth-child(1), .goalgrid.enter > *:nth-child(1){animation-delay:.04s}
.dash.enter > *:nth-child(2), .matchgrid.enter > *:nth-child(2), .matchlist.enter > *:nth-child(2), .goalgrid.enter > *:nth-child(2){animation-delay:.11s}
.dash.enter > *:nth-child(3), .matchgrid.enter > *:nth-child(3), .matchlist.enter > *:nth-child(3), .goalgrid.enter > *:nth-child(3){animation-delay:.18s}
.dash.enter > *:nth-child(n+4), .matchgrid.enter > *:nth-child(n+4), .matchlist.enter > *:nth-child(n+4), .goalgrid.enter > *:nth-child(n+4){animation-delay:.25s}

/* ══ bibliotheek ═════════════════════════════════════════════════════════ */
.library{width:100%}  /* geen maximum: de kaarten vullen het scherm */
.libbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.libbar .viewtoggle{margin-left:auto}
/* zoekveld in de bibliotheekbalk — leunt op .filt voor de omlijsting */
.filt.srch{gap:6px}
.filt input[type="search"]{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  background:transparent; border:0; padding:0; width:210px; max-width:42vw; min-width:0;
}
.filt input[type="search"]::placeholder{font-weight:400; color:var(--ink3)}

/* De selectiebalk in de analyse plakt boven een scrollend paneel; hier zweeft
   hij onderaan de pagina en schuift hij in zodra er iets geselecteerd is —
   zo verspringt de lijst niet meer bij het aanvinken. */
.library .selbar{
  /* midden van het paginavlak, niet van het venster: de rail telt niet mee */
  position:fixed; left:calc(50% + var(--rail-w) / 2); top:auto; bottom:22px; z-index:95; margin:0;
  width:max-content; max-width:760px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn);
  box-shadow:var(--shadow-hover); padding:9px 11px;
  transform:translate(-50%, calc(100% + 34px)); visibility:hidden;
  /* visibility pas ná het uitschuiven omzetten, en meteen bij het inschuiven */
  transition:transform .22s var(--ease-soft), visibility 0s .22s;
}
.library .selbar.on{
  transform:translate(-50%, 0); visibility:visible;
  transition:transform .22s var(--ease-soft), visibility 0s;
}
.library .selcount{flex:none; margin-right:5px}
.library .selhint{font-size:11.5px; color:var(--ink3); margin-right:6px}
/* selectiestand: kaarten zijn keuzevakjes, geen links; tekst niet meeslepen */
#list.selecting{user-select:none}
#list.selecting .gcard, #list.selecting .mcard{cursor:default}
#list.selecting .mpick{opacity:1}
#btnLibMode.on{background:var(--score); border-color:var(--score); color:var(--on-score)}
.marquee{position:fixed; z-index:90; pointer-events:none; border:1px solid var(--accent); background:var(--accent-soft); border-radius:4px}
/* linksonder zit de feedbackknop, rechtsonder de toast: op smal scherm erboven,
   en dan over de volle breedte zodat hij nooit buiten beeld valt */
@media (max-width:760px){
  .library .selbar{
    bottom:66px; left:14px; right:14px; width:auto; max-width:none;
    transform:translateY(calc(100% + 80px));
  }
  .library .selbar.on{transform:translateY(0)}
  .library .selcount{flex:1}
}

/* selectievakje op een wedstrijdkaart — secundair, dus pas bij hover in beeld
   (en zichtbaar blijven zodra hij aanstaat; op touch altijd zichtbaar) */
.mpick{
  width:17px; height:17px; margin:0; flex:none; cursor:pointer;
  accent-color:var(--ink);
  opacity:0; transition:opacity .15s;
}
.gcard:hover .mpick, .mcard:hover .mpick,
.mpick:checked, .mpick:focus-visible{opacity:1}
@media (hover:none){ .mpick{opacity:1} }
/* in het raster ligt hij op de still, tegenover de W/L-lamp — de donkere
   omranding houdt hem zichtbaar op een lichte videostill. De ⋯-knop houdt de
   hoek bezet, dus hij schuift daar een stukje naar links. */
.gthumb .mpick{
  position:absolute; top:9px; right:36px; z-index:2;
  border-radius:3px; box-shadow:0 0 0 3px rgba(0,0,0,.45);
}

/* ⋯-menu per kaart: verwijderen zit hier, niet als vaste knop op de kaart */
.cmenu{position:relative; flex:none; display:inline-flex}
.cmbtn{
  width:26px; height:26px; padding:0; line-height:1; font-size:15px; font-weight:700;
  display:grid; place-items:center; border:0; border-radius:8px;
  background:transparent; color:var(--ink3); transition:background .15s, color .15s;
}
.cmbtn:hover, .cmbtn[aria-expanded="true"]{background:var(--s3); color:var(--ink)}
.gthumb .cmenu{position:absolute; top:9px; right:9px; z-index:3}
.gthumb .cmbtn{
  background:rgba(0,0,0,.55); color:#fff;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.gthumb .cmbtn:hover, .gthumb .cmbtn[aria-expanded="true"]{background:rgba(0,0,0,.8); color:#fff}
.cmpop{
  position:absolute; top:calc(100% + 6px); right:0; z-index:5; min-width:132px;
  display:flex; flex-direction:column; padding:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-hover);
}
/* een kaart met open menu hoort boven zijn buren te liggen */
.gcard:has(.cmpop:not([hidden])), .mcard:has(.cmpop:not([hidden])){position:relative; z-index:6}
.cmitem{
  text-align:left; font-size:12.5px; font-weight:600; color:var(--aka);
  background:transparent; border:0; border-radius:7px; padding:7px 10px;
}
.cmitem:hover{background:var(--aka-soft)}
/* geselecteerd = neutrale ring, net als een geselecteerde marker in de analyse */
.gcard.picked, .mcard.picked{box-shadow:0 0 0 2px var(--ink), var(--shadow)}
.matchgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:16px}
.gcard{
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform .2s var(--ease-soft), box-shadow .2s;
}
.gcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover)}
.gthumb{position:relative; aspect-ratio:16/9; background:#07090B}
.gthumb img{width:100%; height:100%; object-fit:cover; display:block}
.gthumb .badge{position:absolute; top:10px; left:10px}
/* score-overlay rechtsonder op de still */
.gthumb .gscore{
  position:absolute; bottom:10px; right:10px;
  font-family:var(--font-mono); font-size:15px; font-weight:600; color:#fff;
  background:rgba(0,0,0,.55); border-radius:8px; padding:3px 10px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.gthumb.file{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:rgba(237,241,244,.72)}
.gthumb.file span{font-size:26px}
.gthumb.file i{font-style:normal; font-size:11px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gbody{padding:13px 15px 15px; display:flex; flex-direction:column; gap:5px; flex:1}
.gbody .mnames{font-size:14.5px; gap:6px}
.gbody .mnames .vs{color:var(--ink3); font-weight:400}
.gmeta2{font-size:12px; color:var(--ink2); display:flex; justify-content:space-between; gap:8px}
.gtags{font-family:var(--font-mono); font-size:11.5px; color:var(--ink3); margin-top:auto}

.matchlist{display:flex; flex-direction:column; gap:14px}
.mcard{
  padding:16px 20px; cursor:pointer;
  transition:transform .2s var(--ease-soft), box-shadow .2s;
}
.mcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover)}
.mrow1{display:flex; align-items:center; gap:13px}
.badge{
  flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--on-fighter);
}
.badge.w{background:var(--good)}
.badge.l{background:var(--aka)}
.badge.e{background:var(--s3); color:var(--ink2)}
.mnames{font-size:15px; font-weight:600; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.mnames .ownname{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
.mscore{font-family:var(--font-mono); font-size:15px; font-weight:600}
.mtags{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--ink3)}
.mrow2{display:flex; justify-content:space-between; gap:12px; color:var(--ink2); font-size:12.5px; margin:8px 0 0; padding-left:41px}
.mdate{font-family:var(--font-mono); font-size:12px; color:var(--ink3)}
.muploader{font-size:12px; color:var(--ink3); margin-left:auto}
.gmeta2 + .muploader{font-size:11.5px; margin-left:0}
.mrow3{display:flex; gap:9px; padding-left:41px}
.fieldhint{font-size:12px; color:var(--ink3); margin:0}
.fieldhint a{color:var(--accent-ink)}

#noMatch{margin:60px auto}
.emptystate{padding:34px 32px; max-width:580px}
.emptystate h2{font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px}
.emptystate p{color:var(--ink2); margin:0 0 20px; font-size:13.5px}
.rowbtns{display:flex; gap:10px}
.rowbtns .pbtn{flex:0 0 auto; padding:10px 18px; text-decoration:none}
fieldset.gated{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; transition:opacity .2s; min-width:0}
fieldset.gated:disabled{opacity:.4; pointer-events:none}

/* ══ dashboard ═══════════════════════════════════════════════════════════ */
.dashpage{max-width:1080px; width:100%}
.filters{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.filtrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.filt{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; background:var(--s2); border:1px solid var(--line); border-radius:10px;
  padding:7px 11px; color:var(--ink3);
}
.filt select{font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); background:transparent; border:0; cursor:pointer}
.filt select option{background:var(--surface); color:var(--ink)}
/* filterchip: compact label + select; hij licht op zodra hij écht iets filtert */
.filt.chip{gap:6px; padding:5px 9px}
.filt.chip .cl{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3);
}
.filt.chip.on{border-color:var(--ink); background:var(--surface)}
.filt.chip.on .cl{color:var(--ink2)}
.filt.chip select:disabled{color:var(--ink3); cursor:default}
.filtclear{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink3); background:transparent; border:none; cursor:pointer; padding:0 4px;
}
.filtclear:hover{color:var(--ink)}
.filtright{display:flex; gap:10px; align-items:center; margin-left:auto}

.scouthead{display:flex; align-items:center; gap:11px; margin:-4px 0 16px}
.scoutpill{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--on-score); background:var(--score);
  border-radius:var(--r-chip); padding:3px 11px;
}
.scouthead b{font-size:19px; font-weight:600; letter-spacing:-.01em}
.scoutsub{font-size:12.5px; color:var(--ink3)}

.dash{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.tile{grid-column:span 3; padding:16px 18px}
.tile .k{
  font-family:var(--font-cond); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); margin:0;
}
.tile .v{
  font-family:var(--font-mono); font-size:32px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:7px 0 0; line-height:1.05;
}
/* hiërarchie: winrate is de kop-KPI en krijgt de grote waarde, de rest is secundair */
.tile.hero .v{font-size:44px}
.tile:not(.hero) .v{font-size:26px}
.tile .d{font-size:11.5px; color:var(--ink2); margin:5px 0 0}
/* delta t.o.v. de vorige periode: groen = vooruitgang, rood = achteruitgang */
.tile .dlt{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:5px 0 0; font-size:11.5px}
.tile .dlt[hidden]{display:none}
.tile .dv{font-family:var(--font-mono); font-weight:500; color:var(--ink3)}
.tile .dv.up{color:var(--good)}
.tile .dv.down{color:var(--aka)}
.tile .dref{color:var(--ink3)}
.dcard{padding:19px 21px}
.dcard h4{margin:0 0 2px; font-size:15px; font-weight:600; letter-spacing:-.005em}
.dcard .sub{font-size:12.5px; color:var(--ink3); margin:0 0 15px}
.span6{grid-column:span 6} .span4{grid-column:span 4} .span8{grid-column:span 8} .span12{grid-column:span 12}

/* horizontale balken: label + waarde boven de balk, pill-track eronder */
.hbar{display:grid; grid-template-columns:170px 1fr 34px; align-items:center; gap:12px; margin:11px 0}
.hbar .l{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hbar .track{height:8px; background:var(--s2); border-radius:var(--r-chip); position:relative; display:block; overflow:hidden}
.hbar .fill{
  position:absolute; inset:0 auto 0 0; border-radius:var(--r-chip); background:var(--ao);
  transform-origin:left center; animation:barIn .55s var(--ease-soft) both .1s;
}
.hbar .fill.tegen{background:var(--aka)}
.hbar .v{font-family:var(--font-mono); font-size:13px; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink2)}
.hbar.eff{grid-template-columns:170px 1fr 92px}
.hbar.eff .v{font-size:12px}
.hbar.eff.lowdata .fill{opacity:.4}
.hbar.eff.lowdata .v{color:var(--ink3)}

.histo{display:flex; align-items:flex-end; gap:13px; height:104px; padding:16px 2px 0}
.bucket{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%}
.bar{
  width:13px; border-radius:var(--r-chip); position:relative;
  transform-origin:bottom center; animation:colIn .55s var(--ease-soft) both .1s;
}
.bar.voor{background:var(--ao)} .bar.tegen{background:var(--aka)}
.bar .bl{
  position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink3);
}
.histo-x{display:flex; gap:13px; padding:9px 2px 0; border-top:1px solid var(--line); margin-top:6px}
.histo-x span{flex:1; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--ink3)}
.legend{display:flex; gap:14px; font-size:12px; color:var(--ink2); margin-top:12px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px}
.legend .lv{background:var(--ao)} .legend .lt{background:var(--aka)}

.zonesrow{display:flex; align-items:center; gap:18px}
.heat-legend{display:flex; flex-direction:column; gap:7px; font-size:12.5px; color:var(--ink2); flex:1}
.heat-legend .row{display:flex; justify-content:space-between; gap:10px}
.heat-legend .row b{font-family:var(--font-mono); font-weight:600; color:var(--ink)}
.heat-legend .row.top{border-top:1px solid var(--line); padding-top:7px}

.ladder{display:flex; gap:10px; flex-wrap:wrap}
.rung{flex:1 1 84px; min-width:0; background:var(--s2); border:0; border-radius:var(--r-card); padding:12px 10px; text-align:center}
.rung .n{font-family:var(--font-mono); font-size:22px; font-weight:500; margin:0; letter-spacing:-.02em}
.rung .t{
  font-family:var(--font-cond); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; margin:3px 0 0;
}

.h2hrow{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:13px}
.h2hrow:first-child{border-top:0}
.h2hrow .sub{font-size:12px; color:var(--ink3)}
.h2hrow .right{margin-left:auto}

.insights{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.insight{padding:15px 17px; font-size:13px; color:var(--ink2)}
.insight .cat{
  display:block; margin-bottom:5px;
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3);
}
.insight p{margin:0; color:var(--ink)}

/* ══ doelen ══════════════════════════════════════════════════════════════ */
.goalspage{max-width:900px; width:100%}
.goalgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px}
.goal{display:flex; flex-direction:column; gap:13px; padding:18px 19px; transition:transform .2s var(--ease-soft), box-shadow .2s}
.goal:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover)}
/* statuskleur van de kaart: op koers · behaald · achterstand */
.goal{--st:var(--ao); --st-text:#1F63B4}
.goal.st-ok{--st:var(--good); --st-text:#1F7A46}
.goal.st-behind{--st:var(--warn); --st-text:#8A6110}
.goal.st-none{--st:var(--ink3); --st-text:var(--ink3)}
.goal.free{--st:var(--good); --st-text:var(--ink3)}
/* in donker zijn de heldere tokens al contrastrijk genoeg */
@media (prefers-color-scheme: dark){ .goal{--st-text:var(--st)} }
html[data-theme="dark"] .goal{--st-text:var(--st)}
html[data-theme="light"] .goal{--st-text:#1F63B4}
html[data-theme="light"] .goal.st-ok{--st-text:#1F7A46}
html[data-theme="light"] .goal.st-behind{--st-text:#8A6110}
html[data-theme="light"] .goal.st-none, html[data-theme="light"] .goal.free{--st-text:var(--ink3)}
.ghead{display:flex; flex-direction:column; gap:5px}
.ghead b{font-size:15px; font-weight:600; line-height:1.25; text-wrap:pretty}
.gtop{display:flex; align-items:center; gap:8px}
.glamp{width:8px; height:8px; border-radius:50%; background:var(--st); flex:none}
.gstatus{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--st-text);
}
.gkicker{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink3);
}
.gath{margin-left:auto; font-size:12px; color:var(--ink3)}
.gval{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.gnow{
  font-family:var(--font-mono); font-size:32px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;
}
.gtarget{font-size:12.5px; color:var(--ink3)}
.gsub{font-size:12px; color:var(--ink3)}
.gprog{height:8px; background:var(--s2); border-radius:var(--r-chip); position:relative; overflow:hidden}
.gfill{
  position:absolute; inset:0 auto 0 0; border-radius:var(--r-chip); background:var(--st);
  transform-origin:left center; animation:barIn .55s var(--ease-soft) both .12s;
}
.gtrend{font-size:11.5px; color:var(--ink3)}
.gdl{font-family:var(--font-mono); font-size:11.5px; color:var(--ink3)}
.gmeta{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--ink3)}
.gmeta .mono{font-size:11.5px; font-family:var(--font-mono)}
.gchecks{display:flex; flex-direction:column; gap:8px}
.check{display:flex; gap:9px; font-size:13px; align-items:center; background:none; border:0; padding:1px 0; text-align:left; color:var(--ink)}
.check i{
  flex:0 0 18px; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line);
  display:inline-grid; place-items:center; background:var(--surface);
  transition:background .2s, border-color .2s;
}
.check.done i{background:var(--good); border-color:var(--good)}
.check.done i::after{content:"✓"; color:var(--on-fighter); font-size:11px; font-weight:700; line-height:1}
.check.done span{color:var(--ink3); text-decoration:line-through}
.gfoot{display:flex; align-items:center; gap:12px; margin-top:auto; border-top:1px solid var(--line); padding-top:11px}
.gfoot .gdl{margin-left:auto}
.gfoot .abtn{padding:5px 11px; font-size:11.5px}

/* ══ analyse: scorebalk ══════════════════════════════════════════════════ */
.ana{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; flex:1; min-height:0; align-items:start}
.left{min-width:0; display:flex; flex-direction:column; gap:14px}

.scorebar{display:flex; align-items:center; gap:16px; padding:14px 20px; flex-wrap:wrap}
.fighter{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600}
.fighter i{width:11px; height:11px; border-radius:4px; flex:none}
.fighter.aka i{background:var(--aka)} .fighter.ao i{background:var(--ao)}
.score{
  font-family:var(--font-mono); font-size:30px; font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  transition:transform .25s, color .25s;
}
.score.sep{font-size:22px; color:var(--ink3)}
.senshu{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-score); background:var(--score);
  border:0; border-radius:var(--r-chip); padding:3px 11px;
}
.clock{font-family:var(--font-mono); font-size:18px; font-weight:500; margin-left:auto; color:var(--ink2)}
.matchmeta{text-align:right; font-size:13px; color:var(--ink3); line-height:1.35}
.scorebar .provtag{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--on-score); background:var(--score);
  border-radius:var(--r-chip); padding:3px 10px;
}
.scorebar.provisional .score{opacity:.72; font-style:italic}

/* ══ analyse: video ══════════════════════════════════════════════════════ */
.videowrap{
  /* balk + scorebalk + transport + tijdlijn ≈ 380px: de video krijgt de rest */
  position:relative; width:100%; aspect-ratio:16/9; max-height:max(240px, calc(100vh - 380px));
  background:#07090B; border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--shadow);
}
.videowrap iframe{position:absolute; inset:0; width:100%; height:100%}
.filevideo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.dropzone{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  color:#EDF1F4; font-size:13.5px; cursor:pointer; line-height:1.55;
}
.dropzone b{font-size:15px}
.dropzone span{color:rgba(237,241,244,.72); font-size:12.5px}
.dropzone.hover{outline:2px dashed #EDF1F4; outline-offset:-12px}
.aiprogress{
  position:absolute; left:14px; right:14px; bottom:12px; height:6px;
  background:rgba(255,255,255,.25); border-radius:var(--r-chip); overflow:hidden;
}
.aiprogress i{display:block; height:100%; width:0%; background:var(--score); transition:width .2s}

/* ══ analyse: transport ══════════════════════════════════════════════════ */
.transport{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.tbtn{
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  background:var(--s2); border:0; border-radius:10px; padding:8px 12px; color:var(--ink2);
  transition:background .2s, color .2s;
}
.tbtn:hover{background:var(--s3); color:var(--ink)}
.stepgroup{flex-wrap:wrap; justify-content:center; align-items:center}
.stepgroup .tbtn.step{
  background:transparent; padding:7px 12px; font-size:14px; font-weight:600; color:var(--ink2);
}
.stepgroup .tbtn.step:hover{background:var(--s3)}
.tbtn.play2{
  font-family:var(--font-ui); font-size:13px; font-weight:600;
  background:var(--ink); color:var(--bg); border-radius:var(--r-seg); padding:7px 18px;
}
.tbtn.play2:hover{background:var(--ink); filter:brightness(1.15)}
html[data-theme="light"] .tbtn.play2:hover, :root:not([data-theme]) .tbtn.play2:hover{filter:brightness(1.9)}
/* dropdowns in het transport: stapgrootte en snelheid — rustig, secundair */
.tsel{
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--ink2);
  background:var(--s2); border:0; border-radius:var(--r-seg); padding:7px 9px; cursor:pointer;
}
.stepgroup .tsel{background:transparent}
.tsel:hover{background:var(--s3); color:var(--ink)}
.speedsel{margin-left:auto}
/* markerknoppen = de kernhandeling: groter en primair, met de sneltoets erin */
.markbtns{display:flex; gap:10px}
.tbtn.mk-a, .tbtn.mk-b{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-size:15px; font-weight:700; color:var(--on-fighter);
  border-radius:var(--r-btn); padding:12px 18px; box-shadow:var(--shadow);
}
/* currentColor i.p.v. een vaste tint: --on-fighter is licht in het lichte thema
   en donker in het donkere, en de keycap moet in beide leesbaar blijven */
.tbtn.mk-a kbd, .tbtn.mk-b kbd{
  font-size:11px; font-weight:700; color:inherit; opacity:.85;
  background:transparent; border:1px solid currentColor; padding:1px 7px;
}
.tbtn.mk-a{background:var(--aka)} .tbtn.mk-b{background:var(--ao)}
.tbtn.mk-a:hover, .tbtn.mk-b:hover{filter:brightness(1.07); color:var(--on-fighter)}
.markernav{display:flex; gap:6px}
.inoutbtns{display:flex; gap:6px}
.tbtn.io{font-weight:600; padding:6px 10px}
.aibtn{font-family:var(--font-ui); font-weight:600}
.aibtn:not(:disabled){color:var(--ao)}
.aibtn:not(:disabled):hover{background:var(--ao-soft); color:var(--ao)}

/* ══ analyse: tijdlijn ═══════════════════════════════════════════════════ */
.timeline{padding:16px 18px}
.tl-scroll{overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:2px}
.tl-scroll::-webkit-scrollbar{height:7px}
.tl-scroll::-webkit-scrollbar-thumb{background:var(--s3); border-radius:var(--r-chip)}
.tl-inner{width:100%; min-width:100%}
.zoomhint{font-size:11.5px; color:var(--ink3)}
.tl-track{
  position:relative; height:40px; background:var(--s2); border:0;
  border-radius:var(--r-track); cursor:ew-resize; touch-action:none;
}
.tl-track.scrubbing{cursor:grabbing}
.mk{
  position:absolute; top:50%; width:13px; height:13px; border-radius:50%;
  translate:-50% -50%; border:2.5px solid var(--surface); cursor:pointer; padding:0;
  box-shadow:var(--shadow-mk);
  transition:width .18s var(--ease-pop), height .18s var(--ease-pop);
}
.mk.a{background:var(--aka)} .mk.b{background:var(--ao)}
.mk.raw.a{background:var(--surface); border:2.5px solid var(--aka)}
.mk.raw.b{background:var(--surface); border:2.5px solid var(--ao)}
.mk.n{background:var(--s3)}
.mk.sug{background:var(--surface); border:2px dashed var(--ink3)}
/* alleen een nieuw geplaatste marker komt binnen met de pop-animatie */
.mk.isnew{animation:mkIn .42s var(--ease-pop) both}
.mk.scored{outline:2px solid var(--score); outline-offset:1.5px}
/* aangevinkt in de lijst rechts — ring, want de outline is al bezet */
.mk.picked{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent), var(--shadow-mk)}
/* Geopend in het paneel is een bedieningsstaat, geen uitslag: groter plus een
   neutrale inkt-ring, ruim búiten de amber score-ring zodat beide leesbaar
   blijven. Amber blijft daarmee uitsluitend "deze actie leverde een punt op". */
.mk.active{
  width:17px; height:17px; z-index:2;
  box-shadow:0 0 0 4px var(--surface), 0 0 0 6px var(--ink), var(--shadow-mk);
}
/* geopend én aangevinkt: de ring draagt dan de aanvink-kleur */
.mk.picked.active{box-shadow:0 0 0 4px var(--surface), 0 0 0 6px var(--accent), var(--shadow-mk)}
.mk:focus-visible{outline:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent), var(--shadow-mk); z-index:3}
/* straf-markers als ruit */
.mk.pen{border-radius:3px; width:11px; height:11px; rotate:45deg}
.mk .vrflag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; border:1px solid var(--surface)}
.mk .vrflag.success{background:var(--good)} .mk .vrflag.fail{background:var(--ink3)}
.playhead{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--score); border-radius:1px; pointer-events:none; transition:left .05s linear}
.tl-labels{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; font-weight:500; color:var(--ink3); margin-top:7px}

.tl-legend{display:flex; gap:14px; font-size:12px; color:var(--ink2); margin-top:12px; align-items:center; flex-wrap:wrap}
.tl-legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.tl-legend .la{background:var(--aka)} .tl-legend .lb{background:var(--ao)}
.tl-legend .lh{background:transparent; border:2px solid var(--ink3); width:7px; height:7px}
.tl-legend .lp{background:transparent; outline:2px solid var(--score); outline-offset:1px}
.tl-legend .lpen{background:var(--ink2); width:7px; height:7px; border-radius:2px; transform:rotate(45deg)}
.tl-legend .lvr{background:var(--good); width:7px; height:7px}
.tl-legend .right{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; font-weight:500; color:var(--ink3)}
.tl-legend .flabel{color:var(--ink3); margin-right:-8px}
.tl-legend .lfilter{
  font:inherit; font-size:12px; color:var(--ink2); background:var(--s2);
  border:1px solid var(--line); border-radius:var(--r-chip); padding:4px 11px; cursor:pointer;
  display:inline-flex; align-items:center; transition:background .2s, border-color .2s, color .2s;
}
.tl-legend .lfilter:hover{background:var(--s3)}
.tl-legend .lfilter.on[data-filter="aka"]{border-color:var(--aka); background:var(--aka-soft); color:var(--ink)}
.tl-legend .lfilter.on[data-filter="ao"]{border-color:var(--ao); background:var(--ao-soft); color:var(--ink)}
.tl-legend .fsep{color:var(--line); margin:0 -12px}
.tl-legend .lfilter-type{
  font:inherit; font-size:12px; color:var(--ink3); background:transparent;
  border:none; border-radius:0; padding:2px 0; cursor:pointer; margin:0 8px;
  display:inline-flex; align-items:center; gap:5px;
}
.tl-legend .lfilter-type:hover{color:var(--ink2)}
.tl-legend .lfilter-type.on{color:var(--ink); font-weight:600}
.tl-legend .lfilter-type i{margin:0; width:8px; height:8px}
.tl-legend .lfilter-reset{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink3); background:transparent; border:none; cursor:pointer; padding:0;
}
.tl-legend .lfilter-reset:hover{color:var(--ink)}

/* minimap: hele video met het partij-segment gemarkeerd */
.tl-map{
  position:relative; height:16px; background:var(--s2); border:0;
  border-radius:var(--r-chip); margin-bottom:10px; cursor:pointer; overflow:hidden;
}
.tl-map:hover{background:var(--s3)}
.tl-map-seg{position:absolute; top:0; bottom:0; background:var(--score-soft); border-radius:var(--r-chip)}
.tl-map-ph{position:absolute; top:0; bottom:0; width:2px; background:var(--score); pointer-events:none}
.tl-map-lab{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:9.5px; color:var(--ink2);
  background:var(--surface); padding:1px 7px; border-radius:var(--r-chip);
  pointer-events:none; white-space:nowrap;
}

/* ══ analyse: tagpaneel ══════════════════════════════════════════════════ */
.panel{
  padding:18px; display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; min-height:0;
}
/* --sel volgt de vechter van de geselecteerde marker */
.panel{--sel:var(--ink3); --sel-soft:var(--s3)}
.panel[data-fighter="aka"]{--sel:var(--aka); --sel-soft:var(--aka-soft)}
.panel[data-fighter="ao"]{--sel:var(--ao); --sel-soft:var(--ao-soft)}
.panel[data-fighter="none"]{--sel:var(--ink2); --sel-soft:var(--s3)}
.ptitle{display:flex; align-items:baseline; justify-content:space-between}
.ptitle-eyebrow{
  font-family:var(--font-cond); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink2);
}
.ptitle .mono{font-size:11px; font-weight:500; color:var(--ink3)}
.hint{font-size:13px; color:var(--ink2); margin:10px 0 0; line-height:1.55}
#panelForm{display:flex; flex-direction:column; gap:14px}
#formAction,#formPenalty{display:flex; flex-direction:column; gap:14px}

.bodywrap{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.zones-svg .zonepart{fill:var(--s2); stroke:var(--ink3); stroke-width:1.5; cursor:pointer; transition:fill .2s, stroke .2s}
.zones-svg .zonepart:hover{stroke:var(--ink2)}
.panel .zonepart.on{fill:var(--sel-soft); stroke:var(--sel); stroke-width:2}
.zones-svg .deco{fill:var(--s2); stroke:var(--ink3); stroke-width:1.5}
.zones-svg line.deco{fill:none}
.zones-svg .dash{stroke-dasharray:3 3}
.zonebtns{display:flex; flex-direction:column; gap:7px}
.zone{
  border:1px solid var(--line); background:var(--s2); border-radius:10px;
  padding:8px 12px; font-size:13px; text-align:left; color:var(--ink2);
  transition:background .2s, border-color .2s, color .2s;
}
.zone:hover{background:var(--s3)}
.zone b{display:block; font-weight:500}
.zone span{font-size:11px; color:var(--ink3)}
.panel .zone.on{border-color:var(--sel); background:var(--sel-soft); color:var(--ink)}
.panel .zone.on b{font-weight:600}
/* benen = niet-scorende setup: altijd gedempt, nooit de vechterkleur */
.zones-svg .zonepart.legs{stroke-dasharray:3 2}
.panel[data-fighter] .zonepart.legs.on{fill:var(--s3); stroke:var(--ink2); stroke-width:2}
.panel[data-fighter] .zone.zone-legs.on{border-color:var(--ink2); background:var(--s3); border-style:dashed}
.zone.zone-legs b{color:var(--ink2)}

.grp{display:flex; flex-direction:column; gap:7px}
.grplabel{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3);
}
.grplabel .kbdhint{text-transform:none; letter-spacing:0; font-family:var(--font-ui); color:var(--ink3); font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-size:12px; font-weight:500; color:var(--ink2);
  background:var(--s2); border:1px solid var(--line);
  border-radius:var(--r-chip); padding:5px 11px;
  transition:background .2s, border-color .2s, color .2s;
}
.tag:hover{background:var(--s3)}
.panel .tag.on{border-color:var(--sel); background:var(--sel-soft); color:var(--ink); font-weight:600}
.tag .pt{font-family:var(--font-mono); font-size:10px; color:var(--ink3); margin-left:5px}
.note{
  font:inherit; font-size:13px; color:var(--ink); background:var(--s2);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; width:100%;
}
.actions{display:flex; gap:8px}

.alist{display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); padding-top:11px; min-height:60px}
.alist:empty{display:none}
.arow{
  display:flex; gap:8px; align-items:center; width:100%;
  padding:3px 6px; border-radius:8px; transition:background .2s;
}
.arow:hover{background:var(--s2)}
.arow.active{background:var(--sel-soft)}
.arow.picked{background:var(--ao-soft)}
.arow-check{flex:none; margin:0; width:15px; height:15px; cursor:pointer; accent-color:var(--accent)}
.arow-main{
  flex:1; min-width:0; display:flex; gap:9px; align-items:baseline;
  font:inherit; font-size:12px; color:var(--ink2);
  background:none; border:0; padding:2px 0; text-align:left; cursor:pointer;
}
.arow.active .arow-main{color:var(--ink)}

/* selectiebalk boven de actielijst */
.selbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--ao-soft); border-radius:10px; padding:7px 9px;
  /* blijft in beeld terwijl je door een lange actielijst scrolt */
  position:sticky; top:0; z-index:2;
}
.selcount{flex:1; font-size:12px; font-weight:600; color:var(--ink)}
.selbar .abtn{padding:5px 10px; font-size:11.5px}
.arow .t{font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--ink3); flex:none; width:34px}
.arow .dot{width:9px; height:9px; border-radius:50%; flex:none; align-self:center}
.arow .dot.a{background:var(--aka)} .arow .dot.b{background:var(--ao)}
.arow .dot.raw, .arow .dot.s{background:transparent; border:2px solid var(--ink3); width:7px; height:7px}
.arow .dot.s{border-style:dashed}
.arow .sum{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.arow .pts{
  flex:none; margin-left:auto; align-self:center; font-family:var(--font-mono);
  font-size:11px; font-weight:700; line-height:1; color:var(--on-fighter); padding:3px 8px; border-radius:var(--r-chip);
}
.arow .pts.a{background:var(--aka)} .arow .pts.b{background:var(--ao)}
.arow .badge-pen{flex:none; width:12px; height:12px; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--ink2); margin:0 2px}
.arow .badge-vr{
  flex:none; width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; border-radius:50%; color:#fff; border:1.5px solid currentColor; margin:0 2px;
}
.arow .badge-vr.badge-vr-success{background:var(--good); border-color:var(--good)}
.arow .badge-vr.badge-vr-fail{background:var(--ink2); border-color:var(--ink2)}

/* ══ voetregel: verwijzing naar het sneltoetsen-venster ══════════════════ */
.keyshint{display:flex; padding-top:2px}
.keychip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--ink3); background:transparent; border:0;
  padding:5px 9px; border-radius:var(--r-chip); transition:background .2s, color .2s;
}
.keychip:hover{background:var(--s2); color:var(--ink2)}

/* ══ toast ═══════════════════════════════════════════════════════════════ */
#toast{
  position:fixed; bottom:78px; right:22px; z-index:99;   /* boven de feedbackknop */
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:600;
  padding:11px 20px; border-radius:var(--r-btn); box-shadow:var(--shadow-hover);
  opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0)}

/* ══ feedback ════════════════════════════════════════════════════════════ */
/* Linksonder, want rechtsonder zit de toast. Alleen zichtbaar voor ingelogde
   gebruikers — cloud.js hangt hem pas na requireApproved() in de pagina. */
.fbtn{
  /* naast de rail, niet eronder. Donker vlak met icoon: een witte knop viel
     weg tegen het bone-wit en werd niet als knop herkend. */
  position:fixed; bottom:22px; right:22px; z-index:90;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--bg);
  background:var(--ink); border:0; border-radius:var(--r-chip);
  padding:11px 18px 11px 15px; box-shadow:var(--shadow-hover); cursor:pointer;
  transition:transform .15s var(--ease-pop), box-shadow .2s;
}
.fbtn:hover{transform:translateY(-1px); box-shadow:0 8px 16px rgba(20,35,28,.18), 0 24px 48px rgba(20,35,28,.16)}
.fbtn:active{transform:scale(.97)}
@media (max-width:760px){ .fbtn{bottom:14px; right:14px; padding:9px 14px 9px 12px; font-size:12.5px} }

/* bericht in de beheerlijst: witruimte uit het invoerveld behouden */
.fbtext{
  font-size:13.5px; color:var(--ink); line-height:1.5; white-space:pre-wrap;
  margin:10px 0 0; padding-left:41px;
}

/* ══ dialogen ════════════════════════════════════════════════════════════ */
dialog{
  border:0; border-radius:var(--r-page); background:var(--surface); color:var(--ink);
  box-shadow:0 24px 70px rgba(0,0,0,.3); padding:24px; width:min(560px, 92vw);
}
dialog::backdrop{background:rgba(10,14,20,.45); backdrop-filter:blur(3px)}
.setup{display:flex; flex-direction:column; gap:13px}
.setup h2{font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px}
.setup label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--ink2); flex:1}
.setup input,.setup select,.setup textarea{
  font:inherit; font-size:13.5px; font-weight:400; color:var(--ink); background:var(--s2);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; width:100%;
}
.setup textarea{resize:vertical}
.setup .row2{display:flex; gap:12px}
.setup .cA{color:var(--aka)} .setup .cB{color:var(--ao)}
.offrow{display:flex; gap:7px}
.offrow .abtn{flex:none}
.warn{font-size:12.5px; color:var(--warn); margin:0}
.setupbtns{display:flex; gap:9px; align-items:center; margin-top:6px}
.setupbtns .spacer{flex:1}
.setupbtns .pbtn{flex:0 0 auto; padding:11px 24px}
.setuphint{font-size:11.5px; color:var(--ink3); margin:-4px 0 0}

.refinedlg .rdlg-intro{font-size:13.5px; font-weight:600; color:var(--ink); margin:0}
.refinedlg .rdlg-note{font-size:12.5px; color:var(--ink2); margin:0; line-height:1.45}
.refinedlg .rdlg-mismatch{
  font-size:12.5px; color:var(--ink); background:var(--score-soft);
  border-radius:10px; padding:11px 13px; line-height:1.45;
}
.rdlg-list{display:flex; flex-direction:column; gap:2px; max-height:min(46vh,320px); overflow:auto; background:var(--s2); border-radius:12px; padding:7px}
.rd-row{
  display:flex; gap:9px; align-items:center; width:100%; text-align:left; font:inherit; font-size:12.5px;
  color:var(--ink2); background:none; border:0; padding:7px 9px; border-radius:8px; cursor:pointer;
  transition:background .2s;
}
.rd-row:hover{background:var(--surface)}
.rd-row .t{font-family:var(--font-mono); font-size:11px; color:var(--ink3); flex:none; width:34px}
.rd-row .dot{width:9px; height:9px; border-radius:50%; flex:none}
.rd-row .dot.a{background:var(--aka)} .rd-row .dot.b{background:var(--ao)}
.rd-row .dot.s{background:transparent; border:2px dashed var(--ink3); width:7px; height:7px}
.rd-row .sum{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rd-row .pts{flex:none; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--on-fighter); padding:2px 8px; border-radius:var(--r-chip)}
.rd-row .pts.a{background:var(--aka)} .rd-row .pts.b{background:var(--ao)}

.dlgvideo{position:relative; width:100%; aspect-ratio:16/9; background:#07090B; border-radius:var(--r-card); overflow:hidden}
.dlgvideo iframe{position:absolute; inset:0; width:100%; height:100%}
#dlgFileVideo{position:absolute; inset:0; width:100%; height:100%; background:#000}
#rowFile input[type="file"]{font-size:13px; padding:9px}
.offbtns{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.offview{font-size:11.5px; color:var(--ink2); margin-left:auto}

/* ══ inloggen ════════════════════════════════════════════════════════════ */
.authpage{padding:0; margin:0; min-height:100vh}
.authsplit{display:grid; grid-template-columns:1.08fr 1fr; min-height:100vh}
.authhero{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  background:var(--s2); color:var(--ink);
}
.heroimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.heroart{position:absolute; inset:0; width:100%; height:100%; display:none}
body.nofoto .heroart{display:block}
/* Sluier onder de tekst. Iets dieper dan de vorige waarden, omdat een lichte
   foto (wit gi op witte achtergrond) anders te weinig contrast geeft voor de
   witte subtitel; op een donkere foto blijft het verschil onopvallend. */
.heroshade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,35,28,.08) 0%, rgba(20,35,28,.38) 55%, rgba(20,35,28,.74) 100%)}
body.nofoto .heroshade{display:none}
.kbnstripe{display:none}
.herocontent{position:relative; padding:clamp(28px, 5vw, 64px); display:flex; flex-direction:column; gap:6px}
/* Inlogscherm: het verticale logo vervangt de oude tekstkop + stippen.
   Welke variant zichtbaar is hangt af van de ONDERGROND, niet van het thema:
   ligt er een foto, dan zet .heroshade daar een donkere sluier overheen en is
   bone altijd goed. Valt de foto weg (body.nofoto), dan is het vlak zand in
   licht en mos in donker — en pas dán wisselt het logo mee. */
.authtitle .logo-light, .authtitle .logo-dark{width:min(190px, 46%); height:auto}
.authtitle .logo-light{display:none}
.authtitle .logo-dark{display:block}
body.nofoto .authtitle .logo-light{display:block}
body.nofoto .authtitle .logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.nofoto .authtitle .logo-light{display:none}
  :root:not([data-theme="light"]) body.nofoto .authtitle .logo-dark{display:block}
}
html[data-theme="dark"] body.nofoto .authtitle .logo-light{display:none}
html[data-theme="dark"] body.nofoto .authtitle .logo-dark{display:block}
html[data-theme="light"] body.nofoto .authtitle .logo-light{display:block}
html[data-theme="light"] body.nofoto .authtitle .logo-dark{display:none}
.authhero .authtitle{margin:0}
.authhero .authsub{color:rgba(255,255,255,.9); font-size:15px; margin:4px 0 0}
body.nofoto .authhero .authtitle{color:var(--ink)}
body.nofoto .authhero .authsub{color:var(--ink2)}
.herotag{
  font-family:var(--font-cond); color:var(--on-score); background:var(--score);
  font-weight:700; font-size:13.5px; letter-spacing:.13em; text-transform:uppercase;
  border-radius:var(--r-chip); padding:4px 13px; margin:14px 0 0; align-self:flex-start;
}
.authform{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--bg)}
.authforminner{width:min(400px, 100%); display:flex; flex-direction:column; gap:12px}
.authtitle{margin:4px 0 10px}
.authsub{color:var(--ink2); margin:0 0 14px; font-size:14px}
.authcard{padding:24px}
/* .pane is nu een <form> (wachtwoordmanagers + Enter); margin:0 haalt de
   standaard onderrand die de browser aan een formulier geeft weer weg */
.authcard .pane{display:flex; flex-direction:column; gap:13px; margin:0}
.authcard label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--ink2)}
.authcard input{
  font:inherit; font-size:14px; font-weight:400; color:var(--ink); background:var(--s2);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
}
.authcard h2{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0}
.authcard p{margin:0; font-size:13.5px; color:var(--ink2)}
.authcard .pbtn{padding:12px 0}
/* toon/verberg-wachtwoord: knopje binnen het veld (auth.js bouwt de wikkel) */
.pwwrap{position:relative; display:flex}
.pwwrap input{padding-right:78px}
.pwtoggle{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--ink3);
  font-size:11.5px; font-weight:600; border-radius:var(--r-seg); padding:6px 8px;
}
.pwtoggle:hover{color:var(--ink)}
.authseg{margin-bottom:4px}
.linkbtn{background:none; border:0; color:var(--accent-ink); font-size:12.5px; font-weight:500; text-align:center; padding:3px}
.linkbtn:hover{text-decoration:underline}
.authfoot{font-size:11.5px; color:var(--ink3); text-align:center}
.authfoot a{color:var(--accent-ink)}
.authlang{display:flex; justify-content:center; gap:8px; margin-top:14px}

/* ══ gebruikersbalk, beheer, facturatie, tegenstanders ═══════════════════ */
.pageerror{
  background:var(--aka-soft); color:var(--ink); border:0;
  border-radius:12px; padding:12px 16px; font-size:13px; margin-bottom:16px;
}
/* betaalpoort: lezen mag nog, schrijven niet — een waarschuwing, geen fout */
.paywall{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--score-soft); color:var(--ink);
  border-radius:12px; padding:12px 16px; font-size:13px;
  margin:0 0 18px;
}
.paywall b{font-weight:600}
.paywall .pbtn{margin-left:auto; flex:0 0 auto}
.sec-head h2{font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0}
.adminpage{max-width:760px; width:100%}
.rolechip{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; background:var(--s3); color:var(--ink2);
  border-radius:var(--r-chip); padding:3px 9px;
}
.ucard .mnames{flex-direction:column; gap:0; align-items:flex-start}
.ucard .gsub{font-weight:400}
.cmitem.muted{color:var(--ink3); font-size:12px; cursor:default}
.ucard .clubrow{align-items:center; flex-wrap:wrap}
.ucard .clubrow input{flex:1 1 200px; min-width:0; max-width:320px}
.ucard .clubrow select{font:inherit; font-size:12.5px}

.billingpage{max-width:760px; width:100%}
.billingpage .brow{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.bactions{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px}
.bactions .pbtn{flex:0 0 auto; padding:11px 22px}
.bstatus{font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0 0 3px}
.bstatus.active, .bstatus.trialing{color:var(--good)}
.bstatus.past_due, .bstatus.unpaid, .bstatus.canceled, .bstatus.incomplete_expired, .bstatus.paused{color:var(--warn)}
.bprice{font-size:15px; font-weight:600; margin:0 0 6px}

/* documentpagina's zonder rail: privacyverklaring en handleiding */
.privacypage, .helppage{max-width:660px; margin:40px auto; padding:0 10px}
.privacypage h1, .helppage h1{font-size:27px; font-weight:600; letter-spacing:-.01em; margin:6px 0 8px; text-wrap:balance}
.privacypage h3, .helppage h3{margin:24px 0 6px; font-size:15px; font-weight:600}
.privacypage p, .helppage p{color:var(--ink2); font-size:14px}
.privacypage a, .helppage a{color:var(--accent-ink)}

.opplist{display:flex; flex-direction:column; gap:9px; margin-top:16px}
.opprow{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  color:inherit; text-decoration:none; cursor:pointer;
  transition:transform .2s var(--ease-soft), box-shadow .2s;
}
.opprow:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.opprow .opp-go{font-size:12px; font-weight:600; color:var(--accent-ink); white-space:nowrap}
.opprow .opp-name{flex:none; min-width:180px; font-weight:600}
.opprow .oppcat{font-size:12px; color:var(--ink2); background:var(--s2); border-radius:var(--r-chip); padding:3px 11px}
.opprow .opp-count{margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--ink3)}
.coachpanel{margin-top:32px; border-top:1px solid var(--line); padding-top:20px}
.coachpanel h3{font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px; display:flex; align-items:center; gap:9px}
.tagpill{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink2); background:var(--s3);
  border-radius:var(--r-chip); padding:3px 9px;
}
#athleteAdmin{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.aadmin{display:grid; grid-template-columns:220px 1fr; gap:9px 18px; align-items:center; padding:14px 16px}
.aadmin .aa-name{display:flex; flex-direction:column; gap:2px}
.aadmin .aa-name .mono{font-size:11px; color:var(--ink3)}
.aadmin .aa-cat{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.aadmin .aa-cat label{display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:600; color:var(--ink2)}
.aadmin select{font:inherit; font-size:12.5px; color:var(--ink); background:var(--s2); border:1px solid var(--line); border-radius:9px; padding:7px 10px}
.aadmin .aa-grants{grid-column:1 / -1; display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12px; color:var(--ink2); border-top:1px solid var(--line); padding-top:11px}
.aadmin .aa-lab{font-weight:600}
.grantwrap{display:inline-flex; flex-wrap:wrap; gap:6px}
.grantchip{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; background:var(--s2); color:var(--ink); border-radius:var(--r-chip); padding:3px 5px 3px 11px}
.grantchip button{border:0; background:var(--s3); color:var(--ink2); border-radius:50%; width:17px; height:17px; cursor:pointer; line-height:1; font-size:12px}
.aadmin .aa-add{display:flex; gap:7px; align-items:center; margin-left:auto}

input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* ══ responsief ══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  body{padding:14px 14px 16px}
  /* Keuze: de rail klapt in tot alleen iconen (label als tooltip) in plaats van
     naar een onderbalk. Reden: het analysescherm is hier het krapst en heeft
     juist hóógte nodig (video + tijdlijn + paneel onder elkaar) — een onderbalk
     eet die op. En omdat alles al met --rail-w rekent, is dit één tokenwissel. */
  :root{--rail-w:52px}
  body:has(> .appbar){padding-left:calc(var(--rail-w) + 14px)}
  .mainrail{padding:16px 8px 14px}
  .railitem{justify-content:center; padding:10px 0}
  .railitem span, .railnew span{display:none}
  .railnew{justify-content:center; padding:9px 0}
  /* ingeklapt past "YOMI" niet in 52px: de twee stippen zijn dan het merkteken.
     font-size:0 verbergt de letters; de <em> heeft een eigen font-size en moet
     dus apart weg, anders steekt "PROTOTYPE" de rail uit. */
  /* ingeklapt past het hele logo niet in 52px: dan alleen het beeldmerk */
  .mainrail .wordmark{justify-content:center; padding:0}
  .mainrail .wordmark em, .mainrail .wordmark .logo-full{display:none}
  .mainrail .wordmark .logo-mark{display:block}
  .avatar{justify-content:center; padding:6px 0}
  .avatar .who{display:none}
  .acctpop{min-width:220px}
  .ana{grid-template-columns:1fr}
  .videowrap{max-height:none}
  .scorebar{gap:12px}
  .clock{margin-left:0}
  .matchmeta{flex-basis:100%; text-align:left}
  .tile{grid-column:span 6}
  .span6,.span4,.span8{grid-column:span 12}
  .hbar{grid-template-columns:130px 1fr 30px; gap:9px}
  .hbar.eff{grid-template-columns:130px 1fr 84px}
}
@media (max-width:860px){
  .authsplit{grid-template-columns:1fr; grid-template-rows:min(38vh, 320px) 1fr}
  .authhero{min-height:0}
  .authtitle .logo-light, .authtitle .logo-dark{width:min(150px, 40%)}
  .authform{align-items:flex-start; padding-top:28px}
}
@media (max-width:560px){
  .mrow2, .mrow3{padding-left:0}
  .matchgrid{grid-template-columns:1fr}
  .goalgrid{grid-template-columns:1fr}
  /* "18 / 13" past bij 32px niet meer op een halve tegel */
  .tile:not(.hero) .v{font-size:22px}
  .tile.hero .v{font-size:32px}
  .gnow{font-size:28px}
}

/* ══ sneltoetsen-venster + rondleiding ═══════════════════════════════════ */
/* Leer-modus: elke fysiek ingedrukte toets zakt in en de leesregel vertelt
   wat hij doet. Groepskleuren zijn semantisch en hergebruiken de tokens. */

#shortcutsDialog{width:min(1000px, 94vw); max-height:92vh; overflow:auto; padding:24px 26px 22px; box-shadow:0 24px 70px rgba(0,0,0,.6)}
#shortcutsDialog::backdrop{background:rgba(6,8,11,.74); backdrop-filter:blur(3px)}
.sc-wrap{display:flex; flex-direction:column; gap:16px}

/* ── kop ── */
.sc-head{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap}
.sc-head .sc-titles{flex:1; min-width:240px}
.sc-eyebrow{
  font-family:var(--font-cond); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--score-ink); margin:0;
}
.sc-head h2{font-size:22px; font-weight:600; letter-spacing:-.01em; margin:4px 0 0}
.sc-sub{font-size:13px; color:var(--ink2); margin:4px 0 0}
/* De rondleiding staat in de leesvolgorde — titel, wat het venster doet, en
   dan het aanbod om het te laten voorzien. In de voet viel hij weg naast
   "Aan de slag"; naast Mac/Windows zou hij tussen de instellingen en het
   kruisje belanden, en dat is geen plek voor een actie. */
.sc-titles #scTour{margin-top:13px}
.sc-close{
  flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--s2); border:1px solid var(--line); color:var(--ink2);
  display:inline-grid; place-items:center; font-size:15px;
}
.sc-close:hover{background:var(--s3); color:var(--ink)}

/* ── filterrij ── */
.sc-filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sc-filters .sc-label{
  font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3);
}
.sc-chip{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:12px; font-weight:600; border-radius:var(--r-chip); padding:5px 12px;
  background:var(--s2); border:1px solid var(--line); color:var(--ink3);
  transition:background .2s, border-color .2s, color .2s;
}
.sc-chip i{width:8px; height:8px; border-radius:50%; background:var(--kc, var(--ink3)); flex:none}
.sc-chip:hover{color:var(--ink)}
.sc-chip.on{background:color-mix(in srgb, var(--kc, var(--ink3)) 13%, transparent); border-color:var(--kc, var(--ink3)); color:var(--ink)}
/* leesregel met statuslampje */
.sc-read{
  margin-left:auto; display:inline-flex; align-items:center; gap:9px; min-width:290px;
  background:var(--s2); border-radius:var(--r-btn); padding:7px 13px;
  font-size:12.5px; color:var(--ink2);
}
.sc-read i{width:8px; height:8px; border-radius:50%; background:var(--good); flex:none}
.sc-read.idle i{animation:scPulse 1.9s ease-out infinite}
.sc-read.hit i{background:var(--score); animation:none}
.sc-read.hit{color:var(--ink)}
@keyframes scPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent)} 70%,100%{box-shadow:0 0 0 7px transparent}}

/* ── toetsenbord ── */
/* Het toetsenbord is een apparaat, geen paneel: dek én toetsen houden in
   beide thema's dezelfde donkere kleuren, precies zoals in het ontwerp. Een
   licht dek met donkere toetsen maakte er een blad met losse toetsen van. */
.sc-board{
  background:#08090C; border-radius:16px; padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:7px; overflow-x:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.sc-row{display:flex; gap:7px; justify-content:center}

.sc-key{
  --u:46px; --gap:7px; --kc:#EDF1F4;
  flex:none; width:calc(var(--w) * var(--u) + (var(--w) - 1) * var(--gap)); height:var(--u);
  border-radius:8px; background:#1b2027; border:1px solid rgba(255,255,255,.07); color:#8792a0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:11px; font-weight:600;
  user-select:none; cursor:pointer; padding:0;
  box-shadow:0 4px 0 #0b0d10, 0 5px 8px rgba(0,0,0,.45);
  transition:transform .06s var(--ease-pop), box-shadow .09s, background .09s, color .09s;
}
.sc-key.mono{font-family:var(--font-mono); font-size:13.5px}
/* groepskleuren */
/* vaste waarden, niet de paginatokens: die verschuiven per thema en dat mag
   een fysiek toetsenbord niet doen */
.sc-key[data-g="play"]{--kc:#4C9BEE}
.sc-key[data-g="mark"]{--kc:#EA4C5B}
.sc-key[data-g="tag"]{--kc:#ffd700}
.sc-key[data-g="gen"]{--kc:#A6B0BB}
/* doorschijnend over het dek, zoals in het ontwerp: gekleurde toetsen zijn
   donkerder dan de rest, niet lichter */
.sc-key[data-g]{
  background:color-mix(in srgb, var(--kc) 12%, transparent);
  border-color:color-mix(in srgb, var(--kc) 33%, transparent);
  color:#EDF1F4;
}
/* gedimd wanneer er op een andere groep gefilterd wordt */
.sc-key.dim, .sc-key[data-g].dim{background:#15181d; border-color:rgba(255,255,255,.04); color:#3d444d}
/* ingedrukt: de toets zakt in zijn eigen schaduw */
.sc-key.down, .sc-key[data-g].down{
  background:var(--kc); color:#0B0D10; border-color:var(--kc);
  transform:translateY(4px);
  box-shadow:0 0 0 1px var(--kc), 0 0 22px color-mix(in srgb, var(--kc) 40%, transparent),
             inset 0 2px 5px rgba(0,0,0,.35);
}

/* ── vier tekstkolommen ── */
.sc-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.sc-col{transition:opacity .18s}
.sc-col.dim{opacity:.32}
.sc-col h4{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 8px; color:var(--kc);
}
.sc-col[data-g="play"]{--kc:var(--ao)}
.sc-col[data-g="mark"]{--kc:var(--aka)}
.sc-col[data-g="tag"]{--kc:var(--score-ink)}
.sc-col[data-g="gen"]{--kc:var(--ink2)}
.sc-line{display:flex; align-items:center; gap:9px; margin:6px 0}
.sc-badge{
  flex:none; min-width:26px; text-align:center;
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink);
  background:color-mix(in srgb, var(--kc) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--kc) 40%, transparent);
  border-radius:6px; padding:2px 7px;
}
.sc-line span{font-size:12.5px; color:var(--ink2)}

/* ── voetbalk ── */
.sc-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:13px}
.sc-foot .sc-tip{font-size:12px; color:var(--ink3); flex:1; min-width:220px}
.sc-foot .sc-reopen{font-size:12px; color:var(--ink3); display:inline-flex; align-items:center; gap:5px}
.sc-foot .pbtn, .sc-foot .abtn{flex:0 0 auto}
.sc-foot .pbtn{padding:11px 20px}

/* ── rondleiding ── */
.tour-spot{
  position:fixed; z-index:60; border:2px solid var(--score); border-radius:16px;
  box-shadow:0 0 0 9999px var(--scrim); pointer-events:none;
  transition:left .5s var(--ease-soft), top .5s var(--ease-soft),
             width .5s var(--ease-soft), height .5s var(--ease-soft);
}
.tour-card{
  position:fixed; z-index:61; width:380px; max-width:calc(100vw - 32px);
  background:var(--surface); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6);
  padding:18px 20px; display:flex; flex-direction:column; gap:9px;
  transition:left .5s var(--ease-soft), top .5s var(--ease-soft), opacity .19s ease-out, transform .19s ease-out;
}
.tour-card.fading{opacity:0; transform:translateY(8px)}
.tour-badges{display:flex; align-items:center; gap:8px}
.tour-step{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-score); background:var(--score);
  border-radius:var(--r-chip); padding:3px 10px;
}
.tour-ok{
  font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; background:var(--good);
  border-radius:var(--r-chip); padding:3px 10px;
}
.tour-card h3{font-size:17px; font-weight:600; margin:0}
.tour-card p{font-size:13px; color:var(--ink2); margin:0; line-height:1.5}
.tour-keys{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:2px}
/* Deze keycaps liggen op de lichte coachkaart, niet op het donkere dek van het
   toetsenbord. Doorschijnend mengen werkt daar niet: het vlak wordt bleekroze
   en het lichte label (#EDF1F4) verdwijnt erin. Hier dus mengen met de eigen
   donkere basis, zodat het label leesbaar blijft. */
.tour-keys .sc-key{--u:34px; font-size:12px; background:#1b2027}
.tour-keys .sc-key[data-g]{
  background:color-mix(in srgb, var(--kc) 14%, #1b2027);
  border-color:color-mix(in srgb, var(--kc) 40%, #1b2027);
}
.tour-keys .sc-key.mono{font-size:12px}
.tour-try{font-size:12px; color:var(--ink3)}
.tour-foot{display:flex; align-items:center; gap:9px; padding-top:4px}
.tour-skip{font-size:12.5px; font-weight:600; background:transparent; border:0; color:var(--ink3); padding:0}
.tour-skip:hover{color:var(--ink)}
.tour-dots{margin-left:auto; display:flex; gap:5px; align-items:center}
.tour-dots i{width:6px; height:6px; border-radius:50%; background:var(--s3)}
.tour-dots i.on{background:var(--score)}

/* ── rondleiding: gids ── */
/* De handoff zet hier .tour-card{position:relative} als anker voor de gids.
   Bewust NIET overgenomen: .tour-card is al position:fixed (dat plaatst hem op
   viewport-coördinaten), en elk gepositioneerd element is al een containing
   block voor absolute kinderen. De regel zou fixed overschrijven, waardoor de
   kaart uit beeld naar beneden zakt. */

.tour-gids{
  position:absolute; right:14px; top:-137px; width:100px; height:132px;
  pointer-events:none;
}
.gids-svg{
  display:block; overflow:visible;
  /* witte halo: de zwarte inktlijn moet ook op het donkere scrim leesbaar blijven */
  filter:drop-shadow(0 0 2.5px #fff) drop-shadow(0 0 2px #fff);
}
.gids-body{animation:gidsIn .42s var(--ease-pop) both; transform-box:fill-box; transform-origin:center bottom}
.gids-head{animation:gidsAdem 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom}

/* alleen de arm-set van de actieve houding tonen */
.gids-arm{display:none}
.tour-gids[data-pose="1"] .gids-arm[data-pose="1"],
.tour-gids[data-pose="2"] .gids-arm[data-pose="2"],
.tour-gids[data-pose="3"] .gids-arm[data-pose="3"],
.tour-gids[data-pose="4"] .gids-arm[data-pose="4"]{display:block}

.arm-hikite{animation:gidsRecoil 1.15s var(--ease-soft) infinite; transform-box:fill-box; transform-origin:center}
.arm-stoot {animation:gidsStoot 1.15s var(--ease-soft) infinite; transform-box:fill-box; transform-origin:left center}
.arm-speed {animation:gidsSpeed 1.15s ease-out infinite}
.tour-gids[data-pose="2"] .gids-arm{animation:gidsWieg 1.9s ease-in-out infinite; transform-box:fill-box; transform-origin:center top}
.tour-gids[data-pose="3"] .gids-arm{animation:gidsTik  1.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom}
.tour-gids[data-pose="4"] .gids-body{animation:gidsIn .42s var(--ease-pop) both, gidsBuiging 2.4s ease-in-out .5s infinite}
.tour-gids[data-done]   .gids-body{animation:gidsJuich .7s ease-in-out 2}

@keyframes gidsIn{from{opacity:0; transform:translateY(14px) scale(.86)} to{opacity:1; transform:none}}
@keyframes gidsAdem{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.5px)}}
@keyframes gidsStoot{0%,58%,100%{transform:translateX(0) rotate(0)} 26%{transform:translateX(7px) rotate(-3deg)}}
@keyframes gidsRecoil{0%,58%,100%{transform:translateX(0)} 26%{transform:translateX(-3px)}}
@keyframes gidsSpeed{0%{opacity:0; transform:translateX(0)} 30%{opacity:1} 100%{opacity:0; transform:translateX(9px)}}
@keyframes gidsWieg{0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)}}
@keyframes gidsTik{0%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)}}
@keyframes gidsBuiging{0%,72%,100%{transform:rotate(0)} 34%{transform:rotate(15deg)}}
@keyframes gidsJuich{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)}}

/* de kaart is zijn tekstballon: puntje in de bovenrand, onder zijn voeten */
.tour-card::before{
  content:""; position:absolute; top:-7px; right:62px; width:14px; height:14px;
  background:var(--surface); transform:rotate(45deg);
}

/* onder 900px is er naast de kaart geen ruimte meer */
@media (max-width:900px){ .tour-gids{display:none} }
/* Bewust helemaal weg in plaats van stil: een bevroren mascotte die halverwege
   een stoot hangt leest als een renderfout. */
@media (prefers-reduced-motion:reduce){ .tour-gids{display:none} }

@media (max-width:900px){
  .sc-cols{grid-template-columns:repeat(2,1fr)}
  .sc-read{margin-left:0; min-width:0; width:100%}
}

/* ══ handleiding ═════════════════════════════════════════════════════════ */
.helppage h2{font-size:19px; font-weight:700; margin:34px 0 8px; letter-spacing:-.01em}
.helppage ol, .helppage ul{color:var(--ink2); font-size:14px; padding-left:22px}
.helppage li{margin:4px 0}
.helppage kbd{font:inherit; font-size:12.5px; background:var(--s2); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
.helppage .back{display:inline-block; margin-bottom:18px; font-size:13px}
.helppage .devseg{margin:10px 0 18px}
.helppage [data-dev]{display:none}
.helppage [data-dev].on{display:block}
.helppage details{border-top:1px solid var(--line); padding:10px 0}
.helppage summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--ink)}
.helppage details p{margin:8px 0 2px}

/* ══ upload: quotum en voortgang (dialoog nieuwe wedstrijd) ═══════════════ */
.quota{display:flex; flex-direction:column; gap:5px; font-size:12.5px; color:var(--ink2); margin:8px 0 2px}
.upbar{height:6px; background:var(--s2); border-radius:var(--r-chip); overflow:hidden}
.upbar i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s var(--ease-soft)}
.quota.full .upbar i{background:var(--aka)}
#uploadWrap .upbar i{background:var(--score)}

/* ══ beheer: uitnodigen ══════════════════════════════════════════════════ */
.inviteform{
  display:grid; grid-template-columns:1fr 1.4fr auto auto; gap:10px; align-items:end;
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); padding:16px;
}
.inviteform label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--ink2)}
.inviteform input, .inviteform select{
  font:inherit; font-size:14px; font-weight:400; color:var(--ink); background:var(--s2);
  border:1px solid var(--line); border-radius:var(--r-ctl); padding:9px 12px; min-width:0;
}
.inviteform .pbtn{align-self:end}
.inviteform .inv-status{grid-column:1 / -1; margin:0}
@media (max-width:760px){ .inviteform{grid-template-columns:1fr 1fr} .inviteform .pbtn{grid-column:1 / -1} }

/* ══ demo-omgeving ═══════════════════════════════════════════════════════ */
.wordmark em.demo, .authfoot .demo{
  background:var(--score); color:var(--on-score); border-radius:var(--r-chip);
  padding:2px 8px; letter-spacing:.08em; font-weight:700;
}
.authfoot .demo{font-size:11px; text-transform:uppercase; margin-left:6px; white-space:nowrap; display:inline-block}
.demobox{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); padding:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.demobox .fieldhint{flex-basis:100%; margin:0}

/* ══ atleten (coach-weergave) ════════════════════════════════════════════ */
.athhead, .athrow{
  /* Kop en rij delen exact dit raster; cijferkolommen hebben een vaste breedte en
     staan gecentreerd, zodat de titel precies boven het getal staat. */
  display:grid; grid-template-columns:minmax(150px,1.5fr) 78px 84px 108px 78px 72px minmax(150px,1.2fr) 96px 104px;
  gap:14px; align-items:center;
}
.athhead > :nth-child(n+2):nth-child(-n+6), .athrow > :nth-child(n+2):nth-child(-n+6){text-align:center}
.athhead > :nth-child(8), .athrow > :nth-child(8){text-align:center}
.athhead > :last-child, .athrow > :last-child{text-align:right}
.athrow .ath-name{overflow-wrap:anywhere}
.athhead{margin:18px 0 6px; padding:0 18px; font-family:var(--font-cond); font-variation-settings:"opsz" 12; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.athlist{display:flex; flex-direction:column; gap:9px}
.athrow{
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow);
  padding:14px 18px; color:var(--ink); text-decoration:none; font-size:13.5px;
  transition:transform .15s var(--ease-pop), box-shadow .2s;
}
.athrow:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.athrow.leeg{opacity:.6}
.athrow .ath-name{font-weight:600}
.athrow .ath-tag{font-size:11px; font-weight:500; color:var(--ink3); background:var(--s2); border-radius:var(--r-chip); padding:2px 8px; margin-left:6px}
.athrow .ath-big{font-size:17px; font-weight:700}
.athrow .voor{font-style:normal; color:var(--ao)} .athrow .tegen{font-style:normal; color:var(--aka)}
.athrow .ath-tech{font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.athrow .ath-last{font-size:12px; color:var(--ink3)}
@media (max-width:900px){
  .athhead{display:none}
  .athrow{grid-template-columns:1fr auto auto; gap:6px 12px}
  .athrow > :nth-child(n+4):not(.opp-go){display:none}
}

/* ══ analysepaneel: tabbladen + silhouet-labels ══════════════════════════ */
.ptabs{display:flex; gap:3px; background:var(--s2); padding:3px; border-radius:var(--r-seg)}
.ptabs button{
  flex:1; border:0; background:none; color:var(--ink2); font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 10px; border-radius:6px; cursor:pointer; transition:background .2s, color .2s;
}
.ptabs button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-seg)}
.ptab-n{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:var(--r-chip);
  background:var(--s3); color:var(--ink2); font-size:11px; font-family:var(--font-mono)}
.ptabs button.on .ptab-n{background:var(--accent); color:var(--on-accent)}
.panel[data-tab="details"] #selBar, .panel[data-tab="details"] #actionList{display:none!important}
.panel[data-tab="acties"] #panelEmpty, .panel[data-tab="acties"] #panelForm{display:none!important}
.panel[data-tab="acties"] .alist{border-top:0; padding-top:0}
.zones-svg .zonelabel{font-family:var(--font-ui); font-size:12px; font-weight:600; fill:var(--ink2); cursor:pointer}
.zones-svg .zonelabel .zk{font-family:var(--font-mono); font-size:10px; font-weight:500; fill:var(--ink3)}
.zones-svg .zonelabel:hover{fill:var(--ink)}
.panel .zonelabel.on{fill:var(--sel)}

/* ══ beheer: ruimer en strakker uitgelijnd ═══════════════════════════════ */
.adminpage{max-width:880px}
.adminpage .sec-head{margin:40px 0 14px}
.adminpage .sec-head:first-child{margin-top:8px}
.adminpage .sec-head .fieldhint{max-width:640px; line-height:1.5}
.adminpage .ucard{padding:18px 22px; cursor:default}
.adminpage .ucard:hover{transform:none}
/* identiteit als één blok: naam, e-mail, labels — naast de badge, datum rechts */
.adminpage .ucard .mrow1{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:14px; align-items:start}
.adminpage .ucard .mnames{min-width:0; gap:3px}
.adminpage .ucard .mnames > span:first-child{font-size:15px; font-weight:600; overflow-wrap:anywhere}
.adminpage .ucard .gsub{font-size:12.5px; overflow-wrap:anywhere}
.adminpage .ucard .rolechip{margin-top:4px}
.adminpage .ucard .mtags{margin-left:0; padding-top:4px; white-space:nowrap}
.adminpage .ucard .mrow3{padding-left:42px; margin-top:12px; flex-wrap:wrap}
.adminpage .ucard .fbtext{padding-left:42px}
.adminpage .inviteform{padding:18px 22px}

/* ══ instellingen + opslagbeheer ═════════════════════════════════════════ */
.settingspage{max-width:640px}
.setcard{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); padding:16px 20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.setacct > div{display:flex; flex-direction:column; gap:2px; margin-right:auto}
.setacct b{font-size:15px}
.adminpage .storow .mrow1{grid-template-columns:28px minmax(0,1fr) auto; align-items:center}
.adminpage .storow .mnames{width:100%; max-width:420px}
.adminpage .storow .upbar{width:100%; margin-top:6px}
.quotaedit{display:flex; align-items:center; gap:6px}
.quotaedit input{width:64px; font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--s2); color:var(--ink)}

/* ══ atleetpagina (ontwerp 3a) ══════════════════════════════════════════
   Profielkaart links, gegevens + tegels rechts; daaronder attributen,
   wedstrijdlog en seizoensprestaties over de volle breedte. */
.pc-k{white-space:nowrap; font-family:var(--font-cond); font-variation-settings:"opsz" 12; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:0}
.pc-form{display:flex; gap:4px}
.pc-form span{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font:700 10.5px var(--font-mono); color:var(--on-fighter)}
.pc-form .w{background:var(--good)} .pc-form .l{background:var(--aka)}
.pc-form.sm span{width:17px; height:17px; font-size:9.5px}
.mono{font-family:var(--font-mono)}
.voor{color:var(--ao)} .tegen{color:var(--aka)} .sep{color:var(--ink3)}

.athpage{width:100%; max-width:1180px; display:flex; flex-direction:column; gap:22px}
.athtabs{align-self:flex-start}
.athtabs a{text-decoration:none}
.athgrid{display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:start}
.athright{display:flex; flex-direction:column; gap:16px}
.acard{background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); padding:18px 22px}
.acardrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.acardrow .athsel{flex:1 1 220px}
.athsel{font:inherit; font-size:13.5px; color:var(--ink); background:var(--s2); border:1px solid var(--line); border-radius:var(--r-ctl); padding:8px 11px; min-width:0}

/* kruimelpad + wisselaar */
.athbar{justify-content:flex-start; gap:12px}
.crumbs{position:relative; display:flex; align-items:center; gap:8px}
.crumb{color:var(--ink3); font-weight:600; text-decoration:none} .crumb:hover{color:var(--ink)}
.crumbsep{color:var(--ink3); font-size:18px}
.crumbbtn{display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 4px; border:0; background:none; border-radius:var(--r-ctl); cursor:pointer; color:var(--ink); font:inherit}
.crumbbtn:hover{background:var(--s2)} .crumbbtn svg{color:var(--ink3)}
.switcher{position:absolute; top:calc(100% + 8px); left:0; width:420px; z-index:70; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow-hover); padding:8px; display:flex; flex-direction:column; gap:6px}
.switcher .filt.srch{background:var(--s2); display:flex; gap:8px; align-items:center}
.switcher .filt.srch input{flex:1; width:auto; max-width:none}
.switcher kbd{font:600 10px var(--font-cond); color:var(--ink3); border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.switcher .pc-k{padding:6px 10px 2px}
.swlist{display:flex; flex-direction:column}
.swrow{display:grid; grid-template-columns:34px 1fr auto auto; gap:12px; align-items:center; padding:8px 10px; border-radius:var(--r-ctl); color:var(--ink); text-decoration:none}
.swrow:hover, .swrow.on{background:var(--s2)}
.swava{width:34px; height:34px; border-radius:50%; background:var(--brand-scale); color:var(--brand-bone); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none}
.swava.sm{width:30px; height:30px; font-size:11px}
.swtxt{display:flex; flex-direction:column; min-width:0}
.swtxt b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.swtxt span{font-size:11.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.swwin{font-weight:700}
.swfoot{display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:8px 10px 2px; font-size:11.5px; color:var(--ink3)}
.swfoot a{color:var(--accent-ink); text-decoration:none; font-weight:600}

/* profielkaart */
.pcard{display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--shadow); overflow:hidden; position:sticky; top:16px}
.pphoto{position:relative; height:280px; background:var(--s2); display:grid; place-items:center}
.pini{font-family:var(--font-display); font-size:72px; font-weight:700; color:var(--ink3); opacity:.35}
.pwin{position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:var(--r-ctl); background:var(--surface)}
.pwin .mono{font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1}
.pwin span:last-child{font-family:var(--font-cond); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2)}
.pweight{position:absolute; top:14px; right:14px; padding:5px 10px; white-space:nowrap; border-radius:var(--r-chip); background:var(--surface); font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2)}
.pbasalt{background:var(--nav-bg); color:var(--nav-on); padding:16px 18px 14px; display:flex; flex-direction:column; gap:12px}
.pbasalt h3{margin:0; font-size:24px; font-weight:700; line-height:1.05; color:var(--nav-on)}
.psub{font-size:12.5px; color:var(--nav-ink)}
.pattrs{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; text-align:center}
.pattr{border:0; background:none; color:inherit; padding:4px 0; border-radius:8px; cursor:pointer; font:inherit}
.pattr:hover, .pattr.hov{background:var(--nav-pill)} .pattr.on{background:var(--nav-pill); outline:1px solid var(--nav-btn-line)}
.pak{display:block; font-family:var(--font-cond); font-size:10px; font-weight:600; letter-spacing:.1em; color:var(--nav-ink)}
.pav{display:block; font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.pfoot{padding:12px 18px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.pfoot .mono{font-size:11.5px; color:var(--ink3); white-space:nowrap}

/* gegevens */
.pgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 18px}
.pgrid .pspan2{grid-column:span 2}
.pval{margin:2px 0 0; font-weight:600}
.pinline{margin-top:2px; width:100%; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:transparent; border:0; border-bottom:1px dashed var(--line); padding:2px 0; min-width:0}
.pinline:focus{outline:0; border-bottom-color:var(--ink)}
select.pinline{cursor:pointer}
.pgrid .chips{margin-top:4px}
.pstyles{border-top:1px solid var(--line); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:8px}
.pstyles .tag{cursor:pointer}
.pstyle-why{margin:0; background:var(--s2); border-radius:var(--r-ctl); padding:8px 11px; font-size:12.5px; color:var(--ink2)}
.athtiles{gap:12px}
.athtiles .tile{grid-column:span 3}
.vlamp{display:flex; align-items:center; gap:8px}
.lamp{width:9px; height:9px; border-radius:50%; display:inline-block}
.lamp.good{background:var(--good)} .lamp.warn{background:var(--warn)} .lamp.aka{background:var(--aka)}
.good{color:var(--good)} .warn{color:var(--warn)} .aka{color:var(--aka)}

/* attributen */
.attrcard{padding:22px 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 36px}
.agrp{display:flex; flex-direction:column; gap:8px; padding:8px; margin:-8px; border-radius:var(--r-ctl)}
.agrp.lit{background:var(--accent-soft)}
.aghead{display:flex; justify-content:space-between; align-items:baseline}
.aghead h3{margin:0; font-size:19px; font-weight:700}
.agv{font-size:19px; font-weight:700}
.agv.none{color:var(--ink3)}
.agtrack{height:6px; border-radius:99px; background:var(--s2); overflow:hidden; display:block}
.agfill{display:block; height:100%; border-radius:99px; background:var(--ink3); transition:width var(--dur-slow, .5s) var(--ease-soft)}
.agfill.good{background:var(--good)} .agfill.warn{background:var(--warn)} .agfill.aka{background:var(--aka)}
.agrows{display:flex; flex-direction:column; gap:5px; margin-top:4px}
.agrow{display:flex; justify-content:space-between; gap:12px; font-size:13px}
.agrow > span:first-child{color:var(--ink2)} .agrow .mono{font-weight:600}

/* wedstrijdlog */
.logcard{padding:18px 22px 12px; display:flex; flex-direction:column; gap:10px}
.loghead{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.loghead h3{margin:0; font-size:19px; font-weight:700}
.loghint{margin-left:auto; font-size:12px; color:var(--ink3)}
.logrow{display:grid; grid-template-columns:92px minmax(0,1.4fr) 36px 64px 64px 64px 64px 64px 64px 56px; gap:0 12px; align-items:center; padding:9px 12px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:13px}
.logrow:hover{background:var(--s2)}
.loghd{border-top:0; padding:6px 12px; font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
.loghd button{font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.loghd button.on{color:var(--ink)} .loghd .c{text-align:center} .loghd .r{text-align:right}
.logrow .c{text-align:center} .logrow .ld{color:var(--ink3); font-size:12px}
.lwho{min-width:0; display:flex; flex-direction:column}
.lwho b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lwho span{font-size:11.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logrow .badge{width:24px; height:24px; font-size:12px}
.lscore{font-weight:600}
.lsen{color:var(--score-ink); font-weight:600; font-size:12px} .ldim{color:var(--ink3)}
.lrate{justify-self:end; min-width:38px; padding:3px 7px; border-radius:var(--r-xs); text-align:center; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--on-fighter); background:var(--ink3)}
.lrate.good{background:var(--good)} .lrate.warn{background:var(--warn)} .lrate.none{background:transparent; color:var(--ink3)}
.logempty{text-align:center; color:var(--ink3); padding:22px 0; margin:0}

/* seizoensprestaties */
.seasoncard{padding:18px 22px 22px; display:flex; flex-direction:column; gap:14px}
.seasoncard .loghead{justify-content:space-between}
.seasoncard .loghead > div:first-child{display:flex; flex-direction:column; gap:2px}
.seasongrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 40px}
.ssec{display:flex; flex-direction:column; gap:7px}
.ssec .ptitle-eyebrow{margin:0 0 4px}
.srow{display:grid; grid-template-columns:minmax(0,1fr) 56px 200px; gap:14px; align-items:center; font-size:13px}
.srow .mono{font-weight:600; text-align:right}
.srow .agtrack{height:8px}

/* koppelingen (coach-chips) */
.coachchip{display:inline-flex; align-items:center; gap:6px}
.coachchip .chipx{border:0; background:transparent; color:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0 2px; opacity:.7}
.coachchip .chipx:hover{opacity:1}

/* ══ teamdashboard (ontwerp 4a) ═════════════════════════════════════════ */
.teampage{max-width:1180px; display:flex; flex-direction:column; gap:22px}
.teampage #dash{display:flex; flex-direction:column; gap:16px}
.teambar{gap:14px}
.teamsub{font-size:12.5px; color:var(--ink3); margin-right:auto}
.attgrid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:16px; align-items:start}
.dchead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px}
.dchead .sub{margin:0}
.dcnote{font-size:11.5px; color:var(--ink3); white-space:nowrap}
.attlist{display:flex; flex-direction:column; gap:8px}
.attrow{display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; padding:10px 12px; background:var(--s2); border-radius:var(--r-ctl); color:var(--ink); text-decoration:none}
.attrow:hover{background:var(--s3)}
.atttxt{display:flex; flex-direction:column; gap:2px; min-width:0}
.atthead{display:flex; gap:8px; align-items:baseline}
.atthead b{font-weight:600}
.attcat{font-family:var(--font-cond); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.attbody{font-size:13px; color:var(--ink2)}
.attn{font-size:12px; color:var(--ink3); white-space:nowrap}
.goalcol{display:flex; flex-direction:column; gap:12px}
.goalcol .goal{text-decoration:none; color:inherit}
.goalnone{color:var(--ink2)}
.goalall{align-self:flex-end; color:var(--accent-ink); font-weight:600; font-size:13px; text-decoration:none}
.cmprow{display:grid; grid-template-columns:minmax(200px,1.3fr) 72px 72px repeat(6,minmax(0,1fr)) 96px; gap:0 14px; align-items:center; padding:10px 12px; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:13px}
a.cmprow:hover{background:var(--s2)}
.cmphd{border-top:0; padding:4px 12px; font-family:var(--font-cond); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}
.cmphd button{font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.cmphd button.on{color:var(--ink)}
.cmprow .c, .cmphd .c{text-align:center; justify-self:center}
.cmpwho{display:flex; align-items:center; gap:10px; min-width:0}
.cmpwin{font-size:16px; font-weight:700}
.cmpcell{display:flex; flex-direction:column; align-items:center; gap:4px; width:100%}
.cmpcell .mono{font-weight:600}
.cmptrack{display:block; width:100%; height:4px; border-radius:99px; background:var(--s2); overflow:hidden}
.cmpfill{display:block; height:100%; border-radius:99px; background:var(--ink3)}
.cmpfill.good{background:var(--good)} .cmpfill.warn{background:var(--warn)} .cmpfill.aka{background:var(--aka)}
.cmpfoot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding:10px 12px 0; font-size:12px; color:var(--ink3)}
.cmpcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.cmpcard{display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--s2); border-radius:var(--r-ctl); color:var(--ink); text-decoration:none}
.cmpcard:hover{background:var(--s3)}
.cmphead{display:flex; align-items:center; gap:10px}
.cmphead .swtxt{flex:1}
.cmpattrs{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; text-align:center}
.cmpattr .pak{color:var(--ink3)} .cmpattr .mono{font-weight:700; font-size:15px}
.workgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.workgrid h4 .scoutpill{margin-left:8px; vertical-align:middle}
.todolist{display:flex; flex-direction:column; gap:8px}
.todorow{display:grid; grid-template-columns:28px 1fr auto auto; gap:12px; align-items:center; padding:10px 14px; background:var(--s2); border-radius:var(--r-ctl); color:var(--ink); text-decoration:none; font-size:13px}
.todorow:hover{background:var(--s3)}
.todorow .mono{font-size:12px; color:var(--ink3); white-space:nowrap}

@media (max-width:1000px){
  .attrcard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attgrid, .workgrid, .seasongrid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .athgrid{grid-template-columns:1fr}
  .pcard{position:static}
  .athtiles .tile{grid-column:span 6}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attrcard{grid-template-columns:1fr}
  .logrow{grid-template-columns:70px minmax(0,1fr) 30px 64px 56px}
  .logrow > :nth-child(5), .logrow > :nth-child(6), .logrow > :nth-child(8), .logrow > :nth-child(9), .logrow > :nth-child(7){display:none}
  .switcher{width:min(420px, calc(100vw - 80px))}
  .cmprow{display:none} .cmpfoot{display:none}
}