/* ═══════════════════════════════════════════════════════════════
   DraftReady.AI — Athlete Search Portal Styles
   portal.css — Full portal UI: nav, hero, filters, cards, modals
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --neon:       #00f5d4;
  --purple:     #7c3aed;
  --purple-lt:  #a855f7;
  --blue:       #3b82f6;
  --gold:       #f59e0b;
  --pink:       #ec4899;
  --green:      #22c55e;
  --dark:       #0a0a0f;
  --dark2:      #111118;
  --dark3:      #1a1a2e;
  --dark4:      #16213e;
  --card-bg:    #12121c;
  --border:     rgba(255,255,255,0.08);
  --border2:    rgba(255,255,255,0.14);
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim:   #64748b;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  18px;
  --shadow:     0 4px 24px rgba(0,0,0,0.5);
  --shadow-glow:0 0 30px rgba(0,245,212,0.15);
  --trans:      all 0.22s ease;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.portal-body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--dark);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ════════════════════════════════════════
   PORTAL NAVBAR
   ════════════════════════════════════════ */
.portal-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  height: 60px;
  background: rgba(10,10,15,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
}

.portal-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}
.portal-nav-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--neon);
  background: rgba(0,245,212,0.1);
  border: 1px solid rgba(0,245,212,0.25);
  padding: 2px 8px;
  border-radius: 20px;
}

.portal-nav-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
}
.pnav-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--trans);
  position: relative;
  white-space: nowrap;
}
.pnav-tab:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.pnav-tab.active {
  background: rgba(0,245,212,0.1);
  color: var(--neon);
  border: 1px solid rgba(0,245,212,0.2);
}
.pnav-badge {
  background: var(--pink);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portal-nav-right { margin-left: auto; flex-shrink: 0; }
.portal-signin-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(124,58,237,0.45);
  background: rgba(124,58,237,0.12);
  color: var(--purple-lt);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
}
.portal-signin-btn:hover {
  background: rgba(124,58,237,0.22);
  border-color: var(--purple-lt);
}

/* ════════════════════════════════════════
   HERO BANNER
   ════════════════════════════════════════ */
.portal-hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,245,212,0.12) 0%, transparent 65%),
              radial-gradient(ellipse 60% 50% at 80% 100%, rgba(124,58,237,0.15) 0%, transparent 60%),
              linear-gradient(180deg, #0e0e1a 0%, var(--dark) 100%);
}
.portal-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.portal-hero-particle {
  position: absolute;
  border-radius: 50%;
  animation: heroFloat linear infinite;
  opacity: 0.4;
}
@keyframes heroFloat {
  0%   { transform: translateY(110%) scale(1);   opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-10%) scale(0.6); opacity: 0; }
}

.portal-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  width: 100%;
}
.portal-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 1rem;
  border-radius: 20px;
  background: rgba(0,245,212,0.1);
  border: 1px solid rgba(0,245,212,0.25);
  color: var(--neon);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.portal-hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 1rem;
}
.portal-hero-accent {
  background: linear-gradient(135deg, var(--neon) 0%, var(--purple-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.portal-hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Quick Search */
.portal-quick-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.pqs-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  border-right: 1px solid var(--border);
  flex: 1;
  min-width: 0;
}
.pqs-field i { color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; }
.pqs-field select,
.pqs-field input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.87rem;
  padding: 0.9rem 0;
  width: 100%;
  cursor: pointer;
}
.pqs-field select option { background: var(--dark3); }
.pqs-text { flex: 1.4; }
.pqs-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(135deg, var(--neon), #00c9a7);
  color: #000;
  font-weight: 700;
  font-size: 0.87rem;
  border: none;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
  flex-shrink: 0;
}
.pqs-btn:hover { filter: brightness(1.1); }

.portal-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.phs-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.phs-pill span { font-weight: 700; color: #fff; }

/* ════════════════════════════════════════
   PORTAL MAIN LAYOUT
   ════════════════════════════════════════ */
.portal-main { min-height: 60vh; }
.portal-view { display: none; }
.portal-view.active { display: block; }

.portal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: calc(100vh - 60px - 440px);
}

/* ════════════════════════════════════════
   SIDEBAR FILTERS
   ════════════════════════════════════════ */
.portal-sidebar {
  background: var(--dark2);
  border-right: 1px solid var(--border);
  padding: 1.25rem;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.portal-sidebar::-webkit-scrollbar { width: 4px; }
.portal-sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-header h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-clear-btn {
  font-size: 0.75rem;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: var(--trans);
  padding: 2px 6px;
  border-radius: 4px;
}
.sidebar-clear-btn:hover { color: var(--pink); background: rgba(236,72,153,0.1); }

/* Filter Groups */
.filter-group {
  margin-bottom: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.filter-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  transition: var(--trans);
  user-select: none;
}
.filter-group-title:hover { background: rgba(255,255,255,0.06); }
.filter-group-title i:first-child { color: var(--neon); font-size: 0.78rem; width: 14px; }
.fg-chevron { margin-left: auto; transition: transform 0.2s; font-size: 0.7rem; color: var(--text-dim); }
.filter-group.collapsed .fg-chevron { transform: rotate(-90deg); }
.filter-group-body {
  padding: 0.75rem;
  background: transparent;
  transition: var(--trans);
}
.filter-group.collapsed .filter-group-body { display: none; }

/* Level chips */
.filter-level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.level-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--trans);
  color: var(--text-muted);
  user-select: none;
}
.level-chip:hover { border-color: var(--neon); color: var(--text); background: rgba(0,245,212,0.06); }
.level-chip:has(input:checked) {
  background: rgba(0,245,212,0.12);
  border-color: var(--neon);
  color: var(--neon);
}
.level-chip input { display: none; }

