/* ===== 安全签名：低调但看得出门道的排版 ===== */

/* 侧栏小卡里的指纹链接 */
.siglink { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 11px; }
.siglink svg { color: var(--accent) !important; }
.siglink:hover svg { color: var(--accent) !important; }

/* 一页读完的四格统计 */
.sigstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 18px;
}
.sigstat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 6px 12px 6px 0;
  border-right: 1px dashed var(--line);
}
.sigstat:last-child { border-right: 0; }
.sigstat b {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.1;
}
.sigstat span { font-size: .74rem; color: var(--ink-4); letter-spacing: .04em; }
.sigstat-grade b {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.9rem;
}
.siglead {
  margin: 0;
  color: var(--ink-3);
  font-size: .94rem;
  line-height: 1.9;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* 清单：细圆点 + 行距，安静但有秩序 */
.siglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.siglist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: .94rem;
  line-height: 1.85;
  transition: background-color var(--dur-fast) var(--ease);
}
.siglist li:hover { background: var(--paper-3); }
.siglist li b { color: var(--ink); font-weight: 640; }
.sigdot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: .62em;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sigdot-gap {
  background: none;
  border: 1.6px solid var(--ink-4);
  box-shadow: none;
  width: 8px;
  height: 8px;
}
.siglist-gap li { color: var(--ink-3); }
.siglist-gap li:hover { background: transparent; }

.signote {
  margin: 12px 0 0;
  color: var(--ink-4);
  font-size: .86rem;
  line-height: 1.9;
}
.signote b { color: var(--ink-2); }
.signote.m-0 { margin: 0; }

/* 页脚那把小小的锁：安全页不进主导航，这里给一个低调入口 */
.foot-sec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.foot-sec svg {
  width: 13px;
  height: 13px;
  opacity: .75;
}
.foot-sec:hover svg { opacity: 1; }

/* 窄屏：统计格折成两列 */
@media (max-width: 620px) {
  .sigstats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .sigstat { padding-right: 8px; }
  .sigstat:nth-child(2) { border-right: 0; }
  .siglist li { padding: 11px 10px; }
}

/* ==========================================================================
   安全视觉语言 —— 仪器面板那一路的低调语汇
   --------------------------------------------------------------------------
   思路：安全这件事在视觉上不该是盾牌贴纸，而应该像一台被校准过的仪器——
   底纹是工程网格、边角有准星、块与块之间有刻度尺、标题像文档编号、
   每篇文章带一枚内容指纹。全部低对比，读正文时几乎感觉不到，停下来才看见。

   三条自我约束：
   1. 任何图形都是 CSS 渐变或 data-URI SVG，不新增图片请求；
   2. 一行内联样式都不写（构建会拦），全部走类名；
   3. 动效只有一处（状态点的呼吸环），且尊重 prefers-reduced-motion。
   ========================================================================== */

:root {
  /* 网格 / 刻度 / 准星 / 水印，深浅两套令牌。网格刻意压到「停下来才看见」那一档；
     浅色底上深线的存在感天然更强，所以浅色这边给得比深色更低。 */
  --sec-grid: rgba(20, 32, 52, .028);
  --sec-grid-2: rgba(20, 32, 52, .038);
  --sec-tick: rgba(20, 32, 52, .17);
  --sec-tick-2: rgba(20, 32, 52, .26);
  --sec-frame: rgba(20, 32, 52, .26);
  --sec-print-op: .085;
  /* 准星：十字，晨曦珊瑚色，低透明度 */
  --sec-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23ff7a45' stroke-opacity='.42' stroke-width='1'/%3E%3C/svg%3E");
  /* 指纹水印 */
  --sec-print-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230e1726' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 4a8 8 0 0 1 8 8v1'/%3E%3Cpath d='M4 12a8 8 0 0 1 8-8'/%3E%3Cpath d='M7 12a5 5 0 0 1 10 0v3'/%3E%3Cpath d='M10 12a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M7 16v2M17 17v1'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --sec-grid: rgba(255, 236, 214, .030);
  --sec-grid-2: rgba(255, 236, 214, .044);
  --sec-tick: rgba(255, 236, 214, .15);
  --sec-tick-2: rgba(255, 236, 214, .24);
  --sec-frame: rgba(255, 236, 214, .24);
  --sec-print-op: .10;
  --sec-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 0v12M0 6h12' stroke='%23ff9264' stroke-opacity='.38' stroke-width='1'/%3E%3C/svg%3E");
  --sec-print-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23f3ede4' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 4a8 8 0 0 1 8 8v1'/%3E%3Cpath d='M4 12a8 8 0 0 1 8-8'/%3E%3Cpath d='M7 12a5 5 0 0 1 10 0v3'/%3E%3Cpath d='M10 12a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M7 16v2M17 17v1'/%3E%3C/svg%3E");
}

