/* Stitchist GUI — themed wizard + shared components.
   Every colour flows from the :root tokens below: LIGHT (default) is a clean
   white professional workspace, DARK restores the original purple-glass
   gradient. Fonts (Plus Jakarta Sans) are bundled locally so nothing is
   fetched from the network — the app stays fully offline. */

/* ----------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* --------------------------------------------------------------- tokens */
/* One semantic token set drives BOTH themes. LIGHT (the default) is a clean,
   professional white workspace; DARK ([data-theme="dark"], via Settings) is
   the original purple-glass studio. --ink-rgb / --track-rgb are raw RGB
   triplets: alpha washes built from them (hovers, panels, hairlines) light up
   in dark mode and grey down in light mode from the SAME rules. */
:root {
  color-scheme: light;
  --accent: #4f3bf6;
  --ink-rgb: 26, 31, 54;              /* text/wash base — dark slate */
  --track-rgb: 62, 70, 100;           /* recessed tracks (segmented controls, tab bar) */
  --ink: #1a1f36;
  --ink-2: rgba(26, 31, 54, 0.72);
  --ink-3: rgba(26, 31, 54, 0.52);
  --app-bg: #f4f5f8;
  --card: #ffffff;
  --card-line: rgba(26, 31, 54, 0.14);
  --card-shadow: 0 1px 2px rgba(20, 24, 50, 0.05), 0 10px 30px rgba(20, 24, 50, 0.06);
  --inset: rgba(26, 31, 54, 0.05);
  --inset-line: rgba(26, 31, 54, 0.12);
  --field: #ffffff;
  --field-line: rgba(26, 31, 54, 0.22);
  --field-focus: var(--accent);
  --btn-hi-bg: var(--accent);         /* active chips / primary buttons */
  --btn-hi-ink: #ffffff;
  --sel-ring: var(--accent);          /* selected-card ring / selected-row border */
  --menu-bg: #ffffff;                 /* dropdown menus */
  --pill-bg: rgba(255, 255, 255, 0.96);  /* floating pills, toolbars-over-canvas, toast */
  --modal-bg: #ffffff;
  --overlay: rgba(30, 34, 60, 0.35);  /* modal / busy backdrops */
  --paper: #ffffff;                   /* artwork previews & thumbnails */
  --mark-bg: var(--accent);           /* the brand mark chip (white glyph on it) */
  --focus-ring: var(--accent);
  --scroll-thumb: rgba(26, 31, 54, 0.28);
  --shadow-menu: 0 12px 32px rgba(20, 24, 50, 0.16);
  --shadow-pill: 0 8px 24px rgba(20, 24, 50, 0.14);
  --shadow-pop: 0 20px 48px rgba(20, 24, 50, 0.2);
  --warn: #a86a00;
  --bad: #d13c4b;
  --ok: #148a52;
  --rail-line: rgba(26, 31, 54, 0.18);
  --rail-line-on: var(--accent);
  --rail-dot-on: var(--accent);
  --rail-glow: rgba(79, 59, 246, 0.22);
  --strip: rgba(26, 31, 54, 0.04);
  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231a1f36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  /* ---- motion system: every animation in the app uses these three durations and
     two easings, so the whole product moves with one voice. --dur-1 = micro feedback
     (hover, press), --dur-2 = small surfaces (menus, toasts, chips, floating bars),
     --dur-3 = large surfaces (modals, panels, steps). */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.45, 0, .25, 1);
  --dur-1: .14s;
  --dur-2: .22s;
  --dur-3: .34s;
  --tr: transform var(--dur-1) var(--ease-out), background var(--dur-2) ease,
        color var(--dur-2) ease, box-shadow var(--dur-2) ease,
        border-color var(--dur-2) ease, opacity var(--dur-2) ease;
}
/* the original purple-glass studio, selectable in Settings → Appearance */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink-rgb: 255, 255, 255;
  --track-rgb: 0, 0, 0;
  --ink: #ffffff;
  --ink-2: rgba(var(--ink-rgb), 0.72);
  --ink-3: rgba(var(--ink-rgb), 0.55);
  /* one backdrop gradient shared by the wizard shell, the Digitizer and (as a base)
     the projects page — so every surface reads as the same product */
  --app-bg: linear-gradient(135deg, #2a1d63 0%, #2b3a86 55%, #1f5d97 100%);
  --card: rgba(var(--ink-rgb), 0.12);
  --card-line: rgba(var(--ink-rgb), 0.22);
  --card-shadow: none;
  --inset: rgba(var(--ink-rgb), 0.08);
  --inset-line: rgba(var(--ink-rgb), 0.16);
  --field: rgba(var(--ink-rgb), 0.10);
  --field-line: rgba(var(--ink-rgb), 0.25);
  --field-focus: rgba(var(--ink-rgb), 0.6);
  --btn-hi-bg: #ffffff;
  --btn-hi-ink: var(--accent);
  --sel-ring: #ffffff;
  --menu-bg: rgba(24, 16, 55, 0.97);
  --pill-bg: rgba(20, 12, 48, 0.9);
  --modal-bg: rgba(36, 24, 82, 0.94);
  --overlay: rgba(10, 6, 30, 0.55);
  --paper: rgba(var(--ink-rgb), 0.92);
  --mark-bg: rgba(var(--ink-rgb), 0.2);
  --focus-ring: #ffffff;
  --scroll-thumb: rgba(var(--ink-rgb), 0.25);
  --shadow-menu: 0 14px 38px rgba(0, 0, 0, 0.5);
  --shadow-pill: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 24px 64px rgba(10, 5, 30, 0.55);
  --warn: #FFD66B;
  --bad: #FF8F9A;
  --ok: #7CFCB4;
  --rail-line: rgba(var(--ink-rgb), 0.25);
  --rail-line-on: rgba(var(--ink-rgb), 0.7);
  --rail-dot-on: #ffffff;
  --rail-glow: rgba(var(--ink-rgb), 0.28);
  --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  --pj-bg: radial-gradient(1100px 560px at 80% -12%, rgba(120, 96, 255, 0.30), transparent 62%),
           linear-gradient(135deg, #2a1d63 0%, #2b3a86 55%, #1f5d97 100%);
  --strip: rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }

html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  /* shared app backdrop — identical to the Digitizer (.mode-digitizer #digitizer-root)
     so the wizard and editor read as one product */
  background: var(--app-bg);
  background-attachment: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px 56px;
}

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* shared entrance keyframes (paired with the motion tokens above) */
@keyframes menuIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes slideUpIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ----------------------------------------------------------------- shell */
.shell {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.logo { display: flex; align-items: center; gap: 9px; color: var(--ink); min-width: 0; }
.logo .mark {
  width: 26px; height: 26px; border-radius: 8px; background: var(--mark-bg);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.logo .word { font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.logo .word b { font-weight: 800; }
.logo .word span { font-weight: 400; opacity: 0.85; }
.logo .tag {
  margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------- app header */
/* One glass bar: brand + mode tabs + project actions, with the step rail below. */
.appbar {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  padding: 13px 16px 11px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 13px;
}
.appbar-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appbar-actions { margin-left: auto; display: flex; gap: 7px; }

/* top-level mode tabs (shared by the wizard shell and the Digitizer's own chrome) */
.topnav {
  display: flex; gap: 4px; padding: 4px; border-radius: 13px;
  background: rgba(var(--track-rgb), 0.16); border: 1px solid var(--card-line);
}
.topnav-tab {
  padding: 7px 14px; border-radius: 10px; background: transparent; border: none;
  color: rgba(var(--ink-rgb), 0.7); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: var(--tr); white-space: nowrap;
}
.topnav-tab.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.topnav-tab:not(.on):hover { background: rgba(var(--ink-rgb), 0.12); color: var(--ink); }

/* ------------------------------------------------------------- step rail */
.rail { display: flex; align-items: flex-start; width: 100%; }
.rail .step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit;
}
.rail .step .bar { display: flex; align-items: center; width: 100%; }
.rail .step .line { height: 2px; flex: 1; background: var(--rail-line); transition: background .45s ease; }
.rail .step .line.fill { background: var(--rail-line-on); }
.rail .step:first-child .line.l, .rail .step:last-child .line.r { visibility: hidden; }
.rail .step .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: rgba(var(--ink-rgb), 0.35); transition: background .45s ease, box-shadow .45s ease;
}
.rail .step.done .dot, .rail .step.cur .dot { background: var(--rail-dot-on); }
.rail .step.cur .dot { box-shadow: 0 0 0 4px var(--rail-glow); }
.rail .step .lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(var(--ink-rgb), 0.5); transition: color .45s ease;
}
.rail .step.done .lbl, .rail .step.cur .lbl { color: var(--ink); }

/* ----------------------------------------------------------------- card */
.card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 22px;
  padding: 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 20px;
}
.body { display: flex; flex-direction: column; gap: 20px; }
.body.enter { animation: stepIn .42s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.head .title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.head .subtitle { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.step-pane { display: flex; flex-direction: column; gap: 16px; }

/* --------------------------------------------------------------- buttons */
button, .btn {
  font-family: inherit; cursor: pointer; border: none; transition: var(--tr);
}
button:active, .btn:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.nav { display: flex; gap: 11px; }
.nav .back {
  flex: none; padding: 14px 20px; border: 1px solid rgba(var(--ink-rgb), 0.3); border-radius: 13px;
  background: transparent; color: var(--ink); font-size: 15px; font-weight: 600;
}
.nav .back:hover { background: rgba(var(--ink-rgb), 0.12); }
.nav .next {
  flex: 1; padding: 14px; border-radius: 13px; background: var(--btn-hi-bg); color: var(--btn-hi-ink);
  font-size: 15px; font-weight: 700; box-shadow: 0 8px 24px rgba(20, 10, 60, 0.22);
}
.nav .next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 10, 60, 0.3); }
.nav .next.busy { pointer-events: none; }

