.lang-selector {
  margin-bottom: var(--space-xl);
}

.lang-selector__header {
  margin-bottom: var(--space-md);
}

.lang-selector__header h2 {
  margin: 0 0 var(--space-xs);
  color: var(--color-heading);
}

.lang-selector__header p {
  margin: 0;
  color: var(--color-muted);
}

.lang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  min-width: 0;
}

.lang-card {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.lang-card:hover {
  transform: translateY(-1px);
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
}

.lang-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.lang-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .35);
}

.lang-card__meta {
  min-width: 0;
}

.lang-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9rem;
  color: #0f172a;
}

.lang-card[data-lang="python"] .lang-card__icon {
  background: linear-gradient(135deg, #f7df5e, #7ec8ff);
}

.lang-card[data-lang="javascript"] .lang-card__icon {
  background: linear-gradient(135deg, #f7df1e, #ffc34d);
}

.lang-card[data-lang="c"] .lang-card__icon {
  background: linear-gradient(135deg, #bfd0ff, #7e99ff);
}

.lang-card[data-lang="java"] .lang-card__icon {
  background: linear-gradient(135deg, #ffd6a5, #ff8a65);
}

.lang-card[data-lang="csharp"] .lang-card__icon {
  background: linear-gradient(135deg, #c7b8ff, #8f7bff);
}

.lang-card[data-lang="cpp"] .lang-card__icon {
  background: linear-gradient(135deg, #b7e3ff, #4f9dff);
}

.lang-card[data-lang="php"] .lang-card__icon {
  background: linear-gradient(135deg, #d7d3ff, #8892bf);
}

.lang-card[data-lang="go"] .lang-card__icon {
  background: linear-gradient(135deg, #b8f0ff, #40c4ff);
}

.lang-card__meta strong {
  display: block;
  color: var(--color-heading);
}

.lang-card__meta span {
  display: block;
  color: var(--color-muted);
  font-size: .92rem;
  overflow-wrap: anywhere;
}

.lang-card__check {
  color: var(--color-muted);
  font-weight: 700;
}

.lang-card.is-active .lang-card__check {
  color: var(--color-primary);
}

.lesson-intro {
  margin-top: var(--space-md);
}

.lesson-intro p {
  margin: 0;
  color: var(--color-muted);
}

.topic-lead {
  margin: 0 0 var(--space-sm);
  color: var(--color-muted);
}

.syntax-note {
  margin: var(--space-sm) 0 0;
  color: var(--color-muted);
  font-size: .95rem;
}

.roadmap-list {
  margin: 0;
  padding-left: 1.2rem;
}

.roadmap-list li + li {
  margin-top: 6px;
}

.kbd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  font-family: var(--font-mono);
  font-size: .8rem;
}

.content-shell,
.content-article,
.content-article section,
.code-block,
.code-block pre {
  min-width: 0;
  max-width: 100%;
}

.code-block {
  overflow-x: auto;
}

.code-block pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 800px) {
  .lang-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .lang-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}