/* Check lists */
.filter-check-list { display: flex; flex-direction: column; gap: 0.35rem; }
.filter-check-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 5px;
  transition: var(--trans);
  user-select: none;
}
.filter-check-list label:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.filter-check-list input[type="checkbox"] { accent-color: var(--neon); width: 13px; height: 13px; }
.filter-check-list i { width: 14px; text-align: center; font-size: 0.75rem; }

.filter-search-input {
  width: 100%;
  padding: 0.45rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  outline: none;
  margin-bottom: 0.5rem;
  transition: var(--trans);
}
.filter-search-input:focus { border-color: var(--neon); }

.filter-select {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}
.filter-select option { background: var(--dark3); }

/* Range slider */
.filter-range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.filter-range-row input[type="range"] {
  flex: 1;
  accent-color: var(--neon);
  height: 4px;
  cursor: pointer;
}
.filter-range-val {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--neon);
  min-width: 60px;
  text-align: right;
}
.filter-range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-dim);
  padding: 0 2px;
}

/* Rarity chips */
.filter-rarity-list { display: flex; flex-direction: column; gap: 0.3rem; }
.rarity-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--trans);
  user-select: none;
}
.rarity-chip input { display: none; }
.rarity-chip.legendary { color: #ffd700; border-color: rgba(255,215,0,0.2); background: rgba(255,215,0,0.05); }
.rarity-chip.epic      { color: #c084fc; border-color: rgba(192,132,252,0.2); background: rgba(192,132,252,0.05); }
.rarity-chip.rare      { color: #60a5fa; border-color: rgba(96,165,250,0.2); background: rgba(96,165,250,0.05); }
.rarity-chip.uncommon  { color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05); }
.rarity-chip.common    { color: var(--text-muted); border-color: var(--border); background: transparent; }
.rarity-chip:has(input:checked) { filter: brightness(1.3); border-width: 1.5px; }

.sidebar-apply-btn {
  display: none;
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem;
  background: var(--neon);
  color: #000;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ════════════════════════════════════════
   RESULTS AREA
   ════════════════════════════════════════ */
.portal-results-area {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Toolbar */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.results-toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.results-toolbar-right { display: flex; align-items: center; gap: 0.75rem; }

.filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.83rem;
  cursor: pointer;
  transition: var(--trans);
}
.filter-toggle-btn:hover { background: rgba(255,255,255,0.1); }
.filter-active-count {
  background: var(--neon);
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.results-count-label { font-size: 0.85rem; color: var(--text-muted); }
.results-count-label strong { color: var(--text); }
.active-filter-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.5rem; }
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 8px;
  background: rgba(0,245,212,0.1);
  border: 1px solid rgba(0,245,212,0.25);
  border-radius: 12px;
  font-size: 0.72rem;
  color: var(--neon);
}
.active-tag button {
  background: none;
  border: none;
  color: var(--neon);
  cursor: pointer;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.7;
}
.active-tag button:hover { opacity: 1; }

.sort-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.sort-row select {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
}
.sort-row select option { background: var(--dark3); }

.view-toggle { display: flex; gap: 0.25rem; }
.view-btn {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: var(--trans);
}
.view-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.view-btn.active { background: rgba(0,245,212,0.12); border-color: var(--neon); color: var(--neon); }

/* Level tab bar */
.level-tab-bar {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.level-tab-bar::-webkit-scrollbar { display: none; }
.level-tab {
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--trans);
}
.level-tab:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.level-tab.active {
  background: rgba(0,245,212,0.12);
  border-color: var(--neon);
  color: var(--neon);
}

/* ─── ATHLETE CARD — GRID MODE ─── */
.results-container.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.results-container.list-view {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Grid Card */
.athlete-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
}
.athlete-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--shadow-glow);
  border-color: rgba(0,245,212,0.3);
}

