/*
 * Ecommerce Visual Generator UI system.
 * Theme blocks own color decisions. Component contracts consume semantic tokens.
 * Template canvas artwork is intentionally outside this file.
 */

:root,
html[data-ui-theme="warm-neutral"] {
  color-scheme: light;
  --ui-font-family: "MiSans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ui-font-size-caption: 10px;
  --ui-font-size-helper: 11px;
  --ui-font-size-label: 12px;
  --ui-font-size-control: 13px;
  --ui-font-size-section: 17px;
  --ui-font-size-dialog-title: 19px;
  --ui-font-weight-regular: 400;
  --ui-font-weight-medium: 500;
  --ui-font-weight-semibold: 650;
  --ui-font-weight-bold: 700;

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;

  --ui-radius-control: 7px;
  --ui-radius-panel: 10px;
  --ui-radius-dialog: 14px;
  --ui-control-height: 36px;

  --ui-color-workspace: #f3f2ef;
  --ui-color-surface: #fdfcfb;
  --ui-color-surface-raised: #ffffff;
  --ui-color-surface-soft: #f3f2ef;
  --ui-color-surface-active: #fff0e8;
  --ui-color-border: #e2e0dc;
  --ui-color-border-strong: #c9c3b9;
  --ui-color-text: #292929;
  --ui-color-text-secondary: #575654;
  --ui-color-text-muted: #6d6b68;
  --ui-color-text-subtle: #98948e;
  --ui-color-accent: #ff6d00;
  --ui-color-accent-hover: #f56200;
  --ui-color-accent-soft: #fff0e8;
  --ui-color-accent-border: #efb59d;
  --ui-color-action-primary: #ff6d00;
  --ui-color-action-primary-hover: #f56200;
  --ui-color-on-accent: #ffffff;
  --ui-color-focus-ring: rgba(200, 79, 36, 0.24);
  --ui-color-overlay: rgba(18, 22, 19, 0.66);
  --ui-color-success: #62866f;
  --ui-color-danger: #c84f43;
  --ui-color-warning: #9a641d;
  --ui-color-warning-soft: #fff5df;
  --ui-color-warning-border: #e7c27b;
  --ui-color-navigation: #232426;
  --ui-color-navigation-hover: #2c2d2f;
  --ui-color-navigation-active: #30251f;
  --ui-color-navigation-border: #3b3c3e;
  --ui-color-on-navigation: #f7f5f0;
  --ui-color-on-navigation-muted: #9fa5a0;
  --ui-color-stage: #2c2d2f;
  --ui-color-canvas-workspace: #e7e7e7;
  --ui-color-canvas-grid: rgba(25, 32, 29, 0.055);
  --ui-color-canvas-board: rgba(255, 255, 255, 0.76);
  --ui-color-canvas-ruler: #d8d4cc;
  --ui-color-status-stable: #6f9a7d;
  --ui-color-status-beta: #7998aa;
  --ui-color-status-draft: #c79455;
  --ui-color-status-planned: #7d8580;
  --ui-shadow-control: 0 5px 14px rgba(200, 79, 36, 0.18);
  --ui-shadow-menu: 0 18px 44px rgba(24, 29, 26, 0.16);
  --ui-shadow-dialog: 0 28px 90px rgba(0, 0, 0, 0.28);
  --ui-shadow-platform: 0 22px 60px rgba(49, 45, 39, 0.14);
  --ui-shadow-platform-soft: 0 10px 28px rgba(49, 45, 39, 0.09);
}

