:root {
  --wy-line: rgba(255,255,255,.1);
  --wy-panel: rgba(255,255,255,.035);
  --wy-panel-strong: rgba(255,255,255,.06);
  --wy-muted: #a7a7bc;
  --wy-dim: #737386;
  --wy-pink: #ec4899;
  --wy-violet: #8b5cf6;
  --wy-indigo: #6366f1;
}

.wybench-main {
  min-height: 100vh;
  padding: 148px 24px 84px;
}

.wybench-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.wybench-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
  gap: 34px;
  align-items: end;
  padding: 42px 0 30px;
}

.wybench-kicker {
  margin: 0 0 16px;
  color: var(--wy-muted);
  font-size: 14px;
  font-weight: 700;
}

.wybench-title {
  max-width: 820px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(48px, 8vw, 92px);
  line-height: .92;
  letter-spacing: 0;
  margin: 0;
}

.wybench-title span,
.wybench-gradient {
  background: linear-gradient(135deg, var(--wy-indigo), var(--wy-violet), var(--wy-pink));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wybench-subtitle {
  max-width: 690px;
  margin: 24px 0 0;
  color: #d7d7e7;
  font-size: 20px;
  line-height: 1.55;
}

.wybench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.wybench-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid var(--wy-line);
  color: #fff;
  background: rgba(255,255,255,.045);
  text-decoration: none;
  font-weight: 800;
}

.wybench-button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--wy-indigo), var(--wy-pink));
}

.wybench-panel {
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: var(--wy-panel);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.wybench-scorecard {
  padding: 22px;
}

.wybench-scorecard h2,
.wybench-section h2,
.wybench-page-title h1 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0;
}

.wybench-scorecard h2 {
  margin: 0 0 14px;
  font-size: 24px;
}

.wybench-score-grid {
  display: grid;
  gap: 10px;
}

.wybench-score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--wy-muted);
  font-size: 14px;
}

.wybench-score-row strong {
  color: #fff;
}

.wybench-section {
  padding: 42px 0 0;
}

.wybench-section h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
}

.wybench-section p {
  max-width: 850px;
  color: #c9c9dc;
  font-size: 17px;
}

.wybench-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.wybench-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.wybench-link-grid a {
  display: block;
  padding: 16px;
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: var(--wy-panel);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
}

.wybench-link-grid a:hover {
  border-color: rgba(236,72,153,.45);
  background: var(--wy-panel-strong);
}

.wybench-card {
  padding: 18px;
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: var(--wy-panel);
}

.wybench-card h3 {
  margin: 0 0 9px;
  font-size: 18px;
}

.wybench-card p,
.wybench-card li {
  color: var(--wy-muted);
  font-size: 14px;
  line-height: 1.55;
}

.wybench-card ul,
.wybench-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.wybench-page-title {
  padding: 42px 0 18px;
}

.wybench-page-title h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 70px);
  line-height: 1;
}

.wybench-page-title p {
  max-width: 820px;
  margin: 18px 0 0;
  color: #d5d5e4;
  font-size: 18px;
}

.wybench-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: var(--wy-panel);
  margin-top: 20px;
}

.wybench-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.wybench-leaderboard {
  max-width: 1060px;
}

.wybench-leaderboard-hero {
  max-width: 880px;
  padding-top: 54px;
}

.wybench-leaderboard-hero h1 {
  font-size: clamp(48px, 7vw, 82px);
}

.wybench-leaderboard-hero p {
  max-width: 760px;
  color: #cfcfe0;
  font-size: 19px;
}

.wybench-leaderboard-empty {
  margin-top: 18px;
  background:
    linear-gradient(135deg, rgba(99,102,241,.09), rgba(236,72,153,.06)),
    rgba(255,255,255,.03);
}

.wybench-leaderboard-table .wybench-table {
  min-width: 760px;
}

.wybench-leaderboard-table th,
.wybench-leaderboard-table td {
  padding: 16px;
}

.wybench-table th,
.wybench-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  font-size: 14px;
}

.wybench-table th {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.035);
}

.wybench-table td {
  color: var(--wy-muted);
}

.wybench-empty {
  padding: 26px;
  color: #d8d8e8;
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: var(--wy-panel);
  margin-top: 20px;
}

.wybench-empty strong {
  color: #fff;
}

.wybench-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--wy-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.wybench-field select,
.wybench-field input,
.wybench-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--wy-line);
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  color: #fff;
  padding: 0 12px;
  font: inherit;
}

.wybench-field textarea {
  min-height: 110px;
  padding: 12px;
  resize: vertical;
}

.wybench-admin-panel {
  display: none;
}

.wybench-admin-panel.is-visible {
  display: block;
}

@media (max-width: 920px) {
  .wybench-main { padding-top: 128px; }
  .wybench-hero { grid-template-columns: 1fr; }
  .wybench-grid,
  .wybench-link-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wybench-main { padding: 118px 18px 64px; }
  .wybench-grid,
  .wybench-link-grid { grid-template-columns: 1fr; }
  .wybench-title { font-size: 54px; }
  .wybench-subtitle { font-size: 18px; }
  .wybench-actions { flex-direction: column; }
  .wybench-button { width: 100%; }
}