/* Dark theme overrides
   - All rules under `html.dark-mode` should live here
*/

/* ==== Split from base.css at 2025-11-03T08:11:46.2425992+08:00 ==== */
html.dark-mode {
    /* 主色系统 - 月光青 */
    --primary-400: #70a090;
    --primary-500: #8bb8a8;
    --primary-600: #a6cfc0;

    /* 强调色系统 - 萤火绿 */
    --accent-400: #80b890;
    --accent-500: #9dcfaa;

    /* 中性色系统 - 墨色系 */
    --neutral-50: #0f1210;
    --neutral-100: #1a1e1c;
    --neutral-200: #2a302d;
    --neutral-300: #3c4440;
    --neutral-600: #a3aba7;
    --neutral-800: #e0e5e3;

    /* 背景色 */
    --bg-primary: #0f1210;
    --bg-secondary: #1a1e1c;
    --bg-tertiary: #2a302d;

    /* 文本色 */
    --text-primary: #e0e5e3;
    --text-secondary: #a3aba7;
    --text-muted: #5c6662;
}

html.dark-mode body {
    background: radial-gradient(circle at top left, rgba(112, 160, 144, 0.12), transparent 55%),
                radial-gradient(circle at bottom right, rgba(128, 184, 144, 0.10), transparent 50%),
                linear-gradient(135deg, #0f1210 0%, #1a1e1c 100%);
    color: var(--text-primary);
}

html.dark-mode .container {
    background: rgba(26, 30, 28, 0.90);
    border: 1px solid rgba(60, 68, 64, 0.6);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

html.dark-mode .header {
    background: linear-gradient(135deg, rgba(112, 160, 144, 0.85) 0%, rgba(128, 184, 144, 0.80) 100%);
    color: #fff;
}

html.dark-mode .progress-info {
    background: var(--bg-secondary);
    border: 1px solid var(--neutral-100);
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.3);
}

html.dark-mode .progress-info span {
    color: var(--text-secondary);
}

html.dark-mode .progress-info span span {
    color: var(--primary-400);
}

html.dark-mode .progress-percentage {
    color: var(--primary-400);
}

html.dark-mode .progress-bar-container {
    background: rgba(112, 160, 144, 0.15);
}

html.dark-mode .progress-bar-fill {
    background: linear-gradient(90deg, var(--primary-400) 0%, var(--primary-600) 100%);
    box-shadow: 0 1px 3px rgba(112, 160, 144, 0.5);
}

html.dark-mode .question-content {
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(224, 229, 227, 0.02) 2px,
            rgba(224, 229, 227, 0.02) 4px
        ),
        var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--neutral-100);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
}

html.dark-mode:not(.browse-mode) body .question-content::before {
    border-color: var(--primary-400);
    opacity: 0.3;
}

html.dark-mode:not(.browse-mode) body .question-content.revealed {
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(224, 229, 227, 0.02) 2px,
            rgba(224, 229, 227, 0.02) 4px
        ),
        linear-gradient(135deg, rgba(128, 184, 144, 0.18) 0%, rgba(128, 184, 144, 0.06) 100%);
    border-color: var(--accent-400);
    color: var(--text-primary);
}

html.dark-mode:not(.browse-mode) body .question-content.revealed::before {
    border-color: var(--accent-400);
    opacity: 0.4;
}

html.dark-mode .blank::after {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-400) 10%,
        var(--primary-500) 50%,
        var(--primary-400) 90%,
        transparent 100%);
    opacity: 0.9;
}

html.dark-mode .blank:focus::after {
    box-shadow: 0 0 0 3px rgba(112, 160, 144, 0.4);
}

/* Click-to-reveal blank states - Dark mode */
html.dark-mode .blank:not(.blank-cooling):not(.revealed) {
    cursor: pointer;
}

html.dark-mode .blank:not(.blank-cooling):not(.revealed):hover {
    background-color: rgba(112, 160, 144, 0.2);
}

html.dark-mode .blank.blank-cooling {
    cursor: not-allowed;
    opacity: 0.4;
}

html.dark-mode .blank.blank-cooling::after {
    animation: none;
    opacity: 0.3;
}

html.dark-mode mark {
    background: linear-gradient(135deg, var(--accent-400) 0%, rgba(128, 184, 144, 0.6) 100%);
    color: var(--bg-primary);
    border-color: var(--accent-500);
    box-shadow: 0 1px 3px rgba(128, 184, 144, 0.2);
}

