/* =========================================
 * /translate/css/style_dark.css
 * 个性化助手 · 暗黑主题（跟随站点统一 body.dark-mode）
 * 2026-11-03
 *
 * 依赖：
 *   - /common/css/dark_mode.css（body.dark-mode + --dm-* / --lo-* 变量）
 *   - /common/js/dark_mode.js（切换 body.dark-mode + 绑定 .dm-toggle 按钮）
 *
 * 加载顺序：style.css → dark_mode.css → style_dark.css
 *   （本文件必须最后加载：翻译模块的深色规则要覆盖站点通用暗黑规则）
 * ========================================= */

body.dark-mode {
    /* 让浏览器原生控件（滚动条 / select 下拉 / 复选框）也走深色 */
    color-scheme: dark;

    /* 主题变量重映射（与 style.css 的 :root 变量一一对应） */
    --t-primary:      #8b9bff;
    --t-primary-dark: #6f80f5;
    --t-accent:       #ff7f7f;
    --t-bg:           #0b1220;
    --t-card:         #151e30;
    --t-text:         #e8edf7;
    --t-muted:        #93a0b8;
    --t-border:       #2b3852;
    --t-success:      #4ade80;
    --t-warn:         #fbbf24;
    --t-danger:       #f87171;
    --t-shadow:       0 6px 22px rgba(0, 0, 0, 0.45);

    /* 覆盖站点通用的 --dm-bg（深蓝灰），本页用更纯粹的深色底 */
    background: var(--t-bg);
    color: var(--t-text);
}

/* 页面容器铺满，避免底部露出 body 白底 */
body.dark-mode .t-page {
    min-height: 100vh;
    background: var(--t-bg);
}

/* ---------- 头部 ---------- */
body.dark-mode .t-header {
    /* 深色底上把渐变压暗一点，避免大面积高亮刺眼 */
    background: linear-gradient(135deg, #3f4fc0 0%, #6b46c9 50%, #b03f63 100%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
body.dark-mode .t-header__bg {
    background: radial-gradient(800px 200px at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
                radial-gradient(600px 200px at 80% 80%, rgba(255, 255, 255, 0.08), transparent 60%);
}
/* 站点通用规则 body.dark-mode a 会把链接染成蓝色，这里锁回白色 */
body.dark-mode .t-header__login-tip a,
body.dark-mode .t-header__login-tip a:hover {
    color: #fff;
}

/* ---------- 头部主题切换按钮 ---------- */
body.dark-mode .t-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-top: 14px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}
body.dark-mode .t-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.55);
}

/* ---------- 卡片 ---------- */
body.dark-mode .t-card {
    background: var(--t-card);
    box-shadow: var(--t-shadow);
}
body.dark-mode .t-card__head {
    border-bottom-color: var(--t-border);
}

/* ---------- 摘要卡 / 快速选角色 ---------- */
body.dark-mode .t-summary {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.13) 0%, rgba(168, 85, 247, 0.10) 100%);
    border-color: rgba(96, 165, 250, 0.28);
}
body.dark-mode .t-quick {
    background: var(--t-card);
    border-top-color: rgba(96, 165, 250, 0.22);
}

/* ---------- 表单控件 ---------- */
/* 注意：这里必须用 background-color 而不是 background 简写。
   .t-input 被 select 复用（.t-input--inline / .t-quick__select），
   简写会把 background-repeat/position/size 重置成初始值
   → 下拉箭头 SVG 会在整个控件里平铺，文字完全看不见。 */
body.dark-mode .t-input,
body.dark-mode .t-textarea {
    background-color: #0f1829;
    border-color: var(--t-border);
    color: var(--t-text);
}
body.dark-mode .t-input:focus,
body.dark-mode .t-textarea:focus {
    background-color: #131d31;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px rgba(139, 155, 255, 0.16);
}
body.dark-mode .t-input::placeholder,
body.dark-mode .t-textarea::placeholder {
    color: #7b8aa5;
    opacity: 1;
}

/* select：下拉箭头换成浅色，选项背景也跟着走深色 */
body.dark-mode .t-input--inline,
body.dark-mode .t-quick__select,
body.dark-mode #t-preset-select {
    background-color: #131d31;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23cbd5e1' d='M6 8L0 0h12z'/></svg>");
    border-color: var(--t-border);
    color: var(--t-text);
}
/* 箭头只出现在右侧一次（显式重置，不依赖浅色规则的 longhand 是否存活） */
body.dark-mode .t-input--inline {
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}
body.dark-mode .t-quick__select,
body.dark-mode #t-preset-select {
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}
body.dark-mode .t-quick__select:hover,
body.dark-mode .t-input--inline:hover {
    border-color: var(--t-primary);
}
body.dark-mode select option {
    background-color: #131d31;
    color: var(--t-text);
}

/* ---------- 按钮 ---------- */
body.dark-mode .t-btn {
    background: #1b2537;
    border-color: var(--t-border);
    color: var(--t-text);
}
body.dark-mode .t-btn:hover {
    background: #26324a;
    border-color: var(--t-primary);
}
body.dark-mode .t-btn--primary {
    background: linear-gradient(135deg, var(--t-primary), #a855f7);
    color: #fff;
    border-color: transparent;
}
body.dark-mode .t-btn--primary:hover {
    background: linear-gradient(135deg, var(--t-primary-dark), #9333ea);
}
body.dark-mode .t-btn--ghost {
    background: #1b2537;
}

/* ---------- 状态条 ---------- */
body.dark-mode .t-status {
    background: #1b2537;
    color: var(--t-muted);
}
body.dark-mode .t-status--ok   { background: rgba(74, 222, 128, 0.14); color: var(--t-success); }
body.dark-mode .t-status--err  { background: rgba(248, 113, 113, 0.14); color: var(--t-danger); }
body.dark-mode .t-status--warn { background: rgba(251, 191, 36, 0.14); color: var(--t-warn); }

/* ---------- 结果区 ---------- */
body.dark-mode .t-reply {
    background: #0f1829;
    border-color: var(--t-border);
    color: var(--t-text);
}
body.dark-mode .t-reply[data-empty="1"],
body.dark-mode .t-reply__placeholder {
    color: var(--t-muted);
}
body.dark-mode .t-reply code {
    background: rgba(255, 255, 255, 0.09);
    color: #c7d2fe;
}
body.dark-mode .t-reply pre {
    background: #0a1120;
    border: 1px solid var(--t-border);
    color: #dbe3f0;
}
body.dark-mode .t-reply blockquote {
    border-left-color: var(--t-primary);
    color: var(--t-muted);
}
body.dark-mode .t-reply a {
    color: var(--t-primary);
}

/* ---------- 弹层 ---------- */
body.dark-mode .t-modal__mask {
    background: rgba(3, 6, 14, 0.72);
}
body.dark-mode .t-modal__box {
    background: #141d2e;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6);
}
body.dark-mode .t-modal__close:hover {
    color: var(--t-text);
}

/* ---------- 角色预设（v2 遗留样式） ---------- */
body.dark-mode .t-presets {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.10) 0%, rgba(168, 85, 247, 0.10) 100%);
    border-color: rgba(96, 165, 250, 0.32);
}
body.dark-mode .t-preset {
    background: #1b2537;
    color: var(--t-text);
}
body.dark-mode .t-preset:hover {
    background: #26324a;
}

/* ---------- 高级选项折叠区 ---------- */
body.dark-mode .t-grid--advanced {
    background: #0f1829;
    border-color: var(--t-border);
}
body.dark-mode .t-advanced {
    border-top-color: var(--t-border);
}