/* =====================================================================
   CARD FORGE — style.css
   Application chrome only. Each card template carries its own embedded
   stylesheet (see script.js) so the exported PNG matches the preview.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --ui-bg: #0b0d14;
  --ui-bg-2: #0f121a;
  --ui-panel: #141824;
  --ui-panel-2: #1b2030;
  --ui-line: rgba(255, 255, 255, .07);
  --ui-line-2: rgba(255, 255, 255, .13);
  --ui-text: #f1ede4;
  --ui-dim: #a3a7b5;
  --ui-faint: #767b8d;
  --ui-accent: #e9b95c;
  --ui-accent-2: #38e1ff;
  --ui-gold: #e9b95c;
  --radius: 12px;
  --radius-sm: 7px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 56px;
  --ui-z: 1;                                  /* the editor's interface size, see "Interface size" */
  --card-glow: #00e5ff;

  /* Roles the chrome used to write as literal colours. Each has a light
     value below, which is all the light theme is. */
  --ui-strong: #fffaf0;                       /* headings, pressed controls */
  --ui-hover-line: rgba(255, 255, 255, .2);   /* a border under the pointer */
  --ui-track: rgba(255, 255, 255, .1);        /* slider tracks, switches, meters */
  --ui-accent-hover: #f5cf82;
  --ui-accent-soft: rgba(233, 185, 92, .12);
  --ui-accent-soft-2: rgba(233, 185, 92, .2);
  --ui-accent-text: #f3d595;                  /* text on a soft accent */
  --ui-on-accent: #14110a;                    /* text on a solid accent */
  --ui-float: rgba(20, 24, 36, .9);          /* floating toolbars */
  --ui-scrim: rgba(5, 6, 10, .74);            /* behind a dialog */
  --ui-scrim-strong: rgba(6, 8, 13, .84);
  --ui-shadow: rgba(0, 0, 0, .5);
  --ui-shadow-strong: rgba(0, 0, 0, .75);
  --ui-scroll: #2c3242;
  --ui-stage-grid: rgba(255, 255, 255, .03);
  --ui-danger-text: #ffd7dd;
  --ui-danger-bg: rgba(244, 63, 94, .13);
  --ui-danger-line: rgba(244, 63, 94, .38);
  --ui-ok-text: #cfe9d6;
  --ui-ok-bg: rgba(74, 222, 128, .12);
  --ui-ok-line: rgba(74, 222, 128, .32);
  --ui-warn-text: #fde7b0;
  --ui-warn-bg: rgba(251, 191, 36, .1);
  --ui-warn-line: rgba(251, 191, 36, .3);
}

/* The light theme (theme.js sets data-theme on <html>). Only the editor's
   chrome changes: the card is artwork and looks the same either way. */
:root[data-theme="light"] {
  --ui-bg: #efebe2;
  --ui-bg-2: #fbfaf7;
  --ui-panel: #ffffff;
  --ui-panel-2: #f6f4ef;
  --ui-line: rgba(27, 30, 39, .09);
  --ui-line-2: rgba(27, 30, 39, .16);
  --ui-text: #1b1e27;
  --ui-dim: #555a69;
  --ui-faint: #656a78;
  --ui-accent: #c08a2c;
  --ui-accent-2: #0a8fb0;
  --ui-gold: #8a5a0a;
  --ui-strong: #0b0d14;
  --ui-hover-line: rgba(27, 30, 39, .3);
  --ui-track: rgba(27, 30, 39, .13);
  --ui-accent-hover: #a87720;
  --ui-accent-soft: rgba(192, 138, 44, .1);
  --ui-accent-soft-2: rgba(192, 138, 44, .18);
  --ui-accent-text: #6f4f12;
  --ui-on-accent: #14110a;
  --ui-float: rgba(255, 255, 255, .94);
  --ui-scrim: rgba(27, 24, 18, .34);
  --ui-scrim-strong: rgba(239, 235, 226, .9);
  --ui-shadow: rgba(20, 26, 48, .14);
  --ui-shadow-strong: rgba(20, 26, 48, .22);
  --ui-scroll: #cdc7ba;
  --ui-stage-grid: rgba(27, 30, 39, .045);
  --ui-danger-text: #b4233c;
  --ui-danger-bg: rgba(244, 63, 94, .08);
  --ui-danger-line: rgba(220, 38, 76, .32);
  --ui-ok-text: #145c31;
  --ui-ok-bg: rgba(34, 160, 90, .09);
  --ui-ok-line: rgba(34, 160, 90, .3);
  --ui-warn-text: #8a5700;
  --ui-warn-bg: rgba(245, 170, 20, .12);
  --ui-warn-line: rgba(200, 140, 10, .32);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Scrollbars ---------- */
.panel { scrollbar-width: thin; scrollbar-color: var(--ui-scroll) transparent; overflow-y: auto; padding: 0; background: var(--ui-bg-2); }
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: var(--ui-scroll); border-radius: 8px; border: 2px solid var(--ui-bg-2); }

/* =====================================================================
   HEADER
   ===================================================================== */
.app-header {
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 14px;
  background: var(--ui-bg-2);
  border-bottom: 1px solid var(--ui-line);
  position: relative; z-index: 20;
}
/* flex:none — the product name is the one thing in this header that must
   never be cut. The template picker wraps instead; it is built to. */
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 0 10px rgba(233, 185, 92, .3)); }
.brand .brand-name {
  display: block; margin: 0; font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: .16em;
  background: linear-gradient(90deg, #fffaf0, #f3d595 55%, var(--ui-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand p { margin: 2px 0 0; font-size: 11.5px; color: var(--ui-dim); }
/* The wordmark is wide and letter-spaced, and the header gained two account
   buttons. Without this it breaks across two lines and shoves the header
   taller; truncating is the better failure. */
/* The wordmark is wide and letter-spaced, and the header gained two account
   buttons. Truncating beats wrapping to a second line, which shoves the whole
   header taller. */
.brand .brand-name, .brand p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text { min-width: 0; }
/* The tagline never fits the slimmer top bar. */
.app-header .brand p { display: none; }

.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line); border-radius: 10px;
}
.seg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  transition: color .15s, background-color .15s, box-shadow .15s;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ui-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.seg-btn:hover { color: var(--ui-text); }
.seg-btn[aria-pressed="true"] {
  color: var(--ui-text); background: var(--ui-panel-2);
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 2px 10px rgba(0, 0, 0, .45);
}
.seg-dot { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.seg-dot.neon { background: linear-gradient(135deg, #00e5ff, #a855f7); box-shadow: 0 0 8px #00e5ff; }
.seg-dot.obsidian { background: linear-gradient(135deg, #f3d98b, #8a5a1c); box-shadow: 0 0 6px rgba(233, 185, 92, .6); }

/* The auto margin lives here, not on .brand. On a flex:none brand it soaks
   up every spare pixel and squeezes the picker into a second row. */
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* The brand is a link back to the homepage; it should not look like body copy. */
.app-header .brand { text-decoration: none; color: inherit; gap: 10px; }
.app-header .brand:hover .brand-mark { filter: brightness(1.15); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ui-line-2); border-radius: 8px;
  background: var(--ui-panel); color: var(--ui-text);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--ui-panel-2); border-color: var(--ui-hover-line); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* One solid accent, as a professional tool has, rather than a gradient on
   every call to action. */
.btn-primary {
  border: 0; color: var(--ui-on-accent); font-weight: 700; letter-spacing: .01em;
  background: var(--ui-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 6px 16px -8px var(--ui-accent);
}
.btn-primary:hover { background: var(--ui-accent-hover); border-color: transparent; }
.btn-primary.is-busy { opacity: .7; pointer-events: none; }
.btn-block { width: 100%; height: 44px; }
.btn-icon { width: 44px; padding: 0; height: 44px; }
.btn-upload {
  flex: 1; height: 44px; font-weight: 700; letter-spacing: .01em;
  border: 1px dashed color-mix(in srgb, var(--ui-accent) 55%, transparent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-text);
}
.btn-upload:hover { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft-2); }

.link-btn {
  border: 0; background: none; padding: 4px 0; margin-top: 2px;
  color: var(--ui-accent); font-size: 12.5px; font-weight: 600;
}
.link-btn:hover { text-decoration: underline; }

/* =====================================================================
   WORKSPACE LAYOUT
   ===================================================================== */
/* ---------- Control groups ----------
   Flat sections divided by a hairline, the way a professional tool's
   inspector reads, rather than a stack of glowing cards. */
.group {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  margin: 0;
  padding: 4px 16px 14px;
}
.group-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ui-strong);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.field:last-child { margin-bottom: 2px; }
.field label, .label { font-size: 12px; font-weight: 600; color: var(--ui-dim); }
.field-inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.counter { font-size: 11px; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.hint { margin: 8px 0 12px; font-size: 12px; color: var(--ui-faint); line-height: 1.4; }

.input {
  width: 100%;
  background: var(--ui-bg); border: 1px solid var(--ui-line-2); border-radius: var(--radius-sm);
  padding: 8px 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:hover { border-color: var(--ui-hover-line); }
.input:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft-2); }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.45; }
.input-sm { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------- Upload ---------- */
.upload-row { display: flex; gap: 8px; }

/* ---------- Range sliders ---------- */
.range-field { margin-bottom: 8px; }
.range-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.range-head label { color: var(--ui-dim); font-weight: 600; }
.range-head output { color: var(--ui-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.range-ctrl { display: flex; align-items: center; gap: 8px; }
.step {
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--ui-line-2); border-radius: 6px; background: var(--ui-bg);
  color: var(--ui-dim); font-size: 15px; line-height: 1; padding: 0;
}
.step:hover { color: var(--ui-text); border-color: var(--ui-accent); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer;
  --range: var(--ui-accent);
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--range) var(--fill, 50%), var(--ui-track) var(--fill, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--range) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .1s;
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--range), 0 0 0 7px var(--ui-accent-soft-2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ui-track); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--range); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--range) 45%, transparent), 0 2px 6px rgba(0, 0, 0, .5);
}
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--range); }

/* ---------- Rarity chips ---------- */
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; border-radius: 7px;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ui-dim);
  transition: color .15s, border-color .15s, background-color .15s;
}
.chip span::before {
  content: ""; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--chip); box-shadow: 0 0 6px var(--chip);
}
.chip:hover span { color: var(--ui-text); }
.chip input:checked + span {
  color: var(--ui-strong); border-color: var(--chip);
  background: color-mix(in srgb, var(--chip) 16%, var(--ui-bg));
}
.chip input:focus-visible + span { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---------- Type chips ---------- */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.type-chip { position: relative; display: block; }
.type-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.type-chip .tc-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 56px; border-radius: 8px;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg);
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--ui-dim);
  transition: color .15s, border-color .15s, background-color .15s;
}
.type-chip svg { width: 20px; height: 20px; fill: none; stroke: var(--chip); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.type-chip:hover .tc-body { color: var(--ui-text); }
.type-chip-none { --chip: var(--ui-dim); }
.type-chip.is-same { opacity: .3; }
.type-chip.is-same input { cursor: not-allowed; }
.type-chip input:checked + .tc-body {
  color: var(--ui-strong); border-color: var(--chip);
  background: color-mix(in srgb, var(--chip) 14%, var(--ui-bg));
  box-shadow: 0 0 14px -4px var(--chip);
}
.type-chip input:focus-visible + .tc-body { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---------- Stat rows ---------- */
.stat-row { padding: 10px 0 8px; border-top: 1px solid var(--ui-line); }
.stat-row input[type="range"] { --range: var(--c1); }
.stat-head { display: flex; align-items: center; gap: 8px; }
.stat-head label { flex: 1; font-size: 13px; font-weight: 700; color: var(--ui-text); }
.stat-num { width: 78px; text-align: right; padding: 6px 8px; }
.stat-of { min-width: 58px; font-size: 12px; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.meter { height: 6px; border-radius: 3px; background: var(--ui-track); overflow: hidden; }
.meter span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  border-radius: inherit; box-shadow: 0 0 10px var(--c1);
  transition: width .12s ease-out;
}

/* ---------- Template picker ---------- */
.template-list { display: grid; gap: 8px; }
.template-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px; border-radius: 10px;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg);
  transition: border-color .15s, background-color .15s;
}
.template-opt:hover { border-color: var(--ui-hover-line); }
.template-opt[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.tpl-text { display: flex; flex-direction: column; gap: 2px; }
.tpl-text strong { font-size: 13px; }
.tpl-text small { font-size: 11.5px; color: var(--ui-dim); }
.tpl-thumb { width: 34px; height: 48px; border-radius: 5px; flex: none; position: relative; overflow: hidden; }
.tpl-thumb.neon {
  clip-path: polygon(0 4px, 4px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background:
    linear-gradient(135deg, transparent 45%, rgba(168, 85, 247, .5) 50%, transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(0, 229, 255, .6), transparent 55%),
    #05070d;
  box-shadow: inset 0 0 0 1.5px #00e5ff;
  border-radius: 0;
}
.tpl-thumb.obsidian {
  background: radial-gradient(circle at 50% 30%, #4a1219, #0a0909 70%);
  box-shadow: inset 0 0 0 3px #c9973e, inset 0 0 0 4px #5a3a12;
}

/* ---------- Presets ---------- */
.preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.preset {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  padding: 8px; border-radius: 9px;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg);
  transition: border-color .15s, transform .1s;
}
.preset:hover { border-color: var(--ui-hover-line); }
.preset:active { transform: translateY(1px); }
.preset[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.preset-swatch { height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.preset-name { font-size: 12px; font-weight: 600; }

/* ---------- Colour pickers ---------- */
.color-list { display: grid; gap: 6px; }
.color-field {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 5px; border-radius: 8px;
  border: 1px solid var(--ui-line); background: var(--ui-bg); cursor: pointer;
}
.color-field:hover { border-color: var(--ui-line-2); }
.color-field:focus-within { border-color: var(--ui-accent); }
.color-field input[type="color"] {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; flex: none;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 1px solid var(--ui-line-2); border-radius: 6px; }
.color-field input[type="color"]::-moz-color-swatch { border: 1px solid var(--ui-line-2); border-radius: 6px; }
.cf-name { flex: 1; font-size: 12.5px; font-weight: 600; }
.cf-hex { font-size: 11.5px; color: var(--ui-dim); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* ---------- Toggles ---------- */
.toggle {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; cursor: pointer; font-size: 13px;
}
.toggle + .toggle { border-top: 1px solid var(--ui-line); }
/* The real checkbox, invisible, laid over the whole row: a click anywhere on it
   toggles, and it has a size to click at any interface zoom (a 1px box became
   0.8px under the compact size, and automation could not find a point on it). */
.toggle input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch {
  position: relative; flex: none;
  width: 38px; height: 22px; border-radius: 22px;
  background: var(--ui-track); transition: background-color .2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s;
}
.toggle input:checked + .switch { background: var(--ui-accent); }
.toggle input:checked + .switch::after { transform: translateX(16px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* ---------- Export group ---------- */
.group-export .hint { margin-top: 0; }
.file-name { margin: 10px 0 0; font-size: 12px; color: var(--ui-faint); word-break: break-all; }
.file-name span { color: var(--ui-dim); }

/* =====================================================================
   STAGE / LIVE PREVIEW
   ===================================================================== */
.stage {
  grid-area: stage;
  position: relative;
  /* safe: if the column is ever taller than the stage, it overflows at the
     bottom. Plain centring split the overflow and pushed the toolbar up
     under the header, where it could not be seen or clicked. */
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 22px;
  padding: 24px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, color-mix(in srgb, var(--card-glow) 9%, transparent), transparent 70%),
    var(--ui-bg);
}
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--ui-stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ui-stage-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}
.card-stage {
  position: relative;
  /* The height left once the toolbar, caption, gaps and padding are taken
     out (about 150px), turned into a width at the card's 5:7 ratio. */
  width: min(100%, 520px, calc((100vh - var(--header-h) * var(--ui-z) - 150px) * 0.7142857));
  aspect-ratio: 750 / 1050;
  perspective: 1400px;
  flex: none;
  transform: translate(var(--vx, 0px), var(--vy, 0px)) scale(var(--vz, 1));
  transform-origin: 50% 50%;
  /* One finger still scrolls the page; two fingers reach the pinch handler
     instead of the browser's own zoom. A selected layer takes over fully. */
  touch-action: pan-y;
}
.card-aura {
  position: absolute; inset: 8% 10%;
  border-radius: 40px;
  background: var(--card-glow);
  filter: blur(64px); opacity: .26;
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  transition: transform .5s ease, opacity .4s ease, background-color .3s;
  pointer-events: none;
}
.card-stage.is-hovering .card-aura { opacity: .38; }
.card-tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.card-stage.is-hovering .card-tilt { transition: transform .1s linear; }
.card-shadow {
  position: absolute; inset: 3% 4% 1%;
  border-radius: 5%;
  box-shadow: 0 40px 70px -18px rgba(0, 0, 0, .95), 0 12px 24px -8px rgba(0, 0, 0, .7);
}
.card-host { position: absolute; inset: 0; }
.card-host svg { display: block; width: 100%; height: 100%; }

.stage-meta { position: relative; margin: 0; color: var(--ui-faint); text-align: center; font-size: 11.5px; }
.stage-meta span { color: var(--ui-dim); font-weight: 600; }

.drop-overlay {
  position: absolute; inset: 14px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--ui-accent); border-radius: 16px;
  background: var(--ui-scrim); backdrop-filter: blur(3px);
  font-weight: 700; color: var(--ui-accent-text);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.stage.is-dragging .drop-overlay { opacity: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 10px;
  /* Dark in both themes, as notifications usually are, so its text is set
     here rather than inherited from a page that may be light. */
  background: #1c2130; border: 1px solid rgba(255, 255, 255, .12); color: #eef0f6;
  box-shadow: 0 12px 30px var(--ui-shadow);
  font-size: 13px; font-weight: 600;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* A toast with a button (Undo): it takes the pointer while it shows. */
.toast.has-act { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; }
.toast.has-act.show { pointer-events: auto; }
.toast-act { border: 0; border-radius: 7px; padding: 6px 12px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.toast-act:hover, .toast-act:focus-visible { background: rgba(255, 255, 255, .24); outline: none; }
/* The in-app name and question dialog (UX-01): above any other dialog. */
#askOverlay { z-index: 75; }
.modal-ask { width: min(460px, calc(100vw - 32px)); }
.modal-ask #askArea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; resize: vertical; }
.modal-ask #askText { color: var(--ui-dim); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 380px) {
  .chip-grid { grid-template-columns: repeat(2, 1fr); }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* =====================================================================
   LAYOUT EDITOR (Stage 1)
   ===================================================================== */

/* ---------- Layer list ---------- */
.layer-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.layer-row {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 2px; border-radius: 8px;
  border: 1px solid var(--ui-line); background: var(--ui-bg);
  transition: border-color .12s, background-color .12s;
}
.layer-row:hover { border-color: var(--ui-line-2); }
.layer-row.is-selected { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.layer-row.is-hidden .layer-name { color: var(--ui-faint); text-decoration: line-through; }
.layer-row.sortable-ghost { opacity: .35; }
.layer-row.sortable-chosen { box-shadow: 0 8px 20px var(--ui-shadow); }
.drag-handle {
  width: 22px; height: 30px; flex: none; cursor: grab;
  display: grid; place-items: center; color: var(--ui-faint);
}
.drag-handle svg { width: 14px; height: 14px; fill: currentColor; }
.drag-handle:hover { color: var(--ui-text); }
.layer-name {
  flex: 1; min-width: 0; text-align: left;
  border: 0; background: none; padding: 6px 4px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-tag { font-size: 10.5px; font-weight: 700; color: var(--ui-faint); margin-left: 4px; }

/* ---------- Icon buttons (layers + inspector) ---------- */
.icon-btn {
  width: 30px; height: 30px; flex: none; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ui-dim);
  transition: color .12s, background-color .12s, border-color .12s;
}
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--ui-text); background: var(--ui-panel-2); }
.icon-btn[aria-pressed="true"] { color: var(--ui-strong); background: var(--ui-accent-soft-2); border-color: color-mix(in srgb, var(--ui-accent) 50%, transparent); }
.layer-row .icon-btn { width: 28px; height: 28px; }

/* ---------- Inspector ---------- */
.insp-empty { margin: 0 0 4px; font-size: 12.5px; color: var(--ui-faint); line-height: 1.5; }
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.insp-head strong { font-size: 14px; }
.insp-head-actions { display: flex; gap: 2px; }
.insp-range { display: grid; grid-template-columns: 62px 1fr 78px; align-items: center; gap: 8px; margin-bottom: 4px; }
.insp-range label { font-size: 12px; font-weight: 600; color: var(--ui-dim); }
.unit-input { position: relative; display: block; }
.unit-input .input { padding: 6px 20px 6px 8px; text-align: right; }
.unit-input span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--ui-faint); pointer-events: none; }
.insp-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--ui-dim); }
.icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.icon-row .icon-btn { width: 100%; height: 34px; border-color: var(--ui-line-2); background: var(--ui-bg); }
.icon-row .icon-btn:hover { border-color: var(--ui-accent); }
.insp-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 4px; }
.insp-actions .btn { padding: 0 6px; font-size: 12px; }
.btn-danger:hover { color: var(--ui-danger-text); background: rgba(244, 63, 94, .24); border-color: rgba(244, 63, 94, .7); }

/* ---------- Stage toolbar ---------- */
.stage-toolbar {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--ui-float); border: 1px solid var(--ui-line-2); border-radius: 10px;
  box-shadow: 0 8px 24px var(--ui-shadow); backdrop-filter: blur(6px);
}
.tool {
  height: 32px; min-width: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 7px; background: transparent; color: var(--ui-dim);
  font-size: 12.5px; font-weight: 600;
}
.tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-panel-2); }
.tool:disabled { opacity: .35; cursor: not-allowed; }
.tool[aria-pressed="true"] { color: var(--ui-strong); background: var(--ui-accent-soft-2); }
.tool-sep { width: 1px; height: 20px; background: var(--ui-line-2); margin: 0 4px; }
#btnDone { color: var(--ui-on-accent); background: var(--ui-accent); }
#btnDone[hidden] { display: none; }

