*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--primary-600: #8b5cf6;--primary-hover: #5856eb;--secondary-color: #ec4899;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--white: #ffffff;--black: #000000;--border-radius: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--gray-50);color:var(--gray-900);overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-bottom:.5rem}h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:1rem;line-height:1.6}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;border:none;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:var(--white)}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-secondary{background-color:var(--white);color:var(--gray-700);border:1px solid var(--gray-300)}.btn-secondary:hover:not(:disabled){background-color:var(--gray-50);border-color:var(--gray-400)}.btn-ghost{background-color:transparent;color:var(--gray-600)}.btn-ghost:hover:not(:disabled){background-color:var(--gray-100);color:var(--gray-900)}.btn-sm{padding:.5rem 1rem;font-size:.8rem}.btn-lg{padding:1rem 2rem;font-size:1rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-4{margin:1rem}.m-6{margin:1.5rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.card{background-color:var(--white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:all .2s ease}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.input{width:100%;padding:.75rem;border:1px solid var(--gray-300);border-radius:var(--border-radius);font-size:.875rem;transition:border-color .2s ease}.input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-spin{animation:spin 1s linear infinite}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideUp .4s ease}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:p-6{padding:1.5rem}}@media (min-width: 768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}}@media (min-width: 1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:p-8{padding:2rem}}@media (min-width: 1280px){.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (prefers-color-scheme: dark){body{background-color:var(--gray-900);color:var(--gray-100)}}.hero{min-height:100vh;background:linear-gradient(135deg,#fff,#f8fafc);position:relative;overflow:hidden;padding-top:80px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(99,102,241,.08) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(236,72,153,.08) 0%,transparent 50%),radial-gradient(circle at 50% 90%,rgba(14,165,233,.08) 0%,transparent 50%);opacity:1}.hero-container{max-width:1400px;margin:0 auto;padding:4rem 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;min-height:calc(100vh - 80px);position:relative;z-index:2}.hero-left{text-align:left;color:#18181b}.hero-right{display:flex;align-items:center;justify-content:center}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:linear-gradient(135deg,#6366f11a,#ec48991a);border:1px solid rgba(99,102,241,.2);border-radius:50px;font-size:.875rem;font-weight:600;color:#6366f1;margin-bottom:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-badge svg{color:#6366f1}.hero-title{font-size:3.75rem;font-weight:900;margin-bottom:1.5rem;line-height:1.05;color:#0f172a;letter-spacing:-.02em}.title-highlight{background:linear-gradient(135deg,#6366f1,#ec4899,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.hero-subtitle{font-size:1.375rem;font-weight:400;margin-bottom:2.5rem;color:#475569;line-height:1.6;max-width:540px}.hero-subtitle strong{color:#0f172a;font-weight:700;background:linear-gradient(135deg,#6366f1,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-stats{display:flex;justify-content:flex-start;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}.stat-item{display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;background:#fffffff2;border-radius:12px;border:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #00000014}.stat-item svg{color:#6366f1}.stat-number{font-weight:800;color:#1f2937;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,.05)}.hero-buttons{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.hero-btn{display:flex;align-items:center;gap:.75rem;padding:1.25rem 2rem;border:none;border-radius:16px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;white-space:nowrap;min-height:60px}.hero-btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 12px 40px #6366f140;border:2px solid transparent;justify-content:space-between;padding:1.25rem 1.5rem;min-width:280px}.hero-btn-primary:hover{background:linear-gradient(135deg,#5855eb,#7c3aed);box-shadow:0 16px 48px #6366f159;transform:translateY(-2px)}.hero-btn-secondary{background:#fff;color:#374151;border:2px solid #e5e7eb;box-shadow:0 8px 24px #00000014;min-width:180px}.hero-btn-secondary:hover{background:#f9fafb;border-color:#d1d5db;box-shadow:0 12px 32px #0000001f;transform:translateY(-1px)}.btn-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff3;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;flex:1;text-align:left}.btn-text{font-weight:700;font-size:1.1rem;line-height:1.2}.btn-subtext{font-weight:500;font-size:.85rem;opacity:.85;line-height:1.2}.btn-arrow{display:flex;align-items:center;justify-content:center;opacity:.8;transition:transform .3s ease}.hero-btn-primary:hover .btn-arrow{transform:translate(4px)}.quick-actions{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.quick-action-btn{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#f8fafc,#fff);border:none;border-radius:16px;font-size:.875rem;font-weight:600;color:#475569;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #0000000d;position:relative;overflow:hidden}.quick-action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#6366f10d,#8b5cf60d);opacity:0;transition:opacity .3s ease}.quick-action-btn:hover:before{opacity:1}.quick-action-btn:hover{color:#6366f1;box-shadow:0 8px 24px #6366f126;transform:translateY(-2px)}.quick-action-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:10px;position:relative;z-index:1}.color-dots-grid{display:flex;gap:2px;align-items:center}.color-dot{width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 2px #0000001a}.contrast-icon{position:relative;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.contrast-circle{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 1px 2px #0000001a}.contrast-circle.light{background:#fff;border:1px solid #d1d5db;top:1px;left:1px}.contrast-circle.dark{background:#374151;bottom:1px;right:1px}.gradient-icon{width:16px;height:10px;background:linear-gradient(90deg,#6366f1,#ec4899,#0ea5e9);border-radius:5px;box-shadow:0 1px 3px #0000001f}.hero-proof{margin-bottom:1rem}.proof-avatars{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.avatar-group{display:flex;align-items:center;gap:-.5rem}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:.875rem;border:2px solid white;margin-left:-8px}.avatar:first-child{margin-left:0}.avatar-more{width:40px;height:40px;border-radius:50%;background:#6b7280;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:.75rem;border:2px solid white;margin-left:-8px}.proof-text{display:flex;flex-direction:column;gap:.5rem}.proof-rating{display:flex;align-items:center;gap:.5rem}.stars{color:#fbbf24;font-size:1rem}.rating-text{font-size:.875rem;font-weight:600;color:#374151}.proof-companies{font-size:.8rem;color:#6b7280;font-weight:500}.showcase-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;background:#22c55e1a;border:1px solid rgba(34,197,94,.2);border-radius:20px;font-size:.75rem;font-weight:600;color:#16a34a;margin-bottom:.5rem}.showcase-badge svg{color:#16a34a}.header-content h3{margin-bottom:.25rem}.header-content p strong{color:#6366f1;font-weight:700}.palette-stats{display:flex;align-items:center;gap:.75rem}.usage-count{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#6b7280}.usage-count svg{color:#ef4444}.palette-actions{display:flex;gap:.5rem;margin-top:.75rem}.modern-copy-btn{padding:.5rem .75rem;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;font-size:.75rem;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease}.modern-copy-btn:hover{background:#e5e7eb;border-color:#9ca3af}.modern-try-btn{padding:.5rem .75rem;background:#6366f1;border:none;border-radius:8px;font-size:.75rem;font-weight:500;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.25rem}.modern-try-btn:hover{background:#5855eb}.showcase-stats{display:flex;gap:2rem;justify-content:center}.stat-item-mini{display:flex;align-items:center;gap:.5rem}.stat-icon{font-size:1.25rem}.stat-content{display:flex;flex-direction:column;align-items:flex-start}.stat-content .stat-number{font-size:.875rem;font-weight:700;color:#1f2937;line-height:1}.stat-content .stat-label{font-size:.75rem;color:#6b7280;line-height:1}.modern-palettes-showcase{width:100%;max-width:500px;background:#fff;border-radius:20px;box-shadow:0 20px 64px #0000001a;border:1px solid #e2e8f0;overflow:hidden;position:relative}.showcase-header{padding:2rem 2rem 1rem}.header-content{margin-bottom:1rem}.header-content h3{font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:.5rem}.header-content p{font-size:.875rem;color:#64748b}.modern-see-all-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;font-size:.875rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .2s ease}.modern-see-all-btn:hover{background:#6366f1;color:#fff;border-color:#6366f1}.inline-view-all-btn{display:inline-flex;align-items:center;gap:.25rem;background:none;border:none;color:#6366f1;font-size:inherit;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:underline;text-underline-offset:2px;margin-left:.25rem}.inline-view-all-btn:hover{color:#4f46e5;text-decoration-color:#4f46e5}.modern-categories{display:flex;gap:.75rem;padding:0 2rem 1rem;flex-wrap:wrap}.modern-category-pill{padding:.5rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px;font-size:.8rem;font-weight:500;color:#64748b;cursor:pointer;transition:all .2s ease}.modern-category-pill:hover{background:#e2e8f0;color:#374151}.modern-category-pill.active{background:#6366f1;color:#fff;border-color:#6366f1}.modern-palettes-container{padding:1rem 2rem;display:flex;flex-direction:column;gap:1.5rem;min-height:300px}.modern-palette-card{background:#f8fafc;border-radius:12px;padding:1.5rem;transition:all .3s ease;cursor:pointer;border:1px solid #e2e8f0}.modern-palette-card:hover{background:#fff;box-shadow:0 8px 24px #0000001a;border-color:#6366f1}.modern-palette-preview{display:flex;height:50px;border-radius:8px;overflow:hidden;margin-bottom:1rem;box-shadow:0 4px 12px #0000001a}.modern-preview-color{flex:1;transition:all .2s ease;cursor:pointer}.modern-preview-color:hover{transform:scale(1.05);z-index:10}.modern-palette-info{display:flex;flex-direction:column;gap:.75rem}.palette-title-section h4{font-size:1rem;font-weight:600;color:#0f172a;margin-bottom:.25rem}.palette-badge{display:inline-block;padding:.25rem .75rem;background:#6366f11a;color:#6366f1;font-size:.75rem;font-weight:500;border-radius:20px}.modern-showcase-footer{padding:1rem 2rem 2rem;border-top:1px solid #f1f5f9;background:#f8fafc}.hero-value-props{padding:6rem 2rem;background:linear-gradient(135deg,#f8fafc,#fff);position:relative;z-index:3}.value-props-header{text-align:center;margin-bottom:4rem}.value-props-header h2{font-size:2.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem;line-height:1.2}.value-props-header p{font-size:1.25rem;color:#64748b;max-width:600px;margin:0 auto}.value-props-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;max-width:1200px;margin:0 auto 4rem}.value-prop-card{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 8px 32px #0000000f;border:1px solid #e2e8f0;transition:all .3s ease;text-align:center}.value-prop-card:hover{box-shadow:0 20px 48px #0000001f;border-color:#6366f1}.value-prop-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:#fff}.gradient-icon-ai{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.gradient-icon-extract{background:linear-gradient(135deg,#ec4899,#f97316)}.gradient-icon-export{background:linear-gradient(135deg,#06b6d4,#10b981)}.value-prop-card h3{font-size:1.5rem;font-weight:700;color:#0f172a;margin-bottom:1rem}.value-prop-card p{font-size:1rem;color:#64748b;line-height:1.6;margin-bottom:1.5rem}.value-prop-benefit{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:#6366f11a;border-radius:50px;font-size:.875rem;font-weight:600;color:#6366f1}.value-props-cta{text-align:center}.secondary-cta-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:16px;font-size:1.125rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 12px 40px #6366f140;margin-bottom:1rem}.secondary-cta-btn:hover{background:linear-gradient(135deg,#5855eb,#7c3aed);box-shadow:0 16px 48px #6366f159;transform:translateY(-2px)}.cta-guarantee{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;color:#64748b}.hero-social-proof{padding:6rem 2rem;background:#f8fafc;text-align:center}.social-proof-header h2{font-size:2.25rem;font-weight:800;color:#0f172a;margin-bottom:3rem}.company-logos{display:flex;justify-content:center;align-items:center;gap:3rem;margin-bottom:4rem;flex-wrap:wrap}.company-logo{font-size:1.5rem;font-weight:700;color:#6b7280;opacity:.8;transition:all .3s ease}.company-logo:hover{color:#374151;opacity:1}.testimonial-highlight{max-width:800px;margin:0 auto}.testimonial-card{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 12px 40px #00000014;border:1px solid #e2e8f0}.testimonial-content{font-size:1.25rem;font-style:italic;color:#374151;margin-bottom:2rem;line-height:1.6}.testimonial-author{display:flex;align-items:center;gap:1rem}.author-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.25rem}.author-info{text-align:left}.author-name{font-size:1.125rem;font-weight:700;color:#0f172a}.author-title{font-size:.875rem;color:#64748b}.hero-faq{padding:6rem 2rem;background:#fff}.faq-header{text-align:center;margin-bottom:4rem}.faq-header h2{font-size:2.25rem;font-weight:800;color:#0f172a}.faq-list{display:flex;flex-direction:column;gap:1.5rem;max-width:800px;margin:0 auto}.faq-item{padding:2rem;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0}.faq-item h3{font-size:1.125rem;font-weight:700;color:#0f172a;margin-bottom:1rem}.faq-item p{color:#64748b;line-height:1.6}.hero-final-cta{padding:6rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);text-align:center;color:#fff}.final-cta-content h2{font-size:2.5rem;font-weight:800;margin-bottom:1rem}.final-cta-content p{font-size:1.25rem;margin-bottom:3rem;opacity:.9}.final-cta-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.final-cta-primary{display:flex;align-items:center;gap:.75rem;padding:1.25rem 2rem;background:#fff;color:#6366f1;border:none;border-radius:16px;font-size:1.125rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 32px #ffffff40}.final-cta-primary:hover{background:#f9fafb;box-shadow:0 12px 40px #ffffff59;transform:translateY(-2px)}.final-cta-secondary{display:flex;align-items:center;gap:.75rem;padding:1.25rem 2rem;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:16px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.final-cta-secondary:hover{background:#ffffff1a;border-color:#ffffff80}.final-cta-guarantee{margin-top:2rem}.guarantee-badges{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.guarantee-badge{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;opacity:.9}.hero-blog{position:relative;z-index:5;padding:6rem 2rem;background:#fff}.blog-section-header{text-align:center;margin-bottom:4rem}.blog-section-header h2{font-size:2.25rem;font-weight:800;color:#0f172a;margin-bottom:1rem}.blog-section-header p{font-size:1.125rem;color:#64748b;max-width:600px;margin:0 auto}.blog-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:1200px;margin:0 auto 3rem;position:relative;z-index:6}.blog-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 8px 24px #00000014;border:1px solid #e2e8f0;transition:all .3s ease;text-decoration:none;color:inherit;position:relative;z-index:7}.blog-card:hover{box-shadow:0 20px 40px #0000001f;transform:translateY(-4px);border-color:#6366f1}.blog-card-content{margin-bottom:1.5rem}.blog-category{display:inline-block;padding:.25rem .75rem;background:#6366f11a;color:#6366f1;font-size:.75rem;font-weight:600;border-radius:20px;margin-bottom:1rem}.blog-card h3{font-size:1.25rem;font-weight:700;color:#0f172a;margin-bottom:.75rem;line-height:1.3}.blog-card p{color:#64748b;line-height:1.6;margin-bottom:1rem}.blog-meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#9ca3af}.blog-card-footer{border-top:1px solid #f1f5f9;padding-top:1rem}.read-article-btn{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#6366f1;transition:color .2s ease}.blog-card:hover .read-article-btn{color:#5855eb}.blog-cta{text-align:center}.view-all-articles-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:#f8fafc;color:#64748b;border:2px solid #e2e8f0;border-radius:16px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .3s ease;position:relative;z-index:10}.view-all-articles-btn:hover{background:#6366f1;color:#fff;border-color:#6366f1;transform:translateY(-2px)}@media (max-width: 1200px){.value-props-grid{grid-template-columns:1fr;max-width:600px}.company-logos{gap:2rem}.final-cta-buttons{flex-direction:column;align-items:center}.guarantee-badges{flex-direction:column;align-items:center;gap:1rem}}@media (max-width: 1024px){.hero-container{grid-template-columns:1fr;gap:3rem;text-align:center}.hero-left{text-align:center}.modern-palettes-showcase{margin:0 auto}.hero-stats,.quick-actions,.proof-avatars{justify-content:center}.showcase-stats{gap:1rem}}@media (max-width: 768px){.hero-title{font-size:2.5rem}.title-highlight{display:block}.hero-subtitle{font-size:1.125rem}.hero-btn{min-width:auto;width:100%;justify-content:center}.hero-btn-primary{min-width:auto}.btn-content{align-items:center;text-align:center}.quick-actions{justify-content:center}.quick-action-btn{font-size:.75rem;padding:.5rem 1rem}.value-prop-card{padding:2rem 1.5rem}.value-props-header h2{font-size:2rem}.social-proof-header h2,.faq-header h2{font-size:1.875rem}.final-cta-content h2{font-size:2rem}.testimonial-card{padding:2rem}.testimonial-content{font-size:1rem}.hero-buttons{flex-direction:column;align-items:stretch}.hero-stats{flex-direction:column;align-items:center;gap:1rem}.blog-articles{grid-template-columns:1fr}}@media (max-width: 480px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.value-props-header h2{font-size:1.75rem}.social-proof-header h2,.faq-header h2{font-size:1.5rem}.final-cta-content h2{font-size:1.75rem}.company-logos{flex-direction:column;gap:1rem}.modern-palettes-container{padding:1rem}.showcase-header{padding:1.5rem}.modern-categories{padding:0 1.5rem 1rem}}.user-profile{position:relative;display:inline-block}.user-profile-trigger{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:#fff;border:1px solid #e4e4e7;border-radius:12px;cursor:pointer;transition:all .2s ease;font-size:.875rem;min-height:48px}.user-profile-trigger:hover{background:#f4f4f5;border-color:#d4d4d8;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);flex-shrink:0}.user-avatar.large{width:48px;height:48px}.user-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.user-initials{color:#fff;font-weight:600;font-size:.875rem}.user-avatar.large .user-initials{font-size:1rem}.user-info{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.user-name{font-weight:600;color:#18181b;line-height:1}.pro-badge{display:flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:.125rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600}.chevron{color:#64748b;transition:transform .2s ease}.chevron.open{transform:rotate(180deg)}.user-profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:280px;background:#fff;border:1px solid #e4e4e7;border-radius:16px;box-shadow:0 10px 40px #0000001a;z-index:1000;overflow:hidden}.dropdown-header{padding:1.5rem;display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9)}.user-details{flex:1;min-width:0}.user-details .user-name{font-size:1rem;font-weight:600;color:#18181b;margin-bottom:.25rem}.user-email{font-size:.875rem;color:#64748b;margin-bottom:.5rem;word-break:break-all}.pro-status{display:inline-flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600}.dropdown-divider{height:1px;background:#e4e4e7;margin:0}.dropdown-menu{padding:.5rem}.dropdown-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:none;background:transparent;color:#374151;font-size:.875rem;font-weight:500;border-radius:8px;cursor:pointer;transition:all .15s ease;text-align:left}.dropdown-item:hover{background:#f4f4f5;color:#18181b}.dropdown-item.danger{color:#dc2626}.dropdown-item.danger:hover{background:#fef2f2;color:#dc2626}.dropdown-item svg{flex-shrink:0}@media (max-width: 768px){.user-profile-trigger{padding:.5rem .75rem;gap:.5rem}.user-info{display:none}.user-profile-dropdown{right:-1rem;left:-1rem;min-width:auto}}@media (max-width: 480px){.user-profile-dropdown{right:-2rem;left:-2rem}}.navbar{position:fixed;top:0;left:0;right:0;z-index:100;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(228,228,231,.3);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000001a}.navbar.transparent{background:#fffc;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 1px 3px #0000000d}.navbar .container{display:flex;align-items:center;justify-content:space-between;height:3.5rem;max-width:1440px;margin:0 auto;padding:0 2rem}.navbar-logo{display:flex;align-items:center;text-decoration:none;color:inherit;transition:transform .2s ease}.navbar-logo-text{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#10b981,#059669 30%,#0891b2 70%,#0284c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em;transition:all .3s ease}.navbar-logo:hover .navbar-logo-text{transform:translateY(-1px);background:linear-gradient(135deg,#059669,#047857 30%,#0891b2 70%,#0369a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar-nav{display:flex;align-items:center;gap:2.5rem}.navbar-dropdown{position:relative}.navbar-dropdown-trigger{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:transparent;border:1px solid rgba(55,65,81,.15);color:#374151;font-weight:600;font-size:.875rem;border-radius:10px;cursor:pointer;transition:all .2s ease;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.navbar-dropdown-trigger:hover{background:#6366f10d;border-color:#6366f133;color:#6366f1;transform:translateY(-1px)}.tools-text{font-weight:600;letter-spacing:-.01em}.dropdown-chevron{transition:transform .2s ease;opacity:.7}.dropdown-chevron.open{transform:rotate(180deg)}.navbar-tools-modal{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(228,228,231,.3);border-radius:12px;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;padding:1rem;z-index:1000}.tools-modal-header{text-align:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(229,231,235,.5)}.tools-modal-header h3{font-size:1rem;font-weight:700;color:#1f2937;margin:0 0 .25rem;text-transform:uppercase;letter-spacing:.05em}.tools-modal-header p{font-size:.75rem;color:#9ca3af;margin:0;font-weight:400}.tools-grid{display:flex;flex-direction:column;gap:.25rem}.tool-card{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:transparent;border:none;border-radius:8px;text-decoration:none;color:#374151;transition:all .2s ease;position:relative}.tool-card:hover{background:#6366f10d;color:#6366f1}.tool-card.active{background:#6366f114;color:#6366f1}.tool-card-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#f3f4f6cc;border-radius:8px;transition:all .2s ease;flex-shrink:0}.tool-card:hover .tool-card-icon{background:#6366f11a;transform:scale(1.05)}.tool-card.active .tool-card-icon{background:#6366f126}.tool-card-content{flex:1;text-align:left}.tool-card-title{font-weight:600;font-size:.9rem;line-height:1.2;margin-bottom:.125rem;color:#1f2937}.tool-card-desc{font-size:.8rem;color:#4b5563;line-height:1.3;font-weight:500}.tool-card:hover .tool-card-desc{color:#8b5cf6}.tool-card-active-indicator{position:absolute;top:.5rem;right:.5rem;width:6px;height:6px;background:#10b981;border-radius:50%}.navbar-link{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;color:#374151;text-decoration:none;font-weight:600;font-size:.9rem;border-radius:12px;transition:all .2s ease}.navbar-link:hover{background:#6366f10d;color:#6366f1;transform:translateY(-1px)}.navbar-link.active{background:#6366f11a;color:#6366f1}.navbar-actions{display:flex;align-items:center;gap:.75rem}.navbar-signin-btn{background:transparent;color:#374151;border:1px solid rgba(55,65,81,.2);padding:.625rem 1rem;border-radius:10px;font-weight:500;font-size:.875rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease}.navbar-signin-btn:hover{background:#3741510d;border-color:#3741514d;color:#1f2937}.navbar-pro-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;padding:.625rem 1rem;border-radius:10px;font-weight:600;font-size:.875rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #6366f140;position:relative;overflow:hidden}.navbar-pro-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f159}.navbar-pro-btn.premium{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 8px #f59e0b40}.navbar-pro-btn.premium:hover{box-shadow:0 4px 12px #f59e0b59}.pro-btn-text{font-weight:600}.pro-btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}.navbar-pro-btn:hover .pro-btn-shine{left:100%}.signin-btn-text{font-weight:500}.navbar-mobile-toggle{display:none;background:none;border:none;color:#374151;cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease}.navbar-mobile-toggle:hover{background:#6366f10d;color:#6366f1}.navbar-mobile-menu{position:fixed;top:4.5rem;left:0;right:0;background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(228,228,231,.3);box-shadow:0 10px 25px #0000001a;overflow:hidden;z-index:99}.mobile-menu-content{padding:2rem;max-height:calc(100vh - 4.5rem);overflow-y:auto}.mobile-menu-section{margin-bottom:2rem}.mobile-menu-section:last-child{margin-bottom:0}.mobile-section-title{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid rgba(229,231,235,.5)}.mobile-menu-item{display:flex;align-items:center;gap:1rem;padding:1rem;text-decoration:none;color:#374151;border-radius:12px;transition:all .2s ease;margin-bottom:.5rem}.mobile-menu-item:hover{background:#6366f10d;color:#6366f1;transform:translate(4px)}.mobile-menu-item.active{background:#6366f11a;color:#6366f1}.mobile-item-content{flex:1}.mobile-item-title{font-weight:600;font-size:1rem;line-height:1.2;margin-bottom:.25rem}.mobile-item-desc{font-size:.85rem;color:#6b7280;line-height:1.3}.mobile-auth-buttons{display:flex;flex-direction:column;gap:.75rem}.mobile-signin-btn{display:flex;align-items:center;gap:1rem;padding:1rem;background:#ffffff0d;color:#d1d5db;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;width:100%;text-align:left}.mobile-signin-btn:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-1px)}.mobile-pro-btn{display:flex;align-items:center;gap:1rem;padding:1rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;position:relative;width:100%;text-align:left;overflow:hidden}.mobile-pro-btn.premium{background:linear-gradient(135deg,#f59e0b,#d97706)}.mobile-pro-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f140}.mobile-pro-btn.premium:hover{box-shadow:0 4px 12px #f59e0b40}.mobile-pro-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}.mobile-pro-btn:hover .mobile-pro-shine{left:100%}.navbar-overlay{position:fixed;inset:0;background:#00000080;z-index:98;top:4.5rem}@media (max-width: 1024px){.navbar .container{padding:0 1.5rem}.navbar-nav{gap:2rem}.navbar-tools-modal{width:260px}}@media (max-width: 768px){.navbar .container{padding:0 1rem;height:4rem}.navbar-nav{display:none}.navbar-mobile-toggle{display:block}.navbar-mobile-menu{top:4rem}.mobile-menu-content{padding:1.5rem}.pro-btn-text,.signin-btn-text,.tools-text{display:none}.navbar-pro-btn,.navbar-signin-btn,.navbar-dropdown-trigger{padding:.5rem;min-width:40px;justify-content:center}.navbar-actions{gap:.5rem}.navbar-tools-modal{width:calc(100vw - 2rem);max-width:280px;right:1rem}.tool-card{padding:.625rem}.tool-card-icon{width:28px;height:28px}.tool-card-title{font-size:.8rem}.tool-card-desc{font-size:.7rem}}@media (max-width: 480px){.mobile-menu-content{padding:1rem}.mobile-menu-item{padding:.875rem}.mobile-item-title{font-size:.9rem}.mobile-item-desc{font-size:.8rem}}.footer{background:linear-gradient(135deg,#f1f5f9,#e2e8f0,#cbd5e1);color:#1e293b;padding:5rem 0 2rem;margin-top:auto;border-top:1px solid rgba(0,0,0,.08);position:relative;overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.footer:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.3),transparent)}.footer .container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative}.footer-content{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}.footer-brand{display:flex;flex-direction:column;gap:1.5rem}.footer-logo{display:flex;align-items:center;gap:.75rem}.footer-logo-icon{display:flex;align-items:center;gap:3px;padding:8px 10px;background:linear-gradient(135deg,#6366f133,#8b5cf61a);border-radius:12px;border:1px solid rgba(99,102,241,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.footer-color-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.footer-dot-1{background:#6366f1;animation-delay:0s}.footer-dot-2{background:#8b5cf6;animation-delay:.5s}.footer-dot-3{background:#ec4899;animation-delay:1s}.footer-logo-text{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-description{color:#64748b;line-height:1.6;font-size:.95rem;max-width:320px}.footer-social{display:flex;gap:.75rem;margin-top:1rem}.social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#64748b;text-decoration:none;transition:all .3s ease;border:1px solid rgba(148,163,184,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.social-link.email{background:#ef444414;border-color:#ef444433}.social-link.email:hover{background:#ef444426;color:#dc2626;transform:translateY(-2px)}.social-link.twitter{background:#1da1f214;border-color:#1da1f233}.social-link.twitter:hover{background:#1da1f226;color:#1d9bf0;transform:translateY(-2px)}.social-link.linkedin{background:#0077b514;border-color:#0077b533}.social-link.linkedin:hover{background:#0077b526;color:#0077b5;transform:translateY(-2px)}.social-link.github{background:#33415514;border-color:#33415533}.social-link.github:hover{background:#33415526;color:#334155;transform:translateY(-2px)}.social-link.instagram{background:linear-gradient(135deg,#e1306c14,#ff4d4014);border-color:#e1306c33}.social-link.instagram:hover{background:linear-gradient(135deg,#e1306c26,#ff4d4026);color:#e1306c;transform:translateY(-2px)}.footer-section{display:flex;flex-direction:column;gap:1.25rem}.footer-section-title{font-size:1.25rem;font-weight:700;color:#1e293b;margin-bottom:1rem;display:flex;align-items:center;gap:.75rem;letter-spacing:-.025em}.footer-section-title svg{color:#6366f1}.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.footer-link{color:#475569;text-decoration:none;font-size:1rem;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;padding:.4rem 0;letter-spacing:-.01em}.footer-link:hover{color:#10b981;transform:translate(6px)}.new-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:.7rem;font-weight:600;padding:.2rem .4rem;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.footer-stats{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(148,163,184,.2);display:flex;flex-direction:column;gap:1rem}.stat-item{display:flex;flex-direction:column;gap:.25rem}.stat-number{font-size:1.5rem;font-weight:700;color:#6366f1}.stat-label{font-size:.8rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}.footer-bottom{border-top:1px solid rgba(148,163,184,.2);padding-top:2rem}.footer-bottom-content{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}.footer-brand-bottom{display:flex;flex-direction:column;gap:.5rem}.footer-brand-bottom .footer-logo-text{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,#10b981,#059669 30%,#0891b2 70%,#0284c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em;margin-bottom:.25rem}.footer-copyright{color:#64748b;font-size:.95rem;font-weight:400;display:flex;align-items:center;gap:.5rem;margin:0;letter-spacing:-.005em}.footer-social-bottom{display:flex;gap:.75rem}.heart-icon{color:#ec4899;animation:pulse 2s infinite}.footer-bottom-links{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.footer-version{color:#94a3b8;font-family:Monaco,Menlo,monospace;background:#94a3b81a;padding:.25rem .5rem;border-radius:4px}.footer-separator{color:#cbd5e1}.footer-bottom-link{color:#94a3b8;text-decoration:none;transition:color .2s ease}.footer-bottom-link:hover{color:#6366f1}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}@media (max-width: 1024px){.footer-content{grid-template-columns:1fr 1fr;gap:2rem}}@media (max-width: 768px){.footer{padding:3rem 0 1rem}.footer .container{padding:0 1.5rem}.footer-content{grid-template-columns:1fr;gap:2.5rem;text-align:center}.footer-brand{align-items:center}.footer-description{max-width:100%}.footer-social{justify-content:center}.footer-section{align-items:center}.footer-section-title{justify-content:center}.footer-stats{flex-direction:row;justify-content:center;gap:2rem;text-align:center}.footer-bottom-content{flex-direction:column;align-items:center;gap:1.5rem;text-align:center}.footer-brand-bottom{align-items:center}}@media (max-width: 480px){.footer-content{gap:2rem}.footer-stats{flex-direction:column;gap:1rem}.footer-social-bottom{gap:.5rem}.social-link{width:36px;height:36px}}.picker-container{width:100%;margin-top:.75rem;flex:1;display:flex;flex-direction:column;max-height:calc(100% - 80px);overflow:hidden;animation:slideInUp .5s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.inline-color-picker{width:100%;background:linear-gradient(145deg,#fff,#f8fafc);border-radius:12px;padding:1rem;border:1px solid #e2e8f0;box-shadow:0 2px 8px #00000008,0 1px 4px #00000005,inset 0 1px #fffc;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;flex:1;height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:flex-start}.controls-top-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #f1f5f9}.color-space-dropdown-wrapper{position:relative;flex:1;max-width:180px}.action-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:none;flex:1;white-space:nowrap;position:relative;overflow:hidden}.action-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.action-button:hover:before{left:100%}.action-button.secondary{background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#374151;border:1px solid #e2e8f0;box-shadow:0 2px 4px #00000008}.action-button.secondary:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 8px #0000000f}.inline-color-area{position:relative;margin-bottom:1rem;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px #0000000f,0 1px 2px #00000008,inset 0 1px #ffffff1a;background:#fff;border:2px solid #f1f5f9;transition:all .3s ease;flex-shrink:0}.inline-color-area:hover{border-color:#e2e8f0;box-shadow:0 4px 12px #0000001a,0 2px 8px #0000000f,inset 0 1px #ffffff1a}.inline-color-canvas{width:100%;height:140px;cursor:crosshair;display:block;transition:filter .1s ease;touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.inline-color-canvas:hover{filter:brightness(1.01) saturate(1.02)}.inline-color-canvas:active,.inline-color-canvas.dragging{cursor:grabbing;filter:brightness(1.03) saturate(1.05)}.inline-canvas-marker{position:absolute;width:16px;height:16px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #00000026,0 2px 12px #0003,0 6px 20px #00000014;transform:translate(-50%,-50%);pointer-events:none;background:#fff;z-index:10;will-change:left,top}.inline-canvas-marker:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:#000000b3;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 2px #0000004d}.inline-hue-slider{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014,0 1px 4px #0000000a,inset 0 1px #ffffff1a;background:#fff;border:2px solid #f1f5f9;padding:4px;transition:all .3s ease;margin-bottom:0;flex-shrink:0}.inline-hue-slider:hover{border-color:#e2e8f0;box-shadow:0 4px 12px #0000001a,0 2px 8px #0000000f,inset 0 1px #ffffff1a}.inline-hue-bar{width:100%;height:20px;cursor:pointer;display:block;border-radius:8px;transition:filter .1s ease,transform .1s ease;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.inline-hue-bar:hover{filter:brightness(1.02) saturate(1.05);transform:scale(1.01)}.inline-hue-bar:active,.inline-hue-bar.dragging{cursor:grabbing;filter:brightness(1.05) saturate(1.1);transform:scale(1.02)}.inline-hue-marker{position:absolute;top:50%;width:28px;height:28px;border:4px solid white;border-radius:50%;box-shadow:0 0 0 1px #0000001a,0 3px 12px #00000026,0 6px 24px #00000014;transform:translate(-50%,-50%);pointer-events:none;background:#fff;z-index:10;will-change:left}.inline-hue-marker:before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);background:var(--current-hue-color, #ff0000);box-shadow:inset 0 1px 3px #0003,0 1px 2px #ffffff4d;border:1px solid rgba(0,0,0,.1)}.inline-color-canvas:focus,.inline-hue-bar:focus{outline:3px solid #6366f1;outline-offset:3px;box-shadow:0 0 0 6px #6366f11a}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.inline-canvas-marker,.inline-hue-marker{animation:none}}@media (max-width: 768px){.controls-top-row{flex-direction:column;gap:1rem;align-items:stretch;padding-bottom:1.5rem}.color-space-dropdown-wrapper{max-width:none;order:1}.action-button{padding:1rem 1.25rem;font-size:.875rem;gap:.5rem;border-radius:12px}.picker-container{max-height:calc(100% - 140px)}.inline-color-picker{overflow-y:auto;padding:1rem;border-radius:16px}.inline-color-canvas{height:120px}.inline-canvas-marker{width:16px;height:16px;border-width:3px;transform:translate(-50%,-50%)}.inline-hue-bar{height:20px}.inline-hue-marker{width:28px;height:28px;border-width:3px;transform:translate(-50%,-50%)}}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:var(--gray-900);color:var(--white);padding:.75rem 1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:.75rem;z-index:10000;font-weight:500;font-size:.875rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.toast-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#ffffff26}.toast-success{background:linear-gradient(135deg,#10b981,#059669)}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}.toast-info{background:linear-gradient(135deg,#6366f1,#4f46e5)}.toast-message{white-space:nowrap}@media (max-width: 640px){.toast{bottom:1rem;font-size:.8rem;padding:.625rem 1.25rem}.toast-icon{width:24px;height:24px}}.cta-banner{position:relative;overflow:hidden;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px #0000001a;transition:all .3s ease}.cta-banner:hover{transform:translateY(-2px);box-shadow:0 12px 32px #00000026}.cta-inline{margin:1rem 0}.cta-floating{position:fixed;bottom:1rem;right:1rem;max-width:400px;z-index:100}.cta-sticky{position:sticky;top:1rem;z-index:50}.cta-banner-content{display:flex;align-items:center;gap:1rem;padding:1.25rem;position:relative;z-index:2}.cta-banner-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#fff3;color:#fff;flex-shrink:0}.cta-banner-text{flex:1;min-width:0}.cta-banner-title{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:#fff;line-height:1.3}.cta-banner-description{font-size:.875rem;margin:0 0 .5rem;color:#ffffffe6;line-height:1.4}.cta-banner-urgency{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#fffc;font-weight:500}.countdown-timer{display:flex;align-items:center;gap:.375rem;padding:.25rem .5rem;background:#fff3;border-radius:6px;font-weight:600;color:#fff}.urgency-text{display:flex;align-items:center;gap:.375rem}.cta-banner-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.cta-banner-button:hover{background:#ffffff4d;border-color:#fff6;transform:translateY(-1px)}.cta-banner-dismiss{position:absolute;top:.75rem;right:.75rem;background:#ffffff1a;border:none;border-radius:6px;color:#ffffffb3;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.cta-banner-dismiss:hover{background:#fff3;color:#fff}.urgency-progress{position:absolute;bottom:0;left:0;height:3px;background:#fff6;transition:width 1s linear}.cta-upgrade{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.cta-upgrade:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crown" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M10 5l3 6h-6z" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23crown)"/></svg>');opacity:.1}.cta-trial{background:linear-gradient(135deg,#10b981,#059669)}.cta-feature{background:linear-gradient(135deg,#f59e0b,#d97706)}.cta-urgency{background:linear-gradient(135deg,#ef4444,#dc2626);animation:urgencyPulse 2s ease-in-out infinite}@keyframes urgencyPulse{0%,to{box-shadow:0 8px 24px #ef44444d}50%{box-shadow:0 12px 32px #ef444480}}.cta-default{background:linear-gradient(135deg,#6b7280,#4b5563)}@media (max-width: 768px){.cta-floating{bottom:.5rem;right:.5rem;left:.5rem;max-width:none;border-radius:12px 12px 0 0}.cta-banner-content{padding:1rem;gap:.75rem}.cta-banner-icon{width:36px;height:36px}.cta-banner-title{font-size:.875rem}.cta-banner-description{font-size:.8125rem}.cta-banner-button{padding:.625rem 1.25rem;font-size:.8125rem}}@media (max-width: 480px){.cta-banner-content{flex-direction:column;align-items:flex-start;gap:1rem;text-align:left}.cta-banner-icon{align-self:flex-start}.cta-banner-button{align-self:stretch;justify-content:center}.cta-banner-dismiss{top:.5rem;right:.5rem}}@media (prefers-color-scheme: dark){.cta-banner{border-color:#fff3}.cta-banner-button{background:#ffffff26;border-color:#ffffff40}.cta-banner-button:hover{background:#ffffff40;border-color:#ffffff59}}@media (prefers-reduced-motion: reduce){.cta-banner,.cta-urgency,.countdown-timer{animation:none}}.cta-banner-button:focus,.cta-banner-dismiss:focus{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}@media (prefers-contrast: high){.cta-banner,.cta-banner-button{border-width:2px}}.share-button-container{position:relative;display:inline-block}.share-trigger{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;color:#374151;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.share-trigger:hover{background:#fff;border-color:#6366f1;color:#6366f1;box-shadow:0 4px 12px #6366f126}.share-small .share-trigger{padding:.375rem .75rem;font-size:.75rem;gap:.375rem}.share-large .share-trigger{padding:.75rem 1.25rem;font-size:1rem;gap:.625rem}.share-backdrop{position:fixed;inset:0;background:#0000004d;z-index:998;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.share-menu{position:absolute;top:calc(100% + .5rem);right:0;width:320px;background:#fff;border-radius:16px;box-shadow:0 20px 40px #00000026;z-index:999;overflow:hidden}@media (max-width: 480px){.share-menu{position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:calc(100vw - 2rem);max-width:320px}}.share-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .75rem;border-bottom:1px solid #f3f4f6}.share-header h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0}.share-close{background:none;border:none;cursor:pointer;padding:.25rem;color:#6b7280;border-radius:4px;transition:all .2s ease}.share-close:hover{background:#f3f4f6;color:#374151}.share-preview{padding:1rem 1.25rem;text-align:center}.share-colors{display:flex;gap:4px;margin-bottom:.75rem;justify-content:center}.share-color{width:32px;height:32px;border-radius:8px;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.share-color:hover{transform:scale(1.1)}.share-palette-name{font-size:.875rem;font-weight:500;color:#6b7280;margin:0}.share-platforms{padding:0 1.25rem}.share-option{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem;margin-bottom:.5rem;background:#f9fafb;border:1px solid #f3f4f6;border-radius:12px;cursor:pointer;font-size:.875rem;font-weight:500;color:#374151;transition:all .2s ease}.share-option:hover{background:var(--platform-color, #6366f1);color:#fff;border-color:var(--platform-color, #6366f1);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.share-option:last-child{margin-bottom:0}.web-share{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:#6366f1;margin-bottom:1rem}.web-share:hover{background:linear-gradient(135deg,#5856eb,#7c3aed);transform:translateY(-2px);box-shadow:0 8px 20px #6366f14d}.share-option.copied{background:#10b981;color:#fff;border-color:#10b981}.share-option.copied:hover{background:#059669;border-color:#059669}.share-footer{padding:.75rem 1.25rem 1.25rem;border-top:1px solid #f3f4f6;background:#f9fafb}.share-note{font-size:.75rem;color:#6b7280;text-align:center;margin:0;font-style:italic}@keyframes shareSuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.share-option.copied{animation:shareSuccess .3s ease}@media (prefers-color-scheme: dark){.share-menu{background:#1f2937;border:1px solid #374151}.share-header{border-bottom-color:#374151}.share-header h3{color:#f9fafb}.share-close{color:#9ca3af}.share-close:hover{background:#374151;color:#f3f4f6}.share-palette-name{color:#9ca3af}.share-option{background:#374151;border-color:#4b5563;color:#f3f4f6}.share-footer{background:#374151;border-top-color:#4b5563}.share-note{color:#9ca3af}}.generator{height:100vh;background:#f8fafc;overflow:hidden;position:relative}.generator-controls{position:fixed;top:3.5rem;left:0;right:0;z-index:50;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 2px 4px #0000000d}.controls-container{max-width:1400px;margin:0 auto;padding:.25rem 2rem}.controls-main{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}.center-controls{display:flex;align-items:center;gap:2rem}.controls-status{display:flex;align-items:center;justify-content:space-between;padding-top:.125rem;border-top:1px solid #f1f5f9;min-height:24px}.status-left{display:flex;align-items:center}.status-right{display:flex;align-items:center;gap:1rem}.palette-name-section{display:flex;align-items:center;gap:.75rem;color:#64748b}.palette-name-input{background:#f8fafc;color:#0f172a;font-size:1rem;font-weight:600;border:2px solid #e2e8f0;border-radius:12px;padding:.75rem 1rem;transition:all .2s ease;min-width:200px}.palette-name-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a;background:#fff}.palette-name-input::-moz-placeholder{color:#94a3b8}.palette-name-input::placeholder{color:#94a3b8}.generate-btn-new{display:flex;align-items:center;gap:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:700;border:none;border-radius:16px;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 8px 24px #6366f140}.generate-btn-new:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 32px #6366f159}.generate-btn-new:active:not(:disabled){transform:scale(.98)}.generate-btn-new:disabled{background:#94a3b8;color:#fff;cursor:not-allowed;transform:none;box-shadow:0 4px 12px #94a3b840}.btn-icon{transition:transform .3s ease}.btn-icon.spinning{animation:spin 1s linear infinite}.auto-generate-btn{width:44px;height:44px;border-radius:12px;border:2px solid #6366f1;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #6366f140}.auto-generate-btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 16px #6366f159}.auto-generate-btn:active:not(:disabled){transform:scale(.95)}.auto-generate-btn:disabled{background:#94a3b8;border-color:#94a3b8;cursor:not-allowed;transform:none;box-shadow:0 2px 8px #94a3b840}.main-actions{display:flex;align-items:center;gap:.5rem}.control-btn{padding:.75rem;border-radius:12px;border:2px solid #e2e8f0;cursor:pointer;transition:all .2s ease;background:#fff;color:#64748b;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#f8fafc;border-color:#6366f1;color:#6366f1;transform:scale(1.05)}.control-btn:active{transform:scale(.95)}.control-btn.saved{background:#10b981;border-color:#10b981;color:#fff}.control-btn.saved:hover{background:#059669;border-color:#059669}.control-group{display:flex;align-items:center;gap:.75rem}.control-label{font-size:.875rem;font-weight:600;color:#374151;min-width:50px}.count-controls{display:flex;align-items:center;gap:.25rem;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:.25rem}.count-btn{width:28px;height:28px;border-radius:8px;border:none;background:#fff;color:#64748b;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.count-btn:hover:not(:disabled){background:#6366f1;color:#fff;transform:scale(1.1)}.count-btn:disabled{opacity:.4;cursor:not-allowed}.count-display{min-width:24px;text-align:center;font-weight:600;color:#0f172a;font-size:.875rem}.generation-type-select{background:#f8fafc;color:#0f172a;font-size:.875rem;font-weight:600;border:2px solid #e2e8f0;border-radius:12px;padding:.625rem 1rem;transition:all .2s ease;cursor:pointer}.generation-type-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a;background:#fff}.locked-counter{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fef3c7;color:#92400e;border-radius:10px;font-size:.875rem;font-weight:600;border:1px solid #fed7aa}.settings-btn{padding:.75rem;border-radius:12px;border:2px solid #e2e8f0;cursor:pointer;transition:all .2s ease;background:#fff;color:#64748b;display:flex;align-items:center;justify-content:center}.settings-btn:hover{background:#f8fafc;border-color:#6366f1;color:#6366f1}.settings-btn.active{background:#6366f1;border-color:#6366f1;color:#fff}.generator-colors{padding-top:0;height:100%;display:flex}.generator-colors .color-section{flex:1;position:relative}.generator-shortcuts{position:fixed;bottom:1.5rem;right:1.5rem;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white);padding:1rem;border-radius:var(--border-radius-xl);font-size:.875rem;animation:fadeIn .3s ease;animation-delay:1s;animation-fill-mode:both}.generator-shortcuts .title{font-weight:500;text-align:center;margin-bottom:.5rem;color:#ffffffe6}.generator-shortcuts .shortcut{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.generator-shortcuts .shortcut:last-child{margin-bottom:0}.generator-shortcuts kbd{background:#fff3;padding:.25rem .5rem;border-radius:.25rem;font-family:ui-monospace,SFMono-Regular,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500}.generator-lock-counter{position:fixed;bottom:1.5rem;left:1.5rem;background:#0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white);padding:.5rem 1rem;border-radius:var(--border-radius-xl);display:flex;align-items:center;gap:.5rem;font-size:.875rem;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 1024px){.controls-container{padding:1rem 1.5rem}.center-controls{gap:1.5rem}.palette-name-input{min-width:160px}.auto-generate-btn{width:40px;height:40px}}@media (max-width: 768px){.controls-container{padding:1rem}.controls-main{flex-direction:column;gap:1rem;margin-bottom:.75rem}.center-controls{justify-content:center;gap:1rem;width:100%}.main-actions{gap:.375rem}.control-btn{padding:.625rem}.palette-name-input{min-width:220px}.generator-colors{padding-top:9rem}.generator-shortcuts{bottom:1rem;right:1rem;font-size:.75rem;padding:.75rem}}@media (max-width: 480px){.controls-main{align-items:stretch}.center-controls{flex-direction:column;gap:.75rem}.control-group{justify-content:center}.control-label{font-size:.75rem;min-width:auto}.generation-type-select{font-size:.8rem;padding:.5rem .75rem}.auto-generate-btn{width:36px;height:36px;align-self:center}.generator-colors{padding-top:10rem}}.palettes-view{min-height:100vh;background-color:var(--gray-50);padding-top:4rem}.palettes-header{background-color:var(--white);border-bottom:1px solid var(--gray-200);padding:2rem 0}.palettes-header .container{max-width:100%;margin:0;padding:0 1rem}.palettes-search-container{max-width:600px;margin:0 auto}.palettes-search{position:relative;display:flex;align-items:center;gap:.5rem}.palettes-search input{flex:1;padding:1rem;border:2px solid var(--gray-200);border-radius:var(--border-radius-xl);font-size:1rem;background-color:var(--white);transition:all .2s ease}.palettes-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.palettes-search .search-icon{color:var(--gray-400);margin-left:.75rem}.palettes-search .clear-btn{background:none;border:none;color:var(--gray-400);cursor:pointer;padding:.25rem;border-radius:50%;transition:all .2s ease;margin-right:.5rem}.palettes-search .clear-btn:hover{color:var(--gray-600);background-color:var(--gray-100)}.search-overlay{position:fixed;inset:0;z-index:5}.palettes-filters{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--border-radius-xl);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;padding:2rem;margin-top:.75rem;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1000px;margin-left:auto;margin-right:auto;position:relative;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.2)}.palettes-filter{padding:.75rem;border:2px solid var(--gray-200);border-radius:var(--border-radius-lg);background:linear-gradient(135deg,var(--white),var(--gray-50));color:var(--gray-700);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:.375rem;width:100%;justify-content:center;text-align:center;position:relative;overflow:hidden}.search-tags{display:flex;gap:.25rem;align-items:center}.search-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:var(--border-radius);color:var(--white);font-size:.75rem;font-weight:500;animation:tagAppear .2s ease}@keyframes tagAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.search-tag button{background:none;border:none;color:var(--white);cursor:pointer;padding:0;display:flex;align-items:center;opacity:.8;transition:opacity .2s ease}.search-tag button:hover{opacity:1}.search-tag.count-tag{background:linear-gradient(135deg,#f59e0b,#d97706)}.search-tag.style-tag{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.search-tag.topic-tag{background:linear-gradient(135deg,#10b981,#059669)}.filter-column{display:flex;flex-direction:column}.filter-column-title{font-weight:700;color:var(--gray-800);font-size:.875rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:1px;padding-bottom:.75rem;border-bottom:3px solid var(--primary-color);text-align:center}.filter-column-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.filter-column-options-expanded{display:grid;grid-template-columns:repeat(4,1fr);gap:.375rem}.pro-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.pro-modal{background:var(--white);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-2xl);max-width:500px;width:100%;overflow:hidden}.pro-modal-content{padding:2rem}.pro-modal-content h2{font-size:1.75rem;margin-bottom:1rem;color:var(--gray-900)}.pro-modal-content p{color:var(--gray-600);margin-bottom:1.5rem}.pro-modal-content ul{list-style:none;padding:0;margin:0 0 2rem}.pro-modal-content li{padding:.75rem 0;border-bottom:1px solid var(--gray-100);color:var(--gray-700);font-size:.95rem}.pro-modal-actions{display:flex;gap:1rem}.pro-modal-actions .btn{flex:1}.btn-secondary{background:var(--gray-100);color:var(--gray-700)}.btn-secondary:hover{background:var(--gray-200)}.palettes-filter:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px -8px #6366f14d;background:linear-gradient(135deg,var(--white),rgba(99,102,241,.05))}.palettes-filter:hover .color-dot{transform:scale(1.2);box-shadow:0 0 0 3px #fffc}.palettes-filter.active{background:linear-gradient(135deg,var(--primary-color),var(--primary-600));border-color:var(--primary-color);color:var(--white);transform:scale(.98);box-shadow:0 8px 25px -8px #6366f166}.palettes-filter.active .color-dot{border-color:var(--white);box-shadow:0 0 0 2px #ffffff4d}.palettes-filter .color-dot{width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--white);box-shadow:0 2px 8px #00000026;transition:all .3s ease}.filter-icon{font-size:1.25rem;margin-bottom:.125rem;transition:all .3s ease}.palettes-filter:hover .filter-icon{transform:scale(1.2)}.palettes-content{padding:2rem 0}.palettes-content .container{max-width:100%;margin:0;padding:0 1rem}.palettes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.palettes-simple-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1rem}.palette-simple{background:var(--white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .3s ease;display:flex;flex-direction:column}.palette-simple:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.palette-colors{display:flex;height:140px}.palette-color{flex:1;position:relative;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.palette-color:first-child{border-top-left-radius:var(--border-radius-lg);border-bottom-left-radius:var(--border-radius-lg)}.palette-color:last-child{border-top-right-radius:var(--border-radius-lg);border-bottom-right-radius:var(--border-radius-lg)}.color-tooltip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:#fff;padding:.75rem;border-radius:8px;font-size:.75rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:10;text-align:center;min-width:120px}.hex-code{font-weight:600;letter-spacing:.5px;font-family:monospace}.color-name{font-size:.65rem;opacity:.9;font-weight:500}.copy-icon{margin-top:.25rem;opacity:.8;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.palettes-empty{text-align:center;padding:4rem 0;color:var(--gray-500)}.palettes-empty-icon{margin:0 auto 1rem;color:var(--gray-300)}.palettes-empty h3{font-size:1.25rem;margin-bottom:.5rem;color:var(--gray-700)}.palettes-empty p{font-size:1rem;margin-bottom:1.5rem}.palettes-empty .btn{display:inline-flex;align-items:center;gap:.5rem}@media (min-width: 640px){.palettes-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.palettes-simple-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.palettes-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem}.palettes-simple-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1280px){.palettes-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.palettes-simple-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1400px;margin:0 auto}}@media (min-width: 1536px){.palettes-simple-grid{grid-template-columns:repeat(4,1fr);max-width:1600px}}@media (max-width: 768px){.palettes-header{padding:1.5rem 0}.palettes-filters{grid-template-columns:repeat(2,1fr);gap:1.5rem;padding:1.5rem;max-width:400px}.filter-column-options{grid-template-columns:repeat(2,1fr);gap:.5rem}.palettes-filter{padding:.625rem;font-size:.7rem}.color-dot{width:1.25rem;height:1.25rem}.filter-icon{font-size:1rem}.palettes-content{padding:1.5rem 0}.palettes-content .container{padding:0 .5rem}.palettes-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.palettes-simple-grid{grid-template-columns:1fr;gap:.75rem}.palette-colors{height:100px}.color-tooltip{font-size:.7rem;padding:.375rem .5rem}}.palette-actions{padding:.75rem 1rem;background:var(--white);border-top:1px solid var(--gray-100);display:flex;justify-content:space-between;align-items:center;gap:.5rem}.palette-info{flex:1;min-width:0}.palette-name{display:block;font-size:.875rem;font-weight:600;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.125rem}.palette-count{display:block;font-size:.75rem;color:var(--gray-500);font-weight:500}.palette-buttons{display:flex;gap:.5rem;flex-shrink:0}.palette-action-btn{display:flex!important;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid #d1d5db!important;border-radius:8px;background:#fff!important;color:#374151!important;cursor:pointer;transition:all .2s ease;opacity:1!important;visibility:visible!important;box-shadow:0 1px 3px #0000001a;position:relative;z-index:1}.palette-action-btn:hover{background:#f9fafb!important;border-color:#9ca3af!important;color:#1f2937!important;transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.palette-action-btn.view-btn:hover{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}.palette-action-btn.copy-btn{position:relative}.palette-action-btn.copy-btn:after{content:"Copy Link";position:absolute;bottom:-28px;left:50%;transform:translate(-50%);background:#1f2937;color:#fff;padding:4px 8px;border-radius:4px;font-size:11px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s ease;z-index:100;pointer-events:none}.palette-action-btn.copy-btn:hover:after{opacity:1;visibility:visible}@media (max-width: 768px){.palette-actions{padding:.5rem .75rem}.palette-name{font-size:.8rem}.palette-count{font-size:.7rem}.palette-action-btn{width:32px;height:32px}.palette-action-btn svg{width:14px;height:14px}}.subscription-manager{max-width:800px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}.subscription-manager.loading,.subscription-manager.not-pro{display:flex;align-items:center;justify-content:center;min-height:400px}.loading-spinner{text-align:center;color:var(--gray-600)}.loading-spinner svg{color:var(--primary-color);margin-bottom:1rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.not-pro-content{text-align:center;color:var(--gray-600)}.not-pro-content svg{color:var(--gray-400);margin-bottom:1rem}.not-pro-content h2{font-size:1.5rem;color:var(--gray-900);margin-bottom:.5rem}.subscription-card{background:var(--white);border-radius:var(--border-radius-xl);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.subscription-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}.subscription-badge{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);padding:.75rem 1.25rem;border-radius:var(--border-radius-lg);font-weight:600}.subscription-status{display:flex;align-items:center;gap:.5rem;font-weight:500}.status-dot{width:8px;height:8px;border-radius:50%}.subscription-details{display:flex;flex-direction:column;gap:1.5rem}.detail-item{display:flex;align-items:flex-start;gap:1rem}.detail-item svg{color:var(--gray-400);margin-top:.125rem;flex-shrink:0}.detail-label{display:block;font-size:.875rem;color:var(--gray-600);margin-bottom:.25rem}.detail-value{display:block;font-weight:600;color:var(--gray-900)}.renewal-warning{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#f59e0b;font-weight:500;margin-top:.25rem}.cancellation-notice{background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);border-radius:var(--border-radius-lg);padding:1rem;margin-top:1.5rem;display:flex;gap:.75rem;color:#92400e}.cancellation-notice svg{color:#f59e0b;flex-shrink:0;margin-top:.125rem}.cancellation-notice strong{display:block;margin-bottom:.25rem}.cancellation-notice p{margin:0;font-size:.875rem}.usage-stats{background:var(--white);border-radius:var(--border-radius-xl);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.usage-stats h3{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin-bottom:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem}.stat-item{text-align:center}.stat-value{display:block;font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:.25rem}.pro-features{background:var(--white);border-radius:var(--border-radius-xl);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.pro-features h3{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin-bottom:1.5rem}.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.feature-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--gray-50);border-radius:var(--border-radius-lg)}.feature-item svg{color:#10b981;flex-shrink:0}.subscription-actions{background:var(--white);border-radius:var(--border-radius-xl);padding:2rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.action-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:var(--border-radius-lg);font-weight:500;cursor:pointer;transition:all .2s ease;border:1px solid;position:relative}.action-btn.secondary{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-700)}.action-btn.secondary:hover{background:var(--gray-100);border-color:var(--gray-400)}.action-btn.danger{background:#ef44441a;border-color:#ef44444d;color:#dc2626}.action-btn.danger:hover{background:#ef444426;border-color:#ef444466}.support-section{background:var(--gray-50);border-radius:var(--border-radius-xl);padding:2rem;text-align:center}.support-section h3{font-size:1.25rem;font-weight:600;color:var(--gray-900);margin-bottom:.75rem}.support-section p{color:var(--gray-600);margin:0}.support-link{color:var(--primary-color);text-decoration:none;font-weight:500;margin-left:.25rem}.support-link:hover{text-decoration:underline}@media (max-width: 768px){.subscription-manager{padding:1rem}.subscription-card,.usage-stats,.pro-features,.subscription-actions{padding:1.5rem}.subscription-header{flex-direction:column;gap:1rem;align-items:stretch}.stats-grid{grid-template-columns:repeat(2,1fr)}.features-list,.actions-grid{grid-template-columns:1fr}}.pro-dashboard{padding:2rem;max-width:1400px;margin:0 auto;background:var(--gray-50);min-height:100vh}.pro-dashboard-locked{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.pro-dashboard-locked-content{text-align:center;max-width:400px}.pro-dashboard-locked-content svg{color:var(--primary-color);margin-bottom:1rem}.pro-dashboard-locked-content h2{font-size:1.5rem;font-weight:700;color:var(--gray-900);margin-bottom:.5rem}.pro-dashboard-locked-content p{color:var(--gray-600);margin-bottom:2rem;line-height:1.6}.upgrade-btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius-lg);font-weight:600;cursor:pointer;transition:all .2s ease}.upgrade-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f14d}.pro-dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;background:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm)}.dashboard-title{display:flex;align-items:center;gap:1rem}.title-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);border-radius:var(--border-radius-lg)}.dashboard-title h1{font-size:1.75rem;font-weight:700;color:var(--gray-900);margin:0}.dashboard-title p{color:var(--gray-600);margin:.25rem 0 0;font-size:.875rem}.dashboard-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem}.dashboard-tabs{display:flex;background:var(--gray-100);border-radius:var(--border-radius-lg);padding:.25rem}.tab-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;background:none;border-radius:var(--border-radius);font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--gray-600)}.tab-btn.active{background:var(--white);color:var(--primary-color);box-shadow:0 2px 4px #0000001a}.time-range-selector{display:flex;background:var(--gray-100);border-radius:var(--border-radius-lg);padding:.25rem}.time-range-btn{padding:.5rem 1rem;border:none;background:none;border-radius:var(--border-radius);font-weight:500;cursor:pointer;transition:all .2s ease;color:var(--gray-600)}.time-range-btn.active{background:var(--white);color:var(--primary-color);box-shadow:0 2px 4px #0000001a}.subscription-status{background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between}.subscription-info{display:flex;align-items:center;gap:1rem}.subscription-badge{display:flex;align-items:center;gap:.5rem;background:#fff3;padding:.5rem 1rem;border-radius:var(--border-radius-lg);font-weight:600}.subscription-details{display:flex;flex-direction:column;gap:.25rem}.days-left{font-weight:600;font-size:.875rem}.renewal-date{font-size:.75rem;opacity:.9}.settings-btn{display:flex;align-items:center;gap:.5rem;background:#fff3;color:var(--white);border:none;padding:.5rem 1rem;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease}.settings-btn:hover{background:#ffffff4d}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm);transition:all .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.stat-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--border-radius-lg)}.stat-change{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:var(--border-radius)}.stat-change.positive{color:#10b981;background:#10b9811a}.stat-change.negative{color:#ef4444;background:#ef44441a}.stat-content{display:flex;flex-direction:column;gap:.25rem}.stat-value{font-size:2rem;font-weight:700;color:var(--gray-900)}.stat-label{font-size:.875rem;color:var(--gray-600)}.charts-section{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin-bottom:2rem}.chart-container,.favorite-colors{background:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm)}.chart-header{margin-bottom:1.5rem}.chart-header h3{font-size:1.25rem;font-weight:700;color:var(--gray-900);margin:0 0 .25rem}.chart-header p{color:var(--gray-600);margin:0;font-size:.875rem}.trend-chart{display:flex;align-items:end;gap:1rem;height:200px;margin-bottom:1rem;padding:1rem 0}.trend-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.trend-bars{display:flex;align-items:end;gap:.25rem;height:100%;margin-bottom:.5rem}.trend-bar-palettes,.trend-bar-exports{width:12px;border-radius:2px 2px 0 0;min-height:8px}.trend-bar-palettes{background:linear-gradient(to top,var(--primary-color),var(--primary-400))}.trend-bar-exports{background:linear-gradient(to top,#10b981,#34d399)}.trend-label{font-size:.75rem;color:var(--gray-600);font-weight:500}.chart-legend{display:flex;justify-content:center;gap:2rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--gray-600)}.legend-color{width:12px;height:12px;border-radius:2px}.legend-color.palettes{background:var(--primary-color)}.legend-color.exports{background:#10b981}.color-usage-list{display:flex;flex-direction:column;gap:.75rem}.color-usage-item{display:grid;grid-template-columns:auto auto 1fr auto 60px;align-items:center;gap:.75rem;padding:.5rem 0}.color-rank{font-weight:700;color:var(--gray-400);font-size:.875rem;min-width:20px}.color-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--white);box-shadow:0 2px 4px #0000001a}.color-info{display:flex;flex-direction:column;gap:.125rem}.color-name{font-weight:500;color:var(--gray-900);font-size:.875rem}.color-hex{font-family:monospace;font-size:.75rem;color:var(--gray-500)}.usage-count{font-size:.875rem;color:var(--gray-600);font-weight:500}.usage-bar{background:var(--gray-200);height:4px;border-radius:2px;overflow:hidden}.usage-fill{height:100%;border-radius:2px;opacity:.8}.achievements-section{background:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm);margin-bottom:2rem}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.achievement-card{position:relative;display:flex;align-items:center;gap:1rem;padding:1rem;border:2px solid var(--gray-200);border-radius:var(--border-radius-lg);transition:all .2s ease}.achievement-card.unlocked{border-color:var(--primary-color);background:#6366f10d}.achievement-card.locked{opacity:.5}.achievement-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--border-radius-lg);background:var(--gray-100);color:var(--gray-400)}.achievement-card.unlocked .achievement-icon{background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white)}.achievement-content h4{font-weight:600;color:var(--gray-900);margin:0 0 .25rem;font-size:.875rem}.achievement-content p{color:var(--gray-600);margin:0;font-size:.75rem}.achievement-badge{position:absolute;top:-8px;right:-8px;width:24px;height:24px;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center}.quick-actions{background:var(--white);padding:1.5rem;border-radius:var(--border-radius-xl);box-shadow:var(--shadow-sm)}.quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.quick-action-btn{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--border-radius-lg);cursor:pointer;transition:all .2s ease;text-align:left}.quick-action-btn:hover{border-color:var(--primary-color);background:#6366f10d;transform:translateY(-2px)}.quick-action-btn svg{color:var(--primary-color);flex-shrink:0}.quick-action-btn span{font-weight:600;color:var(--gray-900);display:block;margin-bottom:.25rem}.quick-action-btn small{color:var(--gray-600);font-size:.75rem}@media (max-width: 768px){.pro-dashboard{padding:1rem}.pro-dashboard-header,.subscription-status{flex-direction:column;gap:1rem;align-items:stretch}.charts-section,.stats-grid{grid-template-columns:1fr;gap:1rem}.achievements-grid,.quick-actions-grid{grid-template-columns:1fr}}.auth-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.auth-modal{background:var(--white);border-radius:var(--border-radius-xl);box-shadow:0 25px 50px -12px #00000040;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.auth-modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:2rem 2rem 1rem;border-bottom:1px solid var(--gray-200)}.auth-modal-header h2{font-size:1.75rem;font-weight:700;color:var(--gray-900);margin:0 0 .5rem}.auth-modal-header p{color:var(--gray-600);margin:0;font-size:.875rem}.close-btn{background:none;border:none;color:var(--gray-400);cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s ease}.close-btn:hover{color:var(--gray-600);background:var(--gray-100)}.plan-info{padding:1rem 2rem;background:#6366f10d;border-bottom:1px solid var(--gray-200)}.plan-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);padding:.5rem 1rem;border-radius:var(--border-radius);font-size:.875rem;font-weight:600}.auth-content{padding:2rem}.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.875rem 1rem;border:2px solid var(--gray-300);border-radius:var(--border-radius-lg);background:var(--white);color:var(--gray-700);font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:1.5rem}.google-btn:hover:not(:disabled){border-color:var(--gray-400);box-shadow:0 2px 8px #0000001a}.google-btn:disabled{opacity:.6;cursor:not-allowed}.google-icon{display:flex;align-items:center;justify-content:center}.divider{position:relative;text-align:center;margin:1.5rem 0;color:var(--gray-500);font-size:.875rem}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-300);z-index:1}.divider span{background:var(--white);padding:0 1rem;position:relative;z-index:2}.form-group{margin-bottom:1rem}.form-group label{display:block;font-weight:500;color:var(--gray-700);margin-bottom:.5rem;font-size:.875rem}.input-container{position:relative;display:flex;align-items:center}.input-container svg{position:absolute;left:.875rem;color:var(--gray-400);z-index:2}.input-container input{width:100%;padding:.875rem 1rem .875rem 2.75rem;border:2px solid var(--gray-300);border-radius:var(--border-radius-lg);font-size:.875rem;transition:all .2s ease;background:var(--white)}.input-container input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.input-container input:disabled{background:var(--gray-50);opacity:.7}.password-toggle{position:absolute;right:.875rem;background:none;border:none;color:var(--gray-400);cursor:pointer;padding:.25rem;border-radius:var(--border-radius);transition:all .2s ease;z-index:2}.password-toggle:hover{color:var(--gray-600);background:var(--gray-100)}.message{display:flex;align-items:center;gap:.5rem;padding:.75rem;border-radius:var(--border-radius);font-size:.875rem;margin-bottom:1rem}.message.error{background:#ef44441a;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.message.success{background:#10b9811a;color:#059669;border:1px solid rgba(16,185,129,.2)}.submit-btn{width:100%;padding:.875rem 1rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-600));color:var(--white);border:none;border-radius:var(--border-radius-lg);font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 25px #6366f14d}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-switcher{text-align:center}.auth-switcher p{color:var(--gray-600);font-size:.875rem;margin:.5rem 0}.auth-switcher button{background:none;border:none;color:var(--primary-color);cursor:pointer;font-weight:500;text-decoration:underline;transition:all .2s ease}.auth-switcher button:hover{color:var(--primary-600)}.auth-footer{padding:1.5rem 2rem;border-top:1px solid var(--gray-200);background:var(--gray-50);border-radius:0 0 var(--border-radius-xl) var(--border-radius-xl)}.auth-footer p{text-align:center;font-size:.75rem;color:var(--gray-500);margin:0;line-height:1.4}.auth-footer a{color:var(--primary-color);text-decoration:none}.auth-footer a:hover{text-decoration:underline}@media (max-width: 640px){.auth-modal{margin:.5rem;max-height:95vh}.auth-modal-header{padding:1.5rem 1.5rem 1rem}.auth-modal-header h2{font-size:1.5rem}.plan-info,.auth-content,.auth-footer{padding-left:1.5rem;padding-right:1.5rem}}@media (max-width: 480px){.auth-modal{border-radius:0;max-height:100vh;height:100vh}.auth-modal-header,.plan-info,.auth-content,.auth-footer{padding-left:1rem;padding-right:1rem}}.onboarding-backdrop{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.onboarding-modal{background:#fff;border-radius:24px;width:100%;max-width:560px;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px #00000040;position:relative}.onboarding-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem 1rem;border-bottom:1px solid #f3f4f6}.onboarding-progress{display:flex;align-items:center;gap:1rem;flex:1}.progress-bar{flex:1;height:4px;background:#f3f4f6;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:2px;transition:width .3s ease}.progress-text{font-size:.875rem;font-weight:500;color:#6b7280;white-space:nowrap}.onboarding-close{background:none;border:none;cursor:pointer;padding:.5rem;color:#6b7280;border-radius:8px;transition:all .2s ease}.onboarding-close:hover{background:#f3f4f6;color:#374151}.onboarding-content{padding:2rem;text-align:center;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center}.onboarding-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;color:#fff;margin-bottom:1.5rem;box-shadow:0 8px 20px #6366f14d}.onboarding-title{font-size:1.875rem;font-weight:700;color:#111827;margin-bottom:1rem;line-height:1.2}.onboarding-description{font-size:1.125rem;color:#6b7280;line-height:1.6;max-width:400px;margin-bottom:2rem}.onboarding-demo{margin:2rem 0;width:100%}.demo-colors{display:flex;gap:8px;justify-content:center;margin:1rem 0}.demo-color{width:40px;height:40px;border-radius:12px;box-shadow:0 4px 12px #00000026}.demo-generator{display:flex;justify-content:center;margin:1.5rem 0}.demo-button{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease}.demo-customization{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.demo-palette{display:flex;gap:8px}.demo-color-adjust{width:50px;height:50px;border-radius:12px;cursor:pointer;transition:all .3s ease}.demo-controls{display:flex;flex-direction:column;gap:8px;width:200px}.demo-slider{height:4px;background:#e5e7eb;border-radius:2px;position:relative}.demo-slider:after{content:"";position:absolute;left:0;top:0;height:100%;width:60%;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:2px}.demo-export{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.demo-export-options{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.demo-export-option{padding:.5rem 1rem;background:#f3f4f6;border-radius:8px;font-size:.875rem;font-weight:500;color:#374151;border:2px solid transparent;transition:all .2s ease}.demo-export-option:hover{background:#6366f1;color:#fff;border-color:#6366f1}.demo-share-icons{display:flex;align-items:center;gap:.5rem;color:#6b7280;font-size:.875rem}.demo-pro{width:100%}.demo-pro-features{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:300px;margin:0 auto}.demo-pro-feature{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#374151}.demo-pro-feature svg{color:#10b981}.onboarding-action-btn{padding:1rem 2rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:1rem}.onboarding-action-btn:hover{background:linear-gradient(135deg,#5856eb,#7c3aed);transform:translateY(-2px);box-shadow:0 8px 20px #6366f166}.onboarding-completion{padding:3rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.completion-icon{color:#10b981;margin-bottom:1rem}.onboarding-completion h2{font-size:1.875rem;font-weight:700;color:#111827;margin:0}.onboarding-completion p{font-size:1.125rem;color:#6b7280;margin:0}.onboarding-nav{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-top:1px solid #f3f4f6;background:#f9fafb}.nav-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:none}.nav-btn.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.nav-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#5856eb,#7c3aed);transform:translateY(-1px)}.nav-btn.secondary{background:#fff;color:#6b7280;border:1px solid #e5e7eb}.nav-btn.secondary:hover:not(:disabled){background:#f9fafb;color:#374151;border-color:#d1d5db}.nav-btn.skip{background:none;color:#6b7280;text-decoration:underline}.nav-btn.skip:hover{color:#374151}.nav-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@media (max-width: 640px){.onboarding-modal{margin:.5rem;max-width:none;border-radius:16px}.onboarding-header{padding:1rem 1.5rem .75rem}.onboarding-content{padding:1.5rem;min-height:350px}.onboarding-title{font-size:1.5rem}.onboarding-description{font-size:1rem}.onboarding-nav{padding:1rem 1.5rem;flex-wrap:wrap;gap:.5rem}.nav-btn{padding:.625rem 1.25rem;font-size:.8125rem}.demo-pro-features{grid-template-columns:1fr}}@media (prefers-color-scheme: dark){.onboarding-modal{background:#1f2937;border:1px solid #374151}.onboarding-header{border-bottom-color:#374151}.progress-bar{background:#374151}.progress-text,.onboarding-close{color:#9ca3af}.onboarding-close:hover{background:#374151;color:#f3f4f6}.onboarding-title{color:#f9fafb}.onboarding-description{color:#9ca3af}.demo-export-option{background:#374151;color:#f3f4f6}.demo-pro-feature{color:#f3f4f6}.onboarding-completion h2{color:#f9fafb}.onboarding-completion p{color:#9ca3af}.onboarding-nav{background:#374151;border-top-color:#4b5563}.nav-btn.secondary{background:#1f2937;color:#9ca3af;border-color:#4b5563}.nav-btn.secondary:hover:not(:disabled){background:#374151;color:#f3f4f6;border-color:#6b7280}.nav-btn.skip{color:#9ca3af}.nav-btn.skip:hover{color:#f3f4f6}}