:root{--bg:#f7f8fb;--surface:#fff;--muted:#6b7280;--accent:#2563eb}
.color-tool{display:flex;gap:16px;flex-wrap:wrap}
.picker-panel{flex:0 0 260px;background:var(--surface);padding:12px;border-radius:8px;border:1px solid #e6e9ef}
.picker-panel input[type="color"]{width:100%;height:48px;border-radius:6px;border:0;padding:0}
.picker-panel input[type="text"]{width:100%;padding:8px;border-radius:6px;border:1px solid var(--border);margin-top:6px}
.values{margin-top:8px;color:var(--muted)}
.controls{display:flex;gap:8px;margin-top:8px}
.palette-panel{flex:1;min-width:260px}
.palette-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.palette{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:72px;height:72px;border-radius:8px;display:flex;align-items:flex-end;justify-content:center;padding:6px;color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(16,24,40,0.06)}
.swatch small{background:rgba(0,0,0,0.18);padding:2px 6px;border-radius:6px}
.palette-actions{display:flex;gap:8px;margin-top:12px}
@media(max-width:760px){.color-tool{flex-direction:column}.picker-panel{width:100%}}