:root {
  --bg: #fff7f7;
  --surface: #ffffff;
  --border: #e8c9cd;
  --text: #2b1418;
  --muted: #7e565e;
  --accent: #c1121f;
  --accent-hover: #a60f1a;
  --primary: #c1121f;
  --success: #3fb950;
  --warning: #d29922;
  --radius: 8px;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

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

#app {
  width: min(96vw, 1800px);
  margin: 0 auto;
  padding: 1.5rem;
}

header {
  margin-bottom: 2rem;
}

header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 700;
}

/* --- Login overlay --- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #c1121f 0%, #7a0b13 100%);
}

.login-card {
  background: #fff;
  padding: 2.5rem 2.5rem 2rem;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-title {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}

.login-subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.login-card .form-row {
  text-align: left;
}

.login-card .form-row input {
  max-width: 100%;
}

.login-error {
  color: #dc2626;
  font-size: 0.85rem;
  margin: 0.25rem 0 0.75rem;
}

.login-btn {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Header actions row --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.user-badge #userRoleLabel {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: 0.72rem;
}

.user-badge .user-net-pl {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.15rem;
}
.user-badge .user-net-pl.positive { color: var(--success); }
.user-badge .user-net-pl.negative { color: #f85149; }

.user-badge .role-admin {
  background: rgba(193, 18, 31, 0.12);
  color: var(--accent);
}

.user-badge .role-viewer {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

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

.icon-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(193, 18, 31, 0.1);
}

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.75rem 0 0.25rem;
}

.tab {
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
  border-color: var(--accent);
}

.tab.active {
  color: var(--accent);
  background: rgba(193, 18, 31, 0.1);
  border-color: var(--accent);
}

/* Sub-tabs row */
.sub-tabs {
  display: flex;
  gap: 0;
  margin: 0.35rem 0 0;
  border-bottom: 2px solid var(--border);
}

.sub-tab {
  padding: 0.45rem 1.2rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.sub-tab:hover {
  color: var(--text);
}

.sub-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Admin slide-down panel */
.admin-panel {
  margin-bottom: 1rem;
  border-left: 3px solid var(--accent);
}

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.btn-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.muted {
  color: var(--muted);
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 12px rgba(70, 7, 14, 0.06);
}

.card h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.form-row {
  margin-bottom: 0.75rem;
}

.form-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.form-row input,
.form-row select {
  width: 100%;
  max-width: 280px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.btn {
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.btn.primary {
  background: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: var(--accent-hover);
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
}

.btn.secondary:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.btn.danger {
  background: transparent;
  color: #f85149;
  border: 1px solid var(--border);
}

.btn.danger:hover {
  background: rgba(248, 81, 73, 0.1);
}

/* --- Two-panel team picker --- */
.team-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
}

.picker-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 340px;
  max-height: 520px;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}

.picker-header h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

.picker-search {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.picker-search input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.picker-search input:focus {
  outline: none;
  border-color: var(--accent);
}

.picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.picker-seed-group {
  margin-bottom: 0.15rem;
}

.picker-seed-label {
  padding: 0.2rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: rgba(193, 18, 31, 0.06);
  position: sticky;
  top: 0;
  z-index: 1;
}

.picker-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.88rem;
  transition: background 100ms ease;
  user-select: none;
}

.picker-team:hover {
  background: rgba(193, 18, 31, 0.1);
}

.picker-team .seed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.picker-team .team-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picker-team .team-region {
  font-size: 0.75rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Owned team row in right panel */
.owned-team-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.owned-team-row .seed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.owned-team-row .team-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.owned-team-row input[name="share"] {
  width: 4.5rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  text-align: center;
}

.owned-team-row input[name="share"]:focus {
  outline: none;
  border-color: var(--accent);
}

.owned-team-row .btn-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: #f85149;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.owned-team-row .btn-remove:hover {
  background: rgba(248, 81, 73, 0.15);
  border-color: #f85149;
}

.picker-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 700px) {
  .team-picker {
    grid-template-columns: 1fr;
  }
}

.round-winners {
  margin-bottom: 1rem;
}

.round-winners h3 {
  margin: 0.5rem 0 0.25rem;
}

.round-winners select {
  width: 100%;
  max-width: 260px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.specials-band {
  margin-bottom: 1rem;
}

.specials-band label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.specials-band .multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.specials-band .multi-select label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text);
}