html[data-ui-theme="cool-slate"] {
  --ui-color-on-accent: #ffffff;
  --ui-color-workspace: #edf1f6;
  --ui-color-surface: #f8fafc;
  --ui-color-surface-raised: #ffffff;
  --ui-color-surface-soft: #f1f5f9;
  --ui-color-surface-active: #eaf1ff;
  --ui-color-border: #d8dee8;
  --ui-color-border-strong: #b9c3d1;
  --ui-color-text: #172033;
  --ui-color-text-secondary: #475467;
  --ui-color-text-muted: #667085;
  --ui-color-text-subtle: #8a94a6;
  --ui-color-accent: #2563eb;
  --ui-color-accent-hover: #1d4ed8;
  --ui-color-accent-soft: #eaf1ff;
  --ui-color-accent-border: #9db7f5;
  --ui-color-action-primary: #2563eb;
  --ui-color-action-primary-hover: #1d4ed8;
  --ui-color-focus-ring: rgba(37, 99, 235, 0.22);
  --ui-color-overlay: rgba(15, 23, 42, 0.66);
  --ui-color-success: #3f7d5b;
  --ui-color-danger: #c2413b;
  --ui-color-warning: #9a651f;
  --ui-color-warning-soft: #fff7e6;
  --ui-color-warning-border: #e2bf78;
  --ui-color-navigation: #111827;
  --ui-color-navigation-hover: #1f2937;
  --ui-color-navigation-active: #172554;
  --ui-color-navigation-border: #334155;
  --ui-color-on-navigation: #f8fafc;
  --ui-color-on-navigation-muted: #94a3b8;
  --ui-color-stage: #1e293b;
  --ui-color-canvas-workspace: #e6ebf2;
  --ui-color-canvas-grid: rgba(23, 32, 51, 0.06);
  --ui-color-canvas-board: rgba(255, 255, 255, 0.78);
  --ui-color-canvas-ruler: #cfd6e0;
  --ui-color-status-stable: #5d9b76;
  --ui-color-status-beta: #60a5fa;
  --ui-color-status-draft: #d39a45;
  --ui-color-status-planned: #8491a3;
  --ui-shadow-control: 0 5px 14px rgba(37, 99, 235, 0.18);
  --ui-shadow-menu: 0 18px 44px rgba(15, 23, 42, 0.16);
  --ui-shadow-dialog: 0 28px 90px rgba(15, 23, 42, 0.3);
  --ui-shadow-platform: 0 22px 60px rgba(15, 23, 42, 0.16);
  --ui-shadow-platform-soft: 0 10px 28px rgba(15, 23, 42, 0.1);
}

[data-ui-system="visual-workbench"] {
  font-family: var(--ui-font-family);
}

[data-ui-surface="toolbar"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
}

[data-ui-surface="toolbar"] :is(.toolbar-field > label, .toolbar-action-label) {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-caption);
  font-weight: var(--ui-font-weight-semibold);
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab, .size-chip) {
  min-height: var(--ui-control-height);
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-control);
  box-shadow: none;
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab):hover {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text);
}

[data-ui-surface="toolbar"] :is(select, input, .template-picker-button, .mode-tab):focus-visible {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="toolbar"] .mode-tab.active {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: inset 0 -2px 0 var(--ui-color-accent);
}

[data-ui-surface="toolbar"] .template-picker-meta {
  color: var(--ui-color-text-subtle);
}

[data-ui="button"] {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  font-family: var(--ui-font-family);
  font-size: 13px;
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  transform: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

[data-ui="button"][data-ui-variant="primary"] {
  border-color: var(--ui-color-action-primary);
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
  box-shadow: var(--ui-shadow-control);
}

[data-ui="button"][data-ui-variant="primary"]:hover {
  border-color: var(--ui-color-action-primary-hover);
  background: var(--ui-color-action-primary-hover);
  color: var(--ui-color-on-accent);
  box-shadow: var(--ui-shadow-control);
  transform: none;
}

[data-ui="button"][data-ui-variant="secondary"],
[data-ui="button"][data-ui-variant="icon"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
  box-shadow: none;
}

[data-ui="button"][data-ui-variant="secondary"]:hover,
[data-ui="button"][data-ui-variant="icon"]:hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: none;
  transform: none;
}

[data-ui="button"]:focus-visible,
[data-ui-action="menu-item"]:focus-visible,
[data-ui-action="nav-item"]:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui="button"]:disabled,
[data-ui="button"][aria-disabled="true"] {
  cursor: not-allowed;
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-subtle);
  box-shadow: none;
  opacity: 0.72;
}

[data-ui-surface="menu"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-menu);
}

