/* ═══════════════════════════════════════════════
   ScoreCaster v4 — Dashboard
   ═══════════════════════════════════════════════ */

/* ── Welcome Card ──────────────────────────────── */
.welcome-card {
  background: var(--slate-grad);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.welcome-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(34, 197, 94, 0.16) 100%);
}
.welcome-card::after {
  content: '';
  position: absolute; top: -50%; right: -20%;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, rgba(255,255,255,0) 70%);
}
.welcome-greeting { font-size: 1.55rem; font-weight: 800; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
.welcome-greeting span { color: var(--brand-green); }
.welcome-sub { font-size: 0.9rem; opacity: 0.75; margin-bottom: 1.4rem; font-weight: 450; }
.welcome-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; position: relative; z-index: 1; }
.welcome-stat {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-md);
  padding: 0.9rem 0.85rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  transition: all var(--transition);
}
.welcome-stat:hover { background: rgba(255,255,255,0.13); border-color: rgba(34, 197, 94, 0.5); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.welcome-stat-value { font-size: 1.5rem; font-weight: 800; font-family: var(--font-heading); line-height: 1.1; }
.welcome-stat-label { font-size: 0.75rem; opacity: 0.7; margin-top: 0.3rem; font-weight: 550; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Quick Actions ─────────────────────────────── */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem; }
.quick-action {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.9rem 1rem;
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.quick-action::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--primary-grad-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition) var(--easing-smooth);
  z-index: -1;
}
.quick-action:hover {
  box-shadow: var(--shadow-md); border-color: var(--primary);
  transform: translateY(-3px);
}
.quick-action:hover::before { transform: scaleX(1); }
.quick-action:active { transform: translateY(-1px); }
.quick-action-icon {
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.quick-action:hover .quick-action-icon { transform: scale(1.1) rotate(3deg); }
.quick-action-icon.green { background: var(--primary-light); color: var(--primary-darker); }
.quick-action-icon.blue { background: var(--info-light); color: var(--secondary-dark); }
.quick-action-icon.orange { background: var(--accent-light); color: var(--accent-dark); }
.quick-action-icon.purple { background: #ede9fe; color: #6d28d9; }
.quick-action-text { font-size: 0.9rem; font-weight: 650; }
.quick-action-sub { font-size: 0.775rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ── Match Grid ────────────────────────────────── */
.matches-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap;
}

.matches-toolbar .btn-primary {
  color: #000; font-weight: 900;
}
.sessions-inline-head {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.9rem; flex-shrink: 0;
}
.sessions-inline-head .sessions-inline-title { font-size: 1rem; font-weight: 650; margin: 0; white-space: nowrap; }
.sessions-inline-head .btn-icon { width: 2rem; height: 2rem; }
.sessions-strip { margin-bottom: 1.25rem; }
@media (max-width: 640px) {
  .matches-toolbar { align-items: flex-start; flex-direction: column; }
}
.match-tabs {
  display: inline-flex; gap: 0.25rem;
  background: var(--bg-alt); padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.match-tab {
  padding: 0.55rem 1.1rem; font-size: 1rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: none; background: none; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-secondary);
  font-family: var(--font); transition: all var(--transition);
  display: flex; align-items: center; gap: 0.4rem;
  position: relative; overflow: hidden;
}
.match-tab::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--primary-grad-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition) var(--easing-smooth);
  z-index: -1;
}
.match-tab:hover { color: var(--text); }
.match-tab:hover::before { transform: scaleX(1); }
.match-tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 650; }
.match-tab-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); opacity: 0;
}
.match-tab.active .match-tab-pulse { opacity: 1; animation: livePulse 2s ease-in-out infinite; }
.match-tab-count {
  font-size: 0.78rem; background: var(--border); color: var(--text-secondary);
  padding: 0.08rem 0.45rem; border-radius: 9999px; font-weight: 700;
}
.match-tab.active .match-tab-count { background: var(--primary-light); color: var(--primary-darker); }

