/* ==========================================================================
   Signal Arena — Design Tokens
   Dark + Red + White. Semantic Match Temperature colors are NOT brand colors
   (they answer "how active is the match", brand red/white answer "what is
   Signal Arena"). Every color used more than once lives here as a variable —
   no hex values are repeated across the rest of this file.
   ========================================================================== */
:root {
  /* Surfaces */
  --bg-primary: #080a0d;
  --bg-card: #12161c;
  --bg-card-alt: #101318;
  --bg-elevated: #171b22;
  --border: #232830;
  --border-strong: #343b46;

  /* Brand */
  --brand-red: #ef3340;
  --brand-red-strong: #ff3b3b;
  --brand-red-tint: rgba(239, 51, 64, 0.12);
  --brand-red-tint-strong: rgba(239, 51, 64, 0.18);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #9aa3af;
  --text-muted: #6b7280;

  /* Match Temperature — semantic, functional colors only */
  --temp-very-hot: #ff3b3b;
  --temp-hot: #ef3340;
  --temp-active: #f0a345;
  --temp-calm: #7c8591;
  --temp-cold: #4fc3f7;
  --temp-very-hot-tint: rgba(255, 59, 59, 0.14);
  --temp-hot-tint: rgba(239, 51, 64, 0.12);
  --temp-active-tint: rgba(240, 163, 69, 0.12);
  --temp-calm-tint: rgba(124, 133, 145, 0.12);
  --temp-cold-tint: rgba(79, 195, 247, 0.12);

  /* Signal status */
  --status-active: #f0a345;
  --status-success: #34c77b;
  --status-failed: #b2454f;
  --status-reversed: #8e6fd6;

  /* V8 — real card colors (Notification Center event icons); distinct from
     --status-active/--temp-active, which already mean something else (an
     orange "in progress" state, not a yellow card). */
  --card-yellow: #f2c94c;
  --card-yellow-tint: rgba(242, 201, 76, 0.14);

  /* Pressure chart — one accent per side, legend makes the mapping explicit */
  --pressure-home: #ef3340;
  --pressure-away: #4a90e2;

  /* Typography */
  --font-sans: 'Segoe UI', system-ui, -apple-system, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-arabic: 'Segoe UI', Tahoma, 'Geeza Pro', Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --max-width: 1180px;

  /* Spacing scale — Homepage Redesign (Phase 1) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Homepage Redesign (Phase 1) — sidebar/nav surfaces + a couple of row-specific tokens */
  --bg-sidebar: #0d1015;
  --sidebar-width: 228px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html[lang='ar'] body {
  font-family: var(--font-arabic);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  overflow-x: hidden;
}

html[dir='rtl'] body {
  text-align: right;
}

/* Visually hidden but still announced by screen readers — e.g. an icon-only button that keeps its translated label for accessibility (see the Community composer's send button). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
select {
  font-family: inherit;
  color: inherit;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.is-hidden {
  display: none !important;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ==========================================================================
   Header / Brand
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  direction: ltr;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Now a <button> (was a <div>) so the logo always returns to Home — reset every button default so it looks and behaves exactly like the plain block it replaced. */
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.brand-icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--brand-red);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brand-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.owner-auth {
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.owner-login-form {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.owner-password-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  font-size: var(--fs-xs);
  padding: 4px 8px;
  width: 120px;
}

.owner-login-button,
.owner-logout-button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 4px 10px;
}

.owner-login-button:hover,
.owner-logout-button:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.owner-login-error {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: 4px;
  color: var(--brand-red);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.owner-signed-in {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-menu {
  position: relative;
  flex: none;
}

.language-menu-toggle,
.sort-select {
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.language-menu-toggle:hover,
.sort-select:hover {
  border-color: var(--border-strong);
}

.language-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-weight: var(--fw-semibold);
}

.language-menu-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--brand-red);
}

.language-menu-list {
  position: absolute;
  top: calc(100% + 7px);
  inset-inline-end: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: 164px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
}

.language-menu-list button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  text-align: start;
}

.language-menu-list button:hover,
.language-menu-list button.is-active {
  background: var(--brand-red-tint);
}

/* Header account trigger — opens the existing Community account flow. */
.login-trigger-button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 7px 16px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.login-trigger-button:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.login-dialog {
  padding: 24px 26px;
}

.login-dialog .owner-auth {
  display: block;
  font-size: var(--fs-base);
}

.login-dialog .owner-login-form {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.login-dialog .owner-password-input {
  width: 100%;
  padding: 9px 12px;
  font-size: var(--fs-base);
}

.login-dialog .owner-login-button {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.login-dialog .owner-login-button:hover {
  background: var(--brand-red-strong);
  border-color: var(--brand-red-strong);
  color: var(--text-primary);
}

.login-dialog .owner-login-error {
  position: static;
  margin-top: 0;
  white-space: normal;
}

.login-dialog .owner-signed-in {
  justify-content: space-between;
  width: 100%;
}

/* Community V5 — premium site-wide authentication modal. Scoped strictly to
   #community-auth-dialog (a unique id) rather than editing the shared
   .owner-dialog/.login-dialog/.owner-login-form/.owner-login-button classes
   directly, so the separate Owner admin login dialog (#login-dialog, same
   base classes) is completely unaffected. */
#community-auth-dialog {
  max-width: 380px;
  padding: 28px 28px 24px;
}

.auth-dialog-brand {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 4px;
}

#community-auth-dialog h3 {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: 18px;
}

#community-auth-dialog .match-center-tabs {
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
}

.auth-field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: -4px;
}

#community-auth-dialog input[type='email'],
#community-auth-dialog input[type='password'],
#community-auth-dialog input[type='text'] {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-base);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s ease;
}

#community-auth-dialog input[type='email']:focus,
#community-auth-dialog input[type='password']:focus,
#community-auth-dialog input[type='text']:focus {
  outline: none;
  border-color: var(--brand-red);
}

#community-auth-dialog .owner-login-button {
  margin-top: 4px;
  border-radius: var(--radius-md);
}

#community-auth-dialog .back-button {
  align-self: center;
}

.auth-switch-prompt {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 4px;
}

.auth-switch-link {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--brand-red);
  cursor: pointer;
  font-size: inherit;
  font-weight: var(--fw-semibold);
  padding: 0;
}

.auth-switch-link:hover {
  color: var(--brand-red-strong);
  text-decoration: underline;
}

/* Community V6 — premium pricing dialog. Same scoping convention as
   #community-auth-dialog above (unique id, existing .owner-dialog base
   reused unchanged) so no other dialog is affected. */
#premium-alerts-dialog {
  max-width: 400px;
  padding: 28px 28px 24px;
}

#premium-alerts-dialog h3 {
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: 8px;
}

.premium-alerts-description {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.premium-alerts-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.premium-alerts-feature-list li {
  font-size: var(--fs-sm);
  padding-inline-start: 20px;
  position: relative;
}

.premium-alerts-feature-list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand-red);
  font-weight: var(--fw-semibold);
}

#premium-alerts-trial-offer {
  text-align: center;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius-md);
}

#premium-alerts-trial-offer p {
  font-size: var(--fs-sm);
  margin-bottom: 8px;
}

#premium-alerts-trial-offer .owner-login-button {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--text-primary);
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
}

#premium-alerts-trial-offer .owner-login-button:hover {
  background: var(--brand-red-strong);
  border-color: var(--brand-red-strong);
}

.premium-alerts-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.premium-alerts-plan-button {
  appearance: none;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: 12px 10px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.premium-alerts-plan-button:hover {
  border-color: var(--brand-red);
  background: var(--brand-red-tint);
}

.premium-alerts-plan-button:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

#premium-alerts-payment-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 8px;
}

#premium-alerts-active-status {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--brand-red);
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}

.dialog-close-button {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 4px;
}

.dialog-close-button:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.site-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-alt);
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav-list {
  display: flex;
  gap: 4px;
  padding-block: 6px;
  width: max-content;
  min-width: 100%;
}