/* Legacy payoutBreakdown rules only apply when table has no .tracker-table (e.g. empty state) */
#payoutBreakdown > table:not(.tracker-table) {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
#payoutBreakdown > table:not(.tracker-table) th,
#payoutBreakdown > table:not(.tracker-table) td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

#totals {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

#totals .total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

#totals .net {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

#totals .net.positive { color: var(--success); }
#totals .net.negative { color: #f85149; }

.summary-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}


.tracker-scroll {
  overflow-x: auto;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
}

.tracker-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tracker-table th,
.tracker-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.tracker-table thead th {
  color: var(--text);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
  font-weight: 700;
  border-color: var(--border);
}

.ownership-row th,
.ownership-row td {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 600;
  text-align: center;
  padding: 0.35rem 0.6rem;
}

.tracker-table .total-line th,
.tracker-table .total-line td {
  border-top: 2px solid var(--accent);
}

.tracker-table .pct-col {
  width: 120px;
  text-align: right;
  font-weight: 600;
}

.tracker-table th.pct-col {
  text-align: right;
}

.tracker-table .section-row th {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  border-color: var(--border);
}

.tracker-table .subhead-row th,
.tracker-table .subhead-row td {
  background: #11b05e;
  color: #04220f;
  font-weight: 700;
  border-color: var(--border);
}

.tracker-table .subtotal-row th,
.tracker-table .subtotal-row td {
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  border-top: 1px solid var(--accent);
}

/* Won — solid green */
.tracker-table .win-cell {
  background: #11b05e;
  color: #04220f;
}

/* Lost / no payout — light red tint */
.tracker-table .lose-cell {
  background: #ffe5e5;
  color: var(--muted);
}

/* Potential win (round not yet played, team still in) — green hatch */
.tracker-table .potential-cell {
  background: repeating-linear-gradient(
    -45deg,
    #b8e6cf,
    #b8e6cf 2px,
    #e8f5ee 2px,
    #e8f5ee 6px
  );
  color: #04220f;
}

/* Eliminated before this round — neutral gray */
.tracker-table .eliminated-cell {
  background: #e8e8e8;
  color: var(--muted);
}

/* Provisional (live / unconfirmed) — hatched green */
.tracker-table .provisional-cell {
  background: repeating-linear-gradient(
    -45deg,
    #11b05e,
    #11b05e 6px,
    #b6f0cc 6px,
    #b6f0cc 12px
  ) !important;
  color: #04220f;
}

/* Standalone win/lose cell classes for non-table use */
.win-cell {
  background: #11b05e;
  color: #04220f;
}

.lose-cell {
  background: #ffe5e5;
  color: var(--muted);
}

td.has-tip {
  cursor: help;
}
td.has-tip:hover {
  outline: 2px solid var(--text);
  outline-offset: -2px;
  z-index: 10;
}

#calc-tooltip {
  position: fixed;
  background: #1a1a2e;
  color: #f0f0f0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 6px;
  max-width: 420px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}
#calc-tooltip.visible {
  opacity: 1;
}
#calc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a2e;
}

.payout-mini {
  margin-top: 1rem;
}

.payout-mini table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.payout-mini th,
.payout-mini td {
  text-align: left;
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--border);
}