.match-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 1100px; }
/* Only the active tab's grid is shown. The `hidden` attribute alone loses to
   .match-grid's display:grid, so it needs an explicit rule. */
.match-grid[hidden] { display: none; }

.match-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  cursor: pointer; will-change: transform;
  position: relative; display: flex; flex-direction: column;
}
.match-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--primary-grad-soft);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition-slow) var(--easing-smooth);
  z-index: -1;
}
.match-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-xl), 0 12px 32px -8px rgba(16, 185, 129, 0.25);
  border-color: var(--primary);
}
.match-card:hover::before { transform: scaleY(1); }
.match-card:active { transform: translateY(-2px); }

/* The 3px status strip is kept as a thin accent, but the card header below
   carries the real colour weight. */
.match-card-accent {
  height: 3px; flex-shrink: 0;
  background: var(--border);
  transition: background var(--transition);
}
.match-card.status-live .match-card-accent { background: var(--live-grad); }
.match-card.status-upcoming .match-card-accent { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.match-card.status-ended .match-card-accent { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.match-card:hover .match-card-accent { background: var(--primary-grad); }

/* Teal title band: match name left, start time right. */
.match-card-header {
  padding: 0.9rem 1.35rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  line-height: 1.6;
  background: var(--primary-band);
  color: #fff;
}
.match-card-series {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  line-height: 1.6;
  color: #ffffff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.match-card-time {
  font-size: 0.9rem; font-weight: 600; color: #ffffff;
  flex-shrink: 0; white-space: nowrap;
}

/* Two teams side by side with a VS divider. The body carries a tinted
   panel so the score strip reads as a distinct band between the teal header
   and the footer, instead of white-on-white card fill. */
.match-card-body {
  padding: 1.35rem 1.4rem;
  line-height: 1.6;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  flex: 1;
  /* Cool blue wash instead of a neutral fill. Alpha tints are used so the
     same colour reads as a pale blue panel in the light theme and a deep
     steel-blue one in dark, without hard-coding two palettes. */
  background: linear-gradient(140deg, rgba(59, 130, 246, 0.32) 0%, rgba(59, 130, 246, 0.08) 100%);
}
.match-card-team {
  display: flex; align-items: center; gap: 0.85rem; min-width: 0;
}
.match-card-team.right { flex-direction: row-reverse; text-align: right; }

.match-card-badge {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 750; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow: hidden;
  /* Teal ring reads as a crest frame, matching the badge treatment on
     teal-branded scorecard cards. */
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
}
/* Logo variant — no background color, image fills the circle */
.match-card-badge--logo {
  background: transparent !important;
  padding: 0;
}
.match-card-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
/* Grow into whatever the crest and score leave behind, so a long team name
   only ellipsises at the real edge of the column instead of mid-row. */
.match-card-team-info { min-width: 0; flex: 1 1 auto; }
.match-card-team-name {
  font-size: 1.35rem; font-weight: 800; color: var(--primary-darker);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.25; letter-spacing: 0.01em;
}
.match-card-team-full { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; }
.match-card-scoreblock { min-width: 0; }
.match-card-score {
  font-size: 1.12rem; font-weight: 650; color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.6; letter-spacing: 0.02em;
}
.match-card-overs { font-size: 0.83rem; color: var(--primary); opacity: 0.85; margin-top: 0.35rem;
  line-height: 1.6; letter-spacing: 0.03em; }

.match-card-vs {
  font-size: 1.35rem; font-weight: 800; color: var(--text-muted);
  letter-spacing: 0.14em; text-transform: uppercase;
  flex-shrink: 0; padding: 0 0.6rem; line-height: 1.6;
}

/* Score-strip treatment: names, scores and overs read as white broadcast
   text on the card body at maximum weight. Scoped to the dark theme because
   the light theme's card body is white, where white text would vanish. */
[data-theme="dark"] .match-card-body .match-card-team-name,
[data-theme="dark"] .match-card-body .match-card-score,
[data-theme="dark"] .match-card-body .match-card-overs,
[data-theme="dark"] .match-card-body .match-card-vs {
  color: #ffffff;
  font-weight: 900;
}
[data-theme="dark"] .match-card-body .match-card-overs { opacity: 1; }

/* Status / venue footer, with the countdown parked on the right where the
   card used to leave a wide strip of empty space. */
.match-card-meta {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  background: rgba(59, 130, 246, 0.24);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.match-card-meta-rows {
  display: flex; flex-direction: column; gap: 0.35rem;
  min-width: 0;
}
.match-card-meta-row { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.88rem; line-height: 1.7; }
.match-card-meta-label { font-weight: 700; color: var(--text); min-width: 3.4rem; letter-spacing: 0.03em; }
.match-card-meta-value { color: var(--text-muted); line-height: 1.7; overflow-wrap: anywhere; }
/* Status reads as a tag, so it is set in caps. The text itself stays
   lowercase in the markup/JS, which keeps the attribute matching simple. */
.match-card-meta-value.live,
.match-card-meta-value.upcoming,
.match-card-meta-value.ended {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.match-card-meta-value.live { 
  color: var(--live); 
  font-weight: 600; 
  animation: liveBlink 1.5s ease-in-out infinite; 
}
.match-card-meta-value.upcoming { color: var(--secondary-dark); font-weight: 600; }
.match-card-meta-value.ended { color: var(--text-muted); font-weight: 600; }


/* Countdown to the first ball — the loudest thing in the footer, sized to be
   legible at overlay-table distance. Tabular digits keep the number from
   jittering as the seconds tick. */
.match-countdown-block {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.15rem;
  text-align: right; flex-shrink: 0;
}
.match-countdown-label {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.match-countdown {
  font-family: var(--font-heading);
  font-size: 1.9rem; font-weight: 800; line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
[data-theme="dark"] .match-countdown { color: var(--brand-green); }
/* Under way: no countdown left, so the label drops away and the value
   becomes a compact status word instead of a giant number. */
.match-countdown-block.is-started .match-countdown-label { display: none; }
.match-countdown-block.is-started .match-countdown {
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--success);
}

@media (max-width: 640px) {
  /* Side by side, the timer eats half the footer and the venue wraps to
     five lines. Stack it: rows keep the full width, timer sits under them
     and stays right-aligned. */
  .match-card-meta { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .match-countdown-block { align-items: flex-end; }
  .match-countdown { font-size: 1.6rem; }
  .match-countdown-block.is-started .match-countdown { font-size: 0.85rem; }
}

.match-card-result { font-size: 0.85rem; color: var(--text-secondary); font-weight: 550; padding: 0.7rem 1.15rem; background: var(--bg-alt); border-top: 1px solid var(--border-light); text-align: center; }

.match-card-actions { padding: 0.75rem 1.15rem; border-top: 1px solid var(--border-light); margin-top: auto; }

/* .live-pulse is no longer inside a match card, but session cards still
   render it, so it is defined unscoped. */
.live-pulse {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--live);
  animation: livePulse 2s ease-in-out infinite;
  margin-right: 0.375rem;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); }
}
@keyframes liveBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.badge-live, .badge-upcoming, .badge-ended {
  font-size: 0.65rem; padding: 0.1rem 0.45rem;
  border-radius: 9999px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.badge-live { background: rgba(236,75,75,0.12); color: #b80000; }
.badge-upcoming { background: rgba(37,99,235,0.1); color: var(--secondary); }
.badge-ended { background: rgba(255,122,26,0.12); color: var(--accent-dark); }

/* ── Session Cards ─────────────────────────────── */
.sessions-scroll {
  display: flex; gap: 0.875rem; overflow-x: auto;
  padding: 0.25rem 0.25rem 0.75rem; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.sessions-scroll::-webkit-scrollbar { height: 5px; }
.sessions-scroll::-webkit-scrollbar-track { background: var(--border-light); border-radius: 999px; }
.sessions-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.session-card {
  flex: 0 0 288px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.05rem 1.1rem;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.session-card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); transform: translateY(-3px); }

.session-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.session-card-head-text { min-width: 0; }
.session-card-title {
  font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-card-match {
  font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* One calm line: ● Active · Oct 9  (instead of a 2×2 grid of stats) */
.session-card-meta {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; color: var(--text-secondary);
}
.session-card-meta .status-dot { margin-right: 0.05rem; }
.session-card-meta .session-dot-off { background: var(--text-tertiary); }
.session-card-meta-sep { color: var(--border); }

.session-card-overlay { display: flex; align-items: center; gap: 0.5rem; }
.session-card-overlay-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); flex-shrink: 0; }
.session-card-select {
  flex: 1; min-width: 0;
  padding: 0.35rem 0.5rem; font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--text);
}

.session-card-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: auto; }
.session-card-copy { flex: 1; justify-content: center; }

/* Compact square icon buttons (pin / open / settings / delete) */
.session-icon-btn {
  width: 2rem; height: 2rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.session-icon-btn:hover { background: var(--bg-alt); color: var(--text); border-color: var(--text-tertiary); }
.session-icon-btn.is-pinned { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.session-icon-btn-danger:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }


/* ── Pinned Broadcast Card ─────────────────────── */
.pinned-card {
  background: var(--slate-grad);
  border-radius: var(--radius-md); padding: 1.25rem;
  color: #fff; position: relative; overflow: hidden;
}
.pinned-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 200px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.14));
}
.pinned-card-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brand-green); margin-bottom: 0.65rem;
}
.pinned-card-teams { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.pinned-card-team { font-size: 1.15rem; font-weight: 700; }
.pinned-card-vs { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.pinned-card-score { font-size: 1.6rem; font-weight: 800; font-family: var(--font-heading); margin-bottom: 0.25rem; }
.pinned-card-meta { font-size: 0.8125rem; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.pinned-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pinned-card-url {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem; color: rgba(255,255,255,0.4);
  margin-top: 0.75rem; padding: 0.5rem; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Create Session Modal ──────────────────────── */
.modal-heading { display: flex; align-items: center; gap: 0.75rem; }
.modal-heading-icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-light), var(--info-light));
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }

/* The paste-link modal's header is the only thing naming the action, so it
   gets a tinted band and a filled icon tile. Scoped to #create-modal so the
   admin dialogs that share .modal-header keep the neutral shell. */
#create-modal .modal-header {
  background: linear-gradient(180deg, var(--primary-light), transparent);
  border-bottom-color: var(--border);
}
#create-modal .modal-heading-icon {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--primary-light);
}
#create-modal .modal-header h2 { font-size: 1.2rem; letter-spacing: -0.01em; }
#create-modal .modal-subtitle { font-size: 0.8rem; margin-top: 0.15rem; }

