/* Palette colours from the four predictor studies. Layout, competition art,
   football pitches and result/achievement colours deliberately stay separate. */
html[data-site-colour-theme] {
  --site-bg: #081631;
  --site-panel: #163b7b;
  --site-deep: #0d285a;
  --site-header: #09204a;
  --site-raised: #204b96;
  --site-accent: #2764cf;
  --site-line: #426ca6;
  --site-muted: #bdd0ed;
  --site-text: #f6f9ff;
  --site-radius: 8px;
  color-scheme: dark;
}

html[data-site-colour-theme="navy"] {
  --site-bg: #091323;
  --site-panel: #13243d;
  --site-deep: #0e1d33;
  --site-header: #0a1427;
  --site-raised: #19365b;
  --site-accent: #2a60b9;
  --site-line: #3d5372;
  --site-muted: #b1c1d8;
  --site-radius: 14px;
}

html[data-site-colour-theme="slate"] {
  --site-bg: #172334;
  --site-panel: #23344b;
  --site-deep: #1b2a3f;
  --site-header: #172334;
  --site-raised: #304c70;
  --site-accent: #3d6195;
  --site-line: #4e6380;
  --site-muted: #bacadd;
  --site-radius: 18px;
}

html[data-site-colour-theme="minimal"] {
  --site-bg: #070f1c;
  --site-panel: #0c182b;
  --site-deep: #091323;
  --site-header: #070f1c;
  --site-raised: #142846;
  --site-accent: #315fae;
  --site-line: #354966;
  --site-muted: #b1c1d8;
  --site-radius: 5px;
}

/* Base website variables must not replace a competition's own body palette. */
html[data-site-colour-theme] body:is(
  .before-start:not([data-desktop-mode-setup]), .profile-mode-active,
  .custom-tournament-mode-active, .legacy-mode-active, .legacy-tournament-mode-active,
  .legacy-route-setup-active, [data-desktop-mode-setup="standard"], .predict-page,
  :has(> .workshop-header)
),
html[data-site-colour-theme] body.standard-mode-active:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) {
  --bg: var(--site-bg);
  --panel: var(--site-panel);
  --panel-2: var(--site-deep);
  --panel-3: var(--site-raised);
  --text: var(--site-text);
  --muted: var(--site-muted);
  --soft: var(--site-muted);
  --line: var(--site-line);
  --line-strong: var(--site-line);
  --lime: #aacaff;
  --lime-dark: var(--site-accent);
}

/* Existing generic-mode and shared-dialog owners already consume these tokens.
   Competition-specific palettes and the football pitch do not use them. */
html[data-site-colour-theme] body {
  /* Deferred generic skins use ID-specific :has() guards. These token-only
     overrides beat those guards without changing their layout selectors. */
  --hub-bg: var(--site-bg) !important;
  --hub-surface: var(--site-panel) !important;
  --hub-surface-strong: var(--site-deep) !important;
  --hub-accent: var(--site-accent) !important;
  --hub-line: var(--site-line) !important;
  --hub-muted: var(--site-muted) !important;
  --shared-mode-canvas: var(--site-bg) !important;
  --shared-mode-canvas-deep: var(--site-bg) !important;
  --shared-mode-panel: var(--site-panel) !important;
  --shared-mode-panel-raised: var(--site-raised) !important;
  --shared-mode-panel-deep: var(--site-deep) !important;
  --shared-mode-control: var(--site-deep) !important;
  --shared-mode-line: var(--site-line) !important;
  --shared-mode-line-strong: var(--site-line) !important;
  --shared-mode-text: var(--site-text) !important;
  --shared-mode-muted: var(--site-muted) !important;
  --shared-mode-faint: var(--site-muted) !important;
  --shared-mode-accent: var(--site-accent) !important;
  --shared-mode-accent-ink: #fff !important;
  --custom-blue-panel: var(--site-panel) !important;
  --custom-blue-panel-raised: var(--site-raised) !important;
  --custom-blue-panel-soft: var(--site-deep) !important;
  --custom-blue-panel-deep: var(--site-deep) !important;
  --custom-blue-border: var(--site-line) !important;
  --custom-blue-border-strong: var(--site-muted) !important;
  --custom-blue-accent: var(--site-accent) !important;
  --custom-blue-accent-strong: var(--site-raised) !important;
  --custom-blue-accent-ink: #fff !important;
  --custom-blue-text: var(--site-text) !important;
  --custom-blue-muted: var(--site-muted) !important;
  --custom-blue-faint: var(--site-muted) !important;
  --popup-blue-950: var(--site-bg);
  --popup-blue-900: var(--site-header);
  --popup-blue-850: var(--site-panel);
  --popup-blue-800: var(--site-raised);
  --popup-blue-panel: var(--site-panel);
  --popup-blue-panel-strong: var(--site-deep);
  --popup-blue-line: var(--site-line);
  --popup-blue-line-strong: var(--site-muted);
  --popup-blue-text: var(--site-text);
  --popup-blue-muted: var(--site-muted);
}

