/* settings-surface.css — canonical surface pass */
body.settings-page{
  background: var(--bg-body, var(--bg));
  color: var(--text);
}

.settings-page .page-stack{
  gap: 1rem;
}

.settings-page .page-shell--narrow{
  max-width: 980px;
}

.settings-page h1{
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  letter-spacing: -0.03em;
  margin-bottom: .25rem;
}

.settings-page > .container,
.settings-page .page-shell{
  padding-top: calc(var(--safe-top) + 72px) !important;
}

.settings-page .section-card{
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-panel) !important;
  padding: 1.05rem 1.1rem !important;
}

.settings-page .section-card h2{
  margin-bottom: .2rem;
  font-size: 1.08rem;
}

.settings-page .section-card > .hint,
.settings-page .section-card > p.hint{
  margin-bottom: .9rem;
}

.settings-page .kpi-toggle-row,
.settings-page .setting-row{
  align-items: center !important;
  gap: 1rem !important;
  padding: .95rem 1rem !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--accent-soft)) !important;
}

.settings-page .kpi-toggle-row + .kpi-toggle-row,
.settings-page .kpi-toggle-row + .setting-row,
.settings-page .setting-row + .setting-row,
.settings-page .setting-row + .kpi-toggle-row{
  margin-top: .75rem;
}

.settings-page .kpi-toggle-row label:not(.toggle),
.settings-page .setting-row label:not(.toggle){
  gap: .2rem;
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-width: 0;
}

.settings-page select,
.settings-page input[type="number"],
.settings-page input[type="text"],
.settings-page input[type="time"],
.settings-page textarea{
  min-height: 44px;
  padding: .65rem .8rem;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.settings-page textarea{
  min-height: 120px;
}

.settings-page select:focus,
.settings-page input:focus,
.settings-page textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent) !important;
  outline: none;
}

.settings-page .btn,
.settings-page button:not(.lang-btn):not(.toggle):not(.back-button){
  border-radius: 14px !important;
}

.settings-page .btn.primary,
.settings-page .lang-btn.active{
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent);
}

.settings-page .lang-toggle{
  padding: .3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-soft));
  border: 1px solid var(--border);
}

.settings-page .lang-btn{
  min-width: 42px;
}

.settings-page .hdr-right,
.settings-page .kpi-control{
  min-width: 0;
}

.settings-page .ruleslab-container,
.settings-page #taxOverridesWrap{
  width: 100%;
}

.settings-page .ruleslab-toolbar{
  margin-top: .5rem !important;
}

.settings-page .ruleslab-toolbar .btn,
.settings-page #taxOverridesWrap .btn{
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}

.settings-page .ruleslab-toolbar .btn:first-child{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* --- page-specific cleanup: stop legacy inline/template look from fighting the system --- */
.settings-page .container.page-shell.page-shell--narrow{
  max-width: min(980px, calc(100% - 28px)) !important;
  padding-inline: 0 !important;
}

.settings-page main.page.page-stack{
  gap: 1rem !important;
  padding: 0 !important;
}

.settings-page .section-card > h2 + .hint,
.settings-page .section-card > h2 + p.hint{
  margin-top: -.1rem;
}

.settings-page .kpi-toggle-row > select,
.settings-page .kpi-toggle-row > .btn,
.settings-page .kpi-toggle-row > .hdr-right,
.settings-page .kpi-toggle-row > .kpi-control,
.settings-page .setting-row > select,
.settings-page .setting-row > .btn,
.settings-page .setting-row > .hdr-right,
.settings-page .setting-row > .kpi-control{
  flex: 0 0 clamp(210px, 28vw, 260px);
  width: clamp(210px, 28vw, 260px);
  max-width: 100% !important;
}

.settings-page .kpi-toggle-row > .hdr-right,
.settings-page .setting-row > .hdr-right{
  display: flex;
  justify-content: flex-end;
}

.settings-page #themeToggleHost{
  min-height: 44px;
  align-items: center;
}

.settings-page #themeToggleHost .theme-toggle,
.settings-page #themeToggleHost [data-toggle-theme]{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
}

.settings-page .toggle{
  align-self: center;
}