html.dark-mode .controls {
    background: linear-gradient(to top, rgba(26, 30, 28, 0.7) 0%, rgba(26, 30, 28, 0.7) 70%, transparent 100%);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
}

html.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-600) 100%);
    box-shadow: 0 15px 30px rgba(112, 160, 144, 0.4);
}

html.dark-mode .btn-primary:hover {
    box-shadow: 0 18px 35px rgba(112, 160, 144, 0.5);
}

html.dark-mode .btn-secondary {
    background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 100%);
    color: #fff;
    box-shadow: 0 15px 28px rgba(128, 184, 144, 0.35);
}

html.dark-mode .btn-secondary:hover {
    box-shadow: 0 18px 32px rgba(128, 184, 144, 0.45);
}

html.dark-mode .btn-nav {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4);
}

html.dark-mode .btn-nav:hover:not(:disabled) {
    box-shadow: 0 18px 35px rgba(139, 92, 246, 0.5);
}

html.dark-mode .btn-nav:disabled {
    background: linear-gradient(135deg, #555 0%, #444 100%);
}

html.dark-mode .btn-nav.complete {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
}

html.dark-mode .btn-nav.complete:hover:not(:disabled) {
    box-shadow: 0 18px 35px rgba(16, 185, 129, 0.5);
}

html.dark-mode .mode-overlay {
    background: rgba(0, 0, 0, 0.6);
}

html.dark-mode .mode-card {
    background: var(--bg-secondary);
    border: 1px solid var(--neutral-100);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

html.dark-mode .mode-card h2 {
    color: var(--text-primary);
}

html.dark-mode .mode-card p {
    color: var(--text-secondary);
}

html.dark-mode .mode-btn-king {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    box-shadow: 0 15px 30px rgba(251, 191, 36, 0.5);
}

html.dark-mode .mode-btn-king:hover {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
    box-shadow: 0 18px 35px rgba(251, 191, 36, 0.6);
}

html.dark-mode .mode-btn-transcendent {
    background: linear-gradient(135deg, #f87171 0%, #fca5a5 100%);
    color: #450a0a;
    box-shadow: 0 15px 30px rgba(248, 113, 113, 0.5);
}

html.dark-mode .mode-btn-transcendent:hover {
    background: linear-gradient(135deg, #fca5a5 0%, #fecaca 100%);
    box-shadow: 0 18px 35px rgba(248, 113, 113, 0.6);
}

html.dark-mode .book-checkbox-item {
    background: var(--bg-tertiary);
    border-color: transparent;
}

html.dark-mode .book-checkbox-item:hover {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
}

html.dark-mode .book-checkbox-item.selected {
    background: rgba(248, 113, 113, 0.2);
    border-color: #f87171;
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.25);
}

html.dark-mode .book-checkbox-item .book-name {
    color: var(--text-primary);
}

html.dark-mode .book-checkbox-item .book-count {
    color: var(--text-secondary);
    background: rgba(248, 113, 113, 0.2);
}

html.dark-mode .selection-summary {
    color: var(--text-secondary);
}

html.dark-mode .selection-summary span {
    color: #f87171;
}

html.dark-mode .confirm-btn {
    background: linear-gradient(135deg, #f87171 0%, #fca5a5 100%);
}

html.dark-mode .confirm-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #fca5a5 0%, #fecaca 100%);
    box-shadow: 0 12px 28px rgba(248, 113, 113, 0.5);
}

html.dark-mode .confirm-btn:disabled {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

html.dark-mode .subject-card {
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(224, 229, 227, 0.015) 2px,
            rgba(224, 229, 227, 0.015) 4px
        ),
        linear-gradient(135deg, rgba(112, 160, 144, 0.12) 0%, rgba(112, 160, 144, 0.04) 100%);
    border: 2px solid rgba(112, 160, 144, 0.3);
}

/* 书角装饰 - 深色模式 */
html.dark-mode .subject-card::before {
    background: linear-gradient(135deg,
        transparent 50%,
        var(--primary-400) 50%,
        var(--primary-500) 100%);
    opacity: 0.5;
}

html.dark-mode .subject-card:hover {
    border-color: var(--primary-500);
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(224, 229, 227, 0.015) 2px,
            rgba(224, 229, 227, 0.015) 4px
        ),
        linear-gradient(135deg, rgba(112, 160, 144, 0.18) 0%, rgba(112, 160, 144, 0.08) 100%);
    box-shadow: 0 20px 40px rgba(112, 160, 144, 0.3);
}

html.dark-mode .subject-card:hover::before {
    opacity: 0.8;
}

html.dark-mode .subject-name {
    color: var(--primary-400);
}

html.dark-mode .subject-count {
    color: var(--text-secondary);
}

html.dark-mode .book-item {
    background: var(--bg-tertiary);
    border: 2px solid transparent;
}

/* 书脊色块 - 深色模式 */
html.dark-mode .book-item::before {
    opacity: 0.8;
}

html.dark-mode .book-item:nth-child(odd)::before {
    background: linear-gradient(180deg, var(--primary-400) 0%, var(--primary-500) 100%);
}

html.dark-mode .book-item:nth-child(even)::before {
    background: linear-gradient(180deg, var(--accent-400) 0%, var(--accent-500) 100%);
}

html.dark-mode .book-item:hover {
    background: rgba(112, 160, 144, 0.1);
    border-color: var(--primary-400);
}

html.dark-mode .book-item:hover::before {
    box-shadow: 2px 0 8px rgba(112, 160, 144, 0.4);
}

html.dark-mode .book-name {
    color: var(--text-primary);
}

html.dark-mode .book-count {
    color: var(--text-secondary);
    background: rgba(112, 160, 144, 0.15);
}

html.dark-mode .back-btn {
    color: var(--text-secondary);
}

html.dark-mode .back-btn:hover {
    background: rgba(112, 160, 144, 0.1);
    color: var(--primary-400);
}

html.dark-mode .browse-item {
    background: var(--bg-secondary);
    border: 1px solid rgba(112, 160, 144, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

html.dark-mode .browse-item:nth-child(even) {
    background: rgba(112, 160, 144, 0.06);
}

html.dark-mode .browse-index {
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    box-shadow: 0 2px 4px rgba(112, 160, 144, 0.35);
}

html.dark-mode .browse-item mark {
    background: linear-gradient(135deg, var(--accent-400), rgba(128, 184, 144, 0.6));
    color: var(--bg-primary);
    border-color: var(--accent-500);
}

html.dark-mode .instruction {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.12) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    box-shadow: 0 16px 40px rgba(251, 191, 36, 0.1);
}

html.dark-mode kbd {
    background: rgba(100, 116, 139, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}

html.dark-mode .king-mode-section {
    border-top: 1px solid rgba(96, 165, 250, 0.2);
}

html.dark-mode .king-divider {
    color: var(--text-secondary);
}

html.dark-mode .theme-toggle {
    color: #fbbf24; /* ���ɫͼ�� */
}

html.dark-mode .theme-toggle:hover {
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

html.dark-mode .theme-toggle:active {
    background: rgba(251, 191, 36, 0.25);
}

html.dark-mode .ai-memory-button {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 100%);
    border-color: var(--accent-500);
    box-shadow: 0 4px 12px rgba(128, 184, 144, 0.3);
}

html.dark-mode .ai-memory-button:hover {
    background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-600) 100%);
    border-color: var(--accent-600);
    box-shadow: 0 8px 20px rgba(128, 184, 144, 0.4);
}

html.dark-mode .ai-tip-container {
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(224, 229, 227, 0.015) 2px,
            rgba(224, 229, 227, 0.015) 4px
        ),
        linear-gradient(135deg, rgba(128, 184, 144, 0.12) 0%, rgba(128, 184, 144, 0.05) 100%);
}

html.dark-mode .ai-tip-container::before {
    background: linear-gradient(135deg,
        var(--accent-500) 0%,
        var(--accent-400) 50%,
        var(--accent-600) 100%);
}

html.dark-mode .ai-tip-container::after {
    border-color: var(--accent-400);
    opacity: 0.25;
}

html.dark-mode .ai-tip-text h1 {
    color: var(--primary-400);
    border-bottom-color: var(--primary-400);
}

html.dark-mode .ai-tip-text h2 {
    background: linear-gradient(90deg,
        rgba(128, 184, 144, 0.12) 0%,
        rgba(128, 184, 144, 0.04) 100%);
    border-left-color: var(--accent-500);
    color: var(--accent-400);
}

html.dark-mode .ai-tip-text h2:hover {
    background: linear-gradient(90deg,
        rgba(128, 184, 144, 0.18) 0%,
        rgba(128, 184, 144, 0.06) 100%);
}

html.dark-mode .ai-tip-text h3 {
    border-left-color: var(--accent-400);
    color: var(--accent-400);
}

html.dark-mode .ai-tip-text h4 {
    color: var(--text-secondary);
}

html.dark-mode .ai-tip-text strong {
    color: var(--primary-400);
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 60%,
        rgba(112, 160, 144, 0.25) 60%,
        rgba(112, 160, 144, 0.25) 100%);
}

