:root {
  color-scheme: dark;
  --ui-density-space: 1;
  --ui-density-control: 1;
  --ui-density-font: 1;
  --ui-accent: #c2352b;
  --ui-accent-2: #d6463d;
  --ui-accent-text: #ef8d85;
  --ui-accent-soft: rgba(194,53,43,0.18);
  --ui-danger: #c4544d;
  --ui-danger-soft: rgba(196,84,77,0.16);
  --ui-success: #69d58b;
  --ui-success-soft: rgba(74,190,118,0.16);
  --ui-warning: #d6a23e;
  --ui-warning-soft: rgba(214,158,46,0.16);
  --ui-info: #5ca5dc;
  --ui-info-soft: rgba(92,165,220,0.14);
  --red: #c2352b;
  --red-2: #d6463d;
  --red-badge: rgba(194,53,43,0.22);
  --ui-page: #080808;
  --ui-surface: #121212;
  --ui-surface-2: #181818;
  --ui-surface-soft: rgba(255,255,255,0.045);
  --ui-border: rgba(255,255,255,0.11);
  --ui-border-soft: rgba(255,255,255,0.065);
  --ui-text: #f7f7f7;
  --ui-muted: rgba(255,255,255,0.55);
  --ui-input: #101010;
  --ui-backdrop: rgba(0,0,0,0.72);
  /* Semantic controls. Components consume these roles instead of assuming
     that every page has a dark background. */
  --ui-action-bg: var(--ui-surface-2);
  --ui-action-bg-hover: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface-2));
  --ui-action-border: var(--ui-border);
  --ui-action-text: var(--ui-text);
  --ui-action-muted: var(--ui-muted);
  --ui-action-primary-bg: var(--ui-accent-soft);
  --ui-action-primary-border: color-mix(in srgb, var(--ui-accent) 48%, transparent);
  --ui-action-primary-text: var(--ui-accent-text);
}

html[data-ui-theme="graphite"] {
  --bg: #0b0d10;
  --red: #8f98a8;
  --red-2: #b0bac9;
  --ui-accent: #9aa4b5;
  --ui-accent-2: #c1cad7;
  --ui-accent-text: #c1cad7;
  --ui-accent-soft: rgba(154,164,181,0.18);
  --shadow: 0 20px 60px rgba(0,0,0,0.38);
  --ui-page: #080a0d;
  --ui-surface: #11151a;
  --ui-surface-2: #171c22;
  --ui-surface-soft: rgba(193,202,215,0.055);
  --ui-border: rgba(193,202,215,0.14);
  --ui-border-soft: rgba(193,202,215,0.075);
  --ui-input: #0d1116;
}

html[data-ui-theme="ocean"] {
  --bg: #061015;
  --red: #1d8bb8;
  --red-2: #32b3dc;
  --ui-accent: #1d8bb8;
  --ui-accent-2: #32b3dc;
  --ui-accent-text: #49bce5;
  --ui-accent-soft: rgba(29,139,184,0.18);
  --shadow: 0 20px 60px rgba(0,18,28,0.44);
  --ui-page: #041015;
  --ui-surface: #0a1a22;
  --ui-surface-2: #0d222d;
  --ui-surface-soft: rgba(50,179,220,0.055);
  --ui-border: rgba(95,190,222,0.16);
  --ui-border-soft: rgba(95,190,222,0.085);
  --ui-input: #07151c;
}

html[data-ui-theme="forest"] {
  --bg: #07110d;
  --red: #2d9b68;
  --red-2: #46bf82;
  --ui-accent: #2d9b68;
  --ui-accent-2: #46bf82;
  --ui-accent-text: #55cb8d;
  --ui-accent-soft: rgba(45,155,104,0.18);
  --shadow: 0 20px 60px rgba(0,20,12,0.42);
  --ui-page: #05100b;
  --ui-surface: #0b1a12;
  --ui-surface-2: #102219;
  --ui-surface-soft: rgba(70,191,130,0.055);
  --ui-border: rgba(105,202,151,0.15);
  --ui-border-soft: rgba(105,202,151,0.08);
  --ui-input: #07150d;
}

html[data-ui-theme="light"] {
  color-scheme: light;
  --bg: #d9d8d4;
  --stroke: rgba(35,38,42,0.2);
  --stroke-soft: rgba(35,38,42,0.11);
  --text: #202225;
  --muted: rgba(32,34,37,0.66);
  --red: #9f4638;
  --red-2: #b85a49;
  --red-badge: rgba(159,70,56,0.15);
  --ui-accent: #9f4638;
  --ui-accent-2: #b85a49;
  --ui-accent-text: #8e3d31;
  --ui-accent-soft: rgba(159,70,56,0.14);
  --shadow: 0 16px 38px rgba(35,38,42,0.13);
  --ui-page: #d9d8d4;
  --ui-surface: #e8e7e3;
  --ui-surface-2: #f1f0ec;
  --ui-surface-soft: rgba(35,38,42,0.055);
  --ui-border: rgba(35,38,42,0.21);
  --ui-border-soft: rgba(35,38,42,0.12);
  --ui-text: #202225;
  --ui-muted: rgba(32,34,37,0.66);
  --ui-input: #f2f1ed;
  --ui-backdrop: rgba(27,29,31,0.5);
  --ui-danger: #963b35;
  --ui-danger-soft: rgba(167,70,63,0.14);
  --ui-success: #22653e;
  --ui-success-soft: rgba(40,117,72,0.14);
  --ui-warning: #775313;
  --ui-warning-soft: rgba(119,83,19,0.14);
  --ui-info: #1d5b80;
  --ui-info-soft: rgba(37,103,143,0.13);
}

html[data-ui-theme="espanolitos"] {
  color-scheme: light;
  --bg: #ded3c5;
  --stroke: rgba(64,48,37,0.21);
  --stroke-soft: rgba(64,48,37,0.12);
  --text: #2b241f;
  --muted: rgba(43,36,31,0.67);
  --red: #ad5138;
  --red-2: #c66b4c;
  --red-badge: rgba(173,81,56,0.16);
  --ui-accent: #ad5138;
  --ui-accent-2: #c66b4c;
  --ui-accent-text: #99452f;
  --ui-accent-soft: rgba(173,81,56,0.15);
  --shadow: 0 16px 38px rgba(64,48,37,0.14);
  --ui-page: #ded3c5;
  --ui-surface: #ece2d6;
  --ui-surface-2: #f4ece2;
  --ui-surface-soft: rgba(64,48,37,0.06);
  --ui-border: rgba(64,48,37,0.21);
  --ui-border-soft: rgba(64,48,37,0.12);
  --ui-text: #2b241f;
  --ui-muted: rgba(43,36,31,0.67);
  --ui-input: #f5eee5;
  --ui-backdrop: rgba(52,39,30,0.48);
  --ui-danger: #983d36;
  --ui-danger-soft: rgba(170,71,63,0.14);
  --ui-success: #24623e;
  --ui-success-soft: rgba(43,112,72,0.14);
  --ui-warning: #765117;
  --ui-warning-soft: rgba(118,81,23,0.14);
  --ui-info: #205b7b;
  --ui-info-soft: rgba(40,103,138,0.13);
}

