:root {
      --sys-white: #FFFFFF;
      --sys-black: #000000;
      --sys-gray1: #8E8E93;
      --sys-gray2: #AEAEB2;
      --sys-gray3: #C7C7CC;
      --sys-gray4: #D1D1D6;
      --sys-gray5: #E5E5EA;
      --sys-gray6: #F2F2F7;
      --sys-gray-white-bg: #EBEBF0;
      --sys-gray-black-bg: #242426;
      --grass: #34C759;
      --grass-deep: #279C45;
      --theme-color: var(--grass);
      --theme-color-deep: var(--grass-deep);
      --clay: #FF9500;
      --chalk: var(--sys-gray6);
      --ink: #000000;
      --muted: var(--sys-gray1);
      --line: var(--sys-gray4);
      --gold: #FFCC00;
      --sky: var(--sys-gray6);
      --panel: var(--sys-white);
      --danger: #FF3B30;
      --ok: var(--grass);
      --surface-overlay: rgba(0, 0, 0, .46);
      --surface-strong-bg: var(--sys-gray6);
      --surface-strong-bg-2: var(--sys-gray5);
      --surface-strong-bg-3: var(--sys-gray4);
      --surface-strong-border: var(--sys-gray3);
      --surface-strong-text: #000000;
      --surface-strong-muted: var(--sys-gray1);
      --surface-strong-accent: #007AFF;
      --surface-input-bg: var(--sys-white);
      --surface-input-border: var(--sys-gray3);
      --action-bg: var(--sys-gray6);
      --action-bg-hover: var(--sys-gray5);
      --action-fg: var(--ink);
      --action-border: var(--line);
      --badge-default-bg: var(--sys-gray6);
      --badge-default-fg: var(--ink);
      --badge-default-border: var(--line);
      --badge-gold-bg: var(--gold);
      --badge-gold-fg: var(--sys-black);
      --badge-gold-border: var(--gold);
      --badge-warn-bg: var(--gold);
      --badge-warn-fg: var(--sys-black);
      --badge-warn-border: var(--gold);
      --badge-ok-bg: var(--grass);
      --badge-ok-fg: var(--sys-black);
      --badge-ok-border: var(--grass);
      --danger-soft-bg: color-mix(in srgb, var(--danger) 18%, var(--panel));
      --danger-soft-fg: color-mix(in srgb, var(--danger) 78%, var(--ink));
      --danger-soft-border: color-mix(in srgb, var(--danger) 44%, var(--line));
      --todo-item-bg: var(--panel);
      --todo-item-hover-bg: color-mix(in srgb, var(--status-info) 14%, var(--panel));
      --todo-disabled-bg: var(--sys-gray5);
      --todo-disabled-fg: var(--sys-gray1);
      --todo-check-border: var(--sys-gray3);
      --todo-alert-yellow: color-mix(in srgb, var(--status-warning) 70%, var(--sys-black));
      --todo-alert-red: color-mix(in srgb, var(--status-danger) 74%, var(--sys-black));
      --status-link-hover-bg: color-mix(in srgb, var(--gold) 22%, var(--panel));
      /* システムカラートーン（Gray系以外）: Strong 固定 */
      --sys-color-red: #FF0000;
      --sys-color-orange: #FF8000;
      --sys-color-yellow: #FFFF00;
      --sys-color-yellow-green: #80FF00;
      --sys-color-green: #00FF00;
      --sys-color-spring-green: #00FF80;
      --sys-color-cyan: #00FFFF;
      --sys-color-azure: #0080FF;
      --sys-color-blue: #0000FF;
      --sys-color-indigo: #8000FF;
      --sys-color-purple: #FF00FF;
      --sys-color-pink: #FF0080;
      --status-success: var(--sys-color-green);
      --status-warning: var(--sys-color-yellow);
      --status-danger: var(--sys-color-red);
      --status-info: var(--sys-color-blue);
      --status-info-neutral: var(--sys-gray2);
      --status-info-neutral-soft: color-mix(in srgb, var(--sys-gray3) 34%, var(--panel));
      --theme-on-color: var(--sys-black);
      --tab-inactive-on-color: var(--sys-black);
      --nav-alert-ring: var(--action-border);
      --team-red: #C93A40;
      --team-green: #56A764;
      --team-yellowgreen: #A0C238;
      --team-blue: #0074BF;
      --toast-success-bg: #087F5B;
      --toast-error-bg: #C92A2A;
      --toast-warn-bg: #C92A2A;
      color: var(--ink);
    }

/* Final stadium theme overrides */
:root {
  --stadium-navy: #071626;
  --stadium-gold: #d8a43a;
  --stadium-gold-bright: #ffd36a;
  --theme-color: var(--stadium-gold);
  --theme-color-deep: #a86f17;
  --grass: var(--stadium-gold);
  --grass-deep: #a86f17;
  --gold: var(--stadium-gold-bright);
  --button-fg: #071626;
  --nav-alert-ring: rgba(255, 255, 255, .92);
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
    radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .22), transparent 34%),
    linear-gradient(180deg, #06111f 0, #071626 180px, #eef0f5 181px, #f4f5f8 100%) !important;
  background-attachment: fixed !important;
}

.hero {
  min-height: 128px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .44)),
    radial-gradient(circle at 9% 26%, rgba(255, 238, 190, .72) 0 2px, transparent 3px 82px),
    radial-gradient(circle at 91% 28%, rgba(255, 238, 190, .6) 0 2px, transparent 3px 90px),
    linear-gradient(135deg, #071626 0%, #102b47 52%, #06111f 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 211, 106, .52);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12), 0 14px 30px rgba(5, 13, 24, .18);
}

.hero::before {
  background:
    linear-gradient(115deg, transparent 0 8%, rgba(255, 211, 106, .22) 8.5%, transparent 10% 100%),
    linear-gradient(295deg, transparent 0 9%, rgba(255, 211, 106, .16) 9.6%, transparent 11% 100%) !important;
  opacity: .75;
}

.hero::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stadium-gold-bright), transparent);
}

#heroTournamentName,
.hero-copy,
.hero-notice-row {
  color: #fff !important;
}

#heroTournamentName {
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 18px rgba(255, 211, 106, .22);
}

.user-pill,
.close-modal {
  border-color: rgba(255, 211, 106, .48) !important;
  background: rgba(6, 17, 31, .78) !important;
  color: var(--stadium-gold-bright) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.menu-bars i {
  background: currentColor !important;
}

.shell {
  margin-top: -18px;
}

.nav {
  border: 1px solid rgba(216, 164, 58, .42) !important;
  background: linear-gradient(180deg, rgba(11, 28, 47, .96), rgba(6, 17, 31, .96)) !important;
  box-shadow: 0 10px 24px rgba(5, 13, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.nav button {
  color: rgba(255, 255, 255, .9) !important;
  background: transparent !important;
  border-right-color: rgba(216, 164, 58, .28) !important;
  font-weight: 900;
}

.nav button.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 8px 18px rgba(216, 164, 58, .22);
}

.nav.nav-pinned button.active::after {
  color: #06111f !important;
}

.nav-alert,
.badge.gold,
.badge.warn,
.badge.ok {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  border-color: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
}

.panel,
.admin-section,
.history-toggle,
.history-item,
.rule-overview-card,
.rule-card,
.table-wrap {
  border-color: rgba(7, 22, 38, .14) !important;
  background: rgba(8, 22, 38, .88) !important;
  color: #eef5ff !important;
  box-shadow: 0 8px 22px rgba(9, 28, 47, .08);
}

.panel-head,
.admin-accordion-head,
.ranking-toolbar,
.history-head,
.rule-overview-head,
.rule-card-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(6, 17, 31, .72) !important;
  color: #eef5ff !important;
}

.todo-toggle-button,
.modal-actions .primary,
.profile-edit-button,
.settings-actions button,
.school-admin-actions button.primary,
.user-admin-actions button.primary,
.tournament-card-actions button,
.tournament-picker-row button,
.create-tournament-box button {
  border-color: var(--stadium-gold) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.sort-buttons button.active,
.odds-buttons button.active,
.schedule-mode button.active,
.pick-tournament-tabs button.active,
.system-settings-tabs button.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  border-color: var(--stadium-gold) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(216, 164, 58, .38);
  border-color: var(--stadium-gold) !important;
}

.match-modal {
  background: rgba(2, 7, 14, .62) !important;
  backdrop-filter: blur(2px);
}

.match-dialog {
  border: 1px solid rgba(216, 164, 58, .38) !important;
  background: linear-gradient(180deg, rgba(249, 250, 253, .98), rgba(236, 239, 245, .98)) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .34);
}

.match-dialog-head {
  background: linear-gradient(180deg, #071626, #102b47) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(216, 164, 58, .52) !important;
}

.match-dialog-head h2 {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.match-dialog-head .close-modal {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}

.daily-game,
.tracked-game,
.todo-item,
.school-row,
.user-admin-row,
.tournament-summary-match,
.simple-user-row {
  background: rgba(8, 22, 38, .78) !important;
  border-color: rgba(255, 211, 106, .18) !important;
  color: #eef5ff !important;
}

th {
  background: rgba(7, 22, 38, .08) !important;
}

@media (max-width: 560px) {
  .hero {
    min-height: 132px;
  }

  .shell {
    margin-top: -16px;
  }

  .nav {
    margin-inline: 14px;
  }
}

/* Final dark-panel pass: keep the stadium background continuous. */
body {
  --ink: #eef5ff;
  --muted: rgba(238, 245, 255, .62);
  --line: rgba(255, 211, 106, .24);
  --panel: rgba(8, 22, 38, .9);
  --action-bg: rgba(255, 255, 255, .94);
  --action-fg: #06111f;
  --action-border: var(--stadium-gold);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
    radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .22), transparent 34%),
    linear-gradient(180deg, #06111f 0, #071626 180px, #081626 100%) !important;
  color: var(--ink) !important;
}

.app,
.shell,
.views-viewport,
.view {
  background: transparent !important;
}

.panel,
.admin-section,
.history-toggle,
.history-item,
.rule-overview-card,
.rule-card,
.table-wrap,
.simple-settings-panel,
.tournament-summary-round-group,
.simple-school-section,
.ranking-extra,
.cards {
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(8, 22, 38, .88) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel-head,
.admin-accordion-head,
.ranking-toolbar,
.history-head,
.rule-overview-head,
.rule-card-head,
.tournament-summary-round-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(6, 17, 31, .72) !important;
  color: var(--ink) !important;
}

.panel-title,
.admin-accordion-head strong,
.history-head strong,
.rule-overview-head strong,
.rule-card-head strong,
.tournament-summary-round-head strong,
.panel h2,
.admin-section h2,
.history-toggle strong,
.panel p,
.panel span,
.admin-section p,
.admin-section span {
  color: var(--ink) !important;
}

.admin-accordion-head span,
.panel-head span,
.history-head span,
.rule-overview-head span,
.rule-card-head span,
.muted {
  color: var(--muted) !important;
}

.user-menu-popover {
  border-color: rgba(255, 211, 106, .36) !important;
  background: rgba(6, 17, 31, .96) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}

.user-menu-name,
.user-menu-item {
  color: #fff !important;
}

.user-menu-item {
  background: transparent !important;
  border-color: rgba(255, 211, 106, .18) !important;
}

.user-menu-item:hover {
  background: rgba(255, 211, 106, .12) !important;
}

.todo-toggle-button,
.admin-accordion-head button,
.history-head button,
.rule-overview-head button,
.rule-card-head button,
.tournament-summary-round-head button,
button[data-simple-section-toggle],
button[data-admin-section-toggle] {
  border: 1px solid var(--stadium-gold) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #06111f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44);
}

.todo-toggle-button:hover,
.admin-accordion-head button:hover,
.history-head button:hover,
.rule-overview-head button:hover,
.rule-card-head button:hover,
.tournament-summary-round-head button:hover,
button[data-simple-section-toggle]:hover,
button[data-admin-section-toggle]:hover {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
}

/* Final dark-panel pass: keep the stadium background continuous. */
body {
  --ink: #eef5ff;
  --muted: rgba(238, 245, 255, .62);
  --line: rgba(255, 211, 106, .24);
  --panel: rgba(8, 22, 38, .9);
  --action-bg: rgba(255, 255, 255, .94);
  --action-fg: #06111f;
  --action-border: var(--stadium-gold);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
    radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .22), transparent 34%),
    linear-gradient(180deg, #06111f 0, #071626 180px, #081626 100%) !important;
  color: var(--ink) !important;
}

.app,
.shell,
.views-viewport,
.view {
  background: transparent !important;
}

.panel,
.admin-section,
.history-toggle,
.history-item,
.rule-overview-card,
.rule-card,
.table-wrap,
.simple-settings-panel,
.tournament-summary-round-group,
.simple-school-section,
.ranking-extra,
.cards {
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(8, 22, 38, .88) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel-head,
.admin-accordion-head,
.ranking-toolbar,
.history-head,
.rule-overview-head,
.rule-card-head,
.tournament-summary-round-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(6, 17, 31, .72) !important;
  color: var(--ink) !important;
}

.panel-title,
.admin-accordion-head strong,
.history-head strong,
.rule-overview-head strong,
.rule-card-head strong,
.tournament-summary-round-head strong,
.panel h2,
.admin-section h2,
.history-toggle strong,
.panel p,
.panel span,
.admin-section p,
.admin-section span {
  color: var(--ink) !important;
}

.admin-accordion-head span,
.panel-head span,
.history-head span,
.rule-overview-head span,
.rule-card-head span,
.muted {
  color: var(--muted) !important;
}

.user-menu-popover {
  border-color: rgba(255, 211, 106, .36) !important;
  background: rgba(6, 17, 31, .96) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}

.user-menu-name,
.user-menu-item {
  color: #fff !important;
}

.user-menu-item {
  background: transparent !important;
  border-color: rgba(255, 211, 106, .18) !important;
}

.user-menu-item:hover {
  background: rgba(255, 211, 106, .12) !important;
}

.todo-toggle-button,
.admin-accordion-head button,
.history-head button,
.rule-overview-head button,
.rule-card-head button,
.tournament-summary-round-head button,
button[data-simple-section-toggle],
button[data-admin-section-toggle] {
  border: 1px solid var(--stadium-gold) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #06111f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44);
}

.todo-toggle-button:hover,
.admin-accordion-head button:hover,
.history-head button:hover,
.rule-overview-head button:hover,
.rule-card-head button:hover,
.tournament-summary-round-head button:hover,
button[data-simple-section-toggle]:hover,
button[data-admin-section-toggle]:hover {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
}

/* Stadium dark surface refinement */
body {
  --ink: #eef5ff;
  --muted: rgba(238, 245, 255, .62);
  --line: rgba(255, 211, 106, .24);
  --panel: rgba(8, 22, 38, .9);
  --surface-input-bg: rgba(255, 255, 255, .94);
  --surface-input-border: rgba(255, 211, 106, .32);
  --action-bg: rgba(255, 255, 255, .94);
  --action-bg-hover: rgba(255, 211, 106, .16);
  --action-fg: #06111f;
  --action-border: var(--stadium-gold);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
    radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .22), transparent 34%),
    linear-gradient(180deg, #06111f 0, #071626 180px, #081626 100%) !important;
  color: var(--ink) !important;
}

.app,
.views-viewport,
.view {
  background: transparent !important;
}

.shell {
  background: transparent !important;
}

.panel,
.admin-section,
.history-toggle,
.history-item,
.rule-overview-card,
.rule-card,
.table-wrap,
.simple-settings-panel,
.tournament-summary-round-group,
.simple-school-section {
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(8, 22, 38, .88) !important;
  color: var(--ink) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.panel-head,
.admin-accordion-head,
.ranking-toolbar,
.history-head,
.rule-overview-head,
.rule-card-head,
.tournament-summary-round-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(6, 17, 31, .72) !important;
  color: var(--ink) !important;
}

.panel-title,
.admin-accordion-head strong,
.history-head strong,
.rule-overview-head strong,
.rule-card-head strong,
.tournament-summary-round-head strong,
.panel h2,
.admin-section h2,
.history-toggle strong {
  color: var(--ink) !important;
}

.panel span,
.panel p,
.admin-section span,
.admin-section p,
.history-toggle span,
.rule-card span,
.rule-card p,
.rule-overview-card span,
.rule-overview-card p {
  color: inherit;
}

.admin-accordion-head span,
.panel-head span,
.history-head span,
.rule-overview-head span,
.rule-card-head span {
  color: var(--muted) !important;
}

.user-menu-popover {
  border-color: rgba(255, 211, 106, .36) !important;
  background: rgba(6, 17, 31, .96) !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
}

.user-menu-name,
.user-menu-item {
  color: #fff !important;
}

.user-menu-item {
  background: transparent !important;
  border-color: rgba(255, 211, 106, .18) !important;
}

.user-menu-item:hover {
  background: rgba(255, 211, 106, .12) !important;
}

.todo-toggle-button,
.admin-accordion-head button,
.history-head button,
.rule-overview-head button,
.rule-card-head button,
.tournament-summary-round-head button,
button[data-simple-section-toggle],
button[data-admin-section-toggle] {
  border: 1px solid var(--stadium-gold) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #06111f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44);
}

.todo-toggle-button:hover,
.admin-accordion-head button:hover,
.history-head button:hover,
.rule-overview-head button:hover,
.rule-card-head button:hover,
.tournament-summary-round-head button:hover,
button[data-simple-section-toggle]:hover,
button[data-admin-section-toggle]:hover {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
}

