/* Design Tokens 见 tokens.css(前后台共用)*/

* { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; overflow: hidden; } /* 高度约束 + 禁止滚动,只有 .app-body 内滚动 */
body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Microsoft YaHei", Helvetica, Arial, sans-serif;
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--c-link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--c-primary); }

/* ============ 顶部导航 ============ */
.site-header {
    flex-shrink: 0; /* 顶部导航不压缩,固定占位 */
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}
@media (prefers-color-scheme: dark) {
    .site-header { background: rgba(13,17,23,.92); }
}
.header-inner {
    max-width: var(--w-shell); margin: 0 auto; padding: 0;
    height: 60px; display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 900px) { .header-inner { padding: 0 var(--sp-4); } }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--c-text); }
.logo:hover { color: var(--c-primary); }
.logo-mark { color: var(--c-primary); }
.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav a {
    color: var(--c-text-soft); font-size: 15px; font-weight: 500;
    padding: 7px 14px; border-radius: 8px; transition: all .15s;
}
.site-nav a:hover { color: var(--c-primary); background: var(--c-primary-soft); }
.site-nav a.rss { color: var(--c-muted); }

/* 移动端汉堡菜单 */
.nav-toggle { display: none; }
.nav-icon { display: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 6px; }
.nav-icon span { width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: .25s; }
@media (max-width: 600px) {
    .nav-icon { display: flex; }
    .site-nav {
        position: absolute; top: 60px; right: 0; left: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--c-surface); border-bottom: 1px solid var(--c-border);
        padding: 8px; max-height: 0; overflow: hidden; transition: max-height .25s;
    }
    .site-nav a { padding: 12px 14px; }
    .nav-toggle:checked ~ .site-nav { max-height: 80vh; }
}

/* ============ 统一布局系统 ============ */
/* 下部容器:铺满剩余空间,独立滚动(导航不动) */
.app-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.page-wrap { flex: none; } /* 自然高度,不被拉伸(避免内容少时底部大片空白)*/

/* 单栏容器(关于页/单页等)—— 和双栏 layout 统一 padding 体系 */
.container { max-width: var(--w-shell); margin: 0 auto; padding: var(--sp-5) 0 48px; }
@media (max-width: 900px) { .container { padding: 12px 14px 40px; } }

/* 双栏布局:主内容区自适应增长,边栏固定宽度 */
.layout { max-width: var(--w-shell); margin: 0 auto; padding: var(--sp-5) 0 48px; display: flex; gap: var(--w-gap); align-items: flex-start; }
.layout-main { flex: 1; min-width: 0; max-width: none; padding: 0; }
/* 大屏:进一步放宽 */
@media (min-width: 1400px) { :root { --w-shell: 1320px; } }
@media (max-width: 900px) {
    .layout { flex-direction: column; padding: 12px 14px 40px; gap: var(--sp-6); }
    .layout > .sidebar { width: 100%; }
}

/* 文章正文约束在阅读宽度(无论外层多宽,保证最佳阅读体验) */
.read-width { max-width: var(--w-read); margin: 0 auto; }

/* ============ 首页 Feed ============ */
.feed { display: flex; flex-direction: column; gap: 18px; }
.feed-card {
    display: flex; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius);
    overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feed-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
