/* dark-mode.css - 深色模式主题样式 */
/* 基于系统偏好自动切换，支持手动切换 */

/* ====== CSS 变量定义 ====== */
:root {
    /* 浅色主题（默认） */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f0f0;
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-tertiary: #718096;
    --text-muted: #a0aec0;
    --border-color: #e2e8f0;
    --border-light: #e8e8e8;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --card-bg: #ffffff;
    --input-bg: #fafbfc;
    --hover-bg: #f7fafc;
    --code-bg: #f8f9fa;
    --badge-bg: #e2e8f0;
    --toast-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --skeleton-base: #f0f0f0;
    --skeleton-highlight: #e0e0e0;
}

/* 深色主题 */
[data-theme="dark"] {
    --bg-primary: #1a202c;
    --bg-secondary: #2d3748;
    --bg-tertiary: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e0;
    --text-muted: #718096;
    --border-color: #4a5568;
    --border-light: #2d3748;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --card-bg: #2d3748;
    --input-bg: #4a5568;
    --hover-bg: #4a5568;
    --code-bg: #1a202c;
    --badge-bg: #4a5568;
    --toast-bg: #2d3748;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --skeleton-base: #4a5568;
    --skeleton-highlight: #2d3748;
}

/* ====== 基础样式 ====== */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .card {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* ====== 导航栏 ====== */
[data-theme="dark"] .navbar {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .navbar-brand {
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-nav a {
    color: var(--text-secondary);
}

[data-theme="dark"] .navbar-nav a:hover {
    color: var(--text-primary);
}

/* ====== 按钮 ====== */
[data-theme="dark"] .btn {
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-outline:hover {
    border-color: #07C160;
    color: #07C160;
}

/* ====== 表单 ====== */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--bg-secondary);
    border-color: #07C160;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

/* ====== 卡片 ====== */
[data-theme="dark"] .points-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .package-card,
[data-theme="dark"] .action-card {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .mode-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%);
    border-color: var(--border-color);
}

[data-theme="dark"] .mode-features {
    background: var(--bg-tertiary);
}

/* ====== 表格 ====== */
[data-theme="dark"] table {
    background: var(--card-bg);
}

[data-theme="dark"] th {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] td {
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] tr:hover {
    background: var(--hover-bg);
}

/* ====== 列表 ====== */
[data-theme="dark"] .history-list,
[data-theme="dark"] .list-group {
    background: var(--card-bg);
}

[data-theme="dark"] .list-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .list-item:hover {
    background: var(--hover-bg);
}

/* ====== 模态框 ====== */
[data-theme="dark"] .modal-content {
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* ====== Toast ====== */
[data-theme="dark"] .toast {
    background: var(--toast-bg);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .toast-title {
    color: var(--text-primary);
}

[data-theme="dark"] .toast-message {
    color: var(--text-secondary);
}

[data-theme="dark"] .toast-actions {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .toast-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ====== 骨架屏 ====== */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 75%
    );
}

[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skeleton-stat {
    background: var(--card-bg);
}

[data-theme="dark"] .workspace-skeleton .word-item-skeleton {
    background: #2a1a1a;
    border-left-color: #fc8181;
}

/* ====== 徽章/标签 ====== */
[data-theme="dark"] .badge {
    background: var(--badge-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .badge-success {
    background: rgba(7, 193, 96, 0.2);
    color: #68d391;
}

[data-theme="dark"] .badge-danger {
    background: rgba(220, 53, 69, 0.2);
    color: #fc8181;
}

[data-theme="dark"] .badge-warning {
    background: rgba(255, 193, 7, 0.2);
    color: #fcd34d;
}

/* ====== 代码块 ====== */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--code-bg);
    color: var(--text-secondary);
}

/* ====== 链接 ====== */
[data-theme="dark"] a {
    color: #68d391;
}

[data-theme="dark"] a:hover {
    color: #4fd1c5;
}

/* ====== 分割线 ====== */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* ====== 进度条 ====== */
[data-theme="dark"] .progress-bar {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .progress-fill {
    background: linear-gradient(135deg, #07C160, #06a852);
}

/* ====== 主题切换按钮 ====== */
.theme-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 9999;
}

.theme-switcher:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.theme-switcher::before {
    content: '🌙';
}

[data-theme="dark"] .theme-switcher::before {
    content: '☀️';
}

/* ====== 响应式 ====== */
@media (max-width: 768px) {
    .theme-switcher {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
}

/* ====== 过渡动画 ====== */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ====== 打印样式 ====== */
@media print {
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --text-primary: #000000;
    }
    
    .theme-switcher {
        display: none !important;
    }
}

/* ====== 系统偏好自动检测 ====== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1a202c;
        --bg-secondary: #2d3748;
        --bg-tertiary: #4a5568;
        --text-primary: #f7fafc;
        --text-secondary: #e2e8f0;
        --text-tertiary: #cbd5e0;
        --text-muted: #718096;
        --border-color: #4a5568;
        --border-light: #2d3748;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
        --card-bg: #2d3748;
        --input-bg: #4a5568;
        --hover-bg: #4a5568;
        --code-bg: #1a202c;
        --badge-bg: #4a5568;
        --toast-bg: #2d3748;
        --modal-overlay: rgba(0, 0, 0, 0.7);
        --skeleton-base: #4a5568;
        --skeleton-highlight: #2d3748;
    }
}

/* ====== 特殊元素 ====== */
[data-theme="dark"] .current-points {
    background: rgba(7, 193, 96, 0.15);
    border-color: #07C160;
}

[data-theme="dark"] .cost-preview {
    background: rgba(255, 193, 7, 0.15);
    border-color: #ffc107;
    color: #fcd34d;
}

[data-theme="dark"] .word-item {
    background: #2a1a1a;
    border-left-color: #fc8181;
}

[data-theme="dark"] .safe-msg {
    color: #68d391;
}

[data-theme="dark"] .compliance-report {
    background: var(--bg-secondary);
}

/* ====== 页脚 ====== */
[data-theme="dark"] footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-color);
    color: var(--text-tertiary);
}

/* ====== Hero 区域 ====== */
[data-theme="dark"] .hero {
    background: var(--card-bg);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .hero-content h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .hero-content p {
    color: var(--text-secondary);
}

/* ====== 定价页 ====== */
[data-theme="dark"] .pricing-hero {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .package-card.recommended {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(7, 193, 96, 0.1) 100%);
}