:root {
  --purple: #9E40BA;
  --purple-light: #C873DE;
  --purple-bright: #DD97EC;
  --purple-dark: #69277C;
  --gray: #3A3A3A;
  --bg: #0D1015;
  --bg-soft: #11161D;
  --sidebar: #11161E;
  --panel: #161B23;
  --panel-soft: #1A2029;
  --panel-hover: #222A35;
  --panel-raised: #1D242E;
  --border: #29323E;
  --border-light: #384351;
  --text: #F6F7FA;
  --text-soft: #CFD6DF;
  --muted: #8E9AA9;
  --green: #55D78F;
  --yellow: #F3C56B;
  --red: #FF6578;
  --blue: #5DA9FF;
  --sidebar-width: 86px;
  --topbar-height: 62px;
  --shadow: 0 16px 38px rgba(0, 0, 0, .22);
  --purple-shadow: 0 14px 34px rgba(158, 64, 186, .14);
}

html[data-theme="light"] {
  --bg: #F4F3F6;
  --bg-soft: #ECEAF0;
  --sidebar: #FFFFFF;
  --panel: #FFFFFF;
  --panel-soft: #F7F5F9;
  --panel-hover: #F1EDF4;
  --panel-raised: #FFFFFF;
  --border: #DAD5DD;
  --border-light: #C9C2CF;
  --text: #1E1D20;
  --text-soft: #3C3940;
  --muted: #726D78;
  --shadow: 0 12px 32px rgba(41, 32, 46, .08);
  --purple-shadow: 0 12px 30px rgba(158, 64, 186, .12);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 70% -10%,
      rgba(158, 64, 186, .07),
      transparent 32%
    ),
    var(--bg);
  color: var(--text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition:
    background .24s ease,
    color .24s ease;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.tiny {
  font-size: 9px;
}

.block-title {
  display: block;
  margin-top: 3px;
}

.eyebrow {
  display: inline-block;
  color: var(--purple-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eyebrow.light {
  color: #F0D9F6;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #3D4652;
  border-radius: 999px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #B9B2BD;
}

/* =========================================================
   AUTH
========================================================= */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
}

.auth-brand {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px;
  background:
    linear-gradient(
      145deg,
      #7A2A91,
      #43164F 58%,
      #18141A
    );
}

.auth-brand::after {
  content: "V";
  position: absolute;
  right: -45px;
  bottom: -190px;
  color: rgba(255, 255, 255, .035);
  font-size: 520px;
  line-height: 1;
  font-weight: 950;
  transform: rotate(-8deg);
}

.auth-brand-mark {
  width: 78px;
  height: 78px;
  position: relative;
  z-index: 2;
}

.auth-copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.auth-copy h1 {
  margin: 12px 0 16px;
  font-size: clamp(48px, 5vw, 78px);
  line-height: .98;
  letter-spacing: -3px;
}

.auth-copy p {
  max-width: 570px;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 17px;
  line-height: 1.65;
}

.auth-panel {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 32px;
}

.auth-card {
  width: min(100%, 450px);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auth-mobile-logo {
  width: 58px;
  height: 58px;
  margin-bottom: 24px;
}

.auth-card h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.6px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 22px 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-soft);
}

.auth-tab {
  padding: 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.auth-tab.active {
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #B853CE
    );
  color: #fff;
}

.field {
  display: grid;
  gap: 7px;
  margin: 13px 0;
}

.field > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  outline: 0;
  background: var(--bg-soft);
  color: var(--text);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(158, 64, 186, .12);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 700;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(158, 64, 186, .65);
  box-shadow: var(--purple-shadow);
}

.btn.primary {
  border-color: var(--purple);
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #B84FCF
    );
  color: #fff;
}

.btn.full {
  width: 100%;
}

.error {
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 101, 120, .35);
  border-radius: 9px;
  background: rgba(255, 101, 120, .08);
  color: #FF9EAA;
}

.notice {
  padding: 11px 13px;
  border: 1px solid rgba(158, 64, 186, .27);
  border-radius: 10px;
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .16),
      rgba(158, 64, 186, .05)
    );
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   SHELL
========================================================= */

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns:
    var(--sidebar-width)
    minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 9px;
  border-right: 1px solid var(--border);
  background: var(--sidebar);
}

.sidebar-logo {
  width: 100%;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 13px;
}

.brand-mark {
  width: 66px !important;
  height: 66px !important;
  object-fit: contain;
  transition:
    transform .2s ease,
    filter .2s ease;
}

.sidebar-logo:hover .brand-mark {
  transform:
    scale(1.07)
    rotate(-2deg);
  filter:
    drop-shadow(
      0 6px 12px rgba(158, 64, 186, .22)
    );
}

.nav {
  display: grid;
  gap: 7px;
  width: 100%;
}

.nav-button {
  position: relative;
  width: 52px;
  height: 46px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

.nav-button svg {
  width: 19px;
  height: 19px;
}

.nav-button:hover {
  transform:
    translateX(3px)
    scale(1.04);
  border-color: rgba(158, 64, 186, .28);
  background:
    linear-gradient(
      135deg,
      rgba(158, 64, 186, .22),
      rgba(158, 64, 186, .09)
    );
  color: var(--purple-light);
  box-shadow:
    0 7px 18px rgba(158, 64, 186, .13);
}

.nav-button.active {
  border-color: rgba(158, 64, 186, .5);
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #743088
    );
  color: #fff;
  box-shadow:
    0 7px 20px rgba(158, 64, 186, .24);
}

.nav-label {
  position: absolute;
  left: calc(100% + 13px);
  top: 50%;
  z-index: 100;
  min-width: max-content;
  padding: 8px 11px;
  transform: translate(-7px, -50%);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--panel-raised);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.nav-button:hover .nav-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.main-wrap {
  grid-column: 2;
  min-width: 0;
  width: calc(100vw - var(--sidebar-width));
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 35;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background:
    color-mix(
      in srgb,
      var(--bg) 92%,
      transparent
    );
  backdrop-filter: blur(18px);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  transition:
    transform .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 64, 186, .55);
  color: var(--purple-light);
  box-shadow: var(--purple-shadow);
}

.profile-menu-wrap {
  position: relative;
}

.profile-button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
}

.profile-button:hover {
  background: rgba(158, 64, 186, .1);
}

.profile-button-text {
  text-align: left;
}

.profile-button-text strong,
.profile-button-text span {
  display: block;
}

.profile-button-text strong {
  font-size: 11px;
}

.profile-button-text span {
  color: var(--muted);
  font-size: 9px;
}

.avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #622371
    );
  color: #fff;
  font-size: 11px;
  font-weight: 850;
}

.avatar.small {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: 195px;
  padding: 6px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--panel-raised);
  box-shadow: var(--shadow);
}

.menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  text-align: left;
}

.menu button:hover {
  background: rgba(158, 64, 186, .12);
  color: var(--purple-light);
}

.menu-divider {
  height: 1px;
  margin: 5px;
  background: var(--border);
}

.menu-danger {
  color: #FF8998 !important;
}

.page-wrap {
  width: 100%;
  max-width: none;
  padding: 14px 15px 44px;
}

.page {
  display: none;
  width: 100%;
}

.page.active {
  display: block;
}

/* =========================================================
   LEAGUE BANNER + HEADER
========================================================= */

.global-league-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0 0 14px;
  padding: 9px 10px 9px 15px;
  overflow: hidden;
  border: 1px solid rgba(158, 64, 186, .34);
  border-radius: 12px;
  background:
    linear-gradient(
      100deg,
      rgba(158, 64, 186, .26),
      rgba(158, 64, 186, .1) 46%,
      var(--panel) 100%
    );
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.global-league-banner:hover {
  transform: translateY(-1px);
  border-color: rgba(158, 64, 186, .58);
  box-shadow: var(--purple-shadow);
}

.global-league-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background:
    linear-gradient(
      180deg,
      var(--purple-light),
      var(--purple)
    );
}

.global-league-banner > svg {
  color: var(--purple-light);
}

.league-banner-copy {
  min-width: 0;
  flex: 1;
}

.league-banner-copy small,
.league-banner-copy strong {
  display: block;
}

.league-banner-copy small {
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.league-banner-copy strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
}

.global-league-banner select {
  width: min(330px, 35vw);
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  outline: 0;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.page-header h1 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.9px;
}

.page-header p {
  max-width: 820px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* =========================================================
   LAYOUT + CARDS
========================================================= */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    300px;
  gap: 12px;
  align-items: start;
}

.stack,
.insight-stack {
  display: grid;
  gap: 8px;
}

.weekly-insight-grid {
  display: grid;
  grid-template-columns: .9fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.card,
.scouting-card,
.position-column,
.analytics-kpi,
.showcase-card,
.team-overview {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.card:hover,
.scouting-card:hover,
.position-column:hover,
.analytics-kpi:hover,
.showcase-card:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 64, 186, .42);
  box-shadow: var(--purple-shadow);
}

.card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(
      165deg,
      var(--panel),
      var(--bg-soft)
    );
}

.card-header {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .15),
      rgba(158, 64, 186, .035) 55%,
      transparent
    );
}

.card-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.card-body {
  padding: 13px;
  color: var(--text-soft);
  font-size: 12px;
}

.loading,
.empty {
  padding: 22px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.compact-empty {
  padding: 10px;
}

/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: 23px;
  border: 1px solid rgba(158, 64, 186, .45);
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(216, 144, 234, .18),
      transparent 33%
    ),
    linear-gradient(
      110deg,
      #76278C,
      #4A1B57 56%,
      #29172E
    );
  box-shadow:
    0 13px 34px rgba(158, 64, 186, .15);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.hero:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 42px rgba(158, 64, 186, .2);
}

.hero::after {
  content: "V";
  position: absolute;
  right: 20px;
  bottom: -120px;
  color: rgba(255, 255, 255, .035);
  font-size: 300px;
  font-weight: 950;
  pointer-events: none;
  transform: rotate(-8deg);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, .8fr);
  gap: 18px;
  align-items: center;
}

.hero h1 {
  margin: 7px 0;
  font-size: 31px;
  letter-spacing: -1.1px;
}

.hero p {
  max-width: 760px;
  margin: 0;
  color: #DFC9E5;
  font-size: 12px;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.stat {
  min-width: 96px;
  padding: 9px 10px;
  border: 1px solid rgba(158, 64, 186, .22);
  border-radius: 9px;
  background: rgba(158, 64, 186, .1);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 64, 186, .5);
  background: rgba(158, 64, 186, .17);
}

.stat small,
.stat strong {
  display: block;
}

.stat small {
  color: #D09ADF;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.stat strong {
  margin-top: 3px;
  color: #fff;
  font-size: 13px;
}

html[data-theme="light"] .stat strong {
  color: var(--text);
}

/* =========================================================
   NEWS
========================================================= */

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.news-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  text-decoration: none;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.news-card:hover {
  transform:
    translateY(-4px)
    scale(1.003);
  border-color: rgba(158, 64, 186, .55);
  box-shadow:
    0 16px 38px rgba(158, 64, 186, .14);
}

.news-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 8.4;
  overflow: hidden;
  background: var(--bg-soft);
}

.news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.news-card:hover .news-thumb {
  transform: scale(1.035);
}

.news-card-copy {
  position: relative;
  padding: 12px;
}

.news-card-copy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 36px;
  height: 2px;
  background: var(--purple);
}

.news-source {
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.news-card h3 {
  margin: 6px 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.news-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.fantasy-impact {
  margin-top: 9px !important;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-soft) !important;
}

.market-list {
  display: grid;
  gap: 5px;
}

.market-row {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.market-row:hover {
  transform: translateX(3px);
  border-color: rgba(158, 64, 186, .45);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .13),
      var(--panel-hover)
    );
}

.market-row strong {
  display: block;
  color: var(--text);
  font-size: 10px;
}

.market-row span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.market-row b {
  color: var(--purple-light);
  font-size: 9px;
}

.profile-link-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

/* =========================================================
   PLAYER IMAGE + HELMET
========================================================= */

.player-image-wrap {
  position: relative;
  display: inline-grid;
  width: max-content;
  line-height: 0;
  isolation: isolate;
}

.player-photo {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  background: var(--bg-soft);
}

.helmet-corner {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 4;
  width: 26px;
  height: 20px;
  display: block;
  filter:
    drop-shadow(
      0 2px 3px rgba(0, 0, 0, .35)
    );
  pointer-events: none;
}

.helmet-corner svg {
  display: block;
  width: 100%;
  height: 100%;
}

.player-profile-photo + .helmet-corner {
  width: 38px;
  height: 29px;
  right: -7px;
  bottom: -6px;
}

.trade-headshot + .helmet-corner,
.rank-headshot + .helmet-corner,
.slot-player-photo + .helmet-corner {
  width: 25px;
  height: 19px;
}

.trade-suggestion-photo + .helmet-corner {
  width: 24px;
  height: 18px;
}

.position-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pos-bg);
  color: var(--pos-color);
  font-size: 8px;
  font-weight: 900;
}

.info-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border: 1px solid rgba(158, 64, 186, .55);
  border-radius: 50%;
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
  cursor: help;
}

.info-tip:hover::after,
.info-tip:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 999;
  width: 250px;
  padding: 9px 10px;
  transform: translateX(-50%);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--panel-raised);
  box-shadow: var(--shadow);
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
}

/* =========================================================
   WEEK CONTROLS / INSIGHTS
========================================================= */

.week-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.week-control button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.week-control button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--purple);
  background: rgba(158, 64, 186, .14);
}

.week-control button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.week-control strong {
  min-width: 82px;
  color: var(--text-soft);
  font-size: 11px;
  text-align: center;
}

.live {
  color: var(--green);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
}

.grounded-insight,
.recommendation-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.grounded-insight {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  padding: 9px;
}

.grounded-insight.good {
  box-shadow: inset 3px 0 0 var(--green);
}

.grounded-insight.bad {
  box-shadow: inset 3px 0 0 var(--red);
}

.grounded-insight:hover,
.recommendation-card:hover {
  transform: translateX(3px);
  border-color: rgba(158, 64, 186, .45);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .12),
      var(--panel-hover)
    );
}

.grounded-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(158, 64, 186, .14);
  color: var(--purple-light);
}

.grounded-insight strong,
.recommendation-card strong {
  display: block;
  font-size: 10px;
}

.grounded-insight p,
.recommendation-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.recommendation-card {
  padding: 9px 10px;
}

.recommendation-card .pill {
  margin-bottom: 5px;
}

.scoring-context strong {
  color: var(--purple-light);
  font-size: 14px;
}

.scoring-context p {
  color: var(--muted);
  font-size: 10px;
}

.scoring-badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(158, 64, 186, .18);
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
}

/* =========================================================
   MATCHUP
========================================================= */

.matchup-team-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(
      100deg,
      rgba(158, 64, 186, .08),
      var(--panel-soft)
    );
  transition:
    transform .16s ease,
    border-color .16s ease;
}

.matchup-team-card:hover {
  transform: translateX(3px);
  border-color: rgba(158, 64, 186, .45);
}

.matchup-team-avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg-soft);
}

.matchup-team-avatar.fallback {
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--purple-dark)
    );
  color: #fff;
  font-weight: 900;
}

.matchup-team-card strong {
  display: block;
  color: var(--text);
  font-size: 11px;
}

.matchup-score {
  margin-left: auto;
  color: var(--purple-light);
  font-size: 27px;
  font-weight: 900;
}

/* =========================================================
   LINEUP
========================================================= */

.lineup-section + .lineup-section {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.lineup-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.lineup-section-head strong {
  font-size: 11px;
}

.lineup-section-head span {
  color: var(--muted);
  font-size: 8px;
}

.lineup-slots {
  display: grid;
  gap: 5px;
}

.slot-row {
  display: grid;
  grid-template-columns:
    86px
    44px
    minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.slot-row:hover {
  transform: translateX(3px);
  border-color: rgba(158, 64, 186, .45);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .12),
      var(--panel-hover)
    );
}

.starter-slot {
  box-shadow: inset 3px 0 0 var(--purple);
}

.ir-slot {
  box-shadow: inset 3px 0 0 var(--red);
}

.taxi-slot {
  box-shadow: inset 3px 0 0 #7791A8;
}

.slot-label {
  display: grid;
  gap: 3px;
  justify-items: start;
}

.slot-label small {
  color: var(--muted);
  font-size: 6px;
  letter-spacing: .06em;
}

.slot-player-photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  background: var(--bg-soft);
}

.slot-player-copy strong {
  display: block;
  color: var(--text);
  font-size: 10px;
}

.slot-player-copy span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
}

.injury {
  color: #FF9271;
}

.mini-projection {
  color: var(--purple-light) !important;
  font-weight: 800;
}

/* =========================================================
   PILLS
========================================================= */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.pill.good {
  background: rgba(85, 215, 143, .13);
  color: var(--green);
}

.pill.warn {
  background: rgba(243, 197, 107, .13);
  color: #D7A83F;
}

.pill.bad {
  background: rgba(255, 101, 120, .13);
  color: var(--red);
}

.pill.purple {
  background: rgba(158, 64, 186, .18);
  color: var(--purple-light);
}

.value-chip {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  background:
    linear-gradient(
      135deg,
      rgba(158, 64, 186, .28),
      rgba(158, 64, 186, .13)
    );
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
}

/* =========================================================
   LEAGUE TEAMS
========================================================= */

.team-list {
  display: grid;
  gap: 7px;
}

.team-overview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.team-overview:hover {
  border-color: rgba(158, 64, 186, .4);
  box-shadow: var(--purple-shadow);
}

.team-overview.mine {
  border-color: rgba(158, 64, 186, .55);
  box-shadow: inset 3px 0 0 var(--purple);
}

.team-overview summary {
  display: grid;
  grid-template-columns:
    34px
    minmax(160px, 1fr)
    repeat(4, 76px)
    20px;
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
  list-style: none;
  cursor: pointer;
}

.team-overview summary::-webkit-details-marker {
  display: none;
}

.team-overview summary:hover {
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .11),
      transparent
    );
}

.team-rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(158, 64, 186, .13);
  color: var(--purple-light);
  font-size: 10px;
  font-weight: 850;
}

.team-title strong,
.team-title span,
.metric small,
.metric strong {
  display: block;
}

.team-title strong {
  color: var(--text);
  font-size: 11px;
}

.team-title span {
  color: var(--muted);
  font-size: 8px;
}

.metric {
  text-align: right;
}

.metric small {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.metric strong {
  color: var(--text);
  font-size: 11px;
}

.advanced {
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.advanced-metric {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .07),
      var(--panel)
    );
}

.advanced-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 64, 186, .4);
}

.advanced-metric small,
.advanced-metric strong {
  display: block;
}

.advanced-metric small {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.advanced-metric strong {
  color: var(--purple-light);
  font-size: 11px;
}

/* =========================================================
   SCOUTING
========================================================= */

.scouting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.scouting-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.scouting-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .15),
      transparent
    );
}

.scouting-body {
  padding: 12px;
}

.trait {
  margin: 6px 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.trait.good {
  box-shadow: inset 3px 0 0 var(--green);
}

.trait.bad {
  box-shadow: inset 3px 0 0 var(--red);
}

.trait strong {
  display: block;
  color: var(--text);
  font-size: 10px;
}

.trait p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.asset-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 5px 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.asset-row:hover {
  transform: translateX(3px);
  border-color: rgba(158, 64, 186, .45);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .12),
      var(--panel-hover)
    );
}

.asset-copy {
  min-width: 0;
  flex: 1;
}

.asset-copy strong,
.asset-copy small {
  display: block;
}

.asset-copy strong {
  color: var(--text);
  font-size: 9px;
}

.asset-copy small {
  color: var(--muted);
  font-size: 7px;
}

.asset-row b {
  color: var(--purple-light);
  font-size: 12px;
}

/* =========================================================
   PLAYERS
========================================================= */

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.toolbar input {
  min-width: 260px;
  flex: 1;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border-light);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  outline: 0;
}

.player-ranking-toolbar {
  position: sticky;
  top: calc(var(--topbar-height) + 6px);
  z-index: 20;
  padding: 7px 9px;
  border: 1px solid rgba(158, 64, 186, .3);
  border-radius: 10px;
  background:
    color-mix(
      in srgb,
      var(--panel) 94%,
      transparent
    );
  backdrop-filter: blur(12px);
}

.ranking-section {
  margin-top: 17px;
}

.ranking-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.ranking-section-title > span {
  color: var(--purple-light);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.position-columns {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(255px, 1fr)
    );
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 7px;
}

.position-column {
  min-width: 255px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
}

.position-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(
      90deg,
      rgba(158, 64, 186, .14),
      var(--panel-soft)
    );
}

.position-rank-list {
  overflow-y: auto;
  padding: 4px;
}

.rank-player {
  border-bottom: 1px solid var(--border);
}

.rank-player summary {
  display: grid;
  grid-template-columns:
    24px
    42px
    minmax(0, 1fr)
    48px
    13px;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border-radius: 7px;
  list-style: none;
  cursor: pointer;
}

.rank-player summary::-webkit-details-marker {
  display: none;
}

.rank-player summary:hover {
  background: rgba(158, 64, 186, .09);
}

.rank-number {
  color: var(--purple-light);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

.rank-headshot {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: center top;
  border-radius: 7px;
}

.rank-player-main strong,
.rank-player-main small {
  display: block;
}

.rank-player-main strong {
  color: var(--text);
  font-size: 9px;
}

.rank-player-main small {
  color: var(--muted);
  font-size: 7px;
}

.rank-points {
  text-align: right;
}

.rank-points strong {
  color: var(--purple-light);
  font-size: 10px;
}

.rank-points small {
  display: block;
  color: var(--muted);
  font-size: 6px;
}

.rank-player-detail {
  padding: 9px;
  background: var(--bg-soft);
}

.player-bio-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 8px;
}

.player-bio-mini b {
  color: var(--purple-light);
}

/* =========================================================
   TRADE
========================================================= */

.trade-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.trade-mode-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-soft);
}

.trade-mode-switch button {
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.trade-mode-switch button.active {
  background:
    linear-gradient(
      135deg,
      var(--purple),
      #B653CC
    );
  color: #fff;
}

.trade-controls > input {
  width: min(420px, 50%);
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  outline: 0;
}

.trade-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 10px;
}

.trade-context-bar span,
.trade-context-bar strong {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(158, 64, 186, .1);
  color: var(--text-soft);
  font-size: 8px;
}

.trade-context-bar strong {
  background: rgba(158, 64, 186, .2);
  color: var(--purple-light);
}

.trade-calculator {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    190px
    minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.trade-side {
  min-height: 260px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .07),
      var(--panel)
    );
}

.trade-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.trade-side-head h3 {
  margin: 0;
  font-size: 12px;
}

.trade-side-head strong {
  color: var(--purple-light);
  font-size: 22px;
}

.selected-assets {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
}

.trade-empty-state {
  padding: 14px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.trade-selector-label {
  margin: 3px 0 5px;
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.trade-asset-search input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text);
  outline: 0;
}

.trade-search-results {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.trade-search-option {
  width: 100%;
  display: grid;
  grid-template-columns:
    42px
    1fr
    auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
}

.trade-search-option:hover {
  border-color: rgba(158, 64, 186, .48);
  background: rgba(158, 64, 186, .11);
}

.trade-search-option strong,
.trade-search-option span {
  display: block;
}

.trade-search-option strong {
  font-size: 9px;
}

.trade-search-option span {
  color: var(--muted);
  font-size: 7px;
}

.trade-search-option b {
  color: var(--purple-light);
}

.selected-trade-asset {
  border-color: rgba(158, 64, 186, .28);
  background: rgba(158, 64, 186, .09);
}

.selected-trade-asset > button {
  border: 0;
  background: transparent;
  color: var(--muted);
}

.trade-center-column {
  display: grid;
  place-items: stretch;
  align-self: stretch;
}

.fairness-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
  text-align: center;
}

.fairness-card > span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.fairness-card > strong {
  margin-top: 5px;
  font-size: 20px;
}

.fairness-difference {
  margin: 8px 0;
  font-size: 26px;
  font-weight: 950;
}

.fairness-card p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

.fairness-card.fair {
  border-color: rgba(85, 215, 143, .42);
  background: rgba(85, 215, 143, .08);
}

.fairness-card.fair strong,
.fairness-card.fair .fairness-difference {
  color: var(--green);
}

.fairness-card.edge {
  border-color: rgba(243, 197, 107, .42);
  background: rgba(243, 197, 107, .08);
}

.fairness-card.edge strong,
.fairness-card.edge .fairness-difference {
  color: var(--yellow);
}

.fairness-card.bad {
  border-color: rgba(255, 101, 120, .42);
  background: rgba(255, 101, 120, .08);
}

.fairness-card.bad strong,
.fairness-card.bad .fairness-difference {
  color: var(--red);
}

.fairness-card.robbery {
  border-color: rgba(158, 64, 186, .65);
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .27),
      rgba(158, 64, 186, .07)
    );
  box-shadow: var(--purple-shadow);
}

.fairness-card.robbery strong,
.fairness-card.robbery .fairness-difference {
  color: var(--purple-bright);
}

.balance-suggestions {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(158, 64, 186, .3);
  border-radius: 11px;
  background:
    linear-gradient(
      110deg,
      rgba(158, 64, 186, .12),
      var(--panel)
    );
}

.balance-suggestions-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.balance-suggestions-head strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.balance-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.balance-suggestion {
  display: grid;
  grid-template-columns:
    40px
    1fr
    auto;
  gap: 7px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  transition:
    transform .15s ease,
    border-color .15s ease;
}

.balance-suggestion:hover {
  transform: translateY(-2px);
  border-color: rgba(158, 64, 186, .5);
}

.balance-suggestion strong {
  display: block;
  font-size: 8px;
}

.balance-suggestion span {
  color: var(--muted);
  font-size: 7px;
}

.balance-suggestion b {
  color: var(--purple-light);
  font-size: 11px;
}

.trade-suggestion-photo {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  object-fit: cover;
}

.pick-panel {
  margin-top: 10px;
}

.pick-panel summary {
  color: var(--purple-light);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.pick-browser {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 5px;
  max-height: 240px;
  margin-top: 7px;
  overflow-y: auto;
}

.pick-button {
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text-soft);
  text-align: left;
}

.pick-button:hover {
  border-color: rgba(158, 64, 186, .45);
}

.pick-button strong,
.pick-button small {
  display: block;
}

.pick-button strong {
  font-size: 8px;
}

.pick-button small {
  color: var(--purple-light);
  font-size: 7px;
}

.pick-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(158, 64, 186, .16);
  color: var(--purple-light);
  font-weight: 900;
}

.trade-value-head,
.trade-player-row summary {
  display: grid;
  grid-template-columns:
    38px
    minmax(220px, 1.5fr)
    60px
    60px
    60px
    70px
    65px;
  gap: 8px;
  align-items: center;
}

.trade-value-head {
  padding: 7px 10px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}

.trade-value-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
}

.trade-player-row {
  border-bottom: 1px solid var(--border);
}

.trade-player-row summary {
  padding: 7px 10px;
  list-style: none;
  cursor: pointer;
}

.trade-player-row summary::-webkit-details-marker {
  display: none;
}

.trade-player-row summary:hover {
  background: rgba(158, 64, 186, .09);
}

.trade-player-ident {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trade-headshot {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center top;
  border-radius: 7px;
}

.trade-player-ident strong {
  display: block;
  color: var(--text);
  font-size: 9px;
}

.trade-player-ident small {
  display: block;
  color: var(--muted);
  font-size: 7px;
}

.trade-value-score {
  color: var(--purple-light);
  font-size: 15px;
  font-weight: 900;
}

.trade-player-detail {
  padding: 10px 13px 12px 56px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.trade-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

.trade-component {
  display: grid;
  grid-template-columns:
    90px
    minmax(0, 1fr)
    30px;
  gap: 7px;
  align-items: center;
  margin: 5px 0;
}

.trade-component span,
.trade-component strong {
  font-size: 8px;
}

.trade-component > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.trade-component i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--purple-dark),
      var(--purple-light)
    );
}

.scarcity-explainer {
  margin-top: 9px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(158, 64, 186, .08);
}

.scarcity-explainer strong,
.scarcity-explainer span {
  display: block;
}

.scarcity-explainer strong {
  color: var(--purple-light);
  font-size: 9px;
}

.scarcity-explainer span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

/* =========================================================
   PLAYER PROFILE
========================================================= */

.player-profile-page {
  display: none;
}

.player-profile-page.active {
  display: block;
}

.profile-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.player-profile-hero {
  display: grid;
  grid-template-columns:
    150px
    minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(158, 64, 186, .42);
  border-radius: 14px;
  background:
    linear-gradient(
      120deg,
      rgba(158, 64, 186, .2),
      var(--panel)
    );
  box-shadow: var(--purple-shadow);
}

.player-profile-photo {
  width: 145px;
  height: 145px;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
  background: var(--bg-soft);
}

.player-profile-identity h1 {
  margin: 4px 0 8px;
  font-size: 32px;
  letter-spacing: -1px;
}

.player-profile-identity p {
  color: var(--muted);
  font-size: 11px;
}

.player-profile-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.rank-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(93, 169, 255, .13);
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
}

.player-profile-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
  margin-top: 12px;
}

.bio-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.bio-stat {
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(158, 64, 186, .06);
}

.bio-stat:hover {
  transform: translateY(-2px);
  background: rgba(158, 64, 186, .12);
}

.bio-stat span,
.bio-stat strong {
  display: block;
}

.bio-stat span {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.bio-stat strong {
  margin-top: 3px;
  color: var(--purple-light);
  font-size: 10px;
}

.recent-performance {
  display: grid;
  gap: 10px;
}

.recent-score {
  padding: 12px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(158, 64, 186, .18),
      rgba(158, 64, 186, .05)
    );
}

.recent-score span,
.recent-score strong,
.recent-score small {
  display: block;
}

.recent-score span {
  color: var(--muted);
  font-size: 8px;
}

.recent-score strong {
  margin: 4px 0;
  color: var(--purple-light);
  font-size: 28px;
}

.recent-score small {
  color: var(--muted);
  font-size: 8px;
}

.recent-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.recent-stat-grid > div {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.recent-stat-grid span,
.recent-stat-grid strong {
  display: block;
}

.recent-stat-grid span {
  color: var(--muted);
  font-size: 7px;
}

.recent-stat-grid strong {
  color: var(--text);
  font-size: 11px;
}

.carousel-controls {
  display: flex;
  gap: 5px;
}

.carousel-controls button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
}

.player-news-carousel {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.player-news-card {
  min-width: 310px;
  max-width: 360px;
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  text-decoration: none;
  transition:
    transform .18s ease,
    border-color .18s ease;
}

.player-news-card:hover {
  transform: translateY(-3px);
  border-color: rgba(158, 64, 186, .5);
}

.player-news-art {
  min-height: 74px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(158, 64, 186, .35),
      rgba(158, 64, 186, .08)
    );
}

.player-news-art .helmet-corner {
  position: static;
  width: 54px;
  height: 42px;
}

.player-news-art > span:last-child {
  margin-left: auto;
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.player-news-copy {
  padding: 10px;
}

.player-news-copy small {
  color: var(--purple-light);
  font-size: 7px;
}

.player-news-copy h3 {
  margin: 4px 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.player-news-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.career-table-wrap {
  overflow-x: auto;
}

.career-table {
  width: 100%;
  border-collapse: collapse;
}

.career-table th,
.career-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-size: 9px;
  white-space: nowrap;
}

.career-table th:first-child,
.career-table td:first-child {
  text-align: left;
}

.career-table th {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.career-table tbody tr:hover {
  background: rgba(158, 64, 186, .07);
}

.career-stat-book {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.career-stat {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.career-stat:hover {
  border-color: rgba(158, 64, 186, .4);
  transform: translateY(-2px);
}

.career-stat span,
.career-stat strong,
.career-stat small {
  display: block;
}

.career-stat span {
  color: var(--muted);
  font-size: 7px;
}

.career-stat strong {
  color: var(--purple-light);
  font-size: 12px;
}

.career-stat small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 6px;
  opacity: .7;
}

/* =========================================================
   ANALYTICS
========================================================= */

.analytics-kpis {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.analytics-kpi {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .12),
      var(--panel)
    );
}

.analytics-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      var(--purple),
      transparent
    );
}

.analytics-kpi span,
.analytics-kpi strong {
  display: block;
}

.analytics-kpi span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.analytics-kpi strong {
  margin-top: 4px;
  color: var(--purple-light);
  font-size: 21px;
}

.comparison-list {
  display: grid;
  gap: 7px;
}

.comparison-row {
  display: grid;
  grid-template-columns:
    120px
    minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px;
  border-radius: 8px;
}

.comparison-row:hover {
  background: rgba(158, 64, 186, .08);
}

.mine-comparison {
  background: rgba(158, 64, 186, .1);
}

.comparison-team {
  overflow: hidden;
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-bars {
  display: grid;
  gap: 4px;
}

.comparison-line {
  display: grid;
  grid-template-columns:
    68px
    minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.comparison-line > span {
  color: var(--muted);
  font-size: 7px;
  text-align: right;
}

.comparison-line > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.comparison-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.bar-primary {
  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--purple-light)
    );
}

.bar-secondary {
  background:
    linear-gradient(
      90deg,
      #62707F,
      #91A0AF
    );
}

/* =========================================================
   PROFILE PAGE
========================================================= */

.profile-banner {
  height: 220px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background:
    linear-gradient(
      135deg,
      #78288F,
      #322038
    );
  background-position: center;
  background-size: cover;
}

.profile-shell {
  padding: 0 20px 20px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--panel);
}

.profile-head {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin-bottom: -22px;
  transform: translateY(-38px);
}

.profile-big-avatar {
  width: 95px;
  height: 95px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 4px solid var(--panel);
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--purple-dark)
    );
  font-size: 22px;
  font-weight: 900;
}

.profile-big-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-title h1 {
  margin: 0;
  font-size: 24px;
}

.profile-title span {
  color: var(--purple-light);
  font-size: 10px;
}

.profile-bio {
  max-width: 720px;
  color: var(--text-soft);
  font-size: 11px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.social-links a {
  padding: 5px 8px;
  border: 1px solid rgba(158, 64, 186, .3);
  border-radius: 999px;
  background: rgba(158, 64, 186, .08);
  color: var(--purple-light);
  font-size: 9px;
  text-decoration: none;
}

.showcase-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.showcase-card {
  padding: 12px;
  border: 1px solid rgba(158, 64, 186, .3);
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .14),
      var(--panel)
    );
}

.composer textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-soft);
  color: var(--text);
}

.composer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.post {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.post.reply {
  margin-left: 28px;
  padding-left: 10px;
  border-left: 2px solid var(--purple);
}

.post-head {
  display: flex;
  justify-content: space-between;
}

.post-body {
  margin: 6px 0;
  font-size: 11px;
}

.post-actions {
  display: flex;
  gap: 9px;
}

.post-actions button {
  border: 0;
  background: transparent;
  color: var(--purple-light);
  font-size: 8px;
}

/* =========================================================
   MODAL
========================================================= */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .72);
}

.modal {
  width: min(600px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.upload-row,
.league-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.league-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 9px;
}

/* =========================================================
   ORIGINAL RESPONSIVE RULES
========================================================= */

@media (max-width: 1250px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 > .stack:last-child {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .weekly-insight-grid {
    grid-template-columns: 1fr 1fr;
  }

  .weekly-insight-grid > .card:first-child {
    grid-column: 1 / -1;
  }

  .position-columns {
    grid-template-columns:
      repeat(
        2,
        minmax(260px, 1fr)
      );
  }

  .advanced-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .balance-suggestion-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .career-stat-book {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 950px) {
  :root {
    --sidebar-width: 72px;
  }

  .brand-mark {
    width: 54px !important;
    height: 54px !important;
  }

  .profile-button-text {
    display: none;
  }

  .grid-2,
  .scouting-grid,
  .player-profile-layout {
    grid-template-columns: 1fr;
  }

  .trade-calculator {
    grid-template-columns: 1fr;
  }

  .trade-center-column {
    order: 2;
  }

  .analytics-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .career-stat-book {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .player-profile-hero {
    grid-template-columns: 110px 1fr;
  }

  .player-profile-photo {
    width: 105px;
    height: 105px;
  }
}

@media (max-width: 650px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    display: none;
  }

  .auth-panel {
    padding: 16px;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-logo {
    width: 56px;
    height: 48px;
    margin: 0;
  }

  .brand-mark {
    width: 44px !important;
    height: 44px !important;
  }

  .nav {
    display: flex;
    overflow-x: auto;
  }

  .nav-button {
    min-width: 44px;
    width: 44px;
  }

  .nav-label {
    display: none;
  }

  .main-wrap {
    width: 100%;
  }

  .page-wrap {
    padding: 10px;
  }

  .global-league-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .global-league-banner select {
    width: 100%;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .grid-3,
  .grid-2,
  .scouting-grid,
  .weekly-insight-grid {
    grid-template-columns: 1fr;
  }

  .weekly-insight-grid > .card:first-child {
    grid-column: auto;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .advanced-grid,
  .analytics-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .position-columns {
    grid-template-columns: 1fr;
  }

  .position-column {
    min-width: 0;
  }

  .balance-suggestion-grid {
    grid-template-columns: 1fr;
  }

  .career-stat-book {
    grid-template-columns: 1fr 1fr;
  }

  .bio-stat-grid,
  .recent-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .player-profile-hero {
    grid-template-columns: 80px 1fr;
    padding: 12px;
  }

  .player-profile-photo {
    width: 76px;
    height: 76px;
  }

  .player-profile-identity h1 {
    font-size: 22px;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .upload-row,
  .league-checks {
    grid-template-columns: 1fr;
  }

  .trade-value-head {
    display: none;
  }

  .trade-player-row summary {
    grid-template-columns:
      34px
      1fr
      55px;
  }

  .trade-player-row summary > :nth-child(4),
  .trade-player-row summary > :nth-child(5),
  .trade-player-row summary > :nth-child(6) {
    display: none;
  }

  .trade-player-detail {
    padding: 10px;
  }

  .trade-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   VECTORS 0.5 ADDITIONS
========================================================= */

.card-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.btn.compact {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 9px;
}

/* =========================================================
   LEAGUE PULSE — ONE COLUMN NEWS
========================================================= */

.pulse-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.75fr)
    minmax(250px, .75fr);
  gap: 12px;
  align-items: start;
}

.news-list-one-column {
  display: grid;
  gap: 10px;
}

.news-card-horizontal {
  min-height: 128px;
  display: grid;
  grid-template-columns:
    190px
    minmax(0, 1fr);
  overflow: hidden;
  border-radius: 12px;
}

.news-card-horizontal .news-thumb-wrap {
  min-height: 128px;
  height: 100%;
}

.news-card-horizontal .news-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card-horizontal .news-card-copy {
  padding: 14px 16px;
}

.news-card-horizontal h3 {
  font-size: 16px;
  line-height: 1.25;
}

.news-card-horizontal p {
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   NFL GAME CAROUSEL
========================================================= */

.game-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  padding: 2px 2px 7px;
  scrollbar-width: thin;
}

.game-card {
  flex: 0 0 min(360px, 82vw);
  scroll-snap-align: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(158, 64, 186, .12),
      transparent 46%
    ),
    var(--panel-soft);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(158, 64, 186, .55);
  box-shadow: var(--purple-shadow);
}

.game-card.live-game {
  border-color: rgba(158, 64, 186, .72);
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .16),
      transparent 50%
    ),
    var(--panel-soft);
}

.game-card-top {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.game-status {
  color: var(--text);
}

.game-status.live {
  color: var(--purple-bright);
}

.game-team-row {
  min-height: 42px;
  display: grid;
  grid-template-columns:
    30px
    minmax(0, 1fr)
    auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--border);
}

.game-team-row strong {
  font-size: 13px;
}

.game-team-row b {
  font-size: 22px;
  line-height: 1;
}

.game-team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.game-team-logo.fallback {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(158, 64, 186, .14);
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
}

.game-leaders {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.game-leader {
  display: grid;
  grid-template-columns:
    28px
    minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.game-leader img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--panel);
}

.game-leader div {
  min-width: 0;
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  gap: 6px;
  align-items: baseline;
}

.game-leader span,
.game-leader small {
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
}

.game-leader strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PLAYERS PAGE FILTERS
========================================================= */

.players-filter-shell {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.player-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.player-filter-row select {
  min-width: 150px;
  height: 36px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
}

/* =========================================================
   LARGER PLAYER CARDS
========================================================= */

.position-column {
  min-width: 320px;
}

.rank-player > summary {
  min-height: 74px;
  padding: 9px 11px;
}

.rank-headshot,
.rank-headshot-wrap {
  width: 52px !important;
  height: 52px !important;
}

.rank-player-main strong {
  font-size: 12px;
  line-height: 1.25;
}

.rank-player-main small,
.rank-points small {
  font-size: 8px;
}

.rank-points strong {
  font-size: 14px;
}

.rank-number {
  min-width: 24px;
  font-size: 11px;
}

.rank-player-detail {
  padding: 10px 12px 12px 72px;
}

/* =========================================================
   TRADITIONAL TEAM-COLOR HELMETS
========================================================= */

.helmet-corner {
  width: 30px;
  height: 23px;
}

.helmet-corner svg {
  filter:
    saturate(.98)
    contrast(1.02);
}

/* =========================================================
   DEEP WEEKLY RECOMMENDATIONS
========================================================= */

.deep-recommendation {
  text-align: left;
}

.recommendation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recommendation-edge {
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
}

.recommendation-metrics {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 6px;
  margin-top: 9px;
}

.recommendation-metrics > span {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(158, 64, 186, .22);
  border-radius: 8px;
  background: rgba(158, 64, 186, .08);
}

.recommendation-metrics small,
.recommendation-metrics b {
  display: block;
}

.recommendation-metrics small {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.recommendation-metrics b {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PROFILE BADGES
========================================================= */

.profile-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 8px;
}

.profile-section-title h3 {
  margin: 0;
}

.profile-section-title span {
  color: var(--muted);
  font-size: 8px;
}

.profile-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.profile-badge {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 5px;
  border: 1px solid rgba(158, 64, 186, .28);
  border-radius: 999px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .14),
      var(--panel-soft)
    );
  color: var(--text);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .08);
}

.profile-badge svg,
.profile-badge .badge-monogram {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}

.profile-badge svg {
  fill: none;
  stroke: var(--purple-light);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-badge .badge-monogram {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 950;
}

.profile-badge b {
  max-width: 90px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-editor {
  display: grid;
  gap: 12px;
  max-height: 330px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
}

.badge-editor-group > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--purple-light);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.badge-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-option {
  cursor: pointer;
}

.badge-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.badge-option input:checked + .profile-badge {
  border-color: var(--purple);
  background: rgba(158, 64, 186, .28);
  box-shadow:
    0 0 0 2px rgba(158, 64, 186, .12);
}

/* =========================================================
   SHOWCASE TEAMS
========================================================= */

.showcase-button {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.showcase-open {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--purple-light);
  font-size: 8px;
  font-weight: 900;
}

.showcase-roster-modal {
  max-height: 65vh;
  overflow: auto;
  padding-right: 4px;
}

/* =========================================================
   ENCRYPTED DIRECT MESSAGES
========================================================= */

.e2ee-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(158, 64, 186, .28);
  border-radius: 10px;
  background: rgba(158, 64, 186, .08);
  color: var(--purple-light);
}

.e2ee-banner div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.e2ee-banner strong {
  color: var(--text);
  font-size: 10px;
}

.e2ee-banner span {
  color: var(--muted);
  font-size: 8px;
}

.messages-shell {
  min-height: 620px;
  display: grid;
  grid-template-columns:
    300px
    minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.message-sidebar {
  padding: 10px;
  border-right: 1px solid var(--border);
  background: var(--panel-soft);
}

.message-search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}

.message-search input {
  width: 100%;
  height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 10px;
}

.message-user-results {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}

.message-person {
  width: 100%;
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.message-person:hover,
.message-person.active {
  transform: translateX(2px);
  border-color: rgba(158, 64, 186, .3);
  background: rgba(158, 64, 186, .1);
}

.message-person strong,
.message-person span {
  display: block;
}

.message-person strong {
  font-size: 10px;
}

.message-person span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.message-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(
      145deg,
      var(--purple),
      var(--purple-light)
    );
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-conversation {
  min-width: 0;
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;
}

.conversation-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.conversation-head strong,
.conversation-head span {
  display: block;
}

.conversation-head strong {
  font-size: 11px;
}

.conversation-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-y: auto;
  padding: 16px;
}

.message-bubble-wrap {
  display: flex;
}

.message-bubble-wrap.mine {
  justify-content: flex-end;
}

.message-bubble {
  max-width: min(72%, 620px);
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 4px;
  background: var(--panel-soft);
}

.message-bubble-wrap.mine .message-bubble {
  border-color: rgba(158, 64, 186, .35);
  border-radius: 12px 12px 4px 12px;
  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .3),
      rgba(158, 64, 186, .14)
    );
}

.message-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 10px;
  line-height: 1.45;
}

.message-bubble span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 7px;
}

.message-composer {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--panel-soft);
}

.message-composer textarea {
  min-height: 46px;
  max-height: 150px;
  resize: vertical;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

/* =========================================================
   0.5 RESPONSIVE RULES
========================================================= */

@media (max-width: 980px) {
  .pulse-layout {
    grid-template-columns: 1fr;
  }

  .pulse-market-column {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .messages-shell {
    grid-template-columns:
      240px
      minmax(0, 1fr);
  }

  .recommendation-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 720px) {
  .news-card-horizontal {
    grid-template-columns: 1fr;
  }

  .news-card-horizontal .news-thumb-wrap {
    height: 160px;
  }

  .pulse-market-column {
    grid-template-columns: 1fr;
  }

  .messages-shell {
    min-height: 700px;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      minmax(0, 1fr);
  }

  .message-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .message-user-results {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .message-bubble {
    max-width: 88%;
  }

  .position-column {
    min-width: 285px;
  }
}

/* =========================================================
   VECTORS 0.6 REFINEMENT LAYER
   Readability, photo-first presentation, historical browsing,
   waiver intelligence, multi-team trades and profile graphics.
========================================================= */

/* READABILITY */
body {
  font-size: 16px;
  line-height: 1.58;
}

.muted {
  font-size: 13px;
}

.tiny {
  font-size: 12px;
}

.eyebrow {
  font-size: 11px;
}

.nav-label {
  font-size: 13px;
}

.profile-button-text strong {
  font-size: 13px;
}

.profile-button-text span {
  font-size: 11px;
}

.menu button {
  font-size: 13px;
}

.league-banner-copy small {
  font-size: 10px;
}

.league-banner-copy strong {
  font-size: 14px;
}

.global-league-banner select {
  min-height: 40px;
  font-size: 13px;
}

.page-header h1 {
  font-size: 34px;
}

.page-header p {
  font-size: 14px;
  line-height: 1.55;
}

.card-title {
  font-size: 15px;
}

.card-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.card-body {
  font-size: 14px;
}

.loading,
.empty {
  font-size: 14px;
}

.btn {
  min-height: 42px;
  font-size: 13px;
}

.btn.compact {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12px;
}

.notice {
  font-size: 13px;
}

.field > span {
  font-size: 13px;
}

.field input,
.field textarea,
.field select {
  font-size: 14px;
}

.hero h1 {
  font-size: 36px;
}

.hero p {
  font-size: 14px;
}

.stat small {
  font-size: 9px;
}

.stat strong {
  font-size: 16px;
}

.position-chip {
  min-width: 34px;
  min-height: 22px;
  padding: 3px 7px;
  font-size: 10px;
}

.info-tip {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.info-tip:hover::after,
.info-tip:focus::after {
  width: 290px;
  font-size: 12px;
}

.week-control strong {
  min-width: 92px;
  font-size: 13px;
}

.live {
  font-size: 10px;
}

.grounded-insight strong,
.recommendation-card strong {
  font-size: 13px;
}

.grounded-insight p,
.recommendation-card p {
  font-size: 12px;
}

.scoring-context p {
  font-size: 12px;
}

.scoring-badge {
  font-size: 10px;
}

.pill {
  font-size: 9px;
}

.value-chip {
  font-size: 10px;
}

.team-title strong {
  font-size: 13px;
}

.team-title span {
  font-size: 11px;
}

.metric small {
  font-size: 9px;
}

.metric strong {
  font-size: 13px;
}

.advanced-metric small {
  font-size: 9px;
}

.advanced-metric strong {
  font-size: 13px;
}

.trait strong {
  font-size: 13px;
}

.trait p {
  font-size: 12px;
}

.asset-copy strong {
  font-size: 12px;
}

.asset-copy small {
  font-size: 10px;
}

.trade-player-ident strong {
  font-size: 12px;
}

.trade-player-ident small {
  font-size: 10px;
}

.trade-value-head {
  font-size: 9px;
}

.trade-component span,
.trade-component strong {
  font-size: 10px;
}

.scarcity-explainer strong {
  font-size: 11px;
}

.scarcity-explainer span {
  font-size: 10px;
}

.bio-stat span {
  font-size: 9px;
}

.bio-stat strong {
  font-size: 13px;
}

.recent-score span,
.recent-score small {
  font-size: 10px;
}

.recent-stat-grid span {
  font-size: 9px;
}

.recent-stat-grid strong {
  font-size: 13px;
}

.career-table th,
.career-table td {
  font-size: 11px;
}

.career-table th {
  font-size: 9px;
}

.career-stat span {
  font-size: 9px;
}

.career-stat strong {
  font-size: 14px;
}

.career-stat small {
  font-size: 8px;
}

.analytics-kpi span {
  font-size: 10px;
}

.comparison-team {
  font-size: 11px;
}

.comparison-line > span {
  font-size: 9px;
}

.profile-title span {
  font-size: 12px;
}

.profile-bio {
  font-size: 14px;
}

.social-links a {
  font-size: 11px;
}

.post-body {
  font-size: 13px;
}

.post-actions button {
  font-size: 11px;
}

.league-check {
  font-size: 11px;
}

/* PLAYER PHOTOS / HELMETS REMOVED */

.helmet-corner {
  display: none !important;
}

.player-image-wrap {
  border-radius: 12px;
}

.player-photo {
  width: 54px;
  height: 54px;
  border-radius: 11px;
}

.slot-player-photo {
  width: 56px;
  height: 56px;
  border-radius: 11px;
}

.rank-headshot {
  width: 62px;
  height: 62px;
  border-radius: 11px;
}

.trade-headshot {
  width: 56px;
  height: 56px;
  border-radius: 11px;
}

.trade-suggestion-photo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

.player-profile-photo {
  width: 180px;
  height: 180px;
  border-radius: 18px;
}

.player-profile-hero {
  grid-template-columns:
    185px
    minmax(0, 1fr);
}

.player-profile-identity h1 {
  font-size: 38px;
}

.market-row {
  grid-template-columns:
    62px
    minmax(0, 1fr)
    auto;

  min-height: 72px;
}

.market-row strong {
  font-size: 13px;
}

.market-row span {
  font-size: 11px;
}

.market-row b {
  font-size: 12px;
}

.slot-row {
  grid-template-columns:
    98px
    62px
    minmax(0, 1fr)
    auto;

  min-height: 72px;
  padding: 8px 10px;
}

.slot-label small {
  font-size: 8px;
}

.slot-player-copy strong {
  font-size: 13px;
}

.slot-player-copy span {
  font-size: 11px;
}

.rank-player summary {
  grid-template-columns:
    30px
    68px
    minmax(0, 1fr)
    62px
    16px;

  gap: 9px;
  min-height: 80px;
  padding: 9px;
}

.rank-number {
  font-size: 12px;
}

.rank-player-main strong {
  font-size: 13px;
}

.rank-player-main small {
  font-size: 10px;
}

.rank-points strong {
  font-size: 14px;
}

.rank-points small {
  font-size: 8px;
}

.rank-player-detail {
  padding:
    12px
    12px
    14px
    105px;
}

.player-bio-mini {
  font-size: 10px;
}

.trade-search-option {
  grid-template-columns:
    62px
    1fr
    auto;

  min-height: 72px;
}

.trade-search-option strong {
  font-size: 12px;
}

.trade-search-option span {
  font-size: 10px;
}

.trade-player-row summary {
  min-height: 74px;
}

/* NEWS */

.pulse-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.8fr)
    minmax(280px, .72fr);

  gap: 14px;

  align-items: start;
}

.news-list-one-column {
  display: grid;
  gap: 12px;
}

.news-card-horizontal {
  min-height: 150px;

  display: grid;

  grid-template-columns:
    220px
    minmax(0, 1fr);
}

.news-card-horizontal .news-thumb-wrap {
  min-height: 150px;
  height: 100%;

  aspect-ratio: auto;
}

.news-thumb-fallback {
  width: 100%;
  height: 100%;

  min-height: 130px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(200, 115, 222, .28),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .26),
      var(--panel-soft)
    );

  color: var(--purple-light);

  font-size: 22px;
  font-weight: 950;

  letter-spacing: .1em;
}

.news-source {
  font-size: 10px;
}

.news-card h3 {
  font-size: 18px;
  line-height: 1.35;
}

.news-card p {
  font-size: 13px;
  line-height: 1.55;
}

.news-card-horizontal .news-card-copy {
  padding: 16px 18px;
}

.player-news-card {
  min-width: 360px;
  max-width: 420px;
}

.player-news-thumbnail-wrap {
  height: 175px;

  overflow: hidden;

  background: var(--bg-soft);
}

.player-news-thumbnail {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.player-news-copy {
  padding: 14px;
}

.player-news-copy small {
  font-size: 10px;
}

.player-news-copy h3 {
  font-size: 15px;
}

.player-news-copy p {
  font-size: 12px;
}

/* MATCHUPS */

.matchup-team-card {
  min-height: 78px;
  padding: 12px 14px;
}

.matchup-team-avatar {
  width: 58px;
  height: 58px;

  min-width: 58px;

  border-radius: 14px;

  object-fit: cover;
}

.manager-avatar-fallback {
  display: grid;
  place-items: center;

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--purple-dark)
    );

  color: #fff;

  font-weight: 900;
}

.matchup-manager-copy strong {
  font-size: 14px;
}

.matchup-manager-copy span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 11px;
}

.matchup-score {
  font-size: 31px;
}

.matchup-identity-card {
  margin-bottom: 14px;
}

.matchup-history-summary {
  display: grid;
  gap: 10px;
}

.matchup-history-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--panel-soft);
}

.matchup-history-summary span {
  color: var(--muted);
  font-size: 12px;
}

.matchup-history-summary strong {
  color: var(--purple-light);
  font-size: 24px;
}

.historical-lineup-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.historical-lineup-block h4 {
  margin:
    0
    0
    9px;

  font-size: 14px;
}

.historical-slot {
  grid-template-columns:
    92px
    62px
    minmax(0, 1fr)
    auto;
}

.historical-player-score {
  color: var(--purple-light);
  font-size: 16px;
}

/* PLAYERS + WAIVERS */

.players-filter-shell {
  display: grid;
  gap: 9px;

  margin-bottom: 14px;
}

.player-filter-row {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.player-filter-row select {
  min-width: 160px;
  min-height: 40px;

  padding:
    0
    34px
    0
    11px;

  border: 1px solid var(--border);
  border-radius: 9px;

  background: var(--panel);
  color: var(--text);

  font-size: 12px;
  font-weight: 800;
}

.position-column {
  min-width: 325px;
  max-height: 780px;
}

.position-column-head {
  padding: 10px 12px;
}

.waiver-card {
  margin-bottom: 14px;
}

.waiver-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;
}

.waiver-recommendation {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);

  gap: 9px;

  align-items: center;

  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--panel-soft);
}

.waiver-player {
  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    auto;

  gap: 8px;

  align-items: center;
}

.waiver-player-photo {
  width: 54px;
  height: 54px;

  object-fit: cover;
  object-position: center top;

  border-radius: 10px;
}

.waiver-player small,
.waiver-player strong,
.waiver-player span {
  display: block;
}

.waiver-player small {
  color: var(--muted);

  font-size: 9px;
  font-weight: 900;
}

.waiver-add small {
  color: var(--green);
}

.waiver-drop small {
  color: var(--red);
}

.waiver-player strong {
  margin:
    2px
    0;

  font-size: 12px;
}

.waiver-player span {
  color: var(--muted);

  font-size: 10px;
}

.waiver-player b {
  color: var(--purple-light);

  font-size: 14px;
}

.waiver-arrow {
  color: var(--muted);

  font-size: 18px;
}

.waiver-gain {
  position: absolute;

  top: 8px;
  right: 10px;

  padding: 3px 7px;

  border-radius: 999px;

  background:
    rgba(
      85,
      215,
      143,
      .12
    );

  color: var(--green);

  font-size: 9px;
  font-weight: 900;
}

/* MULTI-TEAM TRADES */

.trade-participant-controls {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-bottom: 14px;
}

.trade-participant-controls label,
.participant-fixed {
  min-height: 76px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 10px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--panel);
}

.trade-participant-controls label {
  flex-direction: column;
  align-items: stretch;
}

.trade-participant-controls label > span {
  color: var(--muted);

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}

.trade-participant-controls select,
.multi-pick-controls select {
  min-height: 38px;

  padding: 0 9px;

  border: 1px solid var(--border-light);
  border-radius: 8px;

  background: var(--bg-soft);
  color: var(--text);

  font-size: 12px;
}

.participant-fixed small,
.participant-fixed strong,
.participant-fixed span {
  display: block;
}

.participant-fixed small {
  color: var(--purple-light);

  font-size: 9px;
  font-weight: 900;
}

.participant-fixed strong {
  font-size: 13px;
}

.participant-fixed span {
  color: var(--muted);

  font-size: 11px;
}

.trade-manager-avatar {
  width: 48px;
  height: 48px;

  min-width: 48px;

  border-radius: 12px;

  object-fit: cover;
}

.multi-trade-grid {
  display: grid;

  gap: 10px;

  align-items: start;
}

.multi-trade-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.multi-trade-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.multi-trade-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.multi-trade-team {
  min-width: 0;

  padding: 11px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .07),
      var(--panel)
    );
}

.multi-trade-team-head {
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding-bottom: 10px;

  margin-bottom: 10px;

  border-bottom: 1px solid var(--border);
}

.multi-trade-team-head small,
.multi-trade-team-head strong,
.multi-trade-team-head span {
  display: block;
}

.multi-trade-team-head small {
  color: var(--purple-light);

  font-size: 9px;
  font-weight: 900;
}

.multi-trade-team-head strong {
  font-size: 13px;
}

.multi-trade-team-head span {
  color: var(--muted);

  font-size: 10px;
}

.multi-trade-team-head > b {
  color: var(--purple-light);

  font-size: 22px;
}

.multi-trade-summary {
  margin-top: 14px;

  padding: 12px;

  border: 1px solid rgba(158, 64, 186, .28);
  border-radius: 12px;

  background:
    rgba(
      158,
      64,
      186,
      .055
    );
}

.multi-trade-summary-head {
  display: flex;
  justify-content: space-between;

  gap: 12px;

  align-items: end;

  margin-bottom: 9px;
}

.multi-trade-summary-head strong {
  display: block;

  margin-top: 2px;

  font-size: 14px;
}

.multi-fairness-row {
  display: grid;

  grid-template-columns:
    48px
    minmax(130px, 1fr)
    70px
    80px
    70px
    auto;

  gap: 9px;

  align-items: center;

  padding: 9px;

  border-top: 1px solid var(--border);
}

.multi-fairness-row small,
.multi-fairness-row strong {
  display: block;
}

.multi-fairness-row small {
  color: var(--muted);

  font-size: 9px;
}

.multi-fairness-row strong {
  font-size: 12px;
}

.multi-fairness-name span {
  color: var(--muted);

  font-size: 10px;
}

.multi-pick-controls {
  display: grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr
    1fr
    auto;

  gap: 6px;

  margin-top: 8px;
}

.trade-selector-label {
  font-size: 10px;
}

.trade-asset-search input {
  min-height: 40px;

  font-size: 12px;
}

/* ANALYTICS */

.analytics-layout-v06 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, .9fr);

  gap: 14px;
}

.position-strength-chart {
  display: grid;

  gap: 11px;
}

.position-strength-row {
  display: grid;

  grid-template-columns:
    minmax(180px, .8fr)
    minmax(0, 1.2fr);

  gap: 12px;

  align-items: center;
}

.position-strength-label {
  display: flex;
  align-items: center;

  gap: 8px;
}

.position-strength-label strong,
.position-strength-label span {
  display: block;
}

.position-strength-label strong {
  font-size: 13px;
}

.position-strength-label span {
  max-width: 280px;

  overflow: hidden;

  color: var(--muted);

  font-size: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.position-strength-meter {
  position: relative;

  height: 30px;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: var(--panel-soft);
}

.position-strength-meter i {
  position: absolute;

  inset:
    0
    auto
    0
    0;

  min-width: 8px;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--purple-dark),
      var(--purple-light)
    );
}

.position-strength-meter b {
  position: absolute;

  inset:
    0
    10px
    0
    auto;

  display: flex;
  align-items: center;

  color: var(--text);

  font-size: 10px;
}

/* PROFILE */

.profile-performance-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(180px, .4fr);

  gap: 10px;

  margin:
    14px
    0
    18px;
}

.profile-win-card {
  display: flex;
  align-items: center;

  gap: 18px;

  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .13),
      var(--panel-soft)
    );
}

.win-donut {
  --win-pct: 0deg;

  position: relative;

  width: 112px;
  height: 112px;

  min-width: 112px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--green) var(--win-pct),
      rgba(255, 255, 255, .07) 0
    );
}

.win-donut::after {
  content: "";

  position: absolute;

  inset: 12px;

  border-radius: 50%;

  background: var(--panel);
}

.win-donut > div {
  position: relative;

  z-index: 2;

  text-align: center;
}

.win-donut strong,
.win-donut span {
  display: block;
}

.win-donut strong {
  font-size: 22px;
}

.win-donut span {
  color: var(--muted);

  font-size: 9px;
}

.profile-record-copy span,
.profile-record-copy strong,
.profile-record-copy small {
  display: block;
}

.profile-record-copy span {
  color: var(--muted);

  font-size: 11px;
}

.profile-record-copy strong {
  margin:
    3px
    0;

  color: var(--purple-light);

  font-size: 28px;
}

.profile-record-copy small {
  color: var(--muted);

  font-size: 10px;
}

.profile-mini-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--panel-soft);
}

.profile-mini-stat span,
.profile-mini-stat strong,
.profile-mini-stat small {
  display: block;
}

.profile-mini-stat span {
  color: var(--muted);

  font-size: 10px;

  text-transform: uppercase;
}

.profile-mini-stat strong {
  color: var(--purple-light);

  font-size: 32px;
}

.profile-mini-stat small {
  color: var(--muted);

  font-size: 10px;
}

.stock-list {
  display: grid;

  gap: 7px;
}

.stock-row {
  width: 100%;

  display: grid;

  grid-template-columns:
    64px
    minmax(0, 1fr)
    auto;

  gap: 10px;

  align-items: center;

  padding: 9px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--panel-soft);
  color: var(--text);

  text-align: left;
}

.stock-row:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .5
    );

  background:
    rgba(
      158,
      64,
      186,
      .09
    );
}

.stock-player-photo {
  width: 60px;
  height: 60px;

  object-fit: cover;
  object-position: center top;

  border-radius: 11px;
}

.stock-row strong,
.stock-row span,
.stock-row small {
  display: block;
}

.stock-row > div > strong {
  font-size: 13px;
}

.stock-row > div > span {
  color: var(--muted);

  font-size: 10px;
}

.stock-row > div > small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9px;
}

.stock-count {
  min-width: 78px;

  text-align: right;
}

.stock-count strong {
  color: var(--purple-light);

  font-size: 17px;
}

.stock-count span {
  color: var(--muted);

  font-size: 9px;
}

@media (max-width: 1250px) {
  .multi-trade-grid.participants-4 {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .trade-participant-controls {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .waiver-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  .pulse-layout,
  .analytics-layout-v06 {
    grid-template-columns: 1fr;
  }

  .multi-trade-grid.participants-3,
  .multi-trade-grid.participants-4 {
    grid-template-columns:
      1fr
      1fr;
  }

  .historical-lineup-grid {
    grid-template-columns: 1fr;
  }

  .profile-performance-grid {
    grid-template-columns: 1fr;
  }

  .player-profile-hero {
    grid-template-columns:
      145px
      minmax(0, 1fr);
  }

  .player-profile-photo {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  .page-header h1 {
    font-size: 29px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .news-card-horizontal {
    grid-template-columns: 1fr;
  }

  .news-card-horizontal .news-thumb-wrap {
    min-height: 190px;
    height: 190px;
  }

  .multi-trade-grid.participants-2,
  .multi-trade-grid.participants-3,
  .multi-trade-grid.participants-4 {
    grid-template-columns: 1fr;
  }

  .trade-participant-controls {
    grid-template-columns: 1fr;
  }

  .multi-fairness-row {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      auto;
  }

  .multi-fairness-row > div:nth-of-type(2),
  .multi-fairness-row > div:nth-of-type(3) {
    display: none;
  }

  .multi-pick-controls {
    grid-template-columns:
      1fr
      1fr;
  }

  .position-strength-row {
    grid-template-columns: 1fr;
  }

  .waiver-recommendation {
    grid-template-columns: 1fr;
  }

  .waiver-arrow {
    transform: rotate(90deg);

    text-align: center;
  }

  .waiver-gain {
    position: static;

    justify-self: start;
  }

  .player-profile-hero {
    grid-template-columns:
      110px
      minmax(0, 1fr);
  }

  .player-profile-photo {
    width: 106px;
    height: 106px;
  }

  .player-profile-identity h1 {
    font-size: 26px;
  }

  .slot-row,
  .historical-slot {
    grid-template-columns:
      78px
      54px
      minmax(0, 1fr)
      auto;
  }

  .slot-player-photo {
    width: 50px;
    height: 50px;
  }

  .rank-player summary {
    grid-template-columns:
      26px
      56px
      minmax(0, 1fr)
      52px
      14px;
  }

  .rank-headshot {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   VECTORS 0.7 REFINEMENT LAYER
========================================================= */

.nav-button {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.nav-button:hover,
.nav-button.active {
  border-radius: 50% !important;
}

.profile-two-pane {
  display: grid;
  grid-template-columns: minmax(360px,.9fr) minmax(420px,1.1fr);
  gap: 16px;
  align-items: start;
}

.profile-left-pane,
.profile-post-pane {
  min-width: 0;
}

.profile-left-pane .profile-banner {
  height: 190px;
}

.profile-left-pane .profile-shell {
  padding-bottom: 18px;
}

.profile-post-pane {
  position: sticky;
  top: calc(var(--topbar-height) + 14px);
}

.profile-post-feed {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}

.profile-sleeper-handle {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.sleeper-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: #4f46e5;
  color: white;
}

.sleeper-mark svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 12px 0;
}

.profile-meta-card {
  min-height: 78px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel-soft);
}

.profile-meta-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-meta-card strong {
  font-size: 13px;
}

.favorite-team-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-team-card img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.social-icon-links {
  gap: 8px !important;
}

.social-icon-link {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
}

.profile-section-heading {
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
}

.profile-flair-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-flair {
  width: 72px;
  min-height: 74px;
  padding: 7px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel-soft);
  text-align: center;
}

.profile-flair img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.profile-flair small {
  width: 100%;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-flair-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 11px;
}

.profile-win-card.win-red .win-donut {
  background:
    conic-gradient(
      var(--red)
      var(--win-pct),
      rgba(255,255,255,.07)
      0
    ) !important;
}

.profile-win-card.win-orange .win-donut {
  background:
    conic-gradient(
      #F29A4A
      var(--win-pct),
      rgba(255,255,255,.07)
      0
    ) !important;
}

.profile-win-card.win-green .win-donut {
  background:
    conic-gradient(
      var(--green)
      var(--win-pct),
      rgba(255,255,255,.07)
      0
    ) !important;
}

.profile-editor-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.badge-editor {
  margin-top: 12px;
}

.badge-picker-controls {
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  gap: 8px;
  margin: 7px 0;
}

.badge-picker-controls select,
.badge-picker-controls input {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text);
}

.selected-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.selected-badge-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid rgba(158,64,186,.35);
  border-radius: 999px;
  background: rgba(158,64,186,.1);
  color: var(--text);
}

.selected-badge-chip img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.selected-badge-chip span {
  max-width: 130px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-picker-results {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
}

.badge-picker-item {
  min-height: 68px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
}

.badge-picker-item.selected {
  border-color: var(--purple);
  box-shadow:
    inset
    0
    0
    0
    1px
    var(--purple);
}

.badge-picker-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.badge-picker-item span {
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performance-result {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.performance-result.win {
  background: rgba(85,215,143,.12);
  color: var(--green);
}

.performance-result.loss {
  background: rgba(255,101,120,.12);
  color: var(--red);
}

.performance-summary-kpis {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.performance-summary-kpis > div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
}

.performance-summary-kpis span,
.performance-summary-kpis strong,
.performance-summary-kpis small {
  display: block;
}

.performance-summary-kpis span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.performance-summary-kpis strong {
  margin: 3px 0;
  font-size: 14px;
}

.performance-summary-kpis small {
  color: var(--muted);
  font-size: 9px;
}

.historical-position-chart {
  display: grid;
  gap: 7px;
}

.historical-position-row {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) 46px;
  gap: 8px;
  align-items: center;
}

.historical-position-row > div {
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-soft);
}

.historical-position-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--purple-dark),
      var(--purple-light)
    );
}

.historical-position-row strong {
  font-size: 11px;
  text-align: right;
}

.player-news-generic {
  width: 100%;
  height: 100%;
  min-height: 175px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(200,115,222,.25),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(158,64,186,.24),
      var(--panel-soft)
    );
  color: var(--purple-light);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: .12em;
}

.trending-detail-list {
  display: grid;
  gap: 8px;
}

.trending-detail-card {
  display: grid;
  grid-template-columns: 42px 72px minmax(0,1fr) 115px;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.trending-rank {
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.trending-detail-photo {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
}

.trending-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.trending-detail-title button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.trending-detail-title button:hover {
  color: var(--purple-light);
}

.trending-detail-copy p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.trending-count-block {
  text-align: right;
}

.trending-count-block small,
.trending-count-block strong,
.trending-count-block span {
  display: block;
}

.trending-count-block small {
  color: var(--muted);
  font-size: 9px;
}

.trending-count-block strong {
  color: var(--purple-light);
  font-size: 20px;
}

.trending-count-block span {
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 1100px) {
  .profile-two-pane {
    grid-template-columns: 1fr;
  }

  .profile-post-pane {
    position: static;
  }

  .profile-post-feed {
    max-height: none;
  }

  .badge-picker-results {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .profile-meta-grid,
  .profile-editor-grid,
  .performance-summary-kpis {
    grid-template-columns: 1fr;
  }

  .badge-picker-controls {
    grid-template-columns: 1fr;
  }

  .badge-picker-results {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .trending-detail-card {
    grid-template-columns: 34px 58px minmax(0,1fr);
  }

  .trending-detail-photo {
    width: 54px;
    height: 54px;
  }

  .trending-count-block {
    grid-column: 2 / -1;
    text-align: left;
  }
}

/* VECTORS 0.8 — NFL WEEK SCORE STRIP */

.v08-score-strip-shell{
  margin:0 0 14px;
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(158,64,186,.055),
      transparent 46%
    ),
    var(--panel);

  box-shadow:var(--shadow);
}

.v08-score-strip-head{
  min-height:52px;

  padding:
    9px
    11px
    8px
    14px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  border-bottom:
    1px solid
    var(--border);
}

.v08-score-strip-title{
  min-width:0;

  display:flex;
  align-items:baseline;

  gap:9px;
}

.v08-score-strip-title .eyebrow{
  margin:0;
}

.v08-score-strip-title>strong{
  font-size:15px;
  font-weight:900;
}

.v08-score-strip-title>small{
  color:var(--muted);

  font-size:10px;
  font-weight:750;
}

.v08-score-strip-controls{
  display:flex;
  gap:5px;
}

.v08-score-strip-controls button{
  width:32px;
  height:32px;

  padding:0;

  display:grid;
  place-items:center;

  border:
    1px solid
    var(--border);

  border-radius:50%;

  background:
    var(--panel-soft);

  color:
    var(--muted);

  transition:
    .15s ease;
}

.v08-score-strip-controls button:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(
      158,
      64,
      186,
      .5
    );

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);
}

.v08-score-rail{
  display:flex;

  overflow-x:auto;

  scroll-snap-type:
    x proximity;

  scrollbar-width:thin;

  overscroll-behavior-inline:
    contain;
}

.v08-score-game{
  position:relative;

  flex:
    0
    0
    194px;

  min-height:118px;

  padding:
    10px
    11px;

  scroll-snap-align:start;

  border-right:
    1px solid
    var(--border);

  background:
    var(--panel);

  transition:
    background .15s ease,
    box-shadow .15s ease;
}

.v08-score-game:last-child{
  border-right:0;
}

.v08-score-game:hover{
  background:
    var(--panel-hover);
}

.v08-score-game.state-in{
  background:
    linear-gradient(
      145deg,
      rgba(255,101,120,.06),
      rgba(158,64,186,.07)
    ),
    var(--panel);
}

.v08-score-game[data-v08-focus="1"]::after{
  content:"";

  position:absolute;

  inset:
    auto
    10px
    0;

  height:2px;

  border-radius:
    999px
    999px
    0
    0;

  background:
    var(--purple);
}

.v08-score-game.state-in[data-v08-focus="1"]::after{
  background:
    var(--red);
}

.v08-score-game-top{
  min-height:22px;

  margin-bottom:7px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:6px;
}

.v08-score-status{
  min-width:0;

  overflow:hidden;

  color:
    var(--text-soft);

  font-size:10px;
  font-weight:900;

  letter-spacing:.015em;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.v08-score-status.live{
  display:inline-flex;
  align-items:center;

  gap:5px;

  color:
    var(--red);
}

.v08-score-status.live i{
  width:6px;
  height:6px;

  flex:
    0
    0
    6px;

  border-radius:50%;

  background:
    currentColor;

  box-shadow:
    0
    0
    0
    4px
    rgba(
      255,
      101,
      120,
      .1
    );
}

.v08-score-network{
  flex:
    0
    0
    auto;

  color:
    var(--muted);

  font-size:8px;
  font-weight:850;

  text-transform:uppercase;
}

.v08-score-teams{
  display:grid;

  gap:6px;
}

.v08-score-team{
  min-width:0;

  display:grid;

  grid-template-columns:
    24px
    38px
    minmax(0,1fr)
    27px;

  gap:6px;

  align-items:center;

  min-height:31px;

  color:
    var(--text-soft);
}

.v08-score-team.winner{
  color:
    var(--text);
}

.v08-score-logo{
  width:24px;
  height:24px;

  display:grid;
  place-items:center;
}

.v08-score-logo img{
  width:23px;
  height:23px;

  object-fit:contain;
}

.v08-score-logo b{
  font-size:8px;
}

.v08-score-team-code{
  font-size:11px;
  font-weight:900;
}

.v08-score-record{
  overflow:hidden;

  color:
    var(--muted);

  font-size:8px;
  font-weight:700;

  text-align:right;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.v08-score-points{
  min-width:27px;

  color:
    var(--text);

  font-size:14px;
  font-weight:950;

  text-align:right;
}

.v08-score-team.winner .v08-score-points{
  color:
    var(--purple-light);
}

html[data-theme="light"] .v08-score-game.state-in{
  background:
    linear-gradient(
      145deg,
      rgba(255,101,120,.055),
      rgba(158,64,186,.055)
    ),
    var(--panel);
}

@media(max-width:720px){
  .v08-score-strip-head{
    padding-left:11px;
  }

  .v08-score-strip-title{
    gap:6px;
  }

  .v08-score-strip-title>small{
    display:none;
  }

  .v08-score-game{
    flex-basis:184px;
  }
}

/* VECTORS 0.9 — WEEKLY INSIGHT + LINEUP REFINEMENT */

/* =========================================================
   SCOREBOARD
   Hide the browser scrollbar but preserve scrolling,
   arrows, trackpad and horizontal wheel movement.
========================================================= */

.v08-score-rail {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.v08-score-rail::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Slightly shorter / denser weekly scoreboard */

.v08-score-strip-head {
  min-height: 44px !important;

  padding:
    7px
    10px
    6px
    13px !important;
}

.v08-score-game {
  flex-basis: 188px !important;

  min-height: 98px !important;

  padding:
    7px
    10px !important;
}

.v08-score-game-top {
  min-height: 18px !important;

  margin-bottom: 4px !important;
}

.v08-score-team {
  min-height: 27px !important;

  grid-template-columns:
    22px
    36px
    minmax(0, 1fr)
    27px !important;

  gap: 5px !important;
}

.v08-score-logo,
.v08-score-logo img {
  width: 21px !important;
  height: 21px !important;
}

.v08-score-team-code {
  font-size: 10px !important;
}

.v08-score-points {
  font-size: 13px !important;
}

/* =========================================================
   WEEKLY INSIGHT TOP ROW
========================================================= */

.v09-insight-top-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  align-items: stretch;
}

.v09-summary-card {
  min-height: 390px;

  height: 100%;

  display: flex;
  flex-direction: column;
}

.v09-summary-card > .card-body {
  flex: 1;
}

.v09-live-matchup-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================================================
   COMBINED STRENGTHS + WEAKNESSES
========================================================= */

.v09-outlook-body {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.v09-outlook-panel {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--panel-soft);
}

.v09-outlook-panel.good {
  border-color:
    rgba(
      85,
      215,
      143,
      .28
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        85,
        215,
        143,
        .08
      ),
      transparent
      62%
    ),
    var(--panel-soft);
}

.v09-outlook-panel.bad {
  border-color:
    rgba(
      255,
      101,
      120,
      .28
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        101,
        120,
        .075
      ),
      transparent
      62%
    ),
    var(--panel-soft);
}

.v09-outlook-heading {
  display: flex;
  align-items: center;

  gap: 9px;

  padding-bottom: 9px;

  margin-bottom: 8px;

  border-bottom:
    1px solid
    var(--border);
}

.v09-outlook-icon {
  width: 30px;
  height: 30px;

  min-width: 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 13px;
  font-weight: 950;
}

.v09-outlook-panel.good
.v09-outlook-icon {
  color:
    var(--green);

  background:
    rgba(
      85,
      215,
      143,
      .12
    );
}

.v09-outlook-panel.bad
.v09-outlook-icon {
  color:
    var(--red);

  background:
    rgba(
      255,
      101,
      120,
      .12
    );
}

.v09-outlook-heading strong,
.v09-outlook-heading small {
  display: block;
}

.v09-outlook-heading strong {
  font-size: 13px;
}

.v09-outlook-heading small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 9px;
}

.v09-outlook-items {
  display: grid;

  gap: 7px;
}

.v09-outlook-item {
  width: 100%;

  padding:
    9px
    10px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    rgba(
      0,
      0,
      0,
      .08
    );

  color:
    var(--text);

  text-align: left;
}

.v09-outlook-panel.good
.v09-outlook-item:hover {
  border-color:
    rgba(
      85,
      215,
      143,
      .42
    );
}

.v09-outlook-panel.bad
.v09-outlook-item:hover {
  border-color:
    rgba(
      255,
      101,
      120,
      .42
    );
}

.v09-outlook-item strong {
  display: block;

  font-size: 12px;
}

.v09-outlook-item p {
  margin:
    3px
    0
    0;

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.45;
}

.v09-outlook-empty {
  padding: 10px;

  color:
    var(--muted);

  font-size: 10px;

  line-height: 1.45;
}

/* =========================================================
   WEEKLY WAIVER UPGRADES
========================================================= */

.v09-waiver-card {
  border-color:
    rgba(
      158,
      64,
      186,
      .3
    );
}

.v09-waiver-context {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding:
    9px
    10px;

  margin-bottom: 9px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);
}

.v09-waiver-context span {
  color:
    var(--muted);

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;
}

.v09-waiver-context strong {
  font-size: 10px;

  text-align: right;
}

.v09-waiver-list {
  display: grid;

  gap: 8px;
}

.v09-waiver-row {
  display: grid;

  grid-template-columns:
    minmax(0, .9fr)
    28px
    minmax(0, .9fr)
    minmax(220px, .75fr);

  gap: 9px;

  align-items: center;

  padding: 10px;

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  background:
    var(--panel-soft);
}

.v09-waiver-move {
  min-width: 0;

  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr);

  gap: 8px;

  align-items: center;

  position: relative;

  padding-top: 13px;
}

.v09-waiver-move > small {
  position: absolute;

  top: -1px;
  left: 0;

  font-size: 8px;

  font-weight: 950;

  letter-spacing: .08em;
}

.v09-waiver-move.add > small {
  color:
    var(--green);
}

.v09-waiver-move.drop > small {
  color:
    var(--red);
}

.v09-waiver-photo {
  width: 50px;
  height: 50px;

  border-radius: 10px;

  object-fit: cover;
  object-position: center top;
}

.v09-waiver-move strong,
.v09-waiver-move span {
  display: block;
}

.v09-waiver-move strong {
  overflow: hidden;

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v09-waiver-move span {
  margin-top: 3px;

  color:
    var(--muted);

  font-size: 9px;
}

.v09-waiver-arrow {
  color:
    var(--purple-light);

  font-size: 18px;

  font-weight: 900;

  text-align: center;
}

.v09-waiver-evidence {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 6px;
}

.v09-waiver-evidence span {
  padding: 7px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel);
}

.v09-waiver-evidence small,
.v09-waiver-evidence b {
  display: block;
}

.v09-waiver-evidence small {
  color:
    var(--muted);

  font-size: 8px;

  text-transform: uppercase;
}

.v09-waiver-evidence b {
  margin-top: 2px;

  color:
    var(--green);

  font-size: 12px;
}

/* =========================================================
   COLLAPSIBLE LINEUPS
========================================================= */

.v09-lineup-section {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  background:
    var(--panel-soft);
}

.v09-lineup-section +
.v09-lineup-section {
  margin-top: 9px;
}

.v09-lineup-summary {
  cursor: pointer;

  list-style: none;

  padding:
    10px
    12px;

  margin:
    0 !important;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    0 !important;
}

.v09-lineup-summary::-webkit-details-marker {
  display: none;
}

.v09-lineup-summary > div {
  display: flex;
  align-items: center;

  gap: 8px;
}

.v09-lineup-summary strong {
  font-size: 12px;
}

.v09-lineup-summary span {
  color:
    var(--muted);

  font-size: 9px;
}

.v09-lineup-chevron {
  color:
    var(--muted) !important;

  font-size:
    17px !important;

  transition:
    transform
    .15s
    ease;
}

.v09-lineup-section[open]
.v09-lineup-chevron {
  transform:
    rotate(
      180deg
    );
}

.v09-lineup-content {
  padding:
    0
    9px
    9px;
}

/* =========================================================
   FLEX / SUPER FLEX SLOT LABELS
========================================================= */

.v09-slot-row {
  grid-template-columns:
    112px
    62px
    minmax(0, 1fr)
    !important;
}

.v09-slot-identity {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 4px;
}

.v09-lineup-slot-badge {
  max-width: 108px;

  padding:
    4px
    7px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background:
    var(--panel);

  color:
    var(--text-soft);

  font-size: 8px;

  font-weight: 950;

  letter-spacing: .03em;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v09-lineup-slot-badge.flex {
  border-color:
    rgba(
      93,
      169,
      255,
      .34
    );

  background:
    rgba(
      93,
      169,
      255,
      .1
    );

  color:
    #7DBBFF;
}

.v09-lineup-slot-badge.superflex {
  border-color:
    rgba(
      200,
      117,
      240,
      .42
    );

  background:
    rgba(
      200,
      117,
      240,
      .12
    );

  color:
    #D593F6;
}

.v09-lineup-slot-badge.bench {
  color:
    var(--muted);
}

.v09-lineup-slot-badge.ir {
  border-color:
    rgba(
      255,
      101,
      120,
      .3
    );

  color:
    var(--red);
}

.v09-lineup-slot-badge.taxi {
  color:
    #8FA9C1;
}

.v09-player-position-label {
  display: block;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .v09-insight-top-grid,
  .v09-outlook-body {
    grid-template-columns:
      1fr;
  }

  .v09-summary-card {
    min-height: 0;
  }

  .v09-waiver-row {
    grid-template-columns:
      1fr
      26px
      1fr;
  }

  .v09-waiver-evidence {
    grid-column:
      1 /
      -1;
  }
}

@media (max-width: 720px) {
  .v09-waiver-row {
    grid-template-columns:
      1fr;
  }

  .v09-waiver-arrow {
    transform:
      rotate(
        90deg
      );
  }

  .v09-slot-row {
    grid-template-columns:
      96px
      54px
      minmax(0, 1fr)
      !important;
  }

  .v09-lineup-slot-badge {
    max-width: 92px;
  }
}

/* VECTORS 0.10 — NFL TEAM HUBS + WEEKLY/TRADING/TRADE REFINEMENT */

.v10-scoring-context-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.v10-scoring-context-inline > span {
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}

.v10-scoring-context-inline small,
.v10-scoring-context-inline strong {
  display: block;
}

.v10-scoring-context-inline small {
  color: rgba(255,255,255,.62);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.v10-scoring-context-inline strong {
  margin-top: 2px;
  color: #fff;
  font-size: 10px;
}

.v10-sleeper-handle-line {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 4px !important;
}

.v10-sleeper-handle-line .sleeper-mark {
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.v10-sleeper-handle-line .sleeper-mark svg {
  width: 14px;
  height: 14px;
}

.v10-market-row .v10-trend-count {
  min-width: 76px;
  text-align: right;
}

.v10-trend-count strong,
.v10-trend-count small {
  display: block;
}

.v10-trend-count strong {
  color: var(--purple-light);
  font-size: 12px;
}

.v10-trend-count small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.v10-score-team-link {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.v10-score-team-link:hover {
  background: rgba(158,64,186,.08);
}

.v10-team-hero {
  position: relative;
  overflow: hidden;
  min-height: 190px;

  display: grid;

  grid-template-columns:
    130px
    minmax(0,1fr)
    auto;

  gap: 20px;

  align-items: center;

  padding: 24px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--team-primary) 45%,
      var(--border)
    );

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 12% 20%,
      color-mix(
        in srgb,
        var(--team-primary) 38%,
        transparent
      ),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--team-primary) 18%,
        var(--panel)
      ),
      color-mix(
        in srgb,
        var(--team-secondary) 10%,
        var(--panel)
      )
    );
}

.v10-team-hero::after {
  content: "";

  position: absolute;

  inset:
    auto
    -60px
    -110px
    auto;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--team-primary) 18%,
      transparent
    );

  filter: blur(2px);
}

.v10-team-logo {
  width: 118px;
  height: 118px;

  object-fit: contain;

  position: relative;

  z-index: 1;
}

.v10-team-logo-fallback {
  display: grid;
  place-items: center;

  border-radius: 18px;

  background: var(--panel-soft);

  color: var(--purple-light);

  font-size: 22px;
  font-weight: 900;
}

.v10-team-hero-copy {
  position: relative;

  z-index: 1;
}

.v10-team-hero-copy h1 {
  margin:
    3px
    0
    5px;

  font-size: 34px;
}

.v10-team-hero-copy p {
  margin: 0;

  color: var(--muted);

  font-size: 12px;
}

.v10-team-record-block {
  position: relative;

  z-index: 1;

  min-width: 130px;

  padding: 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .11
    );

  border-radius: 12px;

  background:
    rgba(
      0,
      0,
      0,
      .14
    );

  text-align: center;
}

.v10-team-record-block small,
.v10-team-record-block strong {
  display: block;
}

.v10-team-record-block small {
  color: var(--muted);

  font-size: 8px;
  font-weight: 900;
}

.v10-team-record-block strong {
  margin-top: 3px;

  font-size: 30px;
}

.v10-team-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 8px;
}

.v10-team-stat {
  padding: 11px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v10-team-stat span,
.v10-team-stat strong {
  display: block;
}

.v10-team-stat span {
  color: var(--muted);

  font-size: 9px;

  text-transform: uppercase;
}

.v10-team-stat strong {
  margin-top: 3px;

  font-size: 16px;
}

.v10-team-schedule {
  display: grid;

  gap: 7px;
}

.v10-team-game {
  display: grid;

  grid-template-columns:
    70px
    minmax(0,1fr)
    150px;

  gap: 10px;

  align-items: center;

  min-height: 72px;

  padding:
    9px
    11px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v10-team-game.live {
  border-color:
    rgba(
      255,
      101,
      120,
      .35
    );
}

.v10-team-game-result {
  font-size: 11px;
  font-weight: 900;

  text-align: center;
}

.v10-team-game-result.win {
  color: var(--green);
}

.v10-team-game-result.loss {
  color: var(--red);
}

.v10-team-game-result.tie {
  color: #F29A4A;
}

.v10-opponent-link {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 5px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: var(--text);

  text-align: left;
}

.v10-opponent-link:hover {
  background:
    rgba(
      158,
      64,
      186,
      .08
    );
}

.v10-opponent-logo {
  width: 44px;
  height: 44px;

  object-fit: contain;
}

.v10-opponent-link small,
.v10-opponent-link strong {
  display: block;
}

.v10-opponent-link small {
  color: var(--muted);

  font-size: 9px;
}

.v10-opponent-link strong {
  font-size: 12px;
}

.v10-team-game-score {
  text-align: right;
}

.v10-team-game-score strong,
.v10-team-game-score small {
  display: block;
}

.v10-team-game-score strong {
  font-size: 14px;
}

.v10-team-game-score small {
  margin-top: 2px;

  color: var(--muted);

  font-size: 9px;
}

.v10-player-team-link,
.v10-favorite-team-link {
  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;
}

.v10-player-team-link {
  padding:
    5px
    9px;

  border:
    1px solid
    var(--border);

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
}

.v10-player-team-link:hover {
  border-color:
    var(--purple);

  color:
    var(--purple-light);
}

.v10-clickable-flair {
  color: var(--text);

  cursor: pointer;
}

.v10-clickable-flair:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(
      158,
      64,
      186,
      .5
    );
}

.v10-favorite-team-link {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 0;

  text-align: left;
}

.v10-trade-roster-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 12px;
}

.v10-trade-roster-group {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--panel);
}

.v10-trade-roster-head {
  display: grid;

  grid-template-columns:
    52px
    minmax(0,1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding: 11px;

  border-bottom:
    1px solid
    var(--border);

  background:
    var(--panel-soft);
}

.v10-trade-roster-head strong,
.v10-trade-roster-head span {
  display: block;
}

.v10-trade-roster-head strong {
  font-size: 13px;
}

.v10-trade-roster-head span,
.v10-trade-roster-head small {
  color: var(--muted);

  font-size: 9px;
}

.v10-trade-position-groups {
  padding: 9px;

  display: grid;

  gap: 10px;
}

.v10-trade-position-title {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-bottom: 5px;
}

.v10-trade-position-title > span:last-child {
  color: var(--muted);

  font-size: 9px;
}

.v10-trade-roster-list {
  display: grid;

  gap: 5px;
}

.v10-trade-roster-player {
  width: 100%;
  min-height: 66px;

  display: grid;

  grid-template-columns:
    56px
    minmax(0,1fr)
    auto;

  gap: 8px;

  align-items: center;

  padding: 7px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);

  color:
    var(--text);

  text-align: left;
}

.v10-trade-roster-player:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .45
    );

  background:
    rgba(
      158,
      64,
      186,
      .08
    );
}

.v10-trade-roster-player strong,
.v10-trade-roster-player span {
  display: block;
}

.v10-trade-roster-player strong {
  font-size: 12px;
}

.v10-trade-roster-player span {
  margin-top: 3px;

  color: var(--muted);

  font-size: 9px;
}

.v10-trade-roster-player > b {
  color:
    var(--purple-light);

  font-size: 14px;
}

@media (max-width: 980px) {
  .v10-team-stat-grid,
  .v10-trade-roster-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .v10-team-hero {
    grid-template-columns:
      100px
      minmax(0,1fr);
  }

  .v10-team-logo {
    width: 92px;
    height: 92px;
  }

  .v10-team-record-block {
    grid-column:
      1 /
      -1;
  }
}

@media (max-width: 700px) {
  .v10-team-stat-grid,
  .v10-trade-roster-grid {
    grid-template-columns:
      1fr;
  }

  .v10-team-game {
    grid-template-columns:
      54px
      minmax(0,1fr);
  }

  .v10-team-game-score {
    grid-column: 2;

    text-align: left;
  }

  .v10-team-hero {
    grid-template-columns:
      76px
      minmax(0,1fr);

    padding: 16px;
  }

  .v10-team-logo {
    width: 68px;
    height: 68px;
  }

  .v10-team-hero-copy h1 {
    font-size: 26px;
  }
}

/* VECTORS 0.11 — TRADE WORKSPACE + PROFILE LAYOUT REFINEMENT */

.v11-trade-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
  overflow: visible;
}

.v11-trade-control-card {
  position: relative;

  min-width: 0;
  min-height: 78px;

  flex: 1 1 0;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--panel);
}

.v11-mode-card,
.v11-count-card {
  min-width: 170px;

  padding: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.v11-mode-card > small,
.v11-count-card > small {
  margin-bottom: 7px;

  color:
    var(--muted);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .08em;
}

.v11-segmented-control {
  display: grid;

  grid-auto-flow: column;
  grid-auto-columns: 1fr;

  gap: 4px;

  padding: 3px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--bg-soft);
}

.v11-segmented-control button {
  min-height: 34px;

  padding:
    0
    8px;

  border: 0;
  border-radius: 7px;

  background:
    transparent;

  color:
    var(--muted);

  font-size: 10px;
  font-weight: 900;
}

.v11-segmented-control button.active {
  background:
    rgba(
      158,
      64,
      186,
      .16
    );

  color:
    var(--purple-light);

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      158,
      64,
      186,
      .38
    );
}

.v11-participant-control {
  min-width: 205px;
}

.v11-participant-trigger {
  width: 100%;
  min-height: 76px;

  padding: 9px;

  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    18px;

  gap: 8px;

  align-items: center;

  border: 0;
  border-radius: inherit;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;
}

.v11-participant-trigger:hover {
  background:
    rgba(
      158,
      64,
      186,
      .07
    );
}

.v11-participant-copy small,
.v11-participant-copy strong,
.v11-participant-copy span {
  display: block;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v11-participant-copy small {
  color:
    var(--purple-light);

  font-size: 8px;
  font-weight: 900;

  text-transform: uppercase;
}

.v11-participant-copy strong {
  margin-top: 2px;

  font-size: 12px;
}

.v11-participant-copy span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 9px;
}

.v11-dropdown-caret {
  color:
    var(--muted);

  font-size: 17px;

  text-align: center;
}

.v11-participant-menu {
  position: absolute;

  z-index: 80;

  top:
    calc(
      100% + 6px
    );

  left: 0;

  width:
    max(
      100%,
      280px
    );

  max-height: 360px;

  overflow-y: auto;

  padding: 6px;

  border:
    1px solid
    var(--border-light);

  border-radius: 12px;

  background:
    var(--panel);

  box-shadow:
    0
    18px
    40px
    rgba(
      0,
      0,
      0,
      .3
    );
}

.v11-participant-option {
  width: 100%;
  min-height: 58px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  gap: 8px;

  align-items: center;

  padding: 7px;

  border:
    1px solid
    transparent;

  border-radius: 9px;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;
}

.v11-participant-option:hover,
.v11-participant-option.selected {
  border-color:
    rgba(
      158,
      64,
      186,
      .35
    );

  background:
    rgba(
      158,
      64,
      186,
      .09
    );
}

.v11-participant-option
.trade-manager-avatar {
  width: 40px;
  height: 40px;

  min-width: 40px;
}

.v11-participant-option strong,
.v11-participant-option span {
  display: block;
}

.v11-participant-option strong {
  font-size: 11px;
}

.v11-participant-option span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 9px;
}

.v11-you-badge,
.v11-selected-slot {
  padding:
    3px
    6px;

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);

  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.v11-selected-slot {
  background:
    var(--panel-soft);

  color:
    var(--muted);
}

.v11-fairness-card {
  margin-bottom: 0;

  border-color:
    rgba(
      158,
      64,
      186,
      .3
    );
}

.v11-fairness-card
.multi-trade-summary {
  margin-top: 0;
}

.v11-player-pool-head {
  gap: 14px;
}

.v11-trade-search {
  width:
    min(
      340px,
      42vw
    );

  min-height: 40px;

  padding:
    0
    11px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  font-size: 11px;
}

.v11-send-target-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  padding:
    8px
    10px;

  border-bottom:
    1px solid
    var(--border);

  background:
    rgba(
      158,
      64,
      186,
      .045
    );
}

.v11-send-target-row span {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 800;
}

.v11-send-target-row select {
  min-width: 150px;
  min-height: 34px;

  padding:
    0
    8px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel);

  color:
    var(--text);

  font-size: 10px;
  font-weight: 800;
}

.v11-click-add-player {
  cursor: pointer;
}

.v11-click-add-player:hover {
  transform:
    translateY(
      -1px
    );
}

.v11-click-add-copy {
  margin-top:
    4px !important;

  color:
    var(--purple-light) !important;

  font-size:
    8px !important;

  font-weight: 800;
}

.v11-trade-player-value {
  min-width: 45px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 3px;
}

.v11-trade-player-value b {
  color:
    var(--purple-light);

  font-size: 14px;
}

.v11-trade-player-value i {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);

  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.v11-profile-two-pane {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(320px, 1fr)
    !important;
}

.v11-profile-meta-grid {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    !important;
}

.v11-showcase-meta-card {
  min-height: 78px;
}

.v11-showcase-mini-list {
  display: grid;

  gap: 4px;
}

.v11-showcase-mini-item {
  min-width: 0;
}

.v11-showcase-mini-item strong,
.v11-showcase-mini-item small {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v11-showcase-mini-item strong {
  font-size: 10px;
}

.v11-showcase-mini-item small {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
}

@media (
  max-width:
    1320px
) {
  .v11-trade-toolbar {
    flex-wrap: wrap;
  }

  .v11-trade-control-card {
    flex:
      1
      1
      210px;
  }
}

@media (
  max-width:
    1000px
) {
  .v11-profile-two-pane {
    grid-template-columns:
      1fr
      !important;
  }

  .v11-profile-meta-grid {
    grid-template-columns:
      1fr
      1fr
      !important;
  }
}

@media (
  max-width:
    720px
) {
  .v11-trade-toolbar {
    display: grid;

    grid-template-columns:
      1fr;
  }

  .v11-trade-control-card,
  .v11-mode-card,
  .v11-count-card,
  .v11-participant-control {
    min-width: 0;
  }

  .v11-participant-menu {
    width: 100%;
  }

  .v11-player-pool-head {
    align-items:
      stretch;
  }

  .v11-trade-search {
    width: 100%;
  }

  .v11-profile-meta-grid {
    grid-template-columns:
      1fr
      !important;
  }
}

/* VECTORS 0.12 — TRADE BUILDER UX + FAIRNESS REFINEMENT */

.v12-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.v12-fairness-card,
.v12-setup-card {
  min-height: 158px;
  height: 100%;
}

.v12-fairness-card {
  padding: 13px;
  border-color: rgba(158, 64, 186, .28);

  background:
    linear-gradient(
      145deg,
      rgba(158, 64, 186, .08),
      transparent 58%
    ),
    var(--panel);
}

.v12-fairness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
}

.v12-fairness-head .eyebrow {
  margin: 0;
}

.v12-fairness-head > div > strong {
  display: block;

  margin-top: 2px;

  font-size: 15px;
}

.v12-fairness-spread {
  min-width: 82px;

  padding: 7px 9px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);

  text-align: right;
}

.v12-fairness-spread small,
.v12-fairness-spread b {
  display: block;
}

.v12-fairness-spread small {
  color:
    var(--muted);

  font-size: 8px;

  text-transform: uppercase;
}

.v12-fairness-spread b {
  margin-top: 1px;

  color:
    var(--purple-light);

  font-size: 15px;
}

.v12-fairness-team-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 6px;
}

.v12-fairness-team {
  min-width: 0;
  min-height: 52px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    auto;

  gap: 7px;

  align-items: center;

  padding: 6px 8px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);
}

.v12-fairness-team
.trade-manager-avatar {
  width: 34px;
  height: 34px;

  min-width: 34px;

  border-radius: 9px;
}

.v12-fairness-team-copy {
  min-width: 0;
}

.v12-fairness-team-copy strong,
.v12-fairness-team-copy span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v12-fairness-team-copy strong {
  font-size: 10px;
}

.v12-fairness-team-copy span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
  font-weight: 800;
}

.v12-fairness-net {
  font-size: 13px;
  font-weight: 950;
}

.v12-fairness-team.fair
.v12-fairness-net {
  color:
    var(--text-soft);
}

.v12-fairness-team.edge-positive,
.v12-fairness-team.gain,
.v12-fairness-team.strong-gain {
  border-color:
    rgba(
      85,
      215,
      143,
      .25
    );

  background:
    rgba(
      85,
      215,
      143,
      .055
    );
}

.v12-fairness-team.edge-positive
.v12-fairness-net,
.v12-fairness-team.gain
.v12-fairness-net,
.v12-fairness-team.strong-gain
.v12-fairness-net,
.v12-fairness-team.edge-positive
.v12-fairness-team-copy span,
.v12-fairness-team.gain
.v12-fairness-team-copy span,
.v12-fairness-team.strong-gain
.v12-fairness-team-copy span {
  color:
    var(--green);
}

.v12-fairness-team.edge-negative,
.v12-fairness-team.loss,
.v12-fairness-team.robbery-risk {
  border-color:
    rgba(
      255,
      101,
      120,
      .25
    );

  background:
    rgba(
      255,
      101,
      120,
      .05
    );
}

.v12-fairness-team.edge-negative
.v12-fairness-net,
.v12-fairness-team.loss
.v12-fairness-net,
.v12-fairness-team.robbery-risk
.v12-fairness-net,
.v12-fairness-team.edge-negative
.v12-fairness-team-copy span,
.v12-fairness-team.loss
.v12-fairness-team-copy span,
.v12-fairness-team.robbery-risk
.v12-fairness-team-copy span {
  color:
    var(--red);
}

.v12-setup-card > .card-header {
  min-height: 50px;
}

.v12-format-pill {
  padding: 5px 8px;

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .1
    );

  color:
    var(--purple-light);

  font-size: 8px;
  font-weight: 900;

  white-space: nowrap;
}

.v12-setup-card > .card-body {
  padding-top: 8px;
}

.v12-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 7px;
}

.v12-count-row > span {
  color:
    var(--muted);

  font-size: 9px;
  font-weight: 900;

  text-transform: uppercase;
}

.v12-count-buttons {
  display: flex;
  gap: 4px;
}

.v12-count-buttons button {
  width: 32px;
  height: 28px;

  padding: 0;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background:
    var(--panel-soft);

  color:
    var(--muted);

  font-size: 10px;
  font-weight: 900;
}

.v12-count-buttons button.active {
  border-color:
    rgba(
      158,
      64,
      186,
      .45
    );

  background:
    rgba(
      158,
      64,
      186,
      .14
    );

  color:
    var(--purple-light);
}

.v12-participant-grid {
  display: grid;
  gap: 5px;
}

.v12-participant-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v12-participant-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v12-participant-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v12-participant-card {
  position: relative;

  min-width: 0;
}

.v12-participant-trigger {
  width: 100%;
  min-height: 56px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    15px;

  gap: 6px;

  align-items: center;

  padding: 6px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);

  color:
    var(--text);

  text-align: left;
}

.v12-participant-trigger:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .35
    );

  background:
    rgba(
      158,
      64,
      186,
      .07
    );
}

.v12-participant-trigger
.trade-manager-avatar {
  width: 34px;
  height: 34px;

  min-width: 34px;

  border-radius: 8px;
}

.v12-participant-copy {
  min-width: 0;
}

.v12-participant-copy small,
.v12-participant-copy strong,
.v12-participant-copy span {
  display: block;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v12-participant-copy small {
  color:
    var(--purple-light);

  font-size: 7px;
  font-weight: 900;

  text-transform: uppercase;
}

.v12-participant-copy strong {
  margin-top: 1px;

  font-size: 9px;
}

.v12-participant-copy span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
}

.v12-participant-caret {
  color:
    var(--muted);

  font-size: 14px;
}

.v12-participant-menu {
  position: absolute;

  z-index: 100;

  top:
    calc(
      100% + 5px
    );

  left: 0;

  width:
    max(
      100%,
      255px
    );

  max-height: 330px;

  overflow-y: auto;

  padding: 5px;

  border:
    1px solid
    var(--border-light);

  border-radius: 10px;

  background:
    var(--panel);

  box-shadow:
    0
    18px
    42px
    rgba(
      0,
      0,
      0,
      .32
    );
}

.v12-participant-option {
  width: 100%;
  min-height: 52px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  gap: 7px;

  align-items: center;

  padding: 6px;

  border:
    1px solid
    transparent;

  border-radius: 8px;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;
}

.v12-participant-option:hover,
.v12-participant-option.selected {
  border-color:
    rgba(
      158,
      64,
      186,
      .32
    );

  background:
    rgba(
      158,
      64,
      186,
      .08
    );
}

.v12-participant-option
.trade-manager-avatar {
  width: 36px;
  height: 36px;

  min-width: 36px;
}

.v12-participant-option strong,
.v12-participant-option span {
  display: block;
}

.v12-participant-option strong {
  font-size: 10px;
}

.v12-participant-option span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
}

.v12-you-badge,
.v12-slot-badge {
  padding: 3px 5px;

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);

  font-size: 7px;
  font-weight: 900;
}

.v12-slot-badge {
  background:
    var(--panel-soft);

  color:
    var(--muted);
}

.v12-player-pool-card {
  margin-bottom: 12px;
}

.v12-player-pool-head {
  gap: 12px;
}

.v12-trade-search {
  width:
    min(
      360px,
      38vw
    );

  min-height: 38px;

  padding:
    0
    10px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  font-size: 11px;
}

.v12-trade-methodology {
  margin-bottom: 9px;
}

.v12-player-pools {
  display: grid;

  gap: 8px;

  align-items: start;
}

.v12-player-pools.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v12-player-pools.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v12-player-pools.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v12-trade-roster-group {
  min-width: 0;
}

.v12-trade-roster-head {
  grid-template-columns:
    44px
    minmax(0, 1fr)
    auto
    !important;

  padding:
    8px
    !important;
}

.v12-trade-roster-head
.trade-manager-avatar {
  width: 40px;
  height: 40px;

  min-width: 40px;
}

.v12-trade-player {
  min-height:
    61px
    !important;

  grid-template-columns:
    50px
    minmax(0, 1fr)
    auto
    !important;

  transition:
    opacity .15s ease,
    filter .15s ease,
    border-color .15s ease;
}

.v12-trade-player
.trade-headshot {
  width: 48px;
  height: 48px;
}

.v12-trade-player.selected,
.v12-trade-player:disabled {
  opacity: .46;

  filter:
    grayscale(.92)
    saturate(.35);

  cursor: default;

  border-color:
    rgba(
      150,
      150,
      150,
      .18
    )
    !important;

  background:
    rgba(
      120,
      120,
      120,
      .06
    )
    !important;
}

.v12-player-action-copy {
  margin-top:
    4px
    !important;

  color:
    var(--purple-light)
    !important;

  font-size:
    7px
    !important;

  font-weight: 800;
}

.v12-trade-player.selected
.v12-player-action-copy,
.v12-trade-player:disabled
.v12-player-action-copy {
  color:
    var(--muted)
    !important;
}

.v12-trade-player-value {
  min-width: 40px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 3px;
}

.v12-trade-player-value b {
  color:
    var(--purple-light);

  font-size: 13px;
}

.v12-trade-player-value i {
  width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(
      158,
      64,
      186,
      .11
    );

  color:
    var(--purple-light);

  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.v12-builder-card {
  margin-top: 0;
}

.v12-builder-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    )
    !important;
}

.v12-builder-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    !important;
}

.v12-builder-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    )
    !important;
}

.v12-builder-grid
.multi-trade-team {
  min-width: 0;
}

.v12-recipient-player {
  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr);

  gap: 9px;

  align-items: center;

  padding: 10px;

  margin-bottom: 10px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v12-recipient-player strong,
.v12-recipient-player span {
  display: block;
}

.v12-recipient-player strong {
  font-size: 13px;
}

.v12-recipient-player span {
  margin-top: 3px;

  color:
    var(--muted);

  font-size: 9px;
}

.v12-recipient-grid {
  display: grid;

  gap: 7px;
}

.v12-recipient-option {
  width: 100%;
  min-height: 62px;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding: 8px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);

  color:
    var(--text);

  text-align: left;
}

.v12-recipient-option:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .45
    );

  background:
    rgba(
      158,
      64,
      186,
      .09
    );
}

.v12-recipient-option
.trade-manager-avatar {
  width: 42px;
  height: 42px;

  min-width: 42px;
}

.v12-recipient-option strong,
.v12-recipient-option span {
  display: block;
}

.v12-recipient-option strong {
  font-size: 11px;
}

.v12-recipient-option span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 9px;
}

.v12-recipient-option > b {
  color:
    var(--purple-light);

  font-size: 10px;
}

@media (max-width: 1250px) {
  .v12-participant-grid.participants-4,
  .v12-player-pools.participants-4,
  .v12-builder-grid.participants-4 {
    grid-template-columns:
      repeat(
        4,
        minmax(230px, 1fr)
      )
      !important;

    overflow-x: auto;

    scrollbar-width: thin;
  }
}

@media (max-width: 1000px) {
  .v12-top-grid {
    grid-template-columns:
      1fr;
  }

  .v12-player-pools.participants-3,
  .v12-builder-grid.participants-3 {
    grid-template-columns:
      repeat(
        3,
        minmax(230px, 1fr)
      )
      !important;

    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .v12-fairness-team-grid {
    grid-template-columns:
      1fr;
  }

  .v12-participant-grid.participants-2,
  .v12-participant-grid.participants-3,
  .v12-participant-grid.participants-4 {
    grid-template-columns:
      1fr;
  }

  .v12-player-pools.participants-2,
  .v12-player-pools.participants-3,
  .v12-player-pools.participants-4,
  .v12-builder-grid.participants-2,
  .v12-builder-grid.participants-3,
  .v12-builder-grid.participants-4 {
    grid-template-columns:
      1fr
      !important;

    overflow: visible;
  }

  .v12-player-pool-head {
    align-items: stretch;
  }

  .v12-trade-search {
    width: 100%;
  }
}

/* VECTORS 0.13 — TRADE BUILDER LAYOUT + DROPDOWN FIX */

.v13-trade-setup-strip {
  position: relative;
  z-index: 500;

  overflow: visible !important;

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap: 8px;

  align-items: stretch;

  margin-bottom: 10px;
}

.v13-trade-count-control,
.v13-league-value-pill {
  min-height: 54px;

  padding: 7px 9px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel);
}

.v13-trade-count-control {
  min-width: 118px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;
}

.v13-trade-count-control > span,
.v13-league-value-pill small {
  color:
    var(--muted);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .08em;

  text-transform: uppercase;
}

.v13-trade-count-control > div {
  display: flex;
  gap: 3px;
}

.v13-trade-count-control button {
  width: 28px;
  height: 25px;

  padding: 0;

  border:
    1px solid
    var(--border);

  border-radius: 6px;

  background:
    var(--panel-soft);

  color:
    var(--muted);

  font-size: 9px;
  font-weight: 900;
}

.v13-trade-count-control button.active {
  border-color:
    rgba(
      158,
      64,
      186,
      .45
    );

  background:
    rgba(
      158,
      64,
      186,
      .14
    );

  color:
    var(--purple-light);
}

.v13-team-pickers {
  position: relative;
  z-index: 510;

  overflow: visible !important;

  display: grid;
  gap: 5px;
}

.v13-team-pickers.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v13-team-pickers.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v13-team-pickers.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v13-participant-card {
  position: relative;
  z-index: 1;

  min-width: 0;

  overflow: visible !important;
}

.v13-participant-card.open {
  z-index: 9999;
}

.v13-participant-trigger {
  width: 100%;
  min-height: 54px;

  display: grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    14px;

  gap: 6px;

  align-items: center;

  padding: 6px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel);

  color:
    var(--text);

  text-align: left;
}

.v13-participant-trigger:hover,
.v13-participant-card.open
.v13-participant-trigger {
  border-color:
    rgba(
      158,
      64,
      186,
      .42
    );

  background:
    rgba(
      158,
      64,
      186,
      .07
    );
}

.v13-participant-trigger
.trade-manager-avatar {
  width: 32px;
  height: 32px;

  min-width: 32px;

  border-radius: 8px;
}

.v13-participant-copy {
  min-width: 0;
}

.v13-participant-copy small,
.v13-participant-copy strong,
.v13-participant-copy span {
  display: block;

  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v13-participant-copy small {
  color:
    var(--purple-light);

  font-size: 7px;
  font-weight: 900;

  text-transform: uppercase;
}

.v13-participant-copy strong {
  margin-top: 1px;

  font-size: 9px;
}

.v13-participant-copy span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
}

.v13-caret {
  color:
    var(--muted);

  font-size: 13px;

  text-align: center;
}

.v13-participant-menu {
  position: absolute;

  z-index: 100000;

  top:
    calc(
      100% + 5px
    );

  left: 0;

  width:
    max(
      100%,
      265px
    );

  max-height: 360px;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 5px;

  border:
    1px solid
    var(--border-light);

  border-radius: 10px;

  background:
    var(--panel);

  box-shadow:
    0
    20px
    45px
    rgba(
      0,
      0,
      0,
      .42
    );
}

.v13-participant-option {
  width: 100%;
  min-height: 52px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  gap: 7px;

  align-items: center;

  padding: 6px;

  border:
    1px solid
    transparent;

  border-radius: 8px;

  background:
    transparent;

  color:
    var(--text);

  text-align: left;
}

.v13-participant-option:hover,
.v13-participant-option.selected {
  border-color:
    rgba(
      158,
      64,
      186,
      .35
    );

  background:
    rgba(
      158,
      64,
      186,
      .09
    );
}

.v13-participant-option
.trade-manager-avatar {
  width: 36px;
  height: 36px;

  min-width: 36px;
}

.v13-participant-option strong,
.v13-participant-option span {
  display: block;
}

.v13-participant-option strong {
  font-size: 10px;
}

.v13-participant-option span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
}

.v13-you-badge,
.v13-slot-badge {
  padding: 3px 5px;

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);

  font-size: 7px;
  font-weight: 900;
}

.v13-slot-badge {
  background:
    var(--panel-soft);

  color:
    var(--muted);
}

.v13-league-value-pill {
  min-width: 150px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.v13-league-value-pill strong {
  margin-top: 2px;

  font-size: 9px;
}

.v13-builder-card {
  position: relative;
  z-index: 2;

  overflow: visible !important;

  margin-bottom: 10px;
}

.v13-builder-card > .card-header {
  padding-bottom: 9px;
}

.v13-builder-fairness {
  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    8px
    12px;

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);

  background:
    linear-gradient(
      90deg,
      rgba(
        158,
        64,
        186,
        .07
      ),
      transparent
      60%
    );
}

.v13-builder-fairness-label {
  min-width: 94px;
}

.v13-builder-fairness-label span,
.v13-builder-fairness-label strong {
  display: block;
}

.v13-builder-fairness-label span {
  color:
    var(--muted);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .08em;
}

.v13-builder-fairness-label strong {
  margin-top: 1px;

  font-size: 11px;
}

.v13-builder-fairness-teams {
  flex: 1;

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 5px;
}

.v13-fairness-chip {
  min-width: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    0
    6px;

  align-items: center;

  padding:
    5px
    7px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel-soft);
}

.v13-fairness-chip > span {
  overflow: hidden;

  font-size: 9px;
  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v13-fairness-chip > strong {
  font-size: 11px;
}

.v13-fairness-chip > small {
  grid-column:
    1 /
    -1;

  margin-top: 1px;

  color:
    var(--muted);

  font-size: 7px;
}

.v13-fairness-chip.edge-positive,
.v13-fairness-chip.gain,
.v13-fairness-chip.strong-gain {
  border-color:
    rgba(
      85,
      215,
      143,
      .24
    );

  background:
    rgba(
      85,
      215,
      143,
      .045
    );
}

.v13-fairness-chip.edge-positive > strong,
.v13-fairness-chip.gain > strong,
.v13-fairness-chip.strong-gain > strong,
.v13-fairness-chip.edge-positive > small,
.v13-fairness-chip.gain > small,
.v13-fairness-chip.strong-gain > small {
  color:
    var(--green);
}

.v13-fairness-chip.edge-negative,
.v13-fairness-chip.loss,
.v13-fairness-chip.robbery-risk {
  border-color:
    rgba(
      255,
      101,
      120,
      .24
    );

  background:
    rgba(
      255,
      101,
      120,
      .04
    );
}

.v13-fairness-chip.edge-negative > strong,
.v13-fairness-chip.loss > strong,
.v13-fairness-chip.robbery-risk > strong,
.v13-fairness-chip.edge-negative > small,
.v13-fairness-chip.loss > small,
.v13-fairness-chip.robbery-risk > small {
  color:
    var(--red);
}

.v13-builder-body {
  padding-top: 10px;
}

.v13-builder-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    )
    !important;
}

.v13-builder-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    !important;
}

.v13-builder-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    )
    !important;
}

.v13-player-pool-card {
  position: relative;
  z-index: 1;
}

.v13-player-pool-head {
  gap: 12px;
}

.v13-trade-search {
  width:
    min(
      360px,
      38vw
    );

  min-height: 38px;

  padding:
    0
    10px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  font-size: 11px;
}

/* Override older trade-layout layers that could clip the team dropdown. */
#page-trades,
#page-trades .page-header,
.v13-trade-setup-strip,
.v13-team-pickers,
.v13-participant-card,
.v13-builder-card {
  overflow: visible !important;
}

/* The v0.12 fairness/setup row is no longer used. */
.v12-top-grid {
  display: none !important;
}

@media (max-width: 1250px) {
  .v13-trade-setup-strip {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .v13-league-value-pill {
    grid-column:
      1 /
      -1;

    min-height: 38px;
  }

  .v13-builder-fairness-teams {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .v13-builder-grid.participants-4 {
    grid-template-columns:
      repeat(
        4,
        minmax(230px, 1fr)
      )
      !important;

    overflow-x: auto;
  }
}

@media (max-width: 1000px) {
  .v13-trade-setup-strip {
    grid-template-columns:
      1fr;
  }

  .v13-team-pickers.participants-3,
  .v13-team-pickers.participants-4 {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .v13-builder-grid.participants-3 {
    grid-template-columns:
      repeat(
        3,
        minmax(230px, 1fr)
      )
      !important;

    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .v13-team-pickers.participants-2,
  .v13-team-pickers.participants-3,
  .v13-team-pickers.participants-4 {
    grid-template-columns:
      1fr;
  }

  .v13-builder-fairness {
    align-items: stretch;
    flex-direction: column;
  }

  .v13-builder-fairness-teams {
    grid-template-columns:
      1fr;
  }

  .v13-builder-grid.participants-2,
  .v13-builder-grid.participants-3,
  .v13-builder-grid.participants-4 {
    grid-template-columns:
      1fr
      !important;

    overflow: visible;
  }

  .v13-player-pool-head {
    align-items: stretch;
  }

  .v13-trade-search {
    width: 100%;
  }
}

/* VECTORS 0.14 — TRADE CARD ASSETS + BALANCE REFINEMENT */

.v14-builder-card {
  overflow: visible !important;
}

.v14-builder-header {
  gap: 12px;
}

.v14-builder-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.v14-overall-status {
  padding: 5px 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;

  white-space: nowrap;
}

.v14-overall-status.balanced {
  background:
    rgba(
      85,
      215,
      143,
      .10
    );

  color:
    var(--green);
}

.v14-overall-status.imbalanced {
  background:
    rgba(
      242,
      154,
      74,
      .11
    );

  color:
    #F29A4A;
}

.v14-team-grid {
  display: grid;

  gap: 9px;

  align-items: start;
}

.v14-team-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v14-team-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v14-team-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v14-team-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--panel-soft);
}

.v14-team-card.edge-positive,
.v14-team-card.gain,
.v14-team-card.strong-gain {
  border-color:
    rgba(
      85,
      215,
      143,
      .28
    );
}

.v14-team-card.edge-negative,
.v14-team-card.loss,
.v14-team-card.robbery-risk {
  border-color:
    rgba(
      255,
      101,
      120,
      .28
    );
}

.v14-team-head {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  gap: 8px;

  align-items: center;

  padding: 9px;

  border-bottom:
    1px solid
    var(--border);

  background:
    var(--panel);
}

.v14-team-head
.trade-manager-avatar {
  width: 44px;
  height: 44px;

  min-width: 44px;

  border-radius: 10px;
}

.v14-team-name {
  min-width: 0;
}

.v14-team-name strong,
.v14-team-name span {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v14-team-name strong {
  font-size: 11px;
}

.v14-team-name span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;
}

.v14-team-net {
  min-width: 72px;

  text-align: right;
}

.v14-team-net small,
.v14-team-net strong,
.v14-team-net span {
  display: block;
}

.v14-team-net small {
  color:
    var(--muted);

  font-size: 7px;
  font-weight: 900;
}

.v14-team-net strong {
  margin-top: 1px;

  font-size: 18px;
}

.v14-team-net span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 8px;
  font-weight: 800;
}

.v14-team-card.edge-positive
.v14-team-net strong,
.v14-team-card.gain
.v14-team-net strong,
.v14-team-card.strong-gain
.v14-team-net strong,
.v14-team-card.edge-positive
.v14-team-net span,
.v14-team-card.gain
.v14-team-net span,
.v14-team-card.strong-gain
.v14-team-net span {
  color:
    var(--green);
}

.v14-team-card.edge-negative
.v14-team-net strong,
.v14-team-card.loss
.v14-team-net strong,
.v14-team-card.robbery-risk
.v14-team-net strong,
.v14-team-card.edge-negative
.v14-team-net span,
.v14-team-card.loss
.v14-team-net span,
.v14-team-card.robbery-risk
.v14-team-net span {
  color:
    var(--red);
}

.v14-value-strip {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 5px;

  padding:
    7px
    8px;

  border-bottom:
    1px solid
    var(--border);
}

.v14-value-strip > div {
  padding: 6px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel);
}

.v14-value-strip small,
.v14-value-strip strong {
  display: block;
}

.v14-value-strip small {
  color:
    var(--muted);

  font-size: 7px;
  font-weight: 900;
}

.v14-value-strip strong {
  margin-top: 2px;

  overflow: hidden;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v14-source-list {
  display: grid;

  gap: 6px;

  padding: 8px;
}

.v14-source-column {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel);
}

.v14-source-head {
  display: grid;

  grid-template-columns:
    30px
    minmax(0, 1fr);

  gap: 6px;

  align-items: center;

  padding:
    6px
    7px;

  border-bottom:
    1px solid
    var(--border);

  background:
    rgba(
      158,
      64,
      186,
      .045
    );
}

.v14-source-head
.trade-manager-avatar {
  width: 28px;
  height: 28px;

  min-width: 28px;

  border-radius: 7px;
}

.v14-source-head small,
.v14-source-head strong {
  display: block;
}

.v14-source-head small {
  color:
    var(--muted);

  font-size: 6px;
  font-weight: 900;
}

.v14-source-head strong {
  margin-top: 1px;

  overflow: hidden;

  font-size: 8px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v14-source-assets {
  display: grid;

  gap: 4px;

  padding: 6px;
}

.v14-empty-source {
  padding: 7px;

  color:
    var(--muted);

  font-size: 8px;

  text-align: center;
}

.v14-selected-asset {
  display: grid;

  grid-template-columns:
    54px
    minmax(0, 1fr)
    auto
    22px;

  gap: 6px;

  align-items: center;

  min-height: 62px;

  padding: 5px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel-soft);
}

.v14-selected-player-photo {
  width: 52px;
  height: 52px;

  border-radius: 10px;

  object-fit: cover;
  object-position: center top;
}

.v14-pick-icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background:
    rgba(
      158,
      64,
      186,
      .12
    );

  color:
    var(--purple-light);

  font-size: 14px;
  font-weight: 950;
}

.v14-selected-asset-copy {
  min-width: 0;
}

.v14-selected-asset-copy strong,
.v14-selected-asset-copy small {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.v14-selected-asset-copy strong {
  font-size: 9px;
}

.v14-selected-asset-copy small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 7px;
}

.v14-selected-asset > b {
  color:
    var(--purple-light);

  font-size: 10px;
}

.v14-selected-asset > button {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    transparent;

  color:
    var(--muted);
}

.v14-pick-control {
  margin:
    0
    6px
    6px;

  padding: 7px;

  border:
    1px solid
    rgba(
      158,
      64,
      186,
      .30
    );

  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(
        158,
        64,
        186,
        .10
      ),
      transparent
      66%
    ),
    var(--panel-soft);
}

.v14-pick-title {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-bottom: 6px;
}

.v14-pick-title > span {
  width: 26px;
  height: 26px;

  display: grid;
  place-items: center;

  border-radius: 8px;

  background:
    rgba(
      158,
      64,
      186,
      .15
    );

  color:
    var(--purple-light);

  font-size: 13px;
  font-weight: 950;
}

.v14-pick-title strong,
.v14-pick-title small {
  display: block;
}

.v14-pick-title strong {
  font-size: 9px;
}

.v14-pick-title small {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 7px;
}

.v14-pick-fields {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    auto;

  gap: 4px;
}

.v14-pick-fields select {
  min-width: 0;
  min-height: 30px;

  padding:
    0
    6px;

  border:
    1px solid
    var(--border);

  border-radius: 7px;

  background:
    var(--panel);

  color:
    var(--text);

  font-size: 8px;
  font-weight: 800;
}

.v14-pick-fields button {
  min-height: 30px;

  padding:
    0
    8px;

  border:
    1px solid
    rgba(
      158,
      64,
      186,
      .38
    );

  border-radius: 7px;

  background:
    rgba(
      158,
      64,
      186,
      .16
    );

  color:
    var(--purple-light);

  font-size: 8px;
  font-weight: 900;
}

.v14-balance-box {
  padding:
    0
    8px
    8px;
}

.v14-balance-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 6px;

  margin-bottom: 5px;
}

.v14-balance-heading strong {
  color:
    var(--red);

  font-size: 8px;

  text-transform: uppercase;
}

.v14-balance-heading span {
  color:
    var(--muted);

  font-size: 7px;
}

.v14-balance-option {
  width: 100%;
  min-height: 48px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    auto;

  gap: 6px;

  align-items: center;

  padding: 5px;

  margin-top: 4px;

  border:
    1px solid
    rgba(
      85,
      215,
      143,
      .20
    );

  border-radius: 8px;

  background:
    rgba(
      85,
      215,
      143,
      .045
    );

  color:
    var(--text);

  text-align: left;
}

.v14-balance-option:hover {
  border-color:
    rgba(
      85,
      215,
      143,
      .42
    );

  background:
    rgba(
      85,
      215,
      143,
      .08
    );
}

.v14-balance-photo {
  width: 36px;
  height: 36px;

  border-radius: 8px;

  object-fit: cover;
  object-position: center top;
}

.v14-balance-option strong,
.v14-balance-option span {
  display: block;
}

.v14-balance-option strong {
  font-size: 8px;
}

.v14-balance-option span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 7px;
}

.v14-balance-option > b {
  color:
    var(--green);

  font-size: 9px;
}

.v14-balance-empty {
  margin:
    0
    8px
    8px;

  padding: 7px;

  border:
    1px dashed
    rgba(
      255,
      101,
      120,
      .20
    );

  border-radius: 8px;

  color:
    var(--muted);

  font-size: 7px;

  line-height: 1.4;
}

/* Larger trade-player headshots. */
#page-trades .trade-headshot {
  width: 64px !important;
  height: 64px !important;

  border-radius: 12px !important;

  object-fit: cover;
  object-position: center top;
}

#page-trades .v12-trade-player,
#page-trades .v10-trade-roster-player {
  min-height: 76px !important;

  grid-template-columns:
    68px
    minmax(0, 1fr)
    auto
    !important;
}

@media (max-width: 1320px) {
  .v14-team-grid.participants-4 {
    grid-template-columns:
      repeat(
        4,
        minmax(
          255px,
          1fr
        )
      );

    overflow-x: auto;
  }
}

@media (max-width: 1050px) {
  .v14-team-grid.participants-3 {
    grid-template-columns:
      repeat(
        3,
        minmax(
          255px,
          1fr
        )
      );

    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  .v14-builder-header {
    align-items:
      stretch;
  }

  .v14-builder-actions {
    justify-content:
      space-between;
  }

  .v14-team-grid.participants-2,
  .v14-team-grid.participants-3,
  .v14-team-grid.participants-4 {
    grid-template-columns:
      1fr;

    overflow:
      visible;
  }

  #page-trades .trade-headshot {
    width: 58px !important;
    height: 58px !important;
  }

  #page-trades .v12-trade-player,
  #page-trades .v10-trade-roster-player {
    min-height: 70px !important;

    grid-template-columns:
      62px
      minmax(0, 1fr)
      auto
      !important;
  }
}

/* VECTORS 0.15 — SPECTRUM AESTHETIC SYSTEM */

:root {
  --v15-cyan: #47D7D1;
  --v15-blue: #5DA9FF;
  --v15-amber: #F3B24C;
  --v15-coral: #FF6B7A;
  --v15-green: #55D78F;
  --v15-lime: #A7E36B;
  --v15-violet: #C873DE;

  --v15-grid:
    rgba(
      122,
      145,
      178,
      .075
    );

  --v15-card-glow:
    0
    18px
    46px
    rgba(
      0,
      0,
      0,
      .24
    );

  --v15-card-glow-hover:
    0
    20px
    52px
    rgba(
      29,
      38,
      55,
      .34
    );
}

html[data-theme="light"] {
  --v15-grid:
    rgba(
      72,
      81,
      100,
      .07
    );

  --v15-card-glow:
    0
    16px
    38px
    rgba(
      38,
      45,
      60,
      .08
    );

  --v15-card-glow-hover:
    0
    18px
    44px
    rgba(
      50,
      60,
      80,
      .12
    );
}

html,
body {
  background:
    var(--bg);
}

body {
  background-image:
    radial-gradient(
      circle at 14% 10%,
      rgba(
        93,
        169,
        255,
        .08
      ),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 16%,
      rgba(
        243,
        178,
        76,
        .055
      ),
      transparent 25%
    ),

    radial-gradient(
      circle at 74% 84%,
      rgba(
        71,
        215,
        209,
        .055
      ),
      transparent 32%
    ),

    radial-gradient(
      circle at 32% 74%,
      rgba(
        158,
        64,
        186,
        .07
      ),
      transparent 34%
    );

  background-attachment:
    fixed;
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(
      circle at 14% 10%,
      rgba(
        93,
        169,
        255,
        .11
      ),
      transparent 30%
    ),

    radial-gradient(
      circle at 88% 16%,
      rgba(
        243,
        178,
        76,
        .075
      ),
      transparent 25%
    ),

    radial-gradient(
      circle at 74% 84%,
      rgba(
        71,
        215,
        209,
        .07
      ),
      transparent 32%
    ),

    radial-gradient(
      circle at 32% 74%,
      rgba(
        158,
        64,
        186,
        .055
      ),
      transparent 34%
    );
}

/* =========================================================
   AMBIENT BACKGROUND GEOMETRY
========================================================= */

.page-wrap {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    visible !important;
}

.page-wrap::before,
.page-wrap::after {
  content:
    "";

  position:
    fixed;

  pointer-events:
    none;

  z-index:
    0;
}

.page-wrap::before {
  inset:
    var(--topbar-height)
    0
    0
    var(--sidebar-width);

  opacity:
    .72;

  background-image:
    linear-gradient(
      var(--v15-grid)
      1px,
      transparent
      1px
    ),

    linear-gradient(
      90deg,
      var(--v15-grid)
      1px,
      transparent
      1px
    ),

    linear-gradient(
      135deg,
      transparent
      47%,
      rgba(
        71,
        215,
        209,
        .035
      )
      48%,
      rgba(
        71,
        215,
        209,
        .035
      )
      49%,
      transparent
      50%
    );

  background-size:
    72px
    72px,

    72px
    72px,

    210px
    210px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(
        0,
        0,
        0,
        .76
      ),
      transparent
      94%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(
        0,
        0,
        0,
        .76
      ),
      transparent
      94%
    );

  animation:
    v15-grid-drift
    34s
    linear
    infinite;
}

.page-wrap::after {
  top:
    118px;

  right:
    -175px;

  width:
    480px;

  height:
    480px;

  border:
    1px
    solid
    rgba(
      93,
      169,
      255,
      .10
    );

  background:
    linear-gradient(
      135deg,
      rgba(
        158,
        64,
        186,
        .055
      ),
      transparent
      58%
    ),

    linear-gradient(
      45deg,
      transparent
      48%,
      rgba(
        243,
        178,
        76,
        .07
      )
      49%,
      transparent
      50%
    );

  clip-path:
    polygon(
      50% 0,
      100% 28%,
      84% 84%,
      31% 100%,
      0 57%,
      18% 13%
    );

  transform:
    rotate(
      17deg
    );

  animation:
    v15-geo-float
    18s
    ease-in-out
    infinite
    alternate;
}

.page-wrap > .page,
.page-wrap > .player-profile-page {
  position:
    relative;

  z-index:
    1;
}

@keyframes v15-grid-drift {
  from {
    background-position:
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      72px 72px,
      72px 72px,
      210px 210px;
  }
}

@keyframes v15-geo-float {
  0% {
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(
        17deg
      )
      scale(
        1
      );

    opacity:
      .58;
  }

  100% {
    transform:
      translate3d(
        -36px,
        28px,
        0
      )
      rotate(
        29deg
      )
      scale(
        1.05
      );

    opacity:
      .9;
  }
}

/* =========================================================
   SHELL + NAVIGATION
========================================================= */

.sidebar {
  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 6%,
      rgba(
        71,
        215,
        209,
        .07
      ),
      transparent
      26%
    ),

    linear-gradient(
      180deg,
      rgba(
        158,
        64,
        186,
        .05
      ),
      transparent
      34%
    ),

    var(--sidebar)
    !important;
}

.sidebar::before {
  content:
    "";

  position:
    absolute;

  inset:
    0
    0
    auto;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--v15-blue),
      var(--v15-cyan),
      var(--v15-amber)
    );

  opacity:
    .85;
}

.sidebar::after {
  content:
    "";

  position:
    absolute;

  top:
    98px;

  bottom:
    18px;

  right:
    0;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(
        93,
        169,
        255,
        .24
      ),
      rgba(
        158,
        64,
        186,
        .30
      ),
      rgba(
        71,
        215,
        209,
        .20
      ),
      transparent
    );
}

.brand-mark {
  filter:
    drop-shadow(
      0
      9px
      18px
      rgba(
        158,
        64,
        186,
        .16
      )
    );
}

.sidebar-logo:hover
.brand-mark {
  filter:
    drop-shadow(
      0
      7px
      15px
      rgba(
        158,
        64,
        186,
        .18
      )
    )

    drop-shadow(
      0
      0
      18px
      rgba(
        71,
        215,
        209,
        .12
      )
    )
    !important;
}

.nav-button {
  transition:
    transform
    .18s
    ease,

    color
    .18s
    ease,

    background
    .18s
    ease,

    border-color
    .18s
    ease,

    box-shadow
    .18s
    ease
    !important;
}

.nav-button:hover {
  transform:
    translateY(
      -1px
    )
    scale(
      1.035
    )
    !important;

  border-color:
    rgba(
      71,
      215,
      209,
      .28
    )
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(
        71,
        215,
        209,
        .11
      ),
      rgba(
        93,
        169,
        255,
        .09
      ),
      rgba(
        158,
        64,
        186,
        .10
      )
    )
    !important;

  color:
    #9DEDEA
    !important;

  box-shadow:
    0
    8px
    24px
    rgba(
      49,
      145,
      180,
      .09
    )
    !important;
}

.nav-button.active {
  border-color:
    rgba(
      139,
      166,
      255,
      .58
    )
    !important;

  background:
    linear-gradient(
      135deg,
      #A044BB
      0%,
      #7159D9
      48%,
      #467ED8
      100%
    )
    !important;

  box-shadow:
    0
    8px
    24px
    rgba(
      101,
      76,
      191,
      .24
    ),

    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .14
    )
    !important;
}

.nav-button.active::after {
  content:
    "";

  position:
    absolute;

  right:
    -11px;

  width:
    3px;

  height:
    18px;

  border-radius:
    99px;

  background:
    linear-gradient(
      var(--v15-cyan),
      var(--v15-blue)
    );

  box-shadow:
    0
    0
    12px
    rgba(
      71,
      215,
      209,
      .42
    );
}

/* =========================================================
   PAGE ENTRANCE MOTION
========================================================= */

.page.active > .page-header,
.page.active > .global-league-banner,
.page.active > .hero,
.page.active > .card,
.page.active > .grid-2,
.page.active > .grid-3,
.page.active > .pulse-layout,
.page.active > .v08-score-strip-shell,
.page.active > .v09-insight-top-grid,
.page.active > .v13-trade-setup-strip,
.page.active > .players-filter-shell,
.player-profile-page.active > * {
  animation:
    v15-enter
    .46s
    cubic-bezier(
      .2,
      .72,
      .2,
      1
    )
    both;
}

.page.active > :nth-child(2) {
  animation-delay:
    .035s;
}

.page.active > :nth-child(3) {
  animation-delay:
    .07s;
}

.page.active > :nth-child(4) {
  animation-delay:
    .105s;
}

.page.active > :nth-child(5) {
  animation-delay:
    .14s;
}

@keyframes v15-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        9px
      )
      scale(
        .996
      );

    filter:
      saturate(
        .82
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );

    filter:
      saturate(
        1
      );
  }
}

/* =========================================================
   PAGE HEADERS + CONTEXT
========================================================= */

.page-header {
  position:
    relative;

  padding-bottom:
    2px;
}

.page-header::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -5px;

  width:
    92px;

  height:
    2px;

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--v15-blue),
      var(--v15-cyan)
    );

  opacity:
    .76;
}

.page-header h1 {
  letter-spacing:
    -.045em;
}

.eyebrow {
  color:
    var(--v15-cyan)
    !important;

  text-shadow:
    0
    0
    16px
    rgba(
      71,
      215,
      209,
      .10
    );
}

.eyebrow.light {
  color:
    #E9FBFA
    !important;
}

.global-league-banner {
  border-color:
    rgba(
      93,
      169,
      255,
      .25
    )
    !important;

  background:
    radial-gradient(
      circle at 8% 40%,
      rgba(
        71,
        215,
        209,
        .10
      ),
      transparent
      26%
    ),

    linear-gradient(
      100deg,
      rgba(
        158,
        64,
        186,
        .22
      ),
      rgba(
        93,
        169,
        255,
        .08
      )
      52%,
      var(--panel)
      100%
    )
    !important;

  box-shadow:
    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .025
    );
}

/* =========================================================
   HERO / INTELLIGENCE BANNERS
========================================================= */

.hero,
.v10-team-hero {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  border-color:
    rgba(
      93,
      169,
      255,
      .24
    )
    !important;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(
        71,
        215,
        209,
        .15
      ),
      transparent
      27%
    ),

    radial-gradient(
      circle at 92% 20%,
      rgba(
        243,
        178,
        76,
        .10
      ),
      transparent
      23%
    ),

    linear-gradient(
      125deg,
      #5E246F
      0%,
      #43295F
      31%,
      #253554
      69%,
      #183943
      100%
    )
    !important;

  box-shadow:
    0
    18px
    48px
    rgba(
      12,
      15,
      24,
      .26
    ),

    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .06
    )
    !important;
}

.hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    -50%
    -12%
    -80%
    42%;

  z-index:
    -1;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .07
    );

  border-radius:
    50%;

  box-shadow:
    0
    0
    0
    44px
    rgba(
      71,
      215,
      209,
      .018
    ),

    0
    0
    0
    88px
    rgba(
      93,
      169,
      255,
      .018
    ),

    0
    0
    0
    132px
    rgba(
      158,
      64,
      186,
      .018
    );

  animation:
    v15-orbit
    22s
    linear
    infinite;
}

.hero::after {
  content:
    "";

  position:
    absolute;

  top:
    -54px;

  right:
    8%;

  z-index:
    -1;

  width:
    190px;

  height:
    190px;

  border:
    1px
    solid
    rgba(
      243,
      178,
      76,
      .12
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        243,
        178,
        76,
        .05
      ),
      rgba(
        71,
        215,
        209,
        .025
      )
    );

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );

  transform:
    rotate(
      18deg
    );

  animation:
    v15-triangle
    14s
    ease-in-out
    infinite
    alternate;
}

.hero > *,
.v10-team-hero > * {
  position:
    relative;

  z-index:
    1;
}

@keyframes v15-orbit {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

@keyframes v15-triangle {
  from {
    transform:
      translateY(
        -4px
      )
      rotate(
        18deg
      );

    opacity:
      .55;
  }

  to {
    transform:
      translateY(
        22px
      )
      rotate(
        31deg
      );

    opacity:
      .95;
  }
}

.hero .stat {
  border-color:
    rgba(
      255,
      255,
      255,
      .13
    )
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        .075
      ),
      rgba(
        255,
        255,
        255,
        .025
      )
    )
    !important;

  backdrop-filter:
    blur(
      8px
    );
}

.hero
.stat:nth-child(1) {
  box-shadow:
    inset
    3px
    0
    0
    rgba(
      71,
      215,
      209,
      .72
    );
}

.hero
.stat:nth-child(2) {
  box-shadow:
    inset
    3px
    0
    0
    rgba(
      93,
      169,
      255,
      .72
    );
}

.hero
.stat:nth-child(3) {
  box-shadow:
    inset
    3px
    0
    0
    rgba(
      243,
      178,
      76,
      .76
    );
}

.hero .stat small,
.hero .stat strong,
html[data-theme="light"]
.hero .stat small,
html[data-theme="light"]
.hero .stat strong {
  color:
    #fff
    !important;
}

.hero .stat small {
  opacity:
    .68;
}

/* =========================================================
   CARD SYSTEM
========================================================= */

.card {
  position:
    relative;

  isolation:
    isolate;

  box-shadow:
    var(
      --v15-card-glow
    );

  transition:
    transform
    .2s
    ease,

    border-color
    .2s
    ease,

    box-shadow
    .2s
    ease,

    background
    .2s
    ease;
}

.card::before {
  content:
    "";

  position:
    absolute;

  z-index:
    2;

  top:
    0;

  left:
    12px;

  right:
    12px;

  height:
    1px;

  pointer-events:
    none;

  border-radius:
    99px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        158,
        64,
        186,
        .65
      ),
      rgba(
        93,
        169,
        255,
        .48
      ),
      transparent
    );

  opacity:
    .62;
}

.card:hover {
  transform:
    translateY(
      -1px
    );

  box-shadow:
    var(
      --v15-card-glow-hover
    );
}

#page-home
.card::before,
#page-players
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        71,
        215,
        209,
        .72
      ),
      rgba(
        93,
        169,
        255,
        .56
      ),
      transparent
    );
}

#page-dashboard
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        243,
        178,
        76,
        .68
      ),
      rgba(
        158,
        64,
        186,
        .58
      ),
      transparent
    );
}

#page-matchups
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        107,
        122,
        .62
      ),
      rgba(
        93,
        169,
        255,
        .58
      ),
      transparent
    );
}

#page-analytics
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        93,
        169,
        255,
        .70
      ),
      rgba(
        167,
        227,
        107,
        .45
      ),
      transparent
    );
}

#page-trades
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        243,
        178,
        76,
        .64
      ),
      rgba(
        71,
        215,
        209,
        .56
      ),
      transparent
    );
}

#page-profile
.card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        158,
        64,
        186,
        .72
      ),
      rgba(
        255,
        107,
        122,
        .52
      ),
      transparent
    );
}

.card-title {
  letter-spacing:
    -.015em;
}

.card-header {
  position:
    relative;
}

/* =========================================================
   BUTTONS + FIELDS
========================================================= */

.btn {
  position:
    relative;

  overflow:
    hidden;
}

.btn::after {
  content:
    "";

  position:
    absolute;

  top:
    -60%;

  left:
    -45%;

  width:
    36%;

  height:
    220%;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .16
      ),
      transparent
    );

  transform:
    rotate(
      17deg
    )
    translateX(
      -250%
    );

  transition:
    transform
    .48s
    ease;
}

.btn:hover::after {
  transform:
    rotate(
      17deg
    )
    translateX(
      520%
    );
}

.btn:hover {
  border-color:
    rgba(
      71,
      215,
      209,
      .42
    )
    !important;

  box-shadow:
    0
    9px
    24px
    rgba(
      43,
      119,
      151,
      .10
    )
    !important;
}

.btn.primary {
  border-color:
    rgba(
      116,
      116,
      238,
      .52
    )
    !important;

  background:
    linear-gradient(
      135deg,
      #A044BB
      0%,
      #7958D8
      47%,
      #4E87D9
      100%
    )
    !important;

  box-shadow:
    0
    8px
    24px
    rgba(
      92,
      75,
      190,
      .20
    );
}

.field input:focus,
.field textarea:focus,
.field select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(
      71,
      215,
      209,
      .58
    )
    !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      71,
      215,
      209,
      .08
    ),

    0
    0
    0
    1px
    rgba(
      93,
      169,
      255,
      .08
    )
    !important;
}

/* =========================================================
   NFL SCOREBOARD
========================================================= */

.v08-score-strip-shell {
  border-color:
    rgba(
      93,
      169,
      255,
      .22
    )
    !important;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(
        71,
        215,
        209,
        .07
      ),
      transparent
      28%
    ),

    linear-gradient(
      180deg,
      rgba(
        93,
        169,
        255,
        .035
      ),
      transparent
      42%
    ),

    var(--panel)
    !important;
}

.v08-score-strip-head {
  background:
    linear-gradient(
      90deg,
      rgba(
        71,
        215,
        209,
        .035
      ),
      rgba(
        158,
        64,
        186,
        .025
      ),
      rgba(
        243,
        178,
        76,
        .025
      )
    );
}

.v08-score-game {
  transition:
    background
    .18s
    ease,

    transform
    .18s
    ease,

    box-shadow
    .18s
    ease
    !important;
}

.v08-score-game:hover {
  transform:
    translateY(
      -1px
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        71,
        215,
        209,
        .055
      ),
      rgba(
        93,
        169,
        255,
        .035
      )
    ),

    var(--panel)
    !important;
}

.v08-score-game.state-pre[data-v08-focus="1"]::after {
  background:
    linear-gradient(
      90deg,
      var(--v15-amber),
      var(--v15-blue)
    )
    !important;
}

.v08-score-game.state-post[data-v08-focus="1"]::after {
  background:
    linear-gradient(
      90deg,
      var(--v15-blue),
      var(--v15-cyan)
    )
    !important;
}

.v08-score-game.state-in[data-v08-focus="1"]::after {
  background:
    linear-gradient(
      90deg,
      var(--v15-coral),
      #FF9C6E
    )
    !important;
}

.v08-score-status.live i {
  animation:
    v15-live-pulse
    1.7s
    ease-out
    infinite;
}

@keyframes v15-live-pulse {
  0% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        255,
        107,
        122,
        .42
      );
  }

  70% {
    box-shadow:
      0
      0
      0
      7px
      rgba(
        255,
        107,
        122,
        0
      );
  }

  100% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        255,
        107,
        122,
        0
      );
  }
}

/* =========================================================
   NEWS / PLAYER SURFACES
========================================================= */

.news-card,
.player-news-card {
  transition:
    transform
    .22s
    ease,

    border-color
    .22s
    ease,

    box-shadow
    .22s
    ease
    !important;
}

.news-card:hover,
.player-news-card:hover {
  transform:
    translateY(
      -2px
    )
    !important;

  border-color:
    rgba(
      71,
      215,
      209,
      .38
    )
    !important;

  box-shadow:
    0
    16px
    38px
    rgba(
      27,
      100,
      128,
      .10
    )
    !important;
}

.news-card img,
.player-news-card img {
  transition:
    transform
    .45s
    cubic-bezier(
      .2,
      .7,
      .2,
      1
    ),

    filter
    .25s
    ease;
}

.news-card:hover img,
.player-news-card:hover img {
  transform:
    scale(
      1.025
    );

  filter:
    saturate(
      1.08
    )
    contrast(
      1.02
    );
}

.player-card,
.player-standing-card,
.player-result-card,
.v10-trade-roster-player,
.v12-trade-player {
  transition:
    transform
    .18s
    ease,

    border-color
    .18s
    ease,

    background
    .18s
    ease,

    box-shadow
    .18s
    ease
    !important;
}

.player-card:hover,
.player-standing-card:hover,
.player-result-card:hover,
.v10-trade-roster-player:hover,
.v12-trade-player:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );

  border-color:
    rgba(
      93,
      169,
      255,
      .33
    )
    !important;

  box-shadow:
    0
    10px
    24px
    rgba(
      36,
      88,
      131,
      .08
    );
}

/* =========================================================
   WEEKLY INSIGHT / MATCHUP STATUS
========================================================= */

.v09-outlook-panel.good {
  border-color:
    rgba(
      85,
      215,
      143,
      .32
    )
    !important;

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(
        85,
        215,
        143,
        .10
      ),
      transparent
      38%
    ),

    var(--panel-soft)
    !important;
}

.v09-outlook-panel.bad {
  border-color:
    rgba(
      255,
      107,
      122,
      .30
    )
    !important;

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(
        255,
        107,
        122,
        .09
      ),
      transparent
      38%
    ),

    var(--panel-soft)
    !important;
}

.v09-waiver-card {
  border-color:
    rgba(
      71,
      215,
      209,
      .25
    )
    !important;
}

.v09-waiver-card::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        71,
        215,
        209,
        .78
      ),
      rgba(
        167,
        227,
        107,
        .45
      ),
      transparent
    )
    !important;
}

.live {
  color:
    var(--v15-coral)
    !important;

  text-shadow:
    0
    0
    12px
    rgba(
      255,
      107,
      122,
      .18
    );
}

/* =========================================================
   TRADE BUILDER COLORS
========================================================= */

.v14-team-card.fair {
  border-color:
    rgba(
      93,
      169,
      255,
      .22
    )
    !important;
}

.v14-team-card.edge-positive,
.v14-team-card.gain,
.v14-team-card.strong-gain {
  background:
    linear-gradient(
      145deg,
      rgba(
        85,
        215,
        143,
        .055
      ),
      transparent
      52%
    ),

    var(--panel-soft)
    !important;
}

.v14-team-card.edge-negative,
.v14-team-card.loss,
.v14-team-card.robbery-risk {
  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        107,
        122,
        .05
      ),
      transparent
      52%
    ),

    var(--panel-soft)
    !important;
}

.v14-pick-control {
  border-color:
    rgba(
      243,
      178,
      76,
      .30
    )
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(
        243,
        178,
        76,
        .09
      ),
      rgba(
        158,
        64,
        186,
        .035
      )
      70%
    ),

    var(--panel-soft)
    !important;
}

.v14-pick-title > span {
  background:
    rgba(
      243,
      178,
      76,
      .12
    )
    !important;

  color:
    var(--v15-amber)
    !important;
}

.v14-pick-fields button {
  border-color:
    rgba(
      243,
      178,
      76,
      .35
    )
    !important;

  background:
    rgba(
      243,
      178,
      76,
      .10
    )
    !important;

  color:
    var(--v15-amber)
    !important;
}

.v14-balance-option {
  border-color:
    rgba(
      71,
      215,
      209,
      .22
    )
    !important;

  background:
    rgba(
      71,
      215,
      209,
      .04
    )
    !important;
}

.v14-balance-option:hover {
  border-color:
    rgba(
      71,
      215,
      209,
      .44
    )
    !important;

  background:
    rgba(
      71,
      215,
      209,
      .075
    )
    !important;
}

.v14-balance-option > b {
  color:
    var(--v15-cyan)
    !important;
}

/* =========================================================
   PROFILE
========================================================= */

.profile-meta-card {
  position:
    relative;

  overflow:
    hidden;
}

.profile-meta-card::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    var(--v15-blue);

  opacity:
    .72;
}

.profile-meta-card:nth-child(2)::after {
  background:
    var(--v15-amber);
}

.profile-meta-card:nth-child(3)::after {
  background:
    var(--v15-cyan);
}

.profile-win-card.win-green {
  border-color:
    rgba(
      85,
      215,
      143,
      .26
    );
}

.profile-win-card.win-orange {
  border-color:
    rgba(
      243,
      178,
      76,
      .27
    );
}

.profile-win-card.win-red {
  border-color:
    rgba(
      255,
      107,
      122,
      .27
    );
}

.profile-flair {
  transition:
    transform
    .18s
    ease,

    border-color
    .18s
    ease,

    box-shadow
    .18s
    ease;
}

.profile-flair:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    rgba(
      93,
      169,
      255,
      .34
    );

  box-shadow:
    0
    10px
    24px
    rgba(
      54,
      91,
      137,
      .08
    );
}

/* =========================================================
   AUTH SCREEN
========================================================= */

.auth-brand {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(
        71,
        215,
        209,
        .14
      ),
      transparent
      28%
    ),

    radial-gradient(
      circle at 80% 82%,
      rgba(
        243,
        178,
        76,
        .10
      ),
      transparent
      28%
    ),

    linear-gradient(
      145deg,
      #702787,
      #402957
      48%,
      #243653
      76%,
      #172F38
    )
    !important;
}

.auth-brand::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(
        255,
        255,
        255,
        .025
      )
      1px,
      transparent
      1px
    ),

    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        .025
      )
      1px,
      transparent
      1px
    );

  background-size:
    72px
    72px;

  -webkit-mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
      75%
    );

  mask-image:
    linear-gradient(
      135deg,
      black,
      transparent
      75%
    );
}

/* =========================================================
   LIGHT MODE TUNING
========================================================= */

html[data-theme="light"]
.card {
  box-shadow:
    var(
      --v15-card-glow
    );
}

html[data-theme="light"]
.sidebar {
  background:
    radial-gradient(
      circle at 50% 6%,
      rgba(
        71,
        215,
        209,
        .08
      ),
      transparent
      26%
    ),

    linear-gradient(
      180deg,
      rgba(
        158,
        64,
        186,
        .035
      ),
      transparent
      34%
    ),

    var(--sidebar)
    !important;
}

html[data-theme="light"]
.v08-score-strip-shell {
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(
        71,
        215,
        209,
        .08
      ),
      transparent
      28%
    ),

    linear-gradient(
      180deg,
      rgba(
        93,
        169,
        255,
        .04
      ),
      transparent
      42%
    ),

    var(--panel)
    !important;
}

/* =========================================================
   RESPONSIVE + REDUCED MOTION
========================================================= */

@media (
  max-width:
    650px
) {
  .page-wrap::before {
    inset:
      62px
      0
      0
      0;

    background-size:
      54px
      54px,

      54px
      54px,

      170px
      170px;
  }

  .page-wrap::after {
    width:
      300px;

    height:
      300px;

    right:
      -160px;

    top:
      145px;

    opacity:
      .45;
  }

  .sidebar::after {
    display:
      none;
  }

  .nav-button.active::after {
    right:
      auto;

    left:
      50%;

    bottom:
      -7px;

    width:
      18px;

    height:
      3px;

    transform:
      translateX(
        -50%
      );
  }

  .hero::before {
    opacity:
      .55;
  }
}

@media (
  prefers-reduced-motion:
    reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto
      !important;

    animation-duration:
      .001ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      .001ms
      !important;
  }

  .page-wrap::before,
  .page-wrap::after,
  .hero::before,
  .hero::after {
    animation:
      none
      !important;
  }
}

/* VECTORS 0.16 — EDITORIAL MOTION DESIGN LAYER */

:root {
  --v16-electric: #6CF2E7;
  --v16-sky: #66A9FF;
  --v16-sun: #FFCA5B;
  --v16-orange: #FF8B4D;
  --v16-punch: #FF647C;
  --v16-lime: #B6EA72;
  --v16-violet: #A75AC8;
  --v16-ink: #080B10;

  --v16-pointer-x: 50vw;
  --v16-pointer-y: 25vh;

  --v16-display:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

html[data-theme="light"] {
  --v16-ink: #F4F2EE;
}

body {
  font-family:
    var(--v16-display);

  font-variant-numeric:
    tabular-nums;
}

/* =========================================================
   GLOBAL EDITORIAL BACKDROP
========================================================= */

.app-shell {
  position:
    relative;

  isolation:
    isolate;
}

.main-wrap,
.sidebar {
  position:
    relative;

  z-index:
    2;
}

.v16-ambient-layer {
  position:
    fixed;

  inset:
    0;

  z-index:
    0;

  overflow:
    hidden;

  pointer-events:
    none;
}

.v16-ambient-layer::before {
  content:
    "";

  position:
    absolute;

  inset:
    var(--topbar-height)
    0
    0
    var(--sidebar-width);

  background:
    radial-gradient(
      480px
      340px
      at
      var(--v16-pointer-x)
      var(--v16-pointer-y),

      rgba(
        108,
        242,
        231,
        .055
      ),

      transparent
      68%
    ),

    linear-gradient(
      115deg,

      transparent
      0
      36%,

      rgba(
        102,
        169,
        255,
        .025
      )
      36.1%
      36.6%,

      transparent
      36.7%
      100%
    );
}

.v16-orbit {
  position:
    absolute;

  display:
    block;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .065
    );

  border-radius:
    50%;
}

.v16-orbit::before,
.v16-orbit::after {
  content:
    "";

  position:
    absolute;

  border:
    1px
    solid
    currentColor;

  border-radius:
    inherit;

  opacity:
    .42;
}

.v16-orbit::before {
  inset:
    13%;
}

.v16-orbit::after {
  inset:
    29%;
}

.v16-orbit-a {
  width:
    620px;

  height:
    620px;

  right:
    -275px;

  top:
    8vh;

  color:
    rgba(
      108,
      242,
      231,
      .16
    );

  transform:
    rotate(
      14deg
    );

  animation:
    v16-orbit-spin
    38s
    linear
    infinite;
}

.v16-orbit-b {
  width:
    390px;

  height:
    390px;

  left:
    calc(
      var(--sidebar-width) +
      12vw
    );

  bottom:
    -230px;

  color:
    rgba(
      255,
      202,
      91,
      .14
    );

  transform:
    rotate(
      -17deg
    );

  animation:
    v16-orbit-spin-reverse
    31s
    linear
    infinite;
}

.v16-vector-line {
  position:
    absolute;

  width:
    38vw;

  height:
    1px;

  display:
    block;

  transform-origin:
    0
    50%;

  background:
    linear-gradient(
      90deg,

      transparent,

      currentColor,

      transparent
    );

  opacity:
    .22;
}

.v16-vector-line::after {
  content:
    "";

  position:
    absolute;

  right:
    25%;

  top:
    -3px;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0
    0
    20px
    currentColor;
}

.v16-vector-line-a {
  top:
    26vh;

  left:
    28vw;

  color:
    var(--v16-sky);

  transform:
    rotate(
      -14deg
    );

  animation:
    v16-line-shift
    16s
    ease-in-out
    infinite
    alternate;
}

.v16-vector-line-b {
  right:
    -8vw;

  bottom:
    19vh;

  color:
    var(--v16-sun);

  transform:
    rotate(
      21deg
    );

  animation:
    v16-line-shift
    19s
    ease-in-out
    infinite
    alternate-reverse;
}

.v16-kinetic-mark {
  position:
    absolute;

  top:
    23vh;

  right:
    8vw;

  width:
    150px;

  height:
    150px;

  opacity:
    .13;

  background:
    linear-gradient(
      135deg,

      var(--v16-punch)
      0
      2px,

      transparent
      2px
      100%
    ),

    linear-gradient(
      45deg,

      var(--v16-electric)
      0
      2px,

      transparent
      2px
      100%
    );

  background-size:
    24px
    24px;

  clip-path:
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );

  animation:
    v16-mark-float
    12s
    ease-in-out
    infinite
    alternate;
}

@keyframes v16-orbit-spin {
  to {
    transform:
      rotate(
        374deg
      );
  }
}

@keyframes v16-orbit-spin-reverse {
  to {
    transform:
      rotate(
        -377deg
      );
  }
}

@keyframes v16-line-shift {
  from {
    translate:
      -16px
      -10px;

    opacity:
      .12;
  }

  to {
    translate:
      22px
      14px;

    opacity:
      .28;
  }
}

@keyframes v16-mark-float {
  from {
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(
        -4deg
      );
  }

  to {
    transform:
      translate3d(
        -22px,
        28px,
        0
      )
      rotate(
        9deg
      );
  }
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.page-header {
  margin-bottom:
    22px;
}

.page-header h1 {
  max-width:
    980px;

  margin-top:
    3px
    !important;

  font-size:
    clamp(
      38px,
      4vw,
      64px
    )
    !important;

  line-height:
    .94
    !important;

  font-weight:
    950
    !important;

  letter-spacing:
    -.065em
    !important;
}

.page-header p {
  max-width:
    760px;

  margin-top:
    10px
    !important;

  color:
    var(--text-soft)
    !important;

  font-size:
    14px
    !important;

  line-height:
    1.55
    !important;
}

.eyebrow,
.card-subtitle,
.muted,
.tiny {
  letter-spacing:
    .025em;
}

.eyebrow {
  font-size:
    10px
    !important;

  font-weight:
    950
    !important;

  letter-spacing:
    .15em
    !important;
}

.card-title {
  font-size:
    16px
    !important;

  font-weight:
    900
    !important;

  letter-spacing:
    -.025em
    !important;
}

.card-subtitle {
  margin-top:
    3px;

  font-size:
    12px
    !important;

  line-height:
    1.45
    !important;
}

.card-body,
.notice,
.error,
.empty {
  font-size:
    13px;
}

/* =========================================================
   EDITORIAL PAGE HEADERS
========================================================= */

.page-header {
  position:
    relative;

  isolation:
    isolate;

  padding:
    7px
    0
    11px;
}

.page-header::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  left:
    -15px;

  top:
    7px;

  width:
    70px;

  height:
    70px;

  border:
    1px
    solid
    rgba(
      108,
      242,
      231,
      .18
    );

  border-radius:
    50%;

  transform:
    translate(
      -28%,
      -22%
    );
}

.page-header::after {
  width:
    min(
      430px,
      46vw
    )
    !important;

  height:
    3px
    !important;

  bottom:
    -4px
    !important;

  background:
    linear-gradient(
      90deg,

      var(--v16-electric)
      0
      12%,

      var(--v16-sky)
      12%
      31%,

      var(--purple)
      31%
      61%,

      var(--v16-sun)
      61%
      76%,

      transparent
      76%
      100%
    )
    !important;

  opacity:
    .88
    !important;
}

/* =========================================================
   CARDS
========================================================= */

.card {
  --v16-local-x:
    50%;

  --v16-local-y:
    50%;

  overflow:
    hidden;

  border-radius:
    18px
    18px
    18px
    6px
    !important;

  border-color:
    rgba(
      145,
      160,
      186,
      .17
    )
    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        255,
        255,
        255,
        .018
      ),

      transparent
      44%
    ),

    var(--panel)
    !important;
}

.card::before {
  height:
    2px
    !important;

  left:
    0
    !important;

  right:
    0
    !important;

  opacity:
    .78
    !important;
}

.v16-reactive-card::after {
  content:
    "";

  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      260px
      180px
      at
      var(--v16-local-x)
      var(--v16-local-y),

      rgba(
        108,
        242,
        231,
        .065
      ),

      transparent
      68%
    );

  transition:
    opacity
    .24s
    ease;
}

.v16-reactive-card:hover::after {
  opacity:
    1;
}

.v16-reactive-card > * {
  position:
    relative;

  z-index:
    1;
}

.card > .card-header {
  min-height:
    58px;

  padding-right:
    54px;
}

.card > .card-header::after {
  content:
    attr(
      data-v16-index
    );

  position:
    absolute;

  right:
    14px;

  top:
    50%;

  transform:
    translateY(
      -50%
    );

  color:
    rgba(
      139,
      154,
      181,
      .32
    );

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    .08em;
}

.page
.card:nth-of-type(
  4n + 1
)::before {
  background:
    linear-gradient(
      90deg,

      var(--v16-electric),

      var(--v16-sky),

      transparent
      74%
    )
    !important;
}

.page
.card:nth-of-type(
  4n + 2
)::before {
  background:
    linear-gradient(
      90deg,

      var(--v16-sun),

      var(--v16-orange),

      transparent
      74%
    )
    !important;
}

.page
.card:nth-of-type(
  4n + 3
)::before {
  background:
    linear-gradient(
      90deg,

      var(--purple),

      var(--v16-punch),

      transparent
      74%
    )
    !important;
}

.page
.card:nth-of-type(
  4n + 4
)::before {
  background:
    linear-gradient(
      90deg,

      var(--v16-lime),

      var(--v16-electric),

      transparent
      74%
    )
    !important;
}

.v16-reveal {
  opacity:
    0;

  transform:
    translateY(
      18px
    );

  transition:
    opacity
    .56s
    cubic-bezier(
      .2,
      .75,
      .2,
      1
    ),

    transform
    .56s
    cubic-bezier(
      .2,
      .75,
      .2,
      1
    );
}

.v16-reveal.v16-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}

/* =========================================================
   HEROES
========================================================= */

.hero {
  min-height:
    210px;

  border-radius:
    24px
    24px
    24px
    8px
    !important;

  background:
    linear-gradient(
      115deg,

      rgba(
        10,
        12,
        18,
        .12
      ),

      rgba(
        10,
        12,
        18,
        .42
      )
    ),

    radial-gradient(
      circle at
      16%
      25%,

      rgba(
        108,
        242,
        231,
        .20
      ),

      transparent
      28%
    ),

    radial-gradient(
      circle at
      83%
      20%,

      rgba(
        255,
        202,
        91,
        .13
      ),

      transparent
      25%
    ),

    linear-gradient(
      120deg,

      #54245F,

      #2B2F52
      48%,

      #123C43
      100%
    )
    !important;
}

.hero::before {
  opacity:
    .62
    !important;
}

.hero::after {
  width:
    250px
    !important;

  height:
    250px
    !important;

  right:
    2%
    !important;

  top:
    -102px
    !important;

  border-color:
    rgba(
      255,
      202,
      91,
      .18
    )
    !important;
}

.hero h1 {
  max-width:
    760px;

  font-size:
    clamp(
      34px,
      3.9vw,
      58px
    )
    !important;

  line-height:
    .96
    !important;

  letter-spacing:
    -.055em
    !important;
}

.hero p {
  max-width:
    720px;

  font-size:
    13px
    !important;

  line-height:
    1.55
    !important;
}

.hero .stat {
  min-width:
    116px
    !important;

  border-radius:
    14px
    14px
    14px
    5px
    !important;

  backdrop-filter:
    blur(
      12px
    );
}

.hero .stat strong {
  font-size:
    18px
    !important;

  letter-spacing:
    -.035em;
}

.hero .stat small {
  font-size:
    9px
    !important;
}

/* =========================================================
   SCOREBOARD
========================================================= */

.v08-score-strip-shell {
  border-radius:
    18px
    18px
    18px
    6px
    !important;

  border-color:
    rgba(
      108,
      242,
      231,
      .18
    )
    !important;
}

.v08-score-strip-head {
  position:
    relative;
}

.v08-score-strip-head::after {
  content:
    "WEEKLY RECORD";

  margin-left:
    auto;

  color:
    rgba(
      128,
      145,
      172,
      .45
    );

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    .15em;
}

.v08-score-game {
  border-right-color:
    rgba(
      139,
      154,
      181,
      .12
    )
    !important;
}

.v08-score-game:nth-child(
  4n + 1
) {
  box-shadow:
    inset
    0
    2px
    0
    rgba(
      108,
      242,
      231,
      .28
    );
}

.v08-score-game:nth-child(
  4n + 2
) {
  box-shadow:
    inset
    0
    2px
    0
    rgba(
      102,
      169,
      255,
      .28
    );
}

.v08-score-game:nth-child(
  4n + 3
) {
  box-shadow:
    inset
    0
    2px
    0
    rgba(
      255,
      202,
      91,
      .30
    );
}

.v08-score-game:nth-child(
  4n + 4
) {
  box-shadow:
    inset
    0
    2px
    0
    rgba(
      255,
      100,
      124,
      .25
    );
}

.v08-score-points {
  font-size:
    17px
    !important;

  letter-spacing:
    -.04em;
}

/* =========================================================
   BUTTONS
========================================================= */

.btn {
  border-radius:
    999px
    !important;

  padding-left:
    16px
    !important;

  padding-right:
    16px
    !important;

  font-size:
    12px;

  letter-spacing:
    -.01em;
}

.btn.primary {
  background:
    linear-gradient(
      105deg,

      var(--purple),

      #7761DA
      47%,

      var(--v16-sky)
    )
    !important;
}

.btn:hover {
  transform:
    translateY(
      -2px
    )
    !important;
}

.btn.compact {
  min-height:
    34px;

  padding-left:
    12px
    !important;

  padding-right:
    12px
    !important;
}

/* =========================================================
   IMAGE-LED SURFACES
========================================================= */

.v16-lift-surface {
  transform-origin:
    50%
    100%;
}

.v16-lift-surface:hover {
  transform:
    translateY(
      -3px
    )
    !important;
}

.player-photo,
.player-card-photo,
.player-standing-photo,
.slot-player-photo,
.trade-headshot,
.trending-detail-photo,
.v09-waiver-photo,
.matchup-team-avatar {
  box-shadow:
    0
    10px
    26px
    rgba(
      0,
      0,
      0,
      .18
    ),

    0
    0
    0
    1px
    rgba(
      255,
      255,
      255,
      .035
    );
}

.player-card-photo,
.player-standing-photo,
.trade-headshot,
.slot-player-photo {
  transform:
    scale(
      1.035
    );
}

.news-card,
.player-news-card {
  border-radius:
    18px
    18px
    18px
    6px
    !important;
}

.news-card img,
.player-news-card img {
  filter:
    saturate(
      .94
    )
    contrast(
      1.04
    );
}

.news-card:hover img,
.player-news-card:hover img {
  filter:
    saturate(
      1.08
    )
    contrast(
      1.05
    )
    !important;
}

/* =========================================================
   WEEKLY INSIGHT
========================================================= */

.v09-outlook-panel.good {
  border-left:
    3px
    solid
    var(--v16-lime)
    !important;
}

.v09-outlook-panel.bad {
  border-left:
    3px
    solid
    var(--v16-punch)
    !important;
}

.v09-waiver-card {
  border-left:
    3px
    solid
    var(--v16-electric)
    !important;
}

.v09-waiver-evidence b {
  color:
    var(--v16-electric)
    !important;
}

.v09-lineup-slot-badge.flex {
  border-color:
    rgba(
      102,
      169,
      255,
      .42
    )
    !important;

  color:
    #88BCFF
    !important;
}

.v09-lineup-slot-badge.superflex {
  border-color:
    rgba(
      255,
      202,
      91,
      .40
    )
    !important;

  background:
    rgba(
      255,
      202,
      91,
      .08
    )
    !important;

  color:
    var(--v16-sun)
    !important;
}

/* =========================================================
   TRADE WORKBENCH
========================================================= */

.v13-trade-setup-strip {
  padding:
    6px;

  border:
    1px
    solid
    rgba(
      139,
      154,
      181,
      .14
    );

  border-radius:
    16px
    16px
    16px
    5px;

  background:
    linear-gradient(
      90deg,

      rgba(
        108,
        242,
        231,
        .025
      ),

      transparent
      28%,

      rgba(
        255,
        202,
        91,
        .025
      )
    ),

    var(--panel-soft);
}

.v13-participant-trigger,
.v14-team-card,
.v12-trade-roster-group {
  border-radius:
    14px
    14px
    14px
    5px
    !important;
}

.v13-participant-card.open {
  z-index:
    1000000
    !important;
}

.v13-participant-menu {
  z-index:
    1000001
    !important;

  border-color:
    rgba(
      108,
      242,
      231,
      .22
    )
    !important;

  box-shadow:
    0
    24px
    70px
    rgba(
      0,
      0,
      0,
      .42
    ),

    0
    0
    0
    1px
    rgba(
      108,
      242,
      231,
      .04
    )
    !important;
}

#page-trades,
#page-trades
.page-wrap,
#page-trades
.v13-trade-setup-strip,
#page-trades
.v13-team-pickers,
#page-trades
.v13-participant-card,
#page-trades
.v14-builder-card {
  overflow:
    visible
    !important;
}

.v14-team-card.edge-positive,
.v14-team-card.gain,
.v14-team-card.strong-gain {
  box-shadow:
    inset
    0
    3px
    0
    rgba(
      182,
      234,
      114,
      .46
    );
}

.v14-team-card.edge-negative,
.v14-team-card.loss,
.v14-team-card.robbery-risk {
  box-shadow:
    inset
    0
    3px
    0
    rgba(
      255,
      100,
      124,
      .42
    );
}

.v14-pick-control {
  border-radius:
    13px
    13px
    13px
    5px
    !important;
}

/* =========================================================
   PROFILE
========================================================= */

.profile-banner {
  min-height:
    220px;

  border-radius:
    22px
    22px
    22px
    7px
    !important;

  box-shadow:
    inset
    0
    -70px
    90px
    rgba(
      0,
      0,
      0,
      .22
    );
}

.profile-big-avatar {
  box-shadow:
    0
    18px
    42px
    rgba(
      0,
      0,
      0,
      .24
    ),

    0
    0
    0
    4px
    var(--panel),

    0
    0
    0
    5px
    rgba(
      108,
      242,
      231,
      .16
    );
}

.profile-title h1 {
  font-size:
    clamp(
      30px,
      3vw,
      46px
    )
    !important;

  line-height:
    1
    !important;

  letter-spacing:
    -.055em
    !important;
}

.profile-meta-card {
  border-radius:
    14px
    14px
    14px
    5px
    !important;
}

.profile-meta-card:nth-child(
  3n + 1
)::after {
  background:
    var(--v16-electric)
    !important;
}

.profile-meta-card:nth-child(
  3n + 2
)::after {
  background:
    var(--v16-sun)
    !important;
}

.profile-meta-card:nth-child(
  3n + 3
)::after {
  background:
    var(--v16-sky)
    !important;
}

/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]
.card {
  background:
    linear-gradient(
      145deg,

      rgba(
        255,
        255,
        255,
        .72
      ),

      rgba(
        255,
        255,
        255,
        .22
      )
    ),

    var(--panel)
    !important;
}

html[data-theme="light"]
.v16-ambient-layer::before {
  background:
    radial-gradient(
      480px
      340px
      at
      var(--v16-pointer-x)
      var(--v16-pointer-y),

      rgba(
        40,
        164,
        160,
        .055
      ),

      transparent
      68%
    ),

    linear-gradient(
      115deg,

      transparent
      0
      36%,

      rgba(
        69,
        118,
        186,
        .045
      )
      36.1%
      36.6%,

      transparent
      36.7%
      100%
    );
}

html[data-theme="light"]
.page-header::before {
  border-color:
    rgba(
      26,
      139,
      135,
      .15
    );
}

html[data-theme="light"]
.hero {
  color:
    #fff;
}

html[data-theme="light"]
.hero p,
html[data-theme="light"]
.hero h1,
html[data-theme="light"]
.hero .eyebrow {
  color:
    #fff
    !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
    720px
) {
  .page-header h1 {
    font-size:
      clamp(
        34px,
        11vw,
        48px
      )
      !important;
  }

  .page-header p {
    font-size:
      13px
      !important;
  }

  .page-header::before {
    width:
      56px;

    height:
      56px;
  }

  .hero {
    min-height:
      0;

    border-radius:
      18px
      18px
      18px
      6px
      !important;
  }

  .hero h1 {
    font-size:
      clamp(
        31px,
        10vw,
        45px
      )
      !important;
  }

  .v16-orbit-a {
    width:
      350px;

    height:
      350px;

    right:
      -240px;
  }

  .v16-orbit-b,
  .v16-vector-line-b,
  .v16-kinetic-mark {
    display:
      none;
  }

  .card >
  .card-header::after {
    display:
      none;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .v16-orbit,
  .v16-vector-line,
  .v16-kinetic-mark,
  .v16-reveal,
  .v16-lift-surface,
  .v16-reactive-card,
  .hero::before,
  .hero::after {
    animation:
      none
      !important;

    transition:
      none
      !important;

    transform:
      none
      !important;
  }

  .v16-reveal {
    opacity:
      1
      !important;
  }

  .v16-reactive-card::after {
    display:
      none;
  }
}

/* =========================================================
   VECTORS 0.17 — MONOCHROME VIOLET
   Purple + graphite visual identity refinement
========================================================= */

:root {
  --v17-display:
    "Sora",
    "Segoe UI",
    Arial,
    sans-serif;

  --v17-purple-950:
    #24142B;

  --v17-purple-900:
    #32193D;

  --v17-purple-800:
    #4B245A;

  --v17-purple-700:
    #692E7E;

  --v17-purple-600:
    #85389F;

  --v17-purple-500:
    #9E40BA;

  --v17-purple-400:
    #B65CCF;

  --v17-purple-300:
    #CD82DD;

  --v17-purple-200:
    #DFA9E9;

  --v17-purple-100:
    #F0D9F5;

  --v17-white:
    #FFFFFF;

  --v17-gray-950:
    #0D0E10;

  --v17-gray-900:
    #121316;

  --v17-gray-850:
    #17181C;

  --v17-gray-800:
    #1D1E23;

  --v17-gray-750:
    #23242A;

  --v17-gray-700:
    #2B2C32;

  --v17-gray-600:
    #3A3B42;

  --v17-gray-500:
    #565861;

  --v17-gray-400:
    #777A85;

  --v17-gray-300:
    #A1A4AD;

  --v17-gray-200:
    #C7C9CF;

  --v17-gray-100:
    #E4E5E9;

  --v17-gray-050:
    #F4F3F6;

  /*
   Re-map the decorative 0.16 spectrum into
   the tighter Vectors purple family.
  */

  --v16-electric:
    #DFA9E9;

  --v16-sky:
    #B65CCF;

  --v16-sun:
    #9E40BA;

  --v16-orange:
    #85389F;

  --v16-punch:
    #CD82DD;

  --v16-lime:
    #A783B2;

  --v16-violet:
    #9E40BA;

  --v16-ink:
    #0D0E10;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.page-header h1,
.hero h1,
.profile-title h1,
.v10-team-hero-copy h1,
.auth-brand h1,
.modal-head h2 {
  font-family:
    var(--v17-display);

  font-weight:
    800
    !important;

  letter-spacing:
    -.055em
    !important;
}

.card-title,
.matchup-score,
.v08-score-points,
.v10-team-record-block strong,
.v10-team-stat strong,
.v14-team-net strong,
.profile-win-card strong,
.stat strong,
.v12-fairness-net {
  font-family:
    var(--v17-display);
}

.page-header h1 {
  font-size:
    clamp(
      38px,
      4vw,
      62px
    )
    !important;

  line-height:
    .96
    !important;
}

.hero h1 {
  font-size:
    clamp(
      34px,
      3.8vw,
      56px
    )
    !important;

  font-weight:
    800
    !important;
}

.card-title {
  font-weight:
    700
    !important;
}


/* =========================================================
   DARK MODE — CORE SURFACES
========================================================= */

body {
  background:
    radial-gradient(
      circle at
      16%
      8%,

      rgba(
        158,
        64,
        186,
        .085
      ),

      transparent
      30%
    ),

    radial-gradient(
      circle at
      83%
      76%,

      rgba(
        105,
        46,
        126,
        .055
      ),

      transparent
      34%
    ),

    linear-gradient(
      180deg,

      #111216,

      #0D0E10
    )

    !important;
}


/* =========================================================
   AMBIENT GEOMETRY — PURPLE ONLY
========================================================= */

.v16-ambient-layer::before {
  background:
    radial-gradient(
      500px
      360px
      at
      var(--v16-pointer-x)
      var(--v16-pointer-y),

      rgba(
        182,
        92,
        207,
        .07
      ),

      transparent
      68%
    ),

    linear-gradient(
      115deg,

      transparent
      0
      36%,

      rgba(
        158,
        64,
        186,
        .035
      )
      36.1%
      36.6%,

      transparent
      36.7%
      100%
    )

    !important;
}

.v16-orbit-a {
  color:
    rgba(
      205,
      130,
      221,
      .14
    )
    !important;
}

.v16-orbit-b {
  color:
    rgba(
      126,
      74,
      143,
      .15
    )
    !important;
}

.v16-vector-line-a {
  color:
    var(--v17-purple-400)
    !important;
}

.v16-vector-line-b {
  color:
    var(--v17-purple-700)
    !important;
}

.v16-kinetic-mark {
  background:
    linear-gradient(
      135deg,

      var(--v17-purple-400)
      0
      2px,

      transparent
      2px
      100%
    ),

    linear-gradient(
      45deg,

      var(--v17-purple-700)
      0
      2px,

      transparent
      2px
      100%
    )

    !important;

  opacity:
    .14
    !important;
}

.page-wrap::before {
  background-image:
    linear-gradient(
      rgba(
        182,
        92,
        207,
        .042
      )
      1px,

      transparent
      1px
    ),

    linear-gradient(
      90deg,

      rgba(
        182,
        92,
        207,
        .042
      )
      1px,

      transparent
      1px
    ),

    linear-gradient(
      135deg,

      transparent
      47%,

      rgba(
        158,
        64,
        186,
        .03
      )
      48%,

      rgba(
        158,
        64,
        186,
        .03
      )
      49%,

      transparent
      50%
    )

    !important;
}

.page-wrap::after {
  border-color:
    rgba(
      182,
      92,
      207,
      .10
    )

    !important;

  background:
    linear-gradient(
      135deg,

      rgba(
        158,
        64,
        186,
        .065
      ),

      transparent
      60%
    ),

    linear-gradient(
      45deg,

      transparent
      48%,

      rgba(
        205,
        130,
        221,
        .055
      )
      49%,

      transparent
      50%
    )

    !important;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  background:
    radial-gradient(
      circle at
      50%
      7%,

      rgba(
        182,
        92,
        207,
        .085
      ),

      transparent
      27%
    ),

    linear-gradient(
      180deg,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
      33%
    ),

    #121316

    !important;
}

.sidebar::before {
  background:
    linear-gradient(
      90deg,

      var(--v17-purple-800),

      var(--v17-purple-500),

      var(--v17-purple-300),

      var(--v17-purple-700)
    )

    !important;
}

.sidebar::after {
  background:
    linear-gradient(
      180deg,

      transparent,

      rgba(
        158,
        64,
        186,
        .15
      ),

      rgba(
        205,
        130,
        221,
        .27
      ),

      rgba(
        158,
        64,
        186,
        .15
      ),

      transparent
    )

    !important;
}

.nav-button {
  color:
    var(--v17-gray-400)
    !important;
}

.nav-button:hover {
  border-color:
    rgba(
      182,
      92,
      207,
      .30
    )

    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .15
      ),

      rgba(
        158,
        64,
        186,
        .055
      )
    )

    !important;

  color:
    var(--v17-white)
    !important;
}

.nav-button.active {
  border-color:
    rgba(
      223,
      169,
      233,
      .55
    )

    !important;

  background:
    linear-gradient(
      140deg,

      var(--v17-purple-700),

      var(--v17-purple-500),

      var(--v17-purple-700)
    )

    !important;

  color:
    var(--v17-white)
    !important;

  box-shadow:
    0
    9px
    25px
    rgba(
      88,
      34,
      103,
      .34
    ),

    inset
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      .13
    )

    !important;
}

.nav-button.active::after {
  background:
    linear-gradient(
      var(--v17-purple-200),
      var(--v17-purple-400)
    )

    !important;

  box-shadow:
    0
    0
    14px
    rgba(
      205,
      130,
      221,
      .45
    )

    !important;
}


/* =========================================================
   PAGE HEADERS
========================================================= */

.page-header h1 {
  color:
    var(--v17-white)
    !important;
}

.page-header p {
  color:
    var(--v17-gray-300)
    !important;
}

.eyebrow {
  color:
    var(--v17-purple-300)
    !important;

  text-shadow:
    0
    0
    16px
    rgba(
      182,
      92,
      207,
      .13
    )

    !important;
}

.page-header::before {
  border-color:
    rgba(
      205,
      130,
      221,
      .18
    )

    !important;
}

.page-header::after {
  background:
    linear-gradient(
      90deg,

      var(--v17-purple-300)
      0
      15%,

      var(--v17-purple-500)
      15%
      39%,

      var(--v17-purple-700)
      39%
      66%,

      var(--v17-gray-600)
      66%
      78%,

      transparent
      78%
    )

    !important;
}


/* =========================================================
   HEROES
========================================================= */

.hero {
  border-color:
    rgba(
      205,
      130,
      221,
      .20
    )

    !important;

  background:
    radial-gradient(
      circle at
      16%
      23%,

      rgba(
        205,
        130,
        221,
        .19
      ),

      transparent
      28%
    ),

    radial-gradient(
      circle at
      87%
      14%,

      rgba(
        105,
        46,
        126,
        .25
      ),

      transparent
      28%
    ),

    linear-gradient(
      118deg,

      #2A182F,

      #1C1A20
      48%,

      #111216
    )

    !important;
}

.hero h1,
.hero p,
.hero .eyebrow {
  color:
    var(--v17-white)
    !important;
}

.hero p {
  color:
    var(--v17-gray-200)
    !important;
}

.hero::after {
  border-color:
    rgba(
      223,
      169,
      233,
      .15
    )

    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .10
      ),

      transparent
    )

    !important;
}

.hero .stat {
  border-color:
    rgba(
      223,
      169,
      233,
      .12
    )

    !important;

  background:
    rgba(
      20,
      19,
      23,
      .52
    )

    !important;
}

.hero .stat:nth-child(1),
.hero .stat:nth-child(2),
.hero .stat:nth-child(3) {
  box-shadow:
    inset
    3px
    0
    0
    rgba(
      182,
      92,
      207,
      .68
    )

    !important;
}

.hero .stat strong {
  color:
    var(--v17-white)
    !important;
}

.hero .stat small {
  color:
    var(--v17-gray-300)
    !important;
}


/* =========================================================
   CARDS
========================================================= */

.card {
  border-color:
    rgba(
      174,
      176,
      186,
      .13
    )

    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .026
      ),

      transparent
      40%
    ),

    #191A1E

    !important;

  box-shadow:
    0
    17px
    42px
    rgba(
      0,
      0,
      0,
      .22
    )

    !important;
}

.card:hover {
  border-color:
    rgba(
      182,
      92,
      207,
      .24
    )

    !important;

  box-shadow:
    0
    21px
    54px
    rgba(
      0,
      0,
      0,
      .28
    ),

    0
    0
    0
    1px
    rgba(
      158,
      64,
      186,
      .035
    )

    !important;
}

.v16-reactive-card::after {
  background:
    radial-gradient(
      270px
      190px
      at
      var(--v16-local-x)
      var(--v16-local-y),

      rgba(
        182,
        92,
        207,
        .075
      ),

      transparent
      68%
    )

    !important;
}

.card::before,
#page-home .card::before,
#page-players .card::before,
#page-dashboard .card::before,
#page-matchups .card::before,
#page-analytics .card::before,
#page-trades .card::before,
#page-profile .card::before {
  background:
    linear-gradient(
      90deg,

      transparent,

      rgba(
        205,
        130,
        221,
        .64
      ),

      rgba(
        158,
        64,
        186,
        .50
      ),

      transparent
    )

    !important;
}

.card-title {
  color:
    var(--v17-white)
    !important;
}

.card-subtitle {
  color:
    var(--v17-gray-400)
    !important;
}

.card-body {
  color:
    var(--v17-gray-200);
}

.muted,
.tiny {
  color:
    var(--v17-gray-400)
    !important;
}


/* =========================================================
   IMPORTANT DATA
========================================================= */

.matchup-score,
.v08-score-points,
.v10-team-record-block strong,
.v10-team-stat strong,
.profile-mini-stat strong,
.v14-team-net strong,
.v12-fairness-net,
.stat strong,
.v10-trending-count strong,
.trending-count-block strong {
  color:
    var(--v17-white)
    !important;
}

.market-row strong,
.slot-player-copy strong,
.v10-trade-roster-player strong,
.v12-trade-player strong,
.player-card strong,
.player-standing-card strong,
.player-result-card strong,
.v14-selected-asset-copy strong,
.v14-balance-option strong {
  color:
    var(--v17-white);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  border-color:
    rgba(
      182,
      92,
      207,
      .20
    )

    !important;

  background:
    var(--v17-gray-750)
    !important;

  color:
    var(--v17-gray-100)
    !important;
}

.btn:hover {
  border-color:
    rgba(
      205,
      130,
      221,
      .48
    )

    !important;

  background:
    linear-gradient(
      135deg,

      rgba(
        158,
        64,
        186,
        .23
      ),

      var(--v17-gray-750)
    )

    !important;

  color:
    var(--v17-white)
    !important;
}

.btn.primary {
  border-color:
    rgba(
      223,
      169,
      233,
      .30
    )

    !important;

  background:
    linear-gradient(
      110deg,

      var(--v17-purple-700),

      var(--v17-purple-500),

      var(--v17-purple-700)
    )

    !important;

  color:
    var(--v17-white)
    !important;

  box-shadow:
    0
    9px
    28px
    rgba(
      93,
      37,
      110,
      .30
    )

    !important;
}


/* =========================================================
   FORMS
========================================================= */

input,
select,
textarea {
  border-color:
    rgba(
      161,
      164,
      173,
      .14
    )

    !important;

  background:
    var(--v17-gray-850)
    !important;

  color:
    var(--v17-white)
    !important;
}

input::placeholder,
textarea::placeholder {
  color:
    var(--v17-gray-500)
    !important;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:
    rgba(
      205,
      130,
      221,
      .55
    )

    !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      158,
      64,
      186,
      .095
    )

    !important;
}


/* =========================================================
   SCOREBOARD
========================================================= */

.v08-score-strip-shell {
  border-color:
    rgba(
      182,
      92,
      207,
      .18
    )

    !important;

  background:
    radial-gradient(
      circle at
      10%
      0%,

      rgba(
        158,
        64,
        186,
        .07
      ),

      transparent
      30%
    ),

    #17181C

    !important;
}

.v08-score-strip-head {
  background:
    linear-gradient(
      90deg,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
    )

    !important;
}

.v08-score-game {
  background:
    #17181C
    !important;

  border-right-color:
    rgba(
      161,
      164,
      173,
      .11
    )

    !important;
}

.v08-score-game:hover {
  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .09
      ),

      #1B1C21
    )

    !important;
}

.v08-score-game:nth-child(4n + 1),
.v08-score-game:nth-child(4n + 2),
.v08-score-game:nth-child(4n + 3),
.v08-score-game:nth-child(4n + 4) {
  box-shadow:
    inset
    0
    2px
    0
    rgba(
      182,
      92,
      207,
      .32
    )

    !important;
}

.v08-score-team-code,
.v08-score-points {
  color:
    var(--v17-white)
    !important;
}

.v08-score-record,
.v08-score-network {
  color:
    var(--v17-gray-400)
    !important;
}


/* =========================================================
   PLAYER / NEWS SURFACES
========================================================= */

.news-card:hover,
.player-news-card:hover,
.player-card:hover,
.player-standing-card:hover,
.player-result-card:hover,
.v10-trade-roster-player:hover,
.v12-trade-player:hover:not(:disabled) {
  border-color:
    rgba(
      182,
      92,
      207,
      .34
    )

    !important;

  box-shadow:
    0
    15px
    35px
    rgba(
      0,
      0,
      0,
      .21
    )

    !important;
}

.player-photo,
.player-card-photo,
.player-standing-photo,
.slot-player-photo,
.trade-headshot,
.trending-detail-photo,
.v09-waiver-photo,
.matchup-team-avatar {
  box-shadow:
    0
    12px
    28px
    rgba(
      0,
      0,
      0,
      .24
    ),

    0
    0
    0
    1px
    rgba(
      205,
      130,
      221,
      .06
    )

    !important;
}


/* =========================================================
   WEEKLY INSIGHT
========================================================= */

.v09-outlook-panel.good {
  border-color:
    rgba(
      182,
      92,
      207,
      .30
    )

    !important;

  border-left:
    3px
    solid
    var(--v17-purple-400)
    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .08
      ),

      transparent
      60%
    ),

    var(--panel-soft)

    !important;
}

.v09-outlook-panel.bad {
  border-color:
    rgba(
      119,
      122,
      133,
      .28
    )

    !important;

  border-left:
    3px
    solid
    var(--v17-gray-500)
    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        119,
        122,
        133,
        .055
      ),

      transparent
      60%
    ),

    var(--panel-soft)

    !important;
}

.v09-outlook-panel.good
.v09-outlook-icon {
  background:
    rgba(
      158,
      64,
      186,
      .15
    )

    !important;

  color:
    var(--v17-purple-200)
    !important;
}

.v09-outlook-panel.bad
.v09-outlook-icon {
  background:
    rgba(
      119,
      122,
      133,
      .11
    )

    !important;

  color:
    var(--v17-gray-300)
    !important;
}

.v09-waiver-card {
  border-color:
    rgba(
      182,
      92,
      207,
      .26
    )

    !important;

  border-left:
    3px
    solid
    var(--v17-purple-400)
    !important;
}

.v09-waiver-evidence b {
  color:
    var(--v17-white)
    !important;
}

.v09-lineup-slot-badge.flex {
  border-color:
    rgba(
      182,
      92,
      207,
      .36
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .10
    )

    !important;

  color:
    var(--v17-purple-200)
    !important;
}

.v09-lineup-slot-badge.superflex {
  border-color:
    rgba(
      223,
      169,
      233,
      .38
    )

    !important;

  background:
    rgba(
      182,
      92,
      207,
      .12
    )

    !important;

  color:
    var(--v17-white)
    !important;
}


/* =========================================================
   TRADE PAGE
========================================================= */

.v13-trade-setup-strip {
  border-color:
    rgba(
      182,
      92,
      207,
      .17
    )

    !important;

  background:
    linear-gradient(
      90deg,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
      32%
    ),

    #17181C

    !important;
}

.v13-participant-trigger {
  border-color:
    rgba(
      161,
      164,
      173,
      .13
    )

    !important;

  background:
    #1D1E23
    !important;
}

.v13-participant-trigger:hover,
.v13-participant-card.open
.v13-participant-trigger {
  border-color:
    rgba(
      205,
      130,
      221,
      .38
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .10
    )

    !important;
}

.v13-participant-menu {
  border-color:
    rgba(
      205,
      130,
      221,
      .28
    )

    !important;

  background:
    #18191D
    !important;
}

.v13-participant-option:hover,
.v13-participant-option.selected {
  border-color:
    rgba(
      182,
      92,
      207,
      .32
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .10
    )

    !important;
}

.v14-team-card.fair,
.v14-team-card.edge-positive,
.v14-team-card.gain,
.v14-team-card.strong-gain,
.v14-team-card.edge-negative,
.v14-team-card.loss,
.v14-team-card.robbery-risk {
  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
      54%
    ),

    #1B1C20

    !important;
}

.v14-team-card.edge-positive,
.v14-team-card.gain,
.v14-team-card.strong-gain {
  border-color:
    rgba(
      205,
      130,
      221,
      .28
    )

    !important;

  box-shadow:
    inset
    0
    3px
    0
    rgba(
      182,
      92,
      207,
      .50
    )

    !important;
}

.v14-team-card.edge-negative,
.v14-team-card.loss,
.v14-team-card.robbery-risk {
  border-color:
    rgba(
      119,
      122,
      133,
      .25
    )

    !important;

  box-shadow:
    inset
    0
    3px
    0
    rgba(
      119,
      122,
      133,
      .42
    )

    !important;
}

.v14-team-card.edge-positive
.v14-team-net strong,
.v14-team-card.gain
.v14-team-net strong,
.v14-team-card.strong-gain
.v14-team-net strong {
  color:
    var(--v17-white)
    !important;
}

.v14-team-card.edge-negative
.v14-team-net strong,
.v14-team-card.loss
.v14-team-net strong,
.v14-team-card.robbery-risk
.v14-team-net strong {
  color:
    var(--v17-gray-200)
    !important;
}

.v14-pick-control {
  border-color:
    rgba(
      182,
      92,
      207,
      .28
    )

    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .12
      ),

      transparent
      68%
    ),

    #1D1E23

    !important;
}

.v14-pick-title > span {
  background:
    rgba(
      158,
      64,
      186,
      .17
    )

    !important;

  color:
    var(--v17-purple-200)
    !important;
}

.v14-pick-fields button {
  border-color:
    rgba(
      205,
      130,
      221,
      .34
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .15
    )

    !important;

  color:
    var(--v17-white)
    !important;
}

.v14-balance-option {
  border-color:
    rgba(
      182,
      92,
      207,
      .22
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .055
    )

    !important;
}

.v14-balance-option:hover {
  border-color:
    rgba(
      205,
      130,
      221,
      .40
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .095
    )

    !important;
}

.v14-balance-option > b {
  color:
    var(--v17-white)
    !important;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-banner {
  border:
    1px
    solid
    rgba(
      182,
      92,
      207,
      .16
    );
}

.profile-big-avatar {
  box-shadow:
    0
    18px
    42px
    rgba(
      0,
      0,
      0,
      .28
    ),

    0
    0
    0
    4px
    #191A1E,

    0
    0
    0
    5px
    rgba(
      205,
      130,
      221,
      .22
    )

    !important;
}

.profile-title h1 {
  color:
    var(--v17-white)
    !important;
}

.profile-meta-card {
  background:
    #1D1E23
    !important;

  border-color:
    rgba(
      161,
      164,
      173,
      .13
    )

    !important;
}

.profile-meta-card:nth-child(3n + 1)::after,
.profile-meta-card:nth-child(3n + 2)::after,
.profile-meta-card:nth-child(3n + 3)::after {
  background:
    var(--v17-purple-500)
    !important;
}

.profile-flair {
  background:
    #1D1E23;

  border-color:
    rgba(
      161,
      164,
      173,
      .14
    );
}

.profile-flair:hover {
  border-color:
    rgba(
      205,
      130,
      221,
      .38
    )

    !important;
}


/* =========================================================
   SEMANTIC COLORS
   Keep only where meaning depends on them.
========================================================= */

/*
   These remain intentionally semantic:
   - live game state
   - win/loss thresholds
   - injuries
   - record graphic colors
*/

.live,
.v08-score-status.live,
.injury,
.performance-result.loss {
  /* retain existing semantic styling */
}

.profile-win-card.win-green .win-donut,
.profile-win-card.win-orange .win-donut,
.profile-win-card.win-red .win-donut {
  /* retain the user-requested W/L threshold colors */
}


/* =========================================================
   LIGHT MODE — INVERTED HIERARCHY
========================================================= */

html[data-theme="light"] body {
  background:
    radial-gradient(
      circle at
      14%
      9%,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
      31%
    ),

    radial-gradient(
      circle at
      82%
      76%,

      rgba(
        105,
        46,
        126,
        .03
      ),

      transparent
      34%
    ),

    #F4F3F6

    !important;
}

html[data-theme="light"]
.v16-ambient-layer::before {
  background:
    radial-gradient(
      500px
      360px
      at
      var(--v16-pointer-x)
      var(--v16-pointer-y),

      rgba(
        126,
        46,
        151,
        .055
      ),

      transparent
      68%
    ),

    linear-gradient(
      115deg,

      transparent
      0
      36%,

      rgba(
        105,
        46,
        126,
        .035
      )
      36.1%
      36.6%,

      transparent
      36.7%
      100%
    )

    !important;
}

html[data-theme="light"]
.page-wrap::before {
  background-image:
    linear-gradient(
      rgba(
        105,
        46,
        126,
        .035
      )
      1px,

      transparent
      1px
    ),

    linear-gradient(
      90deg,

      rgba(
        105,
        46,
        126,
        .035
      )
      1px,

      transparent
      1px
    ),

    linear-gradient(
      135deg,

      transparent
      47%,

      rgba(
        158,
        64,
        186,
        .025
      )
      48%,

      rgba(
        158,
        64,
        186,
        .025
      )
      49%,

      transparent
      50%
    )

    !important;
}


/* =========================================================
   LIGHT SIDEBAR
========================================================= */

html[data-theme="light"]
.sidebar {
  background:
    radial-gradient(
      circle at
      50%
      7%,

      rgba(
        158,
        64,
        186,
        .055
      ),

      transparent
      27%
    ),

    #EDECF0

    !important;
}

html[data-theme="light"]
.nav-button {
  color:
    #77747E
    !important;
}

html[data-theme="light"]
.nav-button:hover {
  background:
    rgba(
      158,
      64,
      186,
      .07
    )

    !important;

  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.nav-button.active {
  background:
    linear-gradient(
      140deg,

      var(--v17-purple-700),

      var(--v17-purple-500)
    )

    !important;

  color:
    var(--v17-white)
    !important;
}


/* =========================================================
   LIGHT PAGE HEADERS
========================================================= */

html[data-theme="light"]
.page-header h1 {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.page-header p {
  color:
    #6B6871
    !important;
}

html[data-theme="light"]
.eyebrow {
  color:
    var(--v17-purple-600)
    !important;
}


/* =========================================================
   LIGHT CARDS
========================================================= */

html[data-theme="light"]
.card {
  border-color:
    rgba(
      74,
      69,
      80,
      .10
    )

    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .022
      ),

      transparent
      42%
    ),

    #FFFFFF

    !important;

  box-shadow:
    0
    14px
    34px
    rgba(
      51,
      45,
      57,
      .075
    )

    !important;
}

html[data-theme="light"]
.card:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .18
    )

    !important;

  box-shadow:
    0
    17px
    42px
    rgba(
      67,
      52,
      72,
      .10
    )

    !important;
}

html[data-theme="light"]
.card-title {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.card-subtitle,
html[data-theme="light"]
.muted,
html[data-theme="light"]
.tiny {
  color:
    #77747E
    !important;
}

html[data-theme="light"]
.card-body {
  color:
    #5E5B64
    !important;
}


/* =========================================================
   LIGHT IMPORTANT INFORMATION
========================================================= */

html[data-theme="light"]
.matchup-score,

html[data-theme="light"]
.v08-score-points,

html[data-theme="light"]
.v10-team-record-block strong,

html[data-theme="light"]
.v10-team-stat strong,

html[data-theme="light"]
.profile-mini-stat strong,

html[data-theme="light"]
.v14-team-net strong,

html[data-theme="light"]
.v12-fairness-net,

html[data-theme="light"]
.stat strong,

html[data-theme="light"]
.v10-trending-count strong,

html[data-theme="light"]
.trending-count-block strong {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.market-row strong,

html[data-theme="light"]
.slot-player-copy strong,

html[data-theme="light"]
.v10-trade-roster-player strong,

html[data-theme="light"]
.v12-trade-player strong,

html[data-theme="light"]
.player-card strong,

html[data-theme="light"]
.player-standing-card strong,

html[data-theme="light"]
.player-result-card strong,

html[data-theme="light"]
.v14-selected-asset-copy strong,

html[data-theme="light"]
.v14-balance-option strong {
  color:
    var(--v17-purple-700)
    !important;
}


/* =========================================================
   LIGHT HERO
========================================================= */

html[data-theme="light"]
.hero {
  border-color:
    rgba(
      158,
      64,
      186,
      .15
    )

    !important;

  background:
    radial-gradient(
      circle at
      15%
      18%,

      rgba(
        158,
        64,
        186,
        .085
      ),

      transparent
      31%
    ),

    radial-gradient(
      circle at
      88%
      15%,

      rgba(
        105,
        46,
        126,
        .05
      ),

      transparent
      27%
    ),

    linear-gradient(
      120deg,

      #FFFFFF,

      #F4F1F5
    )

    !important;

  box-shadow:
    0
    16px
    38px
    rgba(
      69,
      54,
      76,
      .08
    )

    !important;
}

html[data-theme="light"]
.hero h1 {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.hero p {
  color:
    #67636C
    !important;
}

html[data-theme="light"]
.hero .eyebrow {
  color:
    var(--v17-purple-600)
    !important;
}

html[data-theme="light"]
.hero .stat {
  border-color:
    rgba(
      105,
      46,
      126,
      .11
    )

    !important;

  background:
    rgba(
      255,
      255,
      255,
      .72
    )

    !important;
}

html[data-theme="light"]
.hero .stat strong {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.hero .stat small {
  color:
    #77747E
    !important;
}

html[data-theme="light"]
.hero::after {
  border-color:
    rgba(
      158,
      64,
      186,
      .11
    )

    !important;
}


/* =========================================================
   LIGHT BUTTONS
========================================================= */

html[data-theme="light"]
.btn {
  border-color:
    rgba(
      91,
      84,
      99,
      .13
    )

    !important;

  background:
    #ECEAEF
    !important;

  color:
    #5E5B64
    !important;
}

html[data-theme="light"]
.btn:hover {
  border-color:
    rgba(
      158,
      64,
      186,
      .27
    )

    !important;

  background:
    #F1EAF4
    !important;

  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.btn.primary {
  background:
    linear-gradient(
      110deg,

      var(--v17-purple-700),

      var(--v17-purple-500)
    )

    !important;

  color:
    var(--v17-white)
    !important;
}


/* =========================================================
   LIGHT FORMS
========================================================= */

html[data-theme="light"]
input,

html[data-theme="light"]
select,

html[data-theme="light"]
textarea {
  border-color:
    rgba(
      74,
      69,
      80,
      .12
    )

    !important;

  background:
    #F4F3F6
    !important;

  color:
    #514E56
    !important;
}

html[data-theme="light"]
input:focus,

html[data-theme="light"]
select:focus,

html[data-theme="light"]
textarea:focus {
  border-color:
    rgba(
      158,
      64,
      186,
      .40
    )

    !important;

  box-shadow:
    0
    0
    0
    3px
    rgba(
      158,
      64,
      186,
      .07
    )

    !important;
}


/* =========================================================
   LIGHT SCOREBOARD
========================================================= */

html[data-theme="light"]
.v08-score-strip-shell {
  border-color:
    rgba(
      158,
      64,
      186,
      .12
    )

    !important;

  background:
    #FFFFFF
    !important;
}

html[data-theme="light"]
.v08-score-game {
  background:
    #FFFFFF
    !important;

  border-right-color:
    rgba(
      74,
      69,
      80,
      .09
    )

    !important;
}

html[data-theme="light"]
.v08-score-game:hover {
  background:
    #F5F0F7
    !important;
}

html[data-theme="light"]
.v08-score-team-code,

html[data-theme="light"]
.v08-score-points {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.v08-score-record,

html[data-theme="light"]
.v08-score-network {
  color:
    #77747E
    !important;
}


/* =========================================================
   LIGHT WEEKLY INSIGHT
========================================================= */

html[data-theme="light"]
.v09-outlook-panel.good {
  border-color:
    rgba(
      158,
      64,
      186,
      .16
    )

    !important;

  border-left:
    3px
    solid
    var(--v17-purple-500)
    !important;

  background:
    rgba(
      158,
      64,
      186,
      .035
    )

    !important;
}

html[data-theme="light"]
.v09-outlook-panel.bad {
  border-color:
    rgba(
      91,
      84,
      99,
      .13
    )

    !important;

  border-left:
    3px
    solid
    #A09DA5
    !important;

  background:
    rgba(
      91,
      84,
      99,
      .025
    )

    !important;
}

html[data-theme="light"]
.v09-outlook-panel.good
strong {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.v09-outlook-panel.bad
strong {
  color:
    #65616A
    !important;
}


/* =========================================================
   LIGHT TRADE PAGE
========================================================= */

html[data-theme="light"]
.v13-trade-setup-strip {
  border-color:
    rgba(
      158,
      64,
      186,
      .12
    )

    !important;

  background:
    #F0EEF2
    !important;
}

html[data-theme="light"]
.v13-participant-trigger {
  border-color:
    rgba(
      74,
      69,
      80,
      .10
    )

    !important;

  background:
    #FFFFFF
    !important;
}

html[data-theme="light"]
.v13-participant-trigger:hover,

html[data-theme="light"]
.v13-participant-card.open
.v13-participant-trigger {
  border-color:
    rgba(
      158,
      64,
      186,
      .27
    )

    !important;

  background:
    #F7F2F8
    !important;
}

html[data-theme="light"]
.v13-participant-menu {
  background:
    #FFFFFF
    !important;
}

html[data-theme="light"]
.v14-team-card.fair,

html[data-theme="light"]
.v14-team-card.edge-positive,

html[data-theme="light"]
.v14-team-card.gain,

html[data-theme="light"]
.v14-team-card.strong-gain,

html[data-theme="light"]
.v14-team-card.edge-negative,

html[data-theme="light"]
.v14-team-card.loss,

html[data-theme="light"]
.v14-team-card.robbery-risk {
  background:
    #FFFFFF
    !important;
}

html[data-theme="light"]
.v14-team-card.edge-positive,

html[data-theme="light"]
.v14-team-card.gain,

html[data-theme="light"]
.v14-team-card.strong-gain {
  border-color:
    rgba(
      158,
      64,
      186,
      .18
    )

    !important;

  box-shadow:
    inset
    0
    3px
    0
    rgba(
      158,
      64,
      186,
      .52
    )

    !important;
}

html[data-theme="light"]
.v14-team-card.edge-negative,

html[data-theme="light"]
.v14-team-card.loss,

html[data-theme="light"]
.v14-team-card.robbery-risk {
  border-color:
    rgba(
      91,
      84,
      99,
      .14
    )

    !important;

  box-shadow:
    inset
    0
    3px
    0
    rgba(
      139,
      135,
      145,
      .42
    )

    !important;
}

html[data-theme="light"]
.v14-team-net strong {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.v14-pick-control {
  background:
    #F6F1F7
    !important;
}


/* =========================================================
   LIGHT PROFILE
========================================================= */

html[data-theme="light"]
.profile-title h1 {
  color:
    var(--v17-purple-700)
    !important;
}

html[data-theme="light"]
.profile-big-avatar {
  box-shadow:
    0
    15px
    34px
    rgba(
      70,
      60,
      76,
      .10
    ),

    0
    0
    0
    4px
    #FFFFFF,

    0
    0
    0
    5px
    rgba(
      158,
      64,
      186,
      .18
    )

    !important;
}

html[data-theme="light"]
.profile-meta-card,

html[data-theme="light"]
.profile-flair {
  background:
    #FFFFFF
    !important;

  border-color:
    rgba(
      74,
      69,
      80,
      .10
    )

    !important;
}


/* =========================================================
   GLOBAL LIGHT TEXT BALANCE
========================================================= */

html[data-theme="light"]
strong {
  color:
    inherit;
}

html[data-theme="light"]
.v10-team-name strong,

html[data-theme="light"]
.v14-team-name strong,

html[data-theme="light"]
.profile-sleeper-handle,

html[data-theme="light"]
.v13-participant-copy strong,

html[data-theme="light"]
.v14-source-head strong {
  color:
    var(--v17-purple-700);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    720px
) {
  .page-header h1 {
    font-size:
      clamp(
        34px,
        10vw,
        47px
      )

      !important;
  }

  .hero h1 {
    font-size:
      clamp(
        30px,
        9vw,
        43px
      )

      !important;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .v16-orbit,
  .v16-vector-line,
  .v16-kinetic-mark {
    animation:
      none
      !important;
  }
}

/* =========================================================
   VECTORS 0.18 — KINETIC VIOLET
   Remove decorative geometry, increase interface motion
========================================================= */


/* =========================================================
   REMOVE BACKGROUND GEOMETRY
========================================================= */

.v16-ambient-layer {
  display:
    none
    !important;
}

.page-wrap::before,
.page-wrap::after {
  display:
    none
    !important;

  content:
    none
    !important;
}

.hero::before,
.hero::after {
  display:
    none
    !important;

  content:
    none
    !important;
}

.page-header::before {
  display:
    none
    !important;

  content:
    none
    !important;
}

.v16-orbit,
.v16-vector-line,
.v16-kinetic-mark {
  display:
    none
    !important;
}


/* =========================================================
   CLEANER BACKGROUND
========================================================= */

body {
  background:
    radial-gradient(
      circle at
      18%
      0%,

      rgba(
        158,
        64,
        186,
        .075
      ),

      transparent
      27%
    ),

    linear-gradient(
      180deg,

      #111216
      0%,

      #0D0E10
      100%
    )

    !important;

  background-attachment:
    fixed
    !important;
}

html[data-theme="light"]
body {
  background:
    radial-gradient(
      circle at
      18%
      0%,

      rgba(
        158,
        64,
        186,
        .045
      ),

      transparent
      29%
    ),

    #F4F3F6

    !important;
}


/* =========================================================
   PAGE TRANSITIONS
========================================================= */

.page.active,
.player-profile-page.active {
  animation:
    v18-page-enter
    .48s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-page-enter {
  0% {
    opacity:
      0;

    transform:
      translateY(
        12px
      );

    filter:
      blur(
        3px
      );
  }

  55% {
    opacity:
      1;

    filter:
      blur(
        0
      );
  }

  100% {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   PAGE HEADER MOTION
========================================================= */

.page-header h1 {
  animation:
    v18-title-enter
    .62s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

.page-header p {
  animation:
    v18-copy-enter
    .58s
    .07s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

.page-header .eyebrow {
  animation:
    v18-kicker-enter
    .48s
    .03s
    ease-out
    both;
}

.page-header::after {
  transform-origin:
    left
    center;

  animation:
    v18-line-grow
    .7s
    .12s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-title-enter {
  0% {
    opacity:
      0;

    transform:
      translateY(
        18px
      );

    letter-spacing:
      -.075em;
  }

  100% {
    opacity:
      1;

    transform:
      translateY(
        0
      );

    letter-spacing:
      -.055em;
  }
}

@keyframes v18-copy-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        9px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes v18-kicker-enter {
  from {
    opacity:
      0;

    transform:
      translateX(
        -10px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}

@keyframes v18-line-grow {
  from {
    opacity:
      0;

    transform:
      scaleX(
        0
      );
  }

  to {
    opacity:
      .88;

    transform:
      scaleX(
        1
      );
  }
}


/* =========================================================
   HERO MOTION
========================================================= */

.hero {
  background-size:
    160%
    160%
    !important;

  animation:
    v18-hero-enter
    .62s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both,

    v18-hero-breathe
    10s
    ease-in-out
    1s
    infinite
    alternate;
}

.hero h1 {
  animation:
    v18-hero-title
    .65s
    .06s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

.hero p {
  animation:
    v18-copy-enter
    .58s
    .13s
    ease-out
    both;
}

.hero .stat {
  transition:
    transform
    .25s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    border-color
    .25s
    ease,

    background
    .25s
    ease,

    box-shadow
    .25s
    ease
    !important;

  animation:
    v18-stat-enter
    .52s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

.hero .stat:nth-child(1) {
  animation-delay:
    .12s;
}

.hero .stat:nth-child(2) {
  animation-delay:
    .18s;
}

.hero .stat:nth-child(3) {
  animation-delay:
    .24s;
}

.hero .stat:hover {
  transform:
    translateY(
      -4px
    )
    scale(
      1.025
    );

  border-color:
    rgba(
      205,
      130,
      221,
      .28
    )

    !important;

  background:
    rgba(
      158,
      64,
      186,
      .12
    )

    !important;

  box-shadow:
    0
    12px
    28px
    rgba(
      0,
      0,
      0,
      .18
    )

    !important;
}

@keyframes v18-hero-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        13px
      )
      scale(
        .993
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

@keyframes v18-hero-title {
  from {
    opacity:
      0;

    transform:
      translateY(
        16px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes v18-stat-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        12px
      )
      scale(
        .96
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

@keyframes v18-hero-breathe {
  from {
    background-position:
      20%
      50%;
  }

  to {
    background-position:
      80%
      50%;
  }
}


/* =========================================================
   CARD REVEALS
========================================================= */

.v16-reveal {
  opacity:
    0;

  transform:
    translateY(
      24px
    )
    scale(
      .985
    );

  transition:
    opacity
    .58s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    ),

    transform
    .58s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    );
}

.v16-reveal.v16-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    )
    scale(
      1
    );
}

.card {
  transition:
    transform
    .28s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    box-shadow
    .28s
    ease,

    border-color
    .28s
    ease,

    background
    .28s
    ease
    !important;
}

.card:hover {
  transform:
    translateY(
      -4px
    )

    !important;

  border-color:
    rgba(
      182,
      92,
      207,
      .30
    )

    !important;

  box-shadow:
    0
    25px
    58px
    rgba(
      0,
      0,
      0,
      .30
    ),

    0
    0
    0
    1px
    rgba(
      158,
      64,
      186,
      .05
    )

    !important;
}


/* =========================================================
   CARD HEADER SLIDE
========================================================= */

.card:hover
.card-title {
  transform:
    translateX(
      3px
    );
}

.card-title {
  transition:
    transform
    .22s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    color
    .2s
    ease;
}


/* =========================================================
   BUTTON MOTION
========================================================= */

.btn {
  transition:
    transform
    .2s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    box-shadow
    .2s
    ease,

    border-color
    .2s
    ease,

    background
    .2s
    ease
    !important;
}

.btn:hover {
  transform:
    translateY(
      -2px
    )
    scale(
      1.018
    )

    !important;
}

.btn:active {
  transform:
    translateY(
      0
    )
    scale(
      .97
    )

    !important;

  transition-duration:
    .08s
    !important;
}

.btn.primary {
  background-size:
    170%
    100%
    !important;

  animation:
    v18-primary-idle
    7s
    ease-in-out
    infinite
    alternate;
}

@keyframes v18-primary-idle {
  from {
    background-position:
      0%
      50%;
  }

  to {
    background-position:
      100%
      50%;
  }
}


/* =========================================================
   SIDEBAR ANIMATION
========================================================= */

.nav-button {
  transform-origin:
    center;

  transition:
    transform
    .24s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    color
    .18s
    ease,

    border-color
    .18s
    ease,

    background
    .18s
    ease,

    box-shadow
    .18s
    ease

    !important;
}

.nav-button:hover {
  transform:
    scale(
      1.10
    )

    !important;
}

.nav-button:active {
  transform:
    scale(
      .92
    )

    !important;
}

.nav-button.active {
  animation:
    v18-nav-selected
    .38s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    )
    both;
}

@keyframes v18-nav-selected {
  0% {
    transform:
      scale(
        .87
      );
  }

  65% {
    transform:
      scale(
        1.08
      );
  }

  100% {
    transform:
      scale(
        1
      );
  }
}


/* =========================================================
   SCOREBOARD MOTION
========================================================= */

.v08-score-game {
  transition:
    transform
    .22s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    background
    .22s
    ease,

    box-shadow
    .22s
    ease
    !important;
}

.v08-score-game:hover {
  transform:
    translateY(
      -3px
    )
    scale(
      1.015
    )

    !important;
}

.v08-score-game[data-v08-focus="1"] {
  animation:
    v18-score-focus
    .55s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-score-focus {
  from {
    opacity:
      .68;

    transform:
      scale(
        .96
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}

.v08-score-team-link {
  transition:
    transform
    .18s
    ease,

    background
    .18s
    ease;
}

.v08-score-team-link:hover {
  transform:
    translateX(
      3px
    );
}

.v08-score-logo img {
  transition:
    transform
    .25s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}

.v08-score-team-link:hover
.v08-score-logo img {
  transform:
    scale(
      1.14
    );
}

.v08-score-points {
  transition:
    transform
    .18s
    ease;
}

.v08-score-team-link:hover
.v08-score-points {
  transform:
    scale(
      1.08
    );
}


/* =========================================================
   LIVE STATE ANIMATION
========================================================= */

.live {
  animation:
    v18-live-text
    2.2s
    ease-in-out
    infinite;
}

.v08-score-status.live i {
  animation:
    v18-live-dot
    1.55s
    ease-out
    infinite
    !important;
}

@keyframes v18-live-text {
  0%,
  100% {
    opacity:
      1;
  }

  50% {
    opacity:
      .62;
  }
}

@keyframes v18-live-dot {
  0% {
    transform:
      scale(
        1
      );

    box-shadow:
      0
      0
      0
      0
      rgba(
        255,
        101,
        120,
        .45
      );
  }

  70% {
    transform:
      scale(
        1.12
      );

    box-shadow:
      0
      0
      0
      8px
      rgba(
        255,
        101,
        120,
        0
      );
  }

  100% {
    transform:
      scale(
        1
      );

    box-shadow:
      0
      0
      0
      0
      rgba(
        255,
        101,
        120,
        0
      );
  }
}


/* =========================================================
   PLAYER CARDS / HEADSHOTS
========================================================= */

.player-card,
.player-standing-card,
.player-result-card,
.v10-trade-roster-player,
.v12-trade-player,
.slot-row,
.market-row,
.trending-detail-card {
  transition:
    transform
    .23s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    border-color
    .2s
    ease,

    background
    .2s
    ease,

    box-shadow
    .2s
    ease

    !important;
}

.player-card:hover,
.player-standing-card:hover,
.player-result-card:hover,
.v10-trade-roster-player:hover:not(:disabled),
.v12-trade-player:hover:not(:disabled),
.slot-row:hover,
.market-row:hover,
.trending-detail-card:hover {
  transform:
    translateY(
      -3px
    )
    scale(
      1.006
    )

    !important;
}

.player-photo,
.player-card-photo,
.player-standing-photo,
.slot-player-photo,
.trade-headshot,
.trending-detail-photo,
.v09-waiver-photo {
  transition:
    transform
    .28s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    filter
    .28s
    ease

    !important;
}

.player-card:hover
.player-photo,

.player-card:hover
.player-card-photo,

.player-standing-card:hover
.player-standing-photo,

.player-result-card:hover
.player-photo,

.slot-row:hover
.slot-player-photo,

.v10-trade-roster-player:hover:not(:disabled)
.trade-headshot,

.v12-trade-player:hover:not(:disabled)
.trade-headshot,

.trending-detail-card:hover
.trending-detail-photo {
  transform:
    scale(
      1.09
    )

    !important;

  filter:
    saturate(
      1.06
    )
    contrast(
      1.025
    );
}


/* =========================================================
   NEWS CARD MOTION
========================================================= */

.news-card,
.player-news-card {
  transition:
    transform
    .25s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    box-shadow
    .25s
    ease,

    border-color
    .25s
    ease
    !important;
}

.news-card:hover,
.player-news-card:hover {
  transform:
    translateY(
      -4px
    )

    !important;
}

.news-card img,
.player-news-card img,
.player-news-thumbnail {
  transition:
    transform
    .5s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    ),

    filter
    .3s
    ease

    !important;
}

.news-card:hover img,
.player-news-card:hover img {
  transform:
    scale(
      1.055
    )

    !important;
}


/* =========================================================
   WEEKLY INSIGHT
========================================================= */

.v09-outlook-panel {
  transition:
    transform
    .22s
    ease,

    border-color
    .22s
    ease,

    background
    .22s
    ease

    !important;
}

.v09-outlook-panel:hover {
  transform:
    translateY(
      -3px
    );
}

.v09-outlook-item {
  transition:
    transform
    .18s
    ease,

    border-color
    .18s
    ease,

    background
    .18s
    ease

    !important;
}

.v09-outlook-item:hover {
  transform:
    translateX(
      4px
    );
}

.v09-outlook-icon {
  transition:
    transform
    .3s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}

.v09-outlook-panel:hover
.v09-outlook-icon {
  transform:
    scale(
      1.14
    )
    rotate(
      3deg
    );
}


/* =========================================================
   WAIVER RECOMMENDATIONS
========================================================= */

.v09-waiver-row {
  transition:
    transform
    .2s
    ease,

    border-color
    .2s
    ease,

    background
    .2s
    ease;
}

.v09-waiver-row:hover {
  transform:
    translateX(
      4px
    );

  border-color:
    rgba(
      182,
      92,
      207,
      .28
    );
}

.v09-waiver-arrow {
  animation:
    v18-waiver-arrow
    2.4s
    ease-in-out
    infinite;
}

@keyframes v18-waiver-arrow {
  0%,
  100% {
    transform:
      translateX(
        0
      );
  }

  50% {
    transform:
      translateX(
        4px
      );
  }
}


/* =========================================================
   COLLAPSIBLE LINEUPS
========================================================= */

.v09-lineup-summary {
  transition:
    background
    .2s
    ease,

    padding
    .2s
    ease;
}

.v09-lineup-summary:hover {
  background:
    rgba(
      158,
      64,
      186,
      .06
    );

  padding-left:
    15px;
}

.v09-lineup-chevron {
  transition:
    transform
    .28s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    )

    !important;
}

.v09-lineup-section[open]
.v09-lineup-content {
  animation:
    v18-collapse-open
    .34s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-collapse-open {
  from {
    opacity:
      0;

    transform:
      translateY(
        -7px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   TRADE TEAM PICKER
========================================================= */

.v13-participant-menu {
  transform-origin:
    top
    center;

  animation:
    v18-dropdown-open
    .22s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-dropdown-open {
  from {
    opacity:
      0;

    transform:
      translateY(
        -7px
      )
      scale(
        .975
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

.v13-participant-option {
  transition:
    transform
    .17s
    ease,

    background
    .17s
    ease,

    border-color
    .17s
    ease;
}

.v13-participant-option:hover {
  transform:
    translateX(
      4px
    );
}


/* =========================================================
   TRADE BUILDER
========================================================= */

.v14-team-card {
  transition:
    transform
    .25s
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    ),

    border-color
    .25s
    ease,

    box-shadow
    .25s
    ease

    !important;
}

.v14-team-card:hover {
  transform:
    translateY(
      -4px
    );

  box-shadow:
    0
    20px
    46px
    rgba(
      0,
      0,
      0,
      .22
    );
}

.v14-team-net strong {
  transition:
    transform
    .2s
    ease;
}

.v14-team-card:hover
.v14-team-net strong {
  transform:
    scale(
      1.08
    );
}

.v14-selected-asset {
  animation:
    v18-asset-enter
    .32s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    )
    both;
}

@keyframes v18-asset-enter {
  from {
    opacity:
      0;

    transform:
      scale(
        .90
      )
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      )
      translateY(
        0
      );
  }
}

.v14-selected-asset > button {
  transition:
    transform
    .18s
    ease,

    background
    .18s
    ease,

    color
    .18s
    ease;
}

.v14-selected-asset > button:hover {
  transform:
    rotate(
      90deg
    )
    scale(
      1.12
    );

  background:
    rgba(
      158,
      64,
      186,
      .14
    );

  color:
    var(--v17-white);
}


/* =========================================================
   BALANCE SUGGESTIONS
========================================================= */

.v14-balance-option {
  transition:
    transform
    .19s
    ease,

    border-color
    .19s
    ease,

    background
    .19s
    ease

    !important;
}

.v14-balance-option:hover {
  transform:
    translateX(
      4px
    );
}

.v14-balance-option > b {
  transition:
    transform
    .18s
    ease;
}

.v14-balance-option:hover > b {
  transform:
    scale(
      1.10
    );
}


/* =========================================================
   PROFILE
========================================================= */

.profile-big-avatar {
  transition:
    transform
    .34s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    box-shadow
    .3s
    ease;
}

.profile-big-avatar:hover {
  transform:
    scale(
      1.045
    )
    rotate(
      -1deg
    );
}

.profile-meta-card {
  transition:
    transform
    .2s
    ease,

    border-color
    .2s
    ease,

    box-shadow
    .2s
    ease;
}

.profile-meta-card:hover {
  transform:
    translateY(
      -3px
    );

  border-color:
    rgba(
      182,
      92,
      207,
      .28
    )

    !important;
}

.profile-flair {
  transition:
    transform
    .26s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    border-color
    .18s
    ease

    !important;
}

.profile-flair:hover {
  transform:
    translateY(
      -4px
    )
    scale(
      1.06
    )

    !important;
}

.profile-flair img {
  transition:
    transform
    .28s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}

.profile-flair:hover img {
  transform:
    scale(
      1.12
    );
}


/* =========================================================
   WIN-RATE DONUT
========================================================= */

.win-donut {
  animation:
    v18-donut-enter
    .75s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-donut-enter {
  from {
    opacity:
      0;

    transform:
      rotate(
        -12deg
      )
      scale(
        .82
      );
  }

  to {
    opacity:
      1;

    transform:
      rotate(
        0
      )
      scale(
        1
      );
  }
}


/* =========================================================
   NFL TEAM HUB
========================================================= */

.v10-team-logo {
  animation:
    v18-team-logo-enter
    .6s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    )
    both;

  transition:
    transform
    .3s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}

.v10-team-logo:hover {
  transform:
    scale(
      1.08
    )
    rotate(
      -2deg
    );
}

@keyframes v18-team-logo-enter {
  from {
    opacity:
      0;

    transform:
      scale(
        .78
      )
      rotate(
        -4deg
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      )
      rotate(
        0
      );
  }
}

.v10-team-game {
  transition:
    transform
    .2s
    ease,

    border-color
    .2s
    ease,

    background
    .2s
    ease;
}

.v10-team-game:hover {
  transform:
    translateX(
      4px
    );

  border-color:
    rgba(
      182,
      92,
      207,
      .26
    );
}


/* =========================================================
   MODALS
========================================================= */

.modal-backdrop:not(.hidden) {
  animation:
    v18-backdrop-enter
    .2s
    ease
    both;
}

.modal-backdrop:not(.hidden)
.modal {
  animation:
    v18-modal-enter
    .32s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v18-backdrop-enter {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}

@keyframes v18-modal-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        16px
      )
      scale(
        .96
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

.modal-close {
  transition:
    transform
    .2s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    background
    .2s
    ease;
}

.modal-close:hover {
  transform:
    rotate(
      90deg
    )
    scale(
      1.08
    );
}


/* =========================================================
   FORM MICRO-INTERACTIONS
========================================================= */

input,
select,
textarea {
  transition:
    border-color
    .2s
    ease,

    box-shadow
    .2s
    ease,

    background
    .2s
    ease,

    transform
    .2s
    ease

    !important;
}

input:focus,
textarea:focus {
  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   LIGHT MODE MOTION
   Same motion, softer shadows.
========================================================= */

html[data-theme="light"]
.card:hover {
  box-shadow:
    0
    21px
    46px
    rgba(
      64,
      50,
      70,
      .12
    )

    !important;
}

html[data-theme="light"]
.hero .stat:hover {
  background:
    rgba(
      158,
      64,
      186,
      .065
    )

    !important;

  box-shadow:
    0
    10px
    24px
    rgba(
      67,
      52,
      72,
      .09
    )

    !important;
}

html[data-theme="light"]
.v14-team-card:hover {
  box-shadow:
    0
    18px
    38px
    rgba(
      65,
      52,
      70,
      .10
    );
}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
    720px
) {
  .card:hover,
  .v14-team-card:hover,
  .v09-outlook-panel:hover {
    transform:
      none
      !important;
  }

  .hero .stat:hover {
    transform:
      none;
  }

  .nav-button:hover {
    transform:
      scale(
        1.04
      )

      !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    transition-duration:
      .001ms
      !important;

    scroll-behavior:
      auto
      !important;
  }

  .page.active,
  .player-profile-page.active,
  .v16-reveal,
  .v16-reveal.v16-visible {
    opacity:
      1
      !important;

    transform:
      none
      !important;

    filter:
      none
      !important;
  }
}

/* VECTORS 0.19 — TRADE WORKSPACE CLEANUP */

#page-trades .card:hover {
  transform:
    none
    !important;
}


/* =========================================================
   COMPACT TRADE SETUP
========================================================= */

.v19-trade-setup {
  position:
    relative;

  z-index:
    800;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap:
    8px;

  align-items:
    center;

  margin-bottom:
    10px;

  padding:
    7px;

  overflow:
    visible
    !important;

  border:
    1px
    solid
    var(--border);

  border-radius:
    14px;

  background:
    rgba(
      158,
      64,
      186,
      .035
    );
}

.v19-trade-size {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    46px;

  padding:
    0
    8px;
}

.v19-trade-size > span,
.v19-value-mode small {
  color:
    var(--muted);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.v19-segmented {
  display:
    flex;

  gap:
    3px;

  padding:
    3px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    9px;

  background:
    var(--panel-soft);
}

.v19-segmented button {
  width:
    30px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    900;
}

.v19-segmented button.active {
  background:
    rgba(
      158,
      64,
      186,
      .18
    );

  color:
    var(
      --v17-white,
      #fff
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      205,
      130,
      221,
      .28
    );
}

.v19-team-selectors {
  position:
    relative;

  z-index:
    810;

  display:
    grid;

  gap:
    5px;

  overflow:
    visible
    !important;
}

.v19-team-selectors.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v19-team-selectors.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v19-team-selectors.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v19-trade-setup
.v13-participant-trigger {
  min-height:
    46px;

  padding:
    5px
    7px;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    14px;

  background:
    var(--panel)
    !important;
}

.v19-trade-setup
.trade-manager-avatar {
  width:
    28px
    !important;

  height:
    28px
    !important;

  min-width:
    28px
    !important;
}

.v19-trade-setup
.v13-participant-copy
small {
  font-size:
    6px;
}

.v19-trade-setup
.v13-participant-copy
strong {
  font-size:
    9px;
}

.v19-trade-setup
.v13-participant-copy
span {
  font-size:
    7px;
}

.v19-trade-setup
.v13-participant-card.open {
  z-index:
    1000000
    !important;
}

.v19-trade-setup
.v13-participant-menu {
  z-index:
    1000001
    !important;
}

.v19-value-mode {
  min-width:
    145px;

  min-height:
    46px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    0
    9px;

  border-left:
    1px
    solid
    var(--border);
}

.v19-value-mode strong {
  margin-top:
    2px;

  font-size:
    9px;
}


/* =========================================================
   TRADE BUILDER
========================================================= */

.v19-builder-card {
  overflow:
    visible
    !important;

  margin-bottom:
    10px;
}

.v19-builder-head {
  min-height:
    64px;

  padding-right:
    14px
    !important;
}

.v19-builder-head::after {
  display:
    none
    !important;
}

.v19-builder-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.v19-overall-status {
  padding:
    5px
    8px;

  border-radius:
    999px;

  background:
    rgba(
      158,
      64,
      186,
      .10
    );

  color:
    var(
      --v17-purple-200,
      #DFA9E9
    );

  font-size:
    8px;

  font-weight:
    900;
}

.v19-overall-status.balanced {
  background:
    rgba(
      158,
      64,
      186,
      .12
    );
}

.v19-overall-status.imbalanced {
  background:
    rgba(
      119,
      122,
      133,
      .12
    );

  color:
    var(--muted);
}

.v19-clear-button {
  min-height:
    30px
    !important;
}


/* =========================================================
   TEAM COLUMNS
========================================================= */

.v19-team-grid {
  display:
    grid;

  gap:
    10px;

  align-items:
    start;
}

.v19-team-grid.participants-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

.v19-team-grid.participants-3 {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
}

.v19-team-grid.participants-4 {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.v19-team-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px
    solid
    var(--border);

  border-radius:
    14px;

  background:
    var(--panel-soft);
}

.v19-team-card.edge-positive,
.v19-team-card.gain,
.v19-team-card.strong-gain {
  border-top-color:
    rgba(
      205,
      130,
      221,
      .48
    );
}

.v19-team-card.edge-negative,
.v19-team-card.loss,
.v19-team-card.robbery-risk {
  border-top-color:
    rgba(
      119,
      122,
      133,
      .42
    );
}


/* =========================================================
   TEAM HEADER
========================================================= */

.v19-team-card-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px;

  border-bottom:
    1px
    solid
    var(--border);

  background:
    var(--panel);
}

.v19-team-identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.v19-team-identity
.trade-manager-avatar {
  width:
    42px
    !important;

  height:
    42px
    !important;

  min-width:
    42px
    !important;

  border-radius:
    10px;
}

.v19-team-identity > div {
  min-width:
    0;
}

.v19-team-identity strong,
.v19-team-identity span {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v19-team-identity strong {
  font-size:
    11px;
}

.v19-team-identity span {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    8px;
}


/* =========================================================
   NET STATUS
========================================================= */

.v19-net-pill {
  min-width:
    74px;

  padding:
    6px
    8px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--panel-soft);

  text-align:
    right;
}

.v19-net-pill small,
.v19-net-pill strong,
.v19-net-pill span {
  display:
    block;
}

.v19-net-pill small {
  color:
    var(--muted);

  font-size:
    6px;

  font-weight:
    900;
}

.v19-net-pill strong {
  margin-top:
    1px;

  font-size:
    15px;
}

.v19-net-pill span {
  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    800;
}

.v19-net-pill.edge-positive,
.v19-net-pill.gain,
.v19-net-pill.strong-gain {
  border-color:
    rgba(
      205,
      130,
      221,
      .24
    );

  background:
    rgba(
      158,
      64,
      186,
      .08
    );
}

.v19-net-pill.edge-negative,
.v19-net-pill.loss,
.v19-net-pill.robbery-risk {
  border-color:
    rgba(
      119,
      122,
      133,
      .22
    );

  background:
    rgba(
      119,
      122,
      133,
      .06
    );
}


/* =========================================================
   VALUE ROW
========================================================= */

.v19-value-row {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    1px;

  border-bottom:
    1px
    solid
    var(--border);

  background:
    var(--border);
}

.v19-value-row > div {
  padding:
    7px
    8px;

  background:
    var(--panel-soft);
}

.v19-value-row span,
.v19-value-row strong {
  display:
    block;
}

.v19-value-row span {
  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    800;
}

.v19-value-row strong {
  margin-top:
    2px;

  font-size:
    11px;
}


/* =========================================================
   INCOMING ASSETS
========================================================= */

.v19-source-stack {
  display:
    grid;

  gap:
    7px;

  padding:
    8px;
}

.v19-source-section {
  overflow:
    hidden;

  border:
    1px
    solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--panel);
}

.v19-source-label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  min-height:
    38px;

  padding:
    5px
    7px;

  border-bottom:
    1px
    solid
    var(--border);
}

.v19-source-label > div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.v19-source-label
.trade-manager-avatar {
  width:
    26px
    !important;

  height:
    26px
    !important;

  min-width:
    26px
    !important;

  border-radius:
    7px;
}

.v19-source-label span {
  min-width:
    0;
}

.v19-source-label small,
.v19-source-label strong {
  display:
    block;
}

.v19-source-label small {
  color:
    var(--muted);

  font-size:
    6px;

  font-weight:
    900;
}

.v19-source-label strong {
  max-width:
    155px;

  margin-top:
    1px;

  overflow:
    hidden;

  font-size:
    8px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v19-asset-count {
  min-width:
    21px;

  height:
    21px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    999px;

  background:
    rgba(
      158,
      64,
      186,
      .10
    );

  color:
    var(
      --v17-purple-200,
      #DFA9E9
    );

  font-size:
    7px;

  font-weight:
    900;
}

.v19-source-assets {
  display:
    grid;

  gap:
    4px;

  padding:
    6px;
}

.v19-empty-assets {
  padding:
    10px
    7px;

  color:
    var(--muted);

  font-size:
    8px;

  text-align:
    center;
}

.v19-source-section
.v14-selected-asset {
  min-height:
    54px;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto
    20px;

  padding:
    4px;
}

.v19-source-section
.v14-selected-player-photo {
  width:
    44px;

  height:
    44px;

  border-radius:
    9px;
}


/* =========================================================
   DRAFT PICK CONTROL
========================================================= */

.v19-source-section
.v14-pick-control {
  margin:
    0
    6px
    6px;

  padding:
    6px;

  background:
    rgba(
      158,
      64,
      186,
      .045
    )

    !important;
}

.v19-source-section
.v14-pick-title {
  margin-bottom:
    5px;
}

.v19-source-section
.v14-pick-title > span {
  width:
    23px;

  height:
    23px;

  font-size:
    11px;
}

.v19-source-section
.v14-pick-title strong {
  font-size:
    8px;
}

.v19-source-section
.v14-pick-title small {
  font-size:
    6px;
}

.v19-source-section
.v14-pick-fields select,
.v19-source-section
.v14-pick-fields button {
  min-height:
    28px;
}


/* =========================================================
   BALANCE IDEAS
========================================================= */

.v19-balance-strip {
  margin:
    0
    8px
    8px;

  padding:
    7px;

  border:
    1px
    solid
    rgba(
      158,
      64,
      186,
      .14
    );

  border-radius:
    10px;

  background:
    rgba(
      158,
      64,
      186,
      .035
    );
}

.v19-balance-copy {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    8px;

  margin-bottom:
    5px;
}

.v19-balance-copy small {
  color:
    var(
      --v17-purple-300,
      #CD82DD
    );

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}

.v19-balance-copy span {
  color:
    var(--muted);

  font-size:
    7px;
}

.v19-balance-options {
  display:
    grid;

  gap:
    4px;
}

.v19-balance-option {
  width:
    100%;

  min-height:
    43px;

  display:
    grid;

  grid-template-columns:
    34px
    minmax(0, 1fr)
    auto;

  gap:
    6px;

  align-items:
    center;

  padding:
    4px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    8px;

  background:
    var(--panel);

  color:
    var(--text);

  text-align:
    left;
}

.v19-balance-option:hover {
  border-color:
    rgba(
      182,
      92,
      207,
      .28
    );

  background:
    rgba(
      158,
      64,
      186,
      .06
    );
}

.v19-balance-photo {
  width:
    32px;

  height:
    32px;

  border-radius:
    7px;

  object-fit:
    cover;

  object-position:
    center top;
}

.v19-balance-option span {
  min-width:
    0;
}

.v19-balance-option strong,
.v19-balance-option small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v19-balance-option strong {
  font-size:
    8px;
}

.v19-balance-option small {
  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    6px;
}

.v19-balance-option b {
  color:
    var(
      --v17-white,
      #fff
    );

  font-size:
    9px;
}


/* =========================================================
   PLAYER SELECTOR
========================================================= */

#page-trades
.v12-player-pool-card,
#page-trades
.v13-player-pool-card {
  margin-top:
    0
    !important;
}

#page-trades
.v12-trade-methodology,
#page-trades
.trade-methodology {
  padding:
    8px
    10px;

  margin-bottom:
    8px;

  border-style:
    dashed;

  background:
    transparent;

  font-size:
    8px;
}

#page-trades
.v12-player-pools,
#page-trades
.v10-trade-roster-grid {
  gap:
    8px
    !important;
}

#page-trades
.v12-trade-roster-group,
#page-trades
.v10-trade-roster-group {
  border-radius:
    12px
    !important;

  box-shadow:
    none
    !important;
}

#page-trades
.v12-trade-roster-head,
#page-trades
.v10-trade-roster-head {
  padding:
    8px
    !important;
}

#page-trades
.v10-trade-position-groups {
  gap:
    8px;

  padding:
    7px;
}

#page-trades
.v10-trade-position-title {
  margin-bottom:
    4px;
}

#page-trades
.v12-trade-player,
#page-trades
.v10-trade-roster-player {
  min-height:
    70px
    !important;

  border-radius:
    9px
    !important;

  box-shadow:
    none
    !important;
}

#page-trades
.v12-trade-player:hover,
#page-trades
.v10-trade-roster-player:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    )

    !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v19-trade-setup,

html[data-theme="light"]
.v19-team-card,

html[data-theme="light"]
.v19-source-section,

html[data-theme="light"]
.v19-balance-option {
  background:
    #fff;
}

html[data-theme="light"]
.v19-segmented,

html[data-theme="light"]
.v19-net-pill,

html[data-theme="light"]
.v19-value-row > div {
  background:
    #F4F3F6;
}

html[data-theme="light"]
.v19-net-pill strong,

html[data-theme="light"]
.v19-value-row strong,

html[data-theme="light"]
.v19-balance-option b {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1250px
) {
  .v19-trade-setup {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }

  .v19-value-mode {
    grid-column:
      1 /
      -1;

    min-height:
      34px;

    border-left:
      0;

    border-top:
      1px
      solid
      var(--border);

    padding-top:
      5px;
  }

  .v19-team-grid.participants-4 {
    grid-template-columns:
      repeat(
        4,
        minmax(
          255px,
          1fr
        )
      );

    overflow-x:
      auto;
  }
}

@media (
  max-width:
    1000px
) {
  .v19-team-selectors.participants-3,
  .v19-team-selectors.participants-4 {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .v19-team-grid.participants-3 {
    grid-template-columns:
      repeat(
        3,
        minmax(
          255px,
          1fr
        )
      );

    overflow-x:
      auto;
  }
}

@media (
  max-width:
    720px
) {
  .v19-trade-setup {
    grid-template-columns:
      1fr;
  }

  .v19-team-selectors.participants-2,
  .v19-team-selectors.participants-3,
  .v19-team-selectors.participants-4 {
    grid-template-columns:
      1fr;
  }

  .v19-value-mode {
    grid-column:
      auto;
  }

  .v19-builder-head {
    align-items:
      stretch;
  }

  .v19-builder-actions {
    justify-content:
      space-between;
  }

  .v19-team-grid.participants-2,
  .v19-team-grid.participants-3,
  .v19-team-grid.participants-4 {
    grid-template-columns:
      1fr;

    overflow:
      visible;
  }
}

/* VECTORS 0.20 — COLLAPSIBLE DRAFT PICKS */


/* Hide the older always-visible pick treatment. */

.v19-source-section
.v14-pick-control {
  display:
    none
    !important;
}


/* =========================================================
   COLLAPSED PICK CONTROL
========================================================= */

.v20-pick-details {
  margin:
    0
    6px
    6px;

  overflow:
    hidden;

  border:
    1px
    solid
    rgba(
      158,
      64,
      186,
      .18
    );

  border-radius:
    9px;

  background:
    rgba(
      158,
      64,
      186,
      .035
    );
}

.v20-pick-summary {
  min-height:
    39px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    6px
    8px;

  cursor:
    pointer;

  list-style:
    none;

  user-select:
    none;

  transition:
    background
    .18s
    ease,

    border-color
    .18s
    ease;
}

.v20-pick-summary::-webkit-details-marker {
  display:
    none;
}

.v20-pick-summary:hover {
  background:
    rgba(
      158,
      64,
      186,
      .065
    );
}

.v20-pick-summary-left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.v20-pick-plus {
  width:
    25px;

  height:
    25px;

  flex:
    0
    0
    25px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    7px;

  background:
    rgba(
      158,
      64,
      186,
      .13
    );

  color:
    var(
      --v17-purple-200,
      #DFA9E9
    );

  font-size:
    14px;

  font-weight:
    900;

  transition:
    transform
    .22s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    ),

    background
    .18s
    ease;
}

.v20-pick-summary:hover
.v20-pick-plus {
  transform:
    scale(
      1.08
    );

  background:
    rgba(
      158,
      64,
      186,
      .20
    );
}

.v20-pick-summary-left
strong,

.v20-pick-summary-left
small {
  display:
    block;
}

.v20-pick-summary-left
strong {
  color:
    var(--text);

  font-size:
    8px;
}

.v20-pick-summary-left
small {
  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    6px;

  font-weight:
    700;
}

.v20-pick-chevron {
  color:
    var(--muted);

  font-size:
    14px;

  transition:
    transform
    .25s
    cubic-bezier(
      .34,
      1.56,
      .64,
      1
    );
}

.v20-pick-details[open]
.v20-pick-chevron {
  transform:
    rotate(
      180deg
    );
}


/* =========================================================
   EXPANDED PICK MENU
========================================================= */

.v20-pick-menu {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    5px;

  align-items:
    end;

  padding:
    7px;

  border-top:
    1px
    solid
    rgba(
      158,
      64,
      186,
      .12
    );

  background:
    var(--panel-soft);

  animation:
    v20-pick-open
    .25s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v20-pick-open {
  from {
    opacity:
      0;

    transform:
      translateY(
        -5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

.v20-pick-field {
  min-width:
    0;
}

.v20-pick-field
label {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--muted);

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}

.v20-pick-field
select {
  width:
    100%;

  min-height:
    30px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    7px;

  background:
    var(--panel);

  color:
    var(--text);

  font-size:
    8px;

  font-weight:
    800;
}

.v20-add-pick-button {
  min-height:
    30px;

  padding:
    0
    10px;

  border:
    1px
    solid
    rgba(
      205,
      130,
      221,
      .30
    );

  border-radius:
    7px;

  background:
    rgba(
      158,
      64,
      186,
      .15
    );

  color:
    var(
      --v17-white,
      #FFFFFF
    );

  font-size:
    8px;

  font-weight:
    900;

  white-space:
    nowrap;

  transition:
    transform
    .18s
    ease,

    background
    .18s
    ease,

    border-color
    .18s
    ease;
}

.v20-add-pick-button:hover {
  transform:
    translateY(
      -1px
    );

  border-color:
    rgba(
      205,
      130,
      221,
      .48
    );

  background:
    rgba(
      158,
      64,
      186,
      .24
    );
}

.v20-add-pick-button:active {
  transform:
    scale(
      .96
    );
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v20-pick-details {
  border-color:
    rgba(
      158,
      64,
      186,
      .13
    );

  background:
    rgba(
      158,
      64,
      186,
      .025
    );
}

html[data-theme="light"]
.v20-pick-summary:hover {
  background:
    rgba(
      158,
      64,
      186,
      .055
    );
}

html[data-theme="light"]
.v20-pick-summary-left
strong {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}

html[data-theme="light"]
.v20-pick-menu {
  background:
    #F7F5F8;
}

html[data-theme="light"]
.v20-pick-field
select {
  background:
    #FFFFFF;

  color:
    #514E56;
}

html[data-theme="light"]
.v20-add-pick-button {
  background:
    var(
      --v17-purple-600,
      #85389F
    );

  color:
    #FFFFFF;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
    720px
) {
  .v20-pick-menu {
    grid-template-columns:
      1fr
      1fr;
  }

  .v20-add-pick-button {
    grid-column:
      1 /
      -1;

    width:
      100%;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .v20-pick-menu {
    animation:
      none
      !important;
  }
}

/* =========================================================
   VECTORS 0.21 — PLAYBOOK ACCENTS
   Subtle football play-sheet background sketches
========================================================= */

/* =========================================================
   GLOBAL PLAYBOOK OVERLAY
========================================================= */

.page-wrap {
  position: relative;
  isolation: isolate;
}

.page-wrap::before,
.page-wrap::after {
  content: "" !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
}

.page-wrap > .page,
.page-wrap > .player-profile-page {
  position: relative;
  z-index: 1;
}

/* Top-left cluster */
.page-wrap::before {
  top: 92px !important;
  left: calc(var(--sidebar-width) + 14px) !important;
  width: 420px !important;
  height: 300px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: top left !important;
  content: "" !important;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300'>\
  <g fill='none' stroke='%23C98BDC' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' opacity='0.18'>\
    <circle cx='52' cy='44' r='11'/>\
    <line x1='45' y1='37' x2='59' y2='51'/>\
    <line x1='59' y1='37' x2='45' y2='51'/>\
    <circle cx='96' cy='56' r='11'/>\
    <line x1='89' y1='49' x2='103' y2='63'/>\
    <line x1='103' y1='49' x2='89' y2='63'/>\
    <circle cx='142' cy='45' r='11'/>\
    <line x1='135' y1='38' x2='149' y2='52'/>\
    <line x1='149' y1='38' x2='135' y2='52'/>\
    <circle cx='192' cy='58' r='11'/>\
    <line x1='185' y1='51' x2='199' y2='65'/>\
    <line x1='199' y1='51' x2='185' y2='65'/>\
    <circle cx='238' cy='44' r='11'/>\
    <line x1='231' y1='37' x2='245' y2='51'/>\
    <line x1='245' y1='37' x2='231' y2='51'/>\
    <path d='M52 55 C52 90,72 95,72 128'/>\
    <path d='M96 67 C96 105,112 112,125 133'/>\
    <path d='M142 56 C156 75,178 79,214 77'/>\
    <path d='M192 69 C215 101,235 111,262 122'/>\
    <path d='M238 55 C254 69,278 74,314 73'/>\
    <path d='M72 128 q8 -9 18 -2'/>\
    <path d='M125 133 q8 -8 18 -2'/>\
    <path d='M214 77 q10 -5 18 2'/>\
    <path d='M262 122 q8 -10 18 -2'/>\
    <path d='M314 73 q10 -5 18 2'/>\
    <circle cx='43' cy='176' r='10'/>\
    <circle cx='88' cy='188' r='10'/>\
    <circle cx='135' cy='176' r='10'/>\
    <circle cx='181' cy='188' r='10'/>\
    <circle cx='230' cy='176' r='10'/>\
    <path d='M43 166 C58 145,72 142,93 146 C114 150,124 163,136 182'/>\
    <path d='M88 198 C105 216,119 225,145 231'/>\
    <path d='M135 166 C157 137,183 134,207 143 C231 152,244 168,258 189'/>\
    <path d='M181 198 C202 220,226 230,253 236'/>\
    <path d='M230 166 C247 151,263 150,287 150 C309 150,329 156,350 173'/>\
    <path d='M350 173 q-4 -8 -14 -9'/>\
    <path d='M258 189 q-4 -8 -14 -9'/>\
  </g>\
</svg>");
}

/* Bottom-right cluster */
.page-wrap::after {
  right: 26px !important;
  bottom: 24px !important;
  width: 430px !important;
  height: 320px !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: bottom right !important;
  content: "" !important;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 320'>\
  <g fill='none' stroke='%23B86AD0' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'>\
    <circle cx='108' cy='226' r='10'/>\
    <circle cx='152' cy='214' r='10'/>\
    <circle cx='198' cy='226' r='10'/>\
    <circle cx='244' cy='214' r='10'/>\
    <circle cx='290' cy='226' r='10'/>\
    <circle cx='336' cy='214' r='10'/>\
    <path d='M108 216 C127 195,144 189,170 190 C193 191,211 201,227 222'/>\
    <path d='M152 224 C161 248,172 260,196 275'/>\
    <path d='M198 216 C219 180,260 175,292 189 C317 200,333 215,353 239'/>\
    <path d='M244 224 C259 242,278 253,306 258'/>\
    <path d='M290 216 C304 200,319 197,340 197 C362 197,380 205,398 221'/>\
    <path d='M398 221 q-6 -7 -15 -7'/>\
    <path d='M353 239 q-5 -9 -15 -8'/>\
    <path d='M196 275 q-8 -3 -14 4'/>\
    <circle cx='290' cy='80' r='11'/>\
    <line x1='283' y1='73' x2='297' y2='87'/>\
    <line x1='297' y1='73' x2='283' y2='87'/>\
    <circle cx='332' cy='60' r='11'/>\
    <line x1='325' y1='53' x2='339' y2='67'/>\
    <line x1='339' y1='53' x2='325' y2='67'/>\
    <circle cx='376' cy='78' r='11'/>\
    <line x1='369' y1='71' x2='383' y2='85'/>\
    <line x1='383' y1='71' x2='369' y2='85'/>\
    <path d='M290 91 C277 112,264 127,242 140 C222 152,204 156,184 158'/>\
    <path d='M332 71 C323 102,324 125,338 150 C352 175,376 191,409 198'/>\
    <path d='M376 91 C383 117,392 130,409 142'/>\
    <path d='M184 158 q8 -9 18 -3'/>\
    <path d='M409 198 q-6 -9 -16 -8'/>\
    <path d='M409 142 q-6 -9 -16 -8'/>\
    <path d='M38 56 C60 41,84 36,111 37 C143 39,171 48,194 63'/>\
    <path d='M194 63 C176 72,166 87,163 112'/>\
    <path d='M163 112 C159 145,171 169,197 184'/>\
    <path d='M197 184 q-5 -8 -15 -7'/>\
    <circle cx='38' cy='56' r='3' fill='%23B86AD0' stroke='none' opacity='0.16'/>\
  </g>\
</svg>");
}

/* =========================================================
   HERO PLAYBOOK ACCENT
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important, no-repeat !important;
  background-position: right 22px top 18px, left 22px bottom 18px !important;
  background-size: 290px auto, 220px auto !important;

  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 180'>\
  <g fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.085'>\
    <circle cx='42' cy='52' r='10'/>\
    <circle cx='84' cy='62' r='10'/>\
    <circle cx='128' cy='52' r='10'/>\
    <circle cx='170' cy='62' r='10'/>\
    <circle cx='214' cy='52' r='10'/>\
    <path d='M42 62 C52 82,64 92,85 97 C106 102,127 99,148 90'/>\
    <path d='M84 72 C88 103,98 120,121 136'/>\
    <path d='M128 62 C146 80,164 86,188 85 C210 84,230 78,248 66'/>\
    <path d='M170 72 C184 102,200 117,228 129'/>\
    <path d='M214 62 C227 77,243 84,268 88'/>\
    <path d='M268 88 q-5 -7 -13 -6'/>\
    <path d='M228 129 q-5 -8 -14 -7'/>\
  </g>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'>\
  <g fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'>\
    <circle cx='30' cy='84' r='9'/>\
    <line x1='24' y1='78' x2='36' y2='90'/>\
    <line x1='36' y1='78' x2='24' y2='90'/>\
    <circle cx='70' cy='70' r='9'/>\
    <line x1='64' y1='64' x2='76' y2='76'/>\
    <line x1='76' y1='64' x2='64' y2='76'/>\
    <circle cx='112' cy='84' r='9'/>\
    <line x1='106' y1='78' x2='118' y2='90'/>\
    <line x1='118' y1='78' x2='106' y2='90'/>\
    <path d='M30 74 C38 54,54 46,76 44 C95 42,112 48,128 61'/>\
    <path d='M70 80 C81 100,92 111,111 121'/>\
    <path d='M112 74 C127 60,142 57,164 57 C183 57,198 62,210 72'/>\
  </g>\
</svg>");
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   OPTIONAL SUBTLE SECTION ACCENTS
========================================================= */

#page-home .page-header::before,
#page-dashboard .page-header::before,
#page-matchups .page-header::before,
#page-trades .page-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0;
  top: -2px;
  width: 110px;
  height: 34px;
  pointer-events: none;
  opacity: .58;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 34'>\
  <g fill='none' stroke='%23C98BDC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.30'>\
    <circle cx='9' cy='18' r='5'/>\
    <circle cx='31' cy='11' r='5'/>\
    <circle cx='54' cy='18' r='5'/>\
    <path d='M9 13 C18 8,23 7,31 11'/>\
    <path d='M31 16 C36 23,43 27,54 28'/>\
    <path d='M54 13 C64 6,75 5,90 8 C98 10,104 13,108 17'/>\
    <path d='M108 17 q-4 -6 -10 -5'/>\
  </g>\
</svg>");
}

/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] .page-wrap::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300'>\
  <g fill='none' stroke='%237C3B93' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'>\
    <circle cx='52' cy='44' r='11'/>\
    <line x1='45' y1='37' x2='59' y2='51'/>\
    <line x1='59' y1='37' x2='45' y2='51'/>\
    <circle cx='96' cy='56' r='11'/>\
    <line x1='89' y1='49' x2='103' y2='63'/>\
    <line x1='103' y1='49' x2='89' y2='63'/>\
    <circle cx='142' cy='45' r='11'/>\
    <line x1='135' y1='38' x2='149' y2='52'/>\
    <line x1='149' y1='38' x2='135' y2='52'/>\
    <circle cx='192' cy='58' r='11'/>\
    <line x1='185' y1='51' x2='199' y2='65'/>\
    <line x1='199' y1='51' x2='185' y2='65'/>\
    <circle cx='238' cy='44' r='11'/>\
    <line x1='231' y1='37' x2='245' y2='51'/>\
    <line x1='245' y1='37' x2='231' y2='51'/>\
    <path d='M52 55 C52 90,72 95,72 128'/>\
    <path d='M96 67 C96 105,112 112,125 133'/>\
    <path d='M142 56 C156 75,178 79,214 77'/>\
    <path d='M192 69 C215 101,235 111,262 122'/>\
    <path d='M238 55 C254 69,278 74,314 73'/>\
    <path d='M72 128 q8 -9 18 -2'/>\
    <path d='M125 133 q8 -8 18 -2'/>\
    <path d='M214 77 q10 -5 18 2'/>\
    <path d='M262 122 q8 -10 18 -2'/>\
    <path d='M314 73 q10 -5 18 2'/>\
    <circle cx='43' cy='176' r='10'/>\
    <circle cx='88' cy='188' r='10'/>\
    <circle cx='135' cy='176' r='10'/>\
    <circle cx='181' cy='188' r='10'/>\
    <circle cx='230' cy='176' r='10'/>\
    <path d='M43 166 C58 145,72 142,93 146 C114 150,124 163,136 182'/>\
    <path d='M88 198 C105 216,119 225,145 231'/>\
    <path d='M135 166 C157 137,183 134,207 143 C231 152,244 168,258 189'/>\
    <path d='M181 198 C202 220,226 230,253 236'/>\
    <path d='M230 166 C247 151,263 150,287 150 C309 150,329 156,350 173'/>\
    <path d='M350 173 q-4 -8 -14 -9'/>\
    <path d='M258 189 q-4 -8 -14 -9'/>\
  </g>\
</svg>");
}

html[data-theme="light"] .page-wrap::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 320'>\
  <g fill='none' stroke='%237C3B93' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' opacity='0.095'>\
    <circle cx='108' cy='226' r='10'/>\
    <circle cx='152' cy='214' r='10'/>\
    <circle cx='198' cy='226' r='10'/>\
    <circle cx='244' cy='214' r='10'/>\
    <circle cx='290' cy='226' r='10'/>\
    <circle cx='336' cy='214' r='10'/>\
    <path d='M108 216 C127 195,144 189,170 190 C193 191,211 201,227 222'/>\
    <path d='M152 224 C161 248,172 260,196 275'/>\
    <path d='M198 216 C219 180,260 175,292 189 C317 200,333 215,353 239'/>\
    <path d='M244 224 C259 242,278 253,306 258'/>\
    <path d='M290 216 C304 200,319 197,340 197 C362 197,380 205,398 221'/>\
    <path d='M398 221 q-6 -7 -15 -7'/>\
    <path d='M353 239 q-5 -9 -15 -8'/>\
    <path d='M196 275 q-8 -3 -14 4'/>\
    <circle cx='290' cy='80' r='11'/>\
    <line x1='283' y1='73' x2='297' y2='87'/>\
    <line x1='297' y1='73' x2='283' y2='87'/>\
    <circle cx='332' cy='60' r='11'/>\
    <line x1='325' y1='53' x2='339' y2='67'/>\
    <line x1='339' y1='53' x2='325' y2='67'/>\
    <circle cx='376' cy='78' r='11'/>\
    <line x1='369' y1='71' x2='383' y2='85'/>\
    <line x1='383' y1='71' x2='369' y2='85'/>\
    <path d='M290 91 C277 112,264 127,242 140 C222 152,204 156,184 158'/>\
    <path d='M332 71 C323 102,324 125,338 150 C352 175,376 191,409 198'/>\
    <path d='M376 91 C383 117,392 130,409 142'/>\
    <path d='M184 158 q8 -9 18 -3'/>\
    <path d='M409 198 q-6 -9 -16 -8'/>\
    <path d='M409 142 q-6 -9 -16 -8'/>\
    <path d='M38 56 C60 41,84 36,111 37 C143 39,171 48,194 63'/>\
    <path d='M194 63 C176 72,166 87,163 112'/>\
    <path d='M163 112 C159 145,171 169,197 184'/>\
    <path d='M197 184 q-5 -8 -15 -7'/>\
  </g>\
</svg>");
}

html[data-theme="light"] .hero::before {
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 290 180'>\
  <g fill='none' stroke='%23692E7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.07'>\
    <circle cx='42' cy='52' r='10'/>\
    <circle cx='84' cy='62' r='10'/>\
    <circle cx='128' cy='52' r='10'/>\
    <circle cx='170' cy='62' r='10'/>\
    <circle cx='214' cy='52' r='10'/>\
    <path d='M42 62 C52 82,64 92,85 97 C106 102,127 99,148 90'/>\
    <path d='M84 72 C88 103,98 120,121 136'/>\
    <path d='M128 62 C146 80,164 86,188 85 C210 84,230 78,248 66'/>\
    <path d='M170 72 C184 102,200 117,228 129'/>\
    <path d='M214 62 C227 77,243 84,268 88'/>\
    <path d='M268 88 q-5 -7 -13 -6'/>\
    <path d='M228 129 q-5 -8 -14 -7'/>\
  </g>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'>\
  <g fill='none' stroke='%23692E7E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' opacity='0.055'>\
    <circle cx='30' cy='84' r='9'/>\
    <line x1='24' y1='78' x2='36' y2='90'/>\
    <line x1='36' y1='78' x2='24' y2='90'/>\
    <circle cx='70' cy='70' r='9'/>\
    <line x1='64' y1='64' x2='76' y2='76'/>\
    <line x1='76' y1='64' x2='64' y2='76'/>\
    <circle cx='112' cy='84' r='9'/>\
    <line x1='106' y1='78' x2='118' y2='90'/>\
    <line x1='118' y1='78' x2='106' y2='90'/>\
    <path d='M30 74 C38 54,54 46,76 44 C95 42,112 48,128 61'/>\
    <path d='M70 80 C81 100,92 111,111 121'/>\
    <path d='M112 74 C127 60,142 57,164 57 C183 57,198 62,210 72'/>\
  </g>\
</svg>");
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1100px) {
  .page-wrap::before {
    width: 280px !important;
    height: 210px !important;
    top: 84px !important;
    left: calc(var(--sidebar-width) + 8px) !important;
    opacity: .85 !important;
  }

  .page-wrap::after {
    width: 290px !important;
    height: 220px !important;
    right: 12px !important;
    bottom: 12px !important;
    opacity: .82 !important;
  }

  .hero::before {
    background-size: 210px auto, 160px auto !important;
  }
}

@media (max-width: 720px) {
  .page-wrap::before,
  .page-wrap::after {
    display: none !important;
  }

  .hero::before {
    background-size: 170px auto, 120px auto !important;
    background-position: right 8px top 12px, left 8px bottom 12px !important;
  }

  #page-home .page-header::before,
  #page-dashboard .page-header::before,
  #page-matchups .page-header::before,
  #page-trades .page-header::before {
    display: none !important;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .page-wrap::before,
  .page-wrap::after,
  .hero::before {
    animation: none !important;
  }
}

/* =========================================================
   VECTORS 0.22 — CHALK PLAYBOOK ACCENTS
   Refines playbook background to feel more like a chalkboard sketch
========================================================= */

/* =========================================================
   CHALK PLAYBOOK OVERLAY
========================================================= */

.page-wrap {
  position: relative;
  isolation: isolate;
}

.page-wrap::before,
.page-wrap::after {
  content: "" !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  opacity: 1 !important;
}

.page-wrap > .page,
.page-wrap > .player-profile-page {
  position: relative;
  z-index: 1;
}

/* Top-left chalk play sketch */
.page-wrap::before {
  top: 96px !important;
  left: calc(var(--sidebar-width) + 18px) !important;
  width: 360px !important;
  height: 250px !important;
  background-position: top left !important;
  filter: blur(.15px);
  animation: v22-chalk-float-a 18s ease-in-out infinite alternate;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 250'>\
  <g fill='none' stroke='%23F8F6FB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.11'>\
    <circle cx='48' cy='112' r='10'/>\
    <circle cx='82' cy='112' r='10'/>\
    <circle cx='116' cy='112' r='10'/>\
    <circle cx='186' cy='112' r='10'/>\
    <circle cx='220' cy='112' r='10'/>\
    <circle cx='294' cy='112' r='10'/>\
    <path d='M38 72 l18 18 M56 72 l-18 18'/>\
    <path d='M78 58 l18 18 M96 58 l-18 18'/>\
    <path d='M120 70 l18 18 M138 70 l-18 18'/>\
    <path d='M166 56 l18 18 M184 56 l-18 18'/>\
    <path d='M206 70 l18 18 M224 70 l-18 18'/>\
    <path d='M248 58 l18 18 M266 58 l-18 18'/>\
    <path d='M284 72 l18 18 M302 72 l-18 18'/>\
    <path d='M48 102 C34 83,32 68,37 46'/>\
    <path d='M37 46 q6 4 11 0'/>\
    <path d='M82 122 C60 148,45 156,21 160'/>\
    <path d='M21 160 q6 -7 5 -14'/>\
    <path d='M116 102 C133 84,154 79,184 78'/>\
    <path d='M184 78 q-7 5 -7 12'/>\
    <path d='M186 122 C201 147,219 162,250 171'/>\
    <path d='M250 171 q-7 -6 -7 -13'/>\
    <path d='M220 102 C239 79,264 71,303 69'/>\
    <path d='M303 69 q-7 6 -7 13'/>\
    <path d='M294 102 C309 82,319 62,319 35'/>\
    <path d='M319 35 q-8 4 -14 -1'/>\
    <ellipse cx='144' cy='180' rx='11' ry='6' transform='rotate(-22 144 180)'/>\
    <path d='M136 180 C120 175,104 168,86 155'/>\
    <path d='M86 155 C79 150,72 143,65 132' stroke-dasharray='4 6'/>\
  </g>\
</svg>");
}

/* Bottom-right chalk play + football motion */
.page-wrap::after {
  right: 24px !important;
  bottom: 22px !important;
  width: 380px !important;
  height: 270px !important;
  background-position: bottom right !important;
  filter: blur(.15px);
  animation: v22-chalk-float-b 22s ease-in-out infinite alternate;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 270'>\
  <g fill='none' stroke='%23EADCF3' stroke-width='2.45' stroke-linecap='round' stroke-linejoin='round' opacity='0.10'>\
    <circle cx='92' cy='154' r='10'/>\
    <circle cx='126' cy='154' r='10'/>\
    <circle cx='160' cy='154' r='10'/>\
    <circle cx='232' cy='154' r='10'/>\
    <circle cx='266' cy='154' r='10'/>\
    <circle cx='320' cy='154' r='10'/>\
    <path d='M72 116 l18 18 M90 116 l-18 18'/>\
    <path d='M114 100 l18 18 M132 100 l-18 18'/>\
    <path d='M158 114 l18 18 M176 114 l-18 18'/>\
    <path d='M214 100 l18 18 M232 100 l-18 18'/>\
    <path d='M256 114 l18 18 M274 114 l-18 18'/>\
    <path d='M304 100 l18 18 M322 100 l-18 18'/>\
    <path d='M92 144 C78 126,72 109,73 84'/>\
    <path d='M73 84 q7 5 13 0'/>\
    <path d='M126 164 C112 188,93 201,62 210'/>\
    <path d='M62 210 q8 -5 8 -12'/>\
    <path d='M160 144 C184 126,212 121,250 122'/>\
    <path d='M250 122 q-6 5 -6 12'/>\
    <path d='M232 164 C247 191,268 207,302 218'/>\
    <path d='M302 218 q-7 -6 -8 -13'/>\
    <path d='M266 144 C279 124,298 114,332 106'/>\
    <path d='M332 106 q-7 6 -9 12'/>\
    <path d='M320 144 C336 125,347 101,352 71'/>\
    <path d='M352 71 q-8 4 -13 -2'/>\
    <ellipse cx='228' cy='52' rx='12' ry='6.8' transform='rotate(-28 228 52)'/>\
    <path d='M221 52 l4 0 M227 52 l4 0 M233 52 l4 0'/>\
    <path d='M210 66 C192 84,178 98,160 120' stroke-dasharray='4 7'/>\
    <ellipse cx='86' cy='34' rx='12' ry='6.8' transform='rotate(20 86 34)'/>\
    <path d='M79 34 l4 0 M85 34 l4 0 M91 34 l4 0'/>\
    <path d='M98 44 C120 58,136 72,150 92' stroke-dasharray='4 7'/>\
  </g>\
</svg>");
}

/* =========================================================
   HERO-LEVEL ACCENTS
========================================================= */

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important, no-repeat !important;
  background-position: right 22px top 18px, left 22px bottom 18px !important;
  background-size: 240px auto, 170px auto !important;
  animation: v22-hero-chalk 20s ease-in-out infinite alternate;

  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 150'>\
  <g fill='none' stroke='%23FFFFFF' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' opacity='0.072'>\
    <circle cx='36' cy='88' r='9'/>\
    <circle cx='68' cy='88' r='9'/>\
    <circle cx='100' cy='88' r='9'/>\
    <path d='M26 52 l16 16 M42 52 l-16 16'/>\
    <path d='M62 36 l16 16 M78 36 l-16 16'/>\
    <path d='M100 52 l16 16 M116 52 l-16 16'/>\
    <path d='M36 79 C27 60,26 47,30 29'/>\
    <path d='M30 29 q5 4 10 1'/>\
    <path d='M68 97 C86 112,104 118,133 120'/>\
    <path d='M133 120 q-6 -5 -7 -11'/>\
    <path d='M100 79 C123 61,149 53,182 52'/>\
    <path d='M182 52 q-7 5 -7 10'/>\
    <ellipse cx='202' cy='95' rx='11' ry='6.2' transform='rotate(-28 202 95)'/>\
    <path d='M194 95 l4 0 M200 95 l4 0 M206 95 l4 0'/>\
    <path d='M186 88 C170 78,154 67,138 52' stroke-dasharray='4 7'/>\
  </g>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120'>\
  <g fill='none' stroke='%23FFFFFF' stroke-width='1.95' stroke-linecap='round' stroke-linejoin='round' opacity='0.05'>\
    <circle cx='30' cy='76' r='8'/>\
    <line x1='24' y1='70' x2='36' y2='82'/>\
    <line x1='36' y1='70' x2='24' y2='82'/>\
    <circle cx='64' cy='62' r='8'/>\
    <line x1='58' y1='56' x2='70' y2='68'/>\
    <line x1='70' y1='56' x2='58' y2='68'/>\
    <path d='M30 68 C40 54,52 47,70 44 C88 42,103 44,122 52'/>\
    <path d='M64 70 C76 86,92 96,114 101'/>\
  </g>\
</svg>");
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   SECTION HEADER MINI ACCENT
========================================================= */

#page-home .page-header::before,
#page-dashboard .page-header::before,
#page-matchups .page-header::before,
#page-trades .page-header::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 0;
  top: 2px;
  width: 86px;
  height: 28px;
  pointer-events: none;
  opacity: .42;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 28'>\
  <g fill='none' stroke='%23D7A3E7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.26'>\
    <circle cx='8' cy='16' r='4'/>\
    <circle cx='28' cy='9' r='4'/>\
    <path d='M8 12 C15 8,21 7,28 9'/>\
    <path d='M28 13 C37 20,45 23,57 23'/>\
    <path d='M57 23 q-5 -5 -5 -9'/>\
  </g>\
</svg>");
}

/* =========================================================
   CHALK MOTION
========================================================= */

@keyframes v22-chalk-float-a {
  from {
    transform: translate3d(0, 0, 0);
    opacity: .96;
  }
  to {
    transform: translate3d(8px, 5px, 0);
    opacity: 1;
  }
}

@keyframes v22-chalk-float-b {
  from {
    transform: translate3d(0, 0, 0);
    opacity: .94;
  }
  to {
    transform: translate3d(-8px, -6px, 0);
    opacity: 1;
  }
}

@keyframes v22-hero-chalk {
  from {
    background-position: right 22px top 18px, left 22px bottom 18px;
  }
  to {
    background-position: right 30px top 14px, left 16px bottom 22px;
  }
}

/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] .page-wrap::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 250'>\
  <g fill='none' stroke='%236A2F7D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.082'>\
    <circle cx='48' cy='112' r='10'/>\
    <circle cx='82' cy='112' r='10'/>\
    <circle cx='116' cy='112' r='10'/>\
    <circle cx='186' cy='112' r='10'/>\
    <circle cx='220' cy='112' r='10'/>\
    <circle cx='294' cy='112' r='10'/>\
    <path d='M38 72 l18 18 M56 72 l-18 18'/>\
    <path d='M78 58 l18 18 M96 58 l-18 18'/>\
    <path d='M120 70 l18 18 M138 70 l-18 18'/>\
    <path d='M166 56 l18 18 M184 56 l-18 18'/>\
    <path d='M206 70 l18 18 M224 70 l-18 18'/>\
    <path d='M248 58 l18 18 M266 58 l-18 18'/>\
    <path d='M284 72 l18 18 M302 72 l-18 18'/>\
    <path d='M48 102 C34 83,32 68,37 46'/>\
    <path d='M37 46 q6 4 11 0'/>\
    <path d='M82 122 C60 148,45 156,21 160'/>\
    <path d='M21 160 q6 -7 5 -14'/>\
    <path d='M116 102 C133 84,154 79,184 78'/>\
    <path d='M184 78 q-7 5 -7 12'/>\
    <path d='M186 122 C201 147,219 162,250 171'/>\
    <path d='M250 171 q-7 -6 -7 -13'/>\
    <path d='M220 102 C239 79,264 71,303 69'/>\
    <path d='M303 69 q-7 6 -7 13'/>\
    <path d='M294 102 C309 82,319 62,319 35'/>\
    <path d='M319 35 q-8 4 -14 -1'/>\
    <ellipse cx='144' cy='180' rx='11' ry='6' transform='rotate(-22 144 180)'/>\
    <path d='M136 180 C120 175,104 168,86 155'/>\
    <path d='M86 155 C79 150,72 143,65 132' stroke-dasharray='4 6'/>\
  </g>\
</svg>");
}

html[data-theme="light"] .page-wrap::after {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 270'>\
  <g fill='none' stroke='%236A2F7D' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round' opacity='0.075'>\
    <circle cx='92' cy='154' r='10'/>\
    <circle cx='126' cy='154' r='10'/>\
    <circle cx='160' cy='154' r='10'/>\
    <circle cx='232' cy='154' r='10'/>\
    <circle cx='266' cy='154' r='10'/>\
    <circle cx='320' cy='154' r='10'/>\
    <path d='M72 116 l18 18 M90 116 l-18 18'/>\
    <path d='M114 100 l18 18 M132 100 l-18 18'/>\
    <path d='M158 114 l18 18 M176 114 l-18 18'/>\
    <path d='M214 100 l18 18 M232 100 l-18 18'/>\
    <path d='M256 114 l18 18 M274 114 l-18 18'/>\
    <path d='M304 100 l18 18 M322 100 l-18 18'/>\
    <path d='M92 144 C78 126,72 109,73 84'/>\
    <path d='M73 84 q7 5 13 0'/>\
    <path d='M126 164 C112 188,93 201,62 210'/>\
    <path d='M62 210 q8 -5 8 -12'/>\
    <path d='M160 144 C184 126,212 121,250 122'/>\
    <path d='M250 122 q-6 5 -6 12'/>\
    <path d='M232 164 C247 191,268 207,302 218'/>\
    <path d='M302 218 q-7 -6 -8 -13'/>\
    <path d='M266 144 C279 124,298 114,332 106'/>\
    <path d='M332 106 q-7 6 -9 12'/>\
    <path d='M320 144 C336 125,347 101,352 71'/>\
    <path d='M352 71 q-8 4 -13 -2'/>\
    <ellipse cx='228' cy='52' rx='12' ry='6.8' transform='rotate(-28 228 52)'/>\
    <path d='M221 52 l4 0 M227 52 l4 0 M233 52 l4 0'/>\
    <path d='M210 66 C192 84,178 98,160 120' stroke-dasharray='4 7'/>\
    <ellipse cx='86' cy='34' rx='12' ry='6.8' transform='rotate(20 86 34)'/>\
    <path d='M79 34 l4 0 M85 34 l4 0 M91 34 l4 0'/>\
    <path d='M98 44 C120 58,136 72,150 92' stroke-dasharray='4 7'/>\
  </g>\
</svg>");
}

html[data-theme="light"] .hero::before {
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 150'>\
  <g fill='none' stroke='%23692E7E' stroke-width='2.05' stroke-linecap='round' stroke-linejoin='round' opacity='0.055'>\
    <circle cx='36' cy='88' r='9'/>\
    <circle cx='68' cy='88' r='9'/>\
    <circle cx='100' cy='88' r='9'/>\
    <path d='M26 52 l16 16 M42 52 l-16 16'/>\
    <path d='M62 36 l16 16 M78 36 l-16 16'/>\
    <path d='M100 52 l16 16 M116 52 l-16 16'/>\
    <path d='M36 79 C27 60,26 47,30 29'/>\
    <path d='M30 29 q5 4 10 1'/>\
    <path d='M68 97 C86 112,104 118,133 120'/>\
    <path d='M133 120 q-6 -5 -7 -11'/>\
    <path d='M100 79 C123 61,149 53,182 52'/>\
    <path d='M182 52 q-7 5 -7 10'/>\
    <ellipse cx='202' cy='95' rx='11' ry='6.2' transform='rotate(-28 202 95)'/>\
    <path d='M194 95 l4 0 M200 95 l4 0 M206 95 l4 0'/>\
    <path d='M186 88 C170 78,154 67,138 52' stroke-dasharray='4 7'/>\
  </g>\
</svg>"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 120'>\
  <g fill='none' stroke='%23692E7E' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' opacity='0.04'>\
    <circle cx='30' cy='76' r='8'/>\
    <line x1='24' y1='70' x2='36' y2='82'/>\
    <line x1='36' y1='70' x2='24' y2='82'/>\
    <circle cx='64' cy='62' r='8'/>\
    <line x1='58' y1='56' x2='70' y2='68'/>\
    <line x1='70' y1='56' x2='58' y2='68'/>\
    <path d='M30 68 C40 54,52 47,70 44 C88 42,103 44,122 52'/>\
    <path d='M64 70 C76 86,92 96,114 101'/>\
  </g>\
</svg>");
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {
  .page-wrap::before {
    width: 270px !important;
    height: 190px !important;
    top: 88px !important;
    left: calc(var(--sidebar-width) + 8px) !important;
    opacity: .92 !important;
  }

  .page-wrap::after {
    width: 290px !important;
    height: 205px !important;
    right: 12px !important;
    bottom: 10px !important;
    opacity: .88 !important;
  }

  .hero::before {
    background-size: 190px auto, 130px auto !important;
    background-position: right 12px top 12px, left 12px bottom 10px !important;
  }
}

@media (max-width: 720px) {
  .page-wrap::before,
  .page-wrap::after {
    display: none !important;
  }

  .hero::before {
    background-size: 145px auto, 105px auto !important;
    background-position: right 8px top 10px, left 8px bottom 10px !important;
  }

  #page-home .page-header::before,
  #page-dashboard .page-header::before,
  #page-matchups .page-header::before,
  #page-trades .page-header::before {
    display: none !important;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .page-wrap::before,
  .page-wrap::after,
  .hero::before {
    animation: none !important;
  }
}

/* VECTORS 0.23 — WEEKLY INSIGHT RECOMPOSE */

/* =========================================================
   REMOVE ALL PLAYBOOK / CHALK ACCENTS
========================================================= */

.page-wrap::before,
.page-wrap::after,
.hero::before,
.hero::after,
#page-home
.page-header::before,
#page-dashboard
.page-header::before,
#page-matchups
.page-header::before,
#page-trades
.page-header::before,
.v16-ambient-layer,
.v16-orbit,
.v16-vector-line,
.v16-kinetic-mark {
  display:
    none
    !important;

  content:
    none
    !important;

  background-image:
    none
    !important;

  animation:
    none
    !important;
}


/* =========================================================
   WEEKLY INSIGHT HEADER
========================================================= */

#page-dashboard
.v23-weekly-header {
  display:
    grid
    !important;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    12px
    18px;

  align-items:
    end;

  margin-bottom:
    12px;

  padding-top:
    2px;
}

#page-dashboard
.v23-weekly-header
> div:first-child {
  min-width:
    0;
}

#page-dashboard
.v23-weekly-header
> .week-control {
  align-self:
    center;
}

.v23-weekly-context {
  grid-column:
    1 /
    -1;

  display:
    grid;

  grid-template-columns:
    minmax(
      230px,
      1.35fr
    )

    minmax(
      330px,
      .95fr
    )

    minmax(
      170px,
      .5fr
    );

  gap:
    8px;

  align-items:
    stretch;

  padding:
    8px;

  border:
    1px
    solid
    rgba(
      182,
      92,
      207,
      .19
    );

  border-radius:
    14px;

  background:
    linear-gradient(
      100deg,

      rgba(
        158,
        64,
        186,
        .08
      ),

      rgba(
        158,
        64,
        186,
        .018
      )
      46%,

      transparent
    ),

    var(--panel);

  box-shadow:
    0
    12px
    30px
    rgba(
      0,
      0,
      0,
      .14
    );

  animation:
    v23Context
    .42s
    cubic-bezier(
      .16,
      1,
      .3,
      1
    )
    both;
}

@keyframes v23Context {
  from {
    opacity:
      0;

    transform:
      translateY(
        7px
      );
  }

  to {
    opacity:
      1;

    transform:
      none;
  }
}

.v23-context-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    7px
    9px;
}

.v23-context-copy
> span {
  color:
    var(--purple-light);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .09em;
}

.v23-context-copy
> strong {
  margin-top:
    4px;

  color:
    #fff;

  font-size:
    11px;

  line-height:
    1.4;
}

.v23-context-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    5px;
}

.v23-context-metric {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    7px
    8px;

  border:
    1px
    solid
    var(--border);

  border-radius:
    10px;

  background:
    var(--panel-soft);
}

.v23-context-metric
small,

.v23-context-scoring
small {
  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;
}

.v23-context-metric
strong {
  margin-top:
    3px;

  color:
    #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size:
    17px;

  letter-spacing:
    -.04em;
}

.v23-context-metric
.positive
strong {
  color:
    #73E5A0;
}

.v23-context-metric
.negative
strong {
  color:
    #FF7D8D;
}

.v23-context-scoring {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    7px
    10px;

  border-left:
    1px
    solid
    var(--border);
}

.v23-context-scoring
strong {
  margin-top:
    3px;

  color:
    #fff;

  font-size:
    10px;
}

.v23-context-scoring
span {
  width:
    fit-content;

  margin-top:
    5px;

  padding:
    3px
    6px;

  border-radius:
    999px;

  background:
    rgba(
      158,
      64,
      186,
      .14
    );

  color:
    var(--purple-light);

  font-size:
    7px;

  font-weight:
    900;
}


/* =========================================================
   LIVE MATCHUP
========================================================= */

.v23-live-matchup-card {
  overflow:
    hidden
    !important;

  border-color:
    rgba(
      182,
      92,
      207,
      .24
    )
    !important;

  background:
    linear-gradient(
      145deg,

      rgba(
        158,
        64,
        186,
        .045
      ),

      transparent
      48%
    ),

    var(--panel)
    !important;
}

.v23-live-matchup-card
> .card-header {
  min-height:
    50px;

  background:
    linear-gradient(
      90deg,

      rgba(
        158,
        64,
        186,
        .13
      ),

      rgba(
        158,
        64,
        186,
        .035
      )
      58%,

      transparent
    )
    !important;
}

.v23-live-matchup-card
#dashLive {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    4px
    7px;

  border:
    1px
    solid
    rgba(
      85,
      215,
      143,
      .26
    );

  border-radius:
    999px;

  background:
    rgba(
      85,
      215,
      143,
      .08
    );

  color:
    #67DB93
    !important;

  font-size:
    7px;

  font-weight:
    900;
}

.v23-live-matchup-card
#dashLive::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #55D78F;

  animation:
    v23Live
    1.7s
    ease-out
    infinite;
}

@keyframes v23Live {
  0% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        85,
        215,
        143,
        .32
      );
  }

  70% {
    box-shadow:
      0
      0
      0
      7px
      rgba(
        85,
        215,
        143,
        0
      );
  }

  100% {
    box-shadow:
      0
      0
      0
      0
      rgba(
        85,
        215,
        143,
        0
      );
  }
}

.v23-live-matchup-body {
  padding:
    11px
    !important;
}

.v23-matchup-stage {
  position:
    relative;

  display:
    grid
    !important;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    34px
    minmax(
      0,
      1fr
    );

  gap:
    8px
    !important;

  align-items:
    stretch;
}

.v23-matchup-team {
  min-width:
    0;

  display:
    grid
    !important;

  grid-template-columns:
    58px
    minmax(
      0,
      1fr
    );

  grid-template-rows:
    auto
    auto;

  gap:
    4px
    9px
    !important;

  align-items:
    center
    !important;

  padding:
    11px
    !important;

  border:
    1px
    solid
    var(--border)
    !important;

  border-radius:
    12px
    !important;

  background:
    var(--panel-soft)
    !important;

  box-shadow:
    none
    !important;

  transform:
    none
    !important;
}

.v23-matchup-team:hover {
  transform:
    translateY(
      -2px
    )
    !important;

  border-color:
    rgba(
      182,
      92,
      207,
      .30
    )
    !important;
}

.v23-matchup-you {
  background:
    linear-gradient(
      135deg,

      rgba(
        158,
        64,
        186,
        .105
      ),

      transparent
      60%
    ),

    var(--panel-soft)
    !important;
}

.v23-matchup-opponent {
  background:
    linear-gradient(
      225deg,

      rgba(
        158,
        64,
        186,
        .065
      ),

      transparent
      60%
    ),

    var(--panel-soft)
    !important;
}

.v23-matchup-team
.matchup-team-avatar {
  grid-row:
    1 /
    3;

  width:
    58px
    !important;

  height:
    58px
    !important;

  min-width:
    58px
    !important;

  border-radius:
    12px
    !important;

  box-shadow:
    0
    8px
    20px
    rgba(
      0,
      0,
      0,
      .20
    );
}

.v23-matchup-team
> div:not(
  .matchup-team-avatar
) {
  min-width:
    0;
}

.v23-matchup-team
strong {
  color:
    #fff
    !important;

  font-size:
    11px
    !important;

  line-height:
    1.2;
}

.v23-matchup-team
span.muted,

.v23-matchup-team
small,

.v23-matchup-team
.muted {
  color:
    var(--muted)
    !important;

  font-size:
    8px
    !important;
}

.v23-matchup-team
.matchup-score {
  grid-column:
    2;

  margin:
    0
    !important;

  align-self:
    end;

  color:
    #fff
    !important;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size:
    clamp(
      27px,
      3vw,
      38px
    )
    !important;

  line-height:
    .95;

  font-weight:
    800;

  letter-spacing:
    -.055em;
}

.v23-matchup-vs {
  align-self:
    center;

  justify-self:
    center;

  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(
      182,
      92,
      207,
      .25
    );

  border-radius:
    50%;

  background:
    var(--panel);

  color:
    var(--purple-light);

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .08em;
}

.v23-projected-finish {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  margin-top:
    8px;

  padding:
    7px
    9px;

  border-top:
    1px
    solid
    var(--border);
}

.v23-projected-finish
> span {
  display:
    flex;

  align-items:
    baseline;

  gap:
    7px;
}

.v23-projected-finish
small {
  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    800;

  text-transform:
    uppercase;
}

.v23-projected-finish
strong {
  color:
    #fff;

  font-size:
    10px;
}

.v23-projected-finish
.positive
strong {
  color:
    #73E5A0;
}

.v23-projected-finish
.negative
strong {
  color:
    #FF7D8D;
}


/* =========================================================
   STRENGTHS GREEN / WEAKNESSES RED
========================================================= */

#page-dashboard
.grounded-insight.good,

#page-dashboard
.v09-outlook-panel.good,

#page-dashboard
.v09-outlook-item.good,

#page-dashboard
.v23-strength-card
.grounded-insight,

#page-dashboard
.v23-roster-outlook-card
.good {
  border-color:
    rgba(
      85,
      215,
      143,
      .25
    )
    !important;

  background:
    linear-gradient(
      90deg,

      rgba(
        85,
        215,
        143,
        .10
      ),

      rgba(
        85,
        215,
        143,
        .025
      )
      62%
    ),

    var(--panel-soft)
    !important;

  box-shadow:
    inset
    3px
    0
    0
    #55D78F
    !important;
}

#page-dashboard
.grounded-insight.good
.grounded-icon,

#page-dashboard
.v09-outlook-panel.good
.v09-outlook-icon,

#page-dashboard
.v09-outlook-item.good
.v09-outlook-icon,

#page-dashboard
.v23-strength-card
.grounded-icon {
  background:
    rgba(
      85,
      215,
      143,
      .13
    )
    !important;

  color:
    #73E5A0
    !important;
}

#page-dashboard
.grounded-insight.bad,

#page-dashboard
.v09-outlook-panel.bad,

#page-dashboard
.v09-outlook-item.bad,

#page-dashboard
.v23-weakness-card
.grounded-insight,

#page-dashboard
.v23-roster-outlook-card
.bad {
  border-color:
    rgba(
      255,
      101,
      120,
      .25
    )
    !important;

  background:
    linear-gradient(
      90deg,

      rgba(
        255,
        101,
        120,
        .09
      ),

      rgba(
        255,
        101,
        120,
        .02
      )
      62%
    ),

    var(--panel-soft)
    !important;

  box-shadow:
    inset
    3px
    0
    0
    #FF6578
    !important;
}

#page-dashboard
.grounded-insight.bad
.grounded-icon,

#page-dashboard
.v09-outlook-panel.bad
.v09-outlook-icon,

#page-dashboard
.v09-outlook-item.bad
.v09-outlook-icon,

#page-dashboard
.v23-weakness-card
.grounded-icon {
  background:
    rgba(
      255,
      101,
      120,
      .12
    )
    !important;

  color:
    #FF8998
    !important;
}

#page-dashboard
.grounded-insight.good
strong,

#page-dashboard
.v09-outlook-panel.good
strong,

#page-dashboard
.v09-outlook-item.good
strong {
  color:
    #E9FFF1
    !important;
}

#page-dashboard
.grounded-insight.bad
strong,

#page-dashboard
.v09-outlook-panel.bad
strong,

#page-dashboard
.v09-outlook-item.bad
strong {
  color:
    #FFF0F3
    !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v23-weekly-context {
  border-color:
    rgba(
      158,
      64,
      186,
      .14
    );

  background:
    linear-gradient(
      100deg,

      rgba(
        158,
        64,
        186,
        .045
      ),

      transparent
      46%
    ),

    #fff;

  box-shadow:
    0
    10px
    25px
    rgba(
      61,
      50,
      66,
      .07
    );
}

html[data-theme="light"]
.v23-context-copy
> strong,

html[data-theme="light"]
.v23-context-metric
strong,

html[data-theme="light"]
.v23-context-scoring
strong,

html[data-theme="light"]
.v23-matchup-team
strong,

html[data-theme="light"]
.v23-matchup-team
.matchup-score,

html[data-theme="light"]
.v23-projected-finish
strong {
  color:
    var(
      --v17-purple-700,
      #692E7E
    )
    !important;
}

html[data-theme="light"]
.v23-context-metric.positive
strong,

html[data-theme="light"]
.v23-projected-finish
.positive
strong {
  color:
    #28764A
    !important;
}

html[data-theme="light"]
.v23-context-metric.negative
strong,

html[data-theme="light"]
.v23-projected-finish
.negative
strong {
  color:
    #B83B4D
    !important;
}

html[data-theme="light"]
.v23-live-matchup-card {
  background:
    #fff
    !important;
}

html[data-theme="light"]
.v23-matchup-team {
  background:
    #F7F5F8
    !important;
}

html[data-theme="light"]
#page-dashboard
.grounded-insight.good,

html[data-theme="light"]
#page-dashboard
.v09-outlook-panel.good,

html[data-theme="light"]
#page-dashboard
.v09-outlook-item.good,

html[data-theme="light"]
#page-dashboard
.v23-strength-card
.grounded-insight,

html[data-theme="light"]
#page-dashboard
.v23-roster-outlook-card
.good {
  background:
    rgba(
      61,
      153,
      96,
      .065
    )
    !important;

  border-color:
    rgba(
      61,
      153,
      96,
      .20
    )
    !important;
}

html[data-theme="light"]
#page-dashboard
.grounded-insight.bad,

html[data-theme="light"]
#page-dashboard
.v09-outlook-panel.bad,

html[data-theme="light"]
#page-dashboard
.v09-outlook-item.bad,

html[data-theme="light"]
#page-dashboard
.v23-weakness-card
.grounded-insight,

html[data-theme="light"]
#page-dashboard
.v23-roster-outlook-card
.bad {
  background:
    rgba(
      197,
      61,
      79,
      .055
    )
    !important;

  border-color:
    rgba(
      197,
      61,
      79,
      .18
    )
    !important;
}

html[data-theme="light"]
#page-dashboard
.grounded-insight.good
strong,

html[data-theme="light"]
#page-dashboard
.v09-outlook-panel.good
strong,

html[data-theme="light"]
#page-dashboard
.v09-outlook-item.good
strong {
  color:
    #246B43
    !important;
}

html[data-theme="light"]
#page-dashboard
.grounded-insight.bad
strong,

html[data-theme="light"]
#page-dashboard
.v09-outlook-panel.bad
strong,

html[data-theme="light"]
#page-dashboard
.v09-outlook-item.bad
strong {
  color:
    #A93143
    !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1100px
) {
  .v23-weekly-context {
    grid-template-columns:
      1fr
      1fr;
  }

  .v23-context-copy {
    grid-column:
      1 /
      -1;
  }

  .v23-context-scoring {
    border-left:
      0;
  }
}

@media (
  max-width:
    760px
) {
  #page-dashboard
  .v23-weekly-header {
    grid-template-columns:
      1fr;

    align-items:
      stretch;
  }

  #page-dashboard
  .v23-weekly-header
  > .week-control {
    justify-self:
      start;
  }

  .v23-weekly-context {
    grid-template-columns:
      1fr;
  }

  .v23-context-copy {
    grid-column:
      auto;
  }

  .v23-context-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .v23-context-scoring {
    border-left:
      0;

    border-top:
      1px
      solid
      var(--border);
  }

  .v23-matchup-stage {
    grid-template-columns:
      1fr;
  }

  .v23-projected-finish {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

@media (
  max-width:
    520px
) {
  .v23-context-metrics {
    grid-template-columns:
      1fr;
  }
}

/* VECTORS 0.24 — INSIGHT GRID REFINEMENT */


/* =========================================================
   MAIN WEEKLY INSIGHT GRID
========================================================= */

.v24-insight-primary-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )

    minmax(
      0,
      1fr
    );

  gap:
    12px;

  align-items:
    stretch;

  margin-top:
    12px;
}

.v24-insight-left-column {
  min-width:
    0;

  display:
    grid;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    );

  gap:
    12px;
}

.v24-insight-right-column {
  min-width:
    0;

  display:
    flex;
}

.v24-outlook-card {
  width:
    100%;

  height:
    100%;
}

.v24-actions-card {
  height:
    100%;
}


/* =========================================================
   COMPACT LIVE MATCHUP
========================================================= */

.v24-compact-live-card {
  min-height:
    0
    !important;

  height:
    auto
    !important;
}

.v24-compact-live-card
> .card-header {
  min-height:
    42px
    !important;

  padding:
    8px
    11px
    !important;
}

.v24-compact-live-card
.card-title {
  font-size:
    13px
    !important;
}

.v24-compact-live-card
.v23-live-matchup-body {
  padding:
    8px
    9px
    7px
    !important;
}

.v24-compact-live-card
.v23-matchup-stage {
  grid-template-columns:
    minmax(
      0,
      1fr
    )

    26px

    minmax(
      0,
      1fr
    );

  gap:
    6px
    !important;
}


/* =========================================================
   MATCHUP TEAM
========================================================= */

.v24-compact-live-card
.v23-matchup-team {
  grid-template-columns:
    46px
    minmax(
      0,
      1fr
    )
    auto
    !important;

  grid-template-rows:
    auto
    auto
    !important;

  column-gap:
    8px
    !important;

  row-gap:
    1px
    !important;

  min-height:
    61px;

  padding:
    7px
    8px
    !important;

  border-radius:
    10px
    !important;
}

.v24-compact-live-card
.v23-matchup-team
.matchup-team-avatar {
  grid-column:
    1;

  grid-row:
    1 /
    3;

  width:
    46px
    !important;

  height:
    46px
    !important;

  min-width:
    46px
    !important;

  border-radius:
    10px
    !important;
}

.v24-compact-live-card
.v23-matchup-team
> div:not(
  .matchup-team-avatar
):not(
  .matchup-score
) {
  grid-column:
    2;

  grid-row:
    1 /
    3;

  align-self:
    center;
}

.v24-compact-live-card
.v23-matchup-team
strong {
  font-size:
    10px
    !important;
}

.v24-compact-live-card
.v23-matchup-team
span,
.v24-compact-live-card
.v23-matchup-team
small,
.v24-compact-live-card
.v23-matchup-team
.muted {
  font-size:
    7px
    !important;
}

.v24-compact-live-card
.v23-matchup-team
.matchup-score {
  grid-column:
    3
    !important;

  grid-row:
    1 /
    3
    !important;

  align-self:
    center
    !important;

  justify-self:
    end;

  margin:
    0
    !important;

  font-size:
    clamp(
      23px,
      2.3vw,
      30px
    )
    !important;
}


/* =========================================================
   VS MARKER
========================================================= */

.v24-compact-live-card
.v23-matchup-vs {
  width:
    24px;

  height:
    24px;

  font-size:
    6px;
}


/* =========================================================
   PROJECTED FINISH ROW
========================================================= */

.v24-compact-live-card
.v23-projected-finish {
  min-height:
    30px;

  margin-top:
    5px;

  padding:
    5px
    6px
    0
    !important;
}

.v24-compact-live-card
.v23-projected-finish
small {
  font-size:
    6px;
}

.v24-compact-live-card
.v23-projected-finish
strong {
  font-size:
    9px;
}


/* =========================================================
   LIVE INDICATOR
========================================================= */

.v24-compact-live-card
#dashLive {
  padding:
    3px
    6px;

  font-size:
    6px;
}

.v24-compact-live-card
#dashLive::before {
  width:
    5px;

  height:
    5px;
}


/* =========================================================
   ACTIONABLE RECOMMENDATIONS
========================================================= */

.v24-actions-card {
  display:
    flex;

  flex-direction:
    column;
}

.v24-actions-card
> .card-header {
  flex:
    0
    0
    auto;
}

.v24-actions-card
> .card-body {
  flex:
    1;

  display:
    grid;

  align-content:
    start;

  gap:
    6px;

  padding:
    10px
    !important;
}

.v24-actions-card
.recommendation-card {
  min-height:
    0;

  padding:
    8px
    9px;

  border-radius:
    9px;
}

.v24-actions-card
.recommendation-card
.pill {
  margin-bottom:
    4px;
}

.v24-actions-card
.recommendation-card
strong {
  font-size:
    9px;
}

.v24-actions-card
.recommendation-card
p {
  margin-top:
    2px;

  font-size:
    8px;

  line-height:
    1.4;
}


/* =========================================================
   ROSTER OUTLOOK
========================================================= */

.v24-outlook-card {
  display:
    flex;

  flex-direction:
    column;
}

.v24-outlook-card
> .card-body {
  flex:
    1;
}

.v24-generated-outlook-card
.v24-outlook-body {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    12px;
}

.v24-outlook-section {
  min-width:
    0;
}

.v24-outlook-section
+ .v24-outlook-section {
  padding-top:
    11px;

  border-top:
    1px
    solid
    var(--border);
}

.v24-outlook-label {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    7px;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .07em;

  text-transform:
    uppercase;
}

.v24-outlook-label
> span {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;
}

.v24-outlook-section.strengths
.v24-outlook-label {
  color:
    #73E5A0;
}

.v24-outlook-section.strengths
.v24-outlook-label
> span {
  background:
    #55D78F;

  box-shadow:
    0
    0
    9px
    rgba(
      85,
      215,
      143,
      .30
    );
}

.v24-outlook-section.weaknesses
.v24-outlook-label {
  color:
    #FF8998;
}

.v24-outlook-section.weaknesses
.v24-outlook-label
> span {
  background:
    #FF6578;

  box-shadow:
    0
    0
    9px
    rgba(
      255,
      101,
      120,
      .26
    );
}


/* =========================================================
   GREEN / RED OUTLOOK REINFORCEMENT
========================================================= */

#page-dashboard
.v24-outlook-card
.good,

#page-dashboard
.v24-outlook-card
.grounded-insight.good,

#page-dashboard
.v24-outlook-card
.v09-outlook-panel.good,

#page-dashboard
.v24-outlook-card
.v09-outlook-item.good {
  border-color:
    rgba(
      85,
      215,
      143,
      .24
    )
    !important;

  background:
    linear-gradient(
      90deg,

      rgba(
        85,
        215,
        143,
        .09
      ),

      rgba(
        85,
        215,
        143,
        .02
      )
      65%
    ),

    var(--panel-soft)
    !important;

  box-shadow:
    inset
    3px
    0
    0
    #55D78F
    !important;
}

#page-dashboard
.v24-outlook-card
.bad,

#page-dashboard
.v24-outlook-card
.grounded-insight.bad,

#page-dashboard
.v24-outlook-card
.v09-outlook-panel.bad,

#page-dashboard
.v24-outlook-card
.v09-outlook-item.bad {
  border-color:
    rgba(
      255,
      101,
      120,
      .24
    )
    !important;

  background:
    linear-gradient(
      90deg,

      rgba(
        255,
        101,
        120,
        .085
      ),

      rgba(
        255,
        101,
        120,
        .018
      )
      65%
    ),

    var(--panel-soft)
    !important;

  box-shadow:
    inset
    3px
    0
    0
    #FF6578
    !important;
}


/* =========================================================
   REMOVE OLD SPACING LEFT BY MOVED CARDS
========================================================= */

#page-dashboard
.weekly-insight-grid:empty,

#page-dashboard
.grid-2:empty,

#page-dashboard
.grid-3:empty,

#page-dashboard
.v09-insight-top-grid:empty {
  display:
    none
    !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v24-compact-live-card
.v23-matchup-team {
  background:
    #F7F5F8
    !important;
}

html[data-theme="light"]
.v24-actions-card,

html[data-theme="light"]
.v24-outlook-card {
  background:
    #FFFFFF
    !important;
}

html[data-theme="light"]
.v24-outlook-section.strengths
.v24-outlook-label {
  color:
    #28764A;
}

html[data-theme="light"]
.v24-outlook-section.weaknesses
.v24-outlook-label {
  color:
    #B83B4D;
}

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.good,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.grounded-insight.good,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.v09-outlook-panel.good,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.v09-outlook-item.good {
  border-color:
    rgba(
      61,
      153,
      96,
      .20
    )
    !important;

  background:
    rgba(
      61,
      153,
      96,
      .055
    )
    !important;
}

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.bad,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.grounded-insight.bad,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.v09-outlook-panel.bad,

html[data-theme="light"]
#page-dashboard
.v24-outlook-card
.v09-outlook-item.bad {
  border-color:
    rgba(
      197,
      61,
      79,
      .18
    )
    !important;

  background:
    rgba(
      197,
      61,
      79,
      .05
    )
    !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1050px
) {
  .v24-insight-primary-grid {
    grid-template-columns:
      1fr;
  }

  .v24-insight-left-column {
    grid-template-columns:
      1fr
      1fr;

    grid-template-rows:
      auto;

    align-items:
      stretch;
  }
}

@media (
  max-width:
    760px
) {
  .v24-insight-left-column {
    grid-template-columns:
      1fr;
  }

  .v24-compact-live-card
  .v23-matchup-stage {
    grid-template-columns:
      1fr;
  }

  .v24-compact-live-card
  .v23-matchup-vs {
    margin:
      -2px
      auto;
  }
}

@media (
  max-width:
    520px
) {
  .v24-compact-live-card
  .v23-matchup-team {
    grid-template-columns:
      42px
      minmax(
        0,
        1fr
      )
      auto
      !important;
  }

  .v24-compact-live-card
  .v23-matchup-team
  .matchup-team-avatar {
    width:
      42px
      !important;

    height:
      42px
      !important;

    min-width:
      42px
      !important;
  }
}

/* VECTORS 0.25 — INSIGHT ALIGNMENT + HOVER STABILITY */


/* =========================================================
   WEEKLY INSIGHT — SHARED GRID
========================================================= */

#page-dashboard
.v25-insight-primary-grid {
  display:
    grid
    !important;

  grid-template-columns:
    minmax(
      0,
      1fr
    )

    minmax(
      0,
      1fr
    )

    !important;

  grid-template-rows:
    auto
    minmax(
      0,
      1fr
    )

    !important;

  gap:
    12px
    !important;

  align-items:
    stretch
    !important;

  margin-top:
    12px
    !important;

  margin-bottom:
    12px
    !important;
}


/* =========================================================
   LIVE MATCHUP
========================================================= */

#page-dashboard
.v25-grid-live {
  grid-column:
    1;

  grid-row:
    1;

  align-self:
    start;

  margin:
    0
    !important;
}


/* =========================================================
   ACTIONABLE RECOMMENDATIONS
========================================================= */

#page-dashboard
.v25-grid-actions {
  grid-column:
    1;

  grid-row:
    2;

  height:
    100%
    !important;

  min-height:
    0;

  margin:
    0
    !important;

  display:
    flex;

  flex-direction:
    column;
}

#page-dashboard
.v25-grid-actions
> .card-header {
  flex:
    0
    0
    auto;
}

#page-dashboard
.v25-grid-actions
> .card-body {
  flex:
    1;

  min-height:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    6px;
}


/* =========================================================
   ROSTER OUTLOOK
========================================================= */

#page-dashboard
.v25-grid-outlook {
  grid-column:
    2;

  grid-row:
    1 /
    3;

  height:
    100%
    !important;

  min-height:
    0;

  margin:
    0
    !important;

  display:
    flex;

  flex-direction:
    column;
}

#page-dashboard
.v25-grid-outlook
> .card-body {
  flex:
    1;

  min-height:
    0;
}


/* =========================================================
   REMOVE OLD NESTED WRAPPERS
========================================================= */

#page-dashboard
.v25-insight-primary-grid
> .v24-insight-left-column,

#page-dashboard
.v25-insight-primary-grid
> .v24-insight-right-column {
  display:
    none
    !important;
}


/* =========================================================
   SLEEPER LINEUP SPACING
========================================================= */

#page-dashboard
.v25-insight-primary-grid
+ .card {
  margin-top:
    0
    !important;
}


/* =========================================================
   CARD HOVER STABILITY
========================================================= */

/*
   Older visual layers moved the entire card
   several pixels on hover. That causes browser
   font rasterization to shift slightly and can
   make the text appear to judder.

   Keep the visual feedback, but don't move
   the physical card or its title.
*/

.card:hover {
  transform:
    none
    !important;
}

.card:hover
.card-title {
  transform:
    none
    !important;
}

.card.v16-lift-surface:hover,

.v16-reactive-card.card:hover,

#page-dashboard
.card:hover {
  transform:
    none
    !important;
}


/* =========================================================
   KEEP HOVER FEEDBACK WITHOUT MOVEMENT
========================================================= */

.card:hover {
  border-color:
    rgba(
      182,
      92,
      207,
      .30
    )

    !important;

  box-shadow:
    0
    22px
    52px
    rgba(
      0,
      0,
      0,
      .27
    ),

    0
    0
    0
    1px
    rgba(
      158,
      64,
      186,
      .045
    )

    !important;
}


/* =========================================================
   REMOVE POINTER-FOLLOWING CARD GLOW
========================================================= */

/*
   The older reactive glow repainted continuously
   as the cursor moved over a card. Removing it
   makes text rendering much more stable.
*/

.v16-reactive-card::after {
  opacity:
    0
    !important;

  transition:
    none
    !important;
}

.v16-reactive-card:hover::after {
  opacity:
    0
    !important;
}


/* =========================================================
   WEEKLY INSIGHT SUBCARD HOVER STABILITY
========================================================= */

#page-dashboard
.v09-outlook-panel:hover,

#page-dashboard
.v09-outlook-item:hover,

#page-dashboard
.grounded-insight:hover,

#page-dashboard
.recommendation-card:hover {
  transform:
    none
    !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.card:hover {
  box-shadow:
    0
    18px
    42px
    rgba(
      64,
      50,
      70,
      .10
    )

    !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1050px
) {
  #page-dashboard
  .v25-insight-primary-grid {
    grid-template-columns:
      1fr
      !important;

    grid-template-rows:
      auto
      auto
      auto
      !important;
  }

  #page-dashboard
  .v25-grid-live {
    grid-column:
      1;

    grid-row:
      1;
  }

  #page-dashboard
  .v25-grid-actions {
    grid-column:
      1;

    grid-row:
      2;
  }

  #page-dashboard
  .v25-grid-outlook {
    grid-column:
      1;

    grid-row:
      3;
  }
}

/* VECTORS 0.27 — LEAGUE PAGE NAVIGATION */


/* =========================================================
   MY LEAGUES HEADER
========================================================= */

#page-leagues
.page-header {
  display:
    grid
    !important;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    18px;

  align-items:
    center;
}


/* =========================================================
   OPEN LEAGUE PAGE BUTTON
========================================================= */

.v27-open-league-page {
  min-width:
    225px;

  min-height:
    54px;

  display:
    grid
    !important;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    )
    18px;

  gap:
    8px;

  align-items:
    center;

  padding:
    7px
    10px
    !important;

  border-radius:
    13px
    !important;

  text-align:
    left;

  white-space:
    normal;
}

.v27-league-page-icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .14
    );

  border-radius:
    9px;

  background:
    rgba(
      255,
      255,
      255,
      .08
    );
}

.v27-league-page-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}

.v27-league-page-copy
small {
  color:
    rgba(
      255,
      255,
      255,
      .62
    );

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .10em;
}

.v27-league-page-copy
strong {
  margin-top:
    2px;

  overflow:
    hidden;

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v27-league-page-arrow {
  display:
    inline-block;

  color:
    #fff;

  font-size:
    15px;

  font-weight:
    800;

  transition:
    transform
    .18s
    ease;
}

.v27-open-league-page:hover
.v27-league-page-arrow {
  transform:
    translateX(
      3px
    );
}


/* =========================================================
   KEEP LEAGUE DIRECTORY CARDS CLEARLY CLICKABLE
========================================================= */

.v26-league-directory-card {
  cursor:
    pointer;
}

.v26-league-directory-card
.v26-league-directory-meta
span:last-child
strong {
  color:
    var(
      --v17-purple-300,
      #CD82DD
    );
}

.v26-league-directory-card:hover
.v26-league-directory-meta
span:last-child
strong {
  color:
    #fff;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v27-league-page-icon {
  border-color:
    rgba(
      255,
      255,
      255,
      .16
    );

  background:
    rgba(
      255,
      255,
      255,
      .10
    );
}

html[data-theme="light"]
.v26-league-directory-card
.v26-league-directory-meta
span:last-child
strong {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    850px
) {
  #page-leagues
  .page-header {
    grid-template-columns:
      1fr
      !important;

    align-items:
      stretch;
  }

  .v27-open-league-page {
    width:
      100%;

    max-width:
      420px;
  }
}

/* VECTORS 0.28 — MY LEAGUES TILE DIRECTORY */

#page-leagues .page-header {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 18px;

  align-items: center;
}

/* =========================================================
   LEAGUE TILE GRID
========================================================= */

.v28-league-tile-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 12px;

  margin-top: 14px;
}

.v28-league-tile {
  position: relative;

  min-width: 0;

  min-height: 188px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 14px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(
        158,
        64,
        186,
        .045
      ),
      transparent
      46%
    ),
    var(--panel);

  color:
    var(--text);

  text-align: left;

  cursor: pointer;

  box-shadow:
    0
    14px
    34px
    rgba(
      0,
      0,
      0,
      .15
    );

  transition:
    border-color
    .2s
    ease,

    box-shadow
    .2s
    ease,

    background
    .2s
    ease;
}

.v28-league-tile::before {
  content: "";

  position: absolute;

  top: 0;

  left: 14px;

  right: 14px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        205,
        130,
        221,
        .72
      ),
      rgba(
        158,
        64,
        186,
        .42
      ),
      transparent
    );
}

.v28-league-tile:hover {
  transform:
    none
    !important;

  border-color:
    rgba(
      205,
      130,
      221,
      .34
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        158,
        64,
        186,
        .085
      ),
      transparent
      58%
    ),
    var(--panel);

  box-shadow:
    0
    19px
    42px
    rgba(
      0,
      0,
      0,
      .22
    );
}

.v28-league-tile.selected {
  border-color:
    rgba(
      205,
      130,
      221,
      .38
    );

  box-shadow:
    inset
    0
    0
    0
    1px
    rgba(
      158,
      64,
      186,
      .07
    ),

    0
    16px
    38px
    rgba(
      0,
      0,
      0,
      .18
    );
}

/* =========================================================
   LEAGUE IMAGE + IDENTITY
========================================================= */

.v28-league-tile-top {
  min-width: 0;

  display: grid;

  grid-template-columns:
    64px
    minmax(0, 1fr)
    22px;

  gap: 11px;

  align-items: center;
}

.v28-league-image {
  width: 64px;

  height: 64px;

  border-radius: 14px;

  object-fit: cover;

  box-shadow:
    0
    10px
    24px
    rgba(
      0,
      0,
      0,
      .20
    ),

    0
    0
    0
    1px
    rgba(
      255,
      255,
      255,
      .035
    );
}

.v28-league-image-fallback {
  display: grid;

  place-items: center;

  background:
    linear-gradient(
      145deg,
      var(
        --v17-purple-700,
        #692E7E
      ),
      var(
        --v17-purple-500,
        #9E40BA
      )
    );

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 23px;

  font-weight: 800;
}

.v28-league-title-block {
  min-width: 0;
}

.v28-league-kicker {
  display: flex;

  align-items: center;

  gap: 6px;
}

.v28-league-kicker
> span:first-child {
  color:
    var(--purple-light);

  font-size: 7px;

  font-weight: 900;

  letter-spacing: .08em;
}

.v28-current-pill {
  padding:
    3px
    5px;

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .13
    );

  color:
    var(
      --v17-purple-200,
      #DFA9E9
    );

  font-size:
    6px
    !important;

  font-weight: 900;

  letter-spacing:
    .05em
    !important;
}

.v28-league-title-block
h3 {
  margin:
    4px
    0
    2px;

  overflow: hidden;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 15px;

  line-height: 1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v28-league-title-block
p {
  margin: 0;

  color:
    var(--muted);

  font-size: 8px;
}

.v28-tile-arrow {
  color:
    var(
      --v17-purple-300,
      #CD82DD
    );

  font-size: 16px;

  font-weight: 900;

  transition:
    transform
    .18s
    ease;
}

.v28-league-tile:hover
.v28-tile-arrow {
  transform:
    translateX(
      3px
    );
}

/* =========================================================
   SCORING SETTINGS
========================================================= */

.v28-scoring-badges {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 16px;
}

.v28-scoring-badges
span {
  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding:
    0
    7px;

  border:
    1px
    solid
    rgba(
      182,
      92,
      207,
      .19
    );

  border-radius: 999px;

  background:
    rgba(
      158,
      64,
      186,
      .065
    );

  color:
    var(
      --v17-purple-200,
      #DFA9E9
    );

  font-size: 7px;

  font-weight: 850;
}

/* =========================================================
   TILE FOOTER
========================================================= */

.v28-league-tile-footer {
  display: flex;

  justify-content:
    space-between;

  gap: 8px;

  margin-top: 16px;

  padding-top: 9px;

  border-top:
    1px
    solid
    var(--border);
}

.v28-league-tile-footer
span:first-child {
  color: #fff;

  font-size: 8px;

  font-weight: 850;
}

.v28-league-tile-footer
span:last-child {
  color:
    var(--muted);

  font-size: 7px;

  text-align: right;
}

/* =========================================================
   SELECTED LEAGUE HEADER BUTTON
========================================================= */

.v28-selected-league-button {
  min-width: 225px;

  min-height: 52px;

  display:
    grid
    !important;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    16px;

  gap: 8px;

  align-items: center;

  padding:
    7px
    10px
    !important;

  border-radius:
    13px
    !important;

  text-align: left;
}

.v28-selected-league-icon {
  width: 32px;

  height: 32px;

  display: grid;

  place-items: center;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      .14
    );

  border-radius: 9px;

  background:
    rgba(
      255,
      255,
      255,
      .075
    );
}

.v28-selected-league-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;
}

.v28-selected-league-copy
small {
  color:
    rgba(
      255,
      255,
      255,
      .62
    );

  font-size: 6px;

  font-weight: 900;

  letter-spacing: .08em;
}

.v28-selected-league-copy
strong {
  margin-top: 2px;

  overflow: hidden;

  color: #fff;

  font-size: 9px;

  font-weight: 850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v28-selected-league-arrow {
  color: #fff;

  font-size: 15px;

  font-weight: 900;
}

.v28-no-leagues {
  margin-top: 14px;
}

/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v28-league-tile {
  background:
    linear-gradient(
      145deg,
      rgba(
        158,
        64,
        186,
        .025
      ),
      transparent
      48%
    ),
    #fff;
}

html[data-theme="light"]
.v28-league-tile:hover {
  background:
    linear-gradient(
      145deg,
      rgba(
        158,
        64,
        186,
        .055
      ),
      transparent
      60%
    ),
    #fff;

  box-shadow:
    0
    17px
    38px
    rgba(
      65,
      52,
      70,
      .10
    );
}

html[data-theme="light"]
.v28-league-title-block
h3,

html[data-theme="light"]
.v28-league-tile-footer
span:first-child {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}

html[data-theme="light"]
.v28-scoring-badges
span {
  border-color:
    rgba(
      158,
      64,
      186,
      .14
    );

  background:
    rgba(
      158,
      64,
      186,
      .045
    );

  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1150px
) {
  .v28-league-tile-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (
  max-width:
    820px
) {
  #page-leagues
  .page-header {
    grid-template-columns:
      1fr
      !important;

    align-items:
      stretch;
  }

  .v28-selected-league-button {
    width: 100%;

    max-width: 430px;
  }
}

@media (
  max-width:
    680px
) {
  .v28-league-tile-grid {
    grid-template-columns:
      1fr;
  }

  .v28-league-tile {
    min-height: 0;
  }
}

/* VECTORS 0.29 — LEAGUE NAVIGATION REPAIR */

.v29-league-history-page {
  min-height: 500px;
}

.v29-history-back-row {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  margin-bottom: 12px;
}


/* Loading state */

.v29-history-loading-hero,
.v29-history-fallback-hero {
  display: grid;

  grid-template-columns:
    76px
    minmax(0, 1fr);

  gap: 15px;

  align-items: center;

  padding: 18px;

  border:
    1px solid
    rgba(
      182,
      92,
      207,
      .22
    );

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(
        158,
        64,
        186,
        .10
      ),
      transparent
      52%
    ),
    var(--panel);
}

.v29-history-loading-image,
.v29-history-fallback-avatar {
  width: 76px;
  height: 76px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      var(
        --v17-purple-700,
        #692E7E
      ),
      var(
        --v17-purple-500,
        #9E40BA
      )
    );

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 25px;

  font-weight: 900;
}

.v29-history-loading-image img,
.v29-history-fallback-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.v29-history-loading-hero h1,
.v29-history-fallback-hero h1 {
  margin:
    4px
    0
    4px;

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size:
    clamp(
      28px,
      4vw,
      46px
    );

  line-height: 1;

  letter-spacing:
    -.05em;
}

.v29-history-loading-hero p,
.v29-history-fallback-hero p {
  margin: 0;

  color:
    var(--muted);

  font-size: 9px;
}

.v29-history-loading-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 10px;
}

.v29-history-loading-grid div {
  height: 84px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    linear-gradient(
      90deg,
      var(--panel),
      rgba(
        158,
        64,
        186,
        .075
      ),
      var(--panel)
    );

  background-size:
    220%
    100%;

  animation:
    v29-loading-pulse
    1.6s
    ease-in-out
    infinite;
}

@keyframes v29-loading-pulse {
  0% {
    background-position:
      100%
      0;
  }

  100% {
    background-position:
      -100%
      0;
  }
}


/* Standalone fallback history */

.v29-fallback-kpis {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin:
    10px
    0;
}

.v29-fallback-kpis > div,
.v29-current-league-grid > div {
  padding: 11px;

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  background:
    var(--panel);
}

.v29-fallback-kpis small,
.v29-fallback-kpis strong,
.v29-current-league-grid small,
.v29-current-league-grid strong {
  display: block;
}

.v29-fallback-kpis small,
.v29-current-league-grid small {
  color:
    var(--muted);

  font-size: 7px;

  font-weight: 900;

  text-transform:
    uppercase;
}

.v29-fallback-kpis strong,
.v29-current-league-grid strong {
  margin-top: 3px;

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 17px;
}

.v29-fallback-season-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}

.v29-fallback-season-stats {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 6px;
}

.v29-fallback-season-stats > div {
  min-width: 0;

  padding: 8px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);
}

.v29-fallback-season-stats small,
.v29-fallback-season-stats strong {
  display: block;
}

.v29-fallback-season-stats small {
  color:
    var(--muted);

  font-size: 6px;

  font-weight: 900;
}

.v29-fallback-season-stats strong {
  margin-top: 3px;

  overflow: hidden;

  color: #fff;

  font-size: 9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v29-history-notice {
  margin:
    10px
    0;
}

.v29-current-league-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 7px;
}


/* Ensure league tiles receive clicks */

.v28-league-tile {
  pointer-events:
    auto
    !important;

  cursor:
    pointer
    !important;
}

.v28-league-tile::before {
  pointer-events:
    none
    !important;
}


/* Light */

html[data-theme="light"]
.v29-history-loading-hero,

html[data-theme="light"]
.v29-history-fallback-hero,

html[data-theme="light"]
.v29-fallback-kpis > div,

html[data-theme="light"]
.v29-current-league-grid > div {
  background:
    #fff;
}

html[data-theme="light"]
.v29-history-loading-hero h1,

html[data-theme="light"]
.v29-history-fallback-hero h1,

html[data-theme="light"]
.v29-fallback-kpis strong,

html[data-theme="light"]
.v29-current-league-grid strong,

html[data-theme="light"]
.v29-fallback-season-stats strong {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}


/* Responsive */

@media (
  max-width:
    850px
) {
  .v29-fallback-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .v29-fallback-season-list {
    grid-template-columns:
      1fr;
  }
}

@media (
  max-width:
    620px
) {
  .v29-history-loading-hero,
  .v29-history-fallback-hero {
    grid-template-columns:
      58px
      minmax(0, 1fr);

    padding: 13px;
  }

  .v29-history-loading-image,
  .v29-history-fallback-avatar {
    width: 58px;
    height: 58px;

    border-radius: 13px;
  }

  .v29-history-loading-hero h1,
  .v29-history-fallback-hero h1 {
    font-size: 28px;
  }

  .v29-history-loading-grid,
  .v29-fallback-kpis,
  .v29-current-league-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .v29-fallback-season-stats {
    grid-template-columns:
      1fr
      1fr;
  }
}


/* Reduced motion */

@media (
  prefers-reduced-motion:
    reduce
) {
  .v29-history-loading-grid div {
    animation:
      none
      !important;
  }
}

/* VECTORS 0.30 — LEAGUE HISTORY DATA REPAIR */

.v30-history-page {
  min-height: 600px;
}

.v30-history-topbar {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;
}

.v30-data-source {
  color:
    var(--muted);

  font-size: 8px;

  font-weight: 800;
}


/* =========================================================
   HERO
========================================================= */

.v30-history-hero {
  display: grid;

  grid-template-columns:
    88px
    minmax(0, 1fr);

  gap: 18px;

  align-items: center;

  padding: 20px;

  border:
    1px solid
    rgba(
      182,
      92,
      207,
      .22
    );

  border-radius: 20px;

  background:
    radial-gradient(
      circle at
      12%
      15%,

      rgba(
        205,
        130,
        221,
        .13
      ),

      transparent
      27%
    ),

    linear-gradient(
      120deg,

      #29172f,

      #19181d
      62%,

      #121316
    );
}

.v30-history-league-image {
  width: 88px;
  height: 88px;

  display: grid;

  place-items: center;

  object-fit: cover;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,

      #692E7E,

      #9E40BA
    );

  color: #fff;

  font-size: 28px;

  font-weight: 900;
}

.v30-history-hero-copy
h1 {
  margin:
    4px
    0
    5px;

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size:
    clamp(
      32px,
      4vw,
      54px
    );

  line-height: .98;

  letter-spacing:
    -.055em;
}

.v30-history-hero-copy
p {
  margin: 0;

  color:
    var(--muted);

  font-size: 10px;
}


/* =========================================================
   ALL TIME
========================================================= */

.v30-alltime-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 10px;
}

.v30-history-kpi {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    var(--panel);
}

.v30-history-kpi
small,
.v30-history-kpi
strong,
.v30-history-kpi
span {
  display: block;
}

.v30-history-kpi
small {
  color:
    var(--muted);

  font-size: 7px;

  font-weight: 900;

  text-transform:
    uppercase;
}

.v30-history-kpi
strong {
  margin-top: 4px;

  color: #fff;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 20px;
}

.v30-history-kpi
span {
  margin-top: 3px;

  overflow: hidden;

  color:
    var(--muted);

  font-size: 7px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SECTIONS
========================================================= */

.v30-history-section {
  margin-top: 24px;
}

.v30-section-heading,
.v30-week-heading {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap: 12px;

  margin-bottom: 10px;
}

.v30-section-heading
h2,
.v30-week-heading
h2 {
  margin:
    2px
    0
    0;

  font-family:
    var(
      --v17-display,
      inherit
    );

  font-size: 24px;

  letter-spacing:
    -.04em;
}

.v30-section-heading
> span {
  color:
    var(--muted);

  font-size: 8px;
}

.v30-week-heading
p {
  margin:
    3px
    0
    0;

  color:
    var(--muted);

  font-size: 8px;
}


/* =========================================================
   SEASONS
========================================================= */

.v30-season-tabs,
.v30-week-tabs {
  display: flex;

  gap: 6px;

  overflow-x: auto;

  padding:
    2px
    0
    8px;

  scrollbar-width: none;
}

.v30-season-tabs::-webkit-scrollbar,
.v30-week-tabs::-webkit-scrollbar {
  display: none;
}

.v30-season-tab {
  min-width: 150px;

  padding: 10px;

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  background:
    var(--panel);

  color:
    var(--text);

  text-align: left;
}

.v30-season-tab.active,
.v30-season-tab:hover {
  border-color:
    rgba(
      205,
      130,
      221,
      .34
    );

  background:
    rgba(
      158,
      64,
      186,
      .075
    );
}

.v30-season-tab
strong,
.v30-season-tab
span,
.v30-season-tab
small {
  display: block;
}

.v30-season-tab
strong {
  font-size: 14px;
}

.v30-season-tab
span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 7px;
}

.v30-season-tab
small {
  margin-top: 5px;

  overflow: hidden;

  color:
    var(--purple-light);

  font-size: 7px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-season-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 7px;

  margin-bottom: 10px;
}

.v30-season-summary
> div {
  min-width: 0;

  padding: 10px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v30-season-summary
small,
.v30-season-summary
strong,
.v30-season-summary
span {
  display: block;
}

.v30-season-summary
small {
  color:
    var(--muted);

  font-size: 6px;

  font-weight: 900;

  text-transform:
    uppercase;
}

.v30-season-summary
strong {
  margin-top: 3px;

  overflow: hidden;

  font-size: 10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-season-summary
span {
  margin-top: 2px;

  overflow: hidden;

  color:
    var(--muted);

  font-size: 7px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   STANDINGS
========================================================= */

.v30-standings-body {
  padding: 0 !important;
}

.v30-standing-head,
.v30-standing-row {
  display: grid;

  grid-template-columns:
    48px
    minmax(
      220px,
      1fr
    )
    90px
    90px
    90px;

  gap: 8px;

  align-items: center;
}

.v30-standing-head {
  padding:
    7px
    12px;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--muted);

  font-size: 7px;

  font-weight: 900;

  text-transform:
    uppercase;
}

.v30-standing-row {
  min-height: 54px;

  padding:
    7px
    12px;

  border-bottom:
    1px solid
    var(--border);
}

.v30-standing-row:last-child {
  border-bottom: 0;
}

.v30-standing-row.mine {
  background:
    rgba(
      158,
      64,
      186,
      .055
    );
}

.v30-standing-row
> b {
  color:
    var(--purple-light);
}

.v30-standing-team {
  min-width: 0;

  display: grid;

  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  gap: 8px;

  align-items: center;
}

.v30-owner-avatar,
.v30-standing-avatar,
.v30-podium-avatar,
.v30-matchup-avatar {
  display: grid;

  place-items: center;

  object-fit: cover;

  background:
    #2B2C32;

  color: #fff;

  font-weight: 900;
}

.v30-standing-avatar {
  width: 36px;
  height: 36px;

  border-radius: 9px;
}

.v30-standing-team
strong,
.v30-standing-team
small {
  display: block;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-standing-team
strong {
  font-size: 9px;
}

.v30-standing-team
small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 7px;
}


/* =========================================================
   WEEK TABS
========================================================= */

.v30-week-tab {
  min-width: 54px;

  height: 52px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel);

  color:
    var(--text);
}

.v30-week-tab.active,
.v30-week-tab:hover {
  border-color:
    rgba(
      205,
      130,
      221,
      .38
    );

  background:
    rgba(
      158,
      64,
      186,
      .10
    );
}

.v30-week-tab
small {
  color:
    var(--muted);

  font-size: 6px;

  font-weight: 900;
}

.v30-week-tab
strong {
  margin-top: 2px;

  font-size: 13px;
}

.v30-week-recap {
  scroll-margin-top: 20px;
}

.v30-week-high {
  min-width: 120px;

  padding:
    8px
    10px;

  border:
    1px solid
    rgba(
      205,
      130,
      221,
      .22
    );

  border-radius: 10px;

  background:
    rgba(
      158,
      64,
      186,
      .07
    );

  text-align: right;
}

.v30-week-high
small,
.v30-week-high
strong,
.v30-week-high
span {
  display: block;
}

.v30-week-high
small {
  color:
    var(--muted);

  font-size: 6px;
}

.v30-week-high
strong {
  margin-top: 2px;

  color: #fff;

  font-size: 18px;
}

.v30-week-high
span {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 7px;
}


/* =========================================================
   PODIUMS
========================================================= */

.v30-podium-grid {
  display: grid;

  grid-template-columns:
    1.15fr
    .85fr;

  gap: 10px;
}

.v30-team-podium-card,
.v30-player-podium-card {
  min-height: 260px;
}

.v30-team-podium {
  height: 180px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 6px;

  align-items: end;

  padding:
    4px
    8px
    0;
}

.v30-podium-place {
  position: relative;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  padding: 9px;

  border:
    1px solid
    var(--border);

  border-radius:
    12px
    12px
    5px
    5px;

  background:
    var(--panel-soft);

  text-align: center;
}

.v30-podium-place.place-1 {
  height: 168px;

  border-color:
    rgba(
      205,
      130,
      221,
      .32
    );

  background:
    linear-gradient(
      180deg,

      rgba(
        158,
        64,
        186,
        .16
      ),

      rgba(
        158,
        64,
        186,
        .03
      )
    ),
    var(--panel-soft);
}

.v30-podium-place.place-2 {
  height: 142px;
}

.v30-podium-place.place-3 {
  height: 125px;
}

.v30-place-label {
  position: absolute;

  top: 7px;
  right: 8px;

  color:
    var(--purple-light);

  font-size: 7px;

  font-weight: 950;
}

.v30-podium-avatar {
  width: 46px;
  height: 46px;

  border-radius: 12px;
}

.v30-podium-place.place-1
.v30-podium-avatar {
  width: 54px;
  height: 54px;
}

.v30-podium-place
strong {
  max-width: 100%;

  margin-top: 6px;

  overflow: hidden;

  font-size: 9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-podium-place
small {
  max-width: 100%;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(--muted);

  font-size: 6px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-podium-place
b {
  margin-top: 6px;

  color: #fff;

  font-size: 18px;
}

.v30-podium-place
i {
  color:
    var(--muted);

  font-size: 6px;

  font-style: normal;
}


/* Player podium */

.v30-player-podium-list {
  display: grid;

  gap: 7px;
}

.v30-player-podium-row {
  min-width: 0;

  min-height: 62px;

  display: grid;

  grid-template-columns:
    28px
    52px
    minmax(
      0,
      1fr
    )
    auto;

  gap: 8px;

  align-items: center;

  padding:
    6px
    8px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v30-player-podium-row.place-1 {
  border-color:
    rgba(
      205,
      130,
      221,
      .30
    );

  background:
    rgba(
      158,
      64,
      186,
      .075
    );
}

.v30-player-rank {
  color:
    var(--purple-light);

  font-size: 10px;

  font-weight: 950;
}

.v30-player-photo {
  width: 52px;
  height: 52px;

  border-radius: 10px;

  object-fit: cover;

  object-position:
    center top;
}

.v30-player-podium-row
> div {
  min-width: 0;
}

.v30-player-podium-row
strong,
.v30-player-podium-row
small {
  display: block;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-player-podium-row
strong {
  font-size: 9px;
}

.v30-player-podium-row
small {
  margin-top: 3px;

  color:
    var(--muted);

  font-size: 7px;
}

.v30-player-podium-row
> b {
  color: #fff;

  font-size: 15px;
}


/* =========================================================
   AWARDS
========================================================= */

.v30-awards-card,
.v30-matchup-results {
  margin-top: 10px;
}

.v30-awards-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 7px;
}

.v30-award {
  min-width: 0;

  display: grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    );

  gap: 8px;

  padding: 9px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v30-award
> span {
  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background:
    rgba(
      158,
      64,
      186,
      .10
    );

  font-size: 15px;
}

.v30-award
small {
  color:
    var(--purple-light);

  font-size: 6px;

  font-weight: 900;

  text-transform:
    uppercase;
}

.v30-award
strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  font-size: 9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-award
p {
  margin:
    2px
    0
    0;

  overflow: hidden;

  color:
    var(--muted);

  font-size: 7px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MATCHUPS
========================================================= */

.v30-matchup-list {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 7px;
}

.v30-matchup-row {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    26px
    minmax(
      0,
      1fr
    );

  gap: 5px;

  align-items: center;

  padding: 7px;

  border:
    1px solid
    var(--border);

  border-radius: 10px;

  background:
    var(--panel-soft);
}

.v30-matchup-side {
  min-width: 0;

  display: grid;

  grid-template-columns:
    34px
    minmax(
      0,
      1fr
    )
    auto;

  gap: 6px;

  align-items: center;
}

.v30-matchup-side.right {
  grid-template-columns:
    auto
    minmax(
      0,
      1fr
    )
    34px;

  text-align: right;
}

.v30-matchup-avatar {
  width: 34px;
  height: 34px;

  border-radius: 8px;
}

.v30-matchup-side
span {
  min-width: 0;
}

.v30-matchup-side
strong,
.v30-matchup-side
small {
  display: block;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.v30-matchup-side
strong {
  font-size: 8px;
}

.v30-matchup-side
small {
  margin-top: 1px;

  color:
    var(--muted);

  font-size: 6px;
}

.v30-matchup-side
> b {
  color:
    var(--muted);

  font-size: 11px;
}

.v30-matchup-side.winner
> b {
  color: #fff;
}

.v30-matchup-vs {
  color:
    var(--muted);

  font-size: 6px;

  font-weight: 900;

  text-align: center;
}


/* =========================================================
   LOADING + ERROR
========================================================= */

.v30-history-loading {
  padding: 28px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    var(--panel);
}

.v30-history-loading
h1 {
  margin:
    4px
    0;

  color: #fff;

  font-size: 34px;
}

.v30-history-loading
p {
  color:
    var(--muted);
}

.v30-loading-bars {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 7px;

  margin-top: 18px;
}

.v30-loading-bars
i {
  height: 5px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,

      #4B245A,

      #B65CCF,

      #4B245A
    );

  background-size:
    220%
    100%;

  animation:
    v30-history-loading
    1.4s
    linear
    infinite;
}

@keyframes v30-history-loading {
  from {
    background-position:
      100%
      0;
  }

  to {
    background-position:
      -100%
      0;
  }
}

.v30-history-error {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


/* =========================================================
   NO HOVER JUDDER
========================================================= */

.v30-history-page
.card:hover {
  transform:
    none
    !important;
}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"]
.v30-history-hero {
  background:
    radial-gradient(
      circle at
      12%
      15%,

      rgba(
        158,
        64,
        186,
        .07
      ),

      transparent
      28%
    ),

    linear-gradient(
      120deg,

      #fff,

      #F1EDF3
    );
}

html[data-theme="light"]
.v30-history-hero-copy
h1,

html[data-theme="light"]
.v30-history-kpi
strong,

html[data-theme="light"]
.v30-week-high
strong,

html[data-theme="light"]
.v30-podium-place
b,

html[data-theme="light"]
.v30-player-podium-row
> b,

html[data-theme="light"]
.v30-history-loading
h1 {
  color:
    var(
      --v17-purple-700,
      #692E7E
    );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    1100px
) {
  .v30-alltime-grid,
  .v30-season-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .v30-podium-grid {
    grid-template-columns:
      1fr;
  }

  .v30-awards-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .v30-matchup-list {
    grid-template-columns:
      1fr;
  }
}

@media (
  max-width:
    720px
) {
  .v30-history-hero {
    grid-template-columns:
      62px
      minmax(
        0,
        1fr
      );

    padding: 14px;
  }

  .v30-history-league-image {
    width: 62px;
    height: 62px;

    border-radius: 15px;
  }

  .v30-history-hero-copy
  h1 {
    font-size: 30px;
  }

  .v30-alltime-grid,
  .v30-season-summary,
  .v30-awards-grid {
    grid-template-columns:
      1fr;
  }

  .v30-standings-body {
    overflow-x: auto;
  }

  .v30-standing-head,
  .v30-standing-row {
    min-width: 610px;
  }

  .v30-week-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .v30-week-high {
    width: 100%;

    text-align: left;
  }

  .v30-team-podium {
    padding-left: 0;
    padding-right: 0;
  }

  .v30-matchup-row {
    grid-template-columns:
      1fr;
  }

  .v30-matchup-vs {
    padding:
      2px
      0;
  }

  .v30-matchup-side.right {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      )
      auto;

    text-align: left;
  }

  .v30-matchup-side.right
  .v30-matchup-avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .v30-matchup-side.right
  span {
    grid-column: 2;
    grid-row: 1;
  }

  .v30-matchup-side.right
  b {
    grid-column: 3;
    grid-row: 1;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .v30-loading-bars
  i {
    animation:
      none
      !important;
  }
}

/* =========================================================
   V34 DRAFT PAGE
========================================================= */

.draft-v34-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-v34-notice {
  margin-bottom: 12px;
}

.draft-v34-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  min-height: 180px;
  margin-bottom: 12px;
  padding: 24px;

  border:
    1px solid
    rgba(158,64,186,.48);

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(221,151,236,.2),
      transparent 32%
    ),
    linear-gradient(
      110deg,
      #742889,
      #4b1c58 55%,
      #25152b
    );

  box-shadow:
    0 14px 34px
    rgba(158,64,186,.14);
}

.draft-v34-hero h2 {
  margin: 6px 0;
  font-size: 31px;
  letter-spacing: -1px;
}

.draft-v34-hero p {
  max-width: 680px;
  margin: 0;
  color: #dfc9e5;
  font-size: 12px;
}

.draft-v34-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.draft-v34-light-button {
  border-color:
    rgba(255,255,255,.25);

  background:
    rgba(255,255,255,.1);

  color: #fff;
}

.draft-v34-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.4fr)
    minmax(280px,.6fr);

  gap: 12px;
  align-items: start;
}

.draft-v34-side {
  display: grid;
  gap: 12px;
}

.draft-v34-copy {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 10px;
}

.draft-v34-join-row {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 7px;
}

.draft-v34-join-row input {
  min-width: 0;
  height: 38px;

  padding:
    0 11px;

  border:
    1px solid
    var(--border-light);

  border-radius: 9px;

  background:
    var(--bg-soft);

  color:
    var(--text);

  outline: 0;

  font-weight: 850;
  letter-spacing: .12em;
}

.draft-v34-mocks-section {
  margin-top: 20px;
}

.draft-v34-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 10px;
}

.draft-v34-section-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}

.draft-v34-section-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.draft-v34-mock-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(260px,1fr)
    );

  gap: 10px;
}

.draft-v34-empty {
  grid-column: 1/-1;

  padding:
    38px 20px;

  border:
    1px dashed
    var(--border-light);

  border-radius: 12px;

  background:
    rgba(158,64,186,.035);

  text-align: center;

  color:
    var(--muted);
}

.draft-v34-empty h3 {
  margin: 5px 0;
  color: var(--text);
}

.draft-v34-empty p {
  max-width: 520px;

  margin:
    5px auto 14px;

  font-size: 10px;
}

.draft-v34-empty-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  margin:
    0 auto 8px;

  border-radius: 13px;

  background:
    rgba(158,64,186,.14);

  color:
    var(--purple-light);
}

.draft-v34-mock-card {
  padding: 14px;

  border:
    1px solid
    var(--border);

  border-radius: 12px;

  background:
    linear-gradient(
      155deg,
      var(--panel),
      var(--bg-soft)
    );

  transition: .18s;
}

.draft-v34-mock-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(158,64,186,.45);

  box-shadow:
    var(--purple-shadow);
}

.draft-v34-mock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.draft-v34-mock-head h3 {
  margin: 2px 0 0;
  font-size: 14px;
}

.draft-v34-settings-grid,
.draft-v34-official-detail {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap: 6px;
  margin-top: 11px;
}

.draft-v34-metric {
  min-width: 0;

  padding: 8px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel-soft);
}

.draft-v34-metric small,
.draft-v34-metric strong {
  display: block;
}

.draft-v34-metric small {
  color: var(--muted);
  font-size: 6px;
  text-transform: uppercase;
}

.draft-v34-metric strong {
  margin-top: 2px;

  overflow: hidden;

  color:
    var(--text);

  font-size: 9px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-v34-code {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 10px;

  padding:
    8px 9px;

  border:
    1px dashed
    rgba(158,64,186,.4);

  border-radius: 8px;

  background:
    rgba(158,64,186,.07);
}

.draft-v34-code span {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.draft-v34-code strong {
  color:
    var(--purple-light);

  font-size: 10px;
  letter-spacing: .13em;
}

.draft-v34-participant-line {
  display: flex;
  justify-content: space-between;

  margin-top: 8px;

  color:
    var(--muted);

  font-size: 8px;
}

.draft-v34-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 10px;
}

.draft-v34-card-actions .btn {
  min-height: 32px;

  padding:
    6px 9px;

  font-size: 9px;
}

.draft-v34-official-list {
  display: grid;
  gap: 7px;
}

.draft-v34-official {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);
}

.draft-v34-official summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px;

  list-style: none;
  cursor: pointer;
}

.draft-v34-official summary::-webkit-details-marker {
  display: none;
}

.draft-v34-official summary strong,
.draft-v34-official summary small {
  display: block;
}

.draft-v34-official summary strong {
  font-size: 10px;
}

.draft-v34-official summary small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;
}

.draft-v34-official-detail {
  margin: 0;

  padding: 10px;

  border-top:
    1px solid
    var(--border);
}

.draft-v34-no-official {
  text-align: center;
  padding: 22px;
}

.draft-v34-no-official p {
  color: var(--muted);
  font-size: 10px;
}

.draft-v34-picks {
  display: grid;
  gap: 5px;
}

.draft-v34-pick {
  display: grid;

  grid-template-columns:
    28px 1fr auto;

  gap: 7px;
  align-items: center;

  padding: 6px;

  border:
    1px solid
    var(--border);

  border-radius: 8px;

  background:
    var(--panel-soft);
}

.draft-v34-pick-no {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border-radius: 7px;

  background:
    rgba(158,64,186,.15);

  color:
    var(--purple-light);

  font-size: 9px;
  font-weight: 900;
}

.draft-v34-pick strong,
.draft-v34-pick small {
  display: block;
}

.draft-v34-pick strong {
  font-size: 9px;
}

.draft-v34-pick small {
  color: var(--muted);
  font-size: 7px;
}

.draft-v34-pick b {
  color: var(--muted);
  font-size: 8px;
}

.draft-v34-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    0 10px;
}

.draft-v34-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin: 12px 0;
  padding: 10px;

  border:
    1px solid
    var(--border);

  border-radius: 9px;

  background:
    var(--panel-soft);
}

.draft-v34-check input {
  margin-top: 3px;

  accent-color:
    var(--purple);
}

.draft-v34-check strong,
.draft-v34-check small {
  display: block;
}

.draft-v34-check strong {
  font-size: 10px;
}

.draft-v34-check small {
  margin-top: 2px;

  color:
    var(--muted);

  font-size: 8px;
}

.draft-v34-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  margin-top: 14px;
  padding-top: 12px;

  border-top:
    1px solid
    var(--border);
}

.draft-v34-modal-actions > div {
  display: flex;
  gap: 7px;
}

.draft-v34-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 13px 0;
  padding: 11px;

  border:
    1px solid
    rgba(158,64,186,.35);

  border-radius: 9px;

  background:
    rgba(158,64,186,.08);
}

.draft-v34-share small,
.draft-v34-share strong {
  display: block;
}

.draft-v34-share small {
  color:
    var(--muted);

  font-size: 7px;
}

.draft-v34-share strong {
  color:
    var(--purple-light);

  font-size: 15px;
  letter-spacing: .13em;
}

.draft-v34-invite-list {
  margin-top: 13px;
}

.draft-v34-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 8px;

  border-bottom:
    1px solid
    var(--border);
}

.draft-v34-invite-row strong,
.draft-v34-invite-row small {
  display: block;
}

.draft-v34-invite-row strong {
  font-size: 9px;
}

.draft-v34-invite-row small {
  color:
    var(--muted);

  font-size: 7px;
}

.draft-v34-error-help {
  margin-top: 6px;

  color: inherit;

  font-size: 10px;

  opacity: .85;
}

@media (max-width: 1100px) {
  .draft-v34-mock-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(240px,1fr)
      );
  }

  .draft-v34-grid {
    grid-template-columns: 1fr;
  }

  .draft-v34-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 650px) {
  .draft-v34-header-actions,
  .draft-v34-hero-actions {
    width: 100%;
  }

  .draft-v34-header-actions .btn,
  .draft-v34-hero-actions .btn {
    flex: 1;
  }

  .draft-v34-mock-grid {
    grid-template-columns: 1fr;
  }

  .draft-v34-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .draft-v34-form-grid,
  .draft-v34-settings-grid,
  .draft-v34-official-detail {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .draft-v34-modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .draft-v34-modal-actions > div {
    display: grid;
    grid-template-columns:
      1fr 1fr;
  }
}

/* END V34 DRAFT PAGE */

/* Draft pages share the established Vectors display typography. */
.draft-join-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; margin-top: 32px; }
.draft-join-card h3 { margin: 0 0 8px; font-size: 20px; }
.draft-join-card p { margin: 0; color: var(--muted); font-size: 12px; }
.draft-join-card .draft-v34-join-row { width: min(100%, 380px); }
.draft-inherited-settings { padding: 18px; margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-soft); font-size: 12px; }
.draft-inherited-facts { display: flex; gap: 28px; flex-wrap: wrap; }
.draft-inherited-facts > span { display: grid; gap: 5px; }
.draft-inherited-facts small { color: var(--muted); font-size: 10px; }
.draft-inherited-settings .draft-room-roster-slots { margin: 14px 0; }
.draft-inherited-settings .draft-room-roster-slots span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-soft); font-size: 10px; }
.draft-inherited-settings summary { cursor: pointer; color: var(--muted); font-size: 11px; }
.draft-inherited-copy { color: var(--muted); font-size: 11px; margin: 0 0 20px; }
.draft-scoring-rules { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 20px; margin-top: 14px; max-height: 180px; overflow: auto; }
.draft-scoring-rules > span { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.draft-scoring-rules strong { color: var(--text); }
.league-draft-archive { padding: 24px; margin: 28px 0; }
.league-draft-archive :is(h2,h3) { font-family: var(--v17-display); font-weight: 800; letter-spacing: -.045em; }
.league-draft-section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.league-draft-section-head h2 { font-size: 24px; margin: 10px 0; }
.league-draft-section-head p { margin: 0; color: var(--muted); font-size: 12px; }
.league-draft-list { display: grid; gap: 16px; }
.league-draft-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-soft); }
.league-draft-row h3 { margin: 0 0 8px; font-size: 16px; }
.league-draft-row p { margin: 0; color: var(--muted); font-size: 11px; }
.league-draft-board { display: grid; gap: 8px; }
.league-draft-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.league-draft-filter h3 { margin: 0; }
.league-draft-selection-list { max-height: 460px; overflow: auto; }
.league-draft-selection { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.league-draft-selection > div { flex: 1; }
.league-draft-selection small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.league-draft-selection > span:last-child { color: var(--muted); font-size: 11px; }
@media (max-width: 650px) {
  .draft-join-card, .league-draft-row, .league-draft-section-head { flex-direction: column; align-items: flex-start; }
  .draft-join-card .draft-v34-join-row { width: 100%; }
  .draft-scoring-rules { grid-template-columns: 1fr; }
  .league-draft-selection { gap: 8px; }
  .league-draft-selection > span:last-child { max-width: 85px; text-align: right; }
}
#page-drafts :is(h1, h2, h3, .card-title),
.draft-room-history > summary > span {
  font-family: var(--v17-display);
  font-weight: 800;
  letter-spacing: -.045em;
}
#page-drafts > .page-header { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
#page-drafts .draft-v34-mocks-section { margin-top: 0; }
#page-drafts .draft-v34-section-head h2 { font-size: 26px; }
.draft-v34-mock-card { padding: 22px; background: var(--panel); border-radius: 18px; }
.draft-v34-mock-head h3 { font-size: 21px; line-height: 1.25; }
.draft-v34-card-details { margin-top: 18px; color: var(--text-soft); }
.draft-v34-card-details summary { font-size: 12px; cursor: pointer; color: var(--muted); }
.draft-v34-card-details .draft-v34-metric { background: transparent; border: 0; padding: 8px 0; }
.draft-v34-code { background: transparent; padding: 12px 0 0; border: 0; justify-content: space-between; }
.draft-v34-code strong { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; }
.draft-v34-participant-line { color: var(--muted); margin-top: 10px; }
.draft-v34-card-actions { margin-top: 20px; align-items: flex-start; }
.draft-v34-manage { position: relative; }
.draft-v34-manage > summary { list-style: none; cursor: pointer; }
.draft-v34-manage > summary::-webkit-details-marker { display: none; }
.draft-v34-manage > div { position: absolute; right: 0; top: calc(100% + 8px); z-index: 3; display: grid; gap: 6px; min-width: 140px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-raised); box-shadow: var(--shadow); }

.draft-room { display: grid; gap: 22px; }
.draft-room [hidden] { display: none !important; }
.draft-room-heading, .draft-room-turn { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.draft-room-heading h1 { margin: 16px 0 8px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; overflow-wrap: anywhere; }
.draft-room-heading p { color: var(--muted); margin: 0; font-size: 13px; }
.draft-room-back, .draft-room-copy { border: 0; padding: 0; background: transparent; color: var(--text-soft); font-size: 12px; cursor: pointer; }
.draft-room-back:hover, .draft-room-copy:hover { color: var(--purple-light); }
.draft-room .card { padding: 24px; min-width: 0; border-radius: 18px; }
.draft-room h2 { margin: 0 0 16px; font-size: 21px; }
.draft-room-status { flex-shrink: 0; gap: 8px; }
.draft-room-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple-light); }
.draft-room-lobby { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 48px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 0% 0%, rgba(158,64,186,.13), transparent 65%), var(--panel); }
.draft-room .draft-room-lobby { padding: 40px; }
.draft-room-lobby-main h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 14px 0 18px; }
.draft-room-lobby-main > p { color: var(--muted); max-width: 370px; }
.draft-room-lobby-facts { display: flex; flex-wrap: wrap; gap: 24px; margin: 30px 0; }
.draft-room-lobby-facts span { display: grid; gap: 6px; }
.draft-room-lobby-facts small, .draft-room-invite-code small { color: var(--muted); font-size: 11px; }
.draft-room-lobby-facts strong { font-size: 13px; }
.draft-room-lobby-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
#draftRoomStart { min-height: 44px; gap: 28px; }
.draft-room-notes { font-size: 12px; color: var(--muted); }
.draft-room-notes summary { cursor: pointer; }
.draft-room-notes p { max-width: 430px; line-height: 1.7; }
.draft-room-lobby-seats { padding-left: 32px; border-left: 1px solid var(--border); align-self: center; }
.draft-room-section-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.draft-room-section-label h2, .draft-room-section-label h3 { margin: 0; }
.draft-room-section-label > span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.draft-room-managers { display: grid; gap: 16px; margin: 24px 0; max-height: 270px; overflow: auto; }
.draft-room-manager { display: flex; gap: 12px; align-items: center; }
.draft-room-manager strong { flex: 1; font-size: 13px; }
.draft-room-manager small { font-size: 10px; color: var(--muted); }
.draft-room-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(158,64,186,.16); color: var(--text); font-family: var(--v17-display); font-weight: 800; }
.draft-room-manager.is-cpu .draft-room-avatar { border: 1px dashed var(--border-light); background: transparent; color: var(--muted); }
.draft-room-invite-code { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.draft-room-invite-code strong { font-family: ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; }
.draft-room-copy { margin-left: auto; }
.draft-room-turn { position: relative; overflow: hidden; background: var(--panel); }
.draft-room-turn.is-your-turn { border-color: rgba(158,64,186,.5); background: linear-gradient(110deg, rgba(158,64,186,.13), transparent 65%), var(--panel); }
.draft-room-turn h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 8px 0; }
.draft-room-turn p { margin: 0; color: var(--muted); font-size: 12px; }
.draft-room-clock-wrap { text-align: right; flex-shrink: 0; }
.draft-room-clock-wrap small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
#draftRoomClock { font-family: var(--v17-display); font-weight: 800; font-size: 25px; white-space: nowrap; letter-spacing: -.05em; }
.draft-room-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--border); }
.draft-room-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--purple-bright)); transition: width .5s ease; }
.draft-room-last-pick { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-radius: 12px; background: var(--panel-soft); }
.draft-room-last-pick small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.draft-room-last-pick strong { font-size: 13px; }
.draft-room-last-manager { margin-left: auto; color: var(--muted); font-size: 12px; }
.draft-room-workspace-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.draft-room-view-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); background: var(--bg-soft); border-radius: 12px; }
.draft-room-view-button { border: 0; padding: 9px 18px; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; transition: color .15s, background .15s; }
.draft-room-view-button.active { background: var(--panel-raised); color: var(--text); box-shadow: 0 2px 5px rgba(0,0,0,.12); }
.draft-room-values { text-align: right; }
.draft-room-values p { margin-left: auto; }
.draft-room-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.draft-room-main { min-width: 0; }
.draft-room-filters { display: flex; gap: 10px; margin-bottom: 18px; }
.draft-room-filters input { flex: 1; min-width: 0; }
.draft-room input, .draft-room select { padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 12px; }
.draft-room input:focus-visible, .draft-room select:focus-visible, .draft-room button:focus-visible, .draft-room summary:focus-visible, .draft-v34-manage summary:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }
.draft-room-muted { color: var(--muted); font-size: 11px; }
.draft-room-list-labels { display: grid; grid-template-columns: 1fr 48px 58px; gap: 12px; color: var(--muted); font-size: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--border); }
.draft-room-player-list { max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.draft-room-player { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }
.draft-room-player:last-child { border-bottom: 0; }
.draft-room-player > div { flex: 1; min-width: 0; }
.draft-room-player strong { font-size: 12px; }
.draft-room-player small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.draft-room-value { min-width: 40px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.draft-room-player .btn { min-height: 30px; padding: 6px 12px; font-size: 11px; transition: transform .15s, background .15s; }
.draft-room-player .btn:not(:disabled):hover { transform: translateY(-2px); }
.draft-room button:disabled { opacity: .4; cursor: default; }
.draft-room [data-position] { --position-rgb: 158,64,186; }
.draft-room [data-position="QB"] { --position-rgb: 221,151,236; }
.draft-room [data-position="RB"] { --position-rgb: 85,215,143; }
.draft-room [data-position="WR"] { --position-rgb: 93,169,255; }
.draft-room [data-position="TE"] { --position-rgb: 243,197,107; }
.draft-room-position { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px; font-size: 10px; font-weight: 800; color: var(--text-soft); background: rgba(var(--position-rgb), .13); border: 1px solid rgba(var(--position-rgb), .2); }
.draft-room-roster-panel > select { width: 100%; }
.draft-room-roster-slots { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0; }
.draft-room-roster-slots span { padding: 3px 6px; border-radius: 5px; background: var(--panel-soft); color: var(--muted); font-size: 9px; }
.draft-room-empty { padding: 32px 10px; text-align: center; color: var(--muted); }
.draft-room-empty > span { display: block; color: var(--purple-light); font-size: 28px; margin-bottom: 12px; }
.draft-room-empty strong { display: block; font-size: 12px; color: var(--text-soft); }
.draft-room-empty p { font-size: 11px; }
.draft-room-board-scroll { overflow: auto; max-height: 590px; scrollbar-width: thin; }
#draftRoomBoard { display: grid; gap: 8px; }
.draft-room-board-team { padding: 12px; background: var(--panel); position: sticky; top: 0; z-index: 1; font-weight: 700; font-size: 11px; }
.draft-room-board-pick { min-height: 95px; padding: 12px; border: 1px solid var(--border); border-left: 3px solid rgba(var(--position-rgb), .5); border-radius: 10px; display: grid; align-content: start; gap: 7px; background: rgba(var(--position-rgb), .04); }
.draft-room-board-pick strong { font-size: 12px; }
.draft-room-board-pick small, .draft-room-board-pick span { color: var(--muted); font-size: 10px; }
.draft-room-board-pick.on-clock { border-color: var(--purple); background: rgba(158,64,186,.12); }
.draft-room-history > summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.draft-room-history > summary::-webkit-details-marker { display: none; }
.draft-room-history > summary span { font-size: 18px; }
.draft-room-history > summary small { color: var(--muted); font-size: 11px; }
.draft-room-history > summary::after { content: "+"; color: var(--muted); font-size: 20px; }
.draft-room-history[open] > summary::after { content: "−"; }
.draft-room-recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
.draft-room-recent > div { display: grid; gap: 6px; padding-left: 12px; border-left: 2px solid var(--border); }
.draft-room-recent strong { font-size: 12px; }
.draft-room-recent span, .draft-room-recent small { color: var(--muted); font-size: 11px; }
.draft-room .is-new-pick { animation: draft-pick-arrive .48s cubic-bezier(.2,.8,.2,1) var(--pick-delay, 0ms) both, draft-pick-flash 1.2s ease-out var(--pick-delay, 0ms) both; }
@keyframes draft-pick-arrive { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes draft-pick-flash { 0%, 20% { box-shadow: 0 0 0 2px rgba(158,64,186,.55), 0 0 24px rgba(158,64,186,.2); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 900px) {
  .draft-room-columns { grid-template-columns: 1fr; }
  .draft-room-lobby { grid-template-columns: 1fr; gap: 28px; }
  .draft-room-lobby-seats { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .draft-room-heading { align-items: flex-start; }
}
@media (max-width: 600px) {
  .draft-room { gap: 18px; }
  .draft-room .card, .draft-room .draft-room-lobby { padding: 20px; }
  .draft-room-heading { flex-wrap: wrap; gap: 12px; }
  .draft-room-turn { gap: 12px; }
  .draft-room-turn h2 { font-size: 22px; }
  #draftRoomClock { font-size: 20px; }
  .draft-room-filters { flex-wrap: wrap; }
  .draft-room-workspace-bar { flex-wrap: wrap; gap: 12px; }
  .draft-room-values { text-align: left; }
  .draft-room-values p { margin-left: 0; }
  .draft-room-last-manager { max-width: 85px; text-align: right; }
  .draft-room-player { gap: 8px; }
  .draft-room-player strong { overflow-wrap: anywhere; }
  .draft-room-history > summary small { display: none; }
  .draft-v34-mock-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .draft-room .is-new-pick { animation: none; }
  .draft-room *, #page-drafts .draft-v34-mock-card { transition: none !important; }
  .draft-room-player .btn:not(:disabled):hover { transform: none; }
}

.draft-room-columns.is-board-view { grid-template-columns: minmax(0, 1fr); }
.draft-room.is-board-view .draft-room-last-pick,
.draft-room.is-board-view .draft-room-history { display: none; }
.draft-room.is-board-view .draft-room-board-scroll { max-height: 75vh; }
.draft-room.is-board-view .draft-room-board { min-height: 55vh; }
.draft-room [data-position="K"] { --position-rgb: 194,215,143; }
.draft-room [data-position="DEF"] { --position-rgb: 177,194,216; }
.draft-room [data-position="DL"] { --position-rgb: 170,180,249; }
.draft-room [data-position="LB"] { --position-rgb: 143,213,218; }
.draft-room [data-position="DB"] { --position-rgb: 243,166,145; }
.draft-room .draft-room-board-pick:not([data-position=""]) { background: color-mix(in srgb, rgb(var(--position-rgb)) 36%, var(--panel)); border: 1px solid rgba(var(--position-rgb),.35); color: var(--text); }
.draft-room .draft-room-board-pick:not([data-position=""]) small,
.draft-room .draft-room-board-pick:not([data-position=""]) span { color: inherit; opacity: .8; }

/* Compact board columns and interactive names */
#draftRoomBoard, .league-draft-board { justify-content: start; }
.draft-room-board-pick { padding: 11px; min-height: 104px; }
.draft-room-board-pick strong { font: 600 13px/1.5 "Sora", sans-serif; }
.draft-room-board-pick small, .draft-room-board-pick span { font-size: 12px; line-height: 1.4; }
.draft-room-board-team { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 6px; min-height: 68px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; font: 600 12px/1.5 "Sora", sans-serif; }
.draft-room-board-team > small { color: var(--muted); font-size: 11px; }
.draft-room-board-team .draft-user-name { flex: 1; min-width: 0; }
.draft-room-board-team.is-your-seat { background: color-mix(in srgb, var(--purple) 18%, var(--panel)); border-color: var(--purple); box-shadow: inset 0 2px var(--purple); }
.draft-board-you { padding: 2px 5px; border-radius: 4px; background: var(--purple); color: #fff; font: 700 9px/1.4 "Sora", sans-serif; }
.draft-board-team-label { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.draft-name-link { display: inline-block; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: transform .18s ease, opacity .18s ease; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.draft-name-link:hover { transform: translateY(-2px); text-decoration-color: currentColor; }
.draft-name-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; text-decoration-color: currentColor; }
.draft-room-board-pick.on-clock { outline: 2px solid var(--purple); outline-offset: -2px; }
.draft-user-popup { max-width: 480px; margin: auto; }
.draft-user-popup :is(h2,p) { margin: 0; }
.draft-user-popup h2 { font: 700 20px/1.4 "Sora", sans-serif; }
.draft-user-popup-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.draft-user-popup-person > div { min-width: 0; overflow-wrap: anywhere; }
.draft-user-popup-person p { color: var(--muted); font-size: 12px; margin-top: 4px; }
.draft-user-menu-actions { display: grid; gap: 8px; margin-top: 24px; }
.draft-user-menu-actions button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; background: var(--panel-soft); color: var(--text); border: 1px solid var(--border); border-radius: 12px; text-align: left; font: 500 13px/1.5 "Sora", sans-serif; cursor: pointer; transition: border-color .18s, transform .18s; }
.draft-user-menu-actions button > span { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: rgba(158,64,186,.14); color: var(--purple-light); font-size: 11px; }
.draft-user-menu-actions button > b { margin-left: auto; }
.draft-user-menu-actions button:hover:not(:disabled) { border-color: var(--purple); transform: translateX(3px); }
.draft-user-menu-actions button:disabled { opacity: .5; cursor: default; }
.draft-user-popup .draft-user-menu-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 18px; }
.draft-public-profile { display: grid; gap: 18px; margin-top: 24px; }
.draft-public-profile-banner { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; }
.draft-public-profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; }
.draft-public-profile-links { display: flex; flex-wrap: wrap; gap: 14px; }
.draft-public-profile-links a { color: var(--purple-light); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .draft-name-link, .draft-user-menu-actions button { transition: none; } .draft-name-link:hover, .draft-user-menu-actions button:hover:not(:disabled) { transform: none; } }

/* Friends and direct messages */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(#page-friends,#page-messages) :is(h1,h2,h3), .social-friend-panels summary { font-family: var(--v17-display); font-weight: 800; letter-spacing: -.045em; }
.social-friends-layout [hidden], .social-message-layout [hidden] { display: none !important; }
.social-friends-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 24px; align-items: start; }
.social-friends-layout .card { padding: 26px; border-radius: 18px; }
.social-friends-layout h2 { margin: 0 0 18px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.social-search-card > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.social-search { display: block; margin: 22px 0 8px; }
.social-search input { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); color: var(--text); font-size: 13px; }
.social-friend-panels { display: grid; gap: 22px; }
.social-friend-panels details > summary { cursor: pointer; font-size: 18px; }
.social-count { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; font: 600 11px var(--v17-display); letter-spacing: 0; color: var(--purple-light); background: rgba(158,64,186,.13); border-radius: 8px; }
.social-person-row { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.social-person-row:last-child { border-bottom: 0; }
.social-avatar { display: grid; flex-shrink: 0; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg,rgba(158,64,186,.24),rgba(158,64,186,.08)); color: var(--text); font: 800 14px var(--v17-display); }
.social-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-person-name { display: grid; gap: 4px; flex: 1; min-width: 0; }
.social-person-name strong { font-size: 13px; overflow-wrap: anywhere; }
.social-person-name small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.social-row-actions { display: flex; align-items: center; gap: 10px; }
.social-person-row .btn { padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.social-text-button { padding: 6px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.social-text-button:hover { color: var(--purple-light); }
.social-pending { font-size: 11px; color: var(--muted); white-space: nowrap; }
.social-empty { padding: 44px 20px; text-align: center; display: grid; justify-items: center; gap: 10px; }
.social-empty > span { font-size: 34px; color: var(--purple-light); }
.social-empty strong { font-size: 14px; }
.social-empty p { color: var(--muted); font-size: 12px; max-width: 280px; line-height: 1.7; margin: 0; }
.social-empty .btn { margin-top: 12px; }
.social-empty-copy { color: var(--muted); font-size: 12px; line-height: 1.7; padding: 16px 0; }
.nav-button { position: relative; }
.social-nav-badge { position: absolute; top: 6px; right: 10px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 6px; background: var(--purple); color: #fff; font-size: 9px; font-weight: 800; line-height: 1; }
.social-message-layout { display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,1.7fr); gap: 22px; height: min(760px,calc(100dvh - 230px)); min-height: 500px; }
.social-message-layout .card { border-radius: 18px; min-width: 0; overflow: hidden; }
.social-inbox { padding: 22px 14px; overflow-y: auto !important; }
.social-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 20px; }
.social-inbox-heading h2 { font-size: 18px; margin: 0; }
.social-conversation { display: flex; width: 100%; align-items: center; gap: 12px; padding: 16px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .15s; }
.social-conversation:hover { background: var(--panel-soft); }
.social-conversation.active { background: rgba(158,64,186,.12); border-color: rgba(158,64,186,.25); }
.social-conversation > span:not(.social-avatar) { display: grid; gap: 5px; min-width: 0; flex: 1; }
.social-conversation strong { font-size: 12px; }
.social-conversation small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-unread { display: grid; place-items: center; flex-shrink: 0; min-width: 21px; height: 21px; border-radius: 7px; background: var(--purple); color: white; font-size: 10px; }
.social-thread { display: flex; flex-direction: column; position: relative; }
.social-thread-welcome { flex: 1; align-content: center; }
.social-thread-welcome h2 { font-size: 25px; margin: 6px 0; }
.social-thread-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.social-thread-header > small { color: var(--muted); font-size: 10px; }
.social-message-list { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
.social-message { display: grid; gap: 5px; justify-items: start; align-self: flex-start; max-width: 82%; }
.social-message.is-new { animation: social-message-in .2s ease-out; }
.social-message.is-own { align-self: flex-end; justify-items: end; }
.social-message-bubble { padding: 12px 16px; background: var(--panel-raised); border-radius: 14px 14px 14px 4px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.social-message.is-own .social-message-bubble { background: var(--purple-dark); color: #fff; border-radius: 14px 14px 4px 14px; }
.social-message-bubble a { color: inherit; text-decoration: underline; }
.social-message > small { color: var(--muted); font-size: 9px; padding: 0 3px; }
.social-composer { padding: 18px 24px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.social-composer textarea { width: 100%; min-height: 48px; max-height: 150px; resize: vertical; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg-soft); color: var(--text); font: inherit; font-size: 13px; }
.social-composer > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
.social-composer button { min-height: 44px; padding: 10px 16px; font-size: 12px; }
.social-composer :disabled { opacity: .45; cursor: default; }
.social-older { align-self: center; margin: 0 0 8px; }
.social-new-messages { position: absolute; bottom: 145px; left: 50%; transform: translateX(-50%); border: 1px solid var(--border); background: var(--panel-raised); color: var(--text); border-radius: 20px; padding: 8px 14px; cursor: pointer; box-shadow: var(--shadow); font-size: 11px; }
.social-mobile-back { display: none; }
:is(#page-friends,#page-messages) :is(button,input,textarea,summary):focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }
@keyframes social-message-in { from { opacity: .6; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 950px) { .social-friends-layout { grid-template-columns: 1fr; } }
@media (max-width: 780px) {
  .social-message-layout { grid-template-columns: minmax(0,1fr); height: calc(100dvh - 230px); min-height: 480px; }
  #page-messages:not(.has-open-thread) .social-thread { display: none; }
  #page-messages.has-open-thread .social-inbox { display: none; }
  .social-mobile-back { display: block; }
  .social-thread-header { padding: 16px; flex-wrap: wrap; }
  .social-thread-header > small { display: none; }
  .social-composer { padding: 14px; }
  .social-message-list { padding: 18px; }
}
@media (max-width: 480px) {
  .social-friends-layout .card { padding: 20px; }
  .social-person-row { flex-wrap: wrap; }
  .social-row-actions { margin-left: 54px; }
  .social-message { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .social-message.is-new { animation: none; } .social-conversation { transition: none; } }

.sidebar-logo .brand-mark {
  filter: brightness(0) invert(1) !important;
}
.sidebar-logo:hover .brand-mark {
  filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(158,64,186,.3)) !important;
}

/* Vectors loading identity: pull back, hold, snap home. */
.vectors-loading-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 44%, rgba(158,64,186,.12), transparent 48%), #0d1015; color: #fff; }
.vectors-loading-screen[hidden] { display: none; }
.vectors-loading-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vectors-loading-mark { display: block; width: clamp(190px, 28vw, 250px); height: auto; margin-bottom: 14px; }
.vectors-loading-title { font: 700 17px/1.5 "Sora", sans-serif; letter-spacing: .38em; margin-left: .38em; }
.vectors-loading-content p { margin: 12px 0 0; color: #9da1b2; font: 400 12px/1.7 "Sora", sans-serif; }
.vectors-loading-line { width: 60px; height: 2px; margin-top: 28px; border-radius: 2px; background: linear-gradient(90deg, transparent, #b76cdd, transparent); box-shadow: 0 0 12px rgba(158,64,186,.3); }
.loading { display: grid; justify-items: center; gap: 16px; padding: 42px 22px; font: 400 13px/1.7 "Sora", sans-serif; }
.loading::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 28px; background: url("/assets/vectors-loader.svg?v=2") center / 94px 94px no-repeat, radial-gradient(ellipse at center, #9e40ba18, transparent 75%), #11131a; border: 1px solid rgba(158,64,186,.14); }
#page-players .loading { display: block; padding: 22px; font: inherit; font-size: 14px; }
#page-players .loading::before { content: none; }

/* Notification center and public profiles */
.notification-wrap { position: relative; }
.notification-bell { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); color: var(--text); cursor: pointer; transition: border-color .18s, background .18s; }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { border-color: var(--purple); background: var(--panel-raised); }
#notificationBadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--purple); color: white; font: 700 10px "Sora", sans-serif; }
.has-critical #notificationBadge { background: #ba3c56; }
#notificationBadge[hidden], .notification-panel[hidden], #notificationMore[hidden] { display: none; }
.notification-panel { position: absolute; right: 0; top: 54px; width: min(460px,calc(100vw - 32px)); max-height: min(760px,calc(100dvh - 100px)); overflow: auto; overscroll-behavior: contain; z-index: 1000; padding: 20px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 22px 65px #0006; text-align: left; }
.notification-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.notification-heading h2 { flex: 1; margin: 0; font: 700 19px "Sora", sans-serif; }
.notification-heading button { font-size: 11px; }
.notification-filters { display: flex; gap: 8px; margin-bottom: 12px; }
#notificationError { color: #d96f88; font-size: 12px; }
.notification-item { position: relative; padding: 15px; border: 1px solid var(--border); border-radius: 13px; margin: 10px 0; }
.notification-item.is-unread { background: rgba(158,64,186,.08); border-left: 3px solid var(--purple); }
.notification-item.is-critical { border-left: 3px solid #cf657c; }
.notification-open { display: grid; gap: 7px; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.notification-open strong { font: 600 12px/1.6 "Sora", sans-serif; }
.notification-open > span:not(.notification-kind) { color: var(--muted); font: 400 12px/1.6 "Sora", sans-serif; }
.notification-open time { font-size: 10px; color: var(--muted); }
.notification-kind { font: 600 9px/1.5 "Sora", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--purple-light); }
.is-critical .notification-kind { color: #d96f88; }
.notification-actions { display: flex; gap: 8px; margin-top: 12px; }
.notification-read { margin-top: 10px; font-size: 10px; }
.notification-settings { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 15px; }
.notification-settings summary { cursor: pointer; font: 600 12px "Sora", sans-serif; }
.notification-settings label { display: flex; align-items: center; gap: 9px; margin: 15px 0; font-size: 12px; }
.notification-settings input { accent-color: var(--purple); }
#socialMessageSuggestions { padding: 18px; border-top: 1px solid var(--border); max-height: 290px; overflow-y: auto; }
#socialMessageSuggestions h3 { margin: 0 0 10px; font: 600 13px "Sora", sans-serif; }
.social-suggestion { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 5px 10px; padding: 12px 0; align-items: center; }
.social-suggestion .social-avatar { width: 36px; height: 36px; grid-row: span 2; }
.social-suggestion .social-person-name { min-width: 0; }
.social-suggestion > small { grid-column: 2; color: var(--muted); font-size: 10px; }
.social-suggestion > button { grid-column: 3; grid-row: 1 / span 2; font-size: 11px; }
.public-profile-cover { height: clamp(130px,20vw,260px); margin-top: 18px; border-radius: 22px; overflow: hidden; background: radial-gradient(ellipse at 80% 10%,#9e40ba44,transparent 65%),var(--panel); border: 1px solid var(--border); }
.public-profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.public-profile-heading { display: flex; align-items: center; gap: 20px; padding: 26px 10px; }
.public-profile-heading .social-avatar { width: 82px; height: 82px; font-size: 24px; border-radius: 22px; }
.public-profile-heading h1 { margin: 0; font: 800 clamp(24px,3vw,38px)/1.2 "Sora",sans-serif; }
.public-profile-heading p { color: var(--muted); font-size: 13px; }
.public-profile-heading > button { margin-left: auto; }
.public-profile-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0,1.5fr); gap: 24px; align-items: start; }
.public-profile-layout .card { padding: 26px; border-radius: 18px; }
.public-profile-layout h2 { font: 700 19px "Sora",sans-serif; margin: 0 0 20px; }
.public-profile-layout aside h2:not(:first-child) { margin-top: 28px; }
.public-profile-main { display: grid; gap: 24px; }
.public-profile-facts { display: grid; gap: 8px; margin: 24px 0; }
.public-profile-facts dt { font-size: 11px; color: var(--muted); }
.public-profile-facts dd { margin: 0 0 10px; font-size: 13px; }
.public-profile-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.public-profile-badges span { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; }
.public-profile-league { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 14px; padding: 18px 0; border-top: 1px solid var(--border); }
.public-profile-league strong { font-size: 13px; }
.public-profile-league span { grid-column: 1; font-size: 11px; color: var(--muted); }
.public-profile-league b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--purple-light); }
.public-profile-post { border-top: 1px solid var(--border); padding: 18px 0; overflow-wrap: anywhere; }
.public-profile-post > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 12px; font-weight: 600; }
.public-profile-post time { color: var(--muted); font-size: 10px; font-weight: 400; }
.public-profile-post p { white-space: pre-wrap; line-height: 1.7; font-size: 13px; }
.public-profile-post .public-profile-post { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
@media (max-width: 760px) { .notification-panel { position: fixed; top: 80px; right: 16px; } .public-profile-layout { grid-template-columns: minmax(0,1fr); } .public-profile-heading { flex-wrap: wrap; } .public-profile-heading > button { margin-left: 0; } .public-profile-heading h1 { overflow-wrap: anywhere; } }


/* === VECTORS V38 MEMBER SEARCH === */

.member-search-wrap {
  position: relative;
  flex: 1 1 420px;
  max-width: 560px;
  min-width: 240px;
  z-index: 70;
}

.member-search-control {
  position: relative;
  display: flex;
  align-items: center;
}

.member-search-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
  opacity: 0.62;
}

.member-search-input {
  width: 100%;
  height: 42px;
  padding: 0 42px 0 42px;

  border:
    1px solid
    var(
      --border,
      rgba(148, 163, 184, 0.18)
    );

  border-radius: 12px;

  background:
    var(
      --card,
      rgba(255, 255, 255, 0.04)
    );

  color:
    var(
      --text,
      inherit
    );

  font: inherit;
  outline: none;

  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.member-search-input::placeholder {
  color:
    var(
      --muted,
      #8992a3
    );
}

.member-search-input:focus {
  border-color:
    rgba(
      122,
      162,
      247,
      0.65
    );

  box-shadow:
    0 0 0 3px
    rgba(
      122,
      162,
      247,
      0.12
    );
}

.member-search-clear {
  position: absolute;
  right: 9px;

  width: 28px;
  height: 28px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: inherit;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;
  opacity: 0.65;
}

.member-search-clear:hover {
  background:
    rgba(
      148,
      163,
      184,
      0.12
    );

  opacity: 1;
}

.member-search-results {
  position: absolute;

  top:
    calc(100% + 9px);

  left: 0;
  right: 0;

  max-height:
    min(
      460px,
      65vh
    );

  overflow: auto;

  padding: 8px;

  border:
    1px solid
    var(
      --border,
      rgba(148, 163, 184, 0.18)
    );

  border-radius: 14px;

  background:
    var(
      --surface,
      var(
        --card,
        #121821
      )
    );

  box-shadow:
    0 18px 48px
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.member-search-result {
  width: 100%;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr)
    auto
    20px;

  align-items: center;

  gap: 11px;

  padding: 10px;

  border: 0;
  border-radius: 10px;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;
}

.member-search-result:hover,
.member-search-result.is-active {
  background:
    rgba(
      122,
      162,
      247,
      0.11
    );
}

.member-search-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 50%;

  background:
    rgba(
      122,
      162,
      247,
      0.15
    );

  font-size: 12px;
  font-weight: 800;
}

.member-search-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.member-search-person {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

.member-search-person strong,
.member-search-person small {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.member-search-person small {
  color:
    var(
      --muted,
      #8992a3
    );
}

.member-search-relationship {
  color:
    var(
      --muted,
      #8992a3
    );

  font-size: 12px;

  white-space: nowrap;
}

.member-search-arrow {
  opacity: 0.55;
}

.member-search-state {
  display: flex;
  flex-direction: column;

  gap: 4px;

  padding:
    18px
    14px;

  color:
    var(
      --muted,
      #8992a3
    );

  font-size: 13px;
}

.member-search-state strong {
  color:
    var(
      --text,
      inherit
    );
}

.member-search-state.is-error {
  color: #ef6b73;
}

@media (max-width: 820px) {
  .member-search-wrap {
    flex-basis: 220px;
    min-width: 0;
    max-width: none;
  }

  .member-search-relationship {
    display: none;
  }

  .member-search-result {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      18px;
  }

  .member-search-avatar {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 560px) {
  .topbar {
    gap: 8px;
  }

  .member-search-wrap {
    flex:
      1
      1
      auto;
  }

  .member-search-input {
    height: 40px;

    padding-left: 38px;

    font-size: 14px;
  }

  .member-search-icon {
    left: 12px;

    width: 16px;
    height: 16px;
  }

  .member-search-results {
    position: fixed;

    top: 68px;

    left: 10px;
    right: 10px;

    max-height:
      min(
        520px,
        calc(
          100vh - 82px
        )
      );
  }
}