.control-nav {
  display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 22px; padding: 6px;
  border: 1px solid rgba(191, 238, 255, .24); border-radius: 14px;
  background: rgba(28, 25, 61, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.control-nav-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 10px; color: #d8d0e8; text-decoration: none;
  font-size: 14px; font-weight: 750; transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.control-nav-link:hover { border-color: rgba(191, 238, 255, .24); color: #fff; background: rgba(255, 255, 255, .07); }
.control-nav-link[aria-current="page"] {
  border-color: rgba(191, 238, 255, .32); color: #fffaff;
  background: linear-gradient(100deg, rgba(245, 191, 223, .2), rgba(185, 234, 255, .18));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.control-nav-spacer { flex: 1; }
.control-nav-lock {
  min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid rgba(191, 238, 255, .32);
  border-radius: 10px; color: #f9f5ff; background: rgba(255, 255, 255, .06);
  font: inherit; font-size: 13px; font-weight: 750; cursor: pointer;
}
.control-nav-lock:hover { border-color: rgba(255, 195, 224, .52); background: rgba(255, 195, 224, .1); }
.control-nav-lock:disabled { opacity: .55; cursor: wait; }
@media (max-width: 560px) {
  .control-nav { gap: 3px; }
  .control-nav-link { flex: 1; min-height: 40px; padding: 0 8px; font-size: 12px; }
  .control-nav-lock { padding: 0 9px; font-size: 11px; }
}