:root {
  --bg: #080808;
  --bg-soft: #0d0d0f;
  --surface: #151518;
  --surface-2: #1c1b20;
  --surface-3: #232228;
  --border: #2b2a31;
  --border-soft: #222126;
  --text: #f4f1f8;
  --muted: #a6a0ad;
  --soft: #77717f;
  --purple: #7b5cff;
  --purple-soft: #30264a;
  --purple-border: #4a3a6f;
  --live: #ef3d55;
  --green: #20c997;
  --green-soft: #14352f;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.38);
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@property --a-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 45%;
}

@property --mid-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 45%;
}

@property --mid-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 55%;
}

@property --b-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 55%;
}

@property --a-mix {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}

@property --b-mix {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 38%;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 48% -20%, rgba(123, 92, 255, 0.12), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-synthesis: none;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.008em;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
  height: 4.25rem;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 8, 8, 0.84);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05rem;
  font-weight: 800;
  letter-spacing: 0;
}

.brand span {
  font-size: 1.05rem;
}

.brand b {
  color: #ff4665;
  font-size: 0.92rem;
}

.nav-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar,
.segmented::-webkit-scrollbar {
  display: none;
}

.nav-tabs a {
  min-width: 5.2rem;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

.nav-tabs a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.nav-tabs a.is-active {
  color: var(--text);
  background: linear-gradient(180deg, #302d35, #242229);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.icon-button,
.login-button,
.sign-in,
.refresh,
.notice button {
  border: 0;
  cursor: pointer;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
}

.icon-button:hover {
  background: rgba(255, 255, 255, 0.07);
}

.icon-button.purple {
  color: #a99bff;
}

.sign-in,
.refresh,
.notice button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  border-radius: 999px;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.sign-in {
  color: #111;
  background: #f6f3f8;
}

.login-button {
  min-height: 2.45rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 800;
}

.login-button:hover,
.login-button:focus-visible {
  border-color: rgba(155, 135, 255, 0.58);
  background: rgba(123, 92, 255, 0.16);
}

.login-button[hidden] {
  display: none;
}

.sign-in.is-profile {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: #fff;
  background: linear-gradient(145deg, #7b5cff, #5136bf);
  box-shadow: 0 0 0 1px rgba(165, 142, 255, 0.28), 0 8px 22px rgba(81, 54, 191, 0.28);
}

.sign-in.is-profile:hover,
.sign-in.is-profile:focus-visible {
  background: linear-gradient(145deg, #8c73ff, #6247d0);
  transform: translateY(-1px);
}

.sign-in.is-profile svg {
  width: 1.25rem;
  height: 1.25rem;
}

.refresh,
.notice button {
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

main {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: 4.4rem 3rem 5rem;
}

.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.title-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--text);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-head p {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1rem;
}

.count-pill {
  border-radius: 999px;
  padding: 0.48rem 0.75rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.86rem;
  font-weight: 700;
}

.notice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 5.4rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 1rem 1.2rem;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}

.notice.green {
  background:
    linear-gradient(90deg, rgba(32, 201, 151, 0.12), transparent 48%),
    var(--surface);
}

.notice.purple {
  background:
    linear-gradient(90deg, rgba(123, 92, 255, 0.16), transparent 48%),
    var(--surface);
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
}

.notice.green .notice-icon {
  color: #79f0ce;
  background: rgba(32, 201, 151, 0.16);
}

.notice.purple .notice-icon {
  color: #c4bbff;
  background: rgba(123, 92, 255, 0.2);
}

.notice strong {
  display: block;
  font-size: 0.95rem;
}

.notice p {
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.05rem;
  align-items: center;
  justify-items: center;
  margin: 0 auto 2.6rem;
}

.controls .search-field {
  width: min(100%, 34rem);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0 0.85rem;
  color: var(--soft);
  background: var(--surface);
}

.search-field:focus-within {
  border-color: var(--purple-border);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.12);
}

.search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.search-field input::placeholder {
  color: var(--muted);
}

.segmented {
  position: relative;
  --pill-x: 0px;
  --pill-w: 3rem;
  --pill-accent: var(--purple);
  order: -1;
  display: flex;
  align-items: center;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  padding: 0.3rem;
  overflow-x: auto;
  background: var(--surface);
  scrollbar-width: none;
}

.segmented[hidden],
.team-leagues[hidden] {
  display: none;
}

.segmented::before {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: var(--pill-w);
  border-radius: 0.48rem;
  content: "";
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pill-accent) 34%, transparent), transparent 72%),
    var(--surface-3);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pill-accent) 26%, transparent),
    0 0 18px color-mix(in srgb, var(--pill-accent) 14%, transparent);
  transform: translateX(var(--pill-x));
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    width 280ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.segmented button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 2.4rem;
  border: 0;
  border-radius: 0.48rem;
  padding: 0 1rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.segmented button.is-active {
  color: var(--text);
  background: transparent;
}

.spark {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: var(--spark-len);
  height: 2px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, #fff 0%, #ffd27d 28%, var(--pill-accent) 58%, transparent 100%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--pill-accent) 70%, #fff),
    0 0 14px color-mix(in srgb, var(--pill-accent) 42%, transparent);
  transform: translate3d(0, 0, 0) rotate(var(--angle)) scaleX(0.22);
  transform-origin: left center;
  pointer-events: none;
  animation: spark-fly var(--spark-life) cubic-bezier(0.12, 0.78, 0.26, 1) forwards;
}

.spark::after {
  position: absolute;
  right: -2px;
  top: -1px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  content: "";
  background: #fff5d6;
  box-shadow: 0 0 8px #ffd27d;
}

.sport-emoji {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.24));
  pointer-events: none;
}

.basketball-shot {
  left: 0;
  top: -1.35rem;
  transform: translate3d(var(--ball-start-x), -0.4rem, 0);
}

.football-streak,
.combat-gloves,
.baseball-swing {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.football-streak {
  left: calc(var(--pill-x) + var(--pill-w) / 2 - 1.05rem);
  top: 0.45rem;
}

.segmented.is-passing .football-streak {
  animation: football-pass 920ms cubic-bezier(0.18, 0.84, 0.28, 1) forwards;
}

.combat-gloves {
  left: calc(var(--pill-x) + var(--pill-w) / 2 - 0.72rem);
  top: 0.45rem;
}

.segmented.is-fighting .combat-gloves {
  animation: gloves-clash 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.baseball-swing {
  left: calc(var(--pill-x) + var(--pill-w) / 2 - 1.35rem);
  top: -1rem;
  width: 2.7rem;
  height: 2rem;
  opacity: 0;
}

.baseball-swing::before {
  position: absolute;
  left: 0.2rem;
  top: 1rem;
  width: 2.1rem;
  height: 0.22rem;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, #7c4a22, #f4c37c);
  transform-origin: 0.15rem center;
}

.baseball-swing::after {
  position: absolute;
  right: 0.2rem;
  top: 0.44rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  content: "";
  background: #f5f5f4;
  box-shadow:
    inset 2px 0 0 rgba(239, 61, 85, 0.58),
    0 0 12px rgba(255, 255, 255, 0.58);
}

.segmented.is-hitting .baseball-swing {
  animation: baseball-hit 920ms cubic-bezier(0.16, 0.9, 0.25, 1) forwards;
}

.basketball-shot::before {
  position: absolute;
  left: calc(var(--ball-end-x) - var(--ball-start-x) - 0.16rem);
  width: 1.7rem;
  top: 1.35rem;
  height: 0.58rem;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  content: "";
  filter: drop-shadow(0 0 8px rgba(245, 132, 38, 0.34));
}

.basketball-shot::after {
  position: absolute;
  left: calc(var(--ball-end-x) - var(--ball-start-x) - 0.02rem);
  width: 1.42rem;
  top: 1.23rem;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}

.segmented.is-hooping .basketball-shot {
  animation: hoop-drop 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes football-pass {
  0% {
    opacity: 0;
    transform: translate3d(-2.4rem, 0.25rem, 0) rotate(-38deg) scale(0.78);
  }

  18% {
    opacity: 1;
  }

  58% {
    opacity: 1;
    transform: translate3d(0.35rem, -0.08rem, 0) rotate(100deg) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(2.35rem, -0.2rem, 0) rotate(210deg) scale(0.9);
  }
}

@keyframes gloves-clash {
  0% {
    opacity: 0;
    transform: translate3d(0, -1.1rem, 0) rotate(-24deg) scale(0.84);
    filter: none;
  }

  20% {
    opacity: 1;
  }

  46% {
    opacity: 1;
    transform: translate3d(0, 0.35rem, 0) rotate(8deg) scale(1.08);
  }

  52% {
    opacity: 1;
    transform: translate3d(0, 0.12rem, 0) rotate(-8deg) scale(0.94);
    filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 16px var(--pill-accent));
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0) rotate(18deg) scale(0.88);
  }
}

@keyframes baseball-hit {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--hit-dir) * -1.25rem), 0.35rem, 0) rotate(calc(var(--hit-dir) * -36deg)) scale(0.86);
  }

  16% {
    opacity: 1;
  }

  34% {
    opacity: 1;
    transform: translate3d(-0.2rem, 0.05rem, 0) rotate(calc(var(--hit-dir) * 28deg)) scale(1);
  }

  58% {
    opacity: 1;
    transform: translate3d(calc(var(--hit-dir) * 1rem), -0.34rem, 0) rotate(calc(var(--hit-dir) * 32deg)) scale(0.94);
  }

  100% {
    opacity: 0;
    transform: translate3d(calc(var(--hit-dir) * 2.5rem), -0.9rem, 0) rotate(calc(var(--hit-dir) * 38deg)) scale(0.76);
  }
}

@keyframes hoop-drop {
  0% {
    opacity: 0;
    transform: translate3d(var(--ball-start-x), -0.35rem, 0) rotate(-55deg) scale(0.72);
  }

  18% {
    opacity: 1;
  }

  58% {
    opacity: 1;
    transform: translate3d(
        calc(var(--ball-start-x) + (var(--ball-end-x) - var(--ball-start-x)) * 0.72),
        -1.25rem,
        0
      )
      rotate(145deg)
      scale(1);
  }

  72% {
    opacity: 1;
    transform: translate3d(var(--ball-end-x), 1.08rem, 0) rotate(210deg) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--ball-end-x), 1.85rem, 0) rotate(285deg) scale(0.66);
  }
}

@keyframes spark-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--angle)) scaleX(0.16);
  }

  12% {
    opacity: 1;
  }

  48% {
    opacity: 0.92;
    transform: translate3d(calc(var(--dx) * 0.55), calc(var(--dy) * 0.55), 0) rotate(var(--angle)) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--angle)) scaleX(0.38);
  }
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.2rem;
  align-items: start;
}