input,
select,
textarea {
  color: #06111f !important;
}

    /* Rich menu inspired stadium theme */
    :root {
      --stadium-navy: #071626;
      --stadium-navy-2: #0d2238;
      --stadium-blue: #132f4f;
      --stadium-gold: #d8a43a;
      --stadium-gold-bright: #ffd36a;
      --stadium-gold-soft: rgba(216, 164, 58, .18);
      --stadium-panel: rgba(255, 255, 255, .94);
      --stadium-panel-strong: rgba(255, 255, 255, .98);
      --theme-color: var(--stadium-gold);
      --theme-color-deep: #a86f17;
      --grass: var(--stadium-gold);
      --grass-deep: #a86f17;
      --gold: var(--stadium-gold-bright);
      --button-fg: #071626;
      --nav-alert-ring: rgba(255, 255, 255, .92);
    }

    body {
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 5%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
        radial-gradient(circle at 88% 10%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
        radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .2), transparent 34%),
        linear-gradient(180deg, #06111f 0, var(--stadium-navy) 180px, #eef0f5 181px, #f4f5f8 100%);
      background-attachment: fixed;
    }

    .hero {
      min-height: 128px;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .44)),
        radial-gradient(circle at 9% 26%, rgba(255, 238, 190, .72) 0 2px, transparent 3px 82px),
        radial-gradient(circle at 91% 28%, rgba(255, 238, 190, .6) 0 2px, transparent 3px 90px),
        linear-gradient(135deg, #071626 0%, #102b47 52%, #06111f 100%);
      color: #fff;
      border-bottom: 1px solid rgba(255, 211, 106, .5);
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12), 0 14px 30px rgba(5, 13, 24, .18);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 0 8%, rgba(255, 211, 106, .22) 8.5%, transparent 10% 100%),
        linear-gradient(295deg, transparent 0 9%, rgba(255, 211, 106, .16) 9.6%, transparent 11% 100%);
      opacity: .75;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--stadium-gold-bright), transparent);
      opacity: .88;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      padding-top: 26px;
      padding-bottom: 26px;
    }

    #heroTournamentName {
      color: #fff;
      text-shadow: 0 2px 0 rgba(0, 0, 0, .28), 0 0 18px rgba(255, 211, 106, .2);
      font-weight: 900;
    }

    .hero-copy,
    .hero-notice-row {
      color: rgba(255, 255, 255, .84);
    }

    .user-pill,
    .close-modal {
      border-color: rgba(255, 211, 106, .48);
      background: rgba(6, 17, 31, .78);
      color: var(--stadium-gold-bright);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .menu-bars i {
      background: currentColor;
    }

    .shell {
      margin-top: -18px;
    }

    .nav {
      border: 1px solid rgba(216, 164, 58, .42);
      background: linear-gradient(180deg, rgba(11, 28, 47, .96), rgba(6, 17, 31, .96));
      box-shadow: 0 10px 24px rgba(5, 13, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .09);
    }

    .nav button {
      color: rgba(255, 255, 255, .88);
      background: transparent;
      border-right-color: rgba(216, 164, 58, .28);
      font-weight: 900;
    }

    .nav button.active {
      background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold));
      color: #06111f;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 8px 18px rgba(216, 164, 58, .22);
    }

    .nav.nav-pinned button.active::after {
      color: #06111f;
    }

    .nav-alert,
    .badge.gold,
    .badge.warn,
    .badge.ok {
      background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold));
      color: #06111f;
      border-color: rgba(255, 255, 255, .58);
      box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
    }

    .panel,
    .admin-section,
    .history-toggle,
    .history-item,
    .rule-overview-card,
    .rule-card,
    .table-wrap {
      border-color: rgba(7, 22, 38, .14);
      background: var(--stadium-panel);
      box-shadow: 0 8px 22px rgba(9, 28, 47, .08);
    }

    .panel-head,
    .admin-accordion-head,
    .ranking-toolbar,
    .history-head,
    .rule-overview-head,
    .rule-card-head {
      border-bottom-color: rgba(7, 22, 38, .12);
      background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(248, 249, 252, .72));
    }

    .panel-title,
    .admin-accordion-head strong,
    .history-head strong,
    .rule-overview-head strong,
    .rule-card-head strong {
      color: #06111f;
    }

    button,
    .todo-toggle-button,
    .profile-edit-button,
    .settings-actions button,
    .modal-actions button,
    .school-admin-actions button,
    .user-admin-actions button,
    .tournament-card-actions button,
    .tournament-picker-row button,
    .create-tournament-box button {
      border-radius: 0;
    }

    button:not(:disabled),
    .profile-edit-button:not(:disabled) {
      transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    button:not(:disabled):active {
      transform: translateY(1px);
    }

    .todo-toggle-button,
    .modal-actions .primary,
    .profile-edit-button,
    .settings-actions button,
    .school-admin-actions button.primary,
    .user-admin-actions button.primary,
    .tournament-card-actions button,
    .tournament-picker-row button,
    .create-tournament-box button {
      border-color: var(--stadium-gold);
      background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold));
      color: #06111f;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    }

    .sort-buttons,
    .odds-buttons,
    .schedule-mode,
    .pick-tournament-tabs,
    .system-settings-tabs {
      border-color: rgba(7, 22, 38, .16);
      background: rgba(7, 22, 38, .06);
    }

    .sort-buttons button.active,
    .odds-buttons button.active,
    .schedule-mode button.active,
    .pick-tournament-tabs button.active,
    .system-settings-tabs button.active {
      background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold));
      color: #06111f;
      border-color: var(--stadium-gold);
    }

    input,
    select,
    textarea {
      border-color: rgba(7, 22, 38, .22);
      background: var(--stadium-panel-strong);
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid rgba(216, 164, 58, .38);
      border-color: var(--stadium-gold);
    }

    .match-modal {
      background: rgba(2, 7, 14, .62);
      backdrop-filter: blur(2px);
    }

    .match-dialog {
      border: 1px solid rgba(216, 164, 58, .38);
      background: linear-gradient(180deg, rgba(249, 250, 253, .98), rgba(236, 239, 245, .98));
      box-shadow: 0 20px 54px rgba(0, 0, 0, .34);
    }

    .match-dialog-head {
      background: linear-gradient(180deg, #071626, #102b47);
      color: #fff;
      border-bottom: 1px solid rgba(216, 164, 58, .52);
    }

    .match-dialog-head h2 {
      color: #fff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    }

    .match-dialog-head .close-modal {
      background: rgba(255, 255, 255, .1);
      color: #fff;
    }

    .daily-game,
    .tracked-game,
    .todo-item,
    .school-row,
    .user-admin-row,
    .tournament-summary-match,
    .simple-user-row {
      background: rgba(255, 255, 255, .76);
      border-color: rgba(7, 22, 38, .12);
    }

    .daily-team.winner,
    .game-score .winner,
    .top-tournament-school.is-picked,
    .pick-source-school-button.is-primary-selected,
    .pick-source-school-button.is-final-added {
      color: #c42121 !important;
    }

    .top-tournament-line,
    .pick-tournament-line,
    .top-tournament-connector,
    .pick-tournament-connector {
      stroke: rgba(7, 22, 38, .16);
    }

    th {
      background: rgba(7, 22, 38, .08);
    }

    .ranking-table,
    table {
      background: rgba(255, 255, 255, .9);
    }

    @media (max-width: 560px) {
      .hero {
        min-height: 132px;
      }

      .hero-inner {
        padding-top: 24px;
        padding-bottom: 28px;
      }

      .shell {
        margin-top: -16px;
      }

      .nav {
        margin-inline: 14px;
      }
    }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: none;
      place-items: center;
      padding: 24px;
      background: var(--sys-gray6);
    }

    .auth-gate.open {
      display: grid;
      color: var(--ink);
    }

    .boot-gate {
      position: fixed;
      inset: 0;
      z-index: 280;
      display: grid;
      place-items: center;
      padding: 24px;
      background: var(--sys-gray6);
    }

    .boot-gate[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .boot-card {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      padding: 28px 24px 24px;
      background: var(--panel);
      display: grid;
      place-items: center;
      gap: 10px;
      text-align: center;
    }

    .boot-spinner {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, var(--grass) 20%, transparent);
      border-top-color: var(--grass);
      animation: boot-spin .9s linear infinite;
      color: var(--ink);
    }

    .boot-title {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      color: var(--ink);
    }

    .boot-message {
      margin: 0;
      font-size: 14px;
      color: var(--muted);
    }

    @keyframes boot-spin {
      to {
        transform: rotate(360deg);
        color: var(--ink);
      }
    }

    .auth-card {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      padding: 28px 32px 24px;
      background: var(--panel);
      display: flex;
      flex-direction: column;
    }

    .auth-card .eyebrow {
      order: 1;
      margin: 0 0 28px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 0;
      color: var(--ink);
      line-height: 1.1;
    }

    .auth-card button {
      order: 2;
      min-height: 46px;
      border: 1px solid var(--grass);
      padding: 8px 22px;
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      font-weight: 900;
      font-size: 16px;
      margin: 0 0 12px;
    }

    .auth-card h2 {
      margin: 0;
      font-size: 24px;
      display: none;
      color: var(--ink);
    }

    .auth-card #authGateMessage {
      order: 3;
      margin: 0;
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: 0;
      color: var(--ink);
    }

    @media (max-width: 560px) {
      .auth-card {
        padding: 22px 20px 20px;
        color: var(--ink);
      }

      .auth-card .eyebrow {
        font-size: 24px;
        color: var(--ink);
      }

      .auth-card button {
        font-size: 16px;
        color: var(--ink);
      }

      .auth-card #authGateMessage {
        font-size: 16px;
        color: var(--ink);
      }
    }

    * {
      box-sizing: border-box;
      color: var(--ink);
    }

    body {
      margin: 0;
      background: linear-gradient(180deg, var(--sys-gray6) 0, var(--sys-white) 320px, var(--sys-gray6) 100%);
      color: var(--ink);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      touch-action: manipulation;
    }

    body.dark-mode {
      --sys-gray1: #8E8E93;
      --sys-gray2: #636366;
      --sys-gray3: #48484A;
      --sys-gray4: #3A3A3C;
      --sys-gray5: #2C2C2E;
      --sys-gray6: #1C1C1E;
      --ink: #FFFFFF;
      --muted: #AEAEB2;
      --line: var(--sys-gray4);
      --panel: var(--sys-gray6);
      --sky: var(--sys-gray6);
      --chalk: var(--sys-black);
      --danger: #FF453A;
      --ok: var(--grass);
      --surface-overlay: rgba(0, 0, 0, .72);
      --surface-strong-bg: var(--sys-gray6);
      --surface-strong-bg-2: var(--sys-gray5);
      --surface-strong-bg-3: var(--sys-gray4);
      --surface-strong-border: var(--sys-gray3);
      --surface-strong-text: #FFFFFF;
      --surface-strong-muted: #AEAEB2;
      --surface-strong-accent: #0A84FF;
      --surface-input-bg: var(--sys-gray6);
      --surface-input-border: var(--sys-gray3);
      --action-bg: var(--sys-gray5);
      --action-bg-hover: var(--sys-gray4);
      --action-fg: var(--ink);
      --action-border: var(--line);
      --badge-default-bg: var(--sys-gray5);
      --badge-default-fg: var(--ink);
      --badge-default-border: var(--sys-gray3);
      --danger-soft-bg: color-mix(in srgb, var(--danger) 26%, var(--sys-black));
      --danger-soft-fg: color-mix(in srgb, var(--danger) 72%, var(--sys-white));
      --danger-soft-border: color-mix(in srgb, var(--danger) 48%, var(--line));
      --todo-item-bg: var(--panel);
      --todo-item-hover-bg: color-mix(in srgb, var(--status-info) 16%, var(--panel));
      --todo-disabled-bg: var(--sys-gray5);
      --todo-disabled-fg: var(--sys-gray1);
      --todo-check-border: var(--sys-gray3);
      --todo-alert-yellow: color-mix(in srgb, var(--status-warning) 72%, var(--sys-white));
      --todo-alert-red: color-mix(in srgb, var(--status-danger) 72%, var(--sys-white));
      --status-link-hover-bg: var(--sys-gray5);
      --theme-on-color: var(--sys-white);
      --tab-inactive-on-color: var(--sys-white);
      --nav-alert-ring: var(--action-border);
      background: linear-gradient(180deg, var(--sys-black) 0, var(--sys-gray6) 320px, var(--sys-black) 100%);
      color: var(--ink);
    }

    body.contrast-accessible {
      --sys-gray1: #6C6C70;
      --sys-gray2: #8E8E93;
      --sys-gray3: #AEAEB2;
      --sys-gray4: #BCBCC0;
      --sys-gray5: #D8D8DC;
      --sys-gray6: #EBEBF0;
      --theme-on-color: var(--sys-white);
      --muted: var(--sys-gray1);
      --line: var(--sys-gray3);
      --surface-strong-border: var(--sys-gray2);
      --surface-input-border: var(--sys-gray2);
      color: var(--ink);
    }

    body.dark-mode.contrast-accessible {
      --sys-gray1: #AEAEB2;
      --sys-gray2: #7C7C80;
      --sys-gray3: #545456;
      --sys-gray4: #444446;
      --sys-gray5: #363638;
      --sys-gray6: #242426;
      --theme-on-color: var(--sys-black);
      --tab-inactive-on-color: var(--sys-white);
      --muted: var(--sys-gray1);
      --line: var(--sys-gray3);
      --surface-strong-border: var(--sys-gray2);
      --surface-input-border: var(--sys-gray2);
      color: var(--ink);
    }

    body.dark-mode .auth-gate,
    body.dark-mode .boot-gate {
      background: var(--sys-black);
    }

    body.dark-mode .auth-card,
    body.dark-mode .boot-card {
      background: var(--panel);
      border-color: var(--line);
    }

    body.dark-mode .auth-card .eyebrow,
    body.dark-mode .boot-title {
      color: var(--ink);
    }

    body.dark-mode .auth-card #authGateMessage,
    body.dark-mode .boot-message {
      color: var(--muted);
    }

    body.dark-mode .nav {
      border-color: color-mix(in srgb, var(--sys-white) 14%, transparent);
      background: color-mix(in srgb, var(--sys-black) 92%, transparent);
      box-shadow: 0 16px 46px color-mix(in srgb, var(--sys-black) 42%, transparent);
    }

    body.dark-mode .nav button:not(.active) {
      color: var(--tab-inactive-on-color);
    }

    body.dark-mode .panel,
    body.dark-mode .admin-section,
    body.dark-mode .history-toggle,
    body.dark-mode .table-wrap {
      background: var(--panel);
      border-color: var(--line);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--sys-black) 24%, transparent);
    }

    body.dark-mode .panel-head,
    body.dark-mode .admin-accordion-head {
      border-bottom-color: var(--line);
      color: var(--ink);
    }

    body.dark-mode .badge:not(.gold):not(.warn):not(.ok) {
      background: var(--badge-default-bg);
      border-color: var(--badge-default-border);
      color: var(--badge-default-fg);
    }

    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
      background: var(--surface-input-bg);
      border-color: var(--surface-input-border);
      color: var(--ink);
    }

    body.dark-mode .user-menu-popover {
      border-color: var(--surface-strong-border);
      background: var(--surface-strong-bg);
    }

    button,
    input,
    select {
      font: inherit;
      color: var(--ink);
    }

    .app {
      min-height: 100vh;
      visibility: hidden;
      touch-action: pan-y;
      color: var(--ink);
    }

    .app.ready {
      visibility: visible;
      color: var(--ink);
    }

    .hero {
      position: relative;
      z-index: 18;
      min-height: 126px;
      padding: 10px clamp(14px, 4vw, 34px) 48px;
      overflow: visible;
      color: var(--theme-on-color);
      background: var(--header-bg, var(--grass));
      border-bottom: 1px solid color-mix(in srgb, var(--sys-white) 16%, transparent);
    }

    .hero:before,
    .hero:after {
      content: none;
      display: none;
      color: var(--ink);
    }

    .hero-inner {
      position: relative;
      z-index: 30;
      max-width: 1180px;
      margin: 0 auto;
      padding-top: 0;
      transition: none;
      color: var(--ink);
    }

    .topbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 10px;
      min-height: 44px;
      height: 44px;
      margin-bottom: 0;
      pointer-events: none;
      color: var(--ink);
    }

    .brand {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
      letter-spacing: .02em;
      color: var(--ink);
    }

    .maintenance-header-badge {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 4px 12px;
      border: 1px solid var(--action-border);
      border-radius: 999px;
      background: var(--action-bg);
      color: var(--action-fg);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
      max-width: min(58vw, 340px);
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      user-select: none;
    }

    .maintenance-header-badge[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .mark {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 2px solid color-mix(in srgb, var(--sys-white) 86%, transparent);
      border-radius: 50%;
      background: var(--chalk);
      color: var(--clay);
      font-weight: 950;
    }

    .header-user-area {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 45;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 0;
      height: 44px;
      flex: 0 0 auto;
      pointer-events: auto;
      color: var(--ink);
    }

    .brand {
      pointer-events: auto;
      color: var(--ink);
    }

    .proxy-pill {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--action-border);
      border-radius: 999px;
      background: var(--action-bg);
      color: var(--action-fg);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      max-width: min(34vw, 220px);
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    .proxy-pill[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .user-menu {
      position: relative;
      z-index: 130;
      flex: 0 0 auto;
      color: var(--ink);
    }

    .user-pill {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--surface-strong-border);
      border-radius: 10px;
      background: var(--surface-strong-bg);
      backdrop-filter: blur(8px);
      cursor: pointer;
      color: var(--surface-strong-text);
    }

    .menu-bars {
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .menu-bars i {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
      color: var(--ink);
    }

    .user-menu-popover {
      position: fixed;
      left: 12px;
      top: 56px;
      z-index: 210;
      width: min(88vw, 300px);
      max-height: calc(100vh - 18px);
      overflow: auto;
      padding: 10px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      box-shadow: 0 18px 48px color-mix(in srgb, var(--sys-black) 38%, transparent);
      display: grid;
      gap: 8px;
    }

    .user-menu-popover[hidden] {
      display: none !important;
      color: var(--ink);
    }

    body.modal-layer-active .header-user-area {
      pointer-events: none;
      color: var(--ink);
    }

    body.modal-layer-active .user-menu-popover {
      display: none !important;
      color: var(--ink);
    }

    html.modal-layer-active,
    body.modal-layer-active {
      overflow: hidden;
      overscroll-behavior: none;
      color: var(--ink);
    }

    .user-menu-name {
      margin: 0;
      padding: 2px 4px 8px;
      border-bottom: 1px solid var(--surface-strong-border);
      color: var(--surface-strong-text);
      font-size: 14px;
      font-weight: 900;
    }

    .user-menu-item {
      min-height: 38px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      text-align: left;
      padding: 0 11px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .user-menu-item:hover {
      background: var(--action-bg-hover);
    }

    .user-menu-item.danger {
      border-color: var(--danger-soft-border);
      color: var(--danger-soft-fg);
      background: var(--danger-soft-bg);
    }

    .user-menu-theme-patterns {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 6px;
      padding: 2px 0;
    }

    .user-menu-theme-patterns[hidden] {
      display: none !important;
    }

    .user-menu-theme-chip {
      min-width: 0;
      min-height: 42px;
      border: 1px solid var(--action-border);
      background: var(--menu-theme-chip-bg, var(--action-bg));
      color: var(--menu-theme-chip-fg, var(--action-fg));
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      padding: 4px 2px;
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .user-menu-theme-chip::before {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--sys-white) 90%, transparent);
      background: var(--menu-theme-chip-color, var(--grass));
      box-shadow: 0 1px 4px color-mix(in srgb, var(--sys-black) 28%, transparent);
    }

    .user-menu-theme-chip.active {
      border-color: var(--surface-strong-accent);
      background: color-mix(in srgb, var(--menu-theme-chip-bg, var(--action-bg)) 72%, var(--surface-strong-accent));
      color: var(--menu-theme-chip-fg, var(--surface-strong-text));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-strong-accent) 34%, transparent);
    }

    h1 {
      max-width: 780px;
      margin: 9px 0 0;
      padding-right: 86px;
      font-size: clamp(24px, 6vw, 40px);
      line-height: 1.05;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      color: var(--theme-on-color);
    }

    .hero-copy {
      max-width: 680px;
      padding-right: 86px;
      margin: 8px 0 0;
      color: var(--theme-on-color);
      font-size: 13px;
      line-height: 1.45;
    }

    #heroTournamentName {
      margin-top: 9px;
      transition: none;
      color: var(--theme-on-color);
    }

    .hero.has-top-notice #heroTournamentName {
      margin-top: 9px;
      transition: none;
      color: var(--theme-on-color);
    }

    .hero-notice-row {
      display: none;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 680px;
      padding-right: 86px;
      margin-top: 8px;
      color: var(--ink);
    }

    .hero-notice-row:has(#maintenanceHeaderBadge:not([hidden])),
    .hero-notice-row:has(#proxyHeaderBadge:not([hidden])) {
      display: flex;
      color: var(--ink);
    }

    .shell {
      position: relative;
      z-index: 70;
      max-width: 1180px;
      margin: -54px auto 0;
      padding: 0 clamp(14px, 3vw, 26px) 42px;
      color: var(--ink);
    }

    .nav {
      position: relative;
      z-index: 75;
      padding: 8px;
      overflow: visible;
      border: 1px solid color-mix(in srgb, var(--sys-black) 12%, transparent);
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      backdrop-filter: blur(16px);
      box-shadow: 0 16px 46px color-mix(in srgb, var(--sys-black) 16%, transparent);
    }

    .nav-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: center;
      gap: 4px;
      width: 100%;
      color: var(--ink);
    }

    .nav button {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      padding: 0 10px;
      position: relative;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--tab-inactive-on-color);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: visible;
      transition: transform .16s ease, background-color .16s ease, color .16s ease;
    }

    .nav-label {
      display: inline-block;
      transition: transform .18s ease-out;
      will-change: transform;
      color: inherit;
    }

    .nav.dragging .nav-label {
      transition: none;
      color: inherit;
    }

    .nav.settling .nav-label {
      transition: transform .18s ease-out;
      color: inherit;
    }

    .nav-spacer {
      display: none;
      color: var(--ink);
    }

    .nav-alert {
      position: absolute;
      top: -9px;
      right: -11px;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--danger);
      color: var(--theme-on-color);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
      border: 2px solid var(--nav-alert-ring);
      box-shadow: 0 2px 7px color-mix(in srgb, var(--sys-black) 25%, transparent);
      pointer-events: none;
      z-index: 3;
    }

    .nav-alert[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .nav button.active {
      min-height: 38px;
      padding: 0 12px;
      background: var(--tab-active-bg, var(--grass));
      color: var(--theme-on-color);
      font-weight: 800;
      font-size: 13px;
      transform: translateY(-1px);
    }

    .nav.nav-pinned button.active::after {
      content: "▲";
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-52%);
      font-size: 10px;
      line-height: 1;
      color: var(--theme-on-color);
      opacity: .95;
      pointer-events: none;
    }

    .top-stack {
      display: grid;
      gap: 14px;
      color: var(--ink);
    }

    .view {
      display: none;
      padding-top: 22px;
      color: var(--ink);
    }

    .view.active {
      display: block;
      color: var(--ink);
    }

    .views-viewport {
      position: relative;
      overflow: hidden;
      color: var(--ink);
    }

    .views-viewport.dragging {
      min-height: var(--drag-height, 60vh);
      color: var(--ink);
    }

    .views-viewport.dragging .view.drag-pane {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      will-change: transform;
      color: var(--ink);
    }

    .views-viewport.settling .view.drag-pane {
      transition: transform .18s ease-out;
      color: var(--ink);
    }

    @keyframes viewSlideInLeft {
      from {
        opacity: .68;
        transform: translateX(28px);
        color: var(--ink);
      }

      to {
        opacity: 1;
        transform: translateX(0);
        color: var(--ink);
      }
    }

    @keyframes viewSlideInRight {
      from {
        opacity: .68;
        transform: translateX(-28px);
        color: var(--ink);
      }

      to {
        opacity: 1;
        transform: translateX(0);
        color: var(--ink);
      }
    }

    .view.slide-in-left>* {
      animation: viewSlideInLeft .24s ease-out 1;
      color: var(--ink);
    }

    .view.slide-in-right>* {
      animation: viewSlideInRight .24s ease-out 1;
      color: var(--ink);
    }

    @keyframes swipeCue {

      0%,
      100% {
        transform: translateX(0);
        color: var(--ink);
      }

      28% {
        transform: translateX(-42px);
        color: var(--ink);
      }

      56% {
        transform: translateX(0);
        color: var(--ink);
      }
    }

    @keyframes swipeCueNeighbor {

      0%,
      100% {
        transform: translateX(100%);
        color: var(--ink);
      }

      28% {
        transform: translateX(calc(100% - 42px));
        color: var(--ink);
      }

      56% {
        transform: translateX(100%);
        color: var(--ink);
      }
    }

    .views-viewport.swipe-cue {
      min-height: var(--cue-height, 60vh);
      color: var(--ink);
    }

    .views-viewport.swipe-cue .view.cue-current,
    .views-viewport.swipe-cue .view.cue-neighbor {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      will-change: transform;
      color: var(--ink);
    }

    .views-viewport.swipe-cue .view.cue-current {
      z-index: 2;
      animation: swipeCue 1.05s ease-in-out .35s 1;
      color: var(--ink);
    }

    .views-viewport.swipe-cue .view.cue-neighbor {
      z-index: 1;
      animation: swipeCueNeighbor 1.05s ease-in-out .35s 1;
      color: var(--ink);
    }

    body.maintenance-mode .hero,
    body.maintenance-mode .nav {
      display: none;
      color: var(--ink);
    }

    body.maintenance-mode .shell {
      max-width: 760px;
      margin: 0 auto;
      padding-top: 24px;
      color: var(--ink);
    }

    body.maintenance-mode .view {
      display: none !important;
      color: var(--ink);
    }

    body.maintenance-mode #maintenance {
      display: block !important;
      padding-top: 0;
      color: var(--ink);
    }

    .grid {
      display: grid;
      gap: 16px;
      color: var(--ink);
    }

    .grid.cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      color: var(--ink);
    }

    .grid.cols-2 {
      grid-template-columns: 1.1fr .9fr;
      color: var(--ink);
    }

    .grid.cols-2-even {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      color: var(--ink);
    }

    .panel {
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--sys-black) 8%, transparent);
    }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 52px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
    }

    .panel-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.3;
      color: var(--ink);
    }

    .panel-body {
      padding: 16px;
      color: var(--ink);
    }

    .metric {
      min-height: 136px;
      padding: 16px;
      border-left: 6px solid var(--grass);
      background: var(--panel);
    }

    .metric strong {
      display: block;
      margin-top: 10px;
      font-size: 34px;
      line-height: 1;
      color: var(--ink);
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid var(--badge-default-border);
      background: var(--badge-default-bg);
      color: var(--badge-default-fg);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
    }

    .badge.gold {
      border-color: var(--badge-gold-border);
      background: var(--badge-gold-bg);
      color: var(--badge-gold-fg);
    }

    .badge.warn {
      border-color: var(--badge-warn-border);
      background: var(--badge-warn-bg);
      color: var(--badge-warn-fg);
    }

    .badge.ok {
      border-color: var(--badge-ok-border);
      background: var(--badge-ok-bg);
      color: var(--badge-ok-fg);
    }

    .scoreboard {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 14px;
      min-height: 132px;
      padding: 18px;
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      border: 2px solid var(--surface-strong-border);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-strong-border) 42%, transparent);
    }

    .date-strip {
      display: grid;
      grid-template-columns: 42px 1fr 42px;
      align-items: center;
      min-height: 54px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      text-align: center;
    }

    .date-strip button {
      height: 100%;
      border: 0;
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      cursor: pointer;
      font-size: 34px;
      line-height: 1;
    }

    .date-strip strong {
      color: var(--surface-strong-text);
      font-size: 22px;
      font-weight: 900;
      cursor: pointer;
    }

    .schedule-date-modal .match-dialog {
      width: min(100%, 380px);
      max-height: 88vh;
      color: var(--ink);
    }

    .schedule-date-body {
      display: grid;
      gap: 10px;
      padding: 12px;
      border-top: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
    }

    .schedule-date-month-nav {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 40px;
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .schedule-date-month-nav button {
      min-height: 34px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
    }

    .schedule-date-month-nav button:disabled {
      opacity: .4;
      cursor: not-allowed;
      color: var(--ink);
    }

    .schedule-date-month-label {
      margin: 0;
      text-align: center;
      font-size: 16px;
      font-weight: 900;
      color: var(--surface-strong-text);
    }

    .schedule-date-weekdays {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
      color: var(--ink);
    }

    .schedule-date-weekday {
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      color: var(--surface-strong-muted);
      padding: 2px 0;
    }

    .schedule-date-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
      color: var(--ink);
    }

    .schedule-date-cell {
      min-height: 34px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      touch-action: manipulation;
    }

    .schedule-date-cell.outside {
      color: color-mix(in srgb, var(--surface-strong-text) 45%, transparent);
    }

    .schedule-date-cell.selected {
      border-color: var(--theme-color);
      background: var(--theme-color);
      color: var(--theme-on-color);
      font-weight: 900;
    }

    .schedule-date-cell.today:not(.selected) {
      border-color: color-mix(in srgb, var(--theme-color) 55%, var(--surface-strong-border));
    }

    .schedule-date-cell:disabled {
      cursor: not-allowed;
      opacity: .35;
      color: var(--ink);
    }

    .schedule-date-meta {
      min-height: 18px;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--surface-strong-muted);
    }

    .league-title {
      display: none;
      color: var(--ink);
    }

    .daily-games {
      display: grid;
      background: var(--surface-strong-bg);
      border: 1px solid var(--surface-strong-border);
      border-top: 0;
      color: var(--surface-strong-text);
      touch-action: pan-y;
    }

    .daily-game {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      min-height: 70px;
      padding: 8px;
      border-top: 1px solid var(--surface-strong-border);
      cursor: pointer;
      transition: transform .18s ease, opacity .18s ease;
      position: relative;
      color: var(--ink);
    }

    .tracked-panel .panel-body {
      padding: 0;
      color: var(--ink);
    }

    .tracked-games {
      display: grid;
      background: var(--surface-strong-bg);
      border: 1px solid var(--surface-strong-border);
      color: var(--surface-strong-text);
      width: 100%;
    }

    .tracked-game {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      min-height: 72px;
      padding: 8px;
      border-top: 1px solid var(--surface-strong-border);
      cursor: pointer;
      position: relative;
      color: var(--ink);
    }

    .tracked-game:first-child {
      border-top: 0;
      color: var(--ink);
    }

    .pick-badge {
      display: block;
      margin-top: 4px;
      border: 0;
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
    }

    .daily-games.slide-left .daily-game {
      transform: translateX(-18px);
      opacity: .45;
      color: var(--ink);
    }

    .daily-games.slide-right .daily-game {
      transform: translateX(18px);
      opacity: .45;
      color: var(--ink);
    }

    .round-badge {
      align-self: start;
      justify-self: start;
      padding: 2px 6px;
      border: 1px solid var(--surface-strong-border);
      border-radius: 2px;
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      font-size: 11px;
      font-weight: 800;
    }

    .game-main {
      display: grid;
      grid-template-rows: minmax(14px, auto) minmax(30px, auto) minmax(16px, auto);
      gap: 1px;
      text-align: center;
      align-content: center;
      color: var(--ink);
    }

    .venue-line {
      color: var(--surface-strong-muted);
      font-size: 12px;
    }

    .score-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--schedule-mid-col-width, 88px) minmax(0, 1fr);
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      padding-bottom: 4px;
      color: var(--ink);
    }

    .round-line {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 16px;
      color: var(--ink);
    }

    .round-line .round-badge {
      padding: 1px 6px;
      font-size: 10px;
      line-height: 1.2;
      color: var(--ink);
    }

    .daily-team {
      min-width: 0;
      position: relative;
      display: block;
      min-height: 20px;
      font-size: clamp(13px, 3.1vw, 18px);
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      color: var(--ink);
    }

    .daily-team .team-name {
      display: block;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      line-height: 1.1;
      color: var(--ink);
    }

    .team-sub {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 2px);
      color: var(--status-info-neutral);
      font-size: 10px;
      font-weight: 900;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }

    .score-line.time-row {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 28px;
      color: var(--ink);
    }

    .game-score {
      color: var(--surface-strong-text);
      font-size: clamp(16px, 4.8vw, 24px);
      font-weight: 900;
      line-height: 1;
      display: block;
      width: 100%;
      text-align: center;
    }

    .winner {
      color: var(--status-info-neutral);
    }

    .status-line {
      position: relative;
      color: var(--surface-strong-muted);
      font-size: 11px;
      line-height: 1.15;
      text-align: center;
      min-height: 16px;
    }

    .daily-team.has-pick .team-name,
    .tracked-game .daily-team.has-pick .team-name {
      color: var(--theme-color);
    }

    .attack-marker {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: var(--danger);
      font-weight: 950;
    }

    .attack-marker.right {
      left: calc(50% + 18px);
      color: var(--ink);
    }

    .attack-marker.left {
      right: calc(50% + 18px);
      color: var(--ink);
    }

    .live-badge {
      position: absolute;
      right: 8px;
      top: 8px;
      color: var(--danger);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
      pointer-events: none;
    }

    .sports-tabs {
      display: none;
      color: var(--ink);
    }

    .sports-tabs span {
      flex: 0 0 auto;
      font-weight: 900;
      color: var(--sys-gray6);
    }

    .sports-tabs .active {
      align-self: stretch;
      display: flex;
      align-items: center;
      border-bottom: 3px solid var(--gold);
      color: var(--gold);
    }

    .schedule-mode {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-bottom: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .schedule-mode button {
      min-height: 42px;
      border: 0;
      border-right: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
    }

    .schedule-mode button:last-child {
      border-right: 0;
      color: var(--ink);
    }

    .schedule-mode button.active {
      background: var(--grass);
      color: var(--theme-on-color);
    }

    .schedule-pane {
      display: none;
      color: var(--ink);
    }

    .schedule-pane.active {
      display: block;
      color: var(--ink);
    }

    .bracket-wrap {
      overflow-x: auto;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      color: var(--sys-black);
      -webkit-overflow-scrolling: touch;
    }

    .bracket-track {
      display: grid;
      grid-template-columns: repeat(5, minmax(172px, 1fr));
      gap: 10px;
      min-width: 900px;
      color: var(--ink);
    }

    .bracket-track.top-tournament-tree {
      display: block;
      min-width: 0;
      width: 100%;
    }

    .top-tournament-board {
      margin: 0;
    }

    .top-tournament-board .pick-tournament-match {
      cursor: pointer;
    }

    .top-tournament-school {
      pointer-events: none;
    }

    .top-access-tournament {
      position: relative;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      background: var(--panel);
    }

    .top-access-lines {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .top-access-lines line {
      stroke: color-mix(in srgb, var(--theme-color) 44%, var(--line));
      stroke-width: 2;
      stroke-linecap: square;
    }

    .top-entry-school,
    .top-match-card {
      position: absolute;
      z-index: 2;
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 900;
    }

    .top-entry-school {
      width: 72px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      font-size: 9px;
      line-height: 1;
    }

    .top-entry-school.seed {
      background: transparent;
    }

    .top-entry-school strong,
    .top-entry-school small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.05;
    }

    .top-entry-school small {
      margin-top: 1px;
      color: var(--muted);
      font-size: 7.2px;
    }

    .top-match-card {
      width: 44px;
      height: 22px;
      padding: 0 2px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--panel);
      color: var(--muted);
      font-size: 7.2px;
      line-height: 20px;
      cursor: pointer;
    }

    .bracket-round {
      display: grid;
      align-content: start;
      gap: 10px;
      color: var(--ink);
    }

    .bracket-round h3 {
      position: sticky;
      top: 0;
      z-index: 1;
      margin: 0;
      padding: 8px 6px;
      background: var(--surface-strong-bg);
      color: var(--gold);
      border-bottom: 1px solid var(--line);
      text-align: center;
      font-size: 15px;
    }

    .bracket-match {
      display: grid;
      gap: 6px;
      min-height: 92px;
      padding: 8px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      cursor: pointer;
    }

    .bracket-match.pending {
      opacity: .72;
      color: var(--ink);
    }

    .bracket-match-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--sys-gray2);
      font-size: 11px;
      font-weight: 900;
    }

    .bracket-team {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px;
      gap: 6px;
      align-items: center;
      min-height: 24px;
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
    }

    .bracket-team .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
    }

    .bracket-team .score {
      justify-self: end;
      color: var(--sys-gray6);
      font-size: 16px;
    }

    .bracket-team.winner {
      color: var(--gold);
    }

    .bracket-team.pick .name::after {
      content: " 指名校";
      color: var(--gold);
      font-size: 10px;
      font-weight: 900;
    }

    .admin-section {
      margin-top: 14px;
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .selected-tournament-fixed {
      padding: 14px;
      color: var(--ink);
    }

    .admin-accordion-head {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      background: var(--panel);
    }

    .admin-accordion-head h3 {
      margin: 0;
      color: var(--ink);
      font-weight: 950;
      font-size: 18px;
    }

    .accordion-action,
    .admin-accordion-toggle {
      min-width: 58px;
      min-height: 32px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
    }

    .accordion-action:hover,
    .admin-accordion-toggle:hover {
      background: var(--action-bg-hover);
    }

    .admin-accordion-body {
      display: none;
      padding: 0 14px 14px;
      color: var(--ink);
    }

    .admin-section.open>.admin-accordion-body {
      display: block;
      color: var(--ink);
    }

    .simple-settings-panel[hidden] {
      display: none;
    }

    .simple-settings-panel {
      border: 0;
      background: transparent;
    }

    .simple-settings-panel>.admin-accordion-body {
      padding: 0;
    }

    .simple-settings-controls {
      display: grid;
      gap: 10px;
      margin: 12px 0;
      color: var(--ink);
    }

    .simple-settings-controls label,
    .simple-display-template label,
    .simple-display-options label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .simple-filter-row,
    .simple-filter-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }

    .simple-filter-group {
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .simple-filter-group legend {
      padding: 0 4px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 950;
    }

    .simple-settings-controls input,
    .simple-settings-controls select,
    .simple-display-template input,
    .simple-display-template select {
      min-height: 36px;
      width: 100%;
      border: 1px solid var(--line);
      background: var(--sys-white);
      color: var(--ink);
      padding: 6px 8px;
      font: inherit;
      font-weight: 800;
    }

    .simple-settings-controls>label {
      max-width: 360px;
    }

    .simple-display-template {
      display: grid;
      gap: 8px;
      margin: 8px 0 12px;
      color: var(--ink);
    }

    .simple-display-template .simple-filter-row {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }

    .simple-display-template .accordion-action {
      min-height: 36px;
    }

    .simple-display-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 12px;
      color: var(--ink);
    }

    .simple-display-options label {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    .simple-settings-actions {
      display: flex;
      gap: 8px;
      margin: 12px 0 0;
    }

    .simple-settings-result {
      margin-top: 12px;
    }

    .simple-tournament-settings {
      display: grid;
      gap: 12px;
      margin-top: 12px;
      color: var(--ink);
    }

    .simple-inline-section {
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .simple-inline-head {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel);
    }

    .simple-inline-head h4 {
      margin: 0;
      color: var(--ink);
      font-size: 15px;
      font-weight: 950;
    }

    .simple-school-count {
      margin-bottom: 6px;
      color: var(--ink);
      font-weight: 950;
    }

    .simple-school-table-wrap {
      max-height: 54vh;
    }

    .simple-school-table th,
    .simple-school-table td {
      white-space: nowrap;
      text-align: left;
    }

    .muted-note {
      margin: 10px 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .school-admin-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .team-admin-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .team-fixed-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .team-fixed-card {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--team-card-color, var(--theme-color));
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--team-card-color, var(--theme-color)) 20%, var(--panel)),
          var(--panel) 48%);
    }

    .team-fixed-head {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--ink);
    }

    .team-fixed-swatch {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 76%, var(--sys-white));
      flex: 0 0 auto;
      color: var(--ink);
    }

    .team-fixed-slot {
      font-size: 12px;
      font-weight: 900;
      color: var(--muted);
    }

    .team-fixed-name {
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-fixed-members {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }

    .team-admin-tabs {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 8px;
      color: var(--ink);
    }

    .team-admin-tab {
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      padding: 6px;
      display: grid;
      gap: 2px;
      font-weight: 900;
      text-align: left;
      cursor: pointer;
      min-width: 0;
    }

    .team-admin-tab.active {
      border-color: var(--theme-color);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-color) 52%, transparent);
      background: color-mix(in srgb, var(--theme-color) 14%, var(--panel));
    }

    .team-admin-tab .slot {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.2;
    }

    .team-admin-tab .name {
      font-size: 11px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      color: var(--ink);
    }

    .team-admin-tab .chip {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 76%, var(--sys-white));
      justify-self: end;
      color: var(--ink);
    }

    .team-admin-editor-panel {
      margin-top: 8px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--team-card-color, var(--line));
      background: linear-gradient(90deg,
          color-mix(in srgb, var(--team-card-color, var(--panel)) 14%, var(--panel)),
          var(--panel) 48%);
      padding: 10px;
      display: grid;
      gap: 10px;
    }

    .team-admin-editor-panel label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .team-admin-editor-panel input[type="text"] {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 900;
      padding: 6px 8px;
    }

    .team-admin-fixed-color {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
    }

    .team-members-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 2px;
      color: var(--ink);
    }

    .team-member-row {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      padding: 8px;
      min-width: 0;
    }

    .team-member-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--theme-color);
      flex: 0 0 auto;
      color: var(--ink);
    }

    .team-member-row-main {
      display: grid;
      gap: 2px;
      min-width: 0;
      flex: 1 1 auto;
      color: var(--ink);
    }

    .team-member-row-main span {
      font-size: 13px;
      color: var(--ink);
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-member-meta {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-admin-modal-actions {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .team-admin-modal-actions button {
      min-height: 38px;
      border: 1px solid var(--line);
      background: var(--action-bg);
      color: var(--action-fg);
      font-weight: 900;
      cursor: pointer;
    }

    .team-admin-modal-actions button.primary {
      border-color: var(--theme-color);
      background: var(--theme-color);
      color: var(--theme-on-color);
    }

    .team-fixed-member-names {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.3;
      word-break: break-word;
    }

    .team-admin-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "heading delete"
        "name name"
        "colors colors";
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--team-card-color, var(--line));
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--team-card-color, var(--panel)) 20%, var(--panel)), var(--panel) 48%);
    }

    .team-admin-card label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .team-preview-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      width: fit-content;
      min-width: 82px;
      padding: 0 10px;
      background: var(--preview-team-color, var(--grass));
      color: var(--preview-text-color, var(--sys-white));
      font-size: 12px;
      font-weight: 950;
    }

    .team-admin-card .team-name-field {
      grid-area: name;
      color: var(--ink);
    }

    .team-title-row {
      grid-area: heading;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--grass);
      font-size: 12px;
      font-weight: 950;
    }

    .team-admin-card .team-delete {
      grid-area: delete;
      align-self: end;
      color: var(--ink);
    }

    .team-color-row {
      grid-area: colors;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px;
      gap: 8px;
      align-items: end;
      color: var(--ink);
    }

    .team-admin-card input[type="text"] {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      box-sizing: border-box;
      font-weight: 900;
    }

    .team-color-field {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 6px;
      align-items: center;
      color: var(--ink);
    }

    .team-color-field input[type="color"] {
      width: 34px;
      height: 36px;
      padding: 0;
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .team-recommend {
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      color: var(--ink);
      cursor: pointer;
      font-weight: 900;
    }

    .school-admin-card {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--theme-color);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--theme-color) 18%, var(--panel)), var(--panel) 46%);
    }

    .school-admin-card label:first-child {
      grid-column: 1 / -1;
      color: var(--ink);
    }

    .school-admin-card label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .school-admin-card input,
    .school-admin-card select {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      box-sizing: border-box;
      font-weight: 900;
    }

    .school-admin-card input:invalid {
      border-color: var(--danger);
      background: var(--danger-soft-bg);
    }

    .school-admin-card .school-card-action {
      min-height: 36px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-weight: 900;
    }

    .school-admin-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
      color: var(--ink);
    }

    .school-admin-actions button {
      min-height: 38px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-weight: 900;
    }

    .school-admin-actions #addSchoolButton {
      border-color: var(--theme-color);
      background: var(--theme-color);
      color: var(--theme-on-color);
    }

    .school-admin-actions button.primary {
      border-color: var(--grass);
      background: var(--grass);
      color: var(--sys-black);
    }

    .admin-readonly-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .admin-readonly-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 11px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--theme-color);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--theme-color) 18%, var(--panel)), var(--panel) 46%);
      font-size: 14px;
      font-weight: 800;
    }

    .school-admin-list .admin-readonly-item {
      border-left-color: var(--theme-color);
      background: var(--panel);
    }

    .admin-readonly-item>div:first-child {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .admin-readonly-item strong {
      display: block;
      margin: 0;
      font-size: 16px;
      line-height: 1.28;
      color: var(--ink);
    }

    .admin-readonly-item small {
      display: block;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
    }

    .admin-readonly-item .right {
      text-align: right;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      justify-self: end;
      color: var(--ink);
    }

    .tournament-summary-list .admin-readonly-item {
      border-left-color: var(--theme-color);
      background: var(--panel);
    }

    .tournament-summary-round-group+.tournament-summary-round-group {
      margin-top: 8px;
      color: var(--ink);
    }

    .tournament-summary-round-body {
      display: none;
      margin-top: 8px;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-summary-round-group.open>.tournament-summary-round-body {
      display: grid;
      color: var(--ink);
    }

    .simple-school-section {
      border: 1px solid var(--line);
      border-left: 5px solid var(--line);
      background: var(--panel);
    }

    .simple-school-section>.admin-readonly-item {
      border: 0;
      border-left: 0;
      background: transparent;
    }

    .simple-school-section>.tournament-summary-round-body {
      margin-top: 0;
      padding: 0 14px 14px;
    }

    #simpleSchoolListResult {
      display: contents;
    }

    .user-admin-list {
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .user-admin-card {
      display: grid;
      gap: 6px;
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-left: 5px solid var(--user-team-color, var(--line));
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--user-team-color, var(--panel)) 18%, var(--panel)), var(--panel) 46%);
    }

    .user-admin-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
      color: var(--ink);
    }

    .user-admin-head h3 {
      margin: 0;
      font-size: 15px;
      line-height: 1.15;
      color: var(--ink);
    }

    .user-admin-head small {
      display: block;
      margin-top: 1px;
      color: var(--ink);
      font-weight: 800;
      font-size: 11px;
      line-height: 1.2;
    }

    .user-admin-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 3px;
      color: var(--ink);
    }

    .user-admin-badges .badge {
      min-height: 20px;
      padding: 0 7px;
      font-size: 11px;
    }

    .user-admin-meta-row {
      display: grid;
      justify-items: end;
      gap: 4px;
      color: var(--ink);
    }

    .user-status-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      color: var(--ink);
    }

    .user-status-item {
      min-height: 44px;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      align-items: center;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      text-align: left;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.25;
      color: var(--ink);
      cursor: pointer;
      transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
    }

    .user-status-item:active {
      transform: translateY(1px);
      color: var(--ink);
    }

    .user-status-item[aria-disabled="true"] {
      cursor: default;
      color: var(--ink);
    }

    .user-status-item[aria-disabled="true"]:active {
      transform: none;
      color: var(--ink);
    }

    .user-status-item .status-label {
      display: block;
      color: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.1;
      writing-mode: horizontal-tb;
      text-orientation: mixed;
    }

    .user-status-grid .todo-check {
      width: 20px;
      height: 20px;
      border-width: 2px;
      font-size: 12px;
      color: var(--ink);
    }

    .user-status-grid .done .todo-check {
      border-color: var(--status-success);
      background: var(--status-success);
      color: var(--sys-black);
    }

    .user-status-grid .missing .todo-check {
      border-color: var(--status-warning);
      background: var(--status-warning);
      color: var(--sys-black);
    }

    .user-status-grid .pending .todo-check {
      border-color: var(--sys-gray2);
      background: transparent;
      color: transparent;
    }

    .user-pick-summary {
      display: grid;
      gap: 2px;
      color: var(--ink);
    }

    .user-pick-summary-line {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      align-items: start;
      gap: 6px;
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
      color: var(--ink);
      min-width: 0;
    }

    .user-pick-summary-line strong {
      color: var(--sys-gray1);
      white-space: nowrap;
    }

    .user-pick-summary-line span {
      display: block;
      min-width: 0;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-wrap: normal;
      word-break: normal;
    }

    .user-status-item.done {
      border-color: color-mix(in srgb, var(--status-success) 52%, var(--line));
      background: color-mix(in srgb, var(--status-success) 16%, var(--panel));
    }

    .user-status-item.missing {
      border-color: color-mix(in srgb, var(--status-warning) 60%, var(--line));
      background: color-mix(in srgb, var(--status-warning) 20%, var(--panel));
    }

    .user-status-item.pending {
      background: var(--todo-disabled-bg);
      color: var(--todo-disabled-fg);
    }

    .user-status-item.pending .status-label {
      color: var(--todo-disabled-fg);
    }

    body.dark-mode .user-status-item.done,
    body.dark-mode .user-status-item.missing,
    body.dark-mode .user-status-item.pending {
      color: var(--sys-white);
    }

    body.dark-mode .user-status-item.done .status-label,
    body.dark-mode .user-status-item.missing .status-label,
    body.dark-mode .user-status-item.pending .status-label {
      color: var(--sys-white);
    }

    body.dark-mode .user-status-grid .done .todo-check,
    body.dark-mode .user-status-grid .missing .todo-check {
      color: var(--sys-black);
    }

    #userValidation {
      display: none !important;
      color: var(--ink);
    }

    .user-admin-controls {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      color: var(--ink);
    }

    .user-admin-controls label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .user-admin-controls select {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      font-weight: 900;
    }

    .user-admin-actions {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      color: var(--ink);
    }

    .user-admin-actions button {
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      cursor: pointer;
      font-weight: 900;
      font-size: 12px;
    }

    .user-admin-actions button.primary {
      border-color: var(--grass);
      background: var(--grass);
      color: var(--sys-black);
    }

    .user-admin-actions button.warn {
      border-color: var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
    }

    .submission-detail {
      display: grid;
      gap: 12px;
      padding: 14px;
      color: var(--ink);
    }

    .submission-detail section {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-2);
      padding: 10px;
    }

    .submission-detail section h3 {
      margin: 0;
      font-size: 15px;
      color: var(--ink);
    }

    .submission-headline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .submission-pick-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .submission-pick-list li {
      min-height: 34px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 0 10px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-text);
      font-weight: 800;
      font-size: 13px;
    }

    .submission-pick-list li .pick-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--ink);
    }

    .submission-pick-list li .pick-school {
      overflow-wrap: anywhere;
      color: var(--ink);
    }

    .submission-pick-list li .pick-right {
      color: var(--surface-strong-muted);
      font-size: 12px;
      text-align: right;
      white-space: nowrap;
    }

    .submission-pick-list li .pick-order {
      color: var(--surface-strong-muted);
      font-size: 12px;
      min-width: 34px;
    }

    .submission-table-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 0 10px 4px;
      color: var(--surface-strong-muted);
      font-size: 11px;
      font-weight: 900;
      border-bottom: 1px solid var(--surface-strong-border);
    }

    .submission-table-head span:last-child {
      text-align: right;
      white-space: nowrap;
      color: var(--ink);
    }

    .submission-empty {
      margin: 0;
      color: var(--surface-strong-muted);
      font-size: 13px;
    }

    .submission-editor {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--surface-strong-border);
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .submission-editor h4 {
      margin: 0;
      font-size: 13px;
      color: var(--surface-strong-muted);
    }

    .submission-editor-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .submission-editor-list li {
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .submission-editor-list .slot-label {
      font-size: 12px;
      font-weight: 900;
      color: var(--surface-strong-muted);
    }

    .submission-editor-list select {
      width: 100%;
      min-height: 32px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-text);
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
    }

    .submission-editor-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .submission-editor-actions button {
      min-height: 36px;
      border: 1px solid var(--line);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      color: var(--ink);
    }

    .submission-editor-actions .save {
      background: var(--theme-color);
      color: var(--theme-on-color);
      border-color: color-mix(in srgb, var(--theme-color) 70%, var(--line) 30%);
    }

    .submission-editor-actions .clear {
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-text);
      border-color: var(--line);
    }

    .submission-editor-note {
      margin: 0;
      font-size: 12px;
      color: var(--surface-strong-muted);
      white-space: pre-line;
    }

    .submission-prediction-card {
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .submission-prediction-score {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      font-weight: 900;
      font-size: 16px;
      color: var(--ink);
    }

    .submission-prediction-score .side {
      font-size: 13px;
      color: var(--surface-strong-muted);
      text-align: center;
      line-height: 1.3;
    }

    .submission-prediction-score .winner {
      color: var(--surface-strong-accent);
    }

    .submission-prediction-score strong {
      font-size: 21px;
      color: var(--surface-strong-accent);
      white-space: nowrap;
    }

    .submission-prediction-meta {
      margin: 0;
      color: var(--surface-strong-muted);
      font-size: 12px;
    }

    .submission-prediction-note {
      font-size: 12px;
      line-height: 1.5;
      color: var(--surface-strong-text);
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      padding: 8px 10px;
    }

    .submission-prediction-facts {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .submission-prediction-facts li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      padding: 6px 8px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      font-size: 12px;
      font-weight: 800;
    }

    .submission-prediction-facts .fact-label {
      color: var(--surface-strong-muted);
      white-space: nowrap;
    }

    .submission-prediction-facts .fact-value {
      color: var(--surface-strong-text);
      text-align: right;
      overflow-wrap: anywhere;
    }

    .school-delete {
      min-height: 36px;
      border: 1px solid var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
      cursor: pointer;
      font-weight: 900;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      color: var(--ink);
    }

    #settingsAdminSection .settings-grid {
      pointer-events: none;
      color: var(--ink);
    }

    .settings-field {
      display: grid;
      gap: 5px;
      color: var(--ink);
    }

    .settings-field.wide {
      grid-column: 1 / -1;
      color: var(--ink);
    }

    .settings-field label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .settings-field input,
    .settings-field select,
    .settings-field textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      box-sizing: border-box;
      font-weight: 900;
    }

    .settings-field textarea {
      min-height: 72px;
      resize: vertical;
      font-weight: 700;
      color: var(--ink);
    }

    .settings-toggle-list {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .system-settings-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin: 0 0 12px;
      color: var(--ink);
    }

    .system-settings-tabs button {
      min-height: 40px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      font-weight: 900;
      cursor: pointer;
    }

    .system-settings-tabs button.active {
      border-color: var(--theme-color);
      background: var(--theme-color);
      color: var(--theme-on-color);
    }

    .system-settings-panel .admin-accordion-body {
      display: block;
    }

    .role-permission-list {
      display: grid;
      gap: 8px;
    }

    .role-permission-card {
      display: grid;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .role-permission-card strong {
      font-size: 14px;
      color: var(--ink);
    }

    .role-permission-card span {
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
    }

    .role-permission-toggle-list {
      display: grid;
      gap: 8px;
    }

    .role-permission-toggle {
      min-height: 46px;
      padding: 8px 10px;
    }

    .role-permission-toggle strong {
      font-size: 13px;
    }

    .role-permission-toggle strong small {
      margin-left: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .role-permission-toggle.inherited {
      opacity: .78;
    }

    .role-permission-select-list {
      display: grid;
      gap: 8px;
    }

    .role-permission-select-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
      align-items: center;
      gap: 10px;
      min-height: 50px;
      padding: 10px 12px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
    }

    .role-permission-select-row strong {
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
    }

    .role-permission-select-row select {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 800;
    }

    .test-role-card {
      margin-top: 4px;
    }

    .test-role-card .role-permission-select-row {
      border: 0;
      padding: 0;
      background: transparent;
    }

    .settings-toggle-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 54px;
      padding: 10px 14px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
    }

    .settings-toggle-item strong {
      font-size: 15px;
      font-weight: 900;
      color: var(--ink);
    }

    .settings-toggle-input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      clip-path: inset(50%);
      overflow: hidden;
      white-space: nowrap;
      color: var(--ink);
    }

    .settings-toggle-ui {
      width: 66px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--sys-gray5);
      position: relative;
      transition: background .18s ease, border-color .18s ease;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      padding: 2px;
      justify-content: flex-start;
    }

    .settings-toggle-ui::after {
      content: "";
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--sys-gray4);
      transition: transform .18s ease, background .18s ease;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--sys-black) 22%, transparent);
    }

    .settings-toggle-input:checked+.settings-toggle-ui {
      border-color: var(--grass);
      background: var(--grass);
      justify-content: flex-end;
    }

    .settings-toggle-input:checked+.settings-toggle-ui::after {
      background: var(--sys-white);
    }

    .settings-actions {
      display: grid;
      grid-template-columns: 1fr;
      margin-top: 10px;
      color: var(--ink);
    }

    .settings-actions button {
      min-height: 40px;
      border: 1px solid var(--grass);
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      cursor: pointer;
      font-weight: 900;
    }

    .tournament-modal-form {
      padding-top: 12px;
      color: var(--ink);
    }

    #tournamentManageModal {
      --tm-accent: var(--grass);
      --tm-accent-deep: var(--grass-deep);
      --tm-accent-on: var(--button-fg, var(--sys-white));
      color: var(--ink);
    }

    #createTournamentModal {
      --ct-accent: var(--grass);
      --ct-accent-deep: var(--grass-deep);
      --ct-accent-on: var(--button-fg, var(--sys-white));
      color: var(--ink);
    }

    .tournament-manage-main-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      align-items: end;
      color: var(--ink);
    }

    .tournament-manage-main-fields textarea {
      min-height: 40px;
      resize: vertical;
    }

    .tournament-manage-actions {
      display: grid;
      gap: 10px;
      margin-top: 2px;
      color: var(--ink);
    }

    @media (max-width: 640px) {
      .tournament-manage-main-fields {
        grid-template-columns: 1fr;
      }
    }

    .tournament-manage-actions-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      color: var(--ink);
    }

    .tournament-manage-reload-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
      color: var(--ink);
    }

    #reloadTournamentManageButton {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
      padding: 0 12px;
    }

    #reloadTournamentManageButton[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .period-settings-summary {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .period-summary-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 64px;
      padding: 11px;
      margin: 0 0 8px;
      border: 1px solid var(--line);
      border-left: 6px solid var(--theme-color);
      background: var(--panel);
    }

    .period-summary-row:last-child {
      margin-bottom: 0;
      color: var(--ink);
    }

    .color-settings-row-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }

    .color-settings-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      min-width: 88px;
      padding: 0 10px;
      border: 1px solid var(--line);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
      color: var(--ink);
    }

    .color-tone-modal-body {
      gap: 12px;
      color: var(--ink);
    }

    #themeToneModal .match-dialog {
      border-color: var(--tone-preview-line, var(--surface-strong-border));
      background: var(--tone-preview-panel, var(--surface-strong-bg));
      color: var(--tone-preview-ink, var(--surface-strong-text));
    }

    #themeToneModal .match-dialog-head {
      border-bottom-color: var(--tone-preview-line, var(--surface-strong-border));
      color: var(--ink);
    }

    #themeToneModal .close-modal {
      border-color: var(--tone-preview-line, var(--surface-strong-border));
      background: var(--tone-preview-surface3, var(--surface-strong-bg-3));
      color: var(--tone-preview-ink, var(--surface-strong-text));
    }

    #themeToneModal .color-tone-modal-body {
      background: var(--tone-preview-panel, var(--surface-strong-bg));
    }

    .color-tone-modal-meta {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
    }

    .color-tone-variant-select {
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .color-tone-variant-select label {
      font-size: 12px;
      font-weight: 800;
      color: var(--tone-preview-muted, var(--muted));
      line-height: 1.2;
    }

    .color-tone-variant-select select {
      min-height: 36px;
      width: 100%;
      border: 1px solid var(--tone-preview-line, var(--line));
      background: var(--tone-preview-surface2, var(--panel));
      color: var(--tone-preview-ink, var(--ink));
      font-size: 13px;
      font-weight: 800;
      padding: 0 10px;
    }

    #themeToneModal .color-tone-modal-meta,
    #themeToneModal .match-note {
      color: var(--tone-preview-muted, var(--muted));
    }

    .color-tone-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .color-tone-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 128px;
      gap: 8px;
      align-items: stretch;
      color: var(--ink);
    }

    .color-tone-main-block {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
      align-content: center;
      padding: 8px;
      border: 1px solid var(--tone-preview-line, var(--line));
      background: var(--tone-preview-surface2, var(--panel));
      color: var(--ink);
    }

    .color-tone-label {
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      white-space: nowrap;
      text-align: left;
    }

    .color-tone-swatch-btn {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-text);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
    }

    .color-tone-oklch-block {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 4px;
      justify-items: stretch;
      align-content: stretch;
      min-width: 0;
      padding: 8px;
      border: 1px solid var(--tone-preview-line, var(--line));
      background: var(--tone-preview-panel, var(--surface-strong-bg));
      color: var(--ink);
    }

    .color-tone-oklch-title {
      font-size: 11px;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      letter-spacing: 0;
    }

    .color-tone-oklch-btn {
      min-height: 34px;
      width: 100%;
      padding: 0 10px;
      border: 1px solid var(--tone-preview-line, var(--line));
      background: var(--tone-preview-surface3, var(--surface-strong-bg));
      color: var(--tone-preview-ink, var(--ink));
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0;
      cursor: pointer;
      white-space: nowrap;
    }

    .color-tone-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 4px;
      color: var(--ink);
    }

    .color-tone-actions button {
      min-height: 40px;
      border: 1px solid var(--theme-color);
      background: var(--theme-color);
      color: var(--theme-on-color);
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .period-summary-main {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .period-summary-title-line {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .period-summary-row strong {
      font-size: 16px;
      font-weight: 900;
      color: var(--ink);
      line-height: 1.28;
    }

    .period-summary-state {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
      color: var(--ink);
    }

    .period-summary-range {
      margin: 0;
      font-size: 13px;
      font-weight: 800;
      color: var(--muted);
      line-height: 1.25;
      word-break: break-word;
    }

    .period-summary-range span {
      font-weight: 900;
      color: var(--ink);
    }

    .period-summary-row .status-open {
      color: var(--ok);
    }

    .period-summary-row .status-closed {
      color: var(--danger-soft-fg);
    }

    .period-summary-row .status-before {
      color: var(--clay);
    }

    #periodSettingsSummaryEmpty {
      margin: 0;
      padding: 10px 8px;
      border: 1px dashed var(--line);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      background: var(--surface-strong-bg);
    }

    #ruleSettingsSummaryEmpty {
      margin: 0;
      padding: 10px 8px;
      border: 1px dashed var(--line);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      background: var(--surface-strong-bg);
    }

    .rule-settings-summary-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .rule-settings-summary-card {
      border: 1px solid var(--line);
      border-left: 6px solid var(--theme-color);
      background: var(--panel);
      padding: 11px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .rule-settings-summary-main {
      min-width: 0;
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .rule-settings-summary-title {
      font-size: 16px;
      font-weight: 900;
      color: var(--ink);
      line-height: 1.28;
    }

    .rule-settings-summary-line {
      margin: 0;
      font-size: 13px;
      font-weight: 800;
      color: var(--muted);
      line-height: 1.25;
      word-break: break-word;
    }

    .rule-settings-summary-actions {
      display: block;
      color: var(--ink);
    }

    #ruleSettingsSectionModal {
      --rss-accent: var(--grass);
      --rss-accent-on: var(--button-fg, var(--sys-black));
      color: var(--ink);
    }

    .rule-section-edit-grid {
      display: grid;
      gap: 10px;
      margin-top: 6px;
      color: var(--ink);
    }

    .rule-section-edit-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .rule-section-edit-grid input,
    .rule-section-edit-grid select {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .rule-section-edit-grid .rule-section-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .rule-section-toggle-field {
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .rule-section-toggle-title {
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
      line-height: 1.25;
    }

    .rule-section-toggle-card {
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      box-sizing: border-box;
      cursor: pointer;
    }

    .rule-section-toggle-state {
      font-size: 12px;
      font-weight: 950;
      color: var(--ink);
      line-height: 1;
    }

    .rule-section-toggle-card .state-on {
      display: none;
      color: var(--ink);
    }

    .rule-section-toggle-card .state-off {
      display: inline;
      color: var(--ink);
    }

    .rule-section-toggle-input:checked+.rule-section-toggle-state .state-on {
      display: inline;
      color: var(--ink);
    }

    .rule-section-toggle-input:checked+.rule-section-toggle-state .state-off {
      display: none;
      color: var(--ink);
    }

    .rule-section-toggle-input:checked~.settings-toggle-ui {
      border-color: var(--grass);
      background: var(--grass);
      justify-content: flex-end;
    }

    .rule-section-toggle-input:checked~.settings-toggle-ui::after {
      background: var(--sys-white);
    }

    .rule-section-toggle-card .settings-toggle-ui {
      width: 60px;
      height: 32px;
      color: var(--ink);
    }

    .rule-section-toggle-card .settings-toggle-ui::after {
      width: 26px;
      height: 26px;
      color: var(--ink);
    }

    #saveRuleSettingsSectionButton {
      border-color: var(--rss-accent);
      background: var(--rss-accent);
      color: var(--rss-accent-on);
    }

    #closeRuleSettingsSectionButton {
      border-color: var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    #reloadRuleSettingsSectionButton {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
      padding: 0 12px;
    }

    #reloadRuleSettingsSectionButton[hidden] {
      display: none !important;
      color: var(--ink);
    }

    #periodSettingsModal {
      --ps-accent: var(--grass);
      --ps-accent-on: var(--button-fg, var(--sys-white));
      color: var(--ink);
    }

    .period-settings-list {
      display: grid;
      gap: 10px;
      margin-top: 6px;
      color: var(--ink);
    }

    .period-setting-card {
      border: 1px solid var(--line);
      border-left: 6px solid var(--theme-color);
      background: var(--surface-strong-bg);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .period-setting-head {
      display: block;
      color: var(--ink);
    }

    .period-setting-head strong {
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
    }


    .period-setting-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .period-setting-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .period-setting-grid input {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .period-setting-toggle {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-3);
    }

    .period-setting-toggle span {
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }

    .period-setting-alert-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .period-setting-alert-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .period-setting-alert-grid input {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .period-setting-datetime-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
      color: var(--ink);
    }

    .period-setting-clear-button {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-3);
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      padding: 0 10px;
      cursor: pointer;
      white-space: nowrap;
    }

    .period-modal-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 6px;
      color: var(--ink);
    }

    .period-modal-actions button {
      min-height: 40px;
      border: 1px solid;
      font-weight: 900;
      cursor: pointer;
      color: var(--ink);
    }

    #savePeriodSettingsButton {
      border-color: var(--ps-accent);
      background: var(--ps-accent);
      color: var(--ps-accent-on);
    }

    #closePeriodSettingsButton {
      border-color: var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    #reloadPeriodSettingsButton {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
      padding: 0 12px;
    }

    #reloadPeriodSettingsButton[hidden] {
      display: none !important;
      color: var(--ink);
    }

    @media (max-width: 560px) {

      .period-setting-grid,
      .period-setting-alert-grid {
        grid-template-columns: 1fr;
        color: var(--ink);
      }
    }

    .prediction-settings-summary-content {
      display: grid;
      gap: 8px;
      margin: 0;
      font-size: 12px;
      color: var(--ink);
    }

    .prediction-summary-card {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 8px;
      display: grid;
      gap: 4px;
    }

    .prediction-summary-title {
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-summary-line {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.45;
      word-break: break-word;
    }

    .prediction-settings-list {
      display: grid;
      gap: 10px;
      margin-top: 6px;
      color: var(--ink);
    }

    .prediction-setting-card {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 10px;
      display: grid;
      gap: 10px;
    }

    .prediction-setting-head {
      display: grid;
      gap: 2px;
      color: var(--ink);
    }

    .prediction-setting-head strong {
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-setting-head .muted {
      font-size: 11px;
      color: var(--muted);
    }

    .prediction-setting-grid {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .prediction-setting-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .prediction-setting-grid input[type="text"],
    .prediction-setting-grid textarea,
    .prediction-priority-grid select,
    .prediction-priority-grid input,
    .prediction-points-grid input {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .prediction-setting-grid textarea {
      min-height: 68px;
      resize: vertical;
      padding: 8px;
      line-height: 1.45;
      color: var(--ink);
    }

    .prediction-toggle-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-3);
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-result-type-options {
      margin-top: -2px;
      border: 1px dashed var(--line);
      background: var(--surface-strong-bg-3);
      padding: 8px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 10px;
    }

    .prediction-result-type-options.is-disabled {
      opacity: 0.55;
      filter: grayscale(0.2);
      color: var(--ink);
    }

    .prediction-result-type-options label {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-priority-grid,
    .prediction-points-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .prediction-priority-grid label,
    .prediction-points-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .prediction-point-mode {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      padding: 8px;
      background: var(--surface-strong-bg-3);
    }

    .prediction-point-mode-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .prediction-point-mode-tabs button {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
    }

    .prediction-point-mode-tabs button.active {
      border-color: var(--grass);
      background: var(--grass);
      color: var(--button-fg);
    }

    .prediction-point-panel[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .prediction-rank-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .prediction-rank-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .prediction-rank-row .rank-label {
      min-width: 34px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .prediction-rank-row input {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .prediction-rank-row button,
    .prediction-rank-add {
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
    }

    .prediction-modal-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 6px;
      color: var(--ink);
    }

    .prediction-modal-actions button {
      min-height: 40px;
      border: 1px solid;
      font-weight: 900;
      cursor: pointer;
      color: var(--ink);
    }

    #savePredictionSettingsButton {
      border-color: var(--grass);
      background: var(--grass);
      color: var(--button-fg);
    }

    #closePredictionSettingsButton {
      border-color: var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    .prediction-events-summary-content {
      display: grid;
      gap: 8px;
      margin: 0;
      font-size: 12px;
      color: var(--ink);
    }

    .prediction-events-summary-card {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 8px;
      display: grid;
      gap: 4px;
    }

    .prediction-events-summary-title {
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-events-summary-line {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.45;
      word-break: break-word;
    }

    .prediction-events-summary-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 4px;
      color: var(--ink);
    }

    .prediction-events-list {
      display: grid;
      gap: 10px;
      margin-top: 6px;
      color: var(--ink);
    }

    .prediction-event-card {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .prediction-event-card .event-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      color: var(--ink);
    }

    .prediction-event-card .event-head strong {
      font-size: 13px;
      font-weight: 900;
      color: var(--ink);
    }

    .prediction-event-card .event-grid {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .prediction-event-card .event-grid label {
      display: grid;
      gap: 4px;
      font-size: 11px;
      font-weight: 900;
      color: var(--muted);
    }

    .prediction-event-card input[type="text"],
    .prediction-event-card textarea,
    .prediction-event-card select,
    .prediction-event-card input[type="number"] {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 800;
      padding: 0 8px;
    }

    .prediction-event-card textarea {
      min-height: 60px;
      resize: vertical;
      padding: 8px;
      line-height: 1.45;
      color: var(--ink);
    }

    .prediction-event-target-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .prediction-event-matches {
      border: 1px dashed var(--line);
      background: var(--surface-strong-bg-3);
      padding: 8px;
      display: grid;
      gap: 6px;
      max-height: 180px;
      overflow: auto;
    }

    .prediction-event-matches[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .prediction-event-match-item {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      font-size: 11px;
      color: var(--ink);
    }

    .prediction-events-action-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      color: var(--ink);
    }

    .prediction-events-action-row button {
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
    }

    #addPredictionEventButton {
      border-color: var(--grass);
      background: var(--grass);
      color: var(--button-fg);
    }

    #reloadPredictionSettingsButton {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
      padding: 0 12px;
    }

    #reloadPredictionSettingsButton[hidden] {
      display: none !important;
      color: var(--ink);
    }

    @media (max-width: 560px) {

      .prediction-priority-grid,
      .prediction-points-grid,
      .prediction-result-type-options {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .prediction-event-target-grid {
        grid-template-columns: 1fr;
        color: var(--ink);
      }
    }

    #saveTournamentManageButton,
    #deleteTournamentManageButton {
      min-height: 40px;
      border: 1px solid;
      font-weight: 900;
      cursor: pointer;
      color: var(--ink);
    }

    #saveTournamentManageButton {
      border-color: var(--tm-accent);
      background: var(--tm-accent);
      color: var(--tm-accent-on);
    }

    #deleteTournamentManageButton {
      border-color: var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
    }

    .tournament-theme-field {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-theme-chips {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .theme-chip-option {
      min-height: 44px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      padding: 4px 2px 5px;
      display: grid;
      justify-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .color-tone-hidden-picker {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: auto;
      cursor: pointer;
      border: 0;
      margin: 0;
      padding: 0;
    }

    .theme-chip-option:disabled {
      opacity: .55;
      cursor: default;
      color: var(--ink);
    }

    .theme-chip-swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--sys-white) 90%, transparent);
      background: var(--chip-gradient, var(--grass-deep));
      box-shadow: 0 1px 4px color-mix(in srgb, var(--sys-black) 28%, transparent);
    }

    .theme-chip-option.active {
      border-color: var(--surface-strong-accent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-strong-accent) 34%, transparent);
      background: color-mix(in srgb, var(--surface-strong-bg-3) 80%, var(--surface-strong-accent));
      color: var(--surface-strong-text);
    }

    .tournament-theme-meta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
    }

    .tournament-theme-value {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      letter-spacing: .01em;
      color: var(--ink);
    }

    .tournament-theme-dot {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, var(--sys-white) 85%, transparent);
      box-shadow: 0 1px 4px color-mix(in srgb, var(--sys-black) 40%, transparent);
      background: var(--ok);
    }

    .tournament-visibility-field {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-visibility-field>span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .tournament-visibility-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
    }

    .tournament-visibility-text {
      font-size: 13px;
      font-weight: 900;
      color: var(--muted);
    }

    .tournament-visibility-text.public {
      color: var(--tm-accent);
    }

    .tournament-visibility-text.private {
      color: var(--clay);
    }

    #tournamentManageModal .settings-toggle-input:checked+.settings-toggle-ui {
      border-color: var(--tm-accent);
      background: var(--tm-accent);
    }

    #createTournamentModal #createTournamentButton {
      border: 1px solid var(--ct-accent);
      background: var(--ct-accent);
      color: var(--ct-accent-on);
    }

    .tournament-picker {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .tournament-picker-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      color: var(--ink);
    }

    .tournament-picker-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(88px, .36fr);
      gap: 8px;
      color: var(--ink);
    }

    .tournament-picker-row label,
    .create-tournament-box label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .tournament-picker select,
    .create-tournament-box input,
    .create-tournament-box textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 900;
    }

    .tournament-picker-row button,
    .create-tournament-box button {
      min-height: 38px;
      padding: 0 12px;
      border: 1px solid var(--grass);
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      cursor: pointer;
      font-weight: 900;
      white-space: nowrap;
    }

    .tournament-picker-row button.danger {
      border-color: var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
    }

    .tournament-current-card {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .tournament-current-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
    }

    .tournament-current-head h4 {
      margin: 0;
      font-size: 18px;
      font-weight: 950;
      color: var(--ink);
    }

    .tournament-current-comment {
      margin: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.5;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
    }

    #openTournamentManageModal {
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid var(--grass);
      background: var(--grass);
      color: var(--theme-on-color);
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .selected-tournament-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      color: var(--ink);
    }

    .selected-tournament-meta div {
      min-height: 54px;
      display: grid;
      align-content: center;
      padding: 7px;
      border: 1px solid var(--line);
      background: var(--panel);
      text-align: center;
    }

    .selected-tournament-meta span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .selected-tournament-meta strong {
      display: block;
      margin-top: 2px;
      font-size: 14px;
      color: var(--ink);
    }

    .selected-tournament-meta select {
      width: 100%;
      min-height: 30px;
      border: 1px solid var(--line);
      background: var(--sys-white);
      font-weight: 900;
    }

    .create-tournament-box {
      display: none;
      gap: 8px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
      background: color-mix(in srgb, var(--gold) 18%, var(--panel));
    }

    .create-tournament-box.open {
      display: grid;
      color: var(--ink);
    }

    @media (max-width: 560px) {
      .school-admin-card {
        grid-template-columns: 1fr;
        gap: 6px;
        color: var(--ink);
      }

      .school-admin-card label:first-child {
        grid-column: auto;
        color: var(--ink);
      }

      .team-admin-card {
        grid-template-columns: minmax(0, 1fr) 52px;
        gap: 6px;
        color: var(--ink);
      }

      .team-color-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px;
        color: var(--ink);
      }

      .team-fixed-grid,
      .team-members-grid {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .settings-grid {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .user-admin-controls,
      .user-status-grid,
      .admin-user-edit-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        color: var(--ink);
      }

      .tournament-picker-actions {
        grid-template-columns: minmax(0, 1fr) minmax(76px, .36fr);
        color: var(--ink);
      }

      .selected-tournament-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        color: var(--ink);
      }
    }

    .tournament-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 12px;
      color: var(--ink);
    }

    .tournament-stat {
      display: grid;
      place-items: center;
      min-height: 58px;
      padding: 8px 4px;
      border: 1px solid var(--line);
      background: var(--panel);
      text-align: center;
    }

    .tournament-stat span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .tournament-stat strong {
      display: block;
      margin-top: 4px;
      font-size: 17px;
      color: var(--ink);
    }

    .tournament-editor {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .round-accordion {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .round-group {
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .round-toggle {
      width: 100%;
      min-height: 54px;
      display: grid;
      grid-template-columns: minmax(72px, 1fr) auto auto;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: var(--panel);
      color: var(--ink);
      text-align: left;
    }

    .round-toggle strong {
      font-size: 16px;
      font-weight: 950;
      white-space: nowrap;
      color: var(--ink);
    }

    .round-metrics {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 5px;
      font-size: 11px;
      font-weight: 900;
      color: var(--ink);
    }

    .round-metrics span {
      padding: 3px 6px;
      border: 1px solid var(--line);
      background: var(--panel);
      white-space: nowrap;
    }

    .round-metrics .warn {
      border-color: var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
    }

    .round-body {
      display: none;
      gap: 10px;
      padding: 10px;
      border-top: 1px solid var(--line);
      background: var(--panel);
    }

    .round-group.open .round-body {
      display: grid;
      color: var(--ink);
    }

    .tournament-admin-card {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .tournament-admin-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
    }

    .tournament-admin-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-weight: 950;
      color: var(--ink);
    }

    .match-no {
      display: inline-grid;
      place-items: center;
      min-width: 44px;
      min-height: 28px;
      background: var(--sys-gray5);
      color: var(--ink);
      font-size: 12px;
    }

    .tournament-admin-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-admin-field {
      display: grid;
      gap: 4px;
      color: var(--ink);
    }

    .tournament-admin-field label,
    .side-editor label,
    .seed-editor label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .tournament-admin-field input,
    .tournament-admin-field select,
    .side-editor input,
    .side-editor select {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 800;
      box-sizing: border-box;
    }

    .side-editors {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .side-editor {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .side-editor strong {
      color: var(--ink);
      font-size: 13px;
    }

    .seed-editor {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    .seed-editor select {
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 800;
      box-sizing: border-box;
    }

    .source-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      color: var(--ink);
    }

    .source-toggle button {
      min-height: 34px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
    }

    .source-toggle button.active {
      border-color: var(--theme-color-deep);
      background: var(--theme-color);
      color: var(--theme-on-color);
    }

    .source-toggle button:disabled {
      opacity: .6;
      cursor: not-allowed;
      color: var(--ink);
    }

    .tournament-start-time-trigger {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--line);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 900;
      font-size: 18px;
      text-align: left;
      padding: 0 10px;
      cursor: pointer;
      touch-action: manipulation;
    }

    .tournament-start-time-trigger:disabled {
      opacity: .55;
      cursor: default;
      color: var(--ink);
    }

    .tournament-start-time-modal .match-dialog {
      width: min(100%, 420px);
      max-height: 90vh;
      color: var(--ink);
    }

    .tournament-start-time-target {
      margin: 0;
      font-size: 12px;
      font-weight: 900;
      color: var(--surface-strong-muted);
      text-align: center;
    }

    .tournament-start-time-time-row {
      display: grid;
      grid-template-columns: 1fr 22px 1fr;
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-start-time-time-row select {
      min-height: 34px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-input-bg);
      color: var(--surface-strong-text);
      font-weight: 900;
      font-size: 14px;
      width: 100%;
    }

    .tournament-start-time-time-row i {
      text-align: center;
      font-style: normal;
      color: var(--surface-strong-muted);
      font-weight: 900;
    }

    .tournament-start-time-actions {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .tournament-start-time-actions button {
      min-height: 36px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
      touch-action: manipulation;
    }

    .tournament-start-time-actions .apply {
      border-color: var(--theme-color-deep);
      background: var(--theme-color);
      color: var(--theme-on-color);
    }

    .next-route {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px;
      border: 1px dashed var(--line);
      background: var(--panel);
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .next-route strong {
      color: var(--ink);
    }

    .tournament-card-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      color: var(--ink);
    }

    .tournament-card-actions button {
      min-height: 34px;
      border: 1px solid var(--grass-deep);
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      font-weight: 900;
      cursor: pointer;
    }

    .tournament-card-actions button.secondary {
      border-color: var(--line);
      background: var(--panel);
      color: var(--ink);
    }

    .validation-box {
      display: grid;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--ink);
    }

    .validation-item {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: 12px;
      font-weight: 900;
    }

    .validation-item.ok {
      border-color: color-mix(in srgb, var(--grass) 44%, var(--line));
      background: color-mix(in srgb, var(--grass) 14%, var(--panel));
      color: color-mix(in srgb, var(--grass) 80%, var(--ink));
    }

    .validation-item.warn {
      border-color: var(--danger-soft-border);
      background: var(--danger-soft-bg);
      color: var(--danger-soft-fg);
    }

    @media (max-width: 560px) {

      .tournament-admin-fields,
      .side-editors {
        grid-template-columns: 1fr;
        color: var(--ink);
      }
    }

    .team {
      min-width: 0;
      color: var(--ink);
    }

    .team-name {
      margin-top: 6px;
      font-size: clamp(20px, 3vw, 30px);
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--ink);
    }

    .score {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 42px;
      font-weight: 950;
      color: var(--gold);
    }

    .prediction-score {
      display: grid;
      grid-template-columns: 70px 20px 70px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--gold);
      font-weight: 950;
    }

    .prediction-team {
      padding: 6px 4px;
      border: 1px solid transparent;
      color: var(--ink);
    }

    .prediction-team.predicted-winner {
      border-color: var(--gold);
      background: color-mix(in srgb, var(--gold) 8%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 32%, transparent);
    }

    .prediction-team.predicted-winner .team-name {
      color: var(--gold);
    }

    .winner-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      margin-top: 4px;
      padding: 0 8px;
      border: 1px solid var(--gold);
      color: var(--gold);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
      opacity: 0;
    }

    .predicted-winner .winner-chip {
      opacity: 1;
      color: var(--ink);
    }

    .score-picker {
      height: 94px;
      padding: 24px 0;
      box-sizing: border-box;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-padding-block: 24px;
      scrollbar-width: none;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--surface-strong-bg);
    }

    .score-picker::-webkit-scrollbar {
      display: none;
      color: var(--ink);
    }

    .score-option {
      display: grid;
      place-items: center;
      height: 46px;
      scroll-snap-align: center;
      color: var(--muted);
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
    }

    .score-option.active {
      color: var(--gold);
      font-size: 40px;
      font-weight: 950;
    }

    .score-separator {
      color: var(--gold);
      font-size: 38px;
    }

    .prediction-warning {
      color: var(--danger);
      font-weight: 900;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(5, minmax(150px, 1fr));
      gap: 12px;
      overflow-x: auto;
      padding-bottom: 2px;
      color: var(--ink);
    }

    .school-card {
      min-height: 148px;
      padding: 14px;
      border: 1px solid var(--line);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--sys-white) 84%, transparent), color-mix(in srgb, var(--panel) 96%, transparent)),
        linear-gradient(135deg, var(--card-a), var(--card-b));
      border-top: 6px solid var(--card-a);
    }

    .school-card h3 {
      margin: 10px 0 8px;
      font-size: 20px;
      color: var(--ink);
    }

    .odds {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      color: var(--clay);
      font-weight: 950;
    }

    .odds span {
      font-size: 26px;
      color: var(--ink);
    }

    .table-wrap {
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 78vh;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .ranking-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .ranking-toolbar strong {
      display: block;
      font-size: 15px;
      color: var(--ink);
    }

    .ranking-toolbar span {
      color: var(--muted);
      font-size: 12px;
    }

    .ranking-toolbar select {
      min-height: 36px;
      min-width: 150px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      padding: 0 10px;
      font-weight: 800;
    }

    .history-list {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .history-item {
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .history-toggle {
      width: 100%;
      min-height: 58px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      background: var(--panel);
      padding: 12px;
      text-align: left;
    }

    .history-toggle strong {
      display: block;
      font-size: 15px;
      color: var(--ink);
    }

    .history-toggle span {
      color: var(--muted);
      font-size: 12px;
    }

    .history-toggle .accordion-action {
      justify-self: end;
      color: var(--ink);
    }

    .history-body {
      display: none;
      border-top: 1px solid var(--line);
      color: var(--ink);
    }

    .history-item.open>.history-body {
      display: block;
      color: var(--ink);
    }

    #currentRankingItem>.current-ranking-body {
      display: block;
      color: var(--ink);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      color: var(--ink);
    }

    th,
    td {
      padding: 3px 1px;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      text-align: center;
      white-space: normal;
      word-break: break-word;
      line-height: 1.2;
      color: var(--ink);
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--surface-strong-bg);
      color: var(--sys-black);
      font-size: 10px;
      white-space: nowrap;
      word-break: keep-all;
    }

    th.rank-head {
      writing-mode: vertical-rl;
      text-orientation: upright;
      width: 20px;
      white-space: nowrap;
      letter-spacing: 0;
      color: var(--ink);
    }

    td {
      font-size: 12px;
      color: var(--ink);
    }

    .rank-table {
      width: 100%;
      table-layout: fixed;
    }

    .rank-table th,
    .rank-table td {
      padding: 2px 0;
      font-size: clamp(6px, 1.55vw, 9px);
      line-height: 1.05;
      white-space: nowrap;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: clip;
    }

    .rank-table th {
      font-size: clamp(5px, 1.35vw, 8px);
    }

    .rank-school-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 1px;
      width: 100%;
      min-width: 0;
      line-height: 1;
      font-weight: 850;
    }

    .rank-school-name {
      display: block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
      font-size: 8px;
      line-height: 1;
    }

    .rank-school-name.small {
      font-size: 7px;
    }

    .rank-school-name.compact {
      font-size: 6px;
    }

    .rank-school-meta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      max-width: 100%;
      white-space: nowrap;
      line-height: 1;
    }

    .rank-school-odds {
      font-size: 8px;
      font-weight: 900;
    }

    .rank-school-badge {
      flex: 0 0 auto;
      padding: 1px;
      border: 1px solid var(--gold);
      background: color-mix(in srgb, var(--gold) 20%, var(--panel));
      color: var(--gold);
      font-size: 7px;
      line-height: 1;
      font-weight: 900;
    }

    .rank {
      font-weight: 950;
      color: inherit;
      width: 18px;
    }

    .base-white {
      background: var(--sys-white);
    }

    .base-blue {
      background: var(--surface-strong-bg-2);
    }

    .you {
      background: var(--gold);
      color: var(--sys-black);
    }

    .match-cell {
      background: var(--danger);
      color: var(--sys-black);
    }

    .eliminated-cell {
      background: var(--sys-gray1);
      color: var(--sys-black);
    }

    .team-red {
      background: var(--team-red);
      color: var(--sys-white);
      font-weight: 800;
    }

    .team-green {
      background: var(--team-green);
      color: var(--sys-white);
      font-weight: 800;
    }

    .team-yellowgreen {
      background: var(--team-yellowgreen);
      color: var(--sys-black);
      font-weight: 800;
    }

    .team-blue {
      background: var(--team-blue);
      color: var(--sys-black);
      font-weight: 800;
    }

    .school-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .pick-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .pick-summary {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .pick-message {
      color: var(--muted);
      font-size: clamp(10px, 2.6vw, 12px);
      line-height: 1.3;
      white-space: pre;
    }

    .submit-picks {
      min-height: 38px;
      padding: 0 16px;
      border: 0;
      border-radius: 999px;
      background: var(--sys-gray1);
      color: var(--sys-black);
      font-weight: 900;
      cursor: not-allowed;
    }

    .submit-picks.enabled {
      background: var(--theme-color);
      color: var(--theme-on-color);
      cursor: pointer;
    }

    .submit-picks:disabled {
      background: var(--sys-gray1);
      cursor: not-allowed;
      opacity: .58;
    }

    .pick-summary-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .reload-picks {
      min-height: 38px;
      padding: 0 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
    }

    .pick-head-actions {
      display: contents;
      color: var(--ink);
    }

    .pick-panel-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title countdown"
        "sort sort"
        "odds odds";
      align-items: center;
      gap: 8px 14px;
      color: var(--ink);
    }

    .pick-panel-head .panel-title {
      grid-area: title;
      color: var(--ink);
    }

    .pick-panel-head .countdown {
      grid-area: countdown;
      justify-self: end;
      color: var(--ink);
    }

    .pick-panel-head .sort-buttons {
      grid-area: sort;
      justify-self: stretch;
      white-space: nowrap;
      width: 100%;
      color: var(--ink);
    }

    .pick-panel-head .odds-buttons {
      grid-area: odds;
      justify-self: stretch;
      white-space: nowrap;
      width: 100%;
      color: var(--ink);
    }

    .countdown {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
      background: color-mix(in srgb, var(--gold) 18%, var(--panel));
      color: color-mix(in srgb, var(--gold) 78%, var(--ink));
      font-weight: 900;
      font-size: 12px;
    }

    .countdown.alert-yellow {
      border-color: color-mix(in srgb, var(--clay) 48%, var(--line));
      background: color-mix(in srgb, var(--clay) 16%, var(--panel));
      color: color-mix(in srgb, var(--clay) 76%, var(--ink));
    }

    .countdown.alert-red {
      border-color: color-mix(in srgb, var(--danger) 46%, var(--line));
      background: color-mix(in srgb, var(--danger) 16%, var(--panel));
      color: color-mix(in srgb, var(--danger) 80%, var(--ink));
    }

    .sort-buttons {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      flex-wrap: nowrap;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
    }

    .sort-buttons button {
      min-height: 40px;
      padding: 0 8px;
      white-space: nowrap;
      border: 0;
      border-right: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
    }

    .sort-buttons button:last-child {
      border-right: 0;
      color: var(--ink);
    }

    .sort-buttons button.active {
      background: var(--theme-color);
      color: var(--theme-on-color);
      font-weight: 800;
    }

    .odds-buttons {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      flex-wrap: nowrap;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
    }

    .odds-buttons button {
      min-height: 40px;
      padding: 0 8px;
      white-space: nowrap;
      border: 0;
      border-right: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
    }

    .odds-buttons button:last-child {
      border-right: 0;
      color: var(--ink);
    }

    .odds-buttons button.active {
      background: var(--theme-color);
      color: var(--theme-on-color);
      font-weight: 800;
    }

    #taskModal .pick-panel-head {
      grid-template-columns: 1fr;
      grid-template-areas:
        "sort"
        "odds";
      color: var(--ink);
    }

    #taskModal .pick-panel-head .panel-title {
      display: none;
      color: var(--ink);
    }

    #taskModal .pick-panel-head .countdown {
      display: none;
      color: var(--ink);
    }

    #taskModal #picks .panel {
      border-left: 0;
      border-right: 0;
      box-shadow: none;
      color: var(--ink);
      display: flex;
      flex-direction: column;
      min-height: calc(94vh - 86px);
      max-height: calc(94vh - 86px);
    }

    #taskModal #picks .panel-head {
      position: sticky;
      top: 0;
      z-index: 6;
      padding: 10px 6px;
      background: var(--panel);
      color: var(--ink);
    }

    #taskModal #picks .panel-body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      padding: 8px 4px;
      color: var(--ink);
    }

    #taskModal #picks .pick-summary {
      position: sticky;
      top: 0;
      z-index: 5;
      margin-top: 8px;
      padding: 8px;
      background: var(--sys-white);
      color: var(--ink);
    }

    #taskModal #picks .sort-buttons button,
    #taskModal #picks .odds-buttons button {
      min-height: 34px;
      font-size: 14px;
      padding: 0 6px;
      color: var(--ink);
    }

    #taskModal #picks .primary-strip {
      position: sticky;
      top: 0;
      z-index: 4;
      margin-bottom: 8px;
      padding: 6px;
      background: var(--panel);
      color: var(--ink);
    }

    #taskModal #picks .primary-chip {
      min-height: 22px;
      padding: 2px 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      color: var(--ink);
    }

    #taskModal #picks .primary-chip.filled {
      background: var(--theme-color);
      border-color: color-mix(in srgb, var(--theme-color) 72%, var(--line));
      color: var(--theme-on-color);
    }

    #taskModal #picks .primary-chip.filled .slot-school,
    #taskModal #picks .primary-chip.filled .slot-meta,
    #taskModal #picks .primary-chip.filled .muted {
      color: var(--theme-on-color);
    }

    #taskModal #picks .primary-chip .slot-meta {
      display: none;
      color: var(--ink);
    }

    #taskModal #picks .primary-chip-head {
      display: none;
      color: var(--ink);
    }

    #taskModal #picks .primary-chip .slot-school {
      display: block;
      width: 100%;
      font-size: 11px;
      line-height: 1;
      min-height: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      pointer-events: none;
      text-align: center;
      color: var(--ink);
    }

    #taskModal #picks .school-list {
      flex: 1 1 auto;
      gap: 5px;
      color: var(--ink);
      overflow: auto;
      min-height: 0;
      overscroll-behavior: contain;
    }

    #taskModal #picks .school-option {
      min-height: 22px;
      padding: 3px 4px;
      border-radius: 9px;
      color: var(--ink);
    }

    #taskModal #picks .school-option>div {
      justify-content: space-between;
      gap: 0;
      height: 100%;
      color: var(--ink);
    }

    #taskModal #picks .school-name,
    #taskModal #picks .school-sub {
      line-height: 1;
      margin: 0;
      color: var(--ink);
    }

    #taskModal #picks .school-name {
      font-size: 11px;
      line-height: 1;
      color: var(--ink);
    }

    #taskModal #picks .school-sub {
      font-size: 8px;
      line-height: 1;
      color: var(--ink);
    }

    .school-list.tournament-bracket-list {
      display: block;
      overflow: auto;
      padding-bottom: 10px;
    }

    .pick-tournament-tabs {
      position: sticky;
      top: 0;
      z-index: 12;
      display: flex;
      gap: 6px;
      overflow-x: auto;
      width: 100%;
      padding: 2px 0 8px;
      background: var(--panel);
    }

    .pick-tournament-tabs button {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      font-weight: 900;
      white-space: nowrap;
    }

    .pick-tournament-tabs button.active {
      background: var(--theme-color);
      color: var(--theme-on-color);
      border-color: var(--theme-color);
    }

    .pick-tournament-board {
      --pick-tournament-peek: 104px;
      --pick-tournament-gap: 36px;
      --pick-tournament-line: color-mix(in srgb, var(--theme-color) 62%, var(--line));
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, calc(100% - var(--pick-tournament-peek) - var(--pick-tournament-gap))) var(--pick-tournament-peek);
      gap: var(--pick-tournament-gap);
      align-items: start;
      padding: 2px 4px 12px;
      overflow: hidden;
      transition: none;
    }

    .pick-tournament-board.tree-lines {
      grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
      gap: 8px;
      width: 100%;
      min-width: 100%;
      overflow: hidden;
      padding-right: 4px;
    }

    .pick-tournament-lines {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .pick-tournament-line-space {
      min-width: 0;
      min-height: 1px;
    }

    .pick-tournament-board.single {
      grid-template-columns: minmax(0, 1fr);
    }

    .pick-tournament-board.show-previous {
      grid-template-columns: var(--pick-tournament-peek) minmax(0, calc(100% - var(--pick-tournament-peek) - var(--pick-tournament-gap)));
    }

    .pick-tournament-round {
      position: relative;
      z-index: 3;
      display: grid;
      gap: 8px;
      min-width: 0;
      width: auto;
      transition: none;
    }

    .pick-tournament-round.preview-next,
    .pick-tournament-round.preview-prev {
      opacity: .68;
      pointer-events: none;
      min-width: min(340px, calc(100vw - 92px));
    }

    .pick-tournament-board.show-previous .pick-tournament-round.preview-prev {
      justify-self: end;
      align-self: start;
    }

    .pick-tournament-round-title {
      position: sticky;
      top: 0;
      z-index: 2;
      min-height: 32px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      font-size: 13px;
      font-weight: 900;
    }

    .tournament-bracket-list .pick-tournament-round-title {
      display: none;
    }

    .pick-tournament-match-list {
      display: grid;
      gap: 14px;
    }

    .pick-tournament-round.preview-next .pick-tournament-match-list,
    .pick-tournament-round.preview-prev .pick-tournament-match-list {
      gap: clamp(8px, 1.6vh, 14px);
    }

    .pick-tournament-match {
      position: relative;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      margin-top: var(--match-offset, 0px);
      height: 58px;
      min-height: 58px;
      max-height: 58px;
      padding: 4px;
      border: 1px solid color-mix(in srgb, var(--line) 88%, var(--sys-gray4));
      border-radius: 8px;
      background: var(--sys-white);
      color: var(--ink);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--sys-black) 5%, transparent);
      overflow: visible;
    }

    .pick-tournament-round.preview-next .pick-tournament-match,
    .pick-tournament-round.preview-prev .pick-tournament-match {
      min-width: 220px;
      height: 58px;
    }

    .pick-tournament-round.active .pick-tournament-match {
      width: 100%;
      min-height: 58px;
    }

    .pick-tournament-round.active .pick-tournament-match {
      border-color: color-mix(in srgb, var(--theme-color) 24%, var(--line));
      box-shadow: 0 1px 2px color-mix(in srgb, var(--sys-black) 6%, transparent);
    }

    .pick-tournament-board.show-previous .pick-tournament-round.active .pick-tournament-match::before {
      content: none;
      position: absolute;
      left: -14px;
      top: 50%;
      width: 14px;
      border-top: 2px solid color-mix(in srgb, var(--theme-color) 58%, var(--line));
      pointer-events: none;
    }

    .pick-tournament-round.active .pick-tournament-match.pair-top::after,
    .pick-tournament-round.active .pick-tournament-match.pair-bottom::after {
      content: none;
      position: absolute;
      left: 100%;
      top: 50%;
      width: 18px;
      border-top: 2px solid color-mix(in srgb, var(--theme-color) 58%, var(--line));
      pointer-events: none;
    }

    .pick-tournament-round.active .pick-tournament-match.pair-bottom::before {
      content: none;
      position: absolute;
      left: calc(100% + 18px);
      width: 18px;
      height: calc(58px + 14px);
      bottom: 50%;
      background:
        linear-gradient(color-mix(in srgb, var(--theme-color) 58%, var(--line)), color-mix(in srgb, var(--theme-color) 58%, var(--line))) left top / 2px 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--theme-color) 58%, var(--line)), color-mix(in srgb, var(--theme-color) 58%, var(--line))) left 50% / 18px 2px no-repeat;
      pointer-events: none;
    }

    .pick-tournament-match.seed {
      border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
      background: color-mix(in srgb, var(--gold) 10%, var(--sys-white));
    }

    .pick-tournament-match.seed-slot {
      background: color-mix(in srgb, var(--sys-gray1) 42%, var(--sys-white));
    }

    .top-tournament-board .top-source-match {
      grid-template-columns: minmax(0, 20vw);
      align-items: center;
      gap: 0;
      width: 20vw;
      height: var(--top-match-height, 58px);
      min-height: var(--top-match-height, 58px);
      max-height: none;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: default;
      overflow: visible;
    }

    .top-tournament-board .top-source-match,
    .top-tournament-board .top-source-match.pair-top,
    .top-tournament-board .top-source-match.pair-bottom,
    .top-tournament-board .top-source-match.seed-slot {
      border: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
    }

    .top-tournament-board .top-source-match.seed-slot {
      grid-template-columns: minmax(0, 20vw);
      margin-left: 0;
      background: transparent;
    }

    .top-tournament-board .top-source-match .pick-tournament-match-label {
      display: none;
    }

    .top-tournament-hit-layer {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }

    .top-tournament-label-hit {
      position: absolute;
      width: 42px;
      height: 18px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: transparent;
      transform: translateY(-50%);
      cursor: pointer;
      pointer-events: auto;
    }

    .top-source-schools {
      display: grid;
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      grid-column: 1;
      min-width: 0;
      height: 100%;
    }

    .top-source-school {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 1px;
      min-width: 0;
      max-width: 100%;
      color: var(--ink);
      font-weight: 900;
      overflow: visible;
      white-space: normal;
      text-overflow: clip;
      font-size: clamp(6px, 2.4vw, 9px);
      line-height: 1;
      text-align: right;
    }

    .top-source-school-name {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
    }

    .top-source-school-edit {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: inherit;
      text-align: inherit;
      appearance: none;
      cursor: pointer;
    }

    .top-source-school-edit:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--theme-color) 70%, var(--sys-white));
      outline-offset: 2px;
    }

    .readonly-input {
      background: var(--sys-gray1);
      color: var(--muted);
    }

    .top-source-school-users {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 1px 2px;
      line-height: 1;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      overflow: visible;
    }

    .top-source-school .top-source-user-tag {
      flex: 0 0 auto;
      min-height: 10px;
      max-width: 100%;
      padding: 0 2px;
      border-radius: 3px;
      font-size: .62em;
      line-height: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
      justify-content: center;
    }

    .top-source-user-more {
      color: var(--muted);
      font-size: .62em;
      font-weight: 800;
      white-space: nowrap;
    }

    .pick-select-tournament-board .pick-source-school-button {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 2px;
      width: 100%;
      height: 100%;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: transparent !important;
      cursor: pointer;
      appearance: none;
      outline: 0;
      font-size: inherit;
      font-weight: 900;
      line-height: 1;
      text-align: right;
    }

    .pick-select-tournament-board .top-source-match {
      height: 76px;
      min-height: 76px;
      max-height: 76px;
    }

    .pick-select-tournament-board .pick-source-school-button strong {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      font: inherit;
      color: inherit;
    }

    .pick-select-tournament-board .pick-source-school-odds {
      display: block;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: clip;
      color: color-mix(in srgb, currentColor 78%, var(--muted));
      font-size: .72em;
      font-weight: 800;
      line-height: 1;
    }

    .pick-select-tournament-board .pick-source-school-button.selected {
      background: transparent !important;
      outline: 0;
    }

    .pick-select-tournament-board .pick-source-school-button.disabled {
      cursor: not-allowed;
      opacity: .48;
    }

    .top-source-school.is-user-pick,
    .top-source-school.is-winner {
      color: var(--danger);
    }

    .pick-select-tournament-board .top-source-school.is-user-pick,
    .pick-select-tournament-board .top-source-school.is-winner {
      color: inherit;
    }

    .pick-select-tournament-board .pick-color-primary-selected {
      color: #007AFF !important;
    }

    .pick-select-tournament-board .pick-color-final-added {
      color: #1A9D4A !important;
    }

    .pick-select-tournament-board .pick-color-final-removed {
      color: #FF3B30 !important;
    }

    .pick-select-tournament-board .pick-color-primary-alone {
      color: #C69200 !important;
    }

    .pick-select-tournament-board .pick-color-protected {
      color: #8E8E93 !important;
    }

    .school-option.pick-color-primary-selected .school-name,
    .school-option.pick-color-primary-selected .school-sub {
      color: #007AFF !important;
    }

    .school-option.pick-color-final-added .school-name,
    .school-option.pick-color-final-added .school-sub {
      color: #1A9D4A !important;
    }

    .school-option.pick-color-final-removed .school-name,
    .school-option.pick-color-final-removed .school-sub {
      color: #FF3B30 !important;
    }

    .pick-tournament-legend {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 6;
      width: max-content;
      max-width: 48%;
      margin: 0;
      padding: 6px 8px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      pointer-events: none;
    }

    .pick-tournament-legend div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      white-space: nowrap;
    }

    .pick-tournament-legend .legend-color {
      display: inline-block;
      width: 11px;
      height: 11px;
      border-radius: 3px;
      flex: 0 0 auto;
    }

    .pick-tournament-legend .legend-color.primary {
      background: #007AFF;
    }

    .pick-tournament-legend .legend-color.alone {
      background: #C69200;
    }

    .pick-tournament-legend .legend-color.protected {
      background: #8E8E93;
    }

    .pick-tournament-legend .legend-color.added {
      background: #1A9D4A;
    }

    .pick-tournament-legend .legend-color.removed {
      background: #FF3B30;
    }

    @media (max-width: 420px) {
      .pick-tournament-legend {
        max-width: 54%;
        top: 8px;
        right: 6px;
        padding: 5px 6px;
        font-size: 10px;
      }
    }

    .school-option.pick-color-primary-alone .school-name,
    .school-option.pick-color-primary-alone .school-sub {
      color: #C69200 !important;
    }

    .school-option.pick-color-protected .school-name,
    .school-option.pick-color-protected .school-sub {
      color: #8E8E93 !important;
    }

    .top-source-school.top {
      align-self: center;
      padding-top: 5px;
    }

    .top-source-school.bottom {
      align-self: center;
      padding-bottom: 5px;
    }

    .top-source-school.seed {
      grid-column: 1;
      align-self: center;
    }

    .top-source-join {
      display: none;
    }

    .top-source-join::before {
      content: none;
    }

    .top-source-join::after {
      content: none;
    }

    .pick-tournament-line-group {
      stroke: var(--pick-tournament-line);
      stroke-width: 2.5;
      stroke-linecap: square;
      fill: none;
    }

    .pick-tournament-line-group .winner-line {
      stroke: var(--danger);
    }

    .pick-tournament-label-group text {
      fill: var(--muted);
      font-size: 7.2px;
      font-weight: 900;
      text-anchor: start;
      dominant-baseline: middle;
      pointer-events: none;
    }

    .pick-tournament-bye {
      display: grid;
      place-items: center;
      min-height: 0;
      height: 100%;
      overflow: hidden;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      border: 1px dashed var(--line);
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel) 52%, transparent);
    }

    .pick-tournament-match.locked {
      opacity: .78;
    }

    .pick-tournament-match-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.15;
      font-weight: 800;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }

    .pick-tournament-match-label {
      position: absolute;
      right: -2px;
      z-index: 4;
      max-width: 58px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 7.2px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: translateX(100%);
      pointer-events: none;
    }

    .pick-tournament-match.pair-top .pick-tournament-match-label {
      top: 2px;
    }

    .pick-tournament-match.pair-bottom .pick-tournament-match-label {
      bottom: 2px;
    }

    .pick-tournament-match:not(.pair-bottom) .pick-tournament-match-label {
      top: 2px;
    }

    .pick-tournament-round.preview-next .pick-tournament-match-label,
    .pick-tournament-round.preview-prev .pick-tournament-match-label {
      display: none;
    }

    .pick-tournament-round.final-active .pick-tournament-match-label {
      position: static;
      display: inline-flex;
      justify-self: start;
      align-self: start;
      max-width: 100%;
      margin-bottom: 2px;
      transform: none;
    }

    .pick-tournament-round.final-active .pick-tournament-match {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .pick-tournament-match-head span,
    .pick-tournament-match-head b {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tournament-school-button,
    .pick-tournament-placeholder {
      min-height: 0;
      height: 100%;
      width: 100%;
      display: grid;
      align-content: center;
      gap: 0;
      padding: 2px 5px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: color-mix(in srgb, var(--panel) 76%, var(--sys-white));
      color: var(--ink);
      text-align: left;
      font-weight: 900;
      overflow: hidden;
      min-width: 0;
    }

    .pick-tournament-teams {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 11px minmax(0, 1fr);
      align-items: stretch;
      gap: 2px;
      min-height: 0;
      overflow: hidden;
    }

    .pick-tournament-teams.seed-teams {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .tournament-school-button {
      cursor: pointer;
    }

    .tournament-school-button.selected {
      background: color-mix(in srgb, var(--theme-color) 16%, var(--sys-white));
      border-color: color-mix(in srgb, var(--theme-color) 62%, var(--line));
      outline: 2px solid color-mix(in srgb, var(--theme-color) 34%, transparent);
      outline-offset: 1px;
    }

    .tournament-school-button.disabled {
      cursor: not-allowed;
      opacity: .56;
    }

    .tournament-school-button strong,
    .pick-tournament-placeholder {
      font-size: 12px;
      line-height: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
    }

    .tournament-school-button strong {
      display: block;
    }

    .tournament-school-button span {
      font-size: 9px;
      line-height: 1;
      opacity: .72;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pick-tournament-versus {
      align-self: center;
      justify-self: center;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      overflow: hidden;
    }

    .primary-strip {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 14px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--theme-color) 42%, var(--line));
      background: color-mix(in srgb, var(--theme-color) 10%, var(--panel));
    }

    .primary-chip {
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 4px;
      min-height: 86px;
      padding: 6px;
      border: 1px solid var(--line);
      background: var(--panel);
      overflow: hidden;
      cursor: default;
    }

    .primary-chip.filled {
      cursor: pointer;
      border-color: color-mix(in srgb, var(--theme-color) 36%, var(--line));
      background: color-mix(in srgb, var(--theme-color) 8%, var(--panel));
    }

    .primary-chip.empty {
      background: color-mix(in srgb, var(--surface-strong-bg-2) 85%, var(--panel));
      border-style: dashed;
    }

    .primary-chip-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
      color: var(--ink);
    }

    .primary-chip .muted {
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
      color: var(--ink);
    }

    .primary-chip .slot-remove {
      width: 18px;
      height: 18px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
    }

    .primary-chip .slot-school {
      overflow-wrap: anywhere;
      word-break: keep-all;
      line-height: 1.15;
      font-size: 12px;
      font-weight: 900;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.2em;
      color: var(--ink);
    }

    .primary-chip .slot-meta {
      font-size: 10px;
      line-height: 1.1;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .school-option {
      display: flex;
      align-items: stretch;
      justify-content: stretch;
      min-height: 74px;
      padding: 8px 6px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--sys-white);
      text-align: left;
      font-size: 12px;
      line-height: 1.15;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
    }

    .school-option>div {
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      gap: 0;
      color: var(--ink);
    }

    .school-top {
      display: block;
      min-width: 0;
      color: var(--ink);
    }

    .school-name {
      display: block;
      font-weight: 900;
      line-height: 1.05;
      font-size: 12px;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      min-height: 0;
      color: var(--ink);
    }

    .school-sub {
      display: block;
      font-size: 10px;
      line-height: 1.1;
      font-weight: 800;
      margin-top: 0;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      opacity: 0.9;
      color: var(--ink);
    }

    .school-option .badge {
      display: none;
      color: var(--ink);
    }

    .school-option.selected {
      border-color: var(--grass);
      background: color-mix(in srgb, var(--grass) 14%, var(--panel));
    }

    .school-option.locked {
      opacity: .62;
      background: color-mix(in srgb, var(--sys-gray5) 70%, var(--panel));
    }

    .timeline {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .game-row {
      display: grid;
      grid-template-columns: 84px 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .inning {
      display: grid;
      grid-template-columns: 90px repeat(9, 34px) 44px;
      gap: 4px;
      align-items: center;
      overflow-x: auto;
      padding: 12px;
      background: var(--sys-black);
      color: var(--sys-black);
    }

    .inning div {
      min-height: 30px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--sys-white) 8%, transparent);
    }

    .admin-grid {
      display: none;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      color: var(--ink);
    }

    .admin-tile {
      min-height: 126px;
      padding: 14px;
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .admin-tile h3 {
      margin: 0 0 10px;
      font-size: 17px;
      color: var(--ink);
    }

    .status-list {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .status-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      background: var(--sys-white);
    }

    .match-modal {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: none;
      align-items: flex-end;
      background: var(--surface-overlay);
    }

    .task-modal .match-dialog {
      max-width: 1060px;
      max-height: 94vh;
      width: min(1060px, 99vw);
      overflow: hidden;
      color: var(--ink);
    }

    .admin-editor-dialog {
      max-width: 1060px;
      max-height: 94vh;
      width: min(1060px, 96vw);
      overflow: hidden;
      color: var(--ink);
    }

    .task-modal-body {
      overflow: auto;
      max-height: calc(94vh - 74px);
      padding: 0 2px 2px;
      background: var(--panel);
    }

    .task-modal-body .task-view {
      display: block;
      padding-top: 0;
      color: var(--ink);
    }

    .task-modal-deadline {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--line));
      background: color-mix(in srgb, var(--gold) 16%, var(--panel));
      color: color-mix(in srgb, var(--gold) 78%, var(--ink));
      font-weight: 900;
      font-size: 12px;
      white-space: nowrap;
      margin-left: auto;
    }

    .task-modal-deadline[hidden] {
      display: none !important;
      color: var(--ink);
    }

    .profile-card {
      cursor: pointer;
      color: var(--ink);
    }

    .profile-snapshot {
      display: none !important;
      color: var(--ink);
    }

    .profile-card.team-colored {
      border-left: 6px solid var(--profile-team-color, var(--line));
      color: var(--ink);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--profile-team-color, var(--panel)) 16%, var(--panel)), var(--panel) 48%);
    }

    #topScheduleMount #schedule {
      display: block;
      padding-top: 0;
      color: var(--ink);
    }

    .team-color-cell {
      background: var(--rank-team-color, var(--grass-deep));
      color: var(--rank-team-text-color, var(--sys-white));
      font-weight: 800;
    }

    .status-link {
      cursor: pointer;
      color: var(--ink);
    }

    .status-link:hover {
      background: var(--status-link-hover-bg);
    }

    .todo-list {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .todo-head-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--ink);
    }

    .todo-head-meta .panel-title {
      white-space: nowrap;
      color: var(--ink);
    }

    .todo-head-meta .badge {
      white-space: nowrap;
      flex: 0 0 auto;
      color: var(--ink);
    }

    #todoPanel .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--ink);
    }

    #todoPanel:not(.open) .panel-head {
      border-bottom: 0;
      color: var(--ink);
    }

    #todoPanel:not(.open) #todoList {
      display: none;
      color: var(--ink);
    }

    #rules .panel-head .badge {
      display: none !important;
      color: var(--ink);
    }

    .todo-item {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 10px;
      border: 1px solid var(--line);
      background: var(--todo-item-bg);
      cursor: pointer;
    }

    .todo-item:hover {
      background: var(--todo-item-hover-bg);
    }

    .todo-item.accordion-host {
      cursor: default;
      color: var(--ink);
    }

    .todo-item.accordion-host:hover {
      background: var(--todo-item-bg);
    }

    .todo-check {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border: 2px solid var(--todo-check-border);
      border-radius: 50%;
      color: transparent;
      font-weight: 950;
    }

    .todo-item.done .todo-check {
      border-color: var(--status-success);
      background: var(--status-success);
      color: var(--sys-black);
    }

    .todo-item.done {
      border-color: color-mix(in srgb, var(--status-success) 50%, var(--line));
      background: color-mix(in srgb, var(--status-success) 16%, var(--panel));
    }

    .todo-item.disabled {
      background: var(--todo-disabled-bg);
      color: var(--todo-disabled-fg);
      cursor: default;
    }

    .todo-item.disabled:hover {
      background: var(--todo-disabled-bg);
    }

    .todo-item.disabled .todo-text span,
    .todo-item.disabled .todo-time {
      color: var(--todo-disabled-fg);
    }

    .todo-item.expired-missing .todo-check {
      border-color: var(--status-warning);
      background: var(--status-warning);
      color: var(--sys-black);
    }

    .todo-item.expired-missing {
      border-color: color-mix(in srgb, var(--status-warning) 58%, var(--line));
      background: color-mix(in srgb, var(--status-warning) 18%, var(--panel));
    }

    .todo-text {
      min-width: 0;
      display: grid;
      gap: 3px;
      color: var(--ink);
    }

    .todo-text strong {
      font-size: 14px;
      color: var(--ink);
    }

    .todo-text span {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .todo-time {
      display: grid;
      gap: 2px;
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      text-align: right;
    }

    .todo-time strong {
      color: var(--ink);
      font-size: 12px;
    }

    .todo-time strong.alert-yellow {
      color: var(--todo-alert-yellow);
    }

    .todo-time strong.alert-red {
      color: var(--todo-alert-red);
    }

    .todo-toggle-button {
      min-height: 26px;
      padding: 0 8px;
      border: 1px solid var(--action-border);
      background: var(--action-bg);
      color: var(--action-fg);
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
    }

    .todo-toggle-button:hover {
      background: var(--action-bg-hover);
    }

    .todo-accordion {
      display: none;
      grid-column: 1 / -1;
      padding: 8px 0 0 40px;
      color: var(--ink);
    }

    .todo-item.open .todo-accordion {
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .approval-match {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--gold) 18%, var(--panel));
      cursor: pointer;
    }

    .approval-match strong {
      font-size: 13px;
      color: var(--ink);
    }

    .prototype-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
      color: var(--ink);
    }

    .prototype-control {
      display: grid;
      gap: 6px;
      color: var(--ink);
    }

    .prototype-control label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .prototype-control select {
      min-height: 36px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      padding: 0 10px;
      font-weight: 800;
    }

    .nav button.hidden-by-state {
      display: none;
      color: var(--ink);
    }

    .maintenance-card {
      min-height: 72vh;
      display: grid;
      align-content: center;
      gap: 16px;
      text-align: center;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--sys-black) 92%, transparent), color-mix(in srgb, var(--sys-black) 98%, transparent)),
        var(--panel);
      color: var(--surface-strong-text);
    }

    .maintenance-icon {
      width: 72px;
      height: 72px;
      margin: 0 auto;
      display: grid;
      place-items: center;
      border: 2px solid var(--gold);
      color: var(--gold);
      font-size: 34px;
      font-weight: 950;
    }

    .maintenance-card h2 {
      margin: 0;
      font-size: clamp(24px, 6vw, 34px);
      letter-spacing: 0;
      color: var(--ink);
    }

    .maintenance-card p {
      max-width: 520px;
      margin: 0 auto;
      color: color-mix(in srgb, var(--surface-strong-text) 78%, transparent);
      line-height: 1.7;
    }

    .maintenance-meta {
      display: grid;
      gap: 8px;
      max-width: 440px;
      margin: 4px auto 0;
      color: var(--ink);
    }

    .maintenance-meta .status-item {
      background: color-mix(in srgb, var(--sys-white) 8%, transparent);
      border-color: color-mix(in srgb, var(--sys-white) 16%, transparent);
      color: var(--surface-strong-text);
    }

    .maintenance-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .maintenance-toggle {
      min-height: 38px;
      padding: 0 16px;
      border: 1px solid var(--gold);
      background: var(--gold);
      color: var(--sys-black);
      font-weight: 900;
      cursor: pointer;
    }

    .maintenance-toggle.secondary {
      background: transparent;
      color: var(--gold);
    }

    .name-form {
      display: grid;
      gap: 12px;
      padding: 14px;
      color: var(--ink);
    }

    .name-form label {
      display: grid;
      gap: 6px;
      color: var(--sys-gray2);
      font-size: 13px;
    }

    .name-form label[hidden] {
      display: none;
    }

    .name-form input,
    .name-form select,
    .name-form textarea {
      min-height: 42px;
      padding: 0 12px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--surface-strong-text);
      font-size: 16px;
    }

    .name-form textarea {
      min-height: 98px;
      padding: 10px 12px;
      resize: vertical;
      line-height: 1.45;
      font-family: inherit;
      color: var(--ink);
    }

    #tournamentManageComment {
      min-height: 72px;
      color: var(--ink);
    }

    .name-copy-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 72px;
      gap: 8px;
      color: var(--ink);
    }

    .name-copy-row button,
    .name-form .secondary-submit {
      min-height: 42px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      cursor: pointer;
      font-weight: 900;
    }

    .name-copy-row button:disabled {
      opacity: .45;
      cursor: default;
      color: var(--ink);
    }

    .name-form-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .profile-modal-stack {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .profile-static-item {
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
      padding: 10px 12px;
    }

    .profile-static-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
      color: var(--ink);
    }

    .profile-static-item strong {
      display: block;
      margin: 0;
      color: var(--surface-strong-text);
      font-size: 15px;
      font-weight: 900;
    }

    .profile-static-item span {
      display: block;
      color: var(--surface-strong-muted);
      font-size: 14px;
      line-height: 1.4;
      word-break: break-word;
    }

    .profile-modal-stack .history-item {
      border-color: var(--surface-strong-border);
      background: var(--surface-strong-bg);
    }

    .profile-modal-stack .history-toggle {
      min-height: 52px;
      padding: 10px 12px;
      background: var(--surface-strong-bg);
    }

    .profile-modal-stack .history-toggle strong {
      color: var(--surface-strong-text);
      font-size: 15px;
      margin: 0;
    }

    .profile-modal-stack .history-toggle span {
      color: var(--surface-strong-muted);
      font-size: 13px;
    }

    .profile-modal-stack .history-body {
      border-top-color: var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      padding: 10px;
      display: none;
    }

    .profile-modal-stack .history-item.open>.history-body {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    .profile-detail-line {
      margin: 0;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      padding: 9px 10px;
      color: var(--surface-strong-text);
      font-size: 14px;
      line-height: 1.45;
    }

    .profile-detail-line strong {
      color: var(--surface-strong-text);
      font-weight: 900;
      margin-right: 6px;
    }

    .profile-sub-accordion {
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
    }

    .profile-sub-accordion .history-toggle {
      min-height: 46px;
      padding: 9px 10px;
      background: var(--surface-strong-bg-2);
    }

    .profile-sub-accordion .history-toggle strong {
      font-size: 14px;
      color: var(--ink);
    }

    .profile-sub-accordion .history-body {
      border-top-color: var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      padding: 10px;
      display: none;
    }

    .profile-sub-accordion.open>.history-body {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .profile-school-list {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--ink);
    }

    .profile-school-list li {
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      word-break: break-word;
    }

    .profile-edit-button {
      min-height: 38px;
      border: 1px solid var(--line);
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      font-weight: 900;
      cursor: pointer;
      padding: 0 14px;
      justify-self: start;
    }

    .profile-edit-button.inline {
      min-height: 32px;
      padding: 0 10px;
      font-size: 12px;
      border-color: var(--line);
      background: var(--grass-deep);
    }

    .profile-submission-summary {
      color: var(--surface-strong-muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .profile-submission-inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .profile-edit-button:disabled {
      border-color: var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-muted);
      cursor: default;
    }

    .profile-modal-tools {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .profile-theme-row {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .profile-theme-row select {
      min-height: 38px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      font-weight: 700;
      padding: 0 10px;
    }

    .profile-theme-row .profile-theme-note {
      color: var(--surface-strong-muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .admin-user-edit-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .modal-submit {
      min-height: 40px;
      border: 0;
      background: var(--grass);
      color: var(--button-fg, var(--sys-white));
      font-weight: 900;
      cursor: pointer;
    }

    .match-modal.open {
      display: flex;
      color: var(--ink);
    }

    .match-dialog {
      width: min(100%, 560px);
      max-height: 86vh;
      margin: 0 auto;
      overflow: auto;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      box-shadow: 0 -18px 48px color-mix(in srgb, var(--sys-black) 38%, transparent);
    }

    .match-dialog-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--surface-strong-border);
      color: var(--ink);
    }

    .match-dialog-head h2 {
      margin: 0;
      font-size: 18px;
      color: var(--ink);
    }

    .match-head-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
    }

    .swap-sides {
      min-height: 34px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      padding: 0 10px;
      font-weight: 900;
      cursor: pointer;
    }

    .close-modal {
      width: 38px;
      height: 38px;
      border: 1px solid var(--surface-strong-border);
      border-radius: 50%;
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
    }

    .inning-board {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 28px;
      gap: 2px;
      padding: 14px;
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      min-width: 100%;
    }

    .inning-board .inning-cell {
      display: grid;
      place-items: center;
      min-height: var(--inning-row-height, 28px);
      background: var(--surface-strong-bg-2);
      font-size: 14px;
    }

    .inning-board .head {
      background: var(--surface-strong-bg);
      color: var(--surface-strong-muted);
    }

    .inning-board .team-label {
      background: var(--surface-strong-bg);
      color: var(--surface-strong-text);
      font-weight: 800;
      font-size: 10px;
      white-space: nowrap;
    }

    .inning-board .total {
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-accent);
      font-weight: 900;
    }

    .inning-board .highlight {
      color: var(--surface-strong-accent);
    }

    .result-editor {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-top: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
    }

    .result-editor.hidden {
      display: none;
      color: var(--ink);
    }

    .readonly-score.hidden {
      display: none;
      color: var(--ink);
    }

    .readonly-score {
      border-top: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      --inning-col-width: 29px;
      --inning-row-height: 28px;
    }

    .readonly-score .inning-cell {
      border: 1px solid var(--surface-strong-border);
      box-sizing: border-box;
      color: var(--ink);
    }

    .result-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 520px;
      margin: 0 auto;
      color: var(--ink);
    }

    .result-fields label {
      display: grid;
      gap: 5px;
      color: var(--surface-strong-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .result-fields input,
    .result-fields select {
      min-height: 34px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--surface-strong-text);
      padding: 0 8px;
      font-weight: 800;
    }

    .inning-edit-board {
      display: grid;
      grid-template-columns: 30px minmax(0, 1fr) 28px;
      gap: 2px;
      color: var(--surface-strong-text);
      width: 100%;
      min-width: 100%;
      --inning-col-width: 29px;
      --inning-row-height: 28px;
    }

    .inning-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-gutter: stable;
      color: var(--ink);
    }

    .inning-labels,
    .inning-totals {
      display: grid;
      gap: 2px;
      grid-template-rows: repeat(3, var(--inning-row-height, 28px));
      color: var(--ink);
    }

    .inning-scroll-grid {
      display: grid;
      grid-template-columns: repeat(var(--inning-count, 9), var(--inning-col-width, 29px));
      grid-template-rows: repeat(3, var(--inning-row-height, 28px));
      gap: 2px;
      min-width: max-content;
      color: var(--ink);
    }

    .inning-cell {
      display: grid;
      place-items: center;
      background: var(--surface-strong-bg-2);
      font-size: 13px;
    }

    .inning-cell.head,
    .inning-cell.team-label {
      background: var(--surface-strong-bg);
      color: var(--surface-strong-muted);
      font-weight: 900;
      font-size: 10px;
      white-space: nowrap;
    }

    .inning-edit-board input {
      width: 100%;
      height: var(--inning-row-height, 28px);
      border: 0;
      background: var(--surface-input-bg);
      color: var(--surface-strong-text);
      text-align: center;
      font-weight: 900;
      font-size: 14px;
      padding: 0 1px;
    }

    .result-editor.readonly-mode .result-fields,
    .result-editor.readonly-mode .modal-actions,
    .result-editor.readonly-mode .modal-message {
      display: none;
    }

    .result-editor.readonly-mode .inning-edit-board input {
      pointer-events: none;
      opacity: 1;
    }

    .inning-cell.total {
      background: var(--surface-strong-bg-3);
      color: var(--status-info-neutral);
      font-weight: 950;
      font-size: 15px;
    }

    .inning-board .current-inning,
    .inning-edit-board .current-inning,
    .inning-edit-board input.current-inning {
      background: var(--gold);
      color: var(--sys-black);
      font-weight: 950;
    }

    .modal-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--ink);
    }

    .modal-actions button {
      min-height: 38px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      padding: 0 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .modal-actions .primary {
      border-color: var(--grass);
      background: var(--grass);
    }

    .modal-actions button:disabled,
    .modal-actions .primary:disabled {
      border-color: var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-muted);
      cursor: not-allowed;
    }

    .modal-actions .warn {
      border-color: var(--status-info-neutral);
      background: var(--status-info-neutral-soft);
      color: var(--status-info-neutral);
    }

    .modal-message {
      min-height: 24px;
      color: var(--surface-strong-muted);
      font-size: 13px;
      font-weight: 800;
    }

    .modal-message.success {
      color: var(--ok);
    }

    .modal-message.error {
      color: var(--danger);
    }

    .toast {
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 270;
      display: none;
      min-width: 240px;
      max-width: calc(100vw - 42px);
      transform: translate(-50%, -50%);
      padding: 16px 44px 16px 18px;
      color: var(--sys-black);
      text-align: center;
      font-weight: 950;
      box-shadow: 0 18px 42px color-mix(in srgb, var(--sys-black) 34%, transparent);
    }

    .toast.show {
      display: block;
      animation: toastFade 3s ease-out 1 forwards;
      color: var(--ink);
    }

    .toast.success {
      background: var(--toast-success-bg);
    }

    .toast.error {
      background: var(--toast-error-bg);
    }

    .toast.warn {
      background: var(--toast-warn-bg);
    }

    #toastMessage {
      display: block;
      white-space: normal;
      color: var(--ink);
    }

    .toast.show.sticky {
      animation: none;
      opacity: 1;
      transform: translate(-50%, -50%);
      color: var(--ink);
    }

    .toast.warn.sticky #toastMessage {
      font-size: 13px;
      line-height: 1.4;
      font-weight: 800;
      white-space: pre-line;
      word-break: keep-all;
      color: var(--ink);
    }

    .toast.warn.sticky {
      min-width: min(92vw, 420px);
      max-width: min(96vw, 640px);
      color: var(--ink);
    }

    .toast-close {
      position: absolute;
      top: 4px;
      right: 6px;
      width: 30px;
      height: 30px;
      border: 0;
      background: transparent;
      color: var(--sys-black);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    @keyframes toastFade {
      0% {
        opacity: 0;
        transform: translate(-50%, -44%);
        color: var(--ink);
      }

      15%,
      78% {
        opacity: 1;
        transform: translate(-50%, -50%);
        color: var(--ink);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -56%);
        color: var(--ink);
      }
    }

    .match-note {
      padding: 0 14px 16px;
      color: var(--sys-gray2);
      font-size: 13px;
      line-height: 1.6;
    }

    .match-insights {
      display: grid;
      gap: 10px;
      padding: 0 14px 14px;
      color: var(--ink);
    }

    .insight-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .insight-card {
      min-height: 72px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg-2);
      display: grid;
      gap: 8px;
    }

    .insight-headline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
      color: var(--ink);
    }

    .insight-title {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
      white-space: nowrap;
      color: var(--ink);
    }

    .insight-card h3 {
      margin: 0;
      color: var(--surface-strong-text);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .insight-odds-inline {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
      color: var(--ink);
    }

    .insight-card strong {
      color: var(--gold);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1;
    }

    .insight-odds-inline .muted {
      font-size: 10px;
      color: var(--ink);
    }

    .pick-users {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
      color: var(--ink);
    }

    .user-tag {
      display: inline-flex;
      min-height: 20px;
      align-items: center;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--tag-team-color, var(--sys-gray5));
      color: var(--tag-text-color, var(--sys-white));
      font-size: 10px;
      line-height: 1;
      border: 1px solid color-mix(in srgb, var(--tag-team-color, var(--sys-gray4)) 70%, var(--sys-white));
      font-weight: 900;
      cursor: pointer;
    }

    .user-tag.is-disabled {
      cursor: default;
      pointer-events: none;
    }

    .school-flags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 0;
      justify-content: flex-end;
      align-items: flex-start;
      color: var(--ink);
    }

    .school-flag {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 5px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      color: var(--sys-gray2);
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
    }

    button.school-flag,
    button.mini-tag {
      cursor: pointer;
      font-family: inherit;
      color: var(--ink);
    }

    button.school-flag:hover,
    button.mini-tag:hover {
      filter: brightness(1.16);
      color: var(--ink);
    }

    .school-flag.seed {
      border-color: color-mix(in srgb, var(--gold) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--gold) 16%, var(--surface-strong-bg));
      color: var(--gold);
    }

    .my-pick-card {
      border-color: var(--gold);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
    }

    .impact-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      font-size: 13px;
    }

    .impact-row strong {
      color: var(--gold);
      font-size: 15px;
    }

    .impact-calc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .impact-calc span {
      padding: 6px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      font-weight: 900;
    }

    .impact-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: var(--ink);
    }

    .impact-tags span {
      padding: 3px 7px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      color: var(--sys-gray2);
      font-size: 11px;
      font-weight: 900;
    }

    .impact-tags .applied {
      border-color: color-mix(in srgb, var(--gold) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--gold) 16%, var(--surface-strong-bg));
      color: var(--gold);
    }

    .impact-tags .pending {
      border-color: color-mix(in srgb, var(--surface-strong-accent) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--surface-strong-accent) 16%, var(--surface-strong-bg));
      color: var(--surface-strong-accent);
    }

    .simulation-table {
      display: grid;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      font-size: 12px;
    }

    .simulation-row {
      display: grid;
      grid-template-columns: minmax(118px, 1.15fr) 1fr 1fr;
      border-top: 1px solid var(--line);
      min-height: 40px;
      align-items: stretch;
      color: var(--ink);
    }

    .simulation-row:first-child {
      border-top: 0;
      color: var(--ink);
    }

    .simulation-row.head {
      min-height: 32px;
      background: var(--surface-strong-bg-2);
      color: var(--gold);
      font-weight: 950;
    }

    .simulation-row>span,
    .simulation-row>strong,
    .simulation-row>div {
      display: flex;
      align-items: center;
      padding: 6px;
      border-left: 1px solid var(--line);
      color: var(--ink);
    }

    .simulation-row> :first-child {
      border-left: 0;
      color: var(--ink);
    }

    .simulation-row strong {
      color: var(--sys-black);
    }

    .simulation-score {
      display: grid !important;
      justify-items: center;
      gap: 4px;
      justify-content: center;
      color: var(--gold);
      font-size: 15px;
      font-weight: 950;
    }

    .simulation-score small {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      color: var(--ink);
    }

    .simulation-effects {
      flex-wrap: wrap;
      gap: 4px;
      color: var(--ink);
    }

    .simulation-compact {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 8px;
    }

    .sim-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .sim-group {
      display: grid;
      gap: 5px;
      color: var(--ink);
    }

    .sim-label {
      color: var(--sys-gray2);
      font-size: 11px;
      font-weight: 900;
    }

    .sim-segment {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      overflow: hidden;
    }

    .sim-segment:has([data-sim-finish]) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sim-chip {
      min-height: 32px;
      border: 0;
      border-left: 1px solid var(--line);
      background: transparent;
      color: var(--sys-gray2);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .sim-chip:first-child {
      border-left: 0;
      color: var(--ink);
    }

    .sim-chip.active {
      background: var(--grass-deep);
      color: var(--sys-black);
    }

    .sim-result-panel {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 8px;
      display: grid;
      gap: 8px;
    }

    .sim-result-title {
      color: var(--gold);
      font-size: 13px;
      font-weight: 950;
    }

    .sim-result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .sim-team-box {
      border: 1px solid var(--line);
      background: var(--surface-strong-bg);
      padding: 8px;
      display: grid;
      gap: 6px;
    }

    .sim-team-box.winner {
      border-color: var(--gold);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent);
    }

    .sim-team-name {
      color: var(--surface-strong-text);
      font-size: 13px;
      font-weight: 900;
    }

    .sim-score-line {
      color: var(--gold);
      font-size: 23px;
      font-weight: 950;
      line-height: 1;
    }

    .sim-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      color: var(--ink);
    }

    @media (max-width: 560px) {
      .sim-controls {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .inning-board,
      .inning-edit-board {
        grid-template-columns: 24px minmax(0, 1fr) 22px;
        color: var(--ink);
      }

      .inning-board {
        padding: 10px 6px;
        color: var(--ink);
      }

      .inning-edit-board {
        --inning-col-width: 25px;
        --inning-row-height: 27px;
        color: var(--ink);
      }

      .inning-cell.total {
        font-size: 13px;
        color: var(--ink);
      }

      .inning-edit-board input {
        font-size: 12px;
        padding: 0;
        color: var(--ink);
      }

      .inning-cell {
        font-size: 12px;
        color: var(--ink);
      }

      .inning-cell.head,
      .inning-cell.team-label {
        font-size: 9px;
        color: var(--ink);
      }

      .insight-card h3,
      .insight-card strong {
        font-size: 13px;
        color: var(--ink);
      }

      .school-flag,
      .user-tag {
        min-height: 20px;
        font-size: 10px;
        color: var(--ink);
      }
    }

    .mini-tag {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 5px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      white-space: nowrap;
    }

    button.mini-tag {
      appearance: none;
      border-radius: 0;
      color: var(--ink);
    }

    .mini-tag.applied {
      border-color: color-mix(in srgb, var(--gold) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--gold) 16%, var(--surface-strong-bg));
      color: var(--gold);
    }

    .mini-tag.pending {
      border-color: color-mix(in srgb, var(--surface-strong-accent) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--surface-strong-accent) 16%, var(--surface-strong-bg));
      color: var(--surface-strong-accent);
    }

    .mini-tag.out {
      border-color: var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-muted);
    }

    .rule-popover {
      position: fixed;
      inset: 0;
      z-index: 230;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: var(--surface-overlay);
    }

    .rule-popover.open {
      display: flex;
      color: var(--ink);
    }

    .rule-popover-card {
      width: min(100%, 420px);
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg);
      box-shadow: 0 18px 52px color-mix(in srgb, var(--sys-black) 48%, transparent);
    }

    .rule-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      border-bottom: 1px solid var(--surface-strong-border);
      color: var(--ink);
    }

    .rule-popover-head h3 {
      margin: 0;
      color: var(--surface-strong-accent);
      font-size: 16px;
    }

    .rule-popover-close {
      width: 34px;
      height: 34px;
      border: 1px solid var(--surface-strong-border);
      border-radius: 50%;
      background: var(--surface-strong-bg-3);
      color: var(--surface-strong-text);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    .rule-popover-body {
      display: grid;
      gap: 10px;
      padding: 12px;
      color: var(--surface-strong-text);
      font-size: 13px;
      line-height: 1.55;
    }

    .rule-popover-body p {
      margin: 0;
      color: var(--ink);
    }

    .rule-popover-body .impact-calc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      color: var(--ink);
    }

    .rule-popover-body .impact-calc span {
      padding: 7px;
      border: 1px solid var(--surface-strong-border);
      background: var(--surface-strong-bg-2);
      color: var(--surface-strong-text);
      font-weight: 900;
    }

    .seed-impact {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--gold) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--gold) 14%, var(--surface-strong-bg));
    }

    .bonus-impact {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--surface-strong-border));
      background: color-mix(in srgb, var(--danger) 14%, var(--surface-strong-bg));
    }

    .seed-impact h3,
    .bonus-impact h3 {
      margin: 0;
      color: var(--gold);
      font-size: 14px;
    }

    .seed-impact p,
    .bonus-impact p {
      margin: 0;
      color: var(--surface-strong-text);
      font-size: 12px;
      line-height: 1.45;
    }

    .rules-list {
      display: grid;
      gap: 10px;
      color: var(--ink);
    }

    #rules>.panel {
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    #rules .panel-head {
      display: none;
    }

    #rules .panel-body {
      padding: 0;
    }

    .rules-special-overview {
      padding: 0;
      border-bottom: 0;
      margin-bottom: 10px;
      background: transparent;
      color: var(--ink);
    }

    .rules-special-overview:empty {
      display: none;
    }

    .rule-dynamic-description {
      display: grid;
      gap: 10px;
    }

    .rule-overview-card {
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .rule-overview-head {
      min-height: 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
    }

    .rule-overview-head span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .rule-overview-body {
      display: none;
      padding: 12px;
      border-top: 1px solid var(--line);
    }

    .rule-overview-card.open .rule-overview-body {
      display: grid;
      gap: 10px;
    }

    .rule-dynamic-description h4 {
      margin: 0;
      color: var(--accent);
      font-size: 15px;
      font-weight: 950;
    }

    .rule-dynamic-description p {
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.6;
    }

    .rule-card {
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .rule-card-head {
      min-height: 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: var(--panel);
    }

    .rule-card-head strong {
      display: block;
      font-size: 15px;
      font-weight: 950;
      color: var(--ink);
    }

    .rule-card-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .rule-card-body {
      display: none;
      padding: 12px;
      border-top: 1px solid var(--line);
      color: var(--ink);
    }

    .rule-card.open .rule-card-body {
      display: block;
      color: var(--ink);
    }

    .rule-card-body p {
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.65;
    }

    .rule-card-body ul {
      margin: 0;
      padding-left: 18px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.7;
    }

    .rule-score-table {
      width: 100%;
      margin-top: 2px;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 12px;
      color: var(--ink);
    }

    .rule-score-table th,
    .rule-score-table td {
      padding: 7px 4px;
      border: 1px solid var(--line);
      text-align: center;
      color: var(--ink);
    }

    .rule-score-table th {
      background: var(--grass);
      color: var(--sys-black);
    }

    .rule-admin-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      margin: 12px 0;
      align-items: end;
      color: var(--ink);
    }

    .rule-admin-tools label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .rule-admin-tools select,
    .rule-admin-tools button {
      min-height: 38px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      font-weight: 900;
    }

    .rule-admin-tools button {
      padding: 0 12px;
      background: var(--grass);
      color: var(--sys-black);
      cursor: pointer;
    }

    .rule-edit-textarea {
      width: 100%;
      min-height: 104px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      padding: 8px;
      font: inherit;
      font-size: 13px;
      line-height: 1.55;
      box-sizing: border-box;
    }

    .rule-settings-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
      color: var(--ink);
    }

    .rule-settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      color: var(--ink);
    }

    .rule-settings-grid label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .rule-settings-grid input,
    .rule-settings-grid select {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 900;
    }

    .rule-admin-card {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .rule-admin-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 8px;
      align-items: end;
      color: var(--ink);
    }

    .rule-admin-row label,
    .rule-child-editor label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    .rule-admin-row input,
    .rule-child-editor input {
      width: 100%;
      min-height: 36px;
      border: 1px solid var(--surface-input-border);
      background: var(--surface-input-bg);
      color: var(--ink);
      box-sizing: border-box;
      font-weight: 900;
    }

    .rule-child-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .rule-child-editor {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .rule-child-title {
      margin-top: 8px;
      color: var(--grass);
      font-size: 12px;
      font-weight: 950;
    }

    .ranking-extra {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      color: var(--ink);
    }

    .ranking-extra-title {
      margin: 0;
      color: var(--grass);
      font-size: 15px;
      font-weight: 950;
    }

    .team-rank-list,
    .award-list {
      display: grid;
      gap: 8px;
      color: var(--ink);
    }

    .team-rank-card,
    .award-card {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid var(--line);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--extra-team-color, var(--panel)) 18%, var(--panel)), var(--panel) 46%);
      border-left: 6px solid var(--extra-team-color, var(--line));
    }

    .team-rank-head,
    .award-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      font-weight: 950;
      color: var(--ink);
    }

    .team-rank-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      color: var(--ink);
    }

    .team-rank-metrics span {
      padding: 6px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--sys-white) 72%, transparent);
      text-align: center;
      font-size: 11px;
      font-weight: 900;
    }

    .award-card {
      border-left-color: var(--gold);
      background: var(--panel);
    }

    .award-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    @media (max-width: 820px) {

      .grid.cols-3,
      .grid.cols-2,
      .grid.cols-2-even {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .scoreboard {
        grid-template-columns: 1fr;
        text-align: center;
        color: var(--ink);
      }

      .score {
        justify-content: center;
        color: var(--ink);
      }

      .game-row {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .hero {
        min-height: 118px;
        padding-bottom: 42px;
        color: var(--ink);
      }

      .hero.has-top-notice #heroTournamentName {
        margin-top: 9px;
        color: var(--ink);
      }

      .shell {
        margin-top: -30px;
        color: var(--ink);
      }

      .nav {
        position: sticky;
        top: 0;
        z-index: 90;
        color: var(--ink);
      }

      .panel-head {
        align-items: flex-start;
        flex-direction: column;
        color: var(--ink);
      }

      .pick-panel-head {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title countdown"
          "sort sort"
          "odds odds";
        align-items: center;
        color: var(--ink);
      }

      .daily-team {
        font-size: clamp(12px, 3.1vw, 15px);
        color: var(--ink);
      }

      .game-score {
        font-size: clamp(16px, 5vw, 22px);
        color: var(--ink);
      }

      .score-line {
        --schedule-mid-col-width: 76px;
        grid-template-columns: minmax(0, 1fr) var(--schedule-mid-col-width) minmax(0, 1fr);
        color: var(--ink);
      }

      .cards {
        grid-template-columns: 1fr;
        color: var(--ink);
      }

      .primary-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        color: var(--ink);
      }

      .table-wrap {
        max-height: 72vh;
        color: var(--ink);
      }

      th,
      td {
        padding: 2px 0;
        font-size: 9px;
        color: var(--ink);
      }

      .rank {
        width: 18px;
        color: var(--ink);
      }

      th {
        font-size: 8px;
        color: var(--ink);
      }

      th.rank-head {
        width: 18px;
        color: var(--ink);
      }

      .school-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        color: var(--ink);
      }

      .primary-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        color: var(--ink);
      }

      .school-option,
      .primary-chip {
        border-radius: 10px;
        color: var(--ink);
      }

      .school-option {
        min-height: 62px;
        padding: 6px 4px;
        color: var(--ink);
      }

      .school-name {
        font-size: 11px;
        color: var(--ink);
      }

      .school-sub {
        font-size: 8px;
        color: var(--ink);
      }

      .primary-chip {
        min-height: 74px;
        padding: 5px;
        color: var(--ink);
      }

      .primary-chip .muted {
        font-size: 9px;
        color: var(--ink);
      }

      .primary-chip .slot-school {
        font-size: 11px;
        color: var(--ink);
      }

      .primary-chip .slot-meta {
        font-size: 9px;
        color: var(--ink);
      }
    }