.athlete-card-photo {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, var(--dark3), var(--dark4));
  overflow: hidden;
}
.athlete-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.3s ease;
}
.athlete-card:hover .athlete-card-photo img { transform: scale(1.05); }
.athlete-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(0,245,212,0.1));
}

.athlete-card-level-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.athlete-card-rarity {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.rarity-legendary { background: rgba(255,215,0,0.85); color: #000; }
.rarity-epic      { background: rgba(192,132,252,0.85); color: #000; }
.rarity-rare      { background: rgba(96,165,250,0.85); color: #000; }
.rarity-uncommon  { background: rgba(74,222,128,0.85); color: #000; }
.rarity-common    { background: rgba(100,116,139,0.7); color: #fff; }

.level-d1  { background: rgba(0,245,212,0.85); color: #000; }
.level-d2  { background: rgba(59,130,246,0.85); color: #fff; }
.level-d3  { background: rgba(99,102,241,0.85); color: #fff; }
.level-juco { background: rgba(245,158,11,0.85); color: #000; }
.level-semi-pro { background: rgba(236,72,153,0.85); color: #fff; }
.level-professional { background: rgba(34,197,94,0.85); color: #000; }
.level-high-school { background: rgba(148,163,184,0.85); color: #000; }
.level-youth { background: rgba(251,191,36,0.85); color: #000; }

.athlete-card-body { padding: 0.85rem; }
.athlete-card-sport-icon {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.athlete-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.athlete-card-pos {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.athlete-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}
.acs-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  padding: 0.3rem 0.5rem;
  text-align: center;
}
.acs-stat-val { font-size: 0.88rem; font-weight: 700; color: var(--neon); }
.acs-stat-lbl { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.athlete-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}
.acf-location { font-size: 0.75rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.3rem; }
.acf-icons { display: flex; gap: 0.35rem; }
.acf-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.acf-icon.verified { background: rgba(0,245,212,0.12); color: var(--neon); }
.acf-icon.contact  { background: rgba(124,58,237,0.12); color: var(--purple-lt); }
.acf-icon.featured { background: rgba(245,158,11,0.12); color: var(--gold); }

/* List Card */
.athlete-list-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  transition: var(--trans);
}
.athlete-list-card:hover {
  border-color: rgba(0,245,212,0.25);
  background: rgba(255,255,255,0.03);
  transform: translateX(3px);
}
.alc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dark3), var(--dark4));
  flex-shrink: 0;
}
.alc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.alc-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(0,245,212,0.1));
}
.alc-info { min-width: 0; }
.alc-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  flex-wrap: wrap;
}
.alc-name { font-weight: 700; font-size: 0.95rem; color: #fff; }
.alc-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.alc-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.alc-meta span { display: flex; align-items: center; gap: 0.25rem; }
.alc-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.alc-action-btn {
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
}
.alc-btn-view { background: rgba(0,245,212,0.1); border-color: rgba(0,245,212,0.3); color: var(--neon); }
.alc-btn-contact { background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.3); color: var(--purple-lt); }
.alc-btn-view:hover { background: rgba(0,245,212,0.2); }
.alc-btn-contact:hover { background: rgba(124,58,237,0.2); }

/* Loading & empty */
.results-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border2);
  border-top-color: var(--neon);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 5rem 2rem;
  color: var(--text-muted);
  text-align: center;
}
.results-empty i { font-size: 3rem; color: var(--border2); }
.results-empty h3 { font-size: 1.1rem; color: var(--text); }
.results-empty p { font-size: 0.87rem; max-width: 320px; }

/* Pagination */
.results-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem 0;
}
.page-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: var(--trans);
}
.page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text); }
.page-btn:disabled { opacity: 0.3; cursor: default; }
.page-num-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.83rem;
  transition: var(--trans);
  padding: 0 0.5rem;
}
.page-num-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.page-num-btn.active { background: rgba(0,245,212,0.15); border-color: var(--neon); color: var(--neon); font-weight: 700; }

