/* =============================================================================
   launchpad.css — styling for the gifts.wtf NFT LAUNCHPAD / Drop Page Designer.

   Two panes: a DESIGNER form (left) and a LIVE PREVIEW of the drop page (right).
   Everything is scoped under `.lp-` and reads the marketplace theme custom
   properties market.css defines on :root (--void/--panel/--raised/--hover/--well
   /--hairline*/--ink-*/--p300..700/--on-accent/--gain/--loss/--sweep/--font-*),
   so it re-skins for free across dark / light / hashtag themes.

   The PREVIEW frame is recoloured live by two locally-scoped variables the JS
   sets inline on `.lp-frame`: --lp-accent, --lp-accent-2 and --lp-on-accent.
   The three layout templates are selected by `.lp-frame[data-tpl="grid|pro|wtf"]`.

   Motion is decoration only — prefers-reduced-motion kills every animation and
   transition at the bottom of the file.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0 · SHELL — two panes side by side, each scrolls on its own.
   ------------------------------------------------------------------------ */
.lp-root {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 1px;
  background: var(--hairline);
  min-height: 60vh;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--ink-hi);
  position: relative;
}
.lp-root *, .lp-root *::before, .lp-root *::after { box-sizing: border-box; }

.lp-designer {
  background: var(--panel);
  padding: 22px 22px 40px;
  overflow: auto;
  max-height: calc(100vh - 60px);
}
.lp-preview {
  background: var(--well);
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100vh - 60px);
}

/* number rendering everywhere in this surface */
.lp-num, .lp-d-spec-v, .lp-d-mint-price, .lp-d-bulk-p, .lp-tier-amt,
.lp-d-supply-txt, .lp-d-bar, .lp-url-slug {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   1 · DESIGNER HEADER + SECTIONS
   ------------------------------------------------------------------------ */
.lp-head { margin-bottom: 20px; }
.lp-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--p400);
}
.lp-h1 {
  margin: 4px 0 6px; font-size: 26px; line-height: 1.05; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink-hi);
}
.lp-lede { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-lo); }

.lp-sec {
  border-top: 1px solid var(--hairline);
  padding: 20px 0 4px;
}
.lp-sec-h { display: flex; align-items: center; gap: 10px; }
.lp-sec-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--tint); color: var(--p400);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.lp-sec-t { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-hi); }
.lp-sec-sub { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-lo); }
.lp-sec-b { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------------------
   2 · FORM CONTROLS
   ------------------------------------------------------------------------ */
.lp-field { display: flex; flex-direction: column; gap: 6px; }
.lp-lab {
  font-size: 12px; font-weight: 700; letter-spacing: .01em; color: var(--ink-mid);
}
.lp-hint { font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); }
.lp-cap { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }

.lp-input {
  width: 100%;
  background: var(--well);
  color: var(--ink-hi);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.3;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-appearance: none; appearance: none;
}
.lp-input::placeholder { color: var(--ink-faint); }
.lp-input:hover { border-color: var(--hairline-2); }
.lp-input:focus {
  outline: none;
  border-color: var(--p500);
  box-shadow: 0 0 0 3px var(--ring);
  background: var(--panel);
}
.lp-num { font-variant-numeric: tabular-nums; }
.lp-mono, .lp-hex { font-family: var(--font-num, ui-monospace, monospace); letter-spacing: .01em; }

.lp-select {
  cursor: pointer;
  background-image: none;
}
.lp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-price-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lp-price-wrap .lp-select { min-width: 84px; }

/* ---------------------------------------------------------------------------
   3 · IDENTITY — the live drop URL + copy
   ------------------------------------------------------------------------ */
.lp-url {
  display: flex; align-items: stretch; gap: 8px;
  margin-top: 2px;
}
.lp-url-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  background: var(--tint-weak);
  border: 1px dashed var(--hairline-2);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 13.5px;
  overflow: hidden;
  cursor: default;
}
.lp-url-pre { color: var(--ink-lo); white-space: nowrap; }
.lp-url-slug {
  color: var(--p400); font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-copy {
  flex: 0 0 auto;
  background: var(--raised);
  color: var(--ink-hi);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.lp-copy:hover { border-color: var(--p500); color: var(--p400); }
.lp-copy:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-copy.is-ok { color: var(--gain); border-color: var(--gain); }

/* ---------------------------------------------------------------------------
   4 · TEMPLATE PICKER
   ------------------------------------------------------------------------ */
.lp-templates { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lp-tpl {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  text-align: left;
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 12px 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-mid);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.lp-tpl:hover { border-color: var(--hairline-2); transform: translateY(-1px); }
.lp-tpl:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-tpl.is-sel {
  border-color: var(--p400);
  background: var(--tint-weak);
  box-shadow: 0 0 0 1px var(--p400) inset;
}
.lp-tpl-name { font-size: 13.5px; font-weight: 800; color: var(--ink-hi); }
.lp-tpl.is-sel .lp-tpl-name { color: var(--p400); }
.lp-tpl-blurb { font-size: 11px; line-height: 1.35; color: var(--ink-faint); }

/* tiny schematic in each template button */
.lp-tpl-mini {
  width: 100%; height: 40px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--hairline);
  padding: 5px; display: flex; gap: 3px; overflow: hidden;
}
.lp-tpl-mini i { display: block; background: var(--hairline-2); border-radius: 2px; }
/* grid schematic: three even columns */
.lp-tpl-mini-grid { flex-direction: row; }
.lp-tpl-mini-grid i { flex: 1; }
/* pro schematic: hero bar + two lines stacked */
.lp-tpl-mini-pro { flex-direction: column; }
.lp-tpl-mini-pro .lp-mini-a { height: 55%; }
.lp-tpl-mini-pro .lp-mini-b { height: 14%; width: 70%; }
.lp-tpl-mini-pro .lp-mini-c { height: 14%; width: 45%; background: var(--p400); }
/* wtf schematic: skewed loud bars */
.lp-tpl-mini-wtf { flex-direction: row; transform: skewX(-8deg); }
.lp-tpl-mini-wtf i { flex: 1; }
.lp-tpl-mini-wtf .lp-mini-a { background: var(--p400); }
.lp-tpl-mini-wtf .lp-mini-c { background: var(--sweep); }

/* ---------------------------------------------------------------------------
   5 · COLOUR PICKER
   ------------------------------------------------------------------------ */
.lp-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-color { display: flex; flex-direction: column; gap: 6px; }
.lp-color-row { display: grid; grid-template-columns: 44px 1fr 18px; gap: 8px; align-items: center; }
.lp-color-in {
  width: 44px; height: 40px; padding: 0; border: 1px solid var(--hairline);
  border-radius: 10px; background: var(--well); cursor: pointer;
}
.lp-color-in:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-color-in::-webkit-color-swatch-wrapper { padding: 3px; }
.lp-color-in::-webkit-color-swatch { border: none; border-radius: 6px; }
.lp-hex { text-transform: uppercase; }
.lp-color-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--hairline-2); }

/* ---------------------------------------------------------------------------
   6 · MINT / BULK TIERS
   ------------------------------------------------------------------------ */
.lp-tiers-h { display: flex; align-items: center; justify-content: space-between; }
.lp-mini-btn {
  background: var(--raised); color: var(--ink-mid);
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: border-color .18s ease, color .18s ease;
}
.lp-mini-btn:hover { border-color: var(--p500); color: var(--p400); }
.lp-mini-btn:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }

