:root {
  --ayna-bg: #f4f1e8;
  --ayna-surface: #ffffff;
  --ayna-surface-soft: #f7faf9;
  --ayna-ink: #173a35;
  --ayna-muted: #657873;
  --ayna-green: #173f39;
  --ayna-border: #d6e1de;
  --ayna-gold: #e7c84f;
  --ayna-gold-hover: #d9b93f;
  --ayna-radius-control: 10px;
  --ayna-radius-panel: 12px;
  --ayna-shadow-panel: 0 8px 24px rgba(23, 58, 53, .06);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: var(--ayna-ink);
  background: var(--ayna-bg);
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font-family: inherit; }
.table-top-scroll { position: sticky; top: 0; z-index: 20; width: 100%; height: 14px; margin: 0 0 6px; overflow-x: auto; overflow-y: hidden; background: #fff; }
.table-top-scroll[hidden] { display: none; }
.table-top-scroll-track { height: 1px; }

.page-header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.admin-language-switcher { display: inline-flex; align-items: center; gap: 8px; color: #60756f; font-size: 13px; font-weight: 600; white-space: nowrap; }
.admin-language-switcher select { width: auto; min-width: 112px; height: 40px; margin: 0; padding: 0 32px 0 11px; border: 1px solid #c9d9d5; border-radius: 10px; background: #fff; color: #143f39; font: inherit; }

.page-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  padding: 8px 32px;
  background: #fff;
  border-bottom: 1px solid #dce3e0;
}
.page-header img { width: 128px; height: 50px; object-fit: contain; }
.page-header button { justify-self: end; }
.back-link { color: #315c55; font-size: 14px; font-weight: 650; text-decoration: none; }
.back-link:hover { color: #123d37; }

main { width: min(1080px, calc(100% - 48px)); margin: 36px auto 52px; }
.title-row { padding-bottom: 24px; border-bottom: 1px solid #d7dfdc; }
h1 { margin: 0; font-size: clamp(30px, 3vw, 38px); line-height: 1.15; font-weight: 650; letter-spacing: -.025em; }
#points-count { margin: 9px 0 0; color: #70807c; font-size: 14px; }

button {
  min-height: 40px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--ayna-radius-control);
  background: var(--ayna-gold);
  color: #173d37;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(23, 58, 53, .10);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
button:hover { background: var(--ayna-gold-hover); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:focus-visible { outline: 2px solid #4d8379; outline-offset: 2px; }
button.secondary { border: 1px solid #bdcdc8; background: #fff; box-shadow: none; }
button.secondary:hover { background: #eef3f1; }

.filters {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) repeat(4, minmax(135px, 175px)) auto;
  align-items: end;
  gap: 14px;
  margin: 20px 0 12px;
  padding: 15px 16px;
  border: 1px solid #d6dfdc;
  border-radius: var(--ayna-radius-panel);
  background: #fff;
}
.filters label { display: grid; gap: 6px; color: #375b55; font-size: 13px; font-weight: 650; }
.filters input, .filters select {
  width: 100%;
  height: 42px;
  padding: 8px 11px;
  border: 1px solid #bdcdc8;
  border-radius: var(--ayna-radius-control);
  outline: none;
  background: #fff;
  color: #173d37;
  font: inherit;
  font-size: 14px;
}
.filters input:focus, .filters select:focus { border-color: #547a72; box-shadow: 0 0 0 2px rgba(84, 122, 114, .12); }
.filters button { height: 42px; }

.table-wrap {
  overflow: hidden;
  border: 1px solid #ccd8d4;
  border-radius: var(--ayna-radius-panel);
  background: #fff;
  box-shadow: var(--ayna-shadow-panel);
}
table { width: 100%; table-layout: fixed; border-collapse: collapse; }
th, td { height: 58px; padding: 0 18px; border-bottom: 1px solid #e1e7e5; text-align: left; vertical-align: middle; }
th { height: 52px; background: #17463f; color: #fff; font-size: 13px; font-weight: 650; }
td { color: #173d37; font-size: 15px; font-weight: 500; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { background: #fff; transition: background-color .15s ease; }
tbody tr:hover { background: #f5f8f7; }

.place { text-align: center; }
th.place { font-size: 13px; font-weight: 650; }
.place span {
  display: inline-block;
  min-width: 34px;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.place .top-place { color: inherit; }
.student-name { color: inherit; font-size: inherit; font-weight: inherit; }
th:nth-child(1), td:nth-child(1) { width: 11%; }
th:nth-child(2), td:nth-child(2) { width: 41%; }
th:nth-child(3), td:nth-child(3) { width: 16%; text-align: center; }
th:nth-child(4), td:nth-child(4) { width: 17%; text-align: center; }
th:nth-child(5), td:nth-child(5) { width: 15%; text-align: center; }
.achievements-column { text-align: center; }
.points { text-align: center; color: inherit; font-size: inherit; font-weight: inherit; font-variant-numeric: tabular-nums; }
th.points { color: #fff; font-size: 13px; font-weight: 650; }
.empty-state { padding: 44px 20px; text-align: center; color: #70807c; }

@media (max-width: 700px) {
  .page-header { grid-template-columns: 1fr auto; padding: 8px 16px; }
  .page-header img { display: none; }
  main { width: calc(100% - 24px); margin-top: 24px; }
  .filters { grid-template-columns: 1fr; }
  .filters button { width: 100%; }
  th, td { height: 62px; padding: 0 9px; }
  th:nth-child(1), td:nth-child(1) { width: 58px; }
  th:nth-child(2), td:nth-child(2) { width: auto; }
  .student-name { font-size: 14px; }
  th:nth-child(3), td:nth-child(3) { width: 76px; }
  th:nth-child(5), td:nth-child(5) { width: 70px; }
  .achievements-column { display: none; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}