:root{--roda-blauw: #1B3FCC;--roda-navy: #16205A;--roda-goud: #F5A800;--roda-cream: #F3F1EA;--roda-grijs: #5B6070;--roda-lijn: #D9D6CC;--roda-wit: #FFFFFF;--tag-auto: #3457D5;--tag-vinkje: #F5A800;--tag-niveau: #7A8194;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-kop: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--kop-weight: 800;--radius: 12px;--radius-pill: 999px;--schaduw: 0 2px 8px rgba(22, 32, 90, .12)}.sp-kop{font-family:var(--font-kop);font-weight:var(--kop-weight);color:var(--roda-navy);letter-spacing:-.01em;line-height:1.05}.sp-band{background:var(--roda-blauw);color:var(--roda-wit);border-bottom:3px solid var(--roda-goud);padding:10px 14px;border-radius:var(--radius) var(--radius) 0 0}.sp-xp-pill{display:inline-block;background:var(--roda-goud);color:var(--roda-navy);font-weight:800;padding:6px 16px;border-radius:var(--radius-pill)}.sp-tag{display:inline-block;color:var(--roda-wit);font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}.sp-tag--auto{background:var(--tag-auto)}.sp-tag--vinkje{background:var(--tag-vinkje);color:var(--roda-navy)}.sp-tag--niveau{background:var(--tag-niveau)}.sp-btn{background:var(--roda-goud);color:var(--roda-navy);font-weight:800;border:none;padding:12px 20px;border-radius:var(--radius-pill);cursor:pointer}.sp-btn--secundair{background:var(--roda-blauw);color:var(--roda-wit)}.sp-kaart{background:var(--roda-wit);border:1px solid var(--roda-lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:16px}.sp-badge--locked{opacity:.35;filter:grayscale(1)}.sp-badge--brons{box-shadow:0 0 0 2px #cd7f32 inset}.sp-badge--zilver{box-shadow:0 0 0 2px silver inset}.sp-badge--goud{box-shadow:0 0 0 2px var(--roda-goud) inset}*{box-sizing:border-box}html,body{margin:0}body{font-family:var(--font-body);background:var(--roda-cream);color:var(--roda-navy);-webkit-text-size-adjust:100%}a{color:var(--roda-blauw)}.app{max-width:640px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 8px) 14px calc(env(safe-area-inset-bottom) + 48px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 12px}.topbar h1{font-family:var(--font-kop);font-weight:800;font-size:22px;margin:0;color:var(--roda-navy)}.topbar .sub{color:var(--roda-grijs);font-size:13px;margin-top:2px}.who{font-size:13px;color:var(--roda-grijs);text-align:right}.who b{color:var(--roda-navy);display:block}.topright{display:flex;align-items:center;gap:12px}.levelbadge{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none}.levelbadge .lvl-ring{position:relative;width:60px;height:60px}.levelbadge svg{display:block}.levelbadge .lvl-num{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:23px;line-height:1;color:var(--roda-navy);font-family:var(--font-kop, inherit)}.levelbadge .lvl-xp{font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1;color:var(--roda-navy);opacity:.75;white-space:nowrap}.kaart{background:var(--roda-wit);border:1px solid var(--roda-lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:16px;margin-bottom:16px}.kaart>h2{font-family:var(--font-kop);font-weight:800;font-size:17px;margin:0 0 12px;color:var(--roda-navy)}.band{background:var(--roda-blauw);color:var(--roda-wit);border-bottom:3px solid var(--roda-goud);padding:12px 14px;border-radius:var(--radius) var(--radius) 0 0;font-family:var(--font-kop);font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase}.band+.kaart-body{border:1px solid var(--roda-lijn);border-top:none;border-radius:0 0 var(--radius) var(--radius);background:var(--roda-wit);padding:16px;margin-bottom:16px;box-shadow:var(--schaduw)}label.veld{display:block;margin-bottom:14px}label.veld>span{display:block;font-size:13px;font-weight:700;color:var(--roda-navy);margin-bottom:6px}label.veld>span small{font-weight:400;color:var(--roda-grijs)}input,select,textarea{width:100%;min-width:0;font:inherit;color:var(--roda-navy);background:#fff;border:1.5px solid var(--roda-lijn);border-radius:10px;padding:12px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=date],input[type=time]{min-height:46px}input:focus,select:focus,textarea:focus{border-color:var(--roda-blauw)}textarea{min-height:72px;resize:vertical}.rij{display:flex;gap:10px}.rij>*{flex:1;min-width:0}.segment{display:flex;gap:8px}.segment button{flex:1;padding:12px;border-radius:10px;border:1.5px solid var(--roda-lijn);background:#fff;font-weight:700;color:var(--roda-navy);cursor:pointer}.segment button.actief{background:var(--roda-blauw);color:#fff;border-color:var(--roda-blauw)}.check{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1.5px solid var(--roda-lijn);border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff}.check.aan{border-color:var(--roda-goud);background:#fff9ec}.check input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--roda-goud)}.check .t{font-weight:700;font-size:14px}.check .d{font-size:12px;color:var(--roda-grijs)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--roda-goud);color:var(--roda-navy);font-weight:800;border:none;padding:14px 20px;border-radius:var(--radius-pill);cursor:pointer;font-size:15px;width:100%}.btn:disabled{opacity:.6;cursor:default}.btn.blauw{background:var(--roda-blauw);color:#fff}.btn.klein{width:auto;padding:8px 14px;font-size:13px;border-radius:8px}.btn.grijs{background:#e7e5dd;color:var(--roda-navy)}.pill{display:inline-block;background:var(--roda-goud);color:var(--roda-navy);font-weight:800;padding:4px 12px;border-radius:999px;font-size:13px}.tag{display:inline-block;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em}.tag.auto{background:var(--tag-auto)}.tag.vinkje{background:var(--tag-vinkje);color:var(--roda-navy)}.status{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}.status.nieuw{background:#e9edff;color:#2740b8}.status.gezien{background:#fff1cf;color:#8a6400}.status.verwerkt{background:#dff3e6;color:#1d7a44}.melding{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;font-size:14px}.melding.ok{background:#dff3e6;color:#1d7a44}.melding.err{background:#ffe3e0;color:#b32a22}.hint{color:var(--roda-grijs);font-size:13px}.inz{border:1px solid var(--roda-lijn);border-radius:10px;padding:12px;margin-bottom:10px;background:#fff}.inz .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.inz .uitslag{font-family:var(--font-kop);font-weight:800;font-size:18px}.inz .meta{font-size:12px;color:var(--roda-grijs)}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{font-size:12px;background:var(--roda-cream);border:1px solid var(--roda-lijn);padding:3px 9px;border-radius:999px}.rij-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.rij-tools select{width:auto;flex:none}.login-screen{position:relative;min-height:100vh;overflow:hidden}.login-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:#16205a url(/login-bg.jpg) center/cover no-repeat;filter:blur(7px);transform:scale(1.08)}.login-dim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:linear-gradient(180deg,#16205a8c,#090d22c7)}.login-wrap{position:relative;z-index:1;max-width:380px;margin:0 auto;padding:calc(6vh + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}.login-wrap h1{font-family:var(--font-kop);font-weight:800;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}.login-intro{color:#ffffffd1;margin-top:-4px}.logo-dot{width:56px;height:56px;border-radius:16px;background:var(--roda-goud);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;box-shadow:0 6px 20px #00000059}.center{text-align:center}.spinner{color:var(--roda-grijs);text-align:center;padding:40px 0}.icon-input{width:56px;flex:none;text-align:center;font-size:26px;padding:8px 4px}.mini{font-size:12px;color:var(--roda-grijs);display:flex;align-items:center;gap:5px;flex-direction:row}.mini input{width:58px}.mini-check{font-size:12.5px;color:var(--roda-navy);display:flex;align-items:center;gap:5px}.mini-check input{width:auto}.btn.groot{padding:16px;font-size:16px;margin-top:4px}.result-chip{margin-top:14px;text-align:center;font-weight:800;font-size:16px;padding:12px;border-radius:12px;letter-spacing:.02em;animation:pop .25s ease}.result-chip b{font-size:20px}.result-chip.win{background:#dff3e6;color:#1d7a44}.result-chip.draw{background:#fff1cf;color:#8a6400}.result-chip.loss{background:#eef1ff;color:#2740b8}@keyframes pop{0%{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}.weekly{display:flex;gap:12px;align-items:center;cursor:pointer;padding:14px;border:2px solid var(--roda-lijn);border-radius:14px;background:#fff;transition:border-color .15s,background .15s,transform .05s}.weekly:active{transform:scale(.99)}.weekly.aan{border-color:var(--roda-goud);background:#fff9ec}.weekly.info{cursor:default;background:#f4f7ff;border-color:#dbe3ff}.weekly-ico{font-size:30px;flex:none;width:44px;text-align:center}.weekly .t{font-weight:800;font-size:15px}.weekly .d{font-size:12.5px;color:var(--roda-grijs);margin-top:2px}.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-rows:1fr}.badge-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;border-radius:16px;cursor:pointer;border:2px solid var(--roda-lijn);background:#fff;color:var(--roda-navy);transition:transform .06s ease,border-color .15s,box-shadow .15s,background .15s}.badge-tile:active{transform:scale(.96)}.badge-tile:not(.teller){justify-content:center}.badge-tile .ico{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;font-size:30px;line-height:1;background:radial-gradient(circle at 50% 28%,#fff,#e9edf6);border:3px solid #d9d6cc;box-shadow:inset 0 2px 3px #ffffffe6,inset 0 -5px 9px #16205a1a,0 3px 8px #16205a24;filter:grayscale(.5);opacity:.9;transition:.15s}.badge-tile .naam{font-weight:800;font-size:13px;text-align:center;line-height:1.15}.badge-tile.aan{border-color:var(--roda-goud);background:linear-gradient(180deg,#fff8e9,#fff);box-shadow:0 6px 18px #f5a80047}.badge-tile.aan .ico{filter:none;opacity:1;border-color:var(--roda-goud)}.badge-tile.aan.brons .ico{border-color:#cd7f32}.badge-tile.aan.zilver .ico{border-color:#8d97a1}.badge-tile.aan.goud .ico{border-color:var(--roda-goud)}.badge-tile .vink{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--roda-goud);color:var(--roda-navy);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026}.badge-tile .sub{font-size:11.5px;color:var(--roda-grijs);text-align:center;line-height:1.2}.badge-tile.aan .sub{color:var(--roda-navy)}.veld-label{display:block;font-size:13px;font-weight:700;color:var(--roda-navy);margin-bottom:6px}.stepper{display:flex;align-items:stretch;gap:8px}.stepper>button{width:52px;flex:none;font-size:24px;font-weight:800;line-height:1;border:1.5px solid var(--roda-lijn);background:#fff;border-radius:10px;color:var(--roda-blauw);cursor:pointer;-webkit-user-select:none;user-select:none}.stepper>button:active{background:var(--roda-cream)}.stepper>input{flex:1;min-width:0;width:auto;text-align:center;font-weight:800;font-size:18px}.badge-tile.teller{cursor:default}.teller-rij{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}.teller-rij button{width:40px;height:40px;border-radius:11px;border:1.5px solid var(--roda-lijn);background:#fff;font-size:22px;font-weight:800;line-height:1;color:var(--roda-blauw);cursor:pointer}.teller-rij button:active{background:var(--roda-cream)}.teller-rij .count{font-size:24px;font-weight:900;min-width:24px;text-align:center}.badge-tile.aan.brons{border-color:#cd7f32;background:linear-gradient(180deg,#fdf1e7,#fff);box-shadow:0 6px 18px #cd7f3242}.badge-tile.aan.zilver{border-color:#9aa3ad;background:linear-gradient(180deg,#f3f6f9,#fff);box-shadow:0 6px 18px #8c96a04d}.badge-tile.aan.goud{border-color:var(--roda-goud);background:linear-gradient(180deg,#fff8e9,#fff);box-shadow:0 6px 18px #f5a8004d}.tier-pill{position:absolute;top:8px;right:8px;font-size:10px;font-weight:900;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}.tier-pill.brons{background:#cd7f32;color:#fff}.tier-pill.zilver{background:#8d97a1;color:#fff}.tier-pill.goud{background:var(--roda-goud);color:var(--roda-navy)}.success-card{text-align:center;background:linear-gradient(160deg,var(--roda-blauw),var(--roda-navy));color:#fff;border-radius:16px;padding:22px 18px;margin-bottom:16px;border-bottom:4px solid var(--roda-goud);animation:pop .3s ease}.success-card .trofee{font-size:44px}.success-card h2{font-family:var(--font-kop);font-weight:800;margin:6px 0 4px}.success-card p{margin:0;color:#ffffffd9;font-size:14px}.foto-gekozen{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1.5px solid var(--roda-lijn);border-radius:10px;font-size:13px}.foto-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:13px;color:var(--roda-navy);background:#fff9ec;border:1.5px solid var(--roda-goud);border-radius:10px;padding:10px 12px}.foto-consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--roda-goud)}.foto-blok{margin-top:10px}.foto-blok img{max-width:100%;width:260px;border-radius:10px;display:block;margin-bottom:6px;border:1px solid var(--roda-lijn)}.btn.danger{background:var(--roda-rood, #D6413F);color:#fff}