/*
 * CloudSail UI system
 *
 * This last cascade layer standardizes the established CloudSail language.
 * Existing page geometry and feature-specific behavior remain locally owned.
 */

:root {
  --cs-ui-font: "Microsoft YaHei UI", "Segoe UI", sans-serif;

  --cs-canvas: #f8f7fb;
  --cs-surface: #ffffff;
  --cs-surface-subtle: #f3f1f7;
  --cs-surface-hover: #faf9fc;
  --cs-surface-selected: #eee9ff;

  --cs-ink: #2b2832;
  --cs-ink-secondary: #6d6876;
  --cs-ink-tertiary: #96919e;
  --cs-border: #e5e1eb;
  --cs-border-strong: #d4cedd;

  --cs-brand: #7c5ce7;
  --cs-brand-hover: #6945ce;
  --cs-brand-soft: #cbbcf7;
  --cs-brand-fog: #eee9ff;
  --cs-focus: rgba(124, 92, 231, 0.34);

  --cs-success: #2d8c67;
  --cs-success-soft: #edf8f3;
  --cs-warning: #a56a17;
  --cs-warning-soft: #fff7e8;
  --cs-danger: #c44f64;
  --cs-danger-soft: #fff1f4;

  --cs-overlay-surface: rgba(43, 40, 50, 0.94);
  --cs-overlay-surface-hover: rgba(255, 255, 255, 0.08);
  --cs-overlay-ink: #ffffff;
  --cs-overlay-muted: rgba(255, 255, 255, 0.64);
  --cs-overlay-border: rgba(255, 255, 255, 0.16);

  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;

  --cs-radius-label: 4px;
  --cs-radius-control: 6px;
  --cs-radius-row: 8px;
  --cs-radius-panel: 8px;
  --cs-radius-shell: 12px;
  --cs-radius-sm: 6px;
  --cs-radius-md: 8px;

  --cs-shadow-control: 0 1px 2px rgba(35, 29, 49, 0.06);
  --cs-shadow-panel: 0 3px 12px rgba(45, 35, 67, 0.065);
  --cs-shadow-shell: 0 18px 46px rgba(39, 30, 58, 0.13);
  --cs-shadow-resting: 0 3px 12px rgba(45, 35, 67, 0.065);
  --cs-shadow-window: 0 18px 46px rgba(39, 30, 58, 0.13);
}

body[data-feature],
body.settings-ui {
  font-family: var(--cs-ui-font);
  font-weight: var(--cs-font-weight-regular);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.efficiency-ui {
  font-family: var(--cs-ui-font);
}

body.efficiency-ui #pluginShell {
  border-radius: var(--cs-radius-shell);
}

/* Normalize deferred main-panel tools without touching CloudieWheel geometry. */
body.efficiency-ui .upgrade-kicker,
body.efficiency-ui .connection-kicker,
body.efficiency-ui .connection-step strong,
body.efficiency-ui .font-protect-head strong,
body.efficiency-ui #fontRefresh,
body.efficiency-ui .theme-group,
body.efficiency-ui .similar-option strong,
body.efficiency-ui .similar-option em,
body.efficiency-ui .dreamina-loading,
body.efficiency-ui .dreamina-advanced summary,
body.efficiency-ui .dreamina-task-head strong,
body.efficiency-ui .dreamina-task-preview {
  font-weight: var(--cs-font-weight-semibold) !important;
}

body.efficiency-ui .theme-name,
body.efficiency-ui .theme-check,
body.efficiency-ui .dreamina-source-state,
body.efficiency-ui .dreamina-field label,
body.efficiency-ui .dreamina-task-copy span {
  font-weight: var(--cs-font-weight-medium) !important;
}

body.efficiency-ui .dreamina-preview-empty,
body.efficiency-ui .dreamina-task-copy small,
body.efficiency-ui .dreamina-task-empty,
body.efficiency-ui .ocr-result {
  font-weight: var(--cs-font-weight-regular) !important;
}

body[data-feature] :is(button, input, select, textarea),
body.settings-ui :is(button, input, select, textarea) {
  font-family: inherit;
  letter-spacing: 0;
}

