.color-input-wrapper{display:flex;align-items:center;gap:0.5rem;}.color-input-wrapper input[type="color"]{border:none;width:48px;height:48px;cursor:pointer;padding:0;flex-shrink:0;border-radius:0.375rem;-webkit-appearance:none;}.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}.color-input-wrapper input[type="color"]::-webkit-color-swatch{border-radius:0.375rem;border:none;}.manual-hex-input{width:100px;text-transform:lowercase;font-family:monospace, monospace;font-size:1.1rem;padding:0.375rem 0.6rem;border:1px solid #ced4da;border-radius:0.25rem;transition:border-color 0.15s ease-in-out;outline-offset:2px;}.manual-hex-input:focus{border-color:#86b7fe;outline:2px solid rgba(13,110,253,0.5);outline-offset:2px;}.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;border:none;cursor:pointer;transition:background-color 0.2s ease;flex-shrink:0;background:transparent;outline:none;padding:0;}.copy-btn svg{width:20px;height:20px;stroke-width:2.5;stroke:#333;transition:stroke 0.2s ease;}.copy-btn svg.copied{stroke:#6c757d;}.copy-btn:focus, .copy-btn:active{outline:none;box-shadow:none !important;background-color:transparent !important;}.copy-btn:active svg{stroke:#6c757d;}.swap-color-btn{cursor:pointer;margin:0 1rem;padding:0;border:none;background:transparent;flex-shrink:0;color:#0d6efd;transition:color 0.2s ease;}.swap-color-btn:hover{color:#0a58ca;}.swap-color-btn:active{color:#6c757d;transition-duration:0s;}.swap-color-btn:focus, .swap-color-btn:focus-visible{outline:none;box-shadow:none;}#contrast-container{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.5rem;}#contrast-results, #preview{box-sizing:border-box;flex:1 1 320px;max-width:100%;}@media (min-width:768px){#contrast-results, #preview{flex:1 1 48%;}}#contrast-results h2, #preview h2{margin-bottom:1rem;font-weight:600;font-size:1.6rem;display:flex;justify-content:space-between;align-items:center;}#contrast-results h2 .contrast-ratio{font-weight:700;font-size:1.2rem;font-family:monospace, monospace;user-select:text;padding-left:1rem;color:inherit;}#preview{border:1px solid #dee2e6;border-radius:0.375rem;padding:1.5rem;background-color:#E4F1FE;color:#013243;}#preview p:nth-child(4){font-size:13.33px;}.wcag-row{display:flex;justify-content:space-between;margin-bottom:0.7rem;align-items:center;font-size:0.9rem;}.wcag-label{font-weight:600;width:38%;color:#333;text-align:left;}.wcag-status{display:inline-flex;align-items:center;gap:0.35rem;border-radius:0.375rem;padding:0.3rem 1rem;font-weight:600;user-select:none;white-space:nowrap;width:38%;margin-right:10px;justify-content:center;font-size:0.9rem;color:white;box-sizing:border-box;}.wcag-status svg{width:16px;height:16px;stroke-width:2.5;}.bad{background-color:#dc3545;}.bad svg{stroke:white;}.good{background-color:#198754;}.good svg{stroke:white;}#warning-message{margin-top:1.5rem;}