.create-session-match {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--card-hover), var(--card));
}
.create-session-match.is-empty { color: var(--text-muted); }
.create-session-match-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; text-align: center; padding: 0.5rem 0; width: 100%;
}
.create-session-teams { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; }
.cs-team { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.cs-team-badge {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.8125rem;
  text-transform: uppercase; flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25), var(--shadow-sm);
}
.cs-team-name {
  font-size: 0.8125rem; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cs-vs {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 0.25rem 0.6rem;
  background: var(--bg-alt); border-radius: 9999px; flex-shrink: 0;
}
.create-session-match-meta {
  font-size: 0.75rem; color: var(--text-muted); margin-top: 0.75rem;
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.create-session-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.25rem 0 1rem; color: var(--text-muted);
  font-size: 0.75rem; white-space: nowrap;
}
.create-session-divider::before,
.create-session-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.375rem; }
.create-session-themes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;
  margin-bottom: 1rem;
}
.create-session-theme {
  padding: 0.5rem; border: 2px solid var(--border);
  border-radius: var(--radius-md); cursor: pointer;
  text-align: center; font-size: 0.75rem;
  transition: all var(--transition);
}
.create-session-theme:hover { border-color: var(--primary); }
.create-session-theme.selected { border-color: var(--primary); background: var(--primary-light); }
.create-session-theme-swatch {
  width: 100%; height: 1.5rem; border-radius: var(--radius-sm);
  margin-bottom: 0.25rem;
}