.lp-tiers { display: flex; flex-direction: column; gap: 6px; }
.lp-tier {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 30px;
  gap: 8px; align-items: center;
}
.lp-tier-head { padding: 0 2px 2px; }
.lp-tier-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.lp-tier-cell { min-width: 0; }
.lp-tier-qty, .lp-tier-disc { padding: 8px 10px; font-size: 13px; }
.lp-tier-total { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lp-tier-amt { font-size: 13px; font-weight: 800; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.lp-tier-was {
  font-size: 10.5px; color: var(--ink-faint); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.lp-tier-rm {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--raised); color: var(--ink-lo);
  border: 1px solid var(--hairline); cursor: pointer;
  font-size: 18px; line-height: 1; font-family: inherit;
  transition: color .18s ease, border-color .18s ease;
}
.lp-tier-rm:hover:not(:disabled) { color: var(--loss); border-color: var(--loss); }
.lp-tier-rm:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-tier-rm:disabled { opacity: .35; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   7 · ASSET UPLOADS
   ------------------------------------------------------------------------ */
.lp-uploads { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.lp-upload { display: flex; flex-direction: column; gap: 8px; }
.lp-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--hairline) 0 8px, transparent 8px 16px),
    var(--well);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.lp-thumb.has-img { background: var(--well); }
.lp-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-thumb-ph { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.lp-thumb.has-img .lp-thumb-ph { display: none; }
.lp-upload-acts { display: flex; gap: 6px; }
.lp-file-btn {
  flex: 1; text-align: center; cursor: pointer;
  background: var(--raised); color: var(--ink-mid);
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 7px 8px; font-size: 11.5px; font-weight: 700;
  transition: border-color .18s ease, color .18s ease;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-file-btn:hover { border-color: var(--p500); color: var(--p400); }
.lp-file-btn:focus-within { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.lp-clear { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   8 · LINKING + FEE ROUTE
   ------------------------------------------------------------------------ */
.lp-feeroute { display: flex; flex-direction: column; gap: 7px; }
.lp-seg {
  display: inline-flex; align-self: flex-start;
  background: var(--well); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 3px; gap: 3px;
}
.lp-seg-btn {
  background: transparent; color: var(--ink-mid);
  border: 0; border-radius: 7px; padding: 8px 20px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.lp-seg-btn:hover { color: var(--ink-hi); }
.lp-seg-btn:focus-visible { outline: 2px solid var(--p500); outline-offset: 2px; }
.lp-seg-btn.is-sel { background: var(--p400); color: var(--on-accent); }

/* ---------------------------------------------------------------------------
   9 · PUBLISH ACTIONS
   ------------------------------------------------------------------------ */
.lp-actions {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 12px;
}
.lp-actions-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }
.lp-publish {
  width: 100%;
  background: var(--p400); color: var(--on-accent);
  border: 0; border-radius: 12px;
  padding: 15px 20px;
  font-size: 15px; font-weight: 800; letter-spacing: .01em; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 28px -12px var(--p400);
  transition: filter .18s ease, transform .12s ease, box-shadow .18s ease;
}
.lp-publish:hover { filter: brightness(1.06); box-shadow: 0 16px 36px -14px var(--p400); }
.lp-publish:active { transform: translateY(1px); }
.lp-publish:focus-visible { outline: 2px solid var(--p600); outline-offset: 3px; }

/* ===========================================================================
   10 · PREVIEW PANE
   ======================================================================== */
.lp-preview-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
  flex: 0 0 auto;
}
.lp-preview-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gain); box-shadow: 0 0 8px var(--gain);
}
.lp-preview-lab { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mid); }
.lp-preview-addr {
  margin-left: auto; font-size: 12px; color: var(--ink-lo);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.lp-preview-scroll { flex: 1 1 auto; overflow: auto; padding: 22px; }

/* the frame is the phone/page canvas; carries the live --lp-accent vars */
.lp-frame {
  --lp-accent: var(--p400);
  --lp-accent-2: var(--sweep);
  --lp-on-accent: #fff;
  max-width: 720px; margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px var(--shadow-card);
}

/* ---- shared drop pieces ---- */
.lp-d { display: flex; flex-direction: column; }
.lp-d-banner { width: 100%; height: 120px; overflow: hidden; background: var(--well); }
.lp-d-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-d-hero { padding: 22px; display: flex; gap: 20px; align-items: center; }
.lp-d-art {
  flex: 0 0 auto; width: 150px; height: 150px; border-radius: 14px;
  overflow: hidden; background: var(--well); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.lp-d-art .lp-d-tile-img, .lp-d-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-d-tile {
  position: relative; border-radius: 12px; overflow: hidden;
  background: var(--well); border: 1px solid var(--hairline);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.lp-d-tile.is-empty {
  background:
    repeating-linear-gradient(45deg, var(--hairline) 0 10px, transparent 10px 20px),
    var(--well);
}
.lp-d-tile-ph {
  font-size: 24px; font-weight: 800; color: var(--ink-faint);
  opacity: .5;
}
.lp-d-art.is-empty .lp-d-tile-ph { font-size: 40px; }

.lp-d-id { min-width: 0; flex: 1 1 auto; }
.lp-d-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-d-name {
  margin: 0; font-size: 30px; line-height: 1.02; font-weight: 900;
  letter-spacing: -.02em; color: var(--ink-hi); word-break: break-word;
}
.lp-d-symbol {
  display: inline-flex; align-items: center;
  background: var(--lp-accent); color: var(--lp-on-accent);
  border-radius: 7px; padding: 3px 9px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.lp-d-tag { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-lo); }

.lp-d-specs { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.lp-d-spec { display: flex; flex-direction: column; gap: 2px; }
.lp-d-spec-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.lp-d-spec-v { font-size: 15px; font-weight: 800; color: var(--ink-hi); }

/* gallery (grid template) */
.lp-d-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 0 22px 6px;
}

/* mint card */
.lp-d-mint {
  margin: 18px 22px 22px;
  background: var(--raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px;
}
.lp-d-mint-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lp-d-mint-lab { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-lo); }
.lp-d-mint-price { font-size: 22px; font-weight: 900; color: var(--ink-hi); letter-spacing: -.01em; }
.lp-d-mint-per { font-size: 12px; font-weight: 600; color: var(--ink-faint); margin-left: 6px; }

.lp-d-supply { margin-top: 14px; }
.lp-d-supply-txt { font-size: 12.5px; color: var(--ink-lo); }
.lp-d-supply-txt strong { color: var(--ink-hi); }
.lp-d-bar {
  margin-top: 7px; height: 8px; border-radius: 999px;
  background: var(--well); overflow: hidden; border: 1px solid var(--hairline);
}
.lp-d-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-2));
  transition: width .4s cubic-bezier(.16,.8,.24,1);
}

.lp-d-bulk { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 16px; }
.lp-d-bulk-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 11px; padding: 11px 8px;
  cursor: pointer; font-family: inherit;
  transition: border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.lp-d-bulk-btn:hover {
  border-color: var(--lp-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px var(--lp-accent);
}
.lp-d-bulk-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-d-bulk-q { font-size: 14px; font-weight: 900; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.lp-d-bulk-p { font-size: 12px; font-weight: 700; color: var(--ink-lo); font-variant-numeric: tabular-nums; }
.lp-d-bulk-off {
  position: absolute; top: -7px; right: -6px;
  background: var(--lp-accent-2); color: #07121e;
  font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 5px;
  font-variant-numeric: tabular-nums;
}

.lp-d-mintbtn {
  width: 100%; margin-top: 16px;
  background: var(--lp-accent); color: var(--lp-on-accent);
  border: 0; border-radius: 12px; padding: 15px;
  font-size: 16px; font-weight: 900; letter-spacing: .02em; font-family: inherit;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.lp-d-mintbtn:hover { filter: brightness(1.07); }
.lp-d-mintbtn:active { transform: translateY(1px); }
.lp-d-mintbtn:focus-visible { outline: 2px solid var(--lp-accent-2); outline-offset: 3px; }
.lp-d-mint-fine { margin-top: 10px; text-align: center; font-size: 11px; color: var(--ink-faint); }

.lp-d-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 6px; }
.lp-d-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--well); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 6px 12px;
}
.lp-d-pill-k { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.lp-d-pill-v { font-size: 12.5px; font-weight: 700; color: var(--ink-mid); font-variant-numeric: tabular-nums; }

.lp-d-foot {
  padding: 14px 22px 20px; border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-faint); text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   11 · TEMPLATE VARIANTS — driven by [data-tpl]
   ======================================================================== */

/* ---- GRID: gallery-forward, compact hero ---- */
.lp-frame[data-tpl="grid"] .lp-d-hero { padding-bottom: 12px; }
.lp-frame[data-tpl="grid"] .lp-d-name { font-size: 26px; }
.lp-frame[data-tpl="grid"] .lp-d-art { width: 110px; height: 110px; }

/* ---- PROFESSIONAL: centered, editorial, restrained ---- */
.lp-frame[data-tpl="pro"] .lp-d-hero {
  flex-direction: column-reverse; text-align: center; align-items: center;
  padding: 30px 26px 20px;
}
.lp-frame[data-tpl="pro"] .lp-d-art { width: 200px; height: 200px; border-radius: 18px; }
.lp-frame[data-tpl="pro"] .lp-d-namerow { justify-content: center; }
.lp-frame[data-tpl="pro"] .lp-d-name { font-size: 34px; letter-spacing: -.025em; }
.lp-frame[data-tpl="pro"] .lp-d-specs { justify-content: center; gap: 30px; }
.lp-frame[data-tpl="pro"] .lp-d-mint {
  max-width: 460px; margin-left: auto; margin-right: auto;
}
.lp-frame[data-tpl="pro"] .lp-d-links { justify-content: center; }
.lp-frame[data-tpl="pro"] .lp-d-mintbtn { border-radius: 999px; }

/* ---- WTF: loud, degen, glitch ---- */
.lp-frame[data-tpl="wtf"] {
  background:
    radial-gradient(120% 80% at 10% -10%, color-mix(in srgb, var(--lp-accent) 26%, transparent) 0%, transparent 55%),
    radial-gradient(120% 80% at 110% 10%, color-mix(in srgb, var(--lp-accent-2) 22%, transparent) 0%, transparent 55%),
    var(--void);
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 1px var(--lp-accent) inset, 0 24px 70px var(--shadow-card);
}
.lp-d-marquee {
  overflow: hidden; white-space: nowrap;
  background: var(--lp-accent); color: var(--lp-on-accent);
  border-bottom: 2px solid var(--void);
  padding: 6px 0;
}
.lp-d-marquee-track {
  display: inline-flex; white-space: nowrap;
  font-weight: 900; font-size: 13px; letter-spacing: .06em;
  animation: lp-marquee 14s linear infinite;
}
.lp-d-marquee-track span { padding-right: 16px; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.lp-frame[data-tpl="wtf"] .lp-d-name {
  font-style: italic; text-transform: uppercase; letter-spacing: -.03em;
  transform: skewX(-6deg); transform-origin: left center;
  color: var(--ink-hi);
  text-shadow: 3px 3px 0 var(--lp-accent), 6px 6px 0 color-mix(in srgb, var(--lp-accent-2) 70%, transparent);
  position: relative;
}
/* glitch layers off the data-glitch attribute */
.lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::before,
.lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute; left: 0; top: 0; width: 100%;
  overflow: hidden; pointer-events: none;
}
.lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::before {
  color: var(--lp-accent-2); clip-path: inset(0 0 62% 0);
  animation: lp-glitch-a 2.1s steps(2) infinite;
}
.lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::after {
  color: var(--lp-accent); clip-path: inset(58% 0 0 0);
  animation: lp-glitch-b 1.7s steps(2) infinite;
}
@keyframes lp-glitch-a { 0%,100%{transform:translate(0,0);} 40%{transform:translate(-2px,-1px);} 60%{transform:translate(2px,1px);} }
@keyframes lp-glitch-b { 0%,100%{transform:translate(0,0);} 45%{transform:translate(2px,1px);} 65%{transform:translate(-2px,-1px);} }

.lp-frame[data-tpl="wtf"] .lp-d-mint {
  background: color-mix(in srgb, var(--void) 70%, var(--panel));
  border-color: var(--lp-accent);
  box-shadow: 0 0 24px -8px var(--lp-accent);
}
.lp-frame[data-tpl="wtf"] .lp-d-mintbtn {
  text-transform: uppercase; letter-spacing: .06em;
  box-shadow: 0 0 0 2px var(--void), 0 0 24px -4px var(--lp-accent);
  animation: lp-pulse 1.6s ease-in-out infinite;
}
@keyframes lp-pulse { 0%,100%{ box-shadow: 0 0 0 2px var(--void), 0 0 24px -6px var(--lp-accent); } 50%{ box-shadow: 0 0 0 2px var(--void), 0 0 34px 0 var(--lp-accent); } }
.lp-frame[data-tpl="wtf"] .lp-d-bulk-btn { background: color-mix(in srgb, var(--void) 60%, var(--panel)); }
.lp-frame[data-tpl="wtf"] .lp-d-symbol { transform: skewX(-6deg); }

/* ===========================================================================
   12 · SUCCESS OVERLAY
   ======================================================================== */
.lp-success-back {
  position: absolute; inset: 0; z-index: 40;
  background: color-mix(in srgb, var(--void) 78%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: lp-fade .2s ease;
}
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
.lp-success {
  width: 100%; max-width: 440px;
  background: var(--panel); border: 1px solid var(--p400);
  border-radius: 18px; padding: 28px 26px 24px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: lp-pop .26s cubic-bezier(.16,.8,.24,1);
}
@keyframes lp-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-success-check {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--gain); color: #04120a;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
}
.lp-success-h { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--ink-hi); }
.lp-success-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-lo); }
.lp-success-url {
  display: flex; gap: 8px; align-items: stretch;
  background: var(--well); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 8px; margin-bottom: 14px;
}
.lp-success-link {
  flex: 1; min-width: 0; display: flex; align-items: center;
  color: var(--p400); font-weight: 700; font-size: 13.5px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-left: 4px;
}
.lp-success-note {
  margin: 0 0 18px; font-size: 12px; line-height: 1.55; color: var(--ink-faint);
  background: var(--tint-weak); border-radius: 10px; padding: 11px 12px; text-align: left;
}
.lp-success-close {
  width: 100%; background: var(--p400); color: var(--on-accent);
  border: 0; border-radius: 11px; padding: 13px; cursor: pointer;
  font-size: 14px; font-weight: 800; font-family: inherit;
  transition: filter .18s ease;
}
.lp-success-close:hover { filter: brightness(1.06); }
.lp-success-close:focus-visible { outline: 2px solid var(--p600); outline-offset: 3px; }

