html, body { width:100%; height:100%; margin:0; padding:0; overflow-x:hidden; touch-action:manipulation; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Arial, sans-serif; 
    background:#0f0f0f; 
    color:#f1f1f1; 
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
    position:relative;
    line-height:1.5;
}

/* 自定义滚动条样式 - 适用于 Webkit 浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 6px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
}

::-webkit-scrollbar-thumb:active {
    background: #6a6a6a;
}

/* 移动设备滚动条 - 更宽以便手指操作 */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 16px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #555;
        border: 3px solid #1a1a1a;
    }
    
    ::-webkit-scrollbar-thumb:active {
        background: #777;
    }
}

/* Firefox 滚动条样式 */
* {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a #1a1a1a;
}

@media (max-width: 768px) {
    * {
        scrollbar-width: auto;
    }
}
h1 { font-size:20px; margin:0; letter-spacing:.5px; color:#fff; font-weight:600; }
.tabs-nav { 
    background:transparent; 
    border-bottom:0; 
    display:flex; 
    gap:0;
    position:static;
    top:auto;
    z-index:9;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    transition:all 0.3s ease;
    flex:0;
}
.tab-btn { 
    flex:1;
    background:transparent;
    border:none;
    border-bottom:3px solid transparent;
    color:#aaa;
    padding:10px 14px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    border-radius:0;
    transition:all 0.2s ease;
    min-height:44px;
    touch-action:manipulation;
    -webkit-user-select:none;
    user-select:none;
}
@media (max-width:768px) {
    .tab-btn { 
        font-size:14px;
        padding:10px 12px;
        min-height:44px;
    }
}
.tab-btn:hover { color:#fff; background:rgba(255,255,255,0.1); }
.tab-btn.active { color:#fff; border-bottom-color:#ff0000; background:transparent; font-weight:600; }

/* Local theme for tab navigation */
.tabs-nav.local-tab-nav {
    background:#1a1a1a;
    border-bottom:none;
}
.tabs-nav.local-tab-nav .tab-btn {
    color:#aaa;
    background:transparent;
    font-weight:500;
}
.tabs-nav.local-tab-nav .tab-btn:hover {
    color:#fff;
    background:#262626;
}
.tabs-nav.local-tab-nav .tab-btn.active {
    color:#4fd1a5;
    background:transparent;
    border-bottom-color:#4fd1a5;
    font-weight:600;
}

/* YouTube theme for tab navigation */
.tabs-nav.playlist-tab-nav {
    background:#1a1a1a;
    border-bottom:none;
}
.tabs-nav.playlist-tab-nav .tab-btn {
    color:#aaa;
    background:transparent;
    font-weight:500;
}
.tabs-nav.playlist-tab-nav .tab-btn:hover {
    color:#fff;
    background:#262626;
}
.tabs-nav.playlist-tab-nav .tab-btn.active {
    color:#ff0000;
    background:transparent;
    border-bottom-color:#ff0000;
    font-weight:600;
}
.tab-content { 
    padding:12px 40px 80px 40px; 
    line-height:1.5; 
    font-size:16px;
    -webkit-overflow-scrolling:touch;
    word-break:break-word;
}
#tree { 
    padding:12px 40px 150 40px; 
    line-height:1.5; 
    font-size:16px;
    -webkit-overflow-scrolling:touch;
    word-break:break-word;
}
ul { list-style:none; margin:0; padding-left:16px; }
.dir > .label { cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; padding:4px 2px; position:relative; }
.dir.collapsed > ul { display:none; }
.dir > .label .arrow { width:12px; display:inline-block; transition:transform .18s ease; font-size:10px; opacity:.8; }
.dir.collapsed > .label .arrow { transform:rotate(-90deg); }
.file { cursor:pointer; padding:6px 2px 6px 2px; border-radius:4px; }
.file:hover, .dir > .label:hover { background:#262626; }
.playing { color:#4fd1a5; font-weight:600; }
button { 
    background:#1a1a1a; 
    color:#eee; 
    border:1px solid #555; 
    border-radius:6px; 
    padding:8px 16px; 
    cursor:pointer; 
    font-size:14px;
    min-height:44px;
    line-height:1.4;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    font-weight:500;
    transition:all 0.2s ease;
    touch-action:manipulation;
}
button:active { 
    -webkit-transform:scale(0.95);
    transform:scale(0.95); 
}
button:hover { background:#262626; }
.empty { opacity:.5; font-style:italic; }
#playerBar { 
    position:fixed; 
    bottom:0; 
    left:0; 
    right:0; 
    background:rgba(30, 30, 30, 0.85);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-top:0.5px solid rgba(255, 255, 255, 0.08);
    padding:8px 16px; 
    font-size:13px; 
    display:-webkit-flex;
    display:flex; 
    -webkit-flex-direction:column;
    flex-direction:column;
    -webkit-align-items:center;
    align-items:center; 
    box-shadow:0 -2px 10px rgba(0,0,0,0.3);
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    z-index:20;
    transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor:pointer;
}

/* 折叠状态: 隐藏控制栏 */
#playerBar.footer-collapsed {
    min-height:0;
    padding:0;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
}

#playerBar.footer-collapsed .footer-content {
    display:none;
}

#playerBar.footer-collapsed::before {
    content:'';
    display:none;
}

/* 展开状态: 显示完整控制栏 */
#playerBar.footer-expanded {
    min-height:88px;
    height:auto;
    padding:12px 20px 16px 20px;
    cursor:default;
    background:rgba(30, 30, 30, 0.92);
    opacity:1;
    pointer-events:auto;
    transition:opacity 0.3s ease;
}

#playerBar.footer-expanded::before {
    display:none !important;
}

#playerBar.footer-expanded .footer-content {
    display:flex;
    flex-direction:column;
    width:100%;
    gap:8px;
    margin-top:4px;
}

#playerBar.footer-expanded #playerProgress {
    position:absolute;
    left:0;
    right:0;
    top:40%;
    height:2px;
    margin:0;
    transform:translateY(-50%);
}

@media (max-width:768px) {
    #playerBar.footer-collapsed {
        min-height:48px;
        padding:10px 12px 0px 12px;
    }

    #playerBar.footer-expanded {
        min-height:140px;
        padding:12px 12px 8px 12px;
    }
}
.footer-content {
    display:flex;
    flex-direction:column;
    width:100%;
    gap:4px;
    pointer-events:auto;
}

#playerBar.footer-collapsed .footer-content {
    display:none;
}
.dir > .label, .file { 
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap;
}

#playerProgress { 
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:transparent;
    z-index:30;
    cursor:pointer;
    transition:height 0.3s ease, top 0.3s ease, padding 0.3s ease;
    /* 扩大触摸区域但不占用视觉空间 */
    padding:10px 0 6px 0;
    margin-top:-10px;
}

/* 折叠状态下，隐藏进度条 */
#playerBar.footer-collapsed #playerProgress {
    display:none;
}

/* 展开状态下，进度条放大便于拖动 */
#playerBar.footer-expanded #playerProgress {
    position:absolute;
    height:4px;
    padding:8px 0 6px 0;
    margin-top:-8px;
    cursor:grab;
    margin-bottom:6px;
}

#playerBar.footer-expanded #playerProgress::before {
    height:4px;
    background:rgba(255, 255, 255, 0.2);
}

#playerBar.footer-expanded #playerProgressFill {
    height:4px;
}

#playerProgress::before {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:rgba(255, 255, 255, 0.15);
    transition:height 0.2s ease;
}

#playerProgressFill { 
    position:absolute;
    bottom:0;
    left:0;
    height:2px;
    width:0%;
    background:#fc3c44;
    transition:width .1s ease;
    pointer-events:none;
}

/* 展开状态下拖动时的视觉反馈 */
#playerBar.footer-expanded #playerProgress.dragging {
    cursor:grabbing;
}

#playerBar.footer-expanded #playerProgress.dragging::before {
    background:rgba(252, 60, 68, 0.5);
    box-shadow:0 0 4px rgba(252, 60, 68, 0.3);
}

#playerProgressThumb {
    display:none;
}

/* 移动端优化 */
@media (max-width: 768px), (pointer: coarse) {
    #playerProgress {
        height:3px;
        padding:0px 0 8px 0;
        margin-top:-14px;
    }
    #playerProgress::before {
        height:3px;
    }
    
    /* 移动端展开状态下，进度条更大便于触摸 */
    #playerBar.footer-expanded #playerProgress {
        height:8px;
        padding:14px 0 10px 0;
        margin-top:-14px;
    }
    
    #playerBar.footer-expanded #playerProgress::before {
        height:8px;
    }
    
    #playerBar.footer-expanded #playerProgressFill {
        height:8px;
    }
}

