/* ========== CSS变量 - 主题色 ========== */
        :root {
            /* 主色调 - 夜色香槟金 */
            --primary-color: #D4AF77;
            --primary-dark: #B8924F;
            --primary-light: #E8CFA0;
            --secondary-color: #7A8CA8;
            --accent-color: #C47B6A;

            /* 渐变 */
            --gradient-primary: linear-gradient(135deg, #E8CFA0 0%, #C9A66B 42%, #A67C3D 100%);
            --gradient-card: linear-gradient(155deg, rgba(232, 207, 160, 0.06) 0%, rgba(28, 27, 36, 0.9) 100%);
            --gradient-header: linear-gradient(180deg, rgba(12, 12, 16, 0.99) 0%, rgba(10, 10, 14, 0.97) 100%);

            /* 背景色 - 静夜黑 */
            --bg-primary: #0A0A0E;
            --bg-secondary: #121218;
            --bg-card: #18181F;
            --bg-card-hover: #22222C;
            --paper-grain: rgba(255, 248, 235, 0.018);

            /* 文字色 */
            --text-primary: #F5F1EA;
            --text-secondary: #9B958C;
            --text-tertiary: #6A655E;
            --text-accent: #E8CFA0;

            /* 边框 */
            --border-color: rgba(212, 175, 119, 0.2);
            --border-light: rgba(245, 241, 234, 0.06);

            /* 安全区 */
            --fm-safe-top: env(safe-area-inset-top, 0px);
            --fm-safe-bottom: env(safe-area-inset-bottom, 0px);
            --fm-safe-left: env(safe-area-inset-left, 0px);
            --fm-safe-right: env(safe-area-inset-right, 0px);

            /* 尺寸 */
            --header-height: 56px;
            --player-height: 0px; /* 迷你条已并入底栏 */
            --category-height: 44px;
            --bottom-nav-height: calc(50px + env(safe-area-inset-bottom, 0px));
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
        }

        /* ========== 亮色主题 ========== */
        html[data-theme="light"] {
            --primary-color: #B8924F;
            --primary-dark: #8F6E35;
            --primary-light: #C9A66B;
            --secondary-color: #5A6A82;
            --accent-color: #C47B6A;
            --gradient-primary: linear-gradient(135deg, #E8CFA0 0%, #C9A66B 42%, #A67C3D 100%);
            --gradient-card: linear-gradient(155deg, rgba(232, 207, 160, 0.12) 0%, rgba(255, 255, 255, 0.92) 100%);
            --gradient-header: linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(248, 244, 238, 0.96) 100%);
            --bg-primary: #F6F3EE;
            --bg-secondary: #EFEAE3;
            --bg-card: #FFFFFF;
            --bg-card-hover: #F3EDE4;
            --paper-grain: rgba(80, 60, 30, 0.03);
            --text-primary: #1C1915;
            --text-secondary: #5C564E;
            --text-tertiary: #8A8378;
            --text-accent: #8F6E35;
            --border-color: rgba(184, 146, 79, 0.28);
            --border-light: rgba(28, 25, 21, 0.08);
        }
        html[data-theme="light"] body {
            background-color: var(--bg-primary);
            color: var(--text-primary);
        }
        html[data-theme="light"] .header {
            background: var(--gradient-header);
            border-bottom-color: var(--border-light);
        }
        html[data-theme="light"] .category-nav,
        html[data-theme="light"] .sub-category-nav {
            background: var(--bg-secondary);
            border-bottom-color: var(--border-light);
        }
        html[data-theme="light"] .category-item.active {
            color: #1a1508;
        }
        html[data-theme="light"] .bottom-nav {
            background: rgba(255, 252, 247, 0.96);
            border-top-color: var(--border-light);
        }
        html[data-theme="light"] .mini-player {
            background: rgba(255, 252, 247, 0.96);
            border-top-color: var(--border-light);
            box-shadow: 0 -4px 20px rgba(80, 60, 30, 0.08);
        }
        html[data-theme="light"] .play-page {
            background: #F8F4EE;
        }
        html[data-theme="light"] .play-page-bg {
            filter: blur(60px) brightness(1.15) saturate(0.85);
            opacity: 0.45;
        }
        html[data-theme="light"] .play-page-book {
            color: #1C1915;
        }
        html[data-theme="light"] .play-page-title {
            color: rgba(28, 25, 21, 0.55);
        }
        html[data-theme="light"] .play-page-track-title {
            color: #1C1915;
        }
        html[data-theme="light"] .play-page-album-title {
            color: rgba(28, 25, 21, 0.5);
        }
        html[data-theme="light"] .progress-time {
            color: rgba(28, 25, 21, 0.45);
        }
        html[data-theme="light"] .progress-bar::before {
            background: rgba(28, 25, 21, 0.12);
        }
        html[data-theme="light"] .play-ctrl-btn {
            background: transparent;
            color: #1C1915;
        }
        html[data-theme="light"] .play-tool-btn {
            background: transparent;
            border: none;
            color: rgba(28, 25, 21, 0.65);
        }
        html[data-theme="light"] .play-tool-icon {
            background: transparent !important;
            box-shadow: none !important;
        }
        html[data-theme="light"] .play-tool-btn.active,
        html[data-theme="light"] .play-tool-btn.not-normal,
        html[data-theme="light"] .play-tool-btn.on {
            color: #8F6E35;
            background: transparent;
            border: none;
        }
        html[data-theme="light"] .play-tool-btn.active .play-tool-icon,
        html[data-theme="light"] .play-tool-btn.not-normal .play-tool-icon,
        html[data-theme="light"] .play-tool-btn.on .play-tool-icon {
            background: transparent !important;
            box-shadow: none !important;
        }
        html[data-theme="light"] .settings-page,
        html[data-theme="light"] .search-page,
        html[data-theme="light"] .detail-modal {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        html[data-theme="light"] .settings-header,
        html[data-theme="light"] .search-header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            color: var(--text-primary);
        }
        html[data-theme="light"] .settings-title,
        html[data-theme="light"] .settings-section-title {
            color: var(--text-primary);
        }
        html[data-theme="light"] .settings-section {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
        }
        html[data-theme="light"] .settings-textarea {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--border-color);
        }
        html[data-theme="light"] .timer-sheet {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        html[data-theme="light"] .timer-sheet-item:active {
            background: rgba(28, 25, 21, 0.05);
        }
        html[data-theme="light"] .source-dropdown,
        html[data-theme="light"] .src-sheet {
            background: var(--bg-card);
            color: var(--text-primary);
        }
        html[data-theme="light"] .book-title {
            color: var(--text-primary);
        }
        html[data-theme="light"] .book-author {
            color: var(--text-tertiary);
        }
        html[data-theme="light"] .track-title {
            color: var(--text-primary);
        }
        html[data-theme="light"] .track-item.playing {
            background: rgba(184, 146, 79, 0.12);
        }
        html[data-theme="light"] .detail-nav {
            background: rgba(255, 252, 247, 0.96);
            border-top-color: var(--border-light);
        }
        html[data-theme="light"] .theme-switch {
            background: rgba(28, 25, 21, 0.04);
        }
        .theme-switch {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        .theme-switch-btn {
            flex: 1;
            height: 40px;
            border-radius: 12px;
            border: 1px solid var(--border-light);
            background: var(--bg-card);
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .theme-switch-btn.active {
            border-color: rgba(212, 175, 119, 0.55);
            background: rgba(212, 175, 119, 0.18);
            color: var(--text-accent);
            box-shadow: 0 2px 10px rgba(212, 175, 119, 0.2);
        }
        .theme-switch-btn:active { transform: scale(0.97); }
        .ck-source-tabs { flex-wrap: wrap; margin-bottom: 10px; }
        .ck-source-tabs .theme-switch-btn { flex: 1 1 22%; min-width: 64px; font-size: 12px; height: 36px; }

        /* ========== 基础重置 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, "Microsoft YaHei", sans-serif;
            font-size: 14px;
            color: var(--text-primary);
            background-color: var(--bg-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ul, ol { list-style: none; }
        img { display: block; max-width: 100%; }
        button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
        input { border: none; outline: none; font-family: inherit; }
        a { text-decoration: none; color: inherit; }

        /* ========== 滚动条样式 ========== */
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

        /* ========== 主容器 ========== */
        .app {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding-left: var(--fm-safe-left);
            padding-right: var(--fm-safe-right);
        }

        /* ========== 顶部导航 ========== */
        .header {
            position: relative;
            z-index: 100;
            flex-shrink: 0;
            padding-top: var(--fm-safe-top);
            background: var(--gradient-header);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-light);
        }

        .header-content {
            height: var(--header-height);
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 12px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            min-width: 0;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 3px 10px rgba(212, 175, 119, 0.4);
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.4s ease;
            position: relative;
        }
        .logo-icon:active {
            transform: scale(0.92);
            box-shadow: 0 2px 6px rgba(212, 175, 119, 0.25);
        }
        .logo {
            cursor: pointer;
        }
        .logo-icon svg {
            width: 18px;
            height: 18px;
            display: block;
        }

        /* VIP Logo 变色（各站源不同颜色） */
        .logo-icon.vip {
            animation: vip-pulse 2.4s ease-in-out infinite;
        }
        /* 喜马拉雅 — 紫金 */
        .logo-icon.vip-ximalaya {
            --vip-glow: 192, 132, 252;
            background: linear-gradient(135deg, #C084FC 0%, #E879F9 30%, #FBBF24 70%, #F59E0B 100%);
            box-shadow: 0 3px 14px rgba(192, 132, 252, 0.5), 0 0 0 1px rgba(232, 121, 249, 0.2);
        }
        /* 酷我 — 金黄 */
        .logo-icon.vip-kuwo {
            --vip-glow: 255, 193, 7;
            background: linear-gradient(135deg, #FFD700 0%, #FFC107 40%, #FF8F00 100%);
            box-shadow: 0 3px 14px rgba(255, 193, 7, 0.5), 0 0 0 1px rgba(255, 152, 0, 0.2);
        }
        /* 网易 — 红色 */
        .logo-icon.vip-netease {
            --vip-glow: 236, 65, 65;
            background: linear-gradient(135deg, #FF6B6B 0%, #EC4141 50%, #C0392B 100%);
            box-shadow: 0 3px 14px rgba(236, 65, 65, 0.5), 0 0 0 1px rgba(255, 107, 107, 0.2);
        }
        /* 懒人 — 绿色 */
        .logo-icon.vip-lrts {
            --vip-glow: 76, 175, 80;
            background: linear-gradient(135deg, #81C784 0%, #4CAF50 50%, #388E3C 100%);
            box-shadow: 0 3px 14px rgba(76, 175, 80, 0.5), 0 0 0 1px rgba(129, 199, 132, 0.2);
        }
        .logo-icon.vip:active {
            box-shadow: 0 2px 8px rgba(var(--vip-glow, 192, 132, 252), 0.35);
        }
        @keyframes vip-pulse {
            0%, 100% { box-shadow: 0 3px 14px rgba(var(--vip-glow, 192, 132, 252), 0.45), 0 0 0 1px rgba(var(--vip-glow, 192, 132, 252), 0.2); }
            50% { box-shadow: 0 3px 18px rgba(var(--vip-glow, 192, 132, 252), 0.65), 0 0 0 1px rgba(var(--vip-glow, 192, 132, 252), 0.35); }
        }
        .logo-vip-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 7px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #fff;
            background: linear-gradient(135deg, #E879F9, #F59E0B);
            padding: 1px 3px;
            border-radius: 4px;
            line-height: 1.2;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
            pointer-events: none;
        }
        .logo-icon.vip-kuwo .logo-vip-badge { background: linear-gradient(135deg, #FFD700, #FF8F00); }
        .logo-icon.vip-netease .logo-vip-badge { background: linear-gradient(135deg, #FF6B6B, #C0392B); }
        .logo-icon.vip-lrts .logo-vip-badge { background: linear-gradient(135deg, #81C784, #388E3C); }

        .logo-text {
            display: none; /* 节省顶栏空间，避免溢出 */
        }

        .header-content {
            gap: 8px;
            position: relative;
        }
        .search-box {
            min-width: 0;
        }
        .header-source-tag {
            flex-shrink: 0;
        }

        .load-more-bar {
            padding: 16px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: 13px;
            grid-column: 1 / -1;
        }
        .load-more-bar .mini-spinner {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid var(--border-light);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            vertical-align: middle;
            margin-right: 6px;
        }

        .search-box {
            flex: 1;
            display: flex;
            align-items: center;
            height: 36px;
            background: var(--bg-card);
            border-radius: 18px;
            padding: 0 14px;
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
        }

        .search-box:focus-within {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(212, 175, 119, 0.15);
        }

        .search-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            color: var(--text-tertiary);
            margin-right: 8px;
        }

        .search-input {
            flex: 1;
            height: 100%;
            background: transparent;
            color: var(--text-primary);
            font-size: 14px;
        }

        .search-input::placeholder {
            color: var(--text-tertiary);
        }

        .search-clear {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--text-tertiary);
            color: var(--bg-primary);
            font-size: 12px;
            display: none;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .search-clear.visible {
            display: flex;
        }

        .category-btn {
            height: 34px;
            min-width: 34px;
            padding: 0 10px;
            border-radius: 17px;
            background: var(--bg-card);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            flex-shrink: 0;
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
            color: var(--text-secondary);
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
            background-clip: padding-box;
        }

        .category-btn:active {
            transform: scale(0.96);
            background: var(--bg-card-hover);
        }

        .category-btn svg {
            width: 15px;
            height: 15px;
            color: var(--primary-light);
            flex-shrink: 0;
        }
        .category-btn svg.src-switch-icon {
            width: 20px;
            height: 20px;
        }
        .category-btn .src-btn-text {
            max-width: 56px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-primary);
            letter-spacing: 0.02em;
        }
        /* logo 旁站源标签已去掉 */
        .header-source-tag { display: none !important; }
        .category-btn.active-src {
            border-color: rgba(212, 175, 119, 0.45);
            background: rgba(212, 175, 119, 0.14);
        }
        .category-btn.active-src .src-btn-text {
            color: var(--primary-light);
        }

        /* ========== 分类标签导航 ========== */
        .category-nav {
            flex-shrink: 0;
            height: var(--category-height);
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .category-nav::-webkit-scrollbar {
            display: none;
        }

        .category-list {
            display: inline-flex;
            align-items: center;
            height: 100%;
            padding: 0 12px;
            gap: 8px;
        }

        .category-item {
            display: inline-flex;
            align-items: center;
            height: 30px;
            padding: 0 14px;
            border-radius: 15px;
            font-size: 13px;
            color: var(--text-secondary);
            background: var(--bg-card);
            white-space: nowrap;
            transition: all 0.3s ease;
            position: relative;
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            background-clip: padding-box;
        }

        .category-item.active {
            color: #1a1508;
            background: var(--gradient-primary);
            box-shadow: 0 2px 12px rgba(212, 175, 119, 0.35), inset 0 1px 0 rgba(255,255,255,0.12);
            font-weight: 600;
            background-clip: padding-box;
        }

        .category-item:active {
            transform: scale(0.96);
        }


        /* 二级分类标签 */
        .sub-category-nav {
            flex-shrink: 0;
            background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(18,18,24,0.96) 100%);
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            display: none;
            min-height: 0;
        }
        .sub-category-nav.visible {
            display: block;
            min-height: 44px;
        }
        .sub-category-nav::-webkit-scrollbar { display: none; }
        .sub-category-list {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 10px;
        }
        .sub-category-item {
            display: inline-flex;
            align-items: center;
            height: 28px;
            padding: 0 12px;
            border-radius: 14px;
            font-size: 12px;
            color: var(--text-secondary);
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-light);
            white-space: nowrap;
            transition: all 0.2s ease;
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
            background-clip: padding-box;
        }
        .sub-category-item.active {
            color: #1a1508;
            background: var(--gradient-primary);
            border-color: transparent;
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(212, 175, 119, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
            background-clip: padding-box;
        }
        .sub-category-item:active { transform: scale(0.96); }

        /* ========== 主内容区 ========== */
        .main-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--player-height) + var(--bottom-nav-height) + 12px);
        }

        /* ========== 加载状态 ========== */
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: var(--text-tertiary);
        }

        .loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid var(--border-light);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 12px;
        }

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

        /* 播放器加载旋转动画 */
        .player-loading-spin {
            animation: spin 0.8s linear infinite;
            transform-origin: center;
        }

        .loading-text {
            font-size: 13px;
            color: var(--text-tertiary);
        }

        /* ========== 骨架屏 ========== */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }

        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .skeleton-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            padding: 16px;
        }

        .skeleton-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .skeleton-cover {
            width: 100%;
            padding-bottom: 140%;
            border-radius: var(--radius-md);
        }

        .skeleton-title {
            height: 14px;
            border-radius: 4px;
            width: 80%;
        }

        .skeleton-subtitle {
            height: 12px;
            border-radius: 4px;
            width: 60%;
        }

        /* ========== 错误提示 ========== */
        .error-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
        }

        .error-icon {
            font-size: 40px;
            margin-bottom: 12px;
        }

        .error-text {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .error-retry {
            padding: 8px 20px;
            border-radius: 20px;
            background: var(--gradient-primary);
            color: white;
            font-size: 13px;
            transition: all 0.3s ease;
        }

        .error-retry:active {
            transform: scale(0.96);
        }

        /* ========== 空状态 ========== */
        .empty-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
            color: var(--text-tertiary);
        }

        .empty-icon {
            font-size: 48px;
            margin-bottom: 12px;
            opacity: 0.6;
        }

        .empty-text {
            font-size: 14px;
            color: var(--text-tertiary);
        }

        /* ========== 热门推荐区域 ========== */
        .section {
            padding: 20px 16px 0;
        }

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title::before {
            content: '';
            width: 4px;
            height: 16px;
            border-radius: 2px;
            background: var(--gradient-primary);
        }

        .section-more {
            font-size: 12px;
            color: var(--text-tertiary);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* 热门横向滚动 */
        .hot-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0 -16px;
            padding: 0 16px;
        }

        .hot-scroll::-webkit-scrollbar {
            display: none;
        }

        .hot-list {
            display: inline-flex;
            gap: 12px;
            padding-bottom: 4px;
        }

        .hot-card {
            width: 120px;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .hot-card:active {
            transform: scale(0.97);
        }

        .hot-cover {
            position: relative;
            width: 120px;
            height: 160px;
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

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

        .hot-play-count {
            position: absolute;
            bottom: 6px;
            right: 6px;
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            color: white;
            background: rgba(0, 0, 0, 0.6);
            padding: 2px 6px;
            border-radius: 8px;
        }

        .hot-title {
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 4px;
        }

        .hot-author {
            font-size: 11px;
            color: var(--text-tertiary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ========== 书籍网格 ========== */
        .book-grid {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 12px;
            padding: 0 16px 16px;
            align-items: start;
        }

        @media (min-width: 600px) {
            .book-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            }
        }

        /* 横屏：卡片 7 列 */
        @media (orientation: landscape) {
            .book-grid {
                grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
                gap: 10px;
                padding: 0 12px 12px;
            }
            .book-card .book-title {
                font-size: 11px;
            }
            .book-card .book-author {
                font-size: 10px;
            }
        }

        .book-card {
            cursor: pointer;
            transition: transform 0.2s ease;
            width: 100%;
            min-width: 0;
            max-width: 100%;
            display: flex;
            flex-direction: column;
        }

        .book-card:active {
            transform: scale(0.97);
        }

        .book-cover {
            position: relative;
            width: 100%;
            aspect-ratio: 3 / 4;
            height: auto;
            padding-bottom: 0 !important;
            border-radius: var(--radius-md);
            overflow: hidden;
            margin-bottom: 8px;
            background: var(--bg-card);
            flex-shrink: 0;
        }

        .book-cover img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .book-cover .no-cover-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            opacity: 0.35;
            background: linear-gradient(145deg, #1a1a22, #121218);
        }

        .book-status {
            position: absolute;
            top: 6px;
            left: 6px;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
        }

        .book-status.vip {
            background: linear-gradient(135deg, #F59E0B, #D97706);
        }

        .book-status.free {
            background: linear-gradient(135deg, #10B981, #059669);
        }

        .book-title {
            font-size: 13px;
            color: var(--text-primary);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 4px;
            min-height: 34px;
        }

        .book-author {
            font-size: 11px;
            color: var(--text-tertiary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 加载更多 */
        .load-more {
            padding: 20px;
            text-align: center;
            color: var(--text-tertiary);
            font-size: 13px;
        }

        /* ========== 底部迷你播放器 ========== */
        .mini-player {
            position: fixed;
            bottom: var(--bottom-nav-height);
            left: var(--fm-safe-left);
            right: var(--fm-safe-right);
            height: var(--player-height);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            padding-left: 14px;
            padding-right: 14px;
            gap: 10px;
            /* 提到所有内容页之上(详情450/源面板500/搜索400)，但低于全屏播放页(9998)与toast(9999) */
            z-index: 600;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            transition: bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* 迷你播放器始终位于底栏上方，叠层打开时也不下沉 */
        body.overlay-active .mini-player {
            bottom: var(--bottom-nav-height);
        }

        /* 搜索页打开时，迷你播放器沉到底部（搜索页没有底栏） */
        body.search-active .mini-player {
            bottom: 0 !important;
        }

        /* 详情页打开时，迷你播放器回到详情底栏上方（优先级高于 search-active） */
        body.detail-open .mini-player {
            bottom: var(--bottom-nav-height) !important;
        }

        .mini-player.hidden {
            display: none;
        }

        /* ========== 迷你播放器：下滑隐藏 / 胶片原盘 ========== */
        .mini-player {
            touch-action: pan-y;
            will-change: transform, opacity;
        }
        .mini-player.swipe-dragging {
            transition: none !important;
        }
        .mini-player.swipe-out {
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease !important;
            transform: translateY(110%);
            opacity: 0;
            pointer-events: none;
        }
        body.mini-chrome-hidden .mini-player {
            display: none !important;
        }
        body.mini-chrome-disc .mini-player {
            display: none !important;
        }
        /* 胶片模式：隐藏主底栏 + 详情底栏；完全隐藏模式只藏迷你条 */
        body.mini-chrome-disc .bottom-nav,
        body.mini-chrome-disc .detail-nav {
            transform: translateY(110%);
            opacity: 0;
            pointer-events: none;
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
        }
        .bottom-nav,
        .detail-nav {
            transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease, background 0.2s ease;
        }
        /* ========== 胶片原盘：底栏原位置居中 ========== */
        .float-disc {
            position: fixed;
            left: 50%;
            bottom: calc(var(--fm-safe-bottom, 0px) + 10px);
            width: 86px;
            height: 86px;
            z-index: 620;
            margin: 0;
            border-radius: 50%;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: none;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            /* 默认：居中 + 收起态 */
            transform: translateX(-50%) scale(0.45) translateY(28px);
            transition:
                opacity 0.34s ease,
                transform 0.42s cubic-bezier(0.34, 1.35, 0.64, 1),
                visibility 0.34s,
                filter 0.35s ease;
            filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
        }
        .float-disc.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) scale(1) translateY(0);
        }
        .float-disc:active {
            transform: translateX(-50%) scale(0.92) translateY(2px);
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
        }
        .float-disc-spin {
            position: absolute;
            inset: 0;
            border-radius: 50%;
        }
        /* 外圈光晕环 */
        .float-disc-ring {
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            background: conic-gradient(
                from 210deg,
                rgba(232, 207, 160, 0.0),
                rgba(232, 207, 160, 0.55),
                rgba(198, 167, 94, 0.15),
                rgba(232, 207, 160, 0.0),
                rgba(184, 146, 79, 0.4),
                rgba(232, 207, 160, 0.0)
            );
            opacity: 0.55;
            z-index: 0;
            pointer-events: none;
            filter: blur(0.5px);
        }
        .float-disc.playing .float-disc-ring {
            animation: float-ring-spin 6s linear infinite;
            opacity: 0.85;
        }
        @keyframes float-ring-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        /* 黑胶盘体 */
        .float-disc-vinyl {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            z-index: 1;
            background:
                /* 中心透明留给封面 */
                radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(12,10,9,0.98) 28%),
                /* 细密纹路 */
                repeating-radial-gradient(
                    circle at 50% 50%,
                    rgba(255,255,255,0.035) 0px,
                    rgba(255,255,255,0.035) 1px,
                    transparent 1.5px,
                    transparent 3.5px
                ),
                /* 明暗分区 */
                radial-gradient(circle at 32% 28%, rgba(70, 62, 52, 0.55) 0%, transparent 42%),
                radial-gradient(circle at 72% 78%, rgba(0,0,0,0.55) 0%, transparent 48%),
                linear-gradient(145deg, #2c2824 0%, #141210 45%, #0c0b0a 100%);
            box-shadow:
                inset 0 0 0 1.5px rgba(232, 207, 160, 0.28),
                inset 0 0 0 3px rgba(20, 16, 12, 0.9),
                inset 0 2px 6px rgba(255, 248, 235, 0.08),
                inset 0 -4px 14px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(0, 0, 0, 0.4);
        }
        /* 内圈金属环 */
        .float-disc-vinyl::before {
            content: '';
            position: absolute;
            inset: 26%;
            border-radius: 50%;
            border: 1.5px solid rgba(232, 207, 160, 0.35);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.5),
                inset 0 0 6px rgba(0, 0, 0, 0.4);
            pointer-events: none;
            z-index: 1;
        }
        /* 高光反射弧 */
        .float-disc-vinyl::after {
            content: '';
            position: absolute;
            inset: 4%;
            border-radius: 50%;
            background: linear-gradient(
                125deg,
                rgba(255, 255, 255, 0.14) 0%,
                rgba(255, 255, 255, 0.04) 22%,
                transparent 38%,
                transparent 62%,
                rgba(0, 0, 0, 0.18) 100%
            );
            pointer-events: none;
            z-index: 3;
        }
        /* 中央圆形封面 */
        .float-disc-cover {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40%;
            height: 40%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(145deg, #3a342c, #1a1814);
            box-shadow:
                0 0 0 2px rgba(232, 207, 160, 0.45),
                0 0 0 3.5px rgba(20, 16, 12, 0.95),
                0 2px 10px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
            z-index: 2;
        }
        .float-disc-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        /* 播放时：整盘旋转（封面随盘体一起转更自然） */
        .float-disc.playing .float-disc-spin {
            animation: float-vinyl-spin 7.5s linear infinite;
        }
        @keyframes float-vinyl-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        /* 播放呼吸光 */
        .float-disc.playing {
            filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55))
                    drop-shadow(0 0 16px rgba(212, 175, 119, 0.28));
        }
        html[data-theme="light"] .float-disc {
            filter: drop-shadow(0 10px 24px rgba(80, 60, 30, 0.28));
        }
        html[data-theme="light"] .float-disc.playing {
            filter: drop-shadow(0 10px 24px rgba(80, 60, 30, 0.28))
                    drop-shadow(0 0 14px rgba(184, 146, 79, 0.35));
        }
        html[data-theme="light"] .float-disc-vinyl {
            background:
                radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(40, 34, 28, 0.96) 28%),
                repeating-radial-gradient(
                    circle at 50% 50%,
                    rgba(255,255,255,0.05) 0px,
                    rgba(255,255,255,0.05) 1px,
                    transparent 1.5px,
                    transparent 3.5px
                ),
                radial-gradient(circle at 32% 28%, rgba(120, 100, 70, 0.35) 0%, transparent 42%),
                linear-gradient(145deg, #5a5046 0%, #3a342c 50%, #2a2420 100%);
            box-shadow:
                inset 0 0 0 1.5px rgba(184, 146, 79, 0.4),
                inset 0 0 0 3px rgba(40, 34, 28, 0.85),
                inset 0 2px 6px rgba(255, 255, 255, 0.12),
                inset 0 -4px 12px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(0, 0, 0, 0.12);
        }
        html[data-theme="light"] .float-disc-ring {
            opacity: 0.7;
        }
        /* 胶片模式：主内容与详情内容底部留空给原盘 */
        body.mini-chrome-disc .main-content {
            padding-bottom: calc(var(--fm-safe-bottom, 0px) + 110px);
        }
        body.mini-chrome-disc .detail-body {
            padding-bottom: calc(var(--fm-safe-bottom, 0px) + 110px) !important;
        }
        body.mini-chrome-hidden .main-content {
            padding-bottom: calc(var(--bottom-nav-height) + 12px);
        }
        /* 全屏播放页打开时隐藏胶片 */
        body.play-page-open .float-disc {
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }



        .player-cover {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
            background: rgba(255,255,255,0.06);
        }
        .player-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .player-cover.empty {
            display: none;
        }

        .player-music-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(212, 175, 119, 0.35);
        }

        .player-music-icon svg {
            width: 18px;
            height: 18px;
            display: block;
        }

        .player-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
        }

        .player-album {
            font-size: 13px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .player-track {
            font-size: 11px;
            color: var(--text-tertiary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

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

        .player-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            transition: all 0.2s ease;
        }

        .player-btn:active {
            transform: scale(0.9);
            color: var(--primary-light);
        }

        .player-btn svg {
            width: 20px;
            height: 20px;
        }

        .player-btn.play-btn {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            color: white;
            box-shadow: 0 2px 8px rgba(212, 175, 119, 0.4);
        }

        .player-btn.play-btn svg {
            width: 18px;
            height: 18px;
        }

        /* ========== 书籍详情全屏页（真正铺满视口，含状态栏区域） ========== */
        .detail-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            z-index: 450;
            visibility: hidden;
            pointer-events: none;
            background: var(--bg-primary);
            transform: translate3d(100%, 0, 0);
            transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
            opacity: 0;
            overflow: hidden;
            /* 关键 pan-y：否则部分 WebView 水平 preventDefault 无效，手势被滚动吃掉 */
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }

        .detail-modal.active {
            visibility: visible;
            pointer-events: auto;
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }

        /* 播放页(9998) 与详情页 谁后打开谁在上 —— 由 JS 动态交换 inline z-index 决定。
           CSS 这里只给兜底值：详情页默认抬到 9999，避免从播放页点推荐时被 9998 盖住。 */
        body.detail-open .detail-modal {
            z-index: 9999;
        }

        .detail-modal.gesture-dragging {
            transition: none !important;
        }

        .detail-overlay {
            display: none !important;
        }

        .detail-panel {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 返回按钮已移除，仅手势 / 系统返回 */
        .detail-float-back,
        .detail-header,
        .detail-close,
        .detail-title,
        .detail-placeholder { display: none !important; }

        .detail-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            /* 顶到屏幕最上，背景铺进状态栏区域 */
            padding-top: 0;
            /* 底部留出迷你播放器空间避免曲目列表被遮挡 */
            padding-bottom: calc(var(--player-height) + 12px);
        }

        /* 详情页底栏：收藏 / 原盘 / 播放或续播 */
        .detail-nav {
            flex-shrink: 0;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-light);
            display: flex;
            align-items: stretch;
            justify-content: space-around;
            padding-bottom: var(--fm-safe-bottom);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .detail-nav .bottom-nav-btn {
            color: var(--text-tertiary);
        }
        .detail-nav .bottom-nav-btn.heart-beat svg {
            animation: heart-beat 0.55s ease;
        }
        .play-tool-btn.heart-beat svg {
            animation: heart-beat 0.55s ease;
        }
        @keyframes heart-beat {
            0% { transform: scale(1); }
            25% { transform: scale(1.35); }
            45% { transform: scale(0.9); }
            65% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        .detail-nav .bottom-nav-btn.active {
            color: var(--primary-color);
        }
        .detail-nav .bottom-nav-btn.active svg {
            filter: drop-shadow(0 1px 4px rgba(212, 175, 119, 0.35));
        }

        /* 详情底栏：有进度时中央原盘替代「继续收听」 */
        .detail-nav {
            position: relative;
            min-height: 48px;
            align-items: flex-end;
            padding-top: 2px;
        }
        .detail-nav.has-disc {
            padding-top: 0;
        }
        .detail-nav-disc {
            position: relative;
            flex: 0 0 auto;
            width: 64px;
            height: 64px;
            margin: 0 4px;
            top: -16px;
            margin-bottom: -8px;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            z-index: 2;
            filter: none;
            transition: transform 0.2s ease;
            align-self: center;
        }
        .detail-nav.has-disc .detail-nav-disc {
            display: flex;
        }
        .detail-nav-disc:active {
            transform: scale(0.94);
        }
        .detail-nav-disc-ring {
            display: none;
        }
        .detail-nav-disc.playing .detail-nav-disc-ring {
            animation: detail-disc-ring-spin 6s linear infinite;
            opacity: 0.9;
        }
        @keyframes detail-disc-ring-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .detail-nav-disc-spin {
            position: absolute;
            top: 0;
            left: 50%;
            width: 64px;
            height: 64px;
            transform: translateX(-50%);
            border-radius: 50%;
            z-index: 1;
        }
        .detail-nav-disc.playing .detail-nav-disc-spin {
            animation: detail-disc-spin 7.5s linear infinite;
        }
        @keyframes detail-disc-spin {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }
        .detail-nav-disc-vinyl {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(145deg, #3a342c 0%, #25211c 100%);
            box-shadow: none;
            overflow: hidden;
        }
        .detail-nav-disc-cover {
            position: absolute;
            inset: 2px;
            top: 2px; left: 2px; right: 2px; bottom: 2px;
            width: auto; height: auto;
            transform: none;
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(145deg, #3a342c, #1e1b17);
            box-shadow: none;
            border: none;
            z-index: 2;
        }
        .detail-nav-disc-cover img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
        }
        .detail-nav-disc-label { display: none !important; }

        html[data-theme="light"] .detail-nav-disc {
            filter: none;
        }

        html[data-theme="light"] .detail-nav-disc-label {
            display: none !important;
        }
        /* 无原盘时两按钮更舒展 */
        .detail-nav:not(.has-disc) .bottom-nav-btn {
            flex: 1;
        }


        .detail-hero {
            display: flex;
            gap: 14px;
            /* 内容避开状态栏图标，背景仍铺满顶部 */
            padding: calc(var(--fm-safe-top, 0px) + 16px) 16px 20px;
            background: var(--gradient-card);
        }

        .detail-cover {
            width: 100px;
            height: 140px;
            border-radius: var(--radius-md);
            overflow: hidden;
            flex-shrink: 0;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

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

        .detail-meta {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .detail-book-title {
            font-size: 17px;
            font-weight: 600;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 6px;
        }

        .detail-book-author {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .detail-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 8px;
        }

        .detail-tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(212, 175, 119, 0.2);
            color: var(--primary-light);
        }

        /* 书籍标签容器：与外层 .detail-tags 同步 6px 间距（含换行行距） */
        .detail-book-tags {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }

        .detail-stats {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: var(--text-tertiary);
        }

        .detail-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* 简介 */
        .detail-section {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }

        .detail-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .detail-section-title::before {
            content: '';
            width: 3px;
            height: 14px;
            border-radius: 2px;
            background: var(--gradient-primary);
        }

        .detail-intro {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .detail-intro.expanded {
            display: block;
            -webkit-line-clamp: unset;
        }

        .detail-intro-toggle {
            display: inline-block;
            margin-top: 8px;
            font-size: 12px;
            color: var(--primary-light);
        }

        /* 章节列表 */
        .track-list {
            padding: 0 16px 16px;
        }

        .track-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .track-item:active {
            background: var(--bg-card);
        }

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

        .track-index {
            width: 28px;
            font-size: 13px;
            color: var(--text-tertiary);
            text-align: center;
            flex-shrink: 0;
        }

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

        .track-title {
            font-size: 14px;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }

        .track-item.playing .track-title {
            color: var(--primary-light);
        }

        .track-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--text-tertiary);
        }

        .track-badge {
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 3px;
        }

        .track-badge.free {
            background: rgba(16, 185, 129, 0.2);
            color: #34D399;
        }

        .track-badge.vip {
            background: rgba(245, 158, 11, 0.2);
            color: #FBBF24;
        }

        .track-badge.paid {
            background: rgba(236, 72, 153, 0.2);
            color: #F472B6;
        }
        .track-badge.money {
            background: transparent;
            color: #F5C542;
            font-size: 12px;
            font-weight: 700;
            padding: 0 2px;
            letter-spacing: 0;
            line-height: 1;
        }

        .track-play-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            flex-shrink: 0;
        }

        .track-play-icon svg {
            width: 16px;
            height: 16px;
        }

        .track-item.playing .track-play-icon {
            color: var(--primary-light);
        }

        /* ========== 搜索界面 ========== */
        .search-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-primary);
            z-index: 400;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            padding-left: var(--fm-safe-left);
            padding-right: var(--fm-safe-right);
        }

        .search-page.active {
            transform: translateX(0);
        }

        .search-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: calc(var(--fm-safe-top) + 8px) 12px 8px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-light);
        }

        .search-back {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            flex-shrink: 0;
        }

        .search-back svg {
            width: 20px;
            height: 20px;
        }

        .search-page .search-box {
            flex: 1;
        }

        .search-body {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* 搜索页迷你播放器在底部，留出空间避免结果被遮挡 */
            padding-bottom: calc(var(--player-height) + 12px);
        }

        /* 搜索历史 */
        .search-history {
            padding: 16px;
        }

        .search-history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .search-history-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .search-history-clear {
            font-size: 12px;
            color: var(--text-tertiary);
        }

        .search-history-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .search-history-tag {
            padding: 6px 12px;
            border-radius: 16px;
            background: var(--bg-card);
            font-size: 13px;
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }

        .search-history-tag:active {
            background: var(--bg-card-hover);
        }

        /* 搜索结果 */
        .search-results {
            padding: 12px 0;
        }


        /* ========== 设置页面 ========== */
        .settings-page {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            background: var(--bg-primary);
            z-index: 480;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex;
            flex-direction: column;
            padding-left: var(--fm-safe-left);
            padding-right: var(--fm-safe-right);
        }

        /* 设置页分模式：我的 / Cookie */

        /* TG 频道联系 */
        .contact-card {
            display: block;
            text-decoration: none;
            color: inherit;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
            background:
                radial-gradient(ellipse at 0% 0%, rgba(56, 168, 232, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse at 100% 100%, rgba(42, 140, 210, 0.1) 0%, transparent 50%),
                linear-gradient(155deg, rgba(40, 48, 58, 0.95) 0%, rgba(28, 32, 40, 0.98) 100%);
            border: 1px solid rgba(100, 180, 230, 0.22);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            transition: transform 0.15s ease, border-color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .contact-card:active {
            transform: scale(0.98);
        }
        html[data-theme="light"] .contact-card {
            background:
                radial-gradient(ellipse at 0% 0%, rgba(56, 168, 232, 0.15) 0%, transparent 55%),
                linear-gradient(155deg, #f4f9fc 0%, #e8f2f8 100%);
            border-color: rgba(56, 140, 200, 0.25);
            box-shadow: 0 4px 14px rgba(40, 100, 140, 0.08);
        }
        .contact-card-inner {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .contact-tg-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #2AABEE 0%, #229ED9 100%);
            box-shadow: 0 4px 12px rgba(34, 158, 217, 0.4);
        }
        .contact-tg-icon svg {
            width: 26px;
            height: 26px;
            fill: #fff;
        }
        .contact-meta {
            flex: 1;
            min-width: 0;
        }
        .contact-meta-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        .contact-meta-sub {
            font-size: 12px;
            color: #5BB8E8;
            letter-spacing: 0.02em;
        }
        html[data-theme="light"] .contact-meta-sub {
            color: #1A8AC7;
        }
        .contact-meta-hint {
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-tertiary);
        }
        .contact-arrow {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            color: var(--text-tertiary);
            opacity: 0.7;
        }
        .contact-qr {
            margin-top: 14px;
            display: flex;
            justify-content: center;
        }
        .contact-qr img {
            width: 140px;
            height: 140px;
            border-radius: 12px;
            background: #fff;
            padding: 8px;
            object-fit: contain;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        }


        /* 我的页：与设置页同壳样式 */
        .mine-page {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            background: var(--bg-primary);
            z-index: 480;
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
            display: flex;
            flex-direction: column;
            padding-left: var(--fm-safe-left);
            padding-right: var(--fm-safe-right);
        }
        .mine-page.active {
            transform: translateX(0);
        }
        html[data-theme="light"] .mine-page {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .settings-page.active {
            transform: translateX(0);
        }
        .settings-header {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: calc(var(--fm-safe-top) + 8px) 12px 12px;
            background: var(--bg-secondary);
            border-bottom: 1px solid rgba(180, 150, 100, 0.12);
        }
        .settings-back {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            flex-shrink: 0;
        }
        .settings-back:active { color: var(--primary-light); }
        .settings-back svg { width: 20px; height: 20px; }
        .settings-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1;
        }
        .settings-body {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 16px 16px calc(var(--player-height) + var(--bottom-nav-height) + 24px);
        }
        .settings-section {
            background: var(--bg-card);
            border: 1px solid rgba(180, 150, 100, 0.14);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 14px;
            box-shadow: inset 0 1px 0 rgba(255,248,235,0.04), 0 4px 16px rgba(0,0,0,0.18);
        }
        .settings-section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .settings-section-title::before {
            content: '';
            width: 3px;
            height: 14px;
            border-radius: 2px;
            background: linear-gradient(180deg, #E4C878, #9A7B3C);
            flex-shrink: 0;
        }
        .settings-section-desc {
            font-size: 12px;
            color: var(--text-tertiary);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }
        .settings-row-label {
            font-size: 14px;
            color: var(--text-primary);
            flex: 1;
        }
        .settings-row-hint {
            display: block;
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 3px;
            line-height: 1.35;
        }
        .settings-mini-btn {
            flex-shrink: 0;
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .settings-mini-btn:active { opacity: 0.7; }
        /* 开关按钮 */
        .ui-switch {
            position: relative;
            width: 44px;
            height: 26px;
            border-radius: 13px;
            background: rgba(255,255,255,0.15);
            border: none;
            cursor: pointer;
            transition: background 0.25s ease;
            flex-shrink: 0;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        .ui-switch::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            transition: left 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
        }
        .ui-switch.on {
            background: linear-gradient(135deg, #E8CFA0, #B8924F);
        }
        .ui-switch.on::after {
            left: 21px;
        }

        /* ========== 收听数据统计 ========== */
        .stats-hero {
            position: relative;
            border-radius: 18px;
            padding: 18px 16px 16px;
            margin-bottom: 14px;
            overflow: hidden;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(232, 207, 160, 0.22) 0%, transparent 55%),
                radial-gradient(ellipse at 100% 100%, rgba(166, 124, 61, 0.14) 0%, transparent 50%),
                linear-gradient(155deg, rgba(55, 48, 40, 0.95) 0%, rgba(32, 28, 24, 0.98) 100%);
            border: 1px solid rgba(232, 207, 160, 0.18);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 235, 0.06);
        }
        html[data-theme="light"] .stats-hero {
            background:
                radial-gradient(ellipse at 10% 0%, rgba(232, 207, 160, 0.45) 0%, transparent 55%),
                radial-gradient(ellipse at 100% 80%, rgba(212, 175, 119, 0.2) 0%, transparent 50%),
                linear-gradient(155deg, #fff9f0 0%, #f3ebe0 100%);
            border-color: rgba(184, 146, 79, 0.22);
            box-shadow: 0 6px 20px rgba(120, 90, 40, 0.1), inset 0 1px 0 rgba(255,255,255,0.8);
        }
        .stats-hero-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
        }
        .stats-hero-label {
            font-size: 12px;
            color: rgba(232, 207, 160, 0.75);
            letter-spacing: 0.06em;
            margin-bottom: 6px;
        }
        html[data-theme="light"] .stats-hero-label {
            color: rgba(140, 110, 60, 0.75);
        }
        .stats-hero-time {
            font-size: 32px;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            background: linear-gradient(135deg, #F5E6C8 0%, #D4AF77 50%, #C9A05A 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        html[data-theme="light"] .stats-hero-time {
            background: linear-gradient(135deg, #8B6914 0%, #B8860B 50%, #6B5220 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .stats-hero-sub {
            margin-top: 4px;
            font-size: 12px;
            color: var(--text-tertiary);
        }
        .stats-ring-wrap {
            position: relative;
            width: 64px;
            height: 64px;
            flex-shrink: 0;
        }
        .stats-ring-wrap svg {
            width: 64px;
            height: 64px;
            transform: rotate(-90deg);
        }
        .stats-ring-bg {
            fill: none;
            stroke: rgba(255,255,255,0.08);
            stroke-width: 5;
        }
        html[data-theme="light"] .stats-ring-bg {
            stroke: rgba(184, 146, 79, 0.18);
        }
        .stats-ring-fg {
            fill: none;
            stroke: url(#statsRingGrad);
            stroke-width: 5;
            stroke-linecap: round;
            stroke-dasharray: 163.36;
            stroke-dashoffset: 163.36;
            transition: stroke-dashoffset 0.6s ease;
        }
        .stats-ring-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .stats-ring-pct {
            font-size: 13px;
            font-weight: 700;
            color: #E8CFA0;
            line-height: 1;
        }
        html[data-theme="light"] .stats-ring-pct {
            color: #8F6E35;
        }
        .stats-ring-cap {
            font-size: 9px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .stats-cell {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(232, 207, 160, 0.1);
            border-radius: 12px;
            padding: 12px 8px;
            text-align: center;
        }
        html[data-theme="light"] .stats-cell {
            background: rgba(255,255,255,0.65);
            border-color: rgba(184, 146, 79, 0.14);
        }
        .stats-cell-val {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
        .stats-cell-val em {
            font-style: normal;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-tertiary);
            margin-left: 1px;
        }
        .stats-cell-label {
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-tertiary);
        }
        .stats-week-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 4px;
            margin-top: 14px;
            height: 48px;
            padding: 0 2px;
        }
        .stats-week-bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            height: 100%;
            justify-content: flex-end;
        }
        .stats-week-bar-fill {
            width: 100%;
            max-width: 28px;
            border-radius: 6px 6px 3px 3px;
            background: linear-gradient(180deg, #E8CFA0 0%, #A67C3D 100%);
            min-height: 3px;
            opacity: 0.35;
            transition: height 0.4s ease, opacity 0.3s ease;
        }
        .stats-week-bar.is-today .stats-week-bar-fill {
            opacity: 1;
            box-shadow: 0 0 10px rgba(232, 207, 160, 0.35);
        }
        .stats-week-bar.has-data .stats-week-bar-fill {
            opacity: 0.85;
        }
        .stats-week-bar-day {
            font-size: 10px;
            color: var(--text-tertiary);
        }
        .stats-week-bar.is-today .stats-week-bar-day {
            color: #E8CFA0;
            font-weight: 600;
        }
        html[data-theme="light"] .stats-week-bar.is-today .stats-week-bar-day {
            color: #8F6E35;
        }
        .stats-footer-tip {
            margin-top: 12px;
            font-size: 11px;
            color: var(--text-tertiary);
            text-align: center;
            opacity: 0.85;
        }

        /* ========== 收听类型分析 ========== */
        .stats-type-card {
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(232, 207, 160, 0.14) 0%, transparent 55%),
                linear-gradient(155deg, rgba(48, 42, 36, 0.92) 0%, rgba(30, 26, 22, 0.95) 100%);
            border: 1px solid rgba(232, 207, 160, 0.14);
        }
        html[data-theme="light"] .stats-type-card {
            background:
                radial-gradient(ellipse at 10% 0%, rgba(232, 207, 160, 0.3) 0%, transparent 55%),
                linear-gradient(155deg, #fff9f0 0%, #f5efe4 100%);
            border-color: rgba(184, 146, 79, 0.18);
        }
        .stats-type-card-title {
            font-size: 14px;
            font-weight: 600;
            color: #E8CFA0;
            margin-bottom: 14px;
            letter-spacing: 0.02em;
        }
        html[data-theme="light"] .stats-type-card-title { color: #8B6914; }
        .stats-type-card-body {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .stats-type-pie-wrap {
            position: relative;
            width: 92px;
            height: 92px;
            flex-shrink: 0;
        }
        .stats-type-pie {
            width: 92px;
            height: 92px;
            border-radius: 50%;
            transition: background 0.4s ease;
        }
        .stats-type-pie.empty {
            background: rgba(255, 255, 255, 0.06);
        }
        html[data-theme="light"] .stats-type-pie.empty {
            background: rgba(184, 146, 79, 0.12);
        }
        .stats-type-pie-hole {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 56px; height: 56px;
            border-radius: 50%;
            background: rgba(32, 28, 24, 0.98);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            pointer-events: none;
        }
        html[data-theme="light"] .stats-type-pie-hole { background: #f5efe4; }
        .stats-type-pie-total {
            font-size: 16px;
            font-weight: 700;
            color: #E8CFA0;
            line-height: 1.1;
        }
        html[data-theme="light"] .stats-type-pie-total { color: #8B6914; }
        .stats-type-pie-total em {
            font-size: 11px;
            font-weight: 400;
            font-style: normal;
            margin-left: 1px;
        }
        .stats-type-pie-label {
            font-size: 10px;
            color: var(--text-tertiary);
            margin-top: 1px;
        }
        .stats-type-legend {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .stats-type-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
        }
        .stats-type-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .stats-type-name {
            color: rgba(255, 255, 255, 0.85);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        html[data-theme="light"] .stats-type-name { color: rgba(60, 45, 20, 0.85); }
        .stats-type-pct {
            font-weight: 700;
            color: #E8CFA0;
            font-size: 13px;
        }
        html[data-theme="light"] .stats-type-pct { color: #8B6914; }
        .stats-type-dur {
            color: var(--text-tertiary);
            font-size: 12px;
            min-width: 40px;
            text-align: right;
        }
        .stats-type-empty {
            font-size: 13px;
            color: var(--text-tertiary);
            padding: 8px 0;
        }

        /* ========== 收听排行 ========== */
        .stats-rank-card {
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(232, 207, 160, 0.14) 0%, transparent 55%),
                linear-gradient(155deg, rgba(48, 42, 36, 0.92) 0%, rgba(30, 26, 22, 0.95) 100%);
            border: 1px solid rgba(232, 207, 160, 0.14);
        }
        html[data-theme="light"] .stats-rank-card {
            background:
                radial-gradient(ellipse at 10% 0%, rgba(232, 207, 160, 0.3) 0%, transparent 55%),
                linear-gradient(155deg, #fff9f0 0%, #f5efe4 100%);
            border-color: rgba(184, 146, 79, 0.18);
        }
        .stats-rank-title {
            font-size: 14px;
            font-weight: 600;
            color: #E8CFA0;
            margin-bottom: 12px;
            letter-spacing: 0.02em;
        }
        html[data-theme="light"] .stats-rank-title { color: #8B6914; }
        .stats-rank-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .stats-rank-item {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 6px 4px;
            border-radius: 10px;
            transition: background 0.2s;
        }
        .stats-rank-item:active { background: rgba(255,255,255,0.04); }
        html[data-theme="light"] .stats-rank-item:active { background: rgba(184,146,79,0.06); }
        .stats-rank-num {
            width: 24px; height: 24px;
            border-radius: 50%;
            background: rgba(232, 207, 160, 0.12);
            color: #E8CFA0;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        html[data-theme="light"] .stats-rank-num {
            background: rgba(184, 146, 79, 0.14);
            color: #8B6914;
        }
        .stats-rank-item:nth-child(1) .stats-rank-num {
            background: linear-gradient(135deg, #F5E6C8, #A67C3D);
            color: #2a2218;
        }
        .stats-rank-item:nth-child(2) .stats-rank-num {
            background: linear-gradient(135deg, #E8D5A0, #B8860B);
            color: #2a2218;
        }
        .stats-rank-item:nth-child(3) .stats-rank-num {
            background: linear-gradient(135deg, #D4A85A, #8B6914);
            color: #fff;
        }
        .stats-rank-info {
            flex: 1;
            min-width: 0;
        }
        .stats-rank-name {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.88);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        html[data-theme="light"] .stats-rank-name { color: rgba(60, 45, 20, 0.88); }
        .stats-rank-meta {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .stats-rank-go {
            color: var(--text-tertiary);
            font-size: 18px;
            flex-shrink: 0;
            opacity: 0.6;
        }

        /* ========== 每日目标 ========== */
        .stats-goal-card {
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
            background:
                radial-gradient(ellipse at 12% 0%, rgba(232, 207, 160, 0.14) 0%, transparent 55%),
                linear-gradient(155deg, rgba(48, 42, 36, 0.92) 0%, rgba(30, 26, 22, 0.95) 100%);
            border: 1px solid rgba(232, 207, 160, 0.14);
        }
        html[data-theme="light"] .stats-goal-card {
            background:
                radial-gradient(ellipse at 10% 0%, rgba(232, 207, 160, 0.3) 0%, transparent 55%),
                linear-gradient(155deg, #fff9f0 0%, #f5efe4 100%);
            border-color: rgba(184, 146, 79, 0.18);
        }
        .stats-goal-title {
            font-size: 14px;
            font-weight: 600;
            color: #E8CFA0;
            margin-bottom: 12px;
            letter-spacing: 0.02em;
        }
        html[data-theme="light"] .stats-goal-title { color: #8B6914; }
        .stats-goal-options {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .stats-goal-btn {
            padding: 7px 16px;
            border-radius: 20px;
            border: 1px solid rgba(232, 207, 160, 0.18);
            background: rgba(255, 255, 255, 0.04);
            color: rgba(255, 255, 255, 0.65);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-appearance: none;
        }
        html[data-theme="light"] .stats-goal-btn {
            background: rgba(184, 146, 79, 0.06);
            color: rgba(60, 45, 20, 0.6);
            border-color: rgba(184, 146, 79, 0.2);
        }
        .stats-goal-btn.active {
            background: linear-gradient(135deg, #F5E6C8, #A67C3D);
            color: #2a2218;
            border-color: transparent;
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(166, 124, 61, 0.3);
        }


        .settings-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .settings-textarea {
            width: 100%;
            min-height: 110px;
            padding: 12px;
            border-radius: 10px;
            border: 1px solid rgba(180, 150, 100, 0.18);
            background: rgba(28, 25, 22, 0.85);
            color: var(--text-primary);
            font-size: 12px;
            line-height: 1.45;
            resize: vertical;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
        }
        .settings-textarea:focus {
            outline: none;
            border-color: rgba(212, 175, 119, 0.55);
            box-shadow: 0 0 0 3px rgba(212, 175, 119, 0.12), inset 0 1px 3px rgba(0,0,0,0.25);
        }
        .settings-textarea::placeholder {
            color: var(--text-tertiary);
        }
        .settings-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        .settings-btn {
            flex: 1;
            height: 40px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, opacity 0.15s ease;
        }
        .settings-btn:active { transform: scale(0.97); }
        .settings-btn.primary {
            background: var(--gradient-primary);
            color: #fff;
            box-shadow: 0 3px 12px rgba(212, 175, 119, 0.3);
        }
        .settings-btn.ghost {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid rgba(180, 150, 100, 0.2);
        }
        .settings-status {
            margin-top: 10px;
            font-size: 12px;
            color: var(--text-tertiary);
            min-height: 18px;
        }
        .settings-status.ok { color: #34D399; }
        .settings-status.warn { color: #FBBF24; }
        .settings-tip {
            font-size: 11px;
            color: var(--text-tertiary);
            line-height: 1.55;
            margin-top: 8px;
            padding: 10px 12px;
            border-radius: 8px;
            background: rgba(180, 150, 100, 0.08);
            border: 1px solid rgba(180, 150, 100, 0.1);
        }
        .xmly-qr-panel {
            margin-top: 14px;
            padding: 14px;
            border-radius: 12px;
            background: rgba(180, 150, 100, 0.06);
            border: 1px solid rgba(180, 150, 100, 0.15);
            text-align: center;
        }
        .xmly-qr-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        .xmly-qr-img-wrap {
            position: relative;
            display: inline-block;
            width: 200px;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 12px rgba(0,0,0,0.12);
        }
        .xmly-qr-img-wrap img {
            display: block;
            width: 200px;
            height: 200px;
            object-fit: contain;
        }
        .xmly-qr-mask {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.55);
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .xmly-qr-status {
            margin-top: 10px;
            font-size: 13px;
            color: var(--text-secondary);
            min-height: 20px;
        }
        .xmly-qr-status.ok { color: #34D399; }
        .xmly-qr-status.warn { color: #FBBF24; }
        .xmly-qr-actions {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        html[data-theme="light"] .xmly-qr-panel {
            background: rgba(0,0,0,0.03);
            border-color: rgba(0,0,0,0.08);
        }

        /* ========== Toast提示 ========== */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            font-size: 13px;
            border-radius: var(--radius-md);
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            max-width: 90%;
            max-height: 60vh;
            overflow-y: auto;
            text-align: center;
            white-space: pre-line;
            word-wrap: break-word;
            line-height: 1.5;
        }

        .toast.show {
            opacity: 1;
        }

        /* ========== 隐藏类 ========== */
        .hidden {
            display: none !important;
        }

        /* 播放页面 */
        .play-page {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%;
            height: 100%;
            height: 100dvh;
            background: #1A1714;
            z-index: 9998;
            transform: translate3d(0, 100%, 0);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            /* manipulation：允许点击与手势 JS preventDefault，避免被浏览器锁定为仅纵向 */
            touch-action: manipulation;
            -webkit-user-select: none;
            user-select: none;
        }
        .play-page.active {
            transform: translate3d(0, 0, 0);
        }
        .play-page.gesture-dragging {
            transition: none !important;
        }

        .play-page-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            min-height: 32px;
        }
        
        /* 播放页工具栏：纯图标，无底框无文字 */
        .play-tool-row {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            gap: 0;
            margin: 2px 8px 8px;
            flex-shrink: 0;
            padding: 0;
        }
        .play-tool-btn {
            flex: 0 0 auto;
            width: 48px;
            height: 48px;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: rgba(255, 255, 255, 0.72);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
        }
        .play-tool-btn:active {
            transform: scale(0.88);
            opacity: 0.85;
        }
        .play-tool-icon {
            width: auto;
            height: auto;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            box-shadow: none !important;
            position: relative;
        }
        .play-tool-btn svg {
            width: 24px;
            height: 24px;
            display: block;
        }
        .play-tool-label {
            display: none !important;
        }
        .play-tool-btn.active,
        .play-tool-btn.not-normal,
        .play-tool-btn.on {
            color: #E8CFA0;
        }
        .play-tool-btn.active .play-tool-icon,
        .play-tool-btn.not-normal .play-tool-icon,
        .play-tool-btn.on .play-tool-icon {
            background: transparent !important;
            box-shadow: none !important;
        }
        .play-tool-btn.on .play-fav-fill { display: block; }
        .play-tool-btn .play-fav-fill { display: none; }
        .play-tool-btn.on .play-fav-outline { display: none; }
        .play-tool-btn .play-fav-outline { display: block; }
        /* 倍速：数字本身即图标 */
        .play-tool-speed-text {
            font-size: 15px;
            font-weight: 600;
            letter-spacing: -0.5px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .play-tool-btn .timer-remain {
            font-size: 11px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: -0.3px;
            font-variant-numeric: tabular-nums;
        }
        .play-page-speed-btn,
        .play-page-timer-btn {
            /* 兼容旧选择器，样式由 .play-tool-btn 接管 */
        }
        /* 播放列表面板：iOS 风格滑入/收起 */
        .play-list-panel {
            display: flex;
            flex-direction: column;
            flex: 0 0 auto;
            min-height: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transform: translate3d(0, 18px, 0);
            will-change: max-height, opacity, transform;
            transition:
                max-height 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
        }
        .play-page.list-open .play-list-panel {
            flex: 1 1 auto;
            max-height: 70vh;
            opacity: 1;
            pointer-events: auto;
            transform: translate3d(0, 0, 0);
        }
        .play-page.list-open .play-tool-btn.play-list-toggle {
            color: #E8CFA0;
        }
        /* 沉浸 ↔ 列表：封面/控件过渡 */
        .play-page-disc,
        .play-page-info,
        .play-page-album-title,
        .play-tool-row,
        .play-page-progress,
        .play-page-controls,
        .play-main-btn,
        .play-page-header {
            transition:
                width 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                height 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                margin 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                padding 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.48s cubic-bezier(0.32, 0.72, 0, 1),
                gap 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                border-radius 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        }
        /* 沉浸态：封面垂直居中，控件贴底 */
        .play-page:not(.list-open) .play-page-content {
            justify-content: flex-start;
        }
        .play-page:not(.list-open) .play-page-header {
            margin-bottom: 0 !important;
            flex-shrink: 0;
        }
        /* 封面/相关 切换控件：位置钉死策略
           - 与 header 之间留 12px 空隙，彻底避开顶部标题/作者文字
           - 与下方内容之间留 16px 空隙，封面/列表不会被按钮压到
           - CSS 负责垂直居中（cover view 用 margin: auto auto）
           - JS 只负责钉 switch.top 与 panel.marginTop（related view） */
        .play-page:not(.list-open) .play-view-switch {
            position: absolute;
            /* top 由 JS 测量 header 实际高度 + 12px 后写入 */
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 !important;
            z-index: 5;
            flex-shrink: 0;
        }
        /* 封面视图：封面卡片上下间距相等
           ——JS 把计算好的间距写入 content 上的自定义属性 --play-disc-mt / --play-disc-mb，
             让「按钮→封面」与「封面→下方文字」的视觉间距完全一致；
             用自定义属性而非 inline margin，列表展开态(list-open)的样式表规则即可正常覆盖，
             收起时属性值仍在，布局平滑还原，不存在 inline !important 压住样式表的泄漏问题 */
        .play-page:not(.list-open) .play-page-disc {
            width: min(76vw, 300px) !important;
            height: min(76vw, 300px) !important;
            margin-top: var(--play-disc-mt, calc(4px - 2px * var(--play-collapse, 0))) !important;
            margin-bottom: var(--play-disc-mb, calc(12px - 8px * var(--play-collapse, 0))) !important;
            margin-left: auto !important;
            margin-right: auto !important;
            border-radius: 16px !important;
            flex-shrink: 0;
        }
        /* 相关推荐面板：独立的全宽列表，JS 动态设置上偏移 */
        .play-page:not(.list-open).view-transcript .play-page-transcript {
            display: block !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            flex: 1 1 0 !important;
            flex-shrink: 1 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 4px 0;
            touch-action: pan-y;
        }
        .play-page:not(.list-open).view-transcript .play-page-disc {
            display: none !important;
        }
        .play-page.list-open .play-view-switch {
            display: none !important;
        }
        .play-page.list-open .play-page-transcript {
            display: none !important;
        }
        .play-page:not(.list-open) .play-page-info {
            max-height: none !important;
            opacity: 1 !important;
            margin-bottom: 0 !important;
            flex-shrink: 0;
        }
        .play-page:not(.list-open) .play-page-album-title {
            max-height: none !important;
            opacity: 1 !important;
        }
        .play-page:not(.list-open) .play-tool-row {
            margin-top: auto !important;
            margin-bottom: 10px !important;
            opacity: 1 !important;
            flex-shrink: 0;
        }
        .play-page:not(.list-open) .play-page-progress {
            margin-top: 0 !important;
            margin-bottom: 14px !important;
            flex-shrink: 0;
        }
        .play-page:not(.list-open) .play-page-controls {
            margin-bottom: calc(var(--fm-safe-bottom, 0px) + 20px) !important;
            transform: none !important;
            gap: 22px !important;
            flex-shrink: 0;
        }
        .play-page:not(.list-open) .play-main-btn {
            width: 68px !important;
            height: 68px !important;
        }
        .play-immersive-spacer {
            display: none !important;
        }
        .play-page.list-open .play-page-content {
            justify-content: flex-start;
        }
        /* 列表展开时顶部书名/作者不应被呼吸收缩影响 */
        .play-page.list-open .play-page-header {
            margin-bottom: 20px !important;
            flex-shrink: 0;
        }
        .play-page.list-open .play-page-book {
            padding-top: 3px;
            padding-bottom: 3px;
            line-height: 1.35;
        }
        .play-page.list-open .play-page-title {
            padding-top: 2px;
            padding-bottom: 2px;
            line-height: 1.4;
        }
        .play-page.list-open .play-page-disc {
            margin-top: calc(4px - 2px * var(--play-collapse, 0)) !important;
            margin-bottom: calc(18px - 8px * var(--play-collapse, 0)) !important;
        }
        .play-page.list-open .play-tool-row {
            margin-top: 0 !important;
        }
        /* 播放页专辑标签（封面卡片上方，与详情页同一套数据）
           间距规则：标签 ↔ 卡片 的距离 = 卡片 ↔ 底部文字 的距离
           - 沉浸态：由 JS 统一计算（tagsGap = cardTextGap = 24px），写在 .play-page-disc 的 margin-top
           - 展开态：这里直接对齐卡片自身的 margin-bottom（18px - 8px * collapse），
             并用 !important 覆盖沉浸态写进标签 inline 的 margin-top，避免切换时残留大空隙；
             标签的 margin-bottom + 卡片 margin-top(4px - 2px * collapse) 正好凑成同一个间距 */
        .play-page-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 6px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            padding: 0 24px;
            flex-shrink: 0;
            max-width: 100%;
        }
        .play-page-tags:empty,
        .play-page.view-transcript .play-page-tags {
            display: none;
        }
        .play-page.list-open .play-page-tags {
            margin-top: calc(18px - 8px * var(--play-collapse, 0)) !important;
            margin-bottom: calc(14px - 6px * var(--play-collapse, 0)) !important;
        }
        .play-page-tags .play-tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(212, 175, 119, 0.2);
            color: var(--primary-light);
            white-space: nowrap;
        }

        html[data-theme="light"] .play-page.list-open .play-tool-btn.play-list-toggle {
            color: #8F6E35;
        }

        .timer-sheet-mask {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s;
        }
        .timer-sheet-mask.show {
            opacity: 1;
            pointer-events: auto;
        }
        .timer-sheet {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            z-index: 9999;
            background: var(--bg-secondary, #1c1c1e);
            border-radius: 16px 16px 0 0;
            padding: 8px 0 calc(var(--fm-safe-bottom, 12px) + 12px);
            transform: translateY(100%);
            transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
            color: var(--text-primary, #fff);
        }
        .timer-sheet.show { transform: translateY(0); }
        .timer-sheet-title {
            text-align: center;
            font-size: 14px;
            opacity: 0.6;
            padding: 12px 16px 8px;
        }
        .timer-sheet-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 24px;
            font-size: 16px;
            border: none;
            background: transparent;
            color: inherit;
            width: 100%;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .timer-sheet-item:active { background: rgba(255,255,255,0.06); }
        .timer-sheet-item.active { color: #ffb84d; font-weight: 600; }
        .timer-sheet-item .check {
            width: 20px; height: 20px;
            opacity: 0;
        }
        .timer-sheet-item.active .check { opacity: 1; }

        .play-page-back { display: none !important; }
        .play-page-header { touch-action: none; }
        .play-page-bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            filter: blur(60px) brightness(0.4);
            transform: scale(1.5);
            transition: background-image 0.5s;
        }
        .play-page-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: calc(var(--fm-safe-top, 0px) + 12px) 20px calc(var(--fm-safe-bottom, 0px) + 12px);
            overflow: hidden;
            overscroll-behavior: contain;
            --play-collapse: 0;
        }
        /* 上滑列表时上方区域呼吸收缩 */
        .play-page-disc {
            width: calc(176px - 108px * var(--play-collapse, 0));
            height: calc(176px - 108px * var(--play-collapse, 0));
            margin: calc(4px - 2px * var(--play-collapse, 0)) auto calc(12px - 8px * var(--play-collapse, 0));
            border-radius: calc(16px - 4px * var(--play-collapse, 0));
            transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease, border-radius 0.15s ease, box-shadow 0.2s ease;
        }
        .play-page-header {
            margin-bottom: calc(20px - 12px * var(--play-collapse, 0));
            transition: margin 0.15s ease;
        }
        .play-page-info {
            margin-bottom: calc(0px + 0px * var(--play-collapse, 0));
            max-height: calc(72px - 40px * var(--play-collapse, 0));
            opacity: calc(1 - 0.35 * var(--play-collapse, 0));
            overflow: hidden;
            transition: max-height 0.2s ease, opacity 0.15s ease, margin 0.15s ease;
        }
        .play-page-album-title {
            opacity: calc(1 - var(--play-collapse, 0));
            max-height: calc(40px * (1 - var(--play-collapse, 0)));
            overflow: hidden;
            transition: opacity 0.15s ease, max-height 0.2s ease;
        }
        .play-page-progress {
            margin: calc(4px - 2px * var(--play-collapse, 0)) 0;
            transition: margin 0.15s ease;
        }
        .play-tool-row {
            margin-top: calc(2px - 2px * var(--play-collapse, 0));
            margin-bottom: calc(8px - 4px * var(--play-collapse, 0));
            opacity: calc(1 - 0.15 * var(--play-collapse, 0));
            transition: margin 0.15s ease, opacity 0.15s ease;
        }
        .play-page-controls {
            margin-bottom: calc(12px - 6px * var(--play-collapse, 0));
            gap: calc(36px - 12px * var(--play-collapse, 0));
            transition: margin 0.15s ease, gap 0.15s ease, transform 0.15s ease;
            transform: scale(calc(1 - 0.12 * var(--play-collapse, 0)));
            transform-origin: center top;
        }
        .play-main-btn {
            width: calc(64px - 12px * var(--play-collapse, 0));
            height: calc(64px - 12px * var(--play-collapse, 0));
            transition: width 0.15s ease, height 0.15s ease;
        }
        .play-page-list-header {
            flex-shrink: 0;
            padding: calc(10px - 2px * var(--play-collapse, 0)) 0;
        }
        .play-page-list {
            overscroll-behavior: contain;
            touch-action: pan-y;
        }
        .play-page-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .play-page-header {
            flex-direction: column;
            gap: 2px;
            margin-top: 13px;
            padding-top: 8px;
        }
        .play-page-book {
            color: #fff;
            font-size: 19px;
            font-weight: 600;
            opacity: 0.95;
            text-align: center;
            max-width: 86%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        .play-page-title {
            color: rgba(255, 255, 255, 0.72);
            font-size: 13px;
            font-weight: 500;
            opacity: 1;
            text-align: center;
            max-width: 86%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        .play-page-placeholder { display: none !important; }
        .play-page-disc {
            position: relative;
            /* 尺寸由 --play-collapse 驱动，见上方 calc */
            width: calc(176px - 108px * var(--play-collapse, 0));
            height: calc(176px - 108px * var(--play-collapse, 0));
            margin: calc(4px - 2px * var(--play-collapse, 0)) auto calc(12px - 8px * var(--play-collapse, 0));
            border-radius: calc(16px - 4px * var(--play-collapse, 0));
            overflow: visible;
            flex-shrink: 0;
            background: linear-gradient(145deg, #2a2a32, #121218);
            background-size: cover;
            background-position: center;
            box-shadow: 0 12px 40px rgba(0,0,0,0.45);
            transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease, border-radius 0.15s ease, box-shadow 0.45s ease, transform 0.45s ease;
        }
        .play-page-disc::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at 50% 0%, rgba(232, 207, 160, 0.5), transparent 72%);
            opacity: 0.45;
            z-index: 0;
            pointer-events: none;
            transition: opacity 0.45s ease;
        }
        .play-page-disc img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            background: transparent;
            position: relative;
            z-index: 1;
            border-radius: 16px;
        }
        .play-page-disc.playing {
            box-shadow: 0 -16px 40px rgba(232, 207, 160, 0.25), 0 16px 48px rgba(212, 175, 119, 0.35), 0 0 0 1px rgba(232, 207, 160, 0.15);
            animation: disc-breathe 3.6s ease-in-out infinite;
        }
        .play-page-disc.playing::before {
            opacity: 0.75;
            animation: disc-glow 3.6s ease-in-out infinite;
        }
        .play-page-disc.playing img {
            animation: disc-sway 12s ease-in-out infinite;
        }
        @keyframes disc-breathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.018); }
        }
        @keyframes disc-glow {
            0%, 100% { opacity: 0.45; }
            50% { opacity: 0.85; }
        }
        @keyframes disc-sway {
            0%, 100% { transform: rotate(-1.2deg) scale(1); }
            50% { transform: rotate(1.2deg) scale(1.01); }
        }

        /* ========== 封面/文稿 切换控件 ========== */
        .play-view-switch {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin: 0 auto 16px;
            padding: 3px;
            width: fit-content;
            border-radius: 999px;
            background: transparent;
            border: 1px solid var(--border-light);
            flex-shrink: 0;
        }
        .play-view-switch.hidden { display: none; }
        .play-view-tab {
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            padding: 6px 22px;
            border-radius: 999px;
            cursor: pointer;
            transition: all 0.25s ease;
            white-space: nowrap;
            outline: none;
        }
        .play-view-tab.active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
            font-weight: 600;
        }
        .play-view-tab:not(.active):active { transform: scale(0.95); }
        html[data-theme="light"] .play-view-switch {
            border-color: rgba(28, 25, 21, 0.12);
        }
        html[data-theme="light"] .play-view-tab.active {
            background: rgba(28, 25, 21, 0.08);
        }

        /* ========== 相关推荐视图（原「文稿」位） ========== */
        /* 不框起来：无边框、无卡片背景；自上而下撑满「切换控件 → 底部控件」之间的可用空间 */
        .play-page-transcript {
            display: none;
            width: 100%;
            max-width: 100%;
            margin: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 4px 0;
            border: none;
            border-radius: 0;
            background: transparent;
            flex: 1 1 0;
            min-height: 0;
            touch-action: pan-y;
            transition: opacity 0.3s ease;
            /* 隐藏滚动条（保留滚动能力） */
            scrollbar-width: none;
            scrollbar-color: transparent transparent;
        }
        .play-page-transcript::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        html[data-theme="light"] .play-page-transcript {
            scrollbar-color: transparent transparent;
        }
        .play-page-transcript.show { display: block; }
        .play-page.view-transcript .play-page-disc { display: none; }
        .play-page.view-transcript .play-page-disc::before { display: none; }
        /* 切到「相关」时隐藏底部标题，不再保留占位高度，让列表紧贴底部控件（间距由 JS safePadding 控制） */
        .play-page.view-transcript .play-page-info {
            display: none !important;
        }
        .play-transcript-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            font-size: 13px;
            padding: 32px 0;
        }
        /* 相关推荐列表：整列全宽铺满，自上而下布满到进度条之上 */
        .play-related-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 8px 0;
            width: 100%;
            min-height: 100%;
            box-sizing: border-box;
        }
        .play-related-item {
            flex: 1 1 0;
            min-height: 64px;
            max-height: 110px;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 6px 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .play-related-item:active { opacity: 0.55; transform: scale(0.985); }
        .play-related-cover {
            position: relative;
            width: 64px;
            height: 64px;
            flex-shrink: 0;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.07);
        }
        .play-related-cover .no-cover-placeholder { font-size: 22px !important; }
        .play-related-cover img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
        }
        .play-related-meta {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .play-related-title {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.35;
            color: var(--text-primary);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .play-related-author {
            font-size: 12px;
            color: var(--text-tertiary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .play-related-empty {
            padding: 32px 0;
            text-align: center;
            color: var(--text-tertiary);
            font-size: 13px;
        }
        html[data-theme="light"] .play-related-cover {
            background: rgba(28, 25, 21, 0.07);
        }

        .skip-bar {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0 0 12px;
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-light);
            font-size: 12px;
            color: var(--text-secondary);
        }
        .skip-bar label {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        .skip-bar input {
            width: 48px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--bg-card);
            color: var(--text-primary);
            text-align: center;
            font-size: 13px;
            padding: 0 4px;
        }
        .skip-bar .skip-save-btn {
            margin-left: auto;
            height: 28px;
            padding: 0 12px;
            border-radius: 14px;
            border: none;
            background: rgba(212, 175, 119, 0.2);
            color: var(--primary-light);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .skip-bar .skip-save-btn:active { transform: scale(0.96); }
        .play-page-info {
            text-align: center;
            margin-bottom: 8px;
        }
        .play-page-track-title {
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .play-page-album-title {
            color: rgba(255,255,255,0.5);
            font-size: 13px;
        }
        .play-page-progress {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            gap: 10px;
        }
        .progress-time {
            color: rgba(255,255,255,0.5);
            font-size: 11px;
            min-width: 36px;
            text-align: center;
        }
        .progress-bar {
            flex: 1;
            height: 20px;
            background: transparent;
            border-radius: 2px;
            position: relative;
            cursor: pointer;
            touch-action: none;
            display: flex;
            align-items: center;
        }
        .progress-bar::before {
            content: '';
            position: absolute;
            left: 0; right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
        }
        .progress-fill {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            background: linear-gradient(90deg, #C6A75E, #3B82F6);
            border-radius: 2px;
            width: 0%;
            pointer-events: none;
        }
        .progress-thumb {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 14px; height: 14px;
            background: #fff;
            border-radius: 50%;
            left: 0%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .progress-bar:hover .progress-thumb,
        .progress-bar.dragging .progress-thumb {
            opacity: 1;
        }
        .progress-bar.dragging .progress-fill,
        .progress-bar.dragging .progress-thumb {
            transition: none;
        }
        .play-page-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: calc(22px - 8px * var(--play-collapse, 0));
            margin-bottom: calc(24px - 14px * var(--play-collapse, 0));
            flex-shrink: 0;
            transform: scale(calc(1 - 0.12 * var(--play-collapse, 0)));
            transform-origin: center top;
            transition: margin 0.15s ease, gap 0.15s ease, transform 0.15s ease;
        }
        .play-ctrl-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .play-main-btn {
            width: calc(64px - 12px * var(--play-collapse, 0));
            height: calc(64px - 12px * var(--play-collapse, 0));
            background: linear-gradient(135deg, #C6A75E, #3B82F6);
            border-radius: 50%;
            box-shadow: 0 4px 20px rgba(139,92,246,0.4);
            transition: width 0.15s ease, height 0.15s ease;
        }
        .play-page-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .play-list-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .play-locate-btn {
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.6);
            border-radius: 14px;
            padding: 4px 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: all 0.2s ease;
        }
        .play-locate-btn:active {
            transform: scale(0.92);
            background: rgba(139,92,246,0.2);
            color: #a78bfa;
        }
        .play-locate-btn svg {
            display: block;
        }
        .play-page-list {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }
        .play-page-list::-webkit-scrollbar { display: none; }
        .play-list-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            border-radius: 8px;
            margin-bottom: 2px;
            cursor: pointer;
        }
        .play-list-item.active {
            background: rgba(139,92,246,0.15);
        }
        .play-list-item.active .play-list-name {
            color: #C6A75E;
        }
        .play-list-index {
            color: rgba(255,255,255,0.3);
            font-size: 12px;
            min-width: 28px;
        }
        .play-list-name {
            flex: 1;
            color: rgba(255,255,255,0.8);
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0 8px;
        }
        .play-list-duration {
            color: rgba(255,255,255,0.3);
            font-size: 11px;
        }


        /* ========== 纸质纹理 ========== */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.45;
            background-image:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 180px 180px;
            mix-blend-mode: soft-light;
        }
        .app {
            background:
                radial-gradient(ellipse 110% 70% at 50% -15%, rgba(212, 175, 119, 0.08), transparent 55%),
                radial-gradient(ellipse 80% 50% at 100% 100%, rgba(139, 155, 180, 0.05), transparent 50%),
                linear-gradient(180deg, #12111A 0%, #0E0D12 45%, #0C0B10 100%);
        }
        .header {
            border-bottom: 1px solid rgba(180, 150, 100, 0.12);
            box-shadow: 0 1px 0 rgba(255, 248, 235, 0.03);
        }
        .book-card .book-cover,
        .hot-cover,
        .detail-cover,
        .player-cover {
            box-shadow:
                0 2px 0 rgba(0,0,0,0.25),
                0 6px 16px rgba(0,0,0,0.35),
                inset 0 0 0 1px rgba(255, 248, 235, 0.06);
        }
        .book-card .book-title,
        .hot-title,
        .detail-book-title {
            letter-spacing: 0.02em;
        }
        .section-title::before {
            background: linear-gradient(180deg, #E4C878, #9A7B3C) !important;
        }
        .category-item {
            border: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,248,235,0.04);
            background-clip: padding-box;
        }
        .category-item.active {
            box-shadow: 0 2px 10px rgba(212, 175, 119, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
            background-clip: padding-box;
        }
        .search-box {
            background: rgba(42, 37, 32, 0.9);
            border-color: rgba(180, 150, 100, 0.14);
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        }
        .mini-player {
            background: linear-gradient(180deg, #2A2520 0%, #25211D 100%);
            border-top-color: rgba(180, 150, 100, 0.12);
            box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
        }
        .bottom-nav {
            background: linear-gradient(180deg, #2E2924 0%, #27221E 100%);
            border-top-color: rgba(180, 150, 100, 0.18);
            box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
        }
        .track-item {
            border-bottom-color: rgba(180, 150, 100, 0.08);
        }
        .detail-hero {
            background: linear-gradient(160deg, rgba(250, 246, 238, 0.05) 0%, rgba(212, 175, 119, 0.07) 100%);
            border-bottom: 1px solid rgba(180, 150, 100, 0.1);
        }
        .toast {
            background: rgba(42, 37, 32, 0.94);
            border: 1px solid rgba(180, 150, 100, 0.2);
            box-shadow: 0 8px 28px rgba(0,0,0,0.45);
            color: var(--text-primary);
        }

        /* ========== 站源下拉（替代底部弹层） ========== */
        .source-dropdown {
            position: fixed;
            top: calc(var(--fm-safe-top, 0px) + var(--header-height) + 6px);
            right: max(12px, var(--fm-safe-right, 0px));
            width: min(300px, calc(100vw - 24px));
            background: #18181F;
            border: 1px solid rgba(212, 175, 119, 0.22);
            border-radius: 14px;
            box-shadow:
                0 20px 56px rgba(0, 0, 0, 0.6),
                0 1px 0 rgba(255, 248, 235, 0.05) inset,
                0 0 0 1px rgba(0, 0, 0, 0.25);
            padding: 8px;
            z-index: 12050;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.96);
            transform-origin: top right;
            transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.2s;
            max-height: min(60vh, 400px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            pointer-events: none;
        }
        .source-dropdown.active {
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        .header.source-open {
            z-index: 200;
        }
        .source-dropdown::before {
            content: '';
            position: absolute;
            top: -6px;
            right: 22px;
            width: 12px;
            height: 12px;
            background: #18181F;
            border-left: 1px solid rgba(212, 175, 119, 0.22);
            border-top: 1px solid rgba(212, 175, 119, 0.22);
            transform: rotate(45deg);
            z-index: -1;
        }
        .source-dropdown-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-tertiary);
            padding: 6px 10px 8px;
            letter-spacing: 0.06em;
        }
        .source-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 10px;
            border-radius: 10px;
            margin-bottom: 4px;
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all .18s ease;
        }
        .source-item:last-child { margin-bottom: 0; }
        .source-item:active { transform: scale(.98); background: var(--bg-card-hover); }
        .source-item.active {
            border-color: rgba(212, 175, 119, 0.45);
            background: rgba(212, 175, 119, 0.12);
        }
        .source-icon {
            width: 38px; height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
        }
        .source-info { flex: 1; min-width: 0; }
        .source-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
        .source-desc { font-size: 11px; color: var(--text-tertiary); line-height: 1.35; }
        .source-check {
            width: 20px; height: 20px;
            border-radius: 50%;
            border: 1.5px solid rgba(180, 150, 100, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: transparent;
            font-size: 11px;
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.02);
        }
        .source-item.active .source-check {
            background: var(--gradient-primary);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 1px 4px rgba(212, 175, 119, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
            background-clip: padding-box;
        }
        .source-badge {
            display: inline-block;
            font-size: 10px;
            padding: 1px 6px;
            border-radius: 4px;
            margin-left: 6px;
            vertical-align: middle;
            background: rgba(139,107,201,.22);
            color: var(--primary-light);
        }
        .header-content {
            position: relative;
        }
        .src-btn-wrap {
            position: relative;
            flex-shrink: 0;
        }
        .source-backdrop {
            position: fixed;
            inset: 0;
            z-index: 12040;
            background: rgba(0, 0, 0, 0.35);
            display: none;
        }
        .source-backdrop.active {
            display: block;
        }

        .detail-source-tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(59,130,246,.2);
            color: #60A5FA;
        }

    
        /* ========== 底部导航栏 ========== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: var(--fm-safe-left);
            right: var(--fm-safe-right);
            padding-bottom: var(--fm-safe-bottom);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            justify-content: space-around;
            z-index: 350;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            overflow: visible;
        }
        .bottom-nav-btn {
            flex: 1;
            border: none;
            background: none;
            color: var(--text-tertiary);
            padding: 8px 0 6px;
            font-size: 10px;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.2s ease;
            position: relative;
        }
        .bottom-nav-btn svg {
            width: 26px;
            height: 26px;
            display: block;
            transition: transform 0.2s ease;
        }
        .bottom-nav-btn:active svg {
            transform: scale(0.88);
        }
        .bottom-nav-btn.active {
            color: var(--primary-color);
        }
        .bottom-nav-btn.active svg {
            filter: drop-shadow(0 1px 4px rgba(212, 175, 119, 0.35));
        }
        .bottom-nav-btn .lib-count {
            position: absolute;
            top: 2px;
            right: calc(50% - 20px);
            font-size: 9px;
            min-width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            padding: 0 3px;
            border-radius: 7px;
            background: var(--accent-color);
            color: #fff;
            font-weight: 600;
        }
        .bottom-nav-btn .lib-count:empty,
        .bottom-nav-btn .lib-count[data-zero="true"] {
            display: none;
        }

        /* ========== 主页底栏：中央播放原盘 ========== */
        /* 底栏只按图标文字排版，原盘独立上浮半截到页面里 */
        .bottom-nav {
            align-items: center;
            min-height: 52px;
            height: auto;
            padding-top: 6px;
            padding-bottom: var(--fm-safe-bottom);
            overflow: visible;
        }
        .bottom-nav-btn {
            padding: 6px 0 6px !important;
            gap: 2px !important;
        }
        .bottom-nav-btn svg {
            width: 22px !important;
            height: 22px !important;
        }
        .nav-play-disc {
            position: relative;
            flex: 0 0 auto;
            width: 64px;
            height: 64px;
            margin: 0 4px;
            /* 半截露在页面，底部与底栏文字大致齐 */
            top: -20px;
            margin-bottom: -18px;
            border: none;
            background: transparent;
            padding: 0;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            z-index: 2;
            filter: none;
            transition: transform 0.2s ease;
            align-self: center;
        }
        .nav-play-disc:active {
            transform: scale(0.94);
        }
        .nav-play-disc-ring {
            display: none;
        }
        .nav-play-disc.has-track .nav-play-disc-ring,
        .nav-play-disc.playing .nav-play-disc-ring {
            display: none;
        }
        @keyframes nav-disc-ring-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .nav-play-disc-spin {
            position: absolute;
            top: 0; left: 50%;
            width: 64px; height: 64px;
            transform: translateX(-50%);
            border-radius: 50%;
            z-index: 1;
        }
        .nav-play-disc.playing .nav-play-disc-spin {
            animation: nav-disc-spin 7.5s linear infinite;
        }
        @keyframes nav-disc-spin {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }
        .nav-play-disc-vinyl {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(145deg, #3a342c 0%, #25211c 100%);
            box-shadow: none;
            overflow: hidden;
        }
        .nav-play-disc-cover {
            position: absolute;
            inset: 2px;
            top: 2px; left: 2px; right: 2px; bottom: 2px;
            width: auto; height: auto;
            transform: none;
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(145deg, #3a342c, #1e1b17);
            box-shadow: none;
            border: none;
            z-index: 2;
        }
        /* 香槟金细环 + 表面光泽（主页/详情共用） */
        .nav-play-disc-vinyl::before,
        .detail-nav-disc-vinyl::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            padding: 1.5px;
            background: linear-gradient(145deg, rgba(232,207,160,0.7), rgba(166,124,61,0.2) 48%, rgba(232,207,160,0.45));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 4;
        }
        .nav-play-disc-vinyl::after,
        .detail-nav-disc-vinyl::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: linear-gradient(160deg, rgba(255,255,255,0.16) 0%, transparent 40%, transparent 68%, rgba(0,0,0,0.1) 100%);
            pointer-events: none;
            z-index: 3;
        }
        .nav-play-disc-cover img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: none;
        }
        .nav-play-disc.has-track .nav-play-disc-cover img {
            display: block;
        }
        .nav-play-disc-placeholder {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(232, 207, 160, 0.9);
        }
        html[data-theme="light"] .nav-play-disc-placeholder {
            color: rgba(140, 110, 60, 0.75);
        }
        .nav-play-disc.has-track .nav-play-disc-placeholder {
            display: none;
        }
        .nav-play-disc-placeholder svg {
            width: 55%; height: 55%;
        }
        .nav-play-badge {
            display: none;
        }

        /* 原盘中央播放三角：纯图标，无圆形底 */
        .disc-play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-46%, -50%);
            width: 24px;
            height: 24px;
            border-radius: 0;
            background: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 6;
            pointer-events: none;
            box-shadow: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
        }
        .disc-play-icon svg {
            width: 24px;
            height: 24px;
            color: #fff;
            margin-left: 0;
            display: block;
        }
        /* 有曲目 + 未在播：显示三角 */
        .nav-play-disc.has-track:not(.playing) .disc-play-icon,
        .detail-nav-disc.active:not(.playing) .disc-play-icon,
        .detail-nav-disc.has-track:not(.playing) .disc-play-icon {
            display: flex;
        }
        .nav-play-disc.playing .disc-play-icon,
        .detail-nav-disc.playing .disc-play-icon {
            display: none !important;
        }
        html[data-theme="light"] .disc-play-icon {
            background: none;
            filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
        }
        html[data-theme="light"] .disc-play-icon svg {
            color: #fff;
        }

        /* 迷你播放条永久收起：功能并入中央原盘 */
        .mini-player {
            display: none !important;
        }
        body.mini-chrome-disc .bottom-nav {
            /* 胶片模式不再藏主底栏（播放已在中央） */
            transform: none;
            opacity: 1;
            pointer-events: auto;
        }
        /* 主内容区只留底栏高度 */
        .main-content {
            padding-bottom: calc(var(--bottom-nav-height) + 16px) !important;
        }
        html[data-theme="light"] .nav-play-disc {
            filter: none;
        }
        html[data-theme="light"] .nav-play-disc-vinyl,
        html[data-theme="light"] .detail-nav-disc-vinyl {
            background: linear-gradient(145deg, #f5efe6 0%, #e8dfd2 100%);
        }
        html[data-theme="light"] .nav-play-disc-vinyl::before,
        html[data-theme="light"] .detail-nav-disc-vinyl::before {
            background: linear-gradient(145deg, rgba(184,146,79,0.75), rgba(166,124,61,0.22) 50%, rgba(184,146,79,0.5));
        }
        html[data-theme="light"] .nav-play-disc-vinyl::after,
        html[data-theme="light"] .detail-nav-disc-vinyl::after {
            background: linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 42%, transparent 70%, rgba(120,100,70,0.05) 100%);
        }
        html[data-theme="light"] .nav-play-disc-cover,
        html[data-theme="light"] .detail-nav-disc-cover {
            background: linear-gradient(145deg, #f8f4ee, #ebe3d6);
        }



        .detail-actions {
            display: flex;
            gap: 10px;
            margin: 16px 0 8px;
            flex-wrap: wrap;
        }
        .detail-action-btn {
            border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.06);
            color: #fff;
            border-radius: 22px;
            padding: 9px 18px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: all 0.2s ease;
        }
        .detail-action-btn:active {
            transform: scale(0.96);
        }
        .detail-action-btn svg {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .detail-action-btn.active {
            background: rgba(198, 167, 94, 0.3);
            border-color: rgba(198, 167, 94, 0.5);
            color: #ffd78a;
        }
        .detail-action-btn.primary {
            background: var(--gradient-primary);
            border-color: transparent;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 3px 12px rgba(212, 175, 119, 0.35);
        }
        .detail-action-btn.primary:active {
            box-shadow: 0 2px 8px rgba(212, 175, 119, 0.25);
        }
        .detail-chapter-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            gap: 8px;
        }
        .detail-chapter-toolbar .detail-section-title {
            margin: 0;
        }
        .sort-toggle-btn {
            border: 1px solid transparent;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.85);
            border-radius: 14px;
            padding: 5px 12px;
            font-size: 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            line-height: 1;
        }
        .sort-toggle-btn .sort-ico {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }
        .sort-toggle-btn .sort-ico-desc { display: none; }
        .sort-toggle-btn.sort-desc .sort-ico-asc { display: none; }
        .sort-toggle-btn.sort-desc .sort-ico-desc { display: inline-block; }
        .play-page-list-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .play-sort-btn {
            border: none;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.85);
            border-radius: 12px;
            padding: 4px 10px;
            font-size: 12px;
            cursor: pointer;
        }
        /* ========== 亮色主题最终覆盖（压过后面写死的深色） ========== */
        html[data-theme="light"] {
            color-scheme: light;
        }
        html[data-theme="light"] body,
        html[data-theme="light"] .app {
            background: #F6F3EE !important;
            background-image: none !important;
            color: #1C1915 !important;
        }
        html[data-theme="light"] .header {
            background: linear-gradient(180deg, #FFFCFA 0%, #F6F3EE 100%) !important;
            border-bottom-color: rgba(28, 25, 21, 0.08) !important;
            box-shadow: none !important;
        }
        html[data-theme="light"] .category-nav,
        html[data-theme="light"] .sub-category-nav {
            background: #F0EBE3 !important;
            border-bottom-color: rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .main-content,
        html[data-theme="light"] .section {
            background: transparent !important;
            color: #1C1915 !important;
        }
        html[data-theme="light"] .section-title {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .search-box {
            background: #FFFFFF !important;
            border-color: rgba(184, 146, 79, 0.35) !important;
            box-shadow: 0 1px 4px rgba(80, 60, 30, 0.08) !important;
        }
        html[data-theme="light"] .search-input {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .search-input::placeholder {
            color: #8A8378 !important;
        }
        html[data-theme="light"] .category-btn {
            background: #FFFFFF !important;
            border-color: rgba(28, 25, 21, 0.1) !important;
            color: #5C564E !important;
            background-clip: padding-box !important;
        }
        html[data-theme="light"] .category-item {
            background: #FFFFFF !important;
            color: #5C564E !important;
            border-color: rgba(28, 25, 21, 0.06) !important;
            box-shadow: none !important;
            background-clip: padding-box !important;
        }
        html[data-theme="light"] .category-item.active,
        html[data-theme="light"] .sub-category-item.active {
            color: #8B6914 !important;
            background: #F5EDE0 !important;
            border-color: rgba(212, 175, 119, 0.5) !important;
            box-shadow: 0 1px 4px rgba(212, 175, 119, 0.15), inset 0 1px 0 rgba(255,255,255,0.6) !important;
            background-clip: padding-box !important;
        }
        html[data-theme="light"] .sub-category-item {
            background: rgba(255,255,255,0.8) !important;
            color: #5C564E !important;
            border-color: rgba(28, 25, 21, 0.08) !important;
            background-clip: padding-box !important;
        }
        html[data-theme="light"] .book-title,
        html[data-theme="light"] .hot-title,
        html[data-theme="light"] .detail-book-title {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .book-author,
        html[data-theme="light"] .hot-author {
            color: #8A8378 !important;
        }
        html[data-theme="light"] .mini-player {
            background: linear-gradient(180deg, #FFFCFA 0%, #F3EDE4 100%) !important;
            border-top-color: rgba(28, 25, 21, 0.08) !important;
            box-shadow: 0 -4px 20px rgba(80, 60, 30, 0.1) !important;
            color: #1C1915 !important;
        }
        html[data-theme="light"] .player-album {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .player-track {
            color: #8A8378 !important;
        }
        html[data-theme="light"] .player-btn {
            color: #5C564E !important;
        }
        html[data-theme="light"] .bottom-nav {
            background: linear-gradient(180deg, #FFFCFA 0%, #F0EBE3 100%) !important;
            border-top-color: rgba(28, 25, 21, 0.08) !important;
            box-shadow: 0 -4px 20px rgba(80, 60, 30, 0.1) !important;
        }
        html[data-theme="light"] .bottom-nav-btn {
            color: #8A8378 !important;
        }
        html[data-theme="light"] .bottom-nav-btn.active {
            color: #B8924F !important;
        }
        html[data-theme="light"] .play-page {
            background: #F8F4EE !important;
        }
        html[data-theme="light"] .play-page-bg {
            filter: blur(50px) brightness(1.18) saturate(0.85) !important;
            opacity: 0.38 !important;
        }
        html[data-theme="light"] .play-page-title,
        html[data-theme="light"] .play-page-track-title {
            color: #1C1915 !important;
            opacity: 1 !important;
        }
        html[data-theme="light"] .play-page-album-title {
            color: rgba(28, 25, 21, 0.55) !important;
        }
        html[data-theme="light"] .progress-time {
            color: rgba(28, 25, 21, 0.45) !important;
        }
        html[data-theme="light"] .progress-bar::before {
            background: rgba(28, 25, 21, 0.12) !important;
        }
        html[data-theme="light"] .progress-thumb {
            background: #B8924F !important;
        }
        html[data-theme="light"] .play-ctrl-btn {
            color: #1C1915 !important;
            background: transparent !important;
        }
        html[data-theme="light"] .play-tool-btn {
            background: transparent !important;
            border: none !important;
            color: rgba(28, 25, 21, 0.65) !important;
        }
        html[data-theme="light"] .play-tool-btn.active,
        html[data-theme="light"] .play-tool-btn.not-normal,
        html[data-theme="light"] .play-tool-btn.on {
            color: #8F6E35 !important;
            background: transparent !important;
            border: none !important;
        }
        html[data-theme="light"] .play-page-list-header {
            color: rgba(28, 25, 21, 0.55) !important;
            border-top-color: rgba(28, 25, 21, 0.1) !important;
        }
        html[data-theme="light"] .sort-toggle-btn {
            background: rgba(28, 25, 21, 0.06) !important;
            color: #1C1915 !important;
            border-color: rgba(28, 25, 21, 0.18) !important;
        }
        html[data-theme="light"] .play-sort-btn,
        html[data-theme="light"] .play-locate-btn {
            background: transparent !important;
            color: #1C1915 !important;
            border-color: rgba(28, 25, 21, 0.15) !important;
        }
        html[data-theme="light"] .play-page-list .track-item,
        html[data-theme="light"] .track-item {
            color: #1C1915 !important;
            border-bottom-color: rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .track-title {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .track-item.playing {
            background: rgba(184, 146, 79, 0.15) !important;
        }
        html[data-theme="light"] .track-item.playing .track-title {
            color: #8F6E35 !important;
        }
        /* 播放列表真实类名：play-list-*（之前误用 track-title） */
        html[data-theme="light"] .play-list-item {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .play-list-name {
            color: rgba(28, 25, 21, 0.88) !important;
        }
        html[data-theme="light"] .play-list-index,
        html[data-theme="light"] .play-list-duration {
            color: rgba(28, 25, 21, 0.4) !important;
        }
        html[data-theme="light"] .play-list-item.active {
            background: rgba(184, 146, 79, 0.16) !important;
        }
        html[data-theme="light"] .play-list-item.active .play-list-name {
            color: #8F6E35 !important;
        }
        html[data-theme="light"] .detail-modal,
        html[data-theme="light"] .settings-page,
        html[data-theme="light"] .search-page {
            background: #F6F3EE !important;
            color: #1C1915 !important;
        }
        html[data-theme="light"] .detail-hero {
            background: linear-gradient(160deg, #FFFCFA 0%, #F0EBE3 100%) !important;
            border-bottom-color: rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .detail-nav {
            background: rgba(255, 252, 247, 0.98) !important;
            border-top-color: rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .settings-header,
        html[data-theme="light"] .search-header {
            background: #F0EBE3 !important;
            color: #1C1915 !important;
            border-bottom: 1px solid rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .settings-section {
            background: #FFFFFF !important;
            border: 1px solid rgba(28, 25, 21, 0.08) !important;
        }
        html[data-theme="light"] .settings-section-title,
        html[data-theme="light"] .settings-title {
            color: #1C1915 !important;
        }
        html[data-theme="light"] .settings-textarea {
            background: #F6F3EE !important;
            color: #1C1915 !important;
            border-color: rgba(184, 146, 79, 0.35) !important;
        }
        html[data-theme="light"] .timer-sheet {
            background: #FFFFFF !important;
            color: #1C1915 !important;
        }
        html[data-theme="light"] .timer-sheet-item.active {
            color: #B8924F !important;
        }
        html[data-theme="light"] .toast {
            background: rgba(255, 252, 247, 0.96) !important;
            color: #1C1915 !important;
            border-color: rgba(184, 146, 79, 0.3) !important;
            box-shadow: 0 8px 28px rgba(80, 60, 30, 0.15) !important;
        }
        html[data-theme="light"] .source-dropdown {
            background: #FFFFFF !important;
            color: #1C1915 !important;
            box-shadow: 0 8px 28px rgba(80, 60, 30, 0.15) !important;
            border-color: rgba(180, 150, 100, 0.2) !important;
        }
        html[data-theme="light"] .source-dropdown::before {
            background: #FFFFFF !important;
            border-left-color: rgba(180, 150, 100, 0.2) !important;
            border-top-color: rgba(180, 150, 100, 0.2) !important;
        }
        html[data-theme="light"] .book-cover .no-cover-placeholder {
            background: linear-gradient(145deg, #E8E0D4, #D4CBBC) !important;
        }


    
        /* ========== iOS 底栏 / 安全区单独适配（对齐音乐页，不改安卓默认） ========== */
        @supports (-webkit-touch-callout: none) {
            html.is-ios {
                /* 内嵌 WebView 常已预留 Home Indicator，避免 CSS 再叠一层过高 */
                --bottom-nav-height: calc(52px + min(env(safe-area-inset-bottom, 0px), 12px));
            }
            html.is-ios .bottom-nav {
                padding-bottom: min(env(safe-area-inset-bottom, 0px), 12px) !important;
                min-height: 52px;
                -webkit-backdrop-filter: blur(28px) saturate(1.6);
                backdrop-filter: blur(28px) saturate(1.6);
                box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            }
            html.is-ios .mini-player {
                /* 仍贴底栏上方，高度由 JS syncBottomNavHeight 写死 */
                -webkit-backdrop-filter: blur(28px) saturate(1.5);
                backdrop-filter: blur(28px) saturate(1.5);
            }
            html.is-ios img[src]:not([src=""]) {
                -webkit-user-drag: none;
            }
        }

        /* ===== iOS 全屏顶部空白修复（对齐 CatPaw edgeToEdge + safeTop，不改安卓）=====
           IPA WebView 沉浸时 env(safe-area-inset-top) 已反映状态栏；
           禁止 body/html 再叠 margin/padding，顶部只在固定栏上吃一次。 */
        @supports (-webkit-touch-callout: none) {
          html.is-ios,
          html.is-ios body {
            margin: 0 !important;
            padding-top: 0 !important;
            min-height: 100% !important;
            min-height: 100dvh !important;
            background-color: #0A0A0E !important;
          }
          html.is-ios .app {
            padding-top: 0 !important;
            min-height: 100% !important;
            min-height: 100dvh !important;
            box-sizing: border-box;
          }
          /* 顶部安全区只保留在 header（与宿主 --fm-safe-top / env 取 max，禁止相加） */
          html.is-ios {
            --ios-safe-top: max(var(--fm-safe-top, 0px), env(safe-area-inset-top, 0px));
          }
          html.is-ios .header {
            padding-top: var(--ios-safe-top) !important;
          }
          /* 全屏叠层：同样只加一次安全区 */
          html.is-ios .play-page .play-page-header,
          html.is-ios #playPage .play-header,
          html.is-ios .play-page-top,
          html.is-ios .settings-header,
          html.is-ios .search-header,
          html.is-ios .mine-header {
            padding-top: calc(var(--ios-safe-top) + 8px) !important;
          }
          /* 宿主非沉浸（normal）时 WebView 可能已在状态栏下，顶部不再叠 env */
          html.is-ios.fm-native.chrome-normal .header,
          html.is-ios.fm-native:not(.fm-chrome-full):not(.chrome-full) .header {
            padding-top: max(0px, var(--fm-safe-top, 0px)) !important;
          }
        }