#gameAdminView .admin-settings-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding-bottom: 14px;
}

#gameAdminView .admin-settings-heading .settings-copy {
  margin-top: 7px;
}

.admin-settings-grid {
  gap: 0;
}

.admin-settings-panel {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  display: grid;
  gap: 13px;
  padding: 18px 0;
}

.admin-settings-panel:first-child {
  padding-top: 16px;
}

.admin-settings-panel:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-panel-copy {
  display: grid;
  gap: 5px;
}

.admin-panel-copy .eyebrow,
.admin-panel-copy h3,
.admin-panel-copy .settings-copy {
  margin: 0;
}

.admin-panel-copy h3 {
  font-size: 1.05rem;
}

.admin-setting-controls {
  align-items: end;
  background: transparent;
  border: 0;
  display: grid;
  gap: 11px;
  grid-template-columns: minmax(220px, 1fr) 120px auto;
  margin: 0;
  padding: 0;
}

.admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.admin-note {
  background: var(--surface-blue);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 11px;
}

.admin-invite-box {
  background: var(--surface-blue);
  border-style: solid;
  padding: 11px;
}

.admin-inline-form {
  margin-bottom: 0;
  max-width: 520px;
}

.admin-player-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

#gameAdminView .player-card {
  background: var(--paper);
}

@media (min-width: 1040px) {
  .admin-settings-panel {
    align-items: start;
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  }

  .admin-panel-copy {
    padding-right: 14px;
  }

  .admin-settings-panel > :not(.admin-panel-copy) {
    grid-column: 2;
    min-width: 0;
  }
}

@media (max-width: 920px) {
  .admin-setting-controls {
    grid-template-columns: 1fr;
  }

  .admin-button-row {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #gameAdminView .admin-settings-heading {
    padding-bottom: 12px;
  }

  .admin-settings-panel {
    padding: 15px 0;
  }

  .admin-invite-box {
    grid-template-columns: 1fr;
  }
}

/*
  Global design-token normalization.
  Kept in the last loaded stylesheet so the app uses one final visual layer.
*/

:root {
  --color-bg: #e3f4ff;
  --color-surface: #fff8ee;
  --color-surface-subtle: #eaf7ff;
  --color-surface-muted: #dff1fb;
  --color-border: #cfe2ee;
  --color-border-strong: #bdd6e5;
  --color-text: #24313d;
  --color-text-soft: #44515d;
  --color-text-muted: #687581;
  --color-accent: #3f7f9f;
  --color-accent-hover: #356d88;
  --color-accent-soft: #e3f4ff;
  --color-success: #3f7455;
  --color-success-soft: #e6f4ea;
  --color-success-border: #b8dcc5;
  --color-warning: #7a5f1f;
  --color-warning-soft: #fff7d9;
  --color-warning-border: #eadb98;
  --color-danger: #9b504c;
  --color-danger-soft: #fae7e5;
  --color-danger-border: #e6b3af;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 999px;

  --shadow: none;
  --shadow-soft: none;

  --mint: var(--color-accent-soft);
  --mint-strong: var(--color-accent);
  --sky: var(--color-accent-soft);
  --sky-strong: var(--color-accent);
  --rose: var(--color-danger-soft);
  --peach: var(--color-surface-subtle);
  --lemon: var(--color-warning-soft);
  --lavender: var(--color-surface-subtle);
  --success: var(--color-success-soft);
  --danger: var(--color-danger-soft);
  --ink: var(--color-text);
  --ink-soft: var(--color-text-soft);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --paper: var(--color-surface);
  --surface: var(--color-surface-subtle);
  --surface-blue: var(--color-accent-soft);
  --surface-warm: var(--color-surface-subtle);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

button,
input,
select {
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: rgba(63, 127, 159, 0.24);
}

.app-header,
.auth-panel,
.side-menu,
.view.is-active,
.game-current,
.game-form,
.overview-dashboard,
.duel-card,
.settings-panel,
.table-wrap,
.player-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
}