body[data-feature] [class],
body.settings-ui [class] {
  font-weight: var(--cs-font-weight-regular) !important;
}

body[data-feature] :is(strong, b),
body.settings-ui :is(strong, b) {
  font-weight: var(--cs-font-weight-semibold) !important;
}

body[data-feature] :is(button, [role="button"], label, kbd, output),
body.settings-ui :is(button, [role="button"], label, kbd, output) {
  font-weight: var(--cs-font-weight-semibold) !important;
}

body[data-feature] :is(
  h1,
  h2,
  h3,
  .window-heading strong,
  .page-head h1,
  .timeline-library-dialog-title strong,
  .dreamina-result-placeholder strong
),
body.settings-ui :is(
  h1,
  h2,
  h3,
  .settings-title strong,
  .record-title,
  .shortcut-confirm-title
) {
  font-weight: var(--cs-font-weight-bold) !important;
}

body[data-feature] :is(
  p,
  small,
  .window-heading span,
  .page-head p,
  .section-title span,
  .dreamina-user-message p,
  .dreamina-result-copy span,
  .timeline-library-dialog-title span
),
body.settings-ui :is(
  p,
  small,
  .settings-title span,
  .settings-tab-copy > span,
  .shortcut-current small
) {
  font-weight: var(--cs-font-weight-regular) !important;
}

body[data-feature] :is(
  .window-heading span,
  .page-head p,
  .section-title span,
  .field label,
  .dreamina-setting-row label,
  .timeline-library-dialog-title span
),
body.settings-ui :is(
  .settings-title span,
  .settings-tab-copy > span,
  .shortcut-current small,
  .wheel-visibility-control small
) {
  font-weight: var(--cs-font-weight-medium) !important;
}

body[data-feature] :is(button, input, select, textarea, [tabindex]):focus-visible,
body.settings-ui :is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cs-focus) !important;
  outline-offset: 2px !important;
}

/* Reuse the existing component language with one restrained palette and scale. */
body[data-feature],
body.settings-ui {
  --soft-bg: var(--cs-canvas);
  --soft-bg-alt: var(--cs-canvas);
  --soft-mist: var(--cs-surface-subtle);
  --soft-surface: var(--cs-surface);
  --soft-surface-glass: rgba(255, 255, 255, 0.94);
  --soft-surface-muted: rgba(243, 241, 247, 0.9);
  --soft-line: var(--cs-border);
  --soft-line-strong: var(--cs-border-strong);
  --soft-ink: var(--cs-ink);
  --soft-muted: var(--cs-ink-secondary);
  --soft-faint: var(--cs-ink-tertiary);
  --soft-brand: var(--cs-brand);
  --soft-brand-deep: var(--cs-brand-hover);
  --soft-brand-soft: var(--cs-brand-soft);
  --soft-brand-fog: var(--cs-brand-fog);
  --soft-danger: var(--cs-danger);
  --soft-shadow: var(--cs-shadow-panel);
  --soft-shadow-raised: var(--cs-shadow-shell);
  --soft-radius-label: var(--cs-radius-label);
  --soft-radius-control: var(--cs-radius-control);
  --soft-radius-row: var(--cs-radius-row);
  --soft-radius-card: var(--cs-radius-panel);
  --soft-radius-window: var(--cs-radius-shell);

  --ink: var(--cs-ink);
  --muted: var(--cs-ink-secondary);
  --line: var(--cs-border);
  --glass: rgba(255, 255, 255, 0.94);
  --glass-strong: var(--cs-surface);
  --blue: var(--cs-brand);
  --blue-soft: rgba(124, 92, 231, 0.1);
  --green: var(--cs-success);
  --red: var(--cs-danger);
  --shadow: var(--cs-shadow-panel);
}