/* ════════════════════════════════════════
   TEAMS PAGE
   ════════════════════════════════════════ */
.teams-page { padding: 2rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.teams-page-header { text-align: center; margin-bottom: 2rem; }
.teams-page-header h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.teams-page-header p { color: var(--text-muted); margin-bottom: 1.25rem; }
.teams-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.teams-filter-row select,
.teams-filter-row input {
  padding: 0.5rem 0.85rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
  cursor: pointer;
  min-width: 160px;
}
.teams-filter-row input { cursor: text; }
.teams-filter-row select option { background: var(--dark3); }

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.team-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: var(--trans);
  cursor: pointer;
}
.team-card:hover { border-color: rgba(124,58,237,0.4); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.team-card-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.85rem; }
.team-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(0,245,212,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.team-card-info { flex: 1; min-width: 0; }
.team-card-name { font-weight: 700; font-size: 0.95rem; color: #fff; margin-bottom: 0.2rem; }
.team-card-org { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.team-card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.team-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-tag-level { background: rgba(0,245,212,0.15); color: var(--neon); }
.team-tag-sport { background: rgba(124,58,237,0.15); color: var(--purple-lt); }
.team-tag-verified { background: rgba(34,197,94,0.15); color: var(--green); }

.team-card-bio { font-size: 0.81rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }
.team-card-footer { display: flex; align-items: center; justify-content: space-between; }
.team-openings {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
}
.team-contact-btn {
  padding: 0.35rem 0.9rem;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.35);
  border-radius: 7px;
  color: var(--purple-lt);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
}
.team-contact-btn:hover { background: rgba(124,58,237,0.25); }

/* ════════════════════════════════════════
   SMART MATCH PAGE
   ════════════════════════════════════════ */
.match-page { padding: 2rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.match-hero { text-align: center; margin-bottom: 2.5rem; }
.match-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--purple-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #000;
  margin: 0 auto 1rem;
  box-shadow: 0 0 40px rgba(0,245,212,0.3);
}
.match-hero h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.match-hero p { color: var(--text-muted); max-width: 500px; margin: 0 auto; }

.match-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.match-form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.match-form-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--neon);
}

.match-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.match-form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.match-form-field label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.match-form-field label .req { color: var(--pink); }
.match-form-field select,
.match-form-field input {
  padding: 0.55rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
  transition: var(--trans);
}
.match-form-field select:focus,
.match-form-field input:focus { border-color: var(--neon); }
.match-form-field select option { background: var(--dark3); }

/* Priorities */
.match-priorities { margin: 1rem 0; }
.match-priority-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; }
.priority-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.priority-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: grab;
  transition: var(--trans);
  user-select: none;
}
.priority-chip:hover { background: rgba(0,245,212,0.08); border-color: var(--neon); color: var(--neon); }
.priority-chip.dragging { opacity: 0.5; cursor: grabbing; }
.priority-chip i { font-size: 0.72rem; }

/* Opt-in box */
.match-optin-box {
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin: 1rem 0;
}
.optin-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.optin-icon { font-size: 1.2rem; color: var(--purple-lt); margin-top: 2px; flex-shrink: 0; }
.optin-header div { flex: 1; }
.optin-header strong { display: block; font-size: 0.88rem; color: #fff; margin-bottom: 0.2rem; }
.optin-header span { font-size: 0.78rem; color: var(--text-muted); }

/* Toggle switch */
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 11px;
  cursor: pointer;
  transition: var(--trans);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: var(--trans);
}
.toggle-switch input:checked + .toggle-slider { background: var(--purple); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

.optin-form { margin-top: 0.85rem; border-top: 1px solid rgba(124,58,237,0.2); padding-top: 0.85rem; }
.optin-save-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 8px;
  color: var(--purple-lt);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--trans);
}
.optin-save-btn:hover { background: rgba(124,58,237,0.3); }

