/* ============================================================
   Portal + shared design tokens, layout shell and screen styles
   ============================================================ */

/* ── BRAND TOKENS — the ONE place the brand colour is defined ──
   Every stylesheet (app, admin, finance, store, admin-shop) and every
   inline style uses these. To rebrand, change this block only; canvas
   charts and email HTML (which cannot read CSS variables) use the same
   hex values from BRAND_COLOR in src/lib/academy.ts.

   #4A6EE0 is chosen so it passes WCAG AA (4.5:1) both as white-on-brand
   (buttons) and as brand-on-black/white (accent text) — it is used for
   both throughout. */
:root {
  --brand-bright: #4A6EE0;   /* main accent: buttons, links, active states */
  --brand:        #3E60CC;   /* hover / secondary */
  --brand-dim:    #2A438F;   /* gradient base, deep accent */
  --brand-rgb:    74,110,224; /* for rgba(var(--brand-rgb), alpha) */
  --danger:        #dc2626;
  --danger-bright: #ef4444;

  /* Surfaces */
  --bg-0:  #000000;
  --bg-1:  #0a0a0b;
  --bg-2:  #111114;
  --bg-3:  #18181d;
  --bg-4:  #1f1f25;

  /* Borders */
  --border-1: rgba(255,255,255,0.06);
  --border-2: rgba(255,255,255,0.10);
  --border-glow: rgba(var(--brand-rgb),0.40);

  /* Text */
  --text-1: #ffffff;
  --text-2: #d4d4d8;
  --text-3: #a1a1aa;
  --text-4: #71717a;
  --text-5: #52525b;

  /* Status — semantic, independent of the brand colour */
  --status-present: #22c55e;
  --status-absent:  #ef4444;
  --status-late:    #f59e0b;
  --status-paid:    #22c55e;
  --status-pending: #f59e0b;

  /* Effects */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.40), 0 0 0 1px var(--border-1);
  --shadow-glow:  0 0 32px rgba(var(--brand-rgb),0.20);
  --shadow-glow-red: 0 0 32px rgba(239,68,68,0.18);

  /* Layout */
  --phone-w: 390px;
  --phone-h: 820px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

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

html, body {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ============================================================
   DESKTOP STAGE - shows phone in center for desktop preview
   ============================================================ */
.stage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(var(--brand-rgb),0.08), transparent 60%),
    radial-gradient(800px 400px at 80% 100%, rgba(220,38,38,0.06), transparent 60%),
    var(--bg-0);
  position: relative;
}

.stage::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

/* Phone frame for desktop preview */
.phone-frame {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  border-radius: 56px;
  background: linear-gradient(180deg, #1a1a1f, #0a0a0b);
  padding: 12px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.04),
    0 30px 60px -10px rgba(0,0,0,0.7),
    0 0 100px rgba(var(--brand-rgb),0.10);
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--bg-1);
  overflow: hidden;
  position: relative;
}

/* Mobile native rendering: full screen on real mobile devices */
@media (max-width: 480px) {
  .stage { padding: 0; min-height: 100dvh; }
  .phone-frame {
    width: 100%; height: 100dvh;
    border-radius: 0; padding: 0;
    box-shadow: none;
    background: var(--bg-1);
  }
  .phone-screen { border-radius: 0; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-1);
  position: relative;
}

.app-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 100px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.status-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
  flex-shrink: 0;
}
.topbar .icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 16px;
  border: 1px solid var(--border-1);
  position: relative;
  transition: all .2s;
}
.topbar .icon-btn:hover { background: var(--bg-4); border-color: var(--border-2); }
.topbar .icon-btn .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px;
  background: var(--brand-bright);
  border: 2px solid var(--bg-3);
  border-radius: 50%;
}
.topbar-logo {
  width: 42px; height: 42px;
  background: center/contain no-repeat;
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
.splash {
  width: 100%; height: 100%;
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 60%, #000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  text-align: center;
  overflow: hidden;
}

.splash::before {
  content: '';
  position: absolute;
  top: -20%; left: -20%; right: -20%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb),0.18), transparent 65%);
  pointer-events: none;
}

.splash-logo {
  display: block;
  width: 220px; height: 220px;
  margin: 0 auto 32px;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(var(--brand-rgb),0.35)) drop-shadow(0 0 24px rgba(0,0,0,0.5));
  animation: float 4s ease-in-out infinite;
  position: relative; z-index: 2;
}

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

.splash-welcome {
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 8px;
  position: relative; z-index: 2;
}

.splash-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-1);
  margin-bottom: 6px;
  position: relative; z-index: 2;
}

.splash-subtitle {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 32px;
  position: relative; z-index: 2;
}

.splash-tagline {
  font-size: 14px;
  color: var(--brand-bright);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 40px;
  position: relative; z-index: 2;
}

.splash-actions {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 2;
}

.splash-flag {
  position: absolute;
  bottom: 24px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 4px;
  z-index: 2;
}
.splash-flag span { width: 28px; height: 4px; border-radius: 2px; }
.splash-flag .g { background: var(--brand-bright); }
.splash-flag .w { background: #fff; }
.splash-flag .r { background: var(--danger-bright); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  letter-spacing: -0.01em;
  transition: all .2s ease;
}
.btn-primary {
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  color: #fff;
  box-shadow:
    0 8px 24px rgba(var(--brand-rgb),0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(var(--brand-rgb),0.42), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text-1);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); }

.btn-danger {
  background: linear-gradient(180deg, var(--danger-bright), var(--danger));
  color: #fff;
  box-shadow:
    0 8px 24px rgba(220,38,38,0.32),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-danger:hover { transform: translateY(-1px); }

/* ============================================================
   HOME SCREEN
   ============================================================ */
.greeting { padding: 0 20px 20px; }
.greeting .hi {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.greeting .name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 8px;
}
.greeting .name .wave { font-size: 26px; animation: wave 2s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes wave {
  0%,60%,100% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}
.greeting .sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* Player highlight card with photo */
.hero-card {
  margin: 0 20px 16px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(120deg, rgba(var(--brand-rgb),0.20) 0%, rgba(var(--brand-rgb),0.05) 40%, transparent 70%),
    var(--bg-2);
  border: 1px solid var(--border-2);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  padding: 20px;
}
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb),0.12), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(220,38,38,0.06), transparent 50%);
  pointer-events: none;
}
.hero-info { flex: 1; position: relative; z-index: 2; display: flex; flex-direction: column; }
.hero-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.hero-meta { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.hero-status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(var(--brand-rgb),0.15);
  border: 1px solid rgba(var(--brand-rgb),0.35);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--brand-bright);
  align-self: flex-start;
}
.hero-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 8px var(--brand-bright);
}
.hero-next {
  margin-top: auto; padding-top: 16px;
}
.hero-next .label { font-size: 11px; color: var(--text-4); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.hero-next .when { font-size: 14px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.hero-next .when i { color: var(--brand-bright); font-size: 13px; }

.hero-photo {
  width: 130px; height: auto;
  position: relative; z-index: 2;
  align-self: stretch;
  background: url('/static/player-default.svg') center/cover no-repeat;
  margin: -20px -20px -20px 8px;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 25%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%);
}

/* Phase 36 — when hero-photo also carries .av-frame we override the
   gradient-strip style and render a clean round "AI avatar" portrait. */
.hero-photo.av-frame {
  width: 132px; height: 132px;
  margin: 0 4px 0 8px;
  align-self: center;
  border-radius: 50%;
  mask-image: none;
  -webkit-mask-image: none;
  background-color: #0e0e10;
  background-image:
    radial-gradient(ellipse at center top, #1a1a1f 0%, #0e0e10 65%, #050507 100%);
}
.hero-photo.av-frame.has-photo {
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
}
@media (min-width: 480px) {
  .hero-photo.av-frame { width: 168px; height: 168px; }
}

/* Stat tiles */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 20px 16px;
}
.stat-tile {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}
.stat-tile:hover { border-color: var(--border-2); transform: translateY(-1px); }
.stat-tile .tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.stat-tile .tile-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-tile .tile-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.stat-tile .tile-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px;
}
.stat-tile.green .tile-icon { background: rgba(var(--brand-rgb),0.15); color: var(--brand-bright); }
.stat-tile.red   .tile-icon { background: rgba(239,68,68,0.15); color: var(--danger-bright); }
.stat-tile.amber .tile-icon { background: rgba(245,158,11,0.15); color: #fbbf24; }
.stat-tile.blue  .tile-icon { background: rgba(59,130,246,0.15); color: #60a5fa; }
.stat-tile .tile-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--brand-bright);
  margin-top: 4px;
}

/* Coach note card */
.note-card {
  margin: 0 20px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex; gap: 12px;
}
.note-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--border-2);
}
.note-body { flex: 1; min-width: 0; }
.note-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 4px;
}
.note-text { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.note-by   { font-size: 11px; color: var(--text-4); margin-top: 6px; }
/* Batch C item 3a — empty state when no coach note has been sent yet */
.note-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-4);
  font-size: 18px;
  background: var(--bg-3);
}
.note-card-empty .note-text { font-style: italic; }

/* Section headers */
.section-head {
  padding: 8px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.section-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.section-head a { font-size: 12px; color: var(--brand-bright); font-weight: 600; }

/* Quick links horizontal */
.quick-links {
  display: flex; gap: 10px;
  padding: 0 20px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-links::-webkit-scrollbar { display: none; }
.quick-link {
  flex-shrink: 0;
  min-width: 110px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: start;
  transition: all .2s;
}
.quick-link:hover { background: var(--bg-3); border-color: var(--border-2); }
.quick-link i { font-size: 18px; color: var(--brand-bright); margin-bottom: 10px; display: block; }
.quick-link .ql-title { font-size: 13px; font-weight: 600; }
.quick-link .ql-sub { font-size: 11px; color: var(--text-4); margin-top: 2px; }

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(10,10,11,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-1);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  z-index: 50;
}
.tab {
  flex: 1; max-width: 80px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 12px;
  color: var(--text-4);
  transition: color .2s;
  position: relative;
}
.tab i { font-size: 18px; }
.tab span { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
.tab.active { color: var(--brand-bright); }
.tab.active::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--brand-bright);
  box-shadow: 0 0 12px var(--brand-bright);
}

/* ============================================================
   PROFILE SCREEN
   ============================================================ */
.profile-header {
  position: relative;
  padding: 24px 20px 20px;
  text-align: center;
}
.profile-avatar-wrap {
  width: 140px; height: 140px;
  margin: 8px auto 16px;
  position: relative;
}
.profile-avatar-ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--brand-bright), var(--danger-bright), var(--brand-bright));
  filter: blur(0.5px);
  opacity: 0.6;
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.profile-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
  position: relative; z-index: 2;
  border: 4px solid var(--bg-1);
}
.profile-name { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.profile-role { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.profile-active {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 4px 12px;
  background: rgba(var(--brand-rgb),0.15);
  border: 1px solid rgba(var(--brand-rgb),0.35);
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--brand-bright);
}
.profile-active::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 8px var(--brand-bright);
}

/* Pills tab strip */
.tabs-strip {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 16px;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-strip::-webkit-scrollbar { display: none; }
.tab-link {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-4);
  position: relative;
  white-space: nowrap;
  transition: color .2s;
  cursor: pointer;
}
.tab-link:hover { color: var(--text-2); }
.tab-link.active { color: var(--text-1); }
.tab-link.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 14px; right: 14px;
  height: 2px;
  background: var(--brand-bright);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--brand-bright);
}

