html[data-dash-mode="marketsync"] #nav-more-list > button:not(.text-rose-600) {
  min-height: 3.4rem;
  padding: .8rem 1rem !important;
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 1rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
html.dark[data-dash-mode="marketsync"] #nav-more-menu .ms-more-sheet {
  background: rgba(11, 20, 36, .84) !important;
  border-color: rgba(255, 255, 255, .12);
}
html.dark[data-dash-mode="marketsync"] #nav-more-list > button:not(.text-rose-600) {
  background: rgba(30, 41, 59, .62) !important;
  border-color: rgba(255, 255, 255, .09);
}

.ms-hq-launch {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  min-height: 5.25rem;
  padding: .9rem;
  color: var(--ms-text);
  text-align: left;
  background: rgba(255, 255, 255, .52);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ms-hq-launch:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .76);
  border-color: rgba(37, 99, 235, .24);
}
.ms-hq-launch__icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  color: #2563eb;
  background: rgba(219, 234, 254, .72);
  border: 1px solid rgba(147, 197, 253, .44);
  border-radius: .95rem;
}
.ms-hq-launch b,
.ms-hq-launch small { display: block; }
.ms-hq-launch b { font-size: 1rem; font-weight: 850; }
.ms-hq-launch small { margin-top: .18rem; color: var(--ms-text-muted); font-size: .82rem; line-height: 1.35; }
.ms-hq-launch__chevron { margin-left: auto; flex: 0 0 auto; color: var(--ms-text-muted); }
.dark .ms-hq-launch { background: rgba(30, 41, 59, .54); border-color: rgba(255, 255, 255, .09); }
.dark .ms-hq-launch:hover { background: rgba(51, 65, 85, .62); border-color: rgba(96, 165, 250, .32); }
.dark .ms-hq-launch__icon { background: rgba(37, 99, 235, .18); border-color: rgba(96, 165, 250, .22); }

@media (max-width: 520px) {
  .ms-hq-launch {
    align-items: flex-start;
    min-height: 7.25rem;
    padding: .8rem;
  }
  .ms-hq-launch__chevron { display: none; }
  .ms-hq-launch small { font-size: .78rem; }
}
.dark[data-dash-mode="marketsync"] #dept-nav .dept-nav-item[aria-current="page"] {
  background: rgba(71,85,105,.34) !important;
}
html[data-dash-mode="marketsync"] .page-content h1 {
  letter-spacing: -.045em;
}
html[data-dash-mode="marketsync"] #automation-modal > div:last-child {
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 1.5rem !important;
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.dark[data-dash-mode="marketsync"] #automation-modal > div:last-child {
  background: rgba(15,23,42,.86) !important;
  border-color: rgba(255,255,255,.12);
}

/* Dashboard canvas: one continuous system background. The shell, scroll
   column and unpainted Pulse board must never form separate vertical bands. */
html:not(.dark) body:has(#dept-sidebar) {
  background: var(--ms-bg) !important;
  background-image: none !important;
}

html:not(.dark) body:has(#dept-sidebar) > main,
html:not(.dark) body:has(#dept-sidebar) > main > section {
  background: transparent !important;
  background-image: none !important;
}

/* The MarketSync-internal cascade above targets every rounded content block.
   Keep the assistant's semantic system surface authoritative there too. */
html[data-dash-mode="marketsync"] .page-content .ms-ai-panel {
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(15, 23, 42, .10) !important;
}

html.dark[data-dash-mode="marketsync"] .page-content .ms-ai-panel {
  background: rgba(26, 29, 36, .84) !important;
  border-color: var(--ms-border) !important;
}

/* Management greeting: one calm, system-aware surface with a deterministic
   daily focus line. It follows the OS theme instead of forcing a dark band. */
.ms-daily-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem;
  color: var(--ms-text);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 1.5rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}
.ms-daily-greeting__eyebrow {
  margin-bottom: .2rem;
  color: #2563eb;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ms-daily-greeting h2 {
  color: inherit;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -.035em;
}
.ms-daily-greeting blockquote {
  max-width: 42rem;
  margin: 0;
  color: var(--ms-text-muted);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.5;
  text-align: right;
}
.dark .ms-daily-greeting {
  background: rgba(26, 29, 36, .78);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Fixed manager report rail. Its collapsed state stays icon-only; expanding it
   reveals labels without replacing the workspace or stealing page width. */
#report-rail {
  display: none !important;
  width: 3.5rem;
  max-height: calc(100vh - 9rem);
  padding: .5rem;
  overflow: hidden;
  color: var(--ms-text-muted);
  background: rgba(255, 255, 255, .76) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  border-right: 0 !important;
  border-radius: 1.35rem 0 0 1.35rem;
  box-shadow: -10px 18px 36px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .78);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  transition: width .2s ease;
}
#report-rail.rr-open { width: 12.5rem; }
.ms-report-rail__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  min-height: 2.3rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ms-border);
}
.ms-report-rail__head .rr-head-label {
  margin-right: auto;
  padding-left: .45rem;
  color: var(--ms-text);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ms-report-rail__head button,
#report-rail button[data-report] {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 2.35rem;
  padding: .48rem .58rem;
  color: inherit;
  background: transparent !important;
  border: 0;
  border-radius: .8rem;
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}
.ms-report-rail__head button { width: 2.35rem; justify-content: center; padding: .45rem; }
.ms-report-rail__head button:hover,
#report-rail button[data-report]:hover {
  color: #1d4ed8;
  background: rgba(37, 99, 235, .10) !important;
}
#report-rail svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  stroke-width: 1.8;
  transition: transform .2s ease;
}
.ms-report-rail__items {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  max-height: calc(100vh - 12.25rem);
  padding-top: .35rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.ms-report-rail__items::-webkit-scrollbar { display: none; }
.dark #report-rail {
  color: var(--ms-text-muted);
  background: rgba(22, 25, 32, .78) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: -12px 18px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 767px) {
  .ms-daily-greeting {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1.1rem;
  }
  .ms-daily-greeting blockquote { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #report-rail, #report-rail svg { transition: none; }
}


/* Team Messages panel sits to the RIGHT of the left-dock bubble so the
   launcher never disappears under the conversation. */
.team-chat-dock-panel {
  position: fixed;
  z-index: 10000;
  left: auto;
  right: 12px;
  bottom: 88px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 160px));
  height: min(520px, calc(100dvh - 160px));
}
@media (min-width: 768px) {
  .team-chat-dock-panel {
    right: 24px;
    width: 380px;
  }
}

.ms-crm-glass .ms-crm-actions button,
.ms-crm-glass #crm-actions-menu button { color: #0f172a; }
.dark .ms-crm-glass #crm-actions-menu button { color: #f1f5f9; }

/* Facebook-only product keeps a larger Marketplace hero. Complete stays compact. */
html[data-dash-tier="fb"] #feeds-panel { padding: 1.75rem !important; }
html[data-dash-tier="fb"] #feeds-panel h2 { font-size: 1.875rem !important; line-height: 1.1 !important; }
html[data-dash-tier="fb"] #feeds-panel .fb-hero-copy { display: block !important; }

/* Inventory Intelligence: liquid glass, branded, less neon violet. */
.ms-inventory-intelligence .bg-white {
  background: var(--ms-s-glass, rgba(255,255,255,.78)) !important;
  border-color: var(--ms-g-border, rgba(15,23,42,.10)) !important;
  box-shadow: var(--ms-g-shadow, 0 10px 30px rgba(15,23,42,.06)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.dark .ms-inventory-intelligence .bg-white {
  background: var(--ms-s-glass, rgba(15,23,42,.55)) !important;
}
.ms-inventory-intelligence .bg-violet-50,
.ms-inventory-intelligence .bg-violet-600,
[data-page-content="inv-intel"] .bg-violet-600 {
  background: #4f46e5 !important;
}
.ms-inventory-intelligence .text-violet-500,
.ms-inventory-intelligence .text-violet-600,
.ms-inventory-intelligence .text-violet-800 {
  color: #4338ca !important;
}
.ms-inventory-intelligence .ai-stat-card,
[data-page-content="market"] .rounded-xl {
  border-radius: 22px !important;
}


/* Readability without flattening the component scale.
   Body copy stays comfortable, but Tailwind/semantic text sizes remain authoritative
   for navigation, badges, metadata, tables and controls. The previous global
   .text-sm/.text-xs + h1/h2 !important rules erased hierarchy across HQ. */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.5; }
.page-content .ms-text-body,
.page-content .ms-c__body {
  font-size: 1rem;
  line-height: 1.5;
}

/* Keep only genuinely tiny CONTROL labels at a 12px accessibility floor. */
button.text-\[11px\],
button.text-\[10px\] {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* MarketSync Digital hero bands keep their own explicit hierarchy. */
.ms-c--hero h2 { font-size: 1.25rem !important; line-height: 1.2 !important; }
@media (min-width: 768px) {
  .ms-c--hero h2 { font-size: 1.5rem !important; }
}

/* Staff dossier modal — light tiles in light mode, dark tiles only in dark mode */
.ms-crm-glass .ms-ai-panel {
  background: transparent !important;
  box-shadow: none !important;
}
.ms-c--glass.light\:bg-white, .ms-staff-kpi {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.dark .ms-staff-kpi {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

/* Design Studio phone workspace. The editor is intentionally a drawer-based
 * single-column layout below tablet width; desktop rails must never squeeze the
 * artboard into an unusable sliver. */
#ms-studio-master-modal {
  --studio-blue: #2563eb;
  --studio-ink: #0b1220;
  --studio-panel: rgba(15, 23, 42, .94);
  background: #f7f8fa !important;
  color: #0f172a;
}
#ms-studio-master-modal .studio-identity-bar {
  /* MarketSync brand blues — the 500/600/700 brand-guide hexes, via the tokens
     above rather than a fourth copy of them. The gradient it replaced ran cyan
     (#0ea5c9) to violet (#7c3aed): neither is in the brand scale, and the cyan
     end carried white text at 2.90:1, under the 4.5:1 minimum, at exactly the
     corner the Back button sits in. Darkest on the left, so the controls sit on
     the deepest tone (9.60:1) and the design name on the brightest (5.17:1). */
  background: linear-gradient(100deg, var(--ms-blue-700) 0%, var(--ms-blue-600) 45%, var(--ms-blue-500) 100%) !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.2) !important;
  min-height: 58px;
}

/* The header carries identity, menus, editor mode, review and primary actions. Above
   1600px they sit side by side. Below it they do not fit, and `nowrap` on a
   fixed h-14 row does not report that — it draws them on top of each other. On
   a 1024px iPad in landscape "Insert" and "Share" printed over "Save"; on a
   390px phone fourteen pairs of controls overlapped, "UNSAVED" over "File" and
   "Inspector" over "Share" among them. A second row is the honest answer to
   more content than width, so the bar wraps: identity and the actions on the
   first line, the whole menu bar on its own line under them.
   Only below the threshold — at full desktop width one row is still one row. */
@media (max-width: 1600px) {
  #ms-studio-master-modal .studio-identity-bar { flex-wrap: wrap; row-gap: 4px; height: auto !important; }
  /* basis 0, not auto: at `auto` the browser measures the identity block at its
     content width (Back + the whole design name + the save chip), decides the
     actions cannot fit beside it, and wraps Save onto a third row. At 0 they
     share the first line and the name input absorbs whatever is left. */
  #ms-studio-master-modal .studio-identity-main { order: 1; flex: 1 1 0%; min-width: 0; width: auto; }
  #ms-studio-master-modal #studio-editor-mode-switch,
  #ms-studio-master-modal #ms-studio-command-trigger,
  #ms-studio-master-modal #studio-review-status-badge { order: 2; }
  #ms-studio-master-modal .studio-primary-actions { order: 3; flex: 0 0 auto; margin-left: auto; max-width: none; }
  /* flex-basis:100% is what forces the break, whatever the first row measures.
     It wraps rather than scrolls: a scrolling nav is an overflow container, and
     an overflow container clips the dropdown panel that hangs out of it. */
  #ms-studio-master-modal .studio-menubar { order: 4; flex: 1 1 100%; width: 100%; min-width: 0; flex-wrap: wrap; row-gap: 3px; }
  #ms-studio-master-modal .studio-menubar > * { flex: 0 0 auto; }
  /* The identity block gives up its ornaments here, not only on a phone. At
     769px the wordmark, the STUDIO badge and the long "Back to Marketing"
     label left the design name 30px wide and pushed the button's own label
     onto a second line inside itself. The brand mark is on the page around
     the editor; what a narrow editor needs is the name of the thing being
     edited. */
  #ms-studio-master-modal .studio-brand-logo,
  #ms-studio-master-modal .studio-brand-divider,
  #ms-studio-master-modal .studio-title-badge,
  #ms-studio-master-modal .studio-back-long { display: none; }
  #ms-studio-master-modal .studio-back-short { display: inline; }
}
#ms-studio-master-modal .studio-identity-bar input { color: #fff !important; }
#ms-studio-master-modal .studio-identity-bar input::placeholder { color: rgba(255,255,255,.72) !important; }

/* Everything sitting ON the blue bar is white. The markup carried Tailwind's
   slate greys from when this bar was white, so "Back to Marketing", the design
   name and the dividers were dark ink on brand blue — legible only because the
   blue is mid-tone, and not by much. */
/* The bar's own colour is already #fff, set in the same block as its gradient
   above — repeating it here would be a colour with no surface under it, which
   is exactly the pattern modal-surface-contrast.test.js exists to catch. */
#ms-studio-master-modal .studio-identity-bar .studio-chrome-button,
#ms-studio-master-modal .studio-identity-bar .studio-name-field { color: #fff !important; }
#ms-studio-master-modal .studio-chrome-button {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  transition: background .15s ease;
}
#ms-studio-master-modal .studio-chrome-button:hover { background: rgba(255,255,255,.26); }
#ms-studio-master-modal .studio-brand-divider { background: rgba(255,255,255,.35) !important; }
#ms-studio-master-modal .studio-name-field:hover,
#ms-studio-master-modal .studio-name-field:focus {
  border-color: rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.14) !important;
  outline: none;
}
/* The logo was 32px of dark artwork on a dark blue bar. The white mark, larger,
   is the one that reads. */
#ms-studio-master-modal .studio-brand-logo { height: 40px !important; display: block !important; }
#ms-studio-master-modal .studio-title-badge {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
}

/* ── The menu bar ──────────────────────────────────────────────────────────
   One row instead of three. The commands that used to need a scrolling toolbar
   live on these menus, so the header cannot outgrow its width again. */
/* flex-shrink 0. At `0 1 auto` the menu bar was the cluster the browser chose
   to compress when the header ran short — but its buttons carry `nowrap`, so
   compressing the nav did not compress them: the box shrank and "Share" hung
   24px out of it, over Save, on any window between about 1100 and 1270px. The
   elastic part of this header is the design-name input, which is what shrinks
   now. `overflow: visible` stays because the dropdown panels hang out of the
   nav by design. */
#ms-studio-master-modal .studio-menubar { flex: 0 0 auto; overflow: visible; }
#ms-studio-master-modal .studio-menu { position: relative; }
#ms-studio-master-modal .studio-menu-button {
  padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 800;
  color: #fff; background: transparent; white-space: nowrap; transition: background .15s ease;
}
#ms-studio-master-modal .studio-menu-button:hover,
#ms-studio-master-modal .studio-menu.is-open .studio-menu-button { background: rgba(255,255,255,.22); }
#ms-studio-master-modal .studio-menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 232px; padding: 6px;
  background: #fff; color: #0f172a;
  border: 1px solid #dbe3ef; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.22);
}
#ms-studio-master-modal .studio-menu-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  color: #0f172a; text-align: left; background: transparent;
}
#ms-studio-master-modal .studio-menu-row:hover { background: #eef2ff; }
#ms-studio-master-modal .studio-menu-row kbd {
  margin-left: auto; font: 700 10.5px/1 ui-monospace, monospace; color: #64748b;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 5px;
}
#ms-studio-master-modal .studio-menu-check { width: 12px; font-style: normal; color: #2563eb; font-weight: 900; }
#ms-studio-master-modal .studio-menu-sep { height: 1px; margin: 5px 8px; background: #e2e8f0; }
#ms-studio-master-modal .studio-menu-custom { cursor: default; }
#ms-studio-master-modal .studio-menu-custom:hover { background: transparent; }
#ms-studio-master-modal .studio-menu-custom select {
  margin-left: auto; max-width: 190px; font-size: 11.5px; font-weight: 700;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 6px;
}
#ms-studio-master-modal .studio-menu-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
#ms-studio-master-modal .studio-menu-zoom button {
  min-width: 26px; padding: 3px 6px; border-radius: 7px; font-size: 11.5px; font-weight: 900;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #0f172a;
}
#ms-studio-master-modal .studio-menu-zoom button:hover { background: #e2e8f0; }
#ms-studio-master-modal .studio-menu-zoom b { min-width: 44px; text-align: center; font: 800 11.5px/1 ui-monospace, monospace; color: #2563eb; }

/* The page footer's primary text action was the one blue button on a white bar,
   which read as the bar's own accent rather than as "add a heading". */
/* Selector carries the footer region and the element type deliberately: the
   blanket `[data-studio-region="footer"] button { color: #334155 !important }`
   below is more specific than a plain class, so a class-only rule here loses
   the colour while still winning the background — which is how this button
   ended up white with slate text instead of white with blue. */
#ms-studio-master-modal [data-studio-region="footer"] button.studio-footer-heading-button {
  background: #fff !important; color: #1d4ed8 !important;
  border: 1px solid #c7d2fe !important;
}
#ms-studio-master-modal [data-studio-region="footer"] button.studio-footer-heading-button:hover { background: #eef2ff !important; }

#ms-studio-master-modal .studio-header-stack > nav,
#ms-studio-master-modal .studio-command-bar {
  background: rgba(255,255,255,.88) !important;
  border-bottom-color: #dbe3ef !important;
}
#ms-studio-master-modal [data-studio-region="rail"],
#ms-studio-master-modal [data-studio-region="drawer"],
#ms-studio-master-modal [data-studio-region="inspector"] {
  background: rgba(255,255,255,.96) !important;
  border-color: #dbe3ef !important;
}
#ms-studio-master-modal [data-studio-region="rail"] {
  width: 88px !important; padding-top: 12px; gap: 8px;
  min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
  overscroll-behavior: contain;
}
#ms-studio-master-modal [data-studio-region="rail"]::-webkit-scrollbar { width: 5px; }
#ms-studio-master-modal [data-studio-region="rail"]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
#ms-studio-master-modal [role="tablist"][aria-label="Design Studio"] {
  min-height: 44px; scrollbar-width: thin; scroll-snap-type: x proximity;
}
#ms-studio-master-modal [role="tablist"][aria-label="Design Studio"] > button { scroll-snap-align: start; min-width: max-content; }
#ms-studio-master-modal .studio-command-bar { min-height: 56px; overflow: hidden; }
#ms-studio-master-modal .studio-command-scroll { flex: 1 1 auto; padding: 5px 10px 5px 0; scrollbar-width: thin; overscroll-behavior-inline: contain; }
#ms-studio-master-modal .studio-command-scroll > * { flex: 0 0 auto; }
#ms-studio-master-modal .studio-primary-actions { max-width: min(55vw, 720px); overflow-x: auto; padding: 5px 0 5px 8px; scrollbar-width: thin; border-left: 1px solid #dbe3ef; }
#ms-studio-master-modal .studio-primary-actions > button { flex: 0 0 auto; white-space: nowrap; }
/* A category that carries more than one grid (Shapes has the shape library and
   the premade shapes; Icons has the icon set and the icon graphics) separates
   them inside the one scroll rather than opening a second panel. */
