/* =================================== */
/* 本地字体 (Local Fonts) 定义       */
/* =================================== */

@font-face {
    font-family: 'My Local Font';
    /* 这是您为字体起的名字 */
    src: url('../fonts/MyFont-Regular.woff2') format('woff2');
    /* 路径指向步骤一的文件 */
    font-weight: 400;
    /* 对应常规体 */
    font-style: normal;
    font-display: swap;
    /* 确保文本快速显示 */
}

@font-face {
    font-family: 'My Local Font';
    /* 名字必须相同 */
    src: url('../fonts/MyFont-Bold.woff2') format('woff2');
    /* 路径指向步骤一的文件 */
    font-weight: 700;
    /* 对应粗体 */
    font-style: normal;
    font-display: swap;
}

/* =================================== */
/* 核心共享样式                      */
/* =================================== */

/* ▼▼▼ 修复 11：iOS Safari 搜索框样式重置 ▼▼▼ */
input[type="search"] {
    -webkit-appearance: none;
    /* 移除 iOS 默认的内阴影和圆角 */
    border-radius: 0.5rem;
    /* 强制应用我们的圆角 */
}

nav.main-nav {
    transition: transform 0.3s ease-in-out;
}

nav.main-nav-hidden {
    transform: translateY(-100%);
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #FBBF24;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 分类和分页按钮 (共享) */
.control-btn.active,
#pagination-container button.bg-amber-500 {
    background-color: #FBBF24;
    color: white;
}

#pagination-container button {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* 共享模态框 */
#toggle-zh::before,
#setting-theme::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

#toggle-zh:checked::before,
#setting-theme:checked::before {
    transform: translateX(20px);
}

#toggle-zh:checked {
    background-color: #F59E0B;
}

#dictionary-popup {
    transition: opacity 0.3s, transform 0.3s;
}

#toast-notification.show {
    transform: translateY(0);
    opacity: 1;
    max-width: 90%;
}

.book-preview-card .absolute.bottom-0,
.book-preview-card .absolute.top-2 {
    z-index: 10;
}

#achievements-content-container .bg-indigo-50 {
    border-left: 4px solid #6366f1;
}

#achievements-content-container .bg-emerald-50 {
    border-left: 4px solid #10b981;
}

#achievements-content-container .bg-amber-50 {
    border-left: 4px solid #f59e0b;
}

#achievements-content-container .bg-sky-50 {
    border-left: 4px solid #0ea5e9;
}

/* 返回顶部按钮 */
#back-to-top-btn {
    opacity: 0;
    transform: translateY(20px);
}

#back-to-top-btn.show {
    display: none;
    /* 默认隐藏 (移动端) */
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {

    /* md breakpoint (Tailwind) */
    #back-to-top-btn.show {
        display: block;
        /* 仅在桌面端显示 */
    }
}

/* =================================== */
/* Dark Mode (Common - Base)           */
/* =================================== */
body.dark-mode {
    background-color: #0f172a;
    color: #cbd5e1;
}

/* 共享模态框/卡片 基础背景 */
body.dark-mode #reader-screen>div,
body.dark-mode #selection-screen header,
body.dark-mode .book-preview-card,
body.dark-mode #dictionary-popup,
body.dark-mode #auth-modal>div,
body.dark-mode #wordbook-modal>div,
body.dark-mode #achievements-modal>div,
body.dark-mode #history-modal>div,
body.dark-mode #keyboard-shortcut-popover,
body.dark-mode #pdf-hint-popover,
body.dark-mode #pdf-reader-screen>div,
body.dark-mode #pdf-selection-screen header,
body.dark-mode #pdf-book-selection-container .book-preview-card.bg-white,
body.dark-mode #favorites-modal>div,
body.dark-mode .static-page-card

/* <-- from static-page.css */
    {
    background-color: #1e293b;
    border-color: #334155;
}

/* 共享文字颜色 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode #book-title,
body.dark-mode .font-semibold,
body.dark-mode .font-bold,
body.dark-mode #pdf-book-title,
body.dark-mode #pdf-selection-screen header h1,
body.dark-mode #pdf-book-selection-container .book-preview-card h3,
body.dark-mode #favorites-list-container h4,
body.dark-mode .static-page-card .static-content-wrapper h1,
/* <-- from static-page.css */
body.dark-mode .static-page-card .static-content-wrapper h2,
body.dark-mode .static-page-card .static-content-wrapper h3 {
    color: #f1f5f9;
}

body.dark-mode p,
body.dark-mode label,
body.dark-mode .text-slate-500,
body.dark-mode .text-slate-600,
body.dark-mode .text-slate-700,
body.dark-mode #keyboard-shortcut-popover .text-slate-600,
body.dark-mode #keyboard-shortcut-popover .text-slate-800,
body.dark-mode #pdf-hint-popover .text-slate-600,
body.dark-mode #pdf-hint-popover .text-slate-800,
body.dark-mode #pdf-selection-screen header p,
body.dark-mode #pdf-no-results-message,
body.dark-mode .static-page-card .static-content-wrapper,
/* <-- from static-page.css */
body.dark-mode .static-page-card .static-content-wrapper p,
body.dark-mode .static-page-card .static-content-wrapper li,
body.dark-mode .static-page-card .static-content-wrapper .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode kbd,
body.dark-mode .static-page-card kbd

/* <-- from static-page.css */
    {
    background-color: #334155;
}

/* 共享导航栏 */
body.dark-mode nav.main-nav {
    background-color: rgba(30, 41, 59, 0.8);
}

body.dark-mode .main-nav button:hover {
    background-color: #334155;
}

body.dark-mode #srt-library-nav-link-desktop,
body.dark-mode #pdf-library-nav-link-desktop,
body.dark-mode #wordbook-nav-link-desktop,
body.dark-mode #dashboard-nav-link-desktop {
    color: #cbd5e1;
}

body.dark-mode #srt-library-nav-link-desktop:hover,
body.dark-mode #pdf-library-nav-link-desktop:hover,
body.dark-mode #wordbook-nav-link-desktop:hover,
body.dark-mode #dashboard-nav-link-desktop:hover,
body.dark-mode #srt-library-nav-link-desktop.current-menu-item,
body.dark-mode #pdf-library-nav-link-desktop.current-menu-item,
body.dark-mode #wordbook-nav-link-desktop.current-menu-item,
body.dark-mode #dashboard-nav-link-desktop.current-menu-item,
body.dark-mode #srt-library-nav-link-desktop.current_page_item,
body.dark-mode #pdf-library-nav-link-desktop.current_page_item,
body.dark-mode #wordbook-nav-link-desktop.current_page_item,
body.dark-mode #dashboard-nav-link-desktop.current_page_item {
    background-color: #334155;
    color: #f1f5f9;
}

/* 共享暗黑模式按钮 */
body.dark-mode #theme-toggle-btn {
    color: #94a3b8;
    background-color: transparent;
}

body.dark-mode #theme-toggle-btn:hover {
    background-color: #334155;
}

body.dark-mode #mobile-theme-toggle-btn {
    color: #cbd5e1;
}

body.dark-mode #mobile-theme-toggle-btn:hover {
    background-color: #334155;
}

/* 共享筛选器 */
body.dark-mode #search-box::placeholder {
    color: #94a3b8;
}

body.dark-mode #category-filters button:not(.active) {
    background-color: #334155;
    color: #cbd5e1;
}

body.dark-mode #category-filters button:not(.active):hover {
    background-color: #475569;
}

body.dark-mode #category-filters p {
    color: #cbd5e1;
}

body.dark-mode input[type="search"] {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-mode #selection-screen main>div.sticky,
body.dark-mode #pdf-selection-screen main>div.sticky {
    background-color: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 共享模态框内容 */
body.dark-mode #history-list-container .bg-slate-50,
body.dark-mode #favorites-list-container .bg-slate-50 {
    background-color: #1e293b;
}

body.dark-mode #history-list-container .bg-slate-50:hover,
body.dark-mode #favorites-list-container .bg-slate-50:hover {
    background-color: #334155;
}

body.dark-mode #history-list-container h4,
body.dark-mode #favorites-list-container h4 {
    color: #f1f5f9;
}

body.dark-mode .wordbook-item .bg-slate-100 {
    background-color: #1e293b;
    color: #cbd5e1;
}

body.dark-mode .wordbook-item button {
    color: #94a3b8;
}

body.dark-mode .wordbook-item button:hover {
    color: #f1f5f9;
    background-color: #334155;
}

body.dark-mode .wordbook-item .text-amber-600 {
    color: #fcd34d;
}

body.dark-mode #achievements-content-container h4 {
    color: #f1f5f9;
}

body.dark-mode #achievements-content-container .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #b45309;
}

body.dark-mode #achievements-content-container .bg-sky-50 {
    background-color: rgba(14, 165, 233, 0.1);
    border-color: #0369a1;
}

body.dark-mode #achievements-content-container .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: #047857;
}

body.dark-mode #achievements-content-container .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.1);
    border-color: #7e22ce;
}

body.dark-mode #achievements-content-container .text-amber-600 {
    color: #fcd34d;
}

body.dark-mode #achievements-content-container .text-sky-600 {
    color: #7dd3fc;
}

body.dark-mode #achievements-content-container .text-emerald-600 {
    color: #6ee7b7;
}

body.dark-mode #achievements-content-container .text-purple-600 {
    color: #c084fc;
}

body.dark-mode #achievements-tabs .tab-btn {
    color: #94a3b8;
}

body.dark-mode #achievements-tabs .tab-btn.active {
    border-color: #FBBF24;
    color: #FBBF24;
}

