/* ==================== CSS 变量 / 主题系统 ==================== */
:root {
    --c-primary: #785038;
    --c-primary-light: #916443;
    --c-primary-dark: #5C3A24;
    --c-gradient: linear-gradient(135deg, #785038 0%, #916443 50%, #A67C5B 100%);
    --c-gradient-h: linear-gradient(135deg, #916443 0%, #A67C5B 50%, #C49A6C 100%);
    --c-buddhism: #4A646C;
    --c-taoism: #537380;
    --c-medicine: #587A59;
    --c-culture: #916443;
    --c-confucius: #8B6B5A;
    --c-art: #7A6B8D;
    --c-bg: #F8F5F0;
    --c-bg-card: #FFFFFF;
    --c-bg-glass: rgba(255,255,255,0.72);
    --c-bg-page2: #F0EDE8;
    --c-text: #2D2620;
    --c-text-sub: #7A726A;
    --c-text-hint: #A89E94;
    --c-border: rgba(120,80,56,0.08);
    --c-divider: rgba(0,0,0,0.05);
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-full: 999px;
    --r-pill: 50px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --shadow-sm: 0 2px 8px rgba(45,38,32,0.04);
    --shadow-md: 0 4px 20px rgba(45,38,32,0.06);
    --shadow-lg: 0 8px 40px rgba(45,38,32,0.1);
    --shadow-xl: 0 16px 64px rgba(45,38,32,0.14);
    --shadow-primary: 0 8px 32px rgba(120,80,56,0.25);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration: 0.35s;
}
[data-theme="dark"] {
    --c-bg: #1A1714;
    --c-bg-card: #2A2520;
    --c-bg-glass: rgba(30,25,20,0.8);
    --c-bg-page2: #221F1B;
    --c-text: #E8E0D6;
    --c-text-sub: #A89E94;
    --c-text-hint: #6B6360;
    --c-border: rgba(255,255,255,0.06);
    --c-divider: rgba(255,255,255,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.35);
    --shadow-xl: 0 16px 64px rgba(0,0,0,0.4);
    --shadow-primary: 0 8px 32px rgba(120,80,56,0.4);
}

/* ==================== 基础重置 ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    background: var(--c-bg); color: var(--c-text);
    min-height: 100vh; min-height: 100dvh;
    line-height: 1.6; letter-spacing: 0.3px;
    -webkit-font-smoothing: antialiased;
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out);
    overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; border: none; background: none; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
input { font-family: inherit; }

/* ==================== 全局容器 ==================== */
.app { max-width: 480px; margin: 0 auto; position: relative; padding-bottom: calc(72px + var(--safe-bottom)); }

/* ==================== 顶部导航 ==================== */
.nav {
    height: 56px; position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--space-md);
    background: var(--c-bg-glass);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--c-border);
    transition: background 0.4s;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-logo { width: 32px; height: 32px; background: var(--c-gradient); border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 800; box-shadow: var(--shadow-primary); }
.nav-title { font-size: 20px; font-weight: 700; background: var(--c-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-center { font-size: 18px; font-weight: 700; color: var(--c-text); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--c-bg-card); color: var(--c-text-sub); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease-out); }
.nav-btn:active { transform: scale(0.92); }
.nav-btn svg { width: 18px; height: 18px; }

/* ==================== 页面容器 ==================== */
.page { display: none; }
.page.active { display: block; animation: fadeUp 0.35s var(--ease-out); }

/* ==================== 搜索栏 ==================== */
.search-bar { margin: var(--space-md) var(--space-md) 0; position: relative; }
.search-input { width: 100%; height: 44px; border: none; border-radius: var(--r-pill); background: var(--c-bg-card); padding: 0 16px 0 44px; font-size: 14px; color: var(--c-text); box-shadow: var(--shadow-sm); outline: none; transition: all var(--duration) var(--ease-out); }
.search-input::placeholder { color: var(--c-text-hint); }
.search-input:focus { box-shadow: var(--shadow-md); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-text-hint); }
.search-icon svg { width: 18px; height: 18px; }

