:root[data-ui-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ede5;
  --muted: #aab7ac;
  --cream: #121a15;
  --gold: #d0b66e;
  --line: #34443a;
  --shadow: 0 14px 35px #0005;
  --ui-surface: #1b261f;
  --ui-surface-raised: #26372d;
  --ui-surface-inset: #152119;
  --ui-border: #435747;
  --ui-text: #edf1e8;
  --ui-text-muted: #b8c7b7;
  --ui-accent: #dfc58a;
}

:root[data-ui-theme="dark"] body {
  background: radial-gradient(ellipse at 12% 0%, #202e25 0, transparent 36%), #111914;
  color: #e6ede5;
}

:root[data-ui-theme="dark"] .welcome-screen {
  background: radial-gradient(ellipse at 15% 12%, #3b392a 0, transparent 31%), radial-gradient(ellipse at 95% 92%, #23382d 0, transparent 30%), #101813;
}

:root[data-ui-theme="dark"] .welcome-shell,
:root[data-ui-theme="dark"] .welcome-dashboard-card,
:root[data-ui-theme="dark"] .modal-card,
:root[data-ui-theme="dark"] .messenger-panel {
  border-color: #39483c;
  background-color: #1b261f;
  color: #e6ede5;
  box-shadow: 0 24px 70px #0006;
}

:root[data-ui-theme="dark"] .welcome-shell { background: #1b261f; }
:root[data-ui-theme="dark"] .welcome-screen.training-home > .welcome-shell {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
:root[data-ui-theme="dark"] .welcome-brand,
:root[data-ui-theme="dark"] .welcome-story h1,
:root[data-ui-theme="dark"] .welcome-start h2,
:root[data-ui-theme="dark"] .welcome-start h3,
:root[data-ui-theme="dark"] .welcome-dashboard-card h2,
:root[data-ui-theme="dark"] .welcome-dashboard-card h3 { color: #e9eee5; }
:root[data-ui-theme="dark"] .welcome-brand small,
:root[data-ui-theme="dark"] .welcome-story > p,
:root[data-ui-theme="dark"] .welcome-start-heading small,
:root[data-ui-theme="dark"] .welcome-training-caption,
:root[data-ui-theme="dark"] .welcome-training-help,
:root[data-ui-theme="dark"] .welcome-dashboard-card p,
:root[data-ui-theme="dark"] .welcome-dashboard-caption,
:root[data-ui-theme="dark"] .welcome-footer,
:root[data-ui-theme="dark"] .welcome-kicker,
:root[data-ui-theme="dark"] .welcome-start-heading > span { color: #b4c0b3; }
:root[data-ui-theme="dark"] .welcome-start,
:root[data-ui-theme="dark"] .welcome-options select,
:root[data-ui-theme="dark"] .welcome-music-toggle,
:root[data-ui-theme="dark"] .welcome-settings-open,
:root[data-ui-theme="dark"] .welcome-secondary,
:root[data-ui-theme="dark"] .welcome-dashboard-card input,
:root[data-ui-theme="dark"] .welcome-dashboard-card select,
:root[data-ui-theme="dark"] .friends-home-card,
:root[data-ui-theme="dark"] .friends-home-add,
:root[data-ui-theme="dark"] .friend-inbox-item,
:root[data-ui-theme="dark"] .league-row,
:root[data-ui-theme="dark"] .party-friend,
:root[data-ui-theme="dark"] .quick-play-card {
  border-color: #3b4b3e;
  background-color: #222f27;
  color: #e2eae0;
}
:root[data-ui-theme="dark"] .welcome-secondary,
:root[data-ui-theme="dark"] .welcome-music-toggle,
:root[data-ui-theme="dark"] .welcome-settings-open { color: #d2ddd1; }
:root[data-ui-theme="dark"] .welcome-secondary:hover,
:root[data-ui-theme="dark"] .friends-home-card:hover { background-color: #29392e; }
:root[data-ui-theme="dark"] .welcome-group-launch { background: #26362b; color: #dce8d8; border-color: #526c52; }
:root[data-ui-theme="dark"] .welcome-group-launch.group-training { background: #302a3c; color: #e2d8f2; border-color: #65547c; }
:root[data-ui-theme="dark"] .welcome-primary,
:root[data-ui-theme="dark"] .quick-match-action { color: #fff9e8; }
:root[data-ui-theme="dark"] .welcome-rules,
:root[data-ui-theme="dark"] .welcome-account-button,
:root[data-ui-theme="dark"] .dashboard-account-link,
:root[data-ui-theme="dark"] .friends-home-tabs button,
:root[data-ui-theme="dark"] .friends-home-card strong,
:root[data-ui-theme="dark"] .league-row,
:root[data-ui-theme="dark"] .league-row strong { color: #dce6db; }
:root[data-ui-theme="dark"] .home-tabs { border-color: #39473c; }
:root[data-ui-theme="dark"] .home-tabs button { color: #b3c0b2; }
:root[data-ui-theme="dark"] .home-tabs button[aria-selected="true"] { color: #f1ebd7; }
:root[data-ui-theme="dark"] .welcome-token-summary,
:root[data-ui-theme="dark"] .friends-home-tools,
:root[data-ui-theme="dark"] .friends-home-footer,
:root[data-ui-theme="dark"] .league-formats,
:root[data-ui-theme="dark"] .league-body,
:root[data-ui-theme="dark"] .quick-entry-nav { border-color: #3b4a3e; background-color: #202b24; color: #d9e2d7; }
:root[data-ui-theme="dark"] .welcome-token-summary strong,
:root[data-ui-theme="dark"] .welcome-token-summary small,
:root[data-ui-theme="dark"] .friends-home-presence,
:root[data-ui-theme="dark"] .friends-home-empty,
:root[data-ui-theme="dark"] .league-row small { color: #b0beaf; }

:root[data-ui-theme="dark"] .app-shell .topbar { border-color: #34443a; }
:root[data-ui-theme="dark"] .app-shell .brand,
:root[data-ui-theme="dark"] .app-shell .player-bar .seat-meta { color: #e6ede5; }
:root[data-ui-theme="dark"] .app-shell .brand small,
:root[data-ui-theme="dark"] .app-shell .table-topline,
:root[data-ui-theme="dark"] .app-shell .hand-heading,
:root[data-ui-theme="dark"] .app-shell .table-footer,
:root[data-ui-theme="dark"] .app-shell .player-bar .seat-meta span { color: #aebbad; }
:root[data-ui-theme="dark"] .app-shell .table-note,
:root[data-ui-theme="dark"] .app-shell .action-dock,
:root[data-ui-theme="dark"] .app-shell .player-badge,
:root[data-ui-theme="dark"] .app-shell .turn-pill,
:root[data-ui-theme="dark"] .app-shell .dock-icon {
  border-color: #394a3d;
  background: #202c24;
  color: #d6e0d4;
}
:root[data-ui-theme="dark"] .app-shell .dock-copy strong { color: #e6ede5; }
:root[data-ui-theme="dark"] .app-shell .dock-copy small,
:root[data-ui-theme="dark"] .app-shell .legend-caption,
:root[data-ui-theme="dark"] .app-shell .legend-title { color: #b2bdb0; }
:root[data-ui-theme="dark"] .app-shell .table-tools-panel,
:root[data-ui-theme="dark"] .app-shell .score-card { color: #e9eee5; }
:root[data-ui-theme="dark"] .app-shell .table-tools-panel {
  border-color: #435245;
  background: #1b261f;
  box-shadow: 0 14px 32px #0008;
}
:root[data-ui-theme="dark"] .app-shell .player-mode,
:root[data-ui-theme="dark"] .app-shell .table-tools-panel label { color: #bdc9bc; }
:root[data-ui-theme="dark"] .app-shell .table-tools-panel select,
:root[data-ui-theme="dark"] #welcome-friends-panel :is(input, select),
:root[data-ui-theme="dark"] #account-backdrop :is(input:not([type="checkbox"]), select, textarea) {
  border-color: #526252;
  background: #111a15;
  color: #e5ece3;
}
:root[data-ui-theme="dark"] .app-shell .bid-button { border-color: #445448; background: #26342b; color: #e0e8dd; }
:root[data-ui-theme="dark"] .app-shell .pass-button { color: #c0cbbf; }
:root[data-ui-theme="dark"] .app-shell .bid-button:hover { background: #334337; }

:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) {
  border: 1px solid #435245;
  background: #1b261f;
  color: #e5ece3;
}
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) h1,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) h2,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) h3,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) strong,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) label { color: #e5ece3; }
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) p,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) small,
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) .muted { color: #b1beb0; }
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) :is(input:not([type="checkbox"]), select, textarea) {
  border-color: #526252;
  background: #111a15;
  color: #e5ece3;
}
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) :is(.rule-grid div, .modal-targets, .quick-entry-nav, .quick-play-card, .party-friend, .account-user-card, .account-info-block, .data-privacy-sections section) {
  border-color: #3d4b40;
  background-color: #222e26;
  color: #dce5da;
}
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) :is(.quick-entry-nav button, .quick-browse-tabs button, .quick-format-options button, .waiting-activities button, .party-friends-toolbar button, .party-friend button, .party-friends-pages button, .account-section-tabs button, .account-auth-tabs button, .account-identifier button, .account-save-history button, .account-save-history select, .progress-tabs button, .progress-button, .progress-pages button, .progress-theme) {
  border-color: #48594a;
  background: #28362c;
  color: #dce6da;
}
:root[data-ui-theme="dark"] .modal-card:not(.token-bonus-modal) :is(.quick-entry-nav button[aria-pressed="true"], .quick-browse-tabs button[aria-pressed="true"], .quick-format-options button[aria-pressed="true"], .account-section-tabs [aria-pressed="true"], .account-auth-tabs [aria-pressed="true"], .progress-tabs button[aria-pressed="true"], .progress-theme[aria-pressed="true"]) {
  border-color: #67815e;
  background: #38513b;
  color: #f0f2e8;
}
:root[data-ui-theme="dark"] .account-info-block p,
:root[data-ui-theme="dark"] .account-info-block h3,
:root[data-ui-theme="dark"] .data-privacy-sections p { color: #bfccbe !important; }
:root[data-ui-theme="dark"] .account-info-block h3 { color: #e2e9df !important; }
:root[data-ui-theme="dark"] .messenger-panel { background: #18231c; color: #e5ece3; }
:root[data-ui-theme="dark"] .messenger-panel :is(.messenger-header, .messenger-tabs, .messenger-composer, .messenger-list, .messenger-group-settings-body) { border-color: #3a493e; background-color: #202c24; color: #dce5da; }
:root[data-ui-theme="dark"] .messenger-panel :is(button, input, textarea, select) { border-color: #4a5b4b; background-color: #17221b; color: #e4ebe1; }

/* Supporting surfaces must remain legible around the dark controls. */
:root[data-ui-theme="dark"] .app-shell :is(.hand-area, .player-bar, .table-topline),
:root[data-ui-theme="dark"] .quick-play-card :is(#quick-availability, .online-entry-fee-row),
:root[data-ui-theme="dark"] :is(.account-auth-tabs, .account-section-tabs, .account-identifier, .account-guest-note) {
  background: #1c2a22;
  border-color: #435346;
  color: #d4e0d2;
}
:root[data-ui-theme="dark"] .app-shell .player-bar.team-declarer { border-color: #b29857; background: #302d20; }
:root[data-ui-theme="dark"] :is(.welcome-options label, .save-mode-note, .hand-hint, .game-stages li, .quick-steps li) { color: #b5c4b2; }
:root[data-ui-theme="dark"] .game-stages li[aria-current="step"] { color: #dcebcf; }
:root[data-ui-theme="dark"] .game-stages li > span { background: #334738; color: #dcebcf; }
:root[data-ui-theme="dark"] .app-shell :is(#table-message, .hand-hint, .discard-actions, .play-message) { color: #d4e2ce; }
:root[data-ui-theme="dark"] .turn-clock { background: #37301e; color: #f1dfa6; border-color: #947f45; }
:root[data-ui-theme="dark"] .turn-clock.overtime { background: #3e2f20; color: #f5d2a6; }
:root[data-ui-theme="dark"] .turn-clock.urgent { background: #482923; color: #ffd6c8; border-color: #be7c65; }

/* One palette for every control, including controls created after page load.
   Color-only !important declarations intentionally override legacy component IDs
   and gradients. Card faces and their illustrations keep their own palette. */
:root[data-ui-theme="dark"] {
  --ui-button-bg: #25332b;
  --ui-button-hover: #33463a;
  --ui-button-fg: #e8eee7;
  --ui-button-border: #4a6050;
}
:root[data-ui-theme="dark"] :where(.welcome-primary, .confirm-button, .new-game-button, .results-primary, .quick-match-action, .is-primary, .progress-button) {
  --ui-button-bg: #284d38;
  --ui-button-hover: #356047;
  --ui-button-border: #63876a;
}
:root[data-ui-theme="dark"] :where(.group-training, .training-launch-actions .confirm-button) {
  --ui-button-bg: #362c45;
  --ui-button-hover: #493b5d;
  --ui-button-border: #7e6a95;
}
:root[data-ui-theme="dark"] :where([aria-pressed="true"], [aria-selected="true"]) {
  --ui-button-bg: #304b39;
  --ui-button-hover: #3d5d46;
  --ui-button-border: #a3b983;
}
:root[data-ui-theme="dark"] :where(.table-leave-button, .account-delete-button, .friend-block-button, .friend-remove-button, .friends-home-remove) {
  --ui-button-bg: #3b2926;
  --ui-button-hover: #51352f;
  --ui-button-border: #976759;
  --ui-button-fg: #ffd4c7;
}
:root[data-ui-theme="dark"] :where(.bonus-claim, .membership-button, .wallet-mini button) {
  --ui-button-bg: #382f20;
  --ui-button-hover: #4d402b;
  --ui-button-border: #9b8150;
  --ui-button-fg: #f3dfa7;
}
:root[data-ui-theme="dark"] #party-ready,
:root[data-ui-theme="dark"] :is(button, [role="button"], input[type="button"], input[type="submit"], summary, a.button, a.welcome-secondary, a.dashboard-account-link):not(.card) {
  background: var(--ui-button-bg) !important;
  border-color: var(--ui-button-border) !important;
  color: var(--ui-button-fg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
:root[data-ui-theme="dark"] #party-ready:not(:disabled):hover,
:root[data-ui-theme="dark"] :is(button, [role="button"], input[type="button"], input[type="submit"], summary, a.button, a.welcome-secondary, a.dashboard-account-link):not(.card, :disabled, [aria-disabled="true"]):hover {
  background: var(--ui-button-hover) !important;
}
:root[data-ui-theme="dark"] :is(button, [role="button"], summary, a.button, a.welcome-secondary, a.dashboard-account-link):not(.card):focus-visible {
  outline: 2px solid #e1c27d;
  outline-offset: 3px;
}
:root[data-ui-theme="dark"] :is(button, [role="button"]):not(.card) :where(span, strong, small, b, em):not(.card, .card *, .progress-theme-preview, .loyalty-theme-swatch, .messenger-badge) {
  color: inherit !important;
}
:root[data-ui-theme="dark"] .messenger-badge { background: #354b3b; border-color: #66846b; color: #eef4e8; }
:root[data-ui-theme="dark"] .wallet-mini { background: #28241b; border-color: #8b7549; }

/* Account and progression surfaces use the same palette as their text.
   Match the component IDs so their light backgrounds cannot win the cascade. */
:root[data-ui-theme="dark"] .welcome-dashboard-heading,
:root[data-ui-theme="dark"] #account-backdrop .section-label {
  color: var(--ui-accent);
}
:root[data-ui-theme="dark"] .dashboard-account-indicator {
  background: #304736;
  color: #d8e7ce;
}
:root[data-ui-theme="dark"] .welcome-loyalty-summary {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
  color: var(--ui-text);
}
:root[data-ui-theme="dark"] .welcome-loyalty-heading strong { color: var(--ui-text); }
:root[data-ui-theme="dark"] .welcome-loyalty-heading span,
:root[data-ui-theme="dark"] .welcome-loyalty-summary > p { color: var(--ui-text-muted); }
:root[data-ui-theme="dark"] .welcome-loyalty-heading > b { color: var(--ui-accent); }
:root[data-ui-theme="dark"] .loyalty-progress-track { background: var(--ui-surface-inset); }
:root[data-ui-theme="dark"] .loyalty-progress-track > span { background: #b9cd91; }
:root[data-ui-theme="dark"] :is(.dashboard-account-link, .welcome-loyalty-link, .dashboard-account-login,
    .account-edit-name, .account-privacy-link, .account-logout-button, .account-mode-toggle,
    .account-data-download summary, .account-save-history summary, .progress-link) {
  --ui-button-bg: transparent;
  --ui-button-hover: #2d4033;
  --ui-button-fg: var(--ui-accent);
  --ui-button-border: var(--ui-border);
}
:root[data-ui-theme="dark"] .dashboard-account-link span { color: var(--ui-accent); }
:root[data-ui-theme="dark"] #account-backdrop .account-heading h2 { color: var(--ui-text); }
:root[data-ui-theme="dark"] #account-backdrop .account-heading-icon {
  background: #342f21;
  border-color: #827044;
  color: var(--ui-accent);
}
:root[data-ui-theme="dark"] #account-backdrop .account-user-card {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
}
:root[data-ui-theme="dark"] #account-backdrop .account-user-card strong { color: var(--ui-text); }
:root[data-ui-theme="dark"] #account-backdrop .account-user-card small { color: var(--ui-text-muted); }
:root[data-ui-theme="dark"] #account-backdrop .account-avatar {
  background: #3a543f;
  color: #e5efd9;
}
:root[data-ui-theme="dark"] #account-backdrop .account-sync-indicator { color: #bddaa9; }
:root[data-ui-theme="dark"] #account-backdrop .account-sync-indicator:is([data-state="pending"], [data-state="conflict"]) {
  color: var(--ui-accent);
}
:root[data-ui-theme="dark"] #account-backdrop .account-info-block { background: transparent; }
:root[data-ui-theme="dark"] #account-backdrop .account-identifier {
  background: var(--ui-surface-inset);
  border-color: var(--ui-border);
}
:root[data-ui-theme="dark"] #account-backdrop :is(.account-save-history, .account-save-status) {
  border-color: var(--ui-border);
  color: var(--ui-text-muted);
}
:root[data-ui-theme="dark"] #account-backdrop :is(.account-data-download, .account-name-intro,
    .account-access-note, .google-auth-status) { color: var(--ui-text-muted); }
:root[data-ui-theme="dark"] #account-backdrop .account-role-note { color: var(--ui-accent); }
:root[data-ui-theme="dark"] #account-backdrop .account-divider { color: var(--ui-text-muted); }
:root[data-ui-theme="dark"] #account-backdrop .account-divider::before,
:root[data-ui-theme="dark"] #account-backdrop .account-divider::after { background: var(--ui-border); }
:root[data-ui-theme="dark"] #account-backdrop .account-guest-note {
  background: #302c21;
  color: #dccda7;
}
:root[data-ui-theme="dark"] #account-backdrop .account-danger-zone {
  background: #332621;
  border-color: #715046;
}
:root[data-ui-theme="dark"] #account-backdrop .account-danger-zone h3,
:root[data-ui-theme="dark"] #account-backdrop :is(.account-error, .account-save-status.error, .google-auth-status.error) {
  color: #f2b5a4;
}
:root[data-ui-theme="dark"] #account-backdrop .account-danger-zone p { color: #d8bdb3; }

:root[data-ui-theme="dark"] #stats-backdrop .stats-modal { color: var(--ui-text); }
:root[data-ui-theme="dark"] #stats-backdrop :is(.progress-tabs, .progress-missions) {
  background: var(--ui-surface-inset);
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.stats-metric, .progress-goal-card, .progress-achievement) {
  background: var(--ui-surface-raised);
  border-color: var(--ui-border);
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.stats-metric strong, .progress-goal-card h3, .progress-level strong) {
  color: var(--ui-text);
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.progress-eyebrow, .progress-achievement small) {
  color: var(--ui-accent);
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.stats-metric span, .stats-metric small, #progress-lifetime,
    .progress-scope, .progress-data-note, .progress-filters label, .progress-breakdown thead th,
    .progress-observation p, #progress-recent > span, #progress-recent > small, .stats-privacy,
    .progress-history-row small, .progress-empty, .progress-level span, .progress-purpose,
    .progress-goal-card p, .progress-achievement span, .progress-xp-explanation) {
  color: var(--ui-text-muted);
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.progress-observation, .progress-next-reward) {
  background: #302c21;
  border-color: #67583a;
}
:root[data-ui-theme="dark"] #stats-backdrop :is(.progress-breakdown th, .progress-breakdown td,
    .progress-footer, .progress-history-row) { border-color: var(--ui-border); }
:root[data-ui-theme="dark"] #stats-backdrop .progress-history-row .is-win { color: #b7d9a5; }
:root[data-ui-theme="dark"] #stats-backdrop .progress-history-row .is-loss { color: #f0b39e; }
:root[data-ui-theme="dark"] #stats-backdrop .progress-result-strip .is-win { background: #304b35; color: #d0e9bf; }
:root[data-ui-theme="dark"] #stats-backdrop .progress-result-strip .is-loss { background: #4b342b; color: #f4c5b4; }
:root[data-ui-theme="dark"] #stats-backdrop .progress-goal-card progress {
  background: var(--ui-surface-inset);
  accent-color: #b9cd91;
}
:root[data-ui-theme="dark"] #stats-backdrop .progress-goal-card progress::-webkit-progress-bar { background: var(--ui-surface-inset); }
:root[data-ui-theme="dark"] #stats-backdrop .progress-goal-card progress::-webkit-progress-value { background: #b9cd91; }
:root[data-ui-theme="dark"] #stats-backdrop .progress-goal-card progress::-moz-progress-bar { background: #b9cd91; }

/* Both switches are icon-only, with their action provided by aria-label/title. */
button.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #d7cfbc;
  border-radius: 50%;
  background: #fffaf0;
  color: #625637;
  cursor: pointer;
}
button.theme-toggle:hover { background: #eee7d6; border-color: #ad965e; }
button.theme-toggle:focus-visible { outline: 2px solid #aa8741; outline-offset: 3px; }
.theme-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
:root[data-ui-theme="dark"] .theme-icon-moon { display: none; }
:root[data-ui-theme="dark"] .theme-icon-sun { display: block; }
:root[data-ui-theme="dark"] .theme-toggle {
  --ui-button-bg: #27352b;
  --ui-button-hover: #3b4a33;
  --ui-button-fg: #efd28a;
  --ui-button-border: #70603c;
}