:root {
    --primary: #b77eff;
    --primary-glow: rgba(183,126,255,0.6);
    --bg-page: radial-gradient(circle at 10% 20%, #0f0c1f, #03010a);
    --bg-card: rgba(22,20,40,0.75);
    --text-main: #f0edff;
    --text-dim: #b5b2de;
    --text-muted: #7b78a0;
    --border-light: rgba(255,255,255,0.08);
    --radius-card: 2rem;
    --radius-panel: 1.2rem;
    --transition: all 0.2s ease;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
    background: var(--bg-page);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}
.app-wrapper {
    max-width: 560px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.view-container.hidden { display: none; }
.classic-view {
    background: var(--bg-card);
    backdrop-filter: blur(18px);
    border-radius: var(--radius-card);
    box-shadow: 0 0 0 1px var(--border-light);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: none;
}
.classic-view::-webkit-scrollbar { display: none; }
.classic-view .import-bar { padding: 1.2rem 1.2rem 0.8rem; background: rgba(0,0,0,0.45); border-bottom:1px solid var(--border-light); flex-shrink:0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.classic-view .import-bar::-webkit-scrollbar { display: none; }
.classic-view .import-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
}
.classic-view .btn-import {
    flex: 0 0 auto;
    background: rgba(183,126,255,0.12);
    border: 1px solid rgba(183,126,255,0.5);
    padding: 8px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.classic-view .btn-import:active { transform:scale(0.96); background:var(--primary); color:white; }
.classic-view .batch-hint { font-size:0.7rem; color:var(--text-muted); text-align:center; margin-top:12px; }

.classic-view .player-section { padding:1.2rem 1.2rem 0.8rem; flex-shrink:0; }
.classic-view .track-title { font-size:1.6rem; font-weight:700; color:var(--text-main); margin-bottom:0.25rem; word-break:break-word; }
.classic-view .track-artist { font-size:0.85rem; color:var(--text-dim); margin-bottom:1rem; border-left:3px solid var(--primary); padding-left:12px; }
.classic-view .track-artist.empty { display:none; }
.classic-view .progress-area { margin:0.8rem 0 1rem; }
.classic-view .time-info { display:flex; justify-content:space-between; font-size:0.7rem; color:var(--text-muted); margin-bottom:8px; }
.classic-view .progress-bar-bg { width:100%; height:6px; background:rgba(255,255,255,0.12); border-radius:10px; cursor:pointer; }
.classic-view .progress-fill { width:0%; height:100%; background:linear-gradient(90deg, var(--primary), #e2a0ff); border-radius:10px; transition:width 0.05s linear; box-shadow:0 0 6px var(--primary-glow); pointer-events:none; }
.classic-view .controls { display:flex; align-items:center; justify-content:center; gap:1.5rem; margin:1rem 0 0.8rem; }
.classic-view .ctrl-btn { background:rgba(255,255,255,0.08); border:none; width:52px; height:52px; border-radius:50%; font-size:1.4rem; cursor:pointer; color:var(--text-dim); backdrop-filter:blur(4px); }
.classic-view .ctrl-btn.play-btn { background:var(--primary); width:70px; height:70px; font-size:2rem; color:white; box-shadow:0 8px 20px rgba(183,126,255,0.5); }
.classic-view .ctrl-btn:active { transform:scale(0.94); }
.classic-view .mode-btn { background:rgba(255,255,255,0.1); width:48px; height:48px; font-size:1.2rem; }
.classic-view .lyrics-panel { background:rgba(0,0,0,0.3); border-radius:var(--radius-panel); padding:0.8rem 1.2rem; max-height:160px; overflow-y:auto; margin-top:0.6rem; scrollbar-width:none; }
.classic-view .lyrics-panel::-webkit-scrollbar { display:none; }
.classic-view .lyrics-content { font-size:0.85rem; line-height:1.6; color:var(--text-dim); }
.classic-view .lyric-line { padding:6px 10px; border-radius:30px; transition:0.1s linear; cursor:default; }
.classic-view .lyric-line.active { background:rgba(183,126,255,0.35); color:white; font-weight:500; border-radius:8px; }

.classic-view .lyrics-offset-control {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    margin-top: 12px;
}
.classic-view .lyrics-offset-control span {
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
    color: #f0edff;
    font-weight: 500;
}
.classic-view .lyrics-offset-control .offset-btn,
.classic-view .lyrics-offset-control .offset-reset {
    background: rgba(255,255,255,0.15);
    border: none;
    padding: 4px 10px;
    border-radius: 30px;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.classic-view .lyrics-offset-control .offset-btn:active,
.classic-view .lyrics-offset-control .offset-reset:active {
    transform: scale(0.96);
    background: var(--primary);
}
.classic-view .lyrics-offset-control #classicOffsetValue {
    background: rgba(0,0,0,0.5);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.7rem;
    min-width: 45px;
    text-align: center;
    color: white;
    flex-shrink: 0;
}

.classic-view .playlist-section { background:rgba(0,0,0,0.2); padding:0.8rem 1.2rem 1rem; display:flex; flex-direction:column; flex-shrink:0; min-height:240px; max-height:45vh; overflow:hidden; }
.classic-view .playlist-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; flex-shrink:0; }
.classic-view .playlist-header h4 { font-size:0.9rem; color:var(--text-dim); font-weight:500; }
.classic-view .clear-list { background:none; border:none; color:var(--primary); font-size:0.7rem; cursor:pointer; padding:5px 12px; border-radius:30px; }
.classic-view .playlist-items { flex:1; overflow-y:auto; padding:0; scrollbar-width:none; }
.classic-view .playlist-items::-webkit-scrollbar { display:none; }
.classic-view .playlist-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin:5px 0; border-radius:var(--radius-panel); background:rgba(30,28,48,0.6); cursor:pointer; border-left:3px solid transparent; }
.classic-view .playlist-item.active-track { background:rgba(183,126,255,0.25); border-left-color:var(--primary); }
.classic-view .track-info { flex:1; font-size:0.85rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:12px; }
.classic-view .playlist-actions { display:flex; gap:8px; flex-shrink:0; }
.classic-view .add-lyrics-btn, .classic-view .auto-match-lyrics-btn, .classic-view .delete-track { background:none; border:none; color:#a0a0c0; font-size:1.1rem; cursor:pointer; opacity:0.6; padding:5px 8px; border-radius:30px; }
.classic-view .add-lyrics-btn:active, .classic-view .auto-match-lyrics-btn:active, .classic-view .delete-track:active { opacity:1; color:#ffaa99; }
.classic-view footer { font-size:0.65rem; text-align:center; padding:0.8rem; color:var(--text-muted); border-top:1px solid var(--border-light); flex-shrink:0; }

.lyrics-view { position:relative; background:rgba(10,10,20,0.92); backdrop-filter:blur(20px); border-radius:2rem; display:flex; flex-direction:column; min-height:560px; }
.lyrics-view.fullscreen { position:fixed; top:0; left:0; right:0; bottom:0; width:100%; max-width:100%; border-radius:0; background:rgba(10,10,20,0.96); backdrop-filter:blur(24px); z-index:150; padding:20px 16px 0; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.lyrics-view-header { text-align:center; margin-bottom:16px; flex-shrink:0; }
.lyrics-view-header .track-title { font-size:1.4rem; font-weight:700; color:white; text-shadow:0 2px 5px rgba(0,0,0,0.3); }
.lyrics-view-header .track-artist { font-size:0.85rem; color:rgba(255,255,255,0.7); border-left:3px solid var(--primary); padding-left:12px; display:inline-block; margin-top:5px; }
.lyrics-view-scroll { flex:1; overflow-y:auto; margin:10px 0 0; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lyrics-view-scroll::-webkit-scrollbar { display:none; }
.lyrics-view-scroll .lyrics-content { font-size:1rem; line-height:1.9; color:rgba(255,255,255,0.9); text-align:center; padding:8px 0; }
.lyrics-view-scroll .lyric-line { padding:10px 12px; transition:all 0.2s; border-radius:40px; margin:4px auto; width:90%; cursor:default; opacity:0.6; }
.lyrics-view-scroll .lyric-line.active { opacity:1; color:white; font-weight:700; transform:scale(1.05); text-shadow:0 0 6px var(--primary-glow); border-radius:40px; }
.lyrics-view-controls { margin-top:auto; flex-shrink:0; background:rgba(20,20,35,0.7); backdrop-filter:blur(24px); border-radius:20px 20px 16px 16px; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)) 20px; }
.lyrics-view-controls .progress-area { margin:6px 0; }
.lyrics-view-controls .time-info { color:rgba(255,255,255,0.7); font-size:0.7rem; display:flex; justify-content:space-between; }
.lyrics-view-controls .progress-bar-bg { width:100%; height:6px; background:rgba(255,255,255,0.2); border-radius:10px; cursor:pointer; overflow:hidden; }
.lyrics-view-controls .progress-fill { width:0%; height:100%; background:linear-gradient(90deg, var(--primary), #e2a0ff); border-radius:10px; }
.lyrics-view-controls .controls { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin:10px 0 4px; }
.lyrics-view-controls .ctrl-btn { background:rgba(20,20,40,0.7); backdrop-filter:blur(8px); border:none; width:48px; height:48px; border-radius:30px; font-size:1.2rem; cursor:pointer; color:white; }
.lyrics-view-controls .ctrl-btn:active { transform:scale(0.94); background:var(--primary); color:white; box-shadow:0 0 12px var(--primary-glow); }
.lyrics-view-controls .ctrl-btn.play-btn { background:var(--primary); width:60px; height:60px; font-size:1.8rem; }
.lyrics-view-controls .ctrl-btn.mode-btn { background:rgba(183,126,255,0.2); }
.lyrics-view-controls .playlist-toggle-btn { background:rgba(0,0,0,0.5); border-radius:40px; width:auto; padding:0 16px; font-size:1rem; gap:6px; display:inline-flex; align-items:center; }

.lyrics-view-controls .lyrics-offset-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 8px 0 4px;
}
.lyrics-view-controls .lyrics-offset-control .offset-btn,
.lyrics-view-controls .lyrics-offset-control .offset-reset {
    background: rgba(255,255,255,0.15);
    border: none;
    padding: 4px 12px;
    border-radius: 30px;
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
}
#fullscreenOffsetValue {
    background: rgba(0,0,0,0.5);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    color: white;
}

.global-view-toggle { position:fixed; bottom:24px; right:20px; background:linear-gradient(135deg, rgba(0,0,0,0.7), rgba(30,20,50,0.8)); backdrop-filter:blur(8px); border:none; width:56px; height:56px; border-radius:30px; font-size:1.8rem; cursor:grab; color:white; z-index:200; box-shadow:0 0 12px rgba(183,126,255,0.4),0 4px 12px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(255,255,255,0.1); touch-action:none; user-select:none; display:flex; align-items:center; justify-content:center; }
.global-view-toggle:active { cursor:grabbing; box-shadow:0 0 20px var(--primary); }

/* 歌曲列表浮层 - 滚动修复 + 键盘高亮 */
.playlist-popup {
    position: fixed;
    bottom: -50%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: rgba(10, 10, 20, 0.95);
    backdrop-filter: blur(30px);
    border-radius: 20px 20px 0 0;
    z-index: 300;
    transition: bottom 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.playlist-popup.show { bottom: 0; }
.playlist-popup-header {
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    flex-shrink: 0;
}

.playlist-popup-items {
    overflow-y: auto !important;
    max-height: 50vh; /* 限制最大高度，确保内容多时出现滚动条 */
}
.playlist-popup-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.playlist-popup-items::-webkit-scrollbar {
    display：none；
}
.playlist-popup-items::-webkit-scrollbar-thumb {
    background: #b77eff;
    border-radius: 4px;
}
.playlist-popup-items .playlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    cursor: pointer;
    transition: 0.1s;
}
.playlist-popup-items .playlist-item.active-track {
    background: rgba(183, 126, 255, 0.4);
    border-left: 3px solid var(--primary);
}
.playlist-popup-items .playlist-item.keyboard-hover {
    background: rgba(183, 126, 255, 0.6);
    transform: scale(1.02);
}
.playlist-popup-items .track-info {
    flex: 1;
    color: white;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playlist-popup-items .delete-track {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
}

.playlist-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:299; opacity:0; visibility:hidden; transition:0.2s; }
.playlist-overlay.show { opacity:1; visibility:visible; }

.loading-tip { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:var(--primary); padding:8px 20px; border-radius:40px; font-size:0.75rem; z-index:100; pointer-events:none; backdrop-filter:blur(12px); border:1px solid rgba(183,126,255,0.3); }

@media (max-width:480px){
    body{padding:8px}
    .classic-view .track-title{font-size:1.4rem}
    .classic-view .ctrl-btn.play-btn{width:60px;height:60px;font-size:1.6rem}
    .classic-view .ctrl-btn{width:44px;height:44px;font-size:1.2rem}
    .classic-view .playlist-section{min-height:200px;max-height:40vh}
    .global-view-toggle{width:48px;height:48px;font-size:1.5rem;bottom:16px;right:16px}
    .classic-view .btn-import { padding: 6px 10px; font-size: 0.7rem; }
    .classic-view .import-buttons { gap: 6px; }
    .classic-view .lyrics-offset-control { gap: 5px; padding: 4px 8px; }
    .classic-view .lyrics-offset-control .offset-btn,
    .classic-view .lyrics-offset-control .offset-reset { padding: 3px 8px; font-size: 0.65rem; }
    .classic-view .lyrics-offset-control #classicOffsetValue { min-width: 38px; font-size: 0.65rem; }
}