html[data-site-colour-theme] body:is(.before-start:not([data-desktop-mode-setup]), .profile-mode-active),
html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) :is(.app-shell, .main),
html[data-site-colour-theme] body.profile-mode-active .profile-screen {
  color: var(--site-text);
  background: var(--site-bg);
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) .sidebar,
html[data-site-colour-theme] body.profile-mode-active .profile-header {
  border-color: var(--site-line);
  background: var(--site-header);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) #appShell > .sidebar {
  background: var(--site-header) !important;
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) #appShell > #sidebar .main-section-switch a.is-active {
  color: #fff !important;
  background: var(--site-accent) !important;
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) #appShell > #sidebar .header-actions :is(.utility-button, .main-account-button) {
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) :is(
  .main-section-switch, .main-account-button, .home-editorial, .home-editorial-links a,
  .domestic-league-switch, .domestic-english-league-switch, .retro-competition-switch,
  .retro-year-switch, .club-competition-switch, .home-leaderboard-tabs,
  .home-achievement-own, .home-achievement-row.is-heading,
  .league-menu-search, .league-gender-switch
),
html[data-site-colour-theme] body.profile-mode-active :is(
  .profile-header-actions .utility-button, .profile-signout-button,
  .profile-form input, .profile-country-search, .profile-country-option,
  .profile-achievement-total > div, .profile-predict-stats div, .profile-predict-leagues a
) {
  border-color: var(--site-line) !important;
  color: var(--site-text) !important;
  background: var(--site-deep) !important;
  box-shadow: none !important;
}

html[data-site-colour-theme] body.before-start:not([data-desktop-mode-setup]) :is(
  .home-achievement-leaderboard
),
html[data-site-colour-theme] body.profile-mode-active :is(
  .profile-account-overview, .profile-edit-panel, .profile-history-section,
  .profile-unlocked-achievement, .profile-empty-state, .profile-predict-section
) {
  border-color: var(--site-line);
  border-radius: var(--site-radius);
  color: var(--site-text);
  background: var(--site-panel);
  box-shadow: none;
  backdrop-filter: none;
}

/* Folder shine, hover effects and mode/career card artwork stay with their
   existing owners. The palette changes the surrounding website, not the cards. */
html[data-site-colour-theme] body.profile-mode-active .profile-predict-section::after {
  display: none;
}

html[data-site-colour-theme] body.before-start .simulator-more-grid > .simulator-mode-card {
  text-decoration: none;
}

html[data-site-colour-theme] :is(.leaderboard-screen, .home-achievement-modal) :is(
  .home-achievement-table, .home-achievement-row, .home-achievement-own
) {
  border-color: var(--site-line);
  color: var(--site-text);
  background: var(--site-panel);
}

html[data-site-colour-theme] :is(.leaderboard-screen, .home-achievement-modal) :is(
  .home-achievement-row:nth-child(odd), .home-achievement-row.is-heading
) {
  background: var(--site-deep);
}

html[data-site-colour-theme] .home-leaderboard-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--site-accent);
  box-shadow: none;
}

html[data-site-colour-theme] .home-achievement-modal {
  border-color: var(--site-line);
  background: var(--site-deep);
}

html[data-site-colour-theme] body.profile-mode-active :is(.profile-edit-toggle, .profile-predict-heading a),
html[data-site-colour-theme] body.before-start .main-section-switch a.is-active {
  color: #fff !important;
  background: var(--site-accent) !important;
  border-color: var(--site-line) !important;
  box-shadow: none;
}

html[data-site-colour-theme] body.profile-mode-active :is(
  .profile-hero p, .profile-preview span, .profile-unlocked-achievement span,
  .profile-unlocked-achievement time, .profile-predict-stats span
),
html[data-site-colour-theme] .home-achievement-leaderboard :is(p, small, .home-achievement-name span) {
  color: var(--site-muted);
}

/* Generic setup/match surfaces already use --shared-mode-*; remove only their
   decorative cyan glow. Do not select competition match containers or pitches. */
