.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-upload { flex-wrap: wrap; margin: 0; }
.photo-upload .duo-photo-preview { width: 76px; height: 76px; flex: 0 0 76px; }
.photo-upload-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.photo-upload-actions [hidden] { display: none; }
.photo-picker { position: relative; overflow: hidden; cursor: pointer; }
.photo-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-picker:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.photo-help { line-height: 1.65; margin: 10px 0; max-width: 560px; }
.photo-save-status { color: var(--green); line-height: 1.6; margin: 8px 0; }
.photo-save-status:empty { display: none; }
.photo-save-status.is-error { color: #ffb2a2; }
.profile-photo-panel { margin-bottom: 26px; }
.profile-photo-panel h2 { margin-bottom: 18px; }
.profile-photo-panel .photo-form { max-width: 660px; }
.photo-editing { overflow: hidden; }
.photo-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: #eef4ed; background: #111917; border: 1px solid #435746; border-radius: 18px; padding: 0; box-shadow: 0 24px 100px #000a; }
.photo-dialog::backdrop { background: #030906c9; backdrop-filter: blur(5px); }
.photo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; border-bottom: 1px solid #2b3931; }
.photo-dialog-head .eyebrow { display: block; margin-bottom: 8px; }
.photo-dialog h2 { font: 800 25px/1.25 Manrope, Arial, sans-serif; letter-spacing: -.04em; margin: 0; }
.photo-dialog-head .icon-button { font-size: 26px; flex: none; }
.photo-dialog-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding: 24px 26px 12px; }
.photo-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid #78955c; border-radius: 8px; touch-action: none; cursor: grab; }
.photo-stage canvas:active { cursor: grabbing; }
.photo-stage canvas:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.photo-stage p { line-height: 1.65; }
.photo-source-info { font-size: 11px; color: #a7b4aa; }
.photo-result { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 5px 12px; padding: 12px; border: 1px solid #334b34; border-radius: 8px; background: #1a281d; }
.photo-result > span { color: #a8b8a6; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.photo-result strong { grid-column: 1; font-size: 12px; line-height: 1.7; color: #bdff71; }
.photo-result img { grid-column: 2; grid-row: 1 / 3; width: 64px; height: 64px; border-radius: 5px; }
.photo-controls { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.photo-controls h3 { font-size: 13px; margin: 0; }
.photo-controls h3:not(:first-child) { padding-top: 9px; border-top: 1px solid #2b3931; }
.photo-controls label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; color: #c5d1c5; }
.photo-controls output { color: var(--green); font-variant-numeric: tabular-nums; }
.photo-controls input[type=range] { width: 100%; height: 22px; padding: 0; accent-color: var(--green); cursor: pointer; background: transparent; }
.photo-controls select { width: 100%; padding: 10px; color: #eef4ed; background: #1b251f; border: 1px solid #3b4c40; border-radius: 5px; font: inherit; }
.photo-control-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-controls p { margin: 0; font-size: 10px; line-height: 1.6; }
.photo-controls [data-reset] { align-self: flex-start; padding: 4px 0; }
.photo-editor-error { color: #ffb2a2; font-size: 12px; margin: 0 26px 12px; }
.photo-editor-error:empty { display: none; }
.photo-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px 22px; }
.photo-dialog-foot > div { display: flex; gap: 8px; }
.photo-dialog-foot p { max-width: 200px; line-height: 1.5; margin: 0; }
.photo-dialog button:disabled { opacity: .45; cursor: wait; }
@media(max-width: 620px) {
  .photo-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .photo-dialog-head { padding: 16px; }
  .photo-dialog-body { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  .photo-stage canvas { max-width: 300px; margin: auto; }
  .photo-dialog-foot { flex-direction: column; align-items: stretch; padding: 16px; }
  .photo-dialog-foot > div { justify-content: stretch; }
  .photo-dialog-foot .button { flex: 1; }
  .photo-dialog-foot p { max-width: none; }
}