body{font-family:sans-serif;background:#f9f9f9;margin:0;text-align:center;}
.dev-buttons button:disabled{opacity:0.5;cursor:not-allowed;}
.scanner-wrapper {
    width: 80%;
    max-width: 800px;
    height: auto;
    max-height: 70vh; /* caps height to 75% of viewport */
    aspect-ratio: 4 / 3;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 2rem auto;
}

#qr-reader{width:100%;height:100%;display:none;}
#countdownBar{position:absolute;top:0;left:0;height:6px;background:#4caf50;width:0%;transition:width 10s linear;z-index:3;display:none;}
.overlay-content {color: rgba(255, 255, 255, 0.9);font-size: 3vw;font-weight: 600;text-shadow: 0 2px 4px rgba(0,0,0,0.5);display: flex;flex-direction: column;align-items: center;padding: 1rem;text-align: center;}
.overlay-content svg {width: 10vw;height: 10vw;max-width: 120px;max-height: 120px;margin-bottom: 2vh;}
.checkin-screen{display:flex;position:absolute;inset:0;background:black;color:white;font-size:4vw;font-weight:bold;align-items:center;justify-content:center;flex-direction:column;z-index:2;opacity:0;pointer-events:none;transition:opacity 0.3s ease;text-align:center;padding:2rem;}
.checkin-screen.visible{opacity:1;pointer-events:auto;}
.checkin-screen span{font-size:6vw;margin-top:1rem;}
.dev-buttons button{margin-left:0.5rem;padding:0.3rem 0.8rem;font-size:0.9rem;border:1px solid #ccc;background:#eee;border-radius:4px;cursor:pointer;}
@keyframes pulseRed {0%,100%{background-color:#f44336;}50%{background-color:#ff7961;}}
.pulse-red{animation:pulseRed 1s infinite;}