/* STUDIO-UI-20260910. User-facing studio theme; legacy behavior stays in app-workspace.js. */
body.studio-ui {
  --studio-green: #19483d;
  --studio-green-hover: #11382e;
  --studio-sage: #e9f0e9;
  --studio-page: #f7f8f5;
  --studio-line: #dfe5df;
  --studio-muted: #69766e;
  --cp-paper: var(--studio-page);
  --cp-surface: #fff;
  --cp-ink: #1d2b25;
  --cp-graphite: #35483e;
  --cp-muted: var(--studio-muted);
  --cp-line: var(--studio-line);
  --cp-olive: var(--studio-green);
  --cp-radius: 12px;
  --ui56-bg: var(--studio-page);
  --ui56-surface: #fff;
  --ui56-purple: var(--studio-green);
  --ui56-indigo: var(--studio-green-hover);
  --ui56-purple-soft: var(--studio-sage);
  --ui56-ink: var(--cp-ink);
  --ui56-muted: var(--studio-muted);
  --ui56-line: var(--studio-line);
  --ui56-gradient: linear-gradient(var(--studio-green), var(--studio-green));
  background: var(--studio-page) !important;
  color: var(--cp-ink);
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px;
  line-height: 1.6;
}
body.studio-ui :focus-visible { outline: 3px solid #528e77 !important; outline-offset: 3px; }
body.studio-ui .button, body.studio-ui button.button {
  min-height: 42px;
  border-radius: 8px !important;
  background: var(--studio-green) !important;
  border: 1px solid var(--studio-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: 0;
}
body.studio-ui .button:hover:not(:disabled) { background: var(--studio-green-hover) !important; transform: none; }
body.studio-ui .button.secondary {
  background: #fff !important;
  color: var(--studio-green) !important;
  border-color: var(--studio-line) !important;
}
body.studio-ui .button.secondary:hover:not(:disabled) { background: var(--studio-sage) !important; }
body.studio-ui .button.danger { background: #fff3f1 !important; color: #a73d34 !important; border-color: #efcdc7 !important; }
body.studio-ui button:disabled, body.studio-ui .button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; box-shadow: none !important; }
body.studio-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-color: var(--studio-line) !important;
  border-radius: 8px !important;
  color: var(--cp-ink);
  background-color: #fff;
  box-shadow: none;
  font-size: 14px;
}
body.studio-ui textarea { line-height: 1.65; }
body.studio-ui input::placeholder, body.studio-ui textarea::placeholder { color: #849087; }
body.studio-ui input[type="file"]::file-selector-button { padding: 9px 14px; margin-right: 12px; border: 0; border-radius: 7px; color: #fff; background: var(--studio-green); box-shadow: none; cursor: pointer; }
body.studio-ui .topbar { background: #fff !important; border-bottom: 1px solid var(--studio-line) !important; box-shadow: none !important; }
body.studio-ui .brand-text-main > span { color: var(--studio-green); letter-spacing: -.04em !important; }
body.studio-ui .brand-text-main small { color: var(--studio-muted) !important; font-size: 9px; letter-spacing: .12em; }
body.studio-ui .brand-logo-brush, body.studio-ui .brand-logo-crescent { stroke: var(--studio-green); }
body.studio-ui .brand-logo-spark { fill: var(--studio-green); }
body.studio-ui .studio-eyebrow { display: block; color: var(--studio-muted); font-size: 10px; font-weight: 500; letter-spacing: .2em; line-height: 1.5; }
body.studio-ui .studio-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--studio-green); text-decoration: none; font-size: 13px; font-weight: 600; }
body.studio-ui .studio-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Shared workspace frame and navigation. */
body.studio-ui.app-route .shell { background: var(--studio-page) !important; }
body.studio-ui.app-route .topbar { padding-inline: 24px !important; }
body.studio-ui.app-route :is(.topbar-balance, .topbar-help, .topbar-bell) { border-radius: 7px !important; background: #fff !important; font-size: 13px; font-weight: 500; padding-inline: 12px !important; }
body.studio-ui.app-route .topbar-avatar { border: 0 !important; border-radius: 50% !important; background: var(--studio-green) !important; }
body.studio-ui.app-route .reference-sidebar { background: #fff !important; padding: 18px 14px 12px !important; border-right: 1px solid var(--studio-line) !important; }
body.studio-ui.app-route .reference-sidebar .sidebar-link { min-height: 39px !important; border: 1px solid transparent !important; border-radius: 7px !important; font-size: 13px; font-weight: 500 !important; color: #526258 !important; gap: 12px; }
body.studio-ui.app-route .reference-sidebar .sidebar-link:hover { color: var(--studio-green) !important; background: #f5f8f4 !important; }
body.studio-ui.app-route .reference-sidebar .sidebar-link[aria-current="page"] { color: var(--studio-green) !important; background: var(--studio-sage) !important; font-weight: 650 !important; }
body.studio-ui .sidebar-icon { width: 20px !important; height: 20px !important; min-width: 20px; flex-shrink: 0; }
body.studio-ui .sidebar-icon svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
body.studio-ui .sidebar-group-label { margin: 16px 10px 5px !important; font-size: 10px; font-weight: 500; color: #8a958d; letter-spacing: .08em; }
body.studio-ui .studio-create-entry { width: 100%; gap: 9px; margin-bottom: 10px; }
body.studio-ui .workspace-version-entry-button { min-height: 42px; border: 1px solid var(--studio-line) !important; background: #f8faf7 !important; border-radius: 8px !important; box-shadow: none !important; }
body.studio-ui .workspace-version-entry-button strong { font-size: 12px; }
body.studio-ui .workspace-version-entry-button small { font-size: 10px; color: var(--studio-muted); }
body.studio-ui.app-route .sidebar-credit-card { background: #f5f8f3 !important; border: 1px solid var(--studio-line) !important; padding: 12px !important; }
body.studio-ui .sidebar-credit-progress { background: #dfe8dd !important; }
body.studio-ui.app-route #appView { padding: 30px 36px 72px !important; background: var(--studio-page) !important; }
body.studio-ui.app-route #appView > section { max-width: 1440px; }
body.studio-ui.app-route :is(.card, .subcard, .workspace-page-active) { background: #fff !important; border-color: var(--studio-line) !important; border-radius: 12px !important; box-shadow: none !important; }
body.studio-ui.app-route .section-title h2, body.studio-ui.app-route #generation .smart-generation-heading h2 { font-size: clamp(24px, 2.4vw, 34px) !important; line-height: 1.35 !important; letter-spacing: -.04em; }
body.studio-ui.app-route .section-title { gap: 14px; }
body.studio-ui.app-route .section-title p { font-size: 13px; line-height: 1.7; color: var(--studio-muted); }
body.studio-ui.app-route :is(.upload-zone, .asset-dropzone, .upload-dropzone, .smart-upload-zone) { border-color: #bdcfc1 !important; background: #f8faf6 !important; box-shadow: none !important; }
body.studio-ui.app-route #generation[data-unified-create-center] :is(.generation-upload-panel, .smart-compose-panel, .smart-result-panel, .smart-generation-form) { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; }
body.studio-ui.app-route #generation :is(.result-preview, .asset-preview, .smart-dropzone) { border-radius: 9px !important; background: #f4f7f2 !important; border-color: #cad7cc !important; }
body.studio-ui.app-route #generation .smart-function-card { border-color: var(--studio-line) !important; border-radius: 8px !important; background: #fff !important; }
body.studio-ui.app-route #generation .smart-function-card.is-active { border-color: var(--studio-green) !important; background: var(--studio-sage) !important; }
body.studio-ui.app-route #template-square { --template-paper: var(--studio-page); --template-surface: #fff; --template-ink: #21372a; --template-muted: var(--studio-muted); --template-line: var(--studio-line); --template-soft: #edf2e9; }
body.studio-ui.app-route #template-square .template-square-hero { padding: 32px !important; }
body.studio-ui.app-route #template-square .template-square-hero h2 { font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.3 !important; }
body.studio-ui.app-route #template-square .template-square-card { background: #fff !important; border-color: var(--studio-line) !important; border-radius: 10px !important; }
body.studio-ui.app-route #template-square .template-square-card-body h3 { font-size: 16px; }
body.studio-ui.app-route :is(.scheme-a-balance-chip, .workspace-persona-home-item) { background: #fff !important; border: 1px solid var(--studio-line) !important; box-shadow: none !important; border-radius: 9px !important; }
body.studio-ui .workspace-persona-home-item b { background: var(--studio-sage) !important; color: var(--studio-green) !important; }

/* Home: an intentional sequence of launch area, tools, inspiration, then guidance. */
body.studio-ui.app-route #schemeAHome { display: flex; flex-direction: column; gap: 28px; }
body.studio-ui.app-route #schemeAHome > * { grid-column: auto !important; grid-row: auto !important; }
body.studio-ui.app-route #schemeAHome .scheme-a-home-header { order: 0; margin: 0; gap: 20px; align-items: center; }
body.studio-ui.app-route .scheme-a-home-header h1 { font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.35 !important; font-weight: 650; letter-spacing: -.04em; margin: 8px 0 4px; }
body.studio-ui.app-route .scheme-a-home-header p { font-size: 12px !important; color: var(--studio-muted) !important; margin: 0; }
body.studio-ui.app-route #workspaceAnnouncement { order: 1; position: static !important; }
body.studio-ui.app-route #schemeAHome .scheme-a-hero-banner {
  position: relative; isolation: isolate; order: 2; overflow: hidden;
  min-height: 280px; padding: 32px !important; display: flex; align-items: center;
  border: 1px solid #e3e5dc !important; border-radius: 12px !important;
  background: #f1eee5 !important; box-shadow: none !important;
}
body.studio-ui .scheme-a-hero-banner > div { position: relative; z-index: 2; width: 58%; }
body.studio-ui .studio-hero-photo { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; object-fit: cover; object-position: center 64%; z-index: -1; mask-image: linear-gradient(to right, transparent, #000 18%); }
body.studio-ui.app-route #schemeAHome .scheme-a-hero-banner h2 { font-family: "STZhongsong", "Songti SC", "SimSun", serif; font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.4 !important; margin: 12px 0; font-weight: 600; letter-spacing: .02em; }
body.studio-ui.app-route .scheme-a-hero-banner .studio-role-goal { color: #3e5548; font-size: 14px; margin: 0 0 4px; }
body.studio-ui.app-route .scheme-a-hero-banner #workspacePersonaPain { max-width: 390px; font-size: 12px; margin: 0 0 20px; }
body.studio-ui .saas-primary-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.studio-ui .saas-primary-actions .button { min-width: 110px !important; padding: 10px 18px !important; }
body.studio-ui .saas-primary-actions .studio-text-link { margin-left: 6px; }
body.studio-ui.app-route #schemeAHome .scheme-a-quick { order: 3; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
body.studio-ui .scheme-a-section-head { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.studio-ui .scheme-a-section-head h2 { font-size: 19px !important; color: var(--cp-ink); font-weight: 650; margin: 0; line-height: 1.5; }
body.studio-ui .scheme-a-section-head > span { font-size: 11px; color: var(--studio-muted); }
body.studio-ui.app-route .mobile-action-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
body.studio-ui.app-route .mobile-action-card { position: relative; min-height: 124px !important; padding: 17px !important; border: 1px solid var(--studio-line) !important; border-radius: 9px !important; background: #fff !important; box-shadow: none !important; text-decoration: none; transition: border-color .15s, background .15s; }
body.studio-ui.app-route .mobile-action-card:hover { border-color: #a8bfae !important; background: #fafcf9 !important; transform: none !important; }
body.studio-ui.app-route .mobile-action-card::after { content: '↗'; position: absolute; top: 17px; right: 17px; color: #779080; font-size: 17px; }
body.studio-ui.app-route .mobile-action-card strong { color: #253a2e; font-size: 14px; font-weight: 600; }
body.studio-ui.app-route .mobile-action-card > span { color: var(--studio-muted); font-size: 11px; }
body.studio-ui.app-route .mobile-action-card .mobile-action-icon { width: 30px !important; height: 30px !important; border-radius: 7px !important; background: var(--studio-sage) !important; color: var(--studio-green) !important; box-shadow: none !important; font-size: 19px; margin-bottom: 9px; }
body.studio-ui.app-route .mobile-action-icon::before, body.studio-ui.app-route .mobile-action-icon::after { filter: brightness(.45) sepia(.7) hue-rotate(80deg); }
body.studio-ui.app-route .mobile-action-icon:has(svg)::before, body.studio-ui.app-route .mobile-action-icon:has(svg)::after { display: none !important; }
body.studio-ui .mobile-action-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
body.studio-ui .studio-inspiration { order: 4; }
body.studio-ui .studio-inspiration .studio-eyebrow { margin-bottom: 5px; font-size: 9px; }
body.studio-ui .studio-inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.studio-ui .studio-inspiration-card { overflow: hidden; border: 1px solid var(--studio-line); background: #fff; border-radius: 10px; color: var(--cp-ink); text-decoration: none; }
body.studio-ui .studio-inspiration-card:hover { border-color: #9fb6a5; }
body.studio-ui .studio-inspiration-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1.55; object-fit: cover; }
body.studio-ui .studio-inspiration-card > span { position: relative; display: grid; gap: 5px; padding: 15px 38px 15px 16px; }
body.studio-ui .studio-inspiration-card strong { font-size: 14px; font-weight: 600; }
body.studio-ui .studio-inspiration-card small { color: var(--studio-muted); font-size: 11px; }
body.studio-ui .studio-inspiration-card b { position: absolute; right: 16px; top: 16px; font-size: 18px; font-weight: 400; }
body.studio-ui.app-route #schemeAHome .workspace-persona-home { order: 5; }
body.studio-ui.app-route #schemeAHome .newcomer-demo { order: 6; border: 1px solid var(--studio-line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important; padding: 24px !important; }
body.studio-ui .newcomer-demo::before { background: var(--studio-green) !important; height: 2px; }
body.studio-ui .newcomer-demo h2 { font-size: 23px !important; line-height: 1.5; }
body.studio-ui .newcomer-demo-prompt { border-left-color: var(--studio-green) !important; background: #f7faf5 !important; }
body.studio-ui .newcomer-demo-kicker b { color: var(--studio-green) !important; background: var(--studio-sage) !important; border-color: #d5e2d7 !important; }
body.studio-ui.app-route #schemeAHome .scheme-a-tip-card { order: 7; min-height: 0; padding: 18px 22px !important; border: 1px solid var(--studio-line) !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; }
body.studio-ui .scheme-a-tip-card a { color: var(--studio-green); }

/* Public landing and authentication share the same studio language. */
body.studio-ui:not(.app-route):not(.auth-route) .landing-v2 { max-width: 1240px; }
body.studio-ui .landing-v2-hero { gap: 48px !important; padding-block: 60px !important; }
body.studio-ui .landing-v2-copy h1 { font-size: clamp(36px, 4.7vw, 64px) !important; line-height: 1.25 !important; letter-spacing: -.04em; }
body.studio-ui .landing-v2-copy h1 span { color: var(--studio-green) !important; }
body.studio-ui .landing-v2-kicker { color: var(--studio-green) !important; background: var(--studio-sage) !important; border-color: #d9e4d8 !important; }
body.studio-ui .landing-v2-copy > p { color: var(--studio-muted) !important; font-size: 15px; line-height: 1.9; }
body.studio-ui .landing-v2-collage { border-radius: 16px !important; background: #edf0e8 !important; box-shadow: none !important; }
body.studio-ui .landing-v2-case-grid article { border: 1px solid var(--studio-line) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden; box-shadow: none !important; }
body.studio-ui .landing-v2-section-head h2 { font-size: 28px !important; }
body.studio-ui.auth-route #authPanel { border: 1px solid var(--studio-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 18px 70px #1c38200a !important; }
body.studio-ui.auth-route .auth-showcase-v2 { background: #eaf0e7 !important; border-color: var(--studio-line) !important; }
body.studio-ui.auth-route .auth-showcase-v2 h1 { color: var(--studio-green) !important; font-size: clamp(30px, 3.5vw, 48px) !important; line-height: 1.4 !important; }

/* Agent layout, task states and mobile navigation retain their established behavior. */
body.studio-ui.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) {
  --agent-page: var(--studio-page); --agent-panel: #fff; --agent-panel-soft: #f4f7f0;
  --agent-text: var(--cp-ink); --agent-muted: var(--studio-muted);
  --agent-accent: var(--studio-green); --agent-accent-dark: var(--studio-green-hover); --agent-accent-soft: var(--studio-sage);
}
body.studio-ui.workspace-ui-next.app-route:has(.agent-workspace:not([hidden])) #appView { padding: 0 !important; }
body.studio-ui.workspace-ui-next .agent-sidebar-new-task { color: #fff !important; background: var(--studio-green) !important; border: 1px solid var(--studio-green) !important; box-shadow: none !important; border-radius: 9px !important; }
body.studio-ui.workspace-ui-next .agent-sidebar-brand a { color: var(--studio-green) !important; }
body.studio-ui.workspace-ui-next .agent-preset-library { border-color: var(--studio-line) !important; background: #f7faf5 !important; box-shadow: none !important; }
body.studio-ui.app-route .feedback-fab { border-color: var(--studio-line) !important; box-shadow: 0 3px 14px #253d2010 !important; border-radius: 12px !important; }
body.studio-ui .customer-service-fab-icon { background: var(--studio-green) !important; box-shadow: none !important; }
body.studio-ui.app-route :is(.customer-service-fab, .feedback-fab) { right: 10px; min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 7px; border-radius: 10px !important; background: #fff; }
body.studio-ui.app-route .customer-service-fab { bottom: 68px; }
body.studio-ui.app-route .feedback-fab { bottom: 16px; }
body.studio-ui.app-route :is(.customer-service-fab, .feedback-fab) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.studio-ui.app-route :is(.customer-service-fab-icon, .feedback-fab img) { width: 28px; height: 28px; border-radius: 7px; }
@media (min-width: 981px) {
  body.studio-ui.app-route .shell { grid-template-columns: 220px minmax(0, 1fr) !important; }
  body.studio-ui.app-route .reference-sidebar { width: 220px !important; }
}
@media (max-width: 1150px) {
  body.studio-ui.app-route #appView { padding-inline: 24px !important; }
  body.studio-ui .workspace-persona-home-controls { gap: 8px; }
  body.studio-ui .scheme-a-balance-chip { min-width: 92px !important; padding: 10px 12px !important; }
}
@media (max-width: 980px) {
  body.studio-ui.app-route .reference-sidebar { display: none !important; }
  body.studio-ui.app-route .shell { grid-template-columns: minmax(0, 1fr) !important; }
  body.studio-ui .scheme-a-hero-banner > div { width: 62%; }
  body.studio-ui .studio-inspiration-grid { gap: 12px; }
}
@media (max-width: 640px) {
  body.studio-ui.app-route .topbar { padding-inline: 14px !important; }
  body.studio-ui.app-route #appView { padding: 86px 16px 110px !important; }
  body.studio-ui.app-route #schemeAHome { gap: 22px; }
  body.studio-ui.app-route #schemeAHome .scheme-a-home-header { flex-direction: column !important; align-items: stretch !important; gap: 12px; }
  body.studio-ui.app-route .scheme-a-home-header h1 { font-size: 28px !important; }
  body.studio-ui .workspace-persona-home-controls { display: flex !important; justify-content: space-between; width: 100%; align-items: end; }
  body.studio-ui .workspace-persona-home-controls .workspace-persona-select { flex: 1; min-width: 0; }
  body.studio-ui .scheme-a-balance-chip strong { font-size: 22px !important; }
  body.studio-ui.app-route #schemeAHome .scheme-a-hero-banner { display: flex !important; min-height: 420px; padding: 22px !important; align-items: flex-start; }
  body.studio-ui .scheme-a-hero-banner > div { width: 100%; }
  body.studio-ui .studio-hero-photo { width: 100%; height: 230px; top: auto; object-position: right center; mask-image: linear-gradient(to bottom, transparent, #000 18%); }
  body.studio-ui.app-route #schemeAHome .scheme-a-hero-banner h2 { font-size: 30px !important; }
  body.studio-ui.app-route .scheme-a-hero-banner #workspacePersonaPain { max-width: 100%; font-size: 12px; }
  body.studio-ui .saas-primary-actions .button { min-width: 98px !important; padding-inline: 12px !important; }
  body.studio-ui .saas-primary-actions .studio-text-link { font-size: 12px; margin-left: 0; }
  body.studio-ui.app-route .mobile-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.studio-ui.app-route #schemeAHome .mobile-action-card { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-column: auto !important; min-height: 126px !important; padding: 15px !important; }
  body.studio-ui.app-route #schemeAHome .mobile-action-card > span { white-space: normal !important; overflow: visible !important; text-overflow: clip; line-height: 1.6; }
  body.studio-ui.app-route #schemeAHome .mobile-action-card .mobile-action-icon { grid-row: auto !important; grid-column: 1 !important; }
  body.studio-ui .studio-inspiration-grid { grid-template-columns: minmax(0, 1fr); }
  body.studio-ui .studio-inspiration-card > img { aspect-ratio: 1.75; }
  body.studio-ui .scheme-a-section-head { align-items: flex-start; }
  body.studio-ui .scheme-a-section-head h2 { font-size: 18px !important; }
  body.studio-ui .scheme-a-section-head > span { text-align: right; max-width: 115px; }
  body.studio-ui .studio-inspiration .scheme-a-section-head .studio-text-link { font-size: 11px; white-space: nowrap; }
  body.studio-ui.app-route #schemeAHome .newcomer-demo { padding: 18px !important; }
  body.studio-ui .newcomer-demo h2 { font-size: 21px !important; }
  body.studio-ui .landing-v2-hero { padding-block: 26px !important; gap: 28px !important; }
  body.studio-ui .landing-v2-copy h1 { font-size: 36px !important; }
  body.studio-ui .landing-v2-section-head h2 { font-size: 23px !important; }
  body.studio-ui.auth-route .auth-showcase-v2 h1 { font-size: 32px !important; }
  body.studio-ui.app-route .section-title h2, body.studio-ui.app-route #generation .smart-generation-heading h2 { font-size: 25px !important; }
  body.studio-ui.app-route #template-square .template-square-hero { padding: 22px 18px !important; }
  body.studio-ui input, body.studio-ui select, body.studio-ui textarea { font-size: 16px !important; }
  body.studio-ui.app-route :is(.customer-service-fab, .feedback-fab) { bottom: 0; right: 0; width: 50%; height: calc(48px + env(safe-area-inset-bottom)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border: 1px solid var(--studio-line); border-bottom: 0; border-radius: 0 !important; background: #fff; box-shadow: none !important; grid-auto-flow: column; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 8px; transform: none !important; }
  body.studio-ui.app-route .customer-service-fab { left: 0; right: auto; }
  body.studio-ui.app-route :is(.customer-service-fab, .feedback-fab) > span:last-child { position: static; width: auto; height: auto; clip-path: none; font-size: 12px; }
  body.studio-ui.app-route .customer-service-panel { bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  body.studio-ui *, body.studio-ui *::before, body.studio-ui *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared image masks keep repeated navigation icons out of the HTML payload. */
body.studio-ui [data-workspace-nav] > .sidebar-icon { position: relative; font-size: 0 !important; }
body.studio-ui [data-workspace-nav] > .sidebar-icon:empty::before, body.studio-ui.app-route .mobile-action-card > .mobile-action-icon:empty::before { content: ""; position: static; display: block !important; width: 20px !important; height: 20px !important; background: currentColor !important; mask-position: center; mask-repeat: no-repeat; mask-size: contain; border: 0 !important; filter: none !important; transform: none !important; }
body.studio-ui.app-route .mobile-action-card > .mobile-action-icon:empty::after { display: none !important; }
body.studio-ui [data-workspace-nav="home"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#home"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m3%2010%209-7%209%207v10H3Z%22%2F%3E%3Cpath%20d%3D%22M9%2020v-7h6v7%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="template-square"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#template-square"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="reference-remix"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#reference-remix"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2213%22%20height%3D%2213%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2019v2h13V8h-2M4%2012l4-4%207%206%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="image-edit"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#image-edit"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%204H4v16h16v-7M9%2015l1-5L19%201l4%204-9%209Z%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="generation"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#generation"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m5%2017%204-4%204%204%203-3%203%203M18%202v6M15%205h6%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="online-batch"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#online-batch"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m12%203%209%205-9%205-9-5ZM3%2012l9%205%209-5M3%2016l9%205%209-5%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="translation"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#translation"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%205h12M9%202v3M5%205c1%205%203%207%208%2010M13%205c-1%205-4%209-10%2012M13%2021l4-10%204%2010M15%2017h4%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="image-audit"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#image-audit"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m12%203%208%203v6c0%204-4%207-8%209-4-2-8-5-8-9V6Z%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="image-slicer"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#image-slicer"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8%207%2013%2013M8%2017%2013%2012M15%209l6-6%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="history"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#history"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%206v10m-4-4%204%204%204-4M7%2019h10%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="brands"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#brands"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m3%203%2010%201%208%208-9%209-8-8Z%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="team"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#team"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2021v-3c0-6%2014-6%2014%200v3M16%204c5%200%205%206%200%206M18%2014c3%200%204%202%204%205%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="profile"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#profile"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-3c0-6%2016-6%2016%200v3%22%2F%3E%3C%2Fsvg%3E"); }
body.studio-ui [data-workspace-nav="cdk"] > .sidebar-icon::before, body.studio-ui .mobile-action-card[href="/app#cdk"] > .mobile-action-icon::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2%2010h20M6%2015h3%22%2F%3E%3C%2Fsvg%3E"); }