.colorconv-section{margin-top:18px}.colorconv-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:24px;margin-top:20px;display:grid}.colorconv-swatch-wrap{gap:12px;min-width:0;display:grid}.colorconv-swatch{border:var(--line-width) solid var(--line);border-radius:var(--radius-lg);min-height:220px;box-shadow:var(--sticker-sm);background:linear-gradient(var(--colorconv-current), var(--colorconv-current)), repeating-conic-gradient(var(--border) 0% 25%, var(--surface) 0% 50%) 0 0 / 20px 20px;align-items:flex-end;padding:16px;display:flex}.colorconv-swatch-text{overflow-wrap:anywhere;gap:2px;min-width:0;font-size:14px;line-height:1.5;display:grid}.colorconv-swatch-text strong{letter-spacing:.02em;font-size:26px;line-height:1.2}.colorconv-swatch-translucent .colorconv-swatch-text{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-main);padding:8px 12px}.colorconv-pick-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.colorconv-picker{min-height:44px;color:var(--text-main);cursor:pointer;align-items:center;gap:10px;font-size:14px;font-weight:600;display:inline-flex}.colorconv-picker input[type=color]{border:var(--line-width) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;width:56px;height:44px;padding:2px}.colorconv-reset{min-height:44px}.colorconv-inputs{gap:20px;min-width:0;display:grid}.colorconv-group{gap:8px;min-width:0;display:grid}.colorconv-group .tool-input-label{margin-bottom:0}.colorconv-input{min-width:0;min-height:44px;font-size:16px}.colorconv-hex{letter-spacing:.04em;font-family:ui-monospace,Cascadia Mono,Consolas,monospace}.colorconv-input-invalid,.colorconv-input-invalid:focus{border-color:var(--danger)}.colorconv-channel{grid-template-columns:92px 96px minmax(0,1fr);align-items:center;gap:10px;display:grid}.colorconv-channel-label{color:var(--text-main);font-size:14px;font-weight:600}.colorconv-channel-number{min-width:0;position:relative}.colorconv-channel-number .colorconv-input{padding:9px 26px 9px 10px}.colorconv-suffix{color:var(--text-muted);pointer-events:none;font-size:14px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.colorconv-slider{width:100%;min-width:0;height:44px;accent-color:var(--primary);cursor:pointer;margin:0}.colorconv-error{color:var(--danger);margin:0;font-size:13px;line-height:1.6}.colorconv-hint{color:var(--text-secondary);margin:14px 0 0;font-size:13px;line-height:1.7}.colorconv-result{text-align:left}.colorconv-outputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:0;list-style:none;display:grid}.colorconv-output{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:10px 12px;display:grid}.colorconv-output-text{gap:2px;min-width:0;display:grid}.colorconv-output-label{color:var(--text-secondary);font-size:12px;font-weight:600}.colorconv-output-value{color:var(--text-main);overflow-wrap:anywhere;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:15px;line-height:1.5}.colorconv-copy{cursor:pointer;min-width:64px;min-height:44px}.colorconv-contrast{gap:12px;margin-top:20px;display:grid}.colorconv-contrast-row{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-soft);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;gap:16px;padding:12px;display:grid}.colorconv-contrast-preview{border:1px solid var(--border);border-radius:var(--radius-sm);overflow-wrap:anywhere;align-content:center;gap:6px;min-width:0;min-height:96px;padding:14px;display:grid}.colorconv-preview-large{font-size:24px;font-weight:700;line-height:1.3}.colorconv-preview-normal{font-size:16px;line-height:1.6}.colorconv-contrast-info{align-content:start;gap:8px;min-width:0;display:grid}.colorconv-ratio{color:var(--text-main);font-size:28px;font-weight:700;line-height:1.2}.colorconv-badges{flex-wrap:wrap;gap:6px;display:flex}.colorconv-badge{background:var(--surface);border:1px solid;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;line-height:1.5}.colorconv-badge-pass{color:var(--success)}.colorconv-badge-fail{color:var(--danger)}.colorconv-bg-row{align-items:flex-end;gap:10px;margin-top:4px;display:flex}.colorconv-bg-field{flex:auto;min-width:0;max-width:220px;display:block}.colorconv-bg-field .tool-input-label{margin-bottom:6px}.colorconv-palette-label{margin-top:20px}.colorconv-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px;display:grid}.colorconv-chip{border:var(--line-width) solid var(--line);border-radius:var(--radius-md);min-width:0;min-height:84px;box-shadow:var(--sticker-xs);font:inherit;text-align:left;cursor:pointer;align-content:end;gap:4px;padding:10px;display:grid}.colorconv-chip:hover{transform:translate(-1px,-1px)}.colorconv-chip:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.colorconv-chip-name{font-size:12px;font-weight:600;line-height:1.4}.colorconv-chip-hex{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:14px;font-weight:700}.colorconv-formula{overflow-wrap:anywhere;line-height:1.7}@media (width<=760px){.colorconv-top,.colorconv-contrast-row{grid-template-columns:minmax(0,1fr)}.colorconv-swatch{min-height:150px}.colorconv-outputs{grid-template-columns:minmax(0,1fr)}.colorconv-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.colorconv-card.tool-main-card,.colorconv-result.tool-result{padding:20px 16px}.colorconv-channel{grid-template-columns:minmax(0,1fr) 104px;gap:2px 10px}.colorconv-slider{grid-column:1/-1}.colorconv-bg-field{max-width:none}}