/* ==================== 继续学习横幅 ==================== */
.resume-banner { margin: var(--space-lg) var(--space-md); padding: var(--space-lg); border-radius: var(--r-lg); background: var(--c-gradient); color: #fff; position: relative; overflow: hidden; cursor: pointer; transition: transform var(--duration) var(--ease-out); }
.resume-banner:active { transform: scale(0.98); }
.resume-banner::before { content: ''; position: absolute; top: -30%; right: -20%; width: 200px; height: 200px; background: rgba(255,255,255,0.08); border-radius: 50%; }
.resume-banner::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 160px; height: 160px; background: rgba(255,255,255,0.05); border-radius: 50%; }
.resume-label { font-size: 12px; opacity: 0.8; margin-bottom: var(--space-xs); display: flex; align-items: center; gap: 4px; }
.resume-label svg { width: 14px; height: 14px; }
.resume-title { font-size: 18px; font-weight: 700; margin-bottom: var(--space-sm); position: relative; z-index: 1; }
.resume-meta { font-size: 13px; opacity: 0.75; display: flex; align-items: center; gap: var(--space-sm); position: relative; z-index: 1; }
.resume-progress-bar { flex: 1; max-width: 120px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; }
.resume-progress-fill { height: 100%; background: #fff; border-radius: 2px; width: 35%; transition: width 0.6s var(--ease-out); }

/* ==================== 分类标签 ==================== */
.category-section { padding: var(--space-md) 0; }
.category-scroll { display: flex; gap: 10px; padding: 0 var(--space-md); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.category-scroll::-webkit-scrollbar { display: none; }
.cat-tag { flex-shrink: 0; padding: 10px 22px; border-radius: var(--r-full); font-size: 14px; font-weight: 600; background: var(--c-bg-card); color: var(--c-text-sub); border: 1.5px solid var(--c-border); box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease-out); white-space: nowrap; }
.cat-tag:active { transform: scale(0.95); }
.cat-tag.active { background: var(--c-gradient); color: #fff; border-color: transparent; box-shadow: var(--shadow-primary); transform: scale(1.05); }

/* ==================== 区块 ==================== */
.section { padding: var(--space-sm) var(--space-md); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.section-title { font-size: 20px; font-weight: 700; }
.section-more { font-size: 13px; color: var(--c-primary); font-weight: 500; display: flex; align-items: center; gap: 2px; }
.section-more svg { width: 14px; height: 14px; }

/* ==================== 二级筛选 ==================== */
.sub-filter { display: flex; gap: 8px; }
.sub-tag { padding: 5px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; background: var(--c-bg-card); color: var(--c-text-sub); border: 1px solid var(--c-border); transition: all var(--duration) var(--ease-out); }
.sub-tag.active { background: var(--c-primary); color: #fff; border-color: transparent; }
.sub-tag:active { transform: scale(0.95); }

/* ==================== 内容卡片 ==================== */
.card-list { display: flex; flex-direction: column; gap: var(--space-md); }
.card { background: var(--c-bg-card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--duration) var(--ease-out); border: 1px solid var(--c-border); cursor: pointer; position: relative; }
.card:active { transform: scale(0.98); }
.card-inner { display: flex; gap: var(--space-md); padding: var(--space-md); }
.card-cover { width: 90px; height: 110px; border-radius: var(--r-md); flex-shrink: 0; display: grid; place-items: center; position: relative; overflow: hidden; }
.card-cover-icon { font-size: 32px; font-weight: 800; color: rgba(255,255,255,0.9); z-index: 1; }
.card-cover-badge { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.9); display: grid; place-items: center; }
.card-cover-badge svg { width: 12px; height: 12px; color: var(--c-primary); }
.card-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.card-type { font-size: 11px; color: var(--c-text-hint); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.card-type svg { width: 12px; height: 12px; }
.card-title { font-size: 17px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-desc { font-size: 13px; color: var(--c-text-sub); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-tag { padding: 3px 10px; border-radius: var(--r-sm); font-size: 11px; font-weight: 500; color: #fff; }
.tag-buddhism { background: var(--c-buddhism); }
.tag-taoism { background: var(--c-taoism); }
.tag-medicine { background: var(--c-medicine); }
.tag-culture { background: var(--c-culture); }
.tag-confucius { background: var(--c-confucius); }
.tag-art { background: var(--c-art); }
.card-progress { display: flex; align-items: center; gap: 6px; }
.card-progress-text { font-size: 11px; color: var(--c-text-hint); }
.card-progress-bar { width: 48px; height: 3px; background: var(--c-divider); border-radius: 2px; overflow: hidden; }
.card-progress-fill { height: 100%; background: var(--c-primary); border-radius: 2px; }

/* ==================== 横向滚动 ==================== */
.scroll-section { padding: var(--space-sm) 0; }
.scroll-cards { display: flex; gap: var(--space-md); padding: 0 var(--space-md); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.scroll-cards::-webkit-scrollbar { display: none; }
.scroll-card { flex-shrink: 0; width: 200px; scroll-snap-align: start; background: var(--c-bg-card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); cursor: pointer; transition: all var(--duration) var(--ease-out); }
.scroll-card:active { transform: scale(0.97); }
.scroll-card-cover { height: 120px; display: grid; place-items: center; position: relative; }
.scroll-card-cover-icon { font-size: 36px; font-weight: 800; color: rgba(255,255,255,0.9); }
.scroll-card-body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.scroll-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scroll-card-meta { font-size: 12px; color: var(--c-text-hint); }

/* ==================== 底部导航 ==================== */
.tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: calc(72px + var(--safe-bottom)); background: var(--c-bg-glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); display: flex; align-items: flex-start; justify-content: space-around; padding-top: 10px; padding-bottom: var(--safe-bottom); z-index: 200; border-top: 1px solid var(--c-border); transition: background 0.4s, transform 0.3s var(--ease-out); pointer-events: auto; }
.tab-bar.hidden { transform: translateX(-50%) translateY(100%); pointer-events: none; }
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--c-text-hint); font-size: 10px; font-weight: 500; transition: all var(--duration) var(--ease-out); padding: 4px 12px; border-radius: var(--r-sm); background: transparent; border: none; }
.tab-item svg { width: 22px; height: 22px; transition: all var(--duration) var(--ease-out); }
.tab-item.active { color: var(--c-primary); }
.tab-item.active svg { transform: translateY(-2px); }
.tab-item:active { transform: scale(0.9); }

/* ==================== 主题切换 ==================== */
.theme-toggle-track { position: relative; width: 48px; height: 26px; border-radius: 13px; background: #E0D8CF; border: none; cursor: pointer; transition: background 0.3s; padding: 0; }
[data-theme="dark"] .theme-toggle-track { background: var(--c-primary-dark); }
.theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.15); transition: transform 0.3s var(--ease-spring); }
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(22px); }

/* ==================== 分类页 ==================== */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); padding: var(--space-md); }
.category-card { border-radius: var(--r-lg); overflow: hidden; position: relative; height: 140px; cursor: pointer; transition: all var(--duration) var(--ease-out); }
.category-card:active { transform: scale(0.96); }
.category-card-bg { position: absolute; inset: 0; opacity: 0.15; }
.category-card-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-md); }
.category-card-icon { width: 48px; height: 48px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: var(--space-sm); color: #fff; font-size: 20px; font-weight: 800; }
.category-card-name { font-size: 17px; font-weight: 700; }
.category-card-count { font-size: 12px; color: var(--c-text-sub); margin-top: 2px; }
.category-content-list { padding: 0 var(--space-md) var(--space-lg); }
.category-back-btn { display: flex; align-items: center; gap: var(--space-xs); color: var(--c-primary); font-size: 14px; font-weight: 500; padding: var(--space-md); transition: all var(--duration); }
.category-back-btn:active { transform: scale(0.95); }
.category-back-btn svg { width: 18px; height: 18px; }
.category-detail-head { padding: 0 var(--space-md) var(--space-md); display: flex; align-items: center; justify-content: space-between; }
.category-detail-title { font-size: 22px; font-weight: 700; }

/* ==================== 作者页 ==================== */
.author-hero { padding: var(--space-xl) var(--space-md); text-align: center; background: var(--c-bg-page2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.author-hero-title { font-size: 24px; font-weight: 700; margin-bottom: var(--space-xs); }
.author-hero-desc { font-size: 14px; color: var(--c-text-sub); }
.author-list { padding: var(--space-md); }
.author-card { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--c-bg-card); border-radius: var(--r-lg); margin-bottom: var(--space-md); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); cursor: pointer; transition: all var(--duration) var(--ease-out); }
.author-card:active { transform: scale(0.98); }
.author-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 22px; font-weight: 700; }
.author-info { flex: 1; min-width: 0; }
.author-name { font-size: 16px; font-weight: 600; }
.author-dynasty { font-size: 12px; color: var(--c-text-hint); margin-top: 2px; }
.author-bio { font-size: 13px; color: var(--c-text-sub); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.author-works-count { flex-shrink: 0; text-align: center; padding: var(--space-sm) var(--space-md); background: var(--c-bg); border-radius: var(--r-sm); }
.author-works-num { font-size: 18px; font-weight: 700; color: var(--c-primary); }
.author-works-label { font-size: 10px; color: var(--c-text-hint); }
.author-detail-header { padding: var(--space-xl) var(--space-md) var(--space-lg); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--c-bg-page2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.author-detail-avatar { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 32px; font-weight: 700; margin-bottom: var(--space-md); box-shadow: var(--shadow-md); }
.author-detail-name { font-size: 22px; font-weight: 700; }
.author-detail-dynasty { font-size: 14px; color: var(--c-text-sub); margin-top: 2px; }
.author-detail-bio { font-size: 14px; color: var(--c-text-sub); margin-top: var(--space-md); line-height: 1.8; max-width: 320px; }
.author-detail-stats { display: flex; gap: var(--space-xl); margin-top: var(--space-lg); }
.author-stat { text-align: center; }
.author-stat-num { font-size: 20px; font-weight: 700; color: var(--c-primary); }
.author-stat-label { font-size: 11px; color: var(--c-text-hint); margin-top: 2px; }

/* ==================== 我的页面 ==================== */
.profile-header { padding: var(--space-xl) var(--space-md) var(--space-lg); background: var(--c-gradient); color: #fff; border-radius: 0 0 var(--r-lg) var(--r-lg); position: relative; overflow: hidden; }
.profile-header::before { content: ''; position: absolute; top: -40%; right: -20%; width: 200px; height: 200px; background: rgba(255,255,255,0.06); border-radius: 50%; }
.profile-theme-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.2s; }
.profile-theme-btn:active { background: rgba(255,255,255,0.3); }
.profile-theme-btn svg { width: 18px; height: 18px; color: #fff; }
.profile-theme-btn .theme-icon-moon { display: none; }
[data-theme="dark"] .profile-theme-btn .theme-icon-sun { display: none; }
[data-theme="dark"] .profile-theme-btn .theme-icon-moon { display: block; }
.profile-top { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.2); display: grid; place-items: center; border: 2px solid rgba(255,255,255,0.3); }
.profile-avatar svg { width: 32px; height: 32px; color: #fff; }
.profile-name { font-size: 20px; font-weight: 700; }
.profile-id { font-size: 13px; opacity: 0.75; margin-top: 2px; }
.profile-stats { display: flex; justify-content: space-around; position: relative; z-index: 1; }
.profile-stat { text-align: center; }
.profile-stat-num { font-size: 22px; font-weight: 700; }
.profile-stat-label { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.study-card { margin: calc(-1 * var(--space-md)) var(--space-md) 0; padding: var(--space-lg); background: var(--c-bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-md); position: relative; z-index: 2; border: 1px solid var(--c-border); }
.study-card-title { font-size: 14px; font-weight: 600; color: var(--c-text-sub); margin-bottom: var(--space-md); }
.study-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 80px; gap: 6px; }
.study-chart-bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--c-divider); transition: height 0.6s var(--ease-out); position: relative; min-height: 4px; }
.study-chart-bar.filled { background: var(--c-gradient); }
.study-chart-labels { display: flex; justify-content: space-between; margin-top: var(--space-sm); }
.study-chart-label { font-size: 10px; color: var(--c-text-hint); flex: 1; text-align: center; }

/* ==================== 菜单列表 ==================== */
.menu-group { margin: var(--space-lg) var(--space-md) 0; background: var(--c-bg-card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); overflow: hidden; }
.menu-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); cursor: pointer; transition: background var(--duration); border: none; background: none; width: 100%; text-align: left; color: var(--c-text); font-size: 15px; }
.menu-item:active { background: var(--c-divider); }
.menu-item + .menu-item { border-top: 1px solid var(--c-divider); }
.menu-item-icon { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; }
.menu-item-icon svg { width: 18px; height: 18px; color: #fff; }
.menu-item-text { flex: 1; font-weight: 500; }
.menu-item-arrow { color: var(--c-text-hint); }
.menu-item-arrow svg { width: 16px; height: 16px; }
.menu-item-badge { background: #E74C3C; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); min-width: 20px; text-align: center; }

/* ==================== 内容详情页 ==================== */
.detail-page { position: fixed; inset: 0; background: var(--c-bg); z-index: 300; max-width: 480px; margin: 0 auto; display: none; overflow: hidden; }
.bookshelf-page { position: fixed; inset: 0; background: var(--c-bg); z-index: 300; max-width: 480px; margin: 0 auto; display: none; flex-direction: column; overflow: hidden; }
.bookshelf-page.active { display: flex; flex-direction: column; animation: slideIn 0.3s var(--ease-out); }
.bookshelf-body { padding: var(--space-md); overflow-y: auto; flex: 1; }
.bookshelf-empty { text-align: center; padding: 60px 20px; color: var(--c-text-hint); }
.bookshelf-empty svg { width: 64px; height: 64px; opacity: 0.3; margin-bottom: 16px; }
.bookshelf-empty p { font-size: 14px; }
.bookshelf-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--c-bg-card); border-radius: var(--r-lg); margin-bottom: var(--space-sm); transition: transform 0.2s; }
.bookshelf-item:active { transform: scale(0.98); }
.bookshelf-item-cover { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--c-gradient); display: grid; place-items: center; color: #fff; font-size: 20px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.bookshelf-item-cover img { width: 100%; height: 100%; object-fit: cover; }
.bookshelf-item-info { flex: 1; min-width: 0; }
.bookshelf-item-title { font-size: 15px; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookshelf-item-meta { font-size: 12px; color: var(--c-text-hint); margin-top: 4px; }
.bookshelf-item-remove { width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-page2); display: grid; place-items: center; flex-shrink: 0; border: none; cursor: pointer; transition: background 0.2s; }
.bookshelf-item-remove:active { background: #E74C3C; }
.bookshelf-item-remove svg { width: 16px; height: 16px; color: var(--c-text-hint); }
.history-date-label { font-size: 13px; font-weight: 600; color: var(--c-text-hint); padding: 12px 4px 6px; }
#history-page { z-index: 300; }
.detail-page.active { display: flex; flex-direction: column; animation: slideIn 0.3s var(--ease-out); }
.detail-nav { height: 56px; display: flex; align-items: center; gap: var(--space-md); padding: 0 var(--space-md); background: var(--c-bg-glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--c-border); flex-shrink: 0; position: relative; z-index: 1; }
.detail-nav-title { flex: 1; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-back { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(128,128,128,0.12); cursor: pointer; flex-shrink: 0; transition: all var(--duration) var(--ease-out); border: none; }
.detail-back:active { background: rgba(128,128,128,0.25); }
.detail-back svg { width: 20px; height: 20px; color: var(--c-primary); }
.detail-shelf-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: none; cursor: pointer; transition: all 0.2s; margin-left: auto; background: var(--c-bg-page2); flex-shrink: 0; }
.detail-shelf-btn:active { transform: scale(0.92); }
.detail-shelf-btn svg { width: 18px; height: 18px; color: var(--c-text-sub); }
.detail-shelf-btn.added { background: var(--c-primary); }
.detail-shelf-btn.added svg { color: #fff; }
.detail-nav-title { flex: 1; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-body { padding: var(--space-lg) var(--space-md) calc(72px + var(--space-lg)); overflow-y: auto; flex: 1; }
.detail-cover { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-lg); display: grid; place-items: center; margin-bottom: var(--space-lg); overflow: hidden; }
.detail-cover-icon { font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.9); }
.detail-title { font-size: 22px; font-weight: 700; line-height: 1.4; margin-bottom: var(--space-sm); }
.detail-desc { font-size: 14px; color: var(--c-text-sub); line-height: 1.8; margin-bottom: var(--space-lg); }
.detail-meta { display: flex; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.detail-meta-item { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--c-text-sub); }
.detail-meta-item svg { width: 16px; height: 16px; }
.detail-chapters-title { font-size: 18px; font-weight: 700; margin-bottom: var(--space-md); }
.chapter-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.chapter-item { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--c-bg-card); border-radius: var(--r-md); border: 1px solid var(--c-border); cursor: pointer; transition: all var(--duration) var(--ease-out); }
.chapter-item:active { transform: scale(0.98); }
.chapter-num { width: 28px; height: 28px; border-radius: 50%; background: var(--c-divider); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--c-text-sub); flex-shrink: 0; }
.chapter-item.studied .chapter-num { background: var(--c-primary); color: #fff; }
.chapter-title { flex: 1; font-size: 15px; font-weight: 500; }
.chapter-duration { font-size: 12px; color: var(--c-text-hint); }

/* 媒体播放器 */
.media-player { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: var(--c-bg-card); border-top: 1px solid var(--c-border); padding: var(--space-md) var(--space-lg) calc(var(--space-md) + var(--safe-bottom)); z-index: 60; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); display: none; }
.media-player.active { display: block; animation: slideUp 0.3s var(--ease-out); }
.media-player-title { font-size: 14px; font-weight: 600; margin-bottom: var(--space-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-progress { width: 100%; height: 4px; background: var(--c-divider); border-radius: 2px; cursor: pointer; margin-bottom: var(--space-sm); }
.media-progress-fill { height: 100%; background: var(--c-primary); border-radius: 2px; width: 0%; transition: width 0.1s linear; }
.media-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-xl); }
.media-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-primary); }
.media-btn svg { width: 22px; height: 22px; }
.media-btn:active { transform: scale(0.92); }
.media-time { font-size: 12px; color: var(--c-text-hint); min-width: 40px; text-align: center; }

