@font-face {
  font-family: "Steelfish Local";
  src: local("Steelfish Rg"), local("Steelfish Regular"), local("Steelfish");
  font-style: normal;
  font-weight: 400 600;
}

@font-face {
  font-family: "Steelfish Local";
  src: local("Steelfish Bd"), local("Steelfish Bold");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Steelfish Local";
  src: local("Steelfish Eb"), local("Steelfish ExtraBold");
  font-style: normal;
  font-weight: 800 900;
}

@font-face {
  font-family: "Steelfish Local";
  src: local("Steelfish Eb It"), local("Steelfish ExtraBold Italic");
  font-style: italic;
  font-weight: 700 900;
}

:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --display-font: "Steelfish Local", "Steelfish", "Arial Narrow", Impact, sans-serif;
  --ink: #f8f9ff;
  --muted: #aeb7ce;
  --faint: #7d89a2;
  --navy-950: #061130;
  --navy-900: #071538;
  --navy-850: #0b1d4b;
  --navy-800: #071538;
  --navy-760: #0b1d4b;
  --navy-700: #12285a;
  --navy-600: #27365c;
  --yellow: #f5ef45;
  --yellow-soft: #f5ef45;
  --blue: #82a8ff;
  --green: #77d4a7;
  --red: #f08383;
  --line: #27365c;
  --line-strong: #3a4c76;
  --hq-bg: #061130;
  --hq-surface: #071538;
  --hq-surface-2: #0b1d4b;
  --hq-control: #09183a;
  --hq-header: #050d2a;
  --hq-table-head: #0c1f49;
  --hq-row: #071638;
  --hq-row-alt: #0b1e46;
  --hq-row-line: rgba(145, 166, 213, .2);
  --hq-stripe-1: #f5ef45;
  --hq-stripe-2: #f23fd0;
  --hq-stripe-3: #1e56cf;
  --hq-shadow: rgba(0, 0, 0, .32);
  --hq-logo-filter: invert(1);
}

html[data-theme="light"],
body[data-theme="light"] {
  color-scheme: light;
  --ink: #080909;
  --muted: #696d72;
  --faint: #85898e;
  --navy-950: #f7f7f5;
  --navy-900: #ffffff;
  --navy-850: #f0f0ee;
  --navy-800: #ffffff;
  --navy-760: #e9ebee;
  --navy-700: #dfe2e4;
  --navy-600: #c6c7c5;
  --yellow: #f4df36;
  --yellow-soft: #080909;
  --blue: #d1880d;
  --green: #2e7d57;
  --red: #b44747;
  --line: #c6c7c5;
  --line-strong: #8f9295;
  --hq-bg: #f7f7f5;
  --hq-surface: #ffffff;
  --hq-surface-2: #e9ebee;
  --hq-control: #ffffff;
  --hq-header: #ffffff;
  --hq-table-head: #171c26;
  --hq-row: #ffffff;
  --hq-row-alt: #e9ebee;
  --hq-row-line: rgba(20, 24, 30, .13);
  --hq-stripe-1: #f4df36;
  --hq-stripe-2: #f3a216;
  --hq-stripe-3: #080909;
  --hq-shadow: rgba(22, 24, 28, .13);
  --hq-logo-filter: none;
}

html { background: var(--hq-bg) !important; }

body {
  min-width: 320px;
  background: var(--hq-bg) !important;
  color: var(--ink) !important;
  font-family: Inter, Arial, Helvetica, sans-serif;
  transition: background-color .2s ease, color .2s ease;
}

:where(h1, h2, h3, .eyebrow, .brand, .optimizer-brand, .main-nav, .optimizer-nav, button, label > span) {
  font-family: var(--display-font);
}

:where(h1, .page-heading h1, .v60-page-heading h1, .list-heading-v60 h2, .optimizer-heading h1) {
  font-style: italic;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase;
}

.topbar,
.optimizer-topbar {
  min-height: 74px;
  border-bottom: 5px solid var(--ink) !important;
  background: var(--hq-header) !important;
  box-shadow: 0 6px 18px var(--hq-shadow);
  backdrop-filter: none;
}

.brand-mark {
  width: 54px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
}

.brand-mark img {
  width: 50px;
  height: 44px;
  object-fit: contain;
  filter: var(--hq-logo-filter);
}

