.mode-toggle{display:flex;border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}.mode-toggle-btn{font-family:var(--font-display);font-size:0.7rem;letter-spacing:0.08em;padding:6px 14px;border:none;background:var(--color-glass);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;white-space:nowrap}.mode-toggle-btn:hover{color:var(--color-text);background:var(--color-surface-hover)}.mode-toggle-btn.active{color:var(--color-primary);background:var(--color-amber-glow);border-color:var(--color-primary)}#canvas-workspace{flex:1;display:none;flex-direction:column;gap:16px}#canvas-workspace.active{display:flex}#editor-canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;background:var(--color-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);padding:32px;min-height:480px;position:relative;overflow:hidden}#editor-canvas-wrapper::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--color-glass-border) 1px,transparent 1px);background-size:24px 24px;opacity:0.5;pointer-events:none}#editor-canvas{width:600px;height:400px;position:relative;overflow:hidden;border-radius:var(--radius-sm);box-shadow:0 12px 48px rgba(0,0,0,0.5),0 0 0 1px var(--color-glass-border),0 0 80px -20px var(--shadow-glow);background:#0a0a0f;cursor:default}#editor-canvas.drag-over{outline:3px dashed var(--color-primary);outline-offset:-3px}#editor-canvas.drag-over::after{content:attr(data-drop-text);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);color:var(--color-primary);font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.12em;z-index:9999;pointer-events:none}.canvas-element{user-select:none;-webkit-user-select:none;transition:box-shadow 0.1s ease}.canvas-element:hover:not(.canvas-el-locked){outline:1px solid rgba(232,168,56,0.4);outline-offset:1px}.canvas-el-selected{outline:none !important}.canvas-el-locked{cursor:default !important;opacity:0.7}.canvas-el-flag img{width:100%;height:100%;object-fit:contain;pointer-events:none}.canvas-el-text.editing{outline:2px dashed var(--color-primary) !important;cursor:text;background:rgba(0,0,0,0.3)}#selection-handles{position:absolute;pointer-events:none;z-index:9999}.editor-toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);flex-wrap:wrap}.editor-toolbar .toolbar-group{display:flex;align-items:center;gap:4px}.editor-toolbar .toolbar-sep{width:1px;height:24px;background:var(--color-glass-border);margin:0 4px}.editor-toolbar button,.editor-toolbar label{font-family:var(--font-display);font-size:0.7rem;letter-spacing:0.06em;padding:5px 10px;border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);background:var(--color-glass);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;gap:4px}.editor-toolbar button:hover:not(:disabled),.editor-toolbar label:hover{color:var(--color-text);border-color:var(--color-text-muted);background:var(--color-surface-hover)}.editor-toolbar button:disabled{opacity:0.3;cursor:not-allowed}.editor-toolbar button.active-tool{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-amber-glow)}.bg-controls{display:none;flex-direction:column;gap:8px;padding:12px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md)}.bg-controls.active{display:flex}.bg-controls .control-row{display:flex;align-items:center;gap:10px}.bg-controls .control-row label{font-size:0.7rem;font-weight:500;color:var(--color-text-muted);width:60px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}.bg-controls .control-row input[type="range"]{flex:1}.bg-controls .control-row select{flex:1;font-size:0.8rem;padding:5px 8px}.bg-controls .control-row .range-value{font-size:0.7rem;color:var(--color-text-muted);width:32px;text-align:right;font-family:var(--font-mono)}.bg-upload-area{display:flex;align-items:center;gap:10px;padding:8px;border:1px dashed var(--color-glass-border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast)}.bg-upload-area:hover{border-color:var(--color-primary)}.bg-upload-area span{font-size:0.75rem;color:var(--color-text-muted)}.bg-preview{width:48px;height:32px;border-radius:4px;object-fit:cover;border:1px solid var(--color-glass-border)}.bg-remove-btn{font-size:0.65rem !important;padding:3px 8px !important;color:var(--color-danger) !important;border-color:var(--color-danger) !important}.bg-remove-btn:hover{background:rgba(255,77,77,0.15) !important}.element-context-bar{display:none;align-items:center;gap:6px;padding:6px 12px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);font-size:0.75rem}.element-context-bar.active{display:flex}.element-context-bar button{font-family:var(--font-display);font-size:0.65rem;letter-spacing:0.06em;padding:4px 8px;border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);background:var(--color-glass);color:var(--color-text-muted);cursor:pointer;text-transform:uppercase}.element-context-bar button:hover{color:var(--color-text);border-color:var(--color-text-muted)}.text-style-panel{display:none;flex-direction:column;gap:8px;padding:12px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md)}.text-style-panel.active{display:flex}.text-style-panel .control-row{display:flex;align-items:center;gap:10px}.text-style-panel .control-row label{font-size:0.7rem;font-weight:500;color:var(--color-text-muted);width:60px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}.text-style-panel .control-row input,.text-style-panel .control-row select{flex:1;font-size:0.8rem;padding:5px 8px}.text-style-panel .control-row input[type="range"]{flex:1}.text-style-panel .control-row input[type="color"]{width:28px;height:28px}.logo-upload-area{display:flex;align-items:center;gap:6px;margin-top:4px}.logo-upload-area label{font-size:0.65rem;padding:3px 8px;border:1px dashed var(--color-glass-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);transition:all var(--transition-fast)}.logo-upload-area label:hover{color:var(--color-primary);border-color:var(--color-primary)}.logo-upload-thumb{width:24px;height:24px;border-radius:2px;object-fit:contain;border:1px solid var(--color-glass-border)}#canvas-action-bar{display:flex;gap:8px;justify-content:center;animation:actionBarSlideUp 0.4s cubic-bezier(0.16,1,0.3,1) 0.3s both}#canvas-action-bar button{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:0.9rem;letter-spacing:0.08em;padding:10px 20px;border-radius:var(--radius-pill);transition:all var(--transition-fast);white-space:nowrap;text-transform:uppercase;cursor:pointer;border:none}#copy-btn-canvas{background:var(--color-primary);color:#000;border:1px solid var(--color-primary);font-weight:600}#copy-btn-canvas:hover{background:var(--color-primary-hover);box-shadow:0 0 24px var(--shadow-glow),0 4px 16px rgba(0,0,0,0.3);transform:translateY(-1px)}#download-btn-canvas{background:var(--color-glass);color:var(--color-text);border:1px solid var(--color-glass-border)}#download-btn-canvas:hover{background:var(--color-surface-hover);border-color:var(--color-text-muted);transform:translateY(-1px)}#save-load-panel{display:none;flex-direction:column;gap:6px;padding:10px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);max-height:240px;overflow-y:auto}#save-load-panel.active{display:flex}.save-row{display:flex;gap:6px}.save-row input{flex:1;font-size:0.8rem;padding:5px 8px;border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);background:var(--color-glass);color:var(--color-text)}.save-row input:focus{outline:none;border-color:var(--color-primary)}.save-row button{font-family:var(--font-display);font-size:0.7rem;letter-spacing:0.06em;padding:5px 12px;border:1px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-amber-glow);color:var(--color-primary);cursor:pointer;text-transform:uppercase}.saved-design-item{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:var(--radius-sm);font-size:0.75rem;color:var(--color-text-muted);transition:background var(--transition-fast)}.saved-design-item:hover{background:var(--color-surface-hover)}.saved-design-item .design-name{flex:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-design-item .design-name:hover{color:var(--color-primary)}.saved-design-item .design-date{font-size:0.6rem;color:var(--color-text-muted);opacity:0.6}.saved-design-item .design-delete{background:none;border:none;cursor:pointer;color:var(--color-danger);font-size:0.7rem;opacity:0.5;transition:opacity var(--transition-fast)}.saved-design-item .design-delete:hover{opacity:1}#sticker-panel{display:none;flex-direction:column;gap:6px;padding:10px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);max-height:240px;overflow:hidden}#sticker-panel.active{display:flex}.sticker-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}.sticker-tab{font-family:var(--font-display);font-size:0.6rem;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--color-glass-border);border-radius:var(--radius-sm);background:var(--color-glass);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.sticker-tab:hover{color:var(--color-text);border-color:var(--color-text-muted)}.sticker-tab.active{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-amber-glow)}.sticker-list{display:flex;flex-wrap:wrap;gap:4px;overflow-y:auto;max-height:160px}.sticker-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:1px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;transition:all var(--transition-fast)}.sticker-btn:hover{background:var(--color-surface-hover);border-color:var(--color-glass-border);transform:scale(1.15)}#element-props-panel{display:none;flex-direction:column;gap:6px;padding:10px 12px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md)}#element-props-panel.active{display:flex}#element-props-panel .control-row{display:flex;align-items:center;gap:10px}#element-props-panel .control-row label{font-size:0.7rem;font-weight:500;color:var(--color-text-muted);width:60px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.06em}#element-props-panel .control-row input[type="range"]{flex:1}#element-props-panel .control-row .range-value{font-size:0.7rem;color:var(--color-text-muted);width:36px;text-align:right;font-family:var(--font-mono)}#layer-panel{display:none;flex-direction:column;gap:4px;padding:10px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:var(--radius-md);max-height:240px;overflow-y:auto}#layer-panel.active{display:flex}#layer-panel h4{font-family:var(--font-display);font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 6px 0;padding-bottom:4px;border-bottom:1px solid var(--color-glass-border)}#layer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.layer-item{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);font-size:0.72rem;color:var(--color-text-muted)}.layer-item:hover{background:var(--color-surface-hover)}.layer-item.layer-selected{background:var(--color-amber-glow);color:var(--color-primary);outline:1px solid var(--color-primary)}.layer-vis,.layer-lock{background:none;border:none;cursor:pointer;font-size:0.7rem;padding:1px 3px;opacity:0.6;transition:opacity var(--transition-fast);line-height:1}.layer-vis:hover,.layer-lock:hover{opacity:1}.layer-icon{font-size:0.8rem;width:18px;text-align:center;flex-shrink:0}.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-order{display:flex;gap:2px;flex-shrink:0}.layer-up,.layer-down{background:none;border:none;cursor:pointer;font-size:0.55rem;padding:1px 3px;color:var(--color-text-muted);transition:color var(--transition-fast)}.layer-up:hover,.layer-down:hover{color:var(--color-text)}@media (max-width:699px){#editor-canvas{transform-origin:top left}.editor-toolbar{gap:3px;padding:6px 8px}.editor-toolbar button,.editor-toolbar label{font-size:0.6rem;padding:4px 6px}}