@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap";:root{--font-sans: "Outfit", sans-serif;--font-serif: "Playfair Display", serif;--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #1a1a1a;--text-secondary: #666666;--accent: #2d3436;--accent-light: #dfe6e9;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow: 0 10px 30px rgba(0, 0, 0, .05);--radius: 12px}[data-theme=dark]{--bg-primary: #121212;--bg-secondary: #1e1e1e;--text-primary: #f5f5f5;--text-secondary: #b0b0b0;--accent: #ffffff;--accent-light: #333333}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;transition:var(--transition)}h1,h2,h3{font-family:var(--font-serif);font-weight:700}.container{max-width:1000px;margin:0 auto;padding:2rem}.hero{text-align:center;padding:4rem 0;animation:fadeIn 1s ease-out}.hero h1{font-size:4rem;margin-bottom:1rem;letter-spacing:-1px}.hero p{font-size:1.2rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.upload-section{background:var(--bg-secondary);border:2px dashed var(--accent-light);border-radius:var(--radius);padding:4rem;text-align:center;cursor:pointer;transition:var(--transition);margin-bottom:3rem;position:relative;overflow:hidden}.upload-section:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}.upload-section.dragging{border-color:var(--accent);background:var(--bg-primary)}.preview-container{margin-top:2rem;animation:slideUp .6s ease-out}.preview-image{max-width:400px;width:100%;border-radius:var(--radius);box-shadow:var(--shadow);margin:0 auto;display:block}.results-section{margin-top:4rem;animation:fadeIn .8s ease-out}.face-description{background:var(--bg-secondary);padding:2rem;border-radius:var(--radius);margin-bottom:3rem;border-left:4px solid var(--accent)}.hairstyles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:3rem}.hairstyle-card{background:var(--bg-primary);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--accent-light);cursor:pointer}.hairstyle-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px #0000001a}.hairstyle-card.selected{border:2px solid var(--accent);transform:scale(1.02)}.hairstyle-image{width:100%;height:350px;object-fit:cover}.hairstyle-info{padding:1.5rem}.hairstyle-info h3{margin-bottom:.5rem}.cta-text{text-align:center;font-family:var(--font-serif);font-size:1.8rem;margin-top:4rem;color:var(--text-primary);opacity:.9}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.hero h1{font-size:2.5rem}.container{padding:1rem}.upload-section{padding:2rem}}:root{--primary-glow: radial-gradient(rgba(1, 65, 255, .4), rgba(1, 65, 255, 0));--secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, .3))}.loading-state p{font-family:var(--font-serif);font-style:italic;font-size:1.2rem;color:var(--text-secondary);animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.upload-content svg{margin-bottom:1rem;color:var(--text-secondary)}.upload-content h3{font-size:1.5rem;margin-bottom:.5rem}.upload-content p{color:var(--text-secondary)}