.cpclient-wrap{width:100%;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box}
.cpclient-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.cpclient-preview{height:420px;border-radius:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}
.cpclient-preview .label{position:absolute;left:12px;top:12px;background:rgba(255,255,255,0.85);padding:6px 8px;border-radius:6px;font-weight:500}
.cpclient-swatch-large{width:100%;height:100%;min-width:120px;min-height:120px;border-radius:15px;border:1px solid rgba(0,0,0,0.12);box-shadow:0 2px 6px rgba(0,0,0,0.05);transition:background 120ms ease}
.cpclient-controls{padding:8px}
.cpclient-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cpclient-values{display:grid;grid-template-columns:80px 1fr;align-items:center}
.cpclient-values input{width:100%;padding:8px;border:1px solid #d0d0d0;border-radius:6px}
.cpclient-copy{cursor:pointer;padding:6px 10px;border-radius:4px;border:1px solid #ccc;background:#fff}
.cpclient-info{font-size:13px;color:#333;}
.cpclient-note{background:#f7f7f7;padding:20px;border-radius:6px;border:1px solid #eee;margin-top:12px}
.cpclient-values .col1 {
    height: 40px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px 0px 0px 8px;margin-bottom: 10px;color: rgb(107 114 128);    font-size: 14px;
}
.col2 input[type="text"] {
    margin: 0px;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: none;
    height: 40px;
    border-left: 0px;
    margin-bottom: 10px;
    border-radius: 0px 8px 8px 0px;
    color: rgb(17 24 39);
    font-size: 14px;
}
button.button.cpclient-copyall {
    margin: 0px;
    border-radius: 4px;
}
.cpclient-grid h2 {
    margin-bottom: 18px !important;
}