:root{
  --body-plastic:#2b2823; --body-plastic-dark:#1d1b17; --flash-yellow:#f2c14e;
  --film-amber:#c97a3d; --viewfinder-cream:#ede6d6; --cream:#fbf7ef;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; background:#0f0e0c; font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.device{width:100%; max-width:430px; height:100vh; max-height:932px; background:var(--body-plastic);
  position:relative; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.6); overflow:hidden;}
.device::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px);}
.brandplate{padding:18px 22px 10px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
.couple-names{font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.04em; font-size:20px; color:var(--viewfinder-cream); text-transform:uppercase;}
.couple-names span{color:var(--flash-yellow);}
.event-date{font-family:'Space Mono',monospace; font-size:11px; color:rgba(237,230,214,.55); margin-top:2px;}
.iso-badge{font-family:'Space Mono',monospace; font-size:10px; color:var(--body-plastic-dark); background:var(--flash-yellow); padding:4px 8px; border-radius:3px; font-weight:700;}
.viewfinder-wrap{flex:1; margin:8px 18px 4px; position:relative; z-index:2; border-radius:18px; padding:10px;
  background:linear-gradient(180deg,#37332b,#232019); box-shadow:inset 0 2px 6px rgba(0,0,0,.5);}
.viewfinder{position:relative; width:100%; height:100%; border-radius:12px; overflow:hidden; background:#000;}
.viewfinder video{width:100%; height:100%; object-fit:cover; display:block;}
.preview-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%,#4a4335,transparent 60%),linear-gradient(160deg,#55503f,#2a271f 70%);
  color:rgba(237,230,214,.4); font-family:'Space Mono',monospace; font-size:12px; text-align:center; padding:20px;}
.corner-frame{position:absolute; inset:14px; pointer-events:none;}
.corner-frame::before,.corner-frame::after,.corner-frame i::before,.corner-frame i::after{content:''; position:absolute; width:22px; height:22px; border-color:rgba(250,247,242,.85); border-style:solid; border-width:0;}
.corner-frame::before{top:0; left:0; border-top-width:2px; border-left-width:2px; border-top-left-radius:4px;}
.corner-frame::after{top:0; right:0; border-top-width:2px; border-right-width:2px; border-top-right-radius:4px;}
.corner-frame i::before{bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:4px;}
.corner-frame i::after{bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:4px;}
.flash-overlay{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;}
.flash-overlay.fire{animation:flashfire .35s ease-out;}
@keyframes flashfire{0%{opacity:.95;}100%{opacity:0;}}
.toast{position:absolute; left:50%; top:16px; transform:translate(-50%,-140%); background:rgba(250,247,242,.95);
  color:#26221c; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; padding:7px 14px;
  border-radius:20px; transition:transform .35s ease; z-index:5;}
.toast.show{transform:translate(-50%,0);}
.deck{position:relative; z-index:2; padding:14px 22px 22px; display:flex; align-items:center; justify-content:space-between;}
.counter{display:flex; flex-direction:column; align-items:center; gap:4px; width:64px;}
.counter-dial{width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#4a463b,#201d17 75%);
  border:2px solid #55503f; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 2px 3px rgba(0,0,0,.6);}
.counter-num{font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--flash-yellow);}
.counter-label{font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.08em; color:rgba(237,230,214,.5); text-transform:uppercase;}
.shutter{width:82px; height:82px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--flash-yellow) 55%,var(--film-amber) 100%);
  border:5px solid var(--body-plastic-dark); box-shadow:0 4px 0 #8a4a1f,0 6px 14px rgba(0,0,0,.5); cursor:pointer;
  transition:transform .08s ease,box-shadow .08s ease;}
.shutter:active{transform:translateY(4px); box-shadow:0 0 0 #8a4a1f,0 2px 6px rgba(0,0,0,.5);}
.shutter:disabled{background:#5c584c; border-color:var(--body-plastic-dark); box-shadow:0 4px 0 #3a372e; cursor:not-allowed;}
.nametag{width:64px; display:flex; flex-direction:column; align-items:center; gap:4px;}
.nametag-chip{width:56px; height:56px; border-radius:14px; background:linear-gradient(160deg,#3d392e,#232019);
  border:1px solid rgba(237,230,214,.15); display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:11px; color:var(--viewfinder-cream);
  text-align:center; line-height:1.15; padding:4px; cursor:pointer;}
.nametag-label{font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.08em; color:rgba(237,230,214,.5); text-transform:uppercase;}
.sold-out{position:absolute; inset:0; z-index:10; background:rgba(15,14,12,.92); display:none;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px;}
.sold-out h2{font-family:'Barlow Condensed',sans-serif; font-size:30px; color:var(--viewfinder-cream); margin:0 0 8px; text-transform:uppercase;}
.sold-out p{font-size:13.5px; color:rgba(237,230,214,.6); max-width:260px; line-height:1.5;}
.sold-out .roll-icon{font-size:34px; margin-bottom:14px;}