/* Shared styles for all Progressive Shootout pages.
   Loaded before each page's own <page>.css, which may override these. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1115;
  --surface: #1a1d24;
  --surface-2: #22262e;
  --surface-3: #282c35;
  --border: #2e333d;
  --border-light: #3a404d;
  --text: #e2e4e9;
  --text-muted: #8b8f99;
  --text-dim: #555963;
  --accent: #e8a832;
  --accent-dim: #c48a1a;
  --accent-glow: rgba(232, 168, 50, 0.08);
  --red: #d94848;
  --red-dim: #b33a3a;
  --green: #3dba6a;
  --green-dim: #2d9452;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

/* --- HEADER --- */
.header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--accent);
}

.header h1 a {
  color: inherit;
  text-decoration: none;
}

.header h1 a:hover {
  opacity: 0.85;
}

.btn-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
  display: inline-block;
}

.btn-pill:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* --- STATUS BADGE --- */
.status-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-setup { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.status-active { background: rgba(61, 186, 106, 0.12); color: var(--green); border: 1px solid var(--green-dim); }
.status-complete { background: rgba(232, 168, 50, 0.12); color: var(--accent); border: 1px solid var(--accent-dim); }

/* --- SPINNER --- */
.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================
   ADMIN  (body.admin)
   =================================================================== */
    /* --- HEADER --- */
    body.admin .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* --- LAYOUT --- */
    body.admin .main {
      display: grid;
      grid-template-columns: 380px 1fr;
      min-height: calc(100vh - 73px);
    }

    /* --- SIDEBAR --- */
    body.admin .sidebar {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }

    body.admin .sidebar-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
    }

    body.admin .sidebar-header h2 {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    body.admin .add-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    body.admin .add-form input {
      font-family: var(--font-mono);
      font-size: 13px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 8px 12px;
      border-radius: 4px;
      width: 100%;
    }

    body.admin .add-form input:focus { outline: none; border-color: var(--accent); }
    body.admin .add-form input::placeholder { color: var(--border-light); }

    body.admin .add-row {
      display: flex;
      gap: 8px;
    }

    body.admin .add-row input:first-child { flex: 1.4; }
    body.admin .add-row input:last-child { flex: 1; }

    body.admin .btn-add {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid var(--accent-dim);
      background: rgba(232, 168, 50, 0.1);
      color: var(--accent);
      cursor: pointer;
      transition: background 0.15s;
      flex: 1;
    }

    body.admin .btn-add:hover { background: rgba(232, 168, 50, 0.2); }
    body.admin .btn-add:disabled { opacity: 0.4; cursor: not-allowed; }

    body.admin .lock-notice {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      padding: 6px 0 0;
      line-height: 1.4;
    }

    /* --- LISTS --- */
    body.admin .list {
      flex: 1;
      overflow-y: auto;
      padding: 4px 0;
      min-height: 0;
    }

    body.admin .list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 24px;
      transition: background 0.1s;
    }

    body.admin .list-item:hover { background: var(--surface); }

    body.admin .list-info {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }

    body.admin .list-name {
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    body.admin .list-meta {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    body.admin .list-meta-text {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
    }

    body.admin .list-meta-text a {
      color: var(--text-muted);
      text-decoration: none;
    }

    body.admin .list-meta-text a:hover { color: var(--accent); }

    body.admin .donation-amount {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--accent);
    }

    body.admin .btn-remove {
      font-family: var(--font-mono);
      font-size: 11px;
      background: none;
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 3px 8px;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
    }

    body.admin .btn-remove:hover { border-color: var(--red); color: var(--red); }

    body.admin .list-count {
      padding: 12px 24px;
      border-top: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
    }

    body.admin .list-count-amount {
      color: var(--accent);
      font-weight: 600;
    }

    body.admin .empty-list {
      color: var(--text-muted);
      padding: 20px 24px;
      font-size: 13px;
    }

    /* --- DONATIONS SECTION --- */
    body.admin .donations-section {
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      max-height: 320px;
    }

    body.admin .donations-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    body.admin .donations-header h2 {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    /* --- MAIN PANEL --- */
    body.admin .panel {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 73px);
    }

    body.admin .panel-toolbar {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    body.admin .panel-toolbar h2 {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }

    body.admin .panel-content {
      flex: 1;
      padding: 32px 24px;
    }

    body.admin .placeholder {
      max-width: 560px;
      margin: 40px auto;
      padding: 32px;
      border: 1px dashed var(--border-light);
      border-radius: 8px;
      text-align: center;
    }

    body.admin .placeholder h3 {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
      margin-bottom: 12px;
    }

    body.admin .placeholder p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 12px;
    }

    body.admin .placeholder p:last-child { margin-bottom: 0; }

    body.admin .placeholder ul {
      text-align: left;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.8;
      margin: 16px auto;
      padding-left: 20px;
      max-width: 420px;
    }

    body.admin .placeholder ul li {
      margin-bottom: 4px;
    }

    /* --- STAGE MANAGEMENT --- */
    body.admin .start-cta {
      max-width: 560px;
      margin: 40px auto;
      padding: 28px;
      border: 1px solid var(--accent-dim);
      background: rgba(232, 168, 50, 0.05);
      border-radius: 8px;
      text-align: center;
    }

    body.admin .start-cta h3 {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
      margin-bottom: 10px;
    }

    body.admin .start-cta p {
      color: var(--text-muted);
      font-size: 13px;
      margin-bottom: 16px;
      line-height: 1.6;
    }

    body.admin .start-cta button {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      padding: 10px 24px;
      border-radius: 5px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      cursor: pointer;
    }

    body.admin .start-cta button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    body.admin .stage-block {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 16px;
      overflow: hidden;
    }

    body.admin .stage-block-header {
      padding: 12px 16px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    body.admin .stage-block-title {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--accent);
    }

    body.admin .stage-block-meta {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    body.admin .stage-block-status {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 3px;
    }
    body.admin .stage-block-status.live { background: rgba(61, 186, 106, 0.12); color: var(--green); }
    body.admin .stage-block-status.complete { background: rgba(232, 168, 50, 0.12); color: var(--accent); }

    body.admin .btn-reseat {
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 3px;
      border: 1px solid var(--border-light);
      background: var(--bg);
      color: var(--text-muted);
      cursor: pointer;
    }
    body.admin .btn-reseat:hover { color: var(--accent); border-color: var(--accent-dim); }

    body.admin .stage-block-body { padding: 14px 16px; }

    body.admin .table-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 5px;
      padding: 12px;
      margin-bottom: 10px;
    }
    body.admin .table-card:last-child { margin-bottom: 0; }
    body.admin .table-card.complete { opacity: 0.95; }

    body.admin .table-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    body.admin .table-card-id {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    body.admin .table-card-id-note {
      color: var(--text-dim);
      font-weight: 400;
      font-size: 11px;
      margin-left: 6px;
    }

    body.admin .table-status-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 2px;
      letter-spacing: 0.5px;
    }
    body.admin .table-status-tag.live { background: rgba(61, 186, 106, 0.12); color: var(--green); }
    body.admin .table-status-tag.complete { background: rgba(232, 168, 50, 0.12); color: var(--accent); }

    body.admin .table-players {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      margin-bottom: 10px;
    }

    body.admin .table-player-cell {
      font-size: 12px;
      padding: 5px 8px;
      background: var(--surface-2);
      border-radius: 3px;
      border: 1px solid var(--border);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    body.admin .table-player-cell.placed-1 { border-color: var(--accent-dim); background: rgba(232, 168, 50, 0.08); color: var(--accent); }
    body.admin .table-player-cell.placed-2 { border-color: #5a6a7a; background: rgba(160, 168, 184, 0.08); }
    body.admin .table-player-cell.placed-3 { border-color: #735237; background: rgba(184, 115, 51, 0.08); }
    body.admin .table-player-cell.eliminated { color: var(--text-dim); text-decoration: line-through; }

    body.admin .place-prefix {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      opacity: 0.7;
      margin-right: 4px;
    }

    body.admin .result-form {
      background: var(--surface);
      border: 1px solid var(--border-light);
      border-radius: 4px;
      padding: 12px;
      margin-top: 8px;
    }

    body.admin .result-form-row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 6px;
    }
    body.admin .result-form-row:last-child { margin-bottom: 0; }

    body.admin .result-form-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      width: 38px;
      color: var(--text-muted);
    }

    body.admin .result-form select {
      flex: 1;
      font-family: var(--font-mono);
      font-size: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 6px 8px;
      border-radius: 3px;
    }
    body.admin .result-form select:focus { outline: none; border-color: var(--accent); }
    body.admin .result-form select option:disabled {
      color: var(--text-dim);
    }

    body.admin .result-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 10px;
    }

    body.admin .btn-record {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      padding: 6px 16px;
      border-radius: 3px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      cursor: pointer;
    }

    body.admin .btn-edit {
      font-family: var(--font-mono);
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 3px;
      border: 1px solid var(--border-light);
      background: var(--bg);
      color: var(--text-muted);
      cursor: pointer;
    }
    body.admin .btn-edit:hover { color: var(--accent); border-color: var(--accent-dim); }
    body.admin .btn-edit:disabled { opacity: 0.3; cursor: not-allowed; }

    body.admin .table-card-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
    }

    /* --- TOAST --- */
    body.admin .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    body.admin .toast {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 5px;
      animation: toastIn 0.25s ease-out, toastOut 0.25s ease-in 2.5s forwards;
      max-width: 360px;
    }

    body.admin .toast-success { background: var(--green); color: #fff; }
    body.admin .toast-error { background: var(--red); color: #fff; }

    @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

    /* --- LOADING --- */
    body.admin .loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 17, 21, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    body.admin .loading-overlay.hidden { display: none; }

    /* --- CONFIRM DIALOG --- */
    body.admin .confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 17, 21, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1001;
    }

    body.admin .confirm-overlay.hidden { display: none; }

    body.admin .confirm-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 24px;
      max-width: 400px;
      width: 90%;
    }

    body.admin .confirm-box p {
      font-size: 14px;
      margin-bottom: 20px;
      color: var(--text);
      line-height: 1.6;
    }

    body.admin .confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

    body.admin .btn {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    body.admin .btn:hover { opacity: 0.85; }
    body.admin .btn-primary { background: var(--accent); color: var(--bg); }
    body.admin .btn-danger { background: var(--red); color: #fff; }
    body.admin .btn-outline { background: none; border: 1px solid var(--border); color: var(--text-muted); }
    body.admin .btn-outline:hover { border-color: var(--text-muted); color: var(--text); }

    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
      body.admin .main { grid-template-columns: 1fr; }
      body.admin .sidebar { border-right: none; border-bottom: 1px solid var(--border); position: static; height: auto; max-height: none; }
      body.admin .header { padding: 16px 20px; }
      body.admin .sidebar-header { padding: 16px 20px 12px; }
      body.admin .list-item { padding: 10px 20px; }
      body.admin .list-count { padding: 10px 20px; }
      body.admin .panel-toolbar { padding: 12px 20px; flex-wrap: wrap; }
      body.admin .panel-content { padding: 20px; }
      body.admin .donations-section { max-height: none; }
      body.admin .panel { min-height: auto; }
    }

/* ===================================================================
   AVAILABILITY ADMIN  (body.avail-admin)
   =================================================================== */
    /* --- HEADER --- */
    body.avail-admin .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* --- STATS STRIP --- */
    body.avail-admin .stats-strip {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    body.avail-admin .stat-item {
      flex: 1;
      padding: 16px 24px;
      border-right: 1px solid var(--border);
    }

    body.avail-admin .stat-item:last-child { border-right: none; }

    body.avail-admin .stat-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-dim);
      margin-bottom: 4px;
    }

    body.avail-admin .stat-value {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
    }

    body.avail-admin .stat-value.accent { color: var(--accent); }
    body.avail-admin .stat-value.green { color: var(--green); }
    body.avail-admin .stat-value.red { color: var(--red); }

    /* --- MAIN --- */
    body.avail-admin .main {
      padding: 32px;
      max-width: 980px;
      margin: 0 auto;
    }

    body.avail-admin .section-title {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    body.avail-admin .section-title-count {
      font-size: 11px;
      color: var(--text-dim);
    }

    body.avail-admin .section-blurb {
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 18px;
      line-height: 1.5;
    }

    body.avail-admin .ranked-section {
      margin-bottom: 36px;
    }

    /* --- HOUR ROW --- */
    body.avail-admin .hour-row {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    body.avail-admin .hour-row.high-demand {
      border-color: var(--accent-dim);
    }

    body.avail-admin .hour-row.no-demand {
      opacity: 0.5;
    }

    body.avail-admin .hour-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }

    body.avail-admin .hour-header:hover {
      background: var(--surface-2);
    }

    body.avail-admin .hour-row.no-demand .hour-header {
      cursor: default;
    }

    body.avail-admin .hour-row.no-demand .hour-header:hover {
      background: transparent;
    }

    body.avail-admin .hour-chevron {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-dim);
      width: 10px;
      transition: transform 0.2s;
    }

    body.avail-admin .hour-row.collapsed .hour-chevron {
      transform: rotate(-90deg);
    }

    body.avail-admin .hour-row.no-demand .hour-chevron {
      visibility: hidden;
    }

    body.avail-admin .hour-time {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      min-width: 80px;
    }

    body.avail-admin .hour-row.high-demand .hour-time {
      color: var(--accent);
    }

    body.avail-admin .hour-local {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      min-width: 90px;
    }

    body.avail-admin .hour-demand-bar {
      flex: 1;
      height: 8px;
      background: var(--bg);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      display: flex;
    }

    body.avail-admin .demand-bar-first {
      background: var(--accent);
      height: 100%;
    }

    body.avail-admin .hour-counts {
      display: flex;
      gap: 10px;
      align-items: center;
      min-width: 110px;
      justify-content: flex-end;
    }

    body.avail-admin .hour-count {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 3px;
    }

    body.avail-admin .hour-count.first {
      background: var(--accent-glow);
      color: var(--accent);
      border: 1px solid var(--accent-dim);
    }

    body.avail-admin .hour-count.zero {
      background: transparent;
      color: var(--text-dim);
      border: 1px solid var(--border);
    }

    body.avail-admin .hour-body {
      padding: 12px 16px 16px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }

    body.avail-admin .hour-row.collapsed .hour-body {
      display: none;
    }

    body.avail-admin .pick-group {
      margin-bottom: 12px;
    }

    body.avail-admin .pick-group:last-child { margin-bottom: 0; }

    body.avail-admin .pick-group-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-dim);
      margin-bottom: 6px;
    }

    body.avail-admin .pick-group-label.first { color: var(--accent); }

    body.avail-admin .pick-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    body.avail-admin .pick-chip {
      font-size: 12px;
      padding: 3px 9px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text);
    }

    body.avail-admin .pick-chip.first {
      border-color: var(--accent-dim);
      background: var(--accent-glow);
    }

    body.avail-admin .pick-empty {
      font-size: 12px;
      color: var(--text-dim);
      font-style: italic;
    }

    /* --- NON-RESPONDERS --- */
    body.avail-admin .non-responders {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 16px 18px;
    }

    /* --- GENERATE TABLES SECTION --- */
    body.avail-admin .generate-section {
      margin-bottom: 36px;
    }

    body.avail-admin .generate-buttons {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    body.avail-admin .btn-generate {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 18px;
      border-radius: 5px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    body.avail-admin .btn-generate:hover:not(:disabled) {
      opacity: 0.9;
    }

    body.avail-admin .btn-generate:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      background: var(--surface-2);
      color: var(--text-dim);
    }

    body.avail-admin .btn-generate-note {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 8px;
      line-height: 1.5;
    }

    /* --- PREVIEW PANEL --- */
    body.avail-admin .preview-panel {
      background: var(--surface);
      border: 1px solid var(--accent-dim);
      border-radius: 6px;
      padding: 20px;
      margin-top: 18px;
    }

    body.avail-admin .preview-panel.hidden { display: none; }

    body.avail-admin .preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    body.avail-admin .preview-title {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
    }

    body.avail-admin .preview-actions {
      display: flex;
      gap: 8px;
    }

    body.avail-admin .btn-cancel {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 4px;
      border: 1px solid var(--border-light);
      background: var(--bg);
      color: var(--text-muted);
      cursor: pointer;
    }

    body.avail-admin .btn-cancel:hover {
      color: var(--text);
      border-color: var(--text-muted);
    }

    body.avail-admin .btn-commit {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 4px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      cursor: pointer;
    }

    body.avail-admin .preview-stats {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }

    body.avail-admin .preview-stat {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 8px 10px;
    }

    body.avail-admin .preview-stat-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      margin-bottom: 3px;
    }

    body.avail-admin .preview-stat-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    body.avail-admin .preview-slot {
      margin-bottom: 16px;
    }

    body.avail-admin .preview-slot:last-child { margin-bottom: 0; }

    body.avail-admin .preview-slot-header {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    body.avail-admin .preview-slot-time {
      letter-spacing: 0.5px;
    }

    body.avail-admin .preview-slot-meta {
      font-size: 10px;
      color: var(--text-dim);
      font-weight: 500;
    }

    body.avail-admin .preview-table {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 10px 12px;
      margin-bottom: 6px;
    }

    body.avail-admin .preview-table:last-child { margin-bottom: 0; }

    body.avail-admin .preview-table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    body.avail-admin .preview-table-id {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
    }

    body.avail-admin .preview-table-size {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-dim);
    }

    body.avail-admin .preview-table-size.short {
      color: var(--red);
    }

    body.avail-admin .preview-players {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    body.avail-admin .preview-player {
      font-size: 11px;
      padding: 2px 8px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 3px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    body.avail-admin .preview-player-source {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      padding: 1px 4px;
      border-radius: 2px;
      letter-spacing: 0.3px;
    }

    body.avail-admin .preview-player-source.first { background: var(--accent-glow); color: var(--accent); }
    body.avail-admin .preview-player-source.second { background: rgba(61, 186, 106, 0.1); color: var(--green); }
    body.avail-admin .preview-player-source.third { background: rgba(100, 160, 220, 0.1); color: #64a0dc; }
    body.avail-admin .preview-player-source.bumped { background: rgba(217, 72, 72, 0.1); color: var(--red); }
    body.avail-admin .preview-player-source.non { background: var(--surface-3); color: var(--text-dim); }

    body.avail-admin .preview-error {
      padding: 14px 16px;
      background: rgba(217, 72, 72, 0.08);
      border: 1px solid var(--red);
      color: var(--red);
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.5;
      margin-top: 12px;
    }

    body.avail-admin .preview-error.hidden { display: none; }

    body.avail-admin .preview-flagged {
      padding: 14px 16px;
      background: rgba(224, 168, 0, 0.08);
      border: 1px solid var(--amber, #e0a800);
      border-radius: 4px;
      margin-bottom: 16px;
    }

    body.avail-admin .preview-flagged-title {
      font-weight: 700;
      font-size: 13px;
      color: var(--amber, #e0a800);
      margin-bottom: 4px;
    }

    body.avail-admin .preview-flagged-note {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 10px;
    }

    body.avail-admin .preview-contact {
      padding: 8px 10px;
      background: rgba(224, 168, 0, 0.06);
      border: 1px solid rgba(224, 168, 0, 0.25);
      border-radius: 4px;
      margin-top: 8px;
    }

    body.avail-admin .preview-contact-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }

    body.avail-admin .preview-contact-name {
      font-weight: 700;
      font-size: 13px;
      color: var(--text);
    }

    body.avail-admin .preview-contact-cur {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
    }

    body.avail-admin .preview-contact-row {
      display: flex;
      gap: 8px;
      font-size: 12px;
      color: var(--text);
      line-height: 1.5;
    }

    body.avail-admin .preview-contact-label {
      flex: 0 0 64px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding-top: 1px;
    }

    body.avail-admin .preview-whatif {
      padding: 14px 16px;
      background: rgba(64, 160, 96, 0.07);
      border: 1px solid rgba(64, 160, 96, 0.35);
      border-radius: 4px;
      margin-bottom: 16px;
    }

    body.avail-admin .preview-whatif-title {
      font-weight: 700;
      font-size: 14px;
      color: var(--green, #57b97a);
      margin-bottom: 4px;
    }

    body.avail-admin .preview-whatif-note {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 10px;
    }

    body.avail-admin .preview-whatif-changes {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 12px;
    }

    body.avail-admin .preview-whatif-change {
      font-size: 13px;
      color: var(--text);
    }

    body.avail-admin .preview-whatif-arrow {
      font-weight: 700;
      color: var(--green, #57b97a);
    }

    body.avail-admin .preview-whatif-was {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
    }

    body.avail-admin .preview-whatif-tables {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-top: 1px solid rgba(64, 160, 96, 0.2);
      padding-top: 10px;
    }

    body.avail-admin .preview-whatif-table {
      display: flex;
      gap: 10px;
      font-size: 12px;
    }

    body.avail-admin .preview-whatif-time {
      flex: 0 0 72px;
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--text);
    }

    body.avail-admin .preview-whatif-names {
      color: var(--text-muted);
    }

    body.avail-admin .non-responders-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    body.avail-admin .non-responder-chip {
      font-size: 13px;
      padding: 4px 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 3px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    body.avail-admin .non-responder-chip a {
      color: var(--text-dim);
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    body.avail-admin .non-responder-chip a:hover {
      color: var(--accent);
    }

    body.avail-admin .all-submitted {
      font-size: 13px;
      color: var(--green);
      padding: 8px 0;
      text-align: center;
    }

    /* --- LOADING --- */
    body.avail-admin .loading-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 13px;
    }

    body.avail-admin .hidden { display: none !important; }

    /* --- FOOTER --- */
    body.avail-admin .site-footer {
      padding: 20px 32px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
    }

    body.avail-admin .site-footer a {
      color: var(--text-muted);
      text-decoration: none;
    }

    body.avail-admin .site-footer a:hover {
      color: var(--accent);
    }

    /* --- MOBILE --- */
    @media (max-width: 768px) {
      body.avail-admin .header { padding: 16px 16px; flex-wrap: wrap; gap: 8px; }
      body.avail-admin .header h1 { font-size: 14px; }
      body.avail-admin .stats-strip { flex-wrap: wrap; }
      body.avail-admin .stat-item { flex: 1 1 50%; padding: 12px 14px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
      body.avail-admin .stat-value { font-size: 18px; }
      body.avail-admin .main { padding: 20px 16px; }
      body.avail-admin .hour-header { gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
      body.avail-admin .hour-time { min-width: 70px; font-size: 13px; }
      body.avail-admin .hour-local { min-width: 0; font-size: 10px; }
      body.avail-admin .hour-demand-bar { display: none; }
      body.avail-admin .hour-counts { min-width: 0; }
    }

/* ===================================================================
   AVAILABILITY / PLAYER FORM  (body.avail)
   =================================================================== */
    /* --- HEADER --- */
    body.avail .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* --- HERO --- */
    body.avail .hero {
      padding: 32px 32px 20px;
      text-align: center;
    }

    body.avail .hero-title {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.5px;
      margin-bottom: 8px;
      line-height: 1.2;
    }

    body.avail .hero-blurb {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 560px;
      margin: 0 auto;
    }

    body.avail .hero-blurb strong {
      color: var(--text);
    }

    /* --- STAGE BANNER --- */
    body.avail .stage-banner {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      margin-bottom: 16px;
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      border-radius: 999px;
      font-family: var(--font-mono);
    }

    body.avail .stage-banner-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
    }

    body.avail .stage-banner-name {
      font-size: 13px;
      font-weight: 800;
      color: var(--accent);
    }

    body.avail .stage-banner-date {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      padding-left: 10px;
      border-left: 1px solid var(--accent-dim);
    }

    /* --- HERO NOTE --- */
    body.avail .hero-note {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 560px;
      margin: 12px auto 0;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    body.avail .hero-note strong {
      color: var(--text);
    }

    /* --- FORM CARD --- */
    body.avail .form-section {
      padding: 0 32px 48px;
      max-width: 720px;
      margin: 0 auto;
      width: 100%;
    }

    body.avail .form-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 28px;
    }

    body.avail .form-step {
      margin-bottom: 28px;
    }

    body.avail .form-step:last-child {
      margin-bottom: 0;
    }

    body.avail .form-step-header {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 12px;
    }

    body.avail .form-step-num {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    body.avail .form-step-title {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    body.avail .form-step-help {
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 10px;
      line-height: 1.5;
    }

    /* --- AUTOCOMPLETE --- */
    body.avail .autocomplete-wrap {
      position: relative;
    }

    body.avail .form-input {
      width: 100%;
      font-family: var(--font-body);
      font-size: 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 12px 14px;
      border-radius: 5px;
      transition: border-color 0.15s;
    }

    body.avail .form-input:focus {
      outline: none;
      border-color: var(--accent);
    }

    body.avail .form-input::placeholder {
      color: var(--text-dim);
    }

    body.avail .form-input:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    body.avail .autocomplete-dropdown {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: var(--surface-2);
      border: 1px solid var(--border-light);
      border-radius: 5px;
      max-height: 220px;
      overflow-y: auto;
      z-index: 10;
      display: none;
    }

    body.avail .autocomplete-dropdown.open {
      display: block;
    }

    body.avail .autocomplete-option {
      padding: 10px 14px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }

    body.avail .autocomplete-option:last-child {
      border-bottom: none;
    }

    .autocomplete-option:hover,
    body.avail .autocomplete-option.highlighted {
      background: var(--surface-3);
    }

    body.avail .autocomplete-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    body.avail .autocomplete-id {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
    }

    body.avail .autocomplete-empty {
      padding: 12px 14px;
      font-size: 12px;
      color: var(--text-dim);
      text-align: center;
    }

    /* --- SELECTED PLAYER --- */
    body.avail .selected-player {
      display: none;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      border-radius: 5px;
    }

    body.avail .selected-player.show {
      display: flex;
    }

    body.avail .selected-player-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    body.avail .selected-player-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }

    body.avail .selected-player-id {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }

    body.avail .btn-change {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 3px;
      border: 1px solid var(--border-light);
      background: var(--bg);
      color: var(--text-muted);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: color 0.15s, border-color 0.15s;
    }

    body.avail .btn-change:hover {
      color: var(--accent);
      border-color: var(--accent-dim);
    }

    /* --- TIME SLOTS --- */
    body.avail .slot-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    body.avail .slot-cell {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      padding: 10px 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-muted);
      cursor: pointer;
      text-align: center;
      transition: all 0.12s;
      user-select: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: center;
    }

    body.avail .slot-cell:hover:not(.disabled) {
      border-color: var(--border-light);
      color: var(--text);
    }

    body.avail .slot-cell.selected {
      background: rgba(61, 186, 106, 0.15);
      border-color: var(--green);
      color: var(--green);
    }

    body.avail .slot-tct {
      font-size: 13px;
      font-weight: 700;
    }

    body.avail .slot-local {
      font-size: 10px;
      font-weight: 400;
      opacity: 0.7;
    }

    body.avail .slot-cell.selected .slot-local {
      opacity: 0.85;
    }

    body.avail .slot-pick-tag {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    /* --- DISABLED OVERLAY --- */
    body.avail .step-disabled {
      opacity: 0.4;
      pointer-events: none;
    }

    /* --- SUBMIT --- */
    body.avail .submit-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

    body.avail .submit-summary {
      font-size: 12px;
      color: var(--text-dim);
      line-height: 1.5;
    }

    body.avail .submit-summary strong {
      color: var(--text);
      font-weight: 600;
    }

    body.avail .btn-submit {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      padding: 11px 24px;
      border-radius: 5px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      cursor: pointer;
      transition: opacity 0.15s;
      white-space: nowrap;
    }

    body.avail .btn-submit:hover:not(:disabled) {
      opacity: 0.9;
    }

    body.avail .btn-submit:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* --- SUCCESS / ERROR --- */
    body.avail .form-message {
      display: none;
      padding: 14px 16px;
      border-radius: 5px;
      font-size: 13px;
      line-height: 1.5;
      margin-top: 16px;
    }

    body.avail .form-message.show {
      display: block;
    }

    body.avail .form-message.success {
      background: rgba(61, 186, 106, 0.08);
      border: 1px solid var(--green-dim);
      color: var(--green);
    }

    body.avail .form-message.error {
      background: rgba(217, 72, 72, 0.08);
      border: 1px solid var(--red);
      color: var(--red);
    }

    /* --- EXISTING PICKS NOTICE --- */
    body.avail .existing-notice {
      display: none;
      padding: 10px 14px;
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 10px;
      line-height: 1.5;
    }

    body.avail .existing-notice.show {
      display: block;
    }

    body.avail .existing-notice strong {
      color: var(--accent);
    }

    /* --- LOADING --- */
    body.avail .loading-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 13px;
    }

    body.avail .hidden { display: none !important; }

    /* --- FOOTER --- */
    body.avail .site-footer {
      padding: 20px 32px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
    }

    body.avail .site-footer a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s;
    }

    body.avail .site-footer a:hover {
      color: var(--accent);
    }

    /* --- TOAST --- */
    body.avail .toast-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    body.avail .toast {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 5px;
      animation: toastIn 0.25s ease-out, toastOut 0.25s ease-in 2.5s forwards;
      max-width: 360px;
    }

    body.avail .toast-success { background: var(--green); color: #fff; }
    body.avail .toast-error { background: var(--red); color: #fff; }

    @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

    /* --- MOBILE --- */
    @media (max-width: 640px) {
      body.avail .header { padding: 16px 16px; }
      body.avail .hero { padding: 24px 16px 16px; }
      body.avail .hero-title { font-size: 18px; }
      body.avail .form-section { padding: 0 16px 32px; }
      body.avail .form-card { padding: 20px; }
      body.avail .slot-grid { grid-template-columns: repeat(4, 1fr); }
      body.avail .submit-row { flex-direction: column; align-items: stretch; }
      body.avail .btn-submit { width: 100%; }
    }

    @media (max-width: 400px) {
      body.avail .slot-grid { grid-template-columns: repeat(3, 1fr); }
    }

/* ===================================================================
   INDEX / LEADERBOARD  (body.leaderboard)
   =================================================================== */
    /* --- HEADER (base in shared.css; this page's header is sticky) --- */
    body.leaderboard .header {
      position: sticky;
      top: 0;
      background: var(--bg);
      z-index: 100;
    }

    body.leaderboard .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* --- REG BANNER --- */
    body.leaderboard .reg-banner {
      padding: 8px 32px;
      background: var(--accent-glow);
      border-bottom: 1px solid var(--border);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.3px;
    }

    body.leaderboard .reg-banner strong {
      color: var(--accent);
      font-weight: 700;
    }

    body.leaderboard .reg-banner.hidden { display: none; }

    /* --- PRIZE STRIP --- */
    body.leaderboard .prize-strip {
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    body.leaderboard .prize-pool-total {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 24px;
      border-right: 1px solid var(--border);
      background: var(--accent-glow);
      min-width: 200px;
    }

    body.leaderboard .prize-pool-label {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }

    body.leaderboard .prize-pool-amount {
      font-family: var(--font-mono);
      font-size: 26px;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: -0.5px;
    }

    body.leaderboard .prize-pool-sub {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 2px;
      line-height: 1.4;
    }

    body.leaderboard .prize-pool-total.clickable {
      cursor: pointer;
      transition: background 0.15s;
    }

    body.leaderboard .prize-pool-total.clickable:hover {
      background: var(--accent-glow);
    }

    body.leaderboard .prize-pool-payout-link {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      margin-top: 4px;
      color: var(--text-muted);
    }

    body.leaderboard .prize-pool-total.clickable:hover .prize-pool-payout-link {
      color: var(--accent);
    }

    body.leaderboard .prize-pool-payout-link .value-link {
      border-bottom: 1px dashed var(--border-light);
      padding-bottom: 1px;
    }

    body.leaderboard .prize-pool-total.clickable:hover .prize-pool-payout-link .value-link {
      border-bottom-color: var(--accent);
    }

    body.leaderboard .prize-info {
      display: flex;
      align-items: stretch;
      flex: 1;
    }

    body.leaderboard .prize-info-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 20px;
      border-left: 1px solid var(--border);
      flex: 1;
      min-width: 90px;
    }

    body.leaderboard .prize-info-label {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      margin-bottom: 2px;
    }

    body.leaderboard .prize-info-value {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    body.leaderboard .prize-info-value.clickable {
      cursor: pointer;
      transition: color 0.15s;
    }

    body.leaderboard .prize-info-value.clickable:hover {
      color: var(--accent);
    }

    body.leaderboard .prize-info-value .value-link {
      border-bottom: 1px dashed var(--border-light);
      padding-bottom: 1px;
    }

    body.leaderboard .prize-info-value.clickable:hover .value-link {
      border-bottom-color: var(--accent);
    }

    /* --- HERO --- */
    body.leaderboard .hero {
      padding: 28px 32px 20px;
      text-align: center;
    }

    body.leaderboard .hero-title {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.5px;
      margin-bottom: 8px;
      line-height: 1.2;
    }

    body.leaderboard .hero-blurb {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 640px;
      margin: 0 auto;
    }

    /* --- FINAL STAGE FEATURE (Stage 4 Phase 2, surfaced to top) --- */
    body.leaderboard .final-feature {
      max-width: 1100px;
      margin: 0 auto;
      padding: 28px 32px 24px;
    }

    body.leaderboard .final-feature-head {
      text-align: center;
      margin-bottom: 18px;
    }

    body.leaderboard .final-feature-eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      background: var(--accent-glow);
      border: 1px solid var(--accent-dim);
      border-radius: 999px;
      padding: 4px 12px;
      margin-bottom: 10px;
    }

    body.leaderboard .final-feature-title {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.5px;
      margin: 0 0 6px;
      line-height: 1.2;
    }

    body.leaderboard .final-feature-sub {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      max-width: 620px;
      margin: 0 auto;
    }

    body.leaderboard .final-feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    body.leaderboard .final-feature-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px 18px 18px;
    }

    body.leaderboard .final-feature-card.is-final {
      border-color: var(--accent-dim);
      box-shadow: 0 0 0 1px var(--accent-dim), 0 10px 34px rgba(232, 168, 50, 0.07);
    }

    body.leaderboard .final-feature-card.is-money {
      border-color: var(--green-dim);
    }

    body.leaderboard .final-feature-card-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .final-feature-card-title {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text);
    }

    body.leaderboard .final-feature-card.is-final .final-feature-card-title { color: var(--accent); }
    body.leaderboard .final-feature-card.is-money .final-feature-card-title { color: var(--green); }

    body.leaderboard .final-feature-card-note {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.4px;
      color: var(--text-muted);
    }

    body.leaderboard .stage-subsection-note-line {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    @media (max-width: 720px) {
      body.leaderboard .final-feature { padding: 4px 16px 20px; }
      body.leaderboard .final-feature-grid { grid-template-columns: 1fr; }
      body.leaderboard .final-feature-title { font-size: 20px; }
    }

    /* --- PLAYERS LIST IN MODAL --- */
    body.leaderboard .player-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .player-list-item:last-child { border-bottom: none; }

    body.leaderboard .player-list-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    body.leaderboard .player-list-name a {
      color: inherit;
      text-decoration: none;
    }

    body.leaderboard .player-list-name a:hover {
      color: var(--accent);
    }

    body.leaderboard .player-list-id {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-dim);
    }

    body.leaderboard .empty-state {
      text-align: center;
      padding: 48px 32px;
      color: var(--text-dim);
    }

    body.leaderboard .empty-state p { font-size: 14px; margin-bottom: 6px; }
    body.leaderboard .empty-state .sub { font-family: var(--font-mono); font-size: 12px; }

    /* --- TOURNAMENT VIEW --- */
    body.leaderboard .tournament-section {
      padding: 0 32px 48px;
      max-width: 1100px;
      margin: 0 auto;
    }

    body.leaderboard .search-bar-wrap {
      margin-bottom: 24px;
    }

    body.leaderboard .search-bar {
      width: 100%;
      font-family: var(--font-body);
      font-size: 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 12px 16px;
      border-radius: 6px;
      transition: border-color 0.15s;
    }

    body.leaderboard .search-bar:focus {
      outline: none;
      border-color: var(--accent);
    }

    body.leaderboard .search-bar::placeholder {
      color: var(--text-dim);
    }

    body.leaderboard .search-result-card {
      background: var(--surface);
      border: 1px solid var(--accent-dim);
      border-radius: 6px;
      padding: 20px;
      margin-bottom: 24px;
    }

    body.leaderboard .search-result-card.hidden { display: none; }

    body.leaderboard .search-result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .search-result-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
    }

    body.leaderboard .search-result-name a {
      color: inherit;
      text-decoration: none;
    }

    body.leaderboard .search-result-name a:hover {
      color: var(--accent);
    }

    body.leaderboard .search-result-id {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-dim);
      margin-top: 2px;
    }

    body.leaderboard .search-result-status {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    body.leaderboard .search-result-status.active { background: rgba(61, 186, 106, 0.12); color: var(--green); border: 1px solid var(--green-dim); }
    body.leaderboard .search-result-status.eliminated { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
    body.leaderboard .search-result-status.champion { background: rgba(232, 168, 50, 0.12); color: var(--accent); border: 1px solid var(--accent-dim); }

    body.leaderboard .search-result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    body.leaderboard .search-result-block {
      display: flex;
      flex-direction: column;
    }

    body.leaderboard .search-result-block-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      margin-bottom: 6px;
    }

    body.leaderboard .search-result-block-value {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      font-style: italic;
    }

    body.leaderboard .search-no-result {
      background: var(--surface);
      border: 1px dashed var(--border-light);
      border-radius: 6px;
      padding: 20px;
      margin-bottom: 24px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }

    body.leaderboard .search-no-result.hidden { display: none; }

    /* --- STAGE PANELS --- */
    body.leaderboard .stage-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    body.leaderboard .stage-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: var(--surface-2);
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }

    body.leaderboard .stage-header:hover {
      background: var(--surface-3);
    }

    body.leaderboard .stage-header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    body.leaderboard .stage-chevron {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      width: 12px;
      transition: transform 0.2s;
    }

    body.leaderboard .stage-panel.collapsed .stage-chevron {
      transform: rotate(-90deg);
    }

    body.leaderboard .stage-title {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
    }

    body.leaderboard .stage-date {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      background: var(--surface-3);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 2px 7px;
    }

    body.leaderboard .stage-summary {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
    }

    body.leaderboard .stage-body {
      padding: 16px 18px 18px;
      border-top: 1px solid var(--border);
    }

    body.leaderboard .stage-panel.collapsed .stage-body {
      display: none;
    }

    body.leaderboard .stage-subsection {
      margin-bottom: 16px;
    }

    body.leaderboard .stage-subsection:last-child {
      margin-bottom: 0;
    }

    body.leaderboard .stage-subsection-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      margin-bottom: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      gap: 8px;
    }

    body.leaderboard .stage-subsection-count {
      font-size: 10px;
      color: var(--text-dim);
      font-weight: 500;
      margin-left: auto;
    }

    body.leaderboard .stage-subsection-note {
      font-size: 10px;
      letter-spacing: 0.4px;
      color: var(--green, #4caf50);
      font-weight: 600;
      text-transform: none;
    }

    body.leaderboard .stage-subsection-group-title {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent, #e8a832);
      margin: 18px 0 10px;
    }
    body.leaderboard .stage-subsection-group-title:first-child { margin-top: 0; }

    body.leaderboard .stage-placeholder {
      font-size: 12px;
      color: var(--text-dim);
      font-style: italic;
      padding: 8px 0;
    }

    /* Main Game / Rebuy tabs within a stage — segmented control */
    body.leaderboard .stage-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 18px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 4px;
    }

    body.leaderboard .stage-tab {
      flex: 1;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 10px 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    body.leaderboard .stage-tab:hover {
      color: var(--text);
      background: var(--surface);
    }

    body.leaderboard .stage-tab.active {
      color: var(--bg);
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 1px 6px rgba(232, 168, 50, 0.3);
    }

    body.leaderboard .stage-tab.active:hover {
      color: var(--bg);
      background: var(--accent);
    }

    body.leaderboard .stage-tab-label {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    body.leaderboard .stage-tab-amount {
      font-size: 10px;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-glow);
      padding: 2px 6px;
      border-radius: 3px;
    }

    body.leaderboard .stage-tab.active .stage-tab-amount {
      color: var(--bg);
      background: rgba(15, 17, 21, 0.2);
    }

    /* Status pill on each tab: live / waiting / done */
    body.leaderboard .tab-pill {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      background: var(--surface-3);
      color: var(--text-muted);
    }

    body.leaderboard .tab-pill.live {
      background: rgba(61, 186, 106, 0.16);
      color: var(--green);
    }

    body.leaderboard .tab-pill.wait {
      background: var(--accent-glow);
      color: var(--accent);
    }

    body.leaderboard .tab-pill.done {
      background: rgba(61, 186, 106, 0.12);
      color: var(--green);
    }

    /* On the active (gold) tab, dark out the pill so it stays legible */
    body.leaderboard .stage-tab.active .tab-pill {
      background: rgba(15, 17, 21, 0.2);
      color: rgba(15, 17, 21, 0.92);
    }

    body.leaderboard .pulse-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      margin-right: 5px;
      animation: tabPulse 1.6s ease-in-out infinite;
    }

    body.leaderboard .stage-tab.active .pulse-dot {
      background: var(--bg);
    }

    @keyframes tabPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.8); }
    }

    body.leaderboard .stage-tab-panel {
      display: none;
    }

    body.leaderboard .stage-tab-panel.active {
      display: block;
    }

    body.leaderboard .stage-tab-note {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
      padding: 2px 0 14px;
    }

    @media (max-width: 600px) {
      body.leaderboard .stage-tab {
        flex-direction: column;
        gap: 5px;
        padding: 8px 10px;
        font-size: 11px;
      }
    }

    /* Public table cards */
    body.leaderboard .pub-table-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 14px 16px;
      margin-bottom: 14px;
    }
    body.leaderboard .pub-table-card:last-child { margin-bottom: 0; }

    body.leaderboard .pub-table-card-header {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .pub-table-card-left {
      display: flex;
      align-items: baseline;
      gap: 10px;
      justify-self: start;
    }

    body.leaderboard .pub-table-card-id {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.3px;
    }

    body.leaderboard .pub-table-card-time {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 0.3px;
    }

    body.leaderboard .pub-table-card-steward {
      justify-self: center;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    body.leaderboard .steward-label {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text-dim);
    }
    body.leaderboard .steward-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
    }

    body.leaderboard .pub-table-status {
      justify-self: end;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 3px;
      letter-spacing: 0.3px;
    }
    body.leaderboard .pub-table-status.live { background: rgba(61, 186, 106, 0.12); color: var(--green); }
    body.leaderboard .pub-table-status.complete { background: rgba(232, 168, 50, 0.12); color: var(--accent); }

    body.leaderboard .pub-table-players {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    body.leaderboard .pub-table-player {
      font-size: 12px;
      padding: 5px 11px;
      background: var(--surface-2);
      border-radius: 4px;
      border: 1px solid var(--border);
    }
    body.leaderboard .pub-table-player.placed-1 { border-color: var(--accent-dim); background: rgba(232, 168, 50, 0.08); color: var(--accent); }
    body.leaderboard .pub-table-player.placed-2 { border-color: #5a6a7a; background: rgba(160, 168, 184, 0.08); }
    body.leaderboard .pub-table-player.placed-3 { border-color: #735237; background: rgba(184, 115, 51, 0.08); }
    body.leaderboard .pub-table-player.eliminated { color: var(--text-dim); text-decoration: line-through; opacity: 0.7; }

    body.leaderboard .pub-table-place-prefix {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      opacity: 0.7;
      margin-right: 3px;
    }

    /* Queue chips */
    body.leaderboard .queue-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px 0;
    }

    body.leaderboard .queue-chip {
      font-size: 11px;
      padding: 3px 8px;
      background: var(--surface-2);
      border-radius: 3px;
      border: 1px solid var(--border);
      color: var(--text);
    }

    body.leaderboard .queue-chip-source {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--text-dim);
      margin-left: 4px;
    }

    /* --- STANDINGS LADDER --- */
    body.leaderboard .standings-panel .stage-title { color: var(--accent); }

    body.leaderboard .ladder-note {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 16px;
      line-height: 1.5;
    }

    body.leaderboard .ladder-row {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 14px;
      align-items: start;
      padding: 12px 0;
      border-top: 1px solid var(--border);
    }
    body.leaderboard .ladder-row:first-of-type { border-top: none; padding-top: 4px; }

    body.leaderboard .ladder-rail {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-left: 10px;
      border-left: 3px solid var(--border-light);
      min-height: 26px;
    }

    body.leaderboard .ladder-icon {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 700;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      background: var(--surface-2);
      color: var(--text-muted);
      flex-shrink: 0;
    }

    body.leaderboard .ladder-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text);
      white-space: nowrap;
    }

    body.leaderboard .ladder-count {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      color: var(--text-dim);
      margin-left: auto;
    }

    body.leaderboard .ladder-players {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    body.leaderboard .ladder-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 4px 10px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.15s, background 0.15s;
    }
    body.leaderboard .ladder-chip:hover {
      border-color: var(--border-light);
      background: var(--surface-3);
    }

    body.leaderboard .ladder-chip-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--text-dim);
    }

    /* Tier accents — top tiers glow, eliminated dims out */
    body.leaderboard .tier-champion .ladder-rail { border-left-color: var(--accent); }
    body.leaderboard .tier-champion .ladder-icon { background: var(--accent); color: var(--bg); }
    body.leaderboard .tier-champion .ladder-label { color: var(--accent); }

    body.leaderboard .tier-final .ladder-rail { border-left-color: var(--accent-dim); }
    body.leaderboard .tier-final .ladder-icon { background: rgba(232, 168, 50, 0.15); color: var(--accent); }
    body.leaderboard .tier-final .ladder-label { color: var(--accent); }

    body.leaderboard .tier-money .ladder-rail { border-left-color: #2f7d4f; }
    body.leaderboard .tier-money .ladder-icon { background: rgba(76, 175, 80, 0.14); color: var(--green, #4caf50); }
    body.leaderboard .tier-money .ladder-label { color: var(--green, #4caf50); }

    body.leaderboard .tier-s4 .ladder-rail { border-left-color: #8a6a2a; }
    body.leaderboard .tier-s3 .ladder-rail { border-left-color: #6a6f7a; }
    body.leaderboard .tier-s2 .ladder-rail { border-left-color: #565b66; }
    body.leaderboard .tier-s1 .ladder-rail { border-left-color: var(--border-light); }

    body.leaderboard .tier-rebuy .ladder-rail { border-left-color: var(--red-dim); border-left-style: dashed; }
    body.leaderboard .tier-rebuy .ladder-icon { background: rgba(217, 72, 72, 0.12); color: var(--red); }

    body.leaderboard .tier-elim .ladder-rail { border-left-color: #3a2222; }
    body.leaderboard .tier-elim .ladder-icon { background: rgba(217, 72, 72, 0.08); color: var(--red-dim); }
    body.leaderboard .tier-elim .ladder-label { color: var(--text-dim); }
    body.leaderboard .tier-elim .ladder-chip { color: var(--text-dim); opacity: 0.85; }

    @media (max-width: 560px) {
      body.leaderboard .ladder-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      body.leaderboard .ladder-rail { border-left: none; padding-left: 0; }
    }

    /* Rebuy nested panel */
    body.leaderboard .rebuy-nested {
      margin-top: 16px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 5px;
      overflow: hidden;
    }

    body.leaderboard .rebuy-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }

    body.leaderboard .rebuy-header:hover {
      background: var(--surface);
    }

    body.leaderboard .rebuy-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    body.leaderboard .rebuy-chevron {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-dim);
      width: 10px;
      transition: transform 0.2s;
    }

    body.leaderboard .rebuy-nested.collapsed .rebuy-chevron {
      transform: rotate(-90deg);
    }

    body.leaderboard .rebuy-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
    }

    body.leaderboard .rebuy-amount {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--accent-dim);
      background: var(--accent-glow);
      padding: 2px 6px;
      border-radius: 3px;
    }

    body.leaderboard .rebuy-body {
      padding: 12px 14px 14px;
      border-top: 1px solid var(--border);
    }

    body.leaderboard .rebuy-nested.collapsed .rebuy-body {
      display: none;
    }

    /* --- HOW TO ENTER MODAL CONTENT --- */
    body.leaderboard .enter-amount {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 700;
      color: var(--accent);
      display: block;
      margin: 12px 0 8px;
    }

    body.leaderboard .enter-message {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 8px 12px;
      display: inline-block;
      margin-top: 4px;
    }

    /* --- MODAL --- */
    body.leaderboard .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    body.leaderboard .modal-overlay.open { opacity: 1; pointer-events: auto; }

    body.leaderboard .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      width: 100%;
      max-width: 620px;
      max-height: 85vh;
      overflow-y: auto;
      transform: translateY(12px);
      transition: transform 0.2s;
    }

    body.leaderboard .modal-overlay.open .modal { transform: translateY(0); }

    body.leaderboard .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: 1;
    }

    body.leaderboard .modal-header h2 {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent);
    }

    body.leaderboard .modal-close {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface-2);
      color: var(--text-muted);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s, color 0.2s;
    }

    body.leaderboard .modal-close:hover { border-color: var(--border-light); color: var(--text); }

    body.leaderboard .modal-body { padding: 24px; }

    body.leaderboard .modal-section { margin-bottom: 24px; }
    body.leaderboard .modal-section:last-child { margin-bottom: 0; }

    body.leaderboard .modal-section-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent-dim);
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .modal-body p {
      font-size: 13px;
      line-height: 1.65;
      color: var(--text-muted);
      margin-bottom: 10px;
    }

    body.leaderboard .modal-body p:last-child { margin-bottom: 0; }
    body.leaderboard .modal-body strong { color: var(--text); font-weight: 600; }

    body.leaderboard .rule-item {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    body.leaderboard .rule-item:last-child { margin-bottom: 0; }

    body.leaderboard .rule-num {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dim);
      min-width: 20px;
      padding-top: 2px;
    }

    body.leaderboard .rule-text strong { color: var(--text); }

    body.leaderboard .stage-flow-list {
      list-style: none;
      padding: 0;
    }

    body.leaderboard .stage-flow-list li {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      color: var(--text-muted);
    }

    body.leaderboard .stage-flow-list li:last-child { border-bottom: none; }

    body.leaderboard .stage-flow-list li strong {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-block;
      margin-right: 8px;
    }

    body.leaderboard .modal-warning {
      background: rgba(217, 72, 72, 0.08);
      border: 1px solid rgba(217, 72, 72, 0.2);
      border-radius: 4px;
      padding: 12px 14px;
      font-size: 12px;
      line-height: 1.6;
      color: var(--red);
      margin-top: 12px;
    }

    body.leaderboard .modal-highlight {
      background: var(--accent-glow);
      border: 1px solid rgba(232, 168, 50, 0.15);
      border-radius: 4px;
      padding: 12px 14px;
      font-size: 12px;
      line-height: 1.6;
      color: var(--text-muted);
    }

    body.leaderboard .modal-highlight strong { color: var(--accent); }

    /* --- DONOR LIST IN MODAL --- */
    body.leaderboard .donor-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }

    body.leaderboard .donor-list-item:last-child { border-bottom: none; }

    body.leaderboard .donor-list-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }

    body.leaderboard .donor-list-amount {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--accent);
    }

    body.leaderboard .payout-intro {
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.5;
      margin-bottom: 12px;
    }

    body.leaderboard .payout-intro-bonus {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--border, rgba(255,255,255,0.08));
    }

    body.leaderboard .payout-place {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
    }

    body.leaderboard .payout-pct {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      text-align: right;
      min-width: 56px;
      margin-right: 16px;
    }

    body.leaderboard .payout-winner {
      font-size: 12px;
      font-weight: 600;
      color: var(--accent, #e8a832);
      margin-right: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px;
    }

    /* --- PAYOUT BOARD (replaces the standings ladder once Stage 4 begins) --- */
    body.leaderboard .payout-board { display: flex; flex-direction: column; gap: 6px; }

    body.leaderboard .payout-board-champion {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      margin-bottom: 8px;
      border: 1px solid var(--border, rgba(255,255,255,0.1));
      border-radius: 8px;
      background: rgba(232, 168, 50, 0.06);
    }
    body.leaderboard .payout-board-champion.crowned {
      border-color: var(--accent, #e8a832);
      background: rgba(232, 168, 50, 0.12);
    }
    body.leaderboard .payout-board-champion .pbc-crown { font-size: 22px; line-height: 1; }
    body.leaderboard .payout-board-champion .pbc-label {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-muted);
    }
    body.leaderboard .payout-board-champion .pbc-name {
      margin-left: auto;
      font-size: 17px;
      font-weight: 700;
      color: var(--accent, #e8a832);
    }

    body.leaderboard .payout-board-rows { display: flex; flex-direction: column; }

    body.leaderboard .payout-board-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 4px;
      border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
    }
    body.leaderboard .payout-board-row:last-child { border-bottom: none; }
    body.leaderboard .payout-board-row.filled .pbr-name { color: var(--text, #fff); }

    body.leaderboard .payout-board-row .pbr-place {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      min-width: 52px;
    }
    body.leaderboard .payout-board-row .pbr-name {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    body.leaderboard .payout-board-row .pbr-tbd {
      font-size: 11px;
      font-weight: 500;
      font-style: italic;
      color: var(--text-dim);
      letter-spacing: 0.3px;
    }
    body.leaderboard .payout-board-row .pbr-pct {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-dim);
      text-align: right;
      min-width: 44px;
    }
    body.leaderboard .payout-board-row .pbr-amount {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--green, #4caf50);
      text-align: right;
      min-width: 96px;
    }

    body.leaderboard .payout-board-bonus-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--accent, #e8a832);
      margin: 16px 0 6px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    body.leaderboard .payout-board-bonus-title span {
      font-size: 10px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text-dim);
    }

    @media (max-width: 560px) {
      body.leaderboard .payout-board-row .pbr-pct { display: none; }
      body.leaderboard .payout-board-row .pbr-amount { min-width: 78px; }
    }

    body.leaderboard .donor-total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0 0;
      margin-top: 4px;
    }

    body.leaderboard .donor-total-label {
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }

    body.leaderboard .donor-total-amount {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 800;
      color: var(--accent);
    }

    body.leaderboard .donor-empty {
      font-size: 13px;
      color: var(--text-dim);
      padding: 12px 0;
      text-align: center;
    }

    /* --- FOOTER --- */
    body.leaderboard .site-footer {
      padding: 20px 32px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-dim);
    }

    body.leaderboard .site-footer a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.15s;
    }

    body.leaderboard .site-footer a:hover {
      color: var(--accent);
    }

    /* --- MOBILE --- */
    @media (max-width: 768px) {
      body.leaderboard .header {
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 8px;
      }

      body.leaderboard .header h1 { font-size: 14px; }
      body.leaderboard .header-right { gap: 8px; }
      body.leaderboard .btn-pill { font-size: 10px; padding: 5px 10px; }

      body.leaderboard .prize-strip { flex-direction: column; }

      body.leaderboard .prize-pool-total {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 14px 16px;
        min-width: unset;
        flex-direction: row;
        align-items: center;
        gap: 12px;
      }

      body.leaderboard .prize-pool-amount { font-size: 18px; }

      body.leaderboard .prize-info {
        flex-wrap: wrap;
        border-top: 1px solid var(--border);
      }

      body.leaderboard .prize-info-item {
        padding: 10px 16px;
        border-left: none;
        border-right: 1px solid var(--border);
        flex: 1;
        min-width: 50%;
      }

      body.leaderboard .prize-info-value { font-size: 14px; }

      body.leaderboard .reg-banner { padding: 6px 16px; font-size: 11px; }
      body.leaderboard .hero { padding: 20px 16px 16px; }
      body.leaderboard .hero-title { font-size: 18px; }
      body.leaderboard .hero-blurb { font-size: 12px; }

      body.leaderboard .tournament-section { padding: 0 16px 32px; }
      body.leaderboard .search-result-grid { grid-template-columns: 1fr; gap: 12px; }
      body.leaderboard .search-result-header { flex-direction: column; align-items: flex-start; gap: 8px; }
      body.leaderboard .stage-header { padding: 12px 14px; }
      body.leaderboard .stage-body { padding: 12px 14px 14px; }
      body.leaderboard .rebuy-header { padding: 10px 12px; }
      body.leaderboard .rebuy-body { padding: 10px 12px 12px; }

      body.leaderboard .modal-overlay { padding: 12px; }
      body.leaderboard .modal { max-height: 90vh; }
      body.leaderboard .modal-header { padding: 16px; }
      body.leaderboard .modal-body { padding: 16px; }
    }

