:root{--primary-color:#4361ee;--secondary-color:#3f37c9;--background:#f8f9fa;--text-color:#212529;--card-bg:#ffffff}.dark-mode{--background:#121212;--text-color:#f8f9fa;--card-bg:#1e1e1e}body{background-color:var(--background);color:var(--text-color)}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}button{background-color:var(--primary-color);color:white;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;font-weight:bold;transition:all 0.3s ease}button:hover{background-color:var(--secondary-color);transform:translateY(-2px)}.controls{display:flex;gap:10px;margin-bottom:20px;align-items:center}.palette-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:30px}.palette{margin-top:20px;background-color:var(--card-bg);border-radius:10px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:transform 0.3s ease}.palette:hover{transform:translateY(-5px)}.palette-colors{display:flex;height:150px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--card-bg)}.palette-colors::-webkit-scrollbar{height:8px}.palette-colors::-webkit-scrollbar-track{background:var(--card-bg)}.palette-colors::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:4px}.color{flex:0 0 100px;min-width:100px;display:flex;align-items:flex-end;justify-content:center;padding:10px;font-size:12px;font-weight:bold;color:white;text-shadow:0 0 3px rgba(0,0,0,0.5);cursor:pointer;position:relative}.palette-info{padding:15px}.palette-actions{display:flex;justify-content:space-between;margin-top:10px}.saved-palettes{margin-top:40px}.saved-palettes h2{border-bottom:2px solid var(--primary-color);padding-bottom:10px}.empty-saved{text-align:center;color:#6c757d;padding:20px}.theme-toggle{background:none;border:2px solid var(--primary-color);color:var(--primary-color)}.theme-toggle:hover{background:var(--primary-color);color:white}select,input{padding:8px 12px;border-radius:5px;border:1px solid #ced4da;background-color:var(--card-bg);color:var(--text-color)}#alertBox{position:fixed;top:20px;right:20px;padding:15px 25px;background-color:#4caf50;color:white;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,0.1);display:none;z-index:1000;animation:slideIn 0.5s forwards}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@media (max-width:768px){.controls{flex-direction:column;align-items:flex-start}.palette-container{grid-template-columns:1fr}}