/* 列表卡片封面:固定 16:9 比例裁剪,避免不同图片比例导致列表参差 */
.card-cover { flex: 0 0 200px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.feed-card:hover .card-cover img { transform: scale(1.05); }

/* 无封面占位 */
.card-cover-ph { display: flex; align-items: center; justify-content: center; }
.ph-emoji { font-size: 36px; opacity: .9; }
.card-ph-0 { background: linear-gradient(135deg,#667eea,#764ba2); }
.card-ph-1 { background: linear-gradient(135deg,#0fb9a4,#06b6d4); }
.card-ph-2 { background: linear-gradient(135deg,#f093fb,#f5576c); }
.card-ph-3 { background: linear-gradient(135deg,#ffecd2,#fcb69f); }

.card-body { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tag-pill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 20px; }
.tag-post { background: var(--c-primary-soft); color: var(--c-post); }
.tag-series { background: rgba(15,185,164,.12); color: var(--c-series); }
.card-date { font-size: 13px; color: var(--c-muted); }
.card-title { font-size: 19px; font-weight: 650; margin: 0 0 8px; line-height: 1.4; }
.card-title a { color: var(--c-text); }
.card-title a:hover { color: var(--c-primary); }
.card-summary { color: var(--c-text-soft); font-size: 14px; margin: 0 0 12px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot .meta { font-size: 13px; color: var(--c-muted); }

@media (max-width: 600px) {
    .feed-card { flex-direction: column; }
    .card-cover { flex: none; } /* 全宽,高度由 16:9 aspect-ratio 决定 */
}

/* ============ 分页 ============ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
.page-btn {
    padding: 8px 18px; border-radius: 10px; background: var(--c-surface);
    border: 1px solid var(--c-border); color: var(--c-text); font-size: 14px; font-weight: 500;
    transition: all .15s;
}
.page-btn:not(.disabled):hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-btn.disabled { color: var(--c-muted); cursor: not-allowed; opacity: .6; }
.page-info { font-size: 14px; color: var(--c-muted); }

/* ============ 文章页 ============ */
.post-page { max-width: 100%; }
.post-article { max-width: 100%; } /* 铺满父级 layout-main */
/* 文章页封面:16:9 比例裁剪,避免超高图片撑乱布局 */
.post-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; aspect-ratio: 16 / 9; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-header { margin-bottom: 32px; }
.post-series-badge { font-size: 14px; margin-bottom: 12px; color: var(--c-series); }
.post-series-badge .progress { color: var(--c-muted); }
.post-title { font-size: 30px; font-weight: 750; line-height: 1.3; margin: 0 0 14px; letter-spacing: -.01em; }
.post-meta { color: var(--c-muted); font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-meta .dot { opacity: .5; }
.post-content { font-size: 16.5px; }

.post-tags { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: 8px; }
.post-tag { font-size: 13px; color: var(--c-primary); background: var(--c-primary-soft); padding: 4px 12px; border-radius: 20px; }

/* 上一篇/下一篇 */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.nav-link {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    transition: all .15s; min-height: 64px; justify-content: center;
}
.nav-link:hover { border-color: var(--c-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.nav-link.disabled { opacity: .45; cursor: default; }
.nav-link.disabled:hover { border-color: var(--c-border); box-shadow: none; transform: none; }
.nav-next { text-align: right; }
.nav-label { font-size: 12px; color: var(--c-muted); }
.nav-title { font-size: 14px; font-weight: 550; color: var(--c-text); }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } }

/* 系列目录侧栏 */
.series-toc-box { margin-top: 28px; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 22px; }
.toc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.toc-icon { font-size: 24px; }
.toc-title { font-weight: 650; font-size: 15px; }
.toc-title a { color: var(--c-text); }
.toc-title a:hover { color: var(--c-primary); }
.toc-sub { font-size: 12px; color: var(--c-muted); }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-border); align-items: center; font-size: 14px; }
.toc-list li a { color: var(--c-text-soft); }
.toc-list li a:hover { color: var(--c-primary); }
.toc-list li.current a { color: var(--c-primary); font-weight: 600; }
.toc-num { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--c-bg);
    display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--c-muted); font-weight: 600; }
.toc-list li.current .toc-num { background: var(--c-primary); color: #fff; }

/* ============ 专栏详情页 ============ */
/* 专栏 Hero:约束在 shell 宽度,不溢出满屏 */
/* 专栏页面包屑容器(居中对齐 hero) */
.breadcrumb-wrap { max-width: var(--w-shell); margin: 0 auto; padding: var(--sp-5) 0 0; }
.series-hero-wrap { max-width: var(--w-shell); margin: 0 auto; }
.page-wrap-pad { padding-bottom: 24px; }
.series-hero {
    border-radius: var(--radius); padding: 48px 40px; color: #fff;
    background-size: cover; background-position: center;
}
.hero-plain { background: linear-gradient(135deg, var(--c-primary), #8b5cf6); }
.hero-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 12px;
    background: rgba(255,255,255,.2); border-radius: 20px; margin-bottom: 12px; backdrop-filter: blur(4px); }
.hero-title { font-size: 30px; font-weight: 750; margin: 0 0 10px; }
.hero-stats { font-size: 14px; opacity: .9; display: flex; gap: 8px; align-items: center; }
.hero-stats .dot { opacity: .6; }
.series-desc { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 24px; }
.series-articles { list-style: none; padding: 0; margin: 0; }
.article-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-sm); margin-bottom: 8px; transition: all .15s; }
.article-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: transparent; }
.row-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    background: var(--c-primary-soft); color: var(--c-primary); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 13px; }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 15.5px; font-weight: 600; color: var(--c-text); display: block; }
.row-title:hover { color: var(--c-primary); }
.row-summary { color: var(--c-text-soft); font-size: 13px; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.row-meta-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--c-muted); font-size: 12px; padding-top: 4px; }

/* ============ 专栏列表页 ============ */
.page-hero { margin-bottom: 32px; }
.page-hero h1 { font-size: 28px; margin: 0 0 6px; }
.page-hero p { color: var(--c-muted); margin: 0; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.series-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    overflow: hidden; transition: all .18s; }
.series-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sc-cover { height: 140px; overflow: hidden; }
.sc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.series-card:hover .sc-cover img { transform: scale(1.05); }
.sc-cover-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,var(--c-primary),#8b5cf6); font-size: 40px; }
.sc-body { padding: 16px 18px; }
.sc-body h3 { margin: 0 0 6px; font-size: 17px; color: var(--c-text); }
.sc-body p { color: var(--c-text-soft); font-size: 13px; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-meta { font-size: 12px; color: var(--c-primary); font-weight: 600; }

/* ============ 关于页 ============ */
.about-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 32px; }

/* ============ 空状态 ============ */
.empty-state { text-align: center; padding: 80px 20px; color: var(--c-muted); }
.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ============ 页脚 ============ */
.site-footer { border-top: 1px solid var(--c-border); padding: 24px 20px; }
.footer-inner { max-width: 1320px; margin: 0 auto; text-align: center; color: var(--c-muted); font-size: 13px; }
.footer-inner .sep { margin: 0 6px; opacity: .5; }

/* ============ Markdown 正文 ============ */
.markdown-body { font-size: 16px; line-height: 1.8; color: var(--c-text); word-wrap: break-word; }
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4 { margin: 1.8em 0 0.6em; line-height: 1.3; font-weight: 680; letter-spacing: -.01em; }
.markdown-body h1 { font-size: 1.7em; }
.markdown-body h2 { font-size: 1.4em; padding-bottom: .25em; border-bottom: 1px solid var(--c-border); }
.markdown-body h3 { font-size: 1.18em; }
.markdown-body p { margin: .9em 0; }
.markdown-body a { color: var(--c-link); text-decoration: underline; text-decoration-color: rgba(91,108,255,.3); text-underline-offset: 3px; }
.markdown-body a:hover { text-decoration-color: var(--c-primary); }
.markdown-body ul,.markdown-body ol { padding-left: 1.6em; margin: .9em 0; }
.markdown-body li { margin: .3em 0; }
.markdown-body blockquote { margin: 1.1em 0; padding: .8em 1.2em; color: var(--c-text-soft);
    border-left: 4px solid var(--c-primary); background: var(--c-primary-soft); border-radius: 0 8px 8px 0; }
.markdown-body code { font-family: "SFMono-Regular", Consolas, Monaco, "Courier New", monospace;
    background: var(--c-primary-soft); color: var(--c-primary); padding: 2px 7px; border-radius: 5px; font-size: .88em; }
.markdown-body pre { margin: 1.2em 0; padding: 16px 18px; border-radius: 12px; overflow-x: auto; box-shadow: var(--shadow-sm); }
.markdown-body pre code { background: transparent; padding: 0; color: #f8f8f2; border-radius: 0; }
/* chroma 高亮主题(深色背景) */
.markdown-body .chroma { color: #f8f8f2; background: #1e1e2e; }
.markdown-body .chroma pre { background: #1e1e2e; }
.chroma .err,.chroma .lnlinks { color: #fff; }
.chroma .kt,.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr { color: #66d9ef; font-weight: bold; }
.chroma .s,.chroma .s1,.chroma .s2 { color: #e6db74; }
.chroma .nf,.chroma .nc,.chroma .nd { color: #a6e22e; }
.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .il,.chroma .mo { color: #ae81ff; }
.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cs { color: #6c7086; font-style: italic; }
.chroma .o,.chroma .ow { color: #f92672; }
.chroma .gd { color: #f92672; }
.chroma .gi { color: #a6e22e; }
.markdown-body table { border-collapse: collapse; margin: 1.1em 0; width: 100%; display: block; overflow-x: auto; }
.markdown-body th,.markdown-body td { border: 1px solid var(--c-border); padding: 9px 14px; }
.markdown-body th { background: var(--c-bg); font-weight: 600; }
.markdown-body img { max-width: 100%; border-radius: 10px; }
.markdown-body hr { border: 0; border-top: 1px solid var(--c-border); margin: 2em 0; }
.markdown-body input[type="checkbox"] { margin-right: 6px; transform: translateY(1px); }
.markdown-body .mermaid { text-align: center; }

/* ============ 双栏布局(定义见上方布局系统) ============ */

/* ============ 面包屑 ============ */
.breadcrumb { font-size: 13px; color: var(--c-muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-primary); }
.bc-sep { opacity: .5; }
.bc-current { color: var(--c-text-soft); font-weight: 500; }

/* ============ 边栏 ============ */
.sidebar { flex: 0 0 var(--w-sidebar); width: var(--w-sidebar); position: sticky; top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 900px) { .sidebar { flex: none; width: 100%; position: static; } }
.side-box { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 18px; }
.side-title { margin: 0 0 12px; font-size: 14px; font-weight: 650; }
.side-search { display: flex; gap: 8px; }
.side-search input { flex: 1; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font-size: 13px; }
.side-search button { background: var(--c-primary); color: #fff; border: 0; border-radius: 8px; padding: 0 12px; cursor: pointer; font-size: 14px; }

.side-list, .side-links { list-style: none; padding: 0; margin: 0; }
.side-list li, .side-links li { padding: 7px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; }
.side-list li:first-child, .side-links li:first-child { border: 0; }
.side-list a, .side-links a { color: var(--c-text-soft); }
.side-list a:hover, .side-links a:hover { color: var(--c-primary); }

.side-series-head { font-size: 14px; font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.side-progress { font-size: 12px; color: var(--c-muted); background: var(--c-primary-soft); padding: 1px 8px; border-radius: 10px; }
.side-toc { list-style: none; padding: 0; margin: 0; }
.side-toc li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; align-items: center; }
.side-toc li a { color: var(--c-text-soft); }
.side-toc li.current a { color: var(--c-primary); font-weight: 600; }
.side-toc-num { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--c-muted); }
.side-toc li.current .side-toc-num { background: var(--c-primary); color: #fff; }

/* 热门排行 */
.side-rank { list-style: none; padding: 0; margin: 0; }
.side-rank li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; align-items: flex-start; }
.rank-num { width: 20px; height: 20px; flex-shrink: 0; border-radius: 5px; background: var(--c-bg); color: var(--c-muted); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.rank-0 { background: #ff4d4f !important; color: #fff !important; }
.rank-1 { background: #fa8c16 !important; color: #fff !important; }
.rank-2 { background: #faad14 !important; color: #fff !important; }

/* 标签云 */
.side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud-tag { color: var(--c-text-soft); background: var(--c-bg); padding: 3px 10px; border-radius: 14px; font-size: 13px; transition: all .15s; }
.cloud-tag:hover { color: #fff; background: var(--c-primary); }
.cloud-0 { font-size: 12px; }
.cloud-1 { font-size: 13px; }
.cloud-2 { font-size: 15px; }
.cloud-3 { font-size: 16px; color: var(--c-primary); font-weight: 500; }
.cloud-4 { font-size: 18px; color: var(--c-primary); font-weight: 650; }

/* ============ 搜索大框 ============ */
.search-big { display: flex; gap: 10px; margin-bottom: 20px; }
.search-big input { flex: 1; padding: 12px 16px; border: 2px solid var(--c-border); border-radius: 12px; font-size: 15px; background: var(--c-surface); color: var(--c-text); }
.search-big input:focus { outline: none; border-color: var(--c-primary); }
.search-big button { padding: 12px 24px; background: var(--c-primary); color: #fff; border: 0; border-radius: 12px; font-size: 15px; cursor: pointer; font-weight: 500; }
.search-meta { color: var(--c-muted); font-size: 14px; margin-bottom: 16px; }

/* ============ 留言板 ============ */
.msg-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px; margin-bottom: 32px; }
.msg-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 600px) { .msg-row { grid-template-columns: 1fr; } }
.msg-form label { display: block; font-size: 13px; color: var(--c-muted); }
.msg-form input, .msg-form textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font-size: 14px; font-family: inherit; }
.req { color: #ff4d4f; }
.msg-list-title { font-size: 18px; margin: 0 0 16px; }
.msg-list { list-style: none; padding: 0; margin: 0; }
.msg-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.msg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.msg-nick { font-weight: 600; color: var(--c-primary); }
.msg-date { font-size: 12px; color: var(--c-muted); }
.msg-content { margin: 0; color: var(--c-text-soft); }
.msg-reply { margin-top: 12px; padding: 10px 14px; background: var(--c-primary-soft); border-radius: 8px; border-left: 3px solid var(--c-primary); }
.reply-tag { font-size: 12px; color: var(--c-primary); font-weight: 600; }
.msg-reply p { margin: 4px 0 0; font-size: 14px; color: var(--c-text-soft); }
.alert-success { background: rgba(34,197,94,.12); color: #15803d; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
@media (prefers-color-scheme: dark){ .alert-success { color: #4ade80; } }

/* ============ 边栏列表项省略号 ============ */
.side-list li, .side-links li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-rank li { align-items: center; }
.side-rank li > a, .side-list li > a, .side-links li > a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ 评论区(文章/专栏页) ============ */
.comment-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-border); }
.comment-title { font-size: 20px; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.comment-count { font-size: 13px; color: var(--c-muted); background: var(--c-bg); padding: 2px 10px; border-radius: 12px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 16px; }
.comment-item { display: flex; gap: 14px; }
.comment-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg,var(--c-primary),#8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.comment-main { flex: 1; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; }
.comment-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comment-nick { font-weight: 600; color: var(--c-text); }
.comment-date { font-size: 12px; color: var(--c-muted); }
.comment-content { margin: 0; color: var(--c-text-soft); line-height: 1.7; }
.comment-reply { margin-top: 12px; padding: 10px 14px; background: var(--c-primary-soft); border-radius: 8px; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--c-text-soft); }
.reply-badge { flex-shrink: 0; font-size: 12px; color: #fff; background: var(--c-primary); padding: 2px 8px; border-radius: 4px; }
.comment-empty { color: var(--c-muted); text-align: center; padding: 24px; }
.comment-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; margin-bottom: 32px; } /* 与下方评论列表的间距 */
.comment-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 600px) { .comment-row { grid-template-columns: 1fr; } }
.comment-form input, .comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-bg); color: var(--c-text); font-size: 14px; font-family: inherit; }
.comment-form textarea { resize: vertical; }
.btn-primary { margin-top: 12px; padding: 10px 24px; background: var(--c-primary); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .15s; }
.btn-primary:hover { opacity: .9; }

/* ============ 边栏分类 ============ */
.side-cats { list-style: none; padding: 0; margin: 0; }
.side-cats li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--c-border); font-size: 13.5px; }
.side-cats li:first-child { border: 0; }
.side-cats li a { color: var(--c-text-soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-cats li a:hover { color: var(--c-primary); }
.cat-count { flex-shrink: 0; font-size: 11px; color: var(--c-muted); background: var(--c-bg); padding: 1px 7px; border-radius: 10px; }

/* 评论提交成功提示 */
.comment-toast { background: rgba(34,197,94,.12); color: #15803d; padding: 10px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
@media (prefers-color-scheme: dark){ .comment-toast { color: #4ade80; } }

/* ============ 密码保护页 ============ */
.password-page { max-width: var(--w-shell); margin: 0 auto; padding: var(--sp-12) var(--sp-8); }
.password-card { max-width: 420px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-md); }
.lock-icon { font-size: 48px; margin-bottom: var(--sp-4); }
.password-card h1 { font-size: 20px; margin: 0 0 8px; }
.lock-title { color: var(--c-text-soft); margin: 0 0 24px; font-size: 15px; }
.password-card form { display: flex; flex-direction: column; gap: 12px; }
.password-card input { padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 10px; font-size: 15px; background: var(--c-bg); color: var(--c-text); text-align: center; }
.password-card input:focus { outline: none; border-color: var(--c-primary); }
.password-card button { padding: 12px; background: var(--c-primary); color: #fff; border: 0; border-radius: 10px; font-size: 15px; cursor: pointer; }
.pwd-error { color: #ef4444; font-size: 14px; margin-bottom: 12px; }

/* ============ 广告位 ============ */
/* ============ 广告位(约束尺寸,防破坏布局)============ */
.ad-slot { margin-bottom: var(--sp-5); }
.ad-banner { text-align: center; }
.ad-inline { margin: var(--sp-6) 0; text-align: center; }
.ad-slot:empty { display: none; } /* 无广告内容时不占位 */
/* 广告内图片统一约束,防止超大图破坏布局 */
.ad-banner img, .ad-inline img { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius-sm); }
.side-box.ad-slot img { width: 100%; height: auto; max-height: 200px; object-fit: cover; border-radius: var(--radius-sm); }
.ad-slot a { display: inline-block; max-width: 100%; }
.ad-slot a img { display: block; }

/* ============ 响应式视频嵌入 ============ */
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 1.5em 0; border-radius: var(--radius-sm); }
.video-wrap iframe, .video-wrap video, .video-wrap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* 评论引用原评论 */
.comment-quote { background: var(--c-bg); border-left: 3px solid var(--c-border); padding: 8px 12px; margin: 8px 0; font-size: 13px; color: var(--c-text-soft); border-radius: 0 6px 6px 0; }
.comment-quote .quote-mark { color: var(--c-muted); margin-right: 4px; }
.comment-quote p { margin: 0; display: inline; }
.reply-btn { background: none; border: 1px solid var(--c-border); border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--c-muted); cursor: pointer; margin-left: auto; }
.reply-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.comment-head { gap: 10px; }
.reply-quote { display: flex; align-items: center; gap: 10px; background: var(--c-primary-soft); padding: 8px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; color: var(--c-primary); }
.cancel-reply { margin-left: auto; background: none; border: 0; color: var(--c-muted); cursor: pointer; font-size: 12px; text-decoration: underline; }

/* ============ 评论内 Markdown(紧凑版)============ */
.comment-content.markdown-body,
.comment-reply.markdown-body,
.comment-quote.markdown-body {
    font-size: 14.5px; line-height: 1.65;
}
.comment-content.markdown-body p,
.comment-reply.markdown-body p { margin: .4em 0; }
.comment-content.markdown-body p:first-child,
.comment-reply.markdown-body p:first-child { margin-top: 0; }
.comment-content.markdown-body p:last-child,
.comment-reply.markdown-body p:last-child { margin-bottom: 0; }
.comment-content.markdown-body h1,
.comment-content.markdown-body h2,
.comment-content.markdown-body h3,
.comment-content.markdown-body h4,
.comment-reply.markdown-body h1,
.comment-reply.markdown-body h2,
.comment-reply.markdown-body h3,
.comment-reply.markdown-body h4 { margin: .6em 0 .3em; font-size: 1em; border: 0; }
.comment-content.markdown-body ul,
.comment-content.markdown-body ol,
.comment-reply.markdown-body ul,
.comment-reply.markdown-body ol { margin: .4em 0; padding-left: 1.4em; }
.comment-content.markdown-body blockquote,
.comment-reply.markdown-body blockquote { margin: .5em 0; padding: .4em .8em; }
.comment-content.markdown-body pre,
.comment-reply.markdown-body pre { margin: .5em 0; padding: 10px 12px; font-size: 13px; }
.comment-content.markdown-body code,
.comment-reply.markdown-body code { font-size: .88em; padding: 1px 5px; }
.comment-content.markdown-body img,
.comment-reply.markdown-body img { max-height: 240px; }
.comment-content.markdown-body table,
.comment-reply.markdown-body table { font-size: 13px; }

/* 引用块内的 markdown 更小 */
.comment-quote.markdown-body { font-size: 13px; }
.comment-quote.markdown-body p { display: inline; }

/* 文章摘要(引言风格) */
.post-summary {
    position: relative;
    margin: 20px 0 0;
    padding: 14px 18px 14px 42px;
    color: var(--c-text-soft);
    font-size: 15px;
    line-height: 1.75;
    background: linear-gradient(90deg, var(--c-primary-soft), transparent);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--c-primary);
}
.post-summary::before {
    content: "\201C";
    position: absolute;
    left: 10px; top: 0;
    font-size: 40px;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--c-primary);
    opacity: .3;
    line-height: 1;
}

/* 分类页:专栏/文章分区标题 */
.cat-section-title { font-size: 18px; margin: 24px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.cat-series-grid { margin-bottom: 24px; }

/* 主题切换按钮 */
.theme-toggle { background: none; border: 1px solid var(--c-border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; padding: 0; margin-left: 8px; transition: all .2s; }
.theme-toggle:hover { border-color: var(--c-primary); transform: rotate(15deg); }
.theme-icon { line-height: 1; }


/* ============ 返回顶部(基于 .app-body 滚动)============ */
.back-to-top { position: fixed; right: 24px; bottom: 32px; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-border); cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, border-color .2s; z-index: 90; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }

/* ============ 滚动条美化(前台)============ */
/* Webkit(Chrome/Safari/Edge) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); background-clip: content-box; border: 2px solid transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--c-border) transparent; }