/* CompX Color Plate — Color Library CSS */
#cxColorPlate { --cp: #22ff6f; --cp2: #65a8ff; display: block; padding: 2px 0 8px; color: #cfe3ff; font-size: 10px; }
#cxColorPlate * { box-sizing: border-box; }

.cp-secttitle { margin: 14px 0 6px; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; color: rgba(200,220,255,.55); text-transform: uppercase; border-left: 3px solid var(--cp); padding-left: 6px; }

.cp-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px,1fr)); gap: 8px; }
.cp-prow { display: flex; align-items: stretch; gap: 5px; }
.cp-pbar { flex: 1; display: flex; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(143,160,201,.14); }
.cp-pcolor { flex: 1; border: 0; padding: 0; cursor: pointer; transition: transform .08s; }
.cp-pcolor:hover { transform: scaleY(1.12); outline: 2px solid #fff; outline-offset: -2px; }
.cp-papply { width: 28px; flex-shrink: 0; border: 1px solid rgba(101,168,255,.3); background: rgba(101,168,255,.07); color: #9fc6ff; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.cp-papply:hover { border-color: var(--cp); color: var(--cp); background: rgba(34,255,111,.1); }

.cp-swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px,1fr)); gap: 5px; }
.cp-sw { width: 100%; height: 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; cursor: pointer; padding: 0; transition: transform .08s; }
.cp-sw:hover { transform: scale(1.12); outline: 2px solid #fff; outline-offset: -2px; z-index: 2; }


/* ── 2-color & 4-color gradient grids ── */
.cp-grad2grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; margin-bottom: 4px; }
.cp-grad2row, .cp-grad4row { display: flex; align-items: center; gap: 6px; background: rgba(101,168,255,.05); border: 1px solid rgba(101,168,255,.1); border-radius: 6px; padding: 4px 6px; cursor: pointer; transition: border-color .12s, background .12s; }
.cp-grad2row:hover, .cp-grad4row:hover { border-color: var(--cp); background: rgba(34,255,111,.08); }
.cp-grad2bar { width: 36px; height: 20px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.08); }
.cp-grad2name { font-size: 7.5px; font-weight: 700; letter-spacing: .3px; color: rgba(200,220,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }