:root {
  color-scheme: light;
  --bg: #f3f3ee;
  --panel: #ffffff;
  --section: #fafaf8;
  --panel-tint: #fbfbf7;
  --ink: #20211d;
  --muted: #626963;
  --line: rgba(15, 35, 20, 0.14);
  --line-soft: rgba(15, 35, 20, 0.09);
  --line-strong: rgba(15, 35, 20, 0.2);
  --brand-dark: #11130f;
  --brand-accent: #f4b816;
  --brand-accent-soft: #fff7d8;
  --brand-orange: #f0521b;
  --brand-orange-dark: #c83d10;
  --program-orange-soft: #fff0e8;
  --green: #1f7a4d;
  --green-dark: #155d3b;
  --mint: #e8f4ed;
  --gold: #b6811f;
  --gold-soft: #fff4d8;
  --purple: #6253a3;
  --purple-soft: #eeeaf8;
  --blue: #256fa8;
  --blue-soft: #eaf3fb;
  --red: #b63e32;
  --red-soft: #fde9e5;
  --shadow: 0 16px 34px rgba(36, 48, 43, 0.07);
  --shadow-soft: 0 8px 20px rgba(36, 48, 43, 0.05);
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
}

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

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.parent-shell {
  min-height: 100vh;
}

.login-view {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 420px);
  min-height: 100vh;
  padding: 32px;
  place-items: center;
}

.login-brand {
  display: grid;
  gap: 18px;
  justify-self: end;
  max-width: 460px;
  width: 100%;
}

.brand-logo {
  display: block;
  height: auto;
  max-width: 100%;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.brand-logo-login {
  background: var(--brand-dark);
  border-radius: 8px;
  box-shadow: var(--shadow);
  width: min(100%, 430px);
}

.login-brand-copy {
  border-left: 4px solid var(--brand-accent);
  padding-left: 14px;
}

.portal-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.brand-logo-badge {
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 0 0 auto;
  height: 62px;
  object-fit: contain;
  width: 62px;
}

.player-avatar {
  align-items: center;
  background: var(--brand-dark);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: #ffffff;
  display: inline-grid;
  flex: 0 0 auto;
  font-weight: 900;
  justify-items: center;
  overflow: hidden;
  place-items: center;
}

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

.avatar-sm {
  height: 38px;
  width: 38px;
}

.avatar-md {
  height: 52px;
  width: 52px;
}

.avatar-lg {
  height: 72px;
  width: 72px;
}

.profile-title,
.booking-player {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.login-brand p,
.portal-header p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 5px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 36px;
  line-height: 1.05;
  margin-bottom: 0;
}

h2 {
  font-size: 22px;
  margin-bottom: 16px;
}

h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.login-panel,
.portal-card,
.reservation-row,
.session-card,
.player-card {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.login-panel {
  display: grid;
  gap: 14px;
  padding: 24px;
  width: 100%;
}

label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  text-transform: uppercase;
}

input {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 44px;
  padding: 10px 12px;
  text-transform: none;
}

textarea {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 82px;
  padding: 10px 12px;
  resize: vertical;
  text-transform: none;
  width: 100%;
}

.login-panel button,
.portal-actions button,
.portal-actions a {
  align-items: center;
  background: var(--brand-dark);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  text-decoration: none;
}

.portal-actions a,
.portal-actions button {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
}

.portal-actions #sign-out {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #ffffff;
}

.demo-note,
.error-note,
.muted {
  color: var(--muted);
}

.error-note {
  color: var(--red);
  min-height: 20px;
}

.portal-view {
  margin: 0 auto;
  max-width: 1280px;
  padding: 14px;
}

.portal-chrome {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbf7 100%);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px 22px 14px;
}

.portal-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 0;
}

.portal-actions {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
}

.header-player-selector {
  margin-left: 0;
}

.header-player-selector:empty {
  display: none;
}

.global-player-selector {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

.global-player-selector > span {
  color: rgba(220, 229, 224, 0.72);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.global-player-select-wrap {
  position: relative;
}

.global-player-select-wrap::after {
  border-bottom: 2px solid rgba(247, 250, 248, 0.82);
  border-right: 2px solid rgba(247, 250, 248, 0.82);
  content: "";
  height: 8px;
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  width: 8px;
}

.global-player-select-icon {
  align-items: center;
  background: rgba(19, 217, 133, 0.12);
  border: 1px solid rgba(19, 217, 133, 0.24);
  border-radius: 999px;
  color: var(--brand-green);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  z-index: 1;
}

.global-player-select-icon svg {
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 18px;
}

.global-player-selector select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  height: 42px;
  min-height: 42px;
  min-width: 0;
  padding: 10px 38px 10px 50px;
  text-transform: none;
  width: 100%;
}

.portal-actions #sign-out {
  height: 42px;
  min-height: 42px;
}

.portal-tagline {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 850;
  margin-top: 4px;
}

.parent-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  overflow-x: visible;
}

.parent-tabs button {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  min-height: 40px;
  padding: 8px 18px;
  white-space: nowrap;
}

.parent-tabs button:first-child {
  border-radius: 8px 0 0 8px;
}

.parent-tabs button:last-child {
  border-radius: 0 8px 8px 0;
}

.parent-tabs button.active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 8px 16px rgba(17, 19, 15, 0.12);
  color: #ffffff;
}

.parent-mobile-menu,
.parent-tab-icon,
.parent-tab-label-mobile {
  display: none;
}

.portal-content {
  display: grid;
  gap: 16px;
}

