:root{--font-main: "Noto Sans SC", "Segoe UI", Arial, sans-serif;--bg-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);--container-bg: rgba(255, 255, 255, .6);--container-shadow: rgba(0, 0, 0, .1);--backdrop-blur: 12px;--text-color: #2c3e50;--text-secondary-color: #7f8c8d;--primary-color: #3498db;--primary-color-dark: #2980b9;--warning-color: #e74c3c;--item-hover-bg: rgba(52, 152, 219, .1);--item-current-bg: rgba(52, 152, 219, .2);--item-current-text: var(--primary-color);--border-color: rgba(0, 0, 0, .1);--lyrics-highlight-bg: rgba(46, 204, 113, .15);--lyrics-highlight-text: #27ae60;--lyrics-highlight-shadow: rgba(46, 204, 113, .2);--component-bg: rgba(255, 255, 255, .5);--scrollbar-thumb-bg: rgba(0, 0, 0, .2);--scrollbar-track-bg: transparent}.dark-mode{--bg-gradient: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);--container-bg: rgba(30, 30, 30, .6);--container-shadow: rgba(0, 0, 0, .3);--text-color: #ecf0f1;--text-secondary-color: #95a5a6;--primary-color: #5dade2;--primary-color-dark: #3498db;--item-hover-bg: rgba(93, 173, 226, .1);--item-current-bg: rgba(93, 173, 226, .2);--border-color: rgba(255, 255, 255, .15);--lyrics-highlight-bg: rgba(26, 188, 156, .15);--lyrics-highlight-text: #1abc9c;--component-bg: rgba(44, 44, 44, .5);--scrollbar-thumb-bg: rgba(255, 255, 255, .2)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track-bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}body{font-family:var(--font-main);display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:20px;box-sizing:border-box;background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text-color);transition:background .5s,color .5s}.container{background:var(--container-bg);backdrop-filter:blur(var(--backdrop-blur));-webkit-backdrop-filter:blur(var(--backdrop-blur));padding:35px;border-radius:24px;box-shadow:0 15px 30px var(--container-shadow);border:1px solid var(--border-color);width:100%;max-width:850px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:20px;transition:background .5s,box-shadow .5s;min-height:640px;margin-bottom:56px;position:relative}.header{text-align:center;position:relative}.header h1{margin:0;font-size:2.2em;font-weight:700;color:var(--primary-color);letter-spacing:1px}.header .warning{color:var(--text-secondary-color);font-size:.9em;margin-top:10px;font-style:italic}.file-input-area{background:var(--component-bg);border:2px dashed var(--border-color);border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:all .3s ease}.file-input-area:hover,.file-input-area.dragover{border-color:var(--primary-color);background:var(--item-hover-bg)}.file-input-area .file-input-label{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary-color)}.file-input-label i{font-size:2em;margin-bottom:10px;color:var(--primary-color)}.search-area{display:flex;gap:10px;align-items:center}.search-area input{flex-grow:1;border:1px solid var(--border-color);background-color:var(--component-bg);border-radius:20px;padding:10px 18px;font-size:1em;color:var(--text-color);outline:none;transition:border-color .3s;font-family:inherit}.search-area input:focus{border-color:var(--primary-color)}.search-area button{background:var(--primary-color);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.1em;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.search-area button:hover{background:var(--primary-color-dark);transform:scale(1.05)}.search-area button:disabled{background:var(--text-secondary-color);cursor:not-allowed;transform:none}.view-toggle{display:none}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;overflow:hidden}.playlist,.lyrics{background:var(--component-bg);border-radius:16px;padding:20px;border:1px solid var(--border-color);height:100%;overflow-y:auto}.playlist div{padding:12px 15px;border-radius:10px;transition:all .2s ease-in-out;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist div:hover{background-color:var(--item-hover-bg);color:var(--item-current-text);transform:translate(5px)}.playlist .current{color:var(--item-current-text);font-weight:500;background-color:var(--item-current-bg)}.lyrics{text-align:center;font-size:1.1em;line-height:2.2}.lyrics div{white-space:pre-wrap}.lyrics .current{color:var(--lyrics-highlight-text);font-weight:700;background-color:var(--lyrics-highlight-bg);transform:scale(1.05);box-shadow:0 4px 15px var(--lyrics-highlight-shadow)}.controls{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}.controls button{background:var(--primary-color);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1.2em;width:50px;height:50px;display:flex;justify-content:center;align-items:center;transition:all .2s ease;box-shadow:0 4px 10px #0000001a}.controls button:hover{background:var(--primary-color-dark);transform:translateY(-2px);box-shadow:0 6px 15px #00000026}.controls button:active{transform:translateY(0);box-shadow:0 2px 5px #0000001a}.controls button#loadOnlineBtn{width:auto;border-radius:25px;padding:0 25px;gap:10px}.controls button:disabled{background:var(--text-secondary-color);cursor:not-allowed;transform:none;box-shadow:none}.controls audio{flex-grow:1;min-width:300px}.loader{width:20px;height:20px;border:3px solid var(--primary-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.theme-switch-wrapper{position:absolute;top:0;right:0}.theme-toggle-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:16px;background:var(--component-bg);border:1px solid var(--border-color);color:var(--text-color);font-size:12px;cursor:pointer;transition:all .2s ease}.theme-toggle-btn:hover{border-color:var(--primary-color);box-shadow:0 2px 8px #0000001a}.theme-toggle-btn i{color:var(--primary-color)}.theme-label{opacity:.85}.source-badge{position:absolute;top:10px;left:10px;font-size:12px;color:var(--text-secondary-color);text-decoration:none;padding:2px 8px;border-radius:10px;background:var(--component-bg);border:1px solid var(--border-color)}.source-badge:hover{color:var(--primary-color);border-color:var(--primary-color)}.signature{text-align:center;color:var(--text-secondary-color);font-size:12px;margin-top:8px}@media(min-width:1024px){.container{transform:scale(.9);transform-origin:top center}}@media(max-width:768px){body{padding:0}.container{padding:15px;gap:15px;grid-template-rows:auto auto auto 1fr auto;border-radius:0;border:none;min-height:0;margin-bottom:90px}.header h1{font-size:1.8em}.file-input-area{padding:15px}.file-input-label i{font-size:1.8em}.view-toggle{display:flex;gap:10px}.view-toggle button{flex-grow:1;background:var(--component-bg);color:var(--text-secondary-color);border:1px solid var(--border-color);padding:10px;border-radius:10px;font-size:.9em;font-family:inherit;cursor:pointer;transition:all .3s ease}.view-toggle button.active{background:var(--primary-color);color:#fff;font-weight:500;border-color:var(--primary-color)}.main-content{display:flex;grid-template-columns:none}.playlist,.lyrics{width:100%;flex-shrink:0}.mobile-hidden{display:none!important}.lyrics{line-height:1.8;font-size:1em}.controls{flex-wrap:wrap;gap:10px;align-items:center}.controls audio{order:-1;width:100%;min-width:unset}.controls button{font-size:1.1em;width:48px;height:48px}.controls button#loadOnlineBtn{flex-grow:1;width:auto;max-width:180px}}