/* ===========================================================================
   13 · RESPONSIVE — stack panes under 900px
   ======================================================================== */
@media (max-width: 900px) {
  .lp-root { grid-template-columns: 1fr; }
  .lp-designer, .lp-preview { max-height: none; }
  .lp-preview { min-height: 70vh; }
  .lp-templates, .lp-uploads { grid-template-columns: 1fr; }
  .lp-colors, .lp-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-templates { grid-template-columns: 1fr; }
  .lp-d-hero { flex-direction: column; text-align: center; align-items: center; }
  .lp-frame[data-tpl="pro"] .lp-d-art { width: 160px; height: 160px; }
  .lp-d-gallery { grid-template-columns: repeat(3, 1fr); }
  .lp-d-specs { justify-content: center; }
}

/* ===========================================================================
   14 · REDUCED MOTION — motion here is pure decoration
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lp-root *,
  .lp-d-marquee-track,
  .lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::before,
  .lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::after,
  .lp-frame[data-tpl="wtf"] .lp-d-mintbtn {
    animation: none !important;
    transition: none !important;
  }
}
.lp-reduced .lp-d-marquee-track,
.lp-reduced .lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::before,
.lp-reduced .lp-frame[data-tpl="wtf"] .lp-d-name[data-glitch]::after,
.lp-reduced .lp-d-mintbtn { animation: none !important; }

/* --- 07 · Fund the router wallet ----------------------------------------- */
.lp-fund{ display:flex; flex-direction:column; gap:12px; background:var(--panel); border:1px solid var(--hairline-2); border-radius:14px; padding:16px; }
.lp-fund-amt{ display:flex; flex-direction:column; gap:2px; }
.lp-fund-amtv{ font-size:26px; font-weight:900; color:var(--sweep); font-variant-numeric:tabular-nums; line-height:1; }
.lp-fund-amtk{ font-size:11px; color:var(--ink-lo); text-transform:uppercase; letter-spacing:.05em; }
.lp-fund-wl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lp-fund-wlk{ font-size:11px; font-weight:800; color:var(--ink-mid); text-transform:uppercase; letter-spacing:.04em; }
.lp-fund-wlv{ font-family:var(--font-num); font-size:12px; color:var(--p500); background:var(--well); border:1px solid var(--hairline); border-radius:8px; padding:5px 9px; }
.lp-fund-steps{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; color:var(--ink-mid); font-size:12.5px; }
.lp-fund-steps li{ line-height:1.35; }
.lp-fund-warn{ margin:0; font-size:11.5px; color:var(--ink-faint); line-height:1.4; }

/* ===========================================================================
   15 · WIZARD CHROME — designer as a flex column: rail / steps / nav
   ======================================================================== */
.lp-designer{
  display:flex; flex-direction:column; overflow:hidden;
  padding:22px 22px 0;
}
.lp-head{ flex:0 0 auto; }
.lp-h1{ font-size:23px; }
.lp-rail{ flex:0 0 auto; }
.lp-steps{ flex:1 1 auto; overflow:auto; padding:2px 2px 8px; margin:0 -2px; }
.lp-nav{ flex:0 0 auto; }