body.dark-mode #achievements-content-container .bg-slate-100 {
    background-color: #1e293b;
}

body.dark-mode #achievements-content-container .bg-slate-100 h5 {
    color: #f1f5f9;
}

body.dark-mode .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.1);
}

body.dark-mode .bg-slate-50 {
    background-color: #334155;
}

body.dark-mode #dictionary-popup .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid #78350f;
}

body.dark-mode #dictionary-popup .bg-amber-50 .text-amber-700 {
    color: #fcd34d;
}

body.dark-mode #dictionary-popup .bg-amber-50 .text-slate-800 {
    color: #e2e8f0;
}

body.dark-mode #wordbook-modal .bg-slate-100 {
    background-color: #1e293b;
    color: #cbd5e1;
}

body.dark-mode #wordbook-modal .quiz-options button {
    background-color: #334155;
    border-color: #475569;
    color: #cbd5e1;
}

body.dark-mode #wordbook-modal .quiz-options button:hover {
    background-color: #475569;
    border-color: #f59e0b;
}

body.dark-mode #wordbook-modal button#retake-quiz-btn,
body.dark-mode #wordbook-modal button#back-to-wordbook-btn {
    color: #f1f5f9;
}

body.dark-mode #wordbook-modal button#back-to-wordbook-btn {
    background-color: #334155;
}

body.dark-mode #wordbook-modal button#back-to-wordbook-btn:hover {
    background-color: #475569;
}

/* 共享：退出登录/注册按钮 */
body.dark-mode #desktop-auth-buttons a,
body.dark-mode #mobile-auth-buttons a {
    background-color: #334155;
    /* bg-slate-700 */
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode #desktop-auth-buttons a:hover,
body.dark-mode #mobile-auth-buttons a:hover {
    background-color: #475569;
    /* bg-slate-600 */
}

body.dark-mode #desktop-auth-buttons button.bg-slate-100 {
    background-color: #334155;
    /* bg-slate-700 */
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode #desktop-auth-buttons button.bg-slate-100:hover {
    background-color: #475569;
    /* bg-slate-600 */
}

body.dark-mode #mobile-auth-buttons button {
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode #mobile-auth-buttons button:hover {
    background-color: #334155;
    /* bg-slate-700 */
    color: #f1f5f9;
}

/* 共享：排序下拉菜单 */
body.dark-mode #sort-dropdown-btn {
    background-color: #334155;
    /* bg-slate-700 */
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode #sort-dropdown-btn:hover {
    background-color: #475569;
    /* bg-slate-600 */
}

body.dark-mode #sort-dropdown-menu {
    background-color: #1e293b;
    /* bg-slate-800 */
    border-color: #334155;
    /* border-slate-700 */
}

body.dark-mode #sort-dropdown-menu a {
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode #sort-dropdown-menu a:hover {
    background-color: #334155;
    /* bg-slate-700 */
}

/* 共享：TTS 和 连胜 */
.tts-button {
    cursor: pointer;
    opacity: 0.7;
}

.tts-button:hover {
    opacity: 1;
}

#achievements-content-container .bg-red-50 {
    border-left: 4px solid #ef4444;
}

#achievements-content-container .bg-blue-50 {
    border-left: 4px solid #3b82f6;
}

body.dark-mode #achievements-content-container .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #b91c1c;
}

body.dark-mode #achievements-content-container .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #1d4ed8;
}

body.dark-mode #achievements-content-container .text-red-600 {
    color: #f87171;
}

body.dark-mode #achievements-content-container .text-blue-600 {
    color: #93c5fd;
}

body.dark-mode .tts-button {
    color: #94a3b8;
}

body.dark-mode .tts-button:hover {
    color: #fcd34d;
}

/* 共享：页脚 */
body.dark-mode .main-footer {
    background-color: rgba(30, 41, 59, 0.8);
    /* bg-slate-800/90 */
    border-color: #334155;
    /* border-slate-700 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.dark-mode .main-footer p,
body.dark-mode .main-footer a {
    color: #94a3b8;
    /* text-slate-400 */
}

body.dark-mode .main-footer a:hover {
    color: #fcd34d;
    /* text-amber-400 */
}

/* 共享：单词本拓展 (V1) */
.wordbook-controls-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    gap: 0.75rem;
}

.wordbook-export-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    background-color: #f1f5f9;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    text-decoration: none;
}

.wordbook-export-btn:hover {
    background-color: #e2e8f0;
}

.wordbook-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
}

.familiarity-btn-group {
    display: flex;
    gap: 0.5rem;
}

.familiarity-btn {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
    cursor: pointer;
}

.familiarity-btn:hover {
    opacity: 1;
}

.familiarity-btn.active {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.familiarity-btn.status-new {
    color: #ca8a04;
    background-color: #fef9c3;
    border-color: #facc15;
}

.familiarity-btn.status-new.active {
    color: #422006;
    background-color: #facc15;
}

.familiarity-btn.status-learning {
    color: #ea580c;
    background-color: #ffedd5;
    border-color: #fb923c;
}

.familiarity-btn.status-learning.active {
    color: #431407;
    background-color: #fb923c;
}

.familiarity-btn.status-mastered {
    color: #166534;
    background-color: #dcfce7;
    border-color: #4ade80;
}

.familiarity-btn.status-mastered.active {
    color: #052e16;
    background-color: #4ade80;
}

#quiz-choice-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(248, 250, 252, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#quiz-choice-modal.hidden {
    display: none;
}

.quiz-type-btn {
    display: block;
    width: 80%;
    max-width: 300px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    cursor: pointer;
}

.quiz-type-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    border-color: #f59e0b;
}

.quiz-type-btn span {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 0.25rem;
}

#close-quiz-choice-btn {
    margin-top: 1rem;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
}

#close-quiz-choice-btn:hover {
    color: #1e293b;
}

.quiz-spelling-input {
    display: block;
    width: 80%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid #cbd5e1;
    border-radius: 0.5rem;
    background-color: #ffffff;
    transition: border-color 0.2s;
}

.quiz-spelling-input:focus {
    outline: none;
    border-color: #f59e0b;
}

.quiz-spelling-input.correct-answer {
    border-color: #22c55e;
    background-color: #f0fdf4;
}

.quiz-spelling-input.incorrect-answer {
    border-color: #ef4444;
    background-color: #fef2f2;
}

#quiz-submit-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    padding: 0.625rem 1.5rem;
    background-color: #f59e0b;
    color: white;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

#quiz-submit-btn:hover {
    background-color: #d97706;
}

/* 共享：单词本拓展 (暗黑模式) */
body.dark-mode .wordbook-controls-header {
    border-color: #334155;
}

body.dark-mode .wordbook-export-btn {
    color: #cbd5e1;
    background-color: #334155;
}

body.dark-mode .wordbook-export-btn:hover {
    background-color: #475569;
}

body.dark-mode .wordbook-item-footer {
    border-color: #334155;
}

body.dark-mode .familiarity-btn.status-new {
    color: #fde047;
    background-color: rgba(254, 249, 195, 0.1);
    border-color: #eab308;
}

body.dark-mode .familiarity-btn.status-new.active {
    color: #18181b;
    background-color: #fde047;
}

body.dark-mode .familiarity-btn.status-learning {
    color: #fb923c;
    background-color: rgba(255, 237, 213, 0.1);
    border-color: #f97316;
}

body.dark-mode .familiarity-btn.status-learning.active {
    color: #18181b;
    background-color: #fb923c;
}

body.dark-mode .familiarity-btn.status-mastered {
    color: #4ade80;
    background-color: rgba(220, 252, 231, 0.1);
    border-color: #22c55e;
}

body.dark-mode .familiarity-btn.status-mastered.active {
    color: #18181b;
    background-color: #4ade80;
}

body.dark-mode #quiz-choice-modal {
    background-color: rgba(30, 41, 59, 0.9);
}

body.dark-mode .quiz-type-btn {
    background-color: #1e293b;
    border-color: #475569;
}

body.dark-mode .quiz-type-btn:hover {
    border-color: #f59e0b;
}

body.dark-mode .quiz-type-btn span {
    color: #94a3b8;
}

body.dark-mode #close-quiz-choice-btn {
    color: #94a3b8;
}

body.dark-mode #close-quiz-choice-btn:hover {
    color: #f1f5f9;
}

body.dark-mode .quiz-spelling-input {
    border-color: #475569;
    background-color: #1e293b;
    color: #f1f5f9;
}

body.dark-mode .quiz-spelling-input:focus {
    border-color: #f59e0b;
}

/* 共享：Sticky Footer */
#selection-screen,
#reader-screen,
#pdf-selection-screen,
#pdf-reader-screen,
main.bg-slate-50 {
    flex-grow: 1;
}

/* 共享：收藏夹模态框 (暗黑模式) */
body.dark-mode #favorites-list-container .bg-indigo-100 {
    background-color: rgba(129, 140, 248, 0.2);
}

body.dark-mode #favorites-list-container .text-indigo-700 {
    color: #a5b4fc;
}

body.dark-mode #desktop-favorites-container button,
body.dark-mode #mobile-favorites-container button {
    color: #cbd5e1;
}

body.dark-mode #desktop-favorites-container button:hover {
    background-color: #334155;
}

body.dark-mode #mobile-favorites-container button:hover {
    background-color: #334155;
    color: #f1f5f9;
}

/* 共享：分类下拉菜单 */
.category-dropdown-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

