@font-face{font-family:"Great Vibes";src:url(fonts/GreatVibes-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cinzel";src:url(fonts/Cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-Italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  /* From the Mediterranean Chic palette */
  --ivory:#FAF6EE; --cream:#F1E6D3; --surface:#FFFDF8; --sand:#E3D5BF; --taupe:#B7A590;
  --ink:#3B2F25; --muted:#7D6B58; --line:#E4D8C4;
  --gold:#C0995A; --gold-deep:#8F6B38; --sage-soft:#E8EDE0; --sage:#A3B39A; --olive:#6F7D4A; --moss:#4D6340; --moss-ink:#FBF8F1;
  --danger:#9E3B2E;
  --script:"Great Vibes","Snell Roundhand","Brush Script MT",cursive;
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond","Garamond",Georgia,serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html{background:var(--ivory)}
body{margin:0;min-height:100vh;color:var(--ink);font:500 18px/1.55 var(--serif);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 120% 900px at 50% 0%,#FFFDF7 0%,var(--ivory) 70%) no-repeat,var(--ivory);}
img,video{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
[hidden]{display:none !important}
a{color:inherit}

/* greenery corners */
.decor{position:absolute;top:0;left:0;right:0;height:0;pointer-events:none;z-index:0}
.decor .c{position:absolute;top:calc(env(safe-area-inset-top,0px) * -1);width:clamp(150px,26vw,340px);opacity:.95}
.decor .c.l{left:0}
.decor .c.r{right:0;transform:scaleX(-1)}
.decor .lights{position:absolute;top:0;left:0;right:0;height:clamp(80px,12vw,150px);overflow:hidden}
.decor .lights svg{width:100%;height:100%}
.foot-decor{display:flex;justify-content:center;margin:60px 0 0;pointer-events:none}
.foot-decor svg{width:180px;transform:rotate(135deg);opacity:.9}
main,.nav{position:relative;z-index:1}

/* couple's nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(250,246,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1100px;margin:0 auto;display:flex;gap:4px;padding:10px 16px;overflow-x:auto;align-items:center}
.tab{background:none;border:0;padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--muted);white-space:nowrap;font:500 .8rem/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.tab[aria-selected="true"]{background:var(--moss);color:var(--moss-ink)}
.nav .spacer{flex:1}

main{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.panel{padding-top:32px}

/* hero, modelled on the invitation */
.hero{text-align:center;padding:clamp(110px,16vw,170px) 0 34px}
.kicker{text-wrap:balance;max-width:30em;margin-left:auto !important;margin-right:auto !important;font:500 clamp(.72rem,2.6vw,.85rem)/1.6 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 30px}
.names{font:400 clamp(4rem,17vw,8.2rem)/.9 var(--script);margin:0;color:var(--ink)}
.names .amp{display:block;font-size:.5em;line-height:1.05;color:var(--gold)}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 16px;max-width:260px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.divider::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero .date{font:500 clamp(.95rem,3.6vw,1.2rem)/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;margin:0}
.hero .welcome{max-width:32ch;margin:18px auto 0;font-style:italic;font-size:1.25rem;color:var(--muted)}

/* upload card */
.upload{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:28px 24px;box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--sand),0 18px 50px rgba(92,70,40,.10)}
.upload h2{font:400 2.3rem/1 var(--script);text-align:center;color:var(--gold-deep);margin:0 0 18px}
.field{display:block;margin-bottom:20px}
.field > span{display:block;font:500 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.field input[type=text],.field input[type=url],.field input[type=date],.field input[type=datetime-local],.field input[type=password]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:var(--ivory);font-size:1.05rem}
.field input::placeholder{color:#A8977F;font-style:italic}
.hint{font-size:.95rem;color:var(--muted);margin:6px 0 0}
.opt{color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--serif);font-style:italic;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--sand);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font-size:1rem}
.chip[aria-pressed="true"]{background:var(--sage-soft);border-color:var(--olive);color:var(--ink)}
.chip .n{color:var(--muted);margin-left:5px;font-size:.9em}
.big{display:flex;align-items:center;justify-content:center;width:100%;padding:17px;border:0;border-radius:4px;background:var(--moss);color:var(--moss-ink);font:600 .92rem/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.big:hover{background:#435838}
.big:disabled{opacity:.5;cursor:not-allowed}
.second{display:block;width:100%;margin-top:10px;padding:13px;border:1px solid var(--gold);border-radius:4px;background:transparent;cursor:pointer;font:500 .82rem/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.btn{display:inline-block;border:1px solid var(--sand);background:var(--surface);border-radius:4px;padding:9px 16px;cursor:pointer;font:500 .74rem/1.3 var(--caps);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--moss);color:var(--moss-ink);border-color:var(--moss)}
.btn.danger{color:var(--danger);border-color:#D7B3A8}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

.queue{list-style:none;margin:16px 0 0;padding:0;font-size:1rem}
.queue:empty{margin:0}
.queue li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.queue .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.queue .st{flex-shrink:0;color:var(--muted);font-style:italic}
.queue .st.ok{color:var(--olive)} .queue .st.bad{color:var(--danger)}
.queue .why{display:block;color:var(--danger);font-size:.92rem;white-space:normal}

/* upload progress */
.progress{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.p-title{margin:0 0 10px;font:500 .8rem/1.4 var(--caps);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.bar{height:6px;border-radius:99px;background:var(--cream);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--olive),var(--gold));transition:width .3s}
.progress .hint{text-align:center;font-style:italic}

/* collage */
.collage{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:190px;grid-auto-flow:dense;gap:26px 22px;padding:14px 8px 20px}
.print{margin:0;position:relative;display:flex;flex-direction:column;background:#FFFEFB;padding:8px 8px 30px;
  box-shadow:0 1px 2px rgba(60,45,30,.12),0 12px 26px rgba(60,45,30,.13);transform:rotate(var(--tilt,0deg));transition:transform .3s ease,box-shadow .3s ease}
.print.s-wide{grid-column:span 2}.print.s-tall{grid-row:span 2}.print.s-big{grid-column:span 2;grid-row:span 2}
.print .open{flex:1;min-height:0;display:block;width:100%;padding:0;border:0;background:var(--cream);overflow:hidden;cursor:zoom-in;position:relative}
.print img,.print video{width:100%;height:100%;object-fit:cover}
.print figcaption{position:absolute;left:8px;right:8px;bottom:2px;text-align:center;font:1.25rem/1.5 var(--script);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.print:hover,.print:focus-within{transform:rotate(0deg) scale(1.03);z-index:3;box-shadow:0 2px 4px rgba(60,45,30,.14),0 20px 40px rgba(60,45,30,.18)}
.print:nth-child(4n+1)::before,.print:nth-child(6n+4)::before{content:"";position:absolute;top:-11px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(163,179,154,.55);box-shadow:0 1px 2px rgba(0,0,0,.06);z-index:2;pointer-events:none}
.print:nth-child(6n+4)::before{background:rgba(198,162,100,.42);transform:translateX(-50%) rotate(4deg)}
.print.is-hidden .open{opacity:.35}
.print .play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:rgba(255,253,248,.85);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:16px;padding-left:3px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.print .flags{position:absolute;top:8px;left:8px;display:flex;gap:4px}
@media (prefers-reduced-motion: reduce){.print{transition:none}}
@media (max-width:520px){
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:44vw;gap:18px 14px;padding:10px 2px}
  .print{padding:5px 5px 24px}
  .print figcaption{font-size:1.05rem}
}

/* choosing photos */
.sel-start{margin-top:16px}
body.selecting .print .open{cursor:pointer}
body.selecting .print .open::after{content:"";position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:rgba(40,32,24,.28);box-shadow:0 1px 4px rgba(0,0,0,.3)}
body.selecting .print.sel .open::after{background:var(--moss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
body.selecting .print.sel{box-shadow:0 0 0 3px var(--moss),0 12px 26px rgba(60,45,30,.18)}
body.selecting .print.sel .open img,body.selecting .print.sel .open video{transform:scale(.94);transition:transform .15s}
body.selecting main{padding-bottom:120px}
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,253,248,.97);backdrop-filter:blur(6px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(60,45,30,.08);padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 12px)}
.selbar-in{max-width:1100px;margin:0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sel-count{flex:1;min-width:110px;font:500 .78rem/1.3 var(--caps);letter-spacing:.12em;text-transform:uppercase}
.selbar .btn{white-space:nowrap}
.selbar .btn.primary{min-width:150px}
.selbar .btn:disabled{opacity:.5}
@media (max-width:520px){.selbar-in .sel-count{flex-basis:100%;text-align:center}.selbar-in .btn{flex:1;padding:12px 8px}.selbar .btn.primary{flex:2;min-width:0}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 110px);transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;background:var(--ink);color:var(--ivory);padding:10px 18px;border-radius:999px;font-style:italic;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:opacity .25s,transform .25s;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* galleries */
.gal-head{text-align:center;margin:64px 0 24px}
.gal-head h2{font:400 clamp(2.4rem,8vw,3.2rem)/1 var(--script);margin:0;color:var(--ink)}
.count{display:block;margin-top:6px;font:500 .74rem/1.4 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.grid{columns:3 240px;column-gap:14px}
.tile{break-inside:avoid;margin:0 0 16px;position:relative;background:var(--surface);padding:8px 8px 10px;border:1px solid var(--line);box-shadow:0 6px 20px rgba(92,70,40,.07)}
.tile .open{display:block;width:100%;padding:0;border:0;background:var(--cream);overflow:hidden;cursor:zoom-in;position:relative}
.tile img,.tile video{width:100%;height:auto;background:var(--cream)}
.tile.is-hidden .open{opacity:.35}
.play{position:absolute;top:8px;left:8px;background:rgba(59,47,37,.6);color:#fff;border-radius:999px;padding:2px 10px;font:500 .65rem/1.6 var(--caps);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.tile .meta{display:flex;justify-content:space-between;gap:8px;font-size:.95rem;font-style:italic;color:var(--muted);padding:8px 2px 0}
.tile .acts{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px}
.tile .acts .btn{padding:5px 9px;font-size:.62rem}
.badge{font:500 .62rem/1.6 var(--caps);letter-spacing:.1em;text-transform:uppercase;background:var(--taupe);color:#fff;padding:1px 8px;border-radius:999px;align-self:center;font-style:normal}
.empty{text-align:center;padding:44px 24px;border:1px solid var(--line);background:rgba(255,253,248,.7);color:var(--muted);font-style:italic;font-size:1.15rem;max-width:560px;margin:0 auto}
.empty p{margin:0 0 14px}
.empty p:last-child{margin-bottom:0}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(33,27,21,.95);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
.lb-top{display:flex;justify-content:space-between;align-items:center;color:#EFE6D6;gap:12px;font-style:italic}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;position:relative}
.lb-stage img,.lb-stage video{max-height:100%;max-width:100%;object-fit:contain}
.lb button,.lb a{background:rgba(255,248,235,.14);color:#FBF6EC;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;text-decoration:none;font:500 .7rem/1.3 var(--caps);letter-spacing:.12em;text-transform:uppercase}
.lb .nav-btn{position:absolute;top:50%;transform:translateY(-50%);font-size:1.4rem;width:46px;height:46px;padding:0;font-family:var(--serif)}
.lb .prev{left:4px}.lb .next{right:4px}

/* table card page */
.card-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:760px){.card-wrap{grid-template-columns:1fr}}
.card-preview{max-width:440px;width:100%;margin:0 auto;aspect-ratio:5/7;background:var(--surface);box-shadow:0 2px 4px rgba(92,70,40,.08),0 20px 50px rgba(92,70,40,.16)}
.card-preview{display:flex;align-items:center;justify-content:center}
.card-preview img{width:100%;height:100%}
.card-msg{padding:24px;text-align:center;font-style:italic;color:var(--muted)}
.side h2,.settings h2,.login h2{font:400 3rem/1 var(--script);margin:0 0 14px;color:var(--ink)}
.side p{color:var(--muted);max-width:46ch}
.side .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.url{font-size:1rem;word-break:break-all;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:10px 12px;color:var(--ink)}

/* settings */
.settings{max-width:580px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset{border:1px solid var(--line);border-radius:4px;padding:14px 16px;margin:0 0 20px;background:rgba(255,253,248,.6)}
legend{font:500 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;padding:0 8px}
.radio{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.radio input{margin-top:7px;accent-color:var(--moss)}
.radio small{display:block;color:var(--muted);font-style:italic;font-size:.95rem}
.status{font-style:italic;color:var(--muted);margin-left:12px}
.login{max-width:420px;margin:0 auto;padding:clamp(140px,22vw,200px) 20px 40px;text-align:center}
.login .field{text-align:left}
@media (prefers-reduced-motion: no-preference){
  .hero .names,.hero .kicker,.hero .date{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
  .hero .kicker{text-wrap:balance;max-width:30em;margin-left:auto !important;margin-right:auto !important;animation-delay:.1s}.hero .names{animation-delay:.25s}.hero .date{animation-delay:.45s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .two{grid-template-columns:1fr}
  .grid{columns:2;column-gap:10px}
  .tile{padding:5px 5px 7px;margin-bottom:10px}
  .tile .meta{font-size:.85rem;flex-direction:column;gap:0}
}

.ver{font-size:.8rem;color:var(--muted);font-style:italic;margin-right:8px;white-space:nowrap}

/* collage: photo strips stay whole */
.print.s-strip{grid-row:span 3}
.print.s-strip .open{background:transparent}
.print.s-strip img{object-fit:contain}
@media (max-width:520px){.print.s-strip{grid-row:span 3}}

/* link from the guest page */
.booth-link{display:block;margin-top:14px;padding:16px;border-radius:4px;text-align:center;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,#FBF3E4,#F1E6D3);border:1px solid var(--gold);position:relative}
.booth-link-t{display:block;font:400 2rem/1.1 var(--script);color:var(--gold-deep)}
.booth-link-s{display:block;font:500 .72rem/1.5 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* photo booth page */
.back{margin:0;padding-top:clamp(84px,12vw,140px);position:relative;z-index:2}
.back a{font:500 .74rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--sand)}
.booth-hero{padding-top:18px}
.booth-title{font-size:clamp(3.6rem,14vw,6.4rem)}
.step{display:flex;align-items:center;justify-content:center;gap:12px;font:400 clamp(2rem,7vw,2.6rem)/1.1 var(--script);margin:44px 0 20px;text-align:center}
.step span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);font:500 .9rem/1 var(--caps);color:var(--gold-deep)}
.tpls{display:flex;gap:16px;justify-content:flex-start;overflow-x:auto;padding:6px 4px 12px;scroll-snap-type:x mandatory}
.tpls::before,.tpls::after{content:"";margin:auto}
.tpl{flex:0 0 auto;scroll-snap-align:center;border:1px solid var(--line);background:var(--surface);padding:10px 10px 8px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s}
.tpl canvas{width:92px;height:276px;display:block;box-shadow:0 4px 12px rgba(60,45,30,.18)}
.tpl span{font:500 .66rem/1.2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tpl[aria-checked="true"]{border-color:var(--moss);box-shadow:0 0 0 2px var(--moss);transform:translateY(-2px)}
.tpl[aria-checked="true"] span{color:var(--moss)}
.booth-grid,.result-grid{display:grid;grid-template-columns:auto minmax(0,380px);gap:44px;justify-content:center;align-items:start}
@media (max-width:760px){.booth-grid,.result-grid{grid-template-columns:1fr;gap:28px}}
.strip-wrap{position:relative;width:min(300px,72vw);margin:0 auto;box-shadow:0 2px 4px rgba(60,45,30,.1),0 22px 50px rgba(60,45,30,.2)}
.strip-wrap canvas{width:100%;height:auto;display:block}
.slot{position:absolute;border:0;background:transparent;cursor:pointer;padding:0}
.slot:hover,.slot:focus-visible{background:rgba(255,255,255,.14);outline:2px solid var(--gold);outline-offset:2px}
.booth-side{display:flex;flex-direction:column;gap:10px}
.booth-side .field{margin-bottom:6px}
.center{text-align:center;margin:0 0 8px}
.result-img{width:min(300px,72vw);margin:0 auto;display:block;box-shadow:0 2px 4px rgba(60,45,30,.1),0 22px 50px rgba(60,45,30,.2)}
.done-title{margin-top:10px}

.sheet{position:fixed;inset:0;z-index:55;background:rgba(33,27,21,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet-in{width:min(460px,100%);background:var(--surface);border-radius:14px 14px 0 0;padding:22px 18px calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;flex-direction:column;gap:10px;box-shadow:0 -10px 30px rgba(0,0,0,.2)}
@media (min-width:600px){.sheet{align-items:center}.sheet-in{border-radius:10px}}
.sheet .second{margin-top:0}

.cam{position:fixed;inset:0;z-index:70;background:#17130F;color:#F6EBD6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 18px)}
.cam-top{width:min(720px,100%);display:flex;justify-content:space-between;align-items:center;font:500 .8rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase}
.cam button{background:rgba(255,248,235,.12);color:#FBF6EC;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;font:500 .72rem/1.3 var(--caps);letter-spacing:.12em;text-transform:uppercase}
.cam-view{position:relative;width:min(720px,100%);max-height:62vh;aspect-ratio:3/2;overflow:hidden;border-radius:4px;border:6px solid #FFFDF8;box-shadow:0 20px 50px rgba(0,0,0,.5);background:#000}
.cam-view video{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.cam-view video.mirror{transform:scaleX(-1)}
.cam-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 clamp(7rem,30vw,12rem)/1 var(--script);color:#FFFDF8;text-shadow:0 4px 30px rgba(0,0,0,.5);pointer-events:none}
.cam-count.pop{animation:pop 1s ease-out}
@keyframes pop{0%{transform:scale(1.5);opacity:0}25%{transform:scale(1);opacity:1}85%{opacity:1}100%{opacity:0;transform:scale(.9)}}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cam-flash.go{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.cam-thumbs{display:flex;gap:8px;min-height:10px}
.cam-thumbs span{width:60px;aspect-ratio:3/2;border:2px solid rgba(255,253,248,.5);border-radius:2px;overflow:hidden;background:rgba(255,255,255,.06)}
.cam-thumbs canvas{width:100%;height:100%;display:block}
.cam-bottom{display:flex;gap:14px;align-items:center}
.cam .shutter{background:#FFFDF8;color:#2E251C;padding:16px 34px;font-size:.85rem;box-shadow:0 0 0 4px rgba(255,253,248,.3)}
.cam .shutter:disabled{opacity:.5}
@media (prefers-reduced-motion: reduce){.cam-count.pop,.cam-flash.go{animation:none}}

@media (max-width:520px){
  .tpls{gap:6px;padding:6px 0 12px}
  .tpl{padding:6px 6px 6px}
  .tpl canvas{width:58px;height:174px}
  .tpl span{font-size:.56rem;letter-spacing:.06em;max-width:70px;text-align:center}
}

/* move and zoom */
.slot-edit{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:rgba(255,253,248,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D6340' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M12 3l-3 3M12 3l3 3M12 21l-3-3M12 21l3-3M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none}
.editor{position:fixed;inset:0;z-index:65;background:#17130F;color:#F6EBD6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 18px)}
.ed-top{width:min(720px,100%);display:flex;justify-content:space-between;align-items:center;font:500 .8rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase}
.editor button{background:rgba(255,248,235,.12);color:#FBF6EC;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;font:500 .72rem/1.3 var(--caps);letter-spacing:.12em;text-transform:uppercase}
.editor .ed-done{background:#FFFDF8;color:#2E251C;padding:10px 24px}
.ed-stage{width:min(720px,100%);display:flex;justify-content:center}
#edCanvas{touch-action:none;cursor:grab;border-radius:4px;display:block}
#edCanvas:active{cursor:grabbing}
.ed-hint{margin:0;font-style:italic;color:#CDBFA8;text-align:center}
.ed-zoom{display:flex;align-items:center;gap:12px;width:min(420px,100%)}
.ed-zoom input{flex:1;accent-color:#D9B878}
.ed-zoom button{width:40px;height:40px;padding:0;font:400 1.4rem/1 var(--serif)}
.ed-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.notice-full{margin:0 0 14px;padding:12px 14px;border-radius:4px;background:var(--blush);text-align:center;font-style:italic}

/* dashboard plan strip */
.plan-strip{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:14px 18px;margin:0 0 20px}
@media (max-width:760px){.plan-strip{grid-template-columns:1fr}}
.ps-info strong{display:block;font:500 .78rem/1.4 var(--caps);letter-spacing:.12em;text-transform:uppercase}
.ps-info span{color:var(--muted)} .ps-info b{color:var(--danger)}
.ps-meters{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ps-meters .meter-top{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:4px}
.ps-acts{display:flex;gap:8px;flex-wrap:wrap}
.zip-parts{background:var(--sage-soft);padding:14px 16px;margin:0 0 18px;border-left:3px solid var(--olive)}
.zip-parts p{margin:0 0 10px}
.zp-row{display:flex;gap:8px;flex-wrap:wrap}