/* ═══════════════════════════════════════════════════
   CoachPro v9 — Design System
   Aesthetic: Field-grade. Industrial sporting.
   Dark pitch · Data-dense · Zero friction
   ═══════════════════════════════════════════════════ */

:root {
  /* Pitch palette */
  --bg:       #050a06;
  --surface:  #0b1210;
  --surf2:    #111a13;
  --surf3:    #172019;
  --surf4:    #1d2820;

  /* Borders — pitch lines */
  --line:     rgba(255,255,255,0.055);
  --line2:    rgba(255,255,255,0.10);
  --line3:    rgba(255,255,255,0.17);

  /* Brand green */
  --g:    #16a34a;
  --g2:   #22c55e;
  --g3:   #4ade80;
  --gbg:  rgba(22,163,74,0.13);
  --gbg2: rgba(34,197,94,0.07);

  /* Accent — scoreboard yellow */
  --y:    #eab308;
  --y2:   #facc15;
  --ybg:  rgba(234,179,8,0.11);

  /* Semantic */
  --r:    #ef4444;
  --rbg:  rgba(239,68,68,0.11);
  --b:    #3b82f6;
  --bbg:  rgba(59,130,246,0.11);
  --o:    #f97316;
  --p:    #8b5cf6;

  /* Text */
  --t:    #eef2ee;
  --t2:   #7a9680;
  --t3:   #3d5442;
  --t4:   #233028;

  /* Font — mono-display pairing for data-density */
  --font:   'Inter', system-ui, sans-serif;
  --font-h: 'Space Grotesk', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radius */
  --r1:  6px;
  --r2:  10px;
  --r3:  14px;
  --r4:  20px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fast: all 0.12s var(--ease);
  --mid:  all 0.22s var(--ease);
}
/* ── Backward-compat aliases ── */
:root {
  --border:    var(--line);
  --border2:   var(--line2);
  --surface2:  var(--surf2);
  --surface3:  var(--surf3);
  --text:      var(--t);
  --text2:     var(--t2);
  --text3:     var(--t3);
  --green:     var(--g);
  --green2:    var(--g2);
  --green-bg:  var(--gbg);
  --accent:    var(--y);
  --accent-bg: var(--ybg);
  --red:       var(--r);
  --red-bg:    var(--rbg);
  --blue:      var(--b);
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  font-family: var(--font);
  color: var(--t);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes shimmer { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:0.2} }

#root { width:100%; height:100vh; height:100dvh; }

/* ═══════════════════════════════════════════════════
   BOOT
   ═══════════════════════════════════════════════════ */
#boot-screen {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg); gap:32px;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(22,163,74,0.07) 0%, transparent 100%);
}
.boot-logo { text-align:center; }
.boot-icon {
  font-size:48px; margin-bottom:12px;
  filter: drop-shadow(0 0 24px rgba(34,197,94,0.45));
}
.boot-name {
  font-family:var(--font-h); font-size:28px; font-weight:800;
  color:var(--t); letter-spacing:3px; text-transform:uppercase;
}
.boot-name span { color:var(--g2); }
.boot-sub { font-size:11px; color:var(--t3); margin-top:5px; letter-spacing:2px; text-transform:uppercase; }
.boot-spinner {
  width:24px; height:24px;
  border:2px solid var(--surf3);
  border-top-color:var(--g2);
  border-radius:50%;
  animation:spin 0.75s linear infinite;
}

/* ═══════════════════════════════════════════════════
   AUTH — Two-panel: Hero + Form
   ═══════════════════════════════════════════════════ */
.auth-page {
  display:flex; width:100%; min-height:100vh;
  background:var(--bg);
}