.volWrap { display:flex; align-items:center; gap:8px; }
.volWrap input[type=range]{ width:130px; accent-color:#fff; }

/* Footer controls layout */
#playerBar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#1a1a1a;
    border-top:1px solid #333;
    padding:8px 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.footer-controls-wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:nowrap;
    z-index:20;
    padding:8px 16px;
    width:100%;
    min-height:64px;
}
@media (max-width:768px) {
    .footer-controls-wrapper {
        gap:6px;
        padding:3px 6px;
        min-height:40px;
    }
}
.footer-controls-left,
.footer-controls-right {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
}
.footer-controls-left { flex-direction:row; }
.footer-controls-right { flex-direction:row; }

/* Icon-style control buttons */
.control-btn {
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:transparent;
    color:rgba(255, 255, 255, 0.85);
    border:none;
    cursor:pointer;
    font-size:18px;
    min-height:32px;
    touch-action:manipulation;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.control-btn:hover{ 
    background:rgba(255, 255, 255, 0.12);
    color:#fff;
    transform:scale(1.05);
}
.control-btn:active{ 
    transform:scale(0.95); 
    background:rgba(255, 255, 255, 0.18);
}
.control-btn.playing{ 
    background:rgba(255, 255, 255, 0.12);
    color:#fff;
}
@media (max-width:768px) {
    .control-btn {
        width:28px;
        height:28px;
        min-height:28px;
        font-size:16px;
    }
}

/* Large play/pause button */
.control-btn.play-pause-large {
    width:48px;
    height:48px;
    font-size:24px;
    background:rgba(255, 255, 255, 0.95);
    color:#1a1a1a;
    border:none;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink:0;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-height:48px;
    touch-action:manipulation;
}
.control-btn.play-pause-large:hover {
    background:#fff;
    transform:scale(1.08);
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);
}
.control-btn.play-pause-large:active {
    transform:scale(0.98);
}
@media (max-width:768px) {
    .control-btn.play-pause-large {
        width:44px;
        height:44px;
        min-height:44px;
        font-size:22px;
    }
}

/* Loop button styles */
.control-btn.loop-btn {
    position:relative;
    transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.control-btn.loop-btn.loop-single {
    color:#fc3c44;
    background:rgba(252, 60, 68, 0.15);
}

.control-btn.loop-btn.loop-all {
    color:#fc3c44;
    background:rgba(252, 60, 68, 0.15);
}

/* Volume popup */
#volumePopup {
    position:fixed;
    bottom:calc(100% + 12px);
    right:12px;
    transform:none;
    background:#1a1a1a;
    border:none;
    border-radius:12px;
    padding:0;
    box-shadow:0 4px 24px rgba(0,0,0,0.8);
    z-index:1000;
    width:80px;
    height:200px;
    display:none;
    overflow:hidden;
}
.volume-slider-track {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    cursor:pointer;
}
.volume-slider-fill {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    height:0%;
    transition:height 0.05s linear;
    z-index:1;
}
.volume-slider-thumb {
    display:none;
}
.volume-slider-thumb:active {
    display:none;
}

/* History modal */
#historyModal {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    top:0;
    background:rgba(0,0,0,1);
    display:none !important;
    z-index:999;
    align-items:center;
    justify-content:center;
    animation:fadeIn 0.2s ease;
    flex-direction:column;
}
#historyModal.show {
    display:flex !important;
}

/* Shared modal container (history + local songs) */
.history-modal {
    position:fixed;
    inset:0;
    display:none;
    z-index:999;
    background:rgba(0,0,0,0.85);
    align-items:center; /* center vertically */
    justify-content:center;
    padding:0; /* full-screen overlay */
    overflow:auto;
}

/* Local songs modal must stay on top of all player layers */
#localSongsModal {
    z-index:12000;
}

@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
.history-modal-content {
    background:#0f0f0f;
    border-radius:0;
    border:none;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    display:flex;
    flex-direction:column;
    box-shadow:none;
    animation:slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform:translateY(30px); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}
.history-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border-bottom:1px solid #282828;
}
.history-modal-header h3 {
    margin:0;
    font-size:20px;
    font-weight:600;
    color:#fff;
}
.history-modal-close {
    background:none;
    border:none;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    padding:0;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s ease;
}
.history-modal-close:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}
.history-modal-list {
    overflow-y:auto;
    flex:1;
    padding:8px 0;
}
.history-item {
    padding:14px 16px;
    border-bottom:none;
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:8px;
    margin:4px 8px;
}
.history-item:hover {
    background:#262626;
}
.history-item-info {
    flex:1;
    min-width:0;
}
.history-item-name {
    font-size:15px;
    color:#fff;
    word-break:break-word;
    white-space:normal;
    margin-bottom:4px;
}
.history-item-url {
    font-size:12px;
    color:#888;
    word-break:break-all;
    white-space:normal;
}
.history-item-delete {
    background:none;
    border:none;
    color:#888;
    font-size:16px;
    cursor:pointer;
    padding:4px 8px;
    margin-left:8px;
    border-radius:4px;
    transition:all 0.2s ease;
}
.history-item-delete:hover {
    background:#262626;
    color:#ff6b6b;
}

