.hsv-converter-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:2rem;background-color:#f5f7fa;font-family:Inter,Segoe UI,system-ui,sans-serif}.hsv-converter-card{width:100%;max-width:600px;background-color:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.1);padding:2rem}.hsv-converter-card h1{font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:2rem;color:#333}.hsv-converter-card h3{font-size:1.2rem;font-weight:600;margin:1.5rem 0 .75rem;color:#333}.color-preview-container{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}.color-preview{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;margin-bottom:1rem;cursor:pointer;transition:transform .2s ease;border:2px solid #eaeaea}.color-preview:hover{transform:scale(1.05)}.color-actions{display:flex;gap:.75rem;margin-top:1rem}.action-button{padding:.5rem 1rem;background-color:#555;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s}.action-button:hover{background-color:#333}.hsv-inputs{margin-top:1.5rem}.input-group{margin-bottom:1.25rem}.input-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#555;font-size:.95rem}.slider-with-input{display:flex;gap:1rem;align-items:center}.slider{flex:1;-webkit-appearance:none;height:6px;background:#e0e0e0;border-radius:3px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#555;cursor:pointer}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#555;cursor:pointer;border:none}.number-input{width:60px;padding:.5rem;border:1px solid #ccc;border-radius:4px;text-align:center;font-size:.9rem}.number-input:focus{border-color:#555;outline:none}.color-history{margin-top:2rem}.history-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.75rem}.history-color{aspect-ratio:1;border-radius:8px;cursor:pointer;border:1px solid #eaeaea;transition:transform .2s}.history-color:hover{transform:scale(1.1);box-shadow:0 2px 8px rgba(0,0,0,.15)}.color-gradient-picker{width:100%;margin:1.5rem 0}.hue-gradient{width:100%;height:30px;background:linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000);border-radius:8px;position:relative;margin-bottom:1rem;cursor:pointer}.hue-slider{position:absolute;width:10px;height:30px;background-color:#fff;border:2px solid #555;border-radius:4px;transform:translateX(-50%);top:0}.saturation-value-picker{width:100%;aspect-ratio:1;border-radius:8px;position:relative;cursor:pointer;background:linear-gradient(90deg,white,transparent)}.saturation-value-picker:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,black);border-radius:8px}.sv-slider{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);z-index:1}@media(max-width:600px){.hsv-converter-card{padding:1.5rem}.history-grid{grid-template-columns:repeat(5,1fr)}.color-actions{flex-wrap:wrap;justify-content:center}}