:root {
  --primary-color: #E0246F;
  --primary-hover: #C2185B;
  --bg-main: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-hover: #F0F0F0;
  --text-primary: #1E1E1E;
  --text-secondary: #8C8C8C;
  --text-disabled: #BFBFBF;
  --border-color: #E5E5E5;
  --border-focus: #E0246F;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --brand-primary: var(--primary-color);
  --brand-primary-hover: var(--primary-hover);
  --brand-light: var(--bg-secondary);
  --bg-canvas: var(--bg-main);
  --bg-surface: var(--bg-main);
  --bg-subtle: var(--bg-secondary);
  --text-main: var(--text-primary);
  --text-regular: var(--text-secondary);
  --text-muted: var(--text-disabled);
  --border-light: var(--border-color);
  --border-input: var(--border-color);
  --radius-xl: var(--radius-md);
  --radius-lg: var(--radius-md);
  --ddt-ink: var(--text-primary);
  --ddt-ink-2: var(--text-primary);
  --ddt-muted: var(--text-secondary);
  --ddt-pink: var(--primary-color);
  --ddt-pink-deep: var(--primary-hover);
  --ddt-pink-soft: var(--bg-secondary);
  --ddt-pink-pale: var(--bg-secondary);
  --ddt-line: var(--border-color);
  --ddt-card: var(--bg-main);
  --ddt-shadow: var(--shadow-sm);
  --admin-ink: var(--text-primary);
  --admin-muted: var(--text-secondary);
  --admin-line: var(--border-color);
  --admin-mint: var(--primary-color);
  --admin-mint-dark: var(--primary-hover);
  --admin-paper: var(--bg-main);
  color: var(--text-primary);
  background: var(--bg-main);
}