/* Final stadium theme overrides */
:root {
  --stadium-navy: #071626;
  --stadium-gold: #d8a43a;
  --stadium-gold-bright: #ffd36a;
  --theme-color: var(--stadium-gold);
  --theme-color-deep: #a86f17;
  --grass: var(--stadium-gold);
  --grass-deep: #a86f17;
  --gold: var(--stadium-gold-bright);
  --button-fg: #071626;
  --nav-alert-ring: rgba(255, 255, 255, .92);
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 211, 106, .28) 0 2px, transparent 3px 100px),
    radial-gradient(circle at 88% 8%, rgba(255, 211, 106, .2) 0 2px, transparent 3px 120px),
    radial-gradient(ellipse at 50% -4%, rgba(255, 211, 106, .22), transparent 34%),
    linear-gradient(180deg, #06111f 0, #071626 180px, #eef0f5 181px, #f4f5f8 100%) !important;
  background-attachment: fixed !important;
}

.hero {
  min-height: 128px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .44)),
    radial-gradient(circle at 9% 26%, rgba(255, 238, 190, .72) 0 2px, transparent 3px 82px),
    radial-gradient(circle at 91% 28%, rgba(255, 238, 190, .6) 0 2px, transparent 3px 90px),
    linear-gradient(135deg, #071626 0%, #102b47 52%, #06111f 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 211, 106, .52);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12), 0 14px 30px rgba(5, 13, 24, .18);
}

