/* Profile menu modal (shared across pages) */
.profile-trigger{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.profile-trigger:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 137, 223, 0.18);
  border-radius: 999px;
}

.menu-modal-root{
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.menu-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.30);
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: auto;
}
.menu-modal{
  width: min(380px, 92vw);
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  padding: 12px 12px 14px;
}
.menu-modal h2{
  margin: 2px 0 10px;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
  color: #1f1f1f;
}
.menu-modal .menu-stack{
  display: grid;
  gap: 10px;
}
.menu-modal .menu-btn{
  height: 42px;
  border-radius: 10px;
  border: 1px solid #7e7e7e;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  color: #7f7f7f;
  cursor: pointer;
}
.menu-modal .menu-btn:hover{ background: #f6f6f6; }
.menu-modal .menu-btn:active{ transform: translateY(1px); }
.menu-modal .menu-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 137, 223, 0.16);
}
.menu-modal .section{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 900;
  color: #1f1f1f;
}
.menu-modal .logout{
  background: #ef3b1f;
  border-color: #ef3b1f;
  color: #fff;
}
.menu-modal .logout:hover{ background: #e53318; }
.menu-modal .cancel{
  background: #fff;
}

@media (max-width: 640px){
  .menu-modal{ border-radius: 16px; width: min(360px, 92vw); }
  .menu-modal .menu-btn{ height: 40px; }
}