.profile-editor { background: var(--card, #fffdf8); border: 1px solid var(--line, #e2dbcd); border-radius: 18px; padding: 24px; margin: 20px 0; }
#profile-card { min-width: 0; scroll-margin-top: 150px; }
.profile-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.profile-editor-kicker { color: var(--green, #b8513d); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.profile-editor-heading h3 { font-family: var(--serif, serif); font-size: 21px; margin: 5px 0 0; }
.profile-editor-optional { color: var(--sub, #746e61); font-size: 11px; }
.profile-editor-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.profile-editor-main { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 28px; }
.profile-editor-character { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-editor-preview { width: 144px; height: 144px; flex-shrink: 0; border-radius: 30px; overflow: hidden; box-shadow: 0 5px 18px #293f380c; }
.profile-editor-preview svg { display: block; width: 100%; height: 100%; }
.profile-editor-random { white-space: nowrap; font-size: 12px; min-height: 38px; }
.profile-editor-basic label { display: block; margin: 0 0 7px; font-weight: 600; font-size: 13px; }
.profile-editor-basic label span { margin-left: 6px; color: var(--sub, #746e61); font-size: 10px; font-weight: 400; }
.profile-editor-basic input, .profile-editor-basic select { display: block; width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line, #e2dbcd); background: #fff; color: var(--text, #293f38); border-radius: 8px; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; margin-bottom: 16px; }
.profile-editor-demographics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.profile-editor-demographics > div { min-width: 0; }
.profile-editor-basic input::placeholder { color: #999383; font-size: 13px; }
.profile-editor-note { font-size: 11px; color: var(--sub, #746e61); line-height: 1.8; margin: 0; }
.profile-editor-customize { border-top: 1px solid var(--line, #e2dbcd); margin-top: 23px; padding-top: 8px; }
.profile-editor-customize > summary { padding: 12px 0; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent, #425f50); }
.profile-editor-choice-hint { font-size: 12px; color: var(--sub); line-height: 1.8; margin: 0 0 16px; }
.profile-editor-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 6px 0 16px; align-items: start; }
.avatar-field { border: 0; min-width: 0; margin: 0; padding: 0; }
.avatar-field legend { padding: 0; margin-bottom: 7px; font-weight: 600; font-size: 12px; color: var(--text); }
.avatar-field.is-open { grid-column: 1 / -1; }
.avatar-picker { border: 1px solid var(--line); border-radius: 12px; background: #fffdf9; overflow: hidden; }
.avatar-picker > summary { display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 8px; cursor: pointer; list-style: none; }
.avatar-picker > summary::-webkit-details-marker { display: none; }
.avatar-current-preview { display: grid; place-items: center; width: 46px; height: 42px; flex: 0 0 46px; border-radius: 7px; background: #f4efe6; overflow: hidden; }
.avatar-current-preview svg { width: 100%; height: 100%; display: block; }
.avatar-current-label { min-width: 0; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.avatar-picker-arrow { margin-left: auto; flex-shrink: 0; color: var(--sub); transition: transform .15s; }
.avatar-picker[open] .avatar-picker-arrow { transform: rotate(180deg); }
.avatar-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.avatar-option { position: relative; min-width: 0; cursor: pointer; }
.avatar-option input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.avatar-option-card { position: relative; height: 100%; min-height: 105px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 6px; border: 2px solid #e8e2d8; border-radius: 10px; background: #fff; }
.avatar-option-preview { display: grid; place-items: center; width: 64px; height: 56px; max-width: 100%; overflow: hidden; border-radius: 8px; background: #f6f1e8; }
.avatar-option-preview svg { width: 100%; height: 100%; display: block; }
.avatar-option-name { font-size: 12px; line-height: 1.5; text-align: center; color: var(--text); overflow-wrap: anywhere; }
.avatar-color-swatch { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); border: 1px solid #0002; box-shadow: 0 0 0 3px #fff; }
.avatar-option-preview .avatar-color-swatch { width: 40px; height: 40px; }
.avatar-option-check { position: absolute; right: 3px; top: 3px; background: var(--green); color: #fff; border-radius: 50%; width: 17px; height: 17px; font-size: 11px; text-align: center; line-height: 17px; visibility: hidden; }
.avatar-option input:checked + .avatar-option-card { border-color: var(--green); background: #fcf3ec; }
.avatar-option input:checked + .avatar-option-card .avatar-option-check { visibility: visible; }
.avatar-option input:focus-visible + .avatar-option-card { outline: 3px solid #425f5080; outline-offset: 2px; }
.avatar-option input:disabled + .avatar-option-card { cursor: wait; }
.avatar-picker > summary:focus-visible { outline-offset: -3px; }
.profile-editor-actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line, #e2dbcd); margin-top: 5px; padding-top: 18px; }
.profile-editor-status { font-size: 12px; color: var(--sub, #746e61); margin: 0; line-height: 1.6; }
.profile-editor-status.is-error { color: var(--danger, #a03d31); }
.profile-editor-save { flex-shrink: 0; min-height: 44px; }
.profile-editor :is(input:not([type="radio"]), select, button, summary):focus-visible { outline: 3px solid #b8513d66; outline-offset: 3px; }
.profile-editor fieldset:disabled { opacity: .65; }
@media (max-width: 600px) {
  .profile-editor { padding: 20px 16px; }
  .profile-editor-heading { flex-wrap: wrap; margin-bottom: 18px; }
  .profile-editor-heading h3 { font-size: 19px; }
  .profile-editor-main { grid-template-columns: 1fr; gap: 22px; }
  .profile-editor-character { flex-direction: row; justify-content: center; gap: 20px; }
  .profile-editor-preview { width: 104px; height: 104px; border-radius: 22px; }
  .profile-editor-controls { gap: 14px 10px; }
  .avatar-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-editor-actions { flex-direction: column; align-items: stretch; }
  .profile-editor-status { min-height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .avatar-picker-arrow { transition: none; } }
@media (max-width: 380px) {
  .profile-editor { padding-inline: 12px; }
  .profile-editor-character { flex-wrap: wrap; gap: 10px; }
  .profile-editor-controls { grid-template-columns: minmax(0, 1fr); }
}