/* Feature windows: retain the original structure and sharpen its finish. */
body[data-feature] .window {
  border-color: var(--cs-border-strong);
  border-radius: var(--cs-radius-shell);
  color: var(--cs-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

body[data-feature] .titlebar {
  border-bottom-color: var(--cs-border);
  color: var(--cs-ink);
  background: rgba(255, 255, 255, 0.94);
}

body[data-feature] .product-mark {
  background: var(--cs-brand);
  box-shadow: 0 0 0 3px rgba(124, 92, 231, 0.09);
}

body[data-feature] .window-heading strong,
body[data-feature] .page-head h1,
body[data-feature] .section-title strong {
  color: var(--cs-ink);
}

body[data-feature] :is(
  .window-heading span,
  .page-head p,
  .section-title span,
  .field label
) {
  color: var(--cs-ink-secondary);
}

body[data-feature] .window-control {
  border-color: transparent;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink-secondary);
  background: var(--cs-surface-subtle);
}

body[data-feature] .window-control:hover {
  color: var(--cs-brand-hover);
  border-color: var(--cs-border);
  background: var(--cs-surface);
}

body[data-feature] .window-control.close:hover {
  color: var(--cs-danger);
  border-color: rgba(196, 79, 100, 0.18);
  background: var(--cs-danger-soft);
}

body[data-feature] :is(
  .glass-panel,
  .operation-result,
  .ocr-font-picker
) {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cs-shadow-panel);
}

body[data-feature] :is(select, input, textarea) {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  color: var(--cs-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--cs-shadow-control);
}

body[data-feature] :is(select, input, textarea):hover {
  border-color: var(--cs-brand-soft);
  background: var(--cs-surface);
}

body[data-feature] .button {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  color: var(--cs-ink);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-control);
}

body[data-feature] .button:hover {
  color: var(--cs-brand-hover);
  border-color: var(--cs-brand-soft);
  background: var(--cs-surface-hover);
  box-shadow: var(--cs-shadow-control);
}

