.photo-overlay{z-index:65;padding:16px}
.photo-editor{display:flex;flex-direction:column;width:min(1280px,100%);height:min(900px,calc(100dvh - 32px));min-height:0;border:1px solid var(--nd-color-control-border);border-radius:18px;background:var(--nd-color-panel);color:var(--nd-color-text-primary);overflow:hidden;box-shadow:0 24px 100px color-mix(in srgb,var(--nd-color-scrim) 53%,transparent)}
.pe-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--nd-color-line)}
.pe-head>div{flex:1}
.pe-head h3{font-size:18px}
.pe-head p{margin-top:6px;color:var(--nd-color-text-secondary);font-size:12px}
.pe-body{display:grid;grid-template-columns:285px minmax(0,1fr);flex:1;min-height:0}
.pe-controls{overflow:auto;padding:18px;border-right:1px solid var(--nd-color-line)}
.pe-controls fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}
.pe-controls legend{font-size:14px;font-weight:600;margin-bottom:12px}
.pe-controls label{display:block;font-size:12px;color:var(--nd-color-text-secondary);margin-bottom:10px}
.pe-controls input:not([type=checkbox]),.pe-controls select{display:block;width:100%;padding:8px 10px;border:1px solid var(--nd-color-control-border);border-radius:8px;background:var(--nd-color-field);color:var(--nd-color-text-primary);margin-top:6px;min-width:0;font:inherit;font-size:16px;min-height:44px}
.pe-controls input[type=color]{height:44px;padding:4px}
.pe-controls input[type=range]{padding:0;accent-color:var(--nd-color-focus);height:44px}
.pe-controls input[type=checkbox]{accent-color:var(--nd-color-focus)}
.pe-controls .pe-check{display:flex;align-items:center;gap:8px;color:var(--nd-color-text-primary)}
.pe-controls legend .pe-check{margin-bottom:0}
.pe-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pe-tools,.pe-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pe-tools .btn,.pe-presets .btn{padding:7px 10px;font-size:12px}
.pe-tools .btn[aria-pressed=true]{border-color:var(--nd-color-focus);color:var(--nd-color-focus);background:var(--nd-color-inspector)}
.pe-controls small,.pe-help{display:block;color:var(--nd-color-text-secondary);font-size:12px;line-height:1.6}
.pe-help{margin:8px 0 12px}
.pe-work{display:flex;flex-direction:column;min-width:0;min-height:0;padding:16px;gap:12px}
.pe-meta{font-size:12px;color:var(--nd-color-text-secondary);overflow-wrap:anywhere}
.pe-stage{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background-color:var(--nd-color-page);background-image:linear-gradient(45deg,var(--nd-color-field) 25%,transparent 25%),linear-gradient(-45deg,var(--nd-color-field) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--nd-color-field) 75%),linear-gradient(-45deg,transparent 75%,var(--nd-color-field) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.pe-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;touch-action:none;box-shadow:0 6px 30px color-mix(in srgb,var(--nd-color-scrim) 33%,transparent)}
.pe-stage [hidden]{display:none}
.pe-empty{text-align:center;max-width:400px;padding:24px}
.pe-empty b{font-size:18px}
.pe-empty p{font-size:14px;line-height:1.7;color:var(--nd-color-text-secondary);margin:16px 0}
.pe-empty .btn{margin:auto}
.pe-status{min-height:32px;font-size:12px;color:var(--nd-color-text-secondary);line-height:1.5}
.pe-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--nd-color-line);background:var(--nd-color-field)}
#peOutput{font-size:12px;line-height:1.6;color:var(--nd-color-text-primary)}
.pe-actions{display:flex;flex-wrap:wrap;gap:8px}
.pe-actions .btn{font-size:12px;padding:9px 12px}
.photo-editor button:disabled,.photo-editor input:disabled,.photo-editor select:disabled{opacity:.45;cursor:default}
.pe-actions [hidden]{display:none}
.ref-edit{position:absolute;left:3px;bottom:21px;width:21px;height:21px;border-radius:5px;background:color-mix(in srgb,var(--nd-color-media) 80%,transparent);color:var(--nd-color-text-primary);font-size:14px;display:grid;place-items:center;opacity:.9;z-index:2}
.ref-edit:hover{color:var(--nd-color-focus)}
@media(max-width:780px){.photo-overlay{padding:0}
.photo-editor{width:100%;height:100dvh;border-radius:0}
.pe-head{padding:12px}
.pe-head h3{font-size:15px}
.pe-head p{display:none}
.pe-body{display:flex;flex-direction:column-reverse}
.pe-work{flex:1;min-height:180px;padding:10px;gap:6px}
.pe-controls{max-height:36dvh;flex-shrink:0;border-right:0;border-top:1px solid var(--nd-color-line);display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:18px;padding:12px}
.pe-controls fieldset{margin:0}
.pe-foot{padding:10px;display:block}
.pe-actions{margin-top:6px}
.pe-status{min-height:18px;font-size:12px}
.pe-meta{font-size:12px}
.pe-head .btn{font-size:12px;padding:8px}}
@media(max-width:420px){.pe-controls{gap:12px}
.pe-actions .btn{padding:8px;font-size:12px}}
.pe-target{border-top:1px solid var(--nd-color-line);margin-top:14px;padding-top:14px}
.pe-target .btn{width:100%;justify-content:center;margin-bottom:8px;font-size:12px}


.photo-editor :is(button,a){min-height:44px}
.photo-editor :focus-visible{outline:2px solid var(--nd-color-focus);outline-offset:2px}
.photo-editor .pe-check{min-height:44px}
@media(max-width:780px){.pe-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pe-actions .btn{justify-content:center}.pe-actions .btn:last-child{grid-column:1/-1}.pe-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

body:has(.photo-overlay.open){overflow:hidden}
@media(max-width:600px){.pe-controls{display:block}.pe-controls fieldset+fieldset{margin-top:24px}.pe-actions .btn:last-child{grid-column:auto}.pe-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Photo editor owns its responsive geometry; shared shell sheets do not. */
@media(max-width:780px){
 .photo-editor{height:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
 .pe-head{position:sticky;top:0;z-index:3;flex-shrink:0;flex-wrap:wrap;background:var(--nd-color-panel)}
 .pe-head>div{min-width:0}
 .pe-body{flex:1 0 auto;min-width:0}
 .pe-work{flex:0 0 auto;height:clamp(10rem,40dvh,24rem);min-height:10rem;padding:12px}
 .pe-controls{max-height:none;overflow:visible;min-width:0;padding:12px}
 .pe-controls :is(label,small,.pe-help){font-size:14px}
 .pe-foot{position:sticky;bottom:0;z-index:2;flex-shrink:0;background:var(--nd-color-panel)}
 .pe-head .icon-btn{width:44px;height:44px}
}

.photo-editor .pe-check input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:0}