/* Boothly — the native app's look. The iPhone app is dark everywhere (.preferredColorScheme(.dark)): cork for the
   corkboard, black for the booth, darkroom browns (0.10, 0.08, 0.065) and a warm gold (0.98, 0.77, 0.39) for Event
   Mode, printing and the editor. On the web the system sheets (Settings, Print, Decorate, Animate), Event Mode's
   setup and library, alerts and menus also have a light appearance (paper and ink) that follows the system or the
   store's theme; the booth, the printer, the kiosk, the strip view and Boothly Pro stay dark as on iPhone. */
:root {
  --gold: rgb(250, 196, 99);            /* Color(red: 0.98, green: 0.77, blue: 0.39) */
  --gold-ink: rgb(250, 196, 99);        /* gold used as text / icons */
  --deco-gold: rgb(255, 201, 107);      /* Color(red: 1, green: 0.79, blue: 0.42) */
  --leak: rgb(255, 217, 77);            /* Color(red: 1, green: 0.85, blue: 0.3) */
  --red: rgb(255, 69, 58); --orange: rgb(255, 159, 10); --green: rgb(48, 209, 88);
  --ev-bg: rgb(31, 24, 20);             /* EventArchiveListView (0.12, 0.095, 0.08) */
  --ev-bg2: rgb(28, 22, 18);            /* EventArchiveDetailView (0.11, 0.085, 0.07) */
  --setup-a: rgb(43, 31, 26); --setup-b: rgb(23, 19, 18); --setup-glow: rgba(153, 51, 38, 0.18);
  --sheet-bg: rgb(26, 20, 17);          /* (0.10, 0.08, 0.065) */
  --text: #fff; --text2: rgba(255, 255, 255, 0.6); --text3: rgba(255, 255, 255, 0.45);
  --card: rgba(255, 255, 255, 0.055); --card-stroke: rgba(255, 255, 255, 0.075); --tile: rgba(255, 255, 255, 0.065);
  --field: rgba(0, 0, 0, 0.23); --field-stroke: rgba(255, 255, 255, 0.12); --chip: rgba(0, 0, 0, 0.2); --chip-stroke: rgba(255, 255, 255, 0.09);
  --soft: rgba(255, 255, 255, 0.08); --soft2: rgba(255, 255, 255, 0.04);
  --glass: rgba(60, 54, 50, 0.6); --glass-edge: rgba(255, 255, 255, 0.1);
  --sys-bg: #000; --row: #1c1c1e; --sep: rgba(84, 84, 88, 0.55); --fill: rgba(120, 120, 128, 0.32); --fill2: rgba(118, 118, 128, 0.24);
  --alert: rgba(44, 44, 46, 0.86); --sys-text: #fff; --sys-text2: rgba(235, 235, 245, 0.6); --tint: rgb(10, 132, 255);
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --gold-ink: rgb(163, 104, 16);
    --ev-bg: rgb(246, 240, 232); --ev-bg2: rgb(244, 238, 230);
    --setup-a: rgb(250, 244, 236); --setup-b: rgb(240, 230, 218); --setup-glow: rgba(214, 92, 70, 0.14);
    --sheet-bg: rgb(247, 242, 235);
    --text: rgb(29, 23, 18); --text2: rgba(29, 23, 18, 0.62); --text3: rgba(29, 23, 18, 0.45);
    --card: #fff; --card-stroke: rgba(60, 40, 20, 0.08); --tile: #fff;
    --field: rgba(60, 40, 20, 0.055); --field-stroke: rgba(60, 40, 20, 0.1); --chip: rgba(60, 40, 20, 0.05); --chip-stroke: rgba(60, 40, 20, 0.08);
    --soft: rgba(60, 40, 20, 0.07); --soft2: rgba(60, 40, 20, 0.035);
    --glass: rgba(255, 255, 255, 0.82); --glass-edge: rgba(0, 0, 0, 0.06);
    --sys-bg: #f2f2f7; --row: #fff; --sep: rgba(60, 60, 67, 0.22); --fill: rgba(120, 120, 128, 0.16); --fill2: rgba(118, 118, 128, 0.12);
    --alert: rgba(250, 250, 250, 0.86); --sys-text: #000; --sys-text2: rgba(60, 60, 67, 0.6); --tint: rgb(0, 122, 255);
    --red: rgb(255, 59, 48); --orange: rgb(230, 126, 0); --green: rgb(52, 199, 89);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --gold-ink: rgb(163, 104, 16);
  --ev-bg: rgb(246, 240, 232); --ev-bg2: rgb(244, 238, 230);
  --setup-a: rgb(250, 244, 236); --setup-b: rgb(240, 230, 218); --setup-glow: rgba(214, 92, 70, 0.14);
  --sheet-bg: rgb(247, 242, 235);
  --text: rgb(29, 23, 18); --text2: rgba(29, 23, 18, 0.62); --text3: rgba(29, 23, 18, 0.45);
  --card: #fff; --card-stroke: rgba(60, 40, 20, 0.08); --tile: #fff;
  --field: rgba(60, 40, 20, 0.055); --field-stroke: rgba(60, 40, 20, 0.1); --chip: rgba(60, 40, 20, 0.05); --chip-stroke: rgba(60, 40, 20, 0.08);
  --soft: rgba(60, 40, 20, 0.07); --soft2: rgba(60, 40, 20, 0.035);
  --glass: rgba(255, 255, 255, 0.82); --glass-edge: rgba(0, 0, 0, 0.06);
  --sys-bg: #f2f2f7; --row: #fff; --sep: rgba(60, 60, 67, 0.22); --fill: rgba(120, 120, 128, 0.16); --fill2: rgba(118, 118, 128, 0.12);
  --alert: rgba(250, 250, 250, 0.86); --sys-text: #000; --sys-text2: rgba(60, 60, 67, 0.6); --tint: rgb(0, 122, 255);
  --red: rgb(255, 59, 48); --orange: rgb(230, 126, 0); --green: rgb(52, 199, 89);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font: 17px/1.29 var(--sys); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; }
