.tutorial-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;animation:.3s ease-in-out fadeInTutorial}@keyframes fadeInTutorial{from{opacity:0}to{opacity:1}}.tutorial-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6)}.tutorial-popup{position:relative;z-index:10000;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-width:500px;width:90%;animation:.4s cubic-bezier(.34,1.56,.64,1) popInTutorial;overflow:hidden}@keyframes popInTutorial{from{transform:scale(.7) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.tutorial-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;padding:24px;display:flex;align-items:flex-start;gap:16px;position:relative}.tutorial-icon{font-size:32px;flex-shrink:0;animation:.6s ease-in-out iconBounce}@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.tutorial-header h3{margin:0;font-size:20px;font-weight:600;flex:1}.tutorial-close{background:0 0;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;transition:.2s}.tutorial-close:hover{transform:rotate(90deg);opacity:.8}.tutorial-body{padding:24px;font-size:15px;color:#2c3e50;line-height:1.6}.tutorial-body p{margin:0}.tutorial-footer{padding:16px 24px;background:#f8f9fa;border-top:1px solid #e0e6ed;display:flex;gap:12px;justify-content:flex-end}.tutorial-next,.tutorial-skip-all{padding:10px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}.tutorial-skip-all{background:#ecf0f1;color:#2c3e50}.tutorial-skip-all:hover{background:#d5dbde;transform:translateY(-2px)}.tutorial-next{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff}.tutorial-next:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(102,126,234,.4)}.tutorial-highlight{position:relative;z-index:9998;border-radius:8px;box-shadow:0 0 0 8px rgba(102,126,234,.3);animation:2s ease-in-out infinite pulseHighlight}@keyframes pulseHighlight{0%,100%{box-shadow:0 0 0 8px rgba(102,126,234,.3)}50%{box-shadow:0 0 0 12px rgba(102,126,234,.15)}}.tutorial-help-btn{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;border:none;font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(102,126,234,.4);transition:.3s;z-index:999;display:flex;align-items:center;justify-content:center}.tutorial-help-btn:hover{transform:scale(1.1) translateY(-4px);box-shadow:0 12px 32px rgba(102,126,234,.5)}.tutorial-help-btn:active{transform:scale(.95)}.tutorial-help-btn::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:inherit;animation:2s ease-in-out infinite pulseButton;opacity:.3}@keyframes pulseButton{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.2);opacity:0}}@media (max-width:768px){.tutorial-popup{max-width:90%;width:100%}.tutorial-header{padding:16px}.tutorial-body{padding:16px;font-size:14px}.tutorial-footer{padding:12px 16px;flex-direction:column-reverse}.tutorial-next,.tutorial-skip-all{width:100%}.tutorial-help-btn{bottom:16px;right:16px;width:48px;height:48px;font-size:20px}}