/* Info rows */
.info-list {
  margin: 0 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.info-row {
  display: flex; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
}
.info-row:last-child { border-bottom: none; }
.info-row .ir-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(var(--brand-rgb),0.10);
  color: var(--brand-bright);
  font-size: 12px;
  margin-inline-end: 12px;
}
.info-row .ir-label { font-size: 13px; color: var(--text-2); flex: 1; }
.info-row .ir-value { font-size: 13px; font-weight: 600; color: var(--text-1); }

.profile-cta {
  margin: 20px;
}

/* ============================================================
   PROGRESS SCREEN
   ============================================================ */
.progress-header {
  padding: 8px 20px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.progress-header h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.period-pill {
  padding: 6px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 6px;
}

.donut-card {
  margin: 0 20px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.donut-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(var(--brand-rgb),0.12), transparent 60%);
  pointer-events: none;
}
.donut-wrap {
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto 16px;
}
.donut-wrap canvas { position: absolute; inset: 0; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center .pct {
  font-size: 52px; font-weight: 800; letter-spacing: -0.04em;
  font-family: 'Space Grotesk', sans-serif;
  background: linear-gradient(180deg, #fff, #d4d4d8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.donut-center .lbl { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.donut-msg { font-size: 13px; color: var(--brand-bright); font-weight: 500; }

/* Skill rows */
.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-dim), var(--brand-bright));
  border-radius: 3px;
  position: relative;
  width: 0%;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.skill-fill::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 16px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
}

/* ============================================================
   PAYMENTS SCREEN
   ============================================================ */
.due-card {
  margin: 0 20px 20px;
  background:
    linear-gradient(135deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.04) 100%),
    var(--bg-2);
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.due-card::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(239,68,68,0.18), transparent 70%);
  pointer-events: none;
}
.due-label { font-size: 11px; color: var(--text-3); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.due-amount {
  margin-top: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--danger-bright);
  display: flex; align-items: baseline; gap: 8px;
}
.due-amount .currency { font-size: 16px; font-weight: 600; color: var(--text-3); letter-spacing: 0.04em; }
.due-when {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
}

/* History rows */
.history-list {
  margin: 0 20px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.history-row {
  display: flex; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
  gap: 12px;
}
.history-row:last-child { border-bottom: none; }
.history-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 13px;
  flex-shrink: 0;
}
.history-body { flex: 1; min-width: 0; }
.history-title { font-size: 13px; font-weight: 600; }
.history-date  { font-size: 11px; color: var(--text-4); margin-top: 2px; }
.history-amt   {
  text-align: end;
  font-size: 13px; font-weight: 700;
}
.status-pill {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
}
.status-pill.paid    { background: rgba(var(--brand-rgb),0.15); color: var(--brand-bright); }
.status-pill.pending { background: rgba(245,158,11,0.15); color: #fbbf24; }

.view-all {
  margin: 14px 20px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.view-all:hover { background: var(--bg-3); color: var(--text-1); }

/* ============================================================
   SCHEDULE SCREEN
   ============================================================ */
.schedule-header {
  padding: 4px 20px 16px;
}
.schedule-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
.schedule-header p { font-size: 13px; color: var(--text-3); }

.schedule-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: flex; gap: 14px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  transition: all .2s;
  cursor: pointer;
}
.event-card:hover { background: var(--bg-3); border-color: var(--border-2); }
.event-card.match {
  background: linear-gradient(120deg, rgba(var(--brand-rgb),0.12), transparent 50%), var(--bg-2);
  border-color: rgba(var(--brand-rgb),0.25);
}
.event-date {
  width: 56px;
  flex-shrink: 0;
  text-align: center;
  padding: 8px 0;
  background: var(--bg-3);
  border-radius: 12px;
  border: 1px solid var(--border-1);
}
.event-card.match .event-date { background: rgba(var(--brand-rgb),0.12); border-color: rgba(var(--brand-rgb),0.30); }
.event-date .day  { font-size: 10px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.event-date .num  { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -0.02em; }
.event-body { flex: 1; min-width: 0; }
.event-title { font-size: 14px; font-weight: 700; }
.event-meta { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 12px; }
.event-meta i { color: var(--brand-bright); margin-inline-end: 4px; }
.event-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.event-tag.training { background: rgba(59,130,246,0.15); color: #60a5fa; }
.event-tag.match    { background: rgba(var(--brand-rgb),0.18); color: var(--brand-bright); }

/* ── Phase 76: PRIVATE SESSIONS ──────────────────────────────
   Violet, distinct from both training blue and match gold, so a parent can
   tell a paid 1-on-1 from team training at a glance on a crowded schedule. */
.event-tag.private  { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.event-card.private {
  background: linear-gradient(120deg, rgba(167,139,250,0.10), transparent 50%), var(--bg-2);
  border-color: rgba(167,139,250,0.25);
}
.event-card.private .event-date {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.30);
}
.event-card.private .event-meta i { color: #c4b5fd; }
/* Replaces the age-group pill: a private group may mix age groups, so a
   single team label would be misleading. */
.event-private-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-inline-end: 6px;
  border-radius: 6px; font-size: 10px;
  background: rgba(167,139,250,0.18); color: #c4b5fd;
  vertical-align: middle;
}

/* ============================================================
   MESSAGES SCREEN
   ============================================================ */
.msg-header {
  padding: 4px 20px 16px;
}
.msg-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.msg-search {
  margin: 0 20px 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
}
.msg-search i { color: var(--text-4); font-size: 13px; }
.msg-search input {
  flex: 1;
  background: transparent;
  border: none; outline: none;
  color: var(--text-1);
  font-size: 13px;
}
.msg-search input::placeholder { color: var(--text-4); }

.msg-list { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.msg-row {
  display: flex; gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  transition: background .2s;
  cursor: pointer;
  align-items: center;
}
.msg-row:hover { background: var(--bg-2); }
.msg-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--border-1);
}
.msg-body { flex: 1; min-width: 0; }
.msg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.msg-from { font-size: 14px; font-weight: 600; }
.msg-time { font-size: 11px; color: var(--text-4); flex-shrink: 0; }
.msg-preview { font-size: 12px; color: var(--text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-row.unread .msg-from { color: var(--text-1); }
.msg-row.unread .msg-preview { color: var(--text-2); }
.msg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-bright);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--brand-bright);
}

/* ============================================================
   COMMON: page header with back
   ============================================================ */
.page-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px 16px;
}
.page-head .back-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  color: var(--text-1);
  font-size: 14px;
  transition: all .2s;
}
.page-head .back-btn:hover { background: var(--bg-4); }
.page-head h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; flex: 1; }
.page-head .head-action {
  display: flex; gap: 8px;
}

/* ============================================================
   FOOTER PROMO STRIP - desktop only
   ============================================================ */
.promo-strip {
  display: none;
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 24px 32px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (min-width: 900px) {
  .promo-strip { display: flex; }
}
.promo-item {
  flex: 1; min-width: 180px;
  display: flex; gap: 12px; align-items: flex-start;
}
.promo-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(var(--brand-rgb),0.10);
  color: var(--brand-bright);
  font-size: 14px;
  border: 1px solid rgba(var(--brand-rgb),0.20);
}
.promo-text .pt-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 4px;
}
.promo-text .pt-body { font-size: 12px; color: var(--text-3); line-height: 1.5; }

.promo-mission {
  flex: 1.2; min-width: 200px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.promo-mission .green { color: var(--brand-bright); }
.promo-mission .red   { color: var(--danger-bright); }

.promo-logo {
  width: 64px; height: 64px;
  background: url('/static/logo.png') center/contain no-repeat;
}

/* Animations */
.fade-in { animation: fadeIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide pages by default — only active page shown */
.page { display: none; }
.page.active { display: flex; flex-direction: column; min-height: 100%; }

/* ─── Child picker ──────────────────────────────────────── */
.child-picker {
  display: flex;
  gap: 10px;
  padding: 0 20px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 4px;
}
.child-picker::-webkit-scrollbar { display: none; }
.child-pill-form { margin: 0; flex: 0 0 auto; }
.child-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--text-2);
  transition: all .2s ease;
  white-space: nowrap;
}
.child-pill:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-3, rgba(255,255,255,0.18));
}
.child-pill.active {
  background: linear-gradient(135deg, rgba(var(--brand-rgb),0.16), rgba(var(--brand-rgb),0.06));
  border-color: rgba(var(--brand-rgb),0.55);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb),0.25), 0 6px 20px -8px rgba(var(--brand-rgb),0.5);
}
.child-pill .cp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
.child-pill .cp-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: start;
}
.child-pill .cp-name { font-size: 13px; font-weight: 700; }
.child-pill .cp-team { font-size: 10px; color: var(--text-3); font-weight: 500; }
.child-pill.active .cp-team { color: rgba(255,255,255,0.7); }
.child-pill .cp-check {
  color: var(--brand-bright, var(--brand-bright));
  font-size: 13px;
  margin-inline-start: 2px;
}

/* ─── Phase 6: Schedule view toggle + Calendar ───────────────── */

.topbar-spacer { width: 36px; height: 36px; }

.schedule-toggle {
  display: inline-flex;
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
}
.schedule-toggle .seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.schedule-toggle .seg-btn i { font-size: 11px; }
.schedule-toggle .seg-btn.active {
  background: var(--brand, var(--brand));
  color: #fff;
}
.schedule-toggle .seg-btn:not(.active):hover { color: var(--text-1); }

.cal-wrap {
  padding: 0 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.cal-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-dow-cell {
  text-align: center;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-2);
}
.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell-num { font-weight: 700; font-size: 12px; }
.cal-cell.is-today {
  background: rgba(var(--brand-rgb),0.18);
  border-color: rgba(var(--brand-rgb),0.5);
  color: #fff;
}
.cal-cell.is-today .cal-cell-num { color: var(--brand-bright, var(--brand-bright)); }
.cal-cell.has-events { cursor: pointer; }
.cal-cell.has-events:hover { background: var(--bg-3); }
.cal-cell-dots {
  display: flex;
  gap: 3px;
  margin-top: auto;
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-3);
}
.cal-dot-training { background: #3b82f6; }
.cal-dot-match    { background: var(--brand-bright, var(--brand-bright)); }
/* Phase 76 — private sessions share the violet used on the agenda cards. */
.cal-dot-private  { background: #a78bfa; }

.cal-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
}
.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin: 14px 0 4px;
  padding: 0 2px;
}

/* Auxiliary event meta (meeting time + weather) */
.event-meta-aux { margin-top: 4px; opacity: 0.85; }
.event-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.rsvp-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  background: var(--bg-2);
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.rsvp-pill.rsvp-yes {
  background: rgba(var(--brand-rgb),0.15);
  border-color: rgba(var(--brand-rgb),0.4);
  color: var(--brand-bright, var(--brand-bright));
}
.rsvp-pill.rsvp-no {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
  color: #f87171;
}