.brand strong,
.optimizer-brand strong {
  font-size: 1.65rem !important;
  font-weight: 700;
  letter-spacing: .01em !important;
  text-transform: uppercase;
}

.brand small,
.optimizer-brand small { display: none !important; }

.main-nav button,
.optimizer-nav a {
  color: var(--ink) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.main-nav button.active::after,
.optimizer-nav a.active::after {
  height: 4px;
  border-radius: 0;
  background: var(--yellow);
}

.league-tools select,
.team-switcher select,
.pick-row select,
.league-picker select,
input,
select,
textarea {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: var(--hq-control) !important;
  color: var(--ink) !important;
}

.league-tools select,
.league-picker select {
  border: 2px solid var(--ink) !important;
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
}

.sign-out,
.mobile-sign-out-v60 {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  color: var(--hq-header) !important;
  font-family: var(--display-font);
  font-size: 1rem !important;
  text-transform: uppercase;
}

.hh-theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yellow);
  cursor: pointer;
}

.hh-theme-toggle svg { width: 24px; height: 24px; }

html[data-theme="light"] .hh-theme-toggle,
body[data-theme="light"] .hh-theme-toggle {
  background: #050505;
  color: #ffffff;
}

.optimizer-topbar { grid-template-columns: minmax(250px, 1fr) auto 42px minmax(250px, 1fr); }
.optimizer-topbar > .hh-theme-toggle { align-self: center; justify-self: end; }

.mobile-nav-toggle-v60 {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.hamburger-v61 i { border-radius: 0 !important; background: var(--ink) !important; }

.league-home,
.draft-layout,
.v60-page,
.draft-plan-page,
.league-simulator-page,
.picks-page,
.settings-page,
.projection-lab-page,
.comparison-page,
.keepers-page,
.mock-draft-page,
.availability-page,
main { color: var(--ink); }

.league-home-heading h1,
.draft-status h1,
.page-heading h1,
.v60-page-heading h1,
.list-heading-v60 h2,
.optimizer-heading h1 {
  font-size: clamp(3rem, 5vw, 6rem) !important;
  line-height: .85 !important;
}

.eyebrow {
  color: var(--blue) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.primary-button,
.secondary-button,
.danger-button,
.add-league,
.pick-button,
.compact-pick-button,
.keeper-add {
  min-height: 40px;
  border-radius: 0 !important;
  font-family: var(--display-font);
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.primary-button,
.pick-button,
.compact-pick-button,
.keeper-add {
  background: var(--yellow) !important;
  color: #080909 !important;
}

.secondary-button {
  border: 1px solid var(--line) !important;
  background: var(--hq-surface-2) !important;
  color: var(--ink) !important;
}

.auth-card,
.league-home-card,
.drafting-banner,
.draft-controls-card,
.draft-assistant,
.player-focus,
.board-card,
.keeper-card,
.manual-pick-card-v60,
.plan-quick-add-v60,
.keeper-entry-v60,
.panel,
.lab-panel,
.backtest-section,
.settings-card,
.picks-card,
.comparison-card-v60,
.availability-card-v60 {
  border-color: var(--line) !important;
  background: var(--hq-surface) !important;
  box-shadow: 0 18px 42px var(--hq-shadow) !important;
}

.league-home-card,
.drafting-banner,
.draft-controls-card,
.player-focus,
.board-card,
.keeper-card,
.panel,
.lab-panel,
.manual-pick-card-v60,
.plan-quick-add-v60,
.keeper-entry-v60 {
  border-radius: 4px !important;
}

.league-home-card.active {
  border-color: var(--yellow) !important;
  background: linear-gradient(120deg, color-mix(in srgb, var(--yellow) 10%, transparent), transparent 54%), var(--hq-surface) !important;
}

.league-status,
.count-badge,
.keeper-count,
.filter-count,
.history-pill,
.confidence-pill,
.breakout-badge,
.lab-stage-pill {
  border-radius: 2px !important;
  background: var(--hq-surface-2) !important;
  color: var(--blue) !important;
}

/* The List carries the mockup's player-card composition. */
.list-player-hero-v60 {
  min-height: 410px;
  margin-bottom: 26px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--hq-surface) !important;
  box-shadow: none !important;
}

.list-player-hero-v60::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -110px;
  bottom: -110px;
  left: 105px;
  width: 105px;
  transform: skewX(-25deg);
  background: linear-gradient(90deg,
    var(--hq-stripe-1) 0 28%, var(--hq-surface) 28% 31%,
    var(--hq-stripe-2) 31% 59%, var(--hq-surface) 59% 62%,
    var(--hq-stripe-3) 62% 90%, var(--hq-surface) 90% 100%);
  pointer-events: none;
}

.list-hero-photo-v60 { min-height: 410px; }

.list-hero-photo-v60::after {
  top: 22%;
  background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--hq-surface) 20%, transparent) 66%, var(--hq-surface) 100%) !important;
}