body[data-feature] .button.primary {
  color: #ffffff;
  border-color: var(--cs-brand);
  background: linear-gradient(180deg, #8567eb 0%, var(--cs-brand) 100%);
  box-shadow: 0 4px 12px rgba(124, 92, 231, 0.18);
}

body[data-feature] .button.primary:hover {
  color: #ffffff;
  border-color: var(--cs-brand-hover);
  background: var(--cs-brand-hover);
}

body[data-feature] .button.ghost {
  color: var(--cs-ink-secondary);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body[data-feature] .button:disabled {
  color: var(--cs-ink-tertiary);
  border-color: var(--cs-border);
  background: var(--cs-surface-subtle);
  box-shadow: none;
}

body[data-feature] .status-line {
  color: var(--cs-success);
  border-color: rgba(45, 140, 103, 0.24);
  border-radius: var(--cs-radius-row);
  background: var(--cs-success-soft);
  box-shadow: none;
}

body[data-feature] .status-line .status-dot {
  background: var(--cs-success);
  box-shadow: 0 0 0 3px rgba(45, 140, 103, 0.12);
}

body[data-feature] .status-line.busy {
  color: var(--cs-brand-hover);
  border-color: rgba(124, 92, 231, 0.22);
  background: var(--cs-brand-fog);
}

body[data-feature] .status-line.busy .status-dot {
  background: var(--cs-brand);
  box-shadow: 0 0 0 3px rgba(124, 92, 231, 0.12);
}

body[data-feature] .status-line.error {
  color: var(--cs-danger);
  border-color: rgba(196, 79, 100, 0.22);
  background: var(--cs-danger-soft);
}

body[data-feature] .status-line.error .status-dot {
  background: var(--cs-danger);
  box-shadow: 0 0 0 3px rgba(196, 79, 100, 0.11);
}

/* Settings chrome and the established top navigation. */
.settings-ui .settings-shell {
  border-color: var(--cs-border-strong);
  border-radius: var(--cs-radius-shell);
  color: var(--cs-ink);
  box-shadow: var(--cs-shadow-window), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.settings-ui .settings-titlebar {
  border-bottom-color: var(--cs-border);
  color: var(--cs-ink);
  background: rgba(255, 255, 255, 0.95);
}

.settings-ui .settings-title strong {
  color: var(--cs-ink);
  font-weight: var(--cs-font-weight-bold);
}

.settings-ui .settings-title span {
  color: var(--cs-ink-secondary);
}

.settings-ui :is(.settings-window-button, .settings-language-button) {
  border-radius: var(--cs-radius-control);
  color: var(--cs-ink-secondary);
}

.settings-ui .settings-language-button {
  color: var(--cs-brand-hover);
  border-color: var(--cs-border);
  background: var(--cs-surface);
}

.settings-ui :is(.settings-window-button, .settings-language-button):hover {
  color: var(--cs-brand-hover);
  border-color: var(--cs-border);
  background: var(--cs-surface-hover);
}

.settings-ui .settings-window-button.close:hover {
  color: var(--cs-danger);
  background: var(--cs-danger-soft);
}

.settings-ui .settings-titlebar .settings-tab {
  border-color: transparent;
  border-radius: var(--cs-radius-control);
  color: var(--cs-ink-secondary);
  background: transparent;
  box-shadow: none;
}

.settings-ui .settings-titlebar .settings-tab:hover {
  color: var(--cs-ink);
  border-color: transparent;
  background: var(--cs-surface-subtle);
}

.settings-ui .settings-titlebar .settings-tab.active {
  color: var(--cs-brand-hover);
  border-color: rgba(124, 92, 231, 0.12);
  background: var(--cs-brand-fog);
  box-shadow: inset 0 -2px 0 var(--cs-brand);
}

.settings-ui .settings-titlebar .settings-tab-icon {
  border-radius: var(--cs-radius-control);
  color: var(--cs-ink-secondary);
  background: var(--cs-surface-subtle);
}

.settings-ui .settings-titlebar .settings-tab.active .settings-tab-icon {
  color: #ffffff;
  background: linear-gradient(180deg, #896bef 0%, var(--cs-brand) 100%);
  box-shadow: var(--cs-shadow-control);
}

.settings-ui .settings-titlebar .settings-tab strong {
  color: inherit;
  font-weight: var(--cs-font-weight-semibold);
}

/* Shortcut mapping: preserve the keyboard and list, normalize their states. */
.settings-ui .shortcut-keyboard-stage {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cs-shadow-resting);
}

.settings-ui .shortcut-stage-heading strong,
.settings-ui .shortcut-current strong {
  color: var(--cs-ink);
}

.settings-ui :is(
  .shortcut-stage-heading > div:first-child span,
  .shortcut-stage-legend,
  .shortcut-current small,
  .shortcut-group-heading strong
) {
  color: var(--cs-ink-secondary);
}

.settings-ui .shortcut-stage-legend i {
  background: var(--cs-border-strong);
}

.settings-ui .shortcut-stage-legend i.configured {
  background: var(--cs-brand-soft);
}

.settings-ui .shortcut-key {
  color: var(--cs-ink-tertiary);
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  background: #f2f1f5;
  box-shadow: inset 0 -1px 0 rgba(45, 35, 67, 0.07);
}

.settings-ui .shortcut-key.is-configured,
.settings-ui .shortcut-key.modifier-shift,
.settings-ui .shortcut-key.modifier-ctrl,
.settings-ui .shortcut-key.modifier-alt {
  color: #69636f;
  border-color: #dedbe4;
  background: #f7f6f9;
}

.settings-ui .shortcut-key.is-configured:hover {
  color: #5f4fa0;
  border-color: #c9bdf0;
  background: #f2effb;
  box-shadow: var(--cs-shadow-control);
}

.settings-ui .shortcut-key.is-active,
.settings-ui .shortcut-key.modifier-shift.is-active,
.settings-ui .shortcut-key.modifier-ctrl.is-active,
.settings-ui .shortcut-key.modifier-alt.is-active {
  color: #ffffff;
  border-color: var(--cs-brand-hover);
  background: linear-gradient(145deg, #896bef, #6846cf);
  box-shadow: 0 3px 9px rgba(105, 69, 206, 0.22), inset 0 -2px 0 rgba(67, 39, 137, 0.14);
}

.settings-ui .shortcut-key.is-configured.is-active:hover,
.settings-ui .shortcut-key.modifier-shift.is-active:hover,
.settings-ui .shortcut-key.modifier-ctrl.is-active:hover,
.settings-ui .shortcut-key.modifier-alt.is-active:hover {
  color: #ffffff;
  border-color: var(--cs-brand-hover);
  background: linear-gradient(145deg, #896bef, #6846cf);
  box-shadow: 0 4px 11px rgba(105, 69, 206, 0.26), inset 0 -2px 0 rgba(67, 39, 137, 0.14);
}

.settings-ui :is(
  .shortcut-current-record,
  .shortcut-current-toggle,
  .shortcut-mapping-heading .reset-shortcuts
) {
  color: var(--cs-ink-secondary);
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-control);
}

.settings-ui :is(
  .shortcut-current-record,
  .shortcut-mapping-heading .reset-shortcuts
):hover {
  color: var(--cs-brand-hover);
  border-color: var(--cs-brand-soft);
  background: var(--cs-surface-hover);
}

.settings-ui .shortcut-current-toggle.on {
  color: var(--cs-brand-hover);
}

.settings-ui .shortcut-current-toggle i {
  background: var(--cs-border-strong);
}

.settings-ui .shortcut-current-toggle.on i {
  background: var(--cs-brand);
}

.settings-ui .shortcut-current span {
  color: var(--cs-brand-hover);
}

.settings-ui .shortcut-current-keys kbd,
.settings-ui .shortcut-list .kbd {
  color: var(--cs-brand-hover);
  border-color: #d8cef7;
  border-radius: var(--cs-radius-control);
  background: #f1edff;
  box-shadow: inset 0 -1px 0 rgba(124, 92, 231, 0.08);
}

.settings-ui .shortcut-current-keys :is(i, em),
.settings-ui .shortcut-group-heading span {
  color: var(--cs-ink-tertiary);
}

.settings-ui .shortcut-list-wrap {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--cs-shadow-panel);
}

.settings-ui .shortcut-group + .shortcut-group {
  border-top-color: var(--cs-border);
}

.settings-ui .shortcut-list .shortcut-row {
  color: var(--cs-ink);
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.settings-ui .shortcut-list .shortcut-row:hover {
  color: var(--cs-ink);
  border-color: var(--cs-brand-soft);
  background: var(--cs-surface-hover);
}

.settings-ui .shortcut-list .shortcut-row.selected {
  color: var(--cs-ink);
  border-color: rgba(124, 92, 231, 0.32);
  border-radius: var(--cs-radius-control);
  background: var(--cs-brand-fog);
  box-shadow: inset 2px 0 0 var(--cs-brand);
}

.settings-ui .shortcut-list .row-title {
  color: inherit;
  font-weight: var(--cs-font-weight-semibold);
}

.settings-ui .shortcut-health,
.settings-ui .connection-check {
  color: var(--cs-ink-secondary);
  background: transparent;
  box-shadow: none;
}

.settings-ui .shortcut-health strong,
.settings-ui .connection-check {
  color: var(--cs-ink-secondary);
}

.settings-ui .shortcut-health span {
  color: var(--cs-ink-tertiary);
}

.settings-ui #shortcutHealth[data-tone="idle"] i {
  background: var(--cs-ink-tertiary);
}

.settings-ui #shortcutHealth[data-tone="ok"] i,
.settings-ui #connectionCheck i {
  background: var(--cs-success);
}

.settings-ui #shortcutHealth[data-tone="warn"] i {
  background: var(--cs-warning);
}

.settings-ui #shortcutHealth[data-tone="warn"] strong {
  color: var(--cs-warning);
}

