.cpm-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 8px; margin-bottom: 16px;
}
.cpm-swatch {
    aspect-ratio: 1; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; transition: transform .12s, border-color .12s;
}
.cpm-swatch:hover  { transform: scale(1.15); }
.cpm-swatch.sel    { border-color: var(--text); transform: scale(1.1); }
.cpm-custom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cpm-custom-row label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cpm-custom-row input[type=color] {
    width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--border);
    background: var(--card2); cursor: pointer; padding: 2px;
}
.cpm-preview {
    padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
    border: 1.5px dashed var(--border); font-size: 15px;
    transition: color .2s;
}
.cpm-preview .label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cpm-apply-btn {
    width: 100%; padding: 12px; border-radius: 12px;
    background: #d946ef; color: #fff; border: none;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.cpm-apply-btn:hover { opacity: .88; }
.cpm-clear-btn {
    width: 100%; padding: 9px; border-radius: 10px; margin-top: 8px;
    background: none; border: 1.5px solid var(--border); color: var(--muted);
    font-size: 13px; cursor: pointer; transition: all .15s;
}
.cpm-clear-btn:hover { border-color: #ef4444; color: #ef4444; }

/* مؤشر اللون النشط فوق صندوق الكتابة */
#cpmActiveBar {
    display: none; align-items: center; gap: 8px;
    padding: 5px 14px; font-size: 13px; font-weight: 600;
    border-top: 1.5px solid rgba(217,70,239,.3);
    background: rgba(217,70,239,.08); color: #d946ef;
}
#cpmActiveBar .cpm-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
#cpmActiveClear {
    margin-right: auto; background: none; border: none;
    color: #d946ef; opacity: .6; cursor: pointer; font-size: 13px;
    padding: 2px 6px; border-radius: 6px;
}
#cpmActiveClear:hover { opacity: 1; }