/* A larger composition canvas with always-visible draft and download actions. */
.expand-button{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:20px;background:#e3f7ff;border:1px solid #d3eaf4;border-radius:15px;color:#168fbd;padding:5px 9px;min-height:30px}.expand-button span{font-size:9px;font-weight:600}.stage-toolbar{gap:7px}#selectedName{flex:1;min-width:0}.preview-dock .stage{height:clamp(460px,56dvh,690px)}.canvas-zoom{position:absolute;right:13px;bottom:13px;display:flex;align-items:center;gap:4px;background:#ffffffee;border:1px solid #dce9f0;border-radius:23px;box-shadow:0 3px 13px #28486115;padding:3px;touch-action:manipulation;color:#5187a4}.canvas-zoom button{height:33px;width:33px;border-radius:50%;font-size:23px;line-height:1;background:#eef9fd}.canvas-zoom button:hover{background:#daf3fd}.canvas-zoom output{min-width:40px;font-size:10px;text-align:center;font-variant-numeric:tabular-nums}.art-photo{cursor:move}.project-actions{display:grid;grid-template-columns:1fr .8fr 1.05fr;align-items:center;gap:7px;border-top:1px solid #e4ecf1;padding:10px;background:#fff}.project-actions button{min-height:41px;font-size:11px;border-radius:20px;font-weight:600;border:1px solid #d2e8f2;color:#4090af;background:#f6fcff;display:flex;justify-content:center;align-items:center;gap:7px;padding:8px 4px}.project-actions .save-draft{background:#ffe9db;color:#936443;border-color:#ffdfcb}.project-actions .primary{background:#159ed1;color:white;border-color:#159ed1}.project-actions svg{height:15px;width:15px}.photo-controls{background:white;border:1px solid #e2e7ee;border-radius:12px;padding:20px;margin-bottom:16px;scroll-margin-top:20px}.photo-controls h2{font-size:21px}.photo-controls .primary{border-radius:9px}.photo-hint{font-size:11px;color:#8396a7;line-height:1.65;margin:13px 0}.photo-name{font-size:12px;font-weight:600;color:#4e7c96;line-height:1.6;margin:20px 0}.photo-buttons,.placement-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.photo-buttons button,.placement-buttons button,.layer-order button{background:#f4fbff;color:#5293b0;border:1px solid #d7eaf4;border-radius:8px;min-height:40px;font-size:11px;padding:10px 7px}.photo-buttons button:hover,.placement-buttons button:hover{background:#e0f5ff}.photo-lock{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0;color:#8092a3;font-size:11px}.photo-lock input{accent-color:#159ed1;width:17px;height:17px}.photo-lock .textlink{color:#c7786b}.photo-placement{border-top:1px solid #e4ecf1;margin-top:19px;padding-top:17px}.photo-placement h3{font-size:12px;color:#7992a5;margin-bottom:13px}.layer-order{display:flex;gap:7px;margin:12px 0}.layer-order button{flex:1;border-radius:20px}.draft-list{display:flex;flex-direction:column;gap:9px;margin:22px 0}.draft-list .saved-row{padding:8px;min-height:60px}.draft-list .saved-row>button:first-child{font-size:13px}.draft-list .saved-row small{font-size:10px;margin-top:6px}.draft-list .iconbutton{width:37px;height:40px}.export-photo-note{font-size:10px;line-height:1.6;color:#7b91a3;margin-top:13px}.export-photo-note:empty{display:none}#safeSize{font-size:11px;background:#f4faff;min-height:38px;margin-top:14px}#draftsDialog h2{font-size:27px}body.canvas-focus{overflow:hidden}body.canvas-focus .preview-dock{position:fixed;inset:0;z-index:15;margin:0;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;background:white;box-shadow:none}body.canvas-focus .preview-dock .stage{flex:1;height:auto;min-height:0}body.canvas-focus .preview-dock .stage-toolbar,body.canvas-focus .text-dock,body.canvas-focus .tool-strip,body.canvas-focus .project-actions{flex-shrink:0}body.canvas-focus .expand-button{background:#ffe0cc;border-color:#ffe0cc;color:#956743}body.canvas-focus .stage-corner{display:none}body.canvas-focus .stage-bottom{font-size:9px;bottom:24px}.photo-controls .range-control input[type=range]{height:27px}
@media(max-width:960px){.studio-top{display:none}.studio{padding:10px 8px}.preview-dock .stage{height:clamp(185px,42dvh,460px)}.preview-dock .stage-toolbar{height:37px;padding:0 7px;gap:4px}.background-picker{gap:1px}.bg-option{width:24px;height:25px}.bg-option span{height:15px;width:15px}.expand-button{font-size:18px;padding:5px 7px;gap:3px}.expand-button span{font-size:8px}#selectedName{font-size:8px;max-width:none}.stage-toolbar .small{font-size:9px;padding:4px}.preview-dock .text-dock{height:42px}.tool-strip{padding-top:5px}.tool-strip button{min-height:47px}.project-actions{padding:7px 8px;gap:7px}.project-actions button{min-height:40px;font-size:10px}.photo-controls{padding:18px 15px;scroll-margin-top:calc(var(--preview-height,480px) + 12px)}.photo-controls h2{font-size:20px}.photo-controls .primary{min-height:43px}.photo-controls .range-control{margin-bottom:18px}.photo-controls .range-control label{font-size:12px}.photo-controls .range-control input[type=number]{height:32px}.photo-controls .range-control input[type=range]{height:34px}.photo-hint{font-size:11px}.photo-controls .export-label{font-size:12px}.photo-buttons button,.placement-buttons button{min-height:43px;font-size:11px}.canvas-zoom{right:10px;bottom:10px;padding:2px}.canvas-zoom button{height:30px;width:30px;font-size:22px}.canvas-zoom output{font-size:9px;min-width:34px}.stage-bottom{max-width:40%;font-size:5px}.photo-controls{display:none}body[data-tool=photo] .photo-controls{display:block}body[data-tool=photo] .action-controls,body[data-tool=photo] .quick-color,body[data-tool=photo] .quick-effects,body[data-tool=photo] .preset-row,body[data-tool=photo] .under-stage,body[data-tool=photo] .mobile-content{display:none}body[data-tool=layers] .photo-controls{display:none}body.canvas-focus .preview-dock .stage-toolbar{height:43px}body.canvas-focus .canvas-zoom button{width:37px;height:37px}body.canvas-focus .canvas-zoom output{font-size:11px}body.canvas-focus .preview-dock .text-dock{height:49px}body.canvas-focus .tool-strip{padding:8px 4px 5px}body.canvas-focus .tool-strip button{min-height:52px}body.canvas-focus .project-actions{padding-bottom:calc(8px + env(safe-area-inset-bottom))}body.canvas-focus .project-actions button{min-height:44px}}
@media(max-width:380px){.background-picker .bg-option{width:21px}.expand-button{padding:5px}.expand-button span{font-size:7px}.project-actions{gap:5px}.project-actions button{font-size:9px}.photo-controls{padding:16px 12px}.photo-lock{gap:5px;font-size:10px}}
@media(max-width:960px) and (max-height:540px){.preview-dock .stage{height:clamp(110px,35dvh,180px)}.preview-dock .stage-toolbar{height:30px}.tool-strip button{min-height:37px}.tool-strip button b,.tool-strip button>svg{height:23px;width:23px}.project-actions{padding:4px 7px}.project-actions button{min-height:34px}.preview-dock .text-dock{height:34px}}
[hidden]{display:none!important}

#selectionUI .selection-hit{fill:transparent;stroke:none;pointer-events:all}.project-actions button{min-height:44px}
.canvas-transform{position:absolute;left:10px;bottom:10px;display:flex;gap:2px;background:#ffffffed;border:1px solid #dce9f0;border-radius:22px;padding:2px;box-shadow:0 3px 13px #28486115;touch-action:manipulation}
.canvas-transform button{min-height:38px;padding:5px 9px;border-radius:20px;font-size:10px;color:#3b7c9a;white-space:nowrap}
.canvas-transform [aria-pressed=true]{background:#e3f7ff;color:#168eba}
#selectionUI .selection-body-hit{fill:transparent;stroke:none;pointer-events:all;cursor:move}
@media(max-width:960px){.canvas-transform{left:8px;bottom:8px}.canvas-transform button{min-height:44px;padding:4px 8px}.mobile-editor .canvas-zoom button{width:44px;height:44px}.mobile-editor .canvas-zoom output{min-width:34px}}
@media(max-width:359px){.canvas-transform button{font-size:9px;padding:4px 6px}.mobile-editor .canvas-zoom button{width:38px}}
.history-button{flex-direction:column;gap:2px}.history-button span{font-size:9px;line-height:10px}.history-button svg{height:17px;width:17px}.history-button:disabled{opacity:.35}
.selection-actions{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:3px 4px 3px 12px;border:1px solid #d6e7f1;background:#fffffff5;box-shadow:0 3px 14px #28486118;border-radius:28px;max-width:calc(100% - 16px);z-index:3;touch-action:manipulation}
.selection-actions span{font-size:10px;color:#6b8da2;white-space:nowrap;margin-right:6px}
.selection-actions button,.text-actions button,.photo-quick-actions button,.empty-layer-add{min-height:44px;padding:8px 12px;font-size:11px;border:1px solid #dce9f1;border-radius:21px;background:#eff9fe;color:#288bae;white-space:nowrap}
.selection-actions button{border:0}
.delete-action{color:#b15354!important;background:#fff0ee!important;border-color:#f5d7d2!important}
.text-dock{display:flex;flex-direction:column;height:auto!important;align-items:stretch;gap:7px}
.text-entry{display:flex;align-items:center;gap:12px;min-height:44px;min-width:0}
.text-entry textarea{width:100%;flex:1;min-width:0}
.text-entry label{flex-shrink:0}
.text-actions,.photo-quick-actions{display:flex;align-items:center;gap:6px}
.text-actions button,.photo-quick-actions button{flex:1;padding:7px 5px;min-width:0}
.photo-quick-actions{margin-bottom:10px}
.photo-quick-actions .primary{background:#159ed1;color:#fff;border-color:#159ed1}
.empty-canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:18px;background:#fffffff5;box-shadow:0 4px 24px #28486114;width:290px;max-width:calc(100% - 28px);text-align:center}
.empty-canvas strong{font-size:15px;color:#4c6e84}.empty-canvas span{font-size:11px;line-height:1.5;color:#8b9daa}.empty-canvas>div{display:flex;gap:8px}.empty-canvas button{padding:10px 13px;border-radius:20px;background:#e8f7ff;color:#2493bd;min-height:44px;font-size:11px}
.empty-layer-add{width:100%}
@media(max-width:960px){.mobile-editor #mobileContent>.text-dock{flex-direction:column;align-items:stretch;gap:8px;min-height:0}.mobile-editor #mobileContent .text-entry textarea{height:44px;min-height:44px;font-size:22px}.mobile-editor #mobileContent .text-entry label{max-width:45px;font-size:9px}.mobile-editor .header-actions .history-button{flex-direction:column;gap:1px}.mobile-editor .header-actions .history-button svg{height:16px;width:16px}.selection-actions{top:8px}.photo-quick-actions button{font-size:10px}.mobile-editor #addLayer{background:#e2f5ff}}
.object-picker{display:flex;align-items:center;gap:7px;padding:4px 8px;height:56px;min-height:56px;flex:0 0 auto;border-top:1px solid #edf2f6;border-bottom:1px solid #dce9f2;background:#f7fbfe;overflow:hidden}
.picker-heading{flex:0 0 47px;display:flex;flex-direction:column;gap:4px}.picker-heading strong{font-size:11px;color:#4d7c97}.picker-heading small{font-size:7px;color:#8aa1b1;white-space:nowrap}
.object-list{position:relative;min-width:0;flex:1;display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x}
.object-list::-webkit-scrollbar{display:none}
.object-chip{flex:0 0 auto;min-width:94px;max-width:180px;min-height:44px;height:44px;display:flex;align-items:center;gap:7px;padding:4px 9px 4px 5px;border:1px solid #d4e3ed;background:#fff;color:#5e7d91;border-radius:11px;text-align:left;touch-action:pan-x}
.object-chip.selected{border-color:#169fce;background:#e3f7ff;box-shadow:inset 0 0 0 1px #169fce;color:#117ca3}
.picker-icon{flex:0 0 30px;width:30px;height:32px;display:grid;place-items:center;border-radius:6px;background:#edf6fc;color:#3f8ba9;font-family:serif;font-weight:700;font-size:18px;overflow:hidden}
.picker-icon:has(img){background:conic-gradient(#dbe3ea 25%,#fff 0 50%,#dbe3ea 0 75%,#fff 0);background-size:10px 10px}
.picker-icon img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.picker-caption{display:flex;flex-direction:column;min-width:0;gap:3px}.picker-caption b{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-caption small{font-size:8px;white-space:nowrap;opacity:.8}
.picker-empty{font-size:11px;color:#8aa0ae;padding:12px 0;white-space:nowrap}
.selection-actions #editSelected{background:#e7f6fd;color:#188db8}
@media(max-width:960px){.mobile-editor #objectPicker{height:54px;min-height:54px;flex:0 0 54px;padding:4px 7px}.object-chip{max-width:160px}.selection-actions span{max-width:58px;overflow:hidden;text-overflow:ellipsis}.selection-actions button{padding:8px 10px}}