.profile-form {
  width: min(680px,100%);
  margin: 28px auto 0;
  padding: 28px;
  border: 1px solid var(--ds-line);
  border-radius: 8px;
  background: var(--ds-surface);
}

.profile-form[hidden] {
  display: none;
}

.profile-form h2 {
  margin: 8px 0 22px;
  font-size: 24px !important;
}

.profile-form label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  color: var(--ds-secondary);
  font-size: 13px;
}

.profile-form :is(input:not([type=file]),textarea) {
  --ds-radius: 14px;
  --ds-control-line: transparent;
  background: var(--ds-raised);
}

.profile-form textarea {
  resize: none;
}

.profile-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.profile-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--ds-accent);
  font-size: 12px;
}

@media(max-width:700px) {
  .profile-form {
    margin-top: 20px;
    padding: 20px;
  }
}

.profile-form{margin-top:12px;padding:24px;border:0;border-radius:22px}
.profile-edit-avatar{width:64px;height:64px}
.profile-form :is(input:not([type=file]),textarea){font-size:16px}
.profile-form input[type=file]{max-width:100%;font-size:14px}
.profile-form-actions{position:sticky;bottom:16px;padding:12px 0;background:var(--ds-surface)}
.profile-form-actions button{min-height:44px;border-radius:999px}
@media(max-width:700px){.profile-form{padding:18px;margin-top:4px}.profile-form h2{font-size:24px}.profile-form label{margin:14px 0}}
