@import url('https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800|oswald:500,600,700|jetbrains-mono:400,500,600,700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   PlayVia OS — V2 Design System
   All existing class names preserved; values upgraded.
   Gold = signal only (live, winning, #1 rank, primary CTA).
   JetBrains Mono added for all stats and numeric data.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --primary:        #1B2A4A;
  --primary-dark:   #0F1D36;
  --primary-light:  #2C3E6B;
  --primary-rgb:    27, 42, 74;
  --gold:           #D4A843;
  --gold-bright:    #E8BD55;
  --gold-soft:      #9B7A2E;
  --gold-glow:      rgba(212, 168, 67, 0.14);
  --bg:             #FFFFFF;
  --surface:        #F5F6F8;
  --card-bg:        #FFFFFF;
  --card-bg-hover:  #F8F9FA;
  --text:           #111827;
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --divider:        #E2E4E8;
  --border:         #E2E4E8;
  --border-2:       #CDD0D6;
  --success:  #15803D;
  --danger:   #DC2626;
  --warning:  #D97706;
  --warn:     #D97706;
  --info:     #2563EB;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.10);
  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --font-body:    'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-display: 'Oswald', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --transition: 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
::selection { background: var(--gold); color: var(--primary-dark); }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 80px;
  -webkit-font-smoothing: antialiased;
}

/* ─── HEADER ─── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--border);
  padding: 0 18px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.header-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.header-logo img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.header-logo h1 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); line-height: 1.2; }
.header-logo h1 span { color: var(--gold); }
.header-league-name { font-size: 0.66rem; color: var(--text-muted); margin-top: 1px; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.header-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }
.header-btn:hover { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.header-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.header-btn svg { width: 18px; height: 18px; }
.header-btn-signin { padding: 8px 18px; background: var(--primary); color: #fff; border: none; border-radius: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all var(--transition); height: 38px; }
.header-btn-signin:hover { background: var(--primary-light); transform: translateY(-1px); }

@media (max-width: 374px) {
  .header-logo img { width: 30px; height: 30px; }
  .header-logo h1 { font-size: 0.88rem; }
}
@media (min-width: 375px) and (max-width: 767px) {
  .header-logo img { width: 36px; height: 36px; }
}
@media (min-width: 768px) {
  .side-nav .nav-header img { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; }
}

/* ─── BOTTOM NAV ─── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; height: 68px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--text-muted);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: color var(--transition);
  border: none; background: none; position: relative; padding: 0;
}
.nav-item .nav-icon { font-size: 1.3rem; transition: transform var(--transition); }
.nav-item svg { width: 22px; height: 22px; }
.nav-item span:not(.nav-icon) { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; }
.nav-item:hover { color: var(--text-secondary); }
.nav-item:hover .nav-icon,
.nav-item:hover svg { transform: translateY(-1px); }
.nav-item.active { color: var(--primary); }
.nav-item.active::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; background: var(--primary); border-radius: 0 0 3px 3px;
}

/* ─── PAGE ─── */
.page { display: none; padding: 18px 16px; max-width: 960px; margin: 0 auto; }
.page.active { display: block; animation: v2FadeIn 0.28s cubic-bezier(0.22,0.61,0.36,1); }
@keyframes v2FadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 16px; color: var(--primary); line-height: 1.1; }
.page-title span { color: var(--gold); }

/* ─── CARDS ─── */
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; transition: all var(--transition); position: relative; }
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.card-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); }

/* ─── SCORE CARDS ─── */
.score-card { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; margin-bottom: 10px; transition: all var(--transition); }
.score-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.score-card.live { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-glow) 0%, var(--bg) 55%); }
.score-card.live::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-bright), transparent); }
.score-card.live .card-label { color: var(--gold); }
.score-card.final .card-label { color: var(--text-muted); }
.live-pulse { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; }
.live-pulse::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: v2LivePulse 1.6s ease-in-out infinite; }
@keyframes v2LivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.6); } 50% { box-shadow: 0 0 0 5px rgba(212,168,67,0); } }
.score-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.score-row + .score-row { border-top: 1px solid var(--border); }
.team-info { display: flex; align-items: center; gap: 10px; }
.team-color { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.team-name { font-weight: 500; font-size: 0.95rem; color: var(--text); }
.team-name.winner { font-weight: 700; }
.score-num { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700; line-height: 1; min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); }
.score-num.winner { color: var(--gold); }
.game-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.03em; }
.game-clock { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); }

/* ─── BUTTONS ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 22px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; border: none; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--bg); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #166534; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 0.78rem; border-radius: var(--radius-xs); }
.btn-full { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-xs); }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ─── FORMS ─── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.form-input, .form-select, .form-textarea { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9rem; color: var(--text); background: var(--bg); transition: all var(--transition); outline: none; -webkit-appearance: none; appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,42,74,.1); }
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CA3AF' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.form-error { color: var(--danger); font-size: 0.74rem; margin-top: 4px; font-weight: 500; }

/* ─── TABLES ─── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }
.data-table th { background: var(--surface); font-family: var(--font-mono); font-weight: 600; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 10px 14px; text-align: left; position: sticky; top: 0; white-space: nowrap; border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface); }

/* ─── TABS ─── */
.tabs { display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0; margin-bottom: 16px; border-bottom: 1.5px solid var(--border); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 9px 15px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border: none; background: none; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: all var(--transition); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab:hover:not(.active) { color: var(--text-secondary); }

/* ─── BADGES ─── */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.badge-live     { background: var(--gold-glow); color: var(--gold); border: 1px solid var(--gold); }
.badge-final    { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.badge-upcoming { background: rgba(37,99,235,.08); color: var(--info); border: 1px solid rgba(37,99,235,.2); }
.badge-pending  { background: rgba(217,119,6,.1); color: var(--warning); border: 1px solid rgba(217,119,6,.25); }
.badge-approved { background: rgba(21,128,61,.1); color: var(--success); border: 1px solid rgba(21,128,61,.2); }

/* ─── MODAL ─── */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; animation: v2FadeIn 0.18s ease; backdrop-filter: blur(2px); }
.modal { background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 600px; max-height: 92vh; overflow-y: auto; padding: 24px 18px; animation: v2SlideUp 0.28s cubic-bezier(0.22,0.61,0.36,1); }
@keyframes v2SlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--primary); letter-spacing: 0.02em; }
.modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); }
.modal-close:hover { background: var(--border); color: var(--text); }

/* ─── SCOREKEEPER ─── */
.sk-team-section { margin-bottom: 22px; }
.sk-team-header { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: var(--radius-sm); color: #fff; margin-bottom: 8px; }
.sk-team-header h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sk-team-score { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-player-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); gap: 8px; transition: background var(--transition); }
.sk-player-row:hover { background: var(--surface); }
.sk-player-name { flex: 1; font-weight: 600; font-size: 0.86rem; min-width: 80px; color: var(--text); }
.sk-stat-btns { display: flex; gap: 5px; }
.sk-stat-btn { width: 46px; height: 46px; border-radius: var(--radius-xs); border: 1.5px solid var(--border); background: var(--bg); font-weight: 700; font-size: 0.75rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all var(--transition); position: relative; touch-action: manipulation; }
.sk-stat-btn:hover { border-color: var(--primary); background: rgba(27,42,74,.04); }
.sk-stat-btn:active { transform: scale(0.93); }
.sk-stat-btn .stat-val { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sk-stat-btn .stat-label { font-size: 0.5rem; text-transform: uppercase; color: var(--text-muted); line-height: 1; letter-spacing: 0.06em; }
.sk-stat-btn.danger-zone { border-color: rgba(220,38,38,0.3); }
.sk-stat-btn.danger-zone .stat-val { color: var(--danger); }
.sk-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.quarter-display { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; text-align: center; padding: 9px; color: var(--primary); }
.sk-stat-btn.has-minus { position: relative; }
.sk-stat-btn .minus-zone { position: absolute; bottom: -2px; right: -2px; width: 17px; height: 17px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; line-height: 1; }
.sk-stat-btn:hover .minus-zone, .sk-stat-btn:focus .minus-zone { opacity: 1; }
.sk-stat-btn.foul-warning { border-color: var(--warning) !important; background: rgba(217,119,6,.06); }
.sk-stat-btn.foul-warning .stat-val { color: var(--warning); }
.sk-stat-btn.fouled-out { border-color: var(--danger) !important; background: rgba(220,38,38,.07); }
.sk-stat-btn.fouled-out .stat-val { color: var(--danger); }
.sk-player-row.fouled-out-row { opacity: 0.5; background: rgba(220,38,38,.04); }
.sk-player-row.fouled-out-row::after { content: 'FOULED OUT'; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 800; color: var(--danger); letter-spacing: 0.1em; margin-left: auto; padding-right: 4px; }

/* ─── STAT INPUTS ─── */
.stat-num-input { width: 48px; height: 36px; text-align: center; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; border: 1.5px solid var(--border); border-radius: var(--radius-xs); background: var(--bg); color: var(--text); padding: 0; -moz-appearance: textfield; transition: border-color var(--transition); }
.stat-num-input::-webkit-outer-spin-button, .stat-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-num-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(27,42,74,.1); }
.stat-edit-input { width: 44px; height: 32px; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; border: 1.5px solid var(--primary); border-radius: var(--radius-xs); background: var(--bg); outline: none; }

/* ─── TEAM PAGE ─── */
.team-banner { border-radius: var(--radius); padding: 26px 20px; color: #fff; margin-bottom: 16px; position: relative; overflow: hidden; }
.team-banner::after { content: '🏀'; position: absolute; right: -8px; bottom: -10px; font-size: 88px; opacity: 0.12; pointer-events: none; }
.team-banner h2 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.team-record { font-family: var(--font-mono); font-size: 0.88rem; opacity: 0.85; margin-top: 5px; }

/* ─── PLAYER CARD ─── */
.player-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all var(--transition); }
.player-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.player-number { width: 42px; height: 42px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.player-details h4 { font-weight: 700; font-size: 0.94rem; color: var(--text); }
.player-details p { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.player-stats { margin-left: auto; display: flex; gap: 13px; text-align: center; }
.player-stats .stat-item { display: flex; flex-direction: column; }
.player-stats .stat-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.player-stats .stat-label { font-family: var(--font-mono); font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 1px; }

/* ─── ANNOUNCEMENTS ─── */
.announcement-card { padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; border-left: 4px solid var(--primary); }
.announcement-card h3 { font-weight: 700; font-size: 0.98rem; margin-bottom: 5px; color: var(--text); }
.announcement-card p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.6; }
.announcement-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); margin-top: 8px; letter-spacing: 0.04em; }

