/* v6.9 authenticated merchant studio: extend the public brand into the signed-in product. */
html.portal-merchant:not(.desktop-app):not(.layer-public) {
  --merchant-canvas: #f5f7fb;
  --merchant-card: #ffffff;
  --merchant-ink: #18213b;
  --merchant-navy: #141e3d;
  --merchant-navy-2: #202d55;
  --merchant-coral: #f06f52;
  --merchant-coral-soft: #fff0eb;
  --merchant-cyan: #40bdd4;
  --merchant-cyan-soft: #eaf9fc;
  --merchant-line: #dfe3ed;
  --merchant-muted: #69738d;
  background: var(--merchant-canvas);
}

html.portal-merchant:not(.desktop-app):not(.layer-public) body {
  color: var(--merchant-ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(64,189,212,.09), transparent 22%),
    radial-gradient(circle at 96% 34%, rgba(240,111,82,.07), transparent 24%),
    var(--merchant-canvas) !important;
}

/* Header: the same calm white navigation and decisive coral action as the public site. */
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar {
  border-bottom: 1px solid rgba(31,43,81,.09) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 34px rgba(30,40,72,.045) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar-inner { min-height: 76px; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand-mark {
  border-radius: 12px !important;
  background: var(--merchant-navy) !important;
  box-shadow: 0 8px 22px rgba(20,30,61,.2) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand > span:last-child > span:first-child { color: var(--merchant-ink) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand > span:last-child > span:last-child { color: var(--merchant-muted) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-account-chip,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-quota-chip,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-icon-button {
  border-color: var(--merchant-line) !important;
  color: var(--merchant-navy) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-account-chip > span:first-child { background: var(--merchant-navy) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create {
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--merchant-coral) !important;
  box-shadow: 0 12px 28px rgba(240,111,82,.23) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create:hover { background: #df6045 !important; }

/* Layout and navigation: remove the old purple/green application shell. */
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide {
  width: min(1500px,100%) !important;
  max-width: 1500px !important;
  grid-template-columns: 232px minmax(0,1fr) !important;
  gap: 24px !important;
  padding: 26px 30px 54px !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar {
  height: calc(100vh - 126px) !important;
  top: 98px !important;
  padding: 13px !important;
  border: 1px solid var(--merchant-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 22px 58px rgba(28,40,76,.09) !important;
  backdrop-filter: blur(18px);
}
.web-design-sidebar-create {
  min-height: 50px;
  border-radius: 13px;
  background: var(--merchant-coral) !important;
  box-shadow: 0 12px 28px rgba(240,111,82,.22) !important;
}
.web-design-sidebar-create:hover { background: #df6045 !important; }
.web-design-sidebar nav { gap: 5px; margin-top: 14px; }
.web-design-sidebar nav button {
  position: relative;
  min-height: 58px;
  border: 1px solid transparent;
  color: #64708a !important;
}
.web-design-sidebar nav button:hover { color: var(--merchant-navy) !important; background: #f5f7fb !important; transform: translateX(2px); }
.web-design-sidebar nav button.active {
  color: var(--merchant-navy) !important;
  border-color: #ffd8cc !important;
  background: linear-gradient(90deg,var(--merchant-coral-soft),#fff8f5) !important;
  box-shadow: none !important;
}
.web-design-sidebar nav button.active::before { position: absolute; top: 12px; bottom: 12px; left: -7px; width: 3px; content: ""; border-radius: 99px; background: var(--merchant-coral); }
.web-design-sidebar nav button > .web-nav-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: #278fa2 !important;
  background: var(--merchant-cyan-soft) !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 850;
}
.web-design-sidebar nav button.active > .web-nav-symbol { color: #fff !important; background: var(--merchant-coral) !important; box-shadow: 0 7px 18px rgba(240,111,82,.18) !important; }
.web-design-sidebar nav button small { color: #929aab !important; }
.web-design-sidebar nav button.active small { color: #7b8498 !important; }
.web-design-sidebar-note {
  border: 0 !important;
  border-radius: 14px;
  background: var(--merchant-navy) !important;
}
.web-design-sidebar-note span { color: #7ed8e7 !important; }
.web-design-sidebar-note p { color: rgba(237,241,251,.68) !important; }

/* Main heading and creative brief. */
.web-design-studio { width: min(1180px,100%); }
.web-design-page-heading { margin-bottom: 24px; padding: 12px 4px 2px; }
.web-design-page-heading > div:first-child > span { color: #278fa2 !important; }
.web-design-page-heading h1 { position: relative; color: var(--merchant-navy) !important; }
.web-design-page-heading h1 > span { color: var(--merchant-navy) !important; }
.web-design-page-heading h1::after { display: block; width: 78px; height: 5px; margin-top: 13px; content: ""; border-radius: 99px; background: linear-gradient(90deg,var(--merchant-coral),var(--merchant-cyan)); }
.web-design-page-heading p { color: var(--merchant-muted) !important; }
.web-design-benefits span { color: #5c667e !important; }
.web-design-benefits i { background: var(--merchant-cyan) !important; box-shadow: 0 0 0 4px rgba(64,189,212,.1) !important; }
.web-design-page-promise {
  border-color: #cdebf1 !important;
  background: linear-gradient(145deg,#f5fcfd,#fff) !important;
  box-shadow: 0 12px 32px rgba(28,40,76,.05) !important;
}
.web-design-page-promise > i { color: #208ca0 !important; background: var(--merchant-cyan-soft) !important; }
.web-design-page-promise strong { color: var(--merchant-ink) !important; }
.web-design-page-promise small { color: var(--merchant-muted) !important; }

.web-design-studio .desktop-quick-studio-card {
  padding: 24px !important;
  border: 1px solid var(--merchant-line) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 26px 72px rgba(28,40,76,.09) !important;
}
.web-design-studio .desktop-quick-eyebrow { color: var(--merchant-coral) !important; }
.web-design-studio .desktop-quick-studio-header h3 { color: var(--merchant-ink) !important; }
.web-design-studio .desktop-quick-studio-header p { color: var(--merchant-muted) !important; }
.web-design-studio .desktop-quick-studio-header .bg-ai-blue { background: var(--merchant-navy) !important; }
.web-design-studio .desktop-quick-field input,
.web-design-studio .desktop-quick-field select,
.web-design-studio .quick-design-select-grid select,
.web-design-studio .quick-design-copy-grid input,
.web-design-studio .quick-design-ideas textarea {
  border-color: #d9deea !important;
  color: var(--merchant-ink) !important;
  background: #fbfcfe !important;
}
.web-design-studio .desktop-quick-field input:focus,
.web-design-studio .desktop-quick-field select:focus,
.web-design-studio .quick-design-select-grid select:focus,
.web-design-studio .quick-design-copy-grid input:focus,
.web-design-studio .quick-design-ideas textarea:focus { border-color: rgba(240,111,82,.76) !important; box-shadow: 0 0 0 4px rgba(240,111,82,.08) !important; }
.web-design-studio .desktop-quick-upload-zone {
  min-height: 164px;
  border-color: #bcdfe6 !important;
  background: linear-gradient(145deg,#f4fbfd,#fbfcff) !important;
}
.web-design-studio .desktop-quick-upload-zone:hover { border-color: var(--merchant-cyan) !important; background: #effafd !important; }
.web-design-studio .desktop-quick-upload-zone .upload-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--merchant-cyan);
  font-family: inherit;
  font-size: 21px;
  font-style: normal;
  font-weight: 850;
}
.web-design-studio .quick-design-panel { border-color: #e2e6ef !important; background: #f8f9fc !important; }
.web-design-studio .quick-design-section + .quick-design-section { border-color: #e5e8f0 !important; }
.web-design-studio .quick-design-section-head strong { color: var(--merchant-ink) !important; }
.web-design-studio .quick-design-section-head span { color: var(--merchant-muted) !important; }
.web-design-studio .quick-design-deliverables button { border-color: #dce1ec !important; color: #5f6980 !important; background: #fff !important; }
.web-design-studio .quick-design-deliverables button:hover { border-color: #f3aa98 !important; }
.web-design-studio .quick-design-deliverables button.is-selected {
  border-color: #f29982 !important;
  color: #c65239 !important;
  background: var(--merchant-coral-soft) !important;
  box-shadow: 0 8px 20px rgba(240,111,82,.09) !important;
}
.web-design-studio .quick-design-deliverables button > .quick-deliverable-symbol {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  color: #278fa2;
  background: var(--merchant-cyan-soft);
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
}
.web-design-studio .quick-design-deliverables button.is-selected > .quick-deliverable-symbol { color: #fff; background: var(--merchant-coral) !important; }
.web-design-studio .quick-design-confirmation { border-color: #c9e9ef !important; color: #24788a !important; background: var(--merchant-cyan-soft) !important; }
.web-design-studio .desktop-quick-actions { border-color: #e6e9f0 !important; }
.web-design-studio .desktop-quick-actions .aurora-btn,
.web-preview-generate {
  border: 0 !important;
  background: var(--merchant-coral) !important;
  box-shadow: 0 12px 26px rgba(240,111,82,.22) !important;
}
.web-design-studio .desktop-quick-actions .aurora-btn:hover,
.web-preview-generate:hover { background: #df6045 !important; }

/* Preview board: midnight-indigo production surface with cyan/coral signals. */
.web-quick-preview {
  border-color: rgba(255,255,255,.1) !important;
  background:
    radial-gradient(circle at 88% 6%,rgba(64,189,212,.22),transparent 30%),
    linear-gradient(155deg,var(--merchant-navy-2),var(--merchant-navy) 74%) !important;
  box-shadow: 0 24px 58px rgba(20,30,61,.2) !important;
}
.web-quick-preview::after { display: block; width: 92px; height: 4px; margin: 15px 0 0 auto; content: ""; border-radius: 99px; background: linear-gradient(90deg,var(--merchant-cyan),var(--merchant-coral)); }
.web-quick-preview-head span { color: #9da8c3 !important; }
.web-quick-preview-head em { border-color: rgba(64,189,212,.25) !important; color: #89dfed !important; background: rgba(64,189,212,.1) !important; }
.web-quick-preview-canvas { border-color: rgba(255,255,255,.1) !important; background: linear-gradient(145deg,#202b4e,#192341) !important; }
.web-preview-product { background: linear-gradient(145deg,#fff3ee,#f3ac9b) !important; box-shadow: 0 24px 48px rgba(4,9,24,.35); }
.web-preview-product::before { background: var(--merchant-coral) !important; }
.web-preview-output-list i,
.web-preview-note i { color: #7ed8e7 !important; }
.web-preview-fidelity { color: #d9f5f9 !important; background: rgba(17,29,55,.78) !important; }

/* Supporting signed-in pages inherit the same cards, type and controls. */
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content > section > .glass,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content > section > .grid > .glass,
html.portal-merchant:not(.desktop-app):not(.layer-public) .web-billing-simple,
html.portal-merchant:not(.desktop-app):not(.layer-public) .web-account-card {
  border-color: var(--merchant-line) !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 18px 52px rgba(28,40,76,.07) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .text-ai-blue { color: var(--merchant-navy) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .bg-ai-blue:not(.aurora-btn) { background: var(--merchant-navy) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .border-blue-100 { border-color: var(--merchant-line) !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .bg-blue-50 { background: var(--merchant-cyan-soft) !important; }
.web-account-heading span { color: var(--merchant-coral) !important; }
.web-account-heading h1,
.web-account-card h2,
.web-account-card.quota strong { color: var(--merchant-ink) !important; }
.web-account-heading > button,
.web-account-card button { background: var(--merchant-navy) !important; }
.web-account-avatar { background: var(--merchant-coral) !important; }
.web-account-card.preferences input { accent-color: var(--merchant-coral) !important; }
.web-account-card.help b { color: #c65239 !important; background: var(--merchant-coral-soft) !important; }
.web-billing-balance { border-color: #e1e5ee !important; background: #f8f9fc !important; }

@media (max-width: 1023px) {
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide { padding: 20px 18px 44px !important; }
}
@media (max-width: 700px) {
  html.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar-inner { min-height: 68px; }
  .web-design-page-heading h1::after { height: 4px; margin-top: 10px; }
  .web-design-studio .desktop-quick-studio-card { padding: 16px !important; }
}

/* v6.9.1 full-width production canvas: space and legibility before decoration. */
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: 248px minmax(0,1fr) !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 20px clamp(18px,1.7vw,32px) 48px !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content > section,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workflow-layout-wide,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workflow-primary-panel,
html.portal-merchant:not(.desktop-app):not(.layer-public) .web-design-studio {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin-inline: 0 !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar { width: 248px; }
.web-design-sidebar {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--merchant-ink) !important;
  background: transparent !important;
}
.web-design-sidebar-create { color: #fff !important; }
.web-design-sidebar nav button strong { color: inherit !important; font-size: 13px; }
.web-design-sidebar nav button small { font-size: 10px; line-height: 1.45; }

.web-design-page-heading { align-items: center; margin-bottom: 20px; padding: 8px 2px 0; }
.web-design-page-heading > div:first-child { min-width: 0; }
.web-design-page-heading h1 {
  max-width: 980px;
  margin-top: 8px;
  font-size: clamp(29px,2.25vw,40px) !important;
  font-weight: 780;
  letter-spacing: -.025em;
  line-height: 1.16;
  text-wrap: balance;
}
.web-design-page-heading h1::after { display: none !important; }
.web-design-page-heading p { max-width: 900px; font-size: 13px !important; line-height: 1.65; }
.web-design-benefits span { font-size: 11px; }
.web-design-page-promise { min-width: 240px; flex: 0 0 240px; }

.web-design-studio .desktop-quick-studio-card {
  padding: clamp(20px,1.5vw,28px) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 44px rgba(28,40,76,.07) !important;
}
.web-design-studio .desktop-quick-editor-grid {
  grid-template-columns: minmax(0,1fr) clamp(340px,24vw,410px) !important;
  gap: clamp(20px,1.5vw,28px) !important;
}
.web-design-studio .desktop-quick-studio-header p,
.web-design-studio .desktop-quick-action-hint { color: #5e6981 !important; font-size: 12px !important; line-height: 1.6; }
.web-design-studio .desktop-quick-field > span,
.web-design-studio .quick-design-section-head strong { color: #26304a !important; font-size: 12px !important; }
.web-design-studio .desktop-quick-field > span em,
.web-design-studio .quick-design-section-head span,
.web-design-studio .quick-design-deliverables button small { color: #6f7a91 !important; }
.web-design-studio .desktop-quick-upload-zone { min-height: 142px; }
.web-design-studio .desktop-quick-upload-zone small { color: #657188 !important; font-size: 11px !important; line-height: 1.55; }
.web-design-studio input::placeholder,
.web-design-studio textarea::placeholder { color: #8b95a8 !important; opacity: 1; }
.web-design-studio .quick-design-panel { padding: 18px; }
.web-design-studio .quick-design-deliverables button { min-height: 72px; }

.web-quick-preview { padding: 18px; }
.web-quick-preview-head span { color: #c0c9db !important; font-size: 10px; }
.web-quick-preview-head strong { color: #fff !important; font-size: 14px; }
.web-quick-preview-head em { color: #b6edf4 !important; font-size: 10px; }
.web-quick-preview-placeholder strong { color: #fff !important; font-size: 13px; }
.web-quick-preview-placeholder small { color: #c2cbdd !important; font-size: 10px; }
.web-preview-output-list > p { color: #c0c9db !important; font-size: 10px; }
.web-preview-output-list span { color: #f1f4fa !important; background: rgba(255,255,255,.07) !important; font-size: 10px; }
.web-preview-summary span { color: #c0c9db !important; font-size: 9px; }
.web-preview-summary strong { color: #fff !important; font-size: 13px; }
.web-preview-note { color: #c0c9db !important; font-size: 10px; }
.web-preview-fidelity { color: #effcff !important; font-size: 10px; }

html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .text-ai-muted { color: #5f6a81 !important; }

@media (max-width: 1180px) {
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide { grid-template-columns: 220px minmax(0,1fr) !important; gap: 16px !important; padding-inline: 16px !important; }
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar { width: 220px; }
  .web-design-studio .desktop-quick-editor-grid { grid-template-columns: minmax(0,1fr) 330px !important; gap: 18px !important; }
  .web-design-page-promise { display: none; }
}
@media (max-width: 1023px) {
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide { display: block !important; padding: 18px 16px 42px !important; }
  .web-design-studio .desktop-quick-editor-grid { grid-template-columns: minmax(0,1fr) !important; }
  .web-design-page-heading { align-items: flex-start; }
}
@media (min-width: 1680px) {
  .web-design-studio .desktop-quick-editor-grid { grid-template-columns: minmax(0,1fr) 400px !important; }
}

/* v6.9.2 merchant visual reset: quiet workspace, editorial rail and light proofing board. */
html.portal-merchant:not(.desktop-app):not(.layer-public) {
  --merchant-canvas: #f4f5f1;
  --merchant-card: #fffefa;
  --merchant-ink: #20302b;
  --merchant-navy: #1f4d42;
  --merchant-navy-2: #315f53;
  --merchant-coral: #d87555;
  --merchant-coral-soft: #fbefe9;
  --merchant-cyan: #4f9586;
  --merchant-cyan-soft: #e7f0eb;
  --merchant-line: #dde2dc;
  --merchant-muted: #68756f;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) body {
  background:
    radial-gradient(circle at 82% 4%,rgba(216,177,132,.12),transparent 24%),
    linear-gradient(180deg,#f6f7f4 0,#f2f4ef 100%) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar {
  border-bottom-color: #e3e6e0 !important;
  background: rgba(255,255,252,.94) !important;
  box-shadow: 0 6px 24px rgba(39,59,52,.035) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand-mark,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-account-chip > span:first-child {
  background: #214e43 !important;
  box-shadow: none !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create {
  color: #fff !important;
  background: #214e43 !important;
  box-shadow: 0 8px 20px rgba(33,78,67,.14) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create:hover { background: #173d34 !important; }

html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar {
  padding: 12px !important;
  border: 1px solid #dfe4de !important;
  border-radius: 16px !important;
  background: #f0f3ef !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
.web-design-sidebar-create {
  min-height: 44px;
  border: 0 !important;
  border-radius: 10px;
  color: #fff !important;
  background: #214e43 !important;
  box-shadow: none !important;
}
.web-design-sidebar-create:hover { background: #173d34 !important; }
.web-design-sidebar-create span { font-size: 17px; }
.web-design-sidebar-create strong { font-size: 13px; font-weight: 720; letter-spacing: .01em; }
.web-design-sidebar nav { gap: 3px; margin-top: 16px; }
.web-design-sidebar nav button {
  min-height: 60px;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 10px;
  color: #52635d !important;
  background: transparent !important;
  box-shadow: none !important;
}
.web-design-sidebar nav button:hover {
  color: #203b33 !important;
  background: rgba(255,255,255,.72) !important;
  transform: none;
}
.web-design-sidebar nav button.active {
  color: #183b32 !important;
  border: 0 !important;
  background: #e1ebe5 !important;
  box-shadow: none !important;
}
.web-design-sidebar nav button.active::before {
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  background: #397767;
}
.web-design-sidebar nav button > .web-nav-symbol,
.web-design-sidebar nav button.active > .web-nav-symbol {
  width: 30px;
  height: 30px;
  border-radius: 0;
  color: #75847e !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}
.web-design-sidebar nav button.active > .web-nav-symbol { color: #2f6a5a !important; }
.web-design-sidebar nav button strong {
  color: inherit !important;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -.01em;
}
.web-design-sidebar nav button small,
.web-design-sidebar nav button.active small {
  margin-top: 4px;
  color: #78847f !important;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.45;
}
.web-design-sidebar-note {
  padding: 13px !important;
  border: 1px solid #dbe2dc !important;
  border-radius: 10px;
  background: rgba(255,255,255,.62) !important;
}
.web-design-sidebar-note span { color: #3f7064 !important; font-size: 9px; letter-spacing: .14em; }
.web-design-sidebar-note p { color: #68766f !important; font-size: 10.5px; }

.web-design-page-heading { margin-bottom: 18px; padding: 6px 2px 0; }
.web-design-page-heading > div:first-child > span { color: #497568 !important; letter-spacing: .13em; }
.web-design-page-heading h1,
.web-design-page-heading h1 > span {
  color: #18372f !important;
}
.web-design-page-heading h1 {
  max-width: 820px;
  margin-top: 7px;
  font-size: clamp(28px,2vw,35px) !important;
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.17;
}
.web-design-page-heading p { color: #65736d !important; font-size: 12.5px !important; }
.web-design-benefits span { color: #586a63 !important; font-weight: 600; }
.web-design-benefits i { background: #d87555 !important; box-shadow: none !important; }
.web-design-page-promise {
  border-color: #d8e2dc !important;
  background: rgba(255,255,252,.78) !important;
  box-shadow: none !important;
}
.web-design-page-promise > i { color: #356f60 !important; background: #e4eee8 !important; }

.web-design-studio .desktop-quick-studio-card {
  border-color: #dfe3dc !important;
  background: #fffefa !important;
  box-shadow: 0 12px 34px rgba(39,59,52,.045) !important;
}
.web-design-studio .desktop-quick-eyebrow { color: #b55f45 !important; }
.web-design-studio .desktop-quick-studio-header h3 { color: #20342e !important; font-size: 19px !important; }
.web-design-studio .desktop-quick-studio-header .bg-ai-blue { color: #fff !important; background: #214e43 !important; }
.web-design-studio .desktop-quick-field input,
.web-design-studio .desktop-quick-field select,
.web-design-studio .quick-design-select-grid select,
.web-design-studio .quick-design-copy-grid input,
.web-design-studio .quick-design-ideas textarea {
  border-color: #dce1da !important;
  color: #23342f !important;
  background: #fcfcf9 !important;
}
.web-design-studio .desktop-quick-field input:focus,
.web-design-studio .desktop-quick-field select:focus,
.web-design-studio .quick-design-select-grid select:focus,
.web-design-studio .quick-design-copy-grid input:focus,
.web-design-studio .quick-design-ideas textarea:focus {
  border-color: #5c9284 !important;
  box-shadow: 0 0 0 3px rgba(79,149,134,.1) !important;
}
.web-design-studio .desktop-quick-upload-zone {
  border-color: #b9cec4 !important;
  background: #f5f8f5 !important;
}
.web-design-studio .desktop-quick-upload-zone:hover { border-color: #5d9485 !important; background: #f0f6f2 !important; }
.web-design-studio .desktop-quick-upload-zone .upload-symbol { color: #fff; background: #3f7d6c; }
.web-design-studio .quick-design-panel { border-color: #e0e4dd !important; background: #f7f8f5 !important; }
.web-design-studio .quick-design-deliverables button { border-color: #dce2dc !important; color: #495b55 !important; background: #fffefa !important; }
.web-design-studio .quick-design-deliverables button:hover { border-color: #9ab9ae !important; }
.web-design-studio .quick-design-deliverables button.is-selected {
  border-color: #82aa9d !important;
  color: #255b4e !important;
  background: #eaf2ed !important;
  box-shadow: none !important;
}
.web-design-studio .quick-design-deliverables button > .quick-deliverable-symbol { color: #48796c; background: #e7efea; }
.web-design-studio .quick-design-deliverables button.is-selected > .quick-deliverable-symbol { color: #fff; background: #397767 !important; }
.web-design-studio .quick-design-confirmation { border-color: #d2e1d9 !important; color: #35685b !important; background: #edf4f0 !important; }
.web-design-studio .desktop-quick-actions .aurora-btn,
.web-preview-generate { color: #fff !important; background: #214e43 !important; box-shadow: 0 8px 20px rgba(33,78,67,.14) !important; }
.web-design-studio .desktop-quick-actions .aurora-btn:hover,
.web-preview-generate:hover { background: #173d34 !important; }

.web-quick-preview {
  color: #20342e !important;
  border: 1px solid #d8dfd9 !important;
  background: #edf1ed !important;
  box-shadow: none !important;
}
.web-quick-preview::after { display: none !important; }
.web-quick-preview-head span { color: #718079 !important; }
.web-quick-preview-head strong { color: #20342e !important; }
.web-quick-preview-head em { border-color: #c8dcd3 !important; color: #356f60 !important; background: #dfece5 !important; }
.web-quick-preview-canvas {
  border-color: #d7ded8 !important;
  background: #fffefa !important;
}
.web-quick-preview-canvas::before {
  background-image: linear-gradient(rgba(60,88,78,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,88,78,.045) 1px,transparent 1px) !important;
}
.web-preview-product { background: linear-gradient(145deg,#eadfce,#d9bea4) !important; box-shadow: 0 18px 38px rgba(50,68,61,.14); }
.web-preview-product::before { background: #d87555 !important; }
.web-preview-product i { border-color: rgba(78,93,85,.13); background: rgba(255,255,252,.64); }
.web-quick-preview-placeholder strong { color: #243731 !important; }
.web-quick-preview-placeholder small { color: #738079 !important; }
.web-preview-fidelity { border-color: #d7e1db !important; color: #37695c !important; background: rgba(247,250,247,.92) !important; }
.web-preview-output-list > p { color: #718079 !important; }
.web-preview-output-list span { border-color: #d8dfd9 !important; color: #334b44 !important; background: rgba(255,255,252,.82) !important; }
.web-preview-output-list i,
.web-preview-note i { color: #3f7d6c !important; }
.web-preview-summary > div { border-color: #d8dfd9 !important; background: rgba(255,255,252,.72) !important; }
.web-preview-summary span { color: #748078 !important; }
.web-preview-summary strong { color: #20342e !important; }
.web-preview-note { color: #68766f !important; }

@media (max-width: 1180px) {
  .web-design-sidebar nav button { padding-inline: 8px !important; }
  .web-design-sidebar nav button > .web-nav-symbol { width: 24px; }
}

/* v6.9.3 homepage-aligned merchant system: shared tokens, aligned rail and restrained production surfaces. */
html.portal-merchant:not(.desktop-app):not(.layer-public) {
  --merchant-canvas: var(--brand-paper,#f6f7fb);
  --merchant-card: var(--brand-white,#fff);
  --merchant-ink: var(--brand-ink,#18213b);
  --merchant-navy: var(--brand-navy,#141e3d);
  --merchant-navy-2: var(--brand-navy-2,#202d55);
  --merchant-coral: var(--brand-coral,#f06f52);
  --merchant-coral-soft: var(--brand-coral-soft,#fff0eb);
  --merchant-cyan: var(--brand-cyan,#40bdd4);
  --merchant-cyan-soft: #eaf9fc;
  --merchant-line: var(--brand-line,#dfe3ed);
  --merchant-muted: var(--brand-muted,#69738d);
}
html.portal-merchant:not(.desktop-app):not(.layer-public) body {
  background:
    radial-gradient(circle at 8% 5%,rgba(64,189,212,.07),transparent 21%),
    radial-gradient(circle at 94% 16%,rgba(240,111,82,.065),transparent 23%),
    linear-gradient(180deg,#fbfcff 0,#f3f5fa 100%) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar {
  min-height: 76px;
  border-bottom-color: rgba(31,43,81,.09) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 34px rgba(30,40,72,.045) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand-mark,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-account-chip > span:first-child {
  background: var(--brand-navy,#141e3d) !important;
  box-shadow: 0 8px 22px rgba(20,30,61,.18) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-account-chip,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-quota-chip,
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-icon-button {
  border-color: var(--brand-line,#dfe3ed) !important;
  border-radius: 10px !important;
  color: var(--brand-navy,#141e3d) !important;
  background: rgba(255,255,255,.9) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create {
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--brand-navy,#141e3d) !important;
  box-shadow: 0 12px 26px rgba(20,30,61,.16) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-primary-create:hover { background: #222f58 !important; }

html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide {
  grid-template-columns: 236px minmax(0,1fr) !important;
  gap: clamp(18px,1.45vw,26px) !important;
  padding: 20px clamp(18px,2vw,38px) 48px !important;
  align-items: start !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar {
  position: sticky !important;
  top: 96px !important;
  width: 236px;
  height: calc(100vh - 116px) !important;
  min-height: 560px;
  padding: 12px !important;
  border: 1px solid var(--brand-line,#dfe3ed) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 18px 50px rgba(29,41,78,.07) !important;
  backdrop-filter: blur(16px);
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar::after { display: none !important; }
.web-design-sidebar-create {
  min-height: 46px;
  border-radius: 10px;
  color: #fff !important;
  background: var(--brand-navy,#141e3d) !important;
  box-shadow: 0 10px 22px rgba(20,30,61,.14) !important;
}
.web-design-sidebar-create:hover { background: #222f58 !important; }
.web-design-sidebar-create span { color: #ffb29f; }
.web-design-sidebar-create strong { font-size: 13px; font-weight: 760; }
.web-design-sidebar nav { gap: 4px; margin-top: 16px; }
.web-design-sidebar nav button {
  min-height: 60px;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px;
  color: #5e6880 !important;
  background: transparent !important;
}
.web-design-sidebar nav button:hover {
  color: var(--brand-navy,#141e3d) !important;
  background: #f4f6fb !important;
}
.web-design-sidebar nav button.active {
  color: var(--brand-navy,#141e3d) !important;
  border-color: #e1e5ef !important;
  background: #eef1f8 !important;
  box-shadow: none !important;
}
.web-design-sidebar nav button.active::before {
  top: 16px;
  bottom: 16px;
  left: -1px;
  width: 3px;
  background: var(--brand-coral,#f06f52);
}
.web-design-sidebar nav button > .web-nav-symbol,
.web-design-sidebar nav button.active > .web-nav-symbol {
  width: 30px;
  height: 30px;
  color: #7a849b !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .1em;
}
.web-design-sidebar nav button.active > .web-nav-symbol { color: var(--brand-coral,#f06f52) !important; }
.web-design-sidebar nav button strong { font-size: 13px; font-weight: 760; }
.web-design-sidebar nav button small,
.web-design-sidebar nav button.active small { color: #7b8498 !important; font-size: 10px; line-height: 1.45; }
.web-design-sidebar-note {
  padding: 14px !important;
  border: 1px solid #d8edf1 !important;
  border-radius: 11px;
  background: linear-gradient(145deg,#f1fbfd,#fff) !important;
}
.web-design-sidebar-note span { color: #188ca0 !important; font-size: 9px; font-weight: 820; letter-spacing: .13em; }
.web-design-sidebar-note p { color: #66728a !important; font-size: 10px; line-height: 1.65; }

.web-design-page-heading {
  min-height: 146px;
  align-items: center;
  margin-bottom: 18px;
  padding: 8px 2px 2px;
}
.web-design-page-heading > div:first-child > span { color: var(--brand-coral,#f06f52) !important; letter-spacing: .16em; }
.web-design-page-heading h1,
.web-design-page-heading h1 > span { color: var(--brand-ink,#18213b) !important; }
.web-design-page-heading h1 {
  max-width: 820px;
  margin-top: 8px;
  font-size: clamp(29px,2.1vw,38px) !important;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.12;
}
.web-design-page-heading p { max-width: 820px; color: var(--brand-muted,#69738d) !important; font-size: 12px !important; line-height: 1.7; }
.web-design-benefits { gap: 8px 15px; margin-top: 11px; }
.web-design-benefits span { color: #5d6880 !important; font-size: 10px; font-weight: 680; }
.web-design-benefits i { width: 5px; height: 5px; background: var(--brand-cyan,#40bdd4) !important; box-shadow: 0 0 0 4px rgba(64,189,212,.09) !important; }
.web-design-page-promise {
  min-width: 228px;
  flex-basis: 228px;
  border-color: #dce3ee !important;
  border-radius: 13px;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 12px 30px rgba(29,41,78,.045) !important;
}
.web-design-page-promise > i { color: #198da1 !important; background: #eaf9fc !important; }
.web-design-page-promise strong { color: var(--brand-ink,#18213b) !important; }
.web-design-page-promise small { color: var(--brand-muted,#69738d) !important; }

.web-design-studio .desktop-quick-studio-card {
  padding: clamp(22px,1.6vw,30px) !important;
  border-color: var(--brand-line,#dfe3ed) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 20px 58px rgba(28,40,76,.075) !important;
}
.web-design-studio .desktop-quick-studio-header { padding-bottom: 17px; border-bottom: 1px solid #e8ebf2; }
.web-design-studio .desktop-quick-eyebrow { color: var(--brand-coral,#f06f52) !important; letter-spacing: .12em; }
.web-design-studio .desktop-quick-studio-header h3 { color: var(--brand-ink,#18213b) !important; font-size: 19px !important; font-weight: 780; }
.web-design-studio .desktop-quick-studio-header p { max-width: 720px; color: var(--brand-muted,#69738d) !important; }
.web-design-studio .desktop-quick-studio-header .bg-ai-blue { color: #fff !important; background: var(--brand-navy,#141e3d) !important; }
.web-design-studio .desktop-quick-editor-grid { margin-top: 20px !important; }
.web-design-studio .desktop-quick-field input,
.web-design-studio .desktop-quick-field select,
.web-design-studio .quick-design-select-grid select,
.web-design-studio .quick-design-copy-grid input,
.web-design-studio .quick-design-ideas textarea {
  border-color: #dce1eb !important;
  color: var(--brand-ink,#18213b) !important;
  background: #f9fafc !important;
}
.web-design-studio .desktop-quick-field input:focus,
.web-design-studio .desktop-quick-field select:focus,
.web-design-studio .quick-design-select-grid select:focus,
.web-design-studio .quick-design-copy-grid input:focus,
.web-design-studio .quick-design-ideas textarea:focus {
  border-color: rgba(240,111,82,.72) !important;
  box-shadow: 0 0 0 4px rgba(240,111,82,.08) !important;
}
.web-design-studio .desktop-quick-upload-zone {
  border-color: #bfe1e7 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,#f4fbfd,#fbfcff) !important;
}
.web-design-studio .desktop-quick-upload-zone:hover { border-color: var(--brand-cyan,#40bdd4) !important; background: #effafd !important; }
.web-design-studio .desktop-quick-upload-zone .upload-symbol { color: #fff; background: var(--brand-cyan,#40bdd4); }
.web-design-studio .quick-design-panel { border-color: #e2e6ef !important; border-radius: 14px; background: #f8f9fc !important; }
.web-design-studio .quick-design-section + .quick-design-section { border-color: #e5e8f0 !important; }
.web-design-studio .quick-design-deliverables button { border-color: #dce1ec !important; color: #5d6880 !important; background: #fff !important; }
.web-design-studio .quick-design-deliverables button:hover { border-color: #f3aa98 !important; }
.web-design-studio .quick-design-deliverables button.is-selected {
  border-color: #f1a18e !important;
  color: #c65239 !important;
  background: var(--brand-coral-soft,#fff0eb) !important;
  box-shadow: 0 8px 20px rgba(240,111,82,.07) !important;
}
.web-design-studio .quick-design-deliverables button > .quick-deliverable-symbol { color: #188ca0; background: #eaf9fc; }
.web-design-studio .quick-design-deliverables button.is-selected > .quick-deliverable-symbol { color: #fff; background: var(--brand-coral,#f06f52) !important; }
.web-design-studio .quick-design-confirmation { border-color: #c9e9ef !important; color: #24788a !important; background: #eaf9fc !important; }
.web-design-studio .desktop-quick-actions .aurora-btn,
.web-preview-generate { color: #fff !important; background: var(--brand-navy,#141e3d) !important; box-shadow: 0 12px 26px rgba(20,30,61,.16) !important; }
.web-design-studio .desktop-quick-actions .aurora-btn:hover,
.web-preview-generate:hover { background: #222f58 !important; }

.web-quick-preview {
  padding: 16px;
  color: var(--brand-ink,#18213b) !important;
  border: 1px solid var(--brand-line,#dfe3ed) !important;
  border-radius: 16px;
  background: #f7f8fc !important;
  box-shadow: 0 14px 36px rgba(28,40,76,.065) !important;
}
.web-quick-preview::after { display: none !important; }
.web-quick-preview-head span { color: #7b849b !important; }
.web-quick-preview-head strong { color: var(--brand-ink,#18213b) !important; }
.web-quick-preview-head em { border-color: #c9e9ef !important; color: #188ca0 !important; background: #eaf9fc !important; }
.web-quick-preview-canvas {
  min-height: 258px;
  border-color: rgba(255,255,255,.14) !important;
  border-radius: 14px;
  background: linear-gradient(145deg,var(--brand-navy-2,#202d55),var(--brand-navy,#141e3d)) !important;
}
.web-quick-preview-canvas::before {
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) !important;
}
.web-preview-product { background: linear-gradient(145deg,#fff4ef,#f3ad9b) !important; box-shadow: 0 20px 42px rgba(4,9,24,.26); }
.web-preview-product::before { background: var(--brand-coral,#f06f52) !important; }
.web-quick-preview-placeholder strong { color: #fff !important; }
.web-quick-preview-placeholder small { color: #b9c2d6 !important; }
.web-preview-fidelity { border-color: rgba(255,255,255,.12) !important; color: #d9f5f9 !important; background: rgba(17,29,55,.78) !important; }
.web-preview-output-list > p { color: #778198 !important; }
.web-preview-output-list span { border-color: #dde2ec !important; color: #4f5b74 !important; background: #fff !important; }
.web-preview-output-list i,
.web-preview-note i { color: #188ca0 !important; }
.web-preview-summary > div { border-color: #dfe3ed !important; background: #fff !important; }
.web-preview-summary span { color: #7a849b !important; }
.web-preview-summary strong { color: var(--brand-ink,#18213b) !important; }
.web-preview-note { color: #68738b !important; }

@media (max-width: 1180px) {
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell,
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-shell--workflow-wide { grid-template-columns: 212px minmax(0,1fr) !important; }
  html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar { width: 212px; }
}
@media (max-width: 1023px) {
  .web-design-page-heading { min-height: 0; }
}

/* Keep the dark preference coherent without falling back to the previous purple theme. */
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) body { color: #edf1fb; background: #0f172a !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .app-topbar,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-quick-studio-card,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-content .glass,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .web-account-card { border-color: #293653 !important; background: #151f35 !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .app-brand > span:last-child > span:first-child,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .web-design-page-heading h1,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .web-design-page-heading h1 > span,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-quick-studio-header h3 { color: #f4f6fb !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .quick-design-panel { border-color: #293653 !important; background: #121c30 !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .quick-design-deliverables button,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .desktop-quick-field input,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .quick-design-select-grid select,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .quick-design-copy-grid input,
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .quick-design-ideas textarea { border-color: #34415d !important; color: #edf1fb !important; background: #172239 !important; }

/* v6.9.4: compact, light merchant rail that matches the public brand. */
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar {
  height: auto !important;
  min-height: 0 !important;
  padding: 8px !important;
  border-color: rgba(36,51,86,.11) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 48px rgba(30,42,76,.08) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar {
  min-height: 0 !important;
  padding: 4px !important;
  color: var(--brand-ink,#18213b) !important;
  background: transparent !important;
}
.web-design-sidebar-intro {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px 12px 15px 15px;
}
.web-design-sidebar-intro::before {
  position: absolute;
  top: 15px;
  bottom: 17px;
  left: 0;
  width: 3px;
  content: "";
  border-radius: 99px;
  background: linear-gradient(180deg,var(--brand-coral,#f06f52),var(--brand-cyan,#40bdd4));
}
.web-design-sidebar-intro span {
  color: #188ca0;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .16em;
}
.web-design-sidebar-intro strong {
  color: var(--brand-ink,#18213b);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.web-design-sidebar-intro small { color: #7b8498; font-size: 10px; line-height: 1.45; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-create {
  min-height: 44px;
  margin-top: 2px;
  border: 0 !important;
  border-radius: 12px;
  color: #fff !important;
  background: var(--brand-navy,#141e3d) !important;
  box-shadow: 0 10px 24px rgba(20,30,61,.16) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-create:hover {
  background: #202d55 !important;
  transform: translateY(-1px);
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-create span { color: #ffac97 !important; }
.web-design-sidebar-label {
  margin: 17px 10px 7px;
  color: #929aac;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .14em;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav {
  gap: 3px;
  margin-top: 0;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button {
  min-height: 56px;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  color: #58647c !important;
  background: transparent !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button:hover {
  border-color: #e5e8f0 !important;
  color: var(--brand-ink,#18213b) !important;
  background: #f7f8fb !important;
  transform: translateX(2px);
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active {
  border-color: #f0d8d0 !important;
  color: var(--brand-ink,#18213b) !important;
  background: linear-gradient(105deg,#fff1ec 0%,#fff8f5 72%,#f1fbfd 100%) !important;
  box-shadow: 0 8px 18px rgba(58,43,72,.055) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active::before {
  top: 13px;
  bottom: 13px;
  left: -5px;
  width: 3px;
  background: var(--brand-coral,#f06f52) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button > .web-nav-symbol,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active > .web-nav-symbol {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: #8791a7 !important;
  background: #f2f4f8 !important;
  font-size: 8px;
  letter-spacing: .08em;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active > .web-nav-symbol {
  color: #fff !important;
  background: var(--brand-coral,#f06f52) !important;
  box-shadow: 0 7px 15px rgba(240,111,82,.2) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button strong { color: inherit !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button small,
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active small { color: #7d879c !important; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-note {
  margin-top: 15px !important;
  padding: 14px !important;
  border: 1px solid #d6ebef !important;
  border-radius: 13px;
  background: linear-gradient(145deg,#f0fafc 0%,#fbfdfe 100%) !important;
}
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-note span { color: #187f91 !important; }
.web-design-sidebar-note ol { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.web-design-sidebar-note li { display: flex; align-items: center; gap: 8px; color: #46536c; font-size: 10px; font-style: normal; }
.web-design-sidebar-note li i {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  color: #188ca0;
  background: #e2f5f8;
  font-size: 8px;
  font-style: normal;
  font-weight: 820;
}
.web-design-sidebar-note li em { font-style: normal; }
html.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar-note p {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #dceff2;
  color: #718096 !important;
  line-height: 1.55;
}
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar { background: transparent !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .web-design-sidebar-intro strong { color: #f4f6fb; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button { color: #b9c2d6 !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button:hover { border-color: #34415d !important; color: #fff !important; background: #1a263d !important; }
html.dark.portal-merchant:not(.desktop-app):not(.layer-public) .workspace-sidebar .web-design-sidebar nav button.active { border-color: #5a3a38 !important; color: #fff !important; background: linear-gradient(105deg,#342426,#202b3d) !important; }