.content-grid.is-index {
  grid-template-columns: minmax(0, 1fr);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.section-heading.compact {
  margin-bottom: 0.85rem;
}

.section-heading h2 {
  font-size: 1.55rem;
  line-height: 1.1;
}

.section-heading a {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.event-grid.is-grouped {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.home-status-section {
  display: grid;
  gap: 1.25rem;
}

.home-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.home-status-heading > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.home-status-heading h2 {
  margin: 0;
  font-size: 1.35rem;
}

.home-status-heading span:not(.home-status-dot) {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.home-status-heading > strong {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.75rem;
}

.home-status-section.is-live .home-status-heading > strong {
  color: #ff9aaa;
  background: rgba(239, 61, 85, 0.12);
}

.home-status-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(239, 61, 85, 0.45);
  animation: live-status-pulse 1.8s infinite;
}

.home-status-groups {
  display: grid;
  gap: 2rem;
}

.home-status-empty {
  border: 1px dashed var(--border);
  border-radius: 0.7rem;
  padding: 1.2rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}

@keyframes live-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 61, 85, 0.42);
  }
  50% {
    box-shadow: 0 0 0 0.42rem rgba(239, 61, 85, 0);
  }
}

.sport-group {
  display: grid;
  gap: 0.85rem;
}

.sport-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sport-group-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.sport-group-heading button {
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.sport-group-heading button:hover,
.sport-group-heading button:focus-visible {
  color: var(--accent);
}

.sport-event-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.event-card {
  position: relative;
  --a-end: 34%;
  --mid-start: 42%;
  --mid-end: 58%;
  --b-start: 66%;
  --a-mix: 34%;
  --b-mix: 32%;
  min-height: 14.5rem;
  border: 0;
  border-radius: 0.65rem;
  padding: 1.05rem;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) var(--a-mix), #141318) 0 var(--a-end),
      color-mix(in srgb, var(--team-a, #30264a) 24%, #141318) var(--mid-start),
      color-mix(in srgb, var(--team-a, #30264a) 12%, var(--team-b, #151518) 12%) 50%,
      color-mix(in srgb, var(--team-b, #151518) 24%, #141318) var(--mid-end),
      color-mix(in srgb, var(--team-b, #151518) var(--b-mix), #141318) var(--b-start) 100%
    ),
    var(--surface);
  box-shadow: var(--shadow);
  transition:
    --a-end 260ms cubic-bezier(0.22, 1, 0.36, 1),
    --mid-start 260ms cubic-bezier(0.22, 1, 0.36, 1),
    --mid-end 260ms cubic-bezier(0.22, 1, 0.36, 1),
    --b-start 260ms cubic-bezier(0.22, 1, 0.36, 1),
    --a-mix 260ms ease,
    --b-mix 260ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.event-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.16), rgba(8, 8, 8, 0.58)),
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.04), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 44%, rgba(255, 255, 255, 0.024));
  pointer-events: none;
}

.event-card::after {
  display: none;
}

.hover-zones {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
}

.hover-zone {
  pointer-events: auto;
}

.event-card:hover,
.event-card.is-selected {
  --a-mix: 42%;
  --b-mix: 40%;
  transform: translateY(-2px);
}

.event-card.hover-left,
.event-card.is-selected.hover-left {
  --a-end: 50%;
  --mid-start: 58%;
  --mid-end: 72%;
  --b-start: 78%;
  --a-mix: 46%;
  --b-mix: 23%;
}

.event-card.hover-right,
.event-card.is-selected.hover-right {
  --a-end: 22%;
  --mid-start: 28%;
  --mid-end: 42%;
  --b-start: 50%;
  --a-mix: 23%;
  --b-mix: 46%;
}

.redzone-single-card .matchup {
  justify-content: center;
}

.redzone-single-card .redzone-center-logo {
  width: 5.4rem;
  height: 5.4rem;
}

.redzone-single-card:hover .redzone-center-logo,
.redzone-single-card:focus-visible .redzone-center-logo {
  transform: translateY(-0.2rem) scale(1.1);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.48));
}

.card-bottom,
.matchup,
.team,
.card-time {
  position: relative;
  z-index: 3;
}

.card-bottom,
.matchup,
.team {
  display: flex;
  align-items: center;
}

.card-time {
  display: block;
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.card-bottom {
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.league {
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.matchup {
  justify-content: space-between;
  gap: 0.8rem;
  margin: 1.6rem 0 1.4rem;
}

.team {
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  text-align: center;
}

.card-live-score {
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.badge-logo {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  font-size: 1.35rem;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms ease;
}

.badge-logo img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.36));
}

.badge-logo:not(.fallback) span {
  display: none;
}

.badge-logo.fallback {
  color: var(--text);
}

.badge-logo.fallback img {
  display: none;
}

.event-card.hover-left .home-logo,
.event-card.hover-right .away-logo {
  transform: translateY(-0.2rem) scale(1.18);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.46));
}

.event-card.hover-left .away-logo,
.event-card.hover-right .home-logo {
  transform: scale(0.94);
}

