.cc-inputs{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:16px;display:flex}.cc-color-group{flex-direction:column;gap:6px;display:flex}.cc-label{color:#475569;font-size:15px;font-weight:700}.cc-color-row{align-items:center;gap:8px;display:flex}.cc-picker{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:10px;width:52px;height:52px;padding:2px}.cc-picker::-webkit-color-swatch-wrapper{padding:0}.cc-picker::-webkit-color-swatch{border:none;border-radius:6px}.cc-hex{color:#334155;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:120px;padding:12px 14px;font-family:monospace;font-size:17px;font-weight:700}.cc-hex:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 2px #3b82f626}.cc-rgb{color:#94a3b8;text-align:center;font-family:monospace;font-size:13px}.cc-swap{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:44px;height:44px;margin-bottom:22px;font-size:22px;transition:all .2s}.cc-swap:hover{background:#eff6ff;border-color:#3b82f6}.cc-ratio-section{text-align:center;margin-top:28px}.cc-ratio-value{color:#1e293b;font-size:56px;font-weight:900;transition:color .3s}.cc-ratio-label{color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-size:16px;font-weight:700}.cc-results{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:24px;display:grid}@media (width<=768px){.cc-results{grid-template-columns:repeat(2,1fr)}}.cc-result{text-align:center;border:2px solid;border-radius:12px;padding:16px 12px;transition:all .3s}.cc-result-pass{background:#f0fdf4;border-color:#bbf7d0}.cc-result-fail{background:#fef2f2;border-color:#fca5a5}.cc-result-level{color:#334155;font-size:14px;font-weight:700}.cc-result-req{color:#94a3b8;margin-top:2px;font-size:13px}.cc-result-status{margin-top:6px;font-size:16px;font-weight:800}.cc-preview-section{margin-top:28px}.cc-section-title{color:#334155;margin-bottom:10px;font-size:18px;font-weight:700}.cc-preview{border:1px solid #e2e8f0;border-radius:14px;padding:30px;transition:all .3s}.cc-preview-normal{margin:0 0 12px;font-size:16px;line-height:1.6}.cc-preview-large{margin:0 0 8px;font-size:24px;line-height:1.4}.cc-preview-bold{margin:0 0 8px;font-size:18.66px;font-weight:700;line-height:1.4}.cc-preview-small{opacity:.9;margin:0;font-size:12px;line-height:1.5}.cc-suggestion{margin-top:24px}.cc-suggestion-content{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:16px}.cc-sugg-row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.cc-sugg-swatch{border:2px solid #e2e8f0;border-radius:10px;flex-shrink:0;width:48px;height:48px}.cc-sugg-info{flex:1;min-width:150px}.cc-sugg-hex{color:#1e293b;font-family:monospace;font-size:18px;font-weight:800}.cc-sugg-detail{color:#64748b;margin-top:2px;font-size:14px}.cc-sugg-apply{color:#1e40af;cursor:pointer;background:#eff6ff;border:1px solid #3b82f6;border-radius:6px;margin-top:6px;padding:6px 14px;font-size:14px;font-weight:700;transition:all .2s}.cc-sugg-apply:hover{background:#dbeafe}.cc-sugg-preview{border:1px solid #e2e8f0;border-radius:10px;flex-shrink:0;padding:14px 18px}