html[data-ui-size="compact"] {
  --ui-density-space: 0.84;
  --ui-density-control: 0.9;
  --ui-density-font: 0.96;
}

html[data-ui-size="large"] {
  --ui-density-space: 1.16;
  --ui-density-control: 1.12;
  --ui-density-font: 1.06;
}

body {
  font-size: calc(16px * var(--ui-density-font));
}

html[data-ui-size] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea,
  .db-toolbar-action,
  .add-btn,
  .secondary-btn,
  .panel-action-btn,
  .finance-btn,
  .analytics-btn,
  .teacher-save-btn,
  .dir-btn
) {
  min-height: calc(34px * var(--ui-density-control));
}

html[data-ui-theme] body {
  color: var(--ui-text);
}

html[data-ui-theme] input,
html[data-ui-theme] select,
html[data-ui-theme] textarea,
html[data-ui-theme] button {
  accent-color: var(--ui-accent);
}

html[data-ui-theme="graphite"] body {
  background:
    radial-gradient(circle at top center, rgba(176,186,201,0.07), transparent 28%),
    linear-gradient(180deg, #080a0d 0%, #0e1116 45%, #151922 100%);
}

html[data-ui-theme="ocean"] body {
  background:
    radial-gradient(circle at top center, rgba(50,179,220,0.11), transparent 28%),
    linear-gradient(180deg, #041015 0%, #071820 45%, #0d2028 100%);
}

html[data-ui-theme="forest"] body {
  background:
    radial-gradient(circle at top center, rgba(70,191,130,0.1), transparent 28%),
    linear-gradient(180deg, #05100b 0%, #0a1711 45%, #102018 100%);
}

html[data-ui-theme="light"] body {
  background:
    radial-gradient(circle at top center, rgba(159,70,56,0.07), transparent 34%),
    linear-gradient(180deg, #e3e2de 0%, #d9d8d4 52%, #d1d0cc 100%);
  color: var(--text);
}

html[data-ui-theme="espanolitos"] body {
  background:
    radial-gradient(circle at top center, rgba(173,81,56,0.09), transparent 34%),
    linear-gradient(180deg, #e8ded2 0%, #ded3c5 52%, #d5c8b8 100%);
  color: var(--text);
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) {
  --red-badge: var(--ui-accent-soft);
}

html[data-ui-theme="light"] .crm-header,
html[data-ui-theme="light"] .filters-section,
html[data-ui-theme="light"] .attention-section,
html[data-ui-theme="light"] .admin-card,
html[data-ui-theme="light"] .direction-panel,
html[data-ui-theme="light"] .tariff-daw__tree,
html[data-ui-theme="light"] .tariff-daw__editor,
html[data-ui-theme="espanolitos"] .crm-header,
html[data-ui-theme="espanolitos"] .filters-section,
html[data-ui-theme="espanolitos"] .attention-section,
html[data-ui-theme="espanolitos"] .admin-card,
html[data-ui-theme="espanolitos"] .direction-panel,
html[data-ui-theme="espanolitos"] .tariff-daw__tree,
html[data-ui-theme="espanolitos"] .tariff-daw__editor {
  background: rgba(255,255,255,0.68) !important;
  border-color: rgba(71,50,36,0.13) !important;
  color: var(--text) !important;
}

html[data-ui-theme="light"] .db-toolbar,
html[data-ui-theme="espanolitos"] .db-toolbar {
  background: rgba(255,247,236,0.92) !important;
  border-color: rgba(71,50,36,0.12) !important;
  color: var(--text) !important;
}

html[data-ui-theme="light"] .crm-header h1,
html[data-ui-theme="light"] .admin-card__title,
html[data-ui-theme="light"] .appearance-control-title,
html[data-ui-theme="light"] .db-title,
html[data-ui-theme="light"] .db-tb-clock__time,
html[data-ui-theme="espanolitos"] .crm-header h1,
html[data-ui-theme="espanolitos"] .admin-card__title,
html[data-ui-theme="espanolitos"] .appearance-control-title,
html[data-ui-theme="espanolitos"] .db-title,
html[data-ui-theme="espanolitos"] .db-tb-clock__time {
  color: var(--text) !important;
}

html[data-ui-theme="light"] .crm-subtitle,
html[data-ui-theme="light"] .crm-breadcrumb,
html[data-ui-theme="light"] .admin-note,
html[data-ui-theme="light"] .appearance-control-note,
html[data-ui-theme="light"] .db-tb-clock__date,
html[data-ui-theme="light"] .db-tb-nav__link,
html[data-ui-theme="espanolitos"] .crm-subtitle,
html[data-ui-theme="espanolitos"] .crm-breadcrumb,
html[data-ui-theme="espanolitos"] .admin-note,
html[data-ui-theme="espanolitos"] .appearance-control-note,
html[data-ui-theme="espanolitos"] .db-tb-clock__date,
html[data-ui-theme="espanolitos"] .db-tb-nav__link {
  color: rgba(45,33,26,0.62) !important;
}

html[data-ui-theme="light"] input,
html[data-ui-theme="light"] select,
html[data-ui-theme="light"] textarea,
html[data-ui-theme="light"] .db-search-input,
html[data-ui-theme="espanolitos"] input,
html[data-ui-theme="espanolitos"] select,
html[data-ui-theme="espanolitos"] textarea,
html[data-ui-theme="espanolitos"] .db-search-input {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(71,50,36,0.16) !important;
  color: var(--text) !important;
}

html[data-ui-theme="light"] .admin-tab,
html[data-ui-theme="light"] .dir-btn,
html[data-ui-theme="light"] .tariff-cancel-btn,
html[data-ui-theme="espanolitos"] .admin-tab,
html[data-ui-theme="espanolitos"] .dir-btn,
html[data-ui-theme="espanolitos"] .tariff-cancel-btn {
  color: rgba(45,33,26,0.68) !important;
  border-color: rgba(71,50,36,0.14) !important;
}

html[data-ui-theme="light"] .appearance-option,
html[data-ui-theme="espanolitos"] .appearance-option {
  background: rgba(255,255,255,0.64) !important;
  border-color: rgba(71,50,36,0.14) !important;
  color: rgba(45,33,26,0.7) !important;
}

html[data-ui-theme="light"] .appearance-option strong,
html[data-ui-theme="light"] .appearance-preview h3,
html[data-ui-theme="espanolitos"] .appearance-option strong,
html[data-ui-theme="espanolitos"] .appearance-preview h3 {
  color: var(--text) !important;
}

html[data-ui-theme="light"] .appearance-option small,
html[data-ui-theme="light"] .appearance-preview p,
html[data-ui-theme="espanolitos"] .appearance-option small,
html[data-ui-theme="espanolitos"] .appearance-preview p {
  color: rgba(45,33,26,0.58) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) .db-tb-nav__link--active,
html[data-ui-theme]:not([data-ui-theme="charcoal"]) .db-tab.active,
html[data-ui-theme]:not([data-ui-theme="charcoal"]) .filter-btn.active,
html[data-ui-theme]:not([data-ui-theme="charcoal"]) .admin-tab.active {
  background: var(--ui-accent-soft) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent) !important;
}

html[data-ui-theme] :is(.appearance-option.is-selected, .appearance-segmented button.is-selected) {
  background: var(--ui-accent-soft) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 58%, transparent) !important;
  color: var(--ui-accent-text) !important;
}

/* Shared application surfaces. The page-specific styles predate themes and
   contain many literal #111/#181818 values, so the theme layer deliberately
   loads last and owns the neutral surface palette. */
html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  .crm-header,
  .filters-section,
  .attention-section,
  .card-shell,
  .summary-card,
  .finance-hero,
  .finance-section,
  .finance-tile,
  .analytics-card,
  .analytics-section,
  .analytics-source-card,
  .metric-card,
  .task-item,
  .management-card,
  .org-summary article,
  .org-card,
  .org-dialog,
  .org-template,
  .org-block,
  .org-toggle,
  .org-review__section,
  .teachers-catalog-panel,
  .teacher-catalog-item,
  .tc-card,
  .tc-stat,
  .tc-panel,
  .tc-student-modal__panel,
  .tc-profile-stat,
  .tc-profile-section,
  .sc-card,
  .db-block,
  .db-layout-template-menu,
  .db-layout-name-modal__panel,
  .db-dir-dropdown__menu,
  .app-custom-select__menu,
  .db-today-context-menu,
  .db-overlay__panel,
  .modal-content,
  .tc-custom-select__menu,
  .cs-dropdown,
  .cs-dropdown-portal,
  .day-cell
) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text);
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  .db-toolbar,
  .tasks-header,
  .sc-topbar,
  .sc-sidebar,
  .org-dialog__footer,
  .schedule-toolbar,
  .teachers-filters,
  .finance-header,
  .analytics-header
) {
  background: color-mix(in srgb, var(--ui-surface-2) 92%, transparent) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text);
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .cs-trigger,
  .tc-custom-select__trigger,
  .db-search-input,
  .filter-select
) {
  background: var(--ui-input) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  .db-layout-template-trigger,
  .db-toolbar-chip,
  .db-tb-toggle,
  .db-org-switch,
  .finance-btn--ghost,
  .analytics-btn--ghost,
  .org-secondary,
  .icon-btn,
  .panel-action-btn--ghost
) {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  .db-layout-template-option.active,
  .db-dir-dropdown__option.active,
  .teacher-catalog-item.is-selected,
  .client-chip.is-active,
  .org-template.is-selected
) {
  background: var(--ui-accent-soft) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 58%, transparent) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(
  .tasks-page,
  .management-page,
  .org-page,
  .finance-page,
  .analytics-page,
  .teachers-page,
  .teacher-cabinet-page,
  .student-cabinet-page,
  .db-wrap,
  .schedule-page
) {
  color: var(--ui-text);
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) .management-card::before,
html[data-ui-theme]:not([data-ui-theme="charcoal"]) .analytics-card--accent {
  background: linear-gradient(145deg, var(--ui-accent-soft), transparent 62%) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) :is(.db-tb-nav__link--active, .db-tb-nav__link--active svg) {
  color: var(--ui-accent-2) !important;
  stroke: var(--ui-accent-2) !important;
}

