.palette-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:1.5rem;align-items:start}.palette-image canvas{display:block;width:100%;max-width:100%;height:auto;border-radius:var(--border-radius);border:1px solid var(--border-color);cursor:crosshair;margin-bottom:.5rem}.palette-panel{display:flex;flex-direction:column;gap:1rem}.palette-controls{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--bg-light);border-radius:var(--border-radius)}.swatch-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.swatch{display:grid;grid-template-columns:44px 1fr auto auto auto;gap:.6rem;align-items:center;padding:.35rem .5rem;border:2px solid transparent;border-radius:var(--border-radius);background:#fff;box-shadow:0 0 0 1px var(--border-color)}.swatch[aria-selected=true]{border-color:var(--primary-color)}.swatch-chip{width:44px;height:36px;border-radius:6px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0}.swatch-code{font:600 .95rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.swatch-sub{font-size:.8rem;color:var(--text-secondary)}.swatch input[type=color]{width:34px;height:30px;border:none;background:none;padding:0;cursor:pointer}.icon-btn{border:none;background:none;font-size:.85rem;cursor:pointer;color:var(--text-secondary);padding:.25rem .4rem}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}@media (max-width: 860px){.palette-layout{grid-template-columns:1fr}}