/* ============================================================
 * 新闻/文章页（news 列表 + 详情）· site 风格
 * 复用 site-shell.css 的 --pk-* 变量，深浅色自动适配。
 * ============================================================ */
.nw-hero{ background:linear-gradient(135deg,var(--pk-blue),#2f6bff); color:#fff; padding:52px 0; text-align:center; }
[data-theme="dark"] .nw-hero{ background:linear-gradient(135deg,#122152,#16307a); }
.nw-hero h1{ font-size:30px; font-weight:600; margin:0 0 10px; }
.nw-hero p{ font-size:14px; color:rgba(255,255,255,.85); margin:0; }
.nw-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* 栏目 tab */
.nw-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; background:var(--pk-surface);
  border-bottom:1px solid var(--pk-line); padding:14px 12px; box-shadow:0 2px 12px var(--pk-shadow-sm); }
.nw-tabs a{ padding:7px 18px; border-radius:999px; font-size:14px; color:var(--pk-text); transition:.2s; text-decoration:none; }
.nw-tabs a:hover{ color:var(--pk-blue); }
.nw-tabs a.on{ background:var(--pk-blue); color:#fff; }

/* 面包屑 */
.nw-crumb{ font-size:13px; color:var(--pk-muted); padding:18px 0; }
.nw-crumb a{ color:var(--pk-muted); text-decoration:none; } .nw-crumb a:hover{ color:var(--pk-blue); }

/* 列表 */
.nw-list{ display:flex; flex-direction:column; gap:16px; padding-bottom:40px; }
.nw-item{ display:flex; gap:20px; align-items:center; background:var(--pk-surface); border:1px solid var(--pk-line);
  border-radius:14px; padding:18px; transition:.2s; text-decoration:none; }
.nw-item:hover{ transform:translateY(-3px); box-shadow:0 14px 34px var(--pk-shadow); border-color:#c9d6f5; }
.nw-item .thumb{ width:190px; height:118px; flex:0 0 190px; border-radius:10px; object-fit:cover; background:var(--pk-bg-alt); }
.nw-item .body{ flex:1; min-width:0; }
.nw-item h3{ font-size:18px; font-weight:600; color:var(--pk-ink); margin:0 0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nw-item p{ font-size:13.5px; color:var(--pk-muted); line-height:1.8; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nw-item .date{ flex:0 0 auto; text-align:center; color:var(--pk-muted); font-size:13px; padding-left:18px; border-left:1px solid var(--pk-line); }
.nw-item .date b{ display:block; font-size:26px; color:var(--pk-ink); font-weight:600; line-height:1.1; }
.nw-empty{ text-align:center; color:var(--pk-muted); padding:64px 0; }

/* 详情 */
.nw-detail{ display:grid; grid-template-columns:1fr 300px; gap:32px; padding:24px 0 48px; align-items:start; }
.nw-main{ background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:16px; padding:32px 36px; }
.nw-main h1{ font-size:26px; font-weight:600; color:var(--pk-ink); margin:0 0 12px; line-height:1.4; }
.nw-meta{ font-size:13px; color:var(--pk-muted); padding-bottom:20px; border-bottom:1px solid var(--pk-line); margin-bottom:24px; }
.nw-article{ font-size:15px; color:var(--pk-text); line-height:1.9; word-wrap:break-word; }
.nw-article img{ max-width:100%; height:auto; border-radius:8px; }
.nw-article p{ margin:0 0 16px; }
.nw-fy{ display:flex; justify-content:space-between; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--pk-line); font-size:13.5px; }
.nw-fy a{ color:var(--pk-text); text-decoration:none; max-width:48%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nw-fy a:hover{ color:var(--pk-blue); }
.nw-side{ background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:16px; padding:22px 24px; }
.nw-side h4{ font-size:16px; color:var(--pk-ink); margin:0 0 16px; padding-left:10px; border-left:3px solid var(--pk-blue); }
.nw-side a{ display:block; font-size:13.5px; color:var(--pk-text); padding:10px 0; border-bottom:1px dashed var(--pk-line);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nw-side a:last-child{ border-bottom:0; } .nw-side a:hover{ color:var(--pk-blue); }

/* 分页（套用系统 home_link 输出）*/
.nw-page{ text-align:center; padding:6px 0 44px; }
.nw-page a,.nw-page span{ display:inline-block; min-width:36px; padding:0 10px; height:36px; line-height:34px;
  border:1px solid var(--pk-line); border-radius:8px; margin:0 3px; font-size:14px; color:var(--pk-text); text-decoration:none; background:var(--pk-surface); }
.nw-page a:hover{ border-color:var(--pk-blue); color:var(--pk-blue); }
.nw-page .active span,.nw-page a.active,.nw-page .current{ background:var(--pk-blue); border-color:var(--pk-blue); color:#fff; }

@media(max-width:900px){
  .nw-hero{ padding:44px 0 36px; } .nw-hero h1{ font-size:24px; }
  .nw-detail{ grid-template-columns:1fr; }
  .nw-item{ flex-wrap:wrap; }
  .nw-item .thumb{ flex-basis:100%; width:100%; height:180px; }
  .nw-item .date{ border-left:0; padding-left:0; text-align:left; }
  .nw-item .date b{ display:inline; font-size:13px; }
  .nw-main{ padding:24px 20px; }
}

/* ============================================================
 * 帮助文档 / 技术支持（news/support）
 * 左侧分类栏 + 右侧文档列表，hero 里带一个搜索框。
 * ============================================================ */
.hp-hero{ padding:44px 0 38px; }
/* 按钮原来是直角、和 hero 同一个蓝，贴在白胶囊右端时既看不出是按钮、
   右下角还像缺了一块。改成白胶囊里嵌一颗深一号的蓝药丸，边界就出来了 */
.hp-search{ display:flex; align-items:center; gap:6px; max-width:560px; margin:22px auto 0;
  padding:4px; background:#fff; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.hp-search input{ flex:1; min-width:0; border:0; outline:0; height:38px; padding:0 20px;
  font-size:14px; color:#0d1526; background:transparent; }
.hp-search input::placeholder{ color:#9aa4b5; }
.hp-search button{ flex:none; border:0; height:38px; padding:0 26px; border-radius:999px;
  cursor:pointer; background:#1d4ed8; color:#fff; font-size:14px; font-weight:500;
  transition:background .18s, transform .18s; }
.hp-search button:hover{ background:#1740b6; }
.hp-search button:active{ transform:scale(.97); }

.hp-body{ display:grid; grid-template-columns:216px 1fr; gap:24px; align-items:start; padding-bottom:44px; }
.hp-side{ background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:16px; padding:18px 16px; }
.hp-side h4{ font-size:15px; color:var(--pk-ink); margin:0 0 12px; padding-left:10px;
  border-left:3px solid var(--pk-blue); }
.hp-side a{ display:block; padding:9px 12px; border-radius:9px; font-size:13.5px;
  color:var(--pk-text); text-decoration:none; }
.hp-side a:hover{ background:var(--pk-bg-alt); color:var(--pk-blue); }
.hp-side a.on{ background:var(--pk-blue); color:#fff; }

.hp-main{ min-width:0; }
.hp-list{ display:flex; flex-direction:column; gap:12px; }
.hp-item{ display:block; background:var(--pk-surface); border:1px solid var(--pk-line);
  border-radius:14px; padding:18px 20px; text-decoration:none; transition:.2s; }
.hp-item:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--pk-shadow); border-color:#c9d6f5; }
.hp-item h3{ font-size:16px; font-weight:600; color:var(--pk-ink); margin:0 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-item p{ font-size:13.5px; color:var(--pk-muted); line-height:1.8; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hp-item .tm{ display:block; margin-top:10px; font-size:12.5px; color:var(--pk-muted); }

@media(max-width:900px){
  .hp-body{ grid-template-columns:1fr; }
  .hp-side{ display:flex; flex-wrap:wrap; gap:6px; padding:12px; }
  .hp-side h4{ width:100%; margin-bottom:6px; }
  .hp-side a{ padding:6px 13px; border-radius:999px; border:1px solid var(--pk-line); }
}

/* 帮助文档 · 详情 */
.hp-doc{ background:var(--pk-surface); border:1px solid var(--pk-line); border-radius:16px; padding:30px 34px; }
.hp-doc h1{ font-size:24px; font-weight:600; color:var(--pk-ink); margin:0 0 12px; line-height:1.45; }
.hp-meta{ display:flex; gap:18px; font-size:13px; color:var(--pk-muted);
  padding-bottom:18px; border-bottom:1px solid var(--pk-line); margin-bottom:22px; }

/* 有用 / 没用 */
.hp-vote{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:30px; padding:16px 18px; border-radius:12px; background:var(--pk-bg-alt); }
.hp-vote .q{ font-size:13.5px; color:var(--pk-text); }
.hp-vote .v{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px;
  border:1px solid var(--pk-line); border-radius:999px; background:var(--pk-surface);
  font-size:13px; color:var(--pk-text); cursor:pointer; text-decoration:none; transition:.2s; }
.hp-vote .v:hover{ border-color:var(--pk-blue); color:var(--pk-blue); }
.hp-vote .v i{ font-style:normal; font-size:14px; line-height:1; }
.hp-vote.done .v{ display:none; }

/* 同类文档 */
.hp-rel{ margin-top:16px; background:var(--pk-surface); border:1px solid var(--pk-line);
  border-radius:16px; padding:20px 24px; }
.hp-rel h4{ font-size:15px; color:var(--pk-ink); margin:0 0 12px;
  padding-left:10px; border-left:3px solid var(--pk-blue); }
.hp-rel-list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 24px; }
.hp-rel-list a{ display:block; font-size:13.5px; color:var(--pk-text); padding:8px 0;
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-rel-list a:hover{ color:var(--pk-blue); }
@media(max-width:900px){
  .hp-doc{ padding:22px 18px; }
  .hp-rel-list{ grid-template-columns:1fr; }
}