/* Design Studio. Uses the site tokens from theme.css; nothing here hard-codes
   a brand color except the canvas backdrop, which must stay neutral. */

.st-body { margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--ink); }
.st-body * { box-sizing: border-box; }
/* The site's global button and field styles are made for marketing pages;
   the editor needs quiet, compact controls. :where() keeps this reset at the
   same weight as those globals, so every class below still wins over it. */
.st-body [hidden] { display: none !important; }
:where(.st-body) button { font-family: var(--font-body); font-weight: 500; font-variation-settings: normal; letter-spacing: normal; text-transform: none; font-size: 0.8rem; padding: 0; border-radius: 6px; gap: 0.35rem; }
.st-body h2 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.6rem; font-weight: 600; }
.st-body h3 { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-dim); margin: 1.1rem 0 0.5rem; font-weight: 600; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.st-top { flex: none; display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--line-strong); background: var(--bg-subtle); min-height: 56px; flex-wrap: wrap; }
.st-brand { display: flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0.03em; }
.st-brand img { height: 28px; width: auto; }
.st-back { font-size: 0.8rem; color: var(--ink-dim); text-decoration: none; white-space: nowrap; padding: 0.35rem 0.2rem; }
.st-back:hover, .st-back:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.st-top-mid { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 260px; min-width: 0; }
.st-size { font-size: 0.75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-top-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.st-save-state { font-size: 0.72rem; color: var(--ink-faint); min-width: 4.5rem; text-align: right; }

.st-body .st-select, .st-body .st-input { background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0.42rem 0.55rem; font: inherit; font-size: 0.84rem; width: 100%; min-width: 0; }
.st-body .st-select { width: auto; max-width: 280px; }
.st-body .st-input:focus, .st-body .st-select:focus { outline: none; border-color: var(--violet-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-hot) 25%, transparent); }
.st-body textarea.st-input { resize: vertical; line-height: 1.45; min-height: 0; }

.st-btn, .st-ibtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 6px; font: inherit; font-size: 0.8rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.st-btn { padding: 0.45rem 0.8rem; min-height: 34px; }
.st-ibtn { min-width: 34px; height: 34px; padding: 0 0.5rem; }
.st-btn:hover, .st-ibtn:hover { border-color: var(--violet-hot); color: var(--violet-hot); }
.st-btn:disabled, .st-ibtn:disabled { opacity: 0.4; cursor: not-allowed; }
.st-primary { background: var(--violet-hot); border-color: var(--violet-hot); color: #fff; font-weight: 600; }
.st-primary:hover { filter: brightness(1.1); color: #fff; }
.st-wide { width: 100%; }
.st-danger { color: var(--danger) !important; }

.st-pop-wrap { position: relative; }
.st-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px; background: var(--bg-subtle); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.4rem; box-shadow: 0 16px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; }
.st-pop button { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink); padding: 0.5rem 0.6rem; border-radius: 5px; font: inherit; font-size: 0.82rem; cursor: pointer; }
.st-pop button:hover { background: color-mix(in srgb, var(--violet-hot) 18%, transparent); }
.st-pop hr { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0; }
.st-pop label { display: flex; gap: 0.5rem; align-items: center; font-size: 0.78rem; color: var(--ink-dim); padding: 0.3rem 0.6rem; cursor: pointer; }

/* ── Main grid ───────────────────────────────────────────────────────── */
.st-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 74px 300px minmax(0, 1fr) 290px; }

.st-rail { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem 0.35rem; border-right: 1px solid var(--line); background: var(--bg-subtle); overflow-y: auto; }
.st-rail button { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.55rem 0.2rem; border: 0; border-radius: 7px; background: transparent; color: var(--ink-dim); font: inherit; font-size: 0.64rem; letter-spacing: 0.03em; cursor: pointer; }
.st-rail button span { font-size: 1.15rem; line-height: 1; }
.st-rail button:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.st-rail button.is-on { color: var(--violet-hot); background: color-mix(in srgb, var(--violet-hot) 14%, transparent); }