/* ── Success State ─────────────────────────────── */
.session-success { text-align: center; padding: 1rem 0; }
.session-success-icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  animation: successPop 0.4s ease-out;
}
@keyframes successPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.session-success-url {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.8125rem; background: var(--bg-alt);
  padding: 0.75rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); margin: 1rem 0;
  word-break: break-all; text-align: left;
}
.session-success-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ── Analytics Cards ───────────────────────────── */
.analytics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.analytics-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
  text-align: center; transition: all var(--transition);
  position: relative; overflow: hidden;
}
.analytics-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--primary-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition) var(--easing-smooth);
}
.analytics-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.analytics-card:hover::before { transform: scaleX(1); }
.analytics-value { font-size: 1.75rem; font-weight: 800; font-family: var(--font-heading); color: var(--primary); transition: transform var(--transition); }
.analytics-card:hover .analytics-value { transform: scale(1.05); }
.analytics-label { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; }
.analytics-trend {
  font-size: 0.75rem; margin-top: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.analytics-trend.up { color: var(--success); }
.analytics-trend.down { color: var(--danger); }

/* ── Post-Onboarding Card ──────────────────────── */
.post-onboarding {
  background: var(--slate-grad);
  border-radius: var(--radius-xl); padding: 2rem;
  color: #fff;
}
.post-onboarding h3 { color: #fff; margin-bottom: 0.5rem; }
.post-onboarding p { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-bottom: 1.25rem; }
.post-onboarding-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.post-onboarding-step {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; color: #fff; text-decoration: none;
  transition: all var(--transition);
}
.post-onboarding-step:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }

/* ── Mobile friendly (vertical list) ─────────────────── */
@media (max-width: 768px) {
  .sessions-scroll {
    display: block;
    overflow-x: visible;
    gap: 0.75rem;
    flex-direction: column;
  }
  .sessions-scroll::-webkit-scrollbar { display: none; }
  .session-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
  .welcome-stats { grid-template-columns: repeat(2, 1fr); }
  .match-grid { grid-template-columns: 1fr; }
  .session-card { flex: 0 0 280px; }
  .analytics-grid { grid-template-columns: 1fr; }
  .post-onboarding-steps { grid-template-columns: 1fr; }
  .create-session-themes { grid-template-columns: repeat(2, 1fr); }
}

/* ── Payment partners strip ─────────────────────
   Logos sit on white chips: the marks are full-colour artwork meant for a
   light background, and on the dark theme they would otherwise sink into
   the page. */
.pay-partners {
  margin: 2.75rem 0 1.25rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.pay-partners-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.pay-partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pay-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: 52px;
  padding: 0.5rem 0.95rem;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.pay-partner:hover {
  transform: translateY(-2px);
  border-color: var(--brand-green);
  box-shadow: var(--shadow-md);
}
.pay-partner img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
}
/* Second row: international cards and wallets. Its own line so the local
   wallets a visitor from IN/PK/BD/NP looks for stay at the top. */
.pay-partners-cards {
  margin-top: 0.65rem;
  gap: 0.5rem;
}
.pay-partners-cards .pay-partner {
  padding: 0.5rem 0.6rem;
}
.pay-partners-cards .pay-partner img {
  height: 24px;
  max-width: 88px;
}
.pay-partners-note {
  max-width: 46rem;
  margin: 1.1rem auto 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .pay-partner { height: 44px; padding: 0.4rem 0.7rem; }
  .pay-partner img { height: 20px; max-width: 78px; }
  .pay-partners-cards .pay-partner { padding: 0.4rem 0.6rem; }
  .pay-partners-cards .pay-partner img { height: 18px; max-width: 66px; }
}

/* ── Floating WhatsApp support ────────────────────────
   Bottom-right of the home page only. Sits below the toast layer (z-index
   9999) so a toast is never hidden behind it, and the toast column is lifted
   clear of it so a support tap and a notification cannot overlap. */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(140deg, #2ee06e 0%, #25d366 48%, #17a94d 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(10, 122, 47, 0.34), 0 2px 6px rgba(15, 23, 42, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
  animation: whatsappRing 2.6s ease-out 1.2s infinite;
}
.whatsapp-fab svg { width: 1.9rem; height: 1.9rem; display: block; }
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 30px rgba(10, 122, 47, 0.4), 0 3px 8px rgba(15, 23, 42, 0.2);
  animation: none;
  outline: none;
}
.whatsapp-fab:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #25d366; }

