.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-control > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.theme-control select {
  min-height: 36px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line, var(--color-border));
  border-radius: 8px;
  background: var(--panel-solid, var(--color-surface-solid));
  color: var(--ink, var(--color-text));
  font: inherit;
}

html[data-color-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fa;
  --panel: rgba(255, 255, 255, 0.97);
  --panel-solid: #ffffff;
  --ink: #0b1a28;
  --muted: #526873;
  --line: rgba(7, 49, 81, 0.13);
  --line-strong: rgba(8, 126, 164, 0.32);
  --soft: #f3f7f8;
  --chip-subtle: #edf5f7;
  --shadow: 0 8px 24px rgba(7, 49, 81, 0.07);
  --accent: #087ea4;
  --accent-bright: #087ea4;
  --accent-mint: #078b83;
  --success: #14775e;
  --danger: #b42332;
  --row-bg: #ffffff;
  --row-bg-hover: #f5fafb;
  --row-bg-active: #edf7fa;
  --row-line: rgba(7, 49, 81, 0.13);
  --row-line-hover: rgba(8, 126, 164, 0.34);
  --form-control-background: #ffffff;
  --form-control-foreground: #0b1a28;
  --form-control-border: rgba(7, 49, 81, 0.18);
  --form-control-hover-background: #f8fbfc;
  --form-control-hover-border: rgba(8, 126, 164, 0.38);
  --status-success-bg: #d8f4ee;
  --status-warning-bg: #fff0d9;
  --status-error-bg: #ffe1e4;
  --color-bg: #f7f9fa;
  --color-bg-elevated: #ffffff;
  --color-surface: rgba(255, 255, 255, 0.88);
  --color-surface-solid: #ffffff;
  --color-text: #0b1a28;
  --color-text-secondary: #405d6c;
  --color-text-muted: #647d8c;
  --color-border: rgba(7, 49, 81, 0.14);
}

html[data-color-theme="light"] body {
  color: var(--ink, var(--color-text));
  background: #f7f9fa;
}

html[data-color-theme="light"] .site-header,
html[data-color-theme="light"] .panel,
html[data-color-theme="light"] .dialog-card,
html[data-color-theme="light"] .modal-card,
html[data-color-theme="light"] .notification-dropdown,
html[data-color-theme="light"] .account-dropdown,
html[data-color-theme="light"] .topbar-team-menu,
html[data-color-theme="light"] .login-menu,
html[data-color-theme="light"] .glass-panel,
html[data-color-theme="light"] .message-strip,
html[data-color-theme="light"] .statement-block,
html[data-color-theme="light"] .pricing-line,
html[data-color-theme="light"] .faq-line details {
  background-color: var(--panel-solid, var(--color-surface-solid));
  color: var(--ink, var(--color-text));
  border-color: var(--line, var(--color-border));
}

html[data-color-theme="light"] :is(
  dialog.filter-dialog,
  dialog.upload-dialog,
  dialog.account-dialog,
  .modal-card
) {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
}

html[data-color-theme="light"] :is(
  .filter-dialog-form,
  .upload-form,
  .account-dialog-form
) {
  background: #ffffff;
  color: var(--ink);
}

html[data-color-theme="light"] :is(
  .account-info-row,
  .account-feature-row,
  .account-notification-row
) {
  border-color: var(--row-line);
  background: #ffffff;
}

/* Light mode is deliberately quiet: white surfaces, fine brand lines and no dark card chrome. */
html[data-color-theme="light"] .sidebar,
html[data-color-theme="light"] .topbar,
html[data-color-theme="light"] .summary-card,
html[data-color-theme="light"] .video-shell,
html[data-color-theme="light"] .rally-timeline,
html[data-color-theme="light"] .detail-panel,
html[data-color-theme="light"] .inspector-shell,
html[data-color-theme="light"] .upload-dialog,
html[data-color-theme="light"] .dark-panel,
html[data-color-theme="light"] .mobile-nav {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

html[data-color-theme="light"] .sidebar {
  border-right-color: rgba(8, 126, 164, 0.24);
}

html[data-color-theme="light"] .sidebar-section,
html[data-color-theme="light"] .sidebar-nav button,
html[data-color-theme="light"] .check-chip,
html[data-color-theme="light"] .pill,
html[data-color-theme="light"] .team-context-chip,
html[data-color-theme="light"] .filter-bar,
html[data-color-theme="light"] .library-filters,
html[data-color-theme="light"] .segmented-toggle,
html[data-color-theme="light"] .inspector-tabs,
html[data-color-theme="light"] .player-summary,
html[data-color-theme="light"] .point-filters,
html[data-color-theme="light"] .point-set-heading,
html[data-color-theme="light"] .point-action,
html[data-color-theme="light"] .playlist-comment,
html[data-color-theme="light"] .playlist-item.restricted,
html[data-color-theme="light"] .team-setup-bar div,
html[data-color-theme="light"] .team-roster-table,
html[data-color-theme="light"] .team-inline-invite,
html[data-color-theme="light"] .team-rights-list,
html[data-color-theme="light"] .team-rights-matrix,
html[data-color-theme="light"] .team-player-rights-list,
html[data-color-theme="light"] .team-overview-panel,
html[data-color-theme="light"] .competition-standing-row {
  border-color: var(--row-line);
  background: var(--row-bg);
  color: var(--ink);
}

html[data-color-theme="light"] .sidebar-label,
html[data-color-theme="light"] #authEmail,
html[data-color-theme="light"] .dark-panel .panel-copy,
html[data-color-theme="light"] .dark-panel .eyebrow,
html[data-color-theme="light"] .dark-panel .pill {
  color: var(--muted);
}

html[data-color-theme="light"] #logoutButton,
html[data-color-theme="light"] .sidebar-collapse-toggle,
html[data-color-theme="light"] .sidebar-nav button {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

html[data-color-theme="light"] .sidebar-nav button:hover,
html[data-color-theme="light"] #logoutButton:hover {
  border-color: var(--line);
  background: var(--soft);
}

html[data-color-theme="light"] .sidebar-nav button.active,
html[data-color-theme="light"] .sidebar-nav button.active:hover {
  border-color: var(--line);
  background: #f5fafb;
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent-bright);
}