.st-panel { border-right: 1px solid var(--line); overflow-y: auto; padding: 0.9rem 0.85rem 2rem; background: var(--bg); }
.st-side { border-left: 1px solid var(--line); background: var(--bg-subtle); display: flex; flex-direction: column; min-height: 0; }
.st-props { flex: 1 1 auto; overflow-y: auto; padding: 0.9rem 0.85rem; }
.st-props section + section { border-top: 1px solid var(--line); margin-top: 0.9rem; padding-top: 0.9rem; }
.st-layers { flex: 0 0 auto; max-height: 34%; display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); padding: 0.7rem 0.85rem; }

.st-stack { display: flex; flex-direction: column; gap: 0.45rem; }
.st-row { display: flex; gap: 0.55rem; align-items: flex-end; }
.st-row > * { flex: 1 1 0; min-width: 0; }
.st-row > .st-tog { flex: 0 0 auto; padding-bottom: 0.4rem; }
.st-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.st-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.55rem; }
.st-field label { font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.03em; display: flex; justify-content: space-between; gap: 0.3rem; }
.st-field output { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.st-field label.st-tog { justify-content: flex-start; color: var(--ink-dim); font-size: 0.75rem; }
.st-body input[type=color] { width: 100%; height: 32px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); padding: 2px; cursor: pointer; }
.st-body input[type=range] { width: 100%; accent-color: var(--violet-hot); }
.st-hint { font-size: 0.72rem; color: var(--ink-faint); line-height: 1.5; margin: 0.35rem 0 0.6rem; }
.st-count { color: var(--ink-faint); font-weight: 400; letter-spacing: 0; text-transform: none; }
.st-tog { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
.st-tog input { accent-color: var(--violet-hot); }

.st-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0.6rem; }
.st-tools button { flex: 1 0 auto; min-width: 34px; min-height: 32px; padding: 0 0.5rem; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 0.76rem; cursor: pointer; }
.st-tools button:hover { border-color: var(--violet-hot); color: var(--violet-hot); }
.st-tools button.is-on { background: color-mix(in srgb, var(--violet-hot) 22%, transparent); border-color: var(--violet-hot); color: var(--ink); }
.st-dashes button svg { width: 34px; height: 8px; stroke: currentColor; stroke-width: 2; }

.st-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; }
.st-chips button { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim); border-radius: 999px; padding: 0.25rem 0.65rem; font: inherit; font-size: 0.72rem; cursor: pointer; }
.st-chips button.is-on { border-color: var(--violet-hot); color: var(--ink); background: color-mix(in srgb, var(--violet-hot) 20%, transparent); }

/* Add-text buttons */
.st-add { justify-content: flex-start; text-align: left; padding: 0.7rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-subtle); color: var(--ink); cursor: pointer; font: inherit; font-size: 0.85rem; }
.st-add:hover { border-color: var(--violet-hot); }
.st-add-h { font-size: 1.3rem; font-weight: 700; }
.st-add-s { font-size: 1.02rem; font-weight: 600; }
.st-add-b { font-size: 0.85rem; }

/* Font list */
.st-font-list { display: flex; flex-direction: column; gap: 2px; }
.st-font-item { display: block; width: 100%; font-weight: 400; text-align: left; border: 1px solid transparent; background: transparent; color: var(--ink); padding: 0.45rem 0.55rem; border-radius: 6px; font-size: 1.05rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 38px; }
.st-font-item small { display: block; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.st-font-item:hover { background: rgba(255,255,255,0.05); }
.st-font-item.is-on { border-color: var(--violet-hot); background: color-mix(in srgb, var(--violet-hot) 14%, transparent); }
.st-font-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.65rem; margin-bottom: 0.55rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 0.95rem; cursor: pointer; }
.st-font-btn:hover { border-color: var(--violet-hot); }

