:root { color-scheme: light; }
.brand .brand-logo-dark, .theme-icon-sun { display: none; }
.theme-icon-moon { display: flex; }
.header-actions > #theme-toggle { display: flex; width: 40px; height: 40px; }
.launch-customer-picker > label, .form-readonly-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
}
.launch-customer-picker > select { width: 100%; min-height: 40px; margin-bottom: 21px; }
.launch-customer-context { margin: 0 0 24px; }
.launch-customer-context .person > div { flex: 1; }
.launch-customer-context .person strong, .launch-customer-context .person div > span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.launch-flow-label { font-size: 12px; font-weight: 500; margin-bottom: 21px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #aa96ff;
  --brand-fill: #6b4cd2;
  --brand-hover: #7757e2;
  --brand-soft: #2c2447;
  --ink: #eceaf1;
  --muted: #aaa6b5;
  --line: #3c3548;
  --surface: #211e29;
  --canvas: #17151d;
  --surface-subtle: #26222f;
  --surface-hover: #2c2738;
  --control-line: #71687f;
  --green: #81ceb2;
  --amber: #e3b877;
  --danger: #ef9da8;
  --status-neutral: #bbb5c7;
  --avatar-surface: #312b3e;
  --avatar-ink: #c7bfd6;
  --source-ink: #baa7dc;
}
:root[data-theme="dark"] .brand .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand .brand-logo-dark { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: flex; }