/* ─── DOCUMENTS ─── */
.doc-card { display: flex; align-items: center; gap: 13px; padding: 15px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all var(--transition); }
.doc-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.doc-icon { width: 42px; height: 42px; border-radius: var(--radius-xs); background: rgba(27,42,74,.07); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; color: var(--primary); }
.doc-info h4 { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.doc-info p { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* ─── REGISTRATION ─── */
.reg-success { text-align: center; padding: 40px 20px; }
.reg-success .icon { font-size: 3rem; margin-bottom: 13px; }
.apply-type-card { transition: all var(--transition); border: 1.5px solid var(--border); background: var(--bg); }
.apply-type-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.apply-type-card:active { transform: scale(0.99); }

/* ─── ADMIN ─── */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.admin-stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; transition: all var(--transition); }
.admin-stat-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.admin-stat-card .stat-num { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.admin-stat-card .stat-label { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; font-weight: 500; letter-spacing: 0.08em; margin-top: 5px; }
.admin-nav { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
.admin-nav-item { display: flex; align-items: center; gap: 13px; padding: 15px 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); font-size: 0.9rem; font-weight: 600; color: var(--text); }
.admin-nav-item:hover { border-color: var(--primary); background: rgba(27,42,74,.02); color: var(--primary); }
.admin-nav-item .nav-icon { font-size: 1.2rem; }
.admin-nav-item svg { width: 20px; height: 20px; color: var(--primary); }
.admin-nav-item .nav-arrow { margin-left: auto; color: var(--text-muted); }

/* ─── AUTH ─── */
.auth-page { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; }
.auth-page img { width: 92px; height: 92px; border-radius: 50%; margin-bottom: 20px; }
.auth-form { width: 100%; max-width: 360px; text-align: left; }

/* ─── EMPTY STATE ─── */
.empty-state { text-align: center; padding: 46px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 2.4rem; margin-bottom: 13px; opacity: 0.42; display: block; }
.empty-state p { font-size: 0.88rem; line-height: 1.6; }
.empty-state h3 { font-size: 0.98rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; }

/* ─── TOAST ─── */
.toast-container { position: fixed; top: 70px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 7px; }
.toast { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 600; color: #fff; animation: v2SlideInRight 0.3s cubic-bezier(0.22,0.61,0.36,1), v2FadeOut 0.3s ease 2.7s forwards; max-width: 310px; box-shadow: var(--shadow-lg); }
.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-info    { background: var(--primary); }
@keyframes v2SlideInRight { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes v2FadeOut      { to { opacity: 0; transform: translateY(-7px); } }

/* ─── UTILITIES ─── */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mb-sm { margin-bottom: 10px; }
.mb-md { margin-bottom: 18px; }
.mb-lg { margin-bottom: 28px; }
.mt-md { margin-top: 18px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; gap: 10px; }
.gap-sm { gap: 8px; }
.hidden { display: none !important; }

.section-label { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }

/* ─── SEARCH BAR ─── */
.search-bar { position: relative; margin-bottom: 14px; }
.search-bar input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1.5px solid var(--border); border-radius: 99px; font-family: var(--font-body); font-size: 0.88rem; background: var(--bg); color: var(--text); transition: all var(--transition); outline: none; }
.search-bar input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,42,74,.08); }
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar::before { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; pointer-events: none; }

/* ─── STANDINGS ─── */
.standings-pos { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--primary); min-width: 26px; }

/* ─── DESKTOP ─── */
@media (min-width: 768px) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; padding-left: 248px; background: var(--surface); }
  .side-nav { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 248px; background: var(--bg); border-right: 1px solid var(--border); padding: 20px 0; z-index: 101; overflow-y: auto; }
  .side-nav .nav-header { display: flex; align-items: center; gap: 11px; padding: 0 20px 18px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
  .side-nav .nav-header img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
  .side-nav .nav-header h2 { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; color: var(--primary); line-height: 1.2; letter-spacing: 0.04em; }
  .side-nav-item { display: flex; align-items: center; gap: 11px; padding: 12px 20px; color: var(--text-secondary); font-weight: 500; font-size: 0.86rem; cursor: pointer; transition: all var(--transition); border: none; background: none; width: 100%; text-align: left; position: relative; }
  .side-nav-item:hover { color: var(--text); background: var(--surface); }
  .side-nav-item.active { color: var(--primary); background: rgba(27,42,74,.07); font-weight: 600; }
  .side-nav-item.active::after { content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 3px; background: var(--primary); border-radius: 3px 0 0 3px; }
  .side-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .side-nav-item .nav-emoji { font-size: 1.05rem; }
  .page { padding: 26px 36px; max-width: 1100px; }
  .app-header { display: none; }
  .modal { border-radius: var(--radius); max-height: 80vh; }
  .modal-overlay { align-items: center; }
  .admin-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) { .side-nav { display: none; } }

/* ─── MORE MENU ─── */
.more-menu { display: flex; flex-direction: column; gap: 4px; }
.more-menu-item { display: flex; align-items: center; gap: 13px; padding: 15px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
.more-menu-item:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.more-menu-item:active { transform: scale(0.99); }
.more-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(27,42,74,.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.more-icon svg { width: 20px; height: 20px; }
.more-info { flex: 1; }
.more-info strong { font-size: 0.94rem; display: block; margin-bottom: 2px; color: var(--text); }
.more-info p { font-size: 0.74rem; color: var(--text-muted); margin: 0; }
.more-arrow { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }

/* ─── COMMAND CENTER ─── */
.command-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; margin-bottom: 16px; }
.command-court-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; transition: all var(--transition); }
.command-court-card.status-live { border-color: var(--gold); background: var(--gold-glow); }
.command-court-card.status-halftime { border-color: var(--warning); background: rgba(217,119,6,.06); }
.command-court-card.status-warmup { border-color: var(--info); background: rgba(37,99,235,.05); }
.command-court-card.status-empty { border-style: dashed; opacity: 0.55; }
.court-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.court-matchup { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: 3px; color: var(--text); }
.court-score { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; margin-bottom: 3px; font-variant-numeric: tabular-nums; color: var(--text); }
.court-status { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 11px; }
.court-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.status-live .court-status { color: var(--gold); }
.status-halftime .court-status { color: var(--warning); }
.status-warmup .court-status { color: var(--info); }

/* ─── STAT BOXES ─── */
.stat-row { display: flex; justify-content: space-around; text-align: center; }
.stat-box { flex: 1; }
.stat-box .stat-num { font-family: var(--font-mono); font-size: 1.65rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.stat-box .stat-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* ─── HEADER LEAGUE NAME (compatibility) ─── */
.header-league-name { font-size: 0.64rem; color: var(--text-muted); margin-top: 1px; }

/* ─── MISC ADMIN ─── */
.disabled-admin { opacity: 0.6; background: rgba(217,119,6,.04); border-left: 3px solid var(--warning) !important; }
.reg-action-form { margin-top: 11px; padding: 13px; background: rgba(21,128,61,.05); border-radius: var(--radius-sm); border: 1px solid rgba(21,128,61,.2); }
.reg-action-form .form-group { margin-bottom: 9px; }
.reg-action-form .form-input, .reg-action-form .form-select { height: 38px; font-size: 0.82rem; }
.duplicate-warning { padding: 9px 13px; background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.28); border-radius: var(--radius-xs); font-size: 0.8rem; color: var(--warning); margin-bottom: 11px; }
.edit-inline { display: flex; gap: 6px; align-items: center; }
.edit-inline .form-input { height: 34px; font-size: 0.8rem; padding: 0 10px; }

/* ─── SCORE POPUP ─── */
.score-popup-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; animation: v2FadeIn 0.15s ease; backdrop-filter: blur(3px); }
.score-popup { background: var(--bg); border-radius: var(--radius); padding: 20px 17px; width: 90%; max-width: 310px; animation: v2SlideUp 0.2s cubic-bezier(0.22,0.61,0.36,1); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.score-popup h3 { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; text-align: center; margin-bottom: 15px; color: var(--primary); letter-spacing: 0.04em; }
.score-popup-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.score-popup-btn { height: 58px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: manipulation; }
.score-popup-btn:active { transform: scale(0.93); }
.score-popup-btn .popup-label { font-family: var(--font-mono); font-size: 0.53rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.score-popup-btn.ft     { border-color: var(--info); color: var(--info); }
.score-popup-btn.ft:hover { background: rgba(37,99,235,.06); }
.score-popup-btn.twopt  { border-color: var(--success); color: var(--success); }
.score-popup-btn.twopt:hover { background: rgba(21,128,61,.06); }
.score-popup-btn.threept{ border-color: var(--primary); color: var(--primary); }
.score-popup-btn.threept:hover { background: rgba(27,42,74,.04); }
.score-popup-btn.undo-btn { border-color: var(--danger); color: var(--danger); }
.score-popup-btn.undo-btn:hover { background: rgba(220,38,38,.06); }
.score-popup-cancel { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.84rem; cursor: pointer; color: var(--text-secondary); transition: background var(--transition); }
.score-popup-cancel:hover { background: var(--border); }

/* ─── QUARTER BADGE ─── */
.quarter-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; font-family: var(--font-mono); font-size: 0.88rem; font-weight: 700; color: var(--text); }
.quarter-badge.ot { color: var(--danger); border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.06); }

/* ─── TROPHY CASE ─── */
.trophy-case { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.trophy-item { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--gold-glow), rgba(212,168,67,.02)); border: 1px solid rgba(212,168,67,.32); }
.trophy-icon { font-size: 1.25rem; }
.trophy-detail strong { display: block; font-size: 0.8rem; color: var(--text); }
.trophy-meta { font-size: 0.66rem; color: var(--text-secondary); }

/* ─── LEAGUE FINDER ─── */
.finder-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .finder-filters { grid-template-columns: 1fr; } }
.league-finder-card { transition: all var(--transition); border: 1.5px solid transparent; }
.league-finder-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.league-finder-card.current-league { border-color: var(--primary); background: rgba(27,42,74,.03); }
.league-search-results { background: var(--bg); border: 1.5px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: -2px; max-height: 230px; overflow-y: auto; box-shadow: var(--shadow-md); z-index: 10; position: relative; }
.league-search-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); font-size: 0.86rem; }
.league-search-item:last-child { border-bottom: none; }
.league-search-item:hover { background: var(--surface); }
.league-search-create { background: rgba(21,128,61,.02); }
.league-search-create:hover { background: rgba(21,128,61,.07); }
.league-selected-badge { display: inline-flex; align-items: center; padding: 7px 13px; margin-top: 7px; background: rgba(27,42,74,.05); border: 1px solid rgba(27,42,74,.15); border-radius: var(--radius-sm); font-size: 0.82rem; }
.schedule-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .schedule-options { grid-template-columns: 1fr; } }

/* ─── AI COMPONENTS ─── */
.ai-result { background: linear-gradient(135deg, #FAFBFF 0%, #EFF4FF 100%); border: 1px solid rgba(27,42,74,.15); border-radius: var(--radius); padding: 18px; margin-top: 13px; position: relative; line-height: 1.7; font-size: 0.9rem; }
.ai-result::before { content: '✦ AI Generated'; position: absolute; top: -10px; left: 13px; background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 99px; }
.ai-result p { margin-bottom: 10px; }
.ai-result p:last-child { margin-bottom: 0; }
.btn-ai { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: #fff; position: relative; overflow: hidden; }
.btn-ai:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(27,42,74,.3); }
.btn-ai::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,.1), transparent); animation: v2Shimmer 2.5s infinite; }
@keyframes v2Shimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }
.ai-loading { display: flex; align-items: center; gap: 11px; padding: 17px; background: var(--surface); border-radius: var(--radius); margin-top: 13px; font-size: 0.86rem; color: var(--text-secondary); border: 1px solid var(--border); }
.ai-loading .dots { display: flex; gap: 4px; }
.ai-loading .dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: v2DotBounce 1.2s infinite; }
.ai-loading .dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-loading .dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes v2DotBounce { 0%,80%,100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.1); } }
.ai-assist-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; padding: 12px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid rgba(27,42,74,.1); }
.ai-assist-bar .label { width: 100%; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 3px; }
.ai-chip { padding: 6px 12px; border-radius: 99px; font-size: 0.74rem; font-weight: 600; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); white-space: nowrap; }
.ai-chip:hover { border-color: var(--primary); background: rgba(27,42,74,.05); color: var(--primary); }

