/* ============================================================
   dark-theme.css
   子页面统一暗色主题 — 与主站 style.css 变量完全对齐
   引用方式：<link rel="stylesheet" href="/dark-theme.css">
   ============================================================ */

/* ── 全局变量覆写（将各子页面的亮色变量映射到暗色系） ── */
:root {
    /* 基础背景 */
    --color-bg:             #080810;
    --color-white:          #0d0d1a;
    --bg:                   #080810;
    --white:                #0d0d1a;
    --color-text:           #eeeef5;
    --text:                 #eeeef5;
    --color-text-secondary: #7c7c96;
    --secondary:            #7c7c96;
    --color-border:         rgba(255,255,255,0.09);
    --border:               rgba(255,255,255,0.09);
    /* 强调色 */
    --color-blue:           #818cf8;
    --blue:                 #818cf8;
    --color-blue-light:     rgba(99,102,241,0.12);
    --blue-light:           rgba(99,102,241,0.12);
    --green:                #34d399;
    --orange:               #fbbf24;
    --purple:               #a78bfa;
    --red:                  #fb7185;
    --teal:                 #22d3ee;
    /* 字体 */
    --font: "SF Pro Display", -apple-system, BlinkMacSystemFont,
            "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ── body ── */
body {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* ── 导航 ── */
.nav, .navbar {
    background: rgba(8,8,16,0.82) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.navbar-brand, .nav-brand { color: #eeeef5 !important; }
.nav-link { color: #7c7c96 !important; }
.nav-link:hover, .nav-link.active { color: #eeeef5 !important; background: rgba(255,255,255,0.06) !important; }

/* ── 卡片 (tool-card / biz-card / card) ── */
.tool-card, .biz-card, .card {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    color: #eeeef5 !important;
}
.tool-card:hover, .biz-card:hover, .card:hover {
    border-color: rgba(99,102,241,0.38) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 32px rgba(99,102,241,0.1) !important;
    background: rgba(99,102,241,0.06) !important;
}
.tool-card h3, .biz-card h3, .card-title { color: #eeeef5 !important; }
.tool-card p,  .biz-card p,  .card-desc  { color: #7c7c96 !important; }

/* ── biz-logo ── */
.biz-logo {
    background: rgba(255,255,255,0.06) !important;
}

/* ── biz-arrow ── */
.biz-arrow { color: #45455a !important; }
.biz-card:hover .biz-arrow { color: #818cf8 !important; }

/* ── Section icon背景 ── */
.section-icon.personal { background: rgba(52,199,89,0.15) !important; }
.section-icon.business { background: rgba(99,102,241,0.15) !important; }

/* ── 卡片图标背景（亮色主题是浅灰，暗色换成半透明强调色） ── */
.tool-card-icon.green  { background: rgba(52,212,153,0.13)  !important; }
.tool-card-icon.blue   { background: rgba(99,102,241,0.13)  !important; }
.tool-card-icon.orange { background: rgba(251,191,36,0.13)  !important; }
.tool-card-icon.purple { background: rgba(167,139,250,0.13) !important; }
.card-icon.green  { background: rgba(52,212,153,0.13)  !important; }
.card-icon.blue   { background: rgba(99,102,241,0.13)  !important; }
.card-icon.orange { background: rgba(251,191,36,0.13)  !important; }
.card-icon.purple { background: rgba(167,139,250,0.13) !important; }
.card-icon.red    { background: rgba(251,113,133,0.13) !important; }
.card-icon.teal   { background: rgba(34,211,238,0.13)  !important; }
.card-icon.gray   { background: rgba(255,255,255,0.08) !important; }

/* ── 上传区（upload/index.php） ── */
.upload-section, .file-list-section {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
.upload-zone {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.upload-zone:hover, .upload-zone.drag-over {
    border-color: #818cf8 !important;
    background: rgba(99,102,241,0.06) !important;
}
.upload-zone h3 { color: #eeeef5 !important; }
.upload-zone p  { color: #7c7c96 !important; }
.upload-btn {
    background: linear-gradient(135deg, #6366f1, #818cf8) !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(99,102,241,0.35) !important;
}
.upload-btn:hover {
    background: linear-gradient(135deg, #818cf8, #a5b4fc) !important;
    box-shadow: 0 0 40px rgba(99,102,241,0.55) !important;
}
.btn-secondary {
    background: rgba(255,255,255,0.07) !important;
    color: #eeeef5 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12) !important; }

/* 进度条 */
.progress-bar { background: rgba(255,255,255,0.08) !important; }
.progress-fill { background: linear-gradient(90deg, #6366f1, #22d3ee) !important; }

/* 文件列表行 */
.file-item:hover { background: rgba(255,255,255,0.04) !important; }
.file-preview    { background: rgba(255,255,255,0.06) !important; }
.file-name       { color: #eeeef5 !important; }
.file-meta       { color: #7c7c96 !important; }

/* ── 弹窗 modal（sandbox） ── */
.modal {
    background: #0f0f1c !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.7) !important;
}
.modal-header {
    border-bottom-color: rgba(255,255,255,0.07) !important;
}
.modal-title { color: #eeeef5 !important; }
.modal-close {
    background: rgba(255,255,255,0.07) !important;
    color: #7c7c96 !important;
}
.modal-close:hover { background: rgba(255,255,255,0.12) !important; color: #eeeef5 !important; }
.modal-overlay { background: rgba(0,0,0,0.65) !important; }

/* textarea / input（弹窗内） */
.tool-area {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #eeeef5 !important;
    caret-color: #818cf8;
}
.tool-area:focus { border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; }
.tool-area::placeholder { color: rgba(255,255,255,0.2) !important; }

/* converter-row input/select */
.converter-row input, .converter-row select {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #eeeef5 !important;
}
.converter-row input:focus, .converter-row select:focus {
    border-color: #818cf8 !important;
}

/* result-box */
.result-box {
    background: rgba(255,255,255,0.04) !important;
    color: #eeeef5 !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}
.result-box.success { background: rgba(52,212,153,0.1) !important; color: #34d399 !important; border-color: rgba(52,212,153,0.2) !important; }
.result-box.error   { background: rgba(251,113,133,0.1) !important; color: #fb7185 !important; border-color: rgba(251,113,133,0.2) !important; }

/* md preview area */
#mdPreview { background: rgba(255,255,255,0.04) !important; color: #eeeef5 !important; }

/* color preview border */
.color-preview { border-color: rgba(255,255,255,0.1) !important; }

/* btn 内（sandbox） */
.btn-primary { background: #6366f1 !important; color: #fff !important; }
.btn-primary:hover { opacity: 0.85 !important; }

/* ── Hero 区域文字 ── */
.hero h1, .hero-tools h1 { color: #eeeef5 !important; }
.hero p,  .hero-tools p  { color: #7c7c96 !important; }
.hero-eyebrow { color: #34d399 !important; }
.eyebrow { color: #818cf8 !important; }
.stat-value { color: #eeeef5 !important; }
.stat-label { color: #7c7c96 !important; }

/* ── Footer ── */
.footer { color: #45455a !important; }

/* ── section-header h2 ── */
.section-header h2 { color: #eeeef5 !important; }

/* ── badge ── */
.badge-login { background: rgba(251,113,133,0.12) !important; color: #fb7185 !important; }
.badge-free  { background: rgba(52,212,153,0.12)  !important; color: #34d399 !important; }
.badge-sandbox { background: rgba(52,212,153,0.15) !important; color: #34d399 !important; }

/* ── logout btn ── */
.logout-btn {
    color: #7c7c96 !important;
    text-decoration: none;
    font-size: 13.5px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.logout-btn:hover { color: #fb7185 !important; background: rgba(251,113,133,0.08) !important; }