/* ============================================================
   SoeayCMS 内页通用：列表 / 详情 / 单页 / 留言 / 搜索 / 标签
   ============================================================ */

.inner-section { padding: 56px 0 84px; }

/* 两栏布局（主内容 + 侧栏） */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: start;
}
.layout-main { min-width: 0; }
.layout-narrow { max-width: 820px; margin: 0 auto; }

/* 内容白卡 */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: 40px 44px;
}
.panel + .panel { margin-top: 24px; }

/* ============================================================
   文章列表
   ============================================================ */
.post-list { display: flex; flex-direction: column; }
.post-item {
    display: block;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}
.post-item:first-child { padding-top: 0; }
.post-item:last-child { border-bottom: none; padding-bottom: 0; }
.post-item a.post-title { display: block; }
.post-title {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 700; color: var(--ink-900);
    line-height: 1.5; margin-bottom: 8px;
    display: flex; align-items: center;  flex-wrap: wrap;
}
a.post-item:hover .post-title, .post-item a:hover .post-title { color: var(--brand-700); }
.post-desc {
    color: var(--ink-500); font-size: var(--fs-sm); line-height: 1.8;
    margin-bottom: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-desc em, .post-title em { color: #ff0000; font-style: normal; font-weight: 700; }
.post-meta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    font-size: var(--fs-xs); color: var(--ink-400);
}
.post-meta span { display: inline-flex; align-items: center; gap: 5px; }
.post-meta .icon { width: 14px; height: 14px; }
.post-meta .m-cat { color: var(--brand-600); font-weight: 600; }

/* 带缩略图的列表项 */
.post-item.has-thumb {
    display: grid; grid-template-columns: 168px minmax(0, 1fr);
    gap: 22px; align-items: center;
}
.post-thumb {
    width: 168px; height: 118px; border-radius: var(--r-md);
    overflow: hidden; background: var(--bg-soft);
    border: 1px solid var(--line);
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-body { min-width: 0; }

/* 列表空态 */
.list-empty { text-align: center; padding: 72px 24px; }
.list-empty .e-icon {
    width: 68px; height: 68px; margin: 0 auto 18px;
    border-radius: 16px; background: var(--brand-50); color: var(--brand-500);
    display: flex; align-items: center; justify-content: center;
}
.list-empty h3 { font-size: 17px; color: var(--ink-800); margin-bottom: 8px; }
.list-empty p { color: var(--ink-500); font-size: var(--fs-sm); }

/* ============================================================
   侧栏
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--header-h) + 20px); }
.widget {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    padding: 22px;
}
.widget-title {
    font-size: 15px; font-weight: 700; color: var(--ink-900);
    padding-bottom: 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.widget + .widget { margin-top: 0; }

/* 热门排行 */
.hot-rank li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.hot-rank li:not(:last-child) { border-bottom: 1px dashed var(--line); }
.rank-no {
    flex: none; width: 20px; height: 20px; border-radius: 5px;
    background: var(--bg-soft); color: var(--ink-400);
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.hot-rank li:nth-child(-n+3) .rank-no { background: var(--brand-600); color: #fff; }
.hot-rank a {
    flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-700);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hot-rank a:hover { color: var(--brand-700); }
.hot-rank .v { flex: none; font-size: var(--fs-xs); color: var(--ink-300); }

/* 侧栏联系 */
.side-contact li { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: var(--fs-sm); color: var(--ink-600); }
.side-contact .icon { width: 17px; height: 17px; color: var(--brand-600); flex: none; }

/* 侧栏搜索 */
.side-search form { display: flex; gap: 8px; }
.side-search input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    font-size: var(--fs-sm); background: #fff;
}
.side-search input:focus { outline: none; border-color: var(--brand-400); }
.side-search button {
    flex: none; width: 42px; height: 40px; border-radius: var(--r-sm);
    background: var(--grad-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.side-search .icon { width: 17px; height: 17px; }

/* 手册目录侧栏（高度跟随视口：100vh - 吸顶偏移/标题/卡片内边距/底部留白） */
.doc-toc { max-height: calc(100vh - 200px); overflow-y: auto; position: relative; counter-reset: tocn; scrollbar-width: thin; }
@supports (height: 100dvh) {
    .doc-toc { max-height: calc(100dvh - 200px); }
}
.doc-toc li { padding: 0; counter-increment: tocn; }
.doc-toc a {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 12px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); color: var(--ink-600); line-height: 1.5;
}
.doc-toc a::before {
    content: counter(tocn, decimal-leading-zero);
    flex: none; width: 22px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    color: var(--ink-300); letter-spacing: .02em;
}
.doc-toc a:hover { background: var(--brand-50); color: var(--brand-700); }
.doc-toc a:hover::before { color: var(--brand-500); }
.doc-toc li.active a { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.doc-toc li.active a::before { color: var(--brand-600); font-weight: 700; }

/* 标签云 */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
    display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: #fff; font-size: var(--fs-sm); color: var(--ink-600);
}
.tag-cloud a:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); }

/* ============================================================
   文章详情
   ============================================================ */
.article-head { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.article-head h1 {
    font-family: var(--font-display);
    font-size: 28px; font-weight: 700; color: var(--ink-900);
    line-height: 1.4; margin-bottom: 14px;
}
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.article-tags .tags-label { font-size: var(--fs-sm); color: var(--ink-400); }
.article-tags a {
    display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
    background: var(--brand-50); color: var(--brand-700);
    border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
}
.article-gallery { margin-top: 28px; }
.article-gallery img { border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: 12px; }

.article-pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line);
}
.pager-cell {
    display: flex; flex-direction: column; gap: 5px;
    padding: 14px 18px; border: 1px solid var(--line);
    border-radius: var(--r-md); background: #fff;
    font-size: var(--fs-sm);
}
.pager-cell.next { text-align: right; }
.pager-cell .pk { color: var(--ink-400); font-size: var(--fs-xs); }
.pager-cell .pt { color: var(--ink-800); font-weight: 600; }
.pager-cell a:hover .pt { color: var(--brand-700); }

/* ============================================================
   表单（留言 / 搜索）
   ============================================================ */
.field { margin-bottom: 20px; }
.f-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); margin-bottom: 8px; }
.f-label .req { color: var(--danger); margin-left: 3px; }
.input, .textarea {
    width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
    padding: 0 16px; height: 46px; font-size: 15px; color: var(--ink-800);
    background: #fff; font-family: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea { height: 132px; padding: 12px 16px; resize: vertical; line-height: 1.7; }
.input:focus, .textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(31,139,216,.12); }
.captcha-row { display: flex; gap: 12px; align-items: stretch; }
.captcha-row .input { flex: 1; min-width: 0; }
img.captcha-img {
    height: 46px; width: 132px; flex: none;
    border: 1.5px solid var(--line); border-radius: var(--r-sm);
    cursor: pointer; background: #fff; object-fit: cover; padding: 0;
}
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; }

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px; border-radius: var(--r-md);
    font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 24px;
}
.alert .icon { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid #cbeadd; }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f6d4d1; }

/* 搜索页大搜索框 */
.search-bar {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px 32px; margin-bottom: 28px;
}
.search-bar form { display: flex; gap: 12px; }
.search-bar input {
    flex: 1; min-width: 0; height: 50px; padding: 0 18px;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: 15px;
}
.search-bar input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(31,139,216,.12); }
.search-stat { font-size: var(--fs-sm); color: var(--ink-400); margin: 0 0 20px; }
.search-stat b { color: var(--brand-600); }