/* ===================================================================
   STEWARDS  (body.stewards)
   =================================================================== */

body.stewards .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.stewards .signed-in-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(61, 186, 106, 0.12);
  border: 1px solid var(--green-dim);
  color: var(--green);
}

body.stewards .signed-in-pill strong {
  font-weight: 700;
  color: var(--text);
}

body.stewards .hidden { display: none; }

body.stewards .main {
  padding: 24px 28px 60px;
  max-width: 1500px;
  margin: 0 auto;
}

body.stewards #content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

body.stewards .sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

body.stewards .panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

body.stewards .stewards-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 24px 24px;
}

body.stewards .section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

body.stewards .section-title-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

body.stewards .section-title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Collapsible sections */
body.stewards .stewards-section.collapsible .section-title {
  cursor: pointer;
  user-select: none;
}

body.stewards .section-toggle-left {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

body.stewards .section-chevron {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.2s;
}

body.stewards .stewards-section.collapsed .section-chevron {
  transform: rotate(-90deg);
}

body.stewards .stewards-section.collapsed .section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

body.stewards .stewards-section.collapsed > *:not(.section-title) {
  display: none;
}

body.stewards .btn-auto-assign,
body.stewards button.btn-auto-assign {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}

body.stewards button.btn-auto-assign:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
}

