/* Compact control surface: denser broadcast console sizing. */
.control-body {
  padding: 16px;
}

.control {
  max-width: 1500px;
  grid-template-columns: minmax(360px, 0.78fr) minmax(620px, 1.22fr);
  gap: 8px 12px;
}

.control-body .panel {
  padding: 11px;
}

.control-body .control-subpanel,
.control-body .send-output-box,
.control-body .operator-health,
.control-body .vmix-url-box,
.control-body .banner-logo-status,
.control-body .race-ready-card,
.control-body .top3-driver-control {
  padding: 7px;
}

.control-body .panel h2 {
  min-height: 28px;
  margin-bottom: 8px;
  padding: 3px 11px 3px 8px;
}

.control-body .panel h2::before {
  height: 18px;
}

.control-body .panel > p,
.control-body .panel-heading p,
.control-body .race-ready-topline p {
  margin-bottom: 8px;
}

.control-body textarea,
.control-body input,
.control-body select {
  min-height: 38px;
  padding: 6px 9px;
}

.control-body button,
.control-body .links a,
.control-body details summary {
  min-height: 34px;
  padding: 0 11px;
}

.control-body .program-buttons {
  gap: 6px;
}

.control-body .program-buttons button {
  min-height: 46px;
  padding: 17px 8px 5px;
}

.control-body .send-output-box {
  grid-template-columns: minmax(190px, 230px) minmax(190px, 230px) minmax(280px, 1fr);
  gap: 8px;
}

.control-body .send-output-box button {
  min-height: 50px;
  font-size: 20px;
}

/* Side Tower: left-side all-in-one banner option. */
.side-tower-overlay {
  background: transparent;
}

.race-side-tower {
  --side-tower-logo-panel-height: 144px;
  position: absolute;
  left: 0;
  top: 18px;
  bottom: auto;
  width: 358px;
  display: grid;
  grid-template-rows: 208px 72px min-content min-content var(--side-tower-logo-panel-height);
  align-content: start;
  gap: 8px;
  padding: 8px;
  color: #ffffff;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  filter: drop-shadow(18px 18px 28px rgba(0, 0, 0, 0.58));
}

.race-side-tower::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, 0.14) 45%, transparent 54%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgb(27 33 36 / calc(0.96 * var(--banner-panel-alpha))) 0%, rgb(5 7 9 / calc(0.98 * var(--banner-panel-alpha))) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.race-side-tower > * {
  position: relative;
  z-index: 1;
}

.side-tower-header,
.side-duration,
.side-driver-group,
.side-tower-footer {
  overflow: hidden;
  border: 1px solid rgba(230, 238, 242, 0.22);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.14), transparent 34% 78%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgb(38 43 44 / calc(0.96 * var(--banner-panel-alpha))) 0%, rgb(6 8 10 / calc(0.98 * var(--banner-panel-alpha))) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -18px 24px rgba(0, 0, 0, 0.34);
}

.side-tower-header {
  display: grid;
  grid-template-rows: var(--side-tower-logo-panel-height) minmax(0, 1fr);
}

.side-tower-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 10px 18px;
  background:
    linear-gradient(90deg, #9da3a3 0%, #eef1ef 24%, #ffffff 50%, #d7dcda 78%, #8f9696 100%);
  border-bottom: 3px solid var(--banner-accent-line-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -14px 20px rgba(0, 0, 0, 0.18);
}

.side-tower-logo img,
.side-tower-sponsor img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.side-tower-logo img {
  max-width: 88%;
  max-height: 80%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.side-tower-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.side-tower-context strong {
  min-width: 0;
  color: #ffffff;
  font-size: clamp(32px, calc(var(--banner-info-size) + 14px), 44px);
  line-height: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.68);
}

.side-tower-context strong.is-marquee {
  text-overflow: clip;
}

.side-context-marquee-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  animation: banner-info-marquee 13s linear infinite;
  will-change: transform;
}

.side-context-marquee-track span {
  flex: 0 0 auto;
  padding-right: 58px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.side-tower-context > span {
  color: var(--banner-accent-line-color);
  font-size: 20px;
  line-height: 1;
}

.side-duration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  border-left: 0;
  border-right: 3px solid var(--banner-accent-line-color);
}

.side-duration span {
  padding: 0 14px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}

.side-duration strong {
  height: 100%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 38%),
    rgba(0, 0, 0, 0.38);
  font-size: 42px;
  line-height: 1;
}

.side-duration.flag-green {
  border-right-color: #8cf13d;
  box-shadow: inset 0 -4px 0 rgba(140, 241, 61, 0.9);
}

.side-duration.flag-yellow {
  border-right-color: #f4c542;
  box-shadow: inset 0 -4px 0 rgba(244, 197, 66, 0.9);
}

.side-duration.flag-red {
  border-right-color: #e7332f;
  box-shadow: inset 0 -4px 0 rgba(231, 51, 47, 0.9);
}

.side-duration.flag-final {
  border-right-color: #ffffff;
  box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.82);
}

.side-driver-group {
  display: grid;
  grid-template-rows: 34px auto;
}

.side-driver-group-rotation {
  grid-template-rows: auto;
  margin-top: -8px;
  border-top: 0;
  overflow: hidden;
}

.side-driver-group-rotation.is-empty-rotation {
  display: grid;
}

.side-driver-group header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border-bottom: 2px solid color-mix(in srgb, var(--banner-accent-line-color) 80%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 54%),
    rgba(0, 0, 0, 0.32);
}

.side-driver-group header span {
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.side-driver-group header em {
  min-width: 0;
  color: color-mix(in srgb, var(--banner-accent-line-color) 78%, #ffffff 22%);
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  text-align: right;
}

.side-driver-rows {
  display: grid;
}

.side-driver-group-main .side-driver-rows {
  grid-template-rows: repeat(5, 54px);
}

.side-driver-group-rotation .side-driver-rows {
  grid-template-rows: none;
  grid-auto-rows: 46px;
}

.side-driver-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px 48px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.13), transparent 24% 76%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgb(38 43 44 / calc(0.82 * var(--banner-panel-alpha))) 0%, rgb(6 8 10 / calc(0.84 * var(--banner-panel-alpha))) 100%);
}

.side-driver-row:last-child {
  border-bottom: 0;
}

.side-driver-row::after {
  content: "";
  grid-column: 1 / -1;
  height: 2px;
  align-self: end;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--banner-accent-line-color) 46%, transparent), transparent);
  opacity: 0.82;
}

.side-driver-row b,
.side-driver-row em,
.side-driver-row span,
.side-driver-row i {
  min-width: 0;
  grid-row: 1;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.68);
}

.side-driver-row b {
  display: grid;
  place-items: center;
  height: 34px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    #050608;
  border-radius: 4px;
  font-size: 28px;
  font-style: italic;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.34);
}

.side-driver-row em {
  color: #ffffff;
  font-size: 21px;
  font-style: normal;
  text-align: center;
}

.side-driver-row span {
  color: #ffffff;
  font-size: 25px;
}

.side-driver-row i {
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
  text-align: right;
}

.side-driver-group-rotation .side-driver-row {
  grid-template-columns: 40px 46px minmax(0, 1fr) 56px;
  gap: 7px;
  opacity: 0.9;
}

.side-driver-group-rotation .side-driver-row b {
  height: 30px;
  font-size: 24px;
}

.side-driver-group-rotation .side-driver-row em,
.side-driver-group-rotation .side-driver-row i {
  font-size: 18px;
}

.side-driver-group-rotation .side-driver-row span {
  font-size: 22px;
}

.side-driver-row.is-empty-slot {
  opacity: 0.46;
}

.side-driver-row.is-empty-slot b,
.side-driver-row.is-empty-slot em,
.side-driver-row.is-empty-slot span,
.side-driver-row.is-empty-slot i,
.race-side-tower.is-data-hidden .side-driver-row em,
.race-side-tower.is-data-hidden .side-driver-row span,
.race-side-tower.is-data-hidden .side-driver-row i {
  visibility: hidden;
}

.side-driver-row.is-empty-slot b {
  background: transparent;
  box-shadow: none;
}

.side-driver-group-rotation .side-driver-rows.is-sliding .side-driver-row {
  animation: flyout-page-slide-left 900ms cubic-bezier(0.16, 0.78, 0.18, 1) both;
}

.side-driver-group-rotation .side-driver-rows.is-sliding .side-driver-row:nth-child(2) {
  animation-delay: 60ms;
}

.side-driver-group-rotation .side-driver-rows.is-sliding .side-driver-row:nth-child(3) {
  animation-delay: 120ms;
}

.side-driver-group-rotation .side-driver-rows.is-sliding .side-driver-row:nth-child(4) {
  animation-delay: 180ms;
}

.side-driver-group-rotation .side-driver-rows.is-sliding .side-driver-row:nth-child(5) {
  animation-delay: 240ms;
}

.side-tower-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: var(--side-tower-logo-panel-height);
}

.side-tower-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 12px 18px;
  background:
    linear-gradient(90deg, #9da3a3 0%, #eef1ef 24%, #ffffff 50%, #d7dcda 78%, #8f9696 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -14px 20px rgba(0, 0, 0, 0.18);
}

.side-tower-sponsor img {
  max-width: 86%;
  max-height: 76%;
}

.race-side-tower.template-reference-premium:not(.template-light-theme) .side-tower-logo,
.race-side-tower.template-reference-premium:not(.template-light-theme) .side-tower-sponsor {
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.11), transparent 34%),
    linear-gradient(180deg, #1b2023 0%, #050607 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 22px rgba(0, 0, 0, 0.48);
}

.race-side-tower.template-reference-premium:not(.template-light-theme) .side-tower-logo img,
.race-side-tower.template-reference-premium:not(.template-light-theme) .side-tower-sponsor img {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.32))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.76));
}

.side-flag {
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 40%),
    #080a0c;
  border-left: 2px solid var(--banner-accent-line-color);
  font-size: 24px;
  line-height: 1;
}

.side-flag.flag-green {
  color: #8cf13d;
}

.side-flag.flag-yellow {
  color: #f4c542;
}

.side-flag.flag-red {
  color: #ff6a5f;
}

.side-flag.flag-final {
  color: #ffffff;
}

.race-side-tower.template-light-theme {
  color: #101214;
}

.race-side-tower.template-light-theme::before {
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, 0.72) 45%, transparent 54%),
    repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, rgb(255 255 255 / calc(0.94 * var(--banner-panel-alpha))) 0%, rgb(226 233 233 / calc(0.94 * var(--banner-panel-alpha))) 100%);
}