/* small icon button next to slider */
.icon-btn {
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#1a1a1a;
    color:#ddd;
    border:1px solid #333;
    margin-right:8px;
    cursor:pointer;
}
.icon-btn:hover{ background:#262626; }

.volWrap { display:flex; align-items:center; gap:8px; }
.volWrap input[type=range]{ width:130px; }

/* Larger, easier-to-tap buttons globally on mobile */
@media (max-width: 520px) {
    button { padding:12px 14px; font-size:16px; }
    /* Footer controls always one row, no wrap, icon buttons smaller */
    .footer-controls-wrapper { gap:12px; }
    .footer-controls-left,
    .footer-controls-right { gap:6px; }
    .control-btn { width:28px; height:28px; font-size:16px; }
    .control-btn.play-pause-large { width:40px; height:40px; font-size:20px; }
    .icon-btn { width:28px; height:28px; }
    .volWrap input[type=range] { width:80px; }
    /* Tabs: make buttons more prominent and wrap */
    .tabs-nav { display:flex; gap:6px; padding:6px 8px; }
    .tab-btn { padding:10px 8px; font-size:15px; }
    /* YouTube tab header adjustments */
    .youtube-tab-header { position:static; top:auto; padding:12px; }
    .youtube-input { font-size:16px; padding:12px; }
    /* History modal responsive */
    .history-modal-content { width:95%; max-height:85vh; }
    .history-item-name { font-size:14px; }
    .history-item-url { font-size:11px; }
    /* YouTube input modal responsive */
    .youtube-input-modal-content { width:95%; max-width:100%; }
}

/* YouTube Playlist Styling */
#youtubePlaylist { display:flex; flex-direction:column; gap:0; padding:0; background:#0f0f0f; }
.youtube-tab-header {
    background:#1a1a1a;
    padding:16px 18px;
    border-bottom:2px solid #ff0000;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:sticky;
    top:44px;
    z-index:8;
}
.youtube-tab-title { 
    margin:0;
    font-size:15px;
    color:#f1f1f1;
    font-weight:600;
}
/* YouTube header actions */
.youtube-search-open-btn {
    flex:1;
    min-width:120px;
    padding:12px 16px;
    font-size:14px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s ease;
    font-weight:600;
    white-space:nowrap;
    background:#1a1a1a;
    color:#fff;
    border:1px solid #4fd1a5;
}
.youtube-search-open-btn:hover {
    background:#262626;
}
/* YouTube input modal */
.youtube-input-modal {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    top:0;
    background:rgba(0,0,0,0.7);
    display:none !important;
    z-index:200;
    align-items:center;
    justify-content:center;
    animation:fadeOut 0.2s ease;
}
.youtube-input-modal.show {
    display:flex !important;
    animation:fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes fadeOut {
    from { opacity:1; }
    to { opacity:0; }
}
.youtube-input-modal-content {
    background:#1a1a1a;
    border-radius:12px;
    border:2px solid #ff0000;
    width:90%;
    max-width:500px;
    display:flex;
    flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,0.8);
    animation:slideUp 0.3s ease;
}
.youtube-input-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border-bottom:1px solid #3d444b;
}
.youtube-input-modal-header h3 {
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#fff;
}
.youtube-input-modal-close {
    background:none;
    border:none;
    color:#888;
    font-size:24px;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s ease;
}
.youtube-input-modal-close:hover {
    background:#262626;
    color:#fff;
}
.youtube-input-modal-body {
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.youtube-input-submit-btn {
    background:#ff0000;
    color:#fff;
    padding:12px 16px;
    font-size:14px;
}
.youtube-input-submit-btn:hover {
    background:#cc0000;
}
.youtube-input-group {
    display:flex;
    gap:0;
    align-items:stretch;
    border-radius:6px;
    overflow:hidden;
    border:1px solid #4fd1a5;
    background:#0f0f0f;
    box-shadow:0 2px 8px rgba(79, 209, 165, 0.15);
}
.youtube-input { 
    flex:1;
    padding:12px 14px;
    font-size:14px;
    border-radius:0;
    border:none;
    background:transparent;
    color:#fff;
    box-sizing:border-box;
    font-family:inherit;
    resize:none;
    min-height:50px;
    line-height:1.4;
}
.youtube-input:focus { 
    outline:none;
    box-shadow:inset 0 0 0 1px #4fd1a5;
}
.youtube-status { 
    min-height:18px;
    color:#1976d2;
    font-size:13px;
    margin-top:8px;
}
.youtube-input-group .youtube-btn.primary {
    flex:0 0 auto;
    padding:12px 24px;
    white-space:nowrap;
    background:#4fd1a5;
    color:#042;
    border:none;
    border-radius:0;
    font-weight:600;
    cursor:pointer;
    font-size:14px;
    transition:all 0.2s ease;
}
.youtube-input-group .youtube-btn.primary:hover {
    background:#3fc394;
    box-shadow:inset 0 -2px 4px rgba(0,0,0,0.2);
}
.youtube-input-group .youtube-btn.primary:active {
    transform:translateY(1px);
}
/* YouTube search section */
.youtube-search-section {
    padding:12px 0;
    background:transparent;
    flex:1;
    min-width:300px;
}
.youtube-search-group {
    display:flex;
    gap:0;
    align-items:stretch;
    border-radius:4px;
    overflow:visible;
    border:1px solid #333;
    background:#1a1a1a;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    position:relative;
}
.youtube-search-input {
    flex:1;
    padding:10px 16px;
    font-size:14px;
    border-radius:40px 0 0 40px;
    border:1px solid #303030;
    background:#0f0f0f;
    color:#fff;
    box-sizing:border-box;
    font-family:inherit;
    transition:all 0.2s ease;
}
.youtube-search-input::placeholder {
    color:#888;
}
.youtube-search-input:focus {
    outline:none;
    background:#0f0f0f;
    border-color:#1c62b9;
}
.youtube-search-group .youtube-btn.primary {
    flex:0 0 auto;
    padding:10px 24px;
    white-space:nowrap;
    background:#262626;
    color:#fff;
    border:1px solid #303030;
    border-left:none;
    border-radius:0 40px 40px 0;
    font-weight:500;
    cursor:pointer;
    font-size:14px;
    transition:all 0.2s ease;
}
.youtube-search-group .youtube-btn.primary:hover {
    background:#2a2a2a;
    border-color:#2a2a2a;
}
.youtube-search-group .youtube-btn.primary:active {
    transform:scale(0.98);
}

/* 菜单按钮 */
.youtube-menu-btn {
    flex:0 0 auto;
    width:44px;
    height:44px;
    padding:0;
    background:transparent;
    color:#fff;
    border:none;
    border-radius:50%;
    font-size:20px;
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
        margin-right:8px;
}
.youtube-menu-btn:hover {
    background:rgba(255,255,255,0.1);
}
.youtube-menu-btn:active {
    transform:scale(0.95);
    background:rgba(255,255,255,0.2);
}

/* 搜索历史下拉列表 */
.youtube-search-history {
    position:absolute;
    top:100%;
    left:0;
    right:60px;
    background:#1a1a1a;
    border:none;
    border-radius:12px;
    z-index:99;
    box-shadow:0 4px 24px rgba(0,0,0,0.5);
    overflow-y:auto;
    max-height:300px;
    margin-top:8px;
}

.youtube-search-history-list {
    padding:8px 0;
}

.youtube-search-history-item {
    padding:12px 16px;
    color:#fff;
    font-size:14px;
    cursor:pointer;
    transition:all 0.15s ease;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-bottom:none;
}

.youtube-search-history-item:last-child {
    border-bottom:none;
}

.youtube-search-history-item:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

.youtube-search-history-item:active {
    background:rgba(255,255,255,0.15);
}

/* 下拉菜单 */
.youtube-menu {
    position:absolute;
    top:100%;
        left:0;
    background:#1a1a1a;
    border:none;
    border-radius:12px;
    min-width:200px;
    z-index:100;
    box-shadow:0 4px 24px rgba(0,0,0,0.5);
    overflow:hidden;
    margin-top:8px;
}

.youtube-menu-item {
    display:block;
    width:100%;
    padding:12px 16px;
    background:transparent;
    color:#fff;
    border:none;
    border-bottom:none;
    text-align:left;
    font-size:14px;
    cursor:pointer;
    transition:all 0.15s ease;
    white-space:nowrap;
    font-weight:400;
}

.youtube-menu-item:last-child {
    border-bottom:none;
}

.youtube-menu-item:hover {
    background:rgba(255,255,255,0.1);
    color:#fff;
}

.youtube-menu-item:active {
    background:rgba(255,255,255,0.15);
}
.youtube-search-results {
    padding:0;
    margin-top:12px;
}
.youtube-search-title {
    padding:12px 0;
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#fff;
}
.youtube-search-list {
    display:flex;
    flex-direction:column;
    gap:0;
    background:#0f0f0f;
    border:1px solid #1f1f1f;
    border-radius:12px;
    overflow:hidden;
}
.youtube-search-item {
    padding:12px 16px;
    border:none;
    border-radius:0;
    background:#1a1a1a;
    cursor:pointer;
    transition:all 0.18s ease;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid #2a2d33;
}
.youtube-search-item:hover {
    background:#262626;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    transform:translateY(-1px);
}
.youtube-search-item:last-child {
    border-bottom:none;
}
.youtube-search-item.added-to-queue {
    background:#1a1a1a;
    border-left:3px solid #3ea6ff;
}
.youtube-search-item.added-to-queue .youtube-search-item-title {
    color:#3ea6ff;
    font-weight:600;
}
.youtube-search-item.added-to-queue .youtube-search-item-meta {
    color:#aaa;
}
.youtube-search-index {
    width:26px;
    height:26px;
    border-radius:8px;
    background:#262626;
    color:#8e8e93;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.youtube-search-item-body {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.youtube-search-item-title {
    font-size:15px;
    font-weight:600;
    color:#fff;
    line-height:1.4;
    margin:0;
    word-break:break-word;
}
.youtube-search-item-meta {
    font-size:12px;
    color:#8e8e93;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.youtube-search-item-duration {
    font-size:12px;
    color:#c7c7cc;
    font-weight:700;
    flex-shrink:0;
}
.youtube-search-item.added-to-queue .youtube-search-index {
    background:#3ea6ff;
    color:#0f0f0f;
}
.youtube-actions { 
    display:flex;
    gap:8px;
}
.youtube-actions .youtube-btn { 
    flex:1;
    padding:8px 12px;
    border-radius:6px;
    background:#1a1a1a;
    color:#eee;
    border:1px solid #555;
    cursor:pointer;
    font-size:13px;
}
.youtube-actions .youtube-btn.primary { 
    background:#1976d2;
    color:#fff;
    border-color:transparent;
}
.youtube-actions .youtube-btn:hover { background:#262626; }
.youtube-actions .youtube-btn.primary:hover { background:#1565c0; }
.youtube-divider { 
    height:2px;
    background:#ff0000;
}
.youtube-queue-section {
    padding:12px 24px 12px 18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:#0f0f0f;
}
.youtube-queue-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.youtube-queue-title {
    margin:0;
    font-size:16px;
    color:#fff;
    font-weight:600;
    border-left:3px solid #ff0000;
    padding-left:12px;
    flex:1;
}
.clear-queue-btn {
    width:44px;
    height:40px;
    padding:0;
    font-size:20px;
    background:transparent;
    color:#ff4444;
    border:2px solid #ff4444;
    border-radius:6px;
    cursor:pointer;
    transition:all 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout:none;
}
.clear-queue-btn:hover {
    background:#ff4444;
    color:#fff;
    transform:scale(1.05);
}
.clear-queue-btn:active {
    transform:scale(0.95);
}

@media (max-width: 768px), (pointer: coarse) {
    .clear-queue-btn {
        width:52px;
        height:48px;
        font-size:24px;
        border:2px solid #ff4444;
    }
    .clear-queue-btn:active {
        transform:scale(0.9);
    }
}

/* YouTube 队列区域的历史按钮样式 */
.youtube-queue-header #historyBtn {
    width:40px;
    height:40px;
    padding:0;
    font-size:20px;
    background:transparent;
    color:#00d4ff;
    border:2px solid #00d4ff;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.youtube-queue-header #historyBtn:hover {
    background:#00d4ff;
    color:#1e1f24;
    transform:scale(1.05);
}
.youtube-queue-header #historyBtn:active {
    transform:scale(0.95);
}

@media (max-width: 768px), (pointer: coarse) {
    .youtube-queue-header #historyBtn {
        width:48px;
        height:48px;
        font-size:24px;
    }
}
.youtube-queue-list {
    display:flex;
    flex-direction:column;
    gap:0;
    padding-bottom:120px;
    background:#0f0f0f;
}
.youtube-queue-item {
    background:#1a1a1a;
    border:none;
    border-bottom:0.5px solid rgba(0, 0, 0, 0.08);
    border-radius:0;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
    min-height:68px;
    position:relative;
    overflow:hidden;
}

