/* Appearance layer: keep the established light UI and original image colors. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-elevated: #edf3fb;
  --input-bg: #ffffff;
  --theme-preview-night-bg: #09090b;
  --theme-preview-night-panel: #18181c;
  --theme-preview-night-line: #34343e;
}
html[data-dark-palette="navy"] {
  --theme-preview-night-bg: #050810;
  --theme-preview-night-panel: #0b101c;
  --theme-preview-night-line: #202b3e;
}
html[data-theme="dark"] {
  --blue: #9abbef;
  --blue-hover: #bfd5ff;
  --green: #74d4ae;
  --text: #f2f2f5;
  --muted: #acacb7;
  --line: #34343e;
  --subtle: #111115;
  --blue-soft: #17263d;
  --green-soft: #173026;
  --red: #ff91a7;
  --amber: #e9c27f;
  --purple: #bfa5ef;
  --bg: #09090b;
  --surface: #18181c;
  --surface-soft: #111115;
  --surface-elevated: #23232a;
  --input-bg: #111115;
  --shadow: 0 18px 45px #00000066;
  background: var(--bg);
  color-scheme: dark;
}
html[data-theme="dark"][data-dark-palette="navy"] {
  --blue: #a0b9e0;
  --blue-hover: #c3d6f4;
  --text: #edf0f7;
  --muted: #9ca8bd;
  --line: #202b3e;
  --subtle: #0e1523;
  --blue-soft: #14243d;
  --green-soft: #112a26;
  --bg: #050810;
  --surface: #0b101c;
  --surface-soft: #0e1523;
  --surface-elevated: #141e30;
  --input-bg: #0e1523;
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] body { background: var(--bg); }
html[data-theme="dark"] :is(
  .left-nav, .right-rail, .topbar, .search-results, .card, .board-card,
  .modal, .modal-head, .modal-foot, .chat-window, .chat-input-row, .message,
  .portal-messenger, .mail-row, .department-card, .org-person,
  .integration-card, .org-metrics, .brand-gradient-sample, .security-account,
  .kanplan-table-footer, .crm-menu, .rail-person-label, .emoji-picker,
  .message-menu, .radio-popover, .ep-dialog .modal-head, .ep-tabs,
  .ep-panel, .ep-mail-card, .ep-add, .ep-quick button, .ep-demo-warning,
  .ep-mail-filters button.active, .radio-tabs button[aria-pressed="true"],
  .task-board-col, .task-plan-card, .task-day
) { background: var(--surface); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(
  .global-search, .search-active .global-search, .keycap, .board-col,
  .chat-demo, .messenger-conversations, .messenger-dialog .chat-messages,
  .messenger-dialog .chat-input-row, .data-table th, .calendar-cell.blank,
  .notification-filters, .search-summary, .demo-pill, .field code,
  .kanplan-table-head, .kanplan-list-head, .ep-preview-note, .ep-total,
  .ep-mail-filters, .ep-channel, .ep-security-note, .ep-login, .ep-empty,
  .ep-loading, .ep-add-form, .ep-confirm, .radio-tabs, .radio-station-mark,
  .attachment-chip, .chat-image-viewer
) { background: var(--surface-soft); color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] :is(
  .field input, .field textarea, .field select, .filter-input, .filter-select,
  .setting-select, .card-select, .inline-stage option, .password-toggle,
  .chat-input-row textarea, .chat-send-mode select, .radio-search input
) { background-color: var(--input-bg); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); }
html[data-theme="dark"] :is(
  .data-table td, .task-row, .deal-row, .mail-row, .message-menu,
  .nav-footer, .presence, .badge, .modal-head, .modal-foot,
  .funnel-col:not(:last-child):after, .event-item:not(:last-child):after,
  .ep-dialog, .ep-panel, .ep-tabs, .ep-mail-card, .ep-info-card,
  .portal-messenger, .messenger-head, .messenger-conversations
) { border-color: var(--line); }
html[data-theme="dark"] :is(
  .nav-item, .icon-btn, .quick-action, .useful-link, .empty-state strong,
  .mail-folder, .segment, .activity-time, .board-sum, .board-empty,
  .workspace-footer, .search-empty, .search-group>h2, .search-summary>span,
  .portal-today, .messenger-list-title, .conversation small, .messenger-empty,
  .notification-overview p, .notification-feed-label, .notification-feed-label>span,
  .notification-meta, .notification-copy>small, .notification-filters h3,
  .notification-filters button, .compose-tool, .emoji-picker>strong,
  .attachment-chip small, .attachment-chip button, .file-progress, .message-file small,
  .chat-compose-footer, .message-actions summary, .message-receipt,
  .message-like, .message-forwarded, .message-quick button, .message-status,
  .message-image span, .ep-dialog .modal-head h2, .ep-position,
  .ep-department, .ep-edit, .ep-you, .ep-tabs button, .ep-panel-heading p,
  .ep-mail-filters button, .ep-mail-filters b, .ep-group-heading h4>span,
  .ep-group-heading p, .ep-mail-tags, .ep-mail-tags svg, .ep-more,
  .ep-channel p, .ep-footnote, .ep-info-card dt, .ep-quick small,
  .ep-security-note p, .ep-empty-inline, .ep-add-form>p, .ep-confirm>p,
  .ep-org-main small, .radio-status, .radio-controls>button:not(.radio-play),
  .radio-volume>button, .radio-search>button, .radio-tabs button,
  .radio-station small, .radio-station>.icon, .radio-footer, .radio-footer a
) { color: var(--muted); }
html[data-theme="dark"] :is(
  .messenger-brand, .conversation strong, .ep-dialog.modal.wide,
  .ep-address, .ep-info-card dd, .ep-login b, .ep-empty h3,
  .radio-station strong, .message-menu button
) { color: var(--text); }
html[data-theme="dark"] :is(
  .nav-item.active, .nav-item:hover, .icon-btn:hover, .segment:hover,
  .segment.active, .segment .count, .mail-folder.active, .calendar-cell.selected,
  .calendar-note, .messenger-trigger.active, .conversation.selected,
  .notification-card.unread, .notification-filters button.active,
  .notification-filters button>b, .notification-symbol, .entity-icon,
  .activity-marker, .initials, .ep-avatar, .ep-mail-icon, .ep-kind,
  .ep-mini-icon, .ep-org-chat, .ep-mail-filters button.active b,
  .compose-tool[aria-expanded=true], .search-group>h2>span,
  .header-tools>.header-calendar[aria-current="page"], .radio-trigger.is-playing
) { background: var(--blue-soft); color: var(--blue); border-color: var(--line); }
html[data-theme="dark"] #messenger-unread-total { background: var(--blue-soft); color: var(--blue); }
html[data-theme="dark"] :is(
  .data-table tbody tr[data-action]:hover, .mail-row:hover, .calendar-cell:hover,
  .conversation:hover, .notification-card:hover, .notification-filters button:hover,
  .compose-tool:hover, .emoji-picker button:hover, .emoji-picker button:focus-visible,
  .attachment-chip button:hover, .message-actions summary:hover,
  .message-actions[open] summary, .message-quick button:hover,
  .message-quick button:focus-visible, .radio-station:hover,
  .radio-station[aria-pressed="true"], .search-result:focus-visible
) { background: var(--surface-elevated); }
html[data-theme="dark"] .button.secondary { background: var(--surface-soft); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .button.secondary:hover { background: var(--surface-elevated); }
html[data-theme="dark"] .button:not(.secondary):not(.danger):not(.green-button):not(.ep-write) { background: #226cea; border-color: #226cea; color: #ffffff; }
html[data-theme="dark"] .button:not(.secondary):not(.danger):not(.green-button):not(.ep-write):hover { background: #1559ce; }
html[data-theme="dark"] .button.green-button { background: #087c5b; color: #ffffff; border-color: #087c5b; }
html[data-theme="dark"] .button.danger { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--line)); }
html[data-theme="dark"] .button.danger:hover { background: color-mix(in srgb, var(--red) 20%, var(--surface)); }
html[data-theme="dark"] :is(.kpi, .mini-kpi, .notification-overview, .ep-hero, .radio-now) { background: var(--surface-soft); }
html[data-theme="dark"] .kpi-blue { background: linear-gradient(115deg, var(--blue-soft), var(--surface)); }
html[data-theme="dark"] .kpi-green { background: linear-gradient(115deg, var(--green-soft), var(--surface)); }
html[data-theme="dark"] .kpi-amber { background: linear-gradient(115deg, color-mix(in srgb, var(--amber) 12%, var(--surface)), var(--surface)); }
html[data-theme="dark"] .kpi-red { background: linear-gradient(115deg, color-mix(in srgb, var(--red) 12%, var(--surface)), var(--surface)); }
html[data-theme="dark"] :is(.kpi-amber .kpi-label, .ep-unverified) { color: var(--amber); }
html[data-theme="dark"] .mini-kpi small { color: var(--muted); }
html[data-theme="dark"] .chart-label { fill: var(--muted); }
html[data-theme="dark"] .chart-grid { stroke: var(--line); }
html[data-theme="dark"] .task-check { background: var(--input-bg); border-color: var(--muted); }
html[data-theme="dark"] .task-check.done { background: #087c5b; color: #ffffff; border-color: #087c5b; }
html[data-theme="dark"] :is(.task-board-col.overdue, .task-board-col.today, .task-board-col.review, .task-day.today) { background: var(--surface-soft); }
html[data-theme="dark"] .task-plan-card:hover { background: var(--surface-elevated); border-color: var(--blue); box-shadow: none; }
html[data-theme="dark"] .task-board-col header span { background: var(--surface-elevated); color: var(--muted); }
html[data-theme="dark"] :is(.status-tag.blue, .demo-notice, .attention-heading b) { background: var(--blue-soft); color: var(--blue); border-color: var(--line); }
html[data-theme="dark"] :is(.status-tag.green, .entity-icon.green, .notification-symbol.messages, .ep-state, .ep-policy, .ep-kind.shared, .ep-mail-icon.shared, .ep-mini-icon.green, .radio-heading small, .message-like.active, .message-quick .active) { background: var(--green-soft); color: var(--green); }
html[data-theme="dark"] :is(.status-tag.gray, .ep-state.inactive) { background: var(--surface-elevated); color: var(--muted); }
html[data-theme="dark"] .status-tag.amber { background: color-mix(in srgb, var(--amber) 12%, var(--surface)); color: var(--amber); }
html[data-theme="dark"] :is(.status-tag.red, .notification-symbol.tasks, .urgent-row.is-overdue, .attention-group.is-overdue .attention-heading b) { background: color-mix(in srgb, var(--red) 12%, var(--surface)); color: var(--red); border-color: var(--line); }
html[data-theme="dark"] :is(.entity-icon.violet, .notification-symbol.events) { background: color-mix(in srgb, var(--purple) 12%, var(--surface)); color: var(--purple); }
html[data-theme="dark"] :is(.deal-stage-tag, .inline-stage) { background: color-mix(in srgb, var(--stage-accent, var(--blue)) 15%, var(--surface)); color: color-mix(in srgb, var(--stage-accent, var(--blue)) 60%, #ffffff); border-color: var(--line); }
html[data-theme="dark"] .message.mine { background: var(--blue-soft); }
html[data-theme="dark"] :is(.message-quote, .message-image, .radio-cover) { background: var(--surface-elevated); }
html[data-theme="dark"] :is(.message-quote, .message-quote strong, .message-file, .message-file:hover, .ep-tabs button.active, .ep-tabs button:hover, .ep-photo-caption, .notification-detail-category, .radio-tabs button[aria-pressed="true"], .radio-station[aria-pressed="true"] strong) { color: var(--blue); }
html[data-theme="dark"] :is(.message-receipt.read, .ep-info-card [data-security-result]) { color: var(--green); }
html[data-theme="dark"] .message-like.active .icon { fill: currentColor; }
html[data-theme="dark"] :is(.message-status.failed, .radio-status.is-error, .urgent-row.is-overdue .urgent-time, .attention-group.is-overdue .attention-heading) { color: var(--red); }
html[data-theme="dark"] .switch:not(:checked) { background: var(--line); }
html[data-theme="dark"] .switch:checked { background: #226cea; }
html[data-theme="dark"] .compose-resizer span { background: var(--muted); }
html[data-theme="dark"] .activity-row:not(:last-child):after { background: var(--line); }
html[data-theme="dark"] .modal::backdrop { background: #00000088; }

.theme-settings { max-width: 1040px; margin-bottom: 18px; }
.theme-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.theme-settings-heading h2 { margin: 0; }
.theme-settings-heading>span { font-size: 11px; color: var(--muted); }
.theme-modes, .theme-palettes { padding: 0; margin: 0; border: 0; min-width: 0; }
.theme-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-mode-choice { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; cursor: pointer; }
.theme-mode-choice:hover, .theme-palette-choice:hover { border-color: var(--blue); }
.theme-mode-choice:has(input:checked), .theme-palette-choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.theme-choice-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.theme-choice-caption strong { display: block; font-size: 13px; font-weight: 600; }
.theme-choice-caption small { display: block; color: var(--muted); margin-top: 3px; }
.theme-mode-choice input, .theme-palette-choice input { appearance: auto; width: 17px; height: 17px; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--blue); cursor: pointer; }
.theme-mode-preview { display: flex; gap: 10px; padding: 12px; height: 86px; overflow: hidden; border: 1px solid #dde3eb; border-radius: 7px; background: #f4f6f8; }
.theme-preview-sidebar { display: flex; flex-direction: column; gap: 6px; width: 19%; padding-top: 2px; }
.theme-preview-sidebar i { height: 4px; background: #c7d4e3; border-radius: 2px; }
.theme-preview-sidebar i:first-child { width: 70%; background: #7095c4; margin-bottom: 6px; }
.theme-preview-content { display: flex; flex: 1; flex-direction: column; gap: 9px; }
.theme-preview-content>i { width: 50%; height: 5px; background: #a0b4ce; border-radius: 2px; }
.theme-preview-content>span { display: flex; flex: 1; flex-direction: column; gap: 7px; background: #ffffff; border-radius: 4px; padding: 10px; }
.theme-preview-content>span>i { height: 4px; width: 75%; border-radius: 2px; background: #d8e2ec; }
.theme-preview-content>span>i:last-child { width: 50%; }
.theme-mode-preview[data-preview="dark"] { background: var(--theme-preview-night-bg); border-color: var(--theme-preview-night-line); }
.theme-mode-preview[data-preview="dark"] .theme-preview-content>span { background: var(--theme-preview-night-panel); }
.theme-mode-preview[data-preview="dark"] .theme-preview-content>span>i, .theme-mode-preview[data-preview="dark"] .theme-preview-sidebar i { background: var(--theme-preview-night-line); }
.theme-mode-preview[data-preview="auto"] { background: linear-gradient(90deg, #f4f6f8 50%, var(--theme-preview-night-bg) 50%); }
.theme-mode-preview[data-preview="auto"] .theme-preview-content>span { background: linear-gradient(90deg, #ffffff 34%, var(--theme-preview-night-panel) 34%); }
.theme-mode-preview[data-preview="auto"] .theme-preview-content>span>i { background: #6b809b; }
.theme-palettes { margin-top: 18px; }
.theme-palettes[hidden] { display: none; }
.theme-palettes legend { padding: 0; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.theme-palette-options { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-palette-choice { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; min-height: 48px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 12px; }
.theme-palette-choice>span:not(.theme-palette-swatch) { flex: 1; }
.theme-palette-swatch { width: 25px; height: 25px; border-radius: 7px; border: 1px solid var(--line); flex: none; }
.theme-palette-black { background: linear-gradient(135deg, #09090b 50%, #303037 50%); }
.theme-palette-navy { background: linear-gradient(135deg, #050810 50%, #141e30 50%); }
.theme-settings .theme-status { margin: 14px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 640px) {
  .theme-settings { padding: 17px; }
  .theme-modes { grid-template-columns: 1fr; gap: 9px; }
  .theme-mode-choice { flex-direction: row; align-items: center; gap: 12px; }
  .theme-mode-preview { width: 76px; height: 56px; padding: 6px; gap: 5px; flex: none; }
  .theme-preview-content>span { padding: 6px 4px; }
  .theme-choice-caption { flex: 1; min-width: 0; }
}
@media (max-width: 380px) {
  .theme-mode-preview { display: none; }
  .theme-mode-choice { min-height: 60px; }
}