.race-side-tower.template-light-theme .side-tower-header,
.race-side-tower.template-light-theme .side-duration,
.race-side-tower.template-light-theme .side-driver-group,
.race-side-tower.template-light-theme .side-tower-footer {
  border-color: rgba(0, 0, 0, 0.18);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.88), transparent 38% 78%, rgba(255, 255, 255, 0.2)),
    linear-gradient(180deg, rgb(255 255 255 / calc(0.94 * var(--banner-panel-alpha))) 0%, rgb(229 236 236 / calc(0.92 * var(--banner-panel-alpha))) 100%);
}

.race-side-tower.template-light-theme .side-tower-context strong,
.race-side-tower.template-light-theme .side-duration span,
.race-side-tower.template-light-theme .side-driver-group header span,
.race-side-tower.template-light-theme .side-driver-row em,
.race-side-tower.template-light-theme .side-driver-row span,
.race-side-tower.template-light-theme .side-driver-row i,
.race-side-tower.template-light-theme .side-flag {
  color: #101214;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.race-side-tower.template-light-theme .side-tower-context strong {
  color: #ffffff;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.76);
}

.race-side-tower.template-light-theme .side-driver-row {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.84), transparent 24% 76%, rgba(255, 255, 255, 0.22)),
    linear-gradient(180deg, rgb(255 255 255 / calc(0.7 * var(--banner-panel-alpha))) 0%, rgb(222 229 229 / calc(0.68 * var(--banner-panel-alpha))) 100%);
  border-bottom-color: rgba(0, 0, 0, 0.14);
}

.race-side-tower.template-light-theme .side-driver-row b {
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.62);
}

.race-side-tower.template-light-theme .side-duration strong {
  color: #101214;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 38%),
    rgba(255, 255, 255, 0.34);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.race-side-tower.template-light-theme .side-tower-logo,
.race-side-tower.template-light-theme .side-tower-sponsor {
  background:
    linear-gradient(90deg, #d7dddd 0%, #ffffff 34%, #f8fbfb 64%, #c8d0d0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -12px 18px rgba(0, 0, 0, 0.12);
}

.race-side-tower.template-light-theme .side-tower-logo img,
.race-side-tower.template-light-theme .side-tower-sponsor img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.32));
}

@keyframes side-tower-rows-slide {
  0% {
    opacity: 0.25;
    transform: translateX(-26px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes banner-info-marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.control-body .send-readiness-note {
  min-height: 50px;
}

.control-body .style-grid,
.control-body .banner-control-grid,
.control-body .top3-control-grid,
.control-body .output-info-panels {
  gap: 6px;
}

.control-body .actions {
  gap: 6px;
  margin-top: 7px;
}

.control-body .subpanel-heading,
.control-body .race-ready-topline,
.control-body .panel-heading {
  padding-bottom: 5px;
}

.control-body .operator-health-grid div,
.control-body .race-ready-card,
.control-body .banner-logo-status div,
.control-body .health-grid div {
  padding: 7px 9px;
}

.control-hero-actions {
  min-width: min(560px, 44vw);
  display: grid;
  gap: 8px;
  align-items: end;
}

.control-mode-toggle {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(232, 241, 247, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(0, 0, 0, 0.24);
}

.control-mode-toggle button {
  min-height: 34px;
  font-size: 18px;
}

.control-mode-toggle button.active {
  border-color: color-mix(in srgb, var(--neon-warn) 62%, rgba(255, 255, 255, 0.24));
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1) 34%, rgba(244, 197, 66, 0.14) 62%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, color-mix(in srgb, var(--neon-warn) 34%, #3c3420), rgba(54, 39, 12, 0.88) 54%, rgba(18, 12, 3, 0.94));
}

.is-race-day-mode .podium-panel,
.is-race-day-mode .style-panel,
.is-race-day-mode .upper-left-stack,
.is-race-day-mode .data-panel,
.is-race-day-mode .advanced-panel,
.is-race-day-mode .setup-only-nav {
  display: none;
}

.is-race-day-mode .banner-design-drawer {
  display: none;
}

.is-race-day-mode .control {
  grid-template-areas:
    "hero hero"
    "nav nav"
    "timing timing"
    "output output"
    "story story"
    "banner banner"
    "weather weather";
}

.is-race-day-mode .control-quick-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.is-race-day-mode .banner-panel {
  padding-bottom: 10px;
}

.is-race-day-mode .banner-panel > p {
  display: none;
}

.is-race-day-mode .banner-actions-subpanel {
  margin-bottom: 0;
}

.is-race-day-mode .banner-metric-subpanel {
  display: none;
}

.is-race-day-mode .banner-logo-status {
  display: none;
}

/* Broadcast cockpit layout pass: clearer navigation, stronger grouping, quieter advanced controls. */
.control-quick-nav {
  position: sticky;
  top: 8px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(237, 247, 255, 0.18);
  border-radius: 9px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 34%, rgba(231, 51, 47, 0.05)),
    rgba(3, 8, 12, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 14px 28px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}

.control-quick-nav a {
  min-width: 0;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(232, 241, 247, 0.16);
  border-radius: 6px;
  color: #dce7ec;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(8, 13, 17, 0.78);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -7px 12px rgba(0, 0, 0, 0.24);
}

.control-quick-nav a:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--neon-work) 48%, rgba(255, 255, 255, 0.22));
  box-shadow:
    0 0 14px color-mix(in srgb, var(--neon-work) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -7px 12px rgba(0, 0, 0, 0.22);
}

.control .panel {
  scroll-margin-top: 78px;
}

.control-body .timing-panel,
.control-body .race-ready-panel,
.control-body .output-panel {
  background:
    linear-gradient(118deg, rgba(140, 241, 61, 0.045), transparent 28%, rgba(244, 197, 66, 0.045)),
    linear-gradient(180deg, rgba(14, 22, 27, 0.98), rgba(6, 10, 14, 0.96));
}

.control-body .banner-panel,
.control-body .race-story-panel,
.control-body .weather-ticker-panel,
.control-body .podium-panel {
  background:
    linear-gradient(118deg, rgba(231, 51, 47, 0.08), transparent 26%, rgba(84, 199, 236, 0.035)),
    linear-gradient(180deg, rgba(15, 21, 25, 0.98), rgba(6, 9, 12, 0.96));
}

.control-body .style-panel,
.control-body .data-panel,
.control-body .footer-panel,
.control-body .missing-panel,
.control-body .advanced-panel {
  background:
    linear-gradient(118deg, rgba(84, 199, 236, 0.055), transparent 28%, rgba(255, 255, 255, 0.025)),
    linear-gradient(180deg, rgba(12, 18, 23, 0.95), rgba(5, 8, 11, 0.96));
}

.control-drawer {
  margin-top: 12px;
}

.control-drawer summary {
  width: 100%;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0 16px;
  color: #e7eef2;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-drawer summary::marker {
  color: var(--neon-work);
}

.control-drawer-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(232, 241, 247, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 44%),
    rgba(0, 0, 0, 0.18);
}

.control-body .banner-design-drawer .banner-logo-status {
  margin: 0;
}

@media (max-width: 800px) {
  .control-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

/* Final compact alignment pass for glass selection buttons. */
.control-body .program-buttons button,
.control-body .output-vmix-panel .links a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 0.98;
}

.control-body .program-buttons button {
  min-height: 50px;
  padding: 15px 8px 3px;
}

.control-body .program-buttons button::after {
  top: 4px;
  left: 8px;
  right: 8px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

.control-body .output-vmix-panel .links a {
  min-height: 36px;
  padding: 5px 8px;
}

/* Uniform blue button edge for the control center. */
.control-body button,
.control-body .links a,
.control-body details summary {
  border-left: 3px solid color-mix(in srgb, var(--neon-work) 66%, transparent);
}

.control-body button:hover,
.control-body .links a:hover,
.control-body details summary:hover {
  border-left-color: color-mix(in srgb, var(--neon-work) 88%, rgba(255, 255, 255, 0.22));
}

.control-body button.active,
.control-body .program-buttons button.active,
.control-body .metric-checkbox-grid label:has(input:checked) {
  border-left-color: var(--neon-work);
}

.control-body button.on-program,
.control-body .program-buttons button.on-program,
.control-body .program-buttons button.active.on-program,
.control-body #takeProgram.is-warn {
  border-left-color: var(--neon-warn);
}

.control-body #takeProgram.is-good,
.control-body #sendTopBanner.active,
.control-body .race-ready-action.is-good,
.control-body .race-ready-card.is-good {
  border-left-color: var(--neon-good);
}

.control-body #takeProgram.is-bad,
.control-body .race-ready-action.is-bad,
.control-body .race-ready-card.is-bad {
  border-left-color: var(--neon-bad);
}

.control-body .timing-ready-status-grid .race-ready-action .race-ready-details summary {
  border-left: 0;
}

/* Include quick nav and make the default blue button edge more visible. */
.control-body button,
.control-body .links a,
.control-body .control-quick-nav a,
.control-body details summary {
  border-left-width: 4px;
  border-left-color: color-mix(in srgb, var(--neon-work) 92%, rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--neon-work) 36%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -10px 18px rgba(0, 0, 0, 0.38),
    inset 0 0 18px rgba(255, 255, 255, 0.035),
    0 8px 17px rgba(0, 0, 0, 0.28);
}

.control-body button:hover,
.control-body .links a:hover,
.control-body .control-quick-nav a:hover,
.control-body details summary:hover {
  border-left-color: var(--neon-work);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--neon-work) 48%, transparent),
    0 0 18px color-mix(in srgb, var(--neon-work) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 18px rgba(0, 0, 0, 0.34),
    0 9px 18px rgba(0, 0, 0, 0.3);
}

.control-body button.on-program,
.control-body .program-buttons button.on-program,
.control-body .program-buttons button.active.on-program,
.control-body #takeProgram.is-warn {
  border-left-color: var(--neon-warn);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--neon-warn) 42%, transparent),
    0 0 20px color-mix(in srgb, var(--neon-warn) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -8px 16px rgba(0, 0, 0, 0.3);
}

.control-body button.active:not(.on-program),
.control-body .program-buttons button.active:not(.on-program),
.control-body .metric-checkbox-grid label:has(input:checked) {
  border-left-color: var(--neon-work);
}

.control-body .timing-ready-status-grid .race-ready-action .race-ready-details summary {
  border-left-width: 0;
  box-shadow: none;
}

