.photo-editor{width:min(1120px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #31546a;border-radius:16px;background:#0b1e2d;color:#eaf5ff;box-shadow:0 20px 100px #0008}.photo-editor::backdrop{background:#000b}.photo-editor header,.photo-editor footer{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#102a3e}.photo-editor header{justify-content:space-between}.photo-editor h2{font-size:20px;margin:0 0 4px}.photo-editor small,.photo-editor p{color:#b5cddd}.photo-editor footer{justify-content:flex-end;flex-wrap:wrap}.photo-editor button{border:1px solid #39637d;border-radius:8px;padding:9px 12px;background:#183c55;color:#fff;cursor:pointer;font:inherit}.photo-editor button:disabled{opacity:.4;cursor:default}.photo-editor button:focus-visible,.photo-editor input:focus-visible,.photo-editor select:focus-visible{outline:2px solid #44d6ff;outline-offset:2px}.photo-editor-body{display:grid;grid-template-columns:270px 1fr;max-height:65dvh;overflow:auto}.photo-editor aside{padding:14px;overflow:auto}.photo-editor fieldset{margin:0 0 14px;border:1px solid #31546a;border-radius:10px;padding:12px}.photo-editor legend{font-weight:700;font-size:13px}.photo-editor label{display:grid;gap:5px;margin:10px 0;font-size:12px}.photo-editor input:not([type=range]),.photo-editor select{width:100%;min-width:0;background:#081827;color:#fff;border:1px solid #39637d;border-radius:6px;padding:8px}.photo-editor input[type=color]{height:35px}.photo-editor input[type=range]{width:100%;accent-color:#16bfff}.photo-editor p{font-size:12px;line-height:1.5}.photo-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.photo-editor-preview{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;position:sticky;top:0;align-self:start}.photo-canvas-wrap{position:relative;line-height:0;max-width:100%;background:repeating-conic-gradient(#aab3bc 0% 25%,#e4e8eb 0% 50%) 50%/20px 20px}.photo-canvas-wrap canvas{display:block;max-width:100%;max-height:51dvh;width:auto;height:auto;touch-action:none}.photo-crop-box{position:absolute;border:2px dashed #00caff;background:#00caff20;pointer-events:none}.photo-editor-status{min-height:36px;margin:12px 0 0}.photo-edit-launch{margin-top:10px}.photo-editor .btn-primary{background:linear-gradient(100deg,#008dff,#9030e8)}@media(max-width:650px){.photo-editor-body{grid-template-columns:1fr;max-height:70dvh}.photo-editor-preview{grid-row:1;position:relative;padding:12px}.photo-canvas-wrap canvas{max-height:32dvh}.photo-editor aside{overflow:visible}.photo-editor header,.photo-editor footer{padding:10px}.photo-editor h2{font-size:16px}}
/* Desktop studio: four compact tool panels stay visible beside the photo. */
.photo-editor[open]{display:flex;flex-direction:column;width:calc(100vw - 28px);max-width:1800px;height:calc(100dvh - 28px);max-height:calc(100dvh - 28px);overflow:hidden;box-sizing:border-box}
.photo-editor *{box-sizing:border-box}
.photo-editor header,.photo-editor footer{flex:none;padding:10px 16px;min-height:54px}
.photo-editor h2{font-size:18px}.photo-editor header small{font-size:12px}
.photo-editor-body{flex:1;min-height:0;max-height:none;overflow:hidden;grid-template-columns:minmax(460px,38%) minmax(0,1fr)}
.photo-editor aside{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:8px;padding:10px;overflow:hidden;min-height:0;align-content:start}
.photo-editor fieldset{min-width:0;margin:0;padding:8px;border-radius:8px}
.photo-editor legend{font-size:12px}.photo-editor label{font-size:11px;gap:3px;margin:6px 0}
.photo-editor button{font-size:12px;padding:7px 8px;line-height:1.25}
.photo-editor p{font-size:11px;line-height:1.35;margin:6px 0}
.photo-editor input:not([type=range]),.photo-editor select{font-size:12px;height:29px;padding:4px 6px}
.photo-editor input[type=color]{height:27px;padding:2px}
.photo-editor input[type=range]{height:16px;margin:0;min-width:0}
.photo-editor input[type=hidden]{display:none}
.photo-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px}
.photo-tools{gap:5px}
.photo-editor-preview{position:relative;align-self:stretch;min-height:0;overflow:hidden;padding:18px;display:flex}
.photo-canvas-wrap{min-height:0;max-height:calc(100dvh - 195px);flex-shrink:1}
.photo-canvas-wrap canvas{max-height:calc(100dvh - 195px);max-width:100%;object-fit:contain}
.photo-editor-status{flex:none;min-height:28px;text-align:center}
@media(min-width:1000px) and (max-height:740px){.photo-editor fieldset{padding:5px 7px}.photo-editor label{margin:3px 0}.photo-editor input:not([type=range]),.photo-editor select{height:25px}.photo-editor p{font-size:10px;margin:4px 0}.photo-editor button{padding:5px 7px}.photo-editor aside{gap:6px;padding:6px}}
@media(max-width:999px){.photo-editor-body{grid-template-columns:1fr;overflow:auto}.photo-editor aside{overflow:visible;grid-template-rows:auto}.photo-editor-preview{grid-row:1;min-height:240px;padding:12px}.photo-canvas-wrap canvas{max-height:32dvh}.photo-editor header small{display:none}}
@media(max-width:500px){.photo-editor aside{grid-template-columns:1fr 1fr;gap:4px;padding:4px}.photo-editor fieldset{padding:5px}.photo-editor button{font-size:10px}.photo-editor legend{font-size:10px}.photo-pair{gap:0 4px}.photo-editor footer{gap:5px}.photo-editor footer button{flex:1}.photo-editor[open]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}}
.photo-editor{font:400 13px/1.3 Arial,sans-serif}
.photo-editor label{color:#c5dbea;font-weight:500;margin:4px 0}
.photo-editor input,.photo-editor select,.photo-editor button{font-family:inherit}
.photo-editor fieldset p{font-size:10px;line-height:1.3;margin:5px 0}
.photo-editor legend{color:#eaf5ff}
@media(min-width:1000px){.photo-editor-body{grid-template-columns:minmax(500px,42%) minmax(0,1fr)}.photo-editor aside{grid-template-rows:min-content minmax(0,1fr)}.photo-editor input:not([type=range]),.photo-editor select{height:26px}.photo-editor fieldset{padding:6px 8px}.photo-editor .photo-tools button{min-height:28px;padding:5px 6px}.photo-editor label{margin:3px 0}}
.photo-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.photo-outline polygon{fill:#00d4ff22;stroke:#00d4ff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:5 3;stroke-linejoin:round}
.photo-outline[hidden]{display:none}
@media(min-width:1000px){.photo-editor aside{grid-template-rows:min-content minmax(0,1fr);gap:6px}.photo-editor aside>fieldset:first-child .photo-tools{grid-template-columns:1fr 1fr}.photo-editor .photo-tools button{font-size:11px;min-height:25px;padding:4px}.photo-editor label{margin:2px 0}.photo-editor input:not([type=range]),.photo-editor select{height:24px}.photo-editor fieldset p{margin:4px 0;font-size:10px}.photo-editor fieldset{padding:5px 7px}}