/* Minimal grayscale + pink base layer */
:root {
  --ddt-ink: #1E1E1E;
  --ddt-ink-2: #1E1E1E;
  --ddt-muted: #8C8C8C;
  --ddt-pink: #E0246F;
  --ddt-pink-deep: #E0246F;
  --ddt-pink-soft: #E5E5E5;
  --ddt-pink-pale: #F5F5F5;
  --ddt-line: #E5E5E5;
  --ddt-card: #ffffff;
  --ddt-shadow: 0 12px 30px rgba(0, 0, 0, .05);
  --admin-ink: #1E1E1E;
  --admin-muted: #8C8C8C;
  --admin-line: #E5E5E5;
  --admin-mint: #E0246F;
  --admin-mint-dark: #E0246F;
  --admin-paper: #FFFFFF;
  --admin-warm: #8C8C8C;
  color: var(--ddt-ink);
  background: #fff;
}

body {
  background:
    radial-gradient(circle at 10% 0%, #F5F5F5 0, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 95% 5%, #F5F5F5 0, rgba(255, 255, 255, 0) 28%),
    #fff !important;
  color: var(--ddt-ink) !important;
}
body #root, body .app-shell, body .workbench { background: #fff !important; color: var(--ddt-ink) !important; }
body ::selection { background: #E5E5E5 !important; color: #1E1E1E !important; }
body * { scrollbar-color: #E5E5E5 #fff !important; }
body *::-webkit-scrollbar-track { background: #fff !important; }
body *::-webkit-scrollbar-thumb { background: #E5E5E5 !important; border: 2px solid #fff !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 */
body .app-header {
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid #E5E5E5 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05) !important;
}
body .header-divider { background: #E5E5E5 !important; }
body .document-name { color: #1E1E1E !important; }
body .save-state { color: #8C8C8C !important; }
body .save-state.is-dirty { color: #E0246F !important; }
body .save-state.is-dirty::before { background: #E0246F !important; box-shadow: 0 0 0 4px rgba(0, 0, 0, .05) !important; }
body .header-tip { color: #8C8C8C !important; }
body .header-tip strong { color: #E0246F !important; }
body .account-status-button {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05) !important;
}
body .account-status-button:hover { border-color: #BFBFBF !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important; }
body .account-status-button.is-login-cta {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05) !important;
}
body .account-status-button.is-login-cta:hover { background: #E5E5E5 !important; filter: none !important; }
body .account-status-button.is-login-cta small { color: #8C8C8C !important; }
body .account-status-button.is-active { background: #F5F5F5 !important; border-color: #E5E5E5 !important; color: #1E1E1E !important; }
body .my-works-entry {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05) !important;
}
body .my-works-entry:hover { background: #F5F5F5 !important; border-color: #BFBFBF !important; color: #E0246F !important; }

/* Buttons */
body .button { color: #1E1E1E !important; }
body .button.secondary, body .button.custom-create-button, body .button.guest-entry,
body .button.soft, body .button.cloud-save-button, body .button.mosaic-entry,
body .button.outline-unify-trigger, body .similar-merge-trigger,
body .upload-replace-button, body .disabled-colors-hint-open {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05) !important;
}
body .button.secondary:hover, body .button.custom-create-button:hover, body .button.guest-entry:hover,
body .button.soft:hover, body .button.cloud-save-button:hover, body .button.mosaic-entry:hover,
body .button.outline-unify-trigger:hover, body .similar-merge-trigger:hover,
body .upload-replace-button:hover, body .disabled-colors-hint-open:hover {
  background: #F5F5F5 !important;
  border-color: #BFBFBF !important;
  color: #E0246F !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05) !important;
}
body .button.primary, body .account-submit, body .upload-confirm-button,
body .access-gate-action, body .outline-unify-trigger, body .free-demo-button,
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 .custom-creation-submit {
  background: linear-gradient(180deg, #F5F5F5, #E0246F) !important;
  border: 1px solid #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05), inset 0 1px 0 #fff !important;
  text-shadow: none !important;
}
body .button.primary:hover, body .account-submit:hover, body .upload-confirm-button:hover,
body .access-gate-action:hover, body .outline-unify-trigger:hover, body .free-demo-button: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 .custom-creation-submit:hover {
  background: linear-gradient(180deg, #E5E5E5, #E0246F) !important;
  border-color: #BFBFBF !important;
  color: #E0246F !important;
}
body .button.primary svg, body .account-submit svg, body .upload-confirm-button svg,
body .access-gate-action svg, body .outline-unify-trigger svg, body .free-demo-button svg {
  color: inherit !important;
}

/* Active switches, tabs and tools */
body .tool-button { color: #8C8C8C !important; }
body .tool-button:hover { background: #F5F5F5 !important; color: #E0246F !important; }
body .tool-button.is-active {
  background: #F5F5F5 !important;
  border: 1px solid #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: inset 0 0 0 1px #fff, 0 4px 12px rgba(0, 0, 0, .05) !important;
}
body .tool-button.is-active svg { color: #E0246F !important; }
body .view-tabs { background: #fff !important; border-color: #E5E5E5 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important; }
body .view-tabs button { color: #8C8C8C !important; }
body .view-tabs button:hover { background: #F5F5F5 !important; color: #E0246F !important; }
body .view-tabs button.is-active {
  background: #F5F5F5 !important;
  color: #E0246F !important;
  box-shadow: inset 0 0 0 1px #E5E5E5, 0 3px 10px rgba(0, 0, 0, .05) !important;
}
body .view-tabs button.is-focus-tab { color: #E0246F !important; }
body .canvas-controls { background: #fff !important; border-color: #E5E5E5 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important; }
body .canvas-controls button.is-active { background: #F5F5F5 !important; color: #E0246F !important; box-shadow: inset 0 0 0 1px #E5E5E5 !important; }
body .inspector-tabs { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .inspector-tabs button { color: #8C8C8C !important; }
body .inspector-tabs button.is-active {
  background: #F5F5F5 !important;
  color: #E0246F !important;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .05) !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: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: inset 0 0 0 1px #fff, 0 3px 9px rgba(0, 0, 0, .05) !important;
}
body .focus-code-toggle.is-active, body .focus-visibility-toggle.is-active {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
}
body .free-auth-tabs, body .free-auth-subtabs { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .free-auth-tabs button, body .free-auth-subtabs button { color: #8C8C8C !important; }
body .free-auth-tabs button.is-active, body .free-auth-subtabs button.is-active { color: #E0246F !important; }
body .free-code-button, body .free-auth-inline-link, body .free-auth-back { color: #E0246F !important; background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .free-code-button:hover, body .free-auth-inline-link:hover, body .free-auth-back:hover { background: #F5F5F5 !important; color: #E0246F !important; }
body .free-demo-button { color: #E0246F !important; }

/* Surface cards */
body .tool-rail, body .inspector {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .05) !important;
}
body .canvas-stage {
  background-color: #fff !important;
  background-image: radial-gradient(#E5E5E5 1px, transparent 1.1px) !important;
  background-size: 24px 24px !important;
  border-color: #E5E5E5 !important;
  box-shadow: inset 0 0 0 1px #fff, 0 8px 24px rgba(0, 0, 0, .05) !important;
}
body .pattern-canvas { box-shadow: 0 10px 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: #fff !important;
  border-color: #E5E5E5 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05) !important;
}
body .floating-zoom button:hover { background: #F5F5F5 !important; color: #E0246F !important; }
body .inspector-section { border-bottom-color: #E5E5E5 !important; }
body .disabled-colors-hint {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important;
  color: #1E1E1E !important;
}
body .current-color-card { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .current-color-card.is-empty { background: #fff !important; border-color: #E5E5E5 !important; }
body .palette-row:hover, body .palette-row.is-active { background: #F5F5F5 !important; }
body .palette-row.is-active { box-shadow: inset 0 0 0 1px #E5E5E5 !important; }
body .palette-total { border-top-color: #E5E5E5 !important; }
body .board-resolution-control, body .edge-strength-control { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .auto-color-option, body .board-preset-trigger { background: #fff !important; border-color: #E5E5E5 !important; color: #1E1E1E !important; }
body .auto-color-option.is-enabled, body .board-preset-trigger:hover { background: #F5F5F5 !important; border-color: #E5E5E5 !important; box-shadow: none !important; }
body .detail-priority-option { background: #fff !important; border-color: #E5E5E5 !important; }
body .detail-priority-option.is-enabled { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .edge-strength-value input { background: #fff !important; border-color: #E5E5E5 !important; }
body .outline-entry-actions button { background: #fff !important; border-color: #E5E5E5 !important; color: #1E1E1E !important; }
body .outline-entry-actions button:hover { background: #F5F5F5 !important; border-color: #BFBFBF !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: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !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 {
  border-color: #E0246F !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .05) !important;
}
body input[type="range"], body .range-control { accent-color: #E0246F !important; }
body input[type="checkbox"], body input[type="radio"] { accent-color: #E0246F !important; }
body option { background: #fff !important; color: #1E1E1E !important; }
body .board-resolution-range { accent-color: #E0246F !important; }

/* Dialogs and secondary surfaces */
body [class*="backdrop"] { background: rgba(17, 24, 39, .35) !important; backdrop-filter: blur(7px) !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 {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .05) !important;
  color: #1E1E1E !important;
}
body .account-message, body .account-unavailable { background: #F5F5F5 !important; color: #E0246F !important; }
body .free-trial-card { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .free-trial-badge { background: #F5F5F5 !important; color: #E0246F !important; border: 1px solid #E5E5E5 !important; }
body .account-summary.is-active { background: #F5F5F5 !important; border-color: #E5E5E5 !important; color: #1E1E1E !important; }
body .account-summary.is-active > span { background: #fff !important; color: #E0246F !important; }
body .account-summary.is-active strong { color: #1E1E1E !important; }
body .account-summary.is-active small { color: #8C8C8C !important; }
body .account-form-error { color: #DC2626 !important; }
body .free-code-demo, body .free-auth-notice { background: #F5F5F5 !important; border-color: #E5E5E5 !important; color: #E0246F !important; }
body .free-code-demo strong { color: #E0246F !important; }
body .free-auth-tabs { background: #F5F5F5 !important; }
body .free-auth-note { color: #8C8C8C !important; }
body .upload-editor-heading p, body .account-dialog-heading p, body .similar-merge-heading p, body .color-picker-heading p { color: #E0246F !important; }
body .upload-editor-footer { background: #fff !important; border-top-color: #E5E5E5 !important; }
body .upload-format-note, body .crop-help, body .dimension-hint { color: #8C8C8C !important; }
body .upload-preview-stage { background-color: #fff !important; background-image: radial-gradient(#E5E5E5 1px, transparent 1.1px) !important; background-size: 20px 20px !important; }
body .subject-auto-panel { background: #F5F5F5 !important; border-color: #E5E5E5 !important; }
body .style-picker-section { background: #fff !important; border-bottom-color: #E5E5E5 !important; }
body .style-options button { background: #fff !important; border-color: #E5E5E5 !important; color: #8C8C8C !important; }
body .style-options button:hover { background: #F5F5F5 !important; border-color: #BFBFBF !important; color: #E0246F !important; }
body .mirror-export-option, body .export-mirror-option {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
}
body .mirror-export-option strong, body .export-mirror-option strong { color: #1E1E1E !important; }
body .mirror-export-option small, body .export-mirror-option small { color: #8C8C8C !important; }
body .mirror-export-option input, body .export-mirror-option input { accent-color: #E0246F !important; }
body .export-charge-note { background: #F5F5F5 !important; color: #8C8C8C !important; border-color: #E5E5E5 !important; }
body .export-more-formats > span { color: #8C8C8C !important; }

/* Guest / access surfaces */
body .access-gate {
  background:
    radial-gradient(circle at 18% 10%, #F5F5F5 0, transparent 36%),
    radial-gradient(circle at 86% 82%, #F5F5F5 0, transparent 34%),
    #fff !important;
}
body .access-gate-card { background: #fff !important; border-color: #E5E5E5 !important; box-shadow: 0 18px 46px rgba(0, 0, 0, .05) !important; }
body .access-gate-icon { background: #F5F5F5 !important; color: #E0246F !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .05) !important; }
body .access-eyebrow { color: #E0246F !important; }
body .guest-trial-banner {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important;
}
body .guest-trial-label { background: #F5F5F5 !important; color: #E0246F !important; }
body .guest-trial-banner button { background: #F5F5F5 !important; border-color: #E5E5E5 !important; color: #E0246F !important; }
body .guest-trial-banner button:hover { background: #E5E5E5 !important; }
body .mosaic-result-page { background: #fff !important; }
body .mosaic-result-header { background: #fff !important; border-bottom-color: #E5E5E5 !important; }
body .toast {
  background: #fff !important;
  color: #1E1E1E !important;
  border: 1px solid #E5E5E5 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .05) !important;
}
body .admin-shell, body .admin-login { background: #fff !important; color: var(--ddt-ink) !important; }

/* More specific active tool and brush surfaces */
body .tool-grid-panel .tool-button.is-active {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: inset 0 0 0 1px #fff, 0 4px 12px rgba(0, 0, 0, .05) !important;
}
body .tool-grid-panel .tool-button.is-active .tool-icon { color: #E0246F !important; }
body .stroke-options {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05) !important;
}
body .stroke-size-group strong { color: #1E1E1E !important; }
body .stroke-size-group button {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
}
body .stroke-size-group button:hover,
body .stroke-size-group button.is-active,
body .stroke-size-group button.is-selected {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
}
body .stroke-current-color {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
}
body .stroke-current-color:hover { background: #F5F5F5 !important; border-color: #BFBFBF !important; }

/* Remaining saturated dialog accents */
body .upload-editor-dialog .upload-replace-actions .upload-replace-button {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05) !important;
}
body .upload-editor-dialog .upload-replace-actions .upload-replace-button:hover {
  background: #F5F5F5 !important;
  border-color: #BFBFBF !important;
  color: #E0246F !important;
  filter: none !important;
}
body .export-confirm-backdrop .export-confirm-actions .button.primary {
  background: linear-gradient(180deg, #F5F5F5, #E0246F) !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05), inset 0 1px 0 #fff !important;
}
body .export-confirm-backdrop .export-confirm-actions .button.primary:hover {
  background: linear-gradient(180deg, #E5E5E5, #E0246F) !important;
  border-color: #BFBFBF !important;
  color: #E0246F !important;
}
body .export-confirm-dialog .export-confirm-icon {
  background: #F5F5F5 !important;
  color: #E0246F !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .05) !important;
}
body .export-confirm-dialog .export-confirm-icon svg { color: #E0246F !important; }
body .export-confirm-dialog .export-mirror-option {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !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: #1E1E1E !important;
}
body .export-confirm-dialog .export-mirror-option small { color: #8C8C8C !important; }
body .export-confirm-dialog .export-mirror-option input[type="checkbox"] {
  border-color: #E0246F !important;
  background: #fff !important;
}
body .export-confirm-dialog .export-mirror-option input[type="checkbox"]::before {
  border-color: #E0246F !important;
}
body .export-confirm-dialog .export-mirror-option input[type="checkbox"]:checked {
  background: #F5F5F5 !important;
  border-color: #E0246F !important;
}

/* Assembly mode active states */
body .assembly-size-options button,
body .assembly-mode-options button,
body .assembly-selection-actions button {
  background: #fff !important;
  border-color: #E5E5E5 !important;
  color: #1E1E1E !important;
  box-shadow: none !important;
}
body .assembly-size-options button[aria-pressed="true"],
body .assembly-mode-options button[aria-pressed="true"] {
  background: #F5F5F5 !important;
  border-color: #E5E5E5 !important;
  color: #E0246F !important;
  box-shadow: inset 0 0 0 1px #fff, 0 3px 9px rgba(0, 0, 0, .05) !important;
}