/* ==================== 动画 ==================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideUp { from { transform: translateX(-50%) translateY(100%); } to { transform: translateX(-50%) translateY(0); } }
.anim-in { animation: fadeUp 0.5s var(--ease-out) both; }
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.1s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.2s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.3s; }
.anim-delay-7 { animation-delay: 0.35s; }
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.skeleton { background: linear-gradient(90deg, var(--c-border) 25%, var(--c-divider) 50%, var(--c-border) 75%); background-size: 400px 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-sm); }

/* ==================== 装饰 ==================== */
.decor-circle { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0.03; }

/* ==================== Toast ==================== */
.toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-20px); background: var(--c-text); color: var(--c-bg); padding: 10px 20px; border-radius: var(--r-pill); font-size: 13px; opacity: 0; transition: all 0.3s var(--ease-out); z-index: 1000; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================== 滚动条 ==================== */
::-webkit-scrollbar { width: 0; height: 0; }

/* ==================== 登录弹窗 ==================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 200; display: none; place-items: center; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.show { display: grid; opacity: 1; }
.modal-box { width: 85%; max-width: 360px; background: var(--c-bg-card); border-radius: var(--r-lg); padding: var(--space-xl); box-shadow: var(--shadow-xl); transform: scale(0.9); transition: transform 0.3s var(--ease-spring); }
.modal-overlay.show .modal-box { transform: scale(1); }
.modal-title { font-size: 20px; font-weight: 700; text-align: center; margin-bottom: var(--space-lg); }
.modal-input { width: 100%; height: 48px; border: 1.5px solid var(--c-border); border-radius: var(--r-sm); padding: 0 var(--space-md); font-size: 15px; color: var(--c-text); background: var(--c-bg); outline: none; margin-bottom: var(--space-md); transition: border-color var(--duration); }
.modal-input:focus { border-color: var(--c-primary); }
.modal-input::placeholder { color: var(--c-text-hint); }
.modal-btn { width: 100%; height: 48px; border: none; border-radius: var(--r-sm); background: var(--c-gradient); color: #fff; font-size: 16px; font-weight: 600; box-shadow: var(--shadow-primary); transition: all var(--duration) var(--ease-out); margin-top: var(--space-sm); }
.modal-btn:active { transform: scale(0.97); }
.modal-close { text-align: center; margin-top: var(--space-md); font-size: 14px; color: var(--c-text-hint); cursor: pointer; }
.modal-close:active { color: var(--c-text-sub); }

/* ==================== 编辑资料弹窗 ==================== */
.profile-edit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }
.profile-edit-title { font-size: 18px; font-weight: 700; color: var(--c-text); }
.profile-edit-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--c-bg-page2); color: var(--c-text-sub); display: grid; place-items: center; cursor: pointer; transition: all 0.2s; }
.profile-edit-close:active { background: var(--c-border); transform: scale(0.9); }
.profile-edit-close svg { width: 18px; height: 18px; }