.settings-page .bell-btn{
  background: color-mix(in srgb, var(--bg-card) 90%, var(--accent-soft)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.settings-page #settingsToastHost{
  top: calc(12px + var(--safe-top));
}

@media (max-width: 760px){
  .settings-page .kpi-toggle-row,
  .settings-page .setting-row{
    flex-direction: column;
    align-items: stretch !important;
  }
  .settings-page .kpi-toggle-row > *,
  .settings-page .setting-row > *{
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  .settings-page .lang-toggle{
    justify-content: flex-start;
  }
  .settings-page .kpi-toggle-row > .hdr-right,
  .settings-page .setting-row > .hdr-right{
    justify-content: flex-start;
  }
}

/* --- dark theme sanity pass: stop the settings page from looking like a foreign navy screen --- */
.settings-page{
  background: var(--bg-body, var(--bg)) !important;
  color: var(--text) !important;
}

.settings-page .container.page-shell.page-shell--narrow,
.settings-page main.page.page-stack{
  background: transparent !important;
}

.settings-page .hint,
.settings-page small,
.settings-page .section-card > .hint,
.settings-page .section-card > p.hint,
.settings-page .kpi-toggle-row small,
.settings-page .setting-row small{
  color: color-mix(in srgb, var(--text) 68%, transparent) !important;
}

.settings-page .section-card{
  background: var(--card) !important;
}

.settings-page .kpi-toggle-row,
.settings-page .setting-row{
  background: color-mix(in srgb, var(--card) 88%, var(--accent-soft)) !important;
}

body.dark.settings-page,
body.dark-theme.settings-page{
  background: color-mix(in srgb, var(--bg-body, var(--bg)) 84%, var(--card) 16%) !important;
}

body.dark.settings-page .section-card,
body.dark-theme.settings-page .section-card{
  background: color-mix(in srgb, var(--card) 96%, black 4%) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.28) !important;
}

body.dark.settings-page .kpi-toggle-row,
body.dark.settings-page .setting-row,
body.dark-theme.settings-page .kpi-toggle-row,
body.dark-theme.settings-page .setting-row{
  background: color-mix(in srgb, var(--card) 82%, var(--accent-soft)) !important;
  border-color: color-mix(in srgb, var(--border) 88%, white 12%) !important;
}

body.dark.settings-page select,
body.dark.settings-page input[type="number"],
body.dark.settings-page input[type="text"],
body.dark.settings-page input[type="time"],
body.dark.settings-page textarea,
body.dark-theme.settings-page select,
body.dark-theme.settings-page input[type="number"],
body.dark-theme.settings-page input[type="text"],
body.dark-theme.settings-page input[type="time"],
body.dark-theme.settings-page textarea{
  background: color-mix(in srgb, var(--card) 92%, white 8%) !important;
  color: var(--text) !important;
}


/* --- mobile control fixes: do not stretch switches, keep CTA text visible --- */
.settings-page .kpi-toggle-row > label.toggle,
.settings-page .setting-row > label.toggle{
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  flex: 0 0 46px !important;
  align-self: center !important;
}

.settings-page .toggle{
  width: 46px !important;
  height: 26px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  flex: 0 0 46px !important;
}

.settings-page .toggle .slider{
  width: 46px !important;
  height: 26px !important;
}

.settings-page .section-card .btn,
.settings-page .section-card button.btn,
.settings-page .section-card button:not(.lang-btn):not(.toggle):not(.back-button){
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.settings-page .section-card .btn:hover,
.settings-page .section-card button.btn:hover,
.settings-page .section-card button:not(.lang-btn):not(.toggle):not(.back-button):hover{
  filter: brightness(1.03);
}

.settings-page .section-card .btn:disabled,
.settings-page .section-card button.btn:disabled,
.settings-page .section-card button:not(.lang-btn):not(.toggle):not(.back-button):disabled{
  opacity: .72 !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--card) 92%, white 8%) !important;
  border-color: var(--border) !important;
}

@media (max-width: 760px){
  .settings-page .kpi-toggle-row > label.toggle,
  .settings-page .setting-row > label.toggle{
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex: 0 0 46px !important;
  }

  .settings-page .kpi-toggle-row > .btn,
  .settings-page .setting-row > .btn,
  .settings-page .kpi-toggle-row > button.btn,
  .settings-page .setting-row > button.btn{
    width: min(220px, 100%) !important;
    flex: 0 0 auto !important;
  }
}