/* segmented control (role toggle, stop mode) */
.seg { display: flex; gap: 6px; background: rgba(var(--track-rgb), 0.12); border-radius: 11px; padding: 4px; }
.seg button {
  flex: 1; padding: 9px 0; border-radius: 8px; background: transparent;
  color: rgba(var(--ink-rgb), 0.65); font-size: 13px; font-weight: 600;
}
.seg button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; }

/* appliqué edge-finish picker (fabric cards) */
.methodrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.methodrow .ml { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.methodrow .seg.sm { flex: 1; }
.seg.sm button { padding: 7px 2px; font-size: 11.5px; }

/* chips (sizes, formats) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 9px 16px; border-radius: 20px; border: 1px solid rgba(var(--ink-rgb), 0.3);
  background: rgba(var(--ink-rgb), 0.08); color: var(--ink); font-size: 13px; font-weight: 600;
}
.chip.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); border-color: transparent; font-weight: 700; }
.chip.rm { padding: 9px 12px; }

/* --------------------------------------------------------------- fields */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > .k { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 .full { grid-column: 1 / -1; }

input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-line);
  border-radius: 11px; padding: 12px 14px; outline: none; width: 100%;
}
textarea { resize: vertical; }
input::placeholder { color: rgba(var(--ink-rgb), 0.45); }
/* custom chevron so native selects match the themed UI instead of an OS arrow */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: var(--chev-img);
  background-repeat: no-repeat; background-position: right 13px center;
}
select option { color: #1a1330; background: #fff; }   /* native dropdown list is light */
input:focus, select:focus, textarea:focus { border-color: var(--field-focus); }
input[type="color"] { padding: 4px; height: 42px; cursor: pointer; }
input[type="range"] { padding: 0; border: none; background: none; accent-color: var(--btn-hi-bg); }
input[type="file"] { display: none; }
.row-mini input, .row-mini select { padding: 9px 11px; border-radius: 9px; font-size: 13px; }

.note { font-size: 12px; color: var(--ink-3); text-align: center; }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }
.center { text-align: center; }