html.dark-mode .ai-tip-text em {
    color: var(--accent-400);
    border-bottom-color: var(--accent-400);
}

html.dark-mode .ai-tip-text code {
    background: linear-gradient(135deg,
        rgba(128, 184, 144, 0.18) 0%,
        rgba(128, 184, 144, 0.12) 100%);
    color: var(--accent-400);
    border-color: var(--accent-400);
    box-shadow: 0 1px 4px rgba(128, 184, 144, 0.15);
}

html.dark-mode .ai-tip-text code:hover {
    background: linear-gradient(135deg,
        rgba(128, 184, 144, 0.25) 0%,
        rgba(128, 184, 144, 0.18) 100%);
    box-shadow: 0 2px 8px rgba(128, 184, 144, 0.25);
}

html.dark-mode .ai-tip-text pre {
    background: var(--bg-tertiary);
    border-color: var(--neutral-200);
}

html.dark-mode .ai-tip-text pre code {
    color: var(--text-primary);
}

html.dark-mode .ai-tip-text blockquote {
    border-left-color: var(--accent-500);
    background: linear-gradient(90deg,
        rgba(128, 184, 144, 0.12) 0%,
        rgba(128, 184, 144, 0.04) 100%);
    color: var(--text-secondary);
}

html.dark-mode .ai-tip-text blockquote::before {
    color: var(--accent-400);
}