html[data-ui-theme="light"] :is(
  .tasks-page,
  .management-page,
  .org-page,
  .finance-page,
  .analytics-page,
  .teachers-page,
  .teacher-cabinet-page,
  .student-cabinet-page,
  .db-wrap,
  .schedule-page
) :is(h1, h2, h3, h4, strong, .task-title, .metric-current-num, .summary-card__value, .analytics-card__value),
html[data-ui-theme="espanolitos"] :is(
  .tasks-page,
  .management-page,
  .org-page,
  .finance-page,
  .analytics-page,
  .teachers-page,
  .teacher-cabinet-page,
  .student-cabinet-page,
  .db-wrap,
  .schedule-page
) :is(h1, h2, h3, h4, strong, .task-title, .metric-current-num, .summary-card__value, .analytics-card__value) {
  color: var(--ui-text) !important;
}

html[data-ui-theme="light"] :is(.management-subtitle, .management-card p, .tc-stat span, .tc-stat small, .tc-panel-head p, .tc-day-date, .tc-lesson-meta, .tc-payout-row small, .tc-note-muted),
html[data-ui-theme="espanolitos"] :is(.management-subtitle, .management-card p, .tc-stat span, .tc-stat small, .tc-panel-head p, .tc-day-date, .tc-lesson-meta, .tc-payout-row small, .tc-note-muted) {
  color: var(--ui-muted) !important;
}

html[data-ui-theme="light"] :is(.org-hero p, .org-status, .org-card code, .task-section-sub, .finance-subtitle, .analytics-subtitle),
html[data-ui-theme="espanolitos"] :is(.org-hero p, .org-status, .org-card code, .task-section-sub, .finance-subtitle, .analytics-subtitle) {
  color: var(--ui-muted) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) .student-cabinet-page {
  --sc-red: var(--ui-accent);
  --sc-line: var(--ui-border);
  --sc-muted: var(--ui-muted);
  --sc-panel: var(--ui-surface);
  background: var(--ui-page) !important;
  color: var(--ui-text) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) .sc-product-balance::before {
  background: var(--ui-surface) !important;
}

