.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:54px;
  border-bottom:1px solid var(--line);
  background:rgba(11,15,20,.96);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;
  align-items:baseline;
  gap:7px;
  white-space:nowrap;
}
.brand strong{font-size:.95rem;letter-spacing:-.02em}
.brand span{
  color:var(--accent);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.main-nav{display:flex;gap:5px}
.main-nav a{
  padding:7px 10px;
  border-radius:8px;
  color:var(--muted);
  font-size:.78rem;
}
.main-nav a:hover,.main-nav a.is-active{
  color:var(--text);
  background:#151d27;
}

/* Course navigation */
.course-nav-wrap{
  margin-bottom:13px;
}
.course-label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:var(--muted);
  font-size:.66rem;
}
.course-label strong{
  color:#c7d0da;
  font-weight:700;
}
.theory-progress{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:0 0 3px;
  scrollbar-width:thin;
}
.theory-progress a{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--muted);
  background:var(--panel-2);
  font-size:.69rem;
}
.theory-progress b{
  color:var(--accent);
  font-size:.66rem;
}
.theory-progress a:hover{
  color:var(--text);
  border-color:#445063;
}
.theory-progress a.is-active{
  color:var(--text);
  border-color:rgba(223,164,93,.65);
  background:var(--accent-soft);
}

/* previous / next */
.step-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:13px;
}
.step-nav a{
  display:grid;
  gap:2px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
}
.step-nav a:hover{border-color:#455264}
.step-nav a:last-child{text-align:right}
.step-nav small{color:var(--muted);font-size:.67rem}
.step-nav strong{font-size:.82rem}
.step-nav .disabled{
  opacity:.42;
  pointer-events:none;
}

@media(max-width:680px){
  .topbar{position:static}
  .step-nav{grid-template-columns:1fr}
  .step-nav a:last-child{text-align:left}
}