.hero::before {
  background:
    linear-gradient(115deg, transparent 0 8%, rgba(255, 211, 106, .22) 8.5%, transparent 10% 100%),
    linear-gradient(295deg, transparent 0 9%, rgba(255, 211, 106, .16) 9.6%, transparent 11% 100%) !important;
  opacity: .75;
}

.hero::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stadium-gold-bright), transparent);
}

#heroTournamentName,
.hero-copy,
.hero-notice-row {
  color: #fff !important;
}

#heroTournamentName {
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 18px rgba(255, 211, 106, .22);
}

.user-pill,
.close-modal {
  border-color: rgba(255, 211, 106, .48) !important;
  background: rgba(6, 17, 31, .78) !important;
  color: var(--stadium-gold-bright) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.menu-bars i {
  background: currentColor !important;
}

.shell {
  margin-top: -18px;
}

.nav {
  border: 1px solid rgba(216, 164, 58, .42) !important;
  background: linear-gradient(180deg, rgba(11, 28, 47, .96), rgba(6, 17, 31, .96)) !important;
  box-shadow: 0 10px 24px rgba(5, 13, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .09);
}

.nav button {
  color: rgba(255, 255, 255, .9) !important;
  background: transparent !important;
  border-right-color: rgba(216, 164, 58, .28) !important;
  font-weight: 900;
}

.nav button.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 8px 18px rgba(216, 164, 58, .22);
}

