/* 德美AI — 夜间模式（v28）
 *
 * 整套规则都挂在 html[data-theme="dark"] 下，白天模式一条都不生效（不改任何现有观感）。
 * 分三层：
 *   1) 变量层 —— 覆盖 :root 里那套 token（页面内联 :root 会被这一层的更高优先级压掉）；
 *   2) 硬编码层 —— 各页/token 之外写死的浅色（#fff / #eee / #fafafa 这类）；
 *   3) 组件层 —— 顶栏、侧栏、卡片、输入框、搜索浮层、通知面板、标签、报表。
 * 加载位置：紧跟在 css/skills.css 之后、页面内联 <style> 之前。优先级靠选择器权重，不靠顺序。
 */

/* ===== 1. 变量 ===== */
html[data-theme="dark"] {
  color-scheme: dark;          /* 让浏览器原生控件（滚动条、日期选择器、select 弹出层）跟着走 */

  /* 主色在深底上要提亮一档，否则红字发黑 */
  --accent: #cf4b40;
  --accent-dark: #e2685d;      /* 深底里 hover 是「更亮」，不是更暗 */
  --accent-light: #b23c32;
  --accent-soft: rgba(207,75,64,.16);
  --accent-border: rgba(207,75,64,.32);

  --text-main: #e8e5e1;
  --text-dim: #aea9a4;
  --text-faint: #847e79;

  --border: #2d3038;
  --bg-soft: #202329;          /* 次级块：胶囊、代码框、meta 徽章 */
  --bg-card: #1b1d22;          /* 各页已经在用的 var(--bg-card, #fff)：卡片/表格/输入框 */
  --white: #1b1d22;            /* --white 在这个项目里语义是「表面色」，不是白色 */
}

/* ===== 2. 页面底座 ===== */
html[data-theme="dark"] body { background: #141519; }
html[data-theme="dark"] .bg { background: #141519; }
html[data-theme="dark"] .grain { opacity: .05; }

/* ===== 3. 顶栏 / 侧栏 / 导航 ===== */
html[data-theme="dark"] .topbar {
  background: rgba(20,21,25,.88);
  border-bottom-color: var(--border);
}
/* 品牌 logo 是裸图（无白圆底），深底上原红会发暗一档，轻微提亮让它站得住；
   只调亮度/饱和，不加任何背景或描边，避免又出现白边 */
html[data-theme="dark"] .topbar .nav-brand img {
  filter: brightness(1.14) saturate(1.06);
}
html[data-theme="dark"] .main-nav { background: var(--bg-soft); }
html[data-theme="dark"] .app-sidebar {
  background: linear-gradient(180deg, #191a1f 0%, #141519 100%);
}
html[data-theme="dark"] .news-dot { border-color: #191a1f; }
html[data-theme="dark"] .side-unhide,
html[data-theme="dark"] .news-hide { background: var(--bg-soft); }
html[data-theme="dark"] .side-unhide { box-shadow: 0 2px 12px rgba(0,0,0,.45); }

/* ===== 4. 卡片 / 面板 / 表单 ===== */
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .ctrl-item,
html[data-theme="dark"] .save-bar,
html[data-theme="dark"] .admin-nav a,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .input-row input,
html[data-theme="dark"] .batch-area { background: var(--bg-card); }

html[data-theme="dark"] .skill-card { box-shadow: 0 1px 4px rgba(0,0,0,.35); }
html[data-theme="dark"] .skill-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
html[data-theme="dark"] .admin-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.45); }
html[data-theme="dark"] .ctrl-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.4); }
html[data-theme="dark"] .save-btn:disabled { background: #3a3d44; color: #8d8883; }

/* ===== 5. 标签 / 状态色（深底上要提亮） ===== */
html[data-theme="dark"] .t-dyn   { background: rgba(207,75,64,.18);  color: #e8827a; }
html[data-theme="dark"] .t-case  { background: rgba(47,125,79,.24);  color: #74c194; }
html[data-theme="dark"] .t-tool  { background: rgba(63,107,143,.26); color: #86b8dd; }
html[data-theme="dark"] .t-skill { background: rgba(138,106,58,.26); color: #d3a86d; }
html[data-theme="dark"] .ctrl-item .ci-state.on {
  color: #5cc98a;
  background: rgba(92,201,138,.12);
  border-color: rgba(92,201,138,.28);
}
/* 技能管理里的「删除」小按钮：白天是白底红框，深底上会亮得像块灯，压成暗底浅红 */
html[data-theme="dark"] .ctrl-item .ci-del {
  background: #241b1a;
  border-color: #5a3430;
  color: #e2685d;
}
html[data-theme="dark"] .ctrl-item .ci-del:hover { background: #ab372f; color: #fff; border-color: #ab372f; }
html[data-theme="dark"] .save-msg { color: #5cc98a; }
html[data-theme="dark"] .login-err { background: rgba(207,75,64,.14); border-color: var(--accent-border); }

/* ===== 6. 顶栏里的浮层（通知铃铛 / 全站搜索，样式由 JS 注入） ===== */
html[data-theme="dark"] .bell-panel {
  background: #1f2127; border-color: var(--border);
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
html[data-theme="dark"] .bell-head {
  background: #1f2127; border-bottom-color: var(--border); color: var(--text-main);
}
html[data-theme="dark"] .bell-item { border-bottom-color: #262930; }
html[data-theme="dark"] .bell-item:hover { background: #262930; }
html[data-theme="dark"] .bell-item.unread { background: rgba(207,75,64,.10); }
html[data-theme="dark"] .bell-txt { color: var(--text-dim); }
html[data-theme="dark"] .bell-txt b { color: var(--text-main); }
html[data-theme="dark"] .bell-empty { color: var(--text-faint); }
html[data-theme="dark"] .bell-clear { color: var(--accent); }

html[data-theme="dark"] .ss-box { background: var(--bg-card); }
html[data-theme="dark"] .ss-panel {
  background: #1f2127; border-color: var(--border);
  box-shadow: 0 12px 34px rgba(0,0,0,.6);
}
html[data-theme="dark"] .ss-item { border-bottom-color: #262930; }
html[data-theme="dark"] .ss-item:hover { background: #262930; }
html[data-theme="dark"] .ss-foot { border-top-color: var(--border); }
html[data-theme="dark"] .ss-hint,
html[data-theme="dark"] .ss-empty { color: var(--text-faint); }
html[data-theme="dark"] .ss-panel mark { background: rgba(207,75,64,.30); color: #fff; }

/* ===== 7. 页面级硬编码（guide / admin-upload / case 等页内联样式里写死的浅色） ===== */
html[data-theme="dark"] .mod { background: var(--bg-card); }
html[data-theme="dark"] .mod:hover { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
html[data-theme="dark"] .cta { background: #7c2b25; }
html[data-theme="dark"] .guide-code { background: var(--bg-card); }
html[data-theme="dark"] .case-link.primary { background: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .an-table th { background: var(--bg-soft); }

/* 表单/文本框的占位符与自动填充（Chrome 会强行刷白底） */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--text-main); }
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-main);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
}

/* 少量在深底上会「糊成一团」的阴影/描边收一下 */
html[data-theme="dark"] .download-btn { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
html[data-theme="dark"] .login-btn:focus-visible,
html[data-theme="dark"] .mini-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