/* Label revealed on hover/focus — keeps the corner clean when idle. */
.whatsapp-fab-tip {
  position: absolute;
  right: calc(100% + 0.7rem);
  top: 50%;
  transform: translateY(-50%) translateX(0.35rem);
  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.whatsapp-fab-tip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #0f172a;
}
.whatsapp-fab:hover .whatsapp-fab-tip,
.whatsapp-fab:focus-visible .whatsapp-fab-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@keyframes whatsappRing {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5), 0 10px 24px rgba(10, 122, 47, 0.34); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 10px 24px rgba(10, 122, 47, 0.34); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 24px rgba(10, 122, 47, 0.34); }
}

/* Keep the toast column clear of the button on the home page. */
body:has(.whatsapp-fab) .toast-container { bottom: 5.75rem; }

@media (max-width: 640px) {
  .whatsapp-fab { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; }
  .whatsapp-fab svg { width: 1.7rem; height: 1.7rem; }
  .whatsapp-fab-tip { display: none; }
  body:has(.whatsapp-fab) .toast-container { bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
  .whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: none; }
}

/* ── Live matches backdrop ──────────────────────────────────────
   The cricket-stadium illustration behind the match grid. Two stacked
   layers per theme: a wash that keeps the surface readable, then the
   artwork itself, centred and cropped to fill the viewport.

   The source art is 1672×941; shipped as WebP it lands at 56 KB, and
   phones get a 900 px, 25 KB copy so the first paint stays cheap on
   metered mobile data. `fixed` anchors the stadium to the viewport
   while the grid scrolls; phones opt out of it, where it stutters. */
