body{overflow:hidden}.editor-layout{grid-template-columns:var(--left-toolbar-width,220px) 1fr var(--right-toolbar-width,300px);gap:var(--space-4);margin-top:var(--navbar-height);height:calc(100vh - var(--navbar-height));padding:0;transition:grid-template-columns .3s;display:grid;overflow:hidden}.editor-layout.right-toolbar-collapsed{--right-toolbar-width:0px}.editor-layout.toolbar-collapsed{--left-toolbar-width:68px}.toolbar-collapsed .toolbar-label,.toolbar-collapsed .tool-label,.toolbar-collapsed .toolbar-grid-size,.toolbar-collapsed .toolbar-brush-size,.toolbar-collapsed .toolbar-actions,.toolbar-collapsed .toolbar-divider{display:none!important}.toolbar-collapsed #toolbarToggleBtn svg{transform:rotate(180deg)}.editor-sidebar-container{height:100%;min-height:0;display:flex;position:relative}.right-sidebar-container{border-left:1px solid var(--glass-border)}.right-sidebar-container .sidebar-edge-toggle{border-left:1px solid var(--glass-border);border-right:none;border-radius:8px 0 0 8px;left:-16px;right:auto}.right-toolbar-collapsed .sidebar-edge-toggle svg{transform:rotate(180deg)}.right-toolbar-collapsed .editor-palette,.toolbar-collapsed .btn span:not(.btn-icon){display:none}.toolbar-collapsed .btn{justify-content:center;align-self:center;width:40px;height:40px;padding:0}.toolbar-collapsed .btn-icon{margin-right:0}.sidebar-edge-toggle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-border);cursor:pointer;z-index:10;width:16px;height:60px;color:var(--text-secondary);background:#ffffff1a;border-left:none;border-radius:0 8px 8px 0;justify-content:center;align-items:center;transition:all .2s;display:flex;position:absolute;top:50%;right:-16px;transform:translateY(-50%);box-shadow:2px 0 5px #0003}.sidebar-edge-toggle:hover{color:var(--text-primary);background:#fff3}.sidebar-edge-toggle svg{width:12px;height:12px;transition:transform .3s}.toolbar-collapsed .sidebar-edge-toggle svg{transform:rotate(180deg)}.editor-toolbar{gap:var(--space-4);padding:var(--space-3);flex-direction:column;align-items:center;width:100%;height:100%;display:flex;overflow:hidden auto}.toolbar-section{gap:var(--space-2);flex-direction:column;width:100%;display:flex}.toolbar-divider{background:var(--glass-border);width:100%;height:1px}.toolbar-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-tertiary);text-transform:uppercase;text-align:center}.toolbar-tools{gap:var(--space-2);flex-direction:column;display:flex}.tool-btn{aspect-ratio:1;border-radius:var(--radius-md);width:100%;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:var(--space-1);background:0 0;border:1px solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.tool-btn:hover{color:var(--text-primary);background:#ffffff0d}.tool-btn.active{color:var(--accent-primary);background:#6366f126;border-color:#6366f14d}.tool-btn:disabled{opacity:.3;cursor:not-allowed}.tool-label{font-size:10px;font-weight:var(--fw-medium)}.tool-btn kbd{display:none}.toolbar-action-row{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.tool-btn-sm{aspect-ratio:auto;padding:var(--space-2)}.tool-btn-sm .tool-label{display:none}.toolbar-grid-size{gap:var(--space-2);flex-direction:column;display:flex}.toolbar-custom-size{align-items:center;gap:var(--space-1);font-size:var(--fs-xs);display:flex}.editor-canvas-area{background:var(--bg-tertiary);cursor:grab;border-radius:var(--radius-lg);border:1px solid var(--glass-border);touch-action:none;background-image:linear-gradient(45deg,#00000005 25%,#0000 25%),linear-gradient(-45deg,#00000005 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#00000005 75%),linear-gradient(-45deg,#0000 75%,#00000005 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;position:relative;overflow:hidden}#editorCanvas{width:100%;height:100%;display:block}.canvas-coords{bottom:var(--space-3);left:var(--space-3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;border:1px solid var(--glass-border);background:#0009;position:absolute}.editor-palette{flex-direction:column;padding:0;display:flex;overflow:hidden}.editor-palette .panel-title{padding:var(--space-4) var(--space-4) var(--space-2);margin:0}.current-color-preview{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);background:#0003;display:flex}.current-color-swatch{border:2px solid #fff3;border-radius:50%;width:32px;height:32px;box-shadow:inset 0 2px 4px #0000004d}.current-color-info{flex-direction:column;display:flex}.current-color-name{font-weight:var(--fw-bold);font-size:var(--fs-sm)}.current-color-id{font-size:var(--fs-xs);color:var(--text-tertiary)}.palette-search{padding:var(--space-3) var(--space-4)}.palette-section-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-tertiary);text-transform:uppercase;margin-bottom:var(--space-2);padding:0 var(--space-4)}.palette-recent{padding-bottom:var(--space-3)}.recent-colors{gap:var(--space-2);padding:0 var(--space-4);display:flex;overflow-x:auto}.palette-tabs{border-bottom:1px solid var(--glass-border);padding:0 var(--space-2);display:flex;overflow-x:auto}.palette-tab{padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-tertiary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2px solid #0000}.palette-tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.palette-grid{gap:var(--space-2);padding:var(--space-4);flex:1;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));align-content:flex-start;display:grid;overflow-y:auto}.palette-color{aspect-ratio:1;cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-fast);color:#fff;text-shadow:0 1px 2px #000c;font-size:var(--fs-sm);border:2px solid #ffffff1a;border-radius:50%;place-items:center;display:grid;box-shadow:inset 0 2px 4px #0000004d}.palette-color:hover{border-color:#fff6;transform:scale(1.15)}.palette-color.selected{border-color:#fff;transform:scale(1.1)}.palette-color-sm{width:24px;min-width:24px;height:24px}.palette-stats{padding:var(--space-3) 0;border-top:1px solid var(--glass-border);background:#0003;flex-direction:column;max-height:150px;display:flex}.palette-stats-list{padding:0 var(--space-4);gap:var(--space-2);flex-direction:column;flex:1;display:flex;overflow-y:auto}.stats-item-mini{align-items:center;gap:var(--space-2);font-size:var(--fs-xs);display:flex}.stats-color-dot{border:1px solid #fff3;border-radius:50%;width:12px;height:12px}.stats-color-label{white-space:nowrap;text-overflow:ellipsis;color:var(--text-secondary);flex:1;overflow:hidden}.stats-color-num{font-weight:var(--fw-bold)}@media (width<=1024px){.editor-layout{grid-template-columns:60px 1fr 260px}}@media (width<=768px){.editor-layout{grid-template-rows:auto 50vh 1fr;grid-template-columns:1fr;height:auto;overflow:visible}.editor-toolbar{flex-direction:row;align-items:flex-start;height:auto;overflow:auto hidden}.toolbar-section{flex-direction:row;align-items:center;width:auto}.toolbar-divider{width:1px;height:32px;margin:0 var(--space-2)}.toolbar-tools{flex-direction:row}.editor-palette{height:500px}}