.sponsor-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--space);
}

.sponsor-info-card,
.sponsor-form-card {
  padding: 18px;
}

.sponsor-thanks {
  display: grid;
  gap: 18px;
}

.sponsor-thanks--live {
  margin-top: 0;
}

.sponsor-thanks__hero,
.sponsor-thanks__tier,
.sponsor-thanks__jerseys {
  padding: 18px;
}

.sponsor-thanks__hero {
  display: grid;
  gap: 10px;
  border-color: rgba(219,3,26,.32);
  background:
    linear-gradient(180deg, rgba(219,3,26,.14), rgba(255,255,255,.02)),
    #111315;
}

.sponsor-thanks__hero h2,
.sponsor-thanks__hero p {
  margin: 0;
}

.sponsor-thanks__hero h2 {
  color: #fff;
  font: 900 clamp(30px, 4vw, 44px)/.95 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-thanks__hero p {
  max-width: 780px;
  color: var(--muted);
}

.sponsor-thanks__hero--compact h2 {
  font-size: clamp(24px, 3.2vw, 34px);
}

.sponsor-thanks__hero--compact p {
  max-width: 920px;
}

.sponsor-thanks__tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sponsor-thanks__tier,
.sponsor-thanks__jerseys {
  display: grid;
  gap: 14px;
}

.sponsor-thanks__label {
  display: block;
  color: var(--gold);
  font: 900 13px/1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sponsor-thanks__list,
.sponsor-thanks__jersey-list {
  display: grid;
  gap: 12px;
}

.sponsor-thanks__item {
  border: 1px solid rgba(251,176,59,.14);
  background: rgba(255,255,255,.02);
}

.sponsor-thanks__item--team {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.sponsor-thanks__item--jersey {
  padding: 14px 16px;
}

.sponsor-thanks__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 68px;
}

.sponsor-thanks__logo img {
  display: block;
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
}

.sponsor-thanks__copy {
  display: grid;
  gap: 4px;
}

.sponsor-thanks__copy strong,
.sponsor-thanks__copy strong a {
  color: #fff;
  font: 900 17px/1.15 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

.sponsor-thanks__copy span,
.sponsor-thanks__copy span a {
  color: var(--muted);
  font: 700 14px/1.4 "Hanken Grotesk", Arial, sans-serif;
  text-decoration: none;
}

.sponsor-thanks__copy a:hover {
  color: var(--gold);
}

.sponsor-thanks__empty {
  padding: 16px;
  border: 1px dashed rgba(251,176,59,.18);
  color: var(--muted);
  font: 700 13px/1.45 "Hanken Grotesk", Arial, sans-serif;
}

.sponsor-form-card__head p,
.sponsor-info-item p {
  margin: 8px 0 0;
  color: var(--muted);
}

.sponsor-info-list {
  display: grid;
  gap: 14px;
}

.sponsor-info-item {
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.sponsor-info-item strong {
  display: block;
  color: #fff;
  font: 900 18px/1.05 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-form {
  display: grid;
  gap: 16px;
}

.sponsor-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sponsor-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid rgba(251,176,59,.22);
  background: transparent;
  color: #fff;
  font: 900 13px/1 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.sponsor-tab.is-active {
  border-color: var(--red);
  background: rgba(219,3,26,.16);
}

.sponsor-panel {
  display: grid;
  gap: 14px;
}

.sponsor-hidden {
  display: none !important;
}

.sponsor-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sponsor-stat {
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.sponsor-stat span,
.sponsor-summary span,
.sponsor-field span {
  display: block;
  color: var(--gold);
  font: 700 12px/1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sponsor-stat strong,
.sponsor-summary strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font: 900 22px/1 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sponsor-form__grid--single {
  grid-template-columns: 1fr;
}

.sponsor-field {
  display: grid;
  gap: 7px;
}

.sponsor-input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #111315;
  color: #fff;
  font: 600 15px/1.2 "Hanken Grotesk", Arial, sans-serif;
}

.sponsor-input::placeholder {
  color: #8f979b;
}

select.sponsor-input option {
  color: #fff;
  background: #111315;
}

.sponsor-jersey-choices {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.sponsor-jersey-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 88px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}

.sponsor-jersey-row__name {
  color: #fff;
  font: 700 14px/1.2 "Hanken Grotesk", Arial, sans-serif;
}

.sponsor-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid rgba(251,176,59,.18);
  background: rgba(255,255,255,.03);
  color: #fff;
  font: 800 12px/1 "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.sponsor-check.is-disabled {
  opacity: .4;
}

.sponsor-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sponsor-package {
  display: grid;
  gap: 7px;
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(251,176,59,.18);
  background: rgba(255,255,255,.02);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.sponsor-package strong {
  font: 900 18px/1 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-package span {
  color: var(--gold);
  font: 900 20px/1 "Anybody", Arial, sans-serif;
}

.sponsor-package small {
  color: var(--muted);
  font: 700 11px/1.3 "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.sponsor-package.is-selected {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(219,3,26,.18), rgba(255,255,255,.02));
}

.sponsor-package.is-disabled,
.sponsor-package:disabled {
  opacity: .42;
  cursor: not-allowed;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.015);
}

.sponsor-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(251,176,59,.18);
  background: rgba(0,0,0,.18);
}

.sponsor-summary strong {
  margin-top: 6px;
}

.sponsor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sponsor-actions .btn:first-child {
  background: var(--red);
  color: #fff;
}

.sponsor-actions .btn:last-child {
  background: linear-gradient(180deg, #f4b645, #d99317);
  color: #111;
}

.sponsor-modal__actions .btn--secondary {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.16);
}

.sponsor-modal__actions .btn:disabled {
  opacity: .58;
  cursor: wait;
}

.sponsor-message {
  position: relative;
  margin: 10px 0 12px;
  padding: 14px 16px 14px 18px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  font: 700 12px/1.35 "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sponsor-message--error {
  border-color: rgba(219,3,26,.36);
  background: rgba(219,3,26,.12);
  color: #ffb1b7;
  border-left-color: #ed1c24;
}

.sponsor-message--notice {
  border-color: rgba(251,176,59,.28);
  background:
    linear-gradient(180deg, rgba(251,176,59,.14), rgba(255,255,255,.02)),
    rgba(17,19,19,.92);
  color: #ffe0a3;
  border-left-color: var(--gold);
}

.sponsor-message--hidden {
  display: none;
}

.sponsor-panel__note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid rgba(251,176,59,.36);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font: 700 12px/1.45 "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#sponsorJerseySoldOutNote,
#sponsorTeamSoldOutNote {
  border-color: rgba(251,176,59,.22);
  border-left-color: var(--gold);
  background:
    linear-gradient(180deg, rgba(251,176,59,.12), rgba(255,255,255,.02)),
    rgba(17,19,19,.92);
  color: #ffe0a3;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.account-modal.account-modal--hidden {
  display: none;
}

.account-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.9);
}

.account-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
}

.account-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
}