html.dark-mode .ai-tip-text hr {
    border-top-color: var(--neutral-200);
}

html.dark-mode .ai-tip-text a {
    color: var(--primary-400);
}

html.dark-mode .ai-tip-text a:hover {
    color: var(--primary-500);
}

html.dark-mode .ai-loading-spinner {
    border-color: rgba(128, 184, 144, 0.2);
    border-top-color: var(--accent-400);
}

html.dark-mode .streaming-cursor {
    background-color: var(--accent-400);
}

html.dark-mode .site-footer {
    background: transparent;
    color: var(--text-secondary);
}

html.dark-mode .search-container {
    background: var(--bg-secondary);
    border-color: rgba(112, 160, 144, 0.2);
}

html.dark-mode .search-input {
    background: var(--bg-primary);
    border-color: rgba(112, 160, 144, 0.3);
    color: var(--text-primary);
}

html.dark-mode .search-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(112, 160, 144, 0.2);
}

html.dark-mode .search-input::placeholder {
    color: var(--neutral-500);
}

html.dark-mode .search-clear-btn {
    background: var(--neutral-600);
}

html.dark-mode .search-clear-btn:hover {
    background: var(--neutral-500);
}

html.dark-mode .search-stats {
    color: var(--neutral-400);
}

html.dark-mode .search-stats span {
    color: var(--primary-400);
}

html.dark-mode .no-results-message {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--neutral-300);
}

html.dark-mode .search-highlight {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.4), rgba(250, 204, 21, 0.2));
    color: #fef08a;
    box-shadow: 0 1px 2px rgba(250, 204, 21, 0.2);
}

/* 加载动画 - 深色模式 */
html.dark-mode .loading-overlay {
    background: rgba(15, 18, 16, 0.95);
}

html.dark-mode .ink-loading::before {
    border-top-color: var(--primary-400);
    border-right-color: var(--primary-400);
    filter: blur(1px) drop-shadow(0 0 8px var(--primary-400));
}

html.dark-mode .ink-loading::after {
    border-bottom-color: var(--accent-400);
    border-left-color: var(--accent-400);
    filter: blur(0.8px) drop-shadow(0 0 6px var(--accent-400));
}

html.dark-mode .loading-text {
    color: var(--text-secondary);
}

/* 完成界面 - 深色模式 */
html.dark-mode .completion-overlay {
    background: linear-gradient(135deg,
        rgba(15, 18, 16, 0.98) 0%,
        rgba(26, 30, 28, 0.98) 100%);
}

