:root {
            /* 浅色模式 */
            --bg-color: #fcfcfc;
            --sidebar-bg: #ffffff;
            --sidebar-border: #f0f0f0;
            --text-primary: #333333;
            --text-secondary: #666666;
            --brand-color: #7c3aed;
            --brand-light: #f3e8ff;
            --hover-bg: #f9f9f9;

            /* 单词高亮变量 */
            --line-active-color: #bf9be9;
            --word-active-color: #7c3aed; 
            --word-active-bg: rgba(124, 58, 237, 0.15);

            /* 播放器变量 */
            --bar-bg: rgba(255, 255, 255, 0.95);
            --progress-bg: rgba(0,0,0,0.05);
            --highlight-bg: #ffffff;
            --highlight-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
        }

        [data-theme="dark"] {
            --bg-color: #0a0a0a;
            --sidebar-bg: #141414;
            --sidebar-border: #27272a;
            --text-primary: #f4f4f5;
            --text-secondary: #a1a1aa;
            --brand-color: #bb86fc;
            --brand-light: rgba(187, 134, 252, 0.1);
            --hover-bg: #1f1f22;

            --line-active-color: #ab95c5;
            --word-active-color: #bb86fc;
            --word-active-bg: rgba(187, 134, 252, 0.2);

            --bar-bg: rgba(20, 20, 20, 0.95);
            --progress-bg: rgba(255,255,255,0.1);
            --highlight-bg: #18181b;
            --highlight-shadow: 0 4px 12px rgba(0,0,0,0.5);
        }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        body {
            font-family: -apple-system, "PingFang SC", "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color); color: var(--text-primary);
            margin: 0; display: flex; height: 100vh; overflow: hidden;
            transition: background 0.3s, color 0.3s;
        }

        .icon { width: 24px; height: 24px; fill: currentColor; }
        .icon-stroke { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
        .icon-sm { width: 20px; height: 20px; fill: currentColor; }

        /* --- 侧边栏 --- */
 /* =========================================
   ✨ 侧边栏 (大字号 & Unit选中版)
   ========================================= */

.sidebar {
    width: 300px; /* 宽度加宽，容纳大字体 */
    background-color: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.04);
    border-right: 1px solid rgba(0,0,0,0.03);
    display: flex; 
    flex-direction: column; 
    z-index: 1000;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

[data-theme="dark"] .sidebar {
    background-color: rgba(20, 20, 20, 0.9);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

/* 头部：字号加大 */
.sidebar-header {
    height: 88px; /* 增高 */
    padding: 0 28px;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    color: var(--text-primary);
    font-size: 24px; /* 从 19px -> 24px */
    font-weight: 800; 
    letter-spacing: -0.03em;
    background: linear-gradient(to bottom, transparent 95%, rgba(0,0,0,0.03) 100%);
}

.unit-list { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px 20px 60px 20px; /* 间距加大 */
}
.unit-list::-webkit-scrollbar { width: 0px; }

/* 🟢 Unit 大标题：字号加大 + 选中态 */
.unit-title {
    padding: 18px 20px; /* 更大的点击区域 */
    margin-bottom: 8px;
    font-size: 18px; /* 从 15px -> 18px */
    font-weight: 600;
    color: var(--text-primary); 
    border-radius: 14px; /* 更圆润 */
    background: transparent; 
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.8;
    
    /* 弹性布局，方便放箭头 */
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.unit-title:hover { 
    background-color: var(--hover-bg); 
    opacity: 1;
}

/* ✨ Unit 展开/选中状态 (JS会切换这个类) ✨ */
.unit-title.expanded {
    background-color: var(--hover-bg); /* 保持背景常驻 */
    color: var(--brand-color);         /* 变色 */
    font-weight: 700;                  /* 加粗 */
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* 可选：加个小箭头指示状态 */
.unit-title::after {
    content: "›"; 
    font-size: 22px; 
    line-height: 0;
    transform: rotate(90deg); /* 默认向下 */
    transition: transform 0.3s;
    color: var(--text-secondary);
    opacity: 0.5;
}
/* 展开时箭头旋转 */
.unit-title.expanded::after {
    transform: rotate(-90deg); /* 向上 */
    color: var(--brand-color);
    opacity: 1;
}


.file-list { 
    display: none; 
    margin-bottom: 24px; /* 组与组之间拉开距离 */
    padding-left: 10px; 
}

/* 🟢 音频单项：字号加大 */
.file-item {
    padding: 14px 20px; /* 更胖的胶囊 */
    margin: 6px 0;
    font-size: 16px; /* 从 14px -> 16px */
    color: var(--text-secondary); 
    border-radius: 12px;
    cursor: pointer; 
    transition: all 0.2s; 
    position: relative;
}

.file-item:hover { 
    background-color: var(--hover-bg); 
    color: var(--text-primary); 
}

.file-item.active { 
    background-color: var(--brand-color); 
    color: #ffffff; 
    font-weight: 500; 
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3);
    transform: scale(1.02);
}

/* 手机端适配 */
@media (max-width: 768px) {
    .sidebar { 
        width: 88%; /* 手机上也宽一点 */
        max-width: 360px;
        box-shadow: none; border-right: none;
    }
    .sidebar.open { 
        box-shadow: 10px 0 80px rgba(0,0,0,0.3);
    }
}

        /* --- 主界面 --- */
        .main { flex: 1; display: flex; flex-direction: column; position: relative; }

        .top-bar {
            position: absolute; top: 20px; left: 20px; right: 20px; z-index: 500;
            display: flex; gap: 12px; align-items: center; pointer-events: none;
        }
        .spacer { flex: 1; }
        .circle-btn {
            pointer-events: auto;
            width: 44px; height: 44px; border-radius: 50%;
            background: var(--bar-bg); border: 1px solid var(--sidebar-border);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; color: var(--text-primary);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            transition: transform 0.2s, box-shadow 0.2s, color 0.2s;
        }
        .circle-btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(0,0,0,0.12); color: var(--brand-color); }
        .circle-btn.focus-active { background-color: var(--brand-color); color: #fff; border-color: var(--brand-color); }
        .menu-btn { display: none; }

        #lyrics-container {
            flex: 1; overflow-y: auto; padding: 80px 20px 240px 20px;
            scroll-behavior: smooth; text-align: center;
        }
        .line {
            padding: 24px; margin-bottom: 24px; border-radius: 16px;
            cursor: pointer; opacity: 0.6; max-width: 800px;
            margin-left: auto; margin-right: auto;
            border: 1px solid transparent; 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .line:hover { opacity: 0.9; background: var(--hover-bg); transform: scale(1.01); }
        .line.active {
            opacity: 1; background: var(--highlight-bg);
            transform: scale(1.04); box-shadow: var(--highlight-shadow);
            border: 1px solid var(--brand-light);
        }

        .w {
            display: inline-block;
            border-radius: 4px;
            padding: 0 1px;
            transition: color 0.15s, background 0.15s;
        }
        .line.active .w.active {
            color: var(--word-active-color);
            background: var(--word-active-bg);
        }

        .en { font-size: 1.5em; font-weight: 700; margin-bottom: 12px; line-height: 1.6; color: var(--text-primary); }
        .cn { font-size: 1.1em; color: var(--text-secondary); line-height: 1.6; font-weight: 400; }
        .line.active .en { color: var(--line-active-color); }

        .bottom-bar {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
            width: 90%; max-width: 680px;
            background: rgb(255 255 255 / 15%);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--sidebar-border);
            border-radius: 28px;
            padding: 24px 32px;
            display: flex; flex-direction: column; gap: 16px;
            z-index: 900; 
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
        }
        @media (min-width: 769px) { .bottom-bar { left: calc(50% + 130px); } }

        .track-container {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            margin-bottom: 25px;
            margin-top: 5px;
        }

        .track-info {
            font-size: 20px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 600;
            opacity: 0.9;
        }

        .progress-container { display: flex; align-items: center; gap: 12px; width: 100%; }
        .time-text { font-size: 12px; color: var(--text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
        input[type=range] {
            -webkit-appearance: none; flex: 1; height: 5px; border-radius: 3px;
            background: var(--progress-bg); outline: none; cursor: pointer;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
            background: var(--brand-color); cursor: pointer; transition: transform 0.1s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.3); }

        .controls { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
        .ctrl-btn {
            background: none; border: none; cursor: pointer;
            color: var(--text-secondary); padding: 12px;
            display: flex; flex-direction: column; align-items: center;
            transition: 0.2s; border-radius: 50%;
        }
        .ctrl-btn:hover { color: var(--brand-color); background: var(--hover-bg); transform: scale(1.1); }

        .play-btn {
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--brand-color); color: #fff;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
            cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
        }
        .play-btn:hover { transform: scale(1.08); box-shadow: 0 12px 25px rgba(124, 58, 237, 0.5); }
        .play-btn svg { width: 28px; height: 28px; fill: #fff; }

        .speed-select {
            background: #ffffff40;
            color: var(--text-primary);
            border: 1px solid var(--sidebar-border);
            border-radius: 12px;
            padding: 0 10px;
            font-size: 13px;
            font-weight: 500;
            outline: none;
            cursor: pointer;
            height: 26px;
            width: 52px;
            appearance: none;
            -webkit-appearance: none;
            text-align: center;
            top: 0;
            right: 0;
            margin-left: 6px;
        }

        audio { display: none; }
        .overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 900; backdrop-filter: blur(4px); transition: opacity 0.3s; }
        .close-btn { display: none; cursor: pointer; padding: 10px; font-size: 20px; }

        @media (max-width: 768px) {
            .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 85%; transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .menu-btn { display: flex; } .close-btn { display: block; }
                .bottom-bar {
                    bottom: 0;
                    width: 100%;
                    max-width: 100%;
                    border-radius: 24px 24px 0 0;
                    left: 0;
                    transform: none;
                    border-bottom: none;
                    padding-bottom: 15px;
                    border-color: #00000012;
                    border-width: thin;
                }
            .line { scroll-margin-top: 80px; }
        }