.youtube-queue-item-wrapper {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 52px 12px 16px;
    position:relative;
    transition:transform 0.3s cubic-bezier(0.2, 0.0, 0.0, 1.0);
    transform:translateX(0);
    touch-action:pan-y;
    z-index:1;
}

.youtube-queue-item-delete {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:80px;
    background:#ff3b30;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
    z-index:2;
}

.youtube-queue-item.swiped .youtube-queue-item-delete {
    opacity:1;
    pointer-events:auto;
}

/* 拖拽手柄样式 */
.drag-handle {
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c7c7cc;
    font-size:18px;
    cursor:grab;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:color 0.2s ease;
    z-index:10;
}

.drag-handle:hover {
    color:#8e8e93;
}

.drag-handle:active {
    cursor:grabbing;
    color:#fc3c44;
}

/* 队列项默认折叠状态 - 高度减半 */
.youtube-queue-item.collapsed {
    min-height:12px;
    padding:4px 16px 4px 12px;
    font-size:11px;
    opacity:0.7;
}

/* 队列项展开状态 */
.youtube-queue-item.expanded {
    min-height:24px;
    padding:10px 16px 10px 12px;
    font-size:13px;
    opacity:1;
}
@media (max-width:768px) {
    .youtube-queue-item {
        padding:14px 56px 14px 20px; /* 移动端留出更多空间给拖拽手柄 */
        min-height:52px;
        display:flex;
        align-items:center;
        font-size:14px;
    }

    .youtube-queue-item.collapsed {
        min-height:26px;
        padding:6px 56px 6px 20px;
        font-size:12px;
    }

    .youtube-queue-item.expanded {
        min-height:52px;
        padding:14px 56px 14px 20px;
        font-size:14px;
    }
    
    /* 移动端wrapper右侧留出更多空间给拖拽手柄 */
    .youtube-queue-item-wrapper {
        padding:12px 60px 12px 16px;
    }
    
    /* 移动端拖拽手柄更大，便于触摸 */
    .drag-handle {
        width:44px;
        height:44px;
        right:8px;
        font-size:24px;
    }
}
.youtube-queue-item:not(.current) {
    cursor:pointer;
}
.youtube-queue-item:not(.current):hover {
    background:#262626;
}
.youtube-queue-item:not(.current):active {
    background:#2a2a2a;
}
.youtube-queue-item.current {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(35, 35, 35, 0.95) 100%);
    border-bottom: none;
    cursor: default;
    min-height: auto;
    padding: 12px 16px;
    gap: 12px;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.05);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.youtube-queue-item.current .queue-current-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.youtube-queue-item.current .queue-item-cover {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.youtube-queue-item.current .queue-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-queue-item.current::before {
    display: none;
}

.youtube-queue-item.current .queue-current-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    color: #8e8e93;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.youtube-queue-item.current .queue-track-info {
    font-size: 12px;
    color: #999;
    line-height: 1.2;
}

.youtube-queue-item.current .queue-current-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
}

.youtube-queue-item.current .queue-type {
    font-size: 10px;
    font-weight: 600;
    color: #fc3c44;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.youtube-queue-item.current .queue-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.youtube-queue-item.current .queue-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 4px;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.youtube-queue-item.current .queue-title .queue-marker {
    display: none;
}

.youtube-queue-item.current .queue-artist {
    font-size: 13px;
    color: #8e8e93;
    line-height: 1.2;
    margin-bottom: 0;
}

/* 当前播放歌曲不显示拖拽手柄 */
.youtube-queue-item.current .drag-handle {
    display:none;
}

/* 当前播放歌曲的轨道信息 */
.youtube-queue-item.current .queue-track-info {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 当前播放歌曲的类型标签 */
.youtube-queue-item.current .queue-type {
    font-size: 12px;
    color: #fc3c44;
    font-weight: 500;
}
.youtube-queue-item.dragging {
    opacity:0.5;
    background:#0f0f0f;
    border-left-color:#ff0000;
    cursor:grabbing;
    transform:scale(0.98);
}
@media (max-width:768px) {
    .youtube-queue-item.dragging {
        opacity:0.4;
        transform:scale(0.95);
    }
}
.youtube-queue-item.drag-over {
    background:#1a1a1a;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(35, 35, 35, 0.95) 100%);
    margin-top:8px;
    padding-top:9px;
}
.youtube-queue-item.drag-over.drag-over-after {
    border-top:none;
    border-bottom:3px solid #3ea6ff;
    margin-bottom:8px;
    padding-bottom:9px;
    margin-top:0;
    padding-top:12px;
}
@media (max-width:768px) {
    .youtube-queue-item.drag-over {
        border-top:5px solid #00ffff;
        margin-top:10px;
        padding-top:9px;
    }
    .youtube-queue-item.drag-over.drag-over-after {
        border-bottom:5px solid #00ffff;
        margin-bottom:10px;
        padding-bottom:9px;
    }
}
/* 队列项封面 */
.queue-item-cover {
    width:52px;
    height:52px;
    border-radius:6px;
    overflow:hidden;
    flex-shrink:0;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);
}

.queue-item-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* 队列项信息容器 */
.queue-item-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.queue-marker {
    color:#fc3c44;
    margin-right:4px;
    font-size:12px;
    font-weight:600;
    flex-shrink:0;
}
.queue-index {
    color:#8e8e93;
    margin-right:8px;
    font-size:14px;
    flex-shrink:0;
}
.queue-title {
    font-size:16px;
    font-weight:500;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.3;
}

.queue-artist {
    font-size:14px;
    color:#8e8e93;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
}
.youtube-history-section {
    padding:12px 18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:#0f0f0f;
}
.youtube-history-title { 
    margin:0;
    font-size:14px;
    color:#f1f1f1;
    font-weight:600;
    border-left:3px solid #ff0000;
    padding-left:12px;
}
.youtube-history-list { 
    display:flex;
    flex-direction:column;
    gap:4px;
}
.youtube-history-item { 
    padding:10px 12px;
    background:#1a1a1a;
    border:1px solid #262626;
    border-left:3px solid transparent;
    border-radius:0;
    cursor:pointer;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:all 0.15s ease;
    color:#aaa;
}
.youtube-history-item:hover { 
    background:#262626;
    border-left-color:#ff0000;
    color:#f1f1f1;
}
.youtube-history-item.empty { 
    color:#666;
    cursor:default;
    text-align:center;
    background:transparent;
    border:none;
}
.youtube-history-item.from-playlist {
    background:#1a1a1a;
    border-left:3px solid #ff6b00;
}
.youtube-history-item.from-playlist:hover {
    background:#262626;
    border-left-color:#ff8c00;
}
.playlist-marker {
    color:#ff6b00;
    margin-right:6px;
    font-size:11px;
    font-weight:bold;
}
.youtube-playlist-item { 
    padding:12px 16px;
    border-bottom:1px solid #2a2d33;
    cursor:pointer;
    transition:background 0.15s ease;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}