[data-ui-surface="menu"] .workflow-more-group-title {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-helper);
  font-weight: var(--ui-font-weight-semibold);
}

[data-ui-action="menu-item"] {
  border-color: transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-color-text-secondary);
  box-shadow: none;
  transform: none;
}

[data-ui-action="menu-item"]:hover {
  border-color: transparent;
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
  box-shadow: none;
  transform: none;
}

[data-ui-overlay="dialog"] {
  background: var(--ui-color-overlay);
}

[data-ui-surface="dialog"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-dialog);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-dialog);
}

[data-ui-surface="dialog"] .settings-head,
[data-ui-surface="dialog"] .settings-footer {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
}

[data-ui-surface="dialog"] .settings-head h2 {
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-dialog-title);
  font-weight: var(--ui-font-weight-bold);
}

[data-ui-surface="dialog"] .settings-nav {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
}

[data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-text-secondary);
  box-shadow: none;
}

[data-ui-action="nav-item"]:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--ui-color-border) 55%, transparent);
  color: var(--ui-color-text);
  box-shadow: none;
  transform: none;
}

[data-ui-action="nav-item"].active {
  border-color: transparent;
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-accent-hover);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-color-text) 8%, transparent);
}

[data-ui-surface="dialog"] :is(.settings-content, .settings-card, .settings-template-card) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
}

[data-ui-surface="dialog"] :is(.settings-row, .settings-template-row) {
  border-color: color-mix(in srgb, var(--ui-color-border) 72%, transparent);
}

[data-ui-surface="dialog"] :is(.settings-panel-head h3, .settings-row-copy strong, .settings-template-name) {
  color: var(--ui-color-text);
}

[data-ui-surface="dialog"] :is(.settings-panel-head p, .settings-row-copy small, .settings-folder-name, .settings-template-default) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="dialog"] :is(input, select) {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="dialog"] :is(input, select):focus-visible {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="dialog"] .settings-switch input:checked + span {
  background: var(--ui-color-action-primary);
}

[data-ui-surface="dialog"] .settings-switch input:focus-visible + span {
  outline-color: var(--ui-color-focus-ring);
}

[data-ui-surface="dialog"] input[type="radio"] {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="platform"] {
  background: var(--ui-color-workspace);
  color: var(--ui-color-text);
}

[data-ui-surface="platform-header"],
[data-ui-surface="navigation"],
[data-ui-surface="dialog-header-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="platform-header"] :is(h1, .brand-block h1),
[data-ui-surface="dialog-header-dark"] h2 {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="platform-header"] :is(.brand-eyebrow, .brand-block p),
[data-ui-surface="navigation"] .rail-title {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="platform-header"] :is(.brand-mark),
[data-ui-surface="navigation"] :is(.rail-title__mark, .rail-title strong) {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
}

[data-ui="button"][data-ui-variant="secondary-on-dark"],
[data-ui="button"][data-ui-variant="icon-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui="button"][data-ui-variant="secondary-on-dark"]:hover,
[data-ui="button"][data-ui-variant="icon-on-dark"]:hover {
  border-color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 72%, var(--ui-color-navigation-border));
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 72%, var(--ui-color-on-navigation) 12%);
  color: var(--ui-color-on-navigation);
  transform: none;
}

[data-ui="button"][data-ui-variant="icon-on-dark"] {
  width: var(--ui-control-height);
  padding: 0;
}

[data-ui-surface="navigation"].module-rail:is(.is-expanded, :hover) {
  background: var(--ui-color-navigation-hover);
}

[data-ui-action="module"] {
  border-color: color-mix(in srgb, var(--ui-color-navigation-border) 82%, transparent);
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 78%, var(--ui-color-navigation));
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"]:hover {
  border-color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 58%, var(--ui-color-navigation-border));
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 72%, var(--ui-color-on-navigation) 10%);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"].is-active {
  border-color: color-mix(in srgb, var(--ui-color-accent) 52%, var(--ui-color-navigation-border));
  background: var(--ui-color-navigation-active);
  color: var(--ui-color-on-navigation);
  box-shadow: inset 3px 0 0 var(--ui-color-accent);
}

