.module-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.lc-mod-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.2s ease;
  border: 1px solid var(--borders);
}

.lc-mod-nav.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lc-mod-nav.past {
  opacity: 0.4;
  color: var(--text-body);
}

.lc-mod-nav.future {
  color: var(--text);
  border-color: var(--borders);
}

.lc-mod-nav.future:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1);
}

/* Structural Course Elements */
html { scroll-behavior: smooth; }
#step-1, #step-2, #step-3, #step-4, #app { 
  scroll-margin-top: 60px; 
}

.app-frame { 
  width: 100%; 
  height: min(600px, 50vw); 
  aspect-ratio: 2 / 1; 
  border: none; 
  display: block; 
  background: var(--bg); 
}