html[data-site-colour-theme] body:is(
  [data-desktop-mode-setup="standard"], .legacy-mode-active,
  .legacy-tournament-mode-active, .legacy-route-setup-active, .custom-tournament-mode-active
),
html[data-site-colour-theme] body:is(
  [data-desktop-mode-setup="standard"], .legacy-mode-active,
  .legacy-tournament-mode-active, .legacy-route-setup-active, .custom-tournament-mode-active
) :is(.main, #appShell) {
  background: var(--site-bg) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active :is(
  .custom-workspace-panel, .custom-match-teams, .custom-match-team-card,
  .custom-match-script, .custom-team-library, .custom-builder-group, .custom-live-group
) {
  background: var(--site-panel) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active #customTournamentScreen :is(
  .custom-bracket-edit-match, .custom-manager-neutral, .custom-manager-control > button,
  .custom-match-rule-editor > .custom-match-teams, .custom-fixed-result-fields
) {
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active #customTournamentScreen :is(
  .custom-config-bar,
  .custom-bracket-edit-match > header, .custom-bracket-edit-match > footer,
  .custom-match-score-script, .custom-match-rule-editor > header, .custom-fixed-toggle
) {
  color: var(--site-muted) !important;
  background: var(--site-panel) !important;
}

html[data-site-colour-theme] body.legacy-mode-active :is(
  .legacy-left-panel, .legacy-player-card, .legacy-draft-status, .legacy-randomiser
),
html[data-site-colour-theme] body.legacy-tournament-mode-active:not(.before-start) #mainContent :is(
  .match-stage, .round-board, .panel, .match-analysis, .story-card
) {
  background: var(--site-panel) !important;
  box-shadow: none !important;
}

html[data-site-colour-theme] body :is(
  #settingsModal, #bugReportModal, #feedbackResponseModal, #feedbackAdminModal,
  #discordModal, #donateModal, #challengeAuthModal, #usernameReviewModal,
  #profileDeleteModal, .feature-announcement-modal
)[open] {
  background: var(--site-deep) !important;
}

/* Keep the saved-tournament entry compact without shrinking its touch target. */
html[data-site-colour-theme] #unfinishedTournamentResumeSection {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-color: var(--site-line);
  border-radius: 10px;
  color: var(--site-text);
  background: var(--site-deep);
  box-shadow: none;
}

html[data-site-colour-theme] #unfinishedTournamentResumeSection h2 {
  font-size: 15px;
  line-height: 1.3;
}

html[data-site-colour-theme] #unfinishedTournamentResumeCopy {
  margin-top: 3px;
  color: var(--site-muted);
  font-size: 12px;
  line-height: 1.4;
}

html[data-site-colour-theme] #unfinishedTournamentResumeButton {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  gap: 8px;
  padding: 0 12px;
  border-color: var(--site-line);
  border-radius: 8px;
  color: var(--site-text);
  background: var(--site-panel);
  font-size: 12px;
}

html[data-site-colour-theme] #unfinishedTournamentModal {
  color: var(--site-text);
  border-color: var(--site-line);
  background: var(--site-deep);
}

html[data-site-colour-theme] #unfinishedTournamentModal :is(
  .unfinished-tournament-modal-card, .unfinished-tournament-list
) {
  background: var(--site-deep);
}

html[data-site-colour-theme] #unfinishedTournamentModal :is(
  .unfinished-tournament-item, .unfinished-tournament-modal-header,
  .unfinished-tournament-modal-footer
) {
  border-color: var(--site-line);
  background: var(--site-panel);
}

html[data-site-colour-theme] #unfinishedTournamentModal :is(
  .unfinished-tournament-mark, .unfinished-tournament-close,
  .unfinished-tournament-modal-footer .secondary-button
) {
  border-color: var(--site-line);
  color: var(--site-text);
  background: var(--site-deep);
}

html[data-site-colour-theme] #unfinishedTournamentModal :is(
  .unfinished-tournament-meta, .unfinished-tournament-stage,
  .unfinished-tournament-modal-header p, .unfinished-tournament-modal-footer
) {
  color: var(--site-muted);
}

html[data-site-colour-theme] #unfinishedTournamentModal .unfinished-tournament-action:not(.is-delete) {
  border-color: var(--site-line);
  color: #fff;
  background: var(--site-accent);
}

/* The same small picker is rendered by the main and predictor Settings screens. */
.site-colour-setting {
  margin: 18px 0;
  color: var(--site-text);
}