.list-player-portrait-v60 {
  height: 132%;
  left: -18%;
  width: 150%;
}

.list-hero-title-v60 { z-index: 4; }
.list-hero-identity-v61 { position: relative; z-index: 2; }

.list-hero-title-v60 h1 {
  padding-left: 0;
  color: var(--ink);
  font-family: var(--display-font);
  font-size: clamp(4.6rem, 7vw, 8rem);
  font-style: italic;
  font-weight: 800;
  line-height: .78;
  text-transform: uppercase;
}

.list-hero-team-logo-v61 {
  position: absolute;
  z-index: 0;
  top: -115px;
  right: -118px;
  width: 500px;
  height: 500px;
  opacity: .38;
  pointer-events: none;
}

.list-hero-team-logo-v61 .team-logo {
  width: 100% !important;
  height: 100% !important;
  filter: grayscale(.28) saturate(.72);
}

.list-hero-meta-v65 {
  color: var(--muted) !important;
  font-family: var(--display-font);
  font-size: 1.45rem;
  font-weight: 600;
  text-transform: uppercase;
}

.list-hero-copy-v60 { padding-top: 145px; }

.list-hero-metrics-v60 > span,
.list-hero-stats-v60 > span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.list-hero-metrics-v60 strong,
.list-hero-stats-v60 strong,
.table-rank-v60 > strong,
.rank-cell strong,
.focus-vorp strong {
  font-family: var(--display-font);
  font-style: italic;
  font-weight: 700;
}

.list-hero-metrics-v60 strong {
  color: var(--yellow) !important;
  font-size: 3.2rem;
  line-height: .85;
}

html[data-theme="light"] .list-hero-metrics-v60 strong { color: #080909 !important; }

.list-hero-metrics-v60 small,
.list-hero-stats-v60 small {
  color: var(--muted) !important;
  font-family: var(--display-font);
  font-size: .95rem;
  font-weight: 600;
}

.list-hero-stats-v60 strong { font-size: 2rem; }

.hero-star-v60 {
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--hq-surface) 62%, transparent) !important;
}

html[data-theme="light"] .hero-star-v60 {
  -webkit-text-stroke: 1.5px #050505;
  border-color: #050505 !important;
  color: var(--yellow);
}

.list-tools-v60,
.list-table-wrap-v60 {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: var(--hq-surface) !important;
}

.list-table-v60 th,
.rankings-table th,
.lab-table th,
.actuals-table th,
.movement-table th,
.backtest-metric-table th,
.backtest-misses-table th,
.roster-column-headings {
  background: var(--hq-table-head) !important;
  color: #f8f9ff !important;
}

.list-table-v60 th button,
.rankings-table th,
.lab-table th,
.actuals-table th,
.movement-table th,
.backtest-metric-table th,
.backtest-misses-table th,
.roster-column-headings span {
  color: #f8f9ff !important;
  font-family: var(--display-font);
  font-size: .9rem !important;
  font-weight: 600 !important;
}

:where(.list-table-v60, .rankings-table, .lab-table, .actuals-table, .movement-table, .backtest-metric-table, .backtest-misses-table) tbody tr:nth-child(odd) {
  background: var(--hq-row) !important;
}

:where(.list-table-v60, .rankings-table, .lab-table, .actuals-table, .movement-table, .backtest-metric-table, .backtest-misses-table) tbody tr:nth-child(even) {
  background: var(--hq-row-alt) !important;
}

:where(.list-table-v60, .rankings-table, .lab-table, .actuals-table, .movement-table, .backtest-metric-table, .backtest-misses-table) td {
  border-color: var(--hq-row-line) !important;
  color: var(--ink);
}