/* Templates / shapes / icons / uploads */
.st-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.st-tpl { border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.st-tpl:hover { border-color: var(--violet-hot); }
.st-tpl img { width: 100%; height: auto; display: block; }
.st-tpl span { display: block; font-size: 0.7rem; color: var(--ink-dim); background: var(--bg-subtle); padding: 0.3rem 0.4rem; text-align: left; }
.st-shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.st-shape-grid.st-lines { grid-template-columns: repeat(2, 1fr); }
.st-shape-grid button, .st-icon-grid button { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-subtle); color: var(--ink); cursor: pointer; padding: 8px; }
.st-shape-grid.st-lines button { aspect-ratio: 3 / 1; }
.st-shape-grid button:hover, .st-icon-grid button:hover { border-color: var(--violet-hot); color: var(--violet-hot); }
.st-shape-grid svg, .st-icon-grid svg { width: 100%; height: 100%; }
.st-icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin: 0.6rem 0; }
.st-drop { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; text-align: center; padding: 1.3rem 0.8rem; border: 1.5px dashed var(--line-strong); border-radius: 9px; cursor: pointer; font-size: 0.85rem; }
.st-drop span { font-size: 0.72rem; color: var(--ink-faint); }
.st-drop:hover, .st-drop.is-over { border-color: var(--violet-hot); background: color-mix(in srgb, var(--violet-hot) 8%, transparent); }
.st-upl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.st-upl-grid button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: #fff center / contain no-repeat; cursor: pointer; }
.st-upl-grid button:hover { border-color: var(--violet-hot); }

