/* SD+ Hub — Design System
   Dark sports academy UI with lime accent
   ------------------------------------------------ */

:root,
html[data-theme="dark"] {
  --bg: #070b14;
  --bg-elevated: #0a0f1a;
  --surface: #0f1522;
  --card: #151c2c;
  --card-hover: #1a2336;
  --border: #1e293b;
  --border-soft: rgba(30, 41, 59, 0.85);
  --accent: #b8f000;
  --accent-alt: #a3e635;
  --accent-dim: rgba(184, 240, 0, 0.12);
  --accent-glow: rgba(184, 240, 0, 0.25);
  --text: #ffffff;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.12);
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --font: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Outfit", "DM Sans", system-ui, sans-serif;
  --transition: 180ms ease;
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #eef1f7;
  --bg-elevated: #f4f6fb;
  --surface: #ffffff;
  --card: #ffffff;
  --card-hover: #f1f5f9;
  --border: #d5dce8;
  --border-soft: rgba(15, 23, 42, 0.08);
  --accent: #7ab800;
  --accent-alt: #6a9f00;
  --accent-dim: rgba(122, 184, 0, 0.14);
  --accent-glow: rgba(122, 184, 0, 0.22);
  --text: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.12);
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.1);
  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.1);
  --shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html:has(body.legal-body) {
  overflow-x: hidden;
  max-width: 100%;
  min-width: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-alt);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--text);
}

p {
  margin: 0 0 1rem;
  color: var(--text-muted);
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand .accent,
.accent {
  color: var(--accent);
}

.brand-lg {
  font-size: 1.75rem;
}

.brand-xl {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.tagline {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* App shell */
.app-shell {
  display: flex;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(184, 240, 0, 0.06), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(56, 189, 248, 0.04), transparent 45%),
    var(--bg);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transform: translateX(0);
  transition: transform var(--transition);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  max-height: var(--topbar-h);
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  flex-shrink: 0;
}

.sidebar-brand .brand,
.sidebar-brand-link {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 0.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.sidebar-brand-link:hover {
  color: inherit;
}

.sidebar-academy-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
}

.sidebar-brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.75rem 1.5rem;
}

.nav-section {
  margin-bottom: 1.25rem;
}

.nav-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.35rem 0.75rem 0.5rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background var(--transition), color var(--transition);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.nav-link.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.nav-link .nav-icon {
  width: 1.15rem;
  text-align: center;
  opacity: 0.85;
  font-size: 0.95rem;
}

.nav-link .nav-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link .nav-icon-svg svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

.nav-link-badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.nav-link-badge + .nav-link-badge {
  margin-left: 0;
}

.nav-link-badge.is-warn {
  background: var(--warning);
  color: #0a0f1a;
}

.nav-link.active .nav-link-badge {
  background: var(--accent);
  color: #0a0f1a;
}

.nav-link.active .nav-link-badge.is-warn {
  background: var(--warning);
  color: #0a0f1a;
}

.nav-sub {
  padding-left: 0.5rem;
  margin: 0.15rem 0 0.5rem;
}

.nav-sub .nav-link {
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem 0.4rem 2rem;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Desktop: nested shortcuts only when that area is open; no inner scrollbar chrome */
@media (min-width: 1025px) {
  .sidebar-nav {
    padding: 0.65rem 0.7rem 0.85rem;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .nav-section {
    margin-bottom: 0.7rem;
  }

  .nav-section-title {
    padding: 0.2rem 0.7rem 0.35rem;
  }

  .nav-link {
    padding: 0.42rem 0.7rem;
    font-size: 0.855rem;
    gap: 0.55rem;
  }

  .nav-sub {
    display: none;
    margin: 0.1rem 0 0.2rem;
  }

  .nav-link.active + .nav-sub,
  .nav-sub:has(.nav-link.active) {
    display: block;
  }

  .sidebar-footer {
    padding: 0.75rem 1.1rem 0.85rem;
  }
}

.main-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar .landing-translate-btn {
  min-height: 2.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.topbar .landing-translate-btn:hover,
.topbar .landing-translate-btn[aria-expanded="true"],
.topbar .landing-translate-btn.is-active {
  border-color: rgba(184, 240, 0, 0.45);
  background: var(--accent-dim);
}

.topbar .landing-translate-menu {
  z-index: 60;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.user-avatar-img {
  object-fit: cover;
  padding: 0;
  border: 1px solid var(--border);
}

.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.btn-menu span::before,
.btn-menu span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), top var(--transition);
}

.btn-menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--transition);
}

.btn-menu span::before { top: -5px; }
.btn-menu span::after { top: 5px; }

.content {
  flex: 1;
  padding: 1.5rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}

body.sidebar-open .sidebar-overlay {
  display: block;
}

/* Page header */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  font-size: 1.5rem;
  margin: 0;
}

.page-header .subtitle {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.page-actions form {
  margin: 0;
}

.calendar-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.1rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0.9rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.calendar-subscribe p {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.calendar-subscribe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.calendar-subscribe-steps {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.calendar-subscribe-steps li + li {
  margin-top: 0.35rem;
}

.calendar-subscribe-modal .modal-text {
  margin-bottom: 0.7rem;
}

.modal-actions.calendar-subscribe-modal-actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}

.calendar-subscribe-modal-actions .btn {
  width: 100%;
  justify-content: center;
}

.page-actions-equal .btn {
  flex: 1 1 0;
  min-width: 10.5rem;
  justify-content: center;
}

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  min-height: 0;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.kpi-card:hover {
  border-color: rgba(184, 240, 0, 0.35);
  transform: translateY(-1px);
}

a.kpi-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.kpi-card-link:hover .kpi-value {
  color: var(--accent);
}

.kpi-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, var(--accent-dim), transparent 70%);
  pointer-events: none;
}

.kpi-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

.kpi-meta {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.kpi-meta.up { color: var(--success); }
.kpi-meta.down { color: var(--danger); }

.kpi-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1rem;
  z-index: 1;
}

.report-sport-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-sport-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.report-sport-head strong {
  font-size: 0.95rem;
}

.report-sport-head span {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.report-sport-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.report-sport-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
}

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

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

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

.card-body {
  min-width: 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

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

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chart-placeholder {
  height: 220px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(184, 240, 0, 0.08) 0%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(30, 41, 59, 0.5) 40px,
      rgba(30, 41, 59, 0.5) 41px
    ),
    var(--bg-elevated);
  border: 1px dashed var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 1.5rem 1rem 0;
  gap: 0.5rem;
}

.chart-bar {
  flex: 1;
  max-width: 36px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(184, 240, 0, 0.35) 100%);
  opacity: 0.85;
}

.chart-live {
  align-items: stretch;
  height: auto;
  min-height: 240px;
  padding: 1.25rem 0.75rem 0.85rem;
}

.chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.chart-bar-track {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-col .chart-bar {
  width: 100%;
  max-width: 40px;
  min-height: 8px;
  flex: 0 0 auto;
}

.chart-col-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.chart-col-amount {
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.dash-attention {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.hub-plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.95rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hub-plan-card.is-renew {
  border-color: rgba(184, 240, 0, 0.45);
}

.hub-plan-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.hub-plan-title {
  font-weight: 650;
  font-size: 1.02rem;
}

.hub-plan-meta {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hub-plan-meta strong {
  color: var(--text);
  font-weight: 650;
}

.dash-attention-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  flex: 1 1 16rem;
  padding: 0.65rem 1rem;
  background: var(--card);
  border: 1px solid rgba(184, 240, 0, 0.35);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}

.dash-attention-item:only-child {
  flex-basis: 100%;
}

.dash-attention-item:hover {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.dash-attention-item strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent);
}

.dash-attention-item span {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.setup-journey {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.15rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.setup-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.setup-journey-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

.setup-journey-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.setup-journey-meta {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.setup-journey-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-elevated);
  margin-bottom: 1rem;
  overflow: hidden;
}

.setup-journey-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.setup-journey-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

.setup-journey-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.setup-journey-group-head h3 {
  margin: 0;
  font-size: 0.92rem;
}

.setup-journey-group-head span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.setup-journey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.setup-journey-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
}

.setup-journey-item.is-next {
  background: var(--accent-dim);
}

.setup-journey-item.is-done .setup-journey-label {
  color: var(--text-muted);
}

.setup-journey-mark {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.setup-journey-item.is-done .setup-journey-mark {
  color: #07101c;
  background: var(--accent);
  border-color: var(--accent);
}

.setup-journey-item.is-next .setup-journey-mark {
  color: var(--accent);
  border-color: var(--accent);
}

.setup-journey-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.08rem;
}

.setup-journey-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  text-decoration: none;
}

a.setup-journey-label:hover {
  color: var(--accent);
}

.setup-journey-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.setup-dock {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right, 0px));
  /* Sit above pagination / list footers so page controls stay clickable */
  bottom: max(4.75rem, calc(env(safe-area-inset-bottom, 0px) + 3.75rem));
  z-index: 36;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.setup-dock-fab {
  position: relative;
  width: 3.15rem;
  height: 3.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #07101c;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(184, 240, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  animation: setup-dock-float 2.8s ease-in-out infinite;
  will-change: transform;
}

.setup-dock-fab:hover,
.setup-dock-fab[aria-expanded="true"] {
  filter: brightness(1.06);
  animation-play-state: paused;
}

.setup-dock-badge {
  position: absolute;
  top: -0.2rem;
  right: -0.15rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #07101c;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  animation: setup-dock-badge-pulse 2.8s ease-in-out infinite;
}

.setup-dock-fab[aria-expanded="true"] .setup-dock-badge {
  animation-play-state: paused;
}

@keyframes setup-dock-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes setup-dock-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .setup-dock-fab,
  .setup-dock-badge {
    animation: none;
  }
}

.setup-dock-panel {
  width: min(22.5rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: 0.95rem 1rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.setup-dock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.setup-dock-head h2 {
  margin: 0;
  font-size: 1rem;
}

.setup-dock-head p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.setup-dock-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.setup-dock-close:hover {
  color: var(--text);
  background: var(--bg-elevated);
}

.setup-dock-next {
  display: inline-flex;
  margin: 0.65rem 0 0.75rem;
}

.setup-dock-body .setup-journey-group + .setup-journey-group {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.setup-dock-panel .setup-journey-item {
  padding: 0.32rem 0.35rem;
}

.setup-dock-panel .setup-journey-label {
  font-size: 0.86rem;
}

@media (max-width: 800px) {
  .setup-journey-cols {
    grid-template-columns: 1fr;
  }
}

.dash-lower {
  margin-bottom: 1.5rem;
}

.dash-upcoming-card {
  margin-bottom: 0;
}

.age-pie-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.age-pie {
  position: relative;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}

.age-pie-hole {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border: 1px solid var(--border);
}

.age-pie-hole strong {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.age-pie-hole span {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.age-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 14rem;
  overflow-y: auto;
}

.age-pie-legend li {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem 0.55rem;
  font-size: 0.85rem;
}

.age-pie-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.age-pie-legend-label {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.age-pie-legend strong {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@media (max-width: 600px) {
  .age-pie-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .age-pie {
    margin: 0 auto;
  }
}

.coach-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}

.coach-session-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated, var(--card));
  min-height: 100%;
}

.coach-session-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.coach-session-time {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.coach-session-team {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.coach-session-meta {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.coach-session-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.coach-session-meta dt {
  color: var(--text-muted);
  font-weight: 500;
}

.coach-session-meta dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  text-align: right;
}

.coach-session-card > .btn {
  margin-top: auto;
  align-self: flex-start;
}

.coach-session-when-sub {
  margin: -0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.coach-session-card .parent-upcoming-action {
  margin-top: auto;
}

.coach-session-absence {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--text);
}

.coach-session-absence strong {
  font-weight: 600;
}

@media (max-width: 900px) {
  .grid-2.dash-lower {
    grid-template-columns: 1fr;
  }
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

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

.payment-fee-table th.num,
.payment-fee-table td.num {
  text-align: center;
}

#gateway-fee .table-wrap {
  margin: 0.35rem 0 0.15rem;
}

#gateway-fee .payment-fee-table {
  font-size: 0.84rem;
}

#gateway-fee .payment-fee-table th,
#gateway-fee .payment-fee-table td {
  padding: 0.55rem 0.75rem;
}

#gateway-fee .payment-fee-table td:first-child {
  white-space: normal;
}

.data-table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%);
}

html[data-theme="light"] .data-table th {
  color: var(--text);
  background: #e8edf5;
}

.data-table tbody tr {
  transition: background var(--transition);
}

.data-table tbody tr:hover {
  background: var(--accent-dim);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tfoot td {
  padding: 0.85rem 1rem;
  font-weight: 600;
  border-top: 1px solid var(--border);
  background: rgba(15, 21, 34, 0.6);
}

.data-table .paid-method-total td {
  color: var(--accent);
}

.data-table .login-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  white-space: nowrap;
}

.detail-list dd.login-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

.data-table td.actions {
  width: 1%;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table td.actions > * + * {
  margin-left: 0.35rem;
}

.data-table td.actions form,
.mobile-card-actions form {
  display: inline-flex;
  vertical-align: middle;
  margin: 0;
}

.matches-list-card {
  max-width: 100%;
  min-width: 0;
}

.matches-list-card > .empty-state {
  margin: 0;
  padding: 1.5rem 1.15rem;
}

.training-row-status {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  justify-self: start;
  padding-right: 0.85rem;
}

.training-row-status .match-row-score {
  justify-self: auto;
  margin: 0;
}

.event-list {
  grid-template-columns: 8.5rem minmax(8rem, 1fr) minmax(14rem, auto);
}

.event-list .match-list-head,
.event-list .match-row {
  grid-template-columns: 8.5rem minmax(8rem, 1fr) minmax(14rem, auto);
  column-gap: 1.35rem;
}

.event-list .match-row-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.match-list.tournament-list,
.match-list.tournament-list .match-list-head,
.match-list.tournament-list .match-row {
  grid-template-columns: 8.5rem minmax(8rem, 1fr) auto max-content;
}

.tournament-list .match-row-tools {
  flex-wrap: nowrap;
  gap: 0.4rem;
}

.tournament-row-delete {
  display: flex;
  margin: 0;
}

.tournament-poster-link {
  display: block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.tournament-poster-link:hover,
.tournament-poster-link:focus {
  text-decoration: underline;
}

.match-row-meta.training-cancel-note {
  color: var(--danger);
}

.event-list .match-row-time {
  white-space: normal;
}

.match-list {
  display: grid;
  grid-template-columns: 8.5rem minmax(8rem, 1fr) 7.25rem 9.75rem;
  column-gap: 1rem;
}

.match-list-scores {
  grid-template-columns: 8.5rem minmax(8rem, 1fr) 7.25rem 8.75rem 9.75rem;
}

.match-list-head,
.match-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 8.5rem minmax(8rem, 1fr) 7.25rem 9.75rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border);
}

.match-list-scores .match-list-head,
.match-list-scores .match-row {
  grid-template-columns: 8.5rem minmax(8rem, 1fr) 7.25rem 8.75rem 9.75rem;
}

@supports (grid-template-columns: subgrid) {
  .match-list-head,
  .match-row,
  .match-list-scores .match-list-head,
  .match-list-scores .match-row {
    grid-template-columns: subgrid;
  }
}

.match-list-head {
  padding: 0.7rem 1.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(15, 21, 34, 0.6);
}

.match-list-head .match-row-when {
  display: block;
  text-align: center;
}

