.calendar-modal-close:hover {
  background: rgba(255,255,255,0.35);
  color: #ffffff;
}

#calendar-student-view {
  padding: 14px 20px 20px;
}

.calendar-schedule-note {
  display: inline-block;
  background: rgba(37,99,235,0.08);
  color: #1a3560;
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.calendar-month-label {
  font-weight: 800;
  font-size: 1.1rem;
  color: #1a3560;
  min-width: 150px;
  text-align: center;
}

.calendar-nav-btn {
  border: none;
  background: #EEF2FF;
  color: #2563EB;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.calendar-nav-btn:hover {
  background: #2563EB;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f4f7fb;
  border: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: #233a52;
  transition: background 0.15s ease;
}

button.calendar-day {
  appearance: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

button.calendar-day:hover {
  background: #dce8ff;
}

.calendar-day.is-outside {
  background: transparent;
  border-color: transparent;
}

.calendar-day.is-lesson {
  background: rgba(37,99,235,0.1);
}

.calendar-day.is-today {
  background: #2563EB;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37,99,235,0.45);
}

.calendar-day.is-completed {
  background: rgba(22,163,74,0.12);
}

.calendar-day.is-completed .calendar-day-number {
  color: #16a34a;
}

.calendar-lesson-dot {
  position: absolute;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563EB;
}

.calendar-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(22,163,74,0.35);
}

.calendar-task-alert {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(245,158,11,0.4);
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f2f8;
  font-size: 0.78rem;
  color: #6b7f95;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend-item .calendar-lesson-dot {
  position: static;
}

.calendar-legend-item .calendar-check {
  position: static;
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
}

.calendar-legend-item .calendar-task-alert {
  position: static;
  width: 16px;
  height: 16px;
  font-size: 0.62rem;
}

.daily-tasks-modal-card {
  width: min(440px, 100%);
}

.daily-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.daily-task-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d5e0ec;
  background: #f6f9fd;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.daily-task-card:hover {
  border-color: #b9cbe2;
}

.daily-task-card.is-done {
  background: rgba(52, 211, 153, 0.12);
  border-color: #34d399;
}

/* Custom checkbox: the real <input> sits invisibly on top of the visual
   square (still focusable/clickable/screen-reader friendly) so we can
   draw our own check mark instead of the browser's default control. */
.daily-task-check-wrap {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.daily-task-checkbox {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.daily-task-checkbox:disabled {
  cursor: default;
}

.daily-task-check-visual {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  border: 2px solid #c3d3e6;
  background: #ffffff;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.daily-task-check-visual::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.daily-task-checkbox:checked ~ .daily-task-check-visual {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-color: transparent;
  box-shadow: 0 3px 8px rgba(22, 163, 74, 0.3);
}

.daily-task-checkbox:checked ~ .daily-task-check-visual::after {
  opacity: 1;
  transform: scale(1);
}

.daily-task-checkbox:disabled ~ .daily-task-check-visual {
  opacity: 0.6;
}

.daily-task-checkbox:focus-visible ~ .daily-task-check-visual {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

.daily-task-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #0f2a45;
  cursor: pointer;
}

.daily-task-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.daily-task-card.is-done .daily-task-text {
  color: #1a8f4c;
  text-decoration: line-through;
}

.daily-task-text a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a3560;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.daily-task-text a::after {
  content: "\2192";
  color: #2563EB;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.daily-task-text a:hover::after {
  transform: translateX(3px);
}

.daily-task-card.is-done .daily-task-text a {
  color: inherit;
}

.daily-task-card.is-done .daily-task-text a::after {
  display: none;
}

.daily-tasks-status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: #5b6f85;
  text-align: center;
  min-height: 1em;
}

.daily-tasks-status.is-error {
  color: #dc2626;
  font-weight: 700;
}

.daily-tasks-empty {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: #5b6f85;
  text-align: center;
}

.achievement-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid #d5e0ec;
  background: #f6f9fd;
  position: relative;
  transition: box-shadow 0.15s;
}