/* ─── CHAT ─── */
.chat-fab { position: fixed; bottom: 88px; right: 17px; z-index: 150; width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: 0 4px 18px rgba(27,42,74,.35); transition: all var(--transition); }
.chat-fab:hover { transform: scale(1.07); background: var(--primary-light); }
.chat-fab .unread { position: absolute; top: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }
.chat-panel { position: fixed; bottom: 72px; right: 0; z-index: 200; width: 100%; max-width: 420px; height: 65vh; max-height: 560px; background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg); border: 1px solid var(--border); border-bottom: none; display: flex; flex-direction: column; animation: v2SlideUp 0.3s cubic-bezier(0.22,0.61,0.36,1); }
.chat-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-panel-header h3 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; color: var(--primary); }
.chat-panel-header h3 .ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.chat-messages { flex: 1; overflow-y: auto; padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; }
.chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 0.85rem; line-height: 1.55; animation: v2FadeIn 0.2s ease; }
.chat-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant, .chat-msg.bot { align-self: flex-start; background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }
.chat-msg.system { align-self: center; background: transparent; color: var(--text-muted); font-size: 0.72rem; text-align: center; padding: 5px; }
.chat-msg.typing .dots { display: inline-flex; gap: 3px; }
.chat-msg.typing .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: v2DotBounce 1.2s infinite; }
.chat-msg.typing .dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg.typing .dots span:nth-child(3) { animation-delay: 0.4s; }
.chat-input-row { display: flex; gap: 7px; padding: 10px 13px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.chat-input-row input { flex: 1; height: 42px; padding: 0 13px; border: 1.5px solid var(--border); border-radius: 99px; font-family: var(--font-body); font-size: 0.85rem; background: var(--surface); outline: none; transition: border-color var(--transition); }
.chat-input-row input:focus { border-color: var(--primary); }
.chat-input-row button { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition); flex-shrink: 0; font-size: 1rem; }
.chat-input-row button:hover { background: var(--primary-light); }
.chat-input-row button:disabled { opacity: 0.45; cursor: not-allowed; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 13px 9px; }
.chat-suggestion-chip { padding: 5px 11px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.chat-suggestion-chip:hover { border-color: var(--primary); color: var(--primary); }
@media (min-width: 768px) {
  .chat-fab { bottom: 22px; right: 20px; }
  .chat-panel { bottom: 0; right: 14px; border-radius: var(--radius) var(--radius) 0 0; height: 70vh; max-height: 600px; }
}

/* ─── TICKER ─── */
.ticker-bar { display: flex; align-items: center; gap: 0; background: var(--primary-dark); border-radius: var(--radius); margin-bottom: 13px; overflow: hidden; position: relative; }
.ticker-live-badge { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--gold); color: var(--primary-dark); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; }
.live-dot { width: 6px; height: 6px; background: var(--primary-dark); border-radius: 50%; animation: v2LiveDot 1.2s ease-in-out infinite; }
@keyframes v2LiveDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.ticker-scroll { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; }
.ticker-scroll::-webkit-scrollbar { display: none; }
.ticker-game { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7px 11px; min-width: 104px; border-right: 1px solid rgba(255,255,255,.07); cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
.ticker-game:hover { background: rgba(255,255,255,.05); }
.ticker-game.ticker-live { background: rgba(212,168,67,.1); }
.ticker-teams { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.ticker-team { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: rgba(255,255,255,.8); }
.ticker-abbrev { flex: 1; font-weight: 600; letter-spacing: 0.02em; }
.ticker-score { font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; color: #fff; min-width: 14px; text-align: right; }
.ticker-winner { color: var(--gold) !important; font-weight: 700; }
.ticker-status { font-family: var(--font-mono); font-size: 0.57rem; font-weight: 700; color: rgba(255,255,255,.42); letter-spacing: 0.06em; margin-top: 2px; }
.ticker-status-live { color: var(--gold); }
.score-row .team-info { gap: 10px; }
.score-row .team-info svg, .score-row .team-info img { flex-shrink: 0; }

/* ─── HOME PAGE ─── */
.home-hero-v2 { display: flex; align-items: center; gap: 13px; padding: 16px; margin-bottom: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.hero-logo-v2 { width: 50px; height: 50px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.hero-title-v2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--primary); margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }
.hero-title-v2 span { color: var(--gold); }
.hero-tagline-v2 { font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.home-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 13px; }
.home-action { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); font-size: 0.66rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.home-action:hover { border-color: var(--primary); color: var(--primary); background: rgba(27,42,74,.03); }
.home-action:active { transform: scale(0.96); }
.home-action-icon { font-size: 1.15rem; }
.home-stats-row { display: flex; gap: 6px; margin-bottom: 13px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.home-stats-row::-webkit-scrollbar { display: none; }
.home-stat-pill { display: flex; align-items: center; gap: 5px; padding: 6px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; font-size: 0.74rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.home-stat-pill strong { color: var(--primary); font-weight: 800; font-family: var(--font-mono); }
.home-welcome { margin-top: 6px; }
.welcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 9px; }
.welcome-card { text-align: center; padding: 20px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--transition); }
.welcome-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.welcome-icon { font-size: 1.7rem; display: block; margin-bottom: 7px; }
.welcome-card h3 { font-size: 0.88rem; font-weight: 700; margin-bottom: 5px; color: var(--text); }
.welcome-card p { font-size: 0.74rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
@media (max-width: 480px) { .home-actions { gap: 5px; } .home-action { padding: 10px 4px; font-size: 0.62rem; } .home-action-icon { font-size: 1rem; } .welcome-grid { grid-template-columns: 1fr; } }

/* ─── HERO LANDING ─── */
.hero-landing { position: relative; overflow: hidden; border-radius: 17px; margin: -4px -2px 17px; padding: 50px 20px 44px; background: linear-gradient(145deg, var(--primary-dark) 0%, #162040 40%, var(--primary) 100%); text-align: center; min-height: 310px; display: flex; align-items: center; justify-content: center; }
.hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-shape { position: absolute; border-radius: 50%; animation: v2HeroFloat 12s ease-in-out infinite; }
.hero-shape-1 { width: 270px; height: 270px; background: var(--gold); opacity: 0.05; top: -66px; right: -48px; animation-duration: 14s; }
.hero-shape-2 { width: 175px; height: 175px; background: var(--primary-light); opacity: 0.06; bottom: -34px; left: -26px; animation-duration: 10s; animation-delay: -4s; }
.hero-shape-3 { width: 105px; height: 105px; background: var(--gold); opacity: 0.04; top: 40%; left: 58%; animation-duration: 8s; animation-delay: -2s; }
@keyframes v2HeroFloat { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(17px,-24px) scale(1.04); } 66% { transform: translate(-12px,12px) scale(0.96); } }
.hero-content { position: relative; z-index: 1; }
.hero-logo-anim { width: 92px; height: 92px; object-fit: contain; margin-bottom: 17px; padding: 13px; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.8) 50%, rgba(255,255,255,0) 72%); border-radius: 50%; animation: v2HeroLogoIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes v2HeroLogoIn { from { opacity: 0; transform: scale(0.6) translateY(17px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.hero-headline { font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px; animation: v2HeroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.hero-headline span { color: var(--gold); }
.hero-sub { font-size: 0.94rem; color: rgba(255,255,255,.58); font-weight: 400; margin-bottom: 24px; max-width: 370px; margin-left: auto; margin-right: auto; animation: v2HeroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
@keyframes v2HeroUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-stats-row { display: flex; justify-content: center; gap: 26px; margin-bottom: 17px; animation: v2HeroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.hero-stat { text-align: center; }
.hero-stat-num { display: block; font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-label { display: block; font-family: var(--font-mono); font-size: 0.64rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }
.hero-preseason { font-size: 0.78rem; color: rgba(255,255,255,.32); font-style: italic; animation: v2HeroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.hero-cta { display: inline-block; padding: 12px 36px; background: var(--gold); color: var(--primary-dark); border: none; border-radius: var(--radius-sm); font-size: 0.94rem; font-weight: 700; cursor: pointer; transition: all var(--transition); animation: v2HeroUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both; box-shadow: 0 4px 18px rgba(212,168,67,.35); }
.hero-cta:hover { transform: translateY(-2px); background: var(--gold-bright); box-shadow: 0 8px 30px rgba(212,168,67,.45); }
.hero-court-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.48; animation: v2HeroUp 1.5s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
@media (max-width: 600px) { .hero-landing { padding: 34px 13px 32px; min-height: 260px; } .hero-headline { font-size: 1.5rem; } .hero-logo-anim { width: 74px; height: 74px; padding: 10px; } .hero-stats-row { gap: 16px; } .hero-stat-num { font-size: 1.4rem; } }

/* ─── FEATURE SHOWCASE ─── */
.feature-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 700px) { .feature-showcase { grid-template-columns: 1fr; } }
.feature-card { background: var(--bg); border-radius: var(--radius); padding: 0; overflow: hidden; border: 1px solid var(--border); transition: all var(--transition); opacity: 0; animation: v2FeatureIn 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-2); }
.feature-card-1 { animation-delay: 0.1s; } .feature-card-2 { animation-delay: 0.2s; } .feature-card-3 { animation-delay: 0.3s; } .feature-card-4 { animation-delay: 0.4s; }
@keyframes v2FeatureIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.feature-visual { padding: 17px 17px 0; display: flex; justify-content: center; }
.feature-svg { width: 100%; max-width: 245px; height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,.04)); }
.feature-title { font-size: 0.94rem; font-weight: 800; padding: 12px 17px 0; color: var(--text); }
.feature-desc { font-size: 0.78rem; color: var(--text-secondary); padding: 4px 17px 15px; line-height: 1.5; }
.score-anim-l, .score-anim-r { animation: v2ScorePulse 3s ease-in-out infinite; }
.score-anim-r { animation-delay: 1.5s; }
@keyframes v2ScorePulse { 0%,80%,100% { opacity: 1; } 40% { opacity: 0.5; } }

/* ─── JOURNEY / CTA ─── */
.journey-section { text-align: center; margin-bottom: 20px; animation: v2FeatureIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.journey-gif { width: 100%; max-width: 700px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.journey-caption { margin-top: 11px; font-size: 0.86rem; color: var(--text-muted); font-style: italic; }
.cta-banner { text-align: center; padding: 34px 20px; margin-bottom: 16px; background: linear-gradient(135deg, #F8F9FB 0%, #EEF1F6 100%); border-radius: var(--radius); border: 1px solid var(--border); animation: v2FeatureIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.cta-headline { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.cta-sub { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 20px; max-width: 390px; margin-left: auto; margin-right: auto; }
.cta-secondary { display: inline-block; padding: 12px 28px; background: transparent; color: var(--primary); border: 2px solid var(--primary); border-radius: var(--radius-sm); font-size: 0.94rem; font-weight: 700; cursor: pointer; transition: all var(--transition); }
.cta-secondary:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* ─── FREEMIUM GATE ─── */
.cta-gate { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: rgba(27,42,74,.05); border: 1.5px solid var(--primary); border-radius: var(--radius-sm); margin: 13px 0; }
.cta-gate-icon { font-size: 1.45rem; flex-shrink: 0; }
.cta-gate-text { flex: 1; min-width: 0; }
.cta-gate-text strong { font-size: 0.86rem; display: block; color: var(--text); }
.cta-gate-text p { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.cta-gate .btn { flex-shrink: 0; white-space: nowrap; font-size: 0.78rem; padding: 7px 14px; height: auto; }
@media (max-width: 480px) { .cta-gate { flex-direction: column; text-align: center; gap: 9px; } .cta-gate .btn { width: 100%; } }
.gated-blur-row { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border); filter: blur(3px); opacity: 0.42; pointer-events: none; user-select: none; }
.gated-bar { height: 13px; border-radius: 3px; background: linear-gradient(90deg, var(--text-muted), transparent); }
.gated-bar.short { height: 11px; }
.stat-gate-wrap { position: relative; overflow: hidden; }
.stat-gate-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 70%; background: linear-gradient(to bottom, transparent 0%, var(--bg) 60%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; z-index: 2; }

/* ─── SCOREBOARD ─── */
.scoreboard-fullscreen { text-align: center; padding: 17px 0; }
.sb-status { margin-bottom: 17px; }
.sb-matchup { display: flex; align-items: center; justify-content: center; gap: 17px; margin-bottom: 17px; }
.sb-team { text-align: center; flex: 1; max-width: 190px; }
.sb-logo { margin-bottom: 6px; display: flex; justify-content: center; }
.sb-name { font-weight: 700; font-size: 0.94rem; margin-bottom: 6px; color: var(--text); }
.sb-score { font-family: var(--font-mono); font-size: 3rem; font-weight: 700; color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; }
.sb-vs { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.sb-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); }
.sb-tile { padding: 12px 15px; }
.sb-tile-live { border-left: 3px solid var(--gold) !important; background: var(--gold-glow) !important; }
.sb-tile-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.sb-tile-row + .sb-tile-row { border-top: 1px solid var(--border); }
.sb-tile-team { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--text); font-weight: 500; }
.sb-tile-score { font-family: var(--font-mono); font-size: 1.12rem; font-weight: 700; min-width: 27px; text-align: right; font-variant-numeric: tabular-nums; }
.sb-tile-winner { color: var(--gold); }
.sb-tile-footer { display: flex; justify-content: space-between; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

/* ─── BRACKET ─── */
.bracket-container { overflow-x: auto; padding: 13px 0; }
.bracket-svg text { font-family: var(--font-body); }
.bracket-team-highlight { stroke: var(--gold); stroke-width: 2; }

/* ─── PLANS ─── */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 0; }
.plan-card { position: relative; padding: 20px 17px; text-align: center; border-right: 1px solid var(--border); cursor: pointer; transition: background var(--transition); background: var(--bg); }
.plan-card:last-child { border-right: none; }
.plan-card:hover { background: rgba(27,42,74,.02); }
.plan-popular { background: rgba(27,42,74,.02); }
.plan-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.1em; padding: 3px 11px; border-radius: 0 0 6px 6px; }
.plan-save { display: inline-block; background: rgba(21,128,61,.1); color: var(--success); font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-bottom: 7px; }
.plan-name { font-size: 0.94rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.plan-price { margin-bottom: 13px; }
.plan-amount { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.plan-interval { font-size: 0.78rem; color: var(--text-muted); }
.plan-features { list-style: none; padding: 0; margin: 0 0 13px; text-align: left; font-size: 0.76rem; color: var(--text-secondary); }
.plan-features li { padding: 3px 0; }
@media (max-width: 480px) { .plan-grid { grid-template-columns: 1fr; } .plan-card { border-right: none; border-bottom: 1px solid var(--border); } .plan-card:last-child { border-bottom: none; } }

/* ─── ADMIN MODE TOGGLE ─── */
.admin-mode-toggle { display: flex; gap: 0; margin-bottom: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.admin-mode-btn { flex: 1; padding: 10px 7px; text-align: center; background: var(--bg); border: none; cursor: pointer; border-right: 1px solid var(--border); transition: all var(--transition); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.admin-mode-btn:last-child { border-right: none; }
.admin-mode-btn:hover { background: var(--surface); }
.admin-mode-active { background: var(--primary) !important; color: #fff; }
.admin-mode-active .admin-mode-label { color: #fff; }
.admin-mode-active .admin-mode-current { color: rgba(255,255,255,.6); }
.admin-mode-label { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.admin-mode-current { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; color: var(--success); text-transform: uppercase; letter-spacing: 0.06em; }

/* ─── PHOTO ─── */
.photo-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 17px; animation: v2FadeIn 0.2s; }
.lightbox-content { position: relative; background: var(--bg); border-radius: var(--radius); overflow: hidden; max-width: 580px; width: 100%; max-height: 90vh; overflow-y: auto; }
.gallery-card { cursor: pointer; transition: all var(--transition); }
.gallery-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ─── DARK MODE ─── */
[data-theme="dark"] {
  --bg: #111827; --card-bg: #1F2937; --card-bg-hover: #252F3F; --surface: #1A2332;
  --text: #F9FAFB; --text-primary: #F9FAFB; --text-secondary: #9CA3AF; --text-muted: #6B7280;
  --divider: #374151; --border: #374151; --border-2: #4B5563;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .app-header { background: rgba(17,24,39,.9); border-color: var(--border); }
[data-theme="dark"] .side-nav { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .bottom-nav { background: rgba(17,24,39,.95); border-color: var(--border); }
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus { border-color: var(--primary-light); }
[data-theme="dark"] .btn-secondary { background: var(--card-bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .admin-stat-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .data-table th { background: var(--card-bg); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .data-table td { border-color: var(--border); }
[data-theme="dark"] .data-table tbody tr:hover td { background: rgba(255,255,255,.03); }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .side-nav-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .side-nav-item.active { background: rgba(255,255,255,.06); color: var(--gold); }
[data-theme="dark"] .nav-item.active { color: var(--gold); }
[data-theme="dark"] .more-menu-item { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .score-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .score-card.live { background: linear-gradient(180deg, rgba(212,168,67,.08), var(--card-bg) 55%); }
[data-theme="dark"] .player-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .home-action { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .search-bar input { background: var(--card-bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .modal { background: var(--card-bg); }
[data-theme="dark"] .chat-panel { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .chat-msg.assistant, [data-theme="dark"] .chat-msg.bot { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .admin-nav-item { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .doc-card { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .tabs { border-color: var(--border); }
[data-theme="dark"] .section-label { color: var(--text-muted); }
[data-theme="dark"] .empty-state { color: var(--text-muted); }
[data-theme="dark"] .stat-gate-overlay { background: linear-gradient(to bottom, transparent 0%, var(--bg) 60%); }
[data-theme="dark"] .home-stat-pill { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .ticker-bar { border: 1px solid var(--border); }

/* ─── LOADING ─── */
@keyframes v2Pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.skeleton-card { animation: v2Pulse 1.5s ease-in-out infinite; }

/* ─── SAFE AREA ─── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(68px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  @media (min-width: 768px) { body { padding-bottom: 0; } }
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════ PICKUP / SOCIAL PRODUCT ═══════════════════════ */

:root {
  --amber:        #E08B4C;
  --amber-bright: #F0A35C;
  --amber-soft:   #B8682E;
  --amber-glow:   rgba(224,139,76,0.14);
  --amber-border: rgba(224,139,76,0.30);
}

html[data-pickup="true"] .nav-item.active { color: var(--amber); }
html[data-pickup="true"] .nav-item.active::before { background: var(--amber); }
html[data-pickup="true"] .side-nav-item.active { color: var(--amber); }
html[data-pickup="true"] .side-nav-item.active::after { background: var(--amber); }

.pickup-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, #162040 60%, var(--primary) 100%); border-radius: var(--radius); padding: 20px 18px; margin-bottom: 16px; position: relative; overflow: hidden; color: #fff; }
.pickup-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% -20%, rgba(224,139,76,.18) 0%, transparent 55%); pointer-events: none; }
.pickup-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.pickup-streak-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-bright), var(--amber-soft)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--primary-dark); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(224,139,76,.3); }
.pickup-hero-name { font-weight: 700; font-size: 16px; color: #fff; }
.pickup-hero-sub { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.5); margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; }
.pickup-streak-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--amber-glow); border: 1px solid var(--amber-border); border-radius: 99px; padding: 5px 13px; margin-top: 11px; font-family: var(--font-mono); font-size: 10.5px; color: var(--amber-bright); font-weight: 700; letter-spacing: .04em; }
.pickup-streak-num { font-size: 18px; font-weight: 800; color: var(--amber-bright); }

.filter-strip { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 16px; }
.filter-strip::-webkit-scrollbar { display: none; }
.filter-chip { padding: 7px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: all var(--transition); flex-shrink: 0; }
.filter-chip:hover { border-color: var(--border-2); color: var(--text); }
.filter-chip.active { background: var(--amber); border-color: var(--amber); color: var(--primary-dark); font-weight: 700; }

.run-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; margin-bottom: 10px; cursor: pointer; transition: all var(--transition); position: relative; overflow: hidden; }
.run-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.run-card.live { border-color: var(--amber); background: linear-gradient(180deg, var(--amber-glow), var(--bg) 55%); }
.run-card.live::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--amber-bright), transparent); }
.run-card-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; }
.run-status { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 700; }
.run-status .rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: v2LivePulse 1.6s ease-in-out infinite; }
.run-court-label { color: var(--text-muted); }
.run-card-body { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.run-time-block { min-width: 52px; }
.run-time { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text); }
.run-date-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.run-info { flex: 1; }
.run-court-name { font-weight: 600; font-size: 14px; color: var(--text); }
.run-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.run-spots { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.run-spots .almost { color: var(--amber); font-weight: 700; }
.run-spots .full { color: var(--danger); font-weight: 700; }
.run-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.run-tag { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 5px; background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.run-tag.hot { background: var(--amber-glow); border-color: var(--amber-border); color: var(--amber); }
.run-tag.tier-a { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.2); color: var(--danger); }
.run-tag.tier-b { background: var(--amber-glow); border-color: var(--amber-border); color: var(--amber); }
.run-tag.tier-c { background: rgba(21,128,61,.07); border-color: rgba(21,128,61,.2); color: var(--success); }
.run-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.run-foot-right { color: var(--text-secondary); font-weight: 600; font-size: 11px; }
.run-card:hover .run-foot-right { color: var(--amber); }

.fill-bar { height: 5px; border-radius: 3px; background: var(--surface); overflow: hidden; margin-bottom: 4px; }
.fill-bar-inner { height: 100%; border-radius: 3px; transition: width .3s; }
.fill-bar-inner.warm { background: linear-gradient(90deg, var(--amber-soft), var(--amber)); }
.fill-bar-inner.hot  { background: linear-gradient(90deg, var(--amber), var(--danger)); }
.fill-bar-inner.full { background: var(--danger); }
.fill-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.fill-meta .filling-fast { color: var(--amber); font-weight: 700; }
.fill-meta .filling-hot  { color: var(--danger); font-weight: 700; }

.btn-rsvp { width: 100%; padding: 13px; border: none; border-radius: 99px; font-family: var(--font-body); font-size: 14px; font-weight: 800; cursor: pointer; transition: all var(--transition); }
.btn-rsvp.open { background: var(--amber); color: var(--primary-dark); }
.btn-rsvp.open:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn-rsvp.confirmed { background: rgba(21,128,61,.1); color: var(--success); border: 1px solid rgba(21,128,61,.35); }
.btn-inv-small { padding: 13px 18px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.btn-inv-small:hover { border-color: var(--border-2); color: var(--text); }

.av-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.av-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-bubble { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; position: relative; }
.av-bubble.me { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--amber); }
.av-bubble.online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #22C55E; border: 2px solid var(--bg); }
.av-name { font-size: 10px; color: var(--text-muted); text-align: center; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-name.me { color: var(--amber); font-weight: 600; }
.av-more { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1.5px dashed var(--border-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.court-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all var(--transition); margin-bottom: 10px; }
.court-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.court-card-banner { height: 64px; display: grid; place-items: center; position: relative; }
.court-card-banner-icon { font-size: 28px; z-index: 1; position: relative; }
.court-card-badge { position: absolute; top: 8px; right: 10px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
.cbadge-hot  { background: var(--amber-glow); color: var(--amber); border: 1px solid var(--amber-border); }
.cbadge-live { background: rgba(21,128,61,.1); color: var(--success); border: 1px solid rgba(21,128,61,.2); }
.cbadge-close{ background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.court-card-body { padding: 13px 15px; }
.court-card-name { font-weight: 700; font-size: 15px; color: var(--text); }
.court-card-loc { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 3px; letter-spacing: .03em; }
.court-stats-row { display: flex; gap: 14px; margin: 10px 0; padding: 10px 0; border-top: 1px solid var(--border); }
.cs { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.cs strong { display: block; font-size: 13px; color: var(--text); font-weight: 700; margin-bottom: 1px; }
.court-tiers { display: flex; gap: 5px; margin-bottom: 9px; }
.court-tier { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.court-tier.a { background: rgba(220,38,38,.08); color: var(--danger); border: 1px solid rgba(220,38,38,.2); }
.court-tier.b { background: var(--amber-glow); color: var(--amber); border: 1px solid var(--amber-border); }
.court-tier.c { background: rgba(21,128,61,.08); color: var(--success); border: 1px solid rgba(21,128,61,.2); }
.court-next { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); padding-top: 9px; border-top: 1px dashed var(--border); }
.court-next-time { color: var(--amber); font-weight: 700; }
.court-host-link { color: var(--primary); font-weight: 600; font-size: 11px; cursor: pointer; }
.court-host-link:hover { color: var(--amber); }

.chat-msgs-pickup { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.cmsg-pickup { display: flex; gap: 8px; }
.cmsg-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; color: #fff; flex-shrink: 0; }
.cbub-pickup { background: var(--surface); border: 1px solid var(--border); border-radius: 8px 8px 8px 2px; padding: 7px 11px; }
.cbub-pickup p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.cbub-pickup .ctm { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); margin-top: 2px; }
.cbub-pickup.me { border-radius: 8px 8px 2px 8px; background: rgba(224,139,76,.09); border-color: var(--amber-border); }
.chat-send-row { display: flex; gap: 7px; }
.chat-send-input { flex: 1; padding: 10px 13px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 99px; font-family: var(--font-body); font-size: 13px; color: var(--text); outline: none; transition: border-color var(--transition); }
.chat-send-input:focus { border-color: var(--amber); }
.chat-send-input::placeholder { color: var(--text-muted); }
.chat-send-btn { padding: 10px 16px; background: var(--amber); color: var(--primary-dark); border: none; border-radius: 99px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all var(--transition); flex-shrink: 0; }
.chat-send-btn:hover { background: var(--amber-bright); }

.recap-hero { background: linear-gradient(160deg, rgba(200,169,81,.12), rgba(224,139,76,.08) 40%, var(--bg) 70%); border: 1px solid rgba(212,168,67,.3); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; margin-bottom: 13px; }
.recap-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold), var(--amber), transparent); opacity: .5; }
.recap-brand { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.recap-court { font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -.02em; }
.recap-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 3px; letter-spacing: .04em; }
.recap-stats-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); margin: 14px 0; }
.recap-stat { padding: 11px 8px; text-align: center; border-right: 1px solid var(--border); }
.recap-stat:last-child { border-right: none; }
.recap-stat-val { font-family: var(--font-mono); font-weight: 800; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.recap-stat-val.am { color: var(--amber); }
.recap-stat-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.recap-player-stack { display: flex; align-items: center; gap: 0; }
.recap-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -7px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: #fff; }
.recap-av:first-child { margin-left: 0; }
.recap-player-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 11px; }
.recap-hashtags { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 8px; }
.recap-hashtags span { color: var(--amber); margin-right: 8px; }

.mvp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.mvp-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 10px; text-align: center; cursor: pointer; transition: all var(--transition); }
.mvp-item:hover { border-color: var(--amber); transform: translateY(-1px); }
.mvp-item.voted { border-color: var(--amber); background: var(--amber-glow); }
.mvp-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; margin: 0 auto 7px; }
.mvp-name { font-size: 12px; font-weight: 600; color: var(--text); }
.mvp-votes { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.mvp-votes.top { color: var(--gold); font-weight: 700; }
.mvp-trophy { font-size: 15px; margin-bottom: 3px; }

.vibe-row { display: flex; gap: 7px; justify-content: center; margin: 12px 0; }
.vibe-btn { width: 50px; height: 50px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-size: 22px; cursor: pointer; transition: all var(--transition); }
.vibe-btn:hover { border-color: var(--border-2); transform: scale(1.07); }
.vibe-btn.selected { border-color: var(--amber); background: var(--amber-glow); transform: scale(1.12); }
.vibe-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 0 5px; }

.pickup-profile-hero { background: var(--surface); padding: 26px 18px 18px; text-align: center; border-bottom: 1px solid var(--border); }
.pp-av { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-bright), var(--amber-soft)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--primary-dark); margin: 0 auto 11px; border: 2.5px solid var(--amber-border); box-shadow: 0 0 16px var(--amber-glow); }
.pp-name { font-weight: 800; font-size: 21px; color: var(--text); letter-spacing: -.02em; }
.pp-loc { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; letter-spacing: .06em; }
.pp-streak { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; background: var(--amber-glow); border: 1px solid var(--amber-border); border-radius: 99px; padding: 5px 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--amber); font-weight: 700; }
.pp-streak-num { font-size: 18px; font-weight: 800; color: var(--amber); }

.streak-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-day-lbl { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: center; padding-bottom: 4px; }
.scd { height: 28px; border-radius: 5px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.scd.miss { background: var(--surface); }
.scd.run  { background: var(--amber); color: var(--primary-dark); font-weight: 700; }
.scd.today{ background: var(--amber-glow); border: 1.5px solid var(--amber); color: var(--amber); font-weight: 700; }

.badges-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.badge-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 9px; text-align: center; }
.badge-item.earned { border-color: var(--amber-border); background: var(--amber-glow); }
.badge-item.locked { opacity: .38; }
.badge-icon { font-size: 24px; margin-bottom: 5px; }
.badge-name { font-size: 11.5px; font-weight: 600; color: var(--text); }
.badge-desc { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); margin-top: 2px; }

.regular-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 7px; }
.regular-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
.regular-info { flex: 1; }
.regular-name { font-weight: 600; font-size: 13px; color: var(--text); }
.regular-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.regular-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

.host-section { margin-bottom: 18px; }
.host-section-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 9px; }
.court-picker { display: flex; flex-direction: column; gap: 7px; }
.court-pick-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all var(--transition); }
.court-pick-item:hover { border-color: var(--border-2); }
.court-pick-item.selected { border-color: var(--amber); background: var(--amber-glow); }
.court-pick-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--primary-dark); display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.court-pick-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.court-pick-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.court-pick-dist { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.tier-picker { display: flex; gap: 7px; }
.tier-pill { padding: 9px 18px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.tier-pill:hover { border-color: var(--border-2); color: var(--text); }
.tier-pill.selected-a { border-color: var(--danger); color: var(--danger); background: rgba(220,38,38,.08); }
.tier-pill.selected-b { border-color: var(--amber); color: var(--amber); background: var(--amber-glow); }
.tier-pill.selected-c { border-color: var(--success); color: var(--success); background: rgba(21,128,61,.08); }

.map-ph { height: 100px; background: var(--surface); border-radius: 10px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid var(--border); cursor: pointer; }
.map-ph span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.info-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.info-row:last-child { margin-bottom: 0; }
.info-row svg { color: var(--text-muted); flex-shrink: 0; width: 14px; height: 14px; }
.info-row strong { color: var(--text); }
.vtags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.vtag { font-family: var(--font-mono); font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.vtag.good { color: var(--success); border-color: rgba(21,128,61,.2); background: rgba(21,128,61,.07); }

/* ═══════════════════════ V2 REFERENCE CLASSES ═══════════════════════
   Extracted from reference design files and implemented for real.
   These are what the page renderers now output.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Ticker (navy scrolling scores bar) ─── */
.ticker-badge { flex-shrink:0; background:var(--gold); color:var(--primary-dark); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; padding:0 14px; height:100%; display:flex; align-items:center; gap:7px; position:relative; z-index:2; }
.ticker-dot { width:6px; height:6px; border-radius:50%; background:var(--primary-dark); animation:v2LivePulse 1.6s ease-in-out infinite; }
.ticker-track { flex:1; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-flex; gap:0; animation:tickerScroll 36s linear infinite; }
@keyframes tickerScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-item { display:inline-flex; align-items:center; gap:9px; padding:0 22px 0 18px; height:38px; border-right:1px solid rgba(255,255,255,.1); font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.8); letter-spacing:.03em; cursor:pointer; }
.ticker-item.live { color:#fff; }
.ticker-item.live .tk-status { color:var(--gold); font-weight:700; }
.tk-score { font-weight:600; color:#fff; }
.tk-win { color:var(--gold); font-weight:700; }
.tk-status { color:rgba(255,255,255,.5); font-size:10px; }

/* ─── Hero (navy league banner) ─── */
.hero { background:var(--primary); position:relative; overflow:hidden; padding:44px 22px 44px; }
.hero-court { position:absolute; inset:0; pointer-events:none; opacity:.045; width:100%; height:100%; }
.hero-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; position:relative; z-index:1; }
@media (max-width:780px) { .hero-inner { grid-template-columns:1fr; } .hero-cards { display:none; } }
.hero-tag { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.hero-tag::before { content:''; width:20px; height:1px; background:var(--gold); opacity:.6; }
.hero-headline { font-family:var(--font-display); font-weight:700; font-size:clamp(36px,5vw,60px); line-height:.97; color:#fff; text-transform:uppercase; letter-spacing:-.01em; }
.hero-headline .accent { color:var(--gold); font-style:italic; font-weight:400; text-transform:none; font-size:.72em; letter-spacing:-.02em; display:block; margin-top:3px; }
.hero-sub { margin-top:16px; font-size:14.5px; color:rgba(255,255,255,.65); max-width:400px; line-height:1.6; }
.hero-stats { margin-top:24px; display:flex; gap:24px; }
.hero-stat-num { font-family:var(--font-mono); font-size:22px; font-weight:700; color:#fff; display:block; letter-spacing:-.02em; }
.hero-stat-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); display:block; margin-top:2px; }
.hero-divider { width:1px; background:rgba(255,255,255,.12); align-self:stretch; }
.hero-cards { display:flex; flex-direction:column; gap:11px; }
.hero-game { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px; cursor:pointer; transition:background .18s; position:relative; overflow:hidden; }
.hero-game::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--gold); }
.hero-game:hover { background:rgba(255,255,255,.09); }
.hg-head { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:11px; }
.hg-live { color:var(--gold); font-weight:700; display:flex; align-items:center; gap:6px; }
.hg-live .d { width:5px; height:5px; border-radius:50%; background:var(--gold); animation:v2LivePulse 1.4s ease-in-out infinite; }
.hg-court { color:rgba(255,255,255,.4); }
.hg-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.hg-team { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#fff; }
.hg-chip { width:22px; height:22px; border-radius:5px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:9px; color:var(--primary-dark); flex-shrink:0; }
.hg-score { font-family:var(--font-mono); font-weight:700; font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.hg-score.win { color:var(--gold); }
.hg-divider { height:1px; background:rgba(255,255,255,.08); margin:2px 0; }

/* ─── Main sections ─── */
.section { margin-bottom:36px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; gap:12px; }
.section-head h2 { font-family:var(--font-display); font-weight:700; font-size:21px; text-transform:uppercase; color:var(--primary); display:flex; align-items:center; gap:10px; }
.section-head h2 em { font-style:italic; font-weight:400; text-transform:none; color:var(--gold); font-size:.82em; letter-spacing:-.02em; }
.section-head h2.live-h2::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-glow); animation:v2LivePulse 1.6s ease-in-out infinite; }
.section-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.section-link { font-size:13px; font-weight:500; color:var(--primary); cursor:pointer; }
.section-link:hover { color:var(--gold); }

/* ─── Game cards ─── */
.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:11px; }
.gc { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; cursor:pointer; transition:all var(--transition); position:relative; }
.gc:hover { border-color:var(--border-2); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.gc.live-card { border-color:var(--gold); background:linear-gradient(180deg,var(--gold-glow),var(--bg) 55%); }
.gc.live-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--gold-bright),transparent); }
.gc-status { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:11px; display:flex; align-items:center; gap:7px; color:var(--text-muted); }
.gc-status .live-s { color:var(--gold); font-weight:600; display:flex; align-items:center; gap:5px; }
.gc-status .live-s .d { width:5px; height:5px; border-radius:50%; background:var(--gold); animation:v2LivePulse 1.5s ease-in-out infinite; }
.gc-team { display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; padding:6px 0; }
.gc-team + .gc-team { border-top:1px solid var(--border); }
.gc-chip { width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:10px; color:var(--primary-dark); flex-shrink:0; }
.gc-name { font-size:14px; font-weight:500; color:var(--text); }
.gc-rec { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:1px; }
.gc-score { font-family:var(--font-mono); font-weight:600; font-size:19px; color:var(--text); font-variant-numeric:tabular-nums; }
.gc-score.win { color:var(--primary); font-weight:700; }
.gc-score.none { color:var(--text-muted); font-weight:400; }
.gc-foot { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.04em; display:flex; justify-content:space-between; }
.gc:hover .gc-foot span:last-child { color:var(--gold); }

/* ─── Two-column layout ─── */
.two-col { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
@media (max-width:780px) { .two-col { grid-template-columns:1fr; } }

/* ─── Standings table ─── */
.card-surface { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.standings-table { width:100%; border-collapse:collapse; }
.standings-table th { text-align:right; padding:10px 10px; font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; font-weight:500; background:var(--surface); border-bottom:1px solid var(--border); }
.standings-table th:first-child { text-align:left; padding-left:14px; }
.standings-table th:nth-child(2) { text-align:left; }
.standings-table td { padding:12px 10px; border-bottom:1px solid var(--border); text-align:right; font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--text); }
.standings-table td:first-child { text-align:left; padding-left:14px; font-family:var(--font-body); }
.standings-table td:nth-child(2) { text-align:left; }
.standings-table tbody tr:hover { background:var(--surface); }
.standings-table tbody tr:last-child td { border-bottom:none; }
.rank { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.rank.gold { color:var(--gold); font-weight:700; }
.team-name-cell { font-weight:500; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.s-chip { width:20px; height:20px; border-radius:4px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:9px; color:var(--primary-dark); flex-shrink:0; }
.pct-bar { width:44px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; display:inline-block; vertical-align:middle; margin-left:5px; }
.pct-fill { height:100%; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:2px; }
.plus { color:var(--success); }
.minus { color:var(--danger); }

/* ─── Result list ─── */
.result-list { display:flex; flex-direction:column; gap:7px; }
.result-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:background var(--transition); }
.result-item:hover { background:var(--bg); border-color:var(--border-2); }
.ri-teams { font-size:13.5px; font-weight:500; }
.ri-win { color:var(--primary); font-weight:700; }
.ri-score { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.ri-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.04em; margin-top:2px; }

/* ─── CTA band ─── */
.cta-band { background:var(--primary); border-radius:var(--radius); padding:32px 36px; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
@media (max-width:640px) { .cta-band { grid-template-columns:1fr; } }
.cta-head { font-family:var(--font-display); font-weight:700; font-size:24px; text-transform:uppercase; color:#fff; line-height:1.05; }
.cta-head em { color:var(--gold); font-style:italic; }
.cta-sub { font-size:13.5px; color:rgba(255,255,255,.65); margin-top:7px; }
.cta-btns { display:flex; gap:9px; flex-wrap:wrap; }
.btn-gold { padding:11px 20px; background:var(--gold); color:var(--primary-dark); border-radius:var(--radius-sm); font-weight:700; font-size:13.5px; cursor:pointer; border:none; transition:background var(--transition); }
.btn-gold:hover { background:var(--gold-bright); }
.btn-outline-white { padding:11px 20px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-sm); font-weight:600; font-size:13.5px; cursor:pointer; transition:border-color var(--transition); }
.btn-outline-white:hover { border-color:rgba(255,255,255,.5); }

/* ─── Reveal animation ─── */
.reveal { opacity:0; transform:translateY(6px); animation:v2Rise .5s cubic-bezier(.22,.61,.36,1) forwards; }
.reveal:nth-child(1) { animation-delay:.05s; }
.reveal:nth-child(2) { animation-delay:.12s; }
.reveal:nth-child(3) { animation-delay:.19s; }
.reveal:nth-child(4) { animation-delay:.26s; }
@keyframes v2Rise { to { opacity:1; transform:none; } }

/* ═══════════════════════ LEAGUE PAGE V2 CLASSES ═══════════════════════ */

/* ─── League header (navy banner) ─── */
.league-header { background:var(--primary); padding:28px 20px 0; position:relative; overflow:hidden; }
.league-header::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300' fill='none'><circle cx='200' cy='150' r='100' stroke='white' stroke-width='2' opacity='.04'/><line x1='200' y1='0' x2='200' y2='300' stroke='white' stroke-width='2' opacity='.04'/><rect x='20' y='20' width='360' height='260' stroke='white' stroke-width='2' opacity='.03'/></svg>") repeat; pointer-events:none; }
.lh-inner { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.lh-org { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.lh-org .org-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.lh-name { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,42px); color:#fff; text-transform:uppercase; letter-spacing:.01em; }
.lh-name em { color:var(--gold); font-style:italic; }
.lh-stats { display:flex; gap:28px; margin-top:18px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; flex-wrap:wrap; }
.lh-stat strong { color:#fff; font-weight:600; font-size:13px; display:block; margin-bottom:2px; }

/* ─── Tab nav (inside navy header) ─── */
.lh-tab-nav { max-width:1100px; margin:18px auto 0; display:flex; gap:0; }
.lh-tab-btn { padding:12px 20px 10px; font-family:var(--font-display); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.5); cursor:pointer; border-bottom:3px solid transparent; border-top:none; border-left:none; border-right:none; background:none; margin-bottom:-1px; transition:all .15s; white-space:nowrap; }
.lh-tab-btn:hover { color:rgba(255,255,255,.8); }
.lh-tab-btn.active { color:#fff; border-bottom-color:var(--gold); }
.lh-tab-content { display:none; animation:v2FadeIn .22s; }
.lh-tab-content.active { display:block; }
.mb-20 { margin-bottom:20px; }

/* ─── Full standings table (st) ─── */
table.st { width:100%; border-collapse:collapse; }
.st th { text-align:right; padding:10px 10px; font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; font-weight:500; background:var(--surface); border-bottom:1px solid var(--border); }
.st th:first-child { text-align:left; padding-left:16px; }
.st th:nth-child(2) { text-align:left; min-width:150px; }
.st td { padding:13px 10px; border-bottom:1px solid var(--border); text-align:right; font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--text); }
.st td:first-child { text-align:left; padding-left:16px; font-family:var(--font-body); }
.st td:nth-child(2) { text-align:left; }
.st tbody tr:hover { background:var(--surface); }
.st tbody tr:last-child td { border-bottom:none; }
.rk { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
.rk.g { color:var(--gold); font-weight:700; }
.team-cell { display:flex; align-items:center; gap:9px; font-weight:500; font-size:14px; }
.tch { width:24px; height:24px; border-radius:5px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:9.5px; color:var(--primary-dark); flex-shrink:0; }
.streak { display:flex; gap:2px; margin-left:6px; }
.streak span { width:10px; height:4px; border-radius:1px; background:var(--border); }
.streak span.w { background:var(--gold); }
.streak span.l { background:var(--border-2); }
.pbar { width:50px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.pbar i { display:block; height:100%; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); border-radius:2px; }
.pos { color:var(--success); }
.neg { color:var(--danger); }

/* ─── Teams grid ─── */
.teams-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:11px; }
.team-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; cursor:pointer; transition:all var(--transition); display:flex; flex-direction:column; gap:11px; }
.team-card:hover { border-color:var(--primary); transform:translateY(-1px); box-shadow:0 8px 24px rgba(27,42,74,.1); }
.tc-head { display:flex; align-items:center; gap:11px; }
.tc-logo { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-style:italic; font-size:18px; color:var(--primary-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); flex-shrink:0; }
.tc-name { font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; color:var(--primary); letter-spacing:.01em; }
.tc-rec { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-top:2px; letter-spacing:.04em; }
.tc-rec strong { color:var(--text-secondary); }
.win-bar { height:5px; border-radius:3px; background:var(--border); overflow:hidden; }
.win-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-light)); border-radius:3px; }

/* ─── Stat leaders cards ─── */
.leaders-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:13px; }
.leader-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.lc-head { background:var(--primary); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.lc-cat { font-family:var(--font-display); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.7); }
.lc-stat-head { font-family:var(--font-mono); font-size:21px; font-weight:700; color:var(--gold); }
.lc-players { padding:6px 0; }
.lc-player { display:flex; align-items:center; gap:11px; padding:10px 16px; border-bottom:1px solid var(--border); }
.lc-player:last-child { border-bottom:none; }
.lc-num { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); min-width:14px; }
.lc-num.top { color:var(--gold); font-weight:700; }
.lc-av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:10px; color:#fff; flex-shrink:0; }
.lc-info { flex:1; min-width:0; }
.lc-pname { font-size:13.5px; font-weight:500; color:var(--text); }
.lc-team { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:1px; }
.lc-val { font-family:var(--font-mono); font-weight:700; font-size:16px; color:var(--primary); font-variant-numeric:tabular-nums; }
.lc-val.top-val { color:var(--gold); font-size:18px; }

/* ─── Schedule list ─── */
.schedule-list { display:flex; flex-direction:column; }
.sched-day { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding:12px 16px 8px; background:var(--surface); border-bottom:1px solid var(--border); border-top:1px solid var(--border); margin-top:10px; }
.sched-day:first-child { margin-top:0; border-top:none; }
.sched-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--transition); }
.sched-row:hover { background:var(--surface); }
.sched-row:last-child { border-bottom:none; }
.sched-time { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); min-width:58px; letter-spacing:.03em; }
.sched-teams { flex:1; }
.sched-match { font-size:14px; font-weight:500; color:var(--text); }
.sched-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:2px; }
.sched-status { font-family:var(--font-mono); font-size:10.5px; padding:3px 8px; border-radius:5px; font-weight:600; flex-shrink:0; }
.sched-status.live { background:var(--gold-glow); color:var(--gold); border:1px solid var(--gold); }
.sched-status.final { background:var(--surface); color:var(--text-muted); }
.sched-status.upcoming { background:var(--surface); color:var(--primary); }
.sched-score { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--text); min-width:68px; text-align:right; font-variant-numeric:tabular-nums; }
.sched-score .w { color:var(--primary); font-weight:700; }

