:root{
  --green:#3FB27F; --green-dk:#2E9166; --green-lt:#E7F6EF;
  --orange:#F2A93B; --orange-dk:#D98F1F;
  --dark:#0A0F0D; --dark2:#121815;
  --bg:#F6F7F8; --card:#FFFFFF; --border:#E4E7EB;
  --text:#12161A; --muted:#6B7280; --muted-lt:#9CA3AF;
  --red:#DC2626; --red-lt:#FEE2E2; --blue:#2563EB; --blue-lt:#DBEAFE;
  font-family:'Inter',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}

/* ---------- LANDING ---------- */
#page-landing{ background:var(--dark); min-height:100vh; color:#fff; }
.land-nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 40px; }
.land-nav .brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px; letter-spacing:0.5px; }
.land-nav .brand .logo{ width:34px; height:34px; background:var(--green); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.land-nav .right{ display:flex; align-items:center; gap:18px; }
.lang-pill{ display:flex; align-items:center; gap:6px; background:#1A211D; border:1px solid #2A332D; border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; color:#C9D1CB; }
.land-nav .link-btn{ font-size:14px; font-weight:600; color:#D5DAD6; cursor:pointer; }
.btn-getstarted{ background:var(--green); color:#06140D; font-weight:700; font-size:14px; padding:10px 20px; border-radius:8px; border:none; cursor:pointer; }
.hero{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; min-height:calc(100vh - 84px); padding:0 40px; gap:40px; }
.hero-left h1{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:64px; line-height:0.98; letter-spacing:-1px; text-transform:uppercase; }
.hero-left h1 .g{ color:var(--green); }
.hero-left h1 .o{ color:var(--orange); text-shadow:0 0 30px rgba(242,169,59,0.5); }
.hero-left p{ margin-top:24px; font-size:17px; color:#AEB6B0; max-width:480px; line-height:1.6; }
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.cta-box{ border-radius:12px; padding:16px 24px; cursor:pointer; }
.cta-athlete{ background:rgba(63,178,127,0.12); border:1.5px solid var(--green); }
.cta-athlete .l1{ font-size:11px; font-weight:700; color:#8FD9B4; text-transform:uppercase; letter-spacing:1px; }
.cta-athlete .l2{ font-size:16px; font-weight:800; color:var(--green); margin-top:4px; }
.cta-club{ background:rgba(242,169,59,0.10); border:1.5px solid var(--orange); }
.cta-club .l1{ font-size:11px; font-weight:700; color:#F0CD8E; text-transform:uppercase; letter-spacing:1px; }
.cta-club .l2{ font-size:16px; font-weight:800; color:var(--orange); margin-top:4px; }
.hero-stats{ display:flex; gap:44px; margin-top:56px; padding-top:28px; border-top:1px solid #232B26; }
.hero-stats .num{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:30px; }
.hero-stats .num.green{ color:var(--green); } .hero-stats .num.orange{ color:var(--orange); }
.hero-stats .lbl{ font-size:11px; color:#8B948E; text-transform:uppercase; letter-spacing:0.8px; margin-top:2px; }
.hero-right{ position:relative; border-radius:20px; overflow:hidden; min-height:420px;
  background:radial-gradient(circle at 30% 20%, #1B3B2C 0%, #0A0F0D 55%), linear-gradient(160deg,#132018,#0A0F0D 70%);
  display:flex; align-items:center; justify-content:center; border:1px solid #1E2620; }
.hero-right .orb{ position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(63,178,127,0.35), transparent 70%); filter:blur(10px); }
@media(max-width:900px){ .hero{ grid-template-columns:1fr; } .hero-left h1{ font-size:44px; } }

/* ---------- LOGIN ---------- */
#page-login{ min-height:100vh; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:40px; width:420px; max-width:100%; box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.login-card h2{ font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700; }
.role-toggle{ display:flex; gap:8px; margin:20px 0 22px; background:#F1F2F4; border-radius:10px; padding:4px; }
.role-toggle button{ flex:1; border:none; background:transparent; padding:9px; border-radius:8px; font-weight:600; font-size:13px; color:var(--muted); }
.role-toggle button.active{ background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.mode-toggle{ display:flex; gap:18px; margin-bottom:18px; border-bottom:1px solid var(--border); }
.mode-toggle button{ border:none; background:transparent; padding:8px 2px; font-weight:600; font-size:13.5px; color:var(--muted-lt); border-bottom:2px solid transparent; margin-bottom:-1px; }
.mode-toggle button.active{ color:var(--green-dk); border-bottom-color:var(--green); }
.field-group{ margin-bottom:14px; }
.field-group label{ display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.field-group input, .field-group select{ width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; }
.btn-primary{ width:100%; background:var(--green); color:#06140D; border:none; padding:12px; border-radius:9px; font-weight:700; font-size:14px; margin-top:6px; }
.btn-primary:disabled{ opacity:0.6; cursor:default; }
.form-error{ background:var(--red-lt); color:var(--red); font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:8px; margin-bottom:14px; }

/* ---------- APP SHELL ---------- */
#page-app{ display:flex; min-height:100vh; }
.sidebar{ width:236px; background:#fff; border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh; flex-shrink:0; }
.sidebar .brand{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:18px; padding:6px 10px 22px; }
.sidebar .brand .logo{ width:30px; height:30px; background:var(--green); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.navitem{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; font-size:14px; font-weight:600; color:#4B5563; cursor:pointer; margin-bottom:2px; position:relative; }
.navitem:hover{ background:#F5F6F7; }
.navitem.active{ background:var(--green-lt); color:var(--green-dk); }
.navitem .ic{ font-size:16px; width:18px; text-align:center; }
.nav-badge{ margin-left:auto; background:var(--orange); color:#fff; font-size:10.5px; font-weight:700; border-radius:10px; padding:1px 6px; }
.sidebar-bottom{ margin-top:auto; }
.sidebar-lang{ display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:13px; color:var(--muted); cursor:pointer; border-radius:9px; }
.sidebar-lang:hover{ background:#F5F6F7; }
.sidebar-signout{ display:flex; align-items:center; gap:9px; padding:10px 12px; font-size:13px; color:#9CA3AF; cursor:pointer; }
.sidebar-signout:hover{ color:#374151; }
.main{ flex:1; padding:30px 36px; max-width:100%; overflow-x:hidden; }
.page-head{ margin-bottom:22px; }
.page-head h1{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; }
.page-head p{ color:var(--muted); font-size:13.5px; margin-top:3px; }
.content-grid{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
@media(max-width:1000px){ .content-grid{ grid-template-columns:1fr; } .sidebar{ width:76px; } .sidebar .brand span:not(.logo), .navitem span:not(.ic), .sidebar-lang span, .sidebar-signout span{ display:none; } }

/* ---------- job cards ---------- */
.jcard{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:14px; }
.jcard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.jcard-org{ display:flex; gap:12px; }
.org-av{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.jcard-title{ font-size:16px; font-weight:700; }
.jcard-orgname{ font-size:13px; color:var(--muted); margin-top:1px; }
.match-pill{ display:flex; align-items:center; gap:5px; background:#F1F2F4; padding:5px 11px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.match-pill.hi{ background:#E7F6EF; color:var(--green-dk); }
.match-pill.mid{ background:#FEF3E2; color:#B8720E; }
.match-pill.lo{ background:#F1F2F4; color:#6B7280; }
.match-pill.reject{ background:#F1F2F4; color:#9CA3AF; font-weight:600; }
.featured-pill{ background:#FEF3E2; color:#B8720E; font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; margin-right:6px; }
.jcard-tags{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.jtag{ background:#F5F6F7; border-radius:6px; padding:4px 9px; font-size:12px; color:#4B5563; display:flex; align-items:center; gap:4px; }
.jtag.sport{ background:#F1F2F4; font-weight:600; color:#374151; }
.jcard-desc{ font-size:13.5px; color:#4B5563; margin-top:12px; line-height:1.55; }
.checklist{ display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:14px; }
.chk-item{ font-size:12px; display:flex; align-items:center; gap:5px; color:#9CA3AF; }
.chk-item.on{ color:var(--green-dk); font-weight:600; }
.jcard-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #F0F1F2; flex-wrap:wrap; gap:8px; }
.jcard-foot .ago{ font-size:12px; color:var(--muted-lt); }
.jcard-foot .actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{ width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); }
.btn-details{ background:#fff; border:1px solid var(--border); color:var(--text); font-weight:600; font-size:13px; padding:8px 14px; border-radius:8px; }
.btn-apply{ background:var(--green); color:#06140D; font-weight:700; font-size:13px; padding:8px 16px; border-radius:8px; border:none; }
.btn-applied{ background:var(--green-lt); color:var(--green-dk); font-weight:700; font-size:13px; padding:8px 16px; border-radius:8px; border:none; }
.btn-feature{ background:#fff; border:1.5px solid var(--orange); color:var(--orange-dk); font-weight:700; font-size:12.5px; padding:7px 13px; border-radius:8px; }
.btn-feature.on{ background:var(--orange); color:#fff; }

/* ---------- right sidebar cards ---------- */
.side-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin-bottom:16px; }
.side-card h3{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.progress-track{ background:#EEF0F1; height:8px; border-radius:5px; overflow:hidden; }
.progress-fill{ background:var(--green); height:100%; border-radius:5px; }
.progress-pct{ font-size:12px; font-weight:700; float:right; margin-top:-20px; }
.profile-complete-note{ font-size:12px; color:var(--green-dk); font-weight:600; margin-top:10px; }
.side-btn{ width:100%; background:#F5F6F7; border:1px solid var(--border); padding:9px; border-radius:8px; font-weight:600; font-size:12.5px; margin-top:10px; }
.top-match-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #F3F4F5; }
.top-match-row:last-of-type{ border-bottom:none; }
.tm-av{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.tm-title{ font-size:12.5px; font-weight:700; }
.tm-org{ font-size:11px; color:var(--muted); }
.tm-pct{ font-size:11px; font-weight:700; color:var(--green-dk); background:var(--green-lt); padding:3px 8px; border-radius:10px; margin-left:auto; }
.view-all-link{ font-size:12.5px; font-weight:700; color:var(--green-dk); margin-top:8px; display:block; background:none; border:none; padding:0; text-align:left; }
.event-row{ display:flex; gap:10px; padding:8px 0; }
.event-date{ background:#FEF3E2; color:#B8720E; border-radius:8px; padding:6px 8px; text-align:center; font-size:10px; font-weight:800; line-height:1.2; width:38px; flex-shrink:0; }
.event-date .mo{ text-transform:uppercase; }
.event-title{ font-size:12.5px; font-weight:700; }
.event-loc{ font-size:11px; color:var(--muted); }

/* ---------- find jobs search bar ---------- */
.search-row{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.search-box{ flex:1; min-width:200px; display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:11px 14px; }
.search-box input{ border:none; outline:none; flex:1; font-size:14px; }
.filter-sel{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-size:13.5px; min-width:160px; }

/* ---------- pill selectors (profile page) ---------- */
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.pill-opt{ background:#F5F6F7; border:1.5px solid transparent; border-radius:9px; padding:10px 16px; font-size:13.5px; font-weight:600; color:#374151; }
.pill-opt.sel{ background:var(--green-lt); border-color:var(--green); color:var(--green-dk); }
.form-section{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:20px; }
.form-section h3{ font-size:15px; font-weight:700; margin-bottom:16px; }
.form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:700px){ .form-row2{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:12.5px; font-weight:600; color:#374151; margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; }
.radio-row{ display:flex; gap:22px; margin-top:4px; flex-wrap:wrap; }
.radio-row label{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; }

/* ---------- applications / messages / table ---------- */
.app-row{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:10px; }
.status-pill{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.status-actions{ display:flex; gap:6px; }
.status-actions button{ font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--border); background:#fff; }
.msgs-shell{ display:grid; grid-template-columns:300px 1fr; gap:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff; height:600px; }
@media(max-width:800px){ .msgs-shell{ grid-template-columns:1fr; height:auto; } .thread-list{ max-height:240px; } }
.thread-list{ border-right:1px solid var(--border); overflow-y:auto; }
.thread-item{ padding:14px 16px; border-bottom:1px solid #F3F4F5; cursor:pointer; }
.thread-item:hover, .thread-item.active{ background:#F8FAF9; }
.thread-item .tname{ font-size:13.5px; font-weight:700; }
.thread-item .tjob{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.thread-item .tprev{ font-size:12px; color:var(--muted-lt); margin-top:4px; }
.thread-panel{ display:flex; flex-direction:column; height:100%; }
.thread-header{ padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; font-size:14px; }
.thread-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.bubble{ max-width:65%; padding:9px 13px; border-radius:12px; font-size:13.5px; line-height:1.4; }
.bubble.me{ background:var(--green); color:#06140D; align-self:flex-end; border-bottom-right-radius:3px; }
.bubble.them{ background:#F1F2F4; align-self:flex-start; border-bottom-left-radius:3px; }
.thread-input{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--border); }
.thread-input input{ flex:1; border:1.5px solid var(--border); border-radius:9px; padding:10px 14px; font-size:13.5px; }
.thread-input button{ background:var(--green); color:#06140D; border:none; padding:0 18px; border-radius:9px; font-weight:700; font-size:13px; }

/* ---------- event card ---------- */
.evcard{ background:linear-gradient(135deg,#FFF9F0,#FEF3E2); border:1.5px dashed var(--orange); border-radius:14px; padding:18px 20px; margin-bottom:14px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.evcard .ev-date{ background:#fff; border:1px solid var(--orange); color:#B8720E; border-radius:10px; padding:8px 10px; text-align:center; font-weight:800; line-height:1.15; flex-shrink:0; min-width:52px; }
.evcard .ev-date .mo{ font-size:10px; text-transform:uppercase; }
.evcard .ev-date .day{ font-size:17px; }
.evcard .ev-body{ flex:1; }
.evcard .ev-kicker{ font-size:10.5px; font-weight:800; color:var(--orange-dk); text-transform:uppercase; letter-spacing:0.6px; }
.evcard .ev-title{ font-size:14.5px; font-weight:700; margin-top:2px; }
.evcard .ev-loc{ font-size:12px; color:var(--muted); margin-top:1px; }
.evcard .ev-actions{ display:flex; gap:8px; flex-shrink:0; }
.btn-ev{ font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:8px; border:1.5px solid var(--orange); background:#fff; color:var(--orange-dk); }
.btn-ev.on{ background:var(--orange); color:#fff; }

/* ---------- notifications ---------- */
.notif-row{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.notif-row.unread{ border-left:3px solid var(--green); background:#FBFFFD; }
.notif-text{ font-size:13.5px; }
.notif-time{ font-size:11px; color:var(--muted-lt); margin-top:3px; }

/* ---------- job detail modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,15,13,0.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:24px; }
.modal-box{ background:#fff; border-radius:16px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:0; }
.modal-head{ padding:24px 26px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.modal-close{ background:#F5F6F7; border:none; width:30px; height:30px; border-radius:8px; font-size:15px; cursor:pointer; color:var(--muted); flex-shrink:0; }
.modal-body{ padding:20px 26px 26px; }
.modal-sec{ margin-top:18px; }
.modal-sec h4{ font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; }
.req-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding:5px 0; }
.req-row .dot{ width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.req-row .dot.on{ background:var(--green-lt); color:var(--green-dk); }
.req-row .dot.off{ background:#F1F2F4; color:#9CA3AF; }

/* ---------- searchable select ---------- */
.ssel{ position:relative; }
.ssel input{ width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; }
.ssel-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:10px; max-height:260px; overflow-y:auto; box-shadow:0 12px 28px rgba(0,0,0,0.12); z-index:50; display:none; }
.ssel-list.open{ display:block; }
.ssel-opt{ padding:9px 14px; font-size:13.5px; cursor:pointer; }
.ssel-opt:hover, .ssel-opt.hi{ background:var(--green-lt); }
.ssel-opt .code{ color:var(--muted-lt); font-size:11.5px; margin-right:6px; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; }
.stat-card .num{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:800; }
.stat-card .lbl{ font-size:12px; color:var(--muted); margin-top:4px; }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); font-size:14px; }
.spinner-state{ text-align:center; padding:60px 20px; color:var(--muted-lt); font-size:13px; }
.toast{ position:fixed; bottom:20px; left:20px; background:#1F2937; color:#fff; padding:12px 18px; border-radius:9px; font-size:13px; z-index:999; }
.toast.error{ background:var(--red); }