/* Member home — Mixcloud-style chrome (light rail, icon-stack, white toolbar) */

.fc-mhome { display: grid; grid-template-columns: 112px 1fr; min-height: 100vh; background: #ffffff; color: var(--fc-black); position: relative; }
body[data-theme="light"] .fc-mhome { background: #ffffff; }

/* ─── Left rail (light, narrow, icon-stack) ─── */
.fc-rail { background: #fff; padding: 0 0 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Brand block — actual logo, recoloured to work on white (FAN+bars black, CHANTS knockout = primary accent) */
/* Brand block — actual logo, recoloured to work on white. Sits in the header band
   that spans the rail AND extends right into the topbar area, so the rail proper stays narrow
   but the logo reads larger than the rail width. */
.fc-rail__brand {
  position: absolute; top: 0; left: 0;
  width: 140px; height: 56px;
  z-index: 35; /* above the sticky topbar */
  padding: 12px 14px;
  background: #fff;
  display: flex; align-items: center; justify-content: flex-start;
}
.fc-rail__brand .fc-logo-plinth {
  background: transparent !important; padding: 0 !important; border-radius: 0 !important;
  width: 100%;
  --fc-a: var(--fc-black);
  --fc-b: var(--fc-primary, var(--fc-electric));
}
.fc-rail__brand img { width: 100%; height: auto !important; display: block; }

/* Push the rail's icon stack down so it doesn't sit under the absolute logo */
.fc-rail { padding-top: 68px; }
/* Push the topbar's content right so the absolute logo doesn't overlap menu items */
.fc-topbar { padding-left: 56px; padding-right: 24px; gap: 20px; align-items: center; display: flex; }
.fc-rail__brand .fc-logo-plinth {
  background: transparent !important; padding: 0 !important; border-radius: 0 !important;
  width: 100%;
  /* FAN + bars in black; CHANTS knockout = Electric (or accent primary). Reads cleanly on white. */
  --fc-a: var(--fc-black);
  --fc-b: var(--fc-primary, var(--fc-electric));
}
.fc-rail__brand img { width: 100%; height: auto !important; display: block; }

/* Icon-stack nav button (icon over label) — matches Mixcloud */
.fc-rail__btn { width: 88px; padding: 10px 4px; border: 1px solid transparent; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; color: #1a1a1a; cursor: pointer; text-decoration: none;
  font-family: var(--fc-font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.01em;
  transition: background var(--fc-t-fast), border-color var(--fc-t-fast), color var(--fc-t-fast);
  position: relative;
}
.fc-rail__btn > span:not(.ico):not(.badge) { text-align: center; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
/* FAN-581 (A11Y-M07): white text/icon on bubblegum was 2.57:1, fails AA
   (4.5:1 text / 3:1 icon) — ink reaches 8.16:1. */
.fc-rail__btn:hover { background: var(--fc-bubblegum, #FF6FB5); color: var(--fc-black); }
.fc-rail__btn:hover .ico { color: var(--fc-black); }
/* FAN-604: current page keeps the pink hover state as a "you are here" marker. */
.fc-rail__btn.active { background: var(--fc-bubblegum, #FF6FB5); color: var(--fc-black); }
.fc-rail__btn.active .ico { color: var(--fc-black); }

/* FAN-604: post-signup flash on the logged-in home (volt strip, one-shot). */
.mh-flash { margin: 18px 24px 0; }
.mh-flash__item {
  margin: 0 0 8px; padding: 14px 18px; border-radius: 10px;
  background: var(--fc-volt); color: var(--fc-black);
  border: 1.5px solid #000;
  font-family: var(--fc-font-display); font-size: 18px;
}
.fc-rail__btn .ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.fc-rail__btn--capo .ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fc-volt);
  color: var(--fc-black);
}
.fc-rail__btn--capo:hover .ico {
  background: var(--fc-volt);
  color: var(--fc-black);
}
.fc-rail__btn .badge {
  position: absolute; top: 6px; right: 8px;
  background: var(--fc-volt); color: var(--fc-black);
  font-family: var(--fc-font-mono); font-size: 8px; font-weight: 700; letter-spacing: .06em;
  padding: 2px 5px; border-radius: 3px;
}

.fc-rail__sep { width: 64px; height: 1px; background: #e6e4de; margin: 8px 0; }

/* Submit button */
.fc-rail__premium-wrap { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.fc-rail__premium {
  width: 56px; height: 56px; border-radius: 50%;
  /* FAN-604: reversed out — solid pink with white glyph (founder ask). */
  background: var(--fc-bubblegum);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer; border: 1px solid var(--fc-bubblegum);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform var(--fc-t-fast);
}
.fc-rail__premium:hover { transform: scale(1.06); background: var(--fc-bubblegum); color: #fff; }
.fc-rail__premium-label { width: 100%; text-align: center; overflow-wrap: anywhere; hyphens: auto; line-height: 1.15; font-family: var(--fc-font-mono); font-weight: 800; font-size: 10px; color: var(--fc-black); letter-spacing: 0.04em; }
.fc-rail__guest-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fc-rail__join {
  width: 88px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fc-electric, #5000FF);
  color: #fff;
  font-family: var(--fc-font-mono);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background var(--fc-t-fast), box-shadow var(--fc-t-fast), transform var(--fc-t-fast);
}
.fc-rail__join:hover,
.fc-rail__join:focus-visible {
  background: #3d00cc;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(80,0,255,.22);
}
.fc-rail__login {
  width: 88px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .66);
  font-family: var(--fc-font-body);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.fc-rail__login:hover,
.fc-rail__login:focus-visible {
  color: var(--fc-electric, #5000FF);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Followed-team avatars stack */
.fc-rail__teams { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fc-rail__team {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; cursor: pointer;
  border: 2px solid transparent; transition: border-color var(--fc-t-fast), transform var(--fc-t-fast);
}
.fc-rail__team:hover { border-color: var(--fc-primary, var(--fc-electric)); transform: scale(1.06); }
.fc-rail__team .stripes { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }

/* ─── Top toolbar (white) ─── */
.fc-topbar { position: sticky; top: 0; z-index: 30; height: 64px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid #ececea; display: flex; align-items: center; gap: 16px; padding: 0 24px; color: var(--fc-black); }
.fc-topbar { padding-left: 104px; }

.fc-topbar__menu { display: flex; gap: 22px; align-items: center; flex-shrink: 0; }
.fc-topbar__menu a { color: var(--fc-black); text-decoration: none; font-family: var(--fc-font-body); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.fc-topbar__menu a:hover { color: var(--fc-primary, var(--fc-electric)); }
.fc-topbar__menu .chev { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; opacity: 1; margin-left: 4px; color: var(--fc-bubblegum); transition: transform var(--fc-t-fast); }
.fc-topbar__menu .chev svg { width: 12px; height: 12px; }

/* ── Top-nav dropdown (Countries / Leagues / Teams / Your FC) ── */
/* FAN-518: touch-action:manipulation removes the browser's double-tap/pinch-zoom
   gesture-arbitration delay, which was causing the panel's first tap-through
   (open, then immediately tap a link inside) to intermittently not register on
   touch — the classic "needs a second press" symptom. */
.fc-nd { position: relative; display: inline-flex; align-items: center; height: 64px; flex-shrink: 0; touch-action: manipulation; }
.fc-nd--countries .fc-nd__panel { width: 300px; left: 0; }
.fc-nd--leagues .fc-nd__panel { width: 320px; left: 0; }
.fc-nd--teams .fc-nd__panel { width: 340px; left: 0; }
.fc-nd--yourfc .fc-nd__panel { width: 260px; right: 0; }
.fc-nd__trigger {
  color: var(--fc-black); text-decoration: none;
  font-family: var(--fc-font-body); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 2px;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.fc-nd.is-open .fc-nd__trigger { color: var(--fc-primary, var(--fc-electric)); }
.fc-nd.is-open .fc-nd__trigger .chev { transform: rotate(180deg); color: var(--fc-primary, var(--fc-electric)); }

/* Panel positioning — sits directly under the bar with NO gap; uses a
   transparent padded inner so the visible card is offset down 8px but the
   cursor never leaves the hover hit-area. */
.fc-nd__panel {
  position: absolute; top: 100%;
  padding-top: 8px;
  z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
  pointer-events: none;
}
.fc-nd.is-open .fc-nd__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 120ms ease, transform 120ms ease, visibility 0s;
  pointer-events: auto;
}
.fc-nd__panel-inner {
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.18), 0 4px 12px -6px rgba(0,0,0,.08);
  padding: 10px;
  overflow: hidden;
}

.fc-nd__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 8px;
  font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(0,0,0,.5); font-weight: 700;
}
.fc-nd__hd-ct { color: var(--fc-bubblegum); }

.fc-nd__list { display: flex; flex-direction: column; gap: 1px; }
.fc-nd__row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--fc-black) !important;
  font-family: var(--fc-font-body); font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: background var(--fc-t-fast);
  touch-action: manipulation;
}
.fc-nd__row:hover { background: #f6f4ef; }
.fc-nd__row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-nd__row-ct {
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(0,0,0,.45); flex-shrink: 0;
}
.fc-nd__row-meta {
  font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(0,0,0,.45);
}
.fc-nd__row-stack { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fc-nd__row-tag {
  font-family: var(--fc-font-mono); font-size: 9px; font-weight: 800; letter-spacing: .1em;
  padding: 3px 6px; border-radius: 3px;
  /* FAN-581 (A11Y-M07): white text on bubblegum was 2.57:1, fails AA
     4.5:1 — ink reaches 8.16:1. */
  background: var(--fc-bubblegum); color: var(--fc-black);
}
.fc-nd__row-tag--free { background: var(--fc-volt); color: var(--fc-black); }
.fc-nd__row--simple { padding: 10px 10px; }
.fc-nd__row--button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.fc-nd__form-row { margin: 0; }

.fc-nd__dot {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.fc-nd__dot > span { flex: 1; }
.fc-nd__team-dot {
  display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.fc-nd__team-dot > span { flex: 1; }
.fc-nd__team-dot > span:nth-child(1) { background: var(--team-c1); }
.fc-nd__team-dot > span:nth-child(2) { background: var(--team-c2); }
.fc-nd__team-dot > span:nth-child(3) { background: var(--team-c3); }
.fc-nd__flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  font-size: 18px; line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

.fc-nd__foot {
  display: block; margin-top: 4px;
  padding: 10px 10px;
  font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .04em;
  font-weight: 700;
  color: #C9357A !important;
  text-decoration: none;
  border-top: 1px solid #ececea;
  touch-action: manipulation;
}
.fc-nd__foot:hover { color: var(--fc-black) !important; }

/* Teams panel tabs + search */
.fc-nd__tabs {
  display: flex; gap: 4px; padding: 4px;
  background: #f3f1eb; border-radius: 8px; margin-bottom: 8px;
}
.fc-nd__tab {
  flex: 1; padding: 7px 10px; border: 0; background: transparent;
  font-family: var(--fc-font-body); font-weight: 600; font-size: 12.5px;
  color: rgba(0,0,0,.6); border-radius: 6px; cursor: pointer;
  transition: background var(--fc-t-fast), color var(--fc-t-fast);
}
.fc-nd__tab.active { background: #fff; color: var(--fc-black); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.fc-nd__search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 36px; margin-bottom: 8px;
  background: #f6f4ef; border: 1px solid transparent; border-radius: 8px;
  font-size: 13px; color: rgba(0,0,0,.55);
  transition: border-color var(--fc-t-fast), box-shadow var(--fc-t-fast), background var(--fc-t-fast);
}
.fc-nd__search:focus-within { background: #fff; border-color: var(--fc-bubblegum); box-shadow: 0 0 0 3px rgba(255,111,177,.25); }
.fc-nd__search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: var(--fc-black); }
.fc-nd__empty { padding: 14px 10px; font-size: 13px; color: rgba(0,0,0,.5); }

/* Your FC: profile chip header */
.fc-nd__me {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 12px;
}
.fc-nd__me-av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 2px solid var(--fc-primary, var(--fc-electric)); flex-shrink: 0;
}
.fc-nd__me-av .stripes { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.fc-nd__me-body { min-width: 0; }
.fc-nd__me-name { font-family: var(--fc-font-display); font-weight: 700; font-size: 15px; color: var(--fc-black); }
.fc-nd__me-sub { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .04em; color: rgba(0,0,0,.55); margin-top: 2px; }
.fc-nd__sep { height: 1px; background: #ececea; margin: 4px 4px; }

/* Bordered CTA pill — Mixcloud's "+ Create" pattern */
.fc-topbar__menu .fc-topbar__cta,
.fc-topbar__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; flex-shrink: 0;
  padding: 0 18px; height: 38px;
  background: var(--fc-primary, var(--fc-electric)); border: 1px solid var(--fc-primary, var(--fc-electric));
  /* FAN-581 (A11Y-M07): templates/base.html sets --fc-primary: bubblegum
     site-wide (no page currently overrides it), so this white text was
     2.57:1, fails AA 4.5:1 — ink reaches 8.16:1. Revisit if --fc-primary
     is ever wired to a per-team colour that isn't bubblegum. */
  color: var(--fc-black) !important;
  font-family: var(--fc-font-body); font-weight: 700; font-size: 14px;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px; cursor: pointer;
  transition: background var(--fc-t-fast), color var(--fc-t-fast), border-color var(--fc-t-fast);
}
/* FAN-581 (A11Y-M07): white text on bubblegum was 2.57:1, fails AA 4.5:1 —
   ink reaches 8.16:1. */
.fc-topbar__menu .fc-topbar__cta:hover,
.fc-topbar__cta:hover { background: var(--fc-bubblegum); color: var(--fc-black) !important; border-color: var(--fc-bubblegum); }
.fc-topbar__cta .plus { font-size: 16px; line-height: 1; }
.fc-topbar__cta .swatch { display: none; }

[dir="rtl"] .fc-rail__brand { left: auto; right: 0; justify-content: flex-end; }
[dir="rtl"] .fc-topbar { padding-left: 24px; padding-right: 104px; }
[dir="rtl"] .fc-nd--countries .fc-nd__panel,
[dir="rtl"] .fc-nd--leagues .fc-nd__panel,
[dir="rtl"] .fc-nd--teams .fc-nd__panel { left: auto; right: 0; }
[dir="rtl"] .fc-nd--yourfc .fc-nd__panel { left: 0; right: auto; }
[dir="rtl"] footer [style*="margin-left: 112px"] {
  margin-left: auto !important;
  margin-right: 112px !important;
}

.fc-search {
  flex: 1 1 auto; max-width: 260px; position: relative;
  display: flex; align-items: center; gap: 10px;
  background: #f3f1eb;
  border: 1px solid transparent; border-radius: 999px;
  padding: 0 16px; height: 36px;
  font-family: var(--fc-font-body); font-size: 13px;
  color: var(--fc-black); cursor: text; transition: border-color var(--fc-t-fast), box-shadow var(--fc-t-fast), background var(--fc-t-fast);
}
.fc-search:hover { background: #fff; border-color: var(--fc-bubblegum); }
.fc-search:focus-within { background: #fff; border-color: var(--fc-bubblegum); box-shadow: 0 0 0 3px rgba(255,111,177,.25); }
.fc-search input { flex: 1; border: 0; background: transparent; outline: none; color: inherit; font: inherit; }
.fc-search input::placeholder { color: rgba(0,0,0,.4); }
.fc-search__kbd { display: inline-flex; align-items: center; padding: 2px 6px; border: 1px solid rgba(0,0,0,.16); font-size: 10px; color: rgba(0,0,0,.5); border-radius: 4px; }

.fc-team-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 24px 24px;
  background: rgba(14,12,10,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.fc-team-modal[hidden] { display: none; }
.fc-team-modal__dialog {
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 96px));
  display: flex; flex-direction: column;
  background: #fff; color: var(--fc-black);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
  overflow: hidden;
}
.fc-team-modal__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid #ececea;
}
.fc-team-modal__hd h2 {
  margin: 0;
  font-family: var(--fc-font-display);
  font-size: 32px;
  line-height: .95;
  letter-spacing: 0;
}
.fc-team-modal__hd p {
  margin: 7px 0 0;
  color: rgba(0,0,0,.58);
  font-size: 14px;
}
.fc-team-modal__close {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: #f3f1eb; color: var(--fc-black);
  cursor: pointer;
}
/* FAN-581 (A11Y-M07): --fc-primary defaults to bubblegum site-wide (see
   templates/base.html), so this white icon was 2.57:1, fails even the
   3:1 icon floor — ink reaches 8.16:1. */
.fc-team-modal__close:hover { background: var(--fc-primary, var(--fc-bubblegum)); color: var(--fc-black); }
.fc-team-modal__search {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 28px 0;
  padding: 0 0 0 14px;
  min-height: 48px;
  border: 1.5px solid #d8d6d0;
  border-radius: 999px;
  background: #f8f7f2;
  transition: border-color var(--fc-t-fast), box-shadow var(--fc-t-fast), background var(--fc-t-fast);
}
.fc-team-modal__search:focus-within {
  background: #fff;
  border-color: var(--fc-bubblegum);
  box-shadow: 0 0 0 3px rgba(255,111,177,.25);
}
.fc-team-modal__search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  color: var(--fc-black);
  font: inherit;
}
.fc-team-modal__search button {
  align-self: stretch;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--fc-primary, var(--fc-bubblegum));
  /* FAN-581 (A11Y-M07): --fc-primary defaults to bubblegum site-wide (see
     templates/base.html), so this white "Search" text was 2.57:1, fails
     AA 4.5:1 — ink reaches 8.16:1. */
  color: var(--fc-black);
  font-weight: 700;
  cursor: pointer;
}
.fc-team-modal__examples {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 28px 2px;
}
.fc-team-modal__examples button {
  border: 1px solid #e2dfd7;
  border-radius: 999px;
  background: #fff;
  color: rgba(0,0,0,.68);
  padding: 7px 11px;
  font-size: 12px;
  cursor: pointer;
}
.fc-team-modal__examples button:hover {
  border-color: var(--fc-primary, var(--fc-bubblegum));
  color: var(--fc-black);
}
.fc-team-modal__body {
  overflow-y: auto;
  padding: 14px 28px 24px;
}
.fc-team-modal__group {
  padding: 12px 0 9px;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0,0,0,.52);
}
.fc-team-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fc-team-modal__team {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #ececea;
  border-radius: 8px;
  background: #fff;
  color: var(--fc-black);
  text-decoration: none;
  transition: border-color var(--fc-t-fast), background var(--fc-t-fast), transform var(--fc-t-instant);
}
.fc-team-modal__team:hover,
.fc-team-modal__team.is-active {
  border-color: var(--fc-primary, var(--fc-bubblegum));
  background: #fff4f9;
  transform: translateY(-1px);
}
.fc-team-modal__mark {
  width: 40px; height: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f1eb;
}
.fc-team-modal__mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  grid-column: 1 / -1;
}
.fc-team-modal__mark span:nth-child(1) { background: var(--team-a, #1D428A); }
.fc-team-modal__mark span:nth-child(2) { background: var(--team-b, #FFC72C); }
.fc-team-modal__mark span:nth-child(3) { background: var(--team-c, #FFFFFF); }
.fc-team-modal__mark span:nth-child(4) { background: var(--team-c, #FF6FB1); }
.fc-team-modal__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.fc-team-modal__meta {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fc-font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.fc-team-modal__empty {
  padding: 18px;
  border: 1px dashed #d8d6d0;
  border-radius: 8px;
  color: rgba(0,0,0,.55);
}
.fc-team-modal__ft {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 28px;
  border-top: 1px solid #ececea;
  background: #fbfaf7;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(0,0,0,.55);
  text-transform: uppercase;
}
.fc-team-modal__ft a {
  color: #F26B1F;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.fc-team-modal__ft a:hover { color: var(--fc-electric); }
body.fc-team-modal-open { overflow: hidden; }

.fc-team-picker { position: relative; }
.fc-team-picker__enhanced { display: none; }
html.fc-js .fc-team-picker__enhanced { display: block; }
.fc-team-picker__fallback-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fc-team-picker__search,
.fc-team-picker__fallback {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid #d8d6d0;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: var(--fc-font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--fc-t-fast), box-shadow var(--fc-t-fast);
}
.fc-team-picker__search:focus,
.fc-team-picker__fallback:focus {
  border-color: var(--fc-bubblegum);
  box-shadow: 0 0 0 3px rgba(255,111,177,.25);
}
.fc-team-picker__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 8px;
  box-shadow: 0 16px 34px -18px rgba(0,0,0,.28);
}
.fc-team-picker__option {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #000;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.fc-team-picker__option:hover,
.fc-team-picker__option.is-active {
  background: #f3f1eb;
}

.fc-topbar__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.fc-topbar__upload { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 36px; background: #fff; border: 1px solid #d8d6d0; color: var(--fc-black); font-family: var(--fc-font-body); font-weight: 600; font-size: 13px; cursor: pointer; border-radius: 8px; transition: background var(--fc-t-fast); }
.fc-topbar__upload:hover { background: #f3f1eb; }
.fc-topbar__lang { font-family: var(--fc-font-body); font-weight: 600; font-size: 13px; padding: 0 12px; height: 36px; background: transparent; border: 0; color: var(--fc-black); cursor: pointer; }
.fc-topbar__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: #1a1a1a; }
.fc-topbar__icon:hover { color: var(--fc-primary, var(--fc-electric)); }
.fc-topbar__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; cursor: pointer; border: 2px solid var(--fc-primary, var(--fc-electric)); }
.fc-topbar__avatar .stripes { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }

/* ─── Main feed (cream surface) ─── */
.fc-feed { padding: 28px 32px 0; max-width: 644px; }
.fc-feed__greet { font-family: var(--fc-font-display); font-weight: 700; font-size: 44px; line-height: .98; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--fc-black); display: flex; align-items: center; gap: 16px; }
.fc-feed__greet .play-orb { width: 44px; height: 44px; border-radius: 50%; background: var(--fc-primary, var(--fc-electric)); color: var(--fc-white); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background var(--fc-t-fast); }
.fc-feed__greet .play-orb:hover { background: var(--fc-electric); }
.fc-feed__sub { font-family: var(--fc-font-mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(0,0,0,.55); margin: 8px 0 28px; }

/* Tab pills under greeting */
.fc-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.fc-tab { padding: 8px 16px; border-radius: 999px; font-family: var(--fc-font-body); font-weight: 600; font-size: 13px; background: transparent; color: var(--fc-black); border: 0; cursor: pointer; }
.fc-tab.active { background: var(--fc-electric); color: var(--fc-white); }
.fc-tab:hover:not(.active) { background: var(--fc-electric); color: #fff; }

.fc-rail-row { display: flex; align-items: baseline; justify-content: space-between; margin: 36px 0 16px; }
.fc-rail-row h3 { font-family: var(--fc-font-display); font-weight: 700; font-size: 22px; margin: 0; letter-spacing: -0.005em; color: var(--fc-black); }
.fc-rail-row .more { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.08em; color: #F26B1F; text-decoration: none; padding: 2px 6px; border-radius: 3px; transition: background var(--fc-t-fast), color var(--fc-t-fast); }
.fc-rail-row .more:hover { background: var(--fc-electric); color: #fff; }

/* Horizontal scroller */
.fc-hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: 130px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.fc-hscroll::-webkit-scrollbar { height: 6px; }
.fc-hscroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }
.fc-hscroll > * { scroll-snap-align: start; }

/* Chant card (Mixcloud-style: square art, title under) — flat, no card chrome */
.fc-ccard { background: transparent; border: 0; padding: 0; cursor: pointer; transition: transform var(--fc-t-fast); display: flex; flex-direction: column; gap: 10px; }
.fc-ccard:hover { transform: translateY(-2px); }
.fc-ccard__art { aspect-ratio: 1; position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fc-ccard__art .stripes { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.fc-ccard__cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-ccard__art .play { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #F26B1F; color: #fff; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity var(--fc-t-fast), transform var(--fc-t-fast), background var(--fc-t-fast); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(242,107,31,.45); }
.fc-ccard__art .play:hover { background: var(--fc-electric); color: #000; transform: translateY(0) scale(1.06); box-shadow: 0 4px 14px rgba(214,255,0,.55); }
.fc-ccard:hover .play { opacity: 1; transform: translateY(0); }
@media (hover: none), (pointer: coarse) {
  .fc-ccard__art .play { width: 44px; height: 44px; opacity: 1; transform: translateY(0); }
}
.fc-ccard__hq { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); color: #000; font-family: var(--fc-font-mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; }
.fc-ccard__title { font-family: var(--fc-font-body); font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--fc-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-ccard__title-link { text-decoration: none; color: inherit; }
.fc-ccard__title-link:hover .fc-ccard__title { background: var(--fc-electric); color: #fff; box-shadow: 0 0 0 2px var(--fc-electric); border-radius: 2px; }
.fc-ccard__sub { font-family: var(--fc-font-body); font-size: 12px; color: #F26B1F; }
.fc-ccard__sub-link { text-decoration: none; color: inherit; display: inline-block; }
.fc-ccard__sub-link .fc-ccard__sub { text-decoration: underline; text-decoration-color: rgba(242,107,31,.45); text-underline-offset: 2px; transition: background var(--fc-t-fast), color var(--fc-t-fast); padding: 1px 4px; margin-left: -4px; border-radius: 3px; }
.fc-ccard__sub-link:hover .fc-ccard__sub { background: var(--fc-electric); color: #fff; text-decoration-color: #fff; }
/* Like button on chant cards */
.fc-ccard__like { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fc-bubblegum); cursor: pointer; border-radius: 50%; transition: background var(--fc-t-fast), color var(--fc-t-fast), transform var(--fc-t-instant); margin-top: 2px; }
.fc-ccard__like svg { width: 18px; height: 18px; }
.fc-ccard__like:hover { background: var(--fc-electric); color: #fff; }
.fc-ccard__like:hover svg { stroke: #fff !important; fill: none !important; }
.fc-ccard__like.is-liked { color: var(--fc-bubblegum); }
.fc-ccard__like.is-liked svg { fill: var(--fc-bubblegum); stroke: var(--fc-bubblegum); }
.fc-ccard__like:active { transform: scale(.88); }
.fc-ccard__tag-link { text-decoration: none; }
.fc-ccard__tag-link:hover .fc-ccard__tag { background: var(--fc-primary, var(--fc-electric)); color: #fff; }
.fc-ccard__tags { display: flex; gap: 6px; margin-top: 4px; }
.fc-ccard__tag { font-family: var(--fc-font-body); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #ececea; color: rgba(0,0,0,.7); }

/* Team card (followed) */
.fc-tcard { background: #fff; border: 1px solid #ececea; border-radius: 8px; padding: 14px; cursor: pointer; transition: transform var(--fc-t-fast), box-shadow var(--fc-t-fast); display: flex; gap: 12px; align-items: center; }
.fc-tcard:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.fc-tcard .stripes { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.fc-tcard__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 18px; color: var(--fc-black); }
.fc-tcard__meta { font-family: var(--fc-font-body); font-size: 12px; color: rgba(0,0,0,.55); margin-top: 2px; }
.fc-tcard__num { margin-left: auto; font-family: var(--fc-font-mono); font-size: 14px; color: var(--fc-primary, var(--fc-electric)); }

/* FanCard tile */
.fc-fcard { aspect-ratio: 5/7; padding: 18px; cursor: pointer; transition: transform var(--fc-t-fast); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fc-fcard:hover { transform: translateY(-3px) rotate(-1deg); }
.fc-fcard__title { font-family: var(--fc-font-display); font-weight: 700; font-size: 24px; line-height: .95; }
.fc-fcard__foot { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.08em; opacity: .7; }
.fc-fcard__corner { position: absolute; top: 14px; right: 14px; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: 0.08em; opacity: .6; }

/* Two-column split — fixed-width canvas, no responsive collapse */
.fc-feed__split { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; margin-top: 8px; }

.fc-aside { background: #fff; border: 1px solid #ececea; border-radius: 8px; }
.fc-aside__hd { padding: 14px 18px; border-bottom: 1px solid #ececea; display: flex; justify-content: space-between; align-items: center; }
.fc-aside__hd h4 { margin: 0; font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fc-primary, var(--fc-electric)); }
.fc-aside__row { display: grid; grid-template-columns: 28px 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 18px; border-bottom: 1px solid #f3f1eb; cursor: pointer; }
.fc-aside__row:hover { background: #faf9f5; }
.fc-aside__row .stripes { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.fc-aside__rank { font-family: var(--fc-font-mono); font-size: 11px; color: rgba(0,0,0,.45); }
.fc-aside__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 14px; color: var(--fc-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-aside__meta { font-family: var(--fc-font-mono); font-size: 10px; color: rgba(0,0,0,.45); letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .fc-mhome,
  .pg {
    grid-template-columns: 1fr;
  }

  .fc-rail {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid #ececea;
  }

  .fc-rail__brand {
    position: static;
    width: 124px;
    min-width: 124px;
    height: 44px;
    padding: 8px 0 8px 4px;
    border-right: 0;
    border-bottom: 0;
  }

  .fc-rail__btn {
    flex-direction: row;
    width: auto;
    min-width: 76px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .fc-rail__sep {
    width: 1px;
    height: 32px;
    margin: 0 2px;
    flex-shrink: 0;
  }

  .fc-rail__premium-wrap {
    width: 54px;
    min-width: 54px;
  }

  .fc-rail__premium {
    width: 44px;
    height: 44px;
  }

  .fc-rail__join {
    width: auto;
    min-width: 64px;
    min-height: 44px;
    padding: 0 14px;
    flex-shrink: 0;
  }

  .fc-rail__guest-actions {
    flex-direction: row;
    gap: 4px;
  }

  .fc-rail__login {
    width: auto;
    min-width: 64px;
    min-height: 44px;
    padding: 0 10px;
  }

  .fc-topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .fc-topbar__menu {
    overflow-x: auto;
    gap: 12px;
  }

  /* FAN-518: .fc-topbar__menu's overflow-x:auto above also clips overflow-y
     (browsers force the visible axis to auto once the other axis isn't
     visible), which clipped the absolutely-positioned .fc-nd__panel to
     invisible at tablet widths. Escape to a fixed overlay sheet here too —
     .fc-topbar stays a fixed 64px single row down to 641px, matching the
     top offset below; the 640px query overrides with its own top for the
     wrapped/taller mobile topbar. */
  .fc-nd--countries .fc-nd__panel,
  .fc-nd--leagues .fc-nd__panel,
  .fc-nd--teams .fc-nd__panel,
  .fc-nd--yourfc .fc-nd__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 64px;
    width: auto;
  }

  .fc-topbar__menu a,
  .fc-topbar__cta,
  .fc-topbar__icon,
  .fc-topbar__avatar {
    min-height: 44px;
  }

  .pg__inner {
    max-width: 100%;
    padding: 24px 20px 80px;
  }

  footer [style*="margin-left: 112px"] {
    margin-left: 0 !important;
  }

  [dir="rtl"] footer [style*="margin-left: 112px"] {
    margin-right: 0 !important;
  }

  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .fc-rail {
    padding: 8px;
  }

  .fc-rail__brand {
    min-width: 112px;
    width: 112px;
  }

  .fc-rail__btn > span:not(.ico):not(.badge),
  .fc-rail__premium-label {
    display: none;
  }

  .fc-rail__btn {
    min-width: 44px;
    justify-content: center;
  }

  .fc-rail__join {
    min-width: 54px;
    padding: 0 12px;
  }

  .fc-rail__login {
    min-width: 54px;
    padding: 0 8px;
  }

  .fc-topbar {
    min-height: 58px;
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 14px;
    padding-inline-end: max(16px, env(safe-area-inset-right));
  }

  .fc-topbar__right {
    min-width: 0;
    flex-shrink: 1;
    padding-inline-end: 4px;
  }

  .fc-search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    height: 44px;
  }

  .fc-team-modal { padding: 24px 12px; align-items: stretch; }
  .fc-team-modal__dialog { max-height: calc(100vh - 48px); }
  .fc-team-modal__hd { padding: 20px 18px 14px; }
  .fc-team-modal__hd h2 { font-size: 27px; }
  .fc-team-modal__search { margin: 16px 18px 0; }
  .fc-team-modal__examples { padding: 12px 18px 2px; }
  .fc-team-modal__body { padding: 12px 18px 20px; }
  .fc-team-modal__grid { grid-template-columns: 1fr; }
  .fc-team-modal__ft { align-items: flex-start; flex-direction: column; padding: 14px 18px; }

  .fc-topbar__menu {
    display: flex;
    order: 4;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-padding-inline-end: 20px;
  }

  .fc-topbar__menu > :last-child { margin-inline-end: 4px; }

  .fc-topbar__cta {
    height: auto;
    min-height: 44px;
    min-width: 172px;
    max-width: none;
    padding: 8px 12px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  [dir="rtl"] .fc-topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .fc-nd {
    height: 44px;
  }

  .fc-nd--countries .fc-nd__panel,
  .fc-nd--leagues .fc-nd__panel,
  .fc-nd--teams .fc-nd__panel,
  .fc-nd--yourfc .fc-nd__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 118px;
    width: auto;
  }

  .pg__inner {
    padding: 22px 16px 72px;
  }
}


/* ─── Dark theme overrides ─── */
[data-theme="dark"] { background: #0a0a0a; color: #f5f5f5; }
[data-theme="dark"] .fc-mhome { background: #0a0a0a; color: #f5f5f5; }
[data-theme="dark"] .fc-rail { background: #0f0f0f; border-right: 1px solid #1f1f1f; }
[data-theme="dark"] .fc-rail__btn { color: #d4d4d4; }
[data-theme="dark"] .fc-rail__btn:hover { background: #1a1a1a; color: #fff; }
[data-theme="dark"] .fc-rail__btn.active { background: #1f1f1f; color: #fff; }
[data-theme="dark"] .fc-rail__brand,
[data-theme="dark"] .fc-rail__brand-name { color: #fff; }
[data-theme="dark"] .fc-topbar { background: #0a0a0a; border-bottom: 1px solid #1f1f1f; }
[data-theme="dark"] .fc-topbar__search { background: #1a1a1a; border: 1px solid #2a2a2a; color: #fff; }
[data-theme="dark"] .fc-topbar__search::placeholder { color: rgba(255,255,255,.45); }
[data-theme="dark"] .fc-topbar__icon { color: #d4d4d4; }
[data-theme="dark"] .fc-topbar__icon:hover { background: #1a1a1a; color: #fff; }
[data-theme="dark"] .fc-feed__greet,
[data-theme="dark"] .fc-rail-row h3,
[data-theme="dark"] .fc-ccard__title,
[data-theme="dark"] .fc-tcard__name,
[data-theme="dark"] .fc-aside__name { color: #fff; }
[data-theme="dark"] .fc-feed__sub,
[data-theme="dark"] .fc-rail-row .more,
[data-theme="dark"] .fc-ccard__sub,
[data-theme="dark"] .fc-tcard__meta,
[data-theme="dark"] .fc-aside__rank,
[data-theme="dark"] .fc-aside__meta { color: rgba(255,255,255,.55); }
[data-theme="dark"] .fc-tab { color: #fff; }
[data-theme="dark"] .fc-tab.active { background: #fff; color: #000; }
[data-theme="dark"] .fc-tab:hover:not(.active) { background: rgba(255,255,255,.08); }
[data-theme="dark"] .fc-ccard__sub { color: #FF8B3D; }
[data-theme="dark"] .fc-ccard__sub-link .fc-ccard__sub { text-decoration-color: rgba(255,139,61,.5); }
[data-theme="dark"] .fc-ccard__sub-link:hover .fc-ccard__sub { background: var(--fc-electric); color: #fff; }
[data-theme="dark"] .fc-rail-row .more { color: #FF8B3D; }
[data-theme="dark"] .fc-rail-row .more:hover { background: var(--fc-electric); color: #fff; }
[data-theme="dark"] .fc-ccard__title-link:hover .fc-ccard__title { background: var(--fc-electric); color: #fff; box-shadow: 0 0 0 2px var(--fc-electric); }
[data-theme="dark"] .fc-ccard__tag { background: #1f1f1f; color: rgba(255,255,255,.75); }
[data-theme="dark"] .fc-ccard__hq { background: rgba(255,255,255,.92); color: #000; }
[data-theme="dark"] .fc-ccard__like { color: rgba(255,255,255,.55); }
[data-theme="dark"] .fc-ccard__like:hover { background: rgba(225,29,72,.18); color: #ff5c7a; }
[data-theme="dark"] .fc-tcard,
[data-theme="dark"] .fc-aside { background: #141414; border-color: #2a2a2a; }
[data-theme="dark"] .fc-aside__hd,
[data-theme="dark"] .fc-aside__row { border-color: #2a2a2a; }
[data-theme="dark"] .fc-aside__row:hover { background: #1a1a1a; }
[data-theme="dark"] .fc-tile-bordered,
[data-theme="dark"] .fc-tile { background: #141414; border-color: #2a2a2a; color: #fff; }
[data-theme="dark"] .fc-tile__title { color: #fff; }
[data-theme="dark"] .fc-tile__sub,
[data-theme="dark"] .fc-tile__num { color: rgba(255,255,255,.55); }
[data-theme="dark"] .fc-feed__greet .play-orb { color: #000; }


/* ─── Chantions League table (compact, spreadsheet-style) ─── */
.fc-cl { padding-bottom: 0; }
.fc-cl__legend { display: grid; grid-template-columns: 32px 1fr minmax(280px, 2fr); gap: 16px; align-items: center; padding: 14px 24px; border-bottom: 1px solid #ececea; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .08em; color: rgba(0,0,0,.45); text-transform: uppercase; }
.fc-cl__stats-hd { display: grid; grid-template-columns: repeat(6, 1fr) 52px; gap: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.fc-cl__stats-hd .pts { color: var(--fc-black); font-weight: 700; text-align: right; }

.fc-cl__row { display: grid; grid-template-columns: 32px 1fr minmax(280px, 2fr); gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid #f3f1eb; cursor: pointer; transition: background var(--fc-t-fast); }
.fc-cl__row:hover { background: #faf9f5; }
.fc-cl__row.is-self { background: rgba(214,255,0,.18); }
.fc-cl__row.is-self:hover { background: rgba(214,255,0,.28); }

.fc-cl__rank { font-family: var(--fc-font-mono); font-size: 12px; color: rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.fc-cl__team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fc-cl__teamtxt { min-width: 0; }
.fc-cl__name { font-family: var(--fc-font-display); font-weight: 700; font-size: 15px; color: var(--fc-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.fc-cl__songs { font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(0,0,0,.5); margin-top: 3px; text-transform: uppercase; }

.fc-cl__stats { display: grid; grid-template-columns: repeat(6, 1fr) 52px; gap: 8px; text-align: center; font-family: var(--fc-font-mono); font-size: 12px; color: rgba(0,0,0,.55); font-variant-numeric: tabular-nums; align-items: center; }
.fc-cl__stats .pts { font-size: 14px; font-weight: 700; color: var(--fc-black); text-align: right; }

.fc-cl__foot { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px; border-top: 1px solid #ececea; font-family: var(--fc-font-mono); font-size: 10px; letter-spacing: .06em; color: rgba(0,0,0,.45); text-transform: uppercase; line-height: 1.5; }
.fc-cl__foot .more { align-self: flex-end; color: #F26B1F; text-decoration: none; padding: 2px 6px; border-radius: 3px; transition: background var(--fc-t-fast), color var(--fc-t-fast); }
.fc-cl__foot .more:hover { background: var(--fc-electric); color: #fff; }

@media (max-width: 700px) {
  .fc-cl__legend { display: none; }
  .fc-cl__row {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
  }
  .fc-cl__rank { align-self: start; padding-top: 8px; }
  .fc-cl__team { min-width: 0; }
  .fc-cl__stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    text-align: left;
  }
  .fc-cl__stats > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 7px 6px;
    background: #faf9f5;
    border-radius: 4px;
  }
  .fc-cl__stats > span::before {
    content: attr(data-label);
    color: rgba(0,0,0,.48);
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .fc-cl__stats .pts { font-size: 12px; text-align: left; }
}

/* Dark mode */
[data-theme="dark"] .fc-cl__legend,
[data-theme="dark"] .fc-cl__foot { color: rgba(255,255,255,.5); border-color: #2a2a2a; }
[data-theme="dark"] .fc-cl__stats-hd .pts,
[data-theme="dark"] .fc-cl__name,
[data-theme="dark"] .fc-cl__stats .pts { color: #fff; }
[data-theme="dark"] .fc-cl__row { border-color: #2a2a2a; }
[data-theme="dark"] .fc-cl__row:hover { background: #1a1a1a; }
[data-theme="dark"] .fc-cl__row.is-self { background: rgba(214,255,0,.12); }
[data-theme="dark"] .fc-cl__rank,
[data-theme="dark"] .fc-cl__songs,
[data-theme="dark"] .fc-cl__stats { color: rgba(255,255,255,.55); }
[data-theme="dark"] .fc-cl__foot .more { color: #FF8B3D; }
[data-theme="dark"] .fc-cl__foot .more:hover { background: var(--fc-electric); color: #fff; }

/* FAN-419: keyboard focus must stay visible where outlines are reset */
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fc-electric, #5000FF);
  outline-offset: 2px;
}

.fc-nd__search input:focus,
.fc-nd__search input:focus-visible,
.fc-search input:focus,
.fc-search input:focus-visible,
.fc-team-modal__search input:focus,
.fc-team-modal__search input:focus-visible,
.fc-team-picker__search:focus-visible,
.fc-team-picker__fallback:focus-visible {
  outline: none;
}