/* ═══════════════════════ DASHBOARD + FAN VIEWS ═══════════════════════ */
.user-pill{display:flex;align-items:center;gap:10px;cursor:pointer}
.user-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2C3E6B,#1B2A4A);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gold);border:1.5px solid var(--gold)}
.user-name{font-size:13px;font-weight:500;color:var(--text-secondary)}
.greeting-strip{background:var(--primary);padding:22px 20px 18px}
.gs-inner{max-width:1100px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gs-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
.gs-title{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3vw,28px);color:#fff;text-transform:uppercase}
.gs-title em{color:var(--gold);font-style:italic}
.gs-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}
.gs-actions{display:flex;gap:8px;flex-shrink:0}
.btn-sm-outline{padding:8px 15px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.8);cursor:pointer;background:transparent;transition:all var(--transition)}
.btn-sm-outline:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* Team follow cards */
.team-follow-grid{display:flex;flex-direction:column;gap:9px}
.tfc{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all var(--transition);display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;position:relative;overflow:hidden}
.tfc:hover{border-color:var(--border-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.tfc.live{border-color:var(--gold);background:linear-gradient(90deg,rgba(212,168,67,.05),var(--bg))}
.tfc.live::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),transparent)}
.tfc-logo{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:16px;color:var(--primary-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);flex-shrink:0}
.tfc-name{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--primary);letter-spacing:.01em}
.tfc-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:2px;letter-spacing:.03em}
.tfc-meta .rec{color:var(--text-secondary);font-weight:600}
.tfc-right{text-align:right;min-width:78px}
.tfc-status{font-family:var(--font-mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.tfc-status.live{color:var(--gold);display:flex;align-items:center;gap:5px;justify-content:flex-end}
.tfc-status.live .d{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:v2LivePulse 1.5s ease-in-out infinite}
.tfc-status.upcoming{color:var(--text-muted)}
.tfc-status.final{color:var(--text-muted)}
.tfc-score{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tfc-score .w{color:var(--primary)}
.tfc-score .l{color:var(--danger)}
.tfc-next{font-size:12px;color:var(--text-secondary)}

/* Live strip */
.live-strip{background:var(--bg);border:1px solid var(--gold);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:10px}
.ls-head{background:var(--primary);padding:10px 16px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ls-head .d{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:v2LivePulse 1.5s ease-in-out infinite}
.ls-head span{color:var(--gold)}
.ls-head .court{color:rgba(255,255,255,.5);margin-left:auto}
.ls-body{padding:14px 16px}
.ls-team{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.ls-team-name{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600}
.ls-chip{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:10px;color:var(--primary-dark);flex-shrink:0}
.ls-score{font-family:var(--font-mono);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.ls-score.lead{color:var(--primary)}
.ls-divider{height:1px;background:var(--border);margin:2px 0}
.ls-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.04em}
.ls-open{color:var(--primary);cursor:pointer;font-weight:500}

/* Score list */
.score-list{display:flex;flex-direction:column;gap:7px}
.score-row{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);padding:12px 14px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:all var(--transition)}
.score-row:hover{border-color:var(--border-2);background:var(--surface)}
.sr-teams{flex:1}
.sr-match{font-size:13.5px;font-weight:500}
.sr-win{color:var(--primary);font-weight:700}
.sr-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px}
.sr-score{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;min-width:54px;text-align:right}
.sr-result{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px}
.w-badge{background:rgba(21,128,61,.1);color:var(--success)}
.l-badge{background:rgba(220,38,38,.07);color:var(--danger)}

/* Upcoming card */
.upcoming-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:15px}
.upcoming-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.uc-time{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);text-align:center;min-width:52px}
.uc-time strong{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.uc-vs{flex:1}
.uc-teams{font-size:14.5px;font-weight:600;color:var(--text)}
.uc-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px}
.uc-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:4px 9px;border-radius:5px;background:var(--gold-glow);color:var(--gold);border:1px solid var(--gold);flex-shrink:0}

