/* The photo editors that draw on a picture (blur, watermark): drop zone, preview stage and settings. */
.photo-edit{
    --pe-blue:#0f78a3;
    --pe-blue-dark:#095f82;
    --pe-blue-bright:#28b2e3;
    --pe-blue-soft:#eaf8fd;
    --pe-navy:#1f1932;
    --pe-text:#17211d;
    --pe-muted:#61706a;
    --pe-line:#e3e1ec;
    --pe-soft:#f5f9fd;
    width:var(--shell);
    margin-inline:auto;
    padding-top:12px;
    color:var(--pe-text);
}
.photo-edit *{box-sizing:border-box}
.photo-edit [hidden]{display:none!important}
.photo-edit button,
.photo-edit input,
.photo-edit select{font:inherit}

.photo-edit__trust{
    display:flex;
    flex-wrap:wrap;
    gap:9px 20px;
    max-width:900px;
    margin-bottom:14px;
    color:var(--pe-muted);
    font-size:13px;
    font-weight:800;
}
.photo-edit__trust span::before{content:"✓";margin-right:6px;color:var(--pe-blue-bright)}

.photo-edit__drop{
    display:block;
    width:100%;
    padding:26px 18px;
    border:1px dashed #b9d9e7;
    border-radius:14px;
    background:#fafdfe;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}
.photo-edit__drop:hover,
.photo-edit__drop.is-dragover{border-color:var(--pe-blue-bright);background:var(--pe-blue-soft)}
.photo-edit__drop strong{display:block;margin-bottom:7px;font-size:18px}
.photo-edit__drop small{color:var(--pe-muted)}
.photo-edit__file{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
}
.photo-edit__message{
    margin-top:12px;
    padding:11px 13px;
    border-radius:8px;
    background:var(--pe-soft);
    color:var(--pe-muted);
    font-size:14px;
    overflow-wrap:anywhere;
}
.photo-edit__message--error{background:#fff0f1;color:#8a2e3e}

.photo-edit__editor{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
    margin-top:16px;
    overflow:hidden;
    border:1px solid var(--pe-line);
    border-radius:20px;
    background:#fff;
    box-shadow:0 22px 55px rgba(31,25,50,.08);
}
.photo-edit__stage{min-width:0;padding:24px;border-right:1px solid var(--pe-line)}
.photo-edit__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:12px;font-size:12px;color:var(--pe-navy)}
.photo-edit__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-edit__change{
    min-height:44px;
    margin-left:auto;
    padding:0;
    border:0;
    background:transparent;
    color:var(--pe-blue);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}
.photo-edit__canvas{
    display:block;
    max-width:100%;
    max-height:70vh;
    margin-inline:auto;
    border-radius:8px;
    background:#eef1f4;
}
/* Dragging on the photo draws or places; it must not scroll the page. */
.photo-edit__canvas--draw{touch-action:none;cursor:crosshair}
.photo-edit__hint{margin-top:10px;color:var(--pe-muted);font-size:12px;line-height:1.5}

.photo-edit__controls{
    min-width:0;
    padding:24px 26px 28px;
    background:linear-gradient(180deg,#f8fbfe 0%,#f4f8fc 100%);
}
.photo-edit__card .tool-label{
    margin:0 0 12px;
    color:var(--pe-navy);
    font-family:Georgia,"Times New Roman",serif;
    font-size:23px;
    line-height:1.1;
}
.photo-edit__choice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;border:0}
.photo-edit__choice legend,
.photo-edit__legend,
.photo-edit__field label{
    display:block;
    width:100%;
    margin-bottom:6px;
    color:var(--pe-muted);
    font-size:11px;
    font-weight:800;
}
.photo-edit__choice label{
    display:inline-flex;
    flex:1 1 0;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:44px;
    padding:0 10px;
    border:1px solid #d2cdd9;
    border-radius:9px;
    background:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}
.photo-edit__choice label:has(input:checked){border-color:var(--pe-blue);background:var(--pe-blue-soft);color:var(--pe-blue-dark)}
.photo-edit__field{margin-top:12px}
.photo-edit__field output{float:right;color:var(--pe-navy)}
.photo-edit__field input[type="text"]{
    width:100%;
    min-height:46px;
    padding:8px 12px;
    border:1px solid #d2cdd9;
    border-radius:9px;
    background:#fff;
}
.photo-edit__field input[type="range"]{width:100%;min-height:32px;accent-color:var(--pe-blue)}
.photo-edit__inline{display:flex;align-items:center;gap:12px}
.photo-edit__inline label{width:auto;margin:0}
.photo-edit__inline input[type="color"]{width:64px;min-height:40px;padding:2px;border:1px solid #d2cdd9;border-radius:9px;background:#fff}
.photo-edit__check{display:flex;align-items:center;gap:8px;min-height:40px;margin-top:6px;font-size:13px;font-weight:700;cursor:pointer}
.photo-edit__grid{display:grid;grid-template-columns:repeat(3,44px);gap:6px}
.photo-edit__grid button{
    width:44px;
    height:44px;
    border:1px solid #d2cdd9;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}
.photo-edit__grid button::after{content:"";display:block;width:10px;height:10px;margin:auto;border-radius:50%;background:#c9cfd6}
.photo-edit__grid button[aria-pressed="true"]{border-color:var(--pe-blue);background:var(--pe-blue-soft)}
.photo-edit__grid button[aria-pressed="true"]::after{background:var(--pe-blue)}
.photo-edit__grid.is-off{opacity:.4}
.photo-edit__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.photo-edit__count{color:var(--pe-muted);font-size:12px;font-weight:800}
.photo-edit__secondary{
    min-height:44px;
    padding:0 14px;
    border:1px solid var(--pe-blue);
    border-radius:9px;
    background:#fff;
    color:var(--pe-blue-dark);
    font-size:13px;
    font-weight:850;
    cursor:pointer;
}
.photo-edit__secondary:disabled{opacity:.45;cursor:default}
.photo-edit__wide{display:flex;align-items:center;justify-content:center;width:100%;margin-top:12px}
.photo-edit__pick{margin:0 0 6px}
.photo-edit__primary{
    width:100%;
    min-height:52px;
    margin-top:18px;
    border:1px solid var(--pe-blue);
    border-radius:9px;
    background:var(--pe-blue);
    color:#fff;
    font-size:13px;
    font-weight:850;
    cursor:pointer;
}
.photo-edit__primary:hover:not(:disabled){border-color:var(--pe-blue-dark);background:var(--pe-blue-dark)}
.photo-edit__primary:disabled{opacity:.55;cursor:default}
.photo-edit button:focus-visible,
.photo-edit input:focus-visible{outline:3px solid rgba(40,178,227,.45);outline-offset:2px}
.photo-edit__result{margin-top:12px;color:var(--pe-muted);font-size:13px;line-height:1.5}
.photo-edit [data-batch]{margin-top:16px}

@media(max-width:900px){
    .photo-edit__editor{grid-template-columns:1fr}
    .photo-edit__stage{border-right:0;border-bottom:1px solid var(--pe-line)}
}
@media(max-width:600px){
    .photo-edit__stage,
    .photo-edit__controls{padding:14px 12px}
    .photo-edit__drop{padding:20px 14px}
}