.designer-top{overflow:auto;white-space:nowrap}
.designer-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24vw}
.designer-toolbar-spacer{flex:1;min-width:8px}
.designer-side{display:grid;align-content:start;gap:14px;overflow:auto;max-height:calc(100vh - 82px)}
.designer-side h2{margin:0}
.designer-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.designer-tools .btn{min-height:34px;white-space:normal;line-height:1.25;text-align:center}
.designer-side .form-control{min-width:0}
.designer-side input[type=file]{height:auto;min-height:38px;padding:7px}
.designer-controls{border-top:1px solid #ececf0;padding-top:12px;display:grid;gap:10px}
.designer-controls .designer-tools .btn.active{border-color:#302d98;color:#302d98;background:#f1f0fb}
.designer-side.right-side{display:grid;align-content:start;gap:14px}
.designer-side.right-side section{min-width:0}
.designer-side.right-side .form-grid{gap:8px}
.designer-side.right-side .form-control{gap:5px}
.designer-side.right-side .field{height:34px;padding:6px 8px}
.designer-side .design-list{max-height:180px;overflow:auto}
.layer-name{border:0;background:transparent;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.layer-visibility,.layer-lock{width:28px;height:28px;flex:0 0 28px;border:1px solid #e4e4e8;background:#fff;color:#555}
.design-guide-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
.design-seam-guide{position:absolute;border:2px dashed #263a99;box-sizing:border-box;pointer-events:none;z-index:4}
.design-center-guide{position:absolute;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);pointer-events:none;z-index:5}
.design-center-guide::before,.design-center-guide::after{content:"";position:absolute;border-color:#8df397;border-style:dashed;border-width:0}
.design-center-guide::before{left:0;right:0;top:50%;border-top-width:2px}
.design-center-guide::after{top:0;bottom:0;left:50%;border-left-width:2px}
.canvas-frame.hide-guides .design-seam-guide,.canvas-frame.hide-guides .design-center-guide{display:none}
.show-grid .design-seam-guide{background-image:linear-gradient(#0000000c 1px,transparent 1px),linear-gradient(90deg,#0000000c 1px,transparent 1px);background-size:20px 20px}
.quality-warning{color:#a45320}
.quality-good{color:#28774a}
.preview-caption{display:block;color:#777;font-size:11px;margin-top:8px}
.output-file-row{display:grid;gap:4px;padding:9px 0;border-top:1px solid #eee;font-size:12px}
.output-file-row a{color:#1477a7}
.designer-side .design-preview{margin:9px 0;padding:7px}
.designer-side .design-preview img{aspect-ratio:auto;max-height:180px;object-fit:contain}
@media(max-width:1100px){.designer-side{max-height:none}.designer-title{max-width:32vw}}
@media(max-width:760px){
  .designer-top{gap:7px;white-space:normal}
  .designer-title{max-width:calc(100% - 24px);flex:1}
  .designer-toolbar-spacer{display:none}
  .designer-workspace{min-height:0}
  .designer-side{overflow:visible}
  .designer-canvas-area{overflow:auto;justify-items:start;min-height:54vh}
  .canvas-frame{margin:auto}
  .designer-side.right-side{display:grid;grid-template-columns:1fr;gap:16px}
}
.designer-workspace{position:relative}
.editor-rulers{position:absolute;pointer-events:none;overflow:hidden;z-index:8;font:10px/1 Arial,sans-serif;color:#111;font-variant-numeric:tabular-nums}
.editor-ruler-horizontal{position:absolute;top:0;height:24px;background:#fff;border-bottom:1px solid #e4e7eb;overflow:hidden}
.editor-ruler-vertical{position:absolute;left:0;width:24px;background:#fff;border-right:1px solid #e4e7eb;overflow:hidden}
.editor-ruler-tick{position:absolute;display:block;font:inherit;color:inherit}
.editor-ruler-tick::after{content:"";position:absolute;border-color:#d8dce2;border-style:solid;border-width:0}
.editor-ruler-horizontal .editor-ruler-tick{top:0;height:100%}
.editor-ruler-horizontal .editor-ruler-tick::after{bottom:0;height:5px;border-left-width:1px}
.editor-ruler-horizontal .editor-ruler-tick.middle::after{height:9px}
.editor-ruler-horizontal .editor-ruler-tick.major::after{height:100%}
.editor-ruler-horizontal .editor-ruler-tick span{position:absolute;left:3px;top:3px}
.editor-ruler-horizontal .editor-ruler-tick.end::after{left:-1px}
.editor-ruler-horizontal .editor-ruler-tick.end span{left:auto;right:3px}
.editor-ruler-vertical .editor-ruler-tick{left:0;width:100%}
.editor-ruler-vertical .editor-ruler-tick::after{right:0;width:5px;border-top-width:1px}
.editor-ruler-vertical .editor-ruler-tick.middle::after{width:9px}
.editor-ruler-vertical .editor-ruler-tick.major::after{width:100%}
.editor-ruler-vertical .editor-ruler-tick span{position:absolute;left:2px;top:3px;letter-spacing:0}
.editor-ruler-vertical .editor-ruler-tick.end::after{top:-1px}
.editor-ruler-vertical .editor-ruler-tick.end span{top:auto;bottom:3px}
.editor-ruler-vertical .editor-ruler-tick.long-label span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.editor-ruler-meta{position:absolute;top:0;height:23px;width:80px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-right:6px;background:#fff;white-space:nowrap}
.editor-ruler-meta.compact{width:24px;padding-right:3px}
.editor-ruler-meta.compact [data-ruler-dpi]{display:none}
.editor-ruler-unit{position:absolute;left:1px;width:22px;height:17px;display:grid;place-items:center;background:#fff}
.designer-top{flex-wrap:wrap;min-height:64px;height:auto;padding:8px 14px}
.designer-side .designer-controls h2{margin-top:18px}
.designer-shell{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.designer-workspace{display:grid;grid-template-columns:60px 264px minmax(280px,1fr) 304px;gap:0;padding:0;min-height:0;flex:1}
.designer-side{border:0;border-right:1px solid #e4e6eb;border-radius:0;padding:14px;max-height:none;min-height:0;background:#fff}
.designer-side.right-side{border-left:1px solid #e4e6eb;border-right:0;display:flex;flex-direction:column}
.designer-side.right-side>section{flex-shrink:0}
.designer-canvas-area{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:60px 40px 90px;overflow:auto;background:#eff1f5}
.canvas-frame{flex:none;border:1px solid #de7777;box-shadow:0 2px 8px #0002;background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 0/16px 16px}
.editor-rail{display:flex;flex-direction:column;align-items:stretch;background:#f9fafc;border-right:1px solid #e4e6eb}
.editor-rail button{border:0;border-left:3px solid transparent;background:transparent;min-height:70px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:6px 0;font-size:12px}
.editor-rail button.active{background:#fff;border-left-color:#147d9b;color:#147d9b}
.editor-rail svg{width:20px;height:20px}
.resource-panel{display:grid;align-content:start;gap:14px}
[hidden]{display:none!important}
.resource-panel h3{font-size:15px;line-height:1.6;margin:0}
.resource-panel p{line-height:1.6;margin:0}
.resource-panel input,.resource-panel select{max-width:100%;min-width:0}
.resource-panel input[type=color]{width:100%;height:56px;border:1px solid #ddd;padding:4px}
.resource-panel .design-list{max-height:none}
.resource-panel .design-quality{font-size:12px}
.editor-product-photo{width:100%;height:170px;object-fit:contain;background:#f4f5f6}
.editor-product-picker{display:grid;gap:12px;border-top:1px solid #ddd;padding-top:16px}
.editor-dropzone{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 12px;border:2px dashed #c5ccd5;background:#fafcff;border-radius:5px;font-size:12px;line-height:1.8}
.editor-dropzone svg{width:36px;height:36px;color:#407a9d}
.editor-dropzone.dragover{background:#e7f6fa;border-color:#1687bf}
.scene-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.scene-options .btn{display:flex;flex-direction:column;padding:6px;gap:7px;font-size:11px}
.scene-options canvas{width:100%;height:auto}
.design-list-item{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:9px 0}
.layer-action{width:25px;height:25px;border:1px solid #ddd;background:#fff;flex:none}
.layer-name{flex-basis:calc(100% - 72px)}
.editor-text-properties{display:grid;gap:10px}
.designer-top .designer-title{max-width:210px}
.designer-top .btn{padding-left:9px;padding-right:9px}
.designer-top .state-badge{font-size:10px}
.designer-side input:disabled,.designer-side select:disabled{opacity:.5;cursor:not-allowed}
.background-swatches{display:flex;flex-wrap:wrap;gap:9px}
.background-swatches button{width:26px;height:26px;border:1px solid #aaa;border-radius:2px}
.scene-options{display:grid;gap:10px}
.scene-options .active{border-color:#147d9b;background:#edf8fb}
.scene-filter{display:flex;flex-wrap:wrap;gap:9px;font-size:12px}
.editor-gallery-search{display:flex;gap:5px}
.editor-gallery-upload{display:grid;gap:6px;min-width:0}
.editor-gallery-upload>.btn{justify-self:start;display:inline-flex;align-items:center;gap:6px}
.editor-gallery-upload>[role=status]{font-size:11px;color:#666;overflow-wrap:anywhere}
.editor-gallery-search input{width:100%}
.editor-gallery-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.editor-gallery-items article{min-width:0;display:grid;grid-template-columns:1fr 30px;gap:4px;font-size:11px}
.editor-gallery-items article>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center}
.asset-thumb{grid-column:1/-1;aspect-ratio:1;border:1px solid #e5e5e5;background:#f5f5f5;padding:3px;overflow:hidden}
.asset-thumb img{width:100%;height:100%;object-fit:contain}
.editor-gallery-items .empty-state{grid-column:1/-1;padding:24px 0}
.editor-gallery-pages{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:5px}
.icon-tool{min-width:34px;width:34px;padding:6px;flex:none}
.icon-tool svg,.designer-shell .btn svg{width:17px;height:17px;flex:none}
.designer-tools.image-actions{display:flex;flex-wrap:wrap}
.designer-tools.image-actions .icon-tool{width:34px}
.designer-tools .icon-tool{width:100%}
.designer-side .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.designer-side .field{width:100%;min-width:0}
.designer-side input[type=range]{width:100%;min-width:0}
.canvas-view-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#fff;padding:8px;font-size:11px;box-shadow:0 1px 6px #0001;max-width:95%;z-index:5;white-space:nowrap}
.canvas-view-controls input{width:90px;min-width:40px}
.canvas-view-controls output{width:34px}
.canvas-view-controls span{white-space:normal}
.live-scene{display:block;width:100%;height:auto;aspect-ratio:4/3;cursor:zoom-in}
.preview-actions{display:flex;gap:5px;margin-top:8px}
.preview-actions select{min-width:0;flex:1}
.preview-actions button{flex:none;padding:0 6px}
.designer-side .design-preview{padding:0;margin:8px 0;background:transparent}
.designer-side h2{font-size:14px}
.designer-controls{gap:9px}
.designer-side .design-quality{font-size:11px;line-height:1.6}
.editor-dialog{border:1px solid #ddd;border-radius:6px;width:min(920px,94vw);max-height:92dvh;padding:20px;color:#333;overflow:auto}
.editor-dialog::backdrop{background:#20283299}
.editor-dialog header,.editor-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.editor-dialog h2{font-size:18px;margin:0}
.editor-dialog p{font-size:12px;line-height:1.7;color:#666}
.editor-dialog footer{margin-top:16px}
.editor-dialog canvas{max-width:100%;height:auto;display:block}
.crop-dialog canvas{margin:0 auto;cursor:crosshair;touch-action:none}
.crop-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:15px}
.crop-fields label{min-width:0;font-size:12px}
.crop-fields input,.crop-fields select{width:100%;min-width:0}
.preview-modal-stage{overflow:auto;max-height:64dvh;background:#eee;margin-top:16px}
.preview-modal-stage canvas{width:100%;max-width:none}
.preview-dialog footer label{display:flex;align-items:center;gap:6px}
.statusbar{flex-shrink:0;gap:10px;min-height:30px}
@media(max-width:1200px) and (min-width:761px){.designer-workspace{grid-template-columns:52px 210px minmax(180px,1fr) 250px}.designer-side{padding:10px}.designer-top{gap:5px}.designer-top .state-badge{display:none}.designer-title{max-width:160px}.designer-canvas-area{padding-left:20px;padding-right:20px}}
@media(max-width:760px){.designer-shell{height:auto;overflow:visible;min-height:100dvh}.designer-workspace{display:flex;flex-direction:column}.editor-rail{flex-direction:row;overflow:auto;order:0;border-bottom:1px solid #ddd;position:sticky;top:0;z-index:9}.editor-rail button{min-width:54px;flex:1;min-height:58px;border-left:0;border-bottom:3px solid transparent}.editor-rail button.active{border-bottom-color:#147d9b}.designer-canvas-area{order:1;min-height:460px;padding:50px 35px 80px;justify-content:flex-start}.canvas-frame{margin:auto}.designer-workspace .designer-side:first-of-type{order:2}.designer-side.right-side{order:3;border-top:1px solid #ddd}.designer-side{overflow:visible;max-height:none}.editor-product-photo{height:130px}.designer-title{max-width:200px}.designer-top{position:static}.resource-panel{grid-template-columns:1fr}.live-scene{max-height:300px;object-fit:contain}.canvas-view-controls{position:absolute;bottom:10px;left:10px;right:10px;margin:0;justify-content:center}.crop-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-dialog footer{justify-content:flex-start}.preview-dialog footer input{width:100px}.statusbar{flex-wrap:wrap}.designer-side .design-list{max-height:260px}}