/* ---------- Card editing states ---------- */
.card-stage.has-selection .card-tilt { transform: none !important; transition: none !important; }
/* D1: layers hold still while something is being edited, or the handles would drift off them */
.card-stage.has-selection, .stage.is-zoomed .card-stage { --plx: 0px !important; --ply: 0px !important; }
.card-stage.has-selection { touch-action: none; }
.card-host .hit { cursor: move; }
.card-host .is-locked .hit { cursor: default; }
.card-stage.is-dragging-layer, .card-stage.is-dragging-layer * { cursor: grabbing !important; }

/* ---------- Selection overlay (never exported) ---------- */
.edit-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.edit-overlay * { vector-effect: non-scaling-stroke; }
.edit-overlay .hover-box { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-dasharray: 4 4; }
.edit-overlay .sel-box { fill: rgba(143, 155, 255, .06); stroke: #8f9bff; stroke-width: 1.5; }
.edit-overlay .sel-box.is-locked { stroke: #ffb454; stroke-dasharray: 6 4; fill: none; }
.edit-overlay .rot-line { stroke: #8f9bff; stroke-width: 1.2; }
.edit-overlay .handle { fill: #fff; stroke: #5a67e8; stroke-width: 1.5; pointer-events: none; }
.edit-overlay .handle-rot { fill: #8f9bff; stroke: #fff; }
.edit-overlay .handle-hit { fill: transparent; pointer-events: all; cursor: nwse-resize; touch-action: none; }
.edit-overlay .handle-hit[data-corner="1"], .edit-overlay .handle-hit[data-corner="3"] { cursor: nesw-resize; }
.edit-overlay .handle-hit[data-handle="rotate"] { cursor: grab; }
.edit-overlay .guide { stroke: #ff4fd8; stroke-width: 1; stroke-dasharray: 5 4; }
.edit-overlay .size-tag rect { fill: #5a67e8; }
.edit-overlay .size-tag text { fill: #fff; font: 600 11px system-ui, sans-serif; }

@media (max-width: 760px) {
  .tool { height: 36px; min-width: 36px; }
}

/* ---------- Stage 2: text styling controls ---------- */

/* The text panel toggles rows that carry .field / .row-2 / .insp-range,
   whose explicit `display` would otherwise outrank the UA's [hidden]
   rule and leave them on screen. */
[hidden] { display: none !important; }

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-dim) 50%), linear-gradient(135deg, var(--ui-dim) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.input option { background: var(--ui-bg); color: var(--ui-text); }

.input.color {
  padding: 2px;
  height: 32px;
  width: 100%;
  cursor: pointer;
  background: var(--ui-bg);
}
.input.color::-webkit-color-swatch-wrapper { padding: 0; }
.input.color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.input.color::-moz-color-swatch { border: 0; border-radius: 4px; }

.ts-more { margin: 10px 0 4px; border: 1px solid var(--ui-line-2); border-radius: 8px; background: var(--ui-bg); }
.ts-more > summary {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-dim);
  list-style: none;
  user-select: none;
}
.ts-more > summary::-webkit-details-marker { display: none; }
.ts-more > summary::before { content: '▸'; display: inline-block; width: 12px; color: var(--ui-faint); }
.ts-more[open] > summary::before { content: '▾'; }
.ts-more > summary:hover { color: var(--ui-text); }
.ts-more > *:not(summary) { margin-left: 10px; margin-right: 10px; }
.ts-more > *:last-child { margin-bottom: 10px; }

#inspText .toggle { margin: 10px 0 2px; }
.btn-wide { width: 100%; margin-top: 10px; }

/* ---------- Stage 3: design tab ---------- */
.orn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scroll) transparent;
}
.orn-btn {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 6px;
  border: 1px solid var(--ui-line-2);
  border-radius: 8px;
  background: var(--ui-bg);
  color: var(--ui-dim);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.orn-btn:hover { border-color: var(--ui-accent); color: var(--ui-text); background: var(--ui-panel); }
.orn-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.orn-btn svg { width: 100%; height: 100%; display: block; }
#ornCredit { margin-top: 10px; }
.orn-tile { position: relative; }
.orn-tile .orn-btn { width: 100%; }
.orn-del {
  position: absolute; top: -5px; right: -5px;
  width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ui-line-2); border-radius: 50%;
  background: var(--ui-panel); color: var(--ui-dim);
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.orn-tile:hover .orn-del, .orn-del:focus-visible { opacity: 1; }
.orn-del:hover { color: var(--ui-text); border-color: var(--ui-accent); }
@media (pointer: coarse) { .orn-del { opacity: 1; } }
/* ---------- Add tab ---------- */
.add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.add-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--ui-line-2); border-radius: 10px;
  background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.add-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ui-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.add-btn:hover { border-color: var(--ui-accent); background: var(--ui-panel); }
.add-btn:focus-visible, .chip-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip-btn {
  padding: 6px 10px; border: 1px solid var(--ui-line-2); border-radius: 999px;
  background: var(--ui-bg); color: var(--ui-dim); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.chip-btn:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.tpl-thumb.blank { background: repeating-linear-gradient(135deg, #1a1d29 0 8px, #222637 8px 16px); outline: 1px dashed #5b6280; outline-offset: -4px; }

/* ---------- Folding sections ---------- */
.group-toggle {
  all: unset; cursor: pointer;
  font: inherit; color: inherit;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 6px;
  border-radius: 9px;
}
.group-toggle svg { width: 14px; height: 14px; fill: none; stroke: var(--ui-dim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.group-toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.group.is-folded .group-toggle svg { transform: rotate(0deg); }
.group.is-folded { padding-bottom: 4px; }
.group.is-folded > .group-title { margin-bottom: 0; }
.group.is-folded > :not(.group-title) { display: none !important; }

/* ---------- Stage 4: gradient stops and eyedropper ---------- */
.grad-row { display: grid; grid-template-columns: 44px 1fr 1fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.grad-row .input { padding: 6px; text-align: center; }
.grad-row .icon-btn { width: 32px; height: 32px; }
.cf-pick {
  width: 26px; height: 26px; flex: none; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ui-line-2); border-radius: 6px;
  background: var(--ui-bg); color: var(--ui-dim);
}
.cf-pick:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.cf-pick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Custom fields ---------- */
.fld {
  margin-bottom: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-bg);
}
.fld-head { display: grid; grid-template-columns: 1fr 110px 32px; gap: 6px; align-items: center; }
.fld-head .input { padding: 7px 8px; }
/* the arrow needs its own room, or "Paragraph" runs underneath it */
.fld-head select.input { padding-right: 24px; }
.fld-head .icon-btn { width: 32px; height: 32px; }
.fld textarea.input { min-height: 46px; }
.fld-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fld-add {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px;
  border: 1px solid var(--ui-line-2); border-radius: 6px; background: transparent;
  color: var(--ui-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.fld-add:hover { color: var(--ui-text); border-color: var(--ui-accent); }
.fld-add svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fld-uses { font-size: 11px; color: var(--ui-faint); }

/* ---------- Accounts ---------- */
.auth-slot { display: flex; align-items: center; gap: 8px; }
.auth-gate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 24px; background: var(--ui-scrim-strong); backdrop-filter: blur(10px);
}
.auth-gate[hidden] { display: none !important; }
.auth-gate-card {
  width: min(400px, 100%); padding: 30px 28px 24px; text-align: center;
  background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 16px;
  box-shadow: 0 30px 80px var(--ui-shadow-strong);
}
.auth-gate-card .brand-mark { width: 44px; height: 44px; margin-bottom: 14px; }
.auth-gate-card h2 { margin: 0 0 10px; font-size: 21px; font-weight: 750; color: var(--ui-strong); }
.auth-gate-card > p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--ui-dim); }
.auth-gate-actions { display: flex; flex-direction: column; gap: 8px; }
.auth-gate-card .hint { margin: 16px 0 0; }
.auth-gate-card .hint a { color: var(--ui-dim); text-decoration: none; }
.auth-gate-card .hint a:hover { color: var(--ui-text); text-decoration: underline; }
body.is-locked { overflow: hidden; }
.auth-google { display: flex; justify-content: center; margin-bottom: 4px; }
.auth-or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 16px; font-size: 11.5px; color: var(--ui-faint);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--ui-line); }
.auth-modal { max-width: 420px; }
.auth-form { padding: 16px 18px 18px; }
.auth-form .toggle { margin: 4px 0 12px; }
.auth-pass { position: relative; display: flex; align-items: center; }
.auth-pass .input { flex: 1; padding-right: 42px; }
.auth-pass .icon-btn { position: absolute; right: 4px; width: 32px; height: 32px; border: 0; background: none; }
.auth-error {
  margin: 0 0 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--ui-danger-text); background: var(--ui-danger-bg);
  border: 1px solid var(--ui-danger-line); border-radius: 8px;
}
.auth-swap { margin: 12px 0 0; font-size: 12.5px; color: var(--ui-faint); text-align: center; }
.auth-swap[hidden] { display: none !important; }
.auth-notice {
  margin: 0 0 12px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  color: var(--ui-ok-text); background: var(--ui-ok-bg);
  border: 1px solid var(--ui-ok-line); border-radius: 8px;
}
.auth-legal a, .pricing-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pricing-legal { margin: 14px auto 0; max-width: 640px; text-align: center; font-size: 12.5px; color: var(--ui-faint); }
.auth-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.acct { display: flex; align-items: center; gap: 8px; position: relative; }
.acct-dot {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 50%; font-size: 12px; font-weight: 700; color: #0b0e16;
  background: linear-gradient(135deg, #8fe9ff, #c9a6ff 55%, #e9b95c);
}
.acct-name { font-size: 12.5px; font-weight: 600; color: var(--ui-text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-owner { font-size: 12px; color: var(--ui-faint); }
.lib-sync { font-size: 12px; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.lib-sync.is-warn { color: var(--ui-warn-text); }
#btnSync svg { width: 15px; height: 15px; }
body.has-overlay { overflow: hidden; }

/* ---------- AI assist ---------- */
.ai-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 4px; }
.ai-row .btn { height: 38px; padding: 0 14px; }
#btnAIWrite { margin-top: 4px; }
#aiStatus { color: var(--ui-dim); }
.insp-note { margin: -4px 0 11px; font-size: 12px; color: var(--ui-faint); line-height: 1.5; }
.insp-note strong { color: var(--ui-dim); font-weight: 600; }
.linkish {
  padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--ui-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--ui-text); }

/* ---------- Looks and the restore notice ---------- */
.look-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.look {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 8px; border: 1px solid var(--ui-line-2); border-radius: 10px;
  background: var(--ui-bg); color: var(--ui-text);
  transition: border-color .15s, background-color .15s;
}
.look:hover { border-color: var(--ui-accent); background: var(--ui-panel-2); }
.look[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.look-swatch { width: 26px; height: 36px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.look-text { display: flex; flex-direction: column; min-width: 0; }
.look-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-hint { font-size: 11px; color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.restore-bar {
  display: flex; align-items: center; gap: 9px;
  margin: 10px auto 0; padding: 8px 12px; max-width: 520px;
  border: 1px solid var(--ui-line-2); border-radius: 9px;
  background: var(--ui-panel); color: var(--ui-dim); font-size: 12.5px;
}
.restore-bar svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ui-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.restore-bar span { flex: 1; }
.restore-bar .link-btn { margin: 0; flex: none; }

/* ---------- Card library ---------- */
body.modal-open { overflow: hidden; }
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--ui-scrim);
  backdrop-filter: blur(3px);
}
.modal {
  width: min(1040px, 100%); max-height: min(84vh, 820px);
  display: flex; flex-direction: column;
  background: var(--ui-bg-2);
  border: 1px solid var(--ui-line-2); border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px var(--ui-shadow-strong);
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--ui-line);
}
.modal-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.modal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.modal-actions .icon-btn { width: 36px; height: 36px; }

.lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; padding: 16px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--ui-scroll) transparent;
}
.lib-grid > .hint { grid-column: 1 / -1; margin: 18px 4px; }
.lib-card { margin: 0; position: relative; display: flex; flex-direction: column; gap: 7px; }
.lib-open {
  display: block; padding: 0; width: 100%; position: relative;
  border: 1px solid var(--ui-line-2); border-radius: 9px; overflow: hidden;
  background: var(--ui-panel); line-height: 0;
  transition: border-color .15s, transform .12s;
}
.lib-open:hover { border-color: var(--ui-accent); transform: translateY(-2px); }
.lib-open img { width: 100%; height: auto; display: block; }
.lib-nothumb { display: block; width: 100%; aspect-ratio: 5 / 7; background: var(--ui-panel-2); }
.lib-card.is-current .lib-open { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.lib-badge {
  position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 20px;
  background: var(--ui-accent); color: var(--ui-on-accent); font-size: 10px; font-weight: 800; line-height: 1.6;
}
.lib-card figcaption { display: flex; flex-direction: column; min-width: 0; }
.lib-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-meta { font-size: 11px; color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.lib-card:hover .lib-actions, .lib-card:focus-within .lib-actions { opacity: 1; }
.lib-actions .icon-btn { width: 28px; height: 28px; background: var(--ui-float); }
.btn.is-busy { opacity: .6; pointer-events: none; }

@media (max-width: 620px) {
  .overlay { padding: 10px; }
  .modal-head { flex-wrap: wrap; }
  .modal-actions { width: 100%; margin-left: 0; }
  .modal-actions .btn { flex: 1; }
}

/* ---------- Zoom and pan ---------- */
.stage.is-zoomed { overflow: hidden; }
#btnZoom { font-variant-numeric: tabular-nums; min-width: 56px; }
.zoom-group { display: inline-flex; align-items: center; gap: 2px; }
.zoom-group #btnZoom[hidden] { display: none; }
/* Zoomed, the card must be redrawn at the new size, not a snapshot of it
   stretched: the tilt's 3D layer (will-change, preserve-3d, perspective) is
   rasterised once at 100%, and at 800% every edge was a block of pixels. */
.stage.is-zoomed .card-stage { perspective: none; }
.stage.is-zoomed .card-tilt { transform: none !important; transition: none !important; will-change: auto; transform-style: flat; }
.stage.is-zoomed .card-shadow { display: none; }
.stage.is-space, .stage.is-space * { cursor: grab !important; }
.stage.is-panning, .stage.is-panning * { cursor: grabbing !important; }
.stage.is-zoomed:not(.is-panning) { cursor: grab; }
.stage.is-zoomed .stage-toolbar, .stage.is-zoomed .card-stage { cursor: auto; }

/* ---------- Swatches for the three later templates ---------- */
.seg-dot.verdant { background: linear-gradient(135deg, #6fd184, #1f4d2e); box-shadow: 0 0 6px rgba(111, 209, 132, .55); }
.seg-dot.prism   { background: linear-gradient(135deg, #19d3ff, #ff4d7d); box-shadow: 0 0 8px rgba(25, 211, 255, .6); }
.seg-dot.ashen   { background: linear-gradient(135deg, #d8763a, #3b2a22); box-shadow: 0 0 6px rgba(216, 118, 58, .5); }
.tpl-thumb.verdant { background: linear-gradient(160deg, #101a12 0 42%, #4f9d5d 42% 70%, #d8b45a 70%); }
.tpl-thumb.prism   { background: linear-gradient(160deg, #0b0f14 0 38%, #19d3ff 38% 68%, #ff4d7d 68%); }
.tpl-thumb.ashen   { background: linear-gradient(160deg, #14100e 0 40%, #8d7f74 40% 68%, #d8763a 68%); }
.seg-dot.tavern  { background: linear-gradient(135deg, #e3ab4a, #b8452f); box-shadow: 0 0 6px rgba(227, 171, 74, .5); }
.seg-dot.gacha   { background: linear-gradient(135deg, #ffe27a, #f2a81d); box-shadow: 0 0 8px rgba(242, 168, 29, .6); }
.tpl-thumb.tavern  { background: linear-gradient(160deg, #21150c 0 38%, #f3e4c4 38% 66%, #b8452f 66%); }
.tpl-thumb.gacha   { background: linear-gradient(160deg, #f2a81d 0 44%, #1c1330 44% 72%, #ffe27a 72%); }
.seg-dot.tarot    { background: linear-gradient(135deg, #f3d58a, #1c1f45); box-shadow: 0 0 6px rgba(214, 178, 94, .55); }
.seg-dot.stadium  { background: linear-gradient(135deg, #f4f4f2, #d62839); box-shadow: 0 0 6px rgba(214, 40, 57, .5); }
.seg-dot.hologram { background: linear-gradient(135deg, #3de8ff, #0b3a4a); box-shadow: 0 0 8px rgba(61, 232, 255, .65); }
.seg-dot.pixel    { background: linear-gradient(135deg, #ffd23f, #2a56c6); border-radius: 0; box-shadow: 0 0 6px rgba(42, 86, 198, .6); }
.seg-dot.manga    { background: linear-gradient(135deg, #fffaf0, #e63946); box-shadow: 0 0 6px rgba(230, 57, 70, .5); }
.tpl-thumb.tarot    { background: radial-gradient(circle at 50% 42%, #1c1f45 0 34%, transparent 35%), linear-gradient(160deg, #0a0b1f 0 70%, #d6b25e 70%); outline: 1px solid #d6b25e; outline-offset: -4px; }
.tpl-thumb.stadium  { background: linear-gradient(160deg, #0d1321 0 56%, #d62839 56% 72%, #0d1321 72%); outline: 3px solid #f4f4f2; outline-offset: -3px; }
.tpl-thumb.hologram { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px), linear-gradient(180deg, #03080d 0 30%, #0b3a4a 30% 66%, #3de8ff 66% 70%, #03080d 70%); }
.tpl-thumb.pixel    { background: linear-gradient(180deg, #2a56c6 0 18%, #0b0d1c 18% 60%, #2a56c6 60%); border-radius: 0; outline: 2px solid #e8ecf7; outline-offset: -3px; }
.tpl-thumb.manga    { background: linear-gradient(160deg, #fffaf0 0 50%, #e63946 50% 62%, #fffaf0 62%); outline: 2px solid #161616; outline-offset: -3px; }

/* The picker only shows on phones now (see the header rules): twelve buttons
   wrapped to four rows there, so it is one row that scrolls sideways. A scroll
   container's minimum width is zero, so it cannot widen the header. */
@media (max-width: 760px) {
  .app-header .segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .app-header .segmented::-webkit-scrollbar { display: none; }
  .app-header .seg-btn { flex: none; white-space: nowrap; }
}

/* Shape tiles read better with a little breathing room than emblems do. */
#shapeGrid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: none; }
#shapeGrid .orn-btn { padding: 9px; }

/* The "picked up where you left off" bar takes a row of its own, so the card
   gives up that height while it shows. Without this the toolbar was pushed
   35px under the header on every screen up to about 1080px tall. */
.stage:has(.restore-bar:not([hidden])) .card-stage {
  width: min(100%, 520px, calc((100vh - var(--header-h) * var(--ui-z) - 210px) * 0.7142857));
}

/* ---------- Several layers selected ---------- */
.edit-overlay .sel-box.is-member { fill: rgba(143, 155, 255, .05); stroke-dasharray: 5 3; }
.edit-overlay .group-box { fill: none; stroke: #8f9bff; stroke-width: 1.5; }
.icon-row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#inspMulti .row-2 { margin-bottom: 10px; }
.layer-tag.is-group { background: var(--ui-accent-soft-2); color: var(--ui-accent-text); }

/* ---------- Effects panel ---------- */
.fx-sec > summary { display: flex; align-items: center; gap: 8px; }
.fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-line-2); flex: none; margin-left: auto; }
.fx-sec.is-on .fx-dot { background: var(--ui-accent); box-shadow: 0 0 6px var(--ui-accent); }
.fx-shadow { border: 1px solid var(--ui-line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.fx-shadow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 12px; }
.layer-tag.is-fx { background: var(--ui-warn-bg); color: var(--ui-warn-text); }

/* ---------- Precise layout ---------- */
.edit-overlay .handle-hit[data-handle="side"][data-side="0"], .edit-overlay .handle-hit[data-handle="side"][data-side="2"] { cursor: ns-resize; }
.edit-overlay .handle-hit[data-handle="side"][data-side="1"], .edit-overlay .handle-hit[data-handle="side"][data-side="3"] { cursor: ew-resize; }
.edit-overlay .handle-hit[data-handle="pivot"] { cursor: move; pointer-events: none; }
.edit-overlay.alt-down .handle-hit[data-handle="pivot"] { pointer-events: all; }
.edit-overlay .handle-hit[data-handle="grotate"] { cursor: grab; }
.edit-overlay .handle-side { fill: #fff; stroke: #8f9bff; stroke-width: 1.2; }
.edit-overlay .pivot-mark { fill: none; stroke: #ffcf6b; stroke-width: 1.4; }
.edit-overlay .grid-line { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.edit-overlay .bleed-box { fill: none; stroke: #ff6b6b; stroke-width: 1; stroke-dasharray: 6 4; }
.edit-overlay .safe-box { fill: none; stroke: #4ade80; stroke-width: 1; stroke-dasharray: 6 4; }
.edit-overlay .user-guide { stroke: #22d3ee; stroke-width: 1; }
.edit-overlay .guide-hit { stroke: transparent; pointer-events: stroke; cursor: grab; vector-effect: none; }
.edit-overlay .measure { stroke: #ff5fa2; stroke-width: 1.2; }
.edit-overlay .measure.is-equal { stroke: #ffd166; }
.edit-overlay .measure-label { fill: #ff5fa2; text-anchor: middle; font-family: 'Segoe UI', sans-serif; font-weight: 700; }
.edit-overlay .measure-label.is-equal { fill: #ffd166; }
.ruler { position: absolute; z-index: 3; touch-action: none; cursor: crosshair; border-radius: 3px; }
.ruler-top { left: 0; top: -22px; }
.ruler-left { top: 0; left: -22px; }
.view-menu { position: relative; }
.view-menu > summary { list-style: none; cursor: pointer; }
.view-menu > summary::-webkit-details-marker { display: none; }
.view-pop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 20;
  width: 250px; padding: 12px; border: 1px solid var(--ui-line-2); border-radius: 12px;
  background: var(--ui-bg-2); box-shadow: 0 18px 40px var(--ui-shadow);
}
.pivot-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; }
.pivot-grid button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ui-line-2); background: var(--ui-bg); cursor: pointer; position: relative; }
.pivot-grid button::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--ui-dim); }
.pivot-grid button[aria-pressed="true"] { border-color: var(--ui-accent); }
.pivot-grid button[aria-pressed="true"]::after { background: var(--ui-accent); }
#el-lock { margin: -4px 0 10px; }
#el-lock[aria-pressed="true"] { color: var(--ui-accent); font-weight: 700; }

/* ---------- Drawing ---------- */
.card-stage.is-pen, .card-stage.is-pen .card-host, .card-stage.is-pen .card-host * { cursor: crosshair !important; }
.edit-overlay .pen-path { fill: none; stroke: #22d3ee; stroke-width: 1.6; }
.edit-overlay .pen-rubber { fill: none; stroke: #22d3ee; stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.edit-overlay .node { fill: #0c0f18; stroke: #22d3ee; stroke-width: 1.5; }
.edit-overlay .node.is-first { fill: #22d3ee; }
.edit-overlay .node.is-selected { fill: #22d3ee; stroke: #fff; }
.edit-overlay .node-arm { stroke: #22d3ee; stroke-width: 1; opacity: .7; }
.edit-overlay .node-handle { fill: #fff; stroke: #22d3ee; stroke-width: 1.2; }
.edit-overlay .node-hit { cursor: move; }
.edit-overlay .seg-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: copy; vector-effect: none; }
#btnPen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#btnPen[aria-pressed="true"], .add-btn[aria-pressed="true"] { color: var(--ui-text); background: color-mix(in srgb, var(--ui-accent-2) 16%, transparent); border-color: var(--ui-accent-2); }
.stage-hint { color: var(--ui-accent-2); }
[data-convert] { margin-bottom: 10px; }

/* ---------- Data-driven fields (13n) ---------- */
.fld-row3, .row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fld-mini { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ui-dim); }
.fld-note { margin: 4px 0 0; font-size: 12px; color: var(--ui-dim); }
.fld-note.is-error { color: var(--ui-danger-text); }
.fld .input + .input, .fld .input + select { margin-top: 6px; }
.fld-expr { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.fld-pic { display: flex; align-items: center; gap: 10px; }
.fld-pic img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ui-line); }
#dsRarityRows .field-inline label { min-width: 90px; }
#fieldList code, #keywordsGroup code { font-size: 11px; padding: 0 3px; border-radius: 3px; background: var(--ui-panel-2); }

/* ---------- Reuse: templates, components, faces (13o) ---------- */
.mytpl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mytpl { display: flex; align-items: center; gap: 6px; }
.mytpl-use { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--ui-line); background: var(--ui-panel-2); color: var(--ui-text); text-align: left; cursor: pointer; }
.mytpl-use:hover { border-color: var(--ui-accent); }
.mytpl-use img, .mytpl-use .lib-nothumb { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; }
.mytpl-use span { display: flex; flex-direction: column; min-width: 0; }
.mytpl-use strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mytpl-use small { font-size: 11px; color: var(--ui-dim); }
.comp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.comp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--ui-line); background: var(--ui-panel-2); color: var(--ui-text); cursor: pointer; font-weight: 600; text-align: left; }
.comp-name small { font-weight: 400; font-size: 11px; color: var(--ui-dim); }
.face-toggle { display: inline-flex; gap: 2px; }
#inspStyle .row-2 { gap: 6px; }

/* ---------- Production dialog (13p) ---------- */
.modal-prod { width: min(760px, calc(100vw - 32px)); }
.prod-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.prod-tabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ui-line); background: transparent; color: var(--ui-dim); cursor: pointer; font: inherit; font-size: 13px; }
.prod-tabs button[aria-selected="true"] { background: var(--ui-panel-2); color: var(--ui-text); border-color: var(--ui-accent); }
.prod-body { padding: 16px 20px 20px; overflow: auto; max-height: calc(100vh - 160px); display: flex; flex-direction: column; gap: 12px; }
.prod-body section { display: flex; flex-direction: column; gap: 10px; }
.btn-file { cursor: pointer; }
.bmap { display: grid; gap: 6px 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bmap-row { display: flex; align-items: center; gap: 8px; }
.bmap-col { flex: 0 0 90px; font-size: 12px; color: var(--ui-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-basis: 80px; }
.bmap-row .input { flex: 1; min-width: 0; }
.bprev { width: 100%; border-collapse: collapse; font-size: 12px; }
.bprev th, .bprev td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--ui-line); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bprev th { color: var(--ui-dim); font-weight: 600; }
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px 10px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.chk .input-sm { width: 64px; }
.sheet-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.sheet-card { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--ui-line); border-radius: var(--radius-sm); font-size: 12px; }
.sheet-card img { width: 28px; height: 40px; object-fit: cover; border-radius: 3px; }
.sheet-card span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-card .input-sm { width: 52px; }
.prod-opts { align-items: end; }
.prod-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prod-foot .hint { flex: 1; margin: 0; }
.prod-bar { flex: 1 0 100%; height: 6px; border-radius: 3px; background: var(--ui-panel-2); overflow: hidden; }
.prod-bar span { display: block; height: 100%; width: 0; background: var(--ui-accent); transition: width .2s; }
.modal-prod .modal-head { position: relative; padding-right: 64px; flex-wrap: wrap; }
.modal-prod .modal-actions { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: auto; left: auto; margin: 0; }
#batchPreview { overflow-x: auto; }
@media (max-width: 520px) { .modal-prod .modal-actions { top: 14px; transform: none; } }

/* ---------- Textures and symbols (13q) ---------- */
.tex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tex-btn { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--ui-line); background: var(--ui-panel-2); color: var(--ui-text); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.tex-btn:hover { border-color: var(--ui-accent); }
.tex-sw { width: 22px; height: 22px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.sym-grid .sym-btn svg { width: 22px; height: 22px; }
.sym-row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.sym-row .input-sm { flex: 1; min-width: 0; }
.sym-row .sym-btn { width: 38px; height: 38px; flex: none; }
.sym-brace { color: var(--ui-dim); font-family: ui-monospace, Consolas, monospace; }

/* ---------- Selling: PSD and previews (13r) ---------- */
.psd-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--ui-dim); }
.psd-list { max-height: 300px; overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--radius-sm); }
.psd-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--ui-line); }
.psd-row:last-child { border-bottom: 0; }
.psd-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psd-name small { color: var(--ui-dim); }
.psd-row .input-sm { width: 130px; flex: none; }
.psd-row.is-merged .psd-name { color: var(--ui-dim); padding-left: 0; }
.psd-row.is-merged .psd-name::before { content: none; }
.psd-row.is-out .psd-name { text-decoration: line-through; color: var(--ui-dim); }
.psd-row.is-merged .psd-name::after { content: '  merges into the layer below \2193'; font-size: 11px; color: var(--ui-dim); }
@media (max-width: 520px) {
  .modal-prod .row-3 { grid-template-columns: 1fr; }
  .psd-row .input-sm { width: 118px; }
}

.sym-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sym-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 8px; border: 1px solid var(--ui-line); border-radius: 999px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.sym-chip .icon-btn { width: 24px; height: 24px; }

/* ---------- Card back designs ---------- */
.back-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 10px; }
.back-tile { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--ui-line); border-radius: var(--radius-sm); background: var(--ui-panel-2); color: var(--ui-text); cursor: pointer; font: inherit; text-align: left; }
.back-tile:hover { border-color: var(--ui-accent); }
.back-tile[aria-pressed="true"] { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.back-thumb { display: block; aspect-ratio: 750 / 1050; border-radius: 4px; background: var(--ui-bg-2) center / cover no-repeat; }
.back-label { display: flex; flex-direction: column; min-width: 0; }
.back-label strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-label small { font-size: 10px; color: var(--ui-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The Front/Back pair filled the stage toolbar at phone width: let it wrap
   (Done appears when a layer is selected), and keep the View menu's popover
   on screen by anchoring it to the right edge instead of centring it. */
@media (max-width: 760px) {
  .stage-toolbar {
    /* One row that scrolls sideways, never two. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    justify-content: flex-start;
  }
  .view-pop { left: auto; right: 0; transform: none; max-width: calc(100vw - 24px); }
}
/* Long labels in two-column rows wrap rather than widening the whole
   phone layout: 1fr alone cannot shrink below its content. */
#backGroup .btn { white-space: normal; height: auto; min-height: 36px; line-height: 1.2; }

/* ---------- Element art ---------- */
.ta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.ta-source {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 12px; padding: 8px 10px;
  border: 1px solid var(--ui-line); border-radius: var(--radius-sm); background: var(--ui-panel-2); font-size: 12.5px; color: var(--ui-text);
}
.ta-source:empty { display: none; }
.ta-src-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ta-src-text small { font-size: 11px; color: var(--ui-dim); }
.ta-src-actions { display: flex; gap: 12px; }
.ta-edited { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--ui-warn-text); background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); vertical-align: 1px; }
.ta-site { margin-bottom: 12px; }
.ta-site-head { margin: 0 0 6px; font-size: 12px; font-weight: 650; color: var(--ui-dim); }
.ta-site-hint { display: block; font-weight: 400; font-size: 11px; color: var(--ui-faint); margin-top: 1px; }
.ta-sets { display: flex; flex-direction: column; gap: 6px; }
.ta-set {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px 9px; text-align: left; cursor: pointer;
  border: 1px solid var(--ui-line); border-radius: var(--radius-sm); background: var(--ui-panel-2); color: var(--ui-text);
}
.ta-set:hover { border-color: var(--ui-hover-line); }
.ta-set.is-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ta-set.is-on::after {
  content: "✓"; position: absolute; top: 7px; right: 9px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--ui-accent); color: var(--ui-on-accent);
}
.ta-set-head { display: flex; flex-direction: column; min-width: 0; padding-right: 24px; }
.ta-set-head strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-set-head small { font-size: 11px; color: var(--ui-dim); }
.ta-set-pics { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.ta-set-pics img, .ta-set-pics svg { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.ta-set-pics .ta-miss { opacity: .35; padding: 2px; box-sizing: border-box; }
.ta-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ta-pick { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px dashed var(--ui-line-2); background: var(--ui-panel-2); cursor: pointer; padding: 4px; display: grid; place-items: center; overflow: hidden; }   /* or a tall (5:7) picture stretches its square */
.ta-pick img { width: 100%; height: 100%; object-fit: contain; }
.ta-pick svg { width: 26px; height: 26px; }
.ta-slot.is-current .ta-pick { border: 1px solid var(--ui-accent); }
.ta-name { font-size: 11px; color: var(--ui-dim); }
.ta-del { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ui-line-2); background: var(--ui-bg-2); color: var(--ui-text); cursor: pointer; font-size: 13px; line-height: 1; }

.ta-rep { position: absolute; top: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ui-line-2); background: var(--ui-bg-2); color: var(--ui-text); cursor: pointer; font-size: 12px; line-height: 1; }

/* Rarity and element looks */
.rl-tabs { margin: 6px 0 10px; }
.rl-tab { display: inline-flex; align-items: center; gap: 6px; }
.rl-tab.is-on { border-color: var(--ui-accent); color: var(--ui-text); background: color-mix(in srgb, var(--ui-accent) 14%, transparent); }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.et-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 10px; }
.et-swatches.is-off { opacity: .45; }
.et-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ui-dim); }
.et-sw input { width: 100%; height: 28px; padding: 0; border: 1px solid var(--ui-line-2); border-radius: 6px; background: none; cursor: pointer; }
.et-sw input:disabled { cursor: not-allowed; }

/* Custom stats */
.stat-name {
  /* A stat's name, renamed in place (2026-10-18). Reads as the label until clicked. */
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  margin-left: -6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.stat-custom .fld-foot { margin-top: 6px; }
.stat-custom .icon-btn { flex: none; }
#btnAddStat { margin-top: 8px; }
#btnAddStat:disabled { opacity: .5; cursor: not-allowed; }
#customChips { display: contents; }

/* ---------- Plans: badges, the account menu, upgrades ----------
   Shared by the editor, the homepage and the account page. A plan's colour:
   Free is neutral, Pro the accent, Studio gold. */
.plan-badge {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px; margin-left: 2px;
  border-radius: 20px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #07080d; background: linear-gradient(135deg, #a3f5ff, #b9a8ff); vertical-align: middle; flex: none;
}
.is-locked .plan-badge { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; }
.btn.is-locked, .template-opt.is-locked, .seg-btn.is-locked { position: relative; }
.template-opt.is-locked .tpl-thumb, .seg-btn.is-locked .seg-dot { filter: grayscale(.55) brightness(.8); }
#btnProduction .plan-badge, #btnPSD .plan-badge, #btnPreviews .plan-badge,
.toggle > span .plan-badge { background: linear-gradient(135deg, #f6dc9a, #e9b95c); }

.plan-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--ui-dim); border: 1px solid var(--ui-line-2); background: var(--ui-panel);
}
.plan-chip.plan-pro { color: #07080d; border-color: transparent; background: linear-gradient(135deg, #a3f5ff, #b9a8ff); }
.plan-chip.plan-studio { color: #1a1204; border-color: transparent; background: linear-gradient(135deg, #f6dc9a, #e9b95c); }
.acct-btn {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px;
  border: 1px solid var(--ui-line-2); border-radius: 22px; background: var(--ui-panel);
  color: var(--ui-text); cursor: pointer; font: inherit;
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--ui-hover-line); background: var(--ui-panel-2); }
.acct-dot.has-pic { padding: 0; overflow: hidden; background: var(--ui-panel-2); }
.acct-dot.has-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The editor header has no room for a name: picture and plan only. */
[data-auth-compact] .acct-btn .acct-name { display: none; }
[data-auth-compact] .acct-btn { padding-right: 8px; }
/* Just above the phone layout the header is at its fullest: the picture alone. */
@media (min-width: 761px) and (max-width: 880px) { [data-auth-compact] .acct-btn .plan-chip { display: none; } }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: 264px;
  padding: 6px; border: 1px solid var(--ui-line-2); border-radius: 12px;
  background: var(--ui-bg-2); box-shadow: 0 24px 60px -12px var(--ui-shadow-strong);
}
.acct-menu[hidden] { display: none; }
.acct-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--ui-line); margin-bottom: 4px; }
.acct-menu-head .acct-dot { width: 34px; height: 34px; font-size: 14px; }
.acct-menu-head span { display: flex; flex-direction: column; min-width: 0; }
.acct-menu-head strong { font-size: 13px; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-head small { font-size: 11.5px; color: var(--ui-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ui-text); text-decoration: none; cursor: pointer;
}
.acct-item span { font-size: 11px; font-weight: 600; color: var(--ui-faint); }
.acct-item:hover, .acct-item:focus-visible { background: var(--ui-panel-2); outline: none; }
.acct-upgrade { color: var(--ui-accent); }
/* A demo visit (api/demo.php): the chip, the time left, and what it means. */
.plan-chip.plan-demo { color: var(--ui-on-accent); border-color: transparent; background: var(--ui-accent); }
.demo-btn { padding: 0 12px 0 8px; }
.demo-left { font-size: 12px; font-weight: 600; color: var(--ui-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 880px) { .demo-btn .demo-left { display: none; } .demo-btn { padding: 0 8px; } }
.acct-note { margin: 2px 4px 6px; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--ui-dim); }
.is-demo-off { opacity: .55; }
.is-demo-off:hover { opacity: .75; }
.demo-note { margin: 4px 0 10px; }
.demo-ended { z-index: 90; }
.demo-ended .modal { width: min(440px, 100%); }
.demo-ended-body p { margin: 0; padding: 16px; line-height: 1.55; color: var(--ui-text); }
.demo-ended-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.demo-ended-foot .btn { text-decoration: none; }
.acct-warn { margin: 4px 4px 6px; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--ui-warn-text); background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); border-radius: 8px; }

/* The upgrade dialog. */
.upsell-modal { width: min(760px, 100%); }
.upsell-body { padding: 16px 18px 18px; overflow-y: auto; }
.upsell-text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--ui-dim); }
.upsell-foot { margin: 12px 0 0; text-align: center; }
.upsell-foot a { color: var(--ui-accent); }

/* "Your plan changed: reload". */
.plan-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 16px; border: 1px solid var(--ui-line-2); border-radius: 12px;
  background: var(--ui-bg-2); box-shadow: 0 18px 50px -10px var(--ui-shadow-strong);
  font-size: 13px; color: var(--ui-text);
}

/* The plans table (pricing.js). */
.pricing-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pricing-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--ui-line-2); border-radius: 22px; background: var(--ui-bg); }
.pricing-toggle button {
  height: 30px; padding: 0 14px; border: 0; border-radius: 18px; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ui-dim);
}
.pricing-toggle button span { font-size: 11px; color: var(--ui-gold); }
.pricing-toggle button[aria-pressed="true"] { background: var(--ui-panel-2); color: var(--ui-text); }
.pricing-trial { margin: 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pricing-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-card {
  display: flex; flex-direction: column; padding: 18px; border-radius: 14px;
  border: 1px solid var(--ui-line-2); background: var(--ui-panel);
}
.plan-card.is-highlight { border-color: color-mix(in srgb, var(--ui-accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 35%, transparent) inset, 0 18px 44px -18px color-mix(in srgb, var(--ui-accent) 55%, transparent); }
.plan-card.is-current { border-color: var(--ui-ok-line); }
.plan-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.plan-card h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ui-strong); }
.plan-flag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-accent); }
.plan-price { margin: 12px 0 2px; display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ui-strong); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 13px; color: var(--ui-faint); }
.plan-sub { margin: 0 0 12px; min-height: 18px; font-size: 12.5px; color: var(--ui-faint); }
.plan-card ul { flex: 1; margin: 0 0 16px; padding: 0; list-style: none; }
.plan-card li { position: relative; padding: 5px 0 5px 22px; font-size: 13px; line-height: 1.45; color: var(--ui-dim); }
.plan-card li::before {
  content: ""; position: absolute; left: 3px; top: 10px; width: 9px; height: 5px;
  border-left: 2px solid var(--ui-accent); border-bottom: 2px solid var(--ui-accent); transform: rotate(-45deg);
}
.pricing-note { margin: 12px 0 0; min-height: 1em; font-size: 12.5px; color: var(--ui-ok-text); }
.pricing-note.is-bad { color: var(--ui-danger-text); }
.btn-danger { border-color: var(--ui-danger-line); color: var(--ui-danger-text); background: var(--ui-danger-bg); }
@media (max-width: 760px) {
  .pricing-grid, .pricing-grid.is-two { grid-template-columns: minmax(0, 1fr); }
  .acct-menu { position: fixed; top: 64px; right: 12px; left: auto; }
}

/* =====================================================================
   THE EDITOR SHELL (U1)
   A rail of sections on the left with one panel beside it, the card in
   the middle, and on the right the properties of whatever is selected, or
   of the card as a whole when nothing is. The top bar carries the card's
   name, a card menu, undo and redo, the library and export.

     >= 1024px   rail | panel | stage | properties   (the panel can hide)
     761-1023    rail | stage | properties, the panel slides over the stage
     <= 760      one column: stage, properties, rail as a row, panel
   ===================================================================== */

/* ---------- Top bar ---------- */
.app-header .brand-mark { width: 30px; height: 30px; filter: none; }
.app-header .brand .brand-name { font-size: 19px; letter-spacing: .14em; }
:root[data-theme="light"] .brand .brand-name { background: linear-gradient(90deg, #0b0d14, #3a2c12 55%, #a8741a); -webkit-background-clip: text; background-clip: text; }

.doc-title {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  padding-left: 12px; border-left: 1px solid var(--ui-line);
}
.doc-name {
  min-width: 0; max-width: 300px; padding: 6px 8px;
  border: 0; border-radius: 7px; background: none;
  font-size: 14px; font-weight: 700; color: var(--ui-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-name:hover { background: var(--ui-panel-2); }
.doc-tpl { font-size: 12.5px; color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.doc-tpl::before { content: "·"; margin: 0 6px 0 2px; }
.top-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { background: var(--ui-panel-2); border-color: transparent; }

/* Export: the button downloads a PNG at the chosen size; its caret opens
   every other format and option. */
.split-btn { position: relative; display: inline-flex; }
.split-btn > .btn-primary:first-child { border-radius: 8px 0 0 8px; }
.split-caret { width: 32px; padding: 0; border-radius: 0 8px 8px 0; margin-left: 1px; }
.split-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.export-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 12px;
  box-shadow: 0 24px 60px -12px var(--ui-shadow-strong);
  scrollbar-width: thin; scrollbar-color: var(--ui-scroll) transparent;
}
.export-pop .group { border-bottom: 0; padding: 14px 16px 16px; }
.export-pop .group-title { font-size: 14px; }

/* Menus: a <details> whose summary is the button. */
details.menu { position: relative; flex: none; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
#cardMenu > summary svg circle { fill: currentColor; stroke: none; }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  min-width: 240px; padding: 6px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 12px;
  box-shadow: 0 24px 60px -12px var(--ui-shadow-strong);
}
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--ui-text);
}
a.menu-item { text-decoration: none; box-sizing: border-box; }
.menu-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ui-dim); }
.menu-item:hover, .menu-item:focus-visible { background: var(--ui-panel-2); outline: none; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--ui-line); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 4px 10px; font-size: 13px; font-weight: 600; color: var(--ui-dim); }
.theme-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ui-line-2); border-radius: 8px; background: var(--ui-bg); }
.theme-switch button {
  padding: 4px 9px; border: 0; border-radius: 6px; background: none;
  font-size: 12px; font-weight: 600; color: var(--ui-dim);
}
.theme-switch button:hover { color: var(--ui-text); }
.theme-switch button[aria-pressed="true"] { background: var(--ui-panel-2); color: var(--ui-strong); box-shadow: inset 0 0 0 1px var(--ui-line-2); }

/* ---------- The workspace grid ---------- */
.workspace {
  position: relative;
  height: calc(100vh - var(--header-h) * var(--ui-z));
  display: grid;
  grid-template-columns: calc(72px * var(--ui-z)) calc(320px * var(--ui-z)) minmax(0, 1fr) calc(316px * var(--ui-z));
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail panel stage props";
}
.workspace.panel-hidden { grid-template-columns: calc(72px * var(--ui-z)) 0 minmax(0, 1fr) calc(316px * var(--ui-z)); }
.workspace.panel-hidden .panel-left { display: none; }
.panel-left { grid-area: panel; border-right: 1px solid var(--ui-line); }
.panel-props { grid-area: props; border-left: 1px solid var(--ui-line); }
.tab-pane { padding-bottom: 28px; }

/* ---------- The rail ---------- */
.rail {
  grid-area: rail;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 10px 8px; background: var(--ui-bg-2); border-right: 1px solid var(--ui-line);
  overflow-y: auto; scrollbar-width: none;
}
.rail-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 2px 8px; border: 0; border-radius: 10px; background: transparent;
  font-size: 10.5px; font-weight: 600; color: var(--ui-dim);
  transition: color .15s, background-color .15s;
}
.rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { color: var(--ui-text); background: var(--ui-panel-2); }
.rail-btn[aria-selected="true"] { color: var(--ui-strong); background: var(--ui-accent-soft); }
.rail-btn[aria-selected="true"] svg { color: var(--ui-accent); }
.workspace.panel-hidden .rail-btn[aria-selected="true"] { background: transparent; }
.rail-label { line-height: 1; }
.tab-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: var(--ui-accent-soft-2); color: var(--ui-accent-text);
  font-size: 10px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.tab-count:empty { display: none; }
/* In a dialog's header it is a plain count beside the title, not the rail's corner badge. */
.modal-head .tab-count { position: static; align-self: center; }

/* ---------- Panel and properties headings ---------- */
.panel-head {
  position: sticky; top: 0; z-index: 3;
  display: flex;
  background: var(--ui-bg-2); border-bottom: 1px solid var(--ui-line);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 10px 12px 16px;
}
.panel-title { margin: 0; font-weight: 700; color: var(--ui-strong); font-size: 18px; letter-spacing: -.01em; line-height: 1.2; }
.props-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--ui-line); }
.props-head h2 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--ui-strong); }
.props-head p { margin: 0; font-size: 12px; color: var(--ui-faint); line-height: 1.45; }

/* Pieces that only exist on a phone (see the U11 block below). */
.sheet-grab, .rail-card, .phone-only { display: none; }

/* The properties panel shows one of two things. */
.props-insp {
  /* Only what is selected: with nothing picked it says how to pick something. */
  display: block;
}
body.has-selection .props-insp { display: block; }
body.has-selection .card-props { display: none; }

/* ---------- The template gallery ---------- */
#pane-templates .group { border-bottom: 0; padding-top: 14px; }
#pane-templates .group > .group-title { display: none; }
#pane-templates .template-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#pane-templates .template-opt {
  position: relative; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 7px 7px 9px; background: var(--ui-panel); text-align: left;
}
#pane-templates .tpl-thumb {
  width: 100%; height: auto; aspect-ratio: 520 / 729;
  border-radius: 7px; clip-path: none; box-shadow: none;
  background-color: var(--ui-bg); background-size: cover; background-position: center;
}
#pane-templates .tpl-text { padding: 0 2px; min-width: 0; }
#pane-templates .tpl-text strong { font-size: 12.5px; }
#pane-templates .tpl-text small {
  font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#pane-templates .template-opt .plan-badge { position: absolute; top: 12px; left: 12px; margin: 0; }
/* The rendered cards from the homepage, only fetched once the gallery is
   opened: a background in a hidden pane is never requested. */
:is(#pane-templates, .start-tpls) .tpl-thumb.neon     { background-image: url(assets/card-neon-apex.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.obsidian { background-image: url(assets/card-obsidian-legend.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.verdant  { background-image: url(assets/card-verdant-rite.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.prism    { background-image: url(assets/card-prism-circuit.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.ashen    { background-image: url(assets/card-ashen-rune.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.tavern   { background-image: url(assets/card-tavern-tale.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.gacha    { background-image: url(assets/card-gacha-pop.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.tarot    { background-image: url(assets/card-arcana-tarot.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.stadium  { background-image: url(assets/card-stadium-star.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.hologram { background-image: url(assets/card-hologram.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.pixel    { background-image: url(assets/card-pixel-quest.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.manga    { background-image: url(assets/card-manga-burst.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.mainevent  { background-image: url(assets/card-main-event.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.redline    { background-image: url(assets/card-redline.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.moltencrown { background-image: url(assets/card-molten-crown.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.gildedspell { background-image: url(assets/card-gilded-spell.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.marker { background-image: url(assets/card-marker-monster.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.retroborder { background-image: url(assets/card-retro-border.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.chromium { background-image: url(assets/card-chromium.webp); }
:is(#pane-templates, .start-tpls) .tpl-thumb.granddeco { background-image: url(assets/card-grand-deco.webp); }

/* My shapes and my gradients (E56) */
.my-shape { position: relative; display: block; }
.my-shape .orn-btn { width: 100%; }
.my-shape-del, .gs-del {
  position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg-2); color: var(--ui-dim); font-size: 12px; line-height: 16px;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.my-shape:hover .my-shape-del, .my-shape:focus-within .my-shape-del, .gs-item:hover .gs-del, .gs-item:focus-within .gs-del { opacity: 1; }
.grad-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.gs-label { width: 100%; font-size: 11.5px; font-weight: 650; color: var(--ui-dim); }
.gs-item { position: relative; display: inline-flex; }
.gs-sw { width: 30px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--ui-line-2); cursor: pointer; }
.gs-sw:hover { outline: 2px solid var(--ui-accent-soft-2); }
.gs-save { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px dashed var(--ui-line-2); background: none; color: var(--ui-dim); font-size: 11.5px; cursor: pointer; }
.gs-save:hover { color: var(--ui-text); border-color: var(--ui-hover-line); }
#pane-templates .tpl-thumb.blank    { outline-offset: -8px; }
#pane-templates .insp-sub { margin-top: 18px; }
:root[data-theme="light"] .tpl-thumb.blank { background: repeating-linear-gradient(135deg, #e9ecf3 0 8px, #f3f5f9 8px 16px); outline-color: #aab0c2; }

/* ---------- The stage in both themes ---------- */
:root[data-theme="light"] .card-shadow { box-shadow: 0 34px 60px -22px rgba(20, 26, 48, .5), 0 10px 22px -10px rgba(20, 26, 48, .35); }
:root[data-theme="light"] .card-aura { opacity: .16; }

/* ---------- Narrower desktops ---------- */
@media (max-width: 1279px) {
  .workspace { grid-template-columns: calc(68px * var(--ui-z)) calc(290px * var(--ui-z)) minmax(0, 1fr) calc(290px * var(--ui-z)); }
  .workspace.panel-hidden { grid-template-columns: calc(68px * var(--ui-z)) 0 minmax(0, 1fr) calc(290px * var(--ui-z)); }
  .app-header .brand-text { display: none; }
  .doc-title { padding-left: 10px; }
}

/* Tablet: no room for the panel beside the card, so it slides over it. */
@media (min-width: 761px) and (max-width: 1023px) {
  .workspace, .workspace.panel-hidden {
    grid-template-columns: 64px minmax(0, 1fr) 280px;
    grid-template-areas: "rail stage props";
  }
  .workspace .panel-left, .workspace.panel-hidden .panel-left {
    display: block;
    position: absolute; top: 0; bottom: 0; left: 64px; z-index: 30; width: 320px;
    box-shadow: 18px 0 40px -18px var(--ui-shadow-strong);
    transform: translateX(-104%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .workspace.panel-open .panel-left { transform: none; visibility: visible; transition: transform .2s ease; }
  .workspace:not(.panel-open) .rail-btn[aria-selected="true"] { background: transparent; }
  .doc-tpl { display: none; }
  .header-actions #btnLibrary span { display: none; }
  .header-actions #btnLibrary { width: 36px; padding: 0; }
}

/* Phone (U11): the card stays on screen. The rail is a tab bar along the
   bottom; a section, or the properties of what is selected, opens as a sheet
   above it that can be dragged between half height, full height and closed,
   and the card shrinks to sit above a half-height sheet. setSheet() writes
   the sheet's height to --sheet-h and the part the card makes room for to
   --stage-cut, on :root so the toast can rise above the sheet too. */
@media (max-width: 760px) {
  :root { --header-h: 52px; --rail-h: 58px; --sheet-h: 0px; --stage-cut: 0px; --safe-b: env(safe-area-inset-bottom, 0px); }
  body { overflow: hidden; }

  /* One row: the mark, the card's name and its menu, undo and redo, export
     as an icon, the account. The library moved into the card menu. */
  .app-header { height: var(--header-h); flex-wrap: nowrap; padding: 0 6px 0 8px; gap: 2px; }
  .app-header .brand-text { display: none; }
  .app-header .brand-mark { width: 30px; height: 30px; }
  .doc-title { flex: 1 1 auto; min-width: 0; border-left: 0; padding-left: 4px; gap: 0; }
  .doc-name { max-width: none; padding: 6px 4px; font-size: 13.5px; }
  .doc-tpl { display: none; }
  .top-tools { gap: 0; }
  .top-tools .tool { min-width: 34px; padding: 0 6px; }
  .header-actions { gap: 4px; margin-left: 0; }
  .header-actions #btnLibrary { display: none; }
  .split-btn > .btn-primary[data-action="export"] { padding: 0 10px; }
  .split-btn > .btn-primary[data-action="export"] span { display: none; }
  .phone-only { display: flex; }

  .workspace, .workspace.panel-hidden { display: block; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); }
  .stage {
    position: absolute; left: 0; right: 0; top: 0;
    bottom: calc(var(--rail-h) + var(--safe-b) + var(--stage-cut));
    height: auto; padding: 10px 10px 12px; gap: 10px;
    justify-content: flex-start;
  }
  /* The toolbar stays at the top; the card is centred in what is left. */
  .card-stage {
    margin: auto 0;
    width: max(110px, min(92vw, 440px, calc((100dvh - var(--header-h) - var(--rail-h) - var(--safe-b) - var(--stage-cut) - 82px) * 0.7142857)));
  }
  .stage-toolbar::-webkit-scrollbar { display: none; }
  .stage-toolbar > * { flex: none; }
  .stage-meta { display: none; }

  /* The tab bar. */
  .rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--rail-h) + var(--safe-b)); padding: 4px 4px var(--safe-b);
    flex-direction: row; gap: 2px; overflow: visible;
    border-right: 0; border-top: 1px solid var(--ui-line-2); background: var(--ui-bg-2);
  }
  .rail-btn { flex: 1 1 0; min-width: 0; padding: 8px 0 5px; gap: 4px; font-size: 10.5px; }
  .rail-btn svg { width: 21px; height: 21px; }
  .rail-card { display: flex; }
  .workspace:not([data-sheet="panel"]) .rail .tab[aria-selected="true"] { background: transparent; color: var(--ui-dim); }
  .workspace:not([data-sheet="panel"]) .rail .tab[aria-selected="true"] svg { color: currentColor; }
  .workspace[data-sheet="props"] .rail-card { color: var(--ui-strong); background: var(--ui-accent-soft); }
  .workspace[data-sheet="props"] .rail-card svg { color: var(--ui-accent); }
  body.has-selection .rail-card .lbl-card, body:not(.has-selection) .rail-card .lbl-sel { display: none; }
  body.has-selection .rail-card::after {
    content: ""; position: absolute; top: 7px; right: calc(50% - 16px);
    width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent);
  }

  /* The two sheets. */
  .workspace .panel-left, .workspace.panel-hidden .panel-left, .workspace .panel-props {
    display: none;
    position: fixed; left: 0; right: 0; z-index: 40;
    bottom: calc(var(--rail-h) + var(--safe-b));
    height: var(--sheet-h);
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--ui-line-2) !important; border-bottom: 0 !important;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 44px -14px var(--ui-shadow-strong);
    transition: height .2s ease;
  }
  .workspace[data-sheet="panel"] .panel-left,
  .workspace[data-sheet="props"] .panel-props { display: block; animation: sheet-up .2s ease-out; }
  .workspace.is-sheet-dragging .panel-left, .workspace.is-sheet-dragging .panel-props { transition: none; }
  @keyframes sheet-up { from { transform: translateY(36px); opacity: .5; } }

  .sheet-grab {
    display: flex; position: sticky; top: 0; z-index: 6; height: 24px;
    align-items: center; justify-content: center;
    background: var(--ui-bg-2); touch-action: none; cursor: grab;
  }
  .sheet-grab::before { content: ""; width: 42px; height: 5px; border-radius: 3px; background: var(--ui-hover-line); }
  .sheet-close { position: absolute; right: 8px; top: 4px; width: 34px; height: 34px; border: 0; background: var(--ui-panel-2); }
  #btnPanelHide { display: inline-flex; }
  #btnPanelHide svg { transform: rotate(-90deg); }
  .props-insp .group:first-child .group-title, .card-props .props-head { padding-right: 48px; }

  .toast { bottom: calc(var(--rail-h) + var(--safe-b) + var(--sheet-h) + 12px); }
  .export-pop { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--rail-h) + var(--safe-b) + 8px); width: auto; max-height: 72vh; }
  .menu-pop { position: fixed; top: calc(var(--header-h) + 4px); left: 8px; right: 8px; min-width: 0; }
  .step { width: 34px; height: 34px; }
  input[type="range"] { height: 34px; }
  .type-grid { grid-template-columns: repeat(4, 1fr); }
}

/* The export panel's sections. */
.export-pop .insp-sub { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--ui-line); }
.export-pop .file-name { margin-bottom: 0; }
.export-pop .row-2 + .row-2 { margin-top: 10px; }

/* ---------- Site content (13u) ---------- */
.frame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.frame-tile {
  display: flex; flex-direction: column; gap: 5px; padding: 5px;
  border: 1px solid var(--ui-line-2); border-radius: 9px; background: var(--ui-panel);
  color: var(--ui-text); font-size: 11px; font-weight: 600; text-align: center;
}
.frame-tile:hover { border-color: var(--ui-accent); }
.frame-tile img {
  width: 100%; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 6px;
  background: repeating-conic-gradient(var(--ui-panel-2) 0 25%, var(--ui-bg) 0 50%) 0 0 / 12px 12px;
}
.frame-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publish-modal { width: min(460px, calc(100vw - 24px)); }
.publish-form { padding: 4px 20px 20px; }
.publish-form .row-2 { margin-top: 14px; }
#btnPublishSite { margin-top: 8px; }
.link-btn.site-admin { display: block; margin-top: 8px; }
.link-btn.site-admin[hidden] { display: none; }
/* ---------- Set, attacks, card types (13v) ---------- */
.set-symbol-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.set-symbol-preview { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--ui-line-2); border-radius: var(--radius-sm); background: var(--ui-panel-2); color: var(--ui-text); }
.set-symbol-preview svg, .set-symbol-preview img { width: 28px; height: 28px; object-fit: contain; }
#setSymbolName { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ui-dim); }
#setSymbolGrid .orn-btn.is-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
#setSymbolGrid { max-height: 260px; overflow: auto; margin-top: 8px; }
.move-row { border: 1px solid var(--ui-line); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 8px; background: var(--ui-panel-2); }
.move-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .7fr); }
.move-tools { display: flex; gap: 14px; justify-content: flex-end; }
.kind-note { margin: 0 0 8px; }
/* ---------- Print proof (E40) ---------- */
.proof-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.proof-layer[hidden] { display: none; }
/* ---------- Set statistics and the art search (13w) ---------- */
.stats-modal, .art-search-modal { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.stats-body { overflow: auto; padding: 4px 18px 18px; }
.art-search-modal > :not(.modal-head) { margin-left: 18px; margin-right: 18px; }
.art-search-modal > :last-child { margin-bottom: 18px; }
.stats-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; font-size: 13px; color: var(--ui-dim); }
.stats-top p { margin: 0; }
.stats-measure { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ui-dim); }
.stats-measure .input { width: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stats-grid section { border: 1px solid var(--ui-line); border-radius: var(--radius-sm); padding: 10px; background: var(--ui-panel-2); min-width: 0; }
.stats-grid h3 { margin: 0 0 8px; font-size: 13px; color: var(--ui-strong); }
.stats-wide { grid-column: 1 / -1; }
.stat-bars { display: flex; flex-direction: column; gap: 5px; }
.stat-bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px 62px; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ui-dim); }
.stat-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); }
.stat-bar-track { height: 9px; border-radius: 99px; background: var(--ui-track); overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; border-radius: 99px; }
.stat-bar-n { text-align: right; color: var(--ui-text); font-weight: 700; }
.stat-hist { width: 100%; height: auto; display: block; }
.stat-hist-bar { fill: var(--ui-accent); }
.stat-hist-n, .stat-hist-axis { font-size: 11px; fill: var(--ui-dim); }
.stats-odd { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stats-odd li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--ui-bg); font-size: 12.5px; }
.stats-odd small { color: var(--ui-warn-text); }
.art-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin: 2px 0 6px; }
.art-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; overflow: auto; min-height: 60px; }
.art-result { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--ui-line); border-radius: var(--radius-sm); background: var(--ui-panel-2); cursor: pointer; color: var(--ui-dim); text-align: left; }
.art-result:hover { border-color: var(--ui-accent); }
.art-result img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--ui-bg); }
.art-result span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-credit a { color: var(--ui-accent-text); }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: 1fr; }
  .art-search-form { grid-template-columns: 1fr; }
}