/* --------------------------------------------------------------- upload */
.drop {
  cursor: pointer; width: 100%; background: rgba(var(--ink-rgb), 0.08);
  border: 2px dashed rgba(var(--ink-rgb), 0.4); border-radius: 18px;
  padding: 38px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px;
  transition: background .2s ease, border-color .2s ease;
}
.drop:hover, .drop.drag { background: rgba(var(--ink-rgb), 0.15); border-color: rgba(var(--ink-rgb), 0.7); }
.drop .imgs { display: flex; align-items: flex-end; gap: 13px; }
.drop .imgs .ph {
  border-radius: 12px; background: rgba(var(--ink-rgb), 0.22);
  display: flex; align-items: center; justify-content: center; animation: floaty 4s ease-in-out infinite;
}
.drop .imgs .a { width: 48px; height: 48px; transform: rotate(-8deg); }
.drop .imgs .b { width: 60px; height: 60px; background: rgba(var(--ink-rgb), 0.3); animation-delay: -1.3s; }
.drop .imgs .c { width: 48px; height: 48px; transform: rotate(8deg); animation-delay: -2.6s; }
.drop .lead { color: var(--ink); font-size: 15px; font-weight: 600; }
.drop .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }

.svg-view {
  width: 100%; background: var(--paper); border: 1px solid var(--inset-line); border-radius: 14px;
  padding: 14px; text-align: center; min-height: 80px;
}
.svg-view svg { max-width: 100%; max-height: 300px; height: auto; }
.svg-view [data-hl="1"] { outline: 3px solid var(--accent); outline-offset: 2px; animation: hlpulse 1.1s ease-in-out infinite; }
@keyframes hlpulse {
  0%, 100% { outline-color: var(--accent); filter: drop-shadow(0 0 0 rgba(79, 59, 246, 0)); }
  50%      { outline-color: #9db8ff; filter: drop-shadow(0 0 7px rgba(130, 160, 255, 0.85)); }
}
@media (prefers-reduced-motion: reduce) { .svg-view [data-hl="1"] { animation: none; } }
.import-meta { font-size: 13px; color: var(--ink-2); text-align: center; }
.import-meta b { color: var(--ink); }

/* --------------------------------------------------------- object cards */
.obj {
  background: rgba(var(--ink-rgb), 0.1); border: 1px solid var(--inset-line);
  border-radius: 14px; padding: 14px;
}
.obj.sel { border-color: rgba(var(--ink-rgb), 0.75); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.4); }
.obj .top { display: flex; align-items: center; gap: 11px; }
.obj .who { flex: 1; min-width: 0; }
.obj .who .lbl {
  background: transparent; border: 1px solid transparent; color: var(--ink); font-size: 14.5px;
  font-weight: 600; padding: 2px 6px; border-radius: 6px; width: 100%;
}
.obj .who .lbl:focus { background: rgba(var(--track-rgb), 0.15); border-color: var(--field-line); }
.obj .who .meta { color: var(--ink-3); font-size: 12px; padding-left: 6px; margin-top: 1px; }
.obj .who .meta .badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.18); margin-left: 4px;
}
.obj .who .meta .badge.bg { background: rgba(124, 252, 180, 0.22); color: var(--ok); }
.obj .arrows { display: grid; grid-template-columns: repeat(2, 26px); gap: 5px; flex: none; }
.obj .arrows button {
  width: 26px; height: 22px; border-radius: 6px; background: rgba(var(--ink-rgb), 0.16);
  color: var(--ink); font-size: 11px; line-height: 1;
}
.obj .arrows button:hover { background: rgba(var(--ink-rgb), 0.28); }
.obj .arrows button[data-act="del"]:hover { background: rgba(255, 120, 130, 0.5); }
.obj .seg { margin-top: 12px; }

/* objects-step tools + background chooser */
.objtools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bg-hint { font-size: 12px; color: var(--warn); }
.bgform { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.bgform .chips { gap: 6px; }

details.adv { margin-top: 12px; }
details.adv > summary {
  cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; color: var(--ink);
  text-transform: capitalize; padding: 8px 11px; border-radius: 9px;
  background: rgba(var(--track-rgb), 0.12); display: flex; align-items: center; gap: 7px;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "▸"; font-size: 10px; color: var(--ink-2); transition: transform .15s ease; }
details.adv[open] > summary::before { transform: rotate(90deg); }
details.adv .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
details.adv .pgrid .full { grid-column: 1 / -1; }
details.adv .pf { display: flex; flex-direction: column; gap: 5px; }
details.adv .pf .k { font-size: 11px; font-weight: 600; color: var(--ink-2); }
details.adv .pf.chk { flex-direction: row; align-items: center; gap: 8px; }
details.adv .pf.chk input { width: auto; }
details.adv .pf input, details.adv .pf select { padding: 8px 10px; border-radius: 9px; font-size: 13px; }
details.adv .sub {
  grid-column: 1 / -1; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3); margin-top: 4px;
}

