*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:20px}.container{max-width:900px;margin:0 auto}h1{text-align:center;margin-bottom:10px;font-size:2.5rem;background:linear-gradient(90deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.subtitle{text-align:center;color:#a0a0a0;margin-bottom:30px}.mode-selector{display:flex;justify-content:center;gap:10px;margin-bottom:30px}.mode-btn{padding:12px 30px;border:none;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:600;transition:all 0.3s ease;background:rgb(255 255 255 / .1);color:#fff}.mode-btn:hover{background:rgb(255 255 255 / .2)}.mode-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 15px rgb(102 126 234 / .4)}.mode-description{text-align:center;padding:15px;background:rgb(255 255 255 / .05);border-radius:10px;margin-bottom:30px;font-size:.9rem;color:silver}.colors-section{background:rgb(255 255 255 / .05);border-radius:20px;padding:25px;margin-bottom:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:1.2rem;font-weight:600}.add-color-btn{padding:8px 20px;border:2px dashed rgb(255 255 255 / .3);border-radius:20px;background:#fff0;color:#fff;cursor:pointer;font-size:.9rem;transition:all 0.3s ease}.add-color-btn:hover{border-color:rgb(255 255 255 / .6);background:rgb(255 255 255 / .1)}.add-color-btn:disabled{opacity:.3;cursor:not-allowed}.color-inputs{display:flex;flex-wrap:wrap;gap:15px}.color-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px;background:rgb(0 0 0 / .2);border-radius:15px;position:relative;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.color-picker-wrapper{position:relative;width:80px;height:80px;border-radius:50%;overflow:hidden;box-shadow:0 4px 15px rgb(0 0 0 / .3)}.color-picker{width:150%;height:150%;border:none;cursor:pointer;position:absolute;top:-25%;left:-25%}.color-label{font-size:.8rem;color:#a0a0a0}.color-hex{font-family:monospace;font-size:.85rem;background:rgb(0 0 0 / .3);padding:4px 10px;border-radius:5px}.ratio-slider{width:80px;accent-color:#667eea}.ratio-value{font-size:.75rem;color:#a0a0a0}.rgb-picker{display:flex;flex-direction:column;gap:8px;width:100%}.rgb-slider-row{display:flex;align-items:center;gap:8px}.rgb-label{width:18px;height:18px;border-radius:50%;flex-shrink:0;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .5)}.rgb-label.red{background:#f44}.rgb-label.green{background:#4f4;color:#333;text-shadow:none}.rgb-label.blue{background:#44f}.rgb-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;border-radius:4px;outline:none;cursor:pointer}.rgb-slider.red{background:linear-gradient(to right,#333 0%,#ff4444 100%)}.rgb-slider.green{background:linear-gradient(to right,#333 0%,#44ff44 100%)}.rgb-slider.blue{background:linear-gradient(to right,#333 0%,#4444ff 100%)}.rgb-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.rgb-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.rgb-value{width:32px;font-family:monospace;font-size:.75rem;text-align:right;color:#a0a0a0}.ryb-picker{display:flex;flex-direction:column;gap:8px;width:100%}.ryb-slider-row{display:flex;align-items:center;gap:8px}.ryb-label{width:18px;height:18px;border-radius:50%;flex-shrink:0;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .5)}.ryb-label.red{background:#e63946}.ryb-label.yellow{background:#f4d03f;color:#333;text-shadow:none}.ryb-label.blue{background:#2980b9}.ryb-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;border-radius:4px;outline:none;cursor:pointer}.ryb-slider.red{background:linear-gradient(to right,#333 0%,#e63946 100%)}.ryb-slider.yellow{background:linear-gradient(to right,#333 0%,#f4d03f 100%)}.ryb-slider.blue{background:linear-gradient(to right,#333 0%,#2980b9 100%)}.ryb-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.ryb-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.ryb-value{width:32px;font-family:monospace;font-size:.75rem;text-align:right;color:#a0a0a0}.cmyk-picker{display:flex;flex-direction:column;gap:8px;width:100%}.cmyk-slider-row{display:flex;align-items:center;gap:8px}.cmyk-label{width:18px;height:18px;border-radius:50%;flex-shrink:0;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-shadow:0 1px 2px rgb(0 0 0 / .5)}.cmyk-label.cyan{background:#00bcd4}.cmyk-label.magenta{background:#e91e63}.cmyk-label.yellow{background:#ffeb3b;color:#333;text-shadow:none}.cmyk-label.black{background:#333}.cmyk-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;border-radius:4px;outline:none;cursor:pointer}.cmyk-slider.cyan{background:linear-gradient(to right,#fff 0%,#00bcd4 100%)}.cmyk-slider.magenta{background:linear-gradient(to right,#fff 0%,#e91e63 100%)}.cmyk-slider.yellow{background:linear-gradient(to right,#fff 0%,#ffeb3b 100%)}.cmyk-slider.black{background:linear-gradient(to right,#fff 0%,#000 100%)}.cmyk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px rgb(0 0 0 / .3);border:1px solid #ccc}.cmyk-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:1px solid #ccc;box-shadow:0 2px 6px rgb(0 0 0 / .3)}.cmyk-value{width:32px;font-family:monospace;font-size:.75rem;text-align:right;color:#a0a0a0}.cmyk-result-main{font-family:monospace;font-size:1.6rem;font-weight:600;background:linear-gradient(135deg,rgb(0 188 212 / .3),rgb(233 30 99 / .3),rgb(255 235 59 / .3),rgb(0 0 0 / .3));padding:15px 30px;border-radius:15px;display:inline-block;color:#fff;letter-spacing:2px}.color-preview{width:80px;height:80px;border-radius:50%;box-shadow:0 4px 15px rgb(0 0 0 / .3);margin-bottom:5px}.color-values{font-family:monospace;font-size:.8rem;background:rgb(0 0 0 / .3);padding:4px 10px;border-radius:5px;text-align:center}.remove-btn{position:absolute;top:5px;right:5px;width:22px;height:22px;border:none;border-radius:50%;background:rgb(255 100 100 / .8);color:#fff;cursor:pointer;font-size:14px;line-height:1;transition:all 0.2s ease}.remove-btn:hover{background:#f44;transform:scale(1.1)}.result-section{background:rgb(255 255 255 / .05);border-radius:20px;padding:30px;text-align:center}.result-display{display:flex;justify-content:center;align-items:center;gap:30px;margin:20px 0}.input-colors{display:flex;gap:5px}.mini-color{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 10px rgb(0 0 0 / .3);transition:all 0.3s ease}.arrow{font-size:2rem;color:#667eea;animation:pulse 1.5s infinite}@keyframes pulse{0%,100%{opacity:.5;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}.result-color{width:120px;height:120px;border-radius:50%;box-shadow:0 8px 30px rgb(0 0 0 / .4);transition:all 0.5s ease}.result-info{margin-top:20px}.result-hex{font-family:monospace;font-size:1.5rem;background:rgb(0 0 0 / .3);padding:10px 25px;border-radius:10px;display:inline-block;cursor:pointer;transition:all 0.2s ease}.result-hex:hover{background:rgb(0 0 0 / .5)}.result-rgb{margin-top:10px;font-size:.9rem;color:#a0a0a0}.result-rgb.ryb-main{margin-top:0;margin-bottom:15px}.ryb-result-main{font-family:monospace;font-size:1.8rem;font-weight:600;background:linear-gradient(135deg,rgb(230 57 70 / .3),rgb(244 208 63 / .3),rgb(41 128 185 / .3));padding:15px 30px;border-radius:15px;display:inline-block;color:#fff;letter-spacing:2px}.result-hex.secondary{font-size:1rem;padding:8px 15px;opacity:.8}.copy-hint{font-size:.75rem;color:#666;margin-top:5px}.copied-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:#4caf50;color:#fff;padding:12px 25px;border-radius:25px;font-weight:600;transition:transform 0.3s ease;z-index:1000}.copied-toast.show{transform:translateX(-50%) translateY(0)}.presets{margin-top:20px;padding-top:20px;border-top:1px solid rgb(255 255 255 / .1)}.presets-title{font-size:.9rem;color:#a0a0a0;margin-bottom:10px}.preset-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.preset-btn{padding:6px 15px;border:1px solid rgb(255 255 255 / .2);border-radius:15px;background:#fff0;color:#fff;cursor:pointer;font-size:.85rem;transition:all 0.2s ease}.preset-btn:hover{background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .4)}@media (max-width:600px){h1{font-size:1.8rem}.result-display{flex-direction:column;gap:15px}.arrow{transform:rotate(90deg)}@keyframes pulse{0%,100%{opacity:.5;transform:rotate(90deg) translateX(0)}50%{opacity:1;transform:rotate(90deg) translateX(5px)}}}