/* ===== Photobooth Web — pastel neo-brutalist theme ===== */
:root{
  --bg:#FFF6F0; --bg-alt:#F4F0FB; --surface:#fff;
  --ink:#3A3340; --ink-soft:#8A8290;
  --pink:#FFB3C7; --peach:#FFD3A8; --butter:#FFE9A3; --mint:#B6E7C9;
  --sky:#A9D8F0; --lavender:#D9C7F5; --coral:#FF9AA8; --accent:#FF9EBB;
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:var(--surface);border-bottom:2px solid var(--ink);
  flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:6px;font-weight:800;font-size:18px;white-space:nowrap;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis}
.brand .logo{width:28px;height:28px;flex:0 0 auto}
/* narrow phones: keep the logo, drop the wordmark so the actions never squeeze */
@media (max-width:430px){ .brand span{display:none} }
.top-actions{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.neo-icon{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--ink);border-radius:11px;box-shadow:var(--shadow-sm);
  transition:transform .08s,box-shadow .08s;
}
.neo-icon svg{width:20px;height:20px}
.neo-icon:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.neo-icon.undo{background:var(--sky)}
.neo-icon.redo{background:var(--peach)}
.neo-icon:disabled{background:var(--bg-alt);opacity:.5;box-shadow:none;cursor:default;transform:none;color:var(--ink-soft)}
.text-btn{
  display:flex;align-items:center;gap:5px;height:38px;padding:0 11px;
  background:var(--surface);border:2px solid var(--ink);border-radius:11px;box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:800;white-space:nowrap;
  transition:transform .08s,box-shadow .08s;
}
.text-btn svg{width:17px;height:17px;flex:0 0 auto}
.text-btn.save{background:var(--mint)}
.text-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---- stage / canvas ---- */
.stage{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;padding:14px}
.canvas-wrap{position:relative}
/* No border / shadow / rounded corners: they ate into the frame and made the
   preview differ from the saved image. A hairline outline sits outside the box
   so it takes no space. */
.canvas{
  position:relative;background:#fff;overflow:hidden;transform-origin:top center;
  outline:1px solid rgba(58,51,64,.18);outline-offset:0;
  touch-action:none;
}
/* touch-action:none keeps a drag on a photo from scrolling the page instead */
.cell{position:absolute;overflow:hidden;background:var(--bg-alt);touch-action:none}
.cell .ph{position:absolute;left:0;top:0;transform-origin:top left;will-change:transform;
  pointer-events:none;user-select:none;-webkit-user-drag:none}
.cell.empty{display:grid;place-items:center;outline:2px dashed rgba(138,130,144,.55);outline-offset:-4px;cursor:pointer}
.cell.empty svg{width:30%;height:30%;max-width:46px;max-height:46px;color:var(--ink-soft)}
.cell .photo-border{position:absolute;inset:0;pointer-events:none}
.cell.selected .sel{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 5px #fff, inset 0 0 0 8px var(--accent)}
.cell.selected .pip{position:absolute;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;pointer-events:none}
.cell .pip.tl{left:-6px;top:-6px}.cell .pip.tr{right:-6px;top:-6px}
.cell .pip.bl{left:-6px;bottom:-6px}.cell .pip.br{right:-6px;bottom:-6px}
.cell.dragging{z-index:30;opacity:.85}
.cell.drop-target{box-shadow:inset 0 0 0 4px var(--sky)}

/* ---- control strip ---- */
.control-strip{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 14px 8px}
.pill-btn{
  display:flex;align-items:center;gap:5px;height:38px;padding:0 12px;
  background:var(--surface);border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:800;white-space:nowrap;
  transition:transform .08s,box-shadow .08s;
}
.pill-btn svg{width:17px;height:17px}
.pill-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.zoom-pill{margin-left:auto;display:flex;align-items:center;background:var(--surface);
  border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);padding:3px}
.zoom-pill button{width:34px;height:30px;font-size:20px;font-weight:800}
.zoom-pill .pct{width:48px;text-align:center;font-weight:700;font-size:13px}

/* ---- toolbar ---- */
.toolbar{flex:0 0 auto;display:flex;gap:8px;padding:6px 12px calc(8px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:2px solid var(--ink)}
.tool{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;
  background:var(--surface);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);
  transition:transform .08s,box-shadow .08s}
.tool svg{width:30px;height:30px}
.tool span{font-size:11.5px;font-weight:700}
.tool:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tool.active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}
.tool.f-frame.active{background:var(--peach)}
.tool.f-bg.active{background:var(--sky)}
.tool.f-template.active{background:var(--pink)}

