/* ===== 巧琢编程网 全站暗色模式 ===== */
/* 使用方式：body添加class="dark-mode"，配合dark-mode.js自动切换 */

/* === 基础 === */
.dark-mode {
    --dm-bg-primary: #0f172a;
    --dm-bg-secondary: #1e293b;
    --dm-bg-card: #1e293b;
    --dm-bg-hover: #334155;
    --dm-bg-input: #1e293b;
    --dm-bg-modal: #1e293b;
    --dm-text-primary: #f1f5f9;
    --dm-text-secondary: #cbd5e1;
    --dm-text-muted: #94a3b8;
    --dm-border: #334155;
    --dm-accent: #60a5fa;
    --dm-accent-bg: rgba(96,165,250,0.1);
    --dm-shadow: rgba(0,0,0,0.3);
}

.dark-mode body,
.dark-mode {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* === 导航栏 === */
.dark-mode .navbar {
    background: rgba(15,23,42,0.95) !important;
    border-bottom-color: #334155 !important;
}
.dark-mode .nav-logo,
.dark-mode .nav-logo span {
    color: #f1f5f9 !important;
}
.dark-mode .nav-links a {
    color: #cbd5e1 !important;
}
.dark-mode .nav-links a:hover,
.dark-mode .nav-links a.active {
    background: rgba(96,165,250,0.1) !important;
    color: #60a5fa !important;
}
.dark-mode .nav-auth .btn-login {
    color: #60a5fa !important;
    background: transparent !important;
}
.dark-mode .nav-auth .btn-login:hover {
    background: rgba(96,165,250,0.1) !important;
}
.dark-mode .nav-auth .btn-register {
    background: #2563eb !important;
    color: #fff !important;
}
.dark-mode .nav-user .username {
    color: #e2e8f0 !important;
}
.dark-mode .nav-user .vip-tag {
    background: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
}
.dark-mode .mobile-toggle span {
    background: #94a3b8 !important;
}

/* === 页脚 === */
.dark-mode .footer {
    background: #020617 !important;
    border-top-color: #1e293b !important;
}
.dark-mode .footer a,
.dark-mode .footer span,
.dark-mode .footer p,
.dark-mode .footer li {
    color: #94a3b8 !important;
}
.dark-mode .footer a:hover {
    color: #60a5fa !important;
}
.dark-mode .footer h4,
.dark-mode .footer .footer-title {
    color: #f1f5f9 !important;
}

/* === 卡片通用 === */
.dark-mode .card,
.dark-mode .course-card,
.dark-mode .video-card,
.dark-mode .case-card,
.dark-mode .article-card,
.dark-mode .product-card,
.dark-mode .rank-card,
.dark-mode .shop-card,
.dark-mode .resource-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

.dark-mode .card:hover,
.dark-mode .course-card:hover,
.dark-mode .video-card:hover,
.dark-mode .case-card:hover,
.dark-mode .article-card:hover,
.dark-mode .product-card:hover,
.dark-mode .shop-card:hover,
.dark-mode .resource-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    border-color: #475569 !important;
}

.dark-mode .card h3,
.dark-mode .course-card h3,
.dark-mode .video-card h3,
.dark-mode .case-card h3,
.dark-mode .article-card h3,
.dark-mode .product-card h3,
.dark-mode .shop-card h3,
.dark-mode .card .card-title,
.dark-mode .card-title {
    color: #f1f5f9 !important;
}

.dark-mode .card p,
.dark-mode .card .card-desc,
.dark-mode .card .desc,
.dark-mode .card-meta,
.dark-mode .case-meta {
    color: #94a3b8 !important;
}

/* === 页面标题区 === */
.dark-mode .page-header,
.dark-mode .hero,
.dark-mode .hero-section {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
.dark-mode .page-header h1,
.dark-mode .page-title,
.dark-mode .hero h1,
.dark-mode .hero-title {
    color: #f1f5f9 !important;
}
.dark-mode .page-header h1 span,
.dark-mode .hero h1 span {
    color: #60a5fa !important;
}
.dark-mode .page-header p,
.dark-mode .hero p,
.dark-mode .page-subtitle {
    color: #94a3b8 !important;
}

/* === 搜索框 === */
.dark-mode .search-box,
.dark-mode .search-input,
.dark-mode input[type="text"],
.dark-mode input[type="search"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode textarea,
.dark-mode select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark-mode .search-input::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #64748b !important;
}
.dark-mode .search-input:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15) !important;
}

