html, body{
  margin:0 !important; padding:0 !important; height:100% !important; overflow:hidden !important;
}
body.admin-bar{ margin-top:0 !important; }
#wpadminbar{ display:none !important; }

.wpul-kiosk{
  --wpul-navy:#0B1F3D; --wpul-navy-deep:#081729;
  --wpul-black:#0B0D12;
  --wpul-white:#FFFFFF; --wpul-white-dim:#A9BAD1; --wpul-white-faint:#6E82A0;
  --wpul-blue:#4C8DFF;
  --wpul-green:#34D399; --wpul-green-bg:rgba(52,211,153,0.14);
  --wpul-red:#F0574A; --wpul-red-deep:#DC2626; --wpul-red-bg:rgba(240,87,74,0.16);
  --wpul-line:rgba(255,255,255,0.1);

  width:100%;height:100%;margin:0;background:var(--wpul-navy);color:var(--wpul-white);
  font-family:'Inter',sans-serif;display:flex;flex-direction:column;align-items:center;
  position:fixed;top:0;left:0;overflow:hidden;
}
.wpul-kiosk *{box-sizing:border-box;}

.wpul-brand{display:flex;align-items:center;justify-content:center;width:100%;gap:1vh;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:2.2vh;padding:4vh 0 0;}
.wpul-brand-dot{width:1.3vh;height:1.3vh;border-radius:0.35vh;background:var(--wpul-blue);}
.wpul-brand-logo-card{background:#fff;border-radius:1.4vh;padding:1.2vh 2.2vh;display:flex;align-items:center;justify-content:center;box-shadow:0 0.6vh 1.6vh -0.4vh rgba(0,0,0,0.3);}
.wpul-brand-logo{max-height:9vh;max-width:50vw;object-fit:contain;display:block;}

.wpul-clock{text-align:center;margin-top:5vh;}
.wpul-date{font-size:2.1vh;color:var(--wpul-white-faint);margin-bottom:0.8vh;}
.wpul-time{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:7vh;letter-spacing:0.1vh;font-feature-settings:'tnum' 1;}

.wpul-state{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;min-height:0;}
.wpul-state[hidden]{display:none;}

.wpul-scan-frame{width:min(42vh,80vw);height:min(42vh,80vw);position:relative;margin:5vh 0 3.5vh;border-radius:2.5vh;background:var(--wpul-navy-deep);overflow:hidden;}
.wpul-reader-inner{width:100%;height:100%;}
.wpul-corner{position:absolute;width:5vh;height:5vh;border-color:var(--wpul-blue);border-style:solid;border-width:0;z-index:2;pointer-events:none;}
.wpul-corner.tl{top:1.5vh;left:1.5vh;border-width:0.6vh 0 0 0.6vh;border-radius:1.3vh 0 0 0;}
.wpul-corner.tr{top:1.5vh;right:1.5vh;border-width:0.6vh 0.6vh 0 0;border-radius:0 1.3vh 0 0;}
.wpul-corner.bl{bottom:1.5vh;left:1.5vh;border-width:0 0 0.6vh 0.6vh;border-radius:0 0 0 1.3vh;}
.wpul-corner.br{bottom:1.5vh;right:1.5vh;border-width:0 0.6vh 0.6vh 0;border-radius:0 0 1.3vh 0;}
.wpul-scan-line{position:absolute;left:1vh;right:1vh;height:0.4vh;background:linear-gradient(90deg, transparent, var(--wpul-blue), transparent);animation:wpul-scan 2.6s ease-in-out infinite;z-index:2;pointer-events:none;}
@keyframes wpul-scan{0%{top:2vh;opacity:0;}12%{opacity:1;}50%{top:calc(100% - 2.5vh);opacity:1;}62%{opacity:0;}100%{top:2vh;opacity:0;}}
/* html5-qrcode injects its own video/canvas into #wpul-reader — keep it filling the frame, underneath the decorative overlay */
.wpul-reader-inner video, .wpul-reader-inner canvas{width:100% !important;height:100% !important;object-fit:cover;}

.wpul-instruct{font-size:2.8vh;font-weight:600;text-align:center;padding:0 6vh;}
.wpul-sub{font-size:1.9vh;color:var(--wpul-white-faint);margin-top:1vh;text-align:center;}
.wpul-footer{margin-top:auto;padding:2.4vh 3vh 2vh;text-align:center;border-top:0.15vh solid var(--wpul-line);width:100%;}
.wpul-footer-main{font-size:1.7vh;color:var(--wpul-white-faint);}
.wpul-footer-credit{font-size:1.4vh;color:#54607a;margin-top:0.6vh;letter-spacing:0.02vh;}

/* success */
.wpul-alert-banner{width:100%;background:var(--wpul-red-deep);color:#fff;font-size:2.1vh;font-weight:700;text-align:center;padding:1.6vh;display:flex;align-items:center;justify-content:center;gap:1vh;margin-bottom:1vh;}
.wpul-alert-banner svg{width:2.2vh;height:2.2vh;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.wpul-photo{width:26vh;height:35vh;border-radius:2vh;background:var(--wpul-black);border:0.4vh solid var(--wpul-line);display:flex;align-items:center;justify-content:center;margin-top:4vh;overflow:hidden;color:var(--wpul-white-dim);}
.wpul-photo.late{border-color:rgba(240,87,74,0.4);background:var(--wpul-red-bg);}
.wpul-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.wpul-photo svg{width:42%;height:42%;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}

.wpul-success-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:4vh;margin-top:3vh;text-align:center;padding:0 4vh;}
.wpul-success-role{display:none;}
.wpul-datetime{display:flex;gap:5vh;margin-top:3.5vh;}
.wpul-datetime div{text-align:center;display:flex;flex-direction:column;}
.wpul-dt-label{font-size:1.5vh;color:var(--wpul-white-faint);text-transform:uppercase;letter-spacing:0.1vh;}
.wpul-dt-value{font-family:'IBM Plex Mono',monospace;font-size:2.6vh;font-weight:600;margin-top:0.4vh;}
.wpul-success-tag{display:inline-flex;align-items:center;gap:0.9vh;background:var(--wpul-green-bg);color:var(--wpul-green);font-size:2.1vh;font-weight:700;padding:1.3vh 2.8vh;border-radius:4vh;margin-top:3.5vh;border:0.15vh solid rgba(52,211,153,0.3);}
.wpul-success-tag.late{background:var(--wpul-red-bg);color:var(--wpul-red);border-color:rgba(240,87,74,0.35);}
.wpul-success-note{display:none;}

/* unrecognized card */
.wpul-error-badge{width:8.5vh;height:8.5vh;border-radius:50%;background:var(--wpul-red-bg);display:flex;align-items:center;justify-content:center;margin-top:8vh;}
.wpul-error-badge svg{stroke:var(--wpul-red);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.wpul-error-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:2.6vh;margin-top:2.2vh;}
.wpul-error-text{font-size:1.9vh;color:var(--wpul-white-dim);margin-top:1.2vh;text-align:center;padding:0 5vh;line-height:1.5;}
.wpul-error-countdown{font-size:1.6vh;color:var(--wpul-white-faint);margin-top:auto;padding:3vh;}

/* camera unavailable */
.wpul-cam-badge{width:8.5vh;height:8.5vh;border-radius:50%;background:var(--wpul-black);border:0.3vh solid var(--wpul-line);display:flex;align-items:center;justify-content:center;margin-top:8vh;}
.wpul-cam-badge svg{stroke:var(--wpul-blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.wpul-cam-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:2.6vh;margin-top:2.2vh;text-align:center;padding:0 4vh;}
.wpul-cam-sub{font-size:1.9vh;color:var(--wpul-white-dim);margin-top:1.2vh;text-align:center;padding:0 5vh;line-height:1.5;}
.wpul-cam-note{margin-top:auto;background:var(--wpul-black);border-top:0.15vh solid var(--wpul-line);width:100%;padding:2.6vh 4vh;font-size:1.6vh;color:var(--wpul-white-faint);text-align:center;}