.sponsor-modal {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(251,176,59,.24);
  background: linear-gradient(180deg, rgba(219,3,26,.16), rgba(0,0,0,.14) 120px), #171919;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.sponsor-modal__head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  padding-right: 48px;
}

.sponsor-modal__head strong,
.sponsor-modal__head span {
  color: #fff;
  font: 900 22px/1 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-modal__head span,
.sponsor-modal__selection strong,
.sponsor-modal__steps strong {
  color: var(--gold);
}

.sponsor-modal__banner {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(251,176,59,.18);
  background: rgba(0,0,0,.18);
}

.sponsor-modal__banner strong {
  color: #fff;
  font: 900 15px/1 "Anybody", Arial, sans-serif;
  text-transform: uppercase;
}

.sponsor-modal__banner span,
.sponsor-modal__copy,
.sponsor-modal__selection {
  color: var(--muted);
  font: 700 11px/1.35 "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.sponsor-modal__copy,
.sponsor-modal__selection {
  margin: 0;
}

.sponsor-modal__steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
  color: #fff;
}

.sponsor-square {
  display: grid;
  gap: 12px;
}

.account-fees__square-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(251,176,59,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow: hidden;
}

.account-fees__square-item {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-right: 1px solid rgba(251,176,59,.16);
  text-align: center;
}

.account-fees__square-item span {
  color: var(--muted);
  font: 700 11px/1.3 "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.account-fees__square-item strong {
  color: #fff;
  font: 900 clamp(20px, 2vw, 24px)/1 "Anybody", Arial, sans-serif;
}

.account-fees__square-item:last-child {
  border-right: 0;
  background: linear-gradient(180deg, rgba(219,3,26,.24), rgba(255,255,255,.03));
}

.sponsor-square-summary {
  border-radius: 6px;
}

#sponsorSquareCard {
  margin-bottom: -8px;
}

.sponsor-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sponsor-modal__actions .btn {
  width: 100%;
}

@media (max-width: 980px) {
  .sponsor-layout {
    grid-template-columns: 1fr;
  }

  .sponsor-thanks__tiers {
    grid-template-columns: 1fr;
  }

  .sponsor-team-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sponsor-tabs,
  .sponsor-stat-row,
  .sponsor-form__grid,
  .sponsor-summary,
  .sponsor-actions,
  .sponsor-modal__actions,
  .account-fees__square-summary {
    grid-template-columns: 1fr;
  }

  .sponsor-jersey-row {
    grid-template-columns: 1fr;
  }

  .account-modal__dialog {
    width: min(620px, calc(100vw - 20px));
    max-height: calc(100vh - 24px);
  }
}