.team span:last-child {
  width: 100%;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.versus {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  min-height: 1.35rem;
  border-radius: 999px;
  color: var(--soft);
  background: rgba(8, 8, 8, 0.46);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  font-weight: 800;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.status::before,
.live-dot {
  content: "";
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 4px rgba(239, 61, 85, 0.12);
}

.side-panel {
  position: sticky;
  top: 5.4rem;
  display: grid;
  gap: 1rem;
  max-height: calc(100vh - 6.4rem);
  padding-right: 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(155, 135, 255, 0.5) transparent;
  scrollbar-width: thin;
}

.side-panel::-webkit-scrollbar {
  width: 0.35rem;
}

.side-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(155, 135, 255, 0.5);
}

.side-panel::-webkit-scrollbar-track {
  background: transparent;
}

.side-panel[hidden] {
  display: none;
}

.watch-card[hidden],
.schedule-card[hidden] {
  display: none;
}

.favorite-team-card {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.favorite-team-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.favorite-team-head h2,
.favorite-team-head p,
.favorite-panel-title h3,
.favorite-panel-empty h2,
.favorite-panel-empty p {
  margin: 0;
}

.favorite-team-head p,
.favorite-panel-empty p,
.favorite-panel-message {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.favorite-team-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
}

.favorite-team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.favorite-team-logo > span {
  display: none;
}

.favorite-standing {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  border-radius: 0.6rem;
  padding: 0.85rem;
  background: var(--surface-2);
}

.favorite-standing span,
.favorite-standing p {
  color: var(--muted);
  font-size: 0.76rem;
}

.favorite-standing strong {
  grid-row: span 2;
  font-size: 1.65rem;
}

.favorite-standing p {
  margin: 0.15rem 0 0;
}

.favorite-panel-section,
.favorite-game-list,
.favorite-news-list,
.favorite-panel-empty {
  display: grid;
  gap: 0.65rem;
}

.favorite-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.favorite-panel-title h3 {
  font-size: 0.9rem;
}

.favorite-panel-title span {
  color: var(--muted);
  font-size: 0.75rem;
}

.favorite-game {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  border-left: 2px solid var(--team-a);
  padding: 0.6rem 0.65rem;
  background: var(--surface-2);
}

.favorite-game div,
.favorite-news-item {
  display: grid;
  gap: 0.18rem;
}

.favorite-game strong,
.favorite-news-item strong {
  font-size: 0.78rem;
}

.favorite-game span,
.favorite-game time,
.favorite-news-item span {
  color: var(--muted);
  font-size: 0.68rem;
}

.favorite-game time {
  max-width: 7rem;
  text-align: right;
}

.favorite-news-item {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0;
  color: var(--text);
  text-decoration: none;
}

.favorite-news-item:hover strong,
.favorite-news-item:focus-visible strong {
  color: var(--accent);
}

.favorite-panel-empty button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.watch-card,
.schedule-card {
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.watch-card {
  overflow: hidden;
}

.player {
  position: relative;
  min-height: 13.5rem;
  padding: 1rem;
  overflow: hidden;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) 40%, #141318) 0 35%,
      color-mix(in srgb, var(--team-a, #30264a) 24%, #141318) 43%,
      color-mix(in srgb, var(--team-a, #30264a) 12%, var(--team-b, #151518) 12%) 50%,
      color-mix(in srgb, var(--team-b, #151518) 24%, #141318) 57%,
      color-mix(in srgb, var(--team-b, #151518) 38%, #141318) 65% 100%
    ),
    linear-gradient(180deg, #1e1d24, #080808);
}

.player::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.1), rgba(8, 8, 8, 0.76)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 45%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.player::after {
  display: none;
}

.scoreboard {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scoreboard span {
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  background: var(--live);
  letter-spacing: 0;
}

.teams {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 10rem;
}

.preview-logo {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.68);
}

.preview-logo img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 9px 20px rgba(0, 0, 0, 0.38));
}

.preview-logo:not(.fallback) span {
  display: none;
}

.teams b {
  color: var(--soft);
  font-size: 0.8rem;
}

.watch-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.6rem;
  padding: 1rem;
}

.watch-meta .live-dot {
  margin-top: 0.35rem;
}

.watch-meta p {
  font-weight: 800;
}

.watch-meta strong {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.82rem;
}

.smart-player {
  display: grid;
  gap: 0.65rem;
  padding: 0 1rem 1rem;
}

.smart-player-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

.smart-player-tabs button {
  min-height: 2rem;
  border: 0;
  border-radius: 0.45rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.smart-player-tabs button.is-active,
.smart-player-tabs button:hover {
  color: var(--text);
  background: var(--purple-soft);
}

.smart-player-rail {
  display: grid;
  gap: 0.45rem;
  max-height: 11rem;
  overflow: auto;
  scrollbar-width: none;
}

.smart-player-rail::-webkit-scrollbar {
  display: none;
}

.smart-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  border: 0;
  border-radius: 0.52rem;
  padding: 0.55rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  text-align: left;
}

.smart-source.is-active,
.smart-source:hover {
  background:
    linear-gradient(135deg, rgba(123, 92, 255, 0.18), transparent 76%),
    rgba(255, 255, 255, 0.055);
}

.smart-source span,
.smart-player-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
}

.smart-source em {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.smart-player-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 0.65rem;
  align-items: center;
  border-radius: 0.58rem;
  padding: 0.7rem;
  background: rgba(8, 8, 8, 0.26);
}

.smart-player-info span,
.smart-player-info p {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.smart-player-info button {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 2.1rem;
  border: 0;
  border-radius: 999px;
  padding: 0 0.75rem;
  color: #111;
  background: #f6f3f8;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0 1rem 1rem;
}

.panel-tabs button {
  min-height: 2.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.45rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}

.panel-tabs button.is-active {
  color: var(--text);
  background: var(--purple-soft);
  border-color: var(--purple-border);
}

.chat-list {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid var(--border-soft);
  padding: 1rem;
}

.chat-list p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.chat-list b {
  color: var(--text);
}

.schedule-card {
  padding: 1rem;
}

.schedule-list {
  display: grid;
  gap: 0.6rem;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.55rem;
  border-radius: 0.55rem;
  padding: 0.7rem;
  background: var(--bg-soft);
}

.schedule-logo {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.45rem;
  background: var(--surface-2);
  overflow: hidden;
  color: var(--purple);
  font-size: 0.72rem;
  font-weight: 800;
}

.schedule-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.schedule-logo:not(.fallback) span {
  display: none;
}

.schedule-time {
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 800;
}

.schedule-item strong {
  display: block;
  font-size: 0.84rem;
}

.schedule-item span {
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.plus {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-2);
}

.empty-state {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 2rem;
  color: var(--muted);
  background: var(--surface);
}

.stream-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  min-width: 320px;
  padding: 1.5rem;
  color: var(--text);
  background:
    radial-gradient(circle at 44% 38%, color-mix(in srgb, var(--stream-focus, #7b5cff) 28%, transparent), transparent 18rem),
    radial-gradient(circle at 62% 56%, color-mix(in srgb, var(--stream-opponent, #141318) 22%, transparent), transparent 21rem),
    linear-gradient(135deg, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.98));
  opacity: 0;
  visibility: hidden;
  transform: scale(1.012);
  transition:
    opacity 280ms ease,
    visibility 280ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stream-loader::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 7rem);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.stream-loader.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.stream-loader-back {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 4;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.stream-loader-back:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.05);
}

.stream-loader-panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(24rem, 86vw);
  text-align: center;
}

.stream-loader-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  margin-bottom: 1.45rem;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 48%, transparent 72%),
    rgba(8, 8, 8, 0.24);
  box-shadow:
    0 0 60px color-mix(in srgb, var(--stream-focus, #7b5cff) 30%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: stream-mark-float 2.2s ease-in-out infinite;
}

.stream-loader-mark img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5));
}

.stream-loader-fallback {
  color: var(--text);
  font-size: 1.85rem;
  font-weight: 800;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}

.stream-loader-line {
  width: 2.4rem;
  height: 1px;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.24);
  transform-origin: center;
  animation: stream-line-grow 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stream-loader p {
  margin: 0;
  color: rgba(244, 241, 248, 0.58);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
}

.stream-loader p b {
  color: rgba(244, 241, 248, 0.78);
  font-weight: 700;
}

.stream-loader strong {
  display: block;
  max-width: 100%;
  margin-top: 0.45rem;
  color: rgba(244, 241, 248, 0.34);
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
}

.stream-player[hidden] {
  display: none;
}

.stream-loader.is-playing .stream-loader-panel {
  display: none;
}

.stream-loader.is-playing {
  padding: 0;
  background: #000;
}

.stream-loader.is-playing::before {
  display: none;
}

.stream-switcher {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: min(22rem, 88vw);
  padding: 4.6rem 1rem 1rem;
  color: #fff;
  background: linear-gradient(90deg, rgba(8, 8, 10, 0.98), rgba(14, 13, 18, 0.96));
  box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, 0.48);
  outline: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateX(calc(-100% + 1.1rem));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stream-switcher::-webkit-scrollbar {
  display: none;
}

.stream-switcher:hover,
.stream-switcher:focus,
.stream-switcher:focus-within {
  transform: translateX(0);
}

.stream-switcher-heading {
  display: grid;
  gap: 0.18rem;
  padding: 0 0.35rem 0.8rem;
}

.stream-switcher-heading span,
.stream-switcher-game > div > span {
  color: #ef3854;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stream-switcher-heading strong {
  font-size: 1.2rem;
}

.stream-switcher-list {
  display: grid;
  gap: 0.7rem;
}

.stream-switcher-game {
  display: grid;
  gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.045);
}

.stream-switcher-game > div:first-child {
  display: grid;
  gap: 0.14rem;
}

.stream-switcher-game > div > b {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-switcher-game > div > small,
.stream-switcher-feed small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
}

.stream-switcher-feeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.stream-switcher-feed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.stream-switcher-feed:not(:disabled):hover,
.stream-switcher-feed.is-current {
  border-color: rgba(143, 112, 255, 0.7);
  background: rgba(113, 81, 238, 0.2);
  transform: translateY(-1px);
}

.stream-switcher-feed:disabled {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.025);
  cursor: not-allowed;
}

.stream-switcher-feed:disabled .stream-switcher-logo {
  opacity: 0.5;
  filter: grayscale(0.75);
}

.stream-switcher-feed > span:last-child {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.stream-switcher-feed b {
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-switcher-logo {
  position: relative;
  display: grid;
  flex: 0 0 1.8rem;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
}

.stream-switcher-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.stream-switcher-logo > span {
  display: none;
  font-size: 0.58rem;
  font-weight: 800;
}

.stream-switcher-logo.fallback > span {
  display: block;
}

.stream-switcher-empty {
  margin: 0;
  padding: 1rem 0.35rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  line-height: 1.5;
}

.stream-player-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}

.stream-player-frame video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.stream-cast {
  display: none;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.58rem;
  border: 0;
  border-radius: 0.6rem;
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.stream-cast.is-supported {
  display: grid !important;
}

.stream-cast {
  --connected-color: #8f70ff;
  --disconnected-color: rgba(255, 255, 255, 0.86);
  flex: 0 0 2.35rem;
  visibility: visible;
}

.stream-cast:hover {
  background: rgba(255, 255, 255, 0.11);
}

.stream-cast.is-loading {
  color: #f0c45a;
  animation: stream-cast-pulse 1s ease-in-out infinite alternate;
}

.stream-cast.is-connected {
  color: #64dba9;
  background: rgba(45, 185, 130, 0.14);
}

.stream-cast.is-error {
  color: #ff6b7f;
  background: rgba(239, 56, 84, 0.14);
}

@keyframes stream-cast-pulse {
  to { opacity: 0.48; }
}

.stream-dvr-tools {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: min(calc(100% - 2rem), 74rem);
  min-height: 3.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1rem;
  background: rgba(12, 12, 15, 0.82);
  box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 220ms ease, transform 220ms ease;
}

.stream-dvr-tools.is-controls-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.45rem);
}

.stream-dvr-seek {
  display: inline-flex;
  align-items: center;
  justify-content: stretch;
  gap: 0.48rem;
  flex: 1 1 auto;
  min-width: 8rem;
  min-height: 2.35rem;
  padding: 0 0.45rem;
  color: rgba(255, 255, 255, 0.76);
}

.stream-dvr-seek {
  width: auto;
}

.stream-dvr-seek > span,
.stream-dvr-seek > b {
  flex: 0 0 auto;
  min-width: 2.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.stream-dvr-seek input {
  flex: 1 1 auto;
  min-width: 7rem;
  height: 1rem;
  margin: 0;
  accent-color: #ef3854;
  cursor: pointer;
}

.stream-control-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.1rem;
}

.stream-control-button {
  display: grid;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0.58rem;
  place-items: center;
  border: 0;
  border-radius: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.stream-control-button:hover,
.stream-control-button:focus-visible,
.stream-control-button.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.11);
  outline: none;
}

.stream-control-button svg {
  width: 1.18rem;
  height: 1.18rem;
  fill: currentColor;
}

.stream-play-pause .stream-icon-play,
.stream-play-pause.is-paused .stream-icon-pause,
.stream-control-button .stream-icon-muted,
.stream-control-button.is-muted .stream-icon-volume,
.stream-control-button .stream-icon-compress,
.stream-control-button.is-fullscreen .stream-icon-expand {
  display: none;
}

.stream-play-pause.is-paused .stream-icon-play,
.stream-control-button.is-muted .stream-icon-muted,
.stream-control-button.is-fullscreen .stream-icon-compress {
  display: block;
}

.stream-volume {
  width: 4.5rem;
  height: 1rem;
  margin: 0 0.2rem 0 0;
  accent-color: #8f70ff;
  cursor: pointer;
}

.stream-control-button[hidden],
.stream-cast[hidden] {
  display: none !important;
}

.stream-dvr-seek input::-webkit-slider-runnable-track {
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.stream-dvr-seek input::-webkit-slider-thumb {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.325rem;
  border: 0;
  border-radius: 50%;
  background: #ef3854;
  box-shadow: 0 0 0 0.2rem rgba(239, 56, 84, 0.2);
  -webkit-appearance: none;
}

.stream-go-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 2.2rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.07);
  cursor: default;
}

.stream-dvr-seek[hidden],
.stream-go-live[hidden] {
  display: none;
}

.stream-go-live span {
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 999px;
  background: #ef3854;
  box-shadow: 0 0 12px rgba(239, 56, 84, 0.7);
}

.stream-go-live b {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stream-go-live.is-behind {
  color: #fff;
  border-color: rgba(239, 56, 84, 0.58);
  background: rgba(187, 25, 51, 0.84);
  box-shadow: 0 0.7rem 2rem rgba(187, 25, 51, 0.28);
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}

.stream-go-live.is-behind:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.stream-buffering {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.stream-buffering[hidden] {
  display: none;
}

.stream-buffering span {
  width: 1.75rem;
  height: 1.75rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.24);
  border-top-color: #fff;
  border-radius: 999px;
  animation: stream-buffer-spin 0.75s linear infinite;
}

@keyframes stream-buffer-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .stream-dvr-tools {
    width: calc(100% - 0.75rem);
    padding-inline: 0.3rem;
    gap: 0.12rem;
  }

  .stream-dvr-seek {
    min-width: 5rem;
    padding-inline: 0.2rem;
  }

  .stream-dvr-seek > span {
    display: none;
  }

  .stream-volume,
  #streamPip {
    display: none !important;
  }

  .stream-control-button,
  .stream-cast {
    flex-basis: 2.15rem;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0.52rem;
  }

  .stream-go-live {
    padding-inline: 0.55rem;
  }
}

.stream-player-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 2rem;
  text-align: center;
  background: rgba(8, 8, 10, 0.92);
}

.stream-player-error[hidden] {
  display: none;
}

.stream-player-error strong {
  color: #fff;
  font-size: 1.1rem;
}

.stream-player-error span {
  max-width: 28rem;
  color: rgba(244, 241, 248, 0.62);
  font-size: 0.82rem;
}

.stream-player-error button {
  min-height: 2.5rem;
  margin-top: 0.45rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(155, 135, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  background: #7151ee;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 680px) {
  .stream-player {
    width: 100vw;
  }
}

.signal-bars {
  display: flex;
  align-items: end;
  gap: 0.22rem;
  height: 2rem;
  margin-top: 1.5rem;
}

.signal-bars span {
  width: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stream-focus, #7b5cff) 45%, #fff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--stream-focus, #7b5cff) 38%, transparent);
  animation: stream-signal 1.08s ease-in-out infinite;
}

.signal-bars span:nth-child(1) {
  height: 0.65rem;
  animation-delay: 0ms;
}

.signal-bars span:nth-child(2) {
  height: 0.95rem;
  animation-delay: 120ms;
}

.signal-bars span:nth-child(3) {
  height: 1.28rem;
  animation-delay: 240ms;
}

.signal-bars span:nth-child(4) {
  height: 1.62rem;
  animation-delay: 360ms;
}

.signal-bars span:nth-child(5) {
  height: 1.95rem;
  animation-delay: 480ms;
}

.stream-loader.is-ready .stream-loader-mark {
  box-shadow:
    0 0 70px color-mix(in srgb, var(--green) 38%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.stream-loader.is-ready .signal-bars span {
  background: color-mix(in srgb, var(--green) 55%, #fff);
}

@keyframes stream-mark-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-0.35rem) scale(1.025);
  }
}

@keyframes stream-line-grow {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes stream-signal {
  0%,
  100% {
    opacity: 0.32;
    transform: scaleY(0.55);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.teams-view {
  display: grid;
  gap: 1.4rem;
}

.teams-view[hidden],
[hidden] {
  display: none !important;
}

.teams-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  align-items: center;
  min-height: 16rem;
  border-radius: 0.75rem;
  padding: 2rem;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(123, 92, 255, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--surface);
  box-shadow: var(--shadow);
}

.teams-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 76% 40%, rgba(239, 61, 85, 0.14), transparent 18rem),
    radial-gradient(circle at 62% 82%, rgba(32, 201, 151, 0.12), transparent 16rem);
  pointer-events: none;
}

.teams-hero > div {
  position: relative;
  z-index: 1;
}

.teams-hero p {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1rem;
}

.teams-hero-stack {
  min-height: 12rem;
}

.team-orbit {
  position: absolute;
  display: grid;
  place-items: center;
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 36px rgba(0, 0, 0, 0.32);
}

.team-orbit img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.34));
}