.nav.nav-pinned button.active::after {
  color: #06111f !important;
}

.nav-alert,
.badge.gold,
.badge.warn,
.badge.ok {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  border-color: rgba(255, 255, 255, .58) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .22);
}

.panel,
.admin-section,
.history-toggle,
.history-item,
.rule-overview-card,
.rule-card,
.table-wrap {
  border-color: rgba(7, 22, 38, .14) !important;
  background: rgba(8, 22, 38, .88) !important;
  box-shadow: 0 8px 22px rgba(9, 28, 47, .08);
}

.panel-head,
.admin-accordion-head,
.ranking-toolbar,
.history-head,
.rule-overview-head,
.rule-card-head {
  border-bottom-color: rgba(7, 22, 38, .12) !important;
  background: rgba(6, 17, 31, .72) !important;
}

.todo-toggle-button,
.modal-actions .primary,
.profile-edit-button,
.settings-actions button,
.school-admin-actions button.primary,
.user-admin-actions button.primary,
.tournament-card-actions button,
.tournament-picker-row button,
.create-tournament-box button {
  border-color: var(--stadium-gold) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

.sort-buttons button.active,
.odds-buttons button.active,
.schedule-mode button.active,
.pick-tournament-tabs button.active,
.system-settings-tabs button.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  border-color: var(--stadium-gold) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(216, 164, 58, .38);
  border-color: var(--stadium-gold) !important;
}