/* === 筛选标签 === */
.dark-mode .filter-tag,
.dark-mode .filter-btn,
.dark-mode .tag {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
.dark-mode .filter-tag:hover,
.dark-mode .filter-btn:hover {
    background: #334155 !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
.dark-mode .filter-tag.multi-active,
.dark-mode .filter-tag.active,
.dark-mode .filter-btn.active {
    background: rgba(96,165,250,0.15) !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

/* === 按钮 === */
.dark-mode .btn-primary,
.dark-mode .btn-search,
.dark-mode button[class*="btn-primary"] {
    background: #2563eb !important;
    color: #fff !important;
}
.dark-mode .btn-secondary,
.dark-mode .btn-outline {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

/* === 弹窗/Modal === */
.dark-mode .modal,
.dark-mode .modal-content,
.dark-mode .dialog,
.dark-mode .detail-modal,
.dark-mode .case-detail-modal {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark-mode .modal-header,
.dark-mode .modal-footer {
    border-color: #334155 !important;
}
.dark-mode .modal-close,
.dark-mode .close-btn {
    color: #94a3b8 !important;
}
.dark-mode .modal-close:hover,
.dark-mode .close-btn:hover {
    color: #f1f5f9 !important;
}
.dark-mode .modal-overlay,
.dark-mode .overlay {
    background: rgba(0,0,0,0.6) !important;
}

/* === 表格 === */
.dark-mode table {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}
.dark-mode th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}
.dark-mode td {
    border-color: #334155 !important;
}
.dark-mode tr:hover td {
    background: #334155 !important;
}

/* === 徽章/标签 === */
.dark-mode .badge-free,
.dark-mode .badge-green,
.dark-mode [class*="badge-free"] {
    background: rgba(22,163,74,0.15) !important;
    color: #4ade80 !important;
}
.dark-mode .badge-vip,
.dark-mode .badge-member,
.dark-mode [class*="badge-vip"],
.dark-mode [class*="badge-member"] {
    background: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
}
.dark-mode .badge-blue,
.dark-mode [class*="badge-blue"] {
    background: rgba(59,130,246,0.15) !important;
    color: #60a5fa !important;
}

/* === 分页 === */
.dark-mode .pagination button,
.dark-mode .page-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
.dark-mode .pagination button:hover,
.dark-mode .page-btn:hover {
    background: #334155 !important;
    color: #60a5fa !important;
}
.dark-mode .pagination button.active,
.dark-mode .page-btn.active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* === 滚动条 === */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}
.dark-mode ::-webkit-scrollbar-track {
    background: #0f172a;
}
.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
}
.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* === 代码块 === */
.dark-mode pre,
.dark-mode code {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}
.dark-mode pre {
    border-color: #334155 !important;
}

/* === 链接 === */
.dark-mode a {
    color: #60a5fa;
}

/* === 首页特有 === */
.dark-mode .hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
}
.dark-mode .hero-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .feature-card,
.dark-mode .resource-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .feature-card:hover,
.dark-mode .resource-card:hover {
    border-color: #475569 !important;
}
.dark-mode .pricing-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .pricing-card.featured {
    border-color: #3b82f6 !important;
}
.dark-mode .faq-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .faq-question {
    color: #f1f5f9 !important;
}
.dark-mode .faq-answer {
    color: #94a3b8 !important;
}
.dark-mode .stat-number {
    color: #60a5fa !important;
}
.dark-mode .section-title {
    color: #f1f5f9 !important;
}
.dark-mode .section-subtitle {
    color: #94a3b8 !important;
}

/* === 排行榜/实战闯关 === */
.dark-mode .rank-item,
.dark-mode .hall-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .rank-item:hover,
.dark-mode .hall-card:hover {
    border-color: #475569 !important;
}

/* === 补充：白色背景元素覆盖 === */
.dark-mode .container,
.dark-mode .content,
.dark-mode .main,
.dark-mode .page-content,
.dark-mode .page-container,
.dark-mode section {
    background-color: transparent;
}

.dark-mode .bg-white,
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"] {
    background-color: #1e293b !important;
}

