/* Theme layer — LOAD LAST (after admin/design-shell/dashboard-v2).
   Canonical selector: html[data-theme="dark"]
   Role: (1) dark semantic + legacy values (2) dash bridge (3) global surface remaps
         (4) minimal component patches. Prefer tokens over !important. */

/* ---------- Dark semantic + legacy bridge ---------- */
html[data-theme="dark"],
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #0e131b;
  --bg-surface: #161c26;
  --bg-surface-muted: #1c2330;
  --bg-surface-elevated: #222a38;

  --text-primary: #e5eaf2;
  --text-secondary: #b4bfcf;
  --text-muted: #8692a5;
  --text-inverse: #ffffff;

  --border-default: #283142;
  --border-subtle: #1f2733;
  --border-strong: #354055;

  --accent: #3b93ff;
  --accent-hover: #5aa3ff;
  --accent-soft: rgba(0, 104, 255, .18);

  --success: #12b76a;
  --success-soft: rgba(18, 183, 106, .16);
  --warning: #f5a524;
  --warning-soft: rgba(245, 165, 36, .14);
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, .16);
  --info: #8b8bf5;
  --info-soft: rgba(91, 91, 240, .18);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --focus-ring: 0 0 0 4px rgba(59, 147, 255, .22);

  --scrollbar-thumb: #3a4558;
  --scrollbar-thumb-hover: #4d5a70;
  --placeholder: #6b778a;

  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-soft);
  --primary-soft-2: rgba(0, 104, 255, .32);
  --indigo: var(--info);

  --grad-soft: linear-gradient(135deg, #1a2438 0%, #201f3a 100%);

  --bg: var(--bg-app);
  --surface: var(--bg-surface);
  --surface-2: var(--bg-surface-muted);
  --surface-hover: var(--bg-surface-elevated);
  --chat-bg: #10161f;
  --chat-glow-tr: rgba(91, 91, 240, .10);
  --chat-glow-bl: rgba(59, 147, 255, .08);
  --chat-header-bg: var(--bg-surface);
  --chat-header-border: var(--border-default);
  --chat-bubble-in-bg: var(--bg-surface-elevated);
  --chat-bubble-in-border: var(--border-default);
  --chat-bubble-in-shadow: none;
  --chat-bubble-out-shadow: 0 4px 14px rgba(0, 0, 0, .32);
  --chat-quote-bg: var(--accent-soft);
  --chat-date-bg: var(--bg-surface-muted);
  --chat-date-border: var(--border-default);
  --chat-empty-chip-bg: var(--bg-surface-muted);
  --chat-empty-chip-border: var(--border-default);
  --chat-popover-bg: var(--bg-surface-elevated);
  --chat-selected-row: rgba(91, 140, 255, .14);
  --chat-composer-bg: var(--bg-surface);
  --chat-input-bg: var(--bg-surface-muted);
  --chat-avatar-ring: var(--bg-surface);
  --chat-system-bg: var(--bg-surface-muted);
  --chat-toolbar-icon: var(--text-muted);
  --border: var(--border-default);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --muted: var(--text-muted);
  --shadow: var(--shadow-md);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  --ring: var(--focus-ring);

  /* Shell / navigation (Dark) */
  --shell-rail-bg: linear-gradient(180deg, #151c38, #12182e);
  --shell-rail-bg-top: var(--ux-rail-1);
  --shell-rail-fg: rgba(255, 255, 255, .8);
  --shell-rail-fg-strong: #ffffff;
  --shell-rail-hover: rgba(255, 255, 255, .14);
  --shell-rail-active-bg: rgba(255, 255, 255, .22);
  --shell-rail-logo-bg: #ffffff;
  --shell-rail-logo-fg: #2457F5;
  --shell-rail-dot-ring: var(--ux-rail-1);
  --shell-nav-title: var(--ux-muted);
  --shell-nav-fg: var(--ux-text-2);
  --shell-nav-hover-bg: var(--ux-hover);
  --shell-nav-active-bg: var(--ux-sel);
  --shell-nav-active-fg: var(--ux-link);
  --shell-nav-active-bar: var(--ux-sel-bar);
  --shell-search-bg: var(--ux-input);
  --shell-menu-hover: var(--ux-hover);
  --shell-overlay: rgba(0, 0, 0, .45);

  /* Dash bridge (Dark) */
  --dash-bg: var(--ux-bg);
  --dash-card: var(--ux-surface);
  --dash-border: var(--ux-border);
  --dash-text: var(--ux-text);
  --dash-muted: var(--ux-muted);
  --dash-primary: var(--ux-primary);
  --dash-danger: var(--ux-danger);
  --dash-danger-bg: var(--ux-danger-soft);
  --dash-warn-bg: var(--ux-warn-soft);
  --dash-warn: var(--ux-warn);
  --dash-ok: var(--ux-ok);
  --dash-lavender: rgba(91, 91, 240, .16);
  --dash-row: var(--ux-border);
  --dash-hover: var(--ux-hover);
  --dash-focus: var(--ux-sel-bar);
  --dash-icon-bg: #1f2733;
  --dash-icon-fg: #9aa8be;
  --dash-meta: var(--ux-muted);
  --dash-chevron: #6b778a;
  --dash-avatar-bg: #1f2733;
  --dash-avatar-fg: #c5d0e0;
  --dash-ok-soft: var(--ux-ok-soft);
  --dash-ok-fg: var(--ux-ok);
  --dash-info-soft: var(--ux-sel);
  --dash-info-fg: var(--ux-link);
  --dash-ai-soft: var(--ux-ai-soft);
  --dash-ai-fg: var(--ux-ai);
  --dash-warn-soft: var(--ux-warn-soft);
  --dash-warn-fg: var(--ux-warn);
  --dash-kpi-warn-bg: var(--ux-surface);
  --dash-conflict: var(--ux-danger);
  --dash-conflict-soft: var(--ux-danger-soft);
  --dash-neutral-soft: #1c2330;
  --dash-neutral-fg: #9aa8be;
  --dash-chip-muted-bg: #1f2733;
  --dash-chip-muted-fg: #b4bfcf;
  --dash-overlay: rgba(0, 0, 0, .45);
  --dash-drawer-shadow: -8px 0 24px rgba(0, 0, 0, .4);
  --dash-health-track: rgba(18, 183, 106, .28);
  --dash-health-fill: #12b76a;
}

/* ---------- Global chrome / surfaces (foundation remaps) ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] #app-screen {
  background: var(--bg-app);
  color: var(--text-primary);
}

html[data-theme="dark"] #app-screen > .sidebar,
html[data-theme="dark"] .sidebar-hero {
  background: var(--ux-surface);
  color: var(--ux-text);
  border-color: var(--ux-border);
  box-shadow: none;
}

html[data-theme="dark"] #app-screen .workspace {
  background: var(--bg-app);
  color: var(--text-primary);
}

html[data-theme="dark"] .workspace .page-head,
html[data-theme="dark"] .workspace .panel,
html[data-theme="dark"] .workspace .dash-block,
html[data-theme="dark"] .workspace .people-card,
html[data-theme="dark"] .workspace .table-wrap,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .ops-kpi,
html[data-theme="dark"] .ops-card {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

html[data-theme="dark"] .workspace .data-table th,
html[data-theme="dark"] .workspace .person-head,
html[data-theme="dark"] .data-table th {
  background: var(--bg-surface-muted);
  color: var(--text-muted);
  border-color: var(--border-default);
}

html[data-theme="dark"] .people-backdrop {
  background: var(--shell-overlay);
}
html[data-theme="dark"] .people-panel,
html[data-theme="dark"] .people-foot,
html[data-theme="dark"] .people-menu {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
html[data-theme="dark"] .people-panel input,
html[data-theme="dark"] .people-panel select {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html[data-theme="dark"] .suggest,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .quiet-row span {
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}
html[data-theme="dark"] .workspace .person-avatar,
html[data-theme="dark"] .people-panel .person-avatar {
  background: var(--accent-soft);
  color: var(--dash-primary);
}
html[data-theme="dark"] .zalo-cell strong,
html[data-theme="dark"] .zalo-assign-chip {
  background: var(--accent-soft);
  color: var(--dash-primary);
}
html[data-theme="dark"] .check-list label:has(.grant-zalo:checked) {
  background: var(--accent-soft);
}
html[data-theme="dark"] .people-foot button[type="submit"]:disabled,
html[data-theme="dark"] .people-foot #user-save:disabled,
html[data-theme="dark"] .people-foot #dept-save:disabled {
  background: var(--accent-soft);
  color: var(--text-muted);
}

html[data-theme="dark"] .data-table td {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}

html[data-theme="dark"] .workspace .filters input,
html[data-theme="dark"] .workspace .filters select,
html[data-theme="dark"] .workspace button.ghost,
html[data-theme="dark"] .workspace .page-head button.ghost,
html[data-theme="dark"] .queue-row button,
html[data-theme="dark"] .ops-thread,
html[data-theme="dark"] .ops-metric select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .context-nav button {
  color: var(--text-secondary);
}
html[data-theme="dark"] .context-nav button:hover {
  background: var(--bg-surface-elevated);
}
html[data-theme="dark"] .context-nav button.active {
  color: var(--dash-primary);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 var(--dash-primary);
}

html[data-theme="dark"] .sidebar-search {
  background: var(--ux-input);
  border-color: var(--ux-border-strong);
  color: var(--ux-muted);
}
html[data-theme="dark"] .sidebar-search:focus-within {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="dark"] .scope-selector-btn,
html[data-theme="dark"] .rail-z-popover,
html[data-theme="dark"] .scope-popup,
html[data-theme="dark"] .scope-sticky,
html[data-theme="dark"] .inbox-overflow-menu {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

html[data-theme="dark"] .rail-z-popover-head {
  border-bottom-color: var(--border-subtle);
}
html[data-theme="dark"] .rail-z-popover-head strong,
html[data-theme="dark"] .rail-z-popover-item {
  color: var(--text-primary);
}
html[data-theme="dark"] .rail-z-popover-head small {
  color: var(--text-muted);
}
html[data-theme="dark"] .rail-z-popover-item:hover {
  background: var(--accent-soft);
  color: var(--dash-primary);
}

/* Dash / V2 foundation surfaces (screen polish deferred to 11D/11E) */
html[data-theme="dark"] .product-dash,
html[data-theme="dark"] .product-dash.dash-v2 {
  color: var(--dash-text);
}
html[data-theme="dark"] .product-dash .dash-block,
html[data-theme="dark"] .product-dash .page-head,
html[data-theme="dark"] .product-dash .dash-summary,
html[data-theme="dark"] .product-dash .dash-summary-cell,
html[data-theme="dark"] .product-dash .dash-activity-strip > *,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-kpi,
html[data-theme="dark"] .product-dash.dash-v2 .dash-block {
  background: var(--dash-card);
  color: var(--dash-text);
  border-color: var(--dash-border);
}
html[data-theme="dark"] .product-dash.dash-v2 .page-head h2,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-kpi strong,
html[data-theme="dark"] .product-dash.dash-v2 .block-heading h3 {
  color: var(--dash-text);
}
html[data-theme="dark"] .product-dash.dash-v2 .page-head p,
html[data-theme="dark"] .product-dash.dash-v2 .dash-muted,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-kpi span {
  color: var(--dash-muted);
}
html[data-theme="dark"] .product-dash.dash-v2 .dash-chip.is-muted {
  background: var(--dash-chip-muted-bg);
  color: var(--dash-chip-muted-fg);
}
html[data-theme="dark"] .product-dash .dash-activity-strip,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity,
html[data-theme="dark"] .product-dash.dash-v2 .dash-activity-strip.dash-v2-activity {
  background: var(--bg-surface-muted);
  border-color: var(--dash-border);
}
html[data-theme="dark"] .product-dash .dash-activity-strip > *,
html[data-theme="dark"] .product-dash .dash-activity-strip .metric-link,
html[data-theme="dark"] .product-dash .dash-activity-strip .metric-static,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity > *,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity .metric-link,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity .metric-static {
  background: var(--bg-surface-muted);
  color: var(--dash-text);
  border-color: var(--dash-border);
}
html[data-theme="dark"] .product-dash .dash-activity-strip strong,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity strong {
  color: var(--dash-text);
}
html[data-theme="dark"] .product-dash .dash-activity-strip span,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-activity span {
  color: var(--dash-meta);
}
html[data-theme="dark"] .product-dash.dash-v2 .dash-ai-totals div {
  background: var(--bg-surface-muted);
  border-color: var(--dash-border);
  color: var(--dash-text);
}
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-kpi.is-warn {
  background: var(--dash-kpi-warn-bg);
}
html[data-theme="dark"] .product-dash.dash-v2 button.dash-v2-kpi:hover,
html[data-theme="dark"] .product-dash.dash-v2 button.dash-v2-row:hover,
html[data-theme="dark"] .product-dash.dash-v2 .dash-v2-issue-row:hover {
  background: var(--dash-hover);
}
html[data-theme="dark"] body[data-shell-view="overview"] #app-screen .workspace {
  background: var(--dash-bg);
}

