:root{
  --bh-primary:#f44336;
  --bh-primary-dark:#d32f2f;
  --bh-bg:#f4f6f8;
  --bh-card:#fff;
  --bh-text:#1d1d1f;
  --bh-muted:#5f6670;
  --bh-line:#e5e7eb;
  --bh-success:#17863b;
  --bh-warning:#b36b00;
  --bh-danger:#c62828;
  --bh-radius:.6rem;
  --bh-shadow:0 2px 6px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bh-bg);color:var(--bh-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
body{font-size:1rem;line-height:1.45}
button,input{font:inherit}
.scanner-shell{min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
.scanner-topbar{min-height:3.8rem;padding:.6rem max(1rem,env(safe-area-inset-right)) .6rem max(1rem,env(safe-area-inset-left));background:#fff;border-bottom:1px solid var(--bh-line);display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;top:0;z-index:20}
.scanner-logo{height:2rem;max-width:8rem;object-fit:contain}
.scanner-device-meta{text-align:right;display:flex;flex-direction:column;min-width:0}.scanner-device-meta strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scanner-device-meta span{font-size:.72rem;color:var(--bh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scanner-main{width:min(100%,72rem);margin:0 auto;padding:.6rem}
.scanner-card{background:var(--bh-card);border:1px solid var(--bh-line);border-radius:var(--bh-radius);box-shadow:var(--bh-shadow);padding:1rem;margin-bottom:.75rem}
.scanner-card h1,.scanner-card h2{margin:0 0 .4rem}.scanner-card h1{font-size:1.45rem}.scanner-card h2{font-size:1.05rem}.scanner-card p{margin:.2rem 0 1rem;color:var(--bh-muted)}
.scanner-pair-card{max-width:32rem;margin:8vh auto 0}.scanner-pair-form{display:grid;gap:.65rem}.scanner-pair-form label{font-weight:750}.scanner-pair-form input{width:100%;padding:.9rem 1rem;border:1px solid #cfd5dd;border-radius:.5rem;font-size:1.5rem;font-weight:800;letter-spacing:.35rem;text-align:center}
.scanner-btn{border:0;border-radius:.5rem;padding:.72rem .95rem;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.scanner-btn--primary{background:var(--bh-primary);color:#fff}.scanner-btn--secondary{background:#777;color:#fff}.scanner-btn:disabled{opacity:.55;cursor:not-allowed}
.scanner-alert{padding:.8rem 1rem;border-radius:.5rem;margin-bottom:.75rem;font-weight:700}.scanner-alert--success{background:#e8f7ed;color:#166534}.scanner-alert--error{background:#fdecec;color:#991b1b}
.scanner-event-head{background:#fff;border-radius:var(--bh-radius);box-shadow:var(--bh-shadow);padding:.75rem;margin:0 0 .65rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.scanner-event-head>div{min-width:0}.scanner-event-head h1{margin:.05rem 0;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scanner-event-head p{margin:0;color:var(--bh-muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scanner-kicker{font-size:.68rem;font-weight:800;color:var(--bh-primary);text-transform:uppercase;letter-spacing:.04em}.scanner-event-head .scanner-btn{padding:.55rem .7rem;font-size:.78rem;white-space:nowrap}
.scanner-event-list{display:grid;gap:.65rem}.scanner-event-option{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;border:1px solid var(--bh-line);border-radius:.55rem;padding:.8rem;cursor:pointer}.scanner-event-option input{width:1.1rem;height:1.1rem}.scanner-event-option span{display:flex;flex-direction:column}.scanner-event-option small{color:var(--bh-muted);margin-top:.15rem}.scanner-event-option em{font-style:normal;font-size:.74rem;font-weight:800;background:#f2f3f5;padding:.25rem .45rem;border-radius:999px}
.scanner-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem;margin-bottom:.65rem}.scanner-stats div{background:#fff;border-left:.24rem solid var(--bh-primary);border-radius:.5rem;box-shadow:var(--bh-shadow);padding:.55rem .65rem}.scanner-stats span{display:block;font-size:.67rem;color:var(--bh-muted);font-weight:700}.scanner-stats strong{display:block;font-size:1.2rem;line-height:1.1;margin-top:.05rem}
.scanner-camera-card{padding:.35rem;background:#111;border-color:#111;overflow:hidden}.scanner-camera-stage{position:relative}.scanner-reader{width:100%;height:72svh;min-height:28rem;background:#111;border-radius:.45rem;overflow:hidden}.scanner-reader video{object-fit:cover!important}.scanner-focus-frame{pointer-events:none;position:absolute;inset:50% auto auto 50%;width:min(68vw,20rem);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.92);border-radius:1rem;box-shadow:0 0 0 999rem rgba(0,0,0,.12),0 0 0 .08rem rgba(0,0,0,.22) inset}.scanner-focus-frame span,.scanner-focus-frame::before,.scanner-focus-frame::after{content:"";position:absolute}.scanner-focus-frame span{inset:50% auto auto 50%;width:2.2rem;height:.16rem;background:rgba(255,255,255,.9);transform:translate(-50%,-50%);border-radius:999px}.scanner-focus-frame::before{width:1rem;height:1rem;left:-.14rem;top:-.14rem;border-left:.24rem solid #fff;border-top:.24rem solid #fff;border-radius:.35rem 0 0 0}.scanner-focus-frame::after{width:1rem;height:1rem;right:-.14rem;bottom:-.14rem;border-right:.24rem solid #fff;border-bottom:.24rem solid #fff;border-radius:0 0 .35rem 0}
.scanner-camera-actions{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.5rem}.scanner-camera-actions .scanner-btn{width:100%}.scanner-help{font-size:.78rem!important;text-align:center;color:#d6d6d6!important;margin:.5rem .25rem .1rem!important}
.scanner-feedback[hidden]{display:none!important}.scanner-feedback{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(2rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));color:#fff}.scanner-feedback strong{font-size:clamp(2.4rem,12vw,5rem);line-height:1;font-weight:900;letter-spacing:.02em}.scanner-feedback span{font-size:1.15rem;font-weight:800;margin-top:.8rem}.scanner-feedback small{font-size:1rem;font-weight:700;margin-top:.45rem;opacity:.94;max-width:32rem}.scanner-feedback--success{background:#17863b}.scanner-feedback--warn{background:#c77a00}.scanner-feedback--error{background:#c62828}
.scanner-collapsible{padding:.75rem 1rem}.scanner-collapsible summary{cursor:pointer;font-weight:800;list-style-position:inside}.scanner-collapsible[open] summary{margin-bottom:.75rem}.scanner-manual-form{display:grid;grid-template-columns:1fr auto;gap:.55rem}.scanner-manual-form input{min-width:0;padding:.7rem .8rem;border:1px solid #cfd5dd;border-radius:.5rem}
.scanner-recent{display:grid;gap:.4rem}.scanner-recent-row{display:grid;grid-template-columns:4.5rem 1fr;gap:.5rem;align-items:center;padding:.55rem .65rem;border-radius:.45rem;background:#f7f8fa}.scanner-recent-row strong{font-size:.78rem}.scanner-recent-row span{font-size:.86rem}.scanner-recent-row--geldig{border-left:.25rem solid var(--bh-success)}.scanner-recent-row--al_gebruikt,.scanner-recent-row--verkeerd_event{border-left:.25rem solid var(--bh-warning)}.scanner-recent-row--geannuleerd,.scanner-recent-row--niet_gevonden,.scanner-recent-row--fout{border-left:.25rem solid var(--bh-danger)}
.scanner-empty{padding:.8rem;border:1px dashed #ccd2da;border-radius:.5rem;color:var(--bh-muted)}
.scanner-footer{padding:.75rem 1rem 1rem;text-align:center}.scanner-link-btn{border:0;background:none;color:var(--bh-muted);text-decoration:underline;cursor:pointer}

/* Full-screen scanmodus: camera is de hoofdinterface. */
body.scanner-mode{background:#000}
body.scanner-mode .scanner-shell{min-height:100svh;padding:0;background:#000}
body.scanner-mode .scanner-topbar{position:fixed;top:0;left:0;right:0;z-index:45;min-height:auto;padding:calc(.45rem + env(safe-area-inset-top)) max(.8rem,env(safe-area-inset-right)) .45rem max(.8rem,env(safe-area-inset-left));background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.28),transparent);border:0;color:#fff;backdrop-filter:none}
body.scanner-mode .scanner-logo{height:1.65rem;max-width:6.8rem;filter:drop-shadow(0 .1rem .2rem rgba(0,0,0,.35))}
body.scanner-mode .scanner-device-meta strong{font-size:.78rem;color:#fff;text-shadow:0 .1rem .2rem rgba(0,0,0,.55)}
body.scanner-mode .scanner-device-meta span{font-size:.66rem;color:rgba(255,255,255,.82);text-shadow:0 .1rem .2rem rgba(0,0,0,.55)}
body.scanner-mode .scanner-main{width:100%;max-width:none;margin:0;padding:0;background:#000}
body.scanner-mode .scanner-alert{position:fixed;z-index:70;top:5rem;left:.75rem;right:.75rem;margin:0;box-shadow:0 .25rem 1rem rgba(0,0,0,.28)}
body.scanner-mode .scanner-event-head{position:fixed;z-index:44;top:calc(3.15rem + env(safe-area-inset-top));left:max(.65rem,env(safe-area-inset-left));right:max(.65rem,env(safe-area-inset-right));margin:0;padding:.55rem .65rem;background:rgba(0,0,0,.52);border:1px solid rgba(255,255,255,.14);box-shadow:none;color:#fff;backdrop-filter:blur(.45rem);-webkit-backdrop-filter:blur(.45rem)}
body.scanner-mode .scanner-event-head h1{font-size:.96rem;color:#fff}
body.scanner-mode .scanner-event-head p{font-size:.7rem;color:rgba(255,255,255,.82)}
body.scanner-mode .scanner-kicker{font-size:.61rem;color:#ff8178}
body.scanner-mode .scanner-event-head .scanner-btn{padding:.45rem .58rem;font-size:.7rem;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.18)}
body.scanner-mode .scanner-camera-card{position:relative;z-index:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#000;overflow:hidden}
body.scanner-mode .scanner-camera-stage{height:100svh;min-height:100svh;background:#000;overflow:hidden}
body.scanner-mode .scanner-reader{width:100vw;height:100svh;min-height:100svh;border-radius:0;background:#000;overflow:hidden}
body.scanner-mode .scanner-reader>div{border:0!important}
body.scanner-mode .scanner-reader video{width:100%!important;height:100svh!important;max-height:none!important;object-fit:cover!important}
body.scanner-mode .scanner-reader img{display:none!important}
body.scanner-mode .scanner-focus-frame{width:min(72vw,22rem);border-color:rgba(255,255,255,.95);box-shadow:0 0 0 999rem rgba(0,0,0,.10),0 0 1.3rem rgba(0,0,0,.22)}
body.scanner-mode .scanner-camera-actions{position:absolute;z-index:46;left:max(.75rem,env(safe-area-inset-left));right:max(.75rem,env(safe-area-inset-right));bottom:calc(.65rem + env(safe-area-inset-bottom));margin:0;display:flex;justify-content:center;gap:.55rem;pointer-events:none}
body.scanner-mode .scanner-camera-actions .scanner-btn{position:relative;z-index:60;pointer-events:auto;width:auto;min-width:9.5rem;padding:.78rem 1rem;box-shadow:0 .35rem 1.1rem rgba(0,0,0,.3)}
body.scanner-mode .scanner-camera-actions [hidden]{display:none!important}
body.scanner-mode .scanner-camera-actions .scanner-btn--secondary{background:rgba(24,24,24,.72);border:1px solid rgba(255,255,255,.2)}
body.scanner-mode .scanner-help{display:none}
body.scanner-mode .scanner-stats{position:absolute;z-index:43;left:max(.6rem,env(safe-area-inset-left));right:max(.6rem,env(safe-area-inset-right));bottom:calc(5.2rem + env(safe-area-inset-bottom));margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:.38rem;pointer-events:none}
body.scanner-mode .scanner-stats div{min-width:0;padding:.42rem .38rem;background:rgba(0,0,0,.56);border:1px solid rgba(255,255,255,.12);border-left:.18rem solid var(--bh-primary);border-radius:.5rem;box-shadow:none;color:#fff;backdrop-filter:blur(.35rem);-webkit-backdrop-filter:blur(.35rem)}
body.scanner-mode .scanner-stats span{font-size:.56rem;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.scanner-mode .scanner-stats strong{font-size:1rem;color:#fff}
body.scanner-mode .scanner-stats div{min-height:3.25rem}
body.scanner-mode .scanner-stats strong{margin-top:.08rem}
body.scanner-mode .scanner-collapsible{position:relative;z-index:5;margin:.75rem;background:#fff}
body.scanner-mode .scanner-footer{position:relative;z-index:5;background:var(--bh-bg)}

@media(min-width:768px){
  .scanner-main{padding:.75rem}.scanner-stats{grid-template-columns:repeat(4,1fr)}.scanner-reader{height:74svh;min-height:34rem}.scanner-camera-actions{grid-template-columns:auto auto;justify-content:center}.scanner-camera-actions .scanner-btn{width:auto;min-width:10rem}
  body.scanner-mode .scanner-camera-actions{bottom:calc(.75rem + env(safe-area-inset-bottom))}
  body.scanner-mode .scanner-stats{bottom:calc(4.9rem + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);gap:.3rem}
  body.scanner-mode .scanner-main{padding:0}
  body.scanner-mode .scanner-reader,body.scanner-mode .scanner-camera-stage,body.scanner-mode .scanner-reader video{height:100svh!important;min-height:100svh!important}
  body.scanner-mode .scanner-focus-frame{width:min(52vw,24rem)}
  body.scanner-mode .scanner-event-head{left:50%;right:auto;width:min(42rem,calc(100vw - 2rem));transform:translateX(-50%)}
  body.scanner-mode .scanner-stats{left:50%;right:auto;width:min(42rem,calc(100vw - 2rem));transform:translateX(-50%)}
}
@media(min-width:1024px){
  .scanner-main{padding:1rem}.scanner-reader{height:72svh;max-height:52rem}
  body.scanner-mode .scanner-main{padding:0}
  body.scanner-mode .scanner-reader{height:100svh;max-height:none}
  body.scanner-mode .scanner-focus-frame{width:min(34vw,25rem)}
}

/* v15 - standalone web-app: minder browsergevoel op homescreen. */
html{background:#000}
body.scanner-mode{overscroll-behavior:none;-webkit-overflow-scrolling:touch}
@media (display-mode:standalone){
  html,body{min-height:100%;background:#000}
  body.scanner-mode{min-height:100dvh}
  body.scanner-mode .scanner-shell,
  body.scanner-mode .scanner-main,
  body.scanner-mode .scanner-camera-card,
  body.scanner-mode .scanner-camera-stage,
  body.scanner-mode .scanner-reader,
  body.scanner-mode .scanner-reader video{height:100dvh!important;min-height:100dvh!important}
  body.scanner-mode .scanner-reader{width:100vw}
  body.scanner-mode .scanner-reader video{width:100vw!important}
}