/* Left hero panel */
.auth-hero {
  flex:1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(22,163,74,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(234,179,8,0.05) 0%, transparent 50%),
    linear-gradient(160deg, #060d07 0%, #081409 50%, #050a06 100%);
  padding:52px 56px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
/* Tactical field lines as background decoration */
.auth-hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, transparent 1px, transparent 80px, rgba(255,255,255,0.012) 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.012) 0px, transparent 1px, transparent 80px, rgba(255,255,255,0.012) 80px);
  pointer-events:none;
}
.auth-hero-inner { max-width:440px; width:100%; position:relative; z-index:1; }
.auth-hero-brand {
  display:flex; align-items:center; gap:12px; margin-bottom:52px;
}
.auth-hero-logo {
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg, var(--g) 0%, #0a3d1f 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow: 0 4px 16px rgba(22,163,74,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}
.auth-hero-name {
  font-family:var(--font-h); font-size:22px; font-weight:800;
  color:var(--t); letter-spacing:0.5px;
}
.auth-hero-name span { color:var(--g2); }
.auth-hero-headline {
  font-family:var(--font-h); font-size:38px; font-weight:800;
  color:var(--t); line-height:1.15; margin-bottom:18px;
  letter-spacing:-0.5px;
}
.auth-hero-headline em { color:var(--g2); font-style:normal; }
.auth-hero-sub {
  font-size:16px; color:var(--t2); line-height:1.75;
  margin-bottom:44px; max-width:360px;
}
.auth-feature-list { display:flex; flex-direction:column; gap:16px; }
.auth-feature {
  display:flex; align-items:flex-start; gap:14px;
}
.auth-feature-icon {
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.auth-feature-title { font-size:14px; font-weight:700; color:var(--t); line-height:1; }
.auth-feature-desc  { font-size:12px; color:var(--t3); margin-top:3px; line-height:1.4; }
.auth-hero-footer {
  margin-top:48px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:11px; color:var(--t3); letter-spacing:0.5px;
}

/* Right form panel */
.auth-form-panel {
  width:440px; min-width:340px;
  background:var(--surface);
  border-left:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  padding:48px 40px;
}
.auth-card {
  width:100%; max-width:360px;
  animation:fadeUp 0.25s var(--ease);
}
.auth-card-title {
  font-family:var(--font-h); font-size:22px; font-weight:800;
  color:var(--t); margin-bottom:6px; letter-spacing:-0.3px;
}
.auth-card-sub { font-size:13px; color:var(--t2); margin-bottom:24px; }

.auth-error {
  background:var(--rbg); border:1px solid rgba(239,68,68,0.25);
  border-radius:var(--r1); padding:10px 13px;
  font-size:13px; color:#fca5a5; margin-bottom:14px;
  display:none; animation:fadeUp 0.15s var(--ease);
}
.auth-error.show { display:block; }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--t3); font-size:11px; margin:18px 0; text-transform:uppercase; letter-spacing:1px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--line); }
.auth-switch { text-align:center; font-size:13px; color:var(--t2); margin-top:18px; }
.auth-switch a { color:var(--g2); cursor:pointer; text-decoration:none; font-weight:600; transition:color 0.12s; }
.auth-switch a:hover { color:var(--g3); }
.auth-notice { background:var(--ybg); border:1px solid rgba(234,179,8,0.2); border-radius:var(--r1); padding:11px 13px; font-size:12px; color:var(--y); margin-top:14px; line-height:1.65; }

@media(max-width:860px) {
  .auth-hero { display:none; }
  .auth-form-panel { width:100%; min-width:unset; border-left:none; }
  .auth-page { justify-content:center; }
}

/* ═══════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════ */
.field { margin-bottom:14px; }
.field label { display:block; font-size:11px; font-weight:700; color:var(--t3); margin-bottom:5px; letter-spacing:0.8px; text-transform:uppercase; }
.field-err { font-size:11px; color:var(--r); margin-top:4px; display:none; }
.field-err.show { display:block; animation:fadeUp 0.12s var(--ease); }

.input {
  width:100%; background:var(--surf2); border:1px solid var(--line2);
  border-radius:var(--r1); color:var(--t); font-family:var(--font); font-size:14px;
  padding:10px 12px; outline:none; transition:var(--fast); -webkit-appearance:none;
}
.input:focus { border-color:var(--g2); background:var(--surf3); box-shadow:0 0 0 3px rgba(34,197,94,0.09); }
.input.error  { border-color:var(--r); box-shadow:0 0 0 3px rgba(239,68,68,0.09); }
.input::placeholder { color:var(--t3); }
select.input { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a9680'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
select.input option { background:#0b1210; }
textarea.input { resize:vertical; min-height:78px; line-height:1.6; }

/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; padding:0 14px;
  border-radius:var(--r1); border:1px solid var(--line2);
  background:var(--surf2); color:var(--t2);
  font-family:var(--font); font-size:13px; font-weight:500;
  cursor:pointer; transition:var(--fast); white-space:nowrap; text-decoration:none;
}
.btn:hover  { background:var(--surf3); color:var(--t); border-color:var(--line3); }
.btn:active { transform:scale(0.97); }
.btn:disabled { opacity:0.38; cursor:not-allowed; transform:none; pointer-events:none; }

.btn-primary { background:var(--g); border-color:var(--g); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(22,163,74,0.3); }
.btn-primary:hover { background:var(--g2); border-color:var(--g2); box-shadow:0 4px 16px rgba(34,197,94,0.25); }

.btn-accent  { background:var(--y); border-color:var(--y); color:#000; font-weight:700; }
.btn-accent:hover { background:var(--y2); }

.btn-danger  { background:var(--rbg); border-color:rgba(239,68,68,0.25); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,0.2); border-color:rgba(239,68,68,0.4); }

.btn-ghost   { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--surf2); border-color:var(--line); }

