.cp-main { display: flex; flex-direction: column; gap: 20px; }
    .cp-swatch-row { display: flex; align-items: center; gap: 16px; }
    .cp-swatch { width: 80px; height: 80px; border-radius: 16px; border: 3px solid rgba(255,255,255,0.15); flex-shrink: 0; cursor: pointer; transition: transform 0.1s; }
    .cp-swatch:hover { transform: scale(1.05); }
    .cp-native { opacity: 0; width: 0; height: 0; position: absolute; }
    .cp-swatch-info { flex: 1; }
    .cp-swatch-hex { font-size: 28px; font-weight: 700; color: #e0e0e0; letter-spacing: 1px; font-family: monospace; }
    .cp-swatch-sub { font-size: 12px; color: #9ca3af; margin-top: 2px; }
    .cp-outputs { display: flex; flex-direction: column; gap: 10px; }
    .cp-output-row { display: flex; align-items: center; gap: 8px; }
    .cp-output-label { width: 40px; font-size: 12px; color: #9ca3af; text-align: right; flex-shrink: 0; }
    .cp-output-val { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 12px; font-family: monospace; font-size: 14px; color: #e0e0e0; cursor: text; }
    .cp-output-val:focus { outline: 1px solid rgba(0,245,255,0.5); }
    .cp-copy-btn { background: rgba(0,245,255,0.1); border: 1px solid rgba(0,245,255,0.25); border-radius: 8px; color: #00f5ff; font-size: 12px; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
    .cp-copy-btn:hover { background: rgba(0,245,255,0.2); }
    .cp-sliders { display: flex; flex-direction: column; gap: 12px; }
    .cp-slider-row { display: flex; align-items: center; gap: 10px; }
    .cp-slider-label { width: 18px; font-size: 12px; color: #9ca3af; text-align: right; flex-shrink: 0; }
    .cp-slider-num { width: 38px; font-size: 13px; color: #e0e0e0; text-align: right; flex-shrink: 0; }
    .cp-history { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .cp-history-dot { width: 32px; height: 32px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.1); cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
    .cp-history-dot:hover { transform: scale(1.1); border-color: rgba(255,255,255,0.3); }
    .cp-section-label { font-size: 12px; color: #9ca3af; margin-bottom: 4px; }