.youtube-playlist-item:hover { background:#262626; }
.youtube-playlist-item.playing { background:#1a1a1a; border-left:3px solid #4fd1a5; padding-left:13px; }
.youtube-playlist-item-title { 
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}
.youtube-playlist-item.playing .youtube-playlist-item-title { color:#4fd1a5; font-weight:600; }
.youtube-playlist-item-time { 
    font-size:12px;
    color:#888;
    white-space:nowrap;
}
.youtube-playlist-empty { 
    padding:40px 16px;
    text-align:center;
    color:#666;
    font-size:14px;
}

@media (max-width: 680px) {
	header { flex-wrap:wrap; padding:8px 12px; }
	h1 { font-size:16px; flex:1 0 100%; }
	.tab-content { padding:8px 12px 150px 12px; font-size:16px; }
	.tabs-nav { top:40px; }
	.toolbar { width:100%; justify-content:space-between; }
	button { flex:1; font-size:14px; padding:10px 0; }
	.file { padding:10px 4px; }
	.dir > .label { padding:8px 2px; }
	#playerBar { font-size:15px; }
}

/* YouTube modal responsiveness */
#youtubeModal { z-index:9999; }
/* Modal layout */
#youtubeModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9999; align-items:center; justify-content:center; }
#youtubeModal .youtube-content { max-width:640px; width:90vw; box-sizing:border-box; background:#0f0f0f; padding:24px 32px; border-radius:8px; box-shadow:0 2px 16px #0003; }

#youtubeModal .youtube-title { margin:0 0 8px 0; font-size:1.1rem; }
#youtubeModal .youtube-input { width:100%; padding:12px 10px; font-size:16px; border-radius:6px; border:1px solid #444; background:#0f0f0f; color:#fff; box-sizing:border-box; }
#youtubeModal .youtube-status { margin-top:8px; min-height:20px; color:#1976d2; font-size:0.95rem; }
#youtubeModal .youtube-history-section { margin-top:16px; max-height:200px; overflow-y:auto; }
#youtubeModal .youtube-history-title { margin:0 0 8px 0; font-size:0.95rem; color:#aaa; }
#youtubeModal .youtube-history-list { display:flex; flex-direction:column; gap:4px; }
#youtubeModal .youtube-history-item { padding:8px 10px; background:#1a1a1a; border:1px solid #333; border-radius:4px; cursor:pointer; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background 0.2s; }
#youtubeModal .youtube-history-item:hover { background:#262626; border-color:#444; }
#youtubeModal .youtube-history-item.empty { color:#666; cursor:default; text-align:center; }
#youtubeModal .youtube-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
#youtubeModal .youtube-actions .youtube-btn { padding:8px 14px; min-width:88px; border-radius:6px; }
#youtubeModal .youtube-actions .youtube-btn.primary { background:#1976d2; color:#fff; border-color:transparent; }

@media (max-width: 520px) {
    /* On small screens make modal full-width bottom sheet style */
    #youtubeModal { align-items:flex-end; }
    #youtubeModal .youtube-content {
        width:100vw; max-width:100vw; margin:0; border-radius:12px 12px 0 0; padding:16px; min-height:140px;
        box-shadow:0 -6px 24px rgba(0,0,0,0.6);
    }
    #youtubeModal input#youtubeInput { font-size:18px; padding:14px; }
    #youtubeModal .youtube-actions { flex-direction:column-reverse; }
    #youtubeModal .youtube-actions button { width:100%; min-width:0; }
    body.modal-open { overflow:hidden; }
}

/* ========== Theme Styling ========== */

/* Local Theme - Default dark theme */
.local-theme {
    background:#0f0f0f;
    color:#eee;
}
.local-theme .file { color:#ddd; }
.local-theme .file:hover { background:#262626; }
.local-theme .dir > .label { color:#ddd; }
.local-theme .dir > .label:hover { background:#262626; }
.local-theme .playing { color:#4fd1a5; }

/* YouTube Theme - YouTube style (dark with red accents) */
.youtube-theme {
    background:#0f0f0f;
    color:#f1f1f1;
}
.youtube-theme .youtube-tab-header {
    background:#1a1a1a;
    border-bottom:2px solid #ff0000;
}
.youtube-theme .youtube-history-title {
    color:#f1f1f1;
    font-size:16px;
    font-weight:600;
    border-left:3px solid #ff0000;
    padding-left:12px;
}
.youtube-theme .youtube-history-item {
    color:#aaa;
    transition:all 0.2s ease;
}
.youtube-theme .youtube-history-item:hover {
    background:#262626;
    color:#f1f1f1;
    border-left:3px solid #ff0000;
}
.youtube-theme .youtube-input {
    background:#1a1a1a;
    border-color:#ff0000;
    color:#f1f1f1;
}
.youtube-theme .youtube-input:focus {
    box-shadow:inset 0 0 0 1px #ff0000;
}
.youtube-theme .youtube-input-group {
    border-color:#ff0000;
    background:#0f0f0f;
}
.youtube-theme .youtube-input-group .youtube-btn.primary {
    background:#ff0000;
    color:#fff;
}
.youtube-theme .youtube-input-group .youtube-btn.primary:hover {
    background:#cc0000;
}
.youtube-theme .youtube-status {
    color:#ff0000;
}
.youtube-theme .youtube-divider {
    background:#262626;
}
.youtube-theme .youtube-search-group {
    border-color:#ff0000;
    background:#0f0f0f;
}
.youtube-theme .youtube-search-input {
    background:#1a1a1a;
    color:#f1f1f1;
}
.youtube-theme .youtube-search-input:focus {
    box-shadow:inset 0 0 0 1px #ff0000;
}
.youtube-theme .youtube-search-group .youtube-btn.primary {
    background:#ff0000;
    color:#fff;
}
.youtube-theme .youtube-search-group .youtube-btn.primary:hover {
    background:#cc0000;
}
.youtube-theme .youtube-search-item {
    background:#1a1a1a;
    border-color:#262626;
}
.youtube-theme .youtube-search-item:hover {
    background:#262626;
    border-color:#ff0000;
}
.youtube-theme .youtube-search-open-btn {
    border-color:#ff0000;
    background:#1a1a1a;
    color:#fff;
}
.youtube-theme .youtube-search-open-btn:hover {
    background:#262626;
}

/* YouTube Search Modal */
.youtube-search-modal {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    top:0;
    background:rgba(0,0,0,0.7);
    display:none !important;
    z-index:200;
    align-items:center;
    justify-content:center;
    animation:fadeOut 0.2s ease;
}
.youtube-search-modal.show {
    display:flex !important;
    animation:fadeIn 0.2s ease;
}
.youtube-search-modal-content {
    background:#1a1a1a;
    border-radius:12px;
    border:2px solid #ff0000;
    width:90%;
    max-width:600px;
    max-height:80vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 8px 32px rgba(0,0,0,0.8);
    animation:slideUp 0.3s ease;
}
.youtube-search-modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px;
    border-bottom:1px solid #3d444b;
}
.youtube-search-modal-header h3 {
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#fff;
}
.youtube-search-modal-close {
    background:none;
    border:none;
    color:#888;
    font-size:24px;
    cursor:pointer;
    padding:0;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all 0.2s ease;
}
.youtube-search-modal-close:hover {
    background:#262626;
    color:#fff;
}
.youtube-search-modal-body {
    padding:16px;
    overflow-y:auto;
    flex:1;
}
.youtube-search-modal-list {
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* ========== 移动设备老年人友好优化（≤768px）========== */
@media (max-width:768px) {
    /* 1. 全局优化 - 更大字体便于阅读 */
    body {
        font-size:16px;
        line-height:1.6;
        letter-spacing:0.3px;
    }
    
    /* 2. 顶部标题栏优化 */
    header {
        padding:12px 12px;
        gap:8px;
        min-height:56px;
        background:#1a1a1a;
        border-bottom:2px solid #333;
    }
    
    h1 {
        font-size:20px;
        font-weight:700;
        letter-spacing:0.5px;
    }
    
    /* 3. 标签栏 - 更大更清晰 */
    .tabs-nav {
        gap:0;
        padding:8px 0;
        background:#0f0f0f;
    }
    
    .tab-btn {
        font-size:14px;
        padding:12px 16px;
        min-height:48px;
        flex:1;
        font-weight:600;
        border-radius:0;
        transition:all 0.3s ease;
    }
    
    .tab-btn.active {
        background:transparent;
        color:#4fd1a5;
        font-weight:700;
    }
    
    .tab-btn.active::after {
        height:3px;
        background:#4fd1a5;
    }
    
    /* 4. 搜索栏优化 - 更大的输入框 */
    .youtube-search-input {
        font-size:16px;
        padding:14px 16px;
        min-height:48px;
        border-radius:8px;
        border:2px solid #444;
    }
    
    .youtube-btn {
        font-size:15px;
        padding:14px 24px;
        min-height:48px;
        font-weight:600;
        border-radius:8px;
    }
    
    .youtube-menu-btn {
        width:48px;
        height:48px;
        min-height:48px;
        font-size:20px;
    }
    
    /* 5. 内容区域 */
    .tab-content {
        padding:12px 32px 160px 32px;
        font-size:16px;
        line-height:1.6;
    }
    
    #tree {
        padding:12px 32px 160px 32px;
    }
    
    /* 6. 文件树优化 - 更大的项目 */
    ul {
        padding-left:16px;
    }
    
    .file,
    .dir > .label {
        padding:12px 8px;
        font-size:16px;
        line-height:1.6;
        border-radius:6px;
        transition:all 0.2s ease;
    }
    
    .file:active,
    .dir > .label:active {
        background:#3a444e;
        transform:scale(0.98);
    }
    
    .dir > .label .arrow {
        width:14px;
        font-size:12px;
        margin-right:6px;
    }
    
    /* 播放中强调显示 */
    .file.playing {
        background:#1a1a1a;
        color:#4fd1a5;
        font-weight:700;
        font-size:17px;
    }
    
    /* 7. YouTube 队列优化 */
    .youtube-queue-item {
        background:#1a1a1a;
        border:none;
        border-bottom:0.5px solid rgba(0, 0, 0, 0.08);
        border-radius:0;
        cursor:pointer;
        min-height:68px;
        position:relative;
        overflow:hidden;
        margin:0;
        transition:background 0.2s ease, transform 0.2s ease;
    }
    
    .youtube-queue-item:active {
        background:#262626;
        transform:scale(0.98);
    }
    
    .youtube-queue-item.current {
        background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(35, 35, 35, 0.95) 100%);
        border-left-color:transparent;
    }
    
    .queue-title {
        font-size:15px;
        font-weight:500;
        line-height:1.6;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100%;
    }
    
    .youtube-queue-item.current .queue-title {
        color:#fff;
        font-weight:700;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    
    .queue-marker {
        font-size:14px;
        margin-right:6px;
    }
    
    /* 8. 模态窗口优化 */
    .history-modal-content {
        width:98%;
        max-width:98%;
        max-height:90vh;
        border-radius:12px;
        padding:16px;
        box-shadow:0 4px 20px rgba(0,0,0,0.9);
    }
    
    .history-modal-header {
        padding:16px;
        gap:12px;
        min-height:56px;
    }
    
    .history-modal-header h3 {
        font-size:20px;
        font-weight:700;
    }
    
    .history-modal-close,
    .local-songs-modal-close {
        width:48px;
        height:48px;
        font-size:28px;
        border-radius:24px;
    }
    
    .history-modal-list {
        max-height:calc(90vh - 80px);
        overflow-y:auto;
    }
    
    .search-result,
    .history-item {
        padding:14px 12px;
        font-size:15px;
        min-height:56px;
        border-radius:8px;
        margin-bottom:8px;
        transition:all 0.2s ease;
    }
    
    .search-result:active,
    .history-item:active {
        background:#262626;
        transform:scale(0.98);
    }
    
    .search-result-title,
    .history-title {
        font-size:16px;
        font-weight:600;
        margin-bottom:4px;
    }
    
    .search-result-meta,
    .history-meta {
        font-size:12px;
        opacity:0.7;
    }
    
    /* 9. 底部控制栏大幅优化 */
    #playerBar {
        padding:8px 12px;
        background:#1a1a1a;
        border-top:2px solid #333;
    }
    
    #playerBar.footer-collapsed {
        min-height:52px;
        padding:8px 12px 0 12px;
    }
    
    #playerBar.footer-collapsed::before {
        font-size:26px;
        padding:6px 0;
    }
    
    #playerBar.footer-expanded {
        /*min-height:200px; */
        padding:14px 12px 10px 12px;
    }
    
    /* 10. 进度条加大 */
    #playerProgress {
        height:5px;
        padding:14px 0 12px 0;
        margin-top:-14px;
    }
    
    #playerProgress::before {
        height:5px;
        border-radius:3px;
    }
    
    #playerProgressFill {
        height:5px;
        border-radius:3px;
    }
    
    #playerBar.footer-expanded #playerProgress {
        height:8px;
        padding:16px 0 14px 0;
        margin-top:-16px;
    }
    
    #playerBar.footer-expanded #playerProgress::before {
        height:8px;
    }
    
    #playerBar.footer-expanded #playerProgressFill {
        height:8px;
    }
    
    /* 11. 控制按钮大幅优化 */
    .footer-controls-wrapper {
        gap:20px;
        padding: 40px 1px 10px 0px;
        min-height:110px;
    }
    
    .footer-controls-left,
    .footer-controls-right {
        gap:12px;
    }
    
    .control-btn {
        width:44px;
        height:44px;
        min-height:44px;
        font-size:22px;
        border-radius:22px;
        transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border:none;
        background:transparent;
    }
    
    .control-btn:active {
        transform:scale(0.95);
        background:rgba(255, 255, 255, 0.18);
    }
    
    .control-btn.play-pause-large {
        width:56px;
        height:56px;
        min-height:56px;
        font-size:28px;
        border-radius:28px;
        background:rgba(255, 255, 255, 0.95);
        color:#1a1a1a;
        border:none;
    }
    
    .control-btn.play-pause-large:active {
        background:#fff;
        transform:scale(0.98);
    }
    
    /* 循环按钮特殊样式 */
    .loop-btn {
        font-size:20px;
    }
    
    .loop-btn[data-loop_mode="0"] {
        opacity:0.5;
        border-color:#666;
    }
    
    .loop-btn[data-loop_mode="1"],
    .loop-btn[data-loop_mode="2"] {
        color:#4fd1a5;
        border-color:#4fd1a5;
        background:rgba(79,209,165,0.1);
    }
    
    /* 12. 音量控制优化 */
    .footer-volume-control {
        gap:10px;
        padding:0 8px;
        margin-top:4px;
    }
    
    .footer-volume-control button {
        width:48px;
        height:48px;
        min-height:48px;
        font-size:20px;
    }
    
    .volume-slider {
        max-width:140px;
        height:5px;
    }
    
    .volume-slider::before {
        height:5px;
    }
    
    .volume-fill {
        height:5px;
    }
    
    /* 13. 时间显示优化 */
    #timeDisplay {
        font-size:13px;
        gap:6px;
        margin-top:6px;
    }
    
    /* 14. 双击/长按优化 */
    .file,
    .dir > .label,
    .youtube-queue-item,
    .search-result,
    .history-item,
    button {
        -webkit-touch-callout:none;
        user-select:none;
        -webkit-user-select:none;
    }
    
    /* 15. 提升可访问性 */
    button:focus,
    .file:focus,
    .dir > .label:focus,
    .youtube-queue-item:focus {
        outline:3px solid #4fd1a5;
        outline-offset:2px;
    }
}

