:root { 
    color-scheme: light dark; 
}
  html, body { height: 100%; }
  body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

  /* Header */
  header {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
  }
  header h1 { margin: 0; font-size: 18px; }

  /* ======= Layout (main ~2/3, FA auto; starts collapsed) ======= */
  .container {
    display: grid; gap: 16px;
    grid-template-columns: minmax(0, 2fr) minmax(44px, max-content);
    height: calc(100% - 58px);
  }
  .container.fa-collapsed { grid-template-columns: 1fr 44px; }

  /* Right panel auto-sizes to its content; collapsed = 44px */
  .right-panel {
    width: auto; min-width: 0;
    transition: width .18s ease, min-width .18s ease;
    position: relative;
  }
  .right-panel.collapsed { width: 44px; }
/* Make sure the aside can host an absolutely-positioned label */
#freeAgentsPanel { position: relative; }

/* When collapsed, show a vertical label that uses aria-label text */
#freeAgentsPanel.collapsed::before {
  content: attr(aria-label);             /* "Free Agents" */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);             /* keeps text upright for vertical-rl */
  position: absolute;
  top: 56px;                              /* clears your panel header/toggle */
  bottom: 56px;                           /* symmetrical padding at bottom */
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg);
  opacity: 0.85;
  pointer-events: none;                   /* clicks go to the toggle */
}

