/* Apply active theme tokens consistently to dialogs and their nested data views. */
html[data-theme] {
  --finance-canvas: var(--bg);
  --finance-surface: var(--surface);
  --finance-surface-alt: var(--surface-2);
  --finance-surface-high: var(--hover, var(--surface-2));
  --finance-outline: var(--line);
  --finance-primary: var(--brand);
  --finance-text: var(--ink);
  --finance-text-muted: var(--muted);
  --ayec-slate-bg: var(--bg);
  --ayec-slate-panel: var(--surface);
  --ayec-slate-raised: var(--surface-2);
  --ayec-slate-line: var(--line);
  --ayec-slate-ink: var(--ink);
  --ayec-slate-muted: var(--muted);
  --ayec-slate-warn: var(--warn);
  --surface-alt: var(--surface-2);
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --border-color: var(--line);
  --ayec-theme-bg: var(--bg);
  --ayec-theme-surface: var(--surface);
  --ayec-theme-surface-2: var(--surface-2);
  --ayec-theme-ink: var(--ink);
  --ayec-theme-muted: var(--muted);
  --ayec-theme-line: var(--line);
}

html:is([data-theme="light"], [data-theme="terra"], [data-theme="sunset"], [data-theme="sakura"]) {
  --finance-secondary: #08744f;
  --finance-tertiary: #b4233b;
}

html[data-theme] .app-shell > .sidebar {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .brand,
html[data-theme] .sidebar .sidebar-bottom {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .nav-group-title {
  color: var(--muted) !important;
}

html[data-theme] .sidebar .nav-button,
html[data-theme] .sidebar .nav-parent,
html[data-theme] .sidebar .submenu .nav-button {
  color: var(--ink);
}

html[data-theme] .sidebar .nav-button:hover,
html[data-theme] .sidebar .nav-parent.open,
html[data-theme] .sidebar .nav-parent.active,
html[data-theme] .sidebar #nav > .nav-parent.open {
  border-color: var(--line) !important;
  background: var(--hover) !important;
  color: var(--ink) !important;
}

html[data-theme] .sidebar .nav-button.active,
html[data-theme] .sidebar .submenu .nav-button.active {
  background-color: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] .sidebar .submenu {
  border-color: var(--line) !important;
  background: transparent !important;
}

html[data-theme] .sidebar .submenu .nav-button.active {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
  box-shadow: inset 3px 0 var(--brand-2) !important;
}

html[data-theme] dialog[open] {
  color-scheme: inherit;
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  --surface-alt: var(--surface-2);
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --border-color: var(--line);
}

html[data-theme] body[data-page="settings"][data-settings-section="company"] .settings-content {
  max-height: none !important;
  overflow: visible !important;
}

html[data-theme] body[data-page="settings"] #dialogBody .settings-user-edit-matrix {
  max-height: none !important;
  overflow: visible !important;
}

html[data-theme] body[data-page="settings"] #dialogBody .settings-user-create-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-active {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--ink);
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-active input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color .15s ease;
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
  content: "";
  transition: transform .15s ease;
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-active input:checked + .user-create-switch {
  background: var(--brand);
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-active input:checked + .user-create-switch::after {
  transform: translateX(18px);
}

html[data-theme] body[data-page="settings"] #dialogBody .user-create-active input:focus-visible + .user-create-switch {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

html[data-theme] body[data-page="settings"] .p9-sms-loop-section > header > aside > span {
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--line)) !important;
  background-color: color-mix(in srgb, var(--success) 14%, var(--surface)) !important;
  color: color-mix(in srgb, var(--success) 80%, var(--ink) 20%) !important;
}

html[data-theme] dialog[open] > form,
html[data-theme] dialog[open] > form > header,
html[data-theme] dialog[open] > form > .dialog-body,
html[data-theme] dialog[open] > form > #dialogBody,
html[data-theme] dialog[open] > form > footer,
html[data-theme] dialog[open] > #dialogBody,
html[data-theme] dialog[open] > #dialogFooter {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(h1, h2, h3, h4, strong, label, legend, p, li, dt, dd) {
  color: inherit;
}

html[data-theme] dialog[open] :is(.card, .panel, .section-card, .form-card, .dialog-panel, .modal-panel, .service-form-card, .customer-editor-section, .settings-group, .settings-card) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(.card, .panel, .section-card, .form-card, .dialog-panel, .modal-panel, .service-form-card, .customer-editor-section, .settings-group, .settings-card) :is(h1, h2, h3, h4, strong, legend, label, p, li, dt, dd) {
  color: inherit;
}

html[data-theme] dialog[open] :is(.muted, small, .eyebrow, dt, .field > label) {
  color: var(--muted);
}

html[data-theme] dialog[open] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog[open] :is(.table-wrap, table, tbody tr, td) {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

html[data-theme] dialog[open] :is(th, thead th) {
  border-color: var(--line);
  background-color: var(--surface-2);
  color: var(--ink);
}

html[data-theme] dialog.service-accept-dialog :is(.service-security-head, .service-photo-field, .service-pattern-box, .service-photo-drop, .service-accessories label, .service-quick-issues button, .service-customer-picker) {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.service-accept-dialog :is(.service-security-head span, .service-pattern-box > span, .service-photo-field small, .service-accessories > span) {
  color: var(--muted) !important;
}

html[data-theme] dialog.service-accept-dialog .service-pattern-reset {
  background: transparent !important;
  color: var(--brand) !important;
}

html[data-theme] dialog.service-accept-dialog .service-pattern-dot {
  border-color: var(--line) !important;
  background: var(--muted) !important;
}

html[data-theme] dialog.service-accept-dialog .service-pattern-dot.selected {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

html[data-theme] dialog.service-accept-dialog .service-customer-picker {
  color: var(--ink) !important;
}

html[data-theme] dialog[open] tbody tr:nth-child(even) {
  background-color: var(--surface-2);
}

html[data-theme] dialog.c360-dialog,
html[data-theme] dialog.c360-dialog > form,
html[data-theme] dialog.c360-dialog > form > header,
html[data-theme] dialog.c360-dialog .dialog-body,
html[data-theme] dialog.c360-dialog footer {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-title-row h2, .c360-stat strong, .c360-currencies strong) {
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-code, .c360-profile p, .c360-stat small, .c360-tabs .tab, .c360-panel th) {
  border-color: var(--line);
  color: var(--muted) !important;
}

html[data-theme] dialog.c360-dialog .c360-profile-state {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] dialog.c360-dialog :is(.c360-stat, .c360-currencies > div, .c360-panel, .c360-panel .table-wrap, .c360-panel th, .c360-panel td, .c360-dialog .empty-state) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.c360-dialog .c360-panel tbody tr:nth-child(even) {
  background-color: var(--surface) !important;
}

html[data-theme] dialog.c360-dialog .c360-stat > span {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] dialog.c360-dialog .c360-debt {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)) !important;
}

html[data-theme] dialog.c360-dialog .c360-debt :is(small, strong),
html[data-theme] dialog.c360-dialog .c360-debt > span {
  color: var(--warn) !important;
}

html[data-theme] dialog.c360-dialog .c360-tabs .tab.active {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #fff !important;
}

html[data-theme] #appDialog.customer-editor-dialog .customer-editor-section {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.customer-editor-dialog .customer-editor-section h3 {
  color: var(--ink) !important;
}

/* Keep the service intake wizard readable when theme colors change. */
html[data-theme] #appDialog.service-accept-dialog #dialogTitle {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogEyebrow {
  color: var(--muted) !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogBody,
html[data-theme] #appDialog.service-accept-dialog .service-form-card {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(h1, h2, h3, h4, strong, legend, .field > label) {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(p, small, .muted, .service-form-card-head > span) {
  color: var(--muted) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(input, textarea)::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-card :is(button:not(.primary):not(.active), .service-pattern-box) {
  border-color: var(--line);
  color: var(--ink);
}