.btn-sm  { height:28px; padding:0 10px; font-size:11px; border-radius:var(--r1); }
.btn-lg  { height:42px; padding:0 20px; font-size:14px; font-weight:600; width:100%; border-radius:var(--r2); }
.btn-icon{ width:32px; padding:0; flex-shrink:0; }
.btn-google { background:var(--surf2); border-color:var(--line2); color:var(--t); width:100%; }

.btn .spinner {
  width:13px; height:13px;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:#fff; border-radius:50%;
  animation:spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════
   PENDING PAGE
   ═══════════════════════════════════════════════════ */
.pending-page { display:flex; align-items:center; justify-content:center; height:100%; padding:20px; }
.pending-card { text-align:center; max-width:420px; width:100%; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r4); padding:48px 36px; animation:fadeUp 0.3s var(--ease); }
.pending-icon { font-size:52px; margin-bottom:16px; }
.pending-title { font-family:var(--font-h); font-size:22px; font-weight:700; color:var(--t); margin-bottom:10px; }
.pending-text  { font-size:14px; color:var(--t2); line-height:1.8; margin-bottom:24px; }
.status-badge  { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.5px; }
.status-pending  { background:var(--ybg); color:var(--y);  border:1px solid rgba(234,179,8,0.25); }
.status-active   { background:var(--gbg); color:var(--g2); border:1px solid rgba(34,197,94,0.25); }
.status-rejected { background:var(--rbg); color:#fca5a5;   border:1px solid rgba(239,68,68,0.25); }

/* ═══════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════ */
.app-shell { display:grid; grid-template-columns:220px 1fr; height:100vh; height:100dvh; overflow:hidden; }

/* ── SIDEBAR ── */
.sidebar { background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }

.sidebar-brand { padding:16px 14px 12px; border-bottom:1px solid var(--line); flex-shrink:0; display:flex; align-items:center; gap:10px; }
.brand-logo { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--g) 0%,#071f10 100%); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; box-shadow:0 2px 8px rgba(22,163,74,0.35); }
.brand-text {}
.brand-name { font-family:var(--font-h); font-size:16px; font-weight:800; color:var(--t); letter-spacing:0.3px; line-height:1.1; }
.brand-name span { color:var(--g2); }
.brand-role { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:2px; margin-top:1px; font-weight:700; }

.sidebar-nav { flex:1; overflow-y:auto; padding:8px 6px; scrollbar-width:none; }
.sidebar-nav::-webkit-scrollbar { display:none; }

.nav-section { font-size:9px; font-weight:800; color:var(--t4); text-transform:uppercase; letter-spacing:2px; padding:14px 10px 5px; }

.nav-item {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:var(--r1);
  font-size:13px; font-weight:500; color:var(--t2);
  cursor:pointer; border:none; background:none;
  width:100%; text-align:left; transition:var(--fast); margin-bottom:1px;
  position:relative;
}
.nav-item:hover { background:var(--surf2); color:var(--t); }
.nav-item.active { background:var(--gbg); color:var(--g2); font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:16px; background:var(--g2); border-radius:0 2px 2px 0; }
.nav-item .nav-icon { font-size:15px; width:18px; text-align:center; flex-shrink:0; opacity:0.7; }
.nav-item.active .nav-icon { opacity:1; }
.nav-item .nav-badge { margin-left:auto; background:var(--y); color:#000; font-size:10px; font-weight:800; padding:1px 6px; border-radius:8px; animation:pulse 2s ease infinite; }

.sidebar-footer { border-top:1px solid var(--line); padding:8px 6px; flex-shrink:0; }
.user-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r1); background:var(--surf2); border:1px solid var(--line); transition:var(--fast); }
.user-row:hover { border-color:var(--line2); }
.user-avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--g),#0a3d1f); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:12px; font-weight:800; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name  { font-size:12px; font-weight:600; color:var(--t); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-email { font-size:10px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logout-btn { background:none; border:none; color:var(--t3); cursor:pointer; font-size:15px; padding:4px 5px; flex-shrink:0; transition:var(--fast); border-radius:5px; }
.logout-btn:hover { color:var(--t); background:var(--surf3); }