#ms-studio-master-modal .studio-element-subheading {
  margin: 14px 0 6px; font: 800 10px/1.2 ui-sans-serif, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.dark #ms-studio-master-modal .studio-element-subheading { color: #94a3b8; }

#ms-studio-master-modal .studio-tool-rail-button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 82px; min-height: 64px; padding: 6px 3px; border: 0 !important;
  border-radius: 14px; background: transparent !important; color: #334155 !important;
  font-size: 11px; line-height: 1.1; font-weight: 850; white-space: nowrap;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
#ms-studio-master-modal .studio-tool-rail-button:hover { background: rgba(37,99,235,.06) !important; color: #0f172a !important; transform: translateY(-1px); }
#ms-studio-master-modal .studio-tool-rail-button .studio-tool-icon {
  display: flex !important; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important; padding: 7px !important; margin-bottom: 4px;
  border: 1px solid rgba(79,70,229,.14); border-radius: 11px;
  background: #eef2ff !important; color: #4f46e5 !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.08);
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#ms-studio-master-modal .studio-tool-rail-button .studio-tool-icon * { vector-effect: non-scaling-stroke; }
#ms-studio-master-modal #tool-btn-templates .studio-tool-icon { background:#eff6ff !important; color:#2563eb !important; border-color:#bfdbfe; }
#ms-studio-master-modal #tool-btn-elements .studio-tool-icon { background:#f5f3ff !important; color:#7c3aed !important; border-color:#ddd6fe; }
#ms-studio-master-modal #tool-btn-text .studio-tool-icon { background:#fff7ed !important; color:#ea580c !important; border-color:#fed7aa; }
#ms-studio-master-modal #tool-btn-photos .studio-tool-icon { background:#ecfeff !important; color:#0891b2 !important; border-color:#a5f3fc; }
#ms-studio-master-modal #tool-btn-uploads .studio-tool-icon { background:#eff6ff !important; color:#0284c7 !important; border-color:#bae6fd; }
#ms-studio-master-modal #tool-btn-inventory .studio-tool-icon { background:#ecfdf5 !important; color:#059669 !important; border-color:#a7f3d0; }
#ms-studio-master-modal #tool-btn-brand .studio-tool-icon { background:#fdf2f8 !important; color:#db2777 !important; border-color:#fbcfe8; }
#ms-studio-master-modal #tool-btn-projects .studio-tool-icon { background:#eef2ff !important; color:#4f46e5 !important; border-color:#c7d2fe; }
#ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] { background: rgba(37,99,235,.08) !important; color: #0f172a !important; }
#ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] .studio-tool-icon {
  color: #fff !important; background: #2563eb !important; border-color: #2563eb !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.28);
}
.dark #ms-studio-master-modal .studio-tool-rail-button { color:#cbd5e1 !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button:hover,
.dark #ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] { color:#fff !important; background:rgba(96,165,250,.12) !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button .studio-tool-icon { box-shadow:0 5px 14px rgba(0,0,0,.24); }
#ms-studio-master-modal .studio-tool-rail-button:focus-visible { outline: 2px solid rgba(37,99,235,.55); outline-offset: 1px; }
#ms-studio-master-modal [data-studio-region="drawer"] { width: 320px !important; }
#ms-studio-master-modal [data-studio-region="inspector"] { width: 300px !important; }
#ms-studio-master-modal [data-studio-region="canvas"] {
  background: #f7f8fa !important;
  background-image: radial-gradient(#d7dee8 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  overflow: auto !important;
  padding: 38px 48px 70px;
}
#ms-studio-master-modal #studio-artboard-container {
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.12) !important;
}
/* ── The canvas viewport scrolls ────────────────────────────────────────────
   It was overflow:hidden with the artboard absolutely centred, so anything the
   artboard could not fit at the current zoom was unreachable — zoom past the
   fit and the rest of the design was simply off screen.
   flex + an auto margin on the stage is the combination that both centres a
   small artboard AND leaves a large one reachable in every direction:
   align-items:center would clip the top and left, which is the classic version
   of this bug and worse than not scrolling at all. */
#ms-studio-master-modal .studio-canvas-viewport {
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px;
}
/* The artboard's LAYOUT box stays its full 1080x1350 whatever the zoom — a
   transform changes what you see, not what the layout engine measures — and
   that unscaled box leaked into the scroll container, so the canvas scrolled
   even when the design already fitted. The stage is exactly the scaled size, so
   clipping to it costs nothing visually and stops the leak. */
#ms-studio-master-modal .studio-artboard-stage { flex: 0 0 auto; position: relative; overflow: hidden; }

#ms-studio-master-modal [data-studio-region="footer"] {
  background: rgba(255,255,255,.97) !important;
  border-top-color: #dbe3ef !important;
  color: #334155 !important;
}
#ms-studio-master-modal [data-studio-region="footer"] button,
#ms-studio-master-modal [data-studio-region="footer"] select { color: #334155 !important; }
/* Studio drawer cards must remain readable in the light Canva-style workspace.
 * The utility classes also carry dark-mode text utilities, which previously
 * produced near-white cards with white labels and invisible SVG previews. */
#ms-studio-master-modal #studio-tool-panel { color: #1e293b !important; }
#ms-studio-master-modal #studio-tool-panel input,
#ms-studio-master-modal #studio-tool-panel select,
#ms-studio-master-modal #studio-tool-panel textarea { background: #fff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel input::placeholder,
#ms-studio-master-modal #studio-tool-panel textarea::placeholder { color: #64748b !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-100"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-50"] { background: #e8eef6 !important; color: #172033 !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-800"] { background: #e8eef6 !important; color: #172033 !important; border-color: #cbd5e1 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-indigo-500/20"] { background: #e8efff !important; color: #1d4ed8 !important; }
#ms-studio-master-modal #studio-tool-panel button[class*="bg-blue-600"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-sky-600"],
#ms-studio-master-modal #studio-tool-panel button[class*="bg-indigo-600"] { color: #fff !important; }
#ms-studio-master-modal #studio-tool-panel button svg { color: currentColor !important; opacity: 1 !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-900 { color: #172033 !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-500,
#ms-studio-master-modal #studio-tool-panel .text-slate-400 { color: #64748b !important; }
#ms-studio-master-modal #studio-tool-panel .text-slate-300 { color: #334155 !important; }
#ms-studio-master-modal #studio-tool-panel .text-white { color: #fff !important; }
#ms-studio-master-modal .studio-upload-dropzone {
  padding: 22px 14px 14px;
  text-align: center;
  border: 1px dashed #94a3b8;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #eef4fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#ms-studio-master-modal .studio-upload-dropzone:hover { border-color: #2563eb; background: #eef5ff; }
#ms-studio-master-modal .studio-upload-dropzone-icon,
#ms-studio-master-modal .studio-panel-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: #2563eb; color: #fff; font: 900 20px/1 ui-sans-serif, sans-serif;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}
#ms-studio-master-modal .studio-panel-icon { width: 24px; height: 24px; border-radius: 8px; font-size: 15px; }
#ms-studio-master-modal .studio-upload-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; border: 1px solid #cbd5e1; border-radius: 11px;
  background: #fff; color: #1e3a8a; font: 800 11px/1 ui-sans-serif, sans-serif; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
#ms-studio-master-modal .studio-upload-action:hover { border-color: #2563eb; background: #eff6ff; transform: translateY(-1px); }
#ms-studio-master-modal .studio-upload-action-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
#ms-studio-master-modal .studio-upload-action-primary:hover { background: #1d4ed8; color: #fff; }
#ms-studio-master-modal .studio-shape-card { min-width: 0; }
#ms-studio-master-modal .studio-shape-art { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: #2563eb; }
#ms-studio-master-modal .studio-shape-art svg { width: 40px; height: 40px; display: block; }
#ms-studio-master-modal .studio-shape-card:hover .studio-shape-art { color: #1d4ed8; transform: scale(1.08); }
#ms-studio-master-modal .studio-shape-card:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
#ms-studio-master-modal .studio-shape-colour-row { display: grid; grid-template-columns: 1fr 42px 88px; align-items: center; gap: 8px; }
#ms-studio-master-modal .studio-shape-colour-row label { font: 800 11px/1.2 ui-sans-serif,sans-serif; color: #475569; }
#ms-studio-master-modal .studio-shape-colour-row input[type="color"] { width: 42px; height: 36px; padding: 2px !important; border-radius: 10px; cursor: pointer; }
#ms-studio-master-modal .studio-shape-colour-row input[type="text"],
#ms-studio-master-modal .studio-shape-colour-row input:not([type]) { width: 88px; height: 36px; padding: 6px 8px !important; border-radius: 10px; font: 700 11px/1 monospace; }
#ms-studio-master-modal .studio-text-template-preview { height: 74px; padding: 13px 12px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 6px 14px rgba(15,23,42,.18); }
#ms-studio-master-modal .studio-text-template-preview small { display: block; font: 900 8px/1 ui-sans-serif,sans-serif; letter-spacing: .12em; }
#ms-studio-master-modal .studio-text-template-preview strong { display: block; margin-top: 5px; font: 900 13px/.9 ui-sans-serif,sans-serif; letter-spacing: -.02em; }

/* Full website template browser — the preview is the actual multi-page site
 * renderer, with WordPress-style page and device navigation around it. */
