*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}#app{max-width:800px;margin:0 auto}.container{background:#fff;border-radius:16px;padding:40px;box-shadow:0 20px 60px #0000004d}.welcome-screen{text-align:center;padding:60px 20px}.welcome-screen h1{font-size:3rem;margin-bottom:30px;color:#333}.welcome-description{font-size:1.2rem;color:#555;margin-bottom:40px;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto}.btn-start{font-size:1.2rem;padding:16px 48px}.header{text-align:center;margin-bottom:30px}.header h1{color:#333;font-size:2rem;margin-bottom:10px}.progress-bar{background:#e0e0e0;height:8px;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{background:linear-gradient(90deg,#667eea,#764ba2);height:100%;transition:width .3s ease}.question-header{margin-bottom:20px}.question-title{font-size:1.5rem;color:#333;font-weight:600}.timer{display:flex;align-items:center;gap:10px}.timer-display{font-size:1.5rem;font-weight:700;font-family:Courier New,monospace;min-width:80px}.timer-display.warning{color:#f59e0b}.timer-display.danger{color:#ef4444;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.btn{padding:8px 16px;border:none;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500}.btn-stop{background:#ef4444;color:#fff;height:44px}.btn-stop:hover:not(:disabled){background:#dc2626}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:12px 32px;font-size:1rem}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn:disabled{opacity:.5;cursor:not-allowed}.input-container{margin-bottom:20px}.input-label{display:block;margin-bottom:8px;color:#555;font-weight:500}.answer-input{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .2s}.answer-input:focus{outline:none;border-color:#667eea}.answer-input:disabled{background:#f5f5f5;cursor:not-allowed}.tags-container{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;min-height:40px}.tag{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 12px;border-radius:20px;font-size:.9rem}.tag.duplicate{animation:shake .6s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}.tag-remove{background:#ffffff4d;border:none;color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;transition:background .2s}.tag-remove:hover{background:#ffffff80}.navigation{display:flex;justify-content:center;margin-top:30px;gap:10px;align-items:center}.email-container{text-align:center}.error-message{color:#ef4444;margin-top:10px;font-weight:500}.email-input{width:100%;max-width:400px;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;margin-bottom:20px}.email-input:focus{outline:none;border-color:#667eea}.btn-submit{margin-bottom:30px}.btn-next{width:11rem}.btn-wrapper{position:relative;display:inline-block;width:calc(11rem + 12px);height:56px;padding:6px;box-sizing:border-box}.progress-ring{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:1;transition:opacity .5s ease-out}.btn-wrapper.timer-complete .progress-ring{opacity:0}.progress-ring-border{fill:none;stroke:#667eea;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 1s linear}.btn-wrapper.timer-complete .btn{animation:fadeInButton .5s ease-out forwards}@keyframes fadeInButton{0%{opacity:.5}to{opacity:1}}.summary{text-align:left;margin-top:30px;padding:20px;background:#f9fafb;border-radius:8px}.summary h3{color:#333;margin-bottom:15px}.summary-item{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #e0e0e0}.summary-item:last-child{border-bottom:none}.summary-question{font-weight:600;color:#555;margin-bottom:8px}.summary-answers{display:flex;flex-wrap:wrap;gap:6px}.summary-tag{background:#e0e7ff;color:#4338ca;padding:4px 10px;border-radius:12px;font-size:.85rem}.success-message{text-align:center;padding:40px}.success-message h2{color:#10b981;margin-bottom:10px}.hint{font-size:.85rem;color:#888;margin-top:8px}@media (max-width: 600px){.container{padding:20px}.welcome-screen h1{font-size:2rem}.welcome-description{font-size:1rem;line-height:1.3}}