.available-unified-section {
  background:
    radial-gradient(ellipse 72% 76% at 16% 0%, rgba(19, 217, 133, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.13),
    0 0 24px rgba(0, 255, 170, 0.035),
    var(--shadow-soft);
  display: grid;
  margin-top: 0;
  overflow: hidden;
}

.available-unified-header {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  padding: 24px 24px 18px;
}

.available-unified-body {
  display: grid;
  gap: 20px;
  padding: 22px 24px 24px;
}

.available-unified-section .available-page-heading h2 {
  color: #ffffff;
}

.available-unified-section .available-page-heading p {
  margin-bottom: 0;
}

.available-unified-section .available-directory-panel,
.available-unified-section .available-detail-panel,
.available-unified-section .catalog-category-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.available-unified-section .catalog-category-section {
  padding: 0;
}

.available-filter {
  background: rgba(9, 12, 11, 0.88);
  border: 1.5px solid rgba(216, 255, 235, 0.18);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  width: fit-content;
}

.available-unified-header > .available-filter,
.package-unified-section > .package-offer-grid,
.package-unified-section > .empty-state,
.performance-unified-body > .performance-wizard,
.performance-unified-body > .empty-state {
  margin-top: 14px;
}

.available-filter button {
  background: rgba(9, 12, 11, 0.88);
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  min-height: 34px;
  padding: 7px 13px;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.available-filter button:not(.active) {
  color: rgba(247, 250, 248, 0.62);
}

.available-filter button.active {
  background: rgba(16, 184, 111, 0.16);
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 -2px 0 rgba(19, 217, 133, 0.82),
    inset 0 0 8px rgba(255, 153, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

.available-filter button:hover,
.available-filter button:focus-visible {
  border-color: rgba(19, 217, 133, 0.52);
  color: rgba(91, 255, 177, 0.96);
}

.available-filter button.active:hover,
.available-filter button.active:focus-visible {
  border-color: rgba(19, 217, 133, 0.68);
}

.available-filter-label-desktop {
  display: inline;
}

.available-filter-label-mobile {
  display: none;
}

.available-page-heading,
.parent-page-heading {
  display: grid;
  gap: 8px;
}

.available-page-heading h2,
.parent-page-heading h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 0;
  text-transform: uppercase;
}

.available-page-heading p,
.parent-page-heading p {
  margin-bottom: 10px;
}

.available-directory-panel,
.available-detail-panel {
  background: var(--section);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.available-catalog {
  display: grid;
  gap: 18px;
}

.catalog-category-section {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 14px;
  padding: 18px;
}

.catalog-category-alt {
  background: #f6f7f4;
}

.catalog-category-header {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.catalog-category-header h3 {
  font-size: 16px;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}

.catalog-category-header p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 3px 0 0;
}

.catalog-view-all {
  background: transparent;
  border: 0;
  color: var(--green-dark);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
  padding: 4px 0;
  text-transform: uppercase;
}

.catalog-card-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalog-program-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1.5px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--program-color, #1f7a4d) 62%, #ffffff);
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(36, 48, 43, 0.04);
  display: grid;
  gap: 12px;
  grid-template-rows: auto 1fr auto auto;
  min-height: 270px;
  padding: 14px;
}

.catalog-program-card.has-media {
  grid-template-rows: auto auto 1fr auto auto;
}

.catalog-card-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.catalog-program-icon {
  align-items: center;
  background: color-mix(in srgb, var(--program-color, #1f7a4d) 12%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--program-color, #1f7a4d) 36%, var(--line));
  border-radius: 12px;
  color: color-mix(in srgb, var(--program-color, #1f7a4d) 82%, #111111);
  display: grid;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 950;
  height: 44px;
  overflow: hidden;
  place-items: center;
  width: 44px;
}

.catalog-program-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.catalog-card-media {
  background: var(--section);
  border-radius: 8px;
  height: 116px;
  overflow: hidden;
  position: relative;
}

.catalog-card-media > img,
.program-card-media > img,
.program-detail-media > img,
.overview-program-media > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.program-media-logo {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(15, 35, 20, 0.14);
  border-radius: 8px;
  bottom: 10px;
  box-shadow: 0 8px 18px rgba(17, 24, 20, 0.08);
  display: grid;
  height: 42px;
  justify-items: center;
  left: 10px;
  overflow: hidden;
  padding: 3px;
  place-items: center;
  position: absolute;
  width: 42px;
}

.program-media-logo img {
  border-radius: 6px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.catalog-card-body {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.catalog-card-body h3 {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.22;
  margin: 0;
}

.catalog-program-type {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin: 3px 0 0;
  text-transform: uppercase;
}

.catalog-program-description {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.catalog-card-meta {
  border-top: 1.5px solid var(--line-soft);
  display: grid;
  gap: 7px;
  padding-top: 11px;
}

.catalog-card-meta span {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 2px;
  line-height: 1.3;
}

.catalog-card-meta strong {
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.catalog-card-details,
.program-card-detail-list {
  border-top: 1.5px solid var(--line-soft);
  display: grid;
  gap: 8px;
  padding-top: 12px;
}

.catalog-card-details > span,
.program-card-detail-list > span {
  align-items: start;
  color: var(--ink);
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
  line-height: 1.35;
  min-width: 0;
}

.catalog-card-details i,
.program-card-detail-list i {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  font-style: normal;
  font-weight: 900;
  height: 18px;
  justify-content: center;
  line-height: 1.1;
  width: 18px;
}

.program-meta-icon-svg {
  display: block;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
  width: 18px;
}

.catalog-card-details span span,
.program-card-detail-list span span {
  min-width: 0;
}

.catalog-card-details strong,
.program-card-detail-list strong {
  display: none;
}

.catalog-view-button {
  font-size: 11px;
  min-height: 36px;
  text-transform: uppercase;
  width: 100%;
}

.catalog-card-actions {
  display: grid;
  gap: 10px;
}

.catalog-cta-row,
.program-card-cta-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
}

.catalog-cta-row.single,
.program-card-cta-row.single {
  grid-template-columns: 1fr;
}

.catalog-purchase-button,
.catalog-details-button {
  font-size: 11px;
  min-height: 42px;
  padding: 10px 12px;
}

.catalog-purchase-benefits {
  border-top: 1.5px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 10px;
}

.catalog-purchase-benefits span {
  font-size: 11px;
}

.catalog-purchase-benefits strong {
  flex-basis: 18px;
  font-size: 11px;
  height: 18px;
  width: 18px;
}

.dropin-training-strip {
  align-items: center;
  background:
    radial-gradient(ellipse 70% 140% at 12% 0%, rgba(19, 217, 133, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border: 1.5px solid rgba(19, 217, 133, 0.26);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.1),
    0 0 22px rgba(19, 217, 133, 0.04),
    var(--shadow-soft);
  display: grid;
  gap: 22px;
  grid-template-columns: auto minmax(230px, 0.85fr) minmax(0, 1.55fr) minmax(190px, auto);
  margin-top: 16px;
  min-height: 116px;
  padding: 20px 22px;
}

.dropin-strip-icon {
  align-items: center;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(19, 217, 133, 0.22), rgba(7, 122, 75, 0.16));
  border: 1.5px solid rgba(19, 217, 133, 0.36);
  border-radius: 10px;
  color: #71f7b0;
  display: grid;
  font-size: 22px;
  height: 72px;
  place-items: center;
  width: 72px;
}

.dropin-strip-logo {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.dropin-strip-copy {
  display: grid;
  gap: 4px;
}

.dropin-strip-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dropin-strip-copy h3 {
  font-size: 17px;
  font-weight: 950;
  margin: 0;
  text-transform: uppercase;
}

.dropin-strip-copy p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.dropin-strip-facts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}

.dropin-strip-facts span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  gap: 7px;
}

.dropin-strip-facts i {
  color: var(--green-dark);
  display: inline-flex;
  font-style: normal;
  font-weight: 900;
}

.dropin-strip-button {
  justify-self: end;
  min-height: 46px;
}

.dropin-marketplace {
  display: grid;
  gap: 18px;
}

.dropin-market-header {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.dropin-market-header h2 {
  color: #ffffff;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.dropin-market-header p,
.dropin-result-count {
  color: rgba(236, 243, 239, 0.74);
  margin: 0;
}

.dropin-result-count {
  color: #71f7b0;
  font-size: 13px;
  font-weight: 800;
}

.dropin-filter-toolbar {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
}

.dropin-filter-card {
  background:
    radial-gradient(ellipse 90% 120% at 12% 0%, rgba(0, 255, 170, 0.06), transparent 68%),
    linear-gradient(180deg, rgba(14, 20, 18, 0.92), rgba(7, 10, 9, 0.9));
  border: 1.5px solid rgba(216, 255, 235, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.04);
  color: rgba(236, 243, 239, 0.72);
  display: grid;
  gap: 8px;
  min-height: 74px;
  padding: 13px 14px;
}

.dropin-filter-card span {
  color: rgba(236, 243, 239, 0.76);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dropin-filter-select {
  appearance: none;
  background:
    linear-gradient(180deg, rgba(7, 11, 10, 0.78), rgba(5, 7, 6, 0.78));
  border: 0;
  color: #ffffff;
  color-scheme: dark;
  font-size: 15px;
  font-weight: 900;
  min-width: 0;
  outline: none;
  width: 100%;
}

.dropin-clear-button {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 255, 255, 0.065), transparent 72%),
    linear-gradient(180deg, rgba(18, 24, 22, 0.82), rgba(8, 11, 10, 0.86));
  border: 1.5px solid rgba(238, 242, 236, 0.3);
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  min-height: 46px;
  padding: 0 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.dropin-market-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.dropin-date-groups {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.dropin-date-group {
  display: grid;
  gap: 10px;
}

.dropin-date-heading {
  align-items: center;
  border-bottom: 1px solid rgba(216, 255, 235, 0.13);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 0 4px 8px;
}

.dropin-date-heading h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.dropin-date-heading span {
  color: rgba(236, 243, 239, 0.7);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.dropin-session-list {
  display: grid;
  gap: 8px;
}

.dropin-session-card {
  align-items: center;
  background:
    radial-gradient(ellipse 80% 120% at 4% 0%, color-mix(in srgb, var(--program-color, #13d985) 14%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(13, 18, 16, 0.94), rgba(7, 10, 9, 0.92));
  border: 1.5px solid rgba(216, 255, 235, 0.16);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.055),
    0 16px 32px rgba(0, 0, 0, 0.18);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 1.4fr) minmax(260px, 1.25fr) minmax(120px, 0.55fr) minmax(170px, 0.7fr);
  min-height: 94px;
  padding: 14px 16px;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.dropin-session-card:hover {
  border-color: rgba(19, 217, 133, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.12),
    0 20px 36px rgba(0, 0, 0, 0.26),
    0 0 26px rgba(0, 255, 170, 0.035);
  transform: translateY(-2px);
}

.dropin-session-identity {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.dropin-session-logo {
  align-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.09), transparent 58%),
    rgba(9, 12, 11, 0.9);
  border: 1.5px solid color-mix(in srgb, var(--program-color, #13d985) 52%, rgba(238, 242, 236, 0.3));
  border-radius: 999px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--program-color, #13d985) 14%, transparent);
  color: #ffffff;
  display: grid;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 950;
  height: 64px;
  overflow: hidden;
  place-items: center;
  width: 64px;
}

.dropin-session-logo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.dropin-session-identity h3 {
  color: #ffffff;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.dropin-type-badge {
  background: color-mix(in srgb, var(--program-color, #13d985) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--program-color, #13d985) 46%, rgba(238, 242, 236, 0.12));
  border-radius: 999px;
  color: color-mix(in srgb, var(--program-color, #13d985) 78%, #ffffff);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 9px;
}

.dropin-session-meta {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dropin-session-meta span {
  border-left: 1px solid rgba(216, 255, 235, 0.14);
  color: #ffffff;
  display: grid;
  font-size: 13px;
  gap: 4px;
  min-width: 0;
  padding-left: 12px;
}

.dropin-session-meta strong {
  color: rgba(236, 243, 239, 0.64);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dropin-session-status {
  justify-self: end;
  min-width: 0;
}

.dropin-availability {
  align-items: end;
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}

.dropin-availability-pill {
  background:
    linear-gradient(180deg, rgba(19, 217, 133, 0.24), rgba(19, 217, 133, 0.12));
  border: 1px solid rgba(19, 217, 133, 0.24);
  border-radius: 999px;
  color: #71f7b0;
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
  white-space: nowrap;
}

.dropin-availability-pill.waitlist {
  background:
    linear-gradient(180deg, rgba(128, 92, 255, 0.24), rgba(128, 92, 255, 0.12));
  border-color: rgba(167, 139, 250, 0.24);
  color: #c7b9ff;
}

.dropin-availability span:last-child {
  color: rgba(236, 243, 239, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.dropin-session-actions {
  display: grid;
  gap: 8px;
}

.dropin-primary-action,
.dropin-details-action {
  min-height: 40px;
  width: 100%;
}

.dropin-primary-action.action-single {
  background:
    radial-gradient(ellipse 82% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 68%),
    linear-gradient(180deg, rgba(19, 217, 133, 0.9), rgba(7, 122, 75, 0.92));
  border-color: rgba(238, 242, 236, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 12px 24px rgba(7, 122, 75, 0.2);
  color: #ffffff;
}

.dropin-details-action {
  font-size: 12px;
  min-height: 40px;
  padding: 10px 14px;
}

.dropin-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 18px;
}

.dropin-side-card,
.dropin-full-program-cta {
  background:
    radial-gradient(ellipse 100% 110% at 0% 0%, rgba(0, 255, 170, 0.05), transparent 64%),
    linear-gradient(180deg, rgba(13, 18, 16, 0.92), rgba(7, 10, 9, 0.92));
  border: 1.5px solid rgba(216, 255, 235, 0.16);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.045),
    0 16px 32px rgba(0, 0, 0, 0.16);
  padding: 22px;
}

.dropin-side-card h3,
.dropin-full-program-cta h3 {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.dropin-side-card p,
.dropin-full-program-cta p {
  color: rgba(236, 243, 239, 0.72);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.dropin-side-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.dropin-side-list span {
  border-left: 2px solid rgba(19, 217, 133, 0.42);
  color: #ffffff;
  display: grid;
  gap: 3px;
  padding-left: 12px;
}

.dropin-side-list small {
  color: rgba(236, 243, 239, 0.7);
  font-size: 12px;
  line-height: 1.4;
}

.dropin-full-program-cta {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
}

.dropin-full-program-button {
  min-height: 46px;
}

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

  .dropin-training-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dropin-strip-facts,
  .dropin-strip-button {
    grid-column: 1 / -1;
  }

  .dropin-filter-toolbar,
  .dropin-market-layout,
  .dropin-session-card {
    grid-template-columns: 1fr;
  }

  .dropin-sidebar {
    position: static;
  }

  .dropin-session-status {
    justify-self: stretch;
  }

  .dropin-availability {
    align-items: start;
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 760px) {
  .dropin-session-card {
    padding: 14px;
  }

  .dropin-session-meta {
    grid-template-columns: 1fr;
  }

  .dropin-session-meta span {
    border-left: 0;
    border-top: 1px solid rgba(216, 255, 235, 0.12);
    padding-left: 0;
    padding-top: 10px;
  }

  .dropin-full-program-cta {
    grid-template-columns: 1fr;
  }
}

.available-detail-panel {
  padding: 12px 16px 16px;
}

.available-directory-head,
.available-directory-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.15fr 1.7fr 1.45fr 1.6fr 0.9fr 0.8fr 0.7fr 1fr;
}

.dropin-directory-head,
.dropin-directory-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.9fr 1fr 0.9fr 1fr 1.7fr 1.1fr 0.8fr 0.7fr 0.95fr;
}

.available-directory-head,
.dropin-directory-head {
  background:
    linear-gradient(180deg, rgba(15, 20, 18, 0.96), rgba(8, 11, 10, 0.94));
  border-bottom: 1.5px solid rgba(216, 255, 235, 0.16);
  color: rgba(220, 229, 224, 0.68);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.05em;
  padding: 14px 18px;
  text-transform: uppercase;
}

.available-directory-row,
.dropin-directory-row {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(12, 17, 15, 0.92), rgba(8, 12, 10, 0.9));
  border-bottom: 1px solid rgba(216, 255, 235, 0.11);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.055);
  min-height: 78px;
  padding: 16px 18px;
}

.available-directory-row:last-of-type,
.dropin-directory-row:last-of-type {
  border-bottom: 0;
}

.directory-type-cell,
.directory-main-cell.with-avatar {
  align-items: center;
  display: flex;
  gap: 10px;
}

.directory-avatar {
  align-items: center;
  background: color-mix(in srgb, var(--program-color, #68746e) 14%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--program-color, #68746e) 42%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--program-color, #68746e) 86%, #111111);
  display: grid;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
  height: 38px;
  place-items: center;
  width: 38px;
}

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

.directory-main-cell,
.directory-date-cell,
.directory-location-cell,
.directory-count-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.directory-main-cell strong,
.directory-date-cell strong,
.directory-location-cell strong,
.directory-count-cell strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.directory-main-cell span,
.directory-date-cell span,
.directory-location-cell span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.directory-action {
  background: rgba(9, 12, 11, 0.86);
  border-color: rgba(19, 217, 133, 0.38);
  color: #71f7b0;
  font-size: 11px;
  min-height: 34px;
  padding: 8px 12px;
  width: 100%;
}

.available-directory-footer,
.available-detail-footer {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(8, 11, 10, 0.1), rgba(8, 11, 10, 0.78));
  border-top: 1.5px solid rgba(216, 255, 235, 0.13);
  color: rgba(220, 229, 224, 0.72);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 16px;
  justify-content: center;
  padding: 16px;
}

.directory-footer-button {
  background: rgba(9, 12, 11, 0.88);
  border-color: rgba(19, 217, 133, 0.38);
  color: #71f7b0;
  min-width: min(280px, 100%);
}

.available-subsection,
.program-offer-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.program-offer-grid {
  grid-template-columns: 1fr;
}

.available-subsection {
  background: var(--section);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
}

.program-rules-card {
  margin-bottom: 12px;
}

.program-rule-grid,
.program-option-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.program-rule-card {
  align-items: center;
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px 12px;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 14px;
}

.program-rule-card span {
  align-items: center;
  border-radius: 999px;
  display: grid;
  font-size: 20px;
  font-weight: 950;
  height: 44px;
  justify-items: center;
  place-items: center;
  width: 44px;
}

.program-rule-card strong,
.program-rule-card p {
  grid-column: 2;
}

.program-rule-card strong {
  color: var(--ink);
  font-size: 14px;
}

.rule-full span {
  background: var(--mint);
  color: var(--green-dark);
}

.rule-package {
  border-color: rgba(240, 82, 27, 0.2);
}

.rule-package span {
  background: #ffe4d3;
  color: var(--brand-orange-dark);
}

.rule-dropin span {
  background: var(--purple-soft);
  color: var(--purple);
}

.waitlist-note {
  align-items: center;
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: center;
  margin: 12px auto 0;
  max-width: 720px;
  padding: 10px 12px;
}

.program-rule-grid p,
.program-option p {
  line-height: 1.35;
  margin-bottom: 0;
}

.program-offer-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

.program-overview-offer {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 244px;
  min-height: 158px;
  padding-left: 22px;
}

.program-overview-offer.has-media {
  grid-template-columns: 178px minmax(0, 1fr) 244px;
}

.program-card-media {
  align-self: stretch;
  background: var(--section);
  border-radius: 8px;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

.program-offer-card header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.program-overview-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.program-overview-header {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.program-offer-card::before {
  background: color-mix(in srgb, var(--program-color, #68746e) 72%, #ffffff);
  content: "";
  inset: 0 auto 0 0;
  opacity: 0.9;
  position: absolute;
  width: 3px;
}

.program-overview-offer::before {
  width: 4px;
}

.program-card-title {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.program-card-title h3,
.program-card-title p {
  margin-bottom: 0;
}

.program-card-description {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.program-card-icon {
  align-items: center;
  background: color-mix(in srgb, var(--program-color, #68746e) 16%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--program-color, #68746e) 32%, var(--line));
  border-radius: 999px;
  color: color-mix(in srgb, var(--program-color, #68746e) 84%, #111111);
  display: grid;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
  height: 44px;
  justify-items: center;
  overflow: hidden;
  place-items: center;
  width: 44px;
}

.program-overview-offer .program-card-icon {
  font-size: 15px;
  height: 56px;
  width: 56px;
}

.program-card-icon img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

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

.program-card-meta div,
.program-overview-grid .portal-card {
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 9px;
}

.program-card-meta span,
.program-overview-grid span,
.program-detail-price span,
.program-detail-price small,
.program-price-callout span,
.program-price-callout small,
.program-availability-card span,
.program-availability-card small,
.program-enrollment-price span,
.program-enrollment-price small,
.prompt-availability span,
.program-date-status span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.program-card-meta strong,
.program-overview-grid strong {
  font-size: 13px;
  line-height: 1.25;
}

.program-overview-offer .program-card-meta {
  border-top: 1.5px solid var(--line-soft);
  gap: 0;
  grid-template-columns: 1.1fr 1.35fr 1.1fr 1.1fr 0.85fr 0.8fr;
  padding-top: 10px;
}

.program-overview-offer .program-card-meta div {
  background: transparent;
  border: 0;
  border-right: 1.5px solid var(--line-soft);
  border-radius: 0;
  min-width: 0;
  padding: 0;
  padding-right: 14px;
}

.program-overview-offer .program-card-meta div + div {
  padding-left: 14px;
}

.program-overview-offer .program-card-meta div:last-child {
  border-right: 0;
}

.program-card-action-panel {
  align-content: start;
  align-items: stretch;
  border-left: 1.5px solid var(--line-soft);
  display: grid;
  gap: 14px;
  justify-items: stretch;
  padding-left: 18px;
}

.program-card-action-panel .status-pill {
  justify-self: start;
}

.parent-action-button.action-primary.program-purchase-button,
.program-details-button {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  justify-content: center;
  letter-spacing: 0.02em;
  min-height: 54px;
  padding: 13px 16px;
  text-transform: uppercase;
  width: 100%;
}

.parent-action-button.action-primary.program-purchase-button {
  background:
    radial-gradient(ellipse 82% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 68%),
    linear-gradient(180deg, rgba(19, 217, 133, 0.9), rgba(7, 122, 75, 0.92));
  border: 1.5px solid rgba(238, 242, 236, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 0 28px rgba(19, 217, 133, 0.24),
    0 14px 28px rgba(7, 122, 75, 0.22);
}

.program-details-button {
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(20, 28, 25, 0.72), rgba(8, 11, 10, 0.78));
  border: 1.5px solid rgba(238, 242, 236, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 10px 24px rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

.program-details-button:hover {
  border-color: rgba(238, 242, 236, 0.58);
}

.program-purchase-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.program-purchase-benefits span {
  align-items: center;
  color: rgba(247, 250, 248, 0.76);
  display: flex;
  font-size: 12px;
  font-weight: 750;
  gap: 8px;
}

.program-purchase-benefits strong {
  background: rgba(19, 217, 133, 0.12);
  border: 1px solid rgba(19, 217, 133, 0.34);
  border-radius: 999px;
  color: #45f0a2;
  display: inline-grid;
  flex: 0 0 20px;
  font-size: 12px;
  height: 20px;
  line-height: 1;
  place-items: center;
  width: 20px;
}

.program-card-action-panel .program-purchase-benefits {
  border-top: 1.5px solid var(--line-soft);
  padding-top: 2px;
}

.parent-action-button.action-primary.program-purchase-button.catalog-purchase-button,
.program-details-button.catalog-details-button {
  font-size: 11px;
  min-height: 42px;
  padding: 10px 12px;
}

.program-purchase-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  gap: 8px;
  justify-content: center;
  min-height: 34px;
  padding: 4px;
}

.program-purchase-link:disabled {
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}

.program-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.program-card-footer {
  align-items: stretch;
  border-top: 1.5px solid var(--line-soft);
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

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

.program-card-counts {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 850;
  gap: 10px;
}

.program-card-counts strong {
  color: var(--ink);
  font-size: 14px;
}

.program-tag {
  background: color-mix(in srgb, var(--program-color, #68746e) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--program-color, #68746e) 26%, var(--line));
  color: color-mix(in srgb, var(--program-color, #68746e) 78%, #111111);
}

.program-open-button {
  justify-self: stretch;
  width: 100%;
}

.program-detail-view {
  display: grid;
  gap: 14px;
}

.back-to-programs {
  justify-self: start;
}

.program-detail-header {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--section) 100%);
  border-left: 4px solid color-mix(in srgb, var(--program-color, var(--brand-orange)) 70%, #ffffff);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(270px, auto);
}

.program-detail-header.has-media {
  grid-template-columns: 220px minmax(0, 1fr) minmax(270px, auto);
}

.program-detail-media {
  align-self: stretch;
  background: var(--section);
  border-radius: 8px;
  min-height: 172px;
  overflow: hidden;
  position: relative;
}

.program-detail-main {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.program-detail-identity {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

.program-detail-logo {
  align-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(19, 217, 133, 0.12), transparent 62%),
    color-mix(in srgb, var(--program-color, var(--brand-green)) 18%, #050807);
  border: 2px solid color-mix(in srgb, var(--program-color, var(--brand-green)) 54%, rgba(247, 250, 248, 0.2));
  border-radius: 999px;
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.26),
    0 0 24px color-mix(in srgb, var(--program-color, var(--brand-green)) 18%, transparent);
  color: #ffffff;
  display: grid;
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 950;
  height: 78px;
  overflow: hidden;
  place-items: center;
  text-transform: uppercase;
  width: 78px;
}

.program-detail-logo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.program-detail-title-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.program-detail-header h2,
.program-detail-header p,
.program-detail-section h2,
.program-detail-section p {
  margin-bottom: 0;
}

.program-detail-meta-row {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
  gap: 10px 22px;
  margin-top: 2px;
}

.program-detail-meta-row strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  margin-top: 2px;
}

.program-detail-pricing-summary {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, auto);
}

.program-enrollment-card {
  align-items: stretch;
  background:
    radial-gradient(ellipse 80% 90% at 32% 8%, rgba(0, 255, 170, 0.08), transparent 62%),
    radial-gradient(ellipse 64% 86% at 94% 14%, rgba(255, 153, 0, 0.06), transparent 66%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.98), rgba(7, 9, 8, 0.96));
  border-color: rgba(238, 242, 236, 0.4);
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 0 26px rgba(255, 255, 255, 0.035),
    0 0 28px rgba(0, 255, 170, 0.035),
    var(--shadow-soft);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 1.2fr) minmax(240px, 0.75fr);
  overflow: hidden;
  position: relative;
}

.program-enrollment-card::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--program-color, var(--green)) 34%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.024), transparent 48%);
  content: "";
  inset: 0;
  opacity: 0.36;
  pointer-events: none;
  position: absolute;
}

.program-enrollment-card > * {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.program-enrollment-info {
  align-content: start;
  display: grid;
  gap: 14px;
}

.program-enrollment-info .program-detail-media {
  min-height: 150px;
}

.program-type-badge {
  align-self: start;
  background: rgba(19, 217, 133, 0.12);
  border: 1px solid rgba(19, 217, 133, 0.28);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  justify-self: start;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  text-transform: uppercase;
}

.program-enrollment-info h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 0.98;
  margin: 3px 0 0;
}

.program-enrollment-info p {
  color: rgba(247, 250, 248, 0.82);
  line-height: 1.5;
  margin: 0;
}

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

.program-enrollment-meta div {
  border-top: 1px solid rgba(216, 255, 235, 0.13);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 9px;
}

.program-enrollment-meta span {
  color: rgba(190, 199, 193, 0.82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.program-enrollment-meta strong {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.3;
  min-width: 0;
}

.program-enrollment-comparison {
  align-items: stretch;
  display: grid;
  gap: 13px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.82fr);
}

.program-value-card {
  align-content: start;
  border: 1.5px solid rgba(216, 255, 235, 0.16);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 18px;
}

.program-value-card-featured {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(19, 217, 133, 0.12), transparent 68%),
    rgba(8, 12, 10, 0.72);
  border-color: rgba(19, 217, 133, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(19, 217, 133, 0.08),
    0 0 20px rgba(19, 217, 133, 0.055);
}

.program-value-card-neutral {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  border-color: rgba(216, 255, 235, 0.14);
}

.program-value-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.program-value-heading span {
  color: rgba(247, 250, 248, 0.86);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1.18;
  text-transform: uppercase;
}

.program-value-heading em {
  background: rgba(240, 82, 27, 0.14);
  border: 1px solid rgba(240, 82, 27, 0.4);
  border-radius: 999px;
  color: #ff9b41;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.program-value-price {
  color: #ffffff;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.program-value-card.is-unavailable {
  gap: 12px;
}

.program-value-unavailable {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.program-value-unavailable strong {
  color: #ffffff;
  font-size: clamp(22px, 2.25vw, 34px);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1.04;
  max-width: 100%;
  overflow-wrap: normal;
  text-wrap: balance;
}

.program-value-unavailable span {
  color: rgba(247, 250, 248, 0.74);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  max-width: 24rem;
}

.program-value-card p,
.program-value-per-session {
  color: rgba(247, 250, 248, 0.78);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.program-value-per-session {
  background: rgba(19, 217, 133, 0.11);
  border: 1px solid rgba(19, 217, 133, 0.22);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-flex;
  justify-self: start;
  padding: 7px 10px;
}

.program-value-card-neutral .program-value-per-session {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(216, 255, 235, 0.13);
  color: rgba(247, 250, 248, 0.76);
}

.program-value-card .program-benefit-list {
  margin: 4px 0 0;
}

.program-value-card .program-benefit-list li {
  color: rgba(247, 250, 248, 0.84);
}

.program-value-card .program-benefit-list.neutral li {
  color: rgba(190, 199, 193, 0.84);
}

.program-comparison-vs {
  align-self: center;
  background: rgba(8, 11, 10, 0.9);
  border: 1px solid rgba(216, 255, 235, 0.22);
  border-radius: 999px;
  color: rgba(247, 250, 248, 0.76);
  display: grid;
  font-size: 11px;
  font-weight: 950;
  height: 38px;
  letter-spacing: 0.08em;
  place-items: center;
  width: 38px;
}

.program-enrollment-actions {
  align-content: start;
  border-left: 1px solid rgba(216, 255, 235, 0.14);
  display: grid;
  gap: 11px;
  padding-left: 22px;
}

.program-enrollment-actions .parent-action-button {
  width: 100%;
}

.program-enrollment-note {
  color: rgba(247, 250, 248, 0.72);
  font-size: 12px;
  font-weight: 750;
  margin: -4px 0 0;
  text-align: center;
}

.program-date-reserve-link {
  border-color: rgba(240, 82, 27, 0.34);
  color: #ff9b41;
}

@media (max-width: 1100px) {
  .program-enrollment-card {
    grid-template-columns: 1fr;
  }

  .program-enrollment-comparison {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr);
  }

  .program-enrollment-actions {
    border-left: 0;
    border-top: 1px solid rgba(216, 255, 235, 0.14);
    padding-left: 0;
    padding-top: 14px;
  }
}

@media (max-width: 760px) {
  .program-enrollment-card {
    gap: 18px;
  }

  .program-detail-identity {
    align-items: start;
    gap: 12px;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .program-detail-logo {
    font-size: 15px;
    height: 64px;
    width: 64px;
  }

  .program-enrollment-comparison,
  .program-enrollment-meta {
    grid-template-columns: 1fr;
  }

  .program-enrollment-info {
    order: 1;
  }

  .program-enrollment-comparison {
    display: contents;
  }

  .program-enrollment-comparison > * {
    min-width: 0;
    position: relative;
    z-index: 1;
  }

  .program-value-card-featured {
    order: 2;
  }

  .program-enrollment-actions {
    order: 3;
  }

  .program-value-card-neutral {
    order: 4;
  }

  .program-comparison-vs {
    display: none;
  }

  .program-value-card {
    padding: 15px;
  }
}

.program-price-callout {
  align-content: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 164px;
  padding: 14px;
  text-align: right;
}

.program-price-callout strong {
  color: var(--ink);
  font-size: 34px;
  line-height: 0.95;
}

.program-availability-card,
.program-detail-price {
  background: var(--brand-dark);
  border-radius: 8px;
  color: #ffffff;
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 164px;
  padding: 14px;
}

.program-availability-card {
  min-width: 128px;
}

.program-detail-price span,
.program-detail-price small,
.program-availability-card span,
.program-availability-card small {
  color: rgba(255, 255, 255, 0.72);
}

.program-detail-price strong,
.program-availability-card strong {
  font-size: 32px;
  line-height: 0.95;
}

.program-detail-price .status-pill,
.program-availability-card .status-pill {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  justify-self: end;
}

.competition-hero-actions {
  align-items: stretch;
  display: grid;
  gap: 10px;
  min-width: min(100%, 210px);
}

.full-program-purchase-card {
  align-items: center;
  background: linear-gradient(90deg, #fffaf5 0%, #ffffff 100%);
  border-color: rgba(240, 82, 27, 0.24);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
}

.full-program-purchase-copy {
  align-items: center;
  display: flex;
  gap: 14px;
  min-width: 0;
}

.program-purchase-icon {
  align-items: center;
  background: #fff0df;
  border: 1.5px solid rgba(240, 82, 27, 0.24);
  border-radius: 999px;
  color: var(--brand-orange);
  display: grid;
  flex: 0 0 auto;
  font-weight: 950;
  height: 42px;
  place-items: center;
  width: 42px;
}

.program-benefit-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 8px;
  padding: 0;
}

.program-benefit-list li {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding-left: 22px;
  position: relative;
}

.program-benefit-list li::before {
  color: var(--green-dark);
  content: "✓";
  font-weight: 950;
  left: 0;
  position: absolute;
  top: 0;
}

.full-program-purchase-action {
  align-items: end;
  display: grid;
  gap: 8px;
}

.program-enrollment-price {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.program-enrollment-price strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.package-credit-cta {
  justify-self: stretch;
}

.program-detail-section {
  background: var(--section);
  display: grid;
  gap: 16px;
}

.competition-registration-section {
  background: #ffffff;
}

.competition-registration-alert {
  background: rgba(64, 16, 12, 0.72);
  border: 1.5px solid rgba(255, 126, 105, 0.72);
  border-radius: 10px;
  color: #ffb7aa;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  padding: 18px 22px;
}

.competition-registration-copy-mobile {
  display: none;
}

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

.competition-choice-card {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  padding: 16px;
  text-align: left;
}

.competition-choice-card:hover {
  border-color: rgba(15, 122, 77, 0.34);
  box-shadow: inset 0 0 0 1px rgba(15, 122, 77, 0.08);
}

.competition-choice-card strong {
  color: var(--green-dark);
  font-size: 15px;
}

.competition-choice-card span,
.competition-registration-record span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.competition-registration-form {
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.competition-registration-form label,
.competition-registration-form .select-label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
  text-transform: uppercase;
}

.competition-registration-form input,
.competition-registration-form select,
.competition-registration-form textarea {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 40px;
  padding: 9px 10px;
  text-transform: none;
  width: 100%;
}

.competition-registration-form textarea {
  min-height: 92px;
  resize: vertical;
}

.competition-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.competition-registration-list {
  display: grid;
  gap: 8px;
}

.competition-registration-record {
  align-items: center;
  background: var(--mint);
  border: 1.5px solid rgba(31, 122, 77, 0.16);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.detail-options .program-option {
  align-content: start;
}

.stacked-actions {
  display: grid;
  gap: 7px;
}

.program-schedule-heading {
  align-items: end;
  border-bottom: 1.5px solid var(--line-soft);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.schedule-player-select {
  min-width: min(100%, 260px);
}

.schedule-heading-actions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.schedule-filter-panel {
  align-items: center;
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 10px;
}

.schedule-mode-controls {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  overflow: hidden;
}

.schedule-mode-controls button {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  min-height: 36px;
  padding: 0 14px;
}

.schedule-mode-controls button.active {
  background: var(--green);
  color: #ffffff;
}

.schedule-day-controls {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.schedule-day-controls strong {
  color: var(--ink);
  font-size: 14px;
  min-width: 190px;
  text-align: center;
}

.parent-action-button.compact {
  min-height: 36px;
  min-width: auto;
  padding: 0 14px;
}

.schedule-range-controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.schedule-range-controls label {
  color: var(--muted);
  display: grid;
  font-size: 10.5px;
  font-weight: 950;
  gap: 4px;
  text-transform: uppercase;
}

.schedule-range-controls input {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 36px;
  min-width: 160px;
  padding: 0 10px;
}

.schedule-date-group {
  display: grid;
  gap: 8px;
}

.schedule-date-group h3 {
  border-bottom: 1.5px solid var(--line-soft);
  color: var(--ink);
  font-size: 15px;
  margin: 4px 0 0;
  padding-bottom: 6px;
}

.available-session-heading {
  align-items: end;
  border-top: 1.5px solid var(--line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 4px;
}

.available-session-heading h2,
.available-session-heading p {
  margin-bottom: 0;
}

.competition-parent-tabs {
  background:
    radial-gradient(ellipse 80% 140% at 12% 0%, rgba(19, 217, 133, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 13, 0.92), rgba(5, 8, 7, 0.9));
  border: 1px solid rgba(216, 255, 235, 0.16);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.05);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100%;
  padding: 6px;
  width: 100%;
}

.competition-parent-tabs button {
  appearance: none;
  background:
    linear-gradient(180deg, rgba(17, 24, 21, 0.64), rgba(7, 11, 9, 0.74));
  border: 1px solid rgba(216, 255, 235, 0.18);
  border-radius: 8px;
  color: rgba(236, 243, 239, 0.72);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 0 14px;
  text-transform: uppercase;
}

.competition-parent-tabs button.active {
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 64%),
    linear-gradient(180deg, rgba(19, 217, 133, 0.88), rgba(7, 122, 75, 0.92));
  border-color: rgba(19, 217, 133, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(19, 217, 133, 0.16);
  color: #ffffff;
}

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

.competition-rule-card {
  background:
    radial-gradient(ellipse 80% 130% at 8% 0%, rgba(19, 217, 133, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(9, 14, 12, 0.9), rgba(4, 7, 6, 0.9));
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(19, 217, 133, 0.06);
  display: grid;
  gap: 10px;
  padding: 16px;
}

.competition-rule-card-wide {
  grid-column: 1 / -1;
}

.competition-rule-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.competition-rule-card > strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.competition-rule-note {
  color: rgba(247, 250, 248, 0.76);
  line-height: 1.5;
  margin: 0;
}

.competition-rule-notes {
  display: grid;
  gap: 8px;
}

.competition-rule-notes p {
  color: rgba(247, 250, 248, 0.82);
  line-height: 1.5;
  margin: 0;
}

.competition-rule-list {
  display: grid;
  gap: 8px;
}

.competition-rule-list p {
  align-items: center;
  border-top: 1px solid rgba(216, 255, 235, 0.1);
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: 8px;
}

.competition-rule-list p:first-child {
  border-top: 0;
  padding-top: 0;
}

.competition-rule-list strong,
.competition-rule-list span {
  color: rgba(247, 250, 248, 0.86);
  font-weight: 900;
}

.competition-tiebreaker-list {
  color: rgba(247, 250, 248, 0.86);
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
}

.competition-tiebreaker-list li::marker {
  color: var(--brand-green);
  font-weight: 950;
}

.competition-schedule-toolbar {
  align-items: flex-end;
  border-top: 0;
  gap: 16px;
  padding-top: 0;
}

.competition-schedule-toolbar > div:first-child {
  min-width: min(100%, 320px);
}

.competition-schedule-controls {
  align-items: end;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  min-width: 0;
}

.competition-filter-bar {
  align-items: center;
  background:
    radial-gradient(ellipse 80% 140% at 8% 0%, rgba(19, 217, 133, 0.05), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 13, 0.9), rgba(6, 9, 8, 0.86));
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.04);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  width: 100%;
}

.competition-filter-label {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.competition-filter-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.competition-filter-chip {
  align-items: center;
  background: rgba(5, 8, 7, 0.72);
  border: 1px solid rgba(216, 255, 235, 0.16);
  border-radius: 7px;
  color: rgba(236, 243, 239, 0.7);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  min-width: 132px;
  padding: 0 14px;
  white-space: nowrap;
}

.competition-filter-chip.active {
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(19, 217, 133, 0.16), transparent 64%),
    linear-gradient(180deg, rgba(13, 18, 16, 0.94), rgba(6, 10, 8, 0.94));
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(19, 217, 133, 0.28),
    0 0 16px rgba(19, 217, 133, 0.08);
  color: #7dffbd;
}

.competition-filter-dropdown {
  flex: 1 1 148px;
  min-width: 148px;
  position: relative;
  z-index: 3;
}

.competition-filter-dropdown[open] {
  z-index: 90;
}

.competition-filter-dropdown summary {
  cursor: pointer;
  list-style: none;
  width: 100%;
}

.competition-filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.competition-filter-dropdown .competition-filter-chip {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-width: 0;
  padding: 7px 34px 7px 12px;
  position: relative;
  text-align: left;
}

.competition-filter-chip-kicker {
  color: rgba(236, 243, 239, 0.52);
  display: block;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.competition-filter-dropdown .competition-filter-chip strong {
  color: inherit;
  display: block;
  font-size: 12px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-filter-dropdown .competition-filter-caret {
  position: absolute;
  right: 14px;
  top: 50%;
}

.competition-filter-menu {
  background:
    radial-gradient(ellipse 100% 140% at 0% 0%, rgba(19, 217, 133, 0.09), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 13, 0.98), rgba(4, 7, 6, 0.98));
  border: 1px solid rgba(19, 217, 133, 0.34);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(19, 217, 133, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 4px;
  left: 0;
  max-height: 280px;
  min-width: max(100%, 220px);
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 100;
}

.competition-filter-menu button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: rgba(236, 243, 239, 0.76);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  min-height: 34px;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  text-align: left;
  white-space: normal;
}

.competition-filter-menu button:hover,
.competition-filter-menu button:focus-visible,
.competition-filter-menu button.active {
  background: rgba(19, 217, 133, 0.12);
  color: #7dffbd;
  outline: none;
}

.competition-filter-caret {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  display: inline-block;
  height: 6px;
  margin-top: -3px;
  opacity: 0.75;
  transform: rotate(45deg);
  width: 6px;
}

.competition-schedule-list {
  display: grid;
  gap: 10px;
}

.competition-schedule-group {
  background: rgba(7, 10, 9, 0.48);
  border: 1.5px solid rgba(216, 255, 235, 0.14);
  border-radius: 8px;
  overflow: hidden;
}

.competition-schedule-group-header {
  align-items: center;
  border-bottom: 1px solid rgba(216, 255, 235, 0.12);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.competition-schedule-group-header > div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.competition-schedule-group-header h3 {
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.competition-schedule-group-header strong {
  color: var(--green-dark);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.competition-group-icon {
  color: var(--green-dark);
  display: inline-flex;
  height: 18px;
  width: 18px;
}

.competition-group-icon:empty {
  display: none;
}

.competition-game-list {
  display: grid;
  gap: 0;
}

.competition-game-list .competition-game-row {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(216, 255, 235, 0.1);
}

.competition-game-list .competition-game-row:last-child {
  border-bottom: 0;
}

.competition-schedule-controls .schedule-day-controls,
.competition-schedule-controls .schedule-range-controls {
  flex: 0 1 auto;
}

.available-session-table-head {
  color: var(--muted);
  display: grid;
  font-size: 10.5px;
  font-weight: 950;
  gap: 12px;
  grid-template-columns: 86px minmax(150px, 0.9fr) minmax(170px, 1fr) 82px 82px 92px minmax(210px, auto);
  padding: 0 10px;
  text-transform: uppercase;
}

.available-session-table-head.competition-game-head,
.program-session-row.competition-game-row {
  grid-template-columns: 90px minmax(110px, 0.6fr) minmax(220px, 1fr) minmax(240px, 0.9fr) 105px 210px;
}

.date-reservation-list {
  display: grid;
  gap: 8px;
}

.program-session-row {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 86px minmax(150px, 0.9fr) minmax(170px, 1fr) 82px 82px 92px minmax(210px, auto);
  padding: 10px;
}

.program-session-row.selected {
  border-color: rgba(240, 82, 27, 0.42);
  box-shadow: inset 0 0 0 1px rgba(240, 82, 27, 0.14);
}

.program-session-date {
  background: var(--mint);
  border: 1.5px solid rgba(31, 122, 77, 0.16);
  border-radius: 8px;
  color: var(--green-dark);
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 8px;
  text-align: center;
}

.program-session-date strong,
.program-session-time strong,
.program-session-location strong,
.program-session-count strong,
.program-session-price strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
}

.program-session-date span,
.program-session-time span,
.program-session-location span,
.program-session-count span,
.program-session-price span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.program-session-date-mobile,
.program-session-time-mobile,
.program-session-mobile-metric {
  display: none;
}

.program-session-count,
.program-session-price {
  text-align: center;
}

.program-session-count strong {
  color: var(--green-dark);
}

.competition-matchup-cell {
  align-items: start;
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
}

.competition-matchup-team {
  align-items: baseline;
  color: #ffffff;
  display: flex;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.competition-matchup-cell .competition-team-side {
  color: inherit;
  display: inline;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.competition-matchup-team strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}

.competition-matchup-team.is-winner,
.competition-matchup-team.is-winner strong,
.competition-matchup-team.is-winner .competition-team-side,
.competition-score-line.is-winner,
.competition-score-line.is-winner .competition-team-score,
.competition-score-line.is-winner .competition-result-badge {
  color: #13d985;
}

.competition-score-cell {
  align-items: start;
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
}

.competition-score-line {
  align-items: baseline;
  color: #ffffff;
  display: inline-flex;
  gap: 8px;
  min-height: 16.25px;
}

.competition-score-line .competition-team-score {
  color: inherit;
  display: inline;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  min-width: 2ch;
  text-align: right;
}

.competition-score-line .competition-result-badge {
  color: inherit;
  display: inline;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.program-session-price strong {
  color: var(--ink);
  font-size: 16px;
}

.program-session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.competition-game-row .program-session-actions {
  align-items: flex-end;
  flex-direction: column;
  justify-self: end;
  min-width: 210px;
}

.program-session-actions .parent-action-button {
  min-height: 32px;
}

.program-calendar-panel {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.program-detail-note {
  align-items: center;
  background: rgba(31, 122, 77, 0.06);
  border: 1.5px solid rgba(31, 122, 77, 0.12);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px 12px;
}

.program-detail-note span {
  align-items: center;
  background: var(--mint);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-grid;
  flex: 0 0 auto;
  font-size: 11px;
  height: 18px;
  place-items: center;
  width: 18px;
}

.program-package-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.package-offer-grid {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.program-package-card {
  align-items: start;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.program-package-card .parent-action-button {
  grid-column: 1 / -1;
}

.program-package-card.training-pass-card {
  grid-column: 1 / -1;
}

.program-package-card.training-pass-card:not(.is-open) {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(180px, 260px);
}

.program-package-price {
  text-align: right;
}

.program-package-price strong {
  color: var(--green-dark);
  display: block;
  font-size: 24px;
}

.program-package-price span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.training-pass-policy,
.training-pass-date-list,
.training-pass-count {
  grid-column: 1 / -1;
}

.training-pass-policy {
  background: #fff7ed;
  border: 1.5px solid rgba(245, 112, 37, 0.25);
  border-radius: 8px;
  color: #6f320d;
  padding: 12px;
}

.training-pass-policy strong {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.training-pass-policy p {
  margin: 0;
}

.training-pass-summary {
  background: #f8faf8;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  grid-column: 1 / -1;
  padding: 10px 12px;
}

.program-package-card.training-pass-card:not(.is-open) .training-pass-summary {
  grid-column: auto;
}

.training-pass-summary strong {
  color: var(--green-dark);
  display: block;
  font-size: 13px;
  margin-bottom: 3px;
}

.training-pass-count {
  align-items: center;
  background: var(--mint);
  border: 1.5px solid rgba(15, 122, 77, 0.18);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  padding: 8px 12px;
  width: fit-content;
}

.training-pass-date-list {
  display: grid;
  gap: 8px;
}

.training-pass-date-row {
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding: 10px;
}

.training-pass-date-row.disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.training-pass-date-box {
  background: #f6faf7;
  border: 1.5px solid rgba(15, 122, 77, 0.16);
  border-radius: 8px;
  color: var(--green-dark);
  display: grid;
  min-width: 64px;
  padding: 6px 8px;
  text-align: center;
}

.training-pass-date-box strong,
.training-pass-date-status {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-pass-date-box span,
.training-pass-date-main span,
.training-pass-helper {
  color: var(--muted);
  font-size: 12px;
}

.training-pass-date-main {
  display: grid;
  gap: 2px;
}

.training-pass-date-main em {
  color: #8a5a12;
  font-size: 12px;
  font-style: normal;
}

.training-pass-date-status.available {
  color: var(--green-dark);
}

.training-pass-date-status.reserved {
  color: #5a4a0c;
}

.training-pass-date-status.unavailable {
  color: var(--red);
}

.training-pass-empty {
  background: #f7f7f4;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  grid-column: 1 / -1;
  padding: 12px;
}

.program-package-products {
  gap: 18px;
}

.program-package-products .program-package-grid {
  align-items: stretch;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.program-package-products .program-package-card,
.program-package-products .program-package-card.training-pass-card,
.program-package-products .program-package-card.training-pass-card:not(.is-open) {
  align-items: stretch;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(19, 217, 133, 0.08), transparent 68%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border-color: rgba(238, 242, 236, 0.3);
  border-radius: 12px;
  border-width: 2px;
  display: grid;
  gap: 14px;
  grid-column: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto auto;
  min-height: 330px;
  padding: 18px;
}

.program-package-products .program-package-card.program-bundle-card {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 153, 0, 0.06), transparent 68%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
}

.package-offer-grid .package-bundle-card,
.program-package-products .program-package-card.package-bundle-card {
  align-items: stretch;
  background:
    radial-gradient(ellipse 72% 62% at 14% 0%, rgba(255, 153, 0, 0.065), transparent 70%),
    radial-gradient(ellipse 68% 58% at 92% 0%, rgba(19, 217, 133, 0.075), transparent 72%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.98), rgba(8, 11, 10, 0.96));
  border-color: rgba(238, 242, 236, 0.34);
  border-radius: 14px;
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 18px 48px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(0, 255, 170, 0.035);
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  min-height: 100%;
  padding: 18px;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.package-offer-grid .package-bundle-card.has-savings,
.program-package-products .program-package-card.package-bundle-card.has-savings {
  border-color: rgba(255, 153, 0, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 54px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 153, 0, 0.06),
    0 0 30px rgba(0, 255, 170, 0.035);
}

.package-offer-grid .package-bundle-card:hover,
.program-package-products .program-package-card.package-bundle-card:hover {
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 22px 58px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(0, 255, 170, 0.055);
  transform: translateY(-2px);
}

.program-package-products .program-package-card.training-pass-card,
.program-package-products .program-package-card.training-pass-card:not(.is-open) {
  align-self: start;
  border-color: rgba(255, 153, 0, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 54px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 153, 0, 0.06),
    0 0 30px rgba(0, 255, 170, 0.035);
  grid-template-rows: auto;
  height: auto;
  min-height: 0;
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.program-package-products .program-package-card.training-pass-card:hover,
.program-package-products .program-package-card.training-pass-card:not(.is-open):hover {
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 22px 58px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(0, 255, 170, 0.055);
  transform: translateY(-2px);
}

.package-bundle-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.package-bundle-header h3 {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.05;
  margin: 4px 0 0;
}

.package-bundle-intro,
.package-bundle-note {
  color: rgba(247, 250, 248, 0.76);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.package-bundle-note {
  align-items: center;
  color: rgba(222, 255, 236, 0.86);
  display: flex;
  gap: 8px;
}

.package-bundle-note::before {
  background: rgba(19, 217, 133, 0.16);
  border: 1px solid rgba(19, 217, 133, 0.35);
  border-radius: 999px;
  color: #45f0a2;
  content: "✓";
  display: inline-grid;
  flex: 0 0 20px;
  font-size: 12px;
  font-weight: 950;
  height: 20px;
  place-items: center;
  width: 20px;
}

.package-bundle-program-list {
  align-content: start;
  display: grid;
  gap: 9px;
}

.package-bundle-program-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(216, 255, 235, 0.13);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 10px;
}

.package-bundle-program-row.has-check {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.package-program-check {
  background: rgba(19, 217, 133, 0.18);
  border: 1px solid rgba(19, 217, 133, 0.36);
  border-radius: 999px;
  color: #45f0a2;
  display: inline-grid;
  font-size: 12px;
  font-weight: 950;
  height: 22px;
  place-items: center;
  width: 22px;
}

.package-bundle-program-avatar {
  align-items: center;
  background: rgba(8, 11, 10, 0.92);
  border: 1px solid rgba(238, 242, 236, 0.34);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 46px;
  font-size: 13px;
  font-weight: 950;
  height: 46px;
  justify-content: center;
  overflow: hidden;
  width: 46px;
}

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

.package-bundle-program-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.package-bundle-program-copy strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-bundle-program-copy span,
.package-bundle-program-value span {
  color: rgba(247, 250, 248, 0.66);
  font-size: 12px;
  font-weight: 750;
}

.package-bundle-program-value {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.package-bundle-program-value strong {
  color: #ffffff;
  font-size: 15px;
}

.package-bundle-empty {
  border: 1px dashed rgba(216, 255, 235, 0.18);
  border-radius: 10px;
  color: rgba(247, 250, 248, 0.68);
  padding: 12px;
}

.package-bundle-value-panel {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(216, 255, 235, 0.13);
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  overflow: hidden;
}

.package-bundle-value-panel > div {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.package-bundle-value-panel > div + div {
  border-left: 1px solid rgba(216, 255, 235, 0.12);
}

.package-bundle-value-panel span {
  color: rgba(247, 250, 248, 0.68);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-bundle-value-panel strong {
  color: #ffffff;
  font-size: 25px;
  line-height: 0.95;
}

.package-bundle-value-panel .package-bundle-savings strong,
.package-bundle-value-panel .package-bundle-savings span {
  color: #6dff70;
}

.package-bundle-player {
  display: grid;
  gap: 8px;
}

.package-bundle-cta {
  min-height: 48px;
  width: 100%;
}

.package-card-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.package-marketplace-badge {
  background: rgba(240, 82, 27, 0.14);
  border: 1px solid rgba(240, 82, 27, 0.36);
  border-radius: 999px;
  color: #ff9b41;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.package-card-body {
  align-content: start;
  display: grid;
  gap: 8px;
}

.package-card-body h3 {
  color: #ffffff;
  font-size: 22px;
  line-height: 1.05;
  margin: 0;
}

.program-package-products .program-package-price {
  display: grid;
  gap: 5px;
  text-align: left;
}

.program-package-products .program-package-price strong {
  color: #ffffff;
  font-size: 42px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.program-package-products .program-package-price span,
.package-feature-row {
  color: rgba(247, 250, 248, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.package-feature-row {
  background: rgba(19, 217, 133, 0.1);
  border: 1px solid rgba(19, 217, 133, 0.2);
  border-radius: 999px;
  color: var(--green-dark);
  justify-self: start;
  padding: 8px 10px;
}

.program-package-products .program-package-card .parent-action-button {
  grid-column: auto;
  justify-self: stretch;
}

.training-pass-modal-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 80;
}

.training-pass-modal {
  background:
    radial-gradient(ellipse 82% 70% at 20% 0%, rgba(255, 153, 0, 0.05), transparent 68%),
    radial-gradient(ellipse 82% 70% at 80% 0%, rgba(0, 255, 140, 0.06), transparent 68%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.98), rgba(8, 11, 10, 0.98));
  border: 2px solid rgba(238, 242, 236, 0.36);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 28px 80px rgba(0, 0, 0, 0.56);
  display: grid;
  gap: 16px;
  max-height: min(86vh, 760px);
  max-width: 820px;
  overflow: auto;
  padding: 22px;
  width: min(100%, 820px);
}

.training-pass-modal-header,
.training-pass-modal-summary,
.training-pass-modal-actions {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.training-pass-modal-header h2 {
  margin: 2px 0 0;
}

.training-pass-modal-close {
  white-space: nowrap;
}

.training-pass-modal-summary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 12px;
  padding: 12px;
}

.training-pass-modal-summary > div:first-child {
  display: grid;
  gap: 3px;
}

.training-pass-modal-summary strong {
  color: #ffffff;
}

.training-pass-modal-summary span {
  color: rgba(247, 250, 248, 0.72);
  font-size: 12px;
  font-weight: 750;
}

.training-pass-modal .training-pass-date-list {
  max-height: min(48vh, 420px);
  overflow: auto;
  padding-right: 4px;
}

.training-pass-modal .training-pass-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(216, 255, 235, 0.14);
  color: rgba(247, 250, 248, 0.74);
}

.training-pass-modal .training-pass-count {
  grid-column: auto;
}

.training-pass-modal-actions {
  border-top: 1px solid rgba(216, 255, 235, 0.14);
  padding-top: 14px;
}

@media (max-width: 760px) {
  .package-offer-grid,
  .program-package-products .program-package-grid {
    grid-template-columns: 1fr;
  }

  .package-card-header,
  .package-bundle-header,
  .training-pass-modal-header,
  .training-pass-modal-summary,
  .training-pass-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .training-pass-modal-backdrop {
    padding: 12px;
  }

  .training-pass-modal {
    padding: 16px;
  }

  .training-pass-modal-actions .parent-action-button,
  .training-pass-modal-actions .parent-link-button {
    width: 100%;
  }
}

.program-calendar-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.calendar-month-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.program-calendar-header h3 {
  margin-bottom: 0;
  min-width: 138px;
}

.calendar-nav-button,
.calendar-today-button {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 34px;
}

.calendar-nav-button {
  font-size: 22px;
  line-height: 1;
  width: 36px;
}

.calendar-today-button {
  color: var(--green-dark);
  font-size: 12px;
  padding: 0 12px;
}

.calendar-nav-button:hover,
.calendar-today-button:hover {
  border-color: rgba(13, 95, 58, 0.34);
  box-shadow: inset 0 0 0 1px rgba(13, 95, 58, 0.06);
}

.calendar-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 850;
  gap: 10px;
}

.calendar-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.legend-dot {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.legend-dot.available {
  background: var(--green);
}

.legend-dot.selected {
  border: 2px solid var(--brand-orange);
}

.legend-dot.booked {
  background: #ffffff;
  border: 2px solid var(--green);
}

.legend-dot.unavailable {
  background: #9aa09b;
}

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

.calendar-weekday {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 2px;
  text-align: center;
  text-transform: uppercase;
}

.calendar-cell {
  align-items: center;
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  text-align: center;
}

button.calendar-cell {
  background: #ffffff;
}

.calendar-cell strong {
  font-size: 13px;
}

.calendar-cell span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.calendar-cell.available {
  border-color: rgba(31, 122, 77, 0.28);
  color: var(--green-dark);
}

.calendar-cell.booked {
  background: linear-gradient(180deg, #ffffff 0%, rgba(31, 122, 77, 0.07) 100%);
  border-color: rgba(31, 122, 77, 0.42);
}

.calendar-cell.selected {
  background: #fff7f1;
  border-color: var(--brand-orange);
  box-shadow: inset 0 0 0 1px rgba(240, 82, 27, 0.2);
  color: var(--brand-orange);
}

.calendar-booked-mark {
  color: var(--green-dark);
  display: block;
  font-size: 8.5px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-cell.unavailable {
  background: #f0f1ee;
  color: #6d736e;
}

.calendar-empty {
  background: transparent;
  border-color: transparent;
}

.program-date-card {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.program-date-card.selected {
  border-color: #b9dfc8;
  box-shadow: inset 0 0 0 1px rgba(31, 122, 77, 0.08);
}

.program-date-main {
  align-items: center;
  background: #ffffff;
  border: 0;
  color: var(--ink);
  display: grid;
  gap: 14px;
  grid-template-columns: 108px minmax(0, 1fr) minmax(128px, auto) 116px;
  min-height: 88px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.program-date-box {
  min-height: 68px;
}

.program-date-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.program-date-copy h3,
.program-date-copy p {
  margin-bottom: 0;
}

.program-date-status {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

.program-date-status strong {
  color: var(--green-dark);
  font-size: 13px;
}

.date-select-label {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  padding: 9px 10px;
  text-align: center;
  white-space: nowrap;
}

.program-month-empty {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 22px;
}

.program-month-empty strong {
  display: block;
  margin-bottom: 3px;
}

.soft-warning {
  color: #75510d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

.program-reservation-prompt {
  background: var(--section);
  border-top: 1.5px solid var(--line);
  display: grid;
  gap: 12px;
  padding: 13px;
}

.prompt-summary {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.prompt-availability {
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.prompt-availability strong {
  color: var(--green-dark);
  font-size: 14px;
}

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

.prompt-choice-grid > div {
  background: #ffffff;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px;
}

.prompt-choice-grid p,
.prompt-choice-grid strong {
  margin-bottom: 0;
}

.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-actions .parent-action-button {
  min-width: 190px;
}

.program-option {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 13px;
}

.program-option.best {
  border-color: #b9dfc8;
  box-shadow: inset 0 0 0 1px rgba(31, 122, 77, 0.08);
}

.program-option h4 {
  font-size: 15px;
  margin: 0;
}

.program-option strong {
  font-size: 22px;
}

.option-kicker {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.account-status-card {
  align-items: start;
  background: var(--section);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.account-status-card.needs-action {
  border-color: #f0c9a9;
  box-shadow: 0 18px 44px rgba(240, 82, 27, 0.09);
}

.account-status-card h2,
.account-status-card p {
  margin-bottom: 0;
}

.account-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.account-status-item {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  display: inline-flex;
  gap: 7px;
  padding: 5px 8px;
  white-space: nowrap;
}

.account-status-item span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.agreement-panel {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.portal-notice {
  border: 1.5px solid transparent;
  border-radius: 8px;
  display: none;
  font-weight: 800;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.portal-notice.show {
  background: var(--mint);
  border-color: #b9dfc8;
  color: var(--green-dark);
  display: block;
}

.portal-notice.error {
  background: var(--red-soft);
  border-color: #f1c3bb;
  color: var(--red);
}

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

.overview-section-heading {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.overview-section-heading h2 {
  font-size: 19px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.family-dashboard-heading {
  display: grid;
  gap: 8px;
  margin: -2px 0 0;
}

.family-dashboard-heading h2,
.overview-dashboard-section-heading h2,
.notification-summary-title h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.family-dashboard-heading h2 {
  color: #ffffff;
}

.family-player-section .overview-dashboard-section-heading h2 {
  color: rgba(247, 250, 248, 0.92);
  font-family: "Teko", "Oswald", "Arial Narrow", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.family-dashboard-heading p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  max-width: 920px;
}

.family-dashboard-divider {
  background: var(--green);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(19, 217, 133, 0.24);
  display: block;
  height: 1.5px;
  margin: 10px 0 2px;
  width: 72%;
}

.overview-dashboard-section-heading {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.overview-dashboard-section-heading .muted {
  margin-top: 6px;
}

.family-player-section,
.overview-reservations-section {
  display: grid;
  gap: 14px;
}

.family-player-card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.family-player-card {
  background:
    linear-gradient(135deg, rgba(19, 217, 133, 0.11), transparent 42%),
    linear-gradient(132deg, transparent 0 47%, rgba(19, 217, 133, 0.035) 47% 56%, transparent 56%),
    linear-gradient(132deg, transparent 0 66%, rgba(19, 217, 133, 0.045) 66% 76%, transparent 76%),
    linear-gradient(132deg, transparent 0 78%, rgba(247, 250, 248, 0.025) 78% 84%, transparent 84%),
    radial-gradient(ellipse 85% 80% at 18% 0%, rgba(19, 217, 133, 0.13), transparent 58%),
    linear-gradient(180deg, rgba(8, 13, 11, 0.94), rgba(4, 7, 6, 0.96));
  border: 1.5px solid rgba(19, 217, 133, 0.25);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -28px 42px rgba(0, 0, 0, 0.15),
    0 20px 40px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(19, 217, 133, 0.035);
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 16px 18px 18px;
  position: relative;
}

.family-player-card::before {
  background: linear-gradient(90deg, var(--green), rgba(141, 255, 189, 0.55), transparent);
  box-shadow:
    0 0 16px rgba(19, 217, 133, 0.32),
    0 10px 28px rgba(19, 217, 133, 0.16);
  content: "";
  height: 4px;
  left: 18px;
  opacity: 0.95;
  position: absolute;
  right: 35%;
  top: 0;
  z-index: 2;
}

.family-player-card::after {
  background-image: radial-gradient(circle, rgba(19, 217, 133, 0.32) 0 1px, transparent 1.35px);
  background-size: 12px 12px;
  bottom: -18px;
  content: "";
  height: 54%;
  opacity: 0.14;
  pointer-events: none;
  position: absolute;
  right: -16px;
  transform: skewX(-12deg);
  width: 43%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 0 18%, rgba(0, 0, 0, 0.74) 38%, transparent 76%);
  mask-image: radial-gradient(ellipse at 100% 100%, #000 0 18%, rgba(0, 0, 0, 0.74) 38%, transparent 76%);
}

.family-player-card > * {
  position: relative;
  z-index: 1;
}

.family-player-card-header {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  position: relative;
}

.family-player-card-header::before {
  background: radial-gradient(circle, rgba(19, 217, 133, 0.2), rgba(19, 217, 133, 0.06) 42%, transparent 72%);
  border-radius: 999px;
  content: "";
  filter: blur(12px);
  height: 88px;
  left: -7px;
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  z-index: 0;
}

.family-player-card-header > * {
  position: relative;
  z-index: 1;
}

.family-player-card .player-avatar {
  border: 1.5px solid rgba(247, 250, 248, 0.34);
  box-shadow:
    0 0 0 5px rgba(19, 217, 133, 0.09),
    0 0 34px rgba(19, 217, 133, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.28);
  height: 74px;
  width: 74px;
}

.family-player-card-title {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 96px;
  width: 100%;
}

.family-player-card-title h3 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.08;
  margin: 0;
  max-width: 100%;
  hyphens: none;
  overflow-wrap: normal;
  text-transform: uppercase;
  white-space: normal;
  word-break: normal;
}

.family-player-card-title p {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 7px 0 0;
  text-transform: none;
}

.family-player-jersey-number {
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  background:
    linear-gradient(180deg, rgba(19, 217, 133, 0.14), rgba(19, 217, 133, 0.04)),
    rgba(3, 8, 6, 0.62);
  border: 1px solid rgba(19, 217, 133, 0.34);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 10px 22px rgba(0, 0, 0, 0.22);
  color: rgba(246, 190, 74, 0.94);
  min-width: 48px;
  padding: 8px 10px;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  position: absolute;
  right: 18px;
  top: 20px;
  text-align: center;
  z-index: 3;
}

.family-player-attribute-line {
  align-items: center;
  color: rgba(247, 250, 248, 0.78);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 750;
  gap: 6px 0;
  line-height: 1.4;
  margin: -2px 0 0;
}

.family-player-attribute-line span {
  align-items: center;
  display: inline-flex;
}

.family-player-attribute-line span + span::before {
  background: var(--green);
  border-radius: 999px;
  content: "";
  height: 5px;
  margin: 0 11px;
  opacity: 0.86;
  width: 5px;
}

.family-player-block-label {
  color: rgba(220, 229, 224, 0.64);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.family-player-card-block {
  border-top: 1px solid rgba(216, 255, 235, 0.11);
  display: grid;
  gap: 9px;
  padding-top: 11px;
}

.family-player-registration-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.family-player-registration-list li {
  color: rgba(247, 250, 248, 0.9);
  font-size: 14px;
  line-height: 1.35;
  padding-left: 15px;
  position: relative;
}

.family-player-registration-list li::before {
  background: var(--green);
  border-radius: 999px;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 0.6em;
  width: 6px;
}

.family-player-more-button {
  background: transparent;
  border: 0;
  color: var(--green);
  justify-self: start;
  font-size: 13px;
  font-weight: 900;
  padding: 0;
}

.family-player-empty-programs {
  color: rgba(247, 250, 248, 0.66);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.family-player-status-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.family-player-status-pill {
  align-items: center;
  background: rgba(19, 217, 133, 0.055);
  border: 1px solid rgba(19, 217, 133, 0.18);
  border-radius: 999px;
  color: rgba(247, 250, 248, 0.78);
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
  gap: 5px;
  line-height: 1;
  padding: 5px 7px;
}

.family-player-status-pill span {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 8px;
  height: 13px;
  justify-content: center;
  width: 13px;
}

.family-player-status-pill.current {
  color: #8dffbd;
}

.family-player-status-pill.pending {
  color: #ffd37a;
  background: rgba(255, 211, 122, 0.055);
  border-color: rgba(255, 211, 122, 0.18);
}

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

.section-link-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  gap: 8px;
  justify-content: center;
  padding: 8px 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.overview-reservations-cta-label-mobile {
  display: none;
}

.overview-reservations-cta-mobile-bottom {
  display: none;
}

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

.overview-program-card {
  border: 1.5px solid var(--line);
  border-left: 4px solid color-mix(in srgb, var(--program-color, #68746e) 82%, #ffffff);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-height: 100%;
  padding: 14px;
}

.overview-program-media {
  background: var(--section);
  border-radius: 8px;
  height: 104px;
  margin: -2px -2px 2px;
  overflow: hidden;
  position: relative;
}

.overview-program-media .program-media-logo {
  height: 34px;
  width: 34px;
}

.overview-program-card header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.overview-program-title-lockup {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.overview-program-logo {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(9, 12, 11, 0.9);
  border: 1.5px solid rgba(216, 255, 235, 0.2);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.26);
  display: inline-flex;
  flex: 0 0 auto;
  height: 56px;
  overflow: hidden;
  width: 56px;
}

.overview-program-logo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.overview-program-card h3 {
  font-size: 18px;
  line-height: 1.15;
  margin-bottom: 0;
  min-width: 0;
}

.overview-meta-line {
  align-items: center;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 7px;
  line-height: 1.35;
}

.overview-meta-line .meta-icon {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  flex: 0 0 auto;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.overview-program-description {
  color: #303934;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 0;
  min-height: 40px;
}

.overview-program-divider {
  border-top: 1.5px solid var(--line-soft);
  margin: 3px 0;
}

.overview-schedule-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.session-count-badge {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 9px;
  text-transform: uppercase;
}

.overview-chip-row {
  margin-top: 2px;
}

.overview-card-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4px;
}

.overview-cta {
  min-width: 0;
  text-transform: uppercase;
}

.overview-program-card .parent-action-button.secondary {
  background: #ffffff;
  border-color: var(--green);
  color: var(--green-dark);
}

.portal-card,
.session-card,
.player-card {
  padding: 18px;
}

.notification-center {
  display: grid;
  gap: 12px;
}

.notification-center-header,
.notification-title-row,
.notification-meta {
  align-items: center;
  display: flex;
  gap: 10px;
}

.notification-center-header {
  justify-content: space-between;
}

.notification-center-header h2 {
  margin-bottom: 2px;
}

.notification-header-actions,
.notification-history-filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-item {
  align-items: start;
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px;
}

.notification-item.unread {
  background: linear-gradient(90deg, rgba(232, 244, 237, 0.9), #ffffff);
  border-color: rgba(31, 122, 77, 0.24);
}

.notification-type-dot {
  background: var(--green);
  border-radius: 999px;
  box-shadow: 0 0 0 6px var(--mint);
  height: 9px;
  margin-top: 9px;
  width: 9px;
}

.notification-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.notification-title-row {
  justify-content: space-between;
}

.notification-title-row strong {
  font-size: 14px;
}

.notification-title-row span,
.notification-meta,
.notification-read-state {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.notification-copy p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.notification-meta {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.notification-read-button {
  background: #ffffff;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  min-height: 38px;
  padding: 8px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.notification-read-button.compact {
  min-height: 32px;
  padding: 6px 10px;
}

.notification-caught-up {
  align-items: center;
  background: linear-gradient(90deg, rgba(232, 244, 237, 0.78), #ffffff);
  border: 1.5px solid rgba(31, 122, 77, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px;
}

.notification-caught-up > span {
  align-items: center;
  background: var(--mint);
  border: 1.5px solid rgba(31, 122, 77, 0.22);
  border-radius: 999px;
  color: var(--green);
  display: inline-flex;
  font-size: 16px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.notification-caught-up strong,
.notification-history-header h3 {
  display: block;
  font-size: 16px;
  line-height: 1.2;
}

.notification-history-link {
  background: transparent;
  border: 0;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.notification-history-panel {
  background: #ffffff;
  border: 1.5px solid var(--line-soft);
  border-radius: 10px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.notification-history-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.notification-history-filters {
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 9px;
  gap: 0;
  overflow: hidden;
}

.notification-history-filters button {
  background: transparent;
  border: 0;
  border-right: 1.5px solid var(--line-soft);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 36px;
  padding: 8px 16px;
  text-transform: uppercase;
}

.notification-history-filters button:last-child {
  border-right: 0;
}

.notification-history-filters button.active {
  background: var(--green);
  color: #ffffff;
}

.notification-history-list {
  max-height: 440px;
  overflow: auto;
  padding-right: 2px;
}

.balance-hero {
  align-items: end;
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.balance-hero strong {
  color: var(--green-dark);
  font-size: 52px;
  line-height: 0.9;
}

.balance-hero span {
  color: var(--muted);
  font-weight: 800;
  padding-bottom: 4px;
}

.reservation-list {
  display: grid;
  gap: 8px;
}

.reservation-section-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reservation-section-heading h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.reservation-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  padding: 12px;
}

.date-box {
  background: #fbfaf4;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 8px;
}

.date-box strong {
  font-size: 13px;
  text-align: center;
}

.status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-reserved,
.status-pending,
.status-pending_payment,
.status-approved,
.status-registered,
.status-active {
  background: var(--mint);
  color: var(--green-dark);
}

.status-pending,
.status-pending_payment,
.status-pending_review,
.status-contacted,
.status-required_before_participation {
  background: var(--blue-soft);
  color: #225b7b;
}

.status-waitlisted,
.status-due {
  background: var(--purple-soft);
  color: var(--purple);
}

.status-current {
  background: var(--mint);
  color: var(--green-dark);
}

.status-checked_in {
  background: var(--purple-soft);
  color: var(--purple);
}

.status-canceled,
.status-payment_failed,
.status-payment_expired,
.status-declined,
.status-no_show {
  background: var(--red-soft);
  color: var(--red);
}

.status-refunded {
  background: #eef0f2;
  color: #4f565c;
}

.status-incomplete_profile,
.status-flagged_review,
.status-restricted_access {
  background: #fff4d8;
  color: #76520d;
}

.status-inactive {
  background: #eef0f2;
  color: #4f565c;
}

.session-card {
  display: grid;
  gap: 13px;
  border-left: 4px solid var(--type-color, var(--brand-orange));
  container-type: inline-size;
}

.price-badge {
  background: var(--brand-accent-soft);
  border: 1.5px solid #ffd2bd;
  border-radius: 8px;
  color: var(--brand-dark);
  font-weight: 950;
  padding: 8px 10px;
}

.select-label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 850;
  gap: 6px;
  text-transform: uppercase;
}

.parent-select {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  padding: 8px 10px;
  width: 100%;
}

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

.parent-form-grid .full {
  grid-column: 1 / -1;
}

.performance-page-heading {
  gap: 10px;
}

.performance-page-heading h2 {
  color: #ffffff;
}

.performance-page-heading .performance-page-kicker {
  color: #ffffff;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 900;
  line-height: 1.15;
  margin: 0;
}

.performance-page-heading p:last-child {
  max-width: 820px;
}

.performance-unified-section {
  background:
    radial-gradient(ellipse 72% 76% at 16% 0%, rgba(19, 217, 133, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.13),
    0 0 24px rgba(0, 255, 170, 0.035),
    var(--shadow-soft);
  display: grid;
  margin-top: 0;
  overflow: hidden;
}

.performance-unified-header {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  padding: 24px 24px 18px;
}

.performance-unified-body {
  display: grid;
  gap: 20px;
  padding: 22px 24px 24px;
}

.performance-unified-section .performance-page-heading p {
  margin-bottom: 0;
}

.package-unified-section {
  background:
    radial-gradient(ellipse 72% 76% at 16% 0%, rgba(19, 217, 133, 0.08), transparent 64%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.13),
    0 0 24px rgba(0, 255, 170, 0.035),
    var(--shadow-soft);
  margin-top: 0;
  overflow: hidden;
  padding: 24px;
}

.package-unified-section h2 {
  color: #ffffff;
}

.package-unified-section p {
  margin-bottom: 10px;
}

.performance-analysis-panel {
  display: grid;
}

.parent-photo-form-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.parent-photo-form-row input[type="file"] {
  min-width: 0;
}

.performance-wizard {
  display: grid;
  gap: 16px;
  margin-top: 0;
}

.performance-wizard-progress {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.performance-wizard-progress span {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 9px;
}

.performance-wizard-progress strong {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.performance-wizard-progress em {
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.performance-wizard-progress .active,
.performance-wizard-progress .complete {
  background: #eef8f2;
  border-color: rgba(31, 122, 77, 0.32);
  color: var(--green-dark);
}

.performance-wizard-progress .active strong,
.performance-wizard-progress .complete strong {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}

.performance-wizard-step {
  background: var(--section);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.performance-wizard-step h3,
.performance-wizard-step h4 {
  margin: 0;
}

.performance-wizard-step.performance-service-selection-step {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

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

.performance-service-option {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 12px;
  min-height: 190px;
  padding: 14px;
  text-align: left;
}

.performance-service-option.active {
  background: #eef8f2;
  border-color: rgba(31, 122, 77, 0.44);
  box-shadow: 0 10px 20px rgba(31, 122, 77, 0.08);
}

.performance-service-option-top {
  display: grid;
  gap: 10px;
}

.performance-service-option-top strong {
  display: block;
  font-size: 16px;
  line-height: 1.25;
}

.performance-service-option-top small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
}

.performance-service-option-top em {
  color: var(--green-dark);
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
}

.performance-service-features {
  display: grid;
  gap: 5px;
}

.performance-service-features span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.performance-service-selected {
  align-self: end;
  border-top: 1.5px solid var(--line-soft);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
  padding-top: 10px;
  text-transform: uppercase;
}

.performance-example-box {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(37, 111, 168, 0.18);
  border-radius: 8px;
  color: var(--blue);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

.performance-example-box span {
  background: var(--blue-soft);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  padding: 5px 8px;
}

.performance-field-label {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.02em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.performance-segment-list {
  display: grid;
  gap: 8px;
}

.performance-segment-row {
  align-items: end;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  padding: 10px;
}

.performance-segment-row label {
  gap: 5px;
}

.performance-segment-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.performance-timestamp-input {
  font-variant-numeric: tabular-nums;
}

.parent-action-button.compact {
  min-height: 38px;
  padding: 8px 12px;
}

.performance-acknowledgement-list {
  display: grid;
  gap: 9px;
}

.performance-acknowledgement-list label {
  align-items: flex-start;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  line-height: 1.4;
  padding: 11px;
}

.performance-acknowledgement-list input {
  margin-top: 3px;
}

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

.performance-review-grid > div,
.performance-included-review {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.performance-review-grid .full {
  grid-column: 1 / -1;
}

.performance-review-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.performance-review-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.performance-included-review {
  gap: 8px;
}

.performance-included-review span {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 850;
}

.performance-wizard-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.profile-edit-panel,
.friend-invite-panel {
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 11px;
}

.profile-edit-panel summary,
.friend-invite-panel summary {
  cursor: pointer;
  font-weight: 900;
}

.player-profile-edit-panel summary {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(19, 217, 133, 0.26), rgba(12, 116, 75, 0.18)),
    rgba(5, 10, 8, 0.94);
  border: 1.5px solid rgba(19, 217, 133, 0.62);
  border-radius: 8px;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(19, 217, 133, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  color: #ffffff;
  display: flex;
  gap: 10px;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  text-align: center;
  text-transform: uppercase;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.player-profile-edit-panel summary::-webkit-details-marker {
  display: none;
}

.player-profile-edit-panel summary::marker {
  content: "";
}

.player-profile-edit-panel summary:hover,
.player-profile-edit-panel summary:focus-visible {
  border-color: rgba(91, 255, 177, 0.86);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(19, 217, 133, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.player-profile-edit-panel summary:focus-visible {
  outline: 2px solid rgba(91, 255, 177, 0.46);
  outline-offset: 3px;
}

.profile-edit-icon {
  align-items: center;
  border: 1px solid rgba(91, 255, 177, 0.44);
  border-radius: 999px;
  color: #8dffbd;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.profile-edit-icon svg {
  fill: none;
  height: 14px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 14px;
}

.profile-edit-panel form,
.friend-invite-panel form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.profile-field-help {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 6px;
  text-transform: none;
}

.players-toolbar-card,
.section-heading-row {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.players-toolbar-card .add-player-panel {
  max-width: 720px;
  min-width: min(100%, 340px);
}

.players-toolbar-card h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.player-profile-list {
  display: grid;
  gap: 14px;
}

.player-profile-card {
  display: grid;
  gap: 16px;
}

.player-profile-header {
  align-items: flex-start;
  gap: 16px;
}

.player-profile-media {
  align-items: center;
}

.player-profile-copy h2 {
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.player-profile-copy p {
  line-height: 1.35;
  margin-bottom: 4px;
}

.profile-status-stack {
  align-items: flex-end;
  display: grid;
  gap: 7px;
  justify-items: end;
}

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

.player-meta-grid div,
.family-player-row {
  background: #fbfaf4;
  border: 1.5px solid var(--line);
  border-radius: 8px;
}

.player-meta-grid div {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.player-meta-grid span,
.family-player-status span,
.reservation-credit {
  font-size: 12px;
}

.player-meta-grid span {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.player-meta-grid strong {
  font-size: 13px;
  line-height: 1.25;
}

.player-card-section {
  display: grid;
  gap: 9px;
}

.player-remove-panel {
  align-items: center;
  background: rgba(165, 55, 43, 0.08);
  border: 1.5px solid #f1c3bb;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.player-remove-panel strong {
  display: block;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 3px;
}

.player-remove-panel p {
  margin: 0;
}

.player-card-section h3 {
  margin-bottom: 0;
}

.package-summary-card {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 13px;
}

.package-summary-card p {
  margin: 4px 0 0;
}

.package-credit-lockup {
  align-items: end;
  display: flex;
  gap: 7px;
  white-space: nowrap;
}

.package-credit-lockup strong {
  color: var(--green-dark);
  font-size: 38px;
  line-height: 0.9;
}

.package-credit-lockup span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  padding-bottom: 3px;
}

.clean-reservation-row {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
}

.reservation-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reservation-main h3,
.reservation-main p {
  margin-bottom: 0;
}

.reservation-side {
  align-items: flex-end;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.reservation-credit {
  margin-bottom: 0;
  text-align: right;
}

.waitlist-line {
  color: #75510d;
  font-weight: 800;
}

.confirmation-line {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.account-form {
  display: grid;
  gap: 12px;
}

.checkbox-label {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 9px;
  min-height: 44px;
  text-transform: none;
}

.checkbox-label input {
  flex: 0 0 auto;
  min-height: 18px;
  width: 18px;
}

.account-profile-card {
  display: grid;
  gap: 14px;
}

.account-maintenance-card {
  gap: 24px;
}

.account-page-heading {
  display: grid;
  gap: 8px;
}

.account-page-heading h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.account-page-heading p {
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
}

.account-maintenance-section {
  border-top: 1px solid rgba(216, 255, 235, 0.12);
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.account-maintenance-section h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
  text-transform: uppercase;
}

.available-page-heading h2,
.parent-page-heading h2,
.family-dashboard-heading h2,
.overview-dashboard-section-heading h2,
.notification-summary-title h2,
.overview-section-heading h2,
.reservation-section-heading h2,
.players-toolbar-card h2,
.portal-content > .portal-card > h2,
.program-schedule-heading h2,
.program-rules-card h3,
.player-card-section h3,
.account-page-heading h2,
.account-maintenance-section h3,
.section-heading-row h3,
.performance-wizard-step h3,
.performance-wizard-step h4 {
  color: #ffffff;
  font-family: "Teko", "Oswald", "Arial Narrow", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.account-document-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-document-status {
  align-items: center;
  background: rgba(19, 217, 133, 0.055);
  border: 1.5px solid rgba(19, 217, 133, 0.2);
  border-radius: 12px;
  color: rgba(247, 250, 248, 0.86);
  display: inline-flex;
  gap: 10px;
  min-width: 220px;
  padding: 10px 12px;
}

.account-document-status > span {
  align-items: center;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: var(--green);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.account-document-status strong {
  color: #ffffff;
  display: block;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.account-document-status p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  margin: 2px 0 0;
}

.account-document-status.due {
  background: rgba(240, 82, 27, 0.08);
  border-color: rgba(240, 201, 169, 0.36);
}

.account-document-status.due > span {
  color: #f0c9a9;
}

.account-document-details-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.account-document-details {
  background: rgba(3, 8, 6, 0.84);
  border: 1.5px solid rgba(216, 255, 235, 0.16);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(19, 217, 133, 0.055);
  overflow: hidden;
}

.account-document-details summary {
  align-items: center;
  color: rgba(247, 250, 248, 0.92);
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  padding: 12px 14px;
}

.account-document-details summary::-webkit-details-marker {
  display: none;
}

.account-document-details summary span {
  color: #76ffb9;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.account-document-details summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.account-document-details[open] summary {
  border-bottom: 1px solid rgba(216, 255, 235, 0.12);
}

.account-document-body {
  color: rgba(247, 250, 248, 0.84);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px 14px;
  white-space: pre-line;
}

.compact-status-list {
  justify-content: flex-start;
  margin: 8px 0;
}

.family-player-list {
  display: grid;
  gap: 8px;
}

.family-player-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.family-player-row p,
.family-player-row strong {
  margin-bottom: 0;
}

.family-player-status {
  align-items: flex-end;
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.agreement-box {
  background: rgba(3, 8, 6, 0.88);
  border: 1.5px solid rgba(19, 217, 133, 0.24);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(19, 217, 133, 0.08);
  display: grid;
  gap: 8px;
  padding: 10px;
}

.agreement-box label {
  align-items: flex-start;
  color: rgba(247, 250, 248, 0.92);
  display: flex;
  font-size: 13px;
  font-weight: 850;
  gap: 8px;
}

.agreement-box input[type="checkbox"] {
  accent-color: var(--brand-green);
  flex: 0 0 auto;
  margin-top: 2px;
}

.agreement-box details {
  color: rgba(235, 240, 237, 0.72);
  font-size: 13px;
}

.agreement-box summary {
  color: rgba(118, 255, 185, 0.92);
  cursor: pointer;
  font-weight: 850;
}

.agreement-box p {
  color: rgba(247, 250, 248, 0.84);
  line-height: 1.5;
  margin: 8px 0 0;
}

.add-player-agreements {
  display: grid;
  gap: 10px;
}

.add-player-agreements .agreement-box {
  background: rgba(3, 8, 6, 0.84);
  border-color: rgba(19, 217, 133, 0.22);
}

.add-player-agreements .agreement-box label {
  color: rgba(247, 250, 248, 0.9);
}

.add-player-agreements .agreement-box details {
  color: rgba(235, 240, 237, 0.68);
}

.decision-hint {
  background: #fff8ec;
  border: 1px solid #f1dbc1;
  border-radius: 8px;
  color: #67420b;
  font-size: 13px;
  font-weight: 800;
  margin: 0;
  padding: 8px 10px;
}

.not-eligible-label {
  background: #eef0f2;
  border-radius: 999px;
  color: #596167;
  font-size: 12px;
  font-weight: 850;
  padding: 7px 10px;
}

.session-card header,
.player-card header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  background: var(--panel-tint);
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  min-height: 24px;
  padding: 5px 8px;
}

.tag-attention {
  background: var(--brand-accent-soft);
  border-color: #efcf96;
  color: #75510d;
}

.type-tag {
  background: color-mix(in srgb, var(--type-color, var(--brand-orange)) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--type-color, var(--brand-orange)) 24%, var(--line));
  color: color-mix(in srgb, var(--type-color, var(--brand-orange)) 68%, #111111);
}

.booking-panel {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1.5px solid var(--line);
}

.booking-option {
  align-items: center;
  background: var(--panel-tint);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 210px);
  padding: 13px;
}

.booking-option-confirmed {
  grid-template-columns: minmax(0, 1fr) auto;
}

.booking-option-warning {
  background: #fffcf4;
  border-color: #ead7a4;
}

.booking-option p {
  margin-bottom: 0;
}

.booking-player {
  align-items: center;
  min-width: 0;
}

.booking-player strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.booking-helper {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 3px 0 0;
}

.booking-option-warning .booking-helper,
.booking-note {
  color: #75510d;
}

.booking-note {
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 5px;
}

.booking-actions,
.reservation-actions {
  display: grid;
  gap: 7px;
  justify-items: stretch;
}

.reservation-actions .calendar-menu,
.reservation-actions .calendar-menu summary,
.reservation-actions .parent-action-button {
  width: 100%;
}

.reservation-actions .calendar-menu summary {
  min-height: 42px;
}

.reservation-actions .reservation-cancel-button {
  font-size: 10.5px;
  min-height: 29px;
  padding: 4px 9px;
}

.booking-state {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

.parent-action-button {
  align-items: center;
  background: var(--brand-orange);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 7px;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  white-space: nowrap;
}

.booking-actions .parent-action-button {
  justify-content: space-between;
  width: 100%;
}

.parent-action-button.action-primary {
  background: var(--green);
  box-shadow: 0 8px 16px rgba(31, 122, 77, 0.14);
}

.parent-action-button.action-package {
  background: var(--brand-orange);
  box-shadow: 0 8px 16px rgba(240, 82, 27, 0.14);
}

.parent-action-button.action-single {
  background: #ffffff;
  border-color: var(--green);
  color: var(--green-dark);
  box-shadow: none;
}

.parent-action-button.action-waitlist {
  background: var(--purple);
  box-shadow: 0 8px 16px rgba(98, 83, 163, 0.12);
}

.parent-action-button span {
  font-size: 11px;
  font-weight: 850;
  opacity: 0.9;
}

.parent-action-button.action-single span {
  color: var(--green-dark);
  opacity: 1;
}

.parent-action-button.secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

.parent-action-button.secondary span {
  color: #9a720e;
  opacity: 1;
}

.parent-action-button.danger {
  background: var(--red-soft);
  border-color: #f1c3bb;
  color: var(--red);
}

.calendar-menu {
  position: relative;
  z-index: 20;
}

.calendar-menu[open] {
  z-index: 220;
}

.calendar-menu summary {
  align-items: center;
  background: #ffffff;
  border: 1.5px solid color-mix(in srgb, var(--green) 58%, var(--line));
  border-radius: 8px;
  color: var(--green-dark);
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  gap: 7px;
  justify-content: center;
  list-style: none;
  min-height: 34px;
  padding: 7px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.calendar-menu summary::-webkit-details-marker {
  display: none;
}

.calendar-menu summary::before {
  content: "+";
  font-size: 14px;
  line-height: 1;
}

.calendar-menu-options {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(15, 35, 20, 0.12);
  display: grid;
  gap: 4px;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 240;
}

.portal-content > .portal-card:has(.calendar-menu[open]),
.reservation-list:has(.calendar-menu[open]),
.reservation-section-heading:has(.calendar-menu[open]),
.reservation-row:has(.calendar-menu[open]),
.clean-reservation-row:has(.calendar-menu[open]),
.program-schedule-heading:has(.calendar-menu[open]),
.schedule-heading-actions:has(.calendar-menu[open]) {
  overflow: visible;
  position: relative;
  z-index: 210;
}

.calendar-menu-options button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  padding: 9px 10px;
  text-align: left;
}

.calendar-menu-options button:hover {
  background: var(--mint);
  color: var(--green-dark);
}

.parent-action-button.directory-action,
.parent-action-button.directory-footer-button {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--green) 62%, var(--line));
  color: var(--green-dark);
}

.parent-link-button {
  background: transparent;
  border: 0;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parent-action-button:disabled {
  opacity: 0.6;
}

.confirmation-line {
  align-items: center;
  display: flex;
  gap: 7px;
}

.confirmation-logo {
  background: transparent;
  border-radius: 0;
  height: 18px;
  object-fit: contain;
  width: 18px;
}

.empty-state {
  background:
    radial-gradient(ellipse 80% 140% at 50% 0%, rgba(19, 217, 133, 0.055), transparent 62%),
    linear-gradient(180deg, rgba(11, 16, 14, 0.88), rgba(8, 11, 10, 0.82));
  border: 1.5px dashed rgba(216, 255, 235, 0.2);
  border-radius: 10px;
  color: rgba(220, 229, 224, 0.78);
  font-weight: 650;
  padding: 22px 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .login-view,
  .summary-grid,
  .player-grid,
  .session-grid,
  .overview-program-grid,
  .program-offer-grid,
  .program-card-meta,
	  .program-overview-grid,
	  .program-rule-grid,
	  .program-option-grid,
	  .program-overview-offer,
	  .program-overview-offer.has-media,
	  .program-detail-pricing-summary,
	  .program-detail-header.has-media,
	  .full-program-purchase-card,
	  .catalog-card-row,
	  .program-session-row,
	  .competition-choice-grid,
	  .prompt-choice-grid,
	  .performance-service-grid,
	  .performance-review-grid,
	  .parent-form-grid {
	    grid-template-columns: 1fr;
	  }

  .performance-wizard-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-wizard-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .performance-segment-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .login-view {
    align-content: center;
    padding: 20px;
  }

  .login-brand {
    justify-self: stretch;
  }

  .portal-header,
  .account-status-card,
  .players-toolbar-card,
  .section-heading-row,
  .overview-section-heading,
  .program-schedule-heading,
  .reservation-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .portal-header {
    flex-direction: column;
  }

  .portal-chrome {
    padding: 14px;
  }

  .players-toolbar-card,
  .section-heading-row,
  .program-schedule-heading,
  .prompt-summary {
    flex-direction: column;
  }

  .account-status-list {
    justify-content: stretch;
  }

  .account-status-item {
    border-radius: 8px;
    flex: 1 1 100%;
    white-space: normal;
  }

  .portal-brand {
    width: 100%;
  }

  .brand-logo-badge {
    height: 60px;
    width: 60px;
  }

  .portal-actions {
    width: 100%;
  }

  .portal-actions a,
  .portal-actions button {
    flex: 1;
  }

  .catalog-category-header {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-view-all {
    align-self: flex-start;
  }

  .available-directory-head,
  .dropin-directory-head {
    display: none;
  }

  .available-directory-row,
  .dropin-directory-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .available-directory-footer,
  .available-detail-footer {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .booking-option {
    grid-template-columns: 1fr;
  }

	  .program-detail-header,
	  .program-package-card.training-pass-card:not(.is-open),
	  .competition-game-row,
	  .program-date-main {
	    grid-template-columns: 1fr;
	  }

  .program-card-media,
  .program-detail-media {
    min-height: 180px;
  }

  .program-overview-offer .program-card-meta {
    border-top: 1.5px solid var(--line-soft);
    grid-template-columns: 1fr;
  }

  .program-overview-offer .program-card-meta div,
  .program-overview-offer .program-card-meta div + div {
    border-right: 0;
    border-top: 1.5px solid var(--line-soft);
    padding: 8px 0 0;
  }

  .program-overview-offer .program-card-meta div:first-child {
    border-top: 0;
  }

		  .program-card-action-panel {
		    border-left: 0;
		    border-top: 1.5px solid var(--line-soft);
		    padding-left: 0;
		    padding-top: 12px;
		  }

      .catalog-cta-row,
      .program-card-cta-row,
      .dropin-training-strip {
        grid-template-columns: 1fr;
      }

      .dropin-strip-icon {
        height: 48px;
        width: 48px;
      }

		  .competition-hero-actions,
		  .competition-registration-record {
		    align-items: stretch;
	  }

	  .competition-form-actions,
	  .competition-registration-record {
	    flex-direction: column;
	  }

  .full-program-purchase-copy {
    align-items: flex-start;
  }

  .program-calendar-header,
  .program-month-empty,
  .available-session-heading,
  .schedule-filter-panel,
  .schedule-day-controls,
  .schedule-range-controls,
  .program-schedule-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-mode-controls {
    width: 100%;
  }

  .schedule-mode-controls button {
    flex: 1;
  }

  .schedule-day-controls strong {
    min-width: 0;
    text-align: left;
  }

  .schedule-range-controls label,
  .schedule-range-controls input,
  .parent-action-button.compact {
    width: 100%;
  }

  .schedule-heading-actions,
  .reservation-section-heading,
  .calendar-menu,
  .calendar-menu summary {
    width: 100%;
  }

  .competition-schedule-controls {
    justify-content: stretch;
    width: 100%;
  }

  .competition-filter-bar {
    align-items: stretch;
    gap: 8px;
    padding: 8px;
    width: 100%;
  }

  .competition-filter-label {
    width: 100%;
  }

  .competition-filter-chips {
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 -2px;
    max-width: 100%;
    overflow-x: auto;
    padding: 0 2px 2px;
    scrollbar-width: none;
  }

  .competition-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .competition-filter-chip {
    flex: 0 0 auto;
    font-size: 11px;
    min-height: 36px;
    min-width: 102px;
    padding: 0 10px;
  }

  .competition-filter-dropdown {
    flex: 0 0 auto;
    min-width: 132px;
  }

  .competition-filter-dropdown .competition-filter-chip {
    min-height: 44px;
    padding: 7px 30px 7px 10px;
  }

  .competition-filter-menu {
    max-width: calc(100vw - 48px);
  }

  .competition-schedule-group-header {
    align-items: flex-start;
    padding: 10px 12px;
  }

  .competition-schedule-group-header h3 {
    font-size: 12px;
  }

  .competition-game-row .program-session-actions {
    align-items: stretch;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .competition-parent-detail,
  .competition-parent-detail *,
  .competition-parent-detail *::before,
  .competition-parent-detail *::after {
    box-sizing: border-box;
  }

  .competition-parent-detail {
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  .competition-parent-detail .portal-card,
  .competition-parent-detail .program-detail-header,
  .competition-parent-detail .program-detail-section,
  .competition-parent-detail .competition-registration-section,
  .competition-parent-detail .competition-schedule-section,
  .competition-parent-detail .competition-schedule-list,
  .competition-parent-detail .competition-schedule-group,
  .competition-parent-detail .competition-game-list,
  .competition-parent-detail .competition-game-row {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .competition-parent-detail .program-detail-header,
  .competition-parent-detail .program-detail-header.has-media {
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .competition-parent-detail .program-detail-media {
    min-height: 118px;
  }

  .competition-parent-detail .program-detail-identity {
    align-items: start;
    gap: 12px;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .competition-parent-detail .program-detail-logo {
    height: 58px;
    width: 58px;
  }

  .competition-parent-detail .program-detail-title-copy,
  .competition-parent-detail .program-detail-main,
  .competition-parent-detail .program-detail-meta-row,
  .competition-parent-detail .program-detail-meta-row span,
  .competition-parent-detail .program-detail-meta-row strong,
  .competition-parent-detail .competition-registration-copy,
  .competition-parent-detail .competition-schedule-section .muted {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .competition-parent-detail .program-detail-title-copy h2 {
    font-size: 24px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .competition-parent-detail .program-detail-title-copy p,
  .competition-parent-detail .program-detail-meta-row strong {
    line-height: 1.35;
  }

  .competition-parent-detail .program-detail-meta-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .competition-parent-detail .competition-hero-actions {
    min-width: 0;
    width: 100%;
  }

  .competition-registration-copy-desktop {
    display: none;
  }

  .competition-registration-copy-mobile {
    display: inline;
  }

  .competition-parent-tabs {
    background:
      radial-gradient(ellipse 80% 140% at 12% 0%, rgba(19, 217, 133, 0.05), transparent 62%),
      linear-gradient(180deg, rgba(10, 14, 13, 0.9), rgba(6, 9, 8, 0.86));
    border: 1px solid rgba(216, 255, 235, 0.14);
    border-radius: 999px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    padding: 4px;
    width: 100%;
  }

  .competition-parent-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: rgba(236, 243, 239, 0.68);
    font: inherit;
    font-size: 11px;
    font-weight: 950;
    min-height: 38px;
    padding: 0 6px;
    text-transform: uppercase;
  }

  .competition-parent-tabs button.active {
    background:
      radial-gradient(ellipse 90% 120% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 64%),
      linear-gradient(180deg, rgba(19, 217, 133, 0.88), rgba(7, 122, 75, 0.92));
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 16px rgba(19, 217, 133, 0.14);
    color: #ffffff;
  }

  .competition-rules-grid {
    grid-template-columns: 1fr;
  }

  .competition-parent-detail .competition-filter-chips {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    max-width: 100%;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

  .competition-parent-detail .competition-filter-chip {
    flex: none;
    min-width: 0;
    padding: 0 8px;
    width: 100%;
  }

  .competition-parent-detail .competition-filter-dropdown {
    flex: none;
    min-width: 0;
    width: 100%;
  }

  .competition-parent-detail .competition-filter-dropdown .competition-filter-chip {
    padding: 7px 30px 7px 10px;
  }

  .competition-parent-detail .competition-filter-dropdown:nth-child(even) .competition-filter-menu {
    left: auto;
    right: 0;
  }

  .competition-parent-detail .competition-filter-menu {
    max-width: calc(100vw - 48px);
    min-width: min(220px, calc(100vw - 48px));
  }

  .competition-parent-detail .competition-game-row {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .competition-parent-detail .competition-game-list {
    gap: 10px;
    padding: 10px;
  }

  .competition-parent-detail .competition-game-list .competition-game-row {
    border: 1px solid rgba(216, 255, 235, 0.13);
    border-radius: 8px;
  }

  .competition-parent-detail .competition-game-row > * {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .competition-parent-detail .competition-game-row .program-session-date {
    align-items: start;
    justify-items: start;
    min-height: 0;
    text-align: left;
  }

  .competition-parent-detail .competition-game-row .program-session-time,
  .competition-parent-detail .competition-game-row .program-session-location,
  .competition-parent-detail .competition-game-row .competition-matchup-cell,
  .competition-parent-detail .competition-game-row .competition-score-cell {
    justify-items: start;
    text-align: left;
  }

  .competition-parent-detail .competition-matchup-team {
    display: flex;
    gap: 8px;
    white-space: normal;
    width: 100%;
  }

  .competition-parent-detail .competition-matchup-team strong,
  .competition-parent-detail .program-session-location strong,
  .competition-parent-detail .program-session-location span {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .competition-parent-detail .competition-result-badge {
    align-self: start;
  }

  .competition-parent-detail .competition-game-row .calendar-menu,
  .competition-parent-detail .competition-game-row .calendar-menu summary {
    width: 100%;
  }

  .reservation-section-heading {
    display: grid;
  }

  .calendar-menu-options {
    left: 0;
    right: 0;
  }

  .calendar-month-controls {
    justify-content: space-between;
  }

  .program-calendar-header h3 {
    min-width: 0;
  }

  .program-detail-price,
  .program-price-callout,
  .program-availability-card,
  .program-enrollment-price,
  .program-date-status,
  .prompt-availability {
    justify-items: start;
    text-align: left;
  }

  .available-session-table-head {
    display: none;
  }

  .date-select-label {
    width: 100%;
  }

  .program-session-actions {
    justify-content: stretch;
  }

  .program-session-actions .parent-action-button {
    flex: 1 1 100%;
  }

  .player-profile-header,
  .package-summary-card,
  .clean-reservation-row,
  .family-player-row {
    grid-template-columns: 1fr;
  }

  .player-profile-header,
  .family-player-row {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-status-stack,
  .reservation-side,
  .family-player-status {
    align-items: stretch;
    justify-items: stretch;
    text-align: left;
  }

  .player-remove-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .player-remove-panel .parent-action-button {
    width: 100%;
  }

  .player-meta-grid {
    grid-template-columns: 1fr;
  }

  .reservation-credit {
    text-align: left;
  }

  .package-credit-lockup {
    justify-content: flex-start;
  }

  .booking-actions,
  .reservation-actions {
    justify-content: stretch;
  }

  .reservation-page-card .clean-reservation-row {
    gap: 12px;
    justify-items: center;
    padding: 18px 14px;
    text-align: center;
  }

  .reservation-page-card .reservation-main,
  .reservation-page-card .reservation-side {
    align-items: center;
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .reservation-page-card .reservation-main {
    gap: 5px;
  }

  .reservation-page-card .reservation-main h3,
  .reservation-page-card .reservation-main p,
  .reservation-page-card .reservation-credit {
    text-align: center;
  }

  .reservation-page-card .confirmation-line {
    justify-content: center;
  }

  .reservation-page-card .reservation-side {
    gap: 6px;
  }

  .reservation-page-card .reservation-side .status-pill {
    justify-content: center;
    width: auto;
  }

  .reservation-page-card .reservation-actions {
    gap: 6px;
    max-width: 100%;
    width: 100%;
  }

  .reservation-page-card .reservation-actions .calendar-menu summary,
  .reservation-page-card .reservation-actions .parent-action-button {
    min-height: 36px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .reservation-page-card .reservation-actions .reservation-cancel-button {
    min-height: 34px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .overview-section-heading,
  .overview-schedule-row {
    align-items: stretch;
    flex-direction: column;
  }

  .notification-center-header,
  .notification-title-row,
  .notification-history-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-header-actions,
  .notification-history-filters {
    justify-content: stretch;
    width: 100%;
  }

  .notification-header-actions .notification-read-button,
  .notification-history-filters button {
    flex: 1 1 auto;
  }

  .notification-summary-header {
    align-items: stretch;
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .notification-summary-title {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
    width: 100%;
  }

  .notification-summary-title h2,
  .notification-summary-title .muted {
    text-align: left;
  }

  .notification-summary-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .notification-summary-actions .notification-read-button {
    align-items: center;
    display: flex;
    flex: none;
    font-size: 12px;
    justify-content: center;
    min-height: 46px;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    width: 100%;
  }

  .notification-summary-icon {
    height: 36px;
    width: 36px;
  }

  .notification-summary-center {
    gap: 12px;
    padding: 14px;
  }

  .notification-summary-preview {
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
  }

  .notification-caught-up {
    align-items: flex-start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-history-link {
    grid-column: 1 / -1;
    padding-left: 46px;
    white-space: normal;
  }

  .notification-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-item .notification-read-button,
  .notification-read-state {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .overview-card-actions {
    grid-template-columns: 1fr;
  }

  .parent-action-button {
    flex: 1;
    min-width: 100%;
  }

  .parent-tabs button {
    border-radius: 8px;
    flex: 1 1 auto;
  }

  .parent-tabs button:first-child,
  .parent-tabs button:last-child {
    border-radius: 8px;
  }

  .prompt-actions .parent-action-button {
    min-width: 100%;
  }

  .training-pass-date-row {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .training-pass-date-main,
  .training-pass-date-status {
    grid-column: 1 / -1;
  }

  h1 {
    font-size: 30px;
  }
}

@media (max-width: 760px) {
  .account-document-details summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-document-details summary small {
    text-align: left;
  }

  .dropin-training-strip {
    align-items: start;
    gap: 12px;
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 0;
    padding: 14px;
  }

  .dropin-strip-icon {
    height: 44px;
    width: 44px;
  }

  .dropin-strip-copy {
    align-self: center;
    gap: 3px;
    min-width: 0;
  }

  .dropin-strip-title-row {
    gap: 8px;
  }

  .dropin-strip-copy h3 {
    font-size: 15px;
    line-height: 1.1;
  }

  .dropin-strip-copy p,
  .dropin-strip-facts span {
    font-size: 11.5px;
    line-height: 1.35;
  }

  .dropin-strip-facts {
    display: grid;
    gap: 7px;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .dropin-strip-facts span {
    gap: 6px;
    min-width: 0;
  }

  .dropin-strip-button {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin-top: 0;
    min-height: 42px;
    padding: 10px 12px;
    width: 100%;
  }

  .dropin-marketplace {
    gap: 11px;
  }

  .dropin-market-header {
    gap: 8px;
  }

  .dropin-market-header h2 {
    margin-bottom: 4px;
  }

  .dropin-filter-toolbar {
    align-items: stretch;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .dropin-filter-card {
    border-radius: 10px;
    gap: 3px;
    min-height: 46px;
    padding: 7px 10px;
  }

  .dropin-filter-card span {
    font-size: 8.5px;
    line-height: 1;
  }

  .dropin-filter-select {
    font-size: 13px;
    line-height: 1.1;
    min-height: 18px;
  }

  .dropin-clear-button {
    align-self: start;
    background: transparent;
    border-color: rgba(19, 217, 133, 0.38);
    border-radius: 999px;
    box-shadow: none;
    color: #71f7b0;
    font-size: 11px;
    justify-self: start;
    min-height: 30px;
    padding: 6px 11px;
    width: auto;
  }
}

@container (max-width: 460px) {
  .booking-option,
  .booking-option-confirmed {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .booking-actions,
  .booking-state {
    justify-content: stretch;
  }

  .booking-state .status-pill {
    justify-content: center;
    width: 100%;
  }
}

/* Premium parent portal dark refinement */
:root {
  color-scheme: dark;
  --bg: #070808;
  --panel: rgba(12, 15, 14, 0.94);
  --section: rgba(9, 12, 11, 0.94);
  --panel-tint: rgba(16, 21, 19, 0.95);
  --ink: #f7faf8;
  --muted: #bec7c1;
  --line: rgba(216, 255, 235, 0.18);
  --line-soft: rgba(216, 255, 235, 0.12);
  --line-strong: rgba(216, 255, 235, 0.32);
  --brand-gold-glow: rgba(255, 153, 0, 0.06);
  --brand-emerald-glow: rgba(0, 255, 140, 0.05);
  --brand-dark: #070807;
  --green: #10b86f;
  --green-dark: #13d985;
  --mint: rgba(18, 184, 111, 0.14);
  --program-orange-soft: rgba(240, 82, 27, 0.13);
  --gold-soft: rgba(246, 190, 74, 0.14);
  --purple-soft: rgba(128, 92, 255, 0.16);
  --blue-soft: rgba(54, 153, 235, 0.16);
  --red-soft: rgba(255, 95, 76, 0.14);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.24);
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(16, 184, 111, 0.18), transparent 34%),
    radial-gradient(circle at 86% 5%, rgba(16, 184, 111, 0.1), transparent 26%),
    linear-gradient(180deg, #080908 0%, #050605 100%);
}

.portal-view {
  color: var(--ink);
}

.portal-chrome {
  background:
    radial-gradient(ellipse 128% 104% at 10% 50%, rgba(255, 153, 0, 0.058) 0%, rgba(255, 153, 0, 0.036) 28%, rgba(255, 153, 0, 0.014) 54%, transparent 78%),
    radial-gradient(ellipse 92% 84% at 84% 50%, var(--brand-emerald-glow) 0%, rgba(0, 255, 140, 0.028) 36%, transparent 72%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.014), rgba(0, 0, 0, 0.14)),
    linear-gradient(180deg, #050505 0%, #060706 100%);
  border: 2px solid rgba(216, 255, 235, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -64px 110px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 255, 170, 0.12),
    inset 0 0 88px rgba(255, 153, 0, 0.024),
    0 0 14px rgba(0, 255, 140, 0.09),
    0 28px 78px rgba(0, 0, 0, 0.5);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.portal-chrome::before,
.portal-chrome::after {
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.portal-chrome::before {
  background:
    radial-gradient(ellipse 74% 82% at 24% 38%, rgba(255, 153, 0, 0.032), transparent 68%),
    linear-gradient(90deg, rgba(255, 153, 0, 0.018), transparent 44%, rgba(0, 255, 140, 0.014));
  opacity: 0.95;
}

.portal-chrome::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%, rgba(0, 0, 0, 0.12) 100%);
  inset: 1px;
}

.portal-header,
.parent-tabs {
  position: relative;
  z-index: 1;
}

.brand-logo-badge {
  filter:
    drop-shadow(0 0 10px rgba(255, 153, 0, 0.12))
    drop-shadow(0 0 18px rgba(0, 255, 170, 0.08));
}

.login-brand p,
.portal-header p {
  color: var(--green-dark);
  letter-spacing: 0.03em;
}

.portal-header h1 {
  font-size: clamp(32px, 3.1vw, 34px);
  line-height: 1.02;
  margin-bottom: 0;
}

.portal-tagline {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.35;
  margin-top: 5px;
}

.portal-actions a,
.portal-actions button,
.parent-tabs button,
.notification-read-button,
.notification-history-filters,
.notification-history-filters button,
.date-box,
.calendar-menu summary,
input,
select,
textarea {
  background: rgba(9, 12, 11, 0.88);
  border-color: rgba(216, 255, 235, 0.18);
  color: var(--ink);
}

.parent-tabs button {
  background: rgba(8, 11, 10, 0.62);
  border-color: rgba(216, 255, 235, 0.12);
  color: rgba(247, 250, 248, 0.72);
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.portal-actions a:hover,
.portal-actions button:hover,
.parent-tabs button:hover,
.notification-read-button:hover,
.parent-action-button.secondary:hover,
.overview-program-card:hover,
.program-offer-card:hover,
.catalog-program-card:hover,
.session-card:hover,
.player-card:hover {
  border-color: rgba(19, 217, 133, 0.52);
}

.parent-tabs button:not(.active):hover {
  background: rgba(13, 18, 16, 0.78);
  color: rgba(255, 255, 255, 0.9);
}

.parent-tabs button.active {
  background: rgba(16, 184, 111, 0.16);
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 -2px 0 rgba(19, 217, 133, 0.82),
    inset 0 0 8px rgba(255, 153, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

.portal-actions #sign-out,
.parent-action-button.action-primary,
.login-panel button {
  background: linear-gradient(180deg, #12a867, #087a4b);
  border-color: rgba(19, 217, 133, 0.5);
  box-shadow: 0 12px 24px rgba(7, 122, 75, 0.22);
  color: #ffffff;
}

.portal-card,
.available-directory-panel,
.available-detail-panel,
.catalog-category-section,
.program-offer-card,
.program-overview-offer,
.program-detail-header,
.program-package-card,
.program-calendar-card,
.program-session-row,
.full-program-purchase-card,
.competition-parent-detail,
.competition-card,
.performance-service-card,
.performance-wizard-panel,
.reservation-row,
.session-card,
.player-card,
.clean-reservation-row,
.package-summary-card,
.family-player-row,
.notification-history-panel {
  background:
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
  border-color: var(--line);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.12),
    0 0 24px rgba(0, 255, 170, 0.03),
    var(--shadow-soft);
}

.program-detail-header,
.program-enrollment-card {
  background:
    radial-gradient(ellipse 80% 90% at 18% 0%, color-mix(in srgb, var(--program-color, var(--green)) 9%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 80% at 96% 12%, color-mix(in srgb, var(--program-color, var(--green)) 5%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(14, 18, 17, 0.96), rgba(8, 11, 10, 0.94));
}

.full-program-purchase-card {
  border-color: rgba(238, 242, 236, 0.38);
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 22px rgba(255, 255, 255, 0.035),
    0 0 24px rgba(0, 255, 170, 0.03),
    var(--shadow-soft);
}

.notification-center,
.account-status-card,
.overview-program-section,
.compact-overview-section,
.portal-content > .portal-card,
.summary-grid .portal-card {
  border-width: 2px;
  border-color: var(--line-strong);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.13),
    0 0 24px rgba(0, 255, 170, 0.035),
    var(--shadow-soft);
}

.notification-center,
.account-status-card,
.overview-program-section,
.compact-overview-section {
  overflow: hidden;
  position: relative;
}

.portal-content > .portal-card {
  position: relative;
}

.notification-center::before,
.account-status-card::before,
.overview-program-section::before,
.compact-overview-section::before,
.portal-content > .portal-card::before {
  background:
    radial-gradient(ellipse 70% 44% at 8% 0%, rgba(255, 153, 0, 0.024), transparent 64%),
    radial-gradient(ellipse 70% 48% at 92% 0%, rgba(0, 255, 140, 0.026), transparent 68%),
    linear-gradient(90deg, rgba(19, 217, 133, 0.08), transparent 35%, rgba(255, 153, 0, 0.035), transparent 78%);
  content: "";
  inset: 0;
  opacity: 0.84;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.notification-center > *,
.account-status-card > *,
.overview-program-section > *,
.compact-overview-section > *,
.portal-content > .portal-card > * {
  position: relative;
  z-index: 1;
}

.notification-item,
.notification-caught-up,
.program-option,
.training-pass-date-row,
.booking-option,
.booking-option-confirmed,
.prompt-choice,
.competition-registration-record,
.parent-standings-table-wrap,
.available-directory-row,
.dropin-directory-row,
.overview-program-card,
.catalog-program-card {
  background: rgba(11, 16, 14, 0.9);
  border-color: rgba(216, 255, 235, 0.13);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.07);
}

.training-pass-modal .training-pass-date-box {
  background: rgba(3, 8, 6, 0.92);
  border-color: rgba(19, 217, 133, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(19, 217, 133, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.24);
  color: var(--brand-green);
}

.training-pass-modal .training-pass-date-box span {
  color: rgba(247, 250, 248, 0.72);
}

.overview-program-card,
.program-offer-card,
.catalog-program-card,
.session-card,
.player-card,
.program-package-card,
.competition-card,
.performance-service-card,
.reservation-row,
.clean-reservation-row,
.notification-item {
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.overview-program-card:hover,
.program-offer-card:hover,
.catalog-program-card:hover,
.session-card:hover,
.player-card:hover,
.program-package-card:hover,
.competition-card:hover,
.performance-service-card:hover {
  border-color: rgba(19, 217, 133, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.15),
    0 0 28px rgba(0, 255, 170, 0.04),
    0 18px 34px rgba(0, 0, 0, 0.32);
  transform: translateY(-3px);
}

.reservation-row:hover,
.clean-reservation-row:hover,
.notification-item:hover {
  border-color: rgba(19, 217, 133, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.1),
    0 14px 26px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.notification-item.unread {
  background:
    linear-gradient(90deg, rgba(16, 184, 111, 0.14), rgba(11, 16, 14, 0.92));
  border-color: rgba(19, 217, 133, 0.32);
}

.notification-item {
  gap: 12px;
  padding: 15px 16px;
}

.notification-copy {
  gap: 7px;
}

.notification-title-row {
  gap: 14px;
}

.notification-title-row strong {
  font-size: 15px;
  letter-spacing: -0.005em;
}

.notification-title-row span {
  color: #49f7a0;
  opacity: 0.86;
}

.notification-copy p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
  line-height: 1.5;
}

.notification-meta {
  color: rgba(190, 199, 193, 0.74);
  gap: 5px 14px;
}

.notification-type-dot {
  background: var(--green);
  box-shadow:
    0 0 0 5px rgba(16, 184, 111, 0.14),
    0 0 18px rgba(16, 184, 111, 0.28);
}

.notification-summary-center {
  gap: 10px;
}

.notification-summary-center.collapsed {
  gap: 9px;
}

.notification-summary-header {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.notification-summary-title {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.notification-summary-icon {
  align-items: center;
  background: rgba(16, 184, 111, 0.12);
  border: 1.5px solid rgba(19, 217, 133, 0.26);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 18px rgba(19, 217, 133, 0.08);
  color: #49f7a0;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.notification-summary-icon svg {
  display: block;
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 21px;
}

.notification-summary-header h2 {
  margin: 0 0 3px;
}

.notification-summary-actions {
  justify-content: flex-end;
}

.notification-summary-preview {
  border-top: 1px solid rgba(216, 255, 235, 0.12);
  display: grid;
  gap: 7px;
  padding-top: 9px;
}

.notification-summary-label {
  color: rgba(220, 229, 224, 0.74);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.notification-preview-item {
  gap: 9px;
  padding: 9px 11px;
}

.notification-preview-item .notification-copy {
  gap: 3px;
}

.notification-preview-item .notification-title-row span {
  display: none;
}

.notification-preview-item .notification-copy p {
  display: -webkit-box;
  font-size: 13.5px;
  line-height: 1.38;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.notification-summary-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.notification-expand-button {
  justify-self: stretch;
  text-align: center;
  width: 100%;
}

.notification-action-label-mobile {
  display: none;
}

@media (max-width: 900px) {
  .package-unified-section {
    padding: 18px 16px;
  }

  .available-unified-header {
    gap: 14px;
    padding: 18px 16px 14px;
  }

  .performance-unified-header {
    gap: 14px;
    padding: 18px 16px 14px;
  }

  .available-unified-body {
    gap: 18px;
    padding: 18px 16px 18px;
  }

  .performance-unified-body {
    gap: 18px;
    padding: 18px 16px 18px;
  }

  .available-filter {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    width: 100%;
  }

  .available-filter button {
    align-items: center;
    background:
      linear-gradient(180deg, rgba(7, 13, 10, 0.94), rgba(2, 8, 6, 0.94)),
      rgba(3, 8, 6, 0.92);
    border: 1.5px solid rgba(201, 151, 66, 0.72);
    border-radius: 12px;
    color: #ffffff;
    display: flex;
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 950;
    justify-content: center;
    letter-spacing: 0.035em;
    min-height: 52px;
    min-width: 0;
    padding: 9px 5px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .available-filter button:not(.active) {
    color: rgba(247, 250, 248, 0.86);
  }

  .available-filter button.active {
    background:
      linear-gradient(180deg, rgba(10, 31, 22, 0.94), rgba(3, 10, 7, 0.96)),
      rgba(3, 8, 6, 0.94);
    border-color: rgba(74, 255, 169, 0.78);
    box-shadow:
      inset 0 0 0 1px rgba(19, 217, 133, 0.1),
      inset 0 -2px 0 rgba(19, 217, 133, 0.72),
      0 0 24px rgba(19, 217, 133, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.22);
    color: rgba(91, 255, 177, 0.96);
  }

  .available-filter button:hover,
  .available-filter button:focus-visible {
    border-color: rgba(231, 177, 75, 0.9);
    transform: translateY(-1px);
  }

  .available-filter button.active:hover,
  .available-filter button.active:focus-visible {
    border-color: rgba(91, 255, 177, 0.92);
    box-shadow:
      inset 0 0 0 1px rgba(19, 217, 133, 0.14),
      inset 0 -2px 0 rgba(19, 217, 133, 0.78),
      0 0 30px rgba(19, 217, 133, 0.22),
      0 14px 30px rgba(0, 0, 0, 0.24);
  }

  .available-filter [data-available-filter="all"] {
    order: 1;
  }

  .available-filter [data-available-filter="elite"] {
    order: 2;
  }

  .available-filter [data-available-filter="camps"] {
    order: 3;
  }

  .available-filter [data-available-filter="skills"] {
    order: 4;
  }

  .available-filter [data-available-filter="dropins"] {
    order: 5;
  }

  .available-filter [data-available-filter="competitions"] {
    order: 6;
  }

  .available-filter-label-desktop {
    display: none;
  }

  .available-filter-label-mobile {
    display: inline;
  }

  .notification-summary-center {
    gap: 10px;
    padding: 12px;
  }

  .notification-summary-header {
    align-items: stretch;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .notification-summary-title {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
    width: 100%;
  }

  .notification-summary-title h2,
  .notification-summary-title .muted {
    text-align: left;
  }

  .notification-summary-icon {
    height: 36px;
    width: 36px;
  }

  .notification-summary-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    justify-content: stretch;
    width: 100%;
  }

  .notification-summary-actions .notification-read-button {
    align-items: center;
    display: flex;
    flex: none;
    font-size: 12px;
    justify-content: center;
    min-height: 46px;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    width: 100%;
  }

  .notification-summary-actions .notification-history-summary-button {
    display: none;
  }

  .notification-action-label-desktop {
    display: none;
  }

  .notification-action-label-mobile {
    display: inline;
  }

  .notification-summary-preview {
    gap: 7px;
    margin-top: 0;
    padding-top: 9px;
  }

  .family-dashboard-heading {
    gap: 8px;
    margin-top: -6px;
  }

  .family-dashboard-heading h2,
  .overview-dashboard-section-heading h2,
  .notification-summary-title h2 {
    font-size: 25px;
  }

  .family-dashboard-heading p {
    font-size: 15.5px;
  }

  .overview-dashboard-section-heading {
    align-items: flex-start;
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
  }

  .overview-reservations-section {
    gap: 10px;
  }

  .overview-reservations-section .overview-dashboard-section-heading {
    align-items: center;
    gap: 4px;
    justify-items: center;
    margin-bottom: 2px;
    text-align: center;
  }

  .overview-reservations-section .overview-dashboard-section-heading > div {
    display: grid;
    justify-items: center;
  }

  .overview-reservations-section .section-link-button {
    background: rgba(3, 8, 6, 0.72);
    border: 1.5px solid rgba(19, 217, 133, 0.52);
    border-radius: 999px;
    box-shadow:
      inset 0 0 0 1px rgba(19, 217, 133, 0.08),
      0 10px 20px rgba(0, 0, 0, 0.18);
    color: var(--brand-green);
    font-size: 12.5px;
    min-height: 38px;
    justify-self: center;
    padding: 8px 18px;
  }

  .overview-reservations-section .overview-reservations-cta-desktop {
    display: none;
  }

  .overview-reservations-section .overview-reservations-cta-mobile-bottom {
    display: inline-flex;
    margin-top: 4px;
  }

  .overview-reservations-section .overview-reservations-cta-label-desktop {
    display: none;
  }

  .overview-reservations-section .overview-reservations-cta-label-mobile {
    display: inline;
  }

  .overview-reservations-section .reservation-list {
    gap: 10px;
  }

  .overview-reservations-section .clean-reservation-row {
    gap: 12px;
    justify-items: center;
    padding: 18px 14px;
    text-align: center;
  }

  .overview-reservations-section .reservation-main,
  .overview-reservations-section .reservation-side {
    align-items: center;
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .overview-reservations-section .reservation-main {
    gap: 5px;
  }

  .overview-reservations-section .reservation-main h3,
  .overview-reservations-section .reservation-main p,
  .overview-reservations-section .reservation-credit {
    text-align: center;
  }

  .overview-reservations-section .confirmation-line {
    justify-content: center;
  }

  .overview-reservations-section .reservation-side {
    gap: 6px;
  }

  .overview-reservations-section .reservation-side .status-pill {
    justify-content: center;
    width: auto;
  }

  .overview-reservations-section .reservation-actions {
    gap: 6px;
    max-width: 100%;
    width: 100%;
  }

  .overview-reservations-section .reservation-actions .calendar-menu summary,
  .overview-reservations-section .reservation-actions .parent-action-button {
    min-height: 36px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .overview-reservations-section .reservation-actions .reservation-cancel-button {
    min-height: 34px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .family-player-card-grid {
    grid-template-columns: 1fr;
  }

  .family-player-card {
    border-radius: 10px;
    gap: 12px;
    padding: 14px;
  }

  .family-player-card::before {
    left: 14px;
    right: 48%;
  }

  .family-player-card .player-avatar {
    height: 62px;
    width: 62px;
  }

  .family-player-card-title h3 {
    font-size: 20px;
  }

  .family-player-attribute-line {
    font-size: 13.5px;
  }

  .family-player-status-list {
    gap: 7px;
  }

  .family-player-status-pill {
    flex: 1 1 auto;
    justify-content: center;
    min-width: min(100%, 150px);
  }

  .family-player-card:has(.family-player-empty-programs) .family-player-status-pill {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-width: 0;
  }
}

.muted,
.demo-note,
.notification-title-row span,
.notification-meta,
.notification-read-state,
.balance-hero span,
.catalog-category-header p,
.overview-program-description,
.program-card-description,
.program-card-meta span,
.overview-meta-line,
.reservation-row small,
.reservation-credit,
.booking-note,
.empty-state {
  color: var(--muted);
}

.portal-card h2,
.portal-card h3,
.notification-title-row strong,
.overview-program-card h3,
.program-card-title h3,
.program-card-meta strong,
.reservation-row strong,
.date-box strong {
  color: var(--ink);
}

.available-unified-section .available-page-heading h2,
.package-unified-section h2,
.performance-unified-section .performance-page-heading h2 {
  color: #ffffff;
}

.account-status-item,
.session-count-badge,
.status-pill,
.overview-chip-row span,
.chip,
.session-type-badge {
  background: linear-gradient(180deg, rgba(18, 184, 111, 0.18), rgba(18, 184, 111, 0.1));
  border: 1px solid rgba(19, 217, 133, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.14);
  color: #7dffbd;
}

.status-waitlisted,
.status-due {
  background: linear-gradient(180deg, rgba(128, 92, 255, 0.24), rgba(128, 92, 255, 0.14));
  border-color: rgba(167, 139, 250, 0.24);
  color: #c7b9ff;
}

.status-pending,
.status-pending_payment,
.status-pending_review,
.status-contacted,
.status-required_before_participation {
  background: linear-gradient(180deg, rgba(54, 153, 235, 0.22), rgba(54, 153, 235, 0.13));
  border-color: rgba(125, 190, 255, 0.22);
  color: #a9d8ff;
}

.parent-action-button.secondary,
.overview-program-card .parent-action-button.secondary,
.parent-action-button.action-single,
.notification-read-button,
.notification-history-link,
.calendar-menu summary {
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(19, 217, 133, 0.105), transparent 62%),
    linear-gradient(180deg, rgba(17, 23, 21, 0.9), rgba(7, 10, 9, 0.9));
  border: 1.5px solid rgba(19, 217, 133, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(19, 217, 133, 0.035);
  color: #7dffbd;
  text-decoration: none;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.parent-action-button.secondary span,
.parent-action-button.action-single span {
  color: rgba(216, 255, 235, 0.86);
}

.parent-action-button.secondary:hover,
.overview-program-card .parent-action-button.secondary:hover,
.parent-action-button.action-single:hover,
.notification-read-button:hover,
.notification-history-link:hover,
.calendar-menu summary:hover,
.calendar-menu[open] summary {
  background:
    radial-gradient(ellipse 90% 125% at 50% 0%, rgba(19, 217, 133, 0.17), transparent 66%),
    linear-gradient(180deg, rgba(19, 28, 24, 0.96), rgba(8, 12, 10, 0.96));
  border-color: rgba(19, 217, 133, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(19, 217, 133, 0.09);
  color: #ffffff;
  transform: translateY(-1px);
}

.parent-action-button.secondary:focus-visible,
.parent-action-button.action-single:focus-visible,
.notification-read-button:focus-visible,
.notification-history-link:focus-visible,
.calendar-menu summary:focus-visible {
  border-color: rgba(19, 217, 133, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 0 0 3px rgba(19, 217, 133, 0.16),
    0 0 22px rgba(19, 217, 133, 0.1);
  outline: 0;
}

.parent-action-button.action-package {
  border-color: rgba(240, 82, 27, 0.38);
  box-shadow: 0 10px 20px rgba(240, 82, 27, 0.1);
}

.parent-action-button.action-waitlist {
  border-color: rgba(128, 92, 255, 0.42);
  box-shadow: 0 10px 20px rgba(128, 92, 255, 0.12);
}

.section-link-button,
.catalog-view-all,
.notification-history-link,
.parent-link-button {
  color: #49f7a0;
}

.empty-state {
  background:
    radial-gradient(ellipse 80% 140% at 50% 0%, rgba(19, 217, 133, 0.055), transparent 62%),
    linear-gradient(180deg, rgba(11, 16, 14, 0.88), rgba(8, 11, 10, 0.82));
  border-color: rgba(216, 255, 235, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.055);
  color: rgba(220, 229, 224, 0.8);
}

.calendar-menu-options,
.performance-service-option,
.performance-wizard-progress span,
.player-meta-grid div {
  background: rgba(9, 12, 11, 0.92);
  border-color: rgba(216, 255, 235, 0.16);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.07);
  color: var(--ink);
}

.performance-service-option.active,
.performance-wizard-progress .active,
.performance-wizard-progress .complete {
  background: rgba(18, 184, 111, 0.15);
  border-color: rgba(19, 217, 133, 0.36);
  color: #ffffff;
}

.performance-wizard-progress strong,
.performance-service-option-top strong,
.player-meta-grid strong,
.calendar-menu-options button {
  color: var(--ink);
}

.performance-wizard-progress strong {
  background: rgba(9, 12, 11, 0.9);
  border-color: rgba(216, 255, 235, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.06);
}

.performance-wizard-progress .active strong,
.performance-wizard-progress .complete strong {
  background: rgba(19, 217, 133, 0.22);
  border-color: rgba(19, 217, 133, 0.42);
  color: #89ffc5;
}

.performance-wizard-progress em,
.performance-service-option-top small,
.player-meta-grid span {
  color: var(--muted);
}

.calendar-menu-options button:hover {
  background: rgba(18, 184, 111, 0.13);
  color: #7dffbd;
}

.performance-wizard-step,
.performance-example-box,
.performance-segment-row,
.performance-acknowledgement-list label,
.performance-review-grid > div,
.performance-included-review {
  background:
    radial-gradient(ellipse 78% 130% at 14% 0%, rgba(19, 217, 133, 0.055), transparent 62%),
    linear-gradient(180deg, rgba(12, 17, 15, 0.94), rgba(7, 10, 9, 0.9));
  border-color: rgba(216, 255, 235, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.06);
  color: var(--ink);
}

.performance-example-box {
  color: rgba(220, 229, 224, 0.86);
}

.performance-example-box span {
  background: rgba(19, 217, 133, 0.13);
  border: 1px solid rgba(19, 217, 133, 0.28);
  color: #9dffd0;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.05);
}

.performance-field-label,
.performance-segment-row small,
.performance-review-grid span {
  color: rgba(220, 229, 224, 0.72);
}

.performance-wizard input,
.performance-wizard select,
.performance-wizard textarea,
.performance-timestamp-input {
  background: rgba(6, 10, 8, 0.92);
  border-color: rgba(216, 255, 235, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.055);
  color: var(--ink);
}

.performance-wizard input::placeholder,
.performance-wizard textarea::placeholder {
  color: rgba(190, 199, 193, 0.56);
}

.performance-wizard input:focus,
.performance-wizard select:focus,
.performance-wizard textarea:focus {
  border-color: rgba(19, 217, 133, 0.5);
  box-shadow:
    0 0 0 3px rgba(19, 217, 133, 0.12),
    inset 0 0 0 1px rgba(0, 255, 170, 0.08);
  outline: none;
}

.performance-wizard select,
.performance-wizard input[type="date"],
.performance-wizard input[type="time"] {
  color-scheme: dark;
}

.performance-wizard input[type="date"]::-webkit-calendar-picker-indicator,
.performance-wizard input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter:
    brightness(0)
    invert(1)
    sepia(1)
    saturate(1.4)
    hue-rotate(82deg)
    opacity(0.92)
    drop-shadow(0 0 3px rgba(19, 217, 133, 0.42));
}

.performance-wizard input[name="matchDate"][type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237dffbd'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%203v3M17%203v3M4%209h16M6%205h12a2%202%200%200%201%202%202v11a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V7a2%202%200%200%201%202-2Z'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  padding-right: 48px;
}

.performance-wizard input[name="matchDate"][type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 42px;
}

.performance-review-grid strong {
  color: var(--ink);
}

.performance-included-review span {
  color: #86ffc4;
}

.performance-segment-row .parent-action-button[data-parent-action="performance-remove-segment"] {
  background:
    linear-gradient(180deg, rgba(30, 16, 13, 0.9), rgba(12, 8, 7, 0.88));
  border-color: rgba(255, 120, 96, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 120, 96, 0.08);
  color: #ffb4a8;
}

.performance-segment-row .parent-action-button[data-parent-action="performance-remove-segment"]:hover,
.performance-segment-row .parent-action-button[data-parent-action="performance-remove-segment"]:focus-visible {
  border-color: rgba(255, 120, 96, 0.58);
  box-shadow:
    0 0 18px rgba(255, 120, 96, 0.11),
    inset 0 0 0 1px rgba(255, 120, 96, 0.12);
  color: #ffd0c8;
}

.program-calendar-panel {
  background:
    radial-gradient(ellipse 82% 120% at 12% 0%, rgba(255, 153, 0, 0.035), transparent 62%),
    radial-gradient(ellipse 76% 90% at 86% 0%, rgba(0, 255, 140, 0.048), transparent 68%),
    linear-gradient(180deg, rgba(13, 17, 16, 0.96), rgba(7, 10, 9, 0.94));
  border: 2px solid rgba(216, 255, 235, 0.2);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.24);
  gap: 16px;
  padding: 16px;
}

.program-calendar-header {
  align-items: center;
  gap: 14px;
}

.calendar-month-controls {
  gap: 10px;
}

.calendar-month-title {
  display: grid;
  gap: 3px;
  min-width: 168px;
  text-align: center;
}

.program-calendar-header h3,
.calendar-month-title h3 {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  min-width: 0;
}

.calendar-month-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-nav-button,
.calendar-today-button {
  background:
    linear-gradient(180deg, rgba(17, 23, 21, 0.96), rgba(8, 12, 10, 0.96));
  border-color: rgba(216, 255, 235, 0.2);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.06),
    0 10px 18px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.calendar-nav-button {
  font-size: 24px;
  height: 40px;
  width: 40px;
}

.calendar-today-button {
  color: #ffd09a;
  font-size: 12px;
  min-height: 38px;
  padding: 0 16px;
}

.calendar-nav-button:hover,
.calendar-today-button:hover {
  border-color: rgba(255, 153, 0, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 0, 0.12),
    0 12px 22px rgba(0, 0, 0, 0.24);
  color: #ffffff;
  transform: translateY(-1px);
}

.calendar-legend {
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 999px;
  color: rgba(236, 243, 239, 0.78);
  gap: 12px;
  padding: 8px 10px;
}

.legend-dot {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
  height: 9px;
  width: 9px;
}

.legend-dot.available {
  background: #13d985;
  box-shadow: 0 0 12px rgba(19, 217, 133, 0.28);
}

.legend-dot.selected {
  background: var(--brand-orange);
  border: 0;
  box-shadow: 0 0 12px rgba(240, 82, 27, 0.34);
}

.legend-dot.booked {
  background: #f5b44b;
  border: 0;
  box-shadow: 0 0 12px rgba(245, 180, 75, 0.24);
}

.legend-dot.unavailable {
  background: rgba(173, 181, 176, 0.54);
}

.program-calendar-grid {
  gap: 8px;
}

.calendar-weekday {
  color: rgba(190, 199, 193, 0.7);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 0 2px 2px;
}

.calendar-cell {
  align-items: start;
  background:
    linear-gradient(180deg, rgba(14, 19, 17, 0.9), rgba(8, 12, 10, 0.86));
  border: 1.5px solid rgba(216, 255, 235, 0.12);
  border-radius: 11px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  justify-items: start;
  min-height: 112px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-align: left;
}

button.calendar-cell {
  background:
    linear-gradient(180deg, rgba(14, 19, 17, 0.92), rgba(8, 12, 10, 0.9));
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease,
    background 220ms ease;
}

button.calendar-cell:hover {
  border-color: rgba(19, 217, 133, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

button.calendar-cell.available::before {
  background: #13d985;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(19, 217, 133, 0.38);
  content: "";
  height: 7px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 7px;
}

button.calendar-cell.selected::before {
  background: var(--brand-orange);
  box-shadow: 0 0 14px rgba(240, 82, 27, 0.38);
}

button.calendar-cell.booked::before {
  content: none;
}

.calendar-cell .calendar-day-number,
.calendar-cell strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.calendar-empty-day .calendar-day-number,
.calendar-empty-day strong {
  color: rgba(236, 243, 239, 0.52);
}

.calendar-cell .calendar-session-title,
.calendar-cell .calendar-session-time,
.calendar-cell .calendar-status-badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-cell .calendar-session-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: none;
}

.competition-calendar-day .competition-calendar-title,
.competition-calendar-day .competition-calendar-day-label,
.competition-calendar-day .competition-calendar-game-count {
  max-width: calc(100% - 14px);
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-transform: uppercase;
}

.competition-calendar-day .competition-calendar-title {
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.competition-calendar-day .competition-calendar-day-label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.2;
}

.competition-calendar-day .competition-calendar-game-count {
  color: rgba(236, 243, 239, 0.74);
  font-size: 9.5px;
  font-weight: 950;
  line-height: 1.2;
}

.calendar-cell .calendar-session-time {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  text-transform: none;
}

.calendar-cell .calendar-status-badge {
  align-self: end;
  background: rgba(19, 217, 133, 0.14);
  border: 1px solid rgba(19, 217, 133, 0.22);
  border-radius: 999px;
  color: #7dffbd;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.04em;
  margin-top: 3px;
  padding: 4px 7px;
  text-transform: uppercase;
}

.calendar-session-count {
  display: none;
}

.calendar-status-badge.low {
  background: rgba(255, 153, 0, 0.12);
  border-color: rgba(255, 153, 0, 0.22);
  color: #ffd09a;
}

.calendar-status-badge.booked {
  background: rgba(245, 180, 75, 0.14);
  border-color: rgba(245, 180, 75, 0.24);
  color: #ffd27a;
}

.calendar-status-badge.full {
  background: rgba(190, 199, 193, 0.08);
  border-color: rgba(190, 199, 193, 0.14);
  color: rgba(220, 226, 223, 0.68);
}

.calendar-cell.available {
  border-color: rgba(19, 217, 133, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.07);
  color: var(--ink);
}

.calendar-cell.booked {
  background:
    radial-gradient(ellipse 92% 110% at 18% 0%, rgba(245, 180, 75, 0.12), transparent 64%),
    linear-gradient(180deg, rgba(16, 18, 14, 0.94), rgba(9, 12, 10, 0.9));
  border-color: rgba(245, 180, 75, 0.38);
}

.calendar-cell.selected {
  background:
    radial-gradient(ellipse 105% 105% at 18% 0%, rgba(240, 82, 27, 0.2), transparent 62%),
    linear-gradient(180deg, rgba(18, 14, 11, 0.98), rgba(9, 10, 9, 0.94));
  border-color: rgba(240, 82, 27, 0.84);
  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 0, 0.16),
    0 0 28px rgba(240, 82, 27, 0.14),
    0 18px 34px rgba(0, 0, 0, 0.34);
  color: #ffffff;
  transform: translateY(-2px);
}

button.calendar-cell.selected:hover {
  border-color: rgba(240, 82, 27, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 0, 0.2),
    0 0 34px rgba(240, 82, 27, 0.18),
    0 18px 34px rgba(0, 0, 0, 0.34);
}

.calendar-booked-mark {
  align-items: center;
  background: rgba(245, 180, 75, 0.16);
  border: 1px solid rgba(245, 180, 75, 0.28);
  border-radius: 999px;
  color: #ffd27a;
  display: inline-grid;
  font-size: 10px;
  height: 20px;
  line-height: 1;
  place-items: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 20px;
}

.calendar-cell.unavailable {
  background:
    linear-gradient(180deg, rgba(16, 18, 17, 0.62), rgba(9, 11, 10, 0.58));
  border-color: rgba(190, 199, 193, 0.12);
  color: rgba(220, 226, 223, 0.52);
  opacity: 0.68;
}

.calendar-cell.unavailable .calendar-session-title,
.calendar-cell.unavailable .calendar-session-time {
  color: rgba(220, 226, 223, 0.52);
}

.calendar-empty-day {
  background:
    linear-gradient(180deg, rgba(13, 16, 15, 0.62), rgba(8, 11, 10, 0.56));
  border-color: rgba(216, 255, 235, 0.08);
  min-height: 84px;
}

.calendar-empty {
  background: transparent;
  border-color: transparent;
  min-height: 84px;
}

.selected-day-summary {
  align-items: center;
  background:
    radial-gradient(ellipse 76% 120% at 8% 0%, rgba(255, 153, 0, 0.045), transparent 62%),
    linear-gradient(180deg, rgba(13, 17, 16, 0.96), rgba(8, 11, 10, 0.92));
  border: 1.5px solid rgba(216, 255, 235, 0.16);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.07);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(180px, auto);
  padding: 16px;
}

.selected-day-summary h2,
.selected-day-summary p {
  margin: 0;
}

.selected-day-kicker,
.selected-day-availability span {
  color: rgba(255, 208, 154, 0.88);
  display: block;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.selected-day-main {
  min-width: 0;
}

.selected-day-main h2 {
  overflow-wrap: anywhere;
}

.selected-day-availability {
  background: rgba(8, 12, 10, 0.64);
  border: 1px solid rgba(216, 255, 235, 0.13);
  border-radius: 10px;
  padding: 10px 12px;
}

.selected-day-availability strong {
  color: #7dffbd;
  display: block;
  font-size: 16px;
  line-height: 1.1;
}

.selected-day-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

[data-program-schedule] .schedule-filter-panel {
  background:
    radial-gradient(ellipse 80% 120% at 8% 0%, rgba(255, 153, 0, 0.04), transparent 62%),
    linear-gradient(180deg, rgba(13, 17, 16, 0.94), rgba(8, 11, 10, 0.9));
  border-color: rgba(216, 255, 235, 0.16);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.06);
  padding: 12px;
}

[data-competition-schedule] .schedule-filter-panel {
  background:
    radial-gradient(ellipse 80% 120% at 8% 0%, rgba(255, 153, 0, 0.04), transparent 62%),
    linear-gradient(180deg, rgba(13, 17, 16, 0.94), rgba(8, 11, 10, 0.9));
  border-color: rgba(216, 255, 235, 0.16);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.06);
  padding: 12px;
}

[data-program-schedule] .schedule-mode-controls {
  background: rgba(7, 10, 9, 0.86);
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.045);
  gap: 4px;
  overflow: visible;
  padding: 4px;
}

[data-competition-schedule] .schedule-mode-controls {
  background: rgba(7, 10, 9, 0.86);
  border: 1px solid rgba(216, 255, 235, 0.16);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.045);
  gap: 0;
  overflow: hidden;
}

[data-program-schedule] .schedule-mode-controls button {
  border-radius: 999px;
  color: rgba(236, 243, 239, 0.72);
  min-height: 42px;
  padding: 0 18px;
  transition:
    background 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}

[data-competition-schedule] .schedule-mode-controls button {
  color: rgba(236, 243, 239, 0.68);
  min-height: 42px;
  padding: 0 18px;
  transition:
    background 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}

[data-program-schedule] .schedule-mode-controls button.active {
  background:
    radial-gradient(ellipse 90% 110% at 15% 0%, rgba(255, 153, 0, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(18, 184, 111, 0.92), rgba(8, 122, 75, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 0, 0.12),
    0 10px 20px rgba(0, 0, 0, 0.22);
  color: #ffffff;
}

[data-competition-schedule] .schedule-mode-controls button.active {
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(19, 217, 133, 0.14), transparent 64%),
    linear-gradient(180deg, rgba(13, 18, 16, 0.92), rgba(6, 10, 8, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(19, 217, 133, 0.56),
    0 0 16px rgba(19, 217, 133, 0.08);
  color: #7dffbd;
}

[data-program-schedule] .schedule-range-controls {
  gap: 12px;
}

[data-competition-schedule] .schedule-range-controls {
  gap: 12px;
}

[data-program-schedule] .schedule-range-controls label {
  color: rgba(236, 243, 239, 0.68);
  gap: 6px;
}

[data-competition-schedule] .schedule-range-controls label {
  color: rgba(236, 243, 239, 0.68);
  gap: 6px;
}

[data-program-schedule] .schedule-range-controls input {
  background: #111111;
  border: 1px solid rgba(216, 255, 235, 0.16);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.16);
  color: #ffffff;
  color-scheme: dark;
  min-height: 42px;
  padding: 0 14px;
}

[data-competition-schedule] .schedule-range-controls input {
  background: #111111;
  border: 1px solid rgba(216, 255, 235, 0.16);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 255, 170, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.16);
  color: #ffffff;
  color-scheme: dark;
  min-height: 42px;
  padding: 0 14px;
}

[data-program-schedule] .schedule-range-controls input::placeholder {
  color: rgba(236, 243, 239, 0.48);
}

[data-competition-schedule] .schedule-range-controls input::placeholder {
  color: rgba(236, 243, 239, 0.48);
}

[data-program-schedule] .schedule-range-controls input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.72;
}

[data-competition-schedule] .schedule-range-controls input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.72;
}

[data-program-schedule] .program-session-row.selected {
  padding-left: 26px;
  position: relative;
}

[data-program-schedule] .program-session-row.selected::before {
  background: linear-gradient(180deg, rgba(255, 153, 0, 0.95), rgba(240, 82, 27, 0.9));
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(240, 82, 27, 0.18);
  content: "";
  inset: 12px auto 12px 10px;
  position: absolute;
  width: 3px;
}

[data-program-schedule] .selected-day-summary h2 {
  letter-spacing: -0.02em;
}

[data-program-schedule] .selected-day-count {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin-top: 7px;
}

.program-month-empty {
  background:
    linear-gradient(180deg, rgba(14, 18, 17, 0.94), rgba(8, 11, 10, 0.9));
  border-color: rgba(216, 255, 235, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 170, 0.06);
}

@media (max-width: 760px) {
  .program-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-weekday,
  .calendar-empty {
    display: none;
  }

  .calendar-cell,
  .calendar-empty-day {
    min-height: 104px;
  }

  .selected-day-summary {
    grid-template-columns: 1fr;
  }

  .selected-day-action {
    justify-content: stretch;
  }

  .selected-day-action .parent-action-button,
  .selected-day-action .date-select-label,
  .selected-day-action .not-eligible-label {
    flex: 1 1 100%;
  }
}

@media (max-width: 440px) {
  .program-calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-cell,
  .calendar-empty-day {
    min-height: 96px;
  }
}

@media (max-width: 760px) {
  [data-program-schedule] .program-calendar-panel {
    gap: 12px;
    padding: 12px;
  }

  [data-program-schedule] .program-calendar-header {
    align-items: stretch;
    display: grid;
    gap: 12px;
  }

  [data-program-schedule] .calendar-month-controls {
    display: grid;
    gap: 8px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    justify-content: stretch;
    width: 100%;
  }

  [data-program-schedule] .calendar-month-title {
    min-width: 0;
  }

  [data-program-schedule] .calendar-month-title h3 {
    font-size: 20px;
  }

  [data-program-schedule] .calendar-month-title span {
    font-size: 10px;
  }

  [data-program-schedule] .calendar-today-button {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 34px;
  }

  [data-program-schedule] .calendar-legend {
    border-radius: 999px;
    font-size: 10px;
    gap: 8px;
    justify-content: center;
    padding: 7px 8px;
    width: 100%;
  }

  [data-program-schedule] .program-calendar-grid {
    gap: 5px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  [data-program-schedule] .calendar-weekday {
    display: block;
    font-size: 9px;
    letter-spacing: 0;
    padding: 0 0 2px;
  }

  [data-program-schedule] .calendar-empty {
    display: grid;
  }

  [data-program-schedule] .calendar-cell,
  [data-program-schedule] .calendar-empty-day {
    align-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    gap: 2px;
    justify-items: center;
    min-height: 0;
    padding: 4px;
    text-align: center;
  }

  [data-program-schedule] .calendar-cell .calendar-day-number,
  [data-program-schedule] .calendar-cell strong {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  [data-program-schedule] .program-calendar-grid .calendar-session-title,
  [data-program-schedule] .program-calendar-grid .calendar-session-time,
  [data-program-schedule] .program-calendar-grid .calendar-status-badge,
  [data-program-schedule] .program-calendar-grid .calendar-booked-mark {
    display: none;
  }

  [data-program-schedule] .program-calendar-grid .calendar-session-count {
    align-items: center;
    background: rgba(19, 217, 133, 0.16);
    border: 1px solid rgba(19, 217, 133, 0.28);
    border-radius: 999px;
    color: #7dffbd;
    display: inline-grid;
    font-size: 8px;
    font-weight: 950;
    height: 15px;
    justify-content: center;
    line-height: 1;
    min-width: 15px;
    padding: 0 4px;
    position: absolute;
    right: 4px;
    top: 4px;
  }

  [data-program-schedule] button.calendar-cell.available::before,
  [data-program-schedule] button.calendar-cell.booked::before,
  [data-program-schedule] button.calendar-cell.unavailable::before,
  [data-program-schedule] button.calendar-cell.selected::before {
    border-radius: 999px;
    bottom: 5px;
    box-shadow: 0 0 10px currentColor;
    content: "";
    height: 5px;
    left: 50%;
    position: absolute;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    width: 5px;
  }

  [data-program-schedule] button.calendar-cell.available::before {
    background: #13d985;
    color: rgba(19, 217, 133, 0.5);
  }

  [data-program-schedule] button.calendar-cell.booked::before {
    background: #f5b44b;
    color: rgba(245, 180, 75, 0.5);
  }

  [data-program-schedule] button.calendar-cell.unavailable::before {
    background: rgba(173, 181, 176, 0.62);
    color: rgba(173, 181, 176, 0.35);
  }

  [data-program-schedule] .calendar-cell.selected,
  [data-program-schedule] button.calendar-cell:hover {
    transform: none;
  }

  [data-program-schedule] .selected-day-summary {
    gap: 10px;
    padding: 12px;
  }

  [data-program-schedule] .selected-day-main h2 {
    font-size: 20px;
  }

  [data-program-schedule] .selected-day-summary.selected-session-summary {
    display: none;
  }

  [data-program-schedule] .program-session-row {
    align-items: stretch;
    gap: 0;
    grid-template-areas:
      "session session session"
      "date date date"
      "location location location"
      "open waitlist price"
      "actions actions actions";
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px;
  }

  [data-program-schedule] .program-session-row.selected {
    padding: 14px;
  }

  [data-program-schedule] .program-session-row.selected::before {
    content: none;
  }

  [data-program-schedule] .program-session-time {
    display: grid;
    gap: 4px;
    grid-area: session;
    min-width: 0;
  }

  [data-program-schedule] .program-session-time .program-session-time-range {
    display: none;
  }

  [data-program-schedule] .program-session-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
  }

  [data-program-schedule] .program-session-date {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(216, 255, 235, 0.13);
    border-radius: 0;
    color: rgba(236, 243, 239, 0.78);
    display: grid;
    gap: 3px;
    grid-area: date;
    justify-items: start;
    margin-top: 7px;
    min-height: 0;
    padding: 0 0 10px;
    text-align: left;
  }

  [data-program-schedule] .program-session-date > strong,
  [data-program-schedule] .program-session-date > span:not(.program-session-date-mobile):not(.program-session-time-mobile) {
    display: none;
  }

  [data-program-schedule] .program-session-date-mobile,
  [data-program-schedule] .program-session-time-mobile {
    color: rgba(236, 243, 239, 0.76);
    display: block;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    text-transform: none;
  }

  [data-program-schedule] .program-session-time-mobile {
    color: rgba(236, 243, 239, 0.68);
  }

  [data-program-schedule] .program-session-location {
    border-bottom: 1px solid rgba(216, 255, 235, 0.13);
    display: grid;
    gap: 7px;
    grid-area: location;
    padding: 10px 0;
  }

  [data-program-schedule] .program-session-location-name,
  [data-program-schedule] .program-session-coach-name {
    color: rgba(247, 250, 248, 0.82);
    display: block;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
  }

  [data-program-schedule] .program-session-row > .program-session-count:nth-of-type(3) {
    grid-area: open;
  }

  [data-program-schedule] .program-session-row > .program-session-count:nth-of-type(4) {
    grid-area: waitlist;
  }

  [data-program-schedule] .program-session-price {
    grid-area: price;
  }

  [data-program-schedule] .program-session-count,
  [data-program-schedule] .program-session-price {
    align-items: center;
    background: rgba(7, 12, 10, 0.5);
    border-right: 1px solid rgba(216, 255, 235, 0.12);
    display: grid;
    justify-items: center;
    min-height: 48px;
    padding: 9px 5px;
    text-align: center;
  }

  [data-program-schedule] .program-session-price {
    border-right: 0;
  }

  [data-program-schedule] .program-session-count > strong,
  [data-program-schedule] .program-session-count > span:not(.program-session-mobile-metric),
  [data-program-schedule] .program-session-price > strong,
  [data-program-schedule] .program-session-price > span:not(.program-session-mobile-metric) {
    display: none;
  }

  [data-program-schedule] .program-session-mobile-metric {
    color: rgba(247, 250, 248, 0.9);
    display: block;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
  }

  [data-program-schedule] .program-session-row > .program-session-count:nth-of-type(3) .program-session-mobile-metric {
    color: #7dffbd;
  }

  [data-program-schedule] .program-session-row > .program-session-count:nth-of-type(4) .program-session-mobile-metric {
    color: #ffd27a;
  }

  [data-program-schedule] .program-session-actions {
    grid-area: actions;
    margin-top: 12px;
  }

  [data-program-schedule] .program-session-actions .parent-action-button,
  [data-program-schedule] .program-session-actions .status-pill,
  [data-program-schedule] .program-session-actions .not-eligible-label {
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  [data-program-schedule] .program-session-actions .status-pill {
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
  }

  [data-program-schedule] .program-session-actions .status-reserved::before,
  [data-program-schedule] .program-session-actions .status-confirmed::before {
    content: "✓";
    font-size: 16px;
    margin-right: 8px;
  }

  [data-program-schedule] .program-detail-note {
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    margin-top: 2px;
    padding: 10px;
  }
}

/* Premium login experience */
.login-view {
  align-items: center;
  background:
    radial-gradient(ellipse 38% 27% at 3% 5%, rgba(248, 255, 226, 0.08), transparent 58%),
    radial-gradient(ellipse 34% 22% at 27% 18%, rgba(255, 153, 0, 0.042), transparent 72%),
    radial-gradient(ellipse 60% 52% at 22% 47%, rgba(255, 153, 0, 0.048), transparent 68%),
    radial-gradient(ellipse 54% 58% at 82% 45%, rgba(0, 255, 140, 0.056), transparent 66%),
    radial-gradient(ellipse 100% 24% at 50% 104%, rgba(4, 52, 25, 0.22), transparent 70%),
    linear-gradient(180deg, #060b08 0%, #030504 46%, #010201 100%);
  color: #ffffff;
  gap: clamp(46px, 6vw, 104px);
  grid-template-columns: minmax(390px, 1fr) minmax(360px, 460px);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5.6vw, 76px);
  position: relative;
}

.login-view::before,
.login-view::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.login-view::before {
  background:
    radial-gradient(ellipse 30% 24% at -9% 2%, rgba(255, 245, 204, 0.18), transparent 66%),
    radial-gradient(ellipse 22% 16% at 1% 9%, rgba(238, 255, 226, 0.075), transparent 68%),
    linear-gradient(112deg, rgba(255, 244, 205, 0.062) 0%, rgba(255, 244, 205, 0.022) 14%, transparent 42%),
    linear-gradient(101deg, rgba(238, 255, 226, 0.028) 0%, rgba(238, 255, 226, 0.01) 18%, transparent 48%),
    linear-gradient(111deg, transparent 0 25%, rgba(210, 245, 220, 0.0012) 25.2% 25.5%, transparent 25.8% 100%),
    linear-gradient(74deg, transparent 0 39%, rgba(255, 153, 0, 0.002) 39.2% 39.45%, transparent 39.7% 100%),
    radial-gradient(ellipse 66% 22% at 32% 84%, rgba(2, 120, 61, 0.1), transparent 74%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.68) 58%, transparent 88%);
  opacity: 0.46;
}

.login-view::after {
  background:
    linear-gradient(164deg, transparent 0 70%, rgba(245, 255, 235, 0.068) 70.3% 70.72%, transparent 71.12% 100%),
    radial-gradient(ellipse 112% 25% at 50% 104%, rgba(10, 44, 22, 0.3), transparent 72%),
    radial-gradient(ellipse 78% 18% at 37% 93%, rgba(188, 132, 48, 0.036), transparent 72%),
    radial-gradient(ellipse 42% 11% at 69% 98%, rgba(108, 146, 84, 0.022), transparent 70%),
    linear-gradient(to top, rgba(1, 19, 9, 0.84) 0%, rgba(3, 20, 12, 0.29) 18%, transparent 38%),
    repeating-linear-gradient(86deg, transparent 0 4px, rgba(205, 234, 174, 0.0028) 5px 5.5px, transparent 7px 16px),
    repeating-linear-gradient(99deg, transparent 0 6px, rgba(0, 0, 0, 0.012) 7px 8px, transparent 10px 22px),
    repeating-linear-gradient(92deg, rgba(196, 232, 174, 0.005) 0 8.5vw, rgba(0, 0, 0, 0.028) 8.5vw 17vw, rgba(196, 232, 174, 0.0035) 17vw 25.5vw),
    repeating-linear-gradient(88deg, transparent 0 7px, rgba(52, 86, 38, 0.006) 8px 9px, transparent 10px 24px),
    repeating-linear-gradient(96deg, transparent 0 22px, rgba(100, 140, 82, 0.0015) 23px 24px, transparent 25px 54px),
    repeating-linear-gradient(104deg, transparent 0 3px, rgba(255, 255, 255, 0.0015) 4px 4.5px, transparent 6px 18px),
    repeating-linear-gradient(2deg, transparent 0 64px, rgba(255, 255, 255, 0.0008) 65px 66px, transparent 67px 128px),
    radial-gradient(ellipse 90% 72% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.26), transparent 38%, rgba(0, 0, 0, 0.48)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.58));
  opacity: 0.88;
}

.login-brand,
.login-panel {
  position: relative;
  z-index: 1;
}

.login-brand {
  align-content: center;
  gap: clamp(21px, 2.6vw, 34px);
  justify-self: end;
  max-width: 720px;
}

.login-logo-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  margin-bottom: -18px;
  margin-top: clamp(26px, 5vh, 54px);
  max-width: 580px;
  overflow: visible;
  padding: 0;
  position: relative;
}

.login-logo-stage::before {
  background:
    radial-gradient(ellipse 64% 46% at 48% 50%, rgba(255, 153, 0, 0.082), transparent 72%),
    radial-gradient(ellipse 88% 62% at 54% 58%, rgba(0, 0, 0, 0.38), transparent 78%);
  content: "";
  filter: blur(10px);
  inset: -30% -24%;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.login-logo-stage::after {
  display: none;
}

.login-logo-crop {
  aspect-ratio: 2.58 / 1;
  display: block;
  max-width: 580px;
  overflow: visible;
  position: relative;
  width: min(100%, 580px);
}

.brand-logo-login {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 34px rgba(255, 153, 0, 0.09))
    saturate(1.02);
  margin: 0;
  mix-blend-mode: normal;
  max-width: 100%;
  width: 100%;
}

.login-brand-copy {
  border-left: 3px solid rgba(246, 190, 74, 0.98);
  display: grid;
  gap: 11px;
  padding-left: clamp(18px, 1.9vw, 26px);
}

.login-brand-copy p {
  color: #13d985;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.login-brand-copy h1 {
  color: #f8fbf8;
  font-family: "Bebas Neue", "Oswald", "Arial Narrow", "Inter Tight", "Impact", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(49px, 5.85vw, 92px);
  font-stretch: condensed;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.84;
  margin: 0;
  text-shadow:
    0 28px 48px rgba(0, 0, 0, 0.58),
    0 0 28px rgba(255, 255, 255, 0.045);
  text-transform: uppercase;
}

.login-brand-copy h1 span {
  display: block;
}

.login-brand-copy h1 span + span {
  color: #f6be4a;
  font-size: 0.82em;
  margin-top: 0.135em;
  text-shadow:
    0 22px 42px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(246, 190, 74, 0.13);
}

.login-brand-copy strong {
  color: #f6be4a;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.login-brand-summary {
  color: rgba(235, 240, 237, 0.8);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.52;
  margin-top: 8px;
  max-width: 635px;
}

.login-feature-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 560px;
}

.login-feature {
  align-items: center;
  border-left: 1px solid rgba(216, 255, 235, 0.12);
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 88px;
  opacity: 0.76;
  padding: 8px 10px;
  text-align: center;
}

.login-feature:first-child {
  border-left: 0;
}

.login-feature strong {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.login-feature-icon {
  background:
    linear-gradient(180deg, rgba(19, 217, 133, 0.14), rgba(19, 217, 133, 0.055));
  border: 1.5px solid rgba(19, 217, 133, 0.34);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(19, 217, 133, 0.1);
  display: block;
  height: 34px;
  position: relative;
  width: 34px;
}

.login-feature-icon::before,
.login-feature-icon::after {
  content: "";
  position: absolute;
}

.icon-reservations::before,
.icon-programs::before {
  border: 2px solid #65ffc0;
  border-radius: 4px;
  inset: 8px 7px 7px;
}

.icon-reservations::after {
  background: #65ffc0;
  box-shadow: 7px 0 0 #65ffc0, 14px 0 0 #65ffc0;
  height: 2px;
  left: 9px;
  top: 14px;
  width: 3px;
}

.icon-programs::after {
  background: #65ffc0;
  box-shadow: 0 6px 0 #65ffc0, 0 12px 0 #65ffc0;
  height: 2px;
  left: 10px;
  top: 12px;
  width: 13px;
}

.icon-analysis::before {
  background: #65ffc0;
  border-radius: 2px;
  bottom: 8px;
  box-shadow: 7px -6px 0 #65ffc0, 14px -12px 0 #65ffc0;
  height: 10px;
  left: 9px;
  width: 4px;
}

.icon-analysis::after {
  background: rgba(246, 190, 74, 0.78);
  border-radius: 999px;
  height: 4px;
  right: 6px;
  top: 7px;
  width: 4px;
}

.icon-player::before {
  border: 2px solid #65ffc0;
  border-radius: 999px;
  height: 8px;
  left: 12px;
  top: 7px;
  width: 8px;
}

.icon-player::after {
  border: 2px solid #65ffc0;
  border-radius: 12px 12px 4px 4px;
  height: 11px;
  left: 8px;
  top: 19px;
  width: 17px;
}

.login-panel {
  background:
    radial-gradient(ellipse 76% 58% at 10% 0%, rgba(19, 217, 133, 0.16), transparent 70%),
    radial-gradient(ellipse 54% 34% at 105% -4%, rgba(255, 176, 42, 0.2), transparent 72%),
    radial-gradient(ellipse 44% 26% at 92% 8%, rgba(246, 190, 74, 0.085), transparent 78%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), transparent 34%),
    linear-gradient(180deg, rgba(14, 21, 18, 0.82), rgba(4, 7, 6, 0.9));
  backdrop-filter: blur(18px) saturate(1.12);
  border: 1.5px solid rgba(216, 255, 235, 0.29);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px 1px 0 rgba(255, 176, 42, 0.13),
    inset 0 -54px 98px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(0, 255, 170, 0.08),
    inset 0 0 52px rgba(255, 176, 42, 0.028),
    0 0 0 1px rgba(255, 153, 0, 0.06),
    0 42px 110px rgba(0, 0, 0, 0.7),
    0 0 64px rgba(0, 255, 140, 0.075),
    0 0 44px rgba(255, 153, 0, 0.04);
  display: grid;
  gap: 18px;
  overflow: hidden;
  padding: clamp(28px, 3.5vw, 46px);
  position: relative;
  width: 100%;
}

.login-panel::before {
  background:
    linear-gradient(90deg, rgba(19, 217, 133, 0.42), transparent 24%, transparent 74%, rgba(255, 153, 0, 0.42)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.login-panel::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 176, 42, 0.5)),
    radial-gradient(ellipse 82% 100% at 100% 0%, rgba(255, 153, 0, 0.12), transparent 72%);
  content: "";
  height: 1px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
}

.login-panel-heading {
  display: grid;
  gap: 8px;
}

.login-panel-heading h2 {
  color: #ffffff;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

.login-panel-heading p {
  color: rgba(235, 240, 237, 0.72);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.login-panel label {
  color: rgba(235, 240, 237, 0.78);
  font-size: 12px;
  gap: 9px;
  letter-spacing: 0.08em;
}

.login-panel input {
  background: rgba(3, 5, 4, 0.62);
  border: 1.5px solid rgba(216, 255, 235, 0.2);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 700;
  min-height: 56px;
  outline: none;
  padding: 14px 16px;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease;
}

.login-panel input:focus {
  background: rgba(5, 8, 7, 0.82);
  border-color: rgba(19, 217, 133, 0.62);
  box-shadow:
    0 0 0 4px rgba(19, 217, 133, 0.12),
    0 0 24px rgba(19, 217, 133, 0.08);
}

.login-panel button[type="submit"] {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 45%),
    linear-gradient(180deg, #18c979, #079457);
  border: 1px solid rgba(90, 255, 181, 0.42);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 34px rgba(7, 148, 87, 0.24);
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  min-height: 58px;
  transition:
    box-shadow 200ms ease,
    transform 200ms ease,
    filter 200ms ease;
}

.login-panel button[type="submit"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 22px 42px rgba(7, 148, 87, 0.32),
    0 0 24px rgba(19, 217, 133, 0.1);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.login-panel .login-secondary-action {
  background: rgba(3, 8, 6, 0.66);
  border: 1.5px solid rgba(216, 255, 235, 0.22);
  border-radius: 12px;
  color: rgba(247, 250, 248, 0.94);
  font-size: 15px;
  font-weight: 900;
  min-height: 50px;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.login-panel .login-secondary-action:hover {
  border-color: rgba(19, 217, 133, 0.48);
  box-shadow: 0 0 22px rgba(19, 217, 133, 0.08);
  color: #65ffc0;
  transform: translateY(-1px);
}

.signup-panel {
  max-width: 760px;
}

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

.field-helper {
  color: rgba(235, 240, 237, 0.62);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: -2px;
  text-transform: none;
}

.field-helper-placeholder {
  visibility: hidden;
}

.signup-trust-note {
  border-top: 1px solid rgba(216, 255, 235, 0.12);
  color: rgba(235, 240, 237, 0.64);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  padding-top: 14px;
}

.signup-actions {
  display: grid;
  gap: 12px;
}

.signup-actions .login-secondary-action {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: rgba(235, 240, 237, 0.72);
  min-height: 34px;
  padding: 4px 0;
}

.signup-actions .login-secondary-action:hover {
  background: transparent;
  box-shadow: none;
  color: #65ffc0;
}

.signup-welcome-card {
  margin-inline: auto;
  max-width: 760px;
}

.signup-welcome-content {
  display: grid;
  gap: 22px;
  text-align: left;
}

.signup-welcome-content h2 {
  color: #ffffff;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 0.95;
  margin: 0;
  text-transform: none;
}

.signup-welcome-content > p {
  color: rgba(235, 240, 237, 0.78);
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
}

.signup-welcome-steps {
  background: rgba(3, 8, 6, 0.54);
  border: 1px solid rgba(19, 217, 133, 0.22);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  padding: 18px;
}

.signup-welcome-steps span {
  color: var(--brand-green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.signup-welcome-steps ol {
  color: #ffffff;
  display: grid;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  padding-left: 24px;
}

.signup-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.signup-welcome-actions .parent-action-button {
  min-width: min(100%, 220px);
}

.demo-note {
  border-top: 1px solid rgba(216, 255, 235, 0.14);
  color: rgba(235, 240, 237, 0.74);
  display: grid;
  gap: 10px;
  margin: 0;
  padding-top: 16px;
}

.demo-note summary {
  align-items: center;
  color: #49f7a0;
  cursor: pointer;
  display: flex;
  font-size: 13.5px;
  font-weight: 850;
  gap: 10px;
  justify-content: center;
  list-style: none;
  outline: none;
  text-shadow: 0 0 18px rgba(19, 217, 133, 0.06);
  transition:
    color 180ms ease,
    text-shadow 180ms ease;
}

.demo-note summary::-webkit-details-marker {
  display: none;
}

.demo-note summary:hover {
  color: #7dffbd;
  text-shadow: 0 0 18px rgba(19, 217, 133, 0.16);
}

.demo-note summary:focus {
  outline: none;
}

.demo-note summary:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(19, 217, 133, 0.13);
}

.demo-note summary::before {
  background:
    linear-gradient(180deg, rgba(19, 217, 133, 0.2), rgba(19, 217, 133, 0.08));
  border: 1px solid rgba(19, 217, 133, 0.32);
  border-radius: 999px;
  content: "";
  height: 18px;
  width: 18px;
}

.demo-note summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 7px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
  width: 7px;
}

.demo-note[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.demo-note div {
  background: rgba(3, 5, 4, 0.46);
  border: 1px solid rgba(216, 255, 235, 0.14);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.demo-note p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.demo-note strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.demo-note span {
  color: rgba(235, 240, 237, 0.68);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.login-panel .error-note {
  color: #ff9b8d;
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  min-height: 18px;
}

@media (max-width: 1100px) {
  .login-view {
    grid-template-columns: 1fr;
    place-items: center;
  }

  .login-brand {
    justify-self: center;
    max-width: 720px;
  }

  .login-logo-stage {
    justify-self: center;
  }

  .login-panel {
    max-width: 560px;
  }
}

@media (max-width: 680px) {
  .login-view {
    padding: 22px;
  }

  .login-brand {
    display: contents;
  }

  .login-logo-stage {
    order: 1;
    position: relative;
    z-index: 1;
  }

  .login-brand-copy {
    order: 2;
    position: relative;
    z-index: 1;
  }

  .login-panel {
    order: 3;
  }

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

  .signup-welcome-actions {
    display: grid;
  }

  .signup-welcome-actions .parent-action-button {
    width: 100%;
  }

  .login-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    order: 4;
    position: relative;
    width: 100%;
    z-index: 1;
  }

  .login-feature:nth-child(odd) {
    border-left: 0;
  }
}

.dropin-session-actions .dropin-primary-action.action-single {
  background:
    radial-gradient(ellipse 82% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 68%),
    linear-gradient(180deg, rgba(19, 217, 133, 0.92), rgba(7, 122, 75, 0.94));
  border-color: rgba(238, 242, 236, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(7, 122, 75, 0.2),
    0 0 22px rgba(19, 217, 133, 0.1);
  color: #ffffff;
}

@media (max-width: 900px) {
  .portal-chrome {
    gap: 12px;
    overflow: visible;
    padding: 14px;
    z-index: 40;
  }

  .portal-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: space-between;
    z-index: 120;
  }

  .portal-brand {
    flex: 1 1 auto;
    gap: 10px;
    width: auto;
  }

  .brand-logo-badge {
    filter: drop-shadow(0 0 12px rgba(19, 217, 133, 0.1));
    height: 54px;
    width: 54px;
  }

  .portal-header p,
  .portal-tagline {
    display: none;
  }

  .portal-header h1 {
    color: #ffffff;
    font-size: clamp(21px, 6vw, 28px);
    font-weight: 950;
    line-height: 1.05;
    margin: 0;
  }

  .portal-parent-rest-name {
    display: none;
  }

  .portal-actions {
    display: none;
  }

  .header-player-selector {
    display: none;
  }

  .global-player-selector {
    min-width: 0;
    width: 100%;
  }

  .global-player-selector select {
    min-height: 44px;
  }

  .parent-mobile-menu {
    display: block;
    flex: 0 0 auto;
    order: 2;
    position: relative;
    z-index: 10000;
  }

  .parent-mobile-menu[open] {
    z-index: 10000;
  }

  .parent-mobile-menu summary {
    align-items: center;
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    background:
      radial-gradient(ellipse 120% 100% at 50% 0%, rgba(19, 217, 133, 0.1), transparent 62%),
      rgba(5, 8, 7, 0.88);
    border: 1.5px solid rgba(19, 217, 133, 0.32);
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 22px rgba(19, 217, 133, 0.11),
      0 14px 28px rgba(0, 0, 0, 0.32);
    display: inline-grid;
    gap: 5.5px;
    height: 52px;
    justify-items: center;
    list-style: none;
    padding: 0;
    width: 52px;
  }

  .parent-mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .parent-mobile-menu summary span {
    background: #f8fbf7;
    border-radius: 999px;
    display: block;
    height: 2.5px;
    width: 22px;
  }

  .parent-mobile-menu-panel {
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
    background:
      radial-gradient(ellipse 96% 120% at 50% 0%, rgba(19, 217, 133, 0.08), transparent 64%),
      linear-gradient(180deg, rgba(15, 18, 17, 0.98), rgba(7, 9, 8, 0.98));
    border: 1.5px solid rgba(216, 255, 235, 0.22);
    border-radius: 14px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 24px 60px rgba(0, 0, 0, 0.46);
    display: grid;
    gap: 6px;
    max-height: calc(100vh - var(--parent-mobile-menu-top, 96px) - 16px);
    min-width: 232px;
    overflow-y: auto;
    padding: 10px;
    position: fixed;
    right: var(--parent-mobile-menu-right, 16px);
    top: var(--parent-mobile-menu-top, 96px);
    width: min(260px, calc(100vw - 32px));
    z-index: 10000;
  }

  .parent-mobile-menu:not([open]) .parent-mobile-menu-panel {
    display: none;
  }

  .parent-mobile-menu-panel .global-player-selector {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(216, 255, 235, 0.14);
    border-radius: 12px;
    padding: 10px;
  }

  .parent-mobile-menu-panel .global-player-selector > span {
    color: rgba(220, 229, 224, 0.68);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .parent-mobile-menu-panel .global-player-selector select {
    background: rgba(3, 8, 6, 0.82);
    border-color: rgba(19, 217, 133, 0.24);
    color: #ffffff;
    min-height: 42px;
  }

  .parent-mobile-menu-player:empty {
    display: none;
  }

  .parent-mobile-menu-item {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: rgba(247, 250, 248, 0.86);
    display: flex;
    font-size: 15px;
    font-weight: 800;
    gap: 12px;
    min-height: 46px;
    padding: 9px 10px;
    text-align: left;
    text-decoration: none;
    width: 100%;
  }

  .parent-mobile-menu-item.active,
  .parent-mobile-menu-item:hover {
    background: rgba(16, 184, 111, 0.16);
    color: #ffffff;
  }

  .parent-mobile-menu-item.danger {
    border-top: 1px solid rgba(216, 255, 235, 0.16);
    border-radius: 0 0 10px 10px;
    color: #ff6f65;
    margin-top: 4px;
    padding-top: 14px;
  }

  .parent-menu-icon {
    color: currentColor;
    display: inline-grid;
    height: 26px;
    place-items: center;
    width: 26px;
  }

  .parent-menu-icon svg,
  .parent-tab-icon svg {
    display: block;
    fill: none;
    height: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    width: 100%;
  }

  .parent-tabs {
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
    background:
      radial-gradient(ellipse 120% 150% at 10% 0%, rgba(19, 217, 133, 0.08), transparent 62%),
      linear-gradient(180deg, rgba(10, 14, 12, 0.94), rgba(4, 8, 7, 0.94));
    border: 1.5px solid rgba(216, 255, 235, 0.18);
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.035),
      0 14px 30px rgba(0, 0, 0, 0.28);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    padding: 0;
  }

  .parent-tabs .parent-tab-secondary {
    display: none;
  }

  .parent-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 7px;
    justify-items: center;
    min-height: 76px;
    min-width: 0;
    padding: 10px 2px 12px;
    position: relative;
    text-align: center;
    white-space: nowrap;
  }

  .parent-tabs button + button {
    border-left: 1px solid rgba(216, 255, 235, 0.1);
  }

  .parent-tabs button.active {
    background:
      radial-gradient(ellipse 90% 75% at 50% 0%, rgba(19, 217, 133, 0.16), transparent 70%),
      linear-gradient(180deg, rgba(19, 217, 133, 0.08), rgba(19, 217, 133, 0.01));
    border: 0;
    box-shadow:
      inset 0 0 0 1px rgba(19, 217, 133, 0.04),
      inset 0 -14px 24px rgba(19, 217, 133, 0.06);
    color: #13d985;
  }

  .parent-tabs button::after {
    background: transparent;
    border-radius: 999px 999px 0 0;
    bottom: 0;
    content: "";
    height: 4px;
    left: 18%;
    position: absolute;
    right: 18%;
  }

  .parent-tabs button:first-child,
  .parent-tabs button:last-child {
    border-radius: 0;
  }

  .parent-tab-icon {
    color: rgba(247, 250, 248, 0.82);
    display: block;
    height: 27px;
    width: 27px;
  }

  .parent-tabs button.active .parent-tab-icon,
  .parent-tabs button.active .parent-tab-label {
    color: #13d985;
    text-shadow: 0 0 14px rgba(19, 217, 133, 0.2);
  }

  .parent-tabs button.active::after {
    background: #7dff4f;
    box-shadow:
      0 0 12px rgba(125, 255, 79, 0.45),
      0 -6px 18px rgba(19, 217, 133, 0.12);
  }

  .parent-tab-label {
    display: inline;
    font-size: clamp(8px, 2.45vw, 11px);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
    max-width: 100%;
    overflow-wrap: normal;
    text-transform: uppercase;
    white-space: nowrap;
    word-break: normal;
  }

  .parent-tab-label-desktop {
    display: none;
  }

  .parent-tab-label-mobile {
    display: inline;
  }
}

@media (max-width: 420px) {
  .parent-tabs {
    gap: 0;
  }

  .parent-tabs button {
    min-height: 68px;
    padding: 9px 1px 11px;
  }

  .parent-tab-icon {
    height: 24px;
    width: 24px;
  }

  .parent-tab-label {
    font-size: clamp(7.5px, 2.15vw, 9.5px);
  }
}

.available-unified-section .available-page-heading h2,
.available-unified-section .available-page-heading h2 *,
.package-unified-section > h2,
.package-unified-section > h2 *,
.performance-unified-section .performance-page-heading h2,
.performance-unified-section .performance-page-heading h2 * {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  .family-dashboard-heading h2,
  .family-player-section .overview-dashboard-section-heading h2,
  .portal-card > .overview-dashboard-section-heading h2,
  .available-unified-section .available-page-heading h2,
  .package-unified-section > h2,
  .package-unified-section h2,
  .performance-unified-section .performance-page-heading h2,
  .notification-summary-title h2,
  .reservation-section-heading h2,
  .players-toolbar-card h2,
  .player-card-section h3,
  .account-page-heading h2,
  .account-maintenance-section h3,
  .section-heading-row h3,
  .performance-wizard-step h3,
  .performance-wizard-step h4 {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
  }
}

@media (max-width: 900px) {
  body .portal-view #portal-content .family-dashboard-heading h2,
  body .portal-view #portal-content .family-dashboard-heading h2 *,
  body .portal-view #portal-content .overview-dashboard-section-heading h2,
  body .portal-view #portal-content .overview-dashboard-section-heading h2 *,
  body .portal-view #portal-content .available-page-heading h2,
  body .portal-view #portal-content .available-page-heading h2 *,
  body .portal-view #portal-content .package-unified-section h2,
  body .portal-view #portal-content .package-unified-section h2 *,
  body .portal-view #portal-content .performance-page-heading h2,
  body .portal-view #portal-content .performance-page-heading h2 *,
  body .portal-view #portal-content .reservation-section-heading h2,
  body .portal-view #portal-content .reservation-section-heading h2 *,
  body .portal-view #portal-content .players-toolbar-card h2,
  body .portal-view #portal-content .players-toolbar-card h2 *,
  body .portal-view #portal-content .player-card-section h3,
  body .portal-view #portal-content .player-card-section h3 *,
  body .portal-view #portal-content .account-page-heading h2,
  body .portal-view #portal-content .account-page-heading h2 *,
  body .portal-view #portal-content .account-maintenance-section h3,
  body .portal-view #portal-content .account-maintenance-section h3 *,
  body .portal-view #portal-content .section-heading-row h3,
  body .portal-view #portal-content .section-heading-row h3 *,
  body .portal-view #portal-content .performance-wizard-step h3,
  body .portal-view #portal-content .performance-wizard-step h3 *,
  body .portal-view #portal-content .performance-wizard-step h4,
  body .portal-view #portal-content .performance-wizard-step h4 *,
  body .portal-view #portal-content .notification-summary-title h2,
  body .portal-view #portal-content .notification-summary-title h2 * {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

@media (max-width: 900px) {
  .available-unified-section .available-catalog {
    gap: 0;
  }

  .available-unified-section .available-catalog > .catalog-category-section,
  .available-unified-section .available-catalog > .dropin-training-strip {
    position: relative;
  }

  .available-unified-section .available-catalog > .catalog-category-section + .catalog-category-section,
  .available-unified-section .available-catalog > .catalog-category-section + .dropin-training-strip,
  .available-unified-section .available-catalog > .dropin-training-strip + .catalog-category-section {
    margin-top: 32px;
  }

  .available-unified-section .available-catalog > .catalog-category-section + .catalog-category-section::before,
  .available-unified-section .available-catalog > .catalog-category-section + .dropin-training-strip::before,
  .available-unified-section .available-catalog > .dropin-training-strip + .catalog-category-section::before {
    background: linear-gradient(90deg, rgba(19, 217, 133, 0.46), rgba(216, 255, 235, 0.1));
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: -17px;
  }

  .available-unified-section .available-catalog .catalog-category-header {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 2px;
  }

  .available-unified-section .available-catalog .catalog-category-header > div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .available-unified-section .available-catalog .catalog-category-header h3 {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    line-height: 1.05;
  }

  .available-unified-section .available-catalog .catalog-category-header p {
    color: rgba(220, 229, 224, 0.78);
    margin: 0;
  }

  .available-unified-section .available-catalog .catalog-view-all {
    color: rgba(91, 255, 177, 0.96);
    padding-top: 1px;
  }
}

@media (max-width: 900px) {
  body .portal-view #portal-content .available-page-heading h2.parent-primary-section-title,
  body .portal-view #portal-content .package-unified-section h2.parent-primary-section-title,
  body .portal-view #portal-content .performance-page-heading h2.parent-primary-section-title,
  body .portal-view #portal-content .family-dashboard-heading h2,
  body .portal-view #portal-content .overview-dashboard-section-heading h2,
  body .portal-view #portal-content .reservation-section-heading h2,
  body .portal-view #portal-content .players-toolbar-card h2,
  body .portal-view #portal-content .account-page-heading h2,
  body .portal-view #portal-content .account-maintenance-section h3,
  body .portal-view #portal-content .section-heading-row h3,
  body .portal-view #portal-content .program-schedule-heading h2,
  body .portal-view #portal-content .performance-wizard-step h3,
  body .portal-view #portal-content .performance-wizard-step h4,
  body .portal-view #portal-content .notification-summary-title h2,
  body .portal-view #portal-content .available-unified-section .available-catalog .catalog-category-header h3 {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0.36px #ffffff !important;
    color: #ffffff !important;
    filter: none !important;
    font-family: Montserrat, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-synthesis-weight: auto;
    font-weight: 950 !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    text-rendering: optimizeLegibility;
    text-shadow: none !important;
  }
}

@media (max-width: 900px) {
  body .portal-view #portal-content :is(
    .family-dashboard-heading h2,
    .overview-dashboard-section-heading h2,
    .available-page-heading h2,
    .package-unified-section h2,
    .performance-page-heading h2,
    .reservation-section-heading h2,
    .players-toolbar-card h2,
    .account-page-heading h2,
    .account-maintenance-section h3,
    .section-heading-row h3,
    .program-schedule-heading h2,
    .performance-wizard-step h3,
    .performance-wizard-step h4,
    .notification-summary-title h2,
    .available-unified-section .available-catalog .catalog-category-header h3
  ),
  body .portal-view #portal-content :is(
    .family-dashboard-heading h2,
    .overview-dashboard-section-heading h2,
    .available-page-heading h2,
    .package-unified-section h2,
    .performance-page-heading h2,
    .reservation-section-heading h2,
    .players-toolbar-card h2,
    .account-page-heading h2,
    .account-maintenance-section h3,
    .section-heading-row h3,
    .program-schedule-heading h2,
    .performance-wizard-step h3,
    .performance-wizard-step h4,
    .notification-summary-title h2,
    .available-unified-section .available-catalog .catalog-category-header h3
  ) * {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0.45px #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
}

.mobile-section-title-solid-white {
  display: none;
}

@media (max-width: 900px) {
  .desktop-section-title-for-mobile-rebuild {
    display: none !important;
  }

  body .portal-view #portal-content .mobile-section-title-solid-white {
    -webkit-text-fill-color: #26ff9a !important;
    -webkit-text-stroke: 0 !important;
    color: #26ff9a !important;
    display: block;
    filter: none !important;
    font-family: "Teko", "Oswald", "Arial Narrow", "Inter Tight", ui-sans-serif, system-ui, sans-serif !important;
    font-size: clamp(28px, 8vw, 36px);
    font-style: normal;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    line-height: 0.98;
    margin: 0;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    padding: 0;
    paint-order: normal !important;
    text-decoration: none;
    text-shadow: none !important;
    text-transform: uppercase;
  }

  body .portal-view #portal-content .overview-dashboard-section-heading .mobile-section-title-solid-white,
  body .portal-view #portal-content .account-maintenance-section .mobile-section-title-solid-white,
  body .portal-view #portal-content .section-heading-row .mobile-section-title-solid-white,
  body .portal-view #portal-content .performance-wizard-step .mobile-section-title-solid-white {
    font-size: clamp(23px, 6.8vw, 30px);
  }

  body .portal-view #portal-content .overview-reservations-section .overview-dashboard-section-heading,
  body .portal-view #portal-content .overview-reservations-section .overview-dashboard-section-heading > div {
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  body .portal-view #portal-content .overview-reservations-section .mobile-section-title-solid-white {
    text-align: center;
    width: 100%;
  }

  body .portal-view #portal-content .overview-reservations-section .overview-reservations-cta {
    margin-left: auto;
    margin-right: auto;
  }
}