/* v2.18 — slightly smaller proportional header + circular profile menu. */
@media (min-width: 1061px) {
  #main-header {
    min-height: 94px !important;
    padding: .72rem 1rem !important;
    gap: .75rem !important;
    border-radius: 27px !important;
    box-shadow: 0 14px 34px rgba(46,78,112,.085) !important;
  }
  #main-header > div:first-child {
    flex: 0 0 150px !important;
    width: 150px !important;
  }
  #main-header > div:first-child img {
    width: 142px !important;
    max-width: 142px !important;
  }
  #student-nav:not(.hidden),
  #teacher-nav:not(.hidden) {
    max-width: 748px !important;
    gap: .22rem !important;
    padding: .25rem !important;
    border-radius: 17px !important;
  }
  #student-nav .mv-student-nav-btn,
  #teacher-nav button {
    min-height: 46px !important;
    padding: .55rem .6rem !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
    gap: .38rem !important;
  }
  #teacher-nav button i,
  #student-nav .mv-student-nav-icon {
    width: 1.72rem !important;
    height: 1.72rem !important;
    flex-basis: 1.72rem !important;
    border-radius: .6rem !important;
    font-size: .76rem !important;
  }
  #student-nav .mv-student-nav-btn.is-active::after,
  #teacher-nav button.bg-brand-blue::after {
    bottom: -6px !important;
    height: 3px !important;
  }
  #user-header-info {
    flex: 0 0 150px !important;
    width: 150px !important;
    justify-content: flex-end !important;
  }
}

@media (min-width: 769px) and (max-width: 1060px) {
  #main-header {
    min-height: 88px !important;
    padding: .68rem .82rem !important;
    gap: .4rem !important;
  }
  #main-header > div:first-child {
    flex: 0 0 126px !important;
    width: 126px !important;
  }
  #main-header > div:first-child img {
    width: 120px !important;
    max-width: 120px !important;
  }
  #student-nav:not(.hidden), #teacher-nav:not(.hidden) {
    max-width: 650px !important;
    padding: .18rem !important;
  }
  #student-nav .mv-student-nav-btn, #teacher-nav button {
    min-height: 44px !important;
    padding: .48rem .42rem !important;
    font-size: .74rem !important;
    gap: .22rem !important;
  }
  #teacher-nav button i,
  #student-nav .mv-student-nav-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    flex-basis: 1.5rem !important;
    font-size: .7rem !important;
  }
  #user-header-info {
    flex: 0 0 126px !important;
    width: 126px !important;
    justify-content: flex-end !important;
  }
}

/* Circular profile trigger replaces the long user/status pill and standalone logout icon. */
#user-header-info {
  position: relative;
  display: flex !important;
  align-items: center !important;
}
.mv-profile-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mv-profile-trigger {
  position: relative;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible;
  border-radius: 999px !important;
  background: #fff !important;
  border: 2px solid #dbeafe !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.08), inset 0 0 0 3px #f8fbff !important;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}
.mv-profile-trigger.is-student { border-color:#fde68a !important; }
.mv-profile-trigger.is-teacher { border-color:#c7d2fe !important; }
.mv-profile-trigger:hover,
.mv-profile-trigger:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.12), inset 0 0 0 3px #fff !important;
  outline: none;
}
.mv-profile-avatar {
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: linear-gradient(145deg,#fff9df,#fff);
  font-size: 1.42rem;
  line-height: 1;
}
.mv-profile-trigger.is-teacher .mv-profile-avatar {
  background: linear-gradient(145deg,#eef2ff,#fff);
}
.mv-profile-status-dot {
  position:absolute;
  right:0px;
  bottom:1px;
  width:11px;
  height:11px;
  border-radius:999px;
  background:#06d6a0;
  border:2px solid #fff;
  box-shadow:0 1px 4px rgba(6,214,160,.35);
}
.mv-profile-menu {
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  z-index:130;
  width: 236px;
  padding:.55rem;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:rgba(255,255,255,.985);
  box-shadow:0 22px 50px rgba(15,23,42,.16), 0 5px 16px rgba(15,23,42,.06);
  backdrop-filter:blur(14px);
  transform-origin:top right;
  animation:mvProfileIn 130ms ease-out both;
}
@keyframes mvProfileIn {
  from { opacity:0; transform:translateY(-5px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.mv-profile-card-head {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.65rem;
  margin-bottom:.35rem;
  border-radius:15px;
  background:#f8fafc;
}
.mv-profile-card-head.is-student { background:linear-gradient(135deg,#fffbeb,#fff7ed); }
.mv-profile-card-head.is-teacher { background:linear-gradient(135deg,#eef2ff,#f8fafc); }
.mv-profile-avatar-large {
  width:43px;
  height:43px;
  flex:0 0 43px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 4px 10px rgba(15,23,42,.06);
  font-size:1.55rem;
}
.mv-profile-copy { min-width:0; text-align:left; }
.mv-profile-name {
  color:#1e293b;
  font-family:'Fredoka',sans-serif;
  font-size:.86rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mv-profile-meta {
  margin-top:.18rem;
  color:#64748b;
  font-size:.68rem;
  line-height:1.2;
  font-weight:800;
}
.mv-profile-action {
  width:100% !important;
  min-height:42px !important;
  padding:.48rem .55rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:.58rem !important;
  border-radius:13px !important;
  color:#475569 !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  text-align:left !important;
  background:transparent !important;
}
.mv-profile-action:hover,
.mv-profile-action:focus-visible {
  background:#f8fafc !important;
  color:#0f172a !important;
  outline:none;
}
.mv-profile-action-icon {
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.mv-profile-action-icon.is-blue { background:#e0f2fe; color:#0284c7; }
.mv-profile-action-icon.is-rose { background:#ffe4e6; color:#e11d48; }
.mv-profile-action-logout { color:#be123c !important; }

@media (max-width: 768px) {
  #main-header {
    min-height: 76px !important;
    padding: .58rem .68rem !important;
    gap: .45rem !important;
  }
  #main-header > div:first-child img {
    width: 112px !important;
    max-width: 112px !important;
  }
  #user-header-info {
    flex: 0 0 auto !important;
    width:auto !important;
    margin-left:auto;
  }
  .mv-profile-trigger {
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
  }
  .mv-profile-avatar { width:33px; height:33px; font-size:1.18rem; }
  .mv-profile-status-dot { width:10px; height:10px; }
  .mv-mobile-menu-toggle {
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
    border-radius:13px !important;
  }
  .mv-profile-menu {
    position:fixed;
    right:12px;
    top:78px;
    width:min(236px,calc(100vw - 24px));
  }
}
@media (max-width: 420px) {
  #main-header > div:first-child img { width:102px !important; max-width:102px !important; }
}