.colour-panel { max-width:690px; }
.colour-accent { color:#9b75b7; }
.colour-timer-row { display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:530px;margin:0 auto 17px;padding:10px 13px;border-radius:11px;background:#f5f2f8;color:#777087;font-size:.83rem;font-weight:750; }
.colour-timer-row strong { color:#6b507f;font-size:1.05rem;font-variant-numeric:tabular-nums; }
.swatches { display:flex;align-items:center;justify-content:center;gap:19px;margin:0 auto 22px; }
.swatch-block { display:flex;flex-direction:column;align-items:center;gap:6px;width:min(35%,190px);color:#657084;font-size:.79rem;font-weight:750; }
.swatch { width:100%;height:115px;min-height:90px;border:1px solid rgba(28,35,52,.1);border-radius:15px;background:#808080;box-shadow:inset 0 0 0 4px rgba(255,255,255,.19); }
.swatch-block code { color:#4a5365;font-size:.8rem;font-weight:800; }
.swatch-arrow { color:#b5adbf;font-size:1.5rem; }
.colour-controls { display:grid;gap:14px;max-width:530px;margin:0 auto 22px; }
.channel { display:grid;gap:7px;color:#6f7788;font-size:.84rem;font-weight:750; }
.channel span { display:flex;align-items:center;gap:8px; }
.channel strong { margin-left:auto;color:#353f53;font-variant-numeric:tabular-nums; }
.channel i { display:inline-block;width:10px;height:10px;border-radius:50%;background:#999; }
.channel-red i { background:#d66b6b; }.channel-green i { background:#69a57b; }.channel-blue i { background:#7298d0; }
.channel input { width:100%;accent-color:#777;cursor:pointer; }
.channel-red input { accent-color:#d66b6b; }.channel-green input { accent-color:#69a57b; }.channel-blue input { accent-color:#7298d0; }
.quick-palette { max-width:530px;margin:0 auto 16px; }
.quick-palette>span { display:block;margin-bottom:9px;color:#81889a;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.palette-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px; }
.palette-swatch { width:100%;aspect-ratio:1;border:2px solid rgba(31,40,58,.08);border-radius:7px;cursor:pointer; }
.palette-swatch:hover { transform:scale(1.08); }.palette-swatch:focus-visible { outline:3px solid #b9abc7;outline-offset:2px; }
.colour-result { margin-top:13px;padding:17px;border-radius:14px;background:#f3eff8;color:#574468;text-align:center;line-height:1.6; }
.colour-result strong { display:block;font-size:2rem;letter-spacing:-.05em; }
@media(max-width:490px){.swatch{height:90px}.palette-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.swatches{gap:12px}.swatch-block{width:38%}}