/* === Language segmented control: theme-safe contrast === */
.settings-page .lang-toggle{
  display:flex !important;
  align-items:center;
  gap:6px !important;
  padding:6px !important;
  background: var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:999px !important;
}

.settings-page .lang-btn{
  min-width:44px;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:0 !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

.settings-page .lang-btn:not(.active){
  background: color-mix(in srgb, var(--card) 86%, white 14%) !important;
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
}

body.dark.settings-page .lang-btn:not(.active),
body.dark-theme.settings-page .lang-btn:not(.active),
body.dark .settings-page .lang-btn:not(.active),
body.dark-theme .settings-page .lang-btn:not(.active){
  background: color-mix(in srgb, var(--card) 88%, white 12%) !important;
  color: color-mix(in srgb, var(--text) 78%, transparent) !important;
}

.settings-page .lang-btn.active{
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}



/* =========================================================
   OPTION A — canonical settings rows
   Card > row > info + control
   ========================================================= */
.settings-page .kpi-toggle-row,
.settings-page .setting-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1rem 1.05rem !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--bg-card) 94%, var(--accent-soft)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.settings-page .kpi-toggle-row label:not(.toggle),
.settings-page .setting-row label:not(.toggle){
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: .2rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.settings-page .kpi-toggle-row > .hdr-right,
.settings-page .kpi-toggle-row > select,
.settings-page .kpi-toggle-row > .btn,
.settings-page .kpi-toggle-row > .kpi-control,
.settings-page .setting-row > .hdr-right,
.settings-page .setting-row > select,
.settings-page .setting-row > .btn,
.settings-page .setting-row > .kpi-control{
  flex: 0 0 clamp(220px, 28vw, 280px);
  width: clamp(220px, 28vw, 280px) !important;
  max-width: 100% !important;
}

.settings-page .hdr-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  min-width:0 !important;
}

.settings-page .hdr-right > *{
  width: 100% !important;
  max-width: 100% !important;
}

.settings-page .setting-row--stack{
  display:block !important;
}

.settings-page .setting-row--stack > * + *{
  margin-top: .55rem;
}

.settings-page .section-card{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-card) 98%, white 2%),
    color-mix(in srgb, var(--bg-card) 96%, black 4%)
  ) !important;
}

.settings-page .section-card > h2{
  margin-bottom: .18rem;
  font-size: 1.08rem;
}

.settings-page .section-card > .hint,
.settings-page .section-card > p.hint{
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
}

.settings-page .kpi-toggle-row small,
.settings-page .setting-row small,
.settings-page .kpi-toggle-row .hint,
.settings-page .setting-row .hint{
  color: color-mix(in srgb, var(--text) 72%, transparent) !important;
  line-height: 1.35;
}

.settings-page .btn,
.settings-page button:not(.lang-btn):not(.toggle):not(.back-button){
  min-height: 44px;
  font-weight: 700;
}

.settings-page select,
.settings-page input[type="number"],
.settings-page input[type="text"],
.settings-page input[type="time"],
.settings-page textarea{
  min-height: 44px;
}

@media (max-width: 760px){
  .settings-page .kpi-toggle-row,
  .settings-page .setting-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .settings-page .kpi-toggle-row > .hdr-right,
  .settings-page .kpi-toggle-row > select,
  .settings-page .kpi-toggle-row > .btn,
  .settings-page .kpi-toggle-row > .kpi-control,
  .settings-page .setting-row > .hdr-right,
  .settings-page .setting-row > select,
  .settings-page .setting-row > .btn,
  .settings-page .setting-row > .kpi-control{
    width: 100% !important;
    flex-basis: auto !important;
  }
  .settings-page .hdr-right{
    justify-content: stretch !important;
  }
}


.settings-page #settings-country-modal input{
  background: var(--field-bg, var(--bg-card)) !important;
  color: var(--field-fg, var(--text)) !important;
  border: 1px solid var(--field-border, var(--border)) !important;
}
/* =========================================================
   SETTINGS — dark contrast hard fix
   Fix black text inside dark controls
   ========================================================= */

.settings-page,
.settings-page .section-card,
.settings-page .kpi-toggle-row,
.settings-page .setting-row{
  color: var(--text) !important;
}

.settings-page select,
.settings-page option,
.settings-page optgroup,
.settings-page input[type="text"],
.settings-page input[type="number"],
.settings-page input[type="time"],
.settings-page textarea,
.settings-page button:not(.lang-btn):not(.back-button),
.settings-page .btn,
.settings-page .hdr-right .btn{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

.settings-page select{
  background: var(--field-bg, var(--bg-card)) !important;
  border-color: var(--field-border, var(--border)) !important;
}

.settings-page option,
.settings-page optgroup{
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* specifically for the controls visible in your screenshot */
.settings-page #appProfile,
.settings-page #tutorialSkillSelect,
.settings-page #appSkin,
.settings-page #uiGridColor,
.settings-page #uiHeaderColor,
.settings-page #headerDriver,
.settings-page #defaultPhoneCountry,
.settings-page #replayToursBtn,
.settings-page #replayWalkthroughBtn{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* disabled / dimmed but still readable */
.settings-page select:disabled,
.settings-page input:disabled,
.settings-page textarea:disabled,
.settings-page button:disabled{
  color: color-mix(in srgb, var(--text) 70%, transparent) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--text) 70%, transparent) !important;
  opacity: 1 !important;
}
/* === Windows/Edge native select popup contrast fix === */
.settings-page select{
  color-scheme: light !important;
}

.settings-page select option,
.settings-page select optgroup{
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* --- settings hardening patch: mobile fit + visible toasts --- */
html, body.settings-page{
  max-width: 100%;
  overflow-x: hidden !important;
}

.settings-page .container.page-shell.page-shell--narrow,
.settings-page .page-shell,
.settings-page .page,
.settings-page .section-card,
.settings-page .kpi-toggle-row,
.settings-page .setting-row{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.settings-page .kpi-toggle-row > label:not(.toggle),
.settings-page .setting-row > label:not(.toggle),
.settings-page .kpi-toggle-row > .kpi-control,
.settings-page .setting-row > .kpi-control,
.settings-page .kpi-toggle-row > select,
.settings-page .setting-row > select,
.settings-page .kpi-toggle-row > .btn,
.settings-page .setting-row > .btn{
  min-width: 0 !important;
}

.settings-page #settingsToastHost{
  position: fixed;
  top: calc(12px + var(--safe-top));
  right: 12px;
  left: auto;
  width: min(420px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  z-index: 10050;
  pointer-events: none;
}

.settings-page .settings-toast{
  padding: .78rem .95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--card) 92%, var(--accent-soft));
  color: var(--text);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  font-weight: 700;
  line-height: 1.35;
  opacity: 1;
}

@media (max-width: 760px){
  .settings-page #settingsToastHost{
    right: 12px;
    left: 12px;
    width: auto;
  }

  .settings-page .kpi-toggle-row,
  .settings-page .setting-row{
    overflow: hidden;
  }
}

