.harmony-panel{border:1px solid #87958b55;border-radius:12px;padding:14px;margin-bottom:16px}.harmony-panel label{display:block;margin:12px 0;font-size:12px}.harmony-panel select{display:block;width:100%;margin-top:6px}.harmony-panel input[type=checkbox]{width:auto}.harmony-wheel{position:relative;width:170px;height:170px;margin:18px auto;border-radius:50%;background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:crosshair}.harmony-wheel-center{position:absolute;inset:25%;border-radius:50%;background:#e9ece6}.harmony-dot{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;background:#17231c;border:2px solid #fff;border-radius:50%;color:white;text-align:center;font:12px/20px sans-serif;pointer-events:none}.harmony-swatches{display:flex;gap:4px}.harmony-swatches span{flex:1;text-align:center;color:#fff;text-shadow:0 1px 3px #000;padding:14px 2px;border-radius:5px;font-size:11px}.harmony-suggestions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.harmony-suggestions button{font-size:11px;padding:8px}.harmony-status{font-size:12px}.pe .harmony-panel .muted{color:#bac6bc}.pe .harmony-wheel-center{background:#18241f}
/* Each editing workspace retains its preview while tools scroll independently. */
.workspace{height:calc(100dvh - 24px);min-height:460px;gap:18px;overflow:hidden;align-items:stretch;scroll-margin-top:12px}.workspace>.left{display:flex;flex-direction:column;min-height:0;overflow:hidden}.workspace>aside{height:100%;overflow:auto;overscroll-behavior:contain}.workspace .stage{flex:1;min-height:160px;padding:12px}.workspace #photoWrap{max-height:100%;max-width:100%}.workspace #after{max-height:calc(100dvh - 300px);width:auto;object-fit:contain}.workspace .looks{overflow:auto;max-height:23vh;flex-shrink:0;margin-top:10px}.workspace .batch{max-height:70px;flex-shrink:0}.workspace .photo-meta{padding:4px 0}.workspace .toolbar{flex-shrink:0}.pe-grid{height:calc(100dvh - 170px);min-height:400px;align-items:stretch}.pe-grid>.pe-panel{max-height:100%;overflow:auto}.pe-center{display:flex;flex-direction:column;min-height:0}.pe-stage{height:auto;min-height:100px;flex:1}.pe-properties{position:static!important;max-height:100%!important}.pe-inspector{overflow:auto!important}.pe-layerdock{max-height:38%;overflow:auto;min-height:125px}.pe-top{margin-bottom:10px}.pe-status{margin:4px 0}.pe-bottom{flex-shrink:0}
@media(max-width:800px){.workspace{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:45% 55%;height:calc(100dvh - 16px);min-height:400px;gap:0}.workspace>.left{background:#f3f2ec;z-index:2;border-radius:12px;padding:8px}.workspace .stage{min-height:70px}.workspace #after{max-height:calc(45dvh - 110px)}.workspace .looks,.workspace .batch,.workspace .batch-tools{display:none}.workspace .toolbar{margin-bottom:4px;flex-wrap:wrap}.workspace>aside{border-radius:0;padding:16px;min-height:0}.workspace .toolbar button{font-size:10px;padding:5px}.pe-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:43% 57%;gap:6px;height:calc(100dvh - 145px);min-height:400px}.pe-center{grid-column:1/-1;grid-row:1;overflow:hidden}.pe-grid>.pe-panel:first-child{grid-column:1;grid-row:2}.pe-properties{grid-column:2;grid-row:2;min-height:0}.pe-tools{display:block}.pe-tool{width:100%;font-size:11px;margin:5px 0}.pe-panel{padding:8px}.pe-inspector{padding:8px}.pe-layerdock{padding:6px;min-height:100px}.pe-layerdock h3{font-size:11px}.pe-layer img{width:25px}.pe-layer small,.pe-autoselect{display:none!important}.pe-top h2,.pe-top small,.pe-top .eyebrow{display:none}.pe-top{margin-bottom:8px}.pe{padding:8px}.pe-bottom label{margin:0}.pe-stage{min-height:60px}.pe-canvas-wrap{margin:12px}.pe-bottom{font-size:10px;gap:4px}.pe-bottom input{width:90px!important}.pe-bottom button{font-size:10px;padding:4px}.pe-status{font-size:10px;max-height:30px;overflow:auto}.pe-layerdock #peLayers{max-height:100px}}
@media(max-width:800px){.workspace .batch{display:flex;max-height:36px}.workspace .batch button{width:40px;padding:1px}.workspace .batch img{width:32px;height:25px}.workspace .batch-tools{display:flex;padding-top:2px}.workspace .batch-tools button{font-size:9px;padding:3px}.workspace #after{max-height:calc(45dvh - 155px)}.workspace aside .looks{display:block;overflow:visible}.workspace aside .styles{grid-template-columns:repeat(3,minmax(0,1fr))}.harmony-suggestions{grid-template-columns:1fr}.pe .harmony-wheel{width:120px;height:120px}.pe .harmony-swatches span{font-size:9px}}

/* v5.3.1: both comparison canvases occupy the identical fitted rectangle. */
.workspace #photoWrap{flex:none;max-width:none;max-height:none;overflow:hidden}
.workspace #after,.workspace #before{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:fill}
.workspace #beforeClip{position:absolute;inset:0;width:100%;height:100%;padding:0}
.workspace #compare{height:100%;width:100%;max-height:none;padding:0;border:0;touch-action:pan-y}
.workspace .style-card canvas{width:100%;height:auto;aspect-ratio:140 / 100;object-fit:contain}