.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-3);
}
.empty-state i { font-size: 32px; opacity: 0.5; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* ─── Phase 12 — Announcement feed (parent home) ───────────── */
.ann-feed { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ann-feed-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: background .15s;
}
.ann-feed-card:hover { background: rgba(255,255,255,0.07); }
.ann-feed-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-bright), #3b82f6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0;
}
.ann-feed-body { flex: 1; min-width: 0; }
.ann-feed-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.ann-feed-text  { font-size: 13px; color: #cbd5e1; line-height: 1.4; margin-bottom: 4px;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; }
.ann-feed-meta  { font-size: 11px; color: #94a3b8; }

/* Phase 15 — Calendar UX (week grid + day popover) */
.week-wrap { padding: 0 4px; }
.week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin: 8px 0 12px;
}
.week-day {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  min-height: 130px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.week-day.is-today {
  border-color: rgba(var(--brand-rgb),0.45);
  background: rgba(var(--brand-rgb),0.06);
}
.week-day-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.week-dow {
  font-size: 10px; font-weight: 600;
  color: var(--text-3, #9ca3af); letter-spacing: 0.05em; text-transform: uppercase;
}
.week-num {
  font-size: 18px; font-weight: 700;
  color: var(--text-1, #e5e7eb); margin-top: 1px;
}
.week-day.is-today .week-num { color: var(--brand-bright, var(--brand-bright)); }
.week-day-body {
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 3px; flex: 1;
}
.week-event {
  display: block; text-decoration: none;
  background: rgba(255,255,255,0.04);
  border-inline-start: 3px solid var(--text-3, #9ca3af);
  border-radius: 5px;
  padding: 4px 5px;
  font-size: 10px; line-height: 1.25;
  color: var(--text-1, #e5e7eb);
  overflow: hidden;
}
.week-event-training { border-inline-start-color: var(--brand-bright); background: rgba(var(--brand-rgb),0.10); }
.week-event-match    { border-inline-start-color: #f59e0b; background: rgba(245,158,11,0.12); }
/* Phase 76 — private sessions in the week grid. */
.week-event-private  { border-inline-start-color: #a78bfa; background: rgba(167,139,250,0.12); }
.week-event-time {
  font-size: 9px; font-weight: 700;
  color: var(--text-3, #9ca3af); letter-spacing: 0.03em;
}
.week-event-title {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-event-loc {
  font-size: 9px; color: var(--text-3, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-event-loc i { margin-inline-end: 3px; opacity: 0.7; }
.week-empty { flex: 1; }

@media (max-width: 480px) {
  .week-day { min-height: 110px; }
  .week-event-title { font-size: 9.5px; }
}

/* Calendar day click hint */
.cal-cell.has-events { cursor: pointer; }
.cal-cell.has-events:hover {
  background: rgba(var(--brand-rgb),0.10);
  border-color: rgba(var(--brand-rgb),0.35);
}
.cal-cell.cal-flash {
  background: rgba(var(--brand-rgb),0.18);
  border-color: rgba(var(--brand-rgb),0.55);
}

/* Highlight a card temporarily after deep-link scroll */
.event-card.flash {
  outline: 2px solid var(--brand-bright, var(--brand-bright));
  outline-offset: 2px;
  transition: outline 0.6s ease;
}

/* ─── Phase 16 — Settings & Profile (parent) ─── */
.page-header { padding: 16px 16px 4px; }
.page-header h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-1); }
.page-header p  { font-size: 13px; color: var(--text-3); margin: 0; }

.settings-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border-1, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 16px;
  margin: 12px 16px;
}
.settings-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-1, rgba(255,255,255,0.06));
}
.settings-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.settings-card-head i { color: var(--danger-bright, #ef4444); font-size: 14px; }

.settings-profile-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 16px;
}
.settings-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid var(--border-2, rgba(255,255,255,0.12));
}
.settings-name { font-size: 16px; font-weight: 700; color: var(--text-1); }
.settings-sub  { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.settings-fields { display: flex; flex-direction: column; gap: 12px; }
.settings-fields .field { display: flex; flex-direction: column; gap: 6px; }
.settings-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-4, rgba(255,255,255,0.5));
}
.settings-input, .settings-select {
  width: 100%; padding: 10px 12px;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border-1, rgba(255,255,255,0.10));
  border-radius: 8px;
  color: var(--text-1); font-size: 14px;
  font-family: inherit;
}
.settings-input:focus, .settings-select:focus {
  outline: none; border-color: var(--danger-bright, #ef4444);
}
.settings-input:disabled { opacity: 0.6; cursor: not-allowed; }
.settings-hint { font-size: 11px; color: var(--text-4); }

.settings-rows { display: flex; flex-direction: column; gap: 0; }
.settings-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-1, rgba(255,255,255,0.04));
  cursor: pointer;
}
.settings-row:last-child { border-bottom: none; }
.settings-row .ir-icon { font-size: 14px; color: var(--text-3); }
.settings-row .ir-label { font-size: 14px; color: var(--text-1); }
.settings-row .toggle {
  width: 38px; height: 22px; appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background 0.2s;
}
.settings-row .toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: white; transition: transform 0.2s;
}
.settings-row .toggle:checked { background: var(--danger-bright, #ef4444); }
.settings-row .toggle:checked::after { transform: translateX(16px); }
.settings-row .settings-select {
  width: auto; min-width: 140px; padding: 6px 10px; font-size: 13px;
}

.settings-actions {
  margin-top: 16px; display: flex; justify-content: flex-end; gap: 8px;
}

/* ────────────────────────────────────────────────────────────────
   Phase 71 — contact email / verification UI
   Logical properties throughout so the AR (RTL) locale mirrors for
   free; see docs/i18n-status.md for the convention.
   ──────────────────────────────────────────────────────────────── */
.settings-card-body { display: flex; flex-direction: column; gap: 12px; }
.settings-card-body .field { display: flex; flex-direction: column; gap: 6px; }

/* Status chip above the input: shows the address we currently hold and
   whether it has been confirmed. Colour carries the same meaning as the
   .flash-ok / .flash-err pair so the language is consistent app-wide. */
.email-state {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent;
}
.email-state i { font-size: 15px; flex: 0 0 auto; }
.email-state > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.email-state b {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  /* Addresses are long and unbreakable — clip rather than blow out the card. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Keep the local@domain order readable even inside an RTL paragraph. */
  direction: ltr; text-align: start; unicode-bidi: isolate;
}
.email-state span { font-size: 11px; color: var(--text-3); }
.email-state.ok {
  background: rgba(74,222,128,0.08);
  border-color: rgba(74,222,128,0.22);
}
.email-state.ok i { color: #4ade80; }
.email-state.pending {
  background: rgba(var(--brand-rgb),0.10);
  border-color: rgba(var(--brand-rgb),0.28);
}
.email-state.pending i { color: var(--brand-bright); }

/* Verification landing page (src/pages/VerifyEmail.tsx) — standalone,
   rendered without the app shell. */
.verify-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 4px auto 0;
}
.verify-icon.ok  { background: rgba(74,222,128,0.12); color: #4ade80; }
.verify-icon.err { background: rgba(239,68,68,0.12);  color: #fca5a5; }
.verify-msg {
  margin: 10px 24px 0; max-width: 300px;
  font-size: 13px; line-height: 1.55;
  color: var(--text-3); text-align: center;
}

html[data-theme="light"] .email-state b { color: var(--text-1); }

/* ────────────────────────────────────────────────────────────────
   Phase 72 — Home email-collection prompt
   Sits between the topbar and the greeting. Amber (not red): this is
   a nudge, not a failure — the app works fine without it, the parent
   just cannot receive reminders or self-serve a password reset.
   ──────────────────────────────────────────────────────────────── */
.email-prompt {
  display: flex; align-items: stretch;
  margin: 12px 16px 0;
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(135deg, rgba(var(--brand-rgb),0.12) 0%, rgba(var(--brand-rgb),0.05) 100%);
  border: 1px solid rgba(var(--brand-rgb),0.34);
  overflow: hidden;
}
/* The tappable body. Dismiss is a sibling, so this must not be the
   flex container for the whole card. */
.email-prompt-main {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px 13px 14px;
  padding-inline: 14px 4px;
  text-decoration: none; color: inherit;
}
.email-prompt-icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(var(--brand-rgb),0.18); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.email-prompt-body { flex: 1; min-width: 0; }
.email-prompt-title {
  font-size: 13.5px; font-weight: 700; color: var(--text-1);
  line-height: 1.3;
}
.email-prompt-sub {
  font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  line-height: 1.4;
}
.email-prompt-arrow { font-size: 11px; color: var(--brand-bright); flex: 0 0 auto; }

/* Dismiss: generous hit area, low visual weight. */
.email-prompt-x {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 38px;
  color: var(--text-4, rgba(255,255,255,0.45));
  text-decoration: none; font-size: 13px;
  border-inline-start: 1px solid rgba(var(--brand-rgb),0.18);
}
.email-prompt-x:hover { color: var(--text-2); background: rgba(255,255,255,0.04); }

/* 'pending' is further along than 'none' — the parent has already acted, so
   the arrow loses its call-to-action pull. */
.email-prompt-pending .email-prompt-icon { background: rgba(245,158,11,0.16); color: #f59e0b; }
.email-prompt-pending .email-prompt-arrow { color: #f59e0b; }

/* Chevron mirrors in RTL along with the rest of the nav chevrons. */
html[dir="rtl"] .email-prompt-arrow { transform: scaleX(-1); }

/* ─── Forgot / reset password (standalone splash pages) ─── */
.login-forgot {
  margin-top: 4px; text-align: center;
  font-size: 12px; color: var(--text-3);
  text-decoration: none;
}
.login-forgot:hover { color: var(--brand-bright); text-decoration: underline; }

.flash {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px; padding: 10px 14px;
  border-radius: 10px; font-size: 13px;
}
.flash-ok  { background: rgba(var(--brand-rgb),0.10);  color: #4ade80; border: 1px solid rgba(var(--brand-rgb),0.25); }
.flash-err { background: rgba(239,68,68,0.10);  color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); }

/* ────────────────────────────────────────────────────────────────
   Phase 18 — PWA UI: offline bar, install button, update banner
   ──────────────────────────────────────────────────────────────── */
.offline-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #b45309;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  text-align: center;
  transform: translateY(-100%);
  transition: transform 200ms ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.offline-bar.is-visible { transform: translateY(0); }
.offline-bar i { margin-inline-end: 6px; }
body.is-offline { padding-top: 32px; }

.pwa-banner {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 9998;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  font-size: 14px;
}
.pwa-banner button {
  appearance: none;
  border: 0;
  background: #fff;
  color: #000;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
}

.pwa-install-btn {
  position: fixed;
  inset-inline-end: 16px; bottom: 84px;
  z-index: 9997;
  appearance: none;
  border: 0;
  background: #fff;
  color: #000;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pwa-install-btn i { font-size: 12px; }

.pwa-ios-hint {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 9996;
  background: #0e0e0e;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.pwa-ios-hint button {
  appearance: none;
  background: transparent;
  border: 0;
  color: #aaa;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pwa-ios-hint i { margin: 0 2px; }

@media (display-mode: standalone) {
  /* Slightly more bottom padding for home indicator */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Push the parent-app topbar BELOW the device status bar / notch. Without
   this fix, in installed-PWA mode (viewport-fit=cover +
   apple-mobile-web-app-status-bar-style: black-translucent) the back arrow,
   logo, and notification bell render UNDER the iOS clock/battery row and
   can't be tapped. The env() inset is 0 in non-PWA / non-notched contexts,
   so this is a no-op there. */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  /* .admin-topbar has a fixed pixel height; extend it so its content stays
     centered below the status bar rather than colliding with it. */
  .admin-topbar {
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
}

/* ────────────────────────────────────────────────────────────────
   Phase 19 — RSVP controls (parent confirm/decline/cancel)
   ──────────────────────────────────────────────────────────────── */
.rsvp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.rsvp-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 80ms ease, opacity 120ms ease;
}
.rsvp-btn:active { transform: scale(0.97); }
.rsvp-btn:disabled { opacity: 0.6; cursor: wait; }
.rsvp-btn.rsvp-yes {
  background: var(--brand);
  color: #fff;
}
.rsvp-btn.rsvp-yes:hover { background: #15803d; }
.rsvp-btn.rsvp-no {
  background: rgba(255,255,255,0.06);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.35);
}
.rsvp-btn.rsvp-no:hover { background: rgba(248,113,113,0.1); }
.rsvp-btn.rsvp-cancel,
.rsvp-btn.rsvp-rejoin {
  font-size: 12px;
  padding: 6px 12px;
}
.rsvp-confirmed,
.rsvp-declined {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.rsvp-confirmed { color: #4ade80; }
.rsvp-declined  { color: #f87171; }
.rsvp-confirmed i,
.rsvp-declined i { font-size: 14px; }

.rsvp-pill {
  cursor: pointer;
  user-select: none;
}
.rsvp-pill[data-rsvp="pending"] {
  background: rgba(245,158,11,0.18);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,0.35);
}
.rsvp-pill.rsvp-yes {
  background: rgba(var(--brand-rgb),0.18);
  color: #4ade80;
  border: 1px solid rgba(var(--brand-rgb),0.35);
}
.rsvp-pill.rsvp-no {
  background: rgba(248,113,113,0.15);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.35);
}

.rsvp-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 20px);
  z-index: 10000;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  pointer-events: none;
}
.rsvp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.rsvp-toast.is-error {
  background: #7f1d1d;
  border-color: rgba(248,113,113,0.4);
}

/* ────────────────────────────────────────────────────────────────
   Phase 20 — Parent ↔ Coach conversation page
   ──────────────────────────────────────────────────────────────── */
.conv-peer {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.conv-peer-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #1a1a1a;
  flex: 0 0 36px;
}
.conv-peer-meta { min-width: 0; line-height: 1.2; }
.conv-peer-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-peer-role {
  font-size: 12px;
  color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.conv-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 100px;
  overflow-y: auto;
  min-height: 60vh;
}
.conv-empty {
  text-align: center;
  padding: 48px 16px;
  color: #888;
}
.conv-empty i { font-size: 36px; color: #444; margin-bottom: 12px; }
.conv-empty h3 { margin: 8px 0 4px; color: #ddd; font-weight: 700; }
.conv-empty p  { margin: 0; font-size: 14px; }

.conv-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 80%;
}
.conv-msg.mine   { align-self: flex-end; flex-direction: row-reverse; }
.conv-msg.theirs { align-self: flex-start; }
.conv-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #1a1a1a;
  flex: 0 0 28px;
}
.conv-msg-bubble {
  border-radius: 16px;
  padding: 10px 14px;
  max-width: 100%;
  word-wrap: break-word;
}
.conv-msg.mine .conv-msg-bubble {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.conv-msg.theirs .conv-msg-bubble {
  background: #1a1a1a;
  color: #f0f0f0;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
}
.conv-msg-body {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.conv-msg-time {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.7;
}

.conv-composer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(11,11,11,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 8px;
  z-index: 50;
}
/* Stage 10 — conversation that can be read but no longer replied to. */
.conv-composer.conv-readonly { justify-content: center; align-items: center; font-size: 13px; color: var(--text-2, #a1a1aa); text-align: center; }
.conv-composer textarea {
  flex: 1;
  resize: none;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 18px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  max-height: 140px;
  outline: none;
}
.conv-composer textarea:focus { border-color: var(--brand); }
.conv-send {
  appearance: none;
  border: 0;
  background: var(--brand);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 40px;
  transition: opacity 120ms ease;
}
.conv-send:disabled { opacity: 0.5; cursor: wait; }
.conv-send i { font-size: 14px; }

/* ─── Phase 21 — Unified inbox & notification detail ─── */
.msg-row { text-decoration: none; color: inherit; cursor: pointer; }
.msg-row:hover { background: rgba(255,255,255,0.04); }
.msg-row .msg-avatar { position: relative; }
.msg-row .msg-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; border: 2px solid #0b0b0b;
}
.msg-row.msg-notification .msg-avatar {
  background-color: #1f2937;
  background-size: 60% !important;
  background-repeat: no-repeat;
  background-position: center;
}
.msg-role-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; margin-inline-start: 6px;
  border-radius: 4px;
  background: rgba(var(--brand-rgb),0.15); color: #4ade80;
  text-transform: uppercase; letter-spacing: 0.4px;
  vertical-align: middle;
}
.msg-role-tag[data-role="admin"]    { background: rgba(59,130,246,0.18); color: #93c5fd; }
.msg-role-tag[data-role="finance"]  { background: rgba(234,179,8,0.18);  color: #fde047; }
.msg-role-tag[data-role="system"]   { background: rgba(148,163,184,0.18);color: #cbd5e1; }
.msg-title {
  font-size: 13px; font-weight: 600;
  color: #e5e7eb; margin-bottom: 2px;
}
.msg-empty {
  padding: 40px 16px; text-align: center;
  color: rgba(255,255,255,0.5);
}
.msg-empty i { font-size: 32px; margin-bottom: 8px; display: block; }

/* Notification detail page */
.notif-detail { padding: 16px; }
.notif-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px;
}
.notif-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
.notif-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: #1f2937;
  position: relative; flex: 0 0 48px;
}
.notif-icon {
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; border: 2px solid #0b0b0b;
}
.notif-meta { flex: 1; min-width: 0; }
.notif-from { font-weight: 600; font-size: 14px; color: #f3f4f6; }
.notif-cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #94a3b8; margin-top: 2px;
}
.notif-time { font-size: 12px; color: #6b7280; margin-top: 2px; }
.notif-title {
  font-size: 18px; font-weight: 700; line-height: 1.3;
  margin: 0 0 12px; color: #f9fafb;
}
.notif-body { font-size: 14px; line-height: 1.55; color: #d1d5db; }
.notif-body p { margin: 0 0 8px; }
.notif-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--brand); color: #fff !important;
  font-weight: 600; text-decoration: none;
}
.notif-cta i { font-size: 12px; }
.notif-back {
  display: block; text-align: center; margin-top: 18px;
  padding: 10px; color: #94a3b8 !important;
  font-size: 13px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}

/* ── Admin/Coach notification popover (built by admin-phase8.js) ─
   Uses theme tokens so it follows dark/light mode like the rest
   of the app, instead of falling back to unstyled white. */
.notif-panel {
  position: fixed;
  z-index: 1100;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  display: none;
  flex-direction: column;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  overflow: hidden;
}
.notif-panel.open { display: flex; }
.notif-panel .notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  margin: 0;
  font-size: 14px; font-weight: 600;
  color: var(--text-1);
  background: transparent;
}
.notif-panel .notif-mark-all {
  background: none; border: 0;
  color: var(--brand-bright, var(--brand-bright));
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.notif-panel .notif-mark-all:hover { color: #4ade80; }
.notif-panel .notif-list {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notif-panel .notif-item {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: var(--text-1);
  align-items: flex-start;
  transition: background 120ms ease;
}
.notif-panel .notif-item:last-child { border-bottom: 0; }
.notif-panel .notif-item:hover { background: var(--bg-3); }
.notif-panel .notif-item.unread { background: rgba(var(--brand-rgb),0.06); }
.notif-panel .notif-item > i {
  flex: 0 0 22px;
  font-size: 14px;
  color: var(--brand-bright, var(--brand-bright));
  margin-top: 2px;
}
.notif-panel .notif-item .notif-body {
  flex: 1; min-width: 0;
  font-size: 13px; line-height: 1.4;
  color: var(--text-1);
}
.notif-panel .notif-item .notif-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  margin: 0 0 2px;
}
.notif-panel .notif-item .notif-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-panel .notif-item .notif-time {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}
.notif-panel .notif-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px;
  background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  pointer-events: none;
}
html[data-theme="light"] .notif-panel {
  background: var(--bg-1);
  border-color: var(--border-2);
  color: var(--text-1);
  box-shadow: 0 20px 50px rgba(15,23,42,0.18);
}
html[data-theme="light"] .notif-panel .notif-item:hover { background: var(--bg-3); }
html[data-theme="light"] .notif-panel .notif-item.unread { background: rgba(var(--brand-rgb),0.08); }

/* ============================================================
   Phase 22 — Light theme palette + RTL support
   ============================================================ */
html[data-theme="light"] {
  --bg-0:  #f5f5f7;
  --bg-1:  #ffffff;
  --bg-2:  #f9fafb;
  --bg-3:  #f3f4f6;
  --bg-4:  #e5e7eb;

  --border-1: rgba(0,0,0,0.06);
  --border-2: rgba(0,0,0,0.10);
  --border-glow: rgba(var(--brand-rgb),0.35);

  --text-1: #0f172a;
  --text-2: #1f2937;
  --text-3: #4b5563;
  --text-4: #6b7280;
  --text-5: #9ca3af;

  --shadow-card: 0 4px 24px rgba(15,23,42,0.08), 0 0 0 1px var(--border-1);
}
html[data-theme="light"] body { background: var(--bg-0); color: var(--text-1); }
html[data-theme="light"] .stage { background: var(--bg-0); }
html[data-theme="light"] .phone-frame { background: var(--bg-1); border-color: var(--border-2); }
html[data-theme="light"] .status-bar { color: var(--text-1); }
html[data-theme="light"] .tabbar { background: var(--bg-1); border-top: 1px solid var(--border-1); }
html[data-theme="light"] .tab { color: var(--text-3); }
html[data-theme="light"] .tab.active { color: var(--brand); }
html[data-theme="light"] .tab.active i { color: var(--brand); }
html[data-theme="light"] .icon-btn { background: var(--bg-3); color: var(--text-2); border-color: var(--border-1); }
html[data-theme="light"] .icon-btn:hover { background: var(--bg-4); }
html[data-theme="light"] .info-list { background: var(--bg-1); border: 1px solid var(--border-1); }
html[data-theme="light"] .info-row { border-bottom-color: var(--border-1); }
html[data-theme="light"] .ir-icon { background: rgba(var(--brand-rgb),0.10); color: var(--brand); }
html[data-theme="light"] .settings-card { background: var(--bg-1); border: 1px solid var(--border-1); }
html[data-theme="light"] .settings-input,
html[data-theme="light"] .settings-select { background: var(--bg-2); color: var(--text-1); border-color: var(--border-2); }
html[data-theme="light"] .msg-list,
html[data-theme="light"] .msg-row { background: var(--bg-1); border-color: var(--border-1); }
html[data-theme="light"] .msg-row:hover { background: var(--bg-3); }
html[data-theme="light"] .msg-search input { background: var(--bg-2); color: var(--text-1); border: 1px solid var(--border-1); }
html[data-theme="light"] .conv-bubble.theirs { background: var(--bg-3); color: var(--text-1); }
html[data-theme="light"] .notif-card { background: var(--bg-1); border-color: var(--border-1); }
html[data-theme="light"] .notif-back { color: var(--text-3) !important; border-color: var(--border-1); }
html[data-theme="light"] .hero-card { background: linear-gradient(135deg, rgba(var(--brand-rgb),0.10), rgba(var(--brand-rgb),0.02)); }

/* ══ RTL adjustments — Arabic (Phase 70E) ══════════════════════
   Most mirroring is automatic now: the parent stylesheets use logical
   properties (margin-inline-start / padding-inline-end / border-inline-*),
   so they follow `dir` with no override needed. What remains here is the
   set of things CSS logical properties CANNOT express:
     1. directional ICONS (an arrow glyph has no logical form)
     2. absolutely positioned decorations
     3. transforms / slide-in direction
   ────────────────────────────────────────────────────────────── */
html[dir="rtl"] body { direction: rtl; }

/* 1. Directional icons.
   Arrows and chevrons point at a SIDE, so in RTL they must physically
   mirror or they contradict the layout ("back" pointing forward).

   These used to be matched per-component via a[aria-label="Back"], which
   silently stopped working the moment the UI was translated — in Arabic the
   attribute became aria-label="رجوع", so the selector no longer matched and
   every back arrow pointed the wrong way. Matching the ICON CLASS instead is
   language-independent and cannot rot. */
html[dir="rtl"] i.fa-arrow-left,
html[dir="rtl"] i.fa-arrow-right,
html[dir="rtl"] i.fa-chevron-left,
html[dir="rtl"] i.fa-chevron-right,
html[dir="rtl"] i.fa-arrow-right-from-bracket,
html[dir="rtl"] i.fa-arrow-up-right-from-square,
html[dir="rtl"] i.fa-arrow-trend-up {
  transform: scaleX(-1);
}
/* Exception: an arrow inside a spinner/loading context must not mirror, and
   neither should the flag stripes. Keep this list tight. */
/* A national flag has a FIXED colour order — it is an emblem, not layout.
   .splash-flag is a flex row, so RTL reversed it (green-white-red became
   red-white-green). Pin the row to LTR; the stripes are centred either way,
   so nothing else about the layout changes. */
html[dir="rtl"] .splash-flag { direction: ltr; }
html[dir="rtl"] .splash-flag i { transform: none; }

/* 2. Absolutely positioned decorations that logical props cannot reach. */
html[dir="rtl"] .msg-dot { right: auto; left: 12px; }

/* Theme + lang segmented controls in Settings */
.seg-control {
  display: flex; gap: 6px;
  background: var(--bg-3); border-radius: 12px; padding: 4px;
  border: 1px solid var(--border-1);
}
.seg-control input[type="radio"] { display: none; }
.seg-control label {
  flex: 1; text-align: center;
  padding: 8px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  cursor: pointer; transition: background 120ms ease, color 120ms ease;
  user-select: none;
}
.seg-control input[type="radio"]:checked + label {
  background: var(--bg-1); color: var(--text-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
html[data-theme="light"] .seg-control input[type="radio"]:checked + label {
  background: var(--bg-0);
}
.seg-control label .seg-icon { display: block; margin-bottom: 2px; font-size: 14px; }

.notif-cat-list { display: flex; flex-direction: column; gap: 0; }
.notif-cat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-1);
}
.notif-cat-row:last-child { border-bottom: none; }
.notif-cat-row .ncr-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--brand-rgb),0.12); color: var(--brand);
  flex: 0 0 32px;
}
.notif-cat-row .ncr-label {
  flex: 1; font-size: 14px; color: var(--text-1);
}
.quiet-time-row {
  display: flex; gap: 12px; margin-top: 12px;
}
.quiet-time-row label { flex: 1; }

/* ─── Phase 23 — Topbar overlays (drawer, bell popover, action sheets) ─── */

/* Bell badge count */
.icon-btn { position: relative; }
.icon-btn .badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-1, #0a0a0b);
  pointer-events: none;
}
html[dir="rtl"] .icon-btn .badge-count { right: auto; left: 4px; }

/* Overlay scaffold */
.p23-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  opacity: 0;
  transition: opacity 180ms ease;
  display: flex;
  -webkit-tap-highlight-color: transparent;
}
.p23-overlay.p23-open { opacity: 1; }
html[data-theme="light"] .p23-overlay { background: rgba(0, 0, 0, 0.35); }

/* Bell popover (drops down from top-right) */
.p23-popover-wrap { align-items: flex-start; justify-content: flex-end; padding: 60px 12px 0; }
html[dir="rtl"] .p23-popover-wrap { justify-content: flex-start; }
.p23-popover {
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  background: var(--bg-2, #111114);
  border: 1px solid var(--border-2, rgba(255,255,255,0.10));
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  transition: transform 180ms ease;
}
.p23-overlay.p23-open .p23-popover { transform: translateY(0); }
html[data-theme="light"] .p23-popover { background: #fff; border-color: rgba(0,0,0,0.10); }

.p23-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1, rgba(255,255,255,0.06));
  font-size: 14px;
  color: var(--text-1, #fff);
}
.p23-link {
  background: none;
  border: 0;
  color: var(--brand-bright, var(--brand-bright));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.p23-pop-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.p23-pop-row {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1, rgba(255,255,255,0.06));
  text-decoration: none;
  color: inherit;
  position: relative;
}
.p23-pop-row:last-child { border-bottom: 0; }
.p23-pop-row.unread { background: rgba(var(--brand-rgb),0.06); }
.p23-pop-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-3, #18181d) center/cover no-repeat;
  position: relative;
}
.p23-pop-bell {
  position: absolute;
  bottom: -2px;
  inset-inline-end: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand, var(--brand));
  color: #fff;
  font-size: 8px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg-2);
}
.p23-pop-meta { flex: 1; min-width: 0; }
.p23-pop-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.p23-pop-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p23-pop-time {
  font-size: 10px;
  color: var(--text-3, #a1a1aa);
  white-space: nowrap;
}
.p23-pop-role {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(var(--brand-rgb),0.15);
  color: var(--brand-bright);
}
.p23-pop-role[data-role="admin"]      { background: rgba(59,130,246,0.15); color: #60a5fa; }
.p23-pop-role[data-role="finance"]    { background: rgba(251,191,36,0.15); color: #fbbf24; }
.p23-pop-role[data-role="system"]     { background: rgba(156,163,175,0.20); color: #9ca3af; }
.p23-pop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #d4d4d8);
  margin-top: 2px;
}
.p23-pop-preview {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.p23-pop-dot {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-bright);
}
html[dir="rtl"] .p23-pop-dot { right: auto; left: 12px; }
.p23-pop-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-3, #18181d);
  color: var(--brand-bright);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
html[data-theme="light"] .p23-pop-foot { background: #f9fafb; }
.p23-empty, .p23-loading {
  padding: 28px 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
.p23-empty i { font-size: 28px; opacity: 0.5; display: block; margin-bottom: 8px; }
.p23-empty p { margin: 0; }

/* Drawer (slides from left) */
.p23-drawer-wrap { align-items: stretch; justify-content: flex-start; }
html[dir="rtl"] .p23-drawer-wrap { justify-content: flex-end; }
.p23-drawer {
  width: min(320px, 86vw);
  background: var(--bg-1, #0a0a0b);
  border-inline-end: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 200ms ease;
  overflow: hidden;
}
html[dir="rtl"] .p23-drawer {
  border-right: 0;
  border-left: 1px solid var(--border-1);
  transform: translateX(100%);
}
.p23-overlay.p23-open .p23-drawer { transform: translateX(0); }
html[data-theme="light"] .p23-drawer { background: #fff; }

.p23-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
}
.p23-drawer-logo {
  width: 28px; height: 28px;
  background: center/contain no-repeat;
}
.p23-drawer-head strong {
  flex: 1;
  font-size: 14px;
  color: var(--text-1);
}
.p23-x {
  background: var(--bg-3, #18181d);
  border: 1px solid var(--border-1);
  color: var(--text-2);
  width: 32px; height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
}

.p23-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 12px;
}
.p23-drawer-user {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
}
.p23-drawer-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
}
.p23-drawer-avatar--placeholder {
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-size: 16px;
  background: var(--bg-3);
}
.p23-drawer-name { font-size: 13px; font-weight: 700; color: var(--text-1); }
.p23-drawer-role { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.p23-drawer-section { padding: 12px 16px 4px; }
.p23-drawer-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-bottom: 8px;
}
.p23-child-row { display: flex; gap: 8px; flex-wrap: wrap; }
.p23-child-form { margin: 0; }
.p23-child {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font: inherit;
  color: var(--text-2);
  cursor: pointer;
}
.p23-child.active {
  border-color: var(--brand);
  background: rgba(var(--brand-rgb),0.08);
  color: var(--text-1);
}
.p23-child-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
}
.p23-child-name { font-size: 12px; font-weight: 600; }
.p23-child i { color: var(--brand-bright); font-size: 11px; }

.p23-drawer-nav { display: flex; flex-direction: column; padding: 4px 0; }
.p23-drawer-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}
.p23-drawer-nav a:hover { background: var(--bg-2); color: var(--text-1); }
.p23-drawer-nav a i { width: 20px; text-align: center; color: var(--text-3); }

.p23-lang-row { display: flex; gap: 6px; }
.p23-lang {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  color: var(--text-2);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.p23-lang.active {
  background: rgba(var(--brand-rgb),0.10);
  border-color: var(--brand);
  color: var(--text-1);
  font-weight: 600;
}

.p23-drawer-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin: 12px 12px 4px;
  background: rgba(239,68,68,0.10);
  border-radius: 10px;
  color: var(--danger-bright, #ef4444);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.p23-drawer-version {
  text-align: center;
  padding: 12px 8px;
  font-size: 10px;
  color: var(--text-3);
}

/* Bottom action sheet */
.p23-sheet-wrap { align-items: flex-end; justify-content: center; }
.p23-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  background: var(--bg-2, #111114);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 200ms ease;
}
.p23-overlay.p23-open .p23-sheet { transform: translateY(0); }
html[data-theme="light"] .p23-sheet { background: #fff; }
.p23-sheet-grip {
  width: 36px;
  height: 4px;
  background: var(--border-2);
  border-radius: 4px;
  margin: 8px auto 4px;
}
.p23-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--text-1);
  font-size: 15px;
}
.p23-sheet-body {
  overflow-y: auto;
  padding: 8px 0 16px;
}

.p23-list { display: flex; flex-direction: column; }
.p23-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-1);
  border-bottom: 1px solid var(--border-1);
}
.p23-list-row:last-child { border-bottom: 0; }
.p23-list-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
}
.p23-list-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-3);
  display: grid; place-items: center;
  color: var(--text-2);
}
.p23-list-meta { flex: 1; min-width: 0; }
.p23-list-name { font-size: 14px; font-weight: 600; }
.p23-list-role { margin-top: 4px; }
.p23-chev { color: var(--text-3); font-size: 11px; }
.p23-danger .p23-list-icon {
  background: rgba(239,68,68,0.10);
  color: var(--danger-bright);
}
.p23-danger .p23-list-name { color: var(--danger-bright); }

/* FAQ */
.p23-faq { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.p23-faq details {
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 10px 12px;
}
.p23-faq summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.p23-faq summary::-webkit-details-marker { display: none; }
.p23-faq summary i { color: var(--brand-bright); }
.p23-faq p {
  margin: 8px 0 2px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.p23-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 16px 4px;
  padding: 12px;
  background: var(--brand, var(--brand));
  border: 0;
  border-radius: 10px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* Segmented control inside sheets */
.p23-seg {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 4px;
  margin: 0 16px;
  gap: 4px;
}
.p23-seg button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 8px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}
.p23-seg button.on {
  background: var(--brand);
  color: #fff;
}

/* ─── Phase 24 — Profile tabs (Overview / Attendance / Progress / Profile) ─── */

/* Overview tab */
.pf-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px 4px;
}
.pf-stat {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.pf-stat-icon {
  width: 32px; height: 32px;
  margin: 0 auto 6px;
  border-radius: 8px;
  background: rgba(var(--brand-rgb),0.10);
  color: var(--brand-bright);
  display: grid; place-items: center;
  font-size: 14px;
}
.pf-stat[data-stat="progress"] .pf-stat-icon {
  background: rgba(59,130,246,0.10); color: #60a5fa;
}
.pf-stat[data-stat="jersey"] .pf-stat-icon {
  background: rgba(251,191,36,0.10); color: #fbbf24;
}
.pf-stat-num { font-size: 18px; font-weight: 800; color: var(--text-1); }
.pf-stat-lbl { font-size: 10px; color: var(--text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

.pf-next-card,
.pf-due-card,
.pf-note-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
}
.pf-next-icon, .pf-due-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(var(--brand-rgb),0.10);
  color: var(--brand-bright);
  display: grid; place-items: center;
  font-size: 16px;
  flex: 0 0 38px;
}
.pf-due-icon { background: rgba(251,191,36,0.10); color: #fbbf24; }
.pf-next-body, .pf-due-body { flex: 1; min-width: 0; }
.pf-next-date { font-size: 14px; font-weight: 700; color: var(--text-1); }
.pf-next-meta { font-size: 11px; color: var(--text-3); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pf-dot { color: var(--text-4, #6b7280); }
.pf-next-go {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-3);
  text-decoration: none;
}
.pf-due-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; }
.pf-due-amt { font-size: 18px; font-weight: 800; color: var(--text-1); margin-top: 2px; }
.pf-due-when { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pf-due-cta {
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.pf-note-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
  flex: 0 0 38px;
}
.pf-note-body { flex: 1; min-width: 0; }
.pf-note-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-1);
}
.pf-note-time { color: var(--text-3); font-size: 10px; }
.pf-note-text { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.5; }

.pf-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-3);
  font-size: 13px;
}

.pf-quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 16px 16px;
}
.pf-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-2);
}
.pf-quick i { font-size: 18px; color: var(--brand-bright); }
.pf-quick span { font-size: 11px; font-weight: 600; }

/* Attendance tab */
.pa-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}
.pa-donut {
  width: 130px; height: 130px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: 0 0 130px;
}
.pa-donut-inner {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--bg-1, #0a0a0b);
  display: grid; place-items: center;
  text-align: center;
}
html[data-theme="light"] .pa-donut-inner { background: #fff; }
.pa-donut-pct { font-size: 22px; font-weight: 800; color: var(--text-1); }
.pa-donut-lbl { font-size: 10px; color: var(--text-3); }
.pa-stats { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.pa-stat { display: flex; align-items: center; gap: 8px; }
.pa-stat strong { margin-inline-start: auto; color: var(--text-1); }
.pa-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.pa-dot-present { background: var(--brand-bright); }
.pa-dot-late    { background: #f59e0b; }
.pa-dot-absent  { background: var(--danger, #dc2626); }
.pa-dot-total   { background: var(--text-3); }

.pa-streak {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: rgba(var(--brand-rgb),0.08);
  border: 1px solid rgba(var(--brand-rgb),0.20);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pa-streak i { color: #f97316; }
.pa-streak strong { color: var(--brand-bright); }
.pa-last-abs {
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--text-3);
}

.pa-trend {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 8px;
  height: 130px;
}
.pa-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.pa-trend-bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(to top, var(--brand) 0%, var(--brand-bright) 100%);
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  min-height: 6px;
}
.pa-trend-pct {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.pa-trend-lbl {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
}

.pa-filters {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
}
.pa-filter {
  flex: 1;
  text-align: center;
  padding: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.pa-filter.on {
  background: rgba(var(--brand-rgb),0.10);
  border-color: var(--brand);
  color: var(--text-1);
}

.pa-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 16px;
}
.pa-log-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
}
.pa-log-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text-2);
  display: grid; place-items: center;
  flex: 0 0 38px;
  font-size: 15px;
}
.pa-log-body { flex: 1; min-width: 0; }
.pa-log-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pa-log-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.pa-pill-present { background: rgba(var(--brand-rgb),0.15); color: var(--brand-bright); }
.pa-pill-late    { background: rgba(245,158,11,0.15); color: #f59e0b; }
.pa-pill-absent  { background: rgba(239,68,68,0.15); color: var(--danger-bright); }
.pa-pill-other   { background: rgba(156,163,175,0.20); color: #9ca3af; }
.pa-log-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.pa-log-meta i { margin-inline-end: 4px; }
.pa-log-comment {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
  background: var(--bg-3);
  padding: 6px 10px;
  border-radius: 6px;
  border-inline-start: 2px solid var(--brand);
}

/* Progress tab — coach notes timeline */
.pp-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 16px;
}
.pp-note {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
}
.pp-note-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-3) center/cover no-repeat;
  flex: 0 0 36px;
}
.pp-note-body { flex: 1; min-width: 0; }
.pp-note-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-1);
}
.pp-note-time { color: var(--text-3); font-size: 10px; }
.pp-note-text {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Profile (info) tab */
.pp-soon {
  margin-inline-start: auto;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(156,163,175,0.15);
  color: #9ca3af;
  letter-spacing: 0.5px;
}
.pp-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.pp-status-active { background: rgba(var(--brand-rgb),0.15); color: var(--brand-bright); }
.pp-muted { color: var(--text-3); font-style: italic; font-size: 12px; }

/* ─── Phase 26 — RSVP refinements ──────────────── */

/* Pill is now a status indicator, not a button. Kill all pointer affordance. */
.rsvp-pill {
  cursor: default !important;
  user-select: none;
  pointer-events: none;
}
.rsvp-pill[aria-disabled="true"] { cursor: default !important; }

/* Locked state pill (≤2h before kickoff) */
.rsvp-pill.rsvp-locked {
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

/* Locked state — show helper line where buttons used to be */
.rsvp-actions.rsvp-state-locked {
  padding-top: 6px;
}
.rsvp-locked-msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.rsvp-locked-msg i {
  color: var(--text-4);
  font-size: 11px;
}

/* Session info row — replaces RSVP buttons on training/skills sessions */
.session-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-3);
}
.session-info-row i {
  color: var(--brand-bright);
  font-size: 13px;
}
.session-info-row > span {
  flex: 1;
}
.session-report-absence {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-bright);
  text-decoration: none;
  white-space: nowrap;
}
.session-report-absence:hover { text-decoration: underline; }

