/* rgb-hex-color-converter.css v2-r4 */
.color-preview { width:100%; height:120px; border:1px solid var(--border); margin-bottom:1rem; transition:background 0.2s; }
.color-io-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px) { .color-io-grid { grid-template-columns:1fr; } }
.color-sliders { display:grid; gap:0.55rem; margin-top:0.75rem; }
.slider-row { display:grid; grid-template-columns:24px 1fr 56px; align-items:center; gap:0.6rem; }
.slider-letter { font-size:0.82rem; font-weight:700; text-align:center; }
.slider-r { color:#dc2626; } .slider-g { color:#16a34a; } .slider-b { color:#2563eb; }
input[type="range"].color-slider { width:100%; accent-color:var(--accent); }
.slider-val { font-size:0.82rem; font-family:ui-monospace,monospace; text-align:right; }
.color-formats { display:grid; gap:0.5rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); }
.color-format-row { display:flex; align-items:center; gap:0.5rem; }
.format-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-muted); min-width:48px; }
.format-val { font-family:ui-monospace,monospace; font-size:0.84rem; flex:1; padding:0.3rem 0.5rem; background:#f9fafb; border:1px solid var(--border); }
.copy-sm { font-size:0.7rem; padding:0.25rem 0.55rem; border:1px solid var(--border); background:#f9fafb; color:var(--text-muted); cursor:pointer; white-space:nowrap; }
.copy-sm:hover { border-color:var(--accent); color:var(--accent); }