.positive { color: var(--success); }
.negative { color: #f85149; }

.hidden {
  display: none !important;
}

.bracket-import { align-items: center; gap: 0.5rem; }
.bracket-import .btn { flex-shrink: 0; }
#bracketPaste { width: 100%; max-width: 100%; font-family: inherit; font-size: 0.85rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); resize: vertical; }
#bracketImportPaste label { display: block; margin-bottom: 0.25rem; }

/* ---- Group Members participant tracker ---- */
.group-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .group-summary-cards { grid-template-columns: 1fr 1fr; }
}
.group-stat-card {
  background: linear-gradient(180deg, #fff 0%, #fff4f5 100%);
  border: 1px solid #dfb1b7;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
}
.group-stat-card.accent {
  background: linear-gradient(135deg, var(--primary) 0%, #8a0d17 100%);
  border-color: var(--primary);
  color: #fff;
}
.group-stat-card.accent .group-stat-label { color: rgba(255,255,255,0.8); }
.group-stat-card.accent .group-stat-value { color: #fff; }
.group-stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.group-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.group-table th {
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 0.6rem;
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
  z-index: 2;
}
.group-table th.num,
.group-table td.num {
  text-align: right;
}
.group-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.group-table tbody tr:nth-child(even) {
  background: rgba(193, 18, 31, 0.03);
}
.group-table tbody tr:hover {
  background: rgba(193, 18, 31, 0.08);
}
.group-lead-name {
  font-weight: 700;
  color: var(--text);
}
.group-members {
  font-size: 0.72rem;
  color: var(--muted);
  max-width: 200px;
}
.group-table .positive { color: #0a5c2b; font-weight: 700; }
.group-table .negative { color: #b91c1c; font-weight: 700; }
.group-table tfoot .totals-row td {
  border-top: 2px solid var(--primary);
  background: rgba(193, 18, 31, 0.06);
  padding: 0.6rem;
}

@media (max-width: 600px) {
  .group-table { font-size: 0.72rem; }
  .group-members { max-width: 120px; }
  .group-stat-value { font-size: 1rem; }
}

/* ---- Investor personalized dashboard ---- */
.investor-dashboard {
  background: linear-gradient(135deg, #1a472a 0%, #0d2818 100%);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  color: #fff;
}
.investor-welcome {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e8f5e9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.8);
}
.investor-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.65rem;
}
.investor-stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  text-align: center;
}
.investor-stat.accent {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
}
.investor-stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.15rem;
}
.investor-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.investor-stat-value.positive { color: #4ade80; }
.investor-stat-value.negative { color: #f87171; }

.investor-highlight {
  background: rgba(17, 176, 94, 0.12) !important;
  border-left: 3px solid #11b05e;
}
.investor-highlight td:first-child {
  padding-left: 0.85rem;
}

.you-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #11b05e;
  color: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.role-investor {
  background: rgba(17, 176, 94, 0.12);
  color: #0d6e35;
}

/* ---- Admin invite controls ---- */
.admin-group-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(193, 18, 31, 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.invite-cell {
  white-space: nowrap;
}

.invite-sent {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0d6e35;
}

.btn-invite {
  font-size: 0.72rem !important;
  padding: 0.25rem 0.6rem !important;
  min-height: auto !important;
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}

.modal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 420px;
  margin: 1rem;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.modal-body {
  padding: 1.25rem;
}

.modal-body p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
}

.invite-status {
  font-size: 0.82rem;
  margin: 0.5rem 0 0;
  min-height: 1.2em;
}
.invite-status.success { color: #0d6e35; font-weight: 600; }
.invite-status.error { color: #dc2626; font-weight: 600; }

/* ---- Admin login tracking ---- */
.group-stat-logins .group-stat-value { font-variant-numeric: tabular-nums; }
.login-cell { white-space: nowrap; }
.login-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0d6e35;
}

@media (max-width: 600px) {
  .investor-stats { grid-template-columns: repeat(2, 1fr); }
  .investor-stat-value { font-size: 0.95rem; }
  .modal-card { max-width: calc(100vw - 2rem); }
}

/* ---- First Four play-in section ---- */
.first-four-section {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #fff8f8 0%, #fef1f2 100%);
  border: 1px solid #dfb1b7;
  border-radius: 10px;
}
.first-four-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.first-four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
}
.ff-card {
  background: linear-gradient(180deg, #fff 0%, #fff4f5 100%);
  border: 1px solid #dfb1b7;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(88, 8, 18, 0.06);
}
.ff-card.game-live {
  border-color: #11b05e;
  box-shadow: 0 0 0 1px #11b05e, 0 4px 12px rgba(17, 176, 94, 0.15);
}
.ff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}
.ff-region {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8f3a44;
  font-weight: 600;
}
.ff-card .team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}
.ff-card .team.winner {
  font-weight: 700;
  color: #8a0d17;
  background: rgba(193, 18, 31, 0.15);
  border: 1px solid rgba(193, 18, 31, 0.28);
}
.ff-feed {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px dashed #dfb1b7;
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 800px) {
  .first-four-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .first-four-grid {
    grid-template-columns: 1fr;
  }
}

.bracket-winnings-bar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 0.75rem 1.2rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid rgba(17, 176, 94, 0.3);
  border-radius: 10px;
}

.bw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bw-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #166534;
  opacity: 0.7;
}

.bw-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #14532d;
}

.bw-value.bw-green {
  color: #16a34a;
}

@media (max-width: 640px) {
  .bracket-winnings-bar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .bw-value {
    font-size: 0.9rem;
  }
}

.bracket-container {
  overflow-x: auto;
  padding-bottom: 1rem;
}