html[data-ui-theme]:not([data-ui-theme="charcoal"]) .management-page::before {
  background: radial-gradient(circle, var(--ui-accent-soft), transparent 68%) !important;
}

/* Dashboard was the oldest screen and still carries literal white text in
   compact rows. Restore readable hierarchy on both light palettes while
   keeping payment/status meanings consistent. */
html[data-ui-theme="light"] .db-wrap :is(
  .db-card__muted,
  .db-card__phone,
  .db-card__teacher,
  .db-group__count,
  .db-group__arrow,
  .db-group__schedule-info,
  .db-empty,
  .db-block__status-btn,
  .db-block__status-btn span,
  .db-block__zoom-level,
  .db-block__more,
  .db-block__nav-btn,
  .db-block__zoom-btn,
  .db-block__expand,
  .db-layout-template-chevron,
  .db-layout-template-option,
  .db-hidden-blocks-empty
),
html[data-ui-theme="espanolitos"] .db-wrap :is(
  .db-card__muted,
  .db-card__phone,
  .db-card__teacher,
  .db-group__count,
  .db-group__arrow,
  .db-group__schedule-info,
  .db-empty,
  .db-block__status-btn,
  .db-block__status-btn span,
  .db-block__zoom-level,
  .db-block__more,
  .db-block__nav-btn,
  .db-block__zoom-btn,
  .db-block__expand,
  .db-layout-template-chevron,
  .db-layout-template-option,
  .db-hidden-blocks-empty
) {
  color: var(--ui-muted) !important;
}

html[data-ui-theme="light"] .db-wrap :is(.db-card__name, .db-block__title, .db-group__name, .db-rename-input),
html[data-ui-theme="espanolitos"] .db-wrap :is(.db-card__name, .db-block__title, .db-group__name, .db-rename-input) {
  color: var(--ui-text) !important;
}

html[data-ui-theme="light"] .db-wrap .db-tag:not(.db-tag--first):not(.db-tag--single):not(.db-tag--waiting),
html[data-ui-theme="espanolitos"] .db-wrap .db-tag:not(.db-tag--first):not(.db-tag--single):not(.db-tag--waiting) {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-muted) !important;
}

html[data-ui-theme="light"] .db-wrap .db-dir-pill,
html[data-ui-theme="espanolitos"] .db-wrap .db-dir-pill {
  color: var(--ui-muted);
  border-color: var(--ui-border);
}

html[data-ui-theme="light"] .db-wrap :is(.db-card, .db-block__head, .db-group__head),
html[data-ui-theme="espanolitos"] .db-wrap :is(.db-card, .db-block__head, .db-group__head) {
  border-color: var(--ui-border-soft) !important;
}

html[data-ui-theme="light"] .db-wrap :is(.db-card:hover, .db-group__head:hover),
html[data-ui-theme="espanolitos"] .db-wrap :is(.db-card:hover, .db-group__head:hover) {
  background: color-mix(in srgb, var(--ui-text) 5%, transparent) !important;
}

/* Dashboard content hierarchy for light appearances. The dashboard predates
   semantic themes, so its nested cards cannot inherit readable colours from
   the outer block alone. */
