.cp-canvas-container{position:relative;width:100%;max-height:320px;min-height:200px;display:flex;justify-content:center;align-items:center;border-radius:var(--r-md);border:1px solid var(--border);background:#090d16;overflow:hidden;cursor:crosshair}.cp-canvas{max-width:100%;max-height:300px;object-fit:contain}.cp-color-row{display:flex;align-items:center;gap:1rem}.cp-color-display{width:48px;height:48px;border-radius:var(--r-sm);border:1.5px solid var(--border);box-shadow:var(--shadow-sm)}.cp-palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}.cp-palette-swatch{height:64px;border-radius:var(--r-sm);border:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:.35rem;transition:transform .2s;box-shadow:var(--shadow-sm)}.cp-palette-swatch:hover{transform:translateY(-4px)}.cp-palette-hex{font-size:.65rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-family:JetBrains Mono,monospace;text-align:center}