body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}.App{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}.header{color:#000;position:relative;top:0;z-index:100}.nav-container{flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:1200px;padding:30px 2rem}.logo,.nav-container{align-items:center;display:flex}.logo{cursor:pointer;gap:1rem;transition:all .3s ease}.logo:hover{opacity:.8;transform:scale(1.05)}.logo h1{font-size:2.2rem;font-weight:700;margin:0}.logo svg{transition:all .3s ease}.logo:hover svg{transform:rotate(5deg)}.logo-selection-section{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #dee2e6;padding:4rem 0}.logo-gallery{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2rem}.logo-option{background:#fff;border:2px solid #e9ecef;border-radius:15px;box-shadow:0 4px 12px #0000001a;cursor:pointer;padding:2rem;text-align:center;transition:all .3s ease}.logo-option:hover{border-color:#ff6b9d;box-shadow:0 8px 25px #ff6b9d33;transform:translateY(-8px)}.logo-preview{align-items:center;background:linear-gradient(45deg,#f8f9fa,#fff);border:1px solid #e9ecef;border-radius:10px;display:flex;height:120px;justify-content:center;margin-bottom:1rem}.logo-preview svg{transition:transform .3s ease}.logo-option:hover .logo-preview svg{transform:scale(1.1) rotate(5deg)}.logo-option h6{color:#ff6b9d;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.logo-option p{color:#6c757d;font-size:.9rem;margin:0}@media (max-width:768px){.logo-gallery{gap:1rem;grid-template-columns:repeat(2,1fr)}.logo-option{padding:1.5rem}.logo-preview{height:100px}}.navigation{flex-grow:1;margin-left:2rem}.nav-links{align-items:center;display:flex;gap:2rem;list-style:none}.nav-links a,.nav-links li{position:relative}.nav-links a{border-radius:25px;color:#0b0a12;font-size:1rem;font-weight:500;overflow:hidden;padding:1rem 0;text-decoration:none;transition:all .3s ease}.nav-links a:hover{color:#6610f2;transform:translateY(-2px)}.nav-links a:active{color:#6610f2;transform:translateY(0)}.sticky-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #ff6b9d1a;box-shadow:0 2px 20px #0000001a;left:0;position:fixed;right:0;top:0;transform:translateY(-100%);transition:all .3s ease;z-index:1000}.sticky-header.visible{transform:translateY(0)}.sticky-nav-container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;max-width:1200px;padding:15px 2rem}.sticky-logo{align-items:center;cursor:pointer;display:flex;gap:.75rem;transition:all .3s ease}.sticky-logo:hover{opacity:.8;transform:scale(1.05)}.sticky-logo h1{color:#000;font-size:1.5rem;font-weight:700;margin:0}.sticky-logo svg{transition:all .3s ease}.sticky-logo:hover svg{transform:rotate(5deg)}.sticky-navigation{flex-grow:1;margin-left:2rem}.sticky-nav-links{align-items:center;display:flex;gap:1.5rem;list-style:none}.sticky-nav-links li{position:relative}.sticky-nav-links a{border-radius:20px;color:#2d3436;font-size:.9rem;font-weight:500;padding:.5rem 1rem;position:relative;text-decoration:none;transition:all .3s ease}.sticky-nav-links a:hover{background:#ff6b9d1a;color:#ff6b9d;transform:translateY(-1px)}.main-content{flex:1 1;min-height:calc(100vh - 200px)}.container{margin:0 auto;max-width:1200px;padding:0 2rem}.hero-section{background:linear-gradient(135deg,#ff6b9d,#f093fb,#ff9a9e);padding:4rem 0}.hero-gradient{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:3rem 2rem}.hero-content{color:#fff;text-align:center}.hero-content h1{font-size:3rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px #0000004d}.hero-content h6{font-size:1.2rem;margin-bottom:2rem;opacity:.9}.upload-form-container{background:#fffffff2;border-radius:15px;box-shadow:0 10px 30px #0000001a;margin-top:2rem;padding:2rem}.upload-form{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.form-input-group{flex:1 1;min-width:300px;position:relative}.file-input{cursor:pointer;height:100%;opacity:0;position:absolute;width:100%}.file-label{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:10px;color:#6c757d;cursor:pointer;display:block;font-weight:500;padding:1rem 1.5rem;text-align:center;transition:all .3s ease}.file-label:hover{background:#fff5f8;border-color:#ff6b9d;color:#ff6b9d}.scan-button{background:linear-gradient(135deg,#ff6b9d,#f093fb);border:none;border-radius:10px;box-shadow:0 4px 15px #ff6b9d4d;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:1rem 2rem;transition:all .3s ease}.scan-button:hover{box-shadow:0 6px 20px #ff6b9d66;transform:translateY(-2px)}.blog-section,.categories-section,.faq-section,.how-it-works-section{padding:4rem 0}.section-header{margin-bottom:3rem;text-align:center}.section-header h2{color:#2d3436;font-size:2.5rem;font-weight:700;margin-bottom:1rem}.section-header .lead{color:#636e72;font-size:1.2rem}.categories-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.category-card{background:#fff;border:1px solid #f1f3f4;border-radius:15px;box-shadow:0 5px 20px #00000014;padding:2rem;text-align:center;transition:all .3s ease}.category-card:hover{box-shadow:0 10px 30px #ff6b9d26;transform:translateY(-5px)}.category-icon{margin-bottom:1.5rem}.category-icon .icon{display:block;font-size:3rem}.category-content h5{color:#2d3436;font-size:1.5rem;font-weight:700;margin-bottom:1rem}.category-content p{color:#636e72;line-height:1.6}.how-it-works-section{background:linear-gradient(180deg,#ffeef3,#fff5f8)}.steps-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.step-card{background:#fff;border-radius:15px;box-shadow:0 5px 20px #00000014;padding:2rem;text-align:center;transition:all .3s ease}.step-card:hover{transform:translateY(-5px)}.step-number{align-items:center;background:linear-gradient(135deg,#ff6b9d,#f093fb);border-radius:50%;color:#fff;display:flex;font-size:2rem;font-weight:700;height:80px;justify-content:center;margin:0 auto 1.5rem;width:80px}.step-content h5{color:#2d3436;font-size:1.5rem;font-weight:700;margin-bottom:1rem}.step-content p{color:#636e72;line-height:1.6}.faq-container{margin:0 auto;max-width:800px}.faq-item{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000000d;margin-bottom:1rem;overflow:hidden}.faq-question{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:1.5rem;transition:all .3s ease}.faq-question:hover{background:#ffeef3}.faq-question h6{color:#2d3436;font-size:1.1rem;font-weight:600;margin:0}.faq-toggle{color:#ff6b9d;font-size:1.5rem;font-weight:700;transition:transform .3s ease}.faq-answer{animation:fadeIn .3s ease;color:#636e72;line-height:1.6;padding:0 1.5rem 1.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.faq-item.active .faq-question{background:#ffeef3}.faq-item.active .faq-toggle{color:#e74c3c;transform:rotate(0deg)}.blog-section{background:#f8f9fa}.blog-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.blog-card{background:#fff;border-radius:15px;box-shadow:0 5px 20px #00000014;overflow:hidden;transition:all .3s ease}.blog-card:hover{box-shadow:0 10px 30px #00000026;transform:translateY(-5px)}.blog-image{align-items:center;background:linear-gradient(135deg,#ff9a9e,#fecfef,#fecfef);color:#fff;display:flex;font-size:3rem;height:200px;justify-content:center;position:relative}.blog-image:before{content:"📖";font-size:4rem}.blog-badge{background:#ffffffe6;border-radius:20px;color:#ff6b9d;font-size:.8rem;font-weight:700;left:1rem;padding:.5rem 1rem;position:absolute;top:1rem}.blog-content{padding:1.5rem}.blog-content h5{color:#2d3436;font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.blog-content h6{color:#636e72;font-size:.9rem;font-weight:400}.content-container{margin:0 auto;max-width:1200px;padding:0 2rem;text-align:center}.content-container h2{color:#d63031;font-size:2.5rem;font-weight:700;margin-bottom:1.5rem}.content-container p{color:#666;font-size:1.2rem;line-height:1.6}.footer{background:linear-gradient(135deg,#2d3436,#636e72);color:#fff;margin-top:auto;padding:2rem 0}.footer-container{margin:0 auto;max-width:1200px;padding:0 2rem;text-align:center}.footer-container p{font-size:.9rem;margin:.5rem 0}.footer-container p:first-child{font-size:1rem;font-weight:700}.footer-container p:last-child{color:#ddd;font-style:italic}@media (max-width:768px){.nav-container{flex-direction:column;gap:1rem}.navigation{margin-left:0;width:100%}.nav-links{flex-wrap:wrap;gap:1rem;justify-content:center}.nav-links a{font-size:.9rem;padding:.4rem .8rem}.logo h1{font-size:1.5rem}.content-container h2{font-size:2rem}.main-content{padding:2rem 0}.sticky-nav-container{flex-direction:column;gap:.5rem;padding:10px 1rem}.sticky-navigation{margin-left:0;width:100%}.sticky-nav-links{flex-wrap:wrap;gap:.5rem;justify-content:center}.sticky-nav-links a{font-size:.8rem;padding:.3rem .8rem}.sticky-logo h1{font-size:1.2rem}}.gallery-section{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:80px 0}.gallery-section .container{margin:0 auto;max-width:1400px;padding:0 2rem}.lipstick-gallery{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:15px;box-shadow:0 10px 30px #0000001a;margin:0 auto;max-width:1200px;padding:20px;width:100%}.gallery-header{margin-bottom:30px;text-align:center}.gallery-header h2{color:#2c3e50;font-size:2.5rem;font-weight:600;margin-bottom:30px;text-shadow:0 2px 4px #0000001a}.color-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:25px}.tab-button{background:#fff;border:2px solid #e74c3c;border-radius:25px;color:#e74c3c;cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.5px;padding:12px 24px;text-transform:uppercase;transition:all .3s ease}.tab-button:hover{box-shadow:0 5px 15px #e74c3c4d}.tab-button.active,.tab-button:hover{background:#e74c3c;color:#fff;transform:translateY(-2px)}.tab-button.active{box-shadow:0 5px 15px #e74c3c66}.texture-filters{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.filter-label{color:#2c3e50;font-weight:600;margin-right:10px}.texture-button{background:#fff;border:1px solid #bdc3c7;border-radius:20px;color:#7f8c8d;cursor:pointer;font-size:12px;padding:8px 16px;text-transform:capitalize;transition:all .3s ease}.texture-button:hover{background:#ecf0f1;border-color:#95a5a6;color:#2c3e50}.texture-button.active{background:#3498db;border-color:#3498db;color:#fff}.recommendations-section{background:#ffffffe6;border-radius:15px;box-shadow:0 5px 15px #0000001a;margin-bottom:40px;padding:25px}.recommendations-section h3{color:#e74c3c;font-size:1.8rem;margin-bottom:20px;text-align:center}.recommendations-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.recommendation-card{align-items:center;background:#fff;border-radius:12px;box-shadow:0 3px 10px #0000001a;display:flex;padding:15px;transition:transform .3s ease}.recommendation-card:hover{box-shadow:0 5px 20px #00000026;transform:translateY(-3px)}.rec-color-circle{border-radius:50%;box-shadow:0 3px 10px #0003;height:50px;margin-right:15px;overflow:hidden;width:50px}.rec-color-circle .color-swatch{border-radius:50%;height:100%;width:100%}.rec-info{display:flex;flex:1 1;flex-direction:column}.rec-shade{color:#2c3e50;font-size:16px;font-weight:600;margin-bottom:4px}.rec-confidence{color:#27ae60;font-size:14px;font-weight:600;margin-bottom:2px}.rec-reason{color:#7f8c8d;font-size:12px;line-height:1.3}.color-gallery{background:#fffc;border-radius:15px;padding:20px}.colors-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));justify-items:center}.color-circle{align-items:center;border-radius:15px;cursor:pointer;display:flex;flex-direction:column;padding:10px;position:relative;transition:transform .3s ease}.color-circle:hover{background:#fffc;box-shadow:0 8px 25px #00000026;transform:translateY(-5px)}.color-circle:focus{outline:3px solid #3498db;outline-offset:2px}.single-color .color-swatch{border:3px solid #fff;border-radius:50%;box-shadow:0 4px 15px #0003;height:50px;overflow:hidden;position:relative;width:50px}.single-color.matte .color-swatch:after{background:#ffffff1a;border-radius:50%;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.single-color.gloss .color-swatch:after{background:#fff9;border-radius:50%;content:"";filter:blur(2px);height:15px;left:20%;position:absolute;top:10%;width:15px}.single-color.shimmer .color-swatch:before{animation:shimmer 2s infinite;background:linear-gradient(45deg,#0000 30%,#ffffff4d 50%,#0000 70%);border-radius:50%;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.single-color.metallic .color-swatch:before{background:radial-gradient(circle at 30% 30%,#fff6,#0000 50%);border-radius:50%;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.single-color.sheer .color-swatch{opacity:.7}.dual-color svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}.shade-name{word-wrap:break-word;color:#2c3e50;font-size:11px;font-weight:500;line-height:1.2;margin-top:8px;max-width:70px;text-align:center}@keyframes shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (max-width:768px){.lipstick-gallery{padding:15px}.gallery-header h2{font-size:2rem}.color-tabs{gap:5px}.tab-button{font-size:12px;padding:10px 16px}.texture-filters{gap:5px}.texture-button{font-size:11px;padding:6px 12px}.colors-grid{gap:15px;grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.single-color .color-swatch{height:40px;width:40px}.shade-name{font-size:10px;max-width:60px}.recommendations-grid{grid-template-columns:1fr}}@media (max-width:480px){.color-tabs{align-items:center;flex-direction:column}.texture-filters{flex-direction:column;gap:10px}.colors-grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}}
/*# sourceMappingURL=main.33e34438.css.map*/