@charset "UTF-8";
/* ============================================================
   TechLight · 帝国CMS 8.0 UTF-8 技术博客模板（浅色方案）
   ============================================================
   浅色为默认主题；body.tl-dark 为可选深色（同一套 CSS 变量）。
   代码块 / 表格 / 老文章内联样式 / 评论插件适配见 content.css 与 comment.css。
   不依赖任何外部字体、框架或 CDN。
   ============================================================ */

:root,
body.tl-light{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface2:#f1f5f9;
  --surface3:#eaf0f8;
  --line:#dce4f0;
  --line2:#c9d6e8;
  --grid:rgba(15,23,42,.045);
  --text:#0f172a;
  --text2:#475569;
  --text3:#94a3b8;
  --accent:#0369a1;
  --accent-soft:#e6f2fb;
  --accent2:#6d28d9;
  --ok:#059669;
  --warn:#b45309;
  --danger:#dc2626;
  --code-bg:#f5f8fd;
  --code-text:#24334d;
  --code-line:#e3ebf6;
  --hot-rgb:255,255,255;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 26px rgba(15,23,42,.035);
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono","Courier New",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}

body.tl-dark{
  --bg:#0b0f18;
  --surface:#111827;
  --surface2:#151d2e;
  --surface3:#1b263a;
  --line:#22304a;
  --line2:#31415f;
  --grid:rgba(148,163,184,.055);
  --text:#e6edf7;
  --text2:#94a3b8;
  --text3:#5f708a;
  --accent:#38bdf8;
  --accent-soft:#0d2b40;
  --accent2:#a78bfa;
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#f87171;
  --code-bg:#0d1420;
  --code-text:#d5e0f0;
  --code-line:#22304a;
  --hot-rgb:17,24,39;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.tl{
  margin:0;
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s,color .2s;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
.mono{font-family:var(--mono)}
.wrap{max-width:1120px;margin:0 auto;padding:0 34px 70px}
/* 首页把「热门推荐」提到 wrap 之外做全宽带背景，首尾两段 wrap 收掉多余留白 */
.wrap-top{padding-bottom:10px}
.wrap-main{padding-top:0}

/* ---------- 顶部 ---------- */
.top{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  display:flex;align-items:center;gap:28px;padding:12px 0;flex-wrap:wrap;
}
.logo{font-size:17px;font-weight:700;letter-spacing:-.5px;white-space:nowrap}
.logo span{color:var(--accent)}
.top nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.top nav a{font-size:13px;color:var(--text2);position:relative;padding:3px 0}
.top nav a:hover,.top nav a.on{color:var(--accent)}
.top nav a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--accent);border-radius:2px;
}

/* ---------- 多级菜单（二级下拉 / 三级侧滑） ---------- */
/* 子栏目池：模板里由 [e:loop] 静态输出，JS 挂进对应一级项后移除；无 JS 时不显示 */
.tl-subpool{display:none}
.top nav .nav-item{position:relative;display:flex;align-items:center}
.top nav .nav-item > a{padding:3px 0}
.nav-chev{
  width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;margin-left:5px;opacity:.5;
  transition:transform .18s ease,opacity .18s ease;
}
.nav-item:hover > .nav-chev,.nav-item.open > .nav-chev{opacity:.85;transform:rotate(180deg)}
.top nav .submenu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,7px);
  margin-top:9px;min-width:158px;padding:6px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 10px 32px rgba(15,23,42,.14);
  opacity:0;visibility:hidden;z-index:60;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* 覆盖 hover 之间的 9px 空隙，避免鼠标移进下拉时闪断 */
