/* Photobooth interface: neutral look, follows the device's light or dark setting.
   The strip templates have their own themes; this only styles the app around them. */
:root{
  color-scheme:light dark;
  --bg:#f4f5f7; --surface:#ffffff; --surface2:#eceef2; --border:#d5d9e1;
  --text:#1a1d23; --muted:#5b6472;
  --accent:#3558d6; --accent-ink:#ffffff; --accent-soft:#e6ecff;
  --ok:#17783a; --warn:#9a5a00; --bad:#c0262d; --focus:#1a63e0;
  --preview-bg:#e3e6ec; --overlay:rgba(14,17,23,.55);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#13161b; --surface:#1c2027; --surface2:#262b34; --border:#323844;
    --text:#e9ecf2; --muted:#9aa3b2;
    --accent:#7d9bff; --accent-ink:#0d1220; --accent-soft:#222c4c;
    --ok:#6fd48a; --warn:#f0b04a; --bad:#ff7b7b; --focus:#8ab4ff;
    --preview-bg:#0e1013; --overlay:rgba(0,0,0,.65);
  }
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
[hidden]{display:none !important;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;min-height:100vh;}
h1,h2,h3{font-family:var(--font);font-weight:650;margin:0;line-height:1.2;letter-spacing:-.01em;}
h1{font-size:30px;}
h2{font-size:22px;margin-bottom:10px;}
h3{font-size:18px;}
a{color:var(--accent);}
button,input,select{font:inherit;color:inherit;}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

/* focus */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,.lay:focus-visible,.chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 60px;}
.screen{display:none;}
.screen.on{display:block;}
header.top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:26px;}
header.top p{margin:0;color:var(--muted);}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.row+.row{margin-top:10px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.center{max-width:420px;margin:12vh auto 0;}
.muted{color:var(--muted);font-size:14px;}

/* forms */
label{display:block;color:var(--muted);font-size:14px;margin-bottom:6px;}
.field{margin-bottom:22px;}
.field>.lbl{display:block;font-size:14px;color:var(--muted);margin-bottom:8px;}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,.text{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0;font-size:16px;outline:none;}
.text{width:100%;font-size:17px;}
input:focus,select:focus,.text:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);}
input[type=range]{width:100%;accent-color:var(--accent);}
.count{float:right;font-size:13px;color:var(--muted);}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:1px solid transparent;border-radius:10px;padding:11px 20px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2;}
.btn:hover:not(:disabled){filter:brightness(1.07);}
.btn.big{font-size:20px;padding:15px 32px;border-radius:12px;}
.btn.sm{padding:6px 12px;font-size:14px;border-radius:8px;}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn.ghost:hover:not(:disabled){background:var(--surface2);filter:none;}
.btn.danger{background:var(--bad);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.seg button{background:var(--surface);border:0;padding:10px 18px;cursor:pointer;}
.seg button+button{border-left:1px solid var(--border);}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600;}

/* chips + tabs */
.themes{display:flex;gap:10px;flex-wrap:wrap;}
.chip,.tab{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:8px 16px;cursor:pointer;}
.chip[aria-pressed="true"],.tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600;}
.chip:disabled{opacity:.5;cursor:not-allowed;}
.chip.add{border-style:dashed;color:var(--muted);}
.sw{width:16px;height:16px;border-radius:50%;border:1px solid var(--border);display:inline-block;}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--border);padding-bottom:14px;}

/* cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px;}
.pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:13px;border:1px solid var(--border);color:var(--muted);}
.pill.ok{color:var(--ok);border-color:var(--ok);}
.pill.bad{color:var(--bad);border-color:var(--bad);}
.pill.warn{color:var(--warn);border-color:var(--warn);}
.msg{margin-top:10px;font-size:14px;min-height:1.3em;}
.msg.err{color:var(--bad);}
.msg.ok{color:var(--ok);}
.note{font-size:14px;color:var(--muted);margin-top:14px;}
.note.err{color:var(--bad);}
.note a,.gstat a,.userbar a{color:var(--accent);}
.secret{background:var(--bg);border:2px dashed var(--accent);border-radius:10px;padding:10px 12px;margin-top:10px;}
.secret code{font-size:20px;letter-spacing:1px;color:var(--text);user-select:all;}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px;}
th,td{text-align:left;padding:8px;border-top:1px solid var(--border);vertical-align:top;}
th{color:var(--muted);font-weight:500;}

/* dashboard */
.dash .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.top .who{color:var(--muted);font-size:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.dash{max-width:980px;margin:0 auto;padding:22px 18px 70px;}
.ev{border-top:1px solid var(--border);padding:14px 0;}
.ev:first-child{border-top:0;}
.ev-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.ev-name{font-size:18px;font-weight:600;}

/* booth setup */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:36px;align-items:start;}
.layouts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.lay{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 10px 12px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;}
.lay canvas{height:150px;width:auto;max-width:100%;border-radius:4px;}
.lay span{font-size:15px;font-weight:600;}
.lay small{color:var(--muted);font-size:12px;line-height:1.3;}
.lay[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.preview-col{position:sticky;top:16px;}
.preview-col .cap{color:var(--muted);font-size:14px;margin-bottom:8px;}
.preview-frame{background:var(--preview-bg);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;justify-content:center;}
.preview-frame canvas{max-width:100%;max-height:68vh;width:auto;height:auto;display:block;}
.tmpl-col .preview-frame canvas{max-height:74vh;}
.userbar,.gstat{color:var(--muted);font-size:14px;margin:-12px 0 22px;}
.gstat.err{color:var(--bad);}
.userbar button,.past-actions button{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;font:inherit;}
.past{margin-top:44px;}
.past h2{margin-bottom:14px;}
.past-list{display:flex;gap:14px;flex-wrap:wrap;}
.past-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;width:140px;text-align:left;}
.past-item img{width:100%;height:110px;object-fit:contain;background:var(--preview-bg);border-radius:4px;display:block;margin-bottom:6px;}
.past-item div{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.past-item small{color:var(--muted);font-size:12px;}
.past-actions{display:flex;gap:10px;margin-top:6px;font-size:13px;}
.past-actions a{color:var(--accent);}

/* theme editor */
.editor{background:var(--surface);border:2px solid var(--accent);border-radius:14px;padding:18px;margin:-6px 0 24px;}
.editor h3{margin-bottom:12px;}
.editor input[type=file]{max-width:100%;}
.editor .field{margin-bottom:14px;}
.editor select{width:100%;max-width:100%;}
.grid2>*{min-width:0;}
.crows{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;}
.crow{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;margin:0;}
.crow input[type=color]{width:42px;height:32px;padding:0;border:1px solid var(--border);border-radius:6px;background:none;cursor:pointer;}
.thumb{height:44px;max-width:90px;object-fit:contain;background:var(--preview-bg);border-radius:4px;border:1px solid var(--border);}

/* ready + result */
.ready,.result{display:grid;gap:36px;align-items:start;}
.ready{grid-template-columns:minmax(0,1fr) minmax(0,380px);}
.result{grid-template-columns:minmax(0,420px) minmax(0,1fr);}
.ready h2,.result h2{font-size:34px;margin-bottom:10px;}
.ready p,.result p{color:var(--muted);max-width:44ch;}
.result .controls{margin-top:22px;}
.controls{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;align-items:center;}
.email-panel{margin-top:18px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;max-width:520px;}

/* booth */
.evbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;}
.evbar b{font-size:18px;font-weight:650;}
.evbar span{color:var(--muted);margin-left:8px;}
.booth{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;}
.stage{position:relative;aspect-ratio:4/3;background:#000;border-radius:16px;overflow:hidden;border:1px solid var(--border);color:#fff;}
.stage video,.stage canvas.demo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.stage canvas.demo{display:none;}
.cd{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(140px,26vw,300px);color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.65);pointer-events:none;}
.cd.pop span{animation:pop .9s ease-out;}
@keyframes pop{0%{transform:scale(1.6);opacity:0}25%{opacity:1}100%{transform:scale(.85);opacity:.9}}
.flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none;}
.flash.go{animation:fl .5s ease-out;}
@keyframes fl{0%{opacity:1}100%{opacity:0}}
.badge{z-index:3;position:absolute;left:12px;top:12px;background:rgba(0,0,0,.65);color:#fff;border-radius:999px;padding:5px 14px;font-size:15px;}
.stage-msg{z-index:2;position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center;padding:24px;background:#16191f;}
.stage-msg h3{font-size:22px;}
.stage-msg p{margin:0;max-width:34ch;color:#aab2c0;}
.status{color:var(--muted);margin-top:12px;min-height:1.5em;}

/* password dialog */
.modal{position:fixed;inset:0;z-index:50;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.modal-box h3{font-size:22px;margin-bottom:10px;}
.modal-box p{margin:0 0 10px;}
.modal-box input{width:100%;}
.modal-box .note{min-height:1.4em;}

@media (max-width:860px){
  .setup,.booth,.result,.ready,.grid2{grid-template-columns:1fr;}
  .preview-col{position:static;}
  .lay canvas{height:110px;}
}
@media (max-width:640px){.grid2{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.cd.pop span,.flash.go{animation:none;}.flash.go{opacity:.6;}}