/* Optional: add a subtle divider so it reads like a rail */
#freeAgentsPanel.collapsed {
  box-shadow: inset 1px 0 0 var(--border);
}

  /* Free Agents table containment + no-wrap + graceful scroll */
  #freeAgentsPanel .panel-body { overflow-x: auto; overscroll-behavior: contain; }
  #freeAgentsPanel table { width: max-content; table-layout: auto; }
  #freeAgentsPanel th, #freeAgentsPanel td { white-space: nowrap; }
  #freeAgentsPanel td, #freeAgentsPanel th { padding: 6px 8px; font-size: 12.5px; }

  /* Utilities */
  .hidden { display: none !important; }
  .pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; }
  .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .btnrow { display:flex; gap:8px; flex-wrap:wrap; }
  .btn { padding:10px 12px; border-radius:10px; cursor:pointer; }
  .namecell { display:flex; align-items:center; gap:8px; }
  .avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }

  /* Forms */
  fieldset { border-radius:12px; margin:12px 0; padding:12px; }
  legend { padding:0 6px; font-weight:600; }
  label { display:block; font-size:12px; margin:6px 0; }
  input, select, button { font:inherit; }
  input[type="text"], select { width:100%; padding:8px 10px; border-radius:10px; }

  /* Panel */
  .panel { border-radius:12px; padding:0; margin-top:8px; }
  .panel-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-weight:600; }
  .panel-body { padding:12px; }
  .panel-toggle { border-radius:8px; width:28px; height:28px; cursor:pointer; transition:transform .2s; }
  .collapsed .panel-body { display:none; }
  .collapsed .panel-toggle { transform:rotate(180deg); }

  /* Panel header / chevron always visible */
  .panel-header { gap: 8px; min-height: 40px; }
  .panel-header span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel-toggle { display:inline-grid; place-items:center; user-select:none; z-index:3; }
  .right-panel.collapsed .panel-header span { display:none; }
  .right-panel.collapsed .fa-controls,
  .right-panel.collapsed #faTableWrap,
  .right-panel.collapsed h3 { display:none; }
  .panel-toggle::after { content:"⟩"; font-weight:700; line-height:1; }

  /* Matchup cards */
  .matchup{
    display:grid; grid-template-columns: 1fr 48px 1fr;
    align-items:center; gap:12px; margin: 8px 0 16px 0;
  }
  .teamcard {
    width: 220px; padding: 12px; border-radius: 12px; text-align: center;
    padding-top: 88px; margin: 0 auto; position: relative;
  }
  .teamlogo { width:64px; height:64px; border-radius:10px; object-fit:cover; display:block; margin:6px auto 10px; }
  .teamcard-title { font-size: 12px; }
  .teamcard-name { font-weight: bold; margin-top: 4px; }
  .teamcard-owner { font-size: 13px; }
  .vs { margin: 0 12px; font-weight: bold; font-size: 18px; align-self: center; }
  .teamcard-proj .value { font-variant-numeric: tabular-nums; }

  /* Rosters area: keep two separate tables, fill width */
  .matchup-area {
    display:grid; grid-template-columns: 1fr 48px 1fr; gap:16px; align-items:flex-start;
  }
  .team-side { min-width:0; }
  .vs-col { text-align:center; font-weight:700; font-size:18px; align-self:start; }
  .team-side h3 { margin-top:0; }

  /* Roster tables share same look as FA (zebra/hover/header from theme vars) */
  .team-side table {
    width:100%;
    table-layout:fixed;
    border-collapse:separate; border-spacing:0;
    border-radius:12px; overflow:hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    background: var(--panel-bg, transparent);
  }
  .team-side thead th {
    position:sticky; top:0; z-index:1;
    background: var(--table-head-bg);
    font-weight:600;
    backdrop-filter: saturate(1.05) blur(2px);
  }
  .team-side th, .team-side td { padding:8px 10px; line-height:1.25; }
  .team-side tbody tr:nth-child(odd)  { background: var(--row-odd); }
  .team-side tbody tr:nth-child(even) { background: var(--row-even); }
  .team-side tbody tr:hover           { background: var(--row-hover); }
  .team-side td:nth-last-child(-n+3) { text-align:right; font-variant-numeric: tabular-nums; }

  /* FA controls */
  .fa-header { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; padding-bottom:6px; }
  .fa-controls { display:flex; gap:8px; align-items:center; margin-bottom:8px; position:sticky; top:0; padding-bottom:8px; }
  .pos-filter button { padding:6px 10px; border-radius:999px; cursor:pointer; font-size:12px; }
  .pos-filter .active { font-weight:600; }

  /* Generic tables baseline */
  table { border-collapse:collapse; }
  th, td { text-align:left; vertical-align:top; font-size:13px; }
  thead th { position:sticky; top:0; z-index:1; }

  /* Bench / IR dimming */
  .is-bench td, .is-ir td { opacity:.85; }

  /* Status chips */
  .teamcard-proj{
    display:inline-flex; align-items:center; gap:6px;
    margin-top:6px; font-weight:700; font-size:14px;
    padding:6px 10px; border-radius:999px; border:1px solid transparent;
    font-variant-numeric: tabular-nums;
  }
  .teamcard-proj.win  { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.45); }
  .teamcard-proj.win .value  { color:#10b981; }
  .teamcard-proj.lose { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.45); }
  .teamcard-proj.lose .value { color:#ef4444; }
  .teamcard-proj.tie  { background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.45); }
  .teamcard-proj.tie .value  { color:#9aa4af; }

  .teamcard-fmv{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:999px; font-weight:600;
    background: var(--chip-bg, #f2f3f5); color: var(--chip-fg, #111);
    font-size: 12px; line-height: 1;
  }
  .teamcard-fmv .value{ min-width:4ch; text-align:right; font-variant-numeric: tabular-nums; }
  .teamcard-fmv.win  { background:#e8f7ed; color:#0a7a3d; }
  .teamcard-fmv.lose { background:#ffefef; color:#c12525; }

  /* Highlight the Team <select> when "ISS" */
  select.hl-iss{
    background:#9acd32 !important; color:#0a0a0a !important; border-color:#7fbf00 !important;
    box-shadow:0 0 0 2px rgba(154,205,50,.35) inset;
  }

  /* ===== Shared table theming variables (used by FA & Rosters) ===== */
  :root{
    --row-odd:  rgba(0,0,0,.03);
    --row-even: rgba(0,0,0,.06);
    --row-hover:rgba(0,0,0,.10);
    --table-head-bg: rgba(0,0,0,.07);
    --panel-bg: transparent;
  }
  table thead th{ background: var(--table-head-bg); }
  table tbody tr:nth-child(odd){  background: var(--row-odd); }
  table tbody tr:nth-child(even){ background: var(--row-even); }
  table tbody tr:hover{           background: var(--row-hover); }

  /* --- darker tints for Bench & IR (fallbacks) --- */
  :root{ --row-bench: rgba(0,0,0,.10); --row-ir: rgba(0,0,0,.14); }
  .zebra tbody tr.is-bench { background: var(--row-bench); }
  .zebra tbody tr.is-ir    { background: var(--row-ir); }
  .zebra tbody tr.is-bench td:first-child,
  .zebra tbody tr.is-ir td:first-child{ border-left:3px solid currentColor; opacity:.95; }

  /* ================= THEMES ================ */

  /* THEME 0: Amazon */
  body.theme-amazon {
    --bg:#232f3e; --fg:#ffffff; --accent:#ff9900; --accent2:#febd69; --border:#37475a; --header:#131921;
    --row-odd:  rgba(255,255,255,.02);
    --row-even: rgba(255,255,255,.06);
    --row-hover:rgba(255,153,0,.20);
    --table-head-bg: rgba(255,153,0,.16);
    --row-bench: rgba(255,255,255,.08);
    --row-ir:    rgba(255,255,255,.12);
    --panel-bg:#232f3e;
    --chip-bg:#2a384a; --chip-fg:#fff;
  }
  body.theme-amazon { background:var(--bg); color:var(--fg); }
  body.theme-amazon header { background:var(--header); border-bottom:1px solid var(--accent); }
  body.theme-amazon .btn { background:var(--accent); color:#000; border-color:var(--accent2); }
  body.theme-amazon .panel, body.theme-amazon fieldset, body.theme-amazon .tab, body.theme-amazon .tabpanes {
    background:#232f3e; border:1px solid var(--border); color:var(--fg);
  }

  /* THEME 1: Dark */
  body.theme-dark {
    --bg:#0a0a0a; --fg:#e5ffe5; --accent:#00ff80; --accent2:#00ffaa; --border:#111; --header:#111;
    --row-odd:  rgba(255,255,255,.02);
    --row-even: rgba(255,255,255,.06);
    --row-hover:rgba(0,255,128,.15);
    --table-head-bg: rgba(0,255,128,.12);
    --row-bench: rgba(255,255,255,.08);
    --row-ir:    rgba(255,255,255,.12);
    --panel-bg:#111;
    --chip-bg:#0f1a15; --chip-fg:#e5ffe5;
  }
  body.theme-dark { background:var(--bg); color:var(--fg); }
  body.theme-dark header { background:var(--header); border-bottom:1px solid var(--accent); }
  body.theme-dark .btn { background:var(--accent); color:#000; border-color:var(--accent2); }
  body.theme-dark .panel, body.theme-dark fieldset, body.theme-dark .tab, body.theme-dark .tabpanes {
    background:#111; border:1px solid var(--accent2); color:var(--fg);
  }

  /* THEME 2: Light */
  body.theme-light {
    --bg:#fafafa; --fg:#222; --accent:#007bff; --accent2:#339dff; --border:#ddd; --header:#fdfdfd;
    --row-odd:#ffffff; --row-even:#f5f8ff; --row-hover:#eaf3ff; --table-head-bg:#f1f5fb;
    --row-bench:#eef3fa; --row-ir:#e8eef7;
    --panel-bg:#fff;
    --chip-bg:#eef2f7; --chip-fg:#1a1a1a;
  }
  body.theme-light { background:var(--bg); color:var(--fg); }
  body.theme-light header { background:var(--header); border-bottom:1px solid var(--border); }
  body.theme-light .btn { background:var(--accent); color:#fff; border-color:var(--accent2); }
  body.theme-light .panel, body.theme-light fieldset, body.theme-light .tab, body.theme-light .tabpanes {
    background:#fff; border:1px solid var(--border); color:var(--fg);
  }

  /* THEME 4: Beach */
  body.theme-beach {
    --bg:#fdf6e3; --fg:#005f73; --accent:#0a9396; --accent2:#94d2bd; --border:#e9d8a6; --header:#ee9b00;
    --row-odd:#ffffff; --row-even:#f8f3e7; --row-hover:#f2ead8; --table-head-bg:#efe3c7;
    --row-bench:#f3eddf; --row-ir:#ede6d5;
    --panel-bg:#fff;
    --chip-bg:#f0f6f2; --chip-fg:#064e56;
  }
  body.theme-beach { background:var(--bg); color:var(--fg); }
  body.theme-beach header { background:var(--header); color:#fff; border-bottom:1px solid var(--accent); }
  body.theme-beach .btn { background:var(--accent); color:#fff; border-color:var(--accent2); }
  body.theme-beach .panel, body.theme-beach fieldset, body.theme-beach .tab, body.theme-beach .tabpanes {
    background:#fff; border:1px solid var(--border); color:var(--fg);
  }

  /* THEME 5: Cyberpunk */
  body.theme-cyberpunk {
    --bg:#1a001f; --fg:#f5e6ff; --accent:#ff00ff; --accent2:#ff4da6; --border:#3d004d; --header:#2a0033;
    --row-odd:  rgba(245,230,255,.03);
    --row-even: rgba(255,0,255,.10);
    --row-hover:rgba(255,77,166,.20);
    --table-head-bg: rgba(255,0,255,.18);
    --row-bench: rgba(255,77,166,.14);
    --row-ir:    rgba(255,0,255,.18);
    --panel-bg:#2a0033;
    --chip-bg:#2f0a38; --chip-fg:#f5e6ff;
  }
  body.theme-cyberpunk { background:var(--bg); color:var(--fg); }
  body.theme-cyberpunk header { background:var(--header); border-bottom:1px solid var(--accent2); }
  body.theme-cyberpunk .btn { background:var(--accent); color:#000; border-color:var(--accent2); }
  body.theme-cyberpunk .panel, body.theme-cyberpunk fieldset, body.theme-cyberpunk .tab, body.theme-cyberpunk .tabpanes {
    background:#2a0033; border:1px solid var(--accent); color:var(--fg);
  }
/* Badges + row highlights for suggestions */
:root{
  --badge-added-bg: rgba(16,185,129,.18);
  --badge-added-fg: #10b981;
  --badge-bench-bg: rgba(245,158,11,.22);
  --badge-bench-fg: #b45309;
}
.badge {
  display:inline-block; padding:2px 6px; border-radius:999px;
  font-size:11px; line-height:1; margin-left:8px;
}
.badge-added  { background: var(--badge-added-bg); color: var(--badge-added-fg); }
.badge-benched{ background: var(--badge-bench-bg); color: var(--badge-bench-fg); }

/* Row-state styling + gentle flash */
.is-added-row   { box-shadow: inset 0 0 0 2px var(--badge-added-fg); animation: rowFlash .9s ease-out 1; }
.is-benched-new { box-shadow: inset 0 0 0 2px var(--badge-bench-fg); animation: rowFlash .9s ease-out 1; }
@keyframes rowFlash { from{ filter: brightness(1.25) } to{ filter: none } }
/* Center all roster table content */
#teamTableWrap table th,
#teamTableWrap table td,
#oppTableWrap table th,
#oppTableWrap table td {
  text-align: center;
  vertical-align: middle;
}

/* Keep player avatar + name neatly inline */
#teamTableWrap .namecell,
#oppTableWrap  .namecell {
  justify-content: center;
}

  /* Theme switcher uses theme vars */
  .theme-switcher {
    display:flex; align-items:center; gap:8px;
    padding:4px 8px; border:1px solid var(--border); border-radius:10px;
    background: var(--panel-bg);
    color: var(--fg);
  }
  .theme-switcher label { font-size:12px; opacity:.9; }
  .theme-switcher select {
    font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--border);
    background: var(--bg); color: var(--fg);
  }
.suggest-btn {
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}

/* Proj button → Yellow */
.suggest-btn.proj {
  background: #facc15;   /* yellow */
  color: #111;
  border-color: #eab308;
}
.suggest-btn.proj:hover { filter: brightness(1.1); }

/* FMV button → Red */
.suggest-btn.fmv {
  background: #ef4444;   /* red */
  color: #fff;
  border-color: #c53030;
}
.suggest-btn.fmv:hover { filter: brightness(1.1); }
.suggest-btn.reset {
  background: #6b7280;   /* neutral gray */
  color: #fff;
  border-color: #4b5563;
}
.fa-already-suggested {
  opacity: .75;
}
.fa-already-suggested td:first-child::before {
  content: "✓"; color: #10b981; font-weight: 700; margin-right: 4px;
}

.suggest-btn.reset:hover { filter: brightness(1.1); }
/* FA highlight rows (better-than-current-starter) */
.fa-better-proj {
  box-shadow: inset 0 0 0 2px #eab308;  /* yellow outline */
  background-image: linear-gradient(to right, rgba(250,204,21,.18), transparent);
}
.fa-better-fmv {
  box-shadow: inset 0 0 0 2px #10b981;  /* green outline */
  background-image: linear-gradient(to right, rgba(16,185,129,.18), transparent);
}

/* Optional subtle pulse so they pop once */
@keyframes faPulse { from { filter: brightness(1.08) } to { filter:none } }
.fa-better-proj, .fa-better-fmv { animation: faPulse .7s ease-out 1; }
.fa-already-suggested { opacity: .8; }
.fa-already-suggested td:first-child::before {
  content: "✓";
  color: #10b981;
  font-weight: 700;
  margin-right: 4px;
}
/* === Global loading overlay === */
#loadingOverlay{
  position: fixed; inset: 0; display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg, #000) 70%, transparent);
  backdrop-filter: blur(2px) saturate(1.05);
  z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#loadingOverlay[aria-hidden="false"]{ opacity: 1; pointer-events: auto; }
#loadingOverlay .loading-card{
  display:grid; gap:10px; place-items:center; padding:18px 20px; border-radius:14px;
  background: var(--panel-bg, #111); color: var(--fg, #fff); border:1px solid var(--border,#333);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
#loadingOverlay .msg{ font-weight:600; font-size:14px; }
/* FMV header turns hot pink when showing pseudo-FMV anywhere in the table */
th.fmv-pseudo-th {
  background: #ff2fa8 !important;   /* HOT PINK */
  color: #1a001f !important;
  position: sticky; /* keep sticky behavior */
  top: 0;
  z-index: 2;       /* above body rows */
  text-shadow: none;
  border-bottom: 1px solid rgba(0,0,0,.1);
}

/* the tiny "p" badge you already use, reused in header */
.pfmv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  background: #1a001f;
  color: #ffb3e5; /* soft pink text inside */
  vertical-align: middle;
}
.faqs { background: var(--panel-bg, #0f172a); border: 1px solid #1f2937; border-radius: 10px; padding: 12px; }
.faqs h2 { margin-top: 0; }
.faq-list { list-style: none; padding: 0; margin: 8px 0 0; }
.faq-list li { margin: 10px 0; }
.faq-list h3 { font-size: 1rem; margin: 0 0 4px; }
.faq-list p { margin: 0; opacity: .95; }
.faq-list details { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; }
.faq-list summary { cursor: pointer; font-weight: 600; }
  /* minimal nice table styles + sort indicators */
  .fa-table { width:100%; border-collapse:collapse }
  .fa-table th, .fa-table td { padding:8px 10px; border-bottom:1px solid #83c625; white-space:nowrap }
  .fa-table thead th { position:sticky; top:0; background:var(--accent); text-align:left }
  .fa-table tbody tr:hover { background:var(--accent) }
  .sortable { cursor:pointer; user-select:none }
  .sort-ind { display:inline-block; width:1em; text-align:center; opacity:.6 }
  .sort-none .sort-ind::after { content:"↕" }
  .sort-asc  .sort-ind::after { content:"↑" }
  .sort-desc .sort-ind::after { content:"↓" }
.fa-table tbody tr.pcard-row { cursor: pointer; }
.fa-table tbody tr.pcard-row:focus { outline: 2px solid var(--accent, #0ea5e9); outline-offset: 2px; }
.bench-separator td {
  padding: 6px 0 2px;
}
.bench-sep-line {
  border-top: 2px solid #e4e4e7;  /* subtle line */
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .65;
  padding-top: 4px;
}.link-grid {
  display: grid;           /* or flex */
  gap: 1rem;
  margin-bottom: 2rem;     /* spacing before footer */
  position: relative;      /* no absolute unless needed */
}
footer, .mini-tabs
 {
  display: block;
  margin-top: 3rem;   /* or bigger if you want more spacing */
  clear: both;        /* ensures they drop below floated content */
}
/* Base look */
button.app-btn {
  background: var(--accent2);
  color: var(--on-accent, #fff);
  border: none;
  padding: .6rem 1rem;
  border-radius: .6rem;
  transition: background .15s ease, opacity .15s ease;
}

/* Applicable = active (accent1) */
button.app-btn.is-applicable {
  background: var(--accent);
}

/* Not applicable = visually dim + non-interactive */
button.app-btn[aria-disabled="true"] {
  opacity: .6;
  pointer-events: none; /* prevents clicks */
}
 .fein-banner {
    display:block;
    margin: 16px auto 8px;
    max-width: 560px;
  }
  .fein-banner img{
    width: min(92vw, 560px);
    height:auto;
    display:block;
    margin:0 auto;
    /* orange glow */
    filter:
      drop-shadow(0 0 24px rgba(255,140,0,.55))
      drop-shadow(0 0 60px rgba(255,140,0,.25));
  }
  /* optional: center the banner area more distinctly */
  .fein-banner:focus-visible { outline: 2px solid #ffa94d; border-radius:12px; }