/* Personal profile and account security surface.  It intentionally shares
   the same warm surface, indigo accent and spacing rhythm as the other
   drawers, while keeping account actions easy to find from the top bar. */
.account-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  min-height: 36px;
  padding: 4px 8px 4px 5px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #34415a;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  transition: background .18s ease, border-color .18s ease;
}
.account-menu-trigger:hover,
.account-menu-trigger:focus-visible {
  background: #f0eeff;
  border-color: #ddd7ff;
  outline: none;
}
.account-menu-trigger > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-avatar,
.profile-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: #6656d6;
  font-weight: 800;
  letter-spacing: .02em;
}
.account-menu-avatar { width: 28px; height: 28px; font-size: 11px; }
.account-menu-chevron { line-height: 1; margin-left: 1px; }

.profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 24;
  display: none;
  background: rgba(22, 30, 44, .34);
  backdrop-filter: blur(3px);
}
.profile-backdrop.open { display: block; }
.profile-drawer {
  position: fixed;
  z-index: 25;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(450px, 100vw);
  overflow: auto;
  padding: 28px 30px 38px;
  background: #fff;
  border-left: 1px solid #e1e5ee;
  box-shadow: -16px 0 46px rgba(27, 37, 62, .16);
  transform: translateX(105%);
  transition: transform .25s ease;
}
.profile-drawer.open { transform: translateX(0); }
.profile-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #edf0f5; }
.profile-drawer-head h2 { margin: 0; color: #25324a; font-size: 25px; letter-spacing: -.025em; }
.profile-identity { display: flex; align-items: center; gap: 14px; padding: 22px 0 18px; }
.profile-avatar { width: 52px; height: 52px; font-size: 17px; box-shadow: 0 0 0 4px #f0eeff; }
.profile-identity strong { display: block; color: #26334c; font-size: 18px; line-height: 1.25; }
.profile-identity span:not(.profile-avatar) { display: block; margin-top: 4px; color: #8995a9; font-size: 13px; }
.profile-role-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 27px; margin-bottom: 8px; }
.profile-role { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #f0eeff; color: #5f50c8; font-size: 12px; font-weight: 700; }
.profile-section { margin-top: 22px; padding-top: 21px; border-top: 1px solid #edf0f5; }
.profile-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.profile-section-heading strong { color: #26334c; font-size: 16px; }
.profile-section-heading span { color: #9aa5b7; font-size: 12px; }
.profile-form label { display: block; margin: 0 0 14px; color: #58667e; font-size: 12px; font-weight: 700; }
.profile-form input { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #dfe4ed; border-radius: 8px; background: #fafbfe; color: #26334c; font-size: 14px; outline: 0; }
.profile-form input:focus { border-color: #aaa1ef; box-shadow: 0 0 0 3px #efedff; }
.profile-form input[readonly] { color: #8793a7; background: #f5f7fa; cursor: not-allowed; }
.profile-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; margin-top: 5px; }
.profile-form-foot .primary-btn { flex: 0 0 auto; }
.profile-form-message { min-height: 18px; color: #1b9a79; font-size: 12px; line-height: 1.4; }
.profile-form-message.error { color: #ce5664; }
.profile-password-section { margin-top: 27px; }
.password-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin: -3px 0 16px; padding: 0; list-style: none; color: #8b96a9; font-size: 12px; }
.password-rules li::before { content: '○'; display: inline-block; width: 17px; color: #a7b0bf; font-size: 14px; vertical-align: -1px; }
.password-rules li.valid { color: #188c70; }
.password-rules li.valid::before { content: '✓'; color: #1aaa83; font-weight: 800; }

.forced-password-screen { z-index: 130; background: #f5f7fb; backdrop-filter: none; }
.forced-password-card { width: min(430px, 100%); }
.forced-password-card h2 { margin-bottom: 8px; }
.forced-password-card > p { margin: 0 0 22px; color: #69768c; font-size: 14px; line-height: 1.6; }
.forced-password-rules { margin-top: -4px; }
.forced-password-logout { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 0; background: transparent; color: #718097; font: inherit; font-size: 13px; cursor: pointer; }
.forced-password-logout:hover { color: #4e5c73; }

@media (max-width: 780px) {
  .account-menu-trigger { max-width: 170px; }
  .profile-drawer { padding: 23px 20px 32px; }
}
@media (max-width: 480px) {
  .account-menu-trigger > span:nth-child(2), .account-menu-chevron { display: none; }
  .account-menu-trigger { padding: 3px; }
  .profile-drawer { width: 100vw; }
}