/* =========================================================================
   DOC-THEME —— 制度/流程文档页（pages/001–020）统一主题层
   目标：把这些自带内嵌 <style> 的文档页，在配色 / 字体 / 圆角 / 交互反馈上
   统一到主页（index.php + assets/css/style.css）的设计语言。

   加载方式：在每个页面 <head> 内、其内嵌 <style> 之后引入本文件，
   凭「后加载」在同等优先级下覆盖内嵌样式。
   兼容两套令牌词汇：
     · 001–019：--bg / --line / --ink / --gray / --gray-2 / --navy
     · 020    ：--paper / --bg-tint / --body / --line / --line-dark / --ink
                --gray / --gray-lt / --navy / --red / --amber / --green
   页面未使用到的令牌在该页自然失效，互不影响。
   ========================================================================= */

/* ── 亮色：主色由深藏青统一为主页 Fluent 蓝，并补齐辅助令牌 ── */
:root{
  --navy:#0078D4;
  --blue:#0078D4;
  --blue-dark:#005A9E;
  --blue-pale:#EFF6FC;
  --blue-glow:rgba(0,120,212,0.14);
  --blue-gradient:linear-gradient(135deg,#0F83DC 0%,#0078D4 55%,#106EBE 100%);
  --line:#E1E4E8;
  --line-dark:#C8C6C4;

  /* 交互反馈刻度（对齐主页） */
  --dt-radius:8px;
  --dt-radius-lg:12px;
  --dt-ease:0.2s cubic-bezier(0.4,0,0.2,1);
  --dt-ease-smooth:0.35s cubic-bezier(0.22,0.61,0.36,1);
  --dt-shadow:0 1.6px 3.6px rgba(0,0,0,0.10),0 0.3px 0.9px rgba(0,0,0,0.07);
  --dt-shadow-hover:0 12px 28px rgba(0,120,212,0.18);
  --dt-surface-hover:#F3F9FD;
}

/* ── 字体：统一为主页字族 ── */
body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Microsoft YaHei','PingFang SC','Noto Sans SC','Hiragino Sans GB',Arial,sans-serif;
}

/* ── 交互反馈：圆角 + 平滑过渡 + 悬浮抬升 + 柔影（对齐主页语言）── */

/* 返回主页 / 通用按钮 */
.home-btn{
  border-radius:var(--dt-radius) !important;
  transition:all var(--dt-ease);
}
.home-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6.4px 14.4px var(--blue-glow);
}

/* 章节网格：悬浮改用主页签名渐变 + 抬升 + 柔影 */
.grid a{
  transition:background var(--dt-ease-smooth),color var(--dt-ease-smooth),
             transform var(--dt-ease-smooth),box-shadow var(--dt-ease-smooth);
}
.grid a:hover{
  background:var(--blue-gradient) !important;
  transform:translateY(-2px);
  box-shadow:var(--dt-shadow-hover);
  position:relative;z-index:1;
}

/* 表格：行悬浮蓝色微染（替换硬编码 #fafafa） */
table tbody tr:hover td{
  background:var(--dt-surface-hover) !important;
}

/* 返回顶部：圆角 + 抬升 + 柔影 */
#top{
  border-radius:var(--dt-radius-lg) !important;
  transition:opacity .25s,background var(--dt-ease-smooth),color var(--dt-ease-smooth),
             transform var(--dt-ease-smooth),box-shadow var(--dt-ease-smooth) !important;
  box-shadow:var(--dt-shadow);
}
#top:hover{transform:translateY(-2px);box-shadow:var(--dt-shadow-hover);}

/* =========================================================================
   DOC-THEME v2 —— 进一步对齐主页视觉语言
   目标：把这些「白底 + 1px 硬边」的编辑体文档页，追加到主页
   （index.php）的 Fluent/Azure 观感——动态斜光带背景、玻璃顶栏、
   蓝色眉题、渐变强调标题、卡片圆角柔影 + 悬浮抬升。
   仍全部落在共享层，凭「后加载」在同等优先级覆盖各页内嵌样式；
   兼容 001–019 与 020 两套词汇（互不命中的选择器自然失效）。
   ========================================================================= */

/* ── 全站动态背景：斜向光带 + 极光辉光（镜像主页 body::before/::after）──
   文档页 <body> 底色不透明，但负 z-index 的伪元素在「元素背景」之后绘制，
   故光带会叠加在白底之上；正文为普通流内容，绘制在光带之上，可读性不受影响。
   文档正文较主页密集，光带透明度调低、更克制。 */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../../images/bg-diagonal-beams.svg") center / cover no-repeat;
  opacity:.5;
  transition:filter .5s ease;
  animation:dtBeamsDrift 36s ease-in-out infinite;
  will-change:transform;
}
body::after{
  content:'';
  position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 34% at 20% 22%, rgba(0,120,212,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 38% 30% at 80% 20%, rgba(134,97,197,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 46% 36% at 56% 86%, rgba(80,230,255,0.09) 0%, transparent 70%);
  animation:dtAuroraDrift 24s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes dtBeamsDrift{
  0%,100%{transform:scale(1.08) translate(0,0);}
  33%    {transform:scale(1.14) translate(-3%,2%);}
  66%    {transform:scale(1.10) translate(2.5%,-1.5%);}
}
@keyframes dtAuroraDrift{
  0%  {transform:translate3d(-5%,-3.5%,0) scale(1);}
  50% {transform:translate3d(5%,4%,0) scale(1.12);}
  100%{transform:translate3d(-3.5%,5.5%,0) scale(0.94);}
}
@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none;}
}