.achievement-item.is-earned {
  border-color: #f0c96a;
  background: linear-gradient(145deg, #fffbee, #f6faff);
  box-shadow: 0 4px 16px rgba(241, 198, 84, 0.2);
}

.achievement-item.is-locked {
  opacity: 0.55;
}

.achievement-item.cat-lessons.is-earned {
  border-color: #60b8ff;
  background: linear-gradient(145deg, #eef6ff, #f2faff);
  box-shadow: 0 4px 16px rgba(96, 184, 255, 0.18);
}

.achievement-item.cat-quiz.is-earned {
  border-color: #9b7ff0;
  background: linear-gradient(145deg, #f4f0ff, #faf7ff);
  box-shadow: 0 4px 16px rgba(155, 127, 240, 0.18);
}

.achievement-item.cat-dedication.is-earned {
  border-color: #56c992;
  background: linear-gradient(145deg, #edfff5, #f2fff8);
  box-shadow: 0 4px 16px rgba(86, 201, 146, 0.18);
}

.achievement-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #cfe0f3;
  background: #eaf2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.achievement-item.is-earned .achievement-icon {
  background: #fff3cc;
  border-color: #f0c96a;
}

.achievement-item.cat-lessons.is-earned .achievement-icon {
  background: #dff0ff;
  border-color: #60b8ff;
}

.achievement-item.cat-quiz.is-earned .achievement-icon {
  background: #ede8ff;
  border-color: #9b7ff0;
}

.achievement-item.cat-dedication.is-earned .achievement-icon {
  background: #d8ffe9;
  border-color: #56c992;
}

.achievement-text h4 {
  margin: 0 0 3px;
  font-size: 0.93rem;
  color: #143456;
  line-height: 1.3;
}

.achievement-text p {
  margin: 0;
  font-size: 0.82rem;
  color: #41576e;
  line-height: 1.4;
}

.achievement-xp-badge {
  align-self: flex-start;
  background: linear-gradient(135deg, #f0c96a, #f5a623);
  color: #5a3a00;
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 2px;
}

.achievement-item.cat-lessons .achievement-xp-badge {
  background: linear-gradient(135deg, #60b8ff, #1a8fe8);
  color: #fff;
}

.achievement-item.cat-quiz .achievement-xp-badge {
  background: linear-gradient(135deg, #9b7ff0, #6c44c8);
  color: #fff;
}

.achievement-item.cat-dedication .achievement-xp-badge {
  background: linear-gradient(135deg, #56c992, #2e7d55);
  color: #fff;
}

[data-theme="dark"] .achievement-item {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .achievement-item.is-earned {
  background: linear-gradient(145deg, rgba(240, 201, 106, 0.12), rgba(10, 22, 40, 0.6));
  border-color: rgba(240, 201, 106, 0.4);
}

[data-theme="dark"] .achievement-item.cat-lessons.is-earned {
  background: linear-gradient(145deg, rgba(96, 184, 255, 0.12), rgba(10, 22, 40, 0.6));
  border-color: rgba(96, 184, 255, 0.35);
}

[data-theme="dark"] .achievement-item.cat-quiz.is-earned {
  background: linear-gradient(145deg, rgba(155, 127, 240, 0.12), rgba(10, 22, 40, 0.6));
  border-color: rgba(155, 127, 240, 0.35);
}

[data-theme="dark"] .achievement-item.cat-dedication.is-earned {
  background: linear-gradient(145deg, rgba(86, 201, 146, 0.12), rgba(10, 22, 40, 0.6));
  border-color: rgba(86, 201, 146, 0.35);
}

[data-theme="dark"] .achievement-text h4 {
  color: #d8e8f8;
}

[data-theme="dark"] .achievement-text p {
  color: #8db0d0;
}

.achievement-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  gap: 10px;
  z-index: 1600;
}

.achievement-toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #12324f, #1f4f7a);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 26px rgba(12, 32, 59, 0.3);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 320px;
}

.achievement-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.achievement-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1.1rem;
}

.achievement-toast-content {
  display: grid;
  gap: 2px;
}

.achievement-toast-title {
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.achievement-toast-text {
  font-size: 0.85rem;
  color: #e5f1ff;
  line-height: 1.35;
}

.achievement-toast-points {
  font-weight: 700;
  color: #ffe08a;
}

@media (max-width: 640px) {
  .achievement-toast-container {
    left: 12px;
    right: 12px;
  }

  .achievement-toast {
    max-width: none;
    width: 100%;
  }
}

.profile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -14px -14px 16px -14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #143456 0%, #1c5fa0 100%);
  border-radius: 20px 20px 0 0;
}

.mentor-student-card .profile-topbar {
  justify-content: space-between;
}

.mentor-student-top-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.mentor-student-top-actions .admin-view-progress-btn,
.mentor-student-top-actions .mentor-homework-btn {
  padding: 6px 16px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .mentor-student-card .profile-topbar {
    flex-wrap: wrap;
  }

  .mentor-student-top-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.profile-topbar h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ID selector beats button[class*="close"] !important */
#profile-close-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 6px 14px !important;
  font-size: 0.88rem !important;
  box-shadow: none !important;
}

#profile-close-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: none !important;
  box-shadow: none !important;
}

.profile-mentor {
  margin-bottom: 12px;
}

.profile-user {
  margin-bottom: 12px;
}

.profile-user-card {
  border: none;
}

.profile-user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #143456;
  background: linear-gradient(135deg, #e7f1ff 0%, #f2f6fb 100%);
}

.profile-user-avatar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.profile-user-avatar-msg {
  font-size: 0.78rem;
  color: #5a6f87;
  font-weight: 600;
}

.profile-public-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .profile-public-stats {
    grid-template-columns: 1fr;
  }
}

/* ── People section (mentor + student stacked card) ── */
.profile-people {
  display: flex;
  flex-direction: column;
  background: #f8fafd;
  border: 1px solid #dde8f5;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}

.profile-people .profile-mentor {
  border-bottom: 1px solid #dde8f5;
  border-right: none;
  margin-bottom: 0;
}

.profile-people .profile-user {
  margin-bottom: 0;
}

.profile-mentor-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.profile-mentor-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2.5px solid #c0d4e8;
  background: #e2e9f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.profile-mentor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-mentor-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.profile-mentor-kicker {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.58rem;
  color: #7a95b0;
}

.profile-mentor-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: #143456;
  line-height: 1.25;
  word-break: break-word;
}

.profile-mentor-text {
  display: none;
}

.profile-mentor-contact {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}

.profile-mentor-contact-label {
  display: none;
}

.profile-mentor-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.profile-mentor-contact-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.profile-mentor-contact-actions .profile-support-icon {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 1.2, 0.35, 1);
}

.profile-mentor-contact-actions.is-visible .profile-support-icon {
  opacity: 1;
  transform: scale(1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

@keyframes mentor-contact-pop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.profile-mentor-contact-actions .profile-support-icon {
  width: 38px;
  height: 38px;
  box-shadow: 0 6px 12px rgba(16, 32, 56, 0.14);
}

.profile-mentor-contact-actions .profile-support-icon-img {
  width: 20px;
  height: 20px;
}

.profile-mentor-contact-actions .profile-support-icon-img--instagram {
  width: 24px;
  height: 24px;
}

.profile-mentor-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #d4deea;
  background: #ffffff;
  color: #1f3a55;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.profile-mentor-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(14, 31, 54, 0.16);
  border-color: #b9c8d8;
}

.profile-mentor-contact-btn.is-call {
  background: linear-gradient(135deg, #1f8f3a, #36c769);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(33, 150, 83, 0.24);
}

.profile-mentor-contact-btn.is-call:hover {
  box-shadow: 0 12px 22px rgba(33, 150, 83, 0.32);
}

.profile-mentor-contact-btn.is-telegram {
  background: linear-gradient(135deg, #1c8fd8, #2aabee);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(34, 158, 217, 0.24);
}

.profile-mentor-contact-btn.is-telegram:hover {
  box-shadow: 0 12px 22px rgba(34, 158, 217, 0.32);
}

.mentor-self-edit {
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #cfdae6;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.mentor-self-edit-title {
  margin: 0 0 10px;
  color: #143456;
  font-size: 1rem;
}

.mentor-self-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px) {
  .mentor-self-edit-grid {
    grid-template-columns: 1fr;
  }
}

.mentor-self-edit-input,
.mentor-self-edit-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #cfdae6;
  padding: 10px 12px;
  font-weight: 700;
  color: #16395d;
  background: #ffffff;
}

.mentor-self-edit-textarea {
  margin-top: 10px;
  resize: vertical;
  min-height: 86px;
}

.mentor-self-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.mentor-self-edit-save {
  border-radius: 12px;
  padding: 8px 18px;
}

.mentor-self-edit-msg {
  color: #35536f;
  font-weight: 700;
  font-size: 0.9rem;
}

.mentor-self-edit-msg.is-error {
  color: #b02a1f;
}

.mentor-self-edit-msg.is-success {
  color: #17633a;
}


.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-stat-card {
  background: #ffffff;
  border: 1px solid #cfdae6;
  border-top: 3.5px solid #b0c4d8;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
}

.profile-stat-card h4 {
  margin: 0 0 6px;
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  color: #4f657b;
  font-weight: 600;
}

.profile-stat-card p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #16395d;
}

/* Colored top accent per card type */
.profile-stat-card:has(#profile-level)              { border-top-color: #2563eb; }
.profile-stat-card:has(#profile-progress)           { border-top-color: #10b981; }
.profile-subscription-card                          { border-top-color: #f59e0b !important; }
.profile-achievements-card                          { border-top-color: #eab308 !important; }
.profile-stat-card:has(#profile-lessons-completed)  { border-top-color: #14b8a6; }
.profile-certificate-card                           { border-top-color: #f2c14e !important; }

/* .admin-head is shared with admin.html/mentor.html/school.html's own
   plain page-title bar - fine there, but next to this page's shadowed,
   organic-cornered cards below it now reads as flat and out of place
   (direct user feedback). Scoped to [data-parent-page] only, everywhere
   else keeps the shared flat style unchanged. */
[data-parent-page] .admin-head {
  border-radius: 22px 22px 22px 6px;
  box-shadow: 0 10px 22px rgba(20, 57, 93, 0.1);
}

/* parent.html's own dashboard layout - a hero card (level + average
   progress, the two numbers a parent actually opens this page for) followed
   by two labeled sections. First version of this page put 8 equal-weight
   .profile-stat-cards in a flat grid with a different accent color each -
   looked like "a big mess" (direct user feedback on a screenshot). Fix:
   one dominant hero number instead of two equal-weight cards for
   level/progress, section headers to group the rest, and exactly ONE
   accent color per section instead of one per card. */
.parent-dashboard-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* .profile-mentor-card is shared with the student's own profile modal,
   where it deliberately has no card look of its own (box-shadow: none,
   background: transparent) - it sits inside .profile-people's own boxed
   background there instead. On parent.html it's used standalone on the
   page, so left as-is it was the one block with no visible boundary at
   all next to the now-shadowed cards below it. Scoped to this page only. */
#parent-mentor-block .profile-mentor-card {
  background: #ffffff;
  border: 1px solid #cfdae6;
  border-radius: 22px;
  box-shadow: 0 10px 22px rgba(20, 57, 93, 0.1);
}

.parent-hero-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 18px 20px;
  /* Organic, slightly lopsided corner instead of a uniform rounded
     rectangle - one corner stays tighter so the shape reads as "soft
     blob", not "rounded square". */
  border-radius: 28px 28px 28px 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

.parent-hero-level-pill {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}

.parent-hero-main {
  flex: 1 1 200px;
  min-width: 0;
}

.parent-hero-label {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.parent-hero-percent {
  margin: 0 0 8px;
  font-size: 1.9rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.parent-hero-bar-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.parent-hero-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
  transition: width 0.4s ease;
}

.parent-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parent-section-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #16395d;
}

/* v1 of this section put every single fact (lessons, next-unlock,
   subscription, daily tasks / achievements, streak) in its own card -
   even with icons and pills added, 8 near-identical "card = one fact"
   boxes still read as repetitive, both in count and in structure
   (direct user feedback, twice). Fix: consolidate related facts into
   one combo card each - a primary number plus a smaller secondary
   line/pill underneath, real internal hierarchy instead of one fact
   per box. Course goes from 4 cards to 2, Engagement's two plain-text
   cards merge into 1 (leaving the two chart cards as they were - a
   chart is already visually distinct, not part of this problem). */
.parent-section-grid {
  display: grid;
  /* Two combo cards side by side, or three cards (combo + 2 charts) where
     the activity chart claims the full width of its own row below. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.parent-mini-card--duo-full {
  /* 1 / -1 always spans "every column there is" regardless of how many
     that turns out to be, so this never needs a matching mobile
     override the way a hardcoded "span N" would. */
  grid-column: 1 / -1;
}

.parent-mini-card {
  background: #ffffff;
  border: 1px solid #cfdae6;
  border-top: 3px solid transparent;
  /* Organic corner, not a plain rounded square - alternates direction per
     card (below) so the row has a gentle left-right rhythm instead of
     every card being identically shaped. */
  border-radius: 26px 26px 26px 6px;
  padding: 14px 16px;
  text-align: center;
  /* Lifted off the page instead of sitting flush with it - a soft shadow
     under the card, not a harder one that would compete with the organic
     corners above. */
  box-shadow: 0 10px 22px rgba(20, 57, 93, 0.1);
}

.parent-section-grid .parent-mini-card:nth-child(even) {
  border-radius: 26px 6px 26px 26px;
}

.parent-mini-card--duo-full {
  /* Alone on its own row (nothing to alternate against) - a fully rounded
     pill-ish shape reads better than an off-corner cut on a wide banner. */
  border-radius: 26px !important;
}

.parent-mini-card p {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: #16395d;
}

/* One accent color per section, not one per card - the thing that made the
   original layout read as a rainbow of unrelated cards. */
.parent-section--course .parent-mini-card { border-top-color: #0ea5e9; }
.parent-section--engagement .parent-mini-card { border-top-color: #f59e0b; }

.parent-chart-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.parent-chart-mini-card .profile-chart-title {
  margin: 0 0 2px;
}

/* Combo card: one primary fact (big number, icon baked in) plus a
   smaller secondary line or pill - real hierarchy inside the card
   instead of a second identical "label / value" pair. */
.parent-combo-primary {
  font-size: 1.7rem !important;
}

#parent-progress-lessons.parent-combo-primary::before      { content: "📚 "; }
#parent-progress-subscription.parent-combo-primary::before { content: "⏱️ "; }
#parent-progress-streak.parent-combo-primary::before        { content: "🔥 "; }

.parent-combo-secondary {
  margin-top: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #5b7089 !important;
}

#parent-progress-achievements.parent-combo-secondary::before { content: "🏆 "; }

.parent-combo-divider {
  height: 1px;
  margin: 10px 0;
  background: #e2eaf3;
}

/* Small in-card progress bar (lessons completed, achievements) - a
   completion fraction is a shape, not just a sentence containing two
   numbers. Same visual language as the hero bar above, scaled down. */
.parent-mini-bar-track {
  margin-top: 8px;
  height: 5px;
  border-radius: 999px;
  background: rgba(20, 57, 93, 0.1);
  overflow: hidden;
}

.parent-mini-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  transition: width 0.4s ease;
}

#parent-lessons-bar-fill { color: #0ea5e9; }
#parent-achievements-bar-fill { color: #f59e0b; }

/* Daily tasks: was a plain bold sentence ("1 day incomplete" / "All
   caught up") indistinguishable in weight from every other card's plain
   number - now a colored status pill, so "is this fine or does it need
   attention" reads from color+icon alone, the text is a second check. */
.parent-status-pill {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eef3f8;
  color: #4f657b;
}

.parent-status-pill.is-ok {
  background: rgba(16, 185, 129, 0.14);
  color: #0d7d5c;
}

.parent-status-pill.is-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #9a5b04;
}

/* Streak freezes: used to live inside the streak sentence as
   "5 days (1 ❄️)" - pulled into its own small chip so it reads as a
   separate fact about the streak, not more of the same text to parse. */
.parent-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 700;
}

/* Subscription time left: color instead of making a parent do the
   "is 3 days a lot?" math themselves - same idea as the accuracy ring's
   threshold coloring elsewhere on this page. */
#parent-subscription-card.is-warning .parent-combo-primary { color: #b45309; }
#parent-subscription-card.is-urgent .parent-combo-primary  { color: #b91c1c; }
#parent-subscription-card.is-warning   { border-top-color: #f59e0b; }
#parent-subscription-card.is-urgent    { border-top-color: #dc2626; }

/* Sizes tuned for a ~350-380px-wide desktop card read as oversized once
   the same combo card only gets ~170px on a 390px phone (2-up grid) -
   the big primary number especially, since "1 days 23 hours" at the
   desktop size either wraps awkwardly or crowds the card. Scale the
   whole card's type down a notch on mobile, not just the one number,
   so the primary/secondary size relationship stays proportional. */
@media (max-width: 640px) {
  .parent-hero-percent {
    font-size: 1.5rem;
  }
  .parent-hero-level-pill {
    font-size: 0.82rem;
    padding: 6px 12px;
  }
  .parent-mini-card {
    padding: 12px 12px;
  }
  .parent-combo-primary {
    font-size: 1.3rem !important;
  }
  .parent-combo-secondary {
    font-size: 0.76rem !important;
  }
  .parent-status-pill {
    font-size: 0.82rem !important;
    padding: 4px 10px;
  }
  /* .profile-level-badge is shared with the student's own profile modal
     (untouched, still full size there) - scoped down only inside this
     combo card, where "🎓 Level 2 — Learner" was wrapping to 2 lines on
     a ~170px-wide mobile card. */
  .parent-combo-card .profile-level-badge {
    font-size: 0.72rem;
    padding: 3px 9px;
    white-space: nowrap;
  }
  .parent-chip {
    font-size: 0.7rem;
  }
  .parent-section-title {
    font-size: 0.85rem;
  }
}

.profile-certificate-card p {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4f657b;
  margin: 0 0 10px;
}

.profile-certificate-btn {
  background: linear-gradient(135deg, #f0c96a, #f5a623);
  color: #5a3a00;
  border: none;
  font-weight: 800;
}

.profile-certificate-btn:hover {
  background: linear-gradient(135deg, #f5d585, #f7b13d);
}

[data-theme="dark"] .profile-certificate-card p {
  color: #9bb8d8;
}
.profile-stat-card:has(#profile-next-unlock)        { border-top-color: #8b5cf6; }

/* Emoji icons via CSS — no HTML change needed */
.profile-stat-card:has(#profile-level) h4::before             { content: "🎓 "; }
.profile-stat-card:has(#profile-progress) h4::before          { content: "📊 "; }
.profile-subscription-card h4::before                         { content: "⏱️ "; }
.profile-achievements-card h4::before                         { content: "🏆 "; }
.profile-stat-card:has(#profile-lessons-completed) h4::before { content: "📚 "; }
.profile-stat-card:has(#profile-next-unlock) h4::before       { content: "🔓 "; }

.profile-subscription {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.profile-subscription-card {
  padding: 12px 14px;
}

.profile-subscription-card p {
  font-size: 1.15rem;
}

.profile-achievements-card {
  text-align: center;
}

.profile-achievements-progress {
  margin: 6px 0 4px;
  font-size: 1rem;
  font-weight: 800;
  color: #143456;
}

.profile-level-badge {
  display: inline-block;
  margin: 0 auto 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #6a7cf0, #8a5cf5);
}

[data-theme="dark"] .profile-level-badge {
  background: linear-gradient(135deg, #4d5bd9, #6f3fd1);
}

.profile-achievements-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f4f7a;
}

.profile-achievement-pill {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3f8;
  border: 1px solid #cfdae6;
}

.profile-achievements-btn {
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 0.85rem;
  box-shadow: none;
}

/* ── Profile charts ── */
.profile-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.profile-chart-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-chart-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4f6a86;
  text-align: center;
  margin: 0;
}

.profile-activity-canvas {
  width: 100%;
  max-width: 220px;
  height: 56px;
  display: block;
}

.profile-accuracy-wrap {
  display: flex;
  justify-content: center;
}

.profile-accuracy-canvas {
  width: 80px;
  height: 80px;
  display: block;
}

.profile-chart-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: #6f8aa8;
  text-align: center;
  margin: 0;
}

.profile-upgrade-btn {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}

.profile-extras {
  margin-top: 10px;
  display: grid;
  gap: 12px;
}

.profile-modal-card .profile-upgrade-btn {
  margin: 0 auto;
}

.profile-extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-support {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.profile-support-label {
  margin: 0;
  font-weight: 700;
  color: #4f657b;
}

.profile-support-actions {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.profile-support-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #cfdae6;
  box-shadow: 0 10px 18px rgba(16, 32, 56, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.profile-support-icon[aria-label="Telegram"] {
  background: linear-gradient(135deg, #2aabee, #1d6fa5);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 0 16px 26px rgba(29, 111, 165, 0.22);
}

.profile-support-icon[aria-label="WhatsApp"] {
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 0 16px 26px rgba(18, 140, 126, 0.22);
}

.profile-support-icon[aria-label="Instagram"] {
  background: linear-gradient(135deg, #f58529, #dd2a7b 45%, #8134af 80%, #515bd4);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow: 0 16px 26px rgba(129, 52, 175, 0.22);
}

.profile-support-icon[aria-label="Gmail"] {
  background: linear-gradient(135deg, #ffffff, #f6f8ff);
  border-color: rgba(16, 37, 58, 0.14);
  box-shadow: 0 16px 26px rgba(13, 27, 42, 0.12);
}

.profile-support-icon[aria-label="Phone"] {
  background: linear-gradient(135deg, #ffffff, #f6f8ff);
  border-color: rgba(16, 37, 58, 0.14);
  box-shadow: 0 16px 26px rgba(13, 27, 42, 0.12);
}

.profile-support-icon[aria-label="Telegram"] .profile-support-icon-img,
.profile-support-icon[aria-label="WhatsApp"] .profile-support-icon-img,
.profile-support-icon[aria-label="Instagram"] .profile-support-icon-img {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

.profile-support-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(16, 32, 56, 0.22);
  filter: brightness(1.03);
}

.profile-support-icon-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.profile-support-icon-img--instagram {
  width: 32px;
  height: 32px;
}

.profile-support-icon-bg {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

.profile-support-telegram {
  background: linear-gradient(135deg, #2a9fd6, #167bbf);
}

.profile-support-gmail {
  background: linear-gradient(135deg, #f0544f, #c92b26);
}

.profile-upgrade-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.admin-panel-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff4d57 0%, #d81f2a 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  border: 2px solid #ffffff;
  box-shadow: 0 6px 14px rgba(216, 31, 42, 0.35);
  letter-spacing: 0.1px;
}

.header-greeting {
  position: absolute;
  left: calc(4% + 235px);
  top: 22px;
  transform: none;
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
  max-width: 34%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}

/* Desktop welcome greeting — shown below the hero image, not inside it */
.hero-greeting {
  display: none;
}

@media (min-width: 901px) {
  .header-greeting {
    display: none !important;
  }

  .hero-greeting {
    display: block;
    font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
    font-size: 2rem;
    font-weight: 700;
    color: #1a3252;
    text-align: center;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
  }

  [data-theme="dark"] .hero-greeting {
    color: #c8d8ec;
  }

  .quick-links {
    justify-content: center;
  }
}

.hero-header .logo {
  font-size: clamp(2rem, 4vw, 3.8rem);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.hero-header .btn {
  background: #ffffff;
  color: #1E2A38;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── Theme toggle button (sun / moon) ── */
.theme-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #1E2A38;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.theme-toggle-btn .theme-toggle-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 21px;
  font-style: normal;
  transition: opacity 0.25s ease, transform 0.4s ease;
}

.theme-toggle-btn .theme-toggle-icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle-btn .theme-toggle-icon--moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(240, 180, 41, 0.25);
}

[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon--sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ── Theme-switch reveal animation (View Transitions API) ──
   When the browser supports document.startViewTransition, script.js animates
   a soft circle growing outward from the toggle button so the new theme
   "washes over" the page instead of snapping instantly — like ink spreading
   from the sun/moon icon, or a spotlight of the new theme expanding to fill
   the screen. The NEW snapshot always sits on top and grows from a 0px circle
   at the click point to one big enough to cover the whole viewport, while the
   OLD snapshot simply waits underneath, fully visible in whichever area the
   new circle hasn't reached yet (see script.js for the matching clip-path
   keyframes). Keeping this the same in both directions means the new theme
   always appears first exactly where the user clicked and spreads outward from
   there — never the other way round, which used to read as a stray flash of
   the old theme lingering right where the eye is already looking. We turn off
   the browser's default cross-fade for the root snapshots so only our custom
   clip-path circle animation is visible. Browsers without support simply skip
   all of this and swap themes instantly, exactly as before. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}

/* Drawer (mobile) version of the toggle — looks like a regular menu button */
.drawer-theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.drawer-theme-toggle-btn .theme-toggle-icon {
  display: inline-flex;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.drawer-theme-toggle-btn .theme-toggle-icon--sun {
  opacity: 1;
  transform: scale(1);
}

.drawer-theme-toggle-btn .theme-toggle-icon--moon {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}

[data-theme="dark"] .drawer-theme-toggle-btn .theme-toggle-icon--sun {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}

[data-theme="dark"] .drawer-theme-toggle-btn .theme-toggle-icon--moon {
  position: static;
  opacity: 1;
  transform: scale(1);
}

#tasks-back-btn {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  color: #1E2A38;
  padding: 14px 28px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 1.1rem;
}

.login-modal {
  position: fixed;
  inset: 0;
  background: rgba(9, 22, 35, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 18px;
}

.login-modal.is-open {
  display: flex;
}

.login-modal-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 2px solid #213447;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 14px 30px rgba(8, 21, 34, 0.2);
}

.login-modal-card h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  color: #0f2a45;
}

.login-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b8c5d3;
  border-radius: 10px;
  padding: 11px 12px;
  margin-bottom: 10px;
  font-size: 1rem;
  font-family: inherit;
}

.login-show-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  color: #264a6b;
  font-size: 0.95rem;
  user-select: none;
}

.login-show-wrap input {
  width: auto;
  margin: 0;
}

.login-error {
  min-height: 20px;
  margin: 2px 0 10px;
  color: #b42318;
  font-weight: 600;
}

.login-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.login-cancel-btn {
  background: #e8edf3;
  color: #183756;
}

.login-submit-btn {
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
}

.login-submit-btn:disabled,
.enroll-submit-btn:disabled {
  background: linear-gradient(135deg, #d5dde8, #c6d0dc);
  color: #7a8797;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
  border: 1px solid #c4ceda;
  opacity: 1;
}

.legal-signup,
.legal-agree,
.parent-access-signup {
  margin: 12px 0 0;
  text-align: center;
  color: #16395d;
  font-size: 1.02rem;
  line-height: 1.4;
}

.legal-signup,
.parent-access-signup {
  margin-top: 14px;
  font-weight: 500;
}

.parent-access-card {
  max-width: 440px;
}

.parent-access-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.parent-access-header h3 {
  margin: 0;
}

.parent-access-header-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #eaf3ff, #d7e8fb);
  box-shadow: inset 0 0 0 1px rgba(19, 42, 70, 0.08);
}

.parent-access-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: parent-access-step;
}

.parent-access-steps li {
  counter-increment: parent-access-step;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  color: #16395d;
  font-size: 0.98rem;
  line-height: 1.4;
}

.parent-access-steps li span {
  flex: 1;
  min-width: 0;
}

.parent-access-steps li::before {
  content: counter(parent-access-step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fa7ff, #1682cf);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(1px);
}

.parent-access-bot-btn {
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: linear-gradient(135deg, #2aabee, #1d6fa5);
  box-shadow: 0 10px 22px rgba(29, 111, 165, 0.28);
}

.parent-access-bot-btn-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.parent-access-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  color: #7a8797;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.parent-access-divider::before,
.parent-access-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8e0ea;
}

.parent-access-status-hint {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.75;
}

.parent-access-status-icon {
  display: block;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 4px;
}

.legal-consent-wrap {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #16395d;
  font-size: 1.01rem;
  line-height: 1.35;
  text-align: left;
}

.legal-consent-wrap > span {
  max-width: 420px;
}

.login-form .legal-consent-checkbox,
.enroll-form .legal-consent-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-bottom: 0;
  flex: 0 0 18px;
  border-radius: 4px;
  accent-color: #1b78d8;
  cursor: pointer;
}

.legal-link {
  color: #176cd8;
  text-decoration: none;
  font-weight: 500;
}

.legal-link:hover {
  text-decoration: underline;
}

.legal-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 19, 34, 0.56);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1070;
  padding: 18px;
}

.legal-modal.is-open {
  display: flex;
}

.legal-modal-card {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #d6deea;
  box-shadow: 0 24px 50px rgba(8, 18, 34, 0.25);
  padding: 22px 20px 18px;
  position: relative;
}

.legal-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a94a2;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.legal-modal-close:hover {
  background: #eef3fa;
  color: #24344a;
}

.legal-modal-card h3 {
  margin: 0 0 10px;
  color: #123253;
  font-size: 1.8rem;
}

.legal-modal-card p {
  margin: 0 0 10px;
  color: #294c70;
  line-height: 1.5;
}

.legal-text {
  margin: 0;
  color: #294c70;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
}

.hero-header.is-compact {
  min-height: calc(var(--header-min-px) * 1px);
  padding: 12px 8%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.hero-header.is-compact::before {
  opacity: 0.95;
}

.hero-header.is-compact .logo {
  font-size: 2rem;
}

.hero-header.is-compact .header-actions {
  top: 50%;
  transform: translateY(-50%);
}

.hero-header.is-compact .header-greeting {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  left: calc(4% + 235px);
}

/* Desktop compact header: keep all action buttons aligned with Logout */
@media (min-width: 901px) {
  .hero-header.is-compact .header-actions {
    top: 14px;
    transform: none;
  }

  .hero-header.is-compact .header-greeting {
    top: 18px;
    transform: none;
  }
}

.btn {
  background: linear-gradient(135deg, #132a46, #1f4f7a);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(19, 42, 70, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-rgb: 255, 255, 255;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
      circle at var(--glow-x) var(--glow-y),
      rgba(var(--glow-rgb), 0.95) 0%,
      rgba(var(--glow-rgb), 0.42) 30%,
      rgba(var(--glow-rgb), 0) 70%
    );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.18s ease;
  mix-blend-mode: screen;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(19, 42, 70, 0.3);
  filter: brightness(1.03);
}

.btn.btn-exit {
  background: linear-gradient(135deg, #ffffff, #f3f6fb);
  color: #8f0f17;
  border: 1px solid rgba(143, 15, 23, 0.22);
  box-shadow: 0 10px 18px rgba(16, 39, 64, 0.14);
}