.ws-template-browser-bar { min-height: 62px; display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: #111827; color: #fff; border-bottom: 1px solid #334155; }
.ws-template-browser-bar > div:first-child { display: flex; flex-direction: column; min-width: 180px; margin-right: auto; }
.ws-template-browser-bar > div:first-child span { color: #94a3b8; font: 800 10px/1.2 ui-sans-serif,sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.ws-template-browser-bar > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 14px/1.4 ui-sans-serif,sans-serif; }
.ws-template-browser-bar label { display: flex; align-items: center; gap: 7px; color: #cbd5e1; font: 800 11px/1 ui-sans-serif,sans-serif; }
.ws-template-browser-bar select { width: 190px; padding: 8px 10px; border: 1px solid #475569; border-radius: 9px; background: #1e293b; color: #fff; font: 700 12px/1 ui-sans-serif,sans-serif; }
.ws-template-preview-devices { display: flex; padding: 3px; border: 1px solid #475569; border-radius: 10px; background: #1e293b; }
.ws-template-preview-devices button { padding: 6px 9px; border-radius: 7px; color: #94a3b8; font: 800 10px/1 ui-sans-serif,sans-serif; }
.ws-template-preview-devices button[aria-current="true"] { background: #4f46e5; color: #fff; }
.ws-template-preview-use { padding: 9px 14px; border-radius: 9px; background: #4f46e5; color: #fff; font: 900 12px/1 ui-sans-serif,sans-serif; white-space: nowrap; }
.ws-template-preview-close { width: 36px; height: 36px; border-radius: 9px; color: #cbd5e1; background: #1e293b; font: 400 25px/1 ui-sans-serif,sans-serif; }
.ws-template-browser-stage { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; padding: 12px; background: #334155; }
#ws-template-preview-wrap { width: 100%; height: 100%; overflow: hidden; background: #fff; box-shadow: 0 10px 35px rgba(0,0,0,.42); transition: width .2s ease; }
#ws-template-preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 860px) {
  .ws-template-browser-bar { flex-wrap: wrap; }
  .ws-template-browser-bar > div:first-child { flex: 1 1 180px; }
  .ws-template-browser-bar label { order: 3; flex: 1 1 100%; }
  .ws-template-browser-bar select { flex: 1; width: auto; }
  .ws-template-preview-devices { display: none; }
}
#ms-studio-master-modal .studio-icon-card { min-width: 0; }
#ms-studio-master-modal .studio-icon-art { width: 44px; height: 44px; display: block; }
#ms-studio-master-modal .studio-icon-card:hover .studio-icon-art { transform: scale(1.08); }
#ms-studio-master-modal .studio-icon-card:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }
#ms-studio-master-modal .studio-catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
#ms-studio-master-modal .studio-catalog-heading b { color:#1e293b; font:900 12px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-catalog-heading span { color:#64748b; font:700 9px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-catalog-scroll { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; content-visibility:auto; }
#ms-studio-master-modal .studio-catalog-more { grid-column:1/-1; min-height:40px; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; color:#475569; font:800 10px/1 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-element-search { min-height:46px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #cbd5e1; border-radius:16px; background:#fff; color:#64748b; }
#ms-studio-master-modal .studio-element-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#0f172a; font:700 12px/1 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-element-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
#ms-studio-master-modal .studio-element-category { min-width:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:3px 1px 6px; border:0; border-radius:14px; background:transparent; color:var(--category-color); }
#ms-studio-master-modal .studio-element-category span { display:flex; align-items:center; justify-content:center; width:50px; height:50px; border:1px solid color-mix(in srgb,var(--category-color) 18%,#fff); border-radius:15px; background:var(--category-bg); color:var(--category-color); box-shadow:0 8px 18px color-mix(in srgb,var(--category-color) 13%,transparent); transition:transform .16s ease,box-shadow .16s ease; }
#ms-studio-master-modal .studio-element-category:hover span,
#ms-studio-master-modal .studio-element-category[aria-current="true"] span { transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb,var(--category-color) 24%,transparent); outline:2px solid color-mix(in srgb,var(--category-color) 55%,transparent); }
#ms-studio-master-modal .studio-element-category img { width:27px; height:27px; object-fit:contain; }
#ms-studio-master-modal .studio-element-category b { max-width:100%; overflow:hidden; color:#334155; font:800 8px/1.1 ui-sans-serif,sans-serif; text-overflow:ellipsis; }
#ms-studio-master-modal .studio-element-recent-row { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 6px; scrollbar-width:none; }
#ms-studio-master-modal .studio-element-recent-row::-webkit-scrollbar { display:none; }
#ms-studio-master-modal .studio-element-recent { flex:0 0 52px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #e2e8f0; border-radius:50%; background:#f8fafc; }
#ms-studio-master-modal .studio-element-recent span { width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
#ms-studio-master-modal .studio-element-recent svg,
#ms-studio-master-modal .studio-element-recent img { width:30px; height:30px; object-fit:contain; }
#ms-studio-master-modal .studio-element-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; max-height:52vh; }
#ms-studio-master-modal .studio-element-card,
#ms-studio-master-modal .studio-text-template-card { min-width:0; padding:7px; border:1px solid #dbe3ef; border-radius:15px; background:#fff; text-align:left; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
#ms-studio-master-modal .studio-element-card:hover,
#ms-studio-master-modal .studio-text-template-card:hover { border-color:#60a5fa; box-shadow:0 9px 20px rgba(37,99,235,.12); transform:translateY(-1px); }
#ms-studio-master-modal .studio-element-preview { position:relative; height:98px; display:flex; align-items:center; gap:8px; overflow:hidden; padding:12px; border-radius:11px; background:linear-gradient(135deg,#172554,#2563eb); color:#fff; }
#ms-studio-master-modal .studio-visual-element-preview { height:92px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:14px; background:#f3f4f6; color:var(--element-color); }
#ms-studio-master-modal .studio-visual-element-preview > span { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }
#ms-studio-master-modal .studio-visual-element-preview svg,
#ms-studio-master-modal .studio-visual-element-preview img { width:58px; height:58px; object-fit:contain; }
#ms-studio-master-modal .studio-visual-element-preview > span svg { width:54px; height:54px; }
#ms-studio-master-modal .studio-element-library .studio-catalog-card-copy { padding-top:6px; text-align:center; }
#ms-studio-master-modal .studio-element-library .studio-catalog-card-copy b { font-size:8px; }
#ms-studio-master-modal .studio-element-library .studio-catalog-card-copy span { font-size:7px; }
#ms-studio-master-modal .studio-element-preview-icon { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:31px; height:31px; font:900 20px/1 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-element-preview > span:last-child { min-width:0; }
#ms-studio-master-modal .studio-element-preview b { display:block; font:900 10px/1.02 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-element-preview small { display:block; margin-top:5px; overflow:hidden; opacity:.76; font:700 7px/1.15 ui-sans-serif,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
#ms-studio-master-modal .studio-element-preview-badge { width:92px; margin-inline:auto; border-radius:50%; justify-content:center; flex-direction:column; text-align:center; }
#ms-studio-master-modal .studio-element-preview-ribbon { height:72px; margin-block:13px; border-radius:8px; background:linear-gradient(135deg,#e11d48,#fb7185); transform:rotate(-3deg); }
#ms-studio-master-modal .studio-element-preview-button { height:62px; margin-block:18px; border-radius:999px; background:linear-gradient(135deg,#2563eb,#4f46e5); }
#ms-studio-master-modal .studio-element-preview-trust { background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
#ms-studio-master-modal .studio-element-preview-callout { height:104px; border-radius:20px; background:linear-gradient(145deg,#172554,#0f172a); }
#ms-studio-master-modal .studio-element-preview-card { align-items:flex-end; background:linear-gradient(145deg,#111827,#334155); }
#ms-studio-master-modal .studio-element-preview-header { height:70px; margin-block:14px; border-radius:7px; background:linear-gradient(90deg,#312e81,#7c3aed); }
#ms-studio-master-modal .studio-element-preview-legal { height:56px; margin-block:21px; background:#f8fafc; color:#475569; border:1px solid #cbd5e1; }
#ms-studio-master-modal .studio-element-preview-social { width:92px; margin-inline:auto; border-radius:50%; flex-direction:column; justify-content:center; text-align:center; background:#111827; }
#ms-studio-master-modal .studio-element-preview-rating { background:#fffbeb; color:#78350f; border:1px solid #f59e0b; }
#ms-studio-master-modal .studio-element-preview-rating .studio-element-preview-icon { width:auto; color:#b45309; font-size:11px; letter-spacing:1px; }
#ms-studio-master-modal .studio-element-preview-date,
#ms-studio-master-modal .studio-element-preview-stat { width:98px; margin-inline:auto; border-radius:25px; flex-direction:column; justify-content:center; text-align:center; background:#7c3aed; }
#ms-studio-master-modal .studio-element-preview-stat { border-radius:50%; background:#0e7490; }
#ms-studio-master-modal .studio-element-preview-quote { background:#fff7ed; color:#7c2d12; border:1px solid #fdba74; }
#ms-studio-master-modal .studio-element-preview-arrow { clip-path:polygon(0 15%,75% 15%,75% 0,100% 50%,75% 100%,75% 85%,0 85%); background:#ea580c; padding-right:24px; }
#ms-studio-master-modal .studio-catalog-card-copy { display:block; min-width:0; padding:7px 2px 2px; }
#ms-studio-master-modal .studio-catalog-card-copy b,
#ms-studio-master-modal .studio-catalog-card-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ms-studio-master-modal .studio-catalog-card-copy b { color:#1e293b; font:800 10px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-catalog-card-copy span { margin-top:3px; color:#64748b; font:700 8px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-icon-categories,
#ms-studio-master-modal .studio-category-pills { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 5px; scrollbar-width:none; scroll-snap-type:x proximity; }
#ms-studio-master-modal .studio-icon-categories::-webkit-scrollbar,
#ms-studio-master-modal .studio-category-pills::-webkit-scrollbar { display:none; }
#ms-studio-master-modal .studio-category-chip { flex:0 0 64px; min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid #dbe3ef; border-radius:14px; background:#f8fafc; color:#475569; scroll-snap-align:start; }
#ms-studio-master-modal .studio-category-chip[aria-current="true"] { border-color:#60a5fa; background:#eff6ff; color:#1d4ed8; }
#ms-studio-master-modal .studio-category-chip img { width:25px; height:25px; }
#ms-studio-master-modal .studio-category-chip span { max-width:58px; overflow:hidden; font:800 8px/1 ui-sans-serif,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
#ms-studio-master-modal .studio-category-pill { flex:0 0 auto; min-height:30px; padding:7px 11px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; color:#475569; font:800 9px/1 ui-sans-serif,sans-serif; scroll-snap-align:start; }
#ms-studio-master-modal .studio-category-pill[aria-current="true"] { border-color:#2563eb; background:#2563eb; color:#fff; }
#ms-studio-master-modal .studio-icon-library { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; max-height:52vh; }
#ms-studio-master-modal .studio-icon-card { min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid transparent; border-radius:13px; background:transparent; color:#2563eb; }
#ms-studio-master-modal .studio-icon-card:hover { border-color:#93c5fd; background:#eff6ff; }
#ms-studio-master-modal .studio-icon-visual { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#2563eb; font:900 24px/1 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-icon-visual .studio-icon-art { position:absolute; inset:0; width:44px; height:44px; background:transparent; }
/* The emoji stand-in shows until the real icon arrives, then CSS hides it.
   It used to be hidden by the image's own load handler reaching for its
   previous sibling — which threw whenever that handler ran against a subtree
   a re-render had already detached, leaving the stand-in showing underneath
   the icon. A class on the parent cannot miss. */
#ms-studio-master-modal .studio-icon-visual.is-loaded .studio-icon-fallback { display:none; }
#ms-studio-master-modal .studio-icon-card small { display:block; width:100%; overflow:hidden; padding-inline:3px; color:#64748b; font:700 7px/1 ui-sans-serif,sans-serif; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
#ms-studio-master-modal .studio-text-template-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; max-height:48vh; }
#ms-studio-master-modal .studio-text-template-preview { height:118px; padding:14px 10px; border-radius:11px; background:#f3f4f6; color:var(--text-primary); box-shadow:none; transform:none; text-align:center; }
#ms-studio-master-modal .studio-text-template-preview small { color:var(--text-accent); font-family:var(--text-secondary-font); font-size:10px; letter-spacing:.08em; transform:rotate(calc(var(--text-angle) * -.35)); }
#ms-studio-master-modal .studio-text-template-preview strong { color:var(--text-primary); font-family:var(--text-font); font-size:20px; line-height:.84; transform:rotate(var(--text-angle)); text-shadow:1px 2px 0 rgba(15,23,42,.11); }
#ms-studio-master-modal .studio-text-layout-tall strong { max-width:105px; margin-inline:auto; font-size:23px; }
#ms-studio-master-modal .studio-text-layout-script strong { font-size:24px; font-weight:700; letter-spacing:-.04em; }
#ms-studio-master-modal .studio-text-layout-compact strong { font-size:22px; }
#ms-studio-master-modal .studio-text-layout-pixel strong { font-size:18px; letter-spacing:.08em; }
#ms-studio-master-modal .studio-text-layout-legal strong { font-size:12px; line-height:1.05; letter-spacing:.02em; }
#ms-studio-master-modal .studio-add-text-button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:12px; background:linear-gradient(90deg,#7c3aed,#9333ea); color:#fff; font:900 12px/1 ui-sans-serif,sans-serif; box-shadow:0 8px 20px rgba(124,58,237,.22); }
#ms-studio-master-modal .studio-add-text-button span { font:500 23px/1 Georgia,serif; }
#ms-studio-master-modal .studio-magic-write { overflow:hidden; border:1px solid #cbd5e1; border-radius:12px; background:#fff; }
#ms-studio-master-modal .studio-magic-write summary { min-height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#1e293b; font:900 11px/1 ui-sans-serif,sans-serif; list-style:none; }
#ms-studio-master-modal .studio-magic-write summary::-webkit-details-marker { display:none; }
#ms-studio-master-modal .studio-magic-write[open] summary { border-bottom:1px solid #e2e8f0; }
#ms-studio-master-modal .studio-magic-write > div { padding:10px; }
/* Pattern chips in the Background panel. */
#ms-studio-master-modal .studio-pattern-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#ms-studio-master-modal .studio-pattern-chip { aspect-ratio: 1; min-height: 44px; padding: 0; border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 10px; background-size: cover; background-position: center; cursor: pointer; }
#ms-studio-master-modal .studio-pattern-chip:hover { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, .25); }
.dark #ms-studio-master-modal .studio-pattern-chip { border-color: rgba(255, 255, 255, .2); }

/* Chart data sheet. Not scoped to #ms-studio-master-modal: the sheet is
   appended to <body> so it can sit above the Studio's own stacking contexts,
   which puts it outside that ancestor. */
.studio-chart-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 240; max-height: 72vh; overflow: auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: #ffffff; color: #0f172a; box-shadow: 0 -18px 48px rgba(15, 23, 42, .28); font-family: ui-sans-serif, system-ui, sans-serif; }
.studio-chart-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 15px; font-weight: 900; }
.studio-chart-sheet-head button { min-width: 40px; min-height: 40px; border: 0; background: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.studio-chart-sheet-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #64748b; }
.studio-chart-sheet-hint code { padding: 1px 5px; border-radius: 5px; background: #f1f5f9; font-size: 11px; }
.studio-chart-sheet textarea { width: 100%; min-height: 150px; padding: 11px; border: 1px solid #cbd5e1; border-radius: 14px;
  background: #f8fafc; color: #0f172a; font: 600 15px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.studio-chart-sheet-styles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.studio-chart-sheet-styles button { min-height: 44px; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 12px;
  background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; }
.studio-chart-sheet-styles button[aria-pressed="true"] { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.studio-chart-sheet-apply { width: 100%; min-height: 48px; margin-top: 14px; border: 0; border-radius: 14px;
  background: #4f46e5; color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.dark .studio-chart-sheet { background: #0f172a; color: #f8fafc; }
.dark .studio-chart-sheet-hint { color: #94a3b8; }
.dark .studio-chart-sheet-hint code { background: #1e293b; }
.dark .studio-chart-sheet textarea { border-color: #334155; background: #020617; color: #f8fafc; }
.dark .studio-chart-sheet-styles button { border-color: #334155; background: #1e293b; color: #cbd5e1; }

/* Template thumbnails size their type in cqw, so they need a container query
   container wherever they are rendered — the Studio modal AND the Marketing
   tab's creative home. Scoping this to the modal left the Marketing tab
   resolving cqw against the viewport. */
.studio-template-preview { position: relative; width: 100%; overflow: hidden; background-position: center; container-type: inline-size; }
#ms-studio-master-modal .studio-home-template-card { align-self:start; }
#ms-studio-master-modal .studio-template-preview img { display: block; max-width: none; }
#ms-studio-master-modal .studio-template-preview > div { pointer-events: none; }
#ms-studio-master-modal .studio-home { overscroll-behavior: contain; scrollbar-gutter: stable; }
/* Same story as the identity bar above: cyan-to-violet, off the brand scale.
   Left alone it would sit directly under a brand-blue header. */
#ms-studio-master-modal .studio-home-hero { background: linear-gradient(135deg, var(--ms-blue-700) 0%, var(--ms-blue-600) 48%, var(--ms-blue-500) 100%) !important; color:#fff !important; }
#ms-studio-master-modal .studio-home-hero h1 { color:#fff !important; }
#ms-studio-master-modal .studio-home-hero .studio-home-hero-eyebrow { color:#cffafe !important; }
#ms-studio-master-modal .studio-home-hero .studio-home-hero-copy { color:#dbeafe !important; }
#ms-studio-master-modal .studio-home-hero label { background:#fff !important; color:#0f172a !important; }
#ms-studio-master-modal .studio-home-hero input { color:#0f172a !important; }
#ms-studio-master-modal .studio-home-template-card .studio-template-preview { max-height: 270px; }
#ms-studio-master-modal .studio-home-template-card .studio-template-preview img { transform: translateZ(0); }
#ms-studio-master-modal .studio-home-set-card .studio-template-preview { background: transparent; }
#ms-studio-master-modal [data-studio-home-set][aria-pressed="true"] { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.18), 0 18px 42px rgba(15,23,42,.16); }
#ms-studio-master-modal [data-studio-home-format][aria-pressed="true"] { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.dark #ms-studio-master-modal [data-studio-home-format][aria-pressed="true"] { border-color: #818cf8; background: #4f46e5; color: #fff; }
@media (max-width: 640px) {
  #ms-studio-master-modal .studio-home-template-card .studio-template-preview { max-height: 220px; }
  #ms-studio-master-modal .studio-home-set-card .studio-template-preview { max-height: 145px; }
}
#ms-studio-master-modal .studio-page-stack {
  position: absolute; left: 18px; top: 54px; bottom: 28px; width: 124px; z-index: 24;
  overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 12px;
}
#ms-studio-master-modal .studio-page-stack-item { position: relative; padding: 3px; border-radius: 10px; }
#ms-studio-master-modal .studio-page-stack-item.is-active { background: rgba(37,99,235,.16); box-shadow: 0 0 0 2px rgba(37,99,235,.7); }
#ms-studio-master-modal .studio-page-card { display: block; width: 100%; text-align: left; color: #334155; }
#ms-studio-master-modal .studio-page-card-canvas { display:block; position:relative; aspect-ratio:1/1; overflow:hidden; padding:0; border-radius:6px; box-shadow:0 2px 8px rgba(15,23,42,.18); border:1px solid rgba(148,163,184,.28); background:#fff; }
#ms-studio-master-modal .studio-page-card-preview { position:absolute; inset:0; display:block; overflow:hidden; background:#fff; }
#ms-studio-master-modal .studio-page-card-preview > * { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; border-radius:0 !important; }
#ms-studio-master-modal .studio-page-card-count { position:absolute; right:4px; bottom:4px; z-index:4; font:700 8px/1.1 ui-sans-serif,sans-serif; color:#fff; background:rgba(15,23,42,.72); padding:3px 4px; border-radius:4px; box-shadow:0 1px 3px rgba(15,23,42,.25); }
#ms-studio-master-modal .studio-page-card-label { display: block; padding: 5px 2px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.2 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-page-card-actions { display: flex; justify-content: flex-end; gap: 3px; position: absolute; top: 5px; right: 5px; opacity: 0; transition: opacity .15s ease; }
#ms-studio-master-modal .studio-page-stack-item:hover .studio-page-card-actions,
#ms-studio-master-modal .studio-page-stack-item.is-active .studio-page-card-actions { opacity: 1; }
#ms-studio-master-modal .studio-page-card-actions button,
#ms-studio-master-modal .studio-page-stage-actions button { width: 20px; height: 20px; border-radius: 6px; background: rgba(15,23,42,.78); color: #fff; font: 700 12px/20px ui-sans-serif, sans-serif; text-align: center; }
#ms-studio-master-modal .studio-page-stage-label { position: absolute; left: 162px; top: 16px; z-index: 25; display: flex; align-items: center; gap: 8px; color: #334155; font: 800 12px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-page-stage-actions { display: flex; gap: 4px; }
.studio-mobile-panel-button { display: none; }
/* The overflow menu for the actions the phone toolbar cannot hold. Same
   pattern as the panel buttons above: absent on a desktop, where every one of
   those actions is already on the toolbar. */
.studio-mobile-action { display: none; }
.studio-back-short,
.studio-mobile-scrim { display: none; }
#ms-studio-master-modal .canvas-container,
#ms-studio-master-modal .upper-canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
#studio-context-menu { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
#studio-context-menu .studio-context-menu-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 2px 8px 4px 12px; color: #64748b; font: 900 10px/1 ui-sans-serif,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#studio-context-menu .studio-context-menu-heading button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; color: #64748b; font: 500 22px/1 ui-sans-serif,sans-serif; }
#studio-context-menu .studio-context-menu-heading button:hover { background: #f1f5f9; color: #0f172a; }
#studio-context-menu .studio-context-menu-item { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 768px) {
  #studio-context-menu { left: 8px !important; right: 8px !important; top: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; width: auto; max-height: min(72dvh, 620px); border-radius: 20px; padding: 8px 6px 10px; box-shadow: 0 24px 65px rgba(2,6,23,.48); }
  #studio-context-menu .studio-context-menu-item { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  #studio-context-menu .studio-context-menu-heading { min-height: 40px; padding-left: 12px; }
}
.dark #studio-context-menu .studio-context-menu-heading { color: #94a3b8; }
.dark #studio-context-menu .studio-context-menu-heading button:hover { background: #1e293b; color: #f8fafc; }
.ms-studio-grid-on::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:19; background-image:linear-gradient(rgba(96,165,250,.16) 1px, transparent 1px),linear-gradient(90deg, rgba(96,165,250,.16) 1px, transparent 1px); background-size:40px 40px; }
#ms-studio-master-modal [class*="bg-blue-500"],
#ms-studio-master-modal [class*="bg-blue-600"],
#ms-studio-master-modal [class*="bg-indigo-500"],
#ms-studio-master-modal [class*="bg-indigo-600"],
#ms-studio-master-modal [class*="bg-sky-600"] { color: #fff !important; }
#ms-studio-master-modal button[class*="bg-blue-"],
#ms-studio-master-modal button[class*="bg-indigo-"],
#ms-studio-master-modal button[class*="bg-sky-"] { text-shadow: 0 1px 1px rgba(0,0,0,.18); }
#ms-studio-master-modal .studio-gif-panel { border-top: 1px solid #dbe3ef; padding-top: 14px; display: grid; gap: 10px; }
#ms-studio-master-modal .studio-gif-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ms-studio-master-modal .studio-gif-heading h4 { margin: 0; color: #0369a1; font: 900 11px/1.2 ui-sans-serif, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#ms-studio-master-modal .studio-gif-heading span { color: #64748b; font: 700 9px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#ms-studio-master-modal .studio-gif-card, #ms-studio-master-modal .studio-gif-result { min-width: 0; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 12px; background: #fff; color: #334155; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#ms-studio-master-modal .studio-gif-card:hover, #ms-studio-master-modal .studio-gif-result:hover { border-color: #60a5fa; box-shadow: 0 5px 14px rgba(37,99,235,.14); transform: translateY(-1px); }
#ms-studio-master-modal .studio-gif-card img, #ms-studio-master-modal .studio-gif-result-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e8eef6; }
#ms-studio-master-modal .studio-gif-card span, #ms-studio-master-modal .studio-gif-result-title { display: block; overflow: hidden; padding: 6px 7px; color: #334155; font: 800 9px/1.1 ui-sans-serif, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
#ms-studio-master-modal .studio-gif-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
#ms-studio-master-modal .studio-gif-search-row input, #ms-studio-master-modal .studio-gif-search-row select, #ms-studio-master-modal .studio-gif-paste input { min-width: 0; height: 36px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a; padding: 0 10px; font: 700 11px/1 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-search-row input::placeholder, #ms-studio-master-modal .studio-gif-paste input::placeholder { color: #64748b; }
#ms-studio-master-modal .studio-gif-search-row button, #ms-studio-master-modal .studio-gif-paste button { min-height: 36px; border: 0; border-radius: 10px; background: #2563eb; color: #fff; padding: 0 13px; font: 900 11px/1 ui-sans-serif, sans-serif; cursor: pointer; }
#ms-studio-master-modal .studio-gif-search-row button:hover, #ms-studio-master-modal .studio-gif-paste button:hover { background: #1d4ed8; }
#ms-studio-master-modal .studio-gif-quick-label { color: #64748b; font: 900 9px/1 ui-sans-serif, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
#ms-studio-master-modal .studio-gif-filters { display: flex; flex-wrap: wrap; gap: 6px; max-height: 116px; overflow-y: auto; padding: 2px; }
#ms-studio-master-modal .studio-gif-filter { border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; color: #334155; padding: 6px 9px; font: 800 9px/1 ui-sans-serif, sans-serif; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
#ms-studio-master-modal .studio-gif-filter:hover { border-color: #60a5fa; background: #eff6ff; color: #1d4ed8; }
#ms-studio-master-modal .studio-gif-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
#ms-studio-master-modal .studio-gif-paste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
#ms-studio-master-modal .studio-gif-status { grid-column: 1 / -1; padding: 10px; border: 1px solid #cbd5e1; border-radius: 10px; color: #64748b; background: #f8fafc; font: 700 10px/1.4 ui-sans-serif, sans-serif; }
#ms-studio-master-modal .studio-gif-status-error { border-color: #fbbf24; color: #92400e; background: #fffbeb; }
#ms-studio-master-modal .studio-gif-status-error span { color: #a16207; }
@media (max-width: 768px) {
  #ms-studio-master-modal { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
  #ms-studio-master-modal .studio-header-stack { min-height: 0; }
  /* The bar wraps into two rows from 1600px down — see that breakpoint above.
     A phone only tightens it: no fixed height, less padding, smaller type. */
  #ms-studio-master-modal .studio-identity-bar { align-content: center; min-height: 0; padding: 5px 8px !important; }
  #ms-studio-master-modal .studio-identity-main { gap: 6px !important; }
  #ms-studio-master-modal .studio-menubar { gap: 2px !important; }
  /* Keep the mobile chrome finger-sized. The row may scroll horizontally;
     controls do not shrink below a 44px target just to fit the viewport. */
  #ms-studio-master-modal .studio-menu-button { min-height:44px; padding: 9px 7px !important; font-size: 11.5px !important; }
  #ms-studio-master-modal .studio-menubar .studio-mobile-panel-button { min-height:44px; padding: 9px 8px !important; font-size: 11.5px !important; }
  /* A dropdown anchored to its own button runs off the right edge on a phone
     (Share sits ~60px from it and the panel is 232px wide). Anchor the panel
     to the whole menu row instead, so every menu opens as one full-width sheet
     directly under the row that spawned it. */
  #ms-studio-master-modal .studio-menubar { position: relative; }
  #ms-studio-master-modal .studio-menu { position: static; }
  #ms-studio-master-modal .studio-menu-panel {
    left: 0; right: 0; min-width: 0; max-height: 62vh; overflow-y: auto;
  }
  #ms-studio-master-modal .studio-back-long,
  #ms-studio-master-modal .studio-brand-divider,
  #ms-studio-master-modal .studio-brand-logo { display: none !important; }
  #ms-studio-master-modal .studio-back-short { display: inline; }
  #ms-studio-master-modal .studio-identity-bar input { flex: 1 1 110px; width: auto; min-width: 70px; max-width: none; font-size: 13px !important; }
  #ms-studio-master-modal .studio-identity-bar button { flex: 0 0 auto; white-space: nowrap; line-height: 1.15; }
  #ms-studio-master-modal .studio-title-badge { flex: 0 0 auto; }
  #ms-studio-master-modal #studio-save-status { flex: 0 0 auto; padding-inline: 6px; }
  #ms-studio-master-modal [role="tablist"][aria-label="Design Studio"] { display: none !important; }
  #ms-studio-master-modal .studio-mobile-panel-button { display: inline-flex; align-items: center; justify-content: center; }
  #ms-studio-master-modal .studio-mobile-action { display: inline-flex; align-items: center; justify-content: center; }
  #ms-studio-master-modal .studio-command-bar { height: 52px !important; min-height: 52px; padding: 5px 8px !important; gap: 6px !important; overflow: hidden; }
  #ms-studio-master-modal .studio-command-scroll { flex: 0 0 auto; min-width: 0; overflow: visible; padding: 0; }
  #ms-studio-master-modal .studio-command-scroll > :not(.studio-zoom-controls) { display: none !important; }
  #ms-studio-master-modal .studio-zoom-controls { min-height:44px; height:44px; padding: 2px !important; }
  #ms-studio-master-modal .studio-zoom-controls button { min-width:44px; min-height:44px; padding: 5px 7px !important; }
  #ms-studio-master-modal .studio-zoom-controls #studio-zoom-display { min-width: 40px; padding: 0 4px !important; text-align: center; }
  #ms-studio-master-modal .studio-primary-actions { width: auto; padding: 0; border-left: 0; overflow: visible; justify-content: flex-end; gap: 5px !important; }
  #ms-studio-master-modal .studio-primary-actions .studio-desktop-action { display: none !important; }
  #ms-studio-master-modal .studio-primary-actions > button { min-height:44px; min-width:44px; padding:7px 10px !important; }
  #ms-studio-master-modal .studio-workspace-body { display: flex !important; flex-direction: column; position: relative; overflow: hidden !important; min-height: 0; }
  #ms-studio-master-modal .studio-workspace-body > [data-studio-region="rail"] { display: flex !important; flex-direction: row; align-items: flex-start; gap: 4px; width: 100% !important; height: calc(64px + env(safe-area-inset-bottom)); min-height: calc(64px + env(safe-area-inset-bottom)); padding: 3px 7px max(3px,env(safe-area-inset-bottom)); overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 0; border-top: 1px solid #dbe3ef; order: 2; z-index: 30; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(18px) saturate(1.35); }
  #ms-studio-master-modal .studio-workspace-body > [data-studio-region="rail"] button { flex: 0 0 64px; width: 64px; height: 56px; min-height: 56px; padding: 3px 2px; white-space: nowrap; font-size: 10px; }
  #ms-studio-master-modal #studio-canvas-viewport { position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; overflow: auto; padding: 38px 12px calc(24px + env(safe-area-inset-bottom)); order: 1; overscroll-behavior: contain; }
  #ms-studio-master-modal .studio-page-stack { display: none !important; }
  #ms-studio-master-modal .studio-page-stage-label { left: 12px; top: 12px; }
  #ms-studio-master-modal .studio-page-stage-actions button { width:44px; height:44px; min-width:44px; min-height:44px; border-radius:10px; font-size:16px; line-height:44px; }
  #ms-studio-master-modal .studio-identity-bar button,
  #ms-studio-master-modal .studio-inspector-heading>button,
  #ms-studio-master-modal .studio-delete-action,
  #ms-studio-master-modal .studio-control-action { min-height:44px; }
  /* The artboard is laid out by its stage now, at every width. Re-absolute-ing
     it here would take it back out of the flow and undo the scrolling. */
  #ms-studio-master-modal #studio-artboard-container { max-width: none; }
  #ms-studio-master-modal .studio-mobile-drawer-open .studio-mobile-scrim,
  #ms-studio-master-modal.studio-mobile-drawer-open .studio-mobile-scrim { display: block; position: absolute; inset: 0; z-index: 45; border: 0; background: rgba(2,6,23,.48); backdrop-filter: blur(2px); }
  /* Tools = left drawer. Inspector = bottom sheet. Keep CSS aligned with mobile JS. */
  #ms-studio-master-modal #studio-tool-panel {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(88vw, 340px) !important; max-width: 340px; height: auto;
    z-index: 50; box-shadow: 0 18px 45px rgba(15,23,42,.28);
    transform: translateX(-105%); transition: transform .2s ease;
  }
  #ms-studio-master-modal #studio-inspector-panel {
    position: absolute; left: 0; right: 0; top: auto; bottom: 0;
    width: 100% !important; max-width: none !important; height: auto; max-height: 45vh;
    z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-left: 0 !important; border-top: 1px solid #e2e8f0;
    box-shadow: 0 -12px 34px rgba(15,23,42,.24);
    transform: translateY(105%); transition: transform .2s ease;
  }
  #ms-studio-master-modal #studio-tool-panel.ms-studio-mobile-open { transform: translateX(0); }
  #ms-studio-master-modal #studio-inspector-panel.ms-studio-mobile-open { transform: translateY(0); }
  /* The footer's "+ Page" button is replaced at runtime (studio-page-thumbs.js)
     by two stacked thumbnail buttons — a 42px preview above its label, 57px
     tall. In a 50px bar with overflow:hidden the words "Duplicate" and
     "Add page" were sliced in half. Shrink the thumbnails to a phone size and
     give the bar the few pixels they still need. */
  #ms-studio-master-modal > footer { min-height: 58px; height: 58px !important; padding: 5px 10px !important; flex-wrap: nowrap; overflow: hidden; }
  #ms-studio-master-modal .studio-page-thumb { gap: 3px; font-size: 9px; }
  #ms-studio-master-modal .studio-page-thumb-canvas { width: 30px; height: 30px; }
  #ms-studio-master-modal .studio-page-thumb-canvas.is-wide { width: 38px; height: 22px; }
  #ms-studio-master-modal .studio-page-thumb-canvas.is-tall { width: 22px; height: 38px; }
  #ms-studio-master-modal > footer .studio-footer-text-control { display: none !important; }
  #ms-studio-master-modal > footer select { flex: 1 1 auto; max-width: none; }
  #ms-studio-master-modal .w-60 { width: min(86vw, 330px) !important; }
}

/* The Studio owns its dark surfaces. Utility classes alone cannot override the
 * deliberately strong light-workspace rules above, so dark mode gets an equally
 * explicit palette without recolouring the artwork inside template previews. */
.dark #ms-studio-master-modal { background: #07101f !important; color: #e7eef8 !important; }
.dark #ms-studio-master-modal .studio-header-stack > nav,
.dark #ms-studio-master-modal .studio-command-bar,
.dark #ms-studio-master-modal [data-studio-region="rail"],
.dark #ms-studio-master-modal [data-studio-region="drawer"],
.dark #ms-studio-master-modal [data-studio-region="inspector"],
.dark #ms-studio-master-modal [data-studio-region="footer"] { background: rgba(13,23,41,.98) !important; border-color: #293c5b !important; color: #e7eef8 !important; }
.dark #ms-studio-master-modal [data-studio-region="canvas"] { background-color: #07101f !important; background-image: radial-gradient(#263a58 1px, transparent 1px) !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button { color: #b8c7dc !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button:hover,
.dark #ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] { color: #f8fafc !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button .studio-tool-icon { color: #93a4ba !important; }
.dark #ms-studio-master-modal .studio-tool-rail-button[aria-current="page"] .studio-tool-icon { color: #60a5fa !important; }
.dark #ms-studio-master-modal #studio-tool-panel { color: #e5edf8 !important; }
.dark #ms-studio-master-modal #studio-tool-panel input,
.dark #ms-studio-master-modal #studio-tool-panel select,
.dark #ms-studio-master-modal #studio-tool-panel textarea { background: #091426 !important; color: #f8fafc !important; border-color: #344866 !important; }
.dark #ms-studio-master-modal #studio-tool-panel input::placeholder,
.dark #ms-studio-master-modal #studio-tool-panel textarea::placeholder { color: #8fa0b7 !important; }
.dark #ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-100"],
.dark #ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-50"],
.dark #ms-studio-master-modal #studio-tool-panel button[class*="bg-slate-800"] { background: #182740 !important; color: #e7eef8 !important; border-color: #344866 !important; }
.dark #ms-studio-master-modal #studio-tool-panel button[class*="bg-indigo-500/20"] { background: #1e3053 !important; color: #93c5fd !important; }
.dark #ms-studio-master-modal #studio-tool-panel .text-slate-900,
.dark #ms-studio-master-modal #studio-tool-panel .text-slate-300 { color: #e7eef8 !important; }
.dark #ms-studio-master-modal #studio-tool-panel .text-slate-500,
.dark #ms-studio-master-modal #studio-tool-panel .text-slate-400 { color: #9aabc1 !important; }
.dark #ms-studio-master-modal .studio-template-card,
.dark #ms-studio-master-modal .studio-element-card,
.dark #ms-studio-master-modal .studio-text-template-card,
.dark #ms-studio-master-modal .studio-gif-card,
.dark #ms-studio-master-modal .studio-gif-result { background: #111d32 !important; color: #e7eef8 !important; border-color: #2d405f !important; }
.dark #ms-studio-master-modal .studio-template-card .text-slate-900,
.dark #ms-studio-master-modal .studio-element-card .text-slate-900,
.dark #ms-studio-master-modal .studio-text-template-card .text-slate-900,
.dark #ms-studio-master-modal .studio-gif-card span,
.dark #ms-studio-master-modal .studio-gif-result-title { color: #e7eef8 !important; }
.dark #ms-studio-master-modal .studio-gif-search-row input,
.dark #ms-studio-master-modal .studio-gif-search-row select,
.dark #ms-studio-master-modal .studio-gif-paste input { background: #091426; color: #f8fafc; border-color: #344866; }
.dark #ms-studio-master-modal .studio-gif-filter { background: #15243b; color: #cbd5e1; border-color: #344866; }
.dark #ms-studio-master-modal .studio-upload-dropzone { background: linear-gradient(145deg, #101d32, #0a1527); border-color: #415574; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.dark #ms-studio-master-modal .studio-upload-action { background: #182740; color: #bfdbfe; border-color: #415574; }
.dark #ms-studio-master-modal .studio-upload-action-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.dark #ms-studio-master-modal .studio-shape-colour-row label { color: #b8c7dc; }
.dark #ms-studio-master-modal .studio-catalog-heading b,
.dark #ms-studio-master-modal .studio-catalog-card-copy b { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-catalog-heading span,
.dark #ms-studio-master-modal .studio-catalog-card-copy span,
.dark #ms-studio-master-modal .studio-icon-card small { color:#9aabc1; }
.dark #ms-studio-master-modal .studio-catalog-more,
.dark #ms-studio-master-modal .studio-category-chip,
.dark #ms-studio-master-modal .studio-category-pill,
.dark #ms-studio-master-modal .studio-magic-write { background:#111d32; color:#cbd5e1; border-color:#344866; }
.dark #ms-studio-master-modal .studio-category-chip[aria-current="true"] { background:#1e3053; color:#93c5fd; border-color:#60a5fa; }
.dark #ms-studio-master-modal .studio-category-pill[aria-current="true"] { background:#2563eb; color:#fff; border-color:#60a5fa; }
.dark #ms-studio-master-modal .studio-element-category b { color:#dbeafe; }
.dark #ms-studio-master-modal .studio-element-search { background:#091426; color:#8fa0b7; border-color:#344866; }
.dark #ms-studio-master-modal .studio-element-recent { background:#15243b; border-color:#344866; }
.dark #ms-studio-master-modal .studio-visual-element-preview { background:#e5e7eb; }
.dark #ms-studio-master-modal .studio-icon-card:hover { background:#182740; border-color:#3b82f6; }
.dark #ms-studio-master-modal .studio-text-template-preview { background:#e5e7eb; }
.dark #ms-studio-master-modal .studio-magic-write summary { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-magic-write[open] summary { border-color:#344866; }
.dark #ms-studio-master-modal [data-studio-region="footer"] button,
.dark #ms-studio-master-modal [data-studio-region="footer"] select { color: #e7eef8 !important; }
/* Three things in this bar set their own light background with !important and
   had no dark counterpart, so they stayed bright white on the dark bar: the
   "+ Heading" button (deliberately white in the light workspace) and the two
   page thumbnails, whose white paper preview is painted by
   studio-page-thumbs.js. On a dark footer a white chip is not a highlight, it
   is a hole. */
.dark #ms-studio-master-modal [data-studio-region="footer"] button.studio-footer-heading-button {
  background: #17263f !important; color: #bfdbfe !important; border-color: #33507d !important;
}
.dark #ms-studio-master-modal [data-studio-region="footer"] button.studio-footer-heading-button:hover {
  background: #1e3355 !important;
}
.dark #ms-studio-master-modal .studio-page-thumb-canvas {
  background: #1b2942 !important; border-color: #33507d !important;
}
.dark #ms-studio-master-modal .studio-page-thumb-canvas.is-add:after { color: #93a7c4 !important; }
/* One rule, not two: the duplicate chip's "second sheet" is a corner drawn
   entirely with box-shadow in the paper colour, so its colour and that shadow
   have to move to the dark palette together. */
.dark #ms-studio-master-modal .studio-page-thumb-canvas.is-dup:after {
  color: #93a7c4 !important;
  background: #1b2942 !important;
  box-shadow: -4px -4px 0 -1.5px #1b2942, -4px -4px 0 0 #93a7c4 !important;
}
.dark #ms-studio-master-modal .studio-page-thumb { color: #cbd5e1 !important; }
.dark #ms-studio-master-modal .studio-page-card { color: #cbd5e1; }
@media (max-width: 768px) {
  .dark #ms-studio-master-modal .studio-workspace-body > [data-studio-region="rail"] { background: rgba(13,23,41,.98) !important; border-color: #293c5b !important; }
}

/* ── Design Studio · mobile content polish ──────────────────────────────
   Workspace geometry has ONE owner: the earlier phone contract defines
   header → canvas → horizontal tool rail → footer, with Tools as a left drawer
   and Inspector as an animated bottom sheet. Keep this later block limited to
   touch targets and catalog density so source order cannot turn the rail or
   inspector into sticky document-flow regions. */
@media (max-width: 768px) {
  #ms-studio-master-modal { touch-action: manipulation; }
  /* Tap targets: 44px minimum per Apple HIG. */
  #ms-studio-master-modal .studio-tool-rail-button,
  #ms-studio-master-modal .studio-category-pill,
  #ms-studio-master-modal .studio-element-card,
  #ms-studio-master-modal .studio-text-template-card {
    min-height: 44px;
  }
  /* Element catalog: 3-column on phone (was 6+), so cards are tappable. */
  #ms-studio-master-modal #studio-premade-library {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  /* Templates grid on the home screen: 2-up so previews are large enough
     to identify without pinch-zooming. */
  #ms-studio-master-modal #studio-home-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  #ms-studio-master-modal #studio-premade-library {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Design Studio · header / toolbar chrome on phones ─────────────────
   Fixes to reported bugs:
     • "Desk a" — the Desktop/Tablet/Mobile breakpoint switcher was
       overflowing and reading as "Desk a" when clipped. That control
       is a preview-desktop-layout-from-desktop feature; on a phone
       there is nothing to preview — hide it.
     • "Demo" pill overlapping the design name — that's the DealerOS
       mode pill bleeding above the studio modal on mobile. Suppress
       it inside the studio.
     • Header cluttered and UNSAVED clipped — collapse the studio
       identity strip: hide the brand logo and the STUDIO badge on
       phones, shrink the name input, keep the save status visible.
     • Toolbar packed too tight — drop history/review/AI/export/publish
       into the mobile "Tools" panel; keep only Save + Publish visible.
*/
@media (max-width: 768px) {
  /* Kill the DealerOS mode-switch pill inside the studio modal — it
     doesn't belong here and it collides with the design name input. */
  #ms-studio-master-modal #ms-mode-switch { display: none !important; }
  /* Same for the DealerOS demo-reset link. */
  #ms-studio-master-modal #ms-demo-reset { display: none !important; }
  /* Hide the breakpoint device switcher — nothing to preview on a phone. */
  #ms-studio-master-modal .studio-command-scroll > div[title*="breakpoint" i] { display: none !important; }
  /* Hide desktop-only marketing widgets in the toolbar — they don't fit
     on a phone and every one of them is available inside the Tools panel. */
  #ms-studio-master-modal .studio-desktop-action { display: none !important; }
  /* Trim the identity bar: hide the brand logo + the STUDIO badge so
     the Back button, design name and UNSAVED indicator have room. The
     brand mark still lives at /apps/design-studio.html above the frame. */
  #ms-studio-master-modal .studio-brand-logo,
  #ms-studio-master-modal .studio-brand-divider,
  #ms-studio-master-modal .studio-title-badge,
  #ms-studio-master-modal .studio-back-long { display: none !important; }
  #ms-studio-master-modal .studio-back-short { display: inline !important; }
  /* Design-name input: cap width so UNSAVED stays visible; ellipsis on
     overflow rather than pushing the badge off-screen. */
  #ms-studio-master-modal #studio-design-name {
    max-width: 40vw;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  /* Identity bar horizontal padding: less on mobile so nothing overflows. */
  #ms-studio-master-modal .studio-identity-bar { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  #ms-studio-master-modal .studio-identity-main { gap: 0.5rem !important; min-width: 0; }
  /* Tabs nav must scroll cleanly, not clip its rightmost item. */
  #ms-studio-master-modal nav[role="tablist"] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #ms-studio-master-modal nav[role="tablist"]::-webkit-scrollbar { display: none; }
  /* Command bar: also less padding + scroll-snap so panning stops on
     button boundaries instead of mid-icon. */
  #ms-studio-master-modal .studio-command-bar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 0.5rem !important;
  }
  #ms-studio-master-modal .studio-command-scroll {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #ms-studio-master-modal .studio-command-scroll::-webkit-scrollbar { display: none; }
  #ms-studio-master-modal .studio-command-scroll > * { scroll-snap-align: start; }
  /* Save status badge — keep it visible instead of shoved off-screen. */
  #ms-studio-master-modal #studio-save-status { flex-shrink: 0; }

  /* Inspector body: previously undefined classes rendered as raw
     inline text (screenshot showed labels run together as
     "shapeCya×StylePositAppearan…"). Give every inspector class
     real block layout + spacing so the drawer reads correctly. */
  #ms-studio-master-modal #studio-inspector-panel {
    padding: 0 !important;
    background: var(--app-surface, #fff);
    color: var(--app-text, #0f172a);
  }

  /* Studio home / size picker: turn every `.studio-scroll-row` grid
     (Digital marketing formats, Design sets, size-picker rows) into
     a horizontal swipe row. Each tile becomes a fixed-width card so
     one thumb-swipe pans the whole category instead of scrolling
     through 20 stacked rows. Desktop is untouched — the grid classes
     from Tailwind only kick in at sm/lg/xl breakpoints. */
  .studio-scroll-row {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.75rem !important;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .studio-scroll-row::-webkit-scrollbar { display: none; }
  .studio-scroll-row > * {
    flex: 0 0 auto;
    width: 62vw;
    max-width: 240px;
    scroll-snap-align: start;
  }
  .studio-scroll-row > .studio-home-set-card {
    width: 78vw;
    max-width: 320px;
  }
}

/* ── Design Studio · Inspector primitives ─────────────────────────────
   The inspector classes (.studio-inspector-heading / -tabs / -body /
   -section, .studio-control-*, .studio-segmented, .studio-align-grid,
   .studio-animation-grid, .studio-style-presets) had ZERO CSS. That's
   the reason a mobile screenshot showed labels running together as
   "shapeCya×StylePositAppearan…" — the browser rendered raw inline
   text with no block layout. Every class below now has real block
   layout, padding, and spacing so the inspector reads correctly on
   every viewport. Desktop + mobile share the same primitives; the
   mobile drawer positioning already exists above. */

#ms-studio-master-modal .studio-inspector-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: #64748b;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
#ms-studio-master-modal .studio-inspector-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: #eef2ff; color: #4f46e5; font-size: 20px; font-weight: 900;
}
#ms-studio-master-modal .studio-inspector-empty strong { font-size: .875rem; font-weight: 800; color: #0f172a; }
#ms-studio-master-modal .studio-inspector-empty p { font-size: .75rem; margin: 0; }
.dark #ms-studio-master-modal .studio-inspector-empty strong { color: #e7eef8; }

#ms-studio-master-modal .studio-inspector-heading {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid #e2e8f0;
}
.dark #ms-studio-master-modal .studio-inspector-heading { border-color: #293c5b; }
#ms-studio-master-modal .studio-inspector-heading > div {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto;
}
#ms-studio-master-modal .studio-inspector-heading > div > span {
  font-size: .625rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b;
}
#ms-studio-master-modal .studio-inspector-heading > div > input {
  border: 0; padding: 0; background: transparent;
  font-size: .9375rem; font-weight: 800; color: #0f172a;
  outline: none; width: 100%; min-width: 0;
}
.dark #ms-studio-master-modal .studio-inspector-heading > div > input { color: #e7eef8; }
#ms-studio-master-modal .studio-inspector-heading > button {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: #f1f5f9; color: #475569;
  font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
}

#ms-studio-master-modal .studio-inspector-tabs {
  display: flex; gap: .25rem;
  padding: .5rem .75rem 0;
  border-bottom: 1px solid #e2e8f0;
}
.dark #ms-studio-master-modal .studio-inspector-tabs { border-color: #293c5b; }
#ms-studio-master-modal .studio-inspector-tabs > button {
  flex: 1 1 auto; padding: .625rem .5rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: .75rem; font-weight: 800; color: #64748b;
  border-bottom: 2px solid transparent;
}
#ms-studio-master-modal .studio-inspector-tabs > button[aria-current="page"] {
  color: #2563eb; border-bottom-color: #2563eb;
}
.dark #ms-studio-master-modal .studio-inspector-tabs > button[aria-current="page"] { color: #60a5fa; border-bottom-color: #60a5fa; }