/* ── Center ──────────────────────────────────────────────────────────── */
.st-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.st-bar { flex: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.st-spacer { flex: 1; }
.st-pages { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.st-page { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 0.3rem 0 0.65rem; height: 30px; background: transparent; color: var(--ink-dim); font-size: 0.78rem; cursor: pointer; }
.st-page.is-on { border-color: var(--violet-hot); color: var(--ink); background: color-mix(in srgb, var(--violet-hot) 16%, transparent); }
.st-page em { font-style: normal; opacity: 0.5; padding: 0 0.25rem; border-radius: 4px; }
.st-page em:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.st-zoom { display: inline-flex; gap: 0.25rem; }
.st-zpct { min-width: 58px; font-variant-numeric: tabular-nums; }

.st-stagebox { flex: 1; min-height: 0; position: relative; }
.st-stage { position: absolute; inset: 20px 0 0 20px; overflow: auto; display: grid; place-items: center; padding: 28px;
  background-color: #14101f;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px; }
.st-shell { position: relative; box-shadow: 0 12px 48px rgba(0,0,0,0.55);
  background: #fff repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.st-overlay { position: absolute; inset: 0; pointer-events: none; }
.st-overlay.is-grid { background-image: linear-gradient(to right, rgba(110,80,220,0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(110,80,220,0.16) 1px, transparent 1px); }
.st-safe { position: absolute; border: 1px dashed rgba(139,92,246,0.75); }
.st-cx, .st-cy { position: absolute; background: rgba(236,72,153,0.9); display: none; }
.st-cx { top: 0; bottom: 0; width: 1px; left: 50%; }
.st-cy { left: 0; right: 0; height: 1px; top: 50%; }
.st-overlay.no-guides .st-safe { display: none; }
.st-stage.is-drawing { cursor: crosshair; }

/* ── Layers ──────────────────────────────────────────────────────────── */
.st-layer-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.st-layer { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.35rem; align-items: center; padding: 0.3rem 0.35rem; border-radius: 5px; font-size: 0.76rem; color: var(--ink-dim); cursor: pointer; border: 1px solid transparent; }
.st-layer:hover { background: rgba(255,255,255,0.04); }
.st-layer.is-on { border-color: var(--violet-hot); color: var(--ink); background: color-mix(in srgb, var(--violet-hot) 12%, transparent); }
.st-layer .st-lname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-layer .st-lbtns { display: flex; gap: 2px; }
.st-layer button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 0.75rem; opacity: 0.7; }
.st-layer button:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.st-layer .st-lkind { font-size: 0.7rem; text-align: center; opacity: 0.7; }
.st-layer.is-hidden .st-lname { opacity: 0.4; text-decoration: line-through; }

/* ── Dialogs ─────────────────────────────────────────────────────────── */
.st-dlg { margin: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-subtle); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 80px rgba(0,0,0,0.6); }
.st-dlg-wide { width: min(980px, calc(100vw - 32px)); }
.st-dlg::backdrop { background: rgba(6, 3, 14, 0.72); backdrop-filter: blur(3px); }
.st-dlg-body { padding: 1.2rem 1.3rem; }
.st-dlg-body h2 { font-size: 0.78rem; margin-bottom: 0.9rem; }
.st-dlg-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.st-err { color: var(--danger); font-size: 0.82rem; margin: 0.4rem 0; }
.st-progress { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-dim); }
.st-progress i { display: block; height: 3px; margin-top: 0.4rem; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--violet-hot), transparent); background-size: 200% 100%; animation: st-slide 1.1s linear infinite; }
@keyframes st-slide { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.st-trace { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; }
.st-trace-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.st-trace-preview > div { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.st-cap { font-size: 0.7rem; color: var(--ink-faint); }
.st-cap em { color: var(--violet-hot); font-style: normal; }
#tr-src, .st-trace-out { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 6px; border: 1px solid var(--line); object-fit: contain; }
.st-trace-out { display: grid; place-items: center; overflow: hidden; }
.st-trace-out img { max-width: 100%; max-height: 100%; }
.st-trace-opts [data-for][hidden] { display: none; }

.st-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100; background: var(--bg-subtle); border: 1px solid var(--line-strong); color: var(--ink); padding: 0.55rem 0.95rem; border-radius: 8px; font-size: 0.82rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

@media (max-width: 1280px) {
  .st-main { grid-template-columns: 66px 260px minmax(0, 1fr) 260px; }
}
@media (max-width: 960px) {
  .st-body { height: auto; overflow: auto; }
  .st-main { grid-template-columns: 1fr; }
  .st-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .st-rail button { flex: 0 0 auto; padding: 0.45rem 0.6rem; }
  .st-panel { border-right: 0; max-height: 42vh; border-bottom: 1px solid var(--line); }
  .st-stagebox { min-height: 60vh; }
  .st-stage { padding: 14px; }
  .st-side { border-left: 0; }
  .st-layers { max-height: none; }
  .st-trace { grid-template-columns: 1fr; }
}

/* ── v2: rulers, guides, check, laser, menus ─────────────────────────────── */
.st-ruler { position: absolute; display: block; background: var(--bg-subtle); cursor: copy; z-index: 3; }
.st-ruler-x { top: 0; left: 20px; width: calc(100% - 20px); height: 20px; border-bottom: 1px solid var(--line); cursor: row-resize; }
.st-ruler-y { top: 20px; left: 0; height: calc(100% - 20px); width: 20px; border-right: 1px solid var(--line); cursor: col-resize; }
.st-ruler-corner { position: absolute; top: 0; left: 0; width: 20px; height: 20px; display: grid; place-items: center; font-size: 9px; color: var(--ink-faint); background: var(--bg-subtle); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: 4; }
.st-stagebox.no-rulers .st-ruler, .st-stagebox.no-rulers .st-ruler-corner { display: none; }
.st-stagebox.no-rulers .st-stage { inset: 0; }
.st-guides { position: absolute; inset: 0; pointer-events: none; }
.st-guide { position: absolute; pointer-events: auto; z-index: 2; }
.st-guide.v { top: -2000px; bottom: -2000px; width: 7px; margin-left: -3px; cursor: col-resize; background: linear-gradient(to right, transparent 3px, #06b6d4 3px, #06b6d4 4px, transparent 4px); }
.st-guide.h { left: -2000px; right: -2000px; height: 7px; margin-top: -3px; cursor: row-resize; background: linear-gradient(to bottom, transparent 3px, #06b6d4 3px, #06b6d4 4px, transparent 4px); }
.st-shell { overflow: visible; }
.st-stage.is-pan, .st-stage.is-pan .upper-canvas { cursor: grab !important; }
.st-stage.is-panning, .st-stage.is-panning .upper-canvas { cursor: grabbing !important; }

.st-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.st-empty > p, .st-empty-acts { pointer-events: auto; }
.st-empty { align-content: center; gap: 0.8rem; text-align: center; }
.st-empty > p { margin: 0; color: #4b5563; font-size: 0.95rem; }
.st-empty-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.st-empty .st-btn:not(.st-primary) { background: #fff; color: #1f2937; border-color: #d1d5db; }

.st-tip { position: absolute; left: 34px; bottom: 16px; z-index: 6; max-width: 360px; background: var(--bg-subtle); border: 1px solid var(--violet-hot); border-radius: 10px; padding: 0.8rem 0.9rem; box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.st-tip p { margin: 0 0 0.6rem; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.st-tip div { display: flex; gap: 0.4rem; justify-content: flex-end; }

.st-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #111; font-size: 0.68rem; font-weight: 700; }
.st-badge.is-err { background: var(--danger); color: #fff; }
.st-pop-wide { min-width: 340px; max-width: 420px; max-height: 60vh; overflow-y: auto; }
.st-pop-h { margin: 0.2rem 0.5rem 0.4rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.st-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.st-check-list li button { display: block; width: 100%; text-align: left; white-space: normal; line-height: 1.4; padding: 0.5rem 0.6rem 0.5rem 1.6rem; position: relative; }
.st-check-list li button::before { content: ''; position: absolute; left: 0.6rem; top: 0.85rem; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.st-check-error button::before { background: var(--danger) !important; }
.st-check-ok { padding: 0.5rem 0.6rem; font-size: 0.82rem; color: var(--ink-dim); }

.st-laser button[data-laser="cut"].is-on { background: rgba(255,0,0,0.18); border-color: #ff4d4d; }
.st-laser button[data-laser="score"].is-on { background: rgba(0,90,255,0.2); border-color: #4d7dff; }
.st-laser button[data-laser="guide"].is-on { background: rgba(0,200,0,0.16); border-color: #3ccf3c; }
.st-align-to { align-items: center; margin: 0.2rem 0 0; }
.st-align-to .st-chips { margin: 0; }
.st-mini { flex: 0 0 auto !important; font-size: 0.7rem; color: var(--ink-dim); }

.st-menu { position: fixed; z-index: 120; min-width: 230px; background: var(--bg-subtle); border: 1px solid var(--line-strong); border-radius: 9px; padding: 0.3rem; box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
.st-menu button { display: flex; width: 100%; justify-content: space-between; gap: 1.2rem; text-align: left; padding: 0.42rem 0.6rem; border: 0; background: transparent; color: var(--ink); border-radius: 5px; font-size: 0.8rem; cursor: pointer; }
.st-menu button:hover { background: color-mix(in srgb, var(--violet-hot) 20%, transparent); }
.st-menu kbd { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }
.st-menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.25rem 0; }

.st-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.st-keys h3 { margin-top: 0; }
.st-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; margin: 0; font-size: 0.8rem; }
.st-keys dt { font-family: var(--font-mono); font-size: 0.72rem; color: var(--violet-hot); white-space: nowrap; }
.st-keys dd { margin: 0; color: var(--ink-dim); }

.st-mp-stage { display: grid; place-items: center; background: #0e0b16; border-radius: 8px; padding: 1rem; margin: 0.6rem 0; overflow: auto; max-height: 64vh; }
.st-mp-stage canvas { max-width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border-radius: 4px; }
.st-qcheck { margin: 0.6rem 0; padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--warn) 9%, transparent); font-size: 0.8rem; }
.st-qcheck p { margin: 0 0 0.3rem; color: var(--warn); }
.st-qcheck ul { margin: 0; padding-left: 1.1rem; color: var(--ink-dim); line-height: 1.5; }

.st-layer[draggable="true"] { cursor: grab; }
.st-layer.is-dragging { opacity: 0.45; }
.st-layer.is-drop { border-color: #06b6d4; }
.st-body .st-lrename { padding: 0.15rem 0.35rem; font-size: 0.76rem; }
.st-body .st-grid4 .st-input { padding: 0.42rem 0.4rem; font-size: 0.8rem; -moz-appearance: textfield; }
.st-grid4 .st-input::-webkit-outer-spin-button, .st-grid4 .st-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }