.profile-avatar { position: relative; overflow: hidden; }
.profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-settings {
  width: min(670px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid #dfe6f0; border-radius: 22px; background: #fff; color: #172b45;
  box-shadow: 0 32px 100px #08172e38; overflow: auto; overscroll-behavior: contain; font-family: Inter, system-ui, sans-serif;
}
.profile-settings::backdrop { background: #10203899; backdrop-filter: blur(5px); }
.profile-settings [hidden] { display: none !important; }
.profile-settings__header { position: relative; padding: 30px 32px 22px; }
.profile-settings__eyebrow { color: #69809c; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; }
.profile-settings h2 { margin: 8px 35px 8px 0; font-size: 25px; line-height: 1.3; font-weight: 700; letter-spacing: -.6px; }
.profile-settings p { margin: 0; color: #667890; font-size: 13px; line-height: 1.6; }
.profile-settings__close { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #f0f4f8; color: #60748e; font-size: 25px; line-height: 1; cursor: pointer; }
.profile-settings__close:hover { background: #e4ecf6; }
.profile-settings__tabs { display: flex; gap: 22px; margin: 0 32px; border-bottom: 1px solid #e7edf4; }
.profile-settings__tabs button { padding: 12px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #708096; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.profile-settings__tabs button[aria-selected=true] { color: #2563eb; border-bottom-color: #2563eb; }
.profile-settings form { padding: 25px 32px 28px; }
.profile-settings h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.profile-settings__photo-row { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.profile-settings__avatar { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 90px; height: 90px; border-radius: 24px; overflow: hidden; background: #edf3fe; color: #3b66b4; font-size: 28px; font-weight: 600; }
.profile-settings__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-settings__photo-actions { display: flex; gap: 12px; margin: 12px 0 8px; flex-wrap: wrap; }
.profile-settings__photo-actions button { min-height: 36px; padding: 7px 11px; border: 1px solid #dce5f3; border-radius: 8px; background: #fff; color: #2b61b6; font-size: 12px; font-weight: 600; cursor: pointer; }
.profile-settings__photo-actions button:hover { background: #eff5ff; }
.profile-settings__photo-actions [data-profile-remove] { color: #9b5260; border-color: transparent; }
.profile-settings__small { display: block; color: #8492a5; font-size: 10px; line-height: 1.6; }
.profile-settings .profile-settings__photo-status { margin: -6px 0 18px; color: #476b94; font-size: 12px; }
.profile-settings__photo-status:empty { display: none; }
.profile-settings__fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 19px 16px; }
.profile-settings__fields label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #3c506a; font-size: 12px; font-weight: 600; }
.profile-settings__fields label > span { color: #8592a5; font-size: 11px; font-weight: 400; line-height: 1.5; }
.profile-settings__fields input:not([type=checkbox]) { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 11px 13px; border: 1px solid #dce4ef; border-radius: 9px; background: #fcfdff; color: #203752; font: 400 14px Inter, system-ui, sans-serif; }
.profile-settings__fields input:focus { outline: 2px solid #80adf5; outline-offset: 1px; border-color: #6493e4; }
.profile-settings__fields input[readonly] { background: #f1f4f8; color: #73829a; }
.profile-settings__fields input[aria-invalid=true] { border-color: #d06776; }
.profile-settings__fields input::placeholder { color: #97a3b4; }
.profile-settings__wide { grid-column: 1 / -1; }
.profile-settings__section-heading { margin-bottom: 20px; }
.profile-settings__fields .profile-settings__section-heading { margin: 8px 0 -2px; padding-top: 18px; border-top: 1px solid #e7edf4; }
.profile-settings__fields .profile-settings__show-password { flex-direction: row; align-items: center; gap: 9px; font-weight: 400; cursor: pointer; }
.profile-settings__show-password input { width: 16px; height: 16px; accent-color: #2563eb; }
.profile-settings__google-note { padding: 18px; border: 1px solid #dfe8f6; border-radius: 12px; background: #f3f7fd; font-size: 13px; }
.profile-settings__google-note strong { display: block; margin-bottom: 6px; }
.profile-settings__footer { position: sticky; bottom: 0; z-index: 1; padding: 18px 32px; border-top: 1px solid #e6ecf3; background: #fff; }
.profile-settings__footer-actions { display: flex; justify-content: flex-end; gap: 12px; }
.profile-settings__footer button { min-height: 44px; padding: 11px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
.profile-settings__cancel { border: 1px solid #dfe6f0; background: #fff; color: #657791; }
.profile-settings__save { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.profile-settings__save span { padding-left: 12px; }
.profile-settings__save:hover { background: #1d4ed8; }
.profile-settings button:disabled { opacity: .55; cursor: wait; }
.profile-settings button:focus-visible { outline: 3px solid #83b2fb; outline-offset: 2px; }
.profile-settings .profile-settings__error { margin-bottom: 12px; color: #b43e54; font-size: 12px; }
.profile-settings__error:empty { display: none; }
.profile-settings__discard { margin-bottom: 15px; padding: 14px; border-radius: 10px; background: #fff7ed; }
.profile-settings__discard > div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.profile-settings__discard button { padding: 8px 10px; border: 1px solid #e8d8c8; background: #fff; color: #6c5239; font-size: 11px; }
.profile-settings-saved { max-width: 960px; margin: 0 auto 20px; padding: 14px 18px; border: 1px solid #bce8d2; border-radius: 12px; background: #edfaf3; color: #1f7150; font-size: 14px; }
@media (max-width: 540px) {
  .profile-settings { border-radius: 18px; }
  .profile-settings__header { padding: 24px 20px 18px; }
  .profile-settings h2 { font-size: 22px; }
  .profile-settings__close { right: 14px; top: 14px; }
  .profile-settings__tabs { margin: 0 20px; gap: 18px; }
  .profile-settings__tabs button { font-size: 11px; }
  .profile-settings form { padding: 22px 20px; }
  .profile-settings__photo-row { align-items: flex-start; gap: 13px; }
  .profile-settings__avatar { width: 66px; height: 66px; border-radius: 18px; font-size: 23px; }
  .profile-settings__photo-row p { font-size: 11px; }
  .profile-settings__fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .profile-settings__fields input:not([type=checkbox]) { font-size: 16px; }
  .profile-settings__footer { padding: 15px 20px; }
  .profile-settings__footer-actions button { padding: 11px 13px; }
}