@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Montserrat:wght@400;500;600&display=swap');

:root {
  color-scheme:dark;
  --gold:#d8b75d;
  --gold-light:#f0dda0;
  --success:#7cc59a;
  --danger:#ff8f80;
  --surface:rgba(8,8,6,.86);
  --line:rgba(216,183,93,.28);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#050504}
body{color:#fff;font-family:Montserrat,system-ui,sans-serif}
button,a,label{font:inherit}
button,a,.photo-action{touch-action:manipulation}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.door-shell{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#050504}
.door-header{position:relative;z-index:20;min-height:4.75rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .75rem max(1rem,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:rgba(5,5,4,.96)}
.door-brand{display:flex;align-items:baseline;gap:.65rem;color:#fff;text-decoration:none}.door-brand strong{color:var(--gold-light);font:500 1.65rem Cinzel,serif;letter-spacing:.12em}.door-brand span{color:var(--gold);font-size:.58rem;letter-spacing:.22em}
.operator{min-width:0;display:grid;justify-items:end;gap:.22rem}.operator strong{max-width:100%;overflow:hidden;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.status-dot{display:flex;align-items:center;gap:.4rem;color:#fff;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}.status-dot::before{width:.48rem;height:.48rem;border-radius:50%;background:var(--gold);content:""}.status-dot.is-ready::before{background:var(--success);box-shadow:0 0 .8rem rgba(124,197,154,.7)}
.header-actions,.control-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem}.control-button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:.25rem;padding:.65rem .85rem;color:var(--gold-light);background:rgba(216,183,93,.06);font-size:.62rem;text-decoration:none;cursor:pointer}.control-button:hover,.control-button:focus-visible{border-color:var(--gold);background:rgba(216,183,93,.12)}
.camera-stage{position:relative;min-height:0;overflow:hidden;background:radial-gradient(circle,rgba(216,183,93,.09),transparent 48%),#090908}
.camera-stage video{width:100%;height:100%;display:block;object-fit:cover}
.camera-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 25%,transparent 65%,rgba(0,0,0,.38));pointer-events:none}
.scan-frame{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.scan-frame span{width:min(50vmin,25rem);aspect-ratio:1;border:3px solid rgba(240,221,160,.92);border-radius:1rem;box-shadow:0 0 0 9999px rgba(0,0,0,.16),0 0 2rem rgba(216,183,93,.24)}
.scan-frame span::before,.scan-frame span::after{position:absolute;content:""}
.camera-intro{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:.7rem;padding:2rem;background:radial-gradient(circle,rgba(216,183,93,.12),rgba(5,5,4,.96) 62%);text-align:center}.intro-mark{color:var(--gold);font-size:4rem;line-height:1}.eyebrow{margin:0;color:var(--gold);font-size:.65rem;letter-spacing:.28em}.camera-intro h2{margin:.1rem 0;color:var(--gold-light);font:500 clamp(1.6rem,4vw,2.8rem) Cinzel,serif}.camera-intro p:not(.eyebrow){max-width:34rem;margin:0 0 .6rem;color:#fff;font-size:.78rem;line-height:1.7}.primary-action,.secondary-action{min-width:min(20rem,80vw);min-height:3.7rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.3rem;padding:.8rem 1.2rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.primary-action{border:1px solid var(--gold-light);color:#151207;background:linear-gradient(135deg,#f0dda0,#c89d38)}.secondary-action{border:1px solid var(--line);color:var(--gold-light);background:rgba(216,183,93,.06)}
.primary-action:disabled,.secondary-action:has(input:disabled){opacity:.45;cursor:not-allowed}
.photo-action{position:relative;overflow:hidden}.photo-action input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scan-feedback{position:absolute;z-index:30;inset:0;display:grid;place-content:center;justify-items:center;gap:clamp(1rem,3vh,2rem);overflow:hidden;padding:clamp(1.5rem,6vw,5rem);text-align:center;animation:feedback-overlay-in .28s ease-out both}.scan-feedback::before,.scan-feedback::after{position:absolute;inset:50% auto auto 50%;width:min(72vmin,38rem);aspect-ratio:1;border:2px solid currentColor;border-radius:50%;content:"";opacity:.28;transform:translate(-50%,-50%);animation:feedback-ring 1.35s ease-out infinite}.scan-feedback::after{animation-delay:.38s}.scan-feedback>span{position:relative;z-index:1;display:grid;place-items:center;width:clamp(7rem,25vmin,13rem);aspect-ratio:1;border:clamp(.28rem,.7vmin,.55rem) solid currentColor;border-radius:50%;font-size:clamp(4rem,15vmin,8rem);font-weight:600;line-height:1}.scan-feedback>div{position:relative;z-index:1;max-width:64rem}.scan-feedback strong,.scan-feedback small{display:block}.scan-feedback strong{font-size:clamp(2rem,7vw,5.5rem);font-weight:600;line-height:1.04;letter-spacing:.02em;text-wrap:balance}.scan-feedback small{margin-top:clamp(.65rem,2vh,1.25rem);color:#fff;font-size:clamp(.8rem,2.2vw,1.35rem);font-weight:500;line-height:1.5;text-wrap:balance}.scan-feedback.is-granted{color:#a5f5c3;background:radial-gradient(circle at 50% 42%,rgba(88,231,147,.36),transparent 35%),linear-gradient(150deg,rgba(4,66,36,.98),rgba(3,26,17,.99))}.scan-feedback.is-granted>span{background:rgba(2,29,17,.5);box-shadow:0 0 4rem rgba(103,242,158,.35);animation:feedback-success-pop .62s cubic-bezier(.2,1.5,.4,1) both}.scan-feedback.is-denied,.scan-feedback.is-duplicate{color:#ffd0c9;background:radial-gradient(circle at 50% 42%,rgba(255,64,42,.42),transparent 35%),linear-gradient(150deg,rgba(105,12,8,.99),rgba(38,3,3,.99))}.scan-feedback.is-denied>span,.scan-feedback.is-duplicate>span{background:rgba(45,2,2,.52);box-shadow:0 0 4.5rem rgba(255,69,47,.42);animation:feedback-denied-slam .68s cubic-bezier(.2,.9,.35,1) both}
@keyframes feedback-overlay-in{from{opacity:0;transform:scale(1.03)}}
@keyframes feedback-ring{0%{opacity:.5;transform:translate(-50%,-50%) scale(.25)}85%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes feedback-success-pop{0%{opacity:0;transform:scale(.35) rotate(-12deg)}68%{transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes feedback-denied-slam{0%{opacity:0;transform:scale(1.8) rotate(-10deg)}45%{opacity:1;transform:scale(.92) rotate(3deg)}60%{transform:translateX(-.65rem) scale(1.02)}75%{transform:translateX(.65rem) scale(1.02)}100%{transform:translateX(0) scale(1)}}
.door-controls{position:relative;z-index:20;min-height:5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.7rem max(1rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));border-top:1px solid var(--line);background:rgba(5,5,4,.96)}.camera-state{display:flex;align-items:center;gap:.65rem}.camera-state>span{width:.65rem;height:.65rem;border-radius:50%;background:#777}.camera-state>span.is-live{background:var(--success);box-shadow:0 0 .9rem rgba(124,197,154,.75)}.camera-state strong{font-size:.68rem}.door-clock{display:grid;justify-items:center;gap:.18rem}.door-clock strong{color:var(--gold-light);font:500 1.15rem Cinzel,serif}.door-clock span{color:#fff;font-size:.55rem;text-transform:capitalize}

@media(max-width:720px){
  .door-header{grid-template-columns:auto 1fr}.operator{display:none}.header-actions{gap:.35rem}.header-actions .control-button{min-height:2.5rem;padding:.55rem .65rem;font-size:.55rem}
  .door-brand strong{font-size:1.35rem}.door-brand span{display:none}
  .scan-frame span{width:min(72vw,21rem)}
  .door-controls{grid-template-columns:1fr auto}.door-clock{display:none}.control-actions{justify-self:end}
  .scan-feedback{padding:1.25rem}.scan-feedback strong{font-size:clamp(1.9rem,10vw,4rem)}.scan-feedback small{font-size:clamp(.75rem,3.8vw,1.05rem)}
}

@media(max-width:430px){
  #fullscreen-button{display:none}.door-header{min-height:4rem}.control-button{min-height:2.65rem}
  .camera-intro{padding:1.2rem}.intro-mark{font-size:3rem}.camera-intro p:not(.eyebrow){font-size:.7rem}.primary-action,.secondary-action{min-height:3.35rem}
  .door-controls{min-height:4.3rem}.camera-state strong{font-size:.6rem}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}