/* ============================================================
   JennyEngine X — 主题系统（双模式，2026-08-07 定稿）

   设计原则（与用户对齐）：
   - 网站调性 = monochrome（黑白灰）。所有表面（导航/卡片/正文/边框）
     永远是中性灰，不出现预设彩色主题。
   - 颜色只出现在「强调元素」上：按钮、链接、聚焦框、选中底。
     强调色固定为石墨（近黑），与 monochrome 调性一致；自定义色板已移除。
   - 两个阅读模式手工精调：白天 html[data-mode="light"]（默认），
     黑夜 html[data-mode="dark"]（Kimi/GitHub-dark 式暗色分层）。

   存储（localStorage，纯前端，按浏览器生效）：
     je-mode: light | dark（缺省 light）

   浅色模式镀铬明度 13.3%/20%/26.7% 精确等于 #222/#333/#444（用户指定）。
   ============================================================ */

/* ---------------- 默认强调色分量（石墨） ---------------- */
:root {
    --je-h: 0;
    --je-s: 0%;
    --je-al: 11%;
}
/* 默认强调色 = 石墨；固定不变，无需 JS 注入 */

/* ---------------- 白天（默认） ---------------- */
:root,
html[data-mode="light"] {
    /* 强调色（填充面 + 文字形态） */
    --je-primary: hsl(var(--je-h) var(--je-s) var(--je-al));
    --je-primary-fg: var(--je-primary);
    --je-primary-600: color-mix(in hsl, var(--je-primary), #000 16%);
    --je-primary-700: color-mix(in hsl, var(--je-primary), #000 32%);
    --je-accent: var(--je-primary);
    --je-accent-hover: color-mix(in hsl, var(--je-primary), #fff 18%);
    --je-on-accent: #ffffff;
    --je-grad: linear-gradient(135deg,
        color-mix(in hsl, var(--je-primary), #fff 14%) 0%,
        color-mix(in hsl, var(--je-primary), #000 30%) 100%);
    --je-focus-ring: color-mix(in srgb, var(--je-primary), transparent 82%);
    --je-active-bg: #e6f2ff; /* 兜底：不支持 color-mix 的浏览器（部分手机）用纯色，避免气泡变透明看不见 */
    --je-active-bg: color-mix(in srgb, var(--je-primary), #ffffff 88%);

    /* 导航 / 页头 / 页脚（中性深灰镀铬；= 精确 #222/#333/#444） */
    --je-nav-bg: hsl(0 0% 13.3%);
    --je-nav-fg: #ffffff;
    --je-nav-hover: hsl(0 0% 26.7%);
    --je-header-bg: hsl(0 0% 20%);
    --je-header-fg: #ffffff;
    --je-shadow-color: hsl(0 0% 26.7%);

    /* 内容区表面（中性） */
    --je-body-bg: hsl(0 0% 95.7%);
    --je-card-bg: #ffffff;
    --je-soft: hsl(0 0% 96.5%);
    --je-border: hsl(0 0% 86%);
    --je-ink: hsl(0 0% 16%);
    --je-muted: hsl(0 0% 44%);
    --je-heading: hsl(0 0% 20%);

    /* 品牌区（登录页左侧深色渐变） */
    --je-hero-grad: linear-gradient(135deg, hsl(0 0% 24%) 0%, hsl(0 0% 11%) 100%);
    --je-hero-fg: #ffffff;
    --je-hero-overlay-bg: rgba(255, 255, 255, 0.12);
    --je-hero-overlay-border: rgba(255, 255, 255, 0.18);
    --je-hero-deco: rgba(255, 255, 255, 0.08);

    /* 页面背景 / 阴影 / 遮罩 */
    --je-bg: linear-gradient(135deg, hsl(0 0% 95%) 0%, #ffffff 100%);
    --je-shadow: 0 20px 50px rgba(17, 24, 39, 0.14);
    --je-shadow-sm: 0 8px 20px rgba(17, 24, 39, 0.12);
    --je-overlay: rgba(23, 23, 23, 0.55);

    /* 下拉浮层 */
    --je-dropdown-bg: #ffffff;
    --je-dropdown-fg: var(--je-ink);
    --je-dropdown-hover: var(--je-soft);

    /* 兼容桥：tt/chat/留言板/用户管理页使用的旧变量名 */
    --card-bg: var(--je-card-bg);
    --text: var(--je-ink);
    --input-bg: var(--je-soft);
}

/* ---------------- 黑夜（monochrome，Kimi/GitHub-dark 式分层） ---------------- */
html[data-mode="dark"] {
    /* 强调色默认 = 微抬升深色面 + 近白文字（不做反白大色块） */
    --je-primary: hsl(0 0% 24%);
    --je-primary-fg: hsl(0 0% 88%);
    --je-primary-600: hsl(0 0% 30%);
    --je-primary-700: hsl(0 0% 17%);
    --je-accent: var(--je-primary);
    --je-accent-hover: hsl(0 0% 30%);
    --je-on-accent: hsl(0 0% 96%);
    --je-grad: linear-gradient(135deg, hsl(0 0% 30%) 0%, hsl(0 0% 18%) 100%);
    --je-focus-ring: rgba(255, 255, 255, 0.25);
    --je-active-bg: hsl(0 0% 19%);

    /* 导航 / 页头 / 页脚（比内容区更暗） */
    --je-nav-bg: hsl(0 0% 9%);
    --je-nav-fg: hsl(0 0% 92%);
    --je-nav-hover: hsl(0 0% 20%);
    --je-header-bg: hsl(0 0% 13%);
    --je-header-fg: hsl(0 0% 92%);
    --je-shadow-color: #000000;

    /* 内容区表面（暗底亮字，四级明度分层） */
    --je-body-bg: hsl(0 0% 7.5%);
    --je-card-bg: hsl(0 0% 11.5%);
    --je-soft: hsl(0 0% 16%);
    --je-border: hsl(0 0% 24%);
    --je-ink: hsl(0 0% 92%);
    --je-muted: hsl(0 0% 62%);
    --je-heading: hsl(0 0% 92%);

    /* 品牌区 */
    --je-hero-grad: linear-gradient(135deg, hsl(0 0% 16%) 0%, hsl(0 0% 8%) 100%);
    --je-hero-fg: #ffffff;
    --je-hero-overlay-bg: rgba(255, 255, 255, 0.08);
    --je-hero-overlay-border: rgba(255, 255, 255, 0.14);
    --je-hero-deco: rgba(255, 255, 255, 0.05);

    /* 页面背景 / 阴影 / 遮罩 */
    --je-bg: linear-gradient(135deg, hsl(0 0% 9%) 0%, hsl(0 0% 12%) 100%);
    --je-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    --je-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.45);
    --je-overlay: rgba(0, 0, 0, 0.6);

    /* 下拉浮层 */
    --je-dropdown-bg: hsl(0 0% 16%);
    --je-dropdown-fg: var(--je-ink);
    --je-dropdown-hover: hsl(0 0% 22%);

    /* 兼容桥 */
    --card-bg: var(--je-card-bg);
    --text: var(--je-ink);
    --input-bg: var(--je-soft);
}

/* ============================================================
   主题控件：明暗滑动开关（仅此一项；自定义色板已移除）
   内部页挂在 _nav.html，登录/找回/提示页挂在 auth-page。
   ============================================================ */
.theme-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px;
    height: 45px;
}

/* ---------- 明暗滑动开关：白底黑钮(白天) / 黑底白钮(黑夜) 字面即日/夜 ---------- */
.mode-toggle {
    position: relative;
    width: 54px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--je-border, #d9d9d9);
    border-radius: 999px;
    background: #ffffff;                 /* 白天：白底 */
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.mode-toggle svg {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    transition: color 0.25s ease;
    pointer-events: none;
}
/* 露在滑块外的图标与滑块同色：白天黑月亮，黑夜白太阳；被盖住的一侧仅占位 */
.mode-toggle .mt-sun  { left: 7px;  color: #1a1a1a; }
.mode-toggle .mt-moon { right: 7px; color: #1a1a1a; }   /* 白天露出的黑月亮 */
html[data-mode="dark"] .mode-toggle {
    background: #121212;                 /* 黑夜：黑底 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);   /* 单加亮环：抗锯齿，避免在圆角处出现锯齿 */
}
html[data-mode="dark"] .mode-toggle .mt-sun  { color: #ffffff; }   /* 黑夜露出的白太阳 */
html[data-mode="dark"] .mode-toggle .mt-moon { color: #ffffff; }
.mode-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a1a1a;                 /* 白天：黑钮 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease; /* 回弹滑动 */
    pointer-events: none;
}
html[data-mode="dark"] .mode-thumb {
    transform: translateX(26px);
    background: #ffffff;                 /* 黑夜：白钮 */
}
.mode-toggle:focus-visible {
    outline: 2px solid var(--je-primary-fg);
    outline-offset: 2px;
}

/* ---------- 登录/找回/提示页：浮动在右上角 ---------- */
body.auth-page .theme-picker {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 50;
    height: auto;
    margin: 0;
    padding: 8px;
    background: var(--je-card-bg, #fff);
    border: 1px solid var(--je-border, #d1d5db);
    border-radius: 14px;
    box-shadow: var(--je-shadow-sm);
}