.ccr-tool{background:#fff;border-radius:16px;border:1px solid var(--gray-200);padding:2rem;margin-top:2rem;display:flex;flex-direction:column;gap:1.5rem}.ccr-pickers{display:flex;gap:1.5rem;flex-wrap:wrap}.ccr-picker-group{display:flex;flex-direction:column;gap:.4rem}.ccr-label{font-size:.875rem;font-weight:600;color:var(--gray-600)}.ccr-color-row{display:flex;align-items:center;gap:.5rem}.ccr-color-picker,.ccr-hex-input{border:1px solid var(--gray-300);border-radius:8px}.ccr-color-picker{width:48px;height:40px;padding:2px;cursor:pointer;background:#fff}.ccr-hex-input{width:100px;padding:.45rem .65rem;font-size:.875rem;font-family:"Courier New",monospace;color:var(--gray-800)}.ccr-hex-input:focus{outline:0;border-color:var(--primary-500)}.ccr-preview{border-radius:12px;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:center;min-height:80px;border:1px solid var(--gray-200)}.ccr-preview span{font-size:1.1rem;font-weight:600}.ccr-results{display:flex;flex-direction:column;gap:1.25rem}.ccr-ratio-box{display:flex;align-items:baseline;gap:.75rem}.ccr-ratio-value{font-size:2rem;font-weight:800;color:var(--gray-900)}.ccr-ratio-label{font-size:.95rem;color:var(--gray-500)}.ccr-wcag-grid{display:flex;gap:.75rem;flex-wrap:wrap}.ccr-wcag-item{display:flex;flex-direction:column;gap:.3rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:.65rem .9rem;min-width:120px}.ccr-wcag-level{font-size:.8rem;font-weight:600;color:var(--gray-600)}.ccr-badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.8rem;font-weight:700;text-align:center}.ccr-badge.pass{background:#d1fae5;color:#065f46}.ccr-badge.fail{background:#fee2e2;color:#7f1d1d}.ccr-luminance-row{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.875rem;color:var(--gray-600)}.ccr-luminance-row strong{color:var(--gray-800)}