#ms-studio-master-modal .studio-inspector-body {
  padding: .75rem 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}
#ms-studio-master-modal .studio-inspector-section {
  display: flex; flex-direction: column; gap: .625rem;
}
#ms-studio-master-modal .studio-inspector-section h4 {
  font-size: .625rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b; margin: 0;
}
#ms-studio-master-modal .studio-inspector-section label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .6875rem; font-weight: 700; color: #475569;
}
.dark #ms-studio-master-modal .studio-inspector-section label { color: #cbd5e1; }
#ms-studio-master-modal .studio-inspector-section label > input:not([type="color"]):not([type="range"]),
#ms-studio-master-modal .studio-control-input {
  padding: .5rem .625rem;
  border-radius: .5rem; border: 1px solid #cbd5e1;
  background: #fff; color: #0f172a;
  font-size: .8125rem; font-weight: 600;
  min-height: 36px;
}
.dark #ms-studio-master-modal .studio-inspector-section label > input:not([type="color"]):not([type="range"]),
.dark #ms-studio-master-modal .studio-control-input { background: #0f1e35; border-color: #293c5b; color: #e7eef8; }
#ms-studio-master-modal .studio-inspector-section label > input[type="color"] {
  width: 100%; height: 40px; padding: 0;
  border-radius: .5rem; border: 1px solid #cbd5e1; cursor: pointer;
}
#ms-studio-master-modal .studio-inspector-section label > input[type="range"] {
  width: 100%;
}
#ms-studio-master-modal .studio-control-grid {
  display: grid; gap: .5rem;
}
#ms-studio-master-modal .studio-control-grid-2 { grid-template-columns: 1fr 1fr; }
#ms-studio-master-modal .studio-control-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
#ms-studio-master-modal .studio-control-label-row { display: flex; justify-content: space-between; align-items: baseline; }
#ms-studio-master-modal .studio-control-help { font-size: .6875rem; color: #64748b; margin: 0; }
#ms-studio-master-modal .studio-control-unit { font-size: .625rem; color: #64748b; }

