/* ============================================================
   SENNA PUNNAYUR — styles.css
   MatchBrain-inspired dark navy design
   ============================================================ */

:root {
  --bg:        #0a1628;
  --bg2:       #0e1e3a;
  --card:      #132044;
  --card2:     #1a2a54;
  --card3:     #1e3166;
  --text:      #ffffff;
  --text2:     #d8e4f5;
  --muted:     #6b7fa3;
  --gold:      #f0b429;
  --gold-soft: rgba(240,180,41,.13);
  --gold-glow: rgba(240,180,41,.25);
  --purple:    #a78bfa;
  --green:     #4ade80;
  --red:       #f87171;
  --border:    rgba(255,255,255,.07);
  --radius:    16px;
  --shadow:    0 8px 32px rgba(0,0,0,.45);
  --maxw:      680px;          /* mobile-first max width */
  --predict-h: 60px;           /* predict top header */
  --bnav-h:    64px;           /* bottom nav */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,h2,h3,.display { font-family:"Bebas Neue",sans-serif; letter-spacing:.5px; line-height:1.05; font-weight:400; }
.mono { font-family:"Space Mono",monospace; }
a { color:inherit; text-decoration:none; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.wide { max-width:1100px; margin:0 auto; padding:0 20px; }

/* colours */
.gold  { color:var(--gold); }
.green { color:var(--green); }
.red   { color:var(--red); }
.purple{ color:var(--purple); }
.muted { color:var(--muted); }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent;
  border-radius:999px; padding:11px 20px; font-weight:600; font-size:14px;
  cursor:pointer; transition:transform .15s,background .2s,box-shadow .2s;
  background:var(--card2); color:var(--text); font-family:"Inter",sans-serif;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:none; }
.btn-gold   { background:var(--gold); color:#1a1a1a; box-shadow:0 4px 16px var(--gold-soft); }
.btn-gold:hover { box-shadow:0 8px 24px var(--gold-glow); }
.btn-outline { background:transparent; border-color:var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold-soft); }
.btn-ghost  { background:transparent; border-color:var(--border); }
.btn-green  { background:var(--green); color:#1a2a1a; }
.btn-red    { background:var(--red); color:#fff; }
.btn-block  { width:100%; justify-content:center; }
.btn-sm     { padding:8px 14px; font-size:13px; }
.btn-icon   { width:34px; height:34px; padding:0; border-radius:10px; justify-content:center; background:var(--bg2); border:1px solid var(--border); color:var(--muted); }

/* ============================================================
   PREDICT HEADER (sticky, mobile-width)
   ============================================================ */
.predict-header {
  position:sticky; top:0; z-index:90;
  background:var(--card);
  border-bottom:1px solid var(--border);
  height:var(--predict-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  max-width:100%;
}
.predict-header .brand {
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.predict-header .brand-logo {
  width:36px; height:36px; border-radius:10px; object-fit:cover;
}
.predict-header .brand-name {
  font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:2px;
}
.predict-header .brand-name span { color:var(--gold); }
.predict-header .hdr-icons { display:flex; gap:8px; }

/* ============================================================
   COMMUNITY NAV (top, wider pages)
   ============================================================ */
header.comm-nav {
  position:sticky; top:0; z-index:90;
  background:rgba(10,22,40,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  display:none; /* shown only on community pages */
}
header.comm-nav.visible { display:block; }
.comm-nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:62px; max-width:1100px; margin:0 auto; padding:0 20px;
}
.comm-brand { display:flex; align-items:center; gap:10px; cursor:pointer; }
.comm-brand img { height:36px; width:36px; border-radius:8px; }
.comm-brand .cname { font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:2px; }
.comm-brand .cname span { color:var(--gold); }
.comm-links { display:flex; align-items:center; gap:2px; }
.comm-links a {
  padding:7px 12px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--muted); transition:color .2s,background .2s;
}
.comm-links a:hover { color:var(--text); }
.comm-links a.active { color:var(--gold); background:var(--gold-soft); }
.comm-actions { display:flex; align-items:center; gap:8px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; }
.mobile-comm-links {
  display:none; flex-direction:column; background:var(--card); border-bottom:1px solid var(--border); padding:12px 16px; gap:4px;
}
.mobile-comm-links.open { display:flex; }
.mobile-comm-links a { padding:10px 14px; border-radius:8px; color:var(--muted); font-size:15px; }
.mobile-comm-links a.active { color:var(--gold); background:var(--gold-soft); }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; height:var(--bnav-h);
  background:var(--card); border-top:1px solid var(--border);
  display:flex; align-items:stretch; z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:none; /* shown only on predict pages */
}
.bottom-nav.visible { display:flex; }
.bnav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; cursor:pointer;
  color:var(--muted); font-size:11px; font-weight:500;
  transition:color .2s; border:0; background:none; font-family:"Inter",sans-serif;
}
.bnav-item.active { color:var(--gold); }
.bnav-icon { font-size:22px; line-height:1; }

/* ============================================================
   PAGES + TRANSITIONS
   ============================================================ */
.page { display:none; animation:fade .35s ease; }
.page.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* predict pages have bottom-nav spacer */
.predict-page { padding-bottom:calc(var(--bnav-h) + 16px); }
/* community pages have no bottom nav */
.comm-page { padding-bottom:40px; }

/* ============================================================
   OVERLAPPING FLAG CIRCLES  ← key MatchBrain visual
   ============================================================ */
.flag-pair {
  position:relative; width:68px; height:46px; flex-shrink:0;
}
.flag-pair img {
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  position:absolute; top:1px; border:2px solid var(--card);
  background:var(--bg2);
}
.flag-pair img.flag-home { left:0;  z-index:2; }
.flag-pair img.flag-away { left:22px; z-index:1; }
/* emoji fallback inside a circle */
.flag-emoji { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:var(--bg2); border:2px solid var(--card); }
.flag-pair .flag-emoji:first-child { position:absolute; left:0; z-index:2; }
.flag-pair .flag-emoji:last-child  { position:absolute; left:22px; z-index:1; }

/* ============================================================
   MATCH CARDS  ← MatchBrain style
   ============================================================ */
.mb-card {
  background:var(--card); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  margin-bottom:10px; cursor:pointer; transition:background .2s;
}
.mb-card:hover { background:var(--card2); }
.mb-card .card-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.mb-card .card-info { flex:1; min-width:0; }
.mb-card .teams { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-card .meta { font-size:12px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; }
.mb-card .card-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.mb-card .pred-score { font-family:"Bebas Neue",sans-serif; font-size:26px; letter-spacing:1px; color:var(--gold); line-height:1; }
.mb-card .pred-score.no-pred { font-size:14px; color:var(--muted); font-family:"Inter",sans-serif; }
.mb-card .card-actions { display:flex; gap:6px; }
.mb-card .act-btn { width:30px; height:30px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:grid; place-items:center; cursor:pointer; color:var(--muted); font-size:14px; transition:background .15s,color .15s; }
.mb-card .act-btn:hover { background:var(--card3); color:var(--text); }

/* actual result below the card */
.mb-card-result {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.mb-card-result .actual { font-size:13px; color:var(--muted); }
.mb-card-result .actual b { color:var(--text2); }
.mb-card-result .earned { font-size:15px; font-weight:700; color:var(--gold); }
.mb-card-result .earned.zero { color:var(--red); }

/* expandable prediction input */
.pred-input-area {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.pred-score-box {
  display:flex; align-items:center; gap:8px; flex:1;
}
.pred-score-box input {
  width:56px; height:56px; text-align:center; font-size:24px; font-family:"Space Mono",monospace;
  background:var(--bg2); border:2px solid var(--border); color:var(--text);
  border-radius:12px; transition:border-color .2s;
}
.pred-score-box input:focus { outline:none; border-color:var(--gold); }
.pred-score-box .sep { color:var(--muted); font-size:18px; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-family:"Space Mono",monospace; font-size:11px; padding:3px 9px;
  border-radius:999px; letter-spacing:.5px; font-weight:700;
}
.badge-live      { background:rgba(248,113,113,.15); color:var(--red); }
.badge-finished  { background:rgba(74,222,128,.1);   color:var(--green); }
.badge-upcoming  { background:var(--bg2);             color:var(--muted); }
.badge-locked    { background:var(--gold-soft);       color:var(--gold); }
.badge-group     { background:var(--gold-soft);       color:var(--gold); }
.badge-correct   { background:rgba(74,222,128,.1);   color:var(--green); }
.badge-wrong     { background:rgba(248,113,113,.1);  color:var(--red); }

/* ============================================================
   SECTION HEADERS (Dashboard style)
   ============================================================ */
.section-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.section-hdr h2 { font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-hdr a  { font-size:13px; color:var(--gold); display:flex; align-items:center; gap:4px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
#page-dashboard .hero-block {
  background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);
  border-radius:var(--radius); padding:24px 20px; margin-bottom:20px;
  text-align:center; position:relative; overflow:hidden;
}
#page-dashboard .hero-block::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px circle at 50% 0%,var(--gold-soft),transparent 60%);
}
#page-dashboard .hero-logo { height:72px; width:72px; border-radius:18px; object-fit:cover; margin-bottom:12px; position:relative; }
#page-dashboard .hero-title { font-family:"Bebas Neue",sans-serif; font-size:34px; letter-spacing:2px; position:relative; }
#page-dashboard .hero-sub { color:var(--muted); font-size:14px; margin-top:2px; position:relative; }
#page-dashboard .stats-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; position:relative;
}
#page-dashboard .stat-box { background:var(--bg2); border-radius:12px; padding:12px 8px; text-align:center; }
#page-dashboard .stat-val { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; }
#page-dashboard .stat-lbl { font-size:11px; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
#page-dashboard .stat-val.rank   { color:var(--purple); }
#page-dashboard .stat-val.preds  { color:var(--text); }
#page-dashboard .stat-val.pts    { color:var(--green); }

/* ============================================================
   MY PREDICTIONS (filter tabs + results)
   ============================================================ */
.pred-filter-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;
}
.pred-filter-btn {
  background:var(--card); border:2px solid transparent; border-radius:12px;
  padding:10px 6px; text-align:center; cursor:pointer; transition:border-color .2s;
}
.pred-filter-btn.active { border-color:var(--green); }
.pred-filter-btn .f-num { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; }
.pred-filter-btn.active .f-num { color:var(--green); }
.pred-filter-btn .f-lbl { font-size:11px; color:var(--muted); }

.pred-summary { text-align:center; margin-bottom:18px; font-size:14px; color:var(--muted); }
.pred-summary b { color:var(--gold); }

/* ============================================================
   STANDINGS
   ============================================================ */
.standing-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--card); transition:background .15s;
}
.standing-row:first-child { border-radius:var(--radius) var(--radius) 0 0; }
.standing-row:last-child  { border-bottom:none; border-radius:0 0 var(--radius) var(--radius); }
.standing-row:hover { background:var(--card2); }
.standing-row.top3 { background:var(--card2); }
.standing-row.me   { background:rgba(240,180,41,.08); }