/* Normalize deeply nested dark-only widgets inside the service intake dialog. */
html[data-theme] #appDialog.service-accept-dialog :is(.service-form-security, .service-pattern-box, .service-password-fields .field, .service-accessories > label, .service-form-photo, .service-photo-drop, .service-extra-fields, .service-device-extra-fields) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-form-card-head, .service-security-head, .service-accessories, .service-accessories > label, .service-accessory-options, .service-accessory-options label, .service-form-photo, .service-photo-drop, .service-photo-preview, .service-extra-fields, .service-extra-fields > summary, .service-pattern-box, .service-password-fields .field) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
  box-shadow: none;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-form-card-head, .service-security-head, .service-accessories, .service-accessories > label, .service-accessory-options label, .service-photo-drop, .service-extra-fields > summary, .service-password-fields .field) :is(strong, label, span, small, p) {
  color: inherit;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-accessories input, .service-accessory-options input) {
  accent-color: var(--brand);
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-device-extra-toggle, .service-pattern-reset, .service-photo-preview button, .service-accessories button) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--brand) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-icon {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line)) !important;
  background: color-mix(in srgb, var(--brand) 11%, var(--surface)) !important;
  color: color-mix(in srgb, var(--brand) 50%, var(--ink)) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-icon.warning,
html[data-theme] #appDialog.service-accept-dialog .service-ai-label {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface)) !important;
  color: color-mix(in srgb, var(--warn) 50%, var(--ink)) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-security-head, .service-pattern-box, .service-password-fields .field, .service-accessory-options label, .service-photo-preview button) {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-pattern-dot {
  border-color: var(--line) !important;
  background: var(--surface-3, var(--surface)) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-pattern-dot.selected {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-pattern-reset, .service-device-extra-toggle) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--brand) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-security-head :is(h3, span),
html[data-theme] #appDialog.service-accept-dialog .service-accessory-options label span,
html[data-theme] #appDialog.service-accept-dialog .service-pattern-box > span,
html[data-theme] #appDialog.service-accept-dialog .service-photo-preview em {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-form-security, .service-pattern-box, .service-accessories, .service-form-photo, .service-extra-fields) :is(h1, h2, h3, h4, strong, label, span, small, p) {
  color: inherit;
}

/* Theme the controls whose original component rules force midnight colors. */
html[data-theme] #appDialog.service-accept-dialog :is(.service-combo-field .service-combo-shell > input, .service-device-fields select[name="device_type"], .service-form-device input[name="brand"]) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-combo-options {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 22%, transparent) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-combo-options > [role="option"] {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-combo-options > [role="option"]:is(:hover, :focus) {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-combo-toggle, .service-currency-select button, .service-device-extra-toggle, .service-pattern-reset, .service-photo-preview button, .service-accessories button) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog :is(.service-combo-toggle:hover, .service-currency-select button.active, .service-device-extra-toggle:hover, .service-pattern-reset:hover) {
  border-color: var(--brand) !important;
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

html[data-theme] #appDialog.service-accept-dialog #serviceEscHint {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--muted) !important;
}

/* Customer Notes was authored as a fixed midnight-only dialog. */
html[data-theme] dialog.customer-notes-dialog,
html[data-theme] dialog.customer-notes-dialog :is(form, header, .dialog-body, footer, .customer-notes-toolbar, .customer-notes-layout, .customer-notes-history, .customer-notes-history header, .customer-notes-editor, .customer-note-formatbar, .customer-note-card, .customer-note-rich, .customer-note-editor-foot) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-formatbar, .customer-note-card, .customer-note-rich) {
  background-color: var(--surface-2) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-formatbar select, .customer-note-formatbar [data-cnote-font], footer select, input:not([type="checkbox"]):not([type="radio"]), textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface-2)) !important;
  color: var(--ink) !important;
}

html[data-theme] dialog.customer-notes-dialog :is(.customer-note-category-label, #customerNoteUpdated, .customer-note-heading small, .customer-note-editor-foot, .customer-note-card span, .customer-note-card small, .customer-note-rich:empty)::before {
  color: var(--muted) !important;
}

html[data-theme] dialog.customer-notes-dialog .customer-note-formatbar button:not(:hover) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-sidebar,
html[data-theme] body[data-page="settings"] .settings-content,
html[data-theme] body[data-page="settings"] .settings-unsupported-card,
html[data-theme] body[data-page="settings"] .settings-unsupported-list > div {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-card :is(h2, h3, strong) { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .settings-unsupported-card :is(p, span) { color: var(--muted) !important; }

html[data-theme] body[data-page="settings"] .settings-unsupported-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-card > h3,
html[data-theme] body[data-page="settings"] .settings-unsupported-card > p { margin: 0; }

html[data-theme] body[data-page="settings"] .settings-unsupported-list {
  display: grid;
  gap: 10px;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-list > div {
  display: grid;
  grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

html[data-theme] body[data-page="settings"] .management-center-scope,
html[data-theme] body[data-page="settings"] .management-center-services {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

html[data-theme] body[data-page="settings"] .management-center-scope code {
  display: block;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--brand);
}

html[data-theme] body[data-page="settings"] .management-center-services h4 {
  margin: 0;
  color: var(--ink);
}

html[data-theme] body[data-page="settings"] .settings-unsupported-preference {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
}

html[data-theme] body[data-page="settings"] .settings-unsupported-preference strong,
html[data-theme] body[data-page="settings"] .settings-unsupported-preference small {
  display: block;
  line-height: 1.5;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-preference small {
  margin-top: 4px;
  color: var(--muted);
}

html[data-theme] body[data-page="settings"] .settings-unsupported-preference input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
  opacity: 1;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-preference input[type="checkbox"]:disabled {
  cursor: not-allowed;
  filter: none;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-list > div strong,
html[data-theme] body[data-page="settings"] .settings-unsupported-list > div span {
  display: block;
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-theme] body[data-page="settings"] .settings-unsupported-card > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 760px) {
  html[data-theme] body[data-page="settings"] .settings-unsupported-list > div { grid-template-columns: minmax(0, 1fr); }
}

html[data-theme] body[data-page="settings"] .settings-content .gemini-ref-actions button {
  white-space: nowrap;
  padding-inline: 6px;
  font-size: 11px;
}

html[data-theme] body[data-page="settings"] .settings-content .gemini-ref-actions {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  html[data-theme] body[data-page="settings"] .settings-content .gemini-ref-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Theme-sensitive settings modules have their own legacy midnight surfaces. */
html[data-theme] body[data-page="settings"] .settings-content:has(.autonomous-reference),
html[data-theme] body[data-page="settings"] .settings-content:has(.messaging-reference),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-sms-provider),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-telegram),
html[data-theme] body[data-page="settings"] .settings-content:has(.p9-smtp) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference :is(.messaging-ref-tag, .messaging-ref-status:not(.ready), .messaging-ref-live:not(.ready), .messaging-ref-mode-tabs, .messaging-ref-switch .setting, .messaging-ref-reminder > header .setting, .messaging-ref-variables button, .messaging-ref-macro, .messaging-ref-link) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference :is(.messaging-ref-tag.danger, .messaging-ref-status.danger) {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line)) !important;
  background-color: color-mix(in srgb, var(--danger) 10%, var(--surface-2)) !important;
  color: var(--danger) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference :is(.messaging-ref-mode-tabs button:not(.active), .messaging-ref-variables button, .messaging-ref-macro, .messaging-ref-link):hover {
  border-color: var(--brand) !important;
  background-color: color-mix(in srgb, var(--brand) 12%, var(--surface-2)) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference .messaging-ref-mode-tabs button.active {
  border-color: color-mix(in srgb, var(--success) 44%, var(--line)) !important;
  background-color: color-mix(in srgb, var(--success) 12%, var(--surface-2)) !important;
  color: color-mix(in srgb, var(--success) 56%, var(--ink)) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference :is(.messaging-ref-fields .field input, .messaging-ref-fields .field select, .messaging-ref-fields .field textarea, .messaging-ref-preview > header input, .messaging-ref-preview > header select, .messaging-ref-table-input) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface-2)) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference :is(.messaging-ref-table-wrap, .messaging-ref-matrix table, .messaging-ref-matrix th, .messaging-ref-matrix td) {
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .messaging-reference .messaging-ref-matrix tbody tr:hover {
  background-color: color-mix(in srgb, var(--brand) 10%, var(--surface-2)) !important;
}

html[data-theme] body[data-page="settings"] .settings-content [data-local-service-setting="true"]:disabled {
  cursor: not-allowed !important;
  filter: grayscale(.4) !important;
  opacity: .48 !important;
}

html[data-theme] body[data-page="settings"] .settings-content label:has(> [data-local-service-setting="true"]:disabled) {
  cursor: not-allowed !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.autonomous-card, .autonomous-runtime-states article, .autonomous-rule, .autonomous-fields .field, .messaging-ref-card, .messaging-ref-status-strip article, .messaging-ref-notice, .messaging-ref-policy, .messaging-ref-mode-tabs, .messaging-ref-fields .field, .messaging-ref-switch .setting, .p9-sms-card, .p9-sms-loop-section, .p9-sms-metrics article, .p9-telegram-card, .p9-smtp-card, .voice-reference-card, .identity-section, .identity-toggle, .tax-exchange-card) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.p9-sms-loop, .p9-telegram-status > div, .p9-telegram-steps > span, .p9-telegram-token, .p9-telegram-webhook, .p9-telegram-chat-list, .p9-telegram-pref-grid > *, .p9-telegram-logs .p9-log-row, .p9-telegram-preview) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.p9-sms-loop, .p9-telegram-status > div, .p9-telegram-steps > span, .p9-telegram-token, .p9-telegram-webhook, .p9-telegram-chat-list, .p9-telegram-pref-grid > *, .p9-telegram-logs .p9-log-row, .p9-telegram-preview) :is(b, strong, small, span, code, p, label) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.p9-sms-provider-title, .p9-sms-provider-title *, .p9-sms-provider > :is(h1, h2, h3, h4, p, label, small), .p9-sms-field-label, .p9-sms-unit) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(.p9-sms-provider-icon, .p9-sms-provider-credit, .p9-sms-info, .p9-sms-token, .p9-sms-security, .p9-sms-loop-footer, .p9-sms-metrics > *) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-provider-title :is(h3, p),
html[data-theme] body[data-page="settings"] .settings-content :is(.p9-sms-provider-credit, .p9-sms-info, .p9-sms-loop-footer, .p9-sms-metrics) :is(b, strong, small, span, i, p, code) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-origin,
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-origin * {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-preview .p9-message {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-preview .p9-message :is(b, strong, small, span, p) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-preview .p9-message :is(.p9-demo-actions, .p9-demo-message, .p9-demo-meta, .p9-status, span) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-preview .p9-status {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--success) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-heading h3 {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-preview span:not(.p9-bot-icon) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface-2)) !important;
  color: var(--ink) !important;
}

/* Common custom dialog panels use fixed dark backgrounds in older modules. */
html[data-theme] dialog[open] :is([class*="-card"], [class*="-panel"], [class*="-section"], [class*="-editor"], [class*="-history"], [class*="-toolbar"]) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .service-board-kanban {
  grid-template-columns: repeat(7, minmax(190px, 1fr));
  overflow-x: auto;
}

html[data-theme] #content :is(.service-board-lane, .service-board-card, .service-board-summary article) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .service-board-card[draggable="true"] { cursor: grab; }
html[data-theme] .service-board-card.is-dragging { opacity: .45; cursor: grabbing; }
html[data-theme] .service-board-lane.is-drop-target {
  outline: 2px dashed var(--brand);
  outline-offset: -3px;
  background-color: color-mix(in srgb, var(--brand) 10%, var(--surface)) !important;
}
html[data-theme] .service-board-card.is-moving { opacity: .55; pointer-events: none; }

/* Apply theme surfaces to custom page panels across the complete web app. */
html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="alert"]):not([class*="metric"]):not(button) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is(.card, .panel, .section-card, .form-card, .settings-card) {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--line) !important;
  background-color: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}

