.app-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
@media (max-width: 768px) { .app-layout { grid-template-columns: 1fr; } }
.toolbar { position: sticky; top: 20px; }
.tool-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-btn { width: 44px; height: 44px; border: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: 1.2rem; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.tool-btn:hover { border-color: var(--color-primary); }
.tool-btn.active { border-color: var(--color-primary); background: rgba(99,102,241,.15); box-shadow: 0 0 8px rgba(99,102,241,.3); }
.color-input { width: 100%; height: 40px; border: none; border-radius: var(--radius-md); cursor: pointer; background: none; }
.palette { display: flex; flex-wrap: wrap; gap: 4px; }
.palette-swatch { width: 24px; height: 24px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; transition: all .2s; }
.palette-swatch:hover, .palette-swatch.active { border-color: #fff; transform: scale(1.2); }
.canvas-area { display: flex; justify-content: center; align-items: flex-start; }
.grid-container { display: inline-grid; border: 2px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #1a1a2e; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.pixel { border: 1px solid rgba(255,255,255,.05); transition: background-color .05s; }
.pixel:hover { outline: 2px solid var(--color-primary); z-index: 1; }