/* ── MAIN ── */
.main { display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.topbar { height:48px; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 18px; gap:12px; flex-shrink:0; }
.topbar-title { font-family:var(--font-h); font-size:15px; font-weight:700; color:var(--t); }
.topbar-right { margin-left:auto; display:flex; gap:8px; align-items:center; }
.content { flex:1; overflow-y:auto; padding:18px 20px; scrollbar-width:thin; scrollbar-color:var(--surf3) transparent; }
.content::-webkit-scrollbar { width:4px; }
.content::-webkit-scrollbar-thumb { background:var(--surf4); border-radius:2px; }

/* ═══════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════ */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:16px; }
.card-sm { padding:11px 13px; }
.card+.card { margin-top:10px; }
.card-title { font-family:var(--font-h); font-size:13px; font-weight:700; color:var(--t); margin-bottom:12px; display:flex; align-items:center; gap:8px; letter-spacing:0.2px; }
.card-title small { font-size:11px; color:var(--t2); font-weight:400; margin-left:auto; font-family:var(--font); }
.section-label { font-size:9px; font-weight:800; color:var(--t3); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--line); }

/* ═══════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-bottom:16px; }
.stat-card { background:var(--surf2); border:1px solid var(--line); border-radius:var(--r2); padding:13px 15px; cursor:pointer; transition:var(--fast); position:relative; overflow:hidden; }
.stat-card:hover { border-color:var(--line2); }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--g),var(--g2)); opacity:0; transition:opacity 0.2s; }
.stat-card:hover::after { opacity:0.6; }
.stat-card-num { font-family:var(--font-h); font-size:24px; font-weight:800; color:var(--t); line-height:1; letter-spacing:-0.5px; }
.stat-card-lbl { font-size:11px; color:var(--t2); margin-top:5px; font-weight:500; }
.stat-card-sub { font-size:10px; color:var(--t3); margin-top:3px; }
.stat-card-delta { font-size:10px; font-weight:700; margin-top:4px; }
.delta-up { color:var(--g2); }
.delta-dn { color:var(--r); }

/* Dashboard 4-col */
.dash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
@media(max-width:768px){ .dash-stats { grid-template-columns:repeat(2,1fr); } }

/* ═══════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════ */
.table-wrap { border-radius:var(--r2); overflow:hidden; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:var(--surf2); color:var(--t3); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); }
td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.025); color:var(--t); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background 0.1s; }
tbody tr:hover td { background:rgba(255,255,255,0.022); }
.td-sm { color:var(--t2); font-size:11px; }