/* ============================================================
   下载中心
   ============================================================ */
.dl-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 26px 0 8px; }
.dl-step {
    border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 22px 20px; background: #fff; position: relative;
}
.dl-step .num {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--brand-50); color: var(--brand-700);
    font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.dl-step h4 { font-size: 15px; color: var(--ink-900); margin-bottom: 6px; }
.dl-step p { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.7; margin: 0; }

.dl-cta {
    margin-top: 28px; border-radius: var(--r-lg);
    background: var(--grad-navy); color: #fff;
    padding: 34px 38px; display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.dl-cta h3 { font-size: 20px; margin-bottom: 8px; }
.dl-cta p { color: rgba(255,255,255,.68); font-size: var(--fs-sm); margin: 0; }
.dl-cta .btns { display: flex; gap: 12px; flex-wrap: wrap; }
.dl-cta .btn-light { background: #fff; color: #10355c; border: 1.5px solid #fff; }
.dl-cta .btn-light:hover { background: rgba(255,255,255,.88); color: #10355c; }
.dl-cta .btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.dl-cta .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }
.dl-meta {
    display: flex; gap: 28px; flex-wrap: wrap;
    margin-top: 26px; padding: 18px 24px;
    background: var(--bg-soft); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--ink-600);
}
.dl-meta b { color: var(--ink-900); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .doc-toc { max-height: 46vh; }
    .dl-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .panel { padding: 28px 22px; }
    .article-head h1 { font-size: 22px; }
    .post-item.has-thumb { grid-template-columns: 1fr; }
    .post-thumb { width: 100%; height: 180px; }
    .article-pager { grid-template-columns: 1fr; }
    .pager-cell.next { text-align: left; }
    .dl-steps { grid-template-columns: 1fr; }
    .dl-cta { padding: 28px 24px; }
    .search-bar { padding: 22px 18px; }
}