/* ============================================================
   邹志强个人网站 - 主站 UI 覆盖层样式（合并整理版）
   ------------------------------------------------------------
   【用途】在“不改动旧样式表”的前提下统一全站视觉。
           旧表 style.css / mediastyle.css 一行未动；要回滚，
           删掉 inc/headtaginc.asp 里引用本文件的 <link> 即可。
   【加载】本文件排在 mediastyle.css 之后，权重相同时以本文件为准。
   【编码】必须 GB2312（无 BOM）+ CRLF，否则中文注释会乱码。
   【整理】P12 - P65 的逐次微调已按功能并入各分区：同一选择器
           只保留一份“最终生效值”（历史覆盖过程见各条注释）。
   【维护】新增微调请写进对应分区末尾；同一元素/属性由“同权重
           后者胜”决定，改前先搜索同名选择器，避免互相打架。
   ------------------------------------------------------------
   目录
   00 设计变量 ..................... :root
   01 全站基础 ..................... body / a / 滚动条 / 选中
   02 顶部工具栏与头部 ............. .trtopbar / .trlogo*
   03 导航栏 ....................... .trnav / .trnavul / 折叠与移动面板
   04 栏目标题条 ................... .trtitle1-4 / .tjydtt
   05 内容列表 ..................... .tridxul / .tr_smalllistkpul2 / .trhotnewsul / .trimgul
   06 按钮 / 表单 / 分页 / 小导航 ... .trbt* / .trinput* / .trpage / .trlistnav
   07 文章页 / 列表页 / 侧栏卡片 .... .trshow / .trlist / .trsearch / .trsmallblock1
   08 页脚 ......................... .trabout / .trinformation / .trcopypower
   09 首页 - 顶部三栏 .............. .trnews / .tjyd / .trslider / 右栏卡片
   10 首页 - 滚动图片区 ............ #trtollimg178888 / .trrollimgnr
   11 首页 - 栏目卡片与友情链接 ..... .trnewlist / .trcolumn / #trlink178888
   12 评论 / 留言 / 其它小模块 ...... .trp1 / .trntblock / .adtop170528
   13 主题配色与调色盘 ............. html[data-theme] / .zzq-theme-*
   14 返回顶部 / 灯箱 / 移动底栏 .... #trscrollup / .trmbottommenu
   ============================================================ */

/* ============================================================
   00 设计变量
   ============================================================ */
