.admin-navbar,
.admin-nav,
.admin-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.admin-navbar,
.admin-heading {
  justify-content: space-between;
}

.admin-nav {
  min-width: 0;
  flex-wrap: nowrap;
}

.admin-nav > a {
  color: var(--accent-light);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.admin-nav > a:hover,
.admin-nav > a:focus-visible {
  text-decoration: underline;
}

.admin-main {
  box-sizing: border-box;
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  padding: var(--spacing-2xl) 0 4rem;
}

.admin-heading {
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}

.admin-heading h1,
.admin-heading p,
.playground-card h2,
.playground-card p {
  margin-top: 0;
}

.admin-heading p,
.playground-card p {
  color: var(--text-secondary);
}

.admin-status {
  min-height: 1.5rem;
  margin-bottom: var(--spacing-lg);
  color: var(--text-secondary);
}

.admin-status.error {
  color: #fca5a5;
}

.playground-card {
  padding: var(--spacing-xl);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: var(--border-radius-lg);
  background: rgba(15, 23, 42, 0.72);
}

.playground-card > p {
  margin-bottom: 0;
}

.playground-grid-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.playground-grid-options button[aria-selected='true'] {
  border-color: var(--accent-light);
  background: rgba(37, 99, 235, 0.42);
  box-shadow: inset 0 -2px 0 var(--accent-light);
}

.playground-grid-panel[hidden] {
  display: none;
}