.profile-edit-avatar-row { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-xl); }
.profile-edit-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--c-gradient); display: grid; place-items: center; border: 3px solid rgba(120,80,56,0.15); box-shadow: var(--shadow-md); position: relative; }
.profile-edit-avatar svg { width: 36px; height: 36px; color: #fff; }
.profile-edit-avatar-badge { position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--c-bg-card); border: 2px solid var(--c-bg-card); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.profile-edit-avatar-badge svg { width: 14px; height: 14px; color: var(--c-primary); }
.profile-edit-avatar-hint { font-size: 12px; color: var(--c-text-hint); margin-top: var(--space-sm); }

.profile-edit-field { margin-bottom: var(--space-lg); }
.profile-edit-label { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--c-text-sub); margin-bottom: var(--space-sm); }
.profile-edit-label .char-count { font-weight: 400; font-size: 12px; color: var(--c-text-hint); }
.profile-edit-input { width: 100%; height: 48px; border: 1.5px solid var(--c-border); border-radius: var(--r-sm); padding: 0 var(--space-md); font-size: 15px; color: var(--c-text); background: var(--c-bg); outline: none; transition: all 0.25s var(--ease-out); }
.profile-edit-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(120,80,56,0.08); }
.profile-edit-input::placeholder { color: var(--c-text-hint); }

