/* FotoDoc Step 9 — UI-only changes. No crop/V22 geometry here. */

/* Root tools should use one neutral visual style; toggled processing state is not shown as a blue tile. */
#previewEditorContent .pe-strip > .pe-tool[data-pe-key="bgremove"].is-active,
#previewEditorContent .pe-strip > .pe-tool[data-pe-key="autocorrect"].is-active{
  color:var(--text-2)!important;
  background:transparent!important;
}
#previewEditorContent .pe-strip > .pe-tool[data-pe-key="bgremove"].is-active:hover,
#previewEditorContent .pe-strip > .pe-tool[data-pe-key="autocorrect"].is-active:hover{
  color:var(--text)!important;
  background:color-mix(in srgb,var(--accent) 7%,transparent)!important;
}

.change-photo-open{overflow:hidden;}
.change-photo-dialog{
  position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:18px;
  opacity:0;transition:opacity .16s ease;
}
.change-photo-dialog[hidden]{display:none!important;}
.change-photo-dialog.is-open{opacity:1;}
.change-photo-backdrop{position:absolute;inset:0;border:0;background:rgba(4,10,18,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.change-photo-panel{
  position:relative;width:min(520px,100%);padding:18px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface-solid);box-shadow:0 26px 80px rgba(0,0,0,.28);color:var(--text);
  transform:translateY(8px) scale(.985);transition:transform .16s ease;
}
.change-photo-dialog.is-open .change-photo-panel{transform:translateY(0) scale(1);}
.change-photo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.change-photo-head h2{margin:0;font-size:20px;line-height:1.15;}
.change-photo-head p{margin:5px 0 0;color:var(--muted);font-size:11px;}
.change-photo-close{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.change-photo-drop{
  min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:20px;
  border:1.5px dashed color-mix(in srgb,var(--accent) 44%,var(--line));border-radius:15px;
  background:color-mix(in srgb,var(--accent) 4%,var(--surface));text-align:center;cursor:pointer;outline:none;
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.change-photo-drop:hover,.change-photo-drop:focus-visible,.change-photo-drop.is-dragging{
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));
}
.change-photo-drop.is-dragging{transform:scale(.995);}
.change-photo-drop svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.change-photo-drop strong{font-size:14px;}
.change-photo-drop small{color:var(--muted);font-size:10.5px;}
.change-photo-browse{width:100%;margin-top:12px;min-height:44px;}

@media(max-width:760px){
  .change-photo-dialog{align-items:end;padding:0;}
  .change-photo-panel{width:100%;border-radius:20px 20px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom));}
  .change-photo-head h2{font-size:18px;}
  .change-photo-drop{min-height:142px;padding:17px;}
  .change-photo-browse{min-height:48px;font-size:12px;}
}