/* ---- 1) 工程网格底纹：挂在容器里的一个空 span 上，径向淡出 ---- */
.sec-grid-layer {
  position: absolute;
  inset: -12px -8px -6px;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--sec-grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--sec-grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, var(--sec-grid-2) 0 1px, transparent 1px 6.5px);
  -webkit-mask-image: radial-gradient(126% 104% at 4% 0%, #000 0%, rgba(0, 0, 0, .38) 44%, transparent 76%);
  mask-image: radial-gradient(126% 104% at 4% 0%, #000 0%, rgba(0, 0, 0, .38) 44%, transparent 76%);
}
/* 正文与标题压在底纹之上；底纹那一层自己保持绝对定位（用 :not 排除，别被下面这条改成 relative） */
.sec-hero > *:not(.sec-grid-layer) { position: relative; z-index: 1; }

/* ---- 2) 四角准星：像校准过的取景框，四角各一个十字 ---- */
.sec-marks { position: relative; }
.sec-marks::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  background-image: var(--sec-mark), var(--sec-mark), var(--sec-mark), var(--sec-mark);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: left top, right top, left bottom, right bottom;
}

/* ---- 3) 扫描框：左上 + 右下两个直角，只占对角，不用四角 ---- */
.sec-frame { position: relative; }
.sec-frame::before,
.sec-frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: 0 solid var(--sec-frame);
}
.sec-frame::before { left: -5px; top: -5px; border-left-width: 1px; border-top-width: 1px; }
.sec-frame::after { right: -5px; bottom: -5px; border-right-width: 1px; border-bottom-width: 1px; }

/* ---- 4) 刻度尺：小刻度 12px、大刻度 60px，向右淡出 ---- */
.sec-ruler {
  height: 9px;
  margin: 0 0 16px;
  background-image:
    repeating-linear-gradient(90deg, var(--sec-tick) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--sec-tick-2) 0 1px, transparent 1px 60px);
  background-size: 100% 5px, 100% 9px;
  background-position: 0 bottom, 0 bottom;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 82%);
}

/* ---- 5) 分类标签：等宽、方括号，像文档抬头的密级行 ---- */
.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.sec-tag::before { content: "["; opacity: .5; }
.sec-tag::after { content: "]"; opacity: .5; }
.sec-tag-accent { color: var(--accent-ink); }
.sec-tag-accent::before,
.sec-tag-accent::after { opacity: .8; }

/* ---- 6) 指纹水印：压在卡片角落，只露一角 ---- */
.sec-print-bg {
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 132px;
  height: 132px;
  pointer-events: none;
  background-image: var(--sec-print-img);
  background-repeat: no-repeat;
  background-size: 132px 132px;
  opacity: var(--sec-print-op);
}
.sec-print-host { position: relative; overflow: hidden; }
.sec-print-host > *:not(.sec-print-bg) { position: relative; z-index: 1; }

/* ---- 7) 状态点：一个真正在呼吸的环，只此一处动效 ---- */
.sec-live {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: 1px;
}
.sec-live::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--ok);
  animation: secRing 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes secRing {
  0% { transform: scale(1); opacity: .5; }
  72% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---- 8) 页脚完整性行：把本次构建的资源指纹摆出来 ---- */
.sec-integrity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--ink-4);
}
.sec-integrity svg { width: 13px; height: 13px; opacity: .55; }
.sec-integrity b { color: var(--ink-3); font-weight: 600; }

/* ---- 9) 内容指纹：每篇文章一枚，标题下方的 mono 小标 ---- */
.sec-hash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--ink-4);
  border-bottom: 1px dotted var(--line-2);
  cursor: help;
}
.sec-hash svg { width: 13px; height: 13px; opacity: .6; }
.sec-hash b { color: var(--ink-3); font-weight: 600; }
.sec-hash:hover { color: var(--ink-3); border-bottom-color: var(--accent-line); }

/* ---- 10) 编号小标题：把 <small> 变成 01 · summary ---- */
.sect-title small .sec-idx {
  font-family: var(--mono);
  color: var(--accent-ink);
  opacity: .78;
  margin-right: 7px;
  letter-spacing: .1em;
}

/* 降低动效：只留静态的点，不留环 */
@media (prefers-reduced-motion: reduce) {
  .sec-live::after { animation: none; opacity: 0; }
  .sec-grid-layer { -webkit-mask-image: none; mask-image: none; opacity: .55; }
}

/* 窄屏：准星和刻度尺挤在一起反而乱，收掉准星 */
@media (max-width: 620px) {
  .sec-marks::after { inset: -5px; background-size: 10px 10px; }
  .sec-print-bg { width: 96px; height: 96px; background-size: 96px 96px; right: -12px; bottom: -14px; }
  .sec-frame::before, .sec-frame::after { width: 14px; height: 14px; }
}