/* All design tokens live in theme.css — loaded before this file.
   No :root variable declarations here. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-data);
  background: var(--bg); color: var(--text);
  min-height: 100vh; padding: 1rem 2rem;
  display: flex; flex-direction: column;
}
h1 { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 1.5rem; font-size: var(--text-xl); }
h2 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.01em; font-size: var(--text-lg); margin-bottom: 0.75rem; color: var(--text); }
h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; margin: 0.75rem 0 0.5rem; }

.container { max-width: 1400px; width: 100%; margin: 0 auto; flex: 1; }
body.login-dialog-open .container { filter: blur(3px); pointer-events: none; transition: filter 0.15s; }

/* Tabs */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.compact-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.compact-icon-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}
.compact-icon-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
/* ── Page selector dropdown ── */
.page-selector {
  position: relative;
  display: inline-block;
  grid-column: 2;
  justify-self: center;
}
.page-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: 1.5rem;
  font-weight: 800;
  background: none;
  color: var(--text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.page-selector-btn:hover { color: var(--accent); }
.page-selector-icon { font-size: 1.1rem; }
.page-selector-arrow { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.1rem; }
.page-selector-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  padding: 0.3rem 0;
  overflow: hidden;
}
.page-selector.open .page-selector-menu { display: block; }
.page-selector-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s;
}
.page-selector-item:hover { background: var(--bg); }
.page-selector-item.active { color: var(--accent); font-weight: 600; }
.page-selector-item-icon { font-size: 1rem; flex-shrink: 0; }
.page-selector-divider { height: 1px; background: var(--border); margin: 0.3rem 0; }
.page-selector-pin-btn {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.55rem 0.85rem; font-size: 0.8rem; font-weight: 500;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  font-family: inherit; transition: background 0.1s;
}
.page-selector-pin-btn:hover { background: var(--bg); color: var(--text); }
.tab-btn {
  padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 0.9rem;
}
.tab-btn:hover { border-color: var(--accent); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-btn--info {
  background: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.tab-btn--info:hover { border-color: var(--accent); color: var(--text); }
.tab-btn--info.active {
  background: none;
  border-color: var(--accent);
  color: var(--accent);
}
.tab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border);
}
/* Tournament quick-switch chips in the nav bar */
.tournament-chips { display: contents; }
.tournament-chip { position: relative; padding-right: 1.75rem !important; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-chip .chip-check { display: none; }
.tournament-chip.active .chip-check { display: inline; margin-right: 0.2rem; }
.chip-close {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; line-height: 1; opacity: 0.55;
  background: none; border: none; cursor: pointer; color: inherit; padding: 0 0.1rem;
}
.chip-close:hover { opacity: 1; }
.active-tournament-indicator {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--color-primary-highlight);
}
.active-tournament-indicator strong {
  color: var(--text);
}
.subtabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.85rem;
}
.subtab-btn {
  padding: 0.45rem 0.85rem;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.subtab-btn:last-child { border-right: none; }
.subtab-btn.active {
  background: var(--accent);
  color: #fff;
}
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Format info button ── */
.format-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Visual size is 18px; hit area padded to 44×44px via negative margin/padding */
  width: 18px;
  height: 18px;
  padding: 13px;
  margin: -13px;
  font-size: 0.72rem;
  font-weight: 800;
  font-style: italic;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.format-info-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Format info modal ── */
#format-info-overlay {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--color-overlay-backdrop);
  z-index: 9990;
}
#format-info-dialog {
  display: none;
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-dialog);
  padding: 1.5rem;
  width: min(580px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  z-index: 9991;
  box-shadow: var(--shadow-overlay);
}
#format-info-dialog h3 { color: var(--accent); font-size: 1rem; margin: 0.9rem 0 0.4rem; }
#format-info-dialog h3:first-child { margin-top: 0; }
#format-info-dialog h4 { font-size: 0.87rem; color: var(--text); margin: 0.6rem 0 0.2rem; }
#format-info-dialog p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 0.5rem; }
#format-info-dialog p:last-child { margin-bottom: 0; }
.format-info-close-btn {
  float: right;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  margin: -0.2rem -0.2rem 0 0;
  padding: 0;
}
.format-info-close-btn:hover { color: var(--text); }

/* ── Abbreviation legend popup ── */
#abbrev-popup {
  display: none;
  position: fixed;
  z-index: 9995;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  box-shadow: var(--shadow-lg);
  font-size: 0.82rem;
  pointer-events: none;
}
#abbrev-popup table { border-collapse: collapse; }
#abbrev-popup td {
  padding: 0.12rem 0.5rem 0.12rem 0;
  color: var(--text-muted);
  vertical-align: top;
}
#abbrev-popup td:first-child {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  min-width: 2.2rem;
}
.abbrev-info-th {
  width: 0;
  padding: 0 0.35rem !important;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ── Shared info block (used in modal and Info tab) ── */
.info-block {
  padding: 0.6rem 0.85rem;
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border));
  border-radius: 8px;
  margin: 0.4rem 0 0.6rem;
}
.info-block strong { display: block; font-size: 0.86rem; color: var(--text); margin-bottom: 0.2rem; }
.info-block p { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.5; }
.info-formulas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.info-formulas code {
  display: block;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  color: var(--text);
  letter-spacing: 0.02em;
  width: fit-content;
}
.info-formula-legend {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.45rem;
  margin-bottom: 0;
}
.info-divider { border: none; border-top: 1px solid var(--border); margin: 0.9rem 0; }
.github-link { color: var(--accent); text-decoration: none; }
.github-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Linked tournaments */
.linked-tournaments {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.linked-tournaments-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.linked-tournaments-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.linked-tournament-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.linked-tournament-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}

/* ── Schema builder (Info tab) ── */
.schema-builder {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem;
  margin-top: 0.5rem;
}
.schema-builder-header {
  margin-bottom: 1rem;
}
.schema-builder-header h3 {
  font-size: 0.95rem;
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.schema-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.schema-rendering-details {
  margin-bottom: 0.85rem;
}
.schema-rendering-details summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
  padding: 0.3rem 0;
}
.schema-rendering-details summary:hover { color: var(--text); }
.schema-rendering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem 1rem;
  margin-top: 0.6rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.schema-rendering-grid .form-group { margin-bottom: 0; }
.range-val { color: var(--accent); font-weight: 600; font-size: 0.82rem; margin-left: 0.3rem; }
.schema-actions {
  text-align: center;
}
.schema-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.schema-preset-btn {
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.schema-preset-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.schema-preset-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.schema-summary {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0.75rem;
  min-height: 1.2em;
  padding: 0.4rem 0.65rem;
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--border));
  border-radius: 6px;
  transition: opacity 0.15s;
}
.schema-summary:empty { display: none; }
.schema-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

/* Forms */
.form-group { margin-bottom: 0.75rem; }
label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.25rem; }
input, select, textarea {
  width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 0.9rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
/* Accessible focus ring for keyboard navigation */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
textarea { resize: vertical; min-height: 80px; }
.inline-group { display: flex; gap: 0.5rem; }
.inline-group > * { flex: 1; }
/* Compact horizontal label+spinner, doesn't stretch */
.num-field { display: flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; }
.num-field label { margin: 0; white-space: nowrap; font-size: 0.88rem; color: var(--text-muted); }
.num-field input[type=number] { width: 64px; min-width: 0; text-align: center; padding: 0.3rem 0.4rem; }

/* ── Inline SVG icons — inherit currentColor, scale with font-size ── */
.ic {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.5rem 1rem; border: none; border-radius: 6px; cursor: pointer;
  font-size: 0.9rem; font-weight: 600;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--green); color: var(--color-on-success); }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-warning { background: var(--amber, #d97706); color: #fff; }
.btn-warning:hover { opacity: 0.9; }
.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn.loading { opacity: 0.7; pointer-events: none; position: relative; }
.btn.loading::after {
  content: ''; display: inline-block; width: 0.85em; height: 0.85em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btn-spin 0.6s linear infinite;
  margin-left: 0.4em; vertical-align: middle;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.paste-list-btn.clear-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.paste-list-btn.clear-btn:hover {
  background: var(--surface);
  border-color: var(--red);
  color: var(--red);
}

/* Tables */
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
th { color: var(--text-muted); font-weight: 600; }
tr:hover { background: var(--color-hover-overlay); }

/* Cards */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 1rem; margin-bottom: 1rem;
}

/* Two-column context layout used by Communities and Clubs tabs */
.context-grid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 1rem;
  align-items: start;
}
.context-grid-main {
  min-width: 0;
}
.context-grid-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.context-info-card {
  position: sticky;
  top: 0.85rem;
}
.context-info-card .info-block {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
/* Collapsible card via <details class="card"> */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::marker { display: none; }
details.card[open] > summary .player-codes-chevron { transform: rotate(90deg); }

/* Communities panel: keep default community selector + action balanced */
.comm-default-form-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.comm-default-select {
  flex: 1 1 340px;
  width: auto;
  min-width: 220px;
}
.comm-default-save-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.45rem 0.95rem;
  font-size: 0.86rem;
}
.comm-default-msg {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.84rem;
}
.bracket-img {
  /* Fit-to-screen: never exceed container width nor a portion of the viewport
     height, preserving aspect ratio so the whole bracket stays visible without
     page scroll. Tap/click opens the lightbox for full-resolution inspection. */
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
  margin: 0.75rem auto 0;
  cursor: zoom-in;
}
@media (max-width: 720px) {
  .bracket-img { max-height: 60vh; }
}
.admin-bracket-card .admin-bracket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-bracket-card .admin-bracket-title {
  margin: 0;
}
.admin-bracket-card .bracket-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-bracket-card .admin-bracket-hint {
  margin-top: 0.5rem;
}
/* ── Espejo dual-bracket layout (admin) ── */
.espejo-brackets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.espejo-bracket-half { min-width: 0; }
.espejo-bracket-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
@media (max-width: 600px) {
  .espejo-brackets-row { grid-template-columns: 1fr; }
}
.bracket-svg {
  /* Mirror .bracket-img fit-to-screen behavior for inline SVG schema previews.
     The viewBox preserves aspect ratio; width/height attrs are stripped in JS
     so these CSS dimensions take effect. */
  max-width: 100%;
  max-height: 75vh;
  width: 100%;
  height: auto;
  display: block;
  margin: 0.75rem auto 0;
}
@media (max-width: 720px) {
  .bracket-svg { max-height: 60vh; }
}
.bracket-collapse-left { text-align: left; }
.bracket-collapse-summary {
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.2rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.bracket-chevron-anim {
  display: inline-block;
  transition: transform 0.15s;
}
.bracket-inline { margin: 0.5rem 0; }

.schema-card-body { margin-top: 0.6rem; }
.schema-options-details { margin-bottom: 0.75rem; }
.schema-options-summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
}
.schema-options-body { margin-top: 0.5rem; }
.schema-range-value { color: var(--text-muted); }
.schema-card-msg { margin-top: 0.75rem; }
.schema-card-result { margin-top: 1rem; text-align: center; }

.btn-muted { background: var(--border); color: var(--text); }
.btn-visibility { padding: 0.25rem 0.5rem; font-size: 0.75rem; }

.badge-shared { background: var(--info, #3b82f6); color: #fff; font-size: 0.72rem; }
.reg-lobby-count { font-size: 0.8rem; color: var(--text-muted); }

.archived-lobbies-panel { margin-top: 0.5rem; padding: 0.5rem 0.75rem; }
.archived-lobbies-summary {
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  padding: 0.15rem 0;
}
.archived-lobbies-summary::-webkit-details-marker { display: none; }
.archived-lobbies-summary::before {
  content: '▶';
  font-size: 0.62rem;
  transition: transform 0.15s;
  display: inline-block;
}
details[open] .archived-lobbies-summary::before { transform: rotate(90deg); }
.archived-lobbies-summary:hover { color: var(--text); }
.archived-lobbies-body { margin-top: 0.5rem; }

.tournaments-empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-muted); }
.tournaments-empty-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.tournaments-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.tournaments-empty-hint { font-size: 0.85rem; margin-bottom: 1rem; }

.home-tournament-toolbar {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.home-search-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}
.home-search-input {
  flex: 1;
  min-width: 220px;
}
.home-filter-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}
.home-filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
}
.home-filter-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.home-filter-chip.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--text);
}
.home-filter-chip-count {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  min-width: 1.1rem;
  border-radius: 999px;
  background: var(--bg-alt, #eee);
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-align: center;
}
.home-filter-chip.active .home-filter-chip-count {
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
  color: var(--text);
}

/* Dropdown variant: a chip-styled trigger that opens a small menu of values. */
.home-filter-dropdown {
  position: relative;
  flex-shrink: 0;
}
.home-filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.home-filter-dropdown-trigger.open {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.home-filter-dropdown-dim {
  color: var(--text-muted);
  font-weight: 500;
}
.home-filter-dropdown-value {
  color: var(--text);
  font-weight: 600;
}
.home-filter-dropdown-caret {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: 0.1rem;
}
.home-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 11rem;
  max-width: 18rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-md);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.home-filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.home-filter-dropdown-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.home-filter-dropdown-item.selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.home-filter-dropdown-item-check {
  width: 0.9rem;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}
.home-filter-dropdown-item-label {
  flex: 1;
}

.export-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }

