.debater-timer-page > .timer-background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.debater-timer-page > .timer-background-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.debater-timer-page > .timer-background-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 20, .64), rgba(5, 10, 20, .72));
}
html:not(.dark) .debater-timer-page > .timer-background-layer::after,
.light-mode .debater-timer-page > .timer-background-layer::after {
  background: linear-gradient(180deg, rgba(22, 28, 38, .58), rgba(18, 23, 32, .65));
}
.debater-timer-page.timer-has-background .timer-background-toolbar button[aria-label="重置计时器（需二次确认）"],
.debater-timer-page.timer-has-background .timer-background-toolbar button[aria-label="打开或关闭设置面板"],
.debater-timer-page.timer-has-background .timer-background-toolbar button[title="全屏模式"],
.debater-timer-page.timer-has-background .timer-background-toolbar button[title="退出全屏"] {
  background: rgba(8, 16, 27, .7) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, .35) !important;
}
.debater-timer-page.timer-has-background .timer-background-shortcut-hint {
  color: #e2e8f0 !important;
}
.debater-timer-page.timer-has-background h1 {
  color: #f8fafc !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}
.debater-timer-page.timer-has-background h1 > span:last-child {
  color: #e2e8f0 !important;
}
.debater-timer-page .timer-background-picker {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color, rgba(255,255,255,.18));
  border-radius: .875rem;
  background: var(--bg-card, #15202d);
  color: var(--text-primary, #f8fafc);
}
.debater-timer-page .timer-background-picker h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.debater-timer-page .timer-background-description,
.debater-timer-page .timer-background-hint {
  margin: .3rem 0 0;
  color: var(--text-secondary, #94a3b8);
  font-size: .8rem;
}
.debater-timer-page .timer-background-options {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding: 1rem 0;
}
.debater-timer-page .timer-background-option {
  flex: 0 0 8.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 7.5rem;
  padding: .45rem;
  border: 2px solid var(--border-color, rgba(255,255,255,.18));
  border-radius: .75rem;
  background: var(--bg-secondary, #0f172a);
  color: var(--text-primary, #f8fafc);
  font-size: .8rem;
  text-align: left;
}
.debater-timer-page .timer-background-option.selected {
  border-color: var(--debater-accent, #eeb96e);
}
.debater-timer-page .timer-background-option img,
.debater-timer-page .timer-background-default-swatch {
  width: 100%;
  height: 4.6rem;
  object-fit: cover;
  border-radius: .4rem;
}
.debater-timer-page .timer-background-default-swatch {
  display: block;
  background: linear-gradient(135deg, #17263b, #080c16);
}
.debater-timer-page .timer-background-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.debater-timer-page .timer-background-upload-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  font-weight: 650;
}
.debater-timer-page .timer-background-picker input[type=file] {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  font-size: .875rem;
  color: var(--text-primary, #f8fafc);
}
.debater-timer-page .timer-background-load-error,
.debater-timer-page .timer-background-status {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--debater-accent, #eeb96e);
}
.debater-timer-page .timer-background-option:focus-visible,
.debater-timer-page .timer-background-picker input:focus-visible {
  outline: 2px solid var(--debater-accent, #eeb96e);
  outline-offset: 2px;
}