:root {
  color-scheme: light;
  --ink: #122235;
  --muted: #657487;
  --line: #d9e4ef;
  --panel: #ffffff;
  --page: #f3f7fb;
  --brand: #092f4f;
  --brand-strong: #06243d;
  --accent: #c9212b;
  --accent-strong: #971821;
  --teal: #0f7f9f;
  --ok: #118261;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--page);
}

body::selection {
  color: #fff;
  background: var(--accent);
}

button,
input,
select {
  font: inherit;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 5vw, 44px) 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgb(9 47 79 / 96%), rgb(6 36 61 / 98%) 54%, rgb(151 24 33 / 94%));
  box-shadow: 0 10px 28px rgb(9 47 79 / 22%);
}

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

.brand-logo {
  width: clamp(58px, 13vw, 92px);
  height: 54px;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 20%));
}

.eyebrow,
h1 {
  margin: 0;
}

.eyebrow {
  color: #d7f3ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow.dark {
  color: var(--brand);
}

h1 {
  font-size: clamp(1.55rem, 4vw, 2.45rem);
  line-height: 1.05;
  text-shadow: 0 2px 10px rgb(0 0 0 / 18%);
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 8px;
  color: #fff;
  background: rgb(255 255 255 / 13%);
  cursor: pointer;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 100%;
}

.top-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 8px;
  padding: 0 12px;
  color: #eef8ff;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  background: transparent;
}

.top-nav a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.top-nav a:not([aria-current="page"]) {
  color: rgb(255 255 255 / 86%);
  background: transparent;
}

.top-nav a[aria-current="page"] {
  color: var(--brand);
  background: #fff;
  border-color: #fff;
}

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 20px clamp(12px, 4vw, 32px) 36px;
}

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

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

.summary-grid article,
.search-panel,
.results-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgb(9 47 79 / 8%);
}

.summary-grid article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.summary-grid span {
  display: block;
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
}

.summary-grid small {
  color: var(--muted);
  font-weight: 650;
}

.card-icon {
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 8px;
  color: var(--brand);
  background: #e6f2f8;
}

.card-icon svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.athlete-icon {
  color: var(--teal);
  background: #e6f6fa;
}

.official-icon {
  color: var(--accent);
  background: #fdecee;
}

.sport-icon {
  color: var(--brand);
  background: #e8eef5;
}

.search-panel {
  margin-top: 16px;
  padding: 16px;
}

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

.search-field {
  position: relative;
}

.search-box input,
select {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.search-box input {
  padding: 0 48px 0 14px;
  font-size: 1.02rem;
}

.field-help {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: none;
}

.clear-search-button {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 34px;
  min-height: 34px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 0;
  color: var(--muted);
  background: transparent;
}

.clear-search-button:hover {
  color: #fff;
  background: var(--accent);
}

.clear-search-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

select {
  padding: 0 34px 0 38px;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

#divisionFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23092f4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l8-4v18'/%3E%3Cpath d='M19 21V11l-6-3'/%3E%3Cpath d='M9 9v.01'/%3E%3Cpath d='M9 12v.01'/%3E%3Cpath d='M9 15v.01'/%3E%3Cpath d='M16 14v.01'/%3E%3Cpath d='M16 17v.01'/%3E%3C/svg%3E");
}

#sportFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9212b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6c4 2.3 8.5 6.8 12.8 12.8'/%3E%3Cpath d='M18.4 5.6c-4 2.3-8.5 6.8-12.8 12.8'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3.5v17'/%3E%3C/svg%3E");
}

#levelFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f7f9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M5 15h4v4H5z'/%3E%3Cpath d='M10 11h4v8h-4z'/%3E%3Cpath d='M15 7h4v12h-4z'/%3E%3C/svg%3E");
}

#genderFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23657487' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M4 20c0-3 2.2-5 5-5s5 2 5 5'/%3E%3Ccircle cx='17' cy='8' r='2.5'/%3E%3Cpath d='M15 15.5c2.5.5 4 2.2 4 4.5'/%3E%3C/svg%3E");
}

#designationFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23971821' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M10 13v2h4v-2'/%3E%3C/svg%3E");
}

#roomFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23092f4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h12v18'/%3E%3Cpath d='M8 21v-9h6v9'/%3E%3Cpath d='M12 7h.01'/%3E%3C/svg%3E");
}

#groupFilter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9212b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-8 0v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M2 21v-2a4 4 0 0 1 3-3.87'/%3E%3Cpath d='M8 3.13a4 4 0 0 0 0 7.75'/%3E%3C/svg%3E");
}