.top nav .submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.top nav .nav-item:hover > .submenu,
.top nav .nav-item:focus-within > .submenu,
.top nav .nav-item.open > .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* 靠近视口右边的一级项：下拉改为右对齐，避免溢出屏幕 */
.top nav .submenu.flip{left:auto;right:0;transform:translate(0,7px)}
.top nav .nav-item:hover > .submenu.flip,
.top nav .nav-item:focus-within > .submenu.flip,
.top nav .nav-item.open > .submenu.flip{transform:translate(0,0)}
.top nav .submenu a{
  display:block;padding:8px 16px;font-size:12.5px;color:var(--text2);
  white-space:nowrap;transition:background .15s,color .15s;
}
.top nav .submenu a:hover{background:var(--surface2);color:var(--accent)}
.top nav .submenu .submenu-row{position:relative;display:flex;align-items:center}
.top nav .submenu .submenu-row > a{flex:1 1 auto;padding-right:24px}
.top nav .submenu .submenu-row > .nav-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%) rotate(-90deg);margin:0}
.top nav .submenu .submenu-row:hover > .nav-chev{transform:translateY(-50%) rotate(-90deg);opacity:.85}
/* 三级：从右侧滑出 */
.top nav .submenu .submenu{top:-6px;left:100%;margin:0 0 0 4px;transform:translate(-6px,0)}
.top nav .submenu .submenu::before{top:0;left:-6px;right:auto;width:6px;height:100%}
.top nav .submenu .submenu-row:hover > .submenu,
.top nav .submenu .submenu-row:focus-within > .submenu,
.top nav .submenu .submenu-row.open > .submenu{opacity:1;visibility:visible;transform:translate(0,0)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  border-radius:5px;padding:6px 11px;font-size:12px;font-family:var(--mono);
  min-width:172px;display:flex;align-items:center;gap:7px;
}
.search input{
  border:0;background:transparent;outline:0;color:var(--text);
  font-family:var(--mono);font-size:12px;width:100%;min-width:0;
}
.search input::placeholder{color:var(--text3)}
.search button{
  border:0;background:transparent;color:var(--text3);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:0;
}
.search button:hover{color:var(--accent)}
.status{font-size:11px;font-family:var(--mono);color:var(--ok);letter-spacing:.5px;white-space:nowrap}
.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px}
.tl-theme{
  border:1px solid var(--line);background:var(--surface);color:var(--text2);
  border-radius:5px;padding:5px 10px;cursor:pointer;font-size:13px;line-height:1.2;
  font-family:var(--mono);
}
.tl-theme:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 首页 hero ---------- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;padding:18px 0 20px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--surface);border-radius:20px;padding:5px 13px;
  font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:.5px;
}
.badge b{color:var(--accent);font-weight:500}
.hero h1{font-size:36px;line-height:1.26;letter-spacing:-.7px;margin:12px 0 10px;font-weight:700}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.sub{
  font-size:14.5px;color:var(--text2);line-height:1.75;margin:0 0 14px;max-width:560px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.btn{padding:10px 20px;border-radius:6px;font-size:13.5px;font-weight:600;border:1px solid transparent;display:inline-block}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{color:#fff;filter:brightness(1.1)}
.btn.ghost{border-color:var(--line);color:var(--text2);background:var(--surface)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--mono);font-size:11px;color:var(--text2);
  border:1px solid var(--line);background:var(--surface);padding:3px 9px;border-radius:4px;
}
.term{background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}
.term-bar{display:flex;align-items:center;gap:7px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface2)}
.dot{width:9px;height:9px;border-radius:50%}
.term-bar .tt{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--text3)}
.term pre{
  margin:0;padding:14px 18px 16px;font-family:var(--mono);font-size:11.5px;line-height:1.72;
  color:var(--text2);overflow-x:auto;background:transparent;border:0;
}
.term .k{color:var(--accent2)}.term .s{color:var(--ok)}.term .n{color:var(--warn)}
.term .c{color:var(--text3)}.term .f{color:var(--accent)}