.nav-item {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 8px 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.nav-item.is-active {
  color: var(--text-primary);
  background: var(--brand-red-tint);
  box-shadow: inset 0 0 0 1px var(--brand-red-tint-strong);
}

.nav-item.is-active::after {
  content: '';
}

/* ==========================================================================
   Main content / views
   ========================================================================== */
.main-content {
  flex: 1;
  padding-block: 24px 48px;
}

.view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==========================================================================
   Live Matches Dashboard
   ========================================================================== */
.dashboard-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.dashboard-title {
  font-size: var(--fs-xl);
  color: var(--text-primary);
}

.dashboard-subtitle {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-control label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .match-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .match-grid {
    grid-template-columns: 1fr;
  }
}

.match-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  appearance: none;
  width: 100%;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-card);
}

.match-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.match-card.temp-very_hot {
  border-color: rgba(255, 59, 59, 0.45);
  background: linear-gradient(180deg, var(--temp-very-hot-tint), var(--bg-card) 65%);
}

.match-card.temp-hot {
  border-color: rgba(239, 51, 64, 0.4);
  background: linear-gradient(180deg, var(--temp-hot-tint), var(--bg-card) 65%);
}

.match-card.temp-active {
  border-color: rgba(240, 163, 69, 0.35);
  background: linear-gradient(180deg, var(--temp-active-tint), var(--bg-card) 65%);
}

.match-card.temp-calm {
  border-color: var(--border);
}

.match-card.temp-cold {
  border-color: rgba(79, 195, 247, 0.3);
  background: linear-gradient(180deg, var(--temp-cold-tint), var(--bg-card) 65%);
}

.match-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.match-card-competition {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.status-badge.is-live {
  color: var(--brand-red-strong);
  border-color: rgba(239, 51, 64, 0.4);
}

.status-badge.is-live .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-red-strong);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.18);
}

.match-card-teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-card-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.match-card-team-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-card-team-score {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.match-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.match-card-minute {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.signal-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-red-strong);
  font-weight: var(--fw-semibold);
}

.temperature-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
}

.temperature-chip.level-very_hot {
  color: var(--temp-very-hot);
  border-color: rgba(255, 59, 59, 0.4);
}

.temperature-chip.level-hot {
  color: var(--temp-hot);
  border-color: rgba(239, 51, 64, 0.35);
}

.temperature-chip.level-active {
  color: var(--temp-active);
  border-color: rgba(240, 163, 69, 0.35);
}

.temperature-chip.level-calm {
  color: var(--temp-calm);
}

.temperature-chip.level-cold {
  color: var(--temp-cold);
  border-color: rgba(79, 195, 247, 0.3);
}

.match-card-sparkline {
  width: 100%;
  height: 28px;
  display: block;
}

.empty-state {
  text-align: center;
  color: var(--text-secondary);
  padding: 48px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.error-state {
  text-align: center;
  color: var(--brand-red);
  padding: 48px 16px;
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius-lg);
}

.audit-log-row {
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.audit-log-row:first-of-type {
  border-top: none;
}

.audit-log-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.audit-log-action {
  font-weight: var(--fw-semibold);
}

.audit-log-meta {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.audit-log-details summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.audit-log-details pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-xs);
  background: var(--bg-card-alt);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-top: 6px;
}

/* ==========================================================================
   Placeholder sections (nav items with no backend yet)
   ========================================================================== */
.placeholder-panel {
  text-align: center;
  padding: 64px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}