/* Discover / sidebar */
.discover-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.discover-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xs);padding:12px 13px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:10px}
.discover-card:hover{border-color:var(--primary);background:var(--surface)}
.dc-logo{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--primary-dark);flex-shrink:0}
.dc-name{font-size:12.5px;font-weight:600;color:var(--text)}
.dc-meta{font-size:11px;color:var(--text-muted);margin-top:1px}
.dc-follow{margin-left:auto;font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--primary);flex-shrink:0}
.sidebar-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:13px}
.sc-head{background:var(--primary);padding:12px 16px}
.sc-title{font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;color:#fff;letter-spacing:.02em}
.sc-sub{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.sc-body{padding:10px 0}
.sc-row{display:flex;align-items:center;gap:9px;padding:8px 16px;transition:background var(--transition);cursor:pointer}
.sc-row:hover{background:var(--surface)}
.sc-rank{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);min-width:14px;text-align:center}
.sc-rank.gold{color:var(--gold);font-weight:700}
.sc-tchip{width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:8.5px;color:var(--primary-dark);flex-shrink:0}
.sc-team{flex:1;font-size:12.5px;font-weight:500}
.sc-rec{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}
.sc-pbar{width:38px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.sc-pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--gold));border-radius:2px}
.sc-link{padding:11px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--primary);font-weight:500;cursor:pointer;display:block;text-align:center}
.plan-card{background:var(--primary);border-radius:var(--radius-sm);padding:17px 19px}
.plan-tier{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px}
.plan-name{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;text-transform:uppercase}
.plan-name em{color:var(--gold)}
.plan-features{margin:10px 0;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:rgba(255,255,255,.65)}
.plan-features span::before{content:'✓ ';color:var(--gold);font-weight:700}
.btn-gold-sm{padding:9px 18px;background:var(--gold);color:var(--primary-dark);border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;border:none;width:100%;transition:background var(--transition)}
.btn-gold-sm:hover{background:var(--gold-bright)}

