.hub {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--space-l)) var(--space-s) var(--space-2xl);
}
.hub-head h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3xs);
  letter-spacing: -0.01em;
}
.hub-tag {
  color: var(--ink-soft);
  font-size: var(--text-base);
  margin: 0 0 var(--space-l);
}
.hub-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.hub-card {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-s);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-move-fast) var(--ease-cozy), box-shadow var(--dur-fade) var(--ease-cozy);
}
.hub-card[href]:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.hub-card:not([href]) { opacity: 0.7; cursor: default; }
.hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-bottom: var(--space-3xs);
}
.hub-card h2 { font-size: var(--text-lg); margin: 0; font-weight: var(--weight-semibold); }
.hub-card p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.hub-badge {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-control);
  color: var(--ink-soft);
  white-space: nowrap;
}
.hub-badge.is-active { color: var(--accent-strong); border-color: var(--accent); }

/* M5: плашка «Разминка дня» — выделена акцентной рамкой, стоит над списком игр */
.drill-plate { border-color: var(--accent); margin-bottom: var(--space-m); }
.drill-plate h2 { font-size: var(--text-base); }

/* «Атлас искажений» — та же акцентная рамка, стоит выше разминки */
.atlas-plate { border-color: var(--accent); margin-bottom: var(--space-m); }
.atlas-plate h2 { font-size: var(--text-base); }

/* «Лента» — та же акцентная рамка */
.feed-plate { border-color: var(--accent); margin-bottom: var(--space-m); }
.feed-plate h2 { font-size: var(--text-base); }