.photo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.photo-frame{width:144px;height:144px;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0;border:3px solid #fff;box-shadow:0 4px 16px rgba(0,0,0,.15);background:linear-gradient(160deg,#22355c 0%,var(--navy,#1a2744) 55%,#101d38 100%);touch-action:none}
.photo-frame.cropping{cursor:grab}
.photo-frame.cropping:active{cursor:grabbing}
.photo-frame .ph-fill{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top}
.photo-frame .ph-crop{position:absolute;left:0;top:0;max-width:none;-webkit-user-drag:none;user-select:none;pointer-events:none}

/* Placeholder: initialen of silhouet. Ook gebruikt door de avatars in het portal. */
.ph-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:800;letter-spacing:1.5px;color:rgba(255,255,255,.94);line-height:1;user-select:none;-webkit-user-select:none}
.ph-mark svg{display:block;width:66px;height:66px;color:rgba(255,255,255,.82)}

.photo-side{flex:1;min-width:210px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.btn-photo{padding:9px 16px;background:var(--navy,#1a2744);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-block}
.btn-photo:hover{background:#243356}
.btn-photo.ghost{background:transparent;border:1.5px solid var(--border,#e7e5e4);color:var(--navy,#1a2744)}
.btn-photo.ghost:hover{background:var(--bg,#f9f8f6);border-color:var(--navy,#1a2744)}
.btn-photo[disabled]{opacity:.5;cursor:default}

.photo-zoom{margin-top:16px;display:none}
.photo-zoom.show{display:block}
.photo-zoom input[type=range]{width:100%;accent-color:var(--navy,#1a2744);margin-top:2px}
.photo-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.photo-feedback{font-size:13px;font-weight:600;display:none}
.photo-feedback.show{display:inline}
.photo-feedback.ok{color:#16a34a}
.photo-feedback.err{color:#dc2626}

.photo-frame.vierkant{border-radius:12px;border:1px solid var(--border,#e7e5e4);box-shadow:none;
  background:var(--bg,#f9f8f6)}
.photo-frame.vierkant .ph-fill{object-position:center}

/* Liggende band: de headerfoto van een kaart of van een team. Zelfde editor, andere vorm.
   De verhouding 12/5 is die van het OPGESLAGEN bestand (1200x500), niet die van de band op de
   kaartpagina zelf — die is smaller en snijdt er dus alsnog in, en dat is precies wat de schuif
   "Positie op de kaart" verschuift. Breedte volgt de kolom; de JS meet dit frame en rekent de
   uitsnede terug naar de bron. */
.photo-frame.band{flex-basis:100%;width:100%;max-width:420px;height:auto;aspect-ratio:12/5;
  border-radius:12px;border:1px solid var(--border,#e7e5e4);box-shadow:none}
.photo-frame.band .ph-fill{object-position:center}