.control-body .control-lock-toggle {
  width: 100%;
  min-height: 34px;
  font-size: 17px;
}

.control-body .control-lock-toggle.active {
  border-color: color-mix(in srgb, var(--neon-warn) 72%, rgba(255, 255, 255, 0.18));
  border-left-color: var(--neon-warn);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1) 34%, rgba(244, 197, 66, 0.16) 62%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, color-mix(in srgb, var(--neon-warn) 35%, #3c3420), rgba(54, 39, 12, 0.88) 54%, rgba(18, 12, 3, 0.94));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--neon-warn) 44%, transparent),
    0 0 16px color-mix(in srgb, var(--neon-warn) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -9px 16px rgba(0, 0, 0, 0.34);
}

.control-body button.needs-confirm {
  border-color: color-mix(in srgb, var(--neon-warn) 78%, rgba(255, 255, 255, 0.18));
  border-left-color: var(--neon-warn);
  color: #fff3b8;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--neon-warn) 48%, transparent),
    0 0 20px color-mix(in srgb, var(--neon-warn) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -8px 16px rgba(0, 0, 0, 0.3);
}

@media (min-width: 801px) {
  .control-body .send-output-box {
    grid-template-columns: minmax(16px, 0.22fr) minmax(210px, 250px) minmax(210px, 250px) minmax(320px, 1fr);
  }

  .control-body .send-output-box #takeProgram {
    grid-column: 2;
  }

  .control-body .send-output-box #clearProgram {
    grid-column: 3;
  }

  .control-body .send-readiness-note {
    grid-column: 4;
  }
}

/* Race Day cockpit: compact the live operating view without changing setup controls. */
.is-race-day-mode .control-hero {
  padding: 10px 12px;
}

.is-race-day-mode .control-brand {
  gap: 12px;
}

.is-race-day-mode .control-logo {
  width: 150px;
  max-height: 78px;
}

.is-race-day-mode .control-hero h1 {
  font-size: 34px;
}

.is-race-day-mode .control-hero p,
.is-race-day-mode .timing-ready-title p,
.is-race-day-mode .output-heading-copy p,
.is-race-day-mode .race-story-heading p,
.is-race-day-mode .weather-ticker-panel > p {
  display: none;
}

.is-race-day-mode .timing-ready-heading {
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr) minmax(170px, auto);
}

.is-race-day-mode .timing-ready-status-grid {
  grid-auto-rows: minmax(52px, auto);
}

.is-race-day-mode .timing-ready-status-grid .health-summary,
.is-race-day-mode .timing-ready-status-grid .operator-health-grid div,
.is-race-day-mode .timing-ready-status-grid .race-ready-card,
.is-race-day-mode .timing-ready-status-grid .race-ready-action {
  min-height: 52px;
}

.is-race-day-mode .race-intel-strip {
  gap: 6px;
  margin-top: 6px;
}

.is-race-day-mode .race-intel-card {
  min-height: 46px;
  padding: 6px 8px;
}

.is-race-day-mode .output-heading {
  gap: 6px;
  margin-bottom: 6px;
}

.is-race-day-mode .output-topbar {
  grid-template-columns: minmax(210px, 0.23fr) minmax(0, 1fr);
  gap: 10px;
}

.is-race-day-mode .output-vmix-panel {
  margin-top: 8px;
}

.is-race-day-mode .race-story-heading,
.is-race-day-mode .weather-ticker-panel h2 {
  margin-bottom: 6px;
}

.is-race-day-mode .race-story-control-grid {
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr) minmax(220px, 0.34fr);
}

.is-race-day-mode .race-story-action-row {
  grid-template-columns: 1fr;
}

.is-race-day-mode .race-story-preview {
  margin-top: 0;
}

.is-race-day-mode .race-story-preview-head span {
  display: none;
}

.is-race-day-mode .output-info-panels {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 4px;
}

.is-race-day-mode .output-info-panel {
  grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr);
}

.is-race-day-mode .output-ticker-panel .output-info-grid {
  grid-template-columns: minmax(124px, 0.38fr) minmax(0, 1fr) 108px minmax(120px, auto);
}

.is-race-day-mode .output-ticker-panel .size-field .number-stepper {
  max-width: 108px;
  grid-template-columns: minmax(0, 74px) 26px;
}

@media (min-width: 1120px) {
  .is-race-day-mode .control {
    grid-template-columns: minmax(620px, 0.95fr) minmax(420px, 0.65fr);
    grid-template-areas:
      "hero hero"
      "nav nav"
      "timing timing"
      "output output"
      "story weather"
      "banner banner";
  }

  .is-race-day-mode .race-story-panel.full-width,
  .is-race-day-mode .weather-ticker-panel.full-width {
    grid-column: auto;
  }
}

@media (max-width: 1119px) {
  .is-race-day-mode .control {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "nav"
      "timing"
      "output"
      "story"
      "weather"
      "banner";
  }
}

/* Top 3 v2: stable broadcast card system. This overrides the older patched podium CSS. */
.top3-v2,
.top3-v2.is-nameplate-layout,
.top3-v2.is-photo-layout {
  --top3-board-width: 1500px;
  --top3-board-height: 900px;
  --top3-card-side-width: 398px;
  --top3-card-center-width: 438px;
  --top3-card-gap: 42px;
  --top3-podium-width: 1240px;
  --top3-podium-bottom: 214px;
  --top3-base-width: 1320px;
  --top3-base-bottom: 52px;
  --top3-accent: var(--banner-accent-line-color);
  width: var(--top3-board-width) !important;
  height: var(--top3-board-height) !important;
  transform: none !important;
  background: transparent !important;
}

.top3-v2::before {
  left: 50% !important;
  top: 28px !important;
  width: 1160px !important;
  height: 620px !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--top3-accent) 14%, transparent), transparent 26%),
    radial-gradient(ellipse at 50% 60%, rgba(0, 0, 0, 0.44), transparent 58%) !important;
  opacity: 0.9 !important;
}

.top3-v2 .podium-cards,
.top3-v2.is-nameplate-layout .podium-cards,
.top3-v2.is-photo-layout .podium-cards {
  top: 0 !important;
  width: calc((var(--top3-card-side-width) * 2) + var(--top3-card-center-width) + (var(--top3-card-gap) * 2)) !important;
  grid-template-columns: var(--top3-card-side-width) var(--top3-card-center-width) var(--top3-card-side-width) !important;
  gap: var(--top3-card-gap) !important;
}

.top3-v2 .podium-card,
.top3-v2 .podium-card.second,
.top3-v2 .podium-card.third,
.top3-v2 .podium-card.first {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(230, 238, 238, 0.82) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(112deg, transparent 0 35%, rgba(255, 255, 255, 0.16) 44%, transparent 54%),
    linear-gradient(180deg, #3a4040 0%, #151818 56%, #050606 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -14px 22px rgba(0, 0, 0, 0.4),
    0 14px 28px rgba(0, 0, 0, 0.48) !important;
  filter: none !important;
}

.top3-v2 .podium-card.first {
  border-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -15px 23px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--top3-accent) 32%, transparent),
    0 0 28px color-mix(in srgb, var(--top3-accent) 18%, transparent),
    0 16px 31px rgba(0, 0, 0, 0.5) !important;
}

.top3-v2 .podium-card::before {
  left: 18px !important;
  right: 18px !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--top3-accent) 84%, #ffffff 16%), transparent) !important;
}

.top3-v2 .podium-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.24)),
    linear-gradient(108deg, transparent 0 36%, rgba(255, 255, 255, 0.12) 45%, transparent 56%) !important;
}

.top3-v2 .podium-place {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 8;
  width: 52px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
    #050607;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 10px rgba(0, 0, 0, 0.34);
}

.top3-v2 .podium-rank {
  display: none !important;
}

.top3-v2 .podium-info {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.top3-v2 .podium-number,
.top3-v2 .podium-card.second .podium-number,
.top3-v2 .podium-card.third .podium-number,
.top3-v2 .podium-card.first .podium-number {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 54px !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 76px !important;
  color: #c7cdcd !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.14), transparent 32%, transparent 68%, rgba(0, 0, 0, 0.26)),
    linear-gradient(180deg, #424949 0%, #151919 100%) !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 3px 7px rgba(0, 0, 0, 0.72) !important;
  transform: none !important;
}

.top3-v2 .podium-card.first .podium-number {
  height: 58px !important;
  font-size: 52px !important;
}

.top3-v2 .podium-name,
.top3-v2 .podium-card.second .podium-name,
.top3-v2 .podium-card.third .podium-name,
.top3-v2 .podium-card.first .podium-name {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 30px !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 54px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 0.92 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 5px 8px rgba(0, 0, 0, 0.78) !important;
  filter: none !important;
  transform: none !important;
}

.top3-v2 .podium-card.first .podium-name {
  font-size: 58px !important;
}

.top3-v2 .podium-metric {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  color: color-mix(in srgb, var(--top3-accent) 76%, #ffffff 24%);
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-family: "Teko Local", Impact, "Arial Black", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.64);
}

.top3-v2 .podium-metric:empty {
  display: none;
}

.top3-v2.is-nameplate-layout .podium-card,
.top3-v2.is-nameplate-layout .podium-card.second,
.top3-v2.is-nameplate-layout .podium-card.third {
  height: 172px !important;
  grid-template-rows: 1fr !important;
  transform: translateY(170px) !important;
}

.top3-v2.is-nameplate-layout .podium-card.first {
  height: 184px !important;
  transform: translateY(48px) !important;
}

.top3-v2.is-nameplate-layout .podium-photo-frame {
  display: none !important;
}

.top3-v2.is-nameplate-layout .podium-info {
  grid-template-rows: 54px minmax(0, 1fr) 32px !important;
}

.top3-v2.is-nameplate-layout .podium-card.first .podium-info {
  grid-template-rows: 58px minmax(0, 1fr) 34px !important;
}

.top3-v2.is-photo-layout .podium-card,
.top3-v2.is-photo-layout .podium-card.second,
.top3-v2.is-photo-layout .podium-card.third {
  height: 336px !important;
  grid-template-rows: 56px minmax(0, 1fr) 64px !important;
  transform: translateY(104px) !important;
}

.top3-v2.is-photo-layout .podium-card.first {
  height: 360px !important;
  grid-template-rows: 60px minmax(0, 1fr) 68px !important;
  transform: translateY(0) !important;
}

.top3-v2.is-photo-layout .podium-photo-frame {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  background:
    linear-gradient(112deg, transparent 0 35%, rgba(255, 255, 255, 0.14) 44%, transparent 55%),
    linear-gradient(180deg, #303636 0%, #111414 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
}

.top3-v2.is-photo-layout .podium-photo-frame::before,
.top3-v2.is-photo-layout .podium-card.no-photo .podium-photo-frame::before {
  content: attr(data-placeholder) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(255, 255, 255, 0.2) !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 88px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.54) !important;
}

.top3-v2.is-photo-layout .podium-card.has-photo .podium-photo-frame::before {
  opacity: 0 !important;
}

.top3-v2.is-photo-layout .podium-photo-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), transparent 25%, transparent 70%, rgba(0, 0, 0, 0.2)),
    linear-gradient(108deg, transparent 0 36%, rgba(255, 255, 255, 0.15) 45%, transparent 56%) !important;
}