/* ═══════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; letter-spacing:0.2px; }
.badge-g { background:rgba(34,197,94,0.12); color:var(--g2); border:1px solid rgba(34,197,94,0.2); }
.badge-y { background:rgba(234,179,8,0.12); color:var(--y2); border:1px solid rgba(234,179,8,0.2); }
.badge-r { background:rgba(239,68,68,0.12); color:#fca5a5; border:1px solid rgba(239,68,68,0.2); }
.badge-b { background:rgba(59,130,246,0.12); color:#93c5fd; border:1px solid rgba(59,130,246,0.2); }
.badge-x { background:rgba(255,255,255,0.06); color:var(--t2); border:1px solid var(--line); }
.badge-p { background:rgba(139,92,246,0.12); color:#c4b5fd; border:1px solid rgba(139,92,246,0.2); }

/* Legacy aliases */
.badge-green  { background:rgba(34,197,94,0.12); color:var(--g2); border:1px solid rgba(34,197,94,0.2); }
.badge-yellow { background:rgba(234,179,8,0.12); color:var(--y2); border:1px solid rgba(234,179,8,0.2); }
.badge-red    { background:rgba(239,68,68,0.12); color:#fca5a5; border:1px solid rgba(239,68,68,0.2); }
.badge-blue   { background:rgba(59,130,246,0.12); color:#93c5fd; border:1px solid rgba(59,130,246,0.2); }
.badge-gray   { background:rgba(255,255,255,0.06); color:var(--t2); border:1px solid var(--line); }

/* ═══════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════ */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:800; flex-shrink:0; color:#fff; }
.avatar-sm { width:28px; height:28px; font-size:10px; }
.avatar-md { width:36px; height:36px; font-size:13px; }
.avatar-lg { width:46px; height:46px; font-size:17px; }

/* ═══════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════ */
.progress { height:4px; background:var(--surf3); border-radius:2px; overflow:hidden; }
.progress-bar { height:100%; border-radius:2px; transition:width 0.5s var(--ease); }

/* ═══════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════ */
.empty { text-align:center; padding:44px 20px; }
.empty-icon  { font-size:38px; margin-bottom:12px; opacity:0.3; }
.empty-title { font-family:var(--font-h); font-size:15px; font-weight:700; color:var(--t); margin-bottom:5px; }
.empty-text  { font-size:13px; color:var(--t2); line-height:1.6; }

/* ═══════════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════════ */
.skel {
  background:linear-gradient(90deg, var(--surf2) 25%, var(--surf3) 50%, var(--surf2) 75%);
  background-size:600px 100%;
  border-radius:5px;
  animation:shimmer 1.6s var(--ease) infinite;
}

/* ═══════════════════════════════════════════════════
   GRID / FLEX UTILS
   ═══════════════════════════════════════════════════ */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:600px){ .g2,.g3,.g4 { grid-template-columns:1fr; } }
.flex         { display:flex; }
.flex-c       { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px}
.mt-1{margin-top:6px} .mt-2{margin-top:12px} .mt-3{margin-top:20px}
.mb-1{margin-bottom:6px} .mb-2{margin-bottom:12px} .mb-3{margin-bottom:20px}

/* ═══════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:500; padding:16px; animation:fadeUp 0.12s var(--ease); }
.modal-box { background:var(--surface); border:1px solid var(--line2); border-radius:var(--r4); padding:22px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; animation:fadeUp 0.18s var(--ease); box-shadow:0 32px 64px rgba(0,0,0,0.7); scrollbar-width:thin; scrollbar-color:var(--surf3) transparent; }
.modal-box h3 { font-family:var(--font-h); font-size:16px; font-weight:800; color:var(--t); margin-bottom:16px; letter-spacing:-0.2px; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.modal-wide { max-width:560px; }

/* ═══════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════ */
#toast-container { position:fixed; top:12px; right:12px; z-index:1000; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:10px; background:var(--surf3); border:1px solid var(--line2); border-radius:var(--r2); padding:11px 13px; min-width:240px; max-width:320px; font-size:13px; color:var(--t); box-shadow:0 12px 32px rgba(0,0,0,0.6); animation:slideIn 0.22s var(--ease); pointer-events:all; }
.toast.success { border-left:3px solid var(--g2); }
.toast.error   { border-left:3px solid var(--r); }
.toast.info    { border-left:3px solid var(--b); }
.toast.warning { border-left:3px solid var(--y); }
.toast-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.toast-msg  { flex:1; line-height:1.5; }
.toast-hide { opacity:0; transform:translateX(10px); transition:all 0.25s var(--ease); }

/* ═══════════════════════════════════════════════════
   APPROVAL QUEUE
   ═══════════════════════════════════════════════════ */
.approval-item { display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--surf2); border:1px solid var(--line); border-radius:var(--r2); margin-bottom:8px; transition:var(--fast); }
.approval-item:hover { border-color:var(--line2); }
.approval-actions { margin-left:auto; display:flex; gap:6px; }
.player-row { cursor:pointer; }

/* ═══════════════════════════════════════════════════
   RPE SCALE
   ═══════════════════════════════════════════════════ */