/* ---- sheet / modal ---- */
.backdrop{position:fixed;inset:0;background:rgba(58,51,64,.35);display:flex;align-items:flex-end;justify-content:center;z-index:100}
.backdrop.hidden{display:none}
.sheet{width:100%;max-width:560px;max-height:88vh;overflow:auto;background:var(--bg);
  border:2.5px solid var(--ink);border-radius:22px 22px 0 0;box-shadow:0 -6px 0 var(--ink);
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));animation:slideup .2s ease}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet h2{display:flex;align-items:center;gap:8px;margin:2px 0 14px;font-size:18px;font-weight:800}
.sheet h2 svg{width:22px;height:22px}
.sheet .close-x{margin-left:auto;width:34px;height:34px;border:2px solid var(--ink);border-radius:10px;background:var(--surface);display:grid;place-items:center}
.sheet .close-x svg{width:16px;height:16px}
.field{margin:12px 0}
.field label{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin-bottom:6px}
.field label .val{font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:52px;padding:10px 6px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);font-weight:700}
.seg button.active{background:var(--accent)}
.hint{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);position:relative;cursor:pointer;padding:0}
.swatch.active::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px #fff}
.color-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.color-row input[type=color]{width:46px;height:38px;border:2px solid var(--ink);border-radius:10px;background:none;padding:2px}
.btn{display:block;width:100%;padding:13px;border:2.5px solid var(--ink);border-radius:14px;
  font-weight:800;font-size:15px;box-shadow:var(--shadow-sm);background:var(--surface);margin-top:10px}
.btn.primary{background:var(--accent)}
.btn.danger{background:var(--coral)}
.btn.mint{background:var(--mint)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.45;box-shadow:none;transform:none}
.row-2{display:flex;gap:8px}
.row-2 .btn{margin-top:10px}

/* thumbs / galleries */
.grid-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:8px}
.thumb{aspect-ratio:1;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--surface);position:relative;display:grid;place-items:center;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{box-shadow:0 0 0 3px var(--accent)}
.thumb.deleting{box-shadow:0 0 0 2px var(--coral)}
.thumb .del{position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);display:grid;place-items:center;padding:0}
.thumb .del svg{width:11px;height:11px}
.thumb .pending{position:absolute;left:0;right:0;bottom:0;background:var(--butter);
  border-top:1.5px solid var(--ink);font-size:9.5px;font-weight:800;padding:2px 0;text-align:center}

/* section head with action */
.sec-head{display:flex;align-items:center;gap:10px;margin:16px 0 4px}
.sec-head h3{margin:0;font-size:14px;font-weight:800;flex:1}
.link-btn{font-size:13px;font-weight:800;color:var(--coral);background:none;padding:4px}
.link-btn.done{color:var(--ink)}

/* ---- chips (categories) ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;padding:8px 14px;border:1.3px solid var(--ink);border-radius:999px;
  background:var(--surface);font-size:13px;font-weight:700;white-space:nowrap}
.chip.active{background:var(--accent);border-width:2px}
.chip.ghost{background:var(--bg-alt)}

/* ---- template / preview cards ---- */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.tpl-card{position:relative;border:2px solid var(--ink);border-radius:14px;overflow:hidden;
  background:var(--surface);box-shadow:3px 3px 0 var(--ink);padding:0;text-align:left;cursor:pointer}
.tpl-card:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tpl-card .prev{aspect-ratio:2/3;background:var(--bg-alt);display:block;width:100%;object-fit:contain}
.tpl-card .meta{padding:8px 10px;font-size:13px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:2px solid var(--ink)}
.tpl-card .badge{position:absolute;top:6px;right:6px;padding:3px 8px;border-radius:999px;
  background:var(--butter);border:1.5px solid var(--ink);font-size:11px;font-weight:800}
.tpl-card .tools{position:absolute;top:6px;left:6px;display:flex;gap:4px}
.tpl-card .tools button{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);
  background:var(--surface);display:grid;place-items:center;font-size:12px;padding:0}
.empty-note{text-align:center;padding:36px 10px;color:var(--ink-soft);font-size:13px;line-height:1.6}
.empty-note b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}

/* ---- mixed layout editor ---- */
.mix-preview{border:2px solid var(--ink);border-radius:12px;background:var(--surface);padding:8px;margin-bottom:10px}
.mix-preview .mp{aspect-ratio:2/3;display:flex;flex-direction:column;gap:3px;margin:0 auto;max-height:220px}
.mix-preview .mp-row{display:flex;gap:3px}
.mix-preview .mp-cell{background:var(--bg-alt);border:1.5px solid var(--ink);border-radius:4px;
  display:grid;place-items:center;font-size:11px;font-weight:800}
