.color-picker-container{max-width:800px;margin:0 auto;padding:2rem;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.color-picker-container h1{text-align:center;margin-bottom:2rem;color:#333}.color-picker-container .color-display{height:200px;border-radius:12px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:2rem;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:background-color .3s ease}.color-picker-container .color-display .color-info{background-color:hsla(0,0%,100%,.8);padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center}.color-picker-container .color-display .color-info .current-color{font-weight:600;font-size:1.2rem}.color-picker-container .tabs{display:flex;margin-bottom:1.5rem;border-bottom:1px solid #e0e0e0}.color-picker-container .tabs button{background:none;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;border:none;border-bottom:3px solid rgba(0,0,0,0);transition:all .2s ease;color:#666}.color-picker-container .tabs button.active{border-bottom:3px solid #3498db;color:#333;font-weight:600}.color-picker-container .tabs button:hover:not(.active){background-color:#f8f8f8;color:#333}.color-picker-container .tabs button:focus{outline:none}.color-picker-container .tab-content{padding:1.5rem;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05)}.color-picker-container .tab-content .harmonies-tab,.color-picker-container .tab-content .hex-tab,.color-picker-container .tab-content .hsl-tab,.color-picker-container .tab-content .rgb-tab{display:flex;flex-direction:column;gap:1.5rem}.color-picker-container .input-group{display:flex;align-items:center;gap:1rem}.color-picker-container .input-group label{min-width:80px}.color-picker-container .input-group input[type=text]{flex:1;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;font-family:monospace}.color-picker-container .input-group input[type=color]{width:60px;height:40px;border:none;border-radius:4px;cursor:pointer}.color-picker-container .input-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-container .input-group input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-picker-container .slider-group{display:flex;flex-direction:column;gap:.5rem}.color-picker-container .slider-group label{display:flex;justify-content:space-between;font-weight:500}.color-picker-container .slider-group input[type=range]{width:100%;height:8px;background:#ddd;border-radius:4px;appearance:none;outline:none}.color-picker-container .slider-group input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#3498db;cursor:pointer;transition:background .2s}.color-picker-container .slider-group input[type=range]::-webkit-slider-thumb:hover{background:#2980b9}.color-picker-container .slider-group input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:#3498db;cursor:pointer;transition:background .2s}.color-picker-container .slider-group input[type=range]::-moz-range-thumb:hover{background:#2980b9}.color-picker-container .copy-btn,.color-picker-container .random-btn,.color-picker-container .save-btn{padding:.75rem 1rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:background-color .2s;white-space:nowrap}.color-picker-container .copy-btn:hover,.color-picker-container .random-btn:hover,.color-picker-container .save-btn:hover{background-color:#2980b9}.color-picker-container .copy-alert{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#fff;padding:.75rem 1.5rem;border-radius:4px;animation:fadeInOut 2s ease}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.color-picker-container .actions{display:flex;gap:1rem;margin-top:2rem;justify-content:center}.color-picker-container .actions button{padding:.75rem 1.5rem;min-width:120px}.color-picker-container .actions .random-btn{background-color:#9b59b6}.color-picker-container .actions .random-btn:hover{background-color:#8e44ad}.color-picker-container .saved-colors{margin-top:2rem}.color-picker-container .saved-colors h3{margin-bottom:1rem;color:#333}.color-picker-container .saved-colors .color-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:1rem}.color-picker-container .saved-colors .color-palette .saved-color{height:60px;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s}.color-picker-container .saved-colors .color-palette .saved-color:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.color-picker-container .harmony-section{margin-bottom:2rem}.color-picker-container .harmony-section h3{margin-bottom:1rem;color:#333}.color-picker-container .harmony-section .color-harmony{display:flex;gap:1rem;align-items:center}.color-picker-container .harmony-section .color-harmony.analogous{justify-content:space-between}.color-picker-container .harmony-section .color-harmony .harmony-color{width:60px;height:60px;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.color-picker-container .harmony-section .color-harmony button{padding:.75rem 1rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.color-picker-container .harmony-section .color-harmony button:hover{background-color:#2980b9}@media(max-width:768px){.color-picker-container{padding:1rem}.color-picker-container .tabs{flex-wrap:wrap}.color-picker-container .tabs button{flex:1 0 auto;text-align:center}.color-picker-container .input-group{flex-direction:column;align-items:stretch}.color-picker-container .input-group input[type=color]{width:100%;margin-bottom:.5rem}.color-picker-container .actions{flex-direction:column}.color-picker-container .actions button{width:100%}.color-picker-container .harmony-section .color-harmony{flex-direction:column}.color-picker-container .harmony-section .color-harmony.analogous{flex-direction:row}}@media(max-width:480px){.color-picker-container .color-display{height:150px}.color-picker-container .tabs button{padding:.5rem;font-size:.9rem}.color-picker-container .saved-colors .color-palette{grid-template-columns:repeat(auto-fill,minmax(45px,1fr))}.color-picker-container .saved-colors .color-palette .saved-color{height:45px}.color-picker-container .harmony-section .color-harmony.analogous{justify-content:center;gap:.5rem}.color-picker-container .harmony-section .color-harmony.analogous .harmony-color{width:45px;height:45px}}