.playoff-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.playoff-header-title { margin: 0; }

.score-format-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.score-format-label { font-size: 0.82rem; color: var(--text-muted); }

.match-card-wrap { flex-wrap: wrap; }
.score-input-narrow { width: 50px; }
.match-tbd-disabled { opacity: 0.45; }
.btn-disabled-ish { cursor: not-allowed; }

.player-codes-summary {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.player-codes-title {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.player-codes-chevron {
  display: inline-block;
  transition: transform 0.18s;
  font-size: 0.7em;
  color: var(--text-muted);
}
.player-codes-actions {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.player-codes-btn { font-size: 0.75rem; }
.player-codes-body { margin-top: 0.65rem; }
.player-codes-help { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.65rem; }
.player-codes-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}
.player-codes-table-wrap {
  overflow-x: auto;
  position: relative;
}
.player-codes-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.player-codes-table-wrap.is-scrollable::after { opacity: 1; }
.player-codes-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }

/* Shared select style used in admin management tables (clubs, communities) */
.admin-sel {
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}
.player-codes-head-row { border-bottom: 2px solid var(--border); }
.player-codes-th { text-align: left; padding: 0.4rem 0.6rem; }
.player-codes-th-center { text-align: center; padding: 0.4rem 0.6rem; }
/* Sticky thead so column titles remain visible when scrolling long player /
   leaderboard tables. Background must be opaque to mask scrolled rows. */
.player-codes-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--border);
}
.player-codes-row { border-bottom: 1px solid var(--border); }
.player-codes-name { padding: 0.4rem 0.6rem; font-weight: 600; }
.player-codes-cell { padding: 0.4rem 0.6rem; }
.player-codes-cell-center { padding: 0.4rem 0.6rem; text-align: center; }
.player-codes-passphrase {
  font-size: 0.9em;
  color: var(--accent);
  user-select: all;
  cursor: pointer;
}
.player-codes-edit-wrap { display: flex; gap: 0.3rem; align-items: center; }
.player-codes-input {
  flex: 1;
  min-width: 120px;
  font-size: 0.82rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}
.player-codes-input-email { min-width: 140px; }
.player-codes-action-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
@keyframes pc-saved-flash {
  0%   { border-color: var(--green); box-shadow: 0 0 0 2px var(--color-success-highlight); }
  100% { border-color: var(--border); box-shadow: none; }
}
.player-codes-input-saved {
  animation: pc-saved-flash 1.2s ease-out;
}
.player-codes-icon-btn { font-size: 0.72rem; padding: 0.2rem 0.4rem; }
.player-codes-linked-badge { font-size: 0.78rem; opacity: 0.75; cursor: default; user-select: none; }
.player-codes-add-row { margin-top: 0.5rem; }

/* Hub link dropdown */
.pc-hub-badge { font-size: 0.82rem; opacity: 0.5; }
.pc-hub-badge--active { opacity: 1; }
.pc-hub-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-overlay-backdrop);
  display: none;
  align-items: center;
  justify-content: center;
}
.pc-hub-modal-overlay.active {
  display: flex;
}
.pc-hub-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-overlay);
  padding: 1rem;
  width: 92vw;
  max-width: 340px;
  font-size: 0.88rem;
}
@media (min-width: 600px) {
  .pc-hub-modal-box { max-width: 420px; padding: 1.2rem; font-size: 0.92rem; }
  .pc-hub-results { max-height: 320px; }
}

@media (max-width: 480px) {
  .comm-default-form-row {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .comm-default-select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1080px) {
  .context-grid-layout {
    grid-template-columns: 1fr;
  }
  .context-info-card {
    position: static;
  }
}

@media (min-width: 1024px) {
  .pc-hub-modal-box { max-width: 500px; padding: 1.4rem; font-size: 0.95rem; }
  .pc-hub-results { max-height: 400px; }
}
.pc-hub-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.pc-hub-modal-title { font-weight: 700; font-size: 0.95rem; }
.pc-hub-close-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
}
.pc-hub-close-btn:hover { background: var(--hover, rgba(0,0,0,0.08)); }
.pc-hub-modal-box .player-codes-input { width: 100%; margin-bottom: 0.5rem; }
.pc-hub-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}
.pc-hub-scope-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pc-hub-scope-btn:hover { color: var(--text); border-color: var(--accent); }
.pc-hub-scope-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pc-hub-results { max-height: 220px; overflow-y: auto; }
.pc-hub-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
}
.pc-hub-result-item:hover { background: var(--hover, rgba(0,0,0,0.05)); }
.pc-hub-result-name { font-weight: 600; font-size: 0.84rem; }
.pc-hub-result-email { font-size: 0.76rem; color: var(--text-muted); }

.create-club-picker-modal-box {
  max-width: 540px;
}
.create-club-picker-modal-box .player-codes-input {
  flex: none;
  width: 100%;
  margin-bottom: 0.5rem;
}
.create-club-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.5rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.create-club-picker-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.create-club-picker-results {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
}
.create-club-picker-results--individual {
  max-height: 340px;
}
.cpk-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.cpk-row:last-child { border-bottom: none; }
.cpk-row--added { opacity: 0.6; }
.cpk-row-name {
  font-weight: 600;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cpk-row-elo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.create-club-picker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.create-club-picker-row input[type="checkbox"] {
  flex-shrink: 0;
}
.create-club-picker-row:last-child {
  border-bottom: none;
}
.create-club-picker-row.is-added {
  opacity: 0.7;
}
.create-club-picker-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.create-club-picker-elo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 2.5rem;
  text-align: right;
}
.create-club-picker-added {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.create-club-picker-empty {
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.4rem 0.2rem;
}

/* Team mode picker */
.create-club-picker-modal-box.is-team-mode {
  max-width: 700px;
}
.create-club-picker-results--team {
  overflow: hidden !important;
  max-height: 380px;
}
.ccpicker-team-layout {
  display: flex;
  gap: 0;
  height: 380px;
}
.ccpicker-team-players {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 0.6rem;
  border-right: 1px solid var(--border);
}
.ccpicker-team-panel {
  width: 175px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding-left: 0.6rem;
  overflow: hidden;
}
.ccpicker-panel-header {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.3rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.ccpicker-add-btn {
  flex-shrink: 0;
}
.ccpicker-team-card {
  margin-bottom: 0.65rem;
}
.ccpicker-team-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.ccpicker-team-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0.08rem 0;
}
.ccpicker-team-slot--filled { font-weight: 600; }
.ccpicker-team-slot--empty { color: var(--text-muted); font-style: italic; }
.ccpicker-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 0 0.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.ccpicker-remove-btn:hover { color: var(--red, #dc3545); }
.ccpicker-team-empty {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  padding: 0.3rem 0;
}
.ccpicker-confirm-row {
  flex-shrink: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.ccpicker-team-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
@media (max-width: 560px) {
  .ccpicker-team-layout { flex-direction: column; height: auto; max-height: 500px; }
  .ccpicker-team-players { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 0.5rem; max-height: 220px; }
  .ccpicker-team-panel { width: 100%; padding-left: 0; padding-top: 0.5rem; max-height: 200px; }
}

.clubs-attach-created-mobile {
  display: none;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 640px) {
  .clubs-attach-created-col {
    display: none;
  }

  .clubs-attach-created-mobile {
    display: block;
  }
}

.player-codes-organizer {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
}
.player-codes-organizer-summary {
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.player-codes-organizer-chevron { font-size: 0.7em; color: var(--text-muted); }
.player-codes-organizer-body { padding: 0.6rem 0; }
.player-codes-organizer-textarea {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.player-codes-organizer-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }

.playoff-editor-est-note { color: var(--text-muted); font-size: 0.8rem; }
.playoff-editor-intro { color: var(--text-muted); font-size: 0.85rem; }
.playoff-editor-inline-group { margin-bottom: 0.75rem; }

.playoff-editor-external-box {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
}
.playoff-editor-external-title { font-size: 0.95rem; margin-top: 0; }
.playoff-editor-external-list { margin-bottom: 0.5rem; }
.playoff-editor-external-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.playoff-editor-external-name { min-width: 140px; }
.playoff-editor-score-input { width: 70px; }
.playoff-editor-remove-btn { padding: 0.15rem 0.5rem; }
.playoff-editor-external-add { display: flex; align-items: center; gap: 0.5rem; }
.playoff-editor-external-name-input { min-width: 200px; }

.playoff-team-item-compact { align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.playoff-team-seed { min-width: 58px; }
.playoff-team-select { min-width: 220px; }
.playoff-team-plus { color: var(--text-muted); }
.playoff-team-score {
  min-width: 70px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.playoff-team-save-btn { padding: 0.25rem 0.65rem; font-size: 0.82rem; }
.playoff-team-edit-btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.82rem;
  display: none;
}
.playoff-team-saved-badge {
  display: none;
  color: var(--success);
  font-size: 0.82rem;
  font-weight: 600;
}

.btn-lg-action { padding: 0.75rem 1.5rem; font-size: 1.1rem; }
.btn-mid-action { padding: 0.65rem 1.4rem; font-size: 1.05rem; }
.btn-xl-action { padding: 0.85rem 2rem; font-size: 1.1rem; }
.btn-block { width: 100%; }

.field-section-title-inline { margin: 0; }
.group-matches-heading {
  margin: 1rem 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gp-next-actions-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}
.notify-round-wrap { margin-top: 0.4rem; }

/* ── Group quick-nav bar ── */
.group-nav-bar {
  position: sticky;
  /* The group-playoff status bar is intentionally non-sticky during the
     group phase so this quick-nav bar is the only pinned element. */
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
}
.group-nav-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.group-nav-btn:hover { background: var(--surface2); color: var(--text); }
.group-nav-btn.has-pending::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.group-nav-btn.all-done { opacity: 0.55; }
.nav-btn-round-count {
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.7;
}

/* ── GP ops overview ── */
/* The Mexicano per-tournament status bar is sticky because it has no other
   pinned element underneath it. The group-playoff status bar (`.gp-ops-header`,
   used for both the groups and play-offs phases of the GP format and for the
   standalone Playoff format) is intentionally NOT sticky: during the groups
   phase the `.group-nav-bar` (groups / matches selector) is the only pinned
   element, and the two sticky bars would otherwise overlap or leave a gap. */
#mex-ops-header {
  position: sticky;
  top: 0;
  z-index: 11;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  margin-bottom: 0.6rem;
}
/* Slim variant once the user collapses the bar via the toggle. */
.gp-ops-header.is-collapsed .gp-ops-header-collapsible { display: none; }
.gp-ops-header.is-collapsed { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.gp-ops-header-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
.gp-ops-header-toggle:hover { color: var(--text); }
.gp-ops-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.gp-ops-header-top h3 {
  margin: 0;
}
.gp-ops-next-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.gp-ops-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.45rem;
}
.gp-ops-stat-pill {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.gp-ops-stat-pill span {
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gp-ops-stat-pill strong {
  font-size: 1.02rem;
  color: var(--text);
}

/* ── GP review queue ── */
.gp-review-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.gp-review-queue-head h3 {
  margin: 0;
}
.gp-review-filter {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: auto hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.gp-review-filter button {
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.32rem 0.58rem;
  font-size: 0.78rem;
  cursor: pointer;
  flex-shrink: 0;
}
.gp-review-filter button.active {
  background: var(--accent);
  color: #fff;
}
.gp-review-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 0.4rem 0.6rem;
}
.gp-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.gp-review-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.gp-review-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.gp-review-row-teams {
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-review-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 0.4rem;
}

/* ── Match filter toggle ── */
.match-filter-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.78rem;
  margin-left: auto;
}
.match-filter-toggle button {
  padding: 0.3rem 0.6rem;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.match-filter-toggle button.active { background: var(--accent); color: #fff; }

/* ── Collapsible group matches ── */
.group-matches-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0 0.4rem;
  user-select: none;
}
.group-matches-details summary::-webkit-details-marker { display: none; }
.group-matches-details summary::before {
  content: '▶';
  display: inline-block;
  font-size: 0.6rem;
  transition: transform 0.2s;
}
.group-matches-details[open] summary::before { transform: rotate(90deg); }
.group-matches-details .matches-summary-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.3rem;
}

/* ── Match highlight flash ── */
@keyframes match-highlight-pulse {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.match-highlight {
  animation: match-highlight-pulse 0.8s ease-out;
  border-radius: 6px;
}

/* ── Clickable court match items ── */
.court-match-item[role="button"] {
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 4px;
  padding: 0.25rem 0.35rem;
}
.court-match-item[role="button"]:hover {
  background: var(--surface2);
}
.court-match-upcoming {
  opacity: 0.55;
  font-size: 0.75rem;
  border-top: 1px dashed var(--border);
}
.court-match-upcoming:hover { opacity: 0.85; }

/* ── Clickable pending match cards (no-courts mode) ── */
.pending-match-card[role="button"] {
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.pending-match-card[role="button"]:hover {
  background: var(--surface2);
  box-shadow: 0 0 0 1px var(--border);
}

.gp-external-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.gp-external-name { min-width: 140px; }
.gp-external-add-row { display: flex; align-items: center; gap: 0.5rem; }

.proposal-actions-top { margin-top: 0.75rem; }
.proposal-actions-wide { gap: 1rem; margin-top: 0.75rem; }

.current-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.muted-text { color: var(--text-muted); }
.muted-note { color: var(--text-muted); font-size: 0.85rem; }
.muted-note-sm { color: var(--text-muted); font-size: 0.82rem; }
.muted-tiny { color: var(--text-muted); font-size: 0.75rem; }
.panel-intro { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.sitout-selection-info { margin-bottom: 0.5rem; }
.decision-actions-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.75rem;
}

.leaderboard-row-removed { opacity: 0.45; }
.badge-removed-inline { font-size: 0.7em; vertical-align: middle; }

.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0.5rem 1.25rem;
}
.pending-round-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 0.35rem;
}
.pending-match-card { margin-bottom: 0.25rem; }
.match-comment-static { cursor: default; }
.court-match-item-no-top { border-top: none; }

.proposal-progress-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}
.proposal-section-title { margin-top: 0.2rem; }
.proposal-section-title-balanced { margin-top: 0.3rem; }
.proposal-section-title-seeded { margin-top: 0.4rem; }
.proposal-section-desc { margin: 0.1rem 0 0.5rem; color: var(--text-muted); font-size: 0.82rem; }

.advanced-section-body { padding: 0.75rem 0.9rem; }
.advanced-rounds-row { display: flex; align-items: center; gap: 0.4rem; }
.mex-settings-rounds-input { width: 56px; }
.advanced-save-row { display: flex; justify-content: flex-end; margin-top: 0.6rem; }

.court-editor-save-btn { margin-left: auto; }

.manual-match-actions-row {
  margin: 0.5rem 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Bracket image lightbox ── */
#bracket-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9995;
  touch-action: pan-x pan-y pinch-zoom;
}
#bracket-lightbox.open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.bracket-lb-toolbar {
  position: fixed;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2rem;
  padding: 0.3rem 0.5rem;
  z-index: 9996;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.bracket-lb-btn {
  background: transparent;
  border: none;
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s;
  line-height: 1;
  font-family: inherit;
  flex-shrink: 0;
}
.bracket-lb-btn:hover { background: rgba(255,255,255,0.18); }
.bracket-lb-zoom-lbl {
  width: auto;
  min-width: 3.2rem;
  padding: 0 0.4rem;
  border-radius: 0.75rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.bracket-lb-close-btn { margin-left: 0.25rem; }
.bracket-lightbox-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3.5rem 1rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.bracket-lightbox-scroll img {
  /* margin: auto centers when the image fits; collapses to 0 when it overflows,
     keeping the full scroll range (including left) accessible in all browsers. */
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  cursor: inherit;
  /* allow native pinch zoom on mobile */
  touch-action: pan-x pan-y pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
}
.match-card {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.match-card:last-child { border-bottom: none; }
.match-card.active-tournament {
  background: var(--color-primary-highlight);
  padding-left: 0.6rem;
  border-radius: 4px;
}
.match-teams { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.match-teams .vs { color: var(--text-muted); margin: 0 0.3rem; }
.match-teams .team-winner { font-weight: 700; color: var(--green); }
.match-teams .team-loser { opacity: 0.6; }
.tournament-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.tournament-name-link {
  font-weight: 700; color: var(--text); text-decoration: none; cursor: pointer;
}
.tournament-name-link:hover { color: var(--accent); }
.match-court { color: var(--text-muted); font-size: 0.8rem; min-width: 80px; }
.match-score { font-weight: 700; color: var(--green); min-width: 60px; }
.match-score.sets-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.1;
}
.match-score.sets-stack .set-row {
  white-space: nowrap;
}
.match-actions { display: flex; gap: 0.3rem; align-items: center; }
.match-actions input { width: 50px; text-align: center; }
.court-board {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.court-board .court-column {
  flex: 1 1 280px;
  min-width: 0;
}
.court-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.court-board-header h3 { margin: 0; }
.court-format-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-alt, var(--surface));
  white-space: nowrap;
  margin-left: auto;
}
.court-format-chip .ic {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}
.court-board-compact {
  /* Many courts: switch to a denser grid that still stretches across the row. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 0.3rem;
}
.court-board-compact .court-column {
  flex: unset;
  padding: 0.3rem 0.4rem;
}
.court-board-compact .court-title {
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
}
.court-board-compact .court-match-item {
  font-size: 0.72rem;
  padding: 0.15rem 0;
}
.court-column {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem;
  background: var(--bg);
}
.court-title {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.court-match-item {
  font-size: 0.8rem;
  padding: 0.25rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.court-match-item:first-of-type { border-top: none; }
.court-empty-slot { color: var(--text-muted); font-style: italic; }
.court-slot {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-right: 0.3rem;
}
.court-round {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-left: 0.35rem;
}
.match-comment-banner {
  width: 100%;
  margin-top: 0.25rem;
}
.match-comment-text {
  font-size: 0.78rem;
  color: var(--accent);
  font-style: italic;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  display: inline-block;
  transition: background 0.12s;
}
.match-comment-text:hover {
  background: var(--color-active-overlay);
}
.match-comment-add {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.12s, background 0.12s;
}
.match-comment-add:hover {
  opacity: 1;
  background: rgba(148, 163, 184, 0.1);
}
.match-comment-edit {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 540px;
  margin-top: 0.3rem;
  padding: 0.35rem 0.5rem;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.match-comment-edit input {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  min-height: auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
}
.match-comment-edit input:focus {
  outline: none;
}
.match-comment-edit .btn-comment-save {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.match-comment-edit .btn-comment-save:hover {
  background: var(--accent);
  color: #fff;
}
.match-comment-edit .btn-comment-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.2rem 0.35rem;
  font-size: 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s;
}
.match-comment-edit .btn-comment-cancel:hover {
  color: var(--text);
}

.badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 10px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-scheduled { background: var(--border); color: var(--text); }
.badge-completed { background: var(--green); color: var(--color-on-success); }
.badge-dispute {
  background: rgba(217, 119, 6, 0.2); color: var(--amber, #d97706);
  border: 1px solid rgba(217, 119, 6, 0.45); cursor: default;
}
.badge-dispute-pending {
  background: rgba(37, 99, 235, 0.12); color: var(--accent, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.3); cursor: default;
  font-size: 0.68rem;
}
.badge-pending-score {
  background: rgba(37, 99, 235, 0.15); color: var(--accent, #2563eb);
  border: 1px solid rgba(37, 99, 235, 0.35); cursor: default;
}
.admin-dispute-panel {
  width: 100%; margin-top: 0.4rem; padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--amber, #d97706) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber, #d97706) 30%, transparent);
  border-radius: 8px; display: flex; flex-direction: column; gap: 0.45rem;
}
.admin-dispute-note {
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.3;
}
.admin-dispute-note.note-escalated { color: var(--red, #dc2626); font-weight: 600; }
.admin-dispute-note.note-reviewing { color: var(--text-muted); }
.admin-dispute-scores {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.admin-dispute-scores label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.admin-dispute-scores label:hover {
  background: color-mix(in srgb, var(--amber, #d97706) 10%, transparent);
}
.admin-dispute-scores label:has(input:checked) {
  background: color-mix(in srgb, var(--amber, #d97706) 15%, transparent);
  border-color: color-mix(in srgb, var(--amber, #d97706) 40%, transparent);
}
.admin-dispute-scores input[type="radio"] {
  accent-color: var(--amber, #d97706);
  margin: 0;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.admin-dispute-scores .dispute-option-text {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 0.82rem;
}
.admin-dispute-scores .dispute-score-value {
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  letter-spacing: 0.01em;
}
.admin-dispute-custom {
  padding: 0.4rem 0.55rem;
  background: color-mix(in srgb, var(--amber, #d97706) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--amber, #d97706) 25%, transparent);
  border-radius: 6px;
}
.admin-dispute-custom .custom-score-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.admin-dispute-custom input[type="number"] {
  width: 54px;
  text-align: center;
  min-height: auto;
  padding: 0.25rem 0.3rem;
}
.admin-dispute-resolve {
  align-self: flex-start;
  margin-top: 0.1rem;
}
.badge-phase { background: var(--yellow); color: var(--color-on-yellow); }
.badge-sport { background: color-mix(in srgb, var(--color-sport-tennis) 22%, transparent); color: var(--color-sport-tennis); border: 1px solid color-mix(in srgb, var(--color-sport-tennis) 45%, transparent); }
[data-theme="light"] .badge-sport,
html[data-theme="light"] .badge-sport { background: color-mix(in srgb, var(--color-sport-tennis) 15%, transparent); color: color-mix(in srgb, var(--color-sport-tennis) 85%, #000); border: 1px solid color-mix(in srgb, var(--color-sport-tennis) 35%, transparent); }
[data-theme="light"] .admin-dispute-note.note-escalated,
html[data-theme="light"] .admin-dispute-note.note-escalated { color: var(--color-error); }
[data-theme="light"] .admin-dispute-scores .dispute-score-value,
html[data-theme="light"] .admin-dispute-scores .dispute-score-value { color: var(--text); }
.badge-type { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
/* badge-type light/dark handled by --color-warning-* tokens */
.badge-lobby-open { background: var(--color-success-highlight); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); }
[data-theme="light"] .badge-lobby-open,
html[data-theme="light"] .badge-lobby-open { background: var(--color-success-highlight); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
.badge-lobby-closed { background: var(--color-error-highlight); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent); }
[data-theme="light"] .badge-lobby-closed,
html[data-theme="light"] .badge-lobby-closed { background: var(--color-error-highlight); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent); }

.alert { padding: 0.75rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-info { background: var(--color-primary-highlight); border: 1px solid var(--accent); }
.alert-success { background: rgba(34,197,94,0.15); border: 1px solid var(--green); }
.alert-error { background: rgba(239,68,68,0.15); border: 1px solid var(--red); }

/* Progress bar */
.progress-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 0.35rem; }
.progress-bar-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.3s ease; }

.hidden { display: none !important; }

/* Pairing proposal cards */
.proposal-cards { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.proposal-card {
  flex: 1; min-width: 200px; max-width: 340px;
  background: var(--bg); border: 2px solid var(--border); border-radius: 8px;
  padding: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.proposal-card:hover { border-color: var(--accent); }
.proposal-card.selected {
  border-color: var(--accent); background: var(--color-primary-highlight);
}
.proposal-card-header {
  display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem;
}
.proposal-card-header h4 { font-size: 0.9rem; margin: 0; flex: 1; }
.badge-best { background: var(--green); color: #000; }
.proposal-metrics { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; line-height: 1.6; }
.proposal-match {
  font-size: 0.8rem; padding: 0.25rem 0;
  border-top: 1px solid var(--border);
}
.proposal-match .court-tag { color: var(--text-muted); font-size: 0.72rem; }
.proposal-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.proposal-action-bar {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1rem;
}
.proposal-action-bar .btn-ghost { margin-left: auto; }

/* ── Proposal card header row (title + manual override) */
.proposal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.proposal-header-row h2 { margin: 0; }

/* ── Outline-muted and ghost button variants */
.btn-outline-muted {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-outline-muted:hover { border-color: var(--text-muted); color: var(--text); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1.4;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Courts section (collapsed summary shown before editing) */
.courts-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.courts-summary-names { color: var(--text-muted); flex: 1; min-width: 0; }

/* ── Courts editor: horizontal chip inputs (like tournament-setup rows) */
.courts-editor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  margin-top: 0.2rem;
}
.court-editor-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  transition: border-color 0.15s;
}
.court-editor-chip:focus-within { border-color: var(--accent); }
.courts-editor-input {
  width: 80px;
  min-width: 60px;
  padding: 0.15rem 0.2rem;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
}
.court-chip-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.court-chip-delete:hover { color: var(--danger, #e05252); background: color-mix(in srgb, var(--danger, #e05252) 10%, transparent); }
.courts-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.proposal-display-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0.75rem;
}
.proposal-balance-slider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.proposal-balance-slider label {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 10rem;
}
.proposal-balance-slider input[type=range] {
  flex: 1;
  min-width: 100px;
  max-width: 220px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Reuses the switch-label/switch-track pattern — no pill border */
.proposal-display-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.84rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0.2rem 0;
}
.proposal-display-toggle input[type=checkbox] { display: none; }
.proposal-display-toggle .switch-track { flex-shrink: 0; }
.proposal-display-toggle input:checked + .switch-track { background: var(--accent); }
.proposal-display-toggle input:checked + .switch-track::after { transform: translateX(16px); }
.proposal-inline-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.proposal-inline-action:hover {
  border-color: var(--accent);
  color: var(--text);
}
.proposal-inline-action.loading {
  opacity: 0.7;
  pointer-events: none;
}
.proposal-inline-action.loading::after {
  content: ''; display: inline-block; width: 0.75em; height: 0.75em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: btn-spin 0.6s linear infinite;
  margin-left: 0.3em; vertical-align: middle;
}
.proposal-progress-bar-container {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}
.proposal-progress-bar {
  height: 100%;
  width: 30%;
  background: var(--accent);
  border-radius: 3px;
  animation: proposal-progress 1.2s ease-in-out infinite;
}
@keyframes proposal-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
.proposal-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.proposal-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.proposal-section-row h3 {
  margin: 0;
}
.proposal-display-history {
  margin: 0;
}
.proposal-display-history > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.proposal-display-history > summary::-webkit-details-marker { display: none; }
.proposal-display-history > summary:hover {
  border-color: var(--accent);
  color: var(--text);
}
.proposal-display-history[open] {
  flex-basis: 100%;
  order: 99; /* drop to its own row when expanded */
}
.proposal-display-history[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
  margin-bottom: 0.45rem;
}
/* Manual editor */
.manual-editor-card { padding: 1rem; }
.manual-editor-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.manual-editor-header h2 { margin: 0; }
.manual-editor-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.manual-prefill-hint {
  color: var(--text-muted); font-size: 0.82rem; margin: 0 0 0.75rem;
}
.manual-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.manual-match-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.manual-match-card:hover { border-color: var(--accent); }
.manual-match-card.locked {
  border-color: var(--green);
  background: rgba(34,197,94,0.06);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.15);
}
.manual-match-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.25rem;
}
.manual-match-title {
  font-weight: 600; font-size: 0.9rem; color: var(--text);
}
.manual-lock-btn {
  font-size: 0.72rem !important;
  padding: 0.15rem 0.45rem !important;
  background: var(--border) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.manual-lock-btn:hover { border-color: var(--accent) !important; color: var(--text) !important; }
.manual-lock-btn.locked {
  background: rgba(34,197,94,0.15) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
}
.manual-locked-hint {
  font-size: 0.72rem; color: var(--green); margin-bottom: 0.15rem; font-style: italic;
}
.manual-team-block {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.manual-team-label {
  font-size: 0.72rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
}
.manual-vs-divider {
  text-align: center; font-size: 0.75rem; font-weight: 700;
  color: var(--text-muted); padding: 0.15rem 0; text-transform: uppercase;
}
.manual-sel {
  padding: 0.35rem 0.4rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 0.82rem; width: 100%;
  box-sizing: border-box;
}
.manual-sel:disabled {
  opacity: 0.6; cursor: not-allowed; background: var(--bg);
}
.manual-sel option, select option { background: var(--surface); color: var(--text); }
.manual-sitout-bar {
  margin: 0.5rem 0; font-size: 0.85rem; color: var(--text-muted);
  padding: 0.4rem 0.6rem; background: var(--bg); border-radius: 6px;
  border: 1px dashed var(--border);
}
/* Manual round stats card */
.manual-stats-card {
  margin: 0.75rem 0; padding: 0.75rem 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.manual-stats-title {
  font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem;
  color: var(--accent);
}
.manual-stats-card .proposal-metrics {
  font-size: 0.85rem; line-height: 1.6;
}
.manual-stats-card .repeat-detail {
  margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5;
}

/* Stats panel */
.stats-toggle { margin-bottom: 0.5rem; }
.stats-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin-bottom: 1rem; max-height: 300px; overflow-y: auto; }
.stats-panel h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.stats-player { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.stats-player:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.stats-player strong { color: var(--accent); font-size: 0.85rem; }
.stats-player .stat-list { font-size: 0.75rem; color: var(--text-muted); }

/* Playoff team editor */
.playoff-team-list { margin-bottom: 0.75rem; }
.playoff-team-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; }
.playoff-team-item .seed { color: var(--text-muted); min-width: 20px; font-size: 0.8rem; }
.playoff-team-item input { flex: 1; }
/* Missed games / sit-out management */
.sitout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.4rem; margin-bottom: 0.75rem; }
.sitout-item {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 0.82rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sitout-item:hover { border-color: var(--accent); }
.sitout-item.forced {
  border-color: var(--red); background: rgba(239,68,68,0.12);
}
.sitout-item .missed-badge {
  background: var(--border); color: var(--text); border-radius: 4px;
  padding: 0.1rem 0.35rem; font-size: 0.72rem; font-weight: 600;
}
.sitout-item.forced .missed-badge { background: var(--red); color: #fff; }

/* Per-person repeats in proposals */
.repeat-detail { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed var(--border); }
.repeat-detail .rp-name { color: var(--yellow); font-weight: 600; }

/* Editable completed match */
.match-edit-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 0.15rem 0.4rem; border-radius: 4px; cursor: pointer; font-size: 0.75rem; }
.match-edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Score breakdown panel */
.breakdown-panel { margin-top: 0.4rem; padding: 0.4rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.breakdown-table { width: 100%; font-size: 0.78rem; }
.breakdown-table th { font-size: 0.72rem; color: var(--text-muted); }
.breakdown-table td, .breakdown-table th { padding: 0.2rem 0.4rem; }

/* Tennis set inputs */
.tennis-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.tennis-set-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
}
.tennis-set-label {
  font-size: 0.8rem;
  color: var(--text);
  min-width: 24px;
  font-weight: 600;
}
.tennis-set-sep {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}
.tennis-set-input {
  width: 56px !important;
  min-height: 42px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.35rem 0.25rem;
}

/* ── Segmented toggle (Points / Sets) ── */
.score-mode-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  font-size: 0.78rem; margin-right: 0.4rem;
}
.score-mode-toggle button {
  padding: 0.3rem 0.6rem; border: none; background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.score-mode-toggle button.active { background: var(--accent); color: #fff; }

/* ── Create panel meta controls (Sport / Mode) ── */
.create-meta-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.create-meta-card {
  flex: 1;
  min-width: 240px;
}
.create-meta-toggle {
  font-size: 0.82rem;
  border-radius: 8px;
  margin-right: 0;
}
.create-meta-toggle button {
  padding: 0.3rem 0.7rem;
  font-weight: 600;
}
.create-sport-card #sport-toggle button.active[data-sport="padel"] {
  background: var(--accent);
  color: #fff;
}
.create-sport-card #sport-toggle button.active[data-sport="tennis"] {
  background: var(--sport-tennis, #10b981);
  color: #fff;
}
.create-entry-card .entry-mode-toggle button.active[data-mode="individual"] {
  background: var(--amber);
  color: var(--color-on-amber);
}
.create-entry-card .entry-mode-toggle button.active[data-mode="team"] {
  background: var(--accent);
  color: #fff;
}

#mex-rounds-toggle { font-size: 0.9rem; }
#mex-rounds-toggle button { padding: 0.45rem 1rem; }

/* ── Clubs sport toggle (global padel/tennis switch) ── */
.clubs-sport-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.clubs-sport-pill {
  background: transparent;
  border: none;
  padding: 0.45rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.clubs-sport-pill:not(:last-child) { border-right: 1px solid var(--border); }
.clubs-sport-pill:hover { background: var(--bg); }
.clubs-sport-pill--active { background: var(--accent); color: #fff; font-weight: 600; }
.clubs-sport-pill--active:hover { background: var(--accent); }
.clubs-sport-pill--active[data-sport="tennis"] { background: var(--sport-tennis, #10b981); }
.clubs-sport-pill--active[data-sport="tennis"]:hover { background: var(--sport-tennis, #10b981); }
.clubs-sport-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.clubs-sport-bar-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Clubs sticky header wrapper (sport bar + jump nav) ── */
.clubs-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ── Clubs jump-to nav ── */
.clubs-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.clubs-jump-link {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  background: transparent;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.clubs-jump-link:hover {
  background: var(--bg);
  color: var(--text);
}

/* ── Clubs card badge ── */
.clubs-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-left: 0.4rem;
  vertical-align: middle;
}
.clubs-card-badge--active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

/* ── Clubs sortable table headers ── */
.clubs-sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.clubs-sortable-th:hover { background: var(--bg); }
.clubs-sort-icon { font-size: 0.72rem; margin-left: 0.2rem; }
.clubs-sort-icon--neutral { color: var(--text-muted); opacity: 0.5; }
.clubs-sort-icon--active { color: var(--accent); }

/* ── Clubs no-email warning ── */
.clubs-no-email-warning {
  font-size: 0.82rem;
  color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 30%, transparent);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  margin: 0;
}

/* ── Clubs Comms recipients picker ── */
.clubs-recipients-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.85rem;
  background: var(--surface-alt, var(--surface));
}
.clubs-recipients-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem;
}
.clubs-recipients-title { font-weight: 600; font-size: 0.92rem; }
.clubs-recipients-status { font-size: 0.82rem; }
.clubs-recipients-toolbar {
  display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 0.5rem;
}
.clubs-recipients-filter-input {
  flex: 1; min-width: 180px;
  padding: 0.3rem 0.5rem; font-size: 0.86rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.clubs-recipients-list {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
}
.clubs-recipient-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.clubs-recipient-row:last-child { border-bottom: none; }
.clubs-recipient-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.clubs-recipient-row--all {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  font-weight: 600;
}
.clubs-recipient-row--no-email .clubs-recipient-name { color: var(--text-muted); }
.clubs-recipient-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clubs-recipient-email { white-space: nowrap; }
.clubs-compose-block { padding-top: 0.2rem; }

/* Clubs landing pinned checklist (Settings > General) */
.clubs-landing-pinned-block {
  margin-top: 0.25rem;
}

.clubs-landing-pinned-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  background: var(--surface-alt, var(--surface));
}

.clubs-landing-pinned-summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

.clubs-landing-pinned-details > .settings-help {
  margin-top: 0.45rem;
}

.clubs-landing-pinned-list {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.clubs-landing-pin-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.28rem 0.38rem;
  border-radius: 6px;
}

.clubs-landing-pin-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.clubs-landing-pin-cb {
  margin: 0;
  width: 16px;
  height: 16px;
}

.clubs-landing-pin-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clubs-landing-pin-status {
  font-size: 0.72rem;
}

.clubs-players-toolbar {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.clubs-add-player-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.clubs-add-player-label {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 500;
}
.clubs-add-player-row input[type="text"] {
  flex: 1 1 200px;
  min-width: 160px;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.clubs-add-player-msg { font-size: 0.84rem; }

.clubs-players-filter-wrap {
  display: flex;
  gap: 0.45rem;
  flex: 1 1 320px;
  min-width: 220px;
}

.clubs-players-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.clubs-players-selection-status {
  margin-left: auto;
}

.clubs-roster-notice {
  margin-bottom: 0.75rem;
  font-size: 0.84rem;
  padding: 0.5rem 0.65rem;
}

@media (max-width: 820px) {
  .clubs-players-filter-wrap {
    min-width: 0;
    width: 100%;
  }

  .clubs-players-actions {
    width: 100%;
  }

  .clubs-players-actions .btn {
    flex: 1 1 170px;
  }

  .clubs-players-selection-status {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  #clubs-players-list .player-codes-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  #clubs-players-list .player-codes-icon-btn {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.8rem;
  }

  .clubs-players-filter-wrap .btn,
  .clubs-players-filter-wrap input,
  .clubs-players-actions .btn {
    min-height: 2.25rem;
  }

  .clubs-roster-notice {
    font-size: 0.86rem;
    padding: 0.55rem 0.7rem;
  }
}

/* ── Clubs season badge (in tournament rows) ── */
.clubs-season-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-left: 0.35rem;
  vertical-align: middle;
}
.clubs-season-badge--active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ── Pill switch toggle ── */
.switch-label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--text-muted);
}
.switch-label input[type=checkbox] { display: none; }
.switch-track {
  position: relative; width: 36px; height: 20px;
  background: var(--border); border-radius: 20px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.switch-label input:checked + .switch-track { background: var(--accent); }
.switch-label input:checked + .switch-track::after { transform: translateX(16px); }

/* ── Collapsible advanced section ── */
details.advanced-section {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  overflow: hidden;
}
details.advanced-section summary {
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.83rem; font-weight: 600; color: var(--text-muted);
}
details.advanced-section summary::before { content: '⚙\FE0F\200D'; }
details.advanced-section summary::after { content: '▸'; margin-left: auto; transition: transform 0.18s; }
details.advanced-section[open] summary::after { transform: rotate(90deg); }
details.advanced-section summary::marker { display: none; }
details.advanced-section summary::-webkit-details-marker { display: none; }
details.advanced-section[open] summary { color: var(--accent); border-bottom: 1px solid var(--border); }

/* Registration lobby sections */
details.reg-section summary { cursor: pointer; user-select: none; list-style: none; }
details.reg-section summary::marker { display: none; }
details.reg-section summary::-webkit-details-marker { display: none; }
details.reg-section .tv-chevron { display: inline-block; transition: transform 0.18s; }
details.reg-section[open] .tv-chevron { transform: rotate(90deg); }
.reg-sections-group + .reg-sections-group {
  margin-top: 1.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border);
}
.badge-open { background: rgba(34,197,94,0.2); color: var(--green); border: 1px solid rgba(34,197,94,0.4); }
:root[data-theme="light"] .badge-open { background: rgba(34,197,94,0.12); color: #15803d; border: 1px solid rgba(34,197,94,0.35); }
.badge-closed { background: rgba(239,68,68,0.2); color: var(--red); border: 1px solid rgba(239,68,68,0.4); }
:root[data-theme="light"] .badge-closed { background: rgba(239,68,68,0.12); color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
.badge-converted { background: rgba(234,179,8,0.2); color: var(--yellow); border: 1px solid rgba(234,179,8,0.4); }
:root[data-theme="light"] .badge-converted { background: rgba(234,179,8,0.12); color: #a16207; border: 1px solid rgba(234,179,8,0.35); }

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.1rem;
  padding: 0.9rem;
  align-items: end;
}
.adv-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.adv-field > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.adv-field > input {
  width: 80px;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
}
.adv-field small {
  display: block; margin-top: 0.2rem;
  font-size: 0.72rem; line-height: 1.35; color: var(--text-muted);
}

/* ── Score breakdown as <details> ── */
details.breakdown-details { width: 100%; margin-top: 0.3rem; }
details.breakdown-details summary {
  cursor: pointer; font-size: 0.78rem; color: var(--text-muted); user-select: none;
}
details.breakdown-details summary:hover { color: var(--accent); }

/* ── Round accordion ── */
details.round-group { margin-bottom: 0.4rem; }
details.round-group summary {
  cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  padding: 0.4rem 0; user-select: none;
}
details.round-group summary:hover { color: var(--accent); }
details.round-group[open] summary { color: var(--text); }

/* TV controls panel chevron */
#tv-controls-panel summary::-webkit-details-marker { display: none; }
#tv-controls-panel summary::marker { display: none; }
#tv-controls-panel[open] .tv-chevron { transform: rotate(90deg); }
/* Bracket collapse chevron */
details.bracket-collapse[open] .bracket-chevron { transform: rotate(90deg); }

/* ── Per-player history dropdown ── */
.player-stats-dropdown { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.5rem; }
.player-stats-dropdown select { min-width: 160px; }
.player-stats-detail { font-size: 0.82rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.player-stats-detail .stat-row { padding: 0.15rem 0; }
.player-stats-detail .stat-label { color: var(--text-muted); font-size: 0.78rem; }

/* ── Page header ── */
.page-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  gap: 0.4rem;
}
/* Controls row: [lang] [page-selector] [theme] using 1fr auto 1fr grid. */
.page-header-title-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
}
#lang-toggle-btn {
  justify-self: start;
}
.header-toggle-btns {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  grid-column: 3;
  justify-self: end;
}
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.page-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.page-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.85rem;
}

/* ── Form grid (used in schema / playoff panels) ── */
.form-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.6rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.form-grid label { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }

/* ── Table scroll wrapper ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── TV settings grid (toggles inside TV controls card) ── */
.tv-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.tv-sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; align-items: center; }
@media (max-width: 540px) {
  .tv-settings-grid { grid-template-columns: 1fr; }
  .tv-sliders-grid { grid-template-columns: 1fr; }
}

/* ── GP Playoff Editor ── */
.gp-editor-intro {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.gp-groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gp-group-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}
.gp-group-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}
.gp-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.gp-player-row:hover {
  background: var(--color-hover-overlay);
}
.gp-player-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.gp-player-name {
  flex: 1;
  font-size: 0.88rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-player-stats {
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.gp-external-section {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}
.gp-external-section h3 {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.gp-external-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.gp-external-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  flex-wrap: wrap;
}
.gp-external-row .gp-player-name {
  min-width: 120px;
}
.gp-external-row label {
  display: inline;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}
.gp-external-row input[type="number"] {
  width: 70px;
  min-height: auto;
}
.gp-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.gp-add-row input[type="text"] {
  flex: 1;
  min-width: 160px;
}
.gp-add-row input[type="number"] {
  width: 70px;
  min-height: auto;
}
.gp-format-row {
  margin-bottom: 0.85rem;
}
.gp-format-row .form-group {
  max-width: 280px;
  margin-bottom: 0;
}

/* ── Participant manager (individual fields) ── */
.participants-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.participants-header label, .participants-header .field-section-title { margin-bottom: 0; }
.paste-list-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.paste-list-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.clear-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--danger, #e05252) 40%, transparent);
  color: var(--danger, #e05252);
  text-decoration: none;
  padding: 0.15rem 0.5rem;
}
.clear-btn:hover { color: var(--danger, #e05252); border-color: var(--danger, #e05252); background: color-mix(in srgb, var(--danger, #e05252) 8%, transparent); }
.participant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}
/* When team builder rows are present, use single-column layout */
.participant-grid:has(.team-builder-row) {
  grid-template-columns: 1fr;
}
.court-names-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
.court-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.court-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.field-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.85rem 0.75rem;
  background: var(--surface2);
}
.field-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}
.tournament-name-input {
  font-size: 1.1rem;
  font-weight: 700;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  padding: 0.2rem 0;
  color: var(--text);
  outline: none;
}
.tournament-name-input:focus {
  border-bottom-color: var(--accent);
}
.court-row input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.88rem;
}
.participant-entry {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.participant-entry input {
  flex: 1;
  min-height: 0 !important;
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
}
.participant-remove-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.participant-remove-btn:hover { border-color: var(--red); color: var(--red); }
.add-participant-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.82rem;
  transition: border-color 0.15s, color 0.15s;
  width: 100%;
  text-align: center;
  margin-top: 0.1rem;
}
.add-participant-btn:hover { border-color: var(--accent); color: var(--accent); }
.paste-panel { margin-top: 0.4rem; }
.paste-panel textarea { min-height: 90px; }
.participant-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.entry-mode-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.entry-mode-toggle button {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}

/* ─── Team Builder ─────────────────────────────────────── */
.team-builder-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.team-builder-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  min-width: 52px;
  padding-top: 0.45rem;
  flex-shrink: 0;
}
.team-builder-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
}
.team-builder-members input {
  flex: 1 1 120px;
  min-height: 0 !important;
  padding: 0.4rem 0.5rem;
  font-size: 0.9rem;
}
.team-builder-name-input {
  flex-basis: 100% !important;
  font-size: 0.82rem !important;
  color: var(--text-muted);
  border-style: dashed !important;
}
.team-builder-name-input::placeholder {
  font-style: italic;
}/* ── Mobile: touch targets, layout & responsive ── */
/* ── Tablet (601px – 900px): tighten horizontal padding, better courtside use ── */
@media (max-width: 900px) {
  body { padding: 0.75rem 1rem; }
  .card { padding: 0.85rem; }
}

@media (max-width: 600px) {
  body { padding: 0.5rem; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.05rem; }

  /* Header */
  .page-header { gap: 0.25rem; margin-bottom: 0.75rem; }
  .page-header-row { gap: 0.35rem; }
  .page-header-left { gap: 0.4rem; }

  /* Page selector: slightly smaller title text on narrow screens */
  .page-selector-btn { min-height: 38px; font-size: 1rem; }
  .page-selector-item { padding: 0.7rem 0.85rem; min-height: 44px; }
  .compact-icon-btn { min-height: 44px; min-width: 44px; }

  /* Auth row: compact icon buttons, hide username text and nav labels, small logout */
  #auth-status { display: flex; align-items: center; gap: 0.3rem; }
  #auth-status strong { display: none; }
  #auth-status .nav-btn-label { display: none; }
  #auth-status .btn.btn-sm { min-height: 34px; padding: 0.25rem 0.55rem; font-size: 0.82rem; }

  /* Tabs: scroll horizontally instead of wrapping awkwardly */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .tabs::-webkit-scrollbar { height: 3px; }
  .tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .tab-btn, .tournament-chip, .compact-controls { flex-shrink: 0; }

  .home-search-row {
    flex-wrap: nowrap;
  }
  .home-search-input {
    min-width: 0;
  }
  .home-search-row .btn {
    min-height: 40px;
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    flex-shrink: 0;
  }
  .home-filter-chip {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
  }

  /* Stacked form layout */
  .inline-group { flex-direction: column; gap: 0; }

  /* Cards can scroll if content (e.g. a table) is wider than screen */
  .card { overflow-x: auto; }

  /* Table: tighten up on mobile */
  table { font-size: 0.78rem; }
  th, td { padding: 0.3rem 0.4rem; }

  /* Court board: single column on very small screens */
  .court-board .court-column { flex-basis: 100%; }
  .court-board-compact { grid-template-columns: repeat(2, 1fr); }

  /* Match card: ensure team name gets full row before score */
  .match-teams { min-width: 100%; }
  .match-card { padding: 0.6rem 0; }
  /* Tournament list cards: keep delete button inline with the name */
  .tournament-list-card { flex-wrap: nowrap; }
  .tournament-list-card .match-teams { min-width: 0; flex: 1; }

  /* Touch targets */
  .match-actions input { width: 56px !important; height: 44px; font-size: 1rem; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding: 0.5rem 0.8rem; font-size: 0.85rem; }
  .tournament-actions .btn-sm { min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
  .match-edit-btn { min-height: 40px; padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  .admin-dispute-scores label { padding: 0.45rem 0.55rem; font-size: 0.9rem; }
  .admin-dispute-scores input[type="radio"] { width: 18px; height: 18px; }
  .admin-dispute-custom input[type="number"] { width: 60px; min-height: 44px; font-size: 1rem; }
  .admin-dispute-resolve { width: 100%; text-align: center; }
  .score-mode-toggle button { min-height: 40px; padding: 0.4rem 0.75rem; font-size: 0.85rem; }
  .group-nav-bar { padding: 0.35rem 0.4rem; gap: 0.25rem; }
  .group-nav-btn { min-height: 38px; padding: 0.35rem 0.6rem; font-size: 0.82rem; }
  .match-filter-toggle button { min-height: 38px; padding: 0.35rem 0.55rem; font-size: 0.82rem; }
  .gp-review-filter button { min-height: 38px; padding: 0.35rem 0.5rem; font-size: 0.78rem; }
  .gp-review-row { flex-direction: column; align-items: stretch; }
  .gp-review-row-teams { white-space: normal; overflow: visible; text-overflow: clip; }
  .gp-review-row .btn { width: 100%; }
  .sitout-item { padding: 0.5rem 0.6rem; font-size: 0.9rem; min-height: 44px; }
  .tab-btn { min-height: 44px; font-size: 0.9rem; padding: 0.5rem 0.75rem; }
  .proposal-card { min-width: 100%; max-width: 100%; }
  .manual-sel { min-height: 44px; font-size: 0.9rem; }
  input, select, textarea { min-height: 44px; font-size: 1rem; }

  /* Tennis sets: bigger inputs */
  .tennis-set-input { width: 60px !important; min-height: 48px; font-size: 1.1rem; }
  .tennis-set-row { padding: 0.25rem 0.35rem; }

  /* Subtabs */
  .subtab-btn { padding: 0.45rem 0.65rem; font-size: 0.82rem; }
  .subtabs { width: 100%; }
  .subtab-btn { flex: 1; text-align: center; }

  /* Schema builder */
  .schema-builder { padding: 0.85rem; }
  .schema-row { flex-direction: column; gap: 0; }
  .schema-rendering-grid { grid-template-columns: 1fr 1fr; }

  /* Proposal controls wrap cleanly */
  .proposal-section-row { flex-wrap: wrap; justify-content: flex-start; }
  .proposal-inline-actions { margin-left: 0; }

  /* Sitout grid: 2 columns on small screens */
  .sitout-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Active tournament indicator: compact */
  .active-tournament-indicator { font-size: 0.8rem; padding: 0.35rem 0.5rem; }

  /* GP Playoff editor */
  .gp-groups-container { grid-template-columns: 1fr; }
  .gp-player-row { padding: 0.45rem 0.25rem; }
  .gp-player-row input[type="checkbox"] { width: 22px; height: 22px; }
  .gp-external-row { gap: 0.4rem; }
  .gp-add-row { flex-direction: column; align-items: stretch; }
  .gp-add-row input[type="text"] { min-width: 100%; }
  .gp-add-row input[type="number"] { width: 100%; }
  .gp-format-row .form-group { max-width: 100%; }

  /* Participant manager on mobile: 1 column */
  .participant-grid { grid-template-columns: 1fr; }
  .participant-entry input { font-size: 1rem; min-height: 44px !important; }
  .participant-remove-btn { width: 36px; height: 44px; font-size: 1.1rem; }
  .add-participant-btn { min-height: 44px; font-size: 0.9rem; }

  .reg-answers-grid { grid-template-columns: 1fr; }

  /* Decision actions: stack on mobile */
  .decision-actions-row { flex-direction: column; }
  .decision-actions-row .btn { width: 100%; }
}

/* ── Conversion player selection list ── */
.conv-player-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.conv-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  cursor: pointer;
  transition: background 0.12s;
}
.conv-player-row:last-child { border-bottom: none; }
.conv-player-row:hover { background: var(--surface2); }
.conv-player-row.selected { background: var(--color-active-overlay); }
.conv-player-row.assigned {
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  outline: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  outline-offset: -1px;
}
.conv-player-overlap-dot {
  flex-shrink: 0;
  font-size: 0.88rem;
  color: var(--amber);
  cursor: help;
  margin-left: 0.2rem;
}
.conv-player-overlap-hint {
  font-size: 0.73rem;
  color: #f59e0b;
  padding: 0.18rem 0.6rem 0.3rem 2.1rem;
  background: rgba(245, 158, 11, 0.06);
  border-top: 1px dashed rgba(245, 158, 11, 0.25);
}
.conv-player-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.conv-player-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--accent);
}
.conv-player-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.conv-player-item {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.conv-player-item:last-child { border-bottom: none; }
.conv-player-item .conv-player-row { border-bottom: none; }
.conv-answers-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.conv-answers-btn:hover { background: var(--surface2); color: var(--text); }
.conv-answers-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.conv-answers-detail {
  padding: 0.3rem 0.6rem 0.5rem 2.1rem;
  background: var(--surface2);
  border-top: 1px dashed var(--border);
}
.conv-answers-detail-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-size: 0.8rem;
}
.conv-answers-detail-label {
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 0;
}
.conv-answers-detail-label::after { content: ':'; }
.conv-answers-detail-value {
  color: var(--text);
  word-break: break-word;
  min-width: 0;
}
.conv-answers-detail-value.empty {
  color: var(--text-muted);
  font-style: italic;
}
.conv-answer-badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
}
.conv-player-assigned-label {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Registration Answers panel ── */
.reg-answers-participant-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  margin-bottom: 0;
}
.reg-answers-participant-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.reg-answers-participant-search {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  width: 120px;
}
.reg-answers-participant-search:focus {
  outline: none;
  border-color: var(--accent);
}
.reg-answers-participant-select {
  font-size: 0.8rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  max-width: 200px;
}
.reg-answers-participant-select:focus {
  outline: none;
  border-color: var(--accent);
}
.reg-answers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.reg-answer-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.reg-answer-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}
.reg-answer-card-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--accent);
}
.reg-answer-bars { margin-bottom: 0.6rem; }
.reg-answer-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.1rem 0.2rem;
  margin-left: -0.2rem;
  transition: background 0.12s;
}
.reg-answer-bar-row:hover { background: var(--surface2); }
.reg-answer-bar-row.active { background: rgba(56,189,248,0.10); }
.reg-answer-bar-row.active .reg-answer-bar-label { color: var(--accent); font-weight: 700; }
.reg-answer-bar-row.active .reg-answer-bar-fill { opacity: 0.65; }
.reg-answer-bar-row.active .reg-answer-bar-count { color: var(--accent); }
.reg-answer-bar-label {
  min-width: 2rem;
  max-width: 120px;
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-answer-bar-track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.reg-answer-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.reg-answer-bar-count {
  min-width: 1.5em;
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-size: 0.78rem;
}
.reg-answer-list {
  max-height: 220px;
  overflow-y: auto;
  margin-top: 0.2rem;
}
.reg-answer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.82rem;
}
.reg-answer-row:last-child { border-bottom: none; }
.reg-answer-name {
  color: var(--text);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-answer-value {
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
}
.reg-answer-count-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.reg-answer-legend {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface2);
  border-radius: 5px;
  font-size: 0.76rem;
}
.reg-answer-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.reg-answer-legend-item b {
  color: var(--accent);
  font-size: 0.8rem;
  flex-shrink: 0;
  min-width: 1rem;
  text-align: center;
}
.reg-answer-legend-text {
  min-width: 0;
  word-break: break-word;
}
.reg-answer-preview {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}
.reg-answer-preview-item {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.18rem 0.5rem;
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--border));
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-answer-preview-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-left: 0.5rem;
}
/* ── Text question inline answer list ── */
.reg-answer-text-section { margin-top: 0.2rem; }
.reg-answer-text-search {
  width: 100%;
  padding: 0.3rem 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.reg-answer-text-search:focus { outline: none; border-color: var(--accent); }
.reg-answer-text-list {
  max-height: 220px;
  overflow-y: auto;
}
.reg-answer-text-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.82rem;
}
.reg-answer-text-row:last-child { border-bottom: none; }
.reg-answer-text-val {
  color: var(--text-muted);
  text-align: right;
  min-width: 0;
  word-break: break-word;
  flex: 1;
}
.reg-answer-text-row.long .reg-answer-text-val {
  cursor: pointer;
  max-width: calc(100% - 5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline dotted var(--text-muted);
}
.reg-answer-text-row.long.expanded .reg-answer-text-val {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-decoration: none;
}
.reg-answer-spoiler { margin-top: 0.4rem; }
.reg-answer-spoiler-summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.15rem 0;
}
.reg-answer-spoiler-summary::before {
  content: '▸';
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.8em;
  transition: transform 0.18s;
}
.reg-answer-spoiler[open] .reg-answer-spoiler-summary::before { transform: rotate(90deg); }
.reg-answer-spoiler-title {
  display: inline-flex;
  align-items: center;
}
.reg-answer-spoiler-summary::-webkit-details-marker { display: none; }
.reg-desc-textarea {
  transition: height 0.15s ease;
  resize: none;
}

