.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:rgb(255 255 255 / .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 rgb(0 0 0 / .12);box-shadow:0 2px 6px rgb(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 0 0 8px;margin-bottom:10px;color:#6b7280;font-size:14px}.col2 input[type="text"]{margin:0;padding:10px;border:1px solid #eee;box-shadow:none;height:40px;border-left:0;margin-bottom:10px;border-radius:0 8px 8px 0;color:#111827;font-size:14px}button.button.cpclient-copyall{margin:0;border-radius:4px}.cpclient-grid h2{margin-bottom:18px!important}