.hof-page {
  padding: 48px 0 60px;
}

.hof-page__head {
  text-align: center;
  margin-bottom: 28px;
}
.hof-page__head .eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
}
.hof-page__head h1 { margin-bottom: 6px; }
.hof-page__head .security-page__sub { max-width: 480px; margin: 0 auto; }

.hof-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.hof-tab {
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.hof-tab:hover { color: #fff; text-decoration: none; }
.hof-tab.is-active { color: var(--yellow); border-bottom-color: var(--yellow); }

.hof-tabs--metric {
  margin-bottom: 28px;
  border-bottom: none;
}
.hof-tab--sm {
  padding: 6px 14px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  margin-bottom: 0;
}
.hof-tab--sm.is-active {
  border-color: var(--yellow);
  background: rgba(255, 184, 0, 0.06);
}

.hof-table .hof-rank {
  font-size: 1.1rem;
  width: 60px;
}
.hof-row--top { background: rgba(255, 184, 0, 0.04); }
.hof-highlight { color: var(--yellow); font-weight: 700; }

.hof-cell { line-height: 1.4; }
.hof-cell--active { background: rgba(255, 184, 0, 0.04); }
.hof-sub { display: block; font-size: 0.76rem; color: var(--text-faint); }
.hof-sub.hof-highlight { color: var(--yellow); }