.match-run-btn {
  width: 100%;
  padding: 0.9rem;
  background: linear-gradient(135deg, var(--neon), #00c9a7);
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--trans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.match-run-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,245,212,0.3); }

/* Match Results */
.match-results-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  min-height: 400px;
}
.match-results-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  height: 100%;
  min-height: 350px;
  color: var(--text-muted);
  text-align: center;
}
.match-results-empty i { font-size: 3.5rem; color: var(--border2); }
.match-results-header { margin-bottom: 1rem; }
.match-results-header h3 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.match-count-badge {
  background: var(--neon);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Match card */
.match-athlete-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: var(--trans);
}
.match-athlete-card:hover { border-color: rgba(0,245,212,0.3); background: rgba(0,245,212,0.04); }
.match-score-ring {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.match-score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.match-score-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.match-score-ring .bg-ring { stroke: rgba(255,255,255,0.08); }
.match-score-ring .fg-ring { stroke: var(--neon); transition: stroke-dashoffset 1s ease; }
.match-score-val { font-size: 0.75rem; font-weight: 800; color: var(--neon); }

.match-card-info { flex: 1; min-width: 0; }
.match-card-name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.match-card-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.15rem; }
.match-card-reasons { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.35rem; }
.match-reason-tag {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,245,212,0.1);
  color: var(--neon);
  border: 1px solid rgba(0,245,212,0.2);
}

/* ════════════════════════════════════════
   ALERTS PAGE
   ════════════════════════════════════════ */
.alerts-page { padding: 2.5rem 1.5rem; max-width: 900px; margin: 0 auto; }
.alerts-page-header { text-align: center; margin-bottom: 2rem; }
.alerts-page-header h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.alerts-page-header p { color: var(--text-muted); }

.alerts-login-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
}
.alerts-login-gate i { font-size: 3rem; color: var(--text-dim); }
.alerts-login-gate h3 { font-size: 1.2rem; }
.alerts-login-gate p { color: var(--text-muted); max-width: 380px; }

.alerts-summary-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.alert-summary-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.alert-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.alert-summary-num { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.alert-summary-lbl { font-size: 0.75rem; color: var(--text-muted); }

.alerts-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.alert-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.alert-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-new { background: var(--neon); box-shadow: 0 0 8px var(--neon); animation: pulse 2s infinite; }
.status-viewed { background: var(--blue); }
.status-contacted { background: var(--green); }
.status-dismissed { background: var(--text-dim); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px var(--neon); }
  50% { box-shadow: 0 0 16px var(--neon), 0 0 6px rgba(0,245,212,0.4); }
}
.alert-row-info { flex: 1; min-width: 0; }
.alert-row-name { font-weight: 700; font-size: 0.9rem; color: #fff; }
.alert-row-meta { font-size: 0.77rem; color: var(--text-muted); margin-top: 0.15rem; }
.alert-row-score { font-size: 0.82rem; font-weight: 700; color: var(--neon); }

/* ════════════════════════════════════════
   ATHLETE PROFILE MODAL
   ════════════════════════════════════════ */
.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 500;
  display: none;
  backdrop-filter: blur(4px);
}
.portal-modal-backdrop.open { display: block; }

.portal-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 501;
  width: min(700px, 95vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--dark3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  display: none;
  box-shadow: 0 25px 80px rgba(0,0,0,0.7);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  transition: transform 0.28s ease, opacity 0.28s ease;
  opacity: 0;
}
.portal-modal.open {
  display: block;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.portal-modal-sm { width: min(480px, 95vw); }
.portal-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: var(--trans);
  z-index: 2;
}
.portal-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Modal athlete header */
.modal-athlete-header {
  display: flex;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-athlete-photo {
  width: 90px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--dark4), var(--dark3));
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.modal-athlete-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.modal-athlete-photo-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(0,245,212,0.1));
}
.modal-athlete-info { flex: 1; min-width: 0; padding-top: 0.25rem; }
.modal-athlete-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.modal-badge {
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-badge-verified { background: rgba(0,245,212,0.15); color: var(--neon); border: 1px solid rgba(0,245,212,0.3); }
.modal-badge-featured { background: rgba(245,158,11,0.15); color: var(--gold); border: 1px solid rgba(245,158,11,0.3); }
.modal-badge-contact  { background: rgba(124,58,237,0.15); color: var(--purple-lt); border: 1px solid rgba(124,58,237,0.3); }
#modalAthleteName { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem; }
.modal-athlete-meta { font-size: 0.84rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.modal-athlete-meta span { display: flex; align-items: center; gap: 0.3rem; }
.modal-athlete-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.modal-tag {
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Modal tabs */
.modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 1.75rem;
}
.modal-tab {
  padding: 0.7rem 1rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: var(--trans);
  margin-bottom: -1px;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--neon); border-bottom-color: var(--neon); }

.modal-body { padding: 1.5rem 1.75rem; }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }
.modal-bio { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.25rem; }