.side-nav-item,
.primary-button,
.ghost-button,
.small-button,
.add-player button,
.icon-button,
.text-input,
.select-input,
.score-input,
.add-player input {
  border-radius: var(--radius-sm);
}

.eyebrow,
.field label,
.profile-form label,
.side-brand span,
.side-status span,
.settings-list span,
.admin-summary span,
.fixture-row-head,
.tip-board-head {
  color: var(--color-text-muted);
  font-weight: 800;
  letter-spacing: 0.08em;
}

h1,
h2,
h3,
strong,
.match-name,
.fixture-name,
.player-card,
.tip-name {
  font-weight: 800;
}

.primary-button,
.ghost-button,
.small-button,
.add-player button,
.icon-button,
.side-nav-item {
  font-weight: 800;
}

.primary-button,
.add-player button {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.primary-button:hover,
.add-player button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: none;
}

.ghost-button,
.icon-button,
.small-button {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

.ghost-button:hover,
.side-nav-item:hover,
.icon-button:hover,
.small-button:hover:not(:disabled) {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  transform: none;
}

.link-button {
  color: var(--color-accent);
}

.side-nav-item.is-active {
  background: var(--color-surface-subtle);
  color: var(--color-text);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.account-badge,
.side-status,
.round-controls,
.tip-save-bar,
.table-status,
.score-strip,
.overview-focus,
.settings-list div,
.admin-summary div,
.admin-note,
.invite-box,
.admin-invite-box {
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

.tip-save-bar[data-state="saving"] {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tip-save-bar[data-state="dirty"],
.table-status[data-state="live"] {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.tip-save-bar[data-state="saved"] span,
.table-status[data-state="final"] {
  color: var(--color-success);
}

.table-status[data-state="final"] {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.status-pill,
.result-chip,
.dummy-tip,
.point-badge,
.points-cell strong {
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

.status-pill.open,
.dummy-tip,
.score-1 {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.status-pill.done,
.score-3,
.tip-panel.correct {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.status-pill.own,
.score-2,
.points-cell strong {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.score-0,
.tip-panel.wrong {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.score-open,
.point-badge.muted {
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.duel-scoreboard,
.tip-board,
.tip-board-row,
.fixture-row,
.table-wrap,
.player-card,
.tip-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.tip-panel.correct {
  background: var(--color-success-soft);
  border-color: var(--color-success-border);
}

.tip-panel.wrong {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}

.duel-card.is-own-duel {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
}

.duel-result {
  background: var(--color-surface-subtle);
  border-color: var(--color-border);
}

.duel-result strong,
.points-cell strong,
.link-button:hover {
  color: var(--color-accent);
}

.duel-player.is-leading {
  border-bottom-color: var(--color-success-border);
}

.duel-player.is-trailing {
  border-bottom-color: var(--color-danger-border);
}

.duel-player.is-draw {
  border-bottom-color: var(--color-warning-border);
}

.overview-kicker,
.overview-detail h3,
.overview-focus small,
.overview-detail p,
.admin-note,
.settings-copy,
.duel-meta,
.tip-side-name,
.fixture-name small,
.player-card small {
  color: var(--color-text-muted);
}

.overview-detail,
.duel-details,
.tip-side,
.tip-board-row,
th,
td,
.admin-settings-panel,
#gameAdminView .admin-settings-heading {
  border-color: var(--color-border);
}

th,
.tip-board-head,
.fixture-row-head {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

tbody tr.own-row td,
tbody tr.own-row,
.tip-side.is-current-player {
  background: var(--color-accent-soft);
}

.player-card {
  background-image: none;
}

@media (max-width: 720px) {
  tbody tr.own-row {
    background: var(--color-accent-soft);
  }

  .fixture-row,
  .tip-board-row {
    background: var(--color-surface);
  }
}