.s-rank { font-family:"Space Mono",monospace; font-size:15px; font-weight:700; min-width:34px; text-align:center; color:var(--muted); }
.s-rank.gold   { color:#ffd700; font-size:22px; }
.s-rank.silver { color:#c0c0c0; font-size:22px; }
.s-rank.bronze { color:#cd7f32; font-size:22px; }

.s-info { flex:1; min-width:0; }
.s-name { font-weight:700; font-size:15px; }
.s-team { font-size:13px; color:var(--gold); font-weight:600; margin-top:1px; }
.s-preds{ font-size:12px; color:var(--muted); margin-top:1px; }

.s-pts-wrap { text-align:right; }
.s-pts { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; color:var(--gold); }
.s-pts-lbl { font-size:11px; color:var(--muted); }

/* ============================================================
   MY LINEUP (goal scorers)
   ============================================================ */
.lineup-match {
  background:var(--card); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px;
}
.lineup-match-hdr { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lineup-match-name { font-weight:700; font-size:15px; flex:1; }
.scorer-input {
  display:flex; gap:8px; align-items:center; margin-bottom:10px;
}
.scorer-input input {
  flex:1; padding:10px 14px; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px;
}
.scorer-input input:focus { outline:none; border-color:var(--gold); }
.scorer-tag {
  display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft);
  color:var(--gold); padding:5px 10px; border-radius:8px; font-size:13px; font-weight:600; margin:4px;
}
.scorer-tag .rm { cursor:pointer; opacity:.7; }
.scorer-tag .rm:hover { opacity:1; }

/* ============================================================
   HOW TO PLAY
   ============================================================ */
.htp-card {
  background:var(--card); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px;
}
.htp-title { font-weight:700; font-size:16px; margin-bottom:4px; }
.htp-sub   { color:var(--muted); font-size:13px; margin-bottom:14px; }
.htp-rule {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg2); border-radius:12px; padding:12px 14px; margin-bottom:8px;
}
.htp-rule.highlight { background:var(--gold-soft); border:1px solid var(--gold); }
.htp-rule-desc .rt { font-weight:600; font-size:14px; }
.htp-rule-desc .rd { font-size:12px; color:var(--muted); margin-top:2px; }
.htp-pts { background:var(--card3); color:var(--gold); font-family:"Space Mono",monospace; font-weight:700; padding:6px 12px; border-radius:8px; font-size:14px; }
.htp-rule.highlight .htp-pts { background:var(--gold); color:#1a1a1a; }
.htp-examples { background:var(--bg2); border-radius:12px; padding:14px; margin-top:8px; }
.htp-ex-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--muted); border-bottom:1px solid var(--border); }
.htp-ex-row:last-child { border-bottom:none; }
.htp-ex-row .ep-green { color:var(--green); font-weight:700; }
.htp-ex-row .ep-red   { color:var(--red);   font-weight:700; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; place-items:center; z-index:300; padding:20px; }
.modal.open { display:grid; }
.modal .box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; width:100%; max-width:400px; position:relative; }
.modal .m-close { position:absolute; top:14px; right:18px; cursor:pointer; font-size:24px; color:var(--muted); background:none; border:none; color:var(--muted); }