.table-player-v60 strong,
.player-cell strong,
.lab-player-cell strong,
.compact-player-line strong,
.pool-player strong,
.roster-player strong,
.starred-player-button strong {
  color: var(--ink) !important;
  font-family: var(--display-font);
  font-size: 1.3rem !important;
  font-style: italic;
  font-weight: 700 !important;
  text-transform: capitalize;
}

.filter-star-v60,
.sort-direction-v60,
.starred-filter,
.position-filters button,
.pool-add,
.pool-star,
.row-actions button,
.icon-button {
  border-radius: 0 !important;
  background: var(--hq-control) !important;
  color: var(--ink) !important;
}

/* Optimizer adopts the same surfaces and table treatment. */
.optimizer-kpis,
.panel {
  border-color: var(--line) !important;
  background: var(--hq-surface) !important;
}

.optimizer-kpis { border-radius: 0 !important; }
.optimizer-kpis article { border-color: var(--line) !important; }
.optimizer-kpis strong { color: var(--yellow) !important; font-family: var(--display-font); font-size: 2.2rem; font-style: italic; }
.optimizer-kpis article:nth-child(3) strong { color: var(--green) !important; }
.optimizer-kpis article:nth-child(4) strong { color: var(--red) !important; }

.pool-player,
.roster-player,
.roster-group-title,
.team-totals { border-color: var(--hq-row-line) !important; }
.pool-player:nth-child(odd), .roster-player:nth-child(odd) { background: var(--hq-row) !important; }
.pool-player:nth-child(even), .roster-player:nth-child(even) { background: var(--hq-row-alt) !important; }
.team-totals { background: var(--hq-surface-2) !important; }

.nav-menu-v60,
.nav-groups-v60.open {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: var(--hq-header) !important;
  color: var(--ink) !important;
}

@media (max-width: 1180px) {
  .topbar { padding-inline: 16px; }
  .main-nav button { font-size: 1.05rem !important; padding-inline: 10px; }
  .list-hero-team-logo-v61 { width: 410px; height: 410px; top: -90px; right: -100px; }
}

@media (max-width: 960px) {
  .topbar,
  .optimizer-topbar {
    min-height: 64px;
    border-bottom-width: 3px !important;
  }

  .brand-mark { width: 44px !important; height: 40px !important; }
  .brand-mark img { width: 42px; height: 38px; }
  .league-tools { gap: 6px; }
  .league-tools select { width: 136px; }
  .hh-theme-toggle { width: 40px; height: 40px; flex-basis: 40px; }

  .optimizer-topbar {
    grid-template-columns: auto 1fr 40px auto;
    gap: 8px;
    padding-inline: 12px;
  }
  .optimizer-nav { grid-column: 1 / -1; }

  .list-player-hero-v60::before {
    left: 48px;
    width: 84px;
  }

  .list-hero-title-v60 h1 { font-size: clamp(3rem, 7vw, 4.8rem); }
  .list-hero-team-logo-v61 { width: 330px; height: 330px; top: -78px; right: -88px; }
  .list-hero-metrics-v60 strong { font-size: 2.5rem; }
}

@media (max-width: 700px) {
  .v60-page { padding-inline: 10px; }
  .brand strong { display: none; }
  .league-tools select { width: 112px !important; }

  .list-player-hero-v60 {
    min-height: 330px;
    box-shadow: 0 14px 24px var(--hq-shadow) !important;
  }

  .list-hero-photo-v60 { min-height: 330px; }
  .list-player-hero-v60::before { left: 18px; width: 78px; }
  .list-hero-team-logo-v61 { width: 220px; height: 220px; top: -52px; right: -62px; }
  .list-hero-title-v60 h1 { font-size: clamp(2.3rem, 9vw, 3.4rem); text-transform: capitalize; }
  .list-hero-meta-v65 { font-size: 1rem; }
  .list-hero-metrics-v60 strong { font-size: 2rem; }
  .list-hero-stats-v60 strong { font-size: 1.25rem; }

  .league-home-heading h1,
  .draft-status h1,
  .page-heading h1,
  .v60-page-heading h1,
  .list-heading-v60 h2,
  .optimizer-heading h1 { font-size: 3.5rem !important; }

  .optimizer-topbar { grid-template-columns: auto 1fr 40px auto; }
  .optimizer-brand strong { display: none; }
  .league-picker select { min-width: 112px; max-width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}