/*
 * studio-designer.css
 * Ported from prototype v9 (docs/superpowers/specs/2026-06-04-studio-prototype-v9.html)
 * Transformations applied:
 *   1. Token namespace: --bg → --sss-studio-bg, etc. (all custom properties prefixed --sss-studio-)
 *   2. Palette aligned to Editorial Calm: bg #f6f1ea, surface #fffaf4, ink #1e1813,
 *      accent #704d31 (dark bronze, 7.24:1 on surface), accent-soft #b39169 (for future non-text use)
 *      muted #6e6557 (5.10:1 on bg, 5.52:1 on surface — both pass 4.5:1)
 *   3. Scoped to .sss-studio; dialogs scoped to dialog.sss-studio-dialog;
 *      toast renamed .sss-studio-toast; .app → .sss-studio-app
 */

/* ---- token block (also duplicated onto dialog and toast for var() resolution) ---- */
.sss-studio {
  --sss-studio-bg: #f6f1ea;
  --sss-studio-surface: #fffaf4;
  --sss-studio-border: #e4ddd1;
  --sss-studio-ink: #1e1813;
  --sss-studio-muted: #6e6557;          /* 5.10:1 on bg, 5.52:1 on surface — verified */
  --sss-studio-faint: #a39a8a;          /* decorative only */
  --sss-studio-accent: #704d31;         /* dark bronze, 7.24:1 on surface, 6.69:1 on bg */
  --sss-studio-accent-soft: #b39169;    /* light accent for non-text/decorative use */
  --sss-studio-accent-weak: #f1e8dc;
  --sss-studio-scrollbar-track: rgba(241, 232, 220, .72);
  --sss-studio-scrollbar-thumb: #8a6544;
  --sss-studio-scrollbar-thumb-hover: #704d31;
  --sss-studio-scrollbar-thumb-active: #5d3b24;
  --sss-studio-ok: #3f7a52;
  --sss-studio-ok-weak: #e9f2ec;
  --sss-studio-warn: #8a5f12;
  --sss-studio-warn-weak: #f8efdd;
  --sss-studio-danger: #a33d2f;
  --sss-studio-danger-weak: #f7e8e4;
  --sss-studio-radius: 10px;
  --sss-studio-fs-label: 12px;
  --sss-studio-fs-hint: 13px;
  --sss-studio-fs-body: 14px;
  --sss-studio-fs-lg: 16px;
  --sss-studio-fs-title: 18px;
  --sss-studio-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sss-studio-font-display: Georgia, "Times New Roman", serif;
  --sss-studio-shadow: 0 1px 2px rgba(43,41,37,.06), 0 8px 24px rgba(43,41,37,.07);
  --sss-studio-sheet-min: 280px;
  --sss-studio-sheet-mid: 55vh;
  --sss-studio-sheet-max: 85vh;
  --sss-studio-mobile-cta-height: 76px;
  --sss-studio-bottom-bar-height: var(--sss-studio-mobile-cta-height);
}

/* ---- dialog token block (dialogs are appended to body, outside .sss-studio) ---- */
dialog.sss-studio-dialog {
  --sss-studio-bg: #f6f1ea;
  --sss-studio-surface: #fffaf4;
  --sss-studio-border: #e4ddd1;
  --sss-studio-ink: #1e1813;
  --sss-studio-muted: #6e6557;
  --sss-studio-faint: #a39a8a;
  --sss-studio-accent: #704d31;
  --sss-studio-accent-soft: #b39169;
  --sss-studio-accent-weak: #f1e8dc;
  --sss-studio-ok: #3f7a52;
  --sss-studio-ok-weak: #e9f2ec;
  --sss-studio-warn: #8a5f12;
  --sss-studio-warn-weak: #f8efdd;
  --sss-studio-danger: #a33d2f;
  --sss-studio-danger-weak: #f7e8e4;
  --sss-studio-radius: 10px;
  --sss-studio-fs-label: 12px;
  --sss-studio-fs-hint: 13px;
  --sss-studio-fs-body: 14px;
  --sss-studio-fs-lg: 16px;
  --sss-studio-fs-title: 18px;
  --sss-studio-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sss-studio-font-display: Georgia, "Times New Roman", serif;
  --sss-studio-shadow: 0 1px 2px rgba(43,41,37,.06), 0 8px 24px rgba(43,41,37,.07);
}

/* ---- toast token resolution (appended to body, outside .sss-studio) ---- */
.sss-studio-toast {
  --sss-studio-ink: #1e1813;
  --sss-studio-fs-hint: 13px;
}

.sss-studio *, .sss-studio *::before, .sss-studio *::after { box-sizing: border-box; }

/* base styles moved from html/body onto .sss-studio */
.sss-studio { font-family: var(--sss-studio-font-ui); color: var(--sss-studio-ink); background: var(--sss-studio-bg); font-size: var(--sss-studio-fs-body); }
.sss-studio button { font: inherit; cursor: pointer; color: inherit; }
/* icon-glyph buttons: force self-sizing flex container so host-theme line-height/padding
   cannot push the glyph out of the fixed-size box. Each button still sets its own
   width/height/font-size; this rule only provides the centering and line-height reset. */
.sss-studio .cvfab, .sss-studio .pback, .sss-studio .osec-add,
.sss-studio .dclose, .sss-studio .stepper button, .sss-studio .nudge button {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
dialog.sss-studio-dialog .dclose {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.sss-studio input, .sss-studio select { font: inherit; color: var(--sss-studio-ink); }
.sss-studio .date-inputs { display: grid; grid-template-columns: 72px 72px minmax(88px, 1fr); gap: 6px; align-items: center; }
.sss-studio .date-inputs select, .sss-studio .date-inputs input { width: 100%; min-width: 0; }
.sss-studio ::selection { background: var(--sss-studio-accent-weak); }
.sss-studio :focus-visible, dialog.sss-studio-dialog :focus-visible { outline: 2px solid var(--sss-studio-accent); outline-offset: 2px; border-radius: 4px; }
.sss-studio .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* .app → .sss-studio-app; in-page widget uses min-height; fullpage modifier for 100dvh */
.sss-studio-app { display: flex; flex-direction: column; min-height: 70vh; }
.sss-studio-app.is-fullpage { height: 100dvh; min-height: 0; }

/* ---- host integration (Task 10b): full-page mount on the stone-detail surface ----
   boot() relocates #sss-studio-root to document.body and adds .is-fullpage-host, so
   the designer escapes the narrow 2-column copy cell and the cart <form>. The host
   becomes a fixed full-viewport surface that owns the screen (matching the toast +
   dialogs already placed at body level); the app shell inside fills 100dvh. This lets
   the desktop 3-pane grid (276px 1fr 352px) and the mobile app shell (25dvh canvas +
   tabs + bottom bar) lay out against the real viewport instead of a ~628px column. */
#sss-studio-root.is-fullpage-host {
  position: fixed;
  inset: 0;
  z-index: 99990;            /* above page chrome */
  width: 100vw;
  height: 100dvh;
  background: var(--sss-studio-bg);
  overflow: hidden;          /* the .region panes scroll internally; the host never scrolls the page */
  overscroll-behavior: contain;
}

/* Lock background scroll while the full-page studio owns the screen (boot() adds the
   class). Mirrors the legacy modal's body.sss-modal-lock — the fixed host alone still
   permits scroll-chaining of the page behind it on touch devices. */
body.sss-studio-lock { overflow: hidden; }

/* Pre-boot loading hint: when the server renders the empty host with is-fullpage-host
   but JS has not yet booted, show a subtle centered "…" so the calm studio surface
   paints immediately with a visible (but unobtrusive) placeholder. Pure CSS — no JS
   required. boot() fills the root with .sss-studio-app which is not :empty, so the
   pseudo-element disappears automatically the moment the app shell mounts. */
.sss-studio:empty::after {
  content: '…';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sss-studio-muted);
  font-family: var(--sss-studio-font-display, inherit);
  font-size: 2rem;
  letter-spacing: 0.1em;
}

/* ---- admin-bar offset (Bug 1): WP admin bar sits at z-index 99999 and is 32px tall
   (desktop) / 46px (≤782px mobile). The studio host uses position:fixed so it ignores
   html { margin-top } that WP adds via _admin_bar_bump_cb; an explicit top override is
   required. With inset:0, bottom stays 0, so only top needs adjusting. */