body.stewards button.btn-auto-assign:disabled {
  opacity: 0.55;
  cursor: wait;
}

body.stewards .section-blurb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* --- Stewards roster --- */
body.stewards .steward-add-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

body.stewards .steward-add-form input {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 4px;
  outline: none;
}

body.stewards .steward-add-form input:focus { border-color: var(--accent); }
body.stewards .steward-add-form input::placeholder { color: var(--border-light); }
body.stewards .steward-add-form input[name="name"] { flex: 2; min-width: 160px; }
body.stewards .steward-add-form input[name="tornId"] { flex: 1; min-width: 120px; }

body.stewards .btn-add {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid var(--accent-dim);
  background: rgba(232, 168, 50, 0.1);
  color: var(--accent);
  cursor: pointer;
}
body.stewards .btn-add:hover { background: rgba(232, 168, 50, 0.2); }
body.stewards .btn-add:disabled { opacity: 0.4; cursor: not-allowed; }

body.stewards .cap-notice {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

body.stewards .steward-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.stewards .steward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}

body.stewards .steward-row-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

body.stewards .steward-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

body.stewards .steward-row-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

body.stewards .steward-row-id a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-dim);
}
body.stewards .steward-row-id a:hover { color: var(--accent); border-bottom-color: var(--accent); }

