/* Olympia 5 Scorito — vormgeving (Scorito-stijl) */
:root{
  --bg:#0F0F0F; --card:#1A1A1A; --card2:#202020; --line:#262626; --ink:#FFFFFF; --mut:#929293;
  --red:#E54937; --red-d:#C92C1A; --blue:#DF3223; --ok:#00B76E; --warn:#FFBF00; --bad:#E54937; --gold:#FFBF00;
  --pcA:#E54937; --pcM:#0073FF; --pcV:#FF8E0D; --pcK:#00B76E;
  --turf1:#2E8040; --turf2:#296F38; --pline:rgba(255,255,255,.75);
  --navy:#00365B; --sco:#DF3223;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
button,input,select,.pill,.stpb,.wrow,.caprow{touch-action:manipulation}
[hidden]{display:none !important}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; font-size:16px}
button{font:inherit; border:none; background:none; padding:0; color:inherit; cursor:pointer; text-align:inherit}
input,select{font:inherit; width:100%; padding:11px 13px; border:1px solid #3d3d3d;
  border-radius:6px; background:#202020; color:var(--ink)}
input::placeholder{color:#5C6069}
input:focus,select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,115,255,.2)}
header{position:sticky; top:0; z-index:30; background:#000; color:#fff; min-height:52px; padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center; gap:12px; padding:8px 16px;
  padding-top:calc(8px + env(safe-area-inset-top)); border-bottom:1px solid #1F1F1F}
.hlogo{width:40px; height:40px; border-radius:50%; background:#fff; flex:0 0 40px;
  display:flex; align-items:center; justify-content:center}
.hlogo img{width:32px; height:32px; object-fit:contain}
.hcenter{flex:1; display:flex; justify-content:center}
.hcenter img{height:24px; object-fit:contain}
.uava{width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:#262626; color:#fff;
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;
  border:1px solid #3d3d3d}
main{max-width:520px; margin:0 auto; padding:16px 14px calc(100px + env(safe-area-inset-bottom,0px))}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px}
.card h2{margin:0 0 10px; font-weight:700; font-size:20px; letter-spacing:.2px}
.card h3{margin:0 0 8px; font-weight:700; font-size:16px; color:#D5D8DD}
.secthead{display:flex; align-items:center; gap:8px; font-weight:700; font-size:22px; margin:6px 2px 12px}
.secthead .inf{width:18px; height:18px; border-radius:50%; border:1.5px solid var(--mut); color:var(--mut);
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.eyebrow{font-size:12.5px; font-weight:500; color:var(--mut)}
.mut{color:var(--mut); font-size:13px}
.small{font-size:12px}
.btn{display:block; width:100%; text-align:center; padding:13px; border-radius:100px;
  background:var(--blue); color:#fff; font-weight:500; font-size:15px}
.btn:active{transform:scale(.985)}
.btn.ghost{background:#262626; color:var(--ink); border:1px solid #3d3d3d; font-weight:500; border-radius:100px}
.btn.mini{display:inline-block; width:auto; padding:8px 14px; font-size:13px; border-radius:10px}
.btn.gray{background:#262626; color:var(--ink); border:1px solid #3d3d3d; font-weight:500}
.btn.navy{background:var(--blue)}
.btn.dis{opacity:.4; pointer-events:none}
.row{display:flex; gap:8px; align-items:center}
.row>*{min-width:0}
.grow{flex:1}
.badge{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; vertical-align:middle}
.b-open{background:rgba(43,196,110,.16); color:#43D687}
.b-lock{background:rgba(240,162,43,.16); color:#F5B54F}
.b-done{background:#26292F; color:#9BA1AA}
.b-cs{background:rgba(61,123,250,.16); color:#6E9BFF}
.b-plus{background:rgba(43,196,110,.16); color:#43D687}
.b-min{background:rgba(240,91,78,.16); color:#F57F74}
.b-duur{background:rgba(240,162,43,.16); color:#F5B54F}
.b-standaard{background:rgba(61,123,250,.16); color:#6E9BFF}
.b-goedkoop{background:rgba(43,196,110,.16); color:#43D687}
nav.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:30; background:#000; padding-bottom:env(safe-area-inset-bottom,0px);
  border-top:1px solid #1F1F1F; display:grid; grid-template-columns:repeat(4,1fr);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom)); min-height:56px}
nav.tabbar button{display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:11px; font-weight:400; color:#808080; padding:5px 0 2px; text-align:center}
nav.tabbar button.on{color:#fff}
nav.tabbar svg{width:23px; height:23px}
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 6px; text-align:center}
.stat .lb{display:block; font-size:11.5px; font-weight:500; color:var(--mut)}
.stat .vl{display:block; font-weight:700; font-size:22px; line-height:1.2; margin-top:2px}
.stat.warn .vl{color:var(--bad)}
.fxhead{display:flex; align-items:center; gap:12px}
.dateblk{width:48px; flex:0 0 48px; text-align:center; background:#262626; border-radius:12px; padding:7px 2px}
.dateblk .d{display:block; font-weight:700; font-size:19px; line-height:1}
.dateblk .mo{display:block; font-size:10.5px; font-weight:500; color:var(--mut); margin-top:2px}
.pitchwrap{border-radius:12px; overflow:hidden; border:1px solid #1F1F1F; background:#0f0f0f}
.pitch{position:relative; background:#0B0C0E}
.pitch .field{position:absolute; inset:0; width:100%; height:100%; display:block}
.pl{position:absolute; pointer-events:none; border:2px solid var(--pline)}
.pl.out{inset:10px; border-radius:2px}
.pl.mid{left:10px; right:10px; top:46%; border-width:2px 0 0 0}
.pl.circ{left:50%; top:46%; width:110px; height:110px; border-radius:50%; transform:translate(-50%,-50%)}
.pl.boxT{left:50%; top:10px; width:200px; height:56px; border-top:none; transform:translateX(-50%)}
.pl.goalT{left:50%; top:10px; width:96px; height:24px; border-top:none; transform:translateX(-50%)}
.pl.boxB{left:50%; bottom:10px; width:200px; height:56px; border-bottom:none; transform:translateX(-50%)}
.pl.goalB{left:50%; bottom:10px; width:96px; height:24px; border-bottom:none; transform:translateX(-50%)}
.pitch .rows{position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:562px; padding:66px 0 30px}
.prow{display:flex; justify-content:center; gap:26px}
.formbar{display:flex; align-items:center; gap:10px; padding:13px 16px; background:#0f0f0f; color:#fff;
  font-weight:700; font-size:19px; letter-spacing:.5px}
.formbar svg{width:21px; height:21px; opacity:.85}
.formbar .inf{width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  color:rgba(255,255,255,.75); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.formtag{position:absolute; left:14px; bottom:10px; display:flex; align-items:center; gap:8px;
  color:#fff; font-weight:700; font-size:19px; letter-spacing:1px; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.formtag .inf{width:17px; height:17px; border-radius:50%; border:1.5px solid rgba(255,255,255,.75);
  font-size:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:700}
.pcard{width:106px; padding:0; text-align:center; position:relative}
.pcard:active{transform:scale(.97)}
.figure{display:flex; align-items:flex-end; justify-content:center; height:68px; margin-bottom:-3px;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.35))}
.shirtsvg{width:74px; height:67px; display:block}
.shirtimg{height:66px; width:auto; display:block; margin:0 auto}
.foto{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2.5px solid #fff; display:block}
.pcard .nm{display:block; background:#0A0A0C; color:#fff; font-size:14px; font-weight:500;
  padding:6px 8px 5px; border-radius:5px 5px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcard .pr{display:flex; align-items:center; justify-content:center; gap:6px; background:#fff; color:#111216;
  font-weight:700; font-size:13.5px; letter-spacing:.4px; padding:4.5px 6px; border-radius:0 0 5px 5px}
.pchip{width:19px; height:19px; border-radius:5px; color:#fff; font-style:normal; font-size:10.5px;
  font-weight:900; display:inline-flex; align-items:center; justify-content:center; flex:0 0 17px}
.pc-A{background:var(--pcA)} .pc-M{background:var(--pcM)} .pc-V{background:var(--pcV)} .pc-K{background:var(--pcK)}
.pcard.empty .figure{opacity:.85}
.capb{position:absolute; top:6px; right:10px; width:23px; height:23px; border-radius:50%;
  background:#FFBF00; color:#0f0f0f; font-weight:900; font-size:12.5px; display:flex; align-items:center;
  justify-content:center; border:2px solid #fff; z-index:2}
.benchbar{background:#0f0f0f; padding:13px 10px 16px; border-top:1px solid #1F1F1F}
.benchbar .bt{display:flex; justify-content:space-between; align-items:baseline; color:#E4E6EA;
  font-weight:700; font-size:15px; margin:0 6px 10px}
.benchbar .bt span:last-child{font-weight:400; font-size:11.5px; color:var(--mut)}
.benchrow{display:flex; gap:14px; justify-content:center}
.boards{background:var(--navy); display:flex; align-items:center; justify-content:center; padding:7px 0;
  overflow:hidden; border-bottom:2px solid rgba(255,255,255,.14)}
.boards .schip{margin:0 8px; flex:0 0 auto; border-radius:5px; padding:2.5px 8px}
.boards .schip img{height:11px}
.schip{background:#fff; border-radius:7px; padding:3px 9px; display:inline-flex; align-items:center}
.schip img{height:13px; display:block}
.scotag{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; border-radius:999px;
  padding:4px 5px 4px 12px; font-size:9.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase}
.scotag .schip{border-radius:999px; padding:2px 8px}
.scotag .schip img{height:11px}
.heroSpon{margin-top:18px; display:inline-flex; align-items:center; gap:11px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:8px 14px}
.heroSpon .sl{font-size:9.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; opacity:.8}
.heroSpon .schip img{height:15px}
.sponline{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; font-size:10.5px;
  font-weight:500; letter-spacing:.6px; text-transform:uppercase; color:var(--mut)}
.sponline img{height:10px}
.budget{height:9px; background:#22252B; border-radius:5px; overflow:hidden; margin:7px 0 3px}
.budget div{height:100%; background:linear-gradient(90deg,#2BC46E,#1EA45A); border-radius:5px; transition:width .25s}
.budget.over div{background:linear-gradient(90deg,#F05B4E,#C93A2E)}
.gauges{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 16px}
.gauge{text-align:center}
.gauge svg{width:92px; height:92px}
.gauge .gv{font-weight:700; font-size:26px; fill:#fff}
.gauge .gl{font-size:12.5px; color:var(--mut); margin-top:-6px}
.pillrow{display:flex; gap:9px; margin:2px 0 18px; flex-wrap:wrap}
.pill{padding:9px 18px; border-radius:100px; background:#262626; color:#fff; font-weight:400; font-size:14px}
.pill.on{background:var(--blue); color:#fff; font-weight:500}
.pill.cap{background:var(--gold); color:#0f0f0f; font-weight:500}
/* Captain kiezen — Scorito-rijen */
.cappick{padding:0; overflow:hidden}
.cappick .cph{display:flex; align-items:center; gap:10px; padding:16px 16px 0}
.cappick .cph h2{margin:0; font-size:19px; flex:1}
.tag2x{background:var(--gold); color:#0f0f0f; font-weight:900; font-size:11.5px; border-radius:100px; padding:4px 10px}
.caprow{display:flex; align-items:center; gap:12px; width:100%; padding:9px 16px; border-top:1px solid var(--line)}
.caprow .cfig{width:38px; flex:0 0 38px; display:flex; justify-content:center}
.caprow .cfig img,.caprow .cfig svg{height:38px; width:auto; max-width:38px; object-fit:contain}
.caprow .cnm{flex:1; text-align:left; font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px}
.capc{width:28px; height:28px; flex:0 0 28px; border-radius:50%; border:1.5px solid #3d3d3d; color:var(--mut);
  font-weight:900; font-size:13px; display:inline-flex; align-items:center; justify-content:center}
.caprow.on{background:rgba(255,191,0,.08)}
.caprow.on .capc{background:var(--gold); border-color:var(--gold); color:#0f0f0f}
/* Toto — Scorito-matchup */
.tgrid{display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:start; margin:18px 0 10px}
.tteam{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.tteam .tl{width:46px; height:46px; border-radius:50%; background:#262626; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:15px; overflow:hidden}
.tteam .tl img{width:40px; height:40px; object-fit:contain}
.tteam .tn{font-size:12px; font-weight:500; max-width:100px; line-height:1.3}
.tscore{display:flex; align-items:center; gap:9px; padding-top:4px}
.tin{width:52px; height:56px; text-align:center; font-size:26px; font-weight:700; background:#202020;
  border:1px solid #3d3d3d; border-radius:8px; color:#fff; padding:0; -moz-appearance:textfield}
.tin:focus{border-color:var(--blue); outline:none}
.tin::-webkit-outer-spin-button,.tin::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.tdash{color:var(--mut); font-weight:700; font-size:20px}
.list{display:flex; flex-direction:column; gap:7px}
.li{display:flex; align-items:center; gap:11px; padding:10px 11px; border:1px solid var(--line);
  border-radius:14px; background:var(--card)}
.li .ava{width:42px; height:42px; border-radius:50%; flex:0 0 42px; background:#26292F; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff}
.li .ava img{width:100%; height:100%; object-fit:cover}
.li .nm{font-size:14.5px; font-weight:500}
.li .sub{font-size:11.5px; color:var(--mut); margin-top:1px}
.li.sel{border-color:var(--blue); background:rgba(0,115,255,.10)}
.li.dim{opacity:.4}
.rank{display:flex; align-items:center; gap:12px; padding:12px 10px; border-bottom:1px solid var(--line); width:100%}
.rank:last-child{border-bottom:none}
.rank .pos{width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:#262626; color:#c0c0c0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px}
.rank.r1 .pos{background:var(--gold); color:#101114}
.rank.r2 .pos{background:#AEB3BB; color:#101114}
.rank.r3 .pos{background:#C98B4E; color:#101114}
.rank .pts{font-weight:700; font-size:22px}
.rank.me{background:rgba(0,115,255,.12); border-radius:12px; border-bottom-color:transparent}
.exp{background:#202020; border:1px solid var(--line); border-radius:12px; padding:9px 12px; margin:7px 0 5px}
.fx{display:flex; align-items:center; gap:12px; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:12px 14px; margin-bottom:10px}
.fx:active{transform:scale(.99)}
.fx .sc{font-weight:700; font-size:23px; margin-right:4px}
.scorehero{font-weight:700; font-size:38px; line-height:1.15; margin:8px 0 4px}
.sheetwrap{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.62); display:flex; align-items:flex-end}
.sheet{background:#161616; width:100%; max-width:520px; margin:0 auto; border-radius:22px 22px 0 0;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom)); max-height:90vh; overflow-y:auto;
  border-top:1px solid #22252B}
.pkrow{display:flex; align-items:center; gap:12px; padding:15px 2px; border-bottom:1px solid #2b2b2b}
.pkrow.dim{opacity:.55}
.pksub .nofit{color:#FF6B5E; font-weight:700}
.pkchip{width:27px; height:27px; border-radius:7px; font-size:13.5px; font-weight:900; color:#fff;
  display:flex; align-items:center; justify-content:center; flex:0 0 27px; font-style:normal}
.pkshirt{width:56px; flex:0 0 56px}
.pkshirt img,.pkshirt svg{height:62px; width:auto; display:block; margin:0 auto}
.pkshirt .foto{width:48px; height:48px; margin:0 auto}
.pkname{font-weight:700; font-size:16px}
.pksub{color:var(--mut); font-size:13px; margin-top:1px}
.pksub b{color:#D8DBE0}
.pkstats{display:flex; gap:16px; align-items:center; margin-top:7px; font-size:14.5px; font-weight:500}
.pkstats svg{width:17px; height:17px; color:var(--blue)}
.pkstats span{display:inline-flex; align-items:center; gap:6px}
.pkdet{color:var(--mut); font-size:13.5px; margin-top:9px; display:inline-flex; align-items:center; gap:6px}
.pkdet .chev{transition:.15s; display:inline-block}
.pkdet.open .chev{transform:rotate(180deg)}
.pkexp{background:#202020; border-radius:10px; padding:10px 12px; margin:9px 0 2px; font-size:13px; color:#C9CDD3}
.plus{width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:var(--blue); color:#fff;
  font-size:23px; font-weight:500; display:flex; align-items:center; justify-content:center; line-height:1}
.plus.done{background:#2BC46E; font-size:17px}
.plus.dimb{background:#262626; color:#606060}
.sheet h3{margin:0 0 4px; font-weight:700; font-size:19px}
.grab{width:40px; height:4.5px; border-radius:3px; background:#33363C; margin:0 auto 14px}
.step{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .lb{font-size:14.5px; font-weight:500}
.step .ctr{display:flex; align-items:center; gap:13px}
.step .ctr button{width:36px; height:36px; border-radius:50%; border:1.5px solid #2C2F36; background:#1E2126;
  font-size:19px; font-weight:500; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.step .val{min-width:22px; text-align:center; font-weight:700; font-size:18px}
.sw{width:48px; height:29px; border-radius:15px; background:#33363C; position:relative; transition:.15s; flex:0 0 48px}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%;
  background:#fff; transition:.15s}
.sw.on{background:var(--ok)} .sw.on::after{left:22px}
.toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(140px); z-index:70;
  background:#F3F4F6; color:#101114; padding:12px 20px; border-radius:14px; font-size:14px; font-weight:500;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2); max-width:88vw; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--ok); color:#fff}
.toast.err{background:var(--bad); color:#fff}
.btn.busy{opacity:.6; pointer-events:none}
.pcard:active,.pkrow:active,.wrow:active,.caprow:active{opacity:.7; transition:opacity .08s}
.stpb:active{transform:scale(.92)}
/* Aanwijs-modus: bank & captain direct op het veld kiezen */
.modebar{display:flex; align-items:center; gap:10px; background:#0A0A0C; color:#fff;
  padding:12px 12px 12px 16px; font-size:13.5px; font-weight:500; border-bottom:2px solid var(--ok)}
.modebar.gold{border-bottom-color:var(--gold)}
.modebar span{flex:1}
.modebar b{font-weight:900}
.modebar button{flex:0 0 auto; background:#262626; border:1px solid #3d3d3d; border-radius:100px;
  padding:7px 15px; font-size:12.5px; font-weight:700; color:#fff}
.pcard.elig .figure{animation:eligp 1.1s ease-in-out infinite}
@keyframes eligp{
  0%,100%{filter:drop-shadow(0 0 2px rgba(0,183,110,.35))}
  50%{filter:drop-shadow(0 0 11px rgba(0,183,110,.95))}}
.pcard.elig.gold .figure{animation-name:eligpg}
@keyframes eligpg{
  0%,100%{filter:drop-shadow(0 0 2px rgba(255,191,0,.35))}
  50%{filter:drop-shadow(0 0 11px rgba(255,191,0,.95))}}
.pcard.ineg{opacity:.35; pointer-events:none}
.pcard .selb{position:absolute; top:6px; left:10px; width:23px; height:23px; border-radius:50%;
  background:var(--ok); color:#fff; font-weight:900; font-size:15px; line-height:1; display:flex;
  align-items:center; justify-content:center; border:2px solid #fff; z-index:2}
.pcard .selb.rm{background:var(--bad)}
.pcard .selb.gold{background:var(--gold); color:#0f0f0f; font-size:12.5px}
.wzbtn{background:#262626; border:1px solid #3d3d3d; border-radius:100px; padding:5px 13px;
  font-size:12px; font-weight:700; color:#fff}
/* Compacte captain-kaart */
.capsel{display:flex; align-items:center; gap:13px; padding:13px 16px 16px}
.capsel .cfig{width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center}
.capsel .cfig img,.capsel .cfig svg{height:44px; width:auto; max-width:46px; object-fit:contain}
.capsel .cfig.ring{border-radius:50%; box-shadow:0 0 0 2.5px var(--gold)}
.capsel .cfig.q{border-radius:50%; border:2px dashed #3d3d3d; color:var(--mut); font-weight:900; font-size:18px}
.capsel b{font-size:15px}
.btn.goldbtn{background:var(--gold); color:#0f0f0f; font-weight:700}
.field{margin-bottom:11px}
.field label{display:block; font-size:12.5px; font-weight:500; color:var(--mut); margin-bottom:5px}
details.sec{background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:11px; overflow:hidden}
details.sec summary{list-style:none; padding:15px 16px; font-weight:700; font-size:16px;
  display:flex; align-items:center; gap:10px; cursor:pointer}
details.sec summary::-webkit-details-marker{display:none}
details.sec summary svg{width:20px; height:20px; color:var(--red)}
details.sec summary::after{content:"›"; margin-left:auto; font-size:20px; color:var(--mut);
  transform:rotate(90deg); transition:.15s}
details.sec[open] summary::after{transform:rotate(-90deg)}
details.sec .inner{padding:0 16px 16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px}
.tj{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line)}
.tj:last-child{border-bottom:none}
.center{text-align:center}
.hero{position:relative; margin:-16px -14px 20px; padding:46px 20px 30px; text-align:center; color:#fff; overflow:hidden}
.herobg{position:absolute; left:-14%; right:-14%; top:-52%; height:600px; opacity:.6}
.herobg .field{position:absolute; inset:0; width:100%; height:100%; display:block}
.herofade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,15,15,.15) 0%,rgba(15,15,15,.55) 45%,#0f0f0f 97%)}
.heroc{position:relative}
.hero .lclub{height:80px; object-fit:contain; filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.hero h1{font-weight:900; font-size:37px; letter-spacing:1.5px; margin:13px 0 0; text-transform:uppercase; line-height:1; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.hero p{font-size:11px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; opacity:.85; margin:9px 0 0; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.authseg{display:flex; gap:5px; background:#1A1A1A; border:1px solid var(--line); padding:4px; border-radius:100px; margin:2px 0 12px}
.authseg .aseg{flex:1; text-align:center; padding:10px 0; border-radius:100px; color:var(--mut); font-weight:500; font-size:13.5px; transition:background .15s,color .15s}
.authseg .aseg.on{background:var(--blue); color:#fff}
.ifield{display:flex; align-items:center; gap:11px; background:#202020; border:1px solid #3d3d3d; border-radius:10px; padding:0 13px; margin-bottom:10px}
.ifield:focus-within{border-color:var(--blue)}
.ifield svg{width:17px; height:17px; color:var(--mut); flex:0 0 17px}
.ifield input{background:none; border:none; padding:13.5px 0; width:100%; border-radius:0}
.ifield input:focus{outline:none}
.predbig{font-weight:700; font-size:34px; min-width:34px; text-align:center; line-height:1}

/* Invoer-wizard (beheer) */
.wizhead{display:flex; align-items:center; gap:11px; margin:2px 0 12px}
.wizhead .wx{width:32px; height:32px; border-radius:50%; background:#262626; color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:0 0 32px}
.wizhead .wt{flex:1; font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wizhead .stepn{color:var(--mut); font-size:12.5px; font-weight:500}
.wizbar{height:4px; background:#262626; border-radius:100px; overflow:hidden; margin-bottom:16px}
.wizbar div{height:100%; background:var(--blue); border-radius:100px; transition:width .25s}
.wizt{margin:0 0 4px; font-size:21px; font-weight:700}
.wcard{padding:0; overflow:hidden}
.wcard .whead{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px;
  font-weight:700; font-size:14px}
.wrow{display:flex; align-items:center; gap:12px; width:100%; padding:8px 16px; border-top:1px solid var(--line)}
.wrow .cfig{width:36px; flex:0 0 36px; display:flex; justify-content:center}
.wrow .cfig img,.wrow .cfig svg{height:36px; width:auto; max-width:36px; object-fit:contain}
.wrow .cnm{flex:1; text-align:left; font-weight:700; font-size:13.5px; display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; min-width:0}
.wrow .sub2{display:block; width:100%; font-weight:400; font-size:11px; color:var(--mut)}
.wrow.on{background:rgba(0,115,255,.07)}
.wrow.off{opacity:.5}
.selc{width:26px; height:26px; flex:0 0 26px; border-radius:50%; border:1.5px solid #3d3d3d; color:transparent;
  font-size:12.5px; font-weight:900; display:inline-flex; align-items:center; justify-content:center}
.wrow.on .selc{background:var(--blue); border-color:var(--blue); color:#fff}
.stp{display:inline-flex; align-items:center; gap:9px}
.stp b{min-width:20px; text-align:center; font-size:16px}
.stpb{width:31px; height:31px; border-radius:50%; background:#262626; color:#fff; font-size:17px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 31px}
.stpb:active{background:#3d3d3d}
.csnote{display:flex; gap:11px; align-items:center; background:rgba(0,183,110,.12);
  border:1px solid rgba(0,183,110,.45); border-radius:10px; padding:11px 13px; font-size:12.5px; margin-top:14px}
.evb{display:inline-flex; align-items:center; background:#262626; border-radius:100px; padding:3px 9px;
  font-size:10.5px; font-weight:500; color:#E4E6EA}
.exgrid{display:grid; grid-template-columns:1fr; gap:7px; padding:6px 16px 13px; background:rgba(255,255,255,.03)}
.exgrid .exi{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--mut)}

/* Olympia-wordmark in de header (Scorito blijft sponsor elders) */
#hdrSco{display:none}
.hwm{font-weight:900; font-size:17.5px; letter-spacing:3px; color:#fff}
.hwm b{color:var(--blue)}