.teacher-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-alt));
  box-shadow: var(--shadow);
}

.teacher-tab {
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--text-muted));
  font-weight: 700;
  min-height: 42px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.teacher-tab:hover {
  background: var(--surface-alt);
  color: var(--primary-dark);
  border-color: var(--primary-light);
  transform: translateY(-1px);
}

.teacher-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-light) 52%, transparent);
  outline-offset: 2px;
}

.teacher-tab.active,
.teacher-tab[aria-current="page"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.teacher-tab.active:hover,
.teacher-tab[aria-current="page"]:hover {
  background: var(--primary-dark);
  color: #fff;
}

@media (max-width: 640px) {
  .teacher-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 10px 10px 12px;
    scroll-padding-inline: 10px;
  }

  .teacher-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}