/* ══════════════════════════════════════════════════════
   UKFL DYNASTY HUB — Shared Stylesheet
   Brand: Navy #162241 · Red #E42E2C · Gold #E0AA3E
   Position colors: Sleeper defaults
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── backgrounds ── */
  --bg:    #0d1220;
  --bg2:   #162241;
  --bg3:   #1c2d55;
  --bg4:   #223369;

  /* ── borders ── */
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.16);

  /* ── text ── */
  --text:   #eef0f6;
  --muted:  #7d8baa;
  --muted2: #a0adcc;

  /* ── UKFL brand ── */
  --gold:   #E0AA3E;
  --red:    #E42E2C;
  --navy:   #162241;

  /* ── accent (gold as primary) ── */
  --accent:      #E0AA3E;
  --accent-dim:  rgba(224,170,62,0.15);
  --accent-glow: rgba(224,170,62,0.3);

  /* ── semantic colours ── */
  --green:    #3ecf8e;
  --green-bg: rgba(62,207,142,0.12);
  --amber:    #E0AA3E;
  --amber-bg: rgba(224,170,62,0.12);
  --red-bg:   rgba(228,46,44,0.14);
  --blue-bg:  rgba(96,168,240,0.12);

  /* ── Sleeper position colours ── */
  --qb:    #F06A27;
  --qb-bg: rgba(240,106,39,0.13);
  --rb:    #4DBF91;
  --rb-bg: rgba(77,191,145,0.13);
  --wr:    #60A8F0;
  --wr-bg: rgba(96,168,240,0.13);
  --te:    #FAAC58;
  --te-bg: rgba(250,172,88,0.13);

  /* ── misc ── */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow:    0 2px 8px rgba(0,0,0,0.4);
}

:root.light {
  --bg:    #f0f2f8;
  --bg2:   #ffffff;
  --bg3:   #e8ecf5;
  --bg4:   #dce2f0;
  --border:  rgba(22,34,65,0.1);
  --border2: rgba(22,34,65,0.18);
  --text:  #0d1220;
  --muted: #5a6680;
  --muted2:#3d4d6a;
  --accent:      #c08820;
  --accent-dim:  rgba(192,136,32,0.12);
  --accent-glow: rgba(192,136,32,0.25);
  --green:    #1a9e6a;
  --green-bg: rgba(26,158,106,0.1);
  --amber:    #c08820;
  --amber-bg: rgba(192,136,32,0.1);
  --red-bg:   rgba(228,46,44,0.1);
  --qb:    #c45010;
  --qb-bg: rgba(196,80,16,0.1);
  --rb:    #1a9e6a;
  --rb-bg: rgba(26,158,106,0.1);
  --wr:    #2878c8;
  --wr-bg: rgba(40,120,200,0.1);
  --te:    #c07020;
  --te-bg: rgba(250,172,88,0.1);
}

/* smooth transitions everywhere except canvas/images */
*:not(canvas):not(img):not(.rc-bar-fill):not(.rc-bar-rookie):not(.pos-bar-fill) {
  transition: background-color .2s, border-color .2s, color .15s;
}

/* ── BASE ── */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}

/* ── TOP NAV ── */
.top-nav {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.top-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .6rem 0;
  margin-right: 1.5rem;
  flex-shrink: 0;
  text-decoration: none;
}
.top-nav-logo img {
  height: 36px;
  width: auto;
}
.top-nav-brand {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.1;
}
.top-nav-brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.page-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .85rem 1.1rem;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  margin-bottom: -3px;
  letter-spacing: 0.01em;
}
.page-tab:hover { color: var(--text); }
.page-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.page-tab.active-red { color: var(--red); border-bottom-color: var(--red); }

.theme-toggle {
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }

/* ── SECTION HEADER ── */
.section-header {
  padding: 1.5rem 2rem 1rem;
  max-width: 1280px;
  margin: 0 auto;
}
.section-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.section-title {
  font-size: clamp(1.3rem,3vw,1.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
}
.section-desc { color: var(--muted); font-size: 13px; margin-top: 4px; }
.section-desc strong { color: var(--text); font-weight: 500; }
.section-desc a { color: var(--gold); text-decoration: none; }

/* ── SHARED INNER TABS ── */
.tabs, .season-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.tab-btn, .stab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .6rem 1.1rem;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.tab-btn:hover, .stab-btn:hover { color: var(--text); }
.tab-btn.active, .stab-btn.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 500; }

.tab-pane, .stab-pane { display: none; }
.tab-pane.active, .stab-pane.active { display: block; }