.mix-row{border:1.6px solid var(--ink);border-radius:12px;background:var(--surface);padding:10px;margin-top:8px}
.mix-row .rh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.mix-row .rh .sp{flex:1}
.mix-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin-top:8px}
.mix-cell{display:flex;align-items:center;gap:6px;background:var(--bg-alt);border-radius:9px;padding:6px 8px;font-size:12px;font-weight:700}
.mix-cell .sp{flex:1}
.stepper{display:flex;border:1.3px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--surface)}
.stepper button{width:28px;height:26px;font-size:14px;font-weight:800;line-height:1}
.stepper button+button{border-left:1.3px solid var(--ink)}
.icon-x{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1.3px solid var(--ink);
  display:grid;place-items:center;font-size:11px;font-weight:800;padding:0;flex:0 0 auto}

/* ---- reorder list ---- */
.order-list{margin-top:8px}
.order-item{display:flex;align-items:center;gap:10px;padding:8px;border:1.6px solid var(--ink);
  border-radius:12px;background:var(--surface);margin-bottom:8px;
  touch-action:none;cursor:grab;user-select:none}
.order-item .grip{color:var(--ink-soft);font-size:17px;line-height:1;letter-spacing:-2px;flex:0 0 auto}
.order-item.drag{cursor:grabbing;position:relative;z-index:5;opacity:.95;
  box-shadow:0 6px 0 var(--ink),0 10px 18px rgba(58,51,64,.28);border-color:var(--accent);border-width:2px}
.order-item.drag .grip{color:var(--accent)}
.order-item.over{box-shadow:0 0 0 2px var(--sky)}
.order-item .num{width:26px;height:26px;border-radius:50%;background:var(--butter);
  border:1.5px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto}
.order-item .th{width:52px;height:52px;border-radius:8px;border:1.5px solid var(--ink);
  background:var(--bg-alt);object-fit:cover;flex:0 0 auto}
.order-item .nm{flex:1;font-size:14px;font-weight:700}
.order-item .mv{display:flex;gap:4px}
.order-item .mv button{width:28px;height:30px;border:1.3px solid var(--ink);border-radius:8px;
  background:var(--surface);font-size:14px;font-weight:800;padding:0}

/* ---- admin ---- */
.admin-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border:2px solid var(--ink);
  border-radius:12px;background:var(--bg-alt);font-size:13px;font-weight:700;margin-bottom:10px}
.admin-bar svg{width:16px;height:16px;flex:0 0 auto}
.admin-bar.on{background:var(--mint)}
.admin-bar .sp{flex:1}
.admin-bar button{font-size:12px;font-weight:800;text-decoration:underline;padding:2px}
input[type=text],input[type=password]{width:100%;border:2px solid var(--ink);border-radius:12px;
  padding:11px;font-family:inherit;font-size:16px;background:var(--surface)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:12px;font-weight:700;font-size:14px;z-index:200;opacity:0;
  transition:opacity .2s;pointer-events:none;max-width:80vw;text-align:center}
.toast.show{opacity:1}
.hidden{display:none !important}

/* unified background library: per-thumb move handle */
.thumb .mvbg{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--ink);display:grid;place-items:center;
  font-size:12px;font-weight:800;line-height:1;cursor:pointer}
.thumb[role=button]{cursor:pointer}

/* ---- photo control bar (appears when a photo is selected) ---- */
/* Kept deliberately short: on a phone this floats over the photos, so every
   extra row is a row of the user's work they cannot see or reach. */
.photo-bar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(88px + env(safe-area-inset-bottom));
  width:calc(100% - 24px);max-width:420px;z-index:60;
  background:var(--surface);border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow);padding:8px 10px 9px;
}
.photo-bar.hidden{display:none}
.pb-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:13px}
.pb-head b{flex:1}
.pb-x{width:28px;height:28px;border:2px solid var(--ink);border-radius:9px;background:var(--bg-alt);
  display:grid;place-items:center;padding:0}
.pb-x svg{width:12px;height:12px}
.pb-rows{display:flex;flex-direction:column;gap:6px}
.pb-group{display:flex;align-items:center;gap:6px}
.pb-lab{font-size:12px;font-weight:800;color:var(--ink-soft);width:52px;flex:0 0 auto}
.pb-group button{
  flex:1;min-width:0;height:34px;border:2px solid var(--ink);border-radius:11px;
  background:var(--surface);font-size:17px;font-weight:800;line-height:1;
  display:grid;place-items:center;transition:transform .06s,box-shadow .06s;
  box-shadow:2px 2px 0 var(--ink);
}
.pb-group button svg{width:19px;height:19px}
.pb-group button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.pb-group button.on{background:var(--accent)}
.pb-group button.wide{font-size:13.5px;font-weight:800}
.pb-group button.swap{background:var(--sky)}
.pb-group button.del{background:var(--coral)}
.pb-tip{margin-top:7px;font-size:11px;line-height:1.35;text-align:center;color:var(--ink-soft)}