/* =========================================================
   Ananke 明暗主题（护眼 Dark） & Markdown UI 增强（最终版）
   - 系统自动 + 手动切换（data-theme）
   - 护眼 Dark：深灰背景 + 柔和灰白 + 轻蓝强调
   - 表格/代码块/分隔线/引用块统一
   - 防止横向滚动（表格/代码块内部滚动）
   ========================================================= */

/* 无障碍隐藏文本 */
.visually-hidden {
  position:absolute!important; height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ========== Light 默认（兜底） ========== */
:root {
  --bg: #ffffff;            /* 页面背景 */
  --fg: #1f2937;            /* 主文字（灰800） */
  --subtle: #6b7280;        /* 次级文字（灰500） */
  --muted: #f9fafb;         /* 弱背景（灰50） */
  --surface: #ffffff;       /* 卡片/表格/代码块表面 */
  --border: rgba(17,24,39,.10);
  --shadow: rgba(0,0,0,.05);

  --brand: #2563eb;         /* 品牌蓝（Tailwind blue-600） */
  --brand-hover: #1e40af;   /* blue-900 */

  --code-bg: #f3f4f6;       /* 灰100 */
  --code-fg: #111827;       /* 灰900 */

  --table-head-bg: #f3f4f6; /* 比 surface 稍暗形成层次 */
  --table-row-alt: #f9fafb;
  --table-hover: #eef2ff;   /* 淡蓝 hover */

  --hr: rgba(0,0,0,.06);
}

/* ========== 系统暗色自动（未强制 light 时） ========== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;          /* GitHub Dark 背景 */
    --fg: #e6edf3;          /* 柔和灰白 */
    --subtle: #9aa0a6;
    --muted: #161b22;       /* 条带/卡片弱背景 */
    --surface: #0f141a;     /* 表面层 */
    --border: rgba(255,255,255,.10);
    --shadow: rgba(0,0,0,.6);

    --brand: #58a6ff;       /* 轻蓝强调 */
    --brand-hover: #79c0ff;

    --code-bg: #161b22;
    --code-fg: #c9d1d9;

    --table-head-bg: #161b22;
    --table-row-alt: #0d1117;
    --table-hover: #1c2128;

    --hr: rgba(255,255,255,.08);
  }
}

/* ========== 手动覆盖 ========== */
:root[data-theme="dark"] {
  --bg: #0d1117;
  --fg: #e6edf3;
  --subtle: #9aa0a6;
  --muted: #161b22;
  --surface: #0f141a;
  --border: rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.6);

  --brand: #58a6ff;
  --brand-hover: #79c0ff;

  --code-bg: #161b22;
  --code-fg: #c9d1d9;

  --table-head-bg: #161b22;
  --table-row-alt: #0d1117;
  --table-hover: #1c2128;

  --hr: rgba(255,255,255,.08);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --fg: #1f2937;
  --subtle: #6b7280;
  --muted: #f9fafb;
  --surface: #ffffff;
  --border: rgba(17,24,39,.10);
  --shadow: rgba(0,0,0,.05);

  --brand: #2563eb;
  --brand-hover: #1e40af;

  --code-bg: #f3f4f6;
  --code-fg: #111827;

  --table-head-bg: #f3f4f6;
  --table-row-alt: #f9fafb;
  --table-hover: #eef2ff;

  --hr: rgba(0,0,0,.06);
}

/* ========== 全局基础 & 防横向滚动 ========== */
html, body {
  background: var(--bg);
  color: var(--fg);
  max-width: 100%;
  overflow-x: hidden; /* 🔒 防止页面横向滚动 */
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* 链接（护眼蓝） */
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { color: var(--brand-hover); }

/* 文章正文：断行与横溢出保护 */
article {
  word-wrap: break-word;
  word-break: break-word;
  overflow-x: hidden;
}

/* 分隔线（非常浅） */
article hr {
  border: none;
  height: 1px;
  margin: 1.5rem 0;
  background: var(--hr);
}

/* 引用块 */
article blockquote {
  background: var(--muted);
  border-left: 4px solid var(--brand);
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  color: var(--fg);
  border-radius: 6px;
}

/* 代码块 / Chroma */
article pre, .chroma {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: 8px;
  overflow: auto;
  padding: 1rem;
  box-shadow: 0 0 0 1px var(--border);
  max-width: 100%;
}
article code, article pre code { color: var(--code-fg); }
.chroma .hl { background-color: rgba(255, 230, 150, .25); }
.chroma .ln { opacity: .7; }

/* 图片与图注 */
article img {
  max-width: 100%; height: auto; display: block; margin: 1rem auto;
}
article figure { margin: 1.25rem 0; }
article figcaption { color: var(--subtle); font-size: .9rem; margin-top: .35rem; text-align: center; }

/* 表格（内部滚动；与表面色统一） */
article :where(table) {
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem; line-height: 1.6;
  border-radius: 10px; overflow: hidden;
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
article :where(th) {
  text-align: left; font-weight: 600;
  background: var(--table-head-bg);
  color: var(--fg);
  padding: .75em 1em; border-bottom: 1px solid var(--border);
}
article :where(td) {
  padding: .75em 1em; border-bottom: 1px solid var(--border); color: var(--fg);
}
article :where(tbody tr:nth-child(even)) { background: var(--table-row-alt); }
article :where(tbody tr:hover)           { background: var(--table-hover); }
article :where(th[align="center"], td[align="center"]) { text-align: center; }
article :where(th[align="right"],  td[align="right"])  { text-align: right;  }

@media (max-width: 640px) {
  article :where(table) { font-size: 0.92rem; }
  article :where(th, td) { padding: .65em .8em; }
}

/* 防止其他内容溢出横滚 */
article pre, article code, article blockquote, article img, article table {
  max-width: 100%; box-sizing: border-box;
}

/* 顶部/底部适配 */
header, footer {
  background: var(--bg); color: var(--fg);
  transition: background-color .25s ease, color .25s ease;
}

/* Light 模式下 */
.header-bg { background-color: #ffffff !important; }
.theme-bg { background-color: var(--bg); color: var(--fg); }

/* Dark 模式下 */
:root[data-theme="dark"] .header-bg {
  background-color: #0d1117 !important;
}
:root[data-theme="dark"] .theme-bg {
  background-color: #0d1117;
  color: #e6edf3;
}