/*
 * 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,
.sss-studio .settings-sheet-body .sheet-pane > .region {
  scrollbar-width: none;
}
.sss-studio .left-panel-settings > .region::-webkit-scrollbar,
.sss-studio .settings-col > .region::-webkit-scrollbar,
.sss-studio .settings-sheet-body .sheet-pane > .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 > * { 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-scene-stage { position: relative; display: inline-block; min-width: 620px;
         height: var(--sss-photo-height); overflow: hidden; vertical-align: top; }
.sss-studio .stone-scene-stage > .stone-scene-bg { position: relative; display: block; width: auto;
         max-width: none; height: 100%; z-index: 0; }
.sss-studio .stone-photo-wrap { position: absolute; top: 0; left: 50%; width: 620px;
         transform: translateX(-50%); overflow: hidden; }
.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; }
/* Explicit pointer/keyboard edits read flow-block geometry synchronously to
   clamp the requested move. Keep transforms non-animated so those edit-time
   rects describe the current canonical position. Render, resize and export do
   not read these rects or normalize the saved design. */
.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; 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: 1; }
.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; line-height: 1.5; 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); }
.sss-studio .review-placeholder-note { margin: -6px 0 14px; padding: 9px 11px; border: 1px solid var(--sss-studio-border);
             border-radius: 9px; color: var(--sss-studio-muted); background: var(--sss-studio-surface); font-size: var(--sss-studio-fs-hint); }

/* 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 .stone-scene-stage { display: block; width: 620px; min-width: 620px; }
  .sss-studio .stone-scene-stage > .stone-scene-bg { position: absolute; inset: 0; width: 100%;
          height: 100%; object-fit: cover; }
  .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; }
}