/* Color converter */
.cv-top { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 560px) { .cv-top { grid-template-columns: 1fr; } }
.cv-swatch {
  --cv-color: #5b4cf0; position: relative; min-height: 150px; border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  background-color: #fff; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.cv-swatch::after { content: ''; position: absolute; inset: 0; background: var(--cv-color); }
@media (max-width: 560px) { .cv-swatch { min-height: 96px; } }
.cv-out { display: grid; gap: 8px; }
.cv-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px 8px 14px; border-radius: var(--r); background: var(--glass-soft); border: 1px solid var(--line); }
.cv-label { font-weight: 700; font-size: 0.88rem; color: var(--ink-2); }
.cv-val { font-family: var(--mono); font-size: 0.92rem; overflow-wrap: anywhere; background: none; padding: 0; color: var(--ink); }
@media (max-width: 560px) {
  .cv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cv-label { grid-column: 1 / -1; font-size: 0.8rem; }
}
.cv-chip { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); vertical-align: -2px; }
#cv-err:empty { display: none; }
.cv-pick-row { display: flex; gap: 8px; }
.cv-pick-row input[type='color'] { flex-shrink: 0; }