/* ============================================================
   FORMS
   ============================================================ */
.field { margin-bottom:12px; }
.field label { display:block; font-family:"Space Mono",monospace; font-size:11px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.8px; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 14px; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px; font-family:"Inter",sans-serif;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--gold); }
.field textarea { min-height:90px; resize:vertical; }
.field select option { background:var(--card); }

/* ============================================================
   TOAST
   ============================================================ */
#toasts { position:fixed; bottom:80px; right:16px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--card2); border:1px solid var(--gold); border-left:4px solid var(--gold);
  padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); min-width:220px; max-width:310px;
  animation:slide-in .3s ease;
}
.toast.success { border-color:var(--green); border-left-color:var(--green); }
.toast.error   { border-color:var(--red);   border-left-color:var(--red); }
.toast .tt { font-weight:700; font-size:13px; }
.toast .tm { font-size:12px; color:var(--muted); margin-top:2px; }
@keyframes slide-in { from{transform:translateX(120%);} to{transform:none;} }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.93); display:none; place-items:center; z-index:200; padding:30px; }
.lightbox.open { display:grid; }
.lightbox img { max-width:92vw; max-height:84vh; border-radius:12px; }
.lightbox .lb-cap { position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--text2); font-family:"Space Mono",monospace; font-size:13px; }
.lightbox .lb-close { position:absolute; top:16px; right:20px; font-size:32px; cursor:pointer; color:#fff; background:none; border:none; }

/* ============================================================
   COMMUNITY PAGES
   ============================================================ */
.block { padding:60px 0; }
.section-title { font-size:clamp(36px,8vw,56px); margin-bottom:8px; }
.section-sub { color:var(--muted); margin-bottom:32px; max-width:640px; }

/* hero */
.comm-hero {
  padding:80px 0 60px; text-align:center;
  background:radial-gradient(700px 360px at 50% -10%,var(--gold-soft),transparent 70%);
}
.comm-hero h1 { font-size:clamp(48px,10vw,96px); }

/* stat counters */
.counter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.counter-box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center; }
.counter-num { font-family:"Bebas Neue",sans-serif; font-size:52px; color:var(--gold); }
.counter-lbl { font-family:"Space Mono",monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* activity cards */
.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.activity-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  transition:transform .2s, border-color .2s;
}
.activity-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.activity-card .ac-icon { font-size:36px; }
.activity-card h3 { font-size:24px; margin:12px 0 6px; }
.activity-card p { color:var(--muted); font-size:14px; }