/* ---------- Pictures: Your uploads and Free pictures (Add tab) ---------- */
.pic-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 3px; margin-bottom: 10px;
  border: 1px solid var(--ui-line-2); border-radius: 10px; background: var(--ui-bg); }
.seg-btn[aria-selected="true"] { background: var(--ui-panel-2); color: var(--ui-strong); box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.pic-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
#freeForm.pic-tools { grid-template-columns: minmax(0, 1fr) auto; }
.pic-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pic-cats .chip-btn { padding: 4px 9px; font-size: 11.5px; }
#freeLicence { margin-bottom: 8px; }
.pic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pic-grid > .hint { grid-column: 1 / -1; margin: 6px 2px; }
.pic-tile { position: relative; }
.pic-btn { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--ui-line-2); border-radius: 8px;
  background: repeating-conic-gradient(var(--ui-panel-2) 0 25%, var(--ui-bg) 0 50%) 0 0 / 14px 14px; cursor: pointer; }
.pic-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pic-btn:hover, .pic-btn:focus-visible { border-color: var(--ui-accent); outline: none; }
.pic-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ui-float); color: var(--ui-text); font-size: 14px; line-height: 22px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.pic-tile:hover .pic-del, .pic-del:focus-visible { opacity: 1; }
.pic-menu { position: absolute; z-index: 30; top: calc(100% - 6px); left: 4px; min-width: 190px; padding: 5px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 10px; box-shadow: 0 12px 30px var(--ui-shadow); }
.pic-tile:nth-child(3n) .pic-menu { left: auto; right: 4px; }
.pic-menu button { display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: none; color: var(--ui-text);
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.pic-menu button:hover, .pic-menu button:focus-visible { background: var(--ui-panel-2); outline: none; }
.pic-menu .hint { margin: 2px 9px 4px; }
.pic-menu button[aria-current="true"] { color: var(--ui-accent-text); }
#btnFromUploads { margin-top: 0; }

/* ---------- Brand kit (Design tab) ---------- */
.brand-colors { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.brand-color { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 6px; align-items: center; }
.brand-color input[type="color"] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--ui-line-2); border-radius: 8px; background: var(--ui-bg); cursor: pointer; }
.brand-logos { margin-bottom: 8px; }
.brand-logos.is-empty { display: block; }
#btnBrandApply { margin-top: 12px; }
#btnBrandTake { white-space: normal; line-height: 1.2; }