body.admin-bar #sss-studio-root.is-fullpage-host { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #sss-studio-root.is-fullpage-host { top: 46px; }
}

/* ---- topbar ---- */
.sss-studio .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
          background: var(--sss-studio-surface); border-bottom: 1px solid var(--sss-studio-border); flex-wrap: nowrap; min-height: 56px; }
.sss-studio .brand { font-family: var(--sss-studio-font-display); font-size: var(--sss-studio-fs-title); font-weight: 700; white-space: nowrap; letter-spacing: .01em; }
.sss-studio .brand em { color: var(--sss-studio-accent); font-style: normal; }
.sss-studio .design-name { font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); border-bottom: 1px dashed var(--sss-studio-border);
               padding: 2px 4px; min-width: 96px; max-width: 220px; }
.sss-studio .design-name:focus { border-color: var(--sss-studio-accent); color: var(--sss-studio-ink); }
.sss-studio .grow { flex: 1; }
.sss-studio .iconbtn { background: var(--sss-studio-surface); border: 1px solid var(--sss-studio-border); border-radius: 8px;
           padding: 9px 13px; font-size: var(--sss-studio-fs-hint); min-height: 40px; white-space: nowrap; }
.sss-studio .iconbtn:hover { border-color: var(--sss-studio-accent); }
.sss-studio .iconbtn[disabled] { opacity: .4; cursor: default; }
.sss-studio .topbar-tools { display: flex; align-items: center; gap: 7px; }
.sss-studio .topbar-purchase { display: flex; align-items: center; gap: 10px; margin-left: 2px; }
.sss-studio .topbar-tool { position: relative; width: 42px; min-width: 42px; min-height: 40px; padding: 0;
             display: inline-flex; align-items: center; justify-content: center; color: var(--sss-studio-muted); border-color: var(--sss-studio-border); }