body.dark-mode .category-dropdown-menu {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode .category-dropdown-menu .filter-link {
    color: #cbd5e1;
}

body.dark-mode .category-dropdown-menu .filter-link:hover {
    background-color: #334155;
}

/* 共享：捐赠弹窗 */
#donateModal.show {
    display: flex !important;
}

#donateModal .scale-95 {
    animation: popIn 0.2s ease-out forwards;
}

@keyframes popIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

body.dark-mode .main-footer #donateBtn {
    color: #94a3b8;
}

body.dark-mode .main-footer #donateBtn:hover {
    color: #fcd34d;
}

body.dark-mode #donateModal>div.bg-white {
    background-color: #1e293b;
    border: 1px solid #334155;
}

body.dark-mode #donateModal .text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode #donateModal .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode #donateModal img.border-slate-200 {
    border-color: #334155;
}

body.dark-mode #donateModal #closeModal.text-slate-500 {
    color: #94a3b8;
}

body.dark-mode #donateModal #closeModal.text-slate-500:hover {
    color: #f1f5f9;
}

/* 共享：PWA 安装提示 */
body.dark-mode #pwa-install-prompt {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode #pwa-install-prompt p[style*="#1e293b"] {
    color: #f1f5f9 !important;
}

body.dark-mode #pwa-install-prompt p[style*="#475569"] {
    color: #cbd5e1 !important;
}

body.dark-mode #pwa-install-prompt #pwa-prompt-close-btn {
    color: #64748b !important;
}

body.dark-mode #pwa-install-prompt #pwa-prompt-close-btn:hover {
    color: #94a3b8 !important;
}

/* 共享：历史记录里的PDF标签 */
body.dark-mode #history-list-container .bg-indigo-100 {
    background-color: rgba(129, 140, 248, 0.2);
}

body.dark-mode #history-list-container .text-indigo-700 {
    color: #a5b4fc;
}

/* ==================================================================
   修复补丁：暗黑模式细节优化 (登录框 按钮)
   ================================================================== */

/* 1. 修复：登录/注册弹窗的输入框背景 */
body.dark-mode #auth-modal input[type="text"],
body.dark-mode #auth-modal input[type="email"],
body.dark-mode #auth-modal input[type="password"] {
    background-color: #334155 !important;
    /* bg-slate-700: 深灰色背景 */
    border-color: #475569 !important;
    /* border-slate-600: 边框颜色 */
    color: #f1f5f9 !important;
    /* text-slate-100: 文字颜色 */
}

/* 修复：浏览器自动填充(Autofill)时产生的黄色/白色背景 */
body.dark-mode #auth-modal input:-webkit-autofill,
body.dark-mode #auth-modal input:-webkit-autofill:hover,
body.dark-mode #auth-modal input:-webkit-autofill:focus,
body.dark-mode #auth-modal input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #334155 inset !important;
    /* 强制内阴影覆盖背景 */
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* =================================== */
/* 移动端筛选弹窗 (Filter Modal)
/* =================================== */

/* 1. 弹窗内的搜索框强制 100% 宽度 */
#modal-search-box-container .relative.flex-grow {
    width: 100%;
}

#modal-search-box-container input[type="search"] {
    width: 100%;
    /* (可选) 强制浅色背景，因为弹窗背景是浅色 */
    background-color: #fff !important;
    border-color: #cbd5e1 !important;
}

/* 2. 弹窗内的排序按钮 */
#modal-sort-container #sort-dropdown-btn {
    width: 100%;
    justify-content: space-between;
    /* 让文字和箭头分开 */
    background-color: #f1f5f9;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

body.dark-mode #modal-sort-container #sort-dropdown-btn {
    background-color: #334155;
    color: #cbd5e1;
}

/* 3. 弹窗内的分类筛选器 */
#modal-categories-container #category-filters {
    /* 强制改为垂直flex布局 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 按钮拉伸 */
    gap: 0.75rem;
    /* 12px 间距 */
    border-left: none !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-left: 0 !important;
    padding-top: 1rem !important;
    width: 100% !important;
    flex-grow: 0 !important;
    /* 移除 flex-grow */
}

#modal-categories-container #category-filters p {
    text-align: center;
    font-size: 1rem;
    padding-bottom: 0.5rem;
}

#modal-categories-container #category-filters .control-btn {
    /* 强制按钮拉伸并增大 */
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-align: center;
    justify-content: center;
}

/* 下拉分类的菜单 */
#modal-categories-container .category-dropdown-menu {
    /* <-- 提高优先级 */
    position: relative;
    width: 100%;
    box-shadow: none;
    border: none;
    /* ▼▼▼ 修复：改为纯白背景 ▼▼▼ */
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    /* ▲▲▲ 修复结束 ▲▲▲ */
}

body.dark-mode #modal-categories-container .category-dropdown-menu {
    /* <-- 提高优先级 */
    background-color: #1e293b !important;
    /* bg-slate-800 */
    border-top-color: #334155;
    /* border-slate-700 */
}

/* 暗黑模式下的弹窗 */
body.dark-mode #modal-search-box-container input[type="search"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode #modal-categories-container #category-filters {
    border-top-color: #334155 !important;
}


/* =================================== */
/* "加载更多" 按钮 (Load More Button)
/* =================================== */

.load-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    /* 12px 24px */
    font-size: 1rem;
    /* 16px */
    font-weight: 600;
    /* semibold */
    color: #ffffff;
    background-color: #f59e0b;
    /* amber-600 */
    border: none;
    border-radius: 0.5rem;
    /* rounded-lg */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.load-more-button:hover {
    background-color: #d97706;
    /* amber-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.load-more-button:disabled {
    background-color: #fcd34d;
    /* amber-400 */
    color: #78350f;
    /* amber-900 */
    opacity: 0.8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* "加载更多" 按钮的 loading 动画 */
.load-more-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-left-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-right: 0.75rem;
    /* 12px */
}

/* 暗黑模式下，按钮 loading 动画的颜色 */
body.dark-mode .load-more-button:disabled {
    background-color: #b45309;
    /* amber-700 */
    color: #fef3c7;
    /* amber-100 */
}

body.dark-mode .load-more-spinner {
    border-color: rgba(255, 255, 255, 0.2);
    border-left-color: #ffffff;
}

/* "全部加载完毕" 的提示信息 */
.all-loaded-message {
    color: #64748b;
    /* text-slate-500 */
    font-weight: 500;
}

body.dark-mode .all-loaded-message {
    color: #94a3b8;
    /* text-slate-400 */
}

/* =================================== */
/* 骨架屏 (Skeleton Loader)
/* =================================== */
.skeleton-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    /* rounded-lg */
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-color: #e2e8f0;
    /* bg-slate-200 */
    position: relative;
    overflow: hidden;
}

.skeleton-text {
    width: 80%;
    height: 1.25rem;
    /* h-5 */
    margin: 1rem;
    /* p-4 (m-4 approx) */
    background-color: #e2e8f0;
    /* bg-slate-200 */
    border-radius: 0.25rem;
    /* rounded */
    position: relative;
    overflow: hidden;
}

/* 闪烁动画 */
.skeleton-image::after,
.skeleton-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, #ffffff 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* 暗黑模式下的骨架屏 */
body.dark-mode .skeleton-card {
    background-color: #1e293b;
    /* bg-slate-800 */
    box-shadow: none;
    border: 1px solid #334155;
    /* border-slate-700 */
}

body.dark-mode .skeleton-image,
body.dark-mode .skeleton-text {
    background-color: #334155;
    /* bg-slate-700 */
}

body.dark-mode .skeleton-image::after,
body.dark-mode .skeleton-text::after {
    background: linear-gradient(to right, transparent 0%, #475569 50%, transparent 100%);
    /* bg-slate-600 */
}


/* =================================== */
/* 护眼模式 (Eye-Care Mode - Base)
/* =================================== */

body.eye-care-mode {
    background-color: #f7f3e8;
    color: #5c4d38;
}

body.eye-care-mode .main-nav {
    background-color: rgba(253, 250, 243, 0.8);
    border-color: #e5e0d3;
}

body.eye-care-mode .main-nav button:hover {
    background-color: #f3eee5;
}

body.eye-care-mode #srt-library-nav-link-desktop,
body.eye-care-mode #pdf-library-nav-link-desktop,
body.eye-care-mode #wordbook-nav-link-desktop,
body.eye-care-mode #dashboard-nav-link-desktop {
    color: #5c4d38;
}

body.eye-care-mode #srt-library-nav-link-desktop:hover,
body.eye-care-mode #pdf-library-nav-link-desktop:hover,
body.eye-care-mode #wordbook-nav-link-desktop:hover,
body.eye-care-mode #dashboard-nav-link-desktop:hover,
body.eye-care-mode #srt-library-nav-link-desktop.current-menu-item,
body.eye-care-mode #pdf-library-nav-link-desktop.current-menu-item,
body.eye-care-mode #wordbook-nav-link-desktop.current-menu-item,
body.eye-care-mode #dashboard-nav-link-desktop.current-menu-item,
body.eye-care-mode #srt-library-nav-link-desktop.current_page_item,
body.eye-care-mode #pdf-library-nav-link-desktop.current_page_item,
body.eye-care-mode #wordbook-nav-link-desktop.current_page_item,
body.eye-care-mode #dashboard-nav-link-desktop.current_page_item {
    background-color: #f3eee5;
    color: #1e293b;
}

body.eye-care-mode #theme-toggle-btn {
    color: #7a7364;
    background-color: transparent;
}

body.eye-care-mode #theme-toggle-btn:hover {
    background-color: #f3eee5;
}

