@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap";:root{--bg-main: #042f2e;--bg-gradient: radial-gradient(at 0% 0%, hsla(174, 90%, 15%, 1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(181, 80%, 20%, 1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(160, 80%, 15%, 1) 0, transparent 50%);--accent-primary: #2dd4bf;--accent-secondary: #10b981;--accent-glow: rgba(45, 212, 191, .4);--glass-bg: rgba(4, 47, 46, .7);--glass-border: rgba(45, 212, 191, .2);--glass-blur: blur(25px);--text-main: #f0fdfa;--text-dim: #99f6e4;--text-light: #5eead4;font-family:Outfit,Space Grotesk,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);background-image:var(--bg-gradient);background-size:200% 200%;animation:meshGradient 15s ease infinite;color:var(--text-main);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}@keyframes meshGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#app{width:90%;max-width:1100px;padding:4rem 2rem;display:flex;flex-direction:column;gap:3rem;z-index:1}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 80% 20%,rgba(45,212,191,.15),transparent 45%),radial-gradient(circle at 20% 80%,rgba(16,185,129,.1),transparent 45%);z-index:-1}body:after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(45,212,191,.03) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(45,212,191,.03) 1.5px,transparent 1.5px);background-size:80px 80px;z-index:-1}.hero-section{text-align:center}h1{font-weight:800;font-size:clamp(2.5rem,8vw,4.5rem);letter-spacing:-.04em;line-height:1.1;background:linear-gradient(to bottom right,var(--text-main) 40%,var(--accent-primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}.subtitle{font-size:1.25rem;color:var(--text-dim);font-weight:400;max-width:600px;margin:0 auto}@media(max-width:600px){h1{font-size:2.2rem}.subtitle{font-size:1rem}}.dropzone-container{position:relative;width:100%;max-width:800px;margin:0 auto}.dropzone{width:100%;min-height:400px;background:var(--glass-bg);border:2px dashed var(--accent-primary);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .5s cubic-bezier(.23,1,.32,1);overflow:hidden;box-shadow:0 20px 40px #0d94880d}.dropzone.drag-over{border-style:solid;background:#fffc;transform:scale(1.01);box-shadow:0 0 60px var(--accent-glow)}.dropzone-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;transition:opacity .3s ease}.dropzone-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:20px;display:flex;justify-content:center;align-items:center;font-size:2rem;color:#fff;box-shadow:0 15px 30px #0d948833}.dropzone p{font-size:1.2rem;font-weight:600;color:var(--text-main)}.dropzone span{font-size:.9rem;color:var(--text-dim)}#preview-canvas{max-width:90%;max-height:350px;border-radius:24px;object-fit:contain;display:none;border:1px solid var(--glass-border);box-shadow:0 10px 30px #0000000d}.dashboard{display:grid;grid-template-columns:1fr 350px;gap:3rem;width:100%;align-items:start;transition:all .5s ease}@media(max-width:1024px){.dashboard{grid-template-columns:1fr;gap:2rem}}.dashboard.landing{grid-template-columns:1fr;max-width:800px;margin:0 auto}.dashboard.landing #results-column{display:none}.secondary-section{display:flex;flex-direction:column;gap:1.5rem;height:calc(100vh - 280px);min-height:500px;border-left:1px solid var(--glass-border);padding-left:2rem;position:sticky;top:2rem}@media(max-width:1024px){.secondary-section{height:auto;min-height:auto;border-left:none;border-top:1px solid var(--glass-border);padding-left:0;padding-top:2rem;position:static}}.remove-btn{position:absolute;top:1rem;right:1rem;background:#ef444433;border:1px solid rgba(239,68,68,.4);color:#fca5a5;padding:.5rem 1rem;border-radius:12px;cursor:pointer;z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .3s;font-weight:600;font-size:.8rem}.remove-btn:hover{background:#ef444466;transform:translateY(-2px)}#palette-grid{display:flex;flex-direction:column;gap:1rem;width:100%;overflow-y:auto;padding-right:1rem;scrollbar-width:thin;scrollbar-color:var(--accent-primary) transparent}#palette-grid::-webkit-scrollbar{width:6px}#palette-grid::-webkit-scrollbar-thumb{background-color:var(--accent-primary);border-radius:10px}#palette-grid::-webkit-scrollbar-track{background:transparent}.palette-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-radius:20px;padding:.75rem;display:flex;align-items:center;gap:1.5rem;transition:all .3s cubic-bezier(.23,1,.32,1);cursor:pointer}.palette-card:hover{transform:translate(10px);background:#ffffffd9;box-shadow:0 10px 30px #2dd4bf33}@media(max-width:600px){.palette-card:hover{transform:none}.palette-card{gap:1rem;padding:.6rem}.color-swatch{width:70px;height:50px}}.color-swatch{width:100px;height:60px;border-radius:12px;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:inset 0 0 0 1px #0000000d}.color-hex-overlay{font-family:Space Grotesk,monospace;font-weight:700;font-size:.85rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);background:#0003;padding:.2rem .5rem;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}.color-info{display:flex;flex-direction:column;gap:.25rem}.color-hex{font-family:Space Grotesk,monospace;font-weight:700;font-size:1.2rem;text-transform:uppercase;color:var(--text-main)}.color-meta{font-size:.85rem;color:var(--text-dim);font-weight:500}.controls{background:#fff;border:1px solid var(--glass-border);padding:2rem;border-radius:32px;display:flex;align-items:center;gap:2.5rem;margin-top:2rem;box-shadow:0 10px 30px #0d94880d}@media(max-width:600px){.controls{flex-direction:column;gap:1.5rem;padding:1.5rem;border-radius:24px}.glass-btn{width:100%}}label{color:var(--text-main);font-weight:600}input[type=range]{flex:1;accent-color:var(--accent-primary);height:6px;border-radius:3px;cursor:pointer}.glass-btn{background:var(--accent-primary);border:none;padding:.8rem 1.8rem;border-radius:16px;cursor:pointer;color:#fff;font-weight:700;transition:all .3s;box-shadow:0 4px 12px #0d948833}.glass-btn:hover{background:var(--accent-secondary);transform:translateY(-2px);box-shadow:0 8px 20px #0d94884d}.copy-badge{position:absolute;top:1.25rem;right:1.25rem;background:#ffffffe6;border:1px solid var(--glass-border);padding:.4rem .6rem;border-radius:10px;font-size:.75rem;font-weight:600;color:var(--accent-primary);opacity:0;transition:opacity .2s;pointer-events:none}.palette-card:hover .copy-badge{opacity:1}.loading-overlay{display:none;position:absolute;inset:0;background:#fff9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;justify-content:center;align-items:center;border-radius:40px}.spinner{font-weight:700;color:var(--accent-primary);letter-spacing:.1em}