*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}:root{--bg: #FFF8F0;--white: #FFFFFF;--coral: #FF6B6B;--mint: #4ECDC4;--teal: #2CB5A8;--text: #2D2D2D;--text-muted: #999;--card-shadow: 0 4px 16px rgba(78,205,196,.12);--radius: 18px;--transition: .35s cubic-bezier(.4, 0, .2, 1)}html,body,#root{height:100%}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.screen{min-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 28px 40px;text-align:center;position:relative;z-index:1;overflow:hidden}.welcome:before{content:"";position:absolute;width:320px;height:320px;background:radial-gradient(circle,rgba(78,205,196,.15) 0%,transparent 70%);border-radius:50%;top:-60px;left:50%;transform:translate(-50%);pointer-events:none;animation:blobPulse 4s ease-in-out infinite}.welcome:after{content:"";position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(255,107,107,.1) 0%,transparent 70%);border-radius:50%;bottom:80px;right:-40px;pointer-events:none;animation:blobPulse 5s ease-in-out infinite reverse}@keyframes blobPulse{0%,to{transform:translate(-50%) scale(1);opacity:.8}50%{transform:translate(-50%) scale(1.15);opacity:1}}.welcome-icon{width:100px;height:100px;background:linear-gradient(135deg,#e8f8f7,#c8f0ec);border-radius:28px;display:flex;align-items:center;justify-content:center;font-size:48px;margin-bottom:24px;box-shadow:0 8px 32px #4ecdc440,inset 0 1px #fffc;animation:fadeUp .6s ease both;position:relative;z-index:1}.welcome h1{font-family:Space Grotesk,sans-serif;font-size:52px;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,var(--teal) 0%,#1a9e8e 40%,var(--coral) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:6px;animation:fadeUp .6s .1s ease both;position:relative;z-index:1}.welcome-tagline{font-family:Space Grotesk,sans-serif;font-size:13px;font-weight:500;color:var(--teal);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px;animation:fadeUp .6s .15s ease both;position:relative;z-index:1}.welcome-sub{font-size:15px;color:var(--text-muted);line-height:1.55;max-width:280px;margin-bottom:36px;animation:fadeUp .6s .2s ease both;position:relative;z-index:1}.welcome-features{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;animation:fadeUp .6s .25s ease both;position:relative;z-index:1}.feature{display:flex;align-items:center;gap:12px;text-align:left;font-size:14px;color:var(--text)}.feature-icon{font-size:24px;width:40px;height:40px;background:linear-gradient(135deg,#e8f8f7,#d0f0ec);border-radius:10px;display:flex;align-items:center;justify-content:center}.btn-primary{width:100%;max-width:320px;padding:18px;background:linear-gradient(135deg,var(--mint),var(--teal));color:#fff;border:none;border-radius:var(--radius);font-family:DM Sans,sans-serif;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 28px #4ecdc459;transition:all var(--transition);animation:fadeUp .6s .3s ease both}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px #4ecdc473}.btn-primary:active{transform:translateY(-1px)}.step{flex:1;display:flex;flex-direction:column;padding:24px 20px 0;position:relative;z-index:1}.step-header{margin-bottom:20px}.step-header h2{font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:600;line-height:1.3;margin-bottom:6px}.hint{font-size:13px;color:var(--text-muted)}.options-grid{display:flex;flex-direction:column;gap:10px;flex:1}.option-card{background:var(--white);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all var(--transition);border:2.5px solid transparent;box-shadow:var(--card-shadow);text-align:left;width:100%;font-family:DM Sans,sans-serif}.option-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4ecdc42e}.option-card.selected{border-color:var(--mint);background:linear-gradient(135deg,#e8f8f7,#e5f7f5);box-shadow:0 6px 20px #4ecdc438}.option-emoji{font-size:28px;width:48px;height:48px;border-radius:14px;background:#e8f8f7;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition)}.option-card.selected .option-emoji{background:linear-gradient(135deg,var(--mint),var(--teal))}.option-text{display:flex;flex-direction:column;gap:3px;flex:1}.option-label{font-size:15px;font-weight:600;color:var(--text)}.option-sub{font-size:14px;color:var(--text-muted)}.navigation{padding:16px 20px 36px;display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:10;background:var(--bg)}.btn-back{padding:14px 20px;background:var(--white);color:var(--text-muted);border:none;border-radius:14px;font-family:DM Sans,sans-serif;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 12px #0000000f;transition:all var(--transition)}.btn-back:hover{background:#f5f5f5}.nav-hint{flex:1;text-align:center;font-size:12px;color:var(--text-muted);font-style:italic}.result{flex:1;display:flex;flex-direction:column;padding:32px 20px 24px;position:relative;z-index:1;animation:fadeUp .5s ease both}.result h2{font-family:Space Grotesk,sans-serif;font-size:24px;font-weight:700;text-align:center;margin-bottom:6px}.result-sub{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:24px}.products-list{display:flex;flex-direction:column;gap:12px;flex:1}.product-card{background:var(--white);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all var(--transition);border:2.5px solid transparent;box-shadow:var(--card-shadow);text-align:left;width:100%}.product-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4ecdc42e}.product-card.selected{border-color:var(--mint);background:linear-gradient(135deg,#e8f8f7,#e5f7f5)}.product-emoji{font-size:32px;width:56px;height:56px;border-radius:14px;background:#e8f8f7;display:flex;align-items:center;justify-content:center;flex-shrink:0}.product-info{flex:1;min-width:0}.product-info h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}.product-info p{font-size:11px;color:var(--text-muted);line-height:1.4}.product-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.tag{background:#e8f8f7;color:#666;font-size:9px;font-weight:600;padding:2px 8px;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}.tag.sensitive{background:#ffe5e5;color:var(--coral)}.check-mark{font-size:20px;color:var(--mint);font-weight:700}.no-results{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px}.result-actions{padding-top:20px;display:flex;flex-direction:column;gap:10px}.btn-secondary{width:100%;padding:16px;background:var(--white);color:var(--text);border:none;border-radius:var(--radius);font-family:DM Sans,sans-serif;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 12px #0000000f;transition:all var(--transition)}.btn-secondary:hover{background:#f5f5f5}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff8f0f7;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.loading-spinner{font-size:48px;animation:bounce 1s ease-in-out infinite}.loading-overlay p{font-size:14px;color:var(--text-muted);font-style:italic}.product-card{background:#fff;border-radius:16px;padding:14px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 12px #4ecdc414}.product-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4ecdc429;border-color:#4ecdc440}.product-card.selected{border-color:#4ecdc4;background:linear-gradient(135deg,#e8f8f7,#d0f4f1)}.pcard-emoji{font-size:28px;width:52px;height:52px;border-radius:14px;background:#f5fafa;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(78,205,196,.15)}.product-card.selected .pcard-emoji{background:linear-gradient(135deg,#4ecdc4,#3ab8b0);border-color:transparent}.product-card.selected .pcard-emoji span{filter:grayscale(1) brightness(10)}.pcard-body{flex:1;min-width:0}.pcard-title{font-size:15px;font-weight:700;color:#2d2d2d;margin-bottom:3px;line-height:1.3}.pcard-sub{font-size:12px;color:#888;line-height:1.4}.pcard-btn{background:linear-gradient(135deg,#4ecdc4,#3ab8b0);color:#fff;border:none;border-radius:10px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;flex-shrink:0;transition:all .25s ease;animation:fadeIn .3s ease}.pcard-btn:hover{transform:scale(1.05);box-shadow:0 4px 14px #4ecdc466}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.screen-result{flex:1;display:flex;flex-direction:column;padding:32px 20px 24px;position:relative;z-index:1;animation:fadeUp .5s ease both;min-height:100vh}.screen-result .deco-1,.screen-result .deco-2{display:none}.result-header{text-align:center;margin-bottom:24px}.result-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--mint, #4ECDC4);background:linear-gradient(135deg,#e8f8f7,#d0f4f1);padding:4px 14px;border-radius:50px;margin-bottom:8px;letter-spacing:.02em}.result-title{font-family:Space Grotesk,sans-serif;font-size:22px;font-weight:700;color:var(--text, #2D2D2D);margin-bottom:4px}.result-sub{font-size:12px;color:var(--text-muted, #999)}.result-hint{font-size:12px;color:var(--text-muted);text-align:center;padding:0 20px 12px;font-style:italic;animation:fadeUp .5s .3s ease both}.result-body{flex:1;overflow-y:auto}.result-grouped{display:flex;flex-direction:column;gap:14px}.routine-group{background:var(--white, #fff);border-radius:18px;overflow:hidden;box-shadow:0 4px 16px #4ecdc41a}.routine-group-header{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#e8f8f7,#d0f4f1);border-bottom:1px solid rgba(78,205,196,.12)}.routine-num{background:var(--coral, #FF6B6B);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.routine-group-label{display:flex;flex-direction:column;gap:4px}.routine-step-name{font-size:16px;font-weight:800;color:#2d2d2d;letter-spacing:.01em}.routine-step-desc{font-size:13px;font-weight:400;color:#666;line-height:1.5}.routine-group-products{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}.routine-empty{text-align:center;padding:14px 16px;font-size:12px;color:#aaa;font-style:italic}.no-match{text-align:center;padding:40px 20px;color:var(--text-muted, #999)}.no-match-icon{font-size:48px;margin-bottom:12px}.result-footer{padding-top:20px;display:flex;flex-direction:column;gap:12px;align-items:center}.result-disclaimer{font-size:11px;color:#999;text-align:center;padding:10px 16px;background:#fff9f0;border-radius:10px;border:1px solid #FFE4B5;line-height:1.5;max-width:340px}.result-restart{font-size:13px;color:var(--text-muted, #999);cursor:pointer;display:inline-block;padding:10px 20px;transition:color .2s}.result-restart:hover{color:var(--text, #2D2D2D)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff8f0fa;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loading-icon-wrap{animation:fadeUp .4s ease both}.loading-emoji{font-size:52px;line-height:1;transition:all .3s ease}.loading-emoji.bounce{animation:bounce .8s ease-in-out infinite}.loading-emoji.done{animation:none;transform:scale(1.2)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.loading-phases{display:flex;flex-direction:column;gap:10px;width:240px}.phase{display:flex;align-items:center;gap:10px;opacity:.35;transition:opacity .4s ease;transform:translate(0);transition:all .4s ease}.phase.active{opacity:1;transform:translate(0)}.phase.done{opacity:.7}.phase-num{font-family:Space Grotesk,monospace;font-size:12px;font-weight:700;width:24px;height:24px;border-radius:8px;background:#e8f8f7;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s ease}.phase.active .phase-num{background:linear-gradient(135deg,var(--mint),var(--teal));color:#fff}.phase.done .phase-num{background:var(--teal);color:#fff}.phase-label{font-size:13px;color:var(--text);font-weight:500}.loading-bar-wrap{width:240px;height:4px;background:#e8f8f7;border-radius:2px;overflow:hidden}.loading-bar-fill{height:100%;background:linear-gradient(90deg,var(--mint),var(--teal));border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}.loading-hint{font-size:12px;color:var(--text-muted);font-style:italic;animation:fadeUp .3s ease both;min-height:18px}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}