/* --------------------------------------------------------- shape groups */
.gband {
  border: 1px solid var(--card-line); border-radius: 16px;
  background: rgba(var(--ink-rgb), 0.05); padding: 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.gband.collapsed { gap: 0; }
.ghead { display: flex; align-items: center; gap: 9px; padding: 2px 4px 2px 4px; cursor: pointer; }
.ghead .gcollapse {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: rgba(var(--ink-rgb), 0.14); color: var(--ink); font-size: 11px; line-height: 1;
}
.ghead .gcollapse:hover { background: rgba(var(--ink-rgb), 0.26); }
.ghead .gname {
  flex: 1; min-width: 0; width: auto; background: transparent; border: 1px solid transparent;
  color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 4px 7px; border-radius: 7px;
}
.ghead .gname:focus { background: rgba(var(--track-rgb), 0.18); border-color: var(--field-line); }
.ghead .gcount { font-size: 11px; color: var(--ink-3); white-space: nowrap; flex: none; }
.ghead .gtools { display: flex; align-items: center; gap: 6px; flex: none; }
.ghead .gtools button {
  width: 26px; height: 24px; border-radius: 7px; background: rgba(var(--ink-rgb), 0.14);
  color: var(--ink); font-size: 11px; line-height: 1;
}
.ghead .gtools button:hover { background: rgba(var(--ink-rgb), 0.26); }
.ghead .gtools button[data-gact="ungroup"]:hover { background: rgba(255, 180, 120, 0.45); }
.ghead .gcolor { display: inline-flex; flex: none; }
.ghead .gcolor input {
  width: 26px; height: 24px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 2px solid rgba(var(--ink-rgb), 0.5);
}
.gcards { display: flex; flex-direction: column; gap: 12px; }
.gband.collapsed .gcards { display: none; }
.gband .obj { background: rgba(var(--ink-rgb), 0.13); }

/* --------------------------------------------- drag, thumbnail & multi-select */
.objlist { display: flex; flex-direction: column; gap: 16px; }

.obj .grip {
  width: 22px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 7px; color: var(--ink-3); cursor: grab; touch-action: none;
}
.obj .grip:hover { background: rgba(var(--ink-rgb), 0.12); color: var(--ink); }
.obj .grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.obj.drag-src { opacity: 0.4; }

.obj .thumb {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.3); background: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.obj .thumb .tg { width: 100%; height: 100%; display: block; }
.obj .thumb input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.obj .thumb:hover { border-color: rgba(var(--ink-rgb), 0.7); }

/* floating multi-select action bar */
.selbar {
  position: sticky; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 10px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 14px;
  padding: 9px 12px; box-shadow: var(--shadow-pill); backdrop-filter: blur(8px);
}
.selbar .selc { font-size: 13px; font-weight: 700; color: var(--ink); margin-right: auto; padding-left: 4px; }
.selbar button, .selbar .selbtn {
  position: relative; padding: 8px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: rgba(var(--ink-rgb), 0.14); color: var(--ink); border: 1px solid var(--field-line); cursor: pointer;
}
.selbar button:hover, .selbar .selbtn:hover { background: rgba(var(--ink-rgb), 0.26); }
.selbar button.primary { background: var(--btn-hi-bg); color: var(--btn-hi-ink); border-color: transparent; }
.selbar button[data-sel="delete"]:hover { background: rgba(255, 120, 130, 0.5); }
.selbar .selbtn input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* drop indicator while dragging a card */
.dropline {
  position: absolute; height: 3px; border-radius: 3px; background: var(--accent); display: none;
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.55), 0 0 10px var(--accent); pointer-events: none; z-index: 9999;
}
body.dragging { cursor: grabbing; user-select: none; }

/* --------------------------------------------------------- preview/sim */
.finish {
  position: relative; width: 100%; aspect-ratio: 1.6 / 1; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(var(--ink-rgb), 0.2); background-color: rgba(var(--ink-rgb), 0.06);
  background-image: repeating-linear-gradient(45deg, rgba(var(--ink-rgb), 0.08) 0 8px, transparent 8px 16px);
  display: flex; align-items: center; justify-content: center;
}
.finish img { max-width: 100%; max-height: 100%; object-fit: contain; }
.finish .ph { font-family: monospace; font-size: 12px; color: var(--ink-2); }

.panel { background: rgba(var(--ink-rgb), 0.08); border-radius: 14px; padding: 15px; }
.panel .ptop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.panel .ptop .t { font-size: 13px; font-weight: 600; }
.panel .ptop .c { font-size: 12px; color: var(--ink-2); }

#sim {
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 11px;
  background: rgba(var(--ink-rgb), 0.06); border: 1px solid rgba(var(--ink-rgb), 0.14); display: block;
}
.simrow {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin-top: 11px;
  border-radius: 11px; background: rgba(var(--ink-rgb), 0.1);
}
.simrow .dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.simrow .txt { flex: 1; min-width: 0; }
.simrow .txt .a { font-size: 14px; font-weight: 600; }
.simrow .txt .d { font-size: 12px; color: var(--ink-2); }
.simrow .pause { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 20px; white-space: nowrap; }
.simrow .pause.on { background: rgba(255, 214, 107, 0.22); color: var(--warn); }
.simrow .pause.off { background: rgba(var(--ink-rgb), 0.14); color: var(--ink-2); }

