.converter-container{max-width:600px;margin:2rem auto;padding:2rem;background-color:#f8f9fa;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:#333}@media(max-width:768px){.converter-container{padding:1rem;margin:1rem}}.converter-title{text-align:center;margin-bottom:1.5rem;color:#2c3e50;font-size:2rem}@media(max-width:768px){.converter-title{font-size:1.5rem}}.converter-wrapper{display:flex;flex-direction:column;gap:1.5rem}@media(min-width:768px){.converter-wrapper{flex-direction:row}}.converter-inputs{flex:1;display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;align-items:center;gap:.5rem}.input-group label{font-weight:700;width:1.5rem}.input-group input[type=number]{width:4rem;padding:.5rem;border:1px solid #ddd;border-radius:8px;text-align:center;font-size:1rem}.input-group input[type=number]:focus{outline:none;border-color:#3498db}.input-group input[type=range]{flex:1;height:5px;border-radius:5px;appearance:none;background:#ddd;outline:none}.input-group input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer;transition:all .3s ease}.input-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;cursor:pointer;transition:all .3s ease;border:none}.red-slider::-webkit-slider-thumb{background-color:#e74c3c}.red-slider::-moz-range-thumb{background-color:#e74c3c}.green-slider::-webkit-slider-thumb{background-color:#2ecc71}.green-slider::-moz-range-thumb{background-color:#2ecc71}.blue-slider::-webkit-slider-thumb{background-color:#3498db}.blue-slider::-moz-range-thumb{background-color:#3498db}.color-preview-section{flex:1;display:flex;flex-direction:column;gap:1rem}.color-preview{position:relative;width:100%;height:100px;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;cursor:pointer;transition:all .3s ease}.color-preview:hover{transform:scale(1.02)}.color-preview .copied-tooltip{position:absolute;top:-2rem;right:0;background:#2ecc71;color:#fff;padding:.25rem .5rem;border-radius:8px;font-size:.8rem}.copy-button{padding:.75rem;background-color:#3498db;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease}.copy-button:hover{background-color:rgb(33.1380753138,125.1882845188,186.8619246862)}.color-history{margin-top:2rem}.color-history h3{margin-bottom:.5rem;color:#2c3e50}.color-history .history-swatches{display:flex;gap:.5rem;flex-wrap:wrap}.color-history .history-swatches .history-swatch{width:40px;height:40px;border-radius:8px;cursor:pointer;transition:all .3s ease;border:1px solid #ddd}.color-history .history-swatches .history-swatch:hover{transform:scale(1.1)}