html.dark-mode .completion-overlay.active {
    animation: fireworksDark 3s ease-out;
}

@keyframes fireworksDark {
    0%, 100% {
        background: linear-gradient(135deg,
            rgba(15, 18, 16, 0.98) 0%,
            rgba(26, 30, 28, 0.98) 100%);
    }
    20% {
        background: radial-gradient(circle at 20% 30%,
            rgba(128, 184, 144, 0.2) 0%,
            transparent 50%),
        linear-gradient(135deg,
            rgba(15, 18, 16, 0.98) 0%,
            rgba(26, 30, 28, 0.98) 100%);
    }
    40% {
        background: radial-gradient(circle at 80% 40%,
            rgba(112, 160, 144, 0.2) 0%,
            transparent 50%),
        linear-gradient(135deg,
            rgba(15, 18, 16, 0.98) 0%,
            rgba(26, 30, 28, 0.98) 100%);
    }
    60% {
        background: radial-gradient(circle at 50% 70%,
            rgba(128, 184, 144, 0.2) 0%,
            transparent 50%),
        linear-gradient(135deg,
            rgba(15, 18, 16, 0.98) 0%,
            rgba(26, 30, 28, 0.98) 100%);
    }
}

html.dark-mode .completion-card {
    background: rgba(26, 30, 28, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border-color: var(--neutral-200);
}

html.dark-mode .completion-icon {
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.5),
                inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

html.dark-mode .completion-title {
    color: var(--primary-400);
}

html.dark-mode .completion-desc {
    color: var(--text-secondary);
}

html.dark-mode .completion-stat {
    background: linear-gradient(135deg,
        rgba(128, 184, 144, 0.12) 0%,
        rgba(128, 184, 144, 0.06) 100%);
    border-color: var(--accent-400);
}

html.dark-mode .completion-stat:hover {
    box-shadow: 0 8px 20px rgba(128, 184, 144, 0.3);
}

html.dark-mode .completion-stat-value {
    color: var(--accent-400);
}

html.dark-mode .completion-stat-label {
    color: var(--text-secondary);
}


/* ==================== 练习统计面板 - 暗黑模式 (Footer 版本) ==================== */

/* 统计标签 - 暗黑模式 */
html.dark-mode .site-footer .stat-label,
[data-theme="dark"] .site-footer .stat-label {
    color: #999;
}

/* 统计数值 - 暗黑模式 */
html.dark-mode .site-footer .stat-value,
[data-theme="dark"] .site-footer .stat-value {
    color: #64B5F6;
}

/* 加载状态 - 暗黑模式 */
html.dark-mode .site-footer #stats-loading,
[data-theme="dark"] .site-footer #stats-loading {
    color: #666;
}

/* 错误状态 - 暗黑模式 */
html.dark-mode .site-footer #stats-error,
[data-theme="dark"] .site-footer #stats-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
}

/* ===== 排名显示 - 暗黑模式 ===== */

/* 排名颜色编码 - 暗黑模式 */
/* Top 30: 金色 */
html.dark-mode .site-footer .stat-rank-value.rank-top-30,
[data-theme="dark"] .site-footer .stat-rank-value.rank-top-30 {
    color: #FFD700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

/* Top 100: 亮蓝色 */
html.dark-mode .site-footer .stat-rank-value.rank-top-100,
[data-theme="dark"] .site-footer .stat-rank-value.rank-top-100 {
    color: #64B5F6;
}

/* Top 200: 亮绿色 */
html.dark-mode .site-footer .stat-rank-value.rank-top-200,
[data-theme="dark"] .site-footer .stat-rank-value.rank-top-200 {
    color: #66BB6A;
}

/* 其他排名: 浅灰色 */
html.dark-mode .site-footer .stat-rank-value.rank-other,
[data-theme="dark"] .site-footer .stat-rank-value.rank-other {
    color: #777;
}

/* 排名不可用 - 暗黑模式 */
html.dark-mode .site-footer .stat-rank-value.rank-na,
[data-theme="dark"] .site-footer .stat-rank-value.rank-na {
    color: #555;
}

/* 排名计算中 - 暗黑模式 */
html.dark-mode .site-footer .stat-rank-value.rank-loading,
[data-theme="dark"] .site-footer .stat-rank-value.rank-loading {
    color: #ffa500;
}