/* V7: bản trải là vùng chính; 3D nằm trong dock bên phải khi chỉnh 2D. */
.layout{grid-template-columns:205px minmax(0,1fr) 290px}.editor-area{grid-template-columns:minmax(0,1fr);min-height:260px}.editor-area #stageWrap{width:100%;height:100%}.right{padding:12px 13px 20px}.preview-dock{height:260px;min-height:200px;max-height:440px;width:100%;resize:vertical;overflow:hidden;border:1px solid #dbe5ee;border-radius:8px;margin-bottom:20px;background:#edf2f6}.preview-dock #threeWrap{width:100%;height:100%;border:0}.preview-dock .preview-head{padding:9px 10px;min-height:32px}.preview-dock .preview-head>div{display:flex;gap:10px;align-items:center}.preview-dock #threeMount{min-height:90px}.preview-dock .three-controls{padding:6px;gap:5px}.preview-dock .three-controls small{display:none}.preview-dock .three-controls .btn{font-size:8px;padding:4px 7px}.preview-dock .fallback-3d{padding:9px}.preview-dock .fallback-3d strong{font-size:10px;margin-bottom:5px}.preview-dock .fallback-3d #fallbackArt{height:118px;max-width:150px}.preview-dock .fallback-3d #fallbackArt canvas{height:118px!important;max-height:118px!important}.preview-dock .fallback-3d p{font-size:7px;margin:3px 0 0}.preview-dock .fallback-3d small{display:none}.preview-head>div{display:flex;gap:12px}.preview-head #expandPreview{font-size:14px}.only-three #threeWrap{width:100%;height:100%;grid-column:1}.only-three .canvas-nav,.only-three .canvas-hint,.only-three .ruler-label{display:none}.preview-closed .preview-dock{display:none}.canvas-focus .layout{grid-template-columns:minmax(0,1fr)}.canvas-focus .layout>.left,.canvas-focus .layout>.right{display:none}.canvas-nav{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #d8e3eb;box-shadow:0 6px 25px #233e5b18;border-radius:8px;padding:7px 9px;z-index:5;white-space:nowrap}.canvas-nav button{border:0;background:none;border-radius:4px;height:29px;min-width:29px;padding:3px 7px;color:#7a91a3;font-size:11px}.canvas-nav button.active{background:#e5f4ed;color:#0b805a}.canvas-nav button:hover{background:#f0f5f8}.canvas-nav i{height:17px;width:1px;background:#dfe7ee;margin:0 3px}.canvas-nav #zoomMinus,.canvas-nav #zoomPlus{font-size:18px}.canvas-nav #zoomPercent{font-size:11px;min-width:48px;color:#506d80}.canvas-nav #fit,.canvas-nav #zoomSelection{font-size:9px}.canvas-nav #togglePanels{font-size:20px}.canvas-hint{position:absolute;bottom:69px;left:50%;transform:translateX(-50%);font-size:8px;color:#8fa2b2;background:#f7f9fbca;padding:4px 10px;border-radius:4px;pointer-events:none;white-space:nowrap}.inline-edit{position:absolute;z-index:25;min-height:90px;border:2px solid #51a27b;box-shadow:0 5px 20px #17384e26;background:#fff;padding:9px;border-radius:4px;font:14px/1.6 'PD UI',Arial,sans-serif;color:#24313e;resize:vertical;outline:none}.zoom-presets{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}#konvaMount{touch-action:none;overscroll-behavior:contain}#togglePreview[aria-pressed=true]{background:#e6f3ed;color:#22835e}
@media(min-width:1700px){.layout{grid-template-columns:225px minmax(0,1fr) 320px}.preview-dock{height:285px}.preview-dock .fallback-3d #fallbackArt,.preview-dock .fallback-3d #fallbackArt canvas{height:140px!important;max-height:140px!important}.canvas-nav button{height:32px;font-size:12px}.canvas-hint{font-size:9px}}
@media(max-width:1200px){.layout{grid-template-columns:180px minmax(0,1fr) 255px}.right{padding:10px}.preview-dock{height:230px;min-height:190px}.preview-dock .preview-head>span{font-size:6px}.canvas-nav{gap:2px;padding:6px}.canvas-nav #zoomSelection{display:none}.canvas-nav button{padding:3px 5px}.canvas-hint{font-size:7px}.tool-grid button{min-height:60px}}
@media(max-width:950px){.layout{grid-template-columns:175px minmax(0,1fr)}.layout>.right{grid-column:1/-1}.preview-dock{height:300px;max-width:450px}.layout>main{min-height:680px}.editor-area{min-height:480px}.canvas-focus .layout>main{min-height:calc(100vh - 60px)}.canvas-focus .layout{grid-template-columns:1fr}}
@media(max-width:700px){.layout{display:flex}.layout>.left{width:100%}.editor-area{grid-template-rows:460px;grid-template-columns:1fr;min-height:460px}.only-three{grid-template-rows:500px;min-height:500px}.canvas-nav{bottom:13px;max-width:96%;gap:2px;padding:5px}.canvas-nav button{height:28px;min-width:26px;font-size:10px}.canvas-nav #zoomPercent{min-width:43px;font-size:10px}.canvas-nav #fit{font-size:8px}.canvas-nav .nav-optional{display:none}.canvas-nav i{margin:0 1px}.canvas-hint{font-size:6px;bottom:61px;padding:3px 6px;max-width:96%;white-space:normal;text-align:center}.layout>.right{padding:14px 16px}.preview-dock{max-width:none;height:280px;min-height:220px;margin-bottom:22px}.preview-dock .fallback-3d #fallbackArt,.preview-dock .fallback-3d #fallbackArt canvas{height:135px!important;max-height:135px!important}.preview-dock .fallback-3d small{display:block;font-size:7px;margin-top:5px}.canvas-focus .layout>main{min-height:calc(100vh - 56px)}.canvas-focus .editor-area{flex:1}.canvas-focus .layout{display:flex}.canvas-focus .layout>.left,.canvas-focus .layout>.right{display:none}}

.template-picker .template-image{display:block;height:150px;background-repeat:no-repeat;border-radius:5px;background-color:#f1f3f3}.template-picker>button{overflow:hidden}.template-picker small{line-height:1.5}

#konvaMount:focus{outline:none}#konvaMount:focus-visible{outline:2px solid #83bca7;outline-offset:-2px}