[data-ui-action="module"] .module-item__icon {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="module"].is-active .module-item__icon {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"] .module-item__name {
  color: var(--ui-color-on-navigation);
}

[data-ui-action="module"] .module-item__status {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="dialog"] .release-dialog__header {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
}

[data-ui-surface="dialog"] :is(.release-summary, .release-section ul) {
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="dialog"] .release-section h4 {
  color: var(--ui-color-text);
}

[data-ui-surface="module-summary"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="module-summary"] :is(p, .module-summary__facts li) {
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="stage"] {
  background-color: var(--ui-color-stage);
  background-image: radial-gradient(color-mix(in srgb, var(--ui-color-on-navigation) 10%, transparent) 0.8px, transparent 0.8px);
}

[data-ui-surface="entry-card"] {
  border-color: var(--ui-color-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform);
}

[data-ui-surface="entry-card"] p {
  color: var(--ui-color-text-secondary);
}

.status-dot--stable { background: var(--ui-color-status-stable); }
.status-dot--beta { background: var(--ui-color-status-beta); }
.status-dot--draft { background: var(--ui-color-status-draft); }
.status-dot--planned { background: var(--ui-color-status-planned); }

[data-ui-surface="poster-editor"] {
  background: var(--ui-color-workspace);
  color: var(--ui-color-text);
}

[data-ui-surface="poster-toolbar"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="poster-toolbar"] .brand-mark {
  border: 1px solid color-mix(in srgb, var(--ui-color-accent) 72%, var(--ui-color-navigation-border));
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-color-on-accent) 24%, transparent);
}

[data-ui-surface="poster-toolbar"] .brand strong {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="poster-toolbar"] .brand span:last-child {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="field-on-dark"],
[data-ui-surface="field-group-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="field-on-dark"] :is(select, .ui-icon) {
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="field-on-dark"] option {
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="toolbar-icon"] {
  border-color: var(--ui-color-navigation-border);
  color: var(--ui-color-on-navigation-muted);
  background: transparent;
}

[data-ui-action="toolbar-icon"]:hover:not(:disabled) {
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="toolbar-icon"]:disabled {
  color: color-mix(in srgb, var(--ui-color-on-navigation-muted) 58%, transparent);
  opacity: 0.62;
}

[data-ui-action="toolbar-icon"]:focus-visible,
[data-ui-action="layer-group"]:focus-visible,
[data-ui-action="layer"]:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="field-group-on-dark"] :is(select, input) {
  border: 1px solid var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="field-group-on-dark"] :is(select, input):focus-visible,
[data-ui-surface="field-on-dark"] select:focus-visible {
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="poster-navigation"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation);
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="poster-navigation"] .sidebar-tabs {
  border-color: var(--ui-color-navigation-border);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"]:hover {
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-surface="poster-navigation"] [data-ui-action="nav-item"].active {
  border-bottom-color: var(--ui-color-accent);
  background: transparent;
  color: var(--ui-color-on-navigation);
  box-shadow: none;
}

[data-ui-surface="search-on-dark"] {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="search-on-dark"] input,
[data-ui-surface="search-on-dark"] input::placeholder {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="search-on-dark"]:focus-within {
  border-color: var(--ui-color-accent);
  outline: 3px solid var(--ui-color-focus-ring);
  outline-offset: 1px;
}

[data-ui-surface="poster-navigation"] :is(.panel-heading, .auto-select-toggle) {
  border-color: var(--ui-color-navigation-border);
  color: var(--ui-color-on-navigation);
  background: transparent;
}

[data-ui-surface="poster-navigation"] .panel-heading button,
[data-ui-surface="poster-navigation"] .image-actions button {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"] {
  border-color: color-mix(in srgb, var(--ui-color-navigation-border) 82%, transparent);
  background: color-mix(in srgb, var(--ui-color-navigation-hover) 74%, var(--ui-color-navigation));
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"]:hover {
  border-color: var(--ui-color-navigation-border);
  background: var(--ui-color-navigation-hover);
  color: var(--ui-color-on-navigation);
}

