/* ============================================================
   学习乐园 · 页面主题适配层
   在页面自有样式之后加载，用主题变量统一视觉
   ============================================================ */

/* ---------- 页面底色与字体 ---------- */
html[data-theme] body {
    background-color: var(--bg) !important;
    background-image: var(--bg-pattern) !important;
    background-size: var(--bg-size) !important;
    color: var(--text);
    font-family: var(--font);
}

html[data-theme] body::before,
html[data-theme] body::after {
    background: var(--deco-1);
    opacity: var(--deco-opacity);
}

html[data-theme] body::after {
    background: var(--deco-2);
}

/* ---------- 顶部横幅 ---------- */
html[data-theme] header {
    background: var(--header-bg);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: var(--header-text);
}

html[data-theme] header h1,
html[data-theme] header h2 {
    color: var(--header-text);
}

html[data-theme] header p {
    color: var(--header-sub);
}

html[data-theme="scifi"] header::before,
html[data-theme="pixel"] header::before {
    display: none;
}

html[data-theme] header .back-btn,
html[data-theme] header .stats-btn {
    z-index: 5;
}

/* ---------- 面板 / 卡片 ---------- */
html[data-theme] .login-container,
html[data-theme] .section,
html[data-theme] .current-plan-card,
html[data-theme] .progress-section,
html[data-theme] .recent-books,
html[data-theme] .stats-card,
html[data-theme] .total-stats,
html[data-theme] .book-list,
html[data-theme] .plan-list,
html[data-theme] .date-selection,
html[data-theme] .book-selection,
html[data-theme] .nav-card,
html[data-theme] .book-card,
html[data-theme] .plan-item,
html[data-theme] .unit-card,
html[data-theme] .practice-container,
html[data-theme] .completion-message,
html[data-theme] .stat-card,
html[data-theme] .stat-item,
html[data-theme] .achievement,
html[data-theme] .best-record-card,
html[data-theme] .modal-content,
html[data-theme] .congrats-content,
html[data-theme] .filter-checkbox-wrapper {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}

html[data-theme] .current-plan-card::before,
html[data-theme] .stats-card::before,
html[data-theme] .unit-card::before,
html[data-theme] .stat-card::before,
html[data-theme] .nav-card::before,
html[data-theme] .book-card::before {
    display: none;
}