/* ── Question builder cards ── */
.reg-q-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.reg-q-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.reg-q-number {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.reg-q-card-header .switch-label {
  margin-left: auto;
  font-size: 0.78rem;
}
.reg-q-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.reg-q-remove:hover {
  color: var(--red);
  background: rgba(239,68,68,0.1);
}
.reg-q-card-body {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reg-q-type-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.78rem;
}
.reg-q-type-toggle button {
  padding: 0.25rem 0.6rem;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 0.78rem;
}
.reg-q-type-toggle button.active {
  background: var(--accent);
  color: #fff;
}
.reg-q-choices-area {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  margin-top: 0;
}
.reg-q-choices-area.open {
  max-height: 500px;
  opacity: 1;
  margin-top: 0.1rem;
}
.reg-q-choice-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.reg-q-choice-row input {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
}
.reg-q-choice-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.reg-q-choice-remove:hover { color: var(--red); }
.reg-q-add-choice-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.75rem;
  transition: border-color 0.15s, color 0.15s;
  text-align: center;
}
.reg-q-add-choice-btn:hover { border-color: var(--accent); color: var(--accent); }
.reg-q-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
  padding: 1.2rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ── Shared modal styles ── */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-overlay-backdrop);
  z-index: 9998;
  /* flex centering when opened with display:flex (user-mgmt, change-pwd) */
  align-items: center;
  justify-content: center;
}
.modal-dialog {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  z-index: 9999;
  box-shadow: var(--shadow-overlay);
}
/* Nested dialog inside flex overlay — no fixed positioning needed */
.modal-overlay > .modal-dialog {
  display: block;
  position: static;
  transform: none;
}
.modal-sm { width: min(400px, calc(100vw - 2rem)); }
.modal-md { width: min(480px, calc(100vw - 2rem)); max-height: 90vh; overflow-y: auto; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-title { margin: 0; color: var(--accent); font-size: 1.2rem; }
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
}
.modal-close-btn:hover { color: var(--text); }
.modal-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.modal-field { margin-bottom: 0.8rem; }
.modal-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.modal-input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-error {
  color: var(--red);
  font-size: 0.8rem;
  margin-bottom: 0.8rem;
  min-height: 1.2rem;
}
.modal-success {
  color: var(--green);
  font-size: 0.8rem;
  min-height: 1.2rem;
  margin-bottom: 0.25rem;
}
.modal-footer-links {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
.modal-link { color: var(--accent); text-decoration: none; }
.modal-link:hover { text-decoration: underline; }
.modal-form-section { border-top: 1px solid var(--border); padding-top: 1rem; }
.modal-radio-group { display: flex; gap: 1.5rem; }
.modal-radio-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* ── Delete-tournament confirmation modal ── */
.delete-tourn-dialog { padding: 1.5rem 1.5rem 1.25rem; }
.delete-tourn-header { margin-bottom: 0.5rem; align-items: flex-start; }
.delete-tourn-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  margin: 0;
}
.delete-tourn-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}
.delete-tourn-warning {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
}
.delete-tourn-ghost-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.delete-tourn-ghost-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.delete-tourn-ghost-card.is-checked {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent);
}
.delete-tourn-ghost-check {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  cursor: pointer;
  accent-color: var(--red);
}
.delete-tourn-ghost-body { min-width: 0; }
.delete-tourn-ghost-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.delete-tourn-ghost-help {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.delete-tourn-ghost-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.delete-tourn-ghost-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--border);
}
.delete-tourn-ghost-chip-more {
  background: transparent;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 480px) {
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .delete-tourn-dialog { padding: 1.1rem 1rem 1rem; }
}
.user-mgmt-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 3rem;
  max-height: 300px;
  overflow-y: auto;
  /* Shared column grid — rows use subgrid to inherit these tracks */
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(140px, 1.6fr) max-content max-content max-content;
  column-gap: 0.6rem;
}