/* ═══════════════════════ FIND LEAGUES PAGE ═══════════════════════ */
.find-hero{background:var(--primary);padding:48px 22px 44px;text-align:center;position:relative;overflow:hidden}
.find-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 50% 120%,rgba(212,168,67,.12) 0%,transparent 60%);pointer-events:none}
.fh-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fh-headline{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,5vw,50px);color:#fff;text-transform:uppercase;letter-spacing:-.005em}
.fh-headline em{color:var(--gold);font-style:italic}
.fh-sub{font-size:14.5px;color:rgba(255,255,255,.6);margin-top:9px}
.search-wrap{max-width:640px;margin:24px auto 0;position:relative;z-index:1}
.search-box{display:flex;align-items:center;background:var(--bg);border:1.5px solid var(--bg);border-radius:99px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.search-icon{padding:0 14px 0 18px;color:var(--text-muted);flex-shrink:0}
.search-input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:14.5px;color:var(--text);padding:15px 0;background:transparent}
.search-input::placeholder{color:var(--text-muted)}
.search-submit{padding:9px 20px;margin:6px 6px;background:var(--primary);color:#fff;border-radius:99px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;flex-shrink:0}
.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filter-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.result-count{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-left:auto}
.leagues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}
.lc-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;cursor:pointer;transition:all var(--transition);display:flex;flex-direction:column;gap:13px;position:relative}
.lc-card:hover{border-color:var(--primary);box-shadow:0 8px 24px rgba(27,42,74,.1);transform:translateY(-1px)}
.lc-card.open{border-color:var(--gold)}
.lc-card.current{border-color:var(--primary);background:linear-gradient(180deg,rgba(27,42,74,.03),var(--bg))}
.lcc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:11px}
.lcc-info{flex:1;min-width:0}
.lcc-org{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;display:flex;align-items:center;gap:6px}
.lcc-org .org-chip{font-family:var(--font-display);font-weight:700;font-size:9px;color:#fff;background:var(--primary);padding:2px 6px;border-radius:3px;letter-spacing:.06em}
.lcc-name{font-family:var(--font-display);font-weight:700;font-size:18px;text-transform:uppercase;color:var(--primary);line-height:1.1;letter-spacing:.01em}
.lcc-season{font-size:12.5px;color:var(--text-secondary);margin-top:3px}
.status-pill{flex-shrink:0;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.status-open{background:rgba(21,128,61,.1);color:var(--success);border:1px solid rgba(21,128,61,.25)}
.status-live{background:var(--gold-glow);color:var(--gold);border:1px solid var(--gold)}
.status-soon{background:var(--surface);color:var(--text-muted);border:1px solid var(--border)}
.status-full{background:rgba(220,38,38,.08);color:var(--danger);border:1px solid rgba(220,38,38,.2)}
.lcc-details{display:grid;grid-template-columns:1fr 1fr;gap:7px 13px;font-size:12.5px;color:var(--text-secondary)}
.lcc-detail{display:flex;align-items:center;gap:6px}
.lcc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid var(--border);gap:10px}
.lcc-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
.btn-register{padding:9px 18px;background:var(--gold);color:var(--primary-dark);border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:background var(--transition);flex-shrink:0}
.btn-register:hover{background:var(--gold-bright)}
.btn-view{padding:9px 18px;background:transparent;color:var(--primary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);flex-shrink:0}
.btn-view:hover{border-color:var(--primary);background:var(--surface)}
.btn-current{padding:9px 18px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:none;flex-shrink:0}
.start-cta{margin-top:24px;background:var(--primary);border-radius:var(--radius-sm);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.start-cta-text h3{font-family:var(--font-display);font-weight:700;font-size:21px;text-transform:uppercase;color:#fff}
.start-cta-text h3 em{color:var(--gold);font-style:italic}
.start-cta-text p{font-size:13px;color:rgba(255,255,255,.6);margin-top:5px}

/* ═══════════════════════ MY TEAM PAGE ═══════════════════════ */
.team-header{background:var(--primary);padding:0 20px;position:relative;overflow:hidden}
.th-court{position:absolute;inset:0;pointer-events:none;opacity:.04;width:100%;height:100%}
.th-inner{max-width:1100px;margin:0 auto;display:flex;align-items:flex-end;gap:20px;padding-top:24px;position:relative;z-index:1;flex-wrap:wrap}
.th-logo{width:68px;height:68px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:26px;color:var(--primary-dark);box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2);flex-shrink:0}
.th-info{flex:1;min-width:0;padding-bottom:18px}
.th-league{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:5px}
.th-name{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,4vw,40px);color:#fff;text-transform:uppercase;line-height:1;letter-spacing:.01em}
.th-record{display:flex;align-items:center;gap:13px;margin-top:9px}
.th-rec-num{font-family:var(--font-mono);font-size:17px;font-weight:700;color:#fff}
.th-rec-num span{font-size:11px;color:rgba(255,255,255,.45);margin-left:5px}
.th-seed{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;background:var(--gold);color:var(--primary-dark)}
.th-right{padding-bottom:18px;text-align:right}
.th-magic{font-family:var(--font-display);font-weight:700;font-size:48px;color:var(--gold);line-height:1}
.th-magic-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px}
.tab-bar{border-top:1px solid rgba(255,255,255,.07)}
.tab-bar-inner{max-width:1100px;margin:0 auto;display:flex}
.tab-btn{padding:13px 20px 11px;font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.45);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);background:none;border-top:none;border-left:none;border-right:none;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.tab-btn:hover{color:rgba(255,255,255,.8)}
.tab-btn.active{color:#fff;border-bottom-color:var(--gold)}
.tab-count{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px}
.tc-urgent{background:var(--danger);color:#fff}
.tc-ok{background:rgba(255,255,255,.1)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:v2FadeIn .22s}
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px}
@media(max-width:600px){.kpi-strip{grid-template-columns:1fr 1fr}}
.kpi{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px}
.kpi-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
.kpi-val{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi-sub{margin-top:5px;font-size:11px;color:var(--text-muted)}
.playoff-card{background:var(--primary);border-radius:var(--radius-sm);padding:18px 20px;display:flex;align-items:center;gap:18px;margin-bottom:20px;cursor:pointer}
.pc-magic{text-align:center;min-width:60px}
.pc-magic-num{font-family:var(--font-display);font-weight:700;font-size:48px;color:var(--gold);line-height:1}
.pc-magic-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:2px}
.pc-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.1)}
.pc-info{flex:1}
.pc-status{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--gold);text-transform:uppercase}
.pc-desc{font-size:13px;color:rgba(255,255,255,.6);margin-top:4px;line-height:1.5}
.gc-simple{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:15px;margin-bottom:9px}
.gc-simple:hover{border-color:var(--border-2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.gc-simple.next{border-color:var(--primary);background:linear-gradient(90deg,rgba(27,42,74,.03),var(--bg))}
.gcs-badge{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:5px;flex-shrink:0}
.badge-next{background:var(--primary);color:#fff}
.badge-win{background:rgba(21,128,61,.1);color:var(--success)}
.badge-loss{background:rgba(220,38,38,.07);color:var(--danger)}
.gcs-info{flex:1}
.gcs-match{font-size:14.5px;font-weight:600}
.gcs-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px}
.gcs-score{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;min-width:68px}
.gcs-score .w{color:var(--primary)}
.gcs-score .l{color:var(--danger)}
.gcs-time{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--primary);min-width:68px;text-align:right}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.rc{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:11px}
.rc:hover{border-color:var(--primary)}
.rc-num{font-family:var(--font-display);font-weight:700;font-style:italic;font-size:24px;color:var(--primary);min-width:32px;line-height:1}
.rc-info{min-width:0;flex:1}
.rc-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-pos{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:1px}
.rc-status{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:600;padding:2px 6px;border-radius:3px;flex-shrink:0}
.rc-active{background:rgba(21,128,61,.1);color:var(--success)}
.rc-avg{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);margin-top:1px}
.sched-list{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.sched-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--transition);gap:13px}
.sched-row:last-child{border-bottom:none}
.sched-row:hover{background:var(--surface)}
.sched-date{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);min-width:78px}
.sched-date strong{display:block;color:var(--text);font-size:13px;margin-bottom:1px;font-weight:600}
.sched-game{flex:1}
.sched-opp{font-size:14px;font-weight:500}
.sched-venue{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:1px}
.sched-result{font-family:var(--font-mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:78px}
.sched-result .w{color:var(--success)}
.sched-result .l{color:var(--danger)}
.sched-result .upcoming{font-size:12px;font-weight:600;color:var(--primary);background:rgba(27,42,74,.07);padding:3px 8px;border-radius:4px}
.stats-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.stats-table{width:100%;border-collapse:collapse}
.stats-table th{text-align:left;padding:10px 14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:500;background:var(--surface);border-bottom:1px solid var(--border)}
.stats-table th:not(:first-child):not(:nth-child(2)){text-align:right}
.stats-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px}
.stats-table td:not(:first-child):not(:nth-child(2)){text-align:right;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.stats-table tbody tr:last-child td{border-bottom:none}
.stats-table tbody tr:hover{background:var(--surface);cursor:pointer}
.player-cell{display:flex;align-items:center;gap:9px}
.p-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),var(--primary));display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:10px;color:#fff;flex-shrink:0}
.stat-hi{color:var(--primary);font-weight:700}
.jersey-num{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);min-width:26px}