.sss-studio .topbar-tool .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sss-studio .topbar-tool:hover,
.sss-studio .topbar-tool:focus-visible { color: var(--sss-studio-ink); border-color: var(--sss-studio-accent); background: var(--sss-studio-surface); }
.sss-studio .topbar-status { min-width: auto; text-align: left; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
.sss-studio a.studio-back { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.sss-studio .cta { background: var(--sss-studio-accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px;
       font-weight: 600; font-size: var(--sss-studio-fs-body); min-height: 44px; white-space: nowrap; }
.sss-studio .cta:hover { filter: brightness(1.07); }
.sss-studio .topbar-purchase .total-chip { font-weight: 700; font-size: var(--sss-studio-fs-lg); text-align: right; line-height: 1.05; }
.sss-studio .total-chip small { font-weight: 400; color: var(--sss-studio-muted); display: block; font-size: var(--sss-studio-fs-label); }
.sss-studio .savestatus { font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); min-width: 64px; text-align: right; }
.sss-studio .savestatus.saved { color: var(--sss-studio-ok); }
.sss-studio .demo-toggle { font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); display: flex; align-items: center; gap: 5px; }
.sss-studio .demo-toggle select { font-size: var(--sss-studio-fs-label); padding: 6px; border: 1px solid var(--sss-studio-border); border-radius: 7px; background: var(--sss-studio-surface); }
.sss-studio .topbar-purchase .cta { box-shadow: 0 12px 22px rgba(122, 92, 62, .15); padding-inline: 18px; font-size: var(--sss-studio-fs-body); min-height: 44px; }

@media (min-width: 761px) and (max-width: 900px) {
  .sss-studio .topbar { gap: 8px; padding-inline: 12px; }
  .sss-studio .design-name,
  .sss-studio .topbar-status { display: none; }
  .sss-studio .grow { min-width: 0; }
  .sss-studio .topbar-tools { flex: 0 0 auto; gap: 6px; }
  .sss-studio .topbar-purchase { flex: 0 0 auto; gap: 8px; margin-left: 0; }
  .sss-studio .topbar-purchase .total-chip { font-size: var(--sss-studio-fs-body); }
  .sss-studio .topbar-purchase .cta { padding-inline: 14px; }
}

.sss-studio .main { --sss-studio-left-panel-width: 392px; display: grid; grid-template-columns: var(--sss-studio-left-panel-width) minmax(0, 1fr); flex: 1; min-height: 0; }
.sss-studio .region { overflow-y: auto; min-height: 0; }
.sss-studio .workflow-panel {
  width: var(--sss-studio-left-panel-width);
  min-width: 0;
  min-height: 0;
  position: relative;
  background: var(--sss-studio-surface);
  border-right: 1px solid var(--sss-studio-border);
  overflow: hidden;
}
.sss-studio .left-panel-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sss-studio-surface);
  opacity: 0;
  pointer-events: none;
  transform: translateX(14px);
  transition: opacity .18s cubic-bezier(0.25,1,0.5,1), transform .18s cubic-bezier(0.25,1,0.5,1);
}
.sss-studio .left-panel-overview { transform: translateX(-14px); }
.sss-studio [data-left-panel-view="overview"] .left-panel-overview,
.sss-studio [data-left-panel-view="settings"] .left-panel-settings {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.sss-studio .left-panel-head {
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--sss-studio-border);
  flex: none;
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--sss-studio-surface);
}
.sss-studio .left-panel-head-settings {
  display: grid;
  gap: 9px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 var(--sss-studio-border), 0 10px 24px rgba(43,41,37,.06);
}
.sss-studio .left-panel-head-copy { display: grid; gap: 2px; min-width: 0; }
.sss-studio .left-panel-title {
  margin: 0;
  font-family: var(--sss-studio-font-display);
  font-size: var(--sss-studio-fs-title);
  font-weight: 700;
}
.sss-studio .left-panel-subtitle {
  margin: 0;
  color: var(--sss-studio-muted);
  font-size: var(--sss-studio-fs-hint);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sss-studio .workflow-panel .outline {
  border-right: 0;
  border-bottom: 0;
  flex: 1;
}
.sss-studio .workflow-panel .inspector {
  border-left: 0;
  flex: 1;
}
.sss-studio .left-panel-overview > .region,
.sss-studio .left-panel-settings > .region,
.sss-studio .outline-col > .region,
.sss-studio .settings-col > .region,
.sss-studio .settings-sheet-body .sheet-pane > .region {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sss-studio-scrollbar-thumb) var(--sss-studio-scrollbar-track);
}
.sss-studio .left-panel-overview > .region:focus-within,
.sss-studio .left-panel-settings > .region:focus-within,
.sss-studio .outline-col > .region:focus-within,
.sss-studio .settings-col > .region:focus-within,
.sss-studio .settings-sheet-body .sheet-pane > .region:focus-within {
  scrollbar-color: var(--sss-studio-scrollbar-thumb-hover) var(--sss-studio-scrollbar-track);
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar,
.sss-studio .outline-col > .region::-webkit-scrollbar,
.sss-studio .settings-col > .region::-webkit-scrollbar,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar-track,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar-track,
.sss-studio .outline-col > .region::-webkit-scrollbar-track,
.sss-studio .settings-col > .region::-webkit-scrollbar-track,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar-track {
  background: var(--sss-studio-scrollbar-track);
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar-thumb,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar-thumb,
.sss-studio .outline-col > .region::-webkit-scrollbar-thumb,
.sss-studio .settings-col > .region::-webkit-scrollbar-thumb,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--sss-studio-surface);
  border-radius: 999px;
  background: var(--sss-studio-scrollbar-thumb);
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar-thumb:hover,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar-thumb:hover,
.sss-studio .outline-col > .region::-webkit-scrollbar-thumb:hover,
.sss-studio .settings-col > .region::-webkit-scrollbar-thumb:hover,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar-thumb:hover {
  background: var(--sss-studio-scrollbar-thumb-hover);
}
.sss-studio .left-panel-overview > .region:focus-within::-webkit-scrollbar-thumb,
.sss-studio .left-panel-settings > .region:focus-within::-webkit-scrollbar-thumb,
.sss-studio .outline-col > .region:focus-within::-webkit-scrollbar-thumb,
.sss-studio .settings-col > .region:focus-within::-webkit-scrollbar-thumb,
.sss-studio .settings-sheet-body .sheet-pane > .region:focus-within::-webkit-scrollbar-thumb {
  background: var(--sss-studio-scrollbar-thumb-hover);
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar-thumb:active,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar-thumb:active,
.sss-studio .outline-col > .region::-webkit-scrollbar-thumb:active,
.sss-studio .settings-col > .region::-webkit-scrollbar-thumb:active,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar-thumb:active {
  background: var(--sss-studio-scrollbar-thumb-active);
}
.sss-studio .left-panel-overview > .region::-webkit-scrollbar-corner,
.sss-studio .left-panel-settings > .region::-webkit-scrollbar-corner,
.sss-studio .outline-col > .region::-webkit-scrollbar-corner,
.sss-studio .settings-col > .region::-webkit-scrollbar-corner,
.sss-studio .settings-sheet-body .sheet-pane > .region::-webkit-scrollbar-corner {
  background: var(--sss-studio-surface);
}
.sss-studio .left-panel-settings > .region,
.sss-studio .settings-col > .region {
  scrollbar-width: none;
}
.sss-studio .left-panel-settings > .region::-webkit-scrollbar,
.sss-studio .settings-col > .region::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.sss-studio .left-panel-pane.has-panel-scrollbar::after,
.sss-studio .outline-col.has-panel-scrollbar::after,
.sss-studio .settings-col.has-panel-scrollbar::after,
.sss-studio .settings-sheet.has-panel-scrollbar::after {
  content: "";
  position: absolute;
  top: calc(var(--sss-studio-scrollbar-track-top, 0px) + 6px);
  right: 6px;
  width: 6px;
  height: calc(var(--sss-studio-scrollbar-track-height, 100%) - 12px);
  border-radius: 999px;
  background: var(--sss-studio-scrollbar-track);
  pointer-events: none;
  z-index: 13;
}
.sss-studio .left-panel-pane.has-panel-scrollbar::before,
.sss-studio .outline-col.has-panel-scrollbar::before,
.sss-studio .settings-col.has-panel-scrollbar::before,
.sss-studio .settings-sheet.has-panel-scrollbar::before {
  content: "";
  position: absolute;
  top: calc(var(--sss-studio-scrollbar-track-top, 0px) + 6px);
  right: 7px;
  width: 4px;
  height: var(--sss-studio-scrollbar-thumb-height);
  border-radius: 999px;
  background: var(--sss-studio-scrollbar-thumb);
  pointer-events: none;
  transform: translateY(var(--sss-studio-scrollbar-thumb-y));
  z-index: 14;
}

/* ---- outline (left) — layer TREE (v3) ---- */
.sss-studio .outline { background: var(--sss-studio-surface); border-right: 1px solid var(--sss-studio-border); padding: 4px 10px 16px; }
.sss-studio .osec { margin-top: 12px; }
.sss-studio .osec + .osec { border-top: 1px solid var(--sss-studio-border); margin-top: 14px; padding-top: 10px; }
.sss-studio .osec-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 5px; }
.sss-studio .osec-head h2 { font-size: var(--sss-studio-fs-label); text-transform: uppercase; letter-spacing: .08em;
                color: var(--sss-studio-muted); margin: 0; font-weight: 600; flex: 1; }
.sss-studio .osec-add { width: 26px; height: 26px; border: 1px solid var(--sss-studio-border); background: var(--sss-studio-surface);
            border-radius: 7px; color: var(--sss-studio-accent); font-size: 16px; line-height: 1; padding: 0; }
.sss-studio .osec-add:hover { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .lrow { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none;
        border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; min-height: 38px; position: relative; }
.sss-studio .lrow:hover { background: var(--sss-studio-bg); }
.sss-studio .lrow.sel { background: var(--sss-studio-accent-weak); border-color: #e6d8c5; }
.sss-studio .lrow.sel::before { content: ""; position: absolute; left: -5px; top: 7px; bottom: 7px; width: 3px;
                    border-radius: 2px; background: var(--sss-studio-accent); }
.sss-studio .lglyph { width: 26px; height: 26px; border-radius: 7px; background: var(--sss-studio-bg); color: var(--sss-studio-muted);
          display: flex; align-items: center; justify-content: center; flex: none;
          font-size: 12px; font-family: var(--sss-studio-font-display); }
.sss-studio .lrow.sel .lglyph { background: var(--sss-studio-accent); color: #fff; }
.sss-studio .lglyph svg { width: 15px; height: 15px; }
.sss-studio .lmain { flex: 1; min-width: 0; }
.sss-studio .lmain b { display: block; font-size: var(--sss-studio-fs-hint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sss-studio .lmain span { display: block; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sss-studio .stone-change-affordance { color: var(--sss-studio-accent); font-weight: 600; }
.sss-studio .lmain .stone-change-affordance,
.sss-studio .sumrow .stone-change-affordance { color: var(--sss-studio-accent); }
.sss-studio .lend { display: flex; align-items: center; gap: 4px; flex: none; min-width: 58px; justify-content: flex-end; }
.sss-studio .lend .amount { font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); font-variant-numeric: tabular-nums; }
.sss-studio .lend .chip { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 999px;
              background: var(--sss-studio-warn-weak); color: var(--sss-studio-warn); white-space: nowrap; }
.sss-studio .ltrash { width: 30px; height: 30px; border: 0; background: none; border-radius: 7px; color: var(--sss-studio-muted);
          display: none; align-items: center; justify-content: center; padding: 0; flex: none; }
.sss-studio .ltrash svg { width: 15px; height: 15px; }
.sss-studio .ltrash:hover { background: var(--sss-studio-danger-weak); color: var(--sss-studio-danger); }
.sss-studio .lrow:hover .ltrash, .sss-studio .lrow:focus-within .ltrash { display: flex; }
.sss-studio .lrow:hover .lend .amount { display: none; }
.sss-studio .lrow.draggable { cursor: grab; }
/* live make-room reorder (v6): the dragged unit follows the pointer,
   neighbours slide out of the way with a smooth transform */
.sss-studio .lunit { position: relative; transition: transform .18s cubic-bezier(0.25,1,0.5,1); }
.sss-studio .lunit + .lunit { border-top: 1px solid #f0eadf; }
.sss-studio .lunit.rowdrag { transition: none; z-index: 10; }
.sss-studio .lunit.rowdrag .lrow { background: var(--sss-studio-surface); box-shadow: var(--sss-studio-shadow); }
.sss-studio .lgrip { width: 12px; color: #c9c1b2; display: flex; align-items: center; flex: none; cursor: grab; touch-action: none; }
.sss-studio .lgrip svg { width: 10px; height: 16px; }
.sss-studio .lrow:hover .lgrip, .sss-studio .lrow.sel .lgrip { color: var(--sss-studio-muted); }
.sss-studio .laddlink { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
            padding: 7px; border-radius: 8px; color: var(--sss-studio-accent); font-size: var(--sss-studio-fs-label); min-height: 33px; }
.sss-studio .laddlink:hover { background: var(--sss-studio-accent-weak); }

/* ---- canvas ---- */
.sss-studio .canvas-region { position: relative; display: flex; flex-direction: column; overflow: hidden;
     /* White / off-white backdrop harmonised with the Editorial Calm --sss-studio-bg
        (#f6f1ea). The two radial dot layers are KEPT for texture but retuned to
        dark greys so they read as quiet dots on white instead of light-on-green. */
     background:
       radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.4px),
       radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px),
       linear-gradient(170deg, #ffffff, #f4f1ec 70%);
     background-size: 11px 11px, 17px 17px, 100% 100%; }
.sss-studio .canvas-scroll { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 34px 28px 30px; }
.sss-studio .canvas-scroll::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 60%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02), 0 20px 46px rgba(42,37,31,.08);
  z-index: 0;
}
.sss-studio .canvas-scroll > * { position: relative; z-index: 1; }
.sss-studio .stone-wrap { transition: none; }
.sss-studio .stone { position: relative; width: 620px; padding: 50px 44px 40px; min-height: 420px;
         display: flex; flex-direction: column; align-items: center; gap: 16px; border-radius: 18px;
         /* Softer neutral shadow on the white backdrop (was a heavy green-tinted drop). */
         box-shadow: 0 10px 28px rgba(40,36,30,.16), inset 0 1px 2px rgba(255,255,255,.5); }
.sss-studio .stone.dark { box-shadow: 0 18px 40px rgba(30,26,20,.28), inset 0 1px 2px rgba(255,255,255,.18); }
.sss-studio .stone.sel { outline: 2px solid var(--sss-studio-accent); outline-offset: 8px; }
.sss-studio .stone.sel::after { content: ""; position: absolute; inset: -12px; pointer-events: none;
         border-radius: 12px; box-shadow: 0 0 0 5px rgba(122,92,62,.12); }
/* Canvas photo mode: the real stone photo, with the design laid over its safe area. */
.sss-studio .stone-photo-wrap { position: relative; width: 620px; max-width: 100%;
         overflow: hidden; }
.sss-studio .stone-scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sss-studio .stone-photo-bg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.sss-studio .stone.is-photo { position: absolute; width: auto; padding: 8px; min-height: 0;
         gap: 14px; background: none; box-shadow: none; border-radius: 0; z-index: 2; }
/* A flow block must NEVER animate its transform — free or not. The studio
   measures block geometry SYNCHRONOUSLY right after patching the DOM, so a
   transition still in flight makes every one of those reads report the PREVIOUS
   offset. Three measurement sites depend on this rule:
     - clampFlowFreePlacement (free blocks) and clampFlowDeltaX (in-flow ones),
       both reached from clampDesignPositions, rebuild a block's un-transformed
       box by subtracting its current fx/dx from a getBoundingClientRect(). Off
       by the animation delta, the clamp writes a corrupted coordinate straight
       back into the design — into autosave and the order export.
     - measureFlowText() measures the non-free blocks' inner text nodes (the
       wrapper's transform propagates into those rects) and feeds designSVG /
       designPNG export geometry. That is the money path.
   Reproduced on the root patch: a Look with layout_preset 'classic_stack' sets
   f.free = false and then calls render(); on a SURVIVING node that
   translate(-50%,-50%) -> translateX(dx) re-anchor animates, and the clamp moved
   a persisted dx 0 -> 150. renderCanvas() after a keyboard nudge has the same
   shape. This rule only ever animated the make-room reorder in flowMove(), which
   is currently unreachable (flowMove returns early for both free and non-free
   blocks), so no live motion is lost. Motion on these blocks gets reintroduced
   deliberately, scoped to an active drag — never as a blanket transition here. */
.sss-studio .flow-block { position: relative; cursor: grab; border-radius: 6px; touch-action: none; max-width: 100%;
              transition: none; }
/* The transition:none here is deliberately redundant with the base rule above — it is
   not an oversight left behind. A drag is where an animated transform does the most
   damage (every pointermove measures the block), so the suppression is restated at the
   drag site to be visible to whoever next edits this rule. */
.sss-studio .flow-block.dragging { cursor: grabbing; z-index: 6; opacity: .92; transition: none; }
/* Free placement: size the block to its content (max-content) but cap at the safe-area
   content width so long names wrap exactly like auto mode — only when they genuinely do
   not fit. Without an explicit width an absolutely-positioned block (left:fx; right:auto)
   shrink-to-fits to (safeWidth - fx), collapsing centred names into ugly extra lines
   (SSS-EDITOR-004). translate(-50%) is visual-only and cannot restore that lost width. */
.sss-studio .flow-block.free { position: absolute; margin: 0; z-index: 3;
              width: max-content; max-width: calc(100% - 16px); }
.sss-studio .flow-stack {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
.sss-studio .stone.is-photo .flow-stack { gap: 14px; }
.sss-studio .flow-stack .flow-block { pointer-events: auto; }
.sss-studio .visual-placeholder { opacity: .42; }
.sss-studio .el { border-radius: 4px; position: relative; }
.sss-studio .el:hover, .sss-studio .flow-block:hover .el { outline: 2px dashed rgba(122,92,62,.7); outline-offset: 4px; }
.sss-studio .el.sel { outline: 2px solid var(--sss-studio-accent); outline-offset: 5px; }
.sss-studio .el.sel::after { content: ""; position: absolute; inset: -9px; pointer-events: none;
                 border-radius: 6px; box-shadow: 0 0 0 5px rgba(122,92,62,.14); }
/* SP1 Part 5: a selected free block rises above overlapping peers (base z-index 3,
   dragging 6) so its selection ring stays visible when elements overlap. */
.sss-studio .flow-block.free.selected { z-index: 5; }
.sss-studio .el-name { text-align: center; line-height: 1.12; }
.sss-studio .el-dates { text-align: center; margin-top: 8px; letter-spacing: .04em; }
.sss-studio .el-dates .dsep { display: inline-block; width: 38px; }
.sss-studio .el-epitaph { text-align: center; line-height: 1.3; }
.sss-studio .el-dec { position: absolute; line-height: 0; cursor: grab; border-radius: 4px; touch-action: none; }
.sss-studio .el-dec:hover { outline: 2px dashed rgba(122,92,62,.7); outline-offset: 5px; }
.sss-studio .el-dec.sel { outline: 2px solid var(--sss-studio-accent); outline-offset: 6px; }
.sss-studio .el-dec.dragging { cursor: grabbing; z-index: 6; }
.sss-studio .el-dec svg { width: 100%; height: auto; display: block; pointer-events: none; }
.sss-studio .guide { position: absolute; background: var(--sss-studio-accent); opacity: 0; pointer-events: none; z-index: 5; transition: opacity .1s; }
.sss-studio .guide.v { top: 4%; bottom: 4%; width: 1.5px; left: 50%; }
.sss-studio .guide.h { left: 4%; right: 4%; height: 1.5px; }
.sss-studio .guide.show { opacity: .75; }
.sss-studio .reserved-block { border: 2px dashed rgba(120,110,95,.55); border-radius: 8px; padding: 13px 18px;
   color: rgba(80,72,60,.8); font-size: var(--sss-studio-fs-label); text-align: center;
   min-height: 48px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.sss-studio .stone.dark .reserved-block { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.6); }
.sss-studio .stone-hint { color: rgba(70,64,54,.65); font-size: var(--sss-studio-fs-body); font-style: italic; margin: auto; text-align: center; }
.sss-studio .stone.dark .stone-hint { color: rgba(255,255,255,.5); }
.sss-studio .canvas-tools { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap;
     padding: 9px; background: rgba(255,253,249,.94); border-top: 1px solid var(--sss-studio-border);
     font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); }
.sss-studio .canvas-tools input[type=range] { width: 130px; accent-color: var(--sss-studio-accent); }
.sss-studio .canvas-tools b { color: var(--sss-studio-ink); }

/* ---- inspector / panels ---- */
.sss-studio .inspector { background: var(--sss-studio-surface); border-left: 1px solid var(--sss-studio-border); padding: 12px 14px; }
/* Fires only on a genuine layer switch — see markPanelEntering. Applying this to
   every .panel made it replay on every rebuild, which is what read as a page
   reload. Node identity alone silenced it; this restores it as a real cue. */
.sss-studio .panel.is-entering { animation: fadeUp .18s cubic-bezier(0.25,1,0.5,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sss-studio .phead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 0; }
.sss-studio .phead h3 { font-size: var(--sss-studio-fs-title); margin: 0; font-family: var(--sss-studio-font-display); flex: 1; min-width: 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sss-studio .phead-title-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.sss-studio .phead-glyph { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
         background: var(--sss-studio-accent-weak); color: var(--sss-studio-accent); font-weight: 800; flex: none; }
.sss-studio .phead-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sss-studio .phead-copy small { font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); }
.sss-studio .pback { background: none; border: 1px solid var(--sss-studio-border); border-radius: 8px; width: 36px; height: 36px;
         font-size: 17px; line-height: 1; color: var(--sss-studio-muted); flex: none; }
.sss-studio .pback:hover { border-color: var(--sss-studio-accent); color: var(--sss-studio-accent); }
.sss-studio .pdone { background: var(--sss-studio-accent-weak); color: var(--sss-studio-accent); border: 0; border-radius: 8px;
         padding: 8px 16px; font-weight: 600; font-size: var(--sss-studio-fs-hint); min-height: 36px; }
.sss-studio .left-panel-back {
  width: auto;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.sss-studio .left-panel-head-settings .left-panel-back { justify-self: start; }
.sss-studio .papply { font-size: var(--sss-studio-fs-label); color: var(--sss-studio-ok); margin: 6px 0 14px; }
.sss-studio .papply::before { content: "✓ "; }
.sss-studio .panel-section {
  border: 1px solid var(--sss-studio-border);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
}
.sss-studio .panel-section-summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--sss-studio-ink);
  font-size: var(--sss-studio-fs-hint);
  font-weight: 700;
}
.sss-studio .panel-section-body {
  padding: 0 11px 10px;
}
.sss-studio .panel-section-body .field:last-child,
.sss-studio .panel-section-body .dangerbtn:last-child,
.sss-studio .panel-section-body .ghostbtn:last-child {
  margin-bottom: 0;
}
.sss-studio .settings-unavailable {
  padding: 10px 12px;
  border: 1px solid var(--sss-studio-border);
  border-radius: 8px;
  background: var(--sss-studio-accent-weak);
  color: var(--sss-studio-muted);
  font-size: var(--sss-studio-fs-hint);
  line-height: 1.45;
}
.sss-studio .field { margin-bottom: 12px; }
.sss-studio .field > label { display: block; font-size: var(--sss-studio-fs-label); text-transform: uppercase; letter-spacing: .07em;
  color: var(--sss-studio-muted); margin-bottom: 4px; font-weight: 600; }
.sss-studio .field input[type=text], .sss-studio .field select, .sss-studio .field input[type=number] {
    width: 100%; padding: 10px; border: 1px solid var(--sss-studio-border); border-radius: 8px; background: #fff; min-height: 40px; }
.sss-studio .field input[type=range] { width: 100%; accent-color: var(--sss-studio-accent); }
.sss-studio .name-line-field { position: relative; }
.sss-studio .name-line-field input[type=text] { padding-right: 58px; }
.sss-studio .char-counter { position: absolute; right: 10px; bottom: 11px; color: var(--sss-studio-muted);
         font-size: var(--sss-studio-fs-label); font-variant-numeric: tabular-nums; }
.sss-studio .hintline { font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); margin-top: 5px; display: block; }
.sss-studio .hintline.warn { color: var(--sss-studio-warn); font-weight: 600; }
.sss-studio .hintline.paid { color: var(--sss-studio-danger); font-weight: 600; }
/* letter-pricing meter (v3) */
.sss-studio .meter { margin-top: 9px; }
.sss-studio .meter-track { display: flex; height: 10px; border-radius: 6px; overflow: hidden; border: 1px solid var(--sss-studio-border); }
.sss-studio .meter-inc { background: var(--sss-studio-ok-weak); position: relative; }
.sss-studio .meter-paid { background: var(--sss-studio-warn-weak); position: relative; border-left: 2px solid var(--sss-studio-surface); }
.sss-studio .meter-fill { position: absolute; inset: 0 auto 0 0; }
.sss-studio .meter-inc .meter-fill { background: var(--sss-studio-ok); opacity: .8; }
.sss-studio .meter-paid .meter-fill { background: var(--sss-studio-warn); opacity: .85; }
.sss-studio .meter-legend { display: flex; justify-content: space-between; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); margin-top: 4px; }
.sss-studio .explainer { background: var(--sss-studio-bg); border: 1px solid var(--sss-studio-border); border-radius: 8px; padding: 10px 12px;
             font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); margin-top: 8px; line-height: 1.5; }
.sss-studio .explainer b { color: var(--sss-studio-ink); }
.sss-studio .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sss-studio .swatch { border: 2px solid var(--sss-studio-border); border-radius: 9px; padding: 7px; background: #fff;
          display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); min-width: 68px; }
.sss-studio .swatch .dot { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); }
.sss-studio .swatch.sel { border-color: var(--sss-studio-accent); color: var(--sss-studio-ink); font-weight: 600; }
.sss-studio .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sss-studio .fchip,
.sss-studio .filter-chip { border: 1px solid var(--sss-studio-border); background: #fff; border-radius: 999px; padding: 9px 14px;
         font-size: var(--sss-studio-fs-hint); min-height: 40px; }
.sss-studio .fchip.sel,
.sss-studio .filter-chip.sel { background: var(--sss-studio-accent); color: #fff; border-color: var(--sss-studio-accent); }
.sss-studio .segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sss-studio .segbtn { min-height: 40px; border: 1px solid var(--sss-studio-border); background: #fff; border-radius: 8px;
         color: var(--sss-studio-ink); font-size: var(--sss-studio-fs-hint); font-weight: 600; }
.sss-studio .segbtn.sel { background: var(--sss-studio-accent); border-color: var(--sss-studio-accent); color: #fff; }
.sss-studio .switchrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
             padding: 8px 12px; border: 1px solid var(--sss-studio-border); border-radius: 8px; background: #fff; font-size: var(--sss-studio-fs-hint); }
.sss-studio .switchrow input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--sss-studio-accent); }
.sss-studio .stepper { display: flex; align-items: center; border: 1px solid var(--sss-studio-border); border-radius: 8px;
           overflow: hidden; width: max-content; background: #fff; }
.sss-studio .stepper button { border: 0; background: var(--sss-studio-bg); width: 44px; min-height: 40px; }
.sss-studio .stepper b { padding: 0 14px; font-size: var(--sss-studio-fs-hint); min-width: 70px; text-align: center; }
.sss-studio .nudge { display: grid; grid-template-columns: repeat(4, 44px); gap: 6px; }
.sss-studio .nudge button { min-height: 40px; border: 1px solid var(--sss-studio-border); border-radius: 8px; background: #fff; }
.sss-studio .nudge button:hover { border-color: var(--sss-studio-accent); }
.sss-studio .position-field {
  display: grid;
  gap: 8px;
}
.sss-studio .flow-block.locked { cursor: default; }
.sss-studio .position-field .linkish {
  justify-self: start;
}
.sss-studio .flow-spacing { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid var(--sss-studio-border); border-radius: 10px; background: #fff; }
.sss-studio .flow-spacing .sec-label { margin: 0; }
.sss-studio .rangefield { display: grid; gap: 6px; font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); font-weight: 650; }
.sss-studio .rangefield span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sss-studio .rangefield output { color: var(--sss-studio-ink); font-variant-numeric: tabular-nums; }
.sss-studio .flow-spacing input[type="range"] { width: 100%; accent-color: var(--sss-studio-accent); }
.sss-studio .flow-spacing-actions { display: flex; justify-content: flex-start; margin-top: -2px; }
.sss-studio .flow-spacing-actions .linkish:disabled { opacity: .55; cursor: not-allowed; }
.sss-studio .flow-spacing-disabled { opacity: .52; background: var(--sss-studio-bg); }
.sss-studio .flow-spacing-disabled input[type="range"] { cursor: not-allowed; }
.sss-studio .auto-layout-disabled { opacity: .52; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sss-studio-border); }
.sss-studio .auto-layout-disabled button[disabled] { cursor: not-allowed; color: var(--sss-studio-muted); background: var(--sss-studio-bg); }
.sss-studio .ghostbtn { background: none; border: 1px solid var(--sss-studio-border); border-radius: 8px; padding: 10px 12px;
            font-size: var(--sss-studio-fs-hint); width: 100%; min-height: 44px; }
.sss-studio .ghostbtn:hover { border-color: var(--sss-studio-accent); color: var(--sss-studio-accent); }
.sss-studio .dangerbtn { background: none; border: 1px solid #e8cfc8; color: var(--sss-studio-danger); border-radius: 8px;
             padding: 10px 12px; font-size: var(--sss-studio-fs-hint); width: 100%; min-height: 44px; }
.sss-studio .dangerbtn:hover { background: var(--sss-studio-danger-weak); }
.sss-studio .linkish { background: none; border: 0; color: var(--sss-studio-accent); font-size: var(--sss-studio-fs-hint); padding: 4px 0;
           text-decoration: underline; text-underline-offset: 3px; }
.sss-studio .ink-warning { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
        padding: 8px 11px; border-radius: 8px; background: #fdf3e6; border: 1px solid #e8cfa8;
        font-size: var(--sss-studio-fs-hint); color: #6d4d16; }
.sss-studio .ink-warning .linkish { min-height: 40px; padding: 8px 11px; }
.sss-studio .sugg { display: block; width: 100%; text-align: left; border: 1px solid var(--sss-studio-border); border-radius: 8px;
        padding: 10px 12px; margin-bottom: 7px; background: #fff; font-family: var(--sss-studio-font-display); font-size: var(--sss-studio-fs-body); }
.sss-studio .sugg:hover { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .sugg small { display: block; font-family: var(--sss-studio-font-ui); font-style: normal; color: var(--sss-studio-muted); font-size: 10.5px;
              margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.sss-studio .fontopt { display: block; width: 100%; text-align: center; border: 1px solid var(--sss-studio-border); border-radius: 8px;
           padding: 10px 12px 7px; margin-bottom: 7px; background: #fff; font-size: 20px; line-height: 1.2;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sss-studio .fontopt small { display: block; font-family: var(--sss-studio-font-ui); font-style: normal; font-size: var(--sss-studio-fs-label);
                 color: var(--sss-studio-muted); margin-top: 3px; }
.sss-studio .fontopt:hover { border-color: var(--sss-studio-accent); }
.sss-studio .fontopt.sel { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .decitem.sel { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
/* thin custom scroller — appears when the font list grows past 5 (v7) */
.sss-studio .fontlist.scroll { max-height: 318px; overflow-y: auto; padding-right: 7px;
                   scrollbar-width: thin; scrollbar-color: #d8cdbc transparent; }
.sss-studio .fontlist.scroll::-webkit-scrollbar { width: 5px; }
.sss-studio .fontlist.scroll::-webkit-scrollbar-track { background: transparent; }
.sss-studio .fontlist.scroll::-webkit-scrollbar-thumb { background: #d8cdbc; border-radius: 99px; }
.sss-studio .fontlist.scroll::-webkit-scrollbar-thumb:hover { background: var(--sss-studio-accent); }
.sss-studio .declib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sss-studio .decitem { border: 1px solid var(--sss-studio-border); border-radius: 9px; padding: 12px 8px; background: #fff;
           display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.sss-studio .decitem:hover { border-color: var(--sss-studio-accent); }
.sss-studio .decitem svg { width: 36px; height: 36px; color: var(--sss-studio-ink); }
.sss-studio .decitem b { font-size: var(--sss-studio-fs-label); font-weight: 600; }
.sss-studio .decitem .amount { font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
/* In-panel stone switcher cards (mirror .decitem; current stone is marked + non-clickable). */
.sss-studio .stoneitem img { width: 100%; height: 84px; object-fit: contain; border-radius: 8px; }
.sss-studio .stoneitem .amount { color: var(--sss-studio-accent); font-weight: 600; }
.sss-studio .stoneitem[aria-current="true"] { cursor: default; border-color: var(--sss-studio-accent);
           background: var(--sss-studio-accent-weak); }
.sss-studio .stoneitem[aria-current="true"]:hover { border-color: var(--sss-studio-accent); }
/* Slice 6 Phase 5: customer Look picker. Cards mirror .decitem and live in
   a responsive 1/2-col grid; the selected card gets the accent treatment
   (same convention as the stone switcher). Manual controls and the rest
   of the inspector are unaffected. */
.sss-studio .looks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sss-studio .lookitem { border: 1px solid var(--sss-studio-border); border-radius: 9px; padding: 12px 8px;
            background: #fff; text-align: left; display: flex; flex-direction: column; gap: 4px;
            font-size: var(--sss-studio-fs-hint); min-height: 56px; }
.sss-studio .lookitem:hover { border-color: var(--sss-studio-accent); }
.sss-studio .lookitem b { font-size: var(--sss-studio-fs-label); font-weight: 600; }
.sss-studio .lookitem .lookdesc { color: var(--sss-studio-muted); font-size: 12px; }
.sss-studio .lookitem .amount { color: var(--sss-studio-muted); font-size: 12px; }
.sss-studio .lookitem.sel { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .sec-label { font-size: var(--sss-studio-fs-label); text-transform: uppercase; letter-spacing: .07em;
             color: var(--sss-studio-muted); font-weight: 600; margin: 0 0 10px; }
.sss-studio .divider { border-top: 1px solid var(--sss-studio-border); margin: 16px 0 14px; }
.sss-studio .sumgroup { border-bottom: 1px solid var(--sss-studio-border); padding-bottom: 6px; }
.sss-studio .sumrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none;
          border: 0; padding: 12px 4px 6px; min-height: 48px; }
.sss-studio .sumrow:hover { background: var(--sss-studio-bg); }
.sss-studio .sumitems { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 0 4px 6px 14px;
            font-size: var(--sss-studio-fs-hint); }
.sss-studio .sumitems .il { color: var(--sss-studio-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sss-studio .sumitems .iv { text-align: right; font-variant-numeric: tabular-nums; color: var(--sss-studio-muted); }
.sss-studio .sumitems .iv.free { color: var(--sss-studio-ok); font-weight: 600; }
.sss-studio .sumrow .sl { flex: 1; min-width: 0; }
.sss-studio .sumrow .sl b { display: block; font-size: var(--sss-studio-fs-body); font-weight: 600; }
.sss-studio .sumrow .sl span { font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); }
.sss-studio .sumrow .go { color: var(--sss-studio-faint); }
.sss-studio .sumrow .amount { font-size: var(--sss-studio-fs-hint); color: var(--sss-studio-muted); font-variant-numeric: tabular-nums; }
.sss-studio .sumtotal { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px 6px;
            font-size: var(--sss-studio-fs-lg); font-weight: 700; }
.sss-studio .breakdown { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 8px 4px; font-size: var(--sss-studio-fs-hint); }
.sss-studio .breakdown .bl { color: var(--sss-studio-muted); }
.sss-studio .breakdown .bv { text-align: right; font-variant-numeric: tabular-nums; }
.sss-studio .breakdown .bv.free { color: var(--sss-studio-ok); font-weight: 600; }

.sss-studio .pricebar { background: var(--sss-studio-surface); border-top: 1px solid var(--sss-studio-border); padding: 9px 16px;
            font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
.sss-studio .admin-mobile-fallback { display: none; flex: 1; align-items: center; justify-content: center; padding: 24px;
            background: var(--sss-studio-bg); color: var(--sss-studio-ink); animation: fadeUp .18s ease-out; }
.sss-studio .admin-mobile-fallback > div { max-width: 420px; padding: 18px; border: 1px solid var(--sss-studio-border);
            border-radius: var(--sss-studio-radius); background: var(--sss-studio-surface); box-shadow: var(--sss-studio-shadow); }
.sss-studio .admin-mobile-fallback h2 { margin: 0 0 8px; font-family: var(--sss-studio-font-display); font-size: var(--sss-studio-fs-title); }
.sss-studio .admin-mobile-fallback p { margin: 0; color: var(--sss-studio-muted); line-height: 1.5; }

/* ---- states / dialog / toast ---- */
.sss-studio .placeholder { text-align: center; padding: 70px 24px; color: var(--sss-studio-muted); margin: auto; max-width: 420px; }
.sss-studio .placeholder .big { font-size: 17px; color: var(--sss-studio-ink); font-weight: 600; margin-bottom: 6px; font-family: var(--sss-studio-font-display); }
.sss-studio .placeholder.error .big { color: var(--sss-studio-danger); }
.sss-studio .skel { height: 13px; border-radius: 6px; background: linear-gradient(90deg,#ece8e0,#f6f3ee,#ece8e0);
        background-size: 200% 100%; animation: sh 1.2s infinite; margin: 12px 0; }
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.sss-studio .skel-stone { width: min(620px, 80vw); height: 430px; border-radius: 14px; margin: auto;
        background: linear-gradient(90deg,#d9d4ca,#e7e2d8,#d9d4ca); background-size: 200% 100%; animation: sh 1.4s infinite; }

/* dialog scoped outside .sss-studio — appended to body */
dialog.sss-studio-dialog { border: 0; border-radius: 14px; padding: 22px; width: 420px; max-width: 92vw;
         box-shadow: var(--sss-studio-shadow); background: var(--sss-studio-surface); color: var(--sss-studio-ink); position: relative; }
.sss-studio .dclose { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 9px;
          border: 1px solid var(--sss-studio-border); background: var(--sss-studio-surface); color: var(--sss-studio-muted);
          font-size: 14px; line-height: 1; padding: 0; }
.sss-studio .dclose:hover { border-color: var(--sss-studio-accent); color: var(--sss-studio-accent); }
/* dclose also lives inside dialogs appended to body */
dialog.sss-studio-dialog .dclose { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 9px;
          border: 1px solid var(--sss-studio-border); background: var(--sss-studio-surface); color: var(--sss-studio-muted);
          font-size: 14px; line-height: 1; padding: 0; }
dialog.sss-studio-dialog .dclose:hover { border-color: var(--sss-studio-accent); color: var(--sss-studio-accent); }
dialog.sss-studio-dialog::backdrop { background: rgba(43,41,37,.45); }
dialog.sss-studio-dialog h3 { margin: 0 0 6px; font-family: var(--sss-studio-font-display); }
dialog.sss-studio-dialog p { color: var(--sss-studio-muted); font-size: var(--sss-studio-fs-hint); margin: 4px 0 14px; }
dialog.sss-studio-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
dialog.sss-studio-dialog .cta { background: var(--sss-studio-accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px;
       font-weight: 600; font-size: var(--sss-studio-fs-body); min-height: 44px; white-space: nowrap; }
dialog.sss-studio-dialog .cta:hover { filter: brightness(1.07); }
dialog.sss-studio-dialog .ghostbtn { background: none; border: 1px solid var(--sss-studio-border); border-radius: 8px; padding: 10px 12px;
            font-size: var(--sss-studio-fs-hint); width: auto; min-height: 44px; color: var(--sss-studio-ink); }
dialog.sss-studio-dialog .ghostbtn:hover { border-color: var(--sss-studio-accent); color: var(--sss-studio-accent); }
.sss-studio .sharelink { display: flex; gap: 8px; }
.sss-studio .sharelink input { flex: 1; padding: 10px; border: 1px solid var(--sss-studio-border); border-radius: 8px;
                   background: var(--sss-studio-bg); font-size: var(--sss-studio-fs-hint); }
dialog.sss-studio-dialog .sharelink { display: flex; gap: 8px; }
dialog.sss-studio-dialog .sharelink input { flex: 1; padding: 10px; border: 1px solid var(--sss-studio-border); border-radius: 8px;
                   background: var(--sss-studio-bg); font-size: var(--sss-studio-fs-hint); }

/* toast — appended to body, outside .sss-studio; renamed from .toast to .sss-studio-toast */
.sss-studio-toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); background: var(--sss-studio-ink); color: #fff;
         padding: 10px 16px; border-radius: 999px; font-size: var(--sss-studio-fs-hint); z-index: 60; opacity: 0;
         transition: opacity .2s; pointer-events: none; max-width: 88vw; text-align: center; }
.sss-studio-toast.show { opacity: 1; }

/* ⋯ actions button with cycling icon (v7) — hints at what's inside */
.sss-studio .morebtn { position: relative; width: 42px; padding: 0; }
.sss-studio .morebtn .mi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
               opacity: 0; animation: micycle 6s infinite; }
.sss-studio .morebtn .mi svg { width: 18px; height: 18px; }
.sss-studio .morebtn .mi:nth-child(2) { animation-delay: 2s; }
.sss-studio .morebtn .mi:nth-child(3) { animation-delay: 4s; }
@keyframes micycle {
  0% { opacity: 0; transform: translateY(7px); }
  6% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: none; }
  37% { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 0; }
}
.sss-studio .drawer { padding: 14px; }
.sss-studio .drawhandle { display: none; width: 40px; height: 4px; border-radius: 99px; background: var(--sss-studio-border); margin: 0 auto 12px; }
.sss-studio .drow { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: none;
        border: 0; border-radius: 10px; padding: 13px 12px; min-height: 56px; color: var(--sss-studio-ink); text-decoration: none; }
.sss-studio .drow:hover { background: var(--sss-studio-accent-weak); }
.sss-studio .drow .di { width: 38px; height: 38px; border-radius: 10px; background: var(--sss-studio-bg); color: var(--sss-studio-accent);
            display: flex; align-items: center; justify-content: center; flex: none; }
.sss-studio .drow .di svg { width: 18px; height: 18px; }
.sss-studio .drow b { display: block; font-size: var(--sss-studio-fs-body); }
.sss-studio .drow span { display: block; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
.sss-studio .addopt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: #fff;
          border: 1px solid var(--sss-studio-border); border-radius: 11px; padding: 13px 12px; margin-bottom: 9px; min-height: 62px; }
.sss-studio .addopt:hover { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
.sss-studio .addopt .lglyph { width: 34px; height: 34px; font-size: 14px; }
.sss-studio .addopt .ao b { display: block; font-size: var(--sss-studio-fs-body); }
.sss-studio .addopt .ao span { display: block; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
/* dialog drawer version */
dialog.sss-studio-dialog .drawer { padding: 14px; }
dialog.sss-studio-dialog .drawhandle { display: none; width: 40px; height: 4px; border-radius: 99px; background: var(--sss-studio-border); margin: 0 auto 12px; }
dialog.sss-studio-dialog .drow { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: none;
        border: 0; border-radius: 10px; padding: 13px 12px; min-height: 56px; color: var(--sss-studio-ink); text-decoration: none; }
dialog.sss-studio-dialog .drow:hover { background: var(--sss-studio-accent-weak); }
dialog.sss-studio-dialog .drow .di { width: 38px; height: 38px; border-radius: 10px; background: var(--sss-studio-bg); color: var(--sss-studio-accent);
            display: flex; align-items: center; justify-content: center; flex: none; }
dialog.sss-studio-dialog .drow .di svg { width: 18px; height: 18px; }
dialog.sss-studio-dialog .drow b { display: block; font-size: var(--sss-studio-fs-body); }
dialog.sss-studio-dialog .drow span { display: block; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }
dialog.sss-studio-dialog .addopt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: #fff;
          border: 1px solid var(--sss-studio-border); border-radius: 11px; padding: 13px 12px; margin-bottom: 9px; min-height: 62px; }
dialog.sss-studio-dialog .addopt:hover { border-color: var(--sss-studio-accent); background: var(--sss-studio-accent-weak); }
dialog.sss-studio-dialog .addopt .lglyph { width: 34px; height: 34px; font-size: 14px; background: var(--sss-studio-bg); color: var(--sss-studio-muted); display: flex; align-items: center; justify-content: center; border-radius: 7px; flex: none; }
dialog.sss-studio-dialog .addopt .ao b { display: block; font-size: var(--sss-studio-fs-body); color: var(--sss-studio-ink); }
dialog.sss-studio-dialog .addopt .ao span { display: block; font-size: var(--sss-studio-fs-label); color: var(--sss-studio-muted); }

/* canvas overlay controls + fullscreen (v7) */
.sss-studio .cv-fabs { position: absolute; top: 10px; right: 10px; z-index: 8; display: flex; gap: 8px; }
.sss-studio .cvfab { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--sss-studio-border);
         background: rgba(255,253,249,.94); font-size: 17px; }
.sss-studio .cvfab:hover { border-color: var(--sss-studio-accent); }
.sss-studio .vzoom { display: none; }
.sss-studio .canvas-region.fsmode { position: fixed; inset: 0; z-index: 46; height: 100dvh !important;
                        touch-action: none; }       /* we own pinch + pan in fullscreen (v8) */
.sss-studio .review-shot { margin-bottom: 14px; }
.sss-studio .review-shot img { display: block; width: 100%; height: auto; border-radius: 12px; background: #e7e2d8;
                   box-shadow: var(--sss-studio-shadow); }

/* review-before-checkout page (v7) */
.sss-studio .review { position: fixed; inset: 0; z-index: 48; background: var(--sss-studio-bg); overflow-y: auto;
          }
.sss-studio .review-in { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; animation: reviewIn .2s ease-out; }
@keyframes reviewIn { from { transform: translateY(4px); } to { transform: none; } }
.sss-studio .status-ok { background: var(--sss-studio-ok-weak); color: var(--sss-studio-ok); border-radius: 10px; padding: 11px 13px;
             font-size: var(--sss-studio-fs-hint); font-weight: 600; margin-bottom: 14px; }
.sss-studio .review-text-fit-alert { position: relative; z-index: 1; background: var(--sss-studio-danger-weak); color: var(--sss-studio-danger);
             border: 1px solid currentColor; border-radius: 10px; padding: 12px 13px; margin-bottom: 14px; }
.sss-studio .review-text-fit-alert p { margin: 0 0 10px; font-weight: 600; }
.sss-studio .review-text-fit-alert .ghostbtn { width: auto; color: var(--sss-studio-danger); border-color: currentColor; background: var(--sss-studio-surface); }
.sss-studio .review-actions-card { border: 1px solid var(--sss-studio-border); border-radius: 12px; padding: 4px 6px; margin-top: 14px; background: var(--sss-studio-surface); }
.sss-studio .review-actions-card .sec-label { margin: 10px 8px 2px; }
.sss-studio .review .cta { width: 100%; }
.sss-studio .review-checkout { margin-top: 14px; }
.sss-studio .secure-checkout { display: block; text-align: center; margin-top: 6px; }

/* ---- recovery banner (Task 12) ---- */
.sss-studio .sss-studio-recovery {
  background: var(--sss-studio-ok-weak); color: var(--sss-studio-ok);
  border-radius: var(--sss-studio-radius); padding: 10px 14px;
  font-size: var(--sss-studio-fs-hint); display: flex; align-items: center; gap: 10px;
  margin: 0 0 0 0;
}
.sss-studio .sss-studio-recovery span { flex: 1; font-weight: 600; }
.sss-studio .sss-studio-recovery .linkish { color: var(--sss-studio-ok); font-size: var(--sss-studio-fs-hint); }

/* ---- MOBILE APP SHELL (v3) ---- */
.sss-studio .mtabs, .sss-studio .mbottom { display: none; }
@media (max-width: 760px) {
  .sss-studio .topbar { padding: 8px 12px; gap: 8px; }
  .sss-studio .design-name, .sss-studio .demo-toggle, .sss-studio .total-chip, .sss-studio .topbar .cta, .sss-studio .savestatus { display: none; }
  .sss-studio .topbar .iconbtn { padding: 8px 10px; min-height: 44px; }
  .sss-studio input,
  .sss-studio select,
  .sss-studio textarea,
  dialog.sss-studio-dialog input,
  dialog.sss-studio-dialog select,
  dialog.sss-studio-dialog textarea {
    font-size: 16px;
  }
  .sss-studio .field input[type=text],
  .sss-studio .field input[type=number],
  .sss-studio .field select,
  .sss-studio .sharelink input,
  dialog.sss-studio-dialog .sharelink input {
    font-size: 16px;
  }
  .sss-studio .main { display: block; position: relative; flex: 1; min-height: 0;
          --sss-studio-sheet-height: var(--sss-studio-sheet-mid);
          --sss-studio-bottom-bar-height: var(--sss-studio-mobile-cta-height); }
  .sss-studio .main.is-editing { --sss-studio-bottom-bar-height: 0px; }
  .sss-studio .canvas-region { height: calc(100% - var(--sss-studio-sheet-height) - var(--sss-studio-bottom-bar-height));
          min-height: 132px; max-height: 100%; }
  .sss-studio .canvas-region.fsmode { height: 100dvh; }
  .sss-studio .canvas-scroll { padding: 8px; }
  .sss-studio .canvas-tools { display: none; }
  .sss-studio .vzoom { display: block; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 8; }
  .sss-studio .vzoom input { writing-mode: vertical-lr; direction: rtl; height: 100px; width: 24px; accent-color: var(--sss-studio-accent); }
  .sss-studio .canvas-region.fsmode .vzoom { display: none; }   /* fullscreen has the bottom zoom + pinch (v8) */
  .sss-studio .canvas-region.fsmode .canvas-tools { display: flex; }
  .sss-studio .settings-sheet { position: absolute; left: 0; right: 0; bottom: var(--sss-studio-bottom-bar-height);
          height: var(--sss-studio-sheet-height); min-height: min(var(--sss-studio-sheet-min), calc(100% - 118px));
          max-height: calc(100% - 118px); display: flex; flex-direction: column; overflow: hidden;
          background: var(--sss-studio-surface); border-top: 1px solid var(--sss-studio-border);
          border-radius: 18px 18px 0 0; box-shadow: 0 -12px 32px rgba(43,41,37,.12); z-index: 32; }
  .sss-studio .sheet-handle { min-height: 30px; border: 0; background: var(--sss-studio-surface);
          display: flex; align-items: center; justify-content: center; padding: 8px 0 6px;
          touch-action: none; cursor: ns-resize; color: var(--sss-studio-muted); }
  .sss-studio .sheet-handle span { width: 44px; height: 5px; border-radius: 999px; background: var(--sss-studio-border);
          box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
  .sss-studio .sheet-handle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sss-studio .settings-sheet-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .sss-studio .mtabs { display: flex; gap: 6px; padding: 7px 12px; background: var(--sss-studio-surface);
           border-top: 1px solid var(--sss-studio-border); position: sticky; top: 0; z-index: 20; align-items: center; }
  .sss-studio .mtabs .left-panel-back { width: auto; min-height: 44px; padding: 0 12px; font-size: var(--sss-studio-fs-hint); }
  .sss-studio .mnavcopy { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .sss-studio .mnavtitle { font-family: var(--sss-studio-font-display); font-size: var(--sss-studio-fs-lg); flex: 1; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sss-studio .mnavsubtitle { color: var(--sss-studio-muted); font-size: var(--sss-studio-fs-hint); line-height: 1.15;
               min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sss-studio .inspector .phead { display: none; }               /* the sticky bar replaces it (v7) */
  .sss-studio .outline, .sss-studio .inspector { border: 0; flex: 1; min-height: 0; padding-bottom: 18px; }
  .sss-studio .lrow,
  .sss-studio .laddlink { min-height: 44px; }
  .sss-studio .pricebar { display: none; }
  .sss-studio .mbottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
             background: var(--sss-studio-surface); border-top: 1px solid var(--sss-studio-border);
             padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; }
  .sss-studio .mbottom.is-hidden { display: none; }
  .sss-studio .mbottom .mtotal { flex: 1; font-weight: 700; font-size: var(--sss-studio-fs-lg); }
  .sss-studio .mbottom .mtotal small { display: block; font-weight: 400; color: var(--sss-studio-muted); font-size: 11px; }
  .sss-studio-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  dialog.sss-studio-dialog.drawer { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0;
                  animation: drawup .28s cubic-bezier(0.25,1,0.5,1); }
  .sss-studio .drawhandle { display: block; }
  dialog.sss-studio-dialog .drawhandle { display: block; }
}
@media (max-width: 520px) {
  body.sss-admin-preview #sss-studio-root.is-fullpage-host { overflow: auto; }
  body.sss-admin-preview .sss-studio .main { display: none; }
  body.sss-admin-preview .sss-studio .pricebar,
  body.sss-admin-preview .sss-studio .mbottom { display: none; }
  body.sss-admin-preview .sss-studio .admin-mobile-fallback { display: flex; }
}
@keyframes drawup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sss-studio .skel, .sss-studio .skel-stone { animation: none; }
  .sss-studio .panel, .sss-studio .panel.is-entering, .sss-studio .review, dialog.sss-studio-dialog.drawer { animation: none; }
  .sss-studio .review-in { animation: none; }
  .sss-studio .stone-wrap, .sss-studio .guide, .sss-studio-toast, .sss-studio .lunit, .sss-studio .flow-block { transition: none; }
  .sss-studio .left-panel-pane { transition: none; }
  .sss-studio .settings-sheet .sheet-pane { transition: none; }
  .sss-studio .admin-mobile-fallback { animation: none; }
  .sss-studio .morebtn .mi { animation: none; }
  .sss-studio .morebtn .mi:first-child { opacity: 1; }
}