body.stewards .btn-remove {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--red-dim);
  background: rgba(217, 72, 72, 0.08);
  color: var(--red);
  cursor: pointer;
}
body.stewards .btn-remove:hover { background: rgba(217, 72, 72, 0.2); }

body.stewards .empty-list {
  font-size: 13px;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
}

/* --- Availability chips --- */
body.stewards .avail-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.stewards .avail-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}

body.stewards .avail-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

body.stewards .avail-row-name-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

body.stewards .avail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.stewards .slot-chip {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.stewards .slot-chip:hover { border-color: var(--accent-dim); color: var(--text); }

body.stewards .slot-chip.selected {
  background: rgba(232, 168, 50, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}

body.stewards .slot-chip-local {
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.7;
}

/* --- Stage tabs --- */
body.stewards .stage-tabs,
body.avail-admin .stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

body.stewards .stage-tab,
body.avail-admin .stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-muted);
  margin-bottom: -1px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

body.stewards .stage-tab:hover,
body.avail-admin .stage-tab:hover {
  color: var(--text);
}

body.stewards .stage-tab.empty,
body.avail-admin .stage-tab.empty {
  opacity: 0.55;
}

body.stewards .stage-tab.empty.active,
body.avail-admin .stage-tab.empty.active {
  opacity: 1;
}

body.stewards .stage-tab.active,
body.avail-admin .stage-tab.active {
  color: var(--accent);
  background: var(--surface-2);
  border-color: var(--border);
  border-bottom-color: var(--surface-2);
}

body.stewards .stage-tab-count,
body.avail-admin .stage-tab-count {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
}

body.stewards .stage-tab.active .stage-tab-count,
body.avail-admin .stage-tab.active .stage-tab-count {
  background: var(--accent-dim);
  color: var(--bg);
}

body.stewards .stage-tab.all-complete .stage-tab-count,
body.avail-admin .stage-tab.all-complete .stage-tab-count {
  background: var(--green);
  color: #fff;
}

body.stewards .stage-panel {
  display: none;
}

body.stewards .stage-panel.active {
  display: block;
}

/* --- Tables by slot --- */
body.stewards .slot-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 18px;
  overflow: hidden;
}

