.support-builder-layout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.support-builder-dialog [data-support-layout] fieldset { min-width: 0; margin-block: 12px; }
.support-builder-dialog [data-support-layout] button { margin: 3px; max-width: 100%; white-space: normal; }
.support-builder-dialog [data-support-layout] select { max-width: 100%; }
.builder-reconnect-dialog { width: min(480px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border: 1px solid #dde1eb; border-radius: 18px; color: #11131a; background: white; }
.builder-reconnect-dialog::backdrop { background: #10172ab3; backdrop-filter: blur(3px); }
.builder-reconnect-dialog h2 { margin: 0 0 12px; font-size: 23px; }
.builder-reconnect-dialog p { font-size: 14px; line-height: 1.5; color: #546079; }
.builder-reconnect-dialog [role="status"]:empty { display: none; }
.builder-reconnect-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.support-builder-dialog { width: min(1440px, calc(100vw - 32px)); max-width: none; height: min(940px, calc(100dvh - 32px)); max-height: none; padding: 0; border: 1px solid #dde1eb; border-radius: 20px; color: #111; background: #f8f9fc; }
.support-builder-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.support-builder-dialog::backdrop { background: #10172ab3; backdrop-filter: blur(5px); }
.support-builder-dialog > header, .support-builder-dialog > footer { display: flex; gap: 16px; align-items: center; padding: 16px 24px; background: white; }
.support-builder-dialog > header h2 { margin: 0; font-size: 22px; }
.support-builder-dialog > header button { margin-left: auto; }
.support-builder-scope, .support-builder-status { font-size: 13px; color: #546079; }
.support-builder-status { margin: 0; padding: 10px 24px; min-height: 40px; }
.support-builder-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 0; gap: 16px; padding: 0 20px; }
.support-builder-editor { overflow: auto; padding: 4px 12px 20px 0; display: block; }
.support-builder-editor label { display: grid; gap: 5px; margin-bottom: 12px; font-size: 13px; }
.support-builder-editor input, .support-builder-editor select { width: 100%; min-width: 0; border: 1px solid #cbd1e1; border-radius: 8px; padding: 9px 12px; font: inherit; }
.support-builder-editor input:disabled, .support-builder-editor select:disabled { background: #edf0f5; color: #596077; }
.support-builder-editor details { margin: 12px 0; border-bottom: 1px solid #dde1eb; }
.support-builder-editor summary { padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.support-builder-editor input:user-invalid { border-color: #b42318; }
.support-builder-editor fieldset > button { margin: 4px 6px 0 0; }
.support-builder-advanced { min-width: 0; }
.support-builder-advanced [data-support-advanced-error], .support-builder-advanced [data-support-connection-error] { color: #b42318; font-size: 13px; }
.support-builder-advanced button { margin: 4px 4px 8px 0; white-space: normal; }
.support-builder-advanced textarea { width: 100%; min-width: 0; font: inherit; }
.support-builder-advanced input[type="checkbox"] { width: auto; }
.support-builder-advanced .builder-element-fields, .support-builder-advanced .connection-condition { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.support-builder-editor fieldset { min-width: 0; border: 1px solid #e1e5ee; border-radius: 12px; padding: 12px; margin: 16px 0; background: white; }
.support-builder-editor legend { padding: 0 4px; font-size: 12px; color: #596077; }
.support-builder-preview.studio-shell[data-builder-active="true"] { display: block; height: 100%; min-width: 0; min-height: 0; overflow: auto; background: white; border-radius: 14px; border: 1px solid #e1e5ee; }
.support-builder-preview [data-builder-player] { height: 100%; min-height: 360px; }
.support-builder-preview.studio-shell .builder-player-layout { height: 100%; max-height: none; }
.support-builder-pager { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.support-builder-dialog > footer { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
@media(max-width: 700px) {
  .support-builder-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 14px; }
  .support-builder-dialog > header { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .support-builder-scope { order: 3; flex-basis: 100%; }
  .support-builder-body { display: flex; flex-direction: column; overflow: auto; padding: 0 12px; }
  .support-builder-editor { overflow: visible; order: 2; }
  .support-builder-preview.studio-shell[data-builder-active="true"] { min-height: 340px; flex: 0 0 340px; order: 1; }
  .support-builder-dialog .support-builder-preview.studio-shell[data-builder-active="true"] .builder-player-layout { height: auto; min-height: 340px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 300px auto auto auto; grid-template-areas: "top" "viewer" "right" "left" "bottom"; overflow: visible; }
  .support-builder-dialog .support-builder-preview [data-builder-player] { height: auto; overflow: visible; }
}

/* MAIL-OPS-1: compact provider operations; no recipient or message content is rendered. */
.operator-mail-page{display:grid;gap:18px}.operator-mail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}.operator-mail-operations{min-width:0}.operator-mail-operations form{margin-top:18px}.operator-mail-operations fieldset{border:0;margin:0;padding:0;display:grid;gap:14px}.operator-mail-policy-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.operator-mail-operations label{display:grid;gap:7px;font-size:12px;font-weight:700;color:var(--ink,#182033)}.operator-mail-operations select,.operator-mail-operations input[type="text"],.operator-mail-operations input[type="email"]{width:100%;min-height:42px;border:1px solid var(--line,#d9dfeb);border-radius:10px;background:#fff;padding:0 12px;font:inherit}.operator-mail-failover{display:flex!important;align-items:center;gap:9px!important;font-weight:600!important}.operator-mail-failover input{width:18px;height:18px}.operator-mail-last-switch{margin:14px 0 0;padding:11px 12px;border-radius:10px;background:#f7f8fb;color:var(--muted,#667085);font-size:12px;line-height:1.45}.operator-mail-provider-list,.operator-mail-history{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0}.operator-mail-provider-list li,.operator-mail-history li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line,#e3e7ef)}.operator-mail-provider-list li:first-child,.operator-mail-history li:first-child{border-top:0}.operator-mail-provider-list li>span,.operator-mail-history li>span:first-child{display:grid;gap:3px;min-width:0}.operator-mail-provider-list small,.operator-mail-history small{color:var(--muted,#667085);font-weight:500}.operator-mail-provider-list svg{width:18px;height:18px;flex:0 0 auto}.operator-mail-state{border-radius:999px;padding:4px 8px;background:#eef2f8;color:#475467;font-size:11px;font-weight:800;white-space:nowrap}.operator-mail-state.is-accepted,.operator-mail-state.is-delivered{background:#dff5e8;color:#17663b}.operator-mail-state.is-bounce,.operator-mail-state.is-complaint,.operator-mail-state.is-acceptance_unknown,.operator-mail-state.is-safe_rejected,.operator-mail-state.is-permanent_rejected,.operator-mail-state.is-configuration_error{background:#fff0e5;color:#8a3f14}@media(max-width:900px){.operator-mail-grid,.operator-mail-policy-fields{grid-template-columns:1fr}}
:root {
  color: #0d0d0d;
  background: #f7f7f8;
  font-family: "DM Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #0d0d0d;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --surface: #ffffff;
  --soft: #f7f7f8;
  --accent: #4f6bff;
  --accent-dark: #394fd6;
  --accent-soft: #eef1ff;
  --sidebar: #0d0d0d;
  --sidebar-soft: #1a1a1a;
  --studio-nav-background: radial-gradient(circle at 20% 7%, rgb(79 107 255 / 20%), transparent 25%), linear-gradient(180deg, #111111, #090909 72%);
  --success: #168653;
  --shadow: 0 12px 34px rgb(13 13 13 / 8%);
}

* { box-sizing: border-box; }

html { min-width: 0; min-height: 100%; scroll-behavior: smooth; }

body { margin: 0; min-height: 100vh; background: #f7f7f8; color: var(--ink); }

button, input, select { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 9px;
  color: #fff;
  background: var(--accent);
  transform: translateY(-150%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.studio-shell { min-height: 100vh; display: grid; grid-template-columns: var(--studio-sidebar-width, 252px) minmax(0, 1fr); }

/* GOLDEN-5B-G: Studio appearance is a browser-local preference. Scaling the
   complete shell preserves its visual hierarchy and gives labels, controls,
   icons and spacing the same predictable treatment. */
html[data-studio-appearance="compact"] .studio-shell { width: 111.12%; zoom: .9; min-height: 111.12vh; }
html[data-studio-appearance="compact"] .sidebar { height: 111.12vh; }
html[data-studio-appearance="large"] .studio-shell { width: 88.89%; zoom: 1.125; min-height: 88.89vh; }
html[data-studio-appearance="large"] .sidebar { height: 88.89vh; }
html[data-studio-appearance="extra_large"] .studio-shell { width: 80%; zoom: 1.25; min-height: 80vh; }
html[data-studio-appearance="extra_large"] .sidebar { height: 80vh; }
html[data-studio-appearance="compact"] body,
html[data-studio-appearance="large"] body,
html[data-studio-appearance="extra_large"] body { overflow-x: clip; }

.sidebar {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 25px 18px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #f9fafb;
  background: var(--studio-nav-background);
  border-right: 1px solid rgb(255 255 255 / 6%);
}

.sidebar-resize-handle {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background 140ms ease; }
.sidebar-resize-handle:hover::after, .sidebar-resize-handle:focus-visible::after, .sidebar-resize-handle[data-dragging="true"]::after { background: #7187ff; }

.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 7px 23px; }
.sidebar-collapse-button { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; margin-left: auto; border: 1px solid rgb(255 255 255 / 10%); border-radius: 8px; color: #aeb8c2; background: rgb(255 255 255 / 5%); cursor: pointer; }
.sidebar-collapse-button:hover, .sidebar-collapse-button:focus-visible { color: #fff; background: rgb(255 255 255 / 10%); }
.sidebar-collapse-button .icon { width: 15px; height: 15px; transform: rotate(180deg); transition: transform 180ms ease; }

.brand-mark { width: 30px; height: 24px; display: block; object-fit: contain; filter: invert(1); }
.brand-name { font-size: 18px; font-weight: 760; letter-spacing: -.4px; }
.brand-product { margin-left: -4px; font-size: 12px; font-weight: 650; color: #aeb8ff; }

.workspace-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin-bottom: 24px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 12px;
  background: rgb(255 255 255 / 5%);
}

.workspace-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ffffff;
  background: #4f6bff;
  font-size: 13px;
  font-weight: 800;
}

.workspace-copy, .workspace-copy strong, .workspace-copy small { display: block; min-width: 0; }
.workspace-copy strong { overflow: hidden; color: #f9fafb; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-copy small { margin-top: 3px; color: #9ca3af; font-size: 10px; }

.main-nav { min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 16%) transparent; }
.nav-label { margin: 0 10px 9px; color: #737373; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.main-nav ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.admin-nav-group + .admin-nav-group { margin-top: 17px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 43px; overflow: hidden; padding: 0 12px; border-radius: 10px; color: #a3a3a3; text-decoration: none; font-size: 13px; font-weight: 560; transition: color 150ms ease, background 150ms ease, transform 150ms ease; }
.nav-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .icon { width: 18px; height: 18px; }
.nav-link:hover { color: #ffffff; background: rgb(255 255 255 / 6%); transform: translateX(1px); }
.nav-link.is-active { color: #fff; background: linear-gradient(90deg, #3448c8, #4f6bff); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), 0 8px 20px rgb(0 0 0 / 16%); }
.nav-link.is-active .icon { color: #ffffff; }

.sidebar-footer { position: relative; display: grid; gap: 9px; padding-top: 18px; }
.local-safety { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border: 1px solid rgb(122 143 255 / 22%); border-radius: 11px; color: #c8d0ff; background: rgb(79 107 255 / 12%); }
.local-safety .icon { width: 16px; height: 16px; }
.local-safety span, .local-safety strong, .local-safety small { display: block; }
.local-safety strong { color: #eef0ff; font-size: 11px; }
.local-safety small { margin-top: 2px; color: #9ea9e8; font-size: 9px; }
.profile-card { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; gap: 9px; align-items: center; padding: 9px 8px; border: 0; border-radius: 10px; color: #e5e7eb; background: transparent; text-align: left; cursor: pointer; }
.profile-card:hover, .profile-card[aria-expanded="true"] { background: rgb(255 255 255 / 7%); }
.profile-card span:nth-child(2), .profile-card strong, .profile-card small { display: block; min-width: 0; }
.profile-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-card small { margin-top: 2px; color: #9ca3af; font-size: 9px; text-transform: capitalize; }
.profile-card .icon { width: 16px; height: 16px; color: #737373; }
.profile-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #ffffff; background: #4f6bff; font-size: 10px; font-weight: 800; }
.account-menu-shell { position: relative; min-width: 0; }
.account-menu { position: absolute; z-index: 75; right: 0; bottom: calc(100% + 8px); left: 0; display: grid; gap: 3px; padding: 7px; border: 1px solid #343434; border-radius: 12px; color: #e5e7eb; background: #191919; box-shadow: 0 18px 44px rgb(0 0 0 / 38%); }
.account-menu[hidden] { display: none; }
.account-menu-identity { min-width: 0; padding: 8px 9px 10px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.account-menu-identity strong, .account-menu-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity strong { font-size: 11px; }
.account-menu-identity small { margin-top: 3px; color: #929292; font-size: 9px; text-transform: capitalize; }
.account-menu-link { width: 100%; min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px; border: 0; border-radius: 8px; color: #d4d4d4; background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu-link:hover, .account-menu-link:focus-visible, .account-menu-link.is-active { color: #fff; background: rgb(255 255 255 / 7%); }
.account-menu-link .icon { width: 15px; height: 15px; color: #9ea9e8; }
.account-menu-link span, .account-menu-link strong, .account-menu-link small { display: block; min-width: 0; }
.account-menu-link strong { font-size: 10px; }
.account-menu-link small { margin-top: 3px; color: #929292; font-size: 8px; }
.account-menu-sign-out { margin-top: 3px; border-top: 1px solid rgb(255 255 255 / 9%); border-radius: 0 0 8px 8px; }

@media (min-width: 901px) {
  .studio-shell[data-sidebar-collapsed="true"] { grid-template-columns: 76px minmax(0, 1fr); }
  .studio-shell[data-sidebar-collapsed="true"] .sidebar { padding-inline: 10px; overflow: hidden; }
  .studio-shell[data-sidebar-collapsed="true"] .brand-lockup { justify-content: center; padding-inline: 0; }
  .studio-shell[data-sidebar-collapsed="true"] .brand-name,
  .studio-shell[data-sidebar-collapsed="true"] .brand-product,
  .studio-shell[data-sidebar-collapsed="true"] .workspace-copy,
  .studio-shell[data-sidebar-collapsed="true"] .workspace-card > .icon-button,
  .studio-shell[data-sidebar-collapsed="true"] .nav-label,
  .studio-shell[data-sidebar-collapsed="true"] .nav-link span,
  .studio-shell[data-sidebar-collapsed="true"] .local-safety span,
  .studio-shell[data-sidebar-collapsed="true"] .profile-card span:nth-child(2),
  .studio-shell[data-sidebar-collapsed="true"] .profile-card > .icon { display: none; }
  .studio-shell[data-sidebar-collapsed="true"] .brand-mark { width: 32px; }
  .studio-shell[data-sidebar-collapsed="true"] .sidebar-collapse-button { position: absolute; top: 62px; margin: 0; }
  .studio-shell[data-sidebar-collapsed="true"] .sidebar-collapse-button .icon { transform: rotate(0); }
  .studio-shell[data-sidebar-collapsed="true"] .workspace-card { grid-template-columns: 34px; justify-content: center; padding: 8px; margin-top: 32px; }
  .studio-shell[data-sidebar-collapsed="true"] .nav-link { justify-content: center; padding: 0; }
  .studio-shell[data-sidebar-collapsed="true"] .local-safety { justify-content: center; padding: 11px; }
  .studio-shell[data-sidebar-collapsed="true"] .profile-card { grid-template-columns: 32px; justify-content: center; padding-inline: 0; }
  .studio-shell[data-sidebar-collapsed="true"] .sidebar-resize-handle { display: none; }
  .studio-shell[data-sidebar-collapsed="true"] .account-menu { width: 220px; right: auto; left: 0; }
}

.account-usage-panel { padding: 22px; }
.account-usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.account-usage-grid article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfa; }
.account-usage-grid article > span, .account-usage-grid article > strong { display: block; }
.account-usage-grid article > span { color: var(--muted); font-size: 10px; }
.account-usage-grid article > strong { margin-top: 8px; font-size: 21px; }
.account-usage-grid article small { color: var(--muted); font-size: 11px; font-weight: 550; }
.account-usage-meter { height: 7px; margin-top: 13px; overflow: hidden; border-radius: 999px; background: #e7ebe9; }
.account-usage-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 180ms ease; }
.account-usage-item.is-warning .account-usage-meter > span { background: #b98517; }
.account-usage-item.is-over .account-usage-meter > span { background: #b74242; }
.account-usage-grid article > .account-usage-percent { display: block; margin-top: 7px; }
#membership-billing + #account-usage { margin-top: 16px; }
.billing-access-kind { display: flex; margin: 14px 0 4px; }
.account-operations-summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 20px 22px; }
.account-operations-summary .workspace-avatar { width: 44px; height: 44px; }
.account-operations-summary h2 { margin: 3px 0 4px; font-size: 20px; }
.account-operations-summary p { margin: 0; color: var(--muted); font-size: 10px; }
.account-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.account-operation-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 13px; align-items: start; padding: 19px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: var(--shadow); text-decoration: none; }
.account-operation-card:hover, .account-operation-card:focus-visible { border-color: #a9b7ff; box-shadow: 0 0 0 3px rgb(76 107 255 / 10%); }
.account-operation-card > .icon:first-child { width: 42px; height: 42px; padding: 11px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.account-operation-card > .icon:last-child { width: 18px; height: 18px; align-self: center; color: #8791a1; }
.account-operation-card span, .account-operation-card small, .account-operation-card strong, .account-operation-card p, .account-operation-card em { display: block; min-width: 0; }
.account-operation-card small { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.account-operation-card strong { margin-top: 5px; font-size: 13px; }
.account-operation-card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.account-operation-card em { width: fit-content; max-width: 100%; margin-top: 10px; overflow: hidden; padding: 4px 7px; border-radius: 999px; color: #41578f; background: #eef2ff; font-size: 8px; font-style: normal; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.account-operations-boundary { margin-top: 14px; }

.studio-column { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 68px; position: sticky; z-index: 40; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 92%); backdrop-filter: blur(14px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.breadcrumb span, .breadcrumb b { color: #8a958e; font-weight: 500; }
.breadcrumb b { font-size: 10px; }
.breadcrumb strong { font-weight: 680; }
.mobile-menu-button { display: none !important; }

.global-search { width: min(260px, 24vw); height: 36px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 0 9px 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #f8faf9; color: #7f8b83; }
.global-search:focus-within { border-color: #70aa89; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); background: #fff; }
.global-search .icon { width: 16px; height: 16px; }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.global-search input::placeholder { color: #909a94; }
.global-search kbd { padding: 2px 5px; border: 1px solid #d9e0dc; border-radius: 4px; color: #8c9790; background: #fff; font-family: inherit; font-size: 8px; box-shadow: 0 1px 1px rgb(0 0 0 / 4%); }
.preview-pill { height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #cfe4d7; border-radius: 999px; color: #23714a; background: #f1faf5; font-size: 9px; font-weight: 700; white-space: nowrap; }
.preview-pill span { width: 6px; height: 6px; border-radius: 50%; background: #2faf65; box-shadow: 0 0 0 3px rgb(47 175 101 / 13%); }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; text-decoration: none; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: background 150ms ease, border 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.button:hover { transform: translateY(-1px); }
.button .icon { width: 15px; height: 15px; }
.button-primary { color: #fff; background: var(--accent); box-shadow: 0 5px 12px rgb(8 122 71 / 18%); }
.button-primary:hover { background: var(--accent-dark); box-shadow: 0 7px 16px rgb(8 122 71 / 22%); }
.button-secondary { border-color: var(--line-strong); color: #36423b; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
.button-secondary:hover { border-color: #aebcb3; background: #f9fbfa; }
.button-danger { color: #ffffff; background: #b42318; box-shadow: 0 5px 12px rgb(180 35 24 / 18%); }
.button-danger:hover { background: #912018; box-shadow: 0 7px 16px rgb(180 35 24 / 23%); }
.button-light { color: #145332; background: #f2fff7; }
.button-light:hover { background: #fff; }
.button-ghost-light { border-color: rgb(255 255 255 / 26%); color: #e8f7ed; background: rgb(255 255 255 / 7%); }
.button-ghost-light:hover { background: rgb(255 255 255 / 13%); }
.button-icon { padding: 0 12px; }
.button:disabled { opacity: .58; cursor: wait; transform: none; }

.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: 9px; color: #5e6b63; background: transparent; cursor: pointer; }
.icon-button:hover { border-color: var(--line); color: var(--ink); background: #f7faf8; }
.icon-button .icon { width: 18px; height: 18px; }
.icon-button.compact { width: 26px; height: 26px; }
.icon-button.compact .icon { width: 14px; height: 14px; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid rgb(41 85 243 / 32%); outline-offset: 2px; }

.studio-main { width: 100%; max-width: 1510px; margin: 0 auto; padding: 35px 34px 60px; outline: none; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 3px 0 7px; color: #16231b; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.page-heading > div > p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.eyebrow { margin: 0; color: var(--accent); font-size: 9px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.page-actions { display: flex; gap: 10px; }

.hero-card { min-height: 280px; position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); overflow: hidden; border-radius: 19px; color: #fff; background: linear-gradient(118deg, #0b4429 0%, #09643a 48%, #117b49 100%); box-shadow: 0 18px 46px rgb(8 72 40 / 17%); }
.hero-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 76% 10%, rgb(177 255 207 / 15%), transparent 31%), linear-gradient(90deg, transparent, rgb(255 255 255 / 3%)); }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 39px 42px; }
.hero-kicker { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border: 1px solid rgb(183 239 203 / 23%); border-radius: 999px; color: #c7efd5; background: rgb(255 255 255 / 7%); font-size: 9px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.hero-copy h2 { max-width: 660px; margin: 14px 0 10px; font-size: clamp(25px, 3vw, 40px); line-height: 1.05; letter-spacing: -.045em; }
.hero-copy p { max-width: 520px; margin: 0; color: #c6dfd0; font-size: 12px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.hero-visual { position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; width: 210px; height: 50px; bottom: 46px; border-radius: 50%; background: rgb(1 36 19 / 25%); filter: blur(10px); }
.hero-orbit { position: absolute; border: 1px solid rgb(187 236 203 / 15%); border-radius: 50%; }
.orbit-one { width: 340px; height: 340px; }
.orbit-two { width: 230px; height: 230px; }
.hero-product { position: relative; z-index: 2; width: 132px; height: 150px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 18%); border-radius: 23px; background: linear-gradient(145deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 7%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 24px 42px rgb(0 30 14 / 23%); transform: rotate(4deg); backdrop-filter: blur(5px); }
.hero-cube .icon { width: 68px; height: 68px; color: #dcf7e5; stroke-width: 1.2; }
.hero-product-label { position: absolute; right: -8px; top: 13px; min-width: 31px; padding: 5px 7px; border-radius: 6px; color: #134a2d; background: #ddfae7; font-size: 8px; font-weight: 800; box-shadow: 0 5px 12px rgb(0 0 0 / 12%); }
.hero-progress { position: absolute; z-index: 3; right: 25px; bottom: 21px; width: 170px; padding: 10px 12px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 9px; color: #d9eee1; background: rgb(8 51 29 / 60%); backdrop-filter: blur(8px); }
.hero-progress span { display: flex; justify-content: space-between; font-size: 9px; }
.hero-progress strong { color: #fff; }
.hero-progress progress, .progress-cell progress { height: 4px; display: block; overflow: hidden; margin-top: 7px; border: 0; border-radius: 99px; appearance: none; background: rgb(255 255 255 / 15%); }
.hero-progress progress::-webkit-progress-bar, .progress-cell progress::-webkit-progress-bar { border-radius: 99px; background: rgb(255 255 255 / 15%); }
.hero-progress progress::-webkit-progress-value { border-radius: 99px; background: #78dda0; }
.hero-progress progress::-moz-progress-bar { border-radius: 99px; background: #78dda0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 17px 0; }
.metric-card { min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 3px 14px rgb(26 48 34 / 3%); }
.metric-card > div { min-width: 0; }
.metric-card small, .metric-card strong, .metric-card p { display: block; }
.metric-card small { color: #69766e; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric-card strong { margin-top: 4px; font-size: 24px; letter-spacing: -.03em; }
.metric-card p { overflow: hidden; margin: 3px 0 0; color: #8a958e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.metric-icon .icon { width: 18px; height: 18px; }
.metric-icon.green { color: #137449; background: #e8f6ee; }
.metric-icon.blue { color: #315f8d; background: #edf4fb; }
.metric-icon.purple { color: #6b56a0; background: #f3effb; }
.metric-icon.amber { color: #9a6525; background: #fbf2e7; }

.content-grid { display: grid; gap: 17px; }
.content-grid.two-one { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); }
.panel { border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 4px 18px rgb(30 53 38 / 3%); }
.empty-state { min-width: 0; padding: 20px; }
.empty-state h1, .empty-state h2 { margin: 13px 0 8px; }
.empty-state p { max-width: 720px; margin: 0 0 15px; overflow-wrap: anywhere; color: var(--muted); line-height: 1.5; }
.empty-state > .button { width: fit-content; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px 21px 15px; }
.panel-heading h2 { margin: 3px 0 0; font-size: 15px; letter-spacing: -.02em; }
.panel-heading > a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 9px; font-weight: 700; text-decoration: none; }
.panel-heading > a .icon { width: 13px; height: 13px; }
.activity-list { margin: 0; padding: 0 21px 13px; list-style: none; }
.activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 13px 0; border-top: 1px solid #edf1ee; }
.activity-dot { width: 8px; height: 8px; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; }
.activity-dot.tone-green { color: #38a668; background: #38a668; }
.activity-dot.tone-blue { color: #5488ba; background: #5488ba; }
.activity-dot.tone-amber { color: #d49a4f; background: #d49a4f; }
.activity-item strong { display: block; font-size: 11px; }
.activity-item p { margin: 3px 0 0; color: #7a867f; font-size: 9px; line-height: 1.45; }
.activity-item time { color: #9ba49e; font-size: 8px; }
.setup-score { min-width: 34px; padding: 5px 7px; border-radius: 99px; color: var(--accent); background: var(--accent-soft); font-size: 9px; font-weight: 800; text-align: center; }
.setup-list { display: grid; gap: 0; margin: 0; padding: 0 21px 17px; list-style: none; }
.setup-list li { min-height: 49px; display: grid; grid-template-columns: 25px 1fr; gap: 10px; align-items: center; border-top: 1px solid #edf1ee; }
.setup-list li > span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #d8e0db; border-radius: 50%; color: #87938c; font-size: 8px; font-weight: 800; }
.setup-list li > span .icon { width: 12px; height: 12px; }
.setup-list li.is-done > span { border-color: #bfe3cd; color: #13824c; background: #ecf8f1; }
.setup-list strong, .setup-list small { display: block; }
.setup-list strong { font-size: 10px; }
.setup-list small { margin-top: 2px; color: #8a958e; font-size: 8px; }

.table-panel { overflow: hidden; }
.table-toolbar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.table-toolbar > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.table-toolbar > div.collection-heading { align-items: center; min-width: 0; flex-wrap: wrap; }
.table-toolbar h2 { margin: 0; font-size: 14px; }
.table-toolbar > div:first-child span { color: #929c96; font-size: 9px; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.table-search { width: 215px; height: 36px; display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 8px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: #849088; background: #fafcfb; }
.table-search:focus-within { border-color: #70aa89; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); background: #fff; }
.table-search .icon { width: 15px; height: 15px; }
.table-search input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 10px; }
.table-filter { height: 36px; display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: #849088; background: #fafcfb; }
.table-filter:focus-within { border-color: #70aa89; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); background: #fff; }
.table-filter .icon { width: 14px; height: 14px; }
.table-filter select { min-width: 108px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 9px; font-weight: 700; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { height: 36px; padding: 0 18px; color: #849088; background: #f8faf9; font-size: 8px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { height: 68px; padding: 9px 18px; border-top: 1px solid #edf1ee; color: #5e6a63; font-size: 9px; white-space: nowrap; }
tbody tr:hover { background: #fbfdfc; }
.config-name { min-width: 205px; display: flex; align-items: center; gap: 11px; }
.config-name > span:last-child, .config-name strong, .config-name small { display: block; min-width: 0; }
.config-name strong { overflow: hidden; max-width: 220px; color: var(--ink); font-size: 10px; text-overflow: ellipsis; }
.config-name small { margin-top: 3px; color: #919b95; font-size: 8px; }
.configurator-inline-name { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 24px; overflow: hidden; padding: 0 2px; border: 1px solid transparent; border-radius: 4px; outline: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.config-name > span { flex: 1 1 auto; overflow: hidden; }
.config-name > .config-thumb { flex: 0 0 40px; }
.config-name .configurator-inline-name { max-width: 100%; }
.configurator-inline-name:hover { border-color: #cbd3e6; }
.configurator-inline-name:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px rgb(78 101 242 / 13%); text-overflow: clip; }
.configurator-inline-name[aria-busy="true"] { opacity: .65; }
.recovery-review-dialog[aria-busy="false"] .work-dots { display: none; }
.file-work-status { display: inline-flex; align-items: center; font-size: 12px; gap: 3px; padding: 6px 0; }
.work-dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; vertical-align: middle; }
.work-dots > i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: configux-work-dot 1s infinite; }
.work-dots > i:nth-child(2) { animation-delay: .15s; }
.work-dots > i:nth-child(3) { animation-delay: .3s; }
button[aria-busy="true"]:not(:has(.work-dots))::after { content: "•••"; display: inline-block; margin-left: 7px; letter-spacing: 2px; animation: configux-work-dot 1s infinite; }
@keyframes configux-work-dot { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .work-dots > i, button[aria-busy="true"]::after { animation: none; } }
.configurator-new-folder-form:not([hidden]) { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.configurator-new-folder-form input { width: min(210px, 55vw); min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 11px; }
.configurator-folders { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.configurator-folders button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); cursor: pointer; font: inherit; font-size: 11px; }
.configurator-folders .configurator-new-folder-form .button-primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.configurator-folders button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.configurator-folders .icon { width: 14px; height: 14px; }
.configurator-folders .configurator-folder-delete { margin-left: auto; color: #a03f3f; }
.configurator-favorite { width: 25px; height: 25px; flex: 0 0 auto; border: 0; background: none; color: #798397; font-size: 20px; line-height: 1; cursor: pointer; }
.configurator-favorite.is-favorite { color: #e5a521; }
.configurator-favorite:hover { transform: scale(1.08); }
.config-thumb.has-cover { overflow: hidden; background: #fff; }
.config-thumb.has-cover img { width: 100%; height: 100%; object-fit: cover; }
.configurator-card-select { position: absolute; z-index: 2; left: 8px; top: 8px; border-radius: 6px; background: transparent; }
.collection-select { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; cursor: pointer; }
.collection-select input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.collection-master-select { margin-left: -5px; }
.collection-master-select:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 5px; }
.collection-master-select:has(input:disabled) { cursor: default; opacity: .5; }
.collection-bulk-bar:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border-block: 1px solid var(--line); background: #f6f8ff; }
.collection-bulk-bar[hidden] { display: none; }
.collection-bulk-bar strong { margin-right: auto; font-size: 12px; }
.collection-bulk-bar select { min-width: 0; max-width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.studio-confirm-dialog { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; box-shadow: 0 18px 60px rgb(0 0 0 / 20%); }
.studio-confirm-dialog::backdrop { background: rgb(12 18 28 / 48%); }
.studio-confirm-dialog h2 { margin: 0 0 8px; font-size: 18px; }
.studio-confirm-dialog p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }
.studio-confirm-dialog form { display: flex; justify-content: end; gap: 8px; }
.config-thumb { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.config-thumb .icon { width: 20px; height: 20px; }
.thumb-3d { color: #285b7c; background: linear-gradient(145deg, #edf6fb, #dbeaf2); }
.thumb-2d { color: #9b5e36; background: linear-gradient(145deg, #fbf4ed, #f2e1d3); }
.thumb-gallery { color: #285b7c; background: linear-gradient(145deg, #edf6fb, #dbeaf2); }
.thumb-published { color: #247249; background: linear-gradient(145deg, #eff9f3, #dcefe4); }
.status-badge { min-height: 23px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 999px; font-size: 8px; font-weight: 730; text-transform: capitalize; }
.status-badge > span { width: 5px; height: 5px; border-radius: 50%; }
.status-published { color: #177046; background: #eaf7ef; }
.status-published > span { background: #2daf67; }
.status-ready { color: #3d668c; background: #edf4fa; }
.status-ready > span { background: #5c8eb9; }
.status-draft { color: #78694e; background: #f5f1e9; }
.status-draft > span { background: #a99469; }
.mode-badge, .version-chip, .role-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 31px; min-height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; color: #607068; background: #f8faf9; font-size: 8px; font-weight: 750; }
.mode-gallery { color: #71548f; border-color: #e1d8e9; background: #f8f4fb; }
.progress-cell { min-width: 120px; }
.progress-cell span { display: inline-block; width: 28px; color: #6d7971; }
.progress-cell progress { width: 60px; display: inline-block; margin: 0; vertical-align: middle; background: #e7ede9; }
.progress-cell progress::-webkit-progress-bar { background: #e7ede9; }
.progress-cell progress::-webkit-progress-value { border-radius: 99px; background: #52b879; }
.progress-cell progress::-moz-progress-bar { border-radius: 99px; background: #52b879; }
.row-actions { width: 52px; padding-left: 5px; padding-right: 10px; text-align: right; }
.row-actions .icon-button { width: 30px; height: 30px; }
.row-action-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.configurator-action-menu { position: relative; }
.configurator-action-menu > summary { display: grid; list-style: none; cursor: pointer; }
.configurator-action-menu > summary::-webkit-details-marker { display: none; }
.configurator-action-menu[open] > summary { color: var(--accent); background: var(--accent-soft); }
.configurator-action-panel { width: 310px; display: grid; gap: 10px; margin: 5px 0 7px auto; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 12px 30px rgb(22 47 31 / 12%); text-align: left; white-space: normal; }
.configurator-action-panel > strong { color: var(--ink); font-size: 10px; }
.configurator-action-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.configurator-action-facts div { min-width: 0; padding: 8px; border-radius: 7px; background: #f7f9f8; }
.configurator-action-facts dt { color: #859088; font-size: 7px; font-weight: 760; text-transform: uppercase; }
.configurator-action-facts dd { margin: 3px 0 0; color: #445149; font-size: 8px; overflow-wrap: anywhere; }
.configurator-action-empty { margin: 0; color: #7b8780; font-size: 8px; }
.configurator-action-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.configurator-action-links a, .configurator-action-links button { min-height: 31px; display: flex; align-items: center; justify-content: flex-start; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: #34423a; background: #fff; font: inherit; font-size: 8px; font-weight: 690; text-align: left; text-decoration: none; cursor: pointer; }
.configurator-action-links a:hover, .configurator-action-links button:hover:not(:disabled) { border-color: #b9d8c7; color: var(--accent); background: #f5fbf7; }
.configurator-action-links .is-danger { color: #9a3b32; }
.configurator-action-links button:disabled { opacity: .45; cursor: not-allowed; }
.configurator-action-menu[open] + .icon-button { align-self: flex-start; }
.discard-action { color: #9a3b32; }
.discard-action:hover { border-color: #f0d2ce; color: #b42318; background: #fff5f4; }
td code { padding: 4px 6px; border-radius: 5px; color: #5e6c64; background: #f2f5f3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.empty-inline { min-height: 150px; display: grid; justify-items: center; align-content: center; gap: 6px; color: #89958d; }
.empty-inline[hidden] { display: none !important; }
.empty-inline .icon { width: 25px; height: 25px; }
.empty-inline strong { color: #536158; font-size: 11px; }
.route-content-skeleton { min-height: 150px; display: grid; align-content: center; gap: 14px; overflow: hidden; }
.route-skeleton-line, .route-skeleton-grid > span { display: block; border-radius: 8px; background: linear-gradient(100deg, #f0f2f5 20%, #f8f9fb 38%, #f0f2f5 56%); background-size: 220% 100%; animation: route-skeleton-shimmer 1.2s ease-in-out infinite; }
.route-skeleton-line { width: 100%; height: 12px; }
.route-skeleton-line.is-short { width: min(260px, 42%); height: 16px; }
.route-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.route-skeleton-grid > span { min-height: 62px; }
@keyframes route-skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .route-skeleton-line, .route-skeleton-grid > span { animation: none; } }

.lead-metric-grid, .analytics-metric-grid { margin-top: 0; }
.review-environment-label { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid #cfe4d7; border-radius: 999px; color: #1b6e46; background: #eff8f2; font-size: 8px; font-weight: 780; white-space: nowrap; }
.lead-section-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 3px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--surface-muted, #f4f6fb); }
.lead-section-tabs a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 9px; color: var(--muted); font-size: 9px; font-weight: 720; text-decoration: none; }
.lead-section-tabs a[aria-current="page"] { color: var(--text); background: #fff; box-shadow: 0 1px 5px rgb(17 19 26 / 10%); }
.lead-compact-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lead-compact-heading h2 { margin: 3px 0 0; font-size: 16px; }
.lead-compact-heading p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.lead-heading-actions { display: flex; align-items: center; gap: 8px; }
.lead-help-popover { position: relative; flex: 0 0 auto; }
.lead-help-popover > summary { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.lead-help-popover > summary::-webkit-details-marker { display: none; }
.lead-help-popover[open] > summary { border-color: var(--accent); color: var(--accent); }
.lead-help-popover > div { position: absolute; z-index: 30; top: 36px; right: 0; width: min(280px, 72vw); padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; color: #4d5a52; background: #fff; box-shadow: 0 14px 35px rgb(17 24 39 / 14%); font-size: 9px; line-height: 1.55; }
.lead-profile-layout { display: grid; grid-template-columns: minmax(225px, .7fr) minmax(0, 1.6fr); gap: 14px; }
.lead-profile-list, .lead-profile-editor { margin: 0; }
.lead-profile-list { align-self: start; padding: 18px; }
.lead-profile-cards { display: grid; gap: 8px; margin: 14px 0; }
.lead-profile-card { width: 100%; display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.lead-profile-card:hover, .lead-profile-card.is-selected { border-color: #9eb0ff; background: #f6f7ff; }
.lead-profile-card > span:first-child { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lead-profile-card strong { min-width: 0; overflow-wrap: anywhere; font-size: 10px; }
.lead-profile-card span:nth-child(2), .lead-profile-card small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.lead-profile-card > span:first-child small { padding: 3px 6px; border-radius: 999px; color: #3156c7; background: #e9edff; font-size: 7px; font-weight: 760; }
.lead-profile-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lead-switch { display: inline-flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; color: #455149; font-size: 9px; font-weight: 700; cursor: pointer; }
.lead-switch input[type="checkbox"] { width: 34px; height: 20px; position: relative; flex: 0 0 auto; margin: 0; border: 1px solid #cbd3de; border-radius: 999px; background: #e9edf2; appearance: none; cursor: pointer; }
.lead-switch input[type="checkbox"]::after { content: ""; width: 14px; height: 14px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(17 24 39 / 20%); transition: transform .15s ease; }
.lead-switch input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.lead-switch input[type="checkbox"]:checked::after { transform: translateX(14px); }
.lead-switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-routing { display: grid; grid-template-columns: repeat(2, max-content) minmax(220px, 1fr); align-items: start; gap: 10px 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.lead-routing legend { padding: 0 6px; color: #4c5a52; font-size: 8px; font-weight: 780; }
.lead-routing-mode, .lead-routing-choice { display: flex !important; align-items: center; gap: 7px !important; color: #4b5850; font-size: 8px; font-weight: 700; }
.lead-routing-mode input, .lead-routing-choice input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.lead-routing-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; padding-left: 16px; border-left: 1px solid var(--line); }
.lead-profile-actions { justify-content: space-between; }
.lead-test-badge { display: inline-flex; margin-left: 5px; padding: 2px 5px; border-radius: 999px; color: #3156c7; background: #e9edff; font-size: 7px; font-style: normal; font-weight: 780; vertical-align: 1px; }
.lead-email-explainer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 18px 20px; }
.lead-email-explainer h2 { margin: 3px 0 0; font-size: 16px; }
.lead-email-explainer p:not(.eyebrow) { max-width: 760px; margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.lead-email-explainer > .button { flex: 0 0 auto; }
.lead-inbox-panel { overflow: hidden; }
.lead-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 13px; }
.lead-toolbar h2 { margin: 4px 0 0; font-size: 17px; }
.lead-toolbar .table-search { width: min(280px, 42vw); }
.lead-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.lead-select { display: grid; place-items: center; flex: 0 0 auto; min-width: 32px; min-height: 32px; }
.lead-select input { width: 17px; height: 17px; accent-color: var(--accent); }
.data-lifecycle-bulk, .data-lifecycle-apply { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(210px, .7fr) auto; align-items: end; gap: 12px; margin: 14px 20px 0; }
.data-lifecycle-bulk p, .data-lifecycle-apply p { margin: 4px 0 0; }
.data-lifecycle-bulk label, .data-lifecycle-apply label, .settings-two-column label { display: grid; gap: 6px; color: #56645b; font-size: 8px; font-weight: 720; }
.data-lifecycle-bulk input, .data-lifecycle-apply input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font: inherit; font-size: 9px; }
.data-lifecycle-bulk > small { grid-column: 2 / -1; color: var(--muted); }
.lead-filter-bar { display: flex; justify-content: flex-end; gap: 6px; padding: 0 20px 15px; border-bottom: 1px solid var(--line); }
.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 20px; }
.lead-card { min-width: 0; overflow: hidden; border: 1px solid #dfe5e1; border-radius: 12px; background: #fff; }
.lead-card[hidden] { display: none; }
.lead-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid #edf1ee; }
.lead-contact { min-width: 0; display: flex; align-items: center; gap: 10px; }
.lead-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #315f8d; background: #edf4fb; font-size: 9px; font-weight: 800; }
.lead-contact div { min-width: 0; }
.lead-contact h2 { overflow: hidden; margin: 0; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.lead-contact a { display: block; overflow: hidden; margin-top: 3px; color: #68756d; font-size: 8px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.lead-contact a:hover { color: var(--accent); text-decoration: underline; }
.lead-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 14px 15px; }
.lead-facts div { min-width: 0; padding-right: 9px; }
.lead-facts dt { color: #839087; font-size: 7px; font-weight: 740; text-transform: uppercase; }
.lead-facts dd { overflow: hidden; margin: 5px 0 0; color: #35423a; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.lead-facts code { font-size: 8px; }
.lead-timeline { border-top: 1px solid #edf1ee; }
.lead-timeline summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; color: #526159; font-size: 8px; font-weight: 760; cursor: pointer; list-style: none; }
.lead-timeline summary::-webkit-details-marker { display: none; }
.lead-timeline summary span { min-width: 21px; padding: 3px 6px; border-radius: 999px; color: #315f8d; background: #edf4fb; text-align: center; }
.lead-timeline ol { display: grid; gap: 0; margin: 0; padding: 0 15px 13px 28px; list-style: none; }
.lead-timeline li { position: relative; min-height: 36px; padding: 7px 0 7px 10px; border-left: 1px solid #dfe7e2; }
.lead-timeline-marker { position: absolute; top: 11px; left: -4px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #42a56d; box-shadow: 0 0 0 1px #9bc5aa; }
.lead-timeline strong, .lead-timeline time { display: block; }
.lead-timeline strong { color: #35423a; font-size: 8px; }
.lead-timeline time { margin-top: 2px; color: #839087; font-size: 7px; }
.lead-card-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 13px 15px; background: #fafcfb; }
.lead-card-actions label { min-width: 130px; display: grid; gap: 5px; }
.lead-card-actions label span { color: #66736b; font-size: 7px; font-weight: 730; }
.lead-card-actions select { height: 32px; padding: 0 27px 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: #35423a; background: #fff; font: inherit; font-size: 8px; font-weight: 700; }
.lead-card-actions select:focus { border-color: #70aa89; outline: 0; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); }
.lead-filter-empty { padding: 38px 20px; text-align: center; }
.lead-filter-empty h2 { margin: 0; font-size: 14px; }
.lead-filter-empty p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }

.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 14px; }
.analytics-event-panel { grid-row: span 2; }
.analytics-bars { display: grid; gap: 18px; margin: 0; padding: 4px 20px 22px; list-style: none; }
.analytics-bars li > div { display: flex; justify-content: space-between; gap: 12px; }
.analytics-bars strong { font-size: 10px; }
.analytics-bars span { font-size: 10px; font-weight: 800; }
.analytics-bars progress { width: 100%; height: 8px; display: block; overflow: hidden; margin: 8px 0 6px; border: 0; border-radius: 999px; appearance: none; background: #edf1ee; }
.analytics-bars progress::-webkit-progress-bar { border-radius: 999px; background: #edf1ee; }
.analytics-bars progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #4f6bff, #42a56d); }
.analytics-bars progress::-moz-progress-bar { border-radius: 999px; background: #4f6bff; }
.analytics-bars small { color: #849087; font-size: 8px; }
.analytics-list-panel { overflow: hidden; }
.analytics-list-panel > ul { margin: 0; padding: 0 20px 15px; list-style: none; }
.analytics-list-panel li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #edf1ee; }
.analytics-list-panel li div { min-width: 0; }
.analytics-list-panel strong, .analytics-list-panel small { display: block; }
.analytics-list-panel strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.analytics-list-panel small { margin-top: 4px; color: #849087; font-size: 7px; }
.analytics-list-panel li > span { min-width: 34px; color: #176b43; font-size: 13px; font-weight: 800; text-align: right; }
.analytics-privacy-panel { display: flex; align-items: flex-start; gap: 13px; padding: 18px; }
.analytics-privacy-panel h2 { margin: 4px 0 6px; font-size: 14px; }
.analytics-privacy-panel p:last-child { margin: 0; color: #77837b; font-size: 8px; line-height: 1.55; }

[data-analytics-report] { min-width: 0; display: grid; gap: 18px; }
.analytics-report-heading, .analytics-report-heading > div, .analytics-panel-heading, .analytics-panel-heading > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.analytics-report-heading { justify-content: space-between; flex-wrap: wrap; }
.analytics-report-heading h1 { margin: 0; font-size: 30px; letter-spacing: -.7px; }
.analytics-report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid #dce2ee; }
.analytics-report-filters, .analytics-report-actions, .analytics-table-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.analytics-report-filters { margin-left: auto; justify-content: flex-end; }
.analytics-filter-with-help { display: flex; align-items: center; gap: 8px; min-width: 0; }
.analytics-report-filters label, .analytics-table-controls label { min-width: 0; }
.analytics-report-filters select, .analytics-table-controls select, #analytics-metric, #analytics-search { min-width: 0; max-width: 100%; height: 42px; padding: 8px 12px; border: 1px solid #cad3e5; border-radius: 10px; background: white; color: #26364e; font: inherit; font-size: 12px; }
#analytics-configurator { width: 220px; }
#analytics-period { width: 140px; }
#analytics-search { width: 220px; }
.analytics-report-filters .analytics-currency-control { display: grid; align-content: center; gap: 1px; height: 42px; width: 148px; padding: 4px 10px; border: 1px solid #cad3e5; border-radius: 10px; background: #fff; }
.analytics-currency-control > span { color: #43516b; font-size: 9px; font-weight: 650; }
.analytics-report-filters #analytics-currency { width: 100%; height: 20px; padding: 0; border: 0; border-radius: 0; color: #5a6780; background: transparent; opacity: 1; font-size: 11px; }
.analytics-report-actions .button { display: inline-flex; align-items: center; gap: 7px; }
.analytics-report-actions svg { width: 16px; height: 16px; }
.analytics-report-tabs { display: flex; flex-shrink: 0; gap: 4px; width: fit-content; padding: 4px; border: 1px solid #d7dff0; border-radius: 12px; background: #e9edfa; }
.analytics-report-tabs button { border: 0; background: transparent; padding: 10px 16px; border-radius: 8px; color: #445474; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; }
.analytics-report-tabs button[aria-pressed="true"] { background: #4d5bdf; color: #fff; box-shadow: 0 2px 5px rgb(49 60 158 / 18%); }
.analytics-report-tabs button:not([aria-pressed="true"]):hover { background: #f5f7ff; color: #273c7c; }
.analytics-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.analytics-stat, .analytics-trend { --analytics-tone: #3c60d6; --analytics-tint: #edf3ff; }
.analytics-stat[data-metric="quote_requests"], .analytics-trend[data-metric="quote_requests"] { --analytics-tone: #7448c9; --analytics-tint: #f3edff; }
.analytics-stat[data-metric="new_leads"], .analytics-trend[data-metric="new_leads"] { --analytics-tone: #087b70; --analytics-tint: #e8f7f2; }
.analytics-trend[data-metric="cart_handoffs"] { --analytics-tone: #b05d16; --analytics-tint: #fff3e6; }
.analytics-stat[data-metric="revenue"], .analytics-trend[data-metric="revenue"], .analytics-trend[data-metric="purchases"] { --analytics-tone: #96621c; --analytics-tint: #fff6e6; }
.analytics-stat { padding: 18px 20px; min-width: 0; border-color: color-mix(in srgb, var(--analytics-tone) 23%, #fff); background: linear-gradient(130deg, var(--analytics-tint), #fff); box-shadow: inset 0 3px 0 var(--analytics-tone); }
.analytics-stat > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #35435c; font-size: 12px; font-weight: 650; }
.analytics-stat-label { display: flex; align-items: center; gap: 9px; min-width: 0; }
.analytics-stat-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: var(--analytics-tone); background: color-mix(in srgb, var(--analytics-tone) 12%, #fff); }
.analytics-stat-icon svg { width: 17px; height: 17px; }
.analytics-stat > strong { display: block; margin-top: 13px; color: var(--analytics-tone); font-size: 32px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.analytics-stat > small { display: block; color: #73572d; margin-top: 5px; font-size: 11px; }
.analytics-help { flex-shrink: 0; font-size: 12px; }
.analytics-help summary { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #dce1eb; border-radius: 50%; color: #66748a; cursor: pointer; list-style: none; background: white; }
.analytics-help summary::-webkit-details-marker { display: none; }
.analytics-help > span { position: fixed; z-index: 100; inset: auto 20px 20px auto; max-width: min(360px, calc(100vw - 40px)); padding: 16px; border: 1px solid #dce1eb; border-radius: 12px; background: #fff; color: #536173; line-height: 1.55; box-shadow: 0 10px 35px rgb(26 35 50 / 18%); }
[data-analytics-report] button:focus-visible, [data-analytics-report] select:focus-visible, [data-analytics-report] summary:focus-visible, #analytics-search:focus-visible { outline: 3px solid rgb(79 107 255 / 35%); outline-offset: 3px; }
.analytics-panel-heading { justify-content: space-between; padding: 18px 20px; flex-wrap: wrap; }
.analytics-panel-heading h2 { margin: 0; font-size: 16px; }
.analytics-trend { min-width: 0; border-color: #d7deee; }
.analytics-trend-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--analytics-tone); }
.analytics-chart { padding: 0 15px; }
.analytics-chart svg { display: block; width: 100%; min-height: 180px; max-height: 270px; }
.analytics-chart svg.analytics-chart-svg-compact { display: none; }
.analytics-chart text { fill: #50617e; font-size: 12px; font-family: inherit; }
.analytics-chart-svg-compact text { font-size: 16px; }
.analytics-chart-svg-compact .analytics-chart-date { font-size: 14px; }
.analytics-chart-grid { stroke: #e0e6f2; stroke-width: 1; }
.analytics-chart-area { fill: var(--analytics-tone); fill-opacity: .12; }
.analytics-chart-line { stroke: var(--analytics-tone); stroke-width: 3.5; fill: none; stroke-linejoin: round; }
.analytics-chart-unavailable { display: grid; place-content: center; justify-items: center; gap: 10px; min-height: 215px; padding: 20px; text-align: center; color: #66748a; }
.analytics-chart-unavailable svg { width: 30px; height: 30px; color: var(--analytics-tone); }
.analytics-chart-unavailable span { font-size: 12px; }
.analytics-daily { padding: 0 20px 18px; font-size: 12px; color: #4c5e7a; }
.analytics-daily summary { cursor: pointer; width: fit-content; font-weight: 600; }
.analytics-daily ul { list-style: none; margin: 12px 0 0; padding: 0 16px 0 0; max-height: 230px; overflow-y: auto; scrollbar-gutter: stable; }
.analytics-daily li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 9px 8px; border-top: 1px solid #e5eaf3; }
.analytics-daily time, .analytics-daily li > strong { overflow-wrap: anywhere; }
.analytics-daily li:nth-child(even) { background: #f7f9fd; }
.analytics-daily li > strong { color: #263c61; text-align: right; font-variant-numeric: tabular-nums; }
.analytics-configurators { min-width: 0; }
.analytics-configurators > .analytics-panel-heading { gap: 16px; }
.analytics-table-controls { gap: 8px; }
.analytics-table-wrap { max-width: 100%; overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; }
.analytics-table th, .analytics-table td { height: auto; padding: 14px 16px; border-top: 1px solid #e5eaf3; color: #34445e; font-size: 12px; text-align: right; white-space: normal; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-analytics-report] .analytics-table th, [data-analytics-report] .analytics-table td { display: table-cell; }
.analytics-table thead th { background: #edf2fc; color: #435779; font-size: 10px; font-weight: 700; white-space: normal; overflow-wrap: normal; line-height: 1.45; }
.analytics-table tbody th { background: transparent; font-size: 13px; text-transform: none; letter-spacing: normal; }
.analytics-table tbody tr:nth-child(even) { background: #fafbfe; }
.analytics-table tbody tr:hover { background: #f2f5ff; }
.analytics-table th:first-child { text-align: left; }
.analytics-config-name { display: flex; align-items: center; gap: 12px; min-width: 180px; max-width: 340px; }
.analytics-config-name strong { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.analytics-config-cover { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid #dce5fa; border-radius: 9px; background: #edf2ff; overflow: hidden; }
.analytics-config-cover img { width: 44px; height: 44px; object-fit: contain; }
.analytics-config-cover svg { width: 22px; height: 22px; color: #516dc6; }
.analytics-table-empty { padding: 30px !important; text-align: center !important; color: #647084; }
.analytics-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; flex-wrap: wrap; color: #647084; font-size: 12px; }
.analytics-pagination > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.analytics-report-footer { display: flex; align-items: center; gap: 10px; color: #53637e; font-size: 11px; flex-wrap: wrap; }
.analytics-example-label { margin-left: auto; color: #53637e; font-size: 11px; }
@media (min-width: 601px) and (max-width: 1200px) {
  .analytics-table th, .analytics-table td { padding: 12px 10px; }
  .analytics-table thead th { letter-spacing: .02em; }
  .analytics-config-name { min-width: 155px; gap: 8px; }
}
@media (max-width: 900px) {
  .analytics-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-report-filters { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  [data-analytics-report] { gap: 14px; }
  .analytics-report-toolbar { gap: 14px; padding-bottom: 14px; }
  .analytics-report-tabs { width: 100%; }
  .analytics-report-tabs button { flex: 1; padding-inline: 8px; }
  .analytics-report-filters { width: 100%; justify-content: flex-start; }
  .analytics-report-filters > label { width: 100%; }
  .analytics-filter-with-help { flex: 1 1 100%; }
  .analytics-filter-with-help label { flex: 1; }
  #analytics-period, .analytics-report-filters .analytics-currency-control { width: 100%; }
  #analytics-configurator { width: 100%; }
  .analytics-report-actions { width: 100%; }
  .analytics-report-actions .button { flex: 1; }
  .analytics-stat { padding: 14px; }
  .analytics-stat > strong { font-size: 25px; }
  .analytics-stat > div { font-size: 11px; }
  .analytics-stat-label { flex-direction: column; align-items: flex-start; gap: 7px; }
  .analytics-panel-heading { padding: 16px; }
  .analytics-panel-heading > label { width: 100%; }
  #analytics-metric { width: 100%; }
  .analytics-chart svg { min-height: 130px; }
  .analytics-chart svg.analytics-chart-svg-wide { display: none; }
  .analytics-chart svg.analytics-chart-svg-compact { display: block; }
  .analytics-table thead { display: none; }
  .analytics-table, .analytics-table tbody { display: block; }
  .analytics-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px; border-top: 1px solid #edf0f6; gap: 12px; }
  .analytics-table th { grid-column: 1 / -1; }
  .analytics-table th, .analytics-table td { border: 0; padding: 0; text-align: left; min-width: 0; }
  [data-analytics-report] .analytics-table tbody th, [data-analytics-report] .analytics-table tbody td { display: block; }
  .analytics-table td::before { content: attr(data-label); display: block; color: #53637e; font-size: 10px; margin-bottom: 4px; }
  .analytics-config-name { min-width: 0; }
  .analytics-pagination { padding: 16px; }
  .analytics-pagination > div { width: 100%; justify-content: space-between; gap: 7px; }
  .analytics-pagination > div > span { font-size: 10px; }
  .analytics-table-controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .analytics-table-controls label { width: 100%; }
  .analytics-table-controls label:last-child { grid-column: 1 / -1; }
  #analytics-search, #analytics-sort { width: 100%; }
  .analytics-example-label { margin-left: 0; flex-basis: 100%; }
}

.storage-banner, .info-banner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 16px 19px; margin-bottom: 17px; border: 1px solid #d7e7dd; border-radius: 14px; background: linear-gradient(90deg, #f7fbf8, #f0f8f3); }
.storage-banner > div:first-child { display: flex; align-items: center; gap: 12px; }
.storage-banner strong, .storage-banner p { display: block; margin: 0; }
.storage-banner strong { font-size: 11px; }
.storage-banner p { margin-top: 3px; color: #758179; font-size: 9px; }
.storage-meter { width: min(320px, 35%); }
.storage-meter span { display: flex; justify-content: flex-end; color: #7f8b83; font-size: 8px; }
.storage-meter span b { display: inline; height: auto; margin-right: 3px; color: #4e5d54; background: none; }
.storage-meter i { height: 5px; background: #dce7e0; }
.storage-meter i b { width: 10.1%; background: #49ac70; }
.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.asset-library-toolbar { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(190px, 1fr) auto auto; margin: 0 0 16px; }
.asset-library-toolbar > label { align-items: center; background: var(--surface, #fff); border: 1px solid var(--border, #dde1ea); border-radius: 10px; display: flex; gap: 7px; min-height: 42px; padding: 0 11px; }
.asset-library-toolbar input { border: 0; min-width: 0; outline: 0; width: 100%; }
.asset-library-toolbar select { min-height: 42px; min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; color: var(--text); background: #fff; font: inherit; cursor: pointer; }
.asset-library-toolbar select:focus-visible, .asset-library-toolbar > label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* MP-01: compact inbox, native disclosure/keyboard controls and quiet diagnostics. */
.data-lifecycle-bulk[hidden] { display: none; }
.lead-grid.lead-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lead-list-row { display: flex; align-items: flex-start; }
.lead-list-row > .lead-select { margin: 13px 0 0 10px; }
.lead-details { min-width: 0; flex: 1; }
.lead-details > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 20px; align-items: center; gap: 20px; padding: 15px; min-height: 68px; cursor: pointer; list-style: none; }
.lead-details > summary::-webkit-details-marker { display: none; }
.lead-details > summary:hover { background: #f8f9fc; }
.lead-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 9px; }
.lead-identity { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.lead-identity strong { font-size: 12px; }
.lead-identity > span, .lead-latest { font-size: 10px; color: var(--muted); }
.lead-expand { display: flex; }
.lead-expand .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.lead-details[open] .lead-expand .icon { transform: rotate(90deg); }
.lead-detail-body { border-top: 1px solid var(--line); }
.lead-quote-artifacts { margin: 0 15px 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcff; }
.lead-quote-artifacts h3 { margin: 0 0 10px; font-size: 12px; }
.lead-quote-artifacts ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lead-quote-artifacts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.lead-quote-artifacts li:first-child { padding-top: 0; border-top: 0; }
.lead-quote-artifacts li > div:first-child { display: grid; gap: 3px; min-width: 0; }
.lead-quote-artifacts li small { color: #66736b; }
.lead-quote-delivery { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.quote-template-panel { margin-bottom: 18px; }
.sender-domain-panel { margin-bottom: 18px; }
.sender-domain-panel .form-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.sender-domain-panel [data-workspace-sender-domain-form] { display: grid; gap: 12px; }
.sender-domain-panel [data-workspace-sender-domain-form] > label { display: grid; gap: 6px; color: #56645b; font-size: 8px; font-weight: 720; }
.sender-domain-panel [data-workspace-sender-domain-form] > label > span { color: #56645b; font-size: 8px; font-weight: 720; }
.sender-domain-panel [data-workspace-sender-domain-form] .form-actions { margin-top: 3px; }
.sender-domain-current { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sender-domain-current > div, .sender-domain-dns > div { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--border, #d5dbe7); border-radius: 12px; background: var(--muted-surface, #f7f8fb); }
.sender-domain-current small, .sender-domain-dns small { color: var(--muted-text, #667085); font-size: 12px; }
.sender-domain-dns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
.sender-domain-dns input { min-width: 0; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
[data-sender-own-domain-fields][hidden] { display: none; }
.quote-template-panel .form-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.quote-template-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 20px; }
.quote-template-fields, .quote-template-media { display: grid; gap: 14px; }
.quote-template-wording { border: 1px solid var(--border, #d5dbe7); border-radius: 10px; padding: 10px 12px; }
.quote-template-wording > summary { cursor: pointer; font-weight: 700; }
.quote-template-wording > p { margin: 9px 0; color: var(--muted-text, #667085); font-size: 11px; }
.quote-template-wording-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quote-template-wording-fields label { display: grid; gap: 5px; min-width: 0; font-size: 11px; }
.quote-template-wording-fields input, .quote-template-wording-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; }
.quote-template-wording-wide { grid-column: 1 / -1; }
.quote-template-media { align-content: start; grid-template-rows: auto auto; }
.quote-template-media > div { display: grid; gap: 7px; }
.quote-template-media small { color: var(--muted-text, #667085); }
.quote-template-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quote-template-colors input[type="color"] { width: 100%; min-height: 48px; padding: 5px; }
.quote-template-image { min-height: 72px; padding: 10px; border: 1px dashed var(--border, #d5dbe7); border-radius: 12px; background: var(--muted-surface, #f7f8fb); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.quote-template-image-preview { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--muted-text, #667085); }
.quote-template-image-preview > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-template-image img { width: 64px; height: 46px; object-fit: contain; object-position: left center; border-radius: 7px; background: #fff; }
.quote-template-image-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.quote-template-image label.button { margin: 0; cursor: pointer; }
.quote-template-image input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.quote-template-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border: 1px solid var(--border, #d5dbe7); border-radius: 14px; }
.quote-template-sections label { display: flex; align-items: center; gap: 8px; }
.quote-template-panel textarea { min-height: 76px; resize: vertical; font: inherit; line-height: 1.45; }
.quote-template-toggles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-template-live { display: grid; gap: 10px; }
.quote-template-live [hidden] { display: none !important; }
.quote-template-live-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quote-template-live-heading strong { font-size: 13px; }
.quote-template-live-heading small { color: var(--muted-text, #667085); font-size: 11px; }
.quote-template-live-pdf { width: min(100%, 595px); height: auto; aspect-ratio: 595 / 842; border: 1px solid #d9dde3; background: #fff; }
.quote-template-live-page { --quote-preview-accent: #111111; --quote-preview-text: #111111; width: min(100%, 595px); min-height: 570px; padding: 32px 34px 25px; border: 1px solid #d9dde3; box-shadow: 0 10px 24px #1b253014; background: #fff; color: var(--quote-preview-text); display: flex; flex-direction: column; gap: 11px; }
.quote-template-live-page header { display: flex; align-items: center; justify-content: space-between; min-height: 27px; gap: 12px; font-size: 14px; }
.quote-template-live-page header img { max-width: 140px; max-height: 38px; object-fit: contain; }
.quote-template-live-page header span { font-size: 10px; }
.quote-template-live-rule { border-top: 1px solid var(--quote-preview-accent); }
.quote-template-live-page h3 { margin: 0; font-size: 22px; font-weight: 650; }
.quote-template-live-page h4 { margin: 0 0 7px; font-size: 12px; }
.quote-template-live-page p { margin: 0; font-size: 11px; line-height: 1.45; }
.quote-template-live-page [data-quote-preview-heading] { font-size: 12px; }
.quote-template-live-hero { max-width: 100%; max-height: 112px; object-fit: contain; align-self: center; }
.quote-template-live-page dl { display: grid; margin: 0; border-top: 1px solid var(--quote-preview-accent); }
.quote-template-live-page dl > div { display: grid; grid-template-columns: 40% 60%; padding: 8px 6px; border-bottom: 1px solid #d3d6da; font-size: 11px; }
.quote-template-live-page dt, .quote-template-live-page dd { margin: 0; }
.quote-template-live-page footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--quote-preview-accent); font-size: 10px; }
.lead-test-layout { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); gap: 14px; align-items: start; }
.lead-test-controls, .lead-test-preview-panel { margin: 0; }
.lead-test-email-preview { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.lead-test-email-preview > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fafbfc; }
.lead-test-email-preview > div:first-child { border-top: 0; }
.lead-test-email-preview span { color: var(--muted); font-size: 8px; font-weight: 760; text-transform: uppercase; }
.lead-test-email-preview strong { min-width: 0; overflow-wrap: anywhere; font-size: 9px; }
.lead-test-routing-warning { margin: 0; padding: 10px 12px; border: 1px solid #efd69d; border-radius: 9px; color: #795617; background: #fff8e8; font-size: 9px; line-height: 1.5; }
.lead-test-actions { justify-content: flex-end; flex-wrap: wrap; }
.lead-test-receipt { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #b9dfc9; border-radius: 11px; color: #1f6242; background: #f0faf4; }
.lead-test-receipt .icon { flex: 0 0 auto; }
.lead-test-receipt > div { display: grid; gap: 3px; min-width: 0; }
.lead-test-receipt strong, .lead-test-receipt span, .lead-test-receipt small { overflow-wrap: anywhere; }
.lead-test-receipt strong { font-size: 10px; }
.lead-test-receipt span, .lead-test-receipt small { font-size: 8px; }
.lead-test-preview-panel { min-width: 0; padding: 18px; background: #eef1f6; }
.lead-test-document { width: min(100%, 510px); min-height: 610px; box-sizing: border-box; position: relative; margin: 18px auto 4px; padding: 38px 42px; overflow: hidden; color: var(--lead-test-text); background: #fff; box-shadow: 0 12px 35px rgb(17 24 39 / 12%); }
.lead-test-document header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--lead-test-accent); }
.lead-test-document header strong { font-size: 15px; }
.lead-test-document-logo { display: block; max-width: 120px; max-height: 34px; object-fit: contain; }
.lead-test-document header span { padding: 4px 7px; border-radius: 999px; color: #394253; background: #eef1f6; font-size: 8px; font-weight: 800; }
.lead-test-document h3 { margin: 22px 0 6px; font-size: 10px; font-weight: 450; }
.lead-test-document h4 { margin: 0 0 16px; font-size: 20px; line-height: 1.2; }
.lead-test-document h5 { margin: 14px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--lead-test-accent); font-size: 11px; }
.lead-test-document-image { display: block; width: 100%; max-height: 220px; margin: 14px 0; object-fit: contain; }
.lead-test-document-hero { max-height: 95px; }
.lead-test-document > p { margin: 0 0 22px; color: #596579; font-size: 10px; line-height: 1.55; }
.lead-test-document dl { margin: 0; }
.lead-test-document-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 0; border-block: 1px solid #e7eaf0; }
.lead-test-document-meta > div, .lead-test-document-selections > div { display: grid; gap: 3px; }
.lead-test-document dt { color: #707b8d; font-size: 7px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lead-test-document dd { margin: 0; font-size: 10px; font-weight: 720; overflow-wrap: anywhere; }
.lead-test-document-selections { display: grid; gap: 0; padding: 0; }
.lead-test-document-selections > div { grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); align-items: baseline; padding: 8px 0; border-bottom: 1px solid #d6d6d6; }
.lead-test-document-total { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--lead-test-accent); }
.lead-test-document-total span { color: #596579; font-size: 9px; }
.lead-test-document-total strong { font-size: 18px; }
.lead-test-document footer { margin-top: 34px; padding-top: 12px; border-top: 1px solid #e7eaf0; color: #697486; font-size: 8px; }
.lead-test-document-loading { display: grid; place-items: center; color: var(--muted); }
@media (max-width: 900px) { .lead-profile-layout, .lead-test-layout, .quote-template-grid, .quote-template-sections, .sender-domain-current, .sender-domain-dns { grid-template-columns: 1fr; } .lead-routing { grid-template-columns: 1fr; } .lead-routing-list { padding: 8px 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 520px) { .quote-template-wording-fields { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .lead-test-actions .button { width: 100%; } .lead-test-document { min-height: 520px; padding: 30px 24px; } .lead-test-document-meta { grid-template-columns: 1fr; } }
.lead-email-link { display: inline-block; margin: 14px 15px 0; font-size: 11px; }
.lead-help { margin: 0 20px 20px; }
.data-lifecycle-bulk { padding: 16px; border-radius: 10px; background: #f7f8fc; }
.data-lifecycle-bulk p { font-size: 11px; margin: 6px 0 10px; }
.workspace-shortcuts a { color: inherit; text-decoration: none; }
.workspace-shortcuts a:hover { border-color: var(--accent); }
.workspace-shortcuts p { color: var(--muted); line-height: 1.6; }
.workspace-shortcuts a > span { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; }
.connection-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 24px; margin-bottom: 20px; }
.connection-summary > div { flex: 1 1 320px; }
.connection-summary h2 { margin: 5px 0 8px; }
.connection-summary p { color: var(--muted); line-height: 1.6; }
.connection-summary dl { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; }
.connection-summary dt { color: var(--muted); font-size: 11px; }
.connection-summary dd { margin: 6px 0 0; font-size: 12px; font-weight: 700; }
.integration-info { margin-top: 16px; font-size: 12px; }
.integration-info summary { cursor: pointer; color: var(--accent); }
.integration-info p { color: var(--muted); line-height: 1.6; }
.integration-technical { margin-top: 20px; }
@media (max-width: 800px) {
  .lead-details > summary { grid-template-columns: minmax(0, 1fr) auto 16px; gap: 10px; }
  .lead-latest { display: none; }
  .lead-identity strong { font-size: 11px; }
  .lead-details .lead-avatar { display: none; }
  .connection-summary { padding: 18px; }
  .connection-summary > div { flex-basis: 100%; }
}
.asset-library-tabs { background: var(--surface-muted, #f4f6fb); border-radius: 10px; display: flex; padding: 3px; }
.asset-library-tabs button { background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 0 12px; }
.asset-library-tabs button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgb(17 19 26 / 10%); color: var(--text); }
.asset-trash-state { color: #8a5a00; font-size: 11px; }
.asset-usage-list { display: grid; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }
.asset-usage-list li { display: grid; }
.asset-card .asset-meta > .studio-advanced-details { grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0; }
.asset-card .studio-advanced-details-body { overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.asset-card .studio-advanced-details-body > small { display: block; margin-bottom: 8px; }
.asset-card .studio-advanced-details-body code { white-space: normal; }
.asset-usage-list { overflow-wrap: anywhere; }
.asset-action-menu { align-self: end; position: relative; }
.asset-action-menu > div { background: #fff; border: 1px solid var(--border, #dde1ea); border-radius: 10px; bottom: calc(100% + 6px); box-shadow: 0 12px 28px rgb(17 19 26 / 14%); display: grid; min-width: 180px; padding: 6px; position: absolute; right: 0; z-index: 12; }
.asset-action-menu [data-thumbnail-actions] { display: contents; }
.asset-action-menu > div :is(a, button) { background: transparent; border: 0; border-radius: 7px; color: var(--text); font: inherit; padding: 8px; text-align: left; }
.asset-action-menu > div :is(a, button):hover { background: var(--surface-muted, #f4f6fb); }
.asset-action-menu > div .is-danger { color: #b42318; }
.asset-action-menu > div button:disabled { cursor: not-allowed; opacity: .48; }
.asset-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgb(25 48 32 / 3%); transition: border 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.asset-card > .collection-select { position: absolute; top: 7px; left: 7px; z-index: 3; border-radius: 7px; background: transparent; }
.asset-card:hover { border-color: #c6d4cb; transform: translateY(-2px); box-shadow: var(--shadow); }
/* The upward menu can be taller than a compact row. Only its open card and
   collection release clipping; keep the image corners and all actions intact. */
.asset-collection:has(.asset-action-menu[open]) { overflow: visible; }
.asset-card:has(> .asset-action-menu[open]) { overflow: visible; position: relative; z-index: 2; }
.asset-card:has(> .asset-action-menu[open]) > .asset-preview { border-radius: 13px 13px 0 0; }
.asset-list .asset-card:has(> .asset-action-menu[open]) > .asset-preview { border-radius: 13px 0 0 13px; }
.asset-preview { height: 160px; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.asset-preview::before, .asset-preview::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); }
.asset-preview::before { width: 150px; height: 150px; top: -50px; right: -30px; background: rgb(255 255 255 / 35%); }
.asset-preview::after { width: 120px; height: 40px; bottom: 18px; background: rgb(19 44 29 / 10%); filter: blur(10px); }
.asset-preview > span { z-index: 2; width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 52%); border-radius: 18px; color: rgb(27 61 41 / 65%); background: rgb(255 255 255 / 38%); box-shadow: 0 15px 25px rgb(32 55 39 / 10%); backdrop-filter: blur(7px); }
.asset-preview > span .icon { width: 35px; height: 35px; stroke-width: 1.4; }
.asset-preview > img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asset-preview > small { position: absolute; z-index: 2; right: 10px; bottom: 9px; padding: 4px 6px; border-radius: 5px; color: #435148; background: rgb(255 255 255 / 75%); font-size: 7px; font-weight: 800; }
.asset-preview.tone-ocean { background: linear-gradient(145deg, #e6f3f6, #bdd7df); }
.asset-preview.tone-forest { background: linear-gradient(145deg, #e6f2ea, #bcd5c5); }
.asset-preview.tone-clay { background: linear-gradient(145deg, #f5ece3, #ddc6ae); }
.asset-preview.tone-stone { background: linear-gradient(145deg, #f1f2f1, #d4d8d5); }
.asset-preview.tone-sun { background: linear-gradient(145deg, #f8f0dc, #e7d4a4); }
.asset-preview.tone-ink { background: linear-gradient(145deg, #e4e8e6, #b5bfba); }
.asset-direct-upload { cursor: pointer; }
.asset-direct-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.asset-meta { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px; }
.asset-meta > div { min-width: 0; overflow-wrap: anywhere; }
.asset-meta strong, .asset-meta span { display: block; }
.asset-meta strong { font-size: 12px; line-height: 1.4; }
.asset-meta span { margin-top: 3px; color: #65736b; font-size: 10px; }
.asset-meta .asset-reuse-state { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; padding: 4px 7px; border-radius: 999px; background: #edf8f1; color: #17653b; font-size: 8px; font-weight: 750; }
.asset-reuse-state .icon { width: 10px; height: 10px; }
.asset-origin { justify-self: start; max-width: 100%; padding: 5px 7px; border: 1px solid #e1e7e3; border-radius: 999px; color: #65736b; background: #f8faf9; font-size: 9px; font-weight: 700; overflow-wrap: anywhere; }
.asset-folder-browser { margin-bottom: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgb(25 48 32 / 3%); }
.asset-folder-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.asset-folder-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.asset-folder-breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.asset-folder-breadcrumbs button { min-width: 0; overflow: hidden; padding: 5px 2px; border: 0; color: #526159; background: none; font: inherit; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.asset-folder-breadcrumbs button:last-child { color: var(--ink); }
.asset-folder-breadcrumbs span { color: #a5ada8; font-size: 8px; }
.asset-folder-current form, .asset-move-form { display: flex; align-items: center; gap: 7px; }
.asset-folder-create input, .asset-folder-current input, .asset-folder-current select, .asset-move-form select { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 8px; }
.asset-folder-create-menu { position: relative; }
.asset-folder-create-menu > summary { list-style: none; }
.asset-folder-create-menu > summary::-webkit-details-marker { display: none; }
.asset-folder-create-menu > .asset-folder-create { position: absolute; z-index: 8; top: calc(100% + 8px); right: 0; width: 260px; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgb(17 44 27 / 14%); }
.asset-folder-create label { display: grid; gap: 6px; }
.asset-folder-create label > span { color: #4d5b52; font-size: 8px; font-weight: 720; }
.asset-folder-create input { width: 100%; }
.asset-folder-current { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 12px 13px; border-bottom: 1px solid var(--line); background: #f8faf9; }
.asset-folder-current > .asset-folder-delete { justify-self: start; white-space: nowrap; }
.asset-folder-current > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.asset-folder-current form > label { min-width: 0; display: grid; gap: 4px; }
.asset-folder-current small, .asset-folder-current strong { display: block; }
.asset-folder-current small { color: #7b8880; font-size: 7px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.asset-folder-current strong { margin-top: 2px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.asset-folder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; padding: 12px 13px; }
.asset-folder-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; transition: border 150ms ease, background 150ms ease; }
.asset-folder-card:hover { border-color: #b8c7be; background: #f8faf9; }
.asset-folder-card > span:nth-child(2) { min-width: 0; }
.asset-folder-card strong, .asset-folder-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-folder-card strong { font-size: 9px; }
.asset-folder-card small { margin-top: 3px; color: #829087; font-size: 7px; }
.asset-folder-card > .icon { width: 15px; height: 15px; color: #829087; }
.asset-folder-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #315df7; background: #eef2ff; }
.asset-folder-icon .icon { width: 18px; height: 18px; }
.asset-move-form { padding: 0 13px 12px; }
.asset-move-form label { min-width: 0; flex: 1; }
.asset-move-form label > span { display: block; margin-bottom: 4px; color: #7b8880; font-size: 7px; font-weight: 750; }
.asset-move-form select { width: 100%; }
@media (max-width: 820px) {
  .asset-folder-toolbar { align-items: stretch; flex-direction: column; }
  .asset-folder-actions { align-items: stretch; flex-direction: column; }
  .asset-folder-create-menu { width: 100%; }
  .asset-folder-create-menu > summary { justify-content: center; }
  .asset-folder-create-menu > .asset-folder-create { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
  .asset-folder-current { grid-template-columns: 1fr; }
  .asset-folder-current > .asset-folder-delete { justify-self: start; }
  .asset-folder-current form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.info-banner { justify-content: flex-start; color: #1e6943; }
.info-banner > .icon { width: 21px; height: 21px; }
.info-banner strong { font-size: 10px; }
.info-banner p { margin: 3px 0 0; color: #63806e; font-size: 9px; line-height: 1.45; }

.integration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.integration-card { min-height: 205px; display: flex; flex-direction: column; align-items: flex-start; padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 16px rgb(31 52 38 / 3%); }
.integration-logo { min-width: 50px; height: 50px; display: grid; place-items: center; padding: 0 12px; border-radius: 13px; font-size: 15px; font-weight: 850; }
.integration-brand-mark { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.integration-wordpress { color: #21759b; background: #f2f8fb; }
.integration-commerce-brands { display: flex; align-items: center; gap: 11px; }
.integration-commerce-brands .integration-wordpress-mark { width: 29px; height: 29px; fill: currentColor; stroke: none; }
.integration-commerce-brands .integration-woo-mark { width: 48px; height: auto; fill: #873eff; stroke: none; }
.integration-api { color: #315df7; background: #eef1ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.integration-shopify { color: #668f3e; background: #f0f6e9; }
.integration-shopify-mark { width: 27px; height: 31px; fill: initial; stroke: none; }
.integration-copy { width: 100%; flex: 1; margin: 18px 0; }
.integration-copy > div { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.integration-copy h2 { margin: 0; font-size: 13px; }
.integration-copy p { margin: 9px 0 0; color: #748078; font-size: 9px; line-height: 1.6; }
.integration-state { padding: 4px 6px; border-radius: 99px; font-size: 7px; font-weight: 780; text-transform: capitalize; }
.state-connected { color: #167146; background: #e8f6ee; }
.state-available { color: #3f668b; background: #edf4fa; }
.state-planned { color: #7a6b52; background: #f3f0e9; }
.api-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px; margin-top: 17px; }
.api-panel h2 { margin: 4px 0 6px; font-size: 14px; }
.api-panel p:last-child { max-width: 700px; margin: 0; color: #758179; font-size: 9px; line-height: 1.55; }
.api-panel > code { padding: 10px 12px; border: 1px solid #dfe5e1; border-radius: 8px; color: #24704a; background: #f3f8f5; font-size: 9px; white-space: nowrap; }
.connector-management { display: grid; gap: 16px; padding: 22px; margin-top: 17px; }
.connector-management-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.connector-management-heading h2 { margin: 4px 0 6px; font-size: 17px; }
.connector-management-heading p:last-child { max-width: 720px; margin: 0; color: #758179; font-size: 9px; line-height: 1.55; }
.connector-security-state { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; color: #28734c; background: #eaf6ee; font-size: 8px; font-weight: 780; white-space: nowrap; }
.connector-security-state .icon, .connector-management-note .icon { width: 12px; height: 12px; }
.connector-site-list, .connector-binding-list { display: grid; gap: 9px; }
.connector-site-row { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.15fr) auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid #dde4df; border-radius: 11px; background: #fafcfb; }
.connector-site-row small, .connector-site-row strong, .connector-site-row code, .connector-binding-row small, .connector-binding-row strong, .connector-binding-row code { display: block; }
.connector-site-row small, .connector-binding-row small { color: #7b867f; font-size: 7px; font-weight: 760; text-transform: uppercase; }
.connector-site-row strong, .connector-binding-row strong { margin-top: 4px; font-size: 10px; }
.connector-site-row code, .connector-binding-row code { max-width: 100%; margin-top: 4px; overflow: hidden; color: #65716a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.connector-site-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.connector-site-row dl div { padding: 8px; border-radius: 8px; background: #fff; }
.connector-site-row dt { color: #7b867f; font-size: 7px; }.connector-site-row dd { margin: 4px 0 0; font-size: 9px; font-weight: 780; }
.connector-binding-row { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(190px, 1fr) minmax(190px, 1fr) auto auto; gap: 13px; align-items: center; padding: 12px 14px; border: 1px solid #e2e6e3; border-radius: 10px; background: #fff; }
.connector-management-note { display: flex; align-items: center; gap: 7px; margin: 0; color: #68736c; font-size: 8px; }
.product-inventory-page { display: grid; gap: 16px; }
.product-inventory-site { display: grid; gap: 18px; padding: 22px; }
.product-inventory-site-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.product-inventory-site-heading h2 { margin: 4px 0 5px; font-size: 18px; }
.product-inventory-site-heading p:last-child { margin: 0; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.product-inventory-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.product-inventory-metrics > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.product-inventory-metrics dt { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.product-inventory-metrics dd { margin: 4px 0 0; color: var(--ink); font-size: 17px; font-weight: 820; }
.product-inventory-table { border: 1px solid var(--line); border-radius: 13px; }
.product-inventory-table table { min-width: 760px; }
.product-inventory-table th { padding: 11px 12px; background: #f7f9f8; color: var(--muted); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.product-inventory-table td { padding: 12px; border-top: 1px solid var(--line); color: #3f4943; font-size: 9px; vertical-align: middle; }
.product-inventory-table td:first-child { min-width: 180px; }
.product-inventory-table td strong, .product-inventory-table td small { display: block; }
.product-inventory-table td small { margin-top: 3px; color: var(--muted); }
.product-inventory-table code { font-size: 8px; }
.product-inventory-empty { display: flex; align-items: center; gap: 14px; min-height: 112px; padding: 18px; border: 1px dashed #cfd7d2; border-radius: 13px; background: #fafcfb; }
.product-inventory-empty > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--accent); background: #edf1ff; }
.product-inventory-empty .icon { width: 17px; height: 17px; }
.product-inventory-empty h3 { margin: 0; font-size: 13px; }
.product-inventory-empty p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.product-inventory-empty small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }
.product-inventory-empty.is-error { border-color: #e7c6c6; background: #fff8f8; }
.product-inventory-spinner { border: 2px solid #cfd5ff; border-top-color: var(--accent); border-radius: 50% !important; animation: inventory-spin .8s linear infinite; }
.product-inventory-upgrade, .product-inventory-boundary { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 12px; border-radius: 10px; color: #58655d; background: #f5f7f6; font-size: 8px; line-height: 1.5; }
.product-inventory-upgrade { color: #684f13; background: #fff8e8; }
.product-inventory-limit { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 12px; border-radius: 10px; color: #684f13; background: #fff8e8; font-size: 8px; line-height: 1.5; }
.product-inventory-upgrade .icon, .product-inventory-boundary .icon, .product-inventory-limit .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.product-inventory-tools { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.product-inventory-tools form { display: flex; align-items: end; gap: 8px; }
.product-inventory-tools label { display: grid; gap: 5px; }
.product-inventory-tools label span { color: var(--muted); font-size: 8px; font-weight: 750; }
.product-inventory-tools input { width: min(330px, 42vw); min-height: 34px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 9px; }
.product-inventory-tools p { margin: 0 0 9px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.product-inventory-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; }
.product-inventory-pagination span { color: var(--muted); font-size: 9px; font-weight: 750; }
@keyframes inventory-spin { to { transform: rotate(360deg); } }
.connector-journey { display: grid; gap: 16px; padding: 22px; margin-top: 17px; }
.connector-journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.connector-journey-grid article { min-width: 0; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; }
.connector-journey-grid article > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 999px; color: #67736b; background: #edf0ee; font-size: 9px; font-weight: 850; }
.connector-journey-grid article.is-ready { border-color: #cfe5d7; background: #f6fbf8; }
.connector-journey-grid article.is-ready > span { color: #176b43; background: #dff2e7; }
.connector-journey-grid small, .connector-journey-grid strong { display: block; }
.connector-journey-grid small { color: var(--muted); font-size: 7px; font-weight: 780; text-transform: uppercase; }
.connector-journey-grid strong { margin-top: 4px; font-size: 10px; }
.connector-journey-grid p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.connector-journey-grid code { font-size: 7px; }
.connector-journey-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connector-journey-compact { gap: 10px; }
.connector-journey-compact .connector-management-heading { align-items: center; }
.connector-journey-compact h2 { margin: 3px 0 4px; font-size: 16px; }
.connector-journey-compact p { margin: 0; color: var(--muted); font-size: 10px; }
/* SALG-1a / NEWUSER-B: self-service WordPress pairing */
.state-warning { color: #8a5a00; background: #fff4dc; }
.connector-pairing-state { text-transform: none; }
.form-note { margin: 6px 0 0; color: #65716a; font-size: 8px; }
.connector-pairing-code { display: grid; gap: 14px; padding: 22px; margin-top: 17px; border-color: #cfe5d7; background: #f6fbf8; }
.connector-pairing-code-value { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.connector-pairing-code-value code { padding: 10px 16px; border: 1px dashed #9fc7ae; border-radius: 10px; background: #fff; color: #11131a; font-size: 20px; font-weight: 760; letter-spacing: 3px; user-select: all; }
.connector-pairing-steps { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #4a5260; font-size: 9px; line-height: 1.5; }
.connector-pairing-steps li { padding-left: 4px; }
.connector-pairing-steps .button { margin-right: 6px; vertical-align: middle; }
.connector-connect-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.connector-connect-form input { min-width: 200px; padding: 8px 10px; border: 1px solid #cfd6d1; border-radius: 8px; font-size: 9px; background: #fff; }
.connector-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 520px; color: #4a5260; font-size: 8px; line-height: 1.4; }
.connector-section-title { margin: 18px 0 8px; font-size: 11px; color: #4a5260; text-transform: uppercase; letter-spacing: .06em; }
.connector-site-row-pairing { grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.2fr) auto; grid-auto-rows: auto; }
.connector-site-row-pairing dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.connector-site-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.connector-bind-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) auto; gap: 10px; align-items: end; padding: 12px; border-top: 1px dashed #dde4df; }
.connector-bind-form .eyebrow { grid-column: 1 / -1; margin: 0 0 -4px; }
.connector-bind-form label { display: grid; gap: 4px; font-size: 8px; color: #65716a; }
.connector-bind-form select { min-width: 0; padding: 7px 9px; border: 1px solid #cfd6d1; border-radius: 8px; font-size: 9px; background: #fff; }
.connector-bind-form small { grid-column: 1 / -1; color: #7b867f; font-size: 7.5px; }
.connector-binding-row-pairing { grid-template-columns: minmax(150px, .7fr) minmax(150px, 1fr) minmax(170px, 1fr) auto auto; }
@media (max-width: 960px) {
  .connector-site-row-pairing, .connector-binding-row-pairing, .connector-bind-form { grid-template-columns: 1fr; }
  .connector-site-row-pairing dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connector-site-actions { justify-content: flex-start; }
}

.settings-layout { display: grid; grid-template-columns: 180px minmax(0, 780px); gap: 18px; align-items: start; }
.settings-nav { position: sticky; top: 92px; display: grid; gap: 3px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.settings-nav a { padding: 9px 10px; border-radius: 7px; color: #6e7a72; font-size: 9px; font-weight: 650; text-decoration: none; }
.settings-nav a:hover, .settings-nav a.is-active { color: #176b43; background: #edf7f1; }
.settings-content { display: grid; gap: 15px; }
.settings-pane { min-width: 0; display: grid; gap: 15px; }
.settings-pane[hidden] { display: none; }
.settings-form { padding: 21px; }
.studio-advanced-details { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.studio-advanced-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #5d6874; font-size: 10px; font-weight: 750; cursor: pointer; list-style: none; }
.studio-advanced-details > summary::-webkit-details-marker { display: none; }
.studio-advanced-details > summary::after { content: "+"; color: #7d8896; font-size: 14px; }
.studio-advanced-details[open] > summary::after { content: "−"; }
.studio-advanced-details[open] > summary { border-bottom: 1px solid var(--line); }
.studio-advanced-details-body { display: grid; gap: 14px; padding: 16px; }
.studio-advanced-details-body code { overflow-wrap: anywhere; }
.settings-advanced > .studio-advanced-details-body { background: #f7f8fa; }
.settings-advanced .settings-form { margin: 0; background: #fff; }
.form-heading { padding-bottom: 17px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.form-heading h2 { margin: 0; font-size: 14px; }
.form-heading p { margin: 5px 0 0; color: #7a867e; font-size: 9px; }
.settings-form > label { display: grid; gap: 7px; margin-top: 15px; }
.settings-form > label > span, .settings-form legend { color: #4d5a52; font-size: 9px; font-weight: 700; }
.settings-form input, .settings-form select, .create-dialog input, .create-dialog select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; }
.settings-form input:focus, .settings-form select:focus, .create-dialog input:focus { border-color: #70aa89; outline: 0; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); }
.settings-form input[readonly] { color: #758178; background: #f7f9f8; }
.settings-form label small { color: #8a958f; font-size: 8px; }
.appearance-scale-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.appearance-scale-options legend { grid-column: 1 / -1; margin-bottom: 1px; }
.appearance-scale-options label { position: relative; min-width: 0; cursor: pointer; }
.appearance-scale-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.appearance-scale-options label > span { min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.appearance-scale-options strong, .appearance-scale-options small { display: block; }
.appearance-scale-options strong { font-size: 10px; }
.appearance-scale-options small { color: var(--muted); font-size: 8px; }
.appearance-scale-options input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.appearance-scale-options input:focus-visible + span { outline: 3px solid rgb(79 107 255 / 20%); outline-offset: 2px; }
.form-field-error { display: block; margin-top: 4px; color: #b42318; font-size: 8px; font-weight: 700; line-height: 1.4; }
.form-field-error[hidden] { display: none; }
.create-dialog [aria-invalid="true"], .asset-folder-browser [aria-invalid="true"] { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgb(217 45 32 / 12%); }
.copy-field { display: grid; grid-template-columns: 1fr auto; }
.copy-field input { border-radius: 8px 0 0 8px; }
.copy-field button { padding: 0 12px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 8px 8px 0; color: var(--accent); background: #f8fbf9; font-size: 9px; font-weight: 750; cursor: pointer; }
.copy-field textarea { min-width: 0; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 8px 0 0 8px; resize: none; color: var(--ink); background: #fff; font: 600 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.api-key-reveal { display: grid; gap: 8px; margin: 16px 0; padding: 16px; border: 1px solid #f0c36b; border-radius: 10px; background: #fff8e8; }
.api-key-reveal p, .api-credential-message, .api-credential-empty { margin: 0; color: var(--muted); font-size: 9px; }
.api-credential-create { display: grid; gap: 14px; margin-top: 15px; }
.api-scope-options { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
.api-scope-options label { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 700; }
.api-scope-options input { width: 15px; height: 15px; }
.api-credential-list { display: grid; gap: 9px; margin-top: 16px; }
.api-credential-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.api-credential-row > div { display: grid; min-width: 0; gap: 4px; }
.api-credential-row code { width: max-content; max-width: 100%; color: var(--ink); overflow-wrap: anywhere; }
.api-credential-row small { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .api-credential-row { grid-template-columns: minmax(0, 1fr) auto; }
  .api-credential-row > .button { grid-column: 1 / -1; width: 100%; }
  .api-key-reveal .copy-field { grid-template-columns: 1fr; }
  .api-key-reveal .copy-field textarea, .api-key-reveal .copy-field button { border: 1px solid var(--line-strong); border-radius: 8px; }
}
.form-actions { display: flex; justify-content: flex-end; padding-top: 17px; margin-top: 19px; border-top: 1px solid var(--line); }
.form-actions { flex-wrap: wrap; gap: 8px; }
.settings-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.member-row { display: flex; align-items: center; gap: 10px; }
.member-row > div { flex: 1; }
.member-row strong, .member-row small { display: block; }
.member-row strong { font-size: 10px; }
.member-row small { margin-top: 3px; color: #89948d; font-size: 8px; }
.role-chip { color: #166b43; border-color: #cde2d5; background: #eef8f2; }
.role-readonly-note { color: var(--muted); font-size: 8px; font-weight: 700; }
.configurator-readonly-detail { display: grid; gap: 18px; }
.configurator-readonly-preview { min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.configurator-readonly-preview.studio-shell[data-builder-active="true"] { display: block; height: 600px; min-height: 0; width: 100%; overflow: auto; }
.configurator-readonly-preview.studio-shell[data-builder-active="true"] [data-builder-player],
.configurator-readonly-preview.studio-shell[data-builder-active="true"] .builder-player-layout { height: 100%; min-height: 0; max-height: none; }
@media (max-width: 700px) {
  .configurator-readonly-preview.studio-shell[data-builder-active="true"] { height: auto; }
  .configurator-readonly-preview.studio-shell[data-builder-active="true"] [data-builder-player] { height: auto; overflow: visible; }
  .configurator-readonly-preview.studio-shell[data-builder-active="true"] .builder-player-layout { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 300px auto auto auto; grid-template-areas: "top" "viewer" "right" "left" "bottom"; overflow: visible; }
}
.security-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: #59665e; font-size: 9px; }
.security-list li { display: flex; align-items: center; gap: 8px; }
.security-list .icon { width: 15px; height: 15px; color: #18804e; }

.create-dialog { width: min(540px, calc(100vw - 30px)); max-height: calc(100vh - 28px); overflow: auto; padding: 0; border: 0; border-radius: 17px; color: var(--ink); background: #fff; box-shadow: 0 30px 90px rgb(4 26 14 / 30%); }
.create-dialog::backdrop { background: rgb(8 27 17 / 58%); backdrop-filter: blur(4px); }
.create-dialog form { padding: 24px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 4px 0 6px; font-size: 21px; letter-spacing: -.03em; }
.dialog-heading p:last-child { max-width: 420px; margin: 0; color: #758179; font-size: 9px; line-height: 1.5; }
.create-dialog-heading { padding-bottom: 14px; }
.create-dialog-heading h2 { margin-bottom: 0; }
.create-dialog form > label { display: grid; gap: 7px; margin: 19px 0; }
.create-dialog form > label span, .create-dialog legend { color: #4d5b52; font-size: 9px; font-weight: 720; }
.create-dialog form > label small { color: #7d8993; font-size: 8px; line-height: 1.45; }
.create-dialog fieldset { margin: 0; padding: 0; border: 0; }
.create-dialog legend { margin-bottom: 8px; }
.builder-start-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px !important; }
.builder-start-modes legend { grid-column: 1 / -1; }
.builder-start-modes label { position: relative; cursor: pointer; }
.builder-start-modes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.builder-start-modes label > span { display: grid; align-content: center; justify-content: center; gap: 4px; min-height: 46px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: center; }
.builder-start-modes strong, .builder-start-modes small { display: block; }
.builder-start-modes strong { color: var(--ink); font-size: 9px; }
.builder-start-modes small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.builder-start-modes input:checked + span { border-color: var(--accent); background: #f4f6ff; box-shadow: inset 0 0 0 1px var(--accent); }
.builder-start-modes input:focus-visible + span { outline: 3px solid rgb(79 107 255 / 20%); outline-offset: 2px; }
.create-dialog [data-start-mode-fields] { display: grid; gap: 15px; margin: 19px 0; }
.create-dialog [data-start-mode-fields] label { display: grid; gap: 7px; }
.create-dialog [data-start-mode-fields] span { color: #4d5b52; font-size: 9px; font-weight: 720; }
.create-dialog [data-start-mode-fields][hidden] { display: none; }
.create-dialog input[type="file"] { height: auto; min-height: 39px; padding: 9px 11px; }
.create-source-section { display: grid; gap: 10px; }
.create-source-heading { display: flex; align-items: center; gap: 6px; }
.create-source-heading > span { color: #4d5b52; font-size: 9px; font-weight: 720; }
.create-help-button { width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #ced6d1; border-radius: 50%; color: #6f7b74; background: #fff; font-size: 9px; font-weight: 800; cursor: help; }
.create-upload-dropzone { position: relative; min-height: 116px; display: grid !important; align-content: center; justify-items: center; gap: 7px !important; overflow: hidden; padding: 18px !important; border: 1.5px dashed #aebbb3; border-radius: 13px; color: #26342c; background: #fafcfb; text-align: center; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.create-upload-dropzone:hover, .create-upload-dropzone:focus-within, .create-upload-dropzone.is-dragover { border-color: var(--accent); background: #f0f3ff; box-shadow: 0 0 0 4px rgb(79 107 255 / 14%); }
.create-upload-dropzone .create-upload-input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.create-upload-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff !important; background: #17251d; }
.create-upload-icon .icon { width: 15px; height: 15px; }
.create-upload-dropzone strong { font-size: 11px; }
.create-upload-dropzone small { color: #78847d; font-size: 8px; font-weight: 600; }
.create-source-actions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.create-source-actions > span { color: #96a099 !important; font-size: 8px !important; font-weight: 600 !important; }
.create-source-actions button { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #405047; background: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }
.create-source-actions button:hover { border-color: #adb9b2; background: #f8faf9; }
.create-source-actions .icon { width: 13px; height: 13px; }
.create-source-selection { margin: -2px 0 0; color: #7b8780; font-size: 8px; text-align: center; }
.create-selected-asset { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.create-selected-asset:hover { border-color: #aeb9b2; background: #fafcfb; }
.create-selected-asset.has-selection { border-color: #b9d9c6; background: #f4faf6; }
.create-selected-asset > span:nth-child(2) { display: grid; gap: 2px; }
.create-selected-asset strong { color: var(--ink); font-size: 9px; }
.create-selected-asset small { color: #7a867f; font-size: 8px; }
.create-selected-asset-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #4f6bff !important; background: #eef1ff; }
.create-selected-asset-icon .icon, .create-selected-asset > .icon { width: 14px; height: 14px; }
.create-selected-asset > .icon { color: #8b958f; }
.create-auto-build-settings { border-top: 1px solid var(--line); }
.create-auto-build-settings summary { padding-top: 11px; color: #67736c; font-size: 9px; font-weight: 700; cursor: pointer; }
.create-auto-build-settings label { margin-top: 10px; }
.compact-dialog-note { padding-top: 9px; padding-bottom: 9px; }
.create-asset-picker-dialog { width: min(480px, calc(100vw - 30px)); }
.create-asset-picker-shell { padding: 24px; }
.create-asset-picker-list { max-height: min(420px, calc(100vh - 190px)); display: grid; gap: 8px; overflow: auto; padding: 14px 2px 2px; }
.create-asset-option { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-align: left; cursor: pointer; }
.create-asset-option:hover { border-color: var(--accent); background: #f6f7ff; }
.create-asset-option > span:nth-child(2) { display: grid; gap: 3px; }
.create-asset-option strong { font-size: 10px; }
.create-asset-option small { color: #7b867f; font-size: 8px; }
.create-asset-option-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #4f6bff; background: #eef1ff; }
.create-asset-option-icon .icon, .create-asset-option > .icon { width: 15px; height: 15px; }
.create-asset-option > .icon { color: #8d9791; }
.create-asset-picker-shell > .dialog-actions { margin-top: 16px; }
.create-asset-picker-empty { display: grid; justify-items: center; gap: 6px; padding: 28px; color: #78847d; text-align: center; }
.create-asset-picker-empty .icon { width: 24px; height: 24px; }
.create-asset-picker-empty strong { color: var(--ink); font-size: 10px; }
.create-asset-picker-empty small { font-size: 8px; }
.create-retained-files { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid #bfe3cd; border-radius: 8px; color: #166b43; background: #f0f9f4; }
.create-retained-files .icon { flex: 0 0 auto; width: 14px; height: 14px; }
.create-retained-files strong, .create-retained-files small { display: block; }
.create-retained-files small { overflow-wrap: anywhere; margin-top: 2px; color: #61756a; font-size: 8px; font-weight: 500; }
.create-form-guidance { min-height: 16px; margin: 10px 0 0; color: var(--muted); font-size: 8px; font-weight: 650; line-height: 1.45; }
[data-create-submit][data-scanning="true"] { gap: 7px; cursor: wait; }
.create-scan-dots { display: inline-flex; align-items: center; gap: 3px; min-width: 21px; }
.create-scan-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentcolor; animation: create-scan-dot .9s ease-in-out infinite; }
.create-scan-dots i:nth-child(2) { animation-delay: .14s; }
.create-scan-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes create-scan-dot { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.auto-build-dialog { width: min(1400px, calc(100vw - 252px)); max-height: calc(100vh - 82px); margin: 68px 14px 14px auto; overflow: hidden; border-radius: 15px; }
.auto-build-dialog::backdrop { background: rgb(14 31 23 / 24%); backdrop-filter: blur(2px); }
.auto-build-dialog .auto-build-review-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100vh - 82px); padding: 0; }
.auto-build-review-header, .auto-build-review-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; }
.auto-build-review-header { position: sticky; z-index: 4; top: 0; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 96%); backdrop-filter: blur(10px); }
.auto-build-review-header-actions, .auto-build-back-actions { display: flex; align-items: center; gap: 8px; }
.auto-build-review-header h2, .auto-build-review-header p, .auto-build-section-heading h3, .auto-build-section-heading p { margin: 0; }
.auto-build-review-header > div > p:last-child { max-width: 690px; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.auto-build-review-grid { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow-y: auto; padding: 14px 24px 22px; background: #f5f8f6; }
.auto-build-review-grid > section { min-width: 0; }
.auto-build-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.auto-build-section-heading > span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.auto-build-configurator-preview { display: grid; height: clamp(360px, calc(100dvh - 240px), 520px); min-height: 0; grid-template-columns: minmax(0, 2.15fr) minmax(230px, .55fr); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 12px 30px rgb(20 52 34 / 8%); }
.auto-build-preview-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; background: #edf3ef; }
.auto-build-preview-stage model-viewer, .auto-build-preview-stage > img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.auto-build-preview-stage[data-part-selection-active="true"] model-viewer { cursor: crosshair; touch-action: none; }
.auto-build-part-toolbar { position: absolute; z-index: 3; top: 12px; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); padding: 4px; border: 1px solid #d8e0dd; border-radius: 10px; background: rgb(255 255 255 / 94%); box-shadow: 0 5px 18px rgb(17 35 25 / 10%); }
.auto-build-part-toolbar button { padding: 6px 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 8px; font-weight: 760; cursor: pointer; }
.auto-build-part-toolbar button[aria-pressed="true"] { color: #fff; background: #3158ed; }
.auto-build-part-toolbar strong { padding: 0 6px; color: #294ec8; font-size: 8px; white-space: nowrap; }
.auto-build-part-pick-hint { position: absolute; z-index: 2; top: 54px; left: 50%; display: none; transform: translateX(-50%); padding: 6px 9px; border: 1px solid #c8d2ff; border-radius: 999px; color: #294ec8; background: rgb(247 249 255 / 94%); box-shadow: 0 5px 16px rgb(36 77 200 / 10%); font-size: 8px; font-weight: 780; pointer-events: none; }
.auto-build-preview-stage[data-part-selection-active="true"] .auto-build-part-pick-hint { display: block; }
.auto-build-stage-selected { position: absolute; z-index: 3; right: 12px; bottom: 54px; display: flex; max-width: min(520px, calc(100% - 24px)); align-items: center; gap: 6px; padding: 7px; border: 1px solid #aebdff; border-radius: 10px; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 24px rgb(36 77 200 / 13%); }
.auto-build-stage-selected[hidden] { display: none; }
.auto-build-stage-selected > div { min-width: 0; display: grid; gap: 3px; }
.auto-build-stage-selected strong { color: #294ec8; font-size: 8px; }
.auto-build-stage-selected span { display: flex; min-width: 0; gap: 4px; }
.auto-build-stage-selected code { max-width: 150px; overflow: hidden; padding: 2px 4px; border-radius: 4px; background: #edf1ff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.auto-build-stage-selected button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid #d4dbd8; border-radius: 7px; color: var(--ink); background: #fff; font-size: 8px; font-weight: 730; cursor: pointer; }
.auto-build-preview-stage > span { position: absolute; left: 12px; bottom: 12px; padding: 5px 8px; border-radius: 999px; color: #fff; background: rgb(17 35 25 / 76%); font-size: 8px; font-weight: 700; }
.auto-build-preview-stage > .auto-build-preview-ar { position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; border: 0; border-radius: 999px; color: #fff; background: #173f2d; opacity: .72; }
.auto-build-preview-views { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; gap: 4px; padding: 4px; border: 1px solid rgb(255 255 255 / 72%); border-radius: 9px; background: rgb(255 255 255 / 90%); box-shadow: 0 5px 18px rgb(17 35 25 / 10%); }
.auto-build-preview-views button { padding: 6px 8px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 8px; font-weight: 740; cursor: pointer; }
.auto-build-preview-views button[aria-pressed="true"] { color: #fff; background: #173f2d; }
.auto-build-runtime-error { display: grid; max-width: 360px; gap: 9px; padding: 22px; border: 1px solid #e5bcbc; border-radius: 14px; color: #7d3232; background: #fff8f8; text-align: center; }
.auto-build-runtime-error p { margin: 0; color: #765555; font-size: 11px; line-height: 1.5; }
.auto-build-runtime-error small { color: #765555; font-size: 9px; }
.auto-build-runtime-error code { padding: 2px 5px; border-radius: 5px; color: #6c2929; background: #f7e7e7; font-size: inherit; }
.auto-build-runtime-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.auto-build-runtime-error .button { justify-self: center; }
.auto-build-preview-stage[data-runtime-state="pending"] model-viewer { opacity: .78; }
.auto-build-preview-panel { display: grid; min-height: 0; align-content: start; gap: 13px; overflow-y: auto; padding: 18px; border-left: 1px solid var(--line); overscroll-behavior: contain; scrollbar-gutter: stable; }
.auto-build-preview-panel > p { margin: 0; font-size: 14px; font-weight: 780; }
.auto-build-preview-group { display: grid; gap: 7px; }
.auto-build-preview-group > strong { font-size: 9px; }
.auto-build-preview-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.auto-build-preview-group button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
.auto-build-preview-group button.is-active { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.auto-build-preview-group i { width: 10px; height: 10px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 50%; }
.auto-build-preview-group small { align-self: center; color: var(--muted); font-size: 8px; }
.auto-build-preview-price { padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.auto-build-preview-cta { width: 100%; padding: 10px; border: 0; border-radius: 8px; color: #536159; background: #e6ebe8; font-weight: 740; }
.auto-build-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.auto-build-comparison > div { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.auto-build-comparison dt { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.auto-build-comparison dd { margin: 3px 0 0; font-size: 11px; font-weight: 780; }
.auto-build-diagnostics { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.auto-build-diagnostics > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; color: var(--ink); font-size: 9px; font-weight: 760; cursor: pointer; }
.auto-build-diagnostics > summary span { color: var(--muted); font-size: 8px; font-weight: 650; }
.auto-build-diagnostics .auto-build-comparison { padding: 0 10px 10px; margin: 0; }
.auto-build-questions { display: grid; align-content: start; gap: 9px; }
.auto-build-questions > .auto-build-section-heading { margin-bottom: 3px; }
.auto-build-question { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.auto-build-question.is-blocked { border-color: #e3ba86; background: #fffaf3; }
.auto-build-question.is-answered { border-color: #bfe3cd; background: #f7fcf9; }
.auto-build-question-heading { display: flex; justify-content: space-between; gap: 10px; }
.auto-build-question-heading span, .auto-build-question-heading strong { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.auto-build-question-heading strong { color: #9a5c13; }
.auto-build-question h3 { margin: 7px 0 4px; font-size: 10px; }
.auto-build-question p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.auto-build-question-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.auto-build-change-answer { padding: 0; margin-top: 9px; border: 0; color: var(--accent); background: transparent; font-size: 8px; font-weight: 750; text-decoration: underline; cursor: pointer; }
.auto-build-choice { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-size: 8px; font-weight: 700; }
.auto-build-choice.is-selected { border-color: var(--accent); color: var(--accent); background: #f0f8f4; box-shadow: inset 0 0 0 1px var(--accent); }
.auto-build-mapping-review { align-self: start; overflow: hidden; border: 1px solid #bfe3cd; border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgb(20 52 34 / 5%); }
.auto-build-mapping-review.is-blocked { border-color: #e3ba86; background: #fffaf3; }
.auto-build-mapping-review > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; list-style: none; cursor: pointer; }
.auto-build-mapping-review > summary::-webkit-details-marker { display: none; }
.auto-build-mapping-review > summary > span { display: flex; align-items: center; gap: 9px; }
.auto-build-mapping-review > summary em { color: var(--accent); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auto-build-mapping-review > summary b { font-size: 10px; }
.auto-build-mapping-review > summary small { color: var(--muted); font-size: 8px; font-weight: 600; }
.auto-build-mapping-review > summary > span:last-child { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.auto-build-mapping-review > summary i { font-style: normal; transition: transform .15s ease; }
.auto-build-mapping-review[open] > summary i { transform: rotate(180deg); }
.auto-build-mapping-review-body { padding: 0 13px 13px; border-top: 1px solid var(--line); }
.auto-build-mapping-review-body > p { margin: 11px 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.auto-build-mapping-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.auto-build-mapping-summary article { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #f7faf8; }
.auto-build-mapping-summary strong { font-size: 16px; }
.auto-build-mapping-summary span, .auto-build-mapping-next span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.auto-build-mapping-next { display: grid; gap: 4px; padding: 12px; border-radius: 9px; color: #173f2d; background: #edf6f1; font-size: 9px; }
.auto-build-part-authoring { margin-top: 10px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.auto-build-part-authoring[data-active="true"] { border-color: #9eb2ff; box-shadow: inset 0 0 0 1px #dbe2ff; }
.auto-build-part-authoring > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; list-style: none; cursor: pointer; }
.auto-build-part-authoring > summary::-webkit-details-marker { display: none; }
.auto-build-part-authoring > summary > span { display: grid; gap: 2px; }
.auto-build-part-authoring > summary strong { font-size: 10px; }
.auto-build-part-authoring > summary small { color: var(--muted); font-size: 8px; font-weight: 500; }
.auto-build-part-authoring > summary > strong:last-child { padding: 5px 8px; border-radius: 999px; color: #294ec8; background: #edf1ff; white-space: nowrap; }
.auto-build-part-authoring-body { display: grid; gap: 9px; padding: 12px; border-top: 1px solid var(--line); }
.auto-build-part-authoring-heading, .auto-build-part-actions, .auto-build-create-part-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auto-build-part-authoring-heading > div { display: grid; gap: 2px; }
.auto-build-part-authoring-heading strong { font-size: 10px; }
.auto-build-part-authoring-heading span, .auto-build-selected-empty { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.auto-build-part-authoring-heading > strong:last-child { padding: 5px 8px; border-radius: 999px; color: #294ec8; background: #edf1ff; white-space: nowrap; }
.auto-build-part-mode-row { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid #dce3e0; border-radius: 8px; background: #f8faf9; }
.auto-build-part-mode-row span { color: var(--muted); font-size: 8px; line-height: 1.4; }
.auto-build-part-mode-row .auto-build-manual-step { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; color: #fff; background: #3158ed; font-size: 9px; font-weight: 800; }
.auto-build-part-authoring[data-active="true"] .auto-build-part-mode-row { border-color: #aebdff; color: #294ec8; background: #f4f6ff; }
.auto-build-selected-parts, .auto-build-created-part-groups { display: flex; flex-wrap: wrap; gap: 5px; }
.auto-build-selected-parts code { max-width: 260px; overflow: hidden; padding: 5px 7px; border: 1px solid #d8dfdd; border-radius: 6px; color: #304038; background: #f7f9f8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.auto-build-create-part-group { flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--line); }
.auto-build-create-part-group label { display: grid; min-width: min(210px, 30%); flex: 1 1 180px; gap: 4px; }
.auto-build-create-part-group label span { color: var(--muted); font-size: 8px; font-weight: 700; }
.auto-build-create-part-group input, .auto-build-create-part-group select { width: 100%; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: #fff; font: inherit; font-size: 9px; }
.auto-build-mapping-conflict, .auto-build-mapping-ready, .auto-build-mapping-notice { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #e7c79c; border-radius: 8px; color: #73430f; background: #fff9ef; font-size: 8px; line-height: 1.45; }
.auto-build-mapping-ready, .auto-build-mapping-notice { border-color: #bfe3cd; color: #24543e; background: #f1f9f4; }
.auto-build-mapping-conflict strong, .auto-build-mapping-ready strong { font-size: 9px; }
.auto-build-created-part-groups { padding-top: 8px; border-top: 1px solid var(--line); }
.auto-build-created-part-groups > article { position: relative; display: grid; min-width: 180px; gap: 5px; padding: 8px 30px 8px 9px; border-radius: 8px; color: #24543e; background: #edf6f1; font-size: 8px; }
.auto-build-created-part-groups article > span, .auto-build-created-part-groups article > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.auto-build-created-part-groups article small { color: var(--muted); }
.auto-build-created-part-groups article em { padding: 3px 5px; border-radius: 5px; background: #fff; font-style: normal; }
.auto-build-created-part-groups button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; color: #7a3838; background: #fff; cursor: pointer; }
.auto-build-created-part-groups article > button { position: absolute; top: 7px; right: 7px; }
.auto-build-preview-group-manual small { width: 100%; }
.auto-build-review-footer { position: sticky; z-index: 4; bottom: 0; border-top: 1px solid var(--line); background: rgb(255 255 255 / 96%); backdrop-filter: blur(10px); }
.auto-build-review-footer > div { display: grid; gap: 3px; }
.auto-build-review-footer small { color: var(--muted); font-size: 8px; }
.auto-build-loading, .auto-build-finished { display: grid; justify-items: center; gap: 9px; padding: 52px 28px; text-align: center; }
.auto-build-loading h2, .auto-build-loading p, .auto-build-finished h2, .auto-build-finished p { margin: 0; }
.auto-build-loading > p:last-of-type, .auto-build-finished > p { max-width: 560px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.auto-build-loading > small { max-width: 420px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.auto-build-scan-progress { width: min(360px, 100%); height: 6px; margin-top: 5px; accent-color: var(--accent); }
.auto-build-scan-steps { display: grid; width: min(360px, 100%); gap: 8px; margin: 2px 0; padding: 0; color: var(--muted); font-size: 12px; list-style: none; text-align: left; }
.auto-build-scan-steps li { display: flex; align-items: center; gap: 7px; }
.auto-build-scan-steps li::before { width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 50%; content: ""; }
.auto-build-scan-steps li.is-current { color: var(--ink); font-weight: 700; }
.auto-build-scan-steps li.is-current::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 4px); }
.auto-build-spinner { width: 32px; height: 32px; border: 3px solid #dce7e1; border-top-color: var(--accent); border-radius: 50%; animation: auto-build-spin .8s linear infinite; }
.auto-build-finished-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 20px; }
.auto-build-finished-actions { display: flex; gap: 8px; margin-top: 10px; }
@keyframes auto-build-spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .builder-start-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-build-dialog { width: calc(100vw - 28px); max-height: calc(100vh - 28px); margin: auto; }
  .auto-build-review-grid, .auto-build-configurator-preview { grid-template-columns: 1fr; }
  .auto-build-configurator-preview { height: auto; }
  .auto-build-preview-stage { min-height: 400px; }
  .auto-build-preview-stage model-viewer, .auto-build-preview-stage > img { min-height: 400px; }
  .auto-build-preview-panel { max-height: none; overflow: visible; border-top: 1px solid var(--line); border-left: 0; }
  .auto-build-review-header, .auto-build-review-footer { align-items: stretch; }
  .auto-build-review-footer { flex-direction: column; }
  .auto-build-review-footer .button { width: 100%; }
  .auto-build-part-authoring-heading, .auto-build-create-part-group { align-items: stretch; flex-direction: column; }
  .auto-build-create-part-group label { min-width: 100%; }
}
@media (max-width: 640px) {
  .auto-build-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; overflow: auto; border-radius: 0; }
  .auto-build-dialog .auto-build-review-shell { display: block; max-height: none; }
  .auto-build-review-header { position: static; padding: 14px 12px; }
  .auto-build-review-header > div > p:last-child { display: none; }
  .auto-build-review-header-actions .button { display: none; }
  .auto-build-review-grid { overflow: visible; padding: 10px 8px 96px; }
  .auto-build-section-heading { align-items: flex-start; }
  .auto-build-configurator-preview { min-height: 0; }
  .auto-build-preview-stage, .auto-build-preview-stage model-viewer, .auto-build-preview-stage > img { min-height: 330px; }
  .auto-build-preview-stage { overflow: visible; }
  .auto-build-preview-views { top: 8px; left: 8px; max-width: calc(100% - 16px); }
  .auto-build-preview-views button { padding: 6px; }
  .auto-build-part-toolbar { top: 50px; max-width: calc(100% - 16px); transform: translateX(-50%); }
  .auto-build-part-pick-hint { top: 90px; max-width: calc(100% - 24px); text-align: center; }
  .auto-build-stage-selected { right: 8px; bottom: 44px; left: 8px; max-width: none; flex-wrap: wrap; }
  .auto-build-preview-panel { padding: 14px 12px; }
  .auto-build-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-build-mapping-review > summary { align-items: flex-start; }
  .auto-build-mapping-review > summary > span:first-child { display: grid; gap: 3px; }
  .auto-build-mapping-review > summary small { line-height: 1.35; }
  .auto-build-mapping-summary { grid-template-columns: 1fr; }
  .auto-build-review-footer { position: fixed; right: 0; bottom: 0; left: 0; gap: 8px; padding: 10px 12px; }
  .auto-build-review-footer > div small { display: none; }
  .auto-build-review-footer .button { min-height: 42px; }
  .auto-build-part-authoring > summary { align-items: flex-start; }
}
.mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-options label { position: relative; cursor: pointer; }
.mode-options input { position: absolute; opacity: 0; pointer-events: none; }
.mode-options label > span { min-height: 84px; display: grid; justify-items: start; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: #657169; background: #fbfcfb; }
.mode-options label > span .icon { width: 19px; height: 19px; margin-bottom: 2px; }
.mode-options strong { color: #344138; font-size: 10px; }
.mode-options small { font-size: 8px; }
.mode-options input:checked + span { border-color: #62a47e; color: var(--accent); background: #f0f9f4; box-shadow: 0 0 0 2px rgb(8 122 71 / 8%); }
.mode-options input:focus-visible + span { outline: 3px solid rgb(8 122 71 / 20%); outline-offset: 2px; }
.creation-direction { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; margin-top: 18px; border: 1px solid #cfd6ff; border-radius: 10px; color: #334194; background: #f5f7ff; }
.creation-direction > .icon { width: 22px; height: 22px; }
.creation-direction strong, .creation-direction small { display: block; }
.creation-direction strong { color: #151c4f; font-size: 10px; }
.creation-direction small { margin-top: 3px; color: #6a73a7; font-size: 8px; }
.creation-direction > span { padding: 5px 7px; border-radius: 999px; color: #3048bb; background: #e6ebff; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.dialog-note { display: flex; align-items: center; gap: 8px; padding: 10px; margin-top: 16px; border-radius: 8px; color: #64736a; background: #f3f7f4; font-size: 8px; }
.dialog-note .icon { width: 14px; height: 14px; color: #278256; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.share-install-dialog { width: min(1040px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgb(13 13 13 / 24%); }
.share-install-dialog::backdrop { background: rgb(18 31 24 / 58%); backdrop-filter: blur(5px); }
.share-install-shell { max-height: calc(100dvh - 32px); overflow-y: auto; overflow-x: hidden; padding: 26px; }
.share-install-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 2px; }
.share-install-heading-title { position: relative; display: flex; align-items: center; gap: 8px; }
.share-install-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.035em; }
.share-install-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .9fr); gap: 26px; padding-top: 25px; }
.share-install-settings { min-width: 0; display: grid; align-content: start; gap: 22px; padding-right: 26px; border-right: 1px solid var(--line); }
.share-install-settings fieldset { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.share-install-settings legend { margin-bottom: 10px; padding: 0; color: #313946; font-size: 14px; font-weight: 750; line-height: 24px; }
.share-install-field-heading { position: relative; display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.share-install-field-heading > label, .share-install-field-heading > .share-install-method-label { margin: 0; color: #313946; font-size: 14px; font-weight: 750; line-height: 24px; }
.share-install-field { min-width: 0; display: block; }
.share-install-field[hidden], .share-install-inline[hidden], .share-install-field-error[hidden], .share-install-new-website[hidden], .share-install-published[hidden] { display: none !important; }
.share-install-field input, .share-install-field select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d8dde6; border-radius: 9px; color: var(--ink); background: #fff; font: inherit; font-size: 13px; }
.share-install-field.is-invalid input, .share-install-field.is-invalid select, .share-install-field.is-invalid .share-install-configurator-card { border-color: #d33c2f; background: #fff8f7; box-shadow: 0 0 0 2px rgb(211 60 47 / 10%); }
.share-install-field small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.share-install-field .share-install-field-error { color: #9c2f25; font-weight: 700; }
.share-install-configurator-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 10px 14px 10px 10px; border: 1px solid #d8dde6; border-radius: 11px; background: #fff; }
.share-install-configurator-card:focus-within { outline: 3px solid rgb(85 112 255 / 24%); outline-offset: 2px; }
.share-install-configurator-card > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.share-install-configurator-preview { display: grid; flex: 0 0 88px; width: 88px; height: 64px; place-items: center; overflow: hidden; border-radius: 7px; color: #7a899a; background: #f0f3f8; }
.share-install-configurator-preview > .icon { width: 28px; height: 28px; }
.share-install-configurator-cover { display: grid; width: 100%; height: 100%; place-items: center; }
.share-install-configurator-cover > .icon { width: 28px; height: 28px; }
.share-install-configurator-preview img, .share-install-configurator-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.share-install-configurator-name { min-width: 0; flex: 1; display: grid; gap: 6px; }
.share-install-configurator-name > strong { overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; }
.share-install-configurator-card > .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.share-install-published { display: inline-flex; align-items: center; gap: 6px; color: #667085; font-size: 11px; }
.share-install-published > span { width: 7px; height: 7px; border-radius: 50%; background: #45be70; }
.share-install-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.share-install-choice-grid label { position: relative; cursor: pointer; }
.share-install-choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.share-install-choice-grid label > span { min-height: 82px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 12px 6px; border: 1px solid #dfe3ea; border-radius: 10px; background: #fff; }
.share-install-choice-grid strong { font-size: 12px; font-weight: 650; text-align: center; overflow-wrap: anywhere; }
.share-install-choice-grid .icon { width: 25px; height: 25px; color: #536173; }
.share-install-choice-grid .share-install-woo-logo { width: 56px; height: 25px; }
.share-install-platform-letter { width: 25px; height: 25px; display: grid; place-items: center; border: 1.7px solid currentColor; border-radius: 50%; color: #536173; font-family: Georgia, serif; font-size: 20px; font-weight: 750; line-height: 1; }
.share-install-choice-grid input:checked + span { border-color: #5570ff; background: #f1f4ff; box-shadow: 0 0 0 2px rgb(85 112 255 / 10%); }
.share-install-choice-grid input:checked + span > .icon, .share-install-choice-grid input:checked + span > .share-install-platform-letter { color: #3154d8; }
.share-install-choice-grid input:focus-visible + span { outline: 3px solid rgb(85 112 255 / 24%); outline-offset: 2px; }
.share-install-choice-grid input:disabled + span { border-style: dashed; color: #8b94a2; background: #f3f4f6; box-shadow: none; }
.share-install-choice-grid input:disabled + span > .icon, .share-install-choice-grid input:disabled + span > .share-install-platform-letter { color: #a1a9b5; }
.share-install-choice-grid label:has(input:disabled) { cursor: not-allowed; }
.share-install-tooltip { width: 22px; height: 22px; display: inline-grid; place-items: center; margin: 0; padding: 0; border: 1px solid #aab3c0; border-radius: 999px; color: #536173; background: #fff; font-size: 12px; font-weight: 750; line-height: 1; cursor: pointer; vertical-align: middle; }
.share-install-help > summary { cursor: pointer; list-style: none; }
.share-install-help > summary::-webkit-details-marker { display: none; }
.share-install-help > summary:focus-visible, .share-install-existing > summary:focus-visible, .share-install-code-details > summary:focus-visible { outline: 3px solid rgb(85 112 255 / 24%); outline-offset: 3px; border-radius: 6px; }
.share-install-inline-help { position: static; }
.share-install-help-body { color: #536173; font-size: 12px; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
.share-install-help-body p { margin: 0 0 8px; }
.share-install-help-body p:last-child { margin-bottom: 0; }
.share-install-help-body ol { margin: 0; padding-left: 20px; }
.share-install-help-body li + li { margin-top: 7px; }
.share-install-inline-help > .share-install-help-body { position: absolute; z-index: 12; top: calc(100% + 8px); left: 0; width: min(370px, 100%); padding: 14px; border: 1px solid #d8dde6; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgb(26 35 50 / 16%); }
.share-install-site-select { position: relative; }
.share-install-site-select > .icon { position: absolute; z-index: 1; top: 13px; left: 12px; width: 18px; height: 18px; color: #667085; pointer-events: none; }
.share-install-site-select > select { padding-left: 38px; }
.share-install-new-website { margin-top: 12px; }
.share-install-new-website > label { display: block; margin-bottom: 7px; color: #313946; font-size: 12px; font-weight: 700; }
.share-install-site-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.share-install-add-website, .share-install-site-actions > a { color: #4f64f4; background: transparent; font: inherit; font-size: 12px; }
.share-install-add-website { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; cursor: pointer; }
.share-install-add-website > .icon { width: 14px; height: 14px; }
.share-install-add-website:disabled { color: #8b94a2; cursor: not-allowed; }
.share-install-connect-gate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px dashed #c8ced8; border-radius: 10px; color: #596579; background: #f6f7f9; }
.share-install-connect-gate[hidden] { display: none !important; }
.share-install-connect-gate .icon { width: 19px; height: 19px; }
.share-install-connect-gate strong { color: #343d49; font-size: 11px; font-weight: 650; }
.share-install-product-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.share-install-product-heading > .share-install-field-heading { flex: 1; margin-bottom: 0; }
.share-install-product-combobox { position: relative; }
.share-install-product-options { position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0; max-height: min(320px, 42vh); overflow-y: auto; padding: 6px; border: 1px solid #cfd5df; border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgb(26 35 50 / 16%); }
.share-install-product-option { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #202833; font: inherit; text-align: left; cursor: pointer; }
.share-install-product-option:hover, .share-install-product-option:focus-visible, .share-install-product-option[aria-selected="true"] { background: #eef1ff; outline: none; }
.share-install-product-empty { margin: 0; padding: 10px; color: #697386; font-size: 13px; }
.share-install-product-picker select:disabled, .share-install-product-picker input:disabled { color: #7e8794; background: #f3f4f6; }
.share-install-output { align-self: start; min-width: 0; display: grid; gap: 18px; padding: 21px; border: 1px solid #dfe4ec; border-radius: 14px; background: #f7f8fc; }
.share-install-output-heading { display: flex; align-items: center; gap: 13px; }
.share-install-output-heading > div { min-width: 0; }
.share-install-method-icon { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; border: 1px solid #e1e6ef; border-radius: 12px; background: #fff; color: #4b5c74; }
.share-install-method-icon > .icon { width: 29px; height: 29px; }
.share-install-method-icon > .share-install-woo-logo { width: 42px; height: 28px; }
.share-install-method-icon > .share-install-platform-letter { width: 31px; height: 31px; font-size: 25px; color: #3154d8; }
.share-install-output-heading h3 { margin: 0 0 5px; color: #26303c; font-size: 17px; line-height: 1.3; }
.share-install-output-heading p { margin: 0; color: #667085; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.share-install-output .button { width: 100%; min-height: 45px; justify-content: center; }
.share-install-output [data-share-install-action-icon] { display: inline-flex; }
.share-install-output [data-share-install-action-icon][hidden] { display: none !important; }
.share-install-output [data-share-install-action-icon] > .icon { width: 17px; height: 17px; }
.share-install-code-details { padding: 0; border: 1px solid #d8dde6; border-radius: 9px; background: #fff; }
.share-install-code-details > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; color: #344054; font-size: 12px; cursor: pointer; list-style: none; }
.share-install-code-details > summary::-webkit-details-marker, .share-install-existing > summary::-webkit-details-marker { display: none; }
.share-install-code-details > summary > .icon { margin-left: auto; width: 16px; height: 16px; }
.share-install-code-details[open] > summary > .icon, .share-install-existing[open] > summary > .icon:first-child { transform: rotate(90deg); }
.share-install-code-icon { color: #667085; font: 700 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-install-output textarea { display: block; width: calc(100% - 20px); min-height: 130px; max-height: 260px; resize: vertical; margin: 0 10px 10px; padding: 10px; border: 1px solid #d8dde6; border-radius: 7px; color: #26303c; background: #f9fafc; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.share-install-output textarea[hidden] { display: none; }
.share-install-install-help > summary { display: inline-flex; align-items: center; gap: 8px; color: #4f64f4; font-size: 12px; font-weight: 650; }
.share-install-install-help > summary > .share-install-tooltip { border-color: #667cff; color: #4f64f4; background: transparent; }
.share-install-install-help > .share-install-help-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e7f1; }
.share-install-error { margin: 0; padding: 9px 10px; border: 1px solid #efc6c2; border-radius: 8px; color: #9c2f25; background: #fff5f4; font-size: 11px; line-height: 1.45; }
.share-install-existing { padding: 0; border: 1px solid #dfe4ec; border-radius: 10px; background: #fff; }
.share-install-existing[hidden], .share-install-existing li[hidden] { display: none !important; }
.share-install-existing > summary { display: flex; align-items: center; gap: 9px; min-height: 47px; padding: 10px 12px; color: #344054; font-size: 12px; cursor: pointer; list-style: none; }
.share-install-existing > summary > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #667085; }
.share-install-connection-count { display: grid; min-width: 22px; height: 22px; margin-left: 2px; padding: 0 6px; place-items: center; border-radius: 999px; color: #667085; background: #edf0f5; font-size: 10px; font-weight: 750; }
.share-install-existing ul { display: grid; gap: 10px; margin: 0; padding: 0 12px 12px; list-style: none; }
.share-install-existing li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 10px; padding-top: 10px; border-top: 1px solid #e7eaf0; }
.share-install-existing li > span { min-width: 0; flex: 1 1 100%; display: grid; gap: 3px; }
.share-install-existing li strong { color: #29313d; font-size: 11px; }
.share-install-existing li small, .share-install-existing li a { color: #667085; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.share-install-existing li a { color: #3154d8; font-weight: 750; }
.share-install-existing li button { border: 0; padding: 3px 0; background: transparent; color: #a23b32; cursor: pointer; font-size: 10px; font-weight: 750; white-space: nowrap; }
.share-install-commerce-note { margin: 0; padding: 10px 12px; border-radius: 9px; color: #76531e; background: #fff7e8; font-size: 11px; line-height: 1.5; }
.share-install-commerce-note[data-state="ready"] { color: #285c44; background: #edf8f2; }
.share-install-commerce-note[hidden] { display: none; }
.share-install-dialog .dialog-actions { position: sticky; z-index: 2; bottom: -26px; margin: 24px -26px -26px; padding: 14px 26px; border-top: 1px solid var(--line); background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px); }
@media (max-width: 820px) {
  .share-install-shell { padding: 20px; }
  .share-install-grid { grid-template-columns: 1fr; gap: 22px; }
  .share-install-settings { padding-right: 0; border-right: 0; }
  .share-install-output { position: static; }
  .share-install-dialog .dialog-actions { bottom: -20px; margin: 22px -20px -20px; padding: 14px 20px; }
}
@media (max-width: 560px) {
  .share-install-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .share-install-shell { max-height: calc(100dvh - 16px); padding: 16px; }
  .share-install-heading h2 { font-size: 23px; }
  .share-install-grid { padding-top: 20px; }
  .share-install-settings { gap: 18px; }
  .share-install-choice-grid { gap: 6px; }
  .share-install-choice-grid label > span { min-height: 76px; padding: 10px 3px; }
  .share-install-choice-grid strong { font-size: 10px; }
  .share-install-configurator-preview { flex-basis: 68px; width: 68px; height: 56px; }
  .share-install-configurator-card { gap: 10px; min-height: 76px; }
  .share-install-configurator-name > strong { font-size: 13px; }
  .share-install-connect-gate { grid-template-columns: auto minmax(0, 1fr); }
  .share-install-connect-gate .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .share-install-product-heading { gap: 8px; }
  .share-install-output { padding: 17px; }
  .share-install-dialog .dialog-actions { bottom: -16px; margin: 20px -16px -16px; padding: 12px 16px; }
}
@media (max-width: 360px) {
  .share-install-choice-grid strong { font-size: 9px; white-space: nowrap; }
}
.create-dialog-primary-action { align-items: center; justify-content: space-between; }
.create-dialog-primary-action small { max-width: 250px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.discard-dialog { width: min(500px, calc(100vw - 30px)); }
.discard-dialog .dialog-heading p strong { color: #0d0d0d; }

.toast { position: fixed; z-index: 150; right: 20px; bottom: 20px; width: min(390px, calc(100vw - 40px)); display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 26px; align-items: center; gap: 9px; padding: 11px 11px 11px 13px; border: 1px solid #bddfc9; border-radius: 11px; color: #27523a; background: #f6fff9; box-shadow: 0 16px 40px rgb(13 53 29 / 18%); animation: toast-in 180ms ease-out; }
.toast[hidden] { display: none; }
.toast > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #29905a; }
.toast > span .icon { width: 13px; height: 13px; }
.toast[data-tone="warning"] { color: #8a3320; border-color: #e7bca2; background: #fff8f1; }
.toast[data-tone="warning"] > span { background: #a84822; font-weight: 800; }
.toast p { margin: 0; font-size: 9px; font-weight: 650; line-height: 1.45; }
.toast-action { min-height: 32px; padding: 0 10px; border: 1px solid currentColor; border-radius: 7px; color: #17653b; background: #fff; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.toast-action[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.sidebar-scrim { display: none; }

.read-back { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 11px; color: #617067; font-size: 9px; font-weight: 700; }
.read-back a, .read-back > span { display: inline-flex; align-items: center; gap: 7px; }
.read-back a { color: var(--accent); text-decoration: none; }
.read-back a .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.read-back > span { padding: 6px 9px; border: 1px solid #d6e7dc; border-radius: 999px; color: #27734c; background: #f1f9f4; }
.read-back > span .icon { width: 12px; height: 12px; }
.read-only-banner { margin-top: -8px; }
.read-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.read-metrics article { min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 3px 13px rgb(26 48 34 / 3%); }
.read-metrics small, .read-metrics strong, .read-metrics span { display: block; }
.read-metrics small { color: #7a867e; font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.read-metrics strong { margin-top: 7px; font-size: 16px; letter-spacing: -.02em; }
.read-metrics span { margin-top: 4px; overflow: hidden; color: #849087; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.read-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 17px; align-items: start; }
.read-primary { min-width: 0; display: grid; gap: 17px; }
.read-panel { overflow: hidden; }
.read-panel-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.read-panel-heading h2 { margin: 4px 0 0; font-size: 14px; }
.read-panel-heading > span { color: #7a877f; font-size: 8px; font-weight: 700; }
.read-definition { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 7px 19px 19px; }
.read-definition > div { min-width: 0; padding: 13px 10px 11px 0; border-bottom: 1px solid #edf1ee; }
.read-definition dt { color: #7c8880; font-size: 8px; font-weight: 700; }
.read-definition dd { overflow: hidden; margin: 5px 0 0; color: #28362d; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.read-definition code, .integrity-card code { color: #426151; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 500; }
.read-structure { display: grid; gap: 14px; padding: 18px; }
.read-step { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 14px; }
.read-step-heading { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border-radius: 11px; color: #2b503a; background: #eef7f1; }
.read-step-heading > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #fff; background: var(--accent); font-size: 9px; font-weight: 800; }
.read-step-heading p, .read-group-heading p { margin: 0; color: #7b8a81; font-size: 7px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.read-step-heading h3 { margin: 4px 0 0; font-size: 11px; }
.read-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.read-group { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfb; }
.read-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.read-group-heading h4 { margin: 4px 0 0; font-size: 10px; }
.read-group-heading > span { padding: 4px 6px; border-radius: 999px; color: #2b7450; background: #eaf6ee; font-size: 7px; font-weight: 750; }
.read-options { display: grid; margin: 0; padding: 5px 11px 9px; list-style: none; }
.read-options li { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #edf1ee; }
.read-options li:last-child { border-bottom: 0; }
.read-options strong, .read-options small { display: block; }
.read-options strong { font-size: 9px; }
.read-options small { margin-top: 3px; color: #8d9891; font-size: 7px; }
.read-options li > span { color: #397354; font-size: 8px; font-weight: 720; white-space: nowrap; }
.read-panel td strong { font-size: 9px; }
.read-panel td br { display: block; content: ""; margin-top: 4px; }
.cell-note { display: block; margin-top: 3px; color: #8c9790; font-size: 7px; }
.storage-key { display: block; max-width: 330px; overflow-wrap: anywhere; white-space: normal; }
.read-aside { position: sticky; top: 85px; }
.integrity-card { padding: 19px; }
.integrity-card h2 { margin: 5px 0 16px; font-size: 16px; }
.integrity-card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.integrity-card li { min-height: 48px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center; border-bottom: 1px solid #edf1ee; }
.integrity-card li > .icon { width: 22px; height: 22px; padding: 5px; border-radius: 50%; color: #fff; background: #2d9a61; }
.integrity-card li strong, .integrity-card li small { display: block; }
.integrity-card li strong { color: #35443a; font-size: 8px; line-height: 1.4; }
.integrity-card li small { margin-top: 2px; color: #2b8354; font-size: 7px; font-weight: 750; }
.integrity-card dl { display: grid; gap: 13px; margin: 17px 0 0; }
.integrity-card dl div { min-width: 0; }
.integrity-card dt { color: #7f8b83; font-size: 7px; font-weight: 730; text-transform: uppercase; }
.integrity-card dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #445148; font-size: 8px; }
.integrity-card dd code { display: block; }
.read-state { min-height: 230px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 30px; text-align: left; }
.read-state h2 { margin: 0; font-size: 15px; }
.read-state p { max-width: 520px; margin: 6px 0 0; color: #758179; font-size: 9px; line-height: 1.6; }
.read-state-error > div { min-width: 0; max-width: 720px; }
.read-state-error h2 { font-size: 18px; }
.read-state-error p { max-width: none; margin-top: 10px; font-size: 14px; }
.read-state-error .button { margin: 12px 8px 0 0; }
@media (max-width: 500px) { .read-state-error { flex-direction: column; align-items: flex-start; padding: 20px; } }
.validation-banner { border-color: #efd5b2; color: #8a561b; background: #fff9f0; }
.validation-banner p { color: #836a4d; }
.text-action { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: var(--accent); background: none; font-size: 9px; font-weight: 700; cursor: pointer; }
.text-action .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.editor-form { display: grid; gap: 17px; }
.builder-workflow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid #d7dcff; border-radius: 13px; background: #fff; box-shadow: var(--shadow-soft); }
.builder-workflow-heading { min-width: 82px; display: grid; gap: 3px; padding-right: 14px; border-right: 1px solid #e4e7f2; }
.builder-workflow-heading span { color: #767f91; font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.builder-workflow-heading strong { color: #27336f; font-size: 10px; }
.builder-workflow ol { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.builder-workflow button { width: 100%; min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px; border: 1px solid transparent; border-radius: 9px; color: #5d6573; background: transparent; text-align: left; cursor: pointer; }
.builder-workflow button > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #70798d; background: #f0f2f6; font-size: 7px; font-weight: 800; }
.builder-workflow button strong, .builder-workflow button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-workflow button strong { font-size: 8px; }
.builder-workflow button small { margin-top: 2px; color: #8991a0; font-size: 7px; }
.builder-workflow button:hover { border-color: #dce1ff; background: #f8f9ff; }
.builder-workflow button.is-done > span { color: #fff; background: #4f6bff; }
.builder-workflow button.is-current { border-color: #aeb9f7; color: #293db2; background: #eef1ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 8%); }
.builder-workflow button.is-current > span { color: #fff; background: #4f6bff; }
.builder-jump-target { scroll-margin-top: 86px; outline: 0; }
.builder-jump-target:focus { box-shadow: 0 0 0 3px rgb(79 107 255 / 12%), var(--shadow-soft); }
.editor-section { overflow: hidden; }
.editor-section-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.editor-section-heading h2 { margin: 4px 0 0; font-size: 14px; }
.editor-section-heading > code, .editor-section-heading > span { color: #6f7c74; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.builder-heading-actions { display: flex; align-items: center; gap: 12px; }
.builder-heading-actions code { color: #6f7c74; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.builder-workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 17px; }
.builder-canvas { min-width: 0; display: grid; gap: 17px; }
.builder-navigator { position: sticky; top: 84px; max-height: calc(100vh - 105px); overflow: auto; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-soft); }
.builder-navigator-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); }
.builder-navigator-heading h2 { margin: 4px 0 0; font-size: 13px; }
.builder-navigator-heading > span { padding: 5px 7px; border-radius: 999px; color: var(--brand-blue); background: var(--brand-blue-soft); font-size: 7px; font-weight: 750; white-space: nowrap; }
.builder-navigator ol, .builder-navigator ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.builder-navigator > ol { gap: 9px; padding-top: 12px; }
.builder-navigator ul { padding: 5px 0 0 13px; border-left: 1px solid #e3e7f5; }
.builder-navigator button { width: 100%; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid transparent; border-radius: 8px; color: #556176; background: transparent; text-align: left; cursor: pointer; }
.builder-navigator button > span { color: #8790a3; font-size: 7px; font-weight: 760; text-transform: uppercase; }
.builder-navigator button > strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.builder-navigator button:hover { border-color: #d9def5; background: #f8f9ff; }
.builder-navigator button[aria-current="true"] { border-color: #aab5f4; color: #263bba; background: #eef1ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 8%); }
.builder-focus-target { scroll-margin-top: 95px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.builder-focus-target.is-selected { border-color: #9aa8f1; box-shadow: 0 0 0 3px rgb(79 107 255 / 9%), var(--shadow-soft); }
.builder-structure-toolbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid #cfe1d5; border-radius: 13px; background: #f4faf6; }
.builder-structure-toolbar h2 { margin: 4px 0 0; font-size: 13px; }
.builder-structure-toolbar > div > p:last-child { margin: 5px 0 0; color: #6b7280; font-size: 8px; }
.builder-order-actions { display: inline-flex; align-items: center; gap: 5px; }
.builder-order-actions button { min-height: 27px; padding: 0 8px; border: 1px solid #d6ded9; border-radius: 7px; color: #536159; background: #fff; font-size: 7px; font-weight: 750; cursor: pointer; }
.builder-order-actions button:hover:not(:disabled) { border-color: #75a98a; color: var(--accent); }
.builder-order-actions button:focus-visible { outline: 3px solid rgb(8 122 71 / 18%); outline-offset: 1px; }
.builder-order-actions button:disabled { opacity: .38; cursor: not-allowed; }
.builder-order-actions .builder-remove { border-color: #ebd7d2; color: #9a5445; }
.editor-fields { display: grid; gap: 13px; padding: 17px 19px; }
.editor-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.editor-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-fields label { min-width: 0; display: grid; gap: 7px; color: #4d5a52; font-size: 9px; font-weight: 700; }
.editor-fields input, .editor-fields select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; }
.editor-fields input:focus, .editor-fields select:focus { border-color: #70aa89; outline: 0; box-shadow: 0 0 0 3px rgb(8 122 71 / 10%); }
.editor-group { margin: 0 19px 19px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.editor-group legend { padding: 0 7px; color: #31513f; font-size: 10px; font-weight: 750; }
.builder-group-toolbar, .builder-option-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.builder-group-toolbar > span { color: #7b8880; font-size: 7px; font-weight: 760; letter-spacing: .06em; text-transform: uppercase; }
.builder-option-toolbar strong { color: #66736b; font-size: 8px; }
.editor-options { display: grid; gap: 9px; margin-top: 15px; }
.editor-option { padding: 13px; border: 1px solid #e2e8e4; border-radius: 10px; background: #fff; }
.builder-add-card { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #afcdbb; border-radius: 10px; color: var(--accent); background: #f7fbf8; font-size: 9px; font-weight: 750; cursor: pointer; }
.builder-add-card .icon { width: 14px; height: 14px; }
.builder-section-footer { display: flex; justify-content: flex-end; padding: 0 19px 19px; }
.builder-player { overflow: hidden; }
.builder-player-layout { height: clamp(470px, 58vh, 620px); min-height: 0; max-height: 620px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); align-items: stretch; }
.builder-player-stage { position: relative; height: 100%; min-height: 0; overflow: hidden; contain: layout paint size; border-right: 1px solid var(--line); background: var(--builder-viewer-stage-background, radial-gradient(circle at 48% 38%, #fff 0, #f3f7f4 48%, #e8f0eb 100%)); }
.builder-player-stage model-viewer { width: 100%; height: 100%; min-height: 0; max-height: 100%; display: block; contain: layout paint size; --poster-color: transparent; }
.builder-player-stage .player-procedural-stage { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; perspective: 900px; pointer-events: none; }
.builder-player-stage .player-procedural-stage[hidden] { display: none; }
.builder-player-stage .player-procedural-surface { width: clamp(180px, calc(var(--procedural-width, 1.8) * 170px), 68%); aspect-ratio: var(--procedural-width, 1.8) / var(--procedural-depth, .8); position: relative; border: 1px solid rgb(75 46 25 / 28%); border-radius: 3px; background: repeating-linear-gradient(4deg, rgb(84 48 24 / 13%) 0 1px, transparent 1px calc(18px / max(1, var(--procedural-u-repeat, 4.5)))), linear-gradient(110deg, #d9bb8b, #bb8c5b 58%, #d2aa79); box-shadow: 24px 30px 32px rgb(35 29 21 / 22%); transform: rotateX(58deg) rotateZ(-28deg); }
.builder-player-stage .player-procedural-surface::after { content: ""; position: absolute; top: 100%; right: -1px; left: -1px; height: clamp(5px, calc(var(--procedural-thickness, .04) * 140px), 14px); border: 1px solid rgb(75 46 25 / 30%); border-top: 0; background: #a97648; transform-origin: top; transform: skewX(42deg); }
.builder-image-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.builder-image-stage[hidden], .builder-empty-viewer[hidden] { display: none !important; }
.builder-image-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.builder-image-stage[data-image-fit="cover"] .builder-image-layer { object-fit: cover; }
.builder-player-stage-status { position: absolute; left: 15px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgb(201 220 208 / 86%); border-radius: 999px; color: #496056; background: rgb(255 255 255 / 88%); box-shadow: 0 7px 20px rgb(28 55 37 / 8%); backdrop-filter: blur(7px); }
.builder-player-stage-status > span { width: 7px; height: 7px; border-radius: 50%; background: #2f9d61; box-shadow: 0 0 0 3px rgb(47 157 97 / 13%); }
.builder-player-stage-status p { margin: 0; font-size: 8px; font-weight: 680; }
.builder-player-controls { min-height: 0; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; padding: 20px; background: #fff; }
.builder-player-controls h3 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.02em; }
.builder-player-groups { display: grid; gap: 13px; }
.builder-player-group { display: grid; grid-template-columns: repeat(var(--opr-desktop, 2), minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; border: 0; }
/* Runway BYG-3: the preview mirrors the published Player's Choice display. */
.builder-player-group-tooltip { grid-column: 1 / -1; margin: -2px 0 2px; color: #6a776f; font-size: 7px; line-height: 1.45; }
.builder-player-group--buttons .builder-player-swatch { display: none; }
.builder-player-group--buttons button { grid-template-columns: minmax(0, 1fr); min-height: 40px; text-align: center; justify-items: center; }
.builder-player-group--color_swatches { grid-template-columns: repeat(var(--opr-desktop, 4), minmax(0, 1fr)); }
.builder-player-group--color_swatches button { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 5px; padding: 8px 4px; }
.builder-player-group--color_swatches .builder-player-swatch { width: 26px; height: 26px; }
.builder-player-group--color_swatches .builder-player-swatch svg { width: 26px; height: 26px; }
.builder-player-dropdown { grid-column: 1 / -1; min-height: 38px; padding: 7px 9px; border: 1px solid #dde5df; border-radius: 9px; background: #fff; color: #3d4b42; font: inherit; font-size: 8px; font-weight: 700; }
.configurator-builder-v1[data-builder-device="tablet"] .builder-player-group { grid-template-columns: repeat(var(--opr-tablet, 2), minmax(0, 1fr)); }
.configurator-builder-v1[data-builder-device="tablet"] .builder-player-group--color_swatches { grid-template-columns: repeat(var(--opr-tablet, 4), minmax(0, 1fr)); }
.configurator-builder-v1[data-builder-device="mobile"] .builder-player-group { grid-template-columns: repeat(var(--opr-mobile, 1), minmax(0, 1fr)); }
.configurator-builder-v1[data-builder-device="mobile"] .builder-player-group--color_swatches { grid-template-columns: repeat(var(--opr-mobile, 3), minmax(0, 1fr)); }
.builder-choice-display { display: grid; gap: 7px; padding: 10px; border: 1px solid #e7ebe8; border-radius: 9px; background: #fafbfa; }
.builder-choice-display-heading { margin: 0; color: #526057; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.builder-choice-display-per-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; }
.builder-choice-display-per-row > p { grid-column: 1 / -1; margin: 0; color: #526057; font-size: 7px; font-weight: 750; }
.builder-choice-display-many { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 6px; }
.builder-choice-display-card-style { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 7px; border-top: 1px solid #e7ebe8; }
.builder-choice-display-card-style > p { grid-column: 1 / -1; margin: 0; color: #526057; font-size: 7px; font-weight: 750; }
.builder-choice-display-card-style > label:last-child { grid-column: 1 / -1; }
.builder-player-group legend { grid-column: 1 / -1; margin-bottom: 1px; color: #526057; font-size: 8px; font-weight: 750; }
.builder-player-group button { min-height: 54px; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid #dde5df; border-radius: 9px; color: #3d4b42; background: #fbfcfb; text-align: left; font-size: 8px; font-weight: 700; cursor: pointer; }
.builder-player-group button:hover { border-color: #8fbaa0; }
.builder-player-group button[aria-pressed="true"] { border-color: #4d9e70; color: #165f3b; background: #edf8f1; box-shadow: 0 0 0 2px rgb(40 137 82 / 9%); }
.builder-player-group button:focus-visible { outline: 3px solid rgb(8 122 71 / 18%); outline-offset: 2px; }
.builder-player-swatch { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgb(35 57 43 / 10%); border-radius: 7px; color: #4d6757; background: #edf2ef; font-size: 14px; }
.builder-player-swatch svg { width: 20px; height: 20px; display: block; }
.builder-player-actions { min-height: 25px; display: flex; flex-wrap: wrap; gap: 5px; }
.builder-player-actions span { padding: 5px 7px; border-radius: 999px; color: #3f6e53; background: #eef7f1; font-size: 7px; font-weight: 680; }
.builder-player-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 13px; margin-top: auto; border-top: 1px solid var(--line); }
.builder-player-total span { color: #758179; font-size: 8px; font-weight: 700; }
.builder-player-total strong { font-size: 18px; letter-spacing: -.02em; }
.builder-player[data-preview-state="invalid"] .builder-player-stage-status > span, .builder-player[data-preview-state="waiting"] .builder-player-stage-status > span { background: #d18a38; box-shadow: 0 0 0 3px rgb(209 138 56 / 14%); }
.builder-player[data-model-state="error"] .builder-player-stage-status > span { background: #c2410c; box-shadow: 0 0 0 3px rgb(194 65 12 / 14%); }
.mapping-editor { overflow: hidden; }
.model-asset-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 17px 19px 0; padding: 14px; border: 1px solid #d8e6dc; border-radius: 11px; background: #f7fbf8; }
.model-asset-card small, .model-asset-card strong, .model-asset-card p { display: block; }
.model-asset-card small { color: #75837a; font-size: 7px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.model-asset-card strong { margin-top: 4px; font-size: 10px; }
.model-asset-card p { margin: 4px 0 0; color: #758179; font-size: 8px; }
.model-asset-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; }
.model-asset-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid #e1e4f3; }
.model-asset-card dl div { min-width: 0; }
.model-asset-card dt { color: #7b8292; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.model-asset-card dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #525c71; line-height: 1.35; }
.model-technical-details { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #e1e4f3; }
.model-technical-details summary { width: fit-content; color: #53617a; font-size: 8px; font-weight: 730; cursor: pointer; }
.model-technical-details[open] summary { margin-bottom: 2px; }
.model-technical-details dl { padding-top: 10px; border-top: 0; }
.local-glb-picker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #e1e4f3; }
.local-glb-picker input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.local-glb-picker input:focus-visible + .button { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 2px; }
.local-glb-picker .button { cursor: pointer; }
.local-glb-picker small { color: #667085; font-size: 8px; font-weight: 550; letter-spacing: 0; text-transform: none; }
.asset-lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; color: #28734c; background: #eaf6ee; font-size: 7px; font-weight: 750; white-space: nowrap; }
.asset-lock .icon { width: 11px; height: 11px; }
.mapping-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 11px 19px 0; }
.mapping-summary div { padding: 11px 12px; border: 1px solid #e0e4ef; border-radius: 9px; background: #fbfcff; }
.mapping-summary small, .mapping-summary strong { display: block; }
.mapping-summary small { color: #798196; font-size: 7px; font-weight: 720; }
.mapping-summary strong { margin-top: 4px; color: #303b78; font-size: 15px; }
.mapping-help { display: grid; gap: 3px; margin: 11px 19px 0; padding: 10px 12px; border-radius: 8px; color: #617068; background: #f3f6f4; font-size: 8px; line-height: 1.5; }
.mapping-help strong { color: #3e4b45; font-size: 8px; }
.mapping-reconciliation, .mapping-warning { display: grid; gap: 3px; margin: 11px 19px 0; padding: 10px 12px; border: 1px solid #cdd9ff; border-radius: 8px; background: #f4f7ff; color: #53607a; font-size: 8px; line-height: 1.5; }
.mapping-reconciliation strong { color: #2149a8; }
.mapping-warning { border-color: #f3d79a; background: #fff9eb; }
.mapping-warning strong { color: #8a5a00; }
.mapping-groups { display: grid; gap: 13px; padding: 15px 19px 19px; }
.mapping-group { overflow: hidden; border: 1px solid #e1e4ed; border-radius: 12px; background: #f8f9fc; }
.mapping-group-heading { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e1e4ed; background: #f4f6fb; }
.mapping-group-heading small { color: #858ca0; font-size: 7px; font-weight: 730; text-transform: uppercase; }
.mapping-group-heading h3 { margin: 4px 0 0; font-size: 11px; }
.mapping-group-heading > span { padding: 5px 7px; border-radius: 999px; color: #4457c0; background: #e9edff; font-size: 7px; font-weight: 750; }
.mapping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.mapping-card { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfb; }
.mapping-card-heading { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.mapping-card-heading small, .mapping-card-heading strong { display: block; }
.mapping-card-heading small { color: #87928b; font-size: 7px; }
.mapping-card-heading strong { margin-top: 3px; font-size: 9px; }
.mapping-state { padding: 5px 7px; border-radius: 999px; font-size: 7px; font-weight: 750; }
.mapping-state.is-mapped { color: #2d6f4e; background: #e6f5ec; }
.mapping-state.is-unmapped { color: #88591f; background: #fff0d8; }
.mapping-primary-fields { padding-bottom: 7px; }
.mapping-card .mapping-material-fields, .mapping-card .mapping-node-fields { padding-top: 6px; }
.mapping-card:not([data-mapping-kind="material_color"]) .mapping-material-fields { display: none; }
.mapping-card:not([data-mapping-kind="material_variant"]) .mapping-variant-fields { display: none; }
.mapping-card:not([data-mapping-kind="node_visibility"]) .mapping-node-fields { display: none; }
.mapping-card:not([data-mapping-kind="node_transform"]) .mapping-transform-fields { display: none; }
.mapping-transform-fields { padding: 6px 14px 14px; }
.mapping-transform-fields fieldset { margin: 8px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.mapping-transform-fields legend { padding: 0 4px; color: #697386; font-size: 7px; font-weight: 700; }
.mapping-transform-note { margin: 8px 0 0; color: #78847d; font-size: 7px; line-height: 1.45; }
.mapping-color-input { padding: 5px !important; cursor: pointer; }
.mapping-empty { min-height: 140px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 24px; text-align: left; }
.mapping-empty > .icon { width: 34px; height: 34px; color: #7b9f89; }
.mapping-empty strong { font-size: 10px; }
.mapping-empty p { max-width: 500px; margin: 5px 0 0; color: #78847d; font-size: 8px; line-height: 1.5; }
.starter-onboarding { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; padding: 18px 19px; border: 1px solid #cfd6ff; border-radius: var(--radius); background: linear-gradient(120deg, #fff, #f4f6ff); }
.starter-onboarding h2 { margin: 5px 0 0; font-size: 15px; }
.starter-onboarding > div > p:last-child { max-width: 500px; margin: 7px 0 0; color: #697386; font-size: 8px; line-height: 1.55; }
.starter-onboarding ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.starter-onboarding li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid #e0e4f3; border-radius: 9px; background: #fff; }
.starter-onboarding li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #5160ad; background: #edf0ff; font-size: 8px; font-weight: 800; }
.starter-onboarding li.is-done > span { color: #fff; background: #4f6bff; }
.starter-onboarding strong, .starter-onboarding small { display: block; }
.starter-onboarding strong { font-size: 8px; }
.starter-onboarding small { margin-top: 3px; overflow: hidden; color: #778096; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.builder-readiness { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; padding: 18px 19px; }
.builder-readiness > div > h2 { margin: 5px 0 0; font-size: 15px; }
.builder-readiness > div > p:last-child { max-width: 470px; margin: 7px 0 0; color: #697386; font-size: 8px; line-height: 1.55; }
.builder-readiness ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.builder-readiness li { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid #e0e4ed; border-radius: 9px; background: #fafbfe; }
.builder-readiness li > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #3f52ba; background: #e9edff; font-size: 7px; font-weight: 800; }
.builder-readiness li strong, .builder-readiness li small { display: block; }
.builder-readiness li strong { font-size: 8px; }
.builder-readiness li small { margin-top: 3px; overflow: hidden; color: #7b8495; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.builder-readiness.is-ready { border-color: #cfe1d8; background: linear-gradient(110deg, #fff, #f6fbf8); }
.builder-readiness.has-issues { border-color: #edd5b7; background: #fffaf3; }
.builder-readiness.has-issues li:first-child > span { color: #8c5b1e; background: #ffefd7; }
.builder-readiness li[data-state="pending_server"] > span { color: #43506a; background: #edf0f5; }
.builder-readiness li[data-state="blocked"] > span { color: #8c5b1e; background: #ffefd7; }
.availability-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; color: #526058; font-size: 9px; font-weight: 650; cursor: pointer; }
.availability-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
.editor-sticky-actions { position: sticky; z-index: 10; bottom: 14px; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid #cddbd2; border-radius: 13px; color: #607067; background: rgb(255 255 255 / 96%); box-shadow: 0 12px 35px rgb(17 44 27 / 13%); backdrop-filter: blur(8px); }
.editor-sticky-actions > div { display: flex; align-items: center; gap: 8px; font-size: 8px; }
.editor-sticky-actions > div:last-child { flex: 0 0 auto; }
.editor-sticky-actions .icon { width: 15px; height: 15px; color: var(--accent); }
.builder-save-status span, .builder-save-status strong, .builder-save-status small { display: block; }
.builder-save-status strong { color: #27272a; font-size: 8px; }
.builder-save-status small { max-width: 560px; margin-top: 2px; color: #737986; font-size: 7px; line-height: 1.4; }
.editor-sticky-actions .button-primary:disabled { opacity: .46; box-shadow: none; cursor: not-allowed; }
.publish-summary { display: grid; gap: 0; margin: 15px 0 0; }
.publish-summary > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.publish-summary dt { color: #7d8981; font-size: 8px; font-weight: 750; }
.publish-summary dd { min-width: 0; margin: 0; color: #35433a; font-size: 9px; font-weight: 650; overflow-wrap: anywhere; }
.publish-summary code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 500; }

/* ConfigUX brand alignment: blue is the interaction colour; green is reserved for success. */
.breadcrumb span, .breadcrumb b, .metric-card small, .metric-card p, .activity-item p, .activity-item time,
.setup-list small, .storage-banner p, .integration-copy p, .form-heading p, .read-state p,
.read-metrics small, .read-metrics span, .editor-section-heading > code, .editor-section-heading > span,
.builder-heading-actions code, .model-asset-card small, .model-asset-card p, .mapping-help,
.mapping-card-heading small, .mapping-card-heading code, .mapping-empty p, .builder-player-total span {
  color: #6b7280;
}

.page-heading h1, .metric-card strong, .panel-heading h2, .table-toolbar h2, .config-name strong,
.integration-copy h2, .form-heading h2, .read-state h2, .read-metrics strong, .editor-section-heading h2,
.builder-structure-toolbar h2, .builder-player-controls h3, .model-asset-card strong,
.mapping-card-heading strong, .mapping-empty strong, .builder-player-total strong {
  color: #0d0d0d;
}

.global-search, .table-search, th, .mode-badge, .version-chip, .role-chip, .editor-group,
.editor-option, .builder-player-group button, .mapping-card, .mapping-help {
  background: #f9fafb;
}

.global-search:focus-within, .table-search:focus-within,
.settings-form input:focus, .settings-form select:focus, .create-dialog input:focus,
.editor-fields input:focus, .editor-fields select:focus {
  border-color: #4f6bff;
  box-shadow: 0 0 0 3px rgb(79 107 255 / 13%);
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
.builder-order-actions button:focus-visible, .builder-player-group button:focus-visible {
  outline-color: rgb(79 107 255 / 30%);
}

.preview-pill { border-color: #d7dcff; color: #394fd6; background: #f5f6ff; }
.preview-pill span { background: #4f6bff; box-shadow: 0 0 0 3px rgb(79 107 255 / 14%); }
.preview-pill.is-http { border-color: #b9c3ff; color: #263da8; background: #eef1ff; }
.preview-pill.is-blocked { border-color: #f0b9b5; color: #9f241b; background: #fff2f1; }
.preview-pill.is-blocked span { background: #c9362b; box-shadow: 0 0 0 3px rgb(201 54 43 / 13%); }

.authoring-runtime-banner {
  width: calc(100% - 68px);
  max-width: 1442px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 18px auto 0;
  padding: 13px 15px;
  border: 1px solid #cdd5ff;
  border-radius: 12px;
  color: #263da8;
  background: #f4f6ff;
}
.authoring-runtime-banner .icon { width: 18px; height: 18px; margin-top: 1px; }
.authoring-runtime-banner strong { display: block; font-size: 11px; }
.authoring-runtime-banner p { margin: 3px 0 0; color: #5e678d; font-size: 9px; line-height: 1.5; }
.authoring-runtime-banner.is-blocked { border-color: #efc4c1; color: #9f241b; background: #fff4f3; }
.authoring-runtime-banner.is-blocked p { color: #7f4541; }

.studio-update-banner {
  width: calc(100% - 68px);
  max-width: 1442px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  padding: 13px 15px;
  border: 1px solid #e8c260;
  border-radius: 12px;
  color: #684700;
  background: #fff9e8;
}
.studio-update-banner > .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.studio-update-banner > div { min-width: 0; flex: 1; }
.studio-update-banner strong { display: block; font-size: 11px; }
.studio-update-banner p { margin: 3px 0 0; color: #735f2d; font-size: 9px; line-height: 1.5; }

.studio-shell[data-authoring-phase="blocked"] .local-safety {
  border-color: rgb(255 137 128 / 30%);
  color: #ffd0cc;
  background: rgb(180 35 24 / 16%);
}
.studio-shell[data-authoring-phase="blocked"] .local-safety strong { color: #fff0ee; }
.studio-shell[data-authoring-phase="blocked"] .local-safety small { color: #eeb5b0; }
.button-primary { background: #4f6bff; box-shadow: 0 6px 15px rgb(79 107 255 / 22%); }
.button-primary:hover { background: #394fd6; box-shadow: 0 8px 20px rgb(79 107 255 / 27%); }
.button-secondary { color: #292929; }
.button-secondary:hover { border-color: #aeb4bf; background: #f9fafb; }
.button-light { color: #0d0d0d; background: #ffffff; }
.button-light:hover { color: #394fd6; background: #f5f6ff; }
.button-ghost-light { color: #ffffff; }
.button-danger { color: #ffffff; background: #b42318; }
.button-danger:hover { background: #912018; }
.icon-button { color: #6b7280; }
.icon-button:hover { background: #f3f4f6; }

.hero-card {
  background: linear-gradient(122deg, #0d0d0d 0%, #161820 52%, #26346e 100%);
  box-shadow: 0 20px 50px rgb(13 13 13 / 18%);
}
.hero-card::before { background: radial-gradient(circle at 77% 9%, rgb(126 145 255 / 28%), transparent 32%), linear-gradient(90deg, transparent, rgb(255 255 255 / 4%)); }
.hero-kicker { border-color: rgb(178 188 255 / 34%); color: #dce1ff; }
.hero-copy p { color: #d1d5db; }
.hero-orbit { border-color: rgb(178 188 255 / 22%); }
.hero-visual::after { background: rgb(0 0 0 / 32%); }
.hero-product { box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 24px 42px rgb(0 0 0 / 28%); }
.hero-cube .icon { color: #eef0ff; }
.hero-product-label { color: #26346e; background: #e6e9ff; }
.hero-progress { color: #e5e7eb; background: rgb(10 12 22 / 70%); }
.hero-progress progress::-webkit-progress-value, .progress-cell progress::-webkit-progress-value { background: #6f84ff; }
.hero-progress progress::-moz-progress-bar, .progress-cell progress::-moz-progress-bar { background: #6f84ff; }

.metric-card, .panel, .read-metrics article, .asset-card, .integration-card { box-shadow: 0 4px 18px rgb(13 13 13 / 4%); }
.metric-icon.green, .metric-icon.blue { color: #394fd6; background: #eef1ff; }
.metric-icon.purple { color: #4f46a3; background: #f1f0ff; }
.setup-score { color: #394fd6; background: #eef1ff; }
.activity-dot.tone-blue { color: #4f6bff; background: #4f6bff; }
.panel-heading > a, .eyebrow, .text-action, .read-back a { color: #4f6bff; }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 0 0 17px; }
.review-card { min-height: 185px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; box-shadow: 0 4px 18px rgb(13 13 13 / 4%); }
.review-card h2 { margin: 13px 0 10px; color: #0d0d0d; font-size: 14px; letter-spacing: -.02em; }
.review-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.review-card li { position: relative; padding-left: 14px; color: #5f6570; font-size: 9px; line-height: 1.45; }
.review-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #c4c7ce; }
.review-state { display: inline-flex; align-items: center; gap: 7px; color: #545b67; font-size: 8px; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
.review-state i { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; box-shadow: 0 0 0 3px rgb(156 163 175 / 13%); }
.status-working { border-color: #d7dcff; background: linear-gradient(145deg, #ffffff, #f7f8ff); }
.status-working .review-state { color: #394fd6; }
.status-working .review-state i, .status-working li::before { background: #4f6bff; }
.status-working .review-state i { box-shadow: 0 0 0 3px rgb(79 107 255 / 14%); }
.status-reading .review-state i, .status-reading li::before { background: #6b7280; }
.status-locked { background: #f7f7f8; }
.status-locked .review-state i, .status-locked li::before { background: #a8acb4; }

.scope-strip { min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 11px 14px; margin: -8px 0 17px; border: 1px solid #e0e3eb; border-radius: 11px; color: #5f6570; background: #ffffff; font-size: 9px; }
.scope-strip strong { color: #27272a; }
.scope-dot { width: 7px; height: 7px; border-radius: 50%; }
.scope-dot.working { background: #4f6bff; }
.scope-dot.reading { background: #6b7280; }
.scope-separator { width: 1px; height: 18px; margin: 0 5px; background: #e5e7eb; }

.storage-banner, .info-banner { border-color: #dce1ff; background: linear-gradient(90deg, #fafaff, #f3f5ff); }
.info-banner { color: #394fd6; }
.info-banner p { color: #626a7a; }
.storage-meter i { background: #e3e6ef; }
.storage-meter i b { background: #4f6bff; }
.integration-api { color: #394fd6; background: #eef1ff; }
.state-available { color: #394fd6; background: #eef1ff; }
.settings-nav a:hover, .settings-nav a.is-active { color: #394fd6; background: #eef1ff; }
.api-panel > code { color: #394fd6; background: #f4f5ff; }

.read-back > span, .asset-lock { border-color: #dce1ff; color: #394fd6; background: #f4f5ff; }
.read-step-heading { color: #27336f; background: #f1f3ff; }
.read-group-heading > span { color: #394fd6; background: #eef1ff; }
.read-options li > span, .read-definition code, .integrity-card code { color: #4558c2; }
.builder-structure-toolbar, .model-asset-card { border-color: #dce1ff; background: #f6f7ff; }
.builder-order-actions button:hover:not(:disabled) { border-color: #8999f1; }
.builder-add-card { border-color: #aab4ef; background: #f8f9ff; }
.builder-player-stage { background: var(--builder-viewer-stage-background, radial-gradient(circle at 48% 38%, #ffffff 0, #f5f6fa 48%, #e9ebf1 100%)); }
.builder-player-group button:hover { border-color: #8d9cf0; }
.builder-player-group button[aria-pressed="true"] { border-color: #4f6bff; color: #2f43b5; background: #eef1ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); }
.builder-player-actions span { color: #394fd6; background: #eef1ff; }
.editor-sticky-actions { border-color: #d7dbe5; color: #5f6570; box-shadow: 0 12px 35px rgb(13 13 13 / 12%); }

/* Success remains green because it communicates a completed integrity or load state. */
.status-published, .state-connected, .setup-list li.is-done > span, .integrity-card li small { color: var(--success); }
.status-published > span, .builder-player-stage-status > span, .toast > span { background: var(--success); }

@media (max-width: 1120px) {
  .builder-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .topbar { padding: 0 24px; }
  .authoring-runtime-banner { width: calc(100% - 50px); }
  .studio-update-banner { width: calc(100% - 50px); }
  .studio-main { padding: 30px 25px 50px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-grid, .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .global-search { width: 190px; }
  .hero-card { grid-template-columns: minmax(0, 1.2fr) 300px; }
  .read-layout { grid-template-columns: minmax(0, 1fr) 245px; }
  .read-group-grid { grid-template-columns: 1fr; }
  .connector-site-row { grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.2fr); }
  .connector-site-row .button { grid-column: 1 / -1; justify-self: start; }
  .connector-binding-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connector-binding-row > .integration-state, .connector-binding-row > .button { justify-self: start; }
}

@media (max-width: 900px) {
  .asset-library-toolbar { grid-template-columns: 1fr 1fr; }
  .asset-library-toolbar > label { grid-column: 1 / -1; }
  .builder-workflow { grid-template-columns: 1fr; gap: 9px; }
  .builder-workflow-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid #e4e7f2; }
  .builder-workflow ol { grid-template-columns: repeat(5, minmax(125px, 1fr)); overflow-x: auto; padding-bottom: 3px; }
  .builder-workspace { grid-template-columns: 1fr; }
  .builder-navigator { position: static; max-height: none; }
  .builder-navigator > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: 260px; transform: translateX(-105%); box-shadow: 20px 0 50px rgb(4 25 13 / 22%); transition: transform 190ms ease; }
  .sidebar-resize-handle { display: none; }
  .studio-shell.menu-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 45; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgb(6 24 14 / 45%); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  .studio-shell.menu-open .sidebar-scrim { display: block; opacity: 1; pointer-events: auto; }
  .mobile-menu-button { display: inline-grid !important; }
  .breadcrumb span, .breadcrumb b { display: none; }
  .top-create span { display: none; }
  .top-create { width: 38px; padding: 0; }
  .hero-card { grid-template-columns: minmax(0, 1fr) 270px; }
  .hero-copy { padding: 32px; }
  .content-grid.two-one { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 145px 1fr; }
  .account-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-layout { grid-template-columns: 1fr; }
  .read-aside { position: static; }
  .integrity-card ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

@media (max-width: 680px) {
  body, .studio-shell, .studio-column, .studio-main { max-width: 100%; overflow-x: clip; }
  .topbar { height: 61px; padding: 0 14px; }
  .topbar-left, .breadcrumb, .brand-profile-editor-heading, .brand-profile-editor-heading .page-heading, .brand-profile-editor-heading .page-heading > div { min-width: 0; }
  .breadcrumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { gap: 7px; }
  .global-search { width: 38px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; cursor: pointer; }
  .global-search input, .global-search kbd { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .global-search:focus-within { position: absolute; z-index: 3; left: 53px; right: 108px; width: auto; grid-template-columns: 18px 1fr; padding: 0 10px; }
  .global-search:focus-within input { position: static; width: 100%; height: auto; opacity: 1; pointer-events: auto; }
  .preview-pill { display: none; }
  .authoring-runtime-banner { width: calc(100% - 30px); margin-top: 13px; padding: 11px 12px; }
  .studio-update-banner { width: calc(100% - 30px); margin-top: 13px; padding: 11px 12px; }
  .studio-main { padding: 24px 15px 45px; }
  .account-usage-grid { grid-template-columns: 1fr; }
  .account-operations-grid { grid-template-columns: 1fr; }
  .page-heading { align-items: flex-start; margin-bottom: 20px; }
  .page-heading h1 { font-size: 27px; }
  .brand-profile-editor-heading .page-heading h1, .brand-profile-editor-heading .page-heading p { overflow-wrap: anywhere; }
  .page-heading > div > p:last-child { font-size: 11px; }
  .page-actions .button span { display: none; }
  .hero-card { min-height: 420px; grid-template-columns: 1fr; grid-template-rows: auto 180px; }
  .hero-copy { align-self: auto; padding: 28px 24px 10px; }
  .hero-copy h2 { font-size: 30px; }
  .hero-visual { min-height: 180px; }
  .hero-product { width: 94px; height: 105px; border-radius: 18px; }
  .hero-cube .icon { width: 48px; height: 48px; }
  .hero-orbit.orbit-one { width: 250px; height: 250px; }
  .hero-orbit.orbit-two { width: 160px; height: 160px; }
  .hero-progress { right: 18px; bottom: 14px; width: 145px; }
  .metric-grid { gap: 9px; }
  .review-card { min-height: 0; }
  .connector-management { padding: 16px; }
  .connector-management-heading { flex-direction: column; }
  .product-inventory-site { padding: 16px; }
  .product-inventory-site-heading { flex-direction: column; }
  .product-inventory-site-heading .button { width: 100%; }
  .product-inventory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-inventory-tools, .product-inventory-tools form { align-items: stretch; flex-direction: column; }
  .product-inventory-tools { gap: 8px; }
  .product-inventory-tools input { width: 100%; }
  .product-inventory-tools p { margin: 0; }
  .product-inventory-pagination { justify-content: space-between; }
  .product-inventory-table { border: 0; overflow: visible; }
  .product-inventory-table table, .product-inventory-table thead, .product-inventory-table tbody, .product-inventory-table tr, .product-inventory-table td { display: block; min-width: 0; width: 100%; }
  .product-inventory-table thead { display: none; }
  .product-inventory-table tr { margin-bottom: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .product-inventory-table td, .product-inventory-table td:nth-child(4), .product-inventory-table td:nth-child(5) { display: grid; grid-template-columns: minmax(84px, .7fr) minmax(0, 1.3fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
  .product-inventory-table td:first-child { min-width: 0; border-top: 0; }
  .product-inventory-table td::before { content: attr(data-label); color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
  .connector-site-row, .connector-binding-row { grid-template-columns: 1fr; }
  .connector-site-row dl { grid-template-columns: 1fr; }
  .scope-strip { align-items: flex-start; }
  .metric-card { min-height: 99px; gap: 10px; padding: 13px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-card strong { font-size: 20px; }
  .metric-card p { max-width: 105px; }
  .panel-heading { padding: 17px 16px 13px; }
  .activity-list, .setup-list { padding-left: 16px; padding-right: 16px; }
  .table-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px; }
  .table-tools { width: 100%; }
  .table-search { width: auto; flex: 1; }
  th, td { padding-left: 14px; padding-right: 14px; }
  th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; }
  .config-name { min-width: 190px; }
  .asset-grid, .integration-grid { grid-template-columns: 1fr; }
  .asset-preview { height: 190px; }
  .storage-banner { align-items: flex-start; flex-direction: column; }
  .storage-meter { width: 100%; }
  .storage-meter span { justify-content: flex-start; }
  .api-panel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .settings-layout { grid-template-columns: 1fr; }
  .account-operations-summary { grid-template-columns: 40px minmax(0, 1fr); }
  .account-operations-summary > .status-badge { grid-column: 1 / -1; width: fit-content; }
  .settings-nav { position: static; display: flex; overflow-x: auto; white-space: nowrap; }
  .settings-form { padding: 17px; }
  .lead-grid { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .analytics-event-panel { grid-row: auto; }
  .mode-options { grid-template-columns: 1fr; }
  .mode-options label > span { min-height: 62px; grid-template-columns: 25px auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; }
  .mode-options label > span .icon { grid-row: 1 / 3; margin: 0; }
  .dialog-actions .button { flex: 1; }
  .read-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-definition { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read-step { grid-template-columns: 1fr; }
  .read-group-grid { grid-template-columns: 1fr; }
  .read-panel th:nth-child(4), .read-panel td:nth-child(4), .read-panel th:nth-child(5), .read-panel td:nth-child(5) { display: table-cell; }
  .editor-fields-three { grid-template-columns: 1fr; }
  .editor-section-heading, .builder-group-toolbar, .builder-option-toolbar { align-items: flex-start; flex-direction: column; }
  .builder-heading-actions { width: 100%; justify-content: space-between; }
  .builder-structure-toolbar { align-items: stretch; flex-direction: column; }
  .builder-structure-toolbar .button { width: 100%; }
  .builder-workflow { padding: 11px; }
  .builder-workflow ol { display: flex; gap: 7px; scroll-snap-type: x proximity; }
  .builder-workflow li { flex: 0 0 145px; scroll-snap-align: start; }
  .builder-order-actions { flex-wrap: wrap; }
  .builder-player-layout { height: auto; min-height: 0; max-height: none; grid-template-columns: 1fr; }
  .builder-player-stage { height: clamp(340px, 52vh, 430px); min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .builder-player-stage model-viewer { height: 100%; min-height: 0; }
  .builder-player-controls { overflow-y: visible; }
  .mapping-grid { grid-template-columns: 1fr; }
  .mapping-summary, .model-asset-card dl { grid-template-columns: 1fr; }
  .builder-readiness { grid-template-columns: 1fr; }
  .starter-onboarding { grid-template-columns: 1fr; }
  .model-asset-card { grid-template-columns: 42px minmax(0, 1fr); }
  .asset-lock { grid-column: 1 / -1; justify-self: start; }
  .editor-sticky-actions { position: static; align-items: stretch; flex-direction: column; }
  .editor-sticky-actions > .builder-save-status { align-items: flex-start; }
  .editor-sticky-actions > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .konto-trial-chip { width: 36px; height: 36px; justify-content: center; padding: 0; }
  .konto-trial-chip span { display: none; }
}

@media (max-width: 520px) {
  .builder-navigator > ol { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card p { max-width: none; }
  .lead-toolbar { align-items: stretch; flex-direction: column; }
  .lead-section-tabs { width: 100%; }
  .lead-section-tabs a { flex: 1; justify-content: center; }
  .lead-email-explainer { align-items: stretch; flex-direction: column; }
  .lead-email-explainer > .button { width: 100%; }
  .lead-toolbar-actions, .data-lifecycle-bulk, .data-lifecycle-apply, .settings-two-column { grid-template-columns: 1fr; align-items: stretch; }
  .lead-toolbar-actions { display: grid; }
  .lead-toolbar .table-search { width: 100%; }
  .data-lifecycle-bulk > small { grid-column: auto; }
  .lead-filter-bar { justify-content: stretch; }
  .lead-filter-bar .table-filter { width: 100%; }
  .lead-grid { padding: 12px; }
  .lead-card-heading, .lead-card-actions { align-items: stretch; flex-direction: column; }
  .lead-facts { grid-template-columns: 1fr; gap: 10px; }
  .lead-card-actions label, .lead-card-actions .button { width: 100%; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .page-heading { flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions .button { width: 100%; }
  .empty-state { padding: 16px; }
  .empty-state .page-actions { flex-direction: column; }
  .empty-state > .button { width: 100%; }
  .scope-separator { width: 100%; height: 1px; margin: 4px 0; }
  .read-metrics, .read-definition { grid-template-columns: 1fr; }
  .integrity-card ul { grid-template-columns: 1fr; }
  .editor-fields-two { grid-template-columns: 1fr; }
  .builder-player-stage { height: clamp(300px, 52vh, 380px); }
  .builder-player-stage model-viewer { height: 100%; min-height: 0; }
  .builder-readiness ul { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card p { max-width: none; }
  .hero-actions .button { width: 100%; }
  .page-heading { flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions .button { width: 100%; }
  th:nth-child(2), td:nth-child(2) { display: none; }
  .read-panel th:nth-child(2), .read-panel td:nth-child(2), .read-panel th:nth-child(4), .read-panel td:nth-child(4) { display: table-cell; }
  .read-back { align-items: flex-start; flex-direction: column; }
  .read-metrics { grid-template-columns: 1fr; }
  .read-definition { grid-template-columns: 1fr; }
  .integrity-card ul { grid-template-columns: 1fr; }
  .editor-fields-two { grid-template-columns: 1fr; }
  .builder-player-stage { height: clamp(300px, 52vh, 380px); }
  .builder-player-stage model-viewer { height: 100%; min-height: 0; }
  .builder-player-controls { padding: 16px; }
  .editor-group { margin-left: 12px; margin-right: 12px; padding: 13px; }
}

/* Blok 18D - functional Design editor */
.designer-editor-heading .page-heading { margin-top: 8px; }
.designer-editor-form { padding-bottom: 78px; }
.designer-toolbar { display: grid; grid-template-columns: minmax(210px, 1.2fr) repeat(3, minmax(180px, auto)); gap: 14px; align-items: end; padding: 15px; margin-bottom: 14px; }
.designer-toolbar label, .designer-toolbar label span, .designer-control-label { display: block; }
.designer-toolbar label > span, .designer-control-label { margin-bottom: 6px; color: #636b77; font-size: 8px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.designer-toolbar input, .designer-toolbar select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #d9dee7; border-radius: 8px; color: #20242b; background: #fff; font-size: 10px; }
.designer-segments { display: flex; min-height: 38px; padding: 3px; border: 1px solid #d9dee7; border-radius: 9px; background: #f4f5f8; }
.designer-segment { flex: 1; padding: 0 9px; border: 0; border-radius: 6px; color: #69717d; background: transparent; font-size: 8px; font-weight: 750; text-transform: capitalize; cursor: pointer; white-space: nowrap; }
.designer-segment.is-active { color: #3045c7; background: #fff; box-shadow: 0 2px 8px rgb(24 31 49 / 9%); }
.designer-segment:disabled { cursor: default; opacity: .62; }

.designer-workspace { min-width: 0; display: grid; grid-template-columns: 220px minmax(480px, 1fr) 245px; gap: 14px; align-items: start; }
.designer-library, .designer-inspector { position: sticky; top: 83px; min-width: 0; }
.designer-library { max-height: calc(100vh - 105px); padding: 14px; overflow-y: auto; }
.designer-library .form-heading h2 { margin: 3px 0 5px; font-size: 14px; }
.designer-library .form-heading p:last-child { margin: 0; color: #737b87; font-size: 8px; line-height: 1.45; }
.designer-library-list { display: grid; gap: 7px; margin-top: 13px; }
.designer-library-item { width: 100%; min-height: 53px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px; border: 1px solid #dfe3eb; border-radius: 9px; color: #343a45; background: #fff; text-align: left; cursor: grab; }
.designer-library-item:hover:not(:disabled) { border-color: #9dabfb; background: #f8f9ff; }
.designer-library-item:disabled { cursor: default; opacity: .55; }
.designer-library-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #4056d8; background: #eef1ff; }
.designer-library-icon .icon { width: 15px; height: 15px; }
.designer-library-item strong, .designer-library-item small { display: block; }
.designer-library-item strong { font-size: 8px; }
.designer-library-item small { margin-top: 3px; color: #7a818d; font-size: 7px; line-height: 1.35; }

.designer-canvas-panel { min-width: 0; padding: 13px; overflow: hidden; }
.designer-stage { min-width: 0; overflow-x: auto; padding: 12px; border-radius: 11px; background: #eef0f5; }
.designer-device-label { width: min(100%, 1080px); display: flex; justify-content: space-between; gap: 10px; margin: 0 auto 8px; color: #737b88; font-size: 7px; text-transform: uppercase; letter-spacing: .06em; }
.designer-device-label span { font-weight: 850; color: #4056d8; }
.designer-canvas { width: 100%; max-width: 1080px; min-height: 620px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 9px; align-content: start; padding: 10px; margin: 0 auto; border: 1px solid #cfd5e0; border-radius: 12px; background: #fff; box-shadow: 0 15px 38px rgb(23 29 43 / 9%); transition: max-width 180ms ease; }
.designer-stage.breakpoint-tablet .designer-canvas, .designer-stage.breakpoint-tablet .designer-device-label { max-width: 760px; }
.designer-stage.breakpoint-mobile .designer-canvas, .designer-stage.breakpoint-mobile .designer-device-label { max-width: 390px; }
.designer-stage.breakpoint-mobile .designer-canvas { min-width: 320px; }
.grid-start-1 { grid-column-start: 1; }.grid-start-2 { grid-column-start: 2; }.grid-start-3 { grid-column-start: 3; }.grid-start-4 { grid-column-start: 4; }
.grid-start-5 { grid-column-start: 5; }.grid-start-6 { grid-column-start: 6; }.grid-start-7 { grid-column-start: 7; }.grid-start-8 { grid-column-start: 8; }
.grid-start-9 { grid-column-start: 9; }.grid-start-10 { grid-column-start: 10; }.grid-start-11 { grid-column-start: 11; }.grid-start-12 { grid-column-start: 12; }
.grid-span-1 { grid-column-end: span 1; }.grid-span-2 { grid-column-end: span 2; }.grid-span-3 { grid-column-end: span 3; }.grid-span-4 { grid-column-end: span 4; }
.grid-span-5 { grid-column-end: span 5; }.grid-span-6 { grid-column-end: span 6; }.grid-span-7 { grid-column-end: span 7; }.grid-span-8 { grid-column-end: span 8; }
.grid-span-9 { grid-column-end: span 9; }.grid-span-10 { grid-column-end: span 10; }.grid-span-11 { grid-column-end: span 11; }.grid-span-12 { grid-column-end: span 12; }

.designer-zone { min-width: 0; min-height: 78px; padding: 8px; border: 1px dashed #cbd2df; border-radius: 10px; background: #f8f9fb; transition: border 130ms ease, background 130ms ease; }
.designer-zone.role-viewer { min-height: 330px; background: linear-gradient(145deg, #f7f8fb, #eceff4); }
.designer-zone.role-configuration { min-height: 330px; }
.designer-zone.role-navigation { min-height: 66px; }
.designer-zone.is-drop-ready { border-color: #7186ff; background: #f2f4ff; }
.designer-zone-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 1px 2px 7px; }
.designer-zone-heading > div { display: flex; align-items: center; gap: 6px; }
.designer-zone-heading span { padding: 3px 5px; border-radius: 5px; color: #4056d8; background: #e9edff; font-size: 6px; font-weight: 850; text-transform: uppercase; }
.designer-zone-heading small { color: #8a919b; font-size: 6px; }
.designer-zone-heading strong { color: #5f6671; font-size: 7px; text-transform: capitalize; }
.designer-zone-elements { display: grid; gap: 7px; }
.designer-empty-zone { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #d6dbe5; border-radius: 8px; color: #9299a4; font-size: 7px; }
.designer-empty-zone .icon { width: 13px; height: 13px; }

.designer-element { min-width: 0; overflow: hidden; border: 1px solid #dce1ea; border-radius: 9px; background: #fff; box-shadow: 0 3px 12px rgb(30 36 50 / 4%); }
.designer-element[draggable="true"] { cursor: grab; }
.designer-element:focus-visible { outline: 3px solid rgb(79 107 255 / 22%); outline-offset: 2px; }
.designer-element > header { min-height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 7px; border-bottom: 1px solid #eceef2; background: #fafbfc; }
.designer-element > header span, .designer-element > header small { display: block; }
.designer-element > header span { font-size: 7px; font-weight: 800; }
.designer-element > header small { max-width: 180px; overflow: hidden; margin-top: 2px; color: #858c97; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.designer-element-actions { display: flex; gap: 3px; }
.designer-element-actions button { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; border: 1px solid #e0e4eb; border-radius: 6px; color: #68707b; background: #fff; font-size: 8px; cursor: pointer; }
.designer-element-actions button:hover { color: #3045c7; border-color: #aeb9f9; }
.designer-element-actions .icon { width: 11px; height: 11px; }
.designer-element-preview { min-height: 38px; display: grid; place-items: center; padding: 8px; }
.designer-element.type-viewer .designer-element-preview { min-height: 235px; }
.designer-viewer-placeholder { display: grid; place-items: center; color: #586170; text-align: center; }
.designer-viewer-placeholder .icon { width: 48px; height: 48px; margin-bottom: 10px; color: #8190ed; }
.designer-viewer-placeholder strong, .designer-viewer-placeholder small { display: block; }
.designer-viewer-placeholder strong { font-size: 10px; }.designer-viewer-placeholder small { max-width: 190px; margin-top: 4px; color: #8a919d; font-size: 7px; line-height: 1.4; }
.designer-options-placeholder { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.designer-options-placeholder span { padding: 9px; border: 1px solid #d9dee8; border-radius: 7px; color: #666f7d; font-size: 7px; }
.designer-options-placeholder small { grid-column: 1 / -1; color: #8a919d; font-size: 6px; }
.designer-price-placeholder { justify-self: end; font-size: 12px; }
.designer-quantity-placeholder { display: flex; align-items: center; gap: 8px; }
.designer-quantity-placeholder button { width: 25px; height: 25px; border: 1px solid #dce1e9; border-radius: 6px; background: #fff; }
.designer-cta-placeholder { width: 100%; padding: 11px; border-radius: 7px; color: #fff; background: #4f6bff; text-align: center; font-size: 8px; font-weight: 800; }
.designer-summary-placeholder span, .designer-summary-placeholder small { display: block; }.designer-summary-placeholder span { font-size: 8px; font-weight: 800; }.designer-summary-placeholder small { margin-top: 3px; color: #858d98; font-size: 6px; }
.designer-control-placeholder { padding: 7px 9px; border: 1px solid #dce1e9; border-radius: 7px; color: #5f6875; font-size: 7px; font-weight: 750; }
.designer-static-copy { justify-self: start; font-size: 10px; font-weight: 750; }
.type-text .designer-static-copy { color: #606976; font-size: 8px; font-weight: 500; }
.designer-content-field { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; align-items: center; padding: 6px 7px; border-top: 1px solid #eceef2; }
.designer-content-field span { color: #747c88; font-size: 6px; font-weight: 750; text-transform: uppercase; }
.designer-content-field input { min-width: 0; height: 29px; padding: 0 7px; border: 1px solid #dce1e9; border-radius: 6px; font-size: 7px; }
.designer-state-placeholder { min-height: 44px; display: grid; place-items: center; gap: 3px; color: #68717e; text-align: center; }
.designer-state-placeholder .icon { width: 16px; height: 16px; }.designer-state-placeholder strong { font-size: 8px; }.designer-state-placeholder small { font-size: 6px; }
.designer-state-placeholder.is-loading { width: 100%; justify-items: start; }.designer-state-placeholder.is-loading span { width: 100%; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #e6e9ef, #f5f6f8, #e6e9ef); }.designer-state-placeholder.is-loading span:nth-child(2) { width: 62%; }
.designer-state-placeholder.is-error { color: #a13a31; }.designer-state-placeholder.is-complete { color: #168653; }

.designer-inspector { display: grid; gap: 12px; }
.designer-inspector > .panel { padding: 14px; }
.designer-inspector h2 { margin: 4px 0 10px; font-size: 13px; }
.designer-readiness dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 12px 0 0; }
.designer-readiness dl div { padding: 7px; border-radius: 7px; background: #f5f6f8; }
.designer-readiness dt { color: #7c8490; font-size: 6px; }.designer-readiness dd { margin: 3px 0 0; font-size: 11px; font-weight: 850; }
.designer-preview-coverage { display: grid; gap: 7px; }
.designer-preview-coverage .checkbox-field { padding: 7px; border: 1px solid #e2e5eb; border-radius: 7px; background: #fafbfc; text-transform: capitalize; }
.designer-history { position: static; }
.designer-savebar { z-index: 60; }

@media (max-width: 1320px) {
  .designer-toolbar { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .designer-workspace { grid-template-columns: 210px minmax(440px, 1fr); }
  .designer-inspector { position: static; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .designer-toolbar, .designer-workspace { grid-template-columns: 1fr; }
  .designer-library { position: static; max-height: none; }
  .designer-library-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .designer-inspector { grid-column: auto; grid-template-columns: 1fr; }
  .designer-canvas-panel { padding: 8px; }
}

@media (max-width: 680px) {
  .designer-toolbar { gap: 10px; }
  .designer-library-list { grid-template-columns: 1fr; }
  .designer-stage { padding: 7px; }
  .designer-canvas { padding: 7px; gap: 7px; }
  .designer-element > header { align-items: flex-start; }
  .designer-savebar { position: static; align-items: stretch; flex-direction: column; margin-top: 14px; }
  .designer-savebar > div:last-child { display: grid; grid-template-columns: 1fr; }
.designer-savebar .button { width: 100%; }
}

/* Functional Brand Profile v0.1 */
.brand-profile-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #111722; }
.brand-profile-mark img { width: 21px; height: 21px; }
.brand-profile-list .button { white-space: nowrap; }
.brand-profile-list > summary { cursor: pointer; padding: 16px; font-weight: 700; }
@media (max-width: 700px) {
  .studio-shell .brand-profile-list :is(table, tbody, tr) { display: block; width: 100%; min-width: 0; }
  .studio-shell .brand-profile-list thead { display: none; }
  .studio-shell .brand-profile-list tr { padding: 14px; border-top: 1px solid var(--line); }
  .studio-shell .brand-profile-list td { display: none; width: auto; height: auto; min-height: 0; padding: 0; border: 0; }
  .studio-shell .brand-profile-list td:first-child { display: block; }
  .studio-shell .brand-profile-list td:nth-child(4) { display: block; margin-top: 10px; }
  .studio-shell .brand-profile-list td:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .studio-shell .brand-profile-list .config-name { min-width: 0; }
  .studio-shell .brand-profile-list .config-name strong { white-space: normal; overflow-wrap: anywhere; }
  .studio-shell .brand-profile-list .brand-profile-mark { flex: 0 0 34px; }
  .studio-shell .brand-profile-list .brand-profile-mark img { width: 21px; height: 21px; }
}
.brand-profile-editor-heading .page-heading { margin-bottom: 18px; }
.brand-profile-editor-form { padding-bottom: 84px; }
.brand-profile-basics { padding: 18px; margin-bottom: 16px; }
.brand-profile-basic-grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .7fr) minmax(240px, 1fr); gap: 13px; align-items: end; }
.brand-profile-basic-grid > label, .brand-token-groups label, .brand-label-grid label { display: grid; gap: 6px; color: #59616d; font-size: 9px; font-weight: 800; }
.brand-profile-basic-grid input, .brand-profile-basic-grid select, .brand-token-groups input, .brand-token-groups select, .brand-label-grid input { width: 100%; height: 40px; min-width: 0; padding: 0 10px; border: 1px solid #d8dce5; border-radius: 8px; color: #17191d; background: #fff; font: inherit; }
.brand-profile-basic-grid input:focus, .brand-profile-basic-grid select:focus, .brand-token-groups input:focus, .brand-token-groups select:focus, .brand-label-grid input:focus { border-color: #7387f6; outline: 0; box-shadow: 0 0 0 3px rgb(79 107 255 / 10%); }
.brand-asset-toggle { align-self: stretch; }
.brand-logo-control { display: grid; gap: 8px; align-self: stretch; }
.brand-logo-control > span { color: #59616d; font-size: 9px; font-weight: 800; }
.brand-logo-current { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; border: 1px solid #d8dce5; border-radius: 10px; background: #f7f8fa; }
.brand-logo-current img { width: 72px; height: 38px; object-fit: contain; object-position: left center; }
.brand-logo-current > div { display: grid; gap: 2px; min-width: 0; }
.brand-logo-current small { color: #59616d; overflow-wrap: anywhere; }
.brand-logo-placeholder { display: grid; place-items: center; width: 72px; height: 38px; border: 1px dashed #c8cdd7; border-radius: 7px; color: #737b89; font-size: 11px; }
.brand-logo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-logo-actions label { cursor: pointer; }
.brand-logo-actions input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-switch { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #d8dce5; border-radius: 8px; background: #fafbfc; }
.brand-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.brand-switch i { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 999px; background: #c9ced7; transition: background .16s ease; }
.brand-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(20 25 35 / 22%); transition: transform .16s ease; }
.brand-switch input:checked + i { background: #2955f3; }
.brand-switch input:checked + i::after { transform: translateX(15px); }
.brand-switch input:focus-visible + i { outline: 3px solid rgb(41 85 243 / 25%); outline-offset: 2px; }
.brand-switch b { color: #56606d; font-size: 8px; }
.brand-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.brand-profile-main, .brand-profile-sidebar { display: grid; gap: 16px; min-width: 0; }
.brand-profile-sidebar { position: sticky; top: 80px; }
.brand-section, .brand-profile-sidebar > .panel { padding: 20px; }
.brand-section .form-heading { margin-bottom: 17px; }
.brand-section .form-heading h2, .brand-profile-sidebar h2 { margin: 3px 0 6px; font-size: 16px; }
.brand-section .form-heading p:last-child, .brand-preview-note { color: #777f8b; font-size: 9px; line-height: 1.5; }
.brand-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.brand-preset { min-width: 0; display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 11px; border: 1px solid #dce1e9; border-radius: 11px; color: #252a32; background: #fff; text-align: left; cursor: pointer; }
.brand-preset:hover { border-color: #aebafa; background: #fafbff; }
.brand-preset.is-active { border-color: #7186f8; background: #f5f7ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 9%); }
.brand-preset strong, .brand-preset small { min-width: 0; display: block; }
.brand-preset strong { font-size: 10px; }.brand-preset small { color: #7a828e; font-size: 7px; }
.brand-preset-swatches { grid-row: 1 / 3; display: flex; width: 43px; height: 35px; overflow: hidden; border: 1px solid rgb(20 25 35 / 10%); border-radius: 8px; }
.brand-preset-swatches i { flex: 1; }.preset-configux i:nth-child(1) { background: #2955f3; }.preset-configux i:nth-child(2) { background: #f5f7f6; }.preset-configux i:nth-child(3) { background: #11131a; }
.preset-ink i:nth-child(1) { background: #6b7cff; }.preset-ink i:nth-child(2) { background: #11141c; }.preset-ink i:nth-child(3) { background: #f8faff; }
.preset-warm i:nth-child(1) { background: #8a3f1d; }.preset-warm i:nth-child(2) { background: #fff9f4; }.preset-warm i:nth-child(3) { background: #2b1810; }
.brand-contrast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 15px; }
.brand-contrast-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px; gap: 10px; align-items: center; padding: 10px; border: 1px solid #e0e4ea; border-radius: 10px; background: #fafbfc; }
.brand-contrast-card.is-pass { border-color: #b9dfce; background: #f5fbf8; }.brand-contrast-card.is-fail { border-color: #efc2bc; background: #fff7f6; }
.brand-contrast-sample { width: 40px; height: 40px; padding: 3px; border: 1px solid rgb(0 0 0 / 8%); border-radius: 8px; background: #fff; }
.brand-contrast-card strong, .brand-contrast-card small { display: block; }.brand-contrast-card strong { font-size: 9px; }.brand-contrast-card small { margin-top: 3px; color: #737b87; font-size: 7px; }.brand-contrast-card b { font-size: 14px; }.brand-contrast-card.is-pass b { color: #168653; }.brand-contrast-card.is-fail b { color: #b42318; }
.brand-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.brand-color-field { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 7px; padding: 9px; border: 1px solid #e1e4ea; border-radius: 9px; background: #fff; }
.brand-color-control { min-width: 0; display: flex; align-items: center; gap: 7px; }
.brand-color-control input { width: 28px; height: 28px; flex: 0 0 auto; padding: 2px; border: 1px solid #d7dbe3; border-radius: 7px; background: #fff; cursor: pointer; }
.brand-color-control b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.brand-color-field code { align-self: center; color: #646c78; font-size: 7px; }.brand-color-field small { grid-column: 1 / -1; color: #89909a; font-size: 6px; line-height: 1.35; }
.brand-token-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.brand-token-groups fieldset { min-width: 0; display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid #e0e4eb; border-radius: 11px; }
.brand-token-groups legend { padding: 0 5px; color: #242a33; font-size: 10px; font-weight: 850; }
.brand-inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.brand-inline-fields.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-locale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brand-locale-panel { min-width: 0; padding: 14px; border: 1px solid #dde1e9; border-radius: 11px; background: #fafbfc; }
.brand-locale-panel > header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }.brand-locale-panel > header strong, .brand-locale-panel > header small { display: block; }.brand-locale-panel > header strong { font-size: 10px; }.brand-locale-panel > header small { margin-top: 2px; color: #858d98; font-size: 7px; }
.brand-locale-code { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #1b2230; font-size: 8px; font-weight: 900; }
.brand-label-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.brand-preview-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }.brand-preview-heading select { height: 32px; padding: 0 8px; border: 1px solid #d9dde5; border-radius: 7px; background: #fff; font-size: 8px; }
.brand-live-preview { overflow: hidden; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-large); color: var(--brand-text); background: var(--brand-surface); font-family: var(--brand-font); font-weight: var(--brand-body-weight); box-shadow: 0 10px 28px rgb(20 27 43 / 10%); }
.brand-live-preview { border-color: #dce1e9; border-radius: 14px; background: #f5f7f9; }
.brand-live-preview > img { display: block; width: 100%; height: auto; }
.brand-live-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--brand-border); }.brand-live-preview > header button { padding: 6px 8px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-small); color: var(--brand-text); background: var(--brand-surface-muted); font-size: 7px; }
.brand-preview-logo { min-width: 0; display: flex; align-items: center; gap: 7px; }.brand-preview-logo img, .brand-preview-logo > span { width: 24px; height: 24px; display: grid; place-items: center; padding: 4px; border-radius: var(--brand-radius-small); color: var(--brand-accent-contrast); background: var(--brand-accent); }.brand-preview-logo strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.brand-preview-body { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 330px; }.brand-preview-viewer { display: grid; place-items: center; align-content: center; gap: 8px; padding: 15px; color: var(--brand-text-muted); background: var(--brand-viewer); text-align: center; }.brand-preview-viewer .icon { width: 44px; height: 44px; color: var(--brand-accent); }.brand-preview-viewer span { font-size: 7px; }
.brand-preview-body aside { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-left: 1px solid var(--brand-border); }.brand-preview-body aside > p { margin: 0; color: var(--brand-accent); font-size: 6px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.brand-preview-body h3 { margin: 0; font-size: 14px; font-weight: var(--brand-heading-weight); }.brand-preview-muted { color: var(--brand-text-muted); font-size: 7px; line-height: 1.4; }
.brand-preview-choice { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px; border: 1px solid var(--brand-border); border-radius: var(--brand-radius-medium); font-size: 7px; }.brand-preview-choice.is-selected { border-color: var(--brand-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-focus) 15%, transparent); }.brand-preview-choice b { color: var(--brand-accent); }
.brand-preview-total { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--brand-border); font-size: 8px; }.brand-preview-cta, .brand-preview-reset { width: 100%; min-height: 34px; border-radius: var(--brand-radius-medium); font-size: 8px; font-weight: 850; }.brand-preview-cta { border: 1px solid var(--brand-accent); color: var(--brand-accent-contrast); background: var(--brand-accent); }.brand-preview-reset { border: 1px solid var(--brand-border); color: var(--brand-text); background: var(--brand-surface-muted); }
.brand-preview-note { margin: 11px 0 0; }
.brand-profile-readiness .issue-chip-list { margin: 9px 0 13px; }.brand-profile-readiness dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }.brand-profile-readiness dl div { padding: 8px; border-radius: 8px; background: #f5f6f8; }.brand-profile-readiness dt { color: #7c8490; font-size: 7px; }.brand-profile-readiness dd { margin: 3px 0 0; font-size: 11px; font-weight: 850; }
.brand-profile-savebar { z-index: 65; }

.content-assistance-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.content-assistance-action { min-height: 88px; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; padding: 14px; border: 1px solid #dce1e9; border-radius: 11px; color: #252a32; background: #fff; text-align: left; cursor: pointer; }
.content-assistance-action:hover { border-color: #aebafa; background: #fafbff; }
.content-assistance-action strong, .content-assistance-action span { min-width: 0; }
.content-assistance-action strong { font-size: 11px; }.content-assistance-action > span:not(.content-assistance-status) { grid-column: 1 / -1; color: #747d89; font-size: 8px; line-height: 1.45; }
.content-assistance-status { justify-self: end; padding: 4px 7px; border-radius: 999px; color: #56606d; background: #eef1f5; font-size: 7px; font-weight: 850; white-space: nowrap; }
.content-assistance-status.status-needs-review { color: #8a5b00; background: #fff4ce; }.content-assistance-status.status-ready-to-apply { color: #0f7047; background: #e7f7ef; }.content-assistance-status.status-applied { color: #2452d6; background: #edf1ff; }.content-assistance-status.status-failed, .content-assistance-status.status-stale { color: #a43128; background: #fff0ee; }
.content-assistance-workflow { display: grid; gap: 13px; }
.content-assistance-workflow > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.content-assistance-workflow h3, .content-assistance-review h4 { margin: 3px 0 0; }.content-assistance-workflow h3 { font-size: 14px; }
.content-assistance-workflow > label { display: grid; gap: 6px; color: #59616d; font-size: 9px; font-weight: 800; }
.content-assistance-workflow input, .content-assistance-workflow select { min-height: 44px; width: 100%; padding: 0 11px; border: 1px solid #d8dce5; border-radius: 8px; color: #17191d; background: #fff; }
.content-assistance-workflow input:focus-visible, .content-assistance-workflow select:focus-visible, .content-assistance-action:focus-visible, .content-assistance-decisions button:focus-visible { outline: 3px solid rgb(41 85 243 / 32%); outline-offset: 2px; }
.content-assistance-note { margin: 0; color: #747d89; font-size: 9px; line-height: 1.5; }
.content-assistance-review ul { display: grid; gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
.content-assistance-review li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 11px; border: 1px solid #e0e4ea; border-radius: 10px; background: #fafbfc; }
.content-assistance-review strong, .content-assistance-review small, .content-assistance-review p { display: block; }.content-assistance-review small { margin-top: 3px; color: #7a828e; font-size: 7px; }.content-assistance-review p { margin: 7px 0 0; font-size: 9px; }
.content-assistance-decisions { display: flex; flex-wrap: wrap; gap: 5px; align-content: start; }.content-assistance-decisions .button { min-height: 44px; }.content-assistance-decisions [aria-pressed="true"] { border-color: #4f6bff; color: #2344bd; background: #f0f3ff; }
.content-assistance-discard, .content-assistance-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #efc2bc; border-radius: 9px; background: #fff7f6; font-size: 9px; }
.content-assistance-error { color: #9b2c25; }

@media (max-width: 1240px) {
  .brand-profile-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .brand-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-token-groups { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .brand-profile-basic-grid, .brand-profile-layout { grid-template-columns: 1fr; }
  .brand-profile-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-preview-panel { grid-column: 1 / -1; }
  .brand-profile-savebar { left: 14px; right: 14px; }
}
@media (max-width: 680px) {
  .brand-profile-editor-form { padding-bottom: 122px; }
  .brand-section, .brand-profile-sidebar > .panel, .brand-profile-basics { padding: 14px; }
  .brand-preset-grid, .brand-contrast-grid, .brand-color-grid, .brand-locale-grid, .brand-profile-sidebar { grid-template-columns: 1fr; }
  .brand-label-grid { grid-template-columns: 1fr; }
  .brand-preview-body { grid-template-columns: 1fr; }.brand-preview-viewer { min-height: 210px; }.brand-preview-body aside { border-top: 1px solid var(--brand-border); border-left: 0; }
  .brand-profile-savebar { align-items: stretch; flex-direction: column; }.brand-profile-savebar > div:last-child { display: grid; grid-template-columns: 1fr; }.brand-profile-savebar .button { width: 100%; }
  .content-assistance-actions { grid-template-columns: 1fr; }.content-assistance-workflow > header { grid-template-columns: 1fr auto; }.content-assistance-workflow > header .button { grid-column: 1 / -1; justify-self: start; }.content-assistance-review li { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .content-assistance-action { transition: none; }
}

@media (forced-colors: active) {
  .content-assistance-action, .content-assistance-review li, .content-assistance-workflow input, .content-assistance-workflow select { border: 1px solid CanvasText; }
  .content-assistance-status, .content-assistance-decisions [aria-pressed="true"] { border: 2px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: auto; }
}

/* F3 + ZK integration: customer-readable mapping results and quiet import diagnostics. */
.mapping-consequence { display: grid; gap: 3px; margin: 10px 14px 0; padding: 9px 10px; border-radius: 8px; color: #56645d; background: #eff6f2; font-size: 11px; line-height: 1.45; }
.mapping-consequence strong { color: #244d39; font-size: 11px; }
.mapping-consequence.has-issues { color: #7a351f; background: #fff1eb; }
.mapping-consequence.has-issues strong { color: #7a351f; }
.automapping-customer-copy { margin: 7px 0 0; color: #596271; font-size: 11px; line-height: 1.5; }
.builder-automapping-suggestion.bucket-conflict header span,
.builder-automapping-suggestion.bucket-stale header span { color: #a33b35; }
.builder-automapping-suggestion.bucket-missing header span,
.builder-automapping-suggestion.bucket-ambiguous header span { color: #916019; }
.builder-automapping-suggestion.bucket-exact header span { color: #24734d; }
.builder-folder-automapping-actions > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.builder-asset-health { display: grid; gap: 9px; margin-top: 10px; padding: 10px; border: 1px solid #dfe5ed; border-radius: 10px; background: #fff; }
.builder-asset-health-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.builder-asset-health-heading > div { display: grid; gap: 2px; }
.builder-asset-health-heading strong { font-size: 13px; }
.builder-asset-health-heading small { color: #667085; font-size: 10px; line-height: 1.35; }
.builder-asset-health-heading b { flex: none; padding: 4px 7px; border-radius: 999px; color: #17623f; background: #e9f7ef; font-size: 10px; }
.builder-asset-health[data-asset-health-level="review"] .builder-asset-health-heading b { color: #7b4d0e; background: #fff4df; }
.builder-asset-health[data-asset-health-level="heavy"] .builder-asset-health-heading b { color: #922b2b; background: #fff0f0; }
.builder-asset-health-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.builder-asset-health-metrics span { display: grid; gap: 2px; min-width: 0; padding: 7px; border-radius: 7px; background: #f7f9fb; }
.builder-asset-health-metrics small { color: #667085; font-size: 9px; }
.builder-asset-health-metrics strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.builder-asset-health ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.builder-asset-health li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 7px; align-items: start; }
.builder-asset-health li > span { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #2d9b62; }
.builder-asset-health li[data-state="review"] > span { background: #d6922f; }
.builder-asset-health li[data-state="warning"] > span { background: #cf3f4f; }
.builder-asset-health li div { display: grid; gap: 1px; }
.builder-asset-health li strong { font-size: 10px; }
.builder-asset-health li small,
.builder-asset-health > p { margin: 0; color: #667085; font-size: 9px; line-height: 1.4; }
.builder-asset-health > button { justify-self: start; }

/* Blok 18B - functional Product Setup authoring */
.button-small { min-height: 32px; padding: 0 10px; font-size: 9px; }
.back-link { display: inline-flex; margin-bottom: 12px; color: #4f6bff; font-size: 10px; font-weight: 800; text-decoration: none; }
.product-setup-list .button { white-space: nowrap; }
.product-setup-editor-heading .page-heading { margin-bottom: 18px; }
.product-setup-editor-form { padding-bottom: 82px; }
.product-setup-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.product-setup-editor-main, .product-setup-steps, .product-setup-groups, .product-setup-options { display: grid; gap: 14px; min-width: 0; }
.product-setup-basics { padding: 20px; }
.product-setup-model-asset { display: grid; gap: 14px; padding: 20px; }
.product-setup-asset-state { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid #dfe3ea; border-radius: 11px; background: #f8f9fb; }
.product-setup-asset-state.is-ready { border-color: #b8dfcc; background: #f4fbf7; }
.product-setup-asset-state.is-blocked { border-color: #ecd6a8; background: #fffaf0; }
.product-setup-asset-state .icon { width: 18px; height: 18px; flex: 0 0 auto; color: #4f6bff; }
.product-setup-asset-state strong, .product-setup-asset-state p, .product-setup-asset-state code { display: block; }
.product-setup-asset-state p { margin: 4px 0 0; color: #69727e; font-size: 9px; line-height: 1.5; }
.product-setup-asset-state code { max-width: 100%; margin-top: 7px; overflow: hidden; color: #7b8490; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.product-setup-glb-picker { margin-top: 0; }
.product-setup-field-grid { display: grid; gap: 12px; }
.basics-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.group-fields { grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr) minmax(210px, .8fr); align-items: end; }
.option-fields { grid-template-columns: minmax(170px, 1fr) minmax(135px, .55fr) minmax(150px, .7fr) minmax(180px, .65fr); align-items: end; }
.product-setup-field-grid label, .product-setup-step-label { display: grid; gap: 6px; color: #555f69; font-size: 9px; font-weight: 800; }
.product-setup-field-grid input, .product-setup-field-grid select, .product-setup-step-label input { width: 100%; height: 40px; min-width: 0; padding: 0 11px; border: 1px solid #d8dce5; border-radius: 8px; color: #17191d; background: #fff; font-size: 10px; }
.product-setup-field-grid input:focus, .product-setup-field-grid select:focus, .product-setup-step-label input:focus { border-color: #7387f6; outline: 0; box-shadow: 0 0 0 3px rgb(79 107 255 / 10%); }
.product-setup-field-grid input:disabled, .product-setup-field-grid select:disabled, .product-setup-step-label input:disabled { color: #676d78; background: #f5f6f8; }
.checkbox-field { min-height: 40px; display: flex !important; grid-template-columns: auto 1fr; flex-direction: row; align-items: center; gap: 9px !important; padding: 0 11px; border: 1px solid #d8dce5; border-radius: 8px; color: #2d333b !important; background: #fff; }
.checkbox-field input { width: 15px; height: 15px; padding: 0; accent-color: #4f6bff; }
.product-setup-structure-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 5px; }
.product-setup-structure-heading h2 { margin: 2px 0 0; font-size: 18px; }
.product-setup-step { padding: 18px; border: 1px solid #d9ddeb; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgb(20 28 45 / 4%); }
.product-setup-step:focus, .product-setup-group:focus, .product-setup-option:focus { outline: 3px solid rgb(79 107 255 / 13%); outline-offset: 2px; }
.product-setup-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.product-setup-card-heading h2, .product-setup-card-heading h3, .product-setup-card-heading h4 { margin: 2px 0 0; color: #16191e; }
.product-setup-card-heading h2 { font-size: 17px; }
.product-setup-card-heading h3 { font-size: 14px; }
.product-setup-card-heading h4 { font-size: 12px; }
.product-setup-step-label { max-width: 520px; margin-bottom: 15px; }
.product-setup-group { padding: 15px; border: 1px solid #cfd6f8; border-radius: 12px; background: #fafbff; }
.product-setup-option { padding: 13px; border: 1px solid #e1e4eb; border-radius: 10px; background: #fff; }
.add-entity { margin-top: 13px; }
.product-setup-editor-sidebar { position: sticky; top: 82px; display: grid; gap: 14px; }
.product-setup-editor-sidebar .panel { padding: 17px; }
.product-setup-editor-sidebar h2 { margin: 3px 0 11px; font-size: 15px; }
.product-setup-readiness > p:last-child { margin: 12px 0 0; color: #78808b; font-size: 9px; line-height: 1.55; }
.issue-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.issue-chip-list span { padding: 5px 8px; border-radius: 999px; color: #6d4c05; background: #fff3cd; font-size: 8px; font-weight: 800; text-transform: capitalize; }
.product-setup-readiness dl { display: grid; gap: 7px; margin: 14px 0 0; }
.product-setup-readiness dl div { display: flex; justify-content: space-between; padding-top: 7px; border-top: 1px solid #eceef3; font-size: 9px; }
.product-setup-readiness dt { color: #7c838c; }
.product-setup-readiness dd { margin: 0; color: #1f2329; font-weight: 800; }
.product-setup-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.product-setup-history li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; padding: 9px; border: 1px solid #e3e6ed; border-radius: 9px; }
.product-setup-history li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #616a75; background: #f0f2f5; font-size: 9px; font-weight: 900; }
.product-setup-history li.is-current { border-color: #b9c4ff; background: #f7f8ff; }
.product-setup-history li.is-current > span { color: #fff; background: #4f6bff; }
.product-setup-history li div { min-width: 0; }
.product-setup-history strong { display: block; font-size: 9px; }
.product-setup-history code { display: block; margin-top: 3px; overflow: hidden; color: #858c96; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.product-setup-automapping { padding: 20px; }
.automapping-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.automapping-heading > div { max-width: 720px; }
.automapping-heading h2 { margin: 3px 0 6px; font-size: 18px; letter-spacing: -.02em; }
.automapping-heading p:last-child { margin: 0; color: #6d7580; font-size: 10px; line-height: 1.55; }
.automapping-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.automapping-summary div { padding: 11px; border: 1px solid #e3e6ed; border-radius: 10px; background: #f8f9fb; }
.automapping-summary strong, .automapping-summary span { display: block; }
.automapping-summary strong { color: #16191e; font-size: 18px; }
.automapping-summary span { margin-top: 3px; color: #737b86; font-size: 8px; font-weight: 750; }
.automapping-safety { display: flex; gap: 9px; margin-top: 12px; padding: 10px 11px; border: 1px solid #dce2ff; border-radius: 10px; color: #4e5870; background: #f6f8ff; font-size: 9px; line-height: 1.5; }
.automapping-safety .icon { width: 15px; height: 15px; flex: 0 0 auto; color: #4f6bff; }
.automapping-safety strong { color: #26345f; }
.automapping-list { display: grid; gap: 10px; margin-top: 14px; }
.automapping-suggestion { padding: 13px; border: 1px solid #dfe3ea; border-left: 4px solid #96a0ae; border-radius: 11px; background: #fff; }
.automapping-suggestion:focus { outline: 3px solid rgb(79 107 255 / 13%); outline-offset: 2px; }
.automapping-suggestion.state-pending { border-left-color: #4f6bff; }
.automapping-suggestion.state-review_required { border-left-color: #d98b2b; background: #fffdf9; }
.automapping-suggestion.state-accepted { border-left-color: #25945d; background: #fbfefc; }
.automapping-suggestion.state-rejected { border-left-color: #8d949e; background: #f8f9fa; }
.automapping-suggestion > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.automapping-suggestion > header strong { display: block; margin-top: 5px; font-size: 11px; line-height: 1.4; }
.automapping-state, .confidence-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; font-size: 7px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }
.automapping-state { color: #56606d; background: #edf0f4; }
.state-pending .automapping-state { color: #354bc8; background: #eef1ff; }
.state-review_required .automapping-state { color: #955809; background: #fff0dc; }
.state-accepted .automapping-state { color: #167348; background: #e9f7ef; }
.confidence-badge { flex: 0 0 auto; color: #8c570f; background: #fff2df; }
.confidence-badge.is-exact { color: #167348; background: #e9f7ef; }
.automapping-detail { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.automapping-detail span { padding: 6px 8px; border-radius: 7px; color: #6e7681; background: #f4f5f7; font-size: 8px; }
.automapping-detail b { color: #343a43; font-weight: 800; }
.automapping-suggestion details { margin-top: 10px; color: #6b7380; font-size: 8px; }
.automapping-suggestion summary { width: fit-content; color: #4b5fcf; font-weight: 800; cursor: pointer; }
.automapping-suggestion details ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.automapping-suggestion details li { padding: 5px 7px; border: 1px solid #e4e7ed; border-radius: 6px; background: #fafbfc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 7px; }
.automapping-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.automapping-empty { padding: 20px; border: 1px dashed #cfd5df; border-radius: 11px; text-align: center; background: #fafbfc; }
.automapping-empty strong { font-size: 11px; }
.automapping-empty p { max-width: 560px; margin: 6px auto 0; color: #737b86; font-size: 9px; line-height: 1.5; }
.product-setup-savebar { position: fixed; z-index: 20; right: 24px; bottom: 14px; left: calc(var(--sidebar-width) + 24px); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 13px; border: 1px solid #dce0e8; border-radius: 13px; background: rgb(255 255 255 / 96%); box-shadow: 0 10px 30px rgb(10 18 35 / 14%); backdrop-filter: blur(10px); }
.product-setup-savebar > div { display: flex; align-items: center; gap: 10px; }
.product-setup-savebar > div:first-child > .icon { width: 17px; color: #4f6bff; }
.product-setup-savebar strong, .product-setup-savebar small { display: block; }
.product-setup-savebar strong { font-size: 9px; }
.product-setup-savebar small { margin-top: 2px; color: #7b838d; font-size: 8px; }

@media (max-width: 1180px) {
  .basics-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group-fields, .option-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automapping-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .product-setup-editor-layout { grid-template-columns: 1fr; }
  .product-setup-editor-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-setup-savebar { left: 14px; right: 14px; }
}

@media (max-width: 680px) {
  .product-setup-editor-form { padding-bottom: 0; }
  .product-setup-basics, .product-setup-model-asset, .product-setup-step { padding: 14px; }
  .product-setup-automapping { padding: 14px; }
  .automapping-heading, .automapping-suggestion > header { align-items: stretch; flex-direction: column; }
  .automapping-heading .button { width: 100%; }
  .automapping-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confidence-badge { align-self: flex-start; }
  .basics-fields, .group-fields, .option-fields, .product-setup-editor-sidebar { grid-template-columns: 1fr; }
  .product-setup-card-heading, .product-setup-structure-heading { align-items: stretch; flex-direction: column; }
  .product-setup-card-heading .button, .product-setup-structure-heading .button, .add-entity { width: 100%; }
  .product-setup-savebar { position: static; align-items: stretch; flex-direction: column; margin-top: 14px; }
  .product-setup-savebar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .automapping-summary { grid-template-columns: 1fr 1fr; }
  .automapping-actions { display: grid; grid-template-columns: 1fr; }
  .automapping-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Block 16E: local clickable UX prototype. */
.ux-prototype { width: min(100%, 1540px); margin: 0 auto; }
.prototype-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.prototype-heading h1 { max-width: 760px; margin: 4px 0 8px; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.02; letter-spacing: -.045em; }
.prototype-heading > div > p:last-child { max-width: 760px; margin: 0; color: #646b76; font-size: 12px; line-height: 1.65; }
.prototype-badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #d7dcff; border-radius: 999px; color: #394fd6; background: #f5f6ff; font-size: 9px; font-weight: 750; white-space: nowrap; }
.prototype-badge .icon { width: 14px; height: 14px; }

.prototype-steps { margin-bottom: 12px; overflow: hidden; border: 1px solid #dfe3ed; border-radius: 15px; background: #ffffff; box-shadow: 0 4px 18px rgb(13 13 13 / 4%); }
.prototype-steps ol { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); margin: 0; padding: 0; list-style: none; }
.prototype-steps li { position: relative; min-width: 0; }
.prototype-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -1px; width: 1px; height: 36px; background: #e7e9ef; transform: translateY(-50%); }
.prototype-steps a { min-height: 78px; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-content: center; padding: 12px 15px; color: #656b76; text-decoration: none; }
.prototype-steps a > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; align-self: center; border: 1px solid #d9dde6; border-radius: 8px; color: #777e89; background: #f8f9fb; font-size: 9px; font-weight: 800; }
.prototype-steps a > span .icon { width: 14px; height: 14px; }
.prototype-steps strong { align-self: end; color: #26282d; font-size: 10px; }
.prototype-steps small { align-self: start; margin-top: 2px; font-size: 8px; }
.prototype-steps li.is-current a { background: linear-gradient(135deg, #fafaff, #f0f2ff); }
.prototype-steps li.is-current a > span { border-color: #4f6bff; color: #ffffff; background: #4f6bff; box-shadow: 0 0 0 3px rgb(79 107 255 / 12%); }
.prototype-steps li.is-current strong { color: #2f43b5; }
.prototype-steps li.is-complete a > span { border-color: #b9d9c7; color: #168653; background: #edf9f2; }
.prototype-safety { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 15px; border: 1px solid #e1e4eb; border-radius: 10px; color: #626873; background: #fafafa; font-size: 9px; }
.prototype-safety .icon { width: 14px; height: 14px; color: #4f6bff; }

.prototype-stage { overflow: hidden; border: 1px solid #dfe3eb; border-radius: 17px; background: #ffffff; box-shadow: 0 14px 42px rgb(13 13 13 / 7%); }
.prototype-screen-heading { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #e7e9ef; background: linear-gradient(180deg, #ffffff, #fcfcfd); }
.prototype-screen-heading h2 { margin: 4px 0 5px; font-size: 21px; letter-spacing: -.035em; }
.prototype-screen-heading > div > p:last-child { max-width: 700px; margin: 0; color: #6b7280; font-size: 10px; line-height: 1.55; }
.prototype-readiness { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #eadbb7; border-radius: 999px; color: #8a5a12; background: #fffaf0; font-size: 9px; font-weight: 750; white-space: nowrap; }
.prototype-readiness.is-ready { border-color: #c8e4d4; color: #168653; background: #f1faf5; }
.prototype-readiness .icon { width: 14px; height: 14px; }
.prototype-footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 22px; border-top: 1px solid #e7e9ef; background: #fafbfc; }

.prototype-setup-grid { display: grid; grid-template-columns: 225px minmax(380px, 1fr) 250px; gap: 14px; padding: 18px; background: #f4f5f8; }
.prototype-source-card, .prototype-review-queue, .prototype-logic-canvas { min-width: 0; border: 1px solid #dfe3eb; border-radius: 13px; background: #ffffff; }
.prototype-source-card { align-self: start; padding: 17px; }
.prototype-source-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 12px; color: #ffffff; background: linear-gradient(145deg, #4f6bff, #2a377f); box-shadow: 0 9px 20px rgb(79 107 255 / 23%); }
.prototype-source-card h3, .prototype-review-queue h3 { margin: 4px 0 5px; font-size: 14px; }
.prototype-source-card > p:not(.eyebrow), .prototype-review-queue > p:not(.eyebrow) { margin: 0; color: #747b86; font-size: 9px; line-height: 1.55; }
.prototype-source-card dl { display: grid; gap: 8px; margin: 17px 0; }
.prototype-source-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #eceef2; font-size: 9px; }
.prototype-source-card dt { color: #747b86; }
.prototype-source-card dd { margin: 0; font-weight: 750; }
.prototype-source-card .button { width: 100%; }
.prototype-logic-canvas { padding: 14px; }
.prototype-logic-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 13px; }
.prototype-logic-toolbar strong, .prototype-logic-toolbar small { display: block; }
.prototype-logic-toolbar strong { font-size: 11px; }
.prototype-logic-toolbar small { margin-top: 3px; color: #7b818b; font-size: 8px; }
.prototype-group-card { margin-top: 10px; padding: 13px; border: 1px solid #e1e4eb; border-radius: 11px; background: #fbfbfc; }
.prototype-group-card header { display: grid; grid-template-columns: 27px minmax(0, 1fr) 28px; gap: 9px; align-items: center; }
.prototype-group-card header > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #394fd6; background: #eef1ff; font-size: 8px; font-weight: 800; }
.prototype-group-card h3, .prototype-group-card p { margin: 0; }
.prototype-group-card h3 { font-size: 10px; }
.prototype-group-card p { margin-top: 3px; color: #777e89; font-size: 8px; }
.prototype-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.prototype-options > button { min-width: 0; min-height: 53px; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #dfe3e9; border-radius: 9px; background: #ffffff; text-align: left; cursor: pointer; }
.prototype-options > button[aria-pressed="true"] { border-color: #4f6bff; background: #f3f5ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); }
.prototype-options i, .prototype-choice-group i { width: 17px; height: 17px; display: block; flex: 0 0 auto; border: 1px solid rgb(13 13 13 / 9%); border-radius: 50%; }
.swatch-ocean { background: #245c73; }
.swatch-graphite { background: #303836; }
.prototype-options span, .prototype-options strong, .prototype-options small { display: block; min-width: 0; }
.prototype-options strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.prototype-options small { margin-top: 3px; color: #737985; font-size: 7px; }
.prototype-review-queue { align-self: start; padding: 17px; }
.prototype-match { display: grid; grid-template-columns: 42px minmax(0, 1fr) 17px; gap: 9px; align-items: center; padding: 10px; margin: 15px 0 11px; border: 1px solid #dce1ff; border-radius: 10px; background: #f6f7ff; }
.match-confidence { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #ffffff; background: #4f6bff; font-size: 9px; font-weight: 800; }
.prototype-match strong, .prototype-match small { display: block; }
.prototype-match strong { font-size: 9px; }
.prototype-match small { margin-top: 3px; color: #6c7280; font-size: 7px; }
.prototype-match .icon { width: 15px; height: 15px; color: #4f6bff; }
.prototype-review-queue .button { width: 100%; }
.prototype-help { display: block; margin-top: 10px; color: #858b95; font-size: 7px; line-height: 1.5; }

.prototype-designer { min-height: 610px; display: grid; grid-template-columns: 190px minmax(480px, 1fr) 215px; background: #eef0f4; }
.prototype-element-palette, .prototype-inspector { padding: 16px; background: #ffffff; }
.prototype-element-palette { border-right: 1px solid #dfe3eb; }
.prototype-inspector { border-left: 1px solid #dfe3eb; }
.prototype-element-palette h3, .prototype-inspector h3 { margin: 4px 0 5px; font-size: 13px; }
.prototype-element-palette > div > p:last-child, .prototype-inspector > p { margin: 0 0 15px; color: #747b86; font-size: 8px; line-height: 1.5; }
.prototype-element-palette > button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px; margin-top: 8px; border: 1px solid #dfe3eb; border-radius: 9px; background: #ffffff; text-align: left; cursor: pointer; }
.prototype-element-palette > button[aria-pressed="true"] { border-color: #98a7fa; background: #f5f6ff; }
.prototype-element-palette > button .icon { width: 17px; height: 17px; color: #4f6bff; }
.prototype-element-palette button span, .prototype-element-palette button strong, .prototype-element-palette button small { display: block; }
.prototype-element-palette button strong { font-size: 9px; }
.prototype-element-palette button small { margin-top: 3px; color: #777e89; font-size: 7px; }
.prototype-palette-note { display: flex; gap: 7px; padding: 10px; margin-top: 15px; border-radius: 9px; color: #5f6673; background: #f5f6f8; font-size: 7px; line-height: 1.45; }
.prototype-palette-note .icon { width: 14px; height: 14px; color: #4f6bff; }
.prototype-canvas-wrap { min-width: 0; padding: 14px; }
.prototype-canvas-toolbar { height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 1px solid #dfe3eb; border-bottom: 0; border-radius: 12px 12px 0 0; background: #ffffff; }
.prototype-canvas-toolbar span, .prototype-canvas-toolbar b, .prototype-canvas-toolbar small { display: block; }
.prototype-canvas-toolbar b { font-size: 9px; }
.prototype-canvas-toolbar small { margin-top: 2px; color: #777e89; font-size: 7px; }
.prototype-canvas-toolbar > div { display: flex; gap: 3px; }
.prototype-canvas { position: relative; min-height: 505px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr); overflow: hidden; border: 1px solid #cfd4df; border-radius: 0 0 12px 12px; background: #f8f9fb; }
.prototype-canvas.layout-visual { grid-template-columns: minmax(0, 1fr); }
.prototype-canvas.layout-visual .prototype-customer-panel { position: absolute; z-index: 3; right: 16px; bottom: 16px; width: min(280px, 42%); max-height: calc(100% - 32px); overflow-y: auto; border: 1px solid rgb(255 255 255 / 72%); border-radius: 13px; box-shadow: 0 18px 42px rgb(13 13 13 / 18%); }
.prototype-canvas-viewer { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid #e1e4eb; }
.prototype-floating-heading { position: absolute; z-index: 3; top: 18px; left: 18px; display: grid; padding: 10px 12px; border: 1px solid rgb(255 255 255 / 72%); border-radius: 9px; background: rgb(255 255 255 / 86%); box-shadow: 0 8px 22px rgb(13 13 13 / 8%); backdrop-filter: blur(8px); }
.prototype-floating-heading small { color: #5f6673; font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.prototype-floating-heading strong { margin-top: 3px; font-size: 11px; }
.prototype-benefits { position: absolute; z-index: 3; left: 18px; bottom: 17px; display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.prototype-benefits li { padding: 6px 8px; border: 1px solid rgb(255 255 255 / 75%); border-radius: 999px; color: #333842; background: rgb(255 255 255 / 86%); font-size: 7px; box-shadow: 0 5px 12px rgb(13 13 13 / 6%); }
.prototype-summary-chip { position: absolute; z-index: 4; right: 13px; top: 13px; padding: 7px 9px; border-radius: 999px; color: #168653; background: #edf9f2; font-size: 7px; font-weight: 750; }
.prototype-inspector > button { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 9px; align-items: center; padding: 10px; margin-top: 9px; border: 1px solid #dfe3eb; border-radius: 10px; background: #ffffff; text-align: left; cursor: pointer; }
.prototype-inspector > button[aria-pressed="true"] { border-color: #4f6bff; background: #f4f5ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); }
.layout-mini { grid-row: 1 / 3; width: 48px; height: 34px; display: block; border: 1px solid #cfd4df; border-radius: 6px; background: linear-gradient(90deg, #e8eaff 0 60%, #ffffff 60%); }
.layout-mini.visual { background: linear-gradient(135deg, #dfe4ff, #ffffff 70%); }
.prototype-inspector button strong { font-size: 8px; }
.prototype-inspector button small { color: #777e89; font-size: 7px; }
.prototype-inspector-note { padding: 11px; margin-top: 15px; border-radius: 9px; background: #f5f6f8; }
.prototype-inspector-note strong { font-size: 8px; }
.prototype-inspector-note p { margin: 5px 0 0; color: #737985; font-size: 7px; line-height: 1.45; }

.prototype-product-visual { position: relative; min-height: 100%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 43%, #ffffff 0, #eff1f5 52%, #e2e5eb 100%); }
.prototype-product-orbit { position: absolute; border: 1px solid rgb(79 107 255 / 13%); border-radius: 50%; }
.prototype-product-orbit.orbit-a { width: 310px; height: 310px; }
.prototype-product-orbit.orbit-b { width: 205px; height: 205px; }
.prototype-chair-shape { position: relative; z-index: 2; width: 130px; height: 150px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 70%); border-radius: 30px 30px 22px 22px; color: #ffffff; background: linear-gradient(145deg, #2b6e89, #173b4b); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 28px 50px rgb(20 45 57 / 24%); transform: perspective(550px) rotateY(-18deg) rotateX(3deg); }
.material-graphite .prototype-chair-shape { background: linear-gradient(145deg, #48504e, #202524); box-shadow: inset 0 1px 0 rgb(255 255 255 / 23%), 0 28px 50px rgb(20 25 24 / 24%); }
.prototype-chair-shape .icon { width: 63px; height: 63px; opacity: .85; }
.prototype-viewer-label { position: absolute; z-index: 2; bottom: 15px; padding: 6px 9px; border-radius: 999px; color: #5d6470; background: rgb(255 255 255 / 84%); font-size: 7px; }

.prototype-customer-panel { min-width: 0; padding: 22px; background: #ffffff; }
.prototype-customer-panel h3 { margin: 4px 0 18px; font-size: 20px; letter-spacing: -.035em; }
.prototype-customer-panel.is-compact { padding: 17px; }
.prototype-customer-panel.is-compact h3 { margin-bottom: 13px; font-size: 15px; }
.prototype-choice-group { margin-top: 13px; }
.prototype-choice-group > span { display: block; margin-bottom: 7px; font-size: 8px; font-weight: 750; }
.prototype-choice-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.prototype-choice-group button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border: 1px solid #dfe3eb; border-radius: 8px; background: #ffffff; font-size: 8px; font-weight: 700; cursor: pointer; }
.prototype-choice-group button[aria-pressed="true"] { border-color: var(--prototype-accent, #4f6bff); color: var(--prototype-accent-dark, #2f43b5); background: var(--prototype-soft, #f2f4ff); box-shadow: 0 0 0 2px rgb(79 107 255 / 9%); }
.prototype-price { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid #e4e6eb; }
.prototype-price span { color: #6b7280; font-size: 8px; }
.prototype-price strong { font-size: 14px; }
.prototype-cta { width: 100%; min-height: 43px; margin-top: 12px; border: 0; border-radius: 9px; color: #ffffff; background: var(--prototype-accent, #4f6bff); font-size: 9px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgb(79 107 255 / 20%); }

.brand-configux { --prototype-accent: #4f6bff; --prototype-accent-dark: #2f43b5; --prototype-soft: #eef1ff; }
.brand-midnight { --prototype-accent: #111827; --prototype-accent-dark: #020617; --prototype-soft: #eef0f3; }
.brand-warm { --prototype-accent: #9a5c36; --prototype-accent-dark: #653a21; --prototype-soft: #fbf0e8; }

.prototype-brand-grid { display: grid; grid-template-columns: minmax(390px, .8fr) minmax(430px, 1.2fr); gap: 18px; padding: 20px; background: #f4f5f8; }
.prototype-brand-options, .prototype-brand-preview { min-width: 0; border: 1px solid #dfe3eb; border-radius: 13px; background: #ffffff; }
.prototype-brand-options { padding: 17px; }
.prototype-brand-identity { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid #e7e9ef; }
.prototype-brand-identity img { width: 44px; height: 38px; padding: 8px; border-radius: 10px; background: #eef1ff; }
.prototype-brand-identity h3, .prototype-brand-identity p { margin: 0; }
.prototype-brand-identity h3 { margin-top: 3px; font-size: 13px; }
.prototype-brand-identity div > p:last-child { margin-top: 3px; color: #777e89; font-size: 8px; }
.prototype-brand-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.prototype-brand-presets button { min-width: 0; padding: 10px; border: 1px solid #dfe3eb; border-radius: 10px; background: #ffffff; text-align: left; cursor: pointer; }
.prototype-brand-presets button[aria-pressed="true"] { border-color: #4f6bff; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); }
.prototype-brand-presets button > span { display: flex; margin-bottom: 10px; }
.prototype-brand-presets i { width: 25px; height: 25px; display: block; margin-right: -5px; border: 2px solid #ffffff; border-radius: 50%; }
.preset-configux i:nth-child(1) { background: #4f6bff; }.preset-configux i:nth-child(2) { background: #0d0d0d; }.preset-configux i:nth-child(3) { background: #f3f4f6; }
.preset-midnight i:nth-child(1) { background: #111827; }.preset-midnight i:nth-child(2) { background: #334155; }.preset-midnight i:nth-child(3) { background: #e2e8f0; }
.preset-warm i:nth-child(1) { background: #9a5c36; }.preset-warm i:nth-child(2) { background: #d9b89c; }.preset-warm i:nth-child(3) { background: #fbf0e8; }
.prototype-brand-presets strong, .prototype-brand-presets small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prototype-brand-presets strong { font-size: 8px; }
.prototype-brand-presets small { margin-top: 3px; color: #777e89; font-size: 7px; }
.prototype-token-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.prototype-token-list div { padding: 10px; border-radius: 9px; background: #f6f7f9; }
.prototype-token-list dt { color: #777e89; font-size: 7px; }
.prototype-token-list dd { margin: 4px 0 0; font-size: 9px; font-weight: 750; }
.prototype-brand-preview { min-height: 500px; overflow: hidden; }
.prototype-brand-preview-bar { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #ffffff; background: var(--prototype-accent); }
.prototype-brand-preview-bar img { width: 27px; height: 22px; filter: brightness(0) invert(1); }
.prototype-brand-preview-bar strong { font-size: 10px; }
.prototype-brand-preview-bar span { margin-left: auto; padding: 5px 7px; border: 1px solid rgb(255 255 255 / 23%); border-radius: 999px; font-size: 7px; }
.prototype-brand-preview-content { min-height: 450px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .55fr); }

.prototype-preview-stage { background: #f8f9fb; }
.prototype-preview-frame { margin: 20px; overflow: hidden; border: 1px solid #d2d7e1; border-radius: 16px; background: #ffffff; box-shadow: 0 20px 55px rgb(13 13 13 / 13%); }
.prototype-preview-frame > header { height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; color: #ffffff; background: var(--prototype-accent); }
.prototype-preview-frame > header a, .prototype-preview-frame > header button { border: 0; color: inherit; background: transparent; font-size: 8px; font-weight: 700; cursor: pointer; text-decoration: none; }
.prototype-preview-frame > header a { display: flex; align-items: center; gap: 6px; justify-self: start; }
.prototype-preview-frame > header a .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.prototype-preview-frame > header > div { display: flex; align-items: center; gap: 8px; }
.prototype-preview-frame > header img { width: 28px; height: 23px; filter: brightness(0) invert(1); }
.prototype-preview-frame > header strong { font-size: 11px; }
.prototype-preview-frame > header button { justify-self: end; padding: 7px 9px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 8px; }
.prototype-customer-shell { min-height: 580px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); }
.prototype-preview-frame.layout-visual .prototype-customer-shell { position: relative; grid-template-columns: 1fr; }
.prototype-preview-frame.layout-visual .prototype-customer-panel { position: absolute; z-index: 4; right: 24px; bottom: 24px; width: min(350px, 42%); max-height: calc(100% - 48px); overflow-y: auto; border: 1px solid rgb(255 255 255 / 72%); border-radius: 14px; box-shadow: 0 22px 50px rgb(13 13 13 / 20%); }
.prototype-preview-frame > footer { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border-top: 1px solid #e6e8ed; color: #6b7280; background: #fafafa; font-size: 8px; }
.prototype-preview-frame > footer span { display: flex; align-items: center; gap: 6px; }
.prototype-preview-frame > footer .icon { width: 13px; height: 13px; color: #4f6bff; }
.prototype-preview-frame > footer button { border: 0; color: var(--prototype-accent); background: transparent; font-size: 8px; font-weight: 750; cursor: pointer; }

.prototype-review-layout { display: grid; grid-template-columns: minmax(430px, 1.25fr) minmax(280px, .75fr); gap: 18px; padding: 20px; background: #f4f5f8; }
.prototype-dependencies, .prototype-readiness-card { min-width: 0; padding: 18px; border: 1px solid #dfe3eb; border-radius: 13px; background: #ffffff; }
.prototype-dependencies h3, .prototype-readiness-card h3 { margin: 0 0 14px; font-size: 14px; }
.prototype-dependencies article { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 0; border-bottom: 1px solid #eceef2; }
.dependency-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: #394fd6; background: #eef1ff; font-size: 8px; font-weight: 850; }
.prototype-dependencies strong, .prototype-dependencies small { display: block; }
.prototype-dependencies strong { font-size: 10px; }
.prototype-dependencies small { margin-top: 3px; color: #777e89; font-size: 8px; }
.prototype-dependencies article > span:last-child { padding: 5px 7px; border-radius: 999px; color: #555d69; background: #f1f2f5; font-size: 7px; font-weight: 700; }
.prototype-readiness-card h3 { margin-top: 4px; }
.prototype-readiness-card ul { display: grid; gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; }
.prototype-readiness-card li { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 9px; align-items: center; }
.prototype-readiness-card li > svg, .prototype-readiness-card li > :first-child { width: 26px; height: 26px; display: grid; place-items: center; padding: 6px; border-radius: 8px; color: #7b818b; background: #eceef2; font-size: 8px; }
.prototype-readiness-card li.is-done > svg, .prototype-readiness-card li.is-done > :first-child { color: #168653; background: #edf9f2; }
.prototype-readiness-card li span, .prototype-readiness-card li strong, .prototype-readiness-card li small { display: block; }
.prototype-readiness-card li strong { font-size: 9px; }
.prototype-readiness-card li small { margin-top: 3px; color: #777e89; font-size: 7px; }
.prototype-readiness-card .button { width: 100%; }
.prototype-readiness-card > small { display: flex; gap: 6px; margin-top: 10px; color: #777e89; font-size: 7px; line-height: 1.45; }
.prototype-readiness-card > small .icon { width: 13px; height: 13px; flex: 0 0 auto; color: #4f6bff; }

.prototype-human-review { padding: 22px; border-top: 1px solid #dfe3eb; background: #ffffff; }
.prototype-human-review > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.prototype-human-review > header h3 { margin: 4px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.prototype-human-review > header p:last-child { max-width: 680px; margin: 0; color: #69707c; font-size: 9px; line-height: 1.5; }
.prototype-review-status { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #e2e5eb; border-radius: 999px; color: #656c77; background: #f5f6f8; font-size: 8px; font-weight: 800; }
.prototype-review-status.has-changes { border-color: #f3c991; color: #9b5c13; background: #fff7eb; }
.prototype-review-status.is-approved { border-color: #bee5cf; color: #168653; background: #edf9f2; }
.prototype-human-review-layout { display: grid; grid-template-columns: minmax(500px, 1.4fr) minmax(270px, .6fr); gap: 16px; align-items: start; }
.prototype-review-decisions { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prototype-review-decision { min-width: 0; padding: 13px; border: 1px solid #dfe3eb; border-radius: 12px; background: #ffffff; box-shadow: 0 8px 24px rgb(13 13 13 / 4%); }
.prototype-review-decision.is-approved { border-color: #b9e1ca; background: #fbfefc; }
.prototype-review-decision.is-changes { border-color: #f0c88f; background: #fffdf9; }
.prototype-review-decision > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.prototype-review-decision > header > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #394fd6; background: #eef1ff; font-size: 7px; font-weight: 850; }
.prototype-review-decision > header strong, .prototype-review-decision > header small { display: block; }
.prototype-review-decision > header strong { font-size: 9px; }
.prototype-review-decision > header small { margin-top: 2px; color: #777e89; font-size: 7px; }
.prototype-review-decision > header a { color: #4358d8; font-size: 7px; font-weight: 800; text-decoration: none; }
.prototype-review-decision > p { min-height: 42px; margin: 12px 0; color: #5f6672; font-size: 8px; line-height: 1.5; }
.prototype-review-decision > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.prototype-review-decision button { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; border: 1px solid #dfe3eb; border-radius: 8px; color: #4f5662; background: #ffffff; font-size: 7px; font-weight: 800; cursor: pointer; }
.prototype-review-decision button .icon { width: 12px; height: 12px; }
.prototype-review-decision button[aria-pressed="true"][data-decision="approved"] { border-color: #8bc8a5; color: #137344; background: #edf9f2; }
.prototype-review-decision button[aria-pressed="true"][data-decision="changes"] { border-color: #e8b66f; color: #92530d; background: #fff5e7; }
.prototype-review-package-summary { min-width: 0; padding: 17px; border: 1px solid #dfe3eb; border-radius: 13px; background: #f7f8fa; }
.prototype-review-package-summary h3 { margin: 4px 0 14px; font-size: 15px; letter-spacing: -.02em; }
.prototype-review-package-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.prototype-review-package-summary dl div { padding: 9px; border-radius: 9px; background: #ffffff; }
.prototype-review-package-summary dt { color: #747b87; font-size: 7px; }
.prototype-review-package-summary dd { margin: 5px 0 0; font-size: 15px; font-weight: 850; }
.prototype-qa-evidence { padding: 13px; margin-top: 12px; border-radius: 10px; background: #ffffff; }
.prototype-qa-evidence > strong { font-size: 9px; }
.prototype-qa-evidence ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.prototype-qa-evidence li { display: flex; align-items: center; gap: 7px; color: #525965; font-size: 8px; }
.prototype-qa-evidence li .icon { width: 14px; height: 14px; padding: 2px; border-radius: 50%; color: #168653; background: #e8f7ef; }
.prototype-review-boundary { display: flex; gap: 7px; margin: 12px 0 0; color: #6c7380; font-size: 7px; line-height: 1.5; }
.prototype-review-boundary .icon { width: 14px; height: 14px; flex: 0 0 auto; color: #4f6bff; }

@media (max-width: 1280px) {
  .prototype-setup-grid { grid-template-columns: 210px minmax(380px, 1fr); }
  .prototype-review-queue { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, .5fr) minmax(240px, 1fr) auto; gap: 12px; align-items: center; }
  .prototype-review-queue .eyebrow, .prototype-review-queue h3, .prototype-review-queue > p { grid-column: 1; }
  .prototype-review-queue h3 { align-self: end; }
  .prototype-review-queue > p { align-self: start; }
  .prototype-review-queue .prototype-match { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .prototype-review-queue .button { grid-column: 3; grid-row: 1 / 4; width: auto; }
  .prototype-review-queue .prototype-help { display: none; }
  .prototype-designer { grid-template-columns: 180px minmax(430px, 1fr); }
  .prototype-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: auto repeat(2, minmax(190px, 1fr)) minmax(220px, 1fr); gap: 10px; align-items: center; border-top: 1px solid #dfe3eb; border-left: 0; }
  .prototype-inspector > .eyebrow, .prototype-inspector > h3 { display: none; }
  .prototype-inspector > button, .prototype-inspector-note { margin-top: 0; }
}

@media (max-width: 900px) {
  .prototype-steps { overflow-x: auto; }
  .prototype-steps ol { width: 780px; }
  .prototype-setup-grid, .prototype-brand-grid, .prototype-review-layout { grid-template-columns: 1fr; }
  .prototype-review-queue { display: block; }
  .prototype-review-queue .prototype-match { margin: 15px 0 11px; }
  .prototype-review-queue .button { width: 100%; }
  .prototype-review-queue .prototype-help { display: block; }
  .prototype-designer { grid-template-columns: 1fr; }
  .prototype-element-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-right: 0; border-bottom: 1px solid #dfe3eb; }
  .prototype-element-palette > div:first-child, .prototype-palette-note { grid-column: 1 / -1; }
  .prototype-element-palette > button { margin-top: 0; }
  .prototype-inspector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prototype-inspector-note { grid-column: 1 / -1; }
  .prototype-brand-preview-content { grid-template-columns: minmax(0, 1fr) minmax(220px, .6fr); }
  .prototype-customer-shell { grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); }
  .prototype-human-review-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .prototype-heading { flex-direction: column; }
  .prototype-heading h1 { font-size: 33px; }
  .prototype-badge { align-self: flex-start; }
  .prototype-screen-heading { align-items: flex-start; flex-direction: column; padding: 18px; }
  .prototype-setup-grid, .prototype-brand-grid, .prototype-review-layout { padding: 12px; }
  .prototype-logic-toolbar { align-items: flex-start; flex-direction: column; }
  .prototype-logic-toolbar .button { width: 100%; }
  .prototype-options { grid-template-columns: 1fr; }
  .prototype-footer { padding: 12px; }
  .prototype-footer .button { flex: 1; }
  .prototype-element-palette { grid-template-columns: 1fr; }
  .prototype-element-palette > div:first-child, .prototype-palette-note { grid-column: auto; }
  .prototype-canvas-wrap { padding: 10px; }
  .prototype-canvas { min-height: 0; grid-template-columns: 1fr; }
  .prototype-canvas.layout-visual .prototype-customer-panel, .prototype-preview-frame.layout-visual .prototype-customer-panel { position: static; width: auto; max-height: none; overflow: visible; border-radius: 0; box-shadow: none; }
  .prototype-canvas-viewer { min-height: 380px; border-right: 0; border-bottom: 1px solid #e1e4eb; }
  .prototype-inspector { grid-template-columns: 1fr; }
  .prototype-brand-identity { grid-template-columns: 45px minmax(0, 1fr); }
  .prototype-brand-identity .button { grid-column: 1 / -1; width: 100%; }
  .prototype-brand-presets, .prototype-token-list { grid-template-columns: 1fr; }
  .prototype-brand-preview-content, .prototype-customer-shell { grid-template-columns: 1fr; }
  .prototype-brand-preview-content .prototype-product-visual, .prototype-customer-shell .prototype-product-visual { min-height: 390px; }
  .prototype-preview-frame { margin: 12px; }
  .prototype-preview-frame > header { grid-template-columns: auto 1fr auto; padding: 0 12px; }
  .prototype-preview-frame > header > div { justify-self: center; }
  .prototype-preview-frame > footer { align-items: flex-start; flex-direction: column; padding-top: 10px; padding-bottom: 10px; }
  .prototype-dependencies article { grid-template-columns: 38px minmax(0, 1fr); }
  .prototype-dependencies article > span:last-child { grid-column: 2; justify-self: start; }
  .prototype-human-review { padding: 16px 12px; }
  .prototype-human-review > header { flex-direction: column; }
  .prototype-review-status { align-self: flex-start; }
  .prototype-review-decisions { grid-template-columns: 1fr; }
  .prototype-review-decision > p { min-height: 0; }
}

@media (max-width: 390px) {
  .prototype-heading h1 { font-size: 29px; }
  .prototype-steps ol { width: 720px; }
  .prototype-screen-heading h2 { font-size: 19px; }
  .prototype-footer { align-items: stretch; flex-direction: column-reverse; }
  .prototype-footer .button { width: 100%; }
  .prototype-canvas-viewer, .prototype-brand-preview-content .prototype-product-visual, .prototype-customer-shell .prototype-product-visual { min-height: 330px; }
  .prototype-floating-heading { top: 12px; left: 12px; }
  .prototype-benefits { left: 12px; right: 12px; bottom: 12px; }
  .prototype-customer-panel { padding: 17px; }
}

/* Block 18F - local immutable publication trial */
.local-publication-page, .local-publication-detail { display: grid; gap: 17px; }
.local-publication-page > .page-heading, .local-publication-detail > .page-heading { margin-bottom: 0; }
.local-publication-page > .info-banner { margin-bottom: 0; }
.local-publication-source { overflow: hidden; }
.local-publication-source > header { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.local-publication-source > header h2, .local-publication-files h2, .local-publication-provenance h2 { margin: 4px 0 5px; font-size: 15px; letter-spacing: -.02em; }
.local-publication-source > header p:last-child { max-width: 720px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.local-publication-source-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.local-publication-source-grid article { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 16px; background: #fff; }
.local-publication-source-grid article > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.local-publication-source-grid strong, .local-publication-source-grid small { display: block; }
.local-publication-source-grid strong { font-size: 9px; text-transform: capitalize; }
.local-publication-source-grid small { min-width: 0; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.local-publication-source-grid code, .local-publication-checksums code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.local-publication-lock { grid-column: 2; justify-self: start; padding: 4px 6px; border-radius: 999px; color: var(--success); background: #edf9f2; font-size: 7px; font-weight: 800; }
.local-publication-checksums { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1px; margin: 0; border-top: 1px solid var(--line); background: var(--line); }
.local-publication-checksums > div { min-width: 0; padding: 13px 18px; background: #fafbfc; }
.local-publication-checksums dt { color: var(--muted); font-size: 7px; font-weight: 700; }
.local-publication-checksums dd { min-width: 0; margin: 5px 0 0; overflow: hidden; color: #3d4551; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.local-publication-page .empty-inline span { color: var(--muted); font-size: 8px; }
.publication-configurator-picker { min-width: 250px; display: grid; gap: 6px; align-self: end; color: var(--muted); font-size: 8px; font-weight: 750; }
.publication-configurator-picker select { min-height: 38px; padding: 0 34px 0 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; color: var(--text); font: inherit; }
.publication-history-next { color: var(--muted); font-size: 8px; font-weight: 750; }
.local-publication-page .row-action-group { flex-wrap: nowrap; }
.publication-channels { overflow: hidden; }
.publication-channels-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.publication-channels-heading h2 { margin: 4px 0 5px; font-size: 15px; }
.publication-channels-heading p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.publication-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.publication-channel-grid article { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 17px; background: #fff; }
.publication-channel-grid article > .button { grid-column: 2; justify-self: start; }
.publication-channel-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-dark); background: var(--accent-soft); font-size: 13px; font-weight: 850; }
.publication-channel-icon .icon { width: 16px; height: 16px; }
.publication-channel-grid small { color: var(--muted); font-size: 7px; font-weight: 780; text-transform: uppercase; }
.publication-channel-grid h3 { margin: 4px 0 0; font-size: 11px; }
.publication-channel-grid p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.publication-channel-grid code { font-size: 7px; }
.publication-channel-state { align-self: start; padding: 5px 7px; border-radius: 999px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.publication-channel-state.is-ready { color: #176b43; background: #e6f6ec; }
.publication-channel-state.is-waiting { color: #806b3e; background: #f7f1e3; }
.publication-channel-state .icon { width: 10px; height: 10px; margin-right: 3px; vertical-align: -2px; }
.local-publication-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.local-publication-metrics article { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 15px rgb(13 13 13 / 3%); }
.local-publication-metrics small, .local-publication-metrics strong, .local-publication-metrics span { display: block; }
.local-publication-metrics small { color: var(--muted); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.local-publication-metrics strong { margin-top: 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.local-publication-metrics span { margin-top: 5px; color: #7b8290; font-size: 7px; }
.local-publication-player { min-height: 0; }
.local-publication-price-boundary { display: block; color: var(--muted); font-size: 7px; line-height: 1.5; }
.local-publication-detail-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); gap: 17px; align-items: start; }
.local-publication-files, .local-publication-provenance { min-width: 0; padding: 19px; }
.local-publication-files header, .local-publication-provenance header { margin-bottom: 13px; }
.local-publication-files ul { display: grid; gap: 1px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); list-style: none; }
.local-publication-files li { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px; background: #fff; }
.local-publication-file-role { justify-self: start; padding: 5px 7px; border-radius: 6px; color: var(--accent-dark); background: var(--accent-soft); font-size: 7px; font-weight: 800; text-transform: uppercase; }
.local-publication-files strong, .local-publication-files small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-publication-files strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; }
.local-publication-files small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.local-publication-provenance dl { display: grid; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.local-publication-provenance dl > div { min-width: 0; padding: 10px; background: #fff; }
.local-publication-provenance dt { color: var(--muted); font-size: 7px; font-weight: 750; }
.local-publication-provenance dd { min-width: 0; margin: 5px 0 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.local-publication-provenance code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.local-publication-provenance > p { display: flex; gap: 7px; margin: 13px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.local-publication-provenance > p .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }

@media (max-width: 1050px) {
  .local-publication-source-grid, .local-publication-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-publication-detail-grid { grid-template-columns: 1fr; }
  .connector-journey-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .local-publication-source > header { align-items: flex-start; flex-direction: column; }
  .local-publication-source-grid, .local-publication-metrics, .local-publication-checksums { grid-template-columns: 1fr; }
  .local-publication-detail .page-heading { align-items: flex-start; flex-direction: column; }
  .local-publication-detail .page-actions { width: 100%; }
  .local-publication-detail .page-actions .button { width: 100%; }
  .publication-configurator-picker { width: 100%; min-width: 0; }
  .publication-channels-heading { align-items: stretch; flex-direction: column; }
  .publication-channel-grid { grid-template-columns: 1fr; }
  .publication-channel-grid article { grid-template-columns: 38px minmax(0, 1fr); }
  .publication-channel-state { grid-column: 2; justify-self: start; }
}

/* Block 18G - end-to-end QA review package */
.e2e-review-page { display: grid; gap: 17px; }
.e2e-review-page > .page-heading { margin-bottom: 0; }
.e2e-review-heading { align-items: center; }
.e2e-review-heading > div > p:last-child { max-width: 760px; }
.e2e-review-status { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #f6f7f9; font-size: 8px; font-weight: 800; }
.e2e-review-status.has-changes { border-color: #e9bd7e; color: #945711; background: #fff6e9; }
.e2e-review-status.is-approved { border-color: #a9d9bd; color: #147545; background: #edf9f2; }
.e2e-review-hero { min-width: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 24px; align-items: center; padding: 25px; overflow: hidden; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #111426 0%, #18224e 55%, #253d97 100%); box-shadow: 0 20px 50px rgb(17 20 38 / 15%); }
.e2e-review-hero h2 { max-width: 700px; margin: 5px 0 8px; font-size: clamp(22px, 2.5vw, 34px); letter-spacing: -.035em; }
.e2e-review-hero > div > p:last-child { max-width: 740px; margin: 0; color: rgb(255 255 255 / 72%); font-size: 10px; line-height: 1.6; }
.e2e-review-hero .eyebrow { color: #9eb0ff; }
.e2e-review-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.e2e-review-metrics > div { min-width: 0; padding: 14px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 12px; background: rgb(255 255 255 / 8%); }
.e2e-review-metrics dt { color: rgb(255 255 255 / 62%); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.e2e-review-metrics dd { margin: 7px 0 3px; font-size: 25px; font-weight: 850; }
.e2e-review-metrics span { color: rgb(255 255 255 / 58%); font-size: 7px; }
.e2e-lanes { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.e2e-lanes > header { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.e2e-lanes > header h2 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.02em; }
.e2e-lanes > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.e2e-lanes a { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 16px; color: inherit; background: #fff; text-decoration: none; transition: background 140ms ease, transform 140ms ease; }
.e2e-lanes a:hover { z-index: 1; background: #f7f8ff; }
.e2e-lanes a > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-size: 8px; font-weight: 850; }
.e2e-lanes a strong, .e2e-lanes a small { min-width: 0; display: block; grid-column: 2; }
.e2e-lanes a strong { align-self: end; font-size: 9px; }
.e2e-lanes a small { align-self: start; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.e2e-lanes a > .icon { width: 15px; height: 15px; grid-column: 3; grid-row: 1 / 3; color: var(--accent); }
.e2e-boundary-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 14px; }
.e2e-composition-gap, .e2e-safety-boundary { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.e2e-composition-gap { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 19px; border-color: #e9bd7e; background: #fffaf2; }
.e2e-composition-gap > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #9a5c14; background: #ffedcf; }
.e2e-composition-gap > span .icon { width: 19px; height: 19px; }
.e2e-composition-gap h2, .e2e-safety-boundary h2 { margin: 4px 0 5px; font-size: 14px; letter-spacing: -.02em; }
.e2e-composition-gap p:last-child { margin: 0; color: #695c4b; font-size: 8px; line-height: 1.55; }
.e2e-composition-gap > strong { justify-self: end; padding: 7px 9px; border-radius: 999px; color: #8a500d; background: #ffe9c5; font-size: 7px; white-space: nowrap; }
.e2e-safety-boundary { padding: 19px; }
.e2e-safety-boundary ul { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.e2e-safety-boundary li { display: flex; align-items: center; gap: 7px; color: #545c69; font-size: 8px; }
.e2e-safety-boundary li .icon { width: 14px; height: 14px; padding: 2px; border-radius: 50%; color: #168653; background: #e8f7ef; }
.e2e-review-package { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.e2e-review-package > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--line); }
.e2e-review-package > header h2 { margin: 4px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.e2e-review-package > header p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.e2e-review-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 15px; align-items: start; padding: 18px; background: #f6f7f9; }
.e2e-review-decisions { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.e2e-review-decision { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgb(13 13 13 / 3%); }
.e2e-review-decision.is-approved { border-color: #afd9c0; background: #fbfefc; }
.e2e-review-decision.is-changes { border-color: #e9bd7e; background: #fffaf3; }
.e2e-review-decision > header { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.e2e-review-decision > header > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-size: 7px; font-weight: 850; }
.e2e-review-decision > header strong, .e2e-review-decision > header small { display: block; }
.e2e-review-decision > header strong { font-size: 9px; }
.e2e-review-decision > header small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.e2e-review-decision > header a { color: var(--accent); font-size: 7px; font-weight: 800; text-decoration: none; }
.e2e-review-decision > p { min-height: 48px; margin: 12px 0; color: #5f6672; font-size: 8px; line-height: 1.5; }
.e2e-review-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.e2e-review-actions button { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; color: #4f5662; background: #fff; font-size: 7px; font-weight: 800; cursor: pointer; }
.e2e-review-actions button .icon { width: 12px; height: 12px; }
.e2e-review-actions button[aria-pressed="true"][data-decision="approved"] { border-color: #8bc8a5; color: #137344; background: #edf9f2; }
.e2e-review-actions button[aria-pressed="true"][data-decision="changes"] { border-color: #e8b66f; color: #92530d; background: #fff5e7; }
.e2e-review-summary { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.e2e-review-summary h3 { margin: 4px 0 13px; font-size: 15px; letter-spacing: -.02em; }
.e2e-review-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.e2e-review-summary dl div { padding: 9px; border-radius: 9px; background: #f5f6f8; }
.e2e-review-summary dt { color: var(--muted); font-size: 7px; }
.e2e-review-summary dd { margin: 5px 0 0; font-size: 15px; font-weight: 850; }
.e2e-evidence { padding: 13px; margin-top: 12px; border-radius: 10px; background: #f7f8fa; }
.e2e-evidence > strong { font-size: 9px; }
.e2e-evidence ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.e2e-evidence li { display: flex; align-items: center; gap: 7px; color: #525965; font-size: 8px; }
.e2e-evidence li .icon { width: 14px; height: 14px; padding: 2px; border-radius: 50%; color: #168653; background: #e8f7ef; }
.e2e-memory-note { display: flex; gap: 7px; margin: 13px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.e2e-memory-note .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }

@media (max-width: 1150px) {
  .e2e-review-hero, .e2e-boundary-grid, .e2e-review-layout { grid-template-columns: 1fr; }
  .e2e-lanes > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .e2e-review-heading, .e2e-review-package > header { align-items: flex-start; flex-direction: column; }
  .e2e-review-status { align-self: flex-start; }
  .e2e-review-hero { grid-template-columns: 1fr; padding: 19px; }
  .e2e-review-metrics, .e2e-lanes > div, .e2e-review-decisions { grid-template-columns: 1fr; }
  .e2e-composition-gap { grid-template-columns: 42px minmax(0, 1fr); }
  .e2e-composition-gap > strong { grid-column: 2; justify-self: start; }
  .e2e-review-layout { padding: 11px; }
  .e2e-review-package > header .button { width: 100%; }
  .e2e-review-decision > p { min-height: 0; }
}
.dependency-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.dependency-card-grid article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line, #dfe3eb);
  border-radius: 12px;
  background: #f8f9fc;
}

.dependency-card-grid code {
  overflow: hidden;
  color: #5a6170;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dependency-card-grid { grid-template-columns: 1fr; }
}

/* Block 23C: one Configurator Builder shell around one ConfigUX Player. */
.configurator-builder-v1 { min-width: 0; display: grid; gap: 14px; }
.builder-device-switcher, .builder-mode-switcher { display: inline-flex; padding: 3px; border: 1px solid #dfe3eb; border-radius: 9px; background: #f5f6f8; }
.builder-device-switcher button, .builder-mode-switcher button, .builder-mode-switcher a, .builder-mode-switcher span { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 0; border-radius: 6px; color: #646b76; background: transparent; font-size: 8px; font-weight: 750; line-height: 1; text-decoration: none; }
.builder-device-switcher button { cursor: pointer; }
.builder-mode-switcher a, .builder-mode-switcher button { cursor: pointer; }
.builder-device-switcher button[aria-pressed="true"], .builder-mode-switcher [aria-current="page"] { color: #3047c8; background: #fff; box-shadow: 0 2px 8px rgb(13 13 13 / 8%); }
.builder-mode-switcher .is-disabled { color: #a2a7b0; cursor: not-allowed; }
.builder-player-option-connection { display: block; color: #a35b19; font-size: 8px; font-weight: 700; line-height: 1.25; }
.unified-builder-form { gap: 14px; }
.unified-builder-workspace { min-width: 0; display: grid; grid-template-columns: 220px minmax(420px, 1fr) 220px; align-items: stretch; overflow: hidden; border: 1px solid #dfe3eb; border-radius: 16px; background: #eef0f4; box-shadow: 0 12px 34px rgb(13 13 13 / 6%); }
.unified-builder-toolbox, .unified-builder-inspector { min-width: 0; padding: 15px; background: #fff; }
.unified-builder-toolbox { border-right: 1px solid #dfe3eb; }
.unified-builder-inspector { border-left: 1px solid #dfe3eb; }
.builder-panel-heading h2, .builder-panel-heading p { margin: 0; }
.builder-panel-heading h2 { margin-top: 4px; font-size: 13px; }
.builder-panel-heading > p:last-child { margin-top: 5px; color: #737b87; font-size: 8px; line-height: 1.45; }
.unified-builder-toolbox ul { display: grid; gap: 7px; margin: 15px 0 0; padding: 0; list-style: none; }
.unified-builder-toolbox li button { width: 100%; min-height: 56px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #dfe3eb; border-radius: 9px; color: #333842; background: #fff; text-align: left; cursor: pointer; }
.unified-builder-toolbox li button:hover, .unified-builder-toolbox li button:focus-visible { border-color: #9eabf6; background: #f7f8ff; outline: 0; }
.unified-builder-toolbox li button > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #394fd6; background: #eef1ff; font-size: 8px; font-weight: 850; }
.unified-builder-toolbox li button strong, .unified-builder-toolbox li button small { display: block; }
.unified-builder-toolbox li button strong { font-size: 8px; }
.unified-builder-toolbox li button small { margin-top: 3px; color: #7b828d; font-size: 7px; }
.unified-builder-toolbox li button em { color: #69717d; font-size: 6px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.builder-toolbox-note { display: flex; align-items: flex-start; gap: 7px; padding: 10px; margin-top: 15px; border-radius: 9px; color: #5e6672; background: #f5f6f8; }
.builder-toolbox-note .icon { width: 14px; height: 14px; flex: 0 0 auto; color: #4f6bff; }
.builder-toolbox-note strong, .builder-toolbox-note small { display: block; font-size: 7px; }
.builder-toolbox-note small { margin-top: 3px; color: #818893; line-height: 1.4; }
.unified-builder-canvas { min-width: 0; padding: 12px; background: #eef0f4; }
.unified-builder-device-frame { width: 100%; min-width: 0; margin: 0 auto; overflow: hidden; border: 1px solid #cfd4df; border-radius: 12px; background: #fff; box-shadow: 0 10px 25px rgb(13 13 13 / 7%); transition: width 180ms ease; }
.unified-builder-device-frame .builder-player { border: 0; border-radius: 0; box-shadow: none; }
.unified-builder-device-frame .builder-player > .editor-section-heading { display: none; }
.unified-builder-device-frame .builder-player-layout { height: clamp(500px, 65vh, 670px); max-height: 670px; }
.configurator-builder-v1[data-builder-device="tablet"] .unified-builder-device-frame { width: min(820px, 100%); }
.configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame { width: min(390px, 100%); }
/* Runway BYG-1: tablet and mobile frames stack like the published Player and
   share the author-adjustable model/options split (--stacked-stage). The
   grid itself is owned by the Block 23J rules further down, where the tablet
   selector joins the mobile stacking rule. */
.configurator-builder-v1[data-builder-device="mobile"] .builder-player-layout,
.configurator-builder-v1[data-builder-device="tablet"] .builder-player-layout { height: clamp(560px, 74vh, 840px); max-height: none; }
.configurator-builder-v1[data-builder-device="mobile"] .builder-player-stage,
.configurator-builder-v1[data-builder-device="tablet"] .builder-player-stage { height: auto; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
.configurator-builder-v1[data-builder-device="mobile"] .builder-player-controls,
.configurator-builder-v1[data-builder-device="tablet"] .builder-player-controls { max-height: none; min-height: 0; overflow-y: auto; }
.configurator-builder-v1[data-builder-device="mobile"] .builder-customer-zone-resizer,
.configurator-builder-v1[data-builder-device="tablet"] .builder-customer-zone-resizer { display: none; }
.builder-stacked-resizer { display: none; }
.configurator-builder-v1[data-builder-device="mobile"] .builder-stacked-resizer,
.configurator-builder-v1[data-builder-device="tablet"] .builder-stacked-resizer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--stacked-stage, 44%);
  height: 26px;
  z-index: 9;
  transform: translateY(-50%);
  cursor: row-resize;
  touch-action: none;
}
.builder-stacked-resizer > span {
  width: 52px;
  height: 6px;
  border-radius: 999px;
  background: #cfd4df;
  opacity: .85;
  box-shadow: 0 1px 4px rgb(13 13 13 / 18%);
  transition: width 120ms ease, background 120ms ease;
}
.builder-stacked-resizer:hover > span,
.builder-stacked-resizer:focus-visible > span,
.builder-stacked-resizer[data-dragging="true"] > span {
  width: 72px;
  background: var(--builder-brand-accent, #2955f3);
}
.builder-stacked-resizer:focus-visible { outline: 2px solid var(--builder-brand-focus, #1739b7); outline-offset: -2px; }
.builder-inspector-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 15px 0; }
.builder-inspector-summary div { padding: 9px; border: 1px solid #e2e5eb; border-radius: 8px; background: #f8f9fb; }
.builder-inspector-summary dt { color: #7c838e; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.builder-inspector-summary dd { margin: 4px 0 0; font-size: 10px; font-weight: 850; }
.unified-builder-inspector section { padding: 12px 0; border-top: 1px solid #e7e9ee; }
.unified-builder-inspector section h3, .unified-builder-inspector section p { margin: 0; }
.unified-builder-inspector section h3 { margin-top: 4px; font-size: 10px; }
.unified-builder-inspector section > p:last-child { margin-top: 5px; color: #757c87; font-size: 7px; line-height: 1.5; }
.builder-authoring-sections { display: grid; gap: 17px; }
.configurator-builder-v1[data-builder-mode="preview"] .unified-builder-workspace { display: block; border-color: transparent; background: transparent; box-shadow: none; }
.configurator-builder-v1[data-builder-mode="preview"] [data-builder-chrome] { display: none !important; }
.configurator-builder-v1[data-builder-mode="preview"] .unified-builder-canvas { padding: 0; background: transparent; }
.configurator-builder-v1[data-builder-mode="preview"] .unified-builder-device-frame { border-radius: 14px; }
.configurator-builder-v1[data-builder-mode="preview"][data-builder-device="desktop"] .unified-builder-device-frame { width: 100%; }
.configurator-builder-v1[data-builder-mode="preview"][data-builder-device="tablet"] .unified-builder-device-frame { width: min(820px, 100%); }
.configurator-builder-v1[data-builder-mode="preview"][data-builder-device="mobile"] .unified-builder-device-frame { width: min(390px, 100%); }

@media (max-width: 1260px) {
  .unified-builder-workspace { grid-template-columns: 195px minmax(380px, 1fr) 195px; }
  .builder-device-switcher button { padding: 0 7px; }
}

@media (max-width: 1080px) {
  .unified-builder-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .unified-builder-inspector { display: none; }
}

@media (max-width: 760px) {
  .builder-device-switcher { grid-column: 1 / -1; }
  .builder-device-switcher button { flex: 1; }
  .unified-builder-workspace { grid-template-columns: 1fr; }
  .unified-builder-toolbox { border-right: 0; border-bottom: 1px solid #dfe3eb; }
  .unified-builder-toolbox nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unified-builder-toolbox li button { grid-template-columns: 26px minmax(0, 1fr); }
  .unified-builder-toolbox li button em { display: none; }
  .configurator-builder-v1[data-builder-mode="preview"] .builder-device-switcher { display: none; }
}

@media (max-width: 520px) {
  .builder-device-switcher { grid-column: auto; }
  .unified-builder-toolbox nav ul { grid-template-columns: 1fr; }
  .unified-builder-device-frame .builder-player-stage { height: 360px; }
}

/* Block 23C-R: viewport-bound Builder with contextual tools and stable Player sizing. */
.studio-shell[data-builder-active="true"] { height: 100dvh; min-height: 0; overflow: hidden; }
.studio-shell[data-builder-active="true"] .studio-column { height: 100dvh; min-height: 0; overflow: hidden; }
.studio-shell[data-builder-active="true"] .topbar { flex: 0 0 68px; }
.studio-shell[data-builder-active="true"] .studio-main { width: 100%; max-width: none; min-height: 0; flex: 1; padding: 12px; overflow: hidden; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1 { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 0; }
.studio-shell[data-builder-active="true"] .unified-builder-form { min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-form { grid-template-rows: minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .unified-builder-workspace { height: 100%; min-height: 0; grid-template-columns: 250px minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .builder-authoring-sections,
.studio-shell[data-builder-active="true"] .editor-sticky-actions { display: none; }

.unified-builder-toolbox { min-height: 0; display: flex; flex-direction: column; padding: 13px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.builder-context-heading h2, .builder-context-heading p { margin: 0; }
.builder-context-heading h2 { margin-top: 4px; font-size: 13px; }
.builder-context-heading > p:last-child { margin-top: 5px; color: #737b87; font-size: 8px; line-height: 1.45; }
.builder-context-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 11px 0; margin-top: 10px; border-top: 1px solid #e7e9ee; border-bottom: 1px solid #e7e9ee; }
.builder-context-tabs button { min-height: 31px; padding: 0 5px; border: 1px solid transparent; border-radius: 7px; color: #69717d; background: #f5f6f8; font-size: 7px; font-weight: 780; cursor: pointer; }
.builder-context-tabs button[aria-selected="true"] { border-color: #aab5f4; color: #2d43be; background: #eef1ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 7%); }
.builder-context-content { flex: 1; min-width: 0; min-height: 0; padding-top: 13px; }
.builder-context-content section[hidden] { display: none; }
.builder-context-content h3, .builder-context-content p { margin: 0; }
.builder-context-content h3 { margin-top: 4px; font-size: 12px; }
.builder-context-content section > p:last-child { margin-top: 11px; color: #747c88; font-size: 8px; line-height: 1.5; }
.builder-context-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; }
.builder-context-summary div { padding: 9px; border: 1px solid #e2e5eb; border-radius: 8px; background: #f8f9fb; }
.builder-context-summary dt { color: #7c838e; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.builder-context-summary dd { margin: 4px 0 0; font-size: 10px; font-weight: 850; }
.builder-element-list, .builder-surface-list { display: grid; gap: 6px; margin-top: 12px; }
.builder-element-list button, .builder-surface-list button, .builder-context-action { width: 100%; min-height: 47px; display: grid; gap: 3px; align-content: center; padding: 8px 10px; border: 1px solid #dfe3eb; border-radius: 8px; color: #3f4650; background: #fff; text-align: left; }
.builder-element-list button:disabled { color: #626a76; background: #f8f9fb; opacity: 1; }
.builder-element-list strong, .builder-element-list small, .builder-surface-list strong, .builder-surface-list small { display: block; }
.builder-element-list strong, .builder-surface-list strong { font-size: 8px; }
.builder-element-list small, .builder-surface-list small { color: #7b838f; font-size: 7px; }
.builder-surface-list button, .builder-context-action { cursor: pointer; }
.builder-surface-list button[aria-current="true"], .builder-context-action[aria-current="true"] { border-color: #9eabf6; color: #2e43bb; background: #f2f4ff; }
.builder-context-action { display: block; min-height: 36px; margin-top: 12px; text-align: center; font-size: 8px; font-weight: 780; }
.unified-builder-toolbox .builder-toolbox-note { margin-top: 13px; }
.builder-product-panel { display: grid; gap: 14px; }
.builder-product-panel label { display: grid; gap: 5px; margin-top: 9px; color: #4e5662; font-size: 7px; font-weight: 760; }
.builder-product-panel input[type="text"], .builder-product-panel select { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #dfe3eb; border-radius: 7px; color: #1f242c; background: #fff; font-size: 8px; }
.builder-product-structure { display: grid; gap: 10px; padding-top: 13px; border-top: 1px solid #e7e9ee; }
.builder-product-summary { display: grid; gap: 3px; }
.builder-product-summary strong { font-size: 9px; }
.builder-product-summary span { color: #747c88; font-size: 7px; }
.builder-trade-rules { display: grid; gap: 10px; padding: 13px; border: 1px solid #dfe4ed; border-radius: 12px; background: #f8fafc; }
.builder-trade-rules > div { display: flex; align-items: center; gap: 8px; }
.builder-trade-rules h4 { margin: 0; font-size: 10px; }
.builder-trade-rules .eyebrow { width: 100%; margin: 0; }
.builder-trade-rules > p { margin: 0; color: #657085; font-size: 7px; line-height: 1.55; }
.builder-trade-rules dl { display: grid; gap: 7px; margin: 0; }
.builder-trade-rules dl > div { display: grid; grid-template-columns: minmax(70px, .3fr) minmax(0, 1fr); gap: 8px; padding-top: 7px; border-top: 1px solid #e4e8ef; }
.builder-trade-rules dt { font-size: 8px; font-weight: 700; }
.builder-trade-rules dd { min-width: 0; margin: 0; }
.builder-trade-rules code, .builder-trade-rules dd span { display: block; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.builder-trade-rules code { color: #43506a; }
.builder-trade-rules dd span { margin-top: 3px; color: #7b8495; }
.builder-product-step { display: grid; gap: 9px; padding-top: 11px; border-top: 1px solid #dfe3eb; }
.builder-product-group { min-width: 0; display: block; padding: 10px 0 0; margin: 0; border: 0; border-top: 1px solid #e7e9ee; }
.builder-product-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: 7px; color: #2f3540; background: #fff; cursor: pointer; list-style: none; }
.builder-product-group > summary::-webkit-details-marker { display: none; }
.builder-product-group > summary > span { min-width: 0; display: grid; gap: 2px; }
.builder-product-group > summary small, .builder-product-group > summary em { color: #747c88; font-size: 6px; font-style: normal; }
.builder-product-group > summary strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.builder-product-group > summary b { flex: 0 0 auto; color: #466152; font-size: 6px; }
.builder-product-group.is-conditional > summary { background: #f3f4f6; }
.builder-product-group.is-inactive-variant > summary { color: #69717c; }
.builder-product-group.is-inactive-variant > summary b { color: #8a6a36; }
.builder-product-group-body { display: grid; gap: 8px; padding: 8px; }
.builder-product-options { display: grid; gap: 8px; }
.builder-product-option { min-width: 0; padding: 9px 0 0; border-top: 1px solid #edf0f4; }
.builder-product-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.builder-product-toolbar > strong, .builder-product-toolbar > span { font-size: 7px; }
.builder-product-panel .builder-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.builder-product-panel .builder-order-actions button { min-height: 23px; padding: 0 5px; border: 1px solid #dfe3eb; border-radius: 5px; color: #59616c; background: #fff; font-size: 6px; cursor: pointer; }
.builder-product-panel .builder-order-actions button:disabled { opacity: .4; cursor: default; }
.builder-product-panel .builder-order-actions .builder-remove { color: #a33a31; }
.builder-product-panel .availability-toggle { grid-template-columns: auto 1fr; align-items: center; }
.builder-product-panel .availability-toggle input { margin: 0; }
.builder-option-mapping-note { margin: 7px 0 0; color: #747c88; font-size: 6px; line-height: 1.45; }
.builder-context-add { width: 100%; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px dashed #b8c0cd; border-radius: 7px; color: #344ac5; background: #fafbff; font-size: 7px; font-weight: 780; cursor: pointer; }
.builder-context-add .icon { width: 12px; height: 12px; }
.builder-viewer-panel { min-width: 0; display: grid; gap: 11px; }
.builder-viewer-panel > h3,
.builder-viewer-panel > p { margin: 0; }
.builder-viewer-panel > h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-viewer-panel > p:not(.eyebrow):not(.builder-viewer-source):not(.builder-viewer-reconciliation) { color: #747c88; font-size: 8px; line-height: 1.5; }
.builder-viewer-panel .local-glb-picker { min-width: 0; grid-column: auto; display: grid; gap: 6px; margin-top: 2px; }
.builder-viewer-panel .local-glb-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.builder-viewer-panel .local-glb-picker .button { width: 100%; min-width: 0; min-height: 34px; justify-content: center; white-space: normal; }
.builder-viewer-panel .local-glb-picker small { min-width: 0; overflow-wrap: anywhere; color: #747c88; font-size: 7px; line-height: 1.45; }
.builder-viewer-source { display: flex; align-items: center; gap: 6px; color: #3f664f; font-size: 7px; font-weight: 760; }
.builder-viewer-source .icon { width: 12px; height: 12px; }
.builder-viewer-reconciliation { padding-top: 10px; border-top: 1px solid #e7e9ee; color: #875a1c; font-size: 7px; line-height: 1.45; }

.studio-shell[data-builder-active="true"] .unified-builder-canvas { min-height: 0; display: flex; flex-direction: column; padding: 10px; overflow: hidden; }
.studio-shell[data-builder-active="true"] .unified-builder-device-frame { height: 100%; min-height: 0; flex: 1; }
.studio-shell[data-builder-active="true"] .unified-builder-device-frame .builder-player,
.studio-shell[data-builder-active="true"] .unified-builder-device-frame .builder-player-layout { height: 100%; min-height: 0; max-height: none; }
.builder-player-stage { contain: none; }
.builder-player-stage model-viewer { position: absolute; inset: 0; contain: none; pointer-events: auto; }
.builder-player-stage-status { pointer-events: none; }
.builder-player-stage[aria-current="true"], .builder-player-controls[aria-current="true"] { box-shadow: inset 0 0 0 2px #4f6bff; }
.builder-player-controls { position: relative; }
.builder-surface-edit { position: absolute; z-index: 4; top: 12px; right: 12px; min-height: 28px; padding: 0 9px; border: 1px solid #ccd3f8; border-radius: 7px; color: #3047c8; background: rgb(255 255 255 / 92%); box-shadow: 0 4px 12px rgb(13 13 13 / 8%); font-size: 7px; font-weight: 780; cursor: pointer; }
.builder-player-controls > .builder-surface-edit { position: static; align-self: flex-end; flex: 0 0 auto; margin-bottom: -4px; }

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .unified-builder-device-frame { width: min(820px, 100%); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame { width: min(390px, 100%); }
/* Runway BYG-1: the stacked mobile/tablet grid is owned by the shared rule
   further down (search for --stacked-stage); this legacy override only kept
   fighting it and is deliberately gone. */
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player-controls { max-height: none; overflow-y: auto; }

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-workspace { height: 100%; display: block; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-canvas { height: 100%; padding: 0; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-device-frame { height: 100%; }

@media (max-width: 1080px) {
  .studio-shell[data-builder-active="true"] .unified-builder-workspace { grid-template-columns: 225px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .studio-shell[data-builder-active="true"] { display: block; }
  .studio-shell[data-builder-active="true"] .topbar { flex-basis: 68px; }
  .sidebar-collapse-button { display: none; }
}

@media (max-width: 760px) {
  .studio-shell[data-builder-active="true"] .studio-main { padding: 8px; }
  .studio-shell[data-builder-active="true"] .configurator-builder-v1 { grid-template-rows: minmax(0, 1fr); }
  .studio-shell[data-builder-active="true"] .unified-builder-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 36dvh) minmax(0, 1fr); }
  .studio-shell[data-builder-active="true"] .unified-builder-toolbox { border-right: 0; border-bottom: 1px solid #dfe3eb; }
}

/* Block 23C-R2: one compact Builder top bar and direct canvas start. */
.builder-topbar { padding: 0 14px; background: #fff; backdrop-filter: none; }
.builder-topbar-title { min-width: 0; flex: 1; gap: 8px; }
.builder-topbar-title > div { min-width: 120px; max-width: 320px; flex: 1; }
.builder-configurator-name { width: 100%; min-width: 0; height: 31px; padding: 2px 7px; border: 1px solid transparent; border-radius: 7px; color: #16191f; background: transparent; font: inherit; font-size: 17px; font-weight: 820; letter-spacing: -.025em; text-overflow: ellipsis; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.builder-configurator-name:hover { border-color: #dfe3eb; background: #f8f9fb; }
.builder-configurator-name:focus { border-color: #9eabf6; outline: 0; background: #fff; box-shadow: 0 0 0 3px rgb(79 107 255 / 12%); }
.builder-draft-status { display: flex; align-items: center; gap: 5px; padding-left: 8px; margin-top: 1px; color: #6d7480; font-size: 10px; }
.builder-draft-status span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #1f9d61; }
.builder-draft-status[data-state="updating"] span, .builder-draft-status[data-state="saving"] span { background: #4f6bff; }
.builder-draft-status[data-state="unsaved"] span, .builder-draft-status[data-state="recovered"] span { background: #b86b00; }
.builder-draft-status[data-state="session_only"] { display: flex; color: #a52a21; }
.builder-draft-status[data-state="session_only"] span { background: currentColor; }
.builder-draft-status[data-state="conflict"] { color: #9b2c20; font-weight: 700; }
.builder-draft-status[data-state="conflict"] span { background: #b42318; }
.builder-conflict-reload { margin: 1px 0 0 8px; padding: 0; border: 0; color: #3047c8; background: transparent; font: inherit; font-size: 10px; font-weight: 750; text-decoration: underline; cursor: pointer; }
.builder-topbar-actions { flex: 0 0 auto; gap: 8px; }
.builder-topbar-actions > .button { min-height: 38px; padding: 0 16px; }
.studio-shell[data-builder-active="true"] .unified-builder-canvas { padding: 8px; }

@media (max-width: 760px) {
  .builder-topbar { gap: 7px; padding: 0 8px; }
  .builder-topbar-title { gap: 3px; }
  .builder-topbar-title > div { min-width: 92px; }
  .builder-configurator-name { height: 28px; padding-inline: 4px; font-size: 13px; }
  .builder-draft-status { display: none; }
  .builder-topbar-actions { min-width: 0; gap: 4px; }
  .builder-topbar-actions .builder-device-switcher { display: none; }
  .builder-topbar-actions > .button { min-height: 34px; padding: 0 10px; }
}

/* Block 23C-R3: one flat Builder surface with separators instead of nested cards. */
.studio-shell[data-builder-active="true"] .studio-main {
  padding: 0;
  background: #fff;
}
.studio-shell[data-builder-active="true"] .unified-builder-workspace {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.studio-shell[data-builder-active="true"] .unified-builder-toolbox {
  border-right: 1px solid #dfe3eb;
  background: #fff;
}
.studio-shell[data-builder-active="true"] .unified-builder-canvas {
  padding: 0;
  background: #fff;
}
.studio-shell[data-builder-active="true"] .unified-builder-device-frame,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-device-frame {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.studio-shell[data-builder-active="true"] .unified-builder-device-frame .builder-player {
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.studio-shell[data-builder-active="true"] .builder-player-stage[aria-current="true"],
.studio-shell[data-builder-active="true"] .builder-player-controls[aria-current="true"] {
  box-shadow: none;
}
.studio-shell[data-builder-active="true"] [data-builder-surface-region][aria-current="true"] { box-shadow: none; }
.studio-shell[data-builder-active="true"] [data-builder-surface-region]:focus-visible { z-index: 5; outline: 3px solid color-mix(in srgb, var(--builder-brand-focus, #1739b7) 72%, white); outline-offset: -3px; }
.studio-shell[data-builder-active="true"] .builder-layout-placement:focus-visible { outline: 3px solid color-mix(in srgb, var(--builder-brand-focus, #1739b7) 72%, white); outline-offset: 3px; }
.studio-shell[data-builder-active="true"] .unified-builder-toolbox .builder-toolbox-note {
  padding: 12px 0 0;
  border-top: 1px solid #e7e9ee;
  border-radius: 0;
  background: transparent;
}
.studio-shell[data-builder-active="true"] .builder-context-summary div {
  padding: 9px 0;
  border: 0;
  border-top: 1px solid #e7e9ee;
  border-radius: 0;
  background: transparent;
}

/* Block 23H: cautious local automapping review. */
.builder-automapping-entry { display: grid; gap: 7px; padding-top: 11px; border-top: 1px solid #e7e9ee; }
.builder-automapping-entry > strong { font-size: 8px; }
.builder-automapping-entry > span { color: #747c88; font-size: 7px; line-height: 1.45; }
.builder-automapping-entry > div { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-automapping-entry .button { min-height: 31px; padding: 0 9px; font-size: 7px; }
.builder-folder-automapping-entry { display: grid; gap: 8px; padding-top: 11px; border-top: 1px solid #e7e9ee; }
.builder-folder-automapping-entry > strong { font-size: 8px; }
.builder-folder-automapping-entry > span, .builder-folder-automapping-entry > small { color: #747c88; font-size: 7px; line-height: 1.45; }
.builder-folder-automapping-entry [data-builder-folder-automapping-controls] { display: grid; gap: 7px; }
.builder-folder-automapping-entry label { display: grid; gap: 4px; font-size: 7px; }
.builder-folder-automapping-entry select { width: 100%; min-width: 0; min-height: 31px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; font-size: 8px; }
.builder-folder-automapping-entry .availability-toggle { display: flex; align-items: center; gap: 6px; }
.builder-folder-automapping-entry .button { min-height: 31px; padding: 0 9px; font-size: 7px; }
.builder-automapping-dialog { width: min(780px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 1px solid #dfe3eb; border-radius: 12px; color: #20242b; background: #fff; box-shadow: 0 22px 70px rgb(16 22 40 / 22%); }
.builder-automapping-dialog::backdrop { background: rgb(13 18 31 / 48%); }
.builder-automapping-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid #e7e9ee; }
.builder-automapping-dialog-heading h2, .builder-automapping-dialog-heading p { margin: 0; }
.builder-automapping-dialog-heading h2 { margin-top: 4px; font-size: 20px; }
.builder-automapping-dialog-heading div > p:last-child { margin-top: 6px; color: #6f7783; font-size: 12px; line-height: 1.5; }
.builder-automapping-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e7e9ee; }
.builder-automapping-summary span { display: grid; gap: 3px; padding: 14px 20px; border-right: 1px solid #e7e9ee; color: #737b87; font-size: 10px; }
.builder-automapping-summary span:last-child { border-right: 0; }
.builder-automapping-summary strong { color: #20242b; font-size: 18px; }
.builder-option-group-suggestions { display: grid; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #dfe4f5; background: #f7f8ff; }
.builder-option-group-suggestions-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.builder-option-group-suggestions-heading h3, .builder-option-group-suggestions-heading p { margin: 0; }
.builder-option-group-suggestions-heading h3 { margin-top: 3px; font-size: 15px; }
.builder-option-group-suggestions-heading p:last-child { margin-top: 4px; color: #687181; font-size: 10px; line-height: 1.5; }
.builder-option-group-suggestions-heading > strong { min-width: 30px; min-height: 30px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: #4f68ff; font-size: 12px; }
.builder-option-group-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 10px; align-items: center; color: #596171; font-size: 10px; font-weight: 760; }
.builder-option-group-step select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #cfd6ea; border-radius: 8px; color: #20242b; background: #fff; }
.builder-option-group-suggestion-list { display: grid; gap: 7px; }
.builder-option-group-suggestion { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid #dce2f2; border-radius: 9px; background: #fff; cursor: pointer; }
.builder-option-group-suggestion:has(input:checked) { border-color: #7588ff; box-shadow: 0 0 0 2px rgb(79 104 255 / 10%); }
.builder-option-group-suggestion input { width: 17px; height: 17px; margin: 0; accent-color: #4f68ff; }
.builder-option-group-suggestion > span { min-width: 0; display: grid; gap: 2px; }
.builder-option-group-suggestion small { color: #536bd7; font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.builder-option-group-suggestion strong { font-size: 12px; }
.builder-option-group-suggestion em { overflow: hidden; color: #6f7783; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.builder-option-group-suggestion > b { color: #505a68; font-size: 9px; white-space: nowrap; }
.builder-option-group-suggestion-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.builder-option-group-suggestion-actions > span { color: #687181; font-size: 9px; line-height: 1.4; }
.builder-model-naming-report { border-bottom: 1px solid #e7e9ee; background: #f8f9fc; }
.builder-model-naming-report > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; cursor: pointer; font-size: 12px; }
.builder-model-naming-report > summary span { font-weight: 800; }
.builder-model-naming-report > summary b { color: #596171; font-size: 10px; }
.builder-model-naming-report > div { display: grid; gap: 12px; padding: 0 20px 16px; }
.builder-model-naming-report p { margin: 0; color: #596171; font-size: 11px; }
.builder-model-naming-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.builder-model-naming-report-grid section { padding: 12px; border: 1px solid #e0e4ec; border-radius: 8px; background: #fff; }
.builder-model-naming-report-grid h3 { margin: 0 0 8px; font-size: 11px; }
.builder-model-naming-report-grid ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.builder-model-naming-report-grid li { display: grid; gap: 2px; color: #687181; font-size: 10px; }
.builder-model-naming-report-grid li strong { color: #20242b; text-transform: capitalize; }
.builder-automapping-list { max-height: 500px; display: grid; gap: 0; padding: 0 20px; overflow-y: auto; }
.builder-automapping-suggestion { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid #e7e9ee; }
.builder-automapping-suggestion:last-child { border-bottom: 0; }
.builder-automapping-suggestion header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.builder-automapping-suggestion header div { display: grid; gap: 4px; }
.builder-automapping-suggestion header span { color: #7a828d; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.builder-automapping-suggestion header strong { font-size: 13px; }
.builder-automapping-suggestion header b { color: #344ac5; font-size: 12px; }
.builder-automapping-suggestion > p { margin: 0; font-size: 12px; font-weight: 720; }
.builder-automapping-suggestion ul { margin: 0; padding-left: 18px; color: #6f7783; font-size: 10px; line-height: 1.5; }
.builder-automapping-suggestion > div { display: flex; gap: 7px; }
.builder-folder-automapping-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; padding: 12px 20px; border-bottom: 1px solid #e7e9ee; background: #f8f9fc; }
.builder-folder-automapping-candidates button { display: grid; gap: 4px; padding: 10px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.builder-folder-automapping-candidates button[aria-selected="true"] { border-color: #4d68ff; box-shadow: 0 0 0 2px rgb(77 104 255 / 12%); }
.builder-folder-automapping-candidates strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.builder-folder-automapping-candidates span, .builder-folder-automapping-candidates code { color: #737b87; font-size: 9px; }
.builder-automapping-resolutions { display: grid !important; gap: 7px; padding: 9px; border: 1px solid #ead7b9; border-radius: 9px; background: #fffaf2; }
.builder-automapping-resolution { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #5c6470; font-size: 10px; }
.builder-automapping-resolution.is-previewed { padding: 7px; border: 2px solid #4f6bff; border-radius: 8px; color: #293fa8; background: #f2f4ff; }
.builder-automapping-resolution input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid #ccd2dc; border-radius: 6px; background: #fff; }
.builder-automapping-preview-status { margin: 0; color: #344ac5; font-size: 10px; font-weight: 750; }
.builder-automapping-technical { color: #6f7785; font-size: 9px; }
.builder-automapping-technical summary { min-height: 32px; display: inline-flex; align-items: center; color: #5e6878; cursor: pointer; font-weight: 700; }
.builder-automapping-technical p { margin: 5px 0; }
.builder-automapping-technical code { overflow-wrap: anywhere; }
.builder-automapping-blocked { display: block; color: #a33b35; font-size: 10px; }
.builder-folder-automapping-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid #e7e9ee; background: #fff; }
.builder-automapping-suggestion.state-review_required header b { color: #9b6420; }
.builder-automapping-suggestion.state-accepted header b { color: #24734d; }
.builder-automapping-suggestion.state-rejected { opacity: .58; }

@media (max-width: 620px) {
  .builder-automapping-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-model-naming-report-grid { grid-template-columns: 1fr; }
  .builder-automapping-summary span:nth-child(2) { border-right: 0; }
  .builder-automapping-summary span:nth-child(-n+2) { border-bottom: 1px solid #e7e9ee; }
  .builder-option-group-step { grid-template-columns: 1fr; }
  .builder-option-group-suggestion { grid-template-columns: auto minmax(0, 1fr); }
  .builder-option-group-suggestion > b { grid-column: 2; }
  .builder-option-group-suggestion-actions { align-items: stretch; flex-direction: column; }
  .builder-option-group-suggestion-actions .button { width: 100%; }
}

/* Block 23J: controlled standalone layout zones around the same Player. */
.studio-shell[data-builder-active="true"] .builder-player-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--left-size)) minmax(0, 1fr) minmax(0, var(--right-size));
  grid-template-rows: minmax(0, var(--top-size)) minmax(0, 1fr) minmax(0, var(--bottom-size));
  grid-template-areas:
    "top top top"
    "left viewer right"
    "bottom bottom bottom";
  overflow: hidden;
  background: #fff;
}
.studio-shell[data-builder-active="true"] .builder-player-layout[data-reveal-viewer-background="true"] { background: var(--builder-viewer-stage-background, var(--builder-brand-viewer, #fff)); }
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar { container-name: builder-option-zone; container-type: inline-size; }
.builder-layout-zone { min-width: 0; min-height: 0; position: relative; box-sizing: border-box; }
.builder-layout-zone[data-zone-enabled="false"] { display: none; }
.builder-layout-zone.zone-top-bar { grid-area: top; display: flex; align-items: flex-start; gap: 0; padding: 9px 13px; overflow: auto; border-bottom: 1px solid #e2e5eb; }
.builder-layout-zone.zone-left-sidebar { grid-area: left; border-right: 1px solid #e2e5eb; }
.builder-layout-zone.zone-viewer { grid-area: viewer; border: 0; }
.builder-layout-zone.zone-right-sidebar { grid-area: right; border-left: 1px solid #e2e5eb; }
.builder-layout-zone.zone-bottom-bar { grid-area: bottom; display: flex; align-items: flex-start; gap: 0; padding: 9px 13px; overflow: auto; border-top: 1px solid #e2e5eb; }
.builder-viewer-overlay { position: absolute; z-index: 3; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none; }
.builder-viewer-overlay[data-zone-enabled="false"] { display: none; }
.builder-viewer-overlay .builder-layout-placement, .builder-viewer-overlay .builder-overlay-inline-control { pointer-events: auto; }
/* Runway BYG-14: four corner clusters - hidden targets that light up while dragging. */
.builder-overlay-corner { display: flex; flex-direction: column; gap: 8px; padding: 15px; min-width: 0; min-height: 0; border-radius: 10px; }
.builder-overlay-corner[data-zone-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; }
.builder-overlay-corner.corner-top-left { align-items: flex-start; justify-content: flex-start; }
.builder-overlay-corner.corner-top-right { align-items: flex-end; justify-content: flex-start; }
.builder-overlay-corner.corner-bottom-left { align-items: flex-start; justify-content: flex-end; }
.builder-overlay-corner.corner-bottom-right { align-items: flex-end; justify-content: flex-end; }
.builder-overlay-corner[data-zone-orientation="horizontal"].corner-top-left { align-items: flex-start; }
.builder-overlay-corner[data-zone-orientation="horizontal"].corner-top-right { justify-content: flex-end; align-items: flex-start; }
.builder-overlay-corner[data-zone-orientation="horizontal"].corner-bottom-left { align-items: flex-end; justify-content: flex-start; }
.builder-overlay-corner[data-zone-orientation="horizontal"].corner-bottom-right { align-items: flex-end; justify-content: flex-end; }
.builder-overlay-corner.is-drop-ready { pointer-events: auto; box-shadow: inset 0 0 0 2px rgb(79 107 255 / 30%); background: rgb(79 107 255 / 4%); }
.builder-overlay-corner.is-drop-over { box-shadow: inset 0 0 0 2px rgb(79 107 255 / 75%); background: rgb(79 107 255 / 10%); }
/* Runway BYG-14: author-chosen element flow per customer area. */
.builder-layout-zone.zone-left-sidebar[data-zone-orientation="horizontal"] .builder-player-controls, .builder-layout-zone.zone-right-sidebar[data-zone-orientation="horizontal"] .builder-player-controls { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.builder-layout-zone.zone-left-sidebar[data-zone-orientation="horizontal"], .builder-layout-zone.zone-right-sidebar[data-zone-orientation="horizontal"] { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px; overflow-y: auto; }
.builder-layout-zone.zone-top-bar[data-zone-orientation="vertical"], .builder-layout-zone.zone-bottom-bar[data-zone-orientation="vertical"] { flex-direction: column; align-items: stretch; overflow-y: auto; }
.builder-layout-placement { min-width: 0; position: relative; cursor: pointer; }
.builder-layout-placement.is-selected { outline: 2px solid color-mix(in srgb, var(--builder-brand-focus, #1739b7) 32%, transparent); outline-offset: 3px; }
.studio-shell[data-builder-active="true"] .builder-layout-placement:has(.option-group):is(.is-selected, :focus-visible) {
  border-radius: 12px;
  outline: 2px solid color-mix(in srgb, var(--builder-brand-focus, #1739b7) 42%, transparent);
  outline-offset: 4px;
}
[data-builder-mode="edit"] .builder-layout-placement:is(.is-selected, :focus-visible) .option-group {
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-builder-mode="edit"] .builder-player-option.is-editing,
[data-builder-mode="edit"] .builder-player-dropdown.is-editing {
  border-color: #4f63ee !important;
  box-shadow: inset 0 0 0 1px #4f63ee !important;
  outline: none !important;
}
.builder-player-controls .builder-layout-placement + .builder-layout-placement { padding-top: 13px; border-top: 1px solid #e7e9ee; }
.builder-layout-option-group .builder-player-group { margin: 0; }
.builder-layout-heading, .builder-layout-text { margin: 0; }
.builder-layout-heading { font-size: 17px; letter-spacing: -.02em; }
.builder-layout-text { color: #68717d; font-size: 9px; line-height: 1.5; }
.builder-layout-image { min-height: 48px; display: flex; align-items: center; gap: 8px; color: #69717d; font-size: 8px; }
.builder-layout-image { width: var(--image-width, 100%); }
.configurator-builder-v1[data-builder-device="mobile"] .builder-layout-image { width: var(--image-width-mobile, var(--image-width, 100%)); }
.builder-layout-image[data-alignment="start"] { margin-inline: 0 auto; }
.builder-layout-image[data-alignment="center"] { margin-inline: auto; }
.builder-layout-image[data-alignment="end"] { margin-inline: auto 0; }
.builder-layout-image img[data-fit="cover"] { width: 100%; object-fit: cover; }
.builder-layout-image .icon { width: 18px; height: 18px; }
/* Runway BYG-13: hydrated image elements show the real image and hide the placeholder. */
.builder-layout-image img.builder-layout-image-render { display: none; max-width: 100%; max-height: 140px; border-radius: 8px; object-fit: contain; }
.builder-layout-image.has-image { min-height: 0; }
.builder-layout-image.has-image img.builder-layout-image-render { display: block; }
.builder-layout-image.has-image > .icon, .builder-layout-image.has-image > span { display: none; }
.builder-element-image-editor { display: grid; gap: 8px; margin-top: 10px; }
.builder-element-image-preview { display: flex; align-items: center; justify-content: center; min-height: 84px; border: 1px dashed #ccd3dc; border-radius: 10px; background: #f7f8fa; color: #8a919c; overflow: hidden; }
.builder-element-image-preview .icon { width: 22px; height: 22px; }
.builder-element-image-preview img { display: none; max-width: 100%; max-height: 140px; object-fit: contain; }
.builder-element-image-preview.has-image { border-style: solid; background: #fff; }
.builder-element-image-preview.has-image img { display: block; }
.builder-element-image-upload { display: grid; gap: 6px; }
.builder-element-image-upload > span { font-size: 11px; font-weight: 600; color: #3c434d; }
.builder-element-image-upload input[type="file"] { font-size: 11px; }
.builder-element-image-editor > small { color: #8a919c; font-size: 10px; }
.builder-image-presentation { display: grid; gap: 10px; margin: 10px 0 0; padding: 12px; border: 1px solid #e1e5ec; border-radius: 10px; }
.builder-image-presentation legend { padding: 0 5px; font-size: 11px; font-weight: 700; }
.builder-layout-zone-controls { display: grid; gap: 9px; margin-top: 12px; padding: 11px; border: 1px solid #e1e5ec; border-radius: 10px; }
.builder-layout-zone-controls legend { padding: 0 5px; font-size: 11px; font-weight: 700; }
.builder-layout-zone[data-zone-composition="one_panel"] { margin: 8px; border: 1px solid var(--builder-brand-border, #d7dce5); border-radius: var(--builder-brand-radius-large, 16px); background: var(--builder-brand-surface-muted, #f4f6f8); }
.builder-layout-zone[data-zone-composition="floating_controls"] { background: transparent; border-color: transparent; }
.builder-asset-reuse { width: 100%; justify-content: center; margin-top: 8px; }
.builder-asset-picker-dialog { width: min(860px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 1px solid #dfe3eb; border-radius: 14px; color: #20242b; background: #fff; box-shadow: 0 24px 80px rgb(16 22 40 / 25%); }
.builder-asset-picker-dialog::backdrop { background: rgb(13 18 31 / 52%); backdrop-filter: blur(3px); }
.builder-asset-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #e7e9ee; }
.builder-asset-picker-heading h2, .builder-asset-picker-heading p { margin: 0; }
.builder-asset-picker-heading h2 { margin-top: 4px; font-size: 22px; letter-spacing: -.025em; }
.builder-asset-picker-heading div > p:last-child { max-width: 620px; margin-top: 7px; color: #6f7783; font-size: 11px; line-height: 1.5; }
.builder-asset-picker-error { display: flex; align-items: flex-start; gap: 9px; padding: 12px 24px; border-bottom: 1px solid #f0caca; color: #8d2929; background: #fff5f5; font-size: 11px; line-height: 1.45; }
.builder-asset-picker-error .icon { flex: 0 0 auto; width: 16px; height: 16px; }
.builder-asset-picker-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 24px; border-bottom: 1px solid #e7e9ee; }
.builder-asset-picker-filters label { min-width: 0; display: grid; gap: 6px; color: #4c5561; font-size: 10px; font-weight: 700; }
.builder-asset-picker-filters input, .builder-asset-picker-filters select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 0 11px; border: 1px solid #ccd3dc; border-radius: 9px; color: #20242b; background: #fff; font: inherit; font-weight: 500; text-overflow: ellipsis; }
.builder-asset-picker-filters input:focus, .builder-asset-picker-filters select:focus { border-color: #4f6bff; outline: 0; box-shadow: 0 0 0 3px rgb(79 107 255 / 14%); }
.builder-asset-picker-results { min-width: 0; max-height: min(430px, 45dvh); display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 16px 24px; overflow-y: auto; overflow-x: hidden; }
.builder-asset-picker-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 13px; border: 1px solid #dfe3eb; border-radius: 11px; background: #fff; }
.builder-asset-picker-card[hidden] { display: none; }
.builder-asset-picker-kind { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #3349c4; background: #eef1ff; }
.builder-asset-picker-kind .icon { width: 20px; height: 20px; }
.builder-asset-picker-card > div { min-width: 0; display: grid; gap: 3px; }
.builder-asset-picker-card strong, .builder-asset-picker-card small, .builder-asset-picker-card code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-asset-picker-card strong { font-size: 12px; }
.builder-asset-picker-card small { color: #727b87; font-size: 10px; }
.builder-asset-picker-card code { color: #7e8793; font-size: 9px; }
.builder-asset-picker-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 24px 16px; font-size: 11px; color: #4c5561; }
.builder-asset-picker-pagination > div { display: flex; align-items: center; gap: 10px; }
.builder-asset-picker-pagination .button { min-height: 32px; padding: 5px 10px; }
.builder-asset-picker-dialog > [data-builder-asset-picker-content] { min-width: 0; }
.builder-asset-picker-empty, .builder-asset-picker-no-match { margin: 0; padding: 34px 20px; text-align: center; color: #707986; }
.builder-asset-picker-empty { display: grid; justify-items: center; gap: 7px; }
.builder-asset-picker-empty .icon { width: 24px; height: 24px; }
.builder-asset-picker-empty strong { color: #252b34; font-size: 13px; }
.builder-asset-picker-empty p { max-width: 420px; margin: 0; font-size: 10px; line-height: 1.5; }
.builder-asset-picker-no-match { font-size: 11px; }
.builder-asset-picker-no-match[hidden] { display: none; }
.builder-asset-picker-dialog .dialog-actions { display: flex; justify-content: flex-end; padding: 14px 24px 18px; border-top: 1px solid #e7e9ee; }
@media (max-width: 620px) {
  .builder-asset-picker-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .builder-asset-picker-heading, .builder-asset-picker-filters, .builder-asset-picker-results { padding-inline: 16px; }
  .builder-asset-picker-filters { grid-template-columns: 1fr; }
  .builder-asset-picker-card { grid-template-columns: 38px minmax(0, 1fr); }
  .builder-asset-picker-card > .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .builder-asset-picker-dialog .dialog-actions { padding-inline: 16px; }
}
.builder-layout-price { min-width: 180px; margin-top: 0; }
.builder-layout-price:has(> strong:only-child) { justify-content: flex-end; }
.builder-layout-primary-action, .builder-layout-reset { width: 100%; min-height: 38px; justify-content: center; }
.builder-layout-lead-form { display: grid; gap: 7px; padding: 10px; border: 1px solid #dce2e7; border-radius: 10px; background: #fff; color: #20252d; font-size: 9px; }
.builder-layout-lead-form > span { min-height: 30px; padding: 8px; border: 1px solid #dce2e7; border-radius: 7px; color: #68717d; }
.builder-layout-lead-form label { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.builder-layout-lead-form input { margin: 0; }
.zone-top-bar .builder-layout-placement, .zone-bottom-bar .builder-layout-placement { flex: 0 0 var(--placement-basis, 100%); padding-inline: 9px; }
.zone-top-bar .builder-layout-price, .zone-bottom-bar .builder-layout-price { padding-top: 0; border-top: 0; }
.builder-layout-zone.is-drop-ready, .builder-viewer-overlay.is-drop-ready { background-image: linear-gradient(rgb(79 107 255 / 5%), rgb(79 107 255 / 5%)); box-shadow: inset 0 0 0 2px rgb(79 107 255 / 35%); }
.builder-layout-zone.is-drop-over, .builder-viewer-overlay.is-drop-over { background-image: linear-gradient(rgb(79 107 255 / 10%), rgb(79 107 255 / 10%)); box-shadow: inset 0 0 0 3px rgb(79 107 255 / 62%); }
.builder-layout-zone[aria-current="true"], .builder-viewer-overlay[aria-current="true"] { box-shadow: inset 0 0 0 2px rgb(79 107 255 / 20%); }

@container (max-width: 360px) {
  .builder-player-group,
  .builder-player-group--color_swatches { grid-template-columns: minmax(0, 1fr); }
  .builder-player-group button { min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .builder-layout-price { min-width: 0; }
}
.builder-layout-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 11px; }
.builder-layout-presets button { min-height: 34px; padding: 5px; border: 1px solid #dfe3eb; border-radius: 7px; color: #4b5360; background: #fff; font-size: 7px; font-weight: 740; cursor: pointer; }
.builder-layout-zones { display: grid; gap: 5px; margin-top: 12px; }
.builder-layout-zone-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 5px; }
.builder-layout-zone-control > button:first-child { min-width: 0; display: grid; gap: 2px; padding: 8px; border: 1px solid #e1e4ea; border-radius: 7px; color: #434a55; background: #fff; text-align: left; cursor: pointer; }
.builder-layout-zone-control > button:first-child[aria-current="true"] { border-color: #9eabf6; color: #2f45c0; background: #f4f6ff; }
.builder-layout-zone-control strong { font-size: 8px; }
.builder-layout-zone-control small { color: #7b838f; font-size: 6px; }
.builder-layout-zone-control > span, .builder-zone-toggle { min-width: 45px; display: grid; place-items: center; padding: 0 5px; border: 1px solid #e1e4ea; border-radius: 7px; color: #69717d; background: #f7f8fa; font-size: 6px; font-weight: 800; }
.builder-zone-toggle { cursor: pointer; }
.builder-zone-toggle[aria-pressed="true"] { border-color: #aab5f4; color: #3047c8; background: #eef1ff; }
.builder-layout-selected { display: grid; gap: 4px; padding-top: 12px; margin-top: 12px; border-top: 1px solid #e7e9ee; }
.builder-layout-selected > strong { font-size: 9px; }
.builder-layout-selected > small { color: #7b838f; font-size: 7px; line-height: 1.4; }
.builder-layout-selected ol { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.builder-layout-selected li { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 7px 0; border-top: 1px solid #edf0f4; }
.builder-layout-selected li > span:first-child { min-width: 0; display: grid; gap: 2px; }
.builder-layout-selected li strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.builder-layout-selected li small { color: #818893; font-size: 6px; }
.builder-layout-selected li.is-empty { color: #818893; font-size: 7px; }
.builder-layout-placement-actions { flex: 0 0 auto; display: flex; gap: 2px; }
.builder-layout-placement-actions button { width: 22px; height: 22px; border: 1px solid #dfe3eb; border-radius: 5px; color: #59616c; background: #fff; font-size: 8px; cursor: pointer; }
.builder-layout-placement-actions button:disabled { opacity: .35; cursor: default; }

@media (pointer: coarse) {
  .builder-device-switcher button,
  .builder-mode-switcher a,
  .builder-context-tabs button,
  .builder-layout-placement-actions button,
  .builder-history-button,
  .builder-save-split-caret,
  .builder-toolbox-collapse,
  .builder-viewer-control-button,
  .topbar .mobile-menu-button,
  .topbar .top-create,
  .topbar .global-search { min-width: 44px; min-height: 44px; }
}

/* Block 23-R4F F2: compact, collapsible and directly resizable Builder tools. */
.studio-shell[data-builder-active="true"] .unified-builder-workspace {
  grid-template-columns: var(--builder-toolbox-width, 220px) 8px minmax(0, 1fr);
}
.builder-toolbox-resizer {
  position: relative;
  z-index: 6;
  min-width: 8px;
  cursor: col-resize;
  touch-action: none;
  background: #fff;
}
.builder-toolbox-resizer::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  background: #dfe3eb;
  transition: background 120ms ease, inset 120ms ease;
}
.builder-toolbox-resizer:hover::after,
.builder-toolbox-resizer:focus-visible::after,
.builder-toolbox-resizer[data-dragging="true"]::after {
  inset-inline: 2px;
  background: #4f6bff;
}
.builder-toolbox-resizer:focus-visible { outline: 0; }
.builder-context-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.builder-context-heading > div { min-width: 0; }
.builder-toolbox-collapse {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dfe3eb;
  border-radius: 7px;
  color: #59616c;
  background: #fff;
  cursor: pointer;
}
.builder-toolbox-collapse .icon { width: 13px; height: 13px; transform: rotate(180deg); }
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .unified-builder-toolbox { padding: 10px 8px; overflow: hidden; }
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .builder-context-heading > div,
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .builder-context-tabs,
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .builder-context-content { display: none; }
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .builder-context-heading { justify-content: center; }
.configurator-builder-v1[data-builder-toolbox-collapsed="true"] .builder-toolbox-collapse .icon { transform: none; }
.configurator-builder-v1[data-builder-mode="preview"] .builder-toolbox-resizer { display: none; }

@media (max-width: 760px) {
  .studio-shell[data-builder-active="true"] .unified-builder-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 36dvh) minmax(0, 1fr);
  }
  .builder-toolbox-resizer { display: none; }
}

/* Block 23-R4F F3: direct left/right customer Sidebar resizing. */
.studio-shell[data-builder-active="true"] .builder-player-layout { position: relative; }
.builder-customer-zone-resizer {
  position: absolute;
  z-index: 8;
  touch-action: none;
}
.builder-customer-zone-resizer::before {
  /* Runway BYG-1: a visible full-length track so the drag target is
     discoverable next to the greedy model-viewer - misses used to become
     camera orbits with no hint of why. */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: transparent;
  transition: background 120ms ease;
}
.builder-customer-zone-resizer::after {
  content: "";
  position: absolute;
  background: #cfd4df;
  border-radius: 999px;
  opacity: .58;
  transition: width 120ms ease, height 120ms ease, background 120ms ease, opacity 120ms ease;
}
.builder-customer-zone-resizer:hover::after,
.builder-customer-zone-resizer:focus-visible::after,
.builder-customer-zone-resizer[data-dragging="true"]::after {
  opacity: 1;
  background: var(--builder-brand-accent, #2955f3);
}
.builder-customer-zone-resizer:focus-visible {
  outline: 2px solid var(--builder-brand-focus, #1739b7);
  outline-offset: -2px;
}
.builder-customer-zone-resizer.edge-left-sidebar,
.builder-customer-zone-resizer.edge-right-sidebar {
  top: var(--top-size);
  bottom: var(--bottom-size);
  width: 28px;
  cursor: col-resize;
  transform: translateX(-50%);
}
.builder-customer-zone-resizer.edge-left-sidebar::before,
.builder-customer-zone-resizer.edge-right-sidebar::before {
  width: 2px;
}
.builder-customer-zone-resizer.edge-left-sidebar:hover::before,
.builder-customer-zone-resizer.edge-right-sidebar:hover::before,
.builder-customer-zone-resizer.edge-left-sidebar[data-dragging="true"]::before,
.builder-customer-zone-resizer.edge-right-sidebar[data-dragging="true"]::before {
  background: rgb(41 85 243 / 35%);
}
.builder-customer-zone-resizer.edge-left-sidebar::after,
.builder-customer-zone-resizer.edge-right-sidebar::after {
  top: 50%;
  left: 50%;
  width: 5px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.builder-customer-zone-resizer.edge-left-sidebar:hover::after,
.builder-customer-zone-resizer.edge-right-sidebar:hover::after,
.builder-customer-zone-resizer.edge-left-sidebar[data-dragging="true"]::after,
.builder-customer-zone-resizer.edge-right-sidebar[data-dragging="true"]::after {
  height: 64px;
}
.builder-customer-zone-resizer.edge-top-bar,
.builder-customer-zone-resizer.edge-bottom-bar {
  left: 0;
  right: 0;
  height: 18px;
  cursor: row-resize;
  transform: translateY(-50%);
}
.builder-customer-zone-resizer.edge-top-bar::after,
.builder-customer-zone-resizer.edge-bottom-bar::after {
  top: 7px;
  left: 50%;
  width: 44px;
  height: 4px;
  transform: translateX(-50%);
}
.builder-customer-zone-resizer:hover::after,
.builder-customer-zone-resizer:focus-visible::after,
.builder-customer-zone-resizer[data-dragging="true"]::after {
  background: #4f6bff;
  opacity: 1;
}
.builder-customer-zone-resizer.edge-left-sidebar:hover::after,
.builder-customer-zone-resizer.edge-left-sidebar:focus-visible::after,
.builder-customer-zone-resizer.edge-left-sidebar[data-dragging="true"]::after,
.builder-customer-zone-resizer.edge-right-sidebar:hover::after,
.builder-customer-zone-resizer.edge-right-sidebar:focus-visible::after,
.builder-customer-zone-resizer.edge-right-sidebar[data-dragging="true"]::after {
  left: 6px;
  width: 6px;
}
.builder-customer-zone-resizer.edge-top-bar:hover::after,
.builder-customer-zone-resizer.edge-top-bar:focus-visible::after,
.builder-customer-zone-resizer.edge-top-bar[data-dragging="true"]::after,
.builder-customer-zone-resizer.edge-bottom-bar:hover::after,
.builder-customer-zone-resizer.edge-bottom-bar:focus-visible::after,
.builder-customer-zone-resizer.edge-bottom-bar[data-dragging="true"]::after {
  top: 6px;
  height: 6px;
}
.builder-customer-zone-resizer:focus-visible { outline: 0; }
.builder-customer-zone-resizer.edge-left-sidebar { left: var(--left-size); }
.builder-customer-zone-resizer.edge-right-sidebar { left: calc(100% - var(--right-size)); }
.builder-customer-zone-resizer.edge-top-bar { top: var(--top-size); }
.builder-customer-zone-resizer.edge-bottom-bar { top: calc(100% - var(--bottom-size)); }
.builder-placement-resizer {
  position: absolute;
  z-index: 9;
  top: 0;
  right: -9px;
  bottom: 0;
  width: 18px;
  cursor: col-resize;
  touch-action: none;
}
.builder-placement-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  width: 4px;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #cfd4df;
  opacity: .58;
  transition: background-color .12s ease, left .12s ease, opacity .12s ease, width .12s ease;
}
.builder-placement-resizer:hover::after,
.builder-placement-resizer:focus-visible::after,
.builder-placement-resizer[data-dragging="true"]::after {
  left: 6px;
  width: 6px;
  background: #4f6bff;
  opacity: 1;
}
.builder-placement-resizer:focus-visible { outline: 0; }
.configurator-builder-v1[data-builder-mode="preview"] .builder-customer-zone-resizer { display: none; }
.configurator-builder-v1[data-builder-mode="preview"] .builder-placement-resizer { display: none; }

@media (max-width: 760px) {
  .builder-customer-zone-resizer, .builder-placement-resizer { display: none; }
}
.builder-element-list-heading { padding-top: 7px; color: #7a828d; font-size: 6px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.builder-element-list button:not(:disabled) { cursor: pointer; }
.builder-element-list button[draggable="true"] { cursor: grab; }
.builder-element-list button[draggable="true"]:active { cursor: grabbing; }
.builder-element-list button.is-pointer-dragging,
.builder-layout-placement.is-pointer-dragging,
.builder-surface-list li.is-pointer-dragging { cursor: grabbing; opacity: .58; }
.builder-element-editor { display: grid; gap: 10px; }
.builder-element-back { justify-self: start; padding: 0; border: 0; color: #3047c8; background: transparent; font-size: 7px; font-weight: 800; cursor: pointer; }
.builder-element-editor > p { margin: 0; color: #737b87; font-size: 7px; line-height: 1.45; }
.builder-element-editor > label { display: grid; gap: 5px; color: #59616c; font-size: 7px; font-weight: 760; }
.builder-element-editor input { width: 100%; min-height: 35px; padding: 7px 8px; border: 1px solid #dfe3eb; border-radius: 7px; color: #252a32; background: #fff; font: inherit; }
.builder-element-bound-note { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid #e7e9ee; border-bottom: 1px solid #e7e9ee; }
.builder-element-bound-note strong { font-size: 8px; }
.builder-element-bound-note span { color: #737b87; font-size: 7px; line-height: 1.45; }
.builder-element-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.builder-element-editor-actions button { min-height: 34px; border: 1px solid #dfe3eb; border-radius: 7px; color: #4e5662; background: #fff; font-size: 7px; font-weight: 760; cursor: pointer; }
.builder-element-editor-actions button.is-danger { color: #a43b36; }

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player-layout,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-player-layout {
  /* Runway BYG-1: tablet joins the stacked mobile flow, and the viewer row
     follows the author-adjustable split instead of a fixed fraction. The
     right row takes the leftover space because the standard presets put the
     customer controls there; a left-sidebar preset still stacks, just
     content-sized. */
  height: clamp(560px, 74vh, 840px);
  min-height: 0;
  max-height: none;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, var(--top-size)) minmax(180px, var(--stacked-stage, 44%)) auto minmax(0, 1fr) minmax(0, var(--bottom-size));
  grid-template-areas: "top" "viewer" "left" "right" "bottom";
}

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-layout-zone[data-zone-enabled="false"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-layout-zone[data-zone-enabled="false"] {
  /* Stacked frames collapse disabled zones so no empty band separates the
     stage from the options; desktop keeps them as drop targets. */
  display: none;
}

.builder-empty-viewer {
  min-width: 0;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: #68717d;
  text-align: center;
  background: #f7f8fa;
}
.builder-empty-viewer .icon { width: 34px; height: 34px; color: #4f6bff; }
.builder-empty-viewer strong { color: #252a32; font-size: 13px; }
.builder-empty-viewer span { max-width: 280px; font-size: 9px; line-height: 1.5; }
.builder-empty-setup { min-height: 100%; display: grid; place-items: center; padding: 28px; border: 1px dashed #cfd5df; color: #68717d; background: #f7f8fa; text-align: center; }
.builder-empty-setup > div { display: grid; max-width: 420px; justify-items: center; gap: 8px; }
.builder-empty-setup .icon { width: 42px; height: 42px; color: #4f6bff; }
.builder-empty-setup h2, .builder-empty-setup p { margin: 0; }
.builder-empty-setup h2 { color: #252a32; font-size: 19px; }
.builder-empty-setup p:not(.eyebrow) { font-size: 10px; line-height: 1.55; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player-controls { max-height: none; border: 0; border-top: 1px solid #e2e5eb; }

/* Block 23K: exact local Brand Profile editing around the same Player. */
.builder-brand-panel { display: grid; gap: 11px; }
.builder-brand-panel > label, .builder-brand-advanced label, .builder-brand-labels label { display: grid; gap: 5px; color: #59616c; font-size: 7px; font-weight: 760; }
.builder-brand-panel input, .builder-brand-panel select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #dfe3eb; border-radius: 7px; color: #252a32; background: #fff; font: inherit; }
.builder-brand-revision { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 0; border-top: 1px solid #e7e9ee; border-bottom: 1px solid #e7e9ee; font-size: 7px; }
.builder-brand-revision span { color: #24734d; font-weight: 800; }
.builder-brand-revision code { color: #727a86; font-size: 6px; }
.builder-brand-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.builder-brand-presets button { min-height: 32px; border: 1px solid #dfe3eb; border-radius: 7px; color: #4e5662; background: #fff; font-size: 7px; font-weight: 760; cursor: pointer; }
.builder-brand-presets button[aria-pressed="true"] { border-color: #9eabf6; color: #3047c8; background: #eef1ff; }
.builder-brand-colors { display: grid; gap: 0; border-top: 1px solid #e7e9ee; }
.builder-brand-color { padding: 7px 0; border-bottom: 1px solid #edf0f4; }
.builder-brand-color > span:last-child { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 7px; }
.builder-brand-color input[type="color"] { min-height: 28px; padding: 2px; }
.builder-brand-color code { color: #727a86; font-size: 7px; }
.builder-brand-advanced { border-top: 1px solid #e7e9ee; }
.builder-brand-advanced summary { padding: 10px 0; color: #38404b; font-size: 8px; font-weight: 800; cursor: pointer; }
.builder-brand-advanced[open] { display: grid; gap: 10px; }
.builder-brand-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.builder-brand-labels { display: grid; gap: 10px; padding-top: 8px; border-top: 1px solid #edf0f4; }
.builder-brand-labels fieldset { display: grid; gap: 7px; padding: 0; border: 0; }
.builder-brand-labels legend { margin-bottom: 2px; font-size: 7px; font-weight: 850; }
.builder-brand-save { width: 100%; justify-content: center; }

.builder-player-layout {
  color: var(--builder-brand-text, #11131a);
  background: var(--builder-brand-surface, #fff);
  font-family: system-ui, sans-serif;
  font-size: calc(1em * var(--builder-brand-text-scale, 1));
}
.builder-player-stage { background: var(--builder-viewer-stage-background, var(--builder-brand-viewer, #fff)); }
.builder-player-controls, .builder-layout-zone.zone-top-bar, .builder-layout-zone.zone-bottom-bar { color: var(--builder-brand-text, #11131a); background: var(--builder-brand-surface, #fff); }
.builder-player-group legend, .builder-layout-text, .builder-player-total span { color: var(--builder-brand-text-muted, #4a5260); }
.builder-player-group button { border-color: var(--builder-brand-border, #bec5ce); color: var(--builder-brand-text, #11131a); background: var(--builder-brand-surface-muted, #e8eceb); }
.builder-player-group button[aria-pressed="true"] { border-color: var(--builder-brand-accent, #2955f3); color: var(--builder-brand-text, #11131a); background: var(--builder-brand-surface, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--builder-brand-focus, #1739b7) 16%, transparent); }
.builder-player-layout[data-card-shadow="soft"] .option-group--shadow-brand button,
.option-group--shadow-soft button { box-shadow: 0 4px 14px rgb(15 23 42 / 8%); }
.builder-player-layout[data-card-shadow="none"] .option-group--shadow-brand button,
.option-group--shadow-none button { box-shadow: none; }
.builder-player-layout[data-panel-style="outlined"] .builder-layout-zone[data-zone-composition="integrated"] { border: 1px solid var(--builder-brand-border, #bec5ce); }
.builder-player-layout[data-panel-style="elevated"] .builder-layout-zone[data-zone-composition="integrated"] { box-shadow: 0 10px 28px rgb(15 23 42 / 10%); }
.builder-player-group button:focus-visible { outline-color: var(--builder-brand-focus, #1739b7); }
.builder-layout-primary-action { border-color: var(--builder-brand-accent, #2955f3); color: var(--builder-brand-accent-contrast, #fff); background: var(--builder-brand-accent, #2955f3); }

/* Block 29S-2: quota states + portable export */
.storage-banner.quota-warning .storage-meter i b { background: #b98900; }
.storage-banner.quota-exceeded .storage-meter i b { background: #b42318; }
.storage-meter i b.quota-fill-1 { width: 10%; }
.storage-meter i b.quota-fill-2 { width: 20%; }
.storage-meter i b.quota-fill-3 { width: 30%; }
.storage-meter i b.quota-fill-4 { width: 40%; }
.storage-meter i b.quota-fill-5 { width: 50%; }
.storage-meter i b.quota-fill-6 { width: 60%; }
.storage-meter i b.quota-fill-7 { width: 70%; }
.storage-meter i b.quota-fill-8 { width: 80%; }
.storage-meter i b.quota-fill-9 { width: 90%; }
.storage-meter i b.quota-fill-10 { width: 100%; }
.export-snapshot { width: 100%; font: 12px/1.5 ui-monospace, monospace; color: #33405c; background: #f7f8fc; border: 1px solid #dfe4ee; border-radius: 10px; padding: 10px; resize: vertical; }

/* Task P1: login page and session card */
.login-page { min-height: 100vh; display: grid; place-items: center; background: #0f1428; padding: 24px; }
.login-panel { max-width: 380px; width: 100%; background: #fff; border-radius: 14px; padding: 28px; display: grid; gap: 12px; }
.login-panel h1 { font-size: 20px; color: #17203a; }
.login-panel p { color: #5b6780; font-size: 13px; }
.login-panel form { display: grid; gap: 10px; }
.login-panel input { padding: 10px 12px; border: 1px solid #dfe4ee; border-radius: 10px; font: inherit; }
.profile-session { grid-template-columns: 32px minmax(0, 1fr) auto; }

/* Task P3: plan cards and simulated state controls */
.membership-plan-panel { padding: 18px; }
.billing-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.billing-plan-heading h2 { margin: 0; font-size: 15px; }
.billing-plan-heading > span { padding: 4px 8px; border-radius: 999px; color: #5f6878; background: #f1f3f6; font-size: 9px; font-weight: 750; }
.billing-plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.billing-plan-card { min-width: 0; border: 1px solid #dfe4ee; border-radius: 10px; padding: 12px; display: grid; grid-template-rows: auto auto minmax(32px, auto) minmax(20px, auto) minmax(20px, auto) auto; gap: 6px; }
.billing-plan-card.is-current { border-color: #2f6f4f; background: #f2f8f4; }
.billing-plan-card em { color: #2f6f4f; font-style: normal; font-size: 12px; }
.billing-plan-card small { color: #697384; font-size: 11px; line-height: 1.45; }
.billing-plan-card .button { align-self: end; justify-content: center; width: 100%; margin-top: 5px; }
.billing-adjust-link { justify-self: center; border: 0; padding: 2px 4px 0; color: #304bd0; background: transparent; font: inherit; font-size: 10px; font-weight: 760; cursor: pointer; }
.billing-adjust-link:hover { text-decoration: underline; }
.billing-capacity-panel { padding: 18px; }
.billing-capacity-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.billing-capacity-heading h2 { margin: 2px 0 4px; font-size: 19px; }
.billing-capacity-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.capacity-preview-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; background: #eef1ff; color: #3d50c7; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.billing-plan-review { border-color: #cfd7ff; box-shadow: 0 10px 32px rgba(50, 70, 145, .08); }
.billing-review-close { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid #d7ddea; border-radius: 9px; color: #566176; background: #fff; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.capacity-add-on-list { display: grid; gap: 8px; margin-top: 16px; }
.capacity-add-on-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.capacity-add-on-row > div:first-child { display: grid; gap: 2px; }
.capacity-add-on-row small { color: var(--muted); font-size: 10px; }
.capacity-stepper { display: grid; grid-template-columns: 30px 28px 30px; align-items: center; text-align: center; }
.capacity-stepper button { width: 30px; height: 30px; border: 1px solid #d7ddea; background: #fff; color: #162033; font: inherit; font-weight: 800; cursor: pointer; }
.capacity-stepper button:first-child { border-radius: 8px 0 0 8px; }
.capacity-stepper button:last-child { border-radius: 0 8px 8px 0; }
.capacity-stepper button:disabled { color: #adb4c1; background: #f3f4f6; cursor: default; }
.capacity-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 11px; border-radius: 10px; background: #111827; color: #fff; }
.capacity-total span { display: grid; gap: 2px; }
.capacity-total small { color: #cbd2df; }
.capacity-automatic { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.capacity-automatic summary { display: flex; justify-content: space-between; padding: 12px; cursor: pointer; font-weight: 760; }
.capacity-automatic summary span { color: #4153cb; }
.capacity-automatic-body { padding: 0 12px 12px; border-top: 1px solid var(--line); }
.capacity-automatic-body > p { color: var(--muted); font-size: 11px; }
.capacity-automatic-body > .button { margin-top: 10px; }
.capacity-auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.capacity-auto-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 62px; padding: 10px; text-align: left; border: 1px solid #dfe4ee; border-radius: 9px; background: #fff; cursor: pointer; }
.capacity-auto-option span { display: grid; gap: 2px; }
.capacity-auto-option small { color: var(--muted); font-size: 9px; }
.capacity-auto-option em { font-style: normal; font-size: 10px; font-weight: 800; color: #697384; }
.capacity-auto-option.is-active { border-color: #4361ee; background: #f3f5ff; }
.capacity-auto-option.is-active em { color: #304bd0; }
.capacity-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.capacity-cap-row > span { display: grid; gap: 2px; }
.capacity-cap-row small { color: var(--muted); font-size: 9px; }
.capacity-cap-row > div { display: flex; gap: 5px; }
.capacity-cap { padding: 7px 9px; border: 1px solid #dfe4ee; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.capacity-cap.is-active { border-color: #4361ee; color: #304bd0; background: #f3f5ff; }
.capacity-footnote { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.billing-review-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.capacity-notification-preview { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; color: #4f5c70; font-size: 10px; }
.capacity-notification-preview span { color: #7a8493; }
.billing-current-plan { border-color: #d5d9df; color: #687180; background: #e9ecf0; box-shadow: none; cursor: default; opacity: 1; }
.billing-secondary-details { margin-top: 12px; border-top: 1px solid #e3e7ed; }
.billing-secondary-details > summary { padding: 12px 2px 1px; color: #667085; cursor: pointer; font-size: 10px; font-weight: 750; }
.billing-secondary-body { display: grid; gap: 10px; padding: 12px 0 1px; }
.billing-secondary-body > p, .billing-secondary-body .billing-plan-line { margin: 0; color: #667085; font-size: 10px; line-height: 1.45; }
.billing-secondary-body .table-scroll { margin-top: 2px; }
.billing-service-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 15px; border: 1px solid #cad3e2; border-radius: 12px; color: #fff; background: #101a2d; }
.billing-service-card div { display: grid; gap: 4px; }
.billing-service-card small { color: #7ce4c6; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.billing-service-card strong { font-size: 15px; }
.billing-service-card p { margin: 0; color: #c5cedc; font-size: 11px; }
.billing-service-card > span { flex: 0 0 auto; padding: 8px 12px; border-radius: 999px; color: #172238; background: #fff; font-size: 11px; font-weight: 800; }
.billing-plan-note { margin: 10px 0 0; color: #697384; font-size: 11px; line-height: 1.5; }
.billing-state-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.account-management-panel, .account-lifecycle-review { padding: 18px; }
.account-management-heading h2, .account-lifecycle-review h2 { margin: 2px 0 4px; font-size: 19px; }
.account-management-heading p:not(.eyebrow), .account-lifecycle-review > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.account-management-list { display: grid; margin-top: 14px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.account-management-list > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 13px; background: #fff; }
.account-management-list > div + div { border-top: 1px solid var(--line); }
.account-management-list span { display: grid; gap: 3px; min-width: 0; }
.account-management-list small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.account-management-list .account-management-danger strong { color: #8a2f28; }
.account-data-details { margin-top: 10px; border-top: 1px solid var(--line); }
.account-data-details > summary { padding: 11px 2px 0; color: #667085; cursor: pointer; font-size: 10px; font-weight: 750; }
.account-data-details > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0 0; }
.account-data-details p { margin: 0; color: var(--muted); font-size: 10px; }
.account-lifecycle-review { border-color: #cfd7ff; box-shadow: 0 10px 32px rgba(50, 70, 145, .08); }
.account-lifecycle-review-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.account-pause-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding: 0; border: 0; }
.account-pause-options legend { margin-bottom: 7px; font-size: 10px; font-weight: 800; }
.account-pause-options button { display: grid; gap: 3px; padding: 12px; text-align: left; border: 1px solid #dfe4ee; border-radius: 9px; background: #fff; cursor: pointer; font: inherit; }
.account-pause-options button[aria-pressed="true"] { border-color: #4361ee; background: #f3f5ff; box-shadow: 0 0 0 1px #4361ee; }
.account-pause-options small { color: var(--muted); font-size: 10px; }
.account-lifecycle-warning { margin-top: 12px; padding: 10px 12px; border-radius: 9px; color: #7b352f; background: #fff2ef; font-size: 10px; }
.account-verification-row { display: grid; grid-template-columns: auto minmax(180px, 1fr); align-items: end; gap: 10px; margin-top: 14px; }
.account-verification-row label, .account-password-field { display: grid; gap: 5px; color: #526057; font-size: 10px; font-weight: 750; }
.account-verification-row input, .account-password-field input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dfe4ee; border-radius: 8px; font: inherit; }
.account-password-field { margin-top: 14px; }
.account-preview-code { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; padding: 9px 11px; border-radius: 8px; color: #345746; background: #edf7f1; font-size: 10px; }
.account-lifecycle-error { margin-top: 9px !important; color: #a53029 !important; }
.account-lifecycle-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; color: #315b46; background: #edf7f1; }
.account-lifecycle-status > div { display: grid; gap: 2px; }
.account-lifecycle-status span { font-size: 10px; }
.account-lifecycle-status.is-danger { color: #7b352f; background: #fff2ef; }
.account-lifecycle-notice { margin: 10px 0 0; color: #526057; font-size: 10px; }

@media (max-width: 760px) {
  .billing-plan-cards { grid-template-columns: 1fr; }
  .billing-plan-card { grid-template-rows: auto; }
  .billing-plan-heading { align-items: flex-start; }
  .billing-capacity-heading, .capacity-cap-row { align-items: stretch; flex-direction: column; }
  .billing-review-close { align-self: flex-end; order: -1; }
  .billing-review-actions { display: grid; grid-template-columns: 1fr; }
  .capacity-total, .capacity-auto-grid { grid-template-columns: 1fr; }
  .account-management-list > div, .account-data-details > div, .account-lifecycle-status { align-items: stretch; flex-direction: column; }
  .account-management-list .button, .account-data-details .button, .account-lifecycle-status .button { width: 100%; justify-content: center; }
  .account-pause-options, .account-verification-row { grid-template-columns: 1fr; }
}

/* Runway BYG-4: the Viewer settings section. */
.builder-viewer-settings { min-width: 0; max-width: 100%; display: grid; gap: 12px; margin-top: 20px; padding: 0; border: 0; background: transparent; }
.builder-display-profile { display: grid; gap: 2px; padding: 8px; border: 1px solid #dfe6e2; border-radius: 7px; background: #f3f7f4; color: #26322b; font-size: 8px; line-height: 1.35; }
.builder-display-profile strong { font-size: 9px; }
.builder-display-profile span { color: #66736b; }
.builder-viewer-settings label { min-width: 0; display: grid; gap: 4px; font-size: 7px; font-weight: 750; color: #526057; }
.builder-viewer-advanced input[type="text"] { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 9px; color: #20242b; background: #fff; font: inherit; box-sizing: border-box; }
.builder-viewer-settings input[type="range"] { width: 100%; accent-color: var(--builder-brand-accent, #2955f3); }
.builder-viewer-settings label span output { float: right; font-variant-numeric: tabular-nums; }
.builder-viewer-settings input[type="color"] { width: 46px; height: 28px; padding: 0; border: 1px solid #dfe3eb; border-radius: 6px; background: #fff; }
.builder-viewer-camera { display: grid; gap: 6px; }
.builder-viewer-camera[hidden], .builder-layout-placement[hidden], [data-player-buyer-input][hidden] { display: none !important; }
.builder-viewer-camera > p { margin: 0; font-size: 7px; font-weight: 750; color: #526057; }
.builder-viewer-camera > div { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-viewer-camera > div .button { min-width: 0; flex: 1 1 130px; white-space: normal; }
.builder-viewer-camera small { color: #757c87; font-size: 6.6px; }

/* Runway BYG-5: placed Player-control chips on the canvas. */
.builder-layout-control { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 9px; border: 1px solid #cbd0d6; border-radius: 10px; color: #30343a; background: rgb(255 255 255 / 96%); box-shadow: 0 3px 10px rgb(18 44 32 / 6%); cursor: pointer; }

/* Runway BYG-6: the step bar in the Builder preview. */
.builder-player-step-bar { display: grid; gap: 6px; margin-bottom: 7px; padding: 8px 9px; border: 1px solid #e1e7e3; border-radius: 9px; background: #f6f8f7; }
.builder-player-step-bar .player-step-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.builder-player-step-bar .player-step-heading strong { font-size: 8px; }
.builder-player-step-bar .player-step-heading span { color: #6a776f; font-size: 6.6px; font-weight: 750; }
.builder-player-step-bar .player-step-nav { display: flex; gap: 5px; }
.builder-player-step-bar .player-step-nav button { flex: 1; min-height: 28px; border: 1px solid #dde5df; border-radius: 7px; background: #fff; font-size: 7px; font-weight: 750; color: #29433a; cursor: pointer; }
.builder-player-step-bar .player-step-nav button:disabled { opacity: .45; cursor: default; }

/* Runway BYG-8B: buyer inputs in the Builder preview. */
.builder-player-input { grid-column: 1 / -1; }
.builder-buyer-input { display: grid; gap: 4px; font-size: 7.4px; font-weight: 750; color: #3d4b42; }
.builder-buyer-input input, .builder-buyer-input textarea { min-height: 34px; padding: 6px 9px; border: 1px solid #dde5df; border-radius: 8px; background: #fff; font: inherit; font-weight: 500; }
.builder-buyer-input textarea { width: 100%; min-height: 84px; box-sizing: border-box; resize: vertical; line-height: 1.45; }
.builder-buyer-input--yes_no { grid-template-columns: auto 1fr; align-items: center; }
.builder-buyer-input--yes_no input { min-height: 0; width: 15px; height: 15px; accent-color: var(--builder-brand-accent, #2955f3); }
.builder-buyer-input--yes_no span { order: 2; }
.builder-buyer-input small { color: #a43b36; font-weight: 650; }
.builder-buyer-input--file .buyer-file-caption { color: inherit; font-weight: 700; }
.builder-buyer-input--file .buyer-file-dropzone { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 116px; padding: 15px 12px; border: 1.5px dashed #7080ff; border-radius: 13px; background: #f1f3ff; color: #213029; text-align: center; cursor: pointer; }
.builder-buyer-input--file .buyer-file-dropzone:hover, .builder-buyer-input--file .buyer-file-dropzone:focus-within, .builder-buyer-input--file .buyer-file-dropzone.is-dragover { border-color: #4156ef; background: #e8edff; box-shadow: 0 0 0 3px rgb(79 107 255 / 14%); }
.builder-buyer-input--file .buyer-file-dropzone:has(input:disabled) { cursor: not-allowed; opacity: .72; }
.builder-buyer-input--file .buyer-file-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: inherit; }
.builder-buyer-input--file .buyer-file-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #172b20; color: #fff; font-size: 18px; font-weight: 500; line-height: 1; }
.builder-buyer-input--file .buyer-file-dropzone strong { font-size: 10px; line-height: 1.3; }
.builder-buyer-input--file .buyer-file-dropzone small { color: #687479; font-size: 8px; font-weight: 600; line-height: 1.4; }
.builder-buyer-input--file .buyer-file-list { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.builder-buyer-input--file .buyer-file-list[hidden] { display: none; }
.builder-buyer-input--file .buyer-file-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; padding: 5px 7px; border: 1px solid #dce2ee; border-radius: 7px; background: #fff; }
.builder-buyer-input--file .buyer-file-list li span { min-width: 0; overflow-wrap: anywhere; }
.builder-buyer-input--file .buyer-file-list button { flex: none; width: 23px; min-height: 23px; padding: 0; border: 0; border-radius: 5px; background: #eef1f7; color: #3b4556; font-size: 16px; line-height: 1; cursor: pointer; }
.builder-buyer-input--file .buyer-file-preview-note { display: block; padding: 6px 8px; border-radius: 6px; background: #fff1d7; color: #684418; font-size: 9px; font-weight: 700; line-height: 1.35; }
.builder-buyer-input--file .buyer-file-error:empty { display: none; }
.builder-buyer-input--file .buyer-file-error { color: #a43b36; font-size: 10px; }
.builder-file-upload-editor { min-width: 0; }
.builder-file-upload-types { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.builder-file-upload-types .builder-setting-heading { flex-basis: 100%; }
.builder-file-upload-types label { display: inline-flex; align-items: center; gap: 4px; }
.builder-file-upload-limit { display: grid; gap: 5px; }
.builder-file-upload-limit label { display: grid; gap: 4px; min-width: 0; }
.builder-file-upload-limit select { width: 100%; }

/* Runway BYG-10: one consistent control language in the Builder panels - no
   native browser look. */
.unified-builder-toolbox select,
.builder-choice-display select,
.builder-viewer-settings select {
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  -webkit-appearance: none;
  min-height: 30px;
  padding: 5px 24px 5px 9px;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  /* Chevron drawn with gradients - the built shell must stay free of any
     http URL, including SVG namespaces. */
  background:
    linear-gradient(45deg, transparent 50%, #6a776f 50%) no-repeat right 13px center / 5px 5px,
    linear-gradient(135deg, #6a776f 50%, transparent 50%) no-repeat right 8px center / 5px 5px,
    #fff;
  color: #2d3a33;
  font: inherit;
  font-size: 7.4px;
  font-weight: 650;
  cursor: pointer;
}
.unified-builder-toolbox select:focus-visible,
.builder-viewer-settings select:focus-visible {
  outline: 2px solid var(--builder-brand-accent, #2955f3);
  outline-offset: 1px;
}
.builder-viewer-settings input[type="checkbox"],
.builder-choice-display input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--builder-brand-accent, #2955f3);
}

/* Runway BYG-11: tighter toolbox typography without the intro block. */
.builder-context-heading.is-slim { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.builder-context-heading.is-slim .eyebrow { margin: 0; }

/* Runway BYG-12: revision integrity chip in the Builder topbar. */
.builder-integrity-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #e1e7e3; border-radius: 999px; color: #526057; background: #f6f8f7; font-size: 6.6px; font-weight: 750; font-variant-numeric: tabular-nums; }
.builder-integrity-chip > span { width: 6px; height: 6px; border-radius: 50%; }
.builder-integrity-chip.is-ok > span { background: #2f9d61; box-shadow: 0 0 0 2px rgb(47 157 97 / 15%); }
.builder-integrity-chip.is-warn > span { background: #d18a38; box-shadow: 0 0 0 2px rgb(209 138 56 / 15%); }

/* Runway BYG-19: option card media in the Builder's customer preview. */
.builder-player-group button .builder-player-option-image { width: 100%; max-height: 84px; object-fit: cover; border-radius: 7px; display: block; }
.builder-player-group button.has-media { flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.builder-option-image { margin-top: 8px; }

/* Runway BYG-24: many options in the customer preview. */
.builder-player-option-search { width: 100%; min-height: 30px; padding: 0 10px; border: 1px solid #ccd3dc; border-radius: 8px; font-size: 11px; }
.builder-player-group--many { max-height: 300px; overflow-y: auto; }

/* Runway BYG-25: missing image bytes banner. */
.builder-missing-images { display: flex; align-items: center; gap: 12px; margin: 8px 12px 0; padding: 9px 14px; border: 1px solid #f0d9a8; border-radius: 10px; background: #fdf6e3; color: #7a5b12; font-size: 12px; }
.builder-missing-images button { margin-left: auto; border: 1px solid #e3c778; border-radius: 8px; background: #fff; padding: 4px 12px; font-size: 11px; font-weight: 600; color: #7a5b12; cursor: pointer; }

/* Runway BYG-28: WordPress version status next to To WordPress. */
.builder-wp-status { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.builder-wp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.builder-wp-status.is-current { background: #e7f5ec; color: #14683a; }
.builder-wp-status.is-current::before { background: #1d9d57; }
.builder-wp-status.is-stale { background: #fdf3df; color: #7a5b12; }
.builder-wp-status.is-stale::before { background: #d9a23a; }

/* Runway BYG-30: undo/redo in the Builder topbar. */
[data-action="builder-undo"], [data-action="builder-redo"] { font-size: 15px; min-width: 34px; }
[data-action="builder-undo"]:disabled, [data-action="builder-redo"]:disabled { opacity: .35; cursor: default; }

/* Runway BYG-31: always-available reset-view on the Builder stage. */
.builder-stage-fit { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #d5dae2; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; color: #3c434d; cursor: pointer; box-shadow: 0 1px 4px rgb(16 24 40 / 8%); }
.builder-stage-fit:hover { border-color: #9aa4b2; }
.builder-stage-fit .icon { width: 13px; height: 13px; }

/* Q10: clear undo/redo plus deliberately separate Save and Publish actions. */
.builder-history-buttons { display: inline-flex; border: 1px solid #d5dae2; border-radius: 9px; overflow: hidden; }
.builder-history-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: 0; background: #fff; color: #3c434d; cursor: pointer; }
.builder-history-button + .builder-history-button { border-left: 1px solid #e4e8ee; }
.builder-history-button:hover:not(:disabled) { background: #f2f4f8; }
.builder-history-button:disabled { opacity: .35; cursor: default; }
.builder-history-button .icon { width: 15px; height: 15px; }
.builder-save-split { position: relative; display: inline-flex; }
.builder-save-split > .button-primary:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.builder-save-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; padding: 0 8px; min-width: 30px; }
.builder-save-split-caret .icon { width: 13px; height: 13px; }
.builder-save-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid #d5dae2; border-radius: 10px; box-shadow: 0 8px 24px rgb(16 24 40 / 12%); padding: 5px; min-width: 210px; }
.builder-save-menu :is(button, a) { display: block; box-sizing: border-box; width: 100%; text-align: left; text-decoration: none; border: 0; background: none; padding: 8px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; color: #23272f; cursor: pointer; }
.builder-save-menu :is(button, a):hover { background: #f2f4f8; }
.builder-save-menu button:disabled { color: #9198a4; cursor: default; }
.builder-save-publish-actions { display: inline-flex; align-items: center; gap: 7px; }
.builder-save-publish-actions .button { white-space: nowrap; }
.builder-primary-actions { position: relative; display: inline-flex; align-items: stretch; }
.builder-primary-actions > .button:first-child { border-radius: 9px 0 0 9px; }
.builder-primary-actions > .builder-save-menu-toggle { min-width: 34px; padding-inline: 9px; border-left-color: rgb(255 255 255 / 35%); border-radius: 0 9px 9px 0; }
.builder-primary-actions > .button:not(.button-primary) + .builder-save-menu-toggle { border-left-color: #d5dae2; }
.builder-transfer-trigger { gap: 6px; }
.builder-transfer-trigger .icon { width: 15px; height: 15px; }
.builder-transfer-dialog { width: min(760px, calc(100vw - 28px)); max-width: 760px; padding: 0; border: 0; border-radius: 16px; color: #252b36; box-shadow: 0 24px 70px #17203045; }
.builder-transfer-dialog::backdrop { background: rgb(18 24 36 / 48%); backdrop-filter: blur(2px); }
.builder-transfer-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid #e7eaf0; }
.builder-transfer-dialog h2, .builder-transfer-dialog h3, .builder-transfer-dialog p { margin: 0; }
.builder-transfer-dialog h2 { font-size: 22px; }
.builder-transfer-intro { padding: 16px 24px 0; color: #626c7b; font-size: 13px; }
.builder-transfer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 20px 24px; }
.builder-transfer-columns section { display: grid; align-content: start; gap: 9px; }
.builder-transfer-columns h3 { margin-bottom: 3px; font-size: 14px; }
.builder-transfer-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; width: 100%; padding: 13px; text-align: left; border: 1px solid #dfe4ec; border-radius: 11px; color: #273142; background: #fff; cursor: pointer; }
.builder-transfer-card:hover { border-color: #9eaaed; background: #f9faff; }
.builder-transfer-card strong { font-size: 13px; }
.builder-transfer-card span { grid-column: 1 / -1; color: #657083; font-size: 11px; line-height: 1.45; }
.builder-transfer-card small { grid-column: 2; grid-row: 1; color: #6c75a4; font-size: 10px; font-weight: 700; }
.builder-transfer-card:disabled { opacity: .5; cursor: default; }
.builder-transfer-note { padding: 14px 24px 20px; border-top: 1px solid #eceef3; color: #697385; font-size: 11px; }
.builder-toolbox-guide { padding: 10px 14px 14px; border-top: 1px solid #e7eaf0; }
.builder-toolbox-guide button { border: 0; background: transparent; padding: 5px 2px; color: #566174; font-size: 12px; font-weight: 700; cursor: pointer; }
.builder-toolbox-guide button:hover { color: #26334a; }
.builder-unpublish-button { color: #9b1c1c; border-color: #efc4c4; background: #fffafa; }
.builder-unpublish-button:hover { color: #7f1d1d; border-color: #d99a9a; background: #fff1f1; }

/* Runway BYG-39: compact element catalog and zone orientation pill. */
.builder-element-list button.is-compact { display: flex; align-items: center; gap: 9px; padding: 8px 11px; text-align: left; }
.builder-element-list button.is-compact .icon { width: 15px; height: 15px; flex: 0 0 auto; color: #5a6472; }
.builder-element-list button.is-compact strong { font-size: 12px; }
.builder-element-list button.is-compact small { margin-left: auto; font-size: 9px; color: #9aa4b2; }
.builder-zone-orientation-pill { display: none; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); z-index: 5; width: 22px; height: 22px; border: 1px solid #c9cfdb; border-radius: 7px; background: #fff; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgb(16 24 40 / 10%); }
.builder-layout-zone[aria-current="true"] .builder-zone-orientation-pill { display: block; }
.builder-layout-zone.zone-left-sidebar .builder-zone-orientation-pill, .builder-layout-zone.zone-right-sidebar .builder-zone-orientation-pill { top: 10px; right: 6px; transform: none; }
.builder-zone-orientation-pill:hover { border-color: #8d97a8; }

/* Runway BYG-40: the Builder opens fullscreen - the Studio navigation leaves
   the stage entirely while editing; the back arrow in the topbar returns. */
.studio-shell[data-builder-active="true"] { grid-template-columns: minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .sidebar { display: none; }
.builder-exit-button .icon { transform: rotate(180deg); }

/* Runway KONTO-5: trial chip and the soft trial wall. */
.konto-trial-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #c9d4f5; border-radius: 999px; color: #2743b0; background: #eef2ff; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.konto-trial-chip .icon { width: 13px; height: 13px; }
.konto-trial-chip:hover { border-color: #8fa4ea; }
.konto-trial-chip.is-overdue { color: #8a1f2d; border-color: #f0b9c0; background: #fdeef0; }
.konto-trial-wall { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgb(9 12 24 / 55%); backdrop-filter: blur(3px); }
.konto-trial-wall-card { width: min(440px, 100%); display: grid; gap: 14px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgb(9 12 24 / 30%); }
.konto-trial-wall-card h2 { font-size: 20px; }
.konto-trial-wall-card > p { color: #4b5565; font-size: 13px; }
.konto-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #dbe2ee; border-radius: 12px; background: #f7f9fd; }
.konto-plan-card small { display: block; margin-top: 2px; color: #6b7686; font-size: 11px; }
.konto-plan-price { font-size: 18px; font-weight: 800; }
.konto-plan-price small { font-size: 11px; font-weight: 600; color: #6b7686; }
.konto-trial-wall .button-ghost { border: 0; background: transparent; color: #5a6472; cursor: pointer; font-size: 12px; }
.konto-trial-wall .button-ghost:hover { color: #24272e; text-decoration: underline; }

/* Runway KONTO-7: admin fase A table. */
.konto-admin-transport { padding: 5px 10px; border: 1px solid #dbe2ee; border-radius: 999px; color: #5a6472; background: #f7f9fd; font-size: 10px; font-weight: 700; white-space: nowrap; }
.konto-admin-table-wrap { overflow-x: auto; }
.konto-admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.konto-admin-table th { padding: 9px 12px; border-bottom: 1px solid #e4e9f2; color: #6b7686; font-size: 10px; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.konto-admin-table td { padding: 11px 12px; border-bottom: 1px solid #eef1f7; vertical-align: top; }
.konto-admin-table td small { display: block; margin-top: 2px; color: #8a94a4; font-size: 10px; }
.konto-admin-state { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.konto-admin-state.is-active { color: #0c5132; background: #d9f2e4; }
.konto-admin-state.is-trialing { color: #2743b0; background: #e8edff; }
.konto-admin-state.is-ended { color: #6b7686; background: #eef1f7; }
.konto-admin-note { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: #6b7686; font-size: 11px; }
.konto-admin-note .icon { width: 13px; height: 13px; flex: 0 0 auto; }

/* NAT-4: the complete customer Account journey. */
.konto-auth-screen { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: repeat(2, minmax(0, 620px)); place-content: center; gap: 0; padding: 32px; background: #f3f5f8; }
.konto-auth-context { position: relative; min-height: min(720px, calc(100dvh - 64px)); display: grid; grid-template-rows: minmax(0, 1fr); padding: 28px; overflow: hidden; border-radius: 28px 0 0 28px; color: #fff; background: #111418; box-shadow: 0 28px 90px rgb(20 27 45 / 14%); }
.konto-auth-showcase { position: relative; min-height: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 10%); border-radius: 20px; background: #171b21; }
.konto-auth-showcase-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 64% 26%, rgb(83 107 255 / 84%), transparent 26%), radial-gradient(circle at 22% 58%, rgb(62 168 143 / 52%), transparent 31%), linear-gradient(145deg, #171d34 0%, #12151c 46%, #0c1012 100%); }
.konto-auth-showcase-scene::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; top: 8%; right: -2%; border: 1px solid rgb(255 255 255 / 18%); border-radius: 32% 68% 55% 45%; background: linear-gradient(150deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 40px 90px rgb(0 0 0 / 28%); transform: rotate(-16deg); }
.konto-auth-showcase-scene::after { content: ""; position: absolute; width: 52%; aspect-ratio: 1.3; left: -8%; bottom: 20%; border: 1px solid rgb(255 255 255 / 12%); border-radius: 28px; background: linear-gradient(135deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 1%)); transform: rotate(18deg); }
.konto-auth-showcase-scene i { position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 70%); box-shadow: 0 0 18px rgb(255 255 255 / 55%); }
.konto-auth-showcase-scene i:nth-child(1) { top: 18%; left: 17%; }
.konto-auth-showcase-scene i:nth-child(2) { top: 31%; left: 43%; width: 5px; height: 5px; opacity: .55; }
.konto-auth-showcase-scene i:nth-child(3) { top: 14%; right: 18%; width: 4px; height: 4px; opacity: .42; }
.konto-auth-showcase-scene span { position: absolute; z-index: 2; top: 24px; right: 24px; padding: 7px 10px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 999px; color: #dce4ff; background: rgb(9 12 17 / 46%); backdrop-filter: blur(12px); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.konto-auth-showcase-video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; background: transparent; }
.konto-auth-showcase-copy { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 11px; padding: 42px 34px 34px; background: linear-gradient(transparent, rgb(7 10 13 / 90%) 52%); }
.konto-auth-context .eyebrow { color: #aebcff; }
.konto-auth-context h2 { max-width: 490px; font-size: clamp(30px, 3vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
.konto-auth-showcase-copy > p:last-child { color: #aeb6c4; font-size: 13px; line-height: 1.5; }
.konto-auth-main { min-height: min(720px, calc(100dvh - 64px)); display: grid; place-items: center; padding: 48px clamp(38px, 5vw, 76px); border: 1px solid #e1e5eb; border-left: 0; border-radius: 0 28px 28px 0; background: #fff; box-shadow: 0 28px 90px rgb(20 27 45 / 14%); }
.konto-auth-card { width: 100%; max-width: 440px; min-width: 0; display: grid; gap: 17px; }
.konto-auth-card.is-chooser { align-self: start; gap: 13px; }
.konto-auth-welcome { display: grid; justify-items: start; gap: 10px; }
.konto-auth-welcome h1, .konto-auth-welcome .konto-auth-sub { margin: 0; }
.konto-auth-card.is-chooser .konto-auth-welcome { justify-items: center; gap: 10px; margin-bottom: 8px; text-align: center; }
.konto-auth-brand { min-height: 42px; display: flex; align-items: center; justify-content: center; color: #171b24; }
.konto-auth-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #315cf5; box-shadow: 0 8px 24px rgb(49 92 245 / 20%); }
.konto-auth-brand img { display: block; filter: invert(1); }
.konto-auth-card h1 { font-size: clamp(31px, 3vw, 42px); line-height: 1.04; letter-spacing: -.045em; }
.konto-auth-sub { max-width: 440px; color: #687181; font-size: 14px; line-height: 1.55; }
.konto-auth-card.is-chooser h1, .konto-auth-card.is-chooser .konto-auth-sub { text-align: center; }
.konto-auth-card.is-chooser h1 { font-size: clamp(31px, 2.5vw, 37px); }
.konto-auth-card.is-chooser .konto-auth-sub { margin-inline: auto; }
.konto-auth-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 14px; padding: 0; list-style: none; }
.konto-auth-progress li { position: relative; display: grid; justify-items: start; gap: 6px; color: #8a94a4; }
.konto-auth-progress li:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 34px; right: 8px; height: 2px; background: #e3e7ef; }
.konto-auth-progress li.is-complete:not(:last-child)::after { background: #8da0ff; }
.konto-auth-progress li span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #d6dce7; border-radius: 50%; background: #fff; font-size: 11px; font-weight: 800; z-index: 1; }
.konto-auth-progress li.is-complete span { border-color: #315cf5; color: #fff; background: #315cf5; }
.konto-auth-progress li.is-current small { color: #182044; }
.konto-auth-progress small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.konto-auth-form { display: grid; gap: 9px; margin-top: 4px; }
.konto-auth-providers { display: grid; gap: 11px; margin-top: 5px; }
.konto-auth-provider { position: relative; min-height: 56px; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 10px; width: 100%; padding: 12px 17px; border: 1px solid #d7dbe2; border-radius: 13px; color: #1c2028; background: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 750; transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.konto-auth-provider::after { content: ""; width: 28px; }
.konto-auth-provider:hover { border-color: #aeb7c5; background: #fafbfc; box-shadow: 0 8px 24px rgb(33 42 62 / 7%); transform: translateY(-1px); }
.konto-auth-provider:focus-visible { border-color: #4f6bff; outline: 3px solid rgb(79 107 255 / 18%); outline-offset: 2px; }
.konto-auth-provider:disabled { cursor: wait; opacity: .65; transform: none; }
.konto-auth-provider-mark { width: 22px; height: 22px; display: grid; place-items: center; justify-self: center; }
.konto-auth-provider-mark svg { width: 21px; height: 21px; display: block; }
.konto-auth-provider-mark.is-email { color: #1f2530; }
.konto-auth-provider > span:nth-child(2) { display: grid; gap: 2px; }
.konto-auth-provider > span:nth-child(2) small { color: #4f6bff; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.konto-auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 11px; color: #8b95a3; font-size: 10px; text-transform: uppercase; }
.konto-auth-divider::before, .konto-auth-divider::after { content: ""; height: 1px; background: #e3e7ed; }
.konto-auth-terms { width: fit-content; max-width: 100%; display: inline-flex; justify-self: center; align-items: center; justify-content: center; gap: 9px; margin-top: 2px; color: #697281; cursor: pointer; font-size: 11px; line-height: 1.5; text-align: center; }
.konto-auth-terms input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: #315cf5; }
.konto-auth-terms input:focus-visible { outline: 3px solid rgb(79 107 255 / 18%); outline-offset: 2px; }
.konto-auth-field { display: block; margin-top: 4px; font-size: 12px; font-weight: 750; color: #394251; }
.konto-onboarding-label { position: relative; display: flex; align-items: center; gap: 10px; }
.konto-onboarding-label small { margin-left: 5px; color: #8c94a0; font-weight: 400; }
.konto-onboarding-help { color: #687488; font-size: 12px; }
.konto-onboarding-help summary { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #596270; border-radius: 50%; cursor: pointer; list-style: none; }
.konto-onboarding-help summary::-webkit-details-marker { display: none; }
.konto-onboarding-help p { position: absolute; z-index: 2; right: 0; top: 22px; width: min(280px, 100%); padding: 12px; border: 1px solid #48515f; border-radius: 10px; background: #202630; color: #e3e7ee; font-size: 12px; line-height: 1.5; box-shadow: 0 8px 24px #0005; }
.konto-auth-input, .konto-auth-password input { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #c9d1de; border-radius: 10px; color: #151922; background: #fff; font: inherit; font-size: 14px; }
.konto-auth-input::placeholder { color: #9aa4b2; }
.konto-auth-input:focus-visible, .konto-auth-password input:focus-visible { border-color: #4f6bff; outline: 3px solid rgb(79 107 255 / 16%); outline-offset: 1px; }
.konto-auth-password { display: grid; grid-template-columns: 1fr auto; align-items: stretch; }
.konto-auth-password input { border-radius: 10px 0 0 10px; }
.konto-auth-password button { min-width: 64px; border: 1px solid #c9d1de; border-left: 0; border-radius: 0 10px 10px 0; color: #35435b; background: #f5f7fa; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.konto-auth-password button:hover { background: #edf1f7; }
.konto-auth-password button:focus-visible { outline: 3px solid rgb(79 107 255 / 16%); outline-offset: 1px; }
.konto-auth-field-hint { margin-top: -3px; color: #7c8797; font-size: 10px; line-height: 1.4; }
.konto-auth-primary { width: 100%; min-height: 44px; justify-content: center; margin-top: 8px; }
.konto-auth-assurance { display: flex; align-items: flex-start; gap: 7px; color: #647083; font-size: 11px; line-height: 1.45; }
.konto-auth-assurance .icon { width: 14px; height: 14px; margin-top: 1px; flex: 0 0 auto; color: #285f45; }
.konto-auth-switch, .konto-auth-forgot { color: #687181; font-size: 12px; text-align: center; }
.konto-auth-forgot { margin-top: -3px; text-align: right; }
.konto-auth-switch button, .konto-auth-switch a, .konto-auth-forgot button, .konto-auth-error button { border: 0; padding: 0; background: transparent; color: #2743b0; cursor: pointer; font: inherit; font-weight: 750; text-decoration: underline; }
.konto-auth-error { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #f0b9c0; border-radius: 10px; color: #8a1f2d; background: #fdeef0; font-size: 12px; line-height: 1.45; }
.konto-auth-error button { flex: 0 0 auto; color: #8a1f2d; }
.konto-auth-transport { padding-top: 11px; border-top: 1px solid #edf0f5; color: #7d8796; font-size: 10px; line-height: 1.5; }
.konto-auth-hint { color: #5a6472; font-size: 13px; line-height: 1.55; }
.konto-auth-mail-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #315cf5; background: #eef1ff; }
.konto-auth-mail-icon .icon { width: 23px; height: 23px; }
.konto-auth-ready { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid #bfe4cf; border-radius: 13px; background: #ecf9f1; font-size: 13px; }
.konto-auth-ready .icon { width: 22px; height: 22px; padding: 4px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #178653; stroke-width: 2.6; }
.konto-auth-ready strong { display: block; font-size: 14px; }
.konto-auth-ready small { display: block; margin-top: 4px; color: #4b5565; }
.konto-auth-ready-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.konto-auth-ready-facts div { min-width: 0; padding: 11px; border: 1px solid #e3e7ee; border-radius: 10px; background: #fafbfc; }
.konto-auth-ready-facts dt { color: #7b8595; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.konto-auth-ready-facts dd { margin: 4px 0 0; color: #283142; font-size: 11px; font-weight: 750; line-height: 1.35; }
.konto-auth-back { margin-top: 0; color: #858e9b; font-size: 11px; text-align: center; }
.konto-auth-main.is-simple-entry { position: relative; place-items: start center; padding-top: 78px; border-color: #242a31; color: #f7f8fa; background: #111418; }
.konto-auth-card.is-simple-entry { gap: 0; }
.konto-auth-card.is-simple-entry .konto-auth-welcome { justify-items: center; gap: 10px; text-align: center; }
.konto-auth-card.is-simple-entry .konto-auth-brand { margin-bottom: 6px; }
.konto-auth-card.is-simple-entry h1 { font-size: clamp(30px, 2.5vw, 35px); line-height: 1.1; }
.konto-auth-card.is-simple-entry .konto-auth-sub { color: #858b94; }
.konto-auth-card.is-simple-entry .konto-auth-form { gap: 12px; margin-top: 38px; }
.konto-auth-card.is-simple-entry .konto-auth-input,
.konto-auth-card.is-simple-entry .konto-auth-password input { min-height: 52px; padding: 14px 16px; border-color: #353c46; border-radius: 11px; color: #f7f8fa; background: #252e3b; }
.konto-auth-card.is-simple-entry .konto-auth-input::placeholder,
.konto-auth-card.is-simple-entry .konto-auth-password input::placeholder { color: #9ba4b0; opacity: 1; }
.konto-auth-card.is-simple-entry .konto-auth-password { position: relative; display: block; }
.konto-auth-card.is-simple-entry .konto-auth-password input { padding-right: 52px; }
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact { position: absolute; top: 0; right: 0; width: 52px; height: 52px; min-width: 0; display: grid; place-items: center; border: 0; border-radius: 0 11px 11px 0; color: #9ba4b0; background: transparent; }
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact:hover { color: #fff; background: transparent; }
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact .icon { width: 18px; height: 18px; }
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact .icon:last-child,
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact[aria-pressed="true"] .icon:first-of-type { display: none; }
.konto-auth-card.is-simple-entry .konto-auth-password button.is-compact[aria-pressed="true"] .icon:last-child { display: block; }
.konto-auth-card.is-simple-entry .konto-auth-primary { min-height: 52px; margin-top: 12px; border-color: #fff; color: #14171b; background: #fff; }
.konto-auth-card.is-simple-entry .konto-auth-primary:hover { border-color: #e6e9ed; background: #e6e9ed; }
.konto-auth-card.is-simple-entry .konto-auth-switch { margin-top: 18px; color: #858b94; }
.konto-auth-card.is-simple-entry .konto-auth-switch button,
.konto-auth-card.is-simple-entry .konto-auth-switch a,
.konto-auth-card.is-simple-entry .konto-auth-forgot button { color: #c7cbd1; font-weight: 500; }
.konto-auth-card.is-simple-entry .konto-auth-forgot { margin-top: 12px; }
.konto-auth-entry-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; color: #858b94; font-size: 12px; }
.konto-auth-entry-links button { padding: 0; border: 0; color: #c7cbd1; background: none; cursor: pointer; font: inherit; text-decoration: underline; }
.konto-auth-entry-links > button { color: #858b94; text-decoration: none; }
.konto-auth-entry-links button:hover { color: #fff; text-decoration: underline; }
.konto-auth-main.is-simple-entry .konto-auth-back.is-icon { position: absolute; top: 22px; left: 22px; width: 34px; height: 34px; display: grid; place-items: center; margin: 0; border: 1px solid #2f353c; border-radius: 50%; color: #c7cbd1; background: #20252b; font-size: 19px; line-height: 1; text-decoration: none; }
.konto-auth-main.is-simple-entry .konto-auth-back.is-icon:hover { color: #fff; background: #303740; }
.konto-auth-main.is-simple-entry .konto-auth-close { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #2f353c; border-radius: 50%; color: #c7cbd1; background: #20252b; text-decoration: none; }
.konto-auth-main.is-simple-entry .konto-auth-close:hover { color: #fff; background: #303740; }
.konto-auth-main.is-simple-entry .konto-auth-close .icon { width: 15px; height: 15px; }

@media (max-width: 960px) {
  .konto-auth-screen { grid-template-columns: minmax(0, 600px); padding: 24px; }
  .konto-auth-context { display: none; }
  .konto-auth-main { min-height: calc(100dvh - 48px); border: 1px solid #e0e5ee; border-radius: 24px; }
}

@media (max-width: 560px) {
  .asset-library-toolbar { grid-template-columns: 1fr; }
  .asset-library-toolbar > label { grid-column: auto; }
  .konto-auth-screen { width: 100%; max-width: 100%; display: block; overflow-x: hidden; padding: 0; background: #fff; }
  .konto-auth-main { width: 100%; max-width: 100%; min-height: 100dvh; display: block; padding: 28px 22px 40px; border: 0; border-radius: 0; box-shadow: none; }
  .konto-auth-main.is-simple-entry { padding: 82px 22px 40px; }
  .konto-auth-card { width: calc(100vw - 44px); max-width: calc(100vw - 44px); margin: 0 auto; gap: 14px; }
  .konto-auth-card h1, .konto-auth-card.is-chooser h1 { font-size: 28px; overflow-wrap: anywhere; }
  .konto-auth-provider { min-height: 54px; }
  .konto-auth-terms { width: 100%; align-items: flex-start; padding-inline: 8px; }
  .konto-auth-terms input { margin-top: 1px; }
  .konto-auth-terms span { min-width: 0; overflow-wrap: anywhere; }
  .konto-auth-ready-facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .konto-auth-provider { transition: none; }
}

/* Core Block 7: installable, version-locked ConfigUX template library. */
.template-library-page { display: grid; gap: 22px; }
.template-library-page .page-header { margin-bottom: 0; }
.template-tabs { width: fit-content; display: flex; gap: 4px; padding: 4px; border: 1px solid #dfe4ed; border-radius: 11px; background: #f5f7fa; }
.template-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; color: #637083; background: transparent; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.template-tabs button[aria-current="true"] { color: #1739a8; background: #fff; box-shadow: 0 2px 7px rgb(31 46 81 / 10%); }
.template-tabs button span { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: #e8edff; font-size: 9px; text-align: center; }
.configurator-view-toggle { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f5f7f8; }
.configurator-view-toggle button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.configurator-view-toggle button[aria-pressed="true"] { color: var(--accent-dark); background: #fff; box-shadow: 0 1px 4px rgb(20 32 55 / 12%); }
.configurator-library-tabs { align-items: center; background: var(--surface-muted, #f4f6fb); border-radius: 12px; display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 4px; }
.configurator-library-tabs button { background: transparent; border: 0; border-radius: 9px; min-height: 38px; padding: 0 14px; }
.configurator-library-tabs button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 5px rgb(17 19 26 / 10%); color: var(--text); font-weight: 750; }
.configurator-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 18px; border-top: 1px solid var(--line); }
.configurator-cover.has-cover { inset: 0; position: absolute; }
.configurator-cover.has-cover img { position: absolute; inset: 0; display: block; height: 100%; object-fit: contain; width: 100%; }
.config-thumb.has-cover { overflow: hidden; }
.config-thumb.has-cover img { height: 100%; object-fit: cover; width: 100%; }
.configurator-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.configurator-card-preview { min-height: 145px; position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; color: #31586e; background: radial-gradient(circle at 72% 20%, rgb(255 255 255 / 75%), transparent 28%), linear-gradient(145deg, #e2f1f4, #bed6df); text-decoration: none; }
.configurator-card-preview.thumb-2d { color: #9a5b2f; background: linear-gradient(145deg, #f7eee6, #e7cdb7); }
.configurator-card-preview > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: rgb(255 255 255 / 58%); box-shadow: 0 12px 24px rgb(40 64 80 / 10%); }
.configurator-card-preview > .configurator-cover.has-cover { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.configurator-card-preview .icon { width: 29px; height: 29px; }
.configurator-card-preview > small { position: absolute; right: 10px; bottom: 9px; padding: 4px 6px; border-radius: 5px; background: rgb(255 255 255 / 80%); font-size: 8px; font-weight: 850; }
.configurator-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; }
.configurator-card-body > div:first-child { min-width: 0; }
.configurator-card-body strong, .configurator-card-body small { display: block; }
.configurator-card-body > div:first-child > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.configurator-card-body > div:first-child > small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.configurator-card-progress, .configurator-card-footer { grid-column: 1 / -1; }
.configurator-card-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; color: var(--muted); font-size: 8px; }
.configurator-card-progress progress { width: 100%; }
.configurator-card-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.configurator-card-footer > time { min-width: 0; line-height: 1.4; }
.configurator-card-footer > .configurator-action-menu { grid-column: 2; justify-self: center; }
.configurator-card-footer > .configurator-connect-button { grid-column: 3; justify-self: end; }
.configurator-connect-cell { width: 1%; white-space: nowrap; }
.configurator-connect-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #cfd6e4; border-radius: 8px; color: #314fc5; background: #fff; font: inherit; font-size: 9px; font-weight: 780; cursor: pointer; white-space: nowrap; }
.configurator-connect-button:hover:not(:disabled) { border-color: #7188f5; background: #f3f5ff; }
.configurator-connect-button:focus-visible { outline: 3px solid rgb(85 112 255 / 22%); outline-offset: 2px; }
.configurator-connect-button:disabled { color: #8a94a4; background: #f4f5f7; cursor: not-allowed; }
.configurator-connect-button .icon { width: 14px; height: 14px; }
.configurator-connect-button.compact { min-height: 30px; padding: 0 8px; font-size: 8px; }
.configurator-destinations { display: grid; gap: 3px; margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.configurator-destinations > summary { align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none; }
.configurator-destinations > summary::-webkit-details-marker { display: none; }
.configurator-destinations > summary span { color: var(--muted); font-size: 9px; }
.configurator-destinations-heading { display: flex; justify-content: flex-end; margin-top: 4px; }
.configurator-destinations ul { display: grid; gap: 6px; list-style: none; margin: 5px 0 0; padding: 0; }
.configurator-destinations li { background: var(--surface-muted, #f7f8fb); border: 1px solid var(--border, #dde1ea); border-radius: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 9px; }
.configurator-destination-title { min-width: 0; display: flex; align-items: center; gap: 7px; color: #242b39; text-decoration: none; }
.configurator-destination-title > span:first-child { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: #21a366; box-shadow: 0 0 0 3px rgb(33 163 102 / 12%); }
.configurator-destination-title > span:last-child { margin-left: auto; color: #687386; font-size: 11px; }
.configurator-destination-title:hover strong { color: #315cf5; text-decoration: underline; text-underline-offset: 2px; }
.configurator-destination-title.is-disabled > span:first-child { background: #9aa3b2; box-shadow: none; }
.configurator-destinations li small { line-height: 1.35; }
.configurator-destination-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.configurator-destination-actions button { border: 0; padding: 0; background: transparent; color: var(--primary); cursor: pointer; font: inherit; }
.configurator-destination-state { align-self: center; font-size: 9px; font-weight: 750; }
.destination-current { color: #16794b; }
.destination-failed,
.destination-disconnected { color: #b42318; }
.destination-stale,
.destination-paused,
.destination-not-delivered { color: #8a5a00; }
.configurator-destination-details { grid-column: 1 / -1; border-top: 1px solid transparent; }
.configurator-destination-details[open] { margin-top: 3px; padding-top: 6px; border-color: #e2e6ec; }
.configurator-destination-details summary { width: max-content; color: #687386; cursor: pointer; font-size: 9px; font-weight: 700; list-style: none; }
.configurator-destination-details summary::-webkit-details-marker { display: none; }
.configurator-destination-details summary::after { content: "⌄"; display: inline-block; margin-left: 5px; transform-origin: center; }
.configurator-destination-details[open] summary::after { transform: rotate(180deg); }
.configurator-destination-details > div { display: grid; gap: 4px; margin-top: 6px; }
.library-section { display: grid; gap: 15px; }
.library-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.library-section-heading h2 { margin-top: 4px; font-size: 22px; }
.library-section-heading > span { color: #7b8495; font-size: 11px; }
.template-library-safety { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; border: 1px solid #ccd7ff; border-radius: 13px; background: #f3f6ff; color: #34405c; }
.template-library-safety .icon { width: 18px; height: 18px; flex: 0 0 auto; color: #315cf5; }
.template-library-safety strong, .template-library-safety span { display: block; }
.template-library-safety span { margin-top: 3px; color: #667087; font-size: 12px; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 440px)); gap: 18px; }
.template-card { overflow: hidden; border: 1px solid #dfe4ed; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(21 31 54 / 5%); }
.template-card-preview { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff; background: radial-gradient(circle at 70% 28%, #6984ff 0, #354fba 38%, #182044 100%); }
.template-card-preview span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 30%); border-radius: 16px; background: rgb(255 255 255 / 12%); }
.template-card-preview .icon { width: 30px; height: 30px; }
.template-card-preview strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.template-card-body { display: grid; gap: 12px; padding: 20px; }
.template-card-body h2 { font-size: 20px; }
.template-card-body > p { color: #667087; font-size: 13px; line-height: 1.55; }
.template-card-meta, .template-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7b8495; font-size: 11px; }
.template-card-facts { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #4f596b; font-size: 12px; }
.template-card-actions { padding-top: 4px; }
.template-card-actions .button { justify-content: center; }
.template-gate-note { padding: 10px 12px; border-radius: 9px; background: #f4f5f7; color: #697386 !important; font-size: 11px !important; }
.my-library-grid { display: grid; gap: 10px; }
.my-library-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #dfe4ed; border-radius: 13px; background: #fff; }
.my-library-card strong, .my-library-card span { display: block; }
.my-library-card strong { font-size: 13px; }
.my-library-card div > span { margin-top: 4px; color: #778194; font-size: 11px; }
.my-library-review { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(190px, 1fr) auto; align-items: end; gap: 10px 14px; padding-top: 12px; border-top: 1px solid #edf0f5; }
.my-library-review label { display: grid; gap: 6px; color: #596477; font-size: 11px; font-weight: 700; }
.my-library-review input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #cfd6e2; border-radius: 9px; color: #172033; background: #fff; font: inherit; }
.my-library-review > small { grid-column: 1 / -1; color: #778194; font-size: 10px; line-height: 1.5; }
.my-library-review-state { grid-column: 1 / -1; display: grid; justify-items: start; gap: 7px; }
.my-library-review-state small, .my-library-review-state p { margin: 0; color: #687386; font-size: 10px; line-height: 1.5; }
.my-library-review-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px dashed #ccd4e3; border-radius: 12px; background: #fafbfc; color: #596477; }
.my-library-review-note .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.my-library-review-note strong, .my-library-review-note span { display: block; }
.my-library-review-note span { margin-top: 3px; font-size: 11px; line-height: 1.45; }
@media (max-width: 720px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-card-actions { align-items: stretch; flex-direction: column; }
  .library-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .my-library-card { grid-template-columns: auto minmax(0, 1fr); }
  .my-library-card .button { grid-column: 1 / -1; }
  .my-library-review { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .my-library-review .button { grid-column: auto; }
}

/* ALPHA-E7: human review corrections. The Builder keeps its exact responsive
   CSS viewport, but the review stage now reads as a device preview instead of
   a tiny white island in an unbounded desktop canvas. */
.workspace-locked { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: #8e98a8; }
.workspace-locked .icon { width: 13px; height: 13px; }
.connector-cloud-proof { display: inline-flex; align-items: center; gap: 6px; color: #17653b; font-size: 10px; font-weight: 750; white-space: nowrap; }
.connector-cloud-proof .icon { width: 13px; height: 13px; }
.operator-template-setup { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 26px; }
.operator-template-setup h2 { margin: 4px 0 7px; }
.operator-template-setup p:not(.eyebrow) { max-width: 720px; margin: 0; color: #667085; }
.operator-template-submission { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto; gap: 18px; align-items: end; width: 100%; padding: 18px 0; border-top: 1px solid #e4e9f2; }
.operator-template-submission h3 { margin: 3px 0 5px; }
.operator-template-submission label { display: grid; gap: 6px; color: #344054; font-size: 12px; font-weight: 700; }
.operator-template-submission input { min-height: 42px; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 9px; font: inherit; font-weight: 400; }
.operator-template-submission .form-actions { display: flex; gap: 8px; }
.operator-template-upload { flex: 0 0 auto; cursor: pointer; }
.operator-template-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.operator-template-upload:focus-within .button { outline: 3px solid rgb(76 107 255 / 22%); outline-offset: 2px; }
.studio-shell[data-builder-active="true"] .unified-builder-workspace { grid-template-columns: var(--builder-toolbox-width, 304px) 8px minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .unified-builder-toolbox { padding: 16px; }
.studio-shell[data-builder-active="true"] .builder-context-tabs { gap: 8px; }
.studio-shell[data-builder-active="true"] .builder-context-tabs button { min-height: 38px; padding-inline: 9px; font-size: 9px; }
.studio-shell[data-builder-active="true"] .builder-context-content { font-size: 11px; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-canvas,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-canvas {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 42px 24px 24px;
  background: #edf1f7;
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-canvas::before,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-canvas::before {
  position: absolute;
  top: 13px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  color: #687386;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  white-space: nowrap;
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-canvas::before { content: "Tablet preview · 820 px"; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-canvas::before { content: "Mobile preview · 390 px"; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-device-frame,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-device-frame {
  flex: 0 1 auto;
  max-height: 100%;
  border: 1px solid #cbd3df;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgb(28 40 70 / 16%);
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-device-frame {
  height: calc((100% - 8px) / 1.04);
  transform: scale(1.04);
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-device-frame {
  height: calc((100% - 8px) / 1.16);
  transform: scale(1.16);
}
@media (max-width: 1100px) {
  .studio-shell[data-builder-active="true"] .unified-builder-workspace { grid-template-columns: minmax(240px, 280px) 8px minmax(0, 1fr); }
  .studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .unified-builder-device-frame,
  .studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame { transform: none; height: 100%; }
}
@media (max-width: 820px) {
  .operator-template-setup { align-items: stretch; flex-direction: column; }
  .operator-template-submission { grid-template-columns: 1fr; }
  .operator-template-upload .button { justify-content: center; width: 100%; }
}

/* NAT-5: the operator is a focused oversight product, not a second customer
   workspace. The layout stays read-only, exposes its audit boundary and turns
   the broad account table into searchable cards on narrow screens. */
.konto-admin { display: grid; gap: 18px; }
.konto-admin > .page-heading { margin-bottom: 0; }
.operator-context { min-width: 0; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid #cdd9ff; border-radius: 12px; color: #294187; background: #f4f6ff; }
.operator-context > .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.operator-context strong, .operator-context span { display: block; }
.operator-context strong { font-size: 12px; }
.operator-context span { margin-top: 2px; color: #63709a; font-size: 10px; line-height: 1.45; }
.operator-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.operator-summary article { min-width: 0; padding: 18px; border: 1px solid #e1e6ef; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgb(28 40 70 / 4%); }
.operator-summary span, .operator-summary strong, .operator-summary small { display: block; }
.operator-summary span { color: #6b7686; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.operator-summary strong { margin-top: 8px; color: #11131a; font-size: 28px; line-height: 1; letter-spacing: -.04em; }
.operator-summary small { margin-top: 7px; color: #7e8999; font-size: 10px; }
.operator-summary article.has-attention { border-color: #f0d0a1; background: #fffaf2; }
.operator-summary article.has-attention strong { color: #9a5c14; }
.operator-summary-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.operator-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: 14px; align-items: start; }
.operator-area-links { display: grid; gap: 10px; }
.operator-area-link { min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 18px; border: 1px solid #e1e6ef; border-radius: 14px; color: #222b39; background: #fff; box-shadow: 0 7px 22px rgb(28 40 70 / 4%); text-decoration: none; }
.operator-area-link:hover, .operator-area-link:focus-visible { border-color: #a9b7ff; box-shadow: 0 0 0 3px rgb(76 107 255 / 10%); }
.operator-area-link > .icon:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 11px; color: #2f5de0; background: #edf1ff; }
.operator-area-link > .icon:last-child { width: 18px; height: 18px; color: #8791a1; }
.operator-area-link span, .operator-area-link strong, .operator-area-link small, .operator-area-link em { display: block; min-width: 0; }
.operator-area-link strong { font-size: 12px; }
.operator-area-link small { margin-top: 4px; color: #758093; font-size: 10px; }
.operator-area-link em { width: fit-content; margin-top: 7px; padding: 3px 6px; border-radius: 999px; color: #4962b5; background: #eef2ff; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.operator-foundation-page { display: grid; gap: 14px; }
.operator-foundation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 14px; align-items: start; }
.operator-foundation-card { min-width: 0; padding: 22px; }
.operator-foundation-card h2 { margin: 4px 0 7px; }
.operator-foundation-card > p, .operator-foundation-heading p:last-child { margin: 0; max-width: 780px; color: #667085; font-size: 11px; line-height: 1.55; }
.operator-foundation-heading { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.operator-foundation-heading > div { min-width: 0; }
.operator-foundation-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.operator-foundation-status.is-planned { color: #735019; background: #fff2d9; }
.operator-metric-list, .operator-check-list { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.operator-metric-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid #e3e8f0; border-radius: 9px; color: #5c6879; background: #fafbfc; font-size: 10px; }
.operator-metric-list strong { color: #1c2635; font-size: 14px; }
.operator-check-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; color: #536071; font-size: 10px; line-height: 1.5; }
.operator-check-list .icon { width: 18px; height: 18px; padding: 3px; border-radius: 5px; color: #3159d7; background: #edf1ff; }
.operator-action-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.operator-action-map article { min-width: 0; padding: 15px; border: 1px solid #e1e6ef; border-radius: 11px; background: #fafbfc; }
.operator-action-map span, .operator-action-map strong, .operator-action-map small { display: block; }
.operator-action-map span { color: #6b7686; font-size: 8px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.operator-action-map strong { margin-top: 6px; color: #222b39; font-size: 11px; }
.operator-action-map small { margin-top: 5px; color: #737f90; font-size: 9px; line-height: 1.5; }
.operator-policy-list { display: grid; gap: 9px; margin-top: 18px; }
.operator-policy-list article { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(180px, .42fr); gap: 12px; align-items: center; padding: 13px; border: 1px solid #e1e6ef; border-radius: 10px; background: #fafbfc; }
.operator-policy-list article > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #3159d7; background: #edf1ff; font-size: 9px; font-weight: 800; }
.operator-policy-list strong { color: #263142; font-size: 11px; }
.operator-policy-list p { margin: 4px 0 0; color: #737f90; font-size: 9px; line-height: 1.45; }
.operator-policy-list small { color: #69758a; font-size: 9px; text-align: right; }
.operator-customers { min-width: 0; overflow: hidden; }
.operator-customers-heading { align-items: flex-start; padding: 20px 22px 16px; }
.operator-customers-heading h2 { margin: 4px 0 5px; }
.operator-customers-heading p:last-child { margin: 0; color: #687386; font-size: 11px; }
.operator-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 22px 16px; border-bottom: 1px solid #e6eaf1; }
.operator-search { min-width: 250px; display: flex; gap: 8px; align-items: center; padding: 0 12px; border: 1px solid #d7dde7; border-radius: 10px; background: #fff; }
.operator-search:focus-within { border-color: #4c6bff; box-shadow: 0 0 0 3px rgb(76 107 255 / 13%); }
.operator-search .icon { width: 15px; height: 15px; flex: 0 0 auto; color: #8993a2; }
.operator-search input { width: 100%; min-height: 40px; padding: 0; border: 0; outline: 0; font: inherit; font-size: 11px; background: transparent; }
.operator-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.operator-filters button { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 11px; border: 1px solid #dce2eb; border-radius: 9px; color: #566172; background: #fff; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.operator-filters button span { min-width: 18px; padding: 2px 5px; border-radius: 999px; color: #758093; background: #eff2f6; font-size: 9px; text-align: center; }
.operator-filters button.is-active { border-color: #a9b7ff; color: #2446d7; background: #f2f5ff; }
.operator-filters button.is-active span { color: #fff; background: #4c6bff; }
.konto-admin-table { font-size: 11px; }
.konto-admin-table th { padding: 11px 16px; background: #fafbfc; }
.konto-admin-table td { padding: 15px 16px; vertical-align: middle; }
.konto-admin-table tr:last-child td { border-bottom: 0; }
.konto-admin-table td strong { font-size: 11px; }
.konto-admin-table td small { margin-top: 4px; font-size: 9px; }
.operator-workspace-id { color: #a0a8b4 !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.operator-attention { display: block; margin-top: 5px; color: #9a5c14; font-size: 8px; font-weight: 750; }
.operator-filter-empty { display: grid; justify-items: center; gap: 5px; padding: 30px; color: #667085; text-align: center; }
.operator-filter-empty[hidden] { display: none; }
.operator-filter-empty .icon { width: 20px; height: 20px; margin-bottom: 3px; }
.operator-filter-empty strong { color: #283141; font-size: 12px; }
.operator-filter-empty span { font-size: 10px; }
.operator-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 14px; align-items: start; }
.operator-template-setup { min-width: 0; display: block; padding: 22px; }
.operator-template-setup > div:first-child p:last-child { max-width: 760px; margin: 0; color: #667085; font-size: 11px; line-height: 1.5; }
.operator-template-submission { grid-template-columns: minmax(220px, 1fr); align-items: stretch; margin-top: 17px; padding-bottom: 0; }
.operator-template-submission p { line-height: 1.5; overflow-wrap: anywhere; }
.operator-template-submission .form-actions { justify-content: flex-start; }
.operator-template-submission[hidden] { display: none; }
.operator-review-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 0; border-block: 1px solid #e6eaf1; }
.operator-review-toolbar .operator-search { flex: 1 1 260px; min-width: 0; }
.operator-review-decision { display: grid; gap: 5px; align-content: start; padding: 13px 14px; border: 1px solid #dce4ee; border-radius: 10px; background: #f8fafc; }
.operator-review-decision strong { color: #253042; font-size: 10px; }
.operator-review-decision span { color: #5f6b7d; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.operator-review-decision small { color: #8a94a3; font-size: 9px; }
.operator-template-assets { display: grid; gap: 5px; margin: 10px 0 0; padding: 9px 11px; border: 1px solid #e3e8f0; border-radius: 9px; background: #f8fafc; list-style: none; }
.operator-template-assets li { display: flex; justify-content: space-between; gap: 12px; color: #5f6b7d; font-size: 9px; }
.operator-template-assets code { overflow-wrap: anywhere; }
.operator-catalog-manager { display: grid; gap: 16px; }
.operator-catalog-summary { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 22px; border: 1px solid #dfe5ef; border-radius: 14px; background: #fff; }
.operator-catalog-summary h2 { margin: 4px 0 7px; }
.operator-catalog-summary p:not(.eyebrow) { max-width: 760px; margin: 0; color: #667085; }
.operator-catalog-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.operator-catalog-counts span { min-width: 92px; padding: 9px 11px; border: 1px solid #dfe5ef; border-radius: 10px; color: #667085; background: #f8fafc; font-size: 10px; text-align: center; }
.operator-catalog-counts strong { display: block; color: #1d2939; font-size: 17px; }
.operator-catalog-list { display: grid; gap: 14px; }
.operator-catalog-item { min-width: 0; padding: 20px 22px; border: 1px solid #dfe5ef; border-radius: 14px; background: #fff; }
.operator-catalog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.operator-catalog-heading h3 { margin: 3px 0 5px; }
.operator-catalog-heading p:not(.eyebrow) { max-width: 760px; margin: 0; color: #667085; }
.operator-catalog-source { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.operator-catalog-source div { min-width: 0; padding: 9px 10px; border-radius: 9px; background: #f8fafc; }
.operator-catalog-source dt { color: #667085; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.operator-catalog-source dd { margin: 4px 0 0; color: #1d2939; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.operator-catalog-editor { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e9f2; }
.operator-catalog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.operator-catalog-fields label, .operator-catalog-actions label { display: grid; gap: 6px; color: #344054; font-size: 10px; font-weight: 700; }
.operator-catalog-fields label.is-wide { grid-column: 1 / -1; }
.operator-catalog-fields input, .operator-catalog-fields select, .operator-catalog-fields textarea, .operator-catalog-actions input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; color: #1d2939; font: inherit; font-weight: 400; }
.operator-catalog-fields textarea { min-height: 72px; resize: vertical; }
.operator-catalog-editor .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.operator-catalog-actions { display: flex; align-items: end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e9f2; }
.operator-catalog-actions label { flex: 1 1 260px; }
.operator-catalog-terms { display: flex; flex: 1 1 420px; flex-wrap: wrap; gap: 7px; }
.operator-catalog-terms span { padding: 7px 9px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 9px; font-weight: 700; }
.operator-catalog-retired { margin: 0; color: #667085; }
.operator-template-commerce { display: grid; gap: 12px; margin-top: 16px; padding: 16px; border: 1px solid #c7d7fe; border-radius: 12px; background: #f8faff; }
.operator-template-commerce.is-included { grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-color: #b7e4cf; background: #f3fbf7; }
.operator-template-commerce h4 { margin: 3px 0 5px; }
.operator-template-commerce p { margin: 0; color: #667085; }
.operator-commerce-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.operator-commerce-mode { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #b7c8ff; border-radius: 999px; color: #3157ce; background: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.operator-test-checkout, .operator-test-checkout-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid #dfe5ef; border-radius: 10px; background: #fff; }
.operator-test-checkout { grid-template-columns: minmax(0, 1fr) auto; }
.operator-test-checkout > div:first-child { display: grid; gap: 3px; }
.operator-test-checkout span, .operator-test-checkout small { color: #667085; }
.operator-test-checkout-start label { display: grid; gap: 6px; color: #344054; font-size: 10px; font-weight: 700; }
.operator-test-checkout-start input, .operator-test-checkout-start select { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; color: #1d2939; font: inherit; font-weight: 400; }
.operator-commerce-history, .operator-commerce-empty { font-size: 10px; }
.operator-entitlement-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.operator-entitlement-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; background: #eef7f2; }
.operator-entitlement-list span { display: grid; gap: 2px; }
.operator-entitlement-list small { color: #667085; }
.operator-publication-review { display: grid; gap: 13px; margin-top: 16px; padding: 16px; border: 1px solid #d8def0; border-radius: 12px; background: #f8f9ff; }
.operator-publication-review h4 { margin: 3px 0 5px; font-size: 15px; }
.operator-publication-review p:not(.eyebrow) { margin: 0; color: #667085; }
.operator-publication-review > label, .operator-publication-final label { display: grid; gap: 6px; color: #344054; font-size: 10px; font-weight: 700; }
.operator-publication-review > label input, .operator-publication-final input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #d0d5dd; border-radius: 9px; background: #fff; color: #1d2939; font: inherit; font-weight: 400; }
.operator-publication-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.operator-publication-checks label { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; color: #344054; font-size: 10px; font-weight: 650; }
.operator-publication-checks input { width: 16px; height: 16px; margin: 0; accent-color: #4f6bff; }
.operator-publication-review .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.operator-publication-review.is-approved { border-color: #b7dfcb; background: #f2fbf6; }
.operator-publication-final { display: grid; grid-template-columns: minmax(240px, 1fr) auto; align-items: end; gap: 10px; }
.operator-local-decision-note { margin-top: 14px !important; padding: 9px 11px; border-radius: 8px; color: #6c5a31 !important; background: #fff7e8; font-size: 9px !important; }
.operator-workspace-detail { min-width: 0; padding: 16px 18px 18px; overflow: hidden; }
.operator-workspace-detail * { min-width: 0; }
.operator-detail-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.operator-detail-toggle .icon { width: 14px; height: 14px; }
.operator-detail-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.operator-detail-heading h2 { margin: 4px 0 5px; }
.operator-detail-heading p:last-child { margin: 0; color: #667085; font-size: 10px; }
.operator-detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.operator-detail-facts article { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid #e1e6ef; border-radius: 10px; background: #fafbfc; }
.operator-detail-facts .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: #5267d8; }
.operator-detail-facts span, .operator-detail-facts strong, .operator-detail-facts small { display: block; }
.operator-detail-facts span { color: #7a8494; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.operator-detail-facts strong { margin-top: 3px; color: #1a2230; font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.operator-detail-facts small { margin-top: 5px; color: #717d8d; font-size: 9px; line-height: 1.45; }
.operator-account-controls { display: grid; gap: 10px; margin-top: 10px; }
.operator-detail-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.operator-detail-primary-actions .button { max-width: 100%; }
.operator-detail-primary-actions .icon, .operator-audited-note .icon, .operator-state-note .icon { flex: 0 0 auto; width: 14px; height: 14px; }
.operator-audited-note, .operator-state-note { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; color: #586579; font-size: 9px; font-weight: 700; }
.operator-state-note { margin: 0; padding: 7px 9px; border-radius: 8px; background: #f3f5f9; color: #5f6878; }
.operator-control-disclosure { min-width: 0; border: 1px solid #dbe2ef; border-radius: 10px; background: #f8faff; overflow: hidden; }
.operator-control-disclosure > summary, .operator-workspace-erasure > summary { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 12px; cursor: pointer; list-style: none; color: #273142; }
.operator-control-disclosure > summary::-webkit-details-marker, .operator-workspace-erasure > summary::-webkit-details-marker { display: none; }
.operator-control-disclosure > summary > .icon:first-child, .operator-workspace-erasure > summary > .icon:first-child { flex: 0 0 auto; width: 16px; height: 16px; color: #5267d8; }
.operator-control-disclosure > summary > span, .operator-workspace-erasure > summary > span { display: grid; flex: 1 1 auto; gap: 1px; }
.operator-control-disclosure > summary strong, .operator-workspace-erasure > summary strong { font-size: 10px; }
.operator-control-disclosure > summary small, .operator-workspace-erasure > summary small { color: #768195; font-size: 9px; font-weight: 500; }
.operator-control-disclosure > summary > .icon:last-child, .operator-workspace-erasure > summary > .icon:last-child { flex: 0 0 auto; width: 14px; height: 14px; transition: transform .16s ease; }
.operator-control-disclosure[open] > summary > .icon:last-child, .operator-workspace-erasure[open] > summary > .icon:last-child { transform: rotate(180deg); }
.operator-account-control-body { display: grid; gap: 8px; padding: 10px; border-top: 1px solid #e1e6ef; }
.operator-compact-help { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-session-banner { display:flex; align-items:flex-start; gap:10px; margin:14px 22px 0; padding:11px 13px; border:1px solid #f1c36a; border-radius:11px; background:#fff8e8; color:#6d4b00; }
.operator-session-banner svg { flex:0 0 auto; width:17px; height:17px; }
.operator-session-banner strong,.operator-session-banner p { display:block; margin:0; }
.operator-session-banner strong { font-size:11px; }
.operator-session-banner p { margin-top:2px; font-size:9px; line-height:1.45; }
.operator-account-controls-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.operator-account-controls-heading h3 { margin: 3px 0 4px; color: #202938; font-size: 13px; }
.operator-account-controls-heading p:last-child { max-width: 720px; margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-account-reason { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; color: #344054; font-size: 9px; font-weight: 700; }
.operator-account-reason input, .operator-account-control-grid input, .operator-account-control-grid select { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid #cfd7e6; border-radius: 8px; background: #fff; color: #1d2939; font: inherit; }
.operator-account-control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.operator-account-control-grid > div { display: grid; grid-template-rows: auto minmax(34px, 1fr) auto; align-content: stretch; gap: 7px; min-width: 0; padding: 10px; border: 1px solid #e0e5ed; border-radius: 10px; background: #fff; }
.operator-account-control-grid > .operator-access-change { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: auto auto auto; }
.operator-access-change > .operator-control-title, .operator-access-change > p, .operator-access-change > button { grid-column: 1 / -1; }
.operator-access-change label { display: grid; gap: 5px; color: #667085; font-size: 9px; }
@media (max-width: 720px) {
  .operator-account-control-grid > .operator-access-change { grid-template-columns: 1fr; }
}
.operator-control-spacer { min-height: 34px; }
.operator-control-title { display: flex; align-items: center; gap: 7px; }
.operator-control-title .icon { flex: 0 0 auto; width: 15px; height: 15px; color: #5267d8; }
.operator-account-control-grid strong { color: #344054; font-size: 10px; }
.operator-account-control-grid p { margin: 0; color: #737f90; font-size: 9px; line-height: 1.45; }
.operator-account-control-grid .button { justify-content: center; width: 100%; }
.operator-account-control-grid .button, .operator-erasure-final .button { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.operator-account-control-grid .form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.operator-account-control-grid .form-actions > :only-child { grid-column: 1 / -1; }
.operator-control-refusal { margin: 0; padding: 9px 11px; border-radius: 8px; color: #795548; background: #fff5e8; font-size: 9px; }
.operator-workspace-erasure { display: block; border: 1px solid #e6a6a2; border-radius: 10px; background: #fff7f6; overflow: hidden; }
.operator-workspace-erasure > summary { color: #7a271a; }
.operator-workspace-erasure > summary > .icon:first-child { color: #a63a2b; }
.operator-workspace-erasure-body { display: grid; gap: 10px; padding: 12px; border-top: 1px solid #edc1bd; }
.operator-workspace-erasure h4 { margin: 3px 0 5px; color: #7a271a; font-size: 13px; }
.operator-workspace-erasure p:not(.eyebrow) { max-width: 880px; margin: 0; color: #7a4a44; font-size: 9px; line-height: 1.45; }
.operator-erasure-final { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) auto; align-items: end; gap: 10px; }
.operator-erasure-final p { display: grid; gap: 3px; }
.operator-erasure-final p strong, .operator-erasure-final p span { display: block; }
.operator-erasure-approval-review { grid-template-columns: minmax(0, 1fr); align-items: start; }
.operator-erasure-approval-review details { min-width: 0; }
.operator-erasure-approval-review pre { max-width: 100%; margin: 8px 0 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 10px; line-height: 1.5; }
.operator-erasure-approval-review .form-actions { flex-wrap: wrap; }
.operator-erasure-final label { display: grid; gap: 6px; color: #7a271a; font-size: 10px; font-weight: 700; }
.operator-erasure-final input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #d98b84; border-radius: 9px; background: #fff; color: #1d2939; font: inherit; }
.operator-erasure-blocked { padding: 11px 12px; border-radius: 9px; background: #fff0ee; color: #7a271a; font-size: 10px; }
.operator-erasure-blocked ul { margin: 8px 0 10px; padding-left: 18px; }
.operator-workspace-detail-row > td { padding: 0; background: #f8faff; }
.operator-workspace-detail-row .operator-workspace-detail { border: 0; border-radius: 0; box-shadow: none; }
.operator-account-setup { display: grid; gap: 16px; min-width: 0; padding: 22px; }
.operator-account-setup-disclosure > summary { cursor: pointer; list-style: none; }
.operator-account-setup-disclosure > summary::-webkit-details-marker { display: none; }
.operator-account-setup-disclosure > summary::after { content: "+"; flex: 0 0 auto; color: #4f6bff; font-size: 22px; font-weight: 500; line-height: 1; }
.operator-account-setup-disclosure[open] > summary::after { content: "−"; }
.operator-account-setup-body { display: grid; gap: 16px; padding-top: 16px; border-top: 1px solid #e4e9f2; }
.operator-account-setup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.operator-account-setup-heading h2 { margin: 4px 0 6px; }
.operator-account-setup-heading p:last-child { max-width: 760px; margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-account-setup form, .operator-account-setup fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.operator-account-setup-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.operator-account-setup-fields label { display: grid; gap: 6px; min-width: 0; color: #344054; font-size: 10px; font-weight: 700; }
.operator-account-setup-fields label.is-wide { grid-column: 1 / -1; }
.operator-account-setup-fields input, .operator-account-setup-fields select, .operator-account-setup-result input { width: 100%; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid #cfd7e6; border-radius: 9px; background: #fff; color: #1d2939; font: inherit; }
.operator-account-setup .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.operator-account-setup .form-actions small { color: #667085; font-size: 9px; }
.operator-account-setup-result { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr) auto; align-items: end; gap: 10px; padding: 14px; border: 1px solid #b7dfcb; border-radius: 11px; background: #f2fbf6; }
.operator-account-setup-result > div, .operator-account-setup-result label { min-width: 0; }
.operator-account-setup-result strong, .operator-account-setup-result small { display: block; }
.operator-account-setup-result strong { color: #245c43; font-size: 10px; }
.operator-account-setup-result small { margin-top: 4px; color: #587367; font-size: 9px; line-height: 1.45; }
.operator-detail-sections { display: grid; gap: 10px; margin-top: 12px; }
.operator-detail-sections > details { min-width: 0; padding: 13px 15px; border: 1px solid #e1e6ef; border-radius: 11px; background: #fff; }
.operator-detail-sections > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: #283141; font-size: 11px; font-weight: 750; }
.operator-detail-sections > details > summary small { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #eef2f7; color: #667085; text-align: center; }
.operator-detail-sections > details[open] > summary { margin-bottom: 12px; }
.operator-audit-older { margin-top: 10px; padding: 10px; border: 1px solid #e9edf3; border-radius: 9px; }
.operator-audit-older > summary { cursor: pointer; color: #596579; font-size: 9px; font-weight: 700; }
.operator-audit-older[open] > summary { margin-bottom: 10px; }
.operator-account-trash { border-color: #efcaca !important; background: #fffafa !important; }
.operator-account-trash label { display: grid; gap: 5px; color: #7a3a3a; font-size: 9px; font-weight: 700; }
.operator-detail-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.operator-detail-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-width: 0; padding-top: 8px; border-top: 1px solid #eef1f5; }
.operator-detail-list li:first-child { padding-top: 0; border-top: 0; }
.operator-detail-list span, .operator-detail-list strong, .operator-detail-list small { display: block; min-width: 0; }
.operator-detail-list strong { color: #354052; font-size: 10px; overflow-wrap: anywhere; }
.operator-detail-list small { margin-top: 3px; color: #7d8797; font-size: 9px; }
.operator-detail-list code { flex: 0 0 auto; color: #6a7485; font-size: 9px; }
.operator-detail-empty { margin: 0; color: #7a8494; font-size: 10px; line-height: 1.5; }
.operator-detail-boundary { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 11px 12px; border-radius: 9px; color: #344a82; background: #f2f5ff; font-size: 10px; line-height: 1.45; }
.operator-detail-boundary .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.operator-detail-loading { display: flex; gap: 13px; align-items: center; min-height: 84px; }
.operator-detail-loading h2, .operator-detail-error h2 { margin: 0 0 4px; font-size: 15px; }
.operator-detail-loading p, .operator-detail-error p:last-of-type { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-detail-error { display: flex; gap: 18px; align-items: center; justify-content: space-between; border-color: #f0c8c8; background: #fffafa; }
.operator-boundaries { min-width: 0; padding: 22px; }
.operator-boundaries h2 { margin: 4px 0 6px; }
.operator-boundaries > div > p:last-child { margin: 0; color: #667085; font-size: 11px; line-height: 1.5; }
.operator-boundaries ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.operator-boundaries li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; color: #536071; font-size: 10px; line-height: 1.5; }
.operator-boundaries li > .icon { width: 28px; height: 28px; padding: 7px; border-radius: 8px; color: #2f5de0; background: #edf1ff; }
.operator-boundaries li span, .operator-boundaries li strong { display: block; }
.operator-boundaries li strong { margin-bottom: 1px; color: #222b39; font-size: 10px; }
.operator-unavailable { display: flex; gap: 14px; align-items: center; padding: 24px; }
.operator-unavailable > .icon { width: 24px; height: 24px; flex: 0 0 auto; color: #9a5c14; }
.operator-unavailable h2 { margin: 0 0 4px; font-size: 15px; }
.operator-unavailable p { margin: 0; color: #667085; font-size: 11px; }
.operator-unavailable .button { margin-left: auto; }

/* ASB-5: customer Help Center and the bounded Admin Support & Work queue. */
.konto-admin-state.is-attention { color: #8a4f0f; background: #fff0d9; }
.customer-support-dashboard, .konto-admin { min-width: 0; }
.customer-support-dashboard > *, .konto-admin > * { min-width: 0; }
.customer-support-dashboard { display: grid; gap: 18px; }
.customer-support-dashboard > .page-heading { margin-bottom: 0; }
.customer-support-summary, .operator-support-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.customer-support-summary article, .operator-support-summary article { min-width: 0; padding: 17px 18px; border: 1px solid #e1e6ef; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgb(28 40 70 / 4%); }
.customer-support-summary span, .customer-support-summary strong, .operator-support-summary span, .operator-support-summary strong { display: block; }
.customer-support-summary span, .operator-support-summary span { color: #6b7686; font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.customer-support-summary strong, .operator-support-summary strong { margin-top: 7px; color: #11131a; font-size: 27px; line-height: 1; }
.customer-support-summary article.has-attention, .operator-support-summary article.has-attention { border-color: #f0d0a1; background: #fffaf2; }
.customer-support-summary article.has-attention strong, .operator-support-summary article.has-attention strong { color: #9a5c14; }
.customer-support-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 14px; align-items: start; }
.customer-support-cases { display: grid; gap: 12px; }
.customer-support-case { min-width: 0; padding: 20px; }
.customer-support-case-heading, .operator-support-case-heading { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.customer-support-kind { color: #4c6bff; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.customer-support-case h2 { margin: 9px 0 5px; font-size: 16px; }
.customer-support-case-meta { margin: 0; color: #7b8595; font-size: 10px; }
.customer-support-access { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 12px; border: 1px solid #dfe6f7; border-radius: 10px; color: #31487f; background: #f5f7ff; }
.customer-support-access > .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.customer-support-access strong, .customer-support-access small { display: block; }
.customer-support-access strong { font-size: 11px; }
.customer-support-access small { margin-top: 3px; color: #6c7898; font-size: 9px; }
.customer-support-commercial { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.customer-support-commercial > div { min-width: 0; padding: 10px; border: 1px solid #e5e9f0; border-radius: 9px; background: #fafbfc; }
.customer-support-commercial dt, .customer-support-commercial dd { margin: 0; }
.customer-support-commercial dt { color: #7a8494; font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.customer-support-commercial dd { margin-top: 4px; color: #354052; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.customer-support-boundary { display: flex; gap: 7px; align-items: center; margin: 12px 0 0; color: #6b7686; font-size: 9px; line-height: 1.45; }
.customer-support-boundary .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.customer-support-intake { padding: 20px; }
.customer-support-intake h2 { margin: 4px 0 6px; font-size: 16px; }
.customer-support-intake > div > p:last-child { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.customer-support-intake ul { display: grid; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.customer-support-intake li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid #e4e8ef; border-radius: 9px; }
.customer-support-intake li > .icon { width: 30px; height: 30px; padding: 8px; border-radius: 8px; color: #3159d6; background: #edf1ff; }
.customer-support-intake li strong, .customer-support-intake li small { display: block; }
.customer-support-intake li strong { color: #30394a; font-size: 10px; }
.customer-support-intake li small { margin-top: 2px; color: #778193; font-size: 9px; line-height: 1.4; }
.customer-support-intake .button { width: 100%; justify-content: center; }
.customer-support-role-note { margin: 10px 0 0; color: #8a4f0f; font-size: 9px; }
/* ASB-6: local-only customer request intake. */
.customer-support-intake-form form { display: grid; gap: 15px; margin-top: 17px; }
.customer-support-intake-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.customer-support-intake-form legend, .customer-support-request-field > span { margin-bottom: 7px; color: #30394a; font-size: 10px; font-weight: 750; }
.customer-support-request-types { display: grid; gap: 7px; }
.customer-support-request-type { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; cursor: pointer; }
.customer-support-request-type:hover { border-color: #bdc9ef; background: #f9faff; }
.customer-support-request-type:has(input:checked) { border-color: #8298ed; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); background: #f7f9ff; }
.customer-support-request-type input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: #4f6bff; }
.customer-support-request-type strong, .customer-support-request-type small { display: block; }
.customer-support-request-type strong { color: #30394a; font-size: 10px; }
.customer-support-request-type small { margin-top: 2px; color: #778193; font-size: 9px; line-height: 1.4; }
.customer-support-request-field { display: grid; min-width: 0; }
.customer-support-request-field input, .customer-support-request-field textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dfe4ec; border-radius: 8px; color: #202633; background: #fff; font: inherit; font-size: 11px; line-height: 1.45; resize: vertical; }
.customer-support-request-field input:focus-visible, .customer-support-request-field textarea:focus-visible, .customer-support-request-type:has(input:focus-visible) { outline: 2px solid rgb(79 107 255 / 35%); outline-offset: 2px; border-color: #8298ed; }
.customer-support-request-field small { margin-top: 5px; color: #7b8595; font-size: 8px; line-height: 1.45; }
.customer-support-request-boundary, .customer-support-request-error { display: flex; gap: 8px; align-items: flex-start; padding: 11px; border-radius: 9px; }
.customer-support-request-boundary { border: 1px solid #dfe6f7; color: #415786; background: #f5f7ff; }
.customer-support-request-error { border: 1px solid #f1c5c5; color: #813d3d; background: #fff7f7; }
.customer-support-request-boundary .icon, .customer-support-request-error .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.customer-support-request-boundary p, .customer-support-request-error p { margin: 0; font-size: 9px; line-height: 1.5; }
.customer-support-request-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.customer-support-request-actions .spinner { width: 13px; height: 13px; }
.customer-support-intake-success { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; }
.customer-support-intake-success > .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: #176b48; background: #e9f7f0; }
.customer-support-intake-success h2 { overflow-wrap: anywhere; }
.customer-support-intake-success > div > p { margin: 4px 0 0; color: #667085; font-size: 9px; line-height: 1.5; }
.customer-support-intake-success .button { grid-column: 1 / -1; }
/* ASB-8: local-only customer consent and a zero-authority grant preview. */
.customer-support-consent-open { width: 100%; margin-top: 11px; justify-content: center; }
.customer-support-access-consent { display: grid; gap: 14px; min-width: 0; padding: 20px; }
.customer-support-access-consent h2 { margin: 4px 0 6px; font-size: 16px; }
.customer-support-access-consent > div:first-child > p:last-child { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.customer-support-access-consent > .button { width: 100%; justify-content: center; }
.customer-support-access-consent-form form { display: grid; gap: 15px; }
.customer-support-access-consent-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.customer-support-access-consent-form legend { margin-bottom: 7px; color: #30394a; font-size: 10px; font-weight: 750; }
.customer-support-consent-choices { display: grid; gap: 7px; }
.customer-support-consent-choices label, .customer-support-consent-checkbox { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; cursor: pointer; }
.customer-support-consent-choices label:has(input:checked), .customer-support-consent-checkbox:has(input:checked) { border-color: #8298ed; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); background: #f7f9ff; }
.customer-support-consent-choices input, .customer-support-consent-checkbox input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: #4f6bff; }
.customer-support-consent-choices strong, .customer-support-consent-choices small, .customer-support-consent-checkbox strong, .customer-support-consent-checkbox small { display: block; }
.customer-support-consent-choices strong, .customer-support-consent-checkbox strong { color: #30394a; font-size: 10px; }
.customer-support-consent-choices small, .customer-support-consent-checkbox small { margin-top: 2px; color: #778193; font-size: 9px; line-height: 1.4; }
/* ASB-12: local-only paid-work proposal decision and exact B2B mandate. */
.customer-support-work-decision { align-self: start; }
.customer-support-work-decision .customer-support-work-facts { grid-template-columns: 1fr; margin: 0; }
.customer-support-work-decision .customer-support-work-facts div:first-child { background: #fbfcff; }
.customer-support-business-mandate { display: grid; gap: 10px; padding: 12px !important; border: 1px solid #dce3f3 !important; border-radius: 10px !important; background: #fbfcff; }
.customer-support-business-mandate:disabled { opacity: .62; background: #f6f7f9; }
.customer-support-business-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.customer-support-audit-receipt { margin: 0; color: #748095; font-size: 8px; overflow-wrap: anywhere; }
.customer-support-consent-duration { display: flex; gap: 8px; align-items: flex-start; padding: 11px; border: 1px solid #d9e7df; border-radius: 9px; color: #315f4a; background: #f2faf6; }
.customer-support-consent-duration .icon { width: 15px; height: 15px; flex: 0 0 auto; }
.customer-support-consent-duration p { margin: 0; font-size: 9px; line-height: 1.5; }
.customer-support-consent-confirmed { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid #cfe7da; border-radius: 10px; color: #215b40; background: #f2faf6; }
.customer-support-consent-confirmed > .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.customer-support-consent-confirmed strong, .customer-support-consent-confirmed p { display: block; }
.customer-support-consent-confirmed strong { font-size: 11px; }
.customer-support-consent-confirmed p { margin: 3px 0 0; font-size: 9px; line-height: 1.45; }
.customer-support-grant-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.customer-support-grant-preview > div { min-width: 0; padding: 10px; border: 1px solid #e4e8ef; border-radius: 9px; background: #fafbfc; }
.customer-support-grant-preview dt, .customer-support-grant-preview dd { margin: 0; }
.customer-support-grant-preview dt { color: #7a8494; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.customer-support-grant-preview dd { margin-top: 4px; color: #354052; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.customer-support-effective-access { padding: 12px; border: 1px solid #ead9be; border-radius: 10px; color: #714b18; background: #fff9ee; }
.customer-support-effective-access strong, .customer-support-effective-access span, .customer-support-effective-access small { display: block; }
.customer-support-effective-access strong { font-size: 10px; }
.customer-support-effective-access span { margin-top: 5px; font-size: 9px; font-weight: 700; }
.customer-support-effective-access small { margin-top: 4px; color: #806844; font-size: 8px; line-height: 1.45; }
.customer-support-audit-receipt { margin: 0; color: #7b8595; font-size: 8px; }
.customer-support-loading, .customer-support-error, .operator-support-state { display: flex; gap: 13px; align-items: center; min-height: 110px; padding: 22px; }
.customer-support-loading h2, .customer-support-error h2, .operator-support-state h2 { margin: 0 0 4px; font-size: 15px; }
.customer-support-loading p, .customer-support-error p, .operator-support-state p { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.customer-support-error > .icon, .operator-support-state > .icon { width: 22px; height: 22px; flex: 0 0 auto; color: #9a5c14; }
.operator-support-state.is-error { border-color: #f0c8c8; background: #fffafa; }
.operator-support-state .button { margin-left: auto; }
.customer-support-safety { display: flex; gap: 12px; align-items: center; padding: 17px 19px; color: #31487f; background: #f5f7ff; }
.customer-support-safety > .icon { width: 20px; height: 20px; flex: 0 0 auto; }
.customer-support-safety strong { font-size: 11px; }
.customer-support-safety p { margin: 3px 0 0; color: #687696; font-size: 9px; line-height: 1.5; }
.operator-support-work { min-width: 0; overflow: hidden; }
.operator-support-work-heading { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; padding: 21px 22px 17px; }
.operator-support-work-heading h2 { margin: 4px 0 5px; }
.operator-support-work-heading p:last-child { max-width: 780px; margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-support-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 0 22px 17px; border-bottom: 1px solid #e6eaf1; }
.operator-support-toolbar .operator-search { flex: 1 1 260px; min-width: 220px; }
.operator-support-list { display: grid; gap: 0; }
.operator-support-case { min-width: 0; padding: 18px 22px; border-bottom: 1px solid #e8ecf2; }
.operator-support-case[hidden] { display: none; }
.operator-support-case.is-selected { background: #f6f8ff; box-shadow: inset 3px 0 #4f6bff; }
.operator-support-case-heading > div { min-width: 0; }
.operator-support-case-heading h2 { margin: 4px 0 5px; font-size: 13px; }
.operator-support-case-heading p { margin: 0; color: #7a8494; font-size: 9px; }
.operator-support-attention { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: #4b5565; background: #eef1f5; font-size: 9px; font-weight: 750; }
.operator-support-attention.is-active_dispute, .operator-support-attention.is-payment_pending { color: #9b321e; background: #fee9e5; }
.operator-support-attention.is-waiting_customer, .operator-support-attention.is-access_expiring, .operator-support-attention.is-new_request { color: #8a4f0f; background: #fff0d9; }
.operator-support-attention.is-in_progress { color: #2743b0; background: #e8edff; }
.operator-support-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 13px 0 0; }
.operator-support-facts > div { min-width: 0; padding: 10px; border: 1px solid #e5e9f0; border-radius: 9px; background: #fafbfc; }
.operator-support-facts dt, .operator-support-facts dd { margin: 0; }
.operator-support-facts dt { color: #7a8494; font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.operator-support-facts dd { margin-top: 4px; color: #354052; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.operator-support-open { margin-top: 13px; }
.operator-support-online-boundary { margin: 12px 0 0; color: #7a8494; font-size: 9px; }
.operator-support-work > .operator-detail-boundary { margin: 14px 22px 20px; }
.operator-support-detail, .operator-support-detail-state { margin-bottom: 14px; }
.operator-support-detail-state { display: flex; gap: 13px; align-items: center; min-height: 110px; padding: 22px; }
.operator-support-detail-state h2 { margin: 0 0 4px; font-size: 15px; }
.operator-support-detail-state p { margin: 0; color: #667085; font-size: 10px; line-height: 1.5; }
.operator-support-detail-state > .icon { width: 22px; height: 22px; color: #9a5c14; }
.operator-support-detail-state.is-error { border-color: #f0c8c8; background: #fffafa; }
.operator-support-detail-state .button { margin-left: auto; }
.operator-support-detail-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 21px 22px 17px; border-bottom: 1px solid #e6eaf1; }
.operator-support-detail-heading h2 { margin: 4px 0 5px; font-size: 17px; }
.operator-support-detail-heading p:last-child { margin: 0; color: #667085; font-size: 9px; }
.operator-support-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 18px; padding: 20px 22px; }
.operator-support-detail-grid > div, .operator-support-detail-grid > aside { min-width: 0; }
.operator-support-description { margin: 8px 0 18px; color: #354052; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.operator-support-latest-triage { margin: 0 0 16px; padding: 14px; border: 1px solid #dbe2ff; border-radius: 11px; background: #f7f8ff; }
.operator-support-latest-triage > strong { display: block; margin-top: 5px; color: #263d9a; font-size: 12px; }
.operator-support-latest-triage > p:not(.eyebrow) { margin: 7px 0 4px; color: #4d5870; font-size: 10px; line-height: 1.5; }
.operator-support-latest-triage > small { color: #778097; font-size: 8px; }
.operator-support-triage-form { display: grid; gap: 13px; padding-top: 16px; border-top: 1px solid #e6eaf1; }
.operator-support-triage-capability { margin: 0; color: #667085; font-size: 9px; line-height: 1.5; }
.operator-support-triage-form fieldset { display: grid; gap: 8px; padding: 0; border: 0; }
.operator-support-triage-form legend { margin-bottom: 7px; color: #2d3646; font-size: 11px; font-weight: 800; }
.operator-support-triage-form fieldset label { display: flex; gap: 9px; align-items: flex-start; padding: 11px; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; cursor: pointer; }
.operator-support-triage-form fieldset label:has(input:checked) { border-color: #8295ff; background: #f6f8ff; box-shadow: 0 0 0 2px rgb(79 107 255 / 10%); }
.operator-support-triage-form fieldset input { width: auto; margin-top: 2px; }
.operator-support-triage-form fieldset span { display: grid; gap: 3px; }
.operator-support-triage-form fieldset strong { color: #2d3646; font-size: 10px; }
.operator-support-triage-form fieldset small { color: #707b8d; font-size: 8px; line-height: 1.4; }
.operator-support-triage-form > label { display: grid; gap: 6px; color: #2d3646; font-size: 10px; font-weight: 750; }
.operator-support-triage-form textarea { min-height: 88px; resize: vertical; }
.operator-support-status-form fieldset { min-width: 0; gap: 14px; }
.operator-support-status-form fieldset label { display: grid; gap: 7px; padding: 0; border: 0; color: #2d3646; font-size: 12px; font-weight: 650; cursor: default; }
.operator-support-status-form select, .operator-support-status-form textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid #cbd2e2; border-radius: 11px; background: #fafbfe; color: #202a39; font: inherit; font-weight: 400; }
.operator-support-status-form select { min-height: 46px; }
.operator-support-status-form textarea { min-height: 104px; }
.operator-support-status-form :is(select, textarea):focus-visible { outline: 2px solid #5368ff; outline-offset: 2px; background: #fff; }
.operator-support-triage-error { margin: 0; color: #a33323; font-size: 9px; }
.operator-support-triage-locked { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid #e2e6ed; border-radius: 10px; background: #fafbfc; }
.operator-support-triage-locked > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #687386; }
.operator-support-triage-locked strong { font-size: 10px; }
.operator-support-triage-locked p { margin: 3px 0 0; color: #707b8d; font-size: 9px; line-height: 1.45; }
.operator-support-audit { display: grid; gap: 8px; margin: 9px 0 0; padding: 0; list-style: none; }
.operator-support-audit li { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid #e4e8ef; border-radius: 9px; background: #fafbfc; }
.operator-support-audit .icon { width: 15px; height: 15px; flex: 0 0 auto; color: #4f6bff; }
.operator-support-audit span { display: grid; gap: 3px; }
.operator-support-audit strong { color: #364052; font-size: 9px; }
.operator-support-audit small { color: #7a8494; font-size: 8px; }
.operator-support-work-proposal { display: grid; gap: 13px; margin-top: 18px; padding: 16px; border: 1px solid #d9e1f5; border-radius: 12px; background: #fbfcff; }
.operator-support-work-proposal h3 { margin: 4px 0 5px; font-size: 14px; }
.operator-support-work-proposal > div > p:last-child, .operator-support-work-proposal.is-loading p, .operator-support-work-proposal.is-error p { margin: 0; color: #667085; font-size: 9px; line-height: 1.55; }
.operator-support-work-proposal.is-loading, .operator-support-work-proposal.is-error { display: flex; gap: 10px; align-items: flex-start; padding: 13px; background: #fafbfc; }
.operator-support-work-proposal.is-error { border-color: #f0c8c8; background: #fffafa; }
.operator-support-work-proposal.is-error > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #9a5c14; }
.operator-support-work-proposal form { display: grid; gap: 13px; }
.operator-support-work-proposal form > label, .operator-support-proposal-maximums label { display: grid; gap: 6px; color: #2d3646; font-size: 9px; font-weight: 750; }
.operator-support-work-proposal textarea { min-height: 88px; resize: vertical; }
.operator-support-proposal-fixed-rate { display: grid; gap: 3px; padding: 12px; border: 1px solid #bcdacb; border-radius: 9px; background: #f7fcf9; }
.operator-support-proposal-fixed-rate span, .operator-support-proposal-fixed-rate small { color: #587367; font-size: 8px; }
.operator-support-proposal-fixed-rate strong { color: #245c43; font-size: 11px; }
.operator-support-work-proposal fieldset { padding: 0; border: 0; }
.operator-support-work-proposal legend { margin-bottom: 7px; color: #2d3646; font-size: 10px; font-weight: 800; }
.operator-support-proposal-bases, .operator-support-proposal-maximums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.operator-support-proposal-bases label { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid #e1e6ef; border-radius: 9px; background: #fff; }
.operator-support-proposal-bases label:has(input:checked) { border-color: #8295ff; background: #f6f8ff; }
.operator-support-proposal-bases input { width: auto; margin-top: 2px; }
.operator-support-proposal-bases span { display: grid; gap: 2px; }
.operator-support-proposal-bases strong { font-size: 9px; }
.operator-support-proposal-bases small { color: #707b8d; font-size: 8px; }
.operator-support-grant-preparation { display: grid; gap: 13px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e6eaf1; }
.operator-support-grant-preparation h3 { margin: 4px 0 5px; font-size: 14px; }
.operator-support-grant-preparation > div > p:last-child, .operator-support-grant-preparation.is-loading p, .operator-support-grant-preparation.is-error p { margin: 0; color: #667085; font-size: 9px; line-height: 1.55; }
.operator-support-grant-preparation.is-loading, .operator-support-grant-preparation.is-error { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid #dfe4ee; border-radius: 10px; background: #fafbfc; }
.operator-support-grant-preparation.is-error { border-color: #f0c8c8; background: #fffafa; }
.operator-support-grant-preparation.is-error > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #9a5c14; }
.operator-support-grant-form { display: grid; gap: 13px; padding: 14px; border: 1px solid #dce3f3; border-radius: 11px; background: #fbfcff; }
.operator-support-grant-consent { padding: 12px; border: 1px solid #dbe2ff; border-radius: 9px; background: #f5f7ff; }
.operator-support-grant-consent > p:last-child { margin: 9px 0 0; color: #4d5870; font-size: 9px; line-height: 1.5; }
.operator-support-grant-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; }
.operator-support-grant-form legend { grid-column: 1 / -1; margin-bottom: 7px; color: #2d3646; font-size: 11px; font-weight: 800; }
.operator-support-grant-form label, .operator-support-grant-form fieldset label { display: grid; gap: 6px; min-width: 0; color: #2d3646; font-size: 9px; font-weight: 750; }
.operator-support-grant-form select { width: 100%; min-width: 0; }
.operator-support-grant-form textarea { min-height: 88px; resize: vertical; }
.operator-support-grant-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 9px 0 0; }
.operator-support-grant-facts div { min-width: 0; padding: 9px; border: 1px solid #e1e6ef; border-radius: 8px; background: #fff; }
.operator-support-grant-facts dt { color: #788397; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.operator-support-grant-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: #303a4b; font-size: 9px; font-weight: 750; line-height: 1.4; }
.operator-support-grant-receipt { padding: 14px; border: 1px solid #bcdacb; border-radius: 11px; background: #f7fcf9; }
.operator-support-grant-receipt-heading { display: flex; gap: 10px; align-items: flex-start; }
.operator-support-grant-receipt-heading > .icon { width: 19px; height: 19px; flex: 0 0 auto; color: #288055; }
.operator-support-grant-receipt-heading h3 { margin: 3px 0; color: #245c43; }
.operator-support-grant-receipt-heading p:last-child { margin: 0; color: #587367; font-size: 9px; }
.operator-support-grant-activation { margin-top: 14px; padding: 16px; border: 1px solid #dbe2f1; border-radius: 12px; background: #fcfdff; }
.operator-support-grant-activation .operator-support-grant-receipt { margin-top: 0; }
.operator-support-access-audit { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.operator-support-access-audit li { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid #dfe6e3; border-radius: 8px; background: #fff; }
.operator-support-access-audit .icon { width: 14px; height: 14px; flex: 0 0 auto; color: #288055; }
.operator-support-access-audit span { display: grid; gap: 2px; min-width: 0; }
.operator-support-access-audit strong { color: #33443b; font-size: 8px; overflow-wrap: anywhere; }
.operator-support-access-audit small { color: #718078; font-size: 7px; }
.operator-support-detail > .operator-detail-boundary { margin: 0 22px 20px; }

@media (max-width: 1080px) {
  .operator-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator-summary-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operator-toolbar { align-items: stretch; flex-direction: column; }
  .operator-search { width: 100%; }
  .operator-overview-grid { grid-template-columns: 1fr; }
  .operator-foundation-grid { grid-template-columns: 1fr; }
  .operator-lower-grid { grid-template-columns: 1fr; }
  .operator-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operator-review-toolbar { align-items: stretch; flex-direction: column; }
  .operator-review-toolbar .operator-search { flex-basis: auto; }
  .customer-support-layout { grid-template-columns: 1fr; }
  .operator-support-toolbar { align-items: stretch; flex-direction: column; }
  .operator-support-toolbar .operator-search { width: 100%; flex-basis: auto; }
}

@media (max-width: 720px) {
  .konto-admin { gap: 14px; }
  .konto-admin > .page-heading { align-items: flex-start; flex-direction: column; }
  .operator-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .operator-summary-five { grid-template-columns: 1fr 1fr; }
  .operator-summary article { padding: 14px; }
  .operator-summary strong { font-size: 23px; }
  .operator-toolbar, .operator-customers-heading { padding-inline: 14px; }
  .operator-customers-heading { gap: 12px; }
  .operator-customers-heading .button { flex: 0 0 auto; }
  .operator-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .operator-filters button { justify-content: space-between; }
  .konto-admin-table-wrap { overflow: visible; padding: 0 12px 12px; }
  .konto-admin-table, .konto-admin-table tbody, .konto-admin-table tr, .konto-admin-table td { display: block; width: 100%; }
  .konto-admin-table tr[data-operator-account-row][hidden] { display: none; }
  .konto-admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .konto-admin-table tbody { display: grid; gap: 10px; }
  .konto-admin-table tr { padding: 13px; border: 1px solid #e0e5ed; border-radius: 11px; background: #fff; }
  .konto-admin-table .operator-workspace-detail-row { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; margin-top: -10px; padding: 0; overflow: visible; border-color: #c7d7fe; }
  .konto-admin-table .operator-workspace-detail-row[hidden] { display: none; }
  .konto-admin-table .operator-workspace-detail-row td { display: block; height: auto; min-height: 0; padding: 0; }
  .konto-admin-table .operator-workspace-detail-row td::before { content: none; }
  .konto-admin-table td { display: grid; grid-template-columns: 90px minmax(0, 1fr); padding: 7px 0; border: 0; }
  .konto-admin-table td::before { content: attr(data-label); color: #7b8595; font-size: 9px; font-weight: 750; text-transform: uppercase; }
  .konto-admin-table td > * { grid-column: 2; }
  .konto-admin-table td:first-child { padding-top: 0; }
  .konto-admin-table td:first-child strong { font-size: 12px; }
  .operator-template-setup, .operator-boundaries { padding: 18px; }
  .operator-foundation-card { padding: 18px; }
  .operator-foundation-heading { align-items: flex-start; flex-direction: column; }
  .operator-action-map { grid-template-columns: 1fr; }
  .operator-policy-list article { grid-template-columns: 32px minmax(0, 1fr); }
  .operator-policy-list small { grid-column: 2; text-align: left; }
  .operator-workspace-detail { padding: 12px; }
  .operator-detail-heading, .operator-detail-error { align-items: stretch; flex-direction: column; }
  .operator-detail-heading .button, .operator-detail-error .button { justify-content: center; width: 100%; }
  .operator-detail-facts, .operator-account-control-grid { grid-template-columns: 1fr; }
  .operator-detail-primary-actions { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .operator-detail-primary-actions .button { justify-content: center; width: 100%; }
  .operator-detail-primary-actions .operator-audited-note, .operator-detail-primary-actions .operator-state-note { grid-column: 1 / -1; }
  .operator-account-setup-heading { align-items: stretch; flex-direction: column; }
  .operator-account-setup-fields, .operator-account-setup-result { grid-template-columns: 1fr; }
  .operator-account-setup-fields label.is-wide { grid-column: auto; }
  .operator-account-setup-result .button { justify-content: center; width: 100%; }
  .operator-erasure-final { grid-template-columns: 1fr; }
  .operator-template-submission .form-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .operator-template-submission .button { justify-content: center; }
  .operator-catalog-summary, .operator-catalog-heading, .operator-catalog-actions, .operator-commerce-heading { align-items: stretch; flex-direction: column; }
  .operator-catalog-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operator-catalog-counts span { min-width: 0; }
  .operator-catalog-source, .operator-catalog-fields, .operator-publication-checks, .operator-publication-final { grid-template-columns: 1fr; }
  .operator-catalog-fields label.is-wide { grid-column: auto; }
  .operator-catalog-editor .form-actions { display: grid; grid-template-columns: 1fr; }
  .operator-template-commerce.is-included, .operator-test-checkout, .operator-test-checkout-start { grid-template-columns: 1fr; }
  .operator-entitlement-list li { align-items: flex-start; flex-direction: column; }
  .operator-unavailable { align-items: flex-start; flex-wrap: wrap; }
  .operator-unavailable .button { width: 100%; margin-left: 0; justify-content: center; }
  .customer-support-summary, .operator-support-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .customer-support-dashboard > .page-heading, .konto-admin > .page-heading { flex-direction: column; }
  .customer-support-dashboard > .page-heading > div, .konto-admin > .page-heading > div { min-width: 0; max-width: 100%; }
  .customer-support-summary article, .operator-support-summary article { padding: 14px; }
  .customer-support-commercial, .operator-support-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-support-intake, .customer-support-access-consent, .customer-support-case { padding: 16px; }
  .customer-support-business-grid { grid-template-columns: 1fr; }
  .customer-support-request-actions { grid-template-columns: 1fr; }
  .operator-support-work-heading, .operator-support-toolbar, .operator-support-case { padding-inline: 15px; }
  .operator-support-toolbar .operator-search { min-width: 0; min-height: 42px; flex: 0 0 auto; }
  .operator-support-work-heading, .operator-support-case-heading { align-items: stretch; flex-direction: column; }
  .operator-support-attention { align-self: flex-start; }
  .operator-support-work > .operator-detail-boundary { margin-inline: 15px; }
  .operator-support-state { align-items: flex-start; flex-wrap: wrap; }
  .operator-support-state .button { width: 100%; margin-left: 0; justify-content: center; }
  .operator-support-detail-heading { padding-inline: 15px; }
  .operator-support-detail-grid { grid-template-columns: 1fr; padding-inline: 15px; }
  .operator-support-detail > .operator-detail-boundary { margin-inline: 15px; }
  .operator-support-detail-state { align-items: flex-start; flex-wrap: wrap; }
  .operator-support-detail-state .button { width: 100%; margin-left: 0; justify-content: center; }
  .operator-support-grant-form fieldset, .operator-support-grant-facts, .operator-support-proposal-bases, .operator-support-proposal-maximums { grid-template-columns: 1fr; }
}

/* NAT-3: the Builder customer canvas uses the published Player's component
   geometry. Authoring state is an overlay only; it never changes the size,
   spacing or responsive wrapping the buyer will receive. */
.studio-shell[data-builder-active="true"] .builder-player-layout {
  --ink: var(--builder-brand-text, #11131a);
  --muted: var(--builder-brand-text-muted, #4a5260);
  --line: var(--builder-brand-border, #bec5ce);
  --surface: var(--builder-brand-surface, #fff);
  --soft: var(--builder-brand-surface-muted, #e8eceb);
  --soft-2: var(--builder-brand-surface-muted, #e8eceb);
  --accent: var(--builder-brand-accent, #2955f3);
  --accent-dark: var(--builder-brand-focus, #1739b7);
  color: var(--ink);
  --configux-radius-small: var(--builder-brand-radius-small, 8px);
  --configux-radius-medium: var(--builder-brand-radius-medium, 13px);
  --configux-radius-large: var(--builder-brand-radius-large, 16px);
  --configux-space-unit: var(--builder-brand-space, 4px);
  font-family: var(--builder-brand-font, Inter), ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--builder-brand-body-weight, 400);
}

.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-top-bar,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-bottom-bar,
.studio-shell[data-builder-active="true"] .builder-player-controls {
  gap: calc(var(--configux-space-unit) * 3.5);
  padding: calc(var(--configux-space-unit) * 4.5);
}

.studio-shell[data-builder-active="true"] .builder-player-controls .builder-layout-placement + .builder-layout-placement {
  padding-top: 0;
  border-top: 0;
}

.studio-shell[data-builder-active="true"] .builder-player-group {
  min-width: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.studio-shell[data-builder-active="true"] .builder-player-group legend {
  width: 100%;
  margin-bottom: 11px;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--builder-brand-heading-weight, 700);
}

.studio-shell[data-builder-active="true"] .builder-player-group-tooltip {
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.studio-shell[data-builder-active="true"] .builder-player-option-grid {
  display: grid;
  grid-template-columns: repeat(var(--opr-desktop, 2), minmax(0, 1fr));
  gap: calc(var(--configux-space-unit) * 2.5);
}

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-player-option-grid {
  grid-template-columns: repeat(var(--opr-tablet, 2), minmax(0, 1fr));
}

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player-option-grid {
  grid-template-columns: repeat(var(--opr-mobile, 1), minmax(0, 1fr));
}

.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option-grid {
  grid-template-columns: repeat(var(--opr-desktop, 4), minmax(0, 1fr));
}

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-player-group--color_swatches .builder-player-option-grid {
  grid-template-columns: repeat(var(--opr-tablet, 4), minmax(0, 1fr));
}

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player-group--color_swatches .builder-player-option-grid {
  grid-template-columns: repeat(var(--opr-mobile, 3), minmax(0, 1fr));
}

.studio-shell[data-builder-active="true"] .builder-player-option {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--configux-radius-medium);
  color: var(--ink);
  background: var(--surface);
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.studio-shell[data-builder-active="true"] .builder-player-option:hover { transform: translateY(-1px); border-color: #9eb2a7; }
.studio-shell[data-builder-active="true"] .builder-player-option:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 2px; }
.studio-shell[data-builder-active="true"] .builder-player-option[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
}

.studio-shell[data-builder-active="true"] .builder-player-swatch {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 50%;
  color: var(--ink);
  background: var(--soft-2);
  font-size: 19px;
  font-weight: 500;
}

.studio-shell[data-builder-active="true"] .builder-player-swatch svg { width: 30px; height: 30px; }
.studio-shell[data-builder-active="true"] .builder-player-option-label {
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.studio-shell[data-builder-active="true"] .builder-player-option-dimensions {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.studio-shell[data-builder-active="true"] .builder-player-group--buttons .builder-player-option {
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  text-align: center;
}
.studio-shell[data-builder-active="true"] .builder-player-group--buttons .builder-player-swatch { display: none; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option { flex-direction: column; gap: 8px; padding: 10px 6px; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-swatch { width: 38px; height: 38px; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option-label { font-size: 12px; text-align: center; }
.studio-shell[data-builder-active="true"] .builder-player-option .builder-player-option-image { width: 100%; max-height: 96px; object-fit: cover; border-radius: 8px; }
.studio-shell[data-builder-active="true"] .builder-player-option.has-media { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.studio-shell[data-builder-active="true"] .builder-player-group--cards:not(.option-group--label-beside) .builder-player-option.option-button--without-media { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.studio-shell[data-builder-active="true"] .option-group--direction-vertical .builder-player-option-grid { grid-template-columns: minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .option-group--label-above .builder-player-option,
.studio-shell[data-builder-active="true"] .option-group--label-below .builder-player-option { flex-direction: column; align-items: stretch; text-align: center; }
.studio-shell[data-builder-active="true"] .option-group--label-above .builder-player-option-label { order: -1; }
.studio-shell[data-builder-active="true"] .option-group--label-below .builder-player-option-label { order: 2; }
.studio-shell[data-builder-active="true"] .option-group--label-beside .builder-player-option,
.studio-shell[data-builder-active="true"] .option-group--label-beside .builder-player-option.has-media { flex-direction: row; align-items: center; text-align: left; }
.studio-shell[data-builder-active="true"] .option-group--label-beside .builder-player-option .builder-player-option-image { width: 42%; max-width: 112px; height: 64px; object-fit: cover; }
.studio-shell[data-builder-active="true"] .option-group--label-hidden .builder-player-option-label,
.studio-shell[data-builder-active="true"] .option-group--label-hidden .builder-player-option-dimensions {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Q24-5: exact Builder parity for the portable option-card design contract. */
.studio-shell[data-builder-active="true"] .option-group--media-square .builder-player-option .builder-player-option-image { height: auto; max-height: none; aspect-ratio: 1 / 1; }
.studio-shell[data-builder-active="true"] .option-group--media-portrait .builder-player-option .builder-player-option-image { height: auto; max-height: none; aspect-ratio: 4 / 5; }
.studio-shell[data-builder-active="true"] .option-group--media-landscape .builder-player-option .builder-player-option-image { height: auto; max-height: none; aspect-ratio: 4 / 3; }
.studio-shell[data-builder-active="true"] .option-group--media-wide .builder-player-option .builder-player-option-image { height: auto; max-height: none; aspect-ratio: 16 / 9; }
.studio-shell[data-builder-active="true"] .option-group--fit-cover .builder-player-option-image { object-fit: cover; }
.studio-shell[data-builder-active="true"] .option-group--fit-contain .builder-player-option-image { object-fit: contain; background: var(--soft-2); }

.studio-shell[data-builder-active="true"] .option-group--density-brand .builder-player-option {
  min-height: calc(50px + var(--configux-space-unit) * 2);
  padding: calc(var(--configux-space-unit) * 2.25) calc(var(--configux-space-unit) * 3);
  gap: calc(var(--configux-space-unit) * 2.5);
}
.studio-shell[data-builder-active="true"] .option-group--density-compact .builder-player-option { min-height: 44px; padding: 6px 8px; gap: 6px; }
.studio-shell[data-builder-active="true"] .option-group--density-comfortable .builder-player-option { min-height: 58px; padding: 9px 12px; gap: 10px; }
.studio-shell[data-builder-active="true"] .option-group--density-spacious .builder-player-option { min-height: 72px; padding: 14px 16px; gap: 14px; }

.studio-shell[data-builder-active="true"] .option-group--radius-square .builder-player-option { border-radius: 0; }
.studio-shell[data-builder-active="true"] .option-group--radius-small .builder-player-option { border-radius: var(--configux-radius-small); }
.studio-shell[data-builder-active="true"] .option-group--radius-medium .builder-player-option,
.studio-shell[data-builder-active="true"] .option-group--radius-brand .builder-player-option { border-radius: var(--configux-radius-medium); }
.studio-shell[data-builder-active="true"] .option-group--radius-large .builder-player-option { border-radius: var(--configux-radius-large); }

.studio-shell[data-builder-active="true"] .option-group--text-start .builder-player-option-label,
.studio-shell[data-builder-active="true"] .option-group--text-center .builder-player-option-label,
.studio-shell[data-builder-active="true"] .option-group--text-end .builder-player-option-label { flex: 1 1 auto; width: auto; }
.studio-shell[data-builder-active="true"] .option-group--text-start .builder-player-option-label { text-align: start; }
.studio-shell[data-builder-active="true"] .option-group--text-center .builder-player-option-label { text-align: center; }
.studio-shell[data-builder-active="true"] .option-group--text-end .builder-player-option-label { text-align: end; }

.studio-shell[data-builder-active="true"] .builder-player-dropdown {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--configux-radius-small);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
}

.studio-shell[data-builder-active="true"] .builder-player-option-search {
  width: 100%;
  min-height: 38px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
}

.studio-shell[data-builder-active="true"] .builder-player-group--many { max-height: none; overflow: visible; }
.studio-shell[data-builder-active="true"] .builder-player-group--many .builder-player-option-grid { max-height: 320px; padding-right: 4px; overflow-y: auto; }
.studio-shell[data-builder-active="true"] .option-group--many-view_all .builder-player-option-grid,
.studio-shell[data-builder-active="true"] .option-group--many-carousel .builder-player-option-grid { max-height: none; padding-right: 0; overflow-y: visible; }
.studio-shell[data-builder-active="true"] .builder-player-view-all { width: 100%; min-height: 40px; margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.studio-shell[data-builder-active="true"] .option-group--many-carousel .builder-player-option-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--carousel-basis-desktop, 50%) - 5px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: none;
  scrollbar-width: thin;
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .option-group--many-carousel .builder-player-option-grid { grid-auto-columns: calc(var(--carousel-basis-tablet, 50%) - 5px); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .option-group--many-carousel .builder-player-option-grid { grid-auto-columns: calc(var(--carousel-basis-mobile, 100%) - 2px); }
.studio-shell[data-builder-active="true"] .option-group--many-carousel .builder-player-option { scroll-snap-align: start; }
.studio-shell[data-builder-active="true"] .builder-player-carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.studio-shell[data-builder-active="true"] .builder-player-carousel-controls button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

.studio-shell[data-builder-active="true"] .builder-layout-price.summary-card {
  min-width: 0;
  width: 100%;
  height: auto;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: var(--configux-radius-large);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.studio-shell[data-builder-active="true"] .builder-layout-price.summary-card > div { display: flex; align-items: baseline; justify-content: flex-end; gap: 16px; }
.studio-shell[data-builder-active="true"] .builder-layout-price.summary-card strong { color: var(--ink); font-size: 22px; letter-spacing: -.03em; }

.studio-shell[data-builder-active="true"] .builder-layout-primary-action.player-primary-action {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  border: 0;
  border-radius: var(--configux-radius-small);
  color: var(--builder-brand-accent-contrast, #fff);
  background: var(--accent);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.studio-shell[data-builder-active="true"] .builder-layout-primary-action.player-primary-action:disabled {
  color: #667085;
  background: #e4e7ec;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
  filter: none;
}
.studio-shell[data-builder-active="true"] .builder-layout-reset.player-panel-reset {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--configux-radius-small);
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.studio-shell[data-builder-active="true"] .builder-layout-heading.player-content-heading { margin: 4px 0 0; color: var(--ink); font-size: 21px; line-height: 1.2; }
.studio-shell[data-builder-active="true"] .builder-layout-text.player-content-text { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.studio-shell[data-builder-active="true"] .builder-buyer-input { display: grid; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
.studio-shell[data-builder-active="true"] .builder-buyer-input input, .studio-shell[data-builder-active="true"] .builder-buyer-input textarea { min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-weight: 500; }
.studio-shell[data-builder-active="true"] .builder-buyer-input textarea { min-height: 96px; resize: vertical; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-dropzone { min-height: 136px; gap: 7px; padding: 19px 14px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-icon { width: 34px; height: 34px; font-size: 20px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-dropzone strong { font-size: 13px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-dropzone small { font-size: 10px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-preview-note { font-size: 11px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-list li { font-size: 11px; }
.studio-shell[data-builder-active="true"] .builder-buyer-input--file .buyer-file-dropzone input[type="file"] { min-height: 0; padding: 0; border: 0; background: transparent; box-sizing: border-box; }
.studio-shell[data-builder-active="true"] .builder-buyer-input.buyer-input--measurement input.buyer-measurement-slider {
  height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent;
}

.studio-shell[data-builder-active="true"] .builder-viewer-control-cluster {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.studio-shell[data-builder-active="true"] .builder-viewer-control-cluster[data-anchor="top_left"] { top: 14px; left: 14px; }
.studio-shell[data-builder-active="true"] .builder-viewer-control-cluster[data-anchor="top_right"] { top: 14px; right: 14px; }
.studio-shell[data-builder-active="true"] .builder-viewer-control-cluster[data-anchor="bottom_left"] { bottom: 14px; left: 14px; }
.studio-shell[data-builder-active="true"] .builder-viewer-control-cluster[data-anchor="bottom_right"] { right: 14px; bottom: 14px; }
.studio-shell[data-builder-active="true"] .builder-viewer-control-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgb(18 44 32 / 10%);
  backdrop-filter: blur(6px);
}
.studio-shell[data-builder-active="true"] .builder-viewer-control-button.is-selected { outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent); outline-offset: 3px; }

.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] [data-action="builder-select-element"] { cursor: default; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .builder-layout-placement.is-selected,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .builder-viewer-control-button.is-selected { outline: 0; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .builder-zone-orientation-pill { display: none; }

/* KF-19: optional, write-free learning and edge-state preview controls. */
.builder-learning-tools { position: relative; display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.builder-topbar .builder-learning-tools { top: auto; right: auto; align-items: center; gap: 4px; }
.builder-topbar .builder-simulation-menu[open] > div { z-index: 100; }
.builder-topbar .builder-learning-tools > button,
.builder-topbar .builder-simulation-menu > summary { box-shadow: none; white-space: nowrap; }
.bux-settings { display: grid; gap: 12px; }
[data-family-inactive-form] { display: none !important; }
.bux-settings label { display: grid; gap: 5px; font-size: 12px; }
.bux-settings label.availability-toggle { display: flex; align-items: center; }
.bux-settings select { width: 100%; min-height: 38px; }
.bux-settings p { color: #6b7078; font-size: 12px; line-height: 1.45; }
.builder-file-picker input[type="file"] { width: 100%; min-width: 0; padding: 5px; border: 1px solid #d9dfeb; border-radius: 9px; color: #687386; background: #fbfcfe; font: inherit; box-sizing: border-box; }
.builder-file-picker input[type="file"]::file-selector-button { min-height: 34px; margin-right: 9px; padding: 6px 11px; border: 1px solid #cfd6e3; border-radius: 7px; color: #30394a; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.builder-file-picker input[type="file"]::file-selector-button:hover { border-color: #8795f7; background: #f1f3ff; }
.builder-product-structure:not([data-focus-depth="all"]) > .builder-product-step:not([open]),
.builder-product-structure:is([data-focus-depth="group"], [data-focus-depth="option"]) .builder-product-group:not([open]),
.builder-product-structure[data-focus-depth="option"] .builder-product-option:not([open]) { display: none; }
.builder-product-structure:is([data-focus-depth="group"], [data-focus-depth="option"]) > .builder-product-step > summary { display: none; }
.builder-product-structure[data-focus-depth="option"] .builder-product-group > summary { display: none; }
[data-builder-mode="edit"] [data-builder-surface-region] { cursor: pointer; }
[data-builder-mode="edit"] [data-builder-surface-region]:hover { outline: 1px dashed #b4b9c2; outline-offset: -2px; }
.builder-learning-tools > button,
.builder-simulation-menu > summary { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #d7ddeb; border-radius: 10px; color: #263047; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 22px rgb(27 36 65 / 10%); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; list-style: none; }
.builder-learning-tools .icon { width: 15px; height: 15px; }
.builder-simulation-menu { position: relative; }
.builder-simulation-menu > summary::-webkit-details-marker { display: none; }
.builder-simulation-menu > div { position: absolute; top: calc(100% + 6px); right: 0; width: 190px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; border: 1px solid #d7ddeb; border-radius: 12px; background: #fff; box-shadow: 0 14px 36px rgb(27 36 65 / 18%); }
.builder-simulation-menu button { min-height: 32px; padding: 6px; border: 1px solid #e0e4ed; border-radius: 8px; color: #3e4960; background: #f7f8fb; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.builder-simulation-menu button[aria-pressed="true"] { border-color: #4f6bff; color: #2544d8; background: #edf1ff; }
.builder-guide-card { position: absolute; z-index: 12; right: 18px; bottom: 18px; width: min(350px, calc(100% - 36px)); padding: 18px; border: 1px solid #ced6ff; border-radius: 16px; color: #17213a; background: rgb(255 255 255 / 98%); box-shadow: 0 18px 50px rgb(22 37 84 / 20%); }
.builder-guide-progress { display: flex; align-items: center; justify-content: space-between; color: #52617c; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.builder-guide-card h2 { margin: 12px 0 7px; font-size: 19px; line-height: 1.2; }
.builder-guide-card p { margin: 0; color: #63708a; font-size: 13px; line-height: 1.5; }
.builder-guide-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 15px; }
.builder-guide-actions button,
.builder-simulation-notice button { min-height: 34px; padding: 7px 11px; border: 1px solid #d7ddeb; border-radius: 9px; color: #2e3a53; background: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.builder-guide-actions button.button-primary { border-color: #4f6bff; color: #fff; background: #4f6bff; }
.builder-guide-actions button:disabled { opacity: .45; cursor: default; }
.builder-simulation-notice { position: absolute; z-index: 11; top: 58px; left: 50%; width: min(500px, calc(100% - 36px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; padding: 12px 14px; border: 1px solid #f0d69b; border-radius: 12px; color: #5a4614; background: rgb(255 250 235 / 97%); box-shadow: 0 12px 32px rgb(64 49 13 / 12%); transform: translateX(-50%); }
.builder-simulation-notice strong { font-size: 13px; }
.builder-simulation-notice span { grid-column: 1; color: #776537; font-size: 11px; line-height: 1.4; }
.builder-simulation-notice button { grid-column: 2; grid-row: 1 / span 2; }
.builder-simulation-notice.is-error { border-color: #f0b9b4; color: #7b2b24; background: rgb(255 245 244 / 98%); }
.builder-simulation-notice.is-error span { color: #91534d; }
.unified-builder-canvas { position: relative; }

@media (max-width: 719px) {
  .builder-learning-tools { top: 8px; right: 8px; }
  .builder-learning-tools > button span { display: none; }
  .builder-guide-card { right: 10px; bottom: 10px; width: calc(100% - 20px); }
  .builder-simulation-notice { top: 52px; width: calc(100% - 20px); }
}

@container (max-width: 360px) {
  .studio-shell[data-builder-active="true"] .builder-player-option-grid,
  .studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-shell[data-builder-active="true"] .builder-player-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .studio-shell[data-builder-active="true"] .builder-layout-price.summary-card { padding-inline: 12px; }
  .studio-shell[data-builder-active="true"] .builder-layout-price.summary-card strong { font-size: 19px; }
}

@container (max-width: 260px) {
  .studio-shell[data-builder-active="true"] .builder-player-option { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .studio-shell[data-builder-active="true"] .builder-player-swatch { width: 28px; height: 28px; }
}

@container builder-option-zone (max-width: 420px) {
  .studio-shell[data-builder-active="true"] .builder-player-option-grid,
  .studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-shell[data-builder-active="true"] .builder-player-option,
  .studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option { min-height: 44px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 9px 10px; }
  .studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-swatch { width: 28px; height: 28px; }
  .studio-shell[data-builder-active="true"] .builder-player-option-label,
  .studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option-label { overflow-wrap: normal; word-break: normal; hyphens: none; text-align: left; }
}

/* F3.7: generated Builder choices use the same compact, wrapping chip rhythm
   as Auto Build review. Media cards and dropdowns keep their authored Player
   presentation; plain buttons and colour choices no longer become long stacks. */
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--buttons .builder-player-option-grid,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--buttons .builder-player-option-grid,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--color_swatches .builder-player-option-grid,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--color_swatches .builder-player-option-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--buttons .builder-player-option,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--buttons .builder-player-option,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--color_swatches .builder-player-option,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--color_swatches .builder-player-option {
  width: auto;
  min-width: 0;
  min-height: 34px;
  flex: 0 1 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 6px 10px;
  text-align: left;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--color_swatches .builder-player-swatch,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--color_swatches .builder-player-swatch {
  width: 13px;
  height: 13px;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--color_swatches .builder-player-swatch svg,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--color_swatches .builder-player-swatch svg {
  width: 13px;
  height: 13px;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-option-label,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-option-label,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--color_swatches .builder-player-option-label,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--color_swatches .builder-player-option-label {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-align: left;
}

/* HUMAN-QA-FIX-1: a long customer label gets a readable full-width row in a
   sidebar. Short choices keep the compact horizontal chip layout above. */
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--long-labels .builder-player-option-grid,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--long-labels .builder-player-option-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--long-labels .builder-player-option,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--long-labels .builder-player-option {
  width: 100%;
  white-space: normal;
}
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-left-sidebar .builder-player-group--long-labels .builder-player-option-label,
.studio-shell[data-builder-active="true"] .builder-layout-zone.zone-right-sidebar .builder-player-group--long-labels .builder-player-option-label {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Q24-11: at an actual phone viewport, the contextual tools stack above the
   canvas. Later desktop sizing rules must not leave a fixed tools column that
   squeezes the customer preview to only a few pixels. */
@media (max-width: 760px) {
  .studio-shell[data-builder-active="true"] .unified-builder-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(132px, 32dvh) minmax(0, 1fr);
  }
  .studio-shell[data-builder-active="true"] .unified-builder-toolbox {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid #dfe3eb;
  }
  .studio-shell[data-builder-active="true"] .unified-builder-canvas { min-width: 0; }
  .studio-shell[data-builder-active="true"] .builder-toolbox-resizer { display: none; }
  .studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-device-frame,
  .studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-device-frame {
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: none;
  }
}

/* ------------------------------------------------------------------ */
/* BUILDER-1: one design system inside the Builder panel.             */
/* Readable scale, one spacing rhythm, visible hierarchy (step band,  */
/* group card, indented option card), labels as placeholders, no dead */
/* space from narrow to wide. Declared last so it wins over the       */
/* historical 6-8 px rules above without touching them.               */
/* ------------------------------------------------------------------ */
.unified-builder-toolbox {
  --bt-fs-xs: 10px;
  --bt-fs-sm: 11px;
  --bt-fs-md: 12px;
  --bt-fs-lg: 13px;
  --bt-gap: 8px;
  --bt-pad: 10px;
  --bt-radius: 8px;
  --bt-control: 34px;
  --bt-line: #e3e7ee;
  --bt-muted: #6b7280;
  --bt-step: #eef1ff;
  --bt-group: #ffffff;
  --bt-option: #f8f9fb;
  container-type: inline-size;
  font-size: var(--bt-fs-sm);
}
.unified-builder-toolbox .builder-context-tabs button { font-size: var(--bt-fs-sm); }
.unified-builder-toolbox .eyebrow { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-panel-heading h2 { font-size: var(--bt-fs-lg); }
.unified-builder-toolbox .builder-panel-heading > p:last-child,
.unified-builder-toolbox .builder-toolbox-note strong,
.unified-builder-toolbox .builder-toolbox-note small { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-toolbox-collapse { display: none; }

/* Fields: label is the placeholder, span is for screen readers only. */
.unified-builder-toolbox .builder-product-panel label { margin-top: 0; gap: 4px; color: #3a4150; font-size: var(--bt-fs-xs); font-weight: 700; }
.unified-builder-toolbox .builder-product-panel label.builder-field { display: block; }
.unified-builder-toolbox .builder-product-panel input[type="text"],
.unified-builder-toolbox .builder-product-panel select,
.unified-builder-toolbox .builder-product-panel input[type="number"] { height: var(--bt-control); padding: 0 10px; border: 1px solid var(--bt-line); border-radius: var(--bt-radius); font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-panel input::placeholder { color: #9aa1ad; }
.unified-builder-toolbox .builder-product-panel input:focus-visible,
.unified-builder-toolbox .builder-product-panel select:focus-visible { outline: 2px solid rgb(79 107 255 / 35%); outline-offset: 1px; border-color: #8999f1; }
.unified-builder-toolbox .builder-product-panel .availability-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: var(--bt-fs-sm); font-weight: 600; }
.unified-builder-toolbox .builder-product-panel label > span:not(.sr-only) { font-size: var(--bt-fs-xs); }

/* Hierarchy */
.unified-builder-toolbox .builder-product-panel { gap: calc(var(--bt-gap) * 1.5); }
.unified-builder-toolbox .builder-product-summary strong { font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-summary span { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-product-step { gap: var(--bt-gap); padding: 0; border: 0; }
.unified-builder-toolbox .builder-step-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--bt-gap); padding: 8px; border-radius: var(--bt-radius); background: var(--bt-step); }
.unified-builder-toolbox .builder-step-bar .builder-field { margin: 0; }
.unified-builder-toolbox .builder-step-bar input[type="text"] { height: 30px; background: #fff; font-weight: 700; }
.unified-builder-toolbox .builder-level-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; color: #344ac5; background: #fff; font-size: var(--bt-fs-xs); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.unified-builder-toolbox .builder-level-badge.is-group { color: #1f6f4a; background: #e6f4ec; }
.unified-builder-toolbox .builder-level-badge.is-option { color: #6b4a9d; background: #efe9fb; }
.unified-builder-toolbox .builder-product-group { margin: 0 0 0 6px; padding: 0; border: 1px solid var(--bt-line); border-left: 3px solid #9ccbb1; border-radius: var(--bt-radius); background: var(--bt-group); }
.unified-builder-toolbox .builder-product-group > summary { padding: 10px 12px; border-radius: var(--bt-radius); }
.unified-builder-toolbox .builder-product-group > summary small,
.unified-builder-toolbox .builder-product-group > summary em,
.unified-builder-toolbox .builder-product-group > summary b { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-product-group > summary strong { font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-group.is-selected { border-color: #8999f1; border-left-color: #4f6bff; box-shadow: 0 0 0 3px rgb(79 107 255 / 12%); }
.unified-builder-toolbox .builder-product-group-body { gap: var(--bt-gap); padding: 0 12px 12px; }
.unified-builder-toolbox .builder-product-option { margin-left: 6px; padding: var(--bt-pad); border: 1px solid var(--bt-line); border-left: 3px solid #c9b9ea; border-radius: var(--bt-radius); background: var(--bt-option); display: grid; gap: var(--bt-gap); }
.unified-builder-toolbox .builder-product-option.is-selected { border-color: #8999f1; border-left-color: #4f6bff; }
.unified-builder-toolbox .builder-product-options { display: grid; gap: var(--bt-gap); }
.unified-builder-toolbox .builder-product-toolbar { gap: var(--bt-gap); }
.unified-builder-toolbox .builder-product-toolbar > strong, .unified-builder-toolbox .builder-product-toolbar > span { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-choice-display { gap: var(--bt-gap); padding: var(--bt-pad); border-radius: var(--bt-radius); }
.unified-builder-toolbox .builder-choice-display-heading,
.unified-builder-toolbox .builder-choice-display-per-row > p,
.unified-builder-toolbox .builder-choice-display-card-style > p { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-context-add { min-height: 34px; font-size: var(--bt-fs-sm); border-radius: var(--bt-radius); }
.unified-builder-toolbox .builder-context-add .icon { width: 14px; height: 14px; }
.unified-builder-toolbox .builder-product-panel .builder-order-actions button { min-height: 28px; font-size: var(--bt-fs-xs); border-radius: 6px; }

/* QA Main Q6: Options is a quiet single-open hierarchy. The customer Player
   stays untouched; these colors and outlines exist only in authoring chrome. */
.builder-options-panel { align-content: start; }
.builder-options-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--bt-line); border-radius: 10px; background: #f4f6f9; }
.builder-options-tabs button { min-width: 0; min-height: 34px; padding: 0 8px; border: 0; border-radius: 7px; color: #626a76; background: transparent; font-size: var(--bt-fs-sm); font-weight: 760; cursor: pointer; }
.builder-options-tabs button[aria-selected="true"] { color: #243ec3; background: #fff; box-shadow: 0 1px 3px rgb(20 31 55 / 12%); }
.builder-options-panel [role="tabpanel"] { display: grid; gap: 12px; min-width: 0; }
.builder-options-panel [role="tabpanel"][hidden] { display: none; }
.builder-options-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--bt-muted); font-size: var(--bt-fs-xs); }
.builder-options-breadcrumb button { min-height: 30px; padding: 0 8px; border: 1px solid var(--bt-line); border-radius: 7px; color: #344ac5; background: #fff; cursor: pointer; }
.builder-options-breadcrumb strong { max-width: 150px; overflow: hidden; color: #343b47; text-overflow: ellipsis; white-space: nowrap; }
.builder-options-product-basics { border: 1px solid var(--bt-line); border-radius: var(--bt-radius); background: #fff; }
.builder-options-product-basics > summary,
.unified-builder-toolbox .builder-product-step > summary,
.unified-builder-toolbox .builder-product-option > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--bt-radius); color: #2f3540; cursor: pointer; list-style: none; }
.builder-options-product-basics > summary::-webkit-details-marker,
.unified-builder-toolbox .builder-product-step > summary::-webkit-details-marker,
.unified-builder-toolbox .builder-product-option > summary::-webkit-details-marker,
.builder-options-disclosure > summary::-webkit-details-marker { display: none; }
.builder-options-product-basics > summary > span,
.unified-builder-toolbox .builder-product-step > summary > span,
.unified-builder-toolbox .builder-product-option > summary > span { min-width: 0; display: grid; gap: 2px; }
.builder-options-product-basics > summary small,
.unified-builder-toolbox .builder-product-step > summary small,
.unified-builder-toolbox .builder-product-option > summary small { color: var(--bt-muted); font-size: var(--bt-fs-xs); }
.builder-options-product-basics > summary strong,
.unified-builder-toolbox .builder-product-step > summary strong,
.unified-builder-toolbox .builder-product-option > summary strong { overflow: hidden; font-size: var(--bt-fs-md); text-overflow: ellipsis; white-space: nowrap; }
.builder-options-product-basics > summary b,
.unified-builder-toolbox .builder-product-step > summary b,
.unified-builder-toolbox .builder-product-option > summary b { flex: 0 0 auto; color: #69717c; font-size: var(--bt-fs-xs); }
.builder-options-product-basics > div { display: grid; gap: var(--bt-gap); padding: 0 12px 12px; }
.unified-builder-toolbox .builder-product-step { display: block; border: 1px solid #cfd6f9; border-left: 3px solid #7185ef; border-radius: var(--bt-radius); background: #fbfcff; }
.unified-builder-toolbox .builder-product-step.is-selected { border-color: #4f6bff; box-shadow: 0 0 0 3px rgb(79 107 255 / 12%); }
.builder-options-step-body { display: grid; gap: var(--bt-gap); padding: 0 10px 10px; }
.builder-options-group-list { display: grid; gap: var(--bt-gap); }
.builder-options-core { display: grid; gap: var(--bt-gap); padding-top: 4px; }
.builder-options-core[hidden] { display: none; }
.unified-builder-toolbox .builder-product-group.has-validation { border-color: #d8847c; border-left-color: #b53f36; }
.unified-builder-toolbox .builder-product-group.has-validation > summary b { color: #a33a31; }
.unified-builder-toolbox .builder-product-option { display: block; margin-left: 6px; padding: 0; }
.unified-builder-toolbox .builder-product-option > summary { background: var(--bt-option); }
.unified-builder-toolbox .builder-product-option.is-selected { box-shadow: 0 0 0 3px rgb(107 74 157 / 12%); }
.builder-options-option-body { display: grid; gap: var(--bt-gap); padding: 0 var(--bt-pad) var(--bt-pad); }
.builder-options-disclosure { min-width: 0; border: 1px solid var(--bt-line); border-radius: 8px; background: #fff; }
.builder-options-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; color: #3a4150; font-size: var(--bt-fs-sm); font-weight: 730; cursor: pointer; list-style: none; }
.builder-options-disclosure > summary span { color: var(--bt-muted); font-size: var(--bt-fs-xs); font-weight: 600; }
.builder-options-disclosure[open] > summary { border-bottom: 1px solid var(--bt-line); }
.builder-options-disclosure > :not(summary) { margin: 9px; }
.builder-options-canvas-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: #59616c; background: #f4f6f9; font-size: var(--bt-fs-xs); }
.builder-options-canvas-state button { min-height: 30px; padding: 0 9px; border: 1px solid #aab5ee; border-radius: 7px; color: #344ac5; background: #fff; font-weight: 700; cursor: pointer; }
.builder-options-intro { display: grid; gap: 4px; }
.builder-options-intro h3, .builder-options-intro p { margin: 0; }
.builder-options-intro > p:last-child { color: var(--bt-muted); font-size: var(--bt-fs-xs); line-height: 1.5; }
.builder-options-add-grid { display: grid; gap: 9px; }
.builder-options-add-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 11px; border: 1px solid var(--bt-line); border-radius: 10px; background: #fff; }
.builder-options-add-card > .icon { width: 18px; height: 18px; color: #4f6bff; }
.builder-options-add-card h4, .builder-options-add-card p { margin: 0; }
.builder-options-add-card h4 { font-size: var(--bt-fs-md); }
.builder-options-add-card p { margin-top: 2px; color: var(--bt-muted); font-size: var(--bt-fs-xs); line-height: 1.4; }
.builder-options-add-card label, .builder-options-add-card > button { grid-column: 1 / -1; }
.builder-options-add-card > button { min-height: 36px; border: 1px solid #4f6bff; border-radius: 8px; color: #fff; background: #4f6bff; font-weight: 760; cursor: pointer; }
.builder-options-add-card > button:disabled { opacity: .45; cursor: default; }
.builder-options-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 14px; border: 1px dashed #cdd3df; border-radius: 12px; color: var(--bt-muted); text-align: center; background: #fafbfc; }
.builder-options-empty .icon { width: 24px; height: 24px; color: #6d78a8; }
.builder-options-empty h3, .builder-options-empty p { margin: 0; }
.builder-options-empty > p:last-child { max-width: 250px; font-size: var(--bt-fs-xs); line-height: 1.5; }
.builder-special-add-grid,
.builder-special-list { display: grid; gap: 9px; }
.builder-special-add-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--bt-line); border-radius: 10px; background: #fff; }
.builder-special-add-card > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #3c55dc; background: #eef1ff; }
.builder-special-add-card .icon { width: 17px; height: 17px; }
.builder-special-add-card h4,
.builder-special-add-card p { margin: 0; }
.builder-special-add-card h4 { font-size: var(--bt-fs-md); }
.builder-special-add-card p { margin-top: 2px; color: var(--bt-muted); font-size: var(--bt-fs-xs); line-height: 1.4; }
.builder-special-add-card button { min-width: 58px; min-height: 36px; border: 1px solid #4f6bff; border-radius: 8px; color: #fff; background: #4f6bff; font-weight: 760; cursor: pointer; }
.builder-special-list { padding-top: 2px; }
.builder-model-dimensions { display: grid; gap: 10px; padding: 13px; margin-bottom: 12px; border: 1px solid #d9deea; border-radius: 12px; background: #fff; }
.builder-model-dimensions > p { margin: 0; color: #576174; font-size: var(--bt-fs-xs); line-height: 1.5; }
.builder-model-dimensions .builder-setting-heading { margin: 0; }
.builder-model-dimensions .builder-setting-heading > div { display: grid; gap: 2px; }
.builder-model-dimensions .builder-setting-heading strong { font-size: var(--bt-fs-md); }
.builder-model-dimensions .builder-setting-heading small { color: #657184; font-size: var(--bt-fs-xs); }
.builder-dimension-group-settings { display: grid; gap: 8px; padding: 10px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fafbfe; }
.builder-dimension-group-settings > label, .builder-dimension-group-settings [data-dimension-group-controls] > label { min-width: 0; font-size: var(--bt-fs-xs); color: #273342; }
.builder-dimension-group-settings > label, .builder-dimension-group-settings [data-dimension-group-controls] > label:last-child { display: flex; align-items: center; gap: 7px; }
.builder-dimension-group-settings input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.builder-dimension-group-settings [data-dimension-group-controls] { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.builder-dimension-group-settings [data-dimension-group-controls][hidden] { display: none; }
.builder-dimension-group-settings [data-dimension-group-controls] > label:first-child, .builder-dimension-group-settings [data-dimension-group-controls] > label:last-child { grid-column: 1 / -1; }
.builder-dimension-group-settings [data-dimension-group-controls] > label:not(:last-child) { display: grid; gap: 4px; }
.builder-dimension-group-settings input[type="text"], .builder-dimension-group-settings select { width: 100%; min-width: 0; min-height: 36px; padding: 6px 8px; border: 1px solid #ccd4df; border-radius: 7px; background: #fff; color: #1c2530; font: inherit; }
.builder-dimension-group-settings > button { justify-self: start; }
.builder-model-dimensions .builder-dimension-selected { padding: 8px 10px; border-radius: 8px; background: #eef2ff; color: #3448a5; }
.builder-dimension-item { min-width: 0; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; }
.builder-dimension-item > summary { display: grid; gap: 3px; padding: 11px 12px; cursor: pointer; list-style: none; }
.builder-dimension-item > summary::-webkit-details-marker { display: none; }
.builder-dimension-item > summary strong { font-size: var(--bt-fs-sm); }
.builder-dimension-item > summary span { color: #657184; font-size: var(--bt-fs-xs); overflow-wrap: anywhere; }
.builder-dimension-item[open] > summary { border-bottom: 1px solid #e4e7ed; }
.builder-dimension-editor { display: grid; gap: 11px; padding: 12px; }
.builder-dimension-editor label { display: grid; gap: 5px; min-width: 0; color: #273342; font-size: var(--bt-fs-xs); font-weight: 650; }
.builder-dimension-editor [hidden] { display: none !important; }
.builder-dimension-editor input, .builder-dimension-editor select { width: 100%; min-width: 0; min-height: 40px; padding: 7px 9px; border: 1px solid #ccd4df; border-radius: 8px; background: #fff; color: #1c2530; font: inherit; }
.builder-dimension-editor label small { color: #687387; font-weight: 400; line-height: 1.35; }
.builder-dimension-two, .builder-dimension-measures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.builder-dimension-connected, .builder-dimension-caveat, .builder-dimension-followers p { margin: 0; color: #657184; font-size: var(--bt-fs-xs); line-height: 1.5; }
.builder-dimension-followers { border-top: 1px solid #e5e8ee; padding-top: 8px; }
.builder-dimension-followers > summary { cursor: pointer; font-weight: 700; font-size: var(--bt-fs-xs); }
.builder-dimension-followers p { margin: 7px 0; }
.builder-dimension-follower-list { display: grid; gap: 7px; max-height: 210px; overflow: auto; }
.builder-dimension-follower-list label { grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr); align-items: center; }
.builder-dimension-follower-list label span { overflow-wrap: anywhere; }
.builder-dimension-choice-values { display: grid; gap: 7px; }
.builder-dimension-choice-values > strong { font-size: var(--bt-fs-xs); }
.builder-dimension-choice-row { grid-template-columns: minmax(0, 1fr) 90px 20px; align-items: center; }
.builder-dimension-choice-row span { overflow-wrap: anywhere; }
.builder-dimension-error { margin: 0; padding: 8px 10px; border-radius: 8px; color: #9d2e23; background: #fff1ef; font-size: var(--bt-fs-xs); }
.builder-dimension-actions { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 560px) { .builder-dimension-two, .builder-dimension-measures { grid-template-columns: 1fr; } }
.builder-special-linked { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #59616c; font-size: var(--bt-fs-xs); }
.builder-special-editor { border: 1px solid var(--bt-line); border-radius: 10px; background: #fff; }
.builder-special-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 11px; cursor: pointer; list-style: none; }
.builder-special-editor > summary::-webkit-details-marker { display: none; }
.builder-special-editor > summary span { min-width: 0; display: grid; gap: 2px; }
.builder-special-editor > summary small { color: var(--bt-muted); font-size: var(--bt-fs-xs); font-weight: 650; }
.builder-special-editor > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bt-fs-sm); }
.builder-special-editor > summary b { color: #3c55dc; font-size: var(--bt-fs-xs); }
.builder-special-editor[open] > summary { border-bottom: 1px solid var(--bt-line); }
.builder-special-editor-body { display: grid; gap: 10px; padding: 11px; }
.builder-special-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.builder-special-authority-note,
.builder-special-legacy-note { margin: 0; padding: 8px 10px; border-radius: 8px; color: #59616c; background: #f4f6f9; font-size: var(--bt-fs-xs); line-height: 1.45; }
.builder-special-remove { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #efc2bd; border-radius: 8px; color: #a12d22; background: #fff; font-weight: 740; cursor: pointer; }
.builder-special-remove .icon { width: 15px; height: 15px; }
.builder-element-bound-note strong { color: #344ac5; }

/* No dead space: fields share rows when the panel is wide, never overflow when narrow. */
.unified-builder-toolbox .builder-product-option,
.unified-builder-toolbox .builder-product-group-body { min-width: 0; }
.unified-builder-toolbox .builder-product-panel input, .unified-builder-toolbox .builder-product-panel select { min-width: 0; max-width: 100%; }
@container (min-width: 360px) {
  .unified-builder-toolbox .builder-product-option { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unified-builder-toolbox .builder-product-option > .builder-product-toolbar,
  .unified-builder-toolbox .builder-product-option > .availability-toggle,
  .unified-builder-toolbox .builder-product-option > .builder-element-image-editor,
  .unified-builder-toolbox .builder-product-option > label:not(.builder-field) { grid-column: 1 / -1; }
  .unified-builder-toolbox .builder-choice-display { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unified-builder-toolbox .builder-choice-display > .builder-choice-display-heading,
  .unified-builder-toolbox .builder-choice-display > .availability-toggle,
  .unified-builder-toolbox .builder-choice-display > .builder-choice-display-per-row,
  .unified-builder-toolbox .builder-choice-display > .builder-choice-display-many,
  .unified-builder-toolbox .builder-choice-display > .builder-choice-display-card-style { grid-column: 1 / -1; }
}
@container (max-width: 250px) {
  .unified-builder-toolbox .builder-step-bar { grid-template-columns: auto minmax(0, 1fr); }
  .unified-builder-toolbox .builder-step-bar .builder-order-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .unified-builder-toolbox .builder-choice-display-per-row { grid-template-columns: 1fr; }
  .unified-builder-toolbox .builder-choice-display-many,
  .unified-builder-toolbox .builder-choice-display-card-style { grid-template-columns: 1fr; }
}

/* BUILDER-2: icons instead of text buttons; hover trash on placements. */
.unified-builder-toolbox .builder-icon-button,
.builder-icon-button { width: 28px; height: 28px; min-height: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #dfe3eb; border-radius: 7px; color: #4b5563; background: #fff; cursor: pointer; }
.builder-icon-button .icon { width: 14px; height: 14px; }
.builder-icon-button:hover:not(:disabled) { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.builder-icon-button:disabled { opacity: .35; cursor: default; }
.builder-icon-button.builder-remove { color: #9a5445; }
.builder-icon-button.builder-remove:hover:not(:disabled) { border-color: #f0c4bf; color: #b42318; background: #fdf1ef; }
.unified-builder-toolbox .builder-product-panel .builder-order-actions { gap: 4px; }
.unified-builder-toolbox .builder-product-panel .builder-order-actions button { min-height: 28px; padding: 0; }
.builder-element-editor-actions button { display: inline-flex; align-items: center; gap: 6px; }
.builder-element-editor-actions button .icon { width: 13px; height: 13px; }
.builder-layout-placement { position: relative; }
.builder-placement-remove { position: absolute; top: 4px; right: 4px; z-index: 3; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid #f0c4bf; border-radius: 6px; color: #b42318; background: rgb(255 255 255 / 96%); box-shadow: 0 2px 8px rgb(13 13 13 / 10%); opacity: 0; transform: scale(.92); transition: opacity 120ms ease, transform 120ms ease; cursor: pointer; }
.builder-placement-remove .icon { width: 13px; height: 13px; }
.builder-layout-placement:hover > .builder-placement-remove,
.builder-layout-placement:focus-within > .builder-placement-remove,
.builder-placement-remove:focus-visible { opacity: 1; transform: scale(1); }
.builder-placement-remove:hover { background: #fdf1ef; }
.studio-shell[data-builder-mode="preview"] .builder-placement-remove { display: none; }

/* BUILDER-3: Studio menu inside the Builder; the left column swaps. */
.builder-studio-nav { display: grid; gap: 6px; padding: 4px 0 12px; }
.builder-studio-nav[hidden] { display: none; }
.builder-studio-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.builder-studio-nav .nav-link { min-height: 38px; padding: 0 10px; border-radius: 9px; color: #3a4150; font-size: 12px; font-weight: 600; }
.builder-studio-nav .nav-link .icon { width: 16px; height: 16px; color: #6b7280; }
.builder-studio-nav .nav-link:hover { background: #f2f4f8; color: #0d0d0d; }
.builder-studio-nav .nav-link.is-active { background: #eef1ff; color: #344ac5; }
.builder-studio-nav .nav-link.is-active .icon { color: #4f6bff; }
[data-builder-shell][data-builder-nav="studio"] .builder-context-tabs,
[data-builder-shell][data-builder-nav="studio"] .builder-context-content,
[data-builder-shell][data-builder-nav="studio"] .builder-toolbox-note { display: none; }
.builder-nav-toggle[aria-pressed="true"] { color: #344ac5; background: #eef1ff; }


/* BUILDER-4: drag handles, live reorder and the single image field. */
.builder-drag-handle { display: inline-flex; align-items: center; gap: 5px; cursor: grab; user-select: none; -webkit-user-select: none; }
.builder-drag-handle .icon { width: 12px; height: 12px; opacity: .7; }
.builder-drag-handle:active { cursor: grabbing; }
[data-builder-drag-item] { transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease; }
[data-builder-drag-item].is-dragging { opacity: .35; outline: 2px dashed #8999f1; outline-offset: -2px; }
.studio-shell[data-builder-mode="preview"] .builder-drag-handle { cursor: default; }
.builder-image-field { display: grid; gap: 8px; margin-top: 10px; }
.builder-image-field.is-empty { grid-template-columns: minmax(0, 1fr); }
.builder-image-dropzone { display: grid; justify-items: center; gap: 3px; padding: 14px 10px; border: 1.5px dashed #c9d0db; border-radius: 10px; background: #f8f9fb; color: #5b6472; text-align: center; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.builder-image-dropzone .icon { width: 18px; height: 18px; color: #6b7280; margin-bottom: 2px; }
.builder-image-dropzone strong { font-size: 12px; color: #1f2430; }
.builder-image-dropzone span { font-size: 11px; }
.builder-image-dropzone span u { color: #344ac5; text-decoration: underline; text-underline-offset: 2px; }
.builder-image-dropzone small { font-size: 10px; color: #8a919c; }
.builder-image-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.builder-image-dropzone:hover, .builder-image-field.is-dragover .builder-image-dropzone { border-color: #8999f1; background: #f2f4ff; }
.builder-image-field.is-dragover { outline: 2px solid #8999f1; outline-offset: 2px; border-radius: 10px; }
.builder-image-field.is-busy { opacity: .6; pointer-events: none; }
.builder-image-source { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid #d6dbe3; border-radius: 8px; background: #fff; color: #3a4150; font-size: 11px; font-weight: 600; cursor: pointer; }
.builder-image-source .icon { width: 13px; height: 13px; }
.builder-image-source:hover { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.builder-image-field.has-image { grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; }
.builder-image-field.has-image .builder-element-image-preview { min-height: 64px; height: 64px; width: 64px; border-radius: 8px; }
.builder-image-field.has-image .builder-element-image-preview img { max-height: 62px; }
.builder-image-meta { display: grid; gap: 2px; min-width: 0; }
.builder-image-meta strong { font-size: 12px; color: #1f2430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-image-meta small { font-size: 10px; color: #6b7280; }
.builder-image-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.builder-image-change { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid #d6dbe3; border-radius: 8px; background: #fff; color: #3a4150; font-size: 11px; font-weight: 600; cursor: pointer; }
.builder-image-change .icon { width: 13px; height: 13px; }
.builder-image-change:hover { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.builder-image-change input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.builder-image-actions .builder-icon-button { margin-left: auto; }
.builder-image-change, .builder-image-source { white-space: nowrap; }
.builder-image-field.has-image .builder-image-change span,
.builder-image-field.has-image .builder-image-source span { display: none; }
.builder-image-field.has-image .builder-image-change,
.builder-image-field.has-image .builder-image-source { min-width: 30px; padding: 0 8px; }
@container (min-width: 300px) {
  .builder-image-field.has-image .builder-image-change span,
  .builder-image-field.has-image .builder-image-source span { display: inline; }
  .builder-image-field.has-image .builder-image-change,
  .builder-image-field.has-image .builder-image-source { padding: 0 10px; }
}
.unified-builder-toolbox .builder-product-option > .builder-image-field { grid-column: 1 / -1; }

/* BUILDER-5: tooltips - icon or text trigger, popover or side panel. */
.option-group legend .option-group-label { vertical-align: middle; }
.option-group-heading { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; vertical-align: middle; }
.option-group-heading > :is(.option-group-label, .customer-group-toggle) { min-width: 0; overflow-wrap: anywhere; }
.option-group-heading > .option-tooltip { flex: 0 0 auto; margin-left: 0; }
.option-tooltip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; --tooltip-ink: var(--tooltip-color, #5c6a63); }
.option-group-tooltip-row { margin: -4px 0 8px; }
.option-tooltip-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--tooltip-ink); font: inherit; font-size: 12px; line-height: 1; cursor: help; }
.option-tooltip--click .option-tooltip-trigger { cursor: pointer; }
.option-tooltip-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }
.option-tooltip-glyph--exclamation { font-size: 12px; }
.option-tooltip-text { font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.option-tooltip-trigger:hover, .option-tooltip.is-open .option-tooltip-trigger { color: var(--tooltip-color, #1f2a24); }
.option-tooltip.is-open .option-tooltip-glyph { background: var(--tooltip-ink); color: #fff; border-color: var(--tooltip-ink); }
.option-tooltip-trigger:focus-visible { outline: 2px solid var(--tooltip-ink); outline-offset: 2px; }
.option-tooltip-bubble { position: absolute; z-index: 6; width: max-content; max-width: min(260px, 70vw); padding: 8px 10px; border-radius: 8px; background: #1f2a24; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgb(13 13 13 / 18%); transform: translate(calc(-50% + var(--tooltip-shift, 0px)), calc(-100% - 8px)); pointer-events: auto; }
.option-tooltip-bubble::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--tooltip-shift, 0px)); width: 0; height: 0; border: 6px solid transparent; border-top-color: #1f2a24; transform: translateX(-50%); }
.option-tooltip-bubble.is-below { transform: translate(calc(-50% + var(--tooltip-shift, 0px)), 8px); }
.option-tooltip-bubble.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1f2a24; }
.option-tooltip-bubble[hidden] { display: none; }
.option-cell { position: relative; display: grid; min-width: 0; }
.option-cell > .option-button { width: 100%; height: 100%; }
.option-cell > .option-tooltip { position: absolute; top: 6px; right: 6px; margin: 0; }
.option-cell > .option-tooltip .option-tooltip-trigger { background: rgb(255 255 255 / 92%); }
.option-cell[hidden] { display: none; }
.builder-player-layout { position: relative; }
.option-tooltip-panel { position: absolute; inset: 0 0 0 auto; z-index: 8; width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 24px; overflow: auto; background: #fff; color: var(--ink, #1f2a24); box-shadow: -12px 0 32px rgb(13 13 13 / 16%); transform: translateX(100%); transition: transform 220ms ease; }
.option-tooltip-panel.is-open { transform: translateX(0); }
.option-tooltip-panel[hidden] { display: none; }
.option-tooltip-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-tooltip-panel-header strong { font-size: 16px; font-weight: 750; }
.option-tooltip-panel-close { width: 32px; height: 32px; border: 1px solid var(--line, #d5ddd8); border-radius: 50%; background: #fff; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.option-tooltip-panel-close:hover { background: #f2f4f3; }
.option-tooltip-panel-image { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; }
.option-tooltip-panel-text { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .option-tooltip-panel { transition: none; } }

/* BUILDER-5: the tooltip section in the Product tab. */
.builder-tooltip-section { margin-top: 8px; }
.builder-tooltip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.builder-tooltip-grid > label { display: grid; gap: 4px; min-width: 0; }
.builder-tooltip-grid > label > span:first-child { font-size: 10px; font-weight: 600; color: #526057; }
.builder-tooltip-color { grid-column: 1 / -1; }
.builder-tooltip-color-row { display: flex; align-items: center; gap: 10px; }
.builder-tooltip-color-row input[type="color"] { width: 36px; height: 28px; padding: 0 2px; border: 1px solid #ccd3dc; border-radius: 6px; background: #fff; }
.builder-tooltip-color-row .availability-toggle { margin: 0; }
.builder-tooltip-note { margin: 0; color: #6b7280; font-size: 10px; line-height: 1.4; }
.builder-tooltip-image { display: grid; gap: 4px; }
.builder-tooltip-image .builder-image-field { margin-top: 0; }
.unified-builder-toolbox .builder-tooltip-grid { gap: var(--bt-gap); }
/* BUILDER-5: the tooltip trigger is not an option button - undo the generic preview button chrome. */
.builder-player-group .option-tooltip-trigger, .builder-player-group .option-tooltip-trigger:hover { min-height: 22px; display: inline-flex; grid-template-columns: none; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 12px; }
.builder-player-group .option-cell > .option-tooltip .option-tooltip-trigger { background: rgb(255 255 255 / 92%); }
.builder-player-group .option-tooltip-panel-close { min-height: 32px; display: inline-grid; grid-template-columns: none; padding: 0; font-size: 20px; }
.builder-player-group legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }

/* BUILDER-6: the preview follows the Player - one-line "View all", real swatches, the card look. */
.studio-shell[data-builder-active="true"] .builder-player-view-all,
.studio-shell[data-builder-active="true"] .builder-player-view-all:hover { display: block; grid-template-columns: none; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.studio-shell[data-builder-active="true"] .builder-player-view-all[hidden] { display: none; }
.studio-shell[data-builder-active="true"] .builder-player-view-all.option-view-all--text-link,
.studio-shell[data-builder-active="true"] .builder-player-view-all.option-view-all--text-link:hover { display: inline-flex; align-items: center; width: auto; max-width: 100%; min-height: 36px; margin-top: 2px; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.studio-shell[data-builder-active="true"] .builder-player-view-all.option-view-all--text-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.studio-shell[data-builder-active="true"] .builder-player-view-all.option-view-all--text-link[hidden] { display: none; }
.studio-shell[data-builder-active="true"] .builder-player-carousel-controls button { display: inline-flex; grid-template-columns: none; align-items: center; justify-content: center; white-space: nowrap; }
.studio-shell[data-builder-active="true"] .builder-player-swatch.has-color { border-color: rgb(13 13 13 / 18%); color: transparent; overflow: hidden; }
.studio-shell[data-builder-active="true"] .builder-player-swatch.has-color svg { width: 100%; height: 100%; display: block; }
.studio-shell[data-builder-active="true"] .builder-player-swatch.has-image { padding: 0; overflow: hidden; background: #fff; }
.studio-shell[data-builder-active="true"] .option-swatch-image { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option,
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option:hover,
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option[aria-pressed="true"] { border-color: transparent; background: transparent; box-shadow: none; transform: none; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option:hover .builder-player-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(13 13 13 / 25%); }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option[aria-pressed="true"] .builder-player-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-option[aria-pressed="true"] .builder-player-option-label { font-weight: 750; }
.studio-shell[data-builder-active="true"] .builder-player-group--color_swatches .builder-player-swatch { width: 40px; height: 40px; }
.studio-shell[data-builder-active="true"] .builder-player-option.has-media .builder-player-option-image { height: auto; max-height: none; aspect-ratio: 4 / 3; }
.studio-shell[data-builder-active="true"] .builder-player-option.has-media { padding: 8px; }
.studio-shell[data-builder-active="true"] .builder-player-option.has-media .builder-player-option-label { font-weight: 650; }
.studio-shell[data-builder-active="true"] .builder-player-option[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 8%, var(--surface, #fff)); box-shadow: 0 0 0 1px var(--accent); }
.builder-swatch-color > span:first-child { font-size: 10px; font-weight: 600; color: #526057; }

/* BUILDER-7: the Layout tab as pictures - preset thumbnails and an area map. */
.builder-layout-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.builder-layout-preset, .builder-layout-presets .builder-layout-preset { display: grid; justify-items: center; gap: 4px; min-height: 0; padding: 8px 6px 6px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #4b5360; font-size: 10px; font-weight: 650; cursor: pointer; }
.builder-layout-preset:hover { border-color: #9eabf6; }
.builder-layout-preset[aria-pressed="true"] { border-color: #4f6bff; color: #2f45c0; background: #f4f6ff; box-shadow: 0 0 0 1px #4f6bff; }
.builder-layout-thumb { width: 100%; max-width: 56px; height: auto; display: block; }
.builder-layout-thumb .t-viewer { fill: #dde3ff; stroke: #8999f1; stroke-width: .8; }
.builder-layout-thumb .t-panel { fill: #eef0f4; stroke: #b7bec9; stroke-width: .8; }
.builder-layout-preset[aria-pressed="true"] .builder-layout-thumb .t-viewer { fill: #c5cfff; stroke: #4f6bff; }
.builder-layout-preset[aria-pressed="true"] .builder-layout-thumb .t-panel { fill: #e4e8ff; stroke: #8999f1; }
.builder-layout-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: auto minmax(96px, 1fr) auto; gap: 5px; margin-top: 12px; padding: 6px; border: 1px solid #e1e4ea; border-radius: 10px; background: #f7f8fa; }
.builder-layout-map-center { position: relative; display: grid; min-width: 0; }
.builder-layout-area { position: relative; display: grid; min-width: 0; min-height: 34px; }
.builder-layout-area.is-top-bar, .builder-layout-area.is-bottom-bar { grid-column: 1 / -1; min-height: 32px; }
.builder-layout-area.is-left-sidebar, .builder-layout-area.is-right-sidebar, .builder-layout-map-center { grid-row: 2; }
.builder-layout-area-select { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; width: 100%; height: 100%; padding: 6px 7px; border: 1px solid #d6dbe3; border-radius: 8px; color: #434a55; background: #fff; text-align: left; cursor: pointer; }
.builder-layout-area-select strong { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.builder-layout-area-select b { flex: 0 0 auto; min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #eef0f4; color: #434a55; font-size: 10px; font-weight: 750; }
.builder-layout-area.is-viewer .builder-layout-area-select { flex-direction: column; justify-content: center; background: #eef1ff; border-color: #c5cfff; color: #2f45c0; }
.builder-layout-area.is-viewer .builder-layout-area-select b { background: #dde3ff; color: #2f45c0; }
.builder-layout-area.is-viewer-overlay { position: absolute; right: 4px; bottom: 4px; width: 56%; min-height: 0; }
.builder-layout-area.is-viewer-overlay .builder-layout-area-select { padding: 3px 6px; border-style: dashed; background: rgb(255 255 255 / 92%); }
.builder-layout-area.is-viewer-overlay .builder-layout-area-select strong { font-size: 9px; }
.builder-layout-area.is-off .builder-layout-area-select { border-style: dashed; color: #8a919c; background: #fbfbfc; }
.builder-layout-area.is-off .builder-layout-area-select b { background: #f1f3f6; color: #8a919c; }
.builder-layout-area.is-selected .builder-layout-area-select { border-color: #4f6bff; box-shadow: 0 0 0 1px #4f6bff; color: #2f45c0; }
.builder-layout-area.is-selected.is-off .builder-layout-area-select { color: #4f6bff; }
.builder-layout-area-controls { position: absolute; top: -6px; right: -4px; display: inline-flex; gap: 3px; }
.builder-layout-area.is-left-sidebar .builder-layout-area-controls, .builder-layout-area.is-right-sidebar .builder-layout-area-controls { top: auto; bottom: -6px; right: 2px; }
.builder-layout-area.is-viewer-overlay .builder-layout-area-controls { top: -8px; right: -2px; }
.builder-layout-area-power, .builder-layout-area-flow { width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #d6dbe3; border-radius: 50%; background: #fff; color: #6b7280; cursor: pointer; box-shadow: 0 1px 3px rgb(13 13 13 / 8%); }
.builder-layout-area-power .icon, .builder-layout-area-flow .icon { width: 11px; height: 11px; }
.builder-layout-area-power[aria-pressed="true"] { border-color: #8fbaa0; color: #1f7a47; background: #edf8f1; }
.builder-layout-area-power:hover, .builder-layout-area-flow:hover { border-color: #8999f1; color: #344ac5; }
.builder-layout-selected > strong { font-size: 11px; }
.builder-layout-selected li strong { font-size: 11px; }
.builder-layout-selected li small { font-size: 9px; }
.builder-layout-selected li.is-empty { font-size: 10px; }
.builder-layout-area.is-left-sidebar .builder-layout-area-select, .builder-layout-area.is-right-sidebar .builder-layout-area-select { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
.builder-layout-area.is-left-sidebar .builder-layout-area-select strong, .builder-layout-area.is-right-sidebar .builder-layout-area-select strong { max-width: 100%; }
.builder-layout-area.is-viewer-overlay .builder-layout-area-select { flex-direction: column; gap: 1px; }
.builder-layout-area.is-viewer-overlay .builder-layout-area-select b { min-width: 16px; height: 16px; font-size: 9px; }
.builder-layout-map { grid-template-rows: auto minmax(104px, 1fr) auto; }
.builder-layout-area.is-viewer .builder-layout-area-select { justify-content: flex-start; padding-top: 12px; gap: 4px; }

/* BUILDER-8: Brand presets as swatches; the Player is the preview. */
.builder-brand-presets { gap: 6px; margin-top: 4px; }
.builder-brand-presets button { display: grid; justify-items: center; gap: 5px; min-height: 0; padding: 8px 6px 7px; border-radius: 9px; font-size: 10px; font-weight: 650; }
.builder-brand-presets button[aria-pressed="true"] { box-shadow: 0 0 0 1px #4f6bff; border-color: #4f6bff; }
.builder-brand-preset-swatch { display: inline-grid; grid-template-columns: repeat(3, 1fr); width: 42px; height: 18px; overflow: hidden; border: 1px solid rgb(13 13 13 / 12%); border-radius: 6px; }
.builder-brand-preset-swatch i { display: block; }
.builder-brand-preset-swatch i:nth-child(1) { background: var(--p-accent); }
.builder-brand-preset-swatch i:nth-child(2) { background: var(--p-surface); }
.builder-brand-preset-swatch i:nth-child(3) { background: var(--p-text); }

/* BUILDER-9: Viewer background tiles, AR settings, USDZ field, stage image. */
.builder-bg-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.builder-bg-tile { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; cursor: pointer; }
.builder-bg-tile input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.builder-bg-tile-swatch { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid #d6dbe3; border-radius: 8px; background: #fff; color: #6b7280; box-sizing: border-box; }
.builder-bg-tile-swatch .icon { width: 14px; height: 14px; }
.builder-bg-tile.is-light_gray .builder-bg-tile-swatch { background: #f3f7f4; }
.builder-bg-tile.is-gray .builder-bg-tile-swatch { background: #c5c8cd; }
.builder-bg-tile.is-dark_gray .builder-bg-tile-swatch { background: #777c85; }
.quote-email-design [data-email-design-preview] { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow-wrap: anywhere; }
.quote-email-design details { margin-bottom: 14px; }
.quote-email-design textarea { width: 100%; box-sizing: border-box; }
.builder-bg-tile.is-transparent .builder-bg-tile-swatch { background-color: #fff; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0; }
.builder-bg-tile.is-custom .builder-bg-tile-swatch { background: var(--bg-custom, #f3f7f4); }
.builder-bg-tile > span:last-child { font-size: 9px; font-weight: 600; color: #526057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.builder-bg-tile input:checked ~ .builder-bg-tile-swatch { border-color: #4f6bff; box-shadow: 0 0 0 1px #4f6bff; }
.builder-bg-tile input:checked ~ span:last-child { color: #2f45c0; }
.builder-bg-tile input:focus-visible ~ .builder-bg-tile-swatch { outline: 2px solid #8999f1; outline-offset: 2px; }
.builder-viewer-background-image .builder-image-field { margin-top: 0; }
.builder-viewer-ar { display: grid; gap: 8px; }
.builder-ar-placement { margin: 0; padding: 0; border: 0; min-width: 0; }
.builder-ar-placement legend { margin-bottom: 7px; font-weight: 700; }
.builder-ar-placement-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.builder-ar-placement-options label { position: relative; min-width: 0; cursor: pointer; }
.builder-ar-placement-options input { position: absolute; opacity: 0; pointer-events: none; }
.builder-ar-placement-options span { display: grid; gap: 2px; min-height: 66px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.builder-ar-placement-options small, .builder-field-help { color: var(--muted); font-size: 11px; line-height: 1.35; }
.builder-ar-placement-options input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.builder-ar-placement-options input:focus-visible + span { outline: 2px solid #8999f1; outline-offset: 2px; }
.builder-viewer-settings .builder-choice-display-heading { margin-top: 8px; }
.builder-viewer-settings .builder-choice-display-heading:first-child { margin-top: 0; }
.builder-usdz-preview .icon { width: 22px; height: 22px; color: #6b7280; }
.studio-shell[data-builder-active="true"] .builder-player-layout.has-viewer-image .builder-player-stage { background-image: var(--builder-viewer-stage-image); background-size: cover; background-position: center; background-repeat: no-repeat; }
.studio-shell[data-builder-active="true"] .builder-player-layout.has-viewer-image .builder-player-stage model-viewer { background: transparent; }
.studio-shell[data-builder-active="true"] .builder-player-layout[data-reveal-viewer-background="true"].has-viewer-image { background-image: var(--builder-viewer-stage-image); background-size: cover; background-position: center; background-repeat: no-repeat; }
.studio-shell[data-builder-active="true"] .builder-player-layout[data-reveal-viewer-background="true"].has-viewer-image .builder-player-stage { background-color: transparent; background-image: none; }
.builder-viewer-settings label[hidden], .builder-viewer-settings .builder-viewer-background-image[hidden], .builder-viewer-settings .builder-viewer-ar[hidden] { display: none; }
.builder-viewer-settings .builder-bg-tile { display: grid; font-size: 9px; }

/* SALG-4 r2: audit fixes A-01..A-05. */
/* A-01: the step bar keeps its label readable - badge + actions on one row, the field on the next, until the toolbox is wide. */
.unified-builder-toolbox .builder-step-bar { grid-template-columns: auto minmax(0, 1fr); }
.unified-builder-toolbox .builder-step-bar .builder-order-actions { grid-column: 2; justify-self: end; }
.unified-builder-toolbox .builder-step-bar .builder-field { grid-column: 1 / -1; }
@container (min-width: 420px) {
  .unified-builder-toolbox .builder-step-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .unified-builder-toolbox .builder-step-bar .builder-order-actions { grid-column: auto; justify-self: auto; }
  .unified-builder-toolbox .builder-step-bar .builder-field { grid-column: auto; }
}
/* A-02: tile labels wrap instead of cutting. */
.builder-bg-tile > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-align: center; }
/* A-03: toggles in the Viewer settings stay one line. */
.builder-viewer-settings label.availability-toggle { display: flex; flex-direction: row; align-items: center; gap: 6px; }
/* A-04: the switcher shows when the frame was picked for the canvas width. */
.builder-device-switcher[data-auto-fit="true"] button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #8999f1; }
/* A-05: the Builder topbar wraps to two rows on phones; the device switcher stays reachable. */
@media (max-width: 600px) {
  .builder-topbar { flex-wrap: wrap; height: auto; min-height: 0; padding: 6px 8px; row-gap: 6px; }
  .builder-topbar-title { flex: 1 1 100%; min-width: 0; }
  .builder-topbar-title > div { max-width: none; }
  .builder-topbar-actions { flex: 1 1 100%; justify-content: space-between; flex-wrap: wrap; }
  .builder-topbar-actions .builder-device-switcher { display: inline-flex; }
  .builder-topbar-actions .builder-mode-switcher { order: 2; }
  .builder-save-publish-actions { margin-left: auto; }
  .builder-topbar-actions > .button, .builder-save-publish-actions .button { min-height: 34px; padding: 0 10px; font-size: 12px; }
}

/* RC83 - stable Builder first paint and compact publication history */
.builder-transition { height: 100%; min-height: 0; }
.builder-transition-topbar strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.builder-transition-topbar button { cursor: default; opacity: .72; }
.builder-transition-toolbox { display: grid; align-content: start; gap: 14px; background: #fff; }
.builder-transition-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.builder-transition-tabs span, .builder-transition-toolbox-line { height: 36px; border-radius: 9px; background: #eef1f6; }
.builder-transition-toolbox-card { height: 145px; border: 1px solid #dfe4ec; border-radius: 12px; background: #f8fafc; }
.builder-transition-toolbox-line { height: 48px; }
.builder-transition-toolbox-line.is-short { width: 72%; }
.builder-transition-frame { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); }
.builder-transition-viewer { display: grid; place-items: center; min-width: 0; background: #eef0f4; }
.builder-transition-upload { width: min(430px, 70%); min-height: 180px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 20px; border: 1px dashed #b8c1d0; border-radius: 14px; color: #687386; background: rgb(255 255 255 / 48%); text-align: center; }
.builder-transition-upload .icon { width: 20px; height: 20px; }
.builder-transition-upload strong { color: #273142; font-size: 14px; }
.builder-transition-upload small { font-size: 11px; }
.builder-transition-progress { width: min(320px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin-top: 4px; }
.builder-transition-progress progress { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: #dfe4ec; accent-color: #2f9d61; }
.builder-transition-progress progress::-webkit-progress-bar { border-radius: 999px; background: #dfe4ec; }
.builder-transition-progress progress::-webkit-progress-value { border-radius: 999px; background: #2f9d61; transition: width 160ms ease-out; }
.builder-transition-progress progress::-moz-progress-bar { border-radius: 999px; background: #2f9d61; }
.builder-transition-progress output { color: #273142; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.builder-transition-summary { min-width: 0; display: grid; align-content: start; gap: 16px; padding: 30px 24px; border-left: 1px solid #dfe4ec; background: #fff; }
.builder-transition-summary h2 { margin: 0; font-size: 18px; }
.builder-transition-summary p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.builder-transition-summary > span { height: 54px; border-radius: 12px; background: #f1f4f7; }
.builder-transition-summary > strong { margin-top: 8px; font-size: 16px; }
.builder-transition-summary button { min-height: 48px; border: 0; border-radius: 10px; color: #fff; background: #242424; font: inherit; font-weight: 750; }
.publication-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 750; }
.publication-pagination > :last-child { justify-self: end; }
@media (max-width: 760px) {
  .builder-transition-frame { grid-template-columns: 1fr; }
  .builder-transition-summary { display: none; }
}
@media (max-width: 600px) {
  /* A-05: the column makes room for the two-row topbar. */
  .studio-shell[data-builder-active="true"] .topbar.builder-topbar { flex: 0 0 auto; height: auto; }
  .builder-topbar-actions { row-gap: 6px; }
  .builder-topbar-actions .builder-history-buttons { order: 1; }
  .builder-topbar-actions .builder-save-publish-actions { order: 3; margin-left: 0; }
  .builder-topbar-actions .builder-mode-switcher { order: 2; }
  .builder-topbar-actions .builder-integrity-chip { display: none; }
}

/* RUNTIME-1: clickable configurator rows and a real dropdown for the row menu. */
tr.configurator-row { cursor: pointer; }
tr.configurator-row:hover > td { background: #f7f8fb; }
tr.configurator-row > td.row-actions { cursor: default; }
.configurator-action-menu[open] + .icon-button { align-self: center; }
.configurator-action-panel { position: fixed; width: 320px; max-height: calc(100dvh - 16px); overflow-y: auto; margin: 0; padding: 12px; border-radius: 12px; box-shadow: 0 16px 40px rgb(13 13 13 / 16%); overscroll-behavior: contain; scrollbar-gutter: stable; touch-action: pan-y; }
.configurator-action-panel > strong { font-size: 12px; }
.configurator-action-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.configurator-action-links > a, .configurator-action-links > button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid #e1e5ec; border-radius: 8px; background: #fff; color: #1f2430; font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.configurator-action-links > a:hover, .configurator-action-links > button:hover:not(:disabled) { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.configurator-action-links > .is-danger { color: #b42318; }
.configurator-action-links > .is-danger:disabled { opacity: .45; cursor: default; }
.configurator-destination-url { width: max-content; display: inline-flex; color: #315cf5; font-size: 10px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.configurator-destination-url:hover { text-decoration: underline; text-underline-offset: 2px; }
.configurator-destination-location { display: block; overflow-wrap: anywhere; word-break: break-word; color: #737d8e; font-size: 9px; line-height: 1.35; }
.configurator-destination-missing { color: #985b13; }

/* ------------------------------------------------------------------ */
/* BUILDER-10: the Builder panel is readable, the Viewer tab is short, */
/* Layout is five areas you click, Brand fits without endless scroll.  */
/* Declared last so it wins over the earlier Builder blocks.           */
/* ------------------------------------------------------------------ */

/* 1. Readable text in the panel you build with. */
.unified-builder-toolbox {
  --bt-fs-xs: 12px;
  --bt-fs-sm: 13px;
  --bt-fs-md: 14px;
  --bt-fs-lg: 16px;
  --bt-gap: 9px;
  --bt-pad: 11px;
  --bt-control: 38px;
  font-size: var(--bt-fs-sm);
}
.unified-builder-toolbox .builder-toolbox-note strong { font-size: var(--bt-fs-sm); }
.unified-builder-toolbox .builder-toolbox-note small { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-context-tabs button { font-size: var(--bt-fs-sm); min-height: 34px; }
.unified-builder-toolbox .eyebrow { font-size: var(--bt-fs-xs); letter-spacing: .06em; }
.unified-builder-toolbox label > span:not(.sr-only),
.unified-builder-toolbox legend,
.unified-builder-toolbox .builder-choice-display-heading,
.unified-builder-toolbox .builder-choice-display-per-row > p,
.unified-builder-toolbox .builder-choice-display-card-style > p { font-size: var(--bt-fs-xs); font-weight: 700; color: #3a4150; }
.unified-builder-toolbox input[type="text"],
.unified-builder-toolbox input[type="number"],
.unified-builder-toolbox input[type="search"],
.unified-builder-toolbox select,
.unified-builder-toolbox textarea { min-height: var(--bt-control); font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-panel input[type="text"],
.unified-builder-toolbox .builder-product-panel select,
.unified-builder-toolbox .builder-product-panel input[type="number"] { height: var(--bt-control); font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-panel .availability-toggle,
.unified-builder-toolbox .availability-toggle { font-size: var(--bt-fs-sm); }
.unified-builder-toolbox .builder-product-group > summary strong,
.unified-builder-toolbox .builder-product-summary strong { font-size: var(--bt-fs-md); }
.unified-builder-toolbox .builder-product-group > summary small,
.unified-builder-toolbox .builder-product-group > summary em,
.unified-builder-toolbox .builder-product-group > summary b,
.unified-builder-toolbox .builder-product-summary span,
.unified-builder-toolbox .builder-product-toolbar > strong,
.unified-builder-toolbox .builder-product-toolbar > span { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-level-badge { height: 24px; font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-panel-heading h2 { font-size: var(--bt-fs-lg); }
.unified-builder-toolbox .builder-element-list button strong { font-size: var(--bt-fs-sm); }
.unified-builder-toolbox .builder-element-list button small { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .builder-element-list-heading { font-size: var(--bt-fs-xs); }
.unified-builder-toolbox .button.compact,
.unified-builder-toolbox .builder-context-add { font-size: var(--bt-fs-sm); }
.unified-builder-toolbox .builder-icon-button { width: 30px; height: 30px; min-height: 30px; }
.unified-builder-toolbox .builder-icon-button .icon { width: 15px; height: 15px; }

/* 2. Viewer tab: one model row, one control, facts folded away. */
.builder-model-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bt-line, #e3e7ee); border-radius: 9px; background: #fff; }
.builder-model-row-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #1f6f4a; background: #e6f4ec; }
.builder-model-row-mark .icon { width: 14px; height: 14px; }
.builder-model-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bt-fs-md, 14px); }
.builder-model-facts > summary { list-style: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dfe3eb; border-radius: 7px; color: #4b5563; background: #fff; cursor: pointer; }
.builder-model-facts > summary::-webkit-details-marker { display: none; }
.builder-model-facts > summary .icon { width: 14px; height: 14px; }
.builder-model-facts[open] > summary { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.builder-model-facts dl { grid-column: 1 / -1; display: grid; gap: 4px; margin: 8px 0 0; }
.builder-model-facts dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--bt-fs-xs, 12px); }
.builder-model-facts dt { color: #6b7280; }
.builder-model-facts dd { margin: 0; font-weight: 600; }
.builder-model-source { position: relative; }
.builder-model-source-trigger { width: 100%; justify-content: center; gap: 8px; min-height: 38px; font-size: var(--bt-fs-sm, 13px); }
.builder-model-source-trigger .icon { width: 15px; height: 15px; }
.builder-model-source-menu { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); display: grid; gap: 2px; padding: 5px; border: 1px solid #e1e5ec; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgb(16 24 40 / 14%); }
.builder-model-source-menu[hidden] { display: none; }
.builder-model-source-menu > button,
.builder-model-source-menu > label { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #1f2430; font-size: var(--bt-fs-sm, 13px); font-weight: 600; text-align: left; cursor: pointer; }
.builder-model-source-menu > button:hover, .builder-model-source-menu > label:hover { background: #f4f6fb; }
.builder-model-source-menu .icon { width: 15px; height: 15px; color: #4f6bff; }
.builder-model-source-menu input[type="file"] { display: none; }
.builder-automapping-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; font-size: var(--bt-fs-xs, 12px); color: #4b5563; }
.builder-automapping-line b { color: #1f2430; }
.builder-automapping-line-actions { display: inline-flex; align-items: center; gap: 6px; }
.builder-model-setup-button { width: 100%; justify-content: center; margin-top: 2px; }
.builder-model-diagnostics { overflow: hidden; border-top: 1px solid var(--bt-line, #e3e7ee); border-bottom: 1px solid var(--bt-line, #e3e7ee); }
.builder-model-diagnostics > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 2px; color: #4b5563; font-size: var(--bt-fs-xs, 12px); font-weight: 720; cursor: pointer; }
.builder-model-diagnostics > summary span { color: #737b87; font-weight: 600; }
.builder-viewer-advanced > summary { cursor: pointer; font-size: var(--bt-fs-xs, 12px); font-weight: 700; color: #4b5563; }
.builder-viewer-advanced[open] { display: grid; gap: 8px; }

/* 3. Layout tab: five areas, click to switch on. Nothing else. */
.builder-layout-area { position: relative; display: grid; place-items: center; gap: 2px; min-height: 54px; padding: 8px 6px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; color: #4b5563; cursor: pointer; transition: border-color 120ms ease, background 120ms ease, color 120ms ease; }
.builder-layout-area strong { font-size: var(--bt-fs-xs, 12px); font-weight: 700; }
.builder-layout-area b { font-size: var(--bt-fs-sm, 13px); font-weight: 800; }
.builder-layout-area.is-off { border-style: dashed; color: #98a0ad; background: #fbfcfe; }
.builder-layout-area.is-off b { opacity: .45; }
.builder-layout-area.is-on { border-color: #b9c4ff; color: #26314a; background: #eef1ff; }
.builder-layout-area.is-selected { border-color: #4f6bff; color: #1c2a5e; background: #e2e8ff; box-shadow: 0 0 0 3px rgb(79 107 255 / 16%); }
.builder-layout-area:hover { border-color: #8999f1; }
.builder-layout-hint { margin: 8px 0 0; font-size: var(--bt-fs-xs, 12px); color: #6b7280; }
.builder-layout-website-display { display: grid; gap: 7px; margin: 0 0 14px; padding: 12px; border: 1px solid #dfe3eb; border-radius: 10px; background: #f8f9fc; }
.builder-layout-website-display > span { font-size: 12px; font-weight: 750; color: #202735; }
.builder-layout-website-display select { width: 100%; min-width: 0; }
.builder-layout-website-display small { color: #697386; font-size: 11px; line-height: 1.45; }

/* 4. Brand: colours in a grid, paired fields, labels folded. */
.builder-brand-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.builder-brand-color { display: grid; gap: 4px; margin: 0; padding: 7px; border: 1px solid #e6e9f0; border-radius: 9px; background: #fff; }
.builder-brand-color > span:first-child { font-size: 11px; font-weight: 700; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builder-brand-color > span:last-child { display: flex; align-items: center; gap: 6px; }
.builder-brand-color input[type="color"] { width: 30px; height: 26px; min-height: 0; padding: 0; border: 1px solid #dfe3eb; border-radius: 6px; }
.builder-brand-color code { font-size: 10px; color: #6b7280; }
.builder-brand-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-brand-inline-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.builder-brand-label-block > summary { cursor: pointer; font-size: var(--bt-fs-xs, 12px); font-weight: 700; color: #4b5563; }
.builder-brand-labels fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px solid #e6e9f0; border-radius: 9px; padding: 9px; }
.builder-brand-labels legend { padding: 0 4px; }
.builder-brand-panel { gap: 10px; }
@container (max-width: 300px) {
  .builder-brand-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-brand-inline, .builder-brand-inline-3, .builder-brand-labels fieldset { grid-template-columns: minmax(0, 1fr); }
}

/* 5. Option card image field: an icon, not a paragraph. */
.builder-image-field.is-compact { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; }
.builder-image-field.is-compact .builder-image-dropzone { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px dashed #cdd4e0; border-radius: 9px; color: #6b7280; background: #fbfcfe; cursor: pointer; }
.builder-image-field.is-compact .builder-image-dropzone:hover { border-color: #8999f1; color: #344ac5; background: #f7f8ff; }
.builder-image-field.is-compact .builder-image-dropzone .icon { width: 17px; height: 17px; }
.builder-image-field.is-compact .builder-image-source { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; cursor: pointer; }
.builder-image-field.is-compact .builder-image-source .icon { width: 14px; height: 14px; }
.builder-image-field.is-compact .builder-element-image-preview { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; cursor: pointer; }
.builder-image-field.is-compact .builder-element-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.builder-image-field.is-compact input[type="file"] { display: none; }
.builder-image-field.is-compact .builder-remove { width: 26px; height: 26px; min-height: 26px; }
.builder-image-field:not(.is-compact) .builder-image-dropzone small { display: none; }

/* 6. A quiet trash on placed elements, out of the way until wanted. */
.builder-placement-remove { top: 3px; right: 3px; width: 20px; height: 20px; border-color: #e7ecf3; border-radius: 999px; color: #7c8698; background: rgb(255 255 255 / 92%); box-shadow: none; }
.builder-placement-remove .icon { width: 11px; height: 11px; }
.builder-placement-remove:hover { border-color: #f0c4bf; color: #b42318; background: #fff; }

/* 7. Transparent reads as transparent in the Builder: a light checkerboard */
/* behind the model, so the author sees what the host page will show. */
.studio-shell[data-builder-active="true"] .builder-player-layout[data-viewer-background="transparent"] .builder-player-stage {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eceff4 25%, transparent 25%), linear-gradient(-45deg, #eceff4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eceff4 75%), linear-gradient(-45deg, transparent 75%, #eceff4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.studio-shell[data-builder-active="true"] .builder-player-layout[data-viewer-background="transparent"][data-reveal-viewer-background="true"] {
  background-color: #fff;
  background-image: linear-gradient(45deg, #eceff4 25%, transparent 25%), linear-gradient(-45deg, #eceff4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eceff4 75%), linear-gradient(-45deg, transparent 75%, #eceff4 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.studio-shell[data-builder-active="true"] .builder-player-layout[data-viewer-background="transparent"][data-reveal-viewer-background="true"] .builder-player-stage { background: transparent; }

/* ------------------------------------------------------------------ */
/* BUILDER-10: Edit and Preview are the same picture. The canvas shows */
/* the Player at the real device width and scales the whole frame down */
/* to fit, so every breakpoint the Player uses sees the device it is   */
/* previewing - not the width of the authoring canvas. Dragging the    */
/* tools panel therefore no longer changes what the customer sees.     */
/* ------------------------------------------------------------------ */
.studio-shell[data-builder-active="true"] .unified-builder-canvas { display: grid; align-content: start; justify-items: center; overflow: hidden; }
.studio-shell[data-builder-active="true"] .unified-builder-device-frame[data-device-scaled="true"] {
  width: var(--device-width, 1440px);
  max-width: none;
  height: var(--device-height, 100%);
  flex: 0 0 auto;
  transform: translateX(var(--device-offset, 0px)) scale(var(--device-scale, 1));
  transform-origin: top left;
  transition: none;
}
.studio-shell[data-builder-active="true"] .unified-builder-device-frame[data-device-scaled="true"] .builder-player-layout { height: 100%; max-height: none; }

/* 8. Background tiles keep their label under the swatch, never on top of the */
/* neighbour, whatever the panel width. */
.unified-builder-toolbox .builder-bg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.unified-builder-toolbox .builder-bg-tile { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.unified-builder-toolbox .builder-bg-tile > span:last-child { font-size: 11px; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.unified-builder-toolbox .builder-bg-tile-swatch { width: 100%; height: 34px; }
.unified-builder-toolbox .builder-bg-tile.is-light_gray .builder-bg-tile-swatch { background: #eef0f4; }
.unified-builder-toolbox .builder-bg-tile > span:last-child { white-space: normal; overflow: visible; }

/* ------------------------------------------------------------------ */
/* BUILDER-10: the canvas is the Player, so the Player's own option    */
/* grid rules must reach it. Before this the canvas had no column rule */
/* at all and always stacked one card per row, while the published     */
/* Player used the author's count - the single biggest difference      */
/* between Edit and Preview. The device frame decides the breakpoint,  */
/* exactly like a real screen of that size.                            */
/* ------------------------------------------------------------------ */
.studio-shell[data-builder-active="true"] .builder-player .option-grid { display: grid; grid-template-columns: repeat(var(--opr-desktop, 2), minmax(0, 1fr)); gap: calc(var(--configux-space-unit, 4px) * 2.5); }
.studio-shell[data-builder-active="true"] .builder-player .option-group--color_swatches .option-grid { grid-template-columns: repeat(var(--opr-desktop, 4), minmax(0, 1fr)); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-player .option-grid { grid-template-columns: repeat(var(--opr-tablet, 2), minmax(0, 1fr)); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .builder-player .option-group--color_swatches .option-grid { grid-template-columns: repeat(var(--opr-tablet, 4), minmax(0, 1fr)); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player .option-grid { grid-template-columns: repeat(var(--opr-mobile, 1), minmax(0, 1fr)); }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .builder-player .option-group--color_swatches .option-grid { grid-template-columns: repeat(var(--opr-mobile, 3), minmax(0, 1fr)); }
.studio-shell[data-builder-active="true"] .builder-player .option-group--direction-vertical .option-grid { grid-template-columns: minmax(0, 1fr); }
.studio-shell[data-builder-active="true"] .builder-player .option-group--many-carousel .option-grid { grid-template-columns: none; }

/* The scaled device frame wins over the older per-device width and zoom rules */
/* (A-04's scale(1.04)/scale(1.16) and the min(820px, 100%) widths), which  */
/* would otherwise collapse the frame to its min-content width. */
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="tablet"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="edit"][data-builder-device="mobile"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="tablet"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame[data-device-scaled="true"] {
  width: var(--device-width, 1440px);
  max-width: none;
  height: var(--device-height, 100%);
  max-height: none;
  flex: 0 0 auto;
  transform: translateX(var(--device-offset, 0px)) scale(var(--device-scale, 1));
  transform-origin: top left;
}

/* ------------------------------------------------------------------ */
/* BUILDER-10: the viewer controls and the overlay elements share the  */
/* same corner. They used to be two stacks pinned to the same point,   */
/* so an image element sat under the fullscreen button. The controls   */
/* keep the corner; the overlay content starts inside them.            */
/* ------------------------------------------------------------------ */
.studio-shell[data-builder-active="true"] .builder-overlay-corner.corner-top-right,
.studio-shell[data-builder-active="true"] .builder-overlay-corner.corner-bottom-right { padding-right: 62px; }
.studio-shell[data-builder-active="true"] .builder-overlay-corner.corner-top-left,
.studio-shell[data-builder-active="true"] .builder-overlay-corner.corner-bottom-left { padding-left: 62px; }
.studio-shell[data-builder-active="true"] .builder-player-stage:not(:has(.builder-viewer-control-cluster[data-anchor="top_right"])) .builder-overlay-corner.corner-top-right { padding-right: 15px; }
.studio-shell[data-builder-active="true"] .builder-player-stage:not(:has(.builder-viewer-control-cluster[data-anchor="bottom_right"])) .builder-overlay-corner.corner-bottom-right { padding-right: 15px; }
.studio-shell[data-builder-active="true"] .builder-player-stage:not(:has(.builder-viewer-control-cluster[data-anchor="top_left"])) .builder-overlay-corner.corner-top-left { padding-left: 15px; }
.studio-shell[data-builder-active="true"] .builder-player-stage:not(:has(.builder-viewer-control-cluster[data-anchor="bottom_left"])) .builder-overlay-corner.corner-bottom-left { padding-left: 15px; }

/* QA Main Q7: exact add destinations, direct delete + Undo, and controls that
   remain operable with touch and Windows forced colours. */
.builder-options-add-drag { display: inline-flex; align-items: center; gap: 5px; color: #4f6bff; cursor: grab; }
.builder-options-add-drag .icon { width: 18px; height: 18px; }
.builder-options-add-drag .icon:last-child { width: 13px; height: 13px; color: #818a99; }
.builder-options-add-drag:active { cursor: grabbing; }
.builder-options-add-drop-list { display: grid; grid-column: 1 / -1; gap: 6px; padding-top: 4px; }
.builder-options-add-drop-list > small { color: #6b7280; font-size: var(--bt-fs-xs, 10px); font-weight: 700; }
.builder-options-add-card:not([data-add-dragging="true"]) .builder-options-add-drop-target { min-height: 34px; opacity: .72; }
.builder-options-add-card[data-add-dragging="true"] .builder-options-add-drop-target { opacity: 1; }
.builder-options-add-drop-target { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed #9eabf6; border-radius: 8px; color: #344ac5; background: #f7f8ff; font-size: var(--bt-fs-xs, 12px); font-weight: 700; }
.builder-options-add-drop-target .icon { width: 14px; height: 14px; }
.builder-options-add-drop-target.is-drop-over { border-style: solid; border-color: #4f6bff; background: #e8ecff; box-shadow: 0 0 0 3px rgb(79 107 255 / 18%); }

.unified-builder-toolbox .builder-product-group,
.unified-builder-toolbox .builder-product-option { position: relative; }
.unified-builder-toolbox .builder-product-group > summary,
.unified-builder-toolbox .builder-product-option > summary { padding-right: 50px; }
.builder-options-summary-remove { position: absolute; top: 7px; right: 7px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; color: #8a5660; background: transparent; opacity: 0; cursor: pointer; transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease; }
.builder-options-summary-remove .icon { width: 15px; height: 15px; }
.builder-product-group:hover > .builder-options-summary-remove,
.builder-product-group:focus-within > .builder-options-summary-remove,
.builder-product-option:hover > .builder-options-summary-remove,
.builder-product-option:focus-within > .builder-options-summary-remove { opacity: 1; }
.builder-options-summary-remove:hover:not(:disabled) { border-color: #f0c4bf; color: #b42318; background: #fff; }
.builder-options-summary-remove:focus-visible { opacity: 1; outline: 3px solid rgb(79 107 255 / 24%); outline-offset: 2px; }
.builder-options-summary-remove:disabled { color: #a9afb9; opacity: .3; cursor: not-allowed; }

@media (pointer: coarse), (hover: none) {
  .builder-options-summary-remove { width: 44px; height: 44px; top: 1px; right: 1px; opacity: 1; }
  .unified-builder-toolbox .builder-product-group > summary,
  .unified-builder-toolbox .builder-product-option > summary { min-height: 46px; padding-right: 54px; }
  .builder-options-tabs button,
  .builder-options-breadcrumb button,
  .builder-options-add-card > button,
  .builder-options-canvas-state button,
  .builder-options-disclosure > summary,
  .unified-builder-toolbox .builder-icon-button,
  .builder-player-group .option-tooltip-trigger { min-width: 44px; min-height: 44px; }
}

@media (max-width: 600px) {
  .builder-topbar-actions > .button,
  .builder-topbar-actions button,
  .builder-topbar-actions a,
  .builder-save-publish-actions .button { min-height: 44px; }
  .studio-shell[data-builder-active="true"] .unified-builder-canvas:has(.unified-builder-device-frame[data-device-interaction="view-only"])::after {
    content: "Preview is view-only at this scale · choose Mobile to interact";
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 6;
    padding: 9px 10px;
    border: 1px solid #c9d1e0;
    border-radius: 8px;
    color: #4b5563;
    background: rgb(255 255 255 / 94%);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
  }
}

/* CON-QA1: the Configurator library stays usable on a real phone instead of
   squeezing the search field and forcing the page into a sideways scroll. */
@media (max-width: 680px) {
  .table-panel .table-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .table-panel .table-search { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .table-panel .configurator-view-toggle { grid-column: 1; grid-row: 2; }
  .table-panel .table-filter { grid-column: 2; grid-row: 2; justify-self: end; }
  .table-panel .table-scroll { overflow-x: hidden; }
  .table-panel table { table-layout: fixed; }
  .table-panel th:nth-child(2), .table-panel td:nth-child(2),
  .table-panel th:nth-child(3), .table-panel td:nth-child(3),
  .table-panel th:nth-child(4), .table-panel td:nth-child(4),
  .table-panel th:nth-child(5), .table-panel td:nth-child(5),
  .table-panel th:nth-child(6), .table-panel td:nth-child(6) { display: none; }
  .table-panel th:first-child, .table-panel td:first-child { width: auto; }
  .table-panel .config-name { min-width: 0; }
  .table-panel .config-name strong { max-width: min(210px, calc(100vw - 155px)); }
  .table-panel .row-actions { width: 82px; }
}

@media (forced-colors: active) {
  .builder-options-tabs button[aria-selected="true"],
  .builder-focus-target.is-selected,
  [data-builder-surface-region][aria-current="true"],
  .builder-layout-area.is-selected,
  .builder-device-switcher button[aria-pressed="true"],
  .builder-mode-switcher [aria-current="page"] { border: 2px solid Highlight; color: HighlightText; background: Highlight; box-shadow: none; forced-color-adjust: auto; }
  .builder-focus-target.has-validation { border: 3px double CanvasText; }
  .builder-options-tabs button:focus-visible,
  .builder-focus-target:focus-visible,
  .builder-options-summary-remove:focus-visible,
  .builder-options-add-card button:focus-visible,
  .builder-options-add-card select:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .builder-options-summary-remove:disabled,
  .builder-icon-button:disabled,
  .builder-options-add-card button:disabled { color: GrayText; border-color: GrayText; opacity: 1; }
  .builder-options-add-drop-target { border-color: Highlight; color: CanvasText; background: Canvas; }
  .builder-options-add-drop-target.is-drop-over { color: HighlightText; background: Highlight; }
}
/* Price rules are deliberate Apply actions, separate from the live label editor. */
.builder-pricing-tools { min-width: 0; }
.builder-pricing-tools label { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; font-weight: 600; }
.builder-pricing-tools input:not([type="checkbox"]), .builder-pricing-tools select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #d5dae5; border-radius: 8px; background: #fff; }
.builder-pricing-tools input[type="checkbox"] { width: 22px; height: 22px; }
.builder-pricing-tools .button { margin: 6px 4px 6px 0; min-height: 44px; white-space: normal; }
.builder-pricing-tools p { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.builder-pricing-tools [role="alert"] { padding: 12px; color: #842323; background: #fff0f0; border-radius: 8px; }
.builder-pricing-tools fieldset { min-width: 0; margin: 10px 0; border: 1px solid #d5dae5; }
.pricing-preview-table { overflow-x: auto; }
.pricing-preview-table table { width: 100%; font-size: 12px; border-collapse: collapse; }
.pricing-preview-table td, .pricing-preview-table th { padding: 6px; text-align: left; border-bottom: 1px solid #d5dae5; overflow-wrap: anywhere; }
/* Builder Focus: one full-width inspector, without nested editing frames. */
.studio-shell .builder-focused-structure .builder-product-step[open],
.studio-shell .builder-focused-structure .builder-product-group[open],
.studio-shell .builder-focused-structure .builder-product-option[open] {
  border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; margin: 0; outline: 0;
}
.studio-shell .builder-focused-structure .builder-options-step-body,
.studio-shell .builder-focused-structure .builder-product-group-body,
.studio-shell .builder-focused-structure .builder-options-option-body,
.studio-shell .builder-focused-structure .builder-options-group-list,
.studio-shell .builder-focused-structure .builder-product-options { padding: 0; margin: 0; border: 0; gap: 8px; }
.studio-shell .builder-focused-structure [hidden] { display: none !important; }
.studio-shell .builder-focused-structure summary strong { white-space: normal; overflow: visible; text-overflow: clip; }
.studio-shell .builder-focused-structure summary > .icon { width: 16px; height: 16px; }
.studio-shell .builder-focused-structure .builder-product-toolbar { justify-content: flex-end; }
.studio-shell .builder-focused-structure .builder-options-core { padding: 0; gap: 10px; }
.builder-options-breadcrumb button { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; overflow-wrap: anywhere; }
.builder-options-breadcrumb .icon { width: 15px; }
.builder-options-breadcrumb > button[data-action^="builder-options-back"] > .icon { transform: rotate(180deg); }
.builder-focus-warning, .builder-grid-warning { display: block; padding: 6px 0; color: #93561b; font-size: 12px; line-height: 1.35; }
.builder-grid-warning[hidden] { display: none; }
.studio-shell .builder-options-add-card { position: relative; gap: 8px; grid-template-columns: minmax(0, 1fr) 24px; }
.studio-shell .builder-options-add-drag { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; cursor: grab; }
.builder-options-add-drag .icon:last-child { margin-left: auto; }
.builder-add-help { font-size: 12px; }
.builder-add-help summary { cursor: pointer; list-style: none; border: 1px solid #dce0e6; border-radius: 50%; width: 22px; height: 22px; text-align: center; }
.builder-options-add-card .builder-options-add-drop-list { display: none; }
.builder-options-add-card[data-add-dragging] .builder-options-add-drop-list { display: none; }
.builder-pricing-tools [data-action="builder-focus"] { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 10px; }
.builder-name-field { display: block; position: relative; max-width: 100%; }
.builder-name-field:not(:focus-within) .builder-configurator-name { color: transparent; width: 16ch; }
.builder-name-short { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; font-weight: 750; white-space: nowrap; }
.builder-name-field:focus-within .builder-name-short { display: none; }
.builder-diagnostics { position: relative; }
.builder-diagnostics > summary { cursor: pointer; list-style: none; padding: 8px; border: 1px solid #dfe3eb; border-radius: 8px; }
.builder-diagnostics > div { position: absolute; z-index: 80; top: 100%; right: 0; width: 260px; padding: 16px; border: 1px solid #dfe3eb; border-radius: 12px; background: white; box-shadow: 0 8px 24px #0002; font-size: 13px; }
.studio-shell .configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame { border: 7px solid #242629; border-radius: 38px; box-sizing: border-box; }
.studio-shell .configurator-builder-v1[data-builder-device="tablet"] .unified-builder-device-frame { border: 8px solid #242629; border-radius: 28px; box-sizing: border-box; }
.studio-shell[data-builder-active="true"] .option-grid[data-option-columns] .builder-player-option { width: 100%; min-width: 0; max-width: 100%; padding: 8px 5px; }
.studio-shell[data-builder-active="true"] .option-grid[data-option-columns] .builder-player-option-label { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; font-size: clamp(12px, 0.85em, 16px); }
.studio-shell[data-builder-active="true"] .builder-player-group--buttons .option-grid[data-option-columns] .builder-player-option { flex-direction: column; gap: 2px; }
.builder-model-variant { margin: 8px 0; padding: 10px; border: 1px solid #dfe3eb; border-radius: 9px; }
.builder-model-variant.is-alternative { background: #f5f6f8; color: #666d78; }
.builder-model-variant.is-current { border-color: #5367ff; }
.builder-model-variant summary { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.builder-model-variant summary small { font-size: 11px; }
.builder-model-variant ul { padding-left: 14px; font-size: 11px; overflow-wrap: anywhere; }
.builder-model-variant [data-model-variant-price] { display: grid; gap: 8px; margin: 10px 0; }
.studio-shell .builder-model-variant button { min-height: 32px; padding: 6px 9px; border: 1px solid #dfe3eb; border-radius: 8px; background: white; color: #3a4150; font-size: 12px; }
.unified-builder-canvas { position: relative; }
.builder-insertion-point { position: absolute; z-index: 70; height: 24px; display: flex; align-items: center; justify-content: center; background: #eef0ff; color: #334ad9; border: 1px dashed #5367ff; border-radius: 5px; font-size: 11px; pointer-events: auto; }
.builder-insertion-point.is-drop-over { color: white; background: #5367ff; border-style: solid; }
.builder-model-tools { position: absolute; z-index: 25; top: 12px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; max-width: calc(100% - 110px); }
.builder-model-tools > div { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #dce0e6; border-radius: 9px; background: rgb(255 255 255 / 92%); box-shadow: 0 2px 8px #00000006; }
.studio-shell .builder-model-tools button { padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #666c76; white-space: nowrap; font-size: 11px; font-weight: 550; }
.studio-shell .builder-model-tools button[aria-pressed="true"] { background: #edf0f5; color: #252a32; }
.builder-model-report { max-width: min(560px, calc(100vw - 32px)); padding: 24px; }
.builder-model-report > header { display: flex; align-items: center; justify-content: space-between; }
.builder-model-report > header h2 { margin: 0; font-size: 20px; }
.builder-model-report > p { color: #69717d; font-size: 13px; }
.builder-model-report > details { margin: 16px 0; }
.builder-model-report > .button { width: 100%; margin-top: 16px; }
[data-integrated-model-authoring].builder-options-disclosure { border: 0; border-top: 1px solid #e4e8ef; border-radius: 0; background: transparent; }
[data-integrated-model-authoring].builder-options-disclosure > summary { padding: 9px 0; }
[data-integrated-model-authoring].builder-options-disclosure[open] > summary { border-bottom: 0; }
[data-integrated-model-authoring].builder-options-disclosure > :not(summary) { margin: 0; }
[data-integrated-model-authoring] .auto-build-part-authoring { display: grid; gap: 10px; border: 0; padding: 7px 0 2px; background: transparent; box-shadow: none; }
[data-integrated-model-authoring] .auto-build-part-authoring label { display: grid; gap: 5px; margin: 0; color: #586477; font-size: 11px; font-weight: 650; }
[data-integrated-model-authoring] :is(input[type="text"], select) { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #d9dfeb; border-radius: 9px; color: #202733; background: #fff; font: inherit; box-sizing: border-box; }
[data-integrated-model-authoring] :is(input[type="text"], select):focus-visible { border-color: #6375f6; outline: 3px solid rgb(83 103 255 / 14%); }
[data-integrated-model-authoring] [data-auto-build-selected-parts] { max-height: 220px; margin: 0; padding-right: 2px; overflow: auto; font-size: 11px; overflow-wrap: anywhere; }
[data-integrated-model-authoring] .auto-build-selected-parts { gap: 0; border-block: 1px solid #e8ebf1; }
[data-integrated-model-authoring] .auto-build-selected-parts li { align-items: center; border: 0; border-bottom: 1px solid #eef0f4; border-radius: 0; padding: 8px 2px; background: transparent; }
[data-integrated-model-authoring] .auto-build-selected-parts li:last-child { border-bottom: 0; }
[data-integrated-model-authoring] .auto-build-selected-parts li > span:first-child { min-width: 0; overflow: hidden; color: #252d3b; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
[data-integrated-model-authoring] .auto-build-selection-heading { display: grid; gap: 10px; }
[data-integrated-model-authoring] .auto-build-selection-heading > .auto-build-selection-title { display: flex; align-items: center; justify-content: space-between; min-width: 0; }
[data-integrated-model-authoring] .auto-build-selection-title .builder-inline-help { flex-basis: 22px; }
[data-integrated-model-authoring] .auto-build-selection-title .builder-inline-help > summary { width: 22px; height: 22px; }
[data-integrated-model-authoring] .auto-build-selection-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
[data-integrated-model-authoring] .auto-build-selection-actions .button { width: 100%; min-width: 0; }
[data-integrated-model-authoring] .auto-build-name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-integrated-model-authoring] .model-part-finder { min-width: 0; border-block: 1px solid #e8ebf1; }
[data-integrated-model-authoring] .model-part-finder > summary { padding: 10px 0; font-size: 12px; font-weight: 650; cursor: pointer; }
[data-integrated-model-authoring] .model-part-finder-filter { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 6px; margin-block: 6px; }
[data-integrated-model-authoring] .model-part-finder-filter input { width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid #d9dfeb; border-radius: 9px; font: inherit; }
[data-integrated-model-authoring] .model-part-finder-count { margin-block: 8px; color: #586477; font-size: 11px; }
[data-integrated-model-authoring] .model-part-finder-results { max-height: 280px; overflow: auto; overscroll-behavior: contain; }
[data-integrated-model-authoring] label.model-part-finder-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 2px; border-bottom: 1px solid #eef0f4; cursor: pointer; }
[data-integrated-model-authoring] .model-part-finder-row input { width: 18px; height: 18px; min-height: 0; margin: 1px 0; }
[data-integrated-model-authoring] .model-part-finder-row > span { display: grid; min-width: 0; gap: 3px; }
[data-integrated-model-authoring] .model-part-finder-row strong { overflow-wrap: anywhere; color: #252d3b; font-size: 11px; }
[data-integrated-model-authoring] .model-part-finder-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #69758a; font-size: 10px; }
[data-integrated-model-authoring] .model-part-finder-row:has(input:checked) { background: #eef2ff; }
[data-integrated-model-authoring] .model-part-finder-row:has(input:disabled) { opacity: .6; cursor: default; }
[data-integrated-model-authoring] .auto-build-colour-row { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
[data-integrated-model-authoring] .auto-build-colour-field { flex: 1; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; }
[data-integrated-model-authoring] .auto-build-colour-field input { width: 52px; height: 38px; padding: 3px; border: 1px solid #d9dfeb; border-radius: 9px; background: #fff; }
[data-integrated-model-authoring] > .auto-build-part-authoring > .button { width: 100%; }
[data-integrated-model-authoring] .auto-build-more-tools { margin-top: 0; border-top: 1px solid #e5e9f0; padding-top: 10px; }
[data-integrated-model-authoring] .auto-build-part-tools-heading { display: flex; align-items: center; gap: 7px; color: #465165; font-size: 12px; }
[data-integrated-model-authoring] .auto-build-part-tools-heading .builder-inline-help { flex-basis: 20px; }
[data-integrated-model-authoring] .auto-build-part-tools-heading .builder-inline-help > summary { width: 20px; height: 20px; }
[data-integrated-model-authoring] .auto-build-part-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.model-part-focus-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.model-part-single-choice { border-top: 1px solid #e5e9f0; }
.model-part-single-choice > summary { cursor: pointer; padding: 10px 0; font-size: 12px; font-weight: 600; }
.model-part-single-choice > :not(summary) { margin-block: 8px; }
.model-variant-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.model-variant-dialog header, .model-variant-dialog footer { display: flex; align-items: center; gap: 10px; }
.model-variant-dialog header { justify-content: space-between; }
.model-variant-dialog header h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.model-variant-dialog label { display: grid; gap: 5px; min-width: 0; font-size: 12px; font-weight: 600; }
.model-variant-dialog :is(input:not([type=radio]),select) { width: 100%; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid #d9dfeb; border-radius: 9px; font: inherit; background: #fff; }
.model-variant-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.model-variant-family { margin-top: 12px; }
.model-variant-family summary { cursor: pointer; margin-block: 8px; }
.model-variant-rows { margin-block: 12px; }
.model-variant-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 128px; gap: 9px; padding-block: 10px; border-top: 1px solid #eef0f4; align-items: end; }
.model-variant-row [data-variant-match] { grid-column: 2 / -1; }
.model-variant-row .model-variant-default { align-self: end; height: 40px; place-items: center; }
.model-variant-row input[type=radio] { width: 18px; height: 18px; margin: 0; }
.model-variant-dialog footer { position: sticky; bottom: 0; padding-block: 12px; background: #fff; border-top: 1px solid #e5e9f0; }
.model-variant-dialog footer > span { margin-right: auto; font-size: 12px; color: #657083; }
.model-variant-dialog [hidden] { display: none !important; }
.model-variant-error { color: #a52525; font-size: 13px; }
@media (max-width: 520px) {
  .model-variant-row { grid-template-columns: 24px minmax(0,1fr) 100px; }
  .model-variant-dialog footer { flex-wrap: wrap; }
  .model-variant-dialog footer > span { flex-basis: 100%; }
}
[data-integrated-model-authoring] .auto-build-part-status { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; color: #657083; background: #f0f2f5; font-size: 9px; font-weight: 700; white-space: nowrap; }
[data-integrated-model-authoring] .auto-build-part-status.is-ready { color: #25704b; background: #eaf7ef; }
[data-integrated-model-authoring] .auto-build-part-status.is-connected { color: #7a5521; background: #fff4e4; }
[data-auto-build-mapping-status] > :is(.auto-build-mapping-conflict, .auto-build-mapping-ready) { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: fit-content; max-width: 100%; padding: 3px 5px 3px 8px; border: 0; border-radius: 999px; font-size: 9px; }
[data-auto-build-mapping-status] .builder-inline-help { flex-basis: 20px; }
[data-auto-build-mapping-status] .builder-inline-help > summary { width: 20px; height: 20px; border-color: currentColor; background: transparent; }
.builder-service-starters { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e9f0; }
.builder-service-starters .builder-setting-heading > span { color: #4b5668; font-size: 12px; font-weight: 700; }
.builder-service-starters > div:last-child { display: flex; flex-wrap: wrap; gap: 7px; }
.builder-customer-style-help { margin-top: 2px; padding-top: 8px; border-top: 1px solid #eceff4; }
.builder-customer-style-help > span { color: #657083; font-size: 11px; font-weight: 650; }
.configurator-builder-v1[data-builder-device="mobile"] .builder-model-tools { max-width: calc(100% - 18px); top: 8px; }
.configurator-builder-v1[data-builder-device="mobile"] .builder-model-tools button { font-size: 10px; padding: 4px 5px; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1 .unified-builder-canvas { justify-items: start; }

/* Feedback 2: the editor adds one shape-following selection, never content. */
.studio-shell[data-builder-active="true"] .builder-layout-placement { border-radius: 10px; }
.studio-shell[data-builder-active="true"] .builder-layout-placement.is-selected:has(> .player-primary-action-wrap) { outline: 0; }
.studio-shell[data-builder-active="true"] [data-builder-mode="edit"] .builder-layout-placement.is-selected > .player-primary-action-wrap > .player-primary-action { outline: 2px solid #5367ff; outline-offset: 2px; }
.studio-shell[data-builder-active="true"] [data-builder-mode="edit"] .player-primary-action-status { display: none; }
.builder-quote-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(2px);
  box-sizing: border-box;
}
.builder-quote-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 24px 28px 26px;
  border: 0;
  border-radius: 22px;
  color: #171717;
  background: #fff;
  box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
  box-sizing: border-box;
  font-family: inherit;
  text-align: left;
}
.builder-quote-preview--modal { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.builder-quote-preview--left-drawer,
.builder-quote-preview--right-drawer { position: fixed; z-index: 10000; top: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.builder-quote-preview--left-drawer { left: 16px; }
.builder-quote-preview--right-drawer { right: 16px; }
.builder-quote-preview--inline { margin-top: 12px; }
.builder-quote-preview-header { position: relative; display: grid; justify-items: center; gap: 7px; min-width: 0; text-align: center; }
.builder-quote-preview-icons { display: flex; align-items: center; gap: 16px; margin: 7px 0 8px; color: #151515; }
.builder-quote-preview-icons > span:nth-child(2) { color: #999; font-size: 17px; font-weight: 400; }
.builder-quote-preview-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #dedede; border-radius: 16px; }
.builder-quote-preview-icon svg { width: 24px; height: 24px; }
.builder-quote-preview h3 { margin: 0; color: #171717; font-size: 18px; font-weight: 700; line-height: 1.25; }
.builder-quote-preview-header p { margin: 0; color: #666; font-size: 12px; line-height: 1.45; }
.builder-quote-preview-note { color: #777; font-size: 10px; font-weight: 600; }
.builder-quote-preview-close {
  position: absolute;
  top: -10px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #333;
  background: #f2f2f2;
  font: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.builder-quote-preview-close:hover { background: #e7e7e7; }
.builder-quote-preview-fields { display: grid; gap: 9px; }
.builder-quote-preview-field { display: block; min-width: 0; }
.builder-quote-preview :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dedede;
  border-radius: 8px;
  outline: 0;
  color: #171717;
  background: #fff;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}
.builder-quote-preview :is(input[type="text"], input[type="email"], input[type="tel"], textarea)::placeholder { color: #888; opacity: 1; }
.builder-quote-preview :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus-visible { border-color: var(--quote-accent, #263625); box-shadow: 0 0 0 2px rgb(38 54 37 / 14%); }
.builder-quote-preview-consent {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #666;
  font-size: 11px;
  line-height: 1.35;
  cursor: pointer;
}
.builder-quote-preview-consent input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--quote-accent, #263625); }
.builder-quote-preview-submit {
  width: 100%;
  min-height: 50px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--quote-button-radius, var(--builder-brand-radius-medium, 8px));
  color: #fff;
  background: var(--quote-accent, #263625);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.builder-quote-preview-submit:hover { filter: brightness(.92); }
.builder-quote-preview :is(button, input, textarea):focus-visible { outline: 2px solid var(--quote-accent, #263625); outline-offset: 2px; }
@media (max-width: 640px) {
  .builder-quote-preview-overlay { align-items: end; padding: 12px; }
  .builder-quote-preview--modal { width: 100%; max-height: calc(100dvh - 24px); padding: 20px 18px 24px; border-radius: 20px; }
  .builder-quote-preview--left-drawer,
  .builder-quote-preview--right-drawer { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 62dvh; border-radius: 20px; }
  .builder-quote-preview-close { right: -4px; }
}
.studio-shell[data-builder-active="true"] [data-builder-mode="preview"] .builder-layout-placement { outline: 0 !important; }
.studio-shell .builder-element-editor { padding: 0; border: 0; background: none; }
.studio-shell .builder-element-editor :is(details, .builder-element-fields) { min-width: 0; }
.studio-shell .builder-element-editor details { border: 0; border-top: 1px solid #e4e7ed; padding-top: 12px; }
.studio-shell .builder-element-editor details > summary { cursor: pointer; color: #404755; font-size: 13px; font-weight: 650; }
.studio-shell .builder-element-fields { display: grid; gap: 10px; padding-top: 12px; }
.studio-shell .builder-element-fields label { display: grid; gap: 5px; font-size: 12px; }
.studio-shell .builder-element-fields .availability-toggle { display: flex; align-items: center; }
.builder-customer-action-editor { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.builder-customer-action-editor legend { padding: 0 4px; font-size: 12px; font-weight: 750; }
.builder-customer-action-editor label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; cursor: pointer; }
.builder-customer-action-editor input { margin-top: 3px; accent-color: var(--accent); }
.builder-customer-action-editor span { display: grid; gap: 2px; }
.builder-customer-action-editor small { color: var(--muted); font-size: 11px; }
.builder-commerce-product { display: grid; gap: 9px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fb; }
.builder-commerce-product > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.builder-commerce-product-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.builder-commerce-combobox { position: relative; }
.builder-commerce-combobox > input { width: 100%; }
.builder-commerce-combobox [role="listbox"] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 5px; border: 1px solid #cfd5df; border-radius: 9px; background: #fff; box-shadow: 0 14px 30px rgb(26 35 50 / 16%); }
.builder-commerce-combobox [role="option"] { display: grid; gap: 2px; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: #202833; text-align: left; cursor: pointer; }
.builder-commerce-combobox [role="option"]:hover, .builder-commerce-combobox [role="option"]:focus-visible { background: #eef1ff; outline: none; }
.builder-commerce-combobox [role="option"] small, .builder-commerce-current { color: var(--muted); font-size: 10px; }
.workspace-website-dialog { width: min(540px, calc(100vw - 32px)); }
.integration-inline-connect { display: flex; flex-wrap: wrap; gap: 8px; }
.integration-inline-connect input { min-width: 180px; }
.studio-shell .builder-element-editor input[type="checkbox"] { flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; }
.studio-shell .builder-element-editor :is(input[type="text"], select) { width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: white; font: inherit; }
.studio-shell .builder-element-editor input::placeholder { color: #8c94a1; }
.studio-shell .builder-element-editor > label { font-size: 14px; font-weight: 500; }
.studio-shell .builder-element-editor .builder-element-back,
.studio-shell .builder-element-editor-actions button { font-size: 12px; }
.studio-shell .builder-element-editor > [data-action="builder-focus"] { min-height: 40px; padding: 8px 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: white; color: #404755; font-size: 13px; }
.studio-shell[data-builder-active="true"] .unified-builder-canvas { overflow: clip; }
.studio-shell[data-builder-active="true"] .builder-player-layout { overflow: clip; }
.studio-shell[data-builder-active="true"] [data-builder-device="desktop"] .unified-builder-canvas { padding: 0; }
.builder-drop-preview { display: grid; place-items: center; min-width: 0; max-width: 100%; box-sizing: border-box; border: 2px dashed #5367ff; border-radius: 12px; background: #eef0ff; color: #3b4bba; font-size: 13px; pointer-events: none; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode] .unified-builder-device-frame[data-device-scaled="true"] { margin: 0; justify-self: start; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="tablet"] .unified-builder-canvas,
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="mobile"] .unified-builder-canvas { justify-items: center; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="tablet"] .unified-builder-device-frame[data-device-scaled="true"],
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="mobile"] .unified-builder-device-frame[data-device-scaled="true"] {
  justify-self: center;
  transform: scale(var(--device-scale, 1));
  transform-origin: top center;
}
/* Below the 390 px phone frame plus its 16 px gutter, the grid's unscaled
   track is wider than the Studio viewport. Align the scaled preview to an
   8 px left gutter so its right-hand controls remain fully visible at 320 px. */
@media (max-width: 406px) {
  .studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode="preview"][data-builder-device="mobile"] .unified-builder-device-frame[data-device-scaled="true"] {
    justify-self: start;
    transform: translateX(8px) scale(var(--device-scale, 1));
    transform-origin: top left;
  }
}
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="tablet"] .unified-builder-device-frame { position: relative; border: 8px solid #242528; border-radius: 28px; overflow: hidden; background: #242528; box-shadow: 0 8px 22px #00000018; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-mode][data-builder-device="mobile"] .unified-builder-device-frame { position: relative; border: 7px solid #242528; border-radius: 38px; overflow: hidden; background: #242528; box-shadow: 0 8px 22px #00000018; }
.studio-shell[data-builder-active="true"] .configurator-builder-v1[data-builder-device="mobile"] .unified-builder-device-frame::after { content: ""; position: absolute; bottom: 3px; left: 34%; width: 32%; height: 4px; border-radius: 8px; background: #242528; pointer-events: none; z-index: 50; }

/* The authoring workspace is light; customer Brand/Layout remain independent. */
.studio-shell[data-builder-active="true"] .topbar.builder-topbar,
.studio-shell[data-builder-active="true"] .unified-builder-toolbox { background: #f7f8fb; color: #273142; border-color: #dce1eb; }
.studio-shell[data-builder-active="true"] .builder-context-heading .eyebrow { color: #626d7e; }
.studio-shell[data-builder-active="true"] .builder-context-tabs { border-color: #dce1eb; border-top: 0; margin-top: 0; padding-top: 0; }
.studio-shell[data-builder-active="true"] .builder-context-tabs button { background: #fff; color: #505c70; border-color: #e1e5ed; }
.studio-shell[data-builder-active="true"] .builder-context-tabs button[aria-selected="true"] { background: #eef1ff; color: #2d43be; }
.studio-shell[data-builder-active="true"] .builder-context-content { flex: 1 0 auto; color: var(--ink); background: #fff; border-radius: 12px; padding: 12px; }
.studio-shell[data-builder-active="true"] .builder-topbar button:disabled { opacity: 1; background: #edf0f5; color: #758095; border-color: #dce1eb; cursor: not-allowed; box-shadow: none; }
.unified-builder-toolbox .builder-special-add-card { position: relative; }
.unified-builder-toolbox .builder-special-add-card .builder-add-help { position: static; }
.builder-entity-drop-marker { position: fixed; z-index: 100000; background: #5367ff; border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 2px #fff; }
.is-entity-dragging { opacity: .55; }
[data-builder-drag-kind], [data-builder-options-add-drag-kind], [data-special-drag-kind] > span { touch-action: none; cursor: grab; }
.builder-overview-actions { margin-left: auto; }
.builder-overview-actions .builder-order-actions { flex-wrap: nowrap; }
.builder-overview-actions .builder-order-actions button { min-width: 26px; }
.builder-overview-actions [data-action*="-up"], .builder-overview-actions [data-action*="-down"] { display: none; }
.builder-product-step > summary, .builder-product-group > summary, .builder-product-option > summary { flex-wrap: wrap; }
.studio-shell[data-builder-active="true"] .builder-player-stage .builder-overlay-corner { padding: 15px; }
.studio-shell[data-builder-active="true"] .builder-name-short { color: #273142; }
.studio-shell[data-builder-active="true"] .builder-topbar-title > .icon-button { color: #626d7e; }
.studio-shell[data-builder-active="true"] .builder-topbar-title > .icon-button:hover { color: #16191f; }
.studio-shell[data-builder-active="true"] .builder-name-field:has(.builder-configurator-name:hover) .builder-name-short { color: #16191f; }
.studio-shell[data-builder-active="true"] .builder-draft-status { color: #626d7e; }
.studio-shell[data-builder-active="true"] .builder-draft-status:is([data-state="session_only"], [data-state="conflict"]) { color: #a4302b; }
.studio-shell[data-builder-active="true"] .builder-draft-status:is([data-state="unsaved"], [data-state="recovered"]) span { background: #f6b64c; }
.studio-shell[data-builder-active="true"] .builder-diagnostics > div { color: var(--ink); }
.auto-build-dialog:has(.auto-build-loading) { position: fixed; inset: 0; margin: auto; width: min(660px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); height: fit-content; overflow: auto; border-radius: 18px; }
.auto-build-loading { padding: 36px 24px; gap: 12px; }
.auto-build-loading > p:last-of-type { font-size: 14px; }
.auto-build-loading > small { font-size: 12px; }
.builder-geometry-picker { display: grid; gap: 10px; padding: 18px 0 0; min-width: 0; }
.builder-geometry-picker h3 { margin: 0; font-size: 13px; }
.builder-geometry-picker > div { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-geometry-picker .button { flex: 1; min-width: 100px; }
.builder-geometry-settings { display: grid; gap: 10px; min-width: 0; }
.builder-geometry-settings h3 { margin: 0; font-size: 14px; }
.builder-geometry-settings > small { color: #647084; font-size: 11px; }
.builder-geometry-settings :is(input,select), [data-geometry-connection] :is(input,select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid #d2d8e3; border-radius: 9px; background: #fff; color: #252a32; font: 400 12px/1.4 system-ui,sans-serif; }
.builder-geometry-settings :is(input,select):focus-visible, [data-geometry-connection] :is(input,select):focus-visible { outline: 2px solid #5262ff; outline-offset: 2px; }
.builder-geometry-settings input[type=color], [data-geometry-connection] input[type=color] { padding: 4px; cursor: pointer; }
.builder-geometry-settings .builder-element-fields { padding: 12px; }
.builder-geometry-settings ul { list-style: none; padding: 10px 12px; margin: 0; display: grid; gap: 7px; font-size: 12px; overflow-wrap: anywhere; }
.image-layers-dialog { box-sizing: border-box; width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px; }
.image-layers-heading, .image-layer-row, .image-layers-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.image-layers-heading h2 { margin: 0; }
.image-layers-list { margin: 18px 0 10px; }
.image-layer-row { padding: 10px 0; border-bottom: 1px solid #e2e5ed; }
.image-layer-row > div { display: grid; gap: 4px; min-width: 0; }
.image-layer-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.image-layer-row button { flex: 0 0 auto; }
.image-layer-row small { color: #647084; }
.image-layers-pages { justify-content: center; font-size: 12px; margin-bottom: 18px; }
.image-layers-pages button { padding: 6px 10px; border: 1px solid #d2d8e3; border-radius: 8px; background: white; }
.image-layers-dialog form, .image-layers-dialog [data-layer-conditions] { display: grid; gap: 12px; padding: 0; }
.image-layers-dialog form > label { display: grid; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.image-layers-dialog form h3 { margin: 10px 0 0; font-size: 16px; }
.image-layers-dialog select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; border: 1px solid #d2d8e3; border-radius: 9px; background: white; padding: 9px 11px; color: #252a32; font: inherit; }
.image-layers-dialog .connection-condition { display: flex; gap: 8px; }
.image-layers-dialog .connection-condition button { border: 1px solid #d2d8e3; border-radius: 8px; background: white; padding: 0 12px; }
.image-layers-dialog .dialog-actions { flex-wrap: wrap; }
.image-layers-dialog [data-layer-error] { color: #aa2537; font-size: 13px; }
.support-consent-review { box-sizing: border-box; padding: 24px; }
.support-consent-review h2 { margin: 0 0 12px; font-size: 22px; }
.support-consent-review p { font-size: 14px; line-height: 1.5; }
.support-consent-review .support-consent-scope { color: #647084; }
.support-consent-review .dialog-actions { margin-top: 24px; flex-wrap: wrap; }
[data-geometry-connection] > :not(summary) { margin: 10px 0 0; }
[data-geometry-connection] > label { display: grid; gap: 5px; }
.builder-model-intake { display: grid; gap: 10px; min-width: 0; width: 100%; font-family: system-ui, sans-serif; }
.builder-model-intake h3 { margin: 0; font-size: 16px; }
.builder-model-intake .builder-model-filename { margin: -4px 0 2px; color: #646c78; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.builder-model-intake .builder-model-intake-note { margin: 0; font-size: 13px; }
.builder-private-model-recovery { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 13px; border: 1px solid #d9e1f7; border-radius: 12px; color: #28344f; background: #f6f8ff; }
.builder-private-model-recovery > .icon { width: 18px; height: 18px; margin-top: 2px; color: #4d63dd; }
.builder-private-model-recovery > div { min-width: 0; }
.builder-private-model-recovery strong { display: block; font-size: 12px; line-height: 1.4; }
.builder-private-model-recovery p { margin: 3px 0 0; color: #66718a; font-size: 11px; line-height: 1.45; }
.builder-private-model-recovery .button { grid-column: 1 / -1; width: 100%; min-height: 38px; }
.builder-model-intake .builder-model-dropzone { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 10px 18px; border: 1px dashed #aeb7c6; border-radius: 12px; background: #fff; cursor: pointer; }
.builder-model-dropzone:has(.builder-model-download) { margin-bottom: 10px; }
.builder-model-upload-prompt { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.builder-model-fileinfo { display: flex; align-items: baseline; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
.builder-model-fileinfo .builder-model-filesize { flex: none; white-space: nowrap; }
.builder-model-dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.builder-model-dropzone:focus-within, .builder-model-dropzone.is-drop-over { outline: 2px solid #5367ff; background: #f0f2ff; }
.builder-model-dropzone strong { font-size: 13px; line-height: 1.4; }
.builder-model-dropzone small { font-size: 11px; color: #646c78; }
.builder-model-dropzone .builder-model-download { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-height: 28px; margin: 0; padding: 4px 8px; border: 0; border-radius: 4px; background: #fff; color: #596273; font: 500 11px/1.3 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.builder-model-dropzone .builder-model-download .icon { width: 12px; height: 12px; color: currentColor; }
.builder-model-dropzone .builder-model-download:focus-visible { outline: 2px solid #5367ff; outline-offset: 2px; }
.builder-model-folder:focus-within { outline: 2px solid #5367ff; }
[data-builder-folder-model-choice] { display: grid; gap: 8px; font-size: 12px; }
[data-builder-folder-model-choice] select { width: 100%; min-width: 0; }
.builder-model-intake .button { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 0; min-height: 40px; padding: 10px 12px; margin: 0; font: 600 12px/1.4 system-ui, sans-serif; gap: 8px; cursor: pointer; border: 1px solid #d2d8e1; border-radius: 9px; background: #fff; color: #252a32; }
.builder-model-intake .icon { width: 18px; height: 18px; color: #252a32; flex-shrink: 0; }
.builder-empty-viewer:has(.builder-model-intake) { width: 100%; max-width: none; padding: 0; grid-template-columns: minmax(0, 1fr); background: transparent; }
.builder-empty-viewer:has(.builder-model-intake) > strong { display: none; }
.builder-model-intake .builder-model-dropzone strong { font: 600 13px/1.4 system-ui, sans-serif; color: #252a32; }
.builder-model-intake .builder-model-dropzone small { font: 400 11px/1.4 system-ui, sans-serif; }
.unified-builder-toolbox .builder-palette-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--bt-line, #dce0e8); border-radius: 8px; color: #404755; background: #fff; text-align: left; cursor: grab; touch-action: none; }
.unified-builder-toolbox .builder-palette-row strong { flex: 1; font-size: 13px; font-weight: 600; }
.builder-palette-row .icon { width: 16px; height: 16px; }
.builder-palette-handle { display: inline-flex; opacity: .45; }
.builder-palette-row:hover:not(:disabled), .builder-palette-row:focus-visible { background: #f5f6fa; outline: 2px solid #b9c2f5; outline-offset: 1px; }
.builder-palette-row:disabled { opacity: .5; cursor: not-allowed; }
.unified-builder-toolbox .builder-viewer-settings label { font-size: 13px; font-weight: 550; color: #404755; }
.unified-builder-toolbox .builder-viewer-settings select { font-size: 13px; min-height: 40px; }
.builder-viewer-settings .builder-choice-display-heading { font-size: 12px; }
.builder-lighting-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.builder-lighting-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-viewer-settings .builder-lighting-tile { position: relative; cursor: pointer; display: grid; gap: 5px; text-align: center; }
.builder-lighting-tile > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.builder-lighting-swatch { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #d6dbe3; border-radius: 9px; background: #ecebe8; }
.builder-lighting-swatch > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.builder-lighting-source { margin-top: 6px; }
.builder-lighting-tile input:checked ~ .builder-lighting-swatch { border-color: #4f6bff; box-shadow: 0 0 0 1px #4f6bff; }
.builder-lighting-tile input:checked ~ span:last-child { color: #2f45c0; }
.builder-lighting-tile input:focus-visible ~ .builder-lighting-swatch { outline: 2px solid #4f6bff; outline-offset: 3px; }
.builder-viewer-settings .builder-lighting-original { font-size: 12px; }
.builder-lighting-panel > button { justify-self: start; }
.builder-ar-placement-options span { min-height: 70px; justify-items: center; padding: 10px; }
.builder-ar-illustration { display: block; position: relative; width: 48px; height: 34px; color: #778394; }
.builder-ar-illustration > i { position: absolute; display: block; border: 2px solid currentColor; border-radius: 3px; width: 24px; height: 21px; left: 12px; top: 4px; background: #eef0f5; }
.builder-ar-illustration.is-floor { border-bottom: 2px solid currentColor; }
.builder-ar-illustration.is-floor > i { top: 11px; }
.builder-ar-illustration.is-wall { border-left: 2px solid currentColor; }
.builder-ar-illustration.is-wall > i { left: 0; }
.unified-builder-toolbox .builder-viewer-camera { padding-top: 12px; border-top: 1px solid #dce0e8; }
.unified-builder-toolbox .builder-viewer-camera > div { display: grid; gap: 8px; }
.unified-builder-toolbox .builder-viewer-camera button { min-height: 40px; font-size: 13px; }
.builder-model-diagnostics { margin-top: 16px; }
.builder-model-diagnostics > summary, .builder-viewer-advanced > summary { font-size: 13px; }
.builder-layout-map-center > .builder-layout-area.is-viewer { height: 100%; }
.builder-layout-zone-controls label { display: grid; gap: 6px; margin: 12px 0; }
.builder-layout-zone-controls.builder-options-disclosure { display: block; padding: 0; margin-top: 0; }
.builder-layout-zone-controls.builder-options-disclosure label { padding-inline: 12px; }
.builder-layout-zone-controls select { width: 100%; min-width: 0; }
.unified-builder-toolbox .builder-layout-hint { font-size: 12px; line-height: 1.5; margin: 10px 0 18px; }
.builder-ar-element-settings { display: grid; gap: 14px; min-width: 0; padding: 8px 0; }
.builder-ar-element-settings > label { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.builder-ar-element-settings > label > span { white-space: nowrap; flex-shrink: 0; }
.builder-ar-element-settings select { width: 100%; min-width: 0; max-width: 100%; min-height: 40px; font-size: 13px; }
.builder-ar-element-settings small { color: #737d8c; font-size: 12px; line-height: 1.5; }
body:has([data-builder-shell]) #studio-toast { bottom: 76px; }
/* Group presentation uses small, focused sections instead of one long grid. */
.builder-choice-display .builder-presentation-section { border: 0; border-top: 1px solid #e3e6eb; border-radius: 0; margin-top: 12px; padding-top: 10px; }
.builder-presentation-section > summary { cursor: pointer; padding: 4px 0 10px; font-size: 13px; font-weight: 600; }
.builder-presentation-section label { display: grid; gap: 5px; margin-bottom: 10px; min-width: 0; }
.builder-presentation-section select { width: 100%; min-width: 0; font-size: 13px; }
.builder-presentation-section .availability-toggle { display: flex; }
.builder-choice-display { border: 0; background: transparent; }

/* An authored off state wins over the horizontal/side-zone display rules. */
.studio-shell[data-builder-active="true"] .builder-player-layout .builder-layout-zone[data-zone-enabled="false"] { display: none !important; }
.builder-layout-map [data-builder-area-drag] { cursor: grab; touch-action: none; user-select: none; }
.builder-layout-map .is-area-dragging { opacity: .5; cursor: grabbing; }
.builder-layout-map .is-area-drop-target { outline: 3px solid #5367ff; outline-offset: 2px; background: #e8ecff; }
.builder-area-move-controls { margin-bottom: 16px; font-size: 12px; }
.builder-area-move-controls summary { cursor: pointer; padding: 8px 0; }
.builder-area-move-controls button { margin: 4px; padding: 8px; border: 1px solid #dce0e8; border-radius: 8px; background: #fff; }
.builder-layout-image-upload { display: grid; justify-items: center; align-content: center; gap: 5px; width: 100%; min-width: 88px; min-height: 76px; padding: 10px; border: 1px dashed #aeb7c6; border-radius: 10px; background: #ffffffb8; color: #69717d; font-size: 12px; cursor: pointer; }
.builder-layout-image-upload:hover, .builder-layout-image-upload:focus-visible { outline: 2px solid #5367ff; background: #f0f2ff; }
.builder-layout-image-upload small { font-size: 10px; }
.builder-layout-image.has-image > .builder-layout-image-upload { display: none; }
.builder-layout-image:not(.has-image):has(.builder-layout-image-upload) { min-width: 88px; }
.builder-model-dropzone .builder-model-filename { min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.4; }
.builder-model-filename:empty { display: none; }
.connection-list { display: grid; gap: 8px; margin: 10px 0; }
.connection-list article, .connection-action { min-width: 0; display: grid; gap: 6px; padding: 10px; border: 1px solid #dfe3ec; border-radius: 8px; overflow-wrap: anywhere; }
.connection-list small, .connection-action small { color: #606a79; font-size: 11px; }
.connection-list strong { font-size: 12px; }
.connection-list span { font-size: 11px; }
[data-model-connections] input, [data-model-connections] select, [data-model-connections] textarea { min-width: 0; max-width: 100%; width: 100%; }
[data-model-connections] input:not([type=checkbox]):not([type=color]), [data-model-connections] select, [data-model-connections] textarea { padding: 8px; border: 1px solid #dfe3ec; border-radius: 7px; font: inherit; min-height: 36px; }
[data-model-connections] .connection-filter label { display: flex; align-items: center; margin: 7px 0; }
[data-model-connections] input[type=checkbox] { width: auto; }
[data-model-connections] label { display: grid; gap: 5px; font-size: 12px; }
[data-model-connections] button { min-height: 34px; padding: 6px; margin: 3px 0; border: 1px solid #dfe3ec; border-radius: 6px; background: #fff; color: #283549; }
.connection-condition { display: flex; gap: 5px; margin: 6px 0; }
.connection-condition select { flex: 1; }
.connection-pages { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
[data-connection-actions] { display: grid; gap: 10px; margin: 12px 0; }
.connection-action [data-connection-for] { display: none; }
.connection-action[data-connection-action-type=node_visibility] [data-connection-for=node_visibility],
.connection-action[data-connection-action-type=material_color] [data-connection-for=material_color],
.connection-action[data-connection-action-type=node_transform] [data-connection-for=node_transform] { display: grid; gap: 6px; }
[data-connection-error] { color: #a72d20; font-size: 12px; }
.auto-build-part-authoring > label { display: grid; gap: 5px; margin: 10px 0; }
.auto-build-part-authoring input, .auto-build-part-authoring select { min-width: 0; width: 100%; }
.auto-build-part-authoring input[type=color] { height: 38px; }
[data-rule-editor] fieldset { min-width: 0; border: 1px solid #dfe3ec; border-radius: 8px; margin: 8px 0; padding: 8px; }
[data-rule-editor] legend { max-width: 100%; }
[data-rule-editor] input, [data-rule-editor] select { min-width: 0; max-width: 100%; }
[data-rule-editor] label { display: grid; gap: 5px; margin-top: 8px; font-size: 12px; }
[data-rule-editor] button { min-height: 32px; background: white; border: 1px solid #dfe3ec; border-radius: 5px; margin: 4px 2px; padding: 5px; color: #34435a; font-size: 12px; }
[data-limit-row] { margin: 10px 0; padding: 8px; border: 1px solid #dfe3ec; border-radius: 8px; }
[data-rule-error] { color: #a72d20; font-size: 12px; }
.buyer-input [aria-invalid=true] { border-color: #b52b27; }
.buyer-input button { min-height: 36px; border: 1px solid #dfe3ec; border-radius: 6px; padding: 6px; }
.geometry-demo-starters { padding: 12px 16px; margin-bottom: 16px; }

/* Feedback 6: one light editing surface, compact controls and contextual help. */
.studio-shell[data-builder-active="true"] .unified-builder-toolbox { padding: 0; background: #fff; color: var(--ink); }
.studio-shell[data-builder-active="true"] .builder-context-heading { padding: 14px 16px 0; margin: 0; background: #f7f8fb; }
.studio-shell[data-builder-active="true"] .builder-context-tabs { padding: 16px; margin: 0; background: #f7f8fb; border: 0; }
.studio-shell[data-builder-active="true"] .builder-context-content { border: 0; border-radius: 0; padding: 14px; margin: 0; min-width: 0; }
.studio-shell .builder-special-editor { border: 0; border-bottom: 1px solid #e4e7ed; border-radius: 0; margin: 0; padding: 0; }
.studio-shell .builder-special-editor.is-selected { border: 0; outline: 0; box-shadow: none; }
.studio-shell .builder-special-editor > summary { display: flex; gap: 8px; align-items: center; padding: 14px 0; cursor: pointer; }
.studio-shell .builder-special-editor > summary[hidden] { display: none; }
.builder-special-editor > summary strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.builder-field-unit { color: #747d89; font-size: 12px; }
.studio-shell .builder-special-editor-body { padding: 0; display: grid; gap: 12px; }
.builder-special-toolbar, .builder-setting-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.builder-special-toolbar .availability-toggle { margin: 0 auto 0 0; }
.builder-special-number-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.unified-builder-toolbox .builder-field.has-visible-label { display: grid; gap: 5px; min-width: 0; }
.studio-shell .builder-special-editor-body > label { display: grid; gap: 5px; min-width: 0; }
.studio-shell .builder-special-text-setting textarea { width: 100%; min-height: 64px; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--bt-line); border-radius: var(--bt-radius); font: inherit; resize: vertical; }
.studio-shell .builder-options-disclosure:has([data-limit-list]) { border: 0; border-top: 1px solid #e4e7ed; border-radius: 0; padding: 10px 0 0; }
.studio-shell .builder-options-disclosure:has([data-limit-list]) > summary { padding: 8px 0; }
.studio-shell [data-rule-editor] fieldset { margin: 8px 0; padding: 0; border: 0; border-radius: 0; }
.studio-shell [data-rule-editor] fieldset fieldset { border-left: 2px solid #dce2f3; padding-left: 8px; }
.studio-shell [data-rule-editor] legend { padding: 0; width: 100%; }
.studio-shell [data-limit-row] { margin: 16px 0; padding: 14px 0; border: 0; border-top: 1px solid #e4e7ed; border-radius: 0; }
.studio-shell [data-rule-editor] :is(input:not([type="checkbox"]), select, textarea) { width: 100%; padding: 8px 10px; border: 1px solid #dfe3eb; border-radius: 7px; box-sizing: border-box; font: inherit; }
.studio-shell [data-rule-editor] .connection-condition { align-items: center; }
.builder-rule-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.builder-rule-more { min-width: 0; margin-top: 8px; font-size: 12px; }
.builder-rule-more > summary { cursor: pointer; color: #566277; padding: 6px 0; }
.builder-inline-help { position: relative; flex: 0 0 24px; color: #596577; font-size: 12px; }
.builder-inline-help > summary { display: grid; place-items: center; cursor: pointer; list-style: none; width: 24px; height: 24px; padding: 0; border: 1px solid #dce1e9; border-radius: 50%; background: #fff; }
.builder-inline-help > summary::-webkit-details-marker { display: none; }
.builder-inline-help > span { position: fixed; z-index: 10020; box-sizing: border-box; width: min(280px, calc(100vw - 20px)); max-width: calc(100vw - 20px); padding: 12px; border-radius: 8px; color: #fff; background: #303744; box-shadow: 0 8px 24px #0003; overflow-wrap: anywhere; font: 12px/1.5 system-ui; }
.builder-inline-help > summary:focus-visible { outline: 2px solid #5367ff; outline-offset: 2px; }
.builder-availability-eye { position: relative; display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid #dce1e9; border-radius: 7px; color: #536173; cursor: pointer; }
.builder-availability-eye input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.builder-availability-eye .icon { display: block; width: 18px; height: 18px; }
.builder-availability-eye:has(input:checked) .when-unavailable, .builder-availability-eye:has(input:not(:checked)) .when-available { display: none; }
.builder-availability-eye:has(input:focus-visible) { outline: 2px solid #5367ff; outline-offset: 2px; }
.builder-availability-eye:has(input:not(:checked)) { background: #f2f3f6; color: #8b4343; }
.studio-shell .builder-product-group > summary, .studio-shell .builder-product-option > summary { flex-wrap: nowrap; gap: 6px; }
.studio-shell .builder-product-group > summary > span:first-child, .studio-shell .builder-product-option > summary > span:first-child { min-width: 0; flex: 1; }
.studio-shell .builder-overview-actions .builder-order-actions { gap: 3px; }
.builder-entity-drag-ghost { position: fixed !important; z-index: 100002; pointer-events: none !important; margin: 0 !important; padding: 10px; box-sizing: border-box; overflow: hidden; background: #fff; border: 2px solid #5367ff; border-radius: 10px; box-shadow: 0 8px 25px #17205030; color: #303744; opacity: .93; }
.builder-entity-drag-ghost * { pointer-events: none !important; }
.builder-entity-drop-marker[data-drop-kind="slot"] { box-sizing: border-box; background: #e9edff; border: 2px dashed #5367ff; border-radius: 10px; box-shadow: none; }
.is-entity-dragging { opacity: .2; }
.studio-shell details.builder-grid-warning { position: relative; width: 24px; margin: 6px 0 0 auto; padding: 0; }
.studio-shell details.builder-grid-warning > summary { display: grid; place-items: center; list-style: none; width: 24px; height: 24px; cursor: pointer; border: 1px solid #e7cda3; border-radius: 50%; color: #8b4d14; background: #fff8ee; font-weight: 700; }
.studio-shell details.builder-grid-warning > span { position: absolute; right: 0; top: 28px; z-index: 100; width: min(220px, 60vw); padding: 10px; border-radius: 8px; color: #fff; background: #303744; box-shadow: 0 5px 15px #0002; font: 12px/1.5 system-ui; }
.studio-light-preview { display: grid; gap: 10px; padding: 20px; border: 1px solid #dce1eb; border-radius: 12px; background: #f7f8fb; color: #273142; }
.studio-light-preview > span { width: fit-content; padding: 5px 10px; border: 1px solid #aab5f4; border-radius: 8px; background: #eef1ff; color: #2d43be; }
.builder-setup-result { display: flex; align-items: center; gap: 16px; padding: 20px 0; }
.builder-setup-result > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #267250; background: #e6f5ed; font-size: 26px; }
.builder-setup-result strong, .builder-setup-result small { display: block; }
.builder-setup-notice { margin: 0 0 20px; padding: 10px 14px; border: 1px solid #ecd4a7; border-radius: 8px; color: #815413; background: #fff9ee; }
.builder-player-stage .builder-model-intake { width: min(344px, calc(100% - 32px)); margin: auto; display: grid; gap: 10px; }
.builder-player-stage [data-builder-empty-viewer] { min-width: 0; width: 100%; }
.measurement-limit-hint, .builder-buyer-input .measurement-limit-hint { color: #647084; font-size: 12px; font-weight: 500; }
.builder-buyer-input:has(input[aria-invalid="true"]) .measurement-limit-hint { color: #a43b36; }

/* Feedback 8: compact editor hierarchy without shrinking pointer targets. */
.unified-builder-toolbox { --bt-fs-xs: 11px; --bt-fs-sm: 12px; --bt-fs-md: 13px; --bt-fs-lg: 14px; }
.unified-builder-toolbox :is(input, select, textarea) { font-weight: 500; }
.unified-builder-toolbox .builder-element-list button.is-compact { min-height: 44px; padding: 10px 12px; }
.unified-builder-toolbox .builder-element-list button.is-compact strong { font-weight: 600; }
.unified-builder-toolbox .builder-options-disclosure > summary { font-weight: 600; }
.unified-builder-toolbox .builder-options-tabs button { font-size: 12px; font-weight: 600; }
.unified-builder-toolbox .builder-element-list-heading { letter-spacing: .06em; font-weight: 650; }
.builder-sidebar-templates { margin: 14px 0; }
.builder-sidebar-templates > summary { padding: 8px 0; cursor: pointer; font-size: 12px; font-weight: 600; }
.builder-sidebar-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-sidebar-template-grid > button { display: grid; justify-items: center; gap: 8px; padding: 10px; border: 1px solid #dce0e8; border-radius: 8px; background: #fff; color: #404755; cursor: pointer; }
.builder-sidebar-template-grid > button:hover, .builder-sidebar-template-grid > button:focus-visible { outline: 2px solid #aeb9ef; background: #f8f9fc; }
.builder-sidebar-template-grid strong { font-size: 11px; font-weight: 600; }
.builder-sidebar-templates > small { display: block; margin-top: 8px; font-size: 11px; color: #69717d; }
.builder-sidebar-mini { display: grid; gap: 7px; width: 76px; height: 108px; padding: 7px; border: 1px solid #e0e3e7; background: #fafafa; border-radius: 3px; }
.builder-sidebar-mini > i, .builder-sidebar-mini b { display: block; height: 3px; width: 65%; background: #9ca4af; border-radius: 2px; }
.builder-sidebar-mini > span { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.builder-sidebar-mini b { grid-column: 1 / -1; height: 2px; width: 45%; }
.builder-sidebar-mini em { height: 14px; background: #fff; border: 1px solid #c9ced6; border-radius: 3px; }
.builder-sidebar-mini em:first-of-type { background: #e4e7eb; border-color: #626c79; }
.builder-sidebar-mini u { height: 10px; background: #586372; border-radius: 2px; }
.builder-sidebar-mini.is-soft > span { padding: 4px; border: 1px solid #d5d9df; border-radius: 6px; background: white; }
.builder-sidebar-mini.is-square > span { padding: 4px; border: 1px solid #d5d9df; background: white; }
.builder-sidebar-mini.is-square em, .builder-sidebar-mini.is-minimal em { border-radius: 0; }
.builder-sidebar-mini.is-minimal { gap: 10px; border: 0; background: white; }
.brand-custom-font { display: none !important; }
.brand-font-picker:has(option[value="custom"]:checked) .brand-custom-font { display: grid !important; }
.brand-custom-font small { font-size: 11px; line-height: 1.5; color: #69717d; font-weight: 400; }
.configux-demo-geometry > div[hidden] { display: none !important; }

/* Feedback 9: stable row columns; content must never sit behind actions. */
.studio-shell .unified-builder-toolbox :is(.builder-product-step,.builder-product-group,.builder-product-option) > summary {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 6px; padding: 10px 8px;
}
.studio-shell .unified-builder-toolbox :is(.builder-product-group,.builder-product-option) > summary > span:first-child { min-width: 0; }
.studio-shell .unified-builder-toolbox :is(.builder-product-step,.builder-product-group,.builder-product-option) > summary strong { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.studio-shell .unified-builder-toolbox .builder-overview-actions { display: block; margin: 0; min-width: max-content; justify-self: end; }
.studio-shell .unified-builder-toolbox .builder-overview-actions .builder-order-actions { display: flex; gap: 3px; flex-wrap: nowrap; }
.studio-shell .unified-builder-toolbox .builder-overview-actions .builder-icon-button { width: 28px; min-width: 28px; height: 30px; min-height: 30px; padding: 0; }
.studio-shell .unified-builder-toolbox .builder-overview-actions .builder-drag-handle { display: inline-flex; align-items: center; justify-content: center; }
.builder-drag-handle:focus-visible { outline: 2px solid #5367ff; outline-offset: 2px; }
[data-builder-drag-item] { transition: transform 160ms ease; }
.unified-builder-toolbox, [data-layout-zone] { overflow-anchor: none; }
.studio-shell .builder-price-field, .studio-shell .builder-choice-role { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; }
.studio-shell .builder-money-control { display: block; position: relative; min-width: 0; }
.studio-shell .builder-money-control input { width: 100%; padding-right: 52px; }
.studio-shell .builder-money-unit { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #69717d; font-size: 12px; font-weight: 400; }
.studio-shell .builder-choice-role > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.studio-shell .builder-choice-role > label { min-width: 0; }
.studio-shell [data-model-connections] .connection-list { gap: 0; }
.studio-shell [data-model-connections] .connection-list article { display: block; padding: 0; border: 0; border-bottom: 1px solid #e4e7ec; border-radius: 0; }
.studio-shell [data-model-connections] .connection-row { border: 0; margin: 0; padding: 0; }
.studio-shell [data-model-connections] .connection-row > summary { padding: 10px 0; cursor: pointer; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.connection-row > summary::after { content: '\203A'; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.connection-row[open] > summary::after { transform: rotate(90deg); }
.connection-row > summary > strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.connection-row > summary > small { grid-column: 1; font-weight: 400; }
.connection-row dl { margin: 4px 0; display: grid; gap: 4px; font-size: 11px; }
.connection-row dl > div { display: grid; grid-template-columns: minmax(65px, .7fr) minmax(0,1fr); gap: 8px; }
.connection-row dt { color: #69717d; }.connection-row dd { margin: 0; }
.connection-targets { padding: 6px 0 6px 15px; margin: 0; font-size: 11px; color: #69717d; overflow-wrap: anywhere; }
.studio-shell [data-model-connections] .connection-action { padding: 12px 0; border: 0; border-top: 1px solid #e4e7ec; border-radius: 0; }
.connection-editor-heading, .connection-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.connection-editor-heading h4 { margin: 0; }
.connection-scope-note, [data-connection-scope] { color: #69717d; font-size: 11px; line-height: 1.5; margin: 10px 0; }
.studio-shell [data-model-connections] .connection-filter { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; align-items: center; }
.studio-shell [data-model-connections] .connection-filter > label { grid-column: 1 / -1; }
.connection-row-actions, .connection-editor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; }
.connection-editor-actions { margin-top: 12px; border-top: 1px solid #e4e7ec; }
.studio-shell [data-model-connections] [data-action="connection-apply"] { color: white; background: #4d61ff; border-color: #4d61ff; }
.connection-danger-zone { display: flex; justify-content: flex-end; }
.studio-shell [data-model-connections] [data-action="connection-delete"] { color: #a33a31; border-color: transparent; }
.studio-shell [data-model-connections] [data-action="connection-remove-row"] { justify-self: end; color: #69717d; }
.connection-pages[hidden] { display: none; }
[data-builder-player][data-preview-state="invalid"] model-viewer { visibility: hidden; }
[data-player-preview-error] { position: absolute; top: 10px; left: 15px; right: 15px; z-index: 20; padding: 12px; color: #8c332b; background: #fff5f3; border: 1px solid #ecd1cc; border-radius: 8px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { [data-builder-drag-item] { transition: none; } }
/* MP-02: one non-destructive report dialog for Studio and Builder. */
.bug-report-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.bug-report-dialog form { display: grid; gap: 16px; }
.bug-report-dialog form > label, .bug-report-dialog form > p, .bug-report-dialog form > h2 { margin: 0; }
.bug-report-dialog form { font-size: 14px; line-height: 1.45; }
.bug-report-dialog h2 { font-size: 22px; }
.bug-report-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bug-report-dialog [hidden] { display: none !important; }
.bug-report-dialog label { display: grid; gap: 6px; font-weight: 600; }
.bug-report-dialog input, .bug-report-dialog textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cbd1df; border-radius: 10px; font: inherit; }
.bug-report-dialog textarea { resize: vertical; }
.bug-report-dialog details label { margin-top: 12px; }
.bug-report-dialog dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.bug-report-dialog dd { margin: 0; overflow-wrap: anywhere; }
.bug-report-dialog summary { cursor: pointer; color: #596477; font-size: 13px; }
.bug-technical-details p, .bug-technical-details dl { font-size: 12px; color: #596477; }
.bug-report-dialog [data-bug-error]:not([hidden]) { padding: 12px; background: #fff1ee; color: #9b291c; border-radius: 8px; }
.bug-report-dialog [data-bug-receipt]:not([hidden]) { padding: 12px; background: #eaf7ef; color: #155e37; border-radius: 8px; }
.report-bug-trigger { white-space: nowrap; flex-shrink: 0; }
.template-catalog-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.template-catalog-toolbar label { flex: 1 1 180px; }
.template-catalog-toolbar input,.template-catalog-toolbar select { width: 100%; min-height: 42px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #cbd1df; border-radius: 10px; background: white; font: inherit; }
.template-catalog-toolbar button,.template-pagination button { padding: 10px 14px; border: 1px solid #cbd1df; background: white; border-radius: 8px; }
.template-catalog-toolbar button[aria-pressed="true"] { background: #eef0ff; color: #2944da; }
.template-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.template-grid.template-list { grid-template-columns: 1fr; }
.template-list .template-card { display: grid; grid-template-columns: 140px minmax(0,1fr); }
.template-list .template-card-preview { min-height: 100%; }
.template-list .template-card-body { gap: 8px; padding: 16px; align-content: start; }
.template-list .template-card-body > h2, .template-list .template-card-body > p { margin: 0; }
.template-list .template-card-facts { display: none; }
.asset-upload-button { position: relative; overflow: hidden; }
.asset-upload-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.asset-upload-button:focus-within { outline: 2px solid var(--accent, #4f5dff); outline-offset: 3px; }
@media (max-width: 600px) { .template-list .template-card { grid-template-columns: 1fr; } .template-list .template-card-preview { min-height: 90px; padding: 12px; } }
@media (max-width: 700px) {
  .topbar-actions .report-bug-trigger { position: static; inset: auto; padding: 8px; font-size: 10px; box-shadow: none; }
  .bug-report-dialog .dialog-actions { flex-wrap: wrap; }
}
.report-bug-trigger .icon { transform: rotate(35deg); width: 22px; height: 22px; }
.builder-bug-trigger { width: 44px; height: 44px; min-width: 44px; }
.builder-bug-trigger .icon { width: 27px; height: 27px; }
.bug-screenshots { display: grid; gap: 12px; }
.bug-screenshot-drop { display: grid; justify-items: center; align-content: center; gap: 8px; width: 100%; min-height: 140px; padding: 24px 16px; border: 1px dashed #b6bfce; border-radius: 16px; background: #fcfcff; color: #252c38; font: inherit; cursor: pointer; text-align: center; }
.bug-screenshot-drop .icon { width: 24px; height: 24px; margin-bottom: 2px; }
.bug-screenshot-drop span { font-size: 12px; color: #697385; }
.bug-screenshot-drop:hover:not(:disabled), .bug-screenshot-drop.is-dragging { background: #f0f2ff; border-color: #4f5dff; }
.bug-screenshot-drop:focus-visible { outline: 2px solid #4f5dff; outline-offset: 3px; }
.bug-screenshot-drop:disabled { opacity: .55; cursor: default; }
.bug-image-list:empty { display: none; }
.bug-image-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; }
.bug-image-list figure { margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.bug-image-list img { width: 100%; height: 120px; object-fit: contain; background: #f5f6f8; border-radius: 8px; }
.bug-image-list figcaption { overflow-wrap: anywhere; font-size: 12px; }
[data-support-attachment-dialog] { display: grid; gap: 16px; padding: 24px; width: min(980px,calc(100vw - 32px)); max-width: 980px; }
[data-support-attachment-dialog] .bug-image-list { grid-template-columns: 1fr; }
[data-support-attachment-dialog] .bug-image-list img { height: auto; max-height: 60vh; }
[data-support-attachment-dialog]:not([open]) { display: none; }

/* Studio collections: Configurators, Templates and Assets use the same rhythm. */
.compact-page-heading { align-items: center; flex-wrap: wrap; min-height: 48px; gap: 16px 24px; margin-bottom: 22px; }
.compact-page-heading h1 { margin: 0; }
.compact-page-heading .page-actions { margin-left: auto; align-items: center; flex-wrap: wrap; }
.page-summary { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 0 auto; }
.page-summary > div { min-width: 82px; padding-left: 18px; border-left: 1px solid var(--line); }
.page-summary dt { color: var(--muted); font-size: 10px; font-weight: 650; }
.page-summary dd { margin: 5px 0 0; color: var(--ink); font-size: 22px; font-weight: 750; line-height: 1.1; }
.collection-report-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: -4px 0 16px; }
.data-source-details { position: relative; color: var(--muted); font-size: 11px; }
.data-source-details summary { cursor: pointer; }
.data-source-details p { max-width: 360px; line-height: 1.5; }
.customer-support-dashboard > .data-source-details { justify-self: end; margin: -10px 0 4px; }

/* Support uses the shared collection shell. Case facts stay behind one disclosure. */
.support-task-panel { width: min(760px, 100%); }
.support-task-panel .panel { margin: 0; }
.support-collection-items { padding: 18px; display: grid; gap: 10px; }
.support-collection-item { min-width: 0; padding: 0 !important; border: 1px solid var(--border, #e0e3eb); border-radius: 12px; background: #fff; }
.support-collection-item > summary { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 18px; align-items: center; gap: 20px; padding: 18px; cursor: pointer; list-style: none; }
.support-collection-item > summary::-webkit-details-marker { display: none; }
.support-collection-item > summary:focus-visible { outline: 2px solid #5066ff; outline-offset: 3px; border-radius: 12px; }
.support-collection-item[open] > summary > .icon { transform: rotate(90deg); }
.support-case-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.support-case-title strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.support-case-title > .icon { color: #5366fd; width: 20px; flex-shrink: 0; }
.support-case-date { color: #687386; font-size: 11px; }
.support-case-details { border-top: 1px solid #e7eaf0; padding: 18px; display: grid; gap: 14px; }
.support-case-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.support-access-summary { display: flex; align-items: center; gap: 8px; color: #53617a; font-size: 12px; margin: 0; }
.support-access-summary .icon { width: 16px; }
.support-collection-items.is-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.support-collection-items.is-cards summary { grid-template-columns: 1fr auto; gap: 16px 8px; }
.support-collection-items.is-cards .support-case-title { grid-column: 1 / -1; min-height: 48px; }
.support-collection-items.is-cards .support-case-date { grid-row: 3; }
.support-collection-items.is-cards summary > .konto-admin-state { justify-self: start; }
.support-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 0 18px 18px; }
.support-request-confirmation { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; }
.support-request-confirmation h2 { flex: 1; margin: 0; font-size: 16px; }
.support-request-confirmation > .icon { color: #17835c; }
.support-request-upload input { width: 100%; max-width: 100%; }
.support-conversation-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(85vh, 900px); overflow: auto; }
.support-conversation-dialog [hidden] { display: none !important; }
.support-conversation-heading { display: flex; align-items: center; gap: 12px; }
.support-conversation-heading h2 { flex: 1; margin: 0; }
.support-conversation-heading span { border: 1px solid var(--border, #dce0e7); border-radius: 20px; padding: 4px 10px; }
.support-conversation-messages { display: grid; gap: 10px; margin: 16px 0; }
.support-conversation-messages article { border: 1px solid var(--border, #dce0e7); border-radius: 10px; padding: 12px; overflow-wrap: anywhere; }
.support-conversation-messages article p { white-space: pre-wrap; margin: 8px 0; }
.support-conversation-dialog form { display: grid; gap: 12px; }
.support-conversation-dialog textarea { width: 100%; resize: vertical; }
.support-conversation-files { font-size: 13px; color: var(--muted, #667085); }
.support-conversation-email { display: flex; align-items: center; gap: 8px; }
.support-task-panel .customer-support-access-consent { gap: 16px; }
.support-permission-note { font-size: 12px; color: #627086; line-height: 1.5; margin: 0; }
.support-consent-advanced summary { font-size: 12px; cursor: pointer; color: #53617a; }
@media (max-width: 1050px) { .support-collection-items.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .support-collection-items { padding: 10px; }
  .support-collection-items.is-cards { grid-template-columns: 1fr; }
  .support-collection-item > summary { grid-template-columns: 1fr auto; gap: 12px; padding: 14px; }
  .support-case-title { grid-column: 1 / -1; }
  .support-case-date { display: none; }
  .support-collection-item > summary > .icon { justify-self: end; }
  .support-collection-item .konto-admin-state { justify-self: start; }
  .support-case-details { padding: 14px; }
}
.template-library-page { display: block; }
.collection-secondary-actions, .asset-storage-details { position: relative; font-size: 11px; }
.collection-secondary-actions > summary { list-style: none; }
.collection-secondary-actions > summary::-webkit-details-marker { display: none; }
.collection-secondary-actions > button { position: absolute; top: calc(100% + 8px); right: 0; width: 230px; z-index: 15; box-shadow: var(--shadow); }
.asset-storage-details { color: var(--muted); }
.asset-storage-details > summary { padding: 8px 0; cursor: pointer; }
.asset-storage-details > p { max-width: 280px; margin: 4px 0; }
.asset-quota-notice { padding: 12px 16px; margin-bottom: 16px; border: 1px solid #edc493; border-radius: 10px; color: #80501b; background: #fff8ee; font-size: 12px; }
.template-collection .template-grid, .asset-collection .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 18px; }
.template-card { min-width: 0; box-shadow: none; }
.template-card-preview { min-height: 144px; }
.template-card-preview strong { font-size: 10px; }
.template-card-body { padding: 14px; gap: 10px; }
.template-card-body h3 { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.template-card-body > .template-card-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-height: 36px; font-size: 11px; line-height: 1.6; }
.template-card-meta { gap: 8px; font-size: 9px; }
.template-action-menu { position: relative; margin-left: auto; }
.template-action-menu > summary { list-style: none; cursor: pointer; }
.template-action-menu > summary::-webkit-details-marker { display: none; }
.template-action-menu > div { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 12; display: grid; min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.template-action-menu > div > * { padding: 8px; color: var(--ink); font-size: 11px; }
.template-action-menu a:hover { background: #f4f5ff; border-radius: 6px; }
.template-more-details { font-size: 11px; color: var(--muted); }
.template-more-details > summary { width: fit-content; padding: 4px 0; color: #4051d8; cursor: pointer; font-weight: 650; }
.template-more-details > div { padding-top: 8px; line-height: 1.6; }
.template-more-details p { margin: 0 0 10px; }
.template-list .template-more-details .template-card-facts { display: grid; }
.template-collection .template-grid.template-list, .asset-collection .asset-grid.asset-list { grid-template-columns: 1fr; }
.template-list .template-card { grid-template-columns: 120px minmax(0, 1fr); }
.template-list .template-card-preview { min-height: 100%; }
.template-list .template-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; }
.template-list .template-card-meta, .template-list .template-card-body > h3, .template-list .template-card-description { grid-column: 1; }
.template-list .template-card-actions { grid-column: 2; grid-row: 1 / 4; }
.template-list .template-more-details { grid-column: 1 / -1; }
.template-list .template-card-description { min-height: 0; }
.template-library-page .library-section { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.template-library-page .library-section-heading .eyebrow { display: none; }
.template-library-page .library-section-heading h2 { font-size: 14px; }
.template-purchase-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; }
.template-purchase-notice > span { flex: 1; min-width: 160px; }
.asset-collection .table-tools { flex-wrap: wrap; justify-content: flex-end; }
.asset-sort { grid-template-columns: 1fr; }
.asset-sort select { min-width: 80px; }
.asset-collection .asset-folder-browser { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.asset-collection .asset-grid { margin: 0; }
.asset-collection .asset-card[hidden] { display: none; }
.asset-list .asset-card { display: grid; grid-template-columns: 90px minmax(0, 1fr) 42px; align-items: center; }
.asset-list .asset-preview { height: 100%; min-height: 88px; grid-column: 1; grid-row: 1 / 3; }
.asset-list .asset-preview > span { width: 40px; height: 40px; }
.asset-list .asset-preview small { right: 5px; bottom: 5px; }
.asset-list .asset-meta { grid-column: 2; min-width: 0; flex-wrap: wrap; }
.asset-list .asset-meta > div { min-width: 0; }
.asset-list .asset-meta strong { overflow-wrap: anywhere; }
.asset-list .asset-meta > details { max-width: 100%; }
.asset-list .asset-move-form { grid-column: 2; grid-row: 2; }
.asset-list .asset-action-menu { grid-column: 3; grid-row: 1; align-self: center; }
.connection-summary-compact { padding: 16px 18px; gap: 14px 24px; margin-bottom: 16px; }
.connection-summary-compact > div { display: flex; align-items: center; gap: 10px; }
.connection-summary-compact h2 { margin: 0; font-size: 14px; }
.connection-summary-compact dd { margin-top: 4px; }
.integration-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.integration-actions button:disabled { opacity: 1; color: #9298a3; border-color: #e2e5eb; background: #f2f3f6; box-shadow: none; cursor: not-allowed; }
.integration-card .integration-info { margin-top: 12px; font-size: 11px; }
.integration-card .integration-info > p { line-height: 1.6; }
.integrations-catalog { gap: 16px; }
.integrations-catalog .integration-card { min-height: 160px; padding: 18px; border-color: #dce0ec; }
.integration-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; }
.integrations-catalog .integration-logo { height: 42px; min-width: 42px; border-radius: 10px; }
.integrations-catalog .integration-copy { margin: 14px 0 4px; }
.integrations-catalog .integration-copy h2 { font-size: 13px; }
.integrations-catalog .integration-copy p { margin-top: 6px; color: #536079; font-size: 10px; }
.integrations-catalog .integration-actions { padding-top: 12px; }
.integration-coming-soon { background: #fcfcff; }
.integration-help > summary:focus-visible, .integration-website-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.integration-help > div { color: #43506a; font-size: 10px; }
.integration-websites { margin-top: 18px; padding: 18px; }
.integration-websites .connector-management-heading { align-items: center; gap: 12px; margin-bottom: 14px; }
.integration-websites-title, .integration-website-usage { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.integration-websites-title h2 { margin: 0; font-size: 16px; }
.integration-websites-title h2 > span { display: inline-grid; place-items: center; min-width: 23px; height: 23px; margin-left: 5px; border-radius: 7px; color: #536079; background: #f0f2f9; font-size: 10px; }
.integration-website-usage { color: #536079; font-size: 10px; }
.integration-website-list { display: grid; gap: 0; }
.integration-website-row { display: grid; grid-template-columns: 36px minmax(130px, 1fr) minmax(130px, auto) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #e8ebf3; }
.integration-website-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #4d61dc; background: #eef1ff; }
.integration-website-icon > .icon { width: 18px; height: 18px; }
.integration-website-identity { min-width: 0; display: grid; gap: 4px; }
.integration-website-identity strong { color: #1c2536; font-size: 11px; }
.integration-website-identity span { color: #536079; font-size: 10px; overflow-wrap: anywhere; }
.integration-website-states, .integration-website-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.integration-website-states .integration-state { padding: 5px 8px; font-size: 8px; white-space: nowrap; }
.integration-website-menu { position: relative; }
.integration-website-menu > summary { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #dce0ec; border-radius: 8px; color: #536079; cursor: pointer; list-style: none; font-size: 16px; }
.integration-website-menu > summary::-webkit-details-marker { display: none; }
.integration-website-menu > div { position: absolute; right: 0; top: 38px; z-index: 20; min-width: 160px; padding: 5px; border: 1px solid #dce0ec; border-radius: 8px; background: white; box-shadow: 0 8px 26px #18234320; }
.integration-website-menu button { width: 100%; padding: 10px; border: 0; border-radius: 5px; color: #ae2929; background: white; text-align: left; font-size: 10px; cursor: pointer; }
.integration-website-menu button:hover, .integration-website-menu button:focus-visible { background: #fff1f0; }
.integration-disconnect-confirm { grid-column: 2 / -1; max-width: none; padding: 10px; border: 1px solid #f2cfcb; border-radius: 8px; background: #fff7f6; font-size: 10px; }
.integration-load-note, .integration-capacity-note { margin: 8px 0; padding: 10px 12px; border-radius: 8px; color: #73581e; background: #fff5de; font-size: 10px; line-height: 1.5; }
.integration-website-list[data-stale="true"] { opacity: .8; }
.integration-website-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 24px; overflow-y: auto; }
.integration-connect-dialog { width: min(460px, calc(100vw - 28px)); }
.integration-connection-detail { margin-top: 16px; padding: 16px 0; border-top: 1px solid #e4e8f1; }
.integration-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.integration-detail-heading h3 { margin: 0; font-size: 13px; }
.integration-detail-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.integration-detail-values dt { color: #536079; font-size: 10px; }
.integration-detail-values dd { margin: 5px 0 0; color: #20283a; font-size: 11px; overflow-wrap: anywhere; }
.integration-connection-detail > p, .integration-detail-footnote { color: #536079; font-size: 10px; line-height: 1.5; }
.integration-installations { padding: 0; margin: 14px 0; list-style: none; display: grid; gap: 10px; }
.integration-installations li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: #536079; font-size: 10px; }
.integration-commerce-details .option-commerce-mapping { padding: 0; margin: 0; border: 0; box-shadow: none; }
@media (max-width: 1100px) {
  .integrations-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-website-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .integration-website-states { grid-column: 2; }
  .integration-website-actions { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 720px) {
  .integrations-catalog { grid-template-columns: 1fr; }
  .integration-websites .connector-management-heading { align-items: flex-start; flex-direction: column; }
  .integration-websites { padding: 14px; }
  .integration-website-row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .integration-website-actions { grid-column: 2; grid-row: auto; }
  .integration-disconnect-confirm { grid-column: 1 / -1; }
  .integration-detail-values { grid-template-columns: 1fr; }
  .integration-website-dialog { padding: 20px 18px; }
  .integration-website-states .integration-state { white-space: normal; }
  .connector-pairing-code-value { flex-wrap: wrap; }
  .connector-pairing-code-value code { max-width: 100%; font-size: 13px; letter-spacing: 1px; overflow-wrap: anywhere; }
}
@media (max-width: 1100px) {
  .template-collection .template-grid, .asset-collection .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-page-heading:has(.page-summary) { align-items: flex-start; }
  .page-summary { gap: 14px; }
  .page-summary > div { padding-left: 12px; }
  .asset-collection .table-toolbar, .template-collection .table-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .asset-collection .table-tools, .template-collection .table-tools { justify-content: flex-start; flex-wrap: wrap; width: 100%; }
}
@media (max-width: 720px) {
  .compact-page-heading { align-items: flex-start; gap: 16px; }
  .compact-page-heading .page-actions { margin-left: 0; }
  .page-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; gap: 14px; }
  .page-summary dd { font-size: 20px; }
  .template-collection .template-grid, .asset-collection .asset-grid { grid-template-columns: 1fr; padding: 14px; }
  .template-list .template-card { grid-template-columns: 76px minmax(0, 1fr); }
  .template-list .template-card-preview { padding: 8px; }
  .template-list .template-card-preview span { width: 40px; height: 40px; }
  .template-list .template-card-preview strong { display: none; }
  .template-list .template-card-body { display: grid; grid-template-columns: 1fr; padding: 12px; }
  .template-list .template-card-actions { grid-column: 1; grid-row: auto; }
  .template-card .template-card-actions { flex-direction: row; align-items: center; }
  .template-card .template-card-actions .button { width: auto; }
  .template-collection .table-search, .asset-collection .table-search { width: 100%; }
  .asset-collection .table-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .asset-collection .table-tools .configurator-view-toggle { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .asset-collection .table-search { grid-column: 1 / -1; grid-row: 1; }
  .asset-collection .table-filter { grid-column: 1; grid-row: 3; width: 100%; min-width: 0; }
  .asset-collection .asset-sort { grid-column: 2; }
  .asset-collection .table-filter select { width: 100%; min-width: 0; }
  .asset-list .asset-card { grid-template-columns: 66px minmax(0, 1fr) 34px; }
  .asset-list .asset-meta > details { flex-basis: 100%; }
  .connection-summary-compact > div { flex-basis: 100%; }
  .collection-report-toolbar { flex-wrap: wrap; margin-top: 0; }
  .collection-secondary-actions > button { right: auto; left: 0; }
}

.support-inventory-list { display: grid; gap: 12px; max-height: 48vh; overflow: auto; }
.support-inventory-list > article { display: grid; gap: 8px; padding: 14px; border: 1px solid #dce0e9; border-radius: 12px; }
.support-inventory-list small { color: #606d80; overflow-wrap: anywhere; }
.support-inventory-list section { display: grid; gap: 10px; }
.support-inventory-list section[hidden] { display: none; }
.support-inventory-list label { display: flex; align-items: flex-start; gap: 8px; }
.support-inventory-list input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; padding: 0; margin: 2px 0 0; accent-color: #4e62ff; }

/* Leads delivery center: keep compact controls after the generic Settings rules. */
.lead-profile-editor .lead-switch input[type="checkbox"],
.quote-template-panel .lead-switch input[type="checkbox"] { width: 34px; min-width: 34px; height: 20px; min-height: 20px; padding: 0; }
.lead-profile-editor .lead-routing input[type="radio"],
.lead-profile-editor .lead-routing input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; min-height: 16px; padding: 0; flex: 0 0 16px; }
.quote-template-fields > label { display: grid; gap: 6px; color: #4d5a52; font-size: 9px; font-weight: 700; }
.quote-template-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 76px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 10px; font-weight: 400; line-height: 1.45; resize: vertical; }
.quote-template-media > div > strong { font-size: 10px; }
.create-dialog[data-support-inventory-dialog], .create-dialog[data-support-quick-help] { padding: 24px; box-sizing: border-box; font-size: 14px; line-height: 1.5; }
.create-dialog[data-support-inventory-dialog] > h2, .create-dialog[data-support-quick-help] > h2 { margin-top: 0; }
[data-support-inventory-dialog] > .form-actions, [data-support-quick-help] > .form-actions { gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .create-dialog[data-support-inventory-dialog], .create-dialog[data-support-quick-help] { padding: 18px; }
}
[data-support-quick-help] > details { padding: 14px 0; border-bottom: 1px solid #dce0e9; }
[data-support-quick-help] > details > summary { cursor: pointer; font-weight: 600; }
[data-support-quick-help] > details > p { margin-bottom: 0; }
:root { --template-inventory-gap: 16px; }
.template-installation-panel { padding: 24px; margin-bottom: 24px; }
.template-inventory-heading, .template-inventory-row, .template-inventory-toolbar, .template-availability-actions { display: flex; align-items: center; gap: var(--template-inventory-gap); justify-content: space-between; flex-wrap: wrap; }
.template-inventory-heading h2 { margin: 0 0 8px; }
.template-inventory-counts { display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.template-inventory-counts div, .template-inventory-row > div { display: flex; flex-direction: column; gap: 4px; }
.template-inventory-row > .template-inventory-counts { flex-direction: row; gap: 24px; }
.template-inventory-counts strong { font-size: 22px; }
.template-inventory-counts span, .template-inventory-row span, .template-inventory-heading span { font-size: 12px; color: #606b7d; }
.template-inventory-toolbar { margin: 20px 0; }
.template-inventory-toolbar .table-search { flex: 1; min-width: 200px; display: flex; }
.template-inventory-toolbar .table-search input { flex: 1; width: 100%; font-size: 14px; }
.template-inventory-row { border-top: 1px solid #e2e5ed; padding: 16px 0; }
.template-installation-row > div { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.template-installation-row details { width: 100%; font-size: 12px; overflow-wrap: anywhere; }
.template-inventory-definitions { margin-top: 20px; font-size: 12px; color: #606b7d; }
.template-availability-confirm { background: #f6f7fc; border: 1px solid #dfe3f1; border-radius: 16px; padding: 20px; margin: 20px 0; }
.template-availability-confirm h3 { margin-top: 0; }
.template-availability-confirm > label { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.template-availability-confirm input[type="text"] { border: 1px solid #cdd3e0; border-radius: 10px; padding: 12px; width: 100%; box-sizing: border-box; }
.template-availability-confirm .template-availability-check { flex-direction: row; align-items: center; }
.template-inventory-message { padding: 12px 16px; background: #f1f4ff; border-radius: 10px; }
@media (max-width: 600px) {
  .template-installation-panel { padding: 16px; }
  .template-inventory-counts { gap: 16px; }
  .template-inventory-row > div, .template-inventory-toolbar > label { min-width: 0; width: 100%; }
  .template-inventory-row .template-inventory-counts { width: 100%; }
  .template-inventory-toolbar .table-search { min-width: 0; }
  .template-availability-actions .button { width: 100%; }
}
.catalog-publication-panel { margin-block: 20px; padding: 24px; }
.catalog-owned-source { margin-block:16px; }
.catalog-owned-source form,.catalog-owned-source [data-owned-results] { display:grid; gap:12px; min-width:0; margin-top:12px; }
.catalog-owned-source [data-owned-status]:empty { display:none; }
.catalog-publication-layout { display:grid; grid-template-columns:minmax(180px,1fr) minmax(0,2fr); gap:24px; margin-top:20px; }
.catalog-publication-list,.catalog-publication-editor { min-width:0; }
.catalog-publication-item { display:flex; width:100%; justify-content:space-between; gap:12px; text-align:left; background:#fff; border:1px solid #e0e3ed; border-radius:12px; padding:14px; margin-bottom:8px; font:inherit; cursor:pointer; }
.catalog-publication-item strong { overflow-wrap:anywhere; }
.catalog-publication-item span { color:#657087; font-size:12px; }
.catalog-publication-item.is-active { background:#f2f3ff; border-color:#5265f6; }
.catalog-publication-editor details,.catalog-publication-list details { margin-block:16px; }
.catalog-publication-panel fieldset { border:0; padding:0; display:grid; gap:14px; margin-top:16px; min-width:0; }
.catalog-publication-panel label { display:grid; gap:6px; font-weight:600; }
.catalog-publication-panel input:not([type=checkbox]),.catalog-publication-panel textarea,.catalog-publication-panel select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding:12px; border:1px solid #cbd1df; border-radius:10px; background:white; color:#202432; font:inherit; }
.catalog-publication-panel .catalog-check { display:flex; align-items:center; gap:10px; font-weight:400; }
.catalog-check input { width:18px; height:18px; accent-color:#4f64ff; flex-shrink:0; }
.catalog-publication-editor p { overflow-wrap:anywhere; }
.catalog-terms-effect { white-space:pre-line; font-size:13px; line-height:1.7; padding:14px 16px; background:#f5f6fa; border-radius:12px; }
.catalog-audience-results,[data-audience-selected] { display:flex; flex-wrap:wrap; gap:8px; margin-block:10px; }
.catalog-audience-choice { display:inline-flex; align-items:center; gap:8px; max-width:100%; overflow-wrap:anywhere; padding:6px 10px; background:#eef0ff; border-radius:8px; }
.catalog-audience-choice button { border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; min-width:28px; min-height:28px; }
.catalog-audience-results button { white-space:normal; text-align:left; }
[data-audience-picker][hidden] { display:none; }
.catalog-publication-message,.catalog-job-status { padding:12px 14px; border-radius:10px; background:#f2f4ff; }
@media(max-width:700px){.catalog-publication-panel{padding:16px;}.catalog-publication-layout{grid-template-columns:1fr;}.catalog-publication-panel .form-actions{flex-wrap:wrap;}.catalog-publication-panel .template-inventory-heading{gap:12px;flex-wrap:wrap;}}
.purchase-review-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(110px,1fr) minmax(80px,1fr) auto; }
.purchase-review-panel .table-filter { display:flex; flex:0 0 190px; }
.purchase-review-panel .table-filter select { width:100%; min-width:0; font-size:13px; }
.purchase-review-panel .table-search { min-width:0; }
.purchase-review-row>div,.purchase-review-row details { min-width:0; overflow-wrap:anywhere; }
.purchase-review-panel input { min-width:0; max-width:100%; }
.template-download-dialog { width:min(600px,calc(100vw - 32px)); padding:24px; max-height:85vh; overflow:auto; }
.template-download-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #e5e7ee; }
.template-download-row span { min-width:0; overflow-wrap:anywhere; font-size:14px; }
.template-download-row button { flex:none; }
.draft-history-dialog { padding: 24px; }
.draft-history-dialog[open] { display:flex; flex-direction:column; }
.draft-history-dialog [data-draft-list] { min-height:0; overflow:auto; }
.draft-history-dialog > p { flex-shrink: 0; }
.draft-history-dialog [data-draft-preview] { min-height: 0; max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 12px; }
.draft-history-dialog [data-draft-preview] h3 { margin-top: 0; overflow-wrap: anywhere; }
.draft-history-dialog [data-draft-preview] li { overflow-wrap: anywhere; margin: 6px 0; }
.draft-history-dialog [data-draft-preview] small { display: block; margin-top: 10px; color: var(--muted); }
.draft-history-dialog > .dialog-heading, .draft-history-dialog > .dialog-actions, .draft-history-dialog > [data-draft-status] { flex-shrink:0; }
.draft-history-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.draft-history-row > span { min-width:0; overflow-wrap:anywhere; }
.draft-history-row small { color:var(--muted); }
.draft-history-row button { flex:none; }
@media(max-width:500px){.draft-history-dialog{padding:18px;}.draft-history-row{align-items:flex-start;flex-direction:column;}.draft-history-dialog .dialog-actions{flex-wrap:wrap;}}
.template-download-dialog [data-download-status], [data-catalog-download-effect] { color:#667085; font-size:13px; }
@media(max-width:500px){.template-download-dialog{padding:18px;}.template-download-row{align-items:flex-start;flex-direction:column;}}
@media(max-width:700px){.purchase-review-panel{padding:16px;}.purchase-review-row{grid-template-columns:minmax(0,1fr);}.purchase-review-panel .template-inventory-toolbar>label{flex-basis:100%;}.purchase-review-panel .template-inventory-heading,.purchase-review-panel .form-actions{flex-wrap:wrap;gap:12px;}}
:root .template-feedback-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; padding: 24px; border: 1px solid #dce1e9; border-radius: 18px; color: #171a20; background: white; overflow: auto; }
.template-feedback-dialog::backdrop { background: #12192688; }
.template-feedback-dialog header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.template-feedback-dialog h2 { margin: 0; font-size: 22px; }
.template-feedback-dialog form, .template-feedback-dialog label { display: grid; gap: 8px; }
.template-feedback-dialog form { margin: 16px 0; gap: 14px; }
.template-feedback-dialog input:not([type=checkbox]), .template-feedback-dialog textarea, .template-feedback-dialog select { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #cdd4e0; border-radius: 8px; font: inherit; }
.template-feedback-dialog .feedback-consent { display: flex; align-items: start; font-size: 13px; }
.template-feedback-dialog [role=alert] { color: #a32424; }
.feedback-entry { border-top: 1px solid #dce1e9; margin: 18px 0; padding-top: 18px; overflow-wrap: anywhere; }
.feedback-entry small { display: block; color: #596477; }
.feedback-entry p { white-space: pre-wrap; }
.feedback-compose { margin-top: 24px; }
.template-feedback-dialog .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.template-feedback-dialog [hidden] { display: none !important; }
/* MP-13: the server-backed member table remains inside Settings on mobile. */
[data-workspace-members] { min-width: 0; }
[data-workspace-members] .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.workspace-members-table { overflow-x: auto; margin-block: 16px; }
.workspace-members-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.workspace-members-table th, .workspace-members-table td { display: table-cell; white-space: normal; height: auto; padding: 12px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid #e5e7ee; font-size: 14px; overflow-wrap: anywhere; }
.workspace-members-table th:first-child { width: 50%; }
.workspace-members-table th:nth-child(2) { width: 22%; }

/* Invitation panels use the same Settings controls, not the legacy team demo. */
.workspace-invitations { margin-block: 24px; min-width: 0; }
.workspace-invitations h3 { margin: 0; }
.workspace-invitations > .form-actions { justify-content: space-between; padding: 0; border: 0; margin: 0 0 16px; }
.workspace-invitation-list .form-actions, .workspace-invitation-recipient .form-actions { padding: 0; border: 0; gap: 10px; }
.workspace-invitations .button, .workspace-invitation-recipient .button { min-height: 44px; font-size: 14px; white-space: normal; }
.workspace-invitations .form-note { font-size: 13px; line-height: 1.5; }
.workspace-invitations [role="status"]:empty, .workspace-invitation-recipient [role="status"]:empty { display: none; }
.workspace-invite-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.workspace-invite-fields label { display: grid; gap: 6px; min-width: 0; flex: 1 1 180px; }
.workspace-invite-fields label:first-child { flex: 2 1 260px; }
.workspace-invite-fields input, .workspace-invite-fields select { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; box-sizing: border-box; }
.workspace-invitation-list { list-style: none; margin: 16px 0; padding: 0; }
.workspace-invitation-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5e7ee; }
.workspace-invitation-list li > div:first-child { display: grid; gap: 4px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.workspace-invitation-list li > div > span { color: #626c80; font-size: 14px; }
.workspace-invitation-recipient { max-width: 640px; margin: 40px auto; padding: 24px; overflow-wrap: anywhere; }
.workspace-invitation-recipient .form-actions, .workspace-invitations .form-actions { flex-wrap: wrap; }
@media (max-width: 600px) {
  .workspace-invite-fields > button { width: 100%; }
  .workspace-invitation-recipient { margin: 12px auto; padding: 16px; }
}
.workspace-entry { max-width: 680px; margin: 5vh auto; padding: 24px; background: #fff; border: 1px solid #dfe3eb; border-radius: 20px; }
.workspace-entry > img { width: 48px; height: 48px; margin-bottom: 20px; }
.workspace-chooser-identity { margin: -8px 0 0; color: #626c80; overflow-wrap: anywhere; }
.workspace-chooser ul { display: grid; gap: 12px; list-style: none; padding: 0; margin: 20px 0; }
.workspace-chooser [data-workspace-open] { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.workspace-chooser-name { display: grid; gap: 2px; min-width: 0; }
.workspace-chooser-name small { color: #626c80; font-weight: 600; text-transform: capitalize; }
.workspace-chooser-action { flex: 0 0 auto; color: #3657d6; font-weight: 700; }
.auto-build-selection-heading, .auto-build-selection-actions { display: flex; align-items: center; gap: 10px; }
.auto-build-selection-heading { justify-content: space-between; align-items: flex-start; }
.auto-build-selection-heading > div:first-child { display: grid; gap: 3px; }
.auto-build-selection-heading small { color: var(--muted-text, #657083); }
.auto-build-selection-actions { flex-wrap: wrap; }
.auto-build-selected-parts { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.auto-build-selected-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--border, #dbe0e8); border-radius: 8px; background: var(--surface, #fff); }
.auto-build-selected-parts li small { color: var(--muted-text, #657083); text-align: right; }
.auto-build-selected-parts li.is-empty { display: grid; justify-content: start; }
.auto-build-selected-parts li.is-empty small { text-align: left; }
.workspace-entry .button { min-height: 44px; font-size: 14px; line-height: 1.4; }
.workspace-card .workspace-change { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; color: #fff; background: #34394c; border: 1px solid #68718c; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; }
.workspace-card .workspace-change:hover, .workspace-card .workspace-change:focus-visible { background: #49536f; }
.studio-shell[data-sidebar-collapsed="true"] .workspace-card .workspace-change { display: none; }
.workspace-entry .form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 700px) { .workspace-entry { margin: 16px; padding: 20px; } }
.option-commerce-mapping { display: grid; gap: 20px; }
.option-commerce-list { display: grid; gap: 16px; }
.option-commerce-card { border: 1px solid var(--border, #dde2ea); border-radius: 16px; padding: 20px; display: grid; gap: 16px; background: #fff; }
.option-commerce-card.is-waiting { background: #fafbfc; }
.option-commerce-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.option-commerce-heading h3 { margin: 4px 0 6px; }
.option-commerce-heading p, .option-commerce-note { margin: 0; color: var(--muted, #667085); }
.option-commerce-note { border-left: 3px solid #e0a000; padding: 8px 12px; background: #fff9e8; }
.option-commerce-card form, .option-commerce-groups { display: grid; gap: 14px; }
.option-commerce-card fieldset { border: 1px solid var(--border, #dde2ea); border-radius: 12px; padding: 14px; margin: 0; display: grid; gap: 12px; }
.option-commerce-card legend { padding: 0 6px; font-weight: 700; }
.option-commerce-main, .option-commerce-row { grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1.4fr) minmax(130px, .8fr) minmax(90px, .5fr); align-items: end; }
.option-commerce-row { display: grid; gap: 10px; padding: 10px 0; border-top: 1px solid #eef0f4; }
.option-commerce-row:first-child { border-top: 0; }
.option-commerce-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; }
.option-commerce-card input, .option-commerce-card select { min-width: 0; width: 100%; }
.option-commerce-toggle { display: flex !important; flex-direction: row; align-items: center; gap: 9px !important; padding-bottom: 10px; }
.option-commerce-toggle input { width: auto; }
.option-commerce-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .option-commerce-heading { display: grid; } .option-commerce-main, .option-commerce-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .option-commerce-main, .option-commerce-row { grid-template-columns: 1fr; } .option-commerce-actions { justify-content: stretch; } .option-commerce-actions .button { width: 100%; } }

/* Block 10: reviewed, selective reuse between saved product Configurators. */
.configurator-import-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(860px, calc(100vh - 32px)); padding: 28px; overflow: auto; }
.configurator-import-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.configurator-import-heading h2 { margin: 4px 0 8px; }
.configurator-import-heading p:last-child { margin: 0; color: var(--muted, #667085); line-height: 1.5; }
.configurator-import-dialog form, .configurator-import-review { display: grid; gap: 20px; }
.configurator-import-dialog label { display: grid; gap: 7px; min-width: 0; font-size: 13px; font-weight: 700; }
.configurator-import-dialog select { width: 100%; min-width: 0; min-height: 44px; }
.configurator-import-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.configurator-import-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border, #dde2ea); }
.configurator-import-error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f0b8b8; border-radius: 10px; color: #9f2323; background: #fff5f5; }
.configurator-import-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 10px; background: #f5f7fb; }
.configurator-import-source span { color: var(--muted, #667085); }
.configurator-import-source code { margin-left: auto; color: var(--muted, #667085); }
.configurator-import-dialog fieldset { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border, #dde2ea); border-radius: 12px; }
.configurator-import-dialog legend { padding: 0 6px; font-weight: 750; }
.configurator-import-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.configurator-import-group { grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; gap: 12px !important; padding: 12px; border: 1px solid var(--border, #dde2ea); border-radius: 10px; background: #fff; }
.configurator-import-group input { width: 18px; height: 18px; }
.configurator-import-group span { display: grid; gap: 3px; min-width: 0; }
.configurator-import-group small { color: var(--muted, #667085); }
.configurator-import-loading { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center; }
.configurator-import-loading svg { animation: configux-import-spin 1s linear infinite; }
@keyframes configux-import-spin { to { transform: rotate(360deg); } }
.configurator-import-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }
.configurator-import-metrics > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border, #dde2ea); border-radius: 10px; background: #fafbfc; }
.configurator-import-metrics dt { color: var(--muted, #667085); font-size: 12px; font-weight: 700; }
.configurator-import-metrics dd { margin: 0; font-size: 22px; font-weight: 800; }
.configurator-import-safety { padding: 16px; border-left: 4px solid #4f67ff; border-radius: 8px; background: #f3f5ff; }
.configurator-import-safety h3 { margin: 0 0 10px; }
.configurator-import-safety ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: #3f4b61; line-height: 1.45; }
.configurator-import-empty { margin: 0; color: var(--muted, #667085); }
.builder-reuse-row { border-color: #aeb9ff; background: #f5f6ff; }
.builder-palette-note { margin-left: auto; color: #4f5fc7; font-size: 12px; font-weight: 750; }
@media (max-width: 680px) {
  .configurator-import-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 20px; }
  .configurator-import-route-grid, .configurator-import-groups, .configurator-import-metrics { grid-template-columns: 1fr; }
  .configurator-import-actions { justify-content: stretch; }
  .configurator-import-actions .button { width: 100%; }
  .configurator-import-source code { margin-left: 0; width: 100%; }
}

/* Block 11: one read-only connection inventory per product Configurator. */
.configurator-connections-page { display: grid; gap: 18px; }
.configurator-connections-page .page-header { margin-bottom: 0; }
.configurator-connections-page .panel-note { margin: 0; }
.configurator-connection-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.configurator-connection-metrics > article { display: grid; gap: 4px; min-width: 0; padding: 18px; border: 1px solid var(--line, #e5e7eb); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgb(13 13 13 / 4%); }
.configurator-connection-metrics small, .configurator-connection-grid small, .configurator-connection-row small { color: var(--muted, #667085); font-size: 12px; font-weight: 750; }
.configurator-connection-metrics strong { font-size: 25px; line-height: 1.1; }
.configurator-connection-metrics span { color: var(--muted, #667085); font-size: 13px; overflow-wrap: anywhere; }
.configurator-connection-section { display: grid; gap: 18px; }
.configurator-connection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.configurator-connection-heading h2 { margin: 4px 0 6px; }
.configurator-connection-heading p:last-child { max-width: 780px; margin: 0; color: var(--muted, #667085); line-height: 1.5; }
.configurator-connection-status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 30px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.configurator-connection-status > span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.configurator-connection-status.is-connected { color: #166744; background: #e8f6ee; }
.configurator-connection-status.is-attention { color: #8a5a14; background: #fff3d9; }
.configurator-connection-status.is-not-set { color: #596579; background: #eef1f5; }
.configurator-connection-status.is-loading { color: #3f55c6; background: #eef1ff; }
.configurator-connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.configurator-connection-grid > article { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 15px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: #fafbfc; }
.configurator-connection-grid > article > div { display: grid; gap: 3px; min-width: 0; }
.configurator-connection-grid strong, .configurator-connection-grid span { overflow-wrap: anywhere; }
.configurator-connection-grid span { color: var(--muted, #667085); font-size: 13px; line-height: 1.4; }
.configurator-connection-facts { display: grid; gap: 10px; }
.configurator-connection-facts h3, .configurator-connection-attention h3 { margin: 0; font-size: 15px; }
.configurator-connection-facts ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.configurator-connection-facts li { display: flex; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 9px; background: #fff; }
.configurator-connection-attention { display: grid; gap: 10px; padding: 16px; border: 1px solid #f0d7a8; border-radius: 12px; background: #fffaf0; }
.configurator-connection-attention ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.configurator-connection-attention li { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 8px; background: #fff; }
.configurator-connection-attention li span, .configurator-connection-attention p { color: #74551f; font-size: 13px; overflow-wrap: anywhere; }
.configurator-connection-attention p { margin: 0; }
.configurator-connection-warning { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 14px; border-left: 4px solid #b7791f; border-radius: 8px; color: #704d17; background: #fff7e7; }
.configurator-connection-warning .icon { flex: 0 0 auto; }
.configurator-connection-empty { display: grid; gap: 4px; padding: 18px; border: 1px dashed #cfd5df; border-radius: 12px; color: var(--muted, #667085); background: #fafbfc; }
.configurator-connection-empty strong { color: var(--ink, #0d0d0d); }
.configurator-connection-details { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 10px; margin: 0; }
.configurator-connection-details > div { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: #fafbfc; }
.configurator-connection-details dt { color: var(--muted, #667085); font-size: 12px; font-weight: 750; }
.configurator-connection-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.configurator-connection-details code { word-break: break-all; }
.configurator-connection-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) auto auto; align-items: center; gap: 16px; min-width: 0; padding: 15px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; background: #fff; }
.configurator-connection-row > div { display: grid; gap: 3px; min-width: 0; }
.configurator-connection-row > div > span { color: var(--muted, #667085); font-size: 13px; overflow-wrap: anywhere; }
.configurator-connection-row > a { color: var(--accent-dark, #394fd6); font-size: 13px; font-weight: 750; }
@media (max-width: 980px) {
  .configurator-connection-metrics, .configurator-connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .configurator-connection-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .configurator-connection-row > a { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .configurator-connection-metrics, .configurator-connection-grid, .configurator-connection-facts ul, .configurator-connection-attention ul, .configurator-connection-details { grid-template-columns: 1fr; }
  .configurator-connection-heading, .configurator-connection-row { display: grid; grid-template-columns: 1fr; }
  .configurator-connection-status { justify-self: start; }
  .configurator-connections-page .button { width: 100%; justify-content: center; white-space: normal; }
  .builder-transfer-dialog { max-height: calc(100dvh - 20px); overflow: auto; }
  .builder-transfer-columns { grid-template-columns: 1fr; }
  .builder-transfer-trigger span { display: none; }
}

/* Leads review: retain the compact local layout alongside the live selection flow. */
.lead-section-tabs:has(.lead-pdf-picker) { box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; width: 100%; }
.lead-pdf-picker { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.lead-pdf-picker select { min-height: 38px; width: 170px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 10px; font-weight: 700; }
.lead-pdf-picker .button { min-height: 38px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lead-pdf-picker .icon { width: 13px; height: 13px; }

.lead-routing-picker { min-width: 0; display: grid; gap: 10px; }
.lead-routing[hidden], .lead-routing-picker[hidden], .lead-routing-choice[hidden] { display: none !important; }
.lead-routing-tools, .lead-routing-pages { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lead-routing-tools input { width: min(300px, 100%); min-width: 0; }
.lead-routing-tools label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lead-routing-tools .lead-page-size select { box-sizing: border-box; width: 70px; min-width: 70px; height: 38px; padding: 0 24px 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 11px; font-weight: 700; }
.lead-routing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; padding: 0; border: 0; }
.lead-routing-choice { min-width: 0; }
.lead-routing-choice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-routing-pages span { color: var(--muted); font-size: 10px; }
.lead-profile-editor { display: grid; align-content: start; gap: 20px; }
.lead-profile-layout > .lead-profile-list, .lead-profile-layout > .lead-profile-editor { min-width: 0; }
.lead-profile-editor .lead-compact-heading > div { min-width: 0; overflow-wrap: anywhere; }
.lead-profile-editor .sender-domain-current > div { min-width: 0; overflow-wrap: anywhere; }
.lead-profile-editor > label, .lead-profile-editor .settings-two-column > label { display: grid; gap: 8px; min-width: 0; }
.settings-form.lead-profile-editor > label { margin-top: 0; }
.lead-profile-editor .settings-two-column { gap: 18px; }
.lead-profile-editor input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; min-height: 42px; }
.lead-profile-editor > .sender-profile-fields { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
/* The Sender picker is one grid item; the legacy radio/radio/list columns do not apply. */
[data-sender-profile-form] .lead-routing { min-width: 0; grid-template-columns: minmax(0, 1fr); }
[data-sender-profile-form] .lead-routing-pages { flex-wrap: wrap; }
.sender-dns-help { margin: -6px 0 0; line-height: 1.5; }

.lead-list-row > .lead-select { margin-top: 17px; }
.lead-collection-toolbar { box-sizing: border-box; display: flex; width: 100%; flex-wrap: wrap; gap: 12px; }
.lead-collection-toolbar > .collection-heading { flex: 0 0 auto; }
.lead-collection-toolbar .table-tools { display: flex; min-width: 0; flex: 1 1 440px; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lead-collection-toolbar .table-search { min-width: 160px; flex: 1 1 190px; }
.lead-collection-toolbar .table-filter { box-sizing: border-box; flex: 0 0 160px; width: 160px; min-width: 0; }
.lead-collection-toolbar .lead-page-size { flex-basis: 136px; width: 136px; }
.lead-collection-toolbar .table-filter select { box-sizing: border-box; width: 100%; min-width: 0; height: 100%; }
.lead-collection-toolbar .lead-page-size[hidden] { display: none; }
.lead-selection-bar[hidden] { display: none; }
.lead-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: #f7f9ff; }
.lead-selection-bar strong { margin-right: auto; font-size: 10px; }
.lead-selection-bar .button { min-height: 32px; }
.lead-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 20px 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.lead-pagination[hidden] { display: none; }
.lead-pagination span { margin-right: auto; color: var(--muted); font-size: 10px; }
.lead-pagination .button:disabled { cursor: default; }

.quote-template-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(255px, 310px); align-items: start; gap: 16px 22px; min-width: 0; }
.quote-template-panel > .quote-template-live { grid-column: 1; grid-row: 1; min-width: 0; }
.quote-template-panel > .quote-template-advanced { grid-column: 2; grid-row: 1; min-width: 0; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.quote-template-advanced > summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.quote-template-advanced[open] > summary { margin-bottom: 14px; }
.quote-template-advanced .quote-template-grid, .quote-template-advanced .quote-template-sections, .quote-template-advanced .quote-template-wording-fields { grid-template-columns: 1fr; }
.quote-template-advanced .quote-template-fields > label { display: none; }
.quote-template-advanced .quote-template-fields > .quote-template-image-size { display: grid; gap: 6px; font-size: 11px; }
.quote-template-advanced .quote-template-media { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.quote-template-control-actions { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote-template-control-actions .quote-template-design-name { display: grid; gap: 6px; font-size: 9px; font-weight: 700; }
.quote-template-control-actions .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; }
.quote-design-routing { min-width: 0; margin-top: 14px; }
.quote-design-routing .form-note { margin: 4px 0 10px; }
.quote-design-configurator-list { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; padding: 2px 5px 2px 0; }
.quote-design-configurator-list .lead-routing-choice { min-width: 0; }
.quote-design-default-note { margin: 12px 0 0; }
.quote-template-live-page { box-sizing: border-box; width: min(100%, 595px); min-height: 842px; margin: 0 auto; padding: 26px 48px 42px; gap: 10px; overflow-wrap: anywhere; }
.quote-template-live-page [contenteditable="true"] { border-radius: 3px; cursor: text; }
.quote-template-live-page [contenteditable="true"]:hover { background: #eef2ff; }
.quote-template-live-page [contenteditable="true"]:focus { outline: 2px solid #4a62ed; outline-offset: 3px; background: #fff; }
.quote-template-live-page [contenteditable="true"]:empty::before { content: attr(data-placeholder); color: #9aa2b3; }
.quote-template-live-page header { align-items: flex-start; min-height: 44px; }
.quote-template-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.quote-template-brand strong { min-width: 0; font-size: 13px; }
.quote-template-logo-wrap, .quote-template-hero-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.quote-template-add-logo { display: grid; place-items: center; width: 100px; min-height: 38px; padding: 3px; border: 1px dashed #aab6cc; border-radius: 6px; color: #62728a; background: #f8faff; cursor: pointer; }
.quote-template-add-logo img { max-width: 92px; max-height: 36px; }
.quote-template-add-logo span { font-size: 9px; font-weight: 700; }
.quote-template-header-right { width: 42%; display: grid; gap: 3px; text-align: right; }
.quote-template-live-page [data-quote-preview-header-details] { min-height: 25px; }
.quote-template-hero-wrap { align-self: center; width: min(100%, 310px); }
.quote-template-add-header { align-self: center; width: min(100%, 310px); min-height: 58px; border: 1px dashed #aab6cc; border-radius: 7px; color: #62728a; background: #f8faff; font-size: 10px; font-weight: 700; cursor: pointer; }
.quote-template-live-hero[data-action] { cursor: pointer; }
.quote-template-image-remove { position: absolute; top: -8px; right: -8px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: #5e697b; background: #fff; cursor: pointer; }
.quote-template-image-remove .icon { width: 13px; height: 13px; }
.quote-template-sample-image { display: grid; justify-items: center; gap: 2px; margin: 2px 0 5px; min-width: 0; }
.quote-template-sample-image img { display: block; width: min(100%, 310px); height: 205px; max-width: 100%; object-fit: contain; }
.quote-template-live-page[data-configuration-image-size="small"] .quote-template-sample-image img { width: min(100%, 210px); height: 135px; }
.quote-template-live-page[data-configuration-image-size="large"] .quote-template-sample-image img { width: min(100%, 410px); height: 270px; }
.quote-template-live-page dl > div { grid-template-columns: 35% 40% 25%; padding: 6px; }
.quote-template-live-page dl.quote-without-price > div { grid-template-columns: 42% 58%; }
.quote-template-live-page [data-quote-preview-price] { align-self: stretch; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--quote-preview-accent); font-weight: 700; }
.quote-template-live-page footer { display: grid; align-items: end; gap: 6px; min-height: 38px; }
.quote-template-live-page footer > div { display: flex; justify-content: space-between; gap: 8px; }

.lead-test-layout { grid-template-columns: minmax(0, 1fr) minmax(255px, 310px); gap: 22px; }
.lead-test-layout > .lead-test-preview-panel { grid-column: 1; grid-row: 1; }
.lead-test-layout > .lead-test-controls { grid-column: 2; grid-row: 1; }
.lead-test-preview-panel { border: 0; padding: 0; background: transparent; box-shadow: none; }
.lead-test-preview-panel .lead-test-a4 { margin: 0 auto; }
.lead-test-a4 .lead-test-document-image { width: min(100%, 310px); max-height: 205px; margin: 2px auto 5px; }
.lead-test-a4[data-configuration-image-size="small"] .lead-test-document-image { width: min(100%, 210px); max-height: 135px; }
.lead-test-a4[data-configuration-image-size="large"] .lead-test-document-image { width: min(100%, 410px); max-height: 270px; }

@media (max-width: 1100px) {
  .quote-template-panel, .lead-test-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-template-panel > .quote-template-live, .lead-test-layout > .lead-test-preview-panel { grid-column: 1; grid-row: 1; }
  .quote-template-panel > .quote-template-advanced, .lead-test-layout > .lead-test-controls { grid-column: 1; grid-row: 2; position: static; max-height: none; }
}
@media (max-width: 900px) {
  .lead-collection-toolbar .table-tools { flex: 0 1 auto; width: 100%; align-content: flex-start; }
  .lead-pdf-picker { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; }
  .lead-routing-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lead-collection-toolbar .table-tools { justify-content: stretch; }
  .lead-collection-toolbar .table-search, .lead-collection-toolbar .lead-status-select { flex: 1 1 100%; width: 100%; }
  .lead-collection-toolbar .lead-page-size { flex: 1 1 136px; }
  .quote-template-live-page { min-height: 0; padding: 24px 18px; }
}

/* Asset library review: the same folder chips as Configurators and compact media tiles. */
.asset-folder-browser.configurator-folders { align-items: center; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.asset-folder-browser .asset-folder-tools { position: relative; margin-left: auto; }
.asset-folder-tools > summary { display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 5px; cursor: pointer; list-style: none; }
.asset-folder-tools > summary::-webkit-details-marker { display: none; }
.asset-folder-tools > div { position: absolute; z-index: 15; top: calc(100% + 6px); right: 0; display: grid; gap: 8px; width: min(290px, calc(100vw - 40px)); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.asset-folder-tools > div strong { font-size: 11px; }
.asset-folder-tools form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.asset-folder-tools form input, .asset-folder-tools form select { width: 100%; min-width: 0; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-size: 11px; }
.asset-folder-tools form label { min-width: 0; }
.asset-folder-tools .asset-folder-delete { margin: 0; color: #a03f3f; }
.asset-folder-browser .asset-folder-create[hidden] { display: none; }
.asset-folder-browser .asset-folder-create { align-items: center; }
.asset-folder-browser .asset-folder-create input { width: min(210px, 55vw); min-width: 0; min-height: 32px; padding: 5px 9px; font-size: 11px; }
.asset-folder-browser .asset-folder-create .form-field-error { flex-basis: 100%; }
.asset-collection .asset-grid:not(.asset-list) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: start; gap: 10px; padding: 14px; }
.asset-collection .asset-card { min-width: 0; border-radius: 9px; box-shadow: none; transform: none; }
.asset-collection .asset-card:hover { transform: none; box-shadow: 0 4px 12px rgb(17 19 26 / 7%); }
.asset-collection .asset-preview { height: 122px; border-color: #eceef2; background: #f7f8fa; }
.asset-collection .asset-preview::before, .asset-collection .asset-preview::after { display: none; }
.asset-collection .asset-preview > img { display: block; object-fit: cover; padding: 0; }
.asset-collection .asset-preview > span { width: 44px; height: 44px; border-radius: 10px; box-shadow: none; }
.asset-collection .asset-preview > span .icon { width: 25px; height: 25px; }
.asset-collection .asset-card[data-asset-type="3D model"] .asset-preview > span { width: 64px; height: 64px; border: 0; color: var(--accent); background: transparent; backdrop-filter: none; }
.asset-collection .asset-card[data-asset-type="3D model"] .asset-preview > span .icon { width: 44px; height: 44px; stroke-width: 1.7; }
.asset-collection .asset-card[data-asset-type="3D model"] .asset-preview > img { object-fit: contain; }
.asset-collection .asset-preview > img[data-asset-thumbnail-pending] { visibility: hidden; }
.asset-collection .asset-preview > small { right: 5px; bottom: 5px; font-size: 8px; }
.asset-collection .asset-meta { min-height: 54px; padding: 8px 34px 9px 9px; gap: 2px; }
.asset-collection .asset-meta strong { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.asset-collection .asset-inline-name { display: block; width: 100%; min-width: 0; height: 23px; overflow: hidden; padding: 0 2px; border: 1px solid transparent; border-radius: 5px; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.asset-collection .asset-inline-name:hover { border-color: #cbd3e6; }
.asset-collection .asset-inline-name:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px rgb(78 101 242 / 13%); text-overflow: clip; }
.asset-collection .asset-inline-name[aria-busy="true"] { opacity: .65; }
.asset-collection .asset-inline-name:disabled { opacity: .75; cursor: default; }
.asset-collection .asset-name-pending { color: #8a5b16; }
.asset-collection .asset-meta span { margin-top: 3px; font-size: 9px; }
.asset-collection .asset-action-menu { position: absolute; right: 5px; bottom: 5px; align-self: auto; }
.asset-collection .asset-action-menu > div { bottom: calc(100% + 4px); min-width: 205px; max-width: min(290px, calc(100vw - 40px)); max-height: min(65vh, 420px); overflow: auto; }
.asset-action-details { padding: 0 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.asset-action-details > summary { padding: 8px 0; cursor: pointer; font-size: 11px; font-weight: 650; list-style: none; }
.asset-action-details > summary::-webkit-details-marker { display: none; }
.asset-action-details .studio-advanced-details-body { display: grid; gap: 6px; padding: 0 0 10px; overflow-wrap: anywhere; font-size: 11px; }
.asset-action-details .studio-advanced-details-body p { margin: 0; }
.asset-action-details code { white-space: normal; overflow-wrap: anywhere; }
.asset-collection .asset-grid.asset-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 14px; }
.asset-collection .asset-list .asset-card { display: grid; grid-template-columns: 40px 70px minmax(0, 1fr) 36px; min-height: 70px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.asset-collection .asset-list .asset-card > .collection-select { position: static; grid-column: 1; grid-row: 1; align-self: center; justify-self: center; z-index: auto; margin: 0; background: transparent; }
.asset-collection .asset-list .asset-preview { grid-column: 2; grid-row: 1; width: 70px; height: 70px; min-height: 70px; border: 0; }
.asset-collection .asset-list .asset-preview > span { width: 32px; height: 32px; }
.asset-collection .asset-list .asset-preview > span .icon { width: 19px; height: 19px; }
.asset-collection .asset-list .asset-card[data-asset-type="3D model"] .asset-preview > span { width: 44px; height: 44px; }
.asset-collection .asset-list .asset-card[data-asset-type="3D model"] .asset-preview > span .icon { width: 30px; height: 30px; }
.asset-collection .asset-list .asset-preview > small { display: none; }
.asset-collection .asset-list .asset-meta { grid-column: 3; grid-row: 1; display: flex; align-items: center; min-width: 0; min-height: 70px; padding: 8px 12px; }
.asset-collection .asset-list .asset-meta > div { min-width: 0; width: 100%; }
.asset-collection .asset-list .asset-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-collection .asset-list .asset-action-menu { grid-column: 4; grid-row: 1; position: relative; right: auto; bottom: auto; align-self: center; }
.asset-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.asset-pagination > div { display: flex; align-items: center; gap: 9px; }
.asset-pagination button:disabled { opacity: .45; cursor: default; }
@media (max-width: 719px) {
  .asset-collection .asset-grid:not(.asset-list) { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; padding: 10px; }
  .asset-folder-browser .asset-folder-tools { margin-left: 0; }
  .asset-pagination { justify-content: center; }
}

/* Plan & usage follows the approved account layout. Scoped away from Builder. */
.plan-usage-page { max-width: 1280px; margin: 0 auto; color: #101a29; }
.pu-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.pu-page-heading h1 { font-size: 29px; line-height: 1.2; letter-spacing: -1px; margin: 0; }
.pu-muted { color: #697083; font-size: 11px; }
.pu-automatic { display: flex; align-items: center; gap: 8px; font-size: 10px; min-width: 0; }
.pu-automatic > .icon { width: 16px; height: 16px; color: #7b88a2; }
.pu-automatic > strong { font-size: 10px; white-space: nowrap; }
.pu-automatic-help { display: grid; place-items: center; width: 30px; min-width: 30px; height: 36px; border: 0; background: none; color: #7687bb; font-size: 11px; position: relative; }
.pu-automatic-help::before { content: ""; position: absolute; width: 18px; height: 18px; border: 1px solid #d4dcee; border-radius: 50%; }
.pu-auto-status { color: #697083; font-size: 10px; }
.pu-auto-switch { position: relative; border: 0; background: transparent; width: 44px; height: 40px; min-width: 44px; padding: 0; border-radius: 8px; }
.pu-auto-switch::before { content: ""; position: absolute; width: 40px; height: 22px; border-radius: 13px; background: #a9b0bb; top: 9px; left: 2px; }
.pu-auto-switch::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 11px; left: 4px; box-shadow: 0 1px 3px #101a2930; }
.pu-auto-switch[aria-checked="true"]::before { background: #4f5fff; }
.pu-auto-switch[aria-checked="true"]::after { left: 22px; }
.pu-auto-settings, .pu-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #5065c7; background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 5px 7px; font-size: 10px; font-weight: 630; }
.pu-auto-settings .icon, .pu-text-button .icon { width: 15px; height: 15px; }
.pu-auto-settings:hover:enabled, .pu-text-button:hover:enabled, .pu-auto-switch:hover:enabled { background: #eef2ff; }
.pu-usage { margin-bottom: 24px; }
.pu-usage-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.pu-meter { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px 4px; border: 1px solid #e0e3eb; border-radius: 12px; background: #fff; padding: 13px 11px; min-width: 0; box-shadow: 0 3px 9px #101a2902; }
.pu-meter > span:first-child { display: flex; align-items: center; gap: 6px; color: #718099; font-size: clamp(9px,.75vw,11px); white-space: nowrap; min-width: 0; }
.pu-meter .icon { width: 16px; height: 16px; flex-shrink: 0; }
.pu-meter > strong { display: inline-flex; align-items: baseline; justify-content: flex-end; font-size: 12px; font-weight: 700; line-height: 1.5; gap: 2px; white-space: nowrap; }
.pu-meter strong small { font-size: 8px; font-weight: 450; color: #748198; }
.pu-meter-track { grid-column: 1/-1; height: 2px; margin-top: 3px; border-radius: 3px; background: #eef0f5; overflow: hidden; }
.pu-meter-track i { height: 100%; display: block; background: #6b7aff; border-radius: inherit; }
.pu-meter.is-warning i { background: #d99228; }
.pu-meter.is-over i { background: #b44345; }
.pu-unlimited { grid-column: 1/-1; justify-self: end; font-size: 12px; color: #748198; }
.pu-plan-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.pu-plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; gap: 0; border: 1px solid #d0d7e2; border-radius: 20px; padding: 22px 17px 17px; background: #fbfcfe; min-width: 0; position: relative; box-shadow: 0 7px 24px #101a2903; }
.pu-plan.is-growth { background: #f1f4ff; border-color: #b6c4ff; }
.pu-plan.is-current { border-color: #596cff; box-shadow: 0 0 0 1px #596cff,0 8px 24px #4f5fff0d; }
.pu-plan-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 27px; margin-bottom: 19px; }
.pu-plan h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.6px; margin: 0; }
.pu-current { font-size: 8px; color: #4f5fff; background: #e9edff; padding: 5px 7px; border-radius: 20px; white-space: nowrap; font-weight: 650; }
.pu-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; font-size: clamp(34px,3vw,44px); font-weight: 780; line-height: 1.1; letter-spacing: -1.7px; margin: 0 0 15px; }
.pu-price button, .pu-price small { font-family: inherit; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #7c899e; font-weight: 450; letter-spacing: 0; border: 0; background: transparent; padding: 4px 0; }
.pu-price button { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pu-price button .icon { width: 11px; height: 11px; }
.pu-plan-description { font-size: 10px; line-height: 1.55; color: #7c899e; margin: 0 0 25px; min-height: 45px; }
.pu-features { list-style: none; display: grid; align-content: start; gap: 11px; padding: 0; margin: 0 0 26px; color: #60728c; font-size: 10px; line-height: 1.5; }
.pu-features li { display: flex; align-items: flex-start; gap: 7px; }
.pu-features .icon { color: #20a887; width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.pu-card-actions { align-self: end; display: flex; align-items: center; min-height: 44px; }
.pu-card-actions > .button { width: 100%; min-height: 44px; justify-content: center; font-size: 11px; padding: 9px 6px; border-radius: 25px; background: #edf1f7; color: #4e5e76; border-color: #d2dbe8; }
.pu-plan.is-growth .pu-card-actions > .button { color: #354eff; background: #e8edff; border-color: #cbd5ff; }
.pu-plan-footnote { text-align: center; font-size: 9px; color: #76839a; margin: 10px 0 0; line-height: 1.5; }
.pu-service { color: #fff; background: #0e1929; border-color: #0e1929; overflow: clip; }
.pu-service h2 { font-size: 16px; }
.pu-service .pu-price { font-size: clamp(29px,2.65vw,38px); letter-spacing: -1.3px; }
.pu-service .pu-price small { color: #b9c6d8; font-size: 9px; white-space: nowrap; }
.pu-service .pu-plan-description { color: #b9c3d3; }
.pu-service .pu-features { color: #d6dfed; font-size: 9px; gap: 10px; }
.pu-service .pu-features .icon { color: #f9c650; }
.pu-service .pu-card-actions > .button { color: #152038; background: #fff; border-color: #fff; }
.pu-service .pu-plan-footnote { color: #76d9bf; }
.pu-service-ribbon { position: absolute; top: 24px; right: -43px; width: 171px; padding: 5px 0; background: linear-gradient(90deg,#356dff,#7554fb); transform: rotate(42deg); color: #fff; text-transform: uppercase; text-align: center; font-size: 7px; font-weight: 720; letter-spacing: .7px; }
.pu-account { margin-top: 19px; padding: 15px 17px; border: 1px solid #e0e3eb; border-radius: 14px; background: #fff; }
.pu-account h2 { font-size: 15px; line-height: 1.3; margin: 0 0 8px; }
.pu-account-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.pu-account-action { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 8px; color: #152238; min-width: 0; min-height: 51px; padding: 6px 12px; text-align: left; }
.pu-account-action + .pu-account-action { border-left: 1px solid #e2e7ef; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pu-account-action > .icon:first-child { color: #607393; width: 27px; height: 27px; flex-shrink: 0; }
.pu-account-action > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pu-account-action strong { font-size: 11px; font-weight: 650; line-height: 1.5; }
.pu-account-action small { font-size: 9px; color: #718099; }
.pu-account-action > .icon:last-child { margin-left: auto; width: 15px; height: 15px; flex-shrink: 0; }
.pu-account-action:hover:enabled { background: #f4f6fc; }
.pu-account-action.is-danger strong,.pu-account-action.is-danger > .icon:first-child { color: #e52847; }
.pu-account-action:disabled { opacity: .5; cursor: default; }
.pu-account > p { font-size: 11px; color: #718099; }
.pu-dialog { width: min(650px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 36px); border: 1px solid #dce2ed; border-radius: 20px; padding: 0; color: #101a29; background: #fff; box-shadow: 0 26px 110px #101a2940; overflow: auto; }
.pu-dialog::backdrop { background: #0f182866; backdrop-filter: blur(4px); }
.pu-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 15px; border-bottom: 1px solid #e7ebf3; }
.pu-dialog h2 { font-size: 23px; line-height: 1.25; margin: 0; letter-spacing: -.7px; }
.pu-dialog h3 { font-size: 13px; margin: 18px 0 10px; }
.pu-dialog-body { padding: 18px 22px 21px; font-size: 12px; line-height: 1.55; }
.pu-dialog-body > p:first-child { margin-top: 0; }
.pu-dialog .button { font-size: 11px; min-height: 44px; }
.pu-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 19px; flex-wrap: wrap; }
.pu-dialog-actions .button { min-height: 44px; }
.pu-period-choice { display: inline-flex; gap: 3px; padding: 3px; background: #e9edf4; border-radius: 10px; }
.pu-period-choice .button { min-width: 85px; min-height: 38px; border-radius: 7px; border-color: transparent; background: transparent; color: #738099; padding: 6px 13px; }
.pu-period-choice [aria-pressed=true],.pu-cap-options [aria-pressed=true] { background: #fff; color: #101a29; border-color: #d8deea; }
.pu-total { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid #e0e3eb; margin-top: 20px; gap: 15px; }
.pu-total strong { font-size: 24px; }
.pu-total small { display: block; font-size: 10px; color: #697083; }
.pu-notice,.pu-trial { padding: 10px 12px; border: 1px solid #dfe5ef; background: #f6f8fc; border-radius: 9px; font-size: 11px; line-height: 1.5; }
.pu-notice .button { margin: 5px 4px 0 0; }
.pu-dialog .account-lifecycle-review { border: 0; padding: 0; margin: 0; }
.pu-dialog .account-lifecycle-review-heading > button { display: none; }
.pu-dialog .account-lifecycle-review-heading h2 { font-size: 18px; }
.pu-selection-dialog { width: min(900px,calc(100vw - 40px)); }
.pu-selection-layout { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 19px; align-items: start; }
.pu-selection-main { min-width: 0; }
.pu-dialog-period { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.pu-dialog-period > span { color: #748198; font-size: 9px; }
.pu-addon-column-labels { display: grid; grid-template-columns: minmax(0,1fr) 85px 119px; gap: 8px; padding: 0 9px; font-size: 9px; color: #8290a7; margin-bottom: 6px; }
.pu-addon-column-labels > span:nth-child(2) { text-align: right; }
.pu-addon-column-labels > span:last-child { text-align: center; }
.pu-addons { display: grid; gap: 7px; margin: 0; }
.pu-addon { display: grid; grid-template-columns: minmax(0,1fr) 85px 119px; align-items: center; column-gap: 8px; min-height: 56px; border: 1px solid #e2e7f0; border-radius: 10px; padding: 5px 9px; background: #fafbfe; }
.pu-addon-resource { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pu-addon-resource > .icon { width: 28px; height: 28px; padding: 5px; color: #6c7ac6; background: #eef1fb; border-radius: 8px; flex-shrink: 0; }
.pu-addon-resource strong { display: block; font-size: 11px; font-weight: 650; }
.pu-addon-resource small { display: block; font-size: 9px; color: #748198; }
.pu-addon-capacity { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; white-space: nowrap; color: #8190a6; }
.pu-addon-capacity strong { font-size: 11px; font-weight: 650; color: #101a29; }
.pu-addon-capacity small { font-size: 9px; }
.pu-stepper { display: flex; align-items: center; justify-content: space-between; gap: 1px; }
.pu-stepper button { width: 44px; min-width: 44px; height: 44px; border: 1px solid #d0d9e9; border-radius: 8px; background: #fff; color: #415180; font-size: 19px; cursor: pointer; padding: 0; }
.pu-stepper button:disabled { opacity: .4; background: #f1f3f7; cursor: default; }
.pu-stepper strong { font-size: 14px; font-weight: 700; min-width: 25px; text-align: center; }
.pu-growth-automatic { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 3px 8px 3px 11px; border: 1px solid #e2e7f0; border-radius: 9px; font-size: 10px; }
.pu-growth-automatic > .icon { width: 16px; height: 16px; color: #7585a0; }
.pu-growth-automatic > strong { font-size: 10px; }
.pu-growth-automatic > span { margin-left: auto; font-size: 9px; color: #7585a0; }
.pu-fixed-capacity { display: grid; gap: 7px; list-style: none; padding: 0; margin: 0; }
.pu-fixed-capacity li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1px solid #e2e7f0; border-radius: 10px; background: #fafbfe; color: #62728c; font-size: 11px; }
.pu-fixed-capacity .icon { width: 20px; height: 20px; color: #8090b5; }
.pu-fixed-capacity strong { margin-left: auto; color: #101a29; font-size: 12px; }
.pu-fixed-note { font-size: 10px; margin: 9px 0 0; }
.pu-change-notice { margin: 9px 0 0; }
.pu-selection-summary { border: 1px solid #dce3f0; border-radius: 12px; padding: 15px; background: #f7f9fd; min-width: 0; }
.pu-selection-summary h3 { font-size: 14px; margin: 0; }
.pu-selection-price-lines,.pu-server-facts { display: grid; gap: 7px; margin-top: 11px; font-size: 10px; color: #748198; }
.pu-selection-price-lines > div,.pu-server-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.pu-selection-price-lines strong,.pu-server-facts strong { color: #101a29; font-weight: 630; text-align: right; }
.pu-server-facts > div:first-child strong { font-size: 20px; letter-spacing: -.5px; }
.pu-selection-total { display: flex; flex-direction: column; gap: 4px; padding: 13px 0 12px; margin-top: 9px; border-top: 1px solid #dce3f0; border-bottom: 1px solid #dce3f0; }
.pu-selection-total > span { color: #748198; font-size: 10px; }
.pu-selection-total > strong { font-size: 24px; line-height: 1.2; letter-spacing: -.8px; font-weight: 750; }
.pu-selection-total > strong small { margin-left: 4px; font-size: 10px; font-weight: 450; color: #748198; letter-spacing: 0; }
.pu-selection-total > small { color: #748198; font-size: 9px; }
.pu-selection-capacity { display: grid; gap: 7px; list-style: none; padding: 0; margin: 14px 0 17px; color: #687894; font-size: 9px; }
.pu-selection-capacity li { display: flex; align-items: center; gap: 7px; }
.pu-selection-capacity .icon { width: 13px; height: 13px; color: #7483a4; }
.pu-selection-capacity li > span { flex: 1; }
.pu-selection-capacity strong { color: #314361; font-size: 10px; font-weight: 630; }
.pu-selection-actions { display: flex; flex-direction: column; gap: 6px; }
.pu-selection-actions .button { width: 100%; justify-content: center; min-height: 44px; font-size: 10px; padding: 9px 7px; }
.pu-summary-note { color: #8190a6; font-size: 9px; line-height: 1.5; text-align: center; margin: 9px 0 0; }
.pu-auto-option { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid #e0e3eb; border-radius: 10px; padding: 14px; margin-top: 10px; color: inherit; background: #fff; text-align: left; }
.pu-auto-option strong { margin-left: auto; }
.pu-auto-option[aria-pressed=true] { border-color: #5565ff; background: #f4f5ff; }
.pu-auto-option .icon { width: 18px; height: 18px; }
.pu-cap-options { border: 0; margin: 20px 0 0; padding: 0; }
.pu-cap-options legend { margin-bottom: 10px; }
.pu-cap-options button { margin-right: 6px; }
.pu-requested-capacity { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pu-dialog label { display: grid; gap: 5px; margin: 12px 0; font-weight: 600; font-size: 12px; }
.pu-dialog label small { font-weight: 400; color: #697083; }
.pu-dialog input,.pu-dialog textarea { width: 100%; font-size: 16px; border: 1px solid #dfe3eb; border-radius: 8px; padding: 11px 12px; background: #fff; color: inherit; }
.pu-dialog summary { cursor: pointer; }
.pu-dialog [role=alert] { color: #934244; }
.pu-invoices { border-top: 1px solid #e0e3eb; }
.pu-invoices article { display: flex; align-items: center; gap: 15px; padding: 14px 0; border-bottom: 1px solid #e0e3eb; }
.pu-invoices article > span:first-child { margin-right: auto; }
.pu-invoices strong,.pu-invoices small { display: block; }
.pu-invoices small { font-size: 11px; color: #697083; }
.pu-invoice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pu-invoices .icon { width: 15px; height: 15px; }
.pu-dialog .account-verification-row { flex-wrap: wrap; }
.pu-dialog .account-verification-row label { min-width: 160px; }
.pu-dialog[aria-busy=true] .pu-dialog-body button { pointer-events: none; opacity: .6; }
@media(max-width:1100px) {
  .pu-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pu-usage-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pu-account-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pu-account-action:nth-child(odd) { border-left: 0; }
  .pu-account-action:nth-child(n+3) { border-top: 1px solid #e2e7ef; }
}
@media(max-width:850px) {
  .pu-page-heading { flex-wrap: wrap; gap: 9px; }
  .pu-automatic { margin-left: auto; }
  .pu-selection-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 13px; }
  .pu-addon,.pu-addon-column-labels { grid-template-columns: minmax(0,1fr) 65px 114px; column-gap: 7px; }
  .pu-addon-resource > .icon { display: none; }
}
@media(max-width:650px) {
  .pu-page-heading h1 { font-size: 26px; }
  .pu-automatic { width: 100%; margin-left: 0; gap: 6px; flex-wrap: nowrap; }
  .pu-auto-status { margin-left: auto; }
  .pu-auto-settings { font-size: 9px; padding-left: 4px; padding-right: 4px; }
  .pu-usage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .pu-meter { padding: 12px 10px; gap: 7px 3px; }
  .pu-meter:last-child { grid-column: 1/-1; }
  .pu-meter > span:first-child { font-size: 9px; gap: 5px; }
  .pu-meter > strong { font-size: 11px; }
  .pu-meter strong small { font-size: 8px; }
  .pu-plan-grid { grid-template-columns: 1fr; gap: 13px; }
  .pu-plan { display: flex; flex-direction: column; padding: 23px; }
  .pu-plan h2 { font-size: 21px; }
  .pu-current { font-size: 10px; padding: 5px 9px; }
  .pu-price { font-size: 44px; margin-bottom: 17px; }
  .pu-price button { font-size: 12px; }
  .pu-plan-description { font-size: 12px; min-height: 0; margin-bottom: 23px; }
  .pu-features { font-size: 12px; gap: 12px; margin-bottom: 24px; }
  .pu-plan-footnote { font-size: 10px; }
  .pu-card-actions { align-self: stretch; }
  .pu-card-actions .button { font-size: 12px; }
  .pu-service h2 { font-size: 19px; }
  .pu-service .pu-price { font-size: 41px; }
  .pu-service .pu-features { font-size: 12px; }
  .pu-service .pu-price small { font-size: 10px; }
  .pu-account-actions { grid-template-columns: 1fr; }
  .pu-account-action { padding: 8px 4px; min-height: 59px; gap: 12px; }
  .pu-account-action + .pu-account-action { border-left: 0; border-top: 1px solid #e2e7ef; }
  .pu-account-action strong { font-size: 12px; }
  .pu-account-action small { font-size: 10px; }
  .pu-dialog,.pu-selection-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .pu-dialog > header { padding: 16px 17px 13px; }
  .pu-dialog h2 { font-size: 21px; }
  .pu-dialog-body { padding: 15px 17px 18px; }
  .pu-selection-layout { grid-template-columns: 1fr; gap: 15px; }
  .pu-addon { grid-template-columns: minmax(0,1fr) 114px; gap: 5px 7px; min-height: 84px; padding: 9px; }
  .pu-addon-resource { grid-column: 1/-1; grid-row: 1; }
  .pu-addon-resource > .icon { display: block; }
  .pu-addon-capacity { grid-column: 1; grid-row: 2; justify-content: flex-start; padding-left: 36px; }
  .pu-stepper { grid-column: 2; grid-row: 2; }
  .pu-addon-column-labels { display: none; }
  .pu-selection-summary { position: sticky; bottom: -18px; z-index: 1; background: #f8faff; padding: 12px; box-shadow: 0 -4px 15px #101a290d; }
  .pu-selection-summary > h3,.pu-selection-price-lines,.pu-selection-capacity { display: none; }
  .pu-selection-total { border: 0; margin: 0; padding: 0 0 10px; gap: 3px; }
  .pu-selection-total > strong { font-size: 23px; }
  .pu-selection-actions { flex-direction: row; flex-wrap: wrap; }
  .pu-selection-actions .button { flex: 1; }
  .pu-server-facts { margin-top: 0; margin-bottom: 9px; }
  .pu-dialog-period { gap: 5px; }
  .pu-dialog-period > span { font-size: 8px; white-space: nowrap; }
  .pu-period-choice .button { min-width: 72px; padding-left: 9px; padding-right: 9px; }
  .pu-dialog-actions .button { flex: 1; justify-content: center; }
  .pu-invoices article { flex-wrap: wrap; gap: 8px; }
  .pu-invoices article > span:first-child { flex: 1; }
  .pu-dialog .account-pause-options { flex-wrap: wrap; }
  .pu-dialog .account-verification-row { display: grid; }
}

.workspace-card.is-customer{grid-template-columns:minmax(0,1fr) auto}.workspace-card.is-customer .workspace-locked[hidden]{display:none}

/* Actual shop and recorded lead sales remain visibly separate. */
[data-sales-report] { display:grid; gap:20px; min-width:0; }
#analytics-sales-metric, .analytics-table-controls input { min-width:0; max-width:100%; height:42px; padding:8px 12px; border:1px solid #cad3e5; border-radius:10px; background:white; color:#26364e; font:inherit; font-size:12px; }
.analytics-table-controls input { width:220px; }
.sales-secondary-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:14px 0 22px; color:var(--muted); font-size:12px; }
.sales-secondary-row strong { color:var(--ink); }
.sales-secondary-row details>summary { cursor:pointer; }
.sales-secondary-row details[open]>span { display:block; margin-top:8px; }
.sales-chart-range { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.sales-state { padding:24px 0; color:var(--muted); }
.lead-sale-editor { border-top:1px solid var(--line); margin-top:16px; padding-top:16px; min-width:0; }
.lead-sale-editor h3 { margin:0; font-size:14px; }
.lead-sale-summary { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0; font-size:13px; }
.lead-sale-summary time,.lead-sale-editor p { color:var(--muted); font-size:12px; }
.lead-sale-fields { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.7fr) minmax(0,1fr); gap:10px; }
.lead-sale-fields label { display:grid; min-width:0; gap:6px; font-size:11px; font-weight:600; }
.lead-sale-fields input { width:100%; min-width:0; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }
.lead-sale-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
[data-sales-report] .analytics-stat strong { overflow-wrap:anywhere; }
@media(max-width:650px) { .lead-sale-fields { grid-template-columns:minmax(0,1fr); } .sales-secondary-row { gap:10px; } .sales-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #analytics-sales-metric, .analytics-table-controls input { width:100%; } .sales-chart-range { padding:0 16px; } }

/* Short product-stage label, also legible in narrow Builder dialogs. */
.feature-beta { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 5px; padding: 2px 5px; border-radius: 5px; background: #edf0ff; color: #3344b8; font-size: 9px; font-weight: 700; line-height: 1.2; vertical-align: middle; text-transform: none; letter-spacing: normal; }

.sender-setup { margin: 18px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8f9ff; }
.sender-setup-steps { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.sender-setup-steps li { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.sender-setup-steps [data-state="current"] { color: #3344b8; font-weight: 700; }
.sender-setup-steps [data-state="complete"] { color: #19724b; }
.sender-setup p { margin: 10px 0; font-size: 12px; line-height: 1.5; }
.sender-dns-value { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sender-dns-value input { flex: 1 1 0; min-width: 0; }
.sender-dns-value button { flex: 0 0 auto; }
.sender-setup[hidden], .sender-setup-steps[hidden], [data-sender-dns-section][hidden] { display: none; }
/* Curated templates: product images, short actions and accessible ordering. */
.template-card-preview { position:relative; aspect-ratio:4/3; min-height:0; overflow:hidden; background:#f1f3f8; }
.template-card-preview img { width:100%;height:100%;object-fit:contain;background:#fff; }
.template-card-preview strong { position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.92);color:#38405b;font-size:11px; }
.template-card-actions { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.template-card-actions .button { white-space:nowrap;min-width:0; }
.template-card-description { margin:8px 0 12px; }
.template-mode-pills { display:flex;gap:4px;align-items:center; }
.template-mode-pills button { padding:10px 13px;border:1px solid #e0e4ef;border-radius:10px;background:#fff;color:#505b75;font-weight:700; }
.template-mode-pills button[aria-pressed="true"] { background:#eef0ff;color:#4054ff;border-color:#b9c0ff; }
.curated-submit-cover { display:block;width:100%;max-width:320px;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:#f4f6fa; }
.curated-submit-cover[hidden] { display:none; }
.curated-mini-cover { width:100px;height:75px;object-fit:contain;border-radius:10px;background:#fff; }
.template-admin-heading { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px; }
.template-admin-heading nav { margin:0;margin-right:auto; }
.curated-admin-page > .template-grid { margin-bottom:24px; }
.curated-admin-page .catalog-publication-list,.curated-admin-page .catalog-owned-source { display:none; }
.curated-admin-page .catalog-publication-layout { display:block; }
.curated-admin-page .catalog-publication-editor { max-width:760px; }
.curated-admin-page .template-card details { width:100%; }
.curated-admin-page .template-card dd { margin:0 0 8px;overflow-wrap:anywhere; }
.template-arrange ol { display:grid;gap:8px;margin:16px 0;padding:0;list-style:none; }
.template-arrange li { display:flex;gap:12px;align-items:center;border:1px solid #e1e5ef;border-radius:12px;padding:10px;background:white;cursor:grab; }
.template-arrange li strong { flex:1;min-width:0;overflow-wrap:anywhere; }
.template-arrange li img { object-fit:contain;border-radius:8px; }
.template-arrange li button { border:1px solid #d6dbea;border-radius:8px;background:#fff;min-width:36px;min-height:36px;cursor:pointer; }
/* Template proportions follow the approved landscape-card reference. */
.template-library-page .template-collection { border:0; background:transparent; box-shadow:none; overflow:visible; }
.template-library-page .template-collection > .table-toolbar { padding:0; border:0; margin-bottom:18px; }
.template-library-page .template-collection > .table-toolbar > div:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.template-library-page .template-collection .table-tools { width:100%; justify-content:flex-start; }
.template-library-page .template-collection .table-search { order:-2; flex:0 1 400px; }
.template-library-page .template-mode-pills { order:-1; }
.template-library-page .template-collection .template-grid { padding:0; gap:18px; align-items:start; }
.template-library-page .template-grid:not(.template-list), .curated-admin-page .template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.template-library-page .template-card, .curated-admin-page .template-card { border-radius:12px; align-self:start; }
.template-library-page .template-card-preview, .curated-admin-page .template-card-preview { display:block; aspect-ratio:16/9; min-height:0; padding:0; }
.template-library-page .template-card-preview img, .curated-admin-page .template-card-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.template-library-page .template-card-preview > span:not(.template-cover-status), .curated-admin-page .template-card-preview > span:not(.template-cover-status) { position:absolute; inset:0; margin:auto; }
.template-library-page .template-card-preview strong, .curated-admin-page .template-card-preview strong { top:12px; bottom:auto; font-size:11px; letter-spacing:0; border-radius:6px; padding:4px 8px; }
.template-card-preview .template-cover-status { position:absolute; right:12px; top:12px; width:auto; height:auto; padding:4px 8px; border:0; border-radius:6px; background:#eef1f6; color:#4e5971; font-size:11px; }
.template-card-preview .template-cover-status.is-installed { background:#dff3e8; color:#16754c; }
.template-library-page .template-card-body, .curated-admin-page .template-card-body { padding:14px 16px; gap:6px; align-content:start; }
.template-library-page .template-card-body h3, .curated-admin-page .template-card-body h3 { font-size:16px; line-height:1.35; }
.template-library-page .template-card-body > .template-card-description { margin:0; min-height:0; font-size:12px; line-height:1.5; }
.template-library-page .template-card-actions, .curated-admin-page .template-card-actions { display:flex; flex-wrap:wrap; gap:10px; padding-top:6px; align-items:stretch; }
.template-library-page .template-card-actions > .button, .curated-admin-page .template-card-actions > .button { flex:1 1 0; justify-content:center; min-height:38px; padding:8px 10px; }
.template-library-page .template-more-details { margin:0; font-size:11px; }
.curated-admin-layout { display:grid; gap:24px; align-items:start; }
.curated-admin-layout.has-editor { grid-template-columns:minmax(0,1fr) minmax(360px,420px); }
.curated-admin-browser { min-width:0; }
.curated-admin-layout.has-editor .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.curated-admin-page .template-card.is-selected { border-color:#4f6bff; box-shadow:0 0 0 1px #4f6bff; }
.curated-admin-page .template-card-body > small { color:var(--muted); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.curated-admin-inspector { min-width:0; position:sticky; top:20px; max-height:calc(100vh - 120px); overflow:auto; padding:20px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.curated-admin-inspector > header { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--muted); font-size:12px; }
.curated-admin-inspector .catalog-publication-panel { padding:0; border:0; box-shadow:none; margin:0; }
.curated-admin-inspector .catalog-publication-editor { width:100%; max-width:none; margin:0; padding:0; border:0; }
.curated-admin-inspector .catalog-publication-editor > h3 { margin:0; font-size:20px; }
.curated-admin-inspector fieldset { min-width:0; }
.curated-admin-inspector > .panel { box-shadow:none; padding:14px 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.curated-admin-inspector .catalog-maintenance { margin-bottom:12px; font-size:11px; color:var(--muted); }
.curated-inspector-actions { display:grid; gap:10px; border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.curated-inspector-actions .button { justify-content:center; }
@media(max-width:1200px) {
 .curated-admin-layout.has-editor { grid-template-columns:minmax(0,1fr); }
 .curated-admin-inspector { position:static; max-height:none; }
 .template-library-page .template-grid:not(.template-list), .curated-admin-page .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
 .template-admin-heading { gap:8px; }
 .template-admin-heading nav { width:100%;overflow:auto; }
 .template-grid { grid-template-columns:minmax(0,1fr); }
 .template-collection .table-tools { flex-wrap:wrap;justify-content:flex-start; }
 .curated-admin-page .template-card,.template-arrange li { min-width:0; }
 .template-arrange li { gap:8px; }
 .template-arrange li img { width:48px;height:36px; }
 .curated-admin-page fieldset { min-width:0; }
 .curated-admin-page input,.curated-admin-page textarea,.curated-admin-page select { max-width:100%;box-sizing:border-box; }
 .my-library-card { flex-wrap:wrap; }
 .template-library-page .template-grid:not(.template-list), .curated-admin-page .template-grid, .curated-admin-layout.has-editor .template-grid { grid-template-columns:minmax(0,1fr); }
 .template-library-page .template-collection .table-search { flex-basis:100%; }
 .curated-admin-inspector { padding:16px; }
 .template-library-page .template-card-actions > .button, .curated-admin-page .template-card-actions > .button { min-height:42px; }
}

.template-demo-page .template-preview-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0}.template-demo-page .template-preview-dialog::backdrop{background:#fff}

/* Same uncropped image box for source covers and custom covers. */
.template-library-page .template-card-preview img, .curated-admin-page .template-card-preview img { padding:14px; box-sizing:border-box; }
.template-library-page .template-card-actions .icon { width:16px; height:16px; flex:none; }
.template-library-page .template-card-preview > strong { background:#fff; box-shadow:0 1px 4px rgb(32 49 91 / 5%); }
.template-library-page .template-collection .table-search { flex-basis:460px; }

/* Curated Admin inspector: three native tabs with compact, visual file controls. */
.curated-admin-inspector > header { margin-bottom:10px; justify-content:flex-end; gap:12px; }
.curated-admin-inspector > header .icon-button { width:32px; height:32px; }
.curated-inspector-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.curated-inspector-title h3 { margin:0; font-size:17px; line-height:1.35; }
.curated-status { display:inline-flex; align-items:center; padding:4px 7px; border-radius:5px; color:#16734c; background:#e4f5eb; font-size:10px; font-weight:650; white-space:nowrap; }
.curated-status.is-draft,.template-cover-status.is-draft { color:#606990; background:#eff0fa; }
.curated-status.is-unavailable { color:#667085; background:#eef0f4; }
.curated-inspector-description { color:var(--muted); font-size:11px; line-height:1.5; margin:7px 0 16px; }
.curated-inspector-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; margin-bottom:16px; }
.curated-tab-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.curated-tab-label { text-align:center; padding:9px 4px; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; cursor:pointer; }
.curated-tab-input:checked + .curated-tab-label { color:#4f64ff; border-bottom:2px solid #4f64ff; font-weight:700; }
.curated-tab-input:focus-visible + .curated-tab-label { outline:2px solid #4f64ff; outline-offset:-2px; border-radius:5px; }
.curated-editor-form { grid-column:1/-1; margin-top:17px; }
.curated-editor fieldset { display:grid; gap:12px; border:0; margin:0; padding:0; min-width:0; }
.curated-tab-panel { display:none; min-width:0; }
#curated-inspector-details:checked ~ .curated-editor-form .curated-tab-details,
#curated-inspector-files:checked ~ .curated-editor-form .curated-tab-files,
#curated-inspector-versions:checked ~ .curated-editor-form .curated-tab-versions { display:grid; gap:13px; }
.curated-editor label:not(.curated-choice):not(.catalog-check):not(.curated-tab-label) { display:grid; gap:6px; color:var(--ink); font-size:11px; font-weight:600; min-width:0; }
.curated-editor input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.curated-editor textarea,.curated-editor select { width:100%; min-width:0; box-sizing:border-box; padding:9px 10px; border:1px solid #d7dfec; border-radius:8px; background:white; color:var(--ink); font:inherit; font-size:12px; }
.curated-editor textarea { resize:vertical; min-height:66px; }
.curated-editor .catalog-check { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; line-height:1.5; }
.curated-editor .catalog-check input { width:16px; height:16px; }
.curated-choice-group legend { font-size:11px; font-weight:700; color:var(--ink); margin-bottom:8px; padding:0; }
.curated-choice-group > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.curated-editor .curated-choice { display:flex; align-items:flex-start; gap:7px; padding:10px; border:1px solid #dee4f0; border-radius:8px; cursor:pointer; min-width:0; }
.curated-choice:has(input:checked) { border-color:#778aff; background:#f8f9ff; }
.curated-choice input[type=radio] { width:13px; height:13px; margin:1px 0 0; flex-shrink:0; accent-color:#4f64ff; }
.curated-choice:has(input:disabled) { cursor:default; }
.curated-choice > span { display:grid; gap:4px; }
.curated-choice strong { font-size:10px; line-height:1.35; }
.curated-choice small { font-size:9px; color:var(--muted); line-height:1.45; font-weight:400; }
.curated-editor details { margin:0; }
.curated-file-groups { display:grid; gap:8px; margin-top:2px; }
.curated-file-group { border:1px solid #e2e7f1; border-radius:8px; background:#fbfcfe; }
.curated-file-group > summary { display:flex; align-items:center; list-style:none; padding:10px; gap:9px; cursor:pointer; }
.curated-file-group > summary::-webkit-details-marker { display:none; }
.curated-file-group > summary > .icon { width:18px; height:18px; flex-shrink:0; color:#677893; }
.curated-file-group > summary > span:not(.curated-file-ready):not(.curated-file-empty) { display:grid; gap:3px; flex:1; }
.curated-file-group strong { font-size:11px; }
.curated-file-group small { font-size:9px; color:var(--muted); }
.curated-file-ready { color:#179f66; }
.curated-file-ready .icon { width:16px; height:16px; }
.curated-file-group > summary > .icon:last-child { width:13px; height:13px; }
.curated-file-group ul { list-style:none; padding:0 11px 9px; margin:0; display:grid; gap:8px; }
.curated-file-group li { display:flex; justify-content:space-between; gap:10px; }
.curated-file-group > p { font-size:11px; padding:0 11px; }
.curated-advanced { font-size:10px; color:var(--muted); }
.curated-advanced > summary,.curated-source-details > summary,.curated-review > summary { display:flex; align-items:center; gap:7px; cursor:pointer; color:#4f64ff; font-size:10px; }
.curated-advanced > summary .icon,.curated-source-details > summary .icon,.curated-review > summary .icon { width:13px; height:13px; }
.curated-advanced[open],.curated-source-details[open],.curated-review[open] { display:grid; gap:12px; }
.curated-commercial-settings[open] { padding:12px; border:1px solid var(--line); border-radius:8px; background:#fafbfe; }
.curated-editor .curated-help { margin:7px 0 13px; font-size:10px; line-height:1.55; color:var(--muted); }
.curated-source-summary { display:flex; align-items:center; gap:9px; padding:14px 0; margin-top:9px; border-top:1px solid var(--line); }
.curated-source-summary > .icon { width:18px; height:18px; flex-shrink:0; color:#677893; }
.curated-source-summary > span:not(.curated-status) { display:grid; gap:4px; flex:1; min-width:0; }
.curated-source-summary strong { font-size:11px; overflow-wrap:anywhere; }
.curated-source-summary small { font-size:9px; color:var(--muted); overflow-wrap:anywhere; }
.curated-draft-save { display:grid; gap:9px; padding-top:12px; border-top:1px solid var(--line); }
.curated-editor .button { justify-content:center; min-height:37px; padding:9px 12px; font-size:11px; }
.curated-editor .button .icon { width:15px; height:15px; }
.curated-text-action { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11px; background:transparent; border:0; padding:3px 0; color:#4f64ff; cursor:pointer; text-decoration:none; }
.curated-text-action .icon { width:14px; height:14px; }
.curated-editor .curated-new-version > summary { display:flex; list-style:none; }
.curated-new-version > summary::-webkit-details-marker { display:none; }
.curated-new-version[open] > summary { display:none; }
.curated-new-version form fieldset,.curated-review form fieldset,.curated-publish-form fieldset { display:grid; gap:12px; margin-top:12px; }
.curated-cover-editor { display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:12px; align-items:center; }
.curated-cover-editor img { max-width:120px; border-radius:7px; }
.curated-cover-editor > div { display:grid; gap:8px; }
.curated-cover-editor .curated-text-action { font-size:10px; text-align:left; }
.curated-source-details { padding-top:12px; border-top:1px solid var(--line); }
.curated-source-details dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:7px; font-size:10px; margin:0; }
.curated-source-details dt { color:var(--muted); }
.curated-source-details dd { margin:0; overflow-wrap:anywhere; }
.curated-maintenance { margin-top:12px!important; padding-top:12px; border-top:1px solid var(--line); }
.curated-maintenance .curated-text-action { font-size:10px; }
.curated-maintenance .catalog-owned-source { display:block; }
.curated-version-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.curated-version-row > span:first-child { display:grid; gap:4px; flex:1; }
.curated-version-row strong { font-size:12px; }
.curated-version-row small { color:var(--muted); font-size:10px; }
@media(max-width:700px) {
 .curated-editor .button { min-height:42px; }
 .curated-choice strong { font-size:11px; }
 .curated-choice small { font-size:10px; }
 .curated-editor .form-actions { flex-wrap:wrap; }
 .curated-editor .form-actions .button { flex:1; }
}

.curated-admin-page .template-card-preview .template-cover-status { left:auto; bottom:auto; margin:0; }
.curated-admin-page .template-card-preview .template-cover-status.is-published { background:#dff3e8; color:#16754c; }

.curated-file-empty { color:var(--muted); font-size:12px; }
.pu-selfservice-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:24px; padding:24px; background:#fff; color:var(--ink); overflow:auto; box-shadow:0 24px 90px #0e182344; }
.pu-selfservice-dialog::backdrop { background:#11182770; backdrop-filter:blur(5px); }
.pu-selfservice-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.pu-selfservice-dialog h2 { margin:0; font-size:24px; }
.pu-selfservice-dialog [hidden] { display:none!important; }
.pu-selfservice-dialog [data-close],.pu-selfservice-dialog [data-change-close] { border:1px solid var(--line); border-radius:12px; background:#fff; width:40px; height:40px; font-size:26px; color:var(--ink); cursor:pointer; }
.pu-selfservice-content form,.pu-selfservice-content label { display:grid; gap:8px; }
.pu-selfservice-content form { gap:16px; }
.pu-selfservice-content input,.pu-selfservice-content select { min-width:0; border:1px solid var(--line); border-radius:10px; padding:11px; background:#fff; color:var(--ink); font:inherit; width:100%; }
.pu-selfservice-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pu-selfservice-content dl { margin:20px 0; }
.pu-selfservice-content dl div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--line); }
.pu-selfservice-content dd { margin:0; }
.pu-selfservice-content .pu-selfservice-consent { display:flex; align-items:flex-start; margin:20px 0; line-height:1.5; }
.pu-selfservice-consent input { width:18px; flex-shrink:0; margin-top:3px; }
.pu-selfservice-content [data-payment] { margin:20px 0; }
.pu-selfservice-content .button { width:100%; margin-top:8px; }
.pu-selfservice-dialog .pu-notice { margin-bottom:0; }
.pu-payment-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:middle; animation:pu-payment-spin .8s linear infinite; }
@keyframes pu-payment-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .pu-payment-spinner { animation:none; } }
@media(max-width:420px) { .pu-selfservice-dialog { padding:20px; } .pu-selfservice-fields { grid-template-columns:1fr; gap:16px; } }

/* Quote e-mail fields must remain readable in either Studio appearance. */
.quote-email-design .settings-two-column { gap: 24px; }
.quote-email-design section { min-width: 0; }
.quote-email-design label { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; }
.quote-email-design input:not([type="checkbox"]), .quote-email-design textarea, .quote-email-design select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; padding: 10px 12px; }
.quote-email-design details > summary { font-size: 15px; font-weight: 650; cursor: pointer; }
.quote-email-design .quote-template-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; border: 0; padding: 0; }
.quote-email-design .quote-template-toggles legend { font-size: 13px; margin-bottom: 8px; }
.quote-email-design .quote-template-toggles label { display: flex; align-items: center; margin: 0; }
.quote-email-design .lead-switch > span { font-size: 13px; }
@media (max-width: 700px) { .quote-email-design .settings-two-column { grid-template-columns: 1fr; } }
.studio-startup { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; color:#192338; font-family:system-ui,sans-serif; }
.studio-startup h1 { font-size:22px; margin:20px 0 8px; }
.studio-startup p { font-size:14px; color:#58647a; }
.studio-startup-spinner { width:32px; height:32px; border:3px solid #dfe5ff; border-top-color:#4d60ff; border-radius:50%; animation:studio-startup-spin .8s linear infinite; }
@keyframes studio-startup-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .studio-startup-spinner { animation:none; } }

/* Workspace-scoped Shopify setup; details stay behind the short help disclosure. */
.shopify-setup { display: grid; gap: 16px; padding: 21px; scroll-margin-top: 24px; min-width: 0; }
.shopify-setup label { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
.shopify-setup select { width: 100%; min-width: 0; max-width: 100%; padding: 12px; border: 1px solid #d8deeb; border-radius: 10px; background: white; color: #18213b; font: inherit; }
.shopify-setup-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #56617b; }
.shopify-binding-form { display: grid; gap: 16px; min-width: 0; }
.shopify-binding-list { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.shopify-binding-list li, .shopify-setup p { overflow-wrap: anywhere; }
.shopify-setup .button { max-width: 100%; white-space: normal; }
.shopify-setup .form-error { color: #b42318; }
@media (max-width: 700px) { .shopify-setup .settings-two-column { grid-template-columns: minmax(0, 1fr); } .shopify-setup .connector-management-heading { flex-wrap: wrap; } }

.recovery-review-dialog { padding: 24px; }
.recovery-review-dialog [role="status"] { overflow-wrap: anywhere; }
.recovery-review-dialog progress { width: 100%; height: 8px; margin: 8px 0 16px; accent-color: #4f6bff; }

/* Mail profiles use the same list/editor pattern as Sender and Recipients. */
.email-profile-layout { grid-template-columns: minmax(220px, .55fr) minmax(0, 2fr); align-items: start; }
.email-profile-layout > .quote-email-design { min-width: 0; margin: 0; }
.email-profile-layout .lead-profile-list { position: sticky; top: 18px; }
.email-profile-layout .lead-profile-card strong { font-size: 13px; }
.email-profile-layout .lead-profile-card small { font-size: 11px; }
.email-profile-name { max-width: 420px; margin-bottom: 16px; }
.email-preview { min-width: 0; }
.quote-email-design textarea { border: 1px solid var(--line); border-radius: 10px; background: #fff; resize: vertical; }
.email-profile-routing { min-width: 0; padding: 16px; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; }
.email-profile-routing legend { padding: 0 6px; font-weight: 650; font-size: 13px; }
.email-profile-routing input[type=checkbox] { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; padding: 0; }
.email-profile-routing .lead-routing-choice { font-size: 12px; }
@media (max-width: 1100px) { .email-profile-layout .settings-two-column { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .email-profile-layout { grid-template-columns: 1fr; } .email-profile-layout .lead-profile-list { position: static; } }
@media (max-width: 520px) { .quote-email-design .quote-template-toggles { grid-template-columns: 1fr; } }
/* Price basis data insertion stays usable in a narrow Builder inspector. */
.builder-price-basis-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.builder-price-basis-fields .button { width: auto; max-width: 100%; }

/* Local PDF refinement: keep the existing paper, edit its wording in place. */
.quote-template-simple [hidden] { display: none !important; }
.quote-template-simple > .quote-template-advanced { padding: 18px; }
.quote-template-simple .quote-template-sections { grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; border-radius: 0; gap: 13px; }
.quote-template-simple .quote-template-sections legend { margin-bottom: 16px; padding: 0; font-size: 14px; font-weight: 700; }
.quote-template-simple .lead-switch { justify-content: space-between; flex-direction: row-reverse; gap: 14px; min-height: 24px; margin: 0; font-size: 12px; }
.quote-template-simple .lead-switch span { margin-right: auto; }
.quote-template-size-control { display: grid; gap: 8px; margin: -3px 0 4px; color: var(--muted); font-size: 11px; }
.quote-template-size-buttons { display: flex; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #f6f7fa; }
.quote-template-size-buttons button { flex: 1; min-height: 32px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.quote-template-size-buttons button[aria-pressed="true"] { color: #fff; background: #4f63ff; }
.quote-template-size-buttons button:disabled { opacity: .45; cursor: default; }
.quote-template-appearance { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.quote-template-appearance h3 { margin: 0 0 12px; font-size: 13px; }
.quote-template-simple .quote-template-colors { grid-template-columns: 1fr; gap: 9px; }
.quote-template-simple .quote-template-colors label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.quote-template-simple .quote-template-colors input[type="color"] { width: 54px; min-height: 34px; height: 34px; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.quote-template-more { margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quote-template-more summary { font-size: 12px; cursor: pointer; }
.quote-template-more[open] summary { margin-bottom: 16px; }
.quote-template-more .quote-template-design-name { display: grid; gap: 6px; margin-top: 14px; font-size: 11px; }
.quote-template-more .quote-template-design-name input { width: 100%; box-sizing: border-box; }
.quote-template-simple .quote-design-default-note, .quote-template-auto-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.quote-template-simple .quote-template-control-actions { border: 0; padding-top: 0; }
.quote-template-save-status { min-height: 17px; margin: 0; color: #657269; font-size: 11px; }
.quote-template-save-status[data-changed="true"] { color: #a65d00; }
.quote-template-save-status[data-changed="true"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e49a28; }
.quote-template-edit-help { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.quote-template-edit-help > span { display: inline-flex; align-items: center; gap: 6px; }
.quote-template-edit-help .icon { width: 14px; height: 14px; }
.quote-template-edit-help select { min-height: 32px; width: auto; max-width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font: inherit; }
.quote-template-simple .quote-template-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; width: 100%; min-height: 205px; border: 1px solid #e7eaf0; border-radius: 3px; color: #8891a1; background: #f4f5f7; font-size: 11px; text-align: center; padding: 16px; }
.quote-template-image-placeholder .icon { width: 35px; height: 35px; stroke-width: 1.25; }
.quote-template-image-placeholder small { font-size: 9px; }
.quote-template-simple .quote-template-live-page[data-configuration-image-size="small"] .quote-template-image-placeholder { min-height: 135px; }
.quote-template-simple .quote-template-live-page[data-configuration-image-size="large"] .quote-template-image-placeholder { min-height: 270px; }
.quote-template-simple .quote-template-live-page footer > .quote-template-page-number { justify-content: flex-end; align-items: baseline; gap: 3px; }
.quote-template-simple [data-quote-preview-empty-row] > dd:first-of-type { grid-column: 2 / -1; }
.quote-template-simple .quote-template-live-page [contenteditable="true"] { min-width: 12px; }
.quote-template-simple .quote-template-live-page [contenteditable="true"]:focus-visible { outline: 2px solid #4f63ff; outline-offset: 3px; }
.quote-template-simple .quote-template-live-page [data-quote-preview-reference] { font-size: 10px; line-height: 1.5; }
.quote-template-simple .quote-template-live-page [data-quote-label="date"], .quote-template-simple .quote-template-live-page [data-quote-label="reference"], .quote-template-simple .quote-template-page-number [contenteditable] { display: inline-block; }
@media (max-width: 600px) {
  .quote-template-simple .quote-template-live-page header { flex-direction: column; gap: 8px; }
  .quote-template-simple .quote-template-header-right { width: 100%; text-align: left; overflow-wrap: anywhere; }
  .quote-template-simple .quote-template-edit-help { align-items: flex-start; }
  .quote-template-simple .quote-template-live-page [data-quote-preview-header-details] { font-size: 10px; }
  .quote-template-simple .quote-template-live-page dl > div { grid-template-columns: 30% 42% 28%; font-size: 10px; }
  .quote-template-simple .quote-template-live-page dl.quote-without-price > div { grid-template-columns: 40% 60%; }
}

/* Local Leads revision: one message, four switches, direct preview editing. */
.email-design-simple { padding: 0; margin: 0; min-width: 0; }
.email-design-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.email-design-simple .panel { padding: 28px; margin: 0; min-width: 0; border-radius: 18px; }
.email-design-simple h2 { margin: 0 0 20px; font-size: 20px; letter-spacing: -.4px; }
.email-design-simple label { margin-top: 18px; gap: 8px; }
.email-design-simple label > span { font-size: 13px; font-weight: 650; color: var(--text); }
.email-design-simple input:not([type=checkbox]), .email-design-simple textarea { border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #181a21; line-height: 1.6; padding: 12px 14px; }
.email-design-simple textarea { min-height: 250px; resize: vertical; }
.email-design-simple input:focus-visible, .email-design-simple textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.email-design-simple .email-editor-help { margin: 10px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.email-design-simple .email-token-help { margin: 10px 0 22px; color: var(--muted); }
.email-design-simple .email-token-help summary { font-size: 12px; font-weight: 500; }
.email-design-simple .email-token-help p { font-size: 12px; line-height: 1.6; }
.email-design-simple .quote-template-toggles { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; margin: 18px 0 12px; border-top: 1px solid var(--line); }
.email-design-simple .quote-template-toggles legend { padding: 0; font-size: 14px; font-weight: 700; }
.email-design-simple .lead-switch { justify-content: space-between; flex-direction: row-reverse; gap: 14px; margin: 0; min-height: 24px; }
.email-design-simple .lead-switch > span { margin-right: auto; font-size: 13px; }
.email-design-simple .lead-switch input[type=checkbox] { min-height: 20px; padding: 0; }
.email-design-simple .email-design-scope { margin: 20px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.email-design-save { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.email-design-save [data-email-save-status] { font-size: 12px; color: var(--muted); }
.email-design-simple .email-design-delete { margin-top: 16px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.email-design-simple .email-design-delete:disabled { opacity: .5; cursor: default; }
.email-preview-heading { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.email-design-simple .email-preview-heading h2 { margin: 0; }
.email-design-simple .email-preview-heading label { margin: 0; max-width: 100%; }
.email-design-simple .email-preview-heading select { width: auto; max-width: 100%; min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; background: #f7f8fc; color: var(--muted); }
.email-design-simple [data-email-design-preview] { margin-top: 22px; padding: 26px; border-radius: 12px; color: #17191f; background: #fff; font-size: 14px; line-height: 1.65; }
.email-design-simple [data-email-design-preview] h3 { margin: 0 0 26px; font-size: 18px; font-weight: 750; line-height: 1.45; }
.email-design-simple [data-email-design-preview] p { margin: 0 0 18px; }
.email-design-simple [data-email-design-preview] ul { padding-left: 20px; margin: 0 0 22px; }
.email-design-simple [data-email-design-preview] li { margin-bottom: 6px; }
.email-design-simple [data-email-wording] { position: relative; display: inline-block; max-width: 100%; min-width: 12px; border-radius: 4px; outline: 1px solid transparent; outline-offset: 4px; cursor: text; }
.email-design-simple [data-email-wording]:hover { outline-color: #c5ceff; }
.email-design-simple [data-email-wording]:focus { outline: 2px solid var(--accent); }
.email-design-simple [data-email-wording]::after { content: '✎'; display: inline-block; font-size: 11px; margin-left: 8px; color: #939eae; user-select: none; }
.email-design-simple [data-email-wording]:empty::before { content: 'Add text'; color: #939eae; font-weight: 400; }
.email-design-simple [data-email-wording]:focus::after { display: none; }
.email-preview-link, .email-design-simple [data-email-design-preview] a { color: #475aff; text-decoration: underline; text-underline-offset: 3px; }
.email-preview-price { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.email-preview-price > strong { font-size: 20px; }
.email-preview-attachment { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e0e4ed; border-radius: 8px; color: #505b6d; background: #f9faff; font-size: 12px; }
.email-design-simple .email-preview-note { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.email-design-simple .email-profile-routing { margin-top: 22px; padding: 14px; }
.email-design-simple .email-profile-routing summary { font-size: 13px; }
.email-design-simple .email-profile-routing summary > span { float: right; color: var(--muted); font-size: 11px; font-weight: 400; }
.email-design-simple .email-design-validation { padding: 12px; border: 1px solid #f4b7b7; border-radius: 8px; background: #fff2f2; color: #a12222; font-size: 12px; line-height: 1.5; }
@media (max-width: 1000px) {
  .email-design-columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .email-design-simple .panel { padding: 20px; }
  .email-design-simple [data-email-design-preview] { padding: 18px; }
  .email-design-simple .email-preview-heading { align-items: flex-start; }
}

/* Real Save/Publish work. An indeterminate line is not a percentage. */
.builder-operation-active { position: relative; overflow: hidden; }
.builder-work-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 32%; background: #43d18b; animation: builder-work-line 1.4s ease-in-out infinite alternate; pointer-events: none; }
@keyframes builder-work-line { from { transform: translateX(-25%); } to { transform: translateX(240%); } }
@media (prefers-reduced-motion: reduce) { .builder-work-line { animation: none; width: 100%; } }

/* Choice navigation: text-only navigation, native touch plus pointer drag. */
.option-group--many-scroll .option-grid { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
.option-grid > [hidden], .option-carousel-controls[hidden], .option-search-empty[hidden], .option-group-heading-selection[hidden] { display: none !important; }
.studio-shell[data-builder-active="true"] .option-carousel-controls { justify-content: space-between; }
.studio-shell[data-builder-active="true"] .option-carousel-controls button { display: inline-flex; align-items: center; min-width: 0; min-height: 28px; padding: 3px 0; border: 0; border-radius: 3px; background: transparent; font-size: 11px; font-weight: 500; opacity: .7; }
.studio-shell[data-builder-active="true"] .option-carousel-controls button:disabled { opacity: .3; cursor: default; }
.studio-shell[data-builder-active="true"] .option-carousel-controls button:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.option-grid--draggable, .option-grid--draggable .option-button { cursor: grab; }
.option-grid--dragging, .option-grid--dragging .option-button { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.option-group--many-carousel .option-grid > * { min-width: 0; scroll-snap-align: start; }
.option-search-empty { margin: 10px 0; font-size: 13px; opacity: .75; }
.option-group-heading-selection { min-width: 0; font-size: .85em; font-weight: 400; opacity: .75; overflow-wrap: anywhere; }
.option-group-heading-selection::before { content: " · "; }
.player-content-text[data-text-alignment="left"], .player-content-heading[data-text-alignment="left"] { text-align: left; }
.player-content-text[data-text-alignment="center"], .player-content-heading[data-text-alignment="center"] { text-align: center; }
.player-content-text[data-text-alignment="right"], .player-content-heading[data-text-alignment="right"] { text-align: right; }

/* Builder image mapping and compact Viewer upload. File controls cannot expand the canvas. */
.builder-image-dropzone, .builder-image-change { position: relative; }
.builder-image-dropzone input[type="file"], .builder-image-change input[type="file"] { top: 0; left: 0; min-width: 0; min-height: 0; margin: 0; padding: 0; }
.builder-image-field.builder-viewer-upload { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 10px; border: 1px solid #e1e5ec; border-radius: 10px; }
.builder-viewer-upload-heading, .builder-viewer-upload-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.builder-viewer-upload-heading { justify-content: space-between; }
.builder-viewer-upload-heading strong { font-size: 12px; }
.builder-viewer-upload input[type="file"] { display: none; }
.builder-viewer-upload .builder-element-image-preview { width: 100% !important; height: 100px !important; }
.builder-viewer-upload .builder-element-image-preview img { width: 100%; max-height: 100px; object-fit: contain; }
.builder-viewer-upload-actions > button { min-height: 34px; margin: 0; }
.builder-viewer-upload-actions .builder-image-source span { display: inline !important; }
.builder-image-mapping-toolbar, .builder-image-mapping-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.builder-image-mapping-toolbar { justify-content: space-between; color: #647084; font-size: 12px; }
.builder-image-mapping-group { border-top: 1px solid #e4e7ed; margin-top: 14px; padding-top: 10px; }
.builder-image-mapping-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.builder-image-mapping-group > summary span { color: #647084; font-size: 12px; }
.builder-image-mapping-choice { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 6px; border: 0; border-radius: 8px; background: transparent; color: #1e2430; cursor: pointer; }
.builder-image-mapping-choice:hover { background: #f4f5ff; }
.builder-image-mapping-thumb, .image-layer-thumbnail { display: grid; place-items: center; min-width: 0; background: #f4f5f8; border-radius: 8px; overflow: hidden; }
.builder-image-mapping-thumb { width: 52px; height: 48px; }
.builder-image-mapping-thumb img, .image-layer-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.builder-image-mapping-copy { display: grid; gap: 4px; min-width: 0; }
.builder-image-mapping-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.builder-image-mapping-copy small { color: #647084; font-size: 10px; }
.builder-image-mapping-status { font-size: 10px; color: #5362d8; }
.builder-image-mapping-status[data-connected="true"] { color: #218154; }
.builder-image-connection { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block: 8px; }
.builder-image-connection img { width: 48px; height: 44px; object-fit: contain; }
.builder-image-connection > span { display: grid; gap: 3px; flex: 1; min-width: 90px; }
.builder-image-connection small { color: #647084; }
.image-layers-dialog { width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; box-sizing: border-box; }
.image-layers-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.image-layers-heading small { color: #68748a; }
.image-layers-heading h2 { margin: 4px 0 16px; }
.image-layers-body { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(0,1.3fr); gap: 24px; }
.image-layers-body h3 { font-size: 15px; margin-block: 12px; }
.image-layers-body form { display: grid; align-content: start; gap: 10px; min-width: 0; }
.image-layers-body form > label { display: grid; gap: 5px; font-size: 12px; }
.image-layers-body select { width: 100%; min-width: 0; }
.image-layer-row { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid #e6e8ef; }
.image-layer-row[data-selected="true"] { background: #f4f5ff; }
.image-layer-row .image-layer-thumbnail { width: 60px; height: 50px; }
.image-layer-row > div { min-width: 0; display: grid; gap: 5px; }
.image-layer-row strong { font-size: 11px; overflow-wrap: anywhere; }
.image-layer-row small { color: #68748a; font-size: 10px; }
.image-layer-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.image-layer-image-choice { display: grid; min-width: 0; gap: 5px; padding: 5px; border: 1px solid #dce1eb; border-radius: 10px; background: white; cursor: pointer; color: #263144; }
.image-layer-image-choice[aria-pressed="true"] { border-color: #5966ff; background: #f4f5ff; box-shadow: inset 0 0 0 1px #5966ff; }
.image-layer-image-choice .image-layer-thumbnail { width: 100%; aspect-ratio: 4/3; }
.image-layer-image-choice > span:last-child { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 680px) { .image-layers-body { grid-template-columns: minmax(0,1fr); gap: 12px; } .image-layers-dialog { padding: 14px; } .image-layers-list { max-height: 180px; overflow-y: auto; } }

/* Upload status survives edit/Preview remounts without covering the toolbar. */
.builder-upload-status { position: absolute; z-index: 14; bottom: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 14px; border: 1px solid #c9d4e4; border-radius: 10px; background: #fff; color: #243247; font-size: 12px; line-height: 1.4; box-shadow: 0 4px 18px rgb(0 0 0 / 10%); pointer-events: none; overflow-wrap: anywhere; }
.builder-upload-status::after { content: ''; display: block; height: 2px; margin-top: 6px; width: 30%; background: #36a26a; animation: builder-upload-pulse 1.5s ease-in-out infinite alternate; }
@keyframes builder-upload-pulse { to { transform: translateX(200%); } }
@media (prefers-reduced-motion: reduce) { .builder-upload-status::after { animation: none; width: 100%; } }

/* F13: responsive Viewer overrides share the compact inspector field styling. */
.builder-viewer-size { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; min-width: 0; margin: 10px 0 0; padding: 10px; border: 1px solid #e1e5ec; border-radius: 10px; background: #fbfcfd; }
.builder-viewer-size legend { padding: 0 5px; font-size: 11px; font-weight: 650; color: #596579; }
.builder-viewer-size label { display: grid; align-content: start; gap: 5px; min-width: 0; margin: 0; }
.builder-viewer-size input[type="number"], .builder-viewer-size select { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; margin: 0; padding: 7px 9px; border: 1px solid #d5dce8; border-radius: 8px; background-color: #fff; color: #25324a; font: inherit; font-size: 12px; }

/* Builder post-QA: catalogue layout and sparse editor defaults. */
.configurator-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .configurator-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1199px) { .configurator-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 570px) { .configurator-card-grid { grid-template-columns: minmax(0, 1fr); } }
.configurator-card-preview { aspect-ratio: 1; min-height: 0; background: #eef0f2; }
.configurator-card-preview.thumb-2d { background: #eef0f2; }
.configurator-card-preview:has(.has-cover) { background: #fff; }
.config-thumb.has-cover img { object-fit: contain; background: #fff; }
.mode-badge { display: inline-flex; align-items: center; gap: 5px; }
.mode-badge .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.mode-badge.mode-3d { color: #3065f6; border-color: #b6c9fc; background: #eff4ff; }
.mode-badge.mode-2d { color: #b35e40; border-color: #eac3b4; background: #fff3ed; }
.configurator-card-metadata { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.configurator-card-metadata > .status-badge { flex: 0 1 auto; }
.configurator-card-metadata > .mode-badge { flex: 0 0 auto; min-height: 26px; padding: 3px 7px; }
/* Both libraries use the same minimal checkbox within the larger click target. */
:is(.configurator-card-select, .asset-card > .collection-select) input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 17px; height: 17px; border: 1px solid #788391; border-radius: 4px; background: transparent; cursor: pointer; }
:is(.configurator-card-select, .asset-card > .collection-select) input:checked { border-color: var(--accent); background: var(--accent); }
:is(.configurator-card-select, .asset-card > .collection-select) input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
:is(.configurator-card-select, .asset-card > .collection-select) input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (forced-colors: active) { :is(.configurator-card-select, .asset-card > .collection-select) input { appearance: auto; -webkit-appearance: auto; } :is(.configurator-card-select, .asset-card > .collection-select) input:checked::after { content: none; } }
.status-badge.status-draft { color: #715300; background: #fff2be; border-color: #eed685; }
.status-badge.status-draft > span { background: #a87c00; }
.builder-choice-text-alignment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-choice-text-alignment label { min-width: 0; display: grid; gap: 5px; }
.builder-choice-text-alignment select { min-width: 0; width: 100%; }
.builder-asset-picker-kind img { width: 100%; height: 100%; object-fit: contain; }
.builder-asset-picker-kind[data-builder-picker-thumbnail] { width: 62px; height: 62px; padding: 3px; border-radius: 8px; background: #f1f3f6; }
.builder-elements-palette, .builder-control-palette { margin-top: 12px; }
/* hidden must outrank the authored Price presentation's grid display. */
.builder-player-total[hidden], .builder-layout-price.summary-card[hidden] { display: none !important; }

/* Builder comparison v2: shared controls retain the existing field editors. */
.builder-shared-connections { margin-top: 20px; border-top: 1px solid #e0e4ee; padding-top: 16px; }
.builder-shared-connections > label { display: grid; gap: 6px; margin: 12px 0; }
.builder-summary-price-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.builder-choice-connection-status { color: #4e6b60; }

/* Explicit area colour only; old documents retain their existing surfaces. */
.builder-player-layout > .builder-layout-zone[data-zone-background="custom"]:not([data-zone-composition="floating_controls"]) { background: var(--configux-area-background); }
.builder-transfer-heading-actions { display: flex; align-items: center; gap: 12px; }
.builder-transfer-columns h3 { display: flex; align-items: center; gap: 8px; }
.builder-transfer-columns h3 > .icon { width: 18px; height: 18px; color: #6e80a3; }
.builder-transfer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.builder-transfer-card { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; min-height: 60px; gap: 10px; padding: 13px 12px; }
.builder-transfer-card > .icon { width: 20px; height: 20px; color: #6e80a3; }
.builder-transfer-card > strong { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }
.builder-transfer-card > small { grid-column: 3; grid-row: 1; white-space: nowrap; font-size: 10px; }
.builder-transfer-price-choice { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; border: 1px solid #d8dfee; border-radius: 12px; overflow: hidden; }
.builder-transfer-price-choice .builder-transfer-card { border: 0; border-radius: 0; grid-template-columns: 20px minmax(0, 1fr); }
.builder-transfer-price-choice select { appearance: none; width: 100%; min-width: 0; min-height: 28px; padding: 4px 16px 4px 0; text-align: right; text-align-last: right; border: 0; border-radius: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 11px; font-weight: 600; color: #526385; }
.builder-transfer-price-choice:focus-within { border-color: #6472ff; }
[data-builder-style-import-dialog] [data-builder-file-tools] { padding: 16px 24px; }
[data-builder-style-import-dialog] [data-action="builder-file-export"] { display: none; }

/* Route preparation keeps navigation visible and avoids false empty counts. */
.collection-loading, .collection-error { min-height: min(460px, 60dvh); padding: 48px 24px; background: var(--surface-muted, #f6f7f9); border-radius: 16px; }
.collection-loading h2, .collection-error h2 { margin: 20px 0 8px; font-size: 22px; line-height: 1.3; }
.collection-loading p, .collection-error p { margin: 8px 0; font-size: 14px; line-height: 1.6; color: #58647a; }
.collection-error-symbol { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d5dbe7; border-radius: 50%; background: #fff; color: #67738a; font-size: 22px; font-weight: 500; }
.collection-error > .button { margin-top: 14px; }
.template-grid > .collection-loading { grid-column: 1 / -1; }

/* Approved Templates catalog: shared mode badges, four cards and compact rows. */
.template-library-page { container: template-library / inline-size; }
.template-library-page .template-collection { padding: 0; border: 0; background: transparent; box-shadow: none; }
.template-library-page .template-collection > .table-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.template-library-page .template-collection > .table-toolbar > div:first-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.template-library-page #configux-templates-title { margin: 0; font-size: 23px; letter-spacing: -.6px; }
.template-library-page .template-collection .table-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.template-library-page .template-collection .table-search { order: 0; flex: 1 1 240px; max-width: 400px; }
.template-library-page .template-mode-pills { order: 1; }
.template-library-page .configurator-view-toggle { order: 2; margin-left: auto; }
.template-library-page .template-collection .table-filter { order: 3; }
.template-library-page .template-grid:not(.template-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.template-library-page .template-card { position: relative; background: var(--surface); border-color: var(--line); display: flex; flex-direction: column; align-self: stretch; overflow: visible; }
.template-library-page .template-card:has(.template-card-menu[open]) { z-index: 5; }
.template-library-page .template-card-preview { position: relative; width: 100%; aspect-ratio: 1; min-height: 0; border: 0; border-radius: 14px 14px 0 0; color: var(--muted); background: var(--soft); padding: 0; overflow: hidden; }
.template-library-page button.template-card-preview { cursor: pointer; }
.template-library-page .template-card-preview img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0; }
.template-library-page .template-card-preview .template-image-placeholder { width: 48px; height: 48px; border: 0; background: transparent; color: var(--muted); }
.template-library-page .template-image-placeholder .icon { width: 32px; height: 32px; }
.template-library-page .template-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 14px 12px; gap: 10px; color: var(--ink); }
.template-library-page .template-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.template-library-page .template-card-title h3 { margin: 0; font-size: 16px; min-width: 0; flex: 1; }
.template-library-page .template-card-title > .mode-badge { flex: 0 0 auto; min-height: 26px; padding: 3px 7px; }
.template-library-page .template-card-meta { position: relative; justify-content: flex-start; min-height: 32px; color: var(--muted); }
.template-library-page .template-card-price { font-size: 12px; font-weight: 600; color: var(--ink); }
.template-library-page .template-card-trial { margin: 0; font-size: 11px; color: var(--muted); }
.template-library-page .template-card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 0; }
.template-library-page .template-card-actions > .button { flex: 1 1 auto; min-width: 0; padding: 9px 8px; font-size: 11px; gap: 5px; }
.template-library-page .template-card-actions .icon { width: 13px; height: 13px; }
.template-library-page .template-card-actions .role-readonly-note { white-space: normal; }
.template-library-page .template-card-menu { position: static; margin: 0 0 0 auto; color: var(--muted); }
.template-library-page .template-card-menu > summary { display: grid; place-items: center; list-style: none; width: 32px; height: 32px; padding: 0; border-radius: 7px; color: var(--muted); cursor: pointer; }
.template-library-page .template-card-menu > summary::-webkit-details-marker { display: none; }
.template-library-page .template-card-menu > summary:hover, .template-library-page .template-card-menu[open] > summary { color: var(--ink); background: var(--soft); }
.template-library-page .template-card-menu > summary .icon { width: 18px; height: 18px; }
.template-library-page .template-card-menu > div { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 8; width: 100%; max-width: 280px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 6px 24px #1a244020; font-size: 12px; line-height: 1.6; }
.template-library-page .template-card-menu p { margin: 0; }
.template-library-page .template-card-menu p + p { margin-top: 10px; }
.template-library-page .template-grid.template-list { grid-template-columns: 1fr; gap: 12px; }
.template-library-page .template-list .template-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; padding: 14px; align-items: center; }
.template-library-page .template-list .template-card-preview { aspect-ratio: 1; min-height: 0; border-radius: 8px; }
.template-library-page .template-list .template-card-body { display: grid; grid-template-columns: minmax(0, 1fr) 152px; padding: 0; gap: 8px 24px; align-items: center; }
.template-library-page .template-list .template-card-title, .template-library-page .template-list .template-card-meta, .template-library-page .template-list .template-card-trial { grid-column: 1; }
.template-library-page .template-list .template-card-title { justify-content: flex-start; align-items: center; }
.template-library-page .template-list .template-card-title h3 { flex: 0 1 auto; }
.template-library-page .template-list .template-card-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; width: min(100%, 280px); }
.template-library-page .template-list .template-card-price { grid-column: 1; grid-row: 1; }
.template-library-page .template-list .template-card-meta > .status-badge { grid-column: 2; grid-row: 1; justify-self: start; }
.template-library-page .template-list .template-card-menu { grid-column: 1; grid-row: 2; margin: 0; justify-self: start; }
.template-library-page .template-list .template-card-menu > div { left: 0; right: auto; }

/* Library navigation changes only the area above the existing collections. */
.library-page-heading .compact-page-heading { margin-bottom: 18px; }
.library-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }
.library-toolbar > .configurator-folders { align-items: center; margin: 0; gap: 7px; min-width: 0; }
.library-toolbar > .configurator-folders > button, .library-folder-picker > summary { min-height: 34px; padding: 7px 10px; font-size: 11px; white-space: nowrap; }
.library-toolbar .library-folder-add { width: 34px; padding: 7px; justify-content: center; }
.library-toolbar .asset-folder-tools { margin-left: 0; }
.library-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.library-actions .button.compact { min-height: 34px; }
.library-actions .asset-storage-details { margin-right: 2px; }
.library-toolbar > .configurator-new-folder-form { flex-basis: 100%; align-items: center; gap: 8px; }
.library-toolbar > .configurator-new-folder-form[hidden] { display: none; }
.library-toolbar > .configurator-new-folder-form input { width: min(240px, 60vw); min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.library-folder-picker { position: relative; min-width: 0; }
.library-folder-picker > summary { display: flex; align-items: center; gap: 7px; max-width: 200px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface, #fff); color: var(--ink); list-style: none; cursor: pointer; }
.library-folder-picker > summary::-webkit-details-marker { display: none; }
.library-folder-picker > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-picker > summary .icon { flex-shrink: 0; }
.library-folder-picker[open] > summary { border-color: var(--accent); color: var(--accent); }
.library-folder-options { position: absolute; top: calc(100% + 7px); left: 0; z-index: 30; width: 270px; max-width: calc(100vw - 48px); padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); box-shadow: var(--shadow); }
.library-folder-options > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 8px 10px 8px calc(10px + var(--folder-depth, 0) * 16px); border: 0; text-align: left; color: var(--ink); background: transparent; }
.library-folder-options > button:hover { background: var(--surface-muted, #f4f6fb); }
.library-folder-options > button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-folder-options > button > small { margin-left: auto; color: var(--muted); }
.library-folder-options > p { margin: 7px 10px; color: var(--muted); font-size: 11px; }
@media (max-width: 850px) {
  .library-actions { margin-left: 0; }
  .library-folder-options { left: auto; right: -36px; }
}
@media (max-width: 520px) {
  .library-toolbar { align-items: flex-start; }
  .library-actions { flex-basis: 100%; }
  .library-folder-options { width: 240px; max-width: calc(100vw - 54px); right: -18px; }
}
@media (pointer: coarse) {
  .library-toolbar > .configurator-folders > button, .library-folder-picker > summary, .library-folder-options > button { min-height: 44px; }
}
.template-library-page .template-list .template-card-actions { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; flex-wrap: nowrap; align-self: center; align-items: stretch; margin: 0; max-width: none; }
.template-library-page .template-list .template-card-actions > .button { flex: 0 0 auto; width: 100%; min-height: 38px; padding: 9px 13px; justify-content: center; }
.template-library-page .installed-template-card { grid-template-columns: 88px minmax(0, 1fr) auto; background: var(--surface); border-color: var(--line); gap: 16px; padding: 14px 16px; }
.template-library-page .installed-template-preview { display: grid; place-items: center; width: 88px; height: 88px; background: var(--soft); color: var(--muted); border-radius: 9px; overflow: hidden; }
.template-library-page .installed-template-preview > img { width: 100%; height: 100%; object-fit: contain; }
.template-library-page .installed-template-preview > .icon { width: 30px; height: 30px; }
.template-library-page .installed-template-copy { min-width: 0; }
.template-library-page .installed-template-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.template-library-page .installed-template-heading > strong { font-size: 15px; overflow-wrap: anywhere; }
.template-library-page .installed-template-heading > .mode-badge { display: inline-flex; flex: 0 0 auto; }
.template-library-page .installed-template-copy > span { color: var(--muted); }
.template-library-page .installed-template-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.template-library-page .installed-template-status .status-badge { display: inline-flex; }
.template-library-page .installed-template-status:empty { display: none; }
.template-library-page .installed-template-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 390px; }
.template-library-page .installed-template-actions .button { grid-column: auto; }
@container template-library (max-width: 1000px) {
  .template-library-page .template-grid:not(.template-list) .template-card-actions .icon { display: none; }
}
@container template-library (max-width: 800px) {
  .template-library-page .template-grid:not(.template-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-library-page .template-list .template-card { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .template-library-page .template-list .template-card-body { grid-template-columns: minmax(0, 1fr) 132px; gap: 8px 14px; }
  .template-library-page .installed-template-card { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .template-library-page .installed-template-preview { width: 72px; height: 72px; }
  .template-library-page .installed-template-actions { grid-column: 2; justify-content: flex-start; max-width: none; }
}
@container template-library (max-width: 480px) {
  .template-library-page .template-grid:not(.template-list) { grid-template-columns: minmax(0, 1fr); }
  .template-library-page .template-list .template-card { grid-template-columns: 68px minmax(0, 1fr); padding: 11px; }
  .template-library-page .template-list .template-card-body { grid-template-columns: minmax(0, 1fr); }
  .template-library-page .template-list .template-card-actions { grid-column: 1; grid-row: auto; flex-direction: column; }
  .template-library-page .template-collection .table-search { flex-basis: 100%; max-width: none; }
  .template-library-page .configurator-view-toggle { margin-left: 0; }
  .template-library-page .template-collection .table-filter { max-width: 100%; }
  .template-library-page .template-card-actions { flex-direction: row; }
  .template-library-page .template-card-actions > .button { flex: 1 1 auto; }
  .template-library-page .installed-template-actions { grid-column: 1 / -1; }
  .template-library-page .installed-template-heading { flex-wrap: wrap; gap: 7px; }
}

/* Joined folder controls have a single boundary, with related actions inside. */
.library-folder-group { display: inline-flex; align-items: stretch; min-width: 0; }
.library-folder-group > .library-folder-picker > summary { border-radius: 7px 0 0 7px; }
.library-toolbar .library-folder-group > .library-folder-add { display: inline-flex; align-items: center; border: 1px solid var(--line); border-left: 0; border-radius: 0 7px 7px 0; background: var(--surface, #fff); color: var(--ink); min-height: 34px; }
.library-folder-group:has(.asset-folder-tools) > .library-folder-add { border-radius: 0; }
.library-folder-group > .asset-folder-tools > summary { min-height: 34px; border-left: 0; border-radius: 0 7px 7px 0; margin: 0; box-shadow: none; }
.library-folder-group > .asset-folder-tools { display: inline-flex; }
.library-sort { min-width: 138px; }
.configurator-action-panel[popover] { color: var(--ink); max-width: calc(100vw - 16px); }
.library-toolbar .asset-folder-create { flex-basis: 100%; }
@media (pointer: coarse) { .library-toolbar .library-folder-group > .library-folder-add, .library-folder-group > .asset-folder-tools > summary { min-height: 44px; } }
.asset-export-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.asset-export-dialog::backdrop { background: rgb(16 21 36 / 35%); }
.asset-export-dialog h2 { margin: 0 0 10px; font-size: 23px; }
.asset-export-dialog p { line-height: 1.5; font-size: 13px; color: var(--muted); }
.asset-export-dialog fieldset { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.asset-export-dialog legend { font-size: 12px; font-weight: 600; }
.asset-export-dialog fieldset label { display: flex; align-items: center; gap: 9px; padding: 8px 0; font-size: 13px; }
.asset-export-folders { max-height: 220px; overflow-y: auto; }
.asset-export-dialog label > span { overflow-wrap: anywhere; }
.asset-export-dialog [hidden] { display: none; }
.asset-export-dialog .dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.library-folder-options[popover], .asset-folder-tools > div[popover] { color: var(--ink); background: var(--surface, #fff); }
@media (max-width: 850px) { .library-folder-options { left: 0; right: auto; } }

/* One preparation style across routes and nested Studio panels. */
.collection-loading.collection-loading-compact { min-height:160px; padding:24px 16px; }
.collection-loading-compact h2 { font-size:18px; }
.support-inbox > [data-inbox-initial-loading] { grid-column:1 / -1; }
.support-inbox > [data-inbox-initial-loading][hidden] { display:none; }
.support-inbox.is-initial-loading { display:block; background:transparent; }
.support-inbox.is-initial-loading > :not([data-inbox-initial-loading]) { display:none; }

.collection-error p { max-width:56ch; line-height:1.6; }
.collection-error .button { margin-top:12px; }
.collection-error.collection-error-compact { min-height:160px; padding:24px 16px; }
.collection-error-compact h2 { font-size:18px; }
.template-grid > .collection-error { grid-column:1 / -1; }
.support-inbox.is-initial-error { display:block; background:transparent; }
.support-inbox.is-initial-error > :not([data-inbox-initial-loading]) { display:none; }

.studio-startup.collection-error { background:var(--surface-muted,#f6f7f9); border:0; box-shadow:none; }
.studio-startup.collection-error .form-heading { display:block; width:auto; padding:0; border:0; text-align:center; }

/* BUX: shared by the actual Player and Builder customer preview. Opt-in only. */
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] {
  --bux-ink: var(--builder-brand-text, var(--ink, #242628));
  --bux-action: #242628;
  --bux-line: var(--builder-brand-border, var(--line, #dededb));
  --bux-soft: var(--builder-brand-surface-muted, var(--soft, #f5f5f3));
  --bux-surface: var(--builder-brand-surface, var(--surface, #fff));
  --bux-space: var(--builder-brand-space, var(--configux-space-unit, 4px));
}
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-button { position: relative; min-height: 46px; padding: 12px 14px; border: 1px solid var(--bux-line); border-radius: 9px; background: #fff; color: var(--bux-ink); box-shadow: none; font-weight: 550; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-button[aria-pressed="true"] { border-color: var(--bux-action); background: var(--bux-soft); box-shadow: inset 0 0 0 1px var(--bux-action); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group-label { color: var(--bux-ink); font-weight: 650; font-size: 14px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .summary-card { margin-block: 8px; padding: 16px 0; border: 0; border-top: 1px solid var(--bux-line); background: transparent; border-radius: 0; box-shadow: none; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .summary-card strong { font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -.035em; color: var(--bux-ink); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .player-primary-action,
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .builder-layout-primary-action { background: var(--bux-action); color: #fff; border: 1px solid var(--bux-action); border-radius: var(--builder-brand-radius-medium, var(--configux-radius-medium, 8px)); min-height: 48px; box-shadow: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="rounded"], [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="square"] { padding: 18px; margin: 0 0 16px; border: 1px solid #e5e5e2; background: #fff; min-width: 0; box-shadow: 0 2px 5px rgb(0 0 0 / 2%); }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="rounded"] { border-radius: 16px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface][data-group-surface="square"] { border-radius: 0; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="none"] { border: 0; background: transparent; box-shadow: none; border-radius: 0; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="rounded"] > legend, [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="square"] > legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="rounded"] > legend + *, [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="square"] > legend + * { clear: both; }
[data-customer-accent="brand"] :is(.option-button, .player-primary-action, .builder-layout-primary-action) { --bux-action: var(--builder-brand-accent, var(--accent, #242628)); }
.customer-summary { padding: 16px 0; color: #242628; }
.customer-summary h3 { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.customer-summary dl { margin: 0; display: grid; gap: 4px; }
.customer-summary dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; min-height: 24px; }
.customer-summary dt { color: #626566; font-size: 12px; overflow-wrap: anywhere; }
.customer-summary .customer-summary-section { margin-top: 4px; }
.customer-summary .customer-summary-section dt { color: inherit; font-weight: 600; }
.customer-summary .customer-summary-section-field dt { padding-inline-start: 10px; }
.customer-summary dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; font-size: 12px; text-align: end; overflow-wrap: anywhere; }
.customer-summary dd img { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.customer-summary dd button { padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; width: auto !important; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; line-height: inherit; text-align: end; cursor: pointer; text-decoration: none; }
.customer-summary dd button:hover { text-decoration: underline; text-underline-offset: 3px; }
.customer-summary[data-density="detailed"] dl > div { padding-block: 8px; border-bottom: 1px solid #ebebe8; }
.customer-summary p { font-size: 13px; color: #626566; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .customer-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: start; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--bux-ink, #242628); font: inherit; font-size: 14px; font-weight: 650; box-shadow: none; cursor: pointer; }
.customer-group-toggle::after { content: "⌄"; margin-left: 10px; }
.customer-group-toggle[aria-expanded="true"]::after { content: "⌃"; }
.customer-group-body { clear: both; }
.customer-group-body[hidden] { display: none !important; }
[data-customer-style] .option-grid > [hidden], [data-customer-style] .option-view-all[hidden] { display: none !important; }
.customer-choice-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid #dededb; border-radius: 16px; background: #fff; color: #242628; overflow: auto; }
.customer-choice-dialog::backdrop { background: rgb(0 0 0 / 35%); }
.customer-choice-dialog h2 { margin: 0 70px 20px 0; font-size: 20px; }
.customer-choice-dialog .option-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); max-height: none; overflow: visible; }
.customer-choice-dialog .option-grid > * { display: flex; }
.customer-choice-close { position: absolute; right: 12px; top: 12px; min-width: 60px; min-height: 44px; border: 1px solid #dededb; border-radius: 8px; background: #fff; color: #242628; cursor: pointer; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] :is(button, select, input):focus-visible { outline: 2px solid #242628; outline-offset: 3px; }
@media(max-width: 640px) { [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="rounded"], [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface="square"] { padding: 14px; margin-bottom: 12px; } }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-button:not(.has-media) { display: flex; align-items: center; gap: 8px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--radius-square .option-button { border-radius: 0; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--radius-small .option-button { border-radius: 6px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--radius-medium .option-button { border-radius: 10px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--radius-large .option-button { border-radius: 16px; }
.bux-family-variants details { border: 1px solid #dddeda; border-radius: 8px; padding: 10px; margin: 8px 0; }
.bux-family-variants .is-alternative { background: #f4f4f2; color: #626566; }
.bux-family-variants .is-current { border-color: #242628; }
.bux-file-diff { max-height: 300px; overflow: auto; overflow-wrap: anywhere; padding-left: 18px; }
.bux-family-tools button { margin: 4px 0; }
.bux-family-variants .is-preview-active { border-left: 3px solid #242628; }
.bux-family-variants [data-family-preview-status] { font-size: 11px; font-weight: 400; }
/* Auto Build keeps its verified mapping renderer and uses the neutral customer start. */
.auto-build-configurator-preview[data-customer-style] .auto-build-preview-panel { background: #f5f5f3; padding: 20px; }
.auto-build-configurator-preview[data-customer-style] .auto-build-preview-group { padding: 16px; border: 1px solid #e5e5e2; border-radius: 16px; background: #fff; margin-bottom: 14px; }
.auto-build-configurator-preview[data-customer-style] .auto-build-preview-group button { border: 1px solid #dededb; color: #242628; background: #fff; border-radius: 8px; min-height: 40px; }
.auto-build-configurator-preview[data-customer-style] .auto-build-preview-group button[aria-pressed="true"] { border-color: #242628; box-shadow: inset 0 0 0 1px #242628; background: #f5f5f3; }
.auto-build-configurator-preview[data-customer-style] .auto-build-preview-cta { background: #242628; color: #fff; opacity: .6; }
.auto-build-configurator-preview[data-customer-style] .customer-summary dd { display: block; }
[data-customer-style="soft_neutral_v1"] .option-button .option-label { min-width: 0; overflow-wrap: anywhere; }
/* The preset is a starting point. Normal Brand and per-choice controls still win. */
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-button {
  background: var(--bux-surface); font-weight: var(--builder-brand-body-weight, var(--configux-body-weight, 500));
  padding: calc(var(--bux-space) * 3) calc(var(--bux-space) * 3.5); min-width: 0;
}
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-button[aria-pressed="true"] { background: var(--bux-soft); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] :is(.option-group-label, .customer-summary h3, .summary-card strong) { font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 650)); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface]:not([data-group-surface="none"]) { background: var(--bux-surface); border-color: var(--bux-line); padding: calc(var(--bux-space) * 4); }
[data-customer-style="soft_neutral_v1"] .customer-summary { color: var(--bux-ink); }
[data-customer-style="soft_neutral_v1"] .customer-summary :is(dt, p) { color: var(--builder-brand-text-muted, var(--muted, #626566)); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--radius-brand .option-button { border-radius: var(--builder-brand-radius-medium, var(--configux-radius-medium, 9px)); }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--density-compact .option-button { padding: 8px 10px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--density-spacious .option-button { padding: 18px 20px; }
[data-customer-style="soft_neutral_v1"][data-customer-style][data-customer-style][data-customer-style] .option-group--text-center .option-button { justify-content: center; text-align: center; }
[data-customer-accent="brand"][data-customer-style][data-customer-style][data-customer-style] :is(.player-primary-action, .builder-layout-primary-action) { color: var(--builder-brand-accent-contrast, var(--accent-contrast, #fff)); }
.auto-build-2d-frame { position: relative; width: 100%; height: 100%; min-height: 260px; }
.auto-build-2d-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.auto-build-preview-group[hidden] { display: none; }
.viewer-control-button .player-control-icon { display: block; width: 20px; height: 20px; object-fit: contain; flex: none; }
/* Shared AR surface, inside Studio, standalone Player and direct embeds. */
.configux-ar-dialog { position: fixed; inset: 0; margin: auto; width: min(390px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; border: 1px solid #dde1e7; border-radius: 20px; padding: 28px; color: #20242a; background: #fff; text-align: center; box-shadow: 0 18px 70px #0003; font: 14px/1.5 system-ui, sans-serif; }
.configux-ar-dialog::backdrop { background: #161d2855; backdrop-filter: blur(3px); }
.configux-ar-dialog h2 { margin: 10px 12px 12px; font: 650 22px/1.25 system-ui, sans-serif; color: #20242a; }
.configux-ar-dialog p { margin: 0 0 18px; font: 14px/1.5 system-ui, sans-serif; color: #555f6c; }
.configux-ar-dialog .configux-ar-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; padding: 0; min-height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 25px; color: #555f6c; cursor: pointer; }
.configux-ar-dialog .configux-ar-start { padding: 12px 24px; border: 0; border-radius: 10px; background: #252729; color: #fff; font: 600 15px/1.3 system-ui, sans-serif; cursor: pointer; }
.configux-ar-dialog .configux-ar-start:disabled { opacity: .55; cursor: wait; }
.configux-ar-dialog a { color: #3343b6; font: 14px/1.5 system-ui, sans-serif; }
.configux-ar-qr { max-width: 300px; margin: 0 auto 14px; background: white; }
.configux-ar-qr svg { display: block; width: 100%; height: auto; }
.configux-ar-dialog button:focus-visible, .configux-ar-dialog a:focus-visible { outline: 2px solid #5262ff; outline-offset: 2px; }

/* Shared group content and card hierarchy in Builder and published Player. */
img[data-package-image-pending]:not([data-package-image-placeholder]) { visibility: hidden; }
img[data-package-image-placeholder] { background: #eef0f2; }
.option-group .option-group-description, .option-group .option-group-selection { margin: 0 0 12px; color: #687078; font-size: 14px; line-height: 1.45; font-weight: 400; overflow-wrap: anywhere; }
.option-group .option-group-selection { font-size: 13px; }
.option-group .option-button .option-label { font-weight: 500; font-size: 14px; line-height: 1.35; max-width: 100%; }
.option-group--cards .option-button.has-media { flex-direction: column; align-items: stretch; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--cards .option-button.has-media { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--label-beside .option-button.has-media { flex-direction: row; align-items: center; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-button .option-label { font-weight: 500; font-size: 13px; line-height: 1.35; }
.option-group--media-square .option-media { aspect-ratio: 1; height: auto; max-height: none; }
.option-group--media-portrait .option-media { aspect-ratio: 4 / 5; height: auto; max-height: none; }
.option-group--media-landscape .option-media { aspect-ratio: 4 / 3; height: auto; max-height: none; }
.option-group--media-wide .option-media { aspect-ratio: 16 / 9; height: auto; max-height: none; }
.option-group--cards.option-group--label-auto .option-label { text-align: center; }
/* A tooltip adds one grid wrapper, not a different card layout. Keep copy
   aligned and at its natural height with and without that wrapper. */
.option-group--cards { --choice-copy-align: center; }
.option-group--text-start { --choice-copy-align: start; }
.option-group--text-center { --choice-copy-align: center; }
.option-group--text-end { --choice-copy-align: end; }
.option-group--cards:not(.option-group--label-beside) .option-button { justify-content: flex-start; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--cards:not(.option-group--label-beside) .option-button { justify-content: flex-start; text-align: var(--choice-copy-align, center); }
.option-group--cards:not(.option-group--label-beside) .option-button :is(.option-label, .option-description, .option-dimensions),
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--cards:not(.option-group--label-beside) .option-button :is(.option-label, .option-description, .option-dimensions) { align-self: stretch; flex: 0 0 auto; width: 100%; text-align: var(--choice-copy-align, center); }
.option-cell > .option-button { min-width: 0; box-sizing: border-box; }
.option-tooltip-bubble { overflow-wrap: anywhere; }
.option-tooltip-bubble::after { left: var(--tooltip-arrow-x, 50%); }
.option-group--cards .option-button .option-media { display: block; width: 100%; }
.option-group--media-auto .option-button .option-media { aspect-ratio: 4 / 3; height: auto; max-height: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--media-square .option-media { aspect-ratio: 1; height: auto; max-height: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--media-portrait .option-media { aspect-ratio: 4 / 5; height: auto; max-height: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--media-landscape .option-media { aspect-ratio: 4 / 3; height: auto; max-height: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--media-wide .option-media { aspect-ratio: 16 / 9; height: auto; max-height: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--fit-cover .option-media { object-fit: cover; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--fit-contain .option-media { object-fit: contain; }
.option-group .option-button .option-media-placeholder { display: grid; position: relative; place-content: center; justify-items: center; gap: 6px; min-height: 48px; background: #f3f4f5; color: #858c94; border-radius: 6px; font: 400 12px/1.3 system-ui,sans-serif; }
.option-media-placeholder svg { width: 30px; height: 30px; }
.option-media-placeholder [data-add-option-image] { position: absolute; top: 4px; right: 4px; z-index: 16; box-sizing: border-box; max-width: calc(100% - 8px); padding: 2px 4px; border: 1px solid #e2e5e9; border-radius: 4px; background: #fff; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.option-media-placeholder [data-add-option-image]:hover { color: #4c5acc; text-decoration: underline; }
.option-group--label-beside .option-button.has-media { flex-direction: row; }
.option-group--label-beside .option-button .option-media { width: 42%; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--cards.option-group--text-auto .option-button .option-label { text-align: center; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--text-start .option-button .option-label { text-align: start; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--text-center .option-button .option-label { text-align: center; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--text-end .option-button .option-label { text-align: end; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches .option-button { display: flex; flex-direction: column; align-items: center; justify-content: center; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches .option-swatch { display: block; width: 38px; height: 38px; border: 1px solid #b7bec5; border-radius: 50%; overflow: hidden; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches .option-swatch svg, [data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches .option-swatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.option-button[data-option-hover] { position: relative; overflow: visible; }
.option-hover-caption { display: none; position: absolute; z-index: 15; bottom: 6px; left: 50%; transform: translateX(-50%); box-sizing: border-box; max-width: min(230px, calc(100% - 12px)); width: max-content; padding: 7px 10px; border-radius: 7px; background: #292c30; color: #fff; font: 400 13px/1.4 system-ui,sans-serif; text-align: center; white-space: normal; overflow-wrap: anywhere; pointer-events: auto; box-shadow: 0 3px 10px #0002; }
.option-button:not([data-hover-dismissed]):focus-visible .option-hover-caption { display: block; }
@media (hover:hover) { .option-button:not([data-hover-dismissed]):hover .option-hover-caption { display: block; } }

/* Compact color choices retain a 44px hit target and an accessible name. */
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches.option-group--label-hidden .option-button { width: 44px; min-width: 0; height: 44px; min-height: 44px; padding: 5px; gap: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; box-shadow: none; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches.option-group--label-hidden .option-button[aria-pressed="true"] { border: 2px solid var(--configux-choice-selected-border, #292c30); padding: 4px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--color_swatches.option-group--label-hidden .option-swatch { width: 32px; height: 32px; flex: none; }
.option-group--color_swatches .option-hover-caption { bottom: calc(100% + 5px); max-width: 160px; padding: 6px 9px; }
/* Overlay images use the same bounded footprint in Builder and Player. */
.player-viewer-overlay-anchor > .player-layout-placement:has(.player-content-image),
.builder-overlay-corner > .builder-layout-placement:has(.builder-layout-image) { width: 160px; max-width: 100%; }
.player-viewer-overlay-anchor .player-content-image,
.builder-overlay-corner .builder-layout-image img { max-height: 140px; }
.builder-overlay-corner .builder-layout-image img { width: 100%; }
.player-viewer-overlay-anchor[data-zone-orientation="horizontal"] { flex-direction: row; align-items: flex-start; }

/* Measurements share the same compact layout in Builder and exported Player. */
.builder-player-layout .builder-layout-zone[data-zone-orientation="vertical"]:has(> .builder-layout-placement .buyer-input--measurement):not(:has(.buyer-measurement-group)),
.player--composed .player-layout-zone[data-zone-orientation="vertical"]:has(> .player-layout-placement .buyer-input--measurement, > .player-layout-zone-content > .player-layout-placement .buyer-input--measurement):not(:has(.buyer-measurement-group)) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 12px; row-gap: 16px;
  container-type: inline-size;
}
.builder-player-layout .builder-layout-zone[data-zone-orientation="vertical"]:has(.buyer-input--measurement):not(:has(.buyer-measurement-group)) > .builder-layout-placement,
.player--composed .player-layout-zone[data-zone-orientation="vertical"]:has(.buyer-input--measurement):not(:has(.buyer-measurement-group)) > .player-layout-placement,
.player--composed .player-layout-zone[data-zone-orientation="vertical"]:has(.buyer-input--measurement):not(:has(.buyer-measurement-group)) > .player-layout-zone-content > .player-layout-placement { grid-column: 1 / -1; min-width: 0; }
.builder-player-layout .builder-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .builder-layout-placement:has(.buyer-input--measurement),
.player--composed .player-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .player-layout-placement:has(.buyer-input--measurement),
.player--composed .player-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .player-layout-zone-content > .player-layout-placement:has(.buyer-input--measurement) { grid-column: auto; }
.buyer-measurement-group { display: grid; gap: 4px; min-width: 0; container-type: inline-size; }
:is(.builder-player-layout, .player) .buyer-measurement-group > h3 { margin: 0 0 2px; font-size: calc(14px * var(--customer-type-scale, 1)); line-height: 1.35; font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 650)); }
.buyer-measurement-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; min-width: 0; align-items: start; }
.buyer-measurement-group[data-columns="1"] .buyer-measurement-group-grid { grid-template-columns: minmax(0, 1fr); }
.buyer-measurement-group[data-columns="3"] .buyer-measurement-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buyer-measurement-group[data-columns="4"] .buyer-measurement-group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.buyer-measurement-group-grid > * { min-width: 0; margin: 0; }
@container (max-width: 540px) {
  .buyer-measurement-group[data-columns="3"] .buyer-measurement-group-grid,
  .buyer-measurement-group[data-columns="4"] .buyer-measurement-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 305px) {
  .buyer-measurement-group .buyer-measurement-group-grid { grid-template-columns: minmax(0, 1fr); }
  /* Standalone fields use their own zone width, matching grouped measurements. */
  .builder-player-layout .builder-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .builder-layout-placement:has(.buyer-input--measurement),
  .player--composed .player-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .player-layout-placement:has(.buyer-input--measurement),
  .player--composed .player-layout-zone[data-zone-orientation="vertical"]:not(:has(.buyer-measurement-group)) > .player-layout-zone-content > .player-layout-placement:has(.buyer-input--measurement) { grid-column: 1 / -1; }
}
.buyer-input--measurement { min-width: 0; gap: 6px; }
.buyer-input--measurement > span:first-child { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.buyer-input--measurement input[type="number"] { min-width: 0; width: 100%; min-height: 40px; box-sizing: border-box; }
.buyer-input--measurement input.buyer-measurement-slider { display: block; width: 100%; min-width: 0; height: 16px; min-height: 16px; padding: 0; margin: 0; border: 0; box-shadow: none; accent-color: var(--accent, #5367ff); cursor: pointer; }
.buyer-input--measurement input.buyer-measurement-slider:focus-visible { outline: 2px solid #5367ff; outline-offset: 3px; }
.buyer-measurement-slider[data-unset="true"] { opacity: .45; filter: grayscale(1); }
.buyer-input[hidden] { display: none !important; }
.player-viewer-overlay-anchor > .player-layout-placement:has(> .viewer-control-button) { flex: 0 0 auto; width: auto; }
.builder-overlay-corner > .builder-viewer-control-button { flex: 0 0 40px; width: 40px; height: 40px; pointer-events: auto; }

/* Feedback 8: one customer type scale in Builder, standalone and embeds. */
:is(.builder-player-layout, .player) { --customer-type-scale: var(--builder-brand-text-scale, var(--configux-text-scale, 1)); }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] :is(.option-group-label, .customer-group-toggle) { font-size: calc(14px * var(--customer-type-scale, 1)); line-height: 1.35; font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 650)); }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-button .option-label { font-size: calc(13px * var(--customer-type-scale, 1)); font-weight: var(--builder-brand-body-weight, var(--configux-body-weight, 500)); }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-button { min-height: 40px; padding: 8px 10px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface] { margin-block: 0; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface]:not([data-group-surface="none"]) { padding: calc(var(--bux-space, 4px) * 3); border-radius: 10px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-surface][data-group-surface="square"] { border-radius: 0; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group--density-spacious .option-button { padding: 16px 18px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] :is(.player-primary-action, .builder-layout-primary-action) { min-height: 44px; padding: 10px 14px; font-size: calc(14px * var(--customer-type-scale, 1)); font-weight: 600; }
:is(.builder-player-layout, .player) .customer-summary { padding: 8px 0; }
:is(.builder-player-layout, .player) .customer-summary h3 { margin-bottom: 10px; font-size: calc(15px * var(--customer-type-scale, 1)); }
:is(.builder-player-layout, .player) .customer-summary :is(dt, dd) { font-size: calc(12px * var(--customer-type-scale, 1)); }
:is(.builder-player-layout, .player) .player-content-heading { font-size: calc(18px * var(--customer-type-scale, 1)); line-height: 1.35; }
:is(.builder-player-layout, .player) .buyer-input--measurement { gap: 3px; }
:is(.builder-player-layout, .player) .buyer-input--measurement .buyer-input-note:empty { display: none; }
:is(.builder-player-layout, .player) .buyer-input--measurement .buyer-input-note:not(:empty) { line-height: 1.2; }
:is(.builder-player-layout, .player) .buyer-input--measurement > span:first-child { font-size: calc(12px * var(--customer-type-scale, 1)); font-weight: 600; line-height: 1.35; }
.buyer-input--measurement .measurement-control { display: flex; align-items: center; min-width: 0; width: 100%; border: 1px solid var(--bux-line, #c8d3cc); border-radius: 7px; background: var(--surface, #fff); overflow: hidden; }
.buyer-input--measurement .measurement-control:focus-within { outline: 2px solid var(--accent, #5367ff); outline-offset: 2px; }
.buyer-input--measurement .measurement-control input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
:is(.builder-player-layout, .player) .buyer-input--measurement .measurement-control input[type="number"] { flex: 1 1 auto; min-width: 0; width: 100%; height: 38px; min-height: 38px; margin: 0; padding: 8px 2px 8px 10px; border: 0; border-radius: 0; background: transparent; font-size: calc(13px * var(--customer-type-scale, 1)); font-weight: 400; appearance: textfield; }
.measurement-control input::-webkit-inner-spin-button, .measurement-control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.measurement-control .measurement-stepper { display: grid; flex: 0 0 20px; align-self: stretch; grid-template-rows: repeat(2, minmax(0, 1fr)); border-inline-start: 1px solid var(--bux-line, #c8d3cc); }
.measurement-control .measurement-stepper-button { display: grid; place-items: center; min-width: 20px; min-height: 19px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--builder-brand-text-muted, var(--muted, #687078)); font: inherit; font-size: 9px; line-height: 1; cursor: pointer; }
.measurement-control .measurement-stepper-button + .measurement-stepper-button { border-block-start: 1px solid var(--bux-line, #c8d3cc); }
.measurement-control .measurement-stepper-button:hover { background: rgb(0 0 0 / 6%); }
.measurement-control .measurement-stepper-button:focus-visible { outline: 2px solid var(--accent, #5367ff); outline-offset: -2px; }
.measurement-control .measurement-unit { flex: 0 0 auto; padding: 0 10px 0 5px; pointer-events: none; color: var(--builder-brand-text-muted, var(--muted, #687078)); font-size: calc(11px * var(--customer-type-scale, 1)); font-weight: 400; }
:is(.builder-player-layout, .player) .buyer-input .measurement-limit-hint { font-size: calc(11px * var(--customer-type-scale, 1)); font-weight: 400; }
:is(.builder-player-layout, .player) .buyer-input:has([aria-invalid="true"]) .measurement-limit-hint { color: #a43b36; }
.builder-measurement-heading-edit { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; line-height: inherit; text-align: start; cursor: pointer; }
.builder-measurement-heading-edit:focus-visible { outline: 2px solid var(--accent, #5367ff); outline-offset: 3px; }

/* Price is a semantic element, not a hero heading. All choices are display-only. */
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price.summary-card > div { display: block; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price.summary-card {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 5px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--bux-line, #dededb); border-radius: 0; background: transparent; box-shadow: none; text-align: start;
}
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price strong { font-size: calc(24px * var(--customer-type-scale, 1)); line-height: 1.25; letter-spacing: -.025em; font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 650)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price[data-price-size="small"] strong { font-size: calc(18px * var(--customer-type-scale, 1)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price[data-price-size="large"] strong { font-size: calc(30px * var(--customer-type-scale, 1)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price.is-price-unset strong { font-size: calc(14px * var(--customer-type-scale, 1)); font-weight: 500; letter-spacing: 0; color: var(--builder-brand-text-muted, var(--muted, #687078)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price[data-price-alignment="center"] { text-align: center; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price[data-price-alignment="end"] { text-align: end; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .customer-price[data-price-surface="panel"] { padding: 12px; border: 1px solid var(--bux-line, #dededb); border-radius: var(--builder-brand-radius-medium, var(--configux-radius-medium, 8px)); background: var(--bux-soft, #f5f5f3); }
:is(.builder-player-layout, .player) .customer-price :is(.customer-price-prefix, .customer-price-note) { display: block; color: var(--builder-brand-text-muted, var(--muted, #687078)); font-size: calc(12px * var(--customer-type-scale, 1)); line-height: 1.4; font-weight: 400; }
@media(max-width: 640px) {
  :is(.builder-player-layout, .player) .buyer-input--measurement .measurement-control input { min-height: 44px; font-size: 16px; }
}
[data-builder-device="mobile"] .builder-player-layout .buyer-input--measurement .measurement-control input { min-height: 44px; font-size: 16px; }
:is(.builder-player-layout,.player) .option-description { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; font-weight: 400; color: var(--builder-brand-text-muted, var(--muted, #687078)); }

/* Summary overrides inherit Brand/layout styling until explicitly set. */
.customer-summary[data-text-size="small"] { font-size: .875rem; }
.customer-summary[data-text-size="medium"] { font-size: 1rem; }
.customer-summary[data-text-size="large"] { font-size: 1.125rem; }
.customer-summary[data-spacing="compact"] dl > div { padding-block: .25rem; }
.customer-summary[data-spacing="comfortable"] dl > div { padding-block: .65rem; }
.customer-summary[data-spacing="spacious"] dl > div { padding-block: 1rem; }
.customer-summary[data-alignment="left"] { text-align: left; }
.customer-summary[data-alignment="center"] { text-align: center; }
.customer-summary[data-alignment="right"] { text-align: right; }
.customer-summary[data-alignment="left"] dd { justify-content: flex-start; text-align: left; }
.customer-summary[data-alignment="center"] dd { justify-content: center; text-align: center; }
.customer-summary[data-alignment="right"] dd { justify-content: flex-end; text-align: right; }
.customer-summary[data-value-layout="stacked"] dl > div { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; }
.customer-summary[data-surface="plain"] { background: transparent; border: 0; box-shadow: none; }
.customer-summary[data-surface="panel"] { padding: 1rem; border: 1px solid var(--bux-line, var(--border, #dce1e8)); border-radius: var(--builder-brand-radius-medium, var(--configux-radius-medium, 12px)); background: var(--bux-surface, var(--surface, #fff)); }
.customer-summary dd:has(.customer-summary-option-price) { flex-wrap: wrap; }
.customer-summary-option-price { display: block; flex-basis: 100%; min-width: 0; font-size: .85em; }
.customer-summary-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--bux-line, var(--border, #dce1e8)); margin-top: .75rem; padding-top: .75rem; }
.customer-summary-price-note { display: block; margin-top: .5rem; }

.customer-summary[data-text-size]:not([data-text-size="inherit"]) :is(h3, dt, dd, p) { font-size: inherit; }
.customer-summary[data-alignment]:not([data-alignment="inherit"]) dd button { text-align: inherit; }

/* Dedicated verified product poster never becomes a scene backdrop or blocks controls. */
.configux-product-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; pointer-events: none; }
.configux-product-poster[hidden] { display: none !important; }
[data-custom-viewer-size="true"] > .viewer-frame { height: 100%; min-height: 0; }

/* Explicit card borders are independent of the group frame. Focus rings stay intact. */
.option-group[data-choice-border="custom"] .option-button { border-width:var(--choice-border-width,1px) !important; border-color:var(--choice-border-color,var(--bux-line,var(--line,#dededb))) !important; border-style:solid; }
.option-group[data-choice-selected-border="custom"] .option-button:is([aria-pressed="true"],[aria-checked="true"]) { border-width:var(--choice-selected-border-width,2px) !important; border-color:var(--choice-selected-border-color,var(--bux-action,var(--accent,#242628))) !important; border-style:solid; box-shadow:none !important; }
.option-group[data-choice-selected-border="custom"] .option-button:focus-visible { outline:2px solid var(--builder-brand-focus,var(--accent,#1739B7)); outline-offset:3px; }

/* One shared, compact disclosure header; title, selection and final chevron. */
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .customer-group-toggle {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) 18px; gap: 10px; flex: 1 1 auto; width: auto; min-width: 0;
}
.customer-group-toggle[aria-expanded]::after { content: none; }
.option-group-heading:has(.customer-group-toggle) { display: flex; width: 100%; }
.customer-group-title, .customer-group-toggle .option-group-heading-selection { min-width: 0; white-space: normal; word-break: normal; overflow-wrap: break-word; text-align: start; }
.customer-group-title { grid-column: 1; }
.customer-group-toggle .option-group-heading-selection { grid-column: 2; }
.customer-group-toggle .option-group-heading-selection::before { content: none; }
.customer-group-chevron { grid-column: 3; justify-self: end; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-collapsed="true"] { padding-block: 8px !important; margin-bottom: 8px; }
[data-customer-style][data-customer-style][data-customer-style][data-customer-style] .option-group[data-group-collapsed="true"] > legend { float: none; display: block; width: 100%; margin: 0; }
.option-group[data-group-title-alignment="left"] :is(.option-group-label,.customer-group-title) { text-align: left; }
.option-group[data-group-title-alignment="center"] :is(.option-group-label,.customer-group-title) { text-align: center; }
.option-group[data-group-title-alignment="right"] :is(.option-group-label,.customer-group-title) { text-align: right; }
.option-group[data-group-title-alignment] .option-group-heading:not(:has(.customer-group-toggle)) { display: flex; width: 100%; }
.option-group[data-group-title-alignment="center"] .option-group-heading:not(:has(.customer-group-toggle)) { justify-content: center; }
.option-group[data-group-title-alignment="right"] .option-group-heading:not(:has(.customer-group-toggle)) { justify-content: flex-end; }
.option-group[data-group-supporting-alignment="left"] > :is(.option-group-description,.customer-group-body) .option-group-description,
.option-group[data-group-supporting-alignment="left"] > .option-group-description { text-align: left; }
.option-group[data-group-supporting-alignment="center"] .option-group-description { text-align: center; }
.option-group[data-group-supporting-alignment="right"] .option-group-description { text-align: right; }
.option-label[style*="text-align"], .option-description[style*="text-align"] { width: 100%; }
/* Drawer coordinates belong to the whole configurator, including an embed. */
.player, .builder-player-layout { position: relative; }
.configux-quote-drawer-overlay { position: absolute; inset: 0; z-index: 30; background: rgb(15 23 42 / 28%); container-type: inline-size; }
.configux-quote-drawer-overlay > :is(.builder-quote-preview--left-drawer,.builder-quote-preview--right-drawer,.player-lead-form--left-drawer,.player-lead-form--right-drawer) {
  position: absolute; top: 0; bottom: 0; width: min(420px, 90%); max-height: 100%; margin: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; align-content: start;
  background: var(--builder-brand-surface,var(--surface,#fff)); color: var(--builder-brand-text,var(--ink,#242628)); font-family: var(--builder-brand-font-family,var(--configux-font-family,inherit));
}
.configux-quote-drawer-overlay > :is(.builder-quote-preview--left-drawer,.player-lead-form--left-drawer) { left: 0; right: auto; }
.configux-quote-drawer-overlay > :is(.builder-quote-preview--right-drawer,.player-lead-form--right-drawer) { right: 0; left: auto; }
@container (max-width: 640px) {
  .configux-quote-drawer-overlay > :is(.builder-quote-preview--left-drawer,.builder-quote-preview--right-drawer,.player-lead-form--left-drawer,.player-lead-form--right-drawer) { top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}
@media (max-width: 430px) { .customer-group-toggle .option-group-heading-selection { font-size: 12px; } }

/* Visibility is separate from content, selection and accessible choice names. */
.option-button[data-choice-name-visible="false"] :is(.option-label, .option-dimensions) { display: none !important; }
.option-button[data-choice-name-visible="true"] :is(.option-label, .option-dimensions) { display: block !important; }
.option-group-price[hidden], .option-group-heading-selection[hidden] { display: none !important; }

/* Authored action help is portalled to avoid clipping by a scrolling sidebar. */
.customer-control-tooltip { position: fixed; z-index: 2147483000; max-width: min(320px, calc(100vw - 24px)); box-sizing: border-box; padding: 8px 12px; border-radius: 7px; background: #202326; color: #fff; box-shadow: 0 4px 16px #0002; font: 13px/1.45 system-ui, sans-serif; overflow-wrap: anywhere; pointer-events: none; }

/* Explicit device choices take priority over the legacy compact fallback. */
.buyer-measurement-group[data-measure-surface="rounded"],.buyer-measurement-group[data-measure-surface="square"] { border:1px solid var(--configux-border,#cbd3d0); padding:12px; }
.buyer-measurement-group[data-measure-surface="rounded"] { border-radius:12px; }
.buyer-measurement-group[data-measure-surface="square"] { border-radius:0; }
.measurement-description { margin:0; font-size:.9em; font-weight:400; line-height:1.45; opacity:.8; }
.measurement-slider-value { display:block; font:inherit; font-weight:600; padding:8px 0; }
.measurement-control[hidden] { display:none !important; }
@media (min-width:701px) and (max-width:1100px) {
 .buyer-measurement-group[data-columns-tablet="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-tablet="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-tablet="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-tablet="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:700px) {
 .buyer-measurement-group[data-columns-mobile="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-mobile="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-mobile="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 .buyer-measurement-group[data-columns-mobile="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}

.configurator-builder-v1[data-builder-device="desktop"] .buyer-measurement-group[data-columns="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="desktop"] .buyer-measurement-group[data-columns="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="desktop"] .buyer-measurement-group[data-columns="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="desktop"] .buyer-measurement-group[data-columns="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="tablet"] .buyer-measurement-group[data-columns-tablet="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="tablet"] .buyer-measurement-group[data-columns-tablet="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="tablet"] .buyer-measurement-group[data-columns-tablet="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="tablet"] .buyer-measurement-group[data-columns-tablet="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="mobile"] .buyer-measurement-group[data-columns-mobile="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="mobile"] .buyer-measurement-group[data-columns-mobile="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="mobile"] .buyer-measurement-group[data-columns-mobile="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
.configurator-builder-v1[data-builder-device="mobile"] .buyer-measurement-group[data-columns-mobile="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
@media (min-width:1101px) {
 .buyer-measurement-group[data-measurement-responsive="true"][data-columns="1"] .buyer-measurement-group-grid {grid-template-columns:repeat(1,minmax(0,1fr));}
 .buyer-measurement-group[data-measurement-responsive="true"][data-columns="2"] .buyer-measurement-group-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 .buyer-measurement-group[data-measurement-responsive="true"][data-columns="3"] .buyer-measurement-group-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
 .buyer-measurement-group[data-measurement-responsive="true"][data-columns="4"] .buyer-measurement-group-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}
.buyer-measurement-group > h3 {display:flex;align-items:center;gap:8px;}
.buyer-measurement-group > h3[hidden],.measurement-description[hidden] {display:none!important;}

/* Shared customer controls. Built after the legacy host styles in Studio and Player.
   Explicit card density, media, radius, alignment and brand settings remain authoritative. */
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) {
  --option-ink: var(--builder-brand-text, var(--ink, #24262e));
  --option-muted: var(--builder-brand-text-muted, var(--muted, #717680));
  --option-line: var(--builder-brand-border, var(--line, #dfe2e8));
  --option-surface: var(--builder-brand-surface, var(--surface, #fff));
  --option-accent: var(--builder-brand-accent, var(--accent, #5357f6));
  --option-contrast: var(--builder-brand-accent-contrast, var(--accent-contrast, #fff));
  --option-radius: var(--builder-brand-radius-small, var(--configux-radius-small, 8px));
}
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player)[data-customer-style="soft_neutral_v1"][data-customer-accent="neutral"],
[data-builder-player][data-customer-style="soft_neutral_v1"][data-customer-accent="neutral"] .builder-player-layout { --option-accent: #242628; --option-contrast: #fff; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group legend { align-items: center; line-height: 1.4; margin-bottom: 10px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group-label { font-size: calc(14px * var(--customer-type-scale, 1)); letter-spacing: -.015em; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group-limits { margin: -2px 0 12px; color: var(--option-muted); font-size: calc(11px * var(--customer-type-scale, 1)); line-height: 1.4; font-weight: 400; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group-selection { color: var(--option-muted); font-size: calc(12px * var(--customer-type-scale, 1)); line-height: 1.4; margin: 4px 0 10px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button { position: relative; min-width: 0; color: var(--option-ink); border-color: var(--option-line); background: var(--option-surface); transition: border-color 140ms ease, background 140ms ease; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button:hover { transform: none; border-color: color-mix(in srgb, var(--option-accent) 45%, var(--option-line)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button:is([aria-pressed="true"], [aria-checked="true"]) { border-color: var(--option-accent); background: color-mix(in srgb, var(--option-accent) 5%, var(--option-surface)); box-shadow: inset 0 0 0 1px var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--density-brand .option-button { padding: calc(var(--builder-brand-space, var(--configux-space-unit, 4px)) * 2.5); gap: calc(var(--builder-brand-space, var(--configux-space-unit, 4px)) * 2.5); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button.has-media .option-media { display: block; width: 100%; min-width: 0; border-radius: var(--option-radius); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button .option-label { order: 0; color: var(--option-ink); font-size: calc(13px * var(--customer-type-scale, 1)); line-height: 1.4; letter-spacing: -.01em; font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 600)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-description { font-size: calc(11px * var(--customer-type-scale, 1)); line-height: 1.45; color: var(--option-muted); font-weight: 400; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-copy, :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-copy-labels { gap: 4px; min-width: 0; }
/* Auto gives long mobile copy room; authored column counts stay authoritative. */
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-grid[data-option-mobile-wide="true"] :is(.option-dimensions, .option-price) { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-price { font-size: calc(12px * var(--customer-type-scale, 1)); color: var(--option-ink); font-weight: 550; line-height: 1.4; letter-spacing: -.01em; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-price:is([data-price-status="unknown"], [data-price-status="unavailable"]) { color: var(--option-muted); font-weight: 400; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group-price { margin-inline-start: 8px; padding: 3px 8px; color: var(--option-muted); background: color-mix(in srgb, var(--option-ink) 4%, var(--option-surface)); font-size: calc(11px * var(--customer-type-scale, 1)); font-weight: 500; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button .option-check-mark { top: auto; bottom: 10px; left: auto; right: 10px; width: 17px; height: 17px; border: 0; border-radius: 50%; background: var(--option-accent); color: var(--option-contrast); box-shadow: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button:not([aria-checked="true"]) .option-check-mark { display: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button[aria-checked="true"] .option-check-mark::after { content: ""; width: 7px; height: 4px; border-left: 1.7px solid var(--option-contrast); border-bottom: 1.7px solid var(--option-contrast); transform: translateY(-1px) rotate(-45deg); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--multiple .option-button:not(.option-checkbox-row) .option-copy { padding-inline-end: 24px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--multiple.option-group--color_swatches .option-button .option-copy { padding-inline-end: 0; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--color_swatches .option-button { border-color: transparent; background: transparent; box-shadow: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--color_swatches .option-button:hover { border-color: transparent; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--color_swatches .option-button:is([aria-pressed="true"], [aria-checked="true"]) { border-color: transparent; background: transparent; box-shadow: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--color_swatches .option-button:is([aria-pressed="true"], [aria-checked="true"]) .option-swatch { box-shadow: 0 0 0 2px var(--option-surface), 0 0 0 4px var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--color_swatches .option-check-mark { right: 2px; bottom: 3px; width: 14px; height: 14px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) :is(.option-group--radio_rows, .option-group--checkbox_rows) .option-grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; overflow-x: hidden; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) :is(.option-radio-row, .option-checkbox-row) { width: 100%; min-height: 50px; flex-direction: row; align-items: center; justify-content: start; text-align: start; padding: 12px; gap: 12px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-radio-mark { width: 18px; height: 18px; flex: 0 0 18px; border-color: var(--option-line); background: var(--option-surface); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-radio-row[aria-checked="true"] .option-radio-mark { border-color: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-row .option-check-mark { position: static; display: grid; flex: 0 0 19px; width: 19px; height: 19px; border: 1px solid var(--option-line); border-radius: 6px; background: var(--option-surface); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-row[aria-checked="true"] .option-check-mark { border-color: var(--option-accent); background: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-row .option-copy { padding-inline-end: 0; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-dropdown { box-sizing: border-box; width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); color: var(--option-ink); font: inherit; font-size: calc(13px * var(--customer-type-scale, 1)); }

:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input { min-width: 0; gap: 8px; color: var(--option-ink); font-size: calc(13px * var(--customer-type-scale, 1)); font-weight: 600; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input > span[id$="-label"], :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-caption { font-size: calc(14px * var(--customer-type-scale, 1)); line-height: 1.4; font-weight: var(--builder-brand-heading-weight, var(--configux-heading-weight, 600)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input :is(input:not([type="checkbox"]):not([type="range"]):not([type="file"]), textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); color: var(--option-ink); font: inherit; font-weight: 400; line-height: 1.4; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input textarea { min-height: 96px; resize: vertical; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input input[type="range"] { accent-color: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 46px; padding: 11px 12px; border: 1px solid var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); font-weight: 500; gap: 10px; cursor: pointer; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no > input { grid-column: 1; grid-row: 1; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no > span[id$="-label"] { grid-column: 2; grid-row: 1; font-weight: 500; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no input[type="checkbox"] { appearance: none; position: relative; width: 20px; height: 20px; min-height: 20px; min-width: 20px; padding: 0; margin: 0; border: 1px solid var(--option-line); border-radius: 6px; background: var(--option-surface); box-shadow: none; cursor: pointer; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no input[type="checkbox"]:checked { border-color: var(--option-accent); background: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no:not(.buyer-input--switch) input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 4px; border-left: 2px solid var(--option-contrast); border-bottom: 2px solid var(--option-contrast); transform: rotate(-45deg); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch { grid-template-columns: minmax(0, 1fr) auto; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch > span[id$="-label"] { grid-column: 1; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch > input { grid-column: 2; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch input[type="checkbox"] { width: 40px; min-width: 40px; height: 24px; min-height: 24px; border-radius: 999px; border-color: transparent; background: color-mix(in srgb, var(--option-ink) 22%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch input[type="checkbox"]::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--option-surface); box-shadow: 0 1px 3px #0002; transition: transform 140ms ease; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch input[type="checkbox"]:checked::before { transform: translateX(16px); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no:has(input:checked) { border-color: color-mix(in srgb, var(--option-accent) 40%, var(--option-line)); background: color-mix(in srgb, var(--option-accent) 3%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input .buyer-input-note { font-size: calc(11px * var(--customer-type-scale, 1)); line-height: 1.4; font-weight: 400; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input .buyer-input-note:empty { display: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input :is(input, textarea)[aria-invalid="true"] { border-color: #b84343; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-dropzone { box-sizing: border-box; width: 100%; min-height: 112px; padding: 16px 14px; gap: 6px; border: 1px dashed color-mix(in srgb, var(--option-accent) 45%, var(--option-line)); border-radius: var(--option-radius); background: color-mix(in srgb, var(--option-accent) 3%, var(--option-surface)); color: var(--option-ink); box-shadow: none; font: inherit; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-dropzone:hover:not(:disabled), :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-dropzone--dragover { background: color-mix(in srgb, var(--option-accent) 6%, var(--option-surface)); border-color: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-dropzone strong { font-size: calc(12px * var(--customer-type-scale, 1)); font-weight: 550; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-dropzone small { max-width: 100%; color: var(--option-muted); font-size: calc(10px * var(--customer-type-scale, 1)); font-weight: 400; line-height: 1.5; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-icon { font-size: 20px; line-height: 1; color: var(--option-accent); background: color-mix(in srgb, var(--option-accent) 12%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list:empty { display: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); font-weight: 400; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list img { flex: 0 0 44px; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list :is(button, .buyer-file-action) { width: auto; flex: 0 0 auto; white-space: nowrap; min-width: 44px; min-height: 44px; border: 0; padding: 8px 5px; background: transparent; color: var(--option-muted); border-radius: 6px; font: inherit; font-size: 11px; cursor: pointer; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-list button:hover { color: var(--option-accent); background: color-mix(in srgb, var(--option-accent) 5%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) :is(.option-button, .option-dropdown, .buyer-input input, .buyer-input textarea, .buyer-file-dropzone, .buyer-file-list button):focus-visible { outline: 2px solid var(--option-accent); outline-offset: 3px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) :is(.option-radio-row, .option-checkbox-row):focus-visible { outline-offset: -3px; }
@media (max-width: 640px) {
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input :is(input:not([type="checkbox"]):not([type="range"]):not([type="file"]), textarea, select) { font-size: 16px; }
}
[data-builder-device="mobile"] :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input :is(input:not([type="checkbox"]):not([type="range"]):not([type="file"]), textarea, select) { font-size: 16px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--label-beside .option-button.has-media .option-media { width: 42%; max-width: 112px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--media-square .option-media { height: auto; max-height: none; aspect-ratio: 1 / 1; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--media-portrait .option-media { height: auto; max-height: none; aspect-ratio: 4 / 5; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--media-landscape .option-media { height: auto; max-height: none; aspect-ratio: 4 / 3; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--media-wide .option-media { height: auto; max-height: none; aspect-ratio: 16 / 9; }
/* Native list checkboxes and the shared boolean row keep the full label tappable. */
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-input { appearance: none; position: relative; flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; border: 1px solid var(--option-line); border-radius: 6px; background: var(--option-surface); cursor: pointer; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-input:checked { background: var(--option-accent); border-color: var(--option-accent); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-input:checked::after { content: ""; position: absolute; left: 5px; top: 4px; width: 7px; height: 4px; border-left: 2px solid var(--option-contrast); border-bottom: 2px solid var(--option-contrast); transform: rotate(-45deg); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-checkbox-row:has(input:checked) { border-color: var(--option-accent); background: color-mix(in srgb, var(--option-accent) 5%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--boolean { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; background: transparent; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-boolean-row { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 12px; border: 1px solid var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); box-sizing: border-box; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-boolean-row { order: 0; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--boolean > .buyer-input-note { order: 1; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .measurement-control { min-height: 46px; border-color: var(--option-line); border-radius: var(--option-radius); background: var(--option-surface); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input .measurement-control input { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-boolean-row > span { flex: 1; min-width: 0; font-weight: 500; line-height: 1.4; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-boolean-row > input { order: 0; flex: 0 0 auto; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch .buyer-boolean-row > span { order: 0; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-boolean-state { order: 2; flex: 0 0 20px; font-weight: 400; font-size: 10px; color: var(--option-muted); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input[data-boolean-state="on"] .buyer-boolean-row { border-color: color-mix(in srgb, var(--option-accent) 40%, var(--option-line)); background: color-mix(in srgb, var(--option-accent) 3%, var(--option-surface)); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-preview { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; background: color-mix(in srgb, var(--option-ink) 4%, var(--option-surface)); border-radius: 6px; overflow: hidden; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-type { font-size: 10px; color: var(--option-muted); font-weight: 600; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-details { flex: 1 1 90px; display: grid; min-width: 0; gap: 3px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-name { overflow-wrap: anywhere; font-size: 12px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-size { font-size: 10px; color: var(--option-muted); }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-file-actions { display: flex; flex: 0 0 auto; gap: 2px; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-group--cards .option-button--without-media { min-height: 72px; justify-content: center; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-card-add-image { white-space: nowrap; min-width: max-content; position: absolute; z-index: 2; top: 6px; right: 6px; min-height: 28px; width: auto; padding: 4px 7px; border: 1px solid var(--option-line); border-radius: 6px; background: var(--option-surface); color: var(--option-muted); font-size: 10px; font-weight: 400; cursor: pointer; box-shadow: none; }
:is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-cell.has-image-action .option-button--without-media { padding-top: 34px; }
@media (prefers-reduced-motion: reduce) {
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button, :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--switch input::before { transition: none; }
}
@media (forced-colors: active) {
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) :is(.option-button, .buyer-input--yes_no, .buyer-input input, .option-dropdown, .buyer-file-dropzone) { border-color: CanvasText; forced-color-adjust: auto; }
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-button:is([aria-pressed="true"], [aria-checked="true"]) { outline: 2px solid Highlight; }
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .option-check-mark { background: Highlight; color: HighlightText; forced-color-adjust: auto; }
  :is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player):is(.builder-player-layout, .player) .buyer-input--yes_no input:checked { background: Highlight; border-color: Highlight; }
}

.cx-privacy-dialog label{display:flex;align-items:flex-start;gap:8px;margin:9px 0;line-height:1.4}.cx-privacy-dialog input{flex:none;margin-top:2px;accent-color:#6248ff}
.cx-privacy-button{position:fixed;bottom:6px;left:10px;z-index:60;background:#fff;border:1px solid #dddde6;color:#626274;font:11px system-ui;border-radius:5px;padding:4px 7px;cursor:pointer}
.cx-privacy-dialog{max-width:420px;width:calc(100% - 36px);border:1px solid #dedde8;border-radius:16px;padding:25px;color:#242434;font:14px system-ui;box-shadow:0 12px 70px #2223}
.cx-privacy-dialog::backdrop{background:#15152666}.cx-privacy-dialog h2{margin:0 0 10px;font-size:21px}.cx-privacy-dialog p{line-height:1.5}.cx-privacy-dialog form>div{display:flex;justify-content:flex-end;gap:8px}.cx-privacy-dialog button{border:1px solid #dedde8;border-radius:7px;padding:9px 12px;background:white;cursor:pointer}.cx-privacy-dialog [data-privacy-save]{background:#6248ff;color:white}.cx-privacy-dialog [data-privacy-status]{font-size:12px}