/* ---- PROGRESS RAIL ---- */
.lp-rail{
  margin:14px 0 6px; padding:12px 14px;
  background:var(--well); border:1px solid var(--hairline); border-radius:14px;
}
.lp-rail-top{ display:flex; align-items:baseline; gap:8px; }
.lp-rail-count{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--p400); white-space:nowrap; }
.lp-rail-sep{ color:var(--ink-faint); }
.lp-rail-title{ font-size:14px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-rail-preview{
  display:none; margin-left:auto; flex:0 0 auto;
  background:var(--raised); color:var(--ink-mid); border:1px solid var(--hairline);
  border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer;
}
.lp-rail-preview:hover{ border-color:var(--p500); color:var(--p400); }

.lp-rail-seg{ display:flex; gap:5px; margin:12px 0 10px; }
.lp-dot{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:transparent; border:0; padding:0; font-family:inherit; cursor:default; color:var(--ink-faint);
}
.lp-dot.is-reachable{ cursor:pointer; }
.lp-dot-mark{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--raised); border:1px solid var(--hairline); color:var(--ink-lo);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.lp-dot-lab{
  font-size:10px; font-weight:700; letter-spacing:.01em; line-height:1;
  color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.lp-dot.is-reachable:hover .lp-dot-mark{ border-color:var(--p500); color:var(--p400); }
.lp-dot.is-done .lp-dot-mark{ background:var(--tint); border-color:var(--p400); color:var(--p400); }
.lp-dot.is-done .lp-dot-lab{ color:var(--ink-lo); }
.lp-dot.is-current .lp-dot-mark{ background:var(--p400); border-color:var(--p400); color:var(--on-accent); transform:scale(1.08); box-shadow:0 0 0 4px var(--ring); }
.lp-dot.is-current .lp-dot-lab{ color:var(--ink-hi); font-weight:800; }
.lp-dot:focus-visible{ outline:none; }
.lp-dot:focus-visible .lp-dot-mark{ outline:2px solid var(--p500); outline-offset:2px; }

.lp-rail-bar{ height:5px; border-radius:999px; background:var(--raised); overflow:hidden; border:1px solid var(--hairline); }
.lp-rail-bar-fill{
  height:100%; border-radius:999px; width:0%;
  background:linear-gradient(90deg,var(--p400),var(--p500));
  transition:width .32s cubic-bezier(.16,.8,.24,1);
}

/* ---- STEP SLIDES ---- */
.lp-step{ display:none; }
.lp-step.is-active{ display:block; }
.lp-step .lp-sec-t:focus{ outline:none; }
.lp-root:not(.lp-reduced) .lp-step.is-active.lp-anim-r{ animation:lp-slide-r .3s cubic-bezier(.16,.8,.24,1); }
.lp-root:not(.lp-reduced) .lp-step.is-active.lp-anim-l{ animation:lp-slide-l .3s cubic-bezier(.16,.8,.24,1); }
@keyframes lp-slide-r{ from{ opacity:0; transform:translateX(22px); } to{ opacity:1; transform:none; } }
@keyframes lp-slide-l{ from{ opacity:0; transform:translateX(-22px); } to{ opacity:1; transform:none; } }
/* wizard shows the step title as the heading — the little number badge stays */
.lp-step.lp-sec{ border-top:0; padding-top:6px; }

/* ---- BACK / NEXT NAV ---- */
.lp-nav{
  display:flex; align-items:center; gap:12px;
  margin:0 -22px; padding:14px 22px;
  border-top:1px solid var(--hairline); background:var(--panel);
}
.lp-nav-back{
  flex:0 0 auto; background:var(--raised); color:var(--ink-mid);
  border:1px solid var(--hairline); border-radius:11px; padding:12px 18px;
  font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:border-color .18s ease, color .18s ease, opacity .18s ease;
}
.lp-nav-back:hover:not(:disabled){ border-color:var(--p500); color:var(--p400); }
.lp-nav-back:disabled{ opacity:.4; cursor:not-allowed; }
.lp-nav-back:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-nav-mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:right; }
.lp-nav-hint{ font-size:11.5px; font-weight:700; color:var(--loss); opacity:0; transition:opacity .18s ease; }
.lp-nav-hint.is-show{ opacity:1; }
.lp-nav-hint.is-flash{ animation:lp-shake .32s ease; }
@keyframes lp-shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.lp-nav-save{ font-size:10.5px; color:var(--ink-faint); }
.lp-nav-next{
  flex:0 0 auto; background:var(--p400); color:var(--on-accent);
  border:0; border-radius:12px; padding:13px 26px;
  font-size:14px; font-weight:800; letter-spacing:.01em; font-family:inherit; cursor:pointer;
  box-shadow:0 10px 26px -14px var(--p400);
  transition:filter .18s ease, transform .12s ease, opacity .18s ease;
}
.lp-nav-next:hover:not(:disabled){ filter:brightness(1.06); }
.lp-nav-next:active:not(:disabled){ transform:translateY(1px); }
.lp-nav-next:disabled{ opacity:.5; cursor:not-allowed; }
.lp-nav-next:focus-visible{ outline:2px solid var(--p600); outline-offset:3px; }
.lp-nav-next.is-launch{ padding-left:22px; padding-right:22px; box-shadow:0 12px 30px -12px var(--p400); }

/* ===========================================================================
   16 · CHECK SWITCH + DATETIME + SCHEDULE + MEMECOIN GATING
   ======================================================================== */
.lp-check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.lp-check-box{ position:absolute; opacity:0; width:1px; height:1px; }
.lp-check-track{
  position:relative; flex:0 0 auto; width:40px; height:23px; border-radius:999px;
  background:var(--raised); border:1px solid var(--hairline); transition:background .18s ease, border-color .18s ease;
}
.lp-check-track::after{
  content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--ink-lo); transition:transform .18s ease, background .18s ease;
}
.lp-check-box:checked + .lp-check-track{ background:var(--p400); border-color:var(--p400); }
.lp-check-box:checked + .lp-check-track::after{ transform:translateX(17px); background:var(--on-accent); }
.lp-check-box:focus-visible + .lp-check-track{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-check-lab{ font-size:13px; font-weight:700; color:var(--ink-mid); }

.lp-dt{ font-variant-numeric:tabular-nums; }
.lp-sched-row .lp-field{ position:relative; }
.lp-sched-row .lp-mini-btn{ position:absolute; top:0; right:0; }

.lp-presale-box, .lp-meme-box{
  display:flex; flex-direction:column; gap:14px;
  padding:14px; border:1px solid var(--hairline); border-radius:13px;
  background:var(--well);
  transition:opacity .2s ease;
}
.lp-presale-box.is-off, .lp-meme-box.is-off{ display:none; }

/* ---- ASSOCIATION DISCLAIMER (prominent notice) ---- */
.lp-disc{
  display:flex; flex-direction:column; gap:5px;
  padding:12px 13px; border-radius:11px;
  background:color-mix(in srgb, var(--loss) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--loss) 45%, transparent);
}
.lp-disc-h{ font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--loss); }
.lp-disc-t{ font-size:12px; line-height:1.5; color:var(--ink-mid); }

/* ===========================================================================
   17 · METADATA STEP — drop zones + parsed summary
   ======================================================================== */
.lp-drop{
  border:1.5px dashed var(--hairline-2); border-radius:13px; background:var(--well);
  transition:border-color .18s ease, background .18s ease;
}
.lp-drop.is-over{ border-color:var(--p400); background:var(--tint-weak); }
.lp-drop-inner{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px; cursor:pointer; text-align:center;
}
.lp-drop-icon{ font-size:22px; color:var(--p400); line-height:1; }
.lp-drop-txt{ font-size:12.5px; font-weight:700; color:var(--ink-lo); overflow:hidden; text-overflow:ellipsis; max-width:100%; white-space:nowrap; }
.lp-drop:focus-within{ border-color:var(--p500); }

