.client-photo-edit-button { position:absolute; z-index:2; top:9px; right:9px; min-height:32px; display:flex; align-items:center; gap:5px; padding:0 10px; border:1px solid rgb(255 255 255 / 75%); border-radius:8px; background:rgb(40 25 19 / 86%); color:#fff; font:750 11px 'Open Sans',sans-serif; box-shadow:0 4px 12px rgb(0 0 0 / 22%); cursor:pointer; backdrop-filter:blur(5px); }
.client-photo-edit-button:hover { background:#df6421; }
.client-photo-edit-button span { font-size:16px; line-height:1; }
.photo-editor-open { overflow:hidden; }
.photo-editor[hidden] { display:none; }
.photo-editor { position:fixed; inset:0; z-index:2500; display:grid; place-items:center; padding:20px; }
.photo-editor__backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgb(22 14 11 / 78%); backdrop-filter:blur(5px); }
.photo-editor__dialog { position:relative; width:min(840px,100%); max-height:calc(100vh - 40px); overflow:auto; border:1px solid #e2d6cf; border-radius:16px; background:#fff; box-shadow:0 28px 80px rgb(0 0 0 / 38%); }
.photo-editor__dialog>header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:16px 20px; border-bottom:1px solid #e9dfda; }
.photo-editor__dialog>header small { display:block; margin-bottom:3px; color:#c34d19; font-size:10px; font-weight:850; letter-spacing:.1em; }
.photo-editor__dialog>header h2 { margin:0; color:#281913; font-size:21px; }
.photo-editor__dialog>header p { margin:5px 0 0; color:#766b65; font-size:12px; }
.photo-editor__dialog>header>button { width:38px; height:38px; flex:0 0 38px; padding:0; border:1px solid #ddd1cb; border-radius:9px; background:#fff; color:#4c403a; font-size:25px; cursor:pointer; }
.photo-editor__stage { position:relative; width:min(760px,76vh,calc(100% - 40px)); aspect-ratio:4/3; display:grid; place-items:center; margin:16px auto 0; overflow:hidden; border-radius:12px; background:#211712; color:#fff; touch-action:none; cursor:grab; user-select:none; }
.photo-editor__stage.is-dragging { cursor:grabbing; }
.photo-editor__stage canvas { width:100%; height:100%; display:block; }
.photo-editor__stage>span { position:absolute; inset:0; display:grid; place-items:center; background:#211712; color:#eee3dd; font-size:13px; }
.photo-editor__stage>span[hidden] { display:none; }
.photo-editor__controls { display:grid; grid-template-columns:auto minmax(240px,1fr) auto; align-items:center; gap:12px; padding:13px 20px; }
.photo-editor__controls>div,.photo-editor__controls>label { display:flex; align-items:center; gap:7px; }
.photo-editor__controls>label>span { margin-right:3px; color:#615650; font-size:11px; font-weight:800; }
.photo-editor__controls button { min-height:38px; padding:0 12px; border:1px solid #d8cbc4; border-radius:8px; background:#fff; color:#463a34; font:750 11px 'Open Sans',sans-serif; cursor:pointer; }
.photo-editor__controls button:hover { border-color:#c9511c; color:#b54313; }
.photo-editor__controls label button { width:38px; padding:0; font-size:20px; }
.photo-editor__controls input[type=range] { min-width:100px; flex:1; accent-color:#d95c20; }
.photo-editor__message { min-height:20px; margin:0; padding:0 22px 10px; color:#39714c; font-size:12px; text-align:center; }
.photo-editor__message.is-error { color:#ae342c; }
.photo-editor__dialog>footer { position:sticky; z-index:3; bottom:0; display:flex; justify-content:flex-end; gap:9px; padding:12px 20px; border-top:1px solid #e9dfda; background:#faf7f5; box-shadow:0 -6px 18px rgb(40 25 19 / 7%); }
.photo-editor__dialog>footer button { min-height:44px; padding:0 18px; border-radius:8px; font:800 12px 'Open Sans',sans-serif; cursor:pointer; }
.photo-editor__dialog>footer .is-cancel { border:1px solid #d8ccc6; background:#fff; color:#5d514b; }
.photo-editor__dialog>footer .is-save { min-width:140px; border:1px solid #d95c20; background:#d95c20; color:#fff; }
.photo-editor__dialog>footer .is-save:disabled { opacity:.55; cursor:wait; }

@media (max-width:700px) {
    .photo-editor { padding:0; }
    .photo-editor__dialog { width:100%; max-height:100vh; border:0; border-radius:0; }
    .photo-editor__dialog>header { padding:16px; }
    .photo-editor__dialog>header h2 { font-size:20px; }
    .photo-editor__stage { width:100%; margin-top:0; border-radius:0; }
    .photo-editor__controls { grid-template-columns:1fr; padding:14px 16px; }
    .photo-editor__controls>div { display:grid; grid-template-columns:1fr 1fr; }
    .photo-editor__controls>label { width:100%; }
    .photo-editor__controls>button { width:100%; }
    .photo-editor__message { padding-right:16px; padding-left:16px; }
    .photo-editor__dialog>footer { position:sticky; bottom:0; padding:12px 16px; }
    .photo-editor__dialog>footer button { flex:1; }
    .client-photo-edit-button { min-height:30px; padding:0 8px; }
}