button:disabled { cursor: default; }
html.touch #app button { min-height: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-title:focus, .screen:focus { outline: none; }
[hidden] { display: none !important; }
p, h1, h2 { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.sf { display: inline-block; vertical-align: -0.125em; flex: none; overflow: visible; }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.label > .sf { font-size: 1.05em; width: 22px; }

#app { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; }
.stage { position: absolute; inset: 0; }
#sheets { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#sheets > * { pointer-events: auto; }
#overlays { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#overlays > * { pointer-events: auto; }
#toast { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 110px); z-index: 50; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.screen { position: absolute; inset: 0; overflow: hidden; }

/* ---------- spinner ---------- */
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.8s linear infinite; flex: none; }
.spinner.dark { border-color: rgba(0, 0, 0, 0.2); border-top-color: #000; width: 20px; height: 20px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.compositing, .preparing { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); }
.comp-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px; border-radius: 18px; background: rgba(40, 40, 40, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); color: rgba(255, 255, 255, 0.7); font: 600 13px var(--mono); }
.comp-box .spinner { width: 34px; height: 34px; }

/* ================================================================ corkboard */
.corkboard { background: linear-gradient(rgb(184, 140, 89), rgb(153, 112, 69)); color: #fff; }
.corkboard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(70, 40, 10, 0.55) 0.8px, transparent 1.2px), radial-gradient(rgba(255, 230, 190, 0.5) 0.7px, transparent 1.1px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.cork-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--sab) + 130px); overscroll-behavior: contain; }
.cork-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sat) + 30px) 18px 0; gap: 10px; max-width: 1100px; margin: 0 auto; }
.cork-top-lead { display: flex; gap: 10px; }
.cork-glass { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.16); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); transition: transform 0.15s var(--ease), background 0.15s; }
.cork-glass:active { transform: scale(0.92); background: rgba(0, 0, 0, 0.26); }
.cork-more { display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 999px; color: rgba(255, 255, 255, 0.84); background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font: 900 10px var(--rounded); letter-spacing: 1.1px; }
.cork-more .sf { font-size: 16px; }
.cork-more:active { opacity: 0.75; }
.cork-content { max-width: 1100px; margin: 0 auto; }
.cork-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 28px 20px; padding: 24px; margin-top: 0; }
.cork-cell { display: flex; justify-content: center; align-items: flex-start; }
.pinned { position: relative; width: 130px; display: block; transform: rotate(var(--rot)) scale(var(--zoom, 1)); transition: transform 0.28s cubic-bezier(0.25, 1.15, 0.4, 1); touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pinned.zooming { z-index: 5; }
.pinned-paper { display: block; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.pinned img { display: block; width: 100%; height: auto; min-height: 60px !important; -webkit-user-drag: none; }
.pin { position: absolute; top: -4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgb(255, 120, 110), rgba(230, 30, 25, 0.9) 60%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.pinned:active .pinned-paper { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4); }
.cork-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 68px; text-align: center; font-family: var(--rounded); }
.cork-empty .sf { font-size: 34px; color: rgba(255, 255, 255, 0.7); }
.ce-title { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.ce-sub { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.coin-wrap { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 36px); display: flex; justify-content: center; pointer-events: none; }
.coin-slot { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; color: #fff; font: 700 15px var(--rounded); letter-spacing: 1.5px;
  background: linear-gradient(rgba(255, 59, 48, 0.85), rgba(255, 59, 48, 0.65)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3); transition: transform 0.15s var(--ease); }
.coin-slot .sf { font-size: 17px; }
.coin-slot:active { transform: scale(0.96); }

/* ================================================================ curtain */
.curtain-screen { background: #000; display: grid; place-items: center; cursor: pointer; -webkit-user-select: none; user-select: none; }
.booth-interior { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.aperture-rings { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.ring { position: absolute; border-radius: 50%; }
.ring.outer { inset: 0; border: 1px solid rgba(255, 255, 255, 0.08); }
.ring.inner { width: 62px; height: 62px; border: 1.5px solid rgba(255, 255, 255, 0.08); animation: ringPulse 1.6s ease-in-out infinite alternate; }
.aperture-icon { font-size: 32px; color: #fff; animation: glow 1.6s ease-in-out infinite alternate; display: grid; }
@keyframes ringPulse { to { border-color: rgba(255, 255, 255, 0.3); } }
@keyframes glow { from { opacity: 0.45; } to { opacity: 1; } }
.booth-title { font: 900 42px var(--rounded); color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.12); letter-spacing: 0.5px; }
.booth-sub { font: 500 14px var(--mono); color: rgba(255, 255, 255, 0.6); }
.curtain { position: absolute; top: 0; bottom: 0; width: calc(50% + 20px); border-radius: 2px; will-change: transform;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent 50%, rgba(0, 0, 0, 0.5)),
    linear-gradient(90deg, rgb(140, 13, 26) 0%, rgb(184, 26, 38) 9.09%, rgb(140, 13, 26) 18.18%, rgb(184, 26, 38) 27.27%, rgb(140, 13, 26) 36.36%, rgb(184, 26, 38) 45.45%, rgb(140, 13, 26) 54.54%, rgb(184, 26, 38) 63.63%, rgb(140, 13, 26) 72.72%, rgb(184, 26, 38) 81.81%, rgb(140, 13, 26) 90.9%, rgb(184, 26, 38) 100%); }
.curtain.left { left: 0; }
.curtain.right { right: 0; }
.curtain-label { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 60px); text-align: center; font: 700 15px var(--rounded); letter-spacing: 3px; color: rgba(255, 255, 255, 0.85); pointer-events: none; }

/* ================================================================ booth (camera) */
.booth { background: #000; color: #fff; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cam-preview { position: absolute; inset: 0; overflow: hidden; background: #000; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.25s; }
.cam-video.mirrored { transform: scaleX(-1); }
.booth.switching .cam-video { opacity: 0.25; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.booth-top { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 16px); display: flex; align-items: center; gap: 8px; padding: 0 20px 0 16px; z-index: 5; }
.booth-back { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); font: 600 15px var(--rounded); }
.booth-back .sf { font-size: 14px; }
.booth-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); font-size: 18px; }
.booth-circle.flip { width: 48px; height: 48px; font-size: 22px; }
.booth-back:active, .booth-circle:active { opacity: 0.7; }
.kiosk-top { justify-content: center; top: calc(var(--sat) + 8px); }
.kiosk-mark { padding: 14px 22px; font: 900 13px var(--rounded); letter-spacing: 3px; color: rgba(255, 255, 255, 0.78); cursor: default; -webkit-touch-callout: none; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.count-item { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.count-photo { font: 700 12px var(--mono); letter-spacing: 2px; }
.count-num { font: 900 120px/1 var(--rounded); text-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); font-variant-numeric: tabular-nums; }
.kiosk .count-num { font-size: 136px; }
.booth-bottom { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 40px); display: flex; flex-direction: column; align-items: center; z-index: 5; }
.dots-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 24px; }
.dots-label { font: 700 11px var(--mono); letter-spacing: 2px; color: rgba(255, 255, 255, 0.8); }
.dots { display: flex; }
.dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 4px; background: rgba(255, 255, 255, 0.32); transition: background 0.2s; }
.dot.on { background: rgb(255, 214, 10); }
.kiosk .dots { gap: 13px; }
.kiosk .dot { width: 13px; height: 13px; margin: 0 3px; }
.shutter { position: relative; width: 78px; height: 78px; border-radius: 50%; background: #fff; transition: opacity 0.2s, transform 0.15s var(--ease); }
.shutter .sr1 { position: absolute; inset: 6px; border-radius: 50%; border: 4px solid rgba(0, 0, 0, 0.2); }
.shutter .sr2 { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); }
.shutter:active:not(:disabled) { transform: scale(0.94); }
.shutter.busy, .shutter:disabled { opacity: 0.4; }
.kiosk .shutter { width: 92px; height: 92px; }
.kiosk .shutter .sr1 { inset: 9px; } .kiosk .shutter .sr2 { inset: 16px; }
@media (min-width: 700px) and (min-height: 700px) { .kiosk .shutter { width: 112px; height: 112px; } }
.booth.no-camera .shutter { opacity: 0.4; }
.cam-unavailable { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, rgb(40, 34, 60), #000 70%); }
.cu-box { max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cu-box > .sf { font-size: 40px; color: rgba(255, 255, 255, 0.5); margin-bottom: 4px; }
.cu-title { font: 700 19px var(--rounded); }
.cu-text { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.cu-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; }
.cu-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px !important; border-radius: 14px; background: rgba(255, 255, 255, 0.12); font: 600 15px var(--rounded); }
.cu-btn.primary { background: #fff; color: #000; }
.cu-btn:active { opacity: 0.75; }
.options-host { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 140px); z-index: 6; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.options-panel { pointer-events: auto; width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; border-radius: 24px;
  background: rgba(40, 40, 40, 0.55); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.op-handle { align-self: center; width: 36px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); margin-top: 12px; }
.op-theme { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.op-label { font: 600 10px var(--mono); letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); }
.op-label.wide { letter-spacing: 2px; color: rgba(255, 255, 255, 0.6); }
.op-swatches { display: flex; gap: 18px; }
.swatch { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px var(--swb), 0 0 4px rgba(0, 0, 0, 0.35); display: grid; place-items: center; transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.swatch.on { transform: scale(1.18); box-shadow: inset 0 0 0 2.5px #fff, 0 0 4px rgba(0, 0, 0, 0.35); }
.lock { display: grid; place-items: center; color: rgba(255, 255, 255, 0.7); font-size: 8px; }
.swatch .lock .sf { font-size: 8px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }
.op-divider { height: 0.5px; background: rgba(255, 255, 255, 0.12); margin: 0; }
.op-row { display: flex; align-items: center; padding: 0 24px; gap: 8px; }
.op-layouts { display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.op-layout { display: inline-flex; align-items: center; gap: 3px; padding: 7px 14px; border-radius: 10px; font: 600 13px var(--mono); color: rgba(255, 255, 255, 0.6); transition: background 0.25s, color 0.25s; }
.op-layout.on { background: #fff; color: #000; }
.op-layout .lock { color: rgba(255, 255, 255, 0.4); }
.op-layout .lock .sf { font-size: 9px; }
.op-leak { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); font: 600 12px var(--sys); }
.op-leak > .sf { font-size: 14px; }
.op-leak .lock { color: inherit; } .op-leak .lock .sf { font-size: 9px; }
.op-leak.on { color: var(--leak); background: rgba(255, 217, 77, 0.18); }
.op-papers { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 16px; margin-top: -4px; }
.paper { width: 26px; height: 26px; border-radius: 50%; background: var(--pc); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2); display: grid; place-items: center; transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.paper.on { transform: scale(1.2); box-shadow: inset 0 0 0 2px #fff; }
.paper .lock { color: rgba(255, 255, 255, 0.6); } .paper .lock .sf { font-size: 7px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
.op-interval-block { display: flex; flex-direction: column; gap: 9px; padding: 0 24px 16px; margin-top: -4px; }
.op-intervals { display: flex; gap: 6px; }
.op-interval { flex: 1; padding: 9px 0; text-align: center; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); font: 700 14px var(--mono); transition: background 0.25s, color 0.25s; }
.op-interval.on { background: #fff; color: #000; }

/* ================================================================ developing (the printer) */
.developing { display: flex; flex-direction: column; background: radial-gradient(ellipse 650px 650px at 50% 0, rgb(31, 26, 19), rgb(5, 5, 5)); color: #fff; padding-top: var(--sat); }
.dev-status { padding: 24px 20px 0; margin-bottom: 8px; text-align: center; font: 500 14px var(--mono); color: rgb(227, 201, 153); }
.dev-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.printer-face { position: absolute; left: 50%; transform: translateX(-50%); height: 116px; z-index: 3; border-radius: 19px;
  background: linear-gradient(rgb(74, 74, 74) 0%, rgb(36, 36, 36) 12%, rgb(19, 19, 19) 88%, rgb(51, 51, 51) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 15px rgba(0, 0, 0, 0.7); }
.printer-face::before { content: ""; position: absolute; inset: 0 14px; border-radius: 19px; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 1.5px, rgba(255, 255, 255, 0.016) 1.5px 2px, transparent 2px 4px, rgba(255, 255, 255, 0.035) 4px 4.5px, transparent 4.5px 6px); }
.pf-plate { position: absolute; left: 27px; right: 27px; top: 24px; display: flex; align-items: center; justify-content: space-between; }
.pf-brand { font: 900 12px var(--mono); letter-spacing: 3px; color: rgb(222, 176, 97); }
.lamp { width: 5px; height: 5px; border-radius: 50%; background: rgb(255, 161, 51); box-shadow: 0 0 4px rgba(255, 149, 0, 0.7); transition: background 0.3s, box-shadow 0.3s; }
.lamp.ready { background: rgb(153, 194, 120); box-shadow: 0 0 4px rgba(52, 199, 89, 0.45); }
.pf-screws { position: absolute; left: 12px; right: 12px; top: 66px; display: flex; justify-content: space-between; }
.screw { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, rgb(84, 84, 84), #000); position: relative; }
.screw::after { content: ""; position: absolute; left: 1.5px; top: 2.6px; width: 3px; height: 0.7px; background: rgba(0, 0, 0, 0.8); transform: rotate(-35deg); }
.pf-recess { position: absolute; left: 50%; top: 86px; width: calc(var(--slot) + 12px); height: 24px; margin-left: calc((var(--slot) + 12px) / -2); border-radius: 7px; background: rgba(0, 0, 0, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.pf-slot { position: absolute; left: 50%; top: 96px; width: var(--slot); height: 9px; margin-left: calc(var(--slot) / -2); border-radius: 5px; background: #000; }
.pf-slot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent); }
.pf-lip { position: absolute; left: 50%; top: 106px; width: calc(var(--slot) + 4px); height: 4px; margin-left: calc((var(--slot) + 4px) / -2); border-radius: 2px; background: linear-gradient(rgb(97, 97, 97), rgb(26, 26, 26)); }
.pf-contact { position: absolute; left: 50%; transform: translateX(-50%); height: 17px; z-index: 2; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.25), transparent); pointer-events: none; }
.paper-clip { position: absolute; left: 50%; transform: translateX(-50%); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; z-index: 1; }
.feed-paper { position: relative; flex: none; transform-origin: 50% 0; background: #fff; transform: translateY(-110%); }
.feed-paper canvas { display: block; width: 100%; height: 100%; }
.paper-sheen { position: absolute; left: 0; right: 0; bottom: 0; height: min(28px, 8%); background: linear-gradient(transparent, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06)); }

/* ================================================================ strip detail */
.detail { background: #000; color: #fff; padding-top: var(--sat); padding-bottom: var(--sab); }
.detail.in-sheet { position: absolute; inset: 0; padding-top: 18px; }
.detail-col { position: absolute; inset: var(--sat) 0 var(--sab); display: flex; flex-direction: column; align-items: center; }
.detail.in-sheet .detail-col { inset: 18px 0 var(--sab); }
.detail-strip-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 24px 0 20px; touch-action: none; overflow: visible; cursor: grab; }
.detail-strip { position: relative; transform-origin: 50% 40%; will-change: transform; }
.detail-canvas { display: block; width: 100%; height: auto; background: #fff; transform: rotate(-2deg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.creative-bar { display: flex; gap: 22px; padding: 14px 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); margin-bottom: 24px; flex: none; }
.creative-bar button { display: inline-flex; align-items: center; gap: 7px; font: 700 13px var(--rounded); color: var(--deco-gold); }
.creative-bar button:active { opacity: 0.6; }
.action-bar { display: flex; gap: 8px; width: 100%; max-width: 560px; padding: 0 12px 12px; flex: none; }
.act { flex: 1 1 0; min-width: 0; height: 58px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #fff; transition: background 0.2s, transform 0.12s var(--ease); }
.act .sf { font-size: 18px; }
.act-label { font: 600 10px var(--rounded); white-space: nowrap; }
.act.secondary { background: rgba(255, 255, 255, 0.18); }
.act.ghost { background: rgba(255, 255, 255, 0.08); }
.act.primary { background: #fff; color: #000; }
.act:active { transform: scale(0.96); }

/* ================================================================ sheets */
.sheet-wrap { position: absolute; inset: 0; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--sat) + 10px); display: flex; flex-direction: column; border-radius: 38px 38px 0 0; overflow: hidden; background: var(--sys-bg); color: var(--sys-text); box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.3); }
.sheet.dark-sheet { background: var(--sheet-bg); color: var(--text); }
.sheet-grabber { position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: currentColor; opacity: 0.25; z-index: 5; }
.sheet-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: calc(var(--sab) + 20px); }
.navbar { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 8px; min-height: 60px !important; padding: 14px 16px 8px; flex: none; }
.nav-title { grid-column: 2; font: 600 17px/22px var(--sys); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-leading { grid-column: 1; display: flex; gap: 8px; justify-self: start; }
.nav-trailing { grid-column: 3; display: flex; gap: 8px; justify-self: end; }
.glass { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 16px; border-radius: 22px; font-size: 17px; color: inherit;
  background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); box-shadow: 0 0 0 0.5px var(--glass-edge), 0 4px 16px rgba(0, 0, 0, 0.1); transition: transform 0.15s var(--ease), opacity 0.15s; white-space: nowrap; }
.glass-icon { padding: 0; width: 44px; }
.glass .sf { font-size: 20px; }
.glass-bold { font-weight: 600; }
.dark-sheet .glass-bold { color: var(--gold-ink); }
.glass:active:not(:disabled) { transform: scale(0.94); }
.glass:disabled { opacity: 0.35; }
@media (min-width: 700px) and (min-height: 600px) {
  .sheet { top: 50% !important; left: 50%; right: auto; bottom: auto; width: min(600px, calc(100% - 48px)); height: min(860px, calc(100% - 64px)); translate: -50% -50%; border-radius: 32px; }
  .sheet-grabber { display: none; }
  .deco-sheet { width: min(760px, calc(100% - 48px)); }
}

/* ---------- toast, alert, action sheet, menu ---------- */
.toast { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 12px 18px; border-radius: 999px; color: #fff; background: rgba(0, 0, 0, 0.86); font-size: 15px; font-weight: 500; opacity: 0; transform: translateY(14px); transition: opacity 0.25s, transform 0.35s var(--ease); pointer-events: auto; }
.toast.on { opacity: 1; transform: none; }
.toast .sf { color: var(--green); font-size: 18px; }
.alert-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); padding: 24px; }
.alert { width: 300px; max-width: 100%; border-radius: 30px; background: var(--alert); color: var(--sys-text); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 22px 18px 16px; }
.alert-title { font-weight: 600; font-size: 17px; }
.alert-message { font-size: 15px; line-height: 20px; margin-top: 6px; }
.alert-field { display: block; width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 14px; border: 0; outline: none; background: var(--fill2); font-size: 17px; color: var(--sys-text); }
.alert-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.alert-buttons.two { flex-direction: row; }
.alert-btn { flex: 1; min-height: 48px !important; border-radius: 24px; background: var(--fill2); font-size: 17px; font-weight: 500; text-align: center; color: var(--sys-text); }
.alert-btn:not(.cancel):not(.destructive) { background: var(--tint); color: #fff; font-weight: 600; }
.alert-btn.destructive { color: var(--red); }
.alert-buttons:not(.two) .alert-btn.cancel:only-child { background: var(--tint); color: #fff; font-weight: 600; }
.alert-btn:active { opacity: 0.7; }
.asheet-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.asheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.asheet { position: relative; width: 100%; max-width: 440px; padding: 0 8px calc(var(--sab) + 8px); display: flex; flex-direction: column; gap: 8px; }
.asheet-group { border-radius: 26px; overflow: hidden; background: var(--alert); color: var(--sys-text); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
.asheet-head { padding: 14px 18px 12px; text-align: center; border-bottom: 0.5px solid var(--sep); }
.asheet-title { font-size: 13px; font-weight: 600; color: var(--sys-text2); }
.asheet-msg { font-size: 13px; line-height: 17px; margin-top: 3px; color: var(--sys-text2); }
.asheet-btn { display: block; width: 100%; min-height: 56px !important; text-align: center; font-size: 19px; color: var(--tint); }
.asheet-group .asheet-btn + .asheet-btn { border-top: 0.5px solid var(--sep); }
.asheet-btn.destructive { color: var(--red); }
.asheet-btn:active { background: var(--fill2); }
.asheet-cancel { border-radius: 26px; background: var(--alert); font-weight: 600; -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }
@media (min-width: 700px) { .asheet-wrap { justify-content: center; } }
.menu-scrim { position: absolute; inset: 0; }
.menu { position: fixed; min-width: 230px; max-width: 300px; border-radius: 22px; overflow: hidden; padding: 6px 0; background: var(--alert); color: var(--sys-text); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 0 0 0.5px var(--glass-edge), 0 16px 48px rgba(0, 0, 0, 0.3); }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px !important; padding: 10px 18px; font-size: 17px; text-transform: none; }
.menu-item .sf { font-size: 18px; }
.menu-item:active, .menu-item:focus-visible { background: var(--fill2); outline: none; }
.menu-item.destructive { color: var(--red); }

/* ---------- Settings (insetGrouped) ---------- */
.settings-col { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; }
.group { margin-top: 24px; }
.group:first-child { margin-top: 6px; }
.group-header { padding: 0 20px 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--sys-text2); }
.group-footer { padding: 8px 20px 0; font-size: 13px; line-height: 18px; color: var(--sys-text2); }
.group-rows { background: var(--row); border-radius: 26px; overflow: hidden; }
.row { position: relative; display: flex; align-items: center; width: 100%; min-height: 52px !important; padding: 12px 20px; gap: 10px; text-align: left; color: var(--sys-text); }
.group-rows > .row + .row::before { content: ""; position: absolute; left: 52px; right: 20px; top: 0; border-top: 0.5px solid var(--sep); }
.group-rows > .toggle-row + .row::before, .group-rows > .row + .toggle-row::before { left: 20px; }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.row-value { color: var(--sys-text2); }
.row-btn:active { background: var(--fill2); }
.row-tint { color: var(--tint); }
.row-destructive { color: var(--red); }
.row-chevron { color: var(--sys-text2); opacity: 0.6; font-size: 13px; }
.pro-row .sf { color: var(--gold-ink); }
.toggle-row { cursor: pointer; }
.toggle-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.toggle-sub { font-size: 13px; color: var(--sys-text2); }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 63px; height: 28px; margin: 0; border-radius: 14px; background: var(--fill); cursor: pointer; transition: background 0.25s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 37px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16); transition: transform 0.3s var(--ease); }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(22px); }

/* ---------- Slider ---------- */
.slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 80px; height: 28px; background: transparent; margin: 0; --p: 50%; }
.slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--deco-gold) var(--p), var(--fill) var(--p)); }
.slider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--deco-gold) var(--p), var(--fill) var(--p)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.slider::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3); }