.modal-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.modal-overview-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}
.moi-val { font-size: 1rem; font-weight: 700; color: var(--neon); }
.moi-lbl { font-size: 0.7rem; color: var(--text-dim); margin-top: 0.2rem; }

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}
.modal-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.msc-val { font-size: 1.4rem; font-weight: 800; color: var(--neon); }
.msc-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }

.modal-achievements-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.modal-achievements-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text);
}
.modal-achievements-list li i { color: var(--gold); font-size: 0.8rem; flex-shrink: 0; }

#modalContactPanel .contact-info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.65rem;
}
#modalContactPanel .contact-info-row i { color: var(--neon); width: 18px; text-align: center; }
#modalContactPanel .contact-info-row span { font-size: 0.86rem; color: var(--text); }
.no-contact-msg { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.87rem; }

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.modal-action-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--trans);
  border: 1px solid;
}
.modal-action-btn.secondary {
  background: rgba(255,255,255,0.05);
  border-color: var(--border2);
  color: var(--text-muted);
}
.modal-action-btn.secondary:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.modal-action-btn.primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-lt));
  border-color: var(--purple-lt);
  color: #fff;
}
.modal-action-btn.primary:hover { filter: brightness(1.1); }

/* Contact modal */
.contact-modal-header {
  padding: 1.75rem 1.75rem 0;
  text-align: center;
}
.contact-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--purple-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #000;
  margin: 0 auto 1rem;
}
.contact-modal-header h3 { font-size: 1.2rem; font-weight: 700; }
.contact-modal-header p { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.3rem; }

.contact-modal-body { padding: 1.25rem 1.75rem 1.75rem; }
.contact-form { display: flex; flex-direction: column; gap: 0.65rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.84rem;
  outline: none;
  transition: var(--trans);
  font-family: inherit;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--neon); }
.contact-form select option { background: var(--dark3); }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.cform-send-btn {
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--neon), #00c9a7);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--trans);
  margin-top: 0.25rem;
}
.cform-send-btn:hover { filter: brightness(1.08); }
.seeker-optin-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.35rem 0;
}
.seeker-optin-row input { accent-color: var(--purple-lt); }

/* ════════════════════════════════════════
   TOAST
   ════════════════════════════════════════ */
.portal-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--dark3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 0.87rem;
  color: var(--text);
  z-index: 600;
  transition: transform 0.3s ease;
  box-shadow: var(--shadow);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.portal-toast.show { transform: translateX(-50%) translateY(0); }
.portal-toast.success i { color: var(--neon); }
.portal-toast.error i   { color: var(--pink); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 150;
}
.sidebar-overlay.open { display: block; }

/* ════════════════════════════════════════
   MOBILE BOTTOM NAV BAR
   ════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(10,10,15,0.98);
  border-top: 1px solid var(--border2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0;
  safe-area-inset-bottom: env(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mbn-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 58px;
}
.mbn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease;
  padding: 6px 4px;
  position: relative;
  min-height: 44px;
  text-decoration: none;
}
.mbn-btn i {
  font-size: 1.15rem;
  line-height: 1;
}
.mbn-btn.active {
  color: var(--neon);
}
.mbn-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--neon);
  border-radius: 0 0 3px 3px;
}
.mbn-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--pink);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* ── 1100px: Slightly tighter sidebar ── */
@media (max-width: 1100px) {
  .portal-layout { grid-template-columns: 250px 1fr; }
}

