@import url('./vendor/cropper.min.css');

/* 头像列与昵称列各自成格，两个按钮单独占第二行：上传头像与保存资料落在同一横轴上。 */
.api-profile-layout { display: grid; grid-template-columns: 180px minmax(0, 480px); grid-template-areas: "avatar fields" "actions submit"; gap: 18px 36px; align-items: start; margin-top: 28px; }
.api-avatar-editor { grid-area: avatar; display: flex; align-items: center; flex-direction: column; gap: 14px; }
.api-avatar-actions { grid-area: actions; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.api-profile-submit { grid-area: submit; display: flex; align-items: flex-start; }
/* 主按钮投影收紧：默认投影向下多铺约 8px，会显得比旁边的“上传头像”更高；收紧后只多出约 1.5px。 */
.api-profile-submit .button-primary { box-shadow: 0 3px 10px -6px rgba(7, 137, 125, .45); }
.api-profile-submit .button-primary:hover { box-shadow: 0 4px 12px -6px rgba(7, 137, 125, .5); }
.api-profile-avatar { width: 112px; height: 112px; border-radius: 50%; background: #edf4f3; color: var(--primary-strong); display: grid; place-items: center; font-size: 34px; object-fit: cover; flex: none; overflow: hidden; }
.api-avatar-upload { position: relative; cursor: pointer; }
.api-avatar-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.api-avatar-upload:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }
.api-avatar-upload.is-disabled { opacity: .55; cursor: not-allowed; }
.api-panel .api-profile-fields { grid-area: fields; border: 0; padding: 0; margin: 0; min-width: 0; }
.api-profile-fields .field { margin-bottom: 0; }
.api-avatar-actions .link-button { min-height: 32px; }
.avatar-crop-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: white; }
.avatar-crop-dialog::backdrop { background: rgba(15, 29, 33, .55); }
.avatar-crop-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.avatar-crop-heading h2 { margin: 0; font-size: 22px; }
.avatar-crop-heading .icon-button { font-size: 26px; flex: none; }
.avatar-crop-stage { width: 100%; aspect-ratio: 1; background: #eef2f2; overflow: hidden; }
.avatar-crop-stage > img { display: block; max-width: 100%; }
.avatar-crop-stage .cropper-view-box, .avatar-crop-stage .cropper-face { border-radius: 50%; }
.avatar-crop-stage .cropper-view-box { outline: 2px solid white; outline-color: rgba(255, 255, 255, .9); }
.avatar-crop-zoom { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.avatar-crop-zoom input { flex: 1; width: 0; min-height: 28px; padding: 0; accent-color: var(--primary); }
.avatar-crop-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.avatar-crop-error { color: var(--danger); margin: 8px 0 0; }
@media (max-width: 600px) {
  .api-profile-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "avatar" "actions" "fields" "submit"; gap: 24px; }
  .api-profile-layout .button { width: 100%; }
  .avatar-crop-dialog { padding: 16px; }
}