body.eye-care-mode #mobile-theme-toggle-btn {
    color: #5c4d38;
}

body.eye-care-mode #mobile-theme-toggle-btn:hover {
    background-color: #f3eee5;
}

body.eye-care-mode h1,
body.eye-care-mode h2,
body.eye-care-mode h3,
body.eye-care-mode h4,
body.eye-care-mode .font-semibold,
body.eye-care-mode .font-bold {
    color: #4a463d;
}

body.eye-care-mode p,
body.eye-care-mode label,
body.eye-care-mode .text-slate-500,
body.eye-care-mode .text-slate-600,
body.eye-care-mode .text-slate-700 {
    color: #5c4d38;
}

body.eye-care-mode kbd {
    background-color: #e5e0d3;
    color: #4a463d;
    border: 1px solid #d9d1c0;
}

body.eye-care-mode .bg-slate-50,
body.eye-care-mode .bg-slate-100 {
    background-color: #f3eee5;
}

body.eye-care-mode .border-slate-100,
body.eye-care-mode .border-slate-200,
body.eye-care-mode .border-slate-300 {
    border-color: #e5e0d3;
}

body.eye-care-mode .bg-white {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode .book-preview-card {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #selection-screen header,
body.eye-care-mode #pdf-selection-screen header {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #selection-screen main>div.sticky,
body.eye-care-mode #pdf-selection-screen main>div.sticky {
    background-color: rgba(253, 250, 243, 0.8);
}

body.eye-care-mode input[type="search"] {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
    color: #4a463d;
}

body.eye-care-mode input[type="search"]::placeholder {
    color: #8f8573;
}

body.eye-care-mode #category-filters button:not(.active) {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #category-filters button:not(.active):hover {
    background-color: #e5e0d3;
}

body.eye-care-mode .category-dropdown-menu {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode .category-dropdown-menu .filter-link {
    color: #5c4d38;
}

body.eye-care-mode .category-dropdown-menu .filter-link:hover {
    background-color: #f3eee5;
}

body.eye-care-mode .control-btn.active {
    background-color: #f59e0b;
    color: white;
}

body.eye-care-mode #sort-dropdown-btn {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #sort-dropdown-btn:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #sort-dropdown-menu {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #sort-dropdown-menu a {
    color: #5c4d38;
}

body.eye-care-mode #sort-dropdown-menu a:hover {
    background-color: #f3eee5;
}

body.eye-care-mode .main-footer {
    background-color: rgba(253, 250, 243, 0.8);
    border-color: #e5e0d3;
}

body.eye-care-mode .main-footer p,
body.eye-care-mode .main-footer a {
    color: #7a7364;
}

body.eye-care-mode .main-footer a:hover {
    color: #b45309;
}

body.eye-care-mode .skeleton-card {
    background-color: #fdfaf3;
    border: 1px solid #e5e0d3;
}

body.eye-care-mode .skeleton-image,
body.eye-care-mode .skeleton-text {
    background-color: #f3eee5;
}

body.eye-care-mode .skeleton-image::after,
body.eye-care-mode .skeleton-text::after {
    background: linear-gradient(to right, transparent 0%, #fdfaf3 50%, transparent 100%);
}

/* --- 2. Modals (common.css) --- */
body.eye-care-mode #dictionary-popup,
body.eye-care-mode #auth-modal>div,
body.eye-care-mode #wordbook-modal>div,
body.eye-care-mode #achievements-modal>div,
body.eye-care-mode #history-modal>div,
body.eye-care-mode #favorites-modal>div,
body.eye-care-mode #donateModal>div.bg-white {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #auth-modal input[type="text"],
body.eye-care-mode #auth-modal input[type="email"],
body.eye-care-mode #auth-modal input[type="password"] {
    background-color: #f3eee5 !important;
    border-color: #e5e0d3 !important;
    color: #4a463d !important;
}

body.eye-care-mode #auth-modal input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f3eee5 inset !important;
    -webkit-text-fill-color: #4a463d !important;
    caret-color: #4a463d !important;
}

body.eye-care-mode #desktop-auth-buttons a,
body.eye-care-mode #mobile-auth-buttons a {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #desktop-auth-buttons a:hover,
body.eye-care-mode #mobile-auth-buttons a:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #desktop-auth-buttons button.bg-slate-100 {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #desktop-auth-buttons button.bg-slate-100:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #mobile-auth-buttons button {
    color: #5c4d38;
}

body.eye-care-mode #mobile-auth-buttons button:hover {
    background-color: #f3eee5;
}

body.eye-care-mode #dictionary-popup .bg-amber-50 {
    background-color: #fef9c3;
    border: 1px solid #fde68a;
}

body.eye-care-mode #dictionary-popup .bg-amber-50 .text-amber-700 {
    color: #b45309;
}

body.eye-care-mode #dictionary-popup .bg-amber-50 .text-slate-800 {
    color: #4a463d;
}

body.eye-care-mode .wordbook-controls-header {
    border-color: #e5e0d3;
}

body.eye-care-mode .wordbook-export-btn {
    color: #5c4d38;
    background-color: #f3eee5;
}

body.eye-care-mode .wordbook-export-btn:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #wordbook-modal .quiz-options button {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
    color: #5c4d38;
}

body.eye-care-mode #wordbook-modal .quiz-options button:hover {
    background-color: #fef9c3;
    border-color: #f59e0b;
}

body.eye-care-mode #wordbook-modal button#back-to-wordbook-btn {
    background-color: #f3eee5;
}

body.eye-care-mode #wordbook-modal button#back-to-wordbook-btn:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode .familiarity-btn.status-new {
    color: #ca8a04;
    background-color: #fef9c3;
    border-color: #facc15;
}

body.eye-care-mode .familiarity-btn.status-learning {
    color: #ea580c;
    background-color: #ffedd5;
    border-color: #fb923c;
}

body.eye-care-mode .familiarity-btn.status-mastered {
    color: #166534;
    background-color: #dcfce7;
    border-color: #4ade80;
}

body.eye-care-mode #quiz-choice-modal {
    background-color: rgba(253, 250, 243, 0.9);
}

body.eye-care-mode .quiz-type-btn {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode .quiz-type-btn:hover {
    border-color: #f59e0b;
}

body.eye-care-mode .quiz-type-btn span {
    color: #7a7364;
}

body.eye-care-mode #close-quiz-choice-btn {
    color: #7a7364;
}

body.eye-care-mode #close-quiz-choice-btn:hover {
    color: #4a463d;
}

body.eye-care-mode .quiz-spelling-input {
    border-color: #e5e0d3;
    background-color: #fdfaf3;
    color: #4a463d;
}

body.eye-care-mode .quiz-spelling-input:focus {
    border-color: #f59e0b;
}

body.eye-care-mode #achievements-tabs .tab-btn {
    color: #7a7364;
}

body.eye-care-mode #achievements-tabs .tab-btn.active {
    border-color: #f59e0b;
    color: #b45309;
}

body.eye-care-mode #achievements-content-container .bg-slate-50,
body.eye-care-mode #history-list-container .bg-slate-50,
body.eye-care-mode #favorites-list-container .bg-slate-50 {
    background-color: #f3eee5;
}

body.eye-care-mode #achievements-content-container .bg-slate-50:hover,
body.eye-care-mode #history-list-container .bg-slate-50:hover,
body.eye-care-mode #favorites-list-container .bg-slate-50:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #achievements-content-container .bg-slate-100 {
    background-color: #f3eee5;
}

body.eye-care-mode .bg-yellow-50 {
    background-color: #fef9c3;
}

body.eye-care-mode .bg-amber-50 {
    background-color: #fef3c7;
}

body.eye-care-mode .bg-sky-50 {
    background-color: #f0f9ff;
}

body.eye-care-mode .bg-emerald-50 {
    background-color: #f0fdf4;
}

body.eye-care-mode .bg-purple-50 {
    background-color: #faf5ff;
}

body.eye-care-mode .bg-red-50 {
    background-color: #fef2f2;
}

body.eye-care-mode .bg-blue-50 {
    background-color: #eff6ff;
}

body.eye-care-mode #achievements-content-container .text-amber-600 {
    color: #b45309;
}

body.eye-care-mode #achievements-content-container .text-sky-600 {
    color: #0284c7;
}

body.eye-care-mode #achievements-content-container .text-emerald-600 {
    color: #059669;
}

body.eye-care-mode #achievements-content-container .text-purple-600 {
    color: #9333ea;
}

body.eye-care-mode #achievements-content-container .text-red-600 {
    color: #dc2626;
}

body.eye-care-mode #achievements-content-container .text-blue-600 {
    color: #2563eb;
}

body.eye-care-mode .bg-indigo-100 {
    background-color: #e0e7ff;
}

body.eye-care-mode .text-indigo-700 {
    color: #4338ca;
}

/* =================================== */
/* 1. 聚合式用户菜单 (Avatar Menu)
/* =================================== */

/* 桌面端头像按钮 */
.user-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-avatar-btn:hover,
.user-avatar-btn[aria-expanded="true"] {
    border-color: #f59e0b;
    /* amber-500 */
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* 桌面端下拉菜单 */
.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    /* 距离按钮 12px */
    right: 0;
    width: 240px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /* border-slate-200 */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    /* p-2 */
    z-index: 100;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.2s ease-out;
    visibility: hidden;
}

.user-dropdown-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

/* 下拉菜单中的链接 */
.user-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* gap-3 */
    width: 100%;
    padding: 0.625rem 0.75rem;
    /* py-2.5 px-3 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* medium */
    color: #475569;
    /* text-slate-600 */
    border-radius: 0.5rem;
    /* rounded-lg */
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
}