/* ── 顶栏：不透明白底 → 主页式磨砂玻璃（半透明 + 背板模糊）──
   001–019 用 <nav class="top">，020 用 <nav class="nav">，两者都覆盖。 */
nav.top,
.nav{
  background:rgba(255,255,255,0.80);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}

/* ── 眉题 / 小节标签：灰 → 主页签名蓝（大写 + 字距已由各页给定）── */
.eyebrow,
.sec-label,
.sec-index{
  color:var(--blue) !important;
  font-weight:600;
}

/* ── 大标题强调字：实心墨色 → 主页蓝紫渐变描字 ──
   001–020 的英雄标题均用 <h1><b>…</b></h1>，统一走渐变。 */
.hero h1 b,
.hero h1 strong{
  background:var(--blue-gradient-bright, linear-gradient(90deg,#0078D4 0%,#4F6BED 50%,#8661C5 100%));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ── 卡片化：统计条 / 表格容器 → 圆角 + 柔影（主页卡片语言）──
   统计条不横向滚动，可安全 overflow:hidden 裁圆角；
   表格容器保留各页 overflow-x:auto（窄屏横向滚动），不强设 hidden，
   否则宽表在手机上会被裁断——圆角由 auto 滚动容器自身裁切。 */
.stats{
  border-radius:var(--dt-radius-lg);
  overflow:hidden;
  box-shadow:var(--dt-shadow);
}
.tbl-wrap{
  border-radius:var(--dt-radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--dt-shadow);
}

/* ── 统计格：主页式悬浮微染 + 数字变蓝（001–019 .cell / 020 .stat）── */
.stats .cell,
.stats .stat{
  transition:background var(--dt-ease-smooth),
             transform var(--dt-ease-smooth),
             box-shadow var(--dt-ease-smooth);
}
.stats .cell:hover,
.stats .stat:hover{
  background:var(--dt-surface-hover);
}
.stats .cell:hover .num,
.stats .stat:hover .stat-num{
  color:var(--blue);
}

/* 返回主页按钮：hover 采用主页签名渐变实心（替换硬编码蓝） */
.home-btn:hover{
  background:var(--blue-gradient) !important;
  border-color:transparent !important;
  color:#fff !important;
}

/* ── 目录「方格」：1px 硬边共享容器 → 主页 Bento 独立玻璃卡片 ──
   原实现是「容器铺 --line 底 + gap:1px」画发丝分隔线；改为真正的间距
   网格，每格自带描边 / 圆角 / 柔影，hover 抬升 + 顶部渐变高光条 + 文字
   转蓝——与主页 .bento-cell / .stat-item 的交互语言一致。仅 001–019 有
   <div class="grid">，020 无此结构，天然不受影响。 */
.grid{
  background:transparent !important;   /* 去掉发丝底 */
  border:none !important;
  gap:14px !important;                  /* 真实间距 */
  overflow:visible !important;          /* 允许抬升与投影外溢 */
  border-radius:0 !important;
  box-shadow:none !important;
}
.grid a{
  position:relative;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:var(--dt-radius-lg);
  box-shadow:var(--dt-shadow);
  overflow:hidden;
  transition:background var(--dt-ease-smooth),color var(--dt-ease-smooth),
             transform var(--dt-ease-smooth),box-shadow var(--dt-ease-smooth),
             border-color var(--dt-ease-smooth);
}
/* 顶部渐变高光条（镜像主页 .stat-item::before），hover 显现 */
.grid a::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--blue-gradient-bright, linear-gradient(90deg,#0078D4 0%,#4F6BED 50%,#8661C5 100%));
  opacity:0;
  transition:opacity var(--dt-ease-smooth);
  z-index:1;
}
/* hover 不再整格填充渐变，而是抬升 + 高光条 + 序号/标题转蓝（与主页卡片一致）*/
.grid a:hover{
  background:var(--blue-pale) !important;
  transform:translateY(-4px);
  box-shadow:var(--dt-shadow-hover);
  border-color:var(--blue);
}
.grid a:hover::before{opacity:1;}
.grid a:hover .gn,
.grid a:hover .gt{color:var(--blue) !important;}
.grid a:hover .gd{color:var(--gray) !important;}

/* ── 返回顶部：方框描边 → 主页式圆形渐变悬浮钮（.back-to-top 同款）──
   各页用 <button id="top">，可见性由页面 JS 切换 .show（保留不动），
   此处只改外观：圆形、蓝渐变实底、白箭头、辉光投影、hover 抬升。 */
#top{
  width:46px;height:46px;
  border-radius:50% !important;
  background:var(--blue-gradient) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:var(--dt-shadow-hover),0 0 20px var(--blue-glow) !important;
}
#top:hover{
  background:var(--blue-gradient) !important;
  color:#fff !important;
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,0.18),0 0 30px var(--blue-glow) !important;
}