[data-ui-action="layer-group"] :is(.group-chevron, em) {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-action="layer-group"] em {
  background: color-mix(in srgb, var(--ui-color-on-navigation-muted) 14%, transparent);
}

[data-ui-action="layer"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-on-navigation);
}

[data-ui-action="layer"]:hover {
  background: var(--ui-color-navigation-hover);
}

[data-ui-action="layer"].active {
  border-color: color-mix(in srgb, var(--ui-color-accent) 46%, var(--ui-color-navigation-border));
  background: var(--ui-color-navigation-active);
  color: var(--ui-color-on-navigation);
  box-shadow: inset 3px 0 0 var(--ui-color-accent);
}

[data-ui-action="layer"] :is(.visibility-dot, .layer-actions) {
  color: var(--ui-color-on-navigation-muted);
}

[data-ui-surface="poster-workspace"] {
  background: var(--ui-color-workspace);
}

[data-ui-surface="editor-toolbar"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="editor-toolbar"] :is(span, .zoom-control, .reference-control) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="editor-toolbar"] :is(input[type="range"], input[type="checkbox"]) {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="editor-toolbar"] .zoom-preset,
[data-ui-surface="poster-editor"] .draft-banner button {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="editor-toolbar"] .zoom-preset:hover,
[data-ui-surface="poster-editor"] .draft-banner button:hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
}

[data-ui-surface="poster-editor"] .draft-status {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="poster-editor"] .draft-banner {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning);
}

[data-ui-surface="canvas-workspace"] {
  background-color: var(--ui-color-canvas-workspace);
  background-image:
    radial-gradient(circle at center, color-mix(in srgb, var(--ui-color-surface-raised) 86%, transparent), transparent 42%),
    linear-gradient(90deg, var(--ui-color-canvas-grid) 1px, transparent 1px),
    linear-gradient(var(--ui-color-canvas-grid) 1px, transparent 1px);
}

[data-ui-surface="canvas-workspace"] .stage-board {
  border-color: var(--ui-color-border);
  background: var(--ui-color-canvas-board);
  box-shadow: var(--ui-shadow-platform);
}

[data-ui-surface="canvas-workspace"] :is(.ruler-corner, .ruler) {
  border-color: var(--ui-color-border);
  color: var(--ui-color-text-muted);
}

[data-ui-surface="canvas-workspace"] .ruler-corner {
  background: var(--ui-color-surface-soft);
}

[data-ui-surface="canvas-workspace"] .ruler-top {
  background-color: var(--ui-color-surface-soft);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 23px, var(--ui-color-canvas-ruler) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--ui-color-canvas-ruler) 62%, transparent) 9px 10px);
}

[data-ui-surface="canvas-workspace"] .ruler-left {
  background-color: var(--ui-color-surface-soft);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 23px, var(--ui-color-canvas-ruler) 23px 24px),
    repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in srgb, var(--ui-color-canvas-ruler) 62%, transparent) 9px 10px);
}

[data-ui-surface="inspector"] {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface);
  color: var(--ui-color-text);
  box-shadow: var(--ui-shadow-platform-soft);
}

[data-ui-surface="inspector-content"] :is(.inspector-tabs, .panel-heading, .inspector-section) {
  border-color: var(--ui-color-border);
}

[data-ui-surface="inspector-content"] [data-ui-action="nav-item"] {
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] [data-ui-action="nav-item"].active {
  border-bottom-color: var(--ui-color-accent);
  background: transparent;
  color: var(--ui-color-text);
  box-shadow: none;
}

[data-ui-surface="inspector-content"] :is(.panel-heading, .inspector-section h3) {
  color: var(--ui-color-text);
}

[data-ui-surface="inspector-content"] :is(.field > span, .image-field > span, .toggle-row span, .fit-mode-field span, .mini-field span) {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] :is(.field input, .field textarea, .field select, .fit-mode-field select) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text);
}

[data-ui-surface="inspector-content"] :is(.field input, .field textarea, .field select, .fit-mode-field select):focus {
  border-color: var(--ui-color-accent);
  box-shadow: 0 0 0 3px var(--ui-color-focus-ring);
}

