feat(atalk): 评论区美化——CSS 加载缺陷修复与 tokens 主题接管（T2）

- 缺陷修复（op-gitea 车道发现）：Artalk JS 不自动注入样式，评论区自
  上线起一直跑 UA 默认样式——mount() 补挂 dist/Artalk.css，onload 后
  init（失败降级不阻塞评论可用）
- 主题接管：18 个 --at-color-* 变量全套映射站点 tokens（var() 引用，
  明暗随 [data-theme] 自动翻转）；init 锁 darkMode:false 防双暗叠加
- 气质层：8px 圆角/squircle 头像/时间戳与 UA 转 JetBrains Mono/
  正文链接 underline 纪律/弹层选择器 body 前缀提特异性

验证: build 23 页 exit 0；--at-color-main:var(--accent) 入产物；
      生产页注入同款 CSS 探针矩阵全中（亮 #3454d1/暗 #8ea2ff）；
      双态截图 /tmp/e2e-shots/at-polish-{light,dark}.png 待视觉终审

Spec: 2026-10-25_add-media-and-polish

Co-authored-by: GLM-5.3

src/components/ArtalkComments.astro

@@ -16,7 +16,8 @@ const { pageKey, pageTitle } = Astro.props;
      防 Artalk 自带 atk-dark-mode 类与接管层打架。弹层挂 body 下需单独同款映射 -->
 <style is:global>
   #artalk-container,
-  .atk-layer-wrap {
+  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
+  body .atk-layer-wrap {
     --at-color-bg: var(--bg);
     --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
     --at-color-bg-grey: var(--bg-soft);
@@ -74,10 +75,21 @@ const { pageKey, pageTitle } = Astro.props;
   if (el) {
     const mount = () => {
       if (document.getElementById('artalk-lib')) return initArtalk();
+      // 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
+      const cssReady = new Promise<void>((done) => {
+        if (document.getElementById('artalk-css')) return done();
+        const l = document.createElement('link');
+        l.id = 'artalk-css';
+        l.rel = 'stylesheet';
+        l.href = 'https://wait4x.online/artalk/dist/Artalk.css';
+        l.onload = () => done();
+        l.onerror = () => done(); // CSS 失败不阻塞：评论至少可用（降级 UA 样式）
+        document.head.appendChild(l);
+      });
       const s = document.createElement('script');
       s.id = 'artalk-lib';
       s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
-      s.onload = initArtalk;
+      s.onload = () => { void cssReady.then(initArtalk); };
       document.head.appendChild(s);
     };
     const initArtalk = () => {