/* ============================================================
   全站深色模式样式
   通过 html.dark 类触发，覆盖所有页面的主要视觉元素
   ============================================================ */

html.dark body {
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%) !important;
    color: #e0e0e8;
}

/* ---------- 导航栏 ---------- */
html.dark .navbar {
    background: #1a1a2e !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

html.dark .nav-logo {
    color: #8b7cf6 !important;
}

html.dark .nav-link {
    color: #b0b0c8 !important;
}

html.dark .nav-link:hover {
    background-color: rgba(139, 124, 246, 0.15) !important;
    color: #a99bf6 !important;
}

html.dark .nav-link.active {
    background-color: #5a48d8 !important;
    color: #fff !important;
}

html.dark .user-profile {
    background-color: #2a2a3e !important;
}

html.dark .user-profile:hover {
    background-color: #34344a !important;
}

html.dark .user-avatar {
    background-color: #5a48d8 !important;
}

html.dark .user-name {
    color: #c0c0d0 !important;
}

/* ---------- 通用卡片 / 容器 ---------- */
html.dark .grammar-card,
html.dark .coming-card,
html.dark .word-card,
html.dark .word-list-item,
html.dark .quiz-card,
html.dark .stat-card,
html.dark .stat-pill,
html.dark .preview-tile,
html.dark .daily-word-card,
html.dark .challenge-entry,
html.dark .info-panel,
html.dark .sidebar-card,
html.dark .panel-card,
html.dark .game-card,
html.dark .score-card,
html.dark .badge-tile,
html.dark .stat-block,
html.dark .level-ring-card,
html.dark .hero-stats,
html.dark .record-card,
html.dark .reward-box,
html.dark .knowledge-card,
html.dark .guide-ticket,
html.dark .owl-card,
html.dark .adventure-map,
html.dark .gold-sentence,
html.dark .intro-card {
    background: #252538 !important;
    color: #e0e0e8;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

html.dark .grammar-card::before {
    background: linear-gradient(180deg, #7c6cf0, #4c3fb0) !important;
}

html.dark .g-example {
    background: #1e1e30 !important;
    border-left-color: #6c5ce0 !important;
}

html.dark .g-pattern {
    color: #a99bf6 !important;
}

html.dark .g-pattern-cn {
    background: linear-gradient(135deg, #e8895a, #d2691e) !important;
}

html.dark .ex-en {
    color: #d0d0e0 !important;
}

html.dark .ex-cn {
    color: #9090a8 !important;
}

html.dark .seq-badge {
    background: linear-gradient(135deg, #7c6cf0, #4c3fb0) !important;
    box-shadow: 0 4px 10px rgba(90, 72, 216, 0.25) !important;
}

html.dark .stat-pill {
    color: #a99bf6 !important;
}

html.dark .stat-pill i {
    color: #7c6cf0 !important;
}

/* ---------- 搜索框 / 输入 ---------- */
html.dark .search-box input,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark textarea,
html.dark select {
    background: #1e1e30 !important;
    color: #e0e0e8 !important;
    border-color: #3a3a50 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark .search-box input:focus,
html.dark input:focus,
html.dark textarea:focus {
    border-color: #7c6cf0 !important;
    box-shadow: 0 4px 16px rgba(124, 108, 240, 0.25) !important;
}

html.dark .search-box i {
    color: #6a6a88 !important;
}

html.dark .search-box input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6a6a88 !important;
}

/* ---------- 页面标题 / 文字 ---------- */
html.dark .page-header h1,
html.dark .coming-card h1,
html.dark h1, html.dark h2, html.dark h3 {
    color: #a99bf6 !important;
}

html.dark .page-header p,
html.dark .coming-card p,
html.dark p {
    color: #9090a8 !important;
}

/* ---------- 自定义下拉框 ---------- */
html.dark .custom-select-trigger {
    background: #252538 !important;
    color: #e0e0e8 !important;
    border-color: #3a3a50 !important;
}

html.dark .custom-select-trigger:hover {
    border-color: #7c6cf0 !important;
}

html.dark .custom-select-dropdown {
    background: #1e1e30 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark .custom-select-option:hover {
    background: rgba(124, 108, 240, 0.2) !important;
}

html.dark .custom-select-option.selected {
    background: rgba(124, 108, 240, 0.3) !important;
}

/* ---------- 筛选胶囊按钮 ---------- */
html.dark .grade-btn,
html.dark .filter-pill,
html.dark .category-btn {
    background: #2a2a3e !important;
    color: #b0b0c8 !important;
}

html.dark .grade-btn.active,
html.dark .filter-pill.active,
html.dark .category-btn.active {
    background: linear-gradient(135deg, #7c6cf0, #5a48d8) !important;
    color: #fff !important;
}

/* ---------- 单词卡片 ---------- */
html.dark .word-card {
    background: #252538 !important;
    border-color: #3a3a50 !important;
}

html.dark .word-card .word-text {
    color: #e0e0e8 !important;
}

html.dark .word-card .word-translation {
    color: #a0a0b8 !important;
}

html.dark .word-card .word-example {
    color: #8888a0 !important;
}

html.dark .badge-row .pos-badge,
html.dark .badge-row .grade-badge {
    opacity: 0.9;
}

/* ---------- 回到顶部按钮 ---------- */
html.dark .back-top {
    background: linear-gradient(135deg, #7c6cf0, #4c3fb0) !important;
    box-shadow: 0 6px 16px rgba(124, 108, 240, 0.3) !important;
}

/* ---------- 登录 / 注册页 ---------- */
html.dark .login-card,
html.dark .register-card,
html.dark .form-card {
    background: #252538 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

html.dark .login-card h2,
html.dark .register-card h2,
html.dark .form-card h2 {
    color: #a99bf6 !important;
}

html.dark .form-group label {
    color: #c0c0d0 !important;
}

/* ---------- 个人中心页 ---------- */
html.dark .profile-card,
html.dark .profile-section,
html.dark .profile-item {
    background: #252538 !important;
}

html.dark .profile-label {
    color: #9090a8 !important;
}

html.dark .profile-value {
    color: #e0e0e8 !important;
}

/* ---------- 每周一读页 ---------- */
html.dark .article-card,
html.dark .article-content,
html.dark .reading-card {
    background: #252538 !important;
    color: #e0e0e8 !important;
}

html.dark .article-title {
    color: #a99bf6 !important;
}

/* ---------- 滚动条 ---------- */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #3a3a50;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #5a5a78;
}

/* ---------- 通用颜色兜底 ---------- */
html.dark .white-bg,
html.dark .bg-white,
html.dark .panel {
    background: #252538 !important;
    color: #e0e0e8 !important;
}

html.dark .text-dark,
html.dark .text-gray,
html.dark .text-muted {
    color: #b0b0c8 !important;
}

html.dark hr {
    border-color: #3a3a50 !important;
}

html.dark table {
    color: #e0e0e8;
}

html.dark table th {
    background: #2a2a3e !important;
    color: #a99bf6 !important;
}

html.dark table tr:nth-child(even) {
    background: #1e1e30 !important;
}

/* ---------- 答题选项 ---------- */
html.dark .quiz-option,
html.dark .answer-option,
html.dark .option-btn {
    background: #252538 !important;
    color: #e0e0e8 !important;
    border-color: #3a3a50 !important;
}

html.dark .quiz-option:hover,
html.dark .answer-option:hover,
html.dark .option-btn:hover {
    background: #2e2e44 !important;
    border-color: #7c6cf0 !important;
}

html.dark .quiz-option.selected,
html.dark .answer-option.selected,
html.dark .option-btn.selected {
    background: rgba(124, 108, 240, 0.2) !important;
    border-color: #7c6cf0 !important;
}

/* ---------- 切换按钮 ---------- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e4dffb;
    background: #f5f7fa;
    color: #6a5acd;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-right: 8px;
}

.theme-toggle:hover {
    background: #ede9ff;
    border-color: #7c6cf0;
    transform: scale(1.1);
}

html.dark .theme-toggle {
    background: #2a2a3e;
    border-color: #3a3a50;
    color: #ffd700;
}

html.dark .theme-toggle:hover {
    background: #34344a;
    border-color: #7c6cf0;
}

/* 太阳图标隐藏，月亮图标显示（默认亮色模式） */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }

html.dark .theme-toggle .icon-sun { display: inline; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ---------- 响应式补充 ---------- */
@media (max-width: 1200px) {
    .theme-toggle { width: 34px; height: 34px; font-size: .95rem; }
}