/* Background panel: a swatch grid, same tap-first idea as the Fill sheet. */
#ms-studio-master-modal .studio-bg-swatch-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
#ms-studio-master-modal .studio-bg-swatch { aspect-ratio: 1; border-radius: 7px; border: 1px solid rgba(15,23,42,.14); padding: 0; cursor: pointer; }
#ms-studio-master-modal .studio-bg-swatch[aria-pressed="true"] { outline: 2.5px solid #2563eb; outline-offset: 2px; }
#ms-studio-master-modal .studio-bg-fit { padding: .5rem .5rem; border-radius: .75rem; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font: 900 11px/1 ui-sans-serif, sans-serif; cursor: pointer; }
#ms-studio-master-modal .studio-bg-fit[aria-pressed="true"] { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.dark #ms-studio-master-modal .studio-bg-swatch { border-color: rgba(255,255,255,.22); }
.dark #ms-studio-master-modal .studio-bg-fit { border-color: #334155; background: #1e293b; color: #e2e8f0; }
.dark #ms-studio-master-modal .studio-bg-fit[aria-pressed="true"] { border-color: #3b82f6; color: #93c5fd; background: #1e3a8a33; }
#ms-studio-master-modal .studio-control-action {
  padding: .5rem .75rem;
  border-radius: .5rem; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #0f172a;
  font-size: .75rem; font-weight: 700; cursor: pointer;
  min-height: 36px;
}
.dark #ms-studio-master-modal .studio-control-action { background: #111d32; border-color: #293c5b; color: #e7eef8; }
#ms-studio-master-modal .studio-segmented,
#ms-studio-master-modal .studio-align-grid,
#ms-studio-master-modal .studio-animation-grid,
#ms-studio-master-modal .studio-style-presets {
  display: grid; gap: .375rem;
}
#ms-studio-master-modal .studio-segmented { grid-template-columns: 1fr 1fr 1fr 1fr; }
#ms-studio-master-modal .studio-align-grid { grid-template-columns: 1fr 1fr 1fr; }
#ms-studio-master-modal .studio-animation-grid { grid-template-columns: 1fr 1fr 1fr; }
#ms-studio-master-modal .studio-style-presets { grid-template-columns: 1fr 1fr 1fr 1fr; }
#ms-studio-master-modal .studio-segmented > button,
#ms-studio-master-modal .studio-align-grid > button,
#ms-studio-master-modal .studio-animation-grid > button,
#ms-studio-master-modal .studio-style-presets > button {
  padding: .5rem .375rem;
  border-radius: .5rem; border: 1px solid #e2e8f0;
  background: #f8fafc; color: #0f172a;
  font-size: .6875rem; font-weight: 700; cursor: pointer;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
}
.dark #ms-studio-master-modal .studio-segmented > button,
.dark #ms-studio-master-modal .studio-align-grid > button,
.dark #ms-studio-master-modal .studio-animation-grid > button,
.dark #ms-studio-master-modal .studio-style-presets > button { background: #111d32; border-color: #293c5b; color: #e7eef8; }
#ms-studio-master-modal .studio-segmented > button[aria-current="page"],
#ms-studio-master-modal .studio-animation-grid > button[aria-current="page"] {
  background: #2563eb; color: #fff; border-color: #2563eb;
}
#ms-studio-master-modal .studio-inspector-actions { border-top: 1px solid #e2e8f0; padding-top: 1rem; }
.dark #ms-studio-master-modal .studio-inspector-actions { border-color: #293c5b; }
#ms-studio-master-modal .studio-delete-action {
  width: 100%; padding: .625rem;
  border-radius: .5rem; border: 0;
  background: #fef2f2; color: #dc2626;
  font-size: .75rem; font-weight: 800; cursor: pointer;
  margin-top: .5rem; min-height: 40px;
}
.dark #ms-studio-master-modal .studio-delete-action { background: rgba(220,38,38,.15); color: #f87171; }

/* ==========================================================================
   BLOCK LIBRARY (#ws-palette) — follow the builder theme, not a fixed dark
   ==========================================================================
   The palette's markup is written in unconditional dark Tailwind
   (bg-slate-950 / bg-slate-900 / border-slate-800 / text-slate-400), with no
   `dark:` prefix and no --ws-* token, so it stayed black while the rest of the
   builder was in light mode — reported as "when I click add sections ... it is
   in dark mode". The inspector and drawers were already themed this way; the
   palette was simply never included.
   ========================================================================== */
[data-ws-theme] #ws-palette {
  background-color: var(--ws-panel) !important;
  border-color: var(--ws-border) !important;
  color: var(--ws-text) !important;
}
[data-ws-theme] #ws-palette .bg-slate-900,
[data-ws-theme] #ws-palette input,
[data-ws-theme] #ws-palette button.bg-slate-800 {
  background-color: var(--ws-panel-raised) !important;
  border-color: var(--ws-border) !important;
  color: var(--ws-text) !important;
}
/* Block cards: raised surface, readable title, muted description. */
[data-ws-theme] #ws-palette #ws-palette-grid > button {
  background-color: var(--ws-panel-raised) !important;
  border-color: var(--ws-border) !important;
}
[data-ws-theme] #ws-palette .text-slate-100,
[data-ws-theme] #ws-palette .text-slate-200 {
  color: var(--ws-text) !important;
}
[data-ws-theme] #ws-palette .text-slate-400 {
  color: var(--ws-text-muted) !important;
}
/* The one control that must stay indigo-on-white: the active category pill. */
[data-ws-theme] #ws-palette button.bg-indigo-600 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
}
/* Reusable-sections card keeps its indigo tint but on the themed surface. */
[data-ws-theme] #ws-palette .bg-slate-900\/70 {
  background-color: var(--ws-panel-raised) !important;
}

/* ==========================================================================
   STUDIO ICON FALLBACKS — a missing icon must look like something
   ==========================================================================
   Every icon in Design Studio is fetched live from api.iconify.design, and the
   tiles used to answer a failed fetch with onerror="this.remove()": the <img>
   deleted itself and left an empty coloured square with a caption. Twelve blank
   swatches under "Browse categories", with nothing saying an asset was missing.

   A mark now sits behind each image and is revealed whenever the image is not
   there — on failure, and while it is still loading. .is-loaded is set by the
   img's own onload handler, matching .studio-icon-visual, which already worked
   this way.
   ========================================================================== */
#ms-studio-master-modal .studio-category-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#ms-studio-master-modal .studio-category-fallback {
  font-style: normal;
  font-size: 19px;
  line-height: 1;
  color: var(--category-color, #475569);
  opacity: .85;
}
/* Once the real artwork arrives the mark steps aside. */
#ms-studio-master-modal .studio-category-visual.is-loaded .studio-category-fallback {
  display: none;
}
/* The image is absent until it loads, so the mark is not pushed off-centre. */
#ms-studio-master-modal .studio-category-visual img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
#ms-studio-master-modal .studio-category-visual:not(.is-loaded) img {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* ── Design Studio: the Frames browser ──────────────────────────────────────
   A row per category rather than one long grid: heading left, "See all" right,
   the first six frames scrolling sideways. The card art is the real mask over a
   placeholder, so what you tap is the crop you get. Sizes are fixed so a row of
   wildly different aspect ratios still reads as a row. */
#ms-studio-master-modal .studio-frame-search { margin-bottom: 10px; }
#ms-studio-master-modal .studio-frame-scroll { max-height: 56vh; padding-right: 2px; }
#ms-studio-master-modal .studio-frame-section { margin-bottom: 14px; }
#ms-studio-master-modal .studio-frame-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
#ms-studio-master-modal .studio-frame-section-head b { color:#1e293b; font:900 11px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-frame-seeall { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border:1px solid #dbe3ef; border-radius:999px; background:#fff; color:#2563eb; font:800 9px/1.2 ui-sans-serif,sans-serif; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
#ms-studio-master-modal .studio-frame-seeall:hover { border-color:#60a5fa; background:#eff6ff; }
#ms-studio-master-modal .studio-frame-seeall span { padding:0 5px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-weight:900; }
/* The row scrolls sideways; it never wraps, so a category stays one line. */
#ms-studio-master-modal .studio-frame-row { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 6px; scroll-snap-type:x proximity; scrollbar-width:thin; }
#ms-studio-master-modal .studio-frame-row > * { flex:0 0 102px; scroll-snap-align:start; }
#ms-studio-master-modal .studio-frame-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#ms-studio-master-modal .studio-frame-card { min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px 5px; border:1px solid #dbe3ef; border-radius:14px; background:#fff; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
#ms-studio-master-modal .studio-frame-card:hover { border-color:#60a5fa; box-shadow:0 9px 20px rgba(37,99,235,.12); transform:translateY(-1px); }
#ms-studio-master-modal .studio-frame-card:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
#ms-studio-master-modal .studio-frame-card-art { display:flex; align-items:center; justify-content:center; width:100%; height:82px; overflow:hidden; border-radius:10px; background:#f3f4f6; }
#ms-studio-master-modal .studio-frame-card-art svg { max-width:100%; max-height:100%; width:auto; height:auto; }
#ms-studio-master-modal .studio-featured-layouts { display:grid; gap:8px; margin:0 0 12px; }
#ms-studio-master-modal .studio-featured-layouts-head > div { display:grid; gap:2px; }
#ms-studio-master-modal .studio-featured-layouts-head b { font:800 10px/1.2 ui-sans-serif,sans-serif; color:#334155; }
#ms-studio-master-modal .studio-featured-layouts-head span { font:500 9px/1.3 ui-sans-serif,sans-serif; color:#64748b; }
#ms-studio-master-modal .studio-featured-layout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#ms-studio-master-modal .studio-featured-layout-grid > button { min-width:0; display:grid; gap:6px; padding:8px; border:1px solid #dbe3ef; border-radius:12px; background:#fff; text-align:left; cursor:pointer; }
#ms-studio-master-modal .studio-featured-layout-grid > button:hover { border-color:#60a5fa; box-shadow:0 8px 18px rgba(37,99,235,.10); }
#ms-studio-master-modal .studio-featured-layout-preview { display:flex; align-items:center; justify-content:center; min-height:70px; border-radius:9px; background:#f3f4f6; overflow:hidden; }
#ms-studio-master-modal .studio-featured-layout-preview svg { max-width:100%; max-height:70px; }
#ms-studio-master-modal .studio-featured-layout-grid > button > span:last-child { display:grid; gap:1px; }
#ms-studio-master-modal .studio-featured-layout-grid > button b { font:800 9px/1.2 ui-sans-serif,sans-serif; color:#334155; }
#ms-studio-master-modal .studio-featured-layout-grid > button small { font:500 8px/1.2 ui-sans-serif,sans-serif; color:#64748b; }
.dark #ms-studio-master-modal .studio-featured-layouts-head b,
.dark #ms-studio-master-modal .studio-featured-layout-grid > button b { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-featured-layouts-head span,
.dark #ms-studio-master-modal .studio-featured-layout-grid > button small { color:#94a3b8; }
.dark #ms-studio-master-modal .studio-featured-layout-grid > button { border-color:#293c5b; background:#0f1e35; }
.dark #ms-studio-master-modal .studio-featured-layout-preview { background:#0b1729; }
#ms-studio-master-modal .studio-frame-card b { max-width:100%; overflow:hidden; color:#334155; font:800 8px/1.15 ui-sans-serif,sans-serif; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
#ms-studio-master-modal .studio-frame-back-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
#ms-studio-master-modal .studio-frame-back { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid #dbe3ef; border-radius:999px; background:#fff; color:#334155; font:800 9px/1.2 ui-sans-serif,sans-serif; cursor:pointer; }
#ms-studio-master-modal .studio-frame-back:hover { border-color:#60a5fa; color:#1d4ed8; }
#ms-studio-master-modal .studio-frame-back:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
#ms-studio-master-modal .studio-frame-back-row b { color:#1e293b; font:900 11px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-frame-back-row span { color:#64748b; font:700 9px/1.2 ui-sans-serif,sans-serif; }
/* A 1366 Chromebook gets a narrower panel: two across rather than a squeeze. */
@media (max-width: 1400px) {
  #ms-studio-master-modal .studio-frame-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #ms-studio-master-modal .studio-frame-row > * { flex:0 0 70px; }
}
.dark #ms-studio-master-modal .studio-frame-section-head b,
.dark #ms-studio-master-modal .studio-frame-back-row b { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-frame-back-row span { color:#9aabc1; }
.dark #ms-studio-master-modal .studio-frame-card { background:#111d32; border-color:#2d405f; }
.dark #ms-studio-master-modal .studio-frame-card b { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-frame-card-art { background:#0b1729; }
.dark #ms-studio-master-modal .studio-frame-seeall,
.dark #ms-studio-master-modal .studio-frame-back { background:#111d32; border-color:#2d405f; color:#bfdbfe; }
.dark #ms-studio-master-modal .studio-frame-seeall:hover,
.dark #ms-studio-master-modal .studio-frame-back:hover { background:#16233c; border-color:#3b82f6; color:#e0ecff; }
.dark #ms-studio-master-modal .studio-frame-seeall span { background:#16233c; color:#bfdbfe; }
/* The carousel arrow, the openings badge, and a reserved box for a mask that
   has not been drawn yet — so a lazy row does not jump as it fills in. */
#ms-studio-master-modal .studio-frame-rail { position:relative; }
#ms-studio-master-modal .studio-frame-next { position:absolute; top:26px; right:-2px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #dbe3ef; border-radius:999px; background:#fff; color:#334155; box-shadow:0 4px 10px rgba(15,23,42,.14); cursor:pointer; }
#ms-studio-master-modal .studio-frame-next:hover { border-color:#60a5fa; color:#1d4ed8; }
#ms-studio-master-modal .studio-frame-next:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
#ms-studio-master-modal .studio-frame-card { position:relative; }
#ms-studio-master-modal .studio-frame-openings { position:absolute; top:5px; right:5px; min-width:15px; padding:0 4px; border-radius:999px; background:#2563eb; color:#fff; font:900 8px/15px ui-sans-serif,sans-serif; font-style:normal; text-align:center; }
#ms-studio-master-modal .studio-frame-card-art[data-frame-pending] { background:#eef2f7; }
.dark #ms-studio-master-modal .studio-frame-card-art[data-frame-pending] { background:#0f1c30; }
.dark #ms-studio-master-modal .studio-frame-next { background:#111d32; border-color:#2d405f; color:#bfdbfe; }
.dark #ms-studio-master-modal .studio-frame-next:hover { background:#16233c; border-color:#3b82f6; }

/* Crop mode: a bar pinned under the artboard while a photo is repositioned
   inside its opening. Fixed so it stays put as the canvas scrolls, and it
   wraps rather than overflowing on a Chromebook. */