/* ========== 平板设备优化（768px < width ≤ 1024px）========== */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size:15px;
    }
    
    header {
        padding:10px 14px;
        min-height:52px;
    }
    
    h1 {
        font-size:18px;
    }
    
    .tab-btn {
        font-size:13px;
        padding:10px 14px;
        min-height:44px;
    }
    
    .file,
    .dir > .label {
        padding:10px 6px;
        font-size:14px;
    }
    
    .youtube-queue-item {
        padding:12px 10px;
        min-height:52px;
        font-size:14px;
    }
    
    .control-btn {
        width:30px;
        height:30px;
        font-size:18px;
    }
    
    .control-btn.play-pause-large {
        width:42px;
        height:42px;
        font-size:22px;
    }
}

/* Footer expand button (three dots) */
.footer-expand-btn {
	display: none !important;
}

/* ========== Apple Music Style Mini Player ========== */
.mini-player {
	position: fixed;
	bottom: 72px; /* 导航栏高度 + 间距 */
	left: 8px;
	right: 8px;
	max-width: 600px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(40px) saturate(180%);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	z-index: 100;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.mini-player-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	gap: 12px;
}

.mini-player-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.mini-player-cover {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.mini-player-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.mini-player-cover-placeholder {
	font-size: 24px;
	filter: brightness(1.2);
}

.mini-player-text {
	flex: 1;
	min-width: 0;
}

.mini-player-title {
	font-size: 14px;
	font-weight: 600;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.mini-player-artist {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mini-player-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.mini-control-btn {
	width: 32px;
	height: 32px;
	min-height: 32px;
	min-width: 32px;
	padding: 0;
	line-height: 1.2;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: #000;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	text-indent: 0;
}

.mini-control-btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.mini-control-btn:active {
	background: rgba(0, 0, 0, 0.1);
	transform: scale(0.95);
}

.mini-player-progress {
	height: 2px;
	background: rgba(0, 0, 0, 0.1);
	position: relative;
}

.mini-player-progress-fill {
	height: 100%;
	background: #fc3c44;
	width: 0%;
	transition: width 0.3s linear;
}

/* ========== Apple Music Style Bottom Navigation ========== */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: rgba(249, 249, 249, 0.94);
	backdrop-filter: blur(40px) saturate(180%);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	border-top: 0.5px solid rgba(60, 60, 67, 0.12);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 8px;
	padding-bottom: env(safe-area-inset-bottom);
	z-index: 99;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: 1;
	height: 100%;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	color: #8e8e93;
	padding: 8px;
	position: relative;
}

.nav-item.active {
	color: #fc3c44;
}

.nav-icon {
	font-size: 24px;
	transition: all 0.2s ease;
}

.nav-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.nav-item:active {
	opacity: 0.6;
	transform: scale(0.95);
}

/* 调整主内容区域的 padding，为底部导航和迷你播放器留出空间 */
#youtubePlaylist {
	padding-bottom: 0px !important; /* 导航栏 64px + 迷你播放器 68px + 间距 48px */
}

#tree {
	padding-bottom: 0px !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
	.mini-player {
		bottom: 72px;
		left: 4px;
		right: 4px;
	}
	
	.bottom-nav {
		height: 70px;
	}
	
	.nav-icon {
		font-size: 26px;
	}
	
	.nav-label {
		font-size: 11px;
	}
	
	.youtube-queue-item {
		min-height: 76px;
		padding: 14px 16px;
	}
	
	.queue-item-cover {
		width: 56px;
		height: 56px;
	}
	
	.youtube-queue-item.current {
        min-height: auto;
        padding: 12px 16px;
        margin: 0;
        flex-direction: row;
        border-radius: 0;
	}
	
	.youtube-queue-item.current .queue-current-left {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}
	
	.youtube-queue-item.current .queue-item-cover {
		width: 80px;
		height: 80px;
	}
	
	.youtube-queue-item.current .queue-title {
		font-size: 16px;
		margin-top: 0;
		white-space: normal;
		word-break: break-word;
	}
	
	.youtube-queue-item.current .queue-artist {
		font-size: 13px;
	}
	
	.youtube-queue-item.current .queue-current-info {
		align-items: flex-end;
	}
	
	.drag-handle {
		width: 32px;
		height: 32px;
		font-size: 20px;
	}
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
	#youtubePlaylist {
		background: #0f0f0f !important;
	}
	
	.youtube-queue-list {
		background: #0f0f0f;
	}
	
	.youtube-queue-item {
        background: #1a1a1a;
        border-bottom-color: rgba(255, 255, 255, 0.08);
	}
	
	.youtube-queue-item:not(.current):hover {
        background: #262626;
	}
	
	.youtube-queue-item:not(.current):active {
        background: #2a2a2a;
	}
	
	.youtube-queue-item.current {
        background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(35, 35, 35, 0.95) 100%);
        border-bottom-color: rgba(255, 255, 255, 0.08);
	}
	
	.queue-title {
		color: #fff;
	}
	
	.queue-artist {
		color: #8e8e93;
	}
	
	.drag-handle {
		color: #636366;
	}
	
	.drag-handle:hover {
		color: #8e8e93;
	}
	
	.mini-player {
		background: rgba(30, 30, 30, 0.95);
	}
	
	.mini-player-title {
		color: #fff;
	}
	
	.mini-player-artist {
		color: #999;
	}
	
	.mini-control-btn {
		color: #fff;
	}
	
	.mini-control-btn:hover {
		background: rgba(255, 255, 255, 0.1);
	}
	
	.mini-control-btn:active {
		background: rgba(255, 255, 255, 0.15);
	}
	
	.mini-player-progress {
		background: rgba(255, 255, 255, 0.2);
	}
	
	.bottom-nav {
		background: rgba(20, 20, 20, 0.98);
		border-top-color: rgba(255, 255, 255, 0.1);
	}
}