.site-colour-setting h3 {
  margin: 0;
  font: 800 16px/1.4 "Manrope", sans-serif;
}

.site-colour-setting p {
  margin: 4px 0 12px;
  color: var(--site-muted);
  font: 500 12px/1.5 "Manrope", sans-serif;
}

.site-colour-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html body .site-colour-options button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 84px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--site-line);
  border-radius: 8px;
  color: var(--site-text);
  background: var(--site-bg);
  font: 700 13px/1.3 "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
}
html body .site-colour-options button[aria-pressed="true"] {
  border-color: #aacaff;
  box-shadow: inset 0 0 0 1px #aacaff;
}
html body .site-colour-options button:focus-visible {
  outline: 3px solid #aacaff;
  outline-offset: 3px;
}
html body .site-colour-options button:active { transform: scale(.98); }
.site-colour-check {
  visibility: hidden;
  color: #aacaff;
  text-align: right;
}
[aria-pressed="true"] > .site-colour-check { visibility: visible; }
.site-colour-swatch {
  display: flex;
  grid-column: 1 / -1;
  overflow: hidden;
  height: 20px;
  border-radius: 4px;
  background: #081631;
}

.site-colour-swatch i {
  flex: 1;
  background: #163b7b;
}
.site-colour-swatch i:first-child { background: #081631; }
.site-colour-swatch i:last-child { background: #2764cf; }
[data-swatch="navy"] i { background: #13243d; }
[data-swatch="navy"] i:first-child { background: #091323; }
[data-swatch="navy"] i:last-child { background: #2a60b9; }
[data-swatch="slate"] i { background: #23344b; }
[data-swatch="slate"] i:first-child { background: #172334; }
[data-swatch="slate"] i:last-child { background: #3d6195; }
[data-swatch="minimal"] i { background: #0c182b; }
[data-swatch="minimal"] i:first-child { background: #070f1c; }
[data-swatch="minimal"] i:last-child { background: #315fae; }

@media (hover: hover) and (pointer: fine) {
  html body .site-colour-options button:hover { border-color: #aacaff; }
}

/* Predictor still owns its layout, moderation/recording offsets and gold/green
   result statuses. Explicit local design-preview styles can override these. */
html:where([data-site-colour-theme]) body.predict-page {
  --predict-bg: var(--site-bg);
  --predict-surface: var(--site-panel);
  --predict-surface-strong: var(--site-deep);
  --predict-accent: var(--site-accent);
  --predict-accent-hover: var(--site-raised);
  --predict-line: var(--site-line);
  --predict-light: var(--site-text);
  --predict-muted: var(--site-muted);
}
html:where([data-site-colour-theme]) .predict-site-header { background: var(--site-header); }
html:where([data-site-colour-theme]) .predict-fixture-meta,
html:where([data-site-colour-theme]) .predict-table tbody tr:nth-child(even) { background: var(--site-deep); }
html:where([data-site-colour-theme]) .predict-page :is(
  .predict-main-nav, .predict-utility-button, .predict-account-button, .predict-tabs,
  .predict-league-back, .predict-invite-code, .predict-secondary-button,
  .predict-snapshot-button, .predict-gameweek-pill, .predict-outcome-choice,
  .predict-market-score, .predict-score-entry input
) { background-color: var(--site-deep); }
html:where([data-site-colour-theme]) .predict-page :is(
  .predict-tab[aria-selected="true"], .predict-main-nav a.is-active, .predict-gameweek-pill.is-active
) { background: var(--predict-accent); }
html:where([data-site-colour-theme]) .predict-own-standing,
html:where([data-site-colour-theme]) .predict-table tbody tr.is-own { background: var(--site-raised); }

/* The standalone workshop/browse pages share the same former light-blue skin. */
html[data-site-colour-theme] body:has(> .workshop-header) {
  --control: var(--site-deep);
  --blue: var(--site-accent);
  --blue-dark: var(--site-raised);
  --blue-ink: #fff;
  --shadow: none;
  background: var(--site-bg);
}

html[data-site-colour-theme] .workshop-header {
  border-color: var(--site-line);
  background: var(--site-header);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-site-colour-theme] :is(
  .workshop-primary-nav, .workshop-utility-button, .workshop-account,
  .builder-entry-card, .builder-disclosure, .builder-step-nav,
  .preset-card, .saved-leagues-panel
) {
  border-color: var(--site-line);
  background: var(--site-deep);
  box-shadow: none;
}

html[data-site-colour-theme] :is(.workshop-primary-nav a.is-active, .builder-entry-card.is-primary) {
  background: var(--site-accent);
}

html[data-site-colour-theme] :is(
  .pack-card, .pack-inbox-hero, .pack-inbox-card, .pack-inbox-summary > span,
  .pack-meta span, .pack-inbox-facts > span, .review-test-banner, .builder-entry,
  .builder-panel, .builder-step-panel, .returned-submissions, .account-leagues
) {
  border-color: var(--site-line);
  background: var(--site-panel);
  box-shadow: none;
}

/* Route-specific setup guards used to bring the old cyan header back after
   navigation. Limit these overrides to generic modes and the profile shell. */
html[data-site-colour-theme] body:is(
  [data-desktop-mode-setup="standard"], .custom-tournament-mode-active,
  .legacy-mode-active, .legacy-tournament-mode-active, .profile-mode-active,
  .standard-mode-active:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active)
) .sidebar {
  background: var(--site-header) !important;
  border-color: var(--site-line) !important;
  box-shadow: none !important;
}

html[data-site-colour-theme] body:is(
  [data-desktop-mode-setup="standard"], .custom-tournament-mode-active,
  .legacy-mode-active, .legacy-tournament-mode-active, .profile-mode-active,
  .standard-mode-active:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active)
) :is(.header-actions .utility-button, .main-account-button, .standard-route-back),
html[data-site-colour-theme] body[data-desktop-mode-setup="standard"] #appShell > #sidebar .header-actions .utility-button,
html[data-site-colour-theme] body.profile-mode-active .profile-screen .profile-header .header-actions .utility-button {
  color: var(--site-text) !important;
  background: var(--site-deep) !important;
  border-color: var(--site-line) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active :is(
  .custom-script-count, .custom-score-script, .custom-winner-select,
  .custom-library-heading, .custom-library-team, .custom-config-bar button,
  .custom-inline-actions button,
  #customTournamentScreen .custom-format-switch button
) {
  color: var(--site-text) !important;
  background: var(--site-deep) !important;
  border-color: var(--site-line) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active .custom-editor-backdrop {
  background: rgba(0, 0, 0, .72) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active :is(
  .custom-workspace-panel summary, .custom-workspace-panel small,
  .custom-player-help, .custom-player-number, .custom-player-attributes summary,
  .custom-player-main-fields label > span, .custom-config-bar span,
  #customTournamentScreen .custom-setup-more summary,
  .custom-third-place-preview > header span, .custom-third-place-preview > div span
) {
  color: var(--site-muted) !important;
}

html[data-site-colour-theme] body.custom-tournament-mode-active :is(
  .custom-team-creator .primary-button, .custom-editor-modal button:not(:disabled)
) {
  color: var(--site-text);
  border-color: var(--site-line);
  background-color: var(--site-deep);
}

html[data-site-colour-theme] body.custom-tournament-mode-active .custom-team-creator .primary-button {
  color: #fff !important;
  background: var(--site-accent) !important;
}

html[data-site-colour-theme] body.profile-mode-active :is(
  #profileCareerSection, #profileRemainingCount, #profileTournamentHistoryCount,
  .profile-remaining-achievement, .profile-unlocked-achievement > b
) {
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] body.profile-mode-active .profile-unlocked-achievement small {
  color: var(--site-muted);
}

html:where([data-site-colour-theme]) .predict-status.is-open {
  color: var(--site-muted);
  background: var(--site-deep);
}

/* Workshop chrome, not the builder's editable competition/kit preview. */
html[data-site-colour-theme] body:has(> .workshop-header) :is(
  .workshop-tool, .workshop-account-icon, #accountLeaguesCount, .step-rail,
  .step-link i, .preset-flag, .builder-group, .menu-preview-controls,
  .theme-preview-tabs, .team-list-panel, .team-editor, .panel-toolbar,
  .starting-xi-tools, .player-table-wrap, .player-table th,
  .submission-choice label, .review-summary, .submission-fields,
  .submit-actions .playtest-action, .team-library-club,
  .league-playtest-summary, .league-playtest-toolbar,
  .league-playtest-fixtures, .league-playtest-table-panel,
  .league-playtest-fixture, .league-playtest-table-panel th,
  .league-playtest-header, .league-playtest-header > button,
  .league-playtest-footer button, .toast
) {
  color: var(--site-text);
  border-color: var(--site-line);
  background: var(--site-deep);
  box-shadow: none;
}

html[data-site-colour-theme] body:has(> .workshop-header) :is(
  .league-playtest-dialog, .paste-dialog, .team-library-dialog
) {
  color: var(--site-text);
  border-color: var(--site-line);
  background: var(--site-panel);
}

html[data-site-colour-theme] body:has(> .workshop-header) :is(
  .step-link.active, .step-link.completed, .theme-preview-tabs button[aria-selected="true"]
) {
  color: var(--site-text);
  background: var(--site-raised);
}

html[data-site-colour-theme] body:has(> .workshop-header) .builder-entry-card.is-primary :is(p, b) {
  color: #fff;
}

html[data-site-colour-theme] body:has(> .workshop-header) :is(input, select, textarea):focus {
  color: var(--site-text);
  background: var(--site-deep);
  border-color: var(--site-muted);
  outline: 2px solid var(--site-muted);
  outline-offset: 2px;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  html[data-site-colour-theme] body:has(> .workshop-header) :is(
    .workshop-tool, .workshop-primary-nav a:not(.is-active),
    .builder-entry-card, .preset-card, .team-library-club,
    .submit-actions .playtest-action, .league-playtest-footer button
  ):hover {
    color: var(--site-text);
    background: var(--site-raised);
    border-color: var(--site-muted);
  }
}

/* Match skins have explicit late :not() guards. Keep the same owner boundary
   and specificity so opening a match cannot reintroduce the old cyan skin. */
html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) {
  --knockout-blue: var(--site-accent);
  --knockout-blue-deep: var(--site-bg);
  --knockout-blue-dark: var(--site-deep);
  --knockout-blue-soft: var(--site-raised);
  --knockout-panel: var(--site-panel);
  --knockout-panel-deep: var(--site-panel);
  --knockout-line: var(--site-line);
  --knockout-text: var(--site-text);
  --knockout-muted: var(--site-muted);
  color: var(--site-text) !important;
  background: var(--site-bg) !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) #appShell > #sidebar {
  --theme-banner-bg: var(--site-header);
  --theme-banner-control: var(--site-deep);
  --theme-banner-muted: var(--site-muted);
  --theme-banner-control-line: var(--site-line);
  background: var(--site-header) !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) #appShell > #sidebar .header-actions :is(.utility-button, .main-account-button) {
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) #mainContent :is(
  #matchStage, #matchAnalysis, #roundBoard, .panel, .standard-match-tactics,
  .retro-match-lineups-panel
) {
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
  background: var(--site-panel) !important;
  box-shadow: none !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) #mainContent :is(
  .panel-heading, .match-analysis-heading, .match-stat-row, .fixture,
  #unresolvedFilter, #goToTopButton, .spoiler-panel, .golden-boot-item, .team-filter-search,
  .primary-button, .play-button, .secondary-button, .live-control,
  .match-highlight-mode button
) {
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
  box-shadow: none !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) #mainContent :is(.fixture.selected, .match-highlight-mode button[aria-pressed="true"]) {
  background: var(--site-raised) !important;
}

html[data-site-colour-theme] body:is(.standard-mode-active, .custom-tournament-mode-active, .legacy-tournament-mode-active):not(.retro-mode-active):not(.before-start):not(.pl-match-mode-active):not(.ucl-match-mode-active):not(.authentic-tournament-theme-active) :is(
  #legacyDraftBackButton, .golden-boot-rank, .golden-boot-empty > span
) {
  color: var(--site-muted) !important;
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] :is(#snapshotModal, #membershipModal) .primary-button {
  color: #fff !important;
  border-color: var(--site-line) !important;
  background: var(--site-accent) !important;
}

html[data-site-colour-theme] body.profile-mode-active #profileScreen .profile-header .header-actions .utility-button {
  color: var(--site-text) !important;
  border-color: var(--site-line) !important;
  background: var(--site-deep) !important;
}

html[data-site-colour-theme] #legacySetupModal .legacy-setup-modal-card > footer,
html[data-site-colour-theme] body.legacy-mode-active .legacy-draft-status > div {
  color: var(--site-text) !important;
  background: var(--site-deep) !important;
  border-color: var(--site-line) !important;
}

html[data-site-colour-theme] :is(.paste-dialog, .team-library-dialog, .league-playtest-dialog)::backdrop {
  background: rgba(0, 0, 0, .72);
}

html[data-site-colour-theme] body:not(.retro-mode-active):not(.pl-match-mode-active):not(.ucl-match-mode-active) .footer-last-updated {
  color: var(--site-muted);
}