[data-ui-surface="inspector-content"] :is(.toggle-row, .mode-switch) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-soft);
}

[data-ui-surface="inspector-content"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--ui-color-action-primary);
}

[data-ui-surface="inspector-content"] :is(.secondary-action, .image-actions button, .panel-heading button) {
  border-color: var(--ui-color-border);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
}

[data-ui-surface="inspector-content"] :is(.secondary-action, .image-actions button, .panel-heading button):hover {
  border-color: var(--ui-color-accent-border);
  background: var(--ui-color-accent-soft);
  color: var(--ui-color-accent-hover);
}

[data-ui-surface="inspector-content"] .mode-switch button {
  color: var(--ui-color-text-muted);
}

[data-ui-surface="inspector-content"] .mode-switch button.active {
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-accent-hover);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-color-text) 10%, transparent);
}

[data-ui-status="success"] {
  border-color: color-mix(in srgb, var(--ui-color-success) 46%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-color-success) 12%, var(--ui-color-surface-raised));
  color: var(--ui-color-success);
}

[data-ui-status="warning"] {
  border-color: var(--ui-color-warning-border);
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning);
}

[data-ui-status="error"] {
  border-color: color-mix(in srgb, var(--ui-color-danger) 46%, var(--ui-color-border));
  background: color-mix(in srgb, var(--ui-color-danger) 10%, var(--ui-color-surface-raised));
  color: var(--ui-color-danger);
}

@media (prefers-reduced-motion: reduce) {
  [data-ui-system="visual-workbench"] *,
  [data-ui-system="visual-workbench"] *::before,
  [data-ui-system="visual-workbench"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root{font-family:var(--ui-font-family);color:var(--ui-color-text);background:var(--ui-color-workspace);font-synthesis:none;line-height:1.7}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}header{padding:20px max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--ui-color-surface);color:var(--ui-color-text);border-bottom:1px solid var(--ui-color-border)}header a{text-decoration:none;font-size:14px}.brand{font-weight:700}.brand span{font-weight:400;color:var(--ui-color-text-muted);margin-left:18px}main,footer{max-width:1120px;margin:auto;padding:0 24px}section{padding:40px 0;border-bottom:1px solid var(--ui-color-border);scroll-margin-top:20px}.hero{padding:60px 0 34px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;color:#9b5028;margin:0 0 12px}h1{font-size:clamp(30px,4vw,48px);line-height:1.23;letter-spacing:-.03em;margin:0 0 20px;max-width:800px}h2{font-size:24px;line-height:1.4;margin:0 0 18px}h3{font-size:17px;line-height:1.5}.lead{font-size:18px;color:#52605c;max-width:760px}.note{font-size:13px;color:var(--ui-color-text-muted);max-width:820px}.steps{display:flex;gap:40px;padding-left:22px;font-size:14px;margin:28px 0}.platform-nav{display:flex;gap:12px;padding:22px 0 0}.platform-nav a{background:var(--ui-color-surface-soft);padding:7px 17px;border-radius:var(--ui-radius-control);text-decoration:none;font-size:14px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--ui-color-border);border-radius:12px;overflow:hidden;transition:transform .15s,border-color .15s}.card:hover{transform:translateY(-3px);border-color:#b66b3f}.card img{width:100%;height:210px;object-fit:contain;background:#edf0ea;padding:14px}.card div{padding:14px 18px 18px}.card h3{margin:0 0 8px}.card p{font-size:13px;color:var(--ui-color-text-muted);margin:0 0 10px}.card span{font-size:13px;color:#92522c}.breadcrumb{display:flex;gap:10px;font-size:13px;padding-top:28px;color:#68716e}.template-intro{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:44px;align-items:start}.template-preview{width:100%;max-height:370px;object-fit:contain;background:var(--ui-color-surface-soft);padding:12px;border-radius:12px}.size{font-weight:650}.button,button{display:inline-block;border:0;border-radius:8px;background:var(--ui-color-action-primary);color:#fff;padding:11px 18px;font:inherit;font-size:14px;font-weight:650;text-decoration:none;cursor:pointer}.secondary{background:#e8ece6;color:#303d34}.button:hover,button:hover{filter:brightness(.94)}.table-scroll{max-width:100%;overflow:auto;border:1px solid var(--ui-color-border);border-radius:8px}table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;min-width:560px}th{text-align:left;background:var(--ui-color-surface-soft);color:#344139}td,th{padding:12px 14px;border-bottom:1px solid #e1e5e0;vertical-align:top}tr:last-child td{border-bottom:0}td:first-child{font-weight:600}section li{margin-bottom:12px}label{display:block;margin:18px 0 8px;font-weight:600}textarea{display:block;width:100%;padding:18px;font:14px/1.8 system-ui,sans-serif;border:1px solid #b7c1b7;border-radius:8px;resize:vertical;color:#28372c;background:#fff}.actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}#copy-status{font-size:14px;min-height:24px;color:#376b46}a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid #cf8455;outline-offset:4px}footer{padding-top:28px;padding-bottom:32px;font-size:12px;color:#68716e}@media(max-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.template-intro{grid-template-columns:1fr;gap:24px}.template-preview{max-width:300px}.brand span{display:block;margin:0;font-size:12px}.steps{display:block}.steps li{margin-bottom:8px}header{padding:15px 20px}.card img{height:160px}}@media(max-width:440px){.cards{grid-template-columns:1fr}.card{flex-direction:row}.card img{width:115px;height:145px;padding:8px}.card div{padding:12px}.platform-nav{flex-wrap:wrap}main,footer{padding-left:18px;padding-right:18px}}

/* Shared UI primitives. Only explicitly marked tool controls are affected.
   Never mark template artwork or exported canvas content with data-ui. */
:root {
  --ui-button-height: 36px;
  --ui-button-height-compact: 28px;
  --ui-button-font-size: 12px;
  --ui-field-height: 36px;
  --ui-upload-height: 80px;
  --ui-toolbar-height: 60px;
  --ui-panel-padding: 16px;
  --ui-rail-width: 232px;
  --ui-inspector-width: 280px;
}

html [data-ui="button"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ui-button-height);
  min-height: var(--ui-button-height);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-color-surface-raised);
  color: var(--ui-color-text-secondary);
  font: var(--ui-font-weight-medium) var(--ui-button-font-size)/1 var(--ui-font-family);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
