/*!/wp-content/plugins/phongthuviet-ear-training/assets/css/autotool-styles.css*/#autotool-app *{margin:0;padding:0;box-sizing:border-box}#autotool-app{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);min-height:100vh;color:#333;overflow-x:hidden}#autotool-app::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgb(120 119 198 / .3) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgb(255 119 198 / .3) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgb(120 219 255 / .3) 0%,transparent 50%);animation:backgroundFloat 20s ease-in-out infinite;z-index:-1}@keyframes backgroundFloat{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.8;transform:translateY(-20px)}}#autotool-app .container{max-width:1400px;margin:0 auto;padding:20px}#autotool-app header{background:rgb(255 255 255 / .95);backdrop-filter:blur(20px);border-radius:25px;padding:30px;margin-bottom:30px;box-shadow:0 20px 60px rgb(0 0 0 / .1);border:1px solid rgb(255 255 255 / .3);position:relative;overflow:hidden}#autotool-app header::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .4),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{left:-100%}100%{left:100%}}#autotool-app .header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:25px;position:relative;z-index:1}#autotool-app .logo-section{display:flex;align-items:center;gap:20px}#autotool-app .logo-icon{width:80px;height:80px;background:linear-gradient(45deg,#667eea,#764ba2,#f093fb);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:40px;animation:logoFloat 3s ease-in-out infinite;box-shadow:0 10px 30px rgb(102 126 234 / .3)}@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(5deg)}}#autotool-app .logo-text h1{color:#1e3c72;font-size:2.8em;font-weight:800;margin:0;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}#autotool-app .logo-text p{color:#666;font-size:1.1em;margin:8px 0 0 0}#autotool-app .user-stats{display:flex;gap:15px;align-items:center;flex-wrap:wrap}#autotool-app .stat-card{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:15px 25px;border-radius:20px;text-align:center;min-width:120px;position:relative;overflow:hidden;transition:all 0.3s ease}#autotool-app .stat-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgb(102 126 234 / .4)}#autotool-app .stat-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgb(255 255 255 / .3) 0%,transparent 70%);animation:statGlow 2s ease-in-out infinite alternate}@keyframes statGlow{0%{opacity:.5}100%{opacity:1}}#autotool-app .stat-value{font-size:1.8em;font-weight:700;position:relative;z-index:1}#autotool-app .stat-label{font-size:.9em;opacity:.9;position:relative;z-index:1}#autotool-app .login-container{display:flex;justify-content:center;align-items:center;min-height:70vh}#autotool-app .login-form{background:rgb(255 255 255 / .95);backdrop-filter:blur(20px);border-radius:30px;padding:60px;text-align:center;box-shadow:0 30px 80px rgb(0 0 0 / .15);max-width:500px;width:100%;border:1px solid rgb(255 255 255 / .3);position:relative;overflow:hidden}#autotool-app .login-form::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#667eea);background-size:300% 100%;animation:gradientMove 3s ease infinite}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}#autotool-app .btn{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:18px 35px;border:none;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.4s ease;margin:12px;min-width:160px;position:relative;overflow:hidden}#autotool-app .btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .4),transparent);transition:left 0.5s}#autotool-app .btn:hover::before{left:100%}#autotool-app .btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 15px 35px rgb(102 126 234 / .4)}#autotool-app .btn.secondary{background:linear-gradient(45deg,#4ecdc4,#44a08d)}#autotool-app .btn.danger{background:linear-gradient(45deg,#e74c3c,#c0392b)}#autotool-app .games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:30px;margin-top:40px}#autotool-app .game-card{background:rgb(255 255 255 / .95);backdrop-filter:blur(20px);border-radius:25px;padding:35px;box-shadow:0 20px 60px rgb(0 0 0 / .1);transition:all 0.4s ease;cursor:pointer;position:relative;overflow:hidden;border:1px solid rgb(255 255 255 / .3)}#autotool-app .game-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}#autotool-app .game-card:hover::before{transform:scaleX(1)}#autotool-app .game-card:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 30px 80px rgb(0 0 0 / .2)}#autotool-app .game-icon{width:100px;height:100px;margin:0 auto 25px;background:linear-gradient(45deg,#667eea,#764ba2);border-radius:25px;display:flex;align-items:center;justify-content:center;font-size:50px;color:#fff;animation:iconFloat 4s ease-in-out infinite}@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-5px) rotate(3deg)}75%{transform:translateY(5px) rotate(-3deg)}}#autotool-app .game-title{color:#1e3c72;font-size:1.6em;font-weight:700;margin-bottom:15px;text-align:center}#autotool-app .game-description{color:#666;line-height:1.6;margin-bottom:25px;text-align:center}#autotool-app .progress-ring{display:flex;justify-content:center;margin:25px 0}#autotool-app .progress-circle{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 5px;font-weight:700;font-size:.9em;position:relative;overflow:hidden}#autotool-app .progress-circle.completed{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff;animation:completedPulse 2s ease-in-out infinite alternate}#autotool-app .progress-circle.current{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;animation:currentBeat 1.5s ease-in-out infinite}#autotool-app .progress-circle.locked{background:#e1e5e9;color:#999}@keyframes completedPulse{0%{box-shadow:0 0 0 0 rgb(78 205 196 / .7)}100%{box-shadow:0 0 0 10px #fff0}}@keyframes currentBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}#autotool-app .training-interface{background:rgb(255 255 255 / .95);backdrop-filter:blur(20px);border-radius:30px;padding:45px;margin-top:30px;box-shadow:0 30px 80px rgb(0 0 0 / .15);border:1px solid rgb(255 255 255 / .3);position:relative;overflow:hidden}#autotool-app .training-interface::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);background-size:300% 100%;animation:progressFlow 3s linear infinite}@keyframes progressFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}#autotool-app .training-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;flex-wrap:wrap;gap:25px}#autotool-app .training-title{color:#1e3c72;font-size:2.2em;font-weight:700}#autotool-app .training-stats{display:flex;gap:20px;align-items:center;flex-wrap:wrap}#autotool-app .stat-badge{background:linear-gradient(45deg,#f093fb,#f5576c);color:#fff;padding:12px 20px;border-radius:20px;font-weight:600;display:flex;align-items:center;gap:8px;animation:badgeGlow 3s ease-in-out infinite alternate}@keyframes badgeGlow{0%{box-shadow:0 0 0 0 rgb(240 147 251 / .7)}100%{box-shadow:0 0 0 8px #fff0}}#autotool-app .question-container{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:20px;padding:40px;margin-bottom:35px;position:relative;overflow:hidden;border:2px solid rgb(102 126 234 / .1)}#autotool-app .question-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(transparent,rgb(102 126 234 / .1),transparent);animation:rotate 20s linear infinite;z-index:0}@keyframes rotate{100%{transform:rotate(360deg)}}#autotool-app .question-content{position:relative;z-index:1}#autotool-app .question-text{font-size:1.2em;color:#333;margin-bottom:30px;text-align:center;font-weight:600;line-height:1.8;white-space:pre-line;max-width:800px;margin-left:auto;margin-right:auto;padding:15px 20px;background:rgb(102 126 234 / .05);border-radius:15px;border-left:4px solid #667eea}#autotool-app .audio-comparison{display:flex;justify-content:center;gap:40px;margin:40px 0;flex-wrap:wrap}#autotool-app .audio-control{text-align:center;background:#fff;padding:30px;border-radius:20px;box-shadow:0 15px 40px rgb(0 0 0 / .1);min-width:180px;position:relative;overflow:hidden;transition:all 0.3s ease}#autotool-app .audio-control:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgb(0 0 0 / .15)}#autotool-app .audio-btn{width:100px;height:100px;border:none;border-radius:50%;font-size:40px;cursor:pointer;margin:0 auto 20px;transition:all 0.4s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}#autotool-app .audio-btn.original{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff}#autotool-app .audio-btn.processed{background:linear-gradient(45deg,#f093fb,#f5576c);color:#fff}#autotool-app .audio-btn:hover{transform:scale(1.1)}#autotool-app .audio-btn.playing{animation:audioPlaying 1s ease-in-out infinite}@keyframes audioPlaying{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgb(102 126 234 / .7)}50%{transform:scale(1.1);box-shadow:0 0 0 20px #fff0}}#autotool-app .answer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:30px 0}#autotool-app .answer-option{background:#fff;border:3px solid #e1e5e9;border-radius:15px;padding:20px 15px;cursor:pointer;transition:all 0.3s ease;text-align:center;font-weight:600;position:relative;overflow:hidden}#autotool-app .answer-option::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(102 126 234 / .1),transparent);transition:left 0.3s}#autotool-app .answer-option:hover::before{left:100%}#autotool-app .answer-option:hover{border-color:#667eea;transform:translateY(-3px);box-shadow:0 10px 25px rgb(102 126 234 / .2)}#autotool-app .answer-option.selected{border-color:#667eea;background:rgb(102 126 234 / .1);transform:scale(1.05)}#autotool-app .answer-option.correct{border-color:#4ecdc4;background:rgb(78 205 196 / .2);animation:correctAnswer 0.6s ease-in-out}#autotool-app .answer-option.close{border-color:#f39c12;background:rgb(243 156 18 / .2);animation:closeAnswer 0.6s ease-in-out}#autotool-app .answer-option.incorrect{border-color:#e74c3c;background:rgb(231 76 60 / .2);animation:incorrectAnswer 0.6s ease-in-out}@keyframes celebrationBounce{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes scorePositive{0%{transform:scale(1)}50%{transform:scale(1.2);box-shadow:0 0 20px rgb(39 174 96 / .6)}100%{transform:scale(1)}}@keyframes scoreNegative{0%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-5px)}100%{transform:translateX(0)}}#autotool-app .answer-option.hint{border:3px dashed #9b59b6;background:rgb(155 89 182 / .1);position:relative}#autotool-app .answer-option.hint::after{content:'💡';position:absolute;top:-5px;right:-5px;background:#9b59b6;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}#autotool-app .answer-option.disabled{opacity:.5;pointer-events:none}@keyframes correctAnswer{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes closeAnswer{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes incorrectAnswer{0%,25%,50%,75%,100%{transform:translateX(0)}12.5%,37.5%,62.5%,87.5%{transform:translateX(-5px)}}#autotool-app .frequency-visualizer{margin:30px 0;text-align:center}#autotool-app .frequency-bars{display:flex;justify-content:center;align-items:end;height:200px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;padding:20px;gap:8px;margin:20px 0;position:relative;overflow:hidden}#autotool-app .frequency-bars::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);animation:waveflow 2s ease-in-out infinite}@keyframes waveflow{0%,100%{opacity:.3}50%{opacity:1}}#autotool-app .freq-bar{width:25px;background:linear-gradient(to top,#667eea,#764ba2);border-radius:5px 5px 0 0;transition:all 0.3s ease;position:relative}#autotool-app .freq-bar.active{background:linear-gradient(to top,#f093fb,#f5576c);animation:barPulse 1.5s ease-in-out infinite}@keyframes barPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2)}}#autotool-app .progress-tracker{background:rgb(255 255 255 / .9);border-radius:20px;padding:25px;margin:30px 0;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 30px rgb(0 0 0 / .1)}#autotool-app .progress-bar-container{flex:1;margin:0 20px}#autotool-app .progress-bar-bg{height:8px;background:#e1e5e9;border-radius:10px;overflow:hidden;position:relative}#autotool-app .progress-bar-fill{height:100%;background:linear-gradient(90deg,#4ecdc4,#44a08d);border-radius:10px;transition:width 0.5s ease;position:relative}#autotool-app .progress-bar-fill::after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .6),transparent);animation:progressShine 2s ease-in-out infinite}@keyframes progressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}#autotool-app .result-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(10px)}#autotool-app .popup-content{background:#fff;padding:60px;border-radius:30px;text-align:center;max-width:600px;width:90%;box-shadow:0 30px 80px rgb(0 0 0 / .3);position:relative;overflow:hidden}#autotool-app .popup-content::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#4ecdc4,#667eea,#f093fb);animation:resultGlow 2s ease-in-out infinite}@keyframes resultGlow{0%,100%{opacity:.5}50%{opacity:1}}#autotool-app .result-icon{font-size:100px;margin-bottom:25px;animation:resultIcon 0.8s ease-out}@keyframes resultIcon{0%{transform:scale(0) rotate(180deg);opacity:0}100%{transform:scale(1) rotate(0deg);opacity:1}}#autotool-app .result-score{font-size:3.5em;font-weight:700;margin:25px 0;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}@media (max-width:768px){#autotool-app .container{padding:15px}#autotool-app .header-content{flex-direction:column;text-align:center}#autotool-app .games-grid{grid-template-columns:1fr}#autotool-app .audio-comparison{flex-direction:column;align-items:center}#autotool-app .answer-grid{grid-template-columns:repeat(2,1fr)}#autotool-app .training-header{flex-direction:column;text-align:center}#autotool-app .logo-text h1{font-size:2.2em}#autotool-app .login-form{padding:40px}}#autotool-app .hidden{display:none}#autotool-app .fade-in{animation:fadeIn 0.8s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}#autotool-app .nav-bar-games{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:40px;flex-wrap:wrap}#autotool-app .nav-bar-games .games-title{text-align:center;color:#fff;font-size:2.8em;text-shadow:0 5px 15px rgb(0 0 0 / .3);flex-shrink:0;margin:0;padding:0 10px}#autotool-app .nav-panel{display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:16px;text-decoration:none;color:#fff;font-weight:600;font-size:.95em;transition:all 0.3s ease;backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .25);white-space:nowrap;min-width:180px;justify-content:center;text-align:center}#autotool-app .nav-panel-left{background:linear-gradient(135deg,rgb(30 60 114 / .85),rgb(42 82 152 / .85));box-shadow:0 8px 25px rgb(30 60 114 / .3)}#autotool-app .nav-panel-left:hover{background:linear-gradient(135deg,#1e3c72,#2a5298);transform:translateY(-3px);box-shadow:0 12px 35px rgb(30 60 114 / .45)}#autotool-app .nav-panel-right{background:linear-gradient(135deg,rgb(231 76 60 / .85),rgb(192 57 43 / .85));box-shadow:0 8px 25px rgb(231 76 60 / .3)}#autotool-app .nav-panel-right:hover{background:linear-gradient(135deg,#e74c3c,#c0392b);transform:translateY(-3px);box-shadow:0 12px 35px rgb(231 76 60 / .45)}#autotool-app .nav-icon{font-size:1.4em;flex-shrink:0}#autotool-app .nav-label{line-height:1.3;white-space:normal}@media (max-width:1200px){#autotool-app .nav-bar-games{flex-direction:column;gap:12px}#autotool-app .nav-bar-games .games-title{order:-1;font-size:2.2em;margin-bottom:5px}#autotool-app .nav-panel{width:100%;max-width:420px;white-space:normal}}