#ms-studio-master-modal #studio-crop-bar { position:fixed; left:50%; bottom:18px; z-index:60; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; max-width:min(94vw,780px); padding:8px 12px; border:1px solid #dbe3ef; border-radius:999px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.22); }
#ms-studio-master-modal .studio-crop-where { color:#0f172a; font:900 11px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-crop-hint { color:#64748b; font:700 10px/1.2 ui-sans-serif,sans-serif; }
#ms-studio-master-modal .studio-crop-sep { width:1px; height:18px; background:#e2e8f0; }
#ms-studio-master-modal .studio-crop-btn { min-width:30px; height:28px; padding:0 9px; border:1px solid #dbe3ef; border-radius:999px; background:#f8fafc; color:#334155; font:800 11px/1 ui-sans-serif,sans-serif; cursor:pointer; }
#ms-studio-master-modal .studio-crop-btn:hover { border-color:#60a5fa; background:#eff6ff; color:#1d4ed8; }
#ms-studio-master-modal .studio-crop-btn:focus-visible,
#ms-studio-master-modal .studio-crop-done:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
#ms-studio-master-modal .studio-crop-done { height:28px; padding:0 14px; border:0; border-radius:999px; background:#2563eb; color:#fff; font:900 11px/1 ui-sans-serif,sans-serif; cursor:pointer; }
#ms-studio-master-modal .studio-crop-done:hover { background:#1d4ed8; }
.dark #ms-studio-master-modal #studio-crop-bar { background:#111d32; border-color:#2d405f; }
.dark #ms-studio-master-modal .studio-crop-where { color:#e7eef8; }
.dark #ms-studio-master-modal .studio-crop-hint { color:#9aabc1; }
.dark #ms-studio-master-modal .studio-crop-sep { background:#2d405f; }
.dark #ms-studio-master-modal .studio-crop-btn { background:#16233c; border-color:#2d405f; color:#cbd5e1; }
.dark #ms-studio-master-modal .studio-crop-btn:hover { background:#1d2f4d; border-color:#3b82f6; color:#e0ecff; }
@media (max-width: 760px) {
  #ms-studio-master-modal #studio-crop-bar { border-radius:18px; bottom:10px; }
  #ms-studio-master-modal .studio-crop-hint { display:none; }
}

/* HR ▸ Time & Schedule — the attendance board is sectioned by department.
   A flat roster answers "how many" but not "is Service covered?", which is the
   question a manager opens this board to ask. The heading sticks so the
   department stays legible while a long section scrolls. */
.ppl-dept-section + .ppl-dept-section { margin-top: 10px; }
.ppl-dept-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; padding: 5px 8px; border-radius: 8px; background: #f1f5f9; color: #334155; font: 900 10px/1.2 ui-sans-serif, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.ppl-dept-count { padding: 1px 7px; border-radius: 999px; background: #fff; color: #475569; font-weight: 900; }
.dark .ppl-dept-heading { background: #17233a; color: #cbd5e1; }
.dark .ppl-dept-count { background: #0b1729; color: #9aabc1; }


/* Website Builder Property Inspector breathing room.
   The inspector body was visually touching the inner panel edge on both themes,
   especially on mobile. Keep padding on the content surface itself so every
   re-rendered inspector tab inherits the same spacing. */
.website-builder-mode #ws-inspector-content {
  box-sizing: border-box !important;
  padding: 0.875rem !important;
  margin-top: 0.25rem !important;
  border-radius: 0.875rem !important;
}
.website-builder-mode #ws-inspector-content > :first-child {
  margin-top: 0 !important;
}
.website-builder-mode #ws-inspector-content > :last-child {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .website-builder-mode #ws-inspector-content {
    padding: 0.875rem !important;
  }
}

#ms-studio-master-modal .studio-element-card-wrap{position:relative;min-width:0}
#ms-studio-master-modal .studio-element-card-wrap>.studio-element-card{width:100%;height:100%}
#ms-studio-master-modal .studio-element-favorite{position:absolute;top:6px;right:6px;width:28px;height:28px;border:1px solid rgba(148,163,184,.45);border-radius:999px;background:rgba(255,255,255,.9);color:#64748b;font-size:15px;line-height:1;display:grid;place-items:center;box-shadow:0 2px 8px rgba(15,23,42,.12);z-index:2}
#ms-studio-master-modal .studio-element-favorite[aria-pressed="true"]{color:#d97706;background:#fffbeb;border-color:#fbbf24}
.dark #ms-studio-master-modal .studio-element-favorite{background:rgba(15,23,42,.92);color:#cbd5e1;border-color:#475569}
.dark #ms-studio-master-modal .studio-element-favorite[aria-pressed="true"]{color:#fbbf24;background:#422006}


/* ── Design Studio Phase 10 · touch/tablet/pen parity ─────────────────────
   Existing Fabric gestures own canvas manipulation. These rules only size the
   surrounding editor chrome and drawers for the active input/device class. */
@media (pointer: coarse) {
  #ms-studio-master-modal .studio-mobile-panel-button,
  #ms-studio-master-modal .studio-menu-button,
  #ms-studio-master-modal .studio-menu-row,
  #ms-studio-master-modal .studio-primary-actions button,
  #ms-studio-master-modal #studio-action-sheet button,
  #ms-studio-master-modal #studio-action-sheet input,
  #ms-studio-master-modal #studio-action-sheet select,
  #ms-studio-master-modal .studio-command-bar button,
  #ms-studio-command-palette button {
    min-height:44px;
  }
  #ms-studio-master-modal .studio-element-favorite {
    width:44px;
    height:44px;
    top:2px;
    right:2px;
  }
}

/* iPad/tablet keeps the 88px tool rail visible. The full tool drawer and
   Inspector are mutually-exclusive overlays, so they never squeeze the artboard
   or cover it from both sides at once. */
@media (min-width: 769px) and (max-width: 1180px) {
  #ms-studio-master-modal[data-studio-device="tablet"] [data-studio-region="drawer"],
  #ms-studio-master-modal[data-studio-device="tablet"] [data-studio-region="inspector"] {
    position:fixed !important;
    top:var(--studio-tablet-panel-top,112px) !important;
    bottom:max(12px,env(safe-area-inset-bottom));
    z-index:80;
    width:min(360px,42vw) !important;
    max-width:calc(100vw - 24px);
    max-height:none !important;
    box-shadow:0 20px 60px rgba(2,6,23,.28);
    overflow:auto;
  }
  #ms-studio-master-modal[data-studio-device="tablet"] [data-studio-region="drawer"] { left:100px; }
  #ms-studio-master-modal[data-studio-device="tablet"] [data-studio-region="inspector"] { right:12px !important; left:auto !important; }
  #ms-studio-master-modal[data-studio-device="tablet"] #studio-canvas-viewport {
    min-width:0;
  }
  #ms-studio-master-modal[data-studio-device="tablet"] .studio-mobile-panel-button {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:44px;
  }
}

/* Phone sheets respect dynamic viewport height and the home indicator. */
@media (max-width: 768px) {
  #ms-studio-master-modal {
    height:100dvh !important;
    max-height:100dvh !important;
  }
  #ms-studio-master-modal #studio-tool-panel.ms-studio-mobile-open,
  #ms-studio-master-modal #studio-inspector-panel.ms-studio-mobile-open,
  #ms-studio-master-modal #studio-action-sheet {
    max-height:calc(100dvh - 96px);
    padding-bottom:max(14px,env(safe-area-inset-bottom)) !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #ms-studio-command-palette {
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
    place-items:start stretch;
  }
  #ms-studio-command-palette .ms-studio-command-shell {
    width:100%;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  }
}

/* Apple Pencil/stylus: preserve precise cursor semantics and don't visually
   inflate the editor as though a finger were operating it. Fabric still owns
   the actual drawing/editing coordinates. */
#ms-studio-master-modal[data-studio-input="pen"] #studio-canvas-viewport,
#ms-studio-master-modal[data-studio-input="pen"] .upper-canvas {
  cursor:crosshair;
}
#ms-studio-master-modal[data-studio-input="pen"] .studio-menu-button,
#ms-studio-master-modal[data-studio-input="pen"] .studio-primary-actions button {
  min-height:36px;
}

/* Design Studio Phase 13 · Whiteboard */
#ms-studio-master-modal.ms-studio-whiteboard-mode #studio-canvas-viewport{background:#eef2f7}
#ms-studio-master-modal.ms-studio-whiteboard-grid #studio-artboard-container{
  background-color:#f8fafc;
  background-image:radial-gradient(circle,#94a3b8 1.15px,transparent 1.2px);
  background-size:24px 24px;
}
#ms-studio-master-modal.ms-studio-whiteboard-mode #studio-artboard-container{overscroll-behavior:none}


/* ── Design Studio mobile UX consolidation · 2026-10-06 ────────────────
   Phones get one compact app bar and one organized Menu sheet. Desktop menus
   remain unchanged. This deliberately overrides the older "wrap all desktop
   menus into more rows" approach, which technically fit but was unusable. */
#ms-studio-master-modal .studio-mobile-menu-trigger { display:none; }
#ms-studio-master-modal .studio-mobile-menu-shell { display:grid; gap:20px; }
#ms-studio-master-modal .studio-mobile-menu-section { display:grid; gap:9px; }
#ms-studio-master-modal .studio-mobile-menu-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
#ms-studio-master-modal .studio-mobile-menu-heading b { font-size:13px; font-weight:900; color:#0f172a; }
#ms-studio-master-modal .studio-mobile-menu-heading span { font-size:10px; color:#64748b; text-align:right; }
#ms-studio-master-modal .studio-mobile-menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#ms-studio-master-modal .studio-mobile-menu-item {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:70px;
  padding:11px 12px; border:1px solid #dbe3ef; border-radius:14px; background:#f8fafc;
  color:#0f172a; text-align:left; box-shadow:0 1px 2px rgba(15,23,42,.03);
}
#ms-studio-master-modal .studio-mobile-menu-item b { font-size:12px; line-height:1.15; font-weight:900; }
#ms-studio-master-modal .studio-mobile-menu-item span { margin-top:4px; color:#64748b; font-size:9.5px; line-height:1.3; font-weight:650; }
.dark #ms-studio-master-modal .studio-mobile-menu-heading b { color:#f8fafc; }
.dark #ms-studio-master-modal .studio-mobile-menu-item { background:#111d32; border-color:#344866; color:#f8fafc; }
.dark #ms-studio-master-modal .studio-mobile-menu-item span,
.dark #ms-studio-master-modal .studio-mobile-menu-heading span { color:#9aabc1; }

@media (max-width:768px) {
  #ms-studio-master-modal .studio-identity-bar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    min-height:58px !important;
    padding:7px 8px !important;
  }
  #ms-studio-master-modal .studio-identity-main {
    order:initial !important; min-width:0 !important; width:auto !important;
    display:flex !important; gap:6px !important; overflow:hidden;
  }
  #ms-studio-master-modal .studio-identity-main #studio-design-name { display:none !important; }
  #ms-studio-master-modal #studio-save-status {
    width:10px !important; min-width:10px !important; height:10px !important;
    padding:0 !important; overflow:hidden !important; color:transparent !important;
    border:1px solid rgba(255,255,255,.75) !important; border-radius:999px !important;
  }
  #ms-studio-master-modal .studio-menubar { display:none !important; }
  #ms-studio-master-modal .studio-primary-actions {
    order:initial !important; width:auto !important; max-width:none !important; margin:0 !important;
    display:flex !important; align-items:center !important; gap:5px !important; overflow:visible !important;
  }
  #ms-studio-master-modal #studio-preview-btn { display:none !important; }
  #ms-studio-master-modal .studio-mobile-menu-trigger { display:inline-flex !important; align-items:center; justify-content:center; }
  #ms-studio-master-modal .studio-primary-actions > button {
    min-width:0 !important; min-height:42px !important; height:42px !important;
    padding:7px 10px !important; border-radius:12px !important; font-size:11px !important;
  }
  #ms-studio-master-modal .studio-publish-button { padding-inline:12px !important; }
  #ms-studio-master-modal .studio-back-short { font-size:11px; }
  #ms-studio-master-modal .studio-identity-main > button { min-height:42px !important; padding:7px 9px !important; }

  /* The tool drawer is the mobile work surface. Give it the phone width instead
     of leaving a useless grey strip beside a cramped 330px desktop panel. */
  #ms-studio-master-modal #studio-tool-panel {
    /* Leave a real tap target for the scrim. A 100%-wide drawer made the
       close backdrop unreachable on phones. */
    width:calc(100% - 46px) !important;
    max-width:380px !important;
    right:auto !important;
    border-right:1px solid #dbe3ef !important;
    box-shadow:14px 0 34px rgba(15,23,42,.22) !important;
    border-radius:0 18px 18px 0 !important;
  }
  #ms-studio-master-modal .studio-tool-panel-header {
    position:sticky !important;
    top:0 !important;
    z-index:8 !important;
    min-height:54px !important;
    flex:none !important;
    backdrop-filter:blur(16px);
  }
  #ms-studio-master-modal .studio-tool-panel-close {
    min-width:82px !important;
    min-height:38px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:1px solid #cbd5e1 !important;
    background:#fff !important;
    color:#0f172a !important;
  }
  #ms-studio-master-modal .studio-tool-panel-close-desktop { display:none !important; }
  #ms-studio-master-modal .studio-tool-panel-close-mobile { display:inline !important; font-size:11px !important; font-weight:900 !important; }
  #ms-studio-master-modal #studio-tool-panel-content {
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  #ms-studio-master-modal #studio-inspector-panel {
    max-height:68dvh !important; border-radius:18px 18px 0 0 !important;
  }

  /* Curated content must remain readable regardless of whichever late-injected
     element stylesheet wins source order. */
  #ms-studio-master-modal .ms-curated-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  #ms-studio-master-modal .ms-curated-element-card { min-height:156px; border-radius:14px !important; }
  #ms-studio-master-modal .ms-curated-element-main { padding:9px !important; }
  #ms-studio-master-modal .ms-curated-element-card .studio-visual-element-preview { min-height:96px !important; }
  #ms-studio-master-modal .ms-curated-premade-preview { min-height:92px !important; padding:10px !important; }
  #ms-studio-master-modal .ms-curated-favorite {
    width:34px !important; height:34px !important; min-height:34px !important;
    padding:0 !important; border-radius:10px !important; font-size:16px !important;
  }
  #ms-studio-master-modal .studio-catalog-card-copy b { font-size:11px !important; line-height:1.2 !important; }
  #ms-studio-master-modal .studio-catalog-card-copy span { font-size:9px !important; line-height:1.25 !important; }

  #ms-studio-master-modal #studio-action-sheet {
    align-items:flex-end !important; justify-content:center !important;
    padding:0 !important; background:rgba(15,23,42,.56) !important;
  }
  #ms-studio-master-modal #studio-action-sheet > section {
    max-width:none !important; width:100% !important; max-height:88dvh !important;
    border-radius:24px 24px 0 0 !important; border-bottom:0 !important;
  }
  #ms-studio-master-modal #studio-action-sheet > section > header { padding:14px 16px !important; }
  #ms-studio-master-modal #studio-action-sheet > section > header h2 { font-size:18px !important; }
  #ms-studio-master-modal #studio-action-sheet > section > div { padding:16px !important; }
}


/* openStudioSheet() mounts on document.body, outside #ms-studio-master-modal.
   These direct selectors are required for the phone bottom-sheet treatment. */
@media (max-width:768px) {
  #studio-action-sheet {
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
    background:rgba(15,23,42,.56) !important;
  }
  #studio-action-sheet > section {
    width:100% !important;
    max-width:none !important;
    max-height:88dvh !important;
    border-radius:24px 24px 0 0 !important;
    border-bottom:0 !important;
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }
  #studio-action-sheet > section > header { padding:14px 16px !important; }
  #studio-action-sheet > section > header h2 { font-size:18px !important; line-height:1.2 !important; }
  #studio-action-sheet > section > div { padding:16px !important; }
  #studio-action-sheet .studio-mobile-menu-shell { display:grid; gap:20px; }
  #studio-action-sheet .studio-mobile-menu-section { display:grid; gap:9px; }
  #studio-action-sheet .studio-mobile-menu-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:10px; }
  #studio-action-sheet .studio-mobile-menu-heading b { font-size:13px;font-weight:900;color:#0f172a; }
  #studio-action-sheet .studio-mobile-menu-heading span { font-size:10px;color:#64748b;text-align:right; }
  #studio-action-sheet .studio-mobile-menu-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  #studio-action-sheet .studio-mobile-menu-item {
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:70px;
    padding:11px 12px;border:1px solid #dbe3ef;border-radius:14px;background:#f8fafc;
    color:#0f172a;text-align:left;
  }
  #studio-action-sheet .studio-mobile-menu-item b { font-size:12px;line-height:1.15;font-weight:900; }
  #studio-action-sheet .studio-mobile-menu-item span { margin-top:4px;color:#64748b;font-size:9.5px;line-height:1.3;font-weight:650; }
  html.dark #studio-action-sheet .studio-mobile-menu-heading b { color:#f8fafc; }
  html.dark #studio-action-sheet .studio-mobile-menu-heading span,
  html.dark #studio-action-sheet .studio-mobile-menu-item span { color:#9aabc1; }
  html.dark #studio-action-sheet .studio-mobile-menu-item { background:#111d32;border-color:#344866;color:#f8fafc; }
}


@media (max-width:768px) {
  html.dark #ms-studio-master-modal .studio-tool-panel-header { background:rgba(13,23,41,.96) !important; }
  html.dark #ms-studio-master-modal .studio-tool-panel-close {
    background:#182740 !important;
    color:#f8fafc !important;
    border-color:#415574 !important;
  }
}


/* ── Design Studio preview-first UI · 2026-10-06 ─────────────────────── */
#ms-studio-master-modal .ms-curated-element-card {
  overflow:hidden;
  border:1px solid #e2e8f0;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#ms-studio-master-modal .ms-curated-element-card:hover {
  border-color:#a5b4fc;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
#ms-studio-master-modal .studio-visual-element-preview {
  min-height:112px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(145deg,#f8fafc,#eef2ff);
  border:1px solid rgba(203,213,225,.7);
}
#ms-studio-master-modal .ms-curated-illustration-svg {
  width:100%;
  height:100%;
  min-height:108px;
  display:block;
  padding:8px;
}
#ms-studio-master-modal .ms-auto-pack-visual {
  position:relative;
  min-height:112px;
  width:100%;
  overflow:hidden;
  border-radius:11px;
  background:
    radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--pack-accent) 28%,transparent),transparent 34%),
    linear-gradient(145deg,#0f172a,#1e293b);
  color:#fff;
}
#ms-studio-master-modal .ms-auto-pack-badge {
  position:absolute;left:8px;top:8px;z-index:3;
  max-width:68%;padding:4px 6px;border-radius:6px;
  background:var(--pack-accent);color:#fff;
  font:900 8px/1 ui-sans-serif,sans-serif;letter-spacing:.06em;
}
#ms-studio-master-modal .ms-auto-pack-vehicle {
  position:absolute;left:10px;right:10px;top:34px;height:42px;
}
#ms-studio-master-modal .ms-auto-pack-vehicle .body {
  position:absolute;left:10%;right:7%;bottom:6px;height:20px;border-radius:11px 15px 7px 7px;background:#f8fafc;
}
#ms-studio-master-modal .ms-auto-pack-vehicle .roof {
  position:absolute;left:29%;width:38%;bottom:21px;height:17px;border-radius:18px 18px 3px 3px;background:#e2e8f0;
}
#ms-studio-master-modal .ms-auto-pack-vehicle .wheel {
  position:absolute;bottom:0;width:13px;height:13px;border-radius:50%;background:#020617;border:3px solid #94a3b8;
}
#ms-studio-master-modal .ms-auto-pack-vehicle .wheel.a { left:23%; }
#ms-studio-master-modal .ms-auto-pack-vehicle .wheel.b { right:18%; }
#ms-studio-master-modal .ms-auto-pack-offer {
  position:absolute;left:9px;bottom:27px;
  font:950 14px/1 ui-sans-serif,sans-serif;letter-spacing:-.04em;
}
#ms-studio-master-modal .ms-auto-pack-lines {
  position:absolute;right:8px;bottom:31px;width:34%;display:grid;gap:4px;
}
#ms-studio-master-modal .ms-auto-pack-lines i { height:4px;border-radius:999px;background:rgba(255,255,255,.62); }
#ms-studio-master-modal .ms-auto-pack-lines i:last-child { width:68%; }
#ms-studio-master-modal .ms-auto-pack-cta {
  position:absolute;left:8px;bottom:7px;
  padding:4px 7px;border-radius:6px;background:#fff;color:#0f172a;
  font:900 7px/1 ui-sans-serif,sans-serif;letter-spacing:.04em;
}

