/* 文章板块共享样式 —— 复用主站配色(默认深色) */
:root{--paper:#FDFAF6;--card:#FFFFFF;--ink:#1A1420;--muted:#5C5057;--faint:#736970;--decor:#9A8F94;--line:#EBE2E6;--line2:#D5C8CF;--accent:#C43A17;--accent-2:#B3261F;--accent-soft:#FDECE6;--on-accent:#FFFFFF;--btn2:#F2EAEC;--btn2-ink:#5C5057;--present:#0E7A50;--present-soft:#E4F7EE;--off:#F2EDEF;--off-ink:#6A6066;--code:#F5F0EC;--code-ink:#0E5C3C;--earth:#8A5A00;--warn:#8A5A00;--warn-soft:#FFF4DC;--err:#C42B2B;--err-soft:#FDECEC;--emv:#4A3BC4;--emv-soft:#EDEBFC;--row-hover:rgba(196,58,23,.05);--nav-bg:rgba(253,250,246,.8);--hero:radial-gradient(circle at 20% 20%,rgba(196,58,23,.06),transparent 50%),radial-gradient(circle at 80% 80%,rgba(14,122,80,.05),transparent 50%);--focus-ring:rgba(196,58,23,.15);--glow:rgba(196,58,23,.28);--shadow:0 1px 2px rgba(26,20,32,.05),0 8px 24px rgba(26,20,32,.07)}
:root[data-theme="dark"],:root:not([data-theme]){--paper:#0D0B14;--card:#1A1520;--ink:#F5F0EB;--muted:#A89B9B;--faint:#8A7F80;--decor:#5A5A5A;--line:#2A1E2E;--line2:#3D2E42;--accent:#FF4E2A;--accent-2:#E63946;--accent-soft:#2A1418;--on-accent:#0D0B14;--btn2:#2A1E2E;--btn2-ink:#A89B9B;--present:#2AFF9E;--present-soft:#11291F;--off:#1F1826;--off-ink:#8F8592;--code:#0A0A0A;--code-ink:#2AFF9E;--earth:#FFB000;--warn:#FFD166;--warn-soft:#2B1F0E;--err:#FF4D4D;--err-soft:#2E1414;--emv:#7B6CF6;--emv-soft:#191428;--row-hover:rgba(255,78,42,.05);--nav-bg:rgba(13,11,20,.8);--hero:radial-gradient(circle at 20% 20%,rgba(255,78,42,.08),transparent 50%),radial-gradient(circle at 80% 80%,rgba(42,255,158,.05),transparent 50%);--focus-ring:rgba(255,78,42,.15);--glow:rgba(255,78,42,.4);--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.55)}
:root[data-theme="light"]{--paper:#FDFAF6;--card:#FFFFFF;--ink:#1A1420;--muted:#5C5057;--faint:#736970;--decor:#9A8F94;--line:#EBE2E6;--line2:#D5C8CF;--accent:#C43A17;--accent-2:#B3261F;--accent-soft:#FDECE6;--on-accent:#FFFFFF;--btn2:#F2EAEC;--btn2-ink:#5C5057;--present:#0E7A50;--present-soft:#E4F7EE;--off:#F2EDEF;--off-ink:#6A6066;--code:#F5F0EC;--code-ink:#0E5C3C;--earth:#8A5A00;--warn:#8A5A00;--warn-soft:#FFF4DC;--err:#C42B2B;--err-soft:#FDECEC;--emv:#4A3BC4;--emv-soft:#EDEBFC;--row-hover:rgba(196,58,23,.05);--nav-bg:rgba(253,250,246,.8);--hero:radial-gradient(circle at 20% 20%,rgba(196,58,23,.06),transparent 50%),radial-gradient(circle at 80% 80%,rgba(14,122,80,.05),transparent 50%);--focus-ring:rgba(196,58,23,.15);--glow:rgba(196,58,23,.28);--shadow:0 1px 2px rgba(26,20,32,.05),0 8px 24px rgba(26,20,32,.07)}
*{margin:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","PingFang SC",sans-serif;line-height:1.7;font-size:16px}
a{color:var(--accent)}
.wrap{max-width:820px;margin:0 auto;padding:0 20px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap}
.brand{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.navlinks{display:flex;align-items:center;gap:11px;font-size:14px;flex-wrap:wrap;row-gap:6px}
.navlinks>*{flex:0 0 auto}
.cs-open{flex:0 1 auto}
a.cs-ai{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;color:var(--accent);font-size:14px;font-weight:600}
a.cs-ai:hover{color:var(--accent);text-decoration:underline}
a.cs-ai .cs-sp{font-size:13px;line-height:1}
@media(max-width:1100px){a.cs-ai .cs-aitx{display:none}}
.navlinks a{text-decoration:none;color:var(--muted);white-space:nowrap}
.navlinks a:hover{color:var(--accent)}
#themebtn{border:none;background:transparent;color:inherit;cursor:pointer;font-size:16px;line-height:1;padding:0}
.eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:6px}
h1{font-size:30px;line-height:1.25;text-wrap:balance;margin-bottom:10px}
h2{font-size:21px;margin:30px 0 10px;padding-top:6px}
h3{font-size:17px;margin:22px 0 8px;color:var(--accent)}
p{margin:12px 0}
ul,ol{margin:12px 0 12px 22px}
li{margin:6px 0}
code{font-family:ui-monospace,Menlo,monospace;font-size:.88em;background:var(--code);padding:1px 6px;border-radius:5px}
.lead{font-size:17px;color:var(--muted)}
.meta{font-size:13px;color:var(--faint);margin-bottom:6px}
.abstract{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 16px;margin:18px 0;font-size:14px}
.toc{border:1px solid var(--line);border-radius:8px;padding:10px 16px;margin:18px 0;font-size:13px;color:var(--muted)}
.toc b{color:var(--ink)}
.toc ol{margin:6px 0 0;padding-left:20px}
.toc li{margin:2px 0}
@media(min-width:640px){.toc ol{columns:2;column-gap:28px}}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}

/* 码值锚点：每行可以被单独链接和引用。
   table 是 display:block + overflow-x:auto，滚动容器是 table 自己而不是页面，
   所以 scroll-margin 要给 tr，给 table 不起作用。 */
tr[id]{scroll-margin-top:72px}
tr:target{background:var(--accent-soft)}
tr:target td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.rowlink{color:inherit;text-decoration:none}
.rowlink:hover{text-decoration:underline;text-decoration-style:dotted}
.rowlink:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* 复制链接按钮。有示例行的页面排在示例右端（margin-left:auto 推到最右，
   看得出不是又一个示例值）；没有示例行的直接跟在输入框下面，要自己留间距。 */
.exrow{flex-wrap:wrap}
.exrow .sharebtn{margin-left:auto}
.tool>.sharebtn{margin-top:10px}
.sharebtn{opacity:.75}
.sharebtn:hover{opacity:1}
th{background:var(--card)}
.callout{background:var(--emv-soft);border:1px solid var(--line);border-left:3px solid var(--emv);border-radius:0 8px 8px 0;padding:12px 16px;margin:18px 0;font-size:14px}
hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--faint);text-align:center}
/* 文章列表 */
.artlist{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.artcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.artcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.artcard .t{font-size:18px;font-weight:700;margin-bottom:6px}
.artcard .d{font-size:14px;color:var(--muted)}
.artcard .tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 9px;border-radius:20px;text-transform:uppercase}
.badge.free{background:var(--accent-soft);color:var(--accent);border:1px solid var(--line)}
.badge.premium{background:var(--emv-soft);color:var(--emv);border:1px solid var(--emv)}
.badge.tag{background:var(--code);color:var(--faint);border:1px solid var(--line)}
/* 订阅锁 */
.paywall{position:relative;margin-top:26px}
.paywall .fade{position:absolute;top:-70px;left:0;right:0;height:70px;background:linear-gradient(to bottom,transparent,var(--paper))}
.gate{background:var(--card);border:1px dashed var(--emv);border-radius:14px;padding:26px 22px;text-align:center;box-shadow:var(--shadow)}
.gate .lock{font-size:30px}
.gate h3{color:var(--emv);margin:8px 0 4px}
.gate p{color:var(--muted);font-size:14px;margin:6px 0 16px}
.gate button{font:inherit;font-weight:700;font-size:14px;padding:10px 22px;border-radius:8px;border:1px solid var(--emv);background:var(--emv);color:#fff;cursor:pointer;opacity:.75}
.gate .soon{display:block;margin-top:10px;font-size:12px;color:var(--faint)}
/* 双语显示:由 <html data-lang="zh|en"> 控制 */
[data-lang="zh"] .l-en{display:none}
[data-lang="en"] .l-zh{display:none}
#langbtn{border:none;background:transparent;cursor:pointer;font:inherit;font-size:14px;color:var(--muted);padding:0}
#langbtn:hover{color:var(--accent)}

/* 语言切换改为跨 URL 链接（/en 与 /zh 拆站） */
.langsw{text-decoration:none;color:var(--muted);font-size:14px;white-space:nowrap}
.langsw:hover{color:var(--accent)}

/* 面包屑 */
.crumb{font-size:13px;color:var(--faint);margin:-14px 0 16px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}


/* 工具下拉：hover 展开，键盘 focus 也能展开；窄屏退化成普通链接 */
.dd{position:relative;display:inline-block}
.dd>a{cursor:pointer}
.dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:210px;z-index:40;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;display:none;text-align:left}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu .grp{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding:8px 10px 4px}
.dd-menu a{display:block;padding:6px 10px;border-radius:7px;font-size:13.5px;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.dd-menu a:hover{background:var(--accent-soft);color:var(--accent)}
@media(max-width:760px){.dd-menu{display:none!important}}

/* 文章可见的更新日期 */
.upd{color:var(--faint)}
/* ===== 火/木/土 配色组件层 ===== */
/* 导航条：半透明 + 毛玻璃（规格）。注意 .topbar 目前不是 sticky，
   毛玻璃要等它吸顶了才看得出效果，先按规格写上，不改布局。 */
.topbar{background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line)}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--accent)}
.langsw:hover,.crumb a:hover{color:var(--accent)}
/* 代码：黑底绿字（规格 代码块 底 #0A0A0A 字 #2AFF9E） */
code{color:var(--code-ink)}
pre{background:var(--code);color:var(--code-ink);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;overflow-x:auto}
pre code{background:none;padding:0}
.badge.tag{color:var(--muted)}
/* 表格：表头土色字，行 hover 火色薄底（规格） */
th{color:var(--earth)}
tbody tr:hover{background:var(--row-hover)}
/* 页脚（规格：上边框 #2A1E2E、字与链接 #A89B9B、链接 hover #FF4E2A）。
   底色 #0A0810 没加：.footer 在 820px 的 .wrap 里，铺底会变成一条居中的色带。 */