/* ── User Management row grid ── */
.umgmt-row {
  /* Span all parent columns so the row forms a full-width band */
  grid-column: 1 / -1;
  /* Inherit the parent's column tracks for perfect cross-row alignment */
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.umgmt-row:last-child { border-bottom: none; }
.umgmt-row--empty { display: block; opacity: 0.55; padding: 0.75rem 0; border-bottom: none; }
.umgmt-col-identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.umgmt-username {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.umgmt-role-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.umgmt-role-badge--admin {
  background: var(--color-primary-highlight);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--accent);
}
.umgmt-email {
  font-size: 0.77rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umgmt-community-select {
  width: 100%;
  padding: 0.22rem 0.4rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.umgmt-col-clubs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.umgmt-col-clubs input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--accent);
}
.umgmt-col-save {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.umgmt-save-msg {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.umgmt-col-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}
.umgmt-self-badge {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .user-mgmt-list {
    grid-template-columns: 1fr 1fr;
  }
  .umgmt-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.3rem;
  }
  .umgmt-col-identity { grid-column: 1 / -1; }
  .umgmt-col-community { grid-column: 1 / -1; }
  .umgmt-col-clubs { grid-column: 1; }
  .umgmt-col-save { grid-column: 2; justify-content: flex-end; }
  .umgmt-col-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Skeleton loading shimmer ── */
.skeleton-loader { padding: 0.5rem 0; }
.skeleton-line {
  height: 0.9rem;
  background: linear-gradient(90deg, var(--border) 25%, transparent 50%, var(--border) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-line-lg { height: 1.2rem; width: 60%; margin-bottom: 0.8rem; }
.skeleton-line:nth-child(2) { width: 85%; }
.skeleton-line:nth-child(3) { width: 70%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Theme toggle active state ── */
.compact-icon-btn[data-active-theme] {
  position: relative;
}
.compact-icon-btn[data-active-theme="dark"] {
  border-color: var(--accent);
  background: var(--color-primary-highlight);
}

/* ── Conversion panel ── */
.conv-strength-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.conv-strength-entry {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.conv-strength-entry label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.conv-strength-entry input {
  width: 52px;
  font-size: 0.82rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-align: center;
}

/* ── Contact details (create panels) ── */
.contact-entry {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.contact-entry label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  min-width: 60px;
  flex-shrink: 0;
}
.contact-entry input {
  flex: 1;
  min-width: 100px;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-hub-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0.2rem 0.35rem;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.contact-hub-btn:hover { opacity: 1; }

/* ── Group Preview / Assignment Editor ── */
.gp-group-preview-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.gp-preview-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.gp-preview-close:hover {
  color: var(--red);
  border-color: var(--red);
}
.gp-group-preview-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.gp-group-preview-col {
  flex: 1;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
}
.gp-group-preview-header {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--border);
}
.gp-group-preview-count {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.gp-group-preview-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.3rem 0.2rem;
  border-bottom: 1px solid var(--border);
}
.gp-group-preview-player:last-child {
  border-bottom: none;
}
.gp-group-preview-name {
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.gp-group-preview-strength {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.65;
}
.gp-group-preview-move {
  font-size: 0.75rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  width: auto;
  max-width: 5rem;
}
.gp-preview-match-estimate {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.gp-playoff-match-estimate {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.gp-playoff-estimate-count {
  display: block;
}
.gp-playoff-branches {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.2rem;
}
.gp-playoff-branch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
}
.gp-playoff-branch-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--border);
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.gp-preview-shuffle-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.gp-preview-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

/* ── Hide-unanswered toggle button ── */
.reg-answer-hide-empty-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  line-height: 1.5;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.reg-answer-hide-empty-btn:hover,
.reg-answer-hide-empty-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56,189,248,0.07);
}

/* ── Sort button inside choice spoiler summary ── */
.reg-answer-sort-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  line-height: 1.5;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.reg-answer-sort-btn:hover,
.reg-answer-sort-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56,189,248,0.07);
}

/* ── Number question stats ── */
.reg-answer-num-stats {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.2rem 0.4rem;
  margin-bottom: 0.35rem;
  background: var(--surface2);
  border-radius: 4px;
  display: inline-block;
}
.reg-answer-num-stats b { color: var(--accent); }

/* ── User Management form cards ── */
.umgmt-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.umgmt-cards-grid > .card {
  margin-bottom: 0;
}
.umgmt-card-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.umgmt-card-desc {
  color: var(--text-muted);
  font-size: 0.84rem;
  margin: 0 0 0.75rem;
  line-height: 1.45;
}
.umgmt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.umgmt-form-grid--community {
  grid-template-columns: 1fr auto;
}
.umgmt-form-group {
  margin-bottom: 0.6rem;
}
.umgmt-form-group label {
  display: block;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.umgmt-role-group {
  margin-bottom: 0;
}
.umgmt-role-group > label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.35rem;
  display: block;
}
.umgmt-role-options {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.umgmt-role-options label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
}
.umgmt-role-options label:last-child {
  border-right: none;
}
.umgmt-role-options label:hover {
  background: var(--color-hover-overlay);
}
.umgmt-role-options input[type="radio"] {
  width: auto;
  min-height: auto;
  accent-color: var(--accent);
}
.umgmt-role-options input[type="radio"]:checked + span {
  color: var(--accent);
  font-weight: 600;
}
.umgmt-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.umgmt-footer-row .btn {
  white-space: nowrap;
}
.umgmt-msg-area {
  min-height: 0;
  margin-bottom: 0;
}
.umgmt-msg-area .modal-success:empty,
.umgmt-msg-area .modal-error:empty {
  min-height: 0;
  margin-bottom: 0;
  display: none;
}
@media (max-width: 700px) {
  .umgmt-cards-grid {
    grid-template-columns: 1fr;
  }
  .umgmt-form-grid,
  .umgmt-form-grid--community {
    grid-template-columns: 1fr;
  }
  .umgmt-role-options label {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  .umgmt-footer-row {
    flex-direction: column;
    align-items: stretch;
  }
  .umgmt-footer-row .btn {
    text-align: center;
  }
}

/* ── Sortable leaderboard columns ── */
.sortable-col {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.12s;
}
.sortable-col:hover {
  color: var(--accent);
}
.sortable-col.sort-active {
  color: var(--accent);
}

/* ─── Unified per-tournament Settings card ────────────────────────────── */
.admin-settings-card {
  margin-top: 1.25rem;
}
.admin-settings-details > .admin-settings-summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.admin-settings-summary::-webkit-details-marker { display: none; }
.admin-settings-title {
  font-size: 1.05rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-settings-chevron {
  display: inline-block;
  transition: transform 0.18s;
  font-size: 0.7em;
  color: var(--text-muted);
}
.admin-settings-details[open] > .admin-settings-summary .admin-settings-chevron {
  transform: rotate(90deg);
}
.admin-settings-body { margin-top: 0.75rem; }

.settings-help-master-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.75rem;
}
/* Only show the help toggle when the Settings card is expanded. */
.admin-settings-details:not([open]) .settings-help-master-toggle {
  display: none;
}
.settings-subpanel-help-wrap {
  margin-bottom: 0.85rem;
}
.settings-subpanel-help {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.settings-subpanel-help.hidden { display: none; }
.settings-subpanel-help-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}

.settings-help-block {
  margin-bottom: 0.75rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.settings-help-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.settings-help-summary::-webkit-details-marker { display: none; }
.settings-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  color: var(--accent);
}
.settings-help-block[open] .settings-help-summary { color: var(--text); }
.settings-help-body { padding: 0 0.7rem 0.7rem 0.7rem; }
.settings-help-intro {
  margin: 0 0 0.5rem 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.settings-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0.4rem 0.8rem;
}
.settings-help-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: var(--bg, var(--surface));
}
.settings-help-tab {
  font-weight: 600;
  color: var(--text);
}
.settings-help-desc {
  color: var(--text-muted);
  line-height: 1.3;
}

.settings-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.settings-subtab-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.settings-subtab-btn:hover { background: var(--bg, var(--surface)); color: var(--text); }
.settings-subtab-btn.active {
  background: var(--bg, var(--surface));
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
}
.settings-subtab-icon { font-size: 1rem; line-height: 1; }
.settings-subpanel.hidden { display: none; }
.settings-subpanel { display: block; }

.settings-block {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.settings-block:last-child { border-bottom: none; }

/* Visual grouping for related blocks within a single Settings sub-tab. */
.settings-group {
  margin-top: 0.75rem;
}
.settings-group:first-of-type { margin-top: 0; }
.settings-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.settings-group .settings-block:last-child { border-bottom: none; }

/* Master toggle (a single bold checkbox option that drives a dependent group). */
.settings-master-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.settings-master-toggle input[type="checkbox"] {
  width: auto;
  min-height: auto;
  margin: 0;
}
.settings-master-help {
  margin: 0.25rem 0 0 1.4rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.settings-dep-group { transition: opacity 0.15s; }
.settings-dep-group.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* URL preview chip used in the sharing/alias block. */
.settings-url-preview {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.settings-url-preview-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.settings-url-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.settings-url-preview code {
  color: var(--accent);
  font-size: 0.85rem;
}
.settings-url-preview-hint {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.settings-url-copy-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 3px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-size: 0.78rem;
}
.settings-url-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.settings-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text);
}
.settings-help {
  margin: 0 0 0.45rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.settings-inline-row > .btn { white-space: nowrap; flex: 0 0 auto; }
/* Compact text/number/select input used inside Settings cards. Keeps a
   consistent height and font-size across all sub-tabs (alias, banner,
   rename, tier name, season name, collaborator email, etc.) so save
   buttons line up vertically when stacked across cards. */
.settings-input {
  width: auto;
  min-height: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.settings-input--mono { font-family: var(--font-mono); }
.settings-input--grow { flex: 1; min-width: 180px; }
/* Inline message slot rendered below a settings-inline-row (success / error
   feedback). Reserves vertical space so layout doesn't jump when text appears. */
.settings-inline-msg {
  font-size: 0.82rem;
  margin-top: 0.35rem;
  min-height: 1em;
  color: var(--text-muted);
}
.settings-section-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.settings-stage-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.settings-stage-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 8rem;
}
.settings-collapse-inner {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.settings-collapse-inner > summary {
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--text-muted);
  user-select: none;
}

/* Status bar (renamed ops header) — adds the Settings shortcut button. */
.tournament-status-bar .status-bar-settings-btn {
  margin-left: 0.4rem;
}

/* Settings shortcut dropdown menu (native <details>/<summary> popover). */
.status-bar-settings-menu {
  position: relative;
  margin-left: 0.4rem;
}
.status-bar-settings-menu > summary {
  list-style: none;
  cursor: pointer;
}
.status-bar-settings-menu > summary::-webkit-details-marker { display: none; }
.status-bar-settings-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 11rem;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.status-bar-settings-menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.88rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.status-bar-settings-menu-item:hover,
.status-bar-settings-menu-item:focus-visible {
  background: var(--hover, rgba(0, 0, 0, 0.06));
  outline: none;
}
.status-bar-settings-menu-icon { width: 1.25em; text-align: center; }

/* Lobby (registration) status bar + Settings card — reuse the per-tournament
   styles by adding the lobby class names alongside the originals. */
.lobby-status-bar { margin-bottom: 0.75rem; }
.lobby-status-bar .gp-ops-header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.lobby-status-bar h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.lobby-status-bar .gp-ops-next-action {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}

/* Club status bar — compact single-row layout that also hosts the sport
   toggle, replacing the old standalone sticky sport bar. */
.club-status-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.75rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.club-status-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.club-status-bar-back { padding: 0.2rem 0.55rem; flex-shrink: 0; }
.club-status-bar-logo {
  height: 24px; width: 24px;
  object-fit: cover; border-radius: 4px;
  flex-shrink: 0;
}
.clubs-logo-row { gap: 0.6rem; }
.clubs-logo-preview {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  object-fit: cover;
  flex-shrink: 0;
}
.clubs-logo-preview--empty {
  color: var(--text-muted);
  font-size: 1.3rem;
}
.club-status-bar-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}
.club-status-bar-comm {
  font-weight: normal;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-status-bar-count { flex-shrink: 0; }
.club-status-bar-spacer { flex: 1 1 auto; }
.clubs-sport-toggle--inline { flex-shrink: 0; }

@media (max-width: 720px) {
  .club-status-bar { padding: 0.4rem 0.55rem; }
  .club-status-bar-row { gap: 0.4rem; }
  .club-status-bar-title { font-size: 0.95rem; }
  .club-status-bar-comm { display: none; }
}
.badge-archived {
  background: rgba(148,163,184,0.18); color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.35);
}
:root[data-theme="light"] .badge-archived {
  background: rgba(100,116,139,0.1); color: #475569;
  border: 1px solid rgba(100,116,139,0.25);
}

/* Club leaderboard scope filter */
.clubs-lb-scope-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.clubs-lb-scope-label {
  font-size: 0.84rem; color: var(--text-muted);
  font-weight: 500;
}
.clubs-lb-scope-row .select { max-width: 18rem; }
.clubs-lb-frozen-badge { font-size: 0.78rem; }

/* Assignments sub-tab — flat sections (no nested <details>). */
.clubs-assign-section { margin-bottom: 1rem; }
.clubs-assign-section .player-codes-table-wrap {
  max-height: 18rem;
  overflow-y: auto;
}
.clubs-assign-section-title {
  margin: 0 0 0.4rem;
  font-size: 0.92rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--text);
}
.clubs-assign-search-input {
  width: 100%; max-width: 320px;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.86rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}

/* Possible-members + ghost-duplicate sections — class-based, replacing
   prior inline styles. Visual parity with the legacy layout. */
.clubs-ghost-section {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 0.75rem;
}
.clubs-ghost-section--inner { margin-top: 0.75rem; }
.clubs-ghost-section-summary {
  cursor: pointer; user-select: none;
  padding: 0.55rem 0;
  font-size: 0.88rem; font-weight: 600;
  list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.clubs-ghost-section-summary::-webkit-details-marker { display: none; }
.clubs-ghost-section-chevron {
  font-size: 0.65em;
  color: var(--text-muted);
}
.clubs-ghost-section-hint { font-weight: 400; }
.clubs-ghost-section-body { padding: 0.5rem 0 0.75rem; }

.clubs-ghost-search-row {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.clubs-ghost-search-input {
  flex: 1 1 200px; min-width: 200px;
  padding: 0.35rem 0.5rem;
  font-size: 0.86rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}

.clubs-ghost-merge-bar {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.clubs-ghost-merge-bar-label { font-size: 0.88rem; }
.clubs-ghost-merge-bar-input {
  flex: 1 1 160px; min-width: 160px;
  padding: 0.3rem 0.5rem;
  font-size: 0.86rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
.clubs-ghost-merge-bar-msg { margin-top: 0.35rem; font-size: 0.82rem; }

.clubs-ghost-group-card {
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
}
.clubs-ghost-group-name {
  font-size: 0.84rem; font-weight: 600;
  margin-bottom: 0.35rem;
}
.clubs-ghost-group-table-wrap { margin-bottom: 0.4rem; }
.clubs-ghost-group-actions {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
}
.clubs-ghost-group-name-label { font-size: 0.82rem; }
.clubs-ghost-group-name-input {
  margin-left: 0.3rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.82rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
  min-width: 130px;
}
.clubs-ghost-group-msg { margin-top: 0.3rem; font-size: 0.82rem; }

@media (max-width: 720px) {
  .settings-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.2rem;
    padding: 0.2rem;
  }
  .settings-subtabs::-webkit-scrollbar { display: none; }
  .settings-subtab-btn { flex-shrink: 0; padding: 0.4rem 0.55rem; font-size: 0.8rem; }
  /* Keep labels visible — no longer icon-only */
  .settings-subtab-label { display: inline; }
  .settings-subtab-icon { font-size: 1rem; }
  .settings-stage-label { min-width: 0; flex: 1 1 auto; }
}

/* ── Status-bar attention badge (#3) ──────────────────────────────────────
   When there are review items (disputes / pending confirmation), collapse
   the four pending pills into a single coloured warning button that links
   to the Review queue. */
.gp-ops-attention {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--warning-bg, #fff7e6);
  color: var(--warning-text, #8a4b00);
  border: 1px solid var(--warning-border, #f0b97a);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.gp-ops-attention:hover { filter: brightness(0.98); }
.gp-ops-attention-icon { font-size: 1rem; }
[data-theme="dark"] .gp-ops-attention {
  background: color-mix(in srgb, #c47900 22%, transparent);
  color: #f1c280;
  border-color: color-mix(in srgb, #c47900 55%, transparent);
}
.gp-ops-stats-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
}
.gp-ops-stats-row .gp-ops-stat-pill {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
}
.gp-ops-stats-row .gp-ops-stat-pill span {
  font-size: 0.7rem;
}
.gp-ops-stats-row .gp-ops-stat-pill strong {
  font-size: 0.92rem;
}

/* ── Unified match filter chip row (#6) ───────────────────────────────── */
.match-filter-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.group-nav-bar .match-filter-row { margin-top: 0; flex-wrap: nowrap; }
.group-nav-sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 0.25rem;
  flex: 0 0 auto;
}
.match-filter-row .match-filter-toggle { margin-left: 0; }
.match-filter-row .match-filter-toggle button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Disabled decision buttons w/ reason (#13) ────────────────────────── */
.decision-actions-row .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.decision-actions-disabled-note {
  flex-basis: 100%;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ── Larger mobile tap targets for inline score inputs (#22) ──────────── */
@media (max-width: 480px) {
  .score-input-narrow { width: 56px !important; min-height: 44px; font-size: 1rem; }
}

/* ── Admin toast (#5 — undo / confirmation snackbar) ──────────────────── */
.admin-toast-stack {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}
.admin-toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 0.55rem 0.8rem;
  min-width: 240px;
  max-width: 90vw;
  font-size: 0.9rem;
  animation: admin-toast-in 180ms ease-out;
}
.admin-toast.is-leaving { animation: admin-toast-out 200ms ease-in forwards; }
@keyframes admin-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);  opacity: 1; }
}
@keyframes admin-toast-out {
  from { transform: translateY(0);  opacity: 1; }
  to   { transform: translateY(8px); opacity: 0; }
}
.admin-toast-msg { flex: 1 1 auto; }
.admin-toast-undo {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-toast-undo:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.admin-toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
}

/* ── Empty-state lines for review queue / court assignments (#26) ─────── */
.empty-state-line {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.4rem 0;
}

/* Sticky banner shown at the top of the admin SPA when loaded on a club
   subdomain (e.g. ``myclub.amistoso.club/admin``). Purely informational —
   actual permissions are unchanged. */
.admin-subdomain-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 0.88rem;
  color: var(--text);
  flex-wrap: wrap;
  text-align: center;
}
.admin-subdomain-logo {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
}
.admin-subdomain-text { flex: 0 1 auto; min-width: 0; }
.admin-subdomain-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
}
.admin-subdomain-link:hover { border-bottom-style: solid; }
.admin-subdomain-dismiss {
  background: transparent; border: none;
  color: var(--text-muted);
  font-size: 1.2rem; line-height: 1;
  padding: 0 0.4rem;
  cursor: pointer;
}
.admin-subdomain-dismiss:hover { color: var(--text); }