.teacher-detail-page .teacher-profile {
  margin-inline: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px !important;
  align-items: center;
}

.teacher-profile img {
  display: block;
  max-width: 200px;
  max-height: 250px;
  object-fit: cover;
  margin-inline: auto;
}

.teacher-profile h1 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.teacher-profile ul {
  padding-left: 20px;
  margin-bottom: 0;
  line-height: 1.9;
}

.teacher-detail-page h2 {
  font-size: 26px;
  font-weight: 800;
}

.teacher-detail-page .card {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  border-radius: 12px;
}

.teacher-detail-page .card-body { padding: 22px; }
.teacher-detail-page .card-title { font-size: 20px; font-weight: 700; }
.teacher-detail-page .card-text { overflow-wrap: anywhere; }
.teacher-detail-page .card-text:last-child { margin-bottom: 0; }

/* Override the older shared Bootstrap dark-mode rules on this page. */
:root[data-theme=dark] .teacher-detail-page .card {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

:root[data-theme=dark] .teacher-detail-page .text-muted {
  color: var(--muted) !important;
}

:root[data-theme=dark] .teacher-detail-page .badge.bg-secondary {
  background-color: #293b55 !important;
  color: var(--ink);
  border: 1px solid var(--line);
}

:root[data-theme=dark] .teacher-detail-page .btn-secondary {
  background-color: #293b55;
  border-color: #405676;
  color: var(--ink);
}

:root[data-theme=dark] .teacher-detail-page .btn-secondary:hover {
  background-color: #354c6c;
  border-color: #587298;
}

@media (max-width: 767px) {
  .teacher-profile img { max-width: 160px; max-height: 200px; margin-bottom: 24px; }
  .teacher-detail-page h2 { font-size: 23px; }
}