.image-editor-shell{max-width:none;width:100%;margin:auto}
.editor-workspace{display:grid;grid-template-columns:190px minmax(0,1fr) 270px;grid-template-rows:minmax(0,1fr);height:calc(100dvh - 124px);min-height:560px;background:#e8edf4}
.editor-sidebar,.editor-properties{background:#fff;overflow:auto;padding:1rem}
.editor-sidebar{border-right:1px solid #dbe3ee}
.editor-properties{border-left:1px solid #dbe3ee}
.props-title{font-size:.95rem;font-weight:700;color:#0f172a;margin-bottom:.85rem}
.props-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.85rem}
.props-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.props-actions{display:flex;gap:.5rem;margin:.75rem 0}
.props-actions .tool-btn{flex:1;justify-content:center}
.editor-properties label{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem;color:#475569;font-size:.78rem;font-weight:600}
.editor-properties label.inline{flex-direction:row;align-items:center;gap:.5rem}
.editor-properties input[type=color]{width:100%;height:38px;border:1px solid #cbd5e1;border-radius:.55rem;padding:.2rem;background:#fff}
.editor-properties input[type=number],.editor-properties select{width:100%;height:38px;border:1px solid #cbd5e1;border-radius:.55rem;padding:0 .6rem;background:#fff}
.editor-properties input[type=range]{width:100%;accent-color:#4f46e5}
.editor-properties input[type=checkbox]{width:1rem;height:1rem;accent-color:#4f46e5}
.editor-properties .tool-btn{width:100%;justify-content:center}
.editor-properties .tool-btn.danger,.props-actions .tool-btn.danger{color:#dc2626;border-color:#fecaca}
.export-section{border-top:1px solid #e2e8f0;margin-top:1.25rem;padding-top:1rem}
.editor-stage{overflow:auto;padding:1.5rem 2rem;position:relative}
.canvas-wrap{position:relative;margin:auto;box-shadow:0 8px 28px #0f172a20;background-image:repeating-conic-gradient(#f1f5f9 0% 25%,#fff 0% 50%);background-size:20px 20px}
.canvas-wrap canvas{display:block}
.editor-toolbar{position:sticky;top:64px;z-index:40;background:#fff;border-bottom:1px solid #dbe3ee;padding:.55rem .75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:60px}
.toolbar-tools,.toolbar-actions{display:flex;align-items:center;gap:.35rem}
.toolbar-tools{min-width:0;overflow-x:auto;padding-bottom:2px}
.toolbar-actions{flex:none;border-left:1px solid #e2e8f0;padding-left:.75rem}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:38px;white-space:nowrap;border:1px solid #dbe3ee;border-radius:.65rem;padding:.48rem .7rem;font-size:.8rem;font-weight:600;background:#fff;color:#334155;cursor:pointer;transition:.15s}
.tool-btn.active,.tool-btn:hover{background:#eef2ff;color:#4338ca;border-color:#a5b4fc}
.tool-btn.primary{background:#4f46e5!important;color:#fff!important;border-color:#4f46e5!important;padding-inline:1rem}
.tool-btn.primary:hover{background:#4338ca!important}
.tool-btn:disabled{opacity:.4;cursor:not-allowed}
.toolbar-sep{width:1px;align-self:stretch;background:#e2e8f0;margin:0 .3rem;flex:none}
.zoom-value{min-width:48px;text-align:center;font-size:.75rem;font-weight:700;color:#475569}
.layer-empty{font-size:.8rem;color:#94a3b8}
.layer-row{display:flex;align-items:center;gap:.25rem;border:1px solid #dbe3ee;border-radius:.55rem;padding:.4rem .45rem;margin-bottom:.45rem;background:#f8fafc}
.layer-row.active{border-color:#a5b4fc;background:#eef2ff}
.layer-name{flex:1;min-width:0;text-align:left;font-size:.78rem;font-weight:600;color:#334155;background:transparent;border:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.layer-name:hover{color:#4338ca}
.layer-icon{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dbe3ee;border-radius:.4rem;background:#fff;color:#475569;font-size:.72rem;cursor:pointer}
.layer-icon:hover{background:#eef2ff;color:#4338ca}
.layer-icon.danger{color:#dc2626;border-color:#fecaca}
.crop-actions{display:flex;gap:.4rem}
.crop-actions .tool-btn{min-height:34px}
.ie-toast{position:fixed;top:76px;right:1rem;z-index:100;background:#0f172a;color:#fff;font-size:.8rem;font-weight:600;border-radius:.65rem;padding:.6rem .9rem;box-shadow:0 12px 30px #0f172a40;max-width:320px}
body.editor-active{overflow:hidden;height:100dvh}
body.editor-active .image-editor-shell{height:calc(100dvh - 64px);overflow:hidden}
body.editor-active .editor-toolbar{position:static}
body.editor-active #workspace{display:flex;flex-direction:column;height:100%}
body.editor-active .editor-workspace{flex:1;min-height:0;height:auto}
body.editor-active > section{display:none}
.drop-zone.dragover{background:#eef2ff;border-color:#6366f1}
.template-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin-top:1rem}
.template-card{display:flex;flex-direction:column;align-items:center;gap:.3rem;border:1px solid #dbe3ee;border-radius:.8rem;background:#fff;padding:1rem .75rem;cursor:pointer;transition:.15s;font-weight:600;color:#334155}
.template-card:hover{border-color:#a5b4fc;background:#eef2ff;color:#4338ca}
.template-card .template-size{font-size:.72rem;font-weight:700;color:#94a3b8}
@media(max-width:1100px){.editor-workspace{grid-template-columns:150px minmax(0,1fr) 230px}.tool-btn{padding-inline:.55rem}}
@media(max-width:900px){.editor-workspace{grid-template-columns:1fr;height:calc(100dvh - 124px)}.editor-sidebar,.editor-properties{display:none}.editor-stage{padding:1rem}.editor-toolbar{padding:.45rem}.toolbar-actions{border-left:0;padding-left:0}.tool-btn span{display:none}.tool-btn.primary span,.crop-actions .tool-btn span{display:inline}.zoom-value{display:none}}