.top3-v2.is-photo-layout .podium-photo-frame img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.top3-v2.is-photo-layout .podium-photo-frame img[hidden] {
  display: none !important;
}

.top3-v2.is-photo-layout .podium-info {
  position: absolute !important;
  inset: 0 !important;
  grid-template-rows: 56px minmax(0, 1fr) 64px !important;
  pointer-events: none !important;
}

.top3-v2.is-photo-layout .podium-card.first .podium-info {
  grid-template-rows: 60px minmax(0, 1fr) 68px !important;
}

.top3-v2.is-photo-layout .podium-number {
  grid-row: 1 !important;
}

.top3-v2.is-photo-layout .podium-name {
  grid-row: 3 !important;
  height: auto !important;
  background:
    linear-gradient(180deg, rgba(8, 10, 10, 0.78), rgba(3, 4, 4, 0.96)) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 44px !important;
}

.top3-v2.is-photo-layout .podium-card.first .podium-name {
  font-size: 48px !important;
}

.top3-v2.is-photo-layout .podium-metric {
  display: none !important;
}

.top3-v2 .qualifier-podium,
.top3-v2.is-nameplate-layout .qualifier-podium,
.top3-v2.is-photo-layout .qualifier-podium {
  bottom: var(--top3-podium-bottom) !important;
  width: var(--top3-podium-width) !important;
  height: 330px !important;
  grid-template-columns: 1fr 1.08fr 1fr !important;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.48)) !important;
}

.top3-v2 .qualifier-step-second,
.top3-v2 .qualifier-step-third {
  height: 220px !important;
}

.top3-v2 .qualifier-step-first {
  height: 330px !important;
}

.top3-v2 .qualifier-step span {
  color: #050505 !important;
  font-size: 136px !important;
}

.top3-v2 .qualifier-step-first span {
  font-size: 166px !important;
}

.top3-v2 .qualifier-base,
.top3-v2.is-nameplate-layout .qualifier-base,
.top3-v2.is-photo-layout .qualifier-base {
  bottom: var(--top3-base-bottom) !important;
  width: var(--top3-base-width) !important;
  height: 164px !important;
  grid-template-rows: 108px 56px !important;
}

.top3-v2 .qualifier-base strong {
  font-size: 82px !important;
}

.top3-v2 .qualifier-base span {
  font-size: 40px !important;
}

body.graphics-theme-light .top3-v2 .podium-card {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.88), transparent 36%, transparent 68%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #ffffff 0%, #eff5f5 58%, #d6e0e0 100%) !important;
  border-color: rgba(10, 14, 15, 0.24) !important;
}

body.graphics-theme-light .top3-v2 .podium-number {
  color: #303738 !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.72), transparent 32%, transparent 68%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #ffffff 0%, #dce7e7 100%) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

body.graphics-theme-light .top3-v2 .podium-name {
  color: #111617 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86), 0 3px 5px rgba(0, 0, 0, 0.18) !important;
}

body.graphics-theme-light .top3-v2.is-photo-layout .podium-name {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(218, 229, 229, 0.96)) !important;
}

/* Top 3 feature board: replaces the literal podium with a modern race-broadcast card layout. */
.top3-feature-board,
.top3-feature-board.is-nameplate-layout,
.top3-feature-board.is-photo-layout {
  --top3-feature-width: 1580px;
  --top3-feature-height: 880px;
  --top3-feature-accent: var(--banner-accent-line-color);
  width: var(--top3-feature-width) !important;
  height: var(--top3-feature-height) !important;
  background: transparent !important;
  overflow: visible !important;
}

.top3-feature-board::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 36px !important;
  width: 1320px !important;
  height: 690px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--top3-feature-accent) 18%, transparent), transparent 25%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.05), transparent 34%),
    radial-gradient(ellipse at 50% 70%, rgba(0, 0, 0, 0.56), transparent 63%) !important;
  opacity: 0.96 !important;
  pointer-events: none !important;
}

.top3-feature-board::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 84px !important;
  width: 1360px !important;
  height: 560px !important;
  transform: translateX(-50%) skewX(-10deg) !important;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 22px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent) !important;
  opacity: 0.42 !important;
  pointer-events: none !important;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 58%, transparent 74%);
}

.top3-feature-board .qualifier-podium,
.top3-feature-board.is-nameplate-layout .qualifier-podium,
.top3-feature-board.is-photo-layout .qualifier-podium {
  display: none !important;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards {
  position: absolute !important;
  left: 50% !important;
  top: 86px !important;
  width: 1420px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 286px 236px !important;
  grid-template-areas:
    "first first"
    "second third" !important;
  gap: 26px !important;
  align-items: stretch !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third,
.top3-feature-board .podium-card.first {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  transform: none !important;
  overflow: hidden !important;
  border: 2px solid rgba(218, 230, 230, 0.7) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.16), transparent 31%, transparent 70%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(53, 60, 60, 0.96) 0%, rgba(21, 25, 25, 0.98) 47%, rgba(4, 5, 5, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -18px 24px rgba(0, 0, 0, 0.34),
    0 16px 34px rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
  animation: top3FeatureIn 420ms ease-out both;
}

.top3-feature-board .podium-card.first {
  grid-area: first !important;
  grid-template-columns: 168px minmax(0, 1fr) 500px !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -20px 26px rgba(0, 0, 0, 0.38),
    0 0 0 1px color-mix(in srgb, var(--top3-feature-accent) 42%, transparent),
    0 0 34px color-mix(in srgb, var(--top3-feature-accent) 22%, transparent),
    0 18px 38px rgba(0, 0, 0, 0.52) !important;
}

.top3-feature-board .podium-card.second {
  grid-area: second !important;
  grid-template-columns: 130px minmax(0, 1fr) 220px !important;
  animation-delay: 90ms;
}

.top3-feature-board .podium-card.third {
  grid-area: third !important;
  grid-template-columns: 130px minmax(0, 1fr) 220px !important;
  animation-delay: 150ms;
}

.top3-feature-board .podium-card::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 0 !important;
  height: 4px !important;
  z-index: 8 !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--top3-feature-accent) 84%, #ffffff 16%), transparent) !important;
  opacity: 0.92 !important;
}

.top3-feature-board .podium-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 25%, transparent 72%, rgba(0, 0, 0, 0.28)),
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.13) 46%, transparent 57%) !important;
}

.top3-feature-board .podium-place {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 9 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(21, 24, 24, 0.96), rgba(3, 4, 4, 0.98)) !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 102px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: 0 7px 10px rgba(0, 0, 0, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset -18px 0 24px rgba(0, 0, 0, 0.22) !important;
}

.top3-feature-board .podium-card.first .podium-place {
  font-size: 136px !important;
}

.top3-feature-board .podium-rank {
  display: none !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board.is-nameplate-layout .podium-info {
  position: relative !important;
  inset: auto !important;
  z-index: 6 !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 74px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  padding: 22px 24px 18px 26px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.top3-feature-board .podium-card.first .podium-info {
  grid-template-rows: 86px minmax(0, 1fr) 54px !important;
  padding: 26px 34px 22px 34px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number,
.top3-feature-board .podium-card.first .podium-number {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: end !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--top3-feature-accent) 18%, #d7dddd 82%) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 48px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 5px 9px rgba(0, 0, 0, 0.72) !important;
  transform: none !important;
}

.top3-feature-board .podium-card.first .podium-number {
  font-size: 66px !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name,
.top3-feature-board .podium-card.first .podium-name {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 64px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 10px rgba(0, 0, 0, 0.78) !important;
  filter: none !important;
  transform: none !important;
}

.top3-feature-board .podium-card.first .podium-name {
  font-size: 86px !important;
}

.top3-feature-board .podium-metric,
.top3-feature-board.is-photo-layout .podium-metric,
.top3-feature-board.is-nameplate-layout .podium-metric {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--top3-feature-accent) 82%, #ffffff 18%) !important;
  border: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 4px 7px rgba(0, 0, 0, 0.64) !important;
}

.top3-feature-board .podium-card.first .podium-metric {
  font-size: 34px !important;
}

.top3-feature-board .podium-metric:empty {
  display: none !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 16px 16px 16px 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, 0.13) 44%, transparent 55%),
    linear-gradient(180deg, #303737 0%, #0a0d0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -22px 26px rgba(0, 0, 0, 0.26) !important;
}

.top3-feature-board .podium-card.first .podium-photo-frame {
  margin: 18px 18px 18px 0 !important;
}

.top3-feature-board .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-photo-frame::before,
.top3-feature-board .podium-card.no-photo .podium-photo-frame::before {
  content: attr(data-placeholder) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(255, 255, 255, 0.18) !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 86px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.58) !important;
}

.top3-feature-board .podium-card.first .podium-photo-frame::before {
  font-size: 112px !important;
}

.top3-feature-board .podium-card.has-photo .podium-photo-frame::before {
  opacity: 0 !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.16), transparent 31%, transparent 68%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(62, 70, 70, 0.98), rgba(11, 13, 13, 0.98)) !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 62px !important;
  opacity: 1 !important;
}

.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before {
  font-size: 78px !important;
}

.top3-feature-board .podium-photo-frame::after,
.top3-feature-board.is-photo-layout .podium-photo-frame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 16%, transparent 88%, rgba(0, 0, 0, 0.18)),
    linear-gradient(112deg, transparent 0 44%, rgba(255, 255, 255, 0.08) 49%, transparent 57%) !important;
}

