.photo-drop { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px; border:1px dashed var(--line); border-radius:10px; }
.photo-drop small { flex-basis:100%; color:var(--muted); font-size:11px; }
.photo-drop>span { font-size:12px; color:var(--muted); }
.photo-drop.is-over { outline:2px solid var(--ink); background:var(--paper); }
.photo-file-input { position:absolute; width:1px; height:1px; padding:0; clip-path:inset(50%); overflow:hidden; }
.photo-file-input:focus-visible+button { outline:2px solid currentColor; outline-offset:3px; }
.photo-message { font-size:12px; line-height:1.5; margin:12px 0; min-height:18px; color:var(--muted); }
.photo-message.error { color:#b63828; }
.photo-workspace[hidden] { display:none; }
.photo-formats { display:flex; gap:10px; margin:12px 0; }
.photo-formats button { display:flex; align-items:center; gap:8px; padding:6px 10px 6px 6px; min-height:44px; border-radius:8px; font-size:12px; }
.photo-formats canvas { width:52px; height:34px; border-radius:4px; object-fit:cover; background:#000; }
.photo-formats button[aria-pressed=true] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.photo-stage { overflow:hidden; border-radius:10px; background:#000; }
.photo-stage canvas { display:block; width:100%; height:auto; background:#000; touch-action:none; cursor:grab; outline-offset:-4px; }
.photo-stage canvas:active { cursor:grabbing; }
.photo-instruction { color:var(--muted); font-size:11px; margin:8px 0; }
.photo-quality { font-size:12px; line-height:1.5; color:var(--muted); margin:8px 0; }
.photo-zoom { display:flex; align-items:center; gap:10px; margin:12px 0; }
.photo-zoom>button { min-width:44px; height:44px; padding:0; font-size:22px; }
.photo-zoom>label { flex:1; display:flex; align-items:center; gap:10px; font-size:12px; margin:0; }
.photo-zoom input { min-width:50px; width:100%; padding:0; height:32px; accent-color:var(--ink); }
.photo-zoom output { width:40px; font-size:12px; font-variant-numeric:tabular-nums; }
.photo-tools { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.photo-tools>label { display:flex; flex-direction:column; gap:5px; font-size:11px; margin:0; flex:1; min-width:130px; }
.photo-tools select { padding:10px; min-height:44px; }
.photo-tools button { padding:10px 12px; min-height:44px; font-size:12px; }
.photo-move { margin:12px 0; font-size:12px; color:var(--muted); }
.photo-move summary { padding:9px 0; cursor:pointer; }
.photo-move>div { display:flex; gap:8px; }
.photo-move button { min-width:44px; min-height:44px; }
.photo-remove { font-size:12px; margin-top:18px; min-height:32px; }
.is-removed .photo-workspace { opacity:.4; pointer-events:none; }
dialog.photo-dialog { max-width:640px; }
@media(max-width:540px) {
  .photo-dialog .editor-head { padding:18px; }
  .photo-dialog .editor-fields { padding:16px; }
  .photo-dialog .editor-footer { padding:14px 16px; }
  .photo-tools>label { flex-basis:100%; }
  .photo-tools button { flex:1; padding:9px 6px; }
  .photo-zoom { gap:6px; }
}