html [data-ui="button"]:is(:hover,:active):not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text);
  box-shadow: none;
  transform: none;
}
html [data-ui="button"][data-ui-variant="primary"] {
  border-color: var(--ui-color-action-primary);
  background: var(--ui-color-action-primary);
  color: var(--ui-color-on-accent);
  font-weight: var(--ui-font-weight-semibold);
  box-shadow: none;
}
html [data-ui="button"][data-ui-variant="primary"]:is(:hover,:active):not(:disabled) {
  border-color: var(--ui-color-action-primary-hover);
  background: var(--ui-color-action-primary-hover);
  color: var(--ui-color-on-accent);
}
html [data-ui="button"][data-ui-variant="danger"] {color:var(--ui-color-danger)}
html [data-ui="button"][data-ui-variant="text"] {border-color:transparent;background:transparent}
html [data-ui="button"][data-ui-variant="icon"] {width:var(--ui-button-height);padding:0;flex-shrink:0}
html [data-ui="button"][data-ui-size="compact"] {height:var(--ui-button-height-compact);min-height:var(--ui-button-height-compact);padding:0 8px}
html [data-ui="button"][data-ui-size="compact"][data-ui-variant="icon"] {width:var(--ui-button-height-compact);padding:0}
html [data-ui="button"]:is([aria-pressed="true"],[aria-expanded="true"]):not([data-ui-variant="primary"]) {
  background:var(--ui-color-accent-soft);border-color:var(--ui-color-accent-border);color:var(--ui-color-action-primary);
}
html [data-ui="button"]:is(:disabled,[aria-disabled="true"]) {
  background:var(--ui-color-surface-soft);border-color:var(--ui-color-border);color:var(--ui-color-text-subtle);
  opacity:1;cursor:not-allowed;box-shadow:none;
}
html [data-ui="button"]:focus-visible, [data-ui="upload"]:focus-within {
  outline:2px solid var(--ui-color-action-primary);outline-offset:2px;
}
html [data-ui="button"][aria-busy="true"] {cursor:progress}
html [data-ui][hidden] {display:none}
html [data-ui="button"] > svg {width:16px;height:16px;flex-shrink:0}