.user-dropdown-link:hover {
    background-color: #f1f5f9;
    /* bg-slate-100 */
    color: #1e293b;
    /* text-slate-800 */
}

/* 退出登录链接 (红色) */
.user-dropdown-link.logout {
    color: #dc2626;
    /* text-red-600 */
}

.user-dropdown-link.logout:hover {
    background-color: #fef2f2;
    /* bg-red-50 */
    color: #b91c1c;
    /* text-red-800 */
}

/* 菜单中的分割线 */
.user-dropdown-divider {
    height: 1px;
    background-color: #e2e8f0;
    /* bg-slate-200 */
    margin: 0.5rem;
    /* my-2 */
}

/* --- 暗黑模式 (Dark Mode) --- */
body.dark-mode .user-avatar-btn:hover,
body.dark-mode .user-avatar-btn[aria-expanded="true"] {
    border-color: #fcd34d;
    /* amber-400 */
}

body.dark-mode .user-dropdown-menu {
    background-color: #1e293b;
    /* bg-slate-800 */
    border-color: #334155;
    /* border-slate-700 */
}

body.dark-mode .user-dropdown-link {
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode .user-dropdown-link:hover {
    background-color: #334155;
    /* bg-slate-700 */
    color: #f1f5f9;
    /* text-slate-100 */
}

body.dark-mode .user-dropdown-link.logout {
    color: #f87171;
    /* text-red-400 */
}

body.dark-mode .user-dropdown-link.logout:hover {
    background-color: rgba(239, 68, 68, 0.1);
    /* bg-red-400/10 */
    color: #fca5a5;
    /* text-red-300 */
}

body.dark-mode .user-dropdown-divider {
    background-color: #334155;
    /* bg-slate-700 */
}

/* --- 护眼模式 (Eye-Care Mode) --- */
body.eye-care-mode .user-avatar-btn:hover,
body.eye-care-mode .user-avatar-btn[aria-expanded="true"] {
    border-color: #f59e0b;
    /* amber-500 */
}

body.eye-care-mode .user-dropdown-menu {
    background-color: #fdfaf3;
    /* bg-sepia-white */
    border-color: #e5e0d3;
    /* border-sepia-light */
}

body.eye-care-mode .user-dropdown-link {
    color: #5c4d38;
    /* text-sepia-dark */
}

body.eye-care-mode .user-dropdown-link:hover {
    background-color: #f3eee5;
    /* bg-sepia-bg-alt */
    color: #4a463d;
    /* text-sepia-black */
}

body.eye-care-mode .user-dropdown-link.logout {
    color: #dc2626;
    /* text-red-600 */
}

body.eye-care-mode .user-dropdown-link.logout:hover {
    background-color: #fef2f2;
    /* bg-red-50 */
    color: #b91c1c;
    /* text-red-800 */
}

body.eye-care-mode .user-dropdown-divider {
    background-color: #e5e0d3;
    /* border-sepia-light */
}


/* =================================== */
/* ▼▼▼ 2a. 移动端导航抽屉 (Mobile Nav Drawer) - 新增 ▼▼▼
/* =================================== */

/* (遮罩层 - 样式已从 #modal-overlay 移到这里) */
#drawer-overlay {
    transition: opacity 0.3s ease-in-out;
}

#drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

#drawer-overlay.hidden {
    pointer-events: none;
}

/* 抽屉菜单容器 */
#mobile-drawer-menu {
    /* (Tailwind 已经在 header.php 中设置了基础样式) */
    /* (Tailwind: fixed top-0 right-0 h-full ... z-50 transform translate-x-full transition-transform ...) */
}

#mobile-drawer-menu.is-open {
    transform: translateX(0);
}

/* 抽屉内的页脚链接 (固定到底部) */
#mobile-drawer-menu .drawer-footer-links {
    margin-top: auto;
}

/* --- 暗黑模式 --- */
body.dark-mode #drawer-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    /* 暗黑遮罩更暗 */
}

/* (抽屉菜单的 dark:bg-slate-900 已在 header.php 中通过 Tailwind 定义) */
body.dark-mode #mobile-drawer-menu .border-b,
body.dark-mode #mobile-drawer-menu .border-t {
    border-color: #334155;
    /* border-slate-700 */
}

/* --- 护眼模式 --- */
body.eye-care-mode #drawer-overlay {
    background-color: rgba(60, 48, 32, 0.6);
    /* 遮罩使用棕褐色 */
}

body.eye-care-mode #mobile-drawer-menu {
    background-color: #fdfaf3;
    /* bg-sepia-white */
}

body.eye-care-mode #mobile-drawer-menu .border-b,
body.eye-care-mode #mobile-drawer-menu .border-t {
    border-color: #e5e0d3;
    /* border-sepia-light */
}

body.eye-care-mode #mobile-drawer-menu h3 {
    color: #4a463d;
}

body.eye-care-mode #mobile-drawer-menu a {
    color: #5c4d38;
}

body.eye-care-mode #mobile-drawer-menu a:hover {
    background-color: #f3eee5;
    color: #4a463d;
}

body.eye-care-mode #mobile-drawer-menu button {
    color: #5c4d38;
}

body.eye-care-mode #mobile-drawer-menu button:hover {
    background-color: #f3eee5;
    color: #4a463d;
}

/* ▲▲▲ 新增区域结束 ▲▲▲ */


/* =================================== */
/* 2. 侧滑抽屉 (Side Drawer)
/* =================================== */

/* 遮罩层 (旧的 #modal-overlay 样式已合并到 #drawer-overlay) */
#modal-overlay {
    /* (样式已转移到 #drawer-overlay) */
}

/* 抽屉容器 */
#wordbook-modal {
    max-width: 480px;
    /* 抽屉最大宽度 */
}

#wordbook-modal.is-open {
    transform: translateX(0);
}

/* 锁定背景滚动 (现在由两个抽屉共享) */
body.drawer-open {
    overflow: hidden;
}

/* --- 暗黑模式 (Dark Mode) --- */
body.dark-mode #modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    /* 暗黑遮罩更暗 */
}

body.dark-mode #wordbook-modal {
    background-color: #1e293b;
    /* bg-slate-800 */
    border-left: 1px solid #334155;
    /* border-slate-700 */
}

body.dark-mode #wordbook-modal .border-b {
    border-color: #334155;
    /* border-slate-700 */
}

/* --- 护眼模式 (Eye-Care Mode) --- */
body.eye-care-mode #modal-overlay {
    background-color: rgba(60, 48, 32, 0.6);
    /* 遮罩使用棕褐色 */
}

body.eye-care-mode #wordbook-modal {
    background-color: #fdfaf3;
    /* bg-sepia-white */
    border-left: 1px solid #e5e0d3;
    /* border-sepia-light */
}

body.eye-care-mode #wordbook-modal .border-b {
    border-color: #e5e0d3;
    /* border-sepia-light */
}


/* =================================== */
/* 3. 侧边栏筛选器 (Desktop Sidebar)
/* =================================== */

/* * 我们在 PHP 中添加了 .desktop-sidebar-sticky class
  * 它在 lg (1024px) 断点及以上生效 (因为父元素是 hidden lg:block)
*/
.desktop-sidebar-sticky {
    position: sticky;
    top: 88px;
    /* 72px 导航栏 + 16px 顶部间距 */
    height: calc(100vh - 100px);
    /* 视口高度减去顶部空间 */
    overflow-y: auto;
    padding-right: 0.5rem;
    /* 为滚动条留出空间 */
}

/* 强制分类按钮垂直排列并拉伸 */
.desktop-sidebar-sticky #category-filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    /* 按钮间距 */
    border-left: none !important;
    padding-left: 0 !important;
}

/* 强制分类按钮的父级标题在顶部 */
.desktop-sidebar-sticky #category-filters p {
    align-self: flex-start;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 强制下拉菜单按钮也拉伸 */
.desktop-sidebar-sticky .category-dropdown-btn {
    width: 100%;
    justify-content: space-between;
}

/* ▼▼▼ 修复：让下拉菜单作为弹窗浮动，而不是内部展开 ▼▼▼ */
.desktop-sidebar-sticky .category-dropdown-menu {
    position: absolute;
    /* 关键：改回 absolute */
    top: 100%;
    /* 从按钮下方弹出 */
    left: 0;
    width: 100%;
    /* 宽度与父元素(按钮)一致 */
    z-index: 10;

    /* 复制 #sort-dropdown-menu 的样式 */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    /* border-slate-200 */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    /* p-2 */
    margin-top: 0.5rem;
    /* 8px 间距 */

    /* 移除旧的 inline 样式 */
    border-top: none;
    padding-left: 0.5rem;
}

/* --- 侧边栏暗黑模式 (Dark Mode) --- */
body.dark-mode .desktop-sidebar-sticky .category-dropdown-menu {
    /* 复制 dark-mode #sort-dropdown-menu 的样式 */
    background-color: #1e293b;
    /* bg-slate-800 */
    border-color: #334155;
    /* border-slate-700 */
    border-top: none;
    /* 移除旧的 border-top */
}

/* --- 侧边栏护眼模式 (Eye-Care Mode) --- */
body.eye-care-mode .desktop-sidebar-sticky .category-dropdown-menu {
    /* 复制 eye-care-mode .user-dropdown-menu 的样式 */
    background-color: #fdfaf3;
    /* bg-sepia-white */
    border-color: #e5e0d3;
    /* border-sepia-light */
    border-top: none;
    /* 移除旧的 border-top */
}