html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="metric"]) :is(h1, h2, h3, h4, label, legend, dt, dd) {
  color: var(--ink) !important;
}

html[data-theme] #content :is([class*="-card"], [class*="-panel"], [class*="-section"]):not([class*="status"]):not([class*="badge"]):not([class*="metric"]) :is(small, .muted, .eyebrow) {
  color: var(--muted) !important;
}

html[data-theme] body[data-page="partners"] {
  --bg: var(--ayec-theme-bg) !important;
  --surface: var(--ayec-theme-surface) !important;
  --surface-2: var(--ayec-theme-surface-2) !important;
  --ink: var(--ayec-theme-ink) !important;
  --muted: var(--ayec-theme-muted) !important;
  --line: var(--ayec-theme-line) !important;
  background-color: var(--ayec-theme-bg) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .service-list-ref {
  --sl-bg: var(--ayec-theme-bg) !important;
  --sl-panel: var(--ayec-theme-surface) !important;
  --sl-panel-2: var(--ayec-theme-surface-2) !important;
  --sl-line: var(--ayec-theme-line) !important;
  --sl-ink: var(--ayec-theme-ink) !important;
  --sl-muted: var(--ayec-theme-muted) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .service-list-ref :is(.service-list-heading, .service-list-filters, .service-list-quick-actions, .service-list-table-wrap, .service-list-metric, .service-list-tab, .service-list-metric-icon, .service-list-tab b, .service-list-table th) {
  border-color: var(--ayec-theme-line) !important;
  background-color: var(--ayec-theme-surface-2) !important;
  color: var(--ayec-theme-ink) !important;
}

html[data-theme] .field-map-canvas,
html[data-theme] .field-map-queue,
html[data-theme] .field-map-metrics article,
html[data-theme] .field-map-canvas > header,
html[data-theme] .field-map-canvas > footer,
html[data-theme] .field-map-empty {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] .p9-transaction-detail header {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
}

html[data-theme] .p9-transaction-detail header span,
html[data-theme] .p9-transaction-detail dt {
  color: var(--muted) !important;
}

html[data-theme] .p9-transaction-detail header strong {
  color: var(--success) !important;
}

html[data-theme] .p9-transaction-detail dd {
  color: var(--ink) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme] dialog[open],
  html[data-theme] dialog[open] :is(header, .dialog-body, #dialogBody, footer, .table-wrap, tbody tr) {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}

/* Theme-aware neutral controls and the company-settings preview surfaces. */
html[data-theme] :is(#app button:not(.theme-swatch):not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]):not([data-kind]), button.secondary, button.ghost, button.icon-btn, .settings-content button:not(.theme-swatch):not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]), #appDialog button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"])) {
  color: var(--ink) !important;
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(#app button:not(.theme-swatch):not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]):not([data-kind]), button.secondary, button.ghost, button.icon-btn, .settings-content button:not(.theme-swatch):not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"]), #appDialog button:not(.primary):not(.danger):not(.success):not(.warning):not(.active):not([class*="status"])):hover {
  color: var(--ink) !important;
  background-color: var(--hover) !important;
  border-color: var(--brand) !important;
}

html[data-theme] #app button.active:not(.primary):not(.danger):not(.success):not(.warning):not([class*="status"]) {
  color: var(--brand) !important;
  background-color: color-mix(in srgb, var(--brand) 13%, var(--surface)) !important;
  border-color: var(--brand) !important;
}

html[data-theme] :is(.company-reference-profile, .company-reference-summary, .company-reference-section, .company-reference-visual-card, .company-reference-fields .setting, .company-reference-map, .company-reference-map-marker b, .company-reference-wallpaper-setting input) {
  color: var(--ink) !important;
  background-color: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.company-reference-logo, .company-reference-visual-preview, .company-reference-wallpaper-preview) {
  color: var(--brand) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .company-reference-wallpaper-preview {
  background: linear-gradient(140deg, var(--surface-2), var(--surface), var(--hover)) !important;
}

html[data-theme] .company-reference-wallpaper-setting {
  display: grid;
  gap: 3px;
  grid-column: 1 / -1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 9px;
}

html[data-theme] .company-reference-wallpaper-setting small {
  color: var(--muted) !important;
}

html[data-theme] .company-reference-stamp-help {
  grid-column: 1 / -1;
  color: var(--muted) !important;
  font-size: 8px;
}

html[data-theme] :is(.company-reference-label, .company-reference-profile > strong, .company-reference-summary h2, .company-reference-visual-heading, .company-reference-section > header h3, .company-reference-fields .field label, .company-reference-visual-copy strong) {
  color: var(--ink) !important;
}

html[data-theme] :is(.company-reference-summary p, .company-reference-visual-heading small, .company-reference-visual-heading span, .company-reference-section > header small, .company-reference-visual-copy small, .company-reference-visual-copy span) {
  color: var(--muted) !important;
}

html[data-theme] .company-reference-section > header {
  border-color: var(--line) !important;
}

html[data-theme] .company-reference-map {
  background-image: linear-gradient(35deg, transparent 47%, color-mix(in srgb, var(--brand-2) 22%, transparent) 48%, color-mix(in srgb, var(--brand-2) 22%, transparent) 49%, transparent 50%), linear-gradient(165deg, transparent 47%, color-mix(in srgb, var(--brand) 20%, transparent) 48%, color-mix(in srgb, var(--brand) 20%, transparent) 49%, transparent 50%), linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px, 22px 22px !important;
}

html[data-theme] :is(.company-reference-wallpaper-setting input, .company-reference-fields .field input, .company-reference-fields .field textarea, .company-reference-fields .field select) {
  color: var(--ink) !important;
  background-color: var(--input-bg) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.company-reference-map-status, .company-reference-profile > small, .company-reference-status b) {
  color: var(--success) !important;
}

/* Shared dialog scrolling and settings bank mapping parity. */
html[data-theme] dialog[open] {
  max-height: 90svh;
}

html[data-theme] dialog[open] > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 90svh;
}

html[data-theme] dialog[open] > form > .dialog-body,
html[data-theme] dialog[open] > form > #dialogBody {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(90svh - 150px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

html[data-theme] .company-bank-reference {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme] .company-bank-reference :is(h3, th, td, label, small) {
  color: var(--ink);
}

html[data-theme] .company-bank-reference :is(small, .company-bank-status) {
  color: var(--muted);
}

.company-bank-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.company-bank-toolbar input {
  flex: 1 1 260px;
  min-width: 180px;
}

.company-bank-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  scrollbar-gutter: stable;
}

.company-bank-table {
  min-width: 860px;
}

.company-bank-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

.company-bank-table td {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.company-bank-table :is(input, select) {
  width: 100%;
  min-height: 36px;
  color: var(--ink) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 5px;
  padding: 6px 9px;
}

.company-bank-status.is-active { color: var(--success) !important; }
.company-bank-status.is-unassigned { color: var(--muted) !important; }

@media (max-width: 700px) {
  .company-bank-toolbar > button { flex: 1 1 140px; }
}
html[data-theme] dialog.service-accept-dialog[open] {
  max-height: calc(100svh - 16px);
}

html[data-theme] dialog.service-accept-dialog[open] > form {
  max-height: calc(100svh - 16px);
}

html[data-theme] dialog.service-accept-dialog[open] > form > .dialog-body,
html[data-theme] dialog.service-accept-dialog[open] > form > #dialogBody {
  flex: 1 1 0;
  max-height: none;
  overflow-y: auto;
}
html[data-theme] :is(.identity-reference-head, .identity-reference-section, .identity-reference-grid, .identity-sector-body, .identity-option-card, .identity-profile) {
  color: var(--ink) !important;
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-reference-head :is(h2, p, .identity-edition, .identity-db-status),
html[data-theme] .identity-reference-section :is(legend, label, span, small) {
  color: var(--ink) !important;
}

html[data-theme] .identity-reference-head :is(.identity-edition, .identity-db-status) {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}

html[data-theme] .identity-reference-head :is(button, .secondary, .ghost),
html[data-theme] .identity-reference-section :is(button.secondary, button.ghost) {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-sector-body .control,
html[data-theme] .identity-reference :is(input:not([type="checkbox"]), select, textarea) {
  color: var(--ink) !important;
  background: var(--input-bg) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-reference :is(.identity-system-info, .identity-database-path, .identity-database-path > div, .identity-metrics, .identity-metrics article, .identity-system-row, .identity-startup-row, .identity-profile-options, .identity-sector-body) {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-reference :is(.identity-metrics article, .identity-system-row) :is(span, b),
html[data-theme] .identity-reference :is(.identity-database-path, .identity-startup-row) :is(label, small, span) {
  color: var(--ink) !important;
}

html[data-theme] .identity-reference :is(.identity-status-pill, .identity-warning) {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-reference :is(.identity-system-actions, .identity-shortcut-actions) button {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-startup-row label {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-color: var(--line) !important;
}

html[data-theme] .identity-warning {
  color: var(--warn) !important;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line)) !important;
}

html[data-theme] :is(.company-number-card, .company-number-field, .company-reference-visual-card) {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .company-number-card :is(header, strong, label, small, span) {
  color: inherit;
}

html[data-theme] .company-number-field input {
  color: var(--ink) !important;
  background: var(--input-bg) !important;
  border-color: var(--line) !important;
}

html[data-theme] :is(.company-reference-section, .company-number-card, .identity-reference-section) :is(button, .secondary, .ghost) {
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme] .company-reference-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-theme] .company-reference .company-reference-summary-actions > .primary {
  color: #ffffff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

html[data-theme] .company-reference .company-reference-summary-actions > .secondary {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}

html[data-theme] .company-reference .company-reference-visual-actions :is(label.secondary, label.ghost, a.secondary, a.ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  cursor: pointer;
}

html[data-theme] .company-reference .company-reference-visual-actions button.ghost {
  color: var(--ink) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
}

html[data-theme] .company-reference .company-reference-visual-actions button.ghost:disabled {
  opacity: .58;
  cursor: not-allowed;
}

html[data-theme] #appDialog.company-settings-dialog .company-editor-tabs {
  border-color: var(--line) !important;
  scrollbar-color: var(--muted) var(--surface-2);
}

html[data-theme] #appDialog.company-settings-dialog .company-editor-tabs button {
  color: var(--muted) !important;
  background: transparent !important;
}

html[data-theme] #appDialog.company-settings-dialog .company-editor-tabs button.active {
  border-bottom-color: var(--brand) !important;
  background: color-mix(in srgb, var(--brand) 12%, var(--surface)) !important;
  color: var(--brand) !important;
}

html[data-theme] #appDialog.company-settings-dialog #dialogBody .field :is(input, select, textarea) {
  border-color: var(--line) !important;
  background: var(--input-bg) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.company-settings-dialog #dialogBody .field :is(input, select, textarea):focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

html[data-theme] #appDialog.company-settings-dialog #dialogFooter button.primary {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #ffffff !important;
}

/* Keep settings navigation and backup notices aligned with the active palette. */
html[data-theme] body:is([data-page="settings"], [data-page="backup"]) :is(.settings-launchpad, .web-backup-settings, .locale-settings-reference, .settings-availability-note, .settings-launchpad-card) {
  border-color: var(--line) !important;
  background-color: var(--surface-2) !important;
  color: var(--ink) !important;
}
html[data-theme] body:is([data-page="settings"], [data-page="backup"]) :is(.settings-launchpad-card span, .settings-availability-note p, .settings-launchpad p, .locale-settings-note) { color: var(--muted) !important; }
html[data-theme] body[data-page="settings"] .settings-launchpad-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}
html[data-theme] body[data-page="settings"] .settings-launchpad-card strong { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .settings-launchpad-card span { grid-column: 1; }
html[data-theme] body[data-page="settings"] .settings-launchpad-card b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--brand) !important; }
html[data-theme] body[data-page="settings"] .settings-launchpad-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
html[data-theme] body:is([data-page="settings"], [data-page="backup"]) .settings-availability-note { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme] body:is([data-page="settings"], [data-page="backup"]) .settings-availability-note p { margin: 6px 0 0; }
html[data-theme] body[data-page="settings"] .web-backup-settings > header { margin-bottom: 16px; }
html[data-theme] body[data-page="settings"] .theme-reference-tabs { display:flex;gap:8px;margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line); }
html[data-theme] body[data-page="settings"] .theme-reference-tabs [role="tab"] { min-height:38px;padding:8px 14px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);border-radius:8px;font-weight:700; }
html[data-theme] body[data-page="settings"] .theme-reference-tabs [role="tab"].active { background:var(--brand);color:#fff;border-color:var(--brand); }
html[data-theme] body[data-page="settings"] [data-theme-inner-panel][hidden] { display:none !important; }
html[data-theme] body[data-page="settings"] .theme-reference-right-click .right-click-setting-card { background:var(--surface-2) !important;color:var(--ink) !important;border-color:var(--line) !important; }
html[data-theme] body[data-page="settings"] .theme-reference-right-click .right-click-setting-card small { color:var(--muted) !important; }
html[data-theme] body[data-page="settings"] .theme-reference-right-click .right-click-settings-grid { gap:10px; }

html[data-theme] body[data-page="settings"] .settings-content:has(.autonomous-reference-readonly) {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly :is(h2, h3, strong, b) { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly :is(p, small) { color: var(--muted) !important; }
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly .autonomous-kicker { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly .autonomous-kicker {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)) !important;
}
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly .autonomous-rule-readonly {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  cursor: not-allowed;
}
html[data-theme] body[data-page="settings"] .autonomous-reference-readonly .autonomous-rule-readonly input {
  accent-color: var(--brand);
  opacity: .72;
}
html[data-theme] body[data-page="settings"][data-settings-section="audit-settings"] .audit-metrics article {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme] body[data-page="settings"][data-settings-section="audit-settings"] .audit-metrics article :is(small, span) { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"][data-settings-section="audit-settings"] .audit-metrics article strong { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"][data-settings-section="audit-settings"] .audit-metrics article:nth-child(2) strong { color: var(--danger) !important; }
html[data-theme] body[data-page="settings"][data-settings-section="audit-settings"] .audit-metrics article:nth-child(3) strong { color: var(--ink) !important; }
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article :is(small, span) { color: var(--ink) !important; }

html[data-theme] #appDialog.company-settings-dialog form #dialogFooter button#dialogSubmit.primary,
html[data-theme] #appDialog.company-settings-dialog .company-editor-tabs button.active {
  border-color: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] #appDialog.quick-note-editor-dialog .quick-note-editor-fields > .field > label {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.quick-note-editor-dialog .quick-note-editor > p,
html[data-theme] #appDialog.company-settings-dialog .company-settings-editor small,
html[data-theme] body[data-page="settings"] .p9-template-token-panel small {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-token-panel small,
html[data-theme] #appDialog.audit-report-dialog .audit-status span {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.audit-report-dialog .audit-severity button.active {
  border-color: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .audit-page-tabs .tab.active,
html[data-theme] #appDialog.audit-report-dialog .active {
  border-color: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  color: #ffffff !important;
}
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article strong { color: var(--ink) !important; }
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article:nth-child(2) strong { color: var(--danger) !important; }
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article:nth-child(3) strong { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .theme-reference-right-click .right-click-settings { color:var(--ink); }
html[data-theme] body[data-page="settings"] .web-backup-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px; }
html[data-theme] body[data-page="settings"] .web-backup-retention,
html[data-theme] body[data-page="settings"] .web-backup-card header > span { color:var(--muted);font-size:12px; }
html[data-theme] body[data-page="settings"] .web-backup-server-fields { margin:12px 0; }
html[data-theme] body[data-page="settings"] .web-backup-schedule-fields { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0; }
html[data-theme] body[data-page="settings"] .web-backup-toggle { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 10px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:700; }
html[data-theme] body[data-page="settings"] .web-backup-schedule-fields .field { margin:0; }
html[data-theme] body[data-page="settings"] .web-backup-schedule-fields .field input { width:100%; }
html[data-theme] body[data-page="settings"] .security-reference-actions { display:flex;justify-content:flex-end; }
html[data-theme] body[data-page="settings"] .security-reference-actions button { min-width:200px;min-height:46px; }
html[data-theme] body[data-page="settings"] .web-backup-status-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0; }
html[data-theme] body[data-page="settings"] .web-backup-status-grid article,
html[data-theme] body[data-page="settings"] .web-backup-card { background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px; }
html[data-theme] body[data-page="settings"] .web-backup-status-grid article { display:grid;gap:4px; }
html[data-theme] body[data-page="settings"] .web-backup-status-grid small { color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.04em; }
html[data-theme] body[data-page="settings"] .web-backup-status-grid span,
html[data-theme] body[data-page="settings"] .web-backup-card p,
html[data-theme] body[data-page="settings"] .web-backup-card li { color:var(--muted);font-size:13px;line-height:1.55; }
html[data-theme] body[data-page="settings"] .web-backup-card-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
html[data-theme] body[data-page="settings"] .web-backup-card header { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px; }
html[data-theme] body[data-page="settings"] .web-backup-card h4 { margin:0;color:var(--ink);font-size:16px; }
html[data-theme] body[data-page="settings"] .web-backup-card .actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
html[data-theme] body[data-page="settings"] .web-backup-card button:disabled { opacity:.55;cursor:not-allowed; }
html[data-theme] body[data-page="settings"] .web-backup-preferences,
html[data-theme] body[data-page="settings"] .web-backup-scope { list-style:none;padding:0;margin:10px 0 0; }
html[data-theme] body[data-page="settings"] .web-backup-preferences li { display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--line); }
html[data-theme] body[data-page="settings"] .web-backup-preferences b { color:var(--ink); }
html[data-theme] body[data-page="settings"] .web-backup-scope li { padding:4px 0; }
html[data-theme] body[data-page="settings"] .web-backup-danger { border-color:var(--danger); }
@media (min-width:761px) {
  html[data-theme] body[data-page="settings"] .content { padding-bottom:180px !important; }
}
@media(max-width:900px) {
  html[data-theme] body[data-page="settings"] .web-backup-status-grid { grid-template-columns:1fr; }
  html[data-theme] body[data-page="settings"] .web-backup-card-grid { grid-template-columns:1fr; }
  html[data-theme] body[data-page="settings"] .web-backup-heading { flex-direction:column; }
}
@media (max-width: 720px) { html[data-theme] body[data-page="settings"] .settings-launchpad-grid { grid-template-columns: 1fr; } }

