.portrait-editor{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:10px}.portrait-editor h2{margin-top:0}.portrait-drop-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:2px dashed var(--line);border-radius:9px;padding:20px;background:var(--cream);transition:border-color .15s,background .15s}.portrait-drop-zone.is-dragging{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,var(--cream))}.portrait-drop-zone>span{color:var(--muted)}.portrait-upload-preview{width:100%;display:flex;align-items:center;gap:16px;min-width:0}.portrait-upload-preview[hidden]{display:none}.portrait-upload-preview img{width:112px;height:112px;object-fit:contain;border-radius:8px;background:var(--line);flex-shrink:0}.portrait-upload-preview span{overflow-wrap:anywhere;font-size:12px}.portrait-upload-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.portrait-upload-actions button:disabled{opacity:.55;cursor:default}.portrait-upload-progress{display:block;max-width:100%;margin-top:16px;accent-color:var(--orange)}.portrait-upload-progress[hidden]{display:none}.portrait-upload-status{margin:12px 0 0;line-height:1.6;overflow-wrap:anywhere}.portrait-upload-status:empty{display:none}.portrait-upload-status.is-error{color:#d96650}[data-theme=light] .portrait-upload-status.is-error{color:#a32d1c}@media(max-width:520px){.portrait-editor{padding:16px}.portrait-drop-zone{padding:16px}.portrait-upload-actions .button{min-height:44px}.portrait-upload-preview{align-items:flex-start}.portrait-upload-preview img{width:88px;height:88px}}

/* The editable portrait remains the actual 96px profile image, not a separate panel. */
.portrait-editor-inline{margin:0 0 18px;padding:0;border:0;border-radius:0}
.portrait-editor-inline .hub-profile-heading{margin-bottom:10px}
.portrait-edit-target{padding:0;border:0;cursor:pointer;color:var(--ink);background:var(--line);flex-shrink:0}
.portrait-current{position:absolute;inset:0;display:block}
.portrait-current:has(.character-portrait:not([hidden]))>.portrait-initial{opacity:0}
.portrait-edit-hint{position:absolute;right:4px;bottom:4px;z-index:2;display:flex;align-items:center;gap:3px;padding:3px 5px;border-radius:4px;background:#17251fdd;color:#fff;font:600 9px/1.3 var(--sans);pointer-events:none}
.portrait-edit-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.portrait-edit-target:hover .portrait-edit-hint,.portrait-edit-target:focus-visible .portrait-edit-hint{background:#175fc4}
.portrait-edit-target.is-dragging{outline:3px dashed var(--orange);outline-offset:4px}
.portrait-editor-inline .portrait-upload-preview{max-width:380px;gap:10px;margin:10px 0}
.portrait-editor-inline .portrait-upload-preview img{width:64px;height:64px}
.portrait-editor-inline .portrait-upload-actions{margin-top:8px;gap:8px}
.portrait-editor-inline .portrait-upload-actions[hidden]{display:none}
.portrait-editor-inline .portrait-upload-status{max-width:520px;margin-top:8px;font-size:12px}
.portrait-editor-inline .portrait-upload-progress{margin-top:8px}
@media(max-width:520px){.portrait-editor-inline{padding:0}.portrait-editor-inline .portrait-upload-preview img{width:56px;height:56px}.portrait-editor-inline .portrait-upload-actions .button{padding:8px 10px}}