.match-list-head .match-row-status,
.match-list-head .match-row-score {
  justify-self: stretch;
  width: auto;
  text-align: center;
  letter-spacing: 0.04em;
}

.match-row:last-child {
  border-bottom: 0;
}

.match-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.match-row-when {
  flex: 0 0 8.5rem;
  width: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}

.match-row-day {
  font-family: Outfit, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
}

.match-row-month {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

.match-row-time {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.match-row-body {
  min-width: 0;
}

.match-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.match-row-vs {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: lowercase;
  color: var(--text-muted);
}

.match-row-meta {
  margin: 0.28rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.match-row-status {
  justify-self: center;
  width: max-content;
  text-align: center;
}

.match-row-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  justify-self: end;
}

.match-row-score {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  justify-self: center;
}

.match-row-score input[type="number"] {
  width: 3.35rem;
  min-width: 0;
}

.mobile-card-actions form {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-card-actions form .btn {
  width: 100%;
}

.card:has(> .table-wrap:first-child) {
  padding: 0;
  overflow: hidden;
}

.card:has(> .table-wrap:first-child) > .table-wrap {
  border: 0;
  border-radius: 0;
}

.list-card {
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}

.list-card > .table-wrap {
  border: 0;
  border-radius: 0;
}

/* Coaches / staff lists: stable columns, no page sideways scroll */
.staff-list-card {
  max-width: 100%;
  min-width: 0;
}

.staff-data-table {
  table-layout: fixed;
  width: 100%;
}

.staff-data-table th,
.staff-data-table td {
  vertical-align: middle;
}

.staff-data-table col.staff-col-name,
.staff-data-table .staff-col-name {
  width: 22%;
}

.staff-data-table col.staff-col-email,
.staff-data-table .staff-col-email {
  width: 20%;
}

.staff-data-table col.staff-col-teams,
.staff-data-table .staff-col-teams {
  width: 22%;
}

.staff-data-table col.staff-col-phone,
.staff-data-table .staff-col-phone {
  width: 8.25rem;
}

.staff-data-table col.staff-col-status,
.staff-data-table .staff-col-status {
  width: 5.25rem;
}

.staff-data-table col.staff-col-actions,
.staff-data-table .staff-col-actions,
.staff-data-table td.actions.staff-col-actions {
  width: 11.5rem;
}

.staff-data-table td.staff-col-email,
.staff-data-table td.staff-col-teams {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.staff-data-table th.staff-col-phone,
.staff-data-table td.staff-col-phone {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

.staff-data-table th.staff-col-status,
.staff-data-table td.staff-col-status {
  white-space: nowrap;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.staff-data-table td.actions.staff-col-actions {
  text-align: right;
  white-space: normal;
}

.staff-data-table td.actions.staff-col-actions > * {
  margin: 0;
}

.staff-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.staff-row-actions-form {
  display: inline-flex;
  margin: 0;
}

.staff-data-table .person-name-text {
  white-space: normal;
  overflow-wrap: break-word;
}

.staff-data-table td.staff-col-name .person-name-link {
  min-width: 0;
}

.list-card-toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.list-card-toolbar form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  width: 100%;
}

.list-card-toolbar .form-select {
  max-width: 12rem;
}

.list-card-toolbar .search {
  flex: 1 1 14rem;
  min-width: 10rem;
  max-width: 22rem;
}

.list-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
}

.list-card-count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.hub-pager {
  margin: 0;
}

.hub-pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-pager-list a,
.hub-pager-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.hub-pager-list a:hover {
  border-color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
}

.hub-pager-list .is-active {
  background: var(--accent-dim);
  border-color: rgba(184, 240, 0, 0.35);
  color: var(--accent);
}

.list-card-empty {
  margin: 0;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
}

.invoice-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  white-space: nowrap;
  max-width: 100%;
}

.invoice-row-actions > .btn-pdf,
.invoice-row-actions > .invoice-pay-form {
  margin: 0;
  flex-shrink: 0;
}

.invoice-row-actions > .btn-pdf {
  height: 2.05rem;
  padding: 0 0.6rem;
  font-size: 0.8rem;
  line-height: 1;
}

.invoice-pay-form {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  vertical-align: middle;
  justify-content: flex-end;
  white-space: nowrap;
}

.invoice-pay-form .form-select {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
  height: 2.05rem;
  margin: 0;
  padding: 0 1.5rem 0 0.55rem;
  font-size: 0.8rem;
  line-height: 2.05rem;
  border-radius: 0.45rem;
}

.invoice-pay-form .invoice-pay-submit {
  flex: 0 0 auto;
  min-width: 5.75rem;
  height: 2.05rem;
  margin: 0;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0.45rem;
}

.invoice-pay-form:not(:has(select)) .btn {
  height: 2.05rem;
  padding: 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1;
  border-radius: 0.45rem;
  white-space: nowrap;
}

/* Invoices list — fit viewport, no sideways scroll */
.invoices-page .invoices-table-wrap {
  overflow-x: hidden;
}

.invoices-list-table {
  table-layout: fixed;
  width: 100%;
}

.invoices-list-table th,
.invoices-list-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

.invoices-list-table col.inv-col-check,
.invoices-list-table .inv-col-check {
  width: 2rem;
}

.invoices-list-table col.inv-col-invoice,
.invoices-list-table .inv-col-invoice {
  width: 15%;
}

.invoices-list-table col.inv-col-player,
.invoices-list-table .inv-col-player {
  width: 22%;
}

.invoices-list-table col.inv-col-parent,
.invoices-list-table .inv-col-parent {
  width: 15%;
}

.invoices-list-table col.inv-col-amount,
.invoices-list-table .inv-col-amount {
  width: 9.5rem;
}

.invoices-list-table col.inv-col-status,
.invoices-list-table .inv-col-status {
  width: 8.5rem;
}

.invoices-list-table col.inv-col-actions,
.invoices-list-table .inv-col-actions,
.invoices-list-table td.actions.inv-col-actions {
  width: 17.5rem;
}

.invoices-list-table .inv-meta {
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 0.15rem;
}

.invoices-list-table td.actions.inv-col-actions {
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.invoices-list-table td.inv-col-amount {
  white-space: normal;
  overflow-wrap: anywhere;
}

.invoices-list-table td.inv-col-amount .fw-600 {
  white-space: nowrap;
}

.invoices-list-table .inv-discount-line {
  font-size: 0.75rem;
  line-height: 1.3;
  margin-top: 0.15rem;
  max-width: 9.5rem;
}

.invoices-list-table td.inv-col-status {
  white-space: normal;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.invoices-list-table td.inv-col-status .badge {
  max-width: 100%;
  flex-shrink: 0;
}

.invoices-list-table td.inv-col-status .inv-meta {
  white-space: normal;
  overflow-wrap: anywhere;
}

.invoices-page tr.is-selected-month td,
tr.is-selected-month td {
  background: rgba(184, 240, 0, 0.06);
}

.inv-waived-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.inv-waive-note {
  font-size: 0.78rem;
  line-height: 1.25;
}

.badge-inv-kind {
  font-size: 0.58rem;
  padding: 0.05rem 0.28rem;
  line-height: 1.15;
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
}

.inv-month {
  font-size: 0.78rem;
  font-weight: 400;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text-muted);
}

.empty-state p {
  margin-bottom: 1rem;
}

.location-table-meta {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.place-map-links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.place-map-links--compact {
  margin-top: 0.25rem;
}

.place-map-links a {
  font-weight: 600;
}

tr.is-inactive-row td,
.mobile-card.is-inactive-row {
  opacity: 0.72;
}

tr.is-inactive-row .fw-600 {
  font-weight: 500;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}

a.badge {
  text-decoration: none;
}

a.badge:hover {
  filter: brightness(0.97);
}

.badge-success,
.badge-active,
.badge-paid {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warning,
.badge-trial,
.badge-pending {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-danger,
.badge-suspended,
.badge-overdue,
.badge-cancelled {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-info,
.badge-draft {
  background: var(--info-bg);
  color: var(--info);
}

.badge-waived {
  background: var(--info-bg);
  color: var(--info);
}

.badge-muted,
.badge-inactive {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
}

.badge-lime {
  background: var(--accent-dim);
  color: var(--accent);
}

.player-levels-editor {
  display: grid;
  gap: 0.5rem;
}

.player-levels-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.player-levels-order {
  display: inline-flex;
  gap: 0.15rem;
}

.player-levels-order .btn {
  min-width: 2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.player-levels-usage {
  min-width: 5.5rem;
  font-size: 0.85rem;
}

.player-pack-cell {
  display: grid;
  gap: 0.28rem;
  min-width: 8.5rem;
  max-width: 12rem;
}

.player-pack-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-pack-meter {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.player-pack-meter-track {
  flex: 1 1 auto;
  min-width: 2.75rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}

.player-pack-meter-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #84cc16);
  transition: width 0.2s ease;
}

.player-pack-cell--warn .player-pack-meter-bar {
  background: var(--warning, #f59e0b);
}

.player-pack-cell--full .player-pack-meter-bar,
.player-pack-cell--over .player-pack-meter-bar {
  background: var(--danger, #ef4444);
}

.player-pack-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.player-pack-cell--ok .player-pack-count {
  color: var(--text);
}

.player-pack-cell--warn .player-pack-count {
  color: var(--warning, #f59e0b);
}

.player-pack-cell--full .player-pack-count,
.player-pack-cell--over .player-pack-count {
  color: var(--danger, #ef4444);
}

.player-pack-meter--plain .player-pack-count {
  font-weight: 500;
}

.mobile-card-row--stack .player-pack-cell {
  max-width: none;
  width: 100%;
}

.player-levels-row .form-control {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.level-select-form {
  margin: 0;
  display: inline-flex;
}

.level-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  max-width: 7.5rem;
  min-width: 5.75rem;
  margin: 0;
  padding: 0.22rem 1.35rem 0.22rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg-elevated, transparent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2394a3b8' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 8px 5px;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.level-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.coaching-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coaching-item {
  padding: 1.15rem 1.25rem;
}

.coaching-item-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.coaching-item-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.coaching-item-sub {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}

.coaching-item-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
}

.coaching-meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.15rem;
}

.coaching-item-note {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
}

.coaching-accept {
  margin: 0;
}

.coaching-accept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.coaching-accept-grid .form-group {
  margin-bottom: 0;
}

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

.coaching-decline {
  display: none;
}

@media (max-width: 900px) {
  .coaching-accept-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .coaching-accept-grid {
    grid-template-columns: 1fr;
  }
}

.badge-sm,
.person-name-text .badge,
.person-name-cell .badge,
.mobile-card-title .badge {
  padding: 0.08rem 0.38rem;
  font-size: 0.62rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1.3;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: #0a0f1a;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-alt);
  color: #0a0f1a;
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

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

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  padding: 0.45rem 0.75rem;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--accent-dim);
}

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-logout svg {
  display: block;
  flex-shrink: 0;
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: transparent;
}

.btn-danger:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #fecaca;
}

.btn-pending {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: var(--warning);
}

.btn-pending:hover {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
  border-color: var(--warning);
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

/* Modal */
body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(7, 11, 20, 0.72);
  backdrop-filter: blur(6px);
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.35rem 1.4rem 1.25rem;
}

.modal-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.modal-text {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.modal-actions .btn {
  text-decoration: none;
}

.modal-bank:empty {
  display: none;
}

.modal-form .form-group {
  margin-bottom: 0.85rem;
}

.modal-form .modal-actions {
  margin-top: 1.15rem;
}

.modal-backdrop[data-parent-kit-modal] {
  z-index: 330;
}

.parent-kit-modal {
  max-width: 28rem;
  max-height: min(85vh, 40rem);
  overflow: auto;
}

[data-parent-kit-error] {
  color: var(--danger);
  margin-top: -0.5rem;
}

.parent-kit-modal .parent-kit-block + .parent-kit-block {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.parent-kit-form {
  margin-top: 0.75rem;
}

#kit .parent-kit-block + .parent-kit-block {
  margin-top: 1.25rem;
}

.fee-family-trigger {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.fee-family-trigger .btn {
  justify-self: start;
}

.fee-family-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.02);
}

.fee-family-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.fee-family-panel__head strong {
  display: block;
  margin-bottom: 0.2rem;
}

.fee-family-panel__head .btn {
  flex: 0 0 auto;
}

.fee-family-summary-table {
  width: 100%;
  max-width: 18rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fee-family-summary-table--inline {
  max-width: 14rem;
  font-size: 0.84rem;
}

.fee-family-summary-table th,
.fee-family-summary-table td {
  padding: 0.4rem 0.85rem 0.4rem 0;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.fee-family-summary-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fee-family-summary-table td:last-child,
.fee-family-summary-table th:last-child {
  padding-right: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.fee-family-summary-table tbody tr:last-child td {
  border-bottom: none;
}

.fee-plan-sibling-cell {
  min-width: 8.5rem;
}

.mobile-card-row--block {
  display: grid;
  gap: 0.35rem;
}

.mobile-card-row--block > span:first-child {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.fee-family-modal {
  max-width: 420px;
  max-height: min(90vh, 720px);
  overflow: auto;
}

.fee-family-edit-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.fee-family-edit-table th,
.fee-family-edit-table td {
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.fee-family-edit-table th {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
}

.fee-family-edit-table th:last-child,
.fee-family-edit-table td:last-child {
  width: 58%;
}

.fee-family-edit-table tbody tr:last-child td {
  border-bottom: none;
}

.fee-family-edit-table label {
  margin: 0;
  font-weight: 600;
}

.fee-family-edit-table .form-control {
  width: 100%;
}

.fee-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 0 0 1.15rem;
}

.fee-family-grid .form-group {
  margin: 0;
}

@media (max-width: 520px) {
  .fee-family-grid {
    grid-template-columns: 1fr;
  }

  .fee-family-panel__head {
    flex-direction: column;
  }
}

.payout-dir-table td {
  white-space: normal;
  vertical-align: top;
}

.payout-dir-table td.payout-dir-settle {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
}

/* Coach assessment form — full-width, fit content area */
.assessment-create-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.assessment-create-header {
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.assessment-create-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.assessment-create-heading .subtitle {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.assessment-create-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.1rem 1.15rem;
}

.assessment-meta-grid {
  margin-bottom: 0.35rem;
}

.assessment-score-legend {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
}

.assessment-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.assessment-category {
  margin: 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
}

.assessment-categories > .assessment-category:first-child {
  border-top: 0;
  padding-top: 0.35rem;
}

.assessment-category-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.assessment-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1rem;
}

.assessment-skill-row {
  display: grid;
  grid-template-columns: 1fr 4.75rem;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.assessment-skill-row label {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assessment-skill-row .form-select {
  min-width: 0;
  width: 100%;
}

.assessment-notes-grid {
  gap: 0.75rem 1rem;
}

.assessment-notes-grid .form-control {
  min-height: 0;
  resize: vertical;
}

.assessment-create-card .form-actions {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.assessment-preview-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.assessment-preview-fieldset[disabled] {
  opacity: 1;
}

.assessment-preview-fieldset[disabled] .form-select {
  cursor: default;
  pointer-events: none;
}

.assessment-notes {
  font-size: 0.9rem;
  white-space: pre-wrap;
  line-height: 1.45;
}

@media (min-width: 1100px) {
  .assessment-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }

  .assessment-categories > .assessment-category:nth-child(-n+2) {
    border-top: 0;
    padding-top: 0.35rem;
  }

  .assessment-notes-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .assessment-create-header {
    margin-bottom: 0.75rem;
  }

  .assessment-create-heading h1 {
    font-size: 1.2rem;
  }

  .assessment-create-heading .subtitle {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .assessment-create-card {
    padding: 0.9rem;
  }

  .assessment-skills {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .assessment-meta-grid,
  .assessment-notes-grid {
    grid-template-columns: 1fr;
  }

  .assessment-skill-row {
    grid-template-columns: 1fr 4.5rem;
  }
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem 1.25rem;
}

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

.form-grid > .form-group {
  margin-bottom: 0;
}

.place-fields {
  display: contents;
}

.place-fields > script {
  display: none;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
}

.form-group[hidden],
[data-opt-in-details][hidden],
[data-venue-other-wrap][hidden] {
  display: none !important;
}

[data-opt-in-details]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}

.form-control,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control[readonly],
.form-control:disabled {
  color: var(--text-muted);
  cursor: default;
}

.fee-country-table {
  max-height: 22rem;
  overflow: auto;
}

.fee-country-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.fee-country-ccy {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  min-width: 2.4rem;
}

.fee-country-table .form-control {
  width: 7.5rem;
  padding: 0.45rem 0.6rem;
}

/* Native date inputs — calendar icon matches theme */
input.form-control[type="date"],
input.form-control[type="datetime-local"],
input.form-control[type="month"],
input.form-control[type="week"],
input.form-control[type="time"] {
  min-height: 2.75rem;
  cursor: pointer;
  color-scheme: dark;
}

html[data-theme="light"] input.form-control[type="date"],
html[data-theme="light"] input.form-control[type="datetime-local"],
html[data-theme="light"] input.form-control[type="month"],
html[data-theme="light"] input.form-control[type="week"],
html[data-theme="light"] input.form-control[type="time"] {
  color-scheme: light;
}

input.form-control[type="date"]::-webkit-calendar-picker-indicator,
input.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
input.form-control[type="month"]::-webkit-calendar-picker-indicator,
input.form-control[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.15rem;
  margin-left: 0.35rem;
  /* Explicit white calendar (avoid invert — dark color-scheme icons are already light) */
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem 1.1rem;
  /* Hide browser default glyph; keep hit area */
  color: transparent;
  filter: none;
  -webkit-appearance: none;
  appearance: none;
}

html[data-theme="light"] input.form-control[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input.form-control[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input.form-control[type="week"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

input.form-control[type="date"]::-webkit-calendar-picker-indicator:hover,
input.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input.form-control[type="month"]::-webkit-calendar-picker-indicator:hover,
input.form-control[type="week"]::-webkit-calendar-picker-indicator:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8f000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  opacity: 1;
}

input.form-control[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  filter: none;
}

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.phone-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.phone-field:focus-within {
  border-color: rgba(184, 240, 0, 0.5);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.phone-field-dial,
.phone-field-local {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  min-height: 2.85rem;
}

.phone-field-dial {
  flex: 0 0 auto;
  width: auto;
  min-width: 5.75rem;
  max-width: 7.5rem;
  padding: 0.75rem 0.5rem 0.75rem 0.85rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 0.65rem;
  padding-right: 1.35rem;
}

.phone-field-sep {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 0.55rem 0;
  background: var(--border);
}

.phone-field-local {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 0.75rem 0.95rem;
}

.phone-field-dial:focus,
.phone-field-local:focus {
  outline: none;
  box-shadow: none;
}

.password-field .form-control {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--text);
  background: rgba(11, 31, 58, 0.06);
  outline: none;
}

.password-toggle[aria-pressed="true"] {
  color: var(--navy, #0b1f3a);
}

.password-toggle-icon {
  display: block;
  pointer-events: none;
}

.password-meter {
  margin-top: 0;
}

.password-meter.is-empty .password-meter-label {
  opacity: 0.65;
}

.password-meter-track {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}

.password-meter-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--danger, #ef4444);
  transition: width 180ms ease, background-color 180ms ease;
}

.password-meter[data-level="1"] .password-meter-bar { background: #ef4444; }
.password-meter[data-level="2"] .password-meter-bar { background: #f59e0b; }
.password-meter[data-level="3"] .password-meter-bar { background: #38bdf8; }
.password-meter[data-level="4"] .password-meter-bar { background: #84cc16; }

.password-meter[data-level="1"] .password-meter-label strong { color: #ef4444; }
.password-meter[data-level="2"] .password-meter-label strong { color: #f59e0b; }
.password-meter[data-level="3"] .password-meter-label strong { color: #38bdf8; }
.password-meter[data-level="4"] .password-meter-label strong { color: #84cc16; }

.password-meter-label {
  margin: 0.35rem 0 0;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(184, 240, 0, 0.5);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-textarea {
  min-height: 110px;
  resize: vertical;
}

.form-textarea-doc {
  min-height: 28rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0.4rem 0 0;
}

.trial-share-card .trial-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.trial-share-card .trial-share-row .form-control {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 0.88rem;
}

.trial-share-card .trial-share-row .btn {
  flex: 0 0 auto;
}

.form-section-divider {
  margin: 1.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.form-section-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.detail-list {
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.detail-list > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
}

.detail-list dt {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.detail-list dd {
  margin: 0;
  font-size: 0.92rem;
  word-break: break-word;
}

.super-academy-heading {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}

.super-academy-heading > div {
  min-width: 0;
}

.super-academy-heading h1 {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.super-academy-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 0.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .detail-list > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.emoji-picker-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.emoji-picker-input {
  max-width: 12rem;
  font-size: 1.35rem;
  text-align: center;
}

.emoji-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.65rem, 1fr));
  gap: 0.4rem;
  padding: 0.75rem;
  background:
    linear-gradient(180deg, rgba(184, 240, 0, 0.04) 0%, transparent 40%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 240px;
  overflow-y: auto;
}

.emoji-picker-btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--card);
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  width: 100%;
  aspect-ratio: 1;
  min-height: 2.65rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.emoji-picker-btn:hover {
  border-color: rgba(184, 240, 0, 0.35);
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.emoji-picker-btn.is-selected {
  background: var(--accent-dim);
  border-color: rgba(184, 240, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(184, 240, 0, 0.2);
}

.sport-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.sport-form-card .card-header {
  margin-bottom: 1rem;
}

.sport-form-lead {
  margin: -0.35rem 0 0.85rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.slug-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
}

.slug-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  border-right: 1px solid var(--border);
  background: rgba(15, 21, 34, 0.7);
}

.slug-input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.status-toggle {
  display: grid;
  gap: 0.65rem;
}

.status-option {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.status-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.status-option:hover {
  border-color: rgba(184, 240, 0, 0.35);
}

.status-option.is-active {
  border-color: rgba(184, 240, 0, 0.55);
  background: var(--accent-dim);
}

.status-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gateway-current {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.gateway-current strong {
  color: var(--accent);
}

.status-option-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.status-option-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sport-preview-card {
  position: sticky;
  top: calc(var(--topbar-h) + 1rem);
}

.sport-preview-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(184, 240, 0, 0.1) 0%, transparent 55%),
    var(--bg-elevated);
  margin-bottom: 0.85rem;
}

.sport-preview-emoji {
  font-size: 2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}

.sport-preview-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.sport-form-actions {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.sport-form-actions .btn-block {
  width: 100%;
}

.assess-editor {
  display: grid;
  gap: 0.85rem;
}

.assess-editor-cat {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  display: grid;
  gap: 0.75rem;
}

.assess-editor-cat-head {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
}

@media (max-width: 900px) {
  .sport-form-layout {
    grid-template-columns: 1fr;
  }

  .sport-preview-card {
    position: static;
  }
}

.form-error {
  font-size: 0.8rem;
  color: var(--danger);
}

.form-control.is-invalid,
.phone-field-local.is-invalid {
  border-color: var(--danger);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.fee-bearer-choice {
  display: grid;
  gap: 0.65rem;
}

.fee-bearer-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

.fee-bearer-option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.fee-bearer-option-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.fee-bearer-option.is-chosen,
.fee-bearer-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.fee-bearer-choice.is-locked .fee-bearer-option {
  cursor: default;
}

.fee-bearer-choice.is-locked .fee-bearer-option.is-chosen {
  border-color: var(--success);
  background: var(--success-bg);
}

.fee-bearer-choice.is-locked .fee-bearer-option:not(.is-chosen) {
  opacity: 0.48;
}

.coach-team-assign {
  display: grid;
  gap: 0.45rem;
  max-height: 16rem;
  overflow: auto;
}

.coach-team-assign-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.coach-team-assign-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.coach-team-assign-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-team-assign-role {
  flex: 0 0 9.5rem;
  max-width: 9.5rem;
}

/* Searchable player multi-select (parents / admins) */
.player-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 0.75rem;
}

.player-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.player-picker-search {
  flex: 1;
  min-width: 160px;
}

.player-picker-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.player-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.player-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(11, 31, 58, 0.08);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
}

.player-picker-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.player-picker-chip button:hover {
  background: rgba(11, 31, 58, 0.1);
  color: var(--text);
}

.player-picker-list {
  display: grid;
  gap: 0.15rem;
  max-height: 280px;
  overflow: auto;
  padding-right: 0.15rem;
}

.player-picker-row {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.player-picker-row:hover {
  background: rgba(11, 31, 58, 0.04);
}

.player-picker-row.is-checked {
  background: rgba(184, 240, 0, 0.12);
}

.player-picker-row.is-hidden {
  display: none;
}

.player-picker-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.player-picker-row-name {
  color: var(--text);
  font-weight: 500;
}

.player-picker-row-meta {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.player-picker-empty {
  margin: 0.75rem 0.25rem;
  font-size: 0.875rem;
}

.search-select {
  position: relative;
}

.search-select.is-ready select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-select-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 16rem;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.search-select-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.search-select-option:hover,
.search-select-option.is-active {
  background: var(--bg-elevated);
}

.search-select-empty {
  margin: 0;
  padding: 0.7rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

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

.toolbar-filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.toolbar .search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.toolbar-select {
  max-width: 160px;
  min-width: 0;
  width: auto;
  flex: 0 1 160px;
}

.import-team-names {
  columns: 2;
  gap: 1rem;
}

.import-team-names li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
  word-break: break-word;
}

/* Flash */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.flash {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.9rem;
}

.flash-success {
  background: var(--success-bg);
  border-color: rgba(74, 222, 128, 0.3);
  color: var(--success);
}

.flash-error,
.flash-danger {
  background: var(--danger-bg);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--danger);
}

.flash-warning {
  background: var(--warning-bg);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--warning);
}

.flash-info {
  background: var(--info-bg);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--info);
}

.flash-dismiss {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.flash-dismiss:hover {
  opacity: 1;
}

.billing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
}

.billing-banner a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.billing-banner-info {
  background: rgba(56, 189, 248, 0.12);
  color: var(--text);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.billing-banner-warn {
  background: rgba(251, 191, 36, 0.12);
  color: var(--text);
  border: 1px solid rgba(251, 191, 36, 0.35);
}

.billing-banner-danger {
  background: var(--danger-bg);
  color: var(--text);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.billing-banner a {
  color: var(--accent);
}

/* Notification bell */
.notif-bell {
  position: relative;
}

.notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
}

.notif-bell-btn.has-alerts {
  border-color: rgba(251, 191, 36, 0.55);
  color: var(--warning);
}

.notif-bell-btn:hover,
.notif-bell-btn[aria-expanded="true"] {
  border-color: rgba(184, 240, 0, 0.45);
  background: var(--accent-dim);
  color: var(--text);
}

.notif-bell-icon {
  display: block;
}

.notif-bell-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.notif-bell-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 2rem));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.notif-bell-head {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 1rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.notif-bell-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
}

.notif-bell-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.notif-bell-tab.is-active {
  background: var(--accent-dim);
  border-color: rgba(184, 240, 0, 0.45);
  color: var(--text);
}

.notif-bell-empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.notif-bell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
}

.notif-bell-item a {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.notif-bell-item a:hover {
  background: var(--accent-dim);
  color: var(--text);
}

.notif-bell-item strong {
  font-size: 0.9rem;
}

.notif-bell-item span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.notif-bell-item em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--accent);
}

.notif-bell-item--warn a,
.notif-bell-item--danger a {
  border-left: 3px solid var(--warning);
}

.notif-bell-item--danger a {
  border-left-color: var(--danger);
}

.notif-bell-item.is-read a {
  opacity: 0.62;
}

.notif-bell-item.is-read em {
  color: var(--text-muted);
}

.notif-bell-footer {
  display: block;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.notif-bell-footer:hover {
  background: var(--accent-dim);
}
button.notif-bell-footer {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.academy-share-hint {
  margin: 0;
  padding: 0.15rem 1rem 0.7rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.academy-share-panel {
  width: min(20.5rem, calc(100vw - 1.5rem));
}

.share-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.share-bar--icons-only {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.share-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.academy-share-panel .share-bar {
  padding: 0 1rem 1rem;
}

.share-bar-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.share-icon {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), background var(--transition), filter var(--transition);
}

.share-icon:hover {
  transform: translateY(-1px);
  color: #fff;
}

.share-icon.is-wa,
.share-icon.is-wa:hover { background: #128c7e; border-color: #0e7a6e; color: #fff; }
.share-icon.is-fb,
.share-icon.is-fb:hover { background: #1877f2; border-color: #166fe5; color: #fff; }
.share-icon.is-tg,
.share-icon.is-tg:hover { background: #229ed9; border-color: #1b8fc7; color: #fff; }
.share-icon.is-x,
.share-icon.is-x:hover { background: #111827; border-color: #1f2937; color: #fff; }
.share-icon.is-li,
.share-icon.is-li:hover { background: #0a66c2; border-color: #004182; color: #fff; }
.share-icon.is-em,
.share-icon.is-em:hover { background: #4b5563; border-color: #374151; color: #fff; }
.share-icon.is-ig,
.share-icon.is-ig:hover { background: #e1306c; border-color: #c13584; color: #fff; }
.share-icon.is-tt,
.share-icon.is-tt:hover { background: #111827; border-color: #1f2937; color: #fff; }
.share-icon.is-yt,
.share-icon.is-yt:hover { background: #ff0000; border-color: #cc0000; color: #fff; }
.share-icon.is-web,
.share-icon.is-web:hover { background: #0f766e; border-color: #0d9488; color: #fff; }

.share-icon.is-copy,
.share-icon:not([class*="is-"]) {
  color: var(--accent);
  border-color: rgba(184, 240, 0, 0.35);
  background: var(--accent-dim);
}

.share-icon.is-copy:hover,
.share-icon:not([class*="is-"]):hover {
  color: var(--accent);
  border-color: rgba(184, 240, 0, 0.55);
  background: rgba(184, 240, 0, 0.2);
}

.share-icon.is-copied {
  border-color: var(--accent);
  background: rgba(184, 240, 0, 0.22);
  color: var(--accent);
}

.share-icon-check {
  display: none;
}

.share-icon.is-copied .share-icon-copy {
  display: none;
}

.share-icon.is-copied .share-icon-check {
  display: block;
}

.share-bar-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.share-bar-field {
  display: flex;
  align-items: stretch;
  flex: 1 1 14rem;
  min-width: 11rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.share-bar-field:focus-within {
  border-color: rgba(184, 240, 0, 0.45);
}

.share-bar-field .form-control {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.share-bar-copy {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 0.85rem;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--accent-dim);
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.share-bar-copy:hover {
  background: rgba(184, 240, 0, 0.2);
}

.share-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
}

.share-bar-actions .btn {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.academy-share-panel .share-bar-link {
  flex-direction: column;
  align-items: stretch;
}

.academy-share-panel .share-bar-field {
  width: 100%;
  min-width: 0;
}

.academy-share-panel .share-bar-actions {
  margin-left: 0;
  width: 100%;
  justify-content: flex-end;
}

.trial-share-card .share-bar {
  margin-bottom: 0.85rem;
}

.trial-share-card .share-bar-link {
  max-width: none;
}

.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;
}

.portal-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  margin-right: 0.35rem;
}

.portal-switch-select,
.academy-switch-select {
  display: none;
}

.portal-switch-select-input,
.academy-switch-select-input {
  width: auto;
  max-width: 9.5rem;
  min-height: 2.15rem;
  padding: 0.28rem 1.75rem 0.28rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.portal-switch-form {
  display: inline;
  margin: 0;
}

.portal-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

button.portal-chip {
  font-family: inherit;
}

.portal-chip:hover {
  color: var(--text);
  border-color: rgba(11, 31, 58, 0.25);
}

.portal-chip.active {
  background: var(--navy, #0b1f3a);
  border-color: var(--navy, #0b1f3a);
  color: #b8f000;
  cursor: default;
}

.academy-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  margin-right: 0.35rem;
  max-width: min(280px, 42vw);
}

.academy-switch-form {
  display: inline;
  margin: 0;
}

.academy-chip {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

button.academy-chip {
  font-family: inherit;
}

.academy-chip:hover {
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.45);
}

.academy-chip.active {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  color: #7dd3fc;
  cursor: default;
}

.billing-cycle-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cycle-option {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  position: relative;
  opacity: 0.62;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.cycle-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cycle-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.cycle-selected-tag {
  display: none;
  flex: 0 0 auto;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #0b1f3a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cycle-option.active,
.cycle-option:has(input:checked) {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
  background: var(--accent-dim);
}

.cycle-option.active .cycle-selected-tag,
.cycle-option:has(input:checked) .cycle-selected-tag {
  display: inline-flex;
}

.cycle-option.active .cycle-label,
.cycle-option:has(input:checked) .cycle-label,
.cycle-option.active .cycle-price,
.cycle-option:has(input:checked) .cycle-price {
  color: var(--accent);
}

.cycle-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.cycle-price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}

.cycle-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.checkout-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.checkout-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.checkout-amount span {
  color: inherit;
}

.promo-apply {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.promo-apply-field {
  flex: 1 1 180px;
  min-width: 0;
}

.promo-apply-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.promo-apply-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fee-row.fee-discount strong {
  color: var(--accent, #b8f000);
}

.checkout-policy {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-dim);
}

.card > .checkout-policy:first-child {
  margin-top: 0;
}

.sub-dates-card .card-header {
  align-items: center;
}

.sub-dates-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.sub-date-item {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.sub-date-item.is-focus {
  border-color: rgba(184, 240, 0, 0.45);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.sub-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.sub-date-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.sub-date-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .sub-dates-grid {
    grid-template-columns: 1fr;
  }
}

.plan-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.plan-compare-card {
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.plan-compare-card.is-current {
  border-color: rgba(184, 240, 0, 0.5);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.plan-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.plan-compare-head h3 {
  margin: 0;
  font-size: 1.1rem;
}

.plan-compare-price {
  font-size: 1.15rem;
  font-weight: 700;
}

.plan-compare-price span {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
}

.plan-compare-billing {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.plan-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.88rem;
}

.plan-compare-list + .plan-compare-list {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.plan-compare-list li::before {
  content: "✓ ";
  color: var(--accent, #b8f000);
}

.plan-compare-list li.is-muted::before {
  content: "• ";
  color: var(--text-muted);
}

.plan-cycle-toggle {
  display: inline-flex;
  margin: 0 0 1rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  gap: 0.15rem;
}

.plan-cycle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

.plan-cycle-btn.is-on {
  background: var(--accent);
  color: #0b1f3a;
}

@media (max-width: 560px) {
  .billing-cycle-toggle {
    grid-template-columns: 1fr;
  }
}

/* Activity list */
.activity-list {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.45rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent-glow);
}

.activity-body {
  flex: 1;
  min-width: 0;
}

.activity-body strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.activity-body span {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Parent mobile cards */
.mobile-cards {
  display: none;
}

/* Parent dashboard — full-width cards */
.parent-dashboard-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.parent-dashboard-header {
  margin-bottom: 1rem;
}

.parent-dashboard-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.parent-dashboard-heading .subtitle {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.parent-section-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
}

.parent-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.parent-dash-section-head .parent-section-title {
  margin: 0;
}

.parent-upcoming-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 1.25rem;
}

.parent-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.parent-upcoming-item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.parent-upcoming-item--action {
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
}

.parent-upcoming-when {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.parent-upcoming-when strong {
  font-size: 0.86rem;
}

.parent-upcoming-when span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.parent-upcoming-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.parent-upcoming-title strong {
  font-size: 0.92rem;
}

.parent-upcoming-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-word;
}

.parent-upcoming-action {
  margin-top: 0;
  justify-self: end;
}

@media (max-width: 560px) {
  .parent-upcoming-item,
  .parent-upcoming-item--action {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .parent-upcoming-action {
    justify-self: start;
  }
}

.parent-child-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
  align-items: stretch;
}

.parent-child-grid:has(> article:only-child) {
  grid-template-columns: minmax(0, 26rem);
}

@media (min-width: 860px) {
  .parent-child-grid:has(> article:only-child) {
    grid-template-columns: 1fr;
  }

  .parent-child-grid:has(> article:only-child) > .child-card {
    display: grid;
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.35rem;
    row-gap: 0.75rem;
  }

  .parent-child-grid:has(> article:only-child) .child-card-header {
    margin-bottom: 0;
  }

  .parent-child-grid:has(> article:only-child) .child-stats,
  .parent-child-grid:has(> article:only-child) .child-card--profile .child-stats {
    margin-bottom: 0;
  }

  .parent-child-grid:has(> article:only-child) .child-card-aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    min-width: 11.5rem;
    margin-top: 0;
  }

  .parent-child-grid:has(> article:only-child) .child-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .parent-child-grid:has(> article:only-child) .child-card-actions,
  .parent-child-grid:has(> article:only-child) .child-card--profile .child-card-actions,
  .parent-dashboard-page .parent-child-grid:has(> article:only-child) .child-card-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .parent-child-grid:has(> article:only-child) .child-card-actions .btn {
    justify-content: center;
  }
}

.parent-dashboard-page .child-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.parent-dashboard-page .child-card-aside {
  margin-top: auto;
}

.parent-dashboard-page .child-card-actions {
  margin-top: 0;
}

@media (max-width: 720px) {
  .parent-child-grid,
  .parent-child-grid:has(> :only-child) {
    grid-template-columns: 1fr;
  }
}

.child-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  transition: border-color var(--transition);
}

.child-card:hover {
  border-color: rgba(184, 240, 0, 0.4);
}

.child-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.child-card-heading {
  flex: 1;
  min-width: 0;
}

.child-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.child-avatar-img {
  object-fit: cover;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.child-avatar--lg {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  font-size: 1.15rem;
}

.child-profile-top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.child-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.child-team-sub {
  margin-top: 0.2rem;
  font-size: 0.75rem;
}

.parent-children-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.parent-children-header {
  margin-bottom: 1rem;
}

.parent-children-heading .subtitle {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

/* Parent child edit — full-width card */
.child-edit-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.child-edit-header {
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.child-edit-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.child-edit-heading .subtitle {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.child-edit-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.1rem 1.15rem;
}

.child-edit-meta {
  word-break: break-word;
}

.child-edit-card .form-actions {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .child-edit-header {
    margin-bottom: 0.75rem;
  }

  .child-edit-heading h1 {
    font-size: 1.2rem;
  }

  .child-edit-heading .subtitle {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .child-edit-card {
    padding: 0.9rem;
  }

  .child-edit-grid {
    grid-template-columns: 1fr;
  }
}

.child-card--profile .child-stats {
  margin-bottom: 0.75rem;
}

.child-card--profile .child-meta {
  margin-top: 0;
}

.child-card--profile .child-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
}

.child-name {
  font-weight: 600;
  margin: 0;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-team {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.15rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.child-stats--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Player profile: attendance totals on one row */
.player-att-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 720px) {
  .player-att-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.45rem;
    padding-bottom: 0.15rem;
  }

  .player-att-stats .child-stat {
    flex: 0 0 auto;
    min-width: 4.5rem;
  }
}

.child-stat {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  min-width: 0;
}

.child-stat .label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.child-stat-meta {
  margin-top: 0.15rem;
  min-height: 1.05em;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dev-score-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dev-score-pair .child-stat {
  min-width: 5.25rem;
  text-align: center;
}

.dev-score-pair .value {
  font-size: 1.15rem;
}

.assessment-fold {
  margin-bottom: 1rem;
}

.assessment-fold:last-of-type {
  margin-bottom: 0;
}

.assessment-fold > .assessment-fold-summary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 2.35rem;
}

.assessment-fold.has-fold > .assessment-fold-summary .assessment-fold-chevron {
  position: absolute;
  top: 0.15rem;
  right: 0;
  z-index: 2;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  border: 1px solid rgba(184, 240, 0, 0.45);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
  transition: transform 0.15s ease;
}

.assessment-fold.has-fold[open] > .assessment-fold-summary .assessment-fold-chevron {
  transform: rotate(180deg);
}

.assessment-fold > .assessment-fold-summary::-webkit-details-marker,
.assessment-fold > .assessment-fold-summary::marker {
  display: none;
  content: none;
}

.assessment-fold .child-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}

.assessment-fold .child-card-heading {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
}

.assessment-fold .dev-score-pair {
  flex: 0 1 auto;
}

.assessment-fold[open] .child-card-header {
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.assessment-fold-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.assessment-fold-body .table-wrap {
  margin-bottom: 0.75rem;
}

.assessment-fold-body .mobile-cards {
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .assessment-fold .dev-score-pair {
    flex: 1 1 100%;
    width: 100%;
  }
}

.pct-bar {
  height: 0.35rem;
  margin-top: 0.35rem;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.pct-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
}

.child-stat .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.25;
}

.child-stat-next {
  font-size: 0.95rem !important;
  white-space: normal;
  line-height: 1.25;
}

.parent-invoices-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fee-banner-meta {
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.child-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.child-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .content:has(.parent-dashboard-page) {
    padding-left: 0;
    padding-right: 0;
  }

  .content:has(.parent-children-page) {
    padding-left: 0;
    padding-right: 0;
  }

  .parent-dashboard-page .page-header,
  .parent-dashboard-page .parent-section-title,
  .parent-dashboard-page .parent-dash-section-head,
  .parent-dashboard-page .fee-banner,
  .parent-dashboard-page .kpi-grid,
  .parent-dashboard-page .parent-child-grid,
  .parent-dashboard-page .parent-upcoming-card,
  .parent-dashboard-page .parent-invoices-card {
    margin-left: max(1rem, env(safe-area-inset-left, 0px));
    margin-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .parent-children-page .page-header {
    margin-left: max(1rem, env(safe-area-inset-left, 0px));
    margin-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .parent-dashboard-heading h1 {
    font-size: 1.2rem;
  }

  .parent-dashboard-heading .subtitle {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .parent-children-page .child-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 0.9rem max(1rem, env(safe-area-inset-left, 0px));
  }

  .parent-dashboard-page .fee-banner {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .parent-dashboard-page .page-header,
  .parent-dashboard-page .parent-section-title,
  .parent-dashboard-page .parent-dash-section-head,
  .parent-dashboard-page .fee-banner,
  .parent-dashboard-page .kpi-grid,
  .parent-dashboard-page .parent-child-grid,
  .parent-dashboard-page .parent-upcoming-card,
  .parent-dashboard-page .parent-invoices-card {
    width: auto;
    margin-left: max(0.85rem, env(safe-area-inset-left, 0px));
    margin-right: max(0.85rem, env(safe-area-inset-right, 0px));
  }

  .child-card {
    padding: 0.85rem max(0.85rem, env(safe-area-inset-left, 0px));
  }

  .child-stats,
  .child-stats--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .child-stats:not(.child-stats--3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .child-stat {
    padding: 0.5rem 0.4rem;
  }

  .child-stat .label {
    letter-spacing: 0.02em;
  }
}

.child-meta-row span:first-child {
  color: var(--text-muted);
}

.child-meta-row strong {
  font-weight: 600;
  color: var(--text);
}

.child-card-actions {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Coach My Teams — compact full-width cards */
.coach-teams-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.coach-teams-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.coach-team-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}

.coach-team-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.coach-team-card-heading {
  flex: 1;
  min-width: 0;
}

.coach-team-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  word-break: break-word;
}

.coach-team-meta {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  word-break: break-word;
}

.coach-team-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.coach-team-stat {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  min-width: 0;
}

.coach-team-stat .label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.coach-team-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  word-break: break-word;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .content:has(.coach-teams-page) {
    padding-left: 0;
    padding-right: 0;
  }

  .coach-teams-page .page-header {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .coach-team-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 0.9rem max(1rem, env(safe-area-inset-left, 0px));
  }

  .coach-team-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .coach-teams-page .page-header {
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
  }

  .coach-team-card {
    padding: 0.85rem max(0.85rem, env(safe-area-inset-left, 0px));
  }
}

.fee-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(184, 240, 0, 0.1), rgba(15, 21, 34, 0.8));
  border: 1px solid rgba(184, 240, 0, 0.25);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.fee-banner .amount {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

.fee-banner .label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

/* Player passport */
.passport {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
}

/* Digital ID card — portrait pass, not a landscape wallet card */
.id-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 19.5rem;
  min-height: 33rem;
  overflow: hidden;
  border-radius: 1.15rem;
  background-color: #0a1218;
  background-image: url("../img/id-card-bg.svg?v=7");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(184, 240, 0, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  color: #f1f5f9;
}

.id-card > * {
  position: relative;
  z-index: 1;
}

.id-card-stripe {
  height: 5px;
  background: linear-gradient(90deg, var(--accent, #b8f000), #7ecb00);
}

.id-card--trial {
  border-color: rgba(245, 158, 11, 0.55);
}

.id-card--trial .id-card-stripe {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.id-card--inactive {
  border-color: rgba(239, 68, 68, 0.5);
}

.id-card--inactive .id-card-stripe {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.id-card-status-banner {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  color: #0b0f14;
  background: #f59e0b;
}

.id-card--inactive .id-card-status-banner {
  background: #ef4444;
  color: #fff;
}

.id-card-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.05rem 0.5rem;
}

.id-card-academy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.id-card-logo {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  border-radius: 0.4rem;
  background: #fff;
  flex-shrink: 0;
}

.id-card-logo--mark {
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #0b0f14;
  background: var(--accent, #b8f000);
}

.id-card-academy-name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.id-card-role {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0b0f14;
  background: var(--accent, #b8f000);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
}

.id-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: 0.35rem 1.15rem 1.45rem;
  width: 100%;
}

.id-card-photo {
  width: 9.25rem;
  height: 12.4rem;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #1e293b;
  display: grid;
  place-items: center;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--accent, #b8f000);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.id-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-card-photo--empty {
  outline: 1px dashed rgba(184, 240, 0, 0.35);
  outline-offset: -3px;
}

.id-card-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  min-height: 9.75rem;
  text-align: center;
}

.id-card-kicker {
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.id-card-name {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.id-card-code {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent, #b8f000);
}

.id-card-code-label {
  font-family: Outfit, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.id-card-line {
  margin: 0;
  font-size: 0.8rem;
  color: #cbd5e1;
  min-height: 1.25em;
}

.id-card-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  width: 100%;
}

.id-card-lines .id-card-line {
  min-height: 0;
  line-height: 1.3;
}

.id-card-line--primary {
  color: #e2e8f0;
  font-weight: 600;
}

.id-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.9rem;
  margin: 0.35rem 0 0;
  width: 100%;
  min-height: 2.55rem;
}

.id-card-meta--single {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.id-card-meta dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.id-card-meta dd {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.id-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.6rem 1.05rem 0.8rem;
  font-size: 0.68rem;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.id-card-foot--qr {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.55rem 0.85rem 0.7rem;
  text-align: left;
}

.id-card-foot-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
  text-align: left;
}

.id-card-foot--qr .id-card-qr {
  margin-left: auto;
}

.id-card-qr {
  flex-shrink: 0;
  width: 3.55rem;
  height: 3.55rem;
  padding: 0.18rem;
  background: #fff;
  border-radius: 0.35rem;
}

.id-card-qr img,
.id-card-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.id-card--qr .id-card-body {
  padding-bottom: 0.75rem;
}

.id-card--qr .id-card-photo {
  width: 8.5rem;
  height: 11.4rem;
}

.id-card--coach {
  background-color: #07141c;
  background-image: url("../img/id-card-bg-coach.svg?v=7");
  border-color: rgba(56, 189, 248, 0.34);
}

.id-card--coach .id-card-stripe {
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}

.id-card--coach .id-card-role,
.id-card--coach .id-card-logo--mark {
  background: #38bdf8;
  color: #0b1220;
}

.id-card--coach .id-card-code,
.id-card--coach .id-card-photo,
.id-card--coach .id-card-kicker {
  color: #7dd3fc;
}

.id-card--trial .id-card-stripe {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.id-card--inactive .id-card-stripe {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.id-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.15rem;
}

.id-card-sources {
  display: none;
}

.id-card-open-preview {
  display: block;
  width: 100%;
  max-width: 19.5rem;
  margin: 0 auto 0.65rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: center;
}

.id-card-wrap .form-hint {
  text-align: center;
  max-width: 19.5rem;
}

.id-card-open-preview .id-card {
  pointer-events: none;
}

.id-card-lightbox {
  z-index: 340;
  padding: 1.5rem 1rem;
  background: rgba(4, 8, 14, 0.82);
  align-items: center;
}

.id-card-lightbox-dialog {
  position: relative;
  width: min(20.5rem, 100%);
}

.id-card-lightbox-close {
  position: absolute;
  top: -2.4rem;
  right: 0;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.id-card-lightbox-close:hover,
.id-card-lightbox-close:focus {
  background: rgba(255, 255, 255, 0.22);
}

.id-card-lightbox .id-card {
  max-width: none;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.id-card-lightbox .id-card-photo {
  width: 10rem;
  height: 13.35rem;
}

.id-card-lightbox .id-card-name {
  font-size: 1.28rem;
}

.id-card-lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.id-card-lightbox-actions .btn {
  min-width: 8.5rem;
}

.id-card-lightbox .id-card--qr .id-card-photo {
  width: 9.1rem;
  height: 12.15rem;
}

.promo-poster-dialog {
  width: min(22rem, 100%);
}

.promo-poster {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #071018;
  border: 1px solid rgba(184, 240, 0, 0.22);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  color: #f8fafc;
  text-align: center;
}

.promo-poster-stripe {
  height: 5px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--accent, #b8f000), #7ecb00);
}

.promo-poster-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.15rem 1.1rem 0.85rem;
  min-height: 0;
}

.promo-poster-logo {
  width: 4.6rem;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid rgba(184, 240, 0, 0.28);
  background: #0b1220;
  margin-bottom: 0.75rem;
}

.promo-poster-mark {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 0.75rem;
  border-radius: 1rem;
  background: rgba(184, 240, 0, 0.12);
  color: var(--accent, #b8f000);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.promo-poster-mark span {
  color: var(--accent, #b8f000);
}

.promo-poster-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.promo-poster-place,
.promo-poster-sports {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}

.promo-poster-cta {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #b8f000);
}

.promo-poster-qr {
  width: 6.4rem;
  height: 6.4rem;
  margin-top: 0.75rem;
  padding: 0.35rem;
  background: #fff;
  border-radius: 0.55rem;
}

.promo-poster-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.promo-poster-scan {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.promo-poster-url {
  margin: 0.25rem 0 0;
  max-width: 100%;
  font-size: 0.68rem;
  color: #94a3b8;
  word-break: break-all;
  line-height: 1.35;
}

.promo-poster-foot {
  margin: 0;
  padding: 0.45rem 0.75rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.hub-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.85rem;
}

.hub-poster-tile {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.hub-poster-tile:hover,
.hub-poster-tile:focus-visible {
  border-color: rgba(184, 240, 0, 0.45);
}

.hub-poster-tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  background: #071018;
}

.hub-poster-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem 0.65rem;
}

.hub-poster-tile-meta small {
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-poster-tile-meta strong {
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
}

.hub-poster-dialog {
  width: min(26rem, calc(100vw - 1.5rem));
}

.hub-poster-lightbox-img {
  display: block;
  width: 100%;
  max-height: min(78vh, 52rem);
  object-fit: contain;
  border-radius: var(--radius);
  background: #071018;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.passport-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text-dim);
  overflow: hidden;
}

.passport-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-photo-field {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.player-photo-preview {
  width: 100px;
  height: 125px; /* portrait — players / coaches */
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Academy logo: square box, full logo visible (not cropped like headshots) */
.player-photo-preview.is-logo {
  width: 144px;
  height: 144px;
  border-radius: var(--radius);
  padding: 0.5rem;
  background: transparent;
}

.player-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-photo-preview.is-logo img {
  object-fit: contain;
}

.player-photo-preview.is-poster {
  width: 120px;
  height: 160px;
}

.player-photo-preview.is-poster img {
  object-fit: contain;
}

.kit-poster-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.kit-poster-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
}

.kit-poster-grid .player-photo-preview,
.kit-poster-item .player-photo-preview {
  padding: 0;
  cursor: pointer;
}

.kit-team-card > .card-header + .kit-replies-wrap,
.kit-team-card > .card-header + .table-desktop {
  margin: 0 -1.25rem -1.25rem;
  width: auto;
  max-width: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

.kit-team-index .kit-col-team { width: 52%; }
.kit-team-index .kit-col-count { width: 14%; }
.kit-team-index .kit-col-actions { width: 34%; }

.kit-team-index th,
.kit-team-index td {
  height: auto;
  overflow: visible;
  text-overflow: clip;
}

.kit-team-index td.actions,
.kit-team-index th.actions {
  width: 34%;
  text-align: right;
}

.kit-team-card .card-header {
  min-height: 2.75rem;
}

.kit-team-downloads {
  display: flex;
  flex-shrink: 0;
  gap: 0.4rem;
}

.kit-replies-table {
  table-layout: fixed;
  width: 100%;
}

.kit-replies-table .kit-col-player,
.kit-replies-table .kit-col-shirt { width: 40%; }
.kit-replies-table .kit-col-size { width: 20%; }
.kit-replies-table.has-jersey .kit-col-player,
.kit-replies-table.has-jersey .kit-col-shirt { width: 34%; }
.kit-replies-table.has-jersey .kit-col-size,
.kit-replies-table.has-jersey .kit-col-jersey { width: 16%; }
.kit-replies-table.can-edit .kit-col-player { width: 28%; }
.kit-replies-table.can-edit .kit-col-shirt { width: 28%; }
.kit-replies-table.can-edit .kit-col-size,
.kit-replies-table.can-edit .kit-col-jersey { width: 14%; }
.kit-replies-table.can-edit .kit-col-edit { width: 16%; }

.kit-replies-table tr.is-editing td {
  height: auto;
  overflow: visible;
  white-space: normal;
}

.kit-amend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.kit-amend .form-group {
  margin: 0;
  min-width: 10rem;
  flex: 1 1 10rem;
}

.kit-amend-actions {
  display: flex;
  gap: 0.4rem;
  padding-bottom: 0.15rem;
}

.kit-replies-table th,
.kit-replies-table td {
  height: 3.15rem;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kit-poster-uploads {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kit-poster-add {
  margin-top: 0.65rem;
}

.player-photo-placeholder {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  padding: 0.5rem;
}

.player-photo-controls {
  flex: 1;
  min-width: 200px;
}

.photo-crop-backdrop {
  z-index: 360;
}

.photo-crop-modal {
  max-width: 26rem;
}

.photo-crop-stage {
  display: flex;
  justify-content: center;
  margin: 0 0 1rem;
}

.photo-crop-viewport {
  position: relative;
  overflow: hidden;
  background: #0b1220;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.photo-crop-viewport.is-dragging {
  cursor: grabbing;
}

.photo-crop-viewport.is-portrait {
  width: min(64vw, 14rem);
  height: calc(min(64vw, 14rem) * 1.25);
}

.photo-crop-viewport.is-square {
  width: min(72vw, 16rem);
  height: min(72vw, 16rem);
}

.photo-crop-viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.15rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.photo-crop-zoom input {
  flex: 1;
  accent-color: var(--accent, #38bdf8);
}

.file-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.file-pick-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.file-pick-btn {
  margin: 0;
  cursor: pointer;
}

.file-pick-name {
  margin: 0;
}

.person-name-cell,
.coach-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.person-name-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

a.person-name-link {
  color: inherit;
  text-decoration: none;
}

a.person-name-link:hover,
a.person-name-link:hover .person-name-text,
a.person-name-link.person-name-text:hover {
  color: var(--accent);
  text-decoration: none;
}

.person-list-avatar,
.coach-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.person-list-avatar--initial,
.coach-list-avatar--initial {
  display: inline-grid;
  place-items: center;
  background: var(--bg-elevated);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

.person-list-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
}

.sport-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.sport-list-icon {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 0.5rem;
  background: var(--accent-dim);
  border: 1px solid rgba(184, 240, 0, 0.18);
}

.mobile-card-title.person-name-cell {
  align-items: center;
}

.passport-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.meta-item .label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meta-item .value {
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Attendance grid */
.attendance-list .att-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.attendance-list .att-row:last-child {
  border-bottom: none;
}

.att-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.att-status {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.att-status label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
}

.att-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.att-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.att-note {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.att-row.is-parent-excuse {
  background: var(--accent-dim);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: var(--radius-sm);
}

.parent-absence-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.parent-absence-form {
  display: inline;
  margin: 0;
}

.tournament-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tournament-page-actions form {
  margin: 0;
}

.tournament-roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.tournament-roster-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.tournament-roster-list {
  margin: 0;
  padding-left: 1.1rem;
}

.tournament-score-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.match-score-unit {
  font-size: 0.75rem;
  white-space: nowrap;
}

.match-row-score.tournament-score-form {
  flex-wrap: nowrap;
}

.match-row-score.tournament-score-form input[type="number"] {
  width: 3.35rem;
}

.tournament-add-match {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.tournament-ask-form {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.tournament-playup-ages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

@media (max-width: 800px) {
  .tournament-roster {
    grid-template-columns: 1fr;
  }
}

.att-status label:has(input:checked) {
  border-color: rgba(184, 240, 0, 0.55);
  background: var(--accent-dim);
  color: var(--text);
}

/* Auth pages use landing header/footer shell */
.auth-page .auth-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
  min-height: min(70vh, 640px);
}

.landing-body.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-page .landing-bg-net {
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
}

.auth-page .site-footer {
  margin-top: auto;
}

/* Legacy auth-body (if used alone) */
.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -20%, rgba(184, 240, 0, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(56, 189, 248, 0.05), transparent 50%),
    var(--bg);
}

.auth-body > .auth-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.auth-card-has-nav .tagline {
  margin-top: 0;
}

.auth-card .brand {
  margin-bottom: 0.35rem;
}

a.auth-brand-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.35rem;
}

a.auth-brand-link:hover {
  opacity: 0.9;
}

a.auth-brand-link:hover .accent {
  color: var(--accent);
}

.auth-card .tagline {
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
}

.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Landing */
.landing-body {
  position: relative;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.landing-bg-mesh {
  position: absolute;
  inset: -15% -10%;
  background:
    radial-gradient(ellipse 55% 45% at 78% 8%, rgba(184, 240, 0, 0.22), transparent 58%),
    radial-gradient(ellipse 42% 38% at 8% 18%, rgba(56, 189, 248, 0.12), transparent 52%),
    radial-gradient(ellipse 50% 40% at 92% 78%, rgba(163, 230, 53, 0.07), transparent 55%),
    radial-gradient(ellipse 35% 28% at 40% 100%, rgba(56, 189, 248, 0.06), transparent 50%);
  filter: blur(8px);
}

html[data-theme="light"] .landing-bg-mesh {
  background:
    radial-gradient(ellipse 55% 45% at 78% 8%, rgba(122, 184, 0, 0.18), transparent 58%),
    radial-gradient(ellipse 42% 38% at 8% 18%, rgba(2, 132, 199, 0.1), transparent 52%),
    radial-gradient(ellipse 50% 40% at 92% 78%, rgba(122, 184, 0, 0.08), transparent 55%),
    radial-gradient(ellipse 35% 28% at 40% 100%, rgba(2, 132, 199, 0.06), transparent 50%);
}

html[data-theme="light"] .landing-bg-noise {
  opacity: 0.03;
  mix-blend-mode: multiply;
}

.landing-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.landing-bg-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 82%);
}

.landing-net-links path {
  stroke-width: 1;
}

.landing-net-flow {
  stroke-dasharray: 10 92;
  stroke-width: 1.35;
  animation: landingNetFlow 9s linear infinite;
}

.landing-net-nodes circle {
  opacity: 0.85;
}

.landing-net-hub {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(184, 240, 0, 0.7));
}

.landing-net-ring {
  fill: none;
  stroke: #b8f000;
  stroke-width: 1;
  opacity: 0.28;
  transform-origin: center;
  transform-box: fill-box;
  animation: landingNetPulse 4.5s ease-out infinite;
}

@keyframes landingNetFlow {
  to { stroke-dashoffset: -102; }
}

@keyframes landingNetPulse {
  0% { opacity: 0.35; transform: scale(0.72); }
  70% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-net-flow,
  .landing-net-ring {
    animation: none;
  }
}

.landing-body > :not(.landing-bg) {
  position: relative;
  z-index: 1;
}

/* Homepage only: clip sideways overflow without shrinking the hero card or CTAs. */
body.landing-body.is-home {
  overflow-x: hidden;
}

body.landing-body.is-home .hero {
  overflow-x: hidden;
}

.landing-top {
  position: sticky;
  top: 0;
  z-index: 40;
}

.launch-bar {
  background: var(--accent, #b8f000);
  color: #07101c;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  border-bottom: 1px solid rgba(7, 16, 28, 0.12);
}

.launch-bar-viewport {
  overflow: hidden;
  max-width: 100%;
  width: 100%;
}

.launch-bar-track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  width: max-content;
  margin: 0;
  padding: 0.42rem 0;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #07101c;
  animation: launch-marquee 32s linear infinite;
}

.launch-bar-item {
  white-space: nowrap;
  color: #07101c;
}

.launch-bar-item strong {
  font-weight: 800;
  color: #07101c;
}

.launch-bar a {
  color: inherit;
  text-underline-offset: 0.15em;
}

@keyframes launch-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .launch-bar-track {
    animation: none;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding-inline: 1rem;
  }

  .launch-bar-item:not(:first-child) {
    display: none;
  }
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 40;
  background: rgba(7, 11, 20, 0.52);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.landing-nav.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 20, 0.78);
}

.landing-body > .landing-top {
  z-index: 40;
}

.landing-nav-toggle {
  display: none;
  flex-shrink: 0;
}

.landing-nav-end {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  position: relative;
  z-index: 46;
}

.landing-nav-end .landing-translate {
  display: none;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.theme-toggle-icon {
  display: none;
  line-height: 0;
}

html[data-theme="dark"] .theme-toggle-icon-sun,
html:not([data-theme]) .theme-toggle-icon-sun {
  display: inline-flex;
}

html[data-theme="light"] .theme-toggle-icon-moon {
  display: inline-flex;
}

.theme-toggle-compact .theme-toggle-label {
  display: none;
}

.sidebar-footer-theme {
  display: none;
  margin: 0.65rem 0 0.35rem;
}

.sidebar-footer-theme .theme-toggle {
  width: 100%;
  justify-content: flex-start;
  padding-left: 0.15rem;
}

@media (max-width: 1024px) {
  /* Keep mobile topbar clean (super academy view + switchers); theme lives in sidebar. */
  .topbar .theme-toggle {
    display: none;
  }

  .sidebar-footer-theme {
    display: block;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  .topbar .theme-toggle-label {
    display: none;
  }
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.landing-nav-overlay {
  display: none;
}

.landing-nav-links a.btn.is-active {
  color: var(--accent);
}

.landing-translate {
  position: relative;
  flex-shrink: 0;
}

.landing-translate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.5rem;
  padding: 0.4rem 0.65rem;
}

.landing-translate-btn.is-active {
  color: var(--accent);
}

.landing-translate-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.landing-translate-ccy {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.landing-translate-btn.is-active .landing-translate-ccy {
  color: var(--accent);
}

.landing-translate-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 50;
  width: min(18.5rem, calc(100vw - 2rem));
  padding: 0.55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.landing-translate-hint {
  margin: 0.2rem 0.45rem 0.45rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.landing-translate-list {
  max-height: 16rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.landing-translate-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

.landing-translate-option:hover,
.landing-translate-option.is-current {
  background: rgba(184, 240, 0, 0.1);
}

.landing-translate-option[data-translate-auto] {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

body > .skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.goog-logo-link,
.goog-te-balloon-frame,
#goog-gt-tt {
  display: none !important;
}

.landing-translate-widget {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body.landing-body,
body {
  top: 0 !important;
}

.goog-te-balloon-frame {
  display: none !important;
}

font font,
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* Google Translate wraps each sentence in <font style="white-space:nowrap"> and clips on phones. */
body.landing-body font,
body.landing-body font * {
  white-space: normal !important;
}

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(3.25rem, 6vw, 5.5rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 72%, var(--bg) 100%);
  pointer-events: none;
}

.hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20.5rem);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.32rem 0.75rem 0.32rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #b8f000);
  background: rgba(184, 240, 0, 0.08);
  border: 1px solid rgba(184, 240, 0, 0.22);
  border-radius: 999px;
  animation: fadeUp 0.7s ease both;
}

.hero-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #b8f000);
  box-shadow: 0 0 0 4px rgba(184, 240, 0, 0.18);
}

.hero h1 {
  font-size: clamp(2.15rem, 5.4vw, 3.45rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 1rem;
  animation: fadeUp 0.7s ease 0.08s both;
}

.hero .lead {
  font-size: 1.12rem;
  line-height: 1.65;
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: var(--text-muted);
  animation: fadeUp 0.7s ease 0.16s both;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: fadeUp 0.7s ease 0.24s both;
}

.hero-preview {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 20.5rem;
  animation: fadeUp 0.7s ease 0.2s both;
}

.hero-preview::before {
  content: "";
  position: absolute;
  inset: 8% -18% auto;
  height: 78%;
  background: radial-gradient(circle, rgba(184, 240, 0, 0.32), transparent 68%);
  filter: blur(32px);
  z-index: -1;
  pointer-events: none;
}

.hero-phone {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1.65rem;
  padding: 0.85rem 0.75rem 0.9rem;
  box-shadow:
    0 0 0 1px var(--accent-dim),
    0 28px 60px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

html[data-theme="light"] .hero-phone {
  box-shadow:
    0 0 0 1px var(--accent-dim),
    0 20px 40px rgba(15, 23, 42, 0.1);
}

.hero-phone-bar {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin: 0 0 0.7rem;
  padding: 0 0.35rem;
}

.hero-phone .id-card {
  max-width: none;
}

.hero-phone .id-card-foot span:last-child {
  flex-shrink: 0;
  white-space: nowrap;
}

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

  .hero-preview {
    justify-self: center;
  }
}

@media (max-width: 420px) {
  .hero-preview {
    max-width: 100%;
  }

  .hero-phone {
    padding: 0.65rem 0.5rem 0.7rem;
  }

  .hero .lead {
    font-size: 1rem;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

.section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
}

.section-header {
  margin-bottom: 2rem;
  max-width: min(40rem, 100%);
  min-width: 0;
}

.section-header h2,
.section-header p,
.section-header h2 *,
.section-header p * {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  white-space: normal !important;
}

.section-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.section-header-center {
  text-align: center;
  max-width: min(42rem, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
}

.section-header-center p {
  margin: 0.65rem auto 0;
  color: var(--text-muted);
}

.pricing-intro {
  max-width: 100%;
  width: 100%;
  text-align: center;
}

.pricing-intro p {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 11.5rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.35rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition:
    border-color var(--transition),
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

.module-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.35;
  transition: opacity var(--transition);
}

.module-card:hover {
  border-color: rgba(184, 240, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(184, 240, 0, 0.07), transparent 48%),
    var(--card-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(184, 240, 0, 0.08);
}

.module-card:hover::before {
  opacity: 1;
}

.module-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1.05rem;
  border: 1px solid rgba(184, 240, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.module-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.module-card:hover .module-icon {
  background: rgba(184, 240, 0, 0.18);
  box-shadow: 0 0 0 4px rgba(184, 240, 0, 0.08);
}

.module-card h3 {
  font-size: 1.08rem;
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.module-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text-muted);
  flex: 1;
}

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

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

  .module-card {
    min-height: 0;
  }
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

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

.roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

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

.role-card {
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

.role-card h3 {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.cta-band {
  margin: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(184, 240, 0, 0.15), var(--card) 50%);
  border: 1px solid rgba(184, 240, 0, 0.25);
  text-align: center;
}

.cta-band h2 {
  margin-bottom: 0.5rem;
}

.pay-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  max-width: 880px;
  margin: 0 auto;
}

.pay-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.15rem 0.85rem 1.2rem;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
}

.pay-method-icon {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.15rem;
  color: var(--accent);
}

.pay-method-icon svg {
  width: 100%;
  height: 100%;
}

.pay-method-card strong {
  font-size: 0.95rem;
}

.pay-method-card span:last-child {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pay-methods-note {
  margin: 1.15rem auto 0;
  max-width: 880px;
  font-size: 0.88rem;
  text-align: center;
}

.home-faq {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.home-faq-item {
  border: 1px solid var(--border, #1e293b);
  border-radius: var(--radius, 12px);
  background: var(--card, #151c2c);
  padding: 0 1.1rem;
}

.home-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.75rem 1rem 0;
  font-weight: 600;
  position: relative;
}

.home-faq-item summary::-webkit-details-marker {
  display: none;
}

.home-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent, #b8f000);
  font-size: 1.25rem;
  font-weight: 500;
}

.home-faq-item[open] summary::after {
  content: "–";
}

.home-faq-item p {
  margin: 0 0 1rem;
  padding-right: 1.5rem;
  color: var(--text-muted, #94a3b8);
  font-size: 0.92rem;
  line-height: 1.55;
}

.home-faq-item a {
  color: var(--accent, #b8f000);
}

.home-faq-more {
  margin: 1.25rem 0 0;
}

.home-faq-more a {
  color: var(--accent, #b8f000);
}

@media (max-width: 1024px) {
  .pay-methods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.landing-footer {
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utilities */
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.fw-600 { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: 0.5rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .passport {
    grid-template-columns: 160px 1fr;
  }

  /* Compact top bar + hamburger: 769–1024 was still desktop chips + sidebar */
  .sidebar {
    transform: translateX(-100%);
    width: min(var(--sidebar-w), 86vw);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .main-wrap {
    margin-left: 0;
  }

  .btn-menu {
    display: inline-flex;
    flex-shrink: 0;
  }

  body.sidebar-open .btn-menu span {
    background: transparent;
  }

  body.sidebar-open .btn-menu span::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.sidebar-open .btn-menu span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .topbar {
    padding: 0 0.85rem;
    padding-left: max(0.85rem, env(safe-area-inset-left, 0));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0));
    gap: 0.45rem;
    height: var(--topbar-h);
    min-height: var(--topbar-h);
    max-height: var(--topbar-h);
    padding-top: env(safe-area-inset-top, 0);
    flex-wrap: nowrap;
  }

  .topbar-title {
    font-size: 1rem;
  }

  .topbar-right {
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: none;
    flex-shrink: 0;
  }

  .user-chip {
    padding: 0.25rem;
    border-radius: 50%;
  }

  .user-chip span:not(.user-avatar) {
    display: none;
  }

  .topbar-right > .btn-ghost {
    padding: 0.4rem 0.45rem;
    font-size: 0.8rem;
  }

  .topbar-right > .btn-logout span {
    display: none;
  }

  .portal-switcher--chips,
  .academy-switcher--chips {
    display: none;
  }

  .portal-switch-select,
  .academy-switch-select {
    display: block;
    margin: 0;
  }

  .portal-switch-select-input,
  .academy-switch-select-input {
    max-width: 8.5rem;
  }

  .notif-bell-btn {
    width: 2.15rem;
    height: 2.15rem;
  }

  .notif-bell-panel {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 0.35rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
  }

  .topbar .landing-translate-btn {
    min-height: 2.15rem;
    padding: 0.3rem 0.5rem;
  }

  .topbar .landing-translate-menu {
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 0.35rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
  }

  /* Public nav: 769–1024 (iPad portrait 820×1180) still showed desktop chips + hamburger */
  .landing-nav {
    flex-wrap: wrap;
    z-index: 45;
  }

  .landing-nav .brand {
    flex: 1;
    min-width: 0;
  }

  .landing-nav-end {
    margin-left: 0;
  }

  .landing-nav-end .landing-translate {
    display: block;
  }

  .landing-nav-links .landing-translate {
    display: none;
  }

  .landing-nav-toggle {
    display: inline-flex;
  }

  .landing-nav-links {
    display: none;
    order: 3;
    width: 100%;
    margin-left: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.85rem 1rem 1.15rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  }

  body.landing-nav-open .landing-nav-links {
    display: flex;
  }

  body.landing-nav-open .landing-nav-toggle span {
    background: transparent;
  }

  body.landing-nav-open .landing-nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.landing-nav-open .landing-nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .landing-nav-links .btn {
    width: 100%;
    justify-content: center;
  }

  .landing-nav .landing-translate-menu {
    right: 0;
    left: auto;
  }

  .landing-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 35;
  }

  body.landing-nav-open .landing-nav-overlay {
    display: block;
  }

  body.landing-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 1rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
  }

  .page-header h1 {
    font-size: 1.25rem;
  }

  .page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .page-actions:has(> :only-child),
  .page-actions:has(> :nth-child(3)) {
    grid-template-columns: 1fr;
  }

  .calendar-subscribe-actions {
    width: 100%;
  }

  .calendar-subscribe-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .page-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 42px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .page-actions-equal .btn {
    flex: 1 1 0;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .toolbar .search {
    max-width: none;
    width: 100%;
    min-width: 0;
  }

  .toolbar-select,
  .toolbar .form-select {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
  }

  .toolbar .btn,
  .toolbar a.btn,
  .toolbar-filters > .btn {
    width: 100%;
    justify-content: center;
  }

  .import-team-names {
    columns: 1;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .kpi-value {
    font-size: 1.4rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Date of birth: native phone picker, readable tap target, no iOS zoom */
  input.form-control[type="date"],
  input.form-control[type="datetime-local"],
  input.form-control[type="month"],
  input.form-control[type="week"] {
    min-height: 3rem;
    font-size: 16px;
    line-height: 1.3;
    min-width: 0;
    max-width: 100%;
    appearance: auto;
    -webkit-appearance: none;
    display: block;
  }

  input.form-control[type="date"]::-webkit-datetime-edit,
  input.form-control[type="date"]::-webkit-datetime-edit-fields-wrapper,
  input.form-control[type="date"]::-webkit-datetime-edit-text,
  input.form-control[type="date"]::-webkit-datetime-edit-year-field,
  input.form-control[type="date"]::-webkit-datetime-edit-month-field,
  input.form-control[type="date"]::-webkit-datetime-edit-day-field {
    color: var(--text);
    padding: 0;
  }

  input.form-control[type="date"]::-webkit-calendar-picker-indicator {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: auto;
    opacity: 1;
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .passport {
    grid-template-columns: 1fr;
  }

  .passport-photo {
    max-width: 180px;
  }

  .id-card {
    max-width: none;
  }

  .id-card-wrap .id-card,
  .id-card-open-preview .id-card {
    max-width: 19.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .id-card-photo {
    width: 8.25rem;
    height: 11rem;
  }

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

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

  .card {
    padding: 1rem;
  }

  .share-bar-link {
    flex-direction: column;
    align-items: stretch;
  }

  .share-bar-field {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .share-bar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .table-wrap {
    margin: 0 -0.15rem;
    -webkit-overflow-scrolling: touch;
  }

  table.data-table {
    min-width: 560px;
    font-size: 0.85rem;
  }

  table.data-table th,
  table.data-table td {
    padding: 0.65rem 0.7rem;
  }

  /* Parent / list: hide table, show cards on mobile */
  .table-desktop {
    display: none;
  }

  .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .card:has(> .mobile-cards):not(.list-card):not(.kit-team-card) {
    padding: 0;
    background: transparent;
    border: 0;
    overflow: visible;
  }

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

  .match-list-head {
    display: none;
  }

  .match-row {
    display: flex;
    flex-wrap: wrap;
    grid-column: auto;
    gap: 0.75rem 1.1rem;
  }

  .match-row-body {
    flex: 1 1 12rem;
  }

  .match-row-tools {
    margin-left: auto;
  }

  .tournament-list .match-row-tools {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .list-card {
    padding: 0;
  }

  .list-card > .mobile-cards {
    padding: 0.85rem;
  }

  .list-card-toolbar .form-select,
  .list-card-toolbar .btn {
    max-width: none;
    width: auto;
  }

  .mobile-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    min-width: 0;
  }

  .mobile-card-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
    min-width: 0;
    width: 100%;
  }

  .mobile-card-title .person-name-text,
  .mobile-card-title a.person-name-text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mobile-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    color: var(--text-muted);
    min-width: 0;
  }

  .mobile-card-row > span:first-child {
    flex: 0 0 auto;
    max-width: 42%;
  }

  .mobile-card-row strong {
    color: var(--text);
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mobile-card-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .mobile-card-row--stack > span:first-child {
    max-width: none;
  }

  .mobile-card-row--stack .level-select-form,
  .mobile-card-row--stack .level-select {
    width: 100%;
    max-width: none;
  }

  .mobile-card-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .mobile-card-actions .btn {
    flex: 1 1 calc(50% - 0.2rem);
    justify-content: center;
    min-width: 0;
  }

  .partner-show-pay-all {
    width: 100%;
    justify-content: center;
    white-space: normal;
    height: auto;
    min-height: 42px;
  }

  .detail-inline-action {
    display: block;
    margin: 0.5rem 0 0;
  }

  .detail-inline-action .btn {
    width: 100%;
    justify-content: center;
  }

  .fee-banner,
  .billing-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .fee-banner .btn,
  .billing-banner .btn,
  .billing-banner a.btn {
    width: 100%;
    text-align: center;
  }

  .att-row {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .modal-backdrop:not([data-logout-modal]) {
    padding: 1rem;
    align-items: flex-end;
  }

  .modal-backdrop.id-card-lightbox,
  .modal-backdrop.photo-crop-backdrop,
  .modal-backdrop[data-pwa-install] {
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.85rem 1.5rem;
  }

  .id-card-lightbox-dialog {
    margin-left: auto;
    margin-right: auto;
  }

  .modal-backdrop:not([data-logout-modal]) .modal {
    max-width: none;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }

  .modal-backdrop[data-pwa-install] .pwa-install-modal {
    max-width: 22rem;
    width: 100%;
    border-radius: var(--radius);
    padding-bottom: 1.25rem;
    margin: 0 auto;
  }

  .modal-backdrop[data-pwa-install] .pwa-install-actions {
    flex-direction: row;
  }

  .modal-backdrop[data-pwa-install] .pwa-install-actions .btn {
    width: auto;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .player-picker-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .week-cal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1024px) {
  /* Logout confirm: middle of the screen, same as desktop */
  .modal-backdrop[data-logout-modal] {
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.85rem;
  }

  .modal-backdrop[data-logout-modal] .modal {
    width: min(17.5rem, 100%);
    max-width: min(17.5rem, 100%);
    border-radius: var(--radius);
    padding-bottom: 1.15rem;
  }

  .modal-backdrop[data-logout-modal] .modal-actions {
    flex-direction: row;
    justify-content: stretch;
  }

  .modal-backdrop[data-logout-modal] .modal-actions .btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

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

  .topbar {
    padding-left: max(0.65rem, env(safe-area-inset-left, 0));
    padding-right: max(0.65rem, env(safe-area-inset-right, 0));
  }

  .topbar-right {
    max-width: none;
  }

  .academy-share {
    display: none;
  }

  .content {
    padding: 0.85rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  .page-header .subtitle {
    font-size: 0.85rem;
  }

  .sidebar {
    width: min(300px, 92vw);
  }
}

/* Utility extras */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; padding: 0.35rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); text-decoration: none; font-size: 0.85rem;
  background: var(--accent-dim);
}
.chip.active, .chip:hover { color: #0a0f1a; background: var(--accent, #b8f000); border-color: var(--accent, #b8f000); }
button.chip {
  cursor: pointer;
  font: inherit;
}

/* Invoices page — keep chase + list on one screen */
.invoices-page .kpi-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.invoices-page .kpi-grid-compact .kpi-card {
  min-height: 0;
  padding: 0.85rem 1rem;
}
.invoices-page .mb-2 { margin-bottom: 0.75rem; }
.invoices-chase-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.invoices-chase-header .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}
.invoices-chase-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.invoices-chase-card {
  min-width: 0;
  overflow-x: hidden;
}
.invoices-chase-scroll {
  max-height: 16rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.table-wrap.invoices-chase-scroll {
  overflow-x: hidden;
}
.invoices-chase-table {
  table-layout: fixed;
  width: 100%;
  min-width: 0;
}
.invoices-chase-table th,
.invoices-chase-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
.invoices-details > summary {
  list-style: none;
  cursor: pointer;
}
.invoices-details > summary::-webkit-details-marker { display: none; }
.invoices-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.data-table-compact th,
.data-table-compact td {
  padding: 0.45rem 0.65rem;
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .invoices-page .kpi-grid-compact {
    grid-template-columns: 1fr;
  }
}
.inline-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.mark-paid-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1.6fr) minmax(8rem, 0.8fr) auto;
  gap: 0.75rem 1rem;
  align-items: end;
  padding: 0 1.1rem 0.35rem;
}
.mark-paid-form .form-group {
  margin: 0;
}
.mark-paid-form .mark-paid-submit {
  padding-bottom: 0.1rem;
}
@media (max-width: 800px) {
  .mark-paid-form {
    grid-template-columns: 1fr;
  }
}
.inline-actions.partner-show-share {
  justify-content: flex-start;
  align-items: stretch;
}
.inline-actions.partner-show-share form {
  display: flex;
  margin: 0;
}
.inline-actions.partner-show-share > .btn,
.inline-actions.partner-show-share > a,
.inline-actions.partner-show-share > form {
  flex: 1 1 calc(50% - 0.4rem);
  min-width: 8rem;
}
.inline-actions.partner-show-share .btn {
  width: 100%;
  min-height: 42px;
  white-space: normal;
}
.partner-show-pay-wrap { margin: 0 0 1rem; }
.detail-inline-action { display: inline; margin-left: 0.5rem; }
.auth-brand { font-family: Outfit, sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; }
.auth-brand .accent, .brand .accent { color: var(--accent, #b8f000); }
.auth-sub, .auth-footer { color: var(--muted, #94a3b8); font-size: 0.9rem; }
.auth-footer { margin-top: 1.25rem; text-align: center; }
.auth-footer a { color: var(--accent, #b8f000); }
.btn-block { width: 100%; }
.mb-3 { margin-bottom: 1.25rem; }
.text-right { text-align: right; }

/* Payment split UI */
.pay-method-list {
  display: grid;
  gap: 0.65rem;
}
.pay-method-list .status-option,
.pay-method-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
}
.pay-method-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.pay-method-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.28rem;
  flex-shrink: 0;
  max-width: 10.5rem;
}
.pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  padding: 0.15rem 0.28rem;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.pay-logo--wide {
  height: 2.55rem;
  padding: 0.2rem 0.35rem;
}
.pay-logo--dark {
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.pay-logo--plain {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.pay-logo svg,
.pay-logo img {
  display: block;
  height: 1.35rem;
  width: auto;
  object-fit: contain;
}
.pay-logo--wide img {
  height: 2.15rem;
}
.pay-logo--app {
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  background: #fff;
  overflow: hidden;
}
.pay-logo--app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pay-logo--pad {
  padding: 0.22rem;
}
@media (min-width: 768px) {
  .pay-method-list {
    grid-template-columns: 1fr 1fr;
  }
}

.promo-code-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.promo-code-row .form-control {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.promo-code-row .btn {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.fee-row { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); }
.fee-row strong { color: var(--text); }
.fee-total { margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 1.1rem; color: var(--text); }
.fee-total strong { color: var(--accent); }
.split-legend { display: flex; flex-direction: column; gap: 0.75rem; }
.split-item { padding: 0.75rem 1rem; border-radius: 10px; border-left: 3px solid; background: rgba(255,255,255,0.03); }
.split-item span { display: block; font-weight: 600; color: #fff; }
.split-item em { font-style: normal; font-size: 0.85rem; color: var(--muted, #94a3b8); }
.split-item.academy { border-color: #38bdf8; }
.split-item.platform { border-color: var(--accent, #b8f000); }
.split-item.gateway { border-color: #f59e0b; }
.scale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.scale-list li { color: var(--muted, #94a3b8); }
.scale-list .scale-total { color: #fff; padding-top: 0.5rem; border-top: 1px solid var(--border, #1e293b); }
.callout { padding: 0.9rem 1rem; border-radius: 10px; background: rgba(184,240,0,0.08); border: 1px solid rgba(184,240,0,0.25); color: #e2e8f0; font-size: 0.9rem; }
.callout-lime strong { color: var(--accent, #b8f000); }

/* Multi-sport landing */
.hero-tagline {
  margin: 0.75rem 0 0;
  color: var(--accent, #b8f000);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sports-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
  max-width: 960px;
  margin: 0 auto;
}

.section-sports {
  max-width: none;
  overflow: hidden;
}

.sports-marquee {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.sports-marquee-viewport {
  overflow: hidden;
  padding: 0.35rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.sports-marquee-track {
  display: flex;
  width: max-content;
  animation: sports-marquee 120s linear infinite;
}

.sports-marquee-viewport.is-reverse .sports-marquee-track {
  animation-duration: 150s;
  animation-direction: reverse;
}

.sports-marquee-set {
  display: flex;
  gap: 0.85rem;
  padding-right: 0.85rem;
}

.sports-marquee .sport-card {
  flex: 0 0 8.35rem;
  width: 8.35rem;
  min-height: 6.85rem;
  padding: 1rem 0.65rem 0.9rem;
}

.sports-marquee .sport-card-icon {
  width: 44px;
  height: 44px;
  font-size: 1.45rem;
}

.sports-marquee:hover .sports-marquee-track,
.sports-marquee:focus-within .sports-marquee-track {
  animation-play-state: paused;
}

@keyframes sports-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sports-marquee-track {
    animation: none;
  }

  .sports-marquee-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .sports-marquee-set + .sports-marquee-set,
  .sports-marquee-viewport.is-reverse {
    display: none;
  }
}
.sport-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, #1e293b);
  color: #fff;
  font-weight: 500;
}
.sport-emoji { font-size: 1.35rem; line-height: 1; }
.sport-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 7.75rem;
  padding: 1.15rem 0.75rem 1.05rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  transition:
    border-color var(--transition),
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    color var(--transition);
}
.sport-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
  transition: opacity var(--transition);
}
.sport-card:hover {
  color: #fff;
  border-color: rgba(184, 240, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(184, 240, 0, 0.08), transparent 50%),
    var(--card-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(184, 240, 0, 0.08);
}
.sport-card:hover::before {
  opacity: 1;
}
.sport-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
  border-radius: 14px;
  background: var(--accent-dim);
  border: 1px solid rgba(184, 240, 0, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sport-card:hover .sport-card-icon {
  background: rgba(184, 240, 0, 0.18);
  box-shadow: 0 0 0 4px rgba(184, 240, 0, 0.08);
}
.sport-card-name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sport-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid rgba(184, 240, 0, 0.2);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sport-card.is-empty {
  opacity: 0.78;
}
.sport-card.is-empty .sport-card-count {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
.section-directory {
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}
.section-directory .directory-total {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
}
.section-directory .sport-card {
  min-height: 9rem;
}
.directory-search {
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}
.directory-search-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.directory-search-form .form-control,
.directory-search-form .btn {
  box-sizing: border-box;
  height: 2.375rem;
  min-height: 2.375rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  line-height: 1.3;
  border-radius: var(--radius-sm);
}
.directory-search-form .form-control {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}
.directory-search-form input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
.directory-search-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.directory-search-hint {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}
.directory-results {
  margin: 0 auto 2.25rem;
  max-width: 720px;
}
.directory-results-head {
  text-align: center;
  margin-bottom: 1rem;
}
.directory-results-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.directory-browse-label {
  text-align: center;
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.directory-empty {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}
.directory-back {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
}
.directory-back a {
  color: var(--text-muted);
}
.directory-back a:hover {
  color: var(--accent);
}
.directory-sport-emoji {
  display: inline-block;
  margin-right: 0.35rem;
}
.sports-footnote {
  display: block;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 1.75rem auto 0;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: var(--accent-dim);
  border: 1px solid rgba(184, 240, 0, 0.22);
  color: var(--accent, #b8f000) !important;
  font-weight: 600;
  font-size: 0.88rem;
  text-align: center;
  line-height: 1.4;
}
.auth-card-wide { max-width: 560px; }
.sport-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.sport-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border, #1e293b);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-size: 0.88rem;
  color: #e2e8f0;
}
.sport-select:has(input:checked) {
  border-color: var(--accent, #b8f000);
  background: rgba(184,240,0,0.08);
}
.sport-select input { accent-color: var(--accent, #b8f000); }
@media (max-width: 900px) {
  .sports-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sport-select-grid { grid-template-columns: 1fr; }
  .sports-grid { grid-template-columns: repeat(2, 1fr); }
  .sport-card { min-height: 6.75rem; padding: 1rem 0.6rem 0.9rem; }
  .sport-card-name { font-size: 0.84rem; }
  .directory-search-form { flex-direction: column; }
  .directory-search-form .btn { width: 100%; }
}

/* Pricing packages */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.pricing-card {
  background: var(--card, #151c2c);
  border: 1px solid var(--border, #1e293b);
  border-radius: 14px;
  padding: 1.25rem;
}
.pricing-card.is-inactive { opacity: 0.55; }
.pricing-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pricing-card-head h2 { margin: 0; font-size: 1.15rem; }
.pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0; }
.pricing-price strong { font-size: 1.85rem; color: var(--accent, #b8f000); }
.pricing-price span { color: var(--muted, #94a3b8); font-size: 0.9rem; }
.pricing-price-now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pricing-was {
  color: var(--muted, #94a3b8);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.pricing-limits, .pricing-features {
  list-style: none; margin: 0.75rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.9rem; color: #e2e8f0;
}
.pricing-features li::before { content: "✓ "; color: var(--accent, #b8f000); }
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* Legal pages & site footer */
.legal-wrap {
  max-width: 760px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  background: transparent;
  box-sizing: border-box;
  container-type: inline-size;
}
.legal-doc {
  background: rgba(7, 11, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg, 16px);
  padding: 2rem 1.6rem 2.4rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
body.legal-body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
.legal-body .landing-bg-net {
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, 0.35) 100%);
}
.legal-doc h1 { font-family: Outfit, sans-serif; font-size: 2rem; margin: 0 0 0.75rem; }
.legal-doc h2 { font-size: 1.15rem; margin: 1.75rem 0 0.65rem; color: #fff; }
.legal-doc h3 { font-size: 1rem; margin: 1.15rem 0 0.45rem; color: #e2e8f0; }
.legal-doc p, .legal-doc li {
  color: var(--muted, #94a3b8);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}
.legal-doc ul, .legal-doc ol {
  padding-left: 1.25rem;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.legal-doc .table-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0.9rem 0 1.25rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.legal-doc .data-table th,
.legal-doc .data-table td {
  color: #e2e8f0;
  white-space: normal;
}
.legal-doc .data-table th {
  color: #94a3b8;
}
.legal-doc a { color: var(--accent, #b8f000); }
.legal-doc code { font-size: 0.85em; color: #e2e8f0; }
.legal-lead { font-size: 1.05rem; color: #cbd5e1 !important; }
.legal-meta { margin-top: 2rem; font-size: 0.85rem; }
@media (max-width: 560px) {
  .legal-wrap {
    padding: 1.15rem 0.85rem 2.25rem;
  }
  .legal-doc {
    padding: 1.2rem 0.95rem 1.7rem;
  }
  .legal-doc h1 {
    font-size: 1.55rem;
  }
  .legal-doc p,
  .legal-doc li,
  .legal-lead {
    max-width: 21.25rem;
  }
  .legal-doc .data-table th,
  .legal-doc .data-table td {
    white-space: normal;
    padding: 0.65rem 0.55rem;
  }
  .legal-doc .payment-fee-table th.num,
  .legal-doc .payment-fee-table td.num {
    white-space: normal;
  }
}
.guide-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}
.guide-jump a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border, #1e293b);
  background: var(--card, #151c2c);
  font-size: 0.85rem;
  text-decoration: none;
}
.guide-card h2 { margin-top: 0; font-size: 1.15rem; }
.guide-card h3 { font-size: 1rem; margin: 1.35rem 0 0.4rem; color: #e2e8f0; }
.guide-card ol, .guide-card ul { padding-left: 1.25rem; margin: 0.65rem 0 0; }
.guide-card li { margin: 0.4rem 0; color: var(--text-muted, #94a3b8); }
.guide-whatsapp {
  margin: 0 0 1.5rem;
}
.guide-whatsapp-lead {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
}
.guide-whatsapp-grid {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 900px) {
  .guide-whatsapp-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
.guide-whatsapp-card {
  border: 1px solid var(--border, #1e293b);
  border-radius: 12px;
  background: rgba(15, 21, 34, 0.45);
  padding: 0.85rem 1rem;
}
.guide-whatsapp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.guide-whatsapp-text {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
}
.site-footer {
  border-top: 1px solid var(--border, #1e293b);
  padding: 1.5rem 1.25rem 2rem;
  margin-top: 2rem;
}
.site-footer-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.site-footer-brand { font-family: Outfit, sans-serif; font-weight: 700; }
.site-footer-brand .accent { color: var(--accent, #b8f000); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer-links a { color: var(--muted, #94a3b8); text-decoration: none; font-size: 0.9rem; }
.site-footer-links a:hover { color: var(--accent, #b8f000); }
.site-footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.site-footer-install {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted, #94a3b8);
  font: inherit;
  font-size: 0.9rem;
  line-height: inherit;
  cursor: pointer;
}
.site-footer-install:hover {
  color: var(--accent, #b8f000);
}
.site-footer-copy {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
  color: var(--muted, #94a3b8);
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0 0.5rem;
}
.site-footer-copy .site-footer-entity {
  font-size: 0.68rem;
  opacity: 0.85;
}
.sidebar-footer-links { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 0.5rem; }
.sidebar-footer-links a { color: var(--muted, #94a3b8); font-size: 0.75rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.28rem; }
.sidebar-footer-links a:hover { color: var(--accent, #b8f000); }
.sidebar-footer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  background: var(--accent-dim, rgba(184, 240, 0, 0.18));
  color: var(--accent, #b8f000);
}
.sidebar-footer-tag { font-size: 0.7rem; color: var(--muted, #64748b); }
.auth-shell .auth-card { max-width: none; width: 100%; }
.auth-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
  margin-top: 1.25rem;
  font-size: 0.85rem;
}
.auth-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.auth-legal-links a:hover {
  color: var(--accent);
}
.landing-footer { display: none; }

.public-pricing-grid {
  max-width: 1040px;
  margin: 0 auto;
  align-items: stretch;
}

.public-pricing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.public-pricing-card.is-featured {
  border-color: var(--accent, #b8f000);
  box-shadow: 0 0 0 1px var(--accent, #b8f000);
}

.public-pricing-card .pricing-price {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  margin: 0.1rem 0 0.35rem;
}

.public-pricing-card .pricing-billing {
  min-height: 0;
}

.home-plan {
  max-width: 24rem;
  margin: 0 auto;
}

.home-plan-cta {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.home-plan-cta .pricing-trial {
  margin-top: 0;
}

.public-pricing-card .pricing-card-head {
  flex-wrap: wrap;
  row-gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.pricing-badge {
  flex-shrink: 0;
  background: var(--accent, #b8f000);
  color: #0a0f1a;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  line-height: 1.2;
}

.pricing-billing {
  margin: 0;
  font-size: 0.85rem;
  min-height: 2.4em;
}

.public-pricing-card .pricing-features {
  flex: 1 1 auto;
}

.pricing-features li.is-muted {
  color: var(--text-muted);
}

.pricing-features li.is-muted::before {
  content: "• ";
  color: var(--text-muted);
}

.pricing-features li.is-off {
  color: var(--text-muted);
}

.pricing-features li.is-off::before {
  content: "✕ ";
  color: var(--text-muted);
}

.pricing-cta {
  margin-top: auto;
  padding-top: 1.25rem;
}

.pricing-cta .btn {
  min-height: 44px;
}

.pricing-trial {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}

.pricing-foot {
  margin: 2rem auto 0.85rem;
  max-width: 640px;
  text-align: center;
}

.pricing-notes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  text-align: center;
}

@media (max-width: 1024px) {
  .public-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .site-footer-inner {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .site-footer-links {
    justify-content: center;
  }
}
.landing-nav-links a.btn-ghost { text-decoration: none; }
.alert { padding: 0.85rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: 0.9rem; }
.alert-error { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); color: #fecaca; }
.alert-success { background: rgba(184,240,0,0.1); border: 1px solid rgba(184,240,0,0.3); color: #e2e8f0; }

/* Public academy directory */
a.public-sport-link {
  text-decoration: none;
  color: inherit;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.public-academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
}
a.public-academy-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
    var(--card);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  transition:
    border-color var(--transition),
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}
a.public-academy-card:hover {
  color: inherit;
  border-color: rgba(184, 240, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(184, 240, 0, 0.08), transparent 50%),
    var(--card-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}
a.public-academy-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}
.public-academy-logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.25rem;
}
.public-academy-logo.is-lg {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  font-size: 2rem;
}
.public-academy-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-academy-hero {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  max-width: 880px;
  margin: 0 auto 1.5rem;
  flex-wrap: wrap;
}
.public-academy-cta {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}
.public-academy-cta .share-bar {
  margin: 0;
}
.public-academy-cta .share-bar-icons {
  padding: 0.28rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.public-academy-cta .share-icon {
  width: 2.15rem;
  height: 2.15rem;
}
.public-academy-detail .public-academy-panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
}
.public-academy-detail .meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.public-academy-detail .meta-item.full {
  grid-column: 1 / -1;
}
.public-academy-detail .meta-item .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 0.25rem;
}
.public-academy-detail .meta-item .value {
  font-weight: 600;
}
.public-academy-detail .meta-item .value a {
  color: var(--accent, #b8f000);
  text-decoration: none;
  word-break: break-word;
}
.public-academy-detail .meta-item .value a:hover {
  text-decoration: underline;
}

.public-academy-detail .public-loc-address {
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.public-academy-detail .place-map-links {
  margin-top: 0.45rem;
  gap: 0.4rem;
}

.public-academy-detail .place-map-links .btn {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.2;
}

.public-academy-detail .place-map-links .btn:hover {
  text-decoration: none;
}

.public-academy-detail .public-panel-table-wrap {
  overflow-x: hidden;
}

.public-academy-detail .public-panel-table {
  min-width: 0 !important;
  table-layout: fixed;
  width: 100%;
  font-size: 0.88rem;
}

.public-academy-detail .public-panel-table th,
.public-academy-detail .public-panel-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
  padding: 0.7rem 0.75rem;
}

.public-academy-detail .public-loc-table th:nth-child(1),
.public-academy-detail .public-loc-table td:nth-child(1) {
  width: 32%;
}

.public-academy-detail .public-loc-table th:nth-child(2),
.public-academy-detail .public-loc-table td:nth-child(2) {
  width: 68%;
}

@media (max-width: 640px) {
  .public-academy-detail .meta-grid {
    grid-template-columns: 1fr;
  }
  .public-academy-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }
  .public-academy-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1.15rem;
    font-size: 0.95rem;
  }
  .public-academy-cta .share-bar--icons-only {
    width: 100%;
    flex-wrap: wrap;
  }
  .public-academy-cta .share-bar-icons {
    border-radius: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .public-academy-detail .public-panel-table {
    font-size: 0.82rem;
  }

  .public-academy-detail .public-panel-table th,
  .public-academy-detail .public-panel-table td {
    padding: 0.55rem 0.55rem;
  }

  /* Keep the public schedule card (don’t flatten like admin list pages). */
  .public-academy-detail .card:has(> .public-schedule-cards) {
    padding: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
  }

  .public-academy-detail .public-schedule-cards {
    margin-top: 0.75rem;
  }

  .public-academy-detail .public-schedule-cards .mobile-card-title {
    margin-bottom: 0.55rem;
  }
}

/* Week calendar */
.week-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.week-cal-range {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
}

.week-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  overflow: hidden;
}

.week-cal-day {
  background: var(--card);
  min-height: 140px;
  padding: 0.65rem 0.55rem 0.75rem;
}

.week-cal-day.is-today {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
}

.week-cal-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}

.week-cal-day.has-link {
  cursor: pointer;
}

.week-cal-day-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.week-cal-day-link:hover .week-cal-dom {
  color: var(--accent);
}

.week-cal-dow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.week-cal-dom {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.week-cal-events {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.week-cal-empty {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.week-cal-event {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  transition: border-color var(--transition);
}

a.week-cal-event:hover {
  border-color: rgba(184, 240, 0, 0.45);
}

tr.is-jump-focus td,
.mobile-card.is-jump-focus {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.week-cal-event.type-training {
  border-left: 3px solid var(--accent);
}

.week-cal-event.type-match {
  border-left: 3px solid #5b8cff;
}

.week-cal-event.type-tournament {
  border-left: 3px solid #c084fc;
}

.week-cal-event.type-cancelled {
  border-left: 3px solid var(--danger);
}

.week-cal-event-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
  word-break: break-word;
}

.week-cal-event-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
}

.week-cal-event-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
}

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

  .week-cal-day {
    min-height: 0;
  }

  .week-cal-day-head {
    margin-bottom: 0.4rem;
  }
}

/* Transfer create — compact, full content width, fits phone viewport */
.transfer-create-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.transfer-create-header {
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.transfer-create-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.transfer-create-heading .subtitle {
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.transfer-request-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.1rem 1.15rem;
}

.transfer-search-group {
  margin-bottom: 0.85rem;
}

.transfer-search-bar {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.transfer-search-bar .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.transfer-search-bar .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.transfer-results {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  max-height: min(28vh, 200px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.transfer-result-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  box-sizing: border-box;
}

.transfer-result-row:hover,
.transfer-result-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.transfer-result-photo,
.transfer-preview-photo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--card);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
}

.transfer-preview-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.transfer-result-photo img,
.transfer-preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transfer-preview-initial {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}

.transfer-result-body {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}

.transfer-result-body strong {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-result-body span {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-preview {
  margin: 0 0 0.85rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
  box-sizing: border-box;
}

.transfer-preview-inner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  min-width: 0;
}

.transfer-preview-meta {
  flex: 1;
  min-width: 0;
}

.transfer-preview-meta h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  word-break: break-word;
}

.transfer-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.65rem;
  margin-top: 0.55rem;
}

.transfer-preview-grid .label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.transfer-preview-grid .value {
  font-weight: 600;
  font-size: 0.85rem;
  word-break: break-word;
}

.transfer-note-group {
  margin-bottom: 0.85rem;
}

.transfer-note-group textarea.form-control {
  min-height: 0;
  resize: vertical;
}

.transfer-request-card .form-actions {
  margin-top: 0;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .transfer-create-header {
    margin-bottom: 0.75rem;
  }

  .transfer-create-heading h1 {
    font-size: 1.2rem;
  }

  .transfer-create-heading .subtitle {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .transfer-request-card {
    width: 100%;
    max-width: 100%;
    padding: 0.9rem;
  }

  .transfer-search-bar {
    flex-direction: row;
  }

  .transfer-search-bar .btn {
    min-width: 4.5rem;
    justify-content: center;
  }

  .transfer-results {
    max-height: min(26vh, 180px);
  }

  .transfer-preview-inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .transfer-preview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .transfer-request-card .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .transfer-request-card .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .transfer-request-card {
    padding: 0.8rem;
  }

  .transfer-search-bar {
    flex-direction: column;
  }

  .transfer-search-bar .btn {
    width: 100%;
  }

  .transfer-preview-grid {
    grid-template-columns: 1fr;
  }
}

.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-pdf-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

/* SD+ Hub branded HTTP errors */
.hub-error-page .landing-nav {
  justify-content: flex-start;
}

.hub-error-card {
  text-align: center;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.hub-error-code {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.hub-error-title {
  margin: 0 0 0.65rem;
  font-size: 1.35rem;
  font-weight: 600;
}

.hub-error-message {
  margin: 0 0 1.35rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.hub-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
}

.hub-error-tagline {
  margin-top: 1.5rem !important;
}


/* Optional person documents (ID / certificates) */
.person-docs-card { margin-top: 0; }
.person-docs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}
.person-docs-lead { margin: 0 0 1rem; }
.person-docs-empty { margin: 0; }
.person-docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.person-docs-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border, #1e293b);
}
.person-docs-item:last-child { border-bottom: none; }
.person-docs-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}
.person-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.person-docs-modal {
  width: min(28rem, 100%);
}
.person-docs-limit {
  margin: 0.75rem 0 0;
}
.mt-3 { margin-top: 1.25rem; }

.modal-backdrop.pwa-install-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}
.modal-backdrop.pwa-install-backdrop[hidden] {
  display: none !important;
}
.pwa-install-modal {
  max-width: 22rem;
  width: min(22rem, 100%) !important;
  text-align: center;
  align-self: center !important;
  margin: auto !important;
  border-radius: var(--radius) !important;
}
.pwa-install-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 0.85rem;
  border-radius: 16px;
}
.pwa-install-actions {
  justify-content: stretch;
}
.pwa-install-actions .btn {
  flex: 1 1 0;
  min-height: 44px;
}

/* Public digital ID gate check (/id/{token}) */
.id-verify-page .id-verify-top {
  display: flex;
  justify-content: center;
  padding: 1.15rem 1.25rem 0;
}

.id-verify-wrap {
  width: min(22.5rem, calc(100% - 2rem));
  margin: 1.25rem auto 2.5rem;
}

.id-verify-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
  text-align: center;
}

.id-verify-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.15rem 1.25rem;
  background: rgba(7, 11, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.15rem;
  backdrop-filter: blur(16px);
}

.id-verify-card--trial {
  border-color: rgba(245, 158, 11, 0.45);
}

.id-verify-card--inactive {
  border-color: rgba(239, 68, 68, 0.45);
}

.id-verify-photo {
  width: 8.5rem;
  height: 11.2rem;
  margin: 0 auto;
  border-radius: 0.65rem;
  overflow: hidden;
  background: #1e293b;
  display: grid;
  place-items: center;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--accent, #b8f000);
}

.id-verify-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-verify-body {
  text-align: center;
}

.id-verify-role {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.id-verify-name {
  margin: 0.2rem 0 0.55rem;
  font-family: Outfit, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.id-verify-academy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #e2e8f0;
}

.id-verify-academy img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  border-radius: 0.28rem;
  background: #fff;
}

.id-verify-team {
  margin: 0 0 0.75rem;
  color: #cbd5e1;
}

.id-verify-status {
  margin: 0 0 0.7rem;
}

.id-verify-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.id-verify-card--inactive .id-verify-note {
  color: #fca5a5;
}

.id-verify-card--trial .id-verify-note {
  color: #fcd34d;
}

.id-verify-foot {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #64748b;
}

.modal-backdrop.push-alert-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 390;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 1.25rem;
}
.modal-backdrop.push-alert-backdrop[hidden] {
  display: none !important;
}
.push-alert-modal {
  max-width: 22rem;
  width: min(22rem, 100%) !important;
  text-align: center;
  align-self: center !important;
  margin: auto !important;
  border-radius: var(--radius) !important;
}
.push-alert-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 0.85rem;
  border-radius: 16px;
}
.push-alert-actions {
  justify-content: stretch;
}
.push-alert-actions .btn {
  flex: 1 1 0;
  min-height: 44px;
}
.push-alert-error {
  color: var(--danger, #f87171) !important;
  margin-top: -0.25rem;
}