.top3-feature-board .podium-photo-frame img,
.top3-feature-board.is-photo-layout .podium-photo-frame img {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.top3-feature-board .podium-photo-frame img[hidden],
.top3-feature-board.is-photo-layout .podium-photo-frame img[hidden] {
  display: none !important;
}

.top3-feature-board.is-nameplate-layout .podium-card,
.top3-feature-board.is-nameplate-layout .podium-card.second,
.top3-feature-board.is-nameplate-layout .podium-card.third,
.top3-feature-board.is-nameplate-layout .podium-card.first {
  grid-template-columns: 142px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.first {
  grid-template-columns: 174px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-photo-frame {
  display: none !important;
}

.top3-feature-board.is-nameplate-layout .podium-info {
  grid-column: 2 !important;
  padding-right: 34px !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base {
  position: absolute !important;
  left: 50% !important;
  bottom: 58px !important;
  width: 1420px !important;
  height: 126px !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 0 36px !important;
  overflow: hidden !important;
  border: 2px solid rgba(210, 222, 222, 0.66) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.14), transparent 33%, transparent 68%, rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, rgba(43, 49, 49, 0.98), rgba(13, 16, 16, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -14px 22px rgba(0, 0, 0, 0.36),
    0 14px 28px rgba(0, 0, 0, 0.44) !important;
}

.top3-feature-board .qualifier-base::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  top: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--top3-feature-accent) 86%, #ffffff 14%), transparent) !important;
  opacity: 0.95 !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong {
  min-width: 0 !important;
  color: #ffffff !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 82px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.17),
    0 6px 10px rgba(0, 0, 0, 0.75) !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span {
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  color: color-mix(in srgb, var(--top3-feature-accent) 30%, #ffffff 70%) !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 5px 8px rgba(0, 0, 0, 0.68) !important;
}

.top3-feature-board .qualifier-base b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.graphics-theme-light .top3-feature-board .podium-card,
body.graphics-theme-light .top3-feature-board .podium-card.first,
body.graphics-theme-light .top3-feature-board .podium-card.second,
body.graphics-theme-light .top3-feature-board .podium-card.third {
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.9), transparent 33%, transparent 70%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(230, 238, 238, 0.98) 47%, rgba(201, 213, 213, 0.98) 100%) !important;
  border-color: rgba(13, 18, 19, 0.28) !important;
}

body.graphics-theme-light .top3-feature-board .podium-place {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 36%),
    linear-gradient(180deg, #333c3d, #060707) !important;
}

body.graphics-theme-light .top3-feature-board .podium-number {
  color: color-mix(in srgb, var(--top3-feature-accent) 24%, #2b3334 76%) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 4px 8px rgba(0, 0, 0, 0.18) !important;
}

body.graphics-theme-light .top3-feature-board .podium-name {
  color: #111617 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86), 0 4px 8px rgba(0, 0, 0, 0.18) !important;
}

body.graphics-theme-light .top3-feature-board .podium-metric {
  color: color-mix(in srgb, var(--top3-feature-accent) 64%, #161b1c 36%) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body.graphics-theme-light .top3-feature-board .qualifier-base {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.92), transparent 33%, transparent 68%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(218, 228, 228, 0.98)) !important;
  border-color: rgba(10, 14, 15, 0.24) !important;
}

body.graphics-theme-light .top3-feature-board .qualifier-base strong,
body.graphics-theme-light .top3-feature-board .qualifier-base span {
  color: #111617 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 4px 8px rgba(0, 0, 0, 0.16) !important;
}

@keyframes top3FeatureIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Top 3 stacked board concept: three left-aligned horizontal race cards. */
.top3-feature-board,
.top3-feature-board.is-nameplate-layout,
.top3-feature-board.is-photo-layout {
  --top3-stack-left: 400px;
  --top3-stack-width: 1120px;
  --top3-stack-accent: var(--banner-accent-line-color);
}

.top3-feature-board::before {
  top: 34px !important;
  left: var(--top3-stack-left) !important;
  width: 1040px !important;
  height: 620px !important;
  transform: none !important;
  background:
    radial-gradient(ellipse at 22% 6%, color-mix(in srgb, var(--top3-stack-accent) 18%, transparent), transparent 28%),
    radial-gradient(ellipse at 36% 58%, rgba(255, 255, 255, 0.055), transparent 34%),
    radial-gradient(ellipse at 28% 70%, rgba(0, 0, 0, 0.58), transparent 66%) !important;
}

.top3-feature-board::after {
  left: var(--top3-stack-left) !important;
  top: 72px !important;
  width: 1040px !important;
  height: 570px !important;
  transform: skewX(-10deg) !important;
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%) !important;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards {
  left: 80px !important;
  top: 82px !important;
  width: var(--top3-stack-width) !important;
  height: 540px !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 190px 162px 142px !important;
  grid-template-areas:
    "first"
    "second"
    "third" !important;
  gap: 26px !important;
  align-items: start !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third,
.top3-feature-board .podium-card.first {
  justify-self: start !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.17), transparent 29%, transparent 68%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(57, 64, 64, 0.98) 0%, rgba(22, 26, 26, 0.98) 48%, rgba(4, 5, 5, 0.98) 100%) !important;
}

.top3-feature-board .podium-card.first {
  grid-area: first !important;
  width: 100% !important;
  grid-template-columns: 150px minmax(0, 1fr) 330px !important;
}

.top3-feature-board .podium-card.second {
  grid-area: second !important;
  width: 86% !important;
  grid-template-columns: 122px minmax(0, 1fr) 250px !important;
}

.top3-feature-board .podium-card.third {
  grid-area: third !important;
  width: 72% !important;
  grid-template-columns: 112px minmax(0, 1fr) 210px !important;
}

.top3-feature-board .podium-card::before {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--top3-stack-accent), color-mix(in srgb, var(--top3-stack-accent) 42%, transparent), transparent 84%) !important;
}

.top3-feature-board .podium-place {
  font-size: 88px !important;
}

.top3-feature-board .podium-card.first .podium-place {
  font-size: 116px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board.is-nameplate-layout .podium-info {
  padding: 18px 28px 16px 30px !important;
  grid-template-rows: 46px minmax(0, 1fr) 34px !important;
}

.top3-feature-board .podium-card.first .podium-info {
  padding: 22px 34px 18px 36px !important;
  grid-template-rows: 54px minmax(0, 1fr) 38px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number,
.top3-feature-board .podium-card.first .podium-number {
  align-items: end !important;
  font-size: 38px !important;
}

.top3-feature-board .podium-card.first .podium-number {
  font-size: 50px !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name,
.top3-feature-board .podium-card.first .podium-name {
  justify-content: flex-start !important;
  font-size: 58px !important;
}

.top3-feature-board .podium-card.first .podium-name {
  font-size: 78px !important;
}

.top3-feature-board .podium-metric,
.top3-feature-board.is-photo-layout .podium-metric,
.top3-feature-board.is-nameplate-layout .podium-metric {
  font-size: 24px !important;
}

.top3-feature-board .podium-card.first .podium-metric {
  font-size: 30px !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame {
  margin: 12px 12px 12px 0 !important;
  border-radius: 6px !important;
}

.top3-feature-board .podium-card.first .podium-photo-frame {
  margin: 14px 14px 14px 0 !important;
}

.top3-feature-board.is-nameplate-layout .podium-card,
.top3-feature-board.is-nameplate-layout .podium-card.second,
.top3-feature-board.is-nameplate-layout .podium-card.third,
.top3-feature-board.is-nameplate-layout .podium-card.first {
  grid-template-columns: 140px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.first {
  grid-template-columns: 168px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.second {
  width: 86% !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.third {
  width: 72% !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base {
  left: 80px !important;
  bottom: 74px !important;
  width: 1080px !important;
  height: 112px !important;
  transform: none !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px) !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong {
  font-size: 70px !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span {
  font-size: 36px !important;
}

/* Top 3 stacked board polish: force true horizontal rows, clear old podium/photo inheritance. */
.top3-feature-board .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: 86px !important;
  width: var(--top3-stack-width) !important;
  height: auto !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 188px 162px 148px !important;
  gap: 24px !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third,
.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card,
.top3-feature-board.is-photo-layout .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.first,
.top3-feature-board.is-nameplate-layout .podium-card,
.top3-feature-board.is-nameplate-layout .podium-card.second,
.top3-feature-board.is-nameplate-layout .podium-card.third,
.top3-feature-board.is-nameplate-layout .podium-card.first {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  transform: none !important;
  grid-template-rows: 1fr !important;
  align-self: stretch !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-stack-width) !important;
  grid-template-columns: 126px minmax(0, 1fr) 250px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: 980px !important;
  grid-template-columns: 106px minmax(0, 1fr) 216px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: 840px !important;
  grid-template-columns: 98px minmax(0, 1fr) 184px !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.first {
  width: var(--top3-stack-width) !important;
  grid-template-columns: 126px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.second {
  width: 980px !important;
  grid-template-columns: 106px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.third {
  width: 840px !important;
  grid-template-columns: 98px minmax(0, 1fr) !important;
}

.top3-feature-board .podium-place,
.top3-feature-board .podium-card.second .podium-place,
.top3-feature-board .podium-card.third .podium-place,
.top3-feature-board .podium-card.first .podium-place {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: auto !important;
  height: auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board.is-nameplate-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info {
  position: relative !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 16px 30px !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-card.first .podium-info {
  padding: 22px 36px !important;
  gap: 9px !important;
}

.top3-feature-board .podium-card.third .podium-info {
  gap: 4px !important;
  padding: 12px 28px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number,
.top3-feature-board .podium-card.first .podium-number {
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  font-size: 40px !important;
  line-height: 0.92 !important;
}

.top3-feature-board .podium-card.first .podium-number {
  font-size: 52px !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name,
.top3-feature-board .podium-card.first .podium-name {
  flex: 0 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  font-size: 60px !important;
  line-height: 0.96 !important;
}

.top3-feature-board .podium-card.first .podium-name {
  font-size: 78px !important;
}

.top3-feature-board .podium-card.third .podium-name {
  font-size: 46px !important;
  line-height: 1.08 !important;
}

.top3-feature-board .podium-card.third .podium-number {
  font-size: 34px !important;
}

.top3-feature-board .podium-card.third .podium-metric {
  font-size: 21px !important;
}

.top3-feature-board .podium-metric,
.top3-feature-board.is-photo-layout .podium-metric,
.top3-feature-board.is-nameplate-layout .podium-metric {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  display: block !important;
  font-size: 25px !important;
}

.top3-feature-board .podium-card.first .podium-metric {
  font-size: 31px !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame,
.top3-feature-board .podium-card.first .podium-photo-frame {
  position: relative !important;
  inset: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  margin: 10px 10px 10px 0 !important;
}

.top3-feature-board.is-nameplate-layout .podium-photo-frame {
  display: none !important;
}

.top3-feature-board .podium-photo-frame img,
.top3-feature-board.is-photo-layout .podium-photo-frame img {
  object-fit: contain !important;
  object-position: center center !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base {
  top: 678px !important;
  bottom: auto !important;
  left: var(--top3-stack-left) !important;
  width: 840px !important;
  height: 112px !important;
}

/* Top 3 stacked final alignment pass. Keep this block last so the concept stays coherent. */
.top3-feature-board,
.top3-feature-board.is-photo-layout,
.top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1120px;
  --top3-row-one-width: 1120px;
  --top3-row-two-width: 980px;
  --top3-row-three-width: 840px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
  --top3-stack-accent: var(--banner-accent-line-color);
}

.top3-feature-board::before {
  left: var(--top3-stack-left) !important;
  width: var(--top3-stack-width) !important;
}

.top3-feature-board::after {
  left: var(--top3-stack-left) !important;
  width: var(--top3-stack-width) !important;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: 86px !important;
  width: var(--top3-stack-width) !important;
  grid-template-rows: 176px 158px 148px !important;
  gap: 24px !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.first,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third {
  overflow: hidden !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 118px minmax(0, 1fr) 238px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 214px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 100px minmax(0, 1fr) 194px !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
}

.top3-feature-board.is-nameplate-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 100px minmax(0, 1fr) !important;
}

.top3-feature-board .podium-card::after {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 22%, transparent 82%, rgba(0, 0, 0, 0.16)),
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.08) 52%, transparent 60%) !important;
}

.top3-feature-board .podium-place {
  z-index: 5 !important;
  font-size: 82px !important;
}

.top3-feature-board .podium-card.first .podium-place {
  font-size: 82px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board .podium-card.second .podium-info,
.top3-feature-board .podium-card.third .podium-info {
  z-index: 5 !important;
  gap: 5px !important;
  padding: 14px 28px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number {
  font-size: 38px !important;
  line-height: 0.96 !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name {
  font-size: 54px !important;
  line-height: 0.98 !important;
}

.top3-feature-board .podium-metric,
.top3-feature-board .podium-card.first .podium-metric,
.top3-feature-board .podium-card.second .podium-metric,
.top3-feature-board .podium-card.third .podium-metric {
  font-size: 23px !important;
  line-height: 1 !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame,
.top3-feature-board .podium-card.first .podium-photo-frame,
.top3-feature-board .podium-card.second .podium-photo-frame,
.top3-feature-board .podium-card.third .podium-photo-frame {
  z-index: 5 !important;
  margin: 10px 10px 10px 0 !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-photo-frame::after,
.top3-feature-board.is-photo-layout .podium-photo-frame::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 18%, transparent 88%, rgba(0, 0, 0, 0.16)),
    linear-gradient(112deg, transparent 0 47%, rgba(255, 255, 255, 0.07) 51%, transparent 59%) !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.second.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.third.no-photo .podium-photo-frame::before {
  left: 50% !important;
  top: 50% !important;
  width: 92% !important;
  max-width: 92% !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 44px !important;
  line-height: 0.9 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.top3-feature-board .podium-photo-frame img,
.top3-feature-board.is-photo-layout .podium-photo-frame img {
  object-fit: contain !important;
  object-position: center center !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: 662px !important;
  width: var(--top3-row-one-width) !important;
  height: 112px !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong {
  font-size: 58px !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span {
  font-size: 34px !important;
}

/* Top 3 feature board final correction: centered stack, uniform type, no timing metric line. */
.top3-feature-board,
.top3-feature-board.is-photo-layout,
.top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1120px;
  --top3-row-one-width: 1120px;
  --top3-row-two-width: 980px;
  --top3-row-three-width: 840px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
}

.top3-feature-board::before {
  left: var(--top3-stack-left) !important;
  width: var(--top3-stack-width) !important;
  transform: none !important;
}

.top3-feature-board::after {
  left: var(--top3-stack-left) !important;
  width: var(--top3-stack-width) !important;
  transform: none !important;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: 86px !important;
  width: var(--top3-stack-width) !important;
  transform: none !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 176px 158px 148px !important;
  grid-template-areas:
    "first"
    "second"
    "third" !important;
  gap: 24px !important;
  justify-items: start !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.first,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third {
  height: 100% !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 116px minmax(0, 1fr) 248px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 226px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 100px minmax(0, 1fr) 204px !important;
}

.top3-feature-board .podium-card::after {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 84%, rgba(0, 0, 0, 0.16)),
    linear-gradient(112deg, transparent 0 48%, rgba(255, 255, 255, 0.07) 52%, transparent 61%) !important;
}

.top3-feature-board .podium-place {
  z-index: 6 !important;
  font-size: 82px !important;
  line-height: 1 !important;
}

.top3-feature-board .podium-card.first .podium-place,
.top3-feature-board .podium-card.second .podium-place,
.top3-feature-board .podium-card.third .podium-place {
  font-size: 82px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board .podium-card.second .podium-info,
.top3-feature-board .podium-card.third .podium-info {
  z-index: 6 !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 24px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number {
  font-size: 44px !important;
  line-height: 0.95 !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name {
  font-size: 64px !important;
  line-height: 0.98 !important;
}

.top3-feature-board .podium-metric,
.top3-feature-board .podium-card.first .podium-metric,
.top3-feature-board .podium-card.second .podium-metric,
.top3-feature-board .podium-card.third .podium-metric,
.top3-feature-board.is-photo-layout .podium-metric,
.top3-feature-board.is-nameplate-layout .podium-metric {
  display: none !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame,
.top3-feature-board .podium-card.first .podium-photo-frame,
.top3-feature-board .podium-card.second .podium-photo-frame,
.top3-feature-board .podium-card.third .podium-photo-frame {
  z-index: 6 !important;
  margin: 10px 10px 10px 0 !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-photo-frame::after,
.top3-feature-board.is-photo-layout .podium-photo-frame::after {
  content: none !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.second.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.third.no-photo .podium-photo-frame::before {
  width: 92% !important;
  max-width: 92% !important;
  font-size: 48px !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before {
  font-size: 54px !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: 650px !important;
  width: var(--top3-row-one-width) !important;
  height: 122px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 76px 46px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 34px !important;
  overflow: hidden !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 58px !important;
  line-height: 0.96 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 32px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Top 3 feature board broadcast-safe sizing. Keep this last. */
.top3-feature-board,
.top3-feature-board.is-photo-layout,
.top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1180px;
  --top3-row-one-width: 1180px;
  --top3-row-two-width: 1040px;
  --top3-row-three-width: 900px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
  width: 1920px !important;
  height: 1080px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: 112px !important;
  width: var(--top3-stack-width) !important;
  grid-template-rows: 164px 154px 144px !important;
  gap: 24px !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 116px minmax(0, 1fr) 250px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 230px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 100px minmax(0, 1fr) 214px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board .podium-card.second .podium-info,
.top3-feature-board .podium-card.third .podium-info {
  justify-content: center !important;
  padding: 12px 26px !important;
  gap: 8px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number {
  font-size: 50px !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name {
  font-size: 70px !important;
  line-height: 0.95 !important;
}

.top3-feature-board .podium-card.first .podium-name {
  font-size: 74px !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.second.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.third.no-photo .podium-photo-frame::before {
  font-size: 62px !important;
  width: 96% !important;
  max-width: 96% !important;
}

.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before {
  font-size: 68px !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: 674px !important;
  width: var(--top3-row-one-width) !important;
  height: 126px !important;
  grid-template-rows: 76px 50px !important;
}

.top3-feature-board .qualifier-base b,
.top3-feature-board .qualifier-base b.class-marquee {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.top3-feature-board .qualifier-base .class-marquee-track {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.class-marquee {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.class-marquee-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  animation: banner-info-marquee 13s linear infinite;
  will-change: transform;
}

.class-marquee-track span {
  flex: 0 0 auto;
  padding-right: 56px;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-shadow: inherit;
  text-transform: inherit;
}

.lineup-footer > span.class-marquee,
.top-five-footer strong.class-marquee,
.lower-third .detail.class-marquee,
.sub.class-marquee,
.lineup-session.class-marquee {
  width: 100%;
}

/* Top 3 stacked board final spacing and readability pass. Keep this at the end. */
.top3-feature-board,
.top3-feature-board.is-photo-layout,
.top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1180px;
  --top3-row-one-width: 1180px;
  --top3-row-two-width: 1040px;
  --top3-row-three-width: 900px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
  --top3-stack-top: 172px;
  --top3-base-top: 742px;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: var(--top3-stack-top) !important;
  width: var(--top3-stack-width) !important;
  grid-template-rows: 164px 154px 144px !important;
  gap: 24px !important;
  overflow: visible !important;
}

.top3-feature-board .podium-card,
.top3-feature-board .podium-card.first,
.top3-feature-board .podium-card.second,
.top3-feature-board .podium-card.third {
  transform: none !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 116px minmax(0, 1fr) 260px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 244px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 100px minmax(0, 1fr) 228px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board .podium-card.second .podium-info,
.top3-feature-board .podium-card.third .podium-info {
  justify-content: center !important;
  padding: 12px 28px !important;
  gap: 8px !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number {
  font-size: 54px !important;
  line-height: 0.95 !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name {
  font-size: 74px !important;
  line-height: 0.94 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.second.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.third.no-photo .podium-photo-frame::before {
  width: 94% !important;
  max-width: 94% !important;
  font-size: 78px !important;
  line-height: 0.9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="medium"]::before,
.top3-feature-board .podium-photo-frame[data-placeholder-size="long"]::before {
  font-size: 70px !important;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="long"]::before {
  font-size: 62px !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: var(--top3-base-top) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: var(--top3-row-one-width) !important;
  height: 146px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 84px 62px !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 36px !important;
  overflow: hidden !important;
  z-index: 20 !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong {
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 58px !important;
  line-height: 0.92 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #f4f6f4 !important;
  font-size: 36px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.top3-feature-board .qualifier-base b,
.top3-feature-board .qualifier-base b.class-marquee {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Top 3 stacked board correction pass: narrower, cleaner, and fully visible. */
.top3-feature-board,
.top3-feature-board.is-photo-layout,
.top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1120px;
  --top3-row-one-width: 1120px;
  --top3-row-two-width: 990px;
  --top3-row-three-width: 860px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
  --top3-stack-top: 172px;
  --top3-base-top: 716px;
}

.top3-feature-board .podium-cards,
.top3-feature-board.is-photo-layout .podium-cards,
.top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: var(--top3-stack-top) !important;
  width: var(--top3-stack-width) !important;
  grid-template-rows: 164px 154px 144px !important;
  gap: 24px !important;
  overflow: visible !important;
  transform: none !important;
}

.top3-feature-board .podium-card.first,
.top3-feature-board.is-photo-layout .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 224px !important;
}

.top3-feature-board .podium-card.second,
.top3-feature-board.is-photo-layout .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 214px !important;
}

.top3-feature-board .podium-card.third,
.top3-feature-board.is-photo-layout .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 204px !important;
}

.top3-feature-board .podium-info,
.top3-feature-board.is-photo-layout .podium-info,
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board .podium-card.second .podium-info,
.top3-feature-board .podium-card.third .podium-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 14px 24px 14px 28px !important;
  gap: 2px !important;
  overflow: visible !important;
}

.top3-feature-board .podium-rank,
.top3-feature-board .podium-metric {
  display: none !important;
}

.top3-feature-board .podium-number,
.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board .podium-card.second .podium-number,
.top3-feature-board .podium-card.third .podium-number {
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: end !important;
  justify-self: stretch !important;
  font-size: 54px !important;
  line-height: 0.9 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.top3-feature-board .podium-name,
.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board .podium-card.second .podium-name,
.top3-feature-board .podium-card.third .podium-name {
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: center !important;
  justify-self: stretch !important;
  font-size: 74px !important;
  line-height: 0.92 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame,
.top3-feature-board .podium-card.first .podium-photo-frame,
.top3-feature-board .podium-card.second .podium-photo-frame,
.top3-feature-board .podium-card.third .podium-photo-frame {
  margin: 14px 14px 14px 0 !important;
  overflow: hidden !important;
}

.top3-feature-board .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-card.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.first.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.second.no-photo .podium-photo-frame::before,
.top3-feature-board .podium-card.third.no-photo .podium-photo-frame::before {
  width: 88% !important;
  max-width: 88% !important;
  font-size: 64px !important;
  line-height: 0.9 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="medium"]::before,
.top3-feature-board .podium-photo-frame[data-placeholder-size="long"]::before {
  font-size: 58px !important;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="long"]::before {
  font-size: 52px !important;
}

.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: var(--top3-base-top) !important;
  width: var(--top3-row-one-width) !important;
  height: 176px !important;
  grid-template-rows: 84px 92px !important;
  padding: 0 38px 18px !important;
  overflow: hidden !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  color: #f4f6f4 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

/* Top 3 first-place lane fix: keep the number above the name like rows 2 and 3. */
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board.is-photo-layout .podium-card.first .podium-info {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board.is-photo-layout .podium-card.first .podium-number {
  position: absolute !important;
  left: 34px !important;
  top: 8px !important;
  right: 28px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  font-size: 54px !important;
  line-height: 0.9 !important;
  overflow: visible !important;
}

.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board.is-photo-layout .podium-card.first .podium-name {
  position: absolute !important;
  left: 34px !important;
  top: 62px !important;
  right: 28px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  font-size: 74px !important;
  line-height: 0.92 !important;
  overflow: visible !important;
}

/* Top 3 info bar touch-up: larger title and better class-name seating. */
.top3-feature-board .qualifier-base,
.top3-feature-board.is-photo-layout .qualifier-base,
.top3-feature-board.is-nameplate-layout .qualifier-base {
  grid-template-rows: 94px 82px !important;
  padding: 0 46px 20px !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong {
  font-size: 78px !important;
  line-height: 0.9 !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-items: flex-start !important;
  padding-top: 6px !important;
}

/* Classic Top 3: match the original banner language with black/silver panels and red accents. */
body.graphics-theme-classic .top3-feature-board,
body.graphics-theme-classic .top3-feature-board.is-photo-layout,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout {
  --top3-stack-width: 1120px;
  --top3-row-one-width: 1120px;
  --top3-row-two-width: 1000px;
  --top3-row-three-width: 880px;
  --top3-stack-left: calc((100% - var(--top3-stack-width)) / 2);
  --top3-stack-top: 166px;
  --top3-base-top: 716px;
}

body.graphics-theme-classic .top3-feature-board::before {
  left: var(--top3-stack-left) !important;
  top: 122px !important;
  width: var(--top3-stack-width) !important;
  height: 650px !important;
  transform: none !important;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.08), transparent 42%),
    radial-gradient(ellipse at 50% 70%, rgba(0, 0, 0, 0.68), transparent 68%) !important;
  opacity: 0.95 !important;
}

body.graphics-theme-classic .top3-feature-board::after {
  left: var(--top3-stack-left) !important;
  top: 142px !important;
  width: var(--top3-stack-width) !important;
  height: 570px !important;
  transform: none !important;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 18px) !important;
  opacity: 0.35 !important;
}

body.graphics-theme-classic .top3-feature-board .podium-cards,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .podium-cards,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .podium-cards {
  left: var(--top3-stack-left) !important;
  top: var(--top3-stack-top) !important;
  width: var(--top3-stack-width) !important;
  grid-template-rows: 164px 154px 144px !important;
  gap: 24px !important;
  overflow: visible !important;
}

body.graphics-theme-classic .top3-feature-board .podium-card,
body.graphics-theme-classic .top3-feature-board .podium-card.first,
body.graphics-theme-classic .top3-feature-board .podium-card.second,
body.graphics-theme-classic .top3-feature-board .podium-card.third {
  border: 2px solid rgba(214, 222, 222, 0.72) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 21%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.12), transparent 31%, transparent 72%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(46, 52, 52, 0.98) 0%, rgba(14, 17, 17, 0.98) 48%, rgba(3, 4, 4, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -18px 24px rgba(0, 0, 0, 0.48),
    0 11px 20px rgba(0, 0, 0, 0.5) !important;
}

body.graphics-theme-classic .top3-feature-board .podium-card.first {
  width: var(--top3-row-one-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 224px !important;
}

body.graphics-theme-classic .top3-feature-board .podium-card.second {
  width: var(--top3-row-two-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 214px !important;
}

body.graphics-theme-classic .top3-feature-board .podium-card.third {
  width: var(--top3-row-three-width) !important;
  grid-template-columns: 108px minmax(0, 1fr) 204px !important;
}

body.graphics-theme-classic .top3-feature-board .podium-card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent 0%, var(--banner-accent-line-color) 18%, var(--banner-accent-line-color) 82%, transparent 100%) !important;
  opacity: 1 !important;
}

body.graphics-theme-classic .top3-feature-board .podium-place {
  display: grid !important;
  place-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  color: #ffffff !important;
  font-size: 82px !important;
  line-height: 1 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, #2a3030 0%, #050606 100%) !important;
  text-shadow: 0 5px 7px rgba(0, 0, 0, 0.82) !important;
}

body.graphics-theme-classic .top3-feature-board .podium-info,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .podium-info,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-info,
body.graphics-theme-classic .top3-feature-board .podium-card.second .podium-info,
body.graphics-theme-classic .top3-feature-board .podium-card.third .podium-info {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 14px 24px 14px 30px !important;
  gap: 2px !important;
  overflow: visible !important;
}

body.graphics-theme-classic .top3-feature-board .podium-number,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-number,
body.graphics-theme-classic .top3-feature-board .podium-card.second .podium-number,
body.graphics-theme-classic .top3-feature-board .podium-card.third .podium-number {
  position: static !important;
  display: block !important;
  width: 100% !important;
  color: #d6dada !important;
  font-size: 54px !important;
  line-height: 0.9 !important;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.8) !important;
}

body.graphics-theme-classic .top3-feature-board .podium-name,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-name,
body.graphics-theme-classic .top3-feature-board .podium-card.second .podium-name,
body.graphics-theme-classic .top3-feature-board .podium-card.third .podium-name {
  position: static !important;
  display: block !important;
  width: 100% !important;
  color: #ffffff !important;
  font-size: 74px !important;
  line-height: 0.92 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 8px rgba(0, 0, 0, 0.82) !important;
}

body.graphics-theme-classic .top3-feature-board .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.second .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.third .podium-photo-frame {
  margin: 14px 14px 14px 0 !important;
  border: 1px solid rgba(214, 222, 222, 0.42) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.13), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, #555d5d 0%, #151a1a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -20px 22px rgba(0, 0, 0, 0.38) !important;
}

body.graphics-theme-classic .top3-feature-board .podium-photo-frame::after,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .podium-photo-frame::after {
  content: none !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base {
  left: var(--top3-stack-left) !important;
  top: var(--top3-base-top) !important;
  width: var(--top3-row-one-width) !important;
  height: 176px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 94px 82px !important;
  padding: 0 46px 20px !important;
  border: 2px solid rgba(214, 222, 222, 0.72) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(42, 48, 48, 0.98), rgba(4, 5, 5, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -18px 24px rgba(0, 0, 0, 0.46),
    0 14px 25px rgba(0, 0, 0, 0.46) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  top: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, var(--banner-accent-line-color), transparent) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base strong {
  color: #ffffff !important;
  font-size: 78px !important;
  line-height: 0.9 !important;
  text-align: center !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 6px !important;
  color: #ffffff !important;
  font-size: 40px !important;
  text-align: center !important;
}

/* Classic Top 3 silver info bar. Dark and light themes keep their current base styling. */
body.graphics-theme-classic .top3-feature-board .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base {
  grid-template-rows: 106px 70px !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(211, 216, 216, 0.96) 46%, rgba(150, 158, 158, 0.98) 100%) !important;
  border-color: rgba(232, 236, 236, 0.9) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -18px 26px rgba(0, 0, 0, 0.22),
    0 14px 25px rgba(0, 0, 0, 0.48) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base::before {
  left: 28px !important;
  right: 28px !important;
  top: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(231, 51, 47, 0.9), transparent) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base strong {
  align-self: center !important;
  color: #050606 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 3px 5px rgba(0, 0, 0, 0.18) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 0 34px !important;
  background: transparent !important;
  border-top: 1px solid rgba(231, 51, 47, 0.48) !important;
  color: #050606 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.18) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span b,
body.graphics-theme-classic .top3-feature-board .qualifier-base .class-marquee-track {
  color: #050606 !important;
}

/* Classic Top 3 clean silver plate: no dark shadow bands behind title or class. */
body.graphics-theme-classic .top3-feature-board .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 236, 236, 0.98) 42%, rgba(183, 190, 190, 0.98) 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 16px rgba(0, 0, 0, 0.12),
    0 14px 25px rgba(0, 0, 0, 0.46) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base strong,
body.graphics-theme-classic .top3-feature-board .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base span {
  background: transparent !important;
  color: #070808 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 4px rgba(0, 0, 0, 0.16) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span {
  border-top: 1px solid rgba(231, 51, 47, 0.5) !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span b,
body.graphics-theme-classic .top3-feature-board .qualifier-base .class-marquee-track,
body.graphics-theme-classic .top3-feature-board .qualifier-base .class-marquee-track span {
  background: transparent !important;
  color: #070808 !important;
  text-shadow: inherit !important;
}

/* Let the standalone Top 3 browser page pan around the full 1920x1080 overlay. */
body.top3-page {
  min-width: 1920px !important;
  min-height: 1080px !important;
  overflow: auto !important;
}

body.top3-page .podium-overlay {
  width: 1920px !important;
  height: 1080px !important;
  min-width: 1920px !important;
  min-height: 1080px !important;
  overflow: visible !important;
}

/* Top 3 title strip font test: use the uploaded Built Titling only on the title/info bar. */
.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong,
.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span,
.top3-feature-board .qualifier-base b,
.top3-feature-board .qualifier-base .class-marquee-track,
.top3-feature-board .qualifier-base .class-marquee-track span {
  font-family: "Built Titling Local", "Teko Local", Impact, "Arial Black", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.top3-feature-board .qualifier-base strong,
.top3-feature-board.is-photo-layout .qualifier-base strong,
.top3-feature-board.is-nameplate-layout .qualifier-base strong {
  font-style: italic !important;
}

.top3-feature-board .qualifier-base span,
.top3-feature-board.is-photo-layout .qualifier-base span,
.top3-feature-board.is-nameplate-layout .qualifier-base span,
.top3-feature-board .qualifier-base b,
.top3-feature-board .qualifier-base .class-marquee-track,
.top3-feature-board .qualifier-base .class-marquee-track span {
  font-style: normal !important;
}

/* Classic Top 3 class strip: give the new font enough vertical room. */
body.graphics-theme-classic .top3-feature-board .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base {
  grid-template-rows: 92px 84px !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .qualifier-base span,
body.graphics-theme-classic .top3-feature-board.is-nameplate-layout .qualifier-base span {
  align-items: center !important;
  padding: 8px 42px 10px !important;
  line-height: 1.08 !important;
}

body.graphics-theme-classic .top3-feature-board .qualifier-base b,
body.graphics-theme-classic .top3-feature-board .qualifier-base b.class-marquee,
body.graphics-theme-classic .top3-feature-board .qualifier-base .class-marquee-track,
body.graphics-theme-classic .top3-feature-board .qualifier-base .class-marquee-track span {
  line-height: 1.08 !important;
}

/* Top 3 row normalization: position 1 should behave exactly like rows 2 and 3. */
.top3-feature-board .podium-card.first .podium-info,
.top3-feature-board.is-photo-layout .podium-card.first .podium-info,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-info {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  padding: 14px 24px 14px 30px !important;
  gap: 2px !important;
  overflow: visible !important;
}

.top3-feature-board .podium-card.first .podium-number,
.top3-feature-board.is-photo-layout .podium-card.first .podium-number,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-number {
  position: static !important;
  grid-row: 1 !important;
  display: block !important;
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  font-size: 54px !important;
  line-height: 0.9 !important;
  overflow: visible !important;
}

.top3-feature-board .podium-card.first .podium-name,
.top3-feature-board.is-photo-layout .podium-card.first .podium-name,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-name {
  position: static !important;
  grid-row: 2 !important;
  display: block !important;
  align-self: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  font-size: 74px !important;
  line-height: 0.92 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Top 3 photo well: make the photo/number area part of the bar instead of a separate tile. */
.top3-feature-board .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-photo-frame,
.top3-feature-board .podium-card.first .podium-photo-frame,
.top3-feature-board .podium-card.second .podium-photo-frame,
.top3-feature-board .podium-card.third .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board.is-photo-layout .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.first .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.second .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.third .podium-photo-frame {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(214, 222, 222, 0.28) !important;
  border-radius: 0 5px 5px 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.12), transparent 34%, transparent 70%, rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, rgba(76, 84, 84, 0.95), rgba(5, 7, 7, 0.98)) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.13),
    inset 0 -18px 18px rgba(0, 0, 0, 0.34) !important;
}

.top3-feature-board .podium-photo-frame::before,
.top3-feature-board .podium-photo-frame::after,
.top3-feature-board.is-photo-layout .podium-photo-frame::before,
.top3-feature-board.is-photo-layout .podium-photo-frame::after,
body.graphics-theme-classic .top3-feature-board .podium-photo-frame::before,
body.graphics-theme-classic .top3-feature-board .podium-photo-frame::after {
  content: none !important;
  display: none !important;
}

.top3-feature-board .podium-photo-cap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  z-index: 4;
  pointer-events: none;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 45%, rgba(0, 0, 0, 0.3)),
    rgba(13, 17, 17, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.top3-feature-board .podium-card.has-photo .podium-photo-frame,
.top3-feature-board.is-photo-layout .podium-card.has-photo .podium-photo-frame,
body.graphics-theme-classic .top3-feature-board .podium-card.has-photo .podium-photo-frame {
  grid-template-rows: minmax(0, 1fr) !important;
}

.top3-feature-board .podium-card.has-photo .podium-photo-cap,
.top3-feature-board.is-photo-layout .podium-card.has-photo .podium-photo-cap,
body.graphics-theme-classic .top3-feature-board .podium-card.has-photo .podium-photo-cap {
  display: none !important;
}

.top3-feature-board .podium-photo-stage {
  position: relative;
  grid-row: 1 !important;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(73, 84, 84, 0.82), rgba(15, 19, 19, 0.95));
}

.top3-feature-board .podium-photo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.12) 46%, transparent 56%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0.72;
}

.top3-feature-board .podium-photo-stage img,
.top3-feature-board .podium-photo-frame img,
body.graphics-theme-classic .top3-feature-board .podium-photo-stage img,
body.graphics-theme-classic .top3-feature-board .podium-photo-frame img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

.top3-feature-board .podium-photo-number {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #c7cdcd;
  font-family: "Teko Local", Impact, "Arial Black", sans-serif;
  font-size: 78px;
  font-weight: 700;
  font-style: italic;
  line-height: 0.82;
  white-space: nowrap;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.78);
  background: none;
  border: 0;
  overflow: hidden;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="medium"] .podium-photo-number {
  font-size: 66px;
}

.top3-feature-board .podium-photo-frame[data-placeholder-size="long"] .podium-photo-number {
  font-size: 56px;
}

.top3-feature-board .podium-card.has-photo .podium-photo-number {
  opacity: 0;
  padding: 0;
  text-shadow: none;
}

.story-examples-page {
  min-height: 100vh;
  color: #ffffff;
  background:
    radial-gradient(circle at 75% 15%, rgba(231, 51, 47, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 24%),
    #080b0d;
}

.story-examples-shell {
  width: min(1500px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 26px 0;
}

.story-examples-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(102, 205, 232, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 46%),
    rgba(8, 13, 15, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.story-examples-header div {
  display: grid;
  gap: 4px;
}

.story-examples-header strong {
  font-family: "Built Titling Local", "Barlow Condensed Local", sans-serif;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

.story-examples-header span {
  color: #aeb8c1;
  font-size: 16px;
  font-weight: 900;
}

.story-examples-header a {
  display: inline-grid;
  min-height: 42px;
  place-items: center;
  padding: 0 18px;
  border: 1px solid rgba(102, 205, 232, 0.72);
  border-radius: 7px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 42%),
    rgba(24, 30, 34, 0.96);
  font-size: 18px;
  font-weight: 1000;
  text-decoration: none;
  text-transform: uppercase;
}

.story-examples-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.story-example-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(5, 8, 10, 0.72);
}

.story-example-list button {
  min-height: 44px;
  border: 1px solid rgba(102, 205, 232, 0.34);
  border-radius: 6px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 44%),
    rgba(18, 23, 26, 0.94);
  font-family: inherit;
  font-size: 18px;
  font-weight: 1000;
  text-align: left;
  text-transform: uppercase;
  padding: 0 14px;
  cursor: pointer;
}

.story-example-list button.active {
  border-color: rgba(244, 197, 66, 0.88);
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 44%),
    linear-gradient(90deg, rgba(244, 197, 66, 0.34), rgba(133, 210, 78, 0.16)),
    rgba(19, 24, 20, 0.98);
  box-shadow: 0 0 18px rgba(244, 197, 66, 0.16);
}

.story-example-preview {
  display: grid;
  gap: 12px;
}

.story-example-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(210, 218, 220, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
    radial-gradient(circle at 35% 36%, rgba(255, 255, 255, 0.08), transparent 18%),
    #020303;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.story-example-canvas {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--example-scale, 0.65));
  transform-origin: top left;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 21%),
    radial-gradient(circle at 52% 45%, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(180deg, #0a0d0e, #010101);
}

.story-example-top-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 116px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  align-items: center;
  padding: 0 34px;
  border-bottom: 3px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(36, 43, 43, 0.96), rgba(5, 6, 7, 0.96));
  color: #ffffff;
  font-family: "Built Titling Local", "Barlow Condensed Local", sans-serif;
  text-transform: uppercase;
}

.story-example-top-banner span {
  color: #ffffff;
  font-size: 34px;
}

.story-example-top-banner strong {
  color: #ffffff;
  font-size: 46px;
  text-align: center;
}

.story-example-top-banner em {
  color: #85d24e;
  font-size: 38px;
  font-style: normal;
  text-align: right;
}

.story-example-canvas .race-story-spotlight {
  left: calc(50% - 340px);
  right: auto;
  bottom: 154px;
}

.story-examples-page.race-story-position-bottom-left .story-example-canvas .race-story-spotlight {
  left: 78px;
  right: auto;
}

.story-example-info {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(102, 205, 232, 0.28);
  border-left: 4px solid rgba(102, 205, 232, 0.84);
  border-radius: 8px;
  background: rgba(5, 8, 10, 0.82);
}

.story-example-info strong,
.story-example-info span,
.story-example-info p {
  margin: 0;
}

.story-example-info strong {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.1;
}

.story-example-info span {
  color: #f4c542;
  font-size: 18px;
  font-weight: 1000;
  text-transform: uppercase;
}

.story-example-info p {
  color: #aeb8c1;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.18;
}

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

  .story-example-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