.profile-edit-textarea { width: 100%; min-height: 88px; border: 1.5px solid var(--c-border); border-radius: var(--r-sm); padding: var(--space-md); font-size: 15px; color: var(--c-text); background: var(--c-bg); outline: none; resize: none; line-height: 1.6; transition: all 0.25s var(--ease-out); box-sizing: border-box; }
.profile-edit-textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(120,80,56,0.08); }
.profile-edit-textarea::placeholder { color: var(--c-text-hint); }

.profile-edit-save { width: 100%; height: 50px; border: none; border-radius: var(--r-sm); background: var(--c-gradient); color: #fff; font-size: 16px; font-weight: 600; box-shadow: var(--shadow-primary); cursor: pointer; transition: all var(--duration) var(--ease-out); }
.profile-edit-save:active { transform: scale(0.97); opacity: 0.9; }

.profile-edit-tap-hint { text-align: center; font-size: 12px; color: var(--c-text-hint); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--c-divider); }

.login-tabs { display: flex; gap: 0; margin-bottom: 16px; background: var(--c-bg-page2); border-radius: var(--r-md); padding: 3px; }
.login-tab { flex: 1; padding: 8px; border: none; background: none; border-radius: calc(var(--r-md) - 2px); font-size: 13px; font-weight: 600; color: var(--c-text-hint); cursor: pointer; transition: all 0.2s; }
.login-tab.active { background: var(--c-bg-card); color: var(--c-primary); box-shadow: var(--shadow-sm); }
.phone-input-row { display: flex; gap: 8px; margin-bottom: var(--space-md); }
.phone-input-row .modal-input { flex: 1; margin: 0; }
.sms-btn { padding: 0 12px; border-radius: var(--r-md); background: var(--c-primary); color: #fff; border: none; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s; }
.sms-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.remember-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--c-text-sub); cursor: pointer; user-select: none; }
.remember-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-primary); cursor: pointer; }
.code-boxes { display: flex; gap: 10px; justify-content: center; margin-bottom: var(--space-md); }
.code-box { width: 56px; height: 56px; border: 1.5px solid var(--c-border); border-radius: var(--r-md); text-align: center; font-size: 24px; font-weight: 700; color: var(--c-text); background: var(--c-bg); outline: none; transition: all 0.2s; caret-color: var(--c-primary); }
.code-box:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(197,152,63,0.15); }
.code-box.filled { border-color: var(--c-primary); background: rgba(197,152,63,0.05); }
.modal-switch { text-align: center; margin-top: var(--space-md); font-size: 14px; color: var(--c-text-sub); }
.modal-switch a { color: var(--c-primary); font-weight: 600; cursor: pointer; }