/* ---------- Library: folders and storage ---------- */
.lib-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px 0; }
.folder-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--ui-line-2); border-radius: 999px;
  background: var(--ui-bg); color: var(--ui-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.folder-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.folder-chip:hover { color: var(--ui-text); border-color: var(--ui-hover-line); }
.folder-chip.is-on { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-text); }
.folder-chip.is-drop { border-color: var(--ui-accent); background: var(--ui-accent-soft-2, var(--ui-accent-soft)); color: var(--ui-strong); }
.is-dragging-card .folder-chip[data-folder] { border-style: dashed; }
.folder-n { padding: 0 6px; border-radius: 999px; background: var(--ui-track); font-size: 11px; font-variant-numeric: tabular-nums; }
.folder-new { border-style: dashed; }
.folder-tools { display: inline-flex; gap: 10px; margin-left: 4px; }
.lib-storage { font-size: 12px; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.lib-storage.is-warn { color: var(--ui-warn-text); }
.lib-card[draggable="true"] { cursor: grab; }
.lib-move-menu { top: 40px; left: auto; right: 7px; }

/* ---------- The font browser ---------- */
.font-browser { width: min(560px, calc(100vw - 32px)); height: min(680px, calc(100vh - 48px)); display: flex; flex-direction: column; }
.fb-tools { padding: 12px 18px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--ui-line); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.fb-cats .chip-btn { padding: 4px 9px; font-size: 11.5px; }
.chip-btn.is-on { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-text); }
.fb-list { flex: 1; overflow-y: auto; padding: 6px 10px 12px; }
.fb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cat" "try try"; gap: 2px 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--ui-text); text-align: left; cursor: pointer; }
.fb-row[hidden] { display: none; }
.fb-row:hover, .fb-row:focus-visible { background: var(--ui-panel-2); outline: none; }
.fb-row.is-on { background: var(--ui-accent-soft); }
.fb-sample { grid-area: name; font-size: 19px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-try { grid-area: try; font-size: 13px; color: var(--ui-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-cat { grid-area: cat; align-self: center; font-size: 11px; color: var(--ui-faint); }
.gallery-link { margin-bottom: 12px; }

/* ---------- Publish to the gallery (editor) ---------- */
.gallery-publish { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.gp-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 20px 20px; }
.gp-preview img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; border-radius: 10px; background: var(--ui-panel-2); }
.gp-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gp-fields textarea { resize: vertical; min-height: 64px; }
.gp-rights { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; color: var(--ui-text); cursor: pointer; }
.gp-rights input { margin-top: 2px; }
.gp-fields .modal-actions { justify-content: flex-end; }
.hint.is-warn { color: var(--ui-warn-text); }
@media (max-width: 600px) { .gp-body { grid-template-columns: minmax(0, 1fr); } .gp-preview { max-width: 180px; } }

/* ---------- Interface size ----------
   The editor's chrome (top bar, rail, panels, the card toolbar, its dialogs)
   is drawn at 80% on desktops unless "Large" is picked in the card menu
   (theme.js keeps the choice as data-ui-size on <html>). It is a CSS zoom on
   those areas, so every size inside them shrinks together, and the grid
   columns and the workspace height above multiply by --ui-z to match.
   The stage itself is never zoomed: the card's pointer maths (toCard, the
   handles, rulers, pinch) measures it, and must keep measuring real pixels.
   Phones and the tablet drawer keep their own sizes. */
@media (min-width: 1024px) {
  :root[data-ui-size="compact"], :root:not([data-ui-size]) { --ui-z: .8; }
  .app-header, .workspace > .rail, .workspace > .panel, .stage-toolbar,
  body:has(> .workspace) .modal { zoom: var(--ui-z); }
}
.ui-size-row { display: none; }
@media (min-width: 1024px) { .ui-size-row { display: flex; } }

/* Features for the local server only (video): never published, see script.js 13w. */
.local-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ui-warn-text); background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line);
}
.add-btn .local-badge { margin: 0 0 0 auto; }