body {
  background: var(--bg-canvas) !important;
  color: var(--text-main) !important;
}
body #root, body .app-shell, body .workbench {
  background: transparent !important;
  color: var(--text-main) !important;
}
body ::selection { background: rgba(0, 0, 0, .05) !important; color: #1E1E1E !important; }
body * { scrollbar-color: #BFBFBF transparent !important; }
body *::-webkit-scrollbar-track { background: transparent !important; }
body *::-webkit-scrollbar-thumb { background: #BFBFBF !important; border: 2px solid transparent !important; background-clip: padding-box !important; }
body *::-webkit-scrollbar-thumb:hover { background: #BFBFBF !important; background-clip: padding-box !important; }

body button:focus-visible, body input:focus-visible, body select:focus-visible,
body textarea:focus-visible, body summary:focus-visible, body a:focus-visible {
  outline: 3px solid rgba(0, 0, 0, .05) !important;
  outline-offset: 2px;
}

/* Header and account */
body .app-header {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--border-input) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body .brand-name { color: var(--text-main) !important; }
body .document-name { color: var(--text-main) !important; }
body .header-divider { background: var(--border-input) !important; }
body .header-tip { color: var(--text-regular) !important; }
body .header-tip strong { color: var(--brand-primary-hover) !important; }
body .save-state { color: var(--text-regular) !important; }
body .save-state.is-dirty { color: var(--brand-primary-hover) !important; }
body .save-state.is-dirty::before { background: var(--brand-primary) !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, .05) !important; }
body .account-status-button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
}
body .account-status-button:hover { border-color: #BFBFBF !important; box-shadow: var(--shadow-card) !important; }
body .account-status-copy strong { color: var(--text-main) !important; }
body .account-status-copy small { color: var(--text-regular) !important; }
body .account-status-button.is-login-cta {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .account-status-button.is-login-cta:hover { background: #E5E5E5 !important; }
body .account-status-button.is-login-cta small { color: var(--brand-primary-hover) !important; }
body .account-status-button.is-active {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
body .my-works-entry {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
}
body .my-works-entry:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; color: var(--brand-primary-hover) !important; }
body .header-actions > .xd-3d-build-trigger svg { color: var(--brand-primary) !important; }

/* Buttons */
body .button { border-radius: var(--radius-md) !important; }
body .button.secondary, body .button.custom-create-button, body .button.guest-entry,
body .button.soft, body .button.mosaic-entry, body .button.outline-unify-trigger,
body .similar-merge-trigger, body .upload-replace-button, body .disabled-colors-hint-open {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: #1E1E1E !important;
  box-shadow: var(--shadow-card) !important;
}
body .button.secondary:hover, body .button.custom-create-button:hover, body .button.guest-entry:hover,
body .button.soft:hover, body .button.mosaic-entry:hover, body .outline-unify-trigger:hover,
body .similar-merge-trigger:hover, body .upload-replace-button:hover, body .disabled-colors-hint-open:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: var(--shadow-card) !important;
}
body .button.cloud-save-button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: #1E1E1E !important;
  box-shadow: var(--shadow-card) !important;
}
body .button.cloud-save-button:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .button.cloud-save-button svg { color: var(--brand-primary) !important; }
body .button.primary, body .account-submit, body .upload-confirm-button,
body .access-gate-action, body .free-demo-button, body .custom-creation-submit,
body .export-confirm-actions .button.primary, body .clear-canvas-dialog .button.primary,
body .color-picker-backdrop .button.primary, body .similar-merge-dialog .button.primary,
body .export-confirm-backdrop .export-confirm-actions .button.primary {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-active) !important;
  text-shadow: none !important;
}
body .button.primary:hover, body .account-submit:hover, body .upload-confirm-button:hover,
body .access-gate-action:hover, body .free-demo-button:hover, body .custom-creation-submit:hover,
body .export-confirm-actions .button.primary:hover, body .clear-canvas-dialog .button.primary:hover,
body .color-picker-backdrop .button.primary:hover, body .similar-merge-dialog .button.primary:hover,
body .export-confirm-backdrop .export-confirm-actions .button.primary:hover {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-active) !important;
}
body .button.primary svg, body .account-submit svg, body .upload-confirm-button svg,
body .access-gate-action svg, body .free-demo-button svg, body .custom-creation-submit svg {
  color: #FFFFFF !important;
}

/* Active tabs, tools, and option pills */
body .tool-button { color: var(--text-regular) !important; border-radius: var(--radius-md) !important; }
body .tool-button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; }
body .tool-button.is-active {
  background: var(--brand-light) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7) !important;
}
body .tool-button.is-active svg { color: var(--brand-primary) !important; }
body .view-tabs {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}
body .view-tabs button { color: var(--text-regular) !important; border-radius: var(--radius-sm) !important; }
body .view-tabs button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; }
body .view-tabs button.is-active {
  background: var(--brand-light) !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .view-tabs button.is-focus-tab { color: var(--brand-primary-hover) !important; }
body .canvas-controls {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}
body .canvas-controls button.is-active {
  background: var(--brand-light) !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .inspector-tabs {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .inspector-tabs button { color: var(--text-regular) !important; border-radius: var(--radius-sm) !important; }
body .inspector-tabs button.is-active {
  background: var(--brand-light) !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .style-options button.is-active,
body .upload-mode-tabs button.is-active,
body .upload-size-recommendations button.is-active,
body .free-auth-tabs button.is-active,
body .free-auth-subtabs button.is-active,
body .assembly-size-options button[aria-pressed="true"],
body .assembly-mode-tabs button.is-active,
body .board-assembly-list button.is-selected {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .focus-code-toggle.is-active, body .focus-visibility-toggle.is-active {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .free-auth-tabs, body .free-auth-subtabs { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; border-radius: var(--radius-md) !important; }
body .free-auth-tabs button, body .free-auth-subtabs button { color: var(--text-regular) !important; }
body .free-auth-tabs button.is-active, body .free-auth-subtabs button.is-active { color: var(--brand-primary-hover) !important; }
body .free-code-button, body .free-auth-inline-link, body .free-auth-back {
  color: var(--brand-primary-hover) !important;
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
}
body .free-code-button:hover, body .free-auth-inline-link:hover, body .free-auth-back:hover { background: #E5E5E5 !important; color: var(--brand-primary-hover) !important; }

/* Surfaces and canvas */
body .tool-rail, body .inspector {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
body .canvas-stage {
  background-color: var(--bg-subtle) !important;
  background-image: radial-gradient(#E5E5E5 1px, transparent 1.1px) !important;
  background-size: 24px 24px !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
body .pattern-canvas { box-shadow: 0 8px 24px rgba(0, 0, 0, .05), 0 0 0 3px #fff, 0 0 0 4px #E5E5E5 !important; }
body .floating-zoom, body .grid-color-popover, body .board-preset-popover,
body .palette-sort-popover, body .color-limit-popover {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-popup) !important;
}
body .floating-zoom button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; }
body .inspector-section { border-bottom-color: var(--border-light) !important; }
body .disabled-colors-hint {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-main) !important;
}
body .current-color-card { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; border-radius: var(--radius-md) !important; }
body .current-color-card.is-empty { background: var(--bg-surface) !important; border-color: var(--border-light) !important; }
body .palette-row { border-radius: var(--radius-sm) !important; }
body .palette-row:hover, body .palette-row.is-active { background: var(--brand-light) !important; }
body .palette-row.is-active { box-shadow: inset 0 0 0 1px #E5E5E5 !important; }
body .palette-total { border-top-color: var(--border-light) !important; }
body .board-resolution-control, body .edge-strength-control {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .auto-color-option, body .board-preset-trigger {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .auto-color-option.is-enabled, body .board-preset-trigger:hover {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  box-shadow: none !important;
  color: var(--brand-primary-hover) !important;
}
body .detail-priority-option { background: var(--bg-surface) !important; border-color: var(--border-input) !important; border-radius: var(--radius-md) !important; }
body .detail-priority-option.is-enabled { background: var(--brand-light) !important; border-color: #E5E5E5 !important; }
body .edge-strength-value input { background: var(--bg-surface) !important; border-color: var(--border-input) !important; }
body .outline-entry-actions button { background: var(--bg-surface) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; border-radius: var(--radius-md) !important; }
body .outline-entry-actions button:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; color: var(--brand-primary-hover) !important; }

/* Inputs */
body input[type="text"], body input[type="number"], body input[type="password"], body input[type="email"],
body input[type="tel"], body input[type="search"], body textarea, body select,
body .dimension-input-field input, body .color-limit-number {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body input[type="text"]:focus, body input[type="number"]:focus, body input[type="password"]:focus,
body input[type="email"]:focus, body input[type="tel"]:focus, body input[type="search"]:focus,
body textarea:focus, body select:focus, body .dimension-input-field input:focus,
body .color-limit-number:focus {
  background: var(--bg-surface) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .05) !important;
}
body input[type="range"], body .range-control, body .board-resolution-range { accent-color: var(--brand-primary) !important; }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--brand-primary) !important; }
body option { background: var(--bg-surface) !important; color: var(--text-main) !important; }

/* Dialogs and overlays */
body [class*="backdrop"] {
  background: rgba(17, 24, 39, .35) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
body .account-dialog, body .upload-editor-dialog, body .similar-merge-dialog,
body .more-tools-dialog, body .clear-canvas-dialog, body .color-picker-backdrop > section,
body .export-confirm-backdrop > section, body .custom-creation-dialog,
body .assembly-export-dialog, body .image-save-dialog, body .export-confirm-dialog {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-popup) !important;
  color: var(--text-main) !important;
}
body .account-message, body .account-unavailable { background: var(--bg-subtle) !important; color: var(--text-regular) !important; border-radius: var(--radius-md) !important; }
body .free-trial-card { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; border-radius: var(--radius-lg) !important; }
body .free-trial-badge { background: var(--brand-light) !important; color: var(--brand-primary-hover) !important; border: 1px solid #E5E5E5 !important; }
body .account-summary.is-active { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; color: var(--text-main) !important; }
body .account-summary.is-active > span { background: var(--bg-surface) !important; color: var(--brand-primary) !important; }
body .account-summary.is-active strong { color: var(--text-main) !important; }
body .account-summary.is-active small { color: var(--text-regular) !important; }
body .account-form-error { color: #DC2626 !important; }
body .free-code-demo, body .free-auth-notice { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; color: var(--text-regular) !important; border-radius: var(--radius-md) !important; }
body .free-code-demo strong { color: var(--brand-primary-hover) !important; }
body .free-auth-note { color: var(--text-regular) !important; }
body .upload-editor-heading p, body .account-dialog-heading p, body .similar-merge-heading p,
body .color-picker-heading p { color: var(--brand-primary) !important; }
body .upload-editor-footer { background: var(--bg-surface) !important; border-top-color: var(--border-light) !important; }
body .upload-format-note, body .crop-help, body .dimension-hint { color: var(--text-regular) !important; }
body .upload-preview-stage {
  background-color: var(--bg-subtle) !important;
  background-image: radial-gradient(#E5E5E5 1px, transparent 1.1px) !important;
  background-size: 20px 20px !important;
}
body .subject-auto-panel { background: var(--bg-subtle) !important; border-color: var(--border-input) !important; border-radius: var(--radius-md) !important; }
body .style-picker-section { background: var(--bg-surface) !important; border-bottom-color: var(--border-light) !important; }
body .style-options button { background: var(--bg-surface) !important; border-color: var(--border-input) !important; color: var(--text-regular) !important; border-radius: var(--radius-md) !important; }
body .style-options button:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; color: var(--brand-primary-hover) !important; }
body .mirror-export-option, body .export-mirror-option {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .mirror-export-option strong, body .export-mirror-option strong { color: var(--text-main) !important; }
body .mirror-export-option small, body .export-mirror-option small { color: var(--text-regular) !important; }
body .mirror-export-option input, body .export-mirror-option input { accent-color: var(--brand-primary) !important; }
body .export-charge-note { background: var(--bg-subtle) !important; color: var(--text-regular) !important; border-color: var(--border-input) !important; }
body .export-more-formats > span { color: var(--text-regular) !important; }

/* Access, mosaic, toast */
body .access-gate {
  background:
    radial-gradient(circle at 20% 8%, rgba(0, 0, 0, .05) 0, transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(0, 0, 0, .05) 0, transparent 30%),
    var(--bg-canvas) !important;
}
body .access-gate-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-popup) !important;
}
body .access-gate-icon { background: var(--brand-light) !important; color: var(--brand-primary) !important; box-shadow: none !important; }
body .access-eyebrow { color: var(--brand-primary) !important; }
body .guest-trial-banner {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-md) !important;
}
body .guest-trial-label { background: var(--brand-light) !important; color: var(--brand-primary-hover) !important; }
body .guest-trial-banner button { background: var(--brand-light) !important; border-color: #E5E5E5 !important; color: var(--brand-primary-hover) !important; }
body .guest-trial-banner button:hover { background: #E5E5E5 !important; }
body .mosaic-result-page { background: var(--bg-canvas) !important; }
body .mosaic-result-header { background: var(--bg-surface) !important; border-bottom-color: var(--border-input) !important; }
body .toast {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-popup) !important;
}
body .admin-shell, body .admin-login { background: var(--bg-canvas) !important; color: var(--text-main) !important; }

/* Toolbar details */
body .tool-grid-panel .tool-button.is-active {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .tool-grid-panel .tool-button.is-active .tool-icon { color: var(--brand-primary) !important; }
body .stroke-options {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}
body .stroke-size-group strong { color: var(--text-main) !important; }
body .stroke-size-group button {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .stroke-size-group button:hover,
body .stroke-size-group button.is-active,
body .stroke-size-group button.is-selected {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .stroke-current-color {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
}
body .stroke-current-color:hover { background: var(--brand-light) !important; border-color: #E5E5E5 !important; }

/* Export and assembly accents */
body .export-confirm-dialog .export-confirm-icon {
  background: var(--brand-light) !important;
  color: var(--brand-primary) !important;
  box-shadow: none !important;
}
body .export-confirm-dialog .export-confirm-icon svg { color: var(--brand-primary) !important; }
body .export-confirm-dialog .export-mirror-option {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}
body .export-confirm-dialog .export-mirror-option span,
body .export-confirm-dialog .export-mirror-option strong,
body .export-confirm-dialog .export-mirror-option small,
body .export-confirm-dialog .export-mirror-option:hover span,
body .export-confirm-dialog .export-mirror-option:hover strong { color: var(--text-main) !important; }
body .export-confirm-dialog .export-mirror-option small { color: var(--text-regular) !important; }
body .export-confirm-dialog .export-mirror-option input[type="checkbox"] {
  border-color: var(--border-input) !important;
  background: var(--bg-surface) !important;
}
body .export-confirm-dialog .export-mirror-option input[type="checkbox"]::before { border-color: #FFFFFF !important; }
body .export-confirm-dialog .export-mirror-option input[type="checkbox"]:checked {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
body .assembly-size-options button,
body .assembly-mode-options button,
body .assembly-selection-actions button {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
body .assembly-size-options button[aria-pressed="true"],
body .assembly-mode-options button[aria-pressed="true"] {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}

/* Dark/colored buttons inside compact popovers */
body .grid-color-popover button {
  background: var(--brand-light) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .grid-color-popover button:hover { background: #E5E5E5 !important; }

/* Inspector and canvas-controls detail cleanup */
body .tool-grid-panel { border-bottom-color: var(--border-light) !important; }
body .tool-grid-heading { color: var(--text-main) !important; }
body .tool-grid-panel .tool-button,
body .tool-rail .tool-button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
body .tool-grid-panel .tool-button:hover,
body .tool-rail .tool-button:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .tool-grid-panel .tool-button.is-active,
body .tool-rail .tool-button.is-active {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .tool-grid-panel .tool-button.is-active .tool-icon,
body .tool-rail .tool-button.is-active .tool-icon { color: var(--brand-primary) !important; }
body .inspector .section-heading h2,
body .inspector h2 { color: var(--text-main) !important; }
body .inspector .section-heading > span,
body .board-settings-actions > span { color: var(--text-regular) !important; }
body .inspector .field-label, body .inspector label { color: var(--text-regular) !important; }
body .board-resolution-control strong, body .board-resolution-control output,
body .edge-strength-control strong, body .edge-strength-control output { color: var(--brand-primary-hover) !important; }
body .bead-size-select {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
}
body .floating-zoom { color: var(--text-regular) !important; }
body .floating-zoom button { color: var(--text-regular) !important; }
body .floating-zoom button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; }
body .zoom-value { color: var(--text-main) !important; }
body .floating-zoom small { color: var(--text-muted) !important; }
body .canvas-controls button, body .canvas-controls summary { color: var(--text-regular) !important; }
body .canvas-controls button:hover, body .canvas-controls summary:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; }
body .canvas-controls button.is-active, body .canvas-controls summary.is-active { background: var(--brand-light) !important; color: var(--brand-primary-hover) !important; }
body .control-divider { background: var(--border-input) !important; }
body .canvas-controls input[type="color"], body input[type="color"] {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
}
body .palette-heading-actions, body .palette-heading-actions label,
body .palette-color-count { color: var(--text-regular) !important; }
body .current-color-card { color: var(--text-main) !important; }
body .current-color-copy small { color: var(--text-muted) !important; }
body .current-color-copy strong { color: var(--text-main) !important; }
body .current-color-copy em { color: var(--text-regular) !important; font-style: normal !important; }
body .focus-color-button, body .clear-color-button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .focus-color-button:hover, body .clear-color-button:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .focus-color-button.is-active {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .palette-collapse-toggle {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-sm) !important;
}
body .palette-collapse-toggle:hover { background: var(--brand-light) !important; border-color: #E5E5E5 !important; }
body .palette-total { color: var(--text-regular) !important; }
body .palette-total strong { color: var(--text-main) !important; }
body .inspector .dimension-hint,
body .inspector .field-hint { color: var(--text-muted) !important; }

body .dimension-row span, body .dimension-row label { color: var(--text-regular) !important; }
body .dimension-row input { color: var(--text-main) !important; }
body .board-resolution-heading { color: var(--text-main) !important; }
body .board-resolution-heading span { color: var(--brand-primary-hover) !important; }
body .board-resolution-control > small { color: var(--text-muted) !important; }
body .palette-heading-actions, body .palette-heading-actions * { color: var(--text-regular) !important; }
body .palette-heading-actions select { color: var(--text-main) !important; }

body .inspector-tab-save {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-active) !important;
}
body .inspector-tab-save:hover {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #FFFFFF !important;
}

body .button.inspector-tab-save {
  background: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-active) !important;
}
body .button.inspector-tab-save:hover {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #FFFFFF !important;
}
body .disabled-colors-hint strong, body .disabled-colors-hint h2 { color: var(--text-main) !important; }
body .disabled-colors-hint-note { color: var(--text-regular) !important; }
body .disabled-colors-hint-close { color: var(--text-muted) !important; }
body .disabled-colors-hint-close:hover { color: #DC2626 !important; }
body .inspector .palette-heading-actions,
body .inspector .palette-heading-actions * { color: var(--text-regular) !important; }
body .inspector .palette-heading-actions select { color: var(--text-main) !important; }
body .inspector .palette-row,
body .inspector .palette-row strong,
body .inspector .palette-row b { color: var(--text-main) !important; }
body .inspector .palette-row span { color: var(--text-regular) !important; }
body .inspector .palette-row.is-active strong { color: var(--brand-primary-hover) !important; }
body .help-dot {
  color: var(--brand-primary-hover) !important;
  border-color: #E5E5E5 !important;
  background: #F5F5F5 !important;
}
body .help-dot:hover { background: var(--brand-light) !important; }

/* Upload editor */
body .upload-editor-dialog .upload-editor-heading h2 { color: var(--text-main) !important; }
body .upload-editor-dialog .crop-workspace {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  border-radius: var(--radius-lg) !important;
}
body .upload-editor-dialog .upload-reference-entry {
  background: var(--brand-light) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .upload-reference-entry strong,
body .upload-editor-dialog .upload-reference-entry span,
body .upload-editor-dialog .upload-reference-entry b { color: inherit !important; }
body .upload-editor-dialog .upload-reference-entry svg {
  background: var(--brand-primary) !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  border-radius: var(--radius-sm) !important;
}
body .upload-editor-dialog .upload-crop-tools button,
body .upload-editor-dialog .upload-crop-zoom {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
body .upload-editor-dialog .upload-crop-tools button:hover,
body .upload-editor-dialog .upload-crop-zoom:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .upload-editor-dialog .upload-crop-tools button[aria-pressed="true"],
body .upload-editor-dialog .upload-crop-zoom[aria-pressed="true"] {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .upload-editor-dialog .upload-preview-stage {
  border-color: var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .free-crop-box {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, .36) !important;
}
body .upload-editor-dialog .crop-handle {
  background: var(--brand-primary) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05) !important;
}
body .upload-editor-dialog .crop-mode-label {
  background: var(--brand-light) !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-sm) !important;
}
body .upload-editor-dialog .upload-crop-drag-tip { color: var(--text-regular) !important; }
body .upload-editor-dialog .crop-help {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .crop-help strong { color: var(--text-main) !important; }
body .upload-editor-dialog .style-picker-section,
body .upload-editor-dialog .upload-settings-panel > section {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-lg) !important;
}
body .upload-editor-dialog .upload-setting-title strong,
body .upload-editor-dialog .style-picker-section strong { color: var(--text-main) !important; }
body .upload-editor-dialog .upload-setting-title small,
body .upload-editor-dialog .style-picker-section small { color: var(--text-muted) !important; }
body .upload-editor-dialog .field-label { color: var(--text-regular) !important; }
body .upload-editor-dialog .upload-mode-tabs button:not(.is-active),
body .upload-editor-dialog .upload-size-recommendations button:not(.is-active) {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-regular) !important;
}
body .upload-editor-dialog .upload-mode-tabs button:not(.is-active) strong,
body .upload-editor-dialog .upload-size-recommendations button:not(.is-active) strong,
body .upload-editor-dialog .upload-mode-tabs button:not(.is-active) span,
body .upload-editor-dialog .upload-size-recommendations button:not(.is-active) span { color: inherit !important; }
body .upload-editor-dialog .upload-default-button {
  background: var(--brand-light) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .background-removal-option {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .background-removal-option:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; }
body .upload-editor-dialog .edge-strength-value,
body .upload-editor-dialog .edge-strength-value span,
body .upload-editor-dialog .edge-strength-value em { color: var(--text-regular) !important; }
body .upload-editor-dialog .upload-settings-panel .similar-color-option,
body .upload-editor-dialog .upload-settings-panel .detail-priority-option { border-color: var(--border-input) !important; }

/* Account dialog */
body .account-dialog h2, body .account-dialog h3 { color: var(--text-main) !important; }
body .account-dialog p, body .account-dialog li { color: var(--text-regular) !important; }
body .account-dialog-close { color: var(--text-muted) !important; border-color: var(--border-input) !important; background: var(--bg-surface) !important; }
body .account-dialog-close:hover { color: var(--brand-primary-hover) !important; border-color: #E5E5E5 !important; background: var(--brand-light) !important; }
body .account-dialog li svg, body .account-dialog li > span { color: var(--brand-primary) !important; }
body .account-logout {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-md) !important;
}
body .account-logout:hover { color: #DC2626 !important; border-color: #FECACA !important; background: #FEF2F2 !important; }

/* Export dialog */
body .export-confirm-dialog h2 { color: var(--text-main) !important; }
body .export-confirm-dialog .export-confirm-grid > div {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .export-confirm-dialog .export-more-formats { border-color: var(--border-input) !important; }
body .export-confirm-dialog .export-more-formats button { border-radius: var(--radius-md) !important; }

body .upload-editor-dialog .upload-replace-button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .upload-replace-button:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .upload-editor-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog strong { color: var(--text-main) !important; }
body .upload-editor-dialog button.is-active strong,
body .upload-editor-dialog button[aria-pressed="true"] strong,
body .upload-editor-dialog .upload-reference-entry strong,
body .upload-editor-dialog .upload-confirm-button strong {
  color: inherit !important;
}
body .upload-editor-dialog .upload-confirm-button,
body .upload-editor-dialog .upload-confirm-button * { color: #FFFFFF !important; }

body .upload-editor-dialog .upload-replace-actions .upload-replace-button {
  color: var(--text-main) !important;
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
}
body .upload-editor-dialog .upload-replace-actions .upload-replace-button:hover {
  color: var(--brand-primary-hover) !important;
  border-color: #BFBFBF !important;
  background: var(--bg-subtle) !important;
}
body .upload-editor-dialog .background-removal-option strong,
body .upload-editor-dialog .subject-removal-option strong { color: var(--text-main) !important; }

/* Access gate and auth */
body .access-gate h1, body .access-gate h2, body .access-gate h3 { color: var(--text-main) !important; }
body .access-gate p, body .access-gate li { color: var(--text-regular) !important; }
body .access-gate svg { color: var(--brand-primary) !important; }
body .access-gate ul { border-color: var(--border-input) !important; }
body .access-gate-guest {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}
body .access-gate-guest:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
  color: var(--brand-primary-hover) !important;
}
body .account-dialog .free-auth-panel label { color: var(--text-regular) !important; }
body .account-dialog .free-code-row { color: var(--brand-primary-hover) !important; }
body .account-dialog input[type="text"],
body .account-dialog input[type="tel"],
body .account-dialog input[type="password"],
body .account-dialog input[type="email"] {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .account-dialog .free-demo-login { border-color: var(--border-input) !important; }
body .account-dialog .free-demo-login span,
body .account-dialog .free-demo-login small { color: var(--text-muted) !important; }

/* Works panel */
body .works-overview {
  background: linear-gradient(135deg, #F5F5F5, #F5F5F5) !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: var(--radius-lg) !important;
  color: var(--brand-primary-hover) !important;
}
body .works-overview *, body .works-overview strong { color: var(--brand-primary-hover) !important; }
body .works-overview > span, body .works-overview .works-overview-count {
  background: var(--bg-surface) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .works-empty {
  background: var(--bg-subtle) !important;
  border: 1px dashed #BFBFBF !important;
  border-radius: var(--radius-lg) !important;
}
body .works-empty svg { color: var(--brand-primary) !important; }
body .works-empty h3, body .works-empty strong { color: var(--text-main) !important; }
body .works-empty p { color: var(--text-regular) !important; }
body .account-text-button { color: var(--brand-primary-hover) !important; background: transparent !important; border: 0 !important; }

/* Clear canvas (intentional danger accent) */
body .clear-canvas-dialog h2 { color: var(--text-main) !important; }
body .clear-canvas-dialog header p { color: #DC2626 !important; }
body .clear-canvas-icon { background: #FEE2E2 !important; color: #DC2626 !important; }
body .clear-canvas-dialog .button.danger {
  background: #DC2626 !important;
  border: 1px solid #DC2626 !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .2) !important;
}
body .clear-canvas-dialog .button.danger:hover { background: #B91C1C !important; border-color: #B91C1C !important; color: #FFFFFF !important; }

/* 221 color picker */
body .color-picker-dialog h2 { color: var(--text-main) !important; }
body .color-picker-heading > button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .color-picker-heading > button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; border-color: #BFBFBF !important; }
body .color-picker-search input {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .color-picker-group-heading strong { color: var(--text-main) !important; }
body .color-picker-group-heading span { color: var(--text-muted) !important; }
body .all-color-grid button.is-selected {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .05) !important;
}

/* Assembly export, keeping functional red board guides */
body .assembly-export-dialog h2 { color: var(--text-main) !important; }
body .assembly-export-dialog .assembly-plan-summary { color: var(--text-regular) !important; }
body .assembly-export-dialog .assembly-export-footer { border-top-color: var(--border-input) !important; }
body .assembly-export-dialog .assembly-map-scroll { border-color: var(--border-input) !important; }

body .clear-canvas-dialog .clear-canvas-copy > p { color: #DC2626 !important; }
body .color-picker-group-heading { color: var(--text-main) !important; }
body .color-picker-group-heading strong { color: var(--text-main) !important; }
body .color-picker-group-heading span { color: var(--text-muted) !important; }
body .all-color-grid button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
}
body .all-color-grid button:hover {
  background: var(--bg-subtle) !important;
  border-color: #BFBFBF !important;
}
body .all-color-grid button.is-selected {
  background: var(--brand-light) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .05) !important;
}
body .all-color-grid button strong { color: var(--text-main) !important; }
body .all-color-grid button small { color: var(--text-muted) !important; }
body .all-color-grid button.is-selected strong { color: var(--brand-primary-hover) !important; }

/* Disabled colors dialog */
body .disabled-colors-dialog { border: 1px solid var(--border-input) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-popup) !important; }
body .disabled-colors-header { border-bottom-color: var(--border-light) !important; }
body .disabled-colors-header small { color: var(--brand-primary) !important; }
body .disabled-colors-header h2 { color: var(--text-main) !important; }
body .disabled-colors-header p { color: var(--text-regular) !important; }
body .disabled-colors-header > button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .disabled-colors-header > button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; border-color: #BFBFBF !important; }
body .disabled-colors-scopes button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-lg) !important;
}
body .disabled-colors-scopes button:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; }
body .disabled-colors-scopes button[aria-pressed="true"] {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  box-shadow: none !important;
}
body .disabled-colors-scopes span { color: var(--text-regular) !important; }
body .disabled-colors-scopes em { color: var(--brand-primary) !important; }
body .disabled-colors-intro > span { color: var(--brand-primary) !important; }
body .disabled-colors-intro strong { color: var(--text-main) !important; }
body .disabled-colors-intro p { color: var(--text-regular) !important; }
body .disabled-colors-footer { border-top-color: var(--border-input) !important; }
body .disabled-colors-footer > span { color: var(--text-muted) !important; }
body .disabled-face-heading button,
body .disabled-face-actions button,
body .disabled-palette-shortcuts button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
}
body .disabled-face-heading button:hover,
body .disabled-face-actions button:hover,
body .disabled-palette-shortcuts button:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; color: var(--brand-primary-hover) !important; }

/* Grid align dialog */
body .grid-align-dialog { border: 1px solid var(--border-input) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-popup) !important; }
body .grid-align-workflow-header { border-bottom-color: var(--border-light) !important; }
body .grid-align-workflow-header p { color: var(--brand-primary) !important; }
body .grid-align-workflow-header h2 { color: var(--text-main) !important; }
body .grid-align-workflow-header span { color: var(--text-regular) !important; }
body .grid-align-workflow-header > button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .grid-align-workflow-header > button:hover { background: var(--bg-subtle) !important; color: var(--brand-primary-hover) !important; border-color: #BFBFBF !important; }
body .grid-align-stepper strong { color: var(--text-regular) !important; }
body .grid-align-stepper strong.is-active { color: var(--brand-primary-hover) !important; }
body .grid-align-stepper i { background: var(--brand-light) !important; border-color: #E5E5E5 !important; color: var(--brand-primary-hover) !important; }
body .grid-align-stepper > span { color: var(--text-muted) !important; }
body .grid-align-detail-toggle { color: #E5E5E5 !important; background: #1E1E1E !important; border-color: #1E1E1E !important; }
body .grid-align-detail-toggle:hover { background: #1E1E1E !important; border-color: #8C8C8C !important; }
body .grid-align-detail-toggle.is-active { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #FFFFFF !important; box-shadow: none !important; }
body .grid-align-size, body .grid-align-color-row {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .grid-align-dialog .dimension-row span,
body .grid-align-dialog label { color: var(--text-regular) !important; }
body .grid-align-dialog .dimension-row input {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
body .grid-align-layer-color-list label {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
}
body .grid-align-layer-color-list input[type="color"] { border-color: var(--border-input) !important; border-radius: var(--radius-sm) !important; }
body .grid-align-layer-color-list button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-sm) !important;
}
body .grid-align-layer-color-list button:hover { background: var(--brand-light) !important; border-color: #E5E5E5 !important; }
body .grid-align-message {
  background: var(--brand-light) !important;
  color: var(--brand-primary-hover) !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: var(--radius-sm) !important;
}
body .grid-align-workflow-footer { border-top-color: var(--border-light) !important; }
body .grid-align-dialog .dimension-row label {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-sm) !important;
}

/* Replace color */
body .replace-color-dialog { border: 1px solid var(--border-input) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-popup) !important; }
body .replace-color-dialog h2 { color: var(--text-main) !important; }
body .replace-color-dialog header p { color: var(--brand-primary) !important; }
body .replace-color-region-button {
  background: var(--brand-light) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
  border-radius: var(--radius-sm) !important;
}
body .replace-color-select-wrap {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .replace-color-search-input {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
}
body .replace-color-search-input:focus { outline-color: rgba(0, 0, 0, .05) !important; border-color: var(--brand-primary) !important; }
body .replace-color-dialog svg { color: var(--brand-primary) !important; }
body .replace-color-summary {
  background: linear-gradient(135deg, #F5F5F5, #F5F5F5) !important;
  border: 1px solid #E5E5E5 !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .replace-color-summary * { color: inherit !important; }
body .replace-color-summary em { color: var(--brand-primary-hover) !important; }

/* More tools and adjustments */
body .more-tools-dialog { border: 1px solid var(--border-input) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-popup) !important; }
body .more-tools-dialog > header p { color: var(--brand-primary) !important; }
body .more-tools-dialog > header h2 { color: var(--text-main) !important; }
body .more-tools-back, body .more-tools-close {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .more-tools-back:hover:not(:disabled), body .more-tools-close:hover { background: var(--bg-subtle) !important; border-color: #BFBFBF !important; color: var(--brand-primary-hover) !important; }
body .adjustment-preview-card {
  background-color: var(--bg-subtle) !important;
  background-image: radial-gradient(#E5E5E5 1px, transparent 1px) !important;
  border-color: var(--border-input) !important;
  border-radius: var(--radius-md) !important;
}
body .adjustment-controls label {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-md) !important;
}
body .adjustment-controls label > span { color: var(--brand-primary-hover) !important; }
body .adjustment-controls p {
  background: var(--bg-subtle) !important;
  border-color: var(--border-input) !important;
  color: var(--text-regular) !important;
  border-radius: var(--radius-sm) !important;
}
body .adjustment-actions { border-top-color: var(--border-input) !important; }

/* Board size preset popover */
body .board-preset-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-popup) !important;
}
body .board-preset-menu button {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-input) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-sm) !important;
}
body .board-preset-menu button:hover,
body .board-preset-menu button.is-active {
  background: var(--brand-light) !important;
  border-color: #E5E5E5 !important;
  color: var(--brand-primary-hover) !important;
}
body .board-preset-menu button strong { color: inherit !important; }
body .board-preset-menu button span { color: var(--text-muted) !important; }
body .board-preset-menu button.is-active span { color: var(--brand-primary-hover) !important; }

/* ============================================================
   Minimal system: 90% grayscale + single pink accent
   ============================================================ */
body, button, input, select, textarea, summary, .app-shell, .workbench {
  font-family: var(--font-family) !important;
}
body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-size: var(--font-size-sm) !important;
}
body #root, body .app-shell, body .workbench { background: var(--bg-main) !important; color: var(--text-primary) !important; }
body ::selection { background: #E5E5E5 !important; color: var(--text-primary) !important; }
body * { scrollbar-color: #BFBFBF transparent !important; }
body *::-webkit-scrollbar-track { background: transparent !important; }
body *::-webkit-scrollbar-thumb { background: #BFBFBF !important; border: 2px solid transparent !important; background-clip: padding-box !important; }
body *::-webkit-scrollbar-thumb:hover { background: #8C8C8C !important; background-clip: padding-box !important; }
body button:focus-visible, body input:focus-visible, body select:focus-visible,
body textarea:focus-visible, body summary:focus-visible, body a:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 2px !important;
}

/* Header */
body .app-header {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body .brand-group img, body .brand img, body .xd3d-brand img { border-radius: var(--radius-sm) !important; }
body .brand-name { color: var(--text-primary) !important; font-size: var(--font-size-base) !important; font-weight: 600 !important; }
body .document-name { color: var(--text-primary) !important; }
body .header-divider { background: var(--border-color) !important; }
body .header-tip { color: var(--text-secondary) !important; }
body .header-tip strong { color: var(--text-primary) !important; }
body .save-state { color: var(--text-secondary) !important; }
body .save-state.is-dirty { color: var(--primary-color) !important; }
body .save-state.is-dirty::before { background: var(--primary-color) !important; box-shadow: none !important; }
body .account-status-button {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .account-status-button:hover { background: var(--bg-hover) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; }
body .account-status-copy strong { color: var(--text-primary) !important; font-size: var(--font-size-xs) !important; font-weight: 600 !important; }
body .account-status-copy small { color: var(--text-secondary) !important; font-size: var(--font-size-xs) !important; }
body .account-status-button.is-login-cta {
  background: var(--bg-main) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
body .account-status-button.is-login-cta:hover { background: var(--bg-hover) !important; border-color: var(--primary-color) !important; }
body .account-status-button.is-login-cta small { color: var(--primary-color) !important; }
body .account-status-button.is-active { background: var(--bg-main) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
body .my-works-entry {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .my-works-entry:hover { background: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
body .header-actions > .xd-3d-build-trigger svg { color: var(--primary-color) !important; }

/* Buttons */
body .button {
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
}
body .button.secondary, body .button.custom-create-button, body .button.guest-entry,
body .button.soft, body .button.mosaic-entry, body .button.outline-unify-trigger,
body .similar-merge-trigger, body .upload-replace-button, body .disabled-colors-hint-open,
body .button.cloud-save-button {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .button.secondary:hover, body .button.custom-create-button:hover, body .button.guest-entry:hover,
body .button.soft:hover, body .button.mosaic-entry:hover, body .outline-unify-trigger:hover,
body .similar-merge-trigger:hover, body .upload-replace-button:hover, body .disabled-colors-hint-open:hover,
body .button.cloud-save-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .button.cloud-save-button svg { color: var(--text-secondary) !important; }
body .button.primary, body .account-submit, body .upload-confirm-button,
body .access-gate-action, body .free-demo-button, body .custom-creation-submit,
body .export-confirm-actions .button.primary, body .clear-canvas-dialog .button.primary,
body .color-picker-backdrop .button.primary, body .similar-merge-dialog .button.primary,
body .export-confirm-backdrop .export-confirm-actions .button.primary,
body .button.inspector-tab-save {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: var(--radius-sm) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}
body .button.primary:hover, body .account-submit:hover, body .upload-confirm-button:hover,
body .access-gate-action:hover, body .free-demo-button:hover, body .custom-creation-submit:hover,
body .export-confirm-actions .button.primary:hover, body .clear-canvas-dialog .button.primary:hover,
body .color-picker-backdrop .button.primary:hover, body .similar-merge-dialog .button.primary:hover,
body .export-confirm-backdrop .export-confirm-actions .button.primary:hover,
body .button.inspector-tab-save:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
body .button.primary svg, body .account-submit svg, body .upload-confirm-button svg,
body .access-gate-action svg, body .free-demo-button svg, body .custom-creation-submit svg,
body .button.inspector-tab-save svg { color: #FFFFFF !important; }
body .button.primary:disabled, body .account-submit:disabled, body .upload-confirm-button:disabled,
body .access-gate-action:disabled, body .free-demo-button:disabled, body .custom-creation-submit:disabled,
body .button.inspector-tab-save:disabled {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-disabled) !important;
  box-shadow: none !important;
}
body .button.danger {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

/* Tools and tabs */
body .tool-button {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
}
body .tool-button:hover { background: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
body .tool-grid-panel .tool-button.is-active, body .tool-rail .tool-button.is-active {
  background: var(--bg-main) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
body .tool-grid-panel .tool-button.is-active svg,
body .tool-rail .tool-button.is-active svg,
body .tool-grid-panel .tool-button.is-active .tool-icon,
body .tool-rail .tool-button.is-active .tool-icon { color: var(--primary-color) !important; }
body .view-tabs {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .view-tabs button {
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
}
body .view-tabs button:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
body .view-tabs button.is-active { background: var(--bg-secondary) !important; color: var(--primary-color) !important; box-shadow: none !important; }
body .view-tabs button.is-focus-tab { color: var(--text-secondary) !important; }
body .canvas-controls {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .canvas-controls button, body .canvas-controls summary {
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-xs) !important;
}
body .canvas-controls button:hover, body .canvas-controls summary:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
body .canvas-controls button.is-active, body .canvas-controls summary.is-active { background: var(--bg-secondary) !important; color: var(--primary-color) !important; }
body .inspector-tabs {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
}
body .inspector-tabs button {
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 500 !important;
}
body .inspector-tabs button.is-active { background: var(--bg-main) !important; color: var(--primary-color) !important; box-shadow: none !important; }
body .style-options button.is-active,
body .upload-mode-tabs button.is-active,
body .upload-size-recommendations button.is-active,
body .free-auth-tabs button.is-active,
body .free-auth-subtabs button.is-active,
body .assembly-size-options button[aria-pressed="true"],
body .assembly-mode-tabs button.is-active,
body .board-assembly-list button.is-selected,
body .focus-code-toggle.is-active,
body .focus-visibility-toggle.is-active {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
body .free-auth-tabs, body .free-auth-subtabs { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; border-radius: var(--radius-sm) !important; }
body .free-auth-tabs button, body .free-auth-subtabs button { color: var(--text-secondary) !important; }
body .free-auth-tabs button.is-active, body .free-auth-subtabs button.is-active { background: var(--bg-main) !important; color: var(--primary-color) !important; }
body .free-code-button, body .free-auth-inline-link, body .free-auth-back { color: var(--primary-color) !important; background: transparent !important; border-color: transparent !important; border-radius: var(--radius-sm) !important; }
body .free-code-button:hover, body .free-auth-inline-link:hover, body .free-auth-back:hover { background: var(--bg-hover) !important; color: var(--primary-hover) !important; }

/* Surfaces */
body .inspector, body .tool-rail {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .tool-grid-panel { background: transparent !important; border-bottom-color: var(--border-color) !important; }
body .tool-grid-heading, body .inspector .section-heading h2, body .inspector h2 { color: var(--text-primary) !important; font-size: var(--font-size-base) !important; font-weight: 600 !important; }
body .canvas-stage {
  background: var(--bg-main) !important;
  background-image: radial-gradient(#F0F0F0 1px, transparent 1.1px) !important;
  background-size: 24px 24px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .pattern-canvas { box-shadow: 0 0 0 1px var(--border-color) !important; }
body .canvas-controls, body .floating-zoom, body .grid-color-popover,
body .board-preset-popover, body .board-preset-menu, body .palette-sort-popover,
body .color-limit-popover {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .floating-zoom button { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; }
body .floating-zoom button:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
body .zoom-value { color: var(--text-primary) !important; }
body .floating-zoom small { color: var(--text-secondary) !important; }
body .inspector-section { border-bottom-color: var(--border-color) !important; }
body .current-color-card, body .board-resolution-control, body .edge-strength-control { background: var(--bg-main) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .current-color-card.is-empty { background: var(--bg-main) !important; }
body .board-resolution-heading { color: var(--text-primary) !important; }
body .board-resolution-heading span { color: var(--text-primary) !important; }
body .board-resolution-control > small { color: var(--text-secondary) !important; }
body .palette-row { border-radius: var(--radius-sm) !important; }
body .palette-row:hover { background: var(--bg-hover) !important; }
body .palette-row.is-active { background: var(--bg-secondary) !important; box-shadow: inset 2px 0 0 var(--primary-color) !important; }
body .palette-row.is-active strong { color: var(--primary-color) !important; }
body .palette-row span, body .palette-row b { color: var(--text-secondary) !important; }
body .palette-total { border-top-color: var(--border-color) !important; color: var(--text-secondary) !important; }
body .palette-total strong { color: var(--text-primary) !important; }
body .palette-heading-actions, body .palette-heading-actions * { color: var(--text-secondary) !important; }
body .palette-heading-actions select { color: var(--text-primary) !important; }
body .disabled-colors-hint { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; color: var(--text-primary) !important; }
body .disabled-colors-hint-note { color: var(--text-secondary) !important; }
body .disabled-colors-hint-close { color: var(--text-secondary) !important; }
body .help-dot { color: var(--text-secondary) !important; border-color: var(--border-color) !important; background: var(--bg-main) !important; }
body .help-dot:hover { color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
body .board-preset-menu button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .board-preset-menu button:hover, body .board-preset-menu button.is-active { background: var(--bg-hover) !important; border-color: var(--border-color) !important; color: var(--primary-color) !important; }
body .board-preset-menu button span { color: var(--text-secondary) !important; }

/* Inputs */
body input[type="text"], body input[type="number"], body input[type="password"], body input[type="email"],
body input[type="tel"], body input[type="search"], body textarea, body select,
body .dimension-input-field input, body .color-limit-number, body .bead-size-select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: var(--font-size-sm) !important;
}
body input[type="text"]::placeholder, body input[type="password"]::placeholder, body input[type="tel"]::placeholder,
body input[type="search"]::placeholder, body textarea::placeholder { color: var(--text-disabled) !important; }
body input[type="text"]:focus, body input[type="number"]:focus, body input[type="password"]:focus,
body input[type="email"]:focus, body input[type="tel"]:focus, body input[type="search"]:focus,
body textarea:focus, body select:focus, body .dimension-input-field input:focus,
body .color-limit-number:focus, body .bead-size-select:focus {
  background: var(--bg-main) !important;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 2px rgba(224, 36, 111, .15) !important;
}
body input[type="range"], body .range-control, body .board-resolution-range,
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--primary-color) !important; }
body option { background: var(--bg-main) !important; color: var(--text-primary) !important; }
body input[type="color"] { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; }

/* Dialogs */
body [class*="backdrop"] { background: rgba(0, 0, 0, .35) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
body .account-dialog, body .upload-editor-dialog, body .similar-merge-dialog,
body .more-tools-dialog, body .clear-canvas-dialog, body .color-picker-backdrop > section,
body .export-confirm-backdrop > section, body .custom-creation-dialog,
body .assembly-export-dialog, body .image-save-dialog, body .export-confirm-dialog,
body .grid-align-dialog, body .disabled-colors-dialog {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary) !important;
}
body .upload-editor-heading h2, body .account-dialog-heading h2, body .similar-merge-heading h2,
body .color-picker-heading h2, body .grid-align-workflow-header h2, body .more-tools-dialog > header h2,
body .clear-canvas-dialog h2, body .export-confirm-dialog h2, body .disabled-colors-header h2 {
  color: var(--text-primary) !important;
  font-size: var(--font-size-base) !important;
  font-weight: 600 !important;
}
body .upload-editor-heading p, body .account-dialog-heading p, body .similar-merge-heading p,
body .color-picker-heading p, body .grid-align-workflow-header p, body .more-tools-dialog > header p,
body .disabled-colors-header small, body .access-eyebrow {
  color: var(--text-secondary) !important;
}
body .color-picker-group-heading strong { color: var(--text-primary) !important; }
body .color-picker-group-heading span { color: var(--text-secondary) !important; }
body .color-picker-group-heading { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; }
body .all-color-grid button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; }
body .all-color-grid button:hover { background: var(--bg-hover) !important; border-color: var(--border-color) !important; }
body .all-color-grid button.is-selected { background: var(--bg-secondary) !important; border-color: var(--primary-color) !important; box-shadow: none !important; }
body .all-color-grid button strong { color: var(--text-primary) !important; }
body .all-color-grid button small { color: var(--text-secondary) !important; }
body .all-color-grid button.is-selected strong { color: var(--primary-color) !important; }
body .color-picker-heading > button, body .account-dialog-close, body .grid-align-workflow-header > button,
body .disabled-colors-header > button {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
body .color-picker-heading > button:hover, body .account-dialog-close:hover,
body .grid-align-workflow-header > button:hover, body .disabled-colors-header > button:hover {
  background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important;
}
body .color-picker-search input { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; border-radius: var(--radius-sm) !important; }
body .free-trial-card, body .guest-trial-banner, body .free-code-demo, body .free-auth-notice,
body .account-message, body .account-unavailable, body .upload-preview-stage,
body .subject-auto-panel, body .mirror-export-option, body .export-mirror-option,
body .export-charge-note, body .works-overview, body .works-empty, body .adjustment-preview-card,
body .grid-align-size, body .grid-align-color-row {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
body .upload-preview-stage { background-color: var(--bg-secondary) !important; background-image: radial-gradient(#E5E5E5 1px, transparent 1.1px) !important; }
body .works-overview, body .works-overview * { color: var(--text-primary) !important; }
body .works-overview > span, body .works-overview .works-overview-count { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; }
body .works-overview strong { color: var(--text-primary) !important; }
body .works-empty p { color: var(--text-secondary) !important; }
body .works-empty svg { color: var(--text-secondary) !important; }
body .account-text-button { color: var(--primary-color) !important; background: transparent !important; border: 0 !important; }

/* Upload editor */
body .upload-editor-dialog .upload-reference-entry {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}
body .upload-editor-dialog .upload-reference-entry strong,
body .upload-editor-dialog .upload-reference-entry span,
body .upload-editor-dialog .upload-reference-entry b { color: var(--text-primary) !important; }
body .upload-editor-dialog .upload-reference-entry svg { background: var(--bg-hover) !important; color: var(--text-primary) !important; fill: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .upload-crop-tools button,
body .upload-editor-dialog .upload-crop-zoom {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}
body .upload-editor-dialog .upload-crop-tools button[aria-pressed="true"],
body .upload-editor-dialog .upload-crop-zoom[aria-pressed="true"] {
  background: var(--bg-secondary) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}
body .upload-editor-dialog .free-crop-box { border-color: var(--primary-color) !important; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35) !important; }
body .upload-editor-dialog .crop-handle { background: var(--primary-color) !important; border-color: #FFFFFF !important; box-shadow: none !important; }
body .upload-editor-dialog .crop-mode-label { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .crop-help { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; color: var(--text-secondary) !important; }
body .upload-editor-dialog .crop-help strong { color: var(--text-primary) !important; }
body .upload-editor-dialog .style-picker-section,
body .upload-editor-dialog .upload-settings-panel > section {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
}
body .upload-editor-dialog .upload-mode-tabs button:not(.is-active),
body .upload-editor-dialog .upload-size-recommendations button:not(.is-active) {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
body .upload-editor-dialog .upload-default-button {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
body .upload-editor-dialog .background-removal-option { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .upload-editor-dialog .edge-strength-value, body .upload-editor-dialog .edge-strength-value span,
body .upload-editor-dialog .edge-strength-value em { color: var(--text-secondary) !important; }

/* Gate and login */
body .access-gate { background: var(--bg-main) !important; }
body .access-gate-card { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; }
body .access-gate-icon { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; box-shadow: none !important; }
body .access-gate h1, body .access-gate h2 { color: var(--text-primary) !important; font-size: var(--font-size-base) !important; font-weight: 600 !important; }
body .access-gate p, body .access-gate li { color: var(--text-secondary) !important; }
body .access-gate svg { color: var(--text-secondary) !important; }
body .access-gate ul { border-color: var(--border-color) !important; }
body .access-gate-guest { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; }
body .access-gate-guest:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
body .account-dialog .free-demo-login span, body .account-dialog .free-demo-login small { color: var(--text-secondary) !important; }

/* Replace / adjustments / grid align / similar merge */
body .replace-color-dialog { border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; }
body .replace-color-region-button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .replace-color-select-wrap { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .replace-color-search-input { background: var(--bg-main) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .replace-color-dialog svg { color: var(--text-secondary) !important; }
body .replace-color-summary { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-md) !important; }
body .replace-color-summary * { color: var(--text-primary) !important; }
body .replace-color-summary em { color: var(--primary-color) !important; }
body .adjustment-controls label { background: var(--bg-main) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; color: var(--text-primary) !important; }
body .adjustment-controls label > span { color: var(--text-primary) !important; }
body .adjustment-controls p { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; }
body .adjustment-preview-card { background-color: var(--bg-secondary) !important; background-image: radial-gradient(#E5E5E5 1px, transparent 1px) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .more-tools-back, body .more-tools-close { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; }
body .more-tools-back:hover:not(:disabled), body .more-tools-close:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
body .grid-align-workflow-header p { color: var(--text-secondary) !important; }
body .grid-align-stepper strong { color: var(--text-secondary) !important; }
body .grid-align-stepper strong.is-active { color: var(--primary-color) !important; }
body .grid-align-stepper i { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
body .grid-align-detail-toggle { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
body .grid-align-detail-toggle.is-active { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #FFFFFF !important; }
body .grid-align-size, body .grid-align-color-row { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .grid-align-layer-color-list label { background: var(--bg-main) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .grid-align-layer-color-list button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .grid-align-layer-color-list button:hover { background: var(--bg-hover) !important; }
body .grid-align-message { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; }
body .similar-merge-dialog { border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; }
body .similar-merge-tabs { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm) !important; }
body .similar-merge-tabs button { color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; }
body .similar-merge-tabs button.is-active { background: var(--bg-main) !important; color: var(--primary-color) !important; box-shadow: none !important; }
body .similar-merge-threshold { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .similar-merge-threshold b { color: var(--primary-color) !important; }
body .similar-merge-group { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; }
body .similar-merge-group-top > span, body .similar-merge-source-label, body .similar-merge-note { color: var(--text-secondary) !important; }
body .similar-merge-heading > button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: var(--radius-sm) !important; }

/* Disabled colors */
body .disabled-colors-scopes button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-md) !important; }
body .disabled-colors-scopes button[aria-pressed="true"] { background: var(--bg-secondary) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; box-shadow: none !important; }
body .disabled-colors-scopes span { color: var(--text-secondary) !important; }
body .disabled-colors-scopes em { color: var(--text-secondary) !important; }
body .disabled-colors-intro > span { color: var(--text-secondary) !important; }
body .disabled-colors-intro strong { color: var(--text-primary) !important; }
body .disabled-colors-intro p { color: var(--text-secondary) !important; }
body .disabled-colors-footer { border-top-color: var(--border-color) !important; }
body .disabled-colors-footer > span { color: var(--text-disabled) !important; }
body .disabled-face-heading button, body .disabled-face-actions button, body .disabled-palette-shortcuts button { background: var(--bg-main) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }

/* Toast and typography */
body .toast { background: var(--bg-main) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; }
body h1, body h2, body h3, body h4 { font-family: var(--font-family) !important; font-weight: 600 !important; }
body .field-label, body .dimension-hint, body .upload-format-note, body .crop-help,
body .free-auth-note, body .account-dialog p, body .disabled-colors-hint-note {
  font-size: var(--font-size-xs) !important;
}

/* Radius, accent restraint, and brand background */
body .account-dialog .account-dialog-heading > span,
body .access-gate .access-gate-icon {
  background: url("/assets/brand/doudiantong-mark.png?v=brand-original-20261027") center / cover no-repeat, var(--bg-main) !important;
}
body .account-submit, body .upload-confirm-button, body .access-gate-guest, body .free-demo-button,
body .custom-creation-submit, body .stroke-size-group, body .stroke-size-group button,
body .stroke-current-color, body .focus-code-toggle, body .focus-visibility-toggle,
body .board-preset-trigger, body .auto-color-option, body .detail-priority-option,
body .palette-collapse-toggle, body .upload-mode-tabs, body .style-options,
body .upload-size-recommendations, body .upload-reference-entry, body .upload-default-button,
body .similar-merge-tabs, body .similar-merge-tabs button, body .color-picker-group-heading,
body .free-auth-tabs, body .free-auth-tabs button, body .free-auth-subtabs, body .free-auth-subtabs button,
body .free-code-button, body .free-auth-inline-link, body .free-auth-back,
body .toast, body .free-trial-badge, body .guest-trial-label, body .works-overview > span {
  border-radius: var(--radius-sm) !important;
}
body .similar-merge-threshold, body .similar-merge-group, body .similar-merge-stats > div,
body .adjustment-controls label, body .adjustment-preview-card, body .replace-color-summary,
body .replace-color-select-wrap, body .disabled-colors-scopes button, body .grid-align-size,
body .grid-align-color-row, body .grid-align-layer-color-list label, body .works-overview,
body .works-empty, body .free-trial-card, body .guest-trial-banner, body .free-code-demo,
body .free-auth-notice, body .account-message, body .account-unavailable, body .upload-preview-stage,
body .subject-auto-panel, body .mirror-export-option, body .export-mirror-option, body .export-charge-note,
body .disabled-colors-dialog, body .account-dialog, body .upload-editor-dialog, body .similar-merge-dialog,
body .more-tools-dialog, body .clear-canvas-dialog, body .color-picker-dialog, body .grid-align-dialog {
  border-radius: var(--radius-md) !important;
}
body .export-confirm-dialog .export-confirm-icon { background: var(--bg-secondary) !important; color: var(--text-primary) !important; box-shadow: none !important; }
body .export-confirm-dialog .export-confirm-icon svg { color: var(--text-primary) !important; }
body .account-dialog li svg, body .account-dialog li > span { color: var(--text-secondary) !important; }
body .free-trial-badge, body .guest-trial-label { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
body .account-summary.is-active > span { background: var(--bg-main) !important; color: var(--text-primary) !important; }
body .free-code-demo strong { color: var(--text-primary) !important; }
body .upload-editor-heading p, body .account-dialog-heading p, body .similar-merge-heading p,
body .color-picker-heading p, body .grid-align-workflow-header p, body .more-tools-dialog > header p,
body .disabled-colors-header small, body .access-eyebrow { font-size: var(--font-size-xs) !important; }
body .field-label, body .dimension-hint, body .upload-format-note, body .crop-help,
body .free-auth-note, body .account-dialog p, body .disabled-colors-hint-note { font-size: var(--font-size-xs) !important; }
body .tool-button span { font-size: var(--font-size-xs) !important; }

/* Strict minimal typography and geometry */
body .brand-name::before {
  background-image: url("/assets/brand/doudiantong-mark.png?v=brand-original-20261027"), linear-gradient(var(--bg-main), var(--bg-main)) !important;
  background-size: cover, 100% 100% !important;
}
body .tool-grid-heading::before { background: var(--text-primary) !important; border-radius: 2px !important; }
body .tool-grid-panel .tool-button, body .tool-rail .tool-button,
body .tool-grid-panel .tool-button span, body .tool-rail .tool-button span { font-size: var(--font-size-xs) !important; }
body .tool-grid-panel .tool-button, body .tool-rail .tool-button { border-radius: var(--radius-sm) !important; }
body .pattern-canvas { border-radius: var(--radius-md) !important; }
body .current-color-swatch { border-radius: var(--radius-md) !important; }
body .color-swatch { border-radius: var(--radius-sm) !important; }
body .floating-zoom small, body .zoom-value, body .floating-zoom button { font-size: var(--font-size-xs) !important; }
body .dimension-row span, body .dimension-row label, body .board-resolution-heading span,
body .board-resolution-control small, body .board-resolution-control label, body .field-label { font-size: var(--font-size-xs) !important; }
body .current-color-copy small, body .current-color-copy em, body .current-color-copy strong,
body .focus-color-button, body .clear-color-button, body .palette-row strong, body .palette-row span,
body .palette-row b, body .palette-collapse-toggle, body .palette-total, body .palette-color-count,
body .palette-heading-actions, body .palette-heading-actions select { font-size: var(--font-size-xs) !important; }
body .current-color-actions { min-width: 92px !important; }
body .focus-color-button, body .clear-color-button { white-space: nowrap !important; }
body .stroke-size-group strong, body .stroke-size-group button, body .stroke-current-color { font-size: var(--font-size-xs) !important; }
body .board-preset-menu button span { font-size: var(--font-size-xs) !important; }
body .inspector .field-label, body .inspector .dimension-hint { font-size: var(--font-size-xs) !important; }

body .brand-name::before {
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
body .account-dialog .account-dialog-heading > span,
body .access-gate .access-gate-icon {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Upload mode radios and compact choice controls */
body .upload-editor-dialog .upload-mode-tabs button { border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .upload-mode-tabs button::before {
  border-color: var(--border-color) !important;
  background: var(--bg-main) !important;
  box-shadow: none !important;
}
body .upload-editor-dialog .upload-mode-tabs button.is-active::before {
  border-color: var(--primary-color) !important;
  background: radial-gradient(circle, var(--primary-color) 0 4px, var(--bg-main) 5px) !important;
  box-shadow: none !important;
}
body .upload-editor-dialog .upload-size-recommendations button,
body .upload-editor-dialog .style-options button { border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .upload-size-recommendations,
body .upload-editor-dialog .style-options { border-radius: var(--radius-md) !important; }

/* Works cards */
body .work-card {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
body .work-thumbnail { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius-sm) !important; }
body .work-card strong, body .work-card h3 { color: var(--text-primary) !important; }
body .work-card p, body .work-card small, body .work-card span { color: var(--text-secondary) !important; }
body .work-open {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
body .work-open:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; color: #FFFFFF !important; }
body .work-delete {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}
body .work-delete:hover { background: #FEF2F2 !important; border-color: #FECACA !important; color: #DC2626 !important; }

body .work-card .work-actions button:not(.work-open) {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}
body .work-card .work-actions button:not(.work-open):hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body .work-card button:not(.work-open):not(.work-delete) {
  background: var(--bg-main) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}
body .work-card button:not(.work-open):not(.work-delete):hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* Header download action and page scroll rail */
body .header-actions > .xd-download-button { display: inline-flex !important; }
body .page-scroll-rail:focus-visible { outline-color: var(--border-focus) !important; border-radius: var(--radius-sm) !important; }
body .page-scroll-rail-track {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
body .page-scroll-rail-thumb {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

/* Strict modal type scale and geometry */
body .upload-editor-dialog small,
body .upload-editor-dialog .upload-editor-heading > div > span,
body .upload-editor-dialog .help-dot,
body .upload-editor-dialog .crop-mode-label,
body .upload-editor-dialog .upload-crop-drag-tip,
body .upload-editor-dialog .crop-quick-actions span,
body .upload-editor-dialog .style-options button,
body .upload-editor-dialog .style-options button span,
body .upload-editor-dialog .upload-mode-tabs button,
body .upload-editor-dialog .upload-mode-tabs button strong,
body .upload-editor-dialog .upload-mode-tabs button span,
body .upload-editor-dialog .upload-size-recommendations button,
body .upload-editor-dialog .upload-size-recommendations button strong,
body .upload-editor-dialog .upload-size-recommendations button span,
body .upload-editor-dialog .upload-default-button,
body .upload-editor-dialog .auto-color-option,
body .upload-editor-dialog .detail-priority-option,
body .upload-editor-dialog .edge-strength-value,
body .upload-editor-dialog .edge-strength-value span,
body .upload-editor-dialog .edge-strength-value em,
body .upload-editor-dialog .field-label,
body .upload-editor-dialog em { font-size: var(--font-size-xs) !important; }
body .upload-editor-dialog .upload-reference-entry b { font-size: var(--font-size-base) !important; }
body .upload-editor-dialog .help-dot { min-width: 18px !important; height: 18px !important; line-height: 16px !important; }
body .account-dialog small, body .account-dialog time,
body .account-dialog .free-trial-badge { font-size: var(--font-size-xs) !important; }
body .export-confirm-dialog p, body .export-confirm-dialog small,
body .export-confirm-dialog .export-confirm-grid span { font-size: var(--font-size-xs) !important; }
body .color-picker-dialog .color-picker-group-heading span,
body .color-picker-dialog .all-color-grid button strong,
body .color-picker-dialog .all-color-grid button small { font-size: var(--font-size-xs) !important; }
body .similar-merge-dialog small, body .similar-merge-dialog em { font-size: var(--font-size-xs) !important; }
body .similar-merge-threshold b, body .similar-merge-stats strong { font-size: var(--font-size-base) !important; }
body .disabled-colors-intro strong { font-size: var(--font-size-base) !important; }
body .replace-color-dialog span, body .replace-color-dialog button,
body .replace-color-dialog em { font-size: var(--font-size-xs) !important; }
body .more-tools-dialog small, body .more-tools-dialog label, body .more-tools-dialog p,
body .more-tools-back, body .more-tools-close { font-size: var(--font-size-xs) !important; }
body .grid-align-dialog label, body .grid-align-dialog small,
body .grid-align-dialog .grid-align-color-heading span { font-size: var(--font-size-xs) !important; }
body .assembly-export-dialog small, body .assembly-export-dialog p { font-size: var(--font-size-xs) !important; }

body .upload-editor-dialog .upload-crop-preview { border-radius: var(--radius-md) !important; }
body .upload-editor-dialog .auto-color-option,
body .upload-editor-dialog .detail-priority-option,
body .upload-editor-dialog .similar-color-option { border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .edge-strength-control { border-radius: var(--radius-md) !important; }
body .account-dialog .account-summary { border-radius: var(--radius-md) !important; }
body .account-dialog .account-summary > span { border-radius: var(--radius-sm) !important; }
body .export-confirm-dialog .export-confirm-icon { border-radius: var(--radius-md) !important; }
body .similar-merge-threshold span { border-radius: var(--radius-sm) !important; }
body .color-picker-dialog .all-color-swatch { border-radius: var(--radius-sm) !important; }
body .replace-color-dialog i, body .replace-color-dialog .replace-color-select-wrap span,
body .replace-color-dialog .replace-color-summary i { border-radius: var(--radius-sm) !important; }
body .replace-color-dialog p { border-radius: var(--radius-md) !important; }
body .replace-color-select-wrap i, body .replace-color-select-wrap > span,
body .replace-color-summary i, body .replace-color-summary span { border-color: var(--border-color) !important; }
body .more-tools-dialog .adjustment-preview { border-radius: var(--radius-md) !important; }

body .upload-editor-dialog .upload-setting-title span,
body .upload-editor-dialog .upload-setting-title small { font-size: var(--font-size-xs) !important; }
body .upload-editor-dialog .has-help-dot .help-dot,
body .upload-editor-dialog .help-dot { font-size: var(--font-size-xs) !important; min-width: 18px !important; height: 18px !important; line-height: 16px !important; }
body .upload-editor-dialog em,
body .upload-editor-dialog .upload-size-recommendations em { font-size: var(--font-size-xs) !important; }
body .upload-editor-dialog .auto-color-option strong,
body .upload-editor-dialog .auto-color-option span,
body .upload-editor-dialog .upload-size-recommendations strong,
body .upload-editor-dialog .upload-setting-title strong,
body .upload-editor-dialog .edge-strength-control strong,
body .upload-editor-dialog .edge-strength-control label { font-size: var(--font-size-xs) !important; }
body .upload-editor-dialog .auto-color-option,
body .upload-editor-dialog .detail-priority-option,
body .upload-editor-dialog .similar-color-option { border-radius: var(--radius-sm) !important; }
body .account-dialog .works-overview span,
body .account-dialog .works-overview strong,
body .account-dialog .works-overview small { font-size: var(--font-size-xs) !important; }
body .export-confirm-dialog span { font-size: var(--font-size-xs) !important; }
body .similar-merge-dialog span { border-radius: var(--radius-sm) !important; }
body .replace-color-dialog span, body .replace-color-dialog i { border-radius: var(--radius-sm) !important; }

body .upload-editor-dialog .auto-color-option.has-help-dot,
body .upload-editor-dialog .background-removal-option.has-help-dot,
body .upload-editor-dialog .has-help-dot { border-radius: var(--radius-sm) !important; }
body .upload-editor-dialog .has-help-dot strong,
body .upload-editor-dialog .auto-color-option strong,
body .upload-editor-dialog .background-removal-option strong { font-size: var(--font-size-xs) !important; }
body .upload-editor-dialog .has-help-dot .help-dot { font-size: var(--font-size-xs) !important; }

body .upload-editor-dialog .upload-color-options-row .auto-color-option {
  border-radius: var(--radius-sm) !important;
}
body .upload-editor-dialog .upload-color-options-row .auto-color-option strong {
  font-size: var(--font-size-xs) !important;
}
body .upload-editor-dialog .upload-color-options-row .auto-color-option .help-dot {
  font-size: var(--font-size-xs) !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 16px !important;
}
body .color-picker-dialog .all-color-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 8px !important;
}

body .grid-color-popover, body .grid-color-popover label,
body .grid-color-popover span { color: var(--text-primary) !important; }
body .grid-color-popover button {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}
body .grid-color-popover button:hover { background: var(--bg-hover) !important; }

/* Header avatar, upload outline, and idle tool contrast */
body .account-status-button > svg { color: var(--primary-color) !important; }
body .account-dialog .account-summary > span { color: var(--primary-color) !important; }
body .header-actions > .xd-upload-button {
  border-color: var(--primary-color) !important;
}
body .header-actions > .xd-upload-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--primary-color) !important;
}
body .header-actions > .xd-upload-button svg { color: var(--primary-color) !important; }
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled),
body .tool-rail .tool-button:not(.is-active):not(:disabled) {
  color: var(--text-primary) !important;
}
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled) svg,
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled) .tool-icon,
body .tool-rail .tool-button:not(.is-active):not(:disabled) svg,
body .tool-rail .tool-button:not(.is-active):not(:disabled) .tool-icon {
  color: var(--text-primary) !important;
}
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled):hover,
body .tool-rail .tool-button:not(.is-active):not(:disabled):hover {
  color: var(--text-primary) !important;
}
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled):hover svg,
body .tool-grid-panel .tool-button:not(.is-active):not(:disabled):hover .tool-icon,
body .tool-rail .tool-button:not(.is-active):not(:disabled):hover svg,
body .tool-rail .tool-button:not(.is-active):not(:disabled):hover .tool-icon {
  color: var(--text-primary) !important;
}

body .header-actions > .xd-upload-button,
body .header-actions > .xd-download-button,
body .header-actions > .cloud-save-button,
body .header-actions > .xd-3d-build-trigger {
  border-color: var(--primary-color) !important;
}
body .header-actions > .xd-upload-button:hover,
body .header-actions > .xd-download-button:hover,
body .header-actions > .cloud-save-button:hover,
body .header-actions > .xd-3d-build-trigger:hover {
  border-color: var(--primary-color) !important;
}
body .header-actions > .xd-upload-button svg,
body .header-actions > .xd-download-button svg,
body .header-actions > .cloud-save-button svg,
body .header-actions > .xd-3d-build-trigger svg {
  color: var(--primary-color) !important;
}
body .my-works-entry svg { color: var(--primary-color) !important; }
body .inspector-tabs button:not(.is-active) { color: var(--text-primary) !important; }