/* Color Converter - per-tool styles. Self-contained (no image-tools.css). */

.cc-intro { margin: 0 0 16px; color: #475569; font-size: 0.95rem; line-height: 1.5; }

.cc-layout { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }

.cc-preview { flex: 0 0 220px; }
.cc-swatch {
    width: 220px; height: 150px; border-radius: 14px; border: 1px solid #e7eaf0;
    display: flex; align-items: flex-end; padding: 10px;
}
.cc-swatch-label {
    font-weight: 700; font-size: 0.95rem; color: #1f2937;
    background: rgba(255, 255, 255, 0.72); border-radius: 8px; padding: 3px 8px;
    font-variant-numeric: tabular-nums;
}
.cc-swatch-label.cc-on-dark { color: #f8fafc; background: rgba(15, 23, 42, 0.45); }
.cc-picker-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
#cc-picker {
    width: 64px; height: 40px; padding: 2px; border: 1px solid #d7dbe0;
    border-radius: 8px; background: #fff; cursor: pointer;
}
.cc-picker-hint { color: #64748b; font-size: 0.85rem; }

.cc-fields { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field-label { font-weight: 600; font-size: 0.85rem; color: #334155; }
.cc-field-row { display: flex; gap: 8px; }
.cc-input {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.95rem; padding: 10px 12px;
    border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; color: #1f2937;
    font-variant-numeric: tabular-nums;
}
.cc-input:focus { outline: 2px solid #4f46e5; border-color: #4f46e5; }
.cc-input.cc-invalid { border-color: #dc2626; outline-color: #dc2626; }
.cc-copy-btn { flex: 0 0 auto; padding: 8px 14px; font-size: 0.85rem; }

.cc-bridge { margin-top: 18px; }
.cc-bridge .primary-btn { text-decoration: none; display: inline-block; }
.cc-bridge .primary-btn:hover { color: #fff; }

@media (max-width: 560px) {
    .cc-preview { flex-basis: 100%; }
    .cc-swatch { width: 100%; }
}