.rpe-scale { display:flex; gap:4px; flex-wrap:wrap; margin:8px 0; }
.rpe-btn {
  flex:1; min-width:32px; height:48px;
  border-radius:var(--r1); border:1px solid var(--line);
  background:var(--surf2); color:var(--t2);
  font-family:var(--font-h); font-size:16px; font-weight:800;
  cursor:pointer; transition:var(--fast);
  display:flex; align-items:center; justify-content:center;
}
.rpe-btn:hover { transform:translateY(-2px); border-color:var(--line2); color:var(--t); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.rpe-btn.selected { color:#fff; border-color:transparent; transform:translateY(-3px) scale(1.04); box-shadow:0 6px 16px rgba(0,0,0,0.4); }
.rpe-1,.rpe-2   { background:rgba(34,197,94,0.16); }
.rpe-3,.rpe-4   { background:rgba(132,204,22,0.14); }
.rpe-5,.rpe-6   { background:rgba(234,179,8,0.16); }
.rpe-7,.rpe-8   { background:rgba(249,115,22,0.16); }
.rpe-9,.rpe-10  { background:rgba(239,68,68,0.16); }
.rpe-btn.selected.rpe-1,.rpe-btn.selected.rpe-2  { background:#15803d; }
.rpe-btn.selected.rpe-3,.rpe-btn.selected.rpe-4  { background:#4d7c0f; }
.rpe-btn.selected.rpe-5,.rpe-btn.selected.rpe-6  { background:#a16207; }
.rpe-btn.selected.rpe-7,.rpe-btn.selected.rpe-8  { background:#c2410c; }
.rpe-btn.selected.rpe-9,.rpe-btn.selected.rpe-10 { background:#b91c1c; }

/* ═══════════════════════════════════════════════════
   EVALUATION STARS
   ═══════════════════════════════════════════════════ */
.eval-stars { display:flex; gap:5px; }
.eval-star {
  flex:1; height:38px; border-radius:var(--r1);
  border:1px solid var(--line2); background:var(--surf2);
  color:var(--t2); font-family:var(--font-h); font-size:15px; font-weight:800;
  cursor:pointer; transition:var(--fast);
  display:flex; align-items:center; justify-content:center;
}
.eval-star:hover { transform:translateY(-1px); border-color:var(--y); color:var(--y); }
.eval-star.active { background:var(--y); border-color:var(--y); color:#000; transform:translateY(-1px) scale(1.04); }

/* ═══════════════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════════════ */
@media(max-width:768px) {
  .app-shell { grid-template-columns:1fr; grid-template-rows:1fr 58px; }
  .sidebar { display:none; }
  .mobile-nav { display:flex !important; }
  .content { padding:12px 14px; }
  .stats-grid,.dash-stats { grid-template-columns:repeat(2,1fr); gap:7px; }
  .topbar { padding:0 14px; height:46px; }
  .modal-box { border-radius:var(--r3); padding:18px; }
  .toast { max-width:calc(100vw - 24px); min-width:180px; }
}
@media(min-width:769px) { .mobile-nav { display:none !important; } }

.mobile-nav { background:var(--surface); border-top:1px solid var(--line); display:none; align-items:center; justify-content:space-around; padding:4px 4px 8px; }
.mn-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 8px; border-radius:var(--r1); font-size:9px; font-weight:800; color:var(--t3); cursor:pointer; border:none; background:none; text-transform:uppercase; letter-spacing:0.8px; transition:var(--fast); flex:1; max-width:76px; }
.mn-btn .mn-icon { font-size:21px; line-height:1; }
.mn-btn.active { color:var(--g2); background:var(--gbg); }

/* ═══════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════ */
.divider { height:1px; background:var(--line); margin:14px 0; }
.text-sm { font-size:12px; } .text-xs { font-size:10px; }
.text-muted { color:var(--t2); } .text-green { color:var(--g2); }
.text-red { color:var(--r); } .text-accent { color:var(--y); } .text-blue { color:#93c5fd; }
.font-bold { font-weight:700; } .font-h { font-family:var(--font-h); } .w-full { width:100%; }
.info-box { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:var(--r2); font-size:13px; line-height:1.6; }
.info-box.green  { background:var(--gbg); border:1px solid rgba(34,197,94,0.2); color:var(--g2); }
.info-box.yellow { background:var(--ybg); border:1px solid rgba(234,179,8,0.2); color:var(--y); }
.info-box.red    { background:var(--rbg); border:1px solid rgba(239,68,68,0.2); color:#fca5a5; }
.row-today td { background:rgba(234,179,8,0.035); }
.row-today td:first-child { border-left:2px solid var(--y); }