.lp-md-summary, .lp-md-assets{ display:flex; flex-direction:column; gap:10px; }
.lp-md-card{ display:flex; flex-direction:column; gap:12px; padding:14px; border:1px solid var(--hairline); border-radius:12px; background:var(--panel); }
.lp-md-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lp-md-fn{ font-size:12.5px; font-weight:800; color:var(--ink-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-md-err{ font-size:12px; color:var(--loss); font-weight:700; }
.lp-md-stats{ display:flex; gap:24px; }
.lp-md-stat{ display:flex; flex-direction:column; gap:1px; }
.lp-md-stat-v{ font-size:20px; font-weight:900; color:var(--ink-hi); font-variant-numeric:tabular-nums; line-height:1; }
.lp-md-stat-k{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.lp-md-traits{ display:flex; flex-wrap:wrap; gap:6px; }
.lp-md-trait{ font-size:11px; font-weight:700; color:var(--p400); background:var(--tint-weak); border:1px solid var(--hairline); border-radius:999px; padding:3px 9px; }
.lp-md-first{ display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--hairline); }
.lp-md-first-lab{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.lp-md-first-nm{ font-size:13.5px; font-weight:800; color:var(--ink-hi); }
.lp-md-first-img{ display:flex; align-items:center; }
.lp-md-first-thumb{ width:52px; height:52px; border-radius:9px; object-fit:cover; border:1px solid var(--hairline); }
.lp-md-first-url{ font-size:11px; color:var(--ink-lo); font-family:var(--font-num, monospace); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.lp-md-first-attrs{ display:flex; flex-wrap:wrap; gap:6px; }
.lp-md-attr{ display:inline-flex; gap:5px; align-items:baseline; background:var(--well); border:1px solid var(--hairline); border-radius:8px; padding:4px 8px; }
.lp-md-attr-k{ font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.lp-md-attr-v{ font-size:11.5px; font-weight:700; color:var(--ink-mid); }
.lp-md-files{ display:flex; flex-direction:column; gap:4px; }
.lp-md-file{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; background:var(--well); border:1px solid var(--hairline); border-radius:8px; }
.lp-md-file-nm{ font-size:12px; color:var(--ink-mid); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-md-file-sz{ flex:0 0 auto; font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.lp-md-more{ justify-content:center; color:var(--ink-faint); font-size:11.5px; font-weight:700; }

/* ===========================================================================
   18 · MINT COST CLARITY (Fund step)
   ======================================================================== */
.lp-costs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
.lp-cost{ display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:13px; border:1px solid var(--hairline); background:var(--well); }
.lp-cost-minter{ border-color:color-mix(in srgb, var(--p400) 40%, var(--hairline)); }
.lp-cost-you{ border-color:color-mix(in srgb, var(--sweep) 40%, var(--hairline)); }
.lp-cost-k{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-lo); }
.lp-cost-v{ font-size:22px; font-weight:900; color:var(--ink-hi); font-variant-numeric:tabular-nums; line-height:1.05; }
.lp-cost-minter .lp-cost-v{ color:var(--p400); }
.lp-cost-you .lp-cost-v{ color:var(--sweep); }
.lp-cost-sub{ font-size:11px; color:var(--ink-faint); line-height:1.4; }

/* ===========================================================================
   19 · COUNTDOWN + drop-page schedule bits
   ======================================================================== */
.lp-cd{ margin:14px 0 4px; }
.lp-cd-lab{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--lp-accent, var(--p400)); text-align:center; margin-bottom:8px; }
.lp-cd-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lp-cd-unit{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border-radius:11px;
  background:var(--panel); border:1px solid var(--hairline);
}
.lp-cd-n{ font-size:24px; font-weight:900; color:var(--ink-hi); font-variant-numeric:tabular-nums; line-height:1; }
.lp-cd-u{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.lp-d-phase, .lp-d-mint-lab.lp-d-phase{ color:var(--lp-accent); }
.lp-d-allow{
  margin-top:12px; padding:8px 11px; border-radius:9px;
  background:var(--tint-weak); border:1px solid var(--hairline);
  font-size:11.5px; font-weight:700; color:var(--ink-mid); text-align:center;
}
.lp-d-mintbtn.is-soon{ opacity:.7; cursor:not-allowed; filter:none; }

/* memecoin disclaimer on the drop page */
.lp-d-disc{
  margin:0 22px 6px; display:flex; flex-direction:column; gap:4px;
  padding:11px 12px; border-radius:11px;
  background:color-mix(in srgb, var(--loss) 12%, var(--panel));
  border:1px solid color-mix(in srgb, var(--loss) 42%, transparent);
}
.lp-d-disc-h{ font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--loss); }
.lp-d-disc-t{ font-size:11.5px; line-height:1.5; color:var(--ink-mid); }
.lp-frame[data-tpl="pro"] .lp-d-disc{ max-width:460px; margin-left:auto; margin-right:auto; }

/* ===========================================================================
   20 · DEVICE-FRAME PREVIEWS (desktop browser + mobile phone)
   ======================================================================== */
.lp-view-toggle{ margin-left:auto; display:inline-flex; background:var(--well); border:1px solid var(--hairline); border-radius:9px; padding:2px; gap:2px; }
.lp-view-btn{
  background:transparent; color:var(--ink-lo); border:0; border-radius:7px;
  padding:5px 11px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.lp-view-btn:hover{ color:var(--ink-hi); }
.lp-view-btn.is-sel{ background:var(--p400); color:var(--on-accent); }
.lp-view-btn:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }

.lp-devices{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; align-items:flex-start; }
.lp-devices[data-view="desktop"] .lp-dev-mobile{ display:none; }
.lp-devices[data-view="mobile"] .lp-dev-desktop{ display:none; }
.lp-dev{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.lp-dev-desktop{ flex:1 1 460px; max-width:820px; }
.lp-dev-mobile{ flex:0 0 auto; }
.lp-dev-label{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); text-align:center; }

/* desktop browser window */
.lp-win{ border:1px solid var(--hairline-2); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 24px 64px var(--shadow-card); }
.lp-win-chrome{ display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--raised); border-bottom:1px solid var(--hairline); }
.lp-win-dots{ display:flex; gap:6px; flex:0 0 auto; }
.lp-win-dot{ width:11px; height:11px; border-radius:50%; background:var(--hairline-2); }
.lp-win-r{ background:#FF5F57; } .lp-win-y{ background:#FEBC2E; } .lp-win-g{ background:#28C840; }
.lp-win-addr{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px; background:var(--well); border:1px solid var(--hairline); border-radius:8px; padding:5px 11px; }
.lp-win-lock{ font-size:10px; flex:0 0 auto; opacity:.7; }
.lp-win-url{ font-size:12px; color:var(--ink-lo); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-win-vp{ background:var(--well); }

/* mobile phone */
.lp-phone{ position:relative; width:330px; max-width:78vw; padding:12px; border-radius:38px; background:linear-gradient(160deg, var(--raised), var(--panel)); border:1px solid var(--hairline-2); box-shadow:0 24px 64px var(--shadow-card); }
.lp-phone-notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:120px; height:20px; border-radius:0 0 14px 14px; background:var(--void); z-index:2; }
.lp-phone-screen{ border-radius:28px; overflow:hidden; background:var(--well); border:1px solid var(--hairline); max-height:640px; overflow-y:auto; }

/* frame inside a device: fill it, drop its own outer chrome */
.lp-dev .lp-frame{ max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; }
.lp-dev .lp-frame[data-tpl="wtf"]{ box-shadow:0 0 0 1px var(--lp-accent) inset; }

/* mobile-width drop reflow (the phone frame is narrow) */
.lp-frame-mobile .lp-d-hero{ flex-direction:column; text-align:center; align-items:center; gap:14px; padding:18px; }
.lp-frame-mobile[data-tpl="pro"] .lp-d-hero{ flex-direction:column-reverse; }
.lp-frame-mobile .lp-d-name{ font-size:22px; }
.lp-frame-mobile .lp-d-namerow{ justify-content:center; }
.lp-frame-mobile .lp-d-specs{ justify-content:center; gap:16px; }
.lp-frame-mobile .lp-d-art{ width:120px; height:120px; }
.lp-frame-mobile .lp-d-gallery{ grid-template-columns:repeat(2,1fr); padding:0 16px 6px; }
.lp-frame-mobile .lp-d-mint{ margin:14px 16px 16px; padding:15px; }
.lp-frame-mobile .lp-d-bulk{ grid-template-columns:repeat(3,1fr); }
.lp-frame-mobile .lp-d-disc{ margin:0 16px 6px; }
.lp-frame-mobile .lp-d-links{ padding:0 16px 6px; justify-content:center; }
.lp-frame-mobile .lp-cd-n{ font-size:20px; }

/* ===========================================================================
   21 · REVIEW SUMMARY (step 10)
   ======================================================================== */
.lp-review{ display:flex; flex-direction:column; gap:16px; }
.lp-rv-summary{ display:flex; flex-direction:column; border:1px solid var(--hairline); border-radius:13px; overflow:hidden; background:var(--well); }
.lp-rv-row{ display:grid; grid-template-columns:120px 1fr auto; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--hairline); }
.lp-rv-row:last-child{ border-bottom:0; }
.lp-rv-k{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.lp-rv-v{ min-width:0; font-size:13px; font-weight:700; color:var(--ink-hi); overflow-wrap:anywhere; }
.lp-rv-edit{ flex:0 0 auto; background:transparent; border:1px solid var(--hairline); color:var(--p400); border-radius:8px; padding:5px 12px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:border-color .16s ease, background .16s ease; }
.lp-rv-edit:hover{ border-color:var(--p400); background:var(--tint-weak); }
.lp-rv-edit:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-rv-colors{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lp-rv-sw{ width:16px; height:16px; border-radius:5px; border:1px solid var(--hairline-2); flex:0 0 auto; }
.lp-rv-cx{ font-size:12px; font-family:var(--font-num, monospace); color:var(--ink-lo); }
.lp-rv-assets{ display:flex; gap:10px; flex-wrap:wrap; }
.lp-rv-asset{ display:flex; align-items:center; gap:6px; }
.lp-rv-asset-thumb{ width:30px; height:30px; border-radius:7px; overflow:hidden; border:1px solid var(--hairline); background:var(--panel); display:block; flex:0 0 auto; }
.lp-rv-asset-thumb.is-empty{ background:repeating-linear-gradient(45deg, var(--hairline) 0 6px, transparent 6px 12px), var(--panel); }
.lp-rv-asset-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-rv-asset-lab{ font-size:11px; font-weight:700; color:var(--ink-lo); }
.lp-rv-tiers{ display:flex; flex-wrap:wrap; gap:6px; }
.lp-rv-tier{ display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--hairline); border-radius:8px; padding:4px 9px; }
.lp-rv-tq{ font-size:12px; font-weight:900; color:var(--ink-hi); font-variant-numeric:tabular-nums; }
.lp-rv-tp{ font-size:11.5px; font-weight:700; color:var(--ink-lo); font-variant-numeric:tabular-nums; }
.lp-rv-to{ font-size:10px; font-weight:800; color:var(--on-accent); background:var(--sweep); border-radius:5px; padding:1px 5px; }

.lp-rv-explain{ padding:15px 16px; border:1px solid var(--hairline); border-radius:13px; background:var(--tint-weak); }
.lp-rv-exh{ margin:0 0 8px; font-size:13px; font-weight:800; color:var(--ink-hi); }
.lp-rv-steps{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.lp-rv-steps li{ font-size:12.5px; line-height:1.4; color:var(--ink-mid); }
.lp-rv-note{ margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink-faint); }

/* ===========================================================================
   22 · GETGEMS-STYLE COLLECTION PREVIEW (success overlay)
   ======================================================================== */
.lp-cp-host{ margin:2px 0 16px; }
.lp-cp{ --lp-accent:var(--p400); --lp-accent-2:var(--sweep); --lp-on-accent:#fff; text-align:left; }
.lp-cp-tag{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; text-align:center; }
.lp-cp-frame{ border:1px solid var(--hairline); border-radius:16px; overflow:hidden; background:var(--panel); box-shadow:0 12px 40px var(--shadow-card); }
.lp-cp-banner{ height:96px; overflow:hidden; }
.lp-cp-banner-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-cp-banner.is-grad{ background:linear-gradient(120deg, var(--lp-accent), var(--lp-accent-2)); }
.lp-cp-avatar{ width:72px; height:72px; border-radius:20px; margin:-38px 0 0 18px; overflow:hidden; border:3px solid var(--panel); background:var(--well); position:relative; box-shadow:0 8px 20px var(--shadow-card); }
.lp-cp-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-cp-avatar.is-empty{ background:linear-gradient(135deg, var(--lp-accent), var(--lp-accent-2)); display:flex; align-items:center; justify-content:center; }
.lp-cp-avatar-ph{ font-size:26px; font-weight:900; color:#fff; opacity:.8; }
.lp-cp-idrow{ display:flex; align-items:center; gap:9px; padding:12px 18px 0; flex-wrap:wrap; }
.lp-cp-name{ margin:0; font-size:19px; font-weight:900; color:var(--ink-hi); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:7px; }
.lp-cp-tick{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--lp-accent); color:var(--lp-on-accent); font-size:11px; font-weight:900; }
.lp-cp-sym{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--lp-accent); background:var(--tint-weak); border:1px solid var(--hairline); border-radius:7px; padding:3px 8px; }
.lp-cp-tag2{ margin:6px 18px 0; font-size:12.5px; color:var(--ink-lo); line-height:1.4; }
.lp-cp-live{ margin:10px 18px 0; font-size:11.5px; font-weight:800; color:var(--gain); letter-spacing:.02em; }
.lp-cp-cd{ margin:12px 18px 2px; }
.lp-cp-cd .lp-cd-row{ grid-template-columns:repeat(4,1fr); }
.lp-cp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px 18px 2px; }
.lp-cp-stat{ display:flex; flex-direction:column; gap:2px; }
.lp-cp-stat-v{ font-size:16px; font-weight:900; color:var(--ink-hi); font-variant-numeric:tabular-nums; line-height:1; }
.lp-cp-stat-k{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
.lp-cp-meme{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 18px 0; padding:10px 12px; background:color-mix(in srgb, var(--loss) 10%, var(--panel)); border:1px solid color-mix(in srgb, var(--loss) 38%, transparent); border-radius:11px; }
.lp-cp-token{ flex:0 0 auto; font-size:11.5px; font-weight:800; color:var(--lp-accent); background:var(--tint-weak); border:1px solid var(--hairline); border-radius:999px; padding:4px 11px; }
.lp-cp-disc{ font-size:10.5px; line-height:1.45; color:var(--ink-lo); }
.lp-cp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px 18px 18px; }
.lp-cp-item{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--well); border:1px solid var(--hairline); }
.lp-cp-item-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-cp-item.is-empty{ background:repeating-linear-gradient(45deg, var(--hairline) 0 8px, transparent 8px 16px), var(--well); }
.lp-cp-item-id{ position:absolute; left:5px; bottom:5px; font-size:9.5px; font-weight:800; color:#fff; background:rgba(0,0,0,.55); border-radius:5px; padding:1px 5px; font-variant-numeric:tabular-nums; }

/* success overlay: viewport-fixed + scrollable (it now holds a full preview) */
.lp-success-back{ position:fixed; inset:0; z-index:60; align-items:flex-start; padding:32px 20px; overflow:auto; }
.lp-success{ max-width:560px; margin:auto; max-height:none; }

/* ===========================================================================
   23 · RESPONSIVE (wizard) — single column + preview reachable + 16px inputs
   ======================================================================== */
@media (max-width: 820px){
  .lp-root{ grid-template-columns:1fr; }
  .lp-designer{ overflow:visible; max-height:none; padding:16px 16px 0; }
  .lp-steps{ overflow:visible; }
  .lp-preview, .lp-designer{ max-height:none; }
  .lp-preview{ min-height:auto; }
  .lp-nav{ position:sticky; bottom:0; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .lp-rail-preview{ display:inline-block; }
  .lp-dot-lab{ display:none; }
  .lp-input, .lp-select, .lp-hex, .lp-tier-qty, .lp-tier-disc{ font-size:16px; }
  .lp-costs{ grid-template-columns:1fr; }
  .lp-devices{ gap:20px; }
  .lp-dev-desktop{ flex:1 1 100%; }
}
@media (max-width: 560px){
  .lp-rv-row{ grid-template-columns:1fr auto; }
  .lp-rv-k{ grid-column:1 / -1; }
  .lp-cp-stats{ grid-template-columns:repeat(2,1fr); }
  .lp-cp-grid{ grid-template-columns:repeat(3,1fr); }
  .lp-cd-n{ font-size:20px; }
}

/* reduced-motion: kill the wizard slide + rail transitions too */
@media (prefers-reduced-motion: reduce){
  .lp-step.is-active.lp-anim-r, .lp-step.is-active.lp-anim-l,
  .lp-rail-bar-fill, .lp-nav-hint.is-flash{ animation:none !important; transition:none !important; }
}
.lp-reduced .lp-step.is-active.lp-anim-r,
.lp-reduced .lp-step.is-active.lp-anim-l,
.lp-reduced .lp-nav-hint.is-flash{ animation:none !important; }

/* ===========================================================================
   24 · LAYOUT POLISH (A) — tighter hierarchy, on-brand pink/red, both themes
   Additive overrides layered last so they win without touching earlier rules.
   ======================================================================== */
.lp-designer{ padding:24px 24px 0; }
.lp-head{ margin-bottom:14px; }
.lp-kicker{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:var(--tint-weak); border:1px solid color-mix(in srgb, var(--p300) 34%, transparent);
  color:var(--p400); font-size:10.5px; letter-spacing:.12em;
}
:root[data-theme="dark"] .lp-kicker{ color:var(--p200); }
.lp-h1{
  font-size:24px; letter-spacing:-.025em;
  background:linear-gradient(96deg, var(--ink-hi), color-mix(in srgb, var(--p400) 60%, var(--ink-hi)));
  -webkit-background-clip:text; background-clip:text;
}
.lp-lede{ font-size:12.5px; }

/* progress rail — a touch more polish + brand-gradient fill */
.lp-rail{
  margin:8px 0 6px; padding:13px 15px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tint-weak) 60%, var(--well)), var(--well));
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.lp-rail-count{ color:var(--p400); }
:root[data-theme="dark"] .lp-rail-count{ color:var(--p200); }
.lp-rail-bar-fill{ background:linear-gradient(90deg, var(--p300), var(--p400)); box-shadow:0 0 10px -2px var(--p400); }
.lp-dot.is-current .lp-dot-mark{ background:linear-gradient(180deg, var(--p300), var(--p400)); }

/* inputs — brand focus, slightly softer radius rhythm */
.lp-input:focus{ border-color:var(--p400); box-shadow:0 0 0 3px var(--ring); }
.lp-area{ min-height:74px; resize:vertical; line-height:1.45; padding-top:10px; }

/* device-frame preview — calmer canvas, crisper chrome */
.lp-preview-scroll{ padding:24px 22px 30px; }
.lp-preview-lab{ color:var(--p400); }
:root[data-theme="dark"] .lp-preview-lab{ color:var(--p200); }
.lp-win{ border-radius:15px; box-shadow:0 30px 70px -28px var(--shadow-card), 0 2px 0 color-mix(in srgb,#fff 8%,transparent) inset; }
.lp-phone{ box-shadow:0 30px 70px -26px var(--shadow-card); }
.lp-preview-bar{ background:linear-gradient(180deg, color-mix(in srgb, var(--tint-weak) 40%, var(--panel)), var(--panel)); }

/* ===========================================================================
   25 · REFLECTIVE "DESIGN THE DROP PAGE" BUTTON (B launcher)
   ======================================================================== */
.lp-designcta{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.lp-designbtn{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:12px;
  width:100%; padding:15px 18px; border:0; border-radius:14px;
  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.01em; cursor:pointer;
  color:var(--on-accent);
  background:
    linear-gradient(180deg, color-mix(in srgb,#fff 26%, transparent) 0%, transparent 42%),
    linear-gradient(120deg, var(--p200) 0%, var(--p300) 38%, var(--p400) 100%);
  box-shadow:
    0 1px 0 color-mix(in srgb,#fff 55%, transparent) inset,
    0 -2px 6px color-mix(in srgb, var(--p700) 30%, transparent) inset,
    0 16px 34px -14px var(--p400);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.lp-designbtn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 color-mix(in srgb,#fff 60%,transparent) inset, 0 -2px 6px color-mix(in srgb,var(--p700) 30%,transparent) inset, 0 22px 44px -14px var(--p400); filter:brightness(1.03); }
.lp-designbtn:active{ transform:translateY(1px); }
.lp-designbtn:focus-visible{ outline:2px solid var(--p600); outline-offset:3px; }
.lp-designbtn-ic{ font-size:20px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.lp-designbtn-tx{ flex:1 1 auto; text-align:left; text-shadow:0 1px 1px rgba(0,0,0,.22); }
.lp-designbtn-arr{ font-size:17px; opacity:.9; transition:transform .18s ease; }
.lp-designbtn:hover .lp-designbtn-arr{ transform:translateX(3px); }
/* the moving sheen — a glossy sweep across the button */
.lp-designbtn-sheen{
  position:absolute; z-index:-1; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, color-mix(in srgb,#fff 60%,transparent), transparent);
  transform:skewX(-18deg); animation:lp-sheen 3.6s ease-in-out infinite;
}
@keyframes lp-sheen{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

.lp-design-status{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:22px; }
.lp-design-hint{ font-size:11.5px; line-height:1.45; color:var(--ink-faint); }
.lp-design-badge{
  font-size:11px; font-weight:800; color:var(--p400);
  background:var(--tint-weak); border:1px solid color-mix(in srgb,var(--p300) 40%,transparent);
  border-radius:999px; padding:4px 11px;
}
:root[data-theme="dark"] .lp-design-badge{ color:var(--p200); }

/* ===========================================================================
   26 · MOCK EXAMPLE ART (C)
   ======================================================================== */
.lp-examples{ display:flex; flex-direction:column; gap:9px; margin-top:8px; padding-top:14px; border-top:1px dashed var(--hairline); }
.lp-examples-h{ display:flex; align-items:center; gap:9px; }
.lp-examples-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sweep); background:color-mix(in srgb,var(--sweep) 14%, transparent);
  border:1px solid color-mix(in srgb,var(--sweep) 40%,transparent); border-radius:6px; padding:2px 7px;
}
.lp-ex-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.lp-ex-cell{
  position:relative; padding:0; border:1px solid var(--hairline); border-radius:12px; overflow:hidden;
  background:var(--well); cursor:pointer; font-family:inherit;
  transition:border-color .16s ease, transform .12s ease, box-shadow .18s ease;
}
.lp-ex-cell:hover{ border-color:var(--p400); transform:translateY(-2px); box-shadow:0 12px 24px -14px var(--p400); }
.lp-ex-cell:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-ex-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.lp-ex-badge{
  position:absolute; top:6px; left:6px; z-index:2;
  font-size:8.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:rgba(0,0,0,.55); border-radius:5px; padding:2px 6px;
}
.lp-ex-nm{
  display:block; padding:6px 8px; font-size:10.5px; font-weight:800; color:var(--ink-mid);
  text-align:center; border-top:1px solid var(--hairline); background:var(--panel);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===========================================================================
   27 · METADATA MODE TOGGLE + GUIDED GENERATOR (D)
   ======================================================================== */
.lp-meta-modeseg{ align-self:stretch; }
.lp-meta-modeseg .lp-seg-btn{ flex:1 1 0; text-align:center; padding:9px 12px; }
.lp-meta-generate{ display:flex; flex-direction:column; gap:14px; }

.lp-gen-attrs, .lp-gen-links{ display:flex; flex-direction:column; gap:7px; }
.lp-gen-arow{ display:grid; grid-template-columns:1fr 1fr 30px; gap:8px; align-items:center; }
.lp-gen-lrow{ display:grid; grid-template-columns:1fr 30px; gap:8px; align-items:center; }
.lp-gen-arow .lp-input, .lp-gen-lrow .lp-input{ padding:8px 10px; font-size:13px; }

.lp-gen-valid{ display:flex; flex-direction:column; gap:8px; }
.lp-gen-checks{ display:flex; flex-wrap:wrap; gap:6px; }
.lp-gen-check{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  border-radius:999px; padding:4px 10px 4px 6px; border:1px solid var(--hairline);
}
.lp-gen-check-mk{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; font-size:10px; font-weight:900; }
.lp-gen-check.is-ok{ color:var(--gain); background:color-mix(in srgb,var(--gain) 12%,transparent); border-color:color-mix(in srgb,var(--gain) 40%,transparent); }
.lp-gen-check.is-ok .lp-gen-check-mk{ background:var(--gain); color:#04120a; }
.lp-gen-check.is-bad{ color:var(--ink-lo); }
.lp-gen-check.is-bad .lp-gen-check-mk{ background:var(--raised); color:var(--ink-faint); border:1px solid var(--hairline-2); }
.lp-gen-status{ font-size:12px; font-weight:700; color:var(--ink-lo); }
.lp-gen-status.is-ok{ color:var(--gain); }

.lp-gen-json{ display:flex; flex-direction:column; gap:10px; }
.lp-gen-jcard{ border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:var(--well); }
.lp-gen-jtop{ display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--panel); border-bottom:1px solid var(--hairline); }
.lp-gen-jt{ font-size:12px; font-weight:800; color:var(--ink-hi); }
.lp-gen-jtag{ font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--p400); background:var(--tint-weak); border:1px solid var(--hairline); border-radius:6px; padding:2px 7px; }
:root[data-theme="dark"] .lp-gen-jtag{ color:var(--p200); }
.lp-gen-jtop .lp-mini-btn{ margin-left:auto; }
.lp-gen-jtop .lp-mini-btn.is-ok{ color:var(--gain); border-color:var(--gain); }
.lp-gen-pre{
  margin:0; padding:12px 13px; max-height:220px; overflow:auto;
  font-family:var(--font-num, ui-monospace, monospace); font-size:11.5px; line-height:1.5;
  color:var(--ink-mid); white-space:pre; tab-size:2;
}
.lp-gen-note{ margin:0; font-size:11.5px; line-height:1.55; color:var(--ink-faint); }

/* ===========================================================================
   28 · DROP-PAGE DESIGNER MODAL (B)
   ======================================================================== */
.lp-dz-back{
  position:fixed; inset:0; z-index:70;
  background:color-mix(in srgb, var(--void) 74%, transparent);
  display:flex; align-items:flex-start; justify-content:center;
  padding:26px 18px; overflow:auto; animation:lp-fade .18s ease;
}
.lp-dz{
  width:100%; max-width:1000px; margin:auto;
  background:var(--panel); border:1px solid color-mix(in srgb,var(--p400) 34%,var(--hairline-2));
  border-radius:18px; overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6), 0 0 0 1px var(--hairline) inset;
  animation:lp-pop .24s cubic-bezier(.16,.8,.24,1);
  display:flex; flex-direction:column; max-height:calc(100vh - 52px);
}
.lp-dz-head{ display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--hairline); background:linear-gradient(180deg, var(--tint-weak), transparent); }
.lp-dz-htext{ flex:1 1 auto; min-width:0; }
.lp-dz-h{ margin:0; font-size:19px; font-weight:900; letter-spacing:-.01em; color:var(--ink-hi); }
.lp-dz-sub{ margin:4px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-lo); }
.lp-dz-x{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:var(--raised); border:1px solid var(--hairline); color:var(--ink-lo);
  font-size:22px; line-height:1; font-family:inherit; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.lp-dz-x:hover{ color:var(--loss); border-color:var(--loss); }
.lp-dz-x:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }

.lp-dz-presets{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--hairline); }
.lp-dz-plab{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.lp-dz-preset{
  background:var(--well); color:var(--ink-mid); border:1px solid var(--hairline-2);
  border-radius:9px; padding:7px 13px; font-size:12px; font-weight:800; font-family:inherit; cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.lp-dz-preset:hover{ border-color:var(--p400); color:var(--p400); background:var(--tint-weak); }
.lp-dz-preset:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-dz-reset{
  margin-left:auto; background:transparent; color:var(--ink-lo); border:1px solid var(--hairline);
  border-radius:9px; padding:7px 12px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:color .16s ease, border-color .16s ease;
}
.lp-dz-reset:hover{ color:var(--loss); border-color:var(--loss); }
.lp-dz-reset:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }

.lp-dz-body{ flex:1 1 auto; min-height:0; overflow:auto; display:grid; grid-template-columns:1fr 340px; gap:0; }
.lp-dz-left{ padding:16px 18px; display:flex; flex-direction:column; gap:16px; border-right:1px solid var(--hairline); min-width:0; }
.lp-dz-right{ padding:16px 18px; display:flex; flex-direction:column; gap:9px; background:var(--well); min-width:0; }

.lp-dz-palette{ display:flex; flex-direction:column; gap:8px; }
.lp-dz-palgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lp-dz-add{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--well); border:1px solid var(--hairline); border-radius:11px; padding:10px 6px;
  cursor:pointer; font-family:inherit; color:var(--ink-mid);
  transition:border-color .16s ease, transform .12s ease, background .16s ease, box-shadow .18s ease;
}
.lp-dz-add:hover{ border-color:var(--p400); transform:translateY(-1px); background:var(--tint-weak); box-shadow:0 8px 18px -12px var(--p400); }
.lp-dz-add:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-dz-add-ic{ font-size:18px; line-height:1; }
.lp-dz-add-nm{ font-size:10px; font-weight:700; text-align:center; line-height:1.15; color:var(--ink-lo); }

.lp-dz-canwrap{ display:flex; flex-direction:column; gap:8px; }
.lp-dz-canvas{ display:flex; flex-direction:column; gap:7px; }
.lp-dz-empty{ padding:22px 12px; text-align:center; font-size:12px; color:var(--ink-faint); border:1.5px dashed var(--hairline-2); border-radius:12px; background:var(--well); }
.lp-dz-row{
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  background:var(--well); border:1px solid var(--hairline); border-radius:11px;
  cursor:pointer; user-select:none;
  transition:border-color .14s ease, box-shadow .16s ease, background .14s ease, transform .06s ease;
}
.lp-dz-row:hover{ border-color:var(--hairline-2); background:var(--hover); }
.lp-dz-row.is-sel{ border-color:var(--p400); background:var(--tint-weak); box-shadow:0 0 0 1px var(--p400) inset; }
.lp-dz-row.is-dragging{ border-color:var(--p400); box-shadow:0 14px 30px -12px var(--p400); transform:scale(1.015); opacity:.97; }
.lp-dz-grip{ flex:0 0 auto; color:var(--ink-faint); font-size:15px; line-height:1; cursor:grab; touch-action:none; padding:2px 2px; }
.lp-dz-grip:active{ cursor:grabbing; }
.lp-dz-row-ic{ flex:0 0 auto; font-size:15px; line-height:1; }
.lp-dz-row-nm{ flex:1 1 auto; min-width:0; font-size:13px; font-weight:800; color:var(--ink-hi); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-dz-row-acts{ flex:0 0 auto; display:flex; gap:4px; }
.lp-dz-rowbtn{
  width:26px; height:26px; border-radius:7px; background:var(--raised); color:var(--ink-lo);
  border:1px solid var(--hairline); font-size:13px; line-height:1; font-family:inherit; cursor:pointer;
  transition:color .14s ease, border-color .14s ease;
}
.lp-dz-rowbtn:hover:not(:disabled){ color:var(--p400); border-color:var(--p400); }
.lp-dz-rowbtn:disabled{ opacity:.35; cursor:not-allowed; }
.lp-dz-rowbtn:focus-visible{ outline:2px solid var(--p500); outline-offset:1px; }
.lp-dz-del:hover:not(:disabled){ color:var(--loss); border-color:var(--loss); }

.lp-dz-settings{ border:1px solid var(--hairline); border-radius:12px; padding:13px; background:var(--well); display:flex; flex-direction:column; gap:11px; }
.lp-dz-nosel{ font-size:12px; color:var(--ink-faint); text-align:center; padding:6px; }
.lp-dz-settitle{ font-size:12.5px; font-weight:800; color:var(--p400); letter-spacing:.01em; }
:root[data-theme="dark"] .lp-dz-settitle{ color:var(--p200); }
.lp-dz-fld{ display:flex; flex-direction:column; gap:6px; }
.lp-dz-fld-l{ font-size:11.5px; font-weight:700; color:var(--ink-mid); }
.lp-dz-colorrow{ display:flex; align-items:center; gap:8px; }

.lp-dz-preview{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--hairline); border-radius:14px; background:var(--panel); box-shadow:0 20px 44px -26px var(--shadow-card); }
.lp-dz-preview .lp-frame{ max-width:none; margin:0; border:0; border-radius:14px; box-shadow:none; }

.lp-dz-foot{ flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:13px 20px; border-top:1px solid var(--hairline); background:var(--panel); }
.lp-dz-note{ flex:1 1 auto; margin:0; font-size:11.5px; line-height:1.4; color:var(--ink-faint); }
.lp-dz-actions{ flex:0 0 auto; display:flex; gap:9px; }
.lp-dz-cancel{ background:var(--raised); color:var(--ink-mid); border:1px solid var(--hairline); border-radius:11px; padding:11px 18px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:color .16s ease, border-color .16s ease; }
.lp-dz-cancel:hover{ color:var(--ink-hi); border-color:var(--hairline-2); }
.lp-dz-cancel:focus-visible{ outline:2px solid var(--p500); outline-offset:2px; }
.lp-dz-done{ background:var(--p400); color:var(--on-accent); border:0; border-radius:11px; padding:11px 24px; font-size:13.5px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 10px 24px -12px var(--p400); transition:filter .16s ease, transform .1s ease; }
.lp-dz-done:hover{ filter:brightness(1.06); }
.lp-dz-done:active{ transform:translateY(1px); }
.lp-dz-done:focus-visible{ outline:2px solid var(--p600); outline-offset:3px; }

@media (max-width:760px){
  .lp-dz-body{ grid-template-columns:1fr; }
  .lp-dz-left{ border-right:0; border-bottom:1px solid var(--hairline); }
  .lp-dz-palgrid{ grid-template-columns:repeat(4,1fr); }
  .lp-dz-right{ min-height:360px; }
}

/* ===========================================================================
   29 · DROP-PAGE BLOCK RENDERING (custom layout on the drop)
   ======================================================================== */
.lp-d-block{ position:relative; }
.lp-d-block.has-bg{ padding:10px 0; }
.lp-d-heroimg{ width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--well); display:flex; align-items:center; justify-content:center; }
.lp-d-heroimg-img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-d-heroimg.is-empty{ background:repeating-linear-gradient(45deg, var(--hairline) 0 12px, transparent 12px 24px), var(--well); }
.lp-d-heroimg .lp-d-tile-ph{ font-size:15px; font-weight:800; color:var(--ink-faint); }
.lp-d-titleblk{ padding:20px 22px 6px; }
.lp-d-titleblk.is-center{ text-align:center; }
.lp-d-titleblk.is-center .lp-d-namerow{ justify-content:center; }
.lp-d-titleblk.is-center .lp-d-specs{ justify-content:center; }
.lp-d-galleryblk{ padding-top:8px; }
.lp-d-descblk{ padding:6px 22px 10px; }
.lp-d-desctext{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-lo); }
.lp-d-divider{ display:flex; align-items:center; justify-content:center; height:1px; margin:14px 22px; background:var(--hairline); }
.lp-d-divider-dot{ width:7px; height:7px; border-radius:50%; background:var(--lp-accent, var(--p400)); box-shadow:0 0 10px -1px var(--lp-accent, var(--p400)); }
.lp-d-livebar{ display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 22px; padding:11px; border-radius:11px; background:color-mix(in srgb, var(--gain) 12%, var(--panel)); border:1px solid color-mix(in srgb,var(--gain) 38%,transparent); font-size:12.5px; font-weight:800; color:var(--gain); }
.lp-d-livebar-dot{ width:8px; height:8px; border-radius:50%; background:var(--gain); box-shadow:0 0 8px var(--gain); }
/* mobile frame paddings for custom blocks */
.lp-frame-mobile .lp-d-titleblk{ padding:16px 16px 4px; text-align:center; }
.lp-frame-mobile .lp-d-titleblk .lp-d-namerow{ justify-content:center; }
.lp-frame-mobile .lp-d-titleblk .lp-d-specs{ justify-content:center; }
.lp-frame-mobile .lp-d-descblk{ padding:6px 16px 10px; }
.lp-frame-mobile .lp-d-divider, .lp-frame-mobile .lp-d-livebar{ margin-left:16px; margin-right:16px; }

/* ===========================================================================
   30 · POLISH + DESIGNER — reduced motion + narrow screens
   ======================================================================== */
@media (max-width:820px){
  .lp-designer{ padding:16px 16px 0; }
  .lp-ex-grid{ grid-template-columns:repeat(3,1fr); }
  .lp-gen-arow{ grid-template-columns:1fr 1fr 28px; }
}
@media (max-width:560px){
  .lp-ex-grid{ grid-template-columns:repeat(2,1fr); }
  .lp-dz-palgrid{ grid-template-columns:repeat(3,1fr); }
}
@media (prefers-reduced-motion: reduce){
  .lp-designbtn-sheen{ animation:none !important; display:none; }
  .lp-dz, .lp-dz-back{ animation:none !important; }
  .lp-dz-row, .lp-dz-add, .lp-ex-cell, .lp-designbtn{ transition:none !important; }
}
.lp-reduced .lp-designbtn-sheen{ animation:none !important; display:none; }
.lp-reduced .lp-dz, .lp-reduced .lp-dz-back{ animation:none !important; }