/* ── CARDS / STAT CARDS ── */
.cards, .stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
  gap: 10px;
  margin-bottom: 1.75rem;
}
.card, .stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.card-label, .sc-label {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card-value, .sc-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  font-family: 'DM Mono', monospace;
}
.card-value.green, .sc-value.green { color: var(--green); }
.card-value.red,   .sc-value.red   { color: var(--red); }
.card-value.amber, .sc-value.amber { color: var(--amber); }

/* ── TABLES ── */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}
select {
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  outline: none;
}
select:hover { border-color: var(--gold); }
select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--accent-dim); }

.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
table { width: 100%; border-collapse: collapse; }
thead { background: var(--bg3); }
th {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-align: left;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
td {
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(224,170,62,0.04); }

/* ── BADGES ── */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
}
.bQB { background: var(--qb-bg); color: var(--qb); }
.bRB { background: var(--rb-bg); color: var(--rb); }
.bWR { background: var(--wr-bg); color: var(--wr); }
.bTE { background: var(--te-bg); color: var(--te); }

.b-great  { background: var(--green-bg); color: var(--green); }
.b-value  { background: var(--green-bg); color: var(--green); }
.b-fair   { background: rgba(255,255,255,0.06); color: var(--muted); }
.b-reach  { background: var(--amber-bg); color: var(--amber); }
.b-bigreach { background: var(--red-bg); color: var(--red); }
.b-noadp  { background: rgba(255,255,255,0.04); color: var(--muted); }

.b-Ap { background: var(--green-bg); color: var(--green); }
.b-A  { background: var(--green-bg); color: var(--green); }
.b-B  { background: var(--blue-bg);  color: var(--wr); }
.b-C  { background: var(--amber-bg); color: var(--amber); }
.b-D  { background: var(--red-bg);   color: var(--red); }

/* ── GRADE BADGES ── */
.grade { display:inline-block; font-size:12px; font-weight:700; padding:2px 9px; border-radius:5px; font-family:'DM Mono',monospace; }
.grade-Ap { background: var(--green-bg); color: var(--green); }
.grade-A  { background: var(--green-bg); color: var(--green); }
.grade-B  { background: var(--blue-bg);  color: var(--wr); }
.grade-C  { background: var(--amber-bg); color: var(--amber); }
.grade-D  { background: var(--red-bg);   color: var(--red); }

/* ── DIFF COLOURS ── */
.dp { color: var(--green); font-family: 'DM Mono', monospace; font-size: 12px; }
.dn { color: var(--red);   font-family: 'DM Mono', monospace; font-size: 12px; }
.dz { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; }

/* ── TABLE CELL HELPERS ── */
.pn { font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); }
.pw { font-weight:500; color:var(--text); }
.av { font-family:'DM Mono',monospace; font-size:12px; color:var(--muted); }
.on { font-size:12px; color:var(--muted); }

