.learn-container{max-width:900px;margin:0 auto;padding:40px 24px}@keyframes slideOutLeft{0%{transform:translate(0);opacity:1}to{transform:translate(-100%);opacity:0}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.progress-bar{display:none}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .3s ease;width:0%}.stats-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:20px}.stat-box{display:none}.stat-box.timer-box{display:flex;align-items:center;gap:8px;background:transparent;padding:8px 16px;border-radius:8px;border:none}.timer-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;opacity:.6;transition:all .2s;line-height:1;display:flex;align-items:center;justify-content:center;color:var(--text-light)}.timer-toggle-btn:hover{opacity:1;transform:scale(1.1);color:var(--text)}.timer-content{display:flex;flex-direction:column;align-items:center;transition:all .3s ease}.timer-content.hidden{opacity:0;max-width:0;overflow:hidden}.end-session-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 2px 8px #ef44444d;text-transform:uppercase;letter-spacing:.5px}.end-session-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466;background:linear-gradient(135deg,#dc2626,#b91c1c)}.stat-number{font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px}.stat-number.known{color:var(--success)}.stat-number.unsure{color:var(--warning)}.stat-number.unknown{color:var(--danger)}.stat-box.timer-box .stat-number.timer{font-size:16px;font-weight:600;color:var(--text-light);font-variant-numeric:tabular-nums;margin-bottom:0}.stat-label{font-size:14px;color:var(--text-light)}.stat-box.timer-box .stat-label{display:none}.word-container{margin-bottom:40px}.word-card-large{background:#fff;border-radius:20px;padding:60px 40px;box-shadow:0 4px 20px #00000014;border:1px solid var(--border)}.word-header{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:30px}.word-main{font-size:48px;font-weight:700;color:var(--text);margin:0}.btn-eye{background:var(--bg-light);border:1px solid var(--border);width:50px;height:50px;border-radius:50%;cursor:pointer;font-size:24px;transition:all .3s;display:flex;align-items:center;justify-content:center}.btn-eye:hover{background:var(--primary);border-color:var(--primary);transform:scale(1.1)}.word-meaning{text-align:center;margin-bottom:40px;padding:20px;background:var(--bg-light);border-radius:12px;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.word-meaning p{font-size:20px;color:var(--text);margin:0}.word-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.btn-action{padding:20px;border:2px solid;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:600}.btn-action .icon{font-size:32px}.btn-action .text{font-size:16px}.btn-know{border-color:var(--success);color:var(--success)}.btn-know:hover{background:var(--success);color:#fff;transform:translateY(-4px);box-shadow:0 6px 20px #10b9814d}.btn-unsure{border-color:var(--warning);color:var(--warning)}.btn-unsure:hover{background:var(--warning);color:#fff;transform:translateY(-4px);box-shadow:0 6px 20px #f59e0b4d}.btn-unknown{border-color:var(--danger);color:var(--danger)}.btn-unknown:hover{background:var(--danger);color:#fff;transform:translateY(-4px);box-shadow:0 6px 20px #ef44444d}.btn-action.selected{transform:scale(.95)}.btn-know.selected{background:var(--success);color:#fff}.btn-unsure.selected{background:var(--warning);color:#fff}.btn-unknown.selected{background:var(--danger);color:#fff}.control-buttons{display:none}.btn-secondary{padding:12px 24px;background:#fff;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-weight:500;transition:all .3s;color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--bg-light);border-color:var(--primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.completion-screen{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.completion-card{background:#fff;border-radius:20px;padding:60px;max-width:600px;text-align:center}.completion-card h2{font-size:36px;margin-bottom:16px;color:var(--text)}.completion-card>p{font-size:18px;color:var(--text-light);margin-bottom:40px}.completion-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}.completion-stat{padding:24px;background:var(--bg-light);border-radius:12px}.completion-number{font-size:48px;font-weight:700;margin-bottom:8px}.completion-label{font-size:14px;color:var(--text-light)}.completion-actions{display:flex;flex-direction:column;gap:12px}.completion-actions .btn-primary,.completion-actions .btn-secondary{width:100%;padding:16px;text-decoration:none;display:block}@media(max-width:768px){.stats-row{grid-template-columns:repeat(2,1fr)}.word-card-large{padding:40px 24px}.word-main{font-size:36px}.word-actions{grid-template-columns:1fr}.control-buttons{flex-direction:column}.completion-stats{grid-template-columns:1fr}}.word-explanation{margin:16px 0;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;overflow:hidden}.explanation-section{padding:12px 16px;border-bottom:1px solid #f1f5f9}.explanation-section:last-child{border-bottom:none}.explanation-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin-bottom:4px}.explanation-text{font-size:14px;color:#374151;line-height:1.55}.explanation-example .explanation-label{color:#6c63ff}.explanation-example .explanation-text{font-style:italic;color:#4b5563}.word-quiz{margin:24px 0 4px;background:linear-gradient(135deg,#9333ea14,#3b82f614);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(147,51,234,.2);border-radius:24px;padding:32px 28px;box-shadow:0 12px 48px #9333ea26,inset 0 1px #fff3;animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quiz-header{display:block;margin-bottom:20px}.quiz-question{font-size:20px;font-weight:800;background:linear-gradient(135deg,#7c3aed,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;width:100%;line-height:1.6;margin-bottom:8px}.quiz-attempts{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:2px}.attempts-label{font-size:12px;color:#6b7280;white-space:nowrap;font-weight:500}.attempt-dot{width:12px;height:12px;border-radius:50%;display:inline-block;transition:all .3s;box-shadow:0 2px 4px #0003}.dot-active{background:#fbbf24;transform:scale(1.1)}.dot-used{background:#ffffff4d}.check-badge{font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c3aed,#3b82f6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:25px;padding:8px 16px;box-shadow:0 4px 12px #7c3aed4d;text-transform:uppercase;letter-spacing:.5px}.quiz-options{display:flex;flex-direction:column;gap:14px;margin-top:20px}.quiz-option{width:100%;padding:18px 24px;text-align:left;background:#fffffff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:2px solid rgba(124,58,237,.15);border-radius:16px;font-size:16px;color:#1f2937;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;font-weight:600;box-shadow:0 4px 12px #7c3aed14;position:relative;overflow:hidden}.quiz-option:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(135deg,#7c3aed,#3b82f6);opacity:0;transition:opacity .3s}.quiz-option:hover:not(:disabled){border-color:#7c3aed;transform:translateY(-3px) scale(1.01);box-shadow:0 8px 24px #7c3aed40;background:#fff}.quiz-option:hover:not(:disabled):before{opacity:1}.quiz-option.correct{background:linear-gradient(135deg,#10b98133,#05966940);border-color:#10b981;color:#059669;font-weight:700;transform:scale(1.02);box-shadow:0 8px 24px #10b9814d}.quiz-option.correct:before{opacity:1;background:linear-gradient(135deg,#10b981,#059669);width:6px}.quiz-option.wrong{background:linear-gradient(135deg,#ef444433,#dc262640);border-color:#ef4444;color:#dc2626;font-weight:700;animation:shake .4s;box-shadow:0 8px 24px #ef44444d}.quiz-option.wrong:before{opacity:1;background:linear-gradient(135deg,#ef4444,#dc2626);width:6px}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.quiz-option:disabled{cursor:default}.quiz-feedback{margin-top:24px;padding:24px 32px;border-radius:20px;font-size:18px;font-weight:700;box-shadow:0 8px 24px #00000026;animation:feedbackBounce .6s cubic-bezier(.68,-.55,.265,1.55);text-align:center}@keyframes feedbackBounce{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}.feedback-correct{background:linear-gradient(135deg,#10b98133,#05966940);color:#059669;border:3px solid #10b981;box-shadow:0 8px 24px #10b9814d,0 0 0 4px #10b9811a}.feedback-wrong{background:linear-gradient(135deg,#ef444433,#dc262640);color:#dc2626;border:3px solid #ef4444;box-shadow:0 8px 24px #ef44444d,0 0 0 4px #ef44441a}.listen-btn-animated{width:160px;height:160px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 12px 40px #667eea80;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative}.listen-btn-animated:before{content:"";position:absolute;inset:-8px;border-radius:50%;background:linear-gradient(135deg,#667eea4d,#764ba24d);z-index:-1;opacity:0;transition:opacity .4s}.listen-btn-animated:hover{transform:scale(1.1);box-shadow:0 16px 50px #667eeab3}.listen-btn-animated:hover:before{opacity:1}.listen-btn-animated:active{transform:scale(.95)}.listen-btn-animated.playing{animation:pulse-listening 1.2s ease-in-out infinite}@keyframes pulse-listening{0%{box-shadow:0 12px 40px #667eea80;transform:scale(1)}50%{box-shadow:0 16px 60px #667eeacc,0 0 0 15px #667eea1a;transform:scale(1.05)}to{box-shadow:0 12px 40px #667eea80;transform:scale(1)}}.listening-input{width:100%;padding:22px 26px;border-radius:14px;border:3px solid transparent;background:#fff;color:#1f2937;font-size:20px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;font-weight:600;letter-spacing:.3px}.listening-input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f633,0 4px 20px #3b82f64d;transform:scale(1.02)}.listening-input::placeholder{color:#9ca3af;font-weight:500}.listening-submit{width:100%;padding:20px 28px;border-radius:16px;border:none;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-weight:800;cursor:pointer;font-size:18px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;box-shadow:0 6px 20px #10b98166;text-transform:uppercase;letter-spacing:.5px}.listening-submit:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 30px #10b98199;background:linear-gradient(135deg,#059669,#047857)}.listening-submit:active{transform:translateY(-2px) scale(1.01)}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease}.modal-card{background:#fff;border-radius:24px;padding:48px 40px;max-width:450px;width:90%;text-align:center;box-shadow:0 24px 64px #0000004d;animation:slideUp .4s cubic-bezier(.4,0,.2,1)}.modal-icon{width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.modal-title{font-size:28px;font-weight:800;color:#1f2937;margin-bottom:16px}.modal-text{font-size:16px;color:#6b7280;line-height:1.6;margin-bottom:32px}.modal-actions{display:flex;gap:12px}.modal-btn{flex:1;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;border:none}.modal-btn-cancel{background:#f3f4f6;color:#6b7280}.modal-btn-cancel:hover{background:#e5e7eb;transform:translateY(-2px)}.modal-btn-confirm{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 12px #ef44444d}.modal-btn-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ef444466}.streak-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:10001;animation:fadeInOverlay .4s ease;cursor:pointer}@keyframes fadeInOverlay{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.streak-overlay.fade-out{animation:fadeOutOverlay .5s ease forwards}@keyframes fadeOutOverlay{to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}.streak-card{background:linear-gradient(135deg,#ff6b6b,#ff8e53);border-radius:32px;padding:60px 50px;text-align:center;box-shadow:0 30px 80px #ff6b6b80;animation:streakBounce .6s cubic-bezier(.68,-.55,.265,1.55);max-width:400px;width:90%}@keyframes streakBounce{0%{transform:scale(.3) rotate(-10deg);opacity:0}50%{transform:scale(1.1) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.streak-flame{font-size:100px;animation:flamePulse 1.5s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(255,140,0,.8))}@keyframes flamePulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.streak-count{font-size:72px;font-weight:900;color:#fff;margin:20px 0 10px;text-shadow:0 4px 20px rgba(0,0,0,.3);animation:countUp .5s ease-out .3s backwards}@keyframes countUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.streak-text{font-size:32px;font-weight:800;color:#fff;margin-bottom:20px;text-shadow:0 2px 10px rgba(0,0,0,.2);animation:countUp .5s ease-out .4s backwards}.streak-message{font-size:16px;font-weight:600;color:#fffffff2;line-height:1.6;max-width:300px;margin:0 auto;animation:countUp .5s ease-out .5s backwards}