/* ---------- Play: deck, playtest table (E36), Tabletop Simulator (E37) ----------
   The table is positioned from pointer coordinates, so this dialog is never
   drawn at the compact interface zoom (see "Interface size"). */
.overlay-play { padding: 12px; }
body:has(> .workspace) .modal.modal-play { zoom: 1; }
.modal-play { width: min(1100px, 100%); height: min(860px, 100%); max-height: none; overflow: hidden; }
.overlay-play.is-table .modal-play { width: 100%; height: 100%; }
.modal-play .modal-head { flex-wrap: wrap; }
.play-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.play-body > section { flex: 1; min-height: 0; }
.play-deck { overflow: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.play-deck-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.play-deck-bar .field { min-width: 180px; margin: 0; }
.play-deck-bar #playStart { margin-left: auto; }
.play-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px; }
.play-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-panel); }
.play-item.is-out { opacity: .55; }
.play-item img, .play-nothumb { width: 48px; height: 67px; border-radius: 4px; object-fit: cover; background: var(--ui-panel-2); display: block; }
.play-name { font-size: 13px; font-weight: 600; color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; }
.play-name small { display: block; font-weight: 400; color: var(--ui-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-count { display: inline-flex; align-items: center; gap: 4px; }
.play-count .input { width: 48px; text-align: center; padding: 4px; }
.play-tts { border-top: 1px solid var(--ui-line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }

.play-table { display: flex; flex-direction: column; min-height: 0; user-select: none; -webkit-user-select: none; }
.play-table[hidden] { display: none; }
.pt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); }
.pt-bar .btn { padding: 6px 10px; font-size: 13px; }
.pt-group { display: inline-flex; align-items: center; gap: 4px; }
.pt-num { width: 52px; padding: 5px; text-align: center; }
.pt-life span { min-width: 34px; text-align: center; font-weight: 700; font-size: 16px; color: var(--ui-strong); }
.pt-turn { margin-left: auto; color: var(--ui-dim); font-size: 13px; }
.pt-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.pt-table { position: relative; overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse at 50% 40%, var(--ui-accent-soft), transparent 70%), var(--ui-bg);
  border-right: 1px solid var(--ui-line); }
.pt-table.is-over, .pt-hand.is-over, .pt-pile.is-over { outline: 2px dashed var(--ui-accent); outline-offset: -4px; }
.pt-empty { color: var(--ui-faint); font-size: 13px; margin: 0; padding: 16px; }
.pt-table > .pt-empty { position: absolute; inset: auto 0 40% 0; text-align: center; }
.pt-side { flex-direction: column; gap: 10px; padding: 12px; overflow: auto; display: grid; grid-template-columns: 112px 112px; align-content: start; }
.pt-pile { position: relative; width: 112px; height: 157px; border-radius: 8px; border: 2px solid var(--ui-line-2); background: var(--ui-panel-2) center / cover no-repeat; cursor: pointer; touch-action: none; align-self: flex-start; }
.pt-pile.is-empty { border-style: dashed; }
.pt-pile-n { position: absolute; top: 6px; right: 6px; min-width: 24px; padding: 2px 6px; border-radius: 999px; background: var(--ui-float); color: var(--ui-text); font-size: 12px; font-weight: 700; text-align: center; }
.pt-pile-l { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 12px; color: var(--ui-dim); }
.pt-zoom { grid-column: 1 / -1; margin-top: 20px; min-height: 0; }
.pt-zoom img { width: 100%; max-width: 240px; aspect-ratio: 5 / 7; border-radius: 10px; display: block; box-shadow: 0 12px 30px -10px var(--ui-shadow-strong); }
.pt-browse-h { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.pt-browse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pt-browse button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.pt-browse img { width: 100%; aspect-ratio: 5 / 7; display: block; border-radius: 4px; }
.pt-log { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ui-dim); min-height: 1.4em; }
.pt-hand { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--ui-line); overflow-x: auto; min-height: 180px; background: var(--ui-bg-2); touch-action: pan-x; }
.pt-card { position: relative; width: 112px; height: 157px; flex: 0 0 auto; border-radius: 8px; cursor: grab; touch-action: none;
  box-shadow: 0 6px 16px -6px var(--ui-shadow-strong); transition: transform .15s ease; }
.pt-table .pt-card { position: absolute; }
.pt-card img { width: 100%; height: 100%; display: block; border-radius: 8px; pointer-events: none; }
.pt-hand .pt-card:hover { transform: translateY(-10px); }
.pt-card.is-tapped { transform: rotate(90deg); }
.pt-card.is-lifted { opacity: .3; }
.pt-counter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 34px; padding: 4px 8px; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-on-accent); font-weight: 800; font-size: 15px; text-align: center; box-shadow: 0 2px 8px var(--ui-shadow); }
.pt-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: .9; transition: none; box-shadow: 0 18px 40px -10px var(--ui-shadow-strong); }
.pt-menu { position: fixed; z-index: 95; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border-radius: 10px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); box-shadow: 0 16px 40px -10px var(--ui-shadow-strong); }
.pt-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ui-text); font: inherit; font-size: 13px; cursor: pointer; }
.pt-menu button:hover, .pt-menu button:focus-visible { background: var(--ui-panel-2); outline: none; }
@media (max-width: 760px) {
  .overlay-play { padding: 0; }
  .modal-play { width: 100%; height: 100%; border-radius: 0; }
  .pt-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pt-table { border-right: 0; }
  .pt-side { grid-template-columns: 76px 76px minmax(0, 1fr); padding: 8px 12px 24px; border-top: 1px solid var(--ui-line); }
  .pt-pile { width: 76px; height: 106px; }
  .pt-zoom { display: none; }
  .pt-zoom.is-browse { display: block; grid-column: 1 / -1; }
  .pt-log { grid-column: 3; grid-row: 1; align-self: center; }
  .pt-card { width: 80px; height: 112px; }
  .pt-hand { min-height: 132px; }
  .pt-turn { margin-left: 0; }
  .modal-play .modal-head { position: relative; padding-right: 60px; }
  .modal-play .modal-actions { position: absolute; top: 10px; right: 12px; left: auto; width: auto; margin: 0; }
  .pt-bar { flex-wrap: nowrap; overflow-x: auto; }
  .pt-bar > * { flex: 0 0 auto; }
}

/* ---------- Batch: a linked Google Sheet (E35) ---------- */
.sheet-link { margin: 0; }
.sheet-link-row { display: flex; gap: 8px; }
.sheet-link-row .input { flex: 1; min-width: 0; }

/* ---------- Shape builder (A9) ---------- */
.edit-overlay .sb-region { fill: rgba(143, 155, 255, .05); stroke: #8f9bff; stroke-width: 1; stroke-dasharray: 4 3; pointer-events: all; cursor: crosshair; touch-action: none; }
.edit-overlay .sb-region.is-alt { fill: rgba(143, 155, 255, .11); }
.edit-overlay .sb-region:hover { fill: rgba(143, 155, 255, .3); stroke-dasharray: none; }
.edit-overlay .sb-region.is-picked { fill: rgba(143, 155, 255, .5); stroke-width: 1.6; stroke-dasharray: none; }
.edit-overlay .sb-region.is-del { fill: rgba(255, 86, 86, .45); stroke: #ff5656; stroke-dasharray: none; }

/* ---------- Image trace (A14) and pattern maker (A17) ---------- */
.modal-trace, .modal-pattern { width: min(980px, calc(100vw - 32px)); }
.trace-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.trace-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-content: start; }
.trace-views figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.trace-views figcaption { font-size: 12px; color: var(--ui-dim); text-align: center; }
.trace-views img, .trace-result { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; border: 1px solid var(--ui-line);
  background: repeating-conic-gradient(var(--ui-panel-2) 0% 25%, var(--ui-panel) 0% 50%) 50% / 18px 18px; }
.trace-result { display: grid; place-items: center; overflow: hidden; }
.trace-result svg { width: 100%; height: 100%; }
.trace-opts { display: flex; flex-direction: column; gap: 10px; }
.trace-opts output { margin-left: 6px; color: var(--ui-text); font-weight: 600; }
.pattern-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px; }
.pattern-preview { border-radius: 12px; overflow: hidden; border: 1px solid var(--ui-line); align-self: start; }
.pattern-preview svg { display: block; width: 100%; height: auto; }
.pat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pat-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-panel); font-size: 13px; }
.icon-btn-sm { width: 26px; height: 26px; }
.icon-btn-sm svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .trace-body, .pattern-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Boards (A22) ----------
   The live card moves into the row, between the other boards, and every
   board is drawn at the live card's size. */
.board-row { --board-w: min(330px, calc((100vh - var(--header-h) * var(--ui-z) - 210px) * 0.7142857));
  display: flex; align-items: flex-start; justify-content: safe center; gap: 26px; width: 100%; max-width: 100%; overflow-x: auto; padding: 4px 8px 12px; flex: none; }
.board-row[hidden] { display: none; }
.board-list { display: contents; }
.board { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.stage.has-boards .board-live .card-stage { width: var(--board-w); }
.board-card { width: var(--board-w); aspect-ratio: 750 / 1050; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); cursor: pointer;
  display: grid; place-items: center; overflow: hidden; transition: transform .15s ease, border-color .15s; }