/* ---------- Print ---------- */
.print-col { max-width: 520px; margin: 0 auto; padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 20px; align-items: stretch; }
.print-head { text-align: center; display: flex; flex-direction: column; gap: 7px; }
.print-title { font: 900 23px var(--rounded); }
.print-sub, .print-desc { font: 500 12px var(--rounded); color: var(--text2); text-align: center; }
.print-layouts { display: flex; gap: 10px; }
.print-layout { flex: 1; min-height: 82px !important; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--soft); color: var(--text); text-align: center; padding: 8px; transition: background 0.2s; }
.print-layout > .sf { font-size: 20px; }
.print-layout.on { background: var(--gold); color: #000; }
.pl-title { font: 700 12px var(--rounded); }
.pl-pro { display: inline-flex; align-items: center; gap: 3px; font: 700 9px var(--sys); }
.print-preview { display: flex; justify-content: center; min-height: 200px !important; }
.print-preview canvas { display: block; max-height: 390px; max-width: 100%; height: auto; width: auto; box-shadow: 0 7px 28px rgba(0, 0, 0, 0.4); }
.print-pager { display: flex; align-items: center; justify-content: space-between; color: var(--gold-ink); }
.pg-btn { width: 44px; height: 44px; display: grid; place-items: center; font-size: 16px; }
.pg-btn:disabled { opacity: 0.3; }
.pg-text { font: 600 12px var(--rounded); }
.print-primary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px !important; border-radius: 16px; background: var(--gold); color: #000; font: 900 13px var(--rounded); letter-spacing: 0.3px; }
.print-primary:active, .print-pdf:active { opacity: 0.75; }
.print-pdf { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px !important; margin-top: -10px; color: var(--gold-ink); font: 600 13px var(--rounded); }
.print-foot { font-size: 11px; line-height: 1.4; text-align: center; color: var(--text2); }
.unavailable { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 42px 16px; color: var(--text2); font-size: 13px; }
.unavailable > .sf { font-size: 40px; opacity: 0.6; }
.un-title { font: 700 19px var(--rounded); color: var(--text); }

/* ---------- Decorate ---------- */
.deco-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.deco-viewport { position: relative; flex: 1 1 auto; min-height: 160px !important; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.deco-surface { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.deco-bg, .deco-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deco-items { position: absolute; inset: 0; }
.deco-items.disabled { pointer-events: none; }
.deco-item { position: absolute; display: grid; place-items: center; padding: 8px; border-radius: 6px; cursor: grab; white-space: pre; outline: none; }
.deco-item.selected { box-shadow: none; background-image: repeating-linear-gradient(90deg, var(--deco-gold) 0 5px, transparent 5px 8px), repeating-linear-gradient(90deg, var(--deco-gold) 0 5px, transparent 5px 8px), repeating-linear-gradient(0deg, var(--deco-gold) 0 5px, transparent 5px 8px), repeating-linear-gradient(0deg, var(--deco-gold) 0 5px, transparent 5px 8px);
  background-size: 100% var(--dash), 100% var(--dash), var(--dash) 100%, var(--dash) 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: no-repeat; }
.deco-text { line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); pointer-events: none; }
.zoom-bar { display: flex; align-items: center; gap: 4px; padding: 0 16px; flex: none; color: var(--gold-ink); }
.zoom-level { min-width: 42px; text-align: center; font: 500 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; font-size: 20px; color: var(--gold-ink); flex: none; border-radius: 12px; }
.icon-btn.on { background: var(--soft); }
.icon-btn.destructive { color: var(--red); }
.icon-btn:active, .small-btn:active { opacity: 0.5; }
.small-btn { min-height: 44px !important; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--gold-ink); }
.deco-hint { font-size: 12px; line-height: 16px; text-align: center; color: var(--text2); padding: 8px 16px; flex: none; }
.deco-controls { flex: none; max-height: 245px; overflow-y: auto; background: var(--soft2); padding-bottom: var(--sab); }
.deco-controls-inner { max-width: 620px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.deco-tools { display: flex; justify-content: center; gap: 20px; }
.deco-tools button { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--rounded); color: var(--gold-ink); min-height: 32px !important; }
.deco-tools button.on { text-decoration: underline; text-underline-offset: 4px; }
.draw-tools, .sel-tools { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.draw-row, .sel-row { display: flex; align-items: center; gap: 8px; justify-content: center; }
.sel-row.sliders { color: var(--text2); font-size: 16px; }
.draw-row .slider { max-width: 160px; }
.palette { display: flex; gap: 2px; justify-content: center; }
.pal { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.pal::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 0.5px rgba(128, 128, 128, 0.5); }
.pal.on { box-shadow: inset 0 0 0 1.5px var(--deco-gold); }
.hscroll { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.sticker-row { gap: 20px; justify-content: safe center; }
.sticker { min-width: 44px; min-height: 44px !important; font: 700 25px var(--rounded); display: grid; place-items: center; flex: none; color: var(--text); }
.sticker.word { font-size: 11px; letter-spacing: 0.3px; }
.sticker:active { transform: scale(0.9); }
.pack-row { gap: 8px; }
.pack { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; border-radius: 999px; background: var(--soft); font: 700 12px var(--sys); color: var(--text); box-shadow: inset 0 0 0 1px transparent; }
.pack .sf { font-size: 10px; opacity: 0.8; }
.pack.on { background: rgba(255, 201, 107, 0.2); box-shadow: inset 0 0 0 1px var(--deco-gold); }

/* ---------- Animate ---------- */
.anim-col { max-width: 540px; margin: 0 auto; padding: 8px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.anim-title { font: 700 25px var(--rounded); }
.anim-sub { font-size: 15px; color: var(--text2); margin-top: -10px; }
.anim-strip { max-height: 420px; max-width: 100%; width: auto; height: auto; display: block; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); background: #fff; }
.anim-create { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 18px; border-radius: 16px; background: rgba(255, 149, 0, 0.2); color: var(--orange); font-size: 17px; font-weight: 600; }
.anim-create:active { opacity: 0.7; }
.anim-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding: 60px 0; }
.progress { width: 100%; max-width: 300px; height: 4px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.progress .bar { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 2px; }
.anim-dev { font-size: 17px; font-weight: 600; }
.text-btn { color: var(--orange); font-size: 17px; min-height: 44px !important; }
.anim-player { width: 100%; max-height: 460px; aspect-ratio: 9 / 16; border-radius: 18px; background: #000; }
.anim-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.anim-actions button { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--orange); min-height: 40px !important; }

/* ---------- Boothly Pro ---------- */
.paywall-sheet { background: rgb(18, 15, 10) !important; color: #fff !important; }
.paywall-sheet .sheet-grabber { color: #fff; }
.pw-col { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 32px 28px 32px; min-height: 100%; }
.pw-icon { font-size: 52px; display: grid; }
.pw-title { font: 700 34px var(--rounded); margin-top: 12px; }
.pw-sub { font-size: 16px; color: rgba(255, 255, 255, 0.6); margin-top: 12px; }
.pw-feature { margin-top: 10px; font-size: 13px; color: rgb(255, 217, 102); text-align: center; }
.pw-list { align-self: stretch; display: flex; flex-direction: column; gap: 16px; padding: 26px 12px 28px; }
.pw-list li { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; }
.pw-li-icon { width: 28px; display: grid; place-items: center; font-size: 18px; color: rgb(255, 217, 102); flex: none; }
.pw-buy { align-self: stretch; height: 56px; border-radius: 18px; background: rgb(255, 224, 102); color: #000; display: grid; place-items: center; }
.pw-buy .spinner { display: none; }
.pw-buy.loading .spinner { display: block; }
.pw-buy.loading .pw-buy-text { display: none; }
.pw-buy-text { display: inline-flex; align-items: baseline; gap: 6px; }
.pw-buy-label { font-size: 17px; font-weight: 700; }
.pw-price { font-size: 15px; font-weight: 600; opacity: 0.75; }
.pw-buy:active { opacity: 0.85; }
.pw-restore { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.4); min-height: 32px !important; }
.pw-plus { margin-top: 4px; font-size: 13px; color: rgba(255, 224, 102, 0.6); min-height: 32px !important; }
.pw-terms { margin-top: auto; padding-top: 24px; font-size: 12px; color: rgba(255, 255, 255, 0.25); }
.pw-close { position: absolute; top: 20px; right: 20px; font-size: 28px; color: rgba(255, 255, 255, 0.35); z-index: 3; display: grid; }

/* ================================================================ Event Mode */
.ev-backdrop { background: radial-gradient(330px 330px at calc(100% - 35px) 65px, var(--setup-glow), transparent 70%), linear-gradient(135deg, var(--setup-a), var(--setup-b)); color: var(--text); }
.ev-surface { background: var(--ev-bg); color: var(--text); }
.ev-detail.ev-surface { background: var(--ev-bg2); }
.ev-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-top: var(--sat); padding-bottom: calc(var(--sab) + 28px); }
.ev-col { max-width: 660px; margin: 0 auto; padding: 14px 20px 0; display: flex; flex-direction: column; gap: 22px; font-family: var(--rounded); }
.ev-col.wide { max-width: 700px; gap: 18px; padding-top: 16px; }
.ev-col.xwide { max-width: 800px; gap: 20px; padding-top: 16px; }
.ev-topbar { display: flex; align-items: center; }
.ev-x { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: 14px; color: var(--text2); }
.ev-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10px var(--mono); letter-spacing: 1px; color: var(--gold-ink); }
.ev-h1 { font: 900 35px/1.08 var(--rounded); letter-spacing: -0.8px; }
.ev-lede { font-size: 15px; font-weight: 500; color: var(--text2); margin-top: 8px; }
.ev-card { padding: 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-stroke); display: flex; flex-direction: column; gap: 14px; }
.ev-stack { display: flex; flex-direction: column; gap: 8px; }
.ev-field-title { font: 700 10px var(--mono); letter-spacing: 1.2px; color: var(--text2); opacity: 0.9; }
.ev-input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 0; outline: none; background: var(--field); box-shadow: inset 0 0 0 1px var(--field-stroke); font: 500 15px var(--rounded); color: var(--text); }
.ev-input.big { padding: 15px 16px; border-radius: 14px; font-size: 18px; font-weight: 600; }
.ev-input.mono { font-weight: 600; }
.ev-input::placeholder { color: var(--text3); }
.ev-input:focus { box-shadow: inset 0 0 0 1.5px var(--gold); }
.ev-date { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--field); font-size: 17px; }
.date-pill { position: relative; display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--soft); font-size: 17px; }
.pill-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ev-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; }
.ev-theme { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px; border-radius: 12px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-stroke); font: 700 12px var(--rounded); color: var(--text); opacity: 0.85; }
.ev-theme.on { opacity: 1; background: rgba(250, 196, 99, 0.14); box-shadow: inset 0 0 0 1px rgba(250, 196, 99, 0.65); }
.ev-theme .sf { color: var(--gold); font-size: 18px; }
.ev-sw { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(128, 128, 128, 0.6); flex: none; }
.ev-help { font-size: 12px; font-weight: 500; color: var(--text2); margin-top: -4px; }
.ev-counts { display: flex; gap: 9px; }
.ev-count { flex: 1; min-height: 56px !important; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--chip-stroke); color: var(--text); }
.ev-count .n { font: 900 20px var(--rounded); }
.ev-count .l { font: 900 8px var(--rounded); letter-spacing: 1px; }
.ev-count.on { background: var(--gold); color: #000; box-shadow: none; }
.ev-cams { display: flex; gap: 10px; }
.ev-cam { flex: 1; min-height: 48px !important; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--chip); font: 700 13px var(--rounded); color: var(--text); }
.ev-cam.on { background: var(--gold); color: #000; }
.ev-start { display: flex; align-items: center; gap: 11px; height: 58px; padding: 0 20px; border-radius: 17px; background: var(--gold); color: #000; font: 900 15px var(--rounded); letter-spacing: 1.4px; transition: opacity 0.2s; }
.ev-start.dim { opacity: 0.45; }
.ev-start:active:not(:disabled) { transform: scale(0.98); }
.ev-pro-note { margin-top: -10px; text-align: center; font-size: 12px; font-weight: 500; color: var(--gold-ink); opacity: 0.9; }
.ev-org-note { font-size: 11px; font-weight: 500; text-align: center; color: var(--text3); padding-bottom: 28px; margin-top: -8px; }
.ev-navrow { display: flex; align-items: center; color: var(--text); opacity: 0.9; }
.ev-back { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--rounded); min-height: 40px !important; }
.ev-back .sf { font-size: 13px; }
.ev-new { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--gold); color: #000; font: 900 10px var(--mono); letter-spacing: 0.7px; }
#ev-resume { font: 900 12px var(--rounded); letter-spacing: 0; padding: 10px 13px; }
.ev-lib-head { display: flex; flex-direction: column; gap: 6px; }
.ev-lib-title { font: 900 29px var(--rounded); }
.ev-lib-sub { font-size: 14px; font-weight: 500; color: var(--text2); }
.ev-list { display: flex; flex-direction: column; gap: 18px; }
.ev-card-btn { display: flex; align-items: center; gap: 15px; padding: 13px; border-radius: 18px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--card-stroke); text-align: left; color: var(--text); }
.ev-card-btn > .sf { font-size: 12px; color: var(--text3); }
.ev-card-btn:active { opacity: 0.75; }
.ev-thumb { width: 54px; height: 68px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: rgba(0, 0, 0, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); flex: none; }
.ev-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-card-name { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; min-width: 0; }
.ev-state { font: 900 8px var(--mono); letter-spacing: 0.7px; padding: 4px 6px; border-radius: 999px; background: rgba(250, 196, 99, 0.12); color: var(--gold-ink); flex: none; }
.ev-state.ended { background: var(--soft); color: var(--text2); }
.ev-card-date { font-size: 12px; font-weight: 500; color: var(--text2); }
.ev-card-count { font: 600 11px var(--mono); color: var(--text2); }
.ev-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 52px 24px; border-radius: 20px; background: var(--soft2); }
.ev-empty-icon { font-size: 34px; color: var(--gold-ink); display: grid; }
.ev-empty-title { font-size: 17px; font-weight: 700; }
.ev-empty p { font-size: 13px; color: var(--text2); }
.ev-empty-btn { margin-top: 4px; padding: 13px 18px; border-radius: 999px; background: var(--gold); color: #000; font: 900 12px var(--rounded); letter-spacing: 1px; }
.ev-detail-head { display: flex; flex-direction: column; gap: 7px; }
.ev-detail-title { font: 900 28px var(--rounded); overflow-wrap: anywhere; }
.ev-detail-sub { font-size: 12px; font-weight: 500; color: var(--text2); }
.ev-segs { display: flex; gap: 7px; padding: 4px; border-radius: 999px; background: var(--soft); }
.ev-seg { flex: 1; min-height: 40px !important; border-radius: 999px; text-align: center; font: 900 11px var(--mono); letter-spacing: 0.6px; color: var(--text2); }
.ev-seg.on { background: var(--gold); color: #000; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 12px; }
.ev-asset { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ev-strip-img { height: 320px; display: flex; align-items: center; justify-content: center; width: 100%; }
.ev-strip-img img { max-height: 100%; max-width: 100%; display: block; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); background: #fff; }
.ev-asset.photo img { width: 100%; height: 144px; object-fit: cover; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28); display: block; }
.ev-time { font: 700 9px var(--mono); color: var(--text2); }
.ev-time.chip { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); padding: 5px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.58); color: #fff; }
.ev-check { position: absolute; top: 6px; right: 6px; font-size: 25px; color: var(--gold); background: rgba(0, 0, 0, 0.7); border-radius: 50%; display: grid; }
.ev-print-block { display: flex; flex-direction: column; gap: 12px; }
.ev-print-sel { display: flex; font: 700 12px var(--rounded); color: var(--gold-ink); }
.ev-print-sel button { min-height: 32px !important; }
.ev-print { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px !important; border-radius: 14px; background: var(--gold); color: #000; font: 900 13px var(--rounded); }
.ev-print:disabled { opacity: 0.45; }
.ev-batch { display: flex; gap: 10px; }
.ev-batch-btn { flex: 1; min-height: 48px !important; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--card-stroke); font: 900 11px var(--rounded); letter-spacing: 0.7px; color: var(--text); }
.ev-batch-btn.gold { background: var(--gold); color: #000; box-shadow: none; }
.ev-batch-btn:disabled { opacity: 0.4; }
.ev-danger { display: flex; gap: 12px; padding-top: 4px; font: 600 12px var(--rounded); }
.ev-danger .orange { color: var(--orange); } .ev-danger .red { color: var(--red); }
.ev-danger button { min-height: 32px !important; }

/* ---------- kiosk ---------- */
.kiosk-screen { background: #0e0c0b; color: #fff; }
.kiosk-host { position: absolute; inset: 0; }
.kiosk-host > * { position: absolute; inset: 0; }
.kiosk-backdrop { background: radial-gradient(620px 620px at 100% 0, rgba(135, 43, 33, 0.35), transparent 70%), linear-gradient(135deg, rgb(33, 24, 22), rgb(14, 13, 12)); color: #fff; font-family: var(--rounded); }
.kiosk-brand { text-align: left; display: flex; align-items: center; gap: 10px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: default; }
.kiosk-brand > .sf { font-size: 20px; color: var(--gold); }
.kb-name { font: 900 11px var(--rounded); letter-spacing: 2.3px; }
.kb-event { font: 700 9px var(--mono); letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.kiosk-welcome { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--sat) + 14px) 28px calc(var(--sab) + 34px); }
.kw-text { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kw-text .kiosk-brand { align-self: stretch; }
.kw-spacer { flex: 1; }
.kw-aperture { font-size: 45px; color: var(--gold); margin-bottom: 20px; display: grid; }
.kw-name { font: 900 29px var(--rounded); overflow-wrap: anywhere; }
.kw-lede { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.65); margin-top: 8px; }
.kw-count { font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 2px; }
.kw-start { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px !important; border-radius: 20px; background: var(--gold); color: #000; font: 900 16px var(--rounded); letter-spacing: 1.1px; }
.kw-start-icon { display: none; }
.kw-start:active { transform: scale(0.98); }
.kw-footer { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); text-align: center; padding-top: 17px; }
@media (orientation: landscape) and (min-width: 600px) {
  .kiosk-welcome { flex-direction: row; align-items: center; gap: 30px; padding: 28px max(34px, 7vw); }
  .kw-text { align-items: flex-start; text-align: left; align-self: stretch; }
  .kw-aperture { display: none; }
  .kw-name { font-size: min(42px, 9vh); }
  .kw-lede { font-size: 17px; margin-top: 16px; }
  .kw-count { margin-top: 16px; }
  .kw-start { flex-direction: column; gap: 16px; width: min(39vw, 62vh); height: 70vh; border-radius: 32px; font-size: 18px; letter-spacing: 1.4px; box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 7.5px rgba(255, 255, 255, 0.52); flex: none; }
  .kw-start-icon { display: grid; font-size: min(54px, 11vh); }
  .kw-start-cam { display: none; }
  .kw-footer { display: none; }
}
.kiosk-ready { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: calc(var(--sat) + 24px) 24px calc(var(--sab) + 24px); overflow-y: auto; }
.kr-stripwrap { order: 1; flex: 1 1 auto; min-height: 120px !important; max-height: 45vh; display: flex; justify-content: center; }
.kr-strip { max-height: 100%; max-width: 100%; height: auto; width: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38); background: #fff; }
.kr-side { display: contents; }
.kr-side .kiosk-brand { order: 0; align-self: stretch; }
.kr-title { order: 2; font: 900 21px var(--rounded); text-align: center; }
.kr-title br { display: none; }
.kr-lede { display: none; }
.kr-actions { order: 3; display: flex; gap: 12px; width: 100%; max-width: 480px; }
.kr-btn { flex: 1; min-height: 52px !important; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 7px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font: 900 13px var(--rounded); letter-spacing: 0.6px; }
.kr-next { order: 4; width: 100%; max-width: 480px; min-height: 58px !important; border-radius: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--gold); color: #000; font: 900 15px var(--rounded); letter-spacing: 1px; }
.kr-reset { order: 5; font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.44); }
.kr-btn:active, .kr-next:active { opacity: 0.8; }
@media (orientation: landscape) and (min-width: 600px) {
  .kiosk-ready { flex-direction: row; justify-content: center; gap: 35px; padding: 24px max(32px, 7.5vw); }
  .kr-stripwrap { order: 0; flex: none; max-width: 27vw; height: 78vh; max-height: 78vh; align-items: center; }
  .kr-side { display: flex; flex-direction: column; gap: 17px; max-width: 440px; flex: 1; }
  .kr-title { text-align: left; font-size: min(42px, 9.5vh); line-height: 1.05; }
  .kr-title br { display: inline; }
  .kr-lede { display: block; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }
  .kr-actions { gap: 11px; }
  .kr-next { min-height: 56px !important; }
  .kr-reset { font-size: 11px; color: rgba(255, 255, 255, 0.43); }
}

/* ---------- photo preview / strip detail sheets ---------- */
.photo-sheet, .detail-sheet { background: #000 !important; color: #fff !important; }
.photo-sheet .sheet-body, .detail-sheet .sheet-body { overflow: hidden; padding: 0; }
.pp-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; touch-action: none; }
.pp-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pp-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); font-size: 13px; z-index: 2; }
.pp-title { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 22px); text-align: center; font: 600 12px var(--rounded); color: rgba(255, 255, 255, 0.65); pointer-events: none; }

/* ---------- motion, print ---------- */
@media (prefers-reduced-motion: reduce) { .ring.inner, .aperture-icon { animation: none; } }
#print-root { display: none; }
@media print {
  @page { size: 4in 6in; margin: 0; }
  html, body { height: auto; overflow: visible; background: #fff; }
  #app { display: none !important; }
  #print-root { display: block !important; }
  .print-page { width: 4in; height: 6in; page-break-after: always; break-after: page; overflow: hidden; }
  .print-page:last-child { page-break-after: auto; break-after: auto; }
  .print-page img { display: block; width: 4in; height: 6in; }
}