/* ---------- 按钮 ---------- */
html[data-theme] .action-btn.btn-primary,
html[data-theme] .add-book-btn,
html[data-theme] .login-btn,
html[data-theme] .practice-controls button,
html[data-theme] .completion-message button:not(.secondary),
html[data-theme] .congrats-btn {
    background: var(--accent);
    color: var(--accent-contrast);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .action-btn.btn-primary:hover,
html[data-theme] .add-book-btn:hover,
html[data-theme] .login-btn:hover,
html[data-theme] .practice-controls button:hover,
html[data-theme] .congrats-btn:hover {
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
    filter: brightness(1.05);
}

html[data-theme] .back-btn,
html[data-theme] .stats-btn,
html[data-theme] .action-btn.btn-secondary,
html[data-theme] .completion-message button.secondary,
html[data-theme] .logout,
html[data-theme] .quit {
    background: var(--panel);
    color: var(--text);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .back-btn:hover,
html[data-theme] .stats-btn:hover,
html[data-theme] .action-btn.btn-secondary:hover,
html[data-theme] .logout:hover {
    background: var(--hover-tint);
    box-shadow: var(--shadow);
}

html[data-theme] .btn-edit {
    background: var(--accent-3);
    color: var(--text);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
}

html[data-theme] .btn-delete {
    background: var(--accent);
    color: var(--accent-contrast);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
}

/* ---------- 筛选按钮 ---------- */
html[data-theme] .filter-btn {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .filter-btn:hover {
    background: var(--hover-tint);
}

html[data-theme] .filter-btn.active {
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .filter-checkbox-wrapper {
    background: var(--panel);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

html[data-theme] .filter-checkbox-wrapper span {
    color: var(--text);
}

html[data-theme] .filter-checkbox-wrapper input {
    accent-color: var(--accent);
}

/* ---------- 表单 ---------- */
html[data-theme] input[type="text"],
html[data-theme] input[type="password"],
html[data-theme] input[type="number"],
html[data-theme] input[type="date"],
html[data-theme] select,
html[data-theme] textarea {
    background: var(--input-bg);
    border: var(--border-w) solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--text);
    font-family: var(--font);
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

html[data-theme] .form-group label,
html[data-theme] .date-selection label,
html[data-theme] .remember-me label {
    color: var(--text);
}

html[data-theme] .remember-me input[type="checkbox"],
html[data-theme] input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ---------- 标题与小标签 ---------- */
html[data-theme] .section-title {
    background: var(--chip-bg);
    color: var(--chip-text);
    border: var(--border-w) solid var(--border);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-bottom: var(--border-w) solid var(--border);
}

html[data-theme] .section-title i {
    color: var(--accent);
}

html[data-theme] .plan-header h2,
html[data-theme] .plan-header h3,
html[data-theme] .plan-item-header h3,
html[data-theme] .book-card h3,
html[data-theme] .unit-card h2,
html[data-theme] .stats-card h2,
html[data-theme] .modal-content h2,
html[data-theme] .congrats-content h2,
html[data-theme] .completed-book-item h4,
html[data-theme] .history-item .title,
html[data-theme] .achievement.unlocked .name,
html[data-theme] .best-record-card .title,
html[data-theme] .practice-header h2,
html[data-theme] .completion-message h2 {
    color: var(--text);
}

html[data-theme] .plan-header p,
html[data-theme] .plan-item-info .label,
html[data-theme] .book-card .info,
html[data-theme] .book-card .completed-at,
html[data-theme] .completed-book-item .details,
html[data-theme] .completed-date,
html[data-theme] .history-item .stat-label,
html[data-theme] .history-item .date,
html[data-theme] .achievement .name,
html[data-theme] .achievement .desc,
html[data-theme] .growth-tip .text span,
html[data-theme] .best-record-card .accuracy,
html[data-theme] .best-record-card .wpm-unit,
html[data-theme] .stat-label,
html[data-theme] .stat-unit,
html[data-theme] .stat-card .label,
html[data-theme] .unit-card p,
html[data-theme] .completion-message .final-stats p,
html[data-theme] .no-data,
html[data-theme] .empty-state {
    color: var(--muted);
}

html[data-theme] .stat-value,
html[data-theme] .stat-item .value,
html[data-theme] .stat-card .value,
html[data-theme] .history-item .stat-value,
html[data-theme] .best-record-card .wpm {
    color: var(--text);
}

html[data-theme] .progress-header,
html[data-theme] .plan-header p {
    color: var(--muted);
}

/* ---------- 进度条 ---------- */
html[data-theme] .progress-bar,
html[data-theme] .progress-bar .progress-fill,
html[data-theme] .progress-fill {
    border-radius: var(--btn-radius);
}

html[data-theme] .progress-bar {
    background: rgba(128, 128, 128, 0.18);
    border: var(--border-w) solid var(--border);
}

html[data-theme] .progress-bar .progress-fill {
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

/* ---------- 列表/状态 ---------- */
html[data-theme] .history-header {
    background: var(--chip-bg);
    color: var(--text);
    border-bottom: var(--border-w) solid var(--border);
}

html[data-theme] .history-item {
    border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

html[data-theme] .history-item:hover {
    background: var(--hover-tint);
}

html[data-theme] .plan-item.active,
html[data-theme] .plan-item.completed,
html[data-theme] .plan-item.expired {
    border: var(--border-w) solid var(--accent);
}

html[data-theme] .plan-item-header .status,
html[data-theme] .status {
    border: 2px solid var(--border);
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
    background: var(--chip-bg);
    color: var(--chip-text);
}

html[data-theme] .plan-item-header .status.active,
html[data-theme] .plan-item-header .status.completed,
html[data-theme] .status.active,
html[data-theme] .status.completed {
    background: var(--accent-2);
    color: var(--accent-contrast);
}

html[data-theme] .empty-state i,
html[data-theme] .stat-item .icon,
html[data-theme] .stat-card .icon,
html[data-theme] .plan-header .icon,
html[data-theme] .unit-card .icon,
html[data-theme] .nav-card .icon,
html[data-theme] .congrats-content .star i {
    color: var(--accent);
}

/* ---------- 学习类页面细节 ---------- */
html[data-theme] .unit-card {
    background: var(--panel);
}

html[data-theme] .logo {
    background: var(--accent-3);
    border: var(--border-w) solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

html[data-theme] .login-header h1 {
    color: var(--text);
}

html[data-theme] .login-header h1 span {
    color: var(--accent);
}

html[data-theme] .login-header p {
    color: var(--muted);
}

html[data-theme] .password-toggle {
    color: var(--muted);
}

html[data-theme] .error-message {
    border: var(--border-w) solid var(--border);
    border-left: 8px solid var(--accent);
}

html[data-theme] .login-footer {
    color: var(--muted);
    border-top-color: rgba(128, 128, 128, 0.25);
}

html[data-theme] .login-footer a {
    color: var(--muted);
    border-bottom-color: rgba(128, 128, 128, 0.4);
}

html[data-theme] .doodle-star {
    color: var(--accent);
}

html[data-theme] .doodle-ring {
    color: var(--accent-2);
}

html[data-theme] .doodle-squiggle {
    color: var(--accent-3);
}

html[data-theme] .sun-disc {
    background: var(--deco-1);
    opacity: var(--deco-opacity);
}

html[data-theme] .blob {
    background: var(--deco-2);
    opacity: var(--deco-opacity);
}

html[data-theme] .growth-tip {
    background: var(--hover-tint);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
}

html[data-theme] .growth-tip i {
    color: var(--accent-3);
}

html[data-theme] .growth-tip .text strong {
    color: var(--text);
}

html[data-theme] .achievement.unlocked {
    background: var(--hover-tint);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

html[data-theme] footer {
    background: var(--panel) !important;
    border: 2px solid var(--border) !important;
    color: var(--muted) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] footer a {
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme] .unit-card .tag {
    background: var(--chip-bg);
    color: var(--chip-text);
    border: 2px solid var(--border);
}

html[data-theme] .text-display .annotation {
    color: var(--muted);
}

html[data-theme] .text-display .input-char.pending {
    color: var(--muted);
    opacity: 0.75;
}

html[data-theme] .keyboard-container text {
    fill: var(--muted) !important;
}

html[data-theme] .practice-toast {
    background: var(--text);
    color: var(--bg);
}

html[data-theme] .completion-message .final-stats span {
    color: var(--accent);
}

/* ---------- 主题专属微调 ---------- */
html[data-theme="scifi"] .card-tape,
html[data-theme="scifi"] .tape {
    display: none;
}

html[data-theme="pixel"] .stat-item,
html[data-theme="pixel"] .stat-card,
html[data-theme="pixel"] .unit-card,
html[data-theme="pixel"] .nav-card,
html[data-theme="pixel"] .book-card,
html[data-theme="pixel"] .plan-item,
html[data-theme="pixel"] .achievement,
html[data-theme="pixel"] .best-record-card,
html[data-theme="pixel"] .filter-btn,
html[data-theme="pixel"] .filter-checkbox-wrapper {
    border-radius: 0;
}

html[data-theme="pixel"] .module-card,
html[data-theme="pixel"] .login-container {
    border-radius: 0;
}

html[data-theme="crayon"] .stat-item,
html[data-theme="crayon"] .stat-card,
html[data-theme="crayon"] .unit-card,
html[data-theme="crayon"] .nav-card,
html[data-theme="crayon"] .book-card,
html[data-theme="crayon"] .plan-item,
html[data-theme="crayon"] .achievement,
html[data-theme="crayon"] .best-record-card {
    border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}

html[data-theme="scifi"] .stat-item,
html[data-theme="scifi"] .stat-card,
html[data-theme="scifi"] .unit-card,
html[data-theme="scifi"] .nav-card,
html[data-theme="scifi"] .book-card,
html[data-theme="scifi"] .plan-item,
html[data-theme="scifi"] .achievement,
html[data-theme="scifi"] .best-record-card {
    box-shadow: var(--shadow-sm);
}

html[data-theme="scifi"] .stat-item:hover,
html[data-theme="scifi"] .stat-card:hover,
html[data-theme="scifi"] .unit-card:hover,
html[data-theme="scifi"] .book-card:hover,
html[data-theme="scifi"] .plan-item:hover {
    box-shadow: var(--shadow-hover);
}