.board-card:hover { transform: translateY(-3px); border-color: var(--ui-accent); }
.board-img { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ui-dim); font-size: 12px; padding: 0; }
.board-img img { width: 100%; height: 100%; display: block; }
.board-plus { border-style: dashed; font-size: 40px; color: var(--ui-dim); background: transparent; }
.board-label { font-size: 12px; color: var(--ui-dim); display: inline-flex; align-items: center; gap: 6px; max-width: var(--board-w); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-live-label { color: var(--ui-text); font-weight: 600; order: 2; }
.board-live .card-stage { order: 1; }
.board-x { border: 0; background: none; color: var(--ui-dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.board-x:hover { color: var(--ui-danger-text); }
.stage.has-boards { justify-content: flex-start; }
.stage.has-boards .stage-meta { display: none; }
.board-menu { position: fixed; z-index: 70; width: min(420px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; padding: 12px; border-radius: 12px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); box-shadow: 0 18px 50px -12px var(--ui-shadow-strong); display: flex; flex-direction: column; gap: 8px; }
.board-menu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.board-menu-cards button { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 4px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-panel); color: var(--ui-text); font: inherit; font-size: 11px; cursor: pointer; }
.board-menu-cards button:disabled { opacity: .45; cursor: default; }
.board-menu-cards img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 4px; }
.board-menu-cards span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) { #btnBoards { display: none; } }

/* ---------- The Batch workspace ---------- */
.modal-batch { width: min(1280px, 100%); height: min(900px, 100%); max-height: none; overflow: hidden; }
.modal-batch .modal-head { flex-wrap: wrap; }
.batch-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.batch-body > section { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; overflow: auto; }
.batch-body > section[hidden] { display: none; }
.batch-data { max-width: 980px; width: 100%; margin: 0 auto; }
.batch-cards { padding-bottom: 0 !important; overflow: hidden !important; }
.batch-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.batch-toolbar .input { width: 220px; }
.batch-toolbar .hint { flex: 1; margin: 0; }
.batch-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.batch-split:has(.batch-edit:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.batch-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; align-content: start; padding: 2px 2px 20px; }
.bcard { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-panel); cursor: pointer; text-align: left; font: inherit; color: var(--ui-text); }
.bcard:hover { border-color: var(--ui-hover-line); }
.bcard.is-open { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft-2); }
.bcard img, .bcard-wait { width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 8px; display: block; }
.bcard-wait { background: linear-gradient(110deg, var(--ui-panel-2) 30%, var(--ui-line) 50%, var(--ui-panel-2) 70%); background-size: 200% 100%; animation: bshimmer 1.4s linear infinite; }
@keyframes bshimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bcard-wait { animation: none; } }
.bcard-name { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard-meta { font-size: 11px; color: var(--ui-faint); min-height: 14px; }
.batch-edit { overflow: auto; padding: 14px; border: 1px solid var(--ui-line-2); border-radius: 14px; background: var(--ui-panel); display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.be-head { display: flex; align-items: center; gap: 8px; }
.be-head strong { font-size: 14px; color: var(--ui-strong); }
.be-head small { flex: 1; font-size: 11.5px; color: var(--ui-faint); }
.be-pic { display: flex; align-items: center; gap: 12px; }
.be-pic img, .be-nopic { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ui-line); flex: none; }
.be-nopic { display: grid; place-items: center; font-size: 11px; color: var(--ui-faint); background: var(--ui-panel-2); }
.be-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.be-fields .field { margin: 0; }
.be-fields .be-wide { grid-column: 1 / -1; }
.be-fields textarea { min-height: 64px; resize: vertical; }
.be-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.be-actions .btn-primary { flex: 1; }
.be-remove { color: var(--ui-danger-text); margin-left: auto; }
.batch-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.batch-out-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ui-line-2); border-radius: 14px; background: var(--ui-panel); }
.batch-out-card h3 { margin: 0; font-size: 14px; color: var(--ui-strong); }
.batch-out-card .hint { margin: 0; }
.batch-out-card .btn-block { margin-top: auto; }
.batch-foot { padding: 10px 20px; border-top: 1px solid var(--ui-line); }
.batch-edit-bar .btn-sm { flex: none; }
@media (max-width: 760px) {
  .rail-batch { display: none; }
  .batch-split:has(.batch-edit:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.3fr); }
  .batch-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .batch-body > section { padding: 12px; }
  .batch-toolbar .input { width: 100%; }
}
.btn.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ---------- Batch as a page (Editor | Batch) ---------- */
.mode-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ui-panel-2); border: 1px solid var(--ui-line); flex: none; }
.mode-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-dim); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.mode-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mode-btn:hover { color: var(--ui-text); }
.mode-btn[aria-selected="true"] { background: var(--ui-bg-2); color: var(--ui-strong); box-shadow: 0 1px 3px var(--ui-shadow); }
.mode-btn .plan-badge { margin-left: 2px; }
body.batch-mode .workspace { display: none; }
body.batch-mode .top-tools, body.batch-mode .split-btn, body.batch-mode .doc-title { display: none; }
.batch-page { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); background: var(--ui-bg); }
.batch-page[hidden] { display: none; }
@media (min-width: 1024px) {
  .batch-page { zoom: var(--ui-z); height: calc((100vh - var(--header-h) * var(--ui-z)) / var(--ui-z)); }
}
.bp-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 18px 24px 14px; border-bottom: 1px solid var(--ui-line); background: var(--ui-bg-2); }
.bp-title h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--ui-strong); }
.bp-title p { margin: 2px 0 0; font-size: 13px; color: var(--ui-dim); }
.bp-steps { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.bp-steps button { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); color: var(--ui-dim); font: inherit; cursor: pointer; text-align: left; }
.bp-steps button b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-panel-2); color: var(--ui-dim); font-size: 13px; flex: none; }
.bp-steps button span { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: var(--ui-text); }
.bp-steps button small { font-size: 11.5px; font-weight: 500; color: var(--ui-faint); }
.bp-steps button em { font-style: normal; }
.bp-steps button[aria-selected="true"] { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft-2); }
.bp-steps button[aria-selected="true"] b { background: var(--ui-accent); color: var(--ui-on-accent); }
.batch-page .batch-body { flex: 1; min-height: 0; }
.batch-page .batch-data { max-width: 1080px; padding-top: 22px; }
.bp-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bp-source { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--ui-line-2); border-radius: 14px; background: var(--ui-panel); }
.bp-source h3 { margin: 0; font-size: 14px; color: var(--ui-strong); }
.bp-source .hint { margin: 0; }
.bp-source textarea { min-height: 70px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 12px; }
.bp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px; min-height: 150px; text-align: center;
  border: 2px dashed var(--ui-line-2); border-radius: 14px; background: var(--ui-panel); cursor: pointer; color: var(--ui-dim); transition: border-color .15s, background .15s; }
.bp-drop svg { width: 32px; height: 32px; fill: none; stroke: var(--ui-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.bp-drop strong { font-size: 15px; color: var(--ui-strong); }
.bp-drop span { font-size: 12.5px; }
.bp-drop:hover, .bp-drop.is-over { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.bp-drop-sm { min-height: 84px; padding: 12px; }
.bp-design { max-width: 460px; }
.bp-make { align-self: flex-start; height: 44px; padding: 0 28px; font-size: 15px; }
.bp-view .seg { height: 30px; padding: 0 12px; border: 1px solid var(--ui-line); background: transparent; color: var(--ui-dim); font: inherit; font-size: 12.5px; cursor: pointer; }
.bp-view .seg:first-child { border-radius: 8px 0 0 8px; }
.bp-view .seg:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.bp-view .seg[aria-pressed="true"] { background: var(--ui-panel-2); color: var(--ui-strong); border-color: var(--ui-accent); }
.batch-page .batch-split:has(.batch-edit:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.batch-table-wrap { overflow: auto; padding-bottom: 20px; min-width: 0; }
.batch-table-wrap[hidden] { display: none; }
.batch-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.batch-table th { position: sticky; top: 0; z-index: 1; background: var(--ui-bg-2); text-align: left; font-weight: 650; color: var(--ui-dim); padding: 6px 4px; border-bottom: 1px solid var(--ui-line-2); white-space: nowrap; }
.batch-table td { padding: 3px 4px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.batch-table tr.is-open td { background: var(--ui-accent-soft); }
.batch-table .input { height: 30px; padding: 0 8px; font-size: 12.5px; min-width: 110px; }
.batch-table .bt-num { min-width: 0; width: 72px; }
.batch-table .bt-long { min-width: 240px; }
.batch-table select.input { min-width: 104px; }
.bt-thumb { display: block; width: 36px; padding: 0; border: 1px solid var(--ui-line); border-radius: 5px; background: none; cursor: pointer; overflow: hidden; }
.bt-thumb img, .bt-thumb .bcard-wait { width: 100%; height: auto; aspect-ratio: 5 / 7; display: block; border-radius: 0; }
.batch-toolbar .link-btn { margin: 0; }
@media (max-width: 1023px) { .bp-sources { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mode-switch { display: none; }
  .bp-head { padding: 12px; gap: 10px; }
  .bp-title p { display: none; }
  .bp-steps { order: 3; flex-basis: 100%; justify-content: stretch; }
  .bp-steps button { flex: 1; padding: 6px; gap: 6px; }
  .bp-steps button small { display: none; }
  .bp-head #batchClose { margin-left: auto; }
  .batch-page .batch-split:has(.batch-edit:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}
/* The switch from 1024 px up; narrower, the card menu has Batch (the top bar is full there). */
#menuBatch { display: none; }
@media (max-width: 1023px) {
  .mode-switch { display: none; }
  #menuBatch { display: flex; }
}

/* ---------- The library as a page (N5): Editor | Library | Batch ---------- */
body.library-mode .workspace { display: none; }
body.library-mode .top-tools, body.library-mode .split-btn, body.library-mode .doc-title { display: none; }
body.library-mode .header-actions, body.batch-mode .header-actions { margin-left: auto; }
.lib-page { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); background: var(--ui-bg); }
.lib-page[hidden] { display: none; }
@media (min-width: 1024px) {
  .lib-page { zoom: var(--ui-z); height: calc((100vh - var(--header-h) * var(--ui-z)) / var(--ui-z)); }
}
.lib-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ui-scroll) transparent; }
.lib-pane { padding: 16px 24px 32px; }
.lib-pane[hidden] { display: none; }
.lib-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lib-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-right: auto; min-height: 30px; }
.lib-status .tab-count { position: static; font-size: 12px; padding: 2px 9px; }
.lib-find { width: 220px; height: 34px; }
.lib-sort { width: auto; height: 34px; }
.lib-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.lib-tools .btn svg { width: 15px; height: 15px; }
.lib-page .lib-folders { padding: 10px 0 0; }
.lib-page .lib-grid { padding: 16px 0 0; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; }
.lib-page .lib-grid[hidden] { display: none; }
.lib-table-wrap { overflow: auto; margin-top: 14px; }
.lib-table-wrap[hidden] { display: none; }
.lib-table .lt-ro { color: var(--ui-dim); white-space: nowrap; padding: 0 10px; }
.lib-table tr.is-open td { background: var(--ui-accent-soft); }
.lib-table .input[disabled] { opacity: .7; }
.lib-head .bp-steps button b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#btnLibrary svg { width: 15px; height: 15px; }
/* The switch from 1024 px up; narrower, the card menu has Library and Batch. */
#menuLibrary { display: none; }
@media (max-width: 1023px) {
  #menuLibrary { display: flex; }
}
@media (max-width: 760px) {
  .lib-pane { padding: 12px; }
  .lib-head-actions { order: 2; width: 100%; }
  .lib-head-actions .btn { flex: 1; padding: 0 8px; }
  .lib-find { flex: 1 1 140px; width: auto; }
  .lib-page .lib-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
}

/* ---------- Decks (T1) ---------- */
.deck-pane:not([hidden]) { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.deck-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.deck-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deck-side h3, .deck-charts h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ui-strong); }
.deck-list { display: flex; flex-direction: column; gap: 4px; }
.deck-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-panel); color: var(--ui-text); font: inherit; text-align: left; cursor: pointer; }
.deck-item:hover { border-color: var(--ui-hover-line); }
.deck-item.is-on { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft-2); }
.deck-item-name { font-size: 13.5px; font-weight: 700; color: var(--ui-strong); }
.deck-item-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ui-faint); }
.deck-ok { width: 8px; height: 8px; border-radius: 50%; }
.deck-ok.is-ok { background: var(--ui-ok-text); }
.deck-ok.is-bad { background: var(--ui-warn-text); }
.deck-empty { max-width: 520px; padding: 30px 0; }
.deck-empty h3 { margin: 0 0 8px; font-size: 18px; color: var(--ui-strong); }
.deck-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.deck-name { flex: 1 1 220px; height: 40px; font-size: 17px; font-weight: 700; }
.deck-format { min-width: 230px; margin: 0; }
.deck-head .lib-tools { margin-left: auto; }
.deck-rules { margin: 8px 0 0; font-size: 13px; color: var(--ui-dim); }
.deck-rules:empty { display: none; }
.deck-rule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 12px; margin-top: 12px; padding: 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-panel); }
.deck-rule-grid .field { margin: 0; }
.deck-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; margin-top: 16px; align-items: start; }
.deck-pool-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.deck-pool-bar .input { height: 34px; }
.deck-pool-bar select { width: auto; max-width: 200px; }
.deck-pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.deck-pool-grid > .hint { grid-column: 1 / -1; }
.deck-pool-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; color: var(--ui-text); font: inherit; text-align: left; cursor: pointer; }
.deck-pool-card img, .deck-pool-card .lib-nothumb { width: 100%; height: auto; aspect-ratio: 5 / 7; border-radius: 8px; border: 1px solid var(--ui-line-2); display: block; transition: transform .12s, border-color .15s; }
.deck-pool-card:hover img { transform: translateY(-2px); border-color: var(--ui-accent); }
.deck-pool-card.is-in img { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent); }
.deck-pool-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-n { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--ui-accent); color: var(--ui-on-accent); font-size: 12px; font-weight: 800; }
.deck-plus { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-float); color: var(--ui-strong); font-size: 16px; font-weight: 700; opacity: 0; transition: opacity .15s; box-shadow: 0 2px 6px var(--ui-shadow); }
.deck-pool-card:hover .deck-plus, .deck-pool-card:focus-visible .deck-plus { opacity: 1; }
.deck-side-list { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-panel); }
.deck-total { font-size: 14px; color: var(--ui-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deck-total strong { font-size: 22px; color: var(--ui-strong); }
.deck-el { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ui-strong); background: color-mix(in srgb, var(--el) 22%, transparent); border: 1px solid color-mix(in srgb, var(--el) 60%, transparent); }
.deck-problems { margin: 0; padding: 8px 10px 8px 26px; border-radius: 9px; background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); color: var(--ui-warn-text); font-size: 12.5px; line-height: 1.45; }
.deck-legal { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--ui-ok-bg); border: 1px solid var(--ui-ok-line); color: var(--ui-ok-text); font-size: 12.5px; }
.deck-rows { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.deck-rows:empty { display: none; }
.deck-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 8px; }
.deck-row:hover { background: var(--ui-panel-2); }
.deck-row.is-over { background: var(--ui-warn-bg); }
.deck-row img, .deck-row .lib-nothumb { width: 30px; height: auto; aspect-ratio: 5 / 7; border-radius: 3px; display: block; }
.deck-row-name { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 600; color: var(--ui-strong); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-row-name small { display: flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ui-faint); font-size: 11px; }
.deck-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.deck-row .play-count .input { width: 46px; }
.deck-paste summary { cursor: pointer; font-size: 12.5px; color: var(--ui-dim); }
.deck-paste textarea { width: 100%; margin: 8px 0; resize: vertical; font-size: 12.5px; }
.deck-charts { display: flex; flex-direction: column; gap: 14px; }
.deck-charts:empty { display: none; }
.deck-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.deck-chart-head select { width: auto; height: 28px; font-size: 12px; }
.deck-charts .stat-hist { width: 100%; height: auto; }
@media (max-width: 1200px) { .deck-cols { grid-template-columns: minmax(0, 1fr); } .deck-side-list { position: static; } }
@media (max-width: 860px) { .deck-pane:not([hidden]) { grid-template-columns: minmax(0, 1fr); } .deck-side { position: static; } .deck-list { flex-direction: row; overflow-x: auto; } .deck-item { flex: none; } }

/* ---------- The binder (T2) ---------- */
.binder-bar { align-items: flex-end; gap: 14px; }
.binder-bar .field { margin: 0; }
.binder-bar .toggle { margin: 0 0 6px; }
.binder-bar .lib-tools { margin-left: auto; }
.binder-summary { margin: 12px 0 4px; }
.binder-progress { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--ui-dim); }
.binder-progress strong { color: var(--ui-strong); }
.binder-meter { flex: 1 1 160px; max-width: 300px; height: 8px; border-radius: 4px; background: var(--ui-track); overflow: hidden; }
.binder-meter span { display: block; height: 100%; background: var(--ui-ok-text); border-radius: 4px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.binder-rars { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--ui-faint); }
.binder-rar { display: inline-flex; align-items: center; gap: 5px; }
/* The binder is an object, like the card: a leather binder lying open. Its
   pages follow the theme (black sleeves in the dark, white in the light);
   the leather is the cover colour the person picked. */
.binder-view { position: relative; margin-top: 18px; perspective: 2400px; perspective-origin: 50% 40%; touch-action: pan-y;
  --bd-page: #15171c; --bd-slot: #0e0f13; --bd-edge: #30333b; --bd-edge-line: #0b0c0f; --bd-ink: rgba(255, 255, 255, .5); --bd-ink-2: rgba(255, 255, 255, .3);
  --bd-flap: #3a3e47; --bd-flap-2: #23262d; }
:root[data-theme="light"] .binder-view { --bd-page: #ecedf1; --bd-slot: #dfe1e7; --bd-edge: #fafafb; --bd-edge-line: #c3c6ce; --bd-ink: rgba(20, 22, 30, .62);
  --bd-ink-2: rgba(20, 22, 30, .38); --bd-flap: #ffffff; --bd-flap-2: #d8dae1; }
.binder-view.is-turning .binder-book { pointer-events: none; }
.binder-book { position: relative; display: grid; margin: 0 auto; padding: 18px; border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 15%, rgba(255, 255, 255, .09), transparent 70%),
    repeating-radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--cover), var(--cover2));
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .75), 0 6px 14px -6px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -3px 8px rgba(0, 0, 0, .35); }
.binder-book::before { content: ''; position: absolute; inset: 7px; border: 1.5px dashed rgba(255, 255, 255, .16); border-radius: 13px; pointer-events: none; }
.binder-book.is-spread { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); max-width: 1120px; }
.binder-book.is-single { grid-template-columns: 30px minmax(0, 1fr); max-width: 560px; padding-left: 10px; }
.binder-page, .binder-page-face { padding: 14px 14px 24px; }
.binder-page { position: relative; z-index: 1; border-radius: 4px; background-color: var(--bd-page); }
.binder-page.is-left { border-radius: 8px 3px 3px 8px; background-image: linear-gradient(to left, rgba(0, 0, 0, .3), transparent 7%); }
.binder-page.is-right { border-radius: 3px 8px 8px 3px; background-image: linear-gradient(to right, rgba(0, 0, 0, .3), transparent 7%); }
.binder-spine { position: relative; z-index: 3; background: linear-gradient(to right, rgba(0, 0, 0, .45), rgba(255, 255, 255, .07) 50%, rgba(0, 0, 0, .45)); }
.binder-spine i { position: absolute; left: -14px; right: -14px; height: 15px; border-radius: 9px; transform: translateY(-50%);
  background: linear-gradient(#fbfcfd, #a3a8b0 42%, #e6e8ec 58%, #7b818a);
  box-shadow: 0 4px 7px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .3); }
