/* CashControl / Mineral Spectrum, 2026-10-20.
   Scope: default appearance ONLY. Seasonal themes intentionally inherit styles.css untouched.
   Palette: navy foundation + cyan/teal and violet facets of the original logo. */
html:not(.theme-halloween):not(.theme-new-year) {
  color-scheme: light; /* Standard light mode uses readable light native controls. */
  --bg: #9caec0;
  --surface: #b2c1ce;
  --surface-2: #a6b7c7;
  --surface-3: #c0ccd5;
  --text: #10283f;
  --muted: #293e54;
  --text-muted: #293e54;
  --disabled-text: #30445a;
  --accent: #004359;
  --accent-text: #dde8ed;
  --accent-2: #50358e;
  --brand-navy: #071b38;
  --brand-navy-2: #10315a;
  --brand-green: #13bcae;
  --brand-green-2: #23d2d3;
  --brand-cyan: #23d2d3;
  --brand-gold: #5230ec;
  --brand-gold-2: #9157fb;
  --success: #10543d;
  --danger: #84263e;
  --warning: #654203;
  --status-success-text: #10543d;
  --status-warning-text: #654203;
  --status-danger-text: #84263e;
  --border: #758da3;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 20px;
  --shadow: 0 2px 8px rgba(16,40,63,.09);
  --shadow-lg: 0 4px 12px rgba(16,40,63,.17);
  --cc-nav: #b2c1ce;
  --cc-outline: #5c8498;
  --cc-gradient: linear-gradient(110deg,#006477,#004359);
  --cc-hero: linear-gradient(115deg,#a7c7ce,#b2c1ce);
  --cc-modal-overlay: rgba(7,27,56,.58);
  --cc-input: #e4edf5;
  --cc-input-text: #10283f;
  --cc-input-border: #758da3;
  --cc-placeholder: #3e556b;
  --cc-native-scheme: light;
  --cc-selected-nav: #9ab5c5;
  --cc-brand-border: #52677c;
  --cc-badge-success-border: #719d8c;
  --cc-badge-warning-border: #ac9c79;
  --cc-badge-danger-border: #ac8290;
  --cc-danger-button-border: #a67b8b;
  --cc-notification-text: #f0f6fc;
  --cc-success-bg: #a3c5b7;
  --cc-warning-bg: #d3c6a6;
  --cc-danger-bg: #d0b5bf;
  --cc-focus: #004359;
  --ui-glow-a: transparent;
  --ui-glow-b: transparent;
  --ui-glow-c: transparent;
  --button-hover-lift: -1px;
}

/* Shared colors: use solid backgrounds to avoid GPU blending on old phones. */
html:not(.theme-halloween):not(.theme-new-year),
html:not(.theme-halloween):not(.theme-new-year) body {
  background: var(--bg);
  color: var(--text);
  scrollbar-color: var(--border) var(--bg);
}
html:not(.theme-halloween):not(.theme-new-year) :is(body,.content,.modal,.notification-panel,.bc-notification-scroll,.oi-client-options)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html:not(.theme-halloween):not(.theme-new-year) :is(body,.content,.modal,.notification-panel,.bc-notification-scroll,.oi-client-options)::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
}
html:not(.theme-halloween):not(.theme-new-year) :is(body,.content,.modal,.notification-panel,.bc-notification-scroll,.oi-client-options)::-webkit-scrollbar-track {
  background: var(--surface-2);
}
html:not(.theme-halloween):not(.theme-new-year) ::selection {
  background: var(--accent);
  color: var(--accent-text);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.topbar,.bottom-nav) {
  background: var(--cc-nav);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-color: var(--border);
}
html:not(.theme-halloween):not(.theme-new-year) .topbar {
  border-bottom: 1px solid var(--border);
}
html:not(.theme-halloween):not(.theme-new-year) .bottom-nav {
  border-top: 1px solid var(--border);
}
html:not(.theme-halloween):not(.theme-new-year) .brand-title {
  letter-spacing: -.025em;
  font-weight: 800;
}
/* The provided raster logo is displayed unchanged and with its original proportions. */
html:not(.theme-halloween):not(.theme-new-year) .brand-mark {
  background: var(--brand-navy);
  border: 1px solid var(--cc-brand-border);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .brand-mark::after { display: none; }
html:not(.theme-halloween):not(.theme-new-year) .brand-mark-fallback { color: #dde8ed; }
html:not(.theme-halloween):not(.theme-new-year) .brand-subtitle { color: var(--muted); }

/* Tiles, list rows, route cards, reports, notification popover. */
html:not(.theme-halloween):not(.theme-new-year) :is(
  .card,.stat,.list-item,.route-point-item,.transaction-detail-section,
  .transaction-detail-summary,.detail-cell,.ep-moysklad-candidate,
  .ep-existing-payment,.ep-recent-documents,.ep-sync-context-box,
  .ep-sync-notice,.ep-remember-choice,.quick-action,.more-menu-icon,
  .suggestions,.notification-panel,.bc-file-preview,.oi-match-box
) {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.card,.stat,.list-item,.route-point-item) {
  border-radius: var(--radius);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.detail-cell,.ep-sync-notice,.ep-sync-context-box,.route-children,.bc-check,.bc-user-result) {
  background: var(--surface-2);
}
html:not(.theme-halloween):not(.theme-new-year) .hero {
  background: var(--cc-hero);
  border: 1px solid var(--cc-outline);
  box-shadow: var(--shadow);
}
html:not(.theme-halloween):not(.theme-new-year) .hero::after { display: none; filter: none; animation: none; }
html:not(.theme-halloween):not(.theme-new-year) :is(.big-balance,.stat-value,.amount,.transaction-detail-amount) {
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .big-balance {
  color: var(--text);
  font-weight: 850;
}
html:not(.theme-halloween):not(.theme-new-year) .profile-avatar {
  background: #8fbac5;
  color: var(--text);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.amount.in,.bc-status--sent) { color: var(--success); }
html:not(.theme-halloween):not(.theme-new-year) :is(.amount.out,.bc-status--error,.bc-status--cancelled) { color: var(--danger); }
html:not(.theme-halloween):not(.theme-new-year) :is(.bc-status--sending,.ep-sync-warning) { color: var(--warning); }

/* Meaningful states, each with readable dark text on medium-tone badges. */
html:not(.theme-halloween):not(.theme-new-year) :is(.badge.success,.ep-sync-badge--synced,.oi-batch-ready,.oi-batch-created) {
  background: var(--cc-success-bg);
  color: var(--success);
  border-color: var(--cc-badge-success-border);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.badge.warning,.ep-sync-badge--pending,.oi-batch-paused) {
  background: var(--cc-warning-bg);
  color: var(--warning);
  border-color: var(--cc-badge-warning-border);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.badge.danger,.oi-batch-blocked) {
  background: var(--cc-danger-bg);
  color: var(--danger);
  border-color: var(--cc-badge-danger-border);
}
html:not(.theme-halloween):not(.theme-new-year) :is(.badge.success,.badge.warning,.badge.danger) {
  font-weight: 750;
}
html:not(.theme-halloween):not(.theme-new-year) .notification-badge {
  background: var(--danger);
  color: var(--cc-notification-text);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .oi-root :is(.oi-match-ok,.oi-draft-created .oi-dispatch-status,.oi-batch-ready,.oi-batch-created) { color: var(--success); }
html:not(.theme-halloween):not(.theme-new-year) .oi-root :is(.oi-match-pending,.oi-price-errors,.oi-price-line-issues) { color: var(--warning); }
html:not(.theme-halloween):not(.theme-new-year) .oi-root :is(.oi-danger,.oi-batch-danger,.oi-dispatch-danger) { color: var(--danger); }
html:not(.theme-halloween):not(.theme-new-year) .oi-root .oi-candidate.chosen {
  background: var(--surface-3);
  border-color: var(--accent);
}
html:not(.theme-halloween):not(.theme-new-year) .oi-root .oi-client-options {
  background: var(--surface-3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* Primary brand actions stay dark enough for accessible soft-light labels. */
html:not(.theme-halloween):not(.theme-new-year) :is(.primary,.browser-gate__primary,.bc-inline-link) {
  background: var(--cc-gradient);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.route-number,.action-confirm-icon) {
  background: var(--cc-gradient);
  color: var(--accent-text);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.secondary,.quick-action,.browser-gate__secondary) {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .danger-button {
  background: var(--cc-danger-bg);
  color: var(--danger);
  border: 1px solid var(--cc-danger-button-border);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.icon-button,.close,.more-menu-icon) {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
  min-width: 44px;
  min-height: 44px;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.primary,.secondary,.danger-button,.quick-action,.nav-item,.segment,.oi-root button) {
  min-height: 44px;
}
html:not(.theme-halloween):not(.theme-new-year) .nav-item {
  color: var(--disabled-text);
  border-radius: var(--radius-sm);
  min-height: 52px;
  padding-inline: 1px;
}
html:not(.theme-halloween):not(.theme-new-year) .nav-item.active {
  color: var(--accent);
  background: var(--cc-selected-nav);
}
html:not(.theme-halloween):not(.theme-new-year) .nav-item.active::after {
  background: var(--accent);
  box-shadow: none;
  animation: none;
}
html:not(.theme-halloween):not(.theme-new-year) .segment.active {
  color: var(--accent);
  background: var(--surface-3);
  border-color: var(--border);
}
html:not(.theme-halloween):not(.theme-new-year) .route-tab-active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--surface-3) !important;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.link-button,.route-comment-indicator,a) { color: var(--accent); }

/* Buttons and links keep an accessible 44px hit area on touch screens. */
html:not(.theme-halloween):not(.theme-new-year) :is(button,.link-button,.pagination-page,.pagination-nav) {
  min-height: 44px;
}
html:not(.theme-halloween):not(.theme-new-year) .link-button {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Form controls + browser autofill + native popup colors. */
html:not(.theme-halloween):not(.theme-new-year) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="range"]):not([type="file"]),textarea,select) {
  background-color: var(--cc-input);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  color-scheme: var(--cc-native-scheme);
  min-height: 44px;
}
html:not(.theme-halloween):not(.theme-new-year) :is(input,textarea)::placeholder {
  color: var(--cc-placeholder);
  opacity: 1;
}
html:not(.theme-halloween):not(.theme-new-year) select option {
  background: var(--cc-input);
  color: var(--cc-input-text);
}
html:not(.theme-halloween):not(.theme-new-year) :is(input[type="radio"],input[type="checkbox"]) {
  accent-color: var(--accent);
  color-scheme: var(--cc-native-scheme);
}
html:not(.theme-halloween):not(.theme-new-year) :is(input[type="file"],input[type="color"]) {
  color: var(--text);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
html:not(.theme-halloween):not(.theme-new-year) :is(input,textarea,select):-webkit-autofill,
html:not(.theme-halloween):not(.theme-new-year) :is(input,textarea,select):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cc-input-text);
  -webkit-box-shadow: 0 0 0 1000px var(--cc-input) inset;
  caret-color: var(--cc-input-text);
}
html:not(.theme-halloween):not(.theme-new-year) :is(input,textarea,select,button,a,[role="button"]):focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 2px;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.notice,.form-error,.ep-sync-warning,.ep-empty-state,.oi-sync-message,.oi-readiness) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
html:not(.theme-halloween):not(.theme-new-year) :is(button,input,select,textarea):disabled {
  cursor: not-allowed;
  opacity: .82;
}

html:not(.theme-halloween):not(.theme-new-year) input[type="file"]::file-selector-button {
  min-height: 44px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  margin-right: 10px;
}
/* Sheets, alerts, photo surfaces and loading states. */
html:not(.theme-halloween):not(.theme-new-year) .modal-backdrop { background: var(--cc-modal-overlay); }
html:not(.theme-halloween):not(.theme-new-year) .route-photo-arrow {
  background: var(--surface-3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .modal {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
html:not(.theme-halloween):not(.theme-new-year) .modal--fullscreen {
  background: var(--surface);
  border: 0;
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.toast,.notification-panel,.suggestions) {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.camera-modal .close,.camera-modal .secondary) {
  background: var(--cc-input);
  color: var(--cc-input-text);
  border: 1px solid var(--cc-input-border);
}
html:not(.theme-halloween):not(.theme-new-year) .driver-linked-points-alert {
  background: var(--cc-warning-bg);
  color: var(--warning);
  border: 1px solid var(--cc-badge-warning-border);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .driver-linked-points-alert__icon {
  color: var(--warning);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .boot-splash,
html:not(.theme-halloween):not(.theme-new-year) .browser-gate {
  background: var(--bg);
  color: var(--text);
}
html:not(.theme-halloween):not(.theme-new-year) .boot-splash-title { color: var(--text); }
html:not(.theme-halloween):not(.theme-new-year) .boot-splash-sub { color: var(--muted); }
html:not(.theme-halloween):not(.theme-new-year) .boot-splash-logo-wrap {
  background: var(--brand-navy);
  box-shadow: var(--shadow);
}
html:not(.theme-halloween):not(.theme-new-year) .boot-splash-bar { background: var(--surface-2); }
html:not(.theme-halloween):not(.theme-new-year) .boot-splash-bar-fill { background: var(--cc-gradient); }
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__ambient { display: none; }
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 30px;
}
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__card::before { display: none; }
html:not(.theme-halloween):not(.theme-new-year) :is(.browser-gate__eyebrow,.browser-gate__link) { color: var(--accent-2); }
html:not(.theme-halloween):not(.theme-new-year) :is(.browser-gate p,.browser-auth-field>span,.browser-auth-password-hint,.browser-gate__hint,.browser-gate__divider) { color: var(--muted); }
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__telegram {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: none;
}
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__error { color: var(--danger); }
html:not(.theme-halloween):not(.theme-new-year) .browser-gate__status span { box-shadow: none; }

/* Keep slow devices steady: no blur, glowing/shifting cards or infinite effects. */
html:not(.theme-halloween):not(.theme-new-year) :is(.card,.stat,.list-item,.route-point-item,.managed-route-point) {
  transition: none;
  animation: none;
}
html:not(.theme-halloween):not(.theme-new-year) :is(.boot-splash-inner,.boot-splash-logo-wrap,.boot-splash-bar-fill,.brand-mark::after,.icon-button.is-spinning,.modal-backdrop,.modal,.camera-modal,.camera-backdrop,.loader,.loading-spinner,.photo-button img,#main > *) {
  animation: none;
}
html:not(.theme-halloween):not(.theme-new-year) .spinner { animation: none; box-shadow: none; }
html:not(.theme-halloween):not(.theme-new-year) .boot-splash { transition: opacity .16s ease; }
html:not(.theme-halloween):not(.theme-new-year) :is(.primary,.secondary,.danger-button,.icon-button,.close,.nav-item,.nav-item .nav-icon,.quick-action,.segment,.toast,.browser-gate__primary,.browser-gate__telegram,.browser-gate__secondary,.photo-button img) {
  transition: transform .16s ease,opacity .16s ease;
}
/* Cancel legacy paint/layout transitions without touching either seasonal theme. */
html:not(.theme-halloween):not(.theme-new-year) :is(
  .field label,.field input,.field textarea,.field select,.search input,
  .suggestion-item,.browser-auth-field input,.ep-moysklad-candidate,
  #managedRoutePoints .managed-route-point
) { transition: none; }
html:not(.theme-halloween):not(.theme-new-year) .photo-button img { filter: none; }
@media (hover: hover) and (pointer: fine) {
  html:not(.theme-halloween):not(.theme-new-year) :is(.card,.stat,.list-item,.route-point-item):hover {
    transform: none;
    box-shadow: var(--shadow);
    border-color: var(--border);
  }
  html:not(.theme-halloween):not(.theme-new-year) .photo-button:hover img { filter: none; }
  html:not(.theme-halloween):not(.theme-new-year) .browser-gate__telegram:hover { filter: none; }
  html:not(.theme-halloween):not(.theme-new-year) button.list-item:hover { transform: none; }
}
html:not(.theme-halloween):not(.theme-new-year) :is(.primary,.secondary,.danger-button):active {
  filter: none;
}
html:not(.theme-halloween):not(.theme-new-year) #managedRoutePoints .managed-route-point {
  content-visibility: visible;
  contain-intrinsic-size: none;
  transform: none;
}
@media (max-width: 520px) {
  html:not(.theme-halloween):not(.theme-new-year) .topbar {
    padding-left: max(12px,env(safe-area-inset-left));
    padding-right: max(12px,env(safe-area-inset-right));
  }
  html:not(.theme-halloween):not(.theme-new-year) .content {
    padding-left: max(12px,env(safe-area-inset-left));
    padding-right: max(12px,env(safe-area-inset-right));
  }
  html:not(.theme-halloween):not(.theme-new-year) .bottom-nav {
    padding-left: max(6px,env(safe-area-inset-left));
    padding-right: max(6px,env(safe-area-inset-right));
  }
}
/* Preserve readable labels even on 320px devices; do not change the nav DOM. */
@media (max-width: 359px) {
  html:not(.theme-halloween):not(.theme-new-year) .nav-item small {
    display: block;
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.theme-halloween):not(.theme-new-year) :is(.primary,.secondary,.danger-button,.icon-button,.close,.nav-item,.nav-icon,.quick-action,.toast,.browser-gate__telegram) {
    transition: none;
  }
}


/* ============================================================
   Standard appearance: two palettes for the SAME layout.
   Keep dark mode entirely separate from seasonal themes.
   ============================================================ */
html.cc-standard-dark:not(.theme-halloween):not(.theme-new-year) {
  color-scheme: dark;
  --bg: #0c1525;
  --surface: #172439;
  --surface-2: #1d3048;
  --surface-3: #263a51;
  --text: #f0f6fc;
  --muted: #b9c9d9;
  --text-muted: #b9c9d9;
  --disabled-text: #bbccdc;
  --accent: #64dbe5;
  --accent-text: #061f2e;
  --accent-2: #d0bfff;
  --brand-navy: #071b38;
  --brand-navy-2: #10315a;
  --brand-green: #13bcae;
  --brand-green-2: #23d2d3;
  --brand-cyan: #23d2d3;
  --brand-gold: #ab83ff;
  --brand-gold-2: #c5a3ff;
  --success: #84e1b3;
  --danger: #ffa4ad;
  --warning: #f7cf8b;
  --status-success-text: #84e1b3;
  --status-warning-text: #f7cf8b;
  --status-danger-text: #ffa4ad;
  --border: #4d6680;
  --shadow: 0 2px 8px rgba(0,0,0,.22);
  --shadow-lg: 0 5px 16px rgba(0,0,0,.30);
  --cc-nav: #172439;
  --cc-outline: #536f87;
  --cc-gradient: linear-gradient(110deg,#69dce5,#35b7cc);
  --cc-hero: linear-gradient(115deg,#203a50,#26364e);
  --cc-modal-overlay: rgba(2,8,19,.77);
  --cc-input: #21384f;
  --cc-input-text: #f0f6fc;
  --cc-input-border: #718ba6;
  --cc-placeholder: #c0d0de;
  --cc-native-scheme: dark;
  --cc-selected-nav: #274d5e;
  --cc-brand-border: #536c84;
  --cc-badge-success-border: #43876e;
  --cc-badge-warning-border: #987b49;
  --cc-badge-danger-border: #a26474;
  --cc-danger-button-border: #a26474;
  --cc-notification-text: #081e2f;
  --cc-success-bg: #1c4038;
  --cc-warning-bg: #4a3a28;
  --cc-danger-bg: #492a36;
  --cc-focus: #96f0f8;
}

/* Visible only under the standard appearance. It does not modify page geometry. */
.standard-tone-control[hidden] { display: none !important; }
html:is(.theme-halloween,.theme-new-year) .standard-tone-control { display: none !important; }
html:not(.theme-halloween):not(.theme-new-year) .standard-tone-control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
}
html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option.is-selected {
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--text);
}
html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option svg { flex: none; }
html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 2px;
}
@media (max-width: 580px) {
  html:not(.theme-halloween):not(.theme-new-year) .standard-tone-control {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 11px;
  }
  /* Show only the alternative palette as a compact switch on small screens. */
  html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option.is-selected { display: none; }
  html:not(.theme-halloween):not(.theme-new-year) .standard-tone-option {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--text);
  }
  html:not(.theme-halloween):not(.theme-new-year) .standard-tone-label { display: none; }
}