:root[data-theme="dark"] .crm-sidebar { background: #1b1822; }
:root[data-theme="dark"] :is(.workspace, .crm-header, .card, .stat, .button, dialog,
  .bulk-selection-toolbar, .active-bulk-banner, .transcript-bottom,
  .zalo-header, .receipt-paper, .zalo-message, .scenario-button, .skip-link:focus) {
  background: var(--surface);
}
:root[data-theme="dark"] :is(.button, .compact-select, select, input, textarea, .search-field) {
  border-color: var(--control-line);
}
:root[data-theme="dark"] :is(.compact-select, select, input, textarea, .search-field) {
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .search-field input { background: transparent; border: 0; }
:root[data-theme="dark"] input::placeholder { color: var(--muted); }
:root[data-theme="dark"] :is(input, select, textarea):focus { border-color: var(--brand); }
:root[data-theme="dark"] .search-field:focus-within { border-color: var(--brand); }
:root[data-theme="dark"] :is(.button:hover, .crm-nav:hover, .sidebar-setting:hover) {
  background: var(--surface-hover);
  border-color: var(--control-line);
}
:root[data-theme="dark"] .crm-nav.is-active { background: var(--brand-soft); }
:root[data-theme="dark"] .button.primary {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: #fff;
}
:root[data-theme="dark"] .button.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
:root[data-theme="dark"] .button.danger { border-color: #875461; }
:root[data-theme="dark"] :is(.button.danger:hover, .end-control:hover) { background: #422632; }
:root[data-theme="dark"] :is(.operator-avatar, .header-avatar) {
  background: var(--brand-soft);
  color: #c3b4ff;
}
:root[data-theme="dark"] :is(.avatar, .avatar-1, .avatar-2, .avatar-3) {
  background: var(--avatar-surface);
  color: var(--avatar-ink);
}
:root[data-theme="dark"] :is(.breadcrumb-slash, .stat-top > .icon, .chart-axis,
  .readiness-total strong > span, .heading-count, .bulk-review-counts > span,
  .bulk-ready-label) { color: var(--muted); }
:root[data-theme="dark"] .stat[href]:hover { border-color: #7965a3; }
:root[data-theme="dark"] .chart-guides i { border-color: var(--line); }
:root[data-theme="dark"] .readiness-track { background: #37312c; }
:root[data-theme="dark"] .amber-dot { background: var(--amber); }
:root[data-theme="dark"] :is(.priority-item, td, .customer-call-link, .bulk-preview-row,
  .saved-utterance, .bulk-current-strip, .call-customer-strip, .receipt-line,
  .zalo-header, .receipt-paper, .zalo-message) { border-color: var(--line); }
:root[data-theme="dark"] .segmented { background: #1a1721; border-color: var(--line); }
:root[data-theme="dark"] .segmented > button.active { background: #363040; }
:root[data-theme="dark"] .segmented button > span { background: #383044; color: #c2b4d9; }
:root[data-theme="dark"] th { background: #25212e; }
:root[data-theme="dark"] :is(tbody tr:hover, .bulk-history-row:hover) { background: var(--surface-hover); }
:root[data-theme="dark"] #customer-table tr.is-selected,
:root[data-theme="dark"] #bulk-queue-table tr.is-calling { background: #2e263e; }
:root[data-theme="dark"] .row-actions .call-action { background: var(--brand-soft); }
:root[data-theme="dark"] .row-actions .call-action:hover { background: #3c2e59; }
:root[data-theme="dark"] :is(.missing-value, .bulk-skip-reason, .badge-high) { color: var(--amber); }
:root[data-theme="dark"] .badge { color: var(--status-neutral); }
:root[data-theme="dark"] :is(.badge-accepted, .badge-profile_completed) { color: var(--green); }
:root[data-theme="dark"] .badge-critical { color: var(--danger); }
:root[data-theme="dark"] :is(.badge-running, .badge-calling, .badge-in_progress) { color: var(--brand); }
:root[data-theme="dark"] .badge-high { color: var(--amber); }
:root[data-theme="dark"] :is(.workflow-hint > .icon, .call-footnote > .icon, .flow-label .icon,
  .benefit > small, .knowledge-file > .icon, .source-reference, .live-source,
  .utterance-name, .utterance.interim .utterance-name::after,
  .utterance.caller.interim .utterance-name::after) { color: var(--source-ink); }
:root[data-theme="dark"] .benefit { background: var(--surface-subtle); }
:root[data-theme="dark"] .template-number { background: var(--brand-soft); }
:root[data-theme="dark"] .dialog-footer { background: var(--surface-subtle); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(7, 5, 12, .66); }
:root[data-theme="dark"] .sidebar-backdrop:not([hidden]) { background: rgba(7, 5, 12, .66); }
:root[data-theme="dark"] .scenario-note { background: #2d2441; color: #c8b9e5; }
:root[data-theme="dark"] .toast { background: #ece9f3; color: #211e29; }
:root[data-theme="dark"] .toast.error { background: #5f2636; color: #ffdde3; }
:root[data-theme="dark"] .active-call-stage {
  background: radial-gradient(ellipse at 50% 27%, #30243f 0%, #251c33 68%, #1f182b 100%);
}
:root[data-theme="dark"] :is(.call-stage-top, .agent-identity, .voice-focus > p,
  .call-customer-strip div > span, .call-playback-options) { color: #c4b5d3; }
:root[data-theme="dark"] .round-control { background: #40324f; color: #e0d3ee; }
:root[data-theme="dark"] .round-control:hover { background: #534069; color: #e6d7ff; }
:root[data-theme="dark"] .round-control[aria-pressed="true"] { background: #5b4282; color: #ede3ff; }
:root[data-theme="dark"] .end-control { background: #422632; color: var(--danger); }
:root[data-theme="dark"] .live-transcript-scroll { background: #1d1925; }
:root[data-theme="dark"] .conversation-empty strong { color: var(--ink); }
:root[data-theme="dark"] .conversation-empty > .icon { color: #b39ccc; }
:root[data-theme="dark"] .utterance-copy { background: #332941; border-color: #4c3e60; color: #e4d9f1; }
:root[data-theme="dark"] .caller .utterance-copy { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
:root[data-theme="dark"] .saved-utterance > p { color: var(--ink); }
:root[data-theme="dark"] .saved-utterance.caller .speaker-avatar { background: #30303b; color: #c0c2d0; }
:root[data-theme="dark"] .outcome-symbol { background: #223c33; }
:root[data-theme="dark"] .outcome-symbol.declined { background: #422632; color: var(--danger); }
:root[data-theme="dark"] .zalo-preview { background: #19222e; }
:root[data-theme="dark"] .zalo-header > .icon { color: #78baff; }
:root[data-theme="dark"] .delivery-note { color: #b1bdd1; }
:root[data-theme="dark"] .bulk-progress-track { background: #3b3349; }
:root[data-theme="dark"] .bulk-current-strip .status-dot { background: #a399b5; }
:root[data-theme="dark"] .bulk-current-strip .status-dot.is-speaking { background: var(--brand); }
:root[data-theme="dark"] .table-scroll { scrollbar-color: #716582 var(--surface); }

@media (max-width: 550px) {
  .header-actions > #theme-toggle { width: 44px; height: 44px; }
}