html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-hero,
  .db-preview-tabs,
  .db-preview-panel
) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-phone-card,
  .db-preview-grid > div,
  .db-preview-payment-card,
  .db-preview-lesson,
  .db-preview-hist-item,
  .db-preview-empty-line,
  .db-cm-field,
  .db-cm-next,
  .db-cm-static-val,
  .db-cm-phone__actions,
  .db-cm-product-card,
  .db-cm-stat,
  .db-today-phone,
  .db-today-lang,
  .db-today-pill,
  .db-card--today .db-pay,
  .db-today-finance,
  .db-today-comment
) {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-name,
  .db-preview-phone-card b,
  .db-preview-grid b,
  .db-preview-payment-card b,
  .db-preview-lesson__title,
  .db-cm-name,
  .db-cm-field__val,
  .db-cm-compact-value,
  .db-cm-next b,
  .db-cm-product-title,
  .db-cm-stat__val,
  .db-cm-hist-label,
  .db-cm-toggle b,
  .db-today-name,
  .db-today-phone,
  .db-today-lang,
  .db-today-pill b,
  .db-today-finance__status,
  .db-today-comment
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-sub,
  .db-preview-panel-title,
  .db-preview-phone-card span,
  .db-preview-grid span,
  .db-preview-note,
  .db-preview-payment-card span,
  .db-preview-lesson__date,
  .db-preview-hist-item small,
  .db-preview-empty-line,
  .db-cm-sub,
  .db-cm-field__label,
  .db-cm-compact-label,
  .db-cm-next span,
  .db-cm-stat__label,
  .db-cm-hist-date,
  .db-cm-section-title,
  .db-cm-rental-duration span,
  .db-today-duration,
  .db-today-pill span,
  .db-today-finance__head,
  .db-today-finance__advance-note
) {
  color: var(--ui-muted) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-card--editing .db-preview-panel,
  .db-preview-card--editing .db-cm-field--edit
) {
  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-border-soft)) !important;
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-surface-2)) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .db-preview-panel .db-cm-field--edit .cs-trigger .cs-label,
  .db-preview-panel .db-cm-compact-row--control .cs-trigger .cs-label,
  .db-client-modal .db-cm-field--edit .cs-trigger :is(.cs-value, .cs-label),
  .db-client-modal .db-cm-compact-row--control .cs-trigger :is(.cs-value, .cs-label)
) {
  color: var(--ui-text) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .db-preview-panel .db-cm-field--edit .cs-trigger .cs-placeholder,
  .db-preview-panel .db-cm-compact-row--control .cs-trigger .cs-placeholder,
  .db-client-modal .db-cm-field--edit .cs-trigger .cs-placeholder,
  .db-client-modal .db-cm-compact-row--control .cs-trigger .cs-placeholder
) {
  color: var(--ui-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .cs-dropdown-portal,
  .db-today-context-menu
) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--shadow) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .cs-dropdown-portal .cs-option,
  .db-today-context-menu__item
) {
  color: var(--ui-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .cs-dropdown-portal .cs-option:hover,
  .db-today-context-menu__item:hover
) {
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-text) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .db-cm-product-pill:not(.active),
  .db-discount-preset:not(.active),
  .db-cm-disc-btn:not(.active)
) {
  border-color: var(--ui-action-border) !important;
  background: var(--ui-action-bg) !important;
  color: var(--ui-action-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-cm-edit-control option {
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
}

/* Status hues keep the same meaning across appearances; only their light-theme
   foreground/background pair changes so the labels remain legible. */
html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-client-pin-note,
  .db-preview-pay--paid,
  .db-today-pill--pay-paid,
  .db-today-pill--ok,
  .db-today-finance--paid .db-today-finance__status
) {
  background: var(--ui-success-soft) !important;
  color: var(--ui-success) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-phone-card,
  .db-today-timebox,
  .db-today-finance--paid
) {
  border-color: color-mix(in srgb, var(--ui-success) 34%, transparent) !important;
  background: var(--ui-success-soft) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-today-time,
  .db-preview-lesson__time,
  .db-cm-ok,
  .db-cm-stat--ok .db-cm-stat__val,
  .db-today-pill--pay-paid b,
  .db-today-pill--ok b,
  .db-today-finance--paid .db-today-finance__status
) {
  color: var(--ui-success) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-pay--advance,
  .db-today-status--done,
  .db-today-pill--price,
  .db-today-pill--pay-advance,
  .db-cm-next--warn,
  .db-today-finance--advance,
  .db-today-finance--advance .db-today-finance__status
) {
  border-color: color-mix(in srgb, var(--ui-warning) 34%, transparent) !important;
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-today-pill--price b,
  .db-today-pill--pay-advance b,
  .db-today-finance__amount,
  .db-cm-stat--warn .db-cm-stat__val,
  .db-today-finance--advance .db-today-finance__status
) {
  color: var(--ui-warning) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-pay--unpaid,
  .db-today-pill--pay-unpaid,
  .db-today-pill--renewal,
  .db-cm-next--danger,
  .db-today-phone--empty,
  .db-today-finance--unpaid,
  .db-today-finance--unpaid .db-today-finance__status
) {
  border-color: color-mix(in srgb, var(--ui-danger) 36%, transparent) !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-today-pill--pay-unpaid b,
  .db-today-pill--renewal span,
  .db-today-pill--renewal b,
  .db-today-finance--unpaid .db-today-finance__status,
  .db-cm-stat--danger .db-cm-stat__val
) {
  color: var(--ui-danger) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap .db-today-phone--empty::before {
  color: var(--ui-danger) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap .db-today-pill--type {
  border-color: color-mix(in srgb, var(--ui-info) 32%, transparent) !important;
  background: var(--ui-info-soft) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-preview-pay--muted,
  .db-preview-phone-card--empty,
  .db-today-pill--empty
) {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-today-lang--empty,
  .db-today-pill--empty b
) {
  color: var(--ui-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .db-wrap :is(
  .db-today-finance:hover,
  .db-today-finance:focus-visible,
  .db-preview-phone-card:hover
) {
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-border)) !important;
  background: var(--ui-action-bg-hover) !important;
}

/* Finance and analytics use the same two-level text hierarchy as the CRM.
   Numeric status modifiers keep their own success/warning/danger colours. */
html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .finance-page :is(
  .finance-breadcrumb a,
  .summary-card__value,
  .summary-card__split-item strong,
  .finance-hero__figure:not(.is-good):not(.is-bad),
  .finance-hero__breakeven-figure,
  .ledger-tape strong,
  .finance-tile__figure:not(.is-good):not(.is-bad),
  .finance-tile__footer strong,
  .finance-tile__detail > summary strong,
  .finance-tile__detail-body .row strong,
  .finance-tile__fund-label strong,
  .break-even-subscription strong,
  .break-even-subscription span,
  .finance-table td,
  .finance-note-card strong,
  .finance-kpi-box strong,
  .finance-audit-card strong,
  .finance-audit-table td,
  .expense-group__total,
  .rental-income-summary__item strong,
  .rental-renter-name,
  .rental-renter-stats strong,
  .rental-renter-hours strong,
  .rental-duration-cell
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .finance-page :is(
  .summary-card__meta,
  .summary-card__split-item,
  .ledger-tape,
  .ledger-tape__op,
  .finance-tile__footer,
  .finance-tile__detail > summary,
  .finance-tile__detail-body,
  .finance-tile__fund-label,
  .break-even-subscription small,
  .finance-table th,
  .finance-note-card p,
  .finance-kpi-box p,
  .finance-fund-form label,
  .finance-audit-table th,
  .rental-renter-stats,
  .rental-renter-arrow,
  .rental-renter-hours,
  .rental-duration-empty
) {
  color: var(--ui-muted) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .finance-page .finance-tile__detail > summary::before {
  color: var(--ui-muted) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .finance-page :is(
  .summary-card__split-item,
  .break-even-subscription,
  .finance-note-card,
  .finance-kpi-box,
  .finance-audit-card,
  .rental-income-summary__item
) {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .analytics-page :is(
  .analytics-breadcrumb a,
  .analytics-card__value,
  .analytics-source-card__title,
  .analytics-source-metric strong,
  .analytics-line-chart__labels b,
  .analytics-trend-table td,
  .analytics-split__title,
  .analytics-bar__value,
  .analytics-donut__hole strong,
  .analytics-donut__legend-item,
  .analytics-donut__legend-item strong,
  .analytics-funnel__label,
  .analytics-funnel__count,
  .analytics-reasons__col h3,
  .analytics-reasons__item strong
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .analytics-page :is(
  .analytics-card__meta,
  .analytics-source-card__tag,
  .analytics-source-note,
  .analytics-line-chart__labels span,
  .analytics-trend-table th,
  .analytics-bar__label,
  .analytics-donut__hole span,
  .analytics-donut__legend-item small,
  .analytics-funnel__count small
) {
  color: var(--ui-muted) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .analytics-page :is(
  .analytics-donut__hole,
  .analytics-bar__track,
  .analytics-funnel__track,
  .analytics-reasons__item
) {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .finance-hero__figure.is-good,
  .finance-tile__figure.is-good,
  .analytics-delta--up
) {
  color: var(--ui-success) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .analytics-delta--up {
  background: var(--ui-success-soft) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .finance-hero__figure.is-bad,
  .finance-tile__figure.is-bad,
  .analytics-data-warning,
  .analytics-delta--down
) {
  color: var(--ui-danger) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) :is(
  .analytics-data-warning,
  .analytics-delta--down
) {
  border-color: color-mix(in srgb, var(--ui-danger) 42%, transparent) !important;
  background: var(--ui-danger-soft) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .pill--warn {
  background: var(--ui-warning-soft) !important;
  color: var(--ui-warning) !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .teachers-page :is(
  .teachers-catalog-head,
  .teacher-catalog-item__name,
  .teacher-profile-card__head h3,
  .teacher-invite-dialog__panel h3,
  .teacher-info-tile strong,
  .teacher-editor-section__head h3,
  .teacher-simple-editor__summary,
  .avail-popover-header
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .teachers-page :is(
  .teacher-catalog-item__meta,
  .teacher-catalog-item__sub,
  .teacher-catalog-item__upcoming,
  .teacher-catalog-item__metrics,
  .teacher-catalog-item__rates,
  .teacher-catalog-empty,
  .teachers-table th,
  .teacher-profile-card__eyebrow,
  .teacher-profile-card__head p,
  .teacher-invite-dialog__panel p,
  .teacher-info-tile span,
  .teacher-editor-section__head span,
  .teacher-field > span,
  .teacher-availability-card__hint,
  .availability-day-line
) {
  color: var(--ui-muted) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .teachers-page :is(
  .teacher-invite-dialog__panel,
  .teacher-info-tile,
  .teacher-editor-section,
  .availability-calendar-cell,
  .avail-popover
) {
  border-color: var(--ui-border-soft) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .teacher-cabinet-page :is(
  .tc-profile-name-row h2,
  .tc-profile-stat strong,
  .tc-panel-head h2,
  .tc-day-name,
  .tc-lesson-name,
  .tc-student-card__name,
  .tc-students-empty strong,
  .tc-student-detail-grid a,
  .tc-payout-row strong,
  .tc-attendance__title,
  .tc-attendance-student,
  .tc-mobile-day-head strong
) {
  color: var(--ui-text) !important;
  text-shadow: none !important;
}

html:is([data-ui-theme="light"], [data-ui-theme="espanolitos"]) .teacher-cabinet-page :is(
  .tc-profile-identity p,
  .tc-profile-level label,
  .tc-profile-stat > span,
  .tc-profile-stat small,
  .tc-profile-stat em,
  .tc-profile-section p,
  .tc-profile-section time,
  .tc-student-card__meta,
  .tc-student-card__note,
  .tc-student-card__arrow,
  .tc-student-detail-head p,
  .tc-student-detail-grid span,
  .tc-student-products small,
  .tc-balance-item span,
  .tc-detail-meta span,
  .tc-files-head span,
  .tc-file-main small,
  .tc-mobile-weekdays span,
  .tc-mobile-day-cell small,
  .tc-mobile-day-head span,
  .tc-mobile-lesson-time small,
  .tc-mobile-lesson-main small
) {
  color: var(--ui-muted) !important;
  text-shadow: none !important;
}

/* Action hierarchy: accent means "continue/create", neutral means navigation,
   and red is reserved for destructive or error states. */
html[data-ui-theme] :is(
  .add-btn,
  .finance-add-btn,
  .finance-btn:not(.finance-btn--ghost):not(.finance-btn--danger),
  .analytics-btn:not(.analytics-btn--ghost),
  .analytics-action-btn,
  .teacher-save-btn,
  .btn-add,
  .org-primary,
  .db-toolbar-action--add,
  .db-cm-btn--primary,
  .db-layout-template-add,
  .db-group-add-btn,
  .add-extra-product-btn,
  .teacher-add-rate-btn,
  .finance-eur-btn:not(.finance-eur-btn--ghost),
  .rental-btn:not(.rental-btn--ghost):not(.rental-btn--danger),
  .db-layout-name-modal__btn--primary,
  .cgm-btn--submit
),
html[data-ui-theme] .panel-action-btn:not(.secondary-btn):not(.panel-action-btn--ghost):not(.panel-action-btn--debt):not(.danger-btn):not(.day-modal-delete-btn):not(.day-modal-drop-choice__edit--danger) {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 48%, transparent) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-ui-theme] :is(
  .add-btn,
  .finance-add-btn,
  .finance-btn:not(.finance-btn--ghost):not(.finance-btn--danger),
  .analytics-btn:not(.analytics-btn--ghost),
  .analytics-action-btn,
  .teacher-save-btn,
  .btn-add,
  .org-primary,
  .db-toolbar-action--add,
  .db-cm-btn--primary,
  .db-layout-template-add,
  .db-group-add-btn,
  .add-extra-product-btn,
  .teacher-add-rate-btn,
  .finance-eur-btn:not(.finance-eur-btn--ghost),
  .rental-btn:not(.rental-btn--ghost):not(.rental-btn--danger),
  .db-layout-name-modal__btn--primary,
  .cgm-btn--submit
):hover,
html[data-ui-theme] .panel-action-btn:not(.secondary-btn):not(.panel-action-btn--ghost):not(.panel-action-btn--debt):not(.danger-btn):not(.day-modal-delete-btn):not(.day-modal-drop-choice__edit--danger):hover {
  border-color: color-mix(in srgb, var(--ui-accent) 72%, transparent) !important;
  background: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-accent) 16%, transparent) !important;
  filter: none !important;
  transform: translateY(-1px);
}

html[data-ui-theme] :is(
  .add-btn,
  .finance-add-btn,
  .finance-btn:not(.finance-btn--ghost):not(.finance-btn--danger),
  .analytics-btn:not(.analytics-btn--ghost),
  .analytics-action-btn,
  .teacher-save-btn,
  .btn-add,
  .org-primary,
  .db-toolbar-action--add,
  .db-cm-btn--primary,
  .db-layout-template-add,
  .db-group-add-btn,
  .add-extra-product-btn,
  .teacher-add-rate-btn,
  .finance-eur-btn:not(.finance-eur-btn--ghost),
  .rental-btn:not(.rental-btn--ghost):not(.rental-btn--danger),
  .db-layout-name-modal__btn--primary,
  .cgm-btn--submit,
  .panel-action-btn
):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

html[data-ui-theme] :is(
  .secondary-btn,
  .panel-action-btn--ghost,
  .db-toolbar-action--sched,
  .db-cm-btn:not(.db-cm-btn--primary):not(.db-cm-btn--danger):not(.db-cm-btn--delete),
  .db-cm-mini-action,
  .db-block__nav-btn,
  .db-block__zoom-btn,
  .db-block__expand,
  .db-block__hide,
  .db-preview-pin-btn:not(.active):not([aria-pressed="true"]),
  .db-preview-history-toggle,
  .db-discount-preset,
  .db-cm-disc-btn,
  .action-btn,
  .panel-close-btn,
  .filters-toggle-btn,
  .crm-collapse-all-btn,
  .expense-action-btn,
  .finance-income-date-btn,
  .finance-eur-btn--ghost,
  .rental-btn--ghost,
  .teacher-open-btn,
  .teacher-tab-btn,
  .teacher-invite-dialog__secondary,
  .tc-profile-icon-btn,
  .tc-icon-btn,
  .tc-collapse-btn,
  .tc-file-btn,
  .tc-mobile-icon-btn,
  .tc-mobile-month-btn,
  .tc-lesson-quick-btn:not(.is-active),
  .day-modal-nav-btn,
  .db-layout-template-trigger,
  .db-layout-name-modal__btn--ghost,
  .db-group__menu-btn,
  .cgm-btn--cancel,
  .app-toolbar-filter-toggle
) {
  border: 1px solid var(--ui-action-border) !important;
  background: var(--ui-action-bg) !important;
  color: var(--ui-action-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-ui-theme] :is(
  .secondary-btn,
  .panel-action-btn--ghost,
  .db-toolbar-action--sched,
  .db-cm-btn:not(.db-cm-btn--primary):not(.db-cm-btn--danger):not(.db-cm-btn--delete),
  .db-cm-mini-action,
  .db-block__nav-btn,
  .db-block__zoom-btn,
  .db-block__expand,
  .db-preview-pin-btn:not(.active):not([aria-pressed="true"]),
  .db-preview-history-toggle,
  .db-discount-preset,
  .db-cm-disc-btn,
  .action-btn,
  .panel-close-btn,
  .filters-toggle-btn,
  .crm-collapse-all-btn,
  .expense-action-btn,
  .finance-income-date-btn,
  .finance-eur-btn--ghost,
  .rental-btn--ghost,
  .teacher-open-btn,
  .teacher-tab-btn,
  .teacher-invite-dialog__secondary,
  .tc-profile-icon-btn,
  .tc-icon-btn,
  .tc-collapse-btn,
  .tc-file-btn,
  .tc-mobile-icon-btn,
  .tc-mobile-month-btn,
  .tc-lesson-quick-btn:not(.is-active),
  .day-modal-nav-btn,
  .db-layout-template-trigger,
  .db-layout-name-modal__btn--ghost,
  .db-group__menu-btn,
  .cgm-btn--cancel,
  .app-toolbar-filter-toggle
):hover {
  border-color: color-mix(in srgb, var(--ui-accent) 44%, var(--ui-border)) !important;
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px);
}

html[data-ui-theme] :is(
  .danger-btn,
  .day-modal-delete-btn,
  .day-modal-drop-choice__edit--danger,
  .db-cm-btn--danger,
  .db-cm-btn--delete,
  .db-cm-delete-product-btn,
  .db-layout-template-delete,
  .history-item__del-btn,
  .ep-remove-btn,
  .waiting-remove-btn,
  .teacher-rate-row__remove,
  .rental-btn--danger
) {
  border-color: color-mix(in srgb, var(--ui-danger) 55%, transparent) !important;
  background: var(--ui-danger-soft) !important;
  color: var(--ui-danger) !important;
  box-shadow: none !important;
}

html[data-ui-theme] :is(
  .danger-btn,
  .day-modal-delete-btn,
  .day-modal-drop-choice__edit--danger,
  .db-cm-btn--danger,
  .db-cm-btn--delete,
  .db-cm-delete-product-btn,
  .db-layout-template-delete,
  .history-item__del-btn,
  .ep-remove-btn,
  .waiting-remove-btn,
  .teacher-rate-row__remove,
  .rental-btn--danger,
  .db-block__hide
):hover {
  border-color: var(--ui-danger) !important;
  background: color-mix(in srgb, var(--ui-danger) 24%, transparent) !important;
  color: var(--ui-danger) !important;
}

html[data-ui-theme] :is(
  .db-tb-nav__link--active,
  .db-tab.active,
  .db-preview-tab.active,
  .db-cm-tab.active,
  .filter-btn.active,
  .admin-tab.active,
  .client-chip.is-active,
  .analytics-pill.is-active,
  .teacher-tab-btn.is-active,
  .expense-filter.active,
  .finance-payment-filter.active,
  .db-preview-pin-btn.active,
  .db-preview-pin-btn[aria-pressed="true"],
  .app-custom-select__option.is-selected,
  .db-hidden-blocks-count,
  .db-tab-badge,
  .db-tag--first
) {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, transparent) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-text) !important;
  box-shadow: none !important;
}

html[data-ui-theme] .db-preview-pin-btn:is(.active, [aria-pressed="true"]) {
  border-color: color-mix(in srgb, var(--ui-accent) 72%, var(--ui-border)) !important;
  background: color-mix(in srgb, var(--ui-accent) 28%, var(--ui-surface-2)) !important;
  color: var(--ui-accent-text) !important;
  box-shadow: 0 0 0 2px var(--ui-accent-soft) !important;
  transform: scale(1.06) !important;
}

html[data-ui-theme] .db-preview-pin-btn:is(.active, [aria-pressed="true"]):hover {
  border-color: var(--ui-accent) !important;
  background: color-mix(in srgb, var(--ui-accent) 36%, var(--ui-surface-2)) !important;
  color: var(--ui-text) !important;
}

html[data-ui-theme] .db-tb-nav__link--active svg {
  stroke: var(--ui-accent-text) !important;
}

/* Neutral/segmented actions need explicit text colours in light themes. */
html[data-ui-theme] :is(
  .db-tab:not(.active),
  .db-preview-tab:not(.active),
  .db-cm-tab:not(.active),
  .filter-btn:not(.active),
  .admin-tab:not(.active),
  .client-chip:not(.is-active),
  .analytics-pill:not(.is-active),
  .teacher-tab-btn:not(.is-active),
  .expense-filter:not(.active),
  .finance-payment-filter:not(.active)
) {
  color: var(--ui-action-muted) !important;
  text-shadow: none !important;
}

html[data-ui-theme] :is(
  .db-tab:not(.active),
  .db-preview-tab:not(.active),
  .db-cm-tab:not(.active),
  .filter-btn:not(.active),
  .admin-tab:not(.active),
  .client-chip:not(.is-active),
  .analytics-pill:not(.is-active),
  .teacher-tab-btn:not(.is-active),
  .expense-filter:not(.active),
  .finance-payment-filter:not(.active)
):hover {
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
}

/* Toolbar selects are buttons visually, even though their source select stays
   hidden for compatibility with the page logic. */
html[data-ui-theme] :is(
  .app-custom-select__trigger,
  .db-dir-dropdown__trigger
) {
  border-color: var(--ui-action-border) !important;
  background: var(--ui-input) !important;
  color: var(--ui-action-text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-ui-theme] :is(
  .app-custom-select__trigger:hover,
  .app-custom-select__trigger:focus-visible,
  .app-custom-select.is-open .app-custom-select__trigger,
  .db-dir-dropdown__trigger:hover,
  .db-dir-dropdown__trigger:focus-visible,
  .db-dir-dropdown.open .db-dir-dropdown__trigger
) {
  border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-border)) !important;
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
}

html[data-ui-theme] :is(
  .app-custom-select__chevron,
  .db-dir-dropdown__chevron,
  .db-layout-template-chevron,
  .app-filter-group__label,
  .app-filter-reset,
  .db-search-icon
) {
  color: var(--ui-action-muted) !important;
}

html[data-ui-theme] .db-search-input::placeholder {
  color: var(--ui-action-muted) !important;
  opacity: 0.82;
}

html[data-ui-theme] .app-filter-reset:hover {
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
}

html[data-ui-theme] :is(
  .app-custom-select__menu,
  .db-dir-dropdown__menu,
  .db-layout-template-menu
) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
}

html[data-ui-theme] :is(
  .app-custom-select__option,
  .db-dir-dropdown__option,
  .db-layout-template-option
) {
  color: var(--ui-action-muted) !important;
}

html[data-ui-theme] :is(
  .app-custom-select__option:hover,
  .app-custom-select__option:focus-visible,
  .db-dir-dropdown__option:hover,
  .db-layout-template-option:hover
) {
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
}

html[data-ui-theme] .db-cm-mini-action span {
  background: var(--ui-action-primary-bg) !important;
  color: var(--ui-action-primary-text) !important;
}

html[data-ui-theme] .db-block__status-btn {
  color: var(--ui-action-muted) !important;
  text-shadow: none !important;
}

html[data-ui-theme] .db-block__status-btn span {
  color: var(--ui-action-muted) !important;
}

html[data-ui-theme] .db-block__status-btn:hover {
  background: var(--ui-action-bg-hover) !important;
  color: var(--ui-action-text) !important;
}

html[data-ui-theme] .db-block__status-btn.is-active {
  color: var(--ui-action-text) !important;
}

html[data-ui-theme] .schedule-page .month-nav {
  gap: 6px;
}

html[data-ui-theme] .schedule-page .month-nav .panel-action-btn {
  min-width: 34px;
  min-height: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
}

html[data-ui-theme] .schedule-page .month-nav :is(#prevMonthBtn, #nextMonthBtn) {
  width: 34px;
  padding: 0;
  font-size: 15px;
}

html[data-ui-theme] .schedule-page #todayBtn {
  color: var(--ui-text) !important;
  font-weight: 700;
}

html[data-ui-theme] .schedule-page .day-cell.is-today {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, transparent) !important;
  background: var(--ui-accent-soft) !important;
}

html[data-ui-theme] .schedule-page .day-cell.is-today .day-number {
  color: var(--ui-text) !important;
}

html[data-ui-theme] :is(
  .db-layout-template-row.active,
  .db-layout-template-option.active,
  #dbToolbar .db-dir-dropdown__option.active,
  .db-dir-pill.active,
  .cs-option--active,
  .teachers-page .cs-option--active,
  .icon-preset-btn.selected,
  .availability-calendar-cell--day.is-selected,
  .tc-custom-select__option.is-selected,
  .tc-icon-btn.is-active,
  .tc-day.is-today,
  .tc-lesson-chip.is-selected,
  .db-cm-chip input:checked + span,
  .db-cm-product-pill.active,
  .db-discount-preset.active,
  .db-cm-disc-btn.active,
  .cgm-dd__option--active
) {
  border-color: color-mix(in srgb, var(--ui-accent) 58%, transparent) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-text) !important;
  box-shadow: none !important;
}

html[data-ui-theme] :is(.crm-row.active, .crm-row--today) {
  background: linear-gradient(90deg, var(--ui-accent-soft), transparent) !important;
  box-shadow: inset 2px 0 0 var(--ui-accent) !important;
}

html[data-ui-theme] .crm-row:not(.crm-head):hover {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ui-accent) 60%, transparent) !important;
}

html[data-ui-theme] :is(.grid-stack-placeholder > .placeholder-content, .db-block.drag-over) {
  border-color: color-mix(in srgb, var(--ui-accent) 60%, transparent) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent) !important;
  box-shadow: none !important;
}

html[data-ui-theme] .schedule-page :is(.day-cell.is-dragging, .day-cell.drag-over) {
  outline-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
}

html[data-ui-theme] #dbToolbar :is(.db-dir-dropdown.open .db-dir-dropdown__trigger, .db-dir-dropdown__trigger:focus-visible) {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-text) !important;
}

html[data-ui-theme] :is(.db-layout-template-add, .db-cm-avatar, .db-preview-avatar, .tc-stat--accent, .tc-profile-avatar, .sc-avatar, .sc-teacher-avatar) {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, transparent) !important;
  background: linear-gradient(145deg, var(--ui-accent-soft), color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface))) !important;
  color: var(--ui-accent-text) !important;
}