body.eye-care-mode #modal-categories-container .category-dropdown-menu {
    background-color: #fdfaf3 !important;
    /* bg-sepia-white */
    border-top-color: #e5e0d3;
    /* border-sepia-light */
}


/* =================================== */
/* 共享: 设置面板 (Refactored)
/* =================================== */

/* (基础样式由 HTML 中的 Tailwind 类处理) */

/* Dark Mode */
body.dark-mode .reader-settings-panel {
    background-color: #1e293b;
    /* bg-slate-800 */
    border-color: #334155;
    /* border-slate-700 */
}

body.dark-mode .reader-settings-panel .text-slate-500,
body.dark-mode .reader-settings-panel .text-slate-700 {
    color: #cbd5e1;
    /* text-slate-300 */
}

body.dark-mode .reader-settings-panel select {
    background-color: #334155;
    /* bg-slate-700 */
    border-color: #475569;
    /* border-slate-600 */
    color: #cbd5e1;
    /* text-slate-300 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    /* ▼▼▼ 新增修复 ▼▼▼ */
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* ▲▲▲ 修复结束 ▲▲▲ */
}

/* Eye-Care Mode */
body.eye-care-mode .reader-settings-panel {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode .reader-settings-panel select {
    background-color: #f3eee5;
    border-color: #e5e0d3;
    color: #5c4d38;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%237a7364' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    /* ▼▼▼ 新增修复 ▼▼▼ */
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* ▲▲▲ 修复结束 ▲▲▲ */
}

/* ================================================================ */
/* ▼▼▼ (方案二) 所有剩余的暗黑模式规则被合并到这里 ▼▼▼ */
/* ================================================================ */

/*
 * ===================================
 * 2. DARK MODE (Consolidated)
 * ===================================
 */

/* --- 来自 reader-app.css --- */
body.dark-mode #subtitle-container,
body.dark-mode .player-controls {
    background-color: #334155;
}

body.dark-mode .subtitle-item.active {
    background-color: #b45309;
    color: #f1f5f9;
}

body.dark-mode .clickable-word {
    border-color: #64748b;
}

body.dark-mode .subtitle-item .en-line {
    color: #f1f5f9;
}

body.dark-mode .subtitle-item .zh-line {
    color: #94a3b8;
}

body.dark-mode #subtitle-en {
    color: #fcd34d;
}

body.dark-mode #subtitle-list-wrapper {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #subtitle-list-wrapper .p-4.border-b {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #subtitle-list-wrapper h3 {
    color: #f1f5f9;
}

body.dark-mode #related-books-container .bg-slate-100 {
    background-color: #1e293b;
}

body.dark-mode #related-books-container .text-slate-700 {
    color: #cbd5e1;
}

body.dark-mode .subtitle-item:hover {
    background-color: #334155;
    /* 替换 hover:bg-slate-200 */
}

body.dark-mode #reader-screen .player-controls {
    background-color: #334155;
}

body.dark-mode #reader-screen #back-button {
    background-color: #334155;
    color: #cbd5e1;
}

body.dark-mode #reader-screen #back-button:hover {
    background-color: #475569;
}

body.dark-mode #reader-screen #reader-settings-btn:hover,
body.dark-mode #reader-screen #keyboard-shortcut-btn:hover {
    background-color: #334155;
}

body.dark-mode #favorite-book-btn {
    color: #94a3b8;
}

body.dark-mode #favorite-book-btn:hover {
    color: #fcd34d;
}

body.dark-mode #favorite-book-btn.active {
    color: #fcd34d;
}

body.dark-mode #favorite-book-btn.active svg {
    fill: #fcd34d;
}

body.dark-mode #favorite-book-btn:not(.active) svg:hover {
    fill: rgba(252, 211, 77, 0.2);
}

body.dark-mode #subtitle-list-wrapper .bg-slate-100 {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #subtitle-list-wrapper h3 {
    color: #f1f5f9;
}

body.dark-mode .clickable-word {
    border-color: #64748b;
}

body.dark-mode button.clickable-word:focus-visible {
    outline-color: #FCD34D;
}

/* --- 来自 pdf-app.css --- */
body.dark-mode .pdf-control-btn {
    color: #94a3b8;
}

body.dark-mode .pdf-control-btn:hover {
    background-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .pdf-control-btn.active {
    background-color: #78350f;
    color: #fcd34d;
}

body.dark-mode #pdf-book-selection-container .book-preview-card .bg-slate-100 {
    background-color: #334155;
}

body.dark-mode #pdf-back-button {
    background-color: #334155;
    color: #cbd5e1;
}

body.dark-mode #pdf-back-button:hover {
    background-color: #475569;
}

body.dark-mode #pdf-viewer-container {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode #pdf-controls .bg-slate-200 {
    background-color: #475569;
    color: #cbd5e1;
}

body.dark-mode #pdf-controls .bg-slate-200:hover {
    background-color: #525f75;
}

body.dark-mode #pdf-controls .bg-slate-200:disabled {
    background-color: #334155;
    opacity: 0.5;
}

body.dark-mode #pdf-controls .text-slate-600 {
    color: #94a3b8;
}

body.dark-mode #pdf-controls .text-slate-900 {
    color: #f1f5f9;
}

body.dark-mode #pdf-page-jump-input {
    background-color: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-mode #pdf-controls label {
    color: #94a3b8;
}

body.dark-mode .pdf-page-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .pdf-text-layer>span:hover {
    background-color: rgba(252, 211, 77, 0.3);
}

body.dark-mode .pdf-text-layer>span.autoplay-highlight {
    background-color: rgba(252, 211, 77, 0.3);
}

/* --- 来自 dashboard.css --- */
body.dark-mode #dashboard-page {
    background-color: #0f172a;
}

body.dark-mode #dashboard-page .bg-white {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #dashboard-page .text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode #dashboard-page .text-slate-700 {
    color: #e2e8f0;
}

body.dark-mode #dashboard-page .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode #dashboard-page .text-slate-500 {
    color: #94a3b8;
}

body.dark-mode #dashboard-page .bg-slate-50,
body.dark-mode #dashboard-page .bg-slate-100 {
    background-color: #334155;
}

body.dark-mode #dashboard-page .border-slate-100,
body.dark-mode #dashboard-page .border-slate-200,
body.dark-mode #dashboard-page .border-slate-300 {
    border-color: #334155;
}

body.dark-mode #dashboard-page .dashboard-tab-btn {
    color: #94a3b8;
}

body.dark-mode #dashboard-page .dashboard-tab-btn:hover {
    background-color: #334155;
}

body.dark-mode #dashboard-page .dashboard-tab-btn.active {
    color: #FBBF24;
    border-bottom-color: #FBBF24;
    background-color: rgba(245, 158, 11, 0.1);
}

body.dark-mode #dashboard-page .stat-card {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #dashboard-daily-stats-container .stat-card {
    background-color: #334155;
}

/* 修复背景 */
body.dark-mode #dashboard-daily-stats-container .stat-card p:first-child {
    color: #94a3b8;
}

/* 修复标题色 */
body.dark-mode #dashboard-daily-stats-container .stat-card p:last-child {
    color: #f1f5f9;
}

/* 修复数字色 */
body.dark-mode #continue-reading-list .bg-white {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #continue-reading-list .text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode #continue-reading-list .text-slate-400 {
    color: #94a3b8;
}

body.dark-mode #continue-reading-empty {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #wordbook-preview-section {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #wordbook-list-items .border-slate-100 {
    border-color: #334155;
}

body.dark-mode #wordbook-list-items .text-amber-600 {
    color: #fcd34d;
}

body.dark-mode #wordbook-list-items .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode #dashboard-quiz-btn {
    background-color: #3730a3;
    color: #e0e7ff;
    border: 1px solid #4338ca;
}

body.dark-mode #dashboard-quiz-btn:hover {
    background-color: #4338ca;
    color: #ffffff;
}

body.dark-mode #dashboard-tab-content .bg-slate-50 {
    background-color: #334155;
}

body.dark-mode #dashboard-tab-content .bg-slate-50:hover {
    background-color: #475569;
}

body.dark-mode #dashboard-tab-content h4.text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode #dashboard-tab-content .text-slate-500 {
    color: #cbd5e1;
}

body.dark-mode #dashboard-tab-content .bg-indigo-100 {
    background-color: rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
}

body.dark-mode #dashboard-tab-content .text-indigo-700 {
    color: #a5b4fc;
}

body.dark-mode #dashboard-tab-content .bg-slate-100 {
    background-color: #334155;
}

/* 徽章背景 */
body.dark-mode #dashboard-tab-content .bg-slate-100 .text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode #dashboard-tab-content .bg-slate-100 .text-slate-500 {
    color: #cbd5e1;
}

body.dark-mode #dashboard-tab-content .bg-yellow-50 {
    background-color: rgba(234, 179, 8, 0.1);
}

/* 排行榜前三 */
body.dark-mode #carousel-btn-left,
body.dark-mode #carousel-btn-right {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

body.dark-mode #carousel-btn-left:hover,
body.dark-mode #carousel-btn-right:hover {
    background-color: #1e293b;
    color: #fcd34d;
}

