/* Thuistraining: huisstijl van Jochen (donker, glas, gloed), gemaakt voor de gsm. */
:root{
  --bg:#05080f; --paneel:rgba(17,24,38,.62); --paneel2:rgba(30,40,60,.55); --rand:rgba(148,178,220,.13); --rand2:rgba(148,178,220,.24);
  --tekst:#edf2fa; --zacht:#9fb0c8; --stil:#6d7f99;
  --a1:#7fd8ff; --a2:#9b8cff; --verloop:linear-gradient(120deg,var(--a1),var(--a2));
  --goed:#5fe0a8; --goed-zacht:rgba(95,224,168,.14); --let:#ffc074; --let-zacht:rgba(255,192,116,.14); --fout:#ff8a80; --fout-zacht:rgba(255,138,128,.12);
  --uit:#ffb38a; /* uithouding: warmer accent */
  --r:18px;
  --kop:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --txt:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tekst);font-family:var(--txt);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* aurora in de hoeken */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 10% 0%,rgba(127,216,255,.16),transparent 70%),
             radial-gradient(45% 40% at 100% 15%,rgba(155,140,255,.15),transparent 70%),
             radial-gradient(50% 40% at 50% 110%,rgba(95,224,168,.07),transparent 70%)}
h1,h2,h3{font-family:var(--kop);margin:0;line-height:1.15;font-weight:300;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--a1)}
.verborgen{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* kop */
.kop{position:sticky;top:0;z-index:20;background:rgba(5,8,15,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--rand)}
.kop-in{max-width:760px;margin:0 auto;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;flex:none;border-radius:10px;background:var(--verloop);display:grid;place-items:center;box-shadow:0 0 18px rgba(127,216,255,.35)}
.logo svg{width:22px;height:22px}
.kop .titel{flex:1;min-width:0;font-family:var(--kop);font-size:18px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kop .titel small{display:block;font-family:var(--txt);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--stil);font-weight:600}
.knop-licht{background:rgba(148,178,220,.1);color:var(--zacht);border:1px solid var(--rand);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
.tabs{max-width:760px;margin:0 auto;display:flex;padding:0 8px}
.tabs a{flex:1;text-align:center;padding:10px 4px 12px;text-decoration:none;color:var(--stil);font-weight:600;font-size:14px;border-bottom:2px solid transparent}
.tabs a.actief{color:var(--tekst);border-image:var(--verloop) 1;border-bottom-width:2px;border-bottom-style:solid}

main{max-width:760px;margin:0 auto;padding:18px 14px calc(120px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:binnen .45s cubic-bezier(.2,.7,.2,1)}
@keyframes binnen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* panelen */
.paneel{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.paneel-kop{padding:14px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--rand)}
.paneel-kop h2{font-size:20px;flex:1;min-width:0}
.paneel-body{padding:16px}
.label{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--stil)}
.notitie{font-size:14px;color:var(--zacht);padding:10px 16px 0}
.zacht{color:var(--zacht)} .stil{color:var(--stil)} .klein{font-size:13px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(148,178,220,.1);color:var(--zacht);white-space:nowrap}
.chip.goed{background:var(--goed-zacht);color:var(--goed)}
.chip.let{background:var(--let-zacht);color:var(--let)}
.chip.uit{background:rgba(255,179,138,.13);color:var(--uit)}
.chip.tech{background:rgba(127,216,255,.12);color:var(--a1)}

/* held */
.held{padding:22px 18px 18px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.held::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(155,140,255,.25),transparent);pointer-events:none}
.held-getal{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.held-getal b{font-family:var(--kop);font-weight:200;font-size:64px;line-height:.95;font-variant-numeric:tabular-nums;background:var(--verloop);-webkit-background-clip:text;background-clip:text;color:transparent}
.held-getal span{color:var(--zacht);font-size:15px}
.dagjes{display:flex;gap:5px}
.dagjes i{flex:1;max-width:22px;aspect-ratio:1;border-radius:6px;background:rgba(148,178,220,.09);display:block}
.dagjes i.deel{background:rgba(255,192,116,.55)}
.dagjes i.vol{background:var(--goed);box-shadow:0 0 10px rgba(95,224,168,.45)}
.dagjes i.nu{outline:1.5px solid var(--zacht);outline-offset:2px}

/* balken */
.balk{height:8px;border-radius:999px;background:rgba(148,178,220,.1);overflow:hidden}
.balk>i{display:block;height:100%;width:0;border-radius:inherit;background:var(--verloop);transition:width .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 12px rgba(127,216,255,.4)}
.balk.vol>i{background:var(--goed);box-shadow:0 0 12px rgba(95,224,168,.5)}
.balk.groot{height:12px}

/* trainingskaarten */
.sectie{display:flex;align-items:center;gap:10px;margin-top:6px}
.sectie h2{font-size:22px}
.sectie .lijn{flex:1;height:1px;background:var(--rand)}
.tkaart{display:flex;flex-direction:column;gap:10px;padding:16px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:border-color .2s}
.tkaart:active{border-color:var(--rand2)}
.tkaart::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--verloop)}
.tkaart.uithouding::before{background:linear-gradient(180deg,var(--uit),#ff8a80)}
.tkaart-top{display:flex;align-items:flex-start;gap:12px}
.tkaart h3{font-size:20px;font-weight:400;flex:1}
.tkaart .pct{font-family:var(--kop);font-size:22px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--zacht)}
.tkaart.af .pct{color:var(--goed)}
.tkaart p{color:var(--zacht);font-size:14px}
.tkaart .pijl{color:var(--stil);font-size:22px;line-height:1}

/* knoppen en velden */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer;background:var(--verloop);color:#071021;text-decoration:none;min-height:46px;box-shadow:0 0 22px rgba(127,216,255,.25)}
.knop:disabled{opacity:.45;cursor:default;box-shadow:none}
.knop.tweede{background:rgba(148,178,220,.1);color:var(--tekst);border:1px solid var(--rand);box-shadow:none}
.knop.gevaar{background:var(--fout-zacht);color:var(--fout);border:1px solid rgba(255,138,128,.3);box-shadow:none}
.knop.klein{padding:8px 12px;min-height:40px;font-size:14px;border-radius:10px}
.knop.breed{width:100%}
.ikoon-knop{border:1px solid var(--rand);background:rgba(148,178,220,.06);border-radius:10px;width:40px;height:40px;display:inline-grid;place-items:center;cursor:pointer;color:var(--zacht);font-size:16px;line-height:1;flex:none}
.ikoon-knop:disabled{opacity:.3;cursor:default}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label,.veld .label-tekst{font-size:13px;font-weight:600;color:var(--zacht)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--rand2);border-radius:12px;background:rgba(5,8,15,.55);min-height:46px;font-size:16px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--a1);outline-offset:1px;border-color:transparent}
.rij{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.rij>.veld{flex:1;min-width:120px}
.melding{padding:11px 13px;border-radius:12px;font-size:14px;background:var(--fout-zacht);color:var(--fout)}
.melding.goed{background:var(--goed-zacht);color:var(--goed)}
.stapel{display:flex;flex-direction:column;gap:12px}
.keuzes{display:flex;gap:8px;flex-wrap:wrap}
.keuze{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--rand2);border-radius:12px;cursor:pointer;font-weight:600;min-height:44px}
.keuze input{width:20px;height:20px;margin:0;accent-color:var(--a1)}
.keuze:has(input:checked){border-color:var(--a1);background:rgba(127,216,255,.08)}