.settings-ui #shortcutHealth[data-tone="danger"] i,
.settings-ui.connection-failed #connectionCheck i {
  background: var(--cs-danger);
}

.settings-ui #shortcutHealth[data-tone="danger"] strong,
.settings-ui.connection-failed #connectionCheck {
  color: var(--cs-danger);
}

/* Other settings pages reuse the same cards and controls without new layout. */
.settings-ui :is(
  .pet-status-card,
  .pet-setting-card,
  .account-card,
  .account-compact-row,
  .inline-login,
  .experiment-card,
  .record-modal,
  .shortcut-confirm-card
) {
  color: var(--cs-ink);
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cs-shadow-panel);
}

.settings-ui :is(.record-modal, .shortcut-confirm-card) {
  box-shadow: var(--cs-shadow-shell);
}

.settings-ui :is(
  .pet-action,
  .account-update-button,
  .account-guide-button,
  .login-submit,
  .record-actions button,
  .shortcut-confirm-actions button
) {
  border-radius: var(--cs-radius-control);
  box-shadow: var(--cs-shadow-control);
}

.settings-ui .login-input {
  color: var(--cs-ink);
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-control);
  background: var(--cs-surface);
  box-shadow: var(--cs-shadow-control);
}

/* Complete the settings hierarchy without changing page geometry. */
.settings-ui :is(
  .pet-visual-stage,
  .wheel-preview-stage,
  .wheel-settings-card,
  .theme-palette-settings,
  .theme-palette-preview,
  .onboarding-hero,
  .onboarding-step,
  .onboarding-tool,
  .onboarding-info,
  .onboarding-safety,
  .experiment-note
) {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
}