body.dark-mode .wish-card {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode .wish-card .text-slate-800 {
    color: #f1f5f9;
}

body.dark-mode .wish-card .text-slate-500 {
    color: #94a3b8;
}

body.dark-mode .wish-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

body.dark-mode .wish-card.redeemed {
    background-color: #0f172a;
}

body.dark-mode .wish-card .delete-wish-btn {
    color: #64748b;
}

body.dark-mode .wish-card .delete-wish-btn:hover {
    color: #f87171;
}

body.dark-mode #add-wish-modal>div,
body.dark-mode #confirm-modal>div {
    background-color: #1e293b;
    /* slate-800 */
    border: 1px solid #334155;
    /* slate-700 */
}

body.dark-mode #add-wish-modal h3,
body.dark-mode #confirm-modal h3 {
    color: #f1f5f9;
}

body.dark-mode #add-wish-modal label,
body.dark-mode #confirm-modal p {
    color: #cbd5e1;
}

body.dark-mode #add-wish-modal input[type="text"],
body.dark-mode #add-wish-modal input[type="number"] {
    background-color: #334155;
    /* slate-700 */
    border-color: #475569;
    /* slate-600 */
    color: #f1f5f9;
    /* 亮白色文字 */
}

body.dark-mode #add-wish-modal input::placeholder {
    color: #64748b;
}

body.dark-mode #add-wish-modal input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

body.dark-mode #cancel-wish-btn,
body.dark-mode #confirm-cancel-btn {
    background-color: #334155;
    color: #cbd5e1;
}

body.dark-mode #cancel-wish-btn:hover,
body.dark-mode #confirm-cancel-btn:hover {
    background-color: #475569;
    color: #f1f5f9;
}

/* --- 来自 static-page.css --- */
body.dark-mode .static-page-card .static-content-wrapper {
    border-color: #334155;
}

body.dark-mode .static-page-card .bg-slate-50 {
    background-color: #334155;
}

body.dark-mode .static-page-card .bg-slate-50 .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode .static-page-card .bg-slate-50 .text-slate-700 {
    color: #f1f5f9;
}

body.dark-mode .static-page-card .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #78350f;
}

body.dark-mode .static-page-card .bg-sky-50 {
    background-color: rgba(14, 165, 233, 0.1);
    border-color: #0369a1;
}

body.dark-mode .static-page-card .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: #047857;
}

body.dark-mode .static-page-card .text-amber-700 {
    color: #fcd34d;
}

body.dark-mode .static-page-card .text-sky-700 {
    color: #7dd3fc;
}

body.dark-mode .static-page-card .text-emerald-700 {
    color: #6ee7b7;
}

body.dark-mode .static-page-card kbd {
    box-shadow: none;
}

body.dark-mode .bg-gradient-to-r.from-amber-50.to-orange-50 {
    background-image: linear-gradient(to right, rgba(245, 158, 11, 0.1), rgba(249, 115, 22, 0.1));
}

body.dark-mode .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.1);
}

body.dark-mode .bg-pink-50 {
    background-color: rgba(236, 72, 153, 0.1);
}

body.dark-mode .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.1);
}

body.dark-mode .bg-gradient-to-r.from-green-50.to-teal-50 {
    background-image: linear-gradient(to right, rgba(34, 197, 94, 0.1), rgba(20, 184, 166, 0.1));
}

body.dark-mode .bg-gradient-to-r.from-sky-50.to-blue-50 {
    background-image: linear-gradient(to right, rgba(14, 165, 233, 0.1), rgba(59, 130, 246, 0.1));
}

body.dark-mode .border-indigo-500 {
    border-color: #6366f1;
}

body.dark-mode .border-pink-500 {
    border-color: #ec4899;
}

body.dark-mode .border-orange-500 {
    border-color: #f97316;
}

body.dark-mode .text-indigo-500 {
    color: #a5b4fc;
}

body.dark-mode .text-indigo-600 {
    color: #a5b4fc;
}

body.dark-mode .text-pink-500 {
    color: #f472b6;
}

body.dark-mode .text-pink-600 {
    color: #f472b6;
}

body.dark-mode .text-orange-500 {
    color: #fb923c;
}

body.dark-mode .text-orange-600 {
    color: #fb923c;
}

body.dark-mode .text-teal-600 {
    color: #2dd4bf;
}

body.dark-mode .text-blue-600 {
    color: #93c5fd;
}

body.dark-mode .static-content-wrapper .bg-white {
    background-color: #334155;
}

body.dark-mode .static-content-wrapper .bg-white .text-blue-600 {
    color: #93c5fd;
}

body.dark-mode .static-content-wrapper .bg-white .text-pink-600 {
    color: #f472b6;
}

body.dark-mode .static-content-wrapper .bg-white .text-slate-600 {
    color: #cbd5e1;
}

body.dark-mode .learning-loop-text {
    color: #cbd5e1;
}

body.dark-mode .learning-loop-description {
    color: #94a3b8;
}

body.dark-mode .learning-loop-icon {
    border-color: #334155;
}

body.dark-mode .bg-sky-100 {
    background-color: rgba(14, 165, 233, 0.2);
}

body.dark-mode .text-sky-600 {
    color: #7dd3fc;
}

body.dark-mode .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.2);
}

body.dark-mode .text-amber-600 {
    color: #fcd34d;
}

body.dark-mode .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.2);
}

body.dark-mode .text-emerald-600 {
    color: #6ee7b7;
}

body.dark-mode .bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.2);
}

body.dark-mode .text-purple-600 {
    color: #c084fc;
}

body.dark-mode .text-sky-400 {
    color: #38bdf8;
}

body.dark-mode .text-amber-400 {
    color: #fbbf24;
}

body.dark-mode .text-emerald-400 {
    color: #34d399;
}

body.dark-mode .text-purple-400 {
    color: #c084fc;
}

body.dark-mode .bg-gradient-to-r.from-sky-50.to-indigo-50 {
    background-image: linear-gradient(to right, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
}

body.dark-mode .text-indigo-700 {
    color: #a5b4fc;
}

body.dark-mode .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.2);
}

body.dark-mode .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2);
}

/* body.dark-mode .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2); } */
/* Duplicate */
body.dark-mode .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2);
}

body.dark-mode .bg-teal-100 {
    background-color: rgba(20, 184, 166, 0.2);
}

body.dark-mode .testimonial-card {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode .testimonial-quote {
    color: #cbd5e1;
    border-color: #f59e0b;
}

body.dark-mode .testimonial-name {
    color: #f1f5f9;
}

body.dark-mode .testimonial-handle {
    color: #94a3b8;
}

body.dark-mode .testimonial-avatar-initials.bg-pink-100 {
    background-color: rgba(236, 72, 153, 0.2);
    color: #f472b6;
}

body.dark-mode .testimonial-avatar-initials.bg-sky-100 {
    background-color: rgba(14, 165, 233, 0.2);
    color: #7dd3fc;
}

body.dark-mode .testimonial-avatar-initials.bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

body.dark-mode .feature-card {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode .feature-card-list {
    color: #cbd5e1;
}

/* ================================================================ */
/* ▼▼▼ (方案二) 所有剩余的护眼模式规则被合并到这里 ▼▼▼ */
/* ================================================================ */

/*
 * ===================================
 * 3. EYE-CARE MODE (Consolidated)
 * ===================================
 */

/* --- 来自 reader-app.css --- */
body.eye-care-mode #subtitle-container,
body.eye-care-mode .player-controls {
    background-color: #f3eee5;
}

body.eye-care-mode .subtitle-item.active {
    background-color: #fde68a;
    color: #4a463d;
}

body.eye-care-mode .subtitle-item:hover {
    background-color: #f3eee5;
}

body.eye-care-mode .clickable-word {
    border-color: #b0a89a;
}

body.eye-care-mode button.clickable-word:focus-visible {
    outline-color: #f59e0b;
}

body.eye-care-mode .subtitle-item .en-line {
    color: #4a463d;
}

body.eye-care-mode .subtitle-item .zh-line {
    color: #7a7364;
}

body.eye-care-mode #subtitle-en {
    color: #b45309;
}

body.eye-care-mode #subtitle-list-wrapper {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #subtitle-list-wrapper .p-4.border-b,
body.eye-care-mode #subtitle-list-wrapper .bg-slate-100 {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #related-books-container .bg-slate-100 {
    background-color: #f3eee5;
}

body.eye-care-mode #reader-screen #back-button {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #reader-screen #back-button:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #reader-screen #reader-settings-btn:hover,
body.eye-care-mode #reader-screen #keyboard-shortcut-btn:hover {
    background-color: #f3eee5;
}

body.eye-care-mode #keyboard-shortcut-popover {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #favorite-book-btn {
    color: #7a7364;
}

body.eye-care-mode #favorite-book-btn:hover {
    color: #b45309;
}

body.eye-care-mode #favorite-book-btn.active {
    color: #f59e0b;
}

body.eye-care-mode #favorite-book-btn.active svg {
    fill: #f59e0b;
}

body.eye-care-mode #favorite-book-btn:not(.active) svg:hover {
    fill: #fef9c3;
}

body.eye-care-mode .tts-button {
    color: #7a7364;
}

body.eye-care-mode .tts-button:hover {
    color: #b45309;
}

/* --- 来自 pdf-app.css --- */
body.eye-care-mode .pdf-control-btn {
    color: #5c4d38;
}

body.eye-care-mode .pdf-control-btn:hover {
    background-color: #f3eee5;
    color: #4a463d;
}

body.eye-care-mode .pdf-control-btn.active {
    background-color: #fef3c7;
    color: #b45309;
}

body.eye-care-mode #pdf-book-selection-container .book-preview-card .bg-slate-100 {
    background-color: #f3eee5;
}

body.eye-care-mode #pdf-reader-screen>div {
    background-color: #fdfaf3;
}

