/* dznir app — phone first (375 px), then wider screens. Same tokens as dznir.com. 8 px spacing grid, 48 px touch targets. */
:root {
  --paper: #FAF9F6; --paper-2: #FFF1EA; --card: #FFFFFF; --ink: #111110; --ink-2: #3A3936; --muted: #6B675F;
  --line: rgba(17, 17, 16, 0.10); --line-2: rgba(17, 17, 16, 0.18); --accent: #FF4D1F; --accent-ink: #C2300A;
  --ok: #1E7A45; --ok-bg: #E4F4EA; --err: #B42318; --err-bg: #FDECEA; --warn-bg: #FFF4D6; --warn: #7A4F00;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; --serif: 'Instrument Serif', Georgia, serif;
  --on-ink: #FFFFFF; --radius: 16px; --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[x-cloak] { display: none !important; }
.icon { width: 20px; height: 20px; flex: none; }

/* Wordmark (same as the landing) */
.wm { display: inline-flex; align-items: baseline; font: 800 24px/1 'Bricolage Grotesque', var(--sans); letter-spacing: -0.045em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wm__z { width: 0.52em; height: 0.56em; margin: 0 0.03em 0 0.02em; overflow: visible; color: var(--ink); }
/* "dznir/": the product's own slash (the orange bar tilted -22°, as in the menus' current-page marker) after the
   wordmark, with the spacing of a typed slash. Same rule in dznir-landing/styles.css, hq/admin.css and app.css. */
.wm::after { content: ''; flex: none; width: 0.14em; height: 0.72em; margin-left: 0.1em; border-radius: 0.07em; background: var(--accent); transform: skewX(-22deg); }

/* Top bar */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--card); } /* white, the same as HQ's top bar */
.top__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--muted); font: 600 15px var(--sans); text-decoration: none; cursor: pointer; }
.top__link:hover { color: var(--ink); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.2s; }
.btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--accent { background: #D0340C; color: #FFFFFF; } /* deeper than --accent: white text needs 4.5:1 (5.0 here; #FF4D1F was 3.3) */
.btn--accent:hover { background: #B02A08; }
.link { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; color: var(--muted); font: 600 15px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--ink); }
label.field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font-weight: 600; font-size: 15px; }
label.field > :not(small) { grid-column: 1 / -1; } /* the field itself: full width under the label */
label.field > small { grid-column: 2; grid-row: 1; justify-self: end; font-weight: 500; color: var(--muted); } /* counter or "Optional": on the label line */
input[type=text], input[type=email], input[type=password], input[type=url], input[type=tel], input[type=search], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 500 16px/1.4 var(--sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { border-radius: 16px; } /* fields are 48px pills (owner: one height, pills); a text area keeps soft corners */
textarea { resize: vertical; min-height: 104px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.16); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--err); }
.prefix { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.16); }
.prefix > span { padding-left: 16px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.prefix input { border: 0; box-shadow: none !important; background: none; }
.prefix > span + input { padding-left: 4px; }
.prefix > button { flex: none; margin-right: 8px; }
input[type=password] { letter-spacing: 0.2em; }
input[type=password]::placeholder { letter-spacing: normal; }
/* Browser autofill (saved email, name, password): keep the field's own colours, not the browser's blue-grey fill.
   The fill can't be restyled, so a large inset shadow in the field's colour covers it; the text keeps our ink. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--af-bg, var(--card)) inset; box-shadow: 0 0 0 1000px var(--af-bg, var(--card)) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--af-bg, var(--card)) inset, 0 0 0 4px rgba(255, 77, 31, 0.16); box-shadow: 0 0 0 1000px var(--af-bg, var(--card)) inset, 0 0 0 4px rgba(255, 77, 31, 0.16); }
input:autofill { filter: none; } /* Firefox tints autofilled fields with a filter */
/* Inside a joined field (password + Show, dznir.com/ prefix) the input has no shadow of its own: keep the fill covered */
.prefix input:-webkit-autofill, .prefix input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important; box-shadow: 0 0 0 1000px var(--card) inset !important; }
.err { margin: 0; color: var(--err); font-size: 14px; font-weight: 600; }
.hint { margin: 0; color: var(--muted); font-size: 14px; }
.hint--ok { color: var(--ok); }
.note { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 15px; }
.note--warn { background: var(--warn-bg); color: var(--warn); }

