/* ── Variables ── */
:root {
  --primary: #F4637B;
  --primary-dark: #d94d6a;
  --bg: #111111;
  --bg-card: #1a1a1a;
  --bg-card2: #222222;
  --border: #2a2a2a;
  --text: #ffffff;
  --muted: #9ca3af;
  --font-display: 'Bebas Neue', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ── Navbar ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(17,17,17,0.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); transition:background 0.3s; }
.navbar.scrolled { background:rgba(17,17,17,0.99); }
.nav-inner { max-width:1300px; margin:0 auto; padding:12px 32px; display:flex; align-items:center; gap:32px; }
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-mark { width:44px; height:44px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-cond); font-size:16px; font-weight:800; color:#fff; letter-spacing:-1px; }
.logo-text { display:flex; align-items:center; gap:0; font-family:var(--font-cond); font-size:20px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }
.logo-text .l1 { color:#ffffff; }
.logo-text .l2 { color:var(--primary); }
.nav-links { display:flex; list-style:none; gap:32px; margin-left:auto; }
.nav-links a { font-family:var(--font-body); font-size:15px; font-weight:500; color:#cccccc; transition:color 0.2s; position:relative; padding-bottom:4px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--primary); transform:scaleX(0); transition:transform 0.2s; }
.nav-links a:hover, .nav-links a.active { color:#ffffff; }
.nav-links a.active::after { transform:scaleX(1); }
.nav-cta { background:var(--primary); color:#fff; padding:10px 24px; font-family:var(--font-body); font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:6px; transition:background 0.2s; flex-shrink:0; border:2px solid var(--primary); }
.nav-cta:hover { background:var(--primary-dark); border-color:var(--primary-dark); }
.hamburger { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--text); margin-left:auto; }
.mobile-menu { display:none; flex-direction:column; background:var(--bg-card); border-top:1px solid var(--border); }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:14px 24px; font-size:15px; border-bottom:1px solid var(--border); color:#ccc; }
.mobile-menu a:hover { color:var(--primary); }

/* ── Buttons ── */
.btn-primary { display:inline-block; background:var(--primary); color:#fff; padding:16px 36px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; border:2px solid var(--primary); transition:all 0.2s; cursor:pointer; }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-2px); }
.btn-primary.large { padding:18px 48px; font-size:16px; }
.btn-ghost { display:inline-block; background:transparent; color:#fff; padding:16px 36px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; border:2px solid #fff; transition:all 0.2s; }
.btn-ghost:hover { background:#fff; color:#111; transform:translateY(-2px); }
.btn-dark { display:inline-block; background:#111; color:#fff; padding:16px 36px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; border:2px solid #111; transition:all 0.2s; }
.btn-dark:hover { background:#000; transform:translateY(-2px); }
.btn-outline { display:inline-block; background:transparent; color:var(--primary); padding:10px 24px; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; border:2px solid var(--primary); transition:all 0.2s; cursor:pointer; }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-danger { background:#ef4444; color:#fff; border:none; padding:8px 16px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border-radius:4px; transition:background 0.2s; }
.btn-danger:hover { background:#dc2626; }

/* ── Hero ── */
.hero { min-height:100vh; background:#111111; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:120px 24px 80px; text-align:center; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(255,107,107,0.08) 0%, transparent 70%); pointer-events:none; }
.hero-overlay { position:absolute; inset:0; opacity:0.03; background-image:repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(255,255,255,0.3) 40px,rgba(255,255,255,0.3) 41px),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(255,255,255,0.3) 40px,rgba(255,255,255,0.3) 41px); }
.hero-content { position:relative; z-index:1; max-width:1000px; }
.hero-eyebrow { display:inline-block; background:rgba(255,107,107,0.1); color:var(--primary); border:1px solid rgba(255,107,107,0.3); font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; padding:6px 18px; border-radius:20px; margin-bottom:32px; animation:fadeUp 0.6s ease forwards; }
.hero-title { font-family:var(--font-display); font-size:clamp(72px,13vw,170px); line-height:0.9; color:var(--text); margin-bottom:28px; animation:fadeUp 0.6s 0.1s ease both; letter-spacing:2px; }
.hero-title .red { color:var(--primary); }
.hero-sub { font-size:19px; color:var(--muted); max-width:560px; margin:0 auto 44px; line-height:1.7; animation:fadeUp 0.6s 0.2s ease both; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeUp 0.6s 0.3s ease both; }
.hero-stats { position:relative; z-index:1; display:flex; align-items:center; gap:56px; margin-top:72px; background:rgba(255,255,255,0.04); border:1px solid var(--border); padding:24px 56px; animation:fadeUp 0.6s 0.4s ease both; }
.hstat { text-align:center; }
.hstat-num { display:block; font-family:var(--font-display); font-size:44px; color:var(--primary); line-height:1; }
.hstat-label { display:block; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.hstat-div { width:1px; height:48px; background:var(--border); }

/* ── Sections ── */
.section { padding:88px 0; }
.bg-card { background:var(--bg-card); }
.container { max-width:1200px; margin:0 auto; padding:0 32px; }
.eyebrow { font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--primary); margin-bottom:12px; display:block; }
.section-title { font-family:var(--font-display); font-size:clamp(40px,5vw,64px); line-height:1; margin-bottom:24px; color:var(--text); }
.section-title.light { color:#111; }
.sec-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:16px; }
.sec-link { font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--primary); }

/* ── About ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-left p { color:var(--muted); line-height:1.8; font-size:16px; margin-bottom:16px; }
.about-right { display:grid; gap:16px; }
.about-card { background:var(--bg-card2); border:1px solid var(--border); border-left:4px solid var(--primary); padding:22px 24px; display:flex; align-items:flex-start; gap:16px; }
.ac-icon { font-size:28px; flex-shrink:0; }
.about-card h3 { font-family:var(--font-body); font-size:17px; font-weight:700; color:var(--text); margin-bottom:4px; }
.about-card p { font-size:14px; color:var(--muted); line-height:1.6; }

/* ── News ── */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:border-color 0.2s,transform 0.2s; }
.news-card:hover { border-color:var(--primary); transform:translateY(-4px); }
.news-img { height:190px; overflow:hidden; position:relative; background:var(--border); }
.news-img img { width:100%; height:100%; object-fit:cover; }
.news-img-placeholder { display:flex; align-items:center; justify-content:center; height:100%; font-size:48px; }
.news-cat { position:absolute; top:12px; left:12px; background:var(--primary); color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; }
.news-body { padding:22px; }
.news-date { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--primary); margin-bottom:8px; }
.news-body h3 { font-family:var(--font-display); font-size:24px; color:var(--text); margin-bottom:8px; line-height:1.1; }
.news-body p { font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.link-arrow { font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--primary); }
.news-skeleton { height:320px; background:var(--bg-card); border:1px solid var(--border); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Squad preview ── */
.squad-preview-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.squad-mini-card { background:var(--bg-card); border:1px solid var(--border); border-top:3px solid var(--primary); padding:24px 16px; text-align:center; transition:all 0.2s; position:relative; overflow:hidden; }
.squad-mini-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 8px 32px rgba(255,107,107,0.15); }
.smc-photo { width:80px; height:80px; border-radius:50%; background:var(--bg-card2); margin:0 auto 14px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:32px; border:3px solid var(--primary); }
.smc-photo img { width:100%; height:100%; object-fit:cover; }
.smc-num { position:absolute; top:10px; right:14px; font-family:var(--font-display); font-size:28px; color:var(--primary); opacity:0.2; line-height:1; }
.squad-mini-card h4 { font-family:var(--font-display); font-size:20px; color:var(--text); margin-bottom:4px; }
.squad-mini-card span { font-size:13px; color:var(--muted); }

/* ── Fixtures ── */
.fixture-row { display:flex; align-items:center; gap:24px; padding:20px 28px; background:var(--bg-card); border:1px solid var(--border); margin-bottom:12px; transition:all 0.2s; flex-wrap:wrap; }
.fixture-row:hover { border-color:var(--primary); }
.fix-date { display:flex; flex-direction:column; align-items:center; min-width:52px; border-right:1px solid var(--border); padding-right:24px; }
.fix-day { font-family:var(--font-display); font-size:36px; color:var(--primary); line-height:1; }
.fix-month { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.fix-teams { display:flex; align-items:center; gap:14px; flex:1; }
.fix-team { font-family:var(--font-display); font-size:22px; color:var(--text); letter-spacing:1px; }
.fix-team.us { color:var(--primary); }
.fix-vs { font-family:var(--font-display); font-size:18px; color:var(--border); }
.fix-meta { font-size:13px; color:var(--muted); }
.fix-badge { padding:5px 16px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:20px; }
.fix-badge.upcoming { background:rgba(255,107,107,0.12); color:var(--primary); }
.fix-badge.win { background:rgba(34,197,94,0.12); color:#22c55e; }
.fix-badge.loss { background:rgba(239,68,68,0.12); color:#ef4444; }
.fix-badge.draw { background:rgba(245,158,11,0.12); color:#f59e0b; }

/* ── Gallery ── */
.gallery-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery-thumb { position:relative; aspect-ratio:1; overflow:hidden; background:var(--bg-card); cursor:pointer; border:1px solid var(--border); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.gallery-thumb:hover img { transform:scale(1.06); }
.gallery-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.85)); padding:20px 12px 10px; font-size:13px; font-weight:600; opacity:0; transition:opacity 0.2s; }
.gallery-thumb:hover .gallery-caption { opacity:1; }
.gallery-fallback { display:flex; align-items:center; justify-content:center; height:100%; font-size:36px; }

/* ── CTA — matches the big salmon pink section in screenshot ── */
.cta-section { background:var(--primary); padding:100px 0; text-align:center; }
.cta-inner { display:flex; flex-direction:column; align-items:center; }
.cta-section .eyebrow { color:rgba(0,0,0,0.5); }
.cta-section .section-title { color:#111111; font-size:clamp(48px,7vw,96px); }
.cta-sub { color:rgba(0,0,0,0.65); font-size:19px; margin-bottom:40px; max-width:560px; line-height:1.7; }
.cta-section .btn-dark { background:#111; color:#fff; font-size:16px; padding:20px 56px; letter-spacing:2px; border-radius:4px; }
.cta-section .btn-dark:hover { background:#000; }

/* ── Page Hero ── */
.page-hero { background:#111111; padding:140px 32px 64px; text-align:center; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, rgba(255,107,107,0.07) 0%, transparent 65%); }
.page-hero .eyebrow { display:block; margin-bottom:12px; }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(64px,12vw,120px); line-height:1; color:var(--text); margin-bottom:16px; }
.page-hero p { color:var(--muted); font-size:18px; max-width:500px; margin:0 auto; line-height:1.7; }

/* ── Forms ── */
.form-group { margin-bottom:22px; }
.form-group label { display:block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:14px 16px; background:var(--bg); border:1px solid var(--border); font-family:var(--font-body); font-size:15px; color:var(--text); outline:none; transition:border-color 0.2s; border-radius:4px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--primary); }
.form-group textarea { min-height:100px; resize:vertical; }
.form-group select option { background:var(--bg-card); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ── Admin ── */
.admin-layout { display:flex; min-height:100vh; padding-top:73px; }
.admin-sidebar { width:210px; background:var(--bg-card); border-right:1px solid var(--border); flex-shrink:0; position:sticky; top:73px; height:calc(100vh - 73px); overflow-y:auto; }
.admin-sidebar a { display:flex; align-items:center; gap:10px; padding:13px 20px; font-size:14px; font-weight:600; color:var(--muted); transition:all 0.2s; border-left:3px solid transparent; }
.admin-sidebar a:hover, .admin-sidebar a.active { color:var(--primary); border-left-color:var(--primary); background:rgba(255,107,107,0.05); }
.admin-content { flex:1; padding:40px; overflow-y:auto; }
.admin-header { background:var(--bg-card); border-bottom:1px solid var(--border); padding:16px 28px; display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; right:0; z-index:999; }
.admin-header h1 { font-family:var(--font-display); font-size:22px; letter-spacing:1px; }
.admin-header h1 span { color:var(--primary); }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-table { width:100%; border-collapse:collapse; margin-top:20px; }
.admin-table th { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--border); text-align:left; }
.admin-table td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text); }
.admin-table tr:hover td { background:rgba(255,255,255,0.02); }
.admin-form { background:var(--bg-card); border:1px solid var(--border); padding:28px; margin-bottom:28px; border-radius:4px; }
.admin-form h3 { font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--primary); margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:12px; }

/* ── Roster ── */
.roster-filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn { padding:9px 22px; border-radius:24px; border:1px solid var(--border); background:transparent; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; color:var(--muted); transition:all 0.2s; }
.filter-btn.active, .filter-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(255,107,107,0.08); }
.roster-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.player-card { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:all 0.2s; cursor:pointer; }
.player-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 12px 40px rgba(255,107,107,0.15); }
.pc-photo { height:260px; background:var(--bg-card2); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:72px; }
.pc-photo img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.player-card:hover .pc-photo img { transform:scale(1.05); }
.pc-num { position:absolute; top:12px; right:12px; font-family:var(--font-display); font-size:44px; color:#fff; opacity:0.12; line-height:1; }
.pc-role { position:absolute; bottom:12px; left:12px; background:var(--primary); color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 12px; }
.pc-captain { position:absolute; top:12px; left:12px; background:#f5a623; color:#000; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; }
.pc-body { padding:20px; border-top:3px solid var(--primary); }
.pc-body h3 { font-family:var(--font-display); font-size:24px; color:var(--text); margin-bottom:12px; letter-spacing:1px; }
.pc-stats { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; margin-top:8px; }

/* ── Community ── */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-card { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:all 0.2s; }
.gallery-card:hover { border-color:var(--primary); transform:translateY(-4px); }
.gc-thumb { height:210px; overflow:hidden; background:var(--bg-card2); display:flex; align-items:center; justify-content:center; font-size:48px; }
.gc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.gallery-card:hover .gc-thumb img { transform:scale(1.05); }
.gc-body { padding:16px; }
.gc-body h4 { font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }
.gc-meta { font-size:12px; color:var(--muted); }

/* ── Membership form ── */
.membership-form { background:var(--bg-card); border:1px solid var(--border); max-width:720px; margin:0 auto; overflow:hidden; border-radius:4px; }
.mf-header { background:var(--primary); padding:36px 44px; }
.mf-header h2 { font-family:var(--font-display); font-size:48px; color:#fff; margin-bottom:8px; }
.mf-header p { color:rgba(255,255,255,0.85); font-size:16px; }
.mf-body { padding:44px; }
.exp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.exp-opt { border:1px solid var(--border); padding:18px 12px; text-align:center; cursor:pointer; transition:all 0.2s; border-radius:4px; }
.exp-opt:hover, .exp-opt.selected { border-color:var(--primary); background:rgba(255,107,107,0.08); }
.exp-opt .ei { font-size:28px; margin-bottom:8px; }
.exp-opt .el { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.exp-opt.selected .el { color:var(--primary); }

/* ── Footer ── */
.footer { background:var(--bg-card); border-top:1px solid var(--border); padding:64px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid var(--border); }
.footer-links h4 { font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-bottom:18px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:var(--muted); transition:color 0.2s; }
.footer-links a:hover { color:var(--primary); }
.footer-bottom { text-align:center; padding:22px 0; font-size:13px; color:var(--muted); }

/* ── Utils ── */
.empty-msg { color:var(--muted); font-size:16px; padding:48px; text-align:center; border:1px dashed var(--border); }
.toast { position:fixed; bottom:24px; right:24px; background:var(--bg-card); border:1px solid var(--border); border-left:4px solid var(--primary); padding:16px 24px; font-size:15px; font-weight:600; z-index:9999; animation:slideIn 0.3s ease; box-shadow:0 8px 32px rgba(0,0,0,0.5); border-radius:4px; }
.toast.error { border-left-color:#ef4444; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── Admin panel full ── */
body.admin-body { padding-top:0; }
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-box { background:var(--bg-card); border:1px solid var(--border); padding:52px; width:100%; max-width:440px; text-align:center; border-radius:4px; }
.login-box h1 { font-family:var(--font-display); font-size:56px; color:var(--primary); margin-bottom:8px; }
.login-box p { color:var(--muted); margin-bottom:36px; font-size:14px; }
.login-input { width:100%; padding:16px; background:var(--bg); border:1px solid var(--border); font-size:20px; color:var(--text); text-align:center; letter-spacing:6px; margin-bottom:16px; outline:none; border-radius:4px; }
.login-input:focus { border-color:var(--primary); }
.admin-wrap { display:none; }
.admin-wrap.show { display:flex; min-height:100vh; }
.sidebar { width:230px; background:var(--bg-card); border-right:1px solid var(--border); flex-shrink:0; padding-top:16px; display:flex; flex-direction:column; }
.sidebar-logo { padding:16px 20px 24px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:13px 20px; font-size:14px; font-weight:600; color:var(--muted); border-left:3px solid transparent; transition:all 0.2s; cursor:pointer; }
.sidebar a:hover, .sidebar a.active { color:var(--primary); border-left-color:var(--primary); background:rgba(255,107,107,0.06); }
.main { flex:1; padding:44px; overflow-y:auto; background:var(--bg); }
.main h2 { font-family:var(--font-display); font-size:44px; color:var(--text); margin-bottom:8px; }
.main .sub { color:var(--muted); font-size:15px; margin-bottom:36px; }
.panel { display:none; }
.panel.active { display:block; }
.add-form { background:var(--bg-card); border:1px solid var(--border); padding:28px; margin-bottom:32px; border-radius:4px; }
.add-form h3 { font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--primary); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.item-list { display:flex; flex-direction:column; gap:10px; }
.item-row { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:var(--bg-card); border:1px solid var(--border); gap:16px; border-radius:4px; transition:border-color 0.2s; }
.item-row:hover { border-color:var(--primary); }
.item-info h4 { font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }
.item-info span { font-size:13px; color:var(--muted); }
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.badge-coral { background:rgba(255,107,107,0.15); color:var(--primary); }
.badge-green { background:rgba(34,197,94,0.15); color:#22c55e; }
.badge-red { background:rgba(239,68,68,0.15); color:#ef4444; }
.badge-blue { background:rgba(59,130,246,0.15); color:#3b82f6; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:44px; }
.stat-box { background:var(--bg-card); border:1px solid var(--border); padding:24px; text-align:center; border-radius:4px; border-top:3px solid var(--primary); }
.stat-box .sn { font-family:var(--font-display); font-size:44px; color:var(--primary); }
.stat-box .sl { font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.member-card { background:var(--bg-card); border:1px solid var(--border); padding:22px; margin-bottom:12px; border-radius:4px; }
.member-card h4 { font-size:18px; font-weight:700; color:var(--text); margin-bottom:10px; }
.member-card .md { display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.member-card .msg { margin-top:12px; font-size:14px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; font-style:italic; }

/* ── Responsive ── */
@media(max-width:960px) {
  .nav-links,.nav-cta{display:none}
  .hamburger{display:block}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .news-grid{grid-template-columns:1fr}
  .squad-preview-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-preview{grid-template-columns:repeat(2,1fr)}
  .roster-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .hero-stats{gap:24px;padding:16px 24px}
  .form-row{grid-template-columns:1fr}
  .sidebar{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px) {
  .squad-preview-grid{grid-template-columns:repeat(2,1fr)}
  .roster-grid{grid-template-columns:1fr}
  .exp-grid{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
}

/* ── Upload field ── */
.upload-field { display:flex; flex-direction:column; gap:8px; }
.upload-row { display:flex; gap:10px; align-items:center; }
.upload-btn { background:var(--primary); color:#fff; border:none; padding:12px 16px; font-family:var(--font-body); font-size:13px; font-weight:700; cursor:pointer; border-radius:4px; white-space:nowrap; transition:background 0.2s; flex-shrink:0; }
.upload-btn:hover { background:var(--primary-dark); }
.img-preview { display:flex; align-items:center; gap:12px; }
.upload-status { font-size:13px; font-weight:600; }