/* 首页Hero区 */
.dark-mode .hero-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) !important;
}
.dark-mode .hero-card {
    background: rgba(30,41,59,0.95) !important;
    border-color: #334155 !important;
}
.dark-mode .chat-simulation {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* 视频教程页 */
.dark-mode .course-list,
.dark-mode .video-list {
    background: transparent !important;
}
.dark-mode .course-tab,
.dark-mode .tab-btn {
    background: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.dark-mode .course-tab.active,
.dark-mode .tab-btn.active {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}
.dark-mode .video-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .video-title {
    color: #f1f5f9 !important;
}

/* 案例库详情弹窗 */
.dark-mode .case-detail,
.dark-mode .detail-content {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

/* 排行榜/实战闯关 */
.dark-mode .rank-list,
.dark-mode .hall-section {
    background: transparent !important;
}
.dark-mode .rank-info .name {
    color: #f1f5f9 !important;
}
.dark-mode .rank-info .signature {
    color: #94a3b8 !important;
}
.dark-mode .rank-badge {
    background: #334155 !important;
}

/* 文章页 */
.dark-mode .article-content,
.dark-mode .article-body {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}
.dark-mode .article-content h1,
.dark-mode .article-content h2,
.dark-mode .article-content h3,
.dark-mode .article-body h1,
.dark-mode .article-body h2,
.dark-mode .article-body h3 {
    color: #f1f5f9 !important;
}

/* 商城 */
.dark-mode .product-grid {
    background: transparent !important;
}
.dark-mode .product-price {
    color: #fb923c !important;
}

/* 会员定价页 */
.dark-mode .plan-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .plan-card.recommended {
    border-color: #3b82f6 !important;
}
.dark-mode .plan-price {
    color: #f1f5f9 !important;
}
.dark-mode .plan-feature {
    color: #94a3b8 !important;
}

/* 个人中心 */
.dark-mode .profile-card,
.dark-mode .profile-section {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .profile-header {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
}
.dark-mode .order-item,
.dark-mode .order-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .stat-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* 通用文本色 */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: #f1f5f9 !important;
}
.dark-mode p {
    color: #cbd5e1 !important;
}
.dark-mode label {
    color: #e2e8f0 !important;
}
.dark-mode small, .dark-mode .text-muted, .dark-mode .muted {
    color: #94a3b8 !important;
}

/* 通用边框 */
.dark-mode hr,
.dark-mode .divider {
    border-color: #334155 !important;
}

/* 空状态 */
.dark-mode .empty-state {
    color: #94a3b8 !important;
}

/* === 首页深色覆盖 === */
.dark-mode .hero-section {
    background: linear-gradient(180deg, #0f172a 0%, #1a1040 50%, #0f172a 100%) !important;
}
.dark-mode .hero-tag {
    background: #334155 !important;
    color: #e2e8f0 !important;
}
.dark-mode .hero-tag.orange {
    background: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
}
.dark-mode .hero-tag.green {
    background: rgba(22,163,74,0.15) !important;
    color: #4ade80 !important;
}
.dark-mode .hero-tag.purple {
    background: rgba(124,58,237,0.15) !important;
    color: #a78bfa !important;
}
.dark-mode .btn-outline {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
.dark-mode .ai-simulation-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .ai-card-header {
    background: #0f172a !important;
    border-color: #334155 !important;
}
.dark-mode .ai-card-body {
    background: #0f172a !important;
}
.dark-mode .ai-message {
    background: #334155 !important;
    color: #e2e8f0 !important;
}
.dark-mode .ai-message.user {
    background: #2563eb !important;
    color: #fff !important;
}
.dark-mode .ai-card-footer .badge {
    background: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
}
.dark-mode .ai-card-footer .link {
    color: #60a5fa !important;
}

/* 资源卡片 */
.dark-mode .resource-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .resource-card .icon-box {
    background: rgba(96,165,250,0.1) !important;
    color: #60a5fa !important;
}
.dark-mode .resource-card:hover .icon-box {
    background: rgba(96,165,250,0.2) !important;
}
.dark-mode .resource-card h3 {
    color: #f1f5f9 !important;
}
.dark-mode .resource-card p {
    color: #94a3b8 !important;
}
.dark-mode .resource-card .arrow {
    color: #64748b !important;
}
.dark-mode .resource-card:hover .arrow {
    color: #60a5fa !important;
}

/* 会员卡 */
.dark-mode .pricing-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .pricing-card.featured,
.dark-mode .pricing-card.popular {
    border-color: #3b82f6 !important;
    background: linear-gradient(180deg, #1e293b 0%, #172554 100%) !important;
}
.dark-mode .pricing-card .price {
    color: #f1f5f9 !important;
}
.dark-mode .pricing-card .price .currency,
.dark-mode .pricing-card .price .amount {
    color: #f1f5f9 !important;
}
.dark-mode .pricing-card .original-price {
    color: #64748b !important;
}
.dark-mode .pricing-card .feature-item {
    color: #94a3b8 !important;
}
.dark-mode .pricing-card .feature-item::before {
    color: #4ade80 !important;
}

/* FAQ */
.dark-mode .faq-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .faq-question {
    color: #f1f5f9 !important;
}
.dark-mode .faq-answer {
    color: #94a3b8 !important;
}

/* 统计数字 */
.dark-mode .stat-item .stat-number {
    color: #60a5fa !important;
}
.dark-mode .stat-item .stat-label {
    color: #94a3b8 !important;
}

/* === 个人中心深色覆盖 === */
.dark-mode .auth-container {
    background: #1e293b !important;
}
.dark-mode .auth-tabs {
    border-color: #334155 !important;
}
.dark-mode .auth-tab {
    color: #94a3b8 !important;
    background: transparent !important;
}
.dark-mode .auth-tab.active {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}
.dark-mode .auth-card {
    background: #1e293b !important;
}
.dark-mode .auth-card label {
    color: #e2e8f0 !important;
}
.dark-mode .form-group input,
.dark-mode .form-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark-mode .profile-container {
    background: transparent !important;
}
.dark-mode .user-card-compact {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .stats-row {
    background: #0f172a !important;
    border-color: #334155 !important;
}
.dark-mode .stat-item {
    border-color: #334155 !important;
}
.dark-mode .stat-badge {
    background: rgba(96,165,250,0.15) !important;
    color: #60a5fa !important;
}
.dark-mode .stat-val {
    color: #f1f5f9 !important;
}
.dark-mode .stat-sub {
    color: #94a3b8 !important;
}
.dark-mode .menu-item,
.dark-mode .profile-menu-item {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
.dark-mode .menu-item:hover,
.dark-mode .profile-menu-item:hover,
.dark-mode .menu-item.active {
    background: #334155 !important;
    color: #60a5fa !important;
}
.dark-mode .order-card,
.dark-mode .order-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .order-status {
    color: #fb923c !important;
}

/* === 视频教程页深色覆盖 === */
.dark-mode .course-header {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .course-info h2 {
    color: #f1f5f9 !important;
}
.dark-mode .course-info p {
    color: #94a3b8 !important;
}
.dark-mode .back-btn {
    color: #60a5fa !important;
    background: rgba(96,165,250,0.1) !important;
}
.dark-mode .lesson-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
.dark-mode .lesson-item:hover {
    background: #334155 !important;
}
.dark-mode .lesson-title {
    color: #f1f5f9 !important;
}
.dark-mode .lesson-duration {
    color: #94a3b8 !important;
}
.dark-mode .course-badge {
    background: rgba(22,163,74,0.15) !important;
    color: #4ade80 !important;
}
.dark-mode .course-badge.member {
    background: rgba(249,115,22,0.15) !important;
    color: #fb923c !important;
}

/* === 排行榜深色覆盖 === */
.dark-mode .rank-top3 {
    background: transparent !important;
}
.dark-mode .rank-top-item {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .rank-number {
    color: #fbbf24 !important;
}
.dark-mode .rank-name {
    color: #f1f5f9 !important;
}
.dark-mode .rank-score {
    color: #60a5fa !important;
}
.dark-mode .rank-signature {
    color: #94a3b8 !important;
}
.dark-mode .hall-header {
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
}
.dark-mode .challenge-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .challenge-title {
    color: #f1f5f9 !important;
}
.dark-mode .challenge-desc {
    color: #94a3b8 !important;
}

/* === 案例库深色覆盖 === */
.dark-mode .case-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .case-title {
    color: #f1f5f9 !important;
}
.dark-mode .case-desc {
    color: #94a3b8 !important;
}
.dark-mode .case-meta {
    color: #64748b !important;
}
.dark-mode .case-meta .lib {
    color: #94a3b8 !important;
}
.dark-mode .difficulty-tag {
    background: rgba(96,165,250,0.15) !important;
    color: #60a5fa !important;
}
.dark-mode .difficulty-tag.beginner {
    background: rgba(22,163,74,0.15) !important;
    color: #4ade80 !important;
}
.dark-mode .difficulty-tag.advanced {
    background: rgba(239,68,68,0.15) !important;
    color: #f87171 !important;
}
.dark-mode .detail-overlay {
    background: rgba(0,0,0,0.6) !important;
}
.dark-mode .detail-card {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}
.dark-mode .detail-card .close-btn {
    color: #94a3b8 !important;
}
.dark-mode .detail-card h2 {
    color: #f1f5f9 !important;
}

/* === 文章页深色覆盖 === */
.dark-mode .article-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.dark-mode .article-title {
    color: #f1f5f9 !important;
}
.dark-mode .article-excerpt {
    color: #94a3b8 !important;
}
.dark-mode .article-meta {
    color: #64748b !important;
}

/* ===== Announcement Bar ===== */
.dark-mode .announcement-bar {
    background: linear-gradient(90deg, #92400e, #78350f, #92400e) !important;
    box-shadow: 0 2px 8px rgba(146,64,14,0.3) !important;
}
.dark-mode .announcement-bar .bar-text {
    color: #fde68a !important;
}
.dark-mode .announcement-bar .bar-text a {
    color: #93c5fd !important;
}