/* ═══════════════════════ ADMIN PAGE PATTERNS ═══════════════════════ */
.page-head{background:var(--primary);padding:20px 22px}
.ph-inner{max-width:1100px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:4px}
.ph-title{font-family:var(--font-display);font-weight:700;font-size:22px;text-transform:uppercase;color:#fff}
.ph-title em{color:var(--gold);font-style:italic}
.ph-actions{display:flex;gap:9px;flex-shrink:0}
.ann-list{display:flex;flex-direction:column;gap:9px}
.ann-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;transition:all var(--transition)}
.ann-card:hover{border-color:var(--border-2)}
.ann-card.pinned{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-glow),var(--bg))}
.ann-card.warning{border-color:rgba(217,119,6,.35)}
.ann-top{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:6px}
.ann-title-text{font-weight:700;font-size:14px;color:var(--text);line-height:1.35}
.ann-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;flex-shrink:0;text-transform:uppercase;letter-spacing:.06em}
.ab-info{background:rgba(27,42,74,.08);color:var(--primary)}
.ab-warn{background:rgba(217,119,6,.1);color:var(--warn)}
.ab-success{background:rgba(21,128,61,.1);color:var(--success)}
.ab-pin{background:var(--gold-glow);color:var(--gold)}
.ann-body-text{font-size:13px;color:var(--text-secondary);line-height:1.55;margin-bottom:8px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ann-foot{display:flex;align-items:center;gap:13px}
.ann-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);flex:1;letter-spacing:.03em}
.ann-actions{display:flex;gap:6px}
.type-chip{padding:7px 13px;border:1px solid var(--border);border-radius:99px;font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all var(--transition)}
.type-chip.active{color:#fff;background:var(--primary);border-color:var(--primary);font-weight:600}
.type-chip:hover:not(.active){border-color:var(--border-2)}
.btn-publish{width:100%;padding:11px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;border:none}
.btn-preview{padding:11px 15px;background:var(--surface);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer}
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px;margin-bottom:24px}
.report-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px 20px;display:flex;flex-direction:column;gap:13px;cursor:pointer;transition:all var(--transition)}
.report-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.rc-icon{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:grid;place-items:center;font-size:19px}
.rc-name{font-family:var(--font-display);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--primary);letter-spacing:.01em}
.rc-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}
.rc-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between}
.rc-dl{font-weight:600;color:var(--primary);font-size:11px}
.quick-exports{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:22px}
.qe-head{background:var(--primary);padding:12px 18px;font-family:var(--font-display);font-weight:700;font-size:14px;text-transform:uppercase;color:#fff}
.qe-row{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--border);transition:background var(--transition)}
.qe-row:hover{background:var(--surface)}
.qe-row:last-child{border-bottom:none}
.qe-icon{font-size:18px;width:30px;text-align:center;flex-shrink:0}
.qe-info{flex:1}
.qe-name{font-weight:600;font-size:13.5px}
.qe-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:2px}
.qe-btn{padding:7px 13px;background:var(--primary);color:#fff;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:none;flex-shrink:0}
.pay-table{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
table.pt{width:100%;border-collapse:collapse}
.pt th{text-align:left;padding:10px 14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-weight:500;background:var(--surface);border-bottom:1px solid var(--border)}
.pt th:not(:first-child):not(:nth-child(2)){text-align:right}
.pt td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px}
.pt td:not(:first-child):not(:nth-child(2)){text-align:right;font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.pt tbody tr:hover{background:var(--surface);cursor:pointer}
.pt tbody tr:last-child td{border-bottom:none}
.status-badge{font-family:var(--font-mono);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:4px}
.s-completed{background:rgba(21,128,61,.1);color:var(--success)}
.s-pending{background:rgba(217,119,6,.1);color:var(--warn)}
.s-expired{background:rgba(220,38,38,.08);color:var(--danger)}
.s-refunded{background:var(--surface);color:var(--text-muted)}
.rev-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.rev-head{background:var(--primary);padding:13px 17px;display:flex;align-items:center;justify-content:space-between}
.rev-title{font-family:var(--font-display);font-weight:700;font-size:15px;text-transform:uppercase;color:#fff}
.rev-total{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.rev-row{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid var(--border)}
.rev-row:last-child{border-bottom:none}
.rr-label{font-size:13.5px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.rr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rr-val{font-family:var(--font-mono);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.rr-val.green{color:var(--success)}
.rr-val.gold{color:var(--gold)}
.rr-val.warn{color:var(--warn)}

/* ═══════════════════════ ADMIN UNIFIED DASHBOARD ═══════════════════════ */
.admin-dash-header{background:var(--primary);padding:0 20px;position:relative;overflow:hidden}
.adh-inner{max-width:1100px;margin:0 auto;padding-top:22px;position:relative;z-index:1}
.adh-mode-toggle{display:inline-flex;background:rgba(255,255,255,.08);border-radius:99px;padding:3px;gap:2px;margin-bottom:16px}
.adh-mode-btn{padding:7px 18px;border-radius:99px;font-family:var(--font-display);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,.55);transition:all var(--transition)}
.adh-mode-btn.active{background:var(--gold);color:var(--primary-dark)}
.adh-title{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,3vw,28px);color:#fff;text-transform:uppercase}
.adh-title em{color:var(--gold);font-style:italic}
.adh-meta{font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.adh-stats{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}
.adh-stat strong{display:block;font-family:var(--font-mono);font-size:18px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.adh-stat span{font-family:var(--font-mono);font-size:9.5px;color:rgba(255,255,255,.45);letter-spacing:.08em;text-transform:uppercase}
.adh-tab-nav{max-width:1100px;margin:16px auto 0;display:flex}
.adh-tab-btn{padding:12px 18px 10px;font-family:var(--font-display);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);cursor:pointer;border-bottom:2.5px solid transparent;border-top:none;border-left:none;border-right:none;background:none;margin-bottom:-1px;transition:all var(--transition);white-space:nowrap}
.adh-tab-btn:hover{color:rgba(255,255,255,.8)}
.adh-tab-btn.active{color:#fff;border-bottom-color:var(--gold)}
.adh-tab-content{display:none}
.adh-tab-content.active{display:block;animation:v2FadeIn .22s}
.todo-list{display:flex;flex-direction:column;gap:9px}
.todo-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:all var(--transition)}
.todo-item:hover{border-color:var(--border-2);box-shadow:var(--shadow-md)}
.todo-item.urgent{border-left:3px solid var(--danger);padding-left:13px}
.todo-item.warn{border-left:3px solid var(--warn);padding-left:13px}
.todo-icon{font-size:18px;flex-shrink:0;width:32px;text-align:center}
.todo-info{flex:1}
.todo-title{font-size:13.5px;font-weight:600;color:var(--text)}
.todo-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px}
.todo-action{font-family:var(--font-mono);font-size:11px;color:var(--primary);font-weight:600;flex-shrink:0}
.admin-grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:780px){.admin-grid-2{grid-template-columns:1fr}}