*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5f5f5;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.App{margin:0 auto;max-width:1200px;min-height:100vh;padding:2rem}.header{margin-bottom:3rem;position:relative}.header-content{text-align:center}.header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.header p{color:#666;font-size:1.1rem}.saved-colors-btn{background:#fff;border:2px solid #667eea;border-radius:20px;color:#667eea;cursor:pointer;font-size:.9rem;font-weight:600;padding:.5rem 1rem;position:absolute;right:0;top:0;transition:all .3s ease}.saved-colors-btn:hover{background:#667eea;box-shadow:0 4px 12px #667eea4d;color:#fff;transform:translateY(-2px)}.mini-color-card:before{background:#333;border-radius:4px;color:#fff;content:attr(data-tooltip);font-family:Courier New,monospace;font-size:.8rem;margin-bottom:5px;padding:.25rem .5rem;white-space:nowrap}.mini-color-card:after,.mini-color-card:before{bottom:100%;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:all .2s ease}.mini-color-card:after{border:5px solid #0000;border-top-color:#333;content:""}.mini-color-card:hover:after,.mini-color-card:hover:before{opacity:1;transform:translateX(-50%) translateY(-5px)}@media (max-width:768px){.saved-colors-btn{margin-top:1.5rem;position:static}.header{align-items:center;display:flex;flex-direction:column;gap:1.5rem}.header,.header-content{text-align:center}.header h1{font-size:2rem}}.generate-section{margin-bottom:3rem;text-align:center}.generate-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:1rem 2.5rem;transition:all .3s ease}.generate-btn:hover{box-shadow:0 6px 20px #667eea99;transform:translateY(-2px)}.generate-btn:active{transform:translateY(0)}.color-palette{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:4rem}.color-card{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;overflow:hidden;transition:all .3s ease}.color-card:hover{box-shadow:0 5px 20px #00000026;transform:translateY(-5px)}.color-display{cursor:pointer;height:150px;position:relative;width:100%}.color-info{padding:1rem}.hex-code{font-family:Courier New,monospace;font-size:1.1rem;font-weight:600;margin-bottom:.5rem;text-align:center}.color-actions{gap:.5rem}.color-actions,.icon-btn{display:flex;justify-content:center}.icon-btn{align-items:center;background:#f0f0f0;border:none;border-radius:8px;cursor:pointer;height:36px;padding:.5rem;transition:all .2s ease;width:36px}.icon-btn:hover{background:#e0e0e0;transform:scale(1.1)}.icon-btn.saved{background:gold}.saved-section{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;padding:2rem}.saved-section h2{color:#333;margin-bottom:1.5rem}.saved-colors-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.mini-color-card{aspect-ratio:1;border-radius:8px;cursor:pointer;position:relative;transition:all .2s ease}.mini-color-card:hover{box-shadow:0 3px 10px #0003;transform:scale(1.1)}.mini-color-wrapper{position:relative}.delete-btn{align-items:center;background:#f44;border:none;border-radius:50%;color:#fff;cursor:pointer;display:none;font-size:12px;height:20px;justify-content:center;position:absolute;right:-8px;top:-8px;transition:all .2s ease;width:20px}.mini-color-wrapper:hover .delete-btn{display:flex}.delete-btn:hover{background:red;transform:scale(1.1)}.toast{animation:slideIn .3s ease;background:#333;border-radius:8px;bottom:2rem;box-shadow:0 4px 12px #0000004d;color:#fff;padding:1rem 1.5rem;position:fixed;right:2rem}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.App{padding:1rem}.header h1{font-size:2rem}.color-palette{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/*# sourceMappingURL=main.36ecb903.css.map*/