.settings-ui :is(
  .record-modal,
  .shortcut-confirm-card,
  .upgrade-modal,
  .connection-modal
) {
  border-radius: var(--cs-radius-shell);
}

.settings-ui :is(
  .shortcut-health,
  .connection-check,
  .account-info-row,
  .theme-palette-placement-summary
) {
  border-radius: var(--cs-radius-row);
}

.settings-ui :is(
  .settings-tab-icon,
  .experiment-icon,
  .shortcut-confirm-icon,
  .user-page[data-signed-in="true"] .avatar
) {
  border-radius: var(--cs-radius-label);
}

.settings-ui :is(
  .settings-tab strong,
  .shortcut-stage-heading strong,
  .shortcut-current strong,
  .shortcut-group-heading strong,
  .account-name,
  .experiment-copy strong,
  .theme-palette-title strong,
  .effect-group-title
) {
  font-weight: var(--cs-font-weight-semibold) !important;
}

/* Feature-specific cards and menus share the same 4/6/8/12 hierarchy. */
body[data-feature] :is(
  .theme-scope-card,
  .mode-tabs,
  .ocr-scope-tabs,
  .dreamina-mode-switch,
  .similar-option,
  .dreamina-assistant-card,
  .dreamina-composer,
  .dreamina-source-tray,
  .dreamina-reference-menu,
  .dreamina-settings-menu,
  .timeline-library-dialog,
  .timeline-layer-menu,
  .timeline-trigger-menu,
  .effect-group,
  .image-effects-preview,
  .image-effects-bottom-toolbar,
  .image-effects-workflow-switcher,
  .image-effects-workflow-panel,
  .color-grading-section,
  .effect-gradient-editor,
  .effect-brush-editor,
  .effect-gradient-stop-editor,
  .effect-brush-controls
) {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
}

body[data-feature] :is(
  .pick-button,
  .ocr-back,
  .ocr-font-picker-head button,
  .mode-tabs button,
  .ocr-scope-tabs button,
  .dreamina-mode-switch button,
  .dreamina-clear-completed,
  .dreamina-task-selector,
  .dreamina-result-action,
  .dreamina-source-clear,
  .dreamina-add-reference,
  .dreamina-more-settings,
  .dreamina-reference-menu button,
  .timeline-toolbar button,
  .timeline-mini-button,
  .timeline-library-toolbar button,
  .timeline-library-toolbar select,
  .timeline-library-actions button,
  .timeline-trigger-button,
  .timeline-trigger-option,
  .effect-reset,
  .effect-preset,
  .image-effects-draw-button,
  .effect-gradient-reverse,
  .effect-gradient-modes button,
  .effect-gradient-stop-remove,
  .effect-mask-add,
  .effect-mask-layer,
  .effect-mask-layer-nav button,
  .effect-brush-actions button,
  .image-effects-workflow-tabs button,
  .image-effects-preview-backgrounds button,
  .image-effects-preview-actions button
) {
  border-radius: var(--cs-radius-control);
  font-weight: var(--cs-font-weight-semibold) !important;
}

body[data-feature] :is(
  .section-title strong,
  .theme-copy strong,
  .ocr-font-copy strong,
  .similar-option strong,
  .dreamina-stream-state strong,
  .dreamina-result-copy strong,
  .dreamina-source-copy strong,
  .timeline-slide-meta strong,
  .timeline-layer-head strong,
  .timeline-object-name,
  .timeline-library-name-copy strong,
  .effect-group-title,
  .color-grading-section-head strong
) {
  font-weight: var(--cs-font-weight-semibold) !important;
}