.match-modal {
  background: rgba(2, 7, 14, .62) !important;
  backdrop-filter: blur(2px);
}

.match-dialog {
  border: 1px solid rgba(216, 164, 58, .38) !important;
  background: linear-gradient(180deg, rgba(249, 250, 253, .98), rgba(236, 239, 245, .98)) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .34);
}

.match-dialog-head {
  background: linear-gradient(180deg, #071626, #102b47) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(216, 164, 58, .52) !important;
}

.match-dialog-head h2 {
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.match-dialog-head .close-modal {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}

.daily-game,
.tracked-game,
.todo-item,
.school-row,
.user-admin-row,
.tournament-summary-match,
.simple-user-row {
  background: rgba(8, 22, 38, .78) !important;
  border-color: rgba(7, 22, 38, .12) !important;
}

th {
  background: rgba(7, 22, 38, .08) !important;
}

@media (max-width: 560px) {
  .hero {
    min-height: 132px;
  }

  .shell {
    margin-top: -16px;
  }

  .nav {
    margin-inline: 14px;
  }
}

/* Final button and schedule contrast pass */
.accordion-action,
.todo-toggle-button,
button[data-simple-section-toggle],
button[data-admin-section-toggle] {
  border: 1px solid var(--stadium-gold) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #06111f !important;
  font-weight: 900;
}

.accordion-action:hover,
.todo-toggle-button:hover,
button[data-simple-section-toggle]:hover,
button[data-admin-section-toggle]:hover {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

.date-strip,
.daily-games,
.tracked-games,
.daily-game,
.tracked-game,
.schedule-date-head,
.schedule-mode {
  background: rgba(8, 22, 38, .78) !important;
  border-color: rgba(255, 211, 106, .18) !important;
  color: #eef5ff !important;
}

.date-strip button {
  background: rgba(255, 255, 255, .94) !important;
  color: #06111f !important;
}

.game-score,
.status-line,
.round-line,
.team-name,
.team-sub {
  color: inherit;
}

/* Gold actions and readable dark schedule rows */
.accordion-action,
.todo-toggle-button,
.admin-accordion-head button,
.history-head button,
.rule-overview-head button,
.rule-card-head button,
.tournament-summary-round-head button,
button[data-simple-section-toggle],
button[data-admin-section-toggle] {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
}

.date-strip,
.current-date-label,
.schedule-date-head {
  background: rgba(6, 17, 31, .92) !important;
  color: #eef5ff !important;
  border-color: rgba(255, 211, 106, .22) !important;
}

.date-strip strong,
.date-strip span,
.current-date-label,
.schedule-date-head strong,
.schedule-date-head span {
  color: #eef5ff !important;
}

.date-strip button,
.schedule-date-head button,
#prevDate,
#nextDate {
  background: rgba(6, 17, 31, .96) !important;
  color: #eef5ff !important;
  border: 1px solid rgba(255, 211, 106, .32) !important;
}

.date-strip button:hover,
.schedule-date-head button:hover,
#prevDate:hover,
#nextDate:hover {
  background: rgba(13, 34, 56, .98) !important;
  color: var(--stadium-gold-bright) !important;
}

.daily-games,
.daily-game,
.tracked-games,
.tracked-game,
.game-main,
.round-line,
.score-line,
.status-line,
.game-score,
.daily-team,
.team-name,
.team-sub {
  color: #eef5ff !important;
}

.daily-game .muted,
.tracked-game .muted,
.status-line,
.team-sub {
  color: rgba(238, 245, 255, .72) !important;
}

/* Stadium theme hard overrides: keep primary toggles gold and schedule controls readable. */
.accordion-action,
.todo-toggle-button,
.admin-accordion-toggle,
.history-toggle .accordion-action,
.panel-toggle .accordion-action,
.rule-overview-head .accordion-action,
.rule-card-head .accordion-action,
.tournament-summary-round-head .accordion-action,
button[data-simple-section-toggle],
button[data-simple-school-toggle],
button[data-admin-section-toggle] {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  border: 1px solid var(--stadium-gold-bright) !important;
  color: #06111f !important;
  box-shadow: 0 5px 14px rgba(211, 159, 43, .24) !important;
}

.accordion-action:hover,
.todo-toggle-button:hover,
.admin-accordion-toggle:hover,
button[data-simple-section-toggle]:hover,
button[data-simple-school-toggle]:hover,
button[data-admin-section-toggle]:hover {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

.date-strip,
#currentDateLabel {
  background: rgba(6, 17, 31, .96) !important;
  color: #eef5ff !important;
}

.date-strip *,
#currentDateLabel,
#currentDateLabel * {
  color: #eef5ff !important;
}

