*{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-x:hidden;overflow-y:auto}.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;flex-wrap:wrap}.mobile-menu-toggle{display:none;width:42px;height:42px;border-radius:10px;border:1px solid hsla(0,0%,100%,.2);background:hsla(0,0%,100%,.08);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.mobile-menu-toggle span{width:18px;height:2px;border-radius:1px;background:hsla(0,0%,100%,.9);display:block}.mobile-header-actions,.mobile-quick-btn{display:none}.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;margin:0 .08em}.lyric-line ruby rt{font-size:.62em;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:auto;line-height:1.05;padding:0 .04em}.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)}.lyrics-container.hide-furigana .lyric-line ruby rp,.lyrics-container.hide-furigana .lyric-line ruby rt{display:none}.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:min(400px,100%);position:relative;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:18px;width:100%}.control-btn,.controls{display:flex;align-items:center;justify-content: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}.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)}.rate-btn{width:64px;height:44px;border-radius:14px;font-size:14px;font-weight:700}.rate-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-28px);padding:8px 18px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(0,212,255,.35);box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 18px rgba(0,212,255,.22);color:#fff;font-size:18px;font-weight:800;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:2}.rate-toast.show{opacity:1;transform:translate(-50%,-38px)}.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}.loop-control{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px;align-items:center}.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);min-height:40px;flex-shrink:0;display:flex;align-items:center}@media (max-width:900px){.app-container{height:100dvh;min-height:100dvh;overflow:hidden}.header{display:none}.header h1{font-size:24px}.subtitle{font-size:13px}.main-content{flex-direction:column;padding:12px;gap:12px;overflow:hidden;min-height:0}.lyrics-panel,.player-panel{width:100%;padding:14px}.lyrics-panel{flex:1 1 auto;min-height:0}.player-panel{flex:0 0 auto}.panel-header{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:20}.panel-header h2{font-size:18px}.lyrics-buttons{width:100%;gap:8px;display:none;flex-direction:column;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:10px;border-radius:12px;background:rgba(23,30,61,.96);border:1px solid hsla(0,0%,100%,.12);box-shadow:0 10px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50}.lyrics-buttons.mobile-open{display:flex}.mobile-menu-toggle{display:inline-flex;width:40px;min-width:40px;height:40px}.mobile-header-actions{display:flex;align-items:center;gap:8px}.mobile-quick-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 10px;border-radius:10px;border:1px solid hsla(0,0%,100%,.2);background:hsla(0,0%,100%,.08);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}.mobile-quick-btn:disabled{opacity:.45;cursor:not-allowed}.mobile-quick-btn:hover:not(:disabled){background:hsla(0,0%,100%,.16)}.btn-primary,.btn-secondary{width:100%;padding:11px 12px}.lyrics-container{min-height:0;height:100%;flex:1 1 auto;overflow-y:auto;padding:12px;line-height:2.1;font-size:clamp(19px,6vw,24px)}.lyric-line{padding:6px 10px}.lyric-line ruby{margin:0 .04em}.lyric-line ruby rt{font-size:.56em;padding:0 .02em}.lyric-line.active{transform:none}.album-art{width:min(78vw,300px);height:min(78vw,300px)}.album-art,.player-panel .btn-primary,.track-info{display:none}.track-info h3{font-size:18px}.progress-container{gap:8px}.time-with-copy{min-width:86px}.controls{gap:12px;order:2}.control-btn{width:44px;height:44px;font-size:18px}.play-btn{width:54px;height:54px;font-size:22px}.rate-btn{width:min(28vw,86px);height:42px;border-radius:14px;font-size:13px}.rate-toast{top:auto;bottom:86px;transform:translate(-50%,8px)}.rate-toast.show{transform:translate(-50%)}.loop-control{order:3;grid-template-columns:1fr 1fr}.footer{padding:8px 12px;min-height:36px}}