/* These colors exist only while a selected timer background has loaded. */
app-timer .debater-timer-page.timer-palette-ready [data-testid="timer-card-affirmative"] {
  --timer-side-hue: calc(var(--timer-palette-hue) + 22);
}
app-timer .debater-timer-page.timer-palette-ready [data-testid="timer-card-negative"] {
  --timer-side-hue: calc(var(--timer-palette-hue) - 22);
}
app-timer .debater-timer-page.timer-palette-ready .timer-navigation {
  background: hsl(var(--timer-palette-hue) 26% 15% / .9);
  border-color: hsl(var(--timer-palette-hue) 32% 66% / .38);
  color: #f8fafc;
}
app-timer .debater-timer-page.timer-palette-ready .timer-navigation-heading {
  color: #dbe4ea;
}
app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button {
  background: hsl(var(--timer-palette-hue) 24% 9% / .68);
  border-color: hsl(var(--timer-palette-hue) 30% 70% / .33);
  color: #f8fafc;
}
app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button:hover,
app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button:focus-visible {
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 72%);
  outline-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 72%);
}
app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button.is-active {
  background: hsl(var(--timer-palette-hue) 36% 29% / .9);
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 70%);
  color: #fff;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > .glass {
  background: linear-gradient(155deg,
    hsl(var(--timer-palette-hue) 23% 20% / .94),
    hsl(var(--timer-palette-hue) 22% 12% / .96)) !important;
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 65% / .55) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > .glass:hover,
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > button[aria-pressed="true"] ~ .glass {
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 72%) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid="position-badge"] {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 55% / .18) !important;
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 72% / .64) !important;
  color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 78%) !important;
  box-shadow: 0 0 20px hsl(var(--timer-side-hue) var(--timer-palette-saturation) 55% / .16) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > div:first-of-type > div:not(.animate-pulse):not(.bg-yellow-500) {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 62%) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [role="timer"].text-cyan-400,
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [role="timer"].text-red-400 {
  color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 74%) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > button[aria-pressed="true"] ~ .glass [data-testid^="timer-card-action-"] {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 38%) !important;
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 72%) !important;
  color: #fff !important;
  box-shadow: 0 0 20px hsl(var(--timer-side-hue) var(--timer-palette-saturation) 55% / .25) !important;
}
app-timer .debater-timer-page.timer-palette-ready.timer-has-background .timer-background-toolbar button[aria-label="重置计时器（需二次确认）"],
app-timer .debater-timer-page.timer-palette-ready.timer-has-background .timer-background-toolbar button[aria-label="打开或关闭设置面板"],
app-timer .debater-timer-page.timer-palette-ready.timer-has-background .timer-background-toolbar button[title="全屏模式"],
app-timer .debater-timer-page.timer-palette-ready.timer-has-background .timer-background-toolbar button[title="退出全屏"] {
  background: hsl(var(--timer-palette-hue) 28% 13% / .78) !important;
  border-color: hsl(var(--timer-palette-hue) 32% 74% / .42) !important;
}
app-timer .debater-timer-page.timer-palette-ready .timer-background-toolbar button[aria-label="开始或暂停计时器"][aria-pressed="false"] {
  background: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 38%) !important;
  color: #fff !important;
}
app-timer .debater-timer-page.timer-palette-ready .timer-background-toolbar button[class*="from-cyan-500"] {
  background: linear-gradient(90deg,
    hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 40%),
    hsl(calc(var(--timer-palette-hue) + 22) var(--timer-palette-saturation) 34%)) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid="format-section"] {
  background: hsl(var(--timer-palette-hue) 28% 28% / .32) !important;
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 67% / .5) !important;
}
app-timer .debater-timer-page.timer-palette-ready [data-testid="open-format-selector-btn"] {
  background: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 37%) !important;
  color: #fff !important;
}
app-timer .debater-timer-page.timer-palette-ready .timer-background-option.selected {
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 72%);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation {
  background: hsl(var(--timer-palette-hue) 28% 95% / .95);
  border-color: hsl(var(--timer-palette-hue) 25% 62% / .66);
  color: #1d2732;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid="format-section"] {
  background: hsl(var(--timer-palette-hue) 32% 90% / .88) !important;
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 42% / .48) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-background-option.selected {
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 36%);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation-heading { color: #445364; }
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button {
  background: hsl(var(--timer-palette-hue) 27% 99% / .88);
  border-color: hsl(var(--timer-palette-hue) 24% 70%);
  color: #1d2732;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button:hover,
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button:focus-visible {
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 36%);
  outline-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 36%);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready .timer-navigation-button.is-active {
  background: hsl(var(--timer-palette-hue) 36% 83%);
  border-color: hsl(var(--timer-palette-hue) var(--timer-palette-saturation) 38%);
  color: hsl(var(--timer-palette-hue) 46% 25%);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > .glass {
  background: linear-gradient(155deg,
    hsl(var(--timer-palette-hue) 30% 95% / .97),
    hsl(var(--timer-palette-hue) 28% 89% / .97)) !important;
  border-color: hsl(var(--timer-side-hue) 32% 56% / .68) !important;
  box-shadow: 0 16px 38px rgba(20, 30, 40, .16);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > .glass:hover,
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > button[aria-pressed="true"] ~ .glass {
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 37%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid="position-badge"] {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 52% / .15) !important;
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 38% / .7) !important;
  color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 27%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > div:first-of-type > div:not(.animate-pulse):not(.bg-yellow-500) {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 42%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [role="timer"].text-cyan-400,
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [role="timer"].text-red-400 {
  color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 31%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [role="timer"]:not(.text-yellow-500):not(.text-red-500):not(.text-red-600) {
  color: hsl(var(--timer-palette-hue) 24% 15%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > div:last-of-type > button {
  background: hsl(var(--timer-palette-hue) 25% 75% / .45) !important;
  color: hsl(var(--timer-palette-hue) 30% 22%) !important;
  border: 1px solid hsl(var(--timer-palette-hue) 30% 50% / .38);
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] [data-testid^="timer-card-action-"] {
  background: hsl(var(--timer-palette-hue) 30% 99% / .72) !important;
  border-color: hsl(var(--timer-palette-hue) 24% 52% / .55) !important;
  color: hsl(var(--timer-palette-hue) 25% 26%) !important;
}
.light-mode app-timer .debater-timer-page.timer-palette-ready [data-testid^="timer-card-"] > button[aria-pressed="true"] ~ .glass [data-testid^="timer-card-action-"] {
  background: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 32%) !important;
  border-color: hsl(var(--timer-side-hue) var(--timer-palette-saturation) 27%) !important;
}