body.stewards .slot-block-header {
  padding: 12px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

body.stewards .slot-block-time {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}

body.stewards .slot-block-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

body.stewards .slot-block-body {
  padding: 14px 18px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

body.stewards .steward-table-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.stewards .steward-table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.stewards .steward-table-card-header-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.stewards .steward-table-card.collapsible .steward-table-card-header {
  cursor: pointer;
  user-select: none;
}

body.stewards .steward-table-card .card-chevron {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 0.2s;
  margin-right: 2px;
}

body.stewards .steward-table-card.collapsed .card-chevron {
  transform: rotate(-90deg);
}

body.stewards .steward-table-card.collapsed > *:not(.steward-table-card-header) {
  display: none;
}

body.stewards .steward-table-card-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}

body.stewards .steward-table-card-stage {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

body.stewards .steward-table-card-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 3px;
}

body.stewards .steward-table-card-status.live { background: rgba(61, 186, 106, 0.12); color: var(--green); }
body.stewards .steward-table-card-status.complete { background: rgba(232, 168, 50, 0.12); color: var(--accent); }

body.stewards .steward-table-assign {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.stewards .steward-table-assign-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

body.stewards .steward-table-assign select {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 4px;
  outline: none;
  width: 100%;
}

body.stewards .steward-table-assign select:focus { border-color: var(--accent); }
body.stewards .steward-table-assign select.assigned { border-color: var(--accent); color: var(--accent); }

body.stewards .steward-table-players {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}

body.stewards .steward-table-player {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

body.stewards .steward-table-player-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

body.stewards .steward-table-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.stewards .btn-copy {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  flex: 1;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.stewards .btn-copy:hover { border-color: var(--accent-dim); color: var(--accent); }
body.stewards .btn-copy.copied { background: rgba(61, 186, 106, 0.18); border-color: var(--green-dim); color: var(--green); }

body.stewards .no-tables {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* Sidebar steward rows stack vertically and stay compact */
body.stewards .sidebar .steward-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
}

body.stewards .sidebar .steward-row-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

body.stewards .sidebar .section-blurb {
  font-size: 12px;
  margin-bottom: 12px;
}

@media (max-width: 1000px) {
  body.stewards #content {
    grid-template-columns: 1fr;
  }
  body.stewards .sidebar {
    position: static;
    top: auto;
  }
  body.stewards .sidebar .steward-row {
    flex-direction: row;
    align-items: center;
  }
  body.stewards .sidebar .steward-row-info {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  body.stewards .main { padding: 18px 14px 40px; }
  body.stewards .avail-row { grid-template-columns: 1fr; gap: 8px; }
  body.stewards .slot-block-body { grid-template-columns: 1fr; }
}