.learn-panel {
  display: grid;
  gap: 1rem;
}

.learn-intro,
.learn-summary {
  color: var(--color-text-muted);
}

.learn-progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.learn-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  box-shadow: 0 0 18px rgba(97,218,251,.35);
}

.learn-grid {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.learn-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: start;
  padding: .95rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  transform: translateY(0);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.learn-step:hover {
  transform: translateY(-2px);
}

.learn-step.done {
  border-color: rgba(140,255,183,.45);
  box-shadow: inset 0 0 0 1px rgba(140,255,183,.18);
}

.learn-step h4 {
  font-size: var(--text-sm);
  margin-bottom: .25rem;
}

.learn-step p {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.learn-step-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(97,218,251,.12);
  font-size: 1.15rem;
}

.learn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.learn-badge.good {
  background: rgba(140,255,183,.12);
  color: #bbffd7;
  border-color: rgba(140,255,183,.34);
}

.learn-badge.warn {
  background: rgba(255,191,105,.12);
  color: #ffd8a1;
  border-color: rgba(255,191,105,.34);
}

.learn-badge.info {
  background: rgba(97,218,251,.12);
  color: #d8f7ff;
  border-color: rgba(97,218,251,.34);
}

.learn-callout {
  padding: .9rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.learn-callout.good {
  background: rgba(140,255,183,.08);
  border-color: rgba(140,255,183,.28);
}

.learn-callout.warn {
  background: rgba(255,191,105,.08);
  border-color: rgba(255,191,105,.28);
}

.learn-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.learn-checks span {
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.level-switcher {
  display: grid;
  gap: 1rem;
}

.level-switcher-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.level-switcher-buttons .mission-pill {
  min-width: 120px;
  justify-content: center;
}

.level-switcher-buttons .mission-pill.active {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: #07131a;
  border-color: transparent;
  font-weight: 800;
}