/* Account form: full-width photo row above two columns of stacked fields. */
@layer desktop-screen-fit {
  @media (min-width: 1101px) {
    /* Details content needs an intrinsic height; a zero flex basis collapses it.
       Let the outer card scroll if needed, never clip the form itself. */
    html body #settings-section#settings-section #account-settings-card > .settings-content,
    html body #settings-section#settings-section #account-settings-card .settings-account-layout {
      flex: 1 0 auto !important;
      height: auto !important;
      min-height: min-content !important;
    }
    html body #settings-section#settings-section #account-settings-card .settings-account-layout {
      overflow: visible !important;
    }
    html body #settings-section#settings-section #account-settings-card .account-actions--editor {
      position: sticky !important;
      bottom: 0 !important;
      z-index: 2 !important;
      flex-shrink: 0 !important;
      padding: 10px 20px !important;
      background: var(--account-photo-field) !important;
    }
    html body #settings-section#settings-section #account-settings-card .settings-form-section {
      grid-template-columns: minmax(160px, 19%) minmax(0, 1fr) !important;
      column-gap: 32px !important;
      padding: 10px 24px !important;
      align-items: stretch !important;
    }
    html body #settings-section#settings-section #account-settings-card .settings-section-intro {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      border-right: 1px solid var(--account-photo-border) !important;
      padding-right: 24px !important;
    }
    html body #settings-section#settings-section #account-settings-card .settings-mobile-section-icon { display: none !important; }
    html body #settings-section#settings-section #account-settings-card .settings-section-fields--two {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: none !important;
      gap: 10px 24px !important;
    }
    html body #settings-section#settings-section #account-settings-card .account-row {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 4px !important;
      align-items: start !important;
    }
    html body #settings-section#settings-section #account-settings-card .account-row label { text-align: left !important; }
    html body #settings-section#settings-section #account-settings-card .account-photo-editor {
      max-width: none !important;
      padding-bottom: 4px !important;
      border-bottom: 0 !important;
    }
    html body #settings-section#settings-section #account-settings-card .account-password-hint { grid-column: 1 / -1 !important; }
  }
}
/* The photo row is not a personal-details field; keep the mobile name pair together. */
@media (max-width: 1100px) {
  html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #account-settings-card .account-profile-fields .settings-field:nth-child(2),
  html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #account-settings-card .account-profile-fields .settings-field:nth-child(3) { grid-column: auto !important; }
}
/* Profile photo editor shared by desktop/mobile and dark/light themes. */
.account-crop-dialog {
  box-sizing: border-box; width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto; padding: 24px;
  border: 0; border-radius: 18px; color: #eaf3f8;
  background: linear-gradient(125deg, #123b49, #081d2c);
  box-shadow: 0 24px 80px #0008; font: inherit;
}
.account-crop-dialog::backdrop { background: #03121bc4; backdrop-filter: blur(6px); }
.account-crop-dialog h2 { margin: 0 0 8px; font-size: 21px; }
.account-crop-dialog p { margin: 0 0 16px; color: #a8bdca; font-size: 14px; }
.account-crop-dialog canvas {
  display: block; width: min(100%, 300px, 45dvh); height: auto; margin: 16px auto;
  border-radius: 50%; touch-action: none; cursor: grab; background: #102531;
  outline: 2px solid #26cbd4;
}
.account-crop-dialog canvas:active { cursor: grabbing; }
.account-crop-zoom { display: flex; gap: 16px; align-items: center; }
.account-crop-zoom input { flex: 1; min-width: 0; accent-color: #16cbd3; }
.account-crop-dialog .account-crop-error { color: #ff8891; margin: 12px 0; }
.account-crop-actions { display: flex; justify-content: flex-end; gap: 8px; }
.account-crop-actions button { padding: 10px 12px; min-height: 44px; border: 1px solid #547080; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 14px; }
.account-crop-actions [data-save] { background: #16cbd3; border-color: #16cbd3; color: #052630; font-weight: 700; }
.account-crop-actions button:disabled { opacity: .5; cursor: wait; }
html[data-appearance="light"] .account-crop-dialog { background: #f5fafc; color: #173653; }
html[data-appearance="light"] .account-crop-dialog p { color: #526e85; }
html[data-appearance="light"] .account-crop-dialog .account-crop-error { color: #b52d40; }
html body #settings-section#settings-section#settings-section #account-settings-card {
  --account-photo-surface: rgba(15, 43, 55, .56);
  --account-photo-border: rgba(118, 174, 194, .24);
  --account-photo-text: #eef5f8;
  --account-photo-muted: #9fb5c2;
  --account-photo-accent: #20d4dd;
  --account-photo-field: #0b202a;
}
html[data-appearance="light"] body #settings-section#settings-section#settings-section #account-settings-card {
  --account-photo-surface: #f4f9fc;
  --account-photo-border: #d4e3ec;
  --account-photo-text: #173653;
  --account-photo-muted: #637f98;
  --account-photo-accent: #009c93;
  --account-photo-field: #ffffff;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-editor {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: 72px minmax(170px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px 16px !important;
  width: 100% !important;
  max-width: 760px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--account-photo-border) !important;
  background: transparent !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-preview {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 68px !important;
  border: 2px solid color-mix(in srgb, var(--account-photo-accent) 70%, transparent) !important;
  border-radius: 50% !important;
  background-color: var(--account-photo-surface) !important;
  background-position: center !important;
  background-size: cover !important;
  color: var(--account-photo-accent) !important;
  font-size: 22px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-preview--image {
  color: transparent !important;
  font-size: 0 !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-copy {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-copy strong {
  color: var(--account-photo-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-copy small {
  color: var(--account-photo-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-btn {
  box-sizing: border-box !important;
  min-width: 94px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--account-photo-border) !important;
  border-radius: 6px !important;
  background: var(--account-photo-field) !important;
  color: var(--account-photo-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 680 !important;
  cursor: pointer !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-btn--change {
  border-color: var(--account-photo-accent) !important;
  color: var(--account-photo-accent) !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-btn--remove {
  color: #f06a77 !important;
}
html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-btn:disabled {
  cursor: default !important;
  opacity: .42 !important;
}

@media (max-width: 760px) {
  html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-editor {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 8px 12px !important;
    max-width: none !important;
    padding-bottom: 14px !important;
  }
  html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-preview {
    grid-row: 1 / 3 !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 19px !important;
  }
  html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }
  html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-btn {
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 11px !important;
  }
}

@media (max-width: 390px) {
  html body #settings-section#settings-section#settings-section #account-settings-card .account-photo-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}