/* ==================== 空状态 / 加载状态 ==================== */
.empty-state { text-align: center; padding: 64px var(--space-xl); color: var(--c-text-hint); }
.empty-state svg { width: 64px; height: 64px; margin: 0 auto var(--space-md); opacity: 0.3; }
.empty-state-text { font-size: 14px; }
.loading-dots { display: flex; justify-content: center; gap: 6px; padding: var(--space-xl); }
.loading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-hint); animation: dotPulse 1.2s infinite; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* ==================== 文字阅读器 ==================== */
.reader-page { position: fixed; inset: 0; background: var(--c-bg); z-index: 400; display: none; flex-direction: column; }
.reader-page.active { display: flex; }
.reader-nav { display: flex; align-items: center; padding: 12px var(--space-md); background: var(--c-bg-glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--c-border); gap: 12px; flex-shrink: 0; }
.reader-nav-title { flex: 1; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-lg) var(--space-md) calc(60px + var(--safe-bottom)); scroll-behavior: smooth; }
.reader-content { font-size: 16px; line-height: 1.8; color: var(--c-text); max-width: 680px; margin: 0 auto; }
.reader-content p { margin-bottom: 16px; text-indent: 2em; }
.reader-content h2 { font-size: 20px; font-weight: 700; margin: 24px 0 12px; color: var(--c-text); }
.reader-content h3 { font-size: 18px; font-weight: 600; margin: 20px 0 8px; color: var(--c-text); }
.reader-content blockquote { border-left: 3px solid var(--c-primary); padding: 8px 16px; margin: 16px 0; background: var(--c-bg-page2); border-radius: 0 var(--r-sm) var(--r-sm) 0; color: var(--c-text-sub); font-style: italic; }
.reader-content ul, .reader-content ol { padding-left: 24px; margin-bottom: 16px; }
.reader-content li { margin-bottom: 4px; }
.reader-progress-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 3px; background: var(--c-border); z-index: 210; }
.reader-progress-fill { height: 100%; background: var(--c-gradient); transition: width 0.3s; }