.team-orbit.one {
  right: 13rem;
  top: 2.1rem;
}

.team-orbit.two {
  right: 5.2rem;
  top: 4.3rem;
}

.team-orbit.three {
  right: 10rem;
  bottom: 1.8rem;
}

.team-tools {
  display: grid;
  grid-template-columns: minmax(17rem, 24rem) 1fr;
  gap: 1rem;
  align-items: center;
}

.team-leagues {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  padding: 0.3rem;
  overflow-x: auto;
  background: var(--surface);
  scrollbar-width: none;
}

.team-leagues::-webkit-scrollbar {
  display: none;
}

.team-leagues button {
  flex: 0 0 auto;
  min-height: 2.4rem;
  border: 0;
  border-radius: 0.48rem;
  padding: 0 1rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
}

.team-leagues button:hover,
.team-leagues button.is-active {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(123, 92, 255, 0.26), transparent 72%),
    var(--surface-3);
}

.onboarding-sports button.has-selection::after {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: #20c997;
  content: "";
  vertical-align: middle;
}

.onboarding-sports {
  width: 100%;
  gap: 0.42rem;
  padding: 0.28rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.78rem;
  background: rgba(255, 255, 255, 0.026);
}

.onboarding-sports button {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  min-height: 3.05rem;
  border-radius: 0.62rem;
  padding: 0 0.78rem;
}

.onboarding-sports button img {
  width: 1.78rem;
  height: 1.78rem;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.36));
}

.onboarding-sports button span {
  line-height: 1;
}

.onboarding-sports button.has-selection::after {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  margin-left: 0;
}

.league-intel {
  display: grid;
  gap: 1rem;
}

.league-intel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.league-intel-head h2 {
  margin-top: 0.25rem;
  font-size: 1.55rem;
}

.league-intel-tabs {
  justify-self: end;
}

.league-intel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.league-intel-card {
  min-height: 13rem;
  border-radius: 0.72rem;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(123, 92, 255, 0.16), transparent 9rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--surface);
  box-shadow: var(--shadow);
}

.league-intel-card > span {
  display: block;
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.league-intel-card > strong {
  display: block;
  margin-top: 0.7rem;
  font-size: 1.55rem;
  line-height: 1.08;
}

.league-intel-card p {
  margin-top: 0.65rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.league-intel-card.hero-card {
  background:
    radial-gradient(circle at 90% 24%, rgba(32, 201, 151, 0.18), transparent 10rem),
    linear-gradient(135deg, rgba(123, 92, 255, 0.2), transparent 58%),
    var(--surface);
}

.league-intel-card.list-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.league-intel-row,
.odds-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.58rem;
  padding: 0.62rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--team-a, var(--team-color, #7b5cff)) 18%, transparent), transparent 76%),
    rgba(255, 255, 255, 0.035);
}

.league-intel-row strong,
.odds-line b {
  display: block;
  font-size: 0.88rem;
  line-height: 1.18;
}

.league-intel-row span,
.league-intel-row em,
.odds-line em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.league-intel-row > em {
  color: var(--soft);
}

.league-intel-logos {
  display: flex;
  align-items: center;
}

.league-intel-logos .schedule-team-logo + .schedule-team-logo {
  margin-left: -0.55rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.team-card {
  position: relative;
  display: grid;
  min-height: 16rem;
  border: 0;
  border-radius: 0.7rem;
  padding: 1rem;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--team-color) 34%, #141318) 0 42%, #141318 100%),
    var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.team-card:hover,
.team-card:focus-visible {
  transform: translateY(-3px);
  outline: 0;
}

.team-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--team-accent) 28%, transparent), transparent 10rem),
    linear-gradient(180deg, rgba(8, 8, 8, 0.1), rgba(8, 8, 8, 0.64));
  pointer-events: none;
}

.team-card-top,
.team-page-logo,
.team-card-info,
.team-open {
  position: relative;
  z-index: 1;
}

.team-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-card-top b {
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  color: var(--text);
  background: rgba(8, 8, 8, 0.38);
  letter-spacing: 0;
  text-transform: none;
}

.team-page-logo {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 7.2rem;
  height: 7.2rem;
  margin: 0.8rem 0;
  color: var(--text);
  font-size: 1.65rem;
  font-weight: 800;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.64);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.team-page-logo::before {
  position: absolute;
  inset: 0.15rem;
  border-radius: 999px;
  content: "";
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035) 38%, transparent 68%),
    radial-gradient(circle, rgba(0, 0, 0, 0.46), transparent 70%);
  filter: blur(1px);
  opacity: 0.86;
}

.team-card:hover .team-page-logo,
.team-card:focus-visible .team-page-logo {
  transform: scale(1.08);
}

.team-page-logo img {
  position: relative;
  z-index: 1;
  width: 96%;
  height: 96%;
  object-fit: contain;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.42));
}

.team-page-logo:not(.fallback) span {
  display: none;
}

.team-page-logo.fallback span {
  position: relative;
  z-index: 1;
}

.team-page-logo.fallback img {
  display: none;
}

.team-card-info {
  align-self: end;
}

.team-card-info h2 {
  max-width: 100%;
  font-size: 1.2rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.team-card-info span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.team-open {
  justify-self: start;
  min-height: 2.2rem;
  border: 1px solid color-mix(in srgb, var(--team-accent) 28%, var(--border-soft));
  border-radius: 999px;
  margin-top: 0.85rem;
  padding: 0 0.9rem;
  color: var(--text);
  background: rgba(8, 8, 8, 0.28);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}

.live-tv-view {
  display: grid;
  gap: 1.4rem;
}

.live-tv-view[hidden] {
  display: none !important;
}

.live-tv-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 1.5rem;
  min-height: 13rem;
  border-radius: 0.75rem;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(123, 92, 255, 0.22), transparent 18rem),
    radial-gradient(circle at 50% 105%, rgba(239, 61, 85, 0.11), transparent 19rem),
    linear-gradient(120deg, rgba(32, 201, 151, 0.08), transparent 48%),
    var(--surface);
  box-shadow: var(--shadow);
}

.live-tv-hero p {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--muted);
}

.live-tv-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.live-tv-search {
  width: min(100%, 38rem);
}

.live-tv-countries {
  flex: 0 0 auto;
}

.live-tv-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.live-tv-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 15rem;
  border: 0;
  border-radius: 0.68rem;
  padding: 1rem;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--channel-accent) 28%, transparent), transparent 8rem),
    linear-gradient(145deg, color-mix(in srgb, var(--channel-accent) 22%, #141318) 0 36%, #101014 100%);
  box-shadow: var(--shadow);
  transition:
    transform 180ms ease,
    filter 180ms ease;
}

.live-tv-card:hover,
.live-tv-card:focus-visible {
  transform: translateY(-3px);
  outline: 0;
}

.live-tv-logo {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
  width: 7rem;
  height: 5.2rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.live-tv-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42));
}

.live-tv-logo:not(.fallback) span {
  display: none;
}

.live-tv-logo.fallback img {
  display: none;
}

.live-tv-info {
  position: relative;
  display: grid;
  gap: 0.4rem;
}

.live-tv-info h2 {
  font-size: 0.98rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.live-tv-info span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.live-tv-guide {
  position: relative;
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--channel-accent) 42%, rgba(255, 255, 255, 0.08));
  border-radius: 0.52rem;
  margin-top: 0.75rem;
  padding: 0.62rem 0.68rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--channel-accent) 18%, transparent), transparent 78%),
    rgba(8, 8, 8, 0.44);
  box-shadow: 0 0 18px color-mix(in srgb, var(--channel-accent) 10%, transparent);
}

.live-tv-guide span,
.live-tv-guide em {
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.live-tv-guide span {
  color: color-mix(in srgb, var(--channel-accent) 64%, #ffffff);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-tv-guide strong,
.live-tv-guide em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-tv-guide strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
}

.live-tv-guide.muted strong {
  color: var(--muted);
}

.schedule-view {
  display: grid;
  gap: 1.4rem;
}

.schedule-view[hidden] {
  display: none !important;
}

.schedule-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  align-items: end;
  gap: 1.5rem;
  min-height: 13rem;
  border-radius: 0.75rem;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(239, 61, 85, 0.14), transparent 18rem),
    radial-gradient(circle at 45% 90%, rgba(32, 201, 151, 0.1), transparent 18rem),
    linear-gradient(120deg, rgba(123, 92, 255, 0.18), transparent 50%),
    var(--surface);
  box-shadow: var(--shadow);
}

.schedule-hero p {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--muted);
}