.binder-spine i:nth-child(1) { top: 13%; }
.binder-spine i:nth-child(2) { top: 50%; }
.binder-spine i:nth-child(3) { top: 87%; }
.binder-book.is-single .binder-spine { background: none; }
.binder-book.is-single .binder-spine i { left: 4px; right: -16px; }
.binder-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pocket { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pocket-open { position: relative; display: block; padding: 0; border: 0; border-radius: 5px; overflow: hidden; background: var(--bd-slot); line-height: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .18s ease-out, box-shadow .18s; }
.pocket-open:hover { box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .6); }
.pocket-open img, .pocket-open .lib-nothumb { width: 100%; height: auto; aspect-ratio: 5 / 7; display: block; }
.pocket:not(.is-have) .pocket-open img { filter: grayscale(.85) brightness(.8); opacity: .5; transition: filter .25s, opacity .25s; }
.pocket:not(.is-have) .pocket-open:hover img { filter: grayscale(.3); opacity: .85; }
/* The plastic sleeve: a lip along the opening at the top, an edge, and a band of light that follows the pointer. */
.pocket-sleeve { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background:
    linear-gradient(105deg, transparent calc(var(--sx, 28%) - 26%), rgba(255, 255, 255, .2) var(--sx, 28%), transparent calc(var(--sx, 28%) + 20%)),
    linear-gradient(to bottom, rgba(255, 255, 255, .2) 0 3px, rgba(255, 255, 255, .05) 3px 6px, transparent 6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
.pocket.is-blank, .pocket.is-gap { position: relative; aspect-ratio: 5 / 7; border-radius: 5px; background: var(--bd-slot); }
.pocket.is-blank { opacity: .75; }
.pocket.is-gap { align-items: center; justify-content: center; text-align: center; gap: 4px; }
.pocket-num { font-size: 15px; font-weight: 800; color: var(--bd-ink); letter-spacing: .02em; }
.pocket-missing { font-size: 11px; font-style: italic; color: var(--bd-ink-2); }
.pocket-have { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 2px solid rgba(255, 255, 255, .55); background: rgba(10, 12, 16, .55); color: transparent; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.pocket-have svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pocket-have:hover { border-color: #3ddc84; color: rgba(255, 255, 255, .75); }
.pocket-have[aria-pressed="true"] { background: #1f9d55; border-color: #e9fff2; color: #fff; }
.pocket-cap { font-size: 11.5px; color: var(--bd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.pocket-cap b { color: var(--bd-ink-2); font-weight: 700; }
/* Rare and above shimmer in their rarity colour once they are in the binder. */
.pocket.is-foil .pocket-open { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 60%, transparent), 0 0 14px -4px var(--rar), 0 1px 2px rgba(0, 0, 0, .35); }
.pocket.is-foil .pocket-open::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--rar) 55%, #fff) 50%, transparent 62%); background-size: 260% 100%;
  animation: bd-foil 3.6s ease-in-out infinite; }
.pocket.is-foil .pocket-open:hover::after { opacity: .85; animation-duration: 1.6s; }
@keyframes bd-foil { from { background-position: 110% 0; } to { background-position: -10% 0; } }
/* Ticking a card slides it down into its sleeve; clearing it lets it fade back to a wish. */
.pocket.is-slide .pocket-open img { animation: bd-in .6s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
.pocket.is-slide .pocket-have { animation: bd-pop .45s ease-out calc(var(--d, 0ms) + .35s) both; }
.pocket.is-out .pocket-open img { animation: bd-out .45s ease-out var(--d, 0ms) both; }
@keyframes bd-in { from { transform: translateY(-112%) rotate(-5deg); filter: grayscale(.85) brightness(.8); opacity: .5; }
  62% { transform: translateY(3%) rotate(.6deg); filter: none; opacity: 1; } to { transform: none; } }
@keyframes bd-out { from { transform: none; filter: none; opacity: 1; } 35% { transform: translateY(-7%); }
  to { transform: none; filter: grayscale(.85) brightness(.8); opacity: .5; } }
@keyframes bd-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } to { transform: none; } }
/* A curled corner on the outside of a page turns it. */
.page-curl { position: absolute; bottom: 0; z-index: 2; width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer;
  transition: width .2s ease-out, height .2s ease-out; filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, .3)); }
.page-curl.is-next { right: 0; border-radius: 0 0 8px 0; background: linear-gradient(to top left, var(--cover2) 49%, var(--bd-flap) 51%, var(--bd-flap-2) 100%); }
.page-curl.is-prev { left: 0; border-radius: 0 0 0 8px; background: linear-gradient(to top right, var(--cover2) 49%, var(--bd-flap) 51%, var(--bd-flap-2) 100%); filter: drop-shadow(2px -2px 3px rgba(0, 0, 0, .3)); }
.page-curl:hover, .page-curl:focus-visible { width: 48px; height: 48px; }
.page-curl:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
/* A turning leaf and the opening cover: two faces back to back, drawn over the book. */
.binder-leaf { position: absolute; z-index: 6; transform-style: preserve-3d; pointer-events: none; }
.leaf-face { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-face.leaf-back { transform: rotateY(180deg); }
.binder-page-face { background-color: var(--bd-page); }
.leaf-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .12) 35%, rgba(255, 255, 255, .14) 70%, rgba(0, 0, 0, .3)); }
.binder-cover-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; border-radius: 4px 12px 12px 4px; text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 35% 20%, rgba(255, 255, 255, .12), transparent 70%),
    repeating-radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--cover), var(--cover2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 6px 0 14px rgba(0, 0, 0, .45); }
.binder-cover-face::before { content: ''; position: absolute; inset: 12px; border: 1.5px dashed rgba(255, 255, 255, .2); border-radius: 8px; }
.binder-cover-face.is-inside { border-radius: 12px 4px 4px 12px; background: linear-gradient(200deg, var(--cover2), color-mix(in srgb, var(--cover2) 70%, #000)); }
.cover-title { position: relative; max-width: 80%; font-family: 'Cinzel', Georgia, serif; font-size: clamp(20px, 3vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: .04em;
  color: #e3c477; text-shadow: 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 1px rgba(0, 0, 0, .7); }
.cover-sub { position: relative; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(227, 196, 119, .75); }
.cover-strap { position: absolute; right: 0; top: 50%; width: 54px; height: 84px; transform: translateY(-50%); border-radius: 10px 0 0 10px;
  background: linear-gradient(to right, color-mix(in srgb, var(--cover2) 80%, #000), var(--cover2)); box-shadow: -3px 0 8px rgba(0, 0, 0, .45); }
.cover-strap::after { content: ''; position: absolute; left: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9bec6 45%, #6f747c); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.binder-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.binder-page-n { font-size: 13px; color: var(--ui-dim); min-width: 140px; text-align: center; }
.binder-empty { max-width: 560px; }
@media (max-width: 760px) {
  .binder-bar .lib-tools { margin-left: 0; }
  .binder-book.is-single { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 10px 10px 6px; border-radius: 14px; }
  .binder-book.is-single .binder-spine i { right: -12px; height: 12px; }
  .binder-page, .binder-page-face { padding: 9px 9px 18px; }
  .binder-sheet { gap: 7px; }
  .pocket-have { width: 24px; height: 24px; top: 4px; right: 4px; }
  .pocket-cap { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pocket-open, .page-curl, .binder-meter span { transition: none; }
  .pocket .pocket-open img, .pocket .pocket-have, .pocket.is-foil .pocket-open::after { animation: none !important; }
}

/* ---------- Versions of a card (T10) ---------- */
.ver-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ver-chip { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 6px 11px; border: 1px solid var(--ui-line-2); border-radius: 10px; background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; line-height: 1.25; }
.ver-chip small { font-size: 10.5px; font-weight: 500; color: var(--ui-faint); }
.ver-chip:hover { border-color: var(--ui-hover-line); }
.ver-chip.is-on { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.ver-add { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%; margin-top: 4px; }
.ver-add .hint { margin: 0 2px 0 0; }
.ver-add .chip-btn { padding: 4px 9px; font-size: 11.5px; }
.ver-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--ui-line); border-radius: 10px; margin-bottom: 10px; }
.ver-edit[hidden] { display: none; }
.ver-edit .hint { margin: 0; }
.link-danger { color: var(--ui-danger-text); align-self: flex-start; }

/* ---------- Simple or all tools (N2) ---------- */
body.tools-simple [data-adv] { display: none !important; }
.rail-tools { margin-top: auto; }
.rail-tools[aria-pressed="true"] { color: var(--ui-accent-text); }
.rail-tools[aria-pressed="true"] svg { color: var(--ui-accent); }
@media (max-width: 760px) { .rail-tools { display: none; } }

/* ---------- The quick bar (N3) ---------- */
.quick-bar { position: absolute; left: 0; top: 0; z-index: 25; display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--ui-line-2); border-radius: 12px; background: var(--ui-float); box-shadow: 0 10px 28px -10px var(--ui-shadow-strong), 0 1px 3px var(--ui-shadow);
  font-size: 12.5px; white-space: nowrap; }
.quick-bar[hidden] { display: none; }
.qb-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--ui-text); font: inherit; font-weight: 700; cursor: pointer; }
.qb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qb-btn:hover { background: var(--ui-panel-2); color: var(--ui-strong); }
.qb-btn[aria-pressed="true"] { background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.qb-txt { font-size: 12.5px; }
.qb-b { font-weight: 900; font-family: Georgia, serif; font-size: 14px; }
.qb-group { display: inline-flex; }
.qb-font { height: 32px; max-width: 150px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: 12.5px; }
.qb-color { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.qb-color:hover { background: var(--ui-panel-2); }
.qb-color input { width: 22px; height: 22px; padding: 0; border: 1px solid var(--ui-line-2); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.qb-color input::-webkit-color-swatch-wrapper { padding: 0; }
.qb-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.qb-sep { width: 1px; height: 20px; margin: 0 3px; background: var(--ui-line); }
.qb-note { padding: 0 8px; color: var(--ui-dim); font-weight: 600; }
.quick-bar.is-locked .qb-font, .quick-bar.is-locked .qb-group, .quick-bar.is-locked .qb-color, .quick-bar.is-locked [data-qb="fwd"], .quick-bar.is-locked [data-qb="bwd"] { opacity: .4; pointer-events: none; }
#inspector.is-flash { animation: cf-insp-flash .9s ease; }
@keyframes cf-insp-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: inset 0 0 0 2px var(--ui-accent); } }

/* ---------- The save indicator (N10) ---------- */
/* New and Save beside the card's name (K3). Save is the save indicator too:
   its words say whether the library has this card, its dot how the copy
   kept in this browser is doing. */
.doc-act { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 6px; padding: 5px 10px; border: 1px solid var(--ui-line-2); border-radius: 8px;
  background: var(--ui-panel); color: var(--ui-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.doc-act:hover { border-color: var(--ui-hover-line); background: var(--ui-panel-2); }
.doc-act svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#btnNewTop + .save-state { margin-left: 4px; }
.save-state[data-state="local"] .ss-dot { display: none; }
@media (min-width: 761px) { #cardMenu #btnNew, #cardMenu #menuSave { display: none; } }
.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-ok-text); flex: none; transition: background-color .2s; }
.save-state[data-state="saving"] .ss-dot { background: var(--ui-faint); animation: cf-ss-pulse 1s ease-in-out infinite; }
.save-state[data-state="older"] .ss-dot { background: var(--ui-warn-text); }
.save-state[data-state="off"] .ss-dot { background: var(--ui-danger-text); }
.save-state[data-state="batch"] .ss-dot { background: var(--ui-accent); }
@keyframes cf-ss-pulse { 50% { opacity: .3; } }
@media (max-width: 1279px) { .doc-act > span:not(.ss-dot) { display: none; } .doc-act { padding: 6px 7px; margin-left: 2px; } }

/* Settings under a gear beside the account (K4); on a phone, in the card menu. */
.settings-menu .menu-pop { left: auto; right: 0; min-width: 280px; }
.menu-head { margin: 4px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-faint); }
.menu-phone { display: none; }
@media (max-width: 760px) {
  .settings-menu, #btnNewTop { display: none; }
  .menu-phone { display: block; }
}

/* =====================================================================
   THE EDITOR LAYOUT (R1 to R10, N1, N7, U4)
   See script.js 13c-ii. Chrome colours are roles, as everywhere.
   ===================================================================== */

/* Front or back of the card: the panels show only what that face has. */
body.face-back [data-only="front"], body:not(.face-back) [data-only="back"] { display: none !important; }

/* ---------- The panel's head: title, a line under it, search (N7) ---------- */
.panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.panel-heading { min-width: 0; }
.panel-sub { margin: 2px 0 0; font-size: 12px; color: var(--ui-faint); line-height: 1.35; }
.panel-find {
  display: flex; align-items: center; gap: 7px; height: 32px; margin-right: 6px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px; background: var(--ui-panel-2); color: var(--ui-faint);
}
.panel-find:focus-within { border-color: var(--ui-accent); background: var(--ui-panel); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.panel-find svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.panel-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--ui-text); }
.face-note {
  display: flex; align-items: center; gap: 8px; margin-right: 6px; padding: 7px 10px; border-radius: 8px;
  background: var(--ui-warn-bg); border: 1px solid var(--ui-warn-line); color: var(--ui-text); font-size: 12.5px;
}
.face-note[hidden] { display: none; }
.face-note .link-btn { margin: 0 0 0 auto; padding: 0; white-space: nowrap; }
.panel-none { margin: 18px 16px; }
.group.is-filtered, .template-opt.is-filtered { display: none !important; }

/* ---------- Sections: an icon, a title and what is inside (R9) ---------- */
.group > .group-title { margin: 0 -6px 10px; }
.group-toggle:hover { background: var(--ui-panel-2); }
.group-toggle .gt-ic {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--ui-panel-2); color: var(--ui-dim);
}
.group-toggle:hover .gt-ic { background: var(--ui-accent-soft); color: var(--ui-accent); }
.group-toggle .gt-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: none; }
.group-toggle .gt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.group-toggle .gt-title { font-size: 14px; font-weight: 650; color: var(--ui-strong); line-height: 1.25; }
.group-toggle .gt-sub { font-size: 12px; font-weight: 400; color: var(--ui-faint); line-height: 1.35; }
.group-toggle svg.gt-chev { width: 16px; height: 16px; flex: none; margin-left: auto; stroke: var(--ui-faint); stroke-width: 2; transform: none; transition: transform .15s; }
.group.is-folded .group-toggle svg.gt-chev { transform: rotate(-90deg); }
.group:not(.is-folded) > .group-title .gt-sub { display: none; }

/* Something Find or a tile just went to. */
.is-found { animation: cf-found 1.6s ease-out; border-radius: 8px; }
@keyframes cf-found { 0%, 45% { background-color: var(--ui-accent-soft-2); box-shadow: 0 0 0 4px var(--ui-accent-soft-2); } 100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; } }

/* The (i) beside a label: the longer explanation, on hover or focus. */
.tip {
  position: relative; display: inline-grid; place-items: center; vertical-align: 1px;
  width: 15px; height: 15px; margin-left: 4px; padding: 0; border: 1px solid var(--ui-line-2); border-radius: 50%;
  background: none; color: var(--ui-faint); font: italic 700 9.5px/1 Georgia, serif; cursor: help;
}
.tip:hover, .tip:focus-visible { color: var(--ui-accent); border-color: var(--ui-accent); outline: none; }
.tip:hover::after, .tip:focus-visible::after {
  content: attr(data-tip); position: absolute; z-index: 80; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
  width: 230px; padding: 8px 10px; border-radius: 8px; background: var(--ui-strong); color: var(--ui-bg);
  font: 400 12px/1.4 var(--font); text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: 0 10px 30px -8px var(--ui-shadow-strong); pointer-events: none;
}
.hint-long:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.hint-more { display: block; margin: 0 0 10px; padding: 0; font-size: 12px; }
.row-title { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
.row-title .field { margin-bottom: 11px; }

/* ---------- The rail (R1) ---------- */
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.rail-foot .rail-btn { font-size: 10px; }
a.rail-btn { text-decoration: none; }

/* ---------- Template gallery filters (R7) ---------- */
.tpl-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.tpl-filters .chip-row { margin: 0; }
.tpl-cats .chip-btn[aria-pressed="true"], .tpl-tiers .seg-btn[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-text); box-shadow: none; }
.tpl-tiers { display: flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ui-panel-2); }
.tpl-tiers .seg-btn { flex: 1; justify-content: center; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; }
.tpl-none { grid-column: 1 / -1; margin: 6px 0; }

/* ---------- The Add tab's tiles (R6) ---------- */
.add-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 14px 16px 12px; border-bottom: 1px solid var(--ui-line); }
.add-tiles[hidden] { display: none; }
.add-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 10px 2px 8px; border: 1px solid var(--ui-line-2); border-radius: 10px;
  background: var(--ui-bg); color: var(--ui-text); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; cursor: pointer;
}
.add-tile svg { width: 20px; height: 20px; fill: none; stroke: var(--ui-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.add-tile:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.add-grid-1 { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }

/* ---------- The properties panel (R4) ---------- */
body:not(.has-selection) .props-insp .group { border-bottom: 0; }
.insp-empty strong { color: var(--ui-text); }
.insp-goto {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 12px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: var(--ui-accent-soft); color: var(--ui-accent-text);
  font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.insp-goto[hidden] { display: none; }
.insp-goto:hover { background: var(--ui-accent-soft-2); }
.insp-goto svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.insp-sec { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-dim); }
/* Where there is room, it floats over the right of the stage and only
   while something is selected, so the card never moves under the pointer. */
@media (min-width: 1024px) {
  .workspace.props-float { overflow: hidden; grid-template-columns: calc(72px * var(--ui-z)) calc(320px * var(--ui-z)) minmax(0, 1fr); grid-template-areas: "rail panel stage"; }
  .workspace.props-float.panel-hidden { grid-template-columns: calc(72px * var(--ui-z)) 0 minmax(0, 1fr); }
  .workspace.props-float .panel-props {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 25; width: 316px;
    border-left: 1px solid var(--ui-line-2); box-shadow: -18px 0 40px -24px var(--ui-shadow-strong);
    transform: translateX(104%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s;
  }
  body.has-selection .workspace.props-float .panel-props { transform: none; visibility: visible; transition: transform .18s ease; }
}
@media (prefers-reduced-motion: reduce) { .workspace.props-float .panel-props { transition: none !important; } }

/* ---------- Top bar: find a tool (N1) ---------- */
.find-btn {
  display: flex; align-items: center; gap: 8px; flex: 0 1 250px; min-width: 0; height: 34px; margin: 0 4px; padding: 0 8px 0 10px;
  border: 1px solid var(--ui-line-2); border-radius: 9px; background: var(--ui-panel-2); color: var(--ui-faint);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.find-btn:hover { border-color: var(--ui-hover-line); color: var(--ui-dim); }
.find-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.find-btn .find-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-btn kbd { flex: none; padding: 2px 5px; border: 1px solid var(--ui-line-2); border-radius: 4px; background: var(--ui-panel); color: var(--ui-dim); font: 600 10.5px var(--font); }
@media (max-width: 1365px) { .find-btn { flex: none; width: 34px; padding: 0; justify-content: center; } .find-btn .find-text, .find-btn kbd { display: none; } }
@media (max-width: 760px) { .find-btn { display: none; } }

.find-overlay { place-items: start center; padding-top: 12vh; z-index: 90; }
.find-box {
  width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 14px;
  box-shadow: 0 30px 80px -20px var(--ui-shadow-strong);
}
.find-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ui-line); color: var(--ui-faint); }
.find-in svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.find-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--ui-text); }
.find-list { flex: 1; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--ui-scroll) transparent; }
.find-item {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--ui-text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.find-item:hover { background: var(--ui-panel-2); }
.find-item[aria-selected="true"] { background: var(--ui-accent-soft); }
.find-item .fi-label { font-weight: 600; min-width: 0; }
.find-item .fi-where { margin-left: auto; flex: none; max-width: 55%; color: var(--ui-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-empty { margin: 18px; color: var(--ui-faint); text-align: center; }
.find-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--ui-line); color: var(--ui-faint); font-size: 11.5px; }

/* ---------- Export: quick downloads, then one dialog (R8) ---------- */
.export-more-sep { height: 1px; margin: 14px 0 10px; background: var(--ui-line); }
.export-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.modal-export { width: min(820px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px)); max-height: none; overflow: hidden; }
.export-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
/* Only a close button: it stays beside the title on a phone too. */
.modal-export .modal-head { flex-wrap: nowrap; }
.modal-export .modal-actions { width: auto; margin-left: auto; }
.export-tabs { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--ui-line); background: var(--ui-bg); overflow-y: auto; }
.export-tabs button {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--ui-dim); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.export-tabs button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.export-tabs button:hover { color: var(--ui-text); background: var(--ui-panel-2); }
.export-tabs button[aria-selected="true"] { color: var(--ui-strong); background: var(--ui-panel); box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.export-panes { overflow-y: auto; padding: 18px 20px 22px; }
.export-panes section { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.export-panes section[hidden] { display: none; }
.export-panes h3 { margin: 0 0 4px; font-size: 16px; color: var(--ui-strong); }
.export-panes .insp-sub { margin-top: 14px; }
.export-panes .btn-primary { align-self: flex-start; margin-top: 10px; }
.export-panes .row-2 { margin-bottom: 4px; }
/* A choice in a tab: a title and one line saying what it makes. */
.ex-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 6px; }
.ex-opt {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-panel); color: var(--ui-text);
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.ex-opt strong { font-size: 14px; color: var(--ui-strong); padding-right: 64px; }
.ex-opt span:not(.plan-badge) { font-size: 12.5px; line-height: 1.45; color: var(--ui-dim); }
.ex-opt:hover { border-color: var(--ui-hover-line); box-shadow: 0 2px 10px var(--ui-shadow); }
.ex-opt:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ex-opt .plan-badge { position: absolute; top: 12px; right: 12px; }
.ex-toggle { margin-top: 8px; }

/* ---------- The start screen (U4) ---------- */
.start-overlay { z-index: 85; }
.start-box {
  width: min(960px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; display: grid; gap: 18px; padding: 26px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 16px; box-shadow: 0 30px 80px -20px var(--ui-shadow-strong);
}
.start-head h2 { margin: 0; font-size: 24px; letter-spacing: -.015em; color: var(--ui-strong); }
.start-head p { margin: 4px 0 0; color: var(--ui-dim); }
.start-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.start-way {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px;
  border: 1px solid var(--ui-line-2); border-radius: 12px; background: var(--ui-panel); color: var(--ui-text); font: inherit; text-align: left; cursor: pointer;
}
.start-way:hover, .start-way:focus-visible { border-color: var(--ui-accent); background: var(--ui-accent-soft); outline: none; }
.start-way svg { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: var(--ui-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.start-way strong { font-size: 14px; color: var(--ui-strong); }
.start-way span { font-size: 12px; color: var(--ui-faint); }
.start-sub { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-dim); }
.start-tpls { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.start-tpl {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 5px 5px 7px;
  border: 1px solid var(--ui-line-2); border-radius: 10px; background: var(--ui-panel); color: var(--ui-text); font: inherit; text-align: left; cursor: pointer;
}
.start-tpl:hover, .start-tpl:focus-visible { border-color: var(--ui-accent); outline: none; }
.start-tpl .tpl-thumb { display: block; width: 100%; height: auto; aspect-ratio: 520 / 729; border-radius: 6px; background-color: var(--ui-bg); background-size: cover; background-position: center; clip-path: none; box-shadow: none; }
.start-tpl .st-name { padding: 0 2px; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.start-tpl .plan-badge { margin-left: 2px; }
.start-tpl .start-all-thumb { display: grid; place-items: center; border: 1.5px dashed var(--ui-line-2); background: none; }
.start-all-thumb svg { width: 26px; height: 26px; fill: none; stroke: var(--ui-faint); stroke-width: 1.8; stroke-linecap: round; }
.start-foot { display: flex; align-items: center; gap: 12px; justify-content: space-between; color: var(--ui-faint); font-size: 12.5px; }

/* ---------- Tablet and phone ---------- */
@media (min-width: 761px) and (max-width: 1023px) {
  .export-body { grid-template-columns: 170px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rail-foot { display: none; }
  body:not(.has-selection) .rail-card { display: none; }
  .panel-head { position: sticky; top: 24px; gap: 8px; }   /* its padding is the main rule's */
  .panel-sub { display: none; }
  .export-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .export-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-line); }
  .export-tabs button { flex: none; white-space: nowrap; }
  .modal-export { height: calc(100dvh - 24px); }
  .start-box { padding: 18px; gap: 14px; }
  .start-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .start-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .find-overlay { padding-top: 10px; }
}
.look-grid > .look { min-width: 0; }

/* =====================================================================
   THE 3D VIEW (X5)  — script.js 13ad. Not a .modal, so it is never drawn
   at the compact zoom: the drag works in screen pixels.
   ===================================================================== */
.viewer-overlay { padding: 18px; z-index: 88; }
.viewer-box {
  width: min(1180px, 100%); height: min(860px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 16px; box-shadow: 0 30px 80px -20px var(--ui-shadow-strong);
}
.viewer-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--ui-line); }
.viewer-heading h2 { margin: 0; font-size: 16px; color: var(--ui-strong); }
.viewer-heading p { margin: 2px 0 0; font-size: 12px; color: var(--ui-faint); }
.viewer-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.viewer-tools .btn { height: 34px; padding: 0 12px; }
.viewer-tools .btn[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-text); }
.viewer-bg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ui-line-2); border-radius: 9px; }
.viewer-bg button { padding: 3px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.viewer-bg button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.v3sw { display: block; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--ui-line-2); }
.v3-dark, .viewer-stage[data-bg="dark"] { background: radial-gradient(ellipse at 50% 42%, #2a2f42, #07080d 72%); }
.v3-light, .viewer-stage[data-bg="light"] { background: radial-gradient(ellipse at 50% 42%, #ffffff, #d9dde6 72%); }
.v3-felt, .viewer-stage[data-bg="felt"] { background: radial-gradient(ellipse at 50% 42%, #2f6b47, #143322 72%); }
.viewer-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
.viewer-stage:active { cursor: grabbing; }
.viewer-canvas { display: block; position: absolute; inset: 0; }
.viewer-loading { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: #c9cede; font-size: 14px; }
.viewer-stage[data-bg="light"] .viewer-loading { color: #4a5164; }
.viewer-loading[hidden] { display: none; }
@media (max-width: 760px) {
  .viewer-overlay { padding: 0; }
  .viewer-box { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .viewer-heading p { display: none; }
  .viewer-tools { gap: 6px; }
  .viewer-tools .btn { padding: 0 9px; }
}

/* =====================================================================
   MAINTENANCE BAR  — auth.js, for an administrator while the site is
   closed (api/maintenance.php). Small, at the foot, out of the way.
   ===================================================================== */
.maint-bar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 8px 10px 8px 14px;
  border: 1px solid var(--ui-warn-line); border-radius: 999px; color: var(--ui-warn-text);
  background: linear-gradient(var(--ui-warn-bg), var(--ui-warn-bg)), var(--ui-bg-2);
  font-size: 13px; line-height: 1.35; box-shadow: 0 10px 30px var(--ui-shadow);
}
.maint-bar a {
  flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ui-warn-line);
  color: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.maint-bar a:hover { background: var(--ui-hover-line); }
@media (max-width: 760px) {
  .maint-bar { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); border-radius: 14px; font-size: 12px; }
}


/* ---------- Style presets, live corners, isolation, info (A28, A33, A40, A42) ---------- */
.preset-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 5px; border: 1px solid var(--ui-line); border-radius: 9px;
  background: var(--ui-bg); color: var(--ui-dim); font: inherit; font-size: 10.5px; line-height: 1.2; cursor: pointer; min-width: 0; }
.preset-tile svg { width: 100%; height: auto; aspect-ratio: 5 / 3; overflow: visible; }
.preset-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-tile:hover { border-color: var(--ui-hover-line); color: var(--ui-text); }
.preset-tile[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
.preset-tile:disabled { opacity: .45; cursor: default; }
.edit-overlay .corner-widget { fill: #fff; stroke: #8f9bff; stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: none; }
.edit-overlay .corner-widget.is-round { fill: #8f9bff; stroke: #fff; }
.edit-overlay .corner-widget.is-on { fill: #ffcf6b; stroke: #fff; }
.edit-overlay .handle-hit[data-handle="corner"] { cursor: crosshair; }
.iso-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 26; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border: 1px solid var(--ui-line-2); border-radius: 999px; background: var(--ui-float);
  box-shadow: 0 10px 28px -10px var(--ui-shadow-strong), 0 1px 3px var(--ui-shadow); font-size: 13px; color: var(--ui-dim); max-width: calc(100% - 32px); }
.iso-bar[hidden] { display: none; }
.iso-bar strong { color: var(--ui-strong); }
.iso-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-panel { position: absolute; left: 14px; bottom: 14px; z-index: 26; width: 268px; padding: 8px 10px 8px; border: 1px solid var(--ui-line-2); border-radius: 12px;
  background: var(--ui-float); box-shadow: 0 10px 28px -10px var(--ui-shadow-strong), 0 1px 3px var(--ui-shadow); font-size: 12px; color: var(--ui-dim); }
.info-panel[hidden] { display: none; }
.ip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--ui-strong); }
.ip-head .icon-btn { width: 26px; height: 26px; }
.ip-grid { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--ui-line); }
.ip-grid[hidden] { display: none; }
.ip-grid b { color: var(--ui-text); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ip-grid em { font-style: normal; white-space: nowrap; color: var(--ui-faint); font-variant-numeric: tabular-nums; }
.ip-sub { grid-column: 1 / -1; font-weight: 700; color: var(--ui-strong); }
.ip-color { display: flex; align-items: center; gap: 6px; }
.ip-color i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--ui-line-2);
  background-image: linear-gradient(45deg, var(--ui-line) 25%, transparent 25%, transparent 75%, var(--ui-line) 75%); background-size: 8px 8px; }
.ip-foot { margin: 4px 0 0; font-size: 11px; color: var(--ui-faint); }
@media (max-width: 760px) { .info-panel { bottom: auto; top: 56px; } .iso-bar { bottom: 10px; } }

/* Right-click menu on the card (V1). */
.ctx-menu { position: fixed; z-index: 90; min-width: 230px; max-width: 300px; padding: 6px;
  background: var(--ui-bg-2); border: 1px solid var(--ui-line-2); border-radius: 12px; box-shadow: 0 24px 60px -12px var(--ui-shadow-strong); }
.ctx-menu .menu-item { padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.ctx-menu .menu-item span { flex: 1; }
.ctx-head { margin: 2px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ui-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-key { font: inherit; font-size: 11px; font-weight: 500; color: var(--ui-faint); }
body:has(> .workspace) .ctx-menu { zoom: var(--ui-z, 1); }
/* Typing on the card (V2): a box over the text, never part of the card. */
.inline-edit { position: absolute; z-index: 40; box-sizing: border-box; margin: 0; padding: 6px 10px; resize: none;
  font-family: inherit; font-weight: 600; line-height: 1.3; color: var(--ui-text); background: var(--ui-bg-2);
  border: 2px solid var(--ui-accent); border-radius: 8px; box-shadow: 0 12px 32px -8px var(--ui-shadow-strong); outline: none; }
/* Print check (V7). */
.modal-check { width: min(560px, calc(100vw - 32px)); }
.pc-body { padding: 4px 20px 8px; display: grid; gap: 12px; }
.pc-body > p { margin: 0; }
/* Send feedback (card menu). */
.fb-form .field { margin: 0; }
.fb-form textarea { width: 100%; resize: vertical; min-height: 110px; }
.fb-shot { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ui-text); cursor: pointer; }
.fb-preview { width: 96px; height: auto; border-radius: 8px; box-shadow: 0 4px 14px var(--ui-shadow); }
.fb-preview[hidden] { display: none; }
.gp-challenge[hidden] { display: none; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.pc-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 10px; font-size: 13px; line-height: 1.45; }
.pc-item .pc-text { flex: 1; }
.pc-item .btn { flex: none; }
.pc-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ui-warn-text); }
.pc-low .pc-dot, .pc-safe .pc-dot { background: var(--ui-danger-text); }
.pc-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.pc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-row .hint { margin: 0; }
/* Over the export dialog, which opens it. */
#printCheckOverlay { z-index: 66; }
#unsavedOverlay { z-index: 67; }

/* ---------- The card menu (2026-10-18) ----------
   A labelled button in the top bar, and a floating panel of three groups:
   This card, Share and sell, Go to. A group with nothing showing goes. On a
   phone it is one column across the screen (the .menu-pop rule there). */
.card-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-left: 6px; padding: 0 10px; border: 1px solid var(--ui-line-2); border-radius: 8px;
  background: var(--ui-panel); color: var(--ui-text); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.card-menu-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.card-menu-btn .cm-caret { width: 13px; height: 13px; color: var(--ui-dim); transition: transform .15s; }
.card-menu-btn:hover { border-color: var(--ui-hover-line); background: var(--ui-panel-2); }
#cardMenu[open] > .card-menu-btn { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }
#cardMenu[open] > .card-menu-btn .cm-caret { transform: rotate(180deg); color: inherit; }
.card-menu-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.card-pop { display: flex; align-items: stretch; gap: 0; width: max-content; max-width: calc(100vw - 32px); padding: 14px 10px 12px; border-radius: 18px;
  border: 1px solid var(--ui-line-2); background: var(--ui-bg-2);
  box-shadow: 0 2px 6px var(--ui-shadow), 0 30px 70px -18px var(--ui-shadow-strong); }
#cardMenu[open] > .card-pop { animation: cm-in .14s ease-out; transform-origin: top left; }
@keyframes cm-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.card-pop .menu-group { display: flex; flex-direction: column; gap: 2px; min-width: 232px; padding: 2px 10px 4px; }
.card-pop .menu-group + .menu-group, .card-pop .menu-group + .menu-group ~ .menu-group { border-left: 1px solid var(--ui-line); }
.card-pop .menu-group:not(:has(> .menu-item:not([hidden]))) { display: none; }
.card-pop .menu-head { margin: 2px 6px 8px; font-size: 12px; color: var(--ui-dim); }
.card-pop .menu-item { gap: 12px; padding: 7px 10px 7px 7px; border-radius: 10px; font-size: 15px; }
.card-pop .menu-item svg { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 9px; background: var(--ui-panel-2); color: var(--ui-accent-text); }
.card-pop .menu-item:hover, .card-pop .menu-item:focus-visible { background: var(--ui-accent-soft); color: var(--ui-strong); }
.card-pop .menu-item:hover svg, .card-pop .menu-item:focus-visible svg { background: var(--ui-bg-2); }
.card-pop > .menu-phone { flex-basis: 100%; }
/* The marketplace in the switch: a link to its own page, in a new tab. */
a.mode-btn { text-decoration: none; }
.mode-btn[hidden] { display: none; }
.mode-btn .mode-ext { width: 11px; height: 11px; margin-left: -2px; opacity: .6; }
@media (max-width: 1279px) {
  #modeMarket > span, #modeMarket .mode-ext { display: none; }
  .card-menu-btn > span { display: none; }
  .card-menu-btn { padding: 0 7px; margin-left: 2px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  /* Groups wrap here, so each is its own tile rather than a column with a rule beside it. */
  .card-pop { flex-wrap: wrap; gap: 8px; width: 520px; padding: 10px; }
  .card-pop .menu-group { flex: 1 1 220px; min-width: 0; padding: 8px 6px 6px; border-radius: 12px; background: var(--ui-panel); }
  .card-pop .menu-group + .menu-group, .card-pop .menu-group + .menu-group ~ .menu-group { border-left: 0; }
}
@media (max-width: 760px) {
  .card-pop { flex-direction: column; width: auto; max-height: calc(100dvh - var(--header-h) - var(--rail-h, 0px) - 24px); overflow: auto; }
  .card-pop .menu-group { min-width: 0; padding: 2px 2px 6px; }
  .card-pop .menu-group + .menu-group, .card-pop .menu-group + .menu-group ~ .menu-group { border-left: 0; border-top: 1px solid var(--ui-line); padding-top: 6px; }
  .card-pop .menu-item { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { #cardMenu[open] > .card-pop { animation: none; } .card-menu-btn .cm-caret { transition: none; } }

/* ---------- Save, Publish and Sell under the card (2026-10-18) ----------
   One row where the caption was, so the card keeps its size: the template
   name as a small chip (its title holds the old hint), then the buttons.
   Phones keep these in the card menu: the row is hidden there. */
.card-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 30px; }
.card-actions .stage-meta { margin: 0 6px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--ui-panel); border: 1px solid var(--ui-line); }
.card-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--ui-line-2); border-radius: 999px;
  background: var(--ui-bg-2); color: var(--ui-text); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  box-shadow: 0 2px 8px -4px var(--ui-shadow); transition: border-color .15s, background .15s, transform .15s; }
.card-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--ui-accent-text); }
.card-act:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); transform: translateY(-1px); }
.card-act:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.card-act[hidden] { display: none; }
.card-act.is-demo-off { opacity: .55; }
.stage.has-boards .card-actions { display: none; }
@media (max-width: 760px) { .card-actions { display: none; } }
@media (prefers-reduced-motion: reduce) { .card-act { transition: none; } .card-act:hover { transform: none; } }