/* login */
.login{max-width:420px;margin:28px auto 0;width:100%}
.login .paneel-body{display:flex;flex-direction:column;gap:14px}
.welkom{font-size:30px;font-weight:200}
.wissel{display:grid;grid-template-columns:1fr 1fr;background:rgba(5,8,15,.5);border:1px solid var(--rand);border-radius:12px;padding:4px;gap:4px}
.wissel button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:700;color:var(--stil);cursor:pointer}
.wissel button.actief{background:rgba(148,178,220,.12);color:var(--tekst)}
input.pin{font-family:var(--kop);font-size:26px;font-weight:300;letter-spacing:.5em;text-align:center}

/* oefeningen */
.terug{display:inline-flex;align-items:center;gap:6px;color:var(--zacht);text-decoration:none;font-weight:600;font-size:14px;padding:4px 0}
.oef{padding:16px;border-top:1px solid var(--rand);display:flex;flex-direction:column;gap:10px}
.oef:first-child{border-top:0}
.oef-top{display:flex;gap:12px;align-items:flex-start}
.oef-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.oef-naam{font-weight:700;font-size:17px}
.oef.klaar .oef-naam{color:var(--zacht);text-decoration:line-through;text-decoration-color:var(--goed);text-decoration-thickness:2px}
.oef-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.oef-besch{color:var(--zacht);font-size:14.5px}
.vinken{display:flex;gap:6px;flex:none}
.vink{width:48px;height:48px;border-radius:14px;border:1.5px solid var(--rand2);background:rgba(5,8,15,.5);display:grid;place-items:center;cursor:pointer;font-weight:700;font-size:12px;color:var(--stil);padding:0}
.vink svg{width:24px;height:24px;display:none}
.vink.aan{background:var(--goed);border-color:var(--goed);color:#05221a;box-shadow:0 0 16px rgba(95,224,168,.45)}
.vink.aan svg{display:block}
.vink.aan .r{display:none}
.timer-knop{border:0;background:rgba(127,216,255,.12);color:var(--a1);font-weight:700;font-size:13px;border-radius:999px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:32px}

/* video */
.video-knop{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:1px solid var(--rand);background:rgba(5,8,15,.5);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left}
.video-knop img{width:120px;aspect-ratio:16/9;object-fit:cover;display:block;flex:none;background:#0c1220}
.video-knop span{flex:1;font-weight:600;font-size:14px;color:var(--zacht);padding-right:12px}
.video-knop .speel{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--verloop);color:#071021;font-size:12px;margin-right:4px;flex:none}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--rand)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* timer onderaan */
.timer{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(560px,calc(100% - 20px));background:rgba(17,24,38,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--rand2);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;z-index:40;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.timer .tijd{font-family:var(--kop);font-size:38px;font-weight:200;font-variant-numeric:tabular-nums;min-width:92px}
.timer .wat{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--zacht)}
.timer.af{border-color:var(--goed);box-shadow:0 0 30px rgba(95,224,168,.35)}
.timer.af .tijd{color:var(--goed)}
.timer button{background:rgba(148,178,220,.12);border:1px solid var(--rand);color:var(--tekst);border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
.klaar-ban{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--goed-zacht);color:var(--goed);font-weight:700;border:1px solid rgba(95,224,168,.3)}

/* beheer */
.speler-kaart .paneel-kop h2{font-size:24px}
.tregel{display:grid;grid-template-columns:1fr 46px;gap:4px 12px;align-items:center;padding:10px 16px;border-top:1px solid var(--rand)}
.tregel:first-child{border-top:0}
.tregel .naam{font-weight:600;font-size:15px}
.tregel .pct{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--zacht)}
.tregel .balk{grid-column:1 / -1}
.tregel .sub{grid-column:1 / -1;font-size:12.5px;color:var(--stil)}
.bewerk-rij{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-top:1px solid var(--rand);flex-wrap:wrap}
.bewerk-rij:first-child{border-top:0}
.bewerk-rij .oef-info{flex:1 1 0}
.bewerk-knoppen{display:flex;gap:6px;flex-basis:100%;justify-content:flex-end}
.duimpje{width:72px;aspect-ratio:16/9;border-radius:8px;object-fit:cover;flex:none;background:#0c1220;border:1px solid var(--rand)}
.bewerk-form{padding:16px;background:rgba(5,8,15,.45);border-top:1px solid var(--rand);display:flex;flex-direction:column;gap:12px}
.lijst-rij{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--rand);flex-wrap:wrap}
.lijst-rij:first-child{border-top:0}
.lijst-rij .naam{flex:1;min-width:120px;font-weight:600}
.pinchip{font-family:var(--kop);letter-spacing:.14em}
.kiezer{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.kiezer a{flex:none;padding:9px 14px;border-radius:999px;border:1px solid var(--rand);text-decoration:none;color:var(--zacht);font-weight:600;font-size:14px;white-space:nowrap}
.kiezer a.actief{background:rgba(127,216,255,.12);border-color:var(--a1);color:var(--tekst)}
.voorbeeld{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--zacht)}

.venster-achter{position:fixed;inset:0;background:rgba(5,8,15,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;z-index:60;padding:16px}
.venster{background:rgba(17,24,38,.95);border:1px solid var(--rand2);border-radius:var(--r);padding:20px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:14px}
.venster .rij{justify-content:flex-end}
.toast{position:fixed;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(17,24,38,.95);border:1px solid var(--rand2);color:var(--tekst);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:70}
.leeg{padding:24px 16px;text-align:center;color:var(--stil)}
.laden{padding:40px;text-align:center;color:var(--stil)}
@media (prefers-reduced-motion:reduce){main{animation:none}.balk>i{transition:none}}
@media (min-width:640px){
  .bewerk-knoppen{flex-basis:auto}
  .held-getal b{font-size:76px}
}
.held>.chip{align-self:flex-start}
.vinken.onder{flex-wrap:wrap}
.vinken.onder .vink{flex:1;max-width:72px}