body.eye-care-mode #pdf-back-button {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #pdf-back-button:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #pdf-viewer-container {
    background-color: #f7f3e8;
    border-color: #e5e0d3;
}

body.eye-care-mode #pdf-controls .bg-slate-200 {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #pdf-controls .bg-slate-200:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #pdf-controls .bg-slate-200:disabled {
    background-color: #f3eee5;
    opacity: 0.6;
}

body.eye-care-mode #pdf-page-jump-input {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
    color: #4a463d;
}

body.eye-care-mode .pdf-page-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.eye-care-mode .pdf-text-layer>span:hover {
    background-color: rgba(245, 158, 11, 0.2);
}

body.eye-care-mode .pdf-text-layer>span.autoplay-highlight {
    background-color: rgba(245, 158, 11, 0.2);
}

body.eye-care-mode #pdf-hint-popover {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

/* --- 来自 dashboard.css --- */
body.eye-care-mode #dashboard-page {
    background-color: #f7f3e8;
}

body.eye-care-mode #dashboard-page .bg-white {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode #dashboard-page .dashboard-tab-btn {
    color: #7a7364;
}

body.eye-care-mode #dashboard-page .dashboard-tab-btn:hover {
    background-color: #f3eee5;
}

body.eye-care-mode #dashboard-page .dashboard-tab-btn.active {
    color: #b45309;
    border-bottom-color: #f59e0b;
    background-color: #fef9c3;
}

body.eye-care-mode #dashboard-daily-stats-container .stat-card {
    background-color: #f3eee5;
}

body.eye-care-mode #dashboard-quiz-btn {
    background-color: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

body.eye-care-mode #dashboard-quiz-btn:hover {
    background-color: #e0e7ff;
    color: #3730a3;
}

body.eye-care-mode #dashboard-tab-content .bg-slate-50 {
    background-color: #f3eee5;
}

body.eye-care-mode #dashboard-tab-content .bg-slate-50:hover {
    background-color: #e5e0d3;
}

body.eye-care-mode #dashboard-tab-content .bg-slate-100 {
    background-color: #f3eee5;
}

body.eye-care-mode #carousel-btn-left,
body.eye-care-mode #carousel-btn-right {
    background-color: rgba(253, 250, 243, 0.8);
    border-color: rgba(0, 0, 0, 0.05);
    color: #7a7364;
}

body.eye-care-mode #carousel-btn-left:hover,
body.eye-care-mode #carousel-btn-right:hover {
    background-color: #fdfaf3;
    color: #b45309;
}

body.eye-care-mode .wish-card {
    background-color: #fdfaf3;
    border-color: #e5e0d3;
}

body.eye-care-mode .wish-card:hover {
    border-color: #f59e0b;
}

body.eye-care-mode .wish-card.redeemed {
    background-color: #f7f3e8;
    opacity: 0.8;
}

body.eye-care-mode .wish-card.redeemed::after {
    color: #d9d1c0;
    border-color: #d9d1c0;
}

body.eye-care-mode .wish-card .delete-wish-btn {
    color: #b0a89a;
}

body.eye-care-mode .wish-card .delete-wish-btn:hover {
    color: #dc2626;
}

body.eye-care-mode #add-wish-modal>div,
body.eye-care-mode #confirm-modal>div {
    background-color: #fdfaf3;
    border: 1px solid #e5e0d3;
}

body.eye-care-mode #add-wish-modal input[type="text"],
body.eye-care-mode #add-wish-modal input[type="number"] {
    background-color: #f3eee5;
    border-color: #e5e0d3;
    color: #4a463d;
}

body.eye-care-mode #add-wish-modal input::placeholder {
    color: #8f8573;
}

body.eye-care-mode #cancel-wish-btn,
body.eye-care-mode #confirm-cancel-btn {
    background-color: #f3eee5;
    color: #5c4d38;
}

body.eye-care-mode #cancel-wish-btn:hover,
body.eye-care-mode #confirm-cancel-btn:hover {
    background-color: #e5e0d3;
    color: #4a463d;
}

/* --- 来自 static-page.css --- */
body.eye-care-mode .static-page-card .static-content-wrapper {
    color: #5c4d38;
}

body.eye-care-mode .static-page-card .static-content-wrapper h1,
body.eye-care-mode .static-page-card .static-content-wrapper h2,
body.eye-care-mode .static-page-card .static-content-wrapper h3 {
    color: #4a463d;
    border-color: #e5e0d3;
}

body.eye-care-mode .static-page-card .static-content-wrapper p,
body.eye-care-mode .static-page-card .static-content-wrapper li {
    color: #5c4d38;
}

body.eye-care-mode .static-page-card .bg-slate-50 {
    background-color: #f3eee5;
}

body.eye-care-mode .static-page-card .bg-amber-50 {
    background-color: #fef9c3;
    border-color: #fde68a;
}

body.eye-care-mode .static-page-card .bg-sky-50 {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

body.eye-care-mode .static-page-card .bg-emerald-50 {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

body.eye-care-mode .static-page-card .text-amber-700 {
    color: #b45309;
}

body.eye-care-mode .static-page-card .text-sky-700 {
    color: #0369a1;
}

body.eye-care-mode .static-page-card .text-emerald-700 {
    color: #047857;
}

body.eye-care-mode .learning-loop-text {
    color: #5c4d38;
}

body.eye-care-mode .learning-loop-description {
    color: #7a7364;
}

body.eye-care-mode .learning-loop-icon {
    border-color: #f3eee5;
}

body.eye-care-mode .bg-sky-100 {
    background-color: #e0f2fe;
}

body.eye-care-mode .text-sky-600 {
    color: #0284c7;
}

body.eye-care-mode .bg-amber-100 {
    background-color: #fef3c7;
}

body.eye-care-mode .text-amber-600 {
    color: #b45309;
}

body.eye-care-mode .bg-emerald-100 {
    background-color: #d1fae5;
}

body.eye-care-mode .text-emerald-600 {
    color: #059669;
}

body.eye-care-mode .bg-purple-100 {
    background-color: #f3e8ff;
}

body.eye-care-mode .text-purple-600 {
    color: #9333ea;
}

body.eye-care-mode .text-sky-400 {
    color: #38bdf8;
}

body.eye-care-mode .text-amber-400 {
    color: #fbbf24;
}

body.eye-care-mode .text-emerald-400 {
    color: #34d399;
}

body.eye-care-mode .text-purple-400 {
    color: #c084fc;
}

body.eye-care-mode .bg-gradient-to-r.from-sky-50.to-indigo-50 {
    background-image: linear-gradient(to right, #f0f9ff, #eef2ff);
}

body.eye-care-mode .text-indigo-700 {
    color: #4338ca;
}

body.eye-care-mode .bg-blue-100 {
    background-color: #dbeafe;
}

body.eye-care-mode .bg-yellow-100 {
    background-color: #fef9c3;
}

body.eye-care-mode .bg-green-100 {
    background-color: #dcfce7;
}

body.eye-care-mode .bg-red-100 {
    background-color: #fee2e2;
}

body.eye-care-mode .bg-teal-100 {
    background-color: #ccfbf1;
}

body.eye-care-mode .bg-gradient-to-r.from-amber-50.to-orange-50 {
    background-image: linear-gradient(to right, #fef9c3, #fff7ed);
}

body.eye-care-mode .bg-indigo-50 {
    background-color: #eef2ff;
}

body.eye-care-mode .bg-pink-50 {
    background-color: #fdf2f8;
}

body.eye-care-mode .bg-orange-50 {
    background-color: #fff7ed;
}

body.eye-care-mode .bg-gradient-to-r.from-green-50.to-teal-50 {
    background-image: linear-gradient(to right, #f0fdf4, #f0fdfa);
}

body.eye-care-mode .bg-gradient-to-r.from-sky-50.to-blue-50 {
    background-image: linear-gradient(to right, #f0f9ff, #eff6ff);
}

body.eye-care-mode .text-indigo-500 {
    color: #6366f1;
}

body.eye-care-mode .text-indigo-600 {
    color: #4f46e5;
}

body.eye-care-mode .text-pink-500 {
    color: #ec4899;
}

body.eye-care-mode .text-pink-600 {
    color: #db2777;
}

body.eye-care-mode .text-orange-500 {
    color: #f97316;
}

body.eye-care-mode .text-orange-600 {
    color: #ea580c;
}

body.eye-care-mode .text-teal-600 {
    color: #0d9488;
}

body.eye-care-mode .text-blue-600 {
    color: #2563eb;
}

body.eye-care-mode .static-content-wrapper .bg-white {
    background-color: #f3eee5;
}

body.eye-care-mode .testimonial-card {
    background-color: #f3eee5;
    border-color: #e5e0d3;
}

body.eye-care-mode .testimonial-quote {
    color: #5c4d38;
    border-color: #f59e0b;
}

body.eye-care-mode .testimonial-name {
    color: #4a463d;
}

body.eye-care-mode .testimonial-handle {
    color: #7a7364;
}

body.eye-care-mode .testimonial-avatar-initials.bg-pink-100 {
    background-color: #fce7f3;
    color: #db2777;
}

body.eye-care-mode .testimonial-avatar-initials.bg-sky-100 {
    background-color: #e0f2fe;
    color: #0284c7;
}

body.eye-care-mode .testimonial-avatar-initials.bg-emerald-100 {
    background-color: #d1fae5;
    color: #059669;
}

body.eye-care-mode .feature-card {
    background-color: #f3eee5;
    border-color: #e5e0d3;
}

body.eye-care-mode .feature-card-list {
    color: #5c4d38;
}
}