html [data-ui="field"],
html [data-ui-fields] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),select,textarea) {
  box-sizing:border-box;min-height:var(--ui-field-height);border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-control);
  background:var(--ui-color-surface-raised);color:var(--ui-color-text);font:400 13px/1.5 var(--ui-font-family);padding:7px 10px;box-shadow:none;
}
html [data-ui-fields] input[type="color"] {width:40px;padding:4px}
html [data-ui-fields] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),select),
html [data-ui="field"]:not(textarea) {height:var(--ui-field-height)}
html [data-ui-fields] :is(input,select,textarea):focus-visible,html [data-ui="field"]:focus-visible {
  outline:2px solid var(--ui-color-action-primary);outline-offset:1px;border-color:var(--ui-color-action-primary);
}
html [data-ui-fields] :is(input,select,textarea):disabled {background:var(--ui-color-surface-soft);color:var(--ui-color-text-subtle);cursor:not-allowed}
html [data-ui-fields] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) {accent-color:var(--ui-color-action-primary)}
html [data-ui="upload"] {
  box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-upload-height);padding:16px;
  border:1px dashed var(--ui-color-border-strong);border-radius:var(--ui-radius-control);background:var(--ui-color-surface-soft);
  color:var(--ui-color-text-secondary);font:500 12px/1.5 var(--ui-font-family);cursor:pointer;text-align:center;
}
html [data-ui="upload"]:hover {border-color:var(--ui-color-action-primary);color:var(--ui-color-action-primary);background:var(--ui-color-accent-soft)}
html [data-ui="upload"]:has(input:disabled) {opacity:.6;cursor:not-allowed}
html [data-ui="upload"] input[type="file"] {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit}
html [data-ui="upload"] > svg {width:20px;height:20px;flex-shrink:0}
html [data-ui-surface="control-menu"] {padding:12px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-panel);background:var(--ui-color-surface-raised);color:var(--ui-color-text);box-shadow:var(--ui-shadow-menu)}
html [data-ui-surface="control-dialog"] {padding:20px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-dialog);background:var(--ui-color-surface);color:var(--ui-color-text);box-shadow:var(--ui-shadow-dialog)}
html [data-ui-surface="control-dialog"]::backdrop {background:var(--ui-color-overlay)}
html [data-ui="status"] {font:400 12px/1.6 var(--ui-font-family);color:var(--ui-color-text-muted)}
html [data-ui="status"][role="alert"] {color:var(--ui-color-danger)}
html [data-ui="module-title"] {font:700 15px/20px var(--ui-font-family);color:var(--ui-color-text);margin:0;white-space:nowrap}
html [data-ui="segmented"] {display:flex;gap:4px;padding:3px;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-control);background:var(--ui-color-surface-soft)}
html [data-ui="segmented"] > :is(button[role="tab"],label) {position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:32px;min-height:32px;margin:0;padding:0 8px;border:0;border-radius:var(--ui-radius-control);background:transparent;color:var(--ui-color-text-secondary);font:500 12px/1 var(--ui-font-family);box-shadow:none;cursor:pointer}
html [data-ui="segmented"] > :is(button[aria-selected="true"],label.selected) {background:var(--ui-color-surface-raised);color:var(--ui-color-action-primary);font-weight:650;box-shadow:0 1px 2px #0000000a}
html [data-ui="segmented"] > :is(button, label):hover {color:var(--ui-color-action-primary)}
html [data-ui="segmented"] > :is(button, label):focus-visible {outline:2px solid var(--ui-color-action-primary);outline-offset:1px}
@media(prefers-reduced-motion:reduce){html [data-ui="button"]{transition:none}}

html [data-ui-density="compact"] [data-ui="button"] {height:var(--ui-button-height-compact);min-height:var(--ui-button-height-compact);padding:0 8px}