/* Auth screens */
.auth { display: grid; place-items: start center; min-height: calc(100dvh - 56px); padding: 24px 16px calc(40px + var(--safe-b)); }
.auth__card { width: min(440px, 100%); display: grid; gap: 16px; }
.auth h1 { margin: 8px 0 0; font-size: clamp(30px, 8vw, 40px); line-height: 1.05; letter-spacing: -0.035em; }
.auth__lede { margin: 0 0 8px; color: var(--muted); font-size: 17px; }
.auth__alt { margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 15px; }
.auth__alt a { color: var(--ink); font-weight: 600; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

/* Claim (waitlist invite) */
.claim-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid rgba(194, 48, 10, 0.18); }
.claim-card__url { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.claim-card__url .wm__z { width: 12px; height: 13px; color: var(--accent-ink); }
.claim-card__mail { color: var(--muted); font-size: 14px; }

/* Onboarding: one column on phones, steps + live phone side by side from 960 px */
.ob { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100dvh - 56px); }
.ob__main { display: flex; flex-direction: column; min-width: 0; padding: 8px 16px calc(176px + var(--safe-b)); } /* room for the bar and the Preview button */
.ob__progress { display: flex; gap: 4px; margin: 0 0 16px; }
.ob__progress i { flex: 1; height: 4px; border-radius: 4px; background: var(--line-2); }
.ob__progress i.is-done { background: var(--ink); }
.ob__progress i.is-now { background: var(--accent); }
.ob__count { margin: 0 0 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ob__title { margin: 0 0 8px; font-size: clamp(28px, 7.5vw, 44px); line-height: 1.05; letter-spacing: -0.035em; }
.ob__sub { margin: 0 0 24px; color: var(--muted); font-size: 17px; max-width: 34em; }
/* The pinned step header (phones and tablets): the progress bar and "Step 2 of 6" stay under the top bar; when it has
   stuck, the step's title shows in the same row, one line, so nothing below jumps (owner, 28 Oct 2026) */
.ob__mark { display: block; height: 1px; margin-bottom: -1px; }
.ob__step { flex: none; }
.ob__mini { display: none; }
@media (max-width: 959px) {
  .ob__head { position: sticky; top: calc(56px + var(--hqbar, 0px)); z-index: 20; margin: -8px -16px 0; padding: 12px 16px 8px; background: var(--paper); transition: box-shadow 0.2s; }
  .ob__head .ob__progress { margin-bottom: 8px; }
  .ob__head .ob__count { flex-wrap: nowrap; min-height: 24px; margin: 0; }
  .ob__head.is-stuck { box-shadow: 0 1px 0 var(--line), 0 16px 24px -22px rgba(17, 17, 16, 0.45); }
  .ob__head.is-stuck .ob__mini { display: block; min-width: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
  .ob__head.is-stuck .ob__mini::before { content: '·'; margin-right: 8px; color: var(--muted); font-weight: 600; }
  .ob__head.is-stuck .ob__tag { display: none; }
  .ob__head + .ob__title { margin-top: 8px; }
  /* a focused or invalid field the browser scrolls to lands under the pinned row, not behind it */
  html:has(.ob__head) { scroll-padding-top: 128px; }
  html:has(body.has-hq .ob__head) { scroll-padding-top: 184px; }
}
.ob__form { display: grid; gap: 16px; }
.ob__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 8px; padding: 12px 16px calc(12px + var(--safe-b)); background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.ob__bar .btn { flex: 1; white-space: nowrap; }
@media (max-width: 420px) { .hide-sm { display: none; } }
.ob__bar .btn--ghost { flex: 0 0 auto; }
.ob__peek { position: fixed; right: 16px; bottom: calc(92px + var(--safe-b)); z-index: 26; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 15px var(--sans); box-shadow: 0 12px 32px -12px rgba(17, 17, 16, 0.45), 0 0 0 1px var(--line); cursor: pointer; }
.ob__peek-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #FFFFFF; }
.ob__peek-dot svg { width: 16px; height: 16px; }
.ob__side { display: none; }
.sheet { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; background: rgba(17, 17, 16, 0.45); }
.sheet__panel { width: 100%; max-height: 92dvh; overflow: auto; padding: 16px 16px calc(24px + var(--safe-b)); border-radius: 24px 24px 0 0; background: var(--paper); display: grid; justify-items: center; gap: 16px; }
.sheet__grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
/* Wider screens: the live phone sits just right of the steps, in the same spot on every step, as one centred group
   sized to fit the screen height.
   The action bar stays fixed to the bottom on every screen size, aligned with that group. */
@media (min-width: 960px) {
  .ob { --pw-side: clamp(220px, calc((100dvh - 210px) * 9 / 19), 320px); --ob-w: calc(var(--pw-side) + 64px + 640px);
        grid-template-columns: minmax(0, 640px) var(--pw-side); justify-content: center; column-gap: 64px; padding: 0 32px; }
  .ob__main { padding: 32px 0 calc(128px + var(--safe-b)); }
  .ob__side { display: block; position: sticky; top: 56px; align-self: start; padding: 32px 0 128px; }
  .ob__side .preview { --pw: var(--pw-side); }
  .ob__bar { padding: 16px max(32px, calc((100vw - var(--ob-w)) / 2)); }
  .ob__bar .btn { flex: 0 0 auto; min-width: 160px; }
  .ob__bar .btn--ghost { min-width: 0; }
  .ob__bar > .btn:last-child { margin-left: auto; min-width: 200px; }
  .ob__peek { display: none; }
}

/* Phone frame around the live preview (phone kit from themes.css) */
.preview { --pw: 256px; }
.preview .phone__screen { position: relative; }
.preview-cap { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.mini--scroll { overflow-y: auto; scrollbar-width: none; }
/* The preview phone keeps the theme's background still while its page scrolls, like dznir.com/{name} does on the
   screen (public.css): the screen is the box fixed layers sit in (contain: paint), so they fill it, not the window */
.preview .phone__screen { contain: paint; }
.mini--scroll > :is(.bg, .bg-photo, .bg-scrim--own) { position: fixed; inset: 0; z-index: -1; transform: translateZ(0); backface-visibility: hidden; }
.mini--scroll::-webkit-scrollbar { display: none; }
.mini__stack { display: grid; gap: 6px; width: 100%; }
.blk-hook { display: contents; }
.blk-hook[hidden] { display: none; } /* a block deleted (waiting on Undo) leaves the preview at once: `display: contents` would beat [hidden] */
.mini__bio:empty { display: none; }
[data-block-id] > * { cursor: pointer; transition: outline-color 0.15s; outline: 2px solid transparent; outline-offset: 2px; }
[data-block-id]:hover > * { outline-color: rgba(255, 77, 31, 0.6); }
.bg-photo { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; }
.bg-photo::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--dim, 0.4)); }
.is-still *, .is-still *::before, .is-still *::after { animation: none !important; }
.mini__h { margin: 8px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; text-align: center; }
.mini__text { margin: 0; font-size: 10px; text-align: center; opacity: 0.85; }
.mini__ico { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -2px; }
.mini__signup { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #6B675F; font-size: 9px; }
.mini__signup b { padding: 5px 9px; border-radius: 999px; background: #111110; color: #FFFFFF; font-weight: 700; }
.avail--off i { background: #9A958C !important; animation: none !important; }
.blk__row--ghost { opacity: 0.55; }
.code-chip { padding: 0 8px; border: 1px dashed currentColor; border-radius: 999px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Block content (partials/page.blade.php): real buttons, lists, photos; the same in the editor's phone and on the page */
.avail.avail--off, .avail.avail--plain { background: color-mix(in srgb, var(--fg, #141311) 8%, transparent); color: var(--mut, #6B665D); }
.avail--plain i { display: none; }
.blk__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.blk__btn { display: block; margin-top: 4px; padding: 8px; border-radius: calc(var(--rad, 12px) * 0.75); background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.blk__btn--ghost { background: none; border: 1px dashed color-mix(in srgb, var(--fg, #141311) 30%, transparent); color: var(--mut, #6B665D); font-weight: 600; }
.blk__pair .blk__btn { margin-top: 0; }
a.blk__row { color: inherit; text-decoration: none; }
a.blk__row:hover span { text-decoration: underline; }
.blk__row--class { align-items: center; }
.blk__row--class > span { display: grid; min-width: 0; }
.blk__row--class small { font-size: 10px; color: var(--mut, #6B665D); }
.blk__quote { display: grid; gap: 2px; padding: 4px 0; font-size: 12px; line-height: 1.35; }
.blk__quote + .blk__quote { border-top: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
.blk__quote small { font-size: 10px; font-weight: 600; color: var(--mut, #6B665D); }
.blk__qa { display: block; padding: 4px 0; font-size: 12px; }
.blk__qa + .blk__qa { border-top: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
.blk__qa summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.blk__qa summary::-webkit-details-marker { display: none; }
.blk__qa summary::after, .blk__q::after { content: '+'; font-weight: 700; color: var(--mut, #6B665D); }
.blk__qa[open] summary::after { content: '–'; }
.blk__q { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.blk__qa p { margin: 4px 0 0; color: var(--mut, #6B665D); line-height: 1.4; }
.blk__big { font-size: 16px; font-weight: 700; line-height: 1.2; }
.blk__sub { font-size: 11px; color: var(--mut, #6B665D); }
.blk--img { padding: 0; }
.blk--img img { display: block; width: 100%; height: auto; }
.blk--ghost { display: grid; place-items: center; gap: 2px; padding: 24px 12px; border-style: dashed; text-align: center; }
.blk--ghost b { font-size: 12px; }
.blk--ghost small { font-size: 10px; color: var(--mut, #6B665D); }
.blk__thumb.blk__thumb--empty { background: color-mix(in srgb, var(--fg, #141311) 12%, transparent); }
.blk__art.blk__art--empty { display: grid; place-items: center; background: color-mix(in srgb, var(--fg, #141311) 12%, transparent); }
.blk__art--empty::after { content: '♪'; font-size: 18px; font-weight: 700; color: var(--mut, #6B665D); }
.blk.blk--track { grid-template-columns: 40px minmax(0, 1fr) auto; }
.blk__go { width: 24px; height: 24px; border-radius: 50%; background: var(--btn, #141311); position: relative; }
.blk__go::after { content: ''; position: absolute; left: 9px; top: 7px; border-left: 8px solid var(--btnfg, #FFFFFF); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pf__item { display: grid; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.pf__item img, .pf__blank { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; background: color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
.pf__item--ghost { grid-column: 1 / -1; }
.pf__item--ghost .pf__blank { aspect-ratio: 16 / 5; border: 1px dashed color-mix(in srgb, var(--fg, #141311) 30%, transparent); background: none; }
.pf__t { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pf__item--ghost .pf__t { color: var(--mut, #6B665D); }

/* Fieldsets group the choices for screen readers; strip their default frame and let them shrink */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Step 1: creator types */
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.type { position: relative; display: grid; gap: 8px; align-content: start; min-height: 120px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.type:active { transform: scale(0.98); }
.type input { position: absolute; opacity: 0; pointer-events: none; }
.type { --tint: var(--accent); }
.type__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--tint) 13%, var(--card)); color: var(--tint); transition: background 0.15s, color 0.15s; }
.type__icon svg { width: 20px; height: 20px; }
.type b { font-size: 16px; }
.type span.type__tag { color: var(--muted); font-size: 13px; line-height: 1.35; }
.type:hover { border-color: var(--tint); }
.type:has(input:checked) { border-color: var(--tint); background: color-mix(in srgb, var(--tint) 5%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent); }
.type:has(input:checked) .type__icon { background: var(--tint); color: #FFFFFF; }
.type:has(input:checked)::after { content: '✓'; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: #FFFFFF; font-size: 13px; font-weight: 700; }
.type:has(input:focus-visible) { outline: 2px solid var(--tint); outline-offset: 3px; }
@media (min-width: 640px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Step 2: platforms */
.plat-step > .hint { margin: 0 0 16px; } /* "Your plan shows up to N…": clear of the first card and its focus ring */
.plat-step > .err { margin: 0 0 8px; }
.plats { display: grid; gap: 12px; }
.plat-group { display: grid; gap: 8px; }
.plat { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color 0.15s, box-shadow 0.15s; }
/* App-icon style: solid brand tile, white symbol, the same weight for every platform */
.plat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.plat__icon svg { width: 22px; height: 22px; }
[data-plat="instagram"] .plat__icon { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
[data-plat="snapchat"] .plat__icon { background: #FFFC00; color: #111110; }
.plat__field { display: grid; gap: 4px; min-width: 0; cursor: text; }
.plat__name { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.plat input { min-height: 24px; height: 24px; padding: 0; border: 0; border-radius: 0; box-shadow: none !important; background: none; font-size: 16px; }
.plat__ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: var(--on-ink); opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.plat__ok svg { width: 14px; height: 14px; }
.plat:has(input:not(:placeholder-shown)) .plat__ok { opacity: 1; transform: none; }
.plat:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 77, 31, 0.12); }
.plat .err { grid-column: 2 / -1; margin: 0; padding: 0 0 4px; }
.plat-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.plat-chip:disabled:hover { border-color: var(--line-2); }
.plat-full { color: var(--ink); font-weight: 600; }
.plat-add:disabled { opacity: 0.5; cursor: not-allowed; }
/* More accounts of the same platform: indented under the first, with a remove button */
.plat--more { margin-left: 24px; }
.plat--more .plat__icon { width: 36px; height: 36px; border-radius: 10px; justify-self: center; }
.plat--more .plat__icon svg { width: 18px; height: 18px; }
.plat__remove { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.plat__remove:hover { background: var(--err-bg); color: var(--err); } /* same as the dashboard's delete buttons */
.plat__remove svg { width: 16px; height: 16px; }
.plat-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 12px; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: none; color: var(--ink); font: 600 15px var(--sans); cursor: pointer; transition: border-color 0.15s; }
.plat-add:hover { border-color: var(--ink); }
.plat-add__ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-ink); transition: transform 0.2s; }
.plat-add__ico svg { width: 14px; height: 14px; }
.plat-add__ico.is-open { transform: rotate(45deg); }
.plat-chips { display: grid; gap: 8px; padding-top: 16px; }
.plat-chips__label { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.plat-chips__label:first-child { margin-top: 0; }
.plat-chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-chips__row:empty { display: none; }
.plat-chip--locked { color: var(--muted); }
.plat-chip--locked svg { width: 16px; height: 16px; color: var(--muted); }
.plat-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.plat-chip:hover { border-color: var(--brand); }
.plat-chip:active { transform: scale(0.97); }
.plat-chip svg { width: 18px; height: 18px; color: color-mix(in srgb, var(--brand) var(--brand-icon, 100%), var(--ink)); }
[data-plat="kick"] .plat__icon { background: #0B0B0B; color: #53FC18; } /* Kick's own look: green on black */

/* Step 3: essentials */
.ess { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.ess__rows { display: grid; gap: 8px; }
.ess__row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.ess__row--3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(96px, 0.7fr); } /* "12 spots" fits */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-weight: 600; cursor: pointer; }
.switch input { appearance: none; width: 52px; height: 32px; margin: 0; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background 0.2s; flex: none; }
.switch input::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { transform: translateX(20px); }
.locked { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); font-size: 15px; }
.locked b { color: var(--ink); }
.pro--pick { background: var(--accent-ink) !important; }
.pro--fest { background: linear-gradient(90deg, #FF7518, #D6336C, #7B2CBF) !important; color: #FFFFFF !important; }
.pro--soon { background: var(--paper, #F2F2F2) !important; color: var(--mut, #555555) !important; box-shadow: inset 0 0 0 1px var(--line, #DDDDDD); }
.pro { white-space: nowrap; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }

/* Step 4: themes (swipe on phones) */
.themes { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 16px; margin: 0 -16px; padding: 4px 16px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.themes::-webkit-scrollbar { display: none; }
.theme { position: relative; display: grid; gap: 8px; justify-items: center; scroll-snap-align: center; cursor: pointer; }
.theme input { position: absolute; opacity: 0; pointer-events: none; }
/* Like the landing's wall: each phone is drawn at full size (256 px) and shrunk to half, so the page inside keeps its layout */
.theme__thumb { display: block; width: 128px; height: calc(256px * 19 / 9 / 2); border-radius: 22px; pointer-events: none; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
.theme__thumb .phone { --pw: 256px; display: block; transform: scale(0.5); transform-origin: 0 0; box-shadow: none; }
.theme__thumb .phone__screen { display: block; position: relative; }
.theme b { display: grid; justify-items: center; gap: 4px; font-size: 14px; text-align: center; line-height: 1.2; }
.theme:has(input:checked) .theme__thumb { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--accent), 0 18px 32px -16px rgba(17, 17, 16, 0.5); }
.theme:has(input:focus-visible) .theme__thumb { outline: 2px solid var(--accent); outline-offset: 4px; }
.theme.is-locked .theme__thumb { opacity: 0.55; }
@media (min-width: 960px) { .themes { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 128px); justify-content: space-between; margin: 0; padding: 4px 0 0; overflow: visible; } }

/* Step 5: profile */
.avatar-pick { display: flex; align-items: center; gap: 16px; }
.avatar-pick__img { width: 88px; height: 88px; border-radius: 50%; background: var(--paper-2) center / cover no-repeat; display: grid; place-items: center; color: var(--accent-ink); font: 700 28px var(--sans); flex: none; border: 1px solid var(--line); overflow: hidden; }
.avatar-pick__img img { width: 100%; height: 100%; object-fit: cover; }
.avatar-pick label.btn { min-height: 48px; padding: 0 16px; font-size: 15px; }
.counter { justify-self: end; color: var(--muted); font-size: 13px; font-weight: 600; }

/* Step 6: publish */
.done { display: grid; gap: 16px; justify-items: start; }
.done__url { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); font-weight: 600; overflow: hidden; }
.done__url span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done__url .btn { min-height: 48px; padding: 0 16px; font-size: 15px; }
.share { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.share a, .share button { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 600 13px var(--sans); text-decoration: none; cursor: pointer; }
.share svg { width: 24px; height: 24px; }
.qr { width: 168px; padding: 12px; border-radius: var(--radius); background: #FFFFFF; border: 1px solid var(--line); }
.steps-ig { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 8px; }
.bio-steps { display: grid; gap: 16px; }
.bio-steps__title { margin: 0; font-weight: 600; }
.bio-steps__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.bio-steps__apps .plat-chip { min-height: 40px; }
.bio-steps__apps .plat-chip.is-on { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.bio-steps__apps .plat-chip.is-on svg { color: var(--on-ink); }
.bio-steps__else { margin: 0; color: var(--muted); font-size: 14px; }

/* Editor placeholder */
.wrap { width: min(760px, 100%); margin: 0 auto; padding: 24px 16px calc(40px + var(--safe-b)); display: grid; gap: 16px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Theme picker: collection chips over one grid, plus Custom (their own video, photo, colours) */
.tpick { display: grid; gap: 16px; min-width: 0; }
.tpick__chips { display: flex; gap: 8px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
.tpick__chips::-webkit-scrollbar { display: none; }
.tpick__chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tpick__chip:hover { border-color: var(--ink); }
.tpick__chip svg { width: 16px; height: 16px; color: var(--accent); }
.tpick__chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tpick__chip[aria-selected="true"] svg { color: currentColor; }
.tpick__count { min-width: 22px; padding: 0 8px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: 12px; line-height: 20px; text-align: center; }
.tpick__chip[aria-selected="true"] .tpick__count { background: color-mix(in srgb, var(--paper) 18%, transparent); color: inherit; }
.tpick__note, .tpick__lock { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.tpick__note { background: var(--paper-2); color: var(--accent-ink); }
.tpick__note svg { width: 18px; height: 18px; flex: none; }
.tpick__note .link { min-height: 0; color: inherit; font-size: 14px; }
.tpick__lock { background: var(--warn-bg); color: var(--warn); }
.pro--video { background: #111110 !important; color: #FFFFFF !important; }
.tpick__custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.own-card { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.own-card__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--paper-2); color: var(--accent-ink); }
.own-card__ico svg { width: 22px; height: 22px; }
.own-card b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.own-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.own-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.own-card .btn { justify-self: start; }
.own-card .btn svg { width: 16px; height: 16px; }
.own-card label.btn { position: relative; }
.btn.is-busy { opacity: 0.7; pointer-events: none; }
.tpick .err { grid-column: 1 / -1; }

/* Publish step: what a draft means */
.draft-note { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); font-size: 14px; line-height: 1.45; }
.draft-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.draft-note b { color: inherit; }

/* Password fields: the eye button (show / hide what's typed) and the ticks for what a new password needs
   (partials/password-input + password-rules, public/js/password.js). The box is 48px; the button 40px inside it. */
.pw { position: relative; display: flex; align-items: center; }
.prefix.pw input { flex: 1; min-width: 0; min-height: 0; height: 46px; padding-right: 0; } /* 46 + the box's 1px border = 48 */
.pw-eye { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 4px 0 0; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.pw-eye:hover { color: var(--ink); background: var(--line); }
.pw-eye:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; color: var(--ink); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye .pw-eye__hide, .pw-eye[data-shown="true"] .pw-eye__show { display: none; }
.pw-eye[data-shown="true"] .pw-eye__hide { display: block; }
.pw-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: -8px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.pw-rules li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.pw-rules__tick { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.pw-rules li.is-met { color: var(--ok); }
.pw-rules li.is-met .pw-rules__tick { background: var(--ok); box-shadow: none; color: var(--card); }
@media (max-width: 380px) { .pw-rules { grid-template-columns: 1fr; } }

/* Sign-up from an HQ invite link */
.auth__invite { margin: 0 0 8px; padding: 12px 16px; border-radius: 12px; background: var(--paper-2, #FFF1EA); color: var(--ink); font-size: 14px; line-height: 1.5; }

/* Camera badge on a round photo you can change (dashboard Page tab, onboarding profile step). Hugs the circle at
   the bottom right, centre just inside its edge; light in light mode, dark in dark mode; inverts on hover. */
.avatar__cam { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0;
  border-radius: 50%; background: var(--card); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 0 0 2px var(--card), 0 4px 12px -4px var(--shadow, rgba(17, 17, 16, 0.35));
  font-size: 0; line-height: 0; pointer-events: none; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.avatar__cam svg { display: block; width: 14px; height: 14px; margin: 0; stroke: currentColor; }
:is(.avatar--edit, .avatar-edit):hover .avatar__cam { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.avatar-edit { position: relative; display: inline-block; flex: none; border-radius: 50%; cursor: pointer; }
.avatar-edit:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-edit .avatar__cam { width: 32px; height: 32px; }
.avatar-edit .avatar__cam svg { width: 16px; height: 16px; }

/* Setup run again from the dashboard */
/* Running setup again: a tag beside "Step 1 of 6", a one-line hint on the Type step, Exit setup in the top bar */
.ob__count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ob__tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.ob__tag .icon { width: 12px; height: 12px; }
.top__exit { min-height: 40px; }
.top__exit .icon { width: 16px; height: 16px; }

/* YouTube Live banner (partials/page): top of the page while they're live */
.live-banner { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; max-width: 100%; margin: 0 0 12px; padding: 8px 12px; border-radius: 999px; background: #E6002E; /* YouTube red, a shade deeper so the white title reads (4.8:1) */ color: #FFFFFF; font: 600 12px/1.3 var(--sans, system-ui, sans-serif); text-decoration: none; box-shadow: 0 6px 18px -8px rgba(255, 0, 51, 0.7); }
.live-banner__tag { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-weight: 700; letter-spacing: 0.06em; }
.live-banner__tag i { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; animation: live-pulse 1.4s ease-in-out infinite; }
.live-banner__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long stream titles end in … instead of widening the page */
@keyframes live-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live-banner__tag i { animation: none; } }

/* The Free teaser (components/teaser, App\Support\Teasers): a real sample, the plan that has it, See plans */
.teaser { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); align-items: center; gap: 16px; margin: 8px 0 0; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--paper, transparent); }
.teaser__sample { display: grid; gap: 6px; align-content: center; justify-items: stretch; min-height: 88px; padding: 12px; border-radius: 12px; background: var(--card); overflow: hidden; pointer-events: none; }
.teaser__body { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.teaser__name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.teaser__name b { font-weight: 600; color: var(--ink); }
.teaser__pitch { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.teaser__cta { margin-top: 4px; color: var(--accent-ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.teaser--off { border-style: solid; }
.teaser--off .teaser__sample { filter: grayscale(1); opacity: 0.55; }
@media (max-width: 520px) { .teaser { grid-template-columns: 1fr; } }
/* samples */
.tz-link { display: block; height: 22px; border-radius: 999px; background: var(--line); }
.tz-link--hl { display: grid; place-items: center; background: var(--accent); color: #FFFFFF; font-size: 10px; font-weight: 700; box-shadow: 0 6px 14px -8px var(--accent); }
.tz-link--text { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 600; }
.tz-chip { padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-style: normal; font-size: 9px; }
.tz-more { color: var(--muted); font-size: 10px; text-align: center; }
.tz-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tz-icons i { width: 18px; height: 18px; border-radius: 5px; background: var(--c, #888); }
.tz-yt { --c: #FF0000; } .tz-ig { --c: #E1306C; } .tz-tt { --c: #111110; } .tz-x { --c: #555; } .tz-sp { --c: #1DB954; } .tz-li { --c: #0A66C2; }
.tz-video { position: relative; display: grid; place-items: center; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #2B2B2B, #6B1E1E); }
.tz-video--sm { height: 44px; border-radius: 8px; } /* Live detection: the block turned into the stream */
.tz-caption { display: block; min-width: 0; overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.tz-video i { width: 0; height: 0; border-left: 14px solid #FFFFFF; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tz-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: center; padding: 3px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 10px; font-weight: 700; }
.tz-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tz-badge--live { background: #FFE5EA; color: #D6002B; }
.tz-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--ink); font-size: 10px; }
.tz-row b { font-weight: 700; }
.tz-code { padding: 0 6px; border: 1px dashed var(--accent); border-radius: 6px; color: var(--accent-ink); }
.tz-shots { display: flex; gap: 4px; } .tz-shots i { width: 28px; height: 20px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 22%, var(--paper)); }
.tz-field { display: block; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 10px; }
.tz-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tz-themes i { height: 52px; border-radius: 8px; background: linear-gradient(160deg, #1B1340, #7C5CFF); }
.tz-themes i:nth-child(2) { background: linear-gradient(160deg, #FF9A5A, #FF4D1F); }
.tz-themes i:nth-child(3) { background: linear-gradient(160deg, #0F3B2E, #3FD08A); }
.tz-themes i:nth-child(4) { background: linear-gradient(160deg, #111110, #5E5A54); }
.tz-fonts { display: flex; justify-content: space-around; color: var(--ink); font-size: 20px; }
.tz-swatches { display: flex; justify-content: center; gap: 8px; }
.tz-swatches i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line); }
.tz-photo { display: block; height: 64px; border-radius: 10px; background: radial-gradient(circle at 30% 30%, #FFD6A5, transparent 45%), linear-gradient(135deg, #3A7BD5, #00D2FF 60%, #F7971E); }
.tz-photo--video { display: grid; place-items: center; background: linear-gradient(135deg, #2B5876, #4E4376); }
.tz-photo--film { background: radial-gradient(circle at 80% 20%, rgba(255, 170, 90, 0.7), transparent 40%), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55)), linear-gradient(160deg, #2B3A55, #C9A66B); }
.tz-photo--video i { width: 0; height: 0; border-left: 12px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tz-sparkle { position: relative; display: block; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #FFD3C2, #E7D8FF, #C9F0E4); background-size: 200% 200%; animation: tz-flow 5s ease infinite; }
.tz-sparkle i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px #FFFFFF; animation: tz-twinkle 1.8s ease-in-out infinite; }
.tz-sparkle i:nth-child(1) { left: 20%; top: 30%; } .tz-sparkle i:nth-child(2) { left: 55%; top: 60%; animation-delay: 0.6s; } .tz-sparkle i:nth-child(3) { left: 80%; top: 25%; animation-delay: 1.2s; }
@keyframes tz-flow { 50% { background-position: 100% 100%; } }
@keyframes tz-twinkle { 50% { opacity: 0.2; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .tz-sparkle, .tz-sparkle i { animation: none; } }
.tz-serp { display: grid; gap: 2px; font-size: 10px; text-align: left; }
.tz-serp b { color: #1A0DAB; font-size: 11px; font-weight: 600; }
.tz-serp small { color: #1E8A5A; }
.tz-serp span { color: var(--muted); }
.tz-url { color: var(--muted); font-size: 11px; text-align: center; }
.tz-url b { color: var(--ink); }
.tz-badge-off { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.tz-badge-off b { color: var(--ink); }
.tz-badge-off .wm__z { width: 9px; height: 10px; color: var(--ink); }
.tz-badge-off::after { content: ''; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; border-radius: 2px; background: var(--err, #B42318); transform: rotate(-8deg); }
.teaser .live-banner { margin: 0; font-size: 10px; }
.tpick .teaser { margin: 0 0 12px; }
.plat-step > .teaser { margin: 16px 0 0; } /* clear of "Add a platform or another account" and of each other */
.plat-step > .err + .teaser { margin: 0 0 16px; } /* the limit teaser right under the plan line */

/* Page templates (templates/index): a grid of whole pages drawn with the creator's own name and photo */
.tpl__main { width: min(1040px, 100%); margin: 0 auto; padding: 16px 16px calc(64px + var(--safe-b)); }
.tpl__back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 16px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tpl__back:hover { color: var(--ink); }
.tpl__back .icon { width: 16px; height: 16px; }
.tpl__warn { display: flex; align-items: flex-start; gap: 8px; }
.tpl__warn .icon { flex: none; width: 16px; height: 16px; margin-top: 4px; }
.tpl__chips { margin: 0 0 24px; }
.tpl__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 24px 16px; }
.tpl__card { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 16px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tpl__thumb { margin-bottom: 8px; }
.tpl__text { display: grid; gap: 4px; width: 100%; text-align: center; }
.tpl__text b { font-size: 15px; }
.tpl__text small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.tpl__card .btn { margin-top: auto; }
@media (max-width: 420px) { .tpl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; } .tpl__card { padding: 12px 8px; } }
.tpl-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 16px 0 0; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.45; }
.tpl-link:hover { border-color: var(--ink); }
.tpl-link b { display: block; font-size: 15px; }
.tpl-link span { color: var(--muted); }
.tpl-link span b { color: var(--ink); }
.tpl-link > .icon { width: 20px; height: 20px; }
.tpl-link .tpl-link__go { width: 16px; height: 16px; transform: rotate(180deg); color: var(--muted); }
.tpl-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.tpl-done form { margin: 0; }
.tpl-link--dash { margin: 0; border-style: solid; border-color: var(--line); }
.tz-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.tz-bars i { width: 12px; height: var(--h); border-radius: 3px 3px 0 0; background: var(--accent); }
/* UX-1: on phones the floating Preview is a compact round button, so it covers less of the cards behind it */
@media (max-width: 600px) {
  .ob__peek { width: 52px; height: 52px; min-height: 0; gap: 0; padding: 0; justify-content: center; font-size: 0; } /* no gap: the hidden "Preview" word would push the eye off centre */
  .ob__peek .ob__peek-dot { margin: 0; }
}

/* "View as creator" from HQ (partials/hq-access): a purple bar across the top while an HQ admin uses this account */
.hq-bar { position: fixed; inset: 0 0 auto; z-index: 80; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 16px; background: #5B3DF5; color: #FFFFFF; }
.hq-bar > svg { flex: none; width: 22px; height: 22px; }
.hq-bar p { display: grid; flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; }
.hq-bar b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.hq-bar span { opacity: 0.85; }
.hq-bar button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: #FFFFFF; color: #2A1A8C; font: 700 14px var(--sans); cursor: pointer; }
.hq-bar button:hover { background: #ECE8FF; }
body.has-hq { --hqbar: 56px; padding-top: var(--hqbar); }
body.has-hq .top, body.has-hq .side { top: var(--hqbar); }
body.has-hq .side { height: calc(100vh - var(--hqbar)); }
@media (max-width: 560px) { body.has-hq { --hqbar: 72px; } .hq-bar span { font-size: 12px; } }
/* Setup → essentials: a question whose block can't be added (limit, plan, switched off) */
.ess__label { margin: 0; font-weight: 600; }
.ess .teaser { margin: 0; }
/* Setup → step 4 is the dashboard's own Blocks section: styles in blocks-ui.css (.bx) */
.bx { display: grid; gap: 16px; }

/* Undo bar after a delete (dzUndo in app.js): bottom centre, above the phone tab bar; the line under it runs out with
   the time left and stops while the pointer or focus is on it */
.undo { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; overflow: hidden; border-radius: 12px; background: #1C1B19; color: #FFFFFF; font-weight: 600; box-shadow: 0 16px 40px -16px rgba(17, 17, 16, 0.45); transform: translateX(-50%); animation: undo-in 0.2s ease-out; }
.undo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo__btn { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #FF8A66; font: inherit; cursor: pointer; }
.undo__btn:hover, .undo__btn:focus-visible { background: rgba(255, 255, 255, 0.12); }
.undo__btn:focus-visible { outline: 2px solid #FF8A66; outline-offset: 0; }
.undo__time { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #FF8A66; transform-origin: left; animation: undo-time var(--undo-ms, 6s) linear forwards; }
.undo.is-paused .undo__time { animation-play-state: paused; }
.undo.is-done { padding-right: 16px; }
.undo.is-done .undo__time { display: none; }
.undo.is-leaving { opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.2s, transform 0.2s; }
@keyframes undo-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes undo-time { to { transform: scaleX(0); } }
@media (max-width: 899px) { body:has(.tabbar) .undo { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
body:has(.ob__bar) .undo { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* setup: above the Continue bar */
/* setup on phones: left of the round Preview button, level with it */
@media (max-width: 600px) { body:has(.ob__peek) .undo { left: 16px; right: 76px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; transform: none; animation-name: undo-in-left; } body:has(.ob__peek) .undo.is-leaving { transform: translateY(8px); } }
@keyframes undo-in-left { from { opacity: 0; transform: translateY(8px); } }

/* Each block type has its own look once filled in, built only from the theme's variables (--fg, --bg, --mut, --btn,
   --btnfg, --hl, --rad), so every theme restyles all of them */
.blk__ico { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; fill: currentColor; font-style: normal; line-height: 1; }
.blk__btn { display: flex; align-items: center; justify-content: center; }
.blk__chip { flex: none; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hl, var(--btn, #141311)) 16%, transparent); color: var(--fg, #141311); font-size: 10px; font-weight: 700; white-space: nowrap; }
/* Menu: dotted leaders from dish to price, like a printed menu */
.blk__row--lead { align-items: baseline; justify-content: flex-start; }
.blk__row--lead i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted color-mix(in srgb, var(--fg, #141311) 35%, transparent); transform: translateY(-3px); }
.blk--menu.blk--menu > .blk__h:first-child { font-size: 11px; }
/* Services: name, price as a chip */
.blk__row--svc { align-items: center; padding: 4px 0; }
.blk__row--svc + .blk__row--svc { border-top: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
/* Hours: a two-column timetable */
.blk__row--hours { padding: 4px 0; }
.blk__row--hours + .blk__row--hours { border-top: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
.blk--hours .blk__h::before { content: '◷ '; }
/* Classes: a date chip, the class, spots left */
.blk.blk--classes .blk__row--class, .blk.blk--events .blk__row--class { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 0; }
.blk__when { padding: 4px 8px; border-radius: 8px; background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.blk__cname { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Location: a little map with a pin, the address, directions */
.blk.blk--map { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 8px; align-items: center; }
.map__tile { position: relative; align-self: stretch; min-height: 72px; border-radius: 10px; background:
  linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--fg, #141311) 14%, transparent) 46% 54%, transparent 54%),
  linear-gradient(0deg, transparent 30%, color-mix(in srgb, var(--fg, #141311) 10%, transparent) 30% 36%, transparent 36%),
  color-mix(in srgb, var(--hl, #FF4D1F) 14%, var(--bg, #FAF8F5)); }
.map__pin { position: absolute; left: 50%; top: 40%; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--hl, #FF4D1F); transform: translate(-50%, -50%) rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.map__pin::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #FFFFFF; }
.map__body { display: grid; gap: 4px; min-width: 0; }
.map__body b { font-size: 12px; line-height: 1.35; }
.map__body .blk__btn { margin-top: 2px; padding: 6px; }
/* Google Map (feature blocks.map): the live map on top, the address and Get directions under it */
.blk.blk--gmap { display: grid; gap: 8px; padding: 8px; }
.gmap__frame { display: block; width: 100%; height: 168px; border: 0; border-radius: 10px; background: #E8E4DA; }
.blk--gmap .map__body { padding: 0 4px 4px; }
.blk--gmap .map__body .blk__btn { justify-self: start; text-decoration: none; }
/* Countdown: tiles that tick */
.cd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.cd__box { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); }
.cd__box b { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd__box small { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
/* Testimonials: quote cards side by side, swipe for more */
.blk.blk--quotes { overflow: hidden; }
.blk--quotes { grid-auto-flow: row; }
.blk--quotes .blk__quote { position: relative; padding: 8px 10px 8px 24px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); border: 0; font-size: 11.5px; }
.blk--quotes .blk__quote + .blk__quote { border-top: 0; }
.blk__qmark { position: absolute; left: 8px; top: 2px; font-family: Georgia, serif; font-size: 24px; line-height: 1; color: var(--hl, #FF4D1F); }
/* Discount codes: coupon tickets, tap to copy on the page */
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 12px; border: 1.5px dashed color-mix(in srgb, currentColor 35%, transparent); border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); cursor: default; }
.ticket[data-copy] { cursor: copy; }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--fg, #141311) 7%, var(--bg, #FAF8F5)); transform: translateY(-50%); }
.ticket::before { left: -6px; } .ticket::after { right: -6px; }
.ticket__brand { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ticket__code { grid-row: span 2; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.ticket__hint { font-size: 9px; color: var(--mut, #6B665D); }
/* Gear: product rows with an outward arrow */
.blk__row--gear { padding: 4px 0; }
.blk__row--gear + .blk__row--gear { border-top: 1px solid color-mix(in srgb, var(--fg, #141311) 10%, transparent); }
.blk--gear.is-folded .is-extra { display: none; }
.blk__fold { justify-self: start; margin-top: 4px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--fg, #141311) 18%, transparent); border-radius: 999px; background: none; color: var(--fg, #141311); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.blk__fold::after { content: ' ↓'; }
.blk--gear:not(.is-folded) .blk__fold::after { content: ' ↑'; }
/* WhatsApp in its own green; download with an arrow */
.mini__link.mini__link--whatsapp { background: #25D366; border-color: #25D366; color: #0B3D1F; } /* dark green on WhatsApp green: 6.2:1 (white was 2:1) */
.mini__link--whatsapp .mini__ico { fill: currentColor; }
.mini__ico--dl { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 9px; font-weight: 800; vertical-align: -2px; }
/* Image: caption over the photo */
.blk.blk--img { position: relative; }
.blk--img .blk__t { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #FFFFFF; }

/* Local block gallery (dev/blocks): phones in a grid */
.bgal { display: grid; gap: 16px; padding: 24px 16px 64px; max-width: 1440px; margin: 0 auto; }
.bgal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px 24px; }
.bgal__item { display: grid; gap: 8px; margin: 0; }
.bgal__item figcaption { display: flex; align-items: center; gap: 8px; }
.bgal__item small { margin-left: auto; color: var(--muted); font-size: 12px; }
.bgal__plan { padding: 0 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 700; line-height: 20px; }
.bgal__plan:not(.bgal__plan--free) { background: var(--accent-ink); color: #FFFFFF; }
.bgal__phone { width: 100%; max-width: 300px; height: 620px; }
.bgal__phone .phone__screen { overflow-y: auto; }
/* New blocks: announcement, UPI, events, milestones, media kit, shop */
.blk.blk--note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--hl, #FF4D1F) 18%, var(--bg, #FAF8F5)); border-color: color-mix(in srgb, var(--hl, #FF4D1F) 45%, transparent); }
.note__ico { flex: none; font-size: 18px; line-height: 1; }
.note__body { display: grid; gap: 2px; min-width: 0; }
.note__body b { font-size: 12px; line-height: 1.35; }
.note__body small { font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--fg, #141311) 80%, transparent); }
.blk__btn--upi { background: #2E7D32; color: #FFFFFF; }
.upi__id { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1.5px dashed color-mix(in srgb, var(--fg, #141311) 30%, transparent); border-radius: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.upi__id[data-copy] { cursor: copy; }
.blk__chip--link { color: var(--fg, #141311); text-decoration: none; }
.blk.blk--stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; padding: 8px; }
/* Tiles inside a block take a tint of the block’s own text colour, not the page background: on themes whose
   blocks are cards in another colour (Multiverse: white cards on navy) the page colour made dark tiles under dark text */
.stat { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); text-align: center; }
.stat b { font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.stat small { font-size: 9.5px; font-weight: 600; color: var(--mut, #6B665D); line-height: 1.25; }
.stat--ghost { opacity: 0.55; }
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.kit__item { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); }
.kit__item b { font-size: 15px; font-weight: 800; }
.kit__item small { font-size: 9.5px; color: var(--mut, #6B665D); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.blk__more { font-size: 10.5px; font-weight: 700; color: var(--fg, #141311); text-align: center; text-decoration: none; }
.shop__row { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 10px; }
.shop__row small { color: var(--mut, #6B665D); font-weight: 700; }
.bgal__phone .phone__screen { overflow-y: auto; overscroll-behavior: contain; }
.bgal__phone .pg-layer { position: relative; inset: auto; min-height: 100%; }
.bgal__phone .pg-layer > .mini { height: auto; min-height: 100%; overflow: visible; }

/* Email sign-up and Ask me (partials/page): real forms on the public page, the same look, still, in the editor's phone.
   Inputs are 12.5px so the public page's zoom makes them 16px (no zoom-in on iPhones). Doubled selectors: themes.css
   loads after this file on the public page. */
.blk.blk--form { display: grid; gap: 8px; padding: 10px 12px; }
.blk--form .fm__in { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 0; padding: 8px; border: 1px solid color-mix(in srgb, var(--fg, #141311) 16%, transparent); border-radius: min(calc(var(--rad, 12px) * 0.75), 12px); background: color-mix(in srgb, var(--fg, #141311) 5%, transparent); color: var(--fg, #141311); font: inherit; font-size: 12.5px; line-height: 1.3; outline: none; }
.blk--form span.fm__in { color: var(--mut, #6B665D); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm__in::placeholder { color: var(--mut, #6B665D); opacity: 1; }
.blk--form .fm__in:focus { border-color: color-mix(in srgb, var(--fg, #141311) 45%, transparent); }
.blk--form .fm__area { min-height: 64px; resize: vertical; white-space: normal; }
span.fm__area { white-space: normal; }
.fm__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
.fm__row { display: flex; gap: 4px; padding: 4px; border: 1px solid color-mix(in srgb, var(--fg, #141311) 16%, transparent); border-radius: min(calc(var(--rad, 12px) * 0.75 + 4px), 16px); background: color-mix(in srgb, var(--fg, #141311) 5%, transparent); }
.fm__row:focus-within { border-color: color-mix(in srgb, var(--fg, #141311) 45%, transparent); }
.blk--form .fm__row .fm__in { flex: 1; padding: 4px 8px; border: 0; background: none; }
.blk--form .fm__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 0; border-radius: min(calc(var(--rad, 12px) * 0.75), 12px); background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.fm__btn--wide { width: 100%; }
.fm__btn:disabled { opacity: 0.6; cursor: progress; }
.fm__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fm__msg { font-size: 11px; font-weight: 600; }
.fm__msg:empty { display: none; }
.fm__msg.is-err { padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, #D93025 18%, transparent); }
.blk--form.is-sent > :not(.blk__h):not(.fm__msg) { display: none; }
.blk--form.is-sent .fm__msg { padding: 8px 0 4px; font-size: 12.5px; text-align: center; }

/* Portfolio with only a link: the creator's website as a card in a browser frame (SitePreview). Theme colours. */
.site { display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--fg, #141311) 16%, transparent); border-radius: min(calc(var(--rad, 12px) * 0.75), 12px); background: color-mix(in srgb, var(--fg, #141311) 4%, transparent); color: var(--fg, #141311); text-decoration: none; }
.site__bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--fg, #141311) 12%, transparent); }
.site__bar i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--fg, #141311) 25%, transparent); }
.site__url { flex: 1; min-width: 0; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--fg, #141311) 7%, transparent); color: color-mix(in srgb, var(--fg, #141311) 80%, transparent); font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__shot { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; object-position: top; }
.site__shot--plain { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--btn, #141311) 35%, transparent), transparent 60%), color-mix(in srgb, var(--fg, #141311) 8%, transparent); }
.site__shot--plain b { font-size: 40px; line-height: 1; opacity: 0.8; }
.site__body { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.site__text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.site__text b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__text small { color: var(--mut, #6B665D); font-size: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site__go { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); font-size: 10px; font-weight: 700; }

/* Media kits (partials/kit-body, MediaKits): inside the creator's theme, at phone scale like the blocks */
.mini__collab { display: inline-flex; align-items: center; gap: 4px; align-self: center; justify-self: center; margin: 0 auto 8px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--hl, var(--btn, #141311)) 16%, transparent); color: var(--fg, #141311); font-size: 10px; font-weight: 700; text-decoration: none; }
.mini__collab-ico { width: 12px; height: 12px; }
.kt-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 8%, transparent); }
.kt-tab { flex: 1; padding: 4px 8px; border-radius: 999px; color: var(--fg, #141311); font-size: 10.5px; font-weight: 700; text-align: center; text-decoration: none; }
.kt-tab.is-on { background: var(--btn, #141311); color: var(--btnfg, #FFFFFF); }
.kt-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 0; color: var(--mut, #6B665D); font-size: 9.5px; font-weight: 600; }
.kt-meta:empty { display: none; }
.kt-hero { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.kt-handle { margin-left: 4px; color: var(--mut, #6B665D); font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.kt-link { color: inherit; text-decoration: none; }
.kt-sub { margin-top: 4px; color: var(--mut, #6B665D); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kbar { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 0 8px; font-size: 10.5px; }
.kbar > span { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.kbar > i { grid-column: 1; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--hl, var(--btn, #141311)) var(--w), color-mix(in srgb, currentColor 10%, transparent) var(--w)); }
.kbar > b { grid-column: 2; grid-row: 2; font-size: 10px; text-align: right; }
.kt-brands { display: flex; flex-wrap: wrap; gap: 4px; }
.kt-brand { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 7%, transparent); font-size: 10px; font-weight: 700; }
.kt-brand img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.kt-cta { position: sticky; bottom: 8px; z-index: 6; text-align: center; text-decoration: none; }
.mini:has(.kt) .mini__url { position: static; margin-top: 16px; } /* a kit's sticky Work with me sits at the bottom instead */
.kt-ok { margin-left: 4px; font-size: 0.7em; vertical-align: 0.15em; color: var(--hl, var(--btn, #141311)); }
.kt-back { margin-top: 4px; }
.blk--pf .pf__item img { aspect-ratio: 16 / 9; }
.kt .blk--pf .pf__t { font-size: 10px; font-weight: 700; }
.tz-kit { display: grid; gap: 0; padding: 4px 8px; border-radius: 8px; background: var(--line); text-align: center; }
.tz-kit b { font-size: 13px; }
.tz-kit small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }

/* Media kit block, floating style (partials/page .kf, public/js/kit-float.js): a row under the socials by default;
   beside the photo (.is-float) only when the script found room on both sides */
@keyframes kf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.kf { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.kf__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; background: color-mix(in srgb, var(--bg, #FAF8F5) 72%, transparent); border: 1px solid color-mix(in srgb, var(--hl, var(--btn, #141311)) 45%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.45); color: var(--fg, #141311); text-align: left; text-decoration: none; white-space: nowrap; }
.kf__chip b { display: block; font-size: 11px; font-weight: 800; line-height: 1.15; }
.kf__chip small { display: block; font-size: 8.5px; font-weight: 600; color: var(--mut, #6B665D); }
.kf__ico { flex: none; width: 14px; height: 14px; fill: currentColor; }
.kf__ico--youtube { color: #FF0000; }
.kf__ico--instagram { color: #E1306C; }
.kf.is-float { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; }
.kf.is-float .kf__chip { position: absolute; pointer-events: auto; animation: kf-bob 3.2s ease-in-out infinite; }
.kf.is-float .kf__chip--r { animation-delay: -1.6s; }
.is-still .kf__chip, .is-paused .kf__chip { animation: none !important; }
.kf__card { display: none; }
@media (prefers-reduced-motion: reduce) { .kf__chip, .kf__card { animation: none !important; } }

/* Media kit block card (partials/page .kg, MediaKits::glimpse): each platform's headline and average views, Work
   with me and the full kit */
.kg__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kg__h small { color: var(--mut, #6B665D); font-size: 9px; font-weight: 600; white-space: nowrap; }
.kg__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, currentColor 7%, transparent); }
.kg__ico { width: 16px; height: 16px; fill: currentColor; }
.kg__ico--youtube { color: #FF0000; }
.kg__ico--instagram { color: #E1306C; }
.kg__n { display: grid; gap: 0; min-width: 0; }
.kg__n b { font-size: 15px; font-weight: 800; line-height: 1.15; }
.kg__n small { overflow: hidden; color: var(--mut, #6B665D); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* Page layouts picker (partials/layout-picker; Design tab and setup's theme step): a little wireframe of each layout */
.lyt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* 9 layouts: 3 x 3 (owner, 28 Oct) */
.lyt__opt { position: relative; display: grid; align-content: start; justify-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-align: center; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.lyt__opt:hover { border-color: var(--line-2); }
.lyt__opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lyt__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lyt__opt.is-locked { cursor: not-allowed; }
.lyt__opt.is-locked .wf { opacity: 0.5; }
.lyt__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 600; } /* the plan tag drops below the name when the tile is narrow */
.lyt__tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 8px; border-radius: 999px; font-family: var(--sans); background: var(--paper-2, #FFF1EA); color: var(--accent-ink, #C2300A); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0.04em; line-height: 16px; }
.lyt__tag svg { width: 10px; height: 10px; }
/* Classic (PageLayouts::RECOMMENDED): a diagonal ribbon across the tile's top-right corner, in the brand colour (owner,
   28 Oct: picked option B of six). The corner frame clips it to the tile's rounded corner; the band crosses the corner
   along x + y = 72px (58 on phones), room for the whole word. White text on the deeper brand orange the accent buttons use
   (#D0340C, 5.0:1; white on #FF4D1F is only 3.3:1), owner: "on orange the text should be white … for readability". */
.lyt__rib { position: absolute; top: 0; right: 0; z-index: 1; width: 108px; height: 108px; overflow: hidden; border-top-right-radius: 15px; pointer-events: none; }
.lyt__rib em { position: absolute; top: 24px; right: -26px; width: 136px; transform: rotate(45deg); background: #D0340C; color: #FFFFFF; box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.45); font: 700 9px/18px var(--sans); font-style: normal; letter-spacing: 0.06em; text-align: center; }
/* a phone's third-width tile: a slimmer band closer to the corner */
@media (max-width: 480px) { .lyt__rib { width: 88px; height: 88px; } .lyt__rib em { top: 18px; right: -28px; width: 120px; font-size: 7.5px; line-height: 15px; letter-spacing: 0.03em; } }
.lyt__line { color: var(--muted); font-size: 12px; line-height: 1.3; }
/* the wireframe: a tiny phone; the same moves as layouts.css, drawn in ink */
.wf { position: relative; display: grid; align-content: start; justify-items: center; gap: 4px; width: 64px; height: 104px; padding: 8px 6px; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); }
.wf i { display: block; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.wf__cover { display: none !important; }
.wf__h { display: grid; justify-items: center; gap: 3px; width: 100%; }
.wf__tx { display: grid; justify-items: center; gap: 3px; }
.wf__av { width: 14px; height: 14px; border-radius: 999px !important; background: color-mix(in srgb, var(--ink) 40%, transparent) !important; }
.wf__t { width: 28px; height: 4px; }
.wf__s { width: 36px; height: 3px; opacity: 0.6; }
.wf__ls { display: grid; gap: 3px; width: 100%; margin-top: 4px; }
.wf__ls i { height: 8px; border-radius: 3px; }
.wf--left .wf__h, .wf--right .wf__h, .wf--list .wf__h { grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 4px; }
.wf--left .wf__tx, .wf--list .wf__tx { justify-items: start; }
.wf--right .wf__h { grid-template-columns: 1fr auto; justify-items: end; }
.wf--right .wf__av { grid-column: 2; grid-row: 1; }
.wf--right .wf__tx { grid-column: 1; grid-row: 1; justify-items: end; }
.wf--left .wf__t, .wf--right .wf__t { width: 22px; } .wf--left .wf__s, .wf--right .wf__s { width: 26px; }
.wf--banner .wf__cover, .wf--hero .wf__cover { display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 28px; border-radius: 0; background: linear-gradient(color-mix(in srgb, var(--ink) 30%, transparent), transparent); }
.wf--banner { padding-top: 18px; }
.wf--banner .wf__av { outline: 2px solid var(--paper); }
.wf--hero .wf__cover { height: 54px; }
.wf--hero { padding-top: 40px; }
.wf--hero .wf__av { display: none; }
.wf--hero .wf__t { width: 36px; height: 6px; }
.wf--card .wf__h { padding: 6px 4px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.wf--list .wf__h { padding-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.wf--profile { padding-top: 6px; }
.wf--profile .wf__h { position: relative; justify-items: start; overflow: hidden; padding: 16px 5px 5px; border-radius: 7px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.wf--profile .wf__h::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, #7B5CFF 45%, transparent)); }
.wf--profile .wf__av { position: relative; margin-top: -6px; outline: 2px solid var(--paper); }
.wf--profile .wf__tx { justify-items: start; }
.wf--list .wf__av { width: 10px; height: 10px; }
.wf--list .wf__ls { gap: 0; }
.wf--list .wf__ls i { height: 9px; border-radius: 0; background: none; border-bottom: 1px solid var(--line-2); }
.wf--editorial .wf__h { grid-template-columns: 1fr auto; justify-items: start; padding-bottom: 4px; border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 50%, transparent); }
.wf--editorial .wf__av { grid-column: 2; grid-row: 1; width: 10px; height: 10px; align-self: start; }
.wf--editorial .wf__tx { grid-column: 1; grid-row: 1; justify-items: start; }
.wf--editorial .wf__t { width: 38px; height: 9px; }
.wf--grid .wf__ls { grid-template-columns: 1fr 1fr; }
.wf--grid .wf__ls i { height: 16px; }
.ob__layout { display: grid; gap: 8px; margin-top: 24px; }
.ob__h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ob__layout .hint { margin: 0; }
.tz-wfs { display: flex; justify-content: center; gap: 8px; }
.wf--photo .wf__cover { background: linear-gradient(transparent 40%, var(--paper)), linear-gradient(160deg, #8EC5E8 0%, #F6D6A8 55%, #6B8E5A 56%, #3F5E3A 100%); }
/* Design → Layout: the cover photo row (Banner and Hero) */
.cover-pick { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: opacity 0.2s; }
.cover-pick.is-off { opacity: 0.72; }
.cover-pick__img { display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--paper-2) center / cover no-repeat; color: var(--accent-ink); }
.cover-pick__img svg { width: 24px; height: 24px; }
.cover-pick__img.has-img svg { display: none; }
.cover-pick__body { display: grid; gap: 4px; min-width: 0; }
.cover-pick__body b { font-size: 16px; }
.cover-pick__body p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cover-pick__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.cover-pick__actions label.btn { position: relative; }
@media (max-width: 480px) { .cover-pick { grid-template-columns: 1fr; } .cover-pick__img { height: 96px; } }

/* ---- Loading screen (Pro, design.loading_screen; owner, 30 Oct 2026): their logo animates in, a short bar fills, then
   the screen fades and stops catching taps. .ld is the animation (also the Design tab's preview box); .pg-ld is the
   full-screen cover on the public page (partials/loader), in the theme's colours. Transform / opacity / clip only. ---- */
.ld { --ld-a: var(--hl, var(--accent)); --ld-b: var(--fg, #FFFFFF); display: grid; justify-items: center; gap: 24px; }
.ld__logo { position: relative; display: block; width: min(56vw, 240px); }
.ld__logo img { display: block; width: 100%; height: auto; max-height: 36vh; object-fit: contain; }
.ld__ghost { position: absolute; inset: 0; background: var(--ld-a); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; opacity: 0; }
.ld__ghost--b { background: var(--ld-b); }
.ld__bar { display: block; width: 120px; height: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ld-a) 24%, transparent); }
.ld__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ld-a); transform-origin: 0 50%; animation: ld-bar 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both; }
@keyframes ld-bar { from { transform: scaleX(0); } }
.ld--glitch .ld__logo img { animation: ld-glitch 0.9s steps(1) both; }
.ld--glitch .ld__ghost { animation: ld-ghost 0.9s steps(1) both; }
.ld--glitch .ld__ghost--b { animation-name: ld-ghost-b; }
@keyframes ld-glitch {
  0% { opacity: 0; clip-path: inset(42% 0 44% 0); transform: translateX(-16px); }
  10% { opacity: 1; clip-path: inset(8% 0 72% 0); transform: translateX(12px); }
  20% { clip-path: inset(62% 0 12% 0); transform: translateX(-8px); }
  30% { clip-path: inset(24% 0 48% 0); transform: translateX(6px); }
  40% { clip-path: inset(0 0 30% 0); transform: translateX(-4px); }
  50%, 100% { opacity: 1; clip-path: inset(0); transform: none; }
}
@keyframes ld-ghost { 0%, 50%, 100% { opacity: 0; } 10% { opacity: 0.8; transform: translate(8px, -2px); } 30% { opacity: 0.6; transform: translate(-6px, 2px); } }
@keyframes ld-ghost-b { 0%, 50%, 100% { opacity: 0; } 20% { opacity: 0.7; transform: translate(-8px, 1px); } 40% { opacity: 0.5; transform: translate(5px, -1px); } }
.ld--fade .ld__logo img { animation: ld-fade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ld-fade { from { opacity: 0; transform: translateY(12px) scale(0.96); filter: blur(6px); } }
.ld--pop .ld__logo img { animation: ld-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes ld-pop { from { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; } }
.pg-ld-wrap { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
.pg-ld-wrap > .pg-ld { position: absolute; inset: 0; height: 100%; padding: 16px; display: grid; place-items: center; pointer-events: auto; zoom: 1; animation: ld-out 0.45s ease 1.6s forwards; }
@keyframes ld-out { to { opacity: 0; visibility: hidden; } }
.pg-ld.is-still .ld *, .pg-ld.is-still .ld *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pg-ld-wrap { display: none; } }
/* Design tab: the logo row and a small preview that plays the chosen style */
.ld-pick__img { background: repeating-conic-gradient(#E9E5DF 0 25%, #FFFFFF 0 50%) 0 0 / 16px 16px; }
.ld-pick__img.has-img { background-size: contain, 16px 16px; background-repeat: no-repeat, repeat; background-position: center, 0 0; }
.ld-opts { display: grid; gap: 16px; margin-top: 16px; }
.ld-demo { position: relative; display: grid; place-items: center; height: 200px; border-radius: 16px; background: #0E0E0D; overflow: hidden; --hl: var(--accent); --fg: #FFFFFF; }
.ld-demo .ld__logo { width: 160px; }
.ld-demo .ld__logo img { max-height: 104px; }
.ld-demo__play { position: absolute; right: 8px; bottom: 8px; }
.tz-loader { display: grid; justify-items: center; gap: 8px; padding: 16px; border-radius: 12px; background: #0E0E0D; }
.tz-loader i { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); }
.tz-loader b { width: 56px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 40%, transparent); }