/* ===================================================================
   article.css —— 帮助中心浅色 Techvia 风（default 列表 + show 详情 共用）
   hero 保持深蓝 banner + 搜索；其余浅色、直角
=================================================================== */
:root{ --at-primary:#2563eb; --at-dark:#1d4ed8; --at-heading:#0b1f4d; --at-text:#5f6b7e; --at-muted:#8a98a8; --at-border:#e6e9ef; --at-soft:#f5f7fa; }
.article-page{ background:#fff; }

/* ===== Hero（深蓝 banner + 搜索） ===== */
.article-hero{ position:relative; overflow:hidden; padding:140px 20px 70px; text-align:center; background:linear-gradient(to bottom,#021B79 0%,#0575E6 100%); }
.article-hero-content{ position:relative; z-index:2; max-width:720px; margin:0 auto; }
.article-hero-icon{ width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); }
.article-hero-icon svg{ width:30px; height:30px; color:#fff; }
.article-hero h1{ font-size:38px; font-weight:700; color:#fff; margin:0 0 12px; }
.article-hero h1 .gradient-text{ color:#fff; }
.article-hero p{ font-size:16px; color:rgba(255,255,255,.85); margin:0 0 28px; }

/* 搜索条 */
.article-search{ max-width:560px; margin:0 auto; }
.article-search-form{ display:flex; border:1px solid #c7d3e8; box-shadow:0 8px 24px rgba(2,16,60,.18); }
.article-search-input{ flex:1; min-width:0; height:50px; padding:0 18px; border:none; font-size:15px; color:var(--at-heading); background:#fff; outline:none; }
.article-search-input::placeholder{ color:#a7b0bd; }
.article-search-btn{ height:50px; padding:0 26px; display:inline-flex; align-items:center; gap:7px; background:linear-gradient(135deg,#ffd24a,#f5b301); color:#5a3d00; border:none; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; }
.article-search-btn svg{ width:18px; height:18px; }
.article-search-btn:hover{ filter:brightness(1.05); }

/* ===== 主区：侧栏 + 内容 ===== */
.article-main{ max-width:1200px; margin:0 auto; padding:50px 20px; display:flex; gap:28px; align-items:flex-start; }
.article-sidebar{ flex:0 0 240px; }
.article-sidebar-card{ background:#fff; border:1px solid var(--at-border); position:sticky; top:90px; }
.article-sidebar-header{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--at-border); }
.article-sidebar-header svg{ width:18px; height:18px; color:var(--at-primary); }
.article-sidebar-header h3{ font-size:15px; font-weight:700; color:var(--at-heading); margin:0; }
.article-category-list{ display:flex; flex-direction:column; padding:8px; }
.article-category-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; font-size:14px; color:var(--at-text); text-decoration:none; transition:.2s; border-left:3px solid transparent; }
.article-category-item svg{ width:15px; height:15px; opacity:.5; }
.article-category-item:hover{ background:var(--at-soft); color:var(--at-primary); }
.article-category-item.active{ background:#eaf1ff; color:var(--at-primary); font-weight:700; border-left-color:var(--at-primary); }

.article-content-area{ flex:1; min-width:0; }

/* 搜索提示 */
.article-search-tip{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--at-soft); border:1px solid var(--at-border); padding:12px 18px; margin-bottom:20px; font-size:14px; color:var(--at-text); }
.article-search-tip strong{ color:var(--at-heading); }
.article-search-tip-clear{ display:inline-flex; align-items:center; gap:5px; color:var(--at-primary); text-decoration:none; white-space:nowrap; }
.article-search-tip-clear svg{ width:15px; height:15px; }

/* 文章列表卡 */
.article-list{ display:flex; flex-direction:column; gap:12px; }
.article-card{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--at-border); padding:18px 20px; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; }
.article-card:hover{ transform:translateX(4px); border-color:#cdd9f5; box-shadow:0 10px 26px rgba(20,40,80,.08); }
.article-card-icon{ flex:0 0 auto; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#eaf1ff; color:var(--at-primary); }
.article-card-icon svg{ width:20px; height:20px; }
.article-card-content{ flex:1; min-width:0; }
.article-card-title{ font-size:15px; font-weight:600; color:var(--at-heading); margin-bottom:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-card-meta{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--at-muted); }
.article-card-meta svg{ width:13px; height:13px; }
.article-card-arrow{ flex:0 0 auto; color:#c2cbd8; transition:.2s; }
.article-card-arrow svg{ width:18px; height:18px; }
.article-card:hover .article-card-arrow{ color:var(--at-primary); }

/* 空状态 */
.article-empty{ text-align:center; padding:70px 20px; color:var(--at-muted); }
.article-empty-icon{ width:64px; height:64px; margin:0 auto 16px; color:#cdd9f5; }
.article-empty-icon svg{ width:100%; height:100%; }

/* 分页 */
.article-pagination{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:36px; }
.article-pagination a,.article-pagination span{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:40px; padding:0 14px; background:#fff; border:1px solid var(--at-border); color:var(--at-text); text-decoration:none; font-size:14px; transition:.2s; }
.article-pagination a:hover{ border-color:var(--at-primary); color:var(--at-primary); }
.article-pagination .pg-num.active{ background:var(--at-primary); border-color:var(--at-primary); color:#fff; font-weight:700; }
.article-pagination .pg-nav.disabled{ color:var(--at-muted); background:var(--at-soft); opacity:.6; cursor:not-allowed; }
.article-pagination .pg-dots{ border:none; background:transparent; min-width:auto; padding:0 2px; color:var(--at-muted); }
.article-pagination svg{ width:16px; height:16px; }

/* ===== 详情页（show.asp） ===== */
.article-detail-card{ background:#fff; border:1px solid var(--at-border); padding:36px 40px; }
.article-detail-header{ padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid var(--at-border); }
.article-detail-title{ font-size:26px; font-weight:700; color:var(--at-heading); line-height:1.4; margin:0 0 14px; }
.article-detail-meta{ display:flex; flex-wrap:wrap; gap:18px; }
.article-detail-meta-item{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--at-muted); }
.article-detail-meta-item svg{ width:15px; height:15px; }
/* ===== 正文排版美化 ===== */
.article-detail-body{ font-size:15.5px; color:#3d4757; line-height:1.95; word-break:break-word; }
.article-detail-body > *:first-child{ margin-top:0; }
.article-detail-body p{ margin:0 0 18px; }
.article-detail-body h1,.article-detail-body h2,.article-detail-body h3,.article-detail-body h4,.article-detail-body h5{ color:var(--at-heading); font-weight:700; line-height:1.4; margin:34px 0 14px; }
.article-detail-body h2{ font-size:22px; padding-bottom:10px; border-bottom:1px solid var(--at-border); }
.article-detail-body h3{ font-size:19px; }
.article-detail-body h4{ font-size:16.5px; padding-left:12px; border-left:3px solid var(--at-primary); }
.article-detail-body h5{ font-size:15px; }
.article-detail-body a{ color:var(--at-primary); text-decoration:none; border-bottom:1px solid rgba(37,99,235,.3); transition:.2s; }
.article-detail-body a:hover{ border-bottom-color:var(--at-primary); }
.article-detail-body strong,.article-detail-body b{ color:var(--at-heading); font-weight:700; }
.article-detail-body img{ max-width:100%; height:auto; display:block; margin:22px auto; border:1px solid var(--at-border); }
.article-detail-body ul,.article-detail-body ol{ margin:0 0 18px; padding-left:24px; }
.article-detail-body li{ margin:8px 0; }
.article-detail-body ul li::marker{ color:var(--at-primary); }
.article-detail-body blockquote{ margin:20px 0; padding:14px 20px; background:var(--at-soft); border-left:4px solid var(--at-primary); color:#55606f; }
.article-detail-body blockquote p:last-child{ margin-bottom:0; }
.article-detail-body code{ background:#eef2f8; color:#d6336c; padding:2px 7px; font-size:13.5px; font-family:Consolas,Monaco,monospace; }
.article-detail-body pre{ background:#0f1b33; color:#e6ebf5; padding:18px 20px; overflow:auto; margin:0 0 18px; font-size:13.5px; line-height:1.7; }
.article-detail-body pre code{ background:none; color:inherit; padding:0; }
.article-detail-body hr{ border:none; border-top:1px solid var(--at-border); margin:28px 0; }
.article-detail-body table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px; }
.article-detail-body th,.article-detail-body td{ border:1px solid var(--at-border); padding:10px 14px; text-align:left; }
.article-detail-body th{ background:var(--at-soft); color:var(--at-heading); font-weight:700; }
.article-detail-body tr:nth-child(even) td{ background:#fafbfd; }
.article-detail-footer{ margin-top:30px; padding-top:24px; border-top:1px solid var(--at-border); }
.article-back-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; background:linear-gradient(135deg,var(--at-primary),var(--at-dark)); color:#fff; text-decoration:none; font-size:14px; font-weight:700; transition:.25s; }
.article-back-btn:hover{ color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.3); transform:translateY(-2px); }
.article-back-btn svg{ width:16px; height:16px; }

/* 相关文章（侧栏） */
.article-related{ background:#fff; border:1px solid var(--at-border); margin-top:20px; }
.article-related-title,.article-related > h3{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--at-heading); padding:16px 20px; border-bottom:1px solid var(--at-border); margin:0; }
.article-related-title svg{ width:18px; height:18px; flex:0 0 auto; color:var(--at-primary); }
.article-related-list{ display:flex; flex-direction:column; padding:8px; }
.article-related-item{ display:block; padding:10px 14px; color:var(--at-text); text-decoration:none; font-size:13.5px; transition:.2s; }
.article-related-item:hover{ background:var(--at-soft); color:var(--at-primary); }
.article-related-item-title{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:900px){
  .article-main{ flex-direction:column; }
  .article-sidebar{ flex:none; width:100%; }
  .article-sidebar-card{ position:static; }
  .article-category-list{ flex-direction:row; flex-wrap:wrap; }
  .article-category-item{ border-left:none; }
}
@media (max-width:768px){
  .article-hero{ padding:118px 20px 50px; }
  .article-hero h1{ font-size:28px; }
  .article-detail-card{ padding:26px 22px; }
}

/* ===== hero 内（.page-hero 左文右图）：搜索条左对齐 + 详情页面包屑/meta ===== */
.hero-copy .article-search{ max-width:520px; margin:24px 0 0; }
.hero-copy .article-search-input{ height:48px; }
.hero-copy .article-search-btn{ height:48px; }
.article-hero-bread{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; margin-bottom:14px; }
.article-hero-bread a{ color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s; }
.article-hero-bread a:hover{ color:#fff; }
.article-hero-bread span{ color:rgba(255,255,255,.4); }
.article-hero-bread em{ color:#fff; font-style:normal; }
.article-hero-meta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px; }
.article-hero-meta .m{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:rgba(255,255,255,.82); }
.article-hero-meta .m i{ opacity:.85; }
.article-detail-card.no-head{ padding-top:30px; }
/* 详情页：面包屑/标题/时间分类位于右侧内容列顶部、正文卡上方 */
.article-content-head{ margin-bottom:20px; }
.article-bread{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--at-muted); margin-bottom:14px; }
.article-bread a{ color:var(--at-text); text-decoration:none; transition:color .2s; }
.article-bread a:hover{ color:var(--at-primary); }
.article-bread span{ color:#c2cbd8; }
.article-bread em{ color:var(--at-heading); font-style:normal; }
.article-content-head h1{ font-size:28px; font-weight:700; color:var(--at-heading); line-height:1.4; margin:0 0 14px; }
.article-head-meta{ display:flex; flex-wrap:wrap; gap:18px; }
.article-head-meta span{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--at-muted); }
.article-head-meta span i{ color:var(--at-primary); }
/* 详情页：侧栏不吸顶，分类与相关文章一起随页面滚动（避免相关文章被吸顶分类盖住） */
.article-detail-page .article-sidebar-card{ position:static; }
.article-detail-page .article-related{ margin-top:20px; }
@media (max-width:768px){ .article-content-head h1{ font-size:23px; } }