.app-container{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,sans-serif}h1{font-family:Poller One,sans-serif;color:#1b1e2b}.color-display-container{width:100%;height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:8px;margin-bottom:20px;position:relative;cursor:pointer;transition:background-color .3s ease;box-shadow:0 4px 8px #0000001a;border:#2e2e3e solid 5px}.color-code{font-size:2em;font-weight:700;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.5)}.copied-message{position:absolute;bottom:10px;background-color:#000000b3;color:#fff;padding:5px 10px;border-radius:5px;font-size:.9em;animation:fadeInOut 1.5s forwards}@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.color-display-container .color-code[style*="background-color: #F"]{color:#333;text-shadow:none}.controls-container{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.control-button{padding:12px 25px;font-size:1.1em;font-weight:700;border:#2e2e3e solid 5px;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .1s ease;box-shadow:0 2px 4px #0000001a}.control-button:hover{transform:translateY(-2px)}.control-button:active{transform:translateY(0)}.control-button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7;transform:none;box-shadow:none}.generate-button{background-color:#4caf50;color:#fff}.generate-button:hover:not(:disabled){background-color:#45a049}.save-button{background-color:#008cba;color:#fff}.save-button:hover:not(:disabled){background-color:#007bb5}.color-palette-wrapper{text-align:center}.color-palette-wrapper h2{color:#333;margin-bottom:20px}.color-palette-container{display:flex;justify-content:center;align-items:center;min-height:100px;background-color:#f8f8f8;border:1px solid #eee;border-radius:8px;padding:15px;margin-bottom:20px;box-shadow:inset 0 1px 3px #0000000d;flex-wrap:wrap;gap:10px}.empty-palette-message{color:#777;font-style:italic}.saved-colors-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.palette-color-item{width:80px;height:80px;border-radius:5px;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a;position:relative;transition:transform .2s ease}.palette-color-item:hover{transform:translateY(-3px)}.remove-color-button{position:absolute;top:-5px;right:-5px;background-color:#f44336;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:.8em;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 1px 2px #0003}.remove-color-button:hover{background-color:#da190b}.download-palette-button{background-color:#8a2be2;color:#fff;padding:12px 25px;font-size:1.1em;font-weight:700;border:#2e2e3e solid 5px;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .1s ease;box-shadow:0 2px 4px #0000001a;margin-bottom:1rem}.download-palette-button:hover{background-color:#7a1cd1;transform:translateY(-2px)}.remove-color-button{position:absolute;top:-8px;right:-8px;background-color:#f44336;color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1.1em;font-weight:700;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 1px 3px #0000004d;transition:background-color .2s ease,transform .2s ease;z-index:10}.remove-color-button:hover{background-color:#da190b;transform:scale(1.1)}.remove-color-button:active{transform:scale(.9)}.instructions-container{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;border:#2e2e3e solid 5px;background-color:#c9efef}