*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-tap-highlight-color:transparent}:root{--primary-color: #4361ee;--secondary-color: #3a0ca3;--accent-color: #f72585;--light-color: #f8f9fa;--dark-color: #212529;--success-color: #4cc9f0;--warning-color: #f8961e;--danger-color: #e63946;--transition: all .2s ease}body{background:linear-gradient(135deg,#1a2a6c,#b21f1f);color:var(--light-color);height:100vh;overflow:hidden}.mobile-container{display:flex;flex-direction:column;height:85vh;padding:0 10px 10px}.mobile-header{text-align:center;padding:0;margin-bottom:8px}.mobile-header h1{font-size:1.5rem;margin-bottom:4px;background:linear-gradient(45deg,#4cc9f0,#4361ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.mobile-header p{font-size:.8rem;opacity:.8}.mobile-player{height:9vh;background:#1e1e2ee6;border-radius:12px;padding:10px;margin-bottom:5px;display:flex;flex-direction:column;justify-content:center}.mobile-player-title{text-align:center;font-size:1rem;margin-bottom:0;color:var(--success-color);white-space:nowrap;text-overflow:ellipsis}.mobile-progress-container{width:100%;background:#ffffff1a;height:4px;border-radius:3px;margin:8px 0}.mobile-progress-bar{height:100%;background:linear-gradient(to right,var(--primary-color),var(--success-color));border-radius:3px;width:0%;transition:width .1s linear}.mobile-time{display:flex;justify-content:space-between;font-size:.7rem;color:#ffffffb3}.mobile-dialogue{flex:1;background:#191928e6;border-radius:12px;margin-bottom:5px;overflow:hidden;position:relative}.mobile-dialogue-scroll{height:100%;overflow-y:hidden;padding:5px;display:flex;flex-direction:column;justify-content:center}.mobile-dialogue-content{max-height:350px;overflow-y:auto}.mobile-dialogue-item{display:flex;padding:8px 10px;margin:4px 0;border-radius:8px;transition:var(--transition);opacity:.6;min-height:45px}.mobile-dialogue-item.active{background:#4361ee33;opacity:1;transform:scale(1.02);box-shadow:0 2px 8px #0003}.mobile-dialogue-item.active .mobile-english{color:var(--success-color);font-weight:700;font-size:1.1rem}.mobile-english{flex:1;font-size:1rem;padding-right:10px;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center}.mobile-chinese{flex:1;font-size:1rem;padding-left:10px;color:#a9a9c2;display:flex;align-items:center}.mobile-controls{height:38vh;background:#1e1e2ee6;border-radius:12px;padding:10px;display:flex;flex-direction:column}.mobile-control-group{margin-bottom:-5px}.mobile-control-group h3{font-size:.9rem;margin-bottom:6px;color:var(--warning-color);text-align:center}.mobile-btn-row{display:flex;justify-content:space-around;margin-bottom:8px}.mobile-control-btn{flex:1;max-width:45%;padding:8px;border:none;border-radius:8px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;font-size:.85rem;font-weight:600;margin:0 4px;display:flex;align-items:center;justify-content:center;gap:5px}.mobile-control-btn.play-pause{background:linear-gradient(45deg,var(--success-color),#2a9d8f);max-width:80%}.mobile-control-btn.prev{background:linear-gradient(45deg,var(--warning-color),#e76f51)}.mobile-control-btn.current{background:linear-gradient(45deg,#7209b7,#3a0ca3)}.mobile-control-btn.next{background:linear-gradient(45deg,var(--accent-color),#d00000)}.mobile-resources{flex:1;min-height:120px;display:flex;flex-direction:column;background:#191928e6;border-radius:8px;padding:10px 6px 0}.resources-row{margin-bottom:3px}.resources-row a{text-decoration:none;transition:var(--transition);padding:1px 5px;border-radius:5px;background:var(--primary-color);color:#fff;margin-left:10px}.mobile-resource-list{flex:1;overflow-y:auto;margin-bottom:6px}.mobile-resource-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#ffffff0d;border-radius:6px;margin-bottom:6px;font-size:.85rem}.mobile-resource-item.active{background:#4361ee4d;border-left:3px solid var(--primary-color)}.mobile-resource-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-resource-actions button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:3px 6px;border-radius:4px;font-size:.8rem;margin-left:4px}.mobile-upload-btn{padding:8px;background:linear-gradient(45deg,#7209b7,var(--accent-color));color:#fff;border:none;border-radius:8px;font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:2px}.mobile-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;align-items:center;justify-content:center}.mobile-modal-content{background:#1e1e2e;width:90%;max-width:400px;border-radius:12px;overflow:hidden;box-shadow:0 5px 20px #00000080}.mobile-modal-header{padding:15px;background:#4361ee33;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}.mobile-modal-header h3{color:var(--success-color);font-size:1.1rem}.mobile-modal-close{background:none;border:none;color:var(--light-color);font-size:1.5rem;cursor:pointer}.mobile-modal-body{padding:15px}.mobile-form-group{margin-bottom:15px}.mobile-form-group label{display:block;margin-bottom:5px;font-size:.9rem;color:var(--light-color)}.mobile-form-group input{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:#191928e6;color:#fff}.mobile-upload-progress{margin-top:15px;background:#ffffff1a;border-radius:6px;padding:8px}.mobile-progress-bar{height:6px;background:var(--success-color);border-radius:3px;width:0%;transition:width .3s ease;margin-bottom:5px}#uploadStatus{font-size:.8rem;color:#ffffffb3;display:block;text-align:center}.mobile-modal-footer{display:flex;padding:10px;border-top:1px solid rgba(255,255,255,.1)}.mobile-btn{flex:1;padding:10px;border:none;border-radius:6px;font-size:.9rem;font-weight:600;margin:0 5px;cursor:pointer}.mobile-btn-primary{background:var(--primary-color);color:#fff}.mobile-btn-secondary{background:#ffffff1a;color:#fff}.mobile-loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#191928f2;display:flex;align-items:center;justify-content:center;z-index:2000;flex-direction:column}.mobile-loading-content{text-align:center;padding:30px;background:#1e1e2ee6;border-radius:16px;max-width:80%}.mobile-loading-content i{font-size:3rem;color:var(--success-color);margin-bottom:20px;display:block}.mobile-loading-content p{font-size:1.1rem;color:#fff}.mobile-status-message{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#4cc9f0f2;color:#fff;padding:12px 25px;border-radius:30px;font-weight:600;box-shadow:0 5px 15px #0000004d;z-index:1500;display:none;max-width:90%;text-align:center;font-size:.95rem}.mobile-status-message.success{background:#2ecc71f2}.mobile-status-message.error{background:#e74c3cf2}.mobile-control-btn.disabled{opacity:.5;pointer-events:none}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:root{--primary-color: #4361ee;--secondary-color: #3a0ca3;--accent-color: #f72585;--light-color: #f8f9fa;--dark-color: #212529;--success-color: #4cc9f0;--warning-color: #f8961e;--danger-color: #e63946;--transition: all .3s ease}body{background:linear-gradient(135deg,#1a2a6c,#b21f1f,#1a2a6c);color:var(--light-color);min-height:100vh;overflow-x:hidden;padding:20px}.container{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 40px);gap:20px}header{text-align:center;padding:15px 0;border-bottom:2px solid rgba(255,255,255,.1)}header h1{font-size:2.2rem;margin-bottom:5px;text-shadow:0 2px 5px rgba(0,0,0,.3);background:linear-gradient(45deg,#4cc9f0,#4361ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}header p{font-size:1rem;opacity:.8}.main-content{display:flex;flex:1;gap:20px}.play-section{flex:1;display:flex;flex-direction:column;background:#1e1e2ecc;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.player-area{position:relative;height:40%;background:#1e1e2e;display:flex;justify-content:center;align-items:center;padding:15px;border-bottom:1px solid rgba(255,255,255,.1)}.audio-player{width:100%;max-width:600px;padding:20px;background:#191928e6;border-radius:15px;box-shadow:0 5px 20px #0000004d}.player-title{text-align:center;margin-bottom:15px;font-size:1.4rem;color:var(--success-color)}.player-controls{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:15px}.player-btn{width:50px;height:50px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:var(--transition);font-size:1.2rem}.player-btn:hover{transform:scale(1.1);background:var(--secondary-color)}.play-btn{width:60px;height:60px;background:var(--success-color)}.progress-container{width:100%;background:#ffffff1a;height:8px;border-radius:4px;margin:15px 0;cursor:pointer;position:relative}.progress-bar{height:100%;background:linear-gradient(to right,var(--primary-color),var(--success-color));border-radius:4px;width:0%;transition:width .1s linear}.time-info{display:flex;justify-content:space-between;font-size:.9rem;color:#ffffffb3}.dialogue-area{height:60%;overflow:hidden;position:relative;background:#191928e6}.dialogue-container{height:100%;overflow-y:hidden;scroll-behavior:smooth;padding:10px 20px;display:flex;flex-direction:column;justify-content:center}.dialogue-scroll{max-height:420px;overflow-y:auto}.dialogue-item{display:flex;padding:12px 15px;margin:8px 0;border-radius:8px;transition:var(--transition);opacity:.6;min-height:50px}.dialogue-item.active{background:#4361ee33;opacity:1;transform:scale(1.03);box-shadow:0 5px 15px #0003}.dialogue-item.active .english-line{color:var(--success-color);font-weight:700;font-size:1.2rem}.english-line{flex:1;font-size:1.1rem;padding-right:20px;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center}.chinese-line{flex:1;font-size:1.1rem;padding-left:20px;color:#a9a9c2;display:flex;align-items:center}.control-area{width:300px;background:#1e1e2ecc;border-radius:15px;padding:20px;display:flex;flex-direction:column;box-shadow:0 10px 30px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-area h2{text-align:center;margin-bottom:20px;font-size:1.5rem;color:var(--success-color);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.control-group{margin-bottom:30px}.control-group h3{font-size:1.2rem;margin-bottom:15px;color:var(--warning-color)}.btn-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.control-btn{flex:1;min-width:120px;padding:12px 15px;border:none;border-radius:8px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px}.control-btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}.control-btn:active{transform:translateY(1px)}.control-btn.play-pause{background:linear-gradient(45deg,var(--success-color),#2a9d8f)}.control-btn.prev{background:linear-gradient(45deg,var(--warning-color),#e76f51)}.control-btn.current{background:linear-gradient(45deg,#7209b7,#3a0ca3)}.control-btn.next{background:linear-gradient(45deg,var(--accent-color),#d00000)}.resources-area{margin-top:auto;background:#191928e6;padding:20px;border-radius:10px}.resources-area h3{font-size:1.2rem;margin-bottom:15px;color:var(--accent-color)}.resources-header{display:flex;justify-content:space-between}.resources-header a{font-size:1.2rem;font-weight:700;text-decoration:none;margin-bottom:15px;transition:var(--transition);padding:3px 10px;border-radius:5px;background:var(--primary-color);color:#fff}.resources-header a:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}.resource-list{max-height:200px;overflow-y:auto;margin-bottom:15px}.resource-item{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#ffffff0d;border-radius:8px;margin-bottom:10px;transition:var(--transition)}.resource-item:hover{background:#ffffff1a}.resource-item.active{background:#4361ee4d;border-left:4px solid var(--primary-color)}.resource-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.resource-actions button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 10px;border-radius:5px;cursor:pointer;transition:var(--transition);margin-left:5px}.resource-actions button:hover{background:var(--primary-color)}.upload-btn{width:100%;padding:12px;background:linear-gradient(45deg,#7209b7,var(--accent-color));color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--transition)}.upload-btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:1000;align-items:center;justify-content:center}.modal-content{background:#1e1e2e;width:90%;max-width:500px;border-radius:15px;padding:25px;box-shadow:0 10px 30px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-header h2{color:var(--success-color)}.close-btn{background:transparent;border:none;color:var(--light-color);font-size:1.5rem;cursor:pointer}.upload-form{display:flex;flex-direction:column;gap:15px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600}.form-group input{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#191928e6;color:#fff}.submit-btn{padding:12px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);margin-top:10px}.submit-btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px #0000004d}@media (max-width: 768px){.main-content{flex-direction:column}.control-area{width:100%;margin-top:20px}.player-area{height:35%}.dialogue-area{height:45%}.btn-group{flex-direction:row}.control-btn{min-width:45%}}@media (min-width: 769px) and (max-width: 1024px){.main-content,.play-section{flex-direction:row}.player-area{height:100%;width:40%;border-right:1px solid rgba(255,255,255,.1);border-bottom:none}.dialogue-area{height:100%;width:60%}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.pulse{animation:pulse 2s infinite}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}.loading-indicator{display:none;text-align:center;padding:15px}.loading-indicator i{font-size:2rem;margin-bottom:10px;color:var(--success-color);animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.completion-indicator{text-align:center;padding:15px}.completion-indicator i{font-size:2rem;margin-bottom:10px;color:var(--success-color);animation:scaleIn .5s ease-out}.completion-indicator p{margin:0;color:var(--text-color)}@keyframes scaleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#191928e6;display:flex;align-items:center;justify-content:center;z-index:100;border-radius:12px}.loading-content{text-align:center;padding:30px;background:#1e1e2ef2;border-radius:12px;box-shadow:0 10px 30px #0006}.loading-content i{font-size:3rem;color:var(--success-color);margin-bottom:20px}.loading-content p{font-size:1.2rem}.status-message{position:fixed;top:20px;left:50%;transform:translate(-50%);background:#4cc9f0e6;color:#fff;padding:12px 25px;border-radius:30px;font-weight:600;box-shadow:0 5px 15px #0000004d;z-index:1000;display:none}.status-message.success{background:#2ecc71e6}.status-message.error{background:#e74c3ce6}.control-btn.disabled{opacity:.6;pointer-events:none}