:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{width:100%;margin:0}h1,h2,h3,h4,h5,h6{margin:0;padding:0}button{font-family:inherit}.virtual-keyboard{display:flex;flex-direction:column;gap:12px;width:100%;max-width:620px;margin:1.5rem auto;padding:20px;background-color:#e0e0e0;border-radius:16px;box-shadow:0 8px 16px #0003;box-sizing:border-box}.keyboard-row{display:flex;justify-content:center;gap:8px;width:100%}.action-row{margin-top:4px}.key-button{flex:0 0 46px;width:46px;height:54px;padding:0;font-size:1.35rem;font-family:"Baloo 2",system-ui;font-weight:700;color:#2c3e50;background-color:#fff;border:1px solid #bdc3c7;border-radius:6px!important;cursor:pointer;box-shadow:0 3px #bdc3c7;transition:transform .05s,box-shadow .05s;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;text-transform:lowercase}.key-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #bdc3c7;background-color:#f8f9fa}.key-button:disabled{opacity:.4;cursor:not-allowed}.action-key{flex:0 0 auto;min-width:70px;background-color:#bdc3c7;box-shadow:0 3px #95a5a6}.action-key:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #95a5a6;background-color:#c7ccd1}.action-key.delete{flex:0 0 60px;width:60px;font-size:1.1rem}.action-key.space{flex:0 0 200px;width:200px;font-size:1rem;text-transform:none}.bksp-icon{position:relative;width:16px;height:2px;background:#2c3e50;display:inline-block}.bksp-icon:before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;border-left:2px solid #2c3e50;border-bottom:2px solid #2c3e50;transform:translateY(-50%) rotate(45deg)}.action-row .char-key{flex:0 0 46px!important;width:46px!important;min-width:46px!important;max-width:46px!important;background-color:#fff}@media (max-width: 500px){.virtual-keyboard{padding:10px 4px;gap:6px;border-radius:0}.keyboard-row{gap:4px}.key-button{flex:0 0 32px;width:32px;height:48px;font-size:1.1rem}.action-row .char-key{flex:0 0 32px!important;width:32px!important}.action-key.space{flex:0 0 100px;width:100px}.action-key.delete{flex:0 0 44px;width:44px}}.battle-container{width:100%;max-width:650px;margin:0 auto;padding:10px 16px;box-sizing:border-box;animation:cardIn .4s ease}.battle-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 4px}.battle-title{display:flex;align-items:center;gap:8px}.battle-title-text{font-family:"Baloo 2",system-ui;font-size:1.15rem;color:#585858;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4)}.progress-pill{font-size:.95rem;color:#e0e0e0;background:#0009;padding:6px 14px;border-radius:100px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.9);border:1.5px solid rgba(255,255,255,.2);box-shadow:0 2px 6px #0006}.arena-panel{position:relative;background:linear-gradient(160deg,#2c2158,#140f2c);border-radius:20px 20px 0 0;padding:26px 20px 34px;overflow:hidden;box-shadow:0 20px 45px #140a3266}.combo-badge{position:absolute;top:14px;right:16px;background:linear-gradient(135deg,#ffb020,#ff6f3c);color:#fff;font-family:"Baloo 2",system-ui;font-weight:800;font-size:.85rem;padding:5px 12px;border-radius:100px;box-shadow:0 6px 16px #ff6e2873;animation:popIn .3s ease;z-index:10}.monster-stage{position:relative;height:200px;display:flex;align-items:center;justify-content:center}.monster-glow{position:absolute;left:50%;top:64%;width:200px;height:70px;background:radial-gradient(ellipse,rgba(255,193,74,.4),transparent 70%);transform:translate(-50%,-50%);animation:pulseGlow 2.2s ease-in-out infinite alternate}.monster-image{width:170px;height:170px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 14px 20px rgba(0,0,0,.45))}.monster-image.defeat{animation:defeatOut 1.1s ease-in-out forwards}.answer-panel{background:#fff;border-radius:0 0 20px 20px;padding:22px 22px 26px;box-shadow:0 20px 45px #140a3240;text-align:left}.answer-panel-hint{font-size:.78rem;color:#9a95b5;font-weight:700;margin-bottom:6px}.current-chinese{font-size:1.6rem;font-weight:900;color:#2b2350;font-family:"Baloo 2",system-ui;margin-bottom:16px}.damage-popup{position:absolute;z-index:5;bottom:32%;transform:translate(-50%);font-family:"Baloo 2",system-ui;font-weight:800;white-space:nowrap;pointer-events:none;animation:floatUp 1.6s ease-out forwards;text-shadow:-1px -1px 0 rgba(0,0,0,.8),1px -1px 0 rgba(0,0,0,.8),-1px 1px 0 rgba(0,0,0,.8),1px 1px 0 rgba(0,0,0,.8),0 4px 10px rgba(0,0,0,.5)}.particle{position:absolute;z-index:5;left:50%;top:56%;width:7px;height:7px;border-radius:50%;animation:particleBurst .9s ease-out forwards}.victory-card{background:#fff;border-radius:20px;padding:38px 26px;text-align:center;box-shadow:0 20px 50px #140a3259;animation:cardIn .4s ease;max-width:650px;margin:0 auto}.victory-trophy{font-size:3rem;animation:popIn .5s ease .1s both}.victory-title{font-family:"Baloo 2",system-ui;font-size:1.5rem;font-weight:800;color:#2b2350;margin:10px 0 4px}.victory-sub{color:#8a86a3;font-size:.9rem;margin-bottom:20px}.victory-stats{display:flex;justify-content:center;gap:28px;margin-bottom:24px}.stat-val{font-size:1.6rem;font-weight:800;color:#764ba2;font-family:"Baloo 2",system-ui}.stat-label{font-size:.72rem;color:#9a95b5}.btn-restart{padding:12px 30px;border:none;border-radius:100px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 8px 20px #667eea66;transition:all .2s}.btn-restart:hover{transform:translateY(-2px);filter:brightness(1.1)}.battle-score-footer{font-family:"Baloo 2",system-ui;font-size:1.15rem;color:#585858;text-align:center;margin-top:1rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.5)}.spelling-form button[type=submit]{white-space:nowrap;min-width:fit-content}.play-sound-button{padding:10px 18px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #4facfe66;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.play-sound-button:disabled{opacity:.6;cursor:not-allowed}.arena-audio-btn{position:absolute;right:15%;top:45%;z-index:10;width:54px;height:54px;padding:0;border-radius:15px;font-size:1.4rem;box-shadow:0 8px 25px #0006}@keyframes joyPulse{0%{transform:scale(1) translateY(0)}25%{transform:scale(1.1) translateY(-15px)}50%{transform:scale(1) translateY(0)}75%{transform:scale(1.1) translateY(-15px)}to{transform:scale(1) translateY(0)}}@keyframes hitShake{0%{transform:translate(0) scale(1);filter:brightness(1) saturate(1)}12%{transform:translate(-16px) scale(1.03);filter:brightness(2.4) saturate(0)}28%{transform:translate(14px) scale(.97)}44%{transform:translate(-9px)}60%{transform:translate(7px)}76%{transform:translate(-4px)}to{transform:translate(0) scale(1);filter:brightness(1) saturate(1)}}@keyframes missShake{0%{transform:translate(0)}25%{transform:translate(-10px)}50%{transform:translate(10px)}75%{transform:translate(-5px)}to{transform:translate(0)}}@keyframes floatUp{0%{transform:translate(-50%) scale(.5);opacity:0}18%{opacity:1;transform:translate(-50%,-10px) scale(1.2)}35%{transform:translate(-50%,-26px) scale(1)}to{transform:translate(-50%,-104px) scale(1);opacity:0}}@keyframes defeatOut{0%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}20%{transform:scale(1.3) rotate(-10deg);filter:brightness(3) contrast(1.5)}to{transform:scale(0) rotate(25deg);opacity:0;filter:brightness(5)}}@keyframes particleBurst{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0);opacity:0}}@keyframes pulseGlow{0%{opacity:.55;transform:translate(-50%,-50%) scale(1)}to{opacity:.9;transform:translate(-50%,-50%) scale(1.12)}}@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes cardIn{0%{transform:scale(.9) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-page{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2)}.login-container{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 10px 40px #0000004d;width:100%;max-width:450px;text-align:center}.login-container h1{font-size:2rem;margin-bottom:.5rem;color:#333}.login-container .subtitle{color:#666;margin-bottom:2rem}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-field{display:flex;flex-direction:column;text-align:left}.form-field label{font-weight:700;margin-bottom:.5rem;color:#333}.login-input{padding:.8rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s}.login-input:focus{outline:none;border-color:#667eea}.error-message{background:#ffebee;color:#c62828;padding:.8rem;border-radius:5px;font-size:.9rem}.login-button{padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s}.login-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.login-hint{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e0e0e0;text-align:left}.login-hint p{font-size:.9rem;color:#666;margin:.3rem 0}.role-selector{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.role-selector h1{font-size:3rem;margin-bottom:1rem}.role-buttons{display:flex;gap:2rem;margin-top:2rem}.role-button{padding:2rem 3rem;font-size:1.5rem;border:none;border-radius:15px;cursor:pointer;transition:all .3s;background:#fff;color:#333;box-shadow:0 5px 15px #0003}.role-button:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000004d}.app-header{background:#fff;padding:1.5rem 2rem;box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;align-items:center}.header-controls{display:flex;gap:1rem;align-items:center}.user-info{font-weight:700;color:#333;padding:.5rem 1rem;background:#f0f4ff;border-radius:5px}.wordlist-selector{display:flex;align-items:center;gap:.5rem}.wordlist-selector select{padding:.5rem;border-radius:5px;border:1px solid #ccc}.switch-role-button{padding:.5rem 1rem;background:#667eea;color:#fff;border:none;border-radius:5px;cursor:pointer}.switch-role-button:hover{background:#5568d3}.app-main{padding:2rem;max-width:1200px;margin:0 auto}.teacher-dashboard{background:#fff;border-radius:15px;padding:2rem}.upload-section,.word-lists-section,.statistics-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #eee}.help-text{color:#666;margin:1rem 0}.help-text code{background:#f4f4f4;padding:.2rem .5rem;border-radius:3px}.file-input{padding:.5rem;border:2px dashed #ccc;border-radius:5px;cursor:pointer}.word-lists{list-style:none}.word-list-item{padding:1rem;background:#f8f8f8;margin:.5rem 0;border-radius:5px;display:flex;justify-content:space-between;align-items:center}.list-info{flex:1}.list-actions{display:flex;gap:.5rem}.btn-edit,.btn-delete{padding:.5rem 1rem;border:none;border-radius:5px;cursor:pointer;font-size:.9rem;transition:all .2s}.btn-edit{background:#2196f3;color:#fff}.btn-edit:hover{background:#1976d2}.btn-delete{background:#f44336;color:#fff}.btn-delete:hover{background:#d32f2f}.upload-date{color:#999;font-size:.9rem}.edit-form{background:#f8f8f8;padding:1.5rem;border-radius:8px;margin:1rem 0}.edit-form h3,.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:700}.edit-input{width:100%;padding:.8rem;border:1px solid #ccc;border-radius:5px;font-size:1rem}.edit-textarea{width:100%;padding:.8rem;border:1px solid #ccc;border-radius:5px;font-size:.9rem;font-family:monospace}.button-group{display:flex;gap:1rem;margin-top:1rem}.btn-save,.btn-cancel{padding:.8rem 1.5rem;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:all .2s}.btn-save{background:#4caf50;color:#fff}.btn-save:hover{background:#45a049}.btn-cancel{background:#999;color:#fff}.btn-cancel:hover{background:#777}.student-info{background:#f0f4ff;padding:1rem;border-radius:8px;margin-bottom:1rem}.students-overview{display:flex;flex-direction:column;gap:1.5rem}.student-stats-card{background:#f8f8f8;padding:1.5rem;border-radius:10px;border:2px solid #e0e0e0}.student-header{margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #e0e0e0}.student-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.student-header h3{margin:0;color:#333}.student-actions{display:flex;gap:.5rem}.btn-edit-password,.btn-delete-student{padding:.5rem 1rem;border:none;border-radius:5px;cursor:pointer;font-size:.85rem;transition:all .2s}.btn-edit-password{background:#2196f3;color:#fff}.btn-edit-password:hover{background:#1976d2}.btn-delete-student{background:#f44336;color:#fff}.btn-delete-student:hover{background:#d32f2f}.password-edit-form{background:#fff3e0;padding:1.5rem;border-radius:8px;margin:1rem 0}.password-input{width:100%;padding:.8rem;border:1px solid #ccc;border-radius:5px;font-size:1rem}.student-basic-info{display:flex;gap:1rem;flex-wrap:wrap}.level-badge,.hp-info,.exp-info{padding:.4rem .8rem;border-radius:5px;font-size:.9rem;font-weight:700}.level-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.hp-info{background:#e8f5e9;color:#2e7d32}.exp-info{background:#fff3e0;color:#ef6c00}.student-test-summary{margin:1rem 0}.test-statistics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1rem}.mini-stat-card{background:#fff;padding:1rem;border-radius:8px;text-align:center;border:1px solid #e0e0e0}.mini-stat-card h5{margin-bottom:.5rem;color:#666;font-size:.9rem}.mini-stat-card .accuracy{font-size:1.5rem;font-weight:700;color:#2196f3;margin:.3rem 0}.mini-stat-card .details{font-size:.85rem;color:#999;margin:.3rem 0}.mini-progress-bar{height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden;margin-top:.5rem}.mini-progress-fill{height:100%;background:#4caf50;transition:width .3s}.word-list-statistics{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.word-list-stat-card{background:#fff;padding:1.2rem;border-radius:8px;border:1px solid #e0e0e0}.word-list-stat-card h4{margin:0 0 .8rem;color:#333;font-size:1.1rem}.word-list-stat-card .stat-info{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}.word-list-stat-card .stat-info p{margin:0;font-size:.95rem;color:#555}.difficult-words-section{margin-top:1rem;border-top:1px solid #e0e0e0;padding-top:1rem}.toggle-difficult-words{background:#fff3e0;border:1px solid #ff9800;color:#e65100;padding:.6rem 1rem;border-radius:5px;cursor:pointer;font-size:.9rem;font-weight:700;width:100%;text-align:left;transition:all .2s}.toggle-difficult-words:hover{background:#ffe0b2}.difficult-words-list{list-style:none;margin-top:.8rem;padding-left:0}.difficult-word-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem;margin-bottom:.5rem;background:#ffebee;border-radius:5px;border-left:3px solid #f44336}.difficult-word-item .word-id{font-weight:700;color:#333}.difficult-word-item .wrong-count{color:#d32f2f;font-size:.85rem}.no-stats{color:#999;font-style:italic;text-align:center;padding:1rem}.test-statistics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.stat-card{background:#f8f8f8;padding:1rem;border-radius:8px}.progress-bar{height:10px;background:#e0e0e0;border-radius:5px;overflow:hidden;margin-top:.5rem}.progress-fill{height:100%;background:#4caf50;transition:width .3s}.student-dashboard{background:#fff;border-radius:15px;padding:2rem;min-height:600px}.player-status{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;padding:1.5rem;border-radius:10px;margin-bottom:2rem}.status-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.level{font-size:1.5rem;font-weight:700;background:#fff3;padding:.3rem .8rem;border-radius:20px}.status-bars{display:flex;flex-direction:column;gap:.8rem}.status-bar{display:flex;align-items:center;gap:.5rem}.status-bar label{min-width:50px;font-weight:700}.bar-container{flex:1;height:25px;background:#0003;border-radius:12px;overflow:hidden;position:relative}.bar-fill{height:100%;transition:width .3s;display:flex;align-items:center;justify-content:center}.hp-fill{background:#4caf50}.exp-fill{background:gold}.bar-text{position:absolute;width:100%;text-align:center;font-size:.9rem;font-weight:700;top:50%;transform:translateY(-50%);text-shadow:1px 1px 2px rgba(0,0,0,.5)}.learning-area h2{margin-bottom:1.5rem}.learning-controls{display:flex;gap:1rem;margin-bottom:1.5rem}.heal-button,.start-test-button{padding:.6rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s;white-space:nowrap}.heal-button{background:#4caf50;color:#fff}.start-test-button{background:#ff6b6b;color:#fff}.heal-button:hover,.start-test-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.word-display{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.word-list{background:#f8f8f8;padding:1rem;border-radius:8px;max-height:500px;overflow-y:auto}.word-list ul{list-style:none}.word-list li{padding:.8rem;margin:.3rem 0;background:#fff;border-radius:5px;cursor:pointer;transition:all .2s}.word-list li:hover{background:#e3f2fd}.word-list li.selected{background:#2196f3!important;color:#fff!important}.word-list li.progress-correct-1{background:#c8e6c9}.word-list li.progress-correct-2{background:#81c784}.word-list li.progress-correct-3{background:#4caf50;color:#fff}.word-list li.progress-wrong-1{background:#ffcdd2}.word-list li.progress-wrong-2{background:#e57373}.word-list li.progress-wrong-3{background:#f44336;color:#fff}.word-list li.selected.progress-correct-1,.word-list li.selected.progress-correct-2,.word-list li.selected.progress-correct-3,.word-list li.selected.progress-wrong-1,.word-list li.selected.progress-wrong-2,.word-list li.selected.progress-wrong-3{background:#2196f3;color:#fff}.word-details{background:#f8f8f8;padding:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center}.word-card{text-align:center;width:100%}.word-card h3{font-size:2.5rem;margin-bottom:1rem}.play-button{padding:.8rem 1.5rem;background:#2196f3;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;margin-bottom:1.5rem;transition:all .2s}.play-button:hover:not(:disabled){background:#1976d2}.play-button:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.word-info{text-align:left;background:#fff;padding:1.5rem;border-radius:8px;margin-top:1rem}.word-info p{margin:.5rem 0;font-size:1.1rem}.chinese{font-size:1.3rem;font-weight:700}.no-selection{color:#999;font-size:1.2rem}.test-area{text-align:center}.test-progress{margin:1rem 0;font-size:1.2rem}.test-selection{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin:2rem 0}.test-button{padding:2rem;background:#fff;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;transition:all .3s;position:relative;text-align:center}.test-button h3{font-size:1.5rem;margin-bottom:.5rem;color:#333}.test-button p{font-size:1rem;color:#666;margin:0}.test-button:hover:not(:disabled){border-color:#2196f3;transform:translateY(-5px);box-shadow:0 5px 15px #0003}.test-button.completed{background:#e8f5e9;border-color:#4caf50}.test-button:disabled{cursor:not-allowed;opacity:.6}.test-button .check{position:absolute;top:10px;right:10px;font-size:2rem;color:#4caf50}.back-button{padding:.8rem 1.5rem;background:#666;color:#fff;border:none;border-radius:8px;cursor:pointer;margin-top:1rem}.back-button:hover{background:#555}.game-over{padding:3rem}.game-over h2{color:#f44336;font-size:2rem;margin-bottom:1rem}.test-component{max-width:600px;margin:0 auto}.test-progress-bar{margin-bottom:2rem}.test-progress-bar .progress{height:15px;background:#e0e0e0;border-radius:10px;overflow:hidden;margin-top:.5rem}.test-content{background:#f8f8f8;padding:2rem;border-radius:10px;margin-bottom:1rem}.question{margin-bottom:2rem}.question h3{margin-bottom:1rem}.question .sentence{font-size:1.3rem;line-height:1.8;padding:1.5rem;background:#f5f5f5;border-radius:8px;border-left:4px solid #2196f3;margin:1rem 0;color:#333}.question .hint{font-size:1rem;color:#666;font-style:italic;margin-top:.8rem}.chinese-word{font-size:2rem;font-weight:700;color:#2196f3}.answer-input{width:100%;padding:1rem;font-size:1.2rem;border:2px solid #ccc;border-radius:8px;margin-bottom:1rem}.answer-input:focus{outline:none;border-color:#2196f3}.test-component button[type=submit],.play-sound-button,.microphone-button{padding:.8rem 1.5rem;background:#2196f3;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;margin-top:.5rem;transition:all .2s}.test-component button:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.test-component button:hover:not(:disabled){background:#1976d2}.microphone-button{font-size:1.2rem;padding:1rem 2rem}.microphone-button.listening{background:#f44336;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.recognized-text{margin:1rem 0;padding:.5rem;background:#e3f2fd;border-radius:5px}.word-to-speak{font-size:3rem;font-weight:700;color:#2196f3;margin:1rem 0}.chinese-hint{color:#666;font-size:1.2rem}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}.option-button{padding:1.5rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:1.1rem;transition:all .2s;color:#333;font-weight:500}.option-button:hover:not(:disabled){border-color:#2196f3;background:#e3f2fd}.option-button.correct{background:#4caf50;color:#fff;border-color:#4caf50}.option-button.incorrect{background:#f44336;color:#fff;border-color:#f44336}.feedback{margin-top:1.5rem;padding:1.5rem;border-radius:8px;font-size:1.1rem}.feedback.correct{background:#e8f5e9;color:#2e7d32}.feedback.incorrect{background:#ffebee;color:#c62828}.feedback .result{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.test-score{margin-top:1rem;font-size:1.2rem;font-weight:700}.warning{background:#fff3cd;color:#856404;padding:1rem;border-radius:5px;margin-top:1rem}.boss-defeat-animation{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:9999}.animation-container{text-align:center;color:#fff}.phase{animation:fadeIn .5s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.attack-phase{display:flex;align-items:center;gap:3rem;font-size:5rem}.boss{animation:shake .5s infinite}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.player{animation:attack .5s infinite}@keyframes attack{0%,to{transform:translate(0)}50%{transform:translate(20px)}}.defeat-phase .boss.defeated{font-size:8rem;animation:explode 1s}@keyframes explode{0%{transform:scale(1);opacity:1}50%{transform:scale(1.5)}to{transform:scale(2);opacity:0}}.victory-phase{animation:fadeIn 1s}.trophy{font-size:8rem;animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-30px)}}.victory-phase h1{font-size:3rem;margin:1rem 0}.stars{font-size:3rem;margin-top:1rem;animation:sparkle 1s infinite}@keyframes sparkle{0%,to{opacity:1}50%{opacity:.5}}.message{font-size:1.5rem;margin-top:1rem}@media (max-width: 768px){.word-display,.test-selection{grid-template-columns:1fr}.role-buttons{flex-direction:column}.options{grid-template-columns:1fr}}.learning-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.learning-header h2{margin-bottom:0!important}.swapped-layout{display:flex;flex-direction:row-reverse;gap:2rem}.swapped-layout .word-details,.swapped-layout .word-list{flex:1}@media (max-width: 768px){.swapped-layout{flex-direction:column}}.gap-btn{margin-right:.5rem}.review-test-button{background:#9c27b0;color:#fff;padding:.6rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s;white-space:nowrap}.review-test-button:hover{background:#8e24aa;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.spelling-practice-button{background:#2196f3;color:#fff;padding:.6rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .3s;white-space:nowrap}.spelling-practice-button:hover{background:#1976d2;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.example-sentence-box{margin-top:1rem;padding:1.5rem;background-color:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}.sentence-label{font-weight:700;color:#333;margin-bottom:.5rem}.sentence-text{font-style:italic;font-size:1.1rem;color:#555;margin-bottom:1rem}.btn-small{padding:.4rem .8rem;font-size:.85rem;border-radius:4px;background-color:#e0e0e0;color:#333;border:none;cursor:pointer;white-space:nowrap}.btn-small:hover{background-color:#ccc}.mastered-word{background-color:#e8f5e9!important;border-left:5px solid #4caf50}.learning-word{background-color:#f1f8e9!important;border-left:5px solid #8bc34a}.new-word{background-color:#fffde7!important;border-left:5px solid #fbc02d}.retention-chart-container{background:#fff;padding:1rem 1.5rem;border-radius:12px;box-shadow:0 4px 15px #0000000d;min-width:300px}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.chart-header h3{margin:0;font-size:1.1rem;color:#333}.total-words{font-size:.9rem;color:#666;font-weight:700}.memory-bar{display:flex;height:24px;border-radius:12px;overflow:hidden;margin-bottom:1rem;background:#eee}.memory-segment{height:100%;display:flex;align-items:center;justify-content:center;transition:width .5s ease;position:relative}.memory-segment:hover:after{content:attr(title);position:absolute;top:-30px;background:#000c;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;z-index:10}.segment-label{color:#fff;font-size:.8rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.segment-mastered{background:#4caf50}.segment-learning{background:#8bc34a}.segment-new{background:#fbc02d}.chart-legend{display:flex;justify-content:space-between;font-size:.85rem;color:#555}.legend-item{display:flex;align-items:center;gap:.4rem}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot-mastered{background:#4caf50}.dot-learning{background:#8bc34a}.dot-new{background:#fbc02d}.flashcard-toggle-button{background:#efeaff;color:#667eea;border:2px solid #667eea;padding:.6rem 1rem;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;transition:all .3s;white-space:nowrap}.flashcard-toggle-button:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea4d}.flashcard-toggle-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.cross-review-banner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:linear-gradient(135deg,#fff3e0,#ffe6f0);border:1px solid #ffd8b0;border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.5rem}.cross-review-icon{font-size:1.6rem}.cross-review-text{flex:1;min-width:220px}.cross-review-title{font-weight:700;color:#c05600;margin:0}.cross-review-sub{font-size:.85rem;color:#a06a3a;margin:.2rem 0 0}.cross-review-button{border:none;background:linear-gradient(135deg,#ff8a3d,#f5576c);color:#fff;font-weight:700;padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.95rem;white-space:nowrap}.cross-review-button:hover{filter:brightness(1.06)}.flashcard-mode{min-height:480px}.flashcard-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem}.flashcard-tabs{display:flex;gap:.6rem;flex-wrap:wrap}.flashcard-tab{padding:.55rem 1rem;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;border:2px solid transparent;background:#f2eefb;color:#6b6690;transition:all .15s}.flashcard-tab.active{background:#667eea;color:#fff;border-color:#667eea}.flashcard-exit{white-space:nowrap}.flashcard-empty,.flashcard-finished{text-align:center;padding:3.5rem 1.5rem;border-radius:14px}.flashcard-empty{background:#f6f9f6;border:2px dashed #cfe6cf}.flashcard-empty-icon{font-size:3.2rem;margin-bottom:.6rem}.flashcard-empty-title{font-size:1.2rem;font-weight:700;color:#3c8c3c;margin:0}.flashcard-empty-sub{color:#7aa87a;margin-top:.4rem}.flashcard-finished{background:linear-gradient(135deg,#ecfdf5,#e0f2ff);border:1px solid #cdeede}.flashcard-finished-icon{font-size:3.6rem}.flashcard-finished-title{font-size:1.5rem;font-weight:800;color:#2b7a4b;margin:.4rem 0 0}.flashcard-finished-sub{color:#4c8a66;margin-top:.4rem}.flashcard-finished-actions{display:flex;gap:.8rem;justify-content:center;margin-top:1.4rem;flex-wrap:wrap}.flashcard-progress-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}.flashcard-progress-bar{flex:1;height:12px;background:#ece8f7;border-radius:8px;overflow:hidden}.flashcard-progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .4s;border-radius:8px}.flashcard-progress-text{font-size:.9rem;color:#6b6690;font-weight:600;white-space:nowrap}.flashcard-remaining-badge{font-size:.86rem;color:#fff;background:#667eea;padding:4px 11px;border-radius:20px;font-weight:700;white-space:nowrap}.flashcard-flip-wrap{perspective:1600px;margin:0 auto 1.4rem;max-width:560px}.flashcard-flip-inner{position:relative;width:100%;height:300px;transform-style:preserve-3d;cursor:pointer;transition:transform .5s cubic-bezier(.4,.2,.2,1)}.flashcard-flip-inner.is-flipped{transform:rotateY(180deg)}.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;box-sizing:border-box}.flashcard-front{background:#fff;border:2px solid #ece7fb;box-shadow:0 16px 40px #3c286e29}.flashcard-back{background:linear-gradient(160deg,#f5f3ff,#fff);border:2px solid #d9d0f7;box-shadow:0 16px 40px #3c286e29;transform:rotateY(180deg)}.flashcard-chinese{font-size:3rem;font-weight:800;color:#2b2350;text-align:center}.flashcard-front-hint{margin-top:1.6rem;font-size:.92rem;color:#9a95b5}.flashcard-english{font-size:3rem;font-weight:800;color:#667eea;text-align:center}.flashcard-phonetic{font-size:1.1rem;color:#8a84ad;font-family:monospace;margin:.2rem 0 1rem}.flashcard-back-chinese{margin-top:1.1rem;font-size:1rem;color:#7c7799}.flashcard-flip-cta{text-align:center}.flashcard-hint-text{margin-top:.6rem;font-size:.8rem;color:#a9a4c2;text-align:center}.flashcard-hint-text.small{font-size:.75rem;color:#bbb6d0}.flashcard-grades{text-align:center}.flashcard-grade-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;max-width:640px;margin:.6rem auto 0}.grade-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.9rem .4rem;border:none;border-radius:12px;cursor:pointer;color:#fff;transition:all .15s}.grade-btn:hover{transform:translateY(-3px);filter:brightness(1.05)}.grade-label{font-size:1.05rem;font-weight:800}.grade-sub{font-size:.75rem;opacity:.92;margin-top:2px}.grade-again{background:#ef5350;box-shadow:0 6px 14px #ef535059}.grade-hard{background:#ffa726;box-shadow:0 6px 14px #ffa72659}.grade-good{background:#66bb6a;box-shadow:0 6px 14px #66bb6a59}.grade-easy{background:#42a5f5;box-shadow:0 6px 14px #42a5f559}@media (max-width: 768px){.flashcard-grade-buttons{grid-template-columns:repeat(2,1fr)}}