*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#f8f9fa;line-height:1.6;color:#333}body{overflow-x:hidden}.mode-selection{display:none;justify-content:center;align-items:center;min-height:100vh;background:#f8f9fa;position:relative;transform:scale(1.1);transform-origin:center center}.mode-card{background:#fff;border-radius:25px;padding:60px 40px;text-align:center;box-shadow:0 25px 50px #00000026;max-width:700px;width:90%;min-height:500px;position:relative;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.mode-card h1{color:#000;margin-bottom:40px;font-size:2.8em;font-weight:700}.mode-card p{font-size:1.2em;color:#666;margin-bottom:20px}.mode-buttons{display:flex;flex-direction:column;gap:30px;margin-top:40px}.mode-btn{padding:25px 40px;font-size:1.4em;font-weight:700;border:none;border-radius:20px;cursor:pointer;background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;transition:all .3s ease;box-shadow:0 8px 20px #4caf504d;position:relative;overflow:hidden}.mode-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.mode-btn:hover:before{left:100%}.mode-btn:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 30px #4caf5066}.mode-btn.qa-mode{background:linear-gradient(45deg,#2196f3,#1976d2);box-shadow:0 8px 20px #2196f34d}.mode-btn.qa-mode:hover{box-shadow:0 15px 30px #2196f366}.mode-btn small{display:block;font-size:.7em;opacity:.9;margin-top:5px}.user-form{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f8f9fa;position:relative;transform:scale(1.1);transform-origin:center center}.form-card{background:#fff;border-radius:25px;padding:60px 40px;text-align:center;box-shadow:0 25px 50px #00000026;max-width:600px;width:90%;min-height:450px;animation:fadeInUp .8s ease-out}.form-card h2{color:#333;margin-bottom:20px;font-size:2.2em}.form-card p{color:#666;margin-bottom:30px;font-size:1.1em}.form-group{margin-bottom:30px;text-align:left}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#333;font-size:1.1em}.form-group input{width:100%;padding:18px;border:2px solid #e0e0e0;border-radius:12px;font-size:1.1em;transition:all .3s ease;background:#fafafa}.form-group input:focus{outline:none;border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.submit-btn{width:100%;padding:18px;background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;border-radius:12px;font-size:1.3em;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 20px #4caf504d}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 12px 25px #4caf5066}.home-btn{position:fixed;top:6px;right:14px;background:linear-gradient(45deg,#ff6b6b,#ff5252);color:#fff;border:none;border-radius:50px;padding:8px 14px;font-size:1em;font-weight:400;cursor:pointer;box-shadow:0 8px 20px #ff6b6b4d;transition:all .3s ease;z-index:1000;display:none}.home-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 25px #ff6b6b66}.home-btn i{margin-right:8px}.logout-btn{position:fixed;top:20px;right:20px;background:linear-gradient(45deg,#f44336,#d32f2f);color:#fff;border:none;border-radius:50px;padding:12px 20px;font-size:1em;font-weight:600;cursor:pointer;box-shadow:0 8px 20px #f443364d;transition:all .3s ease;z-index:1000;display:none}.logout-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 25px #f4433666}.logout-btn i{margin-right:8px}.logout-container{margin-top:40px;text-align:center}.logout-btn-home{background:linear-gradient(45deg,#f44336,#d32f2f);color:#fff;border:none;border-radius:50px;padding:12px 25px;font-size:1em;font-weight:600;cursor:pointer;box-shadow:0 8px 20px #f443364d;transition:all .3s ease}.logout-btn-home:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 25px #f4433666}.logout-btn-home i{margin-right:8px}.main-container{display:none;height:100vh;flex-direction:row;background:#f8f9fa}.sidebar{width:350px;background:linear-gradient(180deg,#2c3e50,#34495e);color:#fff;padding:25px;overflow-y:auto;box-shadow:4px 0 15px #0000001a}.sidebar h3{margin-bottom:25px;text-align:center;padding-bottom:20px;border-bottom:2px solid #34495e;font-size:1.4em;font-weight:600}.module-list{list-style:none}.module-item{background:#34495e;margin-bottom:15px;border-radius:12px;padding:0;transition:all .3s ease;border:2px solid transparent;overflow:hidden}.module-header{padding:18px;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;font-weight:600;transition:all .3s ease;min-height:60px}.module-header .module-content{display:flex;align-items:flex-start;flex:1;gap:10px}.module-header .module-text{flex:1;min-width:0;line-height:1.4}.module-header .module-controls{display:flex;align-items:center;gap:15px;margin-left:auto;flex-shrink:0}.module-header:hover{background:#ffffff0d}.module-number{background:#ffffff1a;border-radius:20px;padding:4px 12px;font-size:.9em;margin-right:10px}.module-arrow{transition:transform .3s ease;font-size:1.2em;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#fffc}.module-arrow.expanded{transform:rotate(90deg)}.module-arrow:before{content:"›";font-size:18px;font-weight:700}.module-questions{display:none;padding:0 18px 18px;background:#0000001a}.question-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:8px;font-size:.9em;display:flex;justify-content:space-between;align-items:center;gap:8px}.question-number{min-width:30px;font-weight:600;color:#ffffffe6;font-size:.85em}.training-question-number{font-weight:600;color:#333;font-size:.95em}.question-text{flex:1;opacity:.8}.question-status{margin-left:10px;font-size:1.1em;display:flex;align-items:center;justify-content:center}.module-item.active{background:#3498db;border-color:#2980b9;box-shadow:0 5px 15px #3498db4d}.module-item.completed{background:linear-gradient(45deg,#27ae60,#2ecc71);border-color:#27ae60}.module-item.completed .module-header{background:#ffffff1a}.progress-indicator{font-size:1.2em;margin-left:10px}.progress-circle{display:inline-block;width:30px;height:30px;border:2px solid rgba(255,255,255,.5);border-radius:50%;text-align:center;line-height:26px;font-size:9px;font-weight:700;transition:all .3s ease;background:#0003;color:#fff}.progress-circle.completed{background:#4caf50;border-color:#4caf50;color:#fff}.progress-circle.in-progress{background:#ff9800;border-color:#ff9800;color:#fff}.question-circle{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-radius:50%;text-align:center;line-height:8px;font-size:8px;transition:all .3s ease}.question-circle.completed{background:#4caf50;border-color:#4caf50;color:#fff}.question-circle.could-be-better{background:#ff9800;border-color:#ff9800;color:#fff}.question-circle.failed{background:#f44336;border-color:#f44336;color:#fff}.chat-area{flex:1;display:flex;flex-direction:column;background:#fff}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:25px;box-shadow:0 2px 10px #0000001a}.chat-header h2{margin-bottom:15px;font-size:1.8em;font-weight:600}.session-info{display:flex;gap:25px;font-size:.95em;opacity:.9}.status-indicator{width:12px;height:12px;border-radius:50%;background:#ffffff4d;display:inline-block;margin-right:8px}.status-indicator.listening{background:#4caf50;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.chat-container{flex:1;padding:25px;overflow-y:auto;background:#f8f9fa}.message{margin-bottom:20px;padding:18px;border-radius:18px;max-width:85%;word-wrap:break-word;animation:messageSlideIn .3s ease-out}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.bot-message{background:linear-gradient(135deg,#e3f2fd,#f3e5f5);border-left:4px solid #2196f3;margin-right:15%;box-shadow:0 2px 8px #2196f31a}.user-message{background:linear-gradient(135deg,#e8f5e8,#f1f8e9);border-right:4px solid #4caf50;margin-left:15%;text-align:right;box-shadow:0 2px 8px #4caf501a}.chat-controls{background:#fff;padding:25px;border-top:1px solid #e0e0e0;box-shadow:0 -2px 10px #0000000d}.control-buttons{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap}.btn{padding:14px 22px;border:none;border-radius:25px;cursor:pointer;font-weight:600;font-size:.95em;transition:all .3s ease;box-shadow:0 4px 12px #0000001a}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000026}.btn-start{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff}.btn-stop{background:linear-gradient(45deg,#f44336,#d32f2f);color:#fff}.btn-pause{background:linear-gradient(45deg,#ff9800,#f57c00);color:#fff}.btn-end{background:linear-gradient(45deg,#9e9e9e,#757575);color:#fff}.btn-speech{background:linear-gradient(45deg,#673ab7,#5e35b1);color:#fff}.btn-speech-active{background:linear-gradient(45deg,#e91e63,#c2185b);color:#fff;animation:speechPulse 2s infinite}@keyframes speechPulse{0%,to{box-shadow:0 4px 12px #e91e634d}50%{box-shadow:0 6px 20px #e91e6399}}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 768px){.main-container{flex-direction:column}.sidebar{width:100%;height:auto;max-height:40vh}.mode-card,.form-card{margin:20px;padding:40px 30px}.control-buttons{justify-content:center}.btn{flex:1;min-width:120px}}.loading{opacity:.7;pointer-events:none}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-in-left{animation:slideInLeft .5s ease-out}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.hidden{display:none!important}.text-center{text-align:center}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.status-indicator.recording{background-color:#e74c3c;animation:pulse 1s infinite}.status-indicator.ready{background-color:#27ae60}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.btn.recording{background-color:#e74c3c!important;animation:pulse 1s infinite}.welcome-message{text-align:center;padding:30px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:15px;margin-bottom:20px;border:1px solid #e3e3e3}.welcome-message i{font-size:3rem;color:#2196f3;margin-bottom:15px}.welcome-message p{color:#666;font-size:1.1rem;line-height:1.6}.btn-push-to-talk.listening{box-shadow:0 0 12px 4px #ff525299;animation:pulse 1s infinite}.btn-push-to-talk{background-color:#f44336;color:#fff;border:none;padding:18px 20px;font-size:18px;border-radius:8px;transition:background-color .2s ease,transform .1s ease;height:66px;min-width:130px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}.mobile-header{display:none;background:#2c3e50;padding:10px 20px}.hamburger{font-size:24px;color:#fff;background:none;border:none;cursor:pointer;z-index:1002;position:relative}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;z-index:999}.overlay.visible{display:block}@media (max-width: 768px){.mobile-header{display:flex;justify-content:flex-start;align-items:center}.main-container{flex-direction:column;overflow-x:hidden}.sidebar{position:fixed;top:0;left:-100%;width:75%;max-width:320px;height:100vh;max-height:100vh;overflow-y:auto;z-index:1001;background:#2c3e50;transition:left .3s ease-in-out}.sidebar.open{left:0}.chat-area{width:100%;z-index:0}}.category-badge,.quiz-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:.9em;font-weight:600;margin-bottom:10px}.category-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.quiz-badge{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;box-shadow:0 2px 8px #f5576c4d;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.quiz-module-text{color:#f5576c;font-weight:600;margin-left:0}.module-content:has(.quiz-module-text){padding-left:12px}.quiz-module-note{padding:12px 15px;background:linear-gradient(135deg,#f093fb1a,#f5576c1a);border-left:3px solid #f5576c;color:#666;font-size:.85em;font-style:italic;margin:10px 0;border-radius:4px}.quiz-module-note i{margin-right:8px;color:#f5576c}.mcq-question{background:#fff;border-radius:12px;padding:20px;margin:15px 0;box-shadow:0 2px 8px #0000001a}.mcq-question .question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px}.mcq-question .question-counter{font-size:.9em;color:#666;font-weight:500}.mcq-question .question-text{font-size:1.1em;color:#333;margin-bottom:20px;line-height:1.6}.mcq-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.mcq-option{display:flex;align-items:center;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;background:#fafafa}.mcq-option:hover{border-color:#f093fb;background:#fff;transform:translate(5px)}.mcq-option input[type=radio]{margin-right:12px;width:20px;height:20px;cursor:pointer}.mcq-option label{flex:1;cursor:pointer;font-size:1em;color:#333;line-height:1.5}.mcq-option .option-label{font-weight:700;color:#f093fb;margin-right:8px}.mcq-option.correct{border-color:#4caf50;background:#e8f5e9}.mcq-option.incorrect{border-color:#f44336;background:#ffebee}.mcq-option.correct label{color:#2e7d32}.mcq-option.incorrect label{color:#c62828}.btn-submit-mcq{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;padding:14px 32px;font-size:1.1em;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #f093fb4d;width:100%}.btn-submit-mcq:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f093fb66}.btn-submit-mcq:active{transform:translateY(0)}.btn-submit-mcq:disabled{background:#ccc;cursor:not-allowed;box-shadow:none}.mcq-result{margin-top:15px;padding:15px;border-radius:8px;font-size:1em;font-weight:600;text-align:center}.mcq-result.correct{background:#e8f5e9;color:#2e7d32;border:2px solid #4caf50}.mcq-result.incorrect{background:#ffebee;color:#c62828;border:2px solid #f44336}.quiz-final-result{background:#fff;border-radius:12px;padding:30px;margin:20px 0;text-align:center;box-shadow:0 4px 16px #00000026}.quiz-final-result h3{font-size:1.8em;margin-bottom:20px;background:linear-gradient(135deg,#f093fb,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.quiz-final-result p{font-size:1.2em;margin:10px 0;color:#333}.quiz-final-result.passed{border:3px solid #4caf50}.quiz-final-result.failed{border:3px solid #f44336}@media (max-width: 768px){.mcq-question{padding:15px}.mcq-question .question-text{font-size:1em}.mcq-option{padding:12px}.mcq-option label{font-size:.95em}.btn-submit-mcq{padding:12px 24px;font-size:1em}.quiz-final-result{padding:20px}.quiz-final-result h3{font-size:1.5em}.quiz-final-result p{font-size:1em}}