/* ========== Search Modal (Apple Music Style) ========== */
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.search-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: fadeIn 0.3s ease;
}

.search-modal-content {
	position: relative;
	background: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
	animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	padding-top: max(12px, env(safe-area-inset-top));
	background: rgba(249, 249, 249, 0.98);
	backdrop-filter: blur(40px) saturate(180%);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 10;
}

.search-modal-history {
    position: sticky;
    top: 64px;
    z-index: 9;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow-y: auto;
    margin: 0 16px;
    border-radius: 12px;
    display: none;
}

.search-modal-history-actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 10px 4px 10px;
    gap: 8px;
}

.search-modal-history-clear {
    background: transparent;
    border: none;
    color: #666;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    min-height: 0;
}

.search-modal-history-clear:hover {
    color: #d62b2b;
    background: rgba(214,43,43,0.08);
}

.search-modal-history-clear:active {
    transform: scale(0.97);
    background: rgba(214,43,43,0.12);
}

.search-modal-history-list {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.search-modal-history-item {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(142,142,147,0.1);
    color: #111;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal-history-item:hover {
    background: rgba(142,142,147,0.16);
}

.search-modal-history-item:active {
    transform: scale(0.99);
    background: rgba(142,142,147,0.2);
}

.search-modal-back {
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #fc3c44;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}

.search-modal-back:hover {
	background: rgba(252, 60, 68, 0.1);
}

.search-modal-back:active {
	transform: scale(0.9);
}

.search-modal-input {
	flex: 1;
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 10px;
	background: rgba(142, 142, 147, 0.12);
	font-size: 16px;
	color: #000;
	outline: none;
	transition: background 0.2s ease;
}

.search-modal-input:focus {
	background: rgba(142, 142, 147, 0.18);
}

.search-modal-input::placeholder {
	color: #8e8e93;
}

.search-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	padding-bottom: 180px;
}

.search-suggestions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.search-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	color: #8e8e93;
}

.search-placeholder-icon {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}

.search-placeholder p {
	font-size: 16px;
	margin: 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #1a1a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #222;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.search-result-item:hover {
    background: #262626;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.search-result-item:active {
    background: #222;
    transform: scale(0.99);
}

.search-result-cover {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24px;
    border: 1px solid #333;
}

.search-result-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-result-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4fd1a5 0%, #00c6ff 100%);
    color: #0f0f0f;
    font-size: 22px;
    font-weight: 700;
}

.search-result-info {
	flex: 1;
	min-width: 0;
}

.search-result-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result-artist {
	font-size: 13px;
    color: #c7c7cc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-result-action {
    padding: 8px 12px;
    min-width: 64px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #4fd1a5;
    background: linear-gradient(135deg, #4fd1a5 0%, #00c6ff 100%);
    color: #0f0f0f;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 198, 255, 0.25);
}

.search-result-action:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 198, 255, 0.2);
}

/* 搜索加载动画 */
.search-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: #8e8e93;
}

.search-loading-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid rgba(142, 142, 147, 0.2);
	border-top-color: #fc3c44;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 搜索历史 */
.search-history-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.search-history-header {
	font-size: 13px;
	font-weight: 600;
	color: #8e8e93;
	padding: 8px 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.search-history-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.search-history-item:hover {
	background: #f5f5f5;
}

.search-history-item:active {
	background: #e8e8e8;
	transform: scale(0.98);
}

.search-history-icon {
	font-size: 20px;
	color: #8e8e93;
	flex-shrink: 0;
}

.search-history-text {
	flex: 1;
	font-size: 15px;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.search-history-delete {
	width: 24px;
	height: 24px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #8e8e93;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	flex-shrink: 0;
}

.search-history-delete:hover {
	background: rgba(142, 142, 147, 0.2);
	color: #fc3c44;
}

.search-history-delete:active {
	transform: scale(0.9);
}

/* 深色模式支持 - 搜索弹窗 */
@media (prefers-color-scheme: dark) {
	.search-modal-content {
		background: #000;
	}
	
	.search-modal-header {
		background: rgba(28, 28, 30, 0.98);
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	
	.search-modal-input {
		background: rgba(118, 118, 128, 0.24);
		color: #fff;
	}
	
	.search-modal-input:focus {
		background: rgba(118, 118, 128, 0.32);
	}
	
	.search-result-item {
		background: #1c1c1e;
	}
	
	.search-result-item:hover {
		background: #2c2c2e;
	}
	
	.search-result-item:active {
		background: #3a3a3c;
	}
	
	.search-result-title {
		color: #fff;
	}
	
	.search-history-item {
		background: #1c1c1e;
	}
	
	.search-history-item:hover {
		background: #2c2c2e;
	}
	
	.search-history-item:active {
		background: #3a3a3c;
	}
	
	.search-history-text {
		color: #fff;
	}
}

/* ==================== Now Playing Modal ==================== */
.now-playing-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #f5f5f7 0%, #ffffff 100%);
z-index: 10000;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.now-playing-content {
width: 100%;
max-width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom);
}

/* Header */
.now-playing-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 10;
}

.now-playing-header-left {
display: flex;
align-items: center;
gap: 12px;
}

.now-playing-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(120, 120, 128, 0.16);
color: #1c1c1e;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}

.now-playing-close:hover {
background: rgba(120, 120, 128, 0.24);
}

.now-playing-close:active {
transform: scale(0.95);
}

.now-playing-status {
display: flex;
align-items: center;
gap: 6px;
}

.status-icon {
font-size: 14px;
}

.status-text {
font-size: 12px;
font-weight: 600;
color: #fc3c44;
letter-spacing: 0.5px;
}

.now-playing-menu-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #1c1c1e;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}

.now-playing-menu-btn:hover {
background: rgba(120, 120, 128, 0.16);
}

/* Body Container */
.now-playing-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

/* Current Playing Card */
.now-playing-current-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
margin: 8px 8px 0 8px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
}

