/* ============ App shell ============ */
:root {
  --bg: #f4f4f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --line: #e6e5ec;
  --line-strong: #d6d4df;
  --text: #1c1b22;
  --muted: #6e6b7b;
  --accent: #4b2bd0;
  --accent-hover: #3d20b8;
  --accent-soft: #eeeaff;
  --danger: #c62f45;
  --ok: #1f7a3d;
  --radius: 10px;
  --radius-sm: 8px;
  --topbar: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg.ic, .icon-btn svg, .rail svg, .eye svg, .chev { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Top bar ---------- */
.topbar {
  height: var(--topbar); flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.brand-dot { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, #4b2bd0 0%, #7a5cff 55%, #c6ef4c 100%); }
.top-mid { display: flex; gap: 4px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; text-align: center; }
.count:empty { display: none; }

/* ---------- Buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font-weight: 600; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { border-color: #f0c4cb; color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { height: 28px; padding: 0 9px; font-size: 12px; }
.btn.wide { flex: 1; }
.btn .ic { width: 16px; height: 16px; }
.icon-btn {
  width: 34px; height: 34px; display: inline-grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 12px; }
.link:hover { text-decoration: underline; }
.x { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); }
.x:hover { background: var(--surface-2); color: var(--text); }

.split { display: flex; margin-left: 6px; }
.split > .btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.btn.caret { width: 30px; padding: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 1px solid rgba(255,255,255,.25); }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); width: 240px; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(20, 10, 60, .16); padding: 12px; display: flex; flex-direction: column; gap: 10px;
}

.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.field input:not([type="color"]):not([type="checkbox"]), .field select, .field textarea, .input {
  width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 10px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; outline: none;
}
.field textarea, textarea.input { height: auto; padding: 8px 10px; resize: vertical; min-height: 40px; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-row .btn { flex: 1; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
input[type="color"] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: none; cursor: pointer; flex: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }
input[type="range"] { accent-color: var(--accent); width: 100%; margin: 0; }
.hint { margin: 0; font-size: 12px; color: var(--muted); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fdeaed; color: var(--danger); white-space: nowrap; }
.pill.ok { background: #e4f6e9; color: var(--ok); }

.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ---------- Import banner ---------- */
.banner { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--accent-soft); color: var(--text); border-bottom: 1px solid #d9d0ff; font-size: 13px; }
.banner span { flex: 1; }
.server-note { background: #e9f8ee; color: var(--ok); border-radius: 8px; padding: 8px 10px; font-weight: 600; }

/* ---------- Layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; }

.rail {
  width: 68px; flex: none; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0;
}
.rail button {
  width: 58px; padding: 8px 0 6px; border: 0; border-radius: var(--radius); background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600;
}
.rail svg { width: 21px; height: 21px; }
.rail button:hover { background: var(--surface-2); color: var(--text); }
.rail button.on { background: var(--accent-soft); color: var(--accent); }

.panel { width: 320px; flex: none; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); }
.pane { padding: 18px 18px 40px; display: flex; flex-direction: column; gap: 18px; }
.pane h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.group { display: flex; flex-direction: column; gap: 10px; }
.group + .group, .pane > .sub { padding-top: 16px; border-top: 1px solid var(--line); }
h3 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.sub { border-radius: var(--radius); }
.sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.sub > summary::-webkit-details-marker { display: none; }
.sub .chev { width: 16px; height: 16px; transition: transform .15s; color: var(--muted); }
.sub[open] .chev { transform: rotate(180deg); }
.sub[open] > summary { margin-bottom: 12px; }

.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preset { border: 2px solid transparent; border-radius: 10px; padding: 0; background: none; cursor: pointer; text-align: left; box-shadow: 0 0 0 1px var(--line); }
.preset:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.preset.on { border-color: var(--accent); box-shadow: none; }
.preset-sw { display: block; height: 50px; border-radius: 8px 8px 0 0; position: relative; overflow: hidden; }
.preset-sw i { position: absolute; display: block; }
.preset-name { display: block; padding: 4px 7px 5px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tile { padding: 0; border: 2px solid transparent; border-radius: 9px; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 0 0 1px var(--line); text-align: center; }
.tile:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.tile.on { border-color: var(--accent); box-shadow: none; }
.tile .pv { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 7px 7px 0 0; overflow: hidden; }
.tile .pv svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile span:last-child { font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 0 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.on span:last-child { color: var(--accent); }
.colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.color-row { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.inline-colors { display: flex; gap: 8px; }
.qr-status { font-size: 12px; color: var(--muted); word-break: break-all; }
.qr-status.warn { color: #a05a00; }
.qr-status a { color: var(--accent); }

/* Create pane */
.prompt-box { font-size: 14px; min-height: 110px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 11.5px; color: var(--muted); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); margin-top: -6px; }
.plan p { margin: 0; font-weight: 600; }
.plan dl { margin: 0; display: grid; grid-template-columns: 78px 1fr; gap: 4px 8px; font-size: 12px; }
.plan dt { color: var(--muted); }
.plan dd { margin: 0; word-break: break-word; }
.swatches { display: flex; gap: 4px; }
.swatches i { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: block; }

/* QR logo */
.qr-logo { display: flex; flex-direction: column; gap: 10px; }
.logo-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.logo-pick button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--muted); }
.logo-pick button:hover { border-color: var(--line-strong); }
.logo-pick button.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.logo-pick img { width: 40px; height: 40px; object-fit: contain; }
.logo-pick b { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; font-weight: 400; border: 1px dashed var(--line-strong); border-radius: 8px; }
.scan-result { font-size: 12px; font-weight: 600; padding: 7px 10px; border-radius: 8px; }
.scan-result.ok { background: #e9f8ee; color: var(--ok); }
.scan-result.bad { background: #fff3e6; color: #a05a00; }
.scan-result.checking { background: var(--surface-2); color: var(--muted); }

/* Character pane */
.engine { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.engine label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 9px 10px; cursor: pointer; }
.engine label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.engine input { margin-top: 2px; }
.engine span { display: flex; flex-direction: column; line-height: 1.25; }
.engine b { font-size: 13px; }
.engine small { font-size: 11px; color: var(--muted); }
.ai-summary { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: -8px; }
.ai-summary #aiSummary { font-weight: 600; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-summary .link { margin-left: auto; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-chip { position: relative; padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; aspect-ratio: 2 / 1.1; }
.style-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.style-chip.on { border-color: var(--accent); }
.style-chip.on::after { content: "✓"; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.style-chip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 5px; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: left; }
.file-link { cursor: pointer; }
.ref { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; padding: 6px; font-size: 12px; color: var(--muted); }
.ref img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.ref span { flex: 1; }
.gen-actions { display: flex; gap: 8px; }
.gen-actions .btn { height: 40px; font-size: 14px; }
.status { font-size: 12px; color: #3a3650; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; max-height: 96px; overflow: hidden; white-space: pre-wrap; word-break: break-word; margin-top: -8px; }
.status.error { background: #fff4f5; border-color: #f4ccd2; color: var(--danger); }
.status.ok { background: #f2fbf4; border-color: #cdebd5; color: var(--ok); }
.status .spin { display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; margin-right: 6px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.prompt-used { font-size: 12px; color: var(--muted); margin-top: -8px; }
.prompt-used summary { cursor: pointer; font-weight: 600; }
.prompt-used pre { white-space: pre-wrap; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0 0; max-height: 220px; overflow: auto; color: var(--text); }
.refine { display: flex; gap: 8px; }
.refine .input { flex: 1; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery .hint { grid-column: 1 / -1; }
.thumb { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); aspect-ratio: 3 / 2; cursor: pointer; overflow: hidden; padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.thumb .x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; font-size: 14px; background: rgba(255,255,255,.92); display: none; }
.thumb:hover .x { display: block; }
.drop { border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 18px 14px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.drop strong { color: var(--text); font-size: 13px; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Stage ---------- */
.stage {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 1px 1px, #dad8e4 1px, transparent 0) 0 0 / 20px 20px, var(--bg);
}
.scaler { position: relative; box-shadow: 0 18px 50px rgba(30, 20, 70, .16), 0 2px 6px rgba(30, 20, 70, .08); }
.stage-hint { position: absolute; bottom: 10px; left: 12px; right: 12px; text-align: center; color: var(--muted); font-size: 11.5px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Inspector ---------- */
.inspector { width: 272px; flex: none; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.insp-section { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.insp-section + .insp-section { border-top: 1px solid var(--line); }
.layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.layer-row { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 4px; border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.layer-row:hover { background: var(--surface-2); }
.layer-row.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.layer-row.off .name { color: #a9a6b5; text-decoration: line-through; }
.layer-row .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-row .tag { font-size: 10px; color: var(--muted); font-weight: 500; }
.eye { width: 24px; height: 24px; border: 0; background: none; border-radius: 5px; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; }
.eye svg { width: 15px; height: 15px; }
.eye:hover { background: rgba(0,0,0,.06); color: var(--text); }
.eye:disabled { opacity: .3; cursor: default; }

.insp-title { display: flex; align-items: center; justify-content: space-between; }
.insp-title strong { font-size: 15px; }
.ctl { display: grid; grid-template-columns: 48px 1fr 62px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.num { position: relative; }
.num input { width: 100%; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 18px 0 6px; font-size: 12px; text-align: right; background: var(--surface); outline: none; -moz-appearance: textfield; }
.num input::-webkit-outer-spin-button, .num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num input:focus { border-color: var(--accent); }
.num em { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: var(--muted); pointer-events: none; }
.quick { display: flex; gap: 4px; padding-left: 56px; }
.quick button { flex: 1; height: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 11px; cursor: pointer; color: var(--muted); }
.quick button:hover { border-color: var(--line-strong); color: var(--text); }
.insp-sub { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.color-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.insp-empty { display: flex; flex-direction: column; gap: 12px; }
.insp-empty p { margin: 0; color: var(--muted); }
.keys { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; font-size: 12px; color: var(--muted); }
.keys li { display: contents; }
.keys kbd { font: 600 11px/1 ui-monospace, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; color: var(--text); white-space: nowrap; justify-self: start; }

/* ---------- Dialogs & toast ---------- */
.dialog { border: 0; border-radius: 14px; padding: 0; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: 0 30px 80px rgba(20, 10, 60, .3); color: var(--text); }
.dialog.narrow { width: min(460px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(20, 16, 40, .45); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dialog-head > div { display: flex; gap: 6px; align-items: center; }
.dialog-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 18px; }
.lib-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.lib-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-2); display: block; cursor: pointer; }
.lib-card .meta { padding: 8px 10px; font-size: 12px; }
.lib-card .meta strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-card .meta span { color: var(--muted); }
.lib-card .acts { display: flex; gap: 4px; padding: 0 8px 8px; }
.lib-card .acts .btn { flex: 1; height: 28px; font-size: 12px; padding: 0 6px; }
.lib-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 40px 0; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1d1b26; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 50; max-width: calc(100vw - 32px);
}

@media (max-width: 1180px) {
  .panel { width: 290px; }
  .inspector { width: 240px; }
  .brand strong { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .layout { flex-direction: column; }
  .rail { width: 100%; flex-direction: row; justify-content: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; }
  .panel, .inspector { width: 100%; border: 0; overflow: visible; }
  .stage { flex: none; height: 72vh; }
  .topbar { grid-template-columns: auto auto 1fr; }
  .top-actions .btn.ghost { padding: 0 8px; }
}

/* ============ Poster ============ */
.poster {
  --c-bg: #eaf7f9;
  --ui: 1;
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1350px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--c-bg);
  font-family: "Poppins", sans-serif;
  color: var(--c-head);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  touch-action: none;
}
.poster > * { position: absolute; }
.p-bg, .p-deco, .p-footer { inset: 0; }
.p-bg svg, .p-deco svg, .p-footer svg { display: block; width: 100%; height: 100%; }
.p-bg { z-index: 0; }
/* Full-canvas layers only catch clicks on their painted shapes. */
.p-deco, .p-footer { pointer-events: none; }
.p-deco svg circle, .p-deco svg path, .p-footer svg path, .p-footer svg rect { pointer-events: visiblePainted; }

.p-logo { left: 100px; top: var(--logo-top); display: flex; align-items: center; }
.p-logo img { height: var(--logo-h); width: auto; display: block; max-width: 640px; object-fit: contain; }
.p-wordmark { display: flex; align-items: center; gap: calc(var(--logo-h) * .16); color: var(--c-logo); }
.p-mark svg { display: block; width: calc(var(--logo-h) * .87); height: var(--logo-h); }
.p-wm-text { display: flex; flex-direction: column; align-items: flex-end; }
.p-wm-name { font-weight: 700; font-size: calc(var(--logo-h) * .82); line-height: 1.22; letter-spacing: -.03em; white-space: nowrap; }
.p-wm-tag { font-weight: 700; font-size: calc(var(--logo-h) * .14); line-height: 1.1; white-space: nowrap; margin-top: calc(var(--logo-h) * -.02); }

.p-cert { top: 0; right: 56px; width: var(--cert-w); height: auto; }

.p-head {
  left: 0; right: 0; top: var(--head-top);
  text-align: center;
  font-family: var(--head-font), "Poppins", sans-serif;
  font-weight: 900; font-style: italic;
  color: var(--c-head);
  line-height: .78;
  letter-spacing: -.04em;
  pointer-events: none;
}
.p-head-line { position: static; display: block; width: fit-content; margin: 0 auto; white-space: nowrap; font-size: var(--head-size); padding: 0 .06em; pointer-events: auto; }
.p-badge {
  left: 0; right: 0; margin: 0 auto; width: max-content; top: var(--badge-top);
  background: var(--c-badge-bg); color: var(--c-badge-text);
  border: 5px solid var(--c-badge-border);
  border-radius: 999px;
  padding: .26em .95em .3em;
  font-size: var(--badge-size); font-weight: 800; font-style: italic;
  letter-spacing: -.03em; line-height: 1; white-space: nowrap; text-align: center;
}

.p-title {
  left: 0; right: 0; margin: 0 auto; top: var(--title-top);
  width: var(--title-w); min-height: var(--title-h);
  background: var(--c-title-bg);
  border: 5px solid var(--c-title-border);
  border-radius: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 34px 14px;
}
.p-title-text {
  font-weight: 800; font-style: italic; color: var(--c-title-text);
  text-align: center; line-height: 1.04; letter-spacing: -.03em;
  text-transform: uppercase; white-space: pre-line; overflow-wrap: anywhere;
  font-size: var(--title-size);
  max-width: 100%;
}
.p-title.one-line .p-title-text { white-space: nowrap; overflow-wrap: normal; }

.p-art { left: 0; right: 0; margin: 0 auto; top: var(--art-top); width: var(--art-w); height: var(--art-h); pointer-events: none; }
.p-art-inner { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.p-art-inner img { max-width: 100%; max-height: 100%; display: block; pointer-events: auto; }
.p-art-live { position: absolute; inset: 0; }
.p-art-live svg { width: 100%; height: 100%; display: block; }

.p-tag { border-radius: 999px; border: 6px solid; line-height: 1; white-space: nowrap; letter-spacing: -.02em; text-transform: uppercase; text-align: center; }
.p-setup {
  right: var(--setup-right); top: var(--setup-top);
  background: var(--c-tag-bg); color: var(--c-tag-text); border-color: var(--c-tag-border);
  font-size: var(--setup-size); font-weight: 800; font-style: italic;
  padding: .42em 1em .46em;
}
.p-rate {
  left: 56px; top: var(--rate-top);
  background: var(--c-rate-bg); color: var(--c-rate-text); border-color: var(--c-rate-border);
  font-size: var(--rate-size); font-weight: 700;
  padding: .38em 1.1em .42em;
}

.p-learn { left: 98px; bottom: var(--learn-bottom); color: var(--c-footer-text); font-size: var(--foot-size); line-height: 1.22; white-space: nowrap; }
.p-site { font-weight: 700; color: var(--c-footer-accent); }
.p-qr-wrap { right: 64px; bottom: var(--learn-bottom); width: var(--qr-box); display: flex; flex-direction: column; align-items: center; }
.p-qr { position: relative; width: var(--qr-box); height: var(--qr-box); background: var(--qr-light); padding: calc(var(--qr-box) * .065); border-radius: 6px; }
.p-qr svg { display: block; width: 100%; height: 100%; }
.p-qr-cap { margin-top: calc(var(--foot-size) * .5); text-align: center; color: var(--c-footer-text); font-size: var(--foot-size); line-height: 1.22; white-space: nowrap; }
.p-qr-cap .accent { color: var(--c-footer-accent); font-weight: 700; }

/* Editing affordances (the poster loses the .editing class while exporting). */
.poster.editing [data-layer]:not(.p-bg):not(.p-footer):not(.p-deco):not(.p-art):not(.p-head) { cursor: move; }
.poster.editing .p-head-line, .poster.editing .p-art img, .poster.editing .p-deco svg *, .poster.editing .p-footer path { cursor: move; }
.poster.editing .p-footer path, .poster.editing .p-footer rect { cursor: pointer; }
.poster [contenteditable="plaintext-only"], .poster [contenteditable="true"] { cursor: text; outline: none; user-select: text; box-shadow: 0 0 0 calc(3px * var(--ui)) rgba(75, 43, 208, .55); border-radius: 4px; }
.poster [data-bind]:empty::before { content: "…"; opacity: .4; }

.sel-box {
  z-index: 1000; pointer-events: none;
  border: calc(2px * var(--ui)) solid #4b2bd0;
  box-shadow: 0 0 0 calc(1px * var(--ui)) rgba(255,255,255,.8);
}
.sel-box.static { border-style: dashed; }
.sel-box.static .h, .sel-box.static .rot, .sel-box.static .rot-line { display: none; }
.sel-box .h, .sel-box .rot { position: absolute; pointer-events: auto; background: #fff; border: calc(2px * var(--ui)) solid #4b2bd0; }
.sel-box .h { width: calc(13px * var(--ui)); height: calc(13px * var(--ui)); border-radius: calc(3px * var(--ui)); }
.sel-box .nw { left: 0; top: 0; translate: -50% -50%; cursor: nwse-resize; }
.sel-box .ne { right: 0; top: 0; translate: 50% -50%; cursor: nesw-resize; }
.sel-box .sw { left: 0; bottom: 0; translate: -50% 50%; cursor: nesw-resize; }
.sel-box .se { right: 0; bottom: 0; translate: 50% 50%; cursor: nwse-resize; }
.sel-box .e, .sel-box .w, .sel-box .n, .sel-box .s { display: none; border-radius: calc(5px * var(--ui)); }
.sel-box .e, .sel-box .w { top: 50%; width: calc(9px * var(--ui)); height: calc(26px * var(--ui)); cursor: ew-resize; }
.sel-box .e { right: 0; translate: 50% -50%; }
.sel-box .w { left: 0; translate: -50% -50%; }
.sel-box .n, .sel-box .s { left: 50%; width: calc(26px * var(--ui)); height: calc(9px * var(--ui)); cursor: ns-resize; }
.sel-box .n { top: 0; translate: -50% -50%; }
.sel-box .s { bottom: 0; translate: -50% 50%; }
.sel-box.can-w .e, .sel-box.can-w .w, .sel-box.can-h .n, .sel-box.can-h .s { display: block; }
.sel-box .rot { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); border-radius: 50%; left: 50%; top: calc(-34px * var(--ui)); translate: -50% -50%; cursor: grab; background: #4b2bd0; box-shadow: 0 0 0 calc(3px * var(--ui)) #fff; }
.sel-box .rot-line { position: absolute; left: 50%; top: calc(-34px * var(--ui)); width: calc(2px * var(--ui)); height: calc(34px * var(--ui)); translate: -50% 0; background: #4b2bd0; }
.sel-label {
  position: absolute; left: calc(-2px * var(--ui)); bottom: 100%; margin-bottom: calc(6px * var(--ui));
  background: #4b2bd0; color: #fff; font: 600 calc(12px * var(--ui))/1 system-ui, sans-serif;
  padding: calc(4px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(4px * var(--ui)); white-space: nowrap;
}
.sel-box.static .sel-label { bottom: auto; top: calc(6px * var(--ui)); left: calc(6px * var(--ui)); }
.guide { z-index: 999; top: 0; bottom: 0; left: 540px; width: calc(1px * var(--ui)); background: #ff3d7f; pointer-events: none; }