/* Modal / toast / popover / menus */
html[data-theme="dark"] .modal {
  background: rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .ctx-menu,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .mention-popup,
html[data-theme="dark"] .ai-cmd-popover {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] #qr-modal .qr-skeleton {
  border-color: var(--border-default);
  background: linear-gradient(90deg, var(--bg-elevated, #1a1f2b), var(--bg-surface), var(--bg-elevated, #1a1f2b));
  background-size: 200% 100%;
}
html[data-theme="dark"] #qr-image-wrap img {
  border-color: var(--border-default);
  box-shadow: none;
}
html[data-theme="dark"] #qr-modal .qr-actions .ghost {
  background: var(--bg-elevated, #1a1f2b);
  border-color: var(--border-default);
  color: var(--text-primary);
}
html[data-theme="dark"] .toast {
  background: var(--bg-surface);
}

/* Drawer foundation (evidence etc.) */
html[data-theme="dark"] .dash-evidence-drawer {
  background: var(--dash-overlay);
}
html[data-theme="dark"] .dash-evidence-panel {
  background: var(--dash-card);
  color: var(--dash-text);
  box-shadow: var(--dash-drawer-shadow);
}
html[data-theme="dark"] .dash-evidence-head,
html[data-theme="dark"] .dash-evidence-foot {
  border-color: var(--dash-border);
}
html[data-theme="dark"] .dash-evidence-head h3,
html[data-theme="dark"] .dash-evidence-name,
html[data-theme="dark"] .dash-evidence-source-count {
  color: var(--dash-text);
}
html[data-theme="dark"] .dash-evidence-summary,
html[data-theme="dark"] .dash-evidence-meta,
html[data-theme="dark"] .dash-evidence-foot .dash-muted {
  color: var(--dash-muted);
}
html[data-theme="dark"] .dash-evidence-close {
  color: var(--dash-meta);
}
html[data-theme="dark"] .dash-evidence-close:hover {
  background: var(--dash-hover);
  color: var(--dash-text);
}
html[data-theme="dark"] .dash-evidence-foot .text-action {
  color: var(--dash-primary);
}
html[data-theme="dark"] .product-dash.dash-v2.is-manager .dash-v2-issue-row,
html[data-theme="dark"] .product-dash.dash-v2[data-role="manager"] .dash-v2-issue-row {
  border-top-color: var(--dash-row);
}
html[data-theme="dark"] .product-dash.dash-v2.is-manager .dash-issue-summary,
html[data-theme="dark"] .product-dash.dash-v2[data-role="manager"] .dash-issue-summary {
  color: var(--dash-meta);
}
html[data-theme="dark"] .product-dash .sk {
  background: linear-gradient(90deg, var(--bg-surface-muted), var(--bg-surface-elevated), var(--bg-surface-muted));
  background-size: 200% 100%;
}

/* ---------- Component patches (narrow, still needed) ---------- */
html[data-theme="dark"] .chat-panel {
  background:
    radial-gradient(600px 400px at 100% 0%, var(--chat-glow-tr), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, var(--chat-glow-bl), transparent 70%),
    var(--chat-bg);
}
html[data-theme="dark"] .chat-header {
  background: var(--ux-surface);
  border-bottom-color: var(--ux-border);
}
html[data-theme="dark"] .chat-empty h2 { color: var(--text-primary); }
html[data-theme="dark"] .msg.in {
  background: var(--chat-bubble-in-bg);
  border-color: var(--chat-bubble-in-border);
  box-shadow: none;
}
html[data-theme="dark"] .chat-date-divider span,
html[data-theme="dark"] .chat-empty-features span,
html[data-theme="dark"] .chat-older-indicator,
html[data-theme="dark"] .emoji-section-title {
  background: var(--chat-system-bg);
  color: var(--text-muted);
  border-color: var(--border-default);
}
html[data-theme="dark"] .tb-emoji { --tb-soft: rgba(245, 158, 11, .16); }
html[data-theme="dark"] .tb-sticker { --tb-soft: rgba(236, 72, 153, .16); }
html[data-theme="dark"] .tb-image { --tb-soft: rgba(16, 185, 129, .16); }
html[data-theme="dark"] .tb-file { --tb-soft: var(--accent-soft); }
html[data-theme="dark"] .voice-rec-cancel { background: var(--bg-surface-elevated); color: var(--text-secondary); }
html[data-theme="dark"] .ai-trigger { background: var(--bg-surface-muted); border-color: var(--border-default); }
html[data-theme="dark"] #app-screen[data-view='ai'] #ai-panel {
  border-color: var(--border-default);
  background: var(--bg-surface);
}
html[data-theme="dark"] #ai-panel .ai-empty h3 { color: var(--text-primary); }
html[data-theme="dark"] #ai-panel .ai-empty p,
html[data-theme="dark"] #ai-panel .ai-empty-know,
html[data-theme="dark"] #ai-panel .ai-empty-label { color: var(--text-muted); }
html[data-theme="dark"] #ai-panel .ai-suggestion {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--border-default);
}
html[data-theme="dark"] #ai-panel .ai-context-banner {
  background: var(--accent-soft);
  border-bottom-color: var(--border-default);
}
html[data-theme="dark"] #ai-panel .ai-context-title { color: var(--text-primary); }
html[data-theme="dark"] #ai-panel .ai-context-kicker,
html[data-theme="dark"] #ai-panel .ai-context-account { color: var(--text-muted); }
html[data-theme="dark"] #ai-panel .ai-context-btn {
  background: var(--bg-surface-muted);
  color: var(--accent);
  border-color: var(--border-default);
}
html[data-theme="dark"] #ai-panel .ai-context-btn.ghost { color: var(--text-secondary); }
html[data-theme="dark"] #ai-panel .ai-action-link {
  background: var(--bg-surface-muted);
  color: var(--accent);
  border-color: var(--border-default);
}
html[data-theme="dark"] #ai-panel .ai-input-row {
  background: var(--bg-surface-muted);
  border-color: var(--border-strong);
}
html[data-theme="dark"] #ai-panel .ai-input-row textarea { color: var(--text-primary); }
html[data-theme="dark"] .daily-brief {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
html[data-theme="dark"] .daily-brief-head,
html[data-theme="dark"] .daily-brief-section,
html[data-theme="dark"] .daily-brief-item + .daily-brief-item {
  border-color: var(--border-subtle);
}
html[data-theme="dark"] .daily-brief-kicker,
html[data-theme="dark"] .daily-brief-meta,
html[data-theme="dark"] .daily-brief-item-meta,
html[data-theme="dark"] .daily-brief-owner,
html[data-theme="dark"] .daily-brief-type,
html[data-theme="dark"] .daily-brief-section h3 { color: var(--text-muted); }
html[data-theme="dark"] .daily-brief-refresh {
  background: var(--bg-surface-muted);
  color: var(--accent);
  border-color: var(--border-default);
}
html[data-theme="dark"] .daily-brief-ask,
html[data-theme="dark"] .daily-brief-open {
  background: var(--bg-surface-muted);
  color: var(--accent);
  border-color: var(--border-default);
}
html[data-theme="dark"] .daily-brief-notice { background: var(--bg-surface-muted); color: var(--text-secondary); }
html[data-theme="dark"] .daily-brief-notice.is-error { background: color-mix(in srgb, var(--warning) 16%, var(--bg-surface)); color: var(--text-primary); }
html[data-theme="dark"] .daily-brief-item.is-risk,
html[data-theme="dark"] .daily-brief-item.is-system { border-left-color: var(--warning); }
html[data-theme="dark"] .ai-report-card,
html[data-theme="dark"] .ai-reports-empty { background: var(--bg-surface); color: var(--text-primary); }
html[data-theme="dark"] .tool-btn:hover { background: var(--bg-surface); }
html[data-theme="dark"] .account-list li.active {
  background: var(--chat-selected-row);
}
html[data-theme="dark"] .conversation-list li.active {
  background: var(--ux-sel);
  box-shadow: inset 3px 0 0 var(--ux-sel-bar);
}
html[data-theme="dark"] .info-profile { background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%); }
html[data-theme="dark"] .ai-usage-box { background: linear-gradient(135deg, #1f1c38, #162536); border-color: #2f2a55; }
html[data-theme="dark"] .ai-warning,
html[data-theme="dark"] .urgency-chip.u1 {
  background: var(--warning-soft);
  border-color: rgba(245, 165, 36, .3);
  color: #f5c06a;
}
html[data-theme="dark"] .work-chip.st-doing,
html[data-theme="dark"] .conv-work.st-doing { background: var(--warning-soft); color: #f5c06a; }
html[data-theme="dark"] .work-chip.st-done,
html[data-theme="dark"] .conv-work.st-done { background: var(--success-soft); color: #4ddc9a; }
html[data-theme="dark"] .conv-status.st-doing { color: #f5c06a; background: none; }
html[data-theme="dark"] .conv-status.st-done { color: var(--text-muted); background: none; opacity: .8; }
html[data-theme="dark"] .conv-work-mark { background: var(--warning); }
html[data-theme="dark"] .conversation-list li:focus-visible { outline-color: var(--primary); }
html[data-theme="dark"] .note-item { background: rgba(247, 181, 3, .1); border-color: rgba(247, 181, 3, .28); }
html[data-theme="dark"] .note-form textarea { background: var(--bg-surface-muted); }
html[data-theme="dark"] .account-alert-bar {
  background: var(--ux-danger-soft);
  border-bottom-color: var(--ux-border);
  color: var(--ux-danger);
}
html[data-theme="dark"] .msg-react-btn:hover { background: rgba(245, 158, 11, .15); }
html[data-theme="dark"] .fmt-preview,
html[data-theme="dark"] .fmt-bar { background: var(--bg-surface-muted); border-color: var(--border-default); }
html[data-theme="dark"] .voice-wave span { background: rgba(120, 170, 255, .35); }
html[data-theme="dark"] .msg.out .voice-wave span { background: rgba(255, 255, 255, .4); }
html[data-theme="dark"] .search-results-view mark { background: rgba(255, 196, 0, .3); color: #fff; }
html[data-theme="dark"] img.msg-image,
html[data-theme="dark"] .info-media-grid img { filter: brightness(.92); }

html[data-theme="dark"] #shell-nav {
  background: var(--shell-rail-bg);
}
html[data-theme="dark"] #shell-nav::after {
  background: var(--shell-rail-bg-top);
}
html[data-theme="dark"] #shell-nav button[data-view],
html[data-theme="dark"] #shell-nav #rail-utils .icon-btn,
html[data-theme="dark"] .rail-util-btn {
  color: var(--shell-rail-fg);
}
html[data-theme="dark"] #shell-nav button[data-view].active {
  background: var(--shell-rail-active-bg);
  color: var(--shell-rail-fg-strong);
  box-shadow: inset 3px 0 0 var(--shell-rail-fg-strong);
}
html[data-theme="dark"] .rail-dot { box-shadow: 0 0 0 2px var(--shell-rail-dot-ring); }
html[data-theme="dark"] .context-title {
  color: var(--shell-nav-title);
  border-left-color: var(--shell-nav-active-bar);
}
html[data-theme="dark"] .context-nav .context-stamp {
  background: var(--shell-search-bg);
  color: var(--text-muted);
}
html[data-theme="dark"] .context-nav .context-badge {
  background: var(--shell-nav-active-bg);
  color: var(--shell-nav-active-fg);
}
html[data-theme="dark"] .workspace .page-head p,
html[data-theme="dark"] .product-dash .page-head p {
  color: var(--text-muted);
}
html[data-theme="dark"] .product-dash .page-head {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-bottom-color: var(--dash-border, var(--border-default));
}
html[data-theme="dark"] .inbox-back-result {
  color: var(--shell-nav-active-fg);
}
html[data-theme="dark"] body[data-shell-view="conversations"] .inbox-chrome .sidebar-search {
  background: var(--ux-input);
  border-color: var(--ux-border-strong);
  color: var(--ux-muted);
}
html[data-theme="dark"] body[data-shell-view="conversations"] .inbox-chrome .sidebar-search:focus-within {
  border-color: var(--ux-sel-bar);
  color: var(--ux-sel-bar);
}
html[data-theme="dark"] body[data-shell-view="conversations"] .inbox-chrome .sidebar-search #sidebar-search-input {
  color: var(--ux-text);
}
html[data-theme="dark"] body[data-shell-view="conversations"] .conv-toolbar .tag-filter-select {
  background: var(--ux-input);
  color: var(--ux-text);
  border-color: var(--ux-border-strong);
}
html[data-theme="dark"] .inbox-conn-banner {
  background: var(--danger-soft, #3d1515);
  color: var(--danger, #ff8a80);
}
html[data-theme="dark"] .rail-z-btn,
html[data-theme="dark"] #shell-nav > .rail-z-btn {
  background: var(--shell-rail-logo-bg);
  color: var(--shell-rail-logo-fg);
}

html[data-theme="dark"] .admin-zalo-card,
html[data-theme="dark"] .admin-zalo-detail .panel,
html[data-theme="dark"] .settings-grid .panel,
html[data-theme="dark"] .admin-zalo-empty,
html[data-theme="dark"] #qr-modal .qr-modal-box,
html[data-theme="dark"] #confirm-modal .modal-box {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
  box-shadow: none;
}
html[data-theme="dark"] .admin-zalo-recovery {
  background: var(--warning-soft);
  color: var(--warning);
}
html[data-theme="dark"] .settings-grid input:not([type="checkbox"]),
html[data-theme="dark"] .settings-grid select,
html[data-theme="dark"] #qr-modal #qr-label-input,
html[data-theme="dark"] #qr-modal #qr-proxy-input {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html[data-theme="dark"] .settings-grid input[readonly] {
  background: var(--bg-surface-elevated);
  color: var(--text-secondary);
}
html[data-theme="dark"] .admin-audit-table .data-table th {
  background: var(--bg-surface-muted);
  color: var(--text-muted);
}
html[data-theme="dark"] .admin-audit-table .data-table td {
  border-bottom-color: var(--border-subtle);
  color: var(--text-primary);
}
html[data-theme="dark"] .admin-danger h4,
html[data-theme="dark"] .workspace .ghost.danger {
  color: var(--danger);
}
html[data-theme="dark"] #qr-modal .qr-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--border-default);
}
html[data-theme="dark"] #qr-modal .qr-status { color: var(--text-secondary); }
html[data-theme="dark"] #qr-image-wrap img { background: #fff; }