html[data-ui-theme] :is(.tc-profile-note-form button.is-primary, .tc-file-picker.has-pending-files) {
  border-color: color-mix(in srgb, var(--ui-accent) 52%, transparent) !important;
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent-text) !important;
}

html[data-ui-theme] .tc-student-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 52%, transparent) !important;
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-surface)) !important;
}

html[data-ui-theme] :is(.cgm-input:focus, .db-layout-name-modal__input:focus, .db-cm-edit-control:focus:not(.db-cm-edit-control--invalid)) {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 18%, transparent) !important;
}

html[data-ui-theme] :is(.teacher-field textarea:focus, .teacher-rate-row input:focus, #teacherPanelBody textarea:focus, .tc-note-form textarea:focus) {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 18%, transparent) !important;
}

html[data-ui-theme] :is(
  input:not([aria-invalid="true"]):not(.db-cm-edit-control--invalid):focus,
  select:focus,
  textarea:not([aria-invalid="true"]):focus,
  .cs-wrap--open .cs-trigger,
  .tc-custom-select.is-open .tc-custom-select__trigger
) {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 18%, transparent) !important;
}

html[data-ui-theme] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent) 62%, white 10%);
  outline-offset: 2px;
}

html[data-ui-motion="off"] *,
html[data-ui-motion="off"] *::before,
html[data-ui-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-motion="system"] *,
  html[data-ui-motion="system"] *::before,
  html[data-ui-motion="system"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}