html[data-theme] body[data-page="settings"] .voice-scenario-settings { color: var(--ink); }
html[data-theme] body[data-page="settings"] .voice-scenario-settings > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
html[data-theme] body[data-page="settings"] .voice-scenario-settings .table-wrap { max-height: min(58vh, 720px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
html[data-theme] body[data-page="settings"] .voice-scenario-settings table { min-width: 720px; }
html[data-theme] body[data-page="settings"] .voice-scenario-settings td { color: var(--ink); }
html[data-theme] body[data-page="settings"] .voice-scenario-settings td:nth-child(2) { color: var(--muted); }
html[data-theme] body[data-page="settings"] .voice-scenario-settings td:last-child { display: flex; gap: 8px; }

html[data-theme="midnight"] body[data-settings-section="notes"] .quick-note-count {
  border-color: #60a5fa;
  color: #93c5fd;
}

html[data-theme="midnight"] body[data-settings-section="security"] .security-reference-head > span,
html[data-theme="midnight"] body[data-settings-section="identity"] .identity-reference-head > span {
  color: #93c5fd;
}

html[data-theme="neon"] body[data-settings-section="security"] .security-reference-head > span,
html[data-theme="neon"] body[data-settings-section="identity"] .identity-reference-head > span {
  color: #c4b5fd;
}

html[data-theme] body[data-settings-section="voice-settings"] .voice-reference-local-device {
  display: grid;
  gap: 5px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}

html[data-theme] body[data-settings-section="voice-settings"] .voice-reference-local-device span {
  color: var(--muted);
  line-height: 1.5;
}

html[data-theme] :is(.company-reference-section, .company-number-card, .identity-reference-section) :is(button.primary, .primary) {
  color: #ffffff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

html[data-theme="light"] .quick-note-count,
html[data-theme="sakura"] .quick-note-count,
html[data-theme="sunset"] .quick-note-count,
html[data-theme="terra"] .quick-note-count {
  color: #1d4ed8 !important;
}

html[data-theme="light"] .messaging-ref-icon,
html[data-theme="sakura"] .messaging-ref-icon,
html[data-theme="sunset"] .messaging-ref-icon,
html[data-theme="terra"] .messaging-ref-icon {
  color: #047857 !important;
}

html[data-theme="light"] .badge.success,
html[data-theme="sakura"] .badge.success,
html[data-theme="sunset"] .badge.success,
html[data-theme="terra"] .badge.success {
  color: #047857 !important;
}

html[data-theme="forest"] .quick-note-count {
  color: #93c5fd !important;
}

html[data-theme="forest"] .badge.success {
  color: #6ee7b7 !important;
}

html[data-theme="forest"] .messaging-ref-icon {
  color: #25d366 !important;
}

html[data-theme] body[data-page="settings"] .theme-reference-tabs button.active {
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .settings-user-identity > span {
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme="midnight"] body[data-settings-section="telegram"] .p9-bot-icon,
html[data-theme="neon"] body[data-settings-section="telegram"] .p9-bot-icon {
  color: #101522 !important;
}

html[data-theme] body[data-page="settings"] :is(#content button.primary, #appDialog button.primary, .page-head button.primary) {
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .p9-bot-icon {
  color: #101522 !important;
}

html[data-theme="terra"] body[data-page="settings"] .company-reference-map-status {
  color: #d1fae5 !important;
}

html[data-theme="sakura"] body[data-page="settings"] .company-reference-map-status,
html[data-theme="sunset"] body[data-page="settings"] .company-reference-map-status {
  color: #d1fae5 !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram .p9-telegram-preview > .p9-bot-icon {
  color: #101522 !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-tabs button.active {
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-telegram-actions {
  background: linear-gradient(transparent, var(--surface) 25%) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-subnav button.active,
html[data-theme] body[data-page="settings"] .settings-content .p9-smtp-security-segments button.active {
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-subnav button:not(.active),
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-provider button:not(.active):not(.primary):not([data-p9-save-settings]),
html[data-theme] body[data-page="settings"] .settings-content .p9-smtp button:not(.active):not(.primary) {
  border: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-provider .p9-sms-loop > footer button,
html[data-theme] body[data-page="settings"] .settings-content .p9-smtp-security-segments button.active {
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-smtp :is(.p9-smtp-metrics article, .p9-smtp-notice, .p9-smtp-security, .p9-smtp-security-segments, .p9-smtp-checkboxes, .p9-smtp-test-state, .p9-smtp-log, #p9SmtpLog, .p9-smtp-automations > div, .p9-smtp-lock, .p9-smtp-checklist, .p9-smtp-check) {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-smtp :is(.p9-smtp-metrics article, .p9-smtp-notice, .p9-smtp-security, .p9-smtp-security-segments, .p9-smtp-checkboxes, .p9-smtp-test-state, .p9-smtp-log, #p9SmtpLog, .p9-smtp-automations > div, .p9-smtp-lock, .p9-smtp-checklist, .p9-smtp-check) :is(h1, h2, h3, h4, p, small, strong, b, label, span, code, i) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-smtp :is(.p9-smtp-metrics strong, .p9-smtp-metrics small, .p9-smtp-metrics article > span, .p9-smtp-notice > b, .p9-smtp-accent, .p9-smtp-lock, .p9-smtp-automations span) {
  color: var(--brand) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-token-panel, .p9-template-card) {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-token-panel b, .p9-template-toolbar h2, .p9-template-table th, .p9-template-empty, .p9-template-footer, .p9-template-footer small) {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-token-panel small, .p9-template-toolbar p, .p9-template-footer > div small) {
  color: var(--muted) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tokens button,
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-footer button,
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-footer > div > b {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tokens button b {
  color: var(--brand) !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-icon {
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-smtp :is(button.success, .p9-smtp-test-card button.test) {
  border-color: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  background: color-mix(in srgb, var(--brand) 72%, #000000) !important;
  color: #ffffff !important;
}


html[data-theme="neon"] .quick-note-count { color: #c4b5fd !important; }

@media (min-width: 761px) {
  body[data-page="settings"] .settings-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  body[data-page="settings"] .settings-sidebar {
    display: flex !important;
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - 145px) !important;
    overflow: auto !important;
    align-self: start !important;
  }

  body[data-page="settings"] .settings-mobile-picker {
    display: none !important;
  }

  body[data-page="settings"] .settings-content {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .settings-layout,
  body[data-page="settings"][data-settings-section="identity"] .settings-layout,
  body[data-page="settings"]:has(.p9-telegram) .settings-layout,
  body[data-page="settings"]:has(.settings-content > .p9-sms-provider) .settings-layout,
  body[data-page="settings"]:has(.p9-sms-provider) .settings-layout,
  body[data-page="settings"]:has(.p9-sms-templates) .settings-layout,
  body[data-page="settings"]:has(.p9-templates) .settings-layout,
  body[data-page="settings"]:has(.p9-smtp) .settings-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .settings-sidebar,
  body[data-page="settings"][data-settings-section="identity"] .settings-sidebar,
  body[data-page="settings"]:has(.p9-telegram) .settings-sidebar,
  body[data-page="settings"]:has(.settings-content > .p9-sms-provider) .settings-sidebar,
  body[data-page="settings"]:has(.p9-sms-provider) .settings-sidebar,
  body[data-page="settings"]:has(.p9-sms-templates) .settings-sidebar,
  body[data-page="settings"]:has(.p9-templates) .settings-sidebar,
  body[data-page="settings"]:has(.p9-smtp) .settings-sidebar {
    display: flex !important;
  }

  body[data-page="settings"][data-settings-section="identity"] .page-head .actions {
    left: calc(var(--sidebar) + 284px) !important;
  }
}

@media (min-width: 761px) and (max-width: 1700px) {
  body[data-page="settings"][data-settings-section="notes"] .quick-notes-card-head {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .quick-notes-actions {
    flex-wrap: wrap !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .quick-notes-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .quick-notes-toolbar > label {
    justify-content: space-between !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .quick-note-tags {
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  body[data-page="settings"][data-settings-section="notes"] #quickNotesHost {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  body[data-page="settings"][data-settings-section="notes"] .settings-content {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

@media (max-width: 760px) {
  body[data-page="settings"] .settings-layout {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="settings"] .settings-sidebar {
    display: none !important;
  }

  body[data-page="settings"] .settings-mobile-picker {
    display: block !important;
  }

  body[data-page="settings"] .settings-content {
    grid-column: 1 !important;
    width: 100% !important;
  }
}


/* Keep the system identity save action available while its long form scrolls. */
body[data-page="settings"][data-settings-section="identity"] .identity-reference-save {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

body[data-page="settings"][data-settings-section="identity"] .main {
  overflow: hidden !important;
}

body[data-page="settings"][data-settings-section="identity"] .settings-content {
  padding-bottom: 280px !important;
}

body[data-page="settings"][data-settings-section="identity"] .identity-reference-save {
  position: fixed !important;
  right: 88px;
  bottom: 28px;
  left: calc(var(--sidebar, 320px) + 14px);
  z-index: 120;
  margin: 0;
  background: var(--surface);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--surface) 88%, transparent);
}

@media (max-width: 760px) {
  body[data-page="settings"][data-settings-section="identity"] .identity-reference-save {
    right: 76px;
    bottom: 30px;
    left: 12px;
  }
}

body[data-page="settings"][data-settings-section="identity"] .identity-reference {
  padding-bottom: 12px !important;
}
@media (min-width: 1101px) {
  body[data-page="settings"] .settings-layout {
    display: grid !important;
    grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) !important;
    align-items: start;
    gap: 12px !important;
  }

  body[data-page="settings"] .settings-mobile-picker {
    display: none !important;
  }

  body[data-page="settings"] .settings-layout > .settings-sidebar {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-height: calc(100vh - 190px);
    overflow: auto;
  }

  body[data-page="settings"] .settings-layout > .settings-content {
    grid-column: 2 !important;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }
}

html[data-theme] #appDialog.voice-shortcut-editor-dialog {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
html[data-theme] #appDialog.voice-shortcut-editor-dialog > form > header {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme] #appDialog.voice-shortcut-editor-dialog #dialogTitle,
html[data-theme] #appDialog.voice-shortcut-editor-dialog .voice-shortcut-form .field label {
  color: var(--ink) !important;
}
html[data-theme] #appDialog.voice-shortcut-editor-dialog .voice-shortcut-form .field :is(input, select, textarea) {
  border-color: var(--line) !important;
  background: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}
html[data-theme] #appDialog.voice-shortcut-editor-dialog .voice-shortcut-form .field :is(input, select, textarea)::placeholder {
  color: var(--muted) !important;
  opacity: 1;
}
html[data-theme] #appDialog.voice-shortcut-editor-dialog #dialogFooter {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme] #appDialog.audit-report-dialog .audit-metrics article :is(small, span) { color: var(--ink) !important; }
html[data-theme] body[data-page="settings"] .proforma-template-editor,
html[data-theme] body[data-page="settings"] .proforma-custom-pdf,
html[data-theme] body[data-page="settings"] .proforma-template-toolbar,
html[data-theme] body[data-page="settings"] .proforma-template-active {
  color: var(--ink) !important;
}
html[data-theme] body[data-page="settings"] .proforma-custom-pdf,
html[data-theme] body[data-page="settings"] .proforma-template-toolbar,
html[data-theme] body[data-page="settings"] .proforma-template-active {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
}
html[data-theme] body[data-page="settings"] .proforma-custom-pdf p,
html[data-theme] body[data-page="settings"] .proforma-custom-pdf small,
html[data-theme] body[data-page="settings"] .proforma-template-toolbar > span,
html[data-theme] body[data-page="settings"] .proforma-template-color,
html[data-theme] body[data-page="settings"] .proforma-template-source-details summary {
  color: var(--muted) !important;
}
html[data-theme] body[data-page="settings"] .proforma-template-source {
  border-color: var(--line) !important;
  background: var(--input-bg, var(--surface)) !important;
  color: var(--ink) !important;
}
html[data-theme] body[data-page="settings"] .proforma-desktop-layout {
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  padding: 14px;
  margin: 12px 0;
}
html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header > div { display: grid; gap: 4px; }
html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header span,
html[data-theme] body[data-page="settings"] .proforma-desktop-layout > p { color: var(--muted) !important; }
html[data-theme] body[data-page="settings"] .proforma-layout-setting { display: none !important; }
html[data-theme] .proforma-layout-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 90px rgb(0 0 0 / 42%);
}
html[data-theme] .proforma-layout-dialog::backdrop { background: rgb(2 8 20 / 72%); backdrop-filter: blur(3px); }
html[data-theme] .proforma-layout-dialog > header,
html[data-theme] .proforma-layout-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
html[data-theme] .proforma-layout-dialog > header h2 { margin: 4px 0; color: var(--ink); }
html[data-theme] .proforma-layout-dialog > header p,
html[data-theme] .proforma-layout-dialog > header small,
html[data-theme] .proforma-layout-dialog .muted,
html[data-theme] .proforma-layout-dialog [data-layout-status] { color: var(--muted); }
html[data-theme] .proforma-layout-content { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 320px; max-height: calc(100dvh - 170px); }
html[data-theme] .proforma-layout-content > aside { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; border-right: 1px solid var(--line); background: var(--surface-2); }
html[data-theme] .proforma-layout-content label,
html[data-theme] .proforma-layout-content [data-layout-active] { color: var(--ink); font-weight: 650; }
html[data-theme] .proforma-layout-content select,
html[data-theme] .proforma-layout-fields button { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg, var(--surface)); color: var(--ink); padding: 8px; }
html[data-theme] .proforma-layout-fields { display: grid; gap: 7px; }
html[data-theme] .proforma-layout-fields button { text-align: left; cursor: pointer; }
html[data-theme] .proforma-layout-fields button.active { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-theme] .proforma-layout-scroll { min-width: 0; overflow: auto; padding: 18px; background: var(--surface); }
html[data-theme] .proforma-layout-canvas { position: relative; width: fit-content; max-width: 100%; margin: auto; cursor: crosshair; touch-action: none; user-select: none; }
html[data-theme] .proforma-layout-canvas img { display: block; width: auto; height: auto; max-width: min(100%, 1000px); max-height: calc(100dvh - 230px); object-fit: contain; pointer-events: none; }
html[data-theme] .proforma-layout-overlay { position: absolute; inset: 0; pointer-events: none; }
html[data-theme] .proforma-layout-box { position: absolute; display: block; overflow: hidden; border: 2px solid #1976d2; background: rgb(25 118 210 / 20%); color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #000; }
html[data-theme] .proforma-layout-box.field-customer_name { border-color: #16a765; background: rgb(22 167 101 / 20%); }
html[data-theme] .proforma-layout-box.field-date { border-color: #e5a900; background: rgb(229 169 0 / 22%); }
html[data-theme] .proforma-layout-box.field-table { border-color: #9856c7; background: rgb(152 86 199 / 18%); }
html[data-theme] .proforma-layout-box.field-totals { border-color: #e64b4b; background: rgb(230 75 75 / 18%); }
html[data-theme] .proforma-layout-box.active { border-width: 3px; }
html[data-theme] .proforma-layout-dialog > footer { justify-content: flex-end; border-top: 1px solid var(--line); border-bottom: 0; }
@media (max-width: 720px) {
  html[data-theme] .proforma-layout-content { grid-template-columns: 1fr; overflow: auto; }
  html[data-theme] .proforma-layout-content > aside { border-right: 0; border-bottom: 1px solid var(--line); }
  html[data-theme] .proforma-layout-fields { grid-template-columns: 1fr 1fr; }
}

/* Keep service-intake labels and status text legible in every palette. */
html[data-theme] #appDialog.service-accept-dialog .service-form-state {
  border-color: color-mix(in srgb, var(--success) 44%, var(--line)) !important;
  background: color-mix(in srgb, var(--success) 16%, var(--surface)) !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-form-fault .field > label,
html[data-theme] #appDialog.service-accept-dialog .service-form-customer .field > label,
html[data-theme] #appDialog.service-accept-dialog .service-footer-status {
  color: var(--ayec-slate-ink) !important;
}

html[data-theme="light"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="sakura"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="sunset"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="terra"] #appDialog.service-accept-dialog .service-form-card p.service-form-state {
  color: #064e3b !important;
}

html[data-theme="dark"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="midnight"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="forest"] #appDialog.service-accept-dialog .service-form-card p.service-form-state,
html[data-theme="neon"] #appDialog.service-accept-dialog .service-form-card p.service-form-state {
  color: #a7f3d0 !important;
}

html[data-theme="light"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="sakura"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="sunset"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="terra"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="light"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="sakura"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="sunset"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="terra"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="light"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="sakura"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="sunset"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="terra"] #appDialog.service-accept-dialog .service-footer-status {
  color: #302923 !important;
}

html[data-theme="light"] #appDialog.service-accept-dialog .service-accept-form label.service-fault-label,
html[data-theme="sakura"] #appDialog.service-accept-dialog .service-accept-form label.service-fault-label,
html[data-theme="sunset"] #appDialog.service-accept-dialog .service-accept-form label.service-fault-label,
html[data-theme="terra"] #appDialog.service-accept-dialog .service-accept-form label.service-fault-label {
  color: #302923 !important;
}

html[data-theme="dark"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="midnight"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="forest"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="neon"] #appDialog.service-accept-dialog .service-accept-form .field > label,
html[data-theme="dark"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="midnight"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="forest"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="neon"] #appDialog.service-accept-dialog .service-accept-form label,
html[data-theme="dark"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="midnight"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="forest"] #appDialog.service-accept-dialog .service-footer-status,
html[data-theme="neon"] #appDialog.service-accept-dialog .service-footer-status {
  color: #eaf0f8 !important;
}

html[data-theme] #appDialog.service-accept-dialog .service-currency-select button.active {
  background: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogFooter {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog #dialogSubmit,
html[data-theme] body[data-page="settings"] #appDialog.company-edit-dialog #dialogSubmit {
  background: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  border-color: color-mix(in srgb, var(--brand) 68%, #000000) !important;
  color: #ffffff !important;
}

html[data-theme] #appDialog.company-edit-dialog .active {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] #backupDriveStatus,
html[data-theme] body[data-page="settings"] .company-reference-logo-empty,
html[data-theme] body[data-page="settings"] .voice-reference-badge,
html[data-theme] body[data-page="settings"] .settings-launchpad-card > b {
  color: var(--ink) !important;
}

html[data-theme] .p9-sms-templates .p9-template-tokens button b {
  color: var(--ink) !important;
}

html[data-theme] .p9-template-token-panel .p9-template-tokens button b {
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .p9-sms-templates .p9-template-token-panel .p9-template-tokens button b {
  color: var(--ink) !important;
}

html[data-theme] #appDialog.service-accept-dialog {
  --muted: color-mix(in srgb, var(--ink) 72%, var(--ayec-slate-muted));
}

html[data-theme="light"] #appDialog.service-accept-dialog,
html[data-theme="sakura"] #appDialog.service-accept-dialog {
  --warn: color-mix(in srgb, var(--ink) 34%, var(--ayec-slate-warn));
}

html[data-theme] #appDialog.company-settings-dialog {
  height: fit-content !important;
  max-height: min(78vh, calc(100svh - 24px)) !important;
}

html[data-theme] #appDialog.company-settings-dialog > form {
  height: fit-content !important;
  max-height: min(78vh, calc(100svh - 24px)) !important;
}

html[data-theme] #appDialog.company-settings-dialog #dialogBody {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header > div {
  display: grid;
  gap: 4px;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header span,
html[data-theme] body[data-page="settings"] .proforma-desktop-layout > p {
  color: var(--muted) !important;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout > p {
  margin: 0;
  line-height: 1.55;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout button:disabled {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
  opacity: .72;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout details {
  display: grid;
  gap: 7px;
}

html[data-theme] body[data-page="settings"] .proforma-desktop-layout textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font: 11px/1.45 var(--font-mono, monospace);
}

@media (max-width: 620px) {
  html[data-theme] body[data-page="settings"] .proforma-desktop-layout > header {
    align-items: flex-start;
    flex-direction: column;
  }
}
#appDialog.proforma-preview-modal{width:min(940px,calc(100vw - 28px));height:min(940px,calc(100svh - 28px));max-height:calc(100svh - 28px)}
#appDialog.proforma-preview-modal>form{height:100%;max-height:100%;display:flex;flex-direction:column}
#appDialog.proforma-preview-modal #dialogBody{min-height:0;flex:1;overflow:hidden;padding:8px;background:var(--surface)}
.proforma-preview-dialog{height:100%;min-height:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.proforma-preview-dialog iframe{display:block;width:100%;height:100%;min-height:320px;border:0;background:var(--surface)}
@media(max-width:560px){#appDialog.proforma-preview-modal{width:calc(100vw - 16px);height:calc(100svh - 16px);max-height:calc(100svh - 16px)}#appDialog.proforma-preview-modal #dialogBody{padding:4px}.proforma-preview-dialog iframe{min-height:240px}}

html[data-theme] body[data-page="settings"] .settings-content .p9-demo-actions .p9-demo-action {
  flex: 1;
  min-height: 20px;
  padding: 3px 5px;
  border: 1px solid var(--line) !important;
  border-radius: 3px;
  background: var(--surface-2) !important;
  color: var(--ink-muted) !important;
  font-size: 8px;
  text-align: center;
}

html[data-theme] body[data-page="settings"] .settings-content .p9-demo-actions .p9-demo-action-approved {
  color: var(--success) !important;
}

/* Gemini model picker: keep a one-control dialog compact and tokenized. */
#appDialog[open]:has(.gemini-model-picker-content){box-sizing:border-box!important;width:min(560px,calc(100vw - 32px))!important;height:fit-content!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
#appDialog:has(.gemini-model-picker-content)>form{height:auto!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
#appDialog:has(.gemini-model-picker-content) #dialogBody{box-sizing:border-box;flex:0 1 auto!important;min-height:0!important;max-height:calc(100svh - 190px)!important;overflow:auto!important}
#appDialog .gemini-model-picker-content{display:grid;gap:12px}
#appDialog .gemini-model-picker-content>p{margin:0}

/* SMS template list uses desktop-era dark literals; map every state to the active palette. */
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates{color:var(--ink)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-table-wrap th{background:var(--surface-2)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-table-wrap td{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-table-wrap tbody tr:nth-child(even) td{background:var(--surface-2)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-table-wrap tbody tr:hover td{background:color-mix(in srgb,var(--brand) 10%,var(--surface))!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-number,.p9-template-meta,.p9-template-token-panel>header small,.p9-template-toolbar p,.p9-template-tokens button small,.p9-template-footer>div small){color:var(--muted)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-name{background:color-mix(in srgb,var(--brand) 14%,var(--surface))!important;color:color-mix(in srgb,var(--brand) 55%,var(--ink))!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-content{color:var(--ink)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-content code,.p9-template-preview code){background:color-mix(in srgb,var(--brand) 18%,var(--surface))!important;color:color-mix(in srgb,var(--brand) 55%,var(--ink))!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-length b,.p9-template-active){color:var(--success)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-length small,.p9-template-active){background:color-mix(in srgb,var(--success) 14%,var(--surface))!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tokens button{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tokens button b{color:color-mix(in srgb,var(--brand) 55%,var(--ink))!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tool-actions button{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-tool-actions button.primary{background:var(--brand)!important;color:#ffffff!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-actions button{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-actions button:first-child{background:var(--brand)!important;border-color:var(--brand)!important;color:#ffffff!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-actions button:last-child{color:var(--danger)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates .p9-template-token-panel>header>span{color:var(--success)!important}
html[data-theme] body[data-page="settings"] .settings-content .p9-sms-templates :is(.p9-template-table-wrap,.p9-template-card,.p9-template-token-panel){border-color:var(--line)!important}

/* Keep short voice scenario forms sized to their content, with a bounded scroll area. */
html[data-theme] #appDialog[open]:has(.voice-scenario-form){box-sizing:border-box!important;width:min(640px,calc(100vw - 32px))!important;height:fit-content!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
html[data-theme] #appDialog:has(.voice-scenario-form)>form{height:auto!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
html[data-theme] #appDialog:has(.voice-scenario-form) #dialogBody{box-sizing:border-box;flex:0 1 auto!important;min-height:0!important;max-height:calc(100svh - 170px)!important;overflow:auto!important}
html[data-theme] #appDialog[open]:has(.voice-shortcut-form){box-sizing:border-box!important;width:min(720px,calc(100vw - 32px))!important;height:fit-content!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
html[data-theme] #appDialog:has(.voice-shortcut-form)>form{height:auto!important;min-height:0!important;max-height:calc(100svh - 32px)!important}
html[data-theme] #appDialog:has(.voice-shortcut-form) #dialogBody{box-sizing:border-box;flex:0 1 auto!important;min-height:0!important;max-height:calc(100svh - 170px)!important;overflow:auto!important}