/* ═══════════════════════════════════════════════════════════════════
   MUSTANG MEDIA CLUB — supplemental styles
   Built on the platform's tokens (--red, --surface, --border, --muted…).
   Reuses .card / .btn / .chip / .page where possible; adds club-only bits.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Club rail button uses the platform .rail-btn; nothing to add. */

/* ── Club switch — sits under the course switcher in the sidebar header ── */
.sb-club-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0 0 14px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; font-family: inherit; text-align: left;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.sb-club-btn:hover { border-color: var(--border-light); background: var(--off); }
.sb-club-btn .cs-ic { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: var(--badge-bg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.sb-club-btn .cs-lab { flex: 1; min-width: 0; font-weight: 700; font-size: 13px; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-club-btn .cs-tag { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--muted); background: var(--off); padding: 2px 6px; border-radius: 5px; flex-shrink: 0; }
.sb-club-btn.active { border-color: var(--red); background: var(--red-glow); box-shadow: 0 1px 4px rgba(200,16,46,0.16); }
.sb-club-btn.active .cs-ic { background: var(--red); }
.sb-club-btn.active .cs-lab { color: var(--red); }
.sb-club-btn.active .cs-tag { color: var(--red); background: rgba(200,16,46,0.1); }

/* Club sidebar nav — the "Back to course" item + active club entries reuse
   the platform .sb-item look, with a red active state to signal club context. */
.sb-item.club-back { color: var(--muted); font-weight: 600; }
.sb-item.club-back:hover { color: var(--text); }
.sb-item.club-back i { color: var(--muted); }
.sb-item.club-nav-item.active { color: var(--red); background: var(--red-glow); }
.sb-item.club-nav-item.active i { color: var(--red); }
.sb-item.club-nav-item.active .badge { background: var(--red); color: #fff; }

/* ── "View as student" preview banner ── */
#club-preview-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; pointer-events: none; padding: 0 0 16px; }
#club-preview-banner .cpb-inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: #1a1d23; color: #fff; padding: 10px 12px 10px 16px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 13px; animation: cpb-pop .3s cubic-bezier(.16,1,.3,1); }
#club-preview-banner .cpb-inner > i { color: #ffd05a; }
#club-preview-banner b { font-weight: 700; }
#club-preview-banner button { pointer-events: auto; background: var(--red); color: #fff; border: none; border-radius: 30px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
#club-preview-banner button:hover { background: #a50d26; }
@keyframes cpb-pop { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ═══════════ LIVELINESS — tasteful entrance + hover motion (club only) ═══════════ */
/* Reveal-safe: the visible end-state IS the base style. Animations only move
   transform (translateY) — content is never held at opacity:0, so a render
   where the compositor doesn't tick still shows everything. */
@media (prefers-reduced-motion: no-preference) {
  .club-hero { animation: club-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .club-hero::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
    transform: skewX(-18deg); animation: club-sheen 6s ease-in-out infinite; pointer-events: none;
  }
  .club-hero .ch-stat .n { animation: club-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .club-hero .ch-stat:nth-child(1) .n { animation-delay: .06s; }
  .club-hero .ch-stat:nth-child(2) .n { animation-delay: .12s; }
  .club-hero .ch-stat:nth-child(3) .n { animation-delay: .18s; }
  .club-hero .ch-stat:nth-child(4) .n { animation-delay: .24s; }

  /* Cards + KPI tiles stagger in on the club pages */
  #club-tab-body .club-kpi,
  #club-tab-body > .club-grid > .card,
  #club-tab-body > .card { animation: club-rise .45s cubic-bezier(.16,1,.3,1) both; }
  #club-tab-body .club-grid.g4 .club-kpi:nth-child(1) { animation-delay: .03s; }
  #club-tab-body .club-grid.g4 .club-kpi:nth-child(2) { animation-delay: .09s; }
  #club-tab-body .club-grid.g4 .club-kpi:nth-child(3) { animation-delay: .15s; }
  #club-tab-body .club-grid.g4 .club-kpi:nth-child(4) { animation-delay: .21s; }
}
@keyframes club-rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes club-sheen { 0%, 100% { left: -50%; } 50% { left: 110%; } }

/* Hover energy */
.club-kpi { transition: transform .16s ease, box-shadow .16s ease; }
.club-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.club-kpi:hover .ic { transform: scale(1.08) rotate(-4deg); transition: transform .2s ease; }
.ev-card { transition: transform .16s ease, box-shadow .16s ease; }
.ev-card:hover { transform: translateY(-3px); }
.lb-row, .mem-row, .list-row { transition: background .14s ease; }

/* ═══════════════════════════════════════════════════════════════════
   CINEMATIC LEADERBOARD — the original REEL TIME "stage" (kept on request).
   A dark signature band inside the otherwise-light club. All scoped to
   .club-lb so it never leaks into the rest of the platform.
   ═══════════════════════════════════════════════════════════════════ */
.club-lb { --gold:#FFD700; --silver:#C0C0C0; --bronze:#CD7F32;
  background:#0a0a0c; border:1px solid #20242b; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 18px 50px rgba(15,18,24,.28); }

/* film-strip ticker */
.club-lb .lb-film-strip { background:linear-gradient(90deg,#7a0000,#CC0000,#7a0000); overflow:hidden; white-space:nowrap; padding:6px 0; }
.club-lb .lb-ticker-inner { display:inline-block; animation:lbtick 26s linear infinite; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:3px; font-weight:800; color:#fff; }
@keyframes lbtick { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* arena + podium */
.club-lb .lb-arena { padding:66px 20px 0; perspective:1200px; perspective-origin:50% -10%; }
.club-lb .lb-podium { display:grid; grid-template-columns:1fr 1.32fr 1fr; gap:14px; align-items:end; transform:rotateX(4deg); transform-style:preserve-3d; }
.club-lb .podium-card { position:relative; transform-style:preserve-3d; transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s; cursor:pointer; }
.club-lb .podium-card:hover { filter:brightness(1.12); }
.club-lb .podium-1:hover { transform:translateY(-10px) rotateX(-4deg) scale(1.02); }
.club-lb .podium-2:hover { transform:translateY(-8px) rotateX(-3deg) rotateY(2deg) scale(1.01); }
.club-lb .podium-3:hover { transform:translateY(-8px) rotateX(-3deg) rotateY(-2deg) scale(1.01); }
.club-lb .p-face { border-radius:16px; overflow:hidden; position:relative; }
.club-lb .podium-1 .p-face { background:linear-gradient(168deg,#2e2000,#1c1400 35%,#0e0a00); border:1.5px solid rgba(255,215,0,.45); box-shadow:0 0 0 1px rgba(255,215,0,.1),0 24px 60px rgba(255,215,0,.15),0 8px 20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,215,0,.2); }
.club-lb .podium-2 .p-face { background:linear-gradient(168deg,#272727,#1a1a1a 35%,#0d0d0d); border:1.5px solid rgba(200,200,200,.3); box-shadow:0 18px 40px rgba(0,0,0,.7),0 6px 16px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07); }
.club-lb .podium-3 .p-face { background:linear-gradient(168deg,#221500,#160e00 35%,#0b0700); border:1.5px solid rgba(205,127,50,.35); box-shadow:0 18px 40px rgba(205,127,50,.08),0 6px 16px rgba(0,0,0,.9),inset 0 1px 0 rgba(205,127,50,.12); }

.club-lb .podium-pos { position:absolute; top:10px; left:10px; z-index:5; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.7); }
.club-lb .pp-1 { background:var(--gold); color:#000; }
.club-lb .pp-2 { background:var(--silver); color:#000; }
.club-lb .pp-3 { background:var(--bronze); color:#000; }
.club-lb .podium-photo-wrap { margin:16px 16px 0; }
.club-lb .podium-avatar-wrap { aspect-ratio:.92; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; }
.club-lb .podium-1 .podium-avatar-wrap { background:linear-gradient(135deg,#2e2000,#1a1200); color:var(--gold); font-size:50px; }
.club-lb .podium-2 .podium-avatar-wrap { background:linear-gradient(135deg,#282828,#161616); color:#aaa; font-size:40px; }
.club-lb .podium-3 .podium-avatar-wrap { background:linear-gradient(135deg,#221500,#130e00); color:var(--bronze); font-size:40px; }

.club-lb .podium-foot { padding:12px 14px 16px; text-align:center; }
.club-lb .p-frank { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.club-lb .podium-1 .p-frank { color:rgba(255,215,0,.6); }
.club-lb .podium-2 .p-frank { color:rgba(200,200,200,.45); }
.club-lb .podium-3 .p-frank { color:rgba(205,127,50,.5); }
.club-lb .p-fname { font-weight:700; margin-bottom:1px; }
.club-lb .podium-1 .p-fname { color:var(--gold); font-size:15px; text-shadow:0 0 20px rgba(255,215,0,.2); }
.club-lb .podium-2 .p-fname { color:#DEDEDE; font-size:13px; }
.club-lb .podium-3 .p-fname { color:#DEC090; font-size:13px; }
.club-lb .p-ftitle { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.8px; margin-bottom:10px; opacity:.4; color:#bbb; }
.club-lb .p-count { display:flex; align-items:baseline; gap:5px; justify-content:center; }
.club-lb .p-pts { font-family:'Bebas Neue',sans-serif; font-weight:700; line-height:1; letter-spacing:-1px; }
.club-lb .podium-1 .p-pts { color:var(--gold); font-size:32px; text-shadow:0 0 16px rgba(255,215,0,.4); }
.club-lb .podium-2 .p-pts { color:var(--silver); font-size:24px; }
.club-lb .podium-3 .p-pts { color:var(--bronze); font-size:24px; }
.club-lb .p-pts-lbl { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1px; opacity:.45; color:#fff; }
.club-lb .crown-stage { position:absolute; top:-30px; left:0; right:0; display:flex; justify-content:center; z-index:30; pointer-events:none; }
.club-lb .crown-float { animation:crownfloat 3s ease-in-out infinite; color:var(--gold); font-size:26px; filter:drop-shadow(0 4px 12px rgba(255,215,0,.6)); }
@keyframes crownfloat { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-8px) rotate(3deg); } }

/* podium bases */
.club-lb .lb-bases { display:grid; grid-template-columns:1fr 1.32fr 1fr; gap:14px; transform:rotateX(4deg); padding:0 20px; margin-top:2px; }
.club-lb .lb-base { border-radius:0 0 8px 8px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:2px; }
.club-lb .lb-base-1 { height:44px; background:linear-gradient(170deg,#2a1e00,#1a1400); border:1px solid rgba(255,215,0,.22); border-top:3px solid var(--gold); color:rgba(255,215,0,.45); }
.club-lb .lb-base-2 { height:28px; background:linear-gradient(170deg,#222,#161616); border:1px solid rgba(200,200,200,.12); border-top:3px solid #999; color:rgba(180,180,180,.4); }
.club-lb .lb-base-3 { height:18px; background:linear-gradient(170deg,#1c1200,#110d00); border:1px solid rgba(205,127,50,.15); border-top:3px solid var(--bronze); color:rgba(205,127,50,.4); }

.club-lb .p-entry-2 { animation:lbrise .6s cubic-bezier(.16,1,.3,1) .06s both; }
.club-lb .p-entry-3 { animation:lbrise .6s cubic-bezier(.16,1,.3,1) .2s both; }
.club-lb .p-entry-1 { animation:lbrise .7s cubic-bezier(.16,1,.3,1) .34s both; }
@keyframes lbrise { from { transform:translateY(80px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* column header film strip */
.club-lb .film-strip-hd { display:flex; margin:26px 20px 0; background:#111; border-radius:6px; overflow:hidden; border:1px solid #1c1c1c; }
.club-lb .film-strip-hd .cell { flex:1; padding:8px 12px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#5a5a5a; border-right:1px solid #1c1c1c; display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace; }
.club-lb .film-strip-hd .cell:last-child { border-right:none; justify-content:flex-end; }
.club-lb .film-strip-hd .cell.red { color:#ff5252; background:rgba(204,0,0,.08); }

/* member rows */
.club-lb .lb-list { margin:8px 20px 18px; background:#0e0e12; border:1px solid #1c1c1c; border-radius:8px; }
.club-lb .lb-row-new { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); }
.club-lb .lb-row-new:last-child { border-bottom:none; }
.club-lb .lb-row-new:hover { background:rgba(255,255,255,.05); }
.club-lb .lb-row-new:nth-child(1) { background:rgba(255,215,0,.05); border-left:2px solid rgba(255,215,0,.4); }
.club-lb .lb-row-new:nth-child(2) { background:rgba(192,192,192,.04); border-left:2px solid rgba(192,192,192,.3); }
.club-lb .lb-row-new:nth-child(3) { background:rgba(205,127,50,.04); border-left:2px solid rgba(205,127,50,.3); }
.club-lb .lb-rank-num { font-family:'Bebas Neue',sans-serif; font-size:18px; color:#777; width:26px; text-align:center; flex-shrink:0; }
.club-lb .lb-av-sm { width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; }
.club-lb .lb-name-col { flex:1; min-width:0; }
.club-lb .lb-member-name { font-weight:600; font-size:13px; color:#f2f2f4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.club-lb .lb-rank-tag { font-size:10px; color:#8a8a90; font-family:'JetBrains Mono',monospace; margin-top:2px; }
.club-lb .title-chip { display:inline-block; padding:1px 7px; border-radius:3px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-family:'JetBrains Mono',monospace; margin-left:5px; background:rgba(204,0,0,.16); color:#ff5252; border:1px solid rgba(204,0,0,.32); }
.club-lb .lb-bar-wrap { width:90px; flex-shrink:0; }
.club-lb .lb-bar-track { height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.club-lb .lb-bar-fill { height:100%; border-radius:2px; }
.club-lb .lb-pts-col { text-align:right; flex-shrink:0; min-width:54px; }
.club-lb .lb-pts-col .v { font-family:'Bebas Neue',sans-serif; font-size:21px; color:#ff4444; line-height:1; }
.club-lb .lb-pts-col .s { font-size:9px; color:#777; font-family:'JetBrains Mono',monospace; }
.club-lb .grade-badge { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:700; font-family:'JetBrains Mono',monospace; margin-left:4px; }
.club-lb .gr-9 { background:rgba(51,153,255,.15); color:#4db8ff; }
.club-lb .gr-10 { background:rgba(0,204,102,.14); color:#00e67a; }
.club-lb .gr-11 { background:rgba(255,170,0,.14); color:#ffbb33; }
.club-lb .gr-12 { background:rgba(204,0,0,.16); color:#ff6b6b; }

@media (max-width:760px) {
  .club-lb .lb-arena { padding-top:30px; perspective:none; }
  .club-lb .lb-podium, .club-lb .lb-bases { grid-template-columns:1fr; transform:none; }
  .club-lb .lb-bar-wrap { display:none; }
}

/* ── Club hero banner ── */
.club-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(120deg, #1a1d23 0%, #2a2d35 100%);
  color: #fff; padding: 26px 28px; margin-bottom: 22px;
}
.club-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(200,16,46,.9) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(225deg, rgba(200,16,46,.9) 25%, transparent 25%) 0 0 / 14px 14px;
  opacity: .08;
}
.club-hero .ch-kick { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #ff8a9a; display: flex; align-items: center; gap: 8px; }
.club-hero .ch-kick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.club-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 10px 0 4px; }
.club-hero .ch-sub { font-size: 13px; color: rgba(255,255,255,.6); }
.club-hero .ch-stats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.club-hero .ch-stat .n { font-size: 24px; font-weight: 700; line-height: 1; }
.club-hero .ch-stat .l { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 5px; }

/* ── Section sub-grids ── */
.club-grid { display: grid; gap: 14px; }
.club-grid.g2 { grid-template-columns: 1fr 1fr; }
.club-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.club-grid.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .club-grid.g3, .club-grid.g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .club-grid.g2, .club-grid.g3, .club-grid.g4 { grid-template-columns: 1fr; } }

/* ── KPI tiles ── */
.club-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-card); }
.club-kpi .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.club-kpi .l { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.club-kpi .ic { float: right; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--red-glow); color: var(--red); }

/* ── Rank pill ── */
.rank-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 9px 3px 7px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.rank-pill i { font-size: 10px; }

/* ── Leaderboard ── */
.lb-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--off); }
.lb-pos { font-size: 18px; font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.top-1 .lb-pos { color: #a16207; }
.lb-row.top-2 .lb-pos { color: #6b7280; }
.lb-row.top-3 .lb-pos { color: #b45309; }
.lb-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lb-av { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; }
.lb-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.lb-pts { text-align: right; }
.lb-pts .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lb-pts .u { font-size: 10px; color: var(--muted); margin-left: 2px; }
.lb-prog { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; margin-top: 6px; }
.lb-prog > i { display: block; height: 100%; background: var(--red); border-radius: 2px; }

/* ── Member row (roster) ── */
.mem-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.mem-row:last-child { border-bottom: none; }
.mem-row:hover { background: var(--off); }
.mem-av { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; }
.mem-actions { display: flex; gap: 6px; }

/* ── Event card ── */
.ev-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.ev-card:hover { box-shadow: var(--shadow-hover); }
.ev-top { padding: 14px 16px 12px; border-left: 4px solid var(--ev-accent, var(--red)); }
.ev-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ev-meta { font-size: 12px; color: var(--muted); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ev-meta i { width: 13px; color: var(--muted); }
.ev-foot { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--off); }
.ev-crew { display: flex; align-items: center; gap: 4px; }
.ev-crew .seat { width: 9px; height: 9px; border-radius: 50%; background: var(--border-light); }
.ev-crew .seat.filled { background: var(--red); }

/* ── Zone tiles ── */
.zone-tile { border: 1px solid var(--border); border-left: 4px solid var(--zc, var(--muted)); border-radius: var(--r); padding: 14px 16px; background: var(--surface); }
.zone-tile.green  { --zc: var(--green); }
.zone-tile.blue   { --zc: var(--blue); }
.zone-tile.amber  { --zc: var(--amber); }
.zone-tile.red    { --zc: var(--red); }
.zone-tile h4 { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.zone-tile h4 .sw { width: 12px; height: 12px; border-radius: 4px; background: var(--zc); }
.zone-tile ul { margin: 0; padding-left: 18px; }
.zone-tile li { font-size: 12.5px; color: var(--muted2); margin: 3px 0; }

/* ── Rank ladder list ── */
.rank-ladder { display: flex; flex-direction: column; }
.rank-ladder .rl-row { display: grid; grid-template-columns: 170px 1fr 96px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.rank-ladder .rl-row:last-child { border-bottom: none; }
.rank-ladder .rl-name { font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.rank-ladder .rl-perk { font-size: 12px; color: var(--muted); }
.rank-ladder .rl-pts { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted2); }
@media (max-width: 720px) { .rank-ladder .rl-row { grid-template-columns: 1fr auto; } .rank-ladder .rl-perk { display: none; } }

/* ── Inputs (club modals/forms) ── */
.club-inp { width: 100%; padding: 9px 12px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--surface-2); font-family: inherit; font-size: 13.5px; color: var(--text); }
.club-inp:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
select.club-inp { cursor: pointer; }
textarea.club-inp { min-height: 76px; resize: vertical; }

/* ── Tabs (sub-nav inside a club page) ── */
.club-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.club-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.club-tab:hover { color: var(--text); }
.club-tab.active { color: var(--red); border-bottom-color: var(--red); }
.club-tab .cnt { font-size: 10px; font-weight: 700; background: var(--off); color: var(--muted2); padding: 1px 6px; border-radius: 10px; }
.club-tab.active .cnt { background: var(--red-glow); color: var(--red); }

/* ── Contract policy list ── */
.policy { padding: 14px 0; border-bottom: 1px solid var(--border); }
.policy:last-child { border-bottom: none; }
.policy h4 { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.policy p { font-size: 13px; color: var(--muted2); line-height: 1.55; }

/* ── Quiz ── */
.quiz-q { margin-bottom: 18px; }
.quiz-q .q { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }
.quiz-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 7px; cursor: pointer; font-size: 13px; }
.quiz-opt:hover { background: var(--off); }
.quiz-opt input { margin-top: 2px; accent-color: var(--red); width: 15px; height: 15px; flex-shrink: 0; }
.quiz-opt.correct { border-color: var(--green); background: var(--green-glow); }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-glow); }

/* ── Pending join requests ── */
.pend-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--amber); background: var(--amber-glow); border-radius: var(--r); margin-bottom: 8px; }
.pend-row .who { flex: 1; }
.pend-row .who .nm { font-weight: 600; font-size: 13.5px; }
.pend-row .who .em { font-size: 11.5px; color: var(--muted); }

/* ── Detail rows ── */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: right; }

/* ── Note / callout ── */
.club-note { display: flex; gap: 10px; padding: 11px 14px; border-radius: var(--r); font-size: 12.5px; line-height: 1.5; }
.club-note.info  { background: var(--blue-glow); border: 1px solid rgba(29,78,216,.2); color: var(--blue); }
.club-note.warn  { background: var(--amber-glow); border: 1px solid rgba(180,83,9,.2); color: var(--amber); }
.club-note.ok    { background: var(--green-glow); border: 1px solid rgba(21,128,61,.2); color: var(--green); }
.club-note i { margin-top: 1px; }

/* ── small list rows used in deliverables / penalties / log ── */
.list-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.list-row .li-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--off); color: var(--muted2); }
.list-row .li-main .t { font-size: 13.5px; font-weight: 600; }
.list-row .li-main .s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.delta { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.delta.pos { color: var(--green); }
.delta.neg { color: var(--red); }