.transport { display: flex; gap: 8px; margin-top: 11px; justify-content: center; }
.transport button {
  height: 36px; border-radius: 9px; background: rgba(var(--ink-rgb), 0.16); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.transport button:hover { background: rgba(var(--ink-rgb), 0.26); }
.transport .arr { width: 40px; }
.transport .play { width: 64px; background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; }
.transport .play:hover { background: var(--btn-hi-bg); }

.legend { margin-top: 11px; display: flex; flex-direction: column; gap: 2px; max-height: 132px; overflow: auto; }
.legend .lrow {
  display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px;
  border-radius: 7px; cursor: pointer; color: var(--ink-2);
}
.legend .lrow:hover { background: rgba(var(--ink-rgb), 0.08); }
.legend .lrow.cur { background: rgba(var(--ink-rgb), 0.16); color: var(--ink); }
.legend .lrow .n { width: 18px; color: var(--ink-3); }
.legend .lrow .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ----------------------------------------------------------- validation */
.vblock { background: rgba(var(--ink-rgb), 0.08); border-radius: 13px; padding: 14px; }
.vblock .vh { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.vitem { display: flex; align-items: flex-start; gap: 9px; }
.vitem + .vitem { margin-top: 7px; }
.vitem .vd { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 5px; }
.vitem .vt { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.82); line-height: 1.35; }

/* --------------------------------------------------------------- export */
.brow {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(var(--ink-rgb), 0.08); border-radius: 12px; padding: 13px 15px;
}
.brow .bsize { font-size: 14px; font-weight: 700; }
.brow .bmeta { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.brow .bst { font-size: 13px; font-weight: 700; text-align: right; }
.export-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linkbtn {
  padding: 9px 14px; border-radius: 11px; background: rgba(var(--ink-rgb), 0.1);
  border: 1px solid var(--field-line); color: var(--ink); font-size: 13px; font-weight: 600;
  text-decoration: none; display: inline-block;
}
.linkbtn:hover { background: rgba(var(--ink-rgb), 0.18); }
.linkbtn.dl { background: var(--btn-hi-bg); color: var(--btn-hi-ink); border-color: transparent; font-weight: 700; }

/* ------------------------------------------------------------- feedback */
.spinner {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block; vertical-align: -4px;
  border: 2px solid rgba(var(--ink-rgb), 0.35); border-top-color: var(--ink); animation: spin .7s linear infinite;
}
.spinner.big { width: 40px; height: 40px; border-width: 4px; vertical-align: 0; }
.state { text-align: center; padding: 22px 0; color: var(--ink-2); font-size: 13.5px; }

/* full-card busy overlay for import / mode-switch / example load */
.busy-overlay {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center;
  background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadein var(--dur-2) ease;
}
.busy-overlay .busybox { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.busy-overlay .busymsg { color: var(--ink); font-size: 14px; font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 26px;
  background: var(--pill-bg); color: var(--ink); padding: 11px 18px; border-radius: 12px;
  border: 1px solid var(--card-line);
  font-weight: 600; font-size: 13.5px; z-index: 50; box-shadow: var(--shadow-pill);
  backdrop-filter: blur(8px); max-width: 90vw; text-align: center;
  transform: translateX(-50%) translateY(0); opacity: 1;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.toast.hidden {
  display: block !important;                 /* animate out instead of hard-hiding */
  opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none;
}

@media (max-width: 540px) {
  body { padding: 18px 12px 40px; }
  .card { padding: 20px; }
  .appbar { padding: 11px 12px 9px; }
  .appbar-actions { margin-left: 0; }
  .rail .step .lbl { font-size: 9px; }
}

/* ------------------------------------------------- small toolbar buttons */
.tbtn {
  padding: 7px 12px; border-radius: 10px; background: rgba(var(--ink-rgb), 0.12);
  border: 1px solid var(--card-line); color: var(--ink); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.tbtn:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.2); }
.tbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------------------------------------------------------- footer */
.foot { font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.55; max-width: 520px; }
.foot b { color: var(--ink-2); }
.foot a { color: var(--ink-2); }

/* "try the example" / "open a project" links on the Source step */
.try { text-align: center; }
.try button { background: none; border: none; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; opacity: 0.9; }
.try button:hover { opacity: 1; }

/* small inline help under role pickers etc. */
.hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* ------------------------------------------------ source-chooser cards */
.src-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.srccard {
  flex: 1 1 0; min-width: 200px; cursor: pointer; color: var(--ink); text-align: left;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: var(--tr);
}
.srccard:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.18); transform: translateY(-2px); }
.srccard.on {
  border-color: var(--sel-ring); background: rgba(var(--ink-rgb), 0.08);
  box-shadow: 0 0 0 1px var(--sel-ring), 0 12px 28px rgba(10, 5, 40, 0.2);
}
.srccard:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.srccard .sc-ico {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--ink-rgb), 0.14);
  display: flex; align-items: center; justify-content: center;
}
.srccard .sc-name { font-size: 14.5px; font-weight: 700; }
.srccard .sc-blurb { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.src-panel { display: flex; flex-direction: column; gap: 16px; }
.src-panel[hidden] { display: none; }
@media (max-width: 540px) { .srccard { min-width: 100%; } }

/* --------------------------------------------------- design-type cards */
.ask { font-size: 14px; font-weight: 700; color: var(--ink); text-align: center; }
.types { display: flex; gap: 12px; flex-wrap: wrap; }
.typecard {
  flex: 1 1 0; min-width: 150px; cursor: pointer; color: var(--ink);
  background: var(--card); border: 1px solid var(--card-line); border-radius: 16px;
  padding: 12px; display: flex; flex-direction: column; gap: 7px; transition: var(--tr);
}
.typecard:hover { background: rgba(var(--ink-rgb), 0.18); transform: translateY(-2px); }
.typecard.on {
  border-color: var(--sel-ring); background: rgba(var(--ink-rgb), 0.08);
  box-shadow: 0 0 0 1px var(--sel-ring), 0 12px 28px rgba(10, 5, 40, 0.2);
}
.typecard .tc-art {
  display: block; width: 100%; height: 70px; border-radius: 11px; overflow: hidden;
  background: rgba(var(--ink-rgb), 0.06); border: 1px solid rgba(var(--ink-rgb), 0.1);
}
.typecard .tc-art svg { width: 100%; height: 100%; display: block; }
.typecard .tc-name { font-size: 14px; font-weight: 700; }
.typecard .tc-blurb { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 540px) { .typecard { min-width: 100%; } }

/* --------------------------------------------------------- build gating */
.gate {
  background: rgba(255, 214, 107, 0.12); border: 1px solid rgba(255, 214, 107, 0.35);
  border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--ink); line-height: 1.5;
}
.gate b { color: var(--warn); }
.gate ul { margin: 6px 0 0; padding-left: 18px; }

/* build error panel */
.errbox {
  background: rgba(255, 80, 100, 0.12); border: 1px solid rgba(255, 140, 150, 0.4);
  border-radius: 13px; padding: 14px;
}
.errbox .eh { font-weight: 700; color: var(--bad); margin-bottom: 6px; font-size: 13px; }
.errbox .em { font-size: 12.5px; color: rgba(var(--ink-rgb), 0.85); white-space: pre-wrap; word-break: break-word; }
.errbox .eretry { margin-top: 12px; }