.search-box input:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(18 60 105 / 14%);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 48px;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.delegation-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 48px;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.panel-actions,
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-actions {
  margin-top: 14px;
}

.panel-actions p,
.pagination span {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  color: #fff;
  background: var(--brand);
  font-weight: 800;
  cursor: pointer;
}

button:hover {
  background: var(--brand-strong);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.filter-reset-button {
  display: inline-grid;
  width: 48px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  color: var(--brand);
  background: #e8f0f8;
}

.filter-reset-button:hover {
  color: #fff;
  background: var(--accent);
}

.filter-reset-button svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.results-wrap {
  margin-top: 16px;
  overflow: hidden;
}

.table-scroller {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

th,
td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  position: sticky;
  top: 0;
  color: var(--muted);
  background: #f8fafc;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

tbody tr {
  transition: background 150ms ease;
}

tbody tr:hover {
  background: #f8fbfe;
}

td strong {
  display: block;
}

.no-cell {
  width: 74px;
  color: var(--brand);
  font-weight: 800;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--brand);
  background: #e8f0f8;
  font-weight: 800;
  white-space: nowrap;
}

.tag.athlete {
  color: var(--teal);
  background: #e6f6fa;
}

.role-athlete {
  color: var(--teal);
  background: #e6f6fa;
}

.role-coach,
.role-asst-coach {
  color: var(--accent);
  background: #fdecee;
}

.role-chaperone {
  color: #7b5a00;
  background: #fff5d6;
}

.level-tag {
  color: var(--brand);
  background: #e8eef5;
}

.gender-tag {
  color: #526176;
  background: #eef3f8;
}

.station-tag {
  max-width: 100%;
  white-space: normal;
}

.mobile-results {
  display: none;
}

.participant-card {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.participant-card h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.participant-card p {
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}

.card-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.no-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--brand);
  background: #e8eef5;
  font-size: 0.78rem;
  font-weight: 800;
}

.empty-state {
  padding: 26px;
  color: var(--muted);
  text-align: center;
}

.empty-state strong,
.empty-state span {
  display: block;
}

.empty-state strong {
  color: var(--brand);
  font-size: 1rem;
}

.empty-state span {
  margin-top: 5px;
  font-weight: 650;
}

.skeleton-row td {
  padding: 14px;
}

.skeleton-row span,
.skeleton-card span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf3f8 25%, #f8fbfe 37%, #edf3f8 63%);
  background-size: 400% 100%;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.skeleton-row span {
  width: min(560px, 84%);
}

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

.skeleton-card span:nth-child(1) {
  width: 70%;
}

.skeleton-card span:nth-child(2) {
  width: 48%;
}

.skeleton-card span:nth-child(3) {
  width: 62%;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.pagination {
  padding: 14px;
}

.delegation-section {
  margin-top: 28px;
}

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

.section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.empty-page {
  display: grid;
  min-height: 360px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 40px 20px;
  background: var(--panel);
  box-shadow: 0 14px 32px rgb(9 47 79 / 8%);
  text-align: center;
}

.empty-page-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 8px;
  color: var(--accent);
  background: #fdecee;
}

.empty-page-icon svg {
  width: 42px;
  height: 42px;
  fill: currentColor;
}

.empty-page h2 {
  margin: 18px 0 8px;
  color: var(--brand);
  font-size: clamp(1.45rem, 4vw, 2rem);
}

.empty-page p {
  width: min(520px, 100%);
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
}

.app-footer {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 32px) 28px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  text-align: center;
}

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

  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 48px;
  }
}

@media (max-width: 680px) {
  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-logo {
    width: 64px;
    height: 46px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
  }

  .top-nav {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav a {
    flex: 0 0 auto;
  }

  .app-shell {
    padding-inline: 10px;
  }

  .summary-grid {
    display: none;
  }

  .summary-grid article,
  .search-panel,
  .results-wrap {
    border-radius: 0;
  }

  .search-panel {
    position: sticky;
    top: 0;
    z-index: 4;
    margin-inline: -10px;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 10px 22px rgb(9 47 79 / 10%);
  }

  .field-help {
    display: none;
  }

  .filter-grid {
    display: none;
  }

  .delegation-filter-grid {
    display: none;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .table-scroller {
    display: none;
  }

  .mobile-results {
    display: block;
  }

  .pagination button {
    flex: 1;
    padding-inline: 8px;
  }

  .app-footer {
    padding-bottom: 18px;
  }
}