*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh}.header{background:hsla(0,0%,100%,.05);padding:20px 30px;text-align:center;border-bottom:1px solid hsla(0,0%,100%,.1)}.header h1{font-size:28px;margin-bottom:5px;background:linear-gradient(45deg,#00d4ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:14px;color:hsla(0,0%,100%,.6)}.main-content{overflow:hidden;gap:20px}.lyrics-panel,.main-content{display:flex;flex:1 1;padding:20px}.lyrics-panel{background:hsla(0,0%,100%,.05);border-radius:15px;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.1)}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid hsla(0,0%,100%,.1)}.panel-header h2{font-size:20px}.lyrics-buttons{display:flex;gap:10px}.lyrics-container{flex:1 1;overflow-y:auto;padding:20px;line-height:3;font-size:25px}.lyrics-container::-webkit-scrollbar{width:8px}.lyrics-container::-webkit-scrollbar-track{background:hsla(0,0%,100%,.05);border-radius:4px}.lyrics-container::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.2);border-radius:4px}.lyrics-container::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.3)}.lyric-line{padding:8px 15px;border-radius:8px;transition:all .3s ease;cursor:pointer;opacity:.7}.lyric-line:hover{background:hsla(0,0%,100%,.05);opacity:.9}.lyric-line.active{background:linear-gradient(90deg,rgba(0,212,255,.2),rgba(123,47,247,.2));opacity:1;font-weight:700;transform:scale(1.05);box-shadow:0 4px 15px rgba(0,212,255,.3)}.lyric-line ruby{ruby-position:over;ruby-align:center;flex-direction:column;align-items:center;margin:0 .25em}.lyric-line ruby rt{font-size:.8em;text-align:center;color:rgba(0,212,255,.95);font-weight:400;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;min-width:100%;padding:0 .1em}.lyric-line.active ruby rt{color:rgba(0,212,255,.95);font-weight:600;text-shadow:0 0 8px rgba(0,212,255,.4)}.lyric-line:hover ruby rt{color:rgba(0,212,255,.95)}.empty-state{text-align:center;padding:60px 20px;color:hsla(0,0%,100%,.4)}.empty-state p{margin:10px 0}.hint{font-size:14px}.lyric-edit-container{padding:15px;background:rgba(0,212,255,.1);border-radius:12px;border:2px solid rgba(0,212,255,.3);margin:10px 0}.lyric-edit-input{width:100%;padding:12px 15px;font-size:20px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:8px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;outline:none;transition:all .3s ease;margin-bottom:10px}.lyric-edit-input:focus{background:hsla(0,0%,100%,.15);border-color:rgba(0,212,255,.5);box-shadow:0 0 15px rgba(0,212,255,.3)}.lyric-edit-input::placeholder{color:hsla(0,0%,100%,.4)}.lyric-edit-buttons{display:flex;gap:10px;justify-content:flex-end}.btn-cancel,.btn-save{padding:8px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-save{background:linear-gradient(135deg,#00d4ff,#7b2ff7);color:#fff}.btn-save:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,212,255,.4)}.btn-cancel{background:hsla(0,0%,100%,.1);color:#fff}.btn-cancel:hover{background:hsla(0,0%,100%,.2)}.player-panel{width:400px;background:hsla(0,0%,100%,.05);border-radius:15px;padding:30px;display:flex;flex-direction:column;align-items:center;gap:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.1)}.album-art{width:250px;height:250px;border-radius:15px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}.album-cover-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.album-cover-image:hover{transform:scale(1.05)}.album-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center}.music-icon{font-size:80px}.track-info{text-align:center;width:100%}.track-info h3{font-size:20px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info p{font-size:14px;color:hsla(0,0%,100%,.6)}.progress-container{width:100%;display:flex;align-items:center;gap:10px}.progress-container span{font-size:12px;color:hsla(0,0%,100%,.7);min-width:40px}.time-with-copy{gap:6px}.copy-time-btn,.time-with-copy{display:flex;align-items:center}.copy-time-btn{background:transparent;border:none;cursor:pointer;font-size:14px;padding:2px 4px;opacity:.6;transition:all .2s ease;justify-content:center;line-height:1}.copy-time-btn:hover{opacity:1;transform:scale(1.1)}.copy-time-btn:active{transform:scale(.95)}.progress-bar{flex:1 1;-webkit-appearance:none;height:6px;border-radius:3px;background:hsla(0,0%,100%,.1);outline:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#00d4ff;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.progress-bar::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px rgba(0,212,255,.5)}.progress-bar:disabled{opacity:.3;cursor:not-allowed}.progress-bar:disabled::-webkit-slider-thumb{background:hsla(0,0%,39%,.5);cursor:not-allowed}.controls{gap:15px}.control-btn,.controls{display:flex;align-items:center}.control-btn{background:hsla(0,0%,100%,.1);border:none;border-radius:50%;width:50px;height:50px;font-size:20px;cursor:pointer;transition:all .3s;justify-content:center}.control-btn:hover:not(:disabled){background:hsla(0,0%,100%,.2);transform:scale(1.1)}.control-btn:disabled{opacity:.3;cursor:not-allowed}.play-btn{width:60px;height:60px;font-size:24px;background:linear-gradient(135deg,#00d4ff,#7b2ff7)}.play-btn:hover:not(:disabled){box-shadow:0 5px 20px rgba(0,212,255,.4)}.volume-control{width:100%;display:flex;align-items:center;gap:10px}.volume-bar{flex:1 1;-webkit-appearance:none;height:4px;border-radius:2px;background:hsla(0,0%,100%,.1);outline:none}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#7b2ff7;cursor:pointer}.volume-bar:disabled{opacity:.3;cursor:not-allowed}.volume-bar:disabled::-webkit-slider-thumb{background:hsla(0,0%,39%,.5);cursor:not-allowed}.btn-primary,.btn-secondary{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:linear-gradient(135deg,#00d4ff,#7b2ff7);color:#fff;width:100%}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(0,212,255,.4)}.btn-primary:disabled{background:hsla(0,0%,39%,.3);cursor:not-allowed;opacity:.5;transform:none;box-shadow:none}.btn-secondary{background:hsla(0,0%,100%,.1);color:#fff}.btn-secondary:hover{background:hsla(0,0%,100%,.2)}.btn-secondary:disabled{background:rgba(80,80,80,.3);cursor:not-allowed;opacity:.4}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-card{width:min(900px,95vw);height:min(80vh,700px);background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.15);border-radius:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid hsla(0,0%,100%,.1);font-weight:700}.modal-close{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.8}.modal-close:hover{opacity:1}.modal-body{flex:1 1;padding:20px;display:flex;align-items:center;justify-content:center}.modal-empty{color:hsla(0,0%,100%,.7)}.flashcard{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.question-text{font-size:clamp(22px,4vw,36px);line-height:1.8;text-align:center;padding:10px 20px}.flashcard-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.flashcard-next{margin-top:10px}.footer{background:hsla(0,0%,100%,.05);padding:10px 30px;border-top:1px solid hsla(0,0%,100%,.1);font-size:12px;color:hsla(0,0%,100%,.6)}