/* V39 template discovery.
   One control surface powers both Design Studio and Marketing > Templates. */
.studio-template-discovery {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:rgba(248,250,252,.82);
}
.studio-template-discovery-top {
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:9px;
  align-items:center;
}
.studio-template-discovery-search {
  display:flex;
  min-width:0;
  min-height:42px;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.studio-template-discovery-search:focus-within {
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}
.studio-template-discovery-search svg {
  width:17px;
  height:17px;
  flex:none;
  fill:none;
  stroke:#64748b;
  stroke-width:2;
}
.studio-template-discovery-search input {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#0f172a;
  font:700 12px/1.2 ui-sans-serif,sans-serif;
}
.studio-template-discovery-search input::placeholder { color:#94a3b8; }
.studio-template-discovery-sort {
  display:flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  padding:0 10px 0 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#64748b;
  font:800 10px/1 ui-sans-serif,sans-serif;
}
.studio-template-discovery-sort select {
  border:0;
  outline:0;
  background:transparent;
  color:#0f172a;
  font:900 11px/1 ui-sans-serif,sans-serif;
  cursor:pointer;
}
.studio-template-discovery-clear {
  min-height:42px;
  padding:0 13px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#334155;
  font:900 10.5px/1 ui-sans-serif,sans-serif;
  cursor:pointer;
}
.studio-template-discovery-clear:hover { border-color:#93c5fd;color:#1d4ed8; }
.studio-template-discovery-row {
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  overflow-x:auto;
  padding-bottom:1px;
  scrollbar-width:none;
}
.studio-template-discovery-row::-webkit-scrollbar { display:none; }
.studio-template-discovery-label {
  position:sticky;
  left:0;
  z-index:1;
  flex:none;
  min-width:42px;
  padding-right:5px;
  background:linear-gradient(90deg,rgba(248,250,252,.98) 80%,rgba(248,250,252,0));
  color:#64748b;
  font:900 9px/1 ui-sans-serif,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.studio-discovery-chip {
  flex:none;
  min-height:32px;
  padding:0 11px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font:850 10px/1 ui-sans-serif,sans-serif;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease;
}
.studio-discovery-chip:hover { border-color:#93c5fd;color:#1d4ed8; }
.studio-discovery-chip[aria-pressed="true"] {
  border-color:#2563eb;
  background:#eff6ff;
  color:#1d4ed8;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.06);
}
.studio-discovery-chip--quick {
  border-color:#bfdbfe;
  background:#f8fbff;
  color:#1e40af;
}
.studio-template-discovery-divider {
  width:1px;
  height:22px;
  flex:none;
  margin:0 2px;
  background:#dbe4ef;
}
.dark .studio-template-discovery {
  border-color:#293a55;
  background:rgba(15,23,42,.66);
}
.dark .studio-template-discovery-search,
.dark .studio-template-discovery-sort,
.dark .studio-template-discovery-clear,
.dark .studio-discovery-chip {
  border-color:#334155;
  background:#111d32;
  color:#dbeafe;
}
.dark .studio-template-discovery-search input,
.dark .studio-template-discovery-sort select { color:#eef4ff; }
.dark .studio-template-discovery-label {
  background:linear-gradient(90deg,rgba(15,23,42,.98) 80%,rgba(15,23,42,0));
  color:#94a3b8;
}
.dark .studio-discovery-chip[aria-pressed="true"] {
  border-color:#60a5fa;
  background:rgba(37,99,235,.18);
  color:#bfdbfe;
}
.dark .studio-discovery-chip--quick {
  border-color:#315b91;
  background:#10213d;
  color:#bfdbfe;
}
.dark .studio-template-discovery-divider { background:#334155; }

@media (max-width:700px) {
  .studio-template-discovery { padding:10px; }
  .studio-template-discovery-top { grid-template-columns:minmax(0,1fr) auto; }
  .studio-template-discovery-sort { grid-column:1/2;grid-row:2;justify-content:space-between; }
  .studio-template-discovery-clear { grid-column:2;grid-row:2; }
}

/* V40 library memory + campaign shelves. */
.studio-discovery-count {
  display:inline-flex;
  min-width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  padding:0 5px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  font:900 8px/1 ui-sans-serif,sans-serif;
}
.studio-discovery-chip[aria-pressed="true"] .studio-discovery-count {
  background:#dbeafe;
  color:#1d4ed8;
}
.studio-template-favorite-button {
  display:inline-flex;
  width:42px;
  height:42px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#fff;
  color:#64748b;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,color .14s ease,background .14s ease,box-shadow .14s ease;
}
.studio-template-favorite-button svg { width:19px;height:19px; }
.studio-template-favorite-button:hover {
  transform:translateY(-1px);
  border-color:#93c5fd;
  color:#2563eb;
  box-shadow:0 7px 16px rgba(15,23,42,.10);
}
.studio-template-favorite-button.is-favorite,
.studio-template-favorite-button[aria-pressed="true"] {
  border-color:#f6c453;
  background:#fffbeb;
  color:#d97706;
}
#studio-home-template-grid .studio-template-favorite-card {
  position:absolute;
  right:9px;
  top:9px;
  z-index:4;
  width:32px;
  height:32px;
  border-color:rgba(255,255,255,.72);
  border-radius:9px;
  background:rgba(255,255,255,.90);
  box-shadow:0 5px 14px rgba(15,23,42,.14);
  backdrop-filter:blur(10px);
}
#studio-home-template-grid .studio-template-favorite-card svg { width:15px;height:15px; }
.dark .studio-discovery-count { background:#26364e;color:#cbd5e1; }
.dark .studio-discovery-chip[aria-pressed="true"] .studio-discovery-count { background:#1e3a5f;color:#bfdbfe; }
.dark .studio-template-favorite-button { border-color:#334155;background:#111d32;color:#94a3b8; }
.dark .studio-template-favorite-button.is-favorite,
.dark .studio-template-favorite-button[aria-pressed="true"] {
  border-color:#a16207;
  background:#332509;
  color:#fbbf24;
}
.dark #studio-home-template-grid .studio-template-favorite-card {
  border-color:rgba(71,85,105,.84);
  background:rgba(15,23,42,.88);
}
@media (max-width:640px) {
  #studio-home-template-grid .studio-template-favorite-card {
    width:30px;height:30px;right:7px;top:7px;
  }
}

/* Shared template storefront cards.
   These rules intentionally target the grid id instead of the Studio modal so
   the exact same polished cards render on Marketing > Templates as well. */
#studio-home-template-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
}
#studio-home-template-grid .studio-home-template-card {
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
#studio-home-template-grid .studio-home-template-card:hover {
  border-color:#93c5fd;
  box-shadow:0 14px 30px rgba(15,23,42,.12);
  transform:translateY(-2px);
}
#studio-home-template-grid .studio-template-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:4/3;
  min-height:0;
  padding:12px;
  overflow:hidden;
  background:#eef2f7;
}
#studio-home-template-grid .studio-template-preview-fit {
  position:relative;
  display:block;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
  aspect-ratio:var(--studio-template-ratio);
}
#studio-home-template-grid .studio-template-preview-fit.fit-width { width:100%; }
#studio-home-template-grid .studio-template-preview-fit.fit-height { height:100%; }
#studio-home-template-grid .studio-template-preview-fit > .studio-template-preview {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
#studio-home-template-grid .studio-template-meta {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:88px;
  margin-top:auto;
  padding:12px 13px 13px;
  border-top:1px solid #eef2f7;
}
#studio-home-template-grid .studio-template-meta-copy {
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
}
#studio-home-template-grid .studio-template-meta-copy b {
  display:-webkit-box;
  min-height:2.5em;
  overflow:hidden;
  color:#0f172a;
  font:900 13.5px/1.25 ui-sans-serif,sans-serif;
  letter-spacing:-.015em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
#studio-home-template-grid .studio-template-meta-copy span {
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#64748b;
  font:700 10.5px/1.25 ui-sans-serif,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#studio-home-template-grid .studio-template-use {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  min-width:86px;
  min-height:40px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font:900 10.5px/1 ui-sans-serif,sans-serif;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(37,99,235,.18);
}
#studio-home-template-grid .studio-template-use:hover { background:#1d4ed8; }
#studio-home-template-grid .studio-template-preview-button {
  position:absolute;
  inset:0;
  z-index:2;
  border:0;
  background:transparent;
  cursor:pointer;
}
#studio-home-template-grid .studio-template-hover-preview {
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font:900 10px/1 ui-sans-serif,sans-serif;
  box-shadow:0 8px 22px rgba(15,23,42,.22);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-44%);
  transition:opacity .16s ease,transform .16s ease;
  backdrop-filter:blur(10px);
}
@media (hover:hover) and (pointer:fine) {
  #studio-home-template-grid .studio-home-template-card:hover .studio-template-hover-preview {
    opacity:1;
    transform:translate(-50%,-50%);
  }
}
#studio-home-template-grid .studio-template-card-badge {
  position:absolute;
  left:9px;
  top:9px;
  z-index:3;
  padding:4px 6px;
  border-radius:7px;
  background:rgba(15,23,42,.84);
  color:#fff;
  font:900 8px/1 ui-sans-serif,sans-serif;
  backdrop-filter:blur(8px);
}
.dark #studio-home-template-grid .studio-home-template-card {
  background:#111d32;
  border-color:#2d405f;
}
.dark #studio-home-template-grid .studio-template-visual { background:#0b1527; }
.dark #studio-home-template-grid .studio-template-meta { border-top-color:#223451; }
.dark #studio-home-template-grid .studio-template-meta-copy b { color:#eef4ff; }
.dark #studio-home-template-grid .studio-template-meta-copy span { color:#93a4ba; }

@media (min-width:700px) {
  #studio-home-template-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (min-width:1180px) {
  #studio-home-template-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:640px) {
  #studio-home-template-grid { gap:10px !important; }
  #studio-home-template-grid .studio-template-visual { padding:8px; }
  #studio-home-template-grid .studio-template-meta { min-height:78px;padding:9px;gap:7px; }
  #studio-home-template-grid .studio-template-meta-copy b { font-size:11.5px; }
  #studio-home-template-grid .studio-template-meta-copy span { font-size:9.5px; }
  #studio-home-template-grid .studio-template-use { min-width:52px;min-height:36px;padding-inline:10px;font-size:0; }
  #studio-home-template-grid .studio-template-use::after { content:'Use';font:900 10px/1 ui-sans-serif,sans-serif; }
}

/* Templates should be judged visually first. Four useful cards beat six tiny cards. */
#ms-studio-master-modal #studio-home-template-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
#ms-studio-master-modal .studio-home-template-card,
#ms-studio-master-modal .studio-template-card {
  border-radius:16px !important;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 2px 8px rgba(15,23,42,.06);
}
#ms-studio-master-modal .studio-template-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:12px;
  overflow:hidden;
  background:#eef2f7;
}
#ms-studio-master-modal .studio-template-visual .studio-template-preview {
  width:100%;
  max-height:300px;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
#ms-studio-master-modal .studio-template-meta {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 11px 11px;
}
#ms-studio-master-modal .studio-template-meta-copy { min-width:0; }
#ms-studio-master-modal .studio-template-meta-copy b {
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#0f172a;font:900 12px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-meta-copy span {
  display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#64748b;font:700 9px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-use {
  flex:none;min-height:34px;padding:0 10px;border:0;border-radius:9px;
  background:#4f46e5;color:#fff;font:900 10px/1 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-preview-button {
  position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:pointer;
}
#ms-studio-master-modal .studio-template-card-badge {
  position:absolute;left:9px;top:9px;z-index:3;padding:4px 6px;border-radius:7px;
  background:rgba(15,23,42,.84);color:#fff;font:900 8px/1 ui-sans-serif,sans-serif;
  backdrop-filter:blur(8px);
}
#ms-studio-master-modal .studio-template-preview-sheet {
  display:grid;gap:16px;
}
#ms-studio-master-modal .studio-template-preview-stage {
  display:flex;align-items:center;justify-content:center;
  min-height:360px;padding:18px;border-radius:18px;
  background:#e9eef5;overflow:hidden;
}
#ms-studio-master-modal .studio-template-preview-stage .studio-template-preview {
  max-width:100%;max-height:62dvh;box-shadow:0 18px 45px rgba(15,23,42,.22);
}
#ms-studio-master-modal .studio-template-preview-primary {
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
}
#ms-studio-master-modal .studio-template-preview-more {
  border:1px solid #dbe3ef;border-radius:12px;padding:10px 12px;
}
#ms-studio-master-modal .studio-template-preview-more summary {
  cursor:pointer;font-size:11px;font-weight:900;color:#334155;
}

@media (min-width:700px) {
  #ms-studio-master-modal #studio-home-template-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (min-width:1180px) {
  #ms-studio-master-modal #studio-home-template-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media (max-width:640px) {
  #ms-studio-master-modal #studio-home-template-grid { gap:10px !important; }
  #ms-studio-master-modal .studio-template-visual { min-height:148px;padding:8px; }
  #ms-studio-master-modal .studio-template-meta { padding:8px; }
  #ms-studio-master-modal .studio-template-meta-copy b { font-size:11px; }
  #ms-studio-master-modal .studio-template-use { min-height:36px;padding-inline:9px; }
  #ms-studio-master-modal .studio-template-preview-stage { min-height:260px;padding:10px; }
  #ms-studio-master-modal .studio-template-preview-primary {
    grid-template-columns:1fr;
  }
}
.dark #ms-studio-master-modal .ms-curated-element-card,
.dark #ms-studio-master-modal .studio-home-template-card,
.dark #ms-studio-master-modal .studio-template-card { background:#111d32;border-color:#2d405f; }
.dark #ms-studio-master-modal .studio-visual-element-preview,
.dark #ms-studio-master-modal .studio-template-visual,
.dark #ms-studio-master-modal .studio-template-preview-stage { background:#0b1527; }
.dark #ms-studio-master-modal .studio-template-meta-copy b { color:#eef4ff; }
.dark #ms-studio-master-modal .studio-template-meta-copy span { color:#93a4ba; }
.dark #ms-studio-master-modal .studio-template-preview-more { border-color:#344866; }
.dark #ms-studio-master-modal .studio-template-preview-more summary { color:#dbeafe; }


/* ── Design Studio browser simplification · 2026-10-06 ─────────────── */
#ms-studio-master-modal .studio-template-browser { display:grid; gap:12px; }
#ms-studio-master-modal .studio-template-browser-head {
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
#ms-studio-master-modal .studio-template-browser-head h3 {
  margin:0;color:#0f172a;font:900 14px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-browser-head p {
  margin:4px 0 0;color:#64748b;font:600 9.5px/1.4 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-size-chip {
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  min-height:42px;padding:7px 9px;border:1px solid #c7d2fe;border-radius:11px;
  background:#eef2ff;color:#3730a3;text-align:right;
}
#ms-studio-master-modal .studio-template-size-chip b { font-size:10px;line-height:1; }
#ms-studio-master-modal .studio-template-size-chip span { font-size:8px;font-weight:700;opacity:.76; }
#ms-studio-master-modal .studio-template-search {
  display:flex;align-items:center;gap:7px;min-height:42px;padding:0 11px;
  border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;color:#64748b;
}
#ms-studio-master-modal .studio-template-search input {
  min-width:0;flex:1;border:0!important;outline:0;background:transparent!important;
  padding:0!important;color:#0f172a;font-size:12px;
}
#ms-studio-master-modal .studio-template-category-select {
  width:100%;min-height:40px;padding:0 10px;border:1px solid #cbd5e1;border-radius:11px;
  background:#fff;color:#334155;font-size:11px;font-weight:800;
}
#ms-studio-master-modal .studio-template-filter-row {
  display:flex;align-items:center;gap:8px;min-width:0;
}
#ms-studio-master-modal .studio-template-category-chips {
  display:flex;gap:6px;min-width:0;overflow-x:auto;padding:1px 1px 4px;
  scroll-snap-type:x proximity;scrollbar-width:none;
}
#ms-studio-master-modal .studio-template-category-chips::-webkit-scrollbar { display:none; }
#ms-studio-master-modal .studio-template-category-chip {
  flex:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 9px;
  border:1px solid #dbe3ef;border-radius:999px;background:#fff;color:#475569;
  font:800 9.5px/1 ui-sans-serif,sans-serif;white-space:nowrap;scroll-snap-align:start;
}
#ms-studio-master-modal .studio-template-category-chip em {
  min-width:17px;padding:3px 5px;border-radius:999px;background:#f1f5f9;color:#64748b;
  font:900 8px/1 ui-sans-serif,sans-serif;font-style:normal;text-align:center;
}
#ms-studio-master-modal .studio-template-category-chip[aria-pressed="true"] {
  border-color:#6366f1;background:#eef2ff;color:#3730a3;box-shadow:0 0 0 2px rgba(99,102,241,.10);
}
#ms-studio-master-modal .studio-template-category-chip[aria-pressed="true"] em {
  background:#c7d2fe;color:#312e81;
}
#ms-studio-master-modal .studio-template-filter-reset {
  flex:none;min-height:34px;padding:0 9px;border:0;border-radius:9px;background:#f1f5f9;
  color:#475569;font:900 9px/1 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-browser-status {
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 9px;border-radius:10px;background:#f8fafc;color:#64748b;
  font:700 8.5px/1.3 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-template-browser-status b { color:#334155; }
#ms-studio-master-modal .studio-template-browser-grid { display:grid;grid-template-columns:1fr;gap:11px; }
#ms-studio-master-modal .studio-template-browser-grid > .studio-template-card + button {
  grid-column:1/-1;
}
#ms-studio-master-modal .studio-template-tools {
  margin-top:2px;border:1px solid #dbe3ef;border-radius:13px;background:#f8fafc;
}
#ms-studio-master-modal .studio-template-tools summary {
  cursor:pointer;padding:11px 12px;color:#334155;font-size:11px;font-weight:900;
}
#ms-studio-master-modal .studio-template-tools-body { display:grid;gap:8px;padding:0 10px 10px; }
#ms-studio-master-modal .studio-template-tool-row {
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  padding:10px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;text-align:left;
}
#ms-studio-master-modal .studio-template-tool-row b { color:#0f172a;font-size:10px; }
#ms-studio-master-modal .studio-template-tool-row span { color:#64748b;font-size:9px;line-height:1.35; }
#ms-studio-master-modal .studio-template-ai-box {
  display:grid;gap:7px;padding:10px;border-radius:10px;background:#eef2ff;
}
#ms-studio-master-modal .studio-template-ai-box>b { color:#312e81;font-size:10px; }
#ms-studio-master-modal .studio-template-ai-box>span { color:#6366f1;font-size:9px;line-height:1.35; }
#ms-studio-master-modal .studio-template-ai-box textarea {
  width:100%;resize:vertical;min-height:72px;padding:9px;border:1px solid #c7d2fe;
  border-radius:9px;background:#fff;color:#0f172a;font-size:10px;
}
#ms-studio-master-modal .studio-template-ai-box button {
  min-height:38px;border:0;border-radius:9px;background:#4f46e5;color:#fff;font-size:10px;font-weight:900;
}