/* ── LOADING BAR ── */
.loading-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.loading-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── PLAYER AVATARS ── */
.player-avatar    { width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top center;background:var(--bg3);border:1px solid var(--border);flex-shrink:0;display:inline-block;vertical-align:middle; }
.player-avatar-sm { width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:top center;background:var(--bg3);border:1px solid var(--border);flex-shrink:0;display:inline-block;vertical-align:middle; }
.player-avatar-lg { width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top center;background:var(--bg3);border:2px solid var(--border2);flex-shrink:0; }
.avatar-cell { display:flex; align-items:center; gap:8px; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  max-width: 500px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close { position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;line-height:1; }
.modal-close:hover { color: var(--gold); }
.modal-avatar-wrap { display:flex;align-items:center;gap:12px;margin-bottom:1.25rem; }
.modal-avatar-lg { width:60px;height:60px;border-radius:12px;object-fit:cover;object-position:top center;background:var(--bg3);border:2px solid var(--border2);flex-shrink:0; }
.modal-player-name { font-size:1.15rem;font-weight:600;color:#fff;margin-bottom:3px; }
.modal-meta { font-size:12px;color:var(--muted);margin-bottom:1.25rem; }
.modal-values { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1.25rem; }
.mv-card { background:var(--bg3);border-radius:var(--radius);padding:.7rem .9rem;text-align:center; }
.mv-source { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px; }
.mv-val { font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:500;color:#fff; }
.mv-sub { font-size:10px;color:var(--muted);margin-top:2px; }
.modal-links { display:flex;gap:8px;flex-wrap:wrap; }
.modal-link { font-size:11px;padding:5px 12px;border-radius:var(--radius);border:1px solid var(--border2);color:var(--muted);text-decoration:none; }
.modal-link:hover { color: var(--gold); border-color: var(--gold); }

/* ── ROSTER CARDS (draft page) ── */
.roster-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px; }
.roster-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem; }
.roster-card:hover { border-color: var(--border2); }
.rc-header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.9rem;gap:8px; }
.rc-name { font-weight:600;font-size:15px;color:#fff; }
.rc-team { font-size:11px;color:var(--muted);margin-top:2px; }
.rc-pos-row { display:flex;gap:6px;margin-bottom:6px;align-items:center; }
.rc-pos-label { font-size:11px;color:var(--muted);width:22px;font-family:'DM Mono',monospace; }
.rc-bar-wrap { flex:1;height:14px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;position:relative; }
.rc-bar-fill { height:100%;border-radius:3px;position:absolute;left:0;top:0; }
.rc-bar-rookie { height:100%;border-radius:3px;position:absolute;top:0; }
.rc-count { font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;margin-left:6px;white-space:nowrap;min-width:100px; }
.rc-rookies { margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border); }
.rc-rookie-label { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:4px; }
.rc-rookie-item { font-size:12px;color:var(--text);display:flex;justify-content:space-between;padding:2px 0; }
.rc-strength { font-size:11px;color:var(--muted);margin-top:6px;padding-top:6px;border-top:1px solid var(--border); }
.ra-credit { font-size:10px;color:var(--muted);margin-top:6px; }
.ra-credit a { color:var(--gold);text-decoration:none; }
.section-label { font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:.75rem;margin-top:1.5rem; }
.section-label:first-child { margin-top:0; }

/* ── CHART ── */
.chart-wrap { position:relative;width:100%;height:360px; }
.chart-legend { display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px; }
.legend-item { display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted); }
.legend-dot { width:9px;height:9px;border-radius:50%;display:inline-block; }
.chart-note { font-size:11px;color:var(--muted);margin-top:8px; }

/* ── POWER RANKINGS ── */
.pr-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:10px; }
.pr-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.1rem 1.2rem;cursor:pointer; }
.pr-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.pr-card.expanded { border-color: var(--gold); background: var(--bg3); }
.pr-header { display:flex;align-items:center;gap:12px;margin-bottom:.9rem; }
.pr-rank { font-family:'DM Mono',monospace;font-size:1.4rem;font-weight:500;color:var(--muted);min-width:2.5rem; }
.pr-rank.top3 { color: var(--gold); }
.pr-team { flex:1;min-width:0; }
.pr-owner { font-weight:600;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pr-teamname { font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }
.pr-score { text-align:right;flex-shrink:0; }
.pr-score-val { font-family:'DM Mono',monospace;font-size:1.1rem;font-weight:500;color:#fff; }
.pr-score-label { font-size:10px;color:var(--muted);margin-top:2px; }

.pos-bars { display:flex;flex-direction:column;gap:5px; }
.pos-bar-row { display:grid;grid-template-columns:26px 1fr 90px;gap:6px;align-items:center; }
.pos-bar-label { font-size:10px;font-family:'DM Mono',monospace;font-weight:600; }
.pos-bar-label.QB { color: var(--qb); }
.pos-bar-label.RB { color: var(--rb); }
.pos-bar-label.WR { color: var(--wr); }
.pos-bar-label.TE { color: var(--te); }
.pos-bar-track { height:8px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;position:relative; }
.pos-bar-fill { height:100%;border-radius:3px;position:absolute;left:0;top:0;transition:width .6s cubic-bezier(.4,0,.2,1); }
.pos-bar-vals { font-size:10px;font-family:'DM Mono',monospace;color:var(--muted);text-align:right;white-space:nowrap; }

.pr-detail { display:none;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border); }
.pr-card.expanded .pr-detail { display:block; }
.pr-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:.75rem; }
.pr-detail-stat { background:var(--bg4);border-radius:var(--radius);padding:.6rem .75rem; }
.pds-label { font-size:10px;color:var(--muted);margin-bottom:2px;text-transform:uppercase;letter-spacing:0.06em; }
.pds-val { font-family:'DM Mono',monospace;font-size:13px;color:#fff; }
.pl-header { font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px; }
.pl-row { display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--border);font-size:11px; }
.pl-row:last-child { border:none; }
.pl-name { color:var(--text);cursor:pointer;text-decoration:underline dotted; }
.pl-name:hover { color: var(--gold); }
.pl-pos { font-family:'DM Mono',monospace;font-size:10px;margin-right:4px; }
.pl-val { font-family:'DM Mono',monospace;color:var(--muted); }