:root {
  --zzq-primary: #0096e5;
  --zzq-primary-dark: #0077c8;
  --zzq-accent: #F8AB00;
  --zzq-text: #2b2f36;
  --zzq-text-sub: #6b7280;
  --zzq-line: #e8ecef;
  --zzq-bg-soft: #f6f8fa;
  --zzq-radius: 8px;
  --zzq-shadow-sm: 0 1px 3px rgba(16, 42, 67, .07);
  --zzq-shadow-md: 0 6px 18px rgba(16, 42, 67, .10);
  --zzq-grad: linear-gradient(135deg, #00a9fe 0%, #0080e8 100%);
}

/* ============================================================
   01 全站基础
   ============================================================ */
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif;
  color: var(--zzq-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { transition: color .15s ease, background-color .15s ease, opacity .15s ease; }
a:hover { color: var(--zzq-primary); }
::selection { background: #b3e0ff; color: #123; }
h1, h2, h3, h4, h5, h6 { word-break: break-word; }

/* 细滚动条（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f2f4f7; }
::-webkit-scrollbar-thumb { background: #c8d2dc; border-radius: 6px; border: 2px solid #f2f4f7; }
::-webkit-scrollbar-thumb:hover { background: #a9b8c6; }

/* ============================================================
   02 顶部工具栏与头部
   ============================================================ */
.trtopbar { background: #fafbfc; border-bottom: 1px solid var(--zzq-line); margin-bottom: 0; }
.trtopbar a { color: #8b95a1; }
.trtopbar a:hover { color: var(--zzq-primary); }
.trtop2 form { border: 1px solid #e3e8ee; border-radius: 15px; overflow: hidden; }
.trsearchbt { background: var(--zzq-grad); border-radius: 0 13px 13px 0; transition: opacity .15s; }
.trsearchbt:hover { opacity: .88; }

/* logo 行（上下留白；P27 起在 >=1200 用 flex 让右侧横幅与 logo 垂直居中） */
.trlogoother { padding: 10px 0 6px; }
@media screen and (min-width:1200px) {
  .trlogoother {
    padding: 6px 0; display: flex; flex-direction: row-reverse;
    justify-content: space-between; align-items: center;
  }
  .trlogo { display: flex; align-items: center; }
}

/* ============================================================
   03 导航栏
   ============================================================ */
.trnav { background: var(--zzq-grad); box-shadow: 0 2px 8px rgba(0, 90, 160, .25); }
.trnavul li a { position: relative; transition: background-color .18s ease; }
.trnavul li a::after {
  content: ""; position: absolute; left: 50%; bottom: 7px;
  width: 0; height: 3px; border-radius: 2px; background: #fff;
  transform: translateX(-50%); transition: width .2s ease;
}
.trnavul li a:hover,
.trnavul li a:active,
.trnavul li a.trnavac { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
.trnavul li a:hover::after,
.trnavul li a:active::after,
.trnavul li a.trnavac::after { width: 22px; }

/* --- 移动端 / 平板：汉堡按钮与展开面板（P16 起，配色随后并入主题变量） --- */
@media screen and (max-width:1199px) {
  .navbar-default .trmnavbtn { border-radius: 6px; box-shadow: var(--zzq-shadow-sm); }
  .navbar-collapse.trcollapse {
    background: #fff; border-top: 1px solid var(--zzq-line);
    box-shadow: 0 10px 24px rgba(16, 42, 67, .12); border-radius: 0 0 8px 8px;
  }
  .trnavul { margin: 4px 0; }
  .trnavul li { float: none; }
  .trnavul li a {
    color: var(--zzq-text) !important; height: 44px; line-height: 44px;
    border-bottom: 1px solid #f2f4f7; padding: 0 16px !important;
  }
  .trnavul li a::after { display: none; }
  /* P19：小屏高亮改用主题浅色底 + 主题色文字 */
  .trnavul li a:hover, .trnavul li a.trnavac {
    background: var(--zzq-primary-soft) !important; color: var(--zzq-primary) !important;
  }
}

/* --- 平板（768-1199）：导航默认收起，右上角汉堡按钮点击展开（P54） --- */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* Bootstrap 在 min-width:768 强制 .collapse{display:block!important}，这里压回去 */
  .trnav .trcollapse.collapse { display: none !important; }
  .trnav .trcollapse.collapse.in { display: block !important; }
  .trnavbar .trmnavbtn { display: block; }
  .trnav .trcollapse.in .trnavul li { float: none; width: auto; text-align: left; }
  .trnav .trcollapse.in .trnavul li a { height: 40px; line-height: 40px; }
}

/* --- 小屏：收紧 logo 区与下方焦点图的间距（P22） --- */
@media screen and (max-width:767px) {
  .trnavbar { margin-bottom: 6px; }
}

/* ============================================================
   04 栏目标题条
   P51 起统一为「文字主色块 + 右侧浅灰延伸」：
   条 = 浅灰底 + 圆角；文字 = 主色渐变块 + 白字（宽度随内容收缩）
   历史：早期为「左侧竖条 + 墨色文字」，P51 改为色块方案，竖条已废弃
   ============================================================ */
.trtitle1, .trtitle2, .trtitle3 {
  background: #f2f5f9;
  border-bottom: none;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
/* 文字块：色块本体（1/2/3 三类 + 左栏「最新文章」） */
.trtitle1text, .trtitle2text, .trtitle3text, .tjydtt {
  height: 38px; line-height: 38px; position: relative;
  font-size: 16px; font-weight: 600; text-align: left;
  color: #fff !important;
  background: var(--zzq-grad) !important;
}
.trtitle1text, .trtitle2text, .trtitle3text {
  width: auto;
  padding: 0 22px !important;
  border-radius: 6px 0 6px 0;
}
.trtitle2text { width: fit-content; }
.tjydtt {
  width: fit-content;
  padding: 0 14px 0 16px !important;
  border-radius: 8px 0 8px 0;
  border-bottom: none;
}
.trtitle1text a, .trtitle2text a, .trtitle3text a { color: #fff !important; }
.trtitle1text a:hover, .trtitle2text a:hover, .trtitle3text a:hover {
  color: #fff !important; opacity: .85;
}
/* 标题右侧 “More..” */
.trmore a { color: #93a1b0 !important; transition: color .15s; }
.trmore a:hover { color: var(--zzq-primary); }
.trtitle3 .trmore { float: right; padding-right: 0; }
.trtitle3 .trmore a { font-size: 13px; }
.trtitle3 .trmore a:hover { color: var(--zzq-primary); }
/* 友情链接标题（唯一保留旧配色的一类） */
.trtitle4 { color: var(--zzq-primary); border-bottom-color: var(--zzq-primary); }

/* ============================================================
   05 内容列表
   ============================================================ */
.tridxul li, .tr_smalllistkpul2 li, .trlistul li, .trsearchul li {
  transition: background-color .15s ease, padding-left .15s ease;
  border-radius: 4px;
}
.tridxul li:hover, .tr_smalllistkpul2 li:hover, .trsmallblock1ul li:hover {
  background: var(--zzq-primary-soft); padding-left: 19px;
}
.trlistul li:hover, .trsearchul li:hover { background: #f8fbfe; padding-left: 24px; }
.tridxul li span, .trlistul li span, .trsearchul li span { color: #a5adb8; }
/* 注意：.tridxul li a 不设色（沿用旧表 a 的 #333），只有下面两类列表改了色 */
.tr_smalllistkpul2 li a, .trhotnewsul li a { color: #3d444d; }
.tridxul li a font, .tr_smalllistkpul2 li a font, .trhotnewsul li a font { color: #e0301e !important; }
.trlistul li { border-bottom: 1px dashed #eef1f4; }
.trlistul li a { color: #3d444d; }

/* 列表项小图标：圆点 -> 实心三角（P32） */
.tridxul li, .tr_smalllistkpul2 li { background: none; position: relative; }
.tridxul li::before, .tr_smalllistkpul2 li::before {
  content: "";
  position: absolute;
  left: 5px; top: 50%;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #9fd0f2;
  transform: translateY(-50%);
  transition: border-left-color .15s ease, left .15s ease;
}
.tridxul li:hover::before, .tr_smalllistkpul2 li:hover::before {
  border-left-color: var(--zzq-primary);
  left: 7px;
}

/* 列表标题与右侧日期留出间距（P19k） */
.tridxul { padding: 5px 15px 5px 15px; }
.tridxul li a {
  display: inline-block; max-width: calc(100% - 62px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: top;
}

/* 热门文章排名角标 */
.trhotnewsul li span.hotsp { border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.trbg1 { background: linear-gradient(135deg, #ff5a3c, #f43b2a) !important; }
.trbg2 { background: linear-gradient(135deg, #ffb43a, #ff9800) !important; }
.trbg3 { background: linear-gradient(135deg, #35c3ff, #0f9ff0) !important; }
.trbg4 { background: #cfd6de !important; color: #fff !important; }

/* 图墙（相册列表） */
.trimgul li {
  background: #fff; border: 1px solid var(--zzq-line); border-radius: 8px;
  padding: 6px; transition: box-shadow .2s ease, transform .2s ease;
}
.trimgul li:hover { box-shadow: var(--zzq-shadow-md); transform: translateY(-3px); }
.trimgul li img { border-radius: 5px; }
.trimgul li p a { color: var(--zzq-text); }

/* 首页顶部三栏内的列表缩进与行高（P19c / P23，仅 >=1200 生效） */
@media screen and (min-width:1200px) {
  .trnews .tr_smalllistkpul2 { padding: 4px 6px 0 10px; }
  .trnews .tr_smalllistkpul2 li { padding-left: 24px; background-position: 8px center; }
  .trnews .trhotnewsul { padding: 4px 6px 0 4px; }
  /* 条数增多后压缩行高，保持三栏底部对齐 */
  .trnews .tr_smalllistkpul2 li { height: 23px; line-height: 28px; }
  .trnews .trhotnewsul li { height: 23px; line-height: 23px; }
  .trnews .trhotnewsul li span.hotsp { margin-top: 2px; }
}

/* 列表页“当前位置”面包屑在小屏离左缘太近（P23） */
@media screen and (max-width:767px) {
  .trmcrumbs { padding-left: 14px; }
}

/* ============================================================
   06 按钮 / 表单 / 分页 / 小导航
   ============================================================ */
.trbt1, .trbt3, .trbtn1 {
  background: var(--zzq-grad); color: #fff; border-radius: 6px;
  transition: opacity .15s, box-shadow .15s;
}
.trbt1:hover, .trbt3:hover { background: var(--zzq-primary-dark); opacity: .95; box-shadow: 0 3px 10px rgba(0, 130, 220, .35); }
.trinput1, .trinput2, .trinput3, .trinput4, .trinput5, .trinput6, .trinput7 {
  border: 1px solid #dde3ea; border-radius: 5px; background: #fff; padding: 6px 8px;
  transition: border-color .15s, box-shadow .15s;
}
.trinput1:focus, .trinput2:focus, .trinput3:focus, .trinput4:focus, .trinput5:focus, .trinput6:focus, .trinput7:focus {
  outline: none; border-color: var(--zzq-primary); box-shadow: 0 0 0 3px var(--zzq-primary-ring);
}

/* 分页 */
.trpage a {
  display: inline-block; border-radius: 6px; background: #fff;
  border: 1px solid #d7dee6; color: var(--zzq-text-sub); padding: 5px 12px;
  transition: all .15s;
}
.trpage a:hover { background: var(--zzq-primary); border-color: var(--zzq-primary); color: #fff; }
.trpage a.now { background: var(--zzq-grad); border-color: transparent; color: #fff; font-weight: 600; }

/* 栏目小导航（列表页） */
.trlistnav li a { border-radius: 6px; transition: background-color .15s, box-shadow .15s; background: var(--zzq-primary); }
.trlistnav .tractive a { background: var(--zzq-accent); box-shadow: 0 2px 6px rgba(248, 171, 0, .4); }
.trlistnav li a:hover { background: var(--zzq-primary); }
.trusernav li a { background: var(--zzq-primary); }
.trusernav li a:hover { background: var(--zzq-accent); color: #333; }

@media screen and (max-width:1199px) {
  .trpage a, .trpage a.now { border-color: var(--zzq-primary); color: var(--zzq-primary); background: #fff; }
  .trpage a.now { background: var(--zzq-grad); border-color: transparent; color: #fff; }
  .trusernav li { border-color: var(--zzq-primary); }
  .trusernav li a { color: var(--zzq-primary); background: none; }
  .trusernav li a:hover { color: var(--zzq-accent); }
  /* P26：小屏恢复全部页码（页码数量由 ui.js 收敛到当前页附近 5 个），
     并覆盖本文件里 .trpage a{display:inline-block} 造成的页码溢出 */
  .trpage a, .trpage a.now { display: inline-block; }
  .trpage a { padding: 4px 9px; margin: 1px 3px; font-size: 12px; }
}

/* ============================================================
   07 文章页 / 列表页 / 侧栏卡片
   ============================================================ */
/* 面包屑条 */
.trshowtitle1, .trlisttitle1, .trsearchtitle1 {
  background: var(--zzq-bg-soft); border: 1px solid var(--zzq-line);
  border-radius: var(--zzq-radius); padding-right: 12px; margin-bottom: 14px;
}
.trshowtitle1 { line-height: 40px; height: 40px; }
.trcrumbs, .trmcrumbs { color: #8b95a1; }
.trcrumbs a, .trmcrumbs a { color: var(--zzq-primary); }
.trlisttitle2 { border-bottom: 1px solid var(--zzq-line); color: var(--zzq-text); position: relative; padding-left: 14px; }
.trlisttitle2::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 4px; border-radius: 2px; background: var(--zzq-grad);
}

/* 文章 / 列表 / 搜索主体卡片 */
.trshow, .trlist, .trsearch {
  background: #fff; border: 1px solid var(--zzq-line); border-radius: var(--zzq-radius);
  box-shadow: var(--zzq-shadow-sm); padding: 8px 18px 18px; margin-top: 12px;
}
.trcontentbox { padding: 6px 8px 0; }
.trcontentbox h1 { letter-spacing: .5px; }
.trinfo { border-bottom: 1px dashed var(--zzq-line); padding-bottom: 8px; width: auto; color: #97a1ad; }
.trinfo a { color: var(--zzq-primary); padding: 0 3px; }
.trcontent { padding: 14px 8px 6px; line-height: 1.9; color: #33393f; }
.trcontent p { margin: 0 0 1em; }
.trcontent a { color: var(--zzq-primary); border-bottom: 1px dotted rgba(0, 150, 229, .5); }
.trcontent a:hover { border-bottom-style: solid; }
.trcontent img { border-radius: 6px; box-shadow: var(--zzq-shadow-sm); }
.trcontent td { word-break: break-word; }
.trcontenttd p { text-indent: 0; }
.trshow h1 { color: var(--zzq-text); font-size: 24px; font-weight: 700; line-height: 1.5; }
.trsnotice { border: 1px solid var(--zzq-primary); background: var(--zzq-primary-soft); border-radius: 8px; color: #4a5765; }

/* 上一篇 / 下一篇 */
.trnearnews { color: #5c6670; padding: 4px 0; }
.trnearnews a { color: var(--zzq-text); transition: color .15s; }
.trnearnews a:hover { color: var(--zzq-primary); }
.trshare { padding: 6px 0; }

/* 侧栏小卡片 */
.trsmallblock1 {
  background: #fff; border: 1px solid var(--zzq-line); border-radius: var(--zzq-radius);
  box-shadow: var(--zzq-shadow-sm); padding-bottom: 8px; margin-top: 12px;
}
.trsmallblock1 .trlisttitle2 { margin: 0 12px; }
.trsmallblock1ul { padding: 4px 12px 0; }
.trlistnav { padding: 4px 8px 0; }

/* 搜索页 */
.trzwnr { color: #a5adb8; }

/* 小屏（<=767 / <=1199） */
@media screen and (max-width:767px) {
  .trshow, .trlist, .trsearch { padding: 6px 10px 12px; margin-top: 8px; }
  .trcontent { padding: 10px 2px; }
  .trshowtitle1, .trlisttitle1, .trsearchtitle1 { margin: 8px 0 10px; }
  .trsmallblock1 { margin-top: 10px; }
}
@media screen and (max-width:1199px) {
  /* P30：mediastyle.css 各断点把 .trinfo 压到 6px，这里统一提到 14px */
  .trinfo { font-size: 14px; line-height: 26px; }
}

/* ============================================================
   08 页脚
   ============================================================ */
.trabout, .trbottomtext { background: var(--zzq-bg-soft); border-top: 1px solid var(--zzq-line); }
.trabout { padding: 10px 0; }
.trinformation { color: #5c6670; max-width: 1100px; }
.trinformation a, .trinformation a:link, .trinformation a:visited { color: #6b7280; }
.trinformation a:hover, .trinformation a:active {
  color: #6b7280; background: transparent !important; text-decoration: underline;
}
.trinformation img { vertical-align: -2px; }
.trcopypower { color: #8b95a1; }
.trcopypower a { color: #6f7a87; }
.trcopypower a:hover { color: var(--zzq-primary); }
.trpoweredby, .trpoweredby a { color: #9aa6b2; }

/* 页脚内块：去掉白色卡片、收紧（P38）；隐藏空的分享占位保持行距一致（P39） */
#trabout178888 .trsmallblock1 {
  background: transparent; border: none; box-shadow: none;
  padding-top: 0; margin-top: 0;
}
#trabout178888 .trinformation { margin-bottom: 0px; }
#trabout178888 .trshare { display: none; }

/* ============================================================
   09 首页 - 顶部三栏（最新文章 / 焦点图+简介 / 热门文章+推荐阅读）
   ============================================================ */
.trnews { margin-top: 12px; padding-bottom: 0; height: auto; }
.trnewlist { height: auto; }

/* --- 中栏：焦点图 + 简介 --- */
.trslider .tabcon li p {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 100%);
  opacity: 1; filter: none; font-size: 15px; padding: 0 12px;
}
.dots li {
  width: 9px; height: 9px; background-color: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: all .2s ease;
}
.dots li.active { background-color: #fff; width: 22px; border-radius: 5px; }
.unslider-arrow {
  width: 44px; height: 44px; line-height: 44px; margin-top: -22px;
  background-color: rgba(20, 40, 60, .35); border-radius: 50%;
  font-size: 24px; opacity: 0; transition: all .2s ease;
}
.trslider:hover .unslider-arrow { opacity: 1; }
.unslider-arrow:hover { background-color: rgba(20, 40, 60, .6); }
/* P33：左右箭头向内收，不再贴边 */
.unslider-arrow.prev { left: 18px; }
.unslider-arrow.next { right: 18px; }

.trnewstop { padding: 12px 14px 15px; }
.trnewstop h3 { font-size: 20px; font-weight: 600; }
.trnewstop h3 a { color: var(--zzq-primary); }
.trnewstop h3 a {
  display: inline-block; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.trnewstop p { color: var(--zzq-text-sub); line-height: 1.8; margin-top: 4px; }
.trnewstop p {
  max-height: none; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.trdivline { border-bottom: 1px dashed var(--zzq-line); }
/* 首页中栏简介区不再需要那条空的分隔块（P53） */
.trnews .trdivline { display: none; }
/* 中栏简介：行距收紧 + 底部虚线（P60；P53 的压缩留白已被其覆盖） */
#trnewscenter178888 .trnewstop { padding-bottom: 8px; border-bottom: 1px dashed #c9d4dd; }
.trnews .trnewstop { padding-bottom: 4px; }
#trnewscenter178888 .trnewstop h3 { margin: 0 0 2px; line-height: 30px; }
#trnewscenter178888 .trnewstop p { line-height: 1.55; margin-top: 2px; }

/* --- 左栏：最新文章卡片（P52 收紧底部留白；P57 加底 -> P58 改为仅标题条底色） --- */
.tjyd {
  border: 1px solid var(--zzq-line); border-radius: var(--zzq-radius); background: #fff;
  box-shadow: var(--zzq-shadow-sm); padding-bottom: 0;
}
#tjyd178888 {
  background: linear-gradient(to bottom,
    var(--zzq-bg-soft) 0, var(--zzq-bg-soft) 38px,
    #ffffff 38px, #ffffff 100%);
}
.tjyd ul { margin-bottom: 0; padding-bottom: 0; }
.tjyd li:last-child { margin-bottom: 0; }

/* --- 右栏：热门文章 / 推荐阅读（P57 卡片化，P59 标题条降高，P56 拉开间距） --- */
#trhotnews178888 > .trtitle1:first-child {
  border: 1px solid var(--zzq-line);
  border-bottom: none;
  padding: 0;
  margin: 0;
}
#trhotnews178888 > .trhotnewsul {
  border: 1px solid var(--zzq-line);
  border-top: none;
  background: #fff;
  padding: 8px 14px 10px;
  margin: 0;
}
#trhotnews178888 .trhotnewsul + .trtitle1 {
  border: 1px solid var(--zzq-line);
  border-bottom: none;
  padding: 0;
  margin-top: 12px;
}
#trhotnews178888 .tr_smalllistkpul2 {
  border: 1px solid var(--zzq-line);
  border-top: none;
  background: #fff;
  padding: 8px 14px 10px;
  margin: 0;
}

/* --- 三栏布局：>=1200 用 flex 等高，列宽最终为 25% / 50% / 25%
       （P19c 为 28/44/28，P54 改 22/56/22，P56 回调为 25/50/25；
        calc 扣减量合计 2x20px，恰好扣掉两列间的 flex gap） --- */
@media screen and (min-width: 1200px) {
  .trnews { display: flex; flex-wrap: wrap; gap: 20px; }
  /* .trnews 同时是 .container：clearfix 伪元素会当成 flex 项吃掉两个 gap */
  .trnews:before, .trnews:after { display: none !important; content: none; }
  .trnews > [class*="col-"] { float: none; display: flex; flex-direction: column; }
  .trnews > .col-lg-3 { width: calc(28% - 11px); padding-left: 0; padding-right: 0; }
  .trnews > .col-lg-6 { width: calc(44% - 19px); padding-left: 0; padding-right: 0; }
  .trnews > #trfocusa178888 { width: calc(25% - 13px); }
  .trnews > #trnewscenter178888 { width: calc(50% - 14px); }
  .trnews > #trhotnews178888 { width: calc(25% - 13px); }
  .trnews > #trnewscenter178888 .trslider img { max-width: 100%; }
  .trnews > [class*="col-"] > .tjyd { flex: 1 1 auto; }
  .trnews .tjyd { height: 100%; }
}
/* 三栏底部对齐（P62）：左栏卡片与右栏推荐阅读列表拉伸填满列高 */
.trnews > #trfocusa178888 { display: flex; flex-direction: column; }
.trnews > #trfocusa178888 .tjyd { flex: 1 1 auto; height: auto; }
.trnews > #trhotnews178888 { display: flex; flex-direction: column; }
.trnews > #trhotnews178888 .tr_smalllistkpul2 { flex: 1 1 auto; }
@media screen and (min-width: 1200px) {
  .trcolumn { display: flex; flex-wrap: wrap; gap: 20px 14px; }
  .trcolumn:before, .trcolumn:after { display: none !important; content: none; }
  .trcolumn > [class*="col-"] { float: none; width: calc((100% - 28px) / 3); padding-left: 0; padding-right: 0; }
}

/* 平板区间：三栏变单列，右栏内容与左栏重复且排在最底部，整栏隐藏（P64） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .trnews > #trhotnews178888 { display: none; }
}

/* ============================================================
   10 首页 - 滚动图片区
   ============================================================ */
/* 区块：上方与三栏拉开 18px（P52），下方与栏目卡片留 8px（P61 的 20px 收紧于 P65） */
#trtollimg178888 { margin-top: 18px; margin-bottom: 8px; }
/* 标题条与内容框拼合成一个边框（P61 加边框，P63 去掉 5px 缝，P65 蓝块靠左） */
#trtollimg178888 > .trtitle2 {
  border: 1px solid var(--zzq-line);
  border-bottom: none;
  padding: 0 14px;
  margin: 0;
}
/* P65：蓝块贴齐左边框（与栏目卡片标题一致） */
#trtollimg178888 .trtitle2 { padding-left: 0; }
#trtollimg178888 .trrollimgnr {
  border: 1px solid var(--zzq-line);
  border-top: none;
  background: #fff;
  margin-top: 0;
  padding: 4px 12px 16px;
}
.trrollimgnr { border-radius: var(--zzq-radius); }
/* 卡片化：悬停上浮 + 图片阴影 */
.trrollimgnr ul li { transition: transform .2s ease; }
.trrollimgnr ul li:hover { transform: translateY(-3px); }
.trrollimgnr ul li img { border-radius: 6px; transition: box-shadow .2s ease; }
.trrollimgnr ul li:hover img { box-shadow: var(--zzq-shadow-md); }
.trrollimgnr ul li span a { color: var(--zzq-text-sub); }
.trrollimgnr ul li span a:hover { color: var(--zzq-primary); }
/* 图片间距：P63 的 6px 8px（限首页该块）覆盖 P19b 在 >=1200 的 10px 8px */
#trtollimg178888 .trrollimgnr ul li { margin: 6px 8px; }
@media screen and (min-width: 1200px) {
  /* style.css 给的是 width:1194px + margin:5px auto（比容器宽），>=1200 收回容器内 */
  .trrollimgnr { width: auto; margin: 5px 0; }
  .trrollimgnr ul li { margin: 10px 8px; }
  .trrollimgnr ul li:first-child { margin-left: 0; }
}

/* ============================================================
   11 首页 - 栏目卡片与友情链接
   ============================================================ */
/* 栏目卡片（IT业界 / 文章书籍 / 管理资料…） */
.trnewlist {
  background: #fff; border: 1px solid var(--zzq-line); border-radius: var(--zzq-radius);
  box-shadow: var(--zzq-shadow-sm); padding: 0 26px 12px; margin-bottom: 20px;
  transition: box-shadow .2s ease;
}
.trnewlist:hover { box-shadow: var(--zzq-shadow-md); }
/* 标题条悬出卡片内边距，右边留出 More.. 的位置（P19s；width:auto 覆盖 style.css 的 100%） */
.trnewlist .trtitle3 { width: auto; margin: 0 -26px 8px; padding: 0 38px 0 26px; border-bottom: 1px solid var(--zzq-line); }
@media screen and (max-width:767px) {
  .trnewlist { padding: 0 8px 8px; }
  .trnewlist .trtitle3 { margin: 0 -8px 6px; padding: 0 20px 0 8px; }
}
.trnewlist { height: auto; }
@media screen and (max-width: 1199px) { .trnewlist { margin-bottom: 22px; } }
/* P19g：旧表 .trrow991 的负外边距让相邻卡片贴在一起，平板区间归零 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .trnewlist.trrow991 { margin-left: 0; margin-right: 0; }
}
@media screen and (min-width: 1200px) { .trnewlist { margin-bottom: 0; } }

/* 卡片内的图文头条块 */
.trimgtext { padding: 10px 8px 8px; border-bottom: 1px dashed #eef1f4; }
.trimgtext > a { float: left; margin-right: 12px; }
.trimgtext img { border-radius: 6px; }
.trimgtext > a img { border-radius: 6px; }
.trtext1 h3 { line-height: 1.45; }
.trtext1 h3 a { color: #e2571b; font-weight: 600; }
.trtext1 h3 a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trtext1 p { color: var(--zzq-text-sub); margin-top: 5px; line-height: 1.6; font-size: 13px; }

/* 友情链接区（.trpublicline 卡片化；#trlink178888 为首页那一块） */
.trpublicline {
  background: #fff; border: 1px solid var(--zzq-line); border-radius: var(--zzq-radius);
  box-shadow: var(--zzq-shadow-sm); padding: 4px 16px 14px; margin: 22px 0;
}
.linktext { padding: 6px 2px 2px; }
.linktext li { margin: 6px 6px; height: 30px; line-height: 30px; }
.linktext li a {
  display: inline-block; padding: 0 14px; border-radius: 15px;
  background: var(--zzq-bg-soft); color: #5c6670; font-size: 13px;
  transition: all .18s ease;
}
.linktext li a:hover {
  background: var(--zzq-primary); color: #fff !important;
  box-shadow: 0 3px 10px var(--zzq-primary-ring);
}
.linkimg { padding: 4px 2px 0 10px; border-bottom: none; }
.linkimg ul li { float: left; margin: 6px 10px 6px 10px; }
.linkimg ul li a {
  display: block; border-radius: 0; overflow: hidden;
  box-shadow: none; transition: all .18s ease;
}
.linkimg ul li a:hover { transform: translateY(-2px); box-shadow: var(--zzq-shadow-md); }
/* 首页友情链接块：上 16px（P28 收紧）、下 12px（P19t）、补回上边框（P37） */
#trlink178888 {
  margin: 16px 0 12px;
  padding-bottom: 6px;
  border-top: 1px solid var(--zzq-line);
}
/* P31：小屏下与其他卡片左右对齐（.container 有 15px 内边距，这里用负边距拉平） */
@media screen and (max-width:1199px) {
  #trlink178888 { width: auto; margin-left: -15px; margin-right: -15px; }
}

/* ============================================================
   12 评论 / 留言 / 其它小模块
   ============================================================ */
.trp1 .uname, .trp1 .uname a { color: #d97a4a; }
.trp1 .uname { font-weight: 600; }
.trgcontent { border: 1px solid #ffd9a0; background: #fffdf7; border-radius: 8px; }
.trntblock { border-radius: 10px; overflow: hidden; box-shadow: var(--zzq-shadow-md); }
.trcontents .trp1 { background: #fff; }
.trsendguest, .trsendtb { border-radius: var(--zzq-radius); }
.trbookbt { font-weight: normal; }
/* 公告弹窗卡片 */
.adtop170528 { background: rgba(40, 50, 62, .92); border-radius: 10px; }

/* ============================================================
   13 主题配色与调色盘（切换逻辑在 skin/default/ui.js）
   ============================================================ */
html[data-theme="blue"] {
  --zzq-primary: #0096e5; --zzq-primary-dark: #0077c8; --zzq-accent: #F8AB00;
  --zzq-grad: linear-gradient(135deg, #00a9fe, #0080e8);
  --zzq-primary-soft: #f2f9ff; --zzq-primary-ring: rgba(0, 150, 229, .13);
}
html[data-theme="green"] {
  --zzq-primary: #12a35c; --zzq-primary-dark: #0b7f46; --zzq-accent: #f0a00c;
  --zzq-grad: linear-gradient(135deg, #2fbf74, #0f9052);
  --zzq-primary-soft: #f1fbf6; --zzq-primary-ring: rgba(18, 163, 92, .14);
}
html[data-theme="red"] {
  --zzq-primary: #d93a2b; --zzq-primary-dark: #b52a1d; --zzq-accent: #e8a20c;
  --zzq-grad: linear-gradient(135deg, #f05a45, #c62b1c);
  --zzq-primary-soft: #fdf3f1; --zzq-primary-ring: rgba(217, 58, 43, .14);
}
html[data-theme="gold"] {
  --zzq-primary: #bf8a12; --zzq-primary-dark: #9c6d06; --zzq-accent: #e0b93c;
  --zzq-grad: linear-gradient(135deg, #dfa92e, #bd8208);
  --zzq-primary-soft: #fdf8ec; --zzq-primary-ring: rgba(191, 138, 18, .16);
}
html[data-theme="violet"] {
  --zzq-primary: #6f4bdd; --zzq-primary-dark: #5738bb; --zzq-accent: #f0a00c;
  --zzq-grad: linear-gradient(135deg, #8a68f0, #5c37c9);
  --zzq-primary-soft: #f5f2ff; --zzq-primary-ring: rgba(111, 75, 221, .14);
}
html[data-theme="ink"] {
  --zzq-primary: #3d4652; --zzq-primary-dark: #262c34; --zzq-accent: #4a90d9;
  --zzq-grad: linear-gradient(135deg, #525d6b, #2c333c);
  --zzq-primary-soft: #f4f6f8; --zzq-primary-ring: rgba(61, 70, 82, .14);
}

/* 把旧表里写死的品牌色也交给变量（换主题后各处跟着变） */
.trfont1, .trfont3 { color: var(--zzq-primary); }

/* 调色盘（右下角浮钮 + 面板） */
.zzq-theme-btn {
  position: fixed; right: 14px; bottom: 98px; width: 44px; height: 44px;
  border: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--zzq-grad); color: #fff; opacity: .72;
  box-shadow: var(--zzq-shadow-md); z-index: 99990;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}
.zzq-theme-btn:hover { opacity: 1; transform: translateY(-2px); }
.zzq-theme-btn svg { width: 23px; height: 23px; fill: #fff; }
.zzq-theme-panel {
  position: fixed; right: 70px; bottom: 98px; z-index: 99991; display: none;
  background: #fff; border: 1px solid var(--zzq-line); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(16, 42, 67, .18); padding: 12px 14px;
}
.zzq-theme-panel.on { display: block; animation: zzqThemePop .16s ease; }
@keyframes zzqThemePop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.zzq-theme-t { font-size: 12px; font-weight: 600; color: var(--zzq-text-sub); margin-bottom: 10px; letter-spacing: .5px; }
.zzq-theme-row { display: flex; gap: 10px; }
.zzq-sw {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; position: relative;
  box-shadow: 0 0 0 1px #e3e9ee; transition: transform .15s ease, box-shadow .15s ease;
}
.zzq-sw:hover { transform: scale(1.12); }
.zzq-sw.on { box-shadow: 0 0 0 2px var(--zzq-primary); }
.zzq-sw.on::after {
  content: ""; position: absolute; left: 10px; top: 5px; width: 6px; height: 11px;
  border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg);
}
@media screen and (max-width:1199px) {
  .zzq-theme-btn { width: 40px; height: 40px; right: 10px; bottom: 100px; }
  .zzq-theme-panel { right: 10px; bottom: 150px; }
}

/* ============================================================
   14 返回顶部 / 灯箱 / 移动端底栏
   注意：小屏 #trscrollup 的覆盖块必须放在基础规则之前
   （P16 在前、P18 在后，P18 的 font-size:0/opacity:.55 最终生效）
   ============================================================ */
@media screen and (max-width:1199px) {
  #trscrollup { bottom: 70px; right: 12px; opacity: .85; font-size: 26px; line-height: 44px; }
  .trmbottommenu { box-shadow: 0 -2px 10px rgba(16, 42, 67, .08); }
  .trmbottommenu>ul>li a { color: #4a5560; }
}
#trscrollup {
  width: 44px !important; height: 44px !important; font-size: 0;
  bottom: 40px; right: 14px; border-radius: 50%;
  background: var(--zzq-grad); color: #fff; opacity: .55;
  box-shadow: var(--zzq-shadow-md); transition: opacity .2s ease;
}
#trscrollup:hover { opacity: 1; }
#trscrollup i { font-size: 22px; line-height: 44px; }
.trcontent img { cursor: zoom-in; }