.page-live-matches {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(240, 247, 249, 0.87) 55%, rgba(232, 241, 244, 0.92) 100%),
    url('../img/bg-live-matches.webp');
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* Dark mode: the same stadium under a deep navy wash, so white score
   text keeps its contrast and the card borders still read. */
[data-theme="dark"] .page-live-matches {
  background-image:
    linear-gradient(180deg, rgba(6, 13, 26, 0.74) 0%, rgba(5, 11, 22, 0.82) 55%, rgba(4, 9, 18, 0.88) 100%),
    url('../img/bg-live-matches.webp');
}

@media (max-width: 768px) {
  .page-live-matches {
    /* Smaller file, and the artwork scrolls with the page: a fixed
       background repaints on every scroll frame on mobile browsers. */
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(240, 247, 249, 0.87) 55%, rgba(232, 241, 244, 0.92) 100%),
      url('../img/bg-live-matches-sm.webp');
    background-attachment: scroll, scroll;
  }
  [data-theme="dark"] .page-live-matches {
    background-image:
      linear-gradient(180deg, rgba(6, 13, 26, 0.74) 0%, rgba(5, 11, 22, 0.82) 55%, rgba(4, 9, 18, 0.88) 100%),
      url('../img/bg-live-matches-sm.webp');
  }
}