/* Dreamina keeps its workflow but no longer carries a second cyan brand. */
body[data-feature="dreamina"] :is(
  .dreamina-auth,
  .dreamina-credit-badge,
  .dreamina-assistant-card,
  .dreamina-composer,
  .dreamina-source-tray,
  .dreamina-reference-menu,
  .dreamina-settings-menu,
  .dreamina-select-control
) {
  color: var(--cs-ink);
  border-color: var(--cs-border);
  background: var(--cs-surface);
}

body[data-feature="dreamina"] :is(
  .dreamina-result-action,
  .dreamina-clear-completed,
  .dreamina-task-selector,
  .dreamina-add-reference,
  .dreamina-more-settings,
  .dreamina-reference-menu button
) {
  color: var(--cs-brand-hover);
  border-color: var(--cs-border);
  background: var(--cs-surface-hover);
}

body[data-feature="dreamina"] .dreamina-submit {
  color: #ffffff;
  border-color: var(--cs-brand);
  background: var(--cs-brand);
}

body[data-feature="dreamina"] .dreamina-loader {
  border-color: var(--cs-border);
  border-top-color: var(--cs-brand);
}

/* Timeline keeps its semantic animation colors; chrome uses CloudSail neutrals. */
body[data-feature="timeline"],
body[data-feature="timeline"] :is(#timelinePage, .timeline-workspace, .timeline-scroll, .timeline-empty) {
  color: var(--cs-ink);
  background: var(--cs-canvas);
}

body[data-feature="timeline"] :is(
  .timeline-toolbar,
  .timeline-footer,
  .timeline-inspector,
  .timeline-layer-pane,
  .timeline-layer-head,
  .timeline-layer-search,
  .timeline-layer-actions,
  .timeline-layer-list,
  .timeline-layer-item,
  .timeline-layer-menu,
  .timeline-trigger-menu,
  .timeline-library-dialog,
  .timeline-library-content,
  .timeline-library-view,
  .timeline-library-toolbar,
  .timeline-library-list,
  .timeline-library-item
) {
  color: var(--cs-ink);
  border-color: var(--cs-border);
  background: var(--cs-surface);
}

body[data-feature="timeline"] :is(
  .timeline-slide-meta span,
  .timeline-sync,
  .timeline-inspector,
  .timeline-layer-summary,
  .timeline-layer-meta,
  .timeline-library-summary,
  .timeline-library-description,
  .timeline-library-timing,
  .timeline-footer
) {
  color: var(--cs-ink-secondary);
}

/* Image processing keeps its validated workspace geometry and interaction model. */
body[data-feature="imageEffects"] .content {
  background: var(--cs-canvas);
}

body[data-feature="imageEffects"] :is(
  .effect-group,
  .image-effects-workflow-switcher,
  .image-effects-workflow-panel,
  .color-grading-section
) {
  border-color: var(--cs-border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--cs-shadow-control);
}

body[data-feature="imageEffects"] .effect-group::before {
  background: var(--cs-brand-soft);
}

body[data-feature="imageEffects"] :is(
  .image-effects-workflow-tabs button.active,
  .color-grading-presets .effect-preset.active
) {
  color: #ffffff;
  border-color: var(--cs-brand);
  background: var(--cs-brand);
  box-shadow: var(--cs-shadow-control);
}

body[data-feature="imageEffects"] .image-effects-preview-toolbar {
  border-color: var(--cs-border);
  border-radius: var(--cs-radius-panel);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--cs-shadow-panel);
}

body[data-feature="imageEffects"] .effect-group-head > div > span {
  font-weight: var(--cs-font-weight-medium) !important;
}

body[data-feature="imageEffects"] .effect-gradient-rail > span {
  font-weight: var(--cs-font-weight-semibold) !important;
}


@media (prefers-reduced-motion: reduce) {
  body[data-feature] *,
  body.settings-ui :is(.settings-tab, .shortcut-page *, .experiment-page *, .user-page *) {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}