.league-hub-root,
.league-hub {
  --lh-gold: #f2c14e;
  --lh-ink: #f8f8f8;
  --lh-muted: #b8b8c2;
  --lh-panel: #17171d;
  --lh-line: #35353f;
  color: var(--lh-ink);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.league-hub *,
.league-hub *::before,
.league-hub *::after {
  box-sizing: border-box;
}

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

.league-hub a {
  color: var(--lh-gold);
  overflow-wrap: anywhere;
}

.lh-page-head,
.lh-section-head,
.lh-card-row,
.lh-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.lh-page-head {
  margin-bottom: 1.5rem;
}

.lh-page-head h1,
.lh-profile-title h1 {
  margin-bottom: .25rem;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}

.lh-eyebrow {
  color: var(--lh-gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.lh-search,
.lh-grid,
.lh-media-grid,
.lh-social-fields {
  display: grid;
  gap: 1rem;
}

.lh-search {
  align-items: end;
  background: var(--lh-panel);
  border: 1px solid var(--lh-line);
  border-radius: 12px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

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

.lh-league-card,
.lh-event-card,
.lh-panel,
.lh-section,
.lh-comment,
.lh-media-control,
.lh-mod-item {
  background: var(--lh-panel);
  border: 1px solid var(--lh-line);
  border-radius: 12px;
  padding: 1rem;
}

.lh-league-card {
  display: flex;
  gap: 1rem;
  min-width: 0;
}

.lh-league-card h2 {
  font-size: 1.15rem;
  margin-bottom: .35rem;
}

.lh-card-logo,
.lh-logo {
  aspect-ratio: 1;
  background: #272731;
  border: 1px solid var(--lh-line);
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}

.lh-card-logo {
  height: 64px;
  width: 64px;
}

.lh-logo {
  height: clamp(76px, 16vw, 130px);
  width: clamp(76px, 16vw, 130px);
}

.lh-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.lh-activity,
.league-hub small {
  color: var(--lh-muted);
  font-size: .82rem;
}

.lh-field {
  display: grid;
  gap: .4rem;
  min-width: 0;
}

.lh-field > span {
  color: var(--lh-muted);
  font-size: .85rem;
  font-weight: 700;
}

.league-hub input,
.league-hub textarea,
.league-hub select {
  background: #0d0d11;
  border: 1px solid #4a4a55;
  border-radius: 8px;
  color: var(--lh-ink);
  font: inherit;
  min-height: 44px;
  padding: .7rem .75rem;
  width: 100%;
}

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

.league-hub input:focus,
.league-hub textarea:focus,
.league-hub select:focus,
.lh-button:focus-visible,
.league-hub a:focus-visible {
  outline: 3px solid rgba(242, 193, 78, .45);
  outline-offset: 2px;
}

.lh-button {
  align-items: center;
  background: #292932;
  border: 1px solid #4a4a55;
  border-radius: 8px;
  color: var(--lh-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 750;
  justify-content: center;
  min-height: 44px;
  padding: .65rem .9rem;
  text-decoration: none;
}

.lh-button.primary {
  background: var(--lh-gold);
  border-color: var(--lh-gold);
  color: #17130a;
}

.lh-button.danger {
  border-color: #a8535d;
  color: #ffb6bd;
}

.lh-button.quiet {
  background: transparent;
}

.lh-button:disabled {
  cursor: wait;
  opacity: .6;
}

.lh-status {
  background: #303039;
  border-radius: 999px;
  color: var(--lh-muted);
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  padding: .3rem .55rem;
  text-transform: capitalize;
  white-space: nowrap;
}

.lh-status-published,
.lh-status-approved,
.lh-status-visible,
.lh-status-completed,
.lh-status-live {
  background: #173d2d;
  color: #9af0c6;
}

.lh-status-pending,
.lh-status-draft {
  background: #493b17;
  color: #ffe29a;
}

.lh-notice {
  background: #183b2d;
  border: 1px solid #2d7c5a;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
  padding: .8rem;
}

.lh-notice.error {
  background: #431f25;
  border-color: #a8535d;
}

.lh-loading,
.lh-empty {
  color: var(--lh-muted);
  padding: 1.25rem;
  text-align: center;
}

.lh-pager,
.lh-card-actions,
.lh-badges,
.lh-socials {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.lh-pager {
  justify-content: center;
  margin-top: 1.5rem;
}

.lh-profile-head {
  background: var(--lh-panel);
  border: 1px solid var(--lh-line);
  border-radius: 14px;
  overflow: hidden;
}

.lh-banner {
  aspect-ratio: 4 / 1;
  background: #272731;
  display: block;
  max-height: 320px;
  object-fit: cover;
  width: 100%;
}

.lh-profile-title {
  align-items: center;
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.lh-profile-title .lh-logo {
  margin-top: -3rem;
}

.lh-section,
.lh-panel {
  margin-top: 1rem;
}

.lh-description {
  line-height: 1.65;
  white-space: pre-wrap;
}

.lh-socials {
  margin-top: 1rem;
}

.lh-events,
.lh-comments,
.lh-team-list,
.lh-stack {
  display: grid;
  gap: 1rem;
}

.lh-event-card p {
  margin-bottom: .5rem;
}

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

.lh-social-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lh-media-preview {
  align-items: center;
  background: #0d0d11;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  min-height: 140px;
  overflow: hidden;
}

.lh-media-control > * + * {
  margin-top: .75rem;
}

.lh-event-art {
  border-radius: 8px;
  display: block;
  max-height: 360px;
  object-fit: contain;
  width: 100%;
}

.lh-check {
  align-items: center;
  display: flex;
  gap: .65rem;
  min-height: 44px;
}

.lh-check input {
  min-height: 22px;
  width: 22px;
}

.lh-team-row {
  border-bottom: 1px solid var(--lh-line);
  padding: .75rem 0;
}

.lh-team-row p {
  color: var(--lh-muted);
  margin: .25rem 0 0;
}

.lh-subpanel {
  background: #101015;
  border-radius: 8px;
  margin-top: 1rem;
  padding: 1rem;
}

.lh-capability-group {
  border: 1px solid var(--lh-line);
  border-radius: 8px;
  display: grid;
  gap: .25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: .75rem;
}

.lh-capability-group legend {
  color: var(--lh-gold);
  font-weight: 800;
  padding: 0 .35rem;
  text-transform: capitalize;
}

.lh-dialog {
  background: var(--lh-panel);
  border: 1px solid var(--lh-line);
  border-radius: 14px;
  color: var(--lh-ink);
  max-height: min(90vh, 780px);
  max-width: 620px;
  overflow: auto;
  padding: 1rem;
  width: calc(100% - 2rem);
}

.lh-dialog::backdrop {
  background: rgba(0, 0, 0, .78);
}

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

.lh-comment {
  border-left: 3px solid var(--lh-line);
}

.lh-comment-reply {
  margin-left: clamp(1rem, 6vw, 3rem);
}

.lh-comment-pending {
  border-left-color: var(--lh-gold);
}

.lh-comment-hidden {
  opacity: .72;
}

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

  .lh-search {
    grid-template-columns: 1fr 1fr;
  }

  .lh-search .lh-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .league-hub-root {
    padding-inline: .75rem;
  }

  .lh-grid,
  .lh-search,
  .lh-media-grid,
  .lh-social-fields,
  .lh-capability-group {
    grid-template-columns: 1fr;
  }

  .lh-page-head,
  .lh-section-head,
  .lh-team-row {
    align-items: stretch;
    flex-direction: column;
  }

  .lh-page-head > .lh-button,
  .lh-team-row > .lh-button {
    width: 100%;
  }

  .lh-profile-title {
    align-items: flex-start;
  }

  .lh-profile-title .lh-logo {
    margin-top: -2rem;
  }

  .lh-card-actions .lh-button {
    flex: 1 1 auto;
  }

  .lh-dialog {
    margin-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media print {
  .league-hub .lh-button,
  .league-hub form {
    display: none !important;
  }
}