/* Color Converter — gap widgets (reuses blog.css + tools.css tokens) */
.col-top{display:flex;gap:1.2rem;align-items:center;margin-bottom:1.4rem;flex-wrap:wrap}
#ccSwatch{width:120px;height:120px;border-radius:var(--radius-sm);border:1px solid var(--border);
  box-shadow:var(--sh-sm);flex:0 0 auto}
.col-pickwrap{display:flex;flex-direction:column;gap:.5rem}
.col-pickwrap label{font-weight:600;font-size:.85rem;color:var(--text-soft)}
#ccPick{width:120px;height:48px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;padding:4px}
.col-fields{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:680px){.col-fields{grid-template-columns:1fr}}
.col-field{display:flex;flex-direction:column;gap:.35rem}
.col-field .lab{font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.col-inwrap{display:flex;gap:.5rem}
.col-inwrap input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.98rem;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;box-sizing:border-box}
.col-inwrap input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,76,.15)}
.col-inwrap input.bad{border-color:var(--coral);background:rgba(255,107,107,.06)}
.col-copy{flex:0 0 auto;width:44px;display:grid;place-items:center;border:1px solid var(--border);
  background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;transition:.15s}
.col-copy:hover{border-color:var(--orange)}
.col-copy svg{width:18px;height:18px;stroke:var(--text-soft);fill:none;stroke-width:2}