/* Phase 74 — an absence the parent reported in advance. Amber, not red:
   the child is still on the roster and the coach still takes attendance
   on the day; this is a heads-up, not a cancellation. */
.session-info-row.is-absence {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.28);
  color: #fcd34d;
}
.session-info-row.is-absence i { color: #f59e0b; }
.session-info-row.is-absence .session-report-absence { color: #fcd34d; }

/* ─── Cancel-with-reason bottom sheet ─────────────────────────── */
.p26-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  backdrop-filter: blur(2px);
}
.p26-overlay.is-open { opacity: 1; }

.p26-sheet {
  width: 100%;
  max-width: 520px;
  background: var(--bg-1, #161616);
  border-radius: 20px 20px 0 0;
  padding: 8px 20px 28px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.23, 1);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  max-height: 85vh;
  overflow-y: auto;
}
.p26-overlay.is-open .p26-sheet { transform: translateY(0); }

.p26-handle {
  width: 40px;
  height: 4px;
  background: var(--text-4, #475569);
  border-radius: 2px;
  margin: 6px auto 14px;
  opacity: 0.6;
}

.p26-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 6px;
  line-height: 1.3;
}
.p26-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 16px;
}

.p26-reasons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.p26-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  transition: all 0.16s ease;
}
.p26-reason:has(input:checked) {
  border-color: var(--brand-bright);
  background: rgba(34, 197, 94, 0.10);
  color: var(--text-1);
}
.p26-reason input[type="radio"] {
  accent-color: var(--brand-bright);
  width: 16px;
  height: 16px;
}