/* ==================== TTS 朗读工具栏 ==================== */
.tts-toolbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 210;
    background: var(--c-bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--c-border); padding: 6px 12px;
    display: none; animation: ttsSlideUp 0.3s var(--ease-out);
}
.tts-toolbar.show { display: block; }
@keyframes ttsSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.tts-main { display: flex; align-items: center; gap: 6px; }

.tts-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: var(--c-bg-page2); color: var(--c-text-sub);
    display: grid; place-items: center; cursor: pointer;
    transition: all 0.2s; flex-shrink: 0;
}
.tts-btn svg { width: 18px; height: 18px; }
.tts-btn:active { transform: scale(0.9); background: var(--c-border); }
.tts-btn.active { background: var(--c-primary); color: #fff; }

.tts-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 4px; }
.tts-paragraph-counter { font-size: 11px; color: var(--c-text-hint); text-align: center; }
.tts-progress-bar { height: 3px; background: var(--c-border); border-radius: 2px; overflow: hidden; }
.tts-progress-fill { height: 100%; background: var(--c-gradient); transition: width 0.3s; border-radius: 2px; }

/* TTS 段落高亮 */
.tts-reading {
    background: rgba(120,80,56,0.08) !important;
    border-radius: 4px;
    padding-left: 8px;
    border-left: 3px solid var(--c-primary) !important;
    transition: all 0.4s var(--ease-out);
}

/* 有 TTS 工具栏时，章节导航上移 */
.reader-chapter-nav { position: fixed; bottom: var(--safe-bottom); left: 0; right: 0; display: flex; background: var(--c-bg-glass); backdrop-filter: blur(20px); border-top: 1px solid var(--c-border); z-index: 210; transition: bottom 0.3s; }
.reader-chapter-nav.tts-shift { bottom: 46px; }
.reader-chapter-btn { flex: 1; padding: 12px; text-align: center; font-size: 13px; font-weight: 500; color: var(--c-primary); background: none; border: none; cursor: pointer; }
.reader-chapter-btn:disabled { color: var(--c-text-hint); }