/* ── 900px: Sidebar becomes a slide-in drawer ── */
@media (max-width: 900px) {
  .portal-layout { grid-template-columns: 1fr; }

  .portal-sidebar {
    position: fixed;
    top: 0;
    left: -310px;
    width: 300px;
    height: 100vh;
    z-index: 400;
    transition: left 0.28s cubic-bezier(.4,0,.2,1);
    padding-top: 3.5rem;  /* room for close area */
    overflow-y: auto;
  }
  .portal-sidebar.open { left: 0; box-shadow: 4px 0 40px rgba(0,0,0,0.6); }

  .filter-toggle-btn  { display: flex !important; }
  .sidebar-apply-btn  { display: flex !important; }
  .match-layout       { grid-template-columns: 1fr; }
  .match-results-panel { min-height: 280px; }

  /* Quick search stacks vertically */
  .portal-quick-search {
    flex-direction: column;
    border-radius: var(--radius);
    max-width: 100%;
  }
  .pqs-field {
    border-right: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
    padding: 0 0.85rem;
  }
  .pqs-field select,
  .pqs-field input { padding: 0.75rem 0; }
  .pqs-btn { width: 100%; justify-content: center; border-radius: 0 0 var(--radius) var(--radius); padding: 0.85rem; }
}

/* ── 768px: Mobile layout starts ── */
@media (max-width: 768px) {
  /* Navbar: hide tabs, shrink sign-in */
  .portal-nav-tabs   { display: none; }
  .portal-nav-right  { margin-left: auto; }
  .portal-signin-btn span { display: none; }  /* icon only */
  .portal-signin-btn { padding: 0.45rem 0.75rem; }
  .portal-nav-label  { display: none; }
  .portal-nav        { padding: 0 1rem; gap: 0.5rem; }

  /* Show mobile bottom nav */
  .mobile-bottom-nav { display: block; }

  /* Push page content up from bottom nav */
  .portal-main  { padding-bottom: 70px; }
  .portal-toast { bottom: 75px; }

  /* Hero */
  .portal-hero {
    padding: 2.5rem 1rem 2rem;
    min-height: auto;
  }
  .portal-hero-title  { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .portal-hero-sub    { font-size: 0.9rem; margin-bottom: 1.25rem; }
  .portal-hero-badge  { font-size: 0.7rem; padding: 0.28rem 0.75rem; margin-bottom: 0.85rem; }
  .phs-pill           { font-size: 0.75rem; padding: 0.28rem 0.65rem; }

  /* Results area gets proper padding on mobile */
  .portal-results-area { padding: 0.85rem; gap: 0.75rem; }

  /* Results toolbar: single row, compact */
  .results-toolbar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .results-toolbar-left  { flex: 1; min-width: 0; }
  .results-toolbar-right { flex-shrink: 0; }
  .sort-row label        { display: none; } /* hide 'Sort:' label, keep select */
  .sort-row select       { font-size: 0.78rem; padding: 0.3rem 0.45rem; }

  /* Level tabs: horizontally scrollable, no wrap */
  .level-tab-bar {
    gap: 0.25rem;
    padding-bottom: 4px;
    /* subtle scroll indicator gradient */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
  }
  .level-tab {
    padding: 0.38rem 0.7rem;
    font-size: 0.75rem;
    flex-shrink: 0;  /* prevent squish */
  }

  /* ── ATHLETE GRID CARD — 2-col on mobile ── */
  .results-container.grid-view {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }
  .athlete-card-photo    { height: 140px; }
  .athlete-card-body     { padding: 0.65rem; }
  .athlete-card-name     { font-size: 0.88rem; }
  .athlete-card-pos      { font-size: 0.72rem; margin-bottom: 0.45rem; }
  .athlete-card-stats    { grid-template-columns: 1fr 1fr; gap: 0.25rem; margin-bottom: 0.45rem; }
  .acs-stat              { padding: 0.25rem 0.3rem; }
  .acs-stat-val          { font-size: 0.8rem; }
  .acs-stat-lbl          { font-size: 0.58rem; }
  .acf-location          { font-size: 0.68rem; }
  .athlete-card-sport-icon { font-size: 0.7rem; }

  /* ── ATHLETE LIST CARD — stacks on mobile ── */
  .athlete-list-card {
    grid-template-columns: 48px 1fr;
    gap: 0.65rem;
    padding: 0.75rem;
  }
  .alc-actions           { display: none; } /* hide action buttons — tap card to open modal */
  .alc-avatar            { width: 48px; height: 48px; }
  .alc-name              { font-size: 0.88rem; }
  .alc-meta              { font-size: 0.72rem; gap: 0.3rem; }

  /* Teams page */
  .teams-page            { padding: 1.25rem 0.85rem; }
  .teams-grid            { grid-template-columns: 1fr; gap: 0.85rem; }
  .teams-filter-row      { flex-direction: column; align-items: stretch; }
  .teams-filter-row select,
  .teams-filter-row input { min-width: unset; width: 100%; }

  /* Match page */
  .match-page            { padding: 1.25rem 0.85rem; }
  .match-hero            { margin-bottom: 1.5rem; }
  .match-hero h2         { font-size: 1.5rem; }
  .match-hero-icon       { width: 56px; height: 56px; font-size: 1.5rem; }
  .match-form-row        { grid-template-columns: 1fr; gap: 0.55rem; }
  .match-form-card       { padding: 1.1rem; }
  .priority-chips        { gap: 0.3rem; }
  .priority-chip         { padding: 0.35rem 0.6rem; font-size: 0.74rem; }

  /* Alerts page */
  .alerts-page           { padding: 1.5rem 0.85rem; }
  .alerts-summary-row    { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .alert-summary-card    { padding: 0.75rem; }
  .alert-row             { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; }
  .alert-row-score       { margin-left: auto; }

  /* ── ATHLETE MODAL — bottom sheet on mobile ── */
  .portal-modal {
    /* Slide up from bottom instead of centering */
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.4,0,.2,1), opacity 0.32s ease;
    opacity: 1; /* always opaque — transform handles show/hide */
  }
  .portal-modal.open {
    transform: translateY(0);
    display: block;
  }
  /* Add a drag handle pill at the top of modal */
  .portal-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 0.75rem auto 0;
  }
  .portal-modal-sm {
    width: 100%;
    max-width: 100%;
  }

  .modal-athlete-header  { flex-direction: row; padding: 1rem 1rem 0.85rem; gap: 0.85rem; align-items: flex-start; }
  .modal-athlete-photo   { width: 70px; height: 88px; border-radius: 10px; flex-shrink: 0; }
  #modalAthleteName      { font-size: 1.15rem; }
  .modal-athlete-meta    { font-size: 0.76rem; gap: 0.45rem; }
  .modal-tabs            { padding: 0 1rem; }
  .modal-tab             { padding: 0.6rem 0.7rem; font-size: 0.78rem; }
  .modal-body            { padding: 1rem; }
  .modal-footer {
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Add safe-area for iPhone home bar */
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
  .modal-action-btn      { flex: 1; justify-content: center; font-size: 0.8rem; padding: 0.6rem 0.5rem; }
  .modal-overview-grid   { grid-template-columns: repeat(3, 1fr); }
  .modal-stats-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Contact + seeker modals */
  .contact-modal-header  { padding: 1.25rem 1rem 0; }
  .contact-modal-header h3 { font-size: 1rem; }
  .contact-modal-icon    { width: 46px; height: 46px; font-size: 1.15rem; }
  .contact-modal-body    { padding: 1rem; }
  .cform-row             { grid-template-columns: 1fr; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { font-size: 1rem; } /* prevent iOS zoom on focus */
  .match-form-field select,
  .match-form-field input { font-size: 1rem; } /* prevent iOS zoom */
  .filter-search-input   { font-size: 1rem; }
  .filter-select         { font-size: 1rem; }
  .pqs-field select,
  .pqs-field input       { font-size: 1rem; }
}

/* ── 480px: Extra small phones ── */
@media (max-width: 480px) {
  .portal-hero-title     { font-size: clamp(2rem, 10vw, 2.8rem); }
  .portal-hero-sub       { display: none; } /* save space on tiny screens */
  .portal-hero-stats     { gap: 0.5rem; }
  .phs-pill              { font-size: 0.7rem; padding: 0.25rem 0.55rem; }

  /* Single col grid on very small phones */
  .results-container.grid-view {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .athlete-card-photo    { height: 120px; }
  .athlete-card-name     { font-size: 0.82rem; }

  /* Results count label: just the number */
  .results-count-label   { font-size: 0.78rem; }
  .active-filter-tags    { display: none; }

  .alerts-summary-row    { grid-template-columns: repeat(2, 1fr); }
  .modal-overview-grid   { grid-template-columns: repeat(2, 1fr); }

  /* Bottom nav labels hidden on tiny screens */
  .mbn-btn               { font-size: 0; gap: 0; } /* icon only */
  .mbn-btn i             { font-size: 1.25rem; }
}