.bracket-rounds {
  display: grid;
  grid-template-columns: repeat(6, minmax(210px, 250px));
  gap: 18px;
  min-width: 1400px;
  position: relative;
}

.bracket-round {
  position: relative;
}

.bracket-round h4 {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8f3a44;
  text-transform: uppercase;
}

.round-lane {
  position: relative;
  border-left: 1px dashed rgba(193, 18, 31, 0.3);
  padding-left: 8px;
}

.bracket-game {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 94px;
  padding: 0.5rem 0.65rem;
  background: linear-gradient(180deg, #fff 0%, #fff4f5 100%);
  border: 1px solid #dfb1b7;
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 6px 16px rgba(88, 8, 18, 0.08);
}

.region-tag {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8f3a44;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.bracket-game .team {
  padding: 0.25rem 0.35rem;
  cursor: default;
  border-radius: 5px;
  transition: background-color 140ms ease, color 140ms ease;
}

.bracket-game .team.winner {
  font-weight: 700;
  color: #8a0d17;
  background: rgba(193, 18, 31, 0.15);
  border: 1px solid rgba(193, 18, 31, 0.28);
}

.bracket-game .team.my-winner {
  font-weight: 700;
  color: #0a5c2b;
  background: rgba(17, 176, 94, 0.18);
  border: 1px solid rgba(17, 176, 94, 0.38);
}

.bracket-game .team.my-team {
  font-weight: 600;
  color: #0a5c2b;
  background: rgba(17, 176, 94, 0.08);
  border-left: 3px solid #16a34a;
}

.bracket-game .team.empty {
  color: var(--muted);
}

.bracket-game .team.leading {
  font-weight: 600;
  color: #0d6e35;
  background: rgba(17, 176, 94, 0.12);
}

/* Owned team leading in a live game — green hatched marching stripes */
.bracket-game .team.my-leading {
  font-weight: 700;
  color: #04220f;
  background: repeating-linear-gradient(
    -45deg,
    #22c55e,
    #22c55e 5px,
    #bbf7d0 5px,
    #bbf7d0 10px
  );
  border: 1px solid #16a34a;
  animation: stripe-march 0.7s linear infinite, glow-green 1.4s ease-in-out infinite;
}

/* Owned team trailing in a live game — red hatched marching stripes */
.bracket-game .team.my-trailing {
  font-weight: 700;
  color: #450a0a;
  background: repeating-linear-gradient(
    -45deg,
    #ef4444,
    #ef4444 5px,
    #fecaca 5px,
    #fecaca 10px
  );
  border: 1px solid #dc2626;
  animation: stripe-march 0.7s linear infinite, glow-red 1.4s ease-in-out infinite;
}

@keyframes stripe-march {
  to { background-position: 14.14px 14.14px; }
}

@keyframes glow-green {
  0%, 100% {
    box-shadow: 0 0 4px 0 rgba(34, 197, 94, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(34, 197, 94, 0.55);
    filter: brightness(1.08);
  }
}

@keyframes glow-red {
  0%, 100% {
    box-shadow: 0 0 4px 0 rgba(239, 68, 68, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(239, 68, 68, 0.55);
    filter: brightness(1.08);
  }
}

/* Live game card pulsing border */
.bracket-game.game-live {
  border-color: #11b05e;
  box-shadow: 0 0 0 1px #11b05e, 0 6px 16px rgba(17, 176, 94, 0.15);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #11b05e, 0 6px 16px rgba(17, 176, 94, 0.15); }
  50% { box-shadow: 0 0 0 2px #11b05e, 0 6px 20px rgba(17, 176, 94, 0.3); }
}

.game-status {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  display: inline-block;
}

.game-status.live {
  background: #11b05e;
  color: #fff;
}

.game-status.final {
  background: rgba(0, 0, 0, 0.08);
  color: var(--muted);
}

.game-status.pre-time {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-weight: 600;
  font-size: 0.58rem;
}

.bracket-net {
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0.08rem 0.3rem;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.bracket-net-cbs { background: #003087; color: #fff; }
.bracket-net-tbs { background: #00b4d8; color: #fff; }
.bracket-net-tnt { background: #e63946; color: #fff; }
.bracket-net-trutv { background: #6a4c93; color: #fff; }

.bracket-game.game-tbd {
  background: linear-gradient(180deg, #f8f8f8 0%, #f1f1f1 100%);
  border-color: #ddd;
  box-shadow: none;
  opacity: 0.55;
}
.bracket-game.game-tbd .team {
  color: #bbb;
}

.bracket-game .team {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.team-seed-sm {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.team-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-score {
  font-weight: 700;
  font-size: 0.84rem;
  margin-left: auto;
  min-width: 22px;
  text-align: right;
  flex-shrink: 0;
  padding-left: 0.25rem;
}

.payout-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: #11b05e;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 0.2rem;
}

/* Auto-refresh toggle */
#togglePollBtn.active {
  background: #11b05e;
  color: #fff;
  border-color: #11b05e;
}

.bracket-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bracket-connector {
  fill: none;
  stroke: rgba(193, 18, 31, 0.5);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bracket-game {
  z-index: 1;
}

/* --- Live Scores page --- */
.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.live-header h2 {
  margin: 0;
}

.ls-banner {
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.ls-banner-live {
  background: rgba(17, 176, 94, 0.12);
  color: #0d6e35;
  border: 1px solid rgba(17, 176, 94, 0.3);
}

.ls-banner-done {
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

.ls-banner-upcoming {
  background: rgba(210, 153, 34, 0.1);
  color: #8a6a10;
  border: 1px solid rgba(210, 153, 34, 0.25);
}

.ls-section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ls-section-title:first-of-type {
  margin-top: 0;
}

.ls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.ls-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  transition: box-shadow 150ms ease;
}

.ls-card:hover {
  box-shadow: 0 4px 14px rgba(70, 7, 14, 0.1);
}

.ls-card-live {
  border-color: #11b05e;
  box-shadow: 0 0 0 1px #11b05e, 0 4px 14px rgba(17, 176, 94, 0.12);
  animation: live-pulse 2s ease-in-out infinite;
}

.ls-card-final {
  opacity: 0.85;
}

.ls-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ls-round-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ls-status {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.ls-status.live {
  background: #11b05e;
  color: #fff;
}

.ls-status.final {
  background: rgba(0, 0, 0, 0.07);
  color: var(--muted);
}

.ls-status.upcoming {
  background: rgba(210, 153, 34, 0.12);
  color: #8a6a10;
}

.ls-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ls-network {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.ls-net-cbs { background: #003087; color: #fff; }
.ls-net-tbs { background: #00b4d8; color: #fff; }
.ls-net-tnt { background: #e63946; color: #fff; }
.ls-net-trutv { background: #6a4c93; color: #fff; }

.ls-date-header {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  margin: 1.2rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--border);
}

.ls-matchup {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ls-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem;
  border-radius: 5px;
  font-size: 0.88rem;
}

.ls-team.ls-winner {
  font-weight: 700;
  background: rgba(193, 18, 31, 0.1);
  color: #8a0d17;
}

.ls-team.ls-leading {
  font-weight: 600;
  background: rgba(17, 176, 94, 0.1);
  color: #0d6e35;
}

.ls-card-mine {
  border-left: 3px solid #16a34a;
}
.ls-card-mine:not(.ls-card-live):not(.ls-card-final) {
  background: rgba(17, 176, 94, 0.04);
}

.ls-team.ls-my-team {
  font-weight: 600;
  color: #0a5c2b;
  background: rgba(17, 176, 94, 0.08);
}
.ls-team.ls-my-leading {
  font-weight: 700;
  color: #04220f;
  background: rgba(17, 176, 94, 0.18);
  border: 1px solid rgba(17, 176, 94, 0.35);
}
.ls-team.ls-my-winner {
  font-weight: 700;
  color: #0a5c2b;
  background: rgba(17, 176, 94, 0.18);
  border: 1px solid rgba(17, 176, 94, 0.38);
}

.ls-own-badge {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: #16a34a;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
}

.ls-seed {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.ls-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-score {
  font-weight: 700;
  font-size: 1rem;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

.ls-score-empty {
  color: var(--muted);
  font-weight: 400;
}

/* =============================================
   MOBILE RESPONSIVE — phones & small tablets
   ============================================= */

/* Prevent iOS auto-zoom on input focus (requires >= 16px) */
input, select, textarea {
  font-size: max(16px, 0.95rem);
}

/* Horizontal-scrollable tabs on any width */
.tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
}

/* ---- Tablet breakpoint ---- */
@media (max-width: 900px) {
  .bracket-rounds {
    grid-template-columns: repeat(6, minmax(170px, 210px));
    gap: 12px;
    min-width: 1100px;
  }
}

/* ---- Phone breakpoint ---- */
@media (max-width: 640px) {
  #app {
    width: 100%;
    padding: 0.75rem;
  }

  /* --- Header --- */
  header {
    margin-bottom: 1rem;
  }

  header h1 {
    font-size: 1.15rem;
    line-height: 1.3;
  }

  .header-top {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .user-badge {
    font-size: 0.75rem;
    gap: 0.35rem;
  }

  .user-badge #userRoleLabel {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }

  /* --- Nav tabs --- */
  .tabs {
    gap: 0.2rem;
    margin: 0.5rem 0 0.2rem;
  }

  .tab {
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- Sub-tabs --- */
  .sub-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-tabs::-webkit-scrollbar { display: none; }

  .sub-tab {
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- Cards --- */
  .card {
    padding: 0.85rem 0.9rem;
    border-radius: 6px;
  }

  .card h2 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
  }

  .card h3 {
    font-size: 0.9rem;
  }

  /* --- Buttons: 44px min touch target --- */
  .btn {
    min-height: 44px;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  /* --- Form inputs --- */
  .form-row input,
  .form-row select {
    max-width: 100%;
    padding: 0.6rem 0.75rem;
    min-height: 44px;
  }

  .form-row label {
    font-size: 0.82rem;
  }

  /* --- Admin panel --- */
  .admin-panel {
    margin-bottom: 0.75rem;
  }

  .summary-actions {
    gap: 0.4rem;
  }

  .summary-actions .btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* --- Team picker --- */
  .team-picker {
    grid-template-columns: 1fr;
  }

  .picker-panel {
    min-height: 260px;
    max-height: 400px;
  }

  .picker-team {
    padding: 0.5rem 0.75rem;
    min-height: 44px;
  }

  .owned-team-row {
    padding: 0.45rem 0.75rem;
    min-height: 44px;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .owned-team-row input[name="share"] {
    width: 5rem;
    min-height: 38px;
  }

  .owned-team-row .btn-remove {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  /* --- Tracker table --- */
  .tracker-scroll {
    margin: 0 -0.9rem;
    padding: 0 0.9rem;
    -webkit-overflow-scrolling: touch;
  }

  .tracker-table {
    font-size: 0.78rem;
    min-width: 800px;
  }

  .tracker-table th,
  .tracker-table td {
    padding: 0.35rem 0.35rem;
  }

  /* --- Bracket --- */
  .bracket-container {
    margin: 0 -0.9rem;
    padding: 0 0.9rem 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .bracket-rounds {
    grid-template-columns: repeat(6, minmax(155px, 200px));
    gap: 10px;
    min-width: 1000px;
  }

  .bracket-game {
    padding: 0.4rem 0.5rem;
    font-size: 0.78rem;
    min-height: 82px;
  }

  .bracket-round h4 {
    font-size: 0.72rem;
  }

  /* --- Live Scores --- */
  .live-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .ls-banner {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  .ls-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .ls-card {
    padding: 0.6rem 0.75rem;
  }

  .ls-team {
    padding: 0.4rem 0.35rem;
    font-size: 0.88rem;
    min-height: 40px;
  }

  .ls-score {
    font-size: 1.05rem;
    min-width: 32px;
  }

  /* --- Login --- */
  .login-card {
    margin: 0 1rem;
    padding: 2rem 1.5rem 1.5rem;
    max-width: calc(100vw - 2rem);
  }

  .login-title {
    font-size: 1.3rem;
  }

  .login-card .form-row input {
    min-height: 48px;
    max-width: 100%;
  }

  .login-btn {
    min-height: 48px;
    font-size: 1rem;
  }

  /* --- Tooltip: tap-friendly --- */
  #calc-tooltip {
    max-width: 85vw;
    font-size: 0.78rem;
    white-space: normal;
  }

  /* --- Totals / payouts --- */
  #totals .total-row {
    font-size: 0.9rem;
  }

  #totals .net {
    font-size: 1.05rem;
  }
}

/* Scoring Cheat Sheet */
.cheatsheet-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
}
.cheatsheet-table th,
.cheatsheet-table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border, #ddd);
}
.cheatsheet-table thead th {
  font-weight: 700;
  color: var(--muted, #666);
}
.cheatsheet-note {
  background: #f5f5f5;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin: 0.5rem 0 1rem;
  border-left: 3px solid var(--accent, #c1121f);
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}