.schedule-hero-card {
  border-radius: 0.65rem;
  padding: 1rem;
  background: rgba(8, 8, 8, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.schedule-hero-card span,
.schedule-timezone {
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.schedule-hero-card strong {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.1rem;
}

.schedule-hero-card p {
  margin-top: 0.32rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.schedule-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.schedule-board > .section-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.schedule-board .schedule-sports {
  justify-content: center;
  justify-self: center;
  width: min(100%, 38rem);
  margin: 0;
}

.date-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-color: rgba(155, 135, 255, 0.45) transparent;
  scrollbar-width: thin;
}

.date-rail button {
  display: grid;
  gap: 0.18rem;
  min-height: 4.35rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.62rem;
  padding: 0.75rem;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.date-rail button:hover,
.date-rail button.is-active {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(123, 92, 255, 0.22), transparent 72%),
    var(--surface-3);
}

.date-rail span {
  color: var(--soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.date-rail strong {
  font-size: 0.96rem;
}

.date-rail em {
  color: var(--soft);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 700;
}

.schedule-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: 1.1rem;
  align-items: start;
}

.schedule-board,
.schedule-focus {
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.schedule-board {
  padding: 1rem;
}

.schedule-timeline {
  display: grid;
  gap: 0.85rem;
}

.schedule-time-group {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.schedule-time-group > time {
  position: sticky;
  top: 5.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.schedule-game-stack {
  display: grid;
  gap: 0.65rem;
}

.schedule-game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  min-height: 6rem;
  border-radius: 0.62rem;
  padding: 0.9rem;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) 28%, #141318) 0 38%,
      color-mix(in srgb, var(--team-a, #30264a) 10%, var(--team-b, #151518) 10%) 50%,
      color-mix(in srgb, var(--team-b, #151518) 28%, #141318) 62% 100%
    ),
    var(--bg-soft);
  outline: 0;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.schedule-game:hover,
.schedule-game:focus-visible,
.schedule-game.is-selected {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

.schedule-game-main,
.schedule-game-meta {
  position: relative;
  z-index: 1;
}

.schedule-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
}

.schedule-mini-team {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.schedule-mini-team:last-child {
  justify-content: end;
}

.schedule-mini-team span {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-mini-score {
  margin-left: auto;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.schedule-mini-team:last-child .schedule-mini-score {
  margin-right: auto;
  margin-left: 0;
  order: -1;
}

.schedule-team-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
}

.schedule-team-logo img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
}

.schedule-team-logo:not(.fallback) span {
  display: none;
}

.schedule-matchup b {
  color: var(--soft);
  font-size: 0.72rem;
}

.schedule-game-meta {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 0.25rem;
  min-width: 6.5rem;
}

.schedule-game-meta span {
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
  color: var(--text);
  background: rgba(8, 8, 8, 0.42);
  font-size: 0.74rem;
  font-weight: 800;
}

.schedule-game-meta strong,
.schedule-game-meta em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.schedule-focus {
  position: sticky;
  top: 5.4rem;
  max-height: calc(100vh - 6.4rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(155, 135, 255, 0.45) transparent;
  scrollbar-width: thin;
}

.schedule-focus-player {
  position: relative;
  min-height: 13rem;
  padding: 1rem;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) 40%, #141318) 0 35%,
      color-mix(in srgb, var(--team-a, #30264a) 12%, var(--team-b, #151518) 12%) 50%,
      color-mix(in srgb, var(--team-b, #151518) 38%, #141318) 65% 100%
    ),
    linear-gradient(180deg, #1e1d24, #080808);
}

.schedule-focus-team {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.schedule-focus-team > strong {
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.schedule-focus-meta {
  padding: 1rem;
}

.schedule-focus-empty {
  display: grid;
  align-content: center;
  min-height: 16rem;
  padding: 1.2rem;
}

.schedule-focus-empty h2 {
  margin-top: 0.45rem;
}

.schedule-focus-empty p {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.schedule-focus-meta h2 {
  font-size: 1.25rem;
}

.schedule-focus-meta p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.schedule-comparison {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.62rem;
  padding: 0.75rem;
  background: rgba(8, 8, 8, 0.24);
}

.schedule-comparison-head,
.schedule-comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
  text-align: center;
}

.schedule-comparison-head {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.55rem;
}

.schedule-comparison-head strong {
  color: var(--text);
  font-size: 0.78rem;
}

.schedule-comparison-head strong:first-child,
.schedule-comparison-row b:first-child {
  text-align: left;
}

.schedule-comparison-head strong:last-child,
.schedule-comparison-row b:last-child {
  text-align: right;
}

.schedule-comparison-head span,
.schedule-comparison-row span {
  color: var(--muted);
  font-size: 0.66rem;
}

.schedule-comparison-row b {
  color: var(--text);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.schedule-related {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.schedule-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.schedule-related-head h3 {
  font-size: 0.9rem;
}

.schedule-related-head span {
  display: grid;
  place-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  color: var(--text);
  background: var(--purple-soft);
  font-size: 0.68rem;
  font-weight: 800;
}

.schedule-related-list {
  display: grid;
  gap: 0.45rem;
}

.schedule-related-list > p {
  margin: 0;
  font-size: 0.78rem;
}

.schedule-related-game {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.75rem;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0.55rem;
  padding: 0.55rem;
  cursor: pointer;
  color: var(--text);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--team-a) 16%, transparent), color-mix(in srgb, var(--team-b) 12%, transparent)),
    rgba(255, 255, 255, 0.025);
  text-align: left;
}

.schedule-related-game:hover,
.schedule-related-game:focus-visible {
  border-color: var(--purple-border);
  outline: 0;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--team-a) 24%, transparent), color-mix(in srgb, var(--team-b) 18%, transparent)),
    rgba(255, 255, 255, 0.045);
}

.schedule-related-logos {
  display: flex;
  align-items: center;
}

.schedule-related-logos .schedule-team-logo {
  width: 1.75rem;
  height: 1.75rem;
}

.schedule-related-logos .schedule-team-logo + .schedule-team-logo {
  margin-left: -0.45rem;
}

.schedule-related-game > span:nth-child(2) {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.schedule-related-game strong,
.schedule-related-game small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-related-game strong {
  font-size: 0.74rem;
}

.schedule-related-game small,
.schedule-related-game em {
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.schedule-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 1rem;
}

.schedule-player-actions {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.schedule-actions.schedule-player-actions button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 8, 0.38);
  backdrop-filter: blur(10px);
}

.schedule-actions button {
  min-height: 2.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
}

.schedule-actions button:hover {
  background: var(--purple-soft);
  border-color: var(--purple-border);
}

.multiview-view {
  display: grid;
  gap: 1.4rem;
}

.multiview-view[hidden] {
  display: none !important;
}

.multiview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  align-items: end;
  gap: 1.5rem;
  min-height: 13rem;
  border-radius: 0.75rem;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 30%, rgba(123, 92, 255, 0.18), transparent 17rem),
    radial-gradient(circle at 50% 100%, rgba(32, 201, 151, 0.1), transparent 18rem),
    linear-gradient(120deg, rgba(239, 61, 85, 0.1), transparent 46%),
    var(--surface);
  box-shadow: var(--shadow);
}

.multiview-hero p {
  max-width: 42rem;
  margin-top: 0.8rem;
  color: var(--muted);
}

.multiview-status {
  border-radius: 0.65rem;
  padding: 1rem;
  background: rgba(8, 8, 8, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.multiview-status span {
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.multiview-status strong {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.1rem;
}

.multiview-status p {
  margin-top: 0.32rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.multiview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.layout-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.65rem;
  padding: 0.3rem;
  background: var(--surface);
}

.layout-switcher button {
  min-height: 2.35rem;
  border: 0;
  border-radius: 0.48rem;
  padding: 0 1rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
}

.layout-switcher button:hover,
.layout-switcher button.is-active {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(123, 92, 255, 0.26), transparent 72%),
    var(--surface-3);
}

.multiview-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1rem;
  align-items: start;
}

.multiview-stage {
  display: grid;
  gap: 0.75rem;
  min-height: 34rem;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: #0b0b0d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    var(--shadow);
}

.multiview-stage.is-quad {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.multiview-stage.is-focus {
  grid-template-columns: 1.35fr 0.75fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.multiview-stage.is-focus .multi-pane:first-child {
  grid-row: 1 / span 3;
}

.multiview-stage.is-stack {
  grid-template-columns: 1fr;
}

.multi-pane {
  position: relative;
  display: grid;
  grid-template-rows: minmax(10rem, 1fr) auto;
  min-height: 15rem;
  border-radius: 0.62rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px transparent;
}

.multi-pane.is-active {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--purple) 62%, transparent),
    0 0 34px rgba(123, 92, 255, 0.12);
}

.multi-pane-video {
  position: relative;
  min-height: 11rem;
  padding: 1rem;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) 38%, #141318) 0 35%,
      color-mix(in srgb, var(--team-a, #30264a) 12%, var(--team-b, #151518) 12%) 50%,
      color-mix(in srgb, var(--team-b, #151518) 38%, #141318) 65% 100%
    ),
    linear-gradient(180deg, #1e1d24, #080808);
}

.multi-pane-video::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.05), rgba(8, 8, 8, 0.56)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px);
  pointer-events: none;
}

.multi-pane-video .scoreboard,
.multi-pane-video .teams {
  position: relative;
  z-index: 1;
}

.multi-pane-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  background: rgba(8, 8, 8, 0.28);
}

.multi-pane-footer strong,
.multi-source strong {
  display: block;
  color: var(--text);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-pane-footer span,
.multi-source span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.multi-pane-actions {
  display: flex;
  gap: 0.35rem;
}

.multi-pane-actions button {
  min-height: 2rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.45rem;
  padding: 0 0.65rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
}

.multi-pane-actions button:hover {
  background: var(--purple-soft);
  border-color: var(--purple-border);
}

.multiview-library {
  position: sticky;
  top: 5.4rem;
  border-radius: 0.75rem;
  padding: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.multiview-source-list {
  display: grid;
  gap: 0.55rem;
}

.multi-source {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 4.2rem;
  border-radius: 0.55rem;
  padding: 0.65rem;
  overflow: hidden;
  cursor: pointer;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--team-a, #30264a) 20%, #101014) 0 44%,
      color-mix(in srgb, var(--team-b, #151518) 20%, #101014) 56% 100%
    ),
    var(--bg-soft);
}

.multi-source:hover,
.multi-source:focus-visible,
.multi-source.is-used {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
}

.multi-source-logos {
  display: flex;
  align-items: center;
}

.multi-source-logos .schedule-team-logo + .schedule-team-logo {
  margin-left: -0.55rem;
}

.multi-source em {
  color: var(--soft);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.subscription-view {
  display: grid;
  gap: 1.4rem;
}

.subscription-view[hidden] {
  display: none !important;
}

.subscription-account,
.subscription-plan-stage {
  display: grid;
  gap: 1.4rem;
}

.subscription-account[hidden],
.subscription-plan-stage[hidden] {
  display: none !important;
}

.subscription-account {
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.82fr);
  align-items: center;
  min-height: 32rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(123, 92, 255, 0.2), transparent 18rem),
    radial-gradient(circle at 90% 90%, rgba(32, 201, 151, 0.1), transparent 18rem),
    var(--surface);
  box-shadow: var(--shadow);
}

.subscription-account-copy h1 {
  max-width: 34rem;
  margin-top: 0.5rem;
}

.subscription-account-copy > p {
  max-width: 36rem;
  margin-top: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

.subscription-account-copy ul {
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.subscription-account-copy li {
  display: flex;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.subscription-account-copy li::before {
  color: var(--green);
  content: "✓";
}

.subscription-account-form {
  display: grid;
  gap: 0.85rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.7rem;
  padding: 1.2rem;
  background: rgba(8, 8, 8, 0.32);
}

.subscription-account-form label {
  display: grid;
  gap: 0.42rem;
}

.subscription-account-form label > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.subscription-account-form input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  outline: 0;
  padding: 0 0.8rem;
  color: var(--text);
  background: var(--surface-2);
}

.subscription-account-form input:focus {
  border-color: var(--purple-border);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.12);
}

.subscription-account-form button,
.subscription-account-strip button {
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1rem;
  cursor: pointer;
  font-weight: 800;
}

.subscription-account-form button {
  margin-top: 0.25rem;
  color: #111;
  background: #f6f3f8;
}

.subscription-account-error {
  margin: 0;
  color: #ff768a;
  font-size: 0.76rem;
  line-height: 1.45;
}

.subscription-account-error[hidden] {
  display: none;
}

.subscription-account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}

.subscription-account-strip > div {
  display: grid;
  gap: 0.12rem;
}

.subscription-account-strip .eyebrow {
  margin: 0;
}

.subscription-account-strip small {
  color: var(--muted);
}

.subscription-account-strip button {
  min-height: 2.25rem;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface-3);
}

.subscription-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
  align-items: center;
  gap: 1.5rem;
  min-height: 14rem;
  border-radius: 0.75rem;
  padding: 2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(123, 92, 255, 0.24), transparent 18rem),
    radial-gradient(circle at 55% 110%, rgba(32, 201, 151, 0.12), transparent 20rem),
    linear-gradient(120deg, rgba(239, 61, 85, 0.11), transparent 56%),
    var(--surface);
  box-shadow: var(--shadow);
}

.subscription-hero p {
  max-width: 40rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.billing-summary {
  border-radius: 0.72rem;
  padding: 1rem;
  background:
    linear-gradient(135deg, rgba(246, 243, 248, 0.09), transparent 72%),
    rgba(8, 8, 8, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.24);
}

.billing-summary span,
.plan-kicker {
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.billing-summary strong {
  display: block;
  margin-top: 0.55rem;
  font-size: 2.75rem;
  line-height: 1;
}

.billing-summary p {
  max-width: 18rem;
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.billing-summary.is-no-change strong {
  color: var(--muted);
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
}

.subscription-plan {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(3.05rem, auto) 1fr auto;
  align-content: stretch;
  gap: 0.95rem;
  min-height: 21rem;
  border-radius: 0.75rem;
  padding: 1.2rem;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(circle at 88% 20%, rgba(123, 92, 255, 0.16), transparent 12rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--surface);
  box-shadow: var(--shadow);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.subscription-plan:hover,
.subscription-plan:focus-visible {
  outline: 0;
  transform: translateY(-2px);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(123, 92, 255, 0.42);
}

.subscription-plan.featured {
  background:
    radial-gradient(circle at 88% 20%, rgba(32, 201, 151, 0.17), transparent 12rem),
    linear-gradient(135deg, rgba(123, 92, 255, 0.18), transparent 62%),
    var(--surface);
}

.subscription-plan.is-unavailable {
  cursor: not-allowed;
  opacity: 0.58;
}

.plan-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.plan-head strong {
  color: var(--text);
  font-size: 2.45rem;
  line-height: 0.95;
}

.plan-head strong span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.subscription-plan h2 {
  font-size: 1.45rem;
}

.subscription-plan p {
  color: var(--muted);
  line-height: 1.5;
}

.subscription-plan ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subscription-plan li {
  display: flex;
  gap: 0.55rem;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

.subscription-plan li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  margin-top: 0.42rem;
  background: var(--green);
  box-shadow: 0 0 16px rgba(32, 201, 151, 0.42);
}

.sport-picker {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.4rem;
  border-radius: 0.65rem;
  padding: 0.35rem;
  background: rgba(8, 8, 8, 0.24);
}

.plan-sport-summary {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.4rem;
  min-height: 3.05rem;
  border-radius: 0.65rem;
  padding: 0.35rem;
  background: rgba(8, 8, 8, 0.24);
}

.plan-sport-summary span {
  display: inline-grid;
  place-items: center;
  min-height: 2.35rem;
  border-radius: 999px;
  padding: 0 0.9rem;
  color: var(--text);
  background: rgba(32, 201, 151, 0.12);
  font-size: 0.82rem;
  font-weight: 800;
}

.sport-picker button,
.plan-button {
  min-height: 2.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0 0.9rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.plan-button:disabled {
  cursor: default;
  opacity: 0.72;
  transform: none !important;
  box-shadow: none !important;
}

.sport-picker button {
  color: var(--muted);
  background: transparent;
}

.sport-picker button:hover,
.sport-picker button.is-active {
  color: var(--text);
  background: var(--purple-soft);
}

.sport-picker button:disabled {
  cursor: default;
}

.sport-picker button:disabled:not(.is-active) {
  opacity: 0.45;
}

.plan-button {
  justify-self: stretch;
  margin-top: auto;
  color: #111;
  background: #f6f3f8;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.subscription-plan:not(.is-selected) .plan-button:hover,
.subscription-plan:not(.is-selected) .plan-button:focus-visible {
  outline: 0;
  color: #fff;
  background: #7b5cff;
  box-shadow: 0 8px 24px rgba(123, 92, 255, 0.32);
  transform: translateY(-2px);
}

.subscription-plan.is-selected .plan-button {
  color: #07110d;
  background: #35d9a6;
  box-shadow: 0 8px 24px rgba(32, 201, 151, 0.3);
}

.subscription-plan.is-selected .plan-button:hover,
.subscription-plan.is-selected .plan-button:focus-visible {
  outline: 0;
  background: #62ebbf;
  box-shadow:
    0 10px 30px rgba(32, 201, 151, 0.42),
    0 0 0 4px rgba(32, 201, 151, 0.14);
  transform: translateY(-2px);
}

.billing-explainer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.billing-explainer article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  border-radius: 0.68rem;
  padding: 0.95rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.billing-explainer article > span {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  color: var(--text);
  background: var(--purple-soft);
  font-weight: 800;
}

.billing-explainer h3 {
  font-size: 1rem;
}

.billing-explainer p {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.onboarding-view,
.profile-view {
  display: grid;
  gap: 1.4rem;
}

.onboarding-view {
  min-height: auto;
  width: min(100%, 112rem);
  margin-inline: auto;
}

.onboarding-view[hidden],
.profile-view[hidden] {
  display: none !important;
}

.onboarding-shell {
  display: grid;
  grid-template-columns: minmax(21rem, 29rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  min-height: auto;
  animation: onboarding-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.onboarding-shell > .onboarding-copy,
.onboarding-shell > .onboarding-panel {
  height: 100%;
}

.onboarding-copy,
.onboarding-panel,
.profile-hero,
.profile-card {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.45rem;
  background:
    radial-gradient(circle at 88% 20%, rgba(123, 92, 255, 0.13), transparent 12rem),
    var(--surface);
  box-shadow: var(--shadow);
  transition:
    border-color 220ms ease,
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-copy:hover,
.onboarding-panel:hover {
  border-color: rgba(155, 135, 255, 0.32);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transform: translateY(-1px);
}

.onboarding-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: hidden;
}

.onboarding-copy h1,
.profile-hero h1 {
  margin-top: 0.45rem;
  font-size: clamp(2.05rem, 2.85vw, 2.65rem);
  line-height: 1;
}

.onboarding-copy p,
.profile-hero p,
.onboarding-plan p,
.profile-card p {
  margin-top: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}

.onboarding-steps {
  position: relative;
  display: grid;
  grid-auto-rows: auto;
  flex: initial;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.onboarding-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.65rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-progress-head strong {
  border-radius: 999px;
  padding: 0.3rem 0.52rem;
  background: rgba(123, 92, 255, 0.14);
  color: #b9adff;
  font-size: 0.68rem;
}

.onboarding-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.62rem;
  align-items: center;
  min-height: 3.85rem;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 0.62rem;
  padding: 0.68rem 0.78rem;
  background: rgba(255, 255, 255, 0.032);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 180ms ease,
    background 220ms ease,
    box-shadow 240ms ease,
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-step:hover {
  border-color: rgba(155, 135, 255, 0.25);
  background:
    linear-gradient(135deg, rgba(123, 92, 255, 0.08), transparent 74%),
    rgba(255, 255, 255, 0.045);
  transform: translateX(2px);
}

.onboarding-step[hidden] {
  display: none;
}

.onboarding-step::before {
  position: absolute;
  top: calc(100% + 1px);
  left: 1.32rem;
  width: 1px;
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.12);
  content: "";
}

.onboarding-step:last-child::before {
  display: none;
}

.onboarding-step-index {
  display: grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-step-copy {
  display: grid;
  gap: 0.12rem;
}

.onboarding-step strong {
  font-size: 0.86rem;
}

.onboarding-step small,
.onboarding-step em {
  color: var(--muted);
  font-size: 0.66rem;
  font-style: normal;
}

.onboarding-step em {
  font-weight: 800;
}

.onboarding-step.is-complete .onboarding-step-index {
  position: relative;
  border-color: rgba(32, 201, 151, 0.34);
  background: rgba(32, 201, 151, 0.08);
  color: transparent;
}

.onboarding-step.is-complete .onboarding-step-index::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: #40d7ad;
  box-shadow: 0 0 0 4px rgba(32, 201, 151, 0.09);
  content: "";
}

.onboarding-step.is-complete em {
  color: #4de0b4;
}

.onboarding-step.is-active {
  border-color: rgba(155, 135, 255, 0.4);
  color: var(--text);
  background:
    radial-gradient(circle at 0% 50%, rgba(155, 135, 255, 0.22), transparent 9rem),
    linear-gradient(135deg, rgba(123, 92, 255, 0.12), transparent 74%),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.onboarding-step.is-active .onboarding-step-index {
  border-color: #9b87ff;
  background: #9b87ff;
  color: #09080d;
  transform: scale(1.04);
}

.onboarding-step.is-active em {
  color: #b9adff;
}

.onboarding-panel {
  min-height: auto;
  overflow: hidden;
}

.onboarding-stage {
  display: grid;
  align-content: start;
  gap: 0.82rem;
  min-height: auto;
  animation: onboarding-stage-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.onboarding-stage[data-onboarding-stage="2"] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.onboarding-stage[data-onboarding-stage="1"] {
  grid-template-rows: auto auto;
}

.onboarding-stage[data-onboarding-stage="1"] .onboarding-plan {
  min-height: 0;
  overflow-y: auto;
}

.onboarding-stage[data-onboarding-stage="3"] {
  display: grid;
  grid-template-rows: auto auto auto;
  min-height: auto;
  overflow: visible;
}

.onboarding-stage[data-onboarding-stage="3"] > .onboarding-team-grid {
  min-height: 0;
  max-height: min(41rem, calc(100vh - 19rem));
  overflow: auto;
}

.onboarding-stage[hidden] {
  display: none;
}

@media (min-width: 1181px) {
  body.is-onboarding-page {
    overflow: hidden;
  }

  body.is-onboarding-page main {
    height: calc(100dvh - 4.25rem);
    overflow: hidden;
  }

  body.is-onboarding-page .onboarding-view,
  body.is-onboarding-page .onboarding-shell {
    height: 100%;
    min-height: 0;
  }

  body.is-onboarding-page .onboarding-copy,
  body.is-onboarding-page .onboarding-panel {
    min-height: 0;
  }

  body.is-onboarding-page .onboarding-steps {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    flex: 1;
    min-height: 0;
  }

  body.is-onboarding-page .onboarding-step {
    min-height: 0;
    padding: 0.9rem 1rem;
  }

  body.is-onboarding-page .onboarding-step-index {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }

  body.is-onboarding-page .onboarding-step strong {
    font-size: 0.95rem;
  }

  body.is-onboarding-page .onboarding-step small,
  body.is-onboarding-page .onboarding-step em {
    font-size: 0.72rem;
  }

  body.is-onboarding-page .onboarding-stage {
    height: 100%;
    min-height: 0;
  }

  body.is-onboarding-page .onboarding-stage[data-onboarding-stage="1"] {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body.is-onboarding-page .onboarding-stage[data-onboarding-stage="3"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.is-onboarding-page .onboarding-stage[data-onboarding-stage="3"] > .onboarding-team-grid {
    flex: 1 1 0;
    max-height: none;
  }

  body.is-onboarding-page .onboarding-stage[data-onboarding-stage="4"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
}

.onboarding-stage-heading h2,
.onboarding-stage-heading p {
  margin: 0;
}

.onboarding-stage-heading h2 {
  margin-top: 0.35rem;
  font-size: 1.35rem;
}

.onboarding-stage-heading p {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.onboarding-stage-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 2.8rem;
  margin-top: auto;
  padding-top: 0.22rem;
  background: transparent;
}

.onboarding-stage[data-onboarding-stage="3"] > .onboarding-stage-actions {
  margin-top: 0;
}

.onboarding-stage-actions button {
  min-height: 2.42rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 0.84rem;
  cursor: pointer;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 800;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-stage-actions button:last-child {
  border-color: transparent;
  background: #f6f3f8;
  color: #111;
}

.onboarding-stage-actions button:hover {
  transform: translateY(-1px);
}

.onboarding-stage-actions button:last-child:hover {
  box-shadow:
    0 12px 28px rgba(246, 243, 248, 0.12),
    0 0 0 4px rgba(155, 135, 255, 0.08);
}

.onboarding-sport-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.onboarding-stage[data-onboarding-stage="2"] .onboarding-sport-choice-grid {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, minmax(4.25rem, 1fr));
}

.onboarding-stage[data-onboarding-stage="2"] > .onboarding-stage-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.onboarding-stage[data-onboarding-stage="2"] .onboarding-sport-choice {
  min-height: 0;
  padding: 0.85rem 1rem;
}

.onboarding-sport-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: center;
  min-height: 5rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.75rem;
  cursor: pointer;
  background:
    radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--team-color, #7b5cff) 28%, transparent), transparent 5rem),
    rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: left;
}

.onboarding-sport-choice.is-active {
  border-color: #9b87ff;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.14);
}

.onboarding-sport-choice > span:not(.schedule-team-logo) {
  display: grid;
  gap: 0.2rem;
}

.onboarding-sport-choice small,
.onboarding-sport-choice em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
}

.onboarding-sport-choice em {
  font-weight: 800;
}

.onboarding-plan {
  display: grid;
  grid-template-columns: minmax(18rem, 0.86fr) minmax(22rem, 1.14fr);
  grid-template-areas:
    "head head"
    "intro intro"
    "included included"
    "billing benefits";
  gap: 0.82rem;
  align-content: start;
  border-radius: 0.74rem;
  padding: 1rem;
  background:
    radial-gradient(circle at 95% 8%, rgba(123, 92, 255, 0.12), transparent 15rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(8, 8, 8, 0.2);
  animation: onboarding-card-in 380ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.onboarding-plan-head,
.onboarding-plan > p {
  grid-column: 1 / -1;
}

.onboarding-plan-head {
  grid-area: head;
}

.onboarding-plan > p {
  grid-area: intro;
}

.onboarding-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.74rem;
}

.onboarding-plan-head h2 {
  margin: 0.25rem 0 0;
  font-size: 1.32rem;
}

.onboarding-plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.onboarding-plan-price strong {
  font-size: 1.72rem;
  line-height: 1;
}

.onboarding-plan-price span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.onboarding-plan > p {
  margin: 0;
  max-width: 44rem;
  font-size: 0.92rem;
}

.onboarding-plan-billing {
  display: grid;
  grid-area: billing;
  grid-template-columns: 1fr;
  gap: 0.52rem;
}

.onboarding-plan-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.14rem 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.56rem;
  padding: 0.62rem 0.72rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.018);
  transition:
    border-color 180ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-plan-stat:hover {
  border-color: rgba(155, 135, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(155, 135, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  transform: translateY(-1px);
}

.onboarding-plan-stat span,
.onboarding-plan-included > span,
.onboarding-plan-benefits > span {
  color: var(--soft);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.onboarding-plan-stat strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.08rem;
  text-align: right;
}

.onboarding-plan-stat small {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.25;
}

.onboarding-plan-included,
.onboarding-plan-benefits {
  display: grid;
  gap: 0.58rem;
}

.onboarding-plan-included {
  grid-area: included;
  align-self: start;
}

.onboarding-plan-benefits {
  grid-area: benefits;
}

.onboarding-plan-included div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.52rem;
  align-items: start;
}

.onboarding-plan-included em {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  align-self: start;
  gap: 0.34rem;
  min-height: 4.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.64rem;
  padding: 0.62rem 0.42rem 0.56rem;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 8%, rgba(123, 92, 255, 0.12), transparent 3.9rem),
    rgba(255, 255, 255, 0.028);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  animation: onboarding-tile-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    border-color 180ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-plan-included em:nth-child(2) {
  animation-delay: 45ms;
}

.onboarding-plan-included em:nth-child(3) {
  animation-delay: 90ms;
}

.onboarding-plan-included em:nth-child(4) {
  animation-delay: 135ms;
}

.onboarding-plan-included em:nth-child(5) {
  animation-delay: 180ms;
}

.onboarding-plan-included em.is-included {
  border-color: rgba(155, 135, 255, 0.5);
  background:
    radial-gradient(circle at 50% 8%, rgba(155, 135, 255, 0.26), transparent 4.1rem),
    linear-gradient(145deg, rgba(123, 92, 255, 0.16), rgba(255, 255, 255, 0.032));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  animation:
    onboarding-tile-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both,
    onboarding-active-breathe 2.6s ease-in-out 520ms infinite;
}

.onboarding-plan-included em.is-locked {
  opacity: 0.52;
}

.onboarding-plan-included em:hover {
  border-color: rgba(155, 135, 255, 0.42);
  opacity: 1;
  transform: translateY(-3px) scale(1.015);
}

.onboarding-plan-included em img {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: contain;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.46));
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease;
}

.onboarding-plan-included em:hover img {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.52));
  transform: scale(1.08);
}

.onboarding-plan-included em strong {
  font-size: 0.76rem;
  line-height: 1;
}

.onboarding-plan-included em small {
  color: var(--muted);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onboarding-plan-included em.is-included small {
  color: #b9adff;
}

.onboarding-plan-benefits ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.34rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-plan-benefits li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.46rem;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.5rem;
  padding: 0.62rem 0.7rem;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.023);
  transition:
    border-color 180ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onboarding-plan-benefits li:hover {
  border-color: rgba(32, 201, 151, 0.2);
  background: rgba(255, 255, 255, 0.036);
  transform: translateX(2px);
}

.onboarding-plan-benefits li::before {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.27rem;
  border-radius: 999px;
  background: #40d7ad;
  box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.08);
  content: "";
}

@keyframes onboarding-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes onboarding-stage-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes onboarding-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes onboarding-tile-in {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes onboarding-active-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 0 0 rgba(155, 135, 255, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      0 0 22px rgba(155, 135, 255, 0.16);
  }
}

.onboarding-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.9rem;
  min-height: 0;
  max-height: none;
  overflow: auto;
  scrollbar-width: none;
}

.onboarding-team-grid::-webkit-scrollbar {
  display: none;
}

.onboarding-group-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.onboarding-group-tabs[hidden] {
  display: none;
}

.onboarding-group-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.65rem;
  border: 0;
  border-radius: 0.7rem;
  padding: 0 0.75rem;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.025);
  cursor: pointer;
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.onboarding-group-tabs button:hover {
  color: var(--text);
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(155, 135, 255, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.onboarding-group-tabs button.is-active {
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgba(155, 135, 255, 0.62),
    0 12px 28px rgba(0, 0, 0, 0.24);
  background:
    radial-gradient(circle at 20% 0%, rgba(155, 135, 255, 0.34), transparent 6rem),
    linear-gradient(135deg, rgba(155, 135, 255, 0.2), rgba(255, 255, 255, 0.045));
}

.onboarding-group-tabs span {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.onboarding-group-tabs em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.onboarding-team-group {
  display: grid;
  gap: 0.55rem;
  animation: onboarding-team-group-in 220ms ease both;
}

.onboarding-team-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 0.42rem;
}

.onboarding-team-group-head strong {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-team-group-head span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.onboarding-team-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

@keyframes onboarding-team-group-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-team {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  min-height: 7.05rem;
  border: 0;
  border-radius: 0.65rem;
  padding: 0.62rem;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--team-color) 28%, transparent), transparent 5.6rem),
    rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.onboarding-team.is-selected,
.onboarding-team:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team-accent) 48%, rgba(255, 255, 255, 0.1));
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--team-color) 40%, transparent), transparent 5.6rem),
    rgba(255, 255, 255, 0.06);
}

.onboarding-team.is-selected {
  outline: 1px solid rgba(155, 135, 255, 0.85);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 3px rgba(123, 92, 255, 0.18),
    0 14px 30px rgba(0, 0, 0, 0.28);
}

.onboarding-team .onboarding-selected-mark {
  position: absolute;
  top: 0.48rem;
  right: 0.48rem;
  z-index: 2;
  border-radius: 999px;
  padding: 0.22rem 0.42rem;
  border: 1px solid rgba(155, 135, 255, 0.42);
  background: rgba(155, 135, 255, 0.16);
  color: #d9d3ff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
}

.onboarding-team span {
  font-weight: 800;
  text-align: center;
}

.onboarding-team em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.notification-prefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  min-height: 0;
  gap: 0.72rem;
}

.notification-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0.7rem 0.85rem;
  min-height: 0;
  border: 1px solid var(--border-soft);
  border-radius: 0.78rem;
  padding: 1rem;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 10%, rgba(123, 92, 255, 0.1), transparent 9rem),
    rgba(255, 255, 255, 0.025);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.notification-option:hover {
  border-color: rgba(155, 135, 255, 0.36);
  background:
    radial-gradient(circle at 8% 10%, rgba(123, 92, 255, 0.17), transparent 9rem),
    rgba(255, 255, 255, 0.038);
  transform: translateY(-2px);
}

.notification-option:has(input:checked) {
  border-color: rgba(155, 135, 255, 0.62);
  background:
    radial-gradient(circle at 8% 10%, rgba(123, 92, 255, 0.24), transparent 9rem),
    linear-gradient(145deg, rgba(123, 92, 255, 0.11), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.notification-option:focus-within {
  outline: 2px solid rgba(155, 135, 255, 0.85);
  outline-offset: 2px;
}

.notification-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.notification-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  grid-row: 1 / span 2;
  border: 1px solid rgba(155, 135, 255, 0.2);
  border-radius: 0.7rem;
  color: #b9adff;
  background: rgba(123, 92, 255, 0.12);
}

.notification-option-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.notification-option-copy {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
}

.notification-option-copy strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.notification-option-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.45;
}

.notification-switch {
  position: relative;
  display: block;
  width: 2.3rem;
  height: 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transition: border-color 180ms ease, background 180ms ease;
}

.notification-switch i {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: #8c8995;
  transition: background 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.notification-option input:checked ~ .notification-switch {
  border-color: rgba(155, 135, 255, 0.7);
  background: rgba(123, 92, 255, 0.52);
}

.notification-option input:checked ~ .notification-switch i {
  background: #fff;
  transform: translateX(1rem);
}

.profile-alerts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.profile-alerts label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 0.55rem;
  padding: 0.7rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.86rem;
  font-weight: 850;
}

.profile-alert-card {
  align-content: start;
}

.profile-alert-card .eyebrow {
  display: block;
  margin-bottom: 0.75rem;
}

.profile-alerts label {
  padding: 0.58rem 0.65rem;
  font-size: 0.8rem;
}

.finish-onboarding {
  min-height: 2.8rem;
  border: 0;
  border-radius: 999px;
  color: #111;
  background: #f6f3f8;
  cursor: pointer;
  font-weight: 800;
}

.profile-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.profile-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.profile-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  border: 1px solid rgba(255, 112, 127, 0.28);
  border-radius: 999px;
  padding: 0 1rem;
  color: #ff8b98;
  background: rgba(255, 76, 96, 0.08);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 800;
}

.profile-logout:hover,
.profile-logout:focus-visible {
  color: #fff;
  background: rgba(255, 76, 96, 0.2);
  border-color: rgba(255, 112, 127, 0.55);
}

.profile-password-dialog {
  width: min(30rem, calc(100% - 2rem));
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0;
  color: var(--text);
  background: #17161c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}

.login-dialog {
  width: min(30rem, calc(100% - 2rem));
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: 0;
  color: var(--text);
  background: #17161c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65);
}

.login-dialog::backdrop {
  background: rgba(3, 3, 6, 0.78);
  backdrop-filter: blur(5px);
}

.login-form {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
}

.login-form h2 {
  margin-top: 0.35rem;
  font-size: 1.4rem;
}

.login-form p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.login-form label {
  display: grid;
  gap: 0.45rem;
}

.login-form label span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.login-form input {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0 0.8rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

.login-form input:focus {
  border-color: #8f79ff;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.16);
}

.login-form .login-error {
  margin: 0;
  color: #ff8b98;
}

.login-error[hidden] {
  display: none;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.login-actions button {
  min-height: 2.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 800;
}

.login-actions button[type="submit"] {
  color: #111;
  background: #f6f3f8;
}

.profile-password-dialog::backdrop {
  background: rgba(3, 3, 6, 0.78);
  backdrop-filter: blur(5px);
}

.profile-password-form {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
}

.profile-password-form h2 {
  margin-top: 0.35rem;
  font-size: 1.4rem;
}

.profile-password-form p {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.profile-password-form label {
  display: grid;
  gap: 0.45rem;
}

.profile-password-form label span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.profile-password-form input {
  width: 100%;
  min-height: 2.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0 0.8rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
}

.profile-password-form input:focus {
  border-color: #8f79ff;
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.16);
}

.profile-password-form .profile-password-error {
  margin: 0;
  color: #ff8b98;
}

.profile-password-error[hidden] {
  display: none;
}

.profile-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.profile-password-actions button {
  min-height: 2.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1rem;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 800;
}

.profile-password-actions button[type="submit"] {
  color: #111;
  background: #f6f3f8;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(28rem, 1.18fr) minmax(22rem, 0.82fr);
  align-items: stretch;
  gap: 1rem;
}

.profile-grid > .profile-card.wide,
.profile-grid > .profile-side-stack {
  height: 100%;
}

.profile-side-stack {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.profile-card.wide {
  min-height: 16rem;
}

.profile-grid > .profile-card:not(.wide),
.profile-side-stack > .profile-card {
  min-height: 0;
  padding: 1.15rem;
}

.profile-team-list {
  display: grid;
  gap: 0.65rem;
}

.profile-team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  border-radius: 0.58rem;
  padding: 0.7rem;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--team-color) 18%, transparent), transparent 78%),
    rgba(255, 255, 255, 0.035);
}

.profile-team strong,
.profile-card h2 {
  display: block;
  font-size: 1rem;
}

.profile-team span,
.profile-team em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.profile-team .profile-league-logo {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-height: 2rem;
  background: transparent;
}

.profile-team .profile-league-logo img {
  display: block;
  width: 2.15rem;
  max-height: 1.6rem;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.35));
}

.membership-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.membership-card-head h2 {
  margin-top: 0.28rem;
  font-size: 1.08rem;
}

.membership-status {
  border-radius: 999px;
  padding: 0.32rem 0.58rem;
  color: #4de0b4;
  background: rgba(32, 201, 151, 0.13);
  font-size: 0.68rem;
  font-weight: 800;
}

.membership-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.82rem;
}

.membership-price strong {
  font-size: 2rem;
  line-height: 1;
}

.membership-price span,
.membership-sports > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.membership-sports {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.82rem;
}

.membership-sports div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.membership-sports em {
  display: grid;
  place-items: center;
  min-width: 2.35rem;
  min-height: 1.8rem;
  border-radius: 999px;
  padding: 0.25rem 0.48rem;
  color: var(--text);
  background: var(--purple-soft);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.membership-sports em img {
  display: block;
  width: 1.55rem;
  max-height: 1.05rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32));
}

.membership-details {
  display: grid;
  gap: 0.48rem;
  margin: 0.82rem 0 0;
}

.membership-details div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.membership-details dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.membership-details dd {
  margin: 0;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: right;
}

.membership-change-plan {
  width: 100%;
  min-height: 2.65rem;
  margin-top: 1rem;
  border: 1px solid rgba(155, 135, 255, 0.35);
  border-radius: 999px;
  color: #c5bbff;
  background: rgba(123, 92, 255, 0.12);
  cursor: pointer;
  font-weight: 800;
}

.membership-change-plan:hover,
.membership-change-plan:focus-visible {
  border-color: rgba(155, 135, 255, 0.7);
  color: #fff;
  background: rgba(123, 92, 255, 0.24);
}

@media (max-width: 1180px) {
  .event-grid,
  .sport-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-grid.is-grouped {
    grid-template-columns: 1fr;
  }

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

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

  .live-tv-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .schedule-focus {
    position: static;
    max-height: none;
    margin-top: 0 !important;
    overflow: hidden;
  }

  .multiview-library {
    position: static;
  }

  .side-panel {
    position: static;
    grid-template-columns: 1fr 1fr;
    max-height: none;
    padding-right: 0;
    overflow: visible;
  }

  .onboarding-shell,
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-shell {
    align-items: start;
  }

  .profile-grid > .profile-card.wide,
  .profile-grid > .profile-side-stack {
    height: auto;
  }

  .onboarding-view {
    min-height: auto;
  }

  .onboarding-shell {
    min-height: auto;
  }

  .onboarding-copy {
    position: static;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .onboarding-panel {
    height: auto;
    overflow: visible;
  }

  .onboarding-steps {
    flex: initial;
    grid-auto-rows: minmax(3.45rem, auto);
  }

  .onboarding-plan-benefits ul {
    grid-template-columns: 1fr;
  }

  .onboarding-plan-included div {
    grid-template-columns: repeat(5, minmax(4.6rem, 1fr));
  }

  .onboarding-stage[data-onboarding-stage="2"] {
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
  }

  .onboarding-stage[data-onboarding-stage="3"] {
    height: auto;
    overflow: visible;
  }

  .onboarding-stage[data-onboarding-stage="3"] > .onboarding-team-grid {
    flex: initial;
    min-height: 0;
    max-height: min(38rem, calc(100vh - 18rem));
  }

  .onboarding-stage[data-onboarding-stage="2"] .onboarding-sport-choice-grid {
    flex: initial;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .onboarding-stage[data-onboarding-stage="2"] .onboarding-sport-choice {
    min-height: 5rem;
    padding: 0.75rem;
  }
}

@media (max-width: 880px) {
  .topbar {
    grid-template-columns: auto auto 1fr;
    padding: 0 1rem;
  }

  .subscription-account {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 1.2rem;
  }

  .schedule-board > .section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .schedule-board .schedule-sports {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    justify-self: stretch;
    width: 100%;
    margin-top: 0.75rem;
  }

  .schedule-board .schedule-timezone {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-tabs {
    order: 4;
    grid-column: 1 / -1;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 0.7rem;
  }

  .topbar {
    height: auto;
    min-height: 4.25rem;
    padding-top: 0.75rem;
  }

  main {
    padding: 2.4rem 1rem 4rem;
  }

  .page-head,
  .notice-grid,
  .controls,
  .side-panel,
  .teams-hero,
  .team-tools,
  .schedule-hero,
  .schedule-controls,
  .multiview-hero,
  .live-tv-hero,
  .subscription-hero,
  .billing-explainer {
    grid-template-columns: 1fr;
  }

  .multiview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .live-tv-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .teams-hero {
    min-height: auto;
  }

  .teams-hero-stack {
    display: none;
  }

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

  .onboarding-team-grid,
  .notification-prefs,
  .profile-alerts {
    grid-template-columns: 1fr;
  }

  .onboarding-group-tabs {
    grid-template-columns: 1fr;
  }

  .onboarding-team-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .onboarding-plan-billing {
    grid-template-columns: 1fr;
  }

  .onboarding-plan {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "intro"
      "included"
      "billing"
      "benefits";
  }

  .onboarding-plan-included {
    grid-column: auto;
    grid-row: auto;
  }

  .league-intel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .league-intel-tabs {
    width: 100%;
  }

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

  .date-rail {
    grid-template-columns: none;
    grid-auto-columns: minmax(8rem, 1fr);
    overflow-x: auto;
  }

  .page-head {
    display: grid;
    align-items: start;
  }

  .title-row {
    flex-wrap: wrap;
  }

  .refresh {
    width: max-content;
  }
}

@media (max-width: 620px) {
  .top-actions .icon-button {
    display: none;
  }

  .sign-in {
    min-width: 2.45rem;
    padding: 0;
    font-size: 0;
  }

  .login-button {
    min-width: 2.45rem;
    padding: 0 0.75rem;
    font-size: 0.78rem;
  }

  .notice {
    grid-template-columns: auto 1fr;
  }

  .notice button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .onboarding-plan-included div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-grid,
  .sport-event-grid {
    grid-template-columns: 1fr;
  }

  .league-intel-grid,
  .subscription-grid,
  .onboarding-team-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-team-group-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-plan-billing {
    grid-template-columns: 1fr;
  }

  .profile-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-hero-actions > button {
    flex: 1;
  }

  .controls {
    gap: 0.75rem;
  }

  .segmented {
    width: 100%;
  }

  .team-leagues {
    width: 100%;
  }

  .schedule-time-group,
  .schedule-game {
    grid-template-columns: 1fr;
  }

  .schedule-time-group > time {
    position: static;
  }

  .schedule-game-meta {
    justify-items: start;
  }

  .multiview-stage.is-quad,
  .multiview-stage.is-focus {
    grid-template-columns: 1fr;
  }

  .multiview-stage.is-focus .multi-pane:first-child {
    grid-row: auto;
  }

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

  .live-tv-grid {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 2.05rem;
  }

  .page-head {
    gap: 1rem;
  }

  .title-row {
    gap: 0.65rem;
  }

  .count-pill {
    padding: 0.44rem 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-shell,
  .onboarding-stage,
  .onboarding-plan,
  .onboarding-plan-included em,
  .onboarding-plan-included em.is-included {
    animation: none;
  }

  .onboarding-copy,
  .onboarding-panel,
  .onboarding-step,
  .onboarding-step-index,
  .onboarding-stage-actions button,
  .onboarding-plan-stat,
  .onboarding-plan-included em,
  .onboarding-plan-included em img,
  .onboarding-plan-benefits li {
    transition: none;
  }
}