.cp-main{display:grid;grid-template-columns:auto 1fr;gap:20px;margin-bottom:24px;align-items:start}
.cp-left{display:flex;flex-direction:column;gap:10px}
.cp-swatch-wrap{position:relative;width:100px;height:100px}
.cp-swatch-wrap input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.cp-swatch{width:100px;height:100px;border-radius:12px;border:1px solid var(--border);background:#3b82f6;cursor:pointer;transition:transform 0.2s}
.cp-swatch:hover{transform:scale(1.04)}
.cp-hex-row{display:flex;gap:8px;align-items:center}
.cp-hex-row input{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:13px;font-family:monospace;outline:none;font-family:var(--font)}
.cp-right{display:flex;flex-direction:column;gap:10px}
.cp-val-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:8px}
.cp-lbl{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--t3);letter-spacing:0.8px;width:32px;flex-shrink:0}
.cp-val{flex:1;font-size:13px;font-family:monospace;color:var(--text);font-weight:600}
.cp-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--t3);margin:18px 0 8px}
.cp-swatches{display:flex;gap:6px;flex-wrap:wrap}
.cp-sw{width:40px;height:40px;border-radius:8px;cursor:pointer;border:1px solid rgba(255,255,255,0.06);transition:transform 0.15s;position:relative;flex-shrink:0}
.cp-sw:hover{transform:scale(1.12)}
.cp-sw:hover::after{content:attr(data-hex);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--t2);white-space:nowrap;font-family:monospace;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:2px 5px}
@media(max-width:480px){.cp-main{grid-template-columns:1fr}.cp-swatch-wrap,.cp-swatch{width:60px;height:60px}}