@media (max-width:768px) {
  #ms-studio-master-modal .studio-template-browser-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #ms-studio-master-modal .studio-template-browser-grid > button:last-child {
    grid-column:1/-1;
  }
  #ms-studio-master-modal .studio-template-browser .studio-template-visual { min-height:142px; }
  #ms-studio-master-modal .studio-template-browser .studio-template-meta {
    align-items:stretch;flex-direction:column;
  }
  #ms-studio-master-modal .studio-template-browser .studio-template-use { width:100%; }
  #ms-studio-master-modal .studio-template-filter-row { align-items:stretch; }
  #ms-studio-master-modal .studio-template-category-chip { min-height:38px;padding-inline:10px; }
  #ms-studio-master-modal .studio-template-filter-reset { min-height:38px; }
  #ms-studio-master-modal .studio-template-browser-status { align-items:flex-start;flex-direction:column; }
}

.dark #ms-studio-master-modal .studio-template-browser-head h3 { color:#eef4ff; }
.dark #ms-studio-master-modal .studio-template-browser-head p { color:#93a4ba; }
.dark #ms-studio-master-modal .studio-template-size-chip {
  border-color:#3f51a3;background:#1e3053;color:#c7d2fe;
}
.dark #ms-studio-master-modal .studio-template-search,
.dark #ms-studio-master-modal .studio-template-category-select,
.dark #ms-studio-master-modal .studio-template-tools {
  border-color:#344866;background:#091426;color:#e7eef8;
}
.dark #ms-studio-master-modal .studio-template-search input { color:#f8fafc; }
.dark #ms-studio-master-modal .studio-template-category-chip {
  border-color:#344866;background:#111d32;color:#cbd5e1;
}
.dark #ms-studio-master-modal .studio-template-category-chip em { background:#1e293b;color:#94a3b8; }
.dark #ms-studio-master-modal .studio-template-category-chip[aria-pressed="true"] {
  border-color:#6366f1;background:#1e3053;color:#e0e7ff;
}
.dark #ms-studio-master-modal .studio-template-filter-reset,
.dark #ms-studio-master-modal .studio-template-browser-status { background:#111d32;color:#93a4ba; }
.dark #ms-studio-master-modal .studio-template-browser-status b { color:#e2e8f0; }
.dark #ms-studio-master-modal .studio-template-tool-row {
  border-color:#344866;background:#111d32;
}
.dark #ms-studio-master-modal .studio-template-tool-row b { color:#eef4ff; }
.dark #ms-studio-master-modal .studio-template-tool-row span { color:#93a4ba; }
.dark #ms-studio-master-modal .studio-template-ai-box { background:#182740; }
.dark #ms-studio-master-modal .studio-template-ai-box>b { color:#dbeafe; }
.dark #ms-studio-master-modal .studio-template-ai-box>span { color:#9fb4d2; }
.dark #ms-studio-master-modal .studio-template-ai-box textarea {
  border-color:#415574;background:#091426;color:#f8fafc;
}


/* ── Design Studio media preview consistency · 2026-10-06 ───────────── */
#ms-studio-master-modal .studio-photo-result-card,
#ms-studio-master-modal .studio-media-preview-card {
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.05);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
#ms-studio-master-modal .studio-photo-result-card:hover,
#ms-studio-master-modal .studio-media-preview-card:hover {
  border-color:#a5b4fc;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
#ms-studio-master-modal .studio-photo-result-preview,
#ms-studio-master-modal .studio-media-preview-add {
  position:relative;
  display:block;
  width:100%;
  min-height:128px;
  overflow:hidden;
  border:0;
  padding:0;
  background:linear-gradient(145deg,#e2e8f0,#f8fafc);
  color:inherit;
  text-align:left;
}
#ms-studio-master-modal .studio-photo-result-preview img,
#ms-studio-master-modal .studio-media-preview-add img,
#ms-studio-master-modal .studio-media-preview-add video {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .18s ease;
}
#ms-studio-master-modal .studio-photo-result-preview:hover img,
#ms-studio-master-modal .studio-media-preview-add:hover img {
  transform:scale(1.025);
}
#ms-studio-master-modal .studio-photo-result-preview.is-broken::before,
#ms-studio-master-modal .studio-media-preview-add.is-broken::before {
  content:'Preview unavailable';
  position:absolute;inset:0;
  display:grid;place-items:center;
  color:#64748b;font:800 10px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-photo-result-add,
#ms-studio-master-modal .studio-media-add-pill {
  position:absolute;right:7px;bottom:7px;z-index:3;
  padding:5px 8px;border-radius:8px;
  background:rgba(15,23,42,.86);color:#fff;
  font:900 9px/1 ui-sans-serif,sans-serif;
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(2px);
  transition:opacity .16s ease,transform .16s ease;
}
#ms-studio-master-modal .studio-photo-result-preview:hover .studio-photo-result-add,
#ms-studio-master-modal .studio-photo-result-preview:focus-visible .studio-photo-result-add,
#ms-studio-master-modal .studio-media-preview-add:hover .studio-media-add-pill,
#ms-studio-master-modal .studio-media-preview-add:focus-visible .studio-media-add-pill {
  opacity:1;transform:none;
}
#ms-studio-master-modal .studio-photo-result-meta {
  min-width:0;padding:8px 9px;
}
#ms-studio-master-modal .studio-photo-result-meta b {
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#0f172a;font:850 9.5px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-photo-result-meta a {
  display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#4f46e5;font:750 8.5px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-media-preview { position:relative; }
#ms-studio-master-modal .studio-media-favorite {
  position:absolute;left:7px;top:7px;z-index:5;
  display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:9px;background:rgba(255,255,255,.92);
  color:#4338ca;font-size:15px;box-shadow:0 2px 8px rgba(15,23,42,.15);
}
#ms-studio-master-modal .studio-media-type-badge {
  position:absolute;left:7px;bottom:7px;z-index:3;
  padding:4px 6px;border-radius:7px;background:rgba(15,23,42,.82);
  color:#fff;font:900 7px/1 ui-sans-serif,sans-serif;letter-spacing:.07em;
}
#ms-studio-master-modal .studio-media-preview-meta {
  display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:6px;
  padding:8px;
}
#ms-studio-master-modal .studio-media-title {
  min-width:0;border:0;background:none;padding:0;text-align:left;color:inherit;
}
#ms-studio-master-modal .studio-media-title b,
#ms-studio-master-modal .studio-media-title span {
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#ms-studio-master-modal .studio-media-title b {
  color:#0f172a;font:850 10px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-media-title span {
  margin-top:3px;color:#64748b;font:700 8.5px/1.2 ui-sans-serif,sans-serif;
}
#ms-studio-master-modal .studio-media-details {
  width:32px;height:32px;border:1px solid #e2e8f0;border-radius:9px;
  background:#f8fafc;color:#475569;font-size:12px;font-weight:900;
}
@media (max-width:768px) {
  #ms-studio-master-modal .studio-photo-result-add,
  #ms-studio-master-modal .studio-media-add-pill { opacity:1;transform:none; }
  #ms-studio-master-modal .studio-photo-result-preview,
  #ms-studio-master-modal .studio-media-preview-add { min-height:116px; }
}
.dark #ms-studio-master-modal .studio-photo-result-card,
.dark #ms-studio-master-modal .studio-media-preview-card {
  border-color:#2d405f;background:#111d32;
}
.dark #ms-studio-master-modal .studio-photo-result-preview,
.dark #ms-studio-master-modal .studio-media-preview-add {
  background:linear-gradient(145deg,#0b1527,#182740);
}
.dark #ms-studio-master-modal .studio-photo-result-meta b,
.dark #ms-studio-master-modal .studio-media-title b { color:#eef4ff; }
.dark #ms-studio-master-modal .studio-media-title span { color:#93a4ba; }
.dark #ms-studio-master-modal .studio-media-favorite {
  background:rgba(17,29,50,.94);color:#c7d2fe;
}
.dark #ms-studio-master-modal .studio-media-details {
  border-color:#344866;background:#182740;color:#dbeafe;
}


/* ── Design Studio preview consistency · 2026-10-06 ───────────────────
   Templates and saved projects keep their actual aspect ratio in every browser,
   drawer and preview sheet. openStudioSheet() is body-mounted, so the sheet
   selectors are intentionally not scoped to #ms-studio-master-modal. */
#ms-studio-master-modal .studio-template-preview-fit,
#studio-action-sheet .studio-template-preview-fit {
  position:relative;
  display:block;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
  aspect-ratio:var(--studio-template-ratio);
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
#ms-studio-master-modal .studio-template-preview-fit.fit-width,
#studio-action-sheet .studio-template-preview-fit.fit-width { width:100%; }
#ms-studio-master-modal .studio-template-preview-fit.fit-height,
#studio-action-sheet .studio-template-preview-fit.fit-height { height:100%; }
#ms-studio-master-modal .studio-template-preview-fit > .studio-template-preview,
#studio-action-sheet .studio-template-preview-fit > .studio-template-preview {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#ms-studio-master-modal .studio-template-card .studio-template-visual {
  width:100%;
  min-height:0 !important;
  aspect-ratio:4/3;
  padding:10px;
}

#ms-studio-master-modal .studio-project-preview-stage,
#studio-action-sheet .studio-project-preview-stage {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:4/3;
  padding:10px;
  overflow:hidden;
  background:#eef2f7;
}
#ms-studio-master-modal .studio-project-preview-fit,
#studio-action-sheet .studio-project-preview-fit {
  position:relative;
  display:block;
  max-width:100%;
  max-height:100%;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
  aspect-ratio:var(--studio-project-ratio);
  box-shadow:0 7px 18px rgba(15,23,42,.16);
}
#ms-studio-master-modal .studio-project-preview-fit.fit-width,
#studio-action-sheet .studio-project-preview-fit.fit-width { width:100%; }
#ms-studio-master-modal .studio-project-preview-fit.fit-height,
#studio-action-sheet .studio-project-preview-fit.fit-height { height:100%; }
#ms-studio-master-modal .studio-project-preview-fit > .studio-template-preview,
#studio-action-sheet .studio-project-preview-fit > .studio-template-preview {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

#studio-action-sheet .studio-template-preview-sheet { display:grid;gap:16px; }
#studio-action-sheet .studio-template-preview-stage {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:360px;
  padding:18px;
  border-radius:18px;
  background:#e9eef5;
  overflow:hidden;
}
#studio-action-sheet .studio-template-preview-fit-large.fit-width {
  width:min(100%,920px);
}
#studio-action-sheet .studio-template-preview-fit-large.fit-height {
  height:min(62dvh,720px);
}
#studio-action-sheet .studio-template-preview-primary {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
#studio-action-sheet .studio-template-preview-more {
  border:1px solid #dbe3ef;
  border-radius:12px;
  padding:10px 12px;
}
#studio-action-sheet .studio-template-preview-more summary {
  cursor:pointer;
  color:#334155;
  font:900 11px/1.2 ui-sans-serif,sans-serif;
}
#studio-action-sheet > section.studio-template-preview-dialog {
  max-width:min(1120px,calc(100vw - 32px)) !important;
}

.dark #ms-studio-master-modal .studio-template-preview-fit,
.dark #ms-studio-master-modal .studio-project-preview-fit,
html.dark #studio-action-sheet .studio-template-preview-fit,
html.dark #studio-action-sheet .studio-project-preview-fit {
  background:#0f172a;
}
.dark #ms-studio-master-modal .studio-project-preview-stage,
html.dark #studio-action-sheet .studio-template-preview-stage,
html.dark #studio-action-sheet .studio-project-preview-stage {
  background:#0b1527;
}
html.dark #studio-action-sheet .studio-template-preview-more { border-color:#344866; }
html.dark #studio-action-sheet .studio-template-preview-more summary { color:#dbeafe; }

@media (max-width:768px) {
  #studio-action-sheet > section.studio-template-preview-dialog { max-width:none !important; }
}
@media (max-width:640px) {
  #ms-studio-master-modal .studio-template-card .studio-template-visual { padding:8px; }
  #ms-studio-master-modal .studio-project-preview-stage,
  #studio-action-sheet .studio-project-preview-stage { padding:8px; }
  #studio-action-sheet .studio-template-preview-stage { min-height:250px;padding:10px; }
  #studio-action-sheet .studio-template-preview-fit-large.fit-height { height:min(50dvh,500px); }
  #studio-action-sheet .studio-template-preview-primary { grid-template-columns:1fr; }
}


/* ── Design Studio preview resilience · 2026-10-06 ─────────────────────
   Never show a dead grey rectangle when the source has no rendered frame yet. */
#ms-studio-master-modal .studio-project-empty-preview,
#studio-action-sheet .studio-project-empty-preview {
  display:grid;
  width:100%;
  height:100%;
  min-height:120px;
  place-content:center;
  justify-items:center;
  gap:6px;
  padding:18px;
  background:
    radial-gradient(circle at 50% 18%,rgba(99,102,241,.16),transparent 34%),
    linear-gradient(145deg,#f8fafc,#eef2ff);
  color:#475569;
  text-align:center;
}
#ms-studio-master-modal .studio-project-empty-icon,
#studio-action-sheet .studio-project-empty-icon {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid #c7d2fe;
  border-radius:13px;
  background:#fff;
  color:#4f46e5;
  font:900 22px/1 ui-sans-serif,sans-serif;
  box-shadow:0 6px 18px rgba(79,70,229,.10);
}
#ms-studio-master-modal .studio-project-empty-preview b,
#studio-action-sheet .studio-project-empty-preview b {
  max-width:100%;
  overflow:hidden;
  color:#0f172a;
  font:900 11px/1.2 ui-sans-serif,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#ms-studio-master-modal .studio-project-empty-preview small,
#studio-action-sheet .studio-project-empty-preview small {
  color:#64748b;
  font:750 9px/1 ui-sans-serif,sans-serif;
}

#ms-studio-master-modal .studio-media-preview-add {
  isolation:isolate;
}
#ms-studio-master-modal .studio-media-video-fallback {
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  background:
    radial-gradient(circle at 50% 35%,rgba(99,102,241,.28),transparent 30%),
    linear-gradient(145deg,#0f172a,#1e293b);
  color:#fff;
}
#ms-studio-master-modal .studio-media-video-fallback > span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding-left:3px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  font-size:16px;
  backdrop-filter:blur(8px);
}
#ms-studio-master-modal .studio-media-video-fallback small {
  font:850 9px/1 ui-sans-serif,sans-serif;
  letter-spacing:.04em;
  opacity:.82;
}
#ms-studio-master-modal .studio-media-video {
  position:relative;
  z-index:1;
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
#ms-studio-master-modal .studio-media-preview-add.is-loaded .studio-media-video { opacity:1; }
#ms-studio-master-modal .studio-media-preview-add.is-loaded .studio-media-video-fallback { opacity:0; }
#ms-studio-master-modal .studio-media-preview-add.is-broken .studio-media-video { display:none; }
#ms-studio-master-modal .studio-media-preview-add.is-broken .studio-media-video-fallback small::after {
  content:' unavailable';
}
.dark #ms-studio-master-modal .studio-project-empty-preview,
html.dark #studio-action-sheet .studio-project-empty-preview {
  background:
    radial-gradient(circle at 50% 18%,rgba(99,102,241,.18),transparent 34%),
    linear-gradient(145deg,#0b1527,#111d32);
  color:#cbd5e1;
}
.dark #ms-studio-master-modal .studio-project-empty-icon,
html.dark #studio-action-sheet .studio-project-empty-icon {
  border-color:#344866;
  background:#111d32;
  color:#a5b4fc;
}
.dark #ms-studio-master-modal .studio-project-empty-preview b,
html.dark #studio-action-sheet .studio-project-empty-preview b { color:#f8fafc; }


/* ── Design Studio mobile contextual selection dock · 2026-10-06 ────────
   The old floating object pill was removed on phones because it drifted off
   canvas. This dock keeps the core selected-object actions thumb reachable
   without reopening Menu or forcing the inspector open for every tap. */
#ms-studio-master-modal .studio-mobile-selection-dock { display:none; }

@media (max-width:768px) {
  #ms-studio-master-modal .studio-mobile-selection-dock {
    position:absolute;
    left:12px;
    right:12px;
    bottom:72px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:8px;
    min-height:54px;
    padding:6px 7px;
    border:1px solid rgba(148,163,184,.45);
    border-radius:16px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 34px rgba(15,23,42,.18);
    backdrop-filter:blur(18px) saturate(1.2);
  }
  #ms-studio-master-modal .studio-mobile-selection-dock[hidden] { display:none !important; }
  #ms-studio-master-modal .studio-mobile-selection-kind {
    flex:0 0 auto;
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0 4px;
    color:#475569;
    font-size:10px;
    font-weight:900;
  }
  #ms-studio-master-modal .studio-mobile-selection-actions {
    display:flex;
    flex:1 1 auto;
    min-width:0;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #ms-studio-master-modal .studio-mobile-selection-actions::-webkit-scrollbar { display:none; }
  #ms-studio-master-modal .studio-mobile-selection-action {
    flex:0 0 auto;
    min-height:42px;
    padding:0 12px;
    border:1px solid #d7dfeb;
    border-radius:11px;
    background:#f8fafc;
    color:#0f172a;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }
  #ms-studio-master-modal .studio-mobile-selection-action:active {
    transform:translateY(1px);
    background:#eef2ff;
    border-color:#a5b4fc;
  }
  #ms-studio-master-modal .studio-mobile-selection-action.is-danger {
    color:#b91c1c;
    background:#fff7f7;
    border-color:#fecaca;
  }
  html.dark #ms-studio-master-modal .studio-mobile-selection-dock {
    background:rgba(13,23,41,.96);
    border-color:#334155;
    box-shadow:0 12px 34px rgba(2,6,23,.42);
  }
  html.dark #ms-studio-master-modal .studio-mobile-selection-kind { color:#aebdd0; }
  html.dark #ms-studio-master-modal .studio-mobile-selection-action {
    background:#111d32;
    border-color:#344866;
    color:#f8fafc;
  }
  html.dark #ms-studio-master-modal .studio-mobile-selection-action.is-danger {
    color:#fecaca;
    background:#3b1820;
    border-color:#7f1d1d;
  }
}