/* ── NEEDS TABLE ── */
.needs-status-good { color: var(--green); }
.needs-status-warn { color: var(--amber); }
.needs-status-bad  { color: var(--red); }

/* ── VS TOGGLE ── */
.vs-toggle { display:flex;gap:4px; }
.vs-btn { background:var(--bg3);border:1px solid var(--border);color:var(--muted);font-size:11px;font-family:'DM Mono',monospace;padding:4px 10px;border-radius:20px;cursor:pointer; }
.vs-btn:hover { color:var(--text); }
.vs-btn.active { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight:600; }

/* ── STATUS BAR (season page) ── */
.season-status-bar { background:var(--bg2);border-bottom:1px solid var(--border);padding:.6rem 2rem; }
.season-status-inner { max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap; }
.status-pill { font-size:11px;font-family:'DM Mono',monospace;padding:3px 10px;border-radius:20px;background:var(--amber-bg);color:var(--amber);border:1px solid rgba(224,170,62,0.25); }
.status-pill.live { background:var(--green-bg);color:var(--green);border-color:rgba(62,207,142,0.25); }
.status-pill.err  { background:var(--red-bg);color:var(--red);border-color:rgba(228,46,44,0.25); }
.vb-sources { display:flex;gap:12px;align-items:center;flex-wrap:wrap; }
.vb-source { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted); }
.vb-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.vb-dot.ra { background:var(--gold); }
.vb-dot.fc { background:var(--green); }
.vb-dot.blend { background:var(--wr); }
.vb-st { font-family:'DM Mono',monospace;font-size:10px; }
.vb-div { width:1px;height:14px;background:var(--border2); }
.blend-controls { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto; }
.blend-grp { display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted2); }
.blend-grp input[type=range] { width:65px;accent-color:var(--gold);cursor:pointer; }
.blend-pct { font-family:'DM Mono',monospace;font-size:11px;color:var(--text);min-width:28px; }

/* ── COMING SOON ── */
.coming-soon { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;gap:.75rem; }
.cs-icon { font-size:2.5rem;opacity:.35; }
.cs-title { font-size:1rem;font-weight:600;color:var(--muted); }
.cs-desc { font-size:12px;color:var(--muted);max-width:360px;line-height:1.7; }

/* ── SEASON MAIN ── */
.season-main { max-width:1280px;margin:0 auto;padding:1.25rem 2rem 4rem; }
.draft-main  { max-width:1280px;margin:0 auto;padding:0 2rem 4rem; }

/* ── FOOTER ── */
footer { text-align:center;padding:1.5rem 2rem;font-size:11px;color:var(--muted);border-top:1px solid var(--border); }
footer a { color:var(--gold);text-decoration:none; }

/* ── NEEDS GRID (season page) ── */
.needs-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px; }
.needs-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.2rem; }
.needs-card:hover { border-color:var(--border2); }
.nc-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem; }
.nc-owner { font-weight:600;font-size:14px;color:#fff; }
.nc-team { font-size:11px;color:var(--muted);margin-top:1px; }
.nc-pos-row { display:grid;grid-template-columns:30px 1fr 80px;gap:6px;align-items:center;margin-bottom:4px; }
.nc-pos-label { font-size:10px;font-family:'DM Mono',monospace;font-weight:600; }
.nc-bar-track { height:10px;background:rgba(255,255,255,0.05);border-radius:3px;overflow:hidden;position:relative; }
.nc-bar-fill { height:100%;border-radius:3px;position:absolute;left:0;top:0; }
.nc-val-label { font-size:10px;font-family:'DM Mono',monospace;color:var(--muted);text-align:right; }
.nc-alert { display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;font-family:'DM Mono',monospace;font-weight:600; }
.nc-alert.thin { background:var(--red-bg);color:var(--red); }
.nc-alert.ok   { background:var(--green-bg);color:var(--green); }
.nc-summary { margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted); }

@media(max-width:640px) {
  .top-nav { padding: 0 1rem; }
  .top-nav-brand small { display:none; }
  .draft-main,.season-main,.section-header,.season-status-bar { padding-left:1rem;padding-right:1rem; }
  .roster-grid,.pr-grid,.needs-grid { grid-template-columns:1fr; }
  .modal-values { grid-template-columns:1fr 1fr; }
  .blend-controls { margin-left:0; }
}