/* ==================== 媒体播放器增强 ==================== */
.player-page { position: fixed; inset: 0; background: var(--c-bg); z-index: 400; display: none; flex-direction: column; }
.player-page.active { display: flex; }
.player-nav { display: flex; align-items: center; padding: 12px var(--space-md); background: var(--c-bg-glass); backdrop-filter: blur(20px); border-bottom: 1px solid var(--c-border); gap: 12px; flex-shrink: 0; }
.player-nav-title { flex: 1; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 内容超出时 flex 居中会裁掉顶部且无法滚动，改用 flex-start + 首尾 auto 边距实现安全居中 */
.player-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--space-xl); overflow-y: auto; }
.player-body > *:first-child { margin-top: auto; }
.player-body > *:last-child { margin-bottom: auto; }
.player-cover { width: 200px; height: 200px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700; color: rgba(255,255,255,0.8); box-shadow: var(--shadow-xl); margin-bottom: var(--space-xl); animation: coverPulse 3s ease-in-out infinite; }
@keyframes coverPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.02);} }
.player-cover.playing { animation: coverPulse 3s ease-in-out infinite; }
.player-cover.paused { animation: none; }
/* 播放页关联文字模式：封面变为可滚动的文字区域 */
.player-cover.linked-text-mode { width: 100%; max-width: 400px; height: 240px; padding: var(--space-md) var(--space-md); font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.92); line-height: 1.8; text-align: left; overflow: hidden; cursor: default; }
.player-cover.linked-text-mode .linked-text-scroll { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.player-cover.linked-text-mode .linked-text-scroll::-webkit-scrollbar { width: 3px; }
.player-cover.linked-text-mode .linked-text-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.player-info { text-align: center; margin-bottom: var(--space-xl); width: 100%; max-width: 400px; }
.player-chapter-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.player-content-title { font-size: 13px; color: var(--c-text-hint); }
.player-seek { width: 100%; max-width: 400px; padding: 0 var(--space-md); }
.player-seek input[type=range] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--c-border); border-radius: 2px; outline: none; }
.player-seek input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c-primary); cursor: pointer; }
.player-time-row { width: 100%; max-width: 400px; display: flex; justify-content: space-between; font-size: 12px; color: var(--c-text-hint); margin-top: 6px; }
.player-controls { display: flex; align-items: center; gap: 24px; margin-top: var(--space-lg); }
/* 视频播放：默认横屏，占满宽度、限制高度 */
#video-element { display: none; width: 100%; max-height: 40vh; object-fit: contain; background: #000; border-radius: var(--r-md); margin-bottom: var(--space-lg); }
/* 竖屏视频（如手机竖拍）：按比例放大并居中，避免被压成窄条 */
#video-element.is-portrait { width: auto; max-width: 100%; max-height: 60vh; align-self: center; border-radius: var(--r-md); }
.player-ctrl-btn { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-primary); transition: transform 0.2s; }
.player-ctrl-btn:active { transform: scale(0.9); }
.player-ctrl-btn svg { width: 24px; height: 24px; }
.player-ctrl-sm { width: 36px; height: 36px; background: var(--c-bg-page2); box-shadow: none; }
.player-ctrl-sm svg { width: 18px; height: 18px; color: var(--c-text-sub); }
.player-chapters-list { width: 100%; max-width: 400px; margin-top: var(--space-xl); border-top: 1px solid var(--c-border); padding-top: var(--space-md); }
.player-chapters-title { font-size: 14px; font-weight: 600; margin-bottom: var(--space-sm); color: var(--c-text-sub); }
.player-ch-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.2s; }
.player-ch-item:hover, .player-ch-item.active { background: var(--c-bg-page2); }
.player-ch-num { width: 24px; height: 24px; border-radius: 50%; background: var(--c-border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--c-text-sub); flex-shrink: 0; }
.player-ch-item.active .player-ch-num { background: var(--c-primary); color: #fff; }
.player-ch-name { font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-ch-dur { font-size: 12px; color: var(--c-text-hint); }

/* ==================== 图片画廊 ==================== */
.gallery-page { position: fixed; inset: 0; background: #000; z-index: 400; display: none; flex-direction: column; }
.gallery-page.active { display: flex; }
.gallery-nav { display: flex; align-items: center; padding: 12px var(--space-md); background: rgba(0,0,0,0.6); backdrop-filter: blur(20px); gap: 12px; flex-shrink: 0; color: #fff; }
.gallery-nav-title { flex: 1; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-counter { font-size: 13px; color: rgba(255,255,255,0.6); }
.gallery-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.gallery-image { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.gallery-image.transition { transition: transform 0.3s, opacity 0.3s; }
.gallery-thumbs { display: flex; gap: 8px; padding: 12px var(--space-md) calc(12px + var(--safe-bottom)); background: rgba(0,0,0,0.6); overflow-x: auto; flex-shrink: 0; }
.gallery-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: all 0.2s; flex-shrink: 0; }
.gallery-thumb.active { opacity: 1; border-color: #fff; }
.gallery-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); z-index: 5; }
.gallery-nav-arrow:active { background: rgba(255,255,255,0.3); }
.gallery-nav-arrow svg { width: 24px; height: 24px; }
.gallery-nav-arrow.prev { left: 16px; }
.gallery-nav-arrow.next { right: 16px; }

/* ==================== 章节内容编辑器增强 ==================== */
.reader-placeholder { text-align: center; padding: 40px 20px; color: var(--c-text-hint); }
.reader-placeholder svg { width: 48px; height: 48px; opacity: 0.3; margin-bottom: 12px; }

/* ==================== 响应式 ==================== */
@media (max-width: 360px) {
    .reader-content { font-size: 15px; }
    .player-cover { width: 160px; height: 160px; font-size: 40px; }
}