/* RU: КГ2: окно «Изменить картинку» (picedit.js) — общее для студии, «Черновиков» и «Подать новые». CSP: только классы, без style=.
   EN: KG2: the "Change picture" window shared by the studio, drafts and quick posting. CSP: classes only. */
.st-dialog.pe-dialog { width: min(780px, calc(100vw - 32px)); }
.pe-body { display: grid; gap: 14px; }
.pe-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pe-pics figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.pe-pics img { width: 100%; aspect-ratio: 4 / 3; max-height: min(44vh, 440px); object-fit: contain; background: var(--surface-2); border-radius: var(--r-s); border: 1px solid var(--line); display: block; }
.pe-say { display: flex; gap: 8px; align-items: flex-start; }
.pe-say textarea { flex: 1; min-width: 0; }
.pe-chips { margin: 8px 0 10px; }
.pe-said { margin: 0; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.pe-steps { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 7px; }
.pe-steps li { display: flex; gap: 9px; align-items: center; color: var(--muted); }
.pe-steps li[data-state="ok"], .pe-steps li[data-state="go"] { color: var(--ink); }
.pe-steps li[data-state="go"] > span:nth-child(2) { font-weight: 600; }
.pe-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; box-sizing: border-box; }
.pe-steps li[data-state="ok"] .pe-dot { background: var(--ok); border-color: var(--ok); }
.pe-steps li[data-state="go"] .pe-dot { border-color: var(--acc); border-top-color: transparent; }
.pe-bar { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; margin: 4px 0 8px; }
.pe-bar i { display: block; height: 100%; width: 8%; background: var(--acc); transition: width .6s var(--ease); }
.pe-done { margin: 0; }
.pe-next { display: block; font-weight: 600; margin: 14px 0 6px; }
.chk li.wait { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .pe-steps li[data-state="go"] .pe-dot { animation: pe-spin 1s linear infinite; }
}
@keyframes pe-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .pe-pics { grid-template-columns: minmax(0, 1fr); }
  .pe-chips .btn { flex: 1 1 auto; }
}
.st-more-jobs > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); margin: 8px 0; }
.pe-dialog .pe-plate{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-s);padding:6px 10px}
.pe-dialog .pe-plate summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.pe-dialog .pe-lines{border:0;padding:0;margin:8px 0 0;display:grid;gap:6px}
.pe-dialog .pe-lines .chk-row{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}