/* ----------------------------------------------------------------- modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; padding: 24px;
  background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; animation: fadein var(--dur-2) ease;
}
.modal {
  width: 100%; max-width: 430px; background: var(--modal-bg);
  border: 1px solid var(--card-line); border-radius: 20px; padding: 24px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-pop); animation: pop var(--dur-3) var(--ease-out);
}
.modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.modal p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.modal .macts { display: flex; gap: 10px; margin-top: 20px; }
.modal .macts button { flex: 1; padding: 12px; border-radius: 11px; font-size: 14px; font-weight: 700; }
.modal .macts .ghost { background: transparent; border: 1px solid rgba(var(--ink-rgb), 0.3); color: var(--ink); }
.modal .macts .ghost:hover { background: rgba(var(--ink-rgb), 0.12); }
.modal .macts .primary { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.modal .macts .primary:hover { transform: translateY(-1px); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------- upgrade dialog */
.up-modal { max-width: 440px; position: relative; overflow: hidden; }
.up-modal::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 140px;
  background: radial-gradient(ellipse 70% 100% at 50% 0, rgba(139, 123, 255, .35), transparent 70%);
  pointer-events: none;
}
.up-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px;
  font-weight: 800; letter-spacing: .08em; color: #ffffff;
  background: linear-gradient(92deg, #8b7bff, #4f9cf6); margin-bottom: 12px;
}
.up-modal h3 { font-size: 21px; }
.up-blurb { margin-top: 8px !important; font-size: 14px !important; }
.up-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.up-list li { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.up-list li::before { content: "✓"; color: var(--ok); font-weight: 800; }
.up-price { margin-top: 4px !important; font-size: 13px !important; color: var(--ink-3) !important; }
.up-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.up-actions .linkbtn { margin-left: 0; }
.up-actions .primary {
  margin-left: auto; padding: 11px 22px; border-radius: 11px; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--btn-hi-ink);
  background: var(--btn-hi-bg); transition: var(--tr);
}
.up-actions .primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(139, 123, 255, .4); }

/* forgot-password link under the sign-in form */
.acct-forgot { text-align: right; margin: -4px 0 2px; }
.acct-forgot .linkbtn { font-size: 11.5px; padding: 3px 6px; }
.acct-err.ok { color: var(--ok); }

/* "Upgrade to Pro" account-menu entry gets the gradient treatment */
.acct-menu .acct-upgrade {
  color: #ffffff; font-weight: 700;
  background: linear-gradient(92deg, rgba(139,123,255,.9), rgba(79,156,246,.9));
}
.acct-menu .acct-upgrade:hover { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .up-actions .primary:hover { transform: none; }
}