/* timeline */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--border); }
.tl-item { position:relative; margin-bottom:28px; }
.tl-item::before { content:""; position:absolute; left:-24px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--bg); }
.tl-year { font-family:"Space Mono",monospace; color:var(--gold); font-size:13px; }
.tl-title { font-size:22px; margin:4px 0; }
.tl-desc { color:var(--muted); font-size:14px; }

/* members */
.members-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.member-card { text-align:center; }
.member-photo { width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--gold); background:var(--card2); display:grid; place-items:center; font-family:"Bebas Neue",sans-serif; font-size:36px; color:var(--gold); }
.member-name { font-weight:600; }
.member-role { font-family:"Space Mono",monospace; font-size:11px; color:var(--gold); }
.member-cat  { font-size:12px; color:var(--muted); }

/* gallery */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip { background:var(--card); border:1px solid var(--border); color:var(--muted); padding:7px 14px; border-radius:999px; cursor:pointer; font-size:13px; font-family:"Space Mono",monospace; }
.chip.active { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.masonry { columns:4; column-gap:12px; }
.masonry img { width:100%; margin-bottom:12px; border-radius:10px; break-inside:avoid; display:block; cursor:pointer; border:1px solid var(--border); }

/* events */
.event-card { display:flex; gap:16px; align-items:flex-start; }
.date-box { background:var(--gold); color:#1a1a1a; border-radius:12px; padding:10px 12px; text-align:center; min-width:64px; }
.date-box .d { font-family:"Bebas Neue",sans-serif; font-size:28px; line-height:1; }
.date-box .m { font-family:"Space Mono",monospace; font-size:11px; }
.ev-meta { font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); margin:6px 0; }

/* ============================================================
   ADMIN
   ============================================================ */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.tab { background:none; border:0; color:var(--muted); font-weight:600; cursor:pointer; padding:10px 16px; border-bottom:2px solid transparent; font-size:14px; font-family:"Inter",sans-serif; }
.tab.active { color:var(--gold); border-color:var(--gold); }

/* ============================================================
   UTILS
   ============================================================ */
.card  { background:var(--card);  border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.card2 { background:var(--card2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
.empty { text-align:center; color:var(--muted); padding:40px 20px; font-family:"Space Mono",monospace; font-size:13px; }
.spinner { width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; margin:30px auto; }
@keyframes spin { to{transform:rotate(360deg);} }
.divider { height:1px; background:var(--border); margin:20px 0; }
.badge-spirit { display:inline-flex; gap:8px; align-items:center; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold); padding:8px 16px; border-radius:999px; font-family:"Space Mono",monospace; font-size:13px; letter-spacing:1px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top:1px solid var(--border); padding:32px 0; text-align:center; color:var(--muted); }
footer .f-brand { font-family:"Bebas Neue",sans-serif; font-size:24px; letter-spacing:2px; margin:8px 0 4px; }
footer .f-social { display:flex; gap:10px; justify-content:center; margin:14px 0; }

/* user chip in header */
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--gold); color:#1a1a1a; display:grid; place-items:center; font-weight:700; font-family:"Space Mono",monospace; font-size:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .counter-grid { grid-template-columns:repeat(2,1fr); }
  .activity-grid { grid-template-columns:repeat(2,1fr); }
  .members-grid  { grid-template-columns:repeat(2,1fr); }
  .masonry { columns:2; }
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .comm-links,.desktop-signin { display:none; }
  .hamburger { display:flex; }
  .counter-grid { grid-template-columns:repeat(2,1fr); }
  .activity-grid,.members-grid,.g2,.g3,.g4 { grid-template-columns:1fr; }
  .masonry { columns:1; }
  .block { padding:40px 0; }
  .section-title { font-size:34px; }
  .event-card { flex-direction:column; }
  #toasts { bottom:76px; left:16px; right:16px; }
}