/* ---------- The AI at work, over the card (2026-10-18) ----------
   Beside the card's SVG inside .card-stage, never in it, so no export sees it. */
.ai-veil { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: 4%; overflow: hidden; }
.ai-veil::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--ui-accent) 22%, transparent), transparent 70%);
  animation: ai-breathe 2.4s ease-in-out infinite; }
.ai-sweep { position: absolute; inset: -30% -60%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  animation: ai-sweep 1.8s cubic-bezier(.4, 0, .2, 1) infinite; mix-blend-mode: screen; }
.ai-sparks i { position: absolute; width: calc(10px * var(--s, 1)); height: calc(10px * var(--s, 1)); margin: -5px;
  background: radial-gradient(circle, #fff 0 18%, color-mix(in srgb, var(--ui-accent) 80%, #fff) 30%, transparent 62%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0;
  animation: ai-spark 2.4s ease-in-out var(--d, 0s) infinite; }
.ai-pill { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; max-width: 90%;
  padding: 9px 16px 9px 11px; border-radius: 999px; background: color-mix(in srgb, var(--ui-bg-2) 88%, transparent); color: var(--ui-strong);
  border: 1px solid var(--ui-line-2); box-shadow: 0 10px 30px -10px var(--ui-shadow-strong); font-size: 13.5px; font-weight: 650; white-space: nowrap;
  backdrop-filter: blur(6px); }
.ai-orb { width: 16px; height: 16px; flex: none; border-radius: 50%; background: conic-gradient(from 0deg, var(--ui-accent), #38e1ff, #e9b95c, var(--ui-accent));
  animation: ai-spin 1.1s linear infinite; box-shadow: 0 0 12px color-mix(in srgb, var(--ui-accent) 70%, transparent); }
.ai-step.is-in { animation: ai-step .35s ease-out both; }
.ai-dots { display: inline-flex; gap: 3px; }
.ai-dots b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: ai-dot 1s ease-in-out infinite; }
.ai-dots b:nth-child(2) { animation-delay: .15s; }
.ai-dots b:nth-child(3) { animation-delay: .3s; }
.ai-veil.is-done .ai-sweep, .ai-veil.is-done .ai-sparks { opacity: .4; }
.card-svg .ai-typing { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55)); }
@keyframes ai-sweep { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
@keyframes ai-breathe { 50% { opacity: .45; } }
@keyframes ai-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-step { from { opacity: 0; transform: translateY(6px); } }
@keyframes ai-dot { 50% { opacity: 1; transform: translateY(-2px); } }
.ai-veil.is-calm::before, .ai-veil.is-calm .ai-orb, .ai-veil.is-calm .ai-dots b { animation: none; }
.stat-name::placeholder { color: var(--ui-text); opacity: 1; }
.stat-name:hover { border-color: var(--ui-line-2); background: var(--ui-panel); }
.stat-name:focus { outline: none; border-color: var(--ui-accent); background: var(--ui-bg-2); }
.stat-name:focus::placeholder { color: var(--ui-faint); }

/* Template maker (13ag): six generated layouts to choose from. Admins only. */
.modal.modal-maker { width: min(1120px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.tm-body { padding: 4px 20px 20px; overflow: auto; }
.tm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 10px 0 6px; }
.tm-controls .field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.tm-controls .btn { flex: 0 0 auto; }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 10px auto 0; max-width: 860px; }
.tm-tile { display: flex; flex-direction: column; gap: 8px; }
.tm-pick { padding: 0; border: 1px solid var(--ui-line-2); border-radius: 14px; background: var(--ui-bg-2); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s; }
.tm-pick:hover, .tm-pick:focus-visible { border-color: var(--ui-accent); transform: translateY(-2px); }
.tm-pic { display: block; aspect-ratio: 5 / 7; background: center / contain no-repeat; }
.tm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-meta .btn { flex: 1 1 auto; }
.tm-words { margin: 8px 0 0; }
#tmRead { margin: 4px 0 0; min-height: 1.2em; color: var(--ui-accent-text); }
.tm-name { color: var(--ui-dim); font-size: 12px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tm-meta { flex-direction: column; align-items: stretch; } }
.tm-readrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-readrow #tmRead { flex: 1 1 260px; }
.tm-backs { margin: 4px 0 0; max-width: 260px; }
.tm-row2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tm-mixpick[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-text); }

/* Drag to select (UX-02): the box drawn on the stage while dragging. */
.stage .marquee { position: absolute; z-index: 30; pointer-events: none; border: 1px solid #6c8cff; background: rgba(108, 140, 255, .12); border-radius: 2px; }

/* The second element, folded into one row (UX-03). */
.type2-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none;
  padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-panel-2, var(--ui-panel)); color: var(--ui-text); font-size: 13px; }
.type2-fold > summary::-webkit-details-marker { display: none; }
.type2-fold > summary:hover { border-color: var(--ui-hover-line); }
.type2-fold[open] > summary { margin-bottom: 8px; }
.type2-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.type2-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); }
.type2-dot svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.type2-change { color: var(--ui-accent-text); font-weight: 650; font-size: 12.5px; }
.type2-fold[open] .type2-change { visibility: hidden; }

/* The template's picture shown while a new template is drawn (UX-06). */
.card-stage > .tpl-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 5; pointer-events: none; transition: opacity .18s; }
.card-stage > .tpl-preview.is-out { opacity: 0; }
.card-stage.is-switching { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .card-stage > .tpl-preview { transition: none; } }