.footer{border-top-color:var(--line);color:var(--muted)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--accent)}
.gate button{color:var(--on-accent);background:linear-gradient(135deg,var(--emv),var(--accent-2));
  border-color:transparent;opacity:1}

/* 顶栏分类下拉：桌面把 23 条的单个 Tools 菜单拆成三类，手机保持单个入口。
   手机上 .dd-menu 本来就整个隐藏（见下方 760px 媒体查询），点 Tools 直接去
   索引页——所以「下拉太长」只是桌面问题，不该为它牺牲手机端的横向空间：
   实测 360px 时导航已占 327px / 容器 320px，加两个一级项必然溢出。 */
.navlinks .cat{display:inline-flex}
.navlinks .tools-m{display:none}
@media(max-width:900px){
  .navlinks .cat{display:none}
  .navlinks .tools-m{display:inline}
}

/* 极窄屏（≤360px）把导航间距从 14px 收到 8px。实测 320px 时七个链接本身只占
   223px，是 6 个 14px 间距吃掉了 85px 才导致整页横向滚动 8px。收间距比删链接
   或让它换行都轻。 */
@media(max-width:360px){ .navlinks{gap:8px} }

.cs-open{display:inline-flex;align-items:center;gap:8px;cursor:text;background:var(--paper);border:1px solid var(--line2);border-radius:999px;color:var(--faint);font:inherit;font-size:13.5px;line-height:1;padding:6px 9px 6px 11px;min-width:132px;text-align:left}
.cs-open:hover,.cs-open:focus-visible{border-color:var(--accent);color:var(--muted)}
.cs-open .cs-mg{font-size:15px;line-height:1;opacity:.8}
.cs-open .cs-ph{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-open .cs-k{font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:2px 5px;background:var(--card)}
@media(max-width:900px){.cs-open{min-width:0;padding:6px 8px}.cs-open .cs-ph,.cs-open .cs-k{display:none}}