/* V18 Settings: collapsible mission controls, so onboarding does not become a wall of boxes. */
.settings-page .settings-collapsible-panel[hidden]{
  display:none !important;
}
.settings-page .settings-collapsible-panel{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.settings-page .mission-panel-toggle-row{
  position:sticky;
  top:8px;
  z-index:3;
}
.settings-page .mission-rows-panel{
  border:1px solid var(--border, rgba(255,255,255,.14));
  border-radius:22px;
  padding:12px;
  background:color-mix(in srgb, var(--card, #171a2e) 88%, transparent);
}
.settings-page .mission-rows-panel .kpi-toggle-row{
  margin:0 !important;
}
@media (max-width:720px){
  .settings-page .mission-panel-toggle-row{ position:static; }
  .settings-page .mission-rows-panel{ padding:10px; border-radius:18px; }
}

/* V19 rebuilt: collapsible Settings section cards. Passive UI only. */
.section-card.settings-section-card{
  overflow: hidden;
}
.settings-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  cursor:pointer;
  user-select:none;
}
.settings-section-header > h2,
.settings-section-header > h3{
  margin:0;
  flex:1 1 auto;
}
.settings-section-toggle{
  width:42px;
  height:38px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--border, rgba(255,255,255,.18));
  background:rgba(255,255,255,.06);
  color:var(--text, #fff);
  font-size:1.35rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.settings-section-toggle:focus-visible{
  outline:2px solid var(--accent, #927cff);
  outline-offset:2px;
}
.settings-section-content{
  margin-top:.8rem;
}
.section-card.settings-section-card.is-collapsed .settings-section-content{
  display:none;
}
.section-card.settings-section-card.is-collapsed{
  padding-bottom:1rem;
}
body.light .settings-section-toggle{
  background:rgba(0,0,0,.04);
}

/* V75.58 Day Visibility Settings */
.pdiary-settings-day-visibility-row{align-items:flex-start!important;gap:14px!important}
.pdiary-settings-day-visibility{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;max-width:390px}
.pdiary-settings-day-visibility button{border:1px solid var(--border,rgba(148,163,184,.28));background:var(--card,#fff);color:var(--text,#0f172a);border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900;cursor:pointer;min-width:44px;box-shadow:0 6px 16px rgba(15,23,42,.05)}
.pdiary-settings-day-visibility button.is-on{background:linear-gradient(135deg,var(--accent,#7c3aed),#2563eb);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.pdiary-settings-day-visibility button.is-off{opacity:.54;filter:saturate(.7)}
.pdiary-settings-day-visibility__all{min-width:56px!important}
body.dark .pdiary-settings-day-visibility button,.dark-mode .pdiary-settings-day-visibility button,[data-theme*="dark"] .pdiary-settings-day-visibility button{background:rgba(255,255,255,.08);color:#f8fafc;border-color:rgba(255,255,255,.13)}
body.dark .pdiary-settings-day-visibility button.is-on,.dark-mode .pdiary-settings-day-visibility button.is-on,[data-theme*="dark"] .pdiary-settings-day-visibility button.is-on{background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:rgba(255,255,255,.2)}
@media(max-width:720px){.pdiary-settings-day-visibility-row{display:block!important}.pdiary-settings-day-visibility{justify-content:flex-start;margin-top:10px;max-width:100%}.pdiary-settings-day-visibility button{min-width:42px;padding:8px 9px}}

/* V76.88 final skin safety: stop dark Settings controls from falling back to white. */
html.dark body.settings-page select,
html.dark-theme body.settings-page select,
body.dark.settings-page select,
body.dark-theme.settings-page select,
body.settings-page.dark select,
body.settings-page.dark-theme select,
body.settings-page[data-theme*="dark"] select{
  color-scheme: dark !important;
  background: var(--field-bg, #181a34) !important;
  color: var(--field-fg, #f8fafc) !important;
  -webkit-text-fill-color: var(--field-fg, #f8fafc) !important;
  border-color: var(--border, rgba(255,255,255,.18)) !important;
}

html.dark body.settings-page select option,
html.dark body.settings-page select optgroup,
html.dark-theme body.settings-page select option,
html.dark-theme body.settings-page select optgroup,
body.dark.settings-page select option,
body.dark.settings-page select optgroup,
body.dark-theme.settings-page select option,
body.dark-theme.settings-page select optgroup,
body.settings-page.dark select option,
body.settings-page.dark select optgroup,
body.settings-page.dark-theme select option,
body.settings-page.dark-theme select optgroup,
body.settings-page[data-theme*="dark"] select option,
body.settings-page[data-theme*="dark"] select optgroup{
  background: var(--card, #181a34) !important;
  color: var(--text, #f8fafc) !important;
  -webkit-text-fill-color: var(--text, #f8fafc) !important;
}

body.settings-page.dark .section-card,
body.settings-page.dark-theme .section-card,
body.settings-page[data-theme*="dark"] .section-card,
html.dark body.settings-page .section-card,
html.dark-theme body.settings-page .section-card,
body.settings-page.dark .setting-row,
body.settings-page.dark-theme .setting-row,
body.settings-page[data-theme*="dark"] .setting-row,
html.dark body.settings-page .setting-row,
html.dark-theme body.settings-page .setting-row,
body.settings-page.dark .kpi-toggle-row,
body.settings-page.dark-theme .kpi-toggle-row,
body.settings-page[data-theme*="dark"] .kpi-toggle-row,
html.dark body.settings-page .kpi-toggle-row,
html.dark-theme body.settings-page .kpi-toggle-row{
  background: color-mix(in srgb, var(--card, #181a34) 92%, transparent) !important;
  color: var(--text, #f8fafc) !important;
  border-color: var(--border, rgba(255,255,255,.14)) !important;
}