.p26-note-label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 16px;
}
.p26-note {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
}
.p26-note:focus {
  outline: none;
  border-color: var(--brand-bright);
}

.p26-actions {
  display: flex;
  gap: 10px;
}
.p26-actions .btn {
  flex: 1;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
}
.p26-actions .btn-ghost {
  background: rgba(148, 163, 184, 0.10);
  color: var(--text-2);
}
.p26-actions .btn-danger {
  background: var(--danger-bright, #ef4444);
  color: #fff;
}
.p26-actions .btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.p26-actions .btn-primary {
  background: var(--brand-bright, var(--brand-bright));
  color: #0b0b0b;
}
.p26-actions .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Light mode */
html[data-theme="light"] .p26-sheet { background: #ffffff; }
html[data-theme="light"] .p26-reason { background: rgba(148, 163, 184, 0.08); }
html[data-theme="light"] .p26-note { background: rgba(148, 163, 184, 0.06); }
html[data-theme="light"] .session-info-row { background: rgba(148, 163, 184, 0.10); }

/* ─── Phase 27 — Callouts and student chips ─────────────── */

.callout { display:flex; align-items:center; gap:10px; padding:10px 14px; margin:0 18px 14px; border-radius:10px; font-size:13px; }
.callout-info { background:rgba(59,130,246,.08); color:#3b82f6; border:1px solid rgba(59,130,246,.2); }

/* ── Student chips (draggable) ──────────────────────────── */
.player-chip {
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg-2);
  cursor:grab; user-select:none; font-size:12px;
}
.player-chip:hover { border-color:var(--accent); }
.player-chip.dragging { opacity:.4; cursor:grabbing; }

/* RSVP counts */
.rsvp-stat { display:inline-flex; align-items:center; gap:4px; }
.rsvp-stat-yes { color:var(--brand-bright); }
.rsvp-stat-no { color:#ef4444; }
.rsvp-stat-pending { color:#f59e0b; }

/* Toast (shared) */
.toast { position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(20px); padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; opacity:0; transition:all .25s; z-index:9999; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-ok { background:var(--brand); color:#fff; }
.toast-error { background:#dc2626; color:#fff; }

/* ── Phase 29: Medical & emergency form + Documents list ─────── */
.med-form {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 18px;
}
.med-row {
  display: flex; align-items: center; gap: 12px;
}
.med-row-block {
  flex-direction: column; align-items: stretch; gap: 6px;
}
.med-row label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  flex: 0 0 auto;
}
.med-row label i {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(var(--brand-rgb),0.12); color: var(--brand-bright);
  display: grid; place-items: center; font-size: 12px;
}
.med-input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.med-input:focus { border-color: var(--brand-bright); }
.med-textarea { resize: vertical; min-height: 72px; font-family: inherit; }
.med-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 480px) {
  .med-grid { grid-template-columns: 1fr 1fr; }
  .med-grid > input:first-child { grid-column: 1 / -1; }
}
.med-meta {
  font-size: 11px; color: var(--text-3); padding: 0 2px;
}
.med-actions {
  display: flex; justify-content: flex-end;
}

/* Documents list rows + actions */
.doc-row .ir-label {
  display: flex; flex-direction: column; gap: 2px;
}
.doc-meta {
  display: flex; gap: 8px;
  font-size: 11px; color: var(--text-3);
}
.doc-fn {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-actions {
  display: flex; align-items: center; gap: 6px;
}
.doc-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: var(--bg-3); color: var(--text-1);
  border: 1px solid var(--border-1); border-radius: 8px;
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.doc-link:hover { border-color: var(--brand-bright); }
.doc-link.doc-remove:hover { border-color: #ef4444; color: #ef4444; }
.doc-link.doc-upload {
  background: rgba(var(--brand-rgb),0.12);
  color: var(--brand-bright);
  border-color: rgba(var(--brand-rgb),0.35);
}
.doc-link.doc-upload:hover { background: rgba(var(--brand-rgb),0.22); }

/* Toast for medical/document feedback */
.p29-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px);
  z-index: 1200;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 200ms, transform 200ms;
  pointer-events: none;
}
.p29-toast.show { opacity: 1; transform: translate(-50%, 0); }
.p29-toast.success { border-color: rgba(var(--brand-rgb),0.5); color: var(--brand-bright); }
.p29-toast.error   { border-color: rgba(239,68,68,0.5); color: #fca5a5; }

/* ─── Phase 40 — Past event cards ────────────── */
.event-card.is-past { opacity: 0.92; }
.event-card.is-past .event-date { background: #f3f4f6; }

/* ─── Phase 41 — Push notification enable widget ─── */
.settings-row--stack { align-items: flex-start; padding: 12px 12px; gap: 10px; }
.settings-row--stack .ir-icon { padding-top: 2px; }
.ir-label--stack { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ir-label--stack .ir-title { font-size: 14px; color: var(--text-1); font-weight: 500; }
.ir-label--stack .ir-sub   { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.ir-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ir-actions .btn-sm { padding: 6px 10px; font-size: 12px; }

/* ============================================================
   PHASE 45 — PARENT SCHEDULE: TEAM GROUP PILL + TIME RANGE
   ============================================================ */

/* Team-group badge (e.g. "U14/15") in front of the event title */
.event-team-pill {
  display: inline-block;
  margin-inline-end: 7px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(var(--brand-rgb),0.16);
  border: 1px solid rgba(var(--brand-rgb),0.30);
  color: var(--brand-bright);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: 1px;
  white-space: nowrap;
}
html[data-theme="light"] .event-team-pill {
  background: rgba(var(--brand-rgb),0.14);
  border-color: rgba(180,135,20,0.34);
}

/* Time range never wraps mid-way ("18:00 – 19:30") */
.event-meta span[data-testid="event-time-range"] { white-space: nowrap; }

/* Cancelled session (parent side) */
.event-card.is-cancelled { opacity: .74; }
.event-card.is-cancelled .event-title { text-decoration: line-through; text-decoration-color: rgba(239,68,68,.6); }
.event-tag.cancelled {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.session-info-row.is-cancelled {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.22);
  color: #fca5a5;
}
.session-info-row.is-cancelled i { color: #f87171; }
html[data-theme="light"] .session-info-row.is-cancelled { background: rgba(239,68,68,0.07); }

/* Week view */
.week-event.is-cancelled { opacity: .6; }
.week-event.is-cancelled .week-event-title { text-decoration: line-through; }

/* ─── Phase 49 — "Enable notifications" soft prompt ─────────────── */
.push-prompt {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9997;
  background: #101010;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease;
  max-width: 460px;
  margin: 0 auto;
}
.push-prompt.is-visible { opacity: 1; transform: translateY(0); }
.push-prompt .pp-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,0.14);
  color: #d4af37;
  font-size: 16px;
  flex: none;
}
.push-prompt .pp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.push-prompt .pp-text strong { font-size: 14px; font-weight: 700; }
.push-prompt .pp-text span   { font-size: 12.5px; line-height: 1.45; color: #b9b9b9; }
.push-prompt .pp-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 2px;
}
.push-prompt .pp-actions button {
  appearance: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s ease;
}
.push-prompt .pp-actions button:disabled { opacity: .6; cursor: default; }
.push-prompt .pp-enable { background: #d4af37; color: #101010; }
.push-prompt .pp-later  { background: transparent; color: #a8a8a8; border-color: rgba(255,255,255,0.16); }

[data-theme="light"] .push-prompt {
  background: #fff;
  color: #111;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 16px 44px rgba(0,0,0,0.18);
}
[data-theme="light"] .push-prompt .pp-text span { color: #5a5a5a; }
[data-theme="light"] .push-prompt .pp-later { color: #555; border-color: rgba(0,0,0,0.16); }

/* Keep clear of the parent bottom nav when present. */
body[data-role="parent"] .push-prompt { bottom: calc(76px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .push-prompt { transition: none; }
}

/* ─── Phase 57 — card payment (Stripe) ──────────────────────────── */
.pay-now-btn {
  margin-top: 8px;
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: #d4af37;
  color: #101010;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pay-now-btn:disabled { opacity: .6; cursor: default; }
.pay-flash {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.pay-flash--ok  { background: rgba(53,196,122,.12); color: #35c47a; }
.pay-flash--err { background: rgba(224,166,58,.12); color: #e0a63a; }

/* ══════════════════════════════════════════════════════════════════
   Phase 65 — Parent FAQ
   Native <details> accordions: no JS, so the page still works if a
   script fails. Grouped into sections with their own icon + count.
   ══════════════════════════════════════════════════════════════════ */
.page-head .page-sub {
  margin: 4px 0 0; padding: 0;
  font-size: 12.5px; color: var(--text-3);
}

.faq-wrap { padding: 0 16px 28px; }

.faq-section { margin-bottom: 18px; }
.faq-section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.faq-section-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(var(--brand-rgb),0.12);
  border: 1px solid rgba(var(--brand-rgb),0.28);
  color: var(--brand-bright, var(--brand-bright));
  font-size: 13px;
}
.faq-section-head h3 {
  flex: 1; margin: 0;
  font-size: 14px; font-weight: 700; color: var(--text-1);
}
.faq-count {
  font-size: 10.5px; font-weight: 700; color: var(--text-4);
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 2px 8px;
}

.faq-list {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 14px;
  overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--border-1); }
.faq-item:last-child { border-bottom: none; }

.faq-q {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--text-1);
  cursor: pointer;
  list-style: none;
  transition: background .15s;
  line-height: 1.45;
}
/* Hide the default disclosure triangle in every engine. */
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ''; }
.faq-q > span { flex: 1; min-width: 0; }
.faq-q:hover { background: var(--bg-3); }

.faq-chev {
  flex-shrink: 0; margin-top: 2px;
  font-size: 11px; color: var(--text-4);
  transition: transform .2s;
}
.faq-item[open] > .faq-q { color: var(--brand-bright, var(--brand-bright)); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

.faq-a {
  padding: 0 15px 15px;
  font-size: 12.5px; line-height: 1.7; color: var(--text-3);
}
.faq-a b { color: var(--text-2); font-weight: 700; }
.faq-a a {
  color: var(--brand-bright, var(--brand-bright));
  text-decoration: underline;
}

.faq-foot {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid rgba(var(--brand-rgb),0.26);
}
.faq-foot > i {
  flex-shrink: 0; margin-top: 2px;
  color: var(--brand-bright, var(--brand-bright)); font-size: 16px;
}
.faq-foot-t { font-size: 13px; font-weight: 700; color: var(--text-1); }
.faq-foot-s {
  font-size: 12px; line-height: 1.65; color: var(--text-3); margin-top: 3px;
}
.faq-foot-s a {
  color: var(--brand-bright, var(--brand-bright)); text-decoration: underline;
}

/* Light theme */
html[data-theme="light"] .faq-list,
html[data-theme="light"] .faq-foot { background: var(--bg-1); }
html[data-theme="light"] .faq-q:hover { background: var(--bg-2); }

/* RTL: flip the chevron column */

/* ─── Login field icons (Phase 70E) ────────────────────────────
   These were inline style="position:absolute;left:14px" on the <i>, plus
   padding-left:40px on the input to clear the icon. Inline styles cannot
   respond to `dir`, so in Arabic the icon stayed hard-left while the text
   right-aligned, and the 40px gap opened on the wrong side. Moved to classes
   using logical properties so both mirror automatically. */
.login-field-ico {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  font-size: 13px;
  pointer-events: none;
}
.login-field-input {
  width: 100%;
  padding: 14px;
  padding-inline-start: 40px;   /* clears .login-field-ico */
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  outline: none;
}
html[data-theme="light"] .login-field-input { color: var(--text-1); }

/* ────────────────────────────────────────────────────────────────
   Phase 73 — public self-registration (/register)
   Ported from the approved mock. The parent arriving here has never
   seen the app, so this screen carries the brand on its own: logo,
   stadium backdrop, gold, UAE flag strip.
   `position:relative;z-index:2` recurs because .reg::before lays a
   gold radial glow over the whole panel; without it the cards sit
   under the glow and lose contrast.
   ──────────────────────────────────────────────────────────────── */
/* Multiple phones side by side so every step is visible at once. */

/* ─── Registration shell ─── */
/* The actual scroll container.
   .phone-screen is overflow:hidden at a fixed height, so without this the
   form is clipped and the page just rubber-bands — the parent can never
   reach the Emirates ID / photo fields. Mirrors .app-scroll, which every
   normal app page uses for the same reason. */
.reg-scroll {
  width: 100%; height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Keep the last field clear of the iOS home indicator and of the
     keyboard's accessory bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reg {
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.90) 55%, #000 100%);
  /* Generous bottom padding so the submit button can always be scrolled
     above the on-screen keyboard. */
  padding: 0 0 56px;
  position: relative;
}
.reg::before {
  content: ''; position: absolute;
  top: -10%; left: -20%; right: -20%; height: 40%;
  background: radial-gradient(ellipse at center, rgba(var(--brand-rgb),0.16), transparent 65%);
  pointer-events: none;
}

.reg-head {
  position: relative; z-index: 2;
  padding: 22px 24px 0; text-align: center;
}
/* The logo image carries the brand wordmark, so the header must NOT
   repeat it as text. Sized large enough that fine logo detail survives
   (the current logo.png is a placeholder until A Line's artwork arrives). */
.reg-logo {
  width: 132px; height: 132px; object-fit: contain; display: block;
  margin: 0 auto;
  filter: drop-shadow(0 12px 34px rgba(var(--brand-rgb),0.30));
}
.reg-invited {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 6px 13px;
  background: rgba(var(--brand-rgb),0.10);
  border: 1px solid rgba(var(--brand-rgb),0.30);
  border-radius: 999px;
  font-size: 11px; color: var(--brand-bright); font-weight: 600;
}

/* Stage 12 — language links on the public registration page. */
.reg-lang {
  position: relative; z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; font-size: 12px;
}
.reg-lang a, .reg-lang-on {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--brand-rgb),0.25);
  color: var(--text-2, inherit); text-decoration: none;
}
.reg-lang-on { background: rgba(var(--brand-rgb),0.14); color: var(--brand-bright); font-weight: 600; }

/* ─── Stepper ─── */
.reg-steps {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 22px 24px 4px;
}
.reg-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.reg-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-4);
}
.reg-step.done .reg-step-dot {
  background: rgba(var(--brand-rgb),0.16); border-color: rgba(var(--brand-rgb),0.45); color: var(--brand-bright);
}
.reg-step.active .reg-step-dot {
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  border-color: transparent; color: #0b0b0b;
  box-shadow: 0 0 18px rgba(var(--brand-rgb),0.40);
}
.reg-step-label { font-size: 9.5px; letter-spacing: .04em; color: var(--text-4); font-weight: 600; }
.reg-step.active .reg-step-label { color: #fff; }
.reg-step-bar { width: 42px; height: 1px; background: rgba(255,255,255,0.12); margin: 0 4px 16px; }
.reg-step-bar.filled { background: rgba(var(--brand-rgb),0.45); }

/* ─── Cards ─── */
.reg-card {
  position: relative; z-index: 2;
  margin: 16px 20px 0; padding: 18px;
  background: rgba(17,17,20,0.80);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.reg-card-title {
  font-size: 15px; font-weight: 700; color: #fff;
  display: flex; align-items: center; gap: 9px;
}
.reg-card-title i { color: var(--brand-bright); font-size: 13px; }
.reg-card-sub { font-size: 11.5px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }

.reg-fields { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.reg-field { display: flex; flex-direction: column; gap: 6px; }
.reg-label {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-4);
  display: flex; align-items: center; gap: 5px;
}
.reg-req { color: var(--brand-bright); font-size: 11px; line-height: 1; }
.reg-input {
  width: 100%; height: 46px; padding: 0 13px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 11px;
  color: #fff; font-size: 14px; font-family: inherit;
}
.reg-input::placeholder { color: var(--text-5); }
.reg-input:focus { outline: none; border-color: rgba(var(--brand-rgb),0.55); background: rgba(var(--brand-rgb),0.05); }
.reg-hint { font-size: 10.5px; color: var(--text-4); line-height: 1.45; }
/* Stage 4 — registration mode switch + optional-field marker */
.reg-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-4); }
.reg-choice { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--border-1, rgba(255,255,255,.12)); border-radius: 12px; cursor: pointer; font-size: 13px; }
.reg-choice:has(input:checked) { border-color: var(--accent, #22c55e); }
[data-reg-form][data-kind="corporate"] [data-show-for="individual"],
[data-reg-form][data-kind="individual"] [data-show-for="corporate"] { display: none !important; }

/* Read-only field — what the academy already filled in for you. */
.reg-input.locked {
  background: rgba(255,255,255,0.02);
  color: var(--text-3); border-style: dashed;
}

/* ─── Child block ─── */
.reg-child {
  margin-top: 14px; padding: 15px;
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px;
}
.reg-child-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.reg-child-n {
  font-size: 12px; font-weight: 700; color: var(--brand-bright);
  display: flex; align-items: center; gap: 7px;
}
/* Explicit "Remove" rather than a bare trash glyph: a lone icon on a
   mobile form reads as decoration, and this is the control a parent
   reaches for after adding a child by mistake. Sized for a thumb. */
.reg-child-del {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.28);
  border-radius: 9px; cursor: pointer;
  color: #fca5a5; font-size: 11.5px; font-weight: 600;
  padding: 7px 11px; min-height: 34px;
  font-family: inherit;
}
.reg-child-del i { font-size: 11px; }
.reg-child-del:hover { background: rgba(239,68,68,0.18); color: #fecaca; }
.reg-child-del[hidden] { display: none; }

/* ─── Upload ─── */
.reg-upload {
  display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: 11px;
  border: 1px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.022);
  cursor: pointer;
}
.reg-upload:hover { border-color: rgba(var(--brand-rgb),0.45); background: rgba(var(--brand-rgb),0.04); }
.reg-upload-ico {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(var(--brand-rgb),0.12); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
/* These are <span>s inside a <label> (a <div> is not valid there), so they
   must be made block-level explicitly — otherwise the title and subtitle run
   together as "Upload Emirates IDPhoto or PDF". */
.reg-upload-txt { flex: 1; min-width: 0; display: block; }
.reg-upload-t { display: block; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35; }
.reg-upload-s { display: block; font-size: 10.5px; color: var(--text-4); margin-top: 2px; line-height: 1.4; }
.reg-upload-ico { display: flex; }
/* Filled state — file chosen. */
.reg-upload.filled { border-style: solid; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.05); }
.reg-upload.filled .reg-upload-ico { background: rgba(74,222,128,0.14); color: #4ade80; }
.reg-upload.optional { border-color: rgba(255,255,255,0.10); }

.reg-addchild {
  width: 100%; margin-top: 14px; height: 46px;
  border-radius: 11px; cursor: pointer;
  background: rgba(var(--brand-rgb),0.07);
  border: 1px dashed rgba(var(--brand-rgb),0.38);
  color: var(--brand-bright); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
}
.reg-addchild:hover { background: rgba(var(--brand-rgb),0.12); }

/* ─── Actions ─── */
.reg-actions { display: flex; gap: 10px; margin: 20px 20px 0; position: relative; z-index: 2; }
.reg-btn {
  flex: 1; height: 50px; border-radius: 13px; cursor: pointer;
  font-size: 14.5px; font-weight: 700; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border: none; text-decoration: none;
}
.reg-btn-primary {
  background: linear-gradient(180deg, var(--brand-bright), var(--brand));
  color: #0b0b0b;
  box-shadow: 0 6px 22px rgba(var(--brand-rgb),0.30);
}
.reg-btn-ghost {
  flex: 0 0 auto; width: 54px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-2);
}

.reg-legal {
  margin: 16px 26px 0; position: relative; z-index: 2;
  font-size: 10px; color: var(--text-5); text-align: center; line-height: 1.6;
}

/* ─── Result screens ─── */
.reg-result { padding: 60px 30px; text-align: center; position: relative; z-index: 2; }
.reg-result-ico {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.reg-result-ico.ok   { background: rgba(var(--brand-rgb),0.13); color: var(--brand-bright); box-shadow: 0 0 40px rgba(var(--brand-rgb),0.22); }
.reg-result-ico.mail { background: rgba(74,222,128,0.12); color: #4ade80; }
.reg-result-t { font-size: 21px; font-weight: 800; color: #fff; }
.reg-result-b { font-size: 13px; color: var(--text-3); line-height: 1.65; margin-top: 12px; }
.reg-result-b b { color: #fff; font-weight: 600; }

.reg-timeline { margin: 26px auto 0; max-width: 300px; text-align: start; }
.reg-tl {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.reg-tl:last-child { border-bottom: none; }
.reg-tl-ico {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.reg-tl.done    .reg-tl-ico { background: rgba(var(--brand-rgb),0.16); color: var(--brand-bright); }
.reg-tl.waiting .reg-tl-ico { background: rgba(255,255,255,0.05); color: var(--text-4); }
.reg-tl-t { font-size: 12.5px; font-weight: 600; color: #fff; }
.reg-tl.waiting .reg-tl-t { color: var(--text-3); font-weight: 500; }
.reg-tl-s { font-size: 10.5px; color: var(--text-4); margin-top: 2px; line-height: 1.45; }

/* Flag strip, same as the real splash. */
.reg-flag { display: flex; gap: 0; margin: 34px auto 0; width: 54px; height: 3px; border-radius: 2px; overflow: hidden; position: relative; z-index: 2; }
.reg-flag span { flex: 1; }
.reg-flag .g { background: #00732f; } .reg-flag .w { background: #fff; } .reg-flag .r { background: #ce1126; }

/* Error / duplicate notice */
.reg-alert {
  display: flex; gap: 10px; margin: 16px 20px 0; padding: 12px 14px;
  border-radius: 11px; font-size: 12px; line-height: 1.5;
  position: relative; z-index: 2;
}
.reg-alert i { font-size: 13px; margin-top: 1px; }
.reg-alert-warn { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.30); color: #fcd34d; }
.reg-alert-warn b { color: #fff; }
/* Validation failure returned by POST /register. */
.reg-alert-err {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  color: #fca5a5;
}
.reg-alert-err b { color: #fff; }
.reg-result-ico.err { background: rgba(239,68,68,0.12); color: #fca5a5; }

/* The form lives inside .phone-screen, which scrolls; the mock relied on
   its own wrapper for that. */
/* Disabled submit while uploading. */
.reg-btn[disabled] { opacity: .65; cursor: default; }

/* ── Stage 8 — Progress and Stress Card (portal + staff) ─────────────── */
.sc-card { background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 14px; margin: 8px 0 14px; }
.sc-empty { color: var(--text-3); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sc-title { font-weight: 700; font-size: 14px; color: var(--text-1); }
.sc-date { font-size: 11px; color: var(--text-4); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sc-item { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 10px; min-width: 0; }
.sc-name { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-score { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 6px; flex-wrap: wrap; }
.sc-score b { font-size: 22px; color: var(--text-1); font-weight: 800; }
.sc-of { font-size: 11px; color: var(--text-4); }
.sc-delta { font-size: 11px; font-weight: 700; margin-inline-start: auto; color: var(--text-3); }
.sc-better .sc-delta { color: var(--status-present); }
.sc-worse .sc-delta { color: var(--status-absent); }
.sc-bar { height: 6px; border-radius: 4px; background: var(--border-2); overflow: hidden; }
.sc-fill { height: 100%; background: var(--brand-bright); border-radius: 4px; }
.sc-fill-rev { background: var(--status-late); }
.sc-ends { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--text-4); margin-top: 4px; }
.sc-hint { font-size: 10px; color: var(--text-4); margin-top: 2px; }
.sc-trend { background: var(--bg-3); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 12px; margin: 8px 0 14px; }
.sc-trend-head { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.sc-trend-box { position: relative; height: 240px; }
.sc-trend-empty { color: var(--text-4); font-size: 12px; padding: 10px 2px 14px; }
.pg-ranges { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.pg-ranges .chip { padding: 5px 12px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border-2); color: var(--text-3); text-decoration: none; }
.pg-ranges .chip.active { background: rgba(var(--brand-rgb),0.15); color: var(--brand-bright); border-color: rgba(var(--brand-rgb),0.45); }
.pg-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.pg-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-3); }
.pg-measures { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.pg-measure { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--border-1); border-radius: 10px; }
.pg-measure-name { font-weight: 700; color: var(--text-1); font-size: 13px; }
.pg-measure-scale { font-size: 11px; color: var(--text-4); }
.pg-textarea { width: 100%; padding: 10px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--border-1); color: var(--text-1); font-size: 13px; resize: vertical; box-sizing: border-box; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pg-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); margin: 6px 0; }
.pg-assess-link { display: inline-flex; gap: 4px; align-items: center; color: var(--brand-bright); text-decoration: none; font-size: 11px; }
@media (max-width: 480px) {
  .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-trend-box { height: 200px; }
}