@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@500;600;700&display=swap";:root{--bg: #FAFAF8;--bg-card: #FFFFFF;--bg-subtle: #F3F3F0;--primary: #1C3A2E;--primary-light:#2A5443;--accent: #E8694A;--accent-light: #F08A70;--text: #1A1A18;--text-muted: #6B7280;--text-light: #9CA3AF;--border: #E4E4E0;--shadow-sm: 0 1px 3px rgba(0,0,0,.06);--shadow-md: 0 4px 16px rgba(0,0,0,.08);--shadow-lg: 0 12px 40px rgba(0,0,0,.12);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-full: 999px;--transition: .22s cubic-bezier(.4,0,.2,1);--font-body: "DM Sans", system-ui, sans-serif;--font-display: "Playfair Display", Georgia, serif;--max-w: 720px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}img,video{display:block;max-width:100%}button{cursor:pointer;border:none;background:none;font-family:inherit}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}input[type=range]{-webkit-appearance:none;appearance:none}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:var(--primary);color:#fff;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-md)}.logo{display:flex;align-items:center;gap:8px}.logo-icon{font-size:1.4rem;color:var(--accent)}.logo-text{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.5px;color:#fff}.logo-dot{color:var(--accent)}.header-tagline{font-size:.72rem;color:#ffffff8c;letter-spacing:.8px;text-transform:uppercase}.app-main{flex:1;width:100%;max-width:var(--max-w);margin:0 auto;padding:24px 16px 48px}.app-footer{text-align:center;padding:16px;font-size:.75rem;color:var(--text-light);border-top:1px solid var(--border)}.step-nav{display:flex;align-items:center;justify-content:center;padding:20px 16px 4px;gap:0;max-width:var(--max-w);margin:0 auto}.step-item{display:flex;align-items:center;gap:8px}.step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;background:var(--bg-subtle);color:var(--text-muted);border:2px solid var(--border);transition:all var(--transition);flex-shrink:0}.step-dot--active{background:var(--primary);color:#fff;border-color:var(--primary)}.step-dot--done{background:#22c55e;color:#fff;border-color:#22c55e}.step-label{font-size:.78rem;color:var(--text-muted)}.step-label--active{color:var(--primary);font-weight:600}.step-line{width:48px;height:2px;background:var(--border);margin:0 4px;flex-shrink:0;transition:background var(--transition)}.step-line--done{background:#22c55e}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 24px;border-radius:var(--radius-full);font-size:.95rem;font-weight:600;transition:all var(--transition);outline-offset:3px;white-space:nowrap}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px #1c3a2e40}.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 16px #1c3a2e4d}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn-secondary:hover{background:var(--primary);color:#fff}.btn-ghost{color:var(--text-muted);font-weight:500;padding:11px 16px}.btn-ghost:hover{color:var(--text);background:var(--bg-subtle);border-radius:var(--radius-full)}.btn-large{padding:14px 32px;font-size:1rem}.btn-icon{font-size:1.1em}.btn-capture{background:var(--accent);color:#fff;padding:14px 36px;font-size:1rem;box-shadow:0 4px 16px #e8694a59}.btn-capture:hover{background:var(--accent-light);transform:scale(1.03)}.btn-capture:disabled{opacity:.55;cursor:not-allowed;transform:none}.error-toast{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fef2f2;border:1px solid #FECACA;color:#b91c1c;padding:12px 16px;border-radius:var(--radius-md);max-width:var(--max-w);margin:12px auto 0;font-size:.9rem;animation:slideDown .3s ease}.toast-close{color:inherit;opacity:.6;font-size:1.2rem;padding:0 4px}.toast-close:hover{opacity:1}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.loading-overlay{position:fixed;inset:0;background:#fafaf8e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:100}.loading-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:40px 48px;text-align:center;box-shadow:var(--shadow-lg);max-width:360px}.loading-spinner{width:52px;height:52px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-title{font-family:var(--font-display);font-size:1.25rem;color:var(--primary);margin-bottom:6px}.loading-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:20px}.loading-steps{display:flex;flex-direction:column;gap:6px}.loading-step{font-size:.8rem;color:var(--text-light);animation:fadeIn .6s ease both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.capture-hero{text-align:center;margin-bottom:28px}.capture-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.2rem);color:var(--primary);line-height:1.25;margin-bottom:8px}.capture-subtitle{color:var(--text-muted);font-size:.95rem;max-width:480px;margin:0 auto}.divider{display:flex;align-items:center;gap:12px;color:var(--text-light);font-size:.8rem;margin:4px 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.capture-container{max-width:500px;margin:0 auto}.capture-options{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:0 auto 28px}.camera-view{display:flex;flex-direction:column;align-items:center;gap:16px}.video-frame{position:relative;width:100%;max-width:440px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#000}.camera-video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.face-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.overlay-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fffc;font-size:.8rem}.camera-controls{display:flex;gap:12px;align-items:center}.camera-error{background:#fef3c7;color:#92400e;padding:10px 16px;border-radius:var(--radius-md);font-size:.88rem;text-align:center}.preview-view{display:flex;flex-direction:column;align-items:center;gap:20px}.preview-frame{position:relative;width:100%;max-width:440px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.preview-image{width:100%;object-fit:cover;display:block}.preview-badge{position:absolute;top:12px;right:12px;background:#22c55e;color:#fff;padding:4px 12px;border-radius:var(--radius-full);font-size:.78rem;font-weight:600}.preview-controls{display:flex;gap:12px}.capture-tips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}.tip-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:var(--bg-subtle);font-size:.78rem;color:var(--text-muted)}.tip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}.form-container{max-width:560px;margin:0 auto}.lifestyle-form{display:flex;flex-direction:column;gap:28px}.form-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:20px}.section-heading{font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);padding-bottom:12px;border-bottom:1px solid var(--border)}.form-field{display:flex;flex-direction:column;gap:8px}.field-header{display:flex;align-items:center;justify-content:space-between}.field-label{font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:6px}.field-emoji{font-size:1em}.field-value{font-weight:700;color:var(--primary);font-size:.92rem}.field-unit{font-weight:400;color:var(--text-muted)}.slider-track{position:relative;height:6px;background:var(--border);border-radius:var(--radius-full);cursor:pointer}.slider-fill{position:absolute;left:0;top:0;bottom:0;background:var(--primary);border-radius:var(--radius-full);pointer-events:none;transition:width .05s linear}.slider{position:absolute;inset:0;width:100%;margin:-10px 0;height:26px;background:transparent;cursor:pointer;z-index:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);box-shadow:0 2px 6px #1c3a2e4d;border:2px solid #fff;cursor:pointer;transition:transform var(--transition)}.slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid #fff;cursor:pointer}.slider-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-light)}.radio-group{display:flex;flex-wrap:wrap;gap:8px}.radio-chip{padding:7px 16px;border-radius:var(--radius-full);border:1.5px solid var(--border);font-size:.85rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all var(--transition);-webkit-user-select:none;user-select:none}.radio-chip:hover{border-color:var(--primary);color:var(--primary)}.radio-chip--active{background:var(--primary);color:#fff;border-color:var(--primary)}.form-actions{display:flex;gap:12px;justify-content:space-between;padding-top:8px}.report-container{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:28px}.report-header{text-align:center}.score-section{display:flex;flex-direction:column;align-items:center;gap:16px}.score-ring-wrap{position:relative;width:fit-content}.score-ring-svg{display:block}.score-ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-number{font-family:var(--font-display);font-size:2.8rem;font-weight:700;line-height:1}.score-sub{font-size:.85rem;color:var(--text-muted)}.score-caption{font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;color:var(--text-light);margin-top:4px}.score-description{text-align:center;color:var(--text-muted);max-width:380px;font-size:.95rem}.derm-banner{display:flex;gap:16px;align-items:flex-start;background:#fef2f2;border:1.5px solid #FCA5A5;border-radius:var(--radius-lg);padding:20px 24px;animation:slideDown .4s ease}.derm-icon{font-size:1.8rem;flex-shrink:0}.derm-banner strong{display:block;color:#991b1b;font-size:.95rem;margin-bottom:4px}.derm-banner p{color:#b91c1c;font-size:.88rem;line-height:1.5}.lifestyle-impact{display:flex;flex-direction:column;gap:10px}.impact-card{display:flex;gap:12px;align-items:flex-start;background:#fffbeb;border:1px solid #FDE68A;border-radius:var(--radius-md);padding:12px 16px}.impact-icon{flex-shrink:0}.impact-text{font-size:.88rem;color:#78350f;line-height:1.5}.conditions-section{display:flex;flex-direction:column;gap:12px}.condition-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);animation:cardIn .4s ease both;transition:box-shadow var(--transition)}.condition-card:hover,.condition-card--open{box-shadow:var(--shadow-md)}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.condition-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;width:100%;text-align:left;background:none}.condition-header:hover{background:var(--bg-subtle)}.condition-title-row{display:flex;align-items:center;gap:10px}.condition-bar{width:4px;height:20px;border-radius:2px;flex-shrink:0}.condition-name{font-weight:600;font-size:.95rem;color:var(--text)}.chevron{font-size:1.4rem;color:var(--text-light);transition:transform var(--transition);line-height:1}.chevron--up{transform:rotate(90deg)}.severity-badge{padding:3px 10px;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;letter-spacing:.5px;border:1px solid transparent;text-transform:uppercase}.condition-body{padding:0 20px 20px;display:flex;flex-direction:column;gap:16px}.rec-section{display:flex;flex-direction:column;gap:8px}.rec-heading{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted)}.rec-list{padding-left:16px;display:flex;flex-direction:column;gap:4px}.rec-list li{font-size:.88rem;color:var(--text-muted)}.ingredients-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.routine-steps{display:flex;flex-direction:column;gap:10px}.routine-step{display:flex;gap:12px;align-items:flex-start}.step-number{width:24px;height:24px;flex-shrink:0;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;margin-top:2px}.step-body{display:flex;flex-direction:column;gap:2px}.step-name{font-weight:600;font-size:.88rem;color:var(--text)}.step-instruction{font-size:.83rem;color:var(--text-muted);line-height:1.45}.step-product{font-size:.78rem;color:var(--primary);font-weight:500}.tag-list{display:flex;flex-wrap:wrap;gap:6px}.tag{padding:3px 10px;border-radius:var(--radius-full);font-size:.76rem;font-weight:500}.tag--green{background:#f0fdf4;color:#166534;border:1px solid #BBF7D0}.tag--red{background:#fef2f2;color:#991b1b;border:1px solid #FECACA}.report-footer{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:8px}.disclaimer{font-size:.78rem;color:var(--text-light);text-align:center;max-width:500px;line-height:1.5}.report-error{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:48px 24px}.error-icon{font-size:3rem}@media(max-width:600px){.app-header{flex-direction:column;gap:4px;text-align:center}.header-tagline{display:none}.step-line{width:28px}.step-label{display:none}.ingredients-row{grid-template-columns:1fr}.form-actions{flex-direction:column-reverse}.btn-large{width:100%}.preview-controls{flex-direction:column;width:100%}.camera-controls{flex-direction:column}}