.date-strip button,
#prevDate,
#nextDate {
  background: rgba(6, 17, 31, .98) !important;
  border: 1px solid rgba(255, 211, 106, .36) !important;
  color: #eef5ff !important;
}

/* Stadium surface cleanup: replace pale page gaps with navy and make round badges gold. */
.app,
.shell,
.views-viewport,
.view,
.panel-body,
.schedule-pane,
#gamesPane,
#top,
#schedule {
  background:
    linear-gradient(180deg, rgba(7, 22, 38, .98), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
}

.panel,
.history-panel,
.tracked-panel,
.simple-settings-view,
.admin-section {
  background: rgba(6, 17, 31, .92) !important;
  color: #eef5ff !important;
}

.round-badge,
.round-line .round-badge,
.daily-game .round-badge,
.tracked-game .round-badge {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  border: 1px solid var(--stadium-gold-bright) !important;
  color: #06111f !important;
  box-shadow: 0 2px 7px rgba(216, 164, 58, .22) !important;
  font-weight: 900 !important;
}

/* Separate dark content blocks from the page background without returning to pale panels. */
.app,
.shell,
.views-viewport,
.view,
.panel-body,
.schedule-pane,
#gamesPane,
#top,
#schedule {
  background:
    linear-gradient(180deg, rgba(3, 11, 20, .98), rgba(2, 8, 15, .98)) !important;
}

.panel,
.history-panel,
.tracked-panel,
.simple-settings-view,
.admin-section,
.history-toggle,
.todo-panel .history-toggle {
  background:
    linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(7, 22, 38, .96)) !important;
  border: 1px solid rgba(255, 211, 106, .20) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.daily-games,
.tracked-games,
.daily-game,
.tracked-game,
.date-strip {
  background:
    linear-gradient(180deg, rgba(9, 27, 45, .98), rgba(6, 19, 33, .98)) !important;
  border-color: rgba(255, 211, 106, .20) !important;
}

.daily-game + .daily-game,
.tracked-game + .tracked-game {
  border-top-color: rgba(255, 211, 106, .16) !important;
}

/* Restore the main three-tab navigation size and position after the stadium theme pass. */
.nav {
  width: calc(100% - 28px) !important;
  max-width: 560px !important;
  margin: -14px auto 18px !important;
  padding: 8px !important;
}

.nav-track {
  gap: 6px !important;
}

.nav button {
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

.nav button.active {
  min-height: 48px !important;
}

@media (min-width: 720px) {
  .nav {
    max-width: 1128px !important;
    margin-top: -18px !important;
  }
}

/* Mobile header/nav proportions should match the original compact layout. */
@media (max-width: 560px) {
  .hero {
    min-height: 92px !important;
    padding: 16px 14px 10px !important;
  }

  .hero-inner {
    padding: 0 !important;
  }

  #heroTournamentName {
    max-width: calc(100% - 74px) !important;
    font-size: 18px;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  .hero-copy {
    max-width: calc(100% - 72px) !important;
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
  }

  .shell {
    margin-top: -24px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .hero::after {
    display: none !important;
  }

  .shell::before {
    content: "" !important;
    position: absolute !important;
    left: -20px !important;
    right: -20px !important;
    top: 24px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--stadium-gold-bright), transparent) !important;
    opacity: .9 !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 14px !important;
    padding: 6px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .nav-track {
    gap: 4px !important;
  }

  .nav button {
    min-height: 42px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .nav button.active {
    min-height: 38px !important;
  }

  .view {
    padding-top: 12px !important;
  }
}

/* Remove decorative light dots from the header; keep the dark stadium surface clean. */
.hero,
body {
  background-image:
    linear-gradient(135deg, #071626 0%, #102b47 52%, #06111f 100%) !important;
}

.hero::before {
  opacity: .35 !important;
}

/* Keep date text clean: the date strip owns the surface, the label itself should not. */
#currentDateLabel,
#currentDateLabel *,
.date-strip strong,
.date-strip span {
  background: transparent !important;
  box-shadow: none !important;
}

/* Stadium loading gate: single navy field with gold copy. */
.boot-gate {
  background: #071626 !important;
  color: var(--stadium-gold-bright) !important;
}

.boot-card {
  width: min(420px, calc(100% - 48px)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--stadium-gold-bright) !important;
  gap: 14px !important;
}

.boot-spinner {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid rgba(255, 211, 106, .24) !important;
  border-top-color: var(--stadium-gold-bright) !important;
  box-shadow: 0 0 18px rgba(255, 211, 106, .18) !important;
}

.boot-title {
  color: var(--stadium-gold-bright) !important;
  font-size: 18px !important;
  letter-spacing: .04em !important;
  text-shadow: 0 0 16px rgba(255, 211, 106, .18) !important;
}

.boot-message {
  color: rgba(255, 230, 171, .82) !important;
  font-size: 14px !important;
}

/* Keep the main navigation available while scrolling. */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
}

@supports (top: env(safe-area-inset-top)) {
  .nav {
    top: env(safe-area-inset-top) !important;
  }
}

/* Match modal stadium theme */
#matchModal {
  background: rgba(1, 8, 15, .72) !important;
  backdrop-filter: blur(5px) !important;
}

#matchModal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: #071626 !important;
  color: #eef5ff !important;
  box-shadow: 0 -20px 48px rgba(0, 0, 0, .42) !important;
}

#matchModal .match-dialog-head {
  min-height: 64px !important;
  border-bottom: 1px solid rgba(255, 211, 106, .42) !important;
  background: linear-gradient(180deg, #102b47, #071626) !important;
  color: #eef5ff !important;
}

#matchModal .match-dialog-head h2 {
  color: #eef5ff !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

#matchModal .close-modal {
  border-color: rgba(255, 211, 106, .72) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #fff !important;
}

#matchModal .swap-sides,
#matchModal .modal-actions button {
  border: 1px solid rgba(255, 211, 106, .78) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .18) !important;
}

#matchModal .swap-sides:disabled,
#matchModal .modal-actions button:disabled {
  border-color: rgba(255, 211, 106, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(238, 245, 255, .42) !important;
  box-shadow: none !important;
}

#matchModal .readonly-score,
#matchModal .result-editor,
#matchModal .match-insights {
  background: #081626 !important;
  color: #eef5ff !important;
}

#matchModal .inning-board,
#matchModal .inning-edit-board {
  background: #081626 !important;
  color: #eef5ff !important;
}

#matchModal .inning-cell,
#matchModal .inning-board .inning-cell,
#matchModal .inning-edit-board input {
  border-color: rgba(255, 211, 106, .14) !important;
  background: rgba(10, 29, 48, .92) !important;
  color: #eef5ff !important;
}

#matchModal .inning-cell.head,
#matchModal .inning-cell.team-label,
#matchModal .inning-board .head,
#matchModal .inning-board .team-label {
  background: rgba(5, 16, 29, .98) !important;
  color: rgba(238, 245, 255, .78) !important;
}

#matchModal .inning-cell.total,
#matchModal .inning-board .total {
  background: rgba(255, 211, 106, .18) !important;
  color: var(--stadium-gold-bright) !important;
}

#matchModal .insight-grid,
#matchModal .simulation-table,
#matchModal .simulation-compact {
  background: #081626 !important;
  color: #eef5ff !important;
}

#matchModal .insight-card,
#matchModal .impact-row,
#matchModal .impact-calc span,
#matchModal .simulation-row {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .92) !important;
  color: #eef5ff !important;
}

#matchModal .my-pick-card {
  border-color: var(--stadium-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 106, .38), 0 0 18px rgba(216, 164, 58, .12) !important;
}

#matchModal .insight-card h3,
#matchModal .insight-card strong,
#matchModal .insight-title,
#matchModal .insight-odds-inline,
#matchModal .simulation-row > span,
#matchModal .simulation-row > strong,
#matchModal .simulation-row > div,
#matchModal .simulation-row > :first-child {
  color: #eef5ff !important;
}

#matchModal .insight-card strong,
#matchModal .simulation-score,
#matchModal .impact-row strong {
  color: var(--stadium-gold-bright) !important;
}

#matchModal .muted,
#matchModal .insight-odds-inline .muted,
#matchModal .modal-message,
#matchModal .result-fields label {
  color: rgba(238, 245, 255, .68) !important;
}

#matchModal .school-flag,
#matchModal .mini-tag {
  border-color: rgba(255, 211, 106, .7) !important;
  background: rgba(255, 211, 106, .12) !important;
  color: var(--stadium-gold-bright) !important;
}

#matchModal .mini-tag.out,
#matchModal .school-flag.out {
  border-color: rgba(238, 245, 255, .28) !important;
  background: rgba(238, 245, 255, .08) !important;
  color: rgba(238, 245, 255, .62) !important;
}

#matchModal .mini-tag.pending {
  border-color: rgba(74, 163, 255, .7) !important;
  background: rgba(74, 163, 255, .14) !important;
  color: #9fd0ff !important;
}

#matchModal .result-fields input,
#matchModal .result-fields select {
  border-color: rgba(255, 211, 106, .28) !important;
  background: rgba(4, 12, 22, .96) !important;
  color: #eef5ff !important;
}

#matchModal .simulation-compact,
#matchModal .sim-result-panel {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(6, 17, 31, .94) !important;
  color: #eef5ff !important;
}

#matchModal .sim-label {
  color: #eef5ff !important;
}

#matchModal .sim-segment {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(4, 12, 22, .94) !important;
}

#matchModal .sim-chip {
  border-left-color: rgba(255, 211, 106, .18) !important;
  background: rgba(238, 245, 255, .04) !important;
  color: #eef5ff !important;
}

#matchModal .sim-chip:first-child {
  color: #eef5ff !important;
}

#matchModal .sim-chip.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

#matchModal .sim-result-title,
#matchModal .sim-score-line {
  color: var(--stadium-gold-bright) !important;
}

#matchModal .sim-team-box {
  border-color: rgba(255, 211, 106, .20) !important;
  background: rgba(10, 29, 48, .92) !important;
  color: #eef5ff !important;
}

#matchModal .sim-team-box.winner {
  border-color: var(--stadium-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 106, .35) !important;
}

#matchModal .sim-team-name {
  color: #eef5ff !important;
}

#matchModal .user-tag {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

/* Rule popover: align bonus/seed explanations with the stadium modal theme. */
.rule-popover {
  background: rgba(1, 8, 15, .72) !important;
  backdrop-filter: blur(5px) !important;
}

.rule-popover-card {
  border: 1px solid rgba(255, 211, 106, .36) !important;
  background: #071626 !important;
  color: #eef5ff !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .48) !important;
}

.rule-popover-head {
  border-bottom: 1px solid rgba(255, 211, 106, .34) !important;
  background: linear-gradient(180deg, #102b47, #071626) !important;
  color: #eef5ff !important;
}

.rule-popover-head h3 {
  color: var(--stadium-gold-bright) !important;
}

.rule-popover-close {
  border-color: rgba(255, 211, 106, .72) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #fff !important;
}

.rule-popover-body {
  background: #071626 !important;
  color: #eef5ff !important;
}

.rule-popover-body p,
.rule-popover-body li,
.rule-popover-body span {
  color: #eef5ff !important;
}

.rule-popover-body .impact-calc span,
.seed-impact,
.bonus-impact {
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .96) !important;
  color: #eef5ff !important;
}

.seed-impact h3,
.bonus-impact h3,
.rule-popover-body strong {
  color: var(--stadium-gold-bright) !important;
}

.seed-impact p,
.bonus-impact p {
  color: rgba(238, 245, 255, .88) !important;
}

.live-badge {
  display: none !important;
}

/* Tournament board stadium surface */
#bracketPane,
#bracketPane .bracket-wrap,
#bracketMount,
.top-tournament-board,
.top-tournament-tree,
.pick-tournament-board.tree-lines.top-tournament-board {
  background: #071626 !important;
  color: #eef5ff !important;
}

#bracketMount {
  border: 1px solid rgba(255, 211, 106, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.top-tournament-board,
.pick-tournament-board.tree-lines.top-tournament-board {
  --pick-tournament-line: #fff !important;
}

.top-tournament-board .top-source-school {
  color: #eef5ff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .34) !important;
}

.top-tournament-board .top-source-school.is-user-pick {
  color: var(--stadium-gold-bright) !important;
}

.top-tournament-board .top-source-school.is-eliminated {
  color: rgba(238, 245, 255, .56) !important;
}

.top-tournament-board .top-source-school.is-user-pick.is-eliminated {
  color: rgba(255, 211, 106, .58) !important;
}

.top-tournament-board .top-source-school.is-winner {
  color: #eef5ff !important;
}

.top-tournament-board .top-source-school.is-user-pick.is-winner {
  color: var(--stadium-gold-bright) !important;
}

.top-tournament-board .pick-tournament-line-group {
  stroke: #fff !important;
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
  shape-rendering: geometricPrecision !important;
}

.top-tournament-board .pick-tournament-line-group .winner-line {
  stroke: var(--stadium-gold-bright) !important;
}

.top-tournament-board .pick-tournament-label-group text {
  fill: rgba(238, 245, 255, .58) !important;
}

.top-tournament-board .top-source-user-more {
  color: rgba(238, 245, 255, .58) !important;
}

.top-tournament-board .top-source-user-tag,
.top-tournament-board .user-tag.top-source-user-tag {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

/* School edit modal: remove the pale body and make it part of the stadium theme. */
#schoolRowModal .match-dialog {
  background: #071626 !important;
  border-color: rgba(255, 211, 106, .46) !important;
  color: #eef5ff !important;
}

#schoolRowModal .match-dialog-head {
  background: linear-gradient(180deg, #102b47, #071626) !important;
  border-bottom-color: rgba(255, 211, 106, .58) !important;
}

#schoolRowModal .match-dialog-head h2 {
  color: #eef5ff !important;
}

#schoolRowModal .close-modal {
  border: 1px solid rgba(255, 211, 106, .70) !important;
  background: rgba(8, 22, 38, .92) !important;
  color: #fff !important;
}

#schoolRowModal .name-form {
  background: #071626 !important;
  color: #eef5ff !important;
  padding: 18px !important;
  gap: 14px !important;
}

#schoolRowModal .name-form label {
  color: rgba(238, 245, 255, .72) !important;
  font-weight: 800 !important;
}

#schoolRowModal .name-form input,
#schoolRowModal .name-form select {
  min-height: 50px !important;
  border: 1px solid rgba(255, 211, 106, .44) !important;
  background: rgba(4, 12, 22, .96) !important;
  color: #eef5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

#schoolRowModal .name-form input:focus,
#schoolRowModal .name-form select:focus {
  outline: 2px solid rgba(255, 211, 106, .38) !important;
  outline-offset: 1px !important;
}

#schoolRowModal .name-form-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

#schoolRowModal .name-form-actions:has(.secondary-submit[hidden]) {
  grid-template-columns: minmax(160px, 48%) !important;
  justify-content: center !important;
}

#schoolRowModal .modal-submit,
#schoolRowModal .secondary-submit {
  min-height: 48px !important;
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16) !important;
}

#schoolRowModal .secondary-submit[hidden] {
  display: none !important;
}

#schoolRowModal .match-note {
  border-top: 1px solid rgba(255, 211, 106, .18) !important;
  background: #071626 !important;
  color: rgba(238, 245, 255, .68) !important;
}

/* Draft modal: stadium theme for sort controls, selected chips, and school choices. */
#taskModal .match-dialog {
  background: #071626 !important;
  border-color: rgba(255, 211, 106, .46) !important;
}

#taskModal .task-modal-body,
#taskModal #picks,
#taskModal #picks .panel-body {
  background: #071626 !important;
  color: #eef5ff !important;
}

#taskModal #picks .pick-summary {
  border: 1px solid rgba(255, 211, 106, .18) !important;
  background: rgba(10, 29, 48, .94) !important;
  color: rgba(238, 245, 255, .74) !important;
}

#taskModal #picks .submit-picks {
  border: 1px solid rgba(255, 211, 106, .22) !important;
  border-radius: 0 !important;
  background: rgba(10, 29, 48, .92) !important;
  color: rgba(238, 245, 255, .42) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#taskModal #picks .submit-picks.enabled,
