:root{--red:#c41e2a;--red-dark:#9b1520;--red-light:#e8323f;--red-glow:#c41e2a66;--yellow:#f5c518;--yellow-light:#ffd84d;--yellow-glow:#f5c51866;--white:#fff;--off-white:#fff9f0;--cream:#fff3e0;--text-dark:#2d1b0e;--text-mid:#6b4a2e;--text-light:#a08060;--font-display:"Poppins", "Inter", sans-serif;--font-body:"Inter", "Poppins", sans-serif;--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-body);background:var(--red);color:var(--text-dark);-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}#root{z-index:1;min-height:100dvh;position:relative}.bg-pattern{z-index:0;background:linear-gradient(135deg, var(--red-dark) 0%, var(--red) 40%, var(--red-light) 100%);position:fixed;inset:0;overflow:hidden}.bg-circle{opacity:.08;background:var(--yellow);border-radius:50%;animation:20s ease-in-out infinite float-circle;position:absolute}.bg-circle:first-child{width:300px;height:300px;animation-duration:18s;animation-delay:0s;top:-80px;left:-60px}.bg-circle:nth-child(2){width:200px;height:200px;animation-duration:22s;animation-delay:-5s;top:50%;right:-50px}.bg-circle:nth-child(3){width:150px;height:150px;animation-duration:25s;animation-delay:-10s;bottom:10%;left:20%}.bg-circle:nth-child(4){width:100px;height:100px;animation-duration:16s;animation-delay:-7s;top:30%;left:60%}@keyframes float-circle{0%,to{transform:translate(0)scale(1)}25%{transform:translate(30px,-40px)scale(1.1)}50%{transform:translate(-20px,20px)scale(.9)}75%{transform:translate(15px,30px)scale(1.05)}}.sparkle{background:var(--yellow);width:4px;height:4px;box-shadow:0 0 6px var(--yellow), 0 0 12px var(--yellow-glow);border-radius:50%;animation:3s ease-in-out infinite sparkle-anim;position:absolute}@keyframes sparkle-anim{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}.app-container{z-index:2;min-height:100dvh;padding:24px 16px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:center;display:flex;position:relative}.logo-wrap{perspective:600px;margin-bottom:12px}.logo-3d{width:90px;height:90px;box-shadow:0 8px 32px #0000004d, 0 0 0 4px var(--yellow), 0 0 40px var(--yellow-glow);animation:logo-entrance 1s var(--ease-bounce) both, logo-hover 4s ease-in-out 1s infinite;transform-style:preserve-3d;border-radius:50%;overflow:hidden}.logo-3d img{object-fit:cover;width:100%;height:100%}@keyframes logo-entrance{0%{opacity:0;transform:rotateY(-180deg)scale(0)}to{opacity:1;transform:rotateY(0)scale(1)}}@keyframes logo-hover{0%,to{transform:translateY(0)rotateY(0)}25%{transform:translateY(-6px)rotateY(5deg)}75%{transform:translateY(-3px)rotateY(-3deg)}}.header-title{font-family:var(--font-display);color:var(--white);text-align:center;text-shadow:0 2px 8px #0003;animation:slide-up .6s var(--ease-smooth) .3s both;font-size:24px;font-weight:700;line-height:1.3}.header-sub{color:#fffc;text-align:center;animation:slide-up .6s var(--ease-smooth) .45s both;margin-top:6px;font-size:14px;font-weight:600}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-card{background:var(--white);width:100%;max-width:400px;animation:card-entrance .7s var(--ease-bounce) .2s both;border-radius:28px;margin-top:20px;padding:28px 24px;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000026,inset 0 0 0 1px #ffffff1a}.main-card:before{content:"";background:linear-gradient(90deg, var(--red), var(--yellow), var(--red));background-size:200% 100%;height:5px;animation:3s infinite gradient-slide;position:absolute;top:0;left:0;right:0}@keyframes card-entrance{0%{opacity:0;transform:translateY(40px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes gradient-slide{0%,to{background-position:0%}50%{background-position:100%}}.step-dots{justify-content:center;gap:8px;margin-bottom:20px;display:flex}.step-dot{width:10px;height:10px;transition:all .4s var(--ease-bounce);background:#e8e0d6;border-radius:50%}.step-dot.active{background:var(--red);width:28px;box-shadow:0 2px 8px var(--red-glow);border-radius:5px}.step-dot.done{background:var(--yellow);box-shadow:0 2px 6px var(--yellow-glow)}.step-tag{font-family:var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--red);background:#c41e2a14;border-radius:20px;margin-bottom:12px;padding:4px 14px;font-size:11px;font-weight:700;display:inline-block}.step-question{font-family:var(--font-display);color:var(--text-dark);text-align:center;margin-bottom:20px;font-size:21px;font-weight:700;line-height:1.3}.store-options{flex-direction:column;gap:12px;display:flex}.store-option{background:var(--off-white);cursor:pointer;transition:all .35s var(--ease-bounce);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:2.5px solid #0000;border-radius:18px;align-items:center;gap:14px;padding:16px;display:flex;position:relative;overflow:hidden}.store-option:after{content:"";opacity:0;background:linear-gradient(135deg,#c41e2a0d,#f5c5180d);transition:opacity .3s;position:absolute;inset:0}.store-option:active{transform:scale(.97)}.store-option.selected{border-color:var(--red);box-shadow:0 4px 20px var(--red-glow);background:linear-gradient(135deg,#fff5f5,#fffdf5)}.store-option.selected:after{opacity:1}.store-icon{background:linear-gradient(135deg, var(--red), var(--red-dark));width:50px;height:50px;box-shadow:0 4px 12px var(--red-glow);transition:transform .4s var(--ease-bounce);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;font-size:22px;display:flex}.store-option.selected .store-icon{transform:rotateY(360deg)}.store-info{text-align:left;flex:1}.store-name{font-family:var(--font-display);color:var(--text-dark);margin-bottom:2px;font-size:15px;font-weight:700}.store-addr{color:var(--text-mid);font-size:12px;line-height:1.4}.store-check{width:26px;height:26px;transition:all .4s var(--ease-bounce);border:2.5px solid #ddd;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;display:flex}.store-option.selected .store-check{background:var(--red);border-color:var(--red);transform:scale(1.1)}.field{margin-bottom:14px}.field-label{font-family:var(--font-display);color:var(--text-mid);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.field-input{background:var(--off-white);width:100%;font-family:var(--font-body);color:var(--text-dark);appearance:none;border:2.5px solid #ede5da;border-radius:14px;padding:14px 16px;font-size:16px;font-weight:500;transition:all .25s}.field-input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 4px #c41e2a1a}.field-input::placeholder{color:var(--text-light);font-weight:400}textarea.field-input{resize:none;min-height:100px;line-height:1.5}.employee-card{perspective:800px;margin-bottom:20px}.employee-card-inner{background:linear-gradient(145deg, var(--off-white), var(--cream));transform-style:preserve-3d;animation:card-3d-entrance .8s var(--ease-bounce) both;border-radius:22px;flex-direction:column;align-items:center;gap:10px;padding:28px 20px 22px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 30px #0000000f,0 0 0 1px #00000008}.employee-card-inner:before{content:"";background:conic-gradient(#0000 0%,#f5c51814 10%,#0000 20%);width:200%;height:200%;animation:6s linear infinite shimmer-rotate;position:absolute;top:-50%;left:-50%}@keyframes shimmer-rotate{to{transform:rotate(360deg)}}@keyframes card-3d-entrance{0%{opacity:0;transform:rotateX(30deg)translateY(30px)scale(.8)}to{opacity:1;transform:rotateX(0)translateY(0)scale(1)}}.employee-photo{background:linear-gradient(135deg, var(--red), var(--red-dark));color:#fff;width:90px;height:90px;font-family:var(--font-display);box-shadow:0 8px 24px var(--red-glow), 0 0 0 4px var(--yellow), 0 0 0 7px #f5c5184d;z-index:1;border-radius:50%;justify-content:center;align-items:center;font-size:36px;font-weight:700;animation:3s ease-in-out infinite avatar-pulse;display:flex;position:relative;overflow:hidden}.employee-photo img{object-fit:cover;width:100%;height:100%}@keyframes avatar-pulse{0%,to{box-shadow:0 8px 24px var(--red-glow), 0 0 0 4px var(--yellow), 0 0 0 7px #f5c5184d}50%{box-shadow:0 8px 24px var(--red-glow), 0 0 0 4px var(--yellow), 0 0 0 12px #f5c51826}}.employee-name{font-family:var(--font-display);color:var(--text-dark);z-index:1;font-size:22px;font-weight:700;position:relative}.employee-role-badge{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1.2px;color:var(--red);z-index:1;background:#c41e2a14;border-radius:20px;padding:4px 14px;font-size:11px;font-weight:700;position:relative}.employee-store-name{color:var(--text-light);z-index:1;font-size:12px;font-weight:500;position:relative}.emoji-rating{perspective:600px;justify-content:center;gap:4px;padding:10px 0;display:flex}.star-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease-bounce);transform-style:preserve-3d;background:0 0;border:none;flex-direction:column;flex:none;align-items:center;gap:4px;padding:0;display:flex;position:relative}.star-btn:active{transform:scale(.85)!important}.star-shape{width:56px;height:56px;transition:all .4s var(--ease-bounce);transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:relative}.star-shape svg{width:100%;height:100%;transition:all .4s var(--ease-bounce);position:absolute;inset:0}.star-shape .star-path{fill:#e8e0d6;stroke:#d5ccc0;stroke-width:1px;transition:all .4s var(--ease-bounce)}.star-btn.active .star-path,.star-btn.selected .star-path{fill:var(--yellow);stroke:#e5b300;filter:drop-shadow(0 2px 6px var(--yellow-glow))}.star-emoji{z-index:2;transition:all .4s var(--ease-bounce);filter:grayscale(.9)opacity(.4);font-size:22px;line-height:1;position:relative}.star-btn.active .star-emoji,.star-btn.selected .star-emoji{filter:grayscale(0)opacity()}.star-btn.active .star-shape{transform:scale(1.15)rotateY(360deg)}.star-btn.active .star-emoji{animation:emoji-pop .4s var(--ease-bounce)}@keyframes emoji-pop{0%{transform:scale(.5)}50%{transform:scale(1.4)}to{transform:scale(1)}}.star-label{font-family:var(--font-display);color:var(--text-light);white-space:nowrap;transition:all .3s var(--ease-bounce);opacity:0;font-size:9px;font-weight:700;transform:translateY(-4px)}.star-btn.active .star-label{opacity:1;color:var(--red);transform:translateY(0)}.rating-feedback{text-align:center;font-family:var(--font-display);min-height:28px;margin-top:6px;font-size:16px;font-weight:700;transition:all .3s}.rating-feedback.bad{color:#dc2626}.rating-feedback.meh{color:#f59e0b}.rating-feedback.good{color:#22c55e}.rating-feedback.great{color:var(--red)}.toggle-row{gap:10px;margin-bottom:16px;display:flex}.toggle-opt{background:var(--off-white);font-family:var(--font-display);color:var(--text-mid);cursor:pointer;transition:all .3s var(--ease-bounce);-webkit-tap-highlight-color:transparent;text-align:center;border:2.5px solid #ede5da;border-radius:14px;flex:1;padding:13px;font-size:15px;font-weight:700}.toggle-opt.on{border-color:var(--red);color:var(--red);box-shadow:0 4px 16px var(--red-glow);background:linear-gradient(135deg,#fff5f5,#fffdf5)}.toggle-opt:active{transform:scale(.96)}.btn-send{background:linear-gradient(135deg, var(--red), var(--red-dark));color:#fff;width:100%;font-family:var(--font-display);cursor:pointer;transition:all .35s var(--ease-bounce);-webkit-tap-highlight-color:transparent;box-shadow:0 6px 20px var(--red-glow);letter-spacing:.3px;border:none;border-radius:16px;margin-top:8px;padding:16px;font-size:17px;font-weight:700;position:relative;overflow:hidden}.btn-send:before{content:"";background:linear-gradient(45deg,#0000 30%,#ffffff26 50%,#0000 70%);width:200%;height:200%;animation:3s ease-in-out infinite btn-shine;position:absolute;top:-50%;left:-50%}@keyframes btn-shine{0%{transform:translate(-100%)rotate(0)}to{transform:translate(100%)rotate(0)}}.btn-send:active{box-shadow:0 3px 12px var(--red-glow);transform:scale(.97)translateY(2px)}.btn-send:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-back{color:var(--text-light);font-family:var(--font-display);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;margin-top:4px;padding:10px 20px;font-size:14px;font-weight:600}.form-footer{flex-direction:column;align-items:center;width:100%;margin-top:auto;padding-top:12px;display:flex}.thankyou-wrap{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:0 20px;display:flex}.thankyou-emoji{animation:thankyou-bounce 1s var(--ease-bounce) both;filter:drop-shadow(0 8px 16px #0003);font-size:72px}@keyframes thankyou-bounce{0%{opacity:0;transform:scale(0)rotate(-30deg)}60%{transform:scale(1.2)rotate(5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.thankyou-title{font-family:var(--font-display);color:var(--white);text-shadow:0 2px 10px #0003;font-size:28px;font-weight:700}.thankyou-text{color:#ffffffd9;max-width:300px;font-size:15px;font-weight:500;line-height:1.6}.useful-cards{flex-direction:column;gap:10px;width:100%;max-width:340px;margin-top:20px;display:flex}.useful-card{background:var(--white);transition:all .3s var(--ease-bounce);-webkit-tap-highlight-color:transparent;border:none;border-radius:16px;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;display:flex;box-shadow:0 4px 16px #00000014}.useful-card:active{transform:scale(.97);box-shadow:0 2px 8px #0000001f}.useful-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:20px;display:flex;box-shadow:0 4px 12px #00000026}.useful-info{text-align:left;flex:1}.useful-title{font-family:var(--font-display);color:var(--text-dark);font-size:14px;font-weight:700}.useful-desc{color:var(--text-mid);margin-top:1px;font-size:12px;font-weight:500}.useful-arrow{color:var(--text-light);flex-shrink:0;font-size:18px;font-weight:700;transition:transform .3s}.useful-card:hover .useful-arrow{transform:translate(4px)}.confetti-box{pointer-events:none;z-index:200;position:fixed;inset:0;overflow:hidden}.confetti-dot{animation:3.5s ease-in forwards fall-down;position:absolute;top:-20px}@keyframes fall-down{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(110vh)rotate(900deg)scale(.2)}}.spin{vertical-align:middle;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:22px;height:22px;animation:.6s linear infinite spin-anim;display:inline-block}@keyframes spin-anim{to{transform:rotate(360deg)}}.char-count{color:var(--text-light);text-align:right;margin-top:4px;font-size:11px;font-weight:500}.helper-text{color:var(--text-light);margin-top:4px;font-size:12px;font-weight:500}.mascot-wrap{pointer-events:none;z-index:3;justify-content:center;margin-top:12px;display:flex;position:relative}.mascot-video{filter:drop-shadow(0 4px 12px #00000026);width:220px;height:220px}@media (width>=480px){.header-title{font-size:28px}.logo-3d{width:100px;height:100px}.step-question{font-size:24px}.star-shape{width:64px;height:64px}.star-emoji{font-size:26px}.emoji-rating{gap:8px}.employee-photo{width:100px;height:100px;font-size:42px}}