html[data-color-theme="light"] .team-management-tabs,
html[data-color-theme="light"] .competition-tabs {
  background: #f7fafb;
}

html[data-color-theme="light"] .team-management-tabs button.active,
html[data-color-theme="light"] .competition-tabs button.active,
html[data-color-theme="light"] .inspector-tabs button.active,
html[data-color-theme="light"] .playlist-discussion-tabs button.active {
  border-color: var(--line-strong);
  background: #edf7fa;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent-bright);
}

html[data-color-theme="light"] .overlay-toggles button,
html[data-color-theme="light"] .point-navigator-tools,
html[data-color-theme="light"] .point-selection-toolbar,
html[data-color-theme="light"] .analysis-steps span,
html[data-color-theme="light"] .dark-panel .pill,
html[data-color-theme="light"] .pill-muted {
  border-color: var(--line);
  background: #f7fafb;
  color: var(--muted);
}

html[data-color-theme="light"] .overlay-toggles button.active,
html[data-color-theme="light"] .overlay-toggles button.is-available:hover,
html[data-color-theme="light"] .analysis-steps span.active {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--ink);
}

html[data-color-theme="light"] .point-inline-comment {
  background: #f7fafb;
}

html[data-color-theme="light"] .team-roster-row:hover,
html[data-color-theme="light"] .team-roster-row.active,
html[data-color-theme="light"] button.team-roster-row:hover {
  background: var(--row-bg-hover);
}

html[data-color-theme="light"] .overview-highlight-card.is-primary,
html[data-color-theme="light"] .team-overview-panel,
html[data-color-theme="light"] .competition-schedule-row.current-date {
  border-left-color: var(--accent-bright);
}

html[data-color-theme="light"] input,
html[data-color-theme="light"] textarea,
html[data-color-theme="light"] select {
  background-color: #ffffff;
  color: #0b1a28;
  border-color: rgba(7, 49, 81, 0.22);
}

html[data-color-theme="light"] input::placeholder,
html[data-color-theme="light"] textarea::placeholder { color: #647d8c; }

html[data-color-theme="dark"] input,
html[data-color-theme="dark"] textarea,
html[data-color-theme="dark"] select {
  color-scheme: dark;
}

.playlist-comment-mentions .badge-chip {
  border-color: rgba(5, 196, 224, 0.34);
  background: rgba(5, 196, 224, 0.14);
  color: #9cebf4;
  text-decoration: none;
}

.playlist-comment-mentions .badge-chip:hover,
.playlist-comment-mentions .badge-chip:focus-visible {
  border-color: rgba(5, 196, 224, 0.58);
  background: rgba(5, 196, 224, 0.22);
  color: #ffffff;
}

.playlist-mention-menu {
  background: var(--panel-solid, var(--color-surface-solid));
  color: var(--ink, var(--color-text));
}

.playlist-mention-menu button {
  color: var(--ink, var(--color-text));
}

html[data-color-theme="light"] .playlist-comment-mentions .badge-chip {
  border-color: rgba(10, 119, 222, 0.3);
  background: #dceef8;
  color: #073151;
}

html[data-color-theme="light"] .playlist-comment-mentions .badge-chip:hover,
html[data-color-theme="light"] .playlist-comment-mentions .badge-chip:focus-visible {
  border-color: rgba(10, 119, 222, 0.5);
  background: #c8e4f3;
  color: #061f34;
}

@media (max-width: 760px) {
  .theme-control select { max-width: 92px; }
}