:root{
  --ground:#EDF1EE; --surface:#FFFFFF; --surface-2:#F5F8F5;
  --ink:#141E1B; --muted:#5C6C66; --faint:#8A9A93; --line:#DCE4DF;
  --court:#0D6053; --court-soft:#0D605314; --on-court:#FFFFFF;
  --ball:#C7D62E; --on-ball:#3F480A;
  --win:#1F7A55; --loss:#A8504A;
  --shadow:0 1px 2px #141E1B0D, 0 8px 24px -12px #141E1B1F;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1614; --surface:#14201D; --surface-2:#1A2724;
    --ink:#E6EDE9; --muted:#94A69F; --faint:#6B7C76; --line:#25332F;
    --court:#4FD1B6; --court-soft:#4FD1B61A; --on-court:#08140F;
    --ball:#D9E93B; --on-ball:#1A1F04;
    --win:#4CC28C; --loss:#E08A83;
    --shadow:0 1px 2px #0006, 0 10px 28px -14px #0009;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1614; --surface:#14201D; --surface-2:#1A2724;
  --ink:#E6EDE9; --muted:#94A69F; --faint:#6B7C76; --line:#25332F;
  --court:#4FD1B6; --court-soft:#4FD1B61A; --on-court:#08140F;
  --ball:#D9E93B; --on-ball:#1A1F04;
  --win:#4CC28C; --loss:#E08A83;
  --shadow:0 1px 2px #0006, 0 10px 28px -14px #0009;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:15px/1.55 "Public Sans",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
a{color:var(--court)}
h1,h2,h3{font-family:Archivo,"Public Sans",sans-serif; text-wrap:balance; margin:0}
.wrap{max-width:820px; margin:0 auto; padding-inline:16px; padding-block:20px 8px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}

/* kop */
.top{background:var(--surface); border-bottom:1px solid var(--line)}
.top-in{max-width:820px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand strong{display:block; font-family:Archivo,sans-serif; font-stretch:112%; font-size:16px; font-weight:800; letter-spacing:-.01em}
.brand small{display:block; color:var(--faint); font-size:11px}
.mark{width:26px; height:26px; border-radius:50%; background:var(--ball); flex:none; box-shadow:inset 0 0 0 1px #0002}
.who{font-size:11.5px; color:var(--muted); text-decoration:none; text-align:right; flex:none}
.who:hover{color:var(--court)}

/* navigatie onderaan */
.tabs{
  position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex;
  background:var(--surface); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 16px -8px #0003;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; font-size:11px; font-weight:600; color:var(--muted);
  text-decoration:none; border-top:2px solid transparent;
}
.tab::before{content:attr(data-icon); font-size:17px; line-height:1}
.tab.on{color:var(--ink); border-top-color:var(--court)}
.tab:focus-visible{outline:2px solid var(--court); outline-offset:-3px}

/* algemeen */
.eyebrow{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600}
h1{font-size:20px; font-weight:800; font-stretch:110%; letter-spacing:-.015em}
h2{font-size:16px; font-weight:700}
.lede{color:var(--muted); font-size:13.5px; max-width:62ch; margin:4px 0 0}
.sec{margin-bottom:26px}
.sec-head{margin-bottom:12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.pad{padding:14px 16px}
.flash{background:var(--court-soft); border:1px solid var(--line); border-left:3px solid var(--court); border-radius:var(--r); padding:11px 14px; margin-bottom:16px; font-size:13.5px}
.err{border-left-color:var(--loss); color:var(--loss)}
.empty{color:var(--muted); font-size:13.5px}

/* avatars */
.av{width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; background:var(--surface-2);
    display:inline-grid; place-items:center; font:600 11px/1 "Public Sans",sans-serif; color:var(--muted);
    box-shadow:inset 0 0 0 1px var(--line)}
.av.sm{width:24px; height:24px; font-size:9px}
.av.lg{width:40px; height:40px; font-size:13px}

/* knoppen */
.btn{display:inline-block; appearance:none; cursor:pointer; border-radius:8px; padding:11px 16px;
  font:600 13.5px/1 "Public Sans",sans-serif; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); text-decoration:none}
.btn:hover{border-color:var(--court); color:var(--court)}
.btn:focus-visible{outline:2px solid var(--court); outline-offset:2px}
.btn.primary{background:var(--court); border-color:var(--court); color:var(--on-court)}
.btn.primary:hover{filter:brightness(1.08); color:var(--on-court)}
.btn.ghost{background:none; border-color:transparent; color:var(--muted); padding:8px 6px}
.btn.danger:hover{border-color:var(--loss); color:var(--loss)}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.actions .btn{flex:1; text-align:center}

/* spelers aanvinken */
.roster{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  font:500 13px/1 "Public Sans",sans-serif; cursor:pointer}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip:has(input:checked){background:var(--court); border-color:var(--court); color:var(--on-court); font-weight:600}
.chip:has(input:focus-visible){outline:2px solid var(--court); outline-offset:2px}

/* potjes */
.potje{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:13px 14px; margin-bottom:10px; box-shadow:var(--shadow)}
.potje-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.potje-n{font:600 10.5px/1 "IBM Plex Mono",monospace; color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
.duel{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center}
.side{display:flex; flex-direction:column; gap:6px; min-width:0}
.side select{width:100%; padding:8px 9px; border-radius:7px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:500 13px/1.2 "Public Sans",sans-serif}
.side select:focus-visible{outline:2px solid var(--court); outline-offset:1px}
.score{display:flex; align-items:center; gap:5px}
.score input{width:52px; height:46px; text-align:center; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:600 19px/1 "IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.score input:focus-visible{outline:2px solid var(--court); outline-offset:1px; border-color:var(--court)}
.score em{color:var(--faint); font-style:normal}
@media (max-width:560px){
  .duel{grid-template-columns:1fr; gap:8px}
  .score{justify-content:center}
}

/* voorstel */
.rot{display:flex; flex-direction:column; gap:8px}
.rot-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px}
.rot-n{font:600 10.5px/1 "IBM Plex Mono",monospace; color:var(--faint); width:52px; flex:none}
.rot-vs{font:600 10px/1 "Public Sans",sans-serif; text-transform:uppercase; letter-spacing:.09em; color:var(--faint)}
.rot-odds{margin-left:auto; font:500 11.5px/1 "IBM Plex Mono",monospace; color:var(--muted)}
@media (max-width:480px){ .rot-odds{margin-left:0; width:100%; padding-left:60px} }

/* ranglijst */
.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; min-width:560px}
th{text-align:left; font:600 10.5px/1 "Public Sans",sans-serif; text-transform:uppercase; letter-spacing:.09em;
  color:var(--faint); padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
th.r,td.r{text-align:right}
td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle}
tr:last-child td{border-bottom:0}
.rank{font:500 13px/1 "IBM Plex Mono",monospace; color:var(--faint); width:30px}
.who-cell{display:flex; align-items:center; gap:10px}
.who-cell b{font-weight:600; white-space:nowrap}
.who-cell small{display:block; color:var(--faint); font-size:11px; font-weight:400}
.lvl{font-family:Archivo,sans-serif; font-stretch:116%; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums}
.delta{font:500 12.5px/1 "IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.up{color:var(--win)} .down{color:var(--loss)}
.form{display:flex; gap:3px}
.form i{width:7px; height:17px; border-radius:2px; background:var(--line); display:block}
.form i.w{background:var(--win)} .form i.l{background:var(--loss)}

/* koppels */
.pairs{display:grid; gap:10px}
.pair{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow)}
.pair.best{border-color:var(--court); box-shadow:var(--shadow),0 0 0 1px var(--court)}
.pair-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px}
.badge{font:600 10px/1 "Public Sans",sans-serif; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 7px; border-radius:4px; background:var(--ball); color:var(--on-ball)}
.team{display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; font-weight:600}
.team .lv{margin-left:auto; font:500 12px/1 "IBM Plex Mono",monospace; color:var(--muted)}
.vs{display:flex; align-items:center; gap:8px; margin:2px 0}
.vs hr{flex:1; border:0; border-top:1px solid var(--line); margin:0}
.vs span{font:600 10px/1 "Public Sans",sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden; flex:1; max-width:120px}
.bar span{display:block; height:100%; background:var(--court)}
.balance{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); display:flex; gap:10px; align-items:center; font-size:12px; color:var(--muted)}
.note-sm{font-size:11.5px; color:var(--faint); margin-top:6px}

/* boekingen */
.booking{display:flex; align-items:center; gap:12px; padding:13px 15px; border-bottom:1px solid var(--line)}
.booking:last-child{border-bottom:0}
.booking .when{font-weight:600; font-size:14px}
.booking .meta{color:var(--muted); font-size:12.5px}
.booking .price{margin-left:auto; font:500 13px/1 "IBM Plex Mono",monospace; color:var(--muted)}

/* login */
.login{max-width:380px; margin:12vh auto 0; text-align:center}
.login .mark{width:44px; height:44px; margin:0 auto 14px; display:block}
.login h1{margin-bottom:6px}
.login form{margin-top:18px; display:flex; flex-direction:column; gap:10px}
.login input{padding:13px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:15px "Public Sans",sans-serif}
.login input:focus-visible{outline:2px solid var(--court); outline-offset:1px; border-color:var(--court)}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}