.settings-section {
  background: var(--theme-surface-subtle);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--block-space-half);
  margin-block-start: var(--block-space);
  padding: var(--block-space);
}

.settings-section > h2,
.settings-section > h3 {
  margin: 0;
}

.settings-section > p {
  color: var(--color-muted-ink);
  margin: 0;
}

.api-token-form {
  display: grid;
  gap: var(--block-space-half);
  margin-block: var(--block-space-half) var(--block-space);
  max-inline-size: 36rem;
}

.token-reveal {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.25rem;
  padding: var(--block-space-half);
}

.token-reveal p {
  margin: 0;
}

.token-reveal__value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.tokens-list,
.sessions-list {
  display: grid;
  gap: 0.65rem;
}

.token-card,
.session-card {
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space-half);
  justify-content: space-between;
  padding: var(--block-space-half);
}

.token-card__info,
.session-card__info {
  display: grid;
  gap: 0.2rem;
  min-inline-size: min(24rem, 100%);
}

.token-card__meta,
.session-card__meta {
  color: var(--color-muted-ink);
  font-size: 0.82rem;
}

.token-card__actions,
.session-card__actions {
  align-items: center;
  display: inline-flex;
}

.sessions-actions {
  margin-block-start: var(--block-space-half);
}

.badge {
  align-items: center;
  background: var(--theme-badge-bg);
  border: 1px solid color-mix(in srgb, var(--theme-badge-text) 22%, transparent);
  border-radius: var(--radius-full);
  color: var(--theme-badge-text);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.15rem 0.55rem;
  text-transform: uppercase;
}

.badge[data-variant="success"] {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
  color: color-mix(in srgb, var(--color-success) 80%, var(--theme-text));
}