/* ============================================
   暗色模式 (Dark Mode)
   通过 .dark-mode 类切换，支持系统偏好检测
   ============================================ */

/* ===== Base ===== */
.dark-mode,
.dark-mode body {
    background: #121212;
    color: #e0e0e0;
}
.dark-mode a { color: #fff; }
.dark-mode a:hover { color: #ccc; }

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4 {
    color: #fff;
}
.dark-mode .text-muted { color: #999; }

/* 暗色模式聚焦框改为白色 */
.dark-mode *:focus-visible { outline-color: #fff; }

/* ===== Input / Select / Textarea ===== */
.dark-mode input[type="text"],
.dark-mode input[type="password"],
.dark-mode input[type="email"],
.dark-mode input[type="number"],
.dark-mode input[type="url"],
.dark-mode input[type="tel"],
.dark-mode input[type="search"],
.dark-mode select,
.dark-mode textarea {
    background: #2a2a3e;
    border-color: #444;
    color: #e0e0e0;
}
.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.dark-mode input:hover,
.dark-mode select:hover,
.dark-mode textarea:hover {
    border-color: #888;
}
.dark-mode input[disabled],
.dark-mode input[disabled]:hover {
    background: #1e1e2e;
    border-color: #333;
    color: #888;
}

/* ===== File Input ===== */
.dark-mode input[type="file"] {
    color: #bbb;
}
.dark-mode input[type="file"]::file-selector-button {
    background: #2a2a3e;
    border-color: #444;
    color: #e0e0e0;
}
.dark-mode input[type="file"]::file-selector-button:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* ===== Buttons ===== */
.dark-mode .btn {
    background: #fff;
    color: #000;
    border-color: #fff;
    transition: all 0.25s ease;
}
.dark-mode .btn:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,255,255,0.12);
}
.dark-mode .btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.dark-mode .btn-sm {
    background: #fff;
    color: #000;
    border-color: #fff;
    transition: all 0.25s ease;
}
.dark-mode .btn-sm:hover {
    background: #e8e8e8;
    border-color: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255,255,255,0.1);
}
.dark-mode .btn-sm-outline {
    background: transparent;
    color: #e0e0e0;
    border-color: #555;
}
.dark-mode .btn-sm-outline:hover {
    border-color: #fff;
    color: #000;
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(255,255,255,0.08);
}
.dark-mode .btn-sm-danger {
    color: #fc8181;
    border-color: #fc8181;
}
.dark-mode .btn-sm-danger:hover {
    background: #e53e3e;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(229,62,62,0.3);
}
.dark-mode .btn-sm-active {
    background: #555;
}
.dark-mode .btn-ai-sm {
    color: #aaa;
    border-color: #555;
}
.dark-mode .btn-ai-sm:hover {
    border-color: #fff;
    color: #fff;
}
.dark-mode .btn-add {
    color: #aaa;
    border-color: #555;
}
.dark-mode .btn-add:hover {
    border-color: #fff;
    color: #fff;
}
.dark-mode .btn-remove {
    color: #fc8181;
}
.dark-mode .btn-ai-update {
    background: linear-gradient(135deg, #2f7d4f, #3a9d5f);
    border-color: #2f7d4f;
}
.dark-mode .btn-ai-update:hover {
    background: linear-gradient(135deg, #256b42, #2f8a52);
    border-color: #256b42;
}

/* ===== Messages ===== */
.dark-mode .msg-success {
    background: rgba(47,125,79,0.15);
    color: #68d391;
    border-color: rgba(47,125,79,0.3);
}
.dark-mode .msg-error {
    background: rgba(197,48,48,0.15);
    color: #fc8181;
    border-color: rgba(197,48,48,0.3);
}

/* ===== Auth Tabs (Login/Register) ===== */
.dark-mode .auth-tabs {
    border-bottom-color: #444 !important;
}
.dark-mode .auth-tab {
    color: #999 !important;
}
.dark-mode .auth-tab:hover {
    color: #ccc !important;
}
.dark-mode .auth-tab.active {
    color: #fff !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #fff !important;
}

/* ===== Redeem Code Input ===== */
.dark-mode input#redeemCodeInput {
    background: #2a2a3e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

/* ===== Cards ===== */
.dark-mode .card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .card-title {
    border-bottom-color: #333;
}

/* ===== Auth Pages ===== */
.dark-mode .auth-page {
    background: #121212;
}
.dark-mode .auth-card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .auth-logo {
    color: #fff;
}
.dark-mode .auth-desc {
    color: #999;
}
.dark-mode .auth-footer {
    color: #888;
}
.dark-mode .auth-footer a {
    color: #fff;
}

/* ===== Captcha ===== */
.dark-mode .captcha-row img {
    border-color: #555;
    background: #1a1a1a;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dark-mode .captcha-row img:hover {
    border-color: #888;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.dark-mode .captcha-row input {
    background: #222;
    border-color: #444;
    color: #ddd;
}
.dark-mode .captcha-refresh {
    background: #222;
    border-color: #444;
    color: #ddd;
    transition: all 0.2s;
}
.dark-mode .captcha-refresh:hover {
    background: #333;
    border-color: #666;
    color: #fff;
}

/* ===== Navigation ===== */
.dark-mode .user-nav,
.dark-mode .home-nav {
    background: #1e1e2e;
    border-bottom-color: #333;
}
.dark-mode .nav-brand,
.dark-mode .home-brand {
    color: #fff;
}
.dark-mode .nav-links a,
.dark-mode .home-nav-links a {
    color: #e0e0e0;
}
.dark-mode .nav-links a:hover,
.dark-mode .nav-links a.active,
.dark-mode .home-nav-links a:hover,
.dark-mode .home-nav-links a.active {
    color: #fff;
}
.dark-mode .nav-links a.btn-sm,
.dark-mode .home-nav-links a.btn-sm,
.dark-mode .nav-links a.btn-sm:hover,
.dark-mode .home-nav-links a.btn-sm:hover,
.dark-mode .nav-links a.btn-sm.active,
.dark-mode .home-nav-links a.btn-sm.active {
    color: #000 !important;
}
.dark-mode .nav-credits {
    color: #999;
}
.dark-mode .nav-logout {
    color: #888 !important;
}
.dark-mode .nav-admin-link {
    color: #90cdf4 !important;
}

/* ===== Hamburger ===== */
.dark-mode .hamburger span {
    background: #e0e0e0;
}

/* ===== Mobile Nav ===== */
@media (max-width: 768px) {
    .dark-mode .nav-links,
    .dark-mode .home-nav-links {
        background: #1e1e2e;
        border-bottom-color: #333;
    }
    .dark-mode .admin-nav-links {
        background: #1e1e2e;
        border-bottom-color: #333;
    }
    .dark-mode .admin-nav-links a,
    .dark-mode .admin-nav-links .admin-user {
        border-bottom-color: #333;
    }
    .dark-mode .home-nav-links a.btn-sm,
    .dark-mode .nav-links a.btn-sm {
        color: #fff !important;
        background: #000 !important;
        border-color: #000 !important;
    }
}

@media (max-width: 480px) {
    .dark-mode .admin-nav-links a {
        font-size: 13px;
        padding: 8px 0;
    }
    .dark-mode .card {
        padding: 14px;
    }
    .dark-mode .admin-main {
        padding: 12px;
    }
    .dark-mode .stat-card {
        padding: 14px;
    }
}

@media (max-width: 360px) {
    .dark-mode .admin-main {
        padding: 8px;
    }
    .dark-mode .card {
        padding: 12px;
    }
    .dark-mode .login-box {
        padding: 16px 12px;
    }
}

/* ===== User Layout ===== */
.dark-mode .page-header p {
    color: #999;
}

/* ===== Stats Grid (User) ===== */
.dark-mode .stat-card {
    border-color: #333;
}
.dark-mode .stat-card a,
.dark-mode a.stat-card {
    color: inherit;
}
.dark-mode .stat-value {
    color: #fff;
}
.dark-mode .stat-label {
    color: #ccc;
}

/* ===== Info List ===== */
.dark-mode .info-item {
    border-bottom-color: #222;
}
.dark-mode .info-label {
    color: #999;
}
.dark-mode .info-value {
    color: #e0e0e0;
}

/* ===== Resume Grid ===== */
.dark-mode .resume-card {
    border-color: #333;
}
.dark-mode .resume-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.dark-mode .resume-card-header h3 {
    color: #fff;
}
.dark-mode .resume-status {
    background: #2a2a3e;
    color: #aaa;
}
.dark-mode .resume-status.paid {
    background: rgba(47,125,79,0.15);
    color: #68d391;
}
.dark-mode .resume-card-body {
    color: #aaa;
}
.dark-mode .resume-card-actions {
    border-top-color: #2a2a3e;
}

/* ===== Empty State ===== */
.dark-mode .empty-state p {
    color: #999;
}

/* ===== Builder ===== */
.dark-mode .form-section {
    border-bottom-color: #2a2a3e;
}
.dark-mode .entry-item {
    border-color: #333;
}
.dark-mode .entry-header {
    color: #aaa;
}
.dark-mode .tag {
    background: #2a2a3e;
    border-color: #444;
    color: #ccc;
}
.dark-mode .tag-remove {
    color: #aaa;
}

/* ===== Template Select ===== */
.dark-mode .tpl-option {
    border-color: #444;
}
.dark-mode .tpl-option.selected,
.dark-mode .tpl-option:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

/* ===== Grammar Check ===== */
.dark-mode .check-error-item {
    background: rgba(197,48,48,0.08);
    border-color: rgba(197,48,48,0.2);
}
.dark-mode .check-error-original {
    background: #2a2a3e;
    border-color: #444;
    color: #e0e0e0;
}
.dark-mode .check-error-suggestion {
    background: rgba(47,125,79,0.12);
    border-color: rgba(47,125,79,0.25);
}
.dark-mode .check-error-reason {
    color: #999;
}
.dark-mode .check-no-errors {
    color: #68d391;
    background: rgba(47,125,79,0.12);
}
.dark-mode .check-score {
    color: #f6ad55;
}
.dark-mode .check-summary {
    background: rgba(37,99,235,0.12);
    border-color: rgba(37,99,235,0.25);
    color: #90cdf4;
}

/* ===== Preview Frame ===== */
.dark-mode .preview-frame {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .preview-name {
    color: #fff;
}
.dark-mode .preview-title {
    color: #bbb;
}
.dark-mode .preview-contact {
    color: #999;
    border-bottom-color: #333;
}
.dark-mode .preview-summary {
    color: #ccc;
}
.dark-mode .preview-section h4 {
    color: #fff;
    border-bottom-color: #fff;
}
.dark-mode .preview-item-period {
    color: #999;
}
.dark-mode .preview-item-sub {
    color: #bbb;
}
.dark-mode .preview-item-desc {
    color: #ccc;
}
.dark-mode .preview-skill {
    border-color: #444;
    color: #bbb;
}

/* ===== AI Section ===== */
.dark-mode .ai-section {
    border-top-color: #fff;
}

/* ===== Payment ===== */
.dark-mode .pay-method-btn {
    border-color: #444;
    background: #1e1e2e;
    color: #e0e0e0;
}
.dark-mode .pay-method-btn:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}
.dark-mode .pay-method-btn.selected {
    border-color: #fff;
    background: #2a2a3e;
    color: #fff;
}

/* ===== Badge ===== */
.dark-mode .badge-paid,
.dark-mode .badge-success {
    background: rgba(47,125,79,0.15);
    color: #68d391;
    border: 1px solid rgba(47,125,79,0.25);
}
.dark-mode .badge-pending {
    background: rgba(151,90,22,0.2);
    color: #f6ad55;
    border: 1px solid rgba(151,90,22,0.25);
}
.dark-mode .badge-cancelled {
    background: #2a2a3e;
    color: #999;
}

/* ===== Tables ===== */
.dark-mode .admin-table th {
    border-bottom-color: #fff;
    color: #ccc;
}
.dark-mode .admin-table td {
    border-bottom-color: #2a2a3e;
}

/* ===== Footer ===== */
.dark-mode .footer {
    color: #888;
    border-top-color: #333;
}

/* ===== Modal ===== */
.dark-mode .modal-box {
    background: var(--card);
}
.dark-mode .modal-header {
    border-bottom-color: var(--border);
}
.dark-mode .modal-header h2 {
    color: var(--text);
}
.dark-mode .modal-close {
    color: var(--text3);
}
.dark-mode .modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text);
}
.dark-mode .modal-body {
    color: var(--text2);
}
.dark-mode .modal-footer .btn {
    color: var(--text-inverse);
    background: var(--accent);
}
.dark-mode .announcement-dismiss-label {
    color: #999;
}

/* ===== Export Page ===== */
.dark-mode .format-select-btn {
    border-color: #444;
    background: #1e1e2e;
    color: #e0e0e0;
}
.dark-mode .format-select-btn:hover,
.dark-mode .format-select-btn.selected {
    border-color: #fff;
    background: #fff;
    color: #000;
}

/* ============================================
   首页 (index.php 内联样式覆盖)
   ============================================ */

/* ===== Hero ===== */
.dark-mode .hero::after {
    background: #fff;
}
.dark-mode .hero h1 {
    color: #fff;
}
.dark-mode .hero .highlight::after {
    background: #fff;
    opacity: 0.15;
}
.dark-mode .hero p {
    color: #bbb;
}
.dark-mode .hero-stat .num {
    color: #fff;
}
.dark-mode .hero-stat .label {
    color: #999;
}

/* ===== Features ===== */
.dark-mode .feature-card {
    border-color: #333;
}
.dark-mode .feature-card:hover {
    border-color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dark-mode .feature-card::before {
    background: #fff;
}
.dark-mode .feature-icon {
    background: #2a2a3e;
}
.dark-mode .feature-card:hover .feature-icon {
    background: #fff;
    color: #000;
}
.dark-mode .feature-card h3 {
    color: #fff;
}
.dark-mode .feature-card p {
    color: #999;
}

/* ===== How It Works ===== */
.dark-mode .how-wrap {
    background: #1a1a1a;
}
.dark-mode .step:not(:last-child)::after {
    background: #444;
}
.dark-mode .step-num {
    border-color: #fff;
    background: #1a1a1a;
}
.dark-mode .step:hover .step-num {
    background: #fff;
    color: #000;
}
.dark-mode .step h3 {
    color: #fff;
}
.dark-mode .step p {
    color: #999;
}

/* ===== Templates Showcase ===== */
.dark-mode .tpl-card {
    border-color: #333;
}
.dark-mode .tpl-card:hover {
    border-color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dark-mode .tpl-preview {
    background: #1e1e2e;
}
.dark-mode .tpl-recommend-badge {
    background: #fff;
    color: #000;
}
.dark-mode .tpl-info h4 {
    color: #fff;
}
.dark-mode .tpl-info p {
    color: #999;
}
.dark-mode .tpl-front-cat {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .tpl-filter-btn {
    border-color: #444;
    color: #ccc;
    background: transparent;
}
.dark-mode .tpl-filter-btn:hover {
    border-color: #fff;
}
.dark-mode .tpl-filter-btn.active {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* ===== Articles ===== */
.dark-mode .articles-wrap {
    background: #1a1a1a;
}
.dark-mode .article-card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .article-card:hover {
    border-color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dark-mode .article-card .cat {
    color: #999;
}
.dark-mode .article-card h3 a {
    color: #fff;
}
.dark-mode .article-card p {
    color: #999;
}
.dark-mode .article-card .meta {
    color: #777;
}
.dark-mode .article-empty {
    color: #999;
}

/* ===== FAQ ===== */
.dark-mode .faq-item {
    border-bottom-color: #333;
}
.dark-mode .faq-q {
    color: #e0e0e0;
}
.dark-mode .faq-q:hover {
    color: #fff;
}
.dark-mode .faq-q .arrow {
    color: #999;
}
.dark-mode .faq-a {
    color: #999;
}

/* ===== CTA ===== */
.dark-mode .cta {
    background: #1e1e2e;
}
.dark-mode .cta h2 {
    color: #fff;
}
.dark-mode .cta p {
    color: #bbb;
}
.dark-mode .cta .btn {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.dark-mode .cta .btn:hover {
    background: #ddd;
}

/* ===== Footer (Home) ===== */
.dark-mode .footer {
    background: #1a1a1a;
    border-top-color: #333;
}
.dark-mode .footer-brand p {
    color: #999;
}
.dark-mode .footer-col h4 {
    color: #fff;
}
.dark-mode .footer-col a {
    color: #888;
}
.dark-mode .footer-col a:hover {
    color: #fff;
}
.dark-mode .footer-bottom {
    border-top-color: #333;
    color: #777;
}

/* ============================================
   后台样式 (admin.css 覆盖)
   ============================================ */

/* ===== Admin Body ===== */
.dark-mode .admin-body {
    background: #121212;
}

/* ===== Admin Nav ===== */
.dark-mode .admin-nav {
    background: #1e1e2e;
    border-bottom-color: #333;
}
.dark-mode .admin-nav-links a {
    color: #aaa;
}
.dark-mode .admin-nav-links a:hover,
.dark-mode .admin-nav-links a.active {
    color: #fff;
}
.dark-mode .admin-user {
    color: #999;
}
.dark-mode .admin-hamburger span {
    background: #e0e0e0;
}

/* ===== Admin Sidebar ===== */
.dark-mode .admin-sidebar {
    background: #181825;
    border-right-color: #2a2a40;
}
.dark-mode .sidebar-group-label {
    color: #888;
}
.dark-mode .sidebar-group-label:hover {
    color: #ccc;
}
.dark-mode .sgl-icon { }
.dark-mode .sgl-text { }
.dark-mode .sidebar-group-arrow {
    color: #777;
}
.dark-mode .admin-sidebar .sidebar-group-items a {
    color: #aaa;
}
.dark-mode .admin-sidebar .sidebar-group-items a:hover {
    background: #252540;
    color: #e0e0e0;
}
.dark-mode .admin-sidebar .sidebar-group-items a.active {
    background: rgba(59,106,224,0.12);
    color: #7c9aff;
}
.dark-mode .si-icon { }

/* ===== Admin Stats ===== */
.dark-mode .stat-card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .stat-num {
    color: #fff;
}
.dark-mode .stat-tag {
    color: #999;
}

/* ===== Admin Content ===== */
.dark-mode .admin-content h1 {
    color: #fff;
}

/* ===== Admin Card ===== */
.dark-mode .card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .card h2 {
    color: #fff;
}

/* ===== Settings Tabs ===== */
.dark-mode .settings-tabs {
    border-bottom-color: #fff;
}
.dark-mode .settings-tab {
    color: #aaa;
}
.dark-mode .settings-tab:hover {
    color: #fff;
    background: #2a2a3e;
}
.dark-mode .settings-tab.active {
    color: #000;
    background: #fff;
    border-color: #fff;
}

/* ===== Statistics ===== */
.dark-mode .stat-item {
    background: #2a2a3e;
}
.dark-mode .stat-item.highlight-row {
    background: rgba(37,99,235,0.12);
}
.dark-mode .stat-label {
    color: #bbb;
}
.dark-mode .stat-value {
    color: #e0e0e0;
}
.dark-mode .chart-bar-fill {
    background: #fff;
}

/* ===== Template Ranking ===== */
.dark-mode .tpl-ranking-header {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .tpl-ranking-row {
    border-bottom-color: #2a2a3e;
}
.dark-mode .tpl-ranking-row:hover {
    background: #1a1a1a;
}
.dark-mode .tpl-ranking-row.top-rank {
    background: rgba(246,224,94,0.08);
}

/* ===== Funnel ===== */
.dark-mode .funnel-step {
    background: #fff;
    color: #000;
}

/* ===== Mini Table ===== */
.dark-mode .mini-table th {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .mini-table td {
    border-bottom-color: #2a2a3e;
}

/* ===== Template Admin ===== */
.dark-mode .tpl-admin-card {
    background: #1e1e2e;
    border-color: #333;
}
.dark-mode .tpl-admin-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.dark-mode .tpl-admin-preview {
    background: #2a2a3e;
    border-bottom-color: #333;
}
.dark-mode .tpl-no-preview {
    color: #666;
}
.dark-mode .tpl-admin-info h3 {
    color: #fff;
}
.dark-mode .tpl-category-tag {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .tpl-tag {
    background: #2a2a3e;
    border-color: #444;
    color: #aaa;
}
.dark-mode .tpl-desc {
    color: #999;
}
.dark-mode .tpl-stats {
    color: #888;
}

/* ===== Notifications ===== */
.dark-mode .notification-list {
    border-color: #333;
}
.dark-mode .notification-item {
    border-bottom-color: #2a2a3e;
}
.dark-mode .notification-item:hover {
    background: #1a1a1a;
}
.dark-mode .notification-item.unread {
    background: rgba(37,99,235,0.08);
}
.dark-mode .notification-message {
    color: #bbb;
}
.dark-mode .notification-time {
    color: #888;
}

/* ===== Admin Login ===== */
.dark-mode .admin-login {
    background: #121212;
}
.dark-mode .login-box {
    background: #1e1e2e;
}
.dark-mode .login-box h1 {
    color: #fff;
}
.dark-mode .login-desc {
    color: #999;
}

/* ===== User Group Badges ===== */
.dark-mode .group-free {
    background: #2a2a3e;
    color: #aaa;
}
.dark-mode .group-paid {
    background: rgba(47,125,79,0.15);
    color: #68d391;
    border-color: rgba(47,125,79,0.3);
}
.dark-mode .group-vip {
    background: rgba(246,224,94,0.12);
    color: #f6e05e;
    border-color: rgba(246,224,94,0.25);
}
.dark-mode .group-vip_secret {
    background: rgba(249,168,212,0.12);
    color: #f9a8d4;
    border-color: rgba(249,168,212,0.25);
}

/* ===== Form Labels ===== */
.dark-mode label,
.dark-mode .form-group label {
    color: #ccc !important;
}

/* ===== Pagination ===== */
.dark-mode .pagination a {
    background: transparent;
    border-color: #444;
    color: #ccc;
}
.dark-mode .pagination a.active,
.dark-mode .pagination a:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
}

/* ===== Article Content ===== */
.dark-mode .article-content {
    color: #ccc;
}
.dark-mode .article-content blockquote {
    background: #1e1e2e;
    border-left-color: #fff;
    color: #aaa;
}
.dark-mode .article-content pre {
    background: #1a1a1a;
}
.dark-mode .article-content code {
    background: #1a1a1a;
    color: #e0e0e0;
}
.dark-mode .article-content a {
    color: #90cdf4;
    text-decoration: none;
}
.dark-mode .article-content h2,
.dark-mode .article-content h3 {
    color: #fff;
}

/* ===== Sidebar ===== */
.dark-mode .sidebar-widget h3 {
    border-bottom-color: #fff !important;
}
.dark-mode .sidebar-widget ul li a {
    color: #aaa !important;
}
.dark-mode .sidebar-widget ul li a:hover,
.dark-mode .sidebar-widget ul li a.active {
    color: #fff !important;
}
.dark-mode .sidebar-cta {
    background: #1e1e2e !important;
}

/* ===== Article List ===== */
.dark-mode .article-filter-btn {
    border-color: #444;
    color: #ccc;
    background: transparent;
}
.dark-mode .article-filter-btn:hover {
    border-color: #fff;
}
.dark-mode .article-filter-btn.active {
    background: #fff;
    border-color: #fff;
    color: #000;
}
.dark-mode .article-list-item {
    border-bottom-color: #2a2a3e;
}
.dark-mode .article-list-body h2 a {
    color: #fff !important;
}
.dark-mode .article-list-body p {
    color: #999 !important;
}
.dark-mode .article-read-more {
    color: #90cdf4 !important;
}

/* ===== Help Page ===== */
.dark-mode .page-hero {
    background: #1a1a1a !important;
}
.dark-mode .page-hero h1 {
    color: #fff;
}
.dark-mode .page-hero p {
    color: #999;
}
.dark-mode .help-item {
    border-color: #333;
}
.dark-mode .help-item h4 {
    color: #fff;
}
.dark-mode .help-item p {
    color: #999 !important;
}
.dark-mode .help-content {
    color: #ccc !important;
}

/* ===== Builder Page ===== */
.dark-mode .builder-page .form-section h3 {
    color: #fff;
}
.dark-mode .builder-page .builder-header h2 {
    color: #fff;
}
.dark-mode .builder-page .builder-header-actions a {
    background: #2a2a3e !important;
    border-color: #444 !important;
    color: #ccc !important;
}
.dark-mode .builder-page .builder-header-actions a:hover {
    border-color: #fff !important;
    color: #fff !important;
}

/* ===== Mini Table ===== */
.dark-mode .mini-table th {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .mini-table td {
    border-bottom-color: #2a2a3e;
}

/* ===== Stat Grid ===== */
.dark-mode .stat-item {
    background: #2a2a3e;
}
.dark-mode .stat-item.highlight-row {
    background: rgba(37,99,235,0.12);
}
.dark-mode .stat-label {
    color: #bbb !important;
}
.dark-mode .stat-value {
    color: #e0e0e0 !important;
}

/* ===== Chart Bar ===== */
.dark-mode .chart-bar-fill {
    background: #fff;
}

/* ===== Funnel ===== */
.dark-mode .funnel-step {
    background: #fff;
    color: #000;
}

/* ===== Template Ranking ===== */
.dark-mode .tpl-ranking-header {
    background: #2a2a3e;
    color: #bbb;
}
.dark-mode .tpl-ranking-row {
    border-bottom-color: #2a2a3e;
}
.dark-mode .tpl-ranking-row:hover {
    background: #1a1a1a;
}
.dark-mode .tpl-ranking-row.top-rank {
    background: rgba(246,224,94,0.08);
}

/* ===== User Import Page ===== */
.dark-mode .import-section {
    border-color: #333;
}
.dark-mode .import-section h3 {
    color: #fff;
}
.dark-mode .import-hint {
    color: #999;
}

/* ===== Recharge / Payment Pages ===== */
.dark-mode .recharge-card {
    background: #1e1e2e !important;
    border-color: #333 !important;
}
.dark-mode .recharge-header p {
    color: #999 !important;
}
.dark-mode .current-balance {
    background: #2a2a3e !important;
}
.dark-mode .current-balance .label {
    color: #999 !important;
}
.dark-mode .current-balance .amount {
    color: #fff !important;
}
.dark-mode .amount-option {
    border-color: #444 !important;
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
}
.dark-mode .amount-option:hover {
    border-color: #fff !important;
}
.dark-mode .amount-option.selected {
    border-color: #fff !important;
    background: #2a2a3e !important;
}
.dark-mode .amount-option .unit {
    color: #999 !important;
}
.dark-mode .custom-amount label {
    color: #ccc !important;
}
.dark-mode .custom-amount input {
    background: #2a2a3e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
.dark-mode .custom-amount input:focus {
    border-color: #fff !important;
}
.dark-mode .no-pay-methods {
    color: #999 !important;
    background: #2a2a3e !important;
}

/* ===== Pay Box (Export) ===== */
.dark-mode .pay-card {
    background: #1e1e2e !important;
    border-color: #333 !important;
}
.dark-mode .pay-desc {
    color: #999 !important;
}
.dark-mode .pay-resume-title {
    color: #888 !important;
}
.dark-mode .pay-section-title {
    color: #ccc !important;
}

/* ===== Article Detail ===== */
.dark-mode .article-meta {
    color: #999 !important;
}

/* ===== Export Page ===== */
.dark-mode .export-card {
    background: #1e1e2e !important;
    border-color: #333 !important;
}
.dark-mode .export-card h2 {
    color: #fff;
}
.dark-mode .export-resume-info {
    color: #999;
}

/* ===== Template Status Badges ===== */
.dark-mode .tpl-status-badge {
    background: #9b2c2c;
    color: #fff;
}
.dark-mode .tpl-default-badge {
    background: #fff;
    color: #000;
}

/* ===== Funnel Arrow ===== */
.dark-mode .funnel-arrow {
    color: #555;
}

/* ===== Statistics Accent Colors ===== */
.dark-mode .accent-today {
    color: #fbbf24 !important;
}
.dark-mode .accent-dau {
    color: #60a5fa !important;
}
.dark-mode .accent-mau {
    color: #a78bfa !important;
}

/* ===== Chart Bar ===== */
.dark-mode .chart-bar-col {
    color: #888;
}

/* ===== Admin Detail Modal (AJAX HTML) ===== */
.dark-mode div[style*="background:#f8f8f8"] {
    background: #2a2a3e !important;
}
.dark-mode span[style*="background:#f5f5f5"] {
    background: #2a2a3e !important;
    color: #ccc !important;
}
.dark-mode div[style*="color:#555"] {
    color: #ccc !important;
}

/* ===== Inline Style Overrides ===== */
.dark-mode div[style*="background:#f0faff"] {
    background: rgba(59,130,246,0.1) !important;
}
.dark-mode div[style*="background:#f0faff"] div[style*="color:#2b6cb0"] {
    color: #60a5fa !important;
}
.dark-mode div[style*="background:#f0fff4"] {
    background: rgba(47,133,90,0.1) !important;
}
.dark-mode div[style*="background:#f0fff4"] div[style*="color:#2f855a"] {
    color: #68d391 !important;
}
.dark-mode div[style*="color:#666"] {
    color: #aaa !important;
}
.dark-mode hr[style*="border-top:1px solid #eee"] {
    border-top-color: #333 !important;
}
.dark-mode label[style*="color:#555"] {
    color: #ccc !important;
}
.dark-mode select[style*="border:1px solid #ddd"] {
    border-color: #444 !important;
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
}

/* ============================================
   办公工具 - 图片转矢量图 (user/office/vectorize.php)
   ============================================ */
.dark-mode .office-card {
    background: #1e1e2e; border-color: #333;
}
.dark-mode .office-card h2 { color: #fff; }
.dark-mode .office-card .card-desc { color: #999; }
.dark-mode .office-upload-zone {
    background: #1e1e2e; border-color: #444;
}
.dark-mode .office-upload-zone:hover { border-color: #fff; }
.dark-mode .office-upload-zone svg { color: #999; }
.dark-mode .office-upload-zone p { color: #ccc; }
.dark-mode .office-upload-zone .sub { color: #888; }
.dark-mode .office-label { color: #ccc; }
.dark-mode .office-submit { color: #fff; }
.dark-mode .office-download { color: #fff; }
/* 消息 */
.dark-mode .office-msg.success {
    background: rgba(47,125,79,0.15); color: #68d391;
    border-color: rgba(47,125,79,0.3);
}
.dark-mode .office-msg.error {
    background: rgba(197,48,48,0.15); color: #fc8181;
    border-color: rgba(197,48,48,0.3);
}
.dark-mode .office-msg.info {
    background: rgba(37,99,235,0.12); color: #90cdf4;
    border-color: rgba(37,99,235,0.25);
}
/* 格式/场景按钮 */
.dark-mode .vc-fmt-btn {
    background: #1e1e2e; border-color: #444; color: #ccc;
}
.dark-mode .vc-fmt-btn:hover { border-color: #fff; }
.dark-mode .vc-fmt-btn.selected {
    border-color: #fff; background: rgba(255,255,255,0.08); color: #fff;
}
.dark-mode .vc-scene-btn {
    background: #1e1e2e; border-color: #444; color: #bbb;
}
.dark-mode .vc-scene-btn:hover { border-color: #fff; }
.dark-mode .vc-scene-btn.selected {
    border-color: #fff; background: rgba(255,255,255,0.08); color: #fff;
}
/* 处理中状态 */
.dark-mode .processing-card h3 { color: #fff; }
.dark-mode .processing-card .proc-desc { color: #999; }
.dark-mode .processing-card .proc-hint { color: #777; }
.dark-mode .processing-card .spinner {
    border-color: #333; border-top-color: #fff;
}
/* 标签 */
.dark-mode .vc-tag.input {
    background: #2a2a3e; border-color: #444; color: #ccc;
}
.dark-mode .vc-tag.output {
    background: rgba(255,255,255,0.08); border-color: #fff; color: #fff;
}
/* 预览图 */
.dark-mode .preview-section .preview-img {
    border-color: #333; background: #1e1e2e;
}
/* 返回按钮 */
.dark-mode .m-back-btn {
    background: #1e1e2e; color: #999;
}
.dark-mode .m-back-btn:hover {
    background: #2a2a3e; color: #fff;
}

/* ============================================
   暗色模式切换按钮
   ============================================ */
.dark-mode-toggle {
    background: none;
    border: 1px solid #ddd;
    border-radius: 0;
    cursor: pointer;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #555;
    transition: all 0.2s;
    line-height: 1;
}
.dark-mode-toggle:hover {
    border-color: #000;
    color: #000;
}
.dark-mode .dark-mode-toggle {
    border-color: #444;
    color: #ccc;
}
.dark-mode .dark-mode-toggle:hover {
    border-color: #fff;
    color: #fff;
}

/* ===== Invitation Section (User Center) ===== */
.dark-mode .card label[style*="color:#888"] {
    color: #aaa !important;
}
.dark-mode input[readonly][style*="background:#f9f9f9"] {
    background: #2a2a3e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}
.dark-mode table tr[style*="border-bottom:1px solid #eee"] {
    border-bottom-color: #333 !important;
}
.dark-mode table tr[style*="border-bottom:1px solid #f5f5f5"] {
    border-bottom-color: #2a2a3e !important;
}
.dark-mode table th[style*="color:#888"] {
    color: #aaa !important;
}
.dark-mode .stat-card .stat-label {
    color: #ccc;
}
.dark-mode div[style*="border-top:1px solid #eee"] {
    border-top-color: #333 !important;
}
.dark-mode div[style*="color:#b8860b"] {
    color: #eab308 !important;
}