/* ---------- 统计 ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:50px;
}
.stat{background:var(--surface);padding:20px 22px}
.stat b{display:block;font-family:var(--mono);font-size:26px;color:var(--text);line-height:1.3;font-weight:600}
.stat span{font-size:11.5px;color:var(--text3);letter-spacing:1px}

/* ---------- 热门推荐（全宽带状背景 + 横向滑动卡片流） ---------- */
.hot{
  position:relative;
  /* 全宽带底色：上下各 20px 由页面底色羽化上来，去掉硬边线又不丢分区感 */
  background:linear-gradient(180deg,
    rgba(var(--hot-rgb),0) 0,
    rgba(var(--hot-rgb),.86) 10px,
    rgba(var(--hot-rgb),1) 20px,
    rgba(var(--hot-rgb),1) calc(100% - 22px),
    rgba(var(--hot-rgb),0) 100%);
  padding:24px 0 14px;margin:0 0 20px;
}
.hot-wrap{max-width:1120px;margin:0 auto;padding:0 34px}
.hot-head{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0}
.hot-head h2{font-size:16px;margin:0;font-weight:600;letter-spacing:1px}
.hot-en{font-family:var(--mono);font-size:10px;color:var(--text3);letter-spacing:1.5px}
.hot-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:6px 0 10px}
.hot-tabs button{
  font-family:inherit;font-size:12.5px;color:var(--text2);background:none;border:0;
  padding:5px 12px;border-radius:20px;cursor:pointer;transition:color .15s,background .15s;
}
.hot-tabs button:hover{color:var(--accent)}
.hot-tabs button.on{color:var(--accent);background:var(--accent-soft);font-weight:600}
.hot-stage{position:relative}
.hot-head + .hot-stage{margin-top:10px} /* 无 tab 时补间距，避免标题贴着卡片 */
.hot-track{
  display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hot-track::-webkit-scrollbar{display:none}
.hot-card{
  flex:0 0 calc((100% - 64px) / 5);width:calc((100% - 64px) / 5);
  scroll-snap-align:start;
  /* 纵向 flex + meta 自动到底：同一行卡片高度对齐，标题长短不影响下方「阅读数」位置 */
  display:flex;flex-direction:column;
  color:var(--text);transition:transform .2s ease;
}
.hot-card:hover{transform:translateY(-3px)}
.hot-card.is-hidden{display:none}
.hot-cover{
  display:block;position:relative;padding-top:100%;border-radius:8px;overflow:hidden;
  background:var(--surface2);border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(15,23,42,.06);
}
.hot-cover img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .35s ease;
}
.hot-card:hover .hot-cover img{transform:scale(1.04)}
.hot-cover em{
  position:absolute;left:6px;top:6px;z-index:2;font-style:normal;
  font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.5px;
  padding:2px 7px;border-radius:4px;background:rgba(3,105,161,.94);color:#fff;
  box-shadow:0 1px 6px rgba(15,23,42,.18);
}
.hot-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;line-height:1.6;margin:8px 0 2px;font-weight:500;
}
.hot-card:hover .hot-name{color:var(--accent)}
.hot-meta{font-family:var(--mono);font-size:11px;color:var(--text3);margin-top:auto}
.hot-nav{
  position:absolute;top:99px;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;padding:0;
  background:var(--surface2);border:1px solid var(--line2);color:var(--text2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 18px rgba(15,23,42,.10);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  z-index:3;
}
.hot-nav svg{width:24px;height:24px;display:block}
.hot-nav:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 22px rgba(3,105,161,.28)}
/* 贴屏幕左右两侧（50% 是卡片区半宽，50vw 是视口半宽，差值即卡片区到视口边界的距离） */
.hot-nav.prev{left:calc(50% - 50vw + 26px)}
.hot-nav.next{right:calc(50% - 50vw + 26px)}
.hot-nav:disabled{opacity:.32;cursor:default;box-shadow:none}
.hot-nav:disabled:hover{background:var(--surface2);border-color:var(--line2);color:var(--text2)}
/* 置顶卡片不足一屏时不出现箭头（JS 给 .hot-stage 加 is-single） */
.hot-stage.is-single .hot-nav{display:none}
.hot-dots{display:flex;justify-content:center;gap:6px;margin-top:10px;min-height:6px}
.hot-dots i{width:6px;height:6px;border-radius:3px;background:var(--line);cursor:pointer;transition:width .2s,background .2s}
.hot-dots i.on{width:18px;background:var(--accent)}

/* ---------- 区块标题 ---------- */
.sect{
  display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);
  padding-bottom:10px;margin:0 0 22px;
}
.sect h2{font-size:14px;letter-spacing:2px;margin:0;font-weight:600}
.sect .idx{font-family:var(--mono);font-size:11px;color:var(--accent)}
.sect em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--text3)}
.sect em a:hover{color:var(--accent)}