.current-card-cover {
width: 140px;
height: 140px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.current-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.current-card-cover-placeholder {
font-size: 48px;
color: white;
display: none;
}

.current-card-info {
flex: 1;
min-width: 0;
padding-top: 4px;
}

.current-card-badge {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
}

.badge-icon {
font-size: 12px;
}

.badge-text {
font-size: 11px;
font-weight: 600;
color: #fc3c44;
letter-spacing: 0.5px;
}

.current-card-title {
font-size: 18px;
font-weight: 600;
color: #1c1c1e;
margin-bottom: 2px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
 line-clamp: 2;
-webkit-box-orient: vertical;
}

.current-card-subtitle {
font-size: 15px;
color: #fc3c44;
margin-bottom: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.current-card-meta {
font-size: 13px;
color: #8e8e93;
margin-bottom: 8px;
}

.current-card-next {
font-size: 12px;
font-weight: 600;
color: #fc3c44;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.current-card-menu {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #fc3c44;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}

.current-card-menu:hover {
background: rgba(120, 120, 128, 0.16);
}

.current-card-menu:active {
transform: scale(0.9);
}

/* Queue List */
.now-playing-queue {
padding: 8px 0 16px;
}

.now-playing-queue-list {
padding: 0 8px;
}

.now-playing-queue-list {
padding: 0 8px;
}

.now-playing-queue-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
margin-bottom: 4px;
background: white;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

.now-playing-queue-item:hover {
background: #f5f5f5;
}

.now-playing-queue-item:active {
transform: scale(0.98);
background: #ebebeb;
}

.now-playing-queue-item.playing {
background: rgba(252, 60, 68, 0.08);
}

.queue-item-thumbnail {
width: 52px;
height: 52px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
}

.queue-item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}

.queue-item-details {
flex: 1;
min-width: 0;
}

.queue-item-name {
font-size: 16px;
font-weight: 500;
color: #1c1c1e;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.now-playing-queue-item.playing .queue-item-name {
color: #fc3c44;
}

.queue-item-artist {
font-size: 14px;
color: #8e8e93;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.queue-item-menu {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #fc3c44;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}

.queue-item-menu:hover {
background: rgba(120, 120, 128, 0.16);
}

/* Controls */
.now-playing-controls {
padding: 16px 20px 20px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.now-playing-progress {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.progress-time {
font-size: 12px;
color: #8e8e93;
font-variant-numeric: tabular-nums;
min-width: 36px;
}

.progress-bar-container {
flex: 1;
height: 32px;
display: flex;
align-items: center;
}

.progress-bar-track {
width: 100%;
height: 3px;
background: rgba(120, 120, 128, 0.2);
border-radius: 2px;
position: relative;
cursor: pointer;
}

.progress-bar-fill {
height: 100%;
background: #fc3c44;
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}

.progress-bar-thumb {
position: absolute;
top: 50%;
left: 0%;
width: 11px;
height: 11px;
background: white;
border: 2px solid #fc3c44;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}

.progress-bar-track:hover .progress-bar-thumb {
opacity: 1;
}

.now-playing-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}

.control-btn-large {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: transparent;
color: #1c1c1e;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}

.control-btn-large:hover {
background: rgba(120, 120, 128, 0.16);
}

.control-btn-large:active {
transform: scale(0.9);
}

.control-btn-play {
width: 64px;
height: 64px;
border-radius: 50%;
border: none;
background: white;
color: #1c1c1e;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
margin: 0 8px;
-webkit-tap-highlight-color: transparent;
}

.control-btn-play:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.control-btn-play:active {
transform: scale(0.95);
}

.control-btn-play.playing {
background: #fc3c44;
color: white;
}

.now-playing-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}

.secondary-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: #8e8e93;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
-webkit-tap-highlight-color: transparent;
}

.secondary-btn:hover {
background: rgba(120, 120, 128, 0.16);
color: #1c1c1e;
}

.secondary-btn:active {
transform: scale(0.9);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.now-playing-modal {
background: linear-gradient(to bottom, #1c1c1e 0%, #000000 100%);
}

.now-playing-header {
background: rgba(28, 28, 30, 0.94);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.now-playing-close {
background: rgba(120, 120, 128, 0.24);
color: #ffffff;
}

.now-playing-close:hover {
background: rgba(120, 120, 128, 0.36);
}

.now-playing-menu-btn {
color: #ffffff;
}

.now-playing-menu-btn:hover {
background: rgba(120, 120, 128, 0.24);
}

.now-playing-current-card {
background: #1c1c1e;
}

.current-card-title {
color: #ffffff;
}

.now-playing-queue-item {
background: #1c1c1e;
}

.now-playing-queue-item:hover {
background: #2c2c2e;
}

.now-playing-queue-item:active {
background: #3a3a3c;
}

.queue-item-name {
color: #ffffff;
}

.now-playing-controls {
background: rgba(28, 28, 30, 0.94);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.control-btn-large {
color: #ffffff;
}

.control-btn-large:hover {
background: rgba(120, 120, 128, 0.24);
}

.control-btn-play {
background: #2c2c2e;
color: #ffffff;
}

.control-btn-play.playing {
background: #fc3c44;
color: white;
}

.secondary-btn {
color: #8e8e93;
}

.secondary-btn:hover {
background: rgba(120, 120, 128, 0.24);
color: #ffffff;
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.current-card-cover {
width: 120px;
height: 120px;
}

.current-card-title {
font-size: 16px;
}

.current-card-subtitle {
font-size: 14px;
}

.control-btn-large {
width: 44px;
height: 44px;
}

.control-btn-play {
width: 60px;
height: 60px;
}

.now-playing-buttons {
gap: 4px;
}
}

@media (max-width: 480px) {
.current-card-cover {
width: 100px;
height: 100px;
}

.current-card-title {
font-size: 15px;
}

.current-card-subtitle {
font-size: 13px;
}

.current-card-meta,
.current-card-next {
font-size: 11px;
}

.control-btn-large {
width: 40px;
height: 40px;
}

.control-btn-play {
width: 56px;
height: 56px;
}
}

/* ===== Search Modal ===== */
.search-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 1000;
	flex-direction: column;
	align-items: flex-start;
}

.search-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.search-modal-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #1a1a1a;
}

.search-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #111;
	border-bottom: 1px solid #333;
}

.search-modal-back {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.search-modal-input {
	flex: 1;
	background: #333;
	border: none;
	color: #fff;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 16px;
	outline: none;
}

.search-modal-input::placeholder {
	color: #999;
}

.search-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.search-suggestions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 16px;
}

.search-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #888;
}

.search-placeholder-icon {
	font-size: 48px;
}

.search-placeholder p {
	margin: 0;
	font-size: 14px;
}

.search-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.search-loading-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #333;
	border-top-color: #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #222;
	border-radius: 8px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: background 0.2s;
}

.search-result-cover {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #1f1f1f, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-result-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #bbb;
}

.search-result-item:hover {
	background: #2a2a2a;
}

.search-result-thumbnail {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.search-result-info {
	flex: 1;
	min-width: 0;
}

.search-result-title {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

.search-result-duration {
	font-size: 12px;
	color: #888;
    min-width: 48px;
    text-align: right;
}

.search-result-action {
	flex-shrink: 0;
    width: 40px;
    height: 40px;
	background: #333;
	border: none;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
    white-space: nowrap;
    padding: 0;
}

.search-result-action:hover {
	background: #667eea;
}