/* ------------------------------------------------------- accessibility */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .drop .imgs .ph { animation: none; }
  .body.enter { animation: none; }
  .modal, .modal-backdrop { animation: none; }
  .nav .next:hover:not(:disabled) { transform: none; }
  .typecard:hover { transform: none; }
  /* the motion system stands down as one: entrances stop, micro-feedback stays instant */
  .dz-menu, .dz-actions, .dz-ctx, .dz-ready, .dz-player.on, .dz-tab, .dz-panel,
  .acct-menu, .toast { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------ wizard back button */
.back-to-editor { font-weight: 700; }

/* --------------------------------------------------------- account chip */
/* Rendered by account.js into any .account-slot (digitizer app bar, projects page). */
.account-slot { display: inline-flex; position: relative; }
.acct-signin {
  padding: 7px 14px; border-radius: 10px; border: 1px solid var(--card-line);
  background: rgba(var(--ink-rgb), 0.12); color: var(--ink); font-family: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.acct-signin:hover { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.acct-chip {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px;
  border-radius: 20px; border: 1px solid var(--card-line);
  background: rgba(var(--ink-rgb), 0.1); color: var(--ink); font-family: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.acct-chip:hover { background: rgba(var(--ink-rgb), 0.2); }
.acct-chip .face { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.acct-chip .face.init {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #ffffff; font-size: 11px; font-weight: 800;
}
.acct-chip .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px 6px 6px;
  background: var(--menu-bg); border: 1px solid var(--card-line);
  border-radius: 12px; box-shadow: var(--shadow-menu);
  transform-origin: top right; animation: menuIn var(--dur-2) var(--ease-out);
}
.acct-menu .who { display: flex; flex-direction: column; gap: 1px; padding: 2px 10px 8px; border-bottom: 1px solid var(--inset-line); margin-bottom: 4px; }
.acct-menu .who b { font-size: 12.5px; color: var(--ink); }
.acct-menu .who span { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.acct-menu > button {
  text-align: left; padding: 8px 10px; border-radius: 8px; border: none;
  background: transparent; color: var(--ink); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: var(--tr);
}
.acct-menu > button:hover { background: rgba(var(--ink-rgb), 0.14); }

/* ------------------------------------------------------ sign-in dialog */
.acct-modal { max-width: 400px; }
.acct-sub { color: var(--ink-2); margin-top: -4px; }
.acct-providers { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.acct-provider {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--field-line);
  background: #f7f8fa; color: #1f2430; font-family: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.acct-provider:hover { background: #ffffff; transform: translateY(-1px); }
.acct-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 4px;
  color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.acct-divider::before, .acct-divider::after { content: ""; flex: 1; height: 1px; background: var(--inset-line); }
.acct-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.acct-form .pf input { width: 100%; }
.acct-err { min-height: 15px; color: var(--bad); font-size: 12px; font-weight: 600; }
.acct-submit {
  padding: 10px 12px; border-radius: 11px; border: none; background: var(--btn-hi-bg); color: var(--btn-hi-ink);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: var(--tr);
}
.acct-submit:hover { transform: translateY(-1px); }
.acct-submit:disabled { opacity: 0.6; pointer-events: none; }
.acct-switch { margin-top: 14px; font-size: 12px; color: var(--ink-2); text-align: center; }
.acct-waiting {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px;
  border-radius: 11px; background: var(--inset); border: 1px solid var(--inset-line);
  font-size: 12.5px; color: var(--ink-2);
}

/* ------------------------------------------------------- projects page */
/* Full-bleed gallery of the account's saved designs (mode-projects). */
#projects-root { display: none; }
.mode-projects .shell { display: none; }
.mode-projects #projects-root {
  display: block; position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  /* same backdrop as the wizard and Digitizer so Projects reads as the same
     product, not a second app (dark adds a soft violet glow up top) */
  background: var(--pj-bg, var(--app-bg));
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pj-shell { max-width: 1180px; margin: 0 auto; padding: 22px 28px 70px; }
.pj-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.pj-spacer { flex: 1; }
.pj-back {
  padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.07); color: var(--ink); font-family: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.pj-back:hover { background: rgba(var(--ink-rgb), 0.16); }
.pj-shell h1 { margin: 4px 0 18px; font-size: 34px; letter-spacing: -0.02em; }
.pj-tabs {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px;
  background: rgba(var(--ink-rgb), 0.06); border: 1px solid rgba(var(--ink-rgb), 0.1);
}
.pj-tab {
  padding: 7px 14px; border-radius: 9px; border: none; background: transparent;
  color: rgba(var(--ink-rgb), 0.65); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.pj-tab.on { background: rgba(var(--ink-rgb), 0.16); color: var(--ink); }
.pj-tab:not(.on):hover { color: var(--ink); }
.pj-count { margin: 16px 0 4px; color: var(--ink-3); font-size: 13px; }
.pj-controls { display: flex; align-items: center; gap: 10px; margin: 10px 0 18px; }
.pj-sort { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pj-sort select {
  padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), 0.16);
  background: rgba(var(--ink-rgb), 0.07); color: var(--ink); font-family: inherit; font-size: 12.5px;
}
.pj-sort select option { color: #1f2430; }
.pj-search {
  margin-left: auto; width: min(280px, 45vw); padding: 9px 13px; border-radius: 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.16); background: rgba(var(--ink-rgb), 0.07);
  color: var(--ink); font-family: inherit; font-size: 12.5px;
}
.pj-search::placeholder { color: var(--ink-3); }
.pj-err { margin: 8px 0; color: var(--bad); font-size: 12.5px; font-weight: 600; }
/* richer empty states (first-run, empty favorites/recents, no search match) */
.pj-empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: 16px; border: 1px dashed rgba(var(--ink-rgb), 0.18);
  background: rgba(var(--ink-rgb), 0.03);
}
.pj-empty-mark {
  width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  color: #ffffff; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(139, 123, 255, .35), rgba(79, 156, 246, .3));
  border: 1px solid rgba(var(--ink-rgb), 0.18);
}
.pj-empty h3 { margin: 0; font-size: 20px; }
.pj-empty p { margin: 0; max-width: 380px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.pj-empty .primary { margin-top: 16px; padding: 11px 22px; border-radius: 11px; font-weight: 700; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.pj-card {
  display: flex; flex-direction: column; border-radius: 13px; overflow: hidden;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid rgba(var(--ink-rgb), 0.1);
  cursor: pointer; transition: var(--tr);
}
.pj-card:hover { transform: translateY(-2px); border-color: rgba(var(--ink-rgb), 0.28); box-shadow: var(--shadow-pill); }
.pj-thumb { aspect-ratio: 16 / 10; background: #a6adbd; display: flex; align-items: center; justify-content: center; }
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-thumb .ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(var(--ink-rgb), 0.06); color: rgba(var(--ink-rgb), 0.5); }
.pj-meta { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--strip); }
.pj-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-when { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.pj-tools { display: flex; gap: 3px; }
.pj-ico {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; border: none; background: transparent; color: rgba(var(--ink-rgb), 0.6);
  cursor: pointer; transition: var(--tr);
}
.pj-ico:hover { background: rgba(var(--ink-rgb), 0.16); color: var(--ink); }
.pj-ico.on { color: var(--warn); }
.pj-ico.danger:hover { color: var(--bad); }
.pj-create {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 220px; border-radius: 13px; border: 1.5px dashed rgba(var(--ink-rgb), 0.28);
  background: transparent; color: rgba(var(--ink-rgb), 0.85); font-family: inherit;
  font-size: 14.5px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.pj-create:hover { background: rgba(var(--ink-rgb), 0.05); border-color: rgba(var(--ink-rgb), 0.5); }
.pj-create .plus {
  display: flex; align-items: center; justify-content: center; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(var(--ink-rgb), 0.1); font-size: 24px; font-weight: 400;
}
.pj-hero {
  max-width: 460px; margin: 40px auto; padding: 34px; text-align: center;
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 18px;
}
.pj-hero h2 { margin: 0 0 8px; }
.pj-hero p { color: var(--ink-2); margin: 0 0 18px; }
.pj-hero .primary {
  padding: 10px 18px; border-radius: 11px; border: none; background: var(--btn-hi-bg); color: var(--btn-hi-ink);
  font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}

/* stacked label+input fields inside modals (sign-in, rename, group-name) */
.modal .pf { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; text-align: left; }
.modal .pf .k { font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* ------------------------------------------------------- settings dialog */
/* Opened from the ⚙ buttons / account menu (settings.js). */
.modal.set-modal { max-width: 560px; }
.set-head { display: flex; align-items: center; justify-content: space-between; }
.set-head h3 { margin: 0; }
.set-x {
  width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent;
  color: var(--ink-2); font-size: 15px; cursor: pointer; transition: var(--tr);
}
.set-x:hover { background: rgba(var(--ink-rgb), 0.1); color: var(--ink); }
.set-tabs {
  display: flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 12px;
  background: rgba(var(--track-rgb), 0.12);
}
.set-tabs button {
  flex: 1; padding: 8px 4px; border-radius: 9px; border: none; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.set-tabs button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.set-body { margin-top: 16px; min-height: 260px; max-height: min(52vh, 460px); overflow-y: auto; padding-right: 4px; }
.set-sec + .set-sec { margin-top: 18px; }
.set-sec h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.set-hint { font-size: 12px !important; color: var(--ink-3) !important; line-height: 1.5; margin: 0 0 10px !important; }
.set-err { min-height: 16px; margin-bottom: 6px; color: var(--bad); font-size: 12px; font-weight: 600; }
.set-rows { display: flex; flex-direction: column; gap: 2px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px; border-radius: 9px; font-size: 13px;
}
.set-row:hover { background: rgba(var(--ink-rgb), 0.05); }
.set-row .set-k { font-weight: 600; line-height: 1.35; }
.set-row .set-k small { font-weight: 500; font-size: 11px; color: var(--ink-3); }
.set-row select { width: auto; min-width: 170px; padding: 8px 30px 8px 10px; font-size: 12.5px; border-radius: 9px; }
.set-row input[type="checkbox"] { width: auto; accent-color: var(--accent); transform: scale(1.15); }
.set-key {
  min-width: 78px; padding: 6px 12px; border-radius: 8px; text-align: center;
  border: 1px solid var(--field-line); background: rgba(var(--ink-rgb), 0.06);
  color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: var(--tr);
}
.set-key:hover { border-color: var(--accent); }
.set-key.listening { border-color: var(--accent); color: var(--accent); animation: setPulse 1.1s ease-in-out infinite; }
@keyframes setPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 59, 246, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(79, 59, 246, 0.12); } }
.set-themes { display: flex; gap: 10px; flex-wrap: wrap; }
.set-theme {
  flex: 1 1 0; min-width: 140px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px; border-radius: 13px; border: 1px solid var(--card-line); background: rgba(var(--ink-rgb), 0.03);
  color: var(--ink); font-family: inherit; cursor: pointer; text-align: left; transition: var(--tr);
}
.set-theme:hover { border-color: rgba(var(--ink-rgb), 0.35); }
.set-theme.on { border-color: var(--sel-ring); box-shadow: 0 0 0 1px var(--sel-ring); }
.set-theme-art { display: block; border-radius: 7px; overflow: hidden; line-height: 0; }
.set-theme-name { font-size: 13px; font-weight: 700; }
.set-theme-blurb { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.set-fmts { display: flex; gap: 8px; flex-wrap: wrap; }
.set-fmt {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 20px;
  border: 1px solid var(--field-line); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: var(--tr);
}
.set-fmt:hover { background: rgba(var(--ink-rgb), 0.06); }
.set-fmt input { width: auto; accent-color: var(--accent); margin: 0; }
.set-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--inset-line);
}
.set-reset {
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--field-line);
  background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer; transition: var(--tr);
}
.set-reset:hover { background: rgba(var(--ink-rgb), 0.07); color: var(--ink); }
.set-note { font-size: 11.5px; color: var(--ink-3); }

/* editor-preference flags stamped on <html> by settings.js */
.no-kbd-badges .kbd { display: none !important; }
.no-hints .dz-hint { display: none !important; }
/* "Reduce motion" setting — same stand-down as the OS-level media query */
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after {
  animation: none !important; transition: none !important;
}

/* ------------------------------------------- projects: live previews + entry */
/* Cards cascade in with a small per-card stagger (--pj-d set inline) — but
   only while .pj-anim is on the shell (armed once per page visit; tab/search
   re-renders stay still instead of replaying the entrance). */
@keyframes pjCardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.pj-anim .pj-card, .pj-anim .pj-create { animation: pjCardIn .5s var(--ease-out) both; animation-delay: var(--pj-d, 0ms); }
.pj-anim h1, .pj-anim .pj-head, .pj-anim .pj-tabs, .pj-anim .pj-controls, .pj-anim .pj-count, .pj-anim .pj-hero {
  animation: pjCardIn .45s var(--ease-out) both;
}
.pj-anim h1 { animation-delay: 40ms; }
.pj-anim .pj-tabs { animation-delay: 90ms; }
.pj-anim .pj-count, .pj-anim .pj-controls { animation-delay: 130ms; }
/* the live vector preview paints over the stored thumbnail once its data arrives */
.pj-thumb { position: relative; }
.pj-thumb .pj-live {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: var(--paper, #fff); opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
:root:not([data-theme="dark"]) .pj-thumb .pj-live { background: #ffffff; }
:root[data-theme="dark"] .pj-thumb .pj-live { background: rgba(255, 255, 255, 0.92); }
.pj-thumb .pj-live.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pj-anim .pj-card, .pj-anim .pj-create, .pj-anim h1, .pj-anim .pj-head,
  .pj-anim .pj-tabs, .pj-anim .pj-controls, .pj-anim .pj-count, .pj-anim .pj-hero {
    animation: none !important;
  }
  .pj-thumb .pj-live { transition: none; }
}

/* --------------------------------------------------------------- beta build */
/* mode=beta (plan.js stamps body.mode-beta): the engine-test deployment has
   no accounts, cloud projects or billing — hide every entry point to them and
   surface the bug-report button instead. */
.dz-beta-fb { display: none; }
body.mode-beta .dz-beta-fb { display: inline-flex; }
body.mode-beta .dz-account, body.mode-beta .dz-acct-alt[data-act="projects"],
body.mode-beta [data-act="cloudsave"], body.mode-beta .account-slot { display: none !important; }
/* a small BETA tag on the brand so screenshots are self-identifying */
body.mode-beta .dz-brand::after {
  content: "BETA"; margin-left: 7px; padding: 2px 7px; border-radius: 6px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  color: #fff; background: linear-gradient(92deg, #7a68ff, #3d8de8);
}

/* the beta feedback form (plan.js openBetaFeedback, rendered in #modal-root) */
.fb-modal { max-width: 460px; }
.fb-lbl { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: rgba(var(--ink-rgb), .72); }
.fb-input {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 9px;
  border: 1px solid rgba(var(--ink-rgb), .18); background: rgba(var(--ink-rgb), .03);
  color: rgb(var(--ink-rgb)); font: inherit; font-size: 13.5px; outline: none; resize: vertical;
}
.fb-input:focus { border-color: rgba(79, 59, 246, .55); box-shadow: 0 0 0 3px rgba(79, 59, 246, .12); }
.fb-chk {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  margin-top: 14px; font-size: 12.5px; line-height: 1.45; text-align: left;
  color: rgba(var(--ink-rgb), .72); cursor: pointer;
}
.fb-chk input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #6a5cff; }
.fb-err { margin: 10px 0 0; font-size: 12.5px; font-weight: 650; color: #b3261e; min-height: 1em; }