/* ---------- 文章卡片 ---------- */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:50px;counter-reset:post}
.post{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:20px 22px;transition:border-color .15s,box-shadow .15s;position:relative;
  counter-increment:post;
}
.post:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.post .row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.post .no{font-family:var(--mono);font-size:12px;color:var(--text3)}
.post .no::before{content:counter(post,decimal-leading-zero)}
.post .cat{
  font-family:var(--mono);font-size:10.5px;color:var(--accent);
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;letter-spacing:.5px;
  background:var(--accent-soft);
}
.post h3{font-size:17px;line-height:1.55;margin:0 0 9px;font-weight:600}
.post h3 a{color:var(--text)}
.post h3 a:hover{color:var(--accent)}
.post p{font-size:13px;color:var(--text2);line-height:1.85;margin:0 0 16px}
.post .meta{
  font-family:var(--mono);font-size:11px;color:var(--text3);
  border-top:1px solid var(--line);padding-top:11px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
/* 首页卡片封面图（仅带 titlepic 的卡片）：图片在卡片内边距内，四周留白 */
.post-cover{
  display:block;height:236px;margin:0 0 15px;overflow:hidden;
  background:var(--surface2);border-radius:6px;
}
@supports (aspect-ratio:16/9){.post-cover{height:auto;aspect-ratio:16/9;max-height:320px}}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.post:hover .post-cover img{transform:scale(1.03)}

/* ---------- 文章列表行（标题 / 缩略图 / 简介 / 时间+栏目） ---------- */
.post-row{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:22px 24px 0;transition:border-color .15s,box-shadow .15s;
}
.post-row:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.pr-title{font-size:19px;line-height:1.5;margin:0 0 16px;font-weight:600;letter-spacing:-.2px}
.pr-title a{color:var(--text)}
.pr-title a:hover{color:var(--accent)}
.pr-body{display:flex;gap:22px;align-items:stretch;margin-bottom:16px}
.pr-thumb{
  flex:0 0 200px;width:200px;height:126px;display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:6px;background:var(--surface2);
}
.pr-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.post-row:hover .pr-thumb img{transform:scale(1.03)}
.pr-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.pr-text p{
  margin:0;font-size:13.5px;line-height:1.95;color:var(--text2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.pr-more{
  margin-top:auto;align-self:flex-end;display:inline-block;
  padding:6px 15px;border-radius:4px;background:var(--accent);color:#fff;
  font-size:12.5px;line-height:1.7;white-space:nowrap;transition:filter .15s;
}
.pr-more:hover{filter:brightness(1.08);color:#fff}
.pr-more span{margin-left:3px;letter-spacing:-1.5px}
.pr-meta{
  border-top:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:8px 26px;
  padding:11px 0;font-family:var(--mono);font-size:11.5px;color:var(--text3);
}
.pr-meta .pr-time,.pr-meta .pr-cat{display:inline-flex;align-items:center;gap:6px}
.pr-meta .pr-i{width:12px;height:12px;flex:0 0 12px;opacity:.75}
.pr-meta a{color:var(--accent)}
.pr-meta a:hover{text-decoration:underline}


/* ---------- 栏目卡片 ---------- */
.series{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:50px}
.sc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;transition:border-color .15s}
.sc:hover{border-color:var(--accent)}
.sc .ttl{font-size:15px;font-weight:600;margin:0 0 6px}
.sc .ttl a:hover{color:var(--accent)}
.sc .d{font-size:12px;color:var(--text3);font-family:var(--mono);margin:0 0 14px}
.bar{height:4px;background:var(--surface3);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.sc .pg{font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:9px;display:block}

/* ---------- 面包屑 ---------- */
.crumb{
  font-family:var(--mono);font-size:11.5px;color:var(--text3);
  padding:18px 0 0;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.crumb a{color:var(--text2)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{color:var(--line2)}

/* ---------- 列表页 ---------- */
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:38px;align-items:start}
.page-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px}
.page-head h1{font-size:26px;margin:0 0 6px;letter-spacing:-.5px}
.page-head p{font-size:13px;color:var(--text2);margin:0;line-height:1.85}
.list{display:flex;flex-direction:column;gap:14px}
.list .post .meta{margin-top:2px}
/* 分页：帝国CMS 的 sys_ShowListMorePage 输出纯 HTML（  分隔、无 class），
   这里用 font-size:0 消掉文本节点里的  ，再给元素恢复字号，间距统一交给 gap */
.pager{
  margin:28px 0 0;padding:13px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:8px;font-family:var(--mono);font-size:0;color:var(--text2);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.pager:empty{display:none}
.pager > *{font-size:12px}
.pager a,.pager b{
  display:inline-block;min-width:30px;text-align:center;padding:5px 10px;
  border:1px solid var(--line);border-radius:4px;background:var(--surface2);
  color:var(--text2);font-weight:400;font-size:12px;line-height:1.5;
}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager b{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
/* 「共 N 条」那段是个无 href 的 <a title="Total record">，转为说明文字；
   里面的 &nbsp; 靠 font-size:0 消掉，再用 ::before/::after 补「共 / 篇」 */
.pager a[title]{border:0;background:none;padding:0 8px 0 2px;min-width:0;font-size:0;color:var(--text3);cursor:default}
.pager a[title]::before{content:"共";font-size:12px;margin-right:4px}
.pager a[title]::after{content:"篇";font-size:12px;margin-left:4px}
.pager a[title] b{background:none;border:0;color:var(--text);font-weight:600;padding:0;min-width:0;display:inline;font-size:13px}
.pager select{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:4px 6px;border-radius:4px;font-family:var(--mono);font-size:12px}

/* ---------- 站点地图 ---------- */
.sm-index{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.sm-index a{
  font-family:var(--mono);font-size:12px;color:var(--text2);
  border:1px solid var(--line);border-radius:20px;padding:4px 12px;background:var(--surface);
  transition:border-color .15s,color .15s;
}
.sm-index a:hover{border-color:var(--accent);color:var(--accent)}
.sm-index a em{font-style:normal;color:var(--text3);font-size:11px;margin-left:6px}
.tl-sitemap{display:block}
.sm-group{padding:22px 0 0;border-top:1px solid var(--line);margin:0 0 6px}
.sm-group:first-child{border-top:0;padding-top:0}
.sm-group > h2{
  font-size:14.5px;margin:0 0 14px;font-weight:600;letter-spacing:.3px;
  display:flex;align-items:baseline;gap:10px;
}
.sm-group > h2::before{content:"//";font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:400}
.sm-group > h2 a{color:var(--text)}
.sm-group > h2 a:hover{color:var(--accent)}
.sm-group > h2 em{
  font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:500;
  color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:1px 8px;
}
.sm-group ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.sm-group li{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.sm-group li a{
  flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--text2);line-height:1.7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sm-group li a:hover{color:var(--accent)}
.sm-group li time{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--text3)}

/* ---------- 内容页 ---------- */
/* 正文卡片：把「标题 / 正文 / 分页 / TAGS / 上下篇 / 相关文章」整篇收进一张浅色卡片。
   内容页原来是无背景裸排，正文直接落在带 44px 网格底纹的页面底色上，
   而侧栏与首页卡片都是白底 → 正文显得"堆"在背景上。此卡与 .post / .side-box 同语言。 */
main > article{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px 36px 30px;
  box-shadow:var(--shadow);
}
.article-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}
.article-head h1{font-size:30px;line-height:1.45;margin:0 0 14px;letter-spacing:-.5px;font-weight:700}
.article-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-family:var(--mono);font-size:11.5px;color:var(--text3);
}
.article-meta span{display:inline-flex;align-items:center;gap:5px}
.article-meta b{color:var(--text2);font-weight:500}
.tl-entry{font-size:15px;line-height:1.95;color:var(--text)}
.tl-entry a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.tl-entry a:hover{text-decoration-color:var(--accent)}
.pageLink{text-align:center;margin:26px 0;font-family:var(--mono);font-size:12px}
.pageLink a{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:4px;margin:0 3px}

.tl-tags{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text2)}
.tl-tags b{font-family:var(--mono);font-size:11px;color:var(--text3);letter-spacing:1px;margin-right:8px;font-weight:500}
.tl-neighbor{
  margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  font-size:13px;color:var(--text2);
}
/* 上下篇在正文卡片内部，用浅一档底色区分，否则白底套白底只剩一条边 */
.tl-neighbor > div{background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:13px 16px}
.tl-neighbor .lb{display:block;font-family:var(--mono);font-size:10.5px;color:var(--text3);letter-spacing:1px;margin-bottom:4px}
.tl-neighbor a:hover{color:var(--accent)}
.tl-related{margin-top:34px}
.tl-related h3{font-size:14px;letter-spacing:1px;margin:0 0 12px}
.tl-related ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.tl-related li{font-size:13px;color:var(--text2);position:relative;padding-left:16px;line-height:1.8}
.tl-related li::before{content:"//";position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:11px}
.tl-related a:hover{color:var(--accent)}

/* ---------- 评论区容器 ---------- */
.tl-comments{margin-top:46px;padding-top:8px}
#m_postcomments,#m_respond{max-width:100%}

/* ---------- 侧栏 ---------- */
.side{display:flex;flex-direction:column;gap:16px}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.side-box h3{
  font-size:12px;letter-spacing:1.5px;margin:0 0 12px;font-weight:600;
  font-family:var(--mono);color:var(--text);display:flex;align-items:center;gap:8px;
}
.side-box h3::before{content:"";width:3px;height:12px;background:var(--accent);border-radius:2px}
.side-box ul{list-style:none;padding:0;margin:0}
.side-box li{
  font-size:12.5px;color:var(--text2);line-height:1.7;padding:7px 0 7px 14px;
  border-bottom:1px dashed var(--line);position:relative;
}
.side-box li:last-child{border-bottom:0}
.side-box li::before{content:"·";position:absolute;left:2px;color:var(--accent);font-family:var(--mono)}
.side-box li a:hover{color:var(--accent)}
.side-box .rank-no{
  display:inline-block;width:18px;font-family:var(--mono);font-size:10.5px;color:var(--text3);
}

/* ---------- 页脚 ---------- */
footer.tl-footer{
  border-top:1px solid var(--line);padding:26px 0 0;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;
}
footer.tl-footer h4{
  font-size:11px;letter-spacing:2px;color:var(--text3);margin:0 0 12px;
  font-family:var(--mono);font-weight:500;
}
footer.tl-footer p,footer.tl-footer li{font-size:12.5px;color:var(--text2);line-height:2}
footer.tl-footer ul{list-style:none;padding:0;margin:0}
.copyright{
  grid-column:1/-1;border-top:1px solid var(--line);margin-top:20px;padding-top:13px;
  font-family:var(--mono);font-size:11px;color:var(--text3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.copyright i{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:6px;
}

/* ---------- 高级搜索表单 ---------- */
.tl-searchform{margin:0 0 30px}
.tl-formcols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tl-searchform .side-box label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text2);margin:0 14px 6px 0;cursor:pointer;
}
.tl-searchform .side-box input[type="radio"]{accent-color:var(--accent)}
.tl-searchform .tl-hint{font-family:var(--mono);font-size:11px;color:var(--text3);margin:0 0 8px}
.tl-searchform .tl-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text2)}
.tl-searchform input[type="text"],
.tl-searchform select{
  border:1px solid var(--line);background:var(--surface2);color:var(--text);
  border-radius:5px;padding:6px 9px;font-family:var(--mono);font-size:12px;outline:0;
}
.tl-searchform input[type="text"]:focus,
.tl-searchform select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tl-searchform select.tl-select{width:100%;height:118px;padding:4px 8px;font-family:var(--sans);font-size:13px}
.tl-searchform select.tl-select option{padding:3px 4px}
.tl-searchbar{
  margin-top:16px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.tl-searchbar .mono{font-size:11.5px;color:var(--text3)}
.tl-searchbar input[type="text"]{flex:1;min-width:200px;padding:9px 12px;font-size:13px}
.tl-searchbar .btn{padding:8px 18px}

/* ---------- 工具类 ---------- */
.tl-note{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--surface);padding:14px 18px;margin:24px 0;font-size:13px;
  color:var(--text2);line-height:1.9;border-radius:0 6px 6px 0;
}
.tl-backtop{
  position:fixed;right:22px;bottom:22px;width:38px;height:38px;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--text2);
  cursor:pointer;font-family:var(--mono);font-size:16px;display:none;
  box-shadow:var(--shadow);z-index:20;
}
.tl-backtop.show{display:block}
.tl-backtop:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 响应式 ---------- */
/* 视口不足时左右大箭头会压到卡片，直接收起（仍有触摸滑动 + 圆点分页） */
@media(max-width:1260px){
  .hot-nav{display:none}
}
@media(max-width:960px){
  .wrap{padding:0 20px 50px}
  .wrap-top{padding-bottom:26px}
  .hero,.tl-grid{grid-template-columns:1fr}
  .hero{gap:32px;padding:40px 0}
  .hero h1{font-size:34px}
  .stats{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:1fr}
  .series{grid-template-columns:1fr 1fr}
  footer.tl-footer{grid-template-columns:1fr 1fr}
  .top nav{gap:16px}
  .head-right{width:100%;margin-left:0}
  .side{flex-direction:row;flex-wrap:wrap}
  .side-box{flex:1 1 240px}
  .tl-formcols{grid-template-columns:1fr}
  .pr-thumb{flex:0 0 168px;width:168px;height:106px}
  .sm-group ul{grid-template-columns:1fr}
  .hot{padding:24px 0 16px;margin-bottom:36px}
  .hot-wrap{padding:0 20px}
  .hot-card{flex:0 0 calc((100% - 48px) / 4);width:calc((100% - 48px) / 4)}
  main > article{padding:26px 24px 24px}
}
@media(max-width:600px){
  .stats,.series,.tl-related ul,.tl-neighbor{grid-template-columns:1fr}
  footer.tl-footer{grid-template-columns:1fr}
  .article-head h1{font-size:24px}
  main > article{padding:20px 18px 22px;border-radius:8px}
  .term pre,.term{font-size:11.5px}
  .status{display:none}
  /* 列表行：窄屏改为「图上文下」 */
  .post-row{padding:18px 16px 0}
  .pr-title{font-size:16.5px;line-height:1.55;margin-bottom:13px}
  .pr-body{flex-direction:column;gap:13px;align-items:stretch}
  .pr-thumb{flex:0 0 auto;width:100%;height:168px}
  .pr-text p{-webkit-line-clamp:3;font-size:13px;line-height:1.85}
  .pr-more{align-self:flex-start;padding:5px 13px}
  .pr-meta{gap:6px 18px;font-size:11px}
  /* 站点地图：窄屏单列 + 缩小 */
  .sm-index{gap:6px;margin-bottom:22px}
  .sm-index a{font-size:11px;padding:3px 10px}
  .sm-group{padding-top:18px}
  .sm-group > h2{font-size:13.5px;margin-bottom:10px}
  .sm-group li a{font-size:13px}
  /* 热门推荐：手机上卡片更窄，露出下一张的边缘提示可滑动 */
  .hot{padding:20px 0 12px;margin-bottom:30px}
  .hot-wrap{padding:0 14px}
  .hot-head h2{font-size:16px}
  .hot-card{flex:0 0 calc((100% - 16px) / 2);width:calc((100% - 16px) / 2)}
  .hot-name{font-size:12.5px;margin:8px 0 3px}
  .hot-tabs{margin:8px 0 14px}
  .hot-tabs button{font-size:12px;padding:4px 10px}
  /* 多级菜单：窄屏仍用下拉，但收窄并贴左，避免撑破一行 */
  .top nav .submenu{left:0;transform:translate(0,7px);min-width:132px;margin-top:9px}
  .top nav .nav-item.open > .submenu,
  .top nav .nav-item:focus-within > .submenu{transform:translate(0,0)}
  .top nav .submenu.flip{left:auto;right:0}
  .top nav .submenu .submenu{left:100%;right:auto;top:-6px;margin:0 0 0 4px;transform:translate(-6px,0)}
  .top nav .submenu .submenu-row:hover > .submenu,
  .top nav .submenu .submenu-row:focus-within > .submenu,
  .top nav .submenu .submenu-row.open > .submenu{transform:translate(0,0)}
  .top nav .submenu a{padding:7px 12px}
}
@media print{
  .head-right,.tl-theme,.tl-backtop,.side,.tl-comments,.pager{display:none!important}
  body.tl{background:#fff;background-image:none;color:#000}
  .wrap{max-width:none;padding:0}
}