.profile-container{display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;background:radial-gradient(circle at top left,#f8f9fa,#e9ecef);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");background-blend-mode:overlay}.profile-card{background:#ffffffe6;padding:40px;border-radius:24px;box-shadow:0 20px 40px #0000001a,0 0 20px #0000000d;width:100%;max-width:450px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);transition:all .3s ease}.step-indicator{display:inline-block;background:#eef2ff;color:#6366f1;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:12px}.profile-header{text-align:center;margin-bottom:30px}.profile-header h1{font-size:24px;font-weight:800;color:#1a1a1a;margin-bottom:8px}.highlight{color:#6366f1;background:linear-gradient(120deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.profile-header p{color:#666;font-size:14px}.profile-form{display:flex;flex-direction:column;gap:24px}.photo-section{display:flex;justify-content:center}.photo-preview{width:180px;height:240px;border:2px dashed #cbd5e1;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;overflow:hidden;transition:all .3s ease;background:#f1f5f9;position:relative}.photo-preview:focus-visible{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f124}.photo-preview.dragging{border-color:#6366f1;background:#eff6ff;transform:scale(1.02);box-shadow:0 0 20px #6366f133}.drag-hint{font-size:12px;color:#94a3b8;margin-top:2px;text-align:center;line-height:1.5}.photo-preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.photo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0f172a94;color:#fff;font-size:14px;font-weight:700;text-align:center;padding:16px}.photo-preview:hover{border-color:#6366f1;background:#eff6ff;transform:translateY(-4px);box-shadow:0 10px 20px #6366f11a}.input-group{display:grid;grid-template-columns:1fr 1fr;gap:16px}.input-field{display:flex;flex-direction:column;gap:8px}.input-field label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#475569}.input-field input{padding:12px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:16px;transition:all .3s ease}.input-field input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 4px #6366f11a}.submit-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:16px;border-radius:14px;font-size:16px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #6366f14d;flex:2}.submit-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 6px 20px #6366f166}.back-btn{background:#fff;color:#475569;border:1.5px solid #e2e8f0;padding:16px;border-radius:14px;font-size:16px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px;cursor:pointer;transition:all .3s ease;flex:1}.back-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.button-group{display:flex;gap:12px;margin-top:10px}.preview-content{display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:30px}.preview-image-container{position:relative;width:140px;height:180px}.preview-image-rounded{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:16px;box-shadow:0 8px 16px #0000001a}.preview-badge{position:absolute;bottom:-10px;right:-10px;background:#10b981;color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;box-shadow:0 4px 8px #10b9814d}.preview-stats{display:flex;justify-content:center;align-items:center;background:#f8fafc;padding:16px 32px;border-radius:16px;width:100%}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:12px;color:#64748b;margin-bottom:4px}.stat-value{font-size:18px;font-weight:800;color:#1e293b}.stat-divider{width:1.5px;height:30px;background:#e2e8f0;margin:0 32px}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.report-card{max-width:650px}.report-content{margin:20px 0;text-align:left;line-height:1.8;color:#334155;background:#fff;padding:30px;border-radius:20px;max-height:70vh;overflow-y:auto;border:1px solid #f1f5f9;display:flex;flex-direction:column;gap:32px}.report-section h3{font-size:18px;font-weight:800;color:#1e293b;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}.hair-image-container{width:100%;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px #0000001a;background:#f8fafc}.hair-suggestion-image{width:100%;height:auto;display:block;transition:transform .5s ease}.hair-suggestion-image:hover{transform:scale(1.02)}.report-note{padding:14px 16px;border-radius:14px;background:#eff6ff;color:#1d4ed8;font-size:14px;line-height:1.6}.report-section p{margin-bottom:12px;font-size:15px}.hidden-input{display:none}.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#64748b}.photo-placeholder span{font-size:14px;font-weight:600}