.hex-to-pantone-container{max-width:1000px;margin:0 auto;padding:2rem;font-family:Segoe UI,Roboto,Helvetica Neue,sans-serif;color:#212121;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.converter-header{text-align:center;margin-bottom:2rem}.converter-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#3f51b5}.converter-header p{font-size:1.1rem;color:#333;opacity:.8}.input-section{margin-bottom:2rem}.input-section .input-group{display:flex;gap:1rem;margin-bottom:1rem}.input-section .hex-input{flex:1;padding:.8rem 1rem;font-size:1rem;border:2px solid #ddd;border-radius:8px;transition:border-color .2s}.input-section .hex-input:focus{outline:none;border-color:#3f51b5}.input-section .convert-button{padding:0 1.5rem;font-size:1rem;font-weight:600;color:#fff;background-color:#3f51b5;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}.input-section .convert-button:hover{background-color:rgb(49.8319672131,64.0696721311,143.1680327869)}.input-section .convert-button:disabled{background-color:rgb(133.3442622951,145.4426229508,212.6557377049);cursor:not-allowed}.input-section .error-message{color:#f50057;font-size:.9rem;margin-top:.5rem}.results-section{margin-bottom:2rem}.results-section .color-preview-container{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}@media(min-width:768px){.results-section .color-preview-container{flex-direction:row}}.results-section .color-preview{flex:1;display:flex;flex-direction:column;gap:1rem}.results-section .color-preview .hex-color-display,.results-section .color-preview .pantone-color-display{height:150px;border-radius:8px;display:flex;align-items:flex-end;justify-content:flex-start;padding:1rem;position:relative;overflow:hidden}.results-section .color-preview .color-label{background-color:hsla(0,0%,100%,.8);padding:.3rem .6rem;border-radius:4px;font-size:.9rem;font-weight:600;color:#333;box-shadow:0 1px 3px rgba(0,0,0,.2)}.results-section .match-details{flex:1;padding:1.5rem;background-color:#f5f5f5;border-radius:8px}.results-section .match-details h2{margin-top:0;margin-bottom:1rem;font-size:1.5rem;color:#3f51b5}.results-section .match-details .match-info p{margin:.5rem 0;font-size:1.1rem}.results-section .match-details .match-info p strong{color:#333}.similar-colors{margin-top:2rem}.similar-colors h2{margin-bottom:1rem;font-size:1.5rem;color:#3f51b5}.similar-colors .color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.similar-colors .similar-color-item{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.1);transition:transform .2s}.similar-colors .similar-color-item:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(0,0,0,.15)}.similar-colors .similar-color-item .color-swatch{height:100px}.similar-colors .similar-color-item .color-info{padding:.8rem;background-color:#fff}.similar-colors .similar-color-item .color-info .pantone-name{margin:0 0 .3rem;font-weight:600;font-size:.9rem}.similar-colors .similar-color-item .color-info .pantone-hex{margin:0;font-size:.8rem;color:#333;opacity:.7}.info-section{margin-top:3rem;padding:1.5rem;background-color:#f5f5f5;border-radius:8px}.info-section h3{margin-top:0;margin-bottom:.8rem;color:#3f51b5}.info-section p{margin:0;font-size:.95rem;line-height:1.5;color:#333}@media(max-width:768px){.hex-to-pantone-container{padding:1.5rem}.converter-header h1{font-size:2rem}.input-section .input-group{flex-direction:column}.similar-colors .color-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}