.placeholder-panel h2 {
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* ==========================================================================
   Match Center
   ========================================================================== */
.match-center-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.back-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.back-button:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.back-button svg {
  width: 14px;
  height: 14px;
}

html[dir='rtl'] .back-button svg {
  transform: scaleX(-1);
}

.match-center-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.match-center-competition {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.match-center-teams {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.match-center-teams .score {
  color: var(--text-primary);
}

.match-center-teams .dash {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.match-center-team-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.match-center-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.match-center-minute {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.match-center-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab-button,
.owner-tab-button {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 10px 14px;
  white-space: nowrap;
  cursor: pointer;
}

.tab-button:hover,
.owner-tab-button:hover {
  color: var(--text-primary);
}

.tab-button.is-active,
.owner-tab-button.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-red);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Panels shared by Overview / Statistics ---- */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.panel-title {
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.panel-title .accent {
  color: var(--brand-red);
}

.panel-hint {
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ---- Match Temperature panel ---- */
.temperature-panel-badge {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
}

.temperature-panel-badge .temperature-icon {
  font-size: 1.2em;
}

.temperature-panel-badge.level-very_hot {
  color: var(--temp-very-hot);
  border-color: rgba(255, 59, 59, 0.45);
}

.temperature-panel-badge.level-hot {
  color: var(--temp-hot);
  border-color: rgba(239, 51, 64, 0.4);
}

.temperature-panel-badge.level-active {
  color: var(--temp-active);
  border-color: rgba(240, 163, 69, 0.4);
}

.temperature-panel-badge.level-calm {
  color: var(--temp-calm);
}

.temperature-panel-badge.level-cold {
  color: var(--temp-cold);
  border-color: rgba(79, 195, 247, 0.35);
}

.temperature-panel-badge .score-fraction {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

.reason-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reason-list li {
  position: relative;
  padding-inline-start: 16px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.reason-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-red);
}

/* ---- Signal Arena panel ---- */
.goal-signal-panel.has-active {
  border-color: rgba(239, 51, 64, 0.4);
  box-shadow: 0 0 0 1px rgba(239, 51, 64, 0.12);
}

.goal-signal-headline {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.goal-signal-level {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--brand-red-strong);
}

.signal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.signal-status-pill.status-active {
  color: var(--status-active);
  border-color: rgba(240, 163, 69, 0.4);
}

.signal-status-pill.status-success {
  color: var(--status-success);
  border-color: rgba(52, 199, 123, 0.4);
}

.signal-status-pill.status-failed {
  color: var(--status-failed);
  border-color: rgba(178, 69, 79, 0.4);
}

.signal-status-pill.status-reversed {
  color: var(--status-reversed);
  border-color: rgba(142, 111, 214, 0.4);
}

.goal-signal-meta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.goal-signal-meta-item .label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.goal-signal-meta-item .value {
  margin-top: 2px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.goal-signal-why {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

.goal-signal-empty {
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.goal-signal-block {
  margin-top: 14px;
}

.goal-signal-block + .goal-signal-block {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.why-signal {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Phase 3 (Signal Analytics) — a plain list of stacked .why-signal entries; the first one shouldn't float a border/margin above nothing. */
.signal-history-entry:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.why-signal summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  list-style: none;
}

.why-signal summary::-webkit-details-marker {
  display: none;
}

.why-signal summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 6px;
  color: var(--brand-red);
  transition: transform 0.15s ease;
}

html[dir='rtl'] .why-signal summary::before {
  content: '◂';
}

.why-signal[open] summary::before {
  transform: rotate(90deg);
}

.why-signal-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-signal-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.signal-history-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signal-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--bg-card-alt);
}

/* ---- Statistics tab ---- */
.stats-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.legend-dot.is-home {
  background: var(--pressure-home);
}

.legend-dot.is-away {
  background: var(--pressure-away);
}

.pressure-chart-svg {
  width: 100%;
  height: 160px;
  display: block;
  margin-top: 14px;
}

.stats-group + .stats-group {
  margin-top: 18px;
}

.stats-group-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.stats-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.stat-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.stat-card-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.stat-card-values {
  margin-top: 6px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-card-values .divider {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
}

/* ---- Events tab ---- */
.event-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card-alt);
  font-size: var(--fs-sm);
}

.event-row .event-minute {
  flex: none;
  width: 42px;
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.event-row .event-type {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.event-row .event-team {
  margin-inline-start: auto;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 16px;
  text-align: center;
}

.disclaimer {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   Stage 5 — Owner Mode
   ========================================================================== */
.owner-mode-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--brand-red-tint);
  color: var(--brand-red-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  border: 1px solid rgba(239, 51, 64, 0.4);
}

.owner-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.owner-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.owner-form-full {
  grid-column: 1 / -1;
}

.owner-form input[type='text'],
.owner-form input[type='number'],
.owner-form input[type='email'],
.owner-form input[type='datetime-local'],
.owner-form select,
.owner-form textarea {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
}

.owner-form textarea {
  resize: vertical;
}

.owner-form input:focus-visible,
.owner-form select:focus-visible,
.owner-form textarea:focus-visible,
.recipient-search-row input:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 1px;
}

.owner-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

#manual-signal-not-live-note {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--brand-red);
}

.owner-primary-button {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--text-primary);
}

.owner-primary-button:hover {
  background: var(--brand-red-strong);
  border-color: var(--brand-red-strong);
  color: var(--text-primary);
}

.owner-preview {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-dialog {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  max-width: 420px;
  width: calc(100% - 32px);
}

.owner-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.owner-dialog h3 {
  margin-bottom: 6px;
  font-size: var(--fs-md);
}

.owner-dialog-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.owner-dialog-row:last-child {
  border-bottom: none;
}

.owner-dialog-row .label {
  color: var(--text-secondary);
}

.owner-dialog-row .value {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  text-align: end;
}

.odds-market-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.odds-market-title {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.odds-selection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.odds-selection-row .price {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.odds-market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rule-family {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.rule-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.rule-version-row:first-of-type {
  border-top: none;
}

.rule-version-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rule-version-actions .back-button {
  padding: 5px 10px;
  font-size: var(--fs-xs);
}

.condition-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.condition-row:first-child {
  padding-top: 0;
}

.condition-row select,
.condition-row input {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  font-size: var(--fs-sm);
  font-family: inherit;
}

.condition-row .condition-field-select {
  flex: 2 1 200px;
}

.condition-row .condition-operator-select {
  flex: 1 1 140px;
}

.condition-row .condition-value-input {
  flex: 1 1 120px;
}

.condition-row .condition-value-input:disabled {
  opacity: 0.4;
}

.dry-run-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.dry-run-result-row:last-child {
  border-bottom: none;
}

.validation-error-list {
  margin-top: 6px;
  padding-inline-start: 18px;
  color: var(--status-failed);
}

/* ==========================================================================
   Homepage Redesign (Phase 1) — Featured Matches strip
   ========================================================================== */
.featured-matches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.featured-matches-title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
}

.featured-matches-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: var(--space-2xs);
}

.featured-match-card {
  appearance: none;
  cursor: pointer;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  min-width: 200px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.featured-match-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.featured-match-competition {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.featured-match-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-match-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.featured-match-team-row .score {
  font-weight: var(--fw-bold);
}

.featured-match-versus {
  display: none;
}

.featured-match-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ==========================================================================
   Homepage Redesign (Phase 1) — Sports navigation row
   ========================================================================== */
.sports-nav {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-alt);
  overflow-x: auto;
  scrollbar-width: thin;
}

.sports-nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  min-width: 100%;
  direction: ltr;
}

html[dir='rtl'] .sports-nav-list {
  direction: rtl;
}

.sports-nav-list > .sport-tab-desktop {
  flex: 0 0 126px;
}

.sports-nav-list > .sport-tab-desktop.sport-tab-favorites {
  flex-basis: 151px;
}

.sports-nav-list > .sport-tab-desktop.sport-tab-top-leagues {
  flex-basis: 151px;
}

.sports-nav-list > .sport-tab-desktop > .sport-tab {
  width: 100%;
  justify-content: center;
}

.sport-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 10px 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sport-tab .sport-icon {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--brand-red);
}

/* "Favorites" is the primary/first tab — ~20% wider than its previous 16px padding-inline (now 19px), width only, never taller than a plain tab, so the row never wraps to a second line on desktop. */
.sport-tab.is-favorites {
  font-weight: var(--fw-semibold);
}

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

.sport-tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-red);
}

.sport-tab-more {
  position: relative;
}

/* Homepage Sports & League Navigation — `fixed` (not `absolute`), with
   top/left set inline by positionFixedMenu() from the toggle button's real
   getBoundingClientRect(). See that function's doc comment: escapes the
   horizontally-scrolling .sports-nav row's overflow clipping, which an
   absolutely-positioned dropdown taller than the row was silently caught
   by before this fix. */
.sport-more-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  z-index: 30;
}

.sport-more-menu .sport-tab {
  border-bottom: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  justify-content: flex-start;
}

.sport-more-menu .sport-tab:hover,
.sport-more-menu .sport-tab.is-active {
  background: var(--bg-card-alt);
}

/* ==========================================================================
   Homepage Sports & League Navigation — single-column content (Top Leagues
   is its own permanently-visible panel now, see .leagues-sidebar below —
   no more persistent sidebar column reserving horizontal space next to the
   match list)
   ========================================================================== */
.home-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ---- Leagues panel — V16: permanently visible in normal document flow
   (never a dropdown/toggle — see #top-leagues-toggle's doc comment in
   app.js), sitting directly below the sports-nav row. The IDs/children
   (#favorite-leagues-list, #all-leagues-list) are untouched —
   renderLeaguesSidebar()/leagueRowHtml() need no changes at all. ---- */
.leagues-sidebar {
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  /* Community V6 — Favorites sits directly above Top Leagues with no visible gap between the two sections; each section's own internal padding still provides breathing room. */
  gap: var(--space-2xs);
  /* V16 correction — .view (the flex-column parent) defaults every direct
     child to align-items: stretch, which is why this panel was rendering
     at the FULL width of the page section instead of hugging its own
     content. `align-self: flex-start` opts this one child out of that
     stretch so its width is driven purely by its content (the widest
     league row + star + padding, via .league-list's own flex-column
     sizing) — a compact panel, not a full-width one. The max-width is
     just a sane upper bound for unusually long translated names. */
  align-self: flex-start;
  width: fit-content;
  max-width: min(100%, 400px);
}

.leagues-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-inline: var(--space-2xs);
}

/* V16 correction — strictly one league per row, stacked vertically. The
   earlier multi-column wrap (grid auto-fill) was explicitly rejected: the
   user wants a single ordered vertical list, not a grid. */
.league-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.more-leagues-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 6px var(--space-2xs);
  margin-top: 2px;
}

.more-leagues-toggle:hover {
  color: var(--text-primary);
}

.more-leagues-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}

.more-leagues-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.more-leagues-toggle.is-hidden {
  display: none;
}

.league-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-sm);
  padding: 7px var(--space-2xs);
}

.league-row:hover {
  background: var(--bg-elevated);
}

/* Community V5 — Favorites quick-access rows use the same leagueRowHtml()
   markup/data as Top Leagues, just visually tighter (chip-like), so the two
   never read as two independent copies of the same list. */
.league-row.is-compact {
  padding: 4px var(--space-2xs);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

.league-row.is-compact .league-row-button {
  font-size: var(--fs-xs);
}

.league-row-button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  text-align: start;
  padding: 0;
}

.league-flag {
  flex: none;
  font-size: 1.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Homepage Sports & League Navigation — the country flag, distinct from
   .league-flag above (which, despite its name, actually holds the league's
   own crest/logo — kept unchanged to avoid touching every existing call
   site). Sized to match so the row never grows taller than before. */
.league-country-flag {
  flex: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.flag-icon {
  width: 1.15em;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.flag-icon-fallback {
  flex: none;
}

.league-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.favorite-star-button {
  appearance: none;
  background: transparent;
  border: none;
  flex: none;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favorite-star-button svg {
  width: 16px;
  height: 16px;
  transition: color 0.15s ease, transform 0.1s ease;
}

.favorite-star-button:hover {
  color: var(--temp-active);
}

.favorite-star-button.is-favorite {
  color: var(--temp-active);
}

.favorite-star-button.is-favorite svg {
  transform: scale(1.05);
}

.leagues-sidebar .empty-state {
  padding: var(--space-md) var(--space-xs);
  font-size: var(--fs-xs);
}

/* ---- Shared league picker: desktop dialog, mobile bottom sheet ---- */
.league-picker-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0, 0, 0, 0.58);
}

.league-picker {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(440px, calc(100vw - 32px));
  max-height: min(76dvh, 680px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}

.league-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.league-picker-header h2 {
  font-size: var(--fs-md);
}

.league-picker-close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.league-picker-close:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.league-picker-list {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-xs);
}

/* ==========================================================================
   Homepage Redesign (Phase 1) — Filter bar + Calendar
   ========================================================================== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  width: 100%;
  grid-column: 2;
  grid-row: 1;
}

.filter-segmented {
  display: inline-flex;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

.filter-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 7px 14px;
  white-space: nowrap;
}

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

.filter-tab.is-active {
  color: var(--text-primary);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--border-strong), inset 0 -2px 0 var(--brand-red);
}

.calendar-control {
  position: relative;
  flex: none;
}

.calendar-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 8px 14px;
  white-space: nowrap;
}

.calendar-button:hover {
  border-color: var(--border-strong);
}

.calendar-button svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--brand-red);
}

.calendar-popover {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: var(--space-xs);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 260px;
  z-index: 30;
}

.calendar-popover-header {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.calendar-week-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card-alt);
  color: var(--text-primary);
  cursor: pointer;
}

.calendar-week-button:hover {
  border-color: var(--brand-red);
}

.calendar-week-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.calendar-week-range {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.calendar-days-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-day-button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  font-size: var(--fs-xs);
}

.calendar-day-button:hover {
  border-color: var(--border-strong);
}

.calendar-day-button.is-selected {
  background: var(--brand-red-tint);
  border-color: var(--brand-red-tint-strong);
  color: var(--text-primary);
}

.calendar-day-weekday {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.calendar-day-number {
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Homepage Redesign (Phase 1) — League groups + classic match rows
   ========================================================================== */
.match-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  grid-column: 2;
  grid-row: 2;
}

.league-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.league-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 10px var(--space-md);
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.league-group-header .league-flag {
  font-size: 1.1em;
}

.league-group-header .favorite-star-button {
  margin-inline-start: auto;
}

.match-row-list {
  display: flex;
  flex-direction: column;
}

.match-row {
  appearance: none;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  width: 100%;
  text-align: start;
  transition: background-color 0.15s ease;
}

.match-row:first-child {
  border-top: none;
}

.match-row:hover {
  background: var(--bg-card-alt);
}

.match-row .favorite-star-button {
  grid-column: 1;
}

.match-row-temperature {
  grid-column: 2;
  flex: none;
  font-size: 1.05em;
  line-height: 1;
}

.match-row-minute {
  grid-column: 3;
  flex: none;
  width: 42px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.match-row-minute.is-live {
  color: var(--brand-red-strong);
}

.match-row-teams {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.match-row-team {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.match-row-scores {
  grid-column: 5;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 4px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.match-row-kickoff {
  grid-column: 5;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.match-row-stats-button {
  grid-column: 6;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.match-row-stats-button:hover {
  border-color: var(--brand-red);
  color: var(--text-primary);
}

.match-row-stats-button svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ==========================================================================
   Owner Match Center (Phase 2)
   ========================================================================== */
.owner-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
}

.owner-dashboard-full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .owner-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Signal Arena Analysis: Pressure Trend ---- */
.owner-pressure-trend-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.owner-pressure-trend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 4px 0;
  font-size: var(--fs-sm);
}

.owner-pressure-trend-item .label {
  color: var(--text-secondary);
}

.owner-pressure-trend-item .value {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

/* Reuse the goal-signal-panel look for the embedded Owner copy, without the outer .panel double-border. */
#owner-goal-signal-analysis-panel .goal-signal-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---- Team Information ---- */
.owner-placeholder-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.owner-placeholder-field {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.owner-placeholder-field .label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.owner-placeholder-field .value {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* ---- League Information ---- */
.owner-subsection + .owner-subsection {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.owner-placeholder-table-header {
  display: grid;
  grid-template-columns: 2fr repeat(9, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  padding: 8px 10px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.owner-placeholder-table-header-3col {
  grid-template-columns: 2fr 2fr 1fr;
}

.owner-league-info .panel-hint,
#owner-league-info .panel-hint {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 10px 12px;
  margin-top: 0;
}

/* ---- Manual Signals list: note + captured-odds summary ---- */
.manual-signal-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.manual-signal-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.manual-signal-row-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.manual-signal-row-odds {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.owner-dialog-note {
  margin-top: 10px;
}

/* ==========================================================================
   Owner Alerts phase
   ========================================================================== */
.unseen-alerts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-inline-start: 6px;
  border-radius: 999px;
  background: var(--brand-red);
  color: var(--text-primary);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  vertical-align: middle;
}

.owner-alert-toast-stack {
  position: fixed;
  bottom: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 320px;
}

.owner-alert-toast {
  background: var(--bg-card);
  border: 1px solid var(--brand-red);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: owner-alert-toast-in 0.2s ease-out;
}

@keyframes owner-alert-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.owner-alert-toast-title {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.owner-alert-toast-match,
.owner-alert-toast-teams,
.owner-alert-toast-reason {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.owner-alert-toast-actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Real Live Football Data Provider — LIVE/DEMO badge
   ========================================================================== */
.data-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.data-source-badge.is-demo {
  color: var(--text-secondary);
  background: var(--bg-card-alt);
  border-color: var(--border);
}

.data-source-badge.is-live {
  color: var(--brand-red);
  background: var(--brand-red-tint);
  border-color: var(--brand-red);
}

.data-source-badge.is-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ==========================================================================
   VIP Subscription phase
   ========================================================================== */
.vip-section {
  margin-top: var(--space-lg);
  border-color: var(--brand-red);
}

.vip-signal-card.is-cancelled {
  opacity: 0.7;
  border-style: dashed;
}

/* ==========================================================================
   V12 — VIP Expert Group: premium hero-style card for the automated
   RULE_GOAL_PRESSURE_001 signal ONLY (buildLiveGoalSignalCardHtml). A new,
   structurally distinct top-level class — deliberately NOT layered on
   .community-post-card/.vip-signal-card, so it reads as visually different
   from a Notification Center card, per the V12 brief. buildVipSignalCardHtml
   (Owner-manual card) and the Notification Center card are untouched and
   keep using .community-post-card as before. Only existing design tokens
   are used below — no new colors.
   ========================================================================== */
.vip-hero-signal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  max-width: 420px;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-red-tint-strong);
  background: linear-gradient(180deg, var(--brand-red-tint) 0%, var(--bg-card-alt) 60%);
  cursor: default;
}

.vip-hero-signal-league {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.vip-hero-signal-league-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.vip-hero-signal-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  margin-top: var(--space-xs);
}

.vip-hero-signal-team {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.vip-hero-signal-score {
  flex: none;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.vip-hero-signal-minute {
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--status-active);
  font-weight: var(--fw-semibold);
}

.vip-hero-signal-title {
  align-self: center;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.vip-hero-signal-card .live-goal-signal-status-pill {
  align-self: center;
}

.vip-hero-signal-card .back-button {
  align-self: center;
}

/* V10 — Live Goal Signal status pill. Reuses the SAME semantic status
   tokens already defined in :root (--status-active/success/failed/reversed)
   for exactly this kind of active/success/failed/reversed vocabulary —
   no new colors. */
.live-goal-signal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.live-goal-signal-status-icon {
  width: 12px;
  height: 12px;
  flex: none;
}

.live-goal-signal-status-pill.status-active {
  color: var(--status-active);
  background: var(--temp-active-tint);
}

.live-goal-signal-status-pill.status-hit {
  color: var(--status-success);
  background: rgba(52, 199, 123, 0.14);
}

.live-goal-signal-status-pill.status-missed {
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.live-goal-signal-status-pill.status-reversed {
  color: var(--status-reversed);
  background: rgba(142, 111, 214, 0.14);
}

/* V11 — Signal Center: Signal History's compact row, a denser clickable
   variant of the same .community-post-card used by the full Live Signal
   card above — same tokens, no new design language. Keyboard-focusable
   (role="button" tabindex="0" in markup); the shared global :focus-visible
   rule already supplies the outline. */
.live-goal-signal-history-row {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 100%;
}

.live-goal-signal-history-row:hover {
  border-color: var(--border-strong);
}

.live-goal-signal-history-row .community-post-header {
  flex: 1 1 auto;
  min-width: 0;
}

/* V11 — Signal History's filter bar. Same visual as .filter-segmented
   (inline pill row of .filter-tab buttons) but under its OWN class rather
   than reusing .filter-segmented directly: that class is hidden by a
   homepage-specific mobile rule (`.filter-segmented { display: none }`,
   re-shown only inside `.filter-bar.is-today`) built for the date/today
   filter — reusing it here would silently hide this filter bar on mobile. */
.signal-history-filter-bar {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  margin-bottom: 10px;
}

/* V11 — Signal Performance panel: reuses the existing .goal-signal-meta
   label/value stat-grid component (see the "why this signal?" panel) rather
   than inventing a new stats layout. */
.signal-performance-rate-row {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.signal-performance-rate-row .value {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Account Verification Foundation phase
   ========================================================================== */
.account-verification-panel .verification-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

.account-verification-panel .verification-row + .verification-row {
  border-top: 1px solid var(--border);
}

.account-settings-panel {
  min-height: 72px;
}

.account-settings-slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

/* V7 — reserved slots two..five stay genuinely empty (no future feature
   lives there yet) and must not reserve visual space; a populated slot
   (see .account-settings-slot:not([aria-hidden]) below) already fills the
   single column above on its own. */
.account-settings-slot[aria-hidden='true'] {
  display: none;
}

.verification-row-label {
  min-width: 90px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.verification-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.verification-status.is-verified {
  color: var(--status-success);
}

.verification-status.is-pending {
  color: var(--status-active);
}

.simple-toast {
  background: var(--bg-card);
  border: 1px solid var(--status-success);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  animation: owner-alert-toast-in 0.2s ease-out;
}

.simple-toast.is-error {
  border-color: var(--status-failed);
}

/* ==========================================================================
   Community — premium chat-style feed (header/search/composer/post bubbles/
   image posts/reports/match comments), consolidated into one block. RTL/LTR
   for this whole section (and #match-comments-panel) is driven entirely by
   a local `dir` attribute set from JS (see applyCommunityLanguage in
   app.js) — every rule here uses logical properties and flex start/end
   semantics rather than left/right, so it flips correctly with no separate
   RTL ruleset needed.
   ========================================================================== */
/* The site-wide `html[lang='ar'] body { font-family: var(--font-arabic); }` rule (near the top of this file) only fires when the SITE language is Arabic. Community language is independent — e.g. an English site with an Arabic Community feed — so it needs its own scoped equivalent. */
#view-community[dir='rtl'],
#match-comments-panel[dir='rtl'] {
  font-family: var(--font-arabic);
}

/* Polish V2 — a premium application panel, not a full-width document: Community gets its own comfortable reading width within the site's existing wider container, instead of stretching to the full dashboard width every other view uses. */
#view-community {
  max-width: 720px;
  margin-inline: auto;
}

.community-toolbar {
  align-items: center;
}

/* Community V3 — title above, Commentary Language selector below (was side-by-side), matching the chat-app mockups. */
.community-toolbar-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
}

/* Community V6 — Live Alerts subscribe entry point sits inline with the Expert Group title, kept deliberately compact (reuses .data-source-badge.is-live) so it never competes visually with the <h1>. */
.community-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

#expert-group-live-alerts-btn {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

#expert-group-live-alerts-btn:hover {
  background: var(--brand-red-tint-strong);
}

#expert-group-live-alerts-btn:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

#expert-group-live-alerts-btn:active {
  transform: scale(0.97);
}

.community-auth-status {
  display: flex;
  align-items: center;
}

/* Community V3 — the Commentary Language selector. Deliberately NOT styled like the site header's `.language-menu-toggle` icon+code button (see index.html's comment on #community-language-menu) — a clear text label instead, so it can never read as a second copy of the site language switcher. */
.community-language-select {
  position: relative;
}

.community-language-select-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px 10px;
  font-size: var(--fs-xs);
}

.community-language-select-toggle:hover {
  border-color: var(--border-strong);
}

.community-language-select-label {
  color: var(--text-secondary);
}

.community-language-select-value {
  font-weight: var(--fw-semibold);
}

.community-language-select-caret {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

/* Reuses the shared .language-menu-list dropdown (position/shadow/etc. already defined once, near the header) for the option list itself — only the toggle button above gets Community-specific styling. */
.community-language-select .language-menu-list {
  top: calc(100% + 7px);
  inset-inline-start: 0;
  inset-inline-end: auto;
}

#community-post-error {
  position: static;
  display: block;
  margin-top: var(--space-xs);
  white-space: normal;
}

/* ---- Search ---- */
.community-search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.community-search-input {
  width: 100%;
  appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  padding: 11px 42px;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.community-search-input::placeholder {
  color: var(--text-muted);
}

.community-search-input:focus-visible {
  outline: none;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px var(--brand-red-tint);
}

.community-search-row::before {
  content: '🔎';
  position: absolute;
  inset-inline-start: 16px;
  font-size: var(--fs-sm);
  opacity: 0.7;
  pointer-events: none;
}

.community-search-clear {
  position: absolute;
  inset-inline-end: 10px;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

.community-search-clear:hover {
  color: var(--text-primary);
}

/* ---- Composer: attach — input — send, in a single pill-shaped bar ---- */
/* Community V3 — docked at the bottom of the Community content (last element in #view-community), not a floating .panel card like the rest of the page; a top border is enough separation from the feed above. Pinned above the mobile bottom nav via the mobile override further down. */
.community-composer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

.community-match-link {
  font-size: var(--fs-xs);
}

.community-composer-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  transition: border-color 0.15s ease;
}

.community-composer-bar:focus-within {
  border-color: var(--brand-red);
}

.community-composer-input {
  flex: 1 1 auto;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: 8px 6px;
  max-height: 120px;
}

.community-composer-input:focus-visible {
  outline: none;
}

.community-composer-input::placeholder {
  color: var(--text-muted);
}

.community-attach-image-button,
.community-send-button {
  flex: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
}

.community-attach-image-button {
  background: transparent;
  color: var(--text-secondary);
}

.community-attach-image-button:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.community-send-button {
  background: var(--brand-red);
  color: var(--text-primary);
  transition: background 0.15s ease;
}

.community-send-button:hover {
  background: var(--brand-red-strong);
}

.community-send-icon {
  line-height: 1;
}

/* RTL: the send arrow points toward the end of the line either way. */
[dir='rtl'] .community-send-icon {
  transform: scaleX(-1);
}

.community-image-preview {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

.community-image-preview img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.community-image-preview-remove {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  line-height: 1;
  cursor: pointer;
}

/* ---- Feed: single chat-style stream with a Latest/Top segmented toggle ---- */
.community-feed-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.community-feed-tabs {
  align-self: flex-start;
}

/* Scoped on top of the shared .filter-tab component (also used by the unrelated Head-to-Head filter) — only Community's Latest/Top toggle gets the brand-red "active" accent; .filter-tab's own base/hover/is-active rules are untouched. */
.community-feed-tabs .filter-tab.is-active {
  color: var(--brand-red);
  background: var(--brand-red-tint);
  box-shadow: inset 0 0 0 1px var(--brand-red-tint-strong);
}

.community-post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Compact centered empty state (see communityEmptyStateHtml in app.js) shared by the main feed, search results, match comments, and the Owner pending queue — reuses each caller's own existing i18n string, never hard-coded text. */
.community-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-lg) 0;
  text-align: center;
}

.community-empty-state-icon {
  font-size: var(--fs-2xl);
  opacity: 0.5;
}

.community-empty-state .panel-hint {
  margin-top: 0;
}

/* ---- Post/comment bubbles — shared by the main feed, search results, and match comments ---- */
.community-post-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* Reversing the row (not just justify-content) both pushes the pair to the trailing edge AND puts the avatar on that same trailing side — the classic "my messages" chat layout — while staying direction-aware for free (row-reverse's start/end already follow the element's own `dir`, so this needs no separate RTL override). */
.community-post-row.is-own {
  flex-direction: row-reverse;
}

.community-post-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Deterministic per-username color (see communityAvatarColorClass in app.js) — reuses 6 colors already defined above as design tokens, no new hex values. */
.community-avatar-color-0 { background: var(--brand-red); }
.community-avatar-color-1 { background: var(--pressure-away); }
.community-avatar-color-2 { background: var(--status-success); }
.community-avatar-color-3 { background: var(--status-reversed); }
.community-avatar-color-4 { background: var(--temp-active); }
.community-avatar-color-5 { background: var(--temp-cold); }

.community-post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card-alt);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(560px, 82%);
}

.community-post-row.is-own .community-post-card {
  background: var(--brand-red-tint);
  border-color: var(--brand-red-tint-strong);
}

.community-post-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

/* min-width:0 is required for text-overflow:ellipsis to work on a flex child — without it the item refuses to shrink below its content's natural width and a long username would instead push .community-post-time out of the bubble. */
.community-post-author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.community-post-time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.community-post-match {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
}

.community-post-body {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Community V3 — on-demand translation UI: small and secondary, never a large translation card (item 10 of the brief). */
.community-translation-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
}

.community-translation-indicator {
  color: var(--text-muted);
}

.community-translation-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.community-translation-toggle:hover {
  color: var(--text-primary);
}

.community-post-image {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* Now holds both the Like button and the ⋯ menu (moved out of the header in Polish V2) side by side, one at each end of the row. */
.community-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community-like-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.community-like-button:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

.community-like-button.is-active {
  border-color: var(--brand-red);
  color: var(--brand-red);
  background: var(--brand-red-tint);
}

.community-like-icon {
  line-height: 1;
}

.community-post-menu {
  position: relative;
  flex: none;
}

.community-post-menu-toggle {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.community-post-menu-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.community-load-older-btn {
  align-self: center;
  margin-top: var(--space-xs);
}

/* ---- Match comments (inside Match Center's "Comments" tab) — same bubble/composer components as the main feed above, no parallel styling. ---- */
.match-comment-composer {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Live/Historical Data Separation phase — Match Center meta row (kickoff/
   season), Head-to-Head list, and last-5 "Form" columns.
   ========================================================================== */
.match-center-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 4px;
}

.h2h-filter-tabs {
  margin-bottom: var(--space-sm);
}

.h2h-row {
  display: grid;
  grid-template-columns: 90px 1fr 2fr auto;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  padding: var(--space-sm) 4px;
}

.h2h-row:last-child {
  border-bottom: none;
}

.h2h-row:hover {
  background: var(--bg-card-alt);
}

.h2h-row-date {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.h2h-row-competition {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.h2h-row-teams {
  font-weight: var(--fw-medium);
}

.match-form-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.team-form-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  padding: var(--space-sm) 4px;
}

.team-form-row:last-child {
  border-bottom: none;
}

.team-form-row:hover {
  background: var(--bg-card-alt);
}

.team-form-date,
.team-form-competition {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border: 1px solid transparent;
}

.result-badge.is-win {
  color: var(--status-success);
  border-color: rgba(52, 199, 123, 0.4);
}

.result-badge.is-draw {
  color: var(--status-active);
  border-color: rgba(240, 163, 69, 0.4);
}

.result-badge.is-loss {
  color: var(--status-failed);
  border-color: rgba(178, 69, 79, 0.4);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 640px) {
  .match-form-columns {
    grid-template-columns: 1fr;
  }

  .h2h-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .match-center-teams {
    font-size: var(--fs-lg);
  }

  .goal-signal-meta {
    grid-template-columns: 1fr 1fr;
  }

  /* V12 — VIP hero card stays full-width and its score shrinks a step on narrow phones. */
  .vip-hero-signal-card {
    max-width: 100%;
  }

  .vip-hero-signal-score {
    font-size: var(--fs-xl);
  }

  .owner-placeholder-table-header {
    grid-template-columns: 1.5fr repeat(9, minmax(28px, 1fr));
    font-size: 0.65rem;
    overflow-x: auto;
  }

  .community-post-card {
    max-width: 88%;
  }

  .community-post-avatar {
    width: 34px;
    height: 34px;
    font-size: var(--fs-xs);
  }

  /* Comfortable touch targets on mobile — desktop keeps the 36px compact icon buttons. */
  .community-attach-image-button,
  .community-send-button {
    width: 40px;
    height: 40px;
  }

  /* Community V3 — the composer docks directly above the existing fixed
     .mobile-bottom-nav (min-height 68px, see below) rather than scrolling
     away with the feed. z-index one below the nav's 80 so neither can ever
     paint over the other in an unexpected order. */
  .community-composer-panel {
    position: fixed;
    inset-inline: 0;
    bottom: calc(68px + env(safe-area-inset-bottom));
    z-index: 79;
    margin: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-strong);
    padding: var(--space-sm) var(--space-md);
  }

  /* Reserves room at the bottom of the scrollable Community content so the
     last message is never hidden behind the now-fixed composer + the fixed
     bottom nav beneath it. */
  .community-feed-panel {
    margin-bottom: calc(160px + env(safe-area-inset-bottom));
  }

  .community-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .community-toolbar-heading {
    width: 100%;
  }
}

/* ==========================================================================
   League Page (Historical Archive + Current/Live Data Architecture phase)
   One shared component for every league — no per-league overrides here.
   ========================================================================== */
.league-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

.league-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 240px;
  min-width: 0;
}

.league-header-title h1 {
  font-size: var(--fs-xl);
  color: var(--text-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
}

.league-season-selector {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: none;
}

.league-season-selector label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

/* V16 — Season control investigation: the select was always fully
   functional (real season options, never disabled) — `appearance: none`
   had just stripped the native dropdown arrow with no replacement, so a
   working 17-option control visually read as an inert box. A chevron
   indicator is the actual, sufficient fix; nothing in the data layer
   needed touching. */
.league-season-selector select {
  appearance: none;
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239aa3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 8px var(--space-md);
  padding-inline-end: 32px;
  cursor: pointer;
}

html[dir='rtl'] .league-season-selector select {
  background-position: left 10px center;
}

.league-season-selector select:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 1px;
}

.league-season-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-red-strong);
  background: var(--brand-red-tint);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.league-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  margin-bottom: var(--space-md);
}

.league-tab-button {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 10px 14px;
  white-space: nowrap;
  cursor: pointer;
}

.league-tab-button:hover {
  color: var(--text-primary);
}

.league-tab-button.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--brand-red);
}

.league-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.league-overview-status-tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 12px;
}

.league-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.league-view-all-link {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--brand-red-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.league-view-all-link:hover {
  text-decoration: underline;
}

.league-overview-standing-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: var(--space-sm);
  padding: 6px 4px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
}

.league-overview-standing-row:last-child {
  border-bottom: none;
}

.league-standings-table-wrap {
  overflow-x: auto;
}

.league-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.league-standings-table th,
.league-standings-table td {
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}

.league-standings-table th:nth-child(2),
.league-standings-table td:nth-child(2) {
  text-align: start;
}

.league-standings-table thead th {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border-strong);
}

.league-standings-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.league-standings-table tbody tr:last-child {
  border-bottom: none;
}

.league-standings-table tbody tr:hover {
  background: var(--bg-card-alt);
}

.league-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.league-team-chip {
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  text-align: center;
}

@media (max-width: 900px) {
  .league-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* V16 correction — the real overflow cause: the base rule's
     `flex-wrap: wrap` was never reset here, so `flex-direction: column` +
     `flex-wrap: wrap` together made flexbox treat each child as its own
     WRAPPED COLUMN sized by its own content (ignoring align-items: stretch,
     which only stretches within a line) instead of one single stacked
     column — .league-season-selector rendered wider than its parent as a
     result, pushing the season tag off-screen. `flex-wrap: nowrap` is the
     actual fix; the min-width:0 additions below are real but secondary. */
  .league-page-header {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /* V16 correction — `min-width: 0` on both the flex item and the select
     inside it: without it, a flex item's default min-width is its content's
     natural (min-content) size, so a long season label (e.g. "2026/27 —
     Current Season") kept forcing this row wider than the viewport even
     with flex:1/stretch set — the classic flexbox shrink gotcha. */
  .league-season-selector {
    justify-content: space-between;
    min-width: 0;
  }

  .league-season-selector select {
    flex: 1;
    min-width: 0;
  }

  .league-standings-table {
    font-size: var(--fs-xs);
  }
}

/* ==========================================================================
   Owner VIP Signal Delivery phase — Audience block (Manual VIP Signal
   composer) + VIP Access panel. Reuses .owner-form/.owner-form-actions/
   .owner-placeholder-field/.back-button wherever they already fit.
   ========================================================================== */
.audience-selector {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.audience-selector-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.audience-radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.audience-hint {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

#manual-signal-recipient-box {
  margin-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.recipient-search-row {
  display: flex;
  gap: var(--space-xs);
}

.recipient-search-row input {
  flex: 1;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
}

.recipient-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: var(--fs-xs);
  color: var(--text-primary);
}

.recipient-chip button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 2px 4px;
}

.recipient-chip button:hover {
  color: var(--brand-red-strong);
}

.vip-signal-card .back-button {
  margin-top: var(--space-sm);
}

/* ===========================================================================
   V7 — Notification Settings, in-app Notifications, League Logo badges
   =========================================================================== */
.header-notif-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.header-notif-trigger svg {
  width: 18px;
  height: 18px;
}

.header-notif-trigger:hover {
  border-color: var(--brand-red);
  color: var(--brand-red);
}

/* ---- League logo badge — shared by leagueRowHtml (Top Leagues/Favorites)
   and the Notifications list; see renderLeagueLogo() in app.js. ---- */
.league-logo-slot {
  position: relative;
  display: inline-flex;
  flex: none;
}

.league-logo {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  flex: none;
}

.league-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58em;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1;
}

.league-logo-img {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

/* ---- V8 — Notification event icon colors. Goal = brand accent, cards =
   their real-world colors; everything else stays neutral (--text-secondary)
   rather than inventing colors outside the design tokens. ---- */
.notification-event-icon-svg {
  width: 100%;
  height: 100%;
}

.is-goal {
  color: var(--brand-red);
}

.is-yellow-card {
  color: var(--card-yellow);
}

.is-red-card {
  color: var(--brand-red-strong);
}

.is-neutral {
  color: var(--text-secondary);
}

/* ---- Notification Settings (account-settings-panel slot "one") ---- */
.notification-settings-title {
  font-size: var(--fs-md);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.notification-sport-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.notification-sport-row {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card-alt);
}

.notification-sport-row:last-child {
  border-bottom: none;
}

.notification-sport-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.notification-sport-row-expand {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: start;
  cursor: pointer;
  padding: 4px;
}

.notification-sport-row-expand:disabled {
  cursor: default;
}

.notification-sport-row-expand svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--text-secondary);
}

.notification-sport-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-sport-row-badge {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 7px;
}

.notification-sport-row-caret {
  flex: none;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

.notification-sport-row-expand[aria-expanded='true'] .notification-sport-row-caret {
  transform: rotate(180deg);
}

.notification-accordion {
  padding: var(--space-xs) var(--space-md) var(--space-sm) calc(var(--space-md) + 26px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.notification-accordion-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-accordion-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.notification-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.notification-settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---- Toggle switch (track + thumb), RTL-safe via logical properties ---- */
.settings-toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  cursor: pointer;
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.settings-toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.settings-toggle-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.15s ease, background 0.15s ease;
}

.settings-toggle input:checked ~ .settings-toggle-track {
  background: var(--brand-red-tint-strong);
  border-color: var(--brand-red);
}

.settings-toggle input:checked ~ .settings-toggle-track .settings-toggle-thumb {
  background: var(--brand-red);
  transform: translateX(18px);
}

html[dir='rtl'] .settings-toggle input:checked ~ .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(-18px);
}

.settings-toggle input:focus-visible ~ .settings-toggle-track {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.settings-toggle-sm .settings-toggle-track,
.settings-toggle-sm input {
  width: 34px;
  height: 20px;
}

.settings-toggle-sm .settings-toggle-thumb {
  width: 14px;
  height: 14px;
}

.settings-toggle-sm input:checked ~ .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(14px);
}

html[dir='rtl'] .settings-toggle-sm input:checked ~ .settings-toggle-track .settings-toggle-thumb {
  transform: translateX(-14px);
}

/* ===========================================================================
   V8 — Notification Center (redesigned from V7's plain community-post-card
   reuse into a dedicated component — see plan report). Desktop width is
   capped so the list reads like a real product panel, not an
   exaggeratedly wide single column; #view-notifications still sits inside
   the site's normal .container, so this only trims the reading width.
   =========================================================================== */
#notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 640px;
}

.notification-group {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s ease;
}

.notification-group:hover {
  border-color: var(--border-strong);
}

.notification-group:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.notification-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.notification-group-header .league-logo {
  width: 22px;
  height: 22px;
}

.notification-group-header .league-logo-placeholder {
  font-size: 0.65rem;
}

.notification-group-league {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.notification-group-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);
}

.notification-group-team {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.notification-group-score .notification-group-team:last-child {
  text-align: end;
}

.notification-group-scoreline {
  flex: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.notification-event-list {
  display: flex;
  flex-direction: column;
}

.notification-event-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.notification-event-item:first-child {
  border-top: none;
}

.notification-event-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.notification-event-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.notification-event-team {
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

/* V10 — Live Goal Signal's confidence/window detail line; the real model
   score + real translated tier label, never a fabricated percentage. */
.notification-event-signal-detail {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-event-minute {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.notification-event-time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ===========================================================================
   Mobile dashboard shell
   Keeps the desktop dashboard unchanged while giving the 320–767px layout a
   dedicated, touch-first hierarchy.
   =========================================================================== */
.mobile-bottom-nav,
.match-stats-scrim,
.match-stats-sheet,
.sport-tab-mobile,
.filter-tab-mobile,
.featured-matches-title-mobile {
  display: none;
}

@media (max-width: 767px) {
  body {
    padding-bottom: 0;
  }

  .container {
    padding-inline: 12px;
  }

  .site-nav {
    display: none;
  }

  .header-inner {
    min-height: 54px;
    gap: 8px;
    padding-block: 8px;
    direction: ltr;
  }

  .brand {
    gap: 6px;
    flex: 0 1 auto;
  }

  .brand-icon {
    width: 24px;
    height: 24px;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-subtitle,
  .data-source-badge {
    display: none;
  }

  /* Community V6 — the Live Alerts button reuses .data-source-badge.is-live for its pill styling, but (unlike the LIVE/DEMO match badges this mobile rule was written for) it must stay visible on mobile as the subscribe entry point. */
  #expert-group-live-alerts-btn {
    display: inline-flex;
  }

  .header-controls {
    width: auto;
    margin-inline-start: 0;
    margin-left: auto;
    gap: 6px;
    flex: none;
    flex-wrap: nowrap;
    direction: rtl;
  }

  .language-menu-toggle {
    min-width: 64px;
    min-height: 32px;
    justify-content: center;
    padding: 5px 7px;
    font-size: var(--fs-xs);
  }

  .language-menu-list {
    right: 0;
    left: auto;
    width: 158px;
  }

  .header-controls > .login-trigger-button {
    display: none;
  }

  .main-content {
    padding-block: 12px calc(84px + env(safe-area-inset-bottom));
  }

  .view {
    gap: 14px;
  }

  #view-home {
    gap: 0;
  }

  #view-home > .sports-nav {
    order: 1;
  }

  #view-home > .featured-matches {
    order: 2;
  }

  #view-home > .home-layout {
    order: 3;
  }

  .featured-matches {
    gap: 8px;
    width: 100%;
    margin-bottom: 0;
  }

  .featured-matches-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: calc(100% + 24px);
    margin-inline: -12px;
    color: var(--text-primary);
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.03em;
    text-align: center;
  }

  .featured-matches-title::before,
  .featured-matches-title::after {
    content: '';
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-red), transparent);
  }

  .featured-matches-title-desktop {
    display: none;
  }

  .featured-matches-title-mobile {
    display: block;
    white-space: nowrap;
  }

  .featured-matches-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 90px;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .featured-match-card {
    min-width: 0;
    min-height: 90px;
    padding: 8px 10px;
    gap: 4px;
  }

  .featured-match-competition {
    font-size: 0.625rem;
  }

  .featured-match-teams {
    gap: 1px;
  }

  .featured-match-team-row {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.15;
  }

  .featured-match-team-row > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .featured-match-team-row .score:empty {
    display: none;
  }

  .featured-match-versus {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 12px;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: var(--fw-semibold);
  }

  .featured-match-meta {
    display: none;
  }

  .sports-nav {
    overflow: visible;
    border: 0;
    border-block: 1px solid var(--border);
    border-radius: 0;
  }

  .sports-nav-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .sports-nav-list > .sport-tab-desktop {
    display: none;
  }

  .sports-nav-list > .sport-tab-mobile {
    display: block;
    min-width: 0;
  }

  .sports-nav-list > .sport-tab-mobile.sport-tab-more {
    position: relative;
  }

  .sport-tab-more .sport-more-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    min-width: min(190px, calc(100vw - 24px));
    max-height: min(52dvh, 360px);
    overflow-y: auto;
  }

  .sport-more-menu .sport-tab {
    min-height: 42px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    font-size: var(--fs-sm);
  }

  .sport-tab {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px 5px;
    font-size: 0.625rem;
    line-height: 1.1;
  }

  .sport-tab .sport-icon {
    width: 24px;
    height: 24px;
  }

  .sport-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: calc(100% + 24px);
    margin-inline: -12px;
    margin-bottom: 14px;
    background: var(--bg-card-alt);
    border-block: 1px solid var(--border);
    border-inline: 0;
    border-radius: 0;
  }

  html[dir='rtl'] .filter-bar {
    flex-direction: row-reverse;
  }

  .filter-segmented {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 3px;
  }

  html[dir='rtl'] .filter-segmented {
    direction: rtl;
  }

  .filter-bar.is-today .filter-segmented {
    display: grid;
  }

  .filter-tab[data-filter='today'],
  .filter-tab[data-filter='tomorrow'] {
    display: none;
  }

  .filter-tab-mobile {
    display: block;
  }

  .filter-tab {
    min-width: 0;
    min-height: 44px;
    padding: 5px 1px;
    font-size: clamp(0.5rem, 2.2vw, 0.625rem);
    line-height: 1.15;
    white-space: nowrap;
  }

  .filter-tab[data-filter='finished'],
  .filter-tab[data-filter='scheduled'] {
    border-inline-start: 1px solid var(--border);
  }

  .calendar-button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    padding: 7px 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .calendar-button svg {
    color: var(--brand-red);
  }

  .calendar-button #calendar-button-label {
    display: none;
  }

  .calendar-control {
    order: 1;
    flex: 0 0 78px;
    width: 78px;
    border-inline-end: 1px solid var(--border);
  }

  .calendar-selected-date:not(:empty) {
    position: static;
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }

  .filter-bar:not(.is-today) .calendar-control {
    flex: 0 0 100%;
    width: 100%;
    border-inline-end: 0;
  }

  .calendar-popover {
    top: calc(100% + 6px);
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(360px, calc(100vw - 24px));
    grid-template-columns: 1fr;
  }

  .home-layout {
    display: block;
  }

  .match-groups {
    order: 1;
    width: 100%;
    gap: 12px;
  }

  .leagues-sidebar {
    display: none;
  }

  .league-row {
    min-height: 40px;
    padding: 8px 5px;
  }

  .league-row-button,
  .favorite-star-button {
    min-height: 30px;
  }

  .league-name {
    white-space: normal;
  }

  .league-group-header {
    padding: 9px 10px;
  }

  .match-row {
    grid-template-columns: auto 22px 34px minmax(0, 1fr) auto 34px;
    gap: 6px;
    padding: 9px 10px;
  }

  .match-row-minute {
    width: 30px;
    font-size: var(--fs-xs);
  }

  .match-row-team {
    font-size: var(--fs-xs);
  }

  .match-row-stats-button {
    min-width: 34px;
    min-height: 34px;
    padding: 5px;
  }

  .match-row-stats-button span {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 68px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: rgba(13, 16, 21, 0.98);
    border: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    direction: ltr;
  }

  html[dir='rtl'] .mobile-bottom-nav {
    direction: rtl;
  }

  .mobile-bottom-nav-item {
    appearance: none;
    min-width: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 0;
    font-size: clamp(0.5rem, 2.2vw, 0.625rem);
    font-weight: var(--fw-medium);
    line-height: 1.1;
  }

  .mobile-bottom-nav-item svg {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .mobile-bottom-nav-item span {
    display: block;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: normal;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    line-height: 1.05;
  }

  .league-picker {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(72dvh, 600px);
    padding-bottom: env(safe-area-inset-bottom);
    transform: none;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .mobile-bottom-nav-item.is-active {
    color: var(--text-primary);
    background: var(--brand-red-tint);
    box-shadow: inset 0 0 0 1px var(--brand-red-tint-strong);
  }

  .match-stats-scrim {
    position: fixed;
    inset: 0;
    z-index: 89;
    display: block;
    background: rgba(0, 0, 0, 0.58);
  }

  .match-stats-sheet {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    max-height: min(68dvh, 560px);
    min-height: 48dvh;
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.45);
    transition: max-height 0.2s ease, transform 0.16s ease;
  }

  .match-stats-sheet.is-expanded {
    max-height: 86dvh;
  }

  .match-stats-sheet-grabber {
    display: flex;
    justify-content: center;
    padding: 4px 0 10px;
    cursor: grab;
    touch-action: none;
  }

  .match-stats-sheet-grabber span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .match-stats-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
  }

  .match-stats-sheet-header h2 {
    font-size: var(--fs-lg);
  }

  .match-stats-sheet-close {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card-alt);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
  }

  .match-stats-sheet-content {
    min-height: 0;
    overflow-y: auto;
    padding-top: var(--space-md);
  }

  .match-stats-teams,
  .match-stats-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(84px, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
  }

  .match-stats-teams {
    padding: 0 var(--space-xs) var(--space-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
  }

  .match-stats-teams span:first-child {
    grid-column: 1;
  }

  .match-stats-teams span:last-child {
    grid-column: 3;
  }

  .match-stats-row {
    min-height: 42px;
    padding: 8px;
    border-top: 1px solid var(--border);
  }

  .match-stats-value {
    font-weight: var(--fw-semibold);
    text-align: center;
  }

  .match-stats-label {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    text-align: center;
  }
}