#taskModal #picks .submit-picks:not(:disabled) {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  cursor: pointer !important;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .18) !important;
}

#taskModal #picks .submit-picks:disabled {
  background: rgba(10, 29, 48, .92) !important;
  color: rgba(238, 245, 255, .42) !important;
  opacity: 1 !important;
}

#taskModal #picks .sort-buttons,
#taskModal #picks .odds-buttons {
  background: #071626 !important;
  border-bottom: 1px solid rgba(255, 211, 106, .62) !important;
}

#taskModal #picks .sort-buttons button,
#taskModal #picks .odds-buttons button {
  border-color: rgba(255, 211, 106, .48) !important;
  background: rgba(238, 245, 255, .06) !important;
  color: #eef5ff !important;
}

#taskModal #picks .sort-buttons button.active,
#taskModal #picks .odds-buttons button.active {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

#taskModal #picks .primary-strip {
  background: #071626 !important;
  border-bottom: 1px solid rgba(255, 211, 106, .20) !important;
}

#taskModal #picks .primary-chip {
  border-color: rgba(255, 211, 106, .28) !important;
  background: rgba(238, 245, 255, .10) !important;
  color: #eef5ff !important;
}

#taskModal #picks .primary-chip.filled {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  border-color: var(--stadium-gold-bright) !important;
  color: #06111f !important;
  box-shadow: 0 4px 10px rgba(216, 164, 58, .14) !important;
}

#taskModal #picks .primary-chip.filled .slot-school,
#taskModal #picks .primary-chip.filled .slot-meta,
#taskModal #picks .primary-chip.filled .muted {
  color: #06111f !important;
}

#taskModal #picks .school-list {
  background: #071626 !important;
}

#taskModal #picks .school-option {
  border: 1px solid rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .88) !important;
  color: #eef5ff !important;
}

#taskModal #picks .school-option .school-name,
#taskModal #picks .school-option .school-sub {
  color: inherit !important;
}

#taskModal #picks .school-option.selected {
  border-color: var(--stadium-gold-bright) !important;
  background: rgba(255, 211, 106, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 106, .42) !important;
}

#taskModal #picks .school-option.locked,
#taskModal #picks .school-option.disabled,
#taskModal #picks .school-option[disabled] {
  background: rgba(238, 245, 255, .16) !important;
  border-color: rgba(238, 245, 255, .14) !important;
  color: rgba(238, 245, 255, .48) !important;
  opacity: 1 !important;
}

#taskModal #picks .school-option.pick-color-primary-selected .school-name,
#taskModal #picks .school-option.pick-color-primary-selected .school-sub,
#taskModal #picks .pick-color-primary-selected {
  color: #59a8ff !important;
}

#taskModal #picks .school-option.pick-color-final-added .school-name,
#taskModal #picks .school-option.pick-color-final-added .school-sub,
#taskModal #picks .pick-color-final-added {
  color: #3ed178 !important;
}

#taskModal #picks .school-option.pick-color-final-removed .school-name,
#taskModal #picks .school-option.pick-color-final-removed .school-sub,
#taskModal #picks .pick-color-final-removed {
  color: #ff5b52 !important;
}

#taskModal #picks .school-option.pick-color-primary-alone .school-name,
#taskModal #picks .school-option.pick-color-primary-alone .school-sub,
#taskModal #picks .pick-color-primary-alone {
  color: var(--stadium-gold-bright) !important;
}

#taskModal #picks .school-option.pick-color-protected .school-name,
#taskModal #picks .school-option.pick-color-protected .school-sub,
#taskModal #picks .pick-color-protected {
  color: rgba(238, 245, 255, .56) !important;
}

#taskModal #picks .pick-tournament-legend {
  border-color: rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .86) !important;
  color: #eef5ff !important;
}

#taskModal #picks .pick-select-tournament-board,
#taskModal #picks .pick-select-tournament-board.top-tournament-board,
#taskModal #picks .pick-tournament-board.tree-lines {
  background: #071626 !important;
  color: #eef5ff !important;
}

#taskModal #picks .pick-select-tournament-board .top-source-school {
  color: #eef5ff !important;
}

#taskModal #picks .pick-select-tournament-board .top-source-school.is-eliminated {
  color: rgba(238, 245, 255, .56) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-source-school-button {
  align-items: flex-start !important;
  color: inherit !important;
  width: 88px !important;
  min-width: 82px !important;
  max-width: 96px !important;
  height: auto !important;
  min-height: 42px !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(255, 211, 106, .24) !important;
  border-radius: 8px !important;
  background: rgba(10, 29, 48, .88) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .36) !important;
  text-align: left !important;
}

#taskModal #picks .pick-select-tournament-board .pick-source-school-button strong,
#taskModal #picks .pick-select-tournament-board .pick-source-school-odds {
  width: 100% !important;
  text-align: left !important;
}

#taskModal #picks .pick-select-tournament-board .top-source-school {
  align-items: flex-start !important;
}

#taskModal #picks .pick-select-tournament-board .pick-source-school-odds {
  color: color-mix(in srgb, currentColor 82%, rgba(238, 245, 255, .64)) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-color-primary-selected {
  color: #59a8ff !important;
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .88) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-color-final-added {
  color: #3ed178 !important;
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .88) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-color-final-removed {
  color: #ff5b52 !important;
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .88) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-color-primary-alone {
  color: var(--stadium-gold-bright) !important;
  border-color: rgba(255, 211, 106, .24) !important;
  background: rgba(10, 29, 48, .88) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-color-protected {
  color: rgba(238, 245, 255, .56) !important;
  border-color: rgba(238, 245, 255, .32) !important;
  background: rgba(238, 245, 255, .08) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-source-school-button.selected {
  border-color: var(--stadium-gold-bright) !important;
  background: rgba(255, 211, 106, .14) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 106, .42) !important;
}

/* Rules view: keep calculated examples readable on the dark theme. */
#rules .rules-special-overview,
#rules .rules-list {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #eef5ff !important;
  gap: 12px !important;
}

#rules .rule-dynamic-description {
  gap: 12px !important;
}

#rules .rule-card {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(8, 22, 38, .88) !important;
  color: #eef5ff !important;
  margin: 0 !important;
  box-shadow: 0 8px 22px rgba(5, 13, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#rules .rule-card-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  color: #eef5ff !important;
  min-height: 72px !important;
  padding: 12px 16px !important;
}

#rules .rule-card-head strong,
#rules .rule-overview-head h4 {
  color: #eef5ff !important;
}

#rules .rule-card-head span,
#rules .rule-overview-head span,
#rules .rule-card-body p,
#rules .rule-card-body li {
  color: rgba(238, 245, 255, .76) !important;
}

#rules .rule-overview-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  min-height: 72px !important;
  padding: 12px 16px !important;
}

#rules .rule-card-head button,
#rules .rule-overview-head button {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

#rules .impact-calc span,
#rules .seed-impact,
#rules .bonus-impact {
  border: 1px solid rgba(255, 211, 106, .28) !important;
  background: rgba(4, 12, 22, .96) !important;
  color: #eef5ff !important;
}

#rules .impact-calc span {
  min-height: 52px !important;
}

#rules .impact-calc strong,
#rules .seed-impact h3,
#rules .bonus-impact h3 {
  color: var(--stadium-gold-bright) !important;
}

#rules .impact-tags span {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(4, 12, 22, .88) !important;
  color: rgba(238, 245, 255, .78) !important;
}

#rules .impact-tags .applied {
  border-color: var(--stadium-gold-bright) !important;
  background: rgba(255, 211, 106, .14) !important;
  color: var(--stadium-gold-bright) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-line-group {
  stroke: #fff !important;
  stroke-opacity: 1 !important;
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-line-group .winner-line {
  stroke: var(--stadium-gold-bright) !important;
  stroke-opacity: 1 !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-label-group text {
  fill: rgba(238, 245, 255, .64) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-legend .legend-color.primary {
  background: #59a8ff !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-legend .legend-color.alone {
  background: var(--stadium-gold) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-legend .legend-color.protected {
  background: rgba(238, 245, 255, .56) !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-legend .legend-color.added {
  background: #3ed178 !important;
}

#taskModal #picks .pick-select-tournament-board .pick-tournament-legend .legend-color.removed {
  background: #ff5b52 !important;
}

[data-simple-section="simple-users"].simple-school-section {
  border: 1px solid rgba(255, 211, 106, .22) !important;
  border-left: 1px solid rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-simple-section="simple-users"]>.admin-readonly-item.tournament-summary-round-head {
  min-height: 80px;
  padding: 16px !important;
  border: 0 !important;
  background: transparent !important;
}

[data-simple-section="simple-users"]>.admin-readonly-item.tournament-summary-round-head strong {
  color: #eef5ff !important;
}

[data-simple-section="simple-users"]>.admin-readonly-item.tournament-summary-round-head small {
  color: rgba(238, 245, 255, .68) !important;
}

[data-simple-section="simple-users"] .user-admin-actions button {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .36);
}

[data-simple-section="simple-users"] .user-admin-badges .badge {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
}

[data-simple-section="simple-users"] .user-admin-card {
  border-left-color: var(--stadium-gold-bright) !important;
}

[data-simple-settings-panel="tournament"] .simple-school-section {
  border: 1px solid rgba(255, 211, 106, .22) !important;
  border-left: 1px solid rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-simple-settings-panel="tournament"] .simple-school-section>.admin-readonly-item.tournament-summary-round-head {
  min-height: 80px;
  padding: 16px !important;
  border: 0 !important;
  background: transparent !important;
}

[data-simple-settings-panel="tournament"] .simple-school-section>.admin-readonly-item.tournament-summary-round-head strong {
  color: #eef5ff !important;
}

[data-simple-settings-panel="tournament"] .simple-school-section>.admin-readonly-item.tournament-summary-round-head small {
  color: rgba(238, 245, 255, .68) !important;
}

#simple-settings,
#simple-settings .views-viewport,
#simple-settings .view,
#simple-settings .admin-section,
#simple-settings .admin-accordion-body,
#simple-settings .simple-settings-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-simple-school-section].simple-school-section {
  border: 1px solid rgba(255, 211, 106, .22) !important;
  border-left: 1px solid rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-simple-school-section]>.admin-readonly-item.tournament-summary-round-head {
  min-height: 80px;
  padding: 16px !important;
  border: 0 !important;
  background: transparent !important;
}

[data-simple-school-section]>.admin-readonly-item.tournament-summary-round-head strong,
#simpleSchoolListResult .admin-readonly-item strong,
#simpleSchoolResult .admin-readonly-item strong,
#simpleSchoolListResult .simple-school-count,
#simpleSchoolResult .simple-school-count {
  color: #eef5ff !important;
}

[data-simple-school-section]>.admin-readonly-item.tournament-summary-round-head small,
#simpleSchoolListResult .admin-readonly-item small,
#simpleSchoolResult .admin-readonly-item small,
#simpleSchoolListResult .muted-note,
#simpleSchoolResult .muted-note {
  color: rgba(238, 245, 255, .68) !important;
}

#simpleSchoolListResult .admin-readonly-item,
#simpleSchoolResult .admin-readonly-item {
  border: 1px solid rgba(255, 211, 106, .28) !important;
  border-left: 6px solid var(--stadium-gold-bright) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

#simpleSchoolListResult [data-school-edit],
#simpleSchoolResult [data-school-edit],
[data-simple-school-section] .school-delete {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

[data-simple-school-section] .simple-settings-controls,
[data-simple-school-section] .simple-display-template,
[data-simple-school-section] .table-wrap {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

[data-simple-school-section] label {
  color: rgba(238, 245, 255, .68) !important;
}

[data-simple-school-section] input,
[data-simple-school-section] select,
[data-simple-school-section] textarea {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

#simpleSchoolResult .simple-school-table-wrap,
#simpleSchoolResult .rank-table,
#simpleSchoolResult .simple-school-table {
  border-color: rgba(255, 211, 106, .22) !important;
  background: rgba(4, 12, 22, .92) !important;
  color: #eef5ff !important;
}

#simpleSchoolResult .simple-school-table th,
#simpleSchoolResult .simple-school-table td {
  border-color: rgba(255, 211, 106, .18) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

#simpleSchoolResult .simple-school-table tr:nth-child(even) td {
  background: rgba(10, 29, 48, .92) !important;
}

#rules .rule-overview-card,
#rules .rule-card {
  margin-bottom: 0 !important;
}

#rules .rule-overview-card {
  border: 1px solid rgba(255, 211, 106, .22) !important;
  background: rgba(10, 29, 48, .9) !important;
  box-shadow: 0 8px 22px rgba(5, 13, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  min-height: 0 !important;
}

#rules .rule-overview-head {
  min-height: 80px !important;
  padding: 16px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

#rules .rule-overview-card.open .rule-overview-head {
  border-bottom: 1px solid rgba(255, 211, 106, .22) !important;
}

#rules .rule-overview-body {
  display: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #eef5ff !important;
}

#rules .rule-overview-card.open .rule-overview-body {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
  border-top: 0 !important;
  background: rgba(8, 22, 38, .72) !important;
}

#adminUserNameModal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .42) !important;
  background: #06111f !important;
  color: #eef5ff !important;
}

#adminUserNameModal .name-form {
  background: linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
  border-top: 1px solid rgba(255, 211, 106, .28);
}

#adminUserNameModal .name-form label {
  color: rgba(238, 245, 255, .7) !important;
  font-weight: 900;
}

#adminUserNameModal input,
#adminUserNameModal select {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

#adminUserNameModal input::placeholder {
  color: rgba(238, 245, 255, .48) !important;
}

#adminUserNameModal input[readonly] {
  background: rgba(8, 22, 38, .86) !important;
  color: rgba(238, 245, 255, .82) !important;
}

#adminUserNameModal .name-copy-row button,
#adminUserNameModal .modal-submit,
#adminUserNameModal .secondary-submit {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#adminUserNameModal .modal-submit:disabled,
#adminUserNameModal .secondary-submit:disabled {
  border-color: rgba(255, 211, 106, .16) !important;
  background: rgba(10, 29, 48, .82) !important;
  color: rgba(238, 245, 255, .42) !important;
  box-shadow: none;
}

#adminUserNameModal .match-note {
  color: rgba(238, 245, 255, .62) !important;
}

[data-simple-section="simple-periods"] [data-period-summary-edit],
#periodSettingsSummary [data-period-summary-edit],
#simplePeriodSettingsSummary [data-period-summary-edit] {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#periodSettingsModal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .42) !important;
  background: #06111f !important;
  color: #eef5ff !important;
}

#periodSettingsModal .name-form,
#periodSettingsModal .tournament-modal-form {
  background: linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
  border-top: 1px solid rgba(255, 211, 106, .28);
}

#periodSettingsModal .period-setting-card {
  border: 1px solid rgba(255, 211, 106, .3) !important;
  border-left: 6px solid var(--stadium-gold-bright) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

#periodSettingsModal .period-setting-head,
#periodSettingsModal .period-setting-head strong,
#periodSettingsModal .period-setting-toggle span {
  color: #eef5ff !important;
}

#periodSettingsModal .period-setting-grid label,
#periodSettingsModal .period-setting-alert-grid label {
  color: rgba(238, 245, 255, .68) !important;
}

#periodSettingsModal input,
#periodSettingsModal select,
#periodSettingsModal .period-setting-picker-button {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

#periodSettingsModal .period-setting-clear-button,
#periodSettingsModal #savePeriodSettingsButton,
#periodSettingsModal #closePeriodSettingsButton,
#periodSettingsModal #reloadPeriodSettingsButton {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#periodSettingsModal button:disabled {
  border-color: rgba(255, 211, 106, .16) !important;
  background: rgba(10, 29, 48, .82) !important;
  color: rgba(238, 245, 255, .42) !important;
  box-shadow: none;
}

#periodSettingsModal .match-note {
  padding: 0 16px 16px;
  background: rgba(4, 12, 22, .98) !important;
  color: rgba(238, 245, 255, .62) !important;
}

#simplePeriodSettingsSummary .period-summary-row,
#periodSettingsSummary .period-summary-row {
  border-left-color: var(--stadium-gold-bright) !important;
}

.schedule-date-modal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .42) !important;
  background: #06111f !important;
  color: #eef5ff !important;
}

.schedule-date-modal .schedule-date-body {
  border-top: 1px solid rgba(255, 211, 106, .28) !important;
  background: linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
}

.schedule-date-modal .schedule-date-month-label,
.schedule-date-modal .schedule-date-weekday,
.schedule-date-modal .schedule-date-meta,
.schedule-date-modal .period-time-separator {
  color: #eef5ff !important;
}

.schedule-date-modal .schedule-date-weekday,
.schedule-date-modal .schedule-date-meta {
  color: rgba(238, 245, 255, .68) !important;
}

.schedule-date-modal .schedule-date-month-nav button,
.schedule-date-modal .schedule-date-cell,
.schedule-date-modal select {
  border: 1px solid rgba(255, 211, 106, .3) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

.schedule-date-modal .schedule-date-cell.selected {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

.schedule-date-modal .schedule-date-cell.outside,
.schedule-date-modal .schedule-date-cell:disabled {
  background: rgba(8, 22, 38, .46) !important;
  color: rgba(238, 245, 255, .36) !important;
}

.schedule-date-modal .period-modal-actions button {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

[data-simple-section="simple-tournament"] .admin-readonly-item,
[data-simple-section="simple-tournament"] .tournament-summary-round-head,
[data-simple-section="simple-tournament"] .tournament-summary-match,
[data-simple-section="simple-tournament"] .tournament-summary-list .admin-readonly-item {
  border-left-color: var(--stadium-gold-bright) !important;
}

[data-simple-section="simple-tournament"] [data-tournament-summary-edit],
#tournamentEditor [data-tournament-edit],
#tournamentEditor [data-tournament-save],
#tournamentEditor [data-tournament-cancel] {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .18), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#tournamentRowsModal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .42) !important;
  background: #06111f !important;
  color: #eef5ff !important;
}

#tournamentRowsModal .name-form,
#tournamentRowsModal .tournament-modal-form,
#tournamentRowsModal .tournament-editor,
#tournamentRowsModal .round-body {
  background: linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
}

#tournamentRowsModal .round-group,
#tournamentRowsModal .tournament-admin-card,
#tournamentRowsModal .side-editor,
#tournamentRowsModal .seed-editor,
#tournamentRowsModal .next-route {
  border-color: rgba(255, 211, 106, .28) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

#tournamentRowsModal .round-toggle {
  border: 0 !important;
  background: rgba(10, 29, 48, .9) !important;
  color: #eef5ff !important;
}

#tournamentRowsModal .round-toggle strong,
#tournamentRowsModal .tournament-admin-title,
#tournamentRowsModal .side-editor strong,
#tournamentRowsModal .period-setting-head strong {
  color: #eef5ff !important;
}

#tournamentRowsModal .match-no {
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

#tournamentRowsModal .tournament-admin-field label,
#tournamentRowsModal .side-editor label,
#tournamentRowsModal .seed-editor label,
#tournamentRowsModal .next-route {
  color: rgba(238, 245, 255, .68) !important;
}

#tournamentRowsModal input,
#tournamentRowsModal select,
#tournamentRowsModal .tournament-start-time-trigger {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

#tournamentRowsModal .source-toggle button {
  border: 1px solid rgba(255, 211, 106, .3) !important;
  background: rgba(8, 22, 38, .92) !important;
  color: #eef5ff !important;
}

#tournamentRowsModal .source-toggle button.active {
  border-color: var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
}

#scheduleDatePickerModal .period-modal-actions button,
#scheduleDatePickerModal .modal-actions button,
#scheduleDatePickerModal button[data-schedule-date-apply],
#scheduleDatePickerModal button[data-schedule-date-clear],
#scheduleDatePickerModal button[data-schedule-date-close] {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#tournamentStartTimeModal .tournament-start-time-actions button,
#tournamentStartTimeModal .tournament-start-time-actions .apply,
#applyTournamentStartTimeButton,
#clearTournamentStartTimeButton,
#cancelTournamentStartTimeButton {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

[data-simple-section="simple-rule-text"] .rule-card,
[data-simple-section="simple-rule-text"] .admin-readonly-item,
#ruleTextSummary .rule-card,
#simpleRuleTextSummary .rule-card,
#simpleRuleTextSummary .admin-readonly-item,
#simpleRuleTextSummary .period-summary-row {
  border-left-color: var(--stadium-gold-bright) !important;
}

#simpleRuleTextSummary .rule-settings-summary-card,
#ruleTextSummary .rule-settings-summary-card {
  border-left-color: var(--stadium-gold-bright) !important;
  background: rgba(8, 22, 38, .9) !important;
  border-top-color: rgba(255, 211, 106, .28) !important;
  border-right-color: rgba(255, 211, 106, .28) !important;
  border-bottom-color: rgba(255, 211, 106, .28) !important;
}

#simpleRuleTextSummary .rule-settings-summary-title,
#ruleTextSummary .rule-settings-summary-title {
  color: #eef5ff !important;
}

#simpleRuleTextSummary .rule-settings-summary-line,
#ruleTextSummary .rule-settings-summary-line {
  color: rgba(238, 245, 255, .68) !important;
}

[data-simple-section="simple-rule-text"] [data-open-rule-section-modal],
#ruleTextSummary [data-open-rule-section-modal],
#ruleTextModal .school-delete,
#ruleSettingsSectionModal .school-delete,
#ruleTextModal .team-recommend,
#saveRuleTextButton,
#closeRuleTextModalButton,
#reloadRuleTextButton,
#addRuleTextSectionButton,
#saveRuleSettingsSectionButton,
#closeRuleSettingsSectionButton,
#reloadRuleSettingsSectionButton {
  border: 1px solid var(--stadium-gold-bright) !important;
  background: linear-gradient(180deg, var(--stadium-gold-bright), var(--stadium-gold)) !important;
  color: #06111f !important;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(216, 164, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .36);
}

#ruleTextModal .match-dialog,
#ruleSettingsSectionModal .match-dialog {
  border: 1px solid rgba(255, 211, 106, .42) !important;
  background: #06111f !important;
  color: #eef5ff !important;
}

#ruleTextModal .name-form,
#ruleTextModal .tournament-modal-form,
#ruleSettingsSectionModal .name-form,
#ruleSettingsSectionModal .tournament-modal-form {
  background: linear-gradient(180deg, rgba(10, 29, 48, .96), rgba(4, 12, 22, .98)) !important;
  color: #eef5ff !important;
  border-top: 1px solid rgba(255, 211, 106, .28);
}

#ruleTextModal .rule-card,
#ruleTextModal .rule-card-head,
#ruleTextModal .rule-card-body,
#ruleTextModal .rule-admin-card,
#ruleTextModal .rule-child-editor,
#ruleSettingsSectionModal .rule-section-toggle-card,
#ruleSettingsSectionModal .rule-section-toggle-field {
  border-color: rgba(255, 211, 106, .28) !important;
  background: rgba(8, 22, 38, .9) !important;
  color: #eef5ff !important;
}

#ruleTextModal .rule-card-head {
  border-bottom-color: rgba(255, 211, 106, .22) !important;
}

#ruleTextModal .rule-card-head strong,
#ruleTextModal .rule-card-head span,
#ruleSettingsSectionModal .rule-section-toggle-title,
#ruleSettingsSectionModal .rule-section-toggle-state,
#ruleSettingsSectionModal label {
  color: #eef5ff !important;
}

#ruleTextModal label,
#ruleTextModal .rule-card-body,
#ruleTextModal .rule-admin-row label,
#ruleTextModal .rule-child-editor label,
#ruleTextModal .rule-child-title,
#ruleSettingsSectionModal .rule-section-edit-grid label {
  color: rgba(238, 245, 255, .68) !important;
}

#ruleTextModal input,
#ruleTextModal select,
#ruleTextModal textarea,
#ruleTextModal .rule-admin-row input,
#ruleTextModal .rule-child-editor input,
#ruleTextModal .rule-edit-textarea,
#ruleSettingsSectionModal input,
#ruleSettingsSectionModal select,
#ruleSettingsSectionModal textarea {
  border: 1px solid rgba(255, 211, 106, .34) !important;
  background: rgba(4, 12, 22, .9) !important;
  color: #eef5ff !important;
  font-weight: 900;
}

#ruleTextModal input:disabled,
#ruleTextModal select:disabled,
#ruleTextModal textarea:disabled,
#ruleTextModal input[readonly],
#ruleTextModal textarea[readonly],
#ruleSettingsSectionModal input:disabled,
#ruleSettingsSectionModal select:disabled,
#ruleSettingsSectionModal textarea:disabled,
#ruleSettingsSectionModal input[readonly],
#ruleSettingsSectionModal textarea[readonly] {
  border: 1px solid rgba(255, 211, 106, .18) !important;
  background: rgba(8, 22, 38, .72) !important;
  color: rgba(238, 245, 255, .42) !important;
  opacity: 1 !important;
}

#ruleTextModal input::placeholder,
#ruleTextModal textarea::placeholder,
#ruleSettingsSectionModal input::placeholder,
#ruleSettingsSectionModal textarea::placeholder {
  color: rgba(238, 245, 255, .42) !important;
}

#ruleTextModal .match-note,
#ruleSettingsSectionModal .match-note {
  padding: 0 16px 16px;
  background: rgba(4, 12, 22, .98) !important;
  color: rgba(238, 245, 255, .62) !important;
}

/* Rules page final alignment: make rule rows behave like the TOP standalone panels. */
#rules .rules-special-overview,
#rules .rules-list {
  display: grid !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#rules .rules-special-overview {
  margin-bottom: 20px !important;
}

#rules .rule-dynamic-description {
  display: grid !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#rules .rule-overview-card,
#rules .rule-card {
  margin: 0 !important;
  border: 1px solid rgba(72, 109, 139, .54) !important;
  background: linear-gradient(180deg, rgba(12, 34, 55, .96), rgba(8, 24, 40, .96)) !important;
  box-shadow: 0 8px 22px rgba(5, 13, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#rules .rule-overview-head,
#rules .rule-card-head {
  min-height: 82px !important;
  padding: 16px 20px !important;
  border: 0 !important;
  background: transparent !important;
}

#rules .rule-overview-card.open .rule-overview-head,
#rules .rule-card.open .rule-card-head {
  border-bottom: 1px solid rgba(255, 211, 106, .22) !important;
}

html,
body,
.app {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#rules {
  overflow-x: hidden !important;
}

#rules .rules-special-overview,
#rules .rules-list {
  width: 100% !important;
}

#rules .rule-overview-card,
#rules .rule-card {
  width: 100% !important;
  border-color: rgba(72, 109, 139, .62) !important;
  background:
    linear-gradient(180deg, rgba(12, 34, 55, .96), rgba(8, 24, 40, .96)) !important;
}

#rules .rule-overview-card:not(.open) .rule-overview-head,
#rules .rule-card:not(.open) .rule-card-head {
  border-bottom: 0 !important;
}

#rules > .panel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#rules .panel-body {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}