/* ── Match card on phones ─────────────────────────
   Two teams side by side need ~330px of content width. On a 375px phone the
   card only has ~280px, so the old grid squeezed "Did Not Bat" onto three
   lines, clipped team names and pushed "vs" into the scores. Stack the teams
   instead: each becomes one row (crest, name, score) and the card reads top
   to bottom. */
@media (max-width: 640px) {
  /* Full-width tabs: at 1.1rem side padding the pair was wider than a 320px
     screen and pushed a horizontal scrollbar onto the whole page. */
  .match-tabs { display: flex; width: 100%; }
  .match-tab {
    flex: 1; justify-content: center;
    padding: 0.5rem 0.4rem; font-size: 0.88rem; letter-spacing: 0.04em;
  }

  .match-card-header { padding: 0.7rem 1rem; gap: 0.6rem; }
  .match-card-series { font-size: 0.84rem; }
  .match-card-time { font-size: 0.82rem; }

  .match-card-body {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
  }
  .match-card-team,
  .match-card-team.right {
    flex-direction: row; text-align: left; gap: 0.7rem;
  }
  .match-card-team-info { flex: 1 1 auto; }
  .match-card-team-name { font-size: 1rem; }
  .match-card-badge { width: 2.4rem; height: 2.4rem; font-size: 0.7rem; }
  /* Scores sit on the right edge of their row, so the two innings line up
     down the card instead of floating mid-air. */
  .match-card-scoreblock { margin-left: auto; text-align: right; flex-shrink: 0; }
  .match-card-score { font-size: 0.98rem; line-height: 1.5; }
  .match-card-overs { font-size: 0.75rem; margin-top: 0.1rem; }
  /* "vs" becomes a hairline divider: still a separator, no longer a word
     competing with the scores for width. */
  .match-card-vs {
    font-size: 0.62rem; font-weight: 700; padding: 0;
    display: flex; align-items: center; gap: 0.6rem;
    color: var(--text-muted); letter-spacing: 0.18em;
  }
  .match-card-vs::before,
  .match-card-vs::after {
    content: ''; flex: 1; height: 1px; background: var(--border-light);
  }

  .match-card-result { font-size: 0.8rem; padding: 0.6rem 1rem; }
  .match-card-actions { padding: 0.65rem 1rem; }
}

/* Tablets (641-1024px): still two teams side by side, but the card is far
   narrower than on a desktop and "Did Not Bat" squeezed the names into
   "Sudurpas…". Same proportions, smaller furniture. */
@media (min-width: 641px) and (max-width: 1024px) {
  .match-card-body { padding: 1.1rem 1.15rem; gap: 0.6rem; }
  .match-card-team { gap: 0.6rem; }
  .match-card-team-name { font-size: 1.1rem; }
  .match-card-badge { width: 2.7rem; height: 2.7rem; }
  .match-card-score { font-size: 1rem; }
  .match-card-vs { font-size: 1rem; padding: 0 0.25rem; }
}

/* Narrow phones (<=480px): even stacked, the score takes half the row and
   cuts names down to "Gard…". Put the score on a second line under the name
   so each team reads as: crest | name / score. */
@media (max-width: 480px) {
  .match-card-team,
  .match-card-team.right {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "badge name" "badge score";
    column-gap: 0.7rem; row-gap: 0.1rem;
    align-items: center;
    text-align: left;
  }
  .match-card-badge { grid-area: badge; }
  .match-card-team-info { grid-area: name; }
  .match-card-scoreblock { grid-area: score; margin-left: 0; text-align: left; }
  /* Both teams stay badge-left/name-left: mirrored rows zig-zag down the card
     and make the second innings harder to scan. */
}