/* GitHub 热搜 · 中国小白版 —— 设计系统 v3（trendshift 风格）
 *
 * 令牌来源：test_output/extract_trendshift.py 对 trendshift.io 的程序化提取
 *   字体   Instrument Sans（有特点的几何无衬线，非 Inter/系统字体）
 *   主色   #6670CC 长春花蓝（唯一强调色）· 浅底 #ECEDF9 · 边线 #DADCE7
 *   圆角   4 / 6 / 8 / 999（小而克制）
 *   字号   10 / 11 / 12 / 13 / 14 / 16 / 24（小字号高密度，12px 为主力）
 *   骨架   顶栏 64px sticky 半透明 + 三栏（240 / 1fr / 300，总宽 1176）
 *   列表   发丝线分隔的行，不用卡片盒（这是它和掘金骨架最大的区别）
 *
 * 改 UI 前先读本节；新增字号/间距必须挂到下面的令牌上，别再临场发明数值。
 */

/* ══ 令牌 ══════════════════════════════════════════════════ */
:root {
    /* 灰阶（用透明度表达层级，与 trendshift 一致） */
    --bg: #ffffff;
    --bg-sub: #FCFCFD;
    --panel: #ffffff;
    --ink: #171717;
    --ink-70: rgba(23, 23, 23, 0.70);
    --ink-50: rgba(23, 23, 23, 0.50);
    --ink-40: rgba(23, 23, 23, 0.38);
    --line: #DADCE7;
    --line-soft: #E9EAF2;

    /* 唯一强调色 + 语义色 */
    --brand: #6670CC;
    --brand-soft: #ECEDF9;
    --brand-line: #DCDEF5;
    --mint: #0E9F6E;          /* 只在「增长/在线」这类正向数据上 */
    --mint-soft: #E8F5EE;
    --cream: #FDF4E4;         /* 只在「搞钱」主题上 */
    --cream-line: #F2E3C7;
    --cream-ink: #8A6116;
    --warn-soft: #FDF4E4;
    --danger: #C0392B;
    --danger-soft: #FBEDEB;

    /* 圆角 */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-pill: 999px;

    /* 字号 */
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-17: 17px;          /* 榜单行标题（中栏加宽后从 16 提到 17，减少拥挤感） */
    --fs-24: 24px;
    --fs-28: 28px;

    /* 间距 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --shell: 1280px;
}

[data-theme="dark"] {
    --bg: #0F0F12;
    --bg-sub: #141519;
    --panel: #17181D;
    --ink: #EDEDF0;
    --ink-70: rgba(237, 237, 240, 0.72);
    --ink-50: rgba(237, 237, 240, 0.52);
    --ink-40: rgba(237, 237, 240, 0.38);
    --line: #2A2C36;
    --line-soft: #23242C;
    --brand: #8B93E0;
    --brand-soft: #1E2033;
    --brand-line: #2F3350;
    --mint: #34D399;
    --mint-soft: #12291F;
    --cream: #2A2318;
    --cream-line: #3D3423;
    --cream-ink: #E0B15C;
    --warn-soft: #2A2318;
    --danger: #F87171;
    --danger-soft: #2C1B1A;
}

/* ══ 基础 ══════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-14);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* 中文长句断行更自然 */
.pcard-title, .pcard-desc, .item-title, .detail-summary, .insight-col-text,
.mz-pitch, .insight-alt, .insight-value, .related-name, .note {
    text-wrap: pretty;
}

/* 兼容旧模板的单栏容器（详情页等仍用它） */
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--sp-6); }

/* ══ 顶栏（sticky 半透明）══════════════════════════════════ */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.topbar-row {
    max-width: var(--shell); margin: 0 auto; padding: 0 var(--sp-6);
    height: 64px; display: flex; align-items: center; gap: var(--sp-5);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.brand-name { font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.01em; }
.brand-sub {
    font-size: var(--fs-11); font-weight: 600; color: var(--brand);
    background: var(--brand-soft); padding: 2px var(--sp-2); border-radius: var(--r-xs);
}
.topbar-search {
    flex: 1; height: 40px; border: 1px solid var(--line); border-radius: var(--r-md);
    display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4);
    color: var(--ink-40); font-size: var(--fs-14); background: var(--panel);
}
.topbar-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: var(--fs-14); color: var(--ink);
}
.topbar-search input::placeholder { color: var(--ink-40); }

/* 客户端搜索结果面板（静态站没有后端，靠 search-index.json 前端过滤） */
.topbar-search { position: relative; }
.search-panel {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
    max-height: 60vh; overflow-y: auto; padding: var(--sp-2); display: none; z-index: 60;
}
.search-panel.show { display: block; }
.search-empty { font-size: var(--fs-12); color: var(--ink-40); padding: var(--sp-3); }
.search-hit { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.search-hit:hover { background: var(--brand-soft); }
.search-hit-t { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.search-hit-m { display: block; font-size: var(--fs-11); color: var(--ink-40); font-family: var(--mono); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.brand-tagline { font-size: var(--fs-13); color: var(--ink-50); }
.nav-link { font-size: var(--fs-13); font-weight: 500; color: var(--ink-70); }
.nav-link:hover { color: var(--brand); }
.theme-toggle {
    background: transparent; border: 1px solid var(--line); color: var(--ink-70);
    font-size: var(--fs-13); font-weight: 500; padding: 7px var(--sp-4);
    border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }

/* 顶栏主按钮（收藏夹/提交） */
.btn-nav {
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    font-size: var(--fs-13); font-weight: 600; padding: 8px var(--sp-4);
    border-radius: var(--r-md);
}

/* 旧模板仍在用的 tabbar：改成顶栏下的一条细导航 */
.tabbar { display: none; }
.tabbar-row, .tab, .tab-ico, .tab-money { display: none; }

/* ══ 三栏骨架 ══════════════════════════════════════════════
 * 2026-09-12 调宽：原来 shell 1176 + 侧栏 240/300，中栏只剩 588px，
 * 而中栏承载的信息最多（中文标题 + 标签 + meta），显得挤。
 * 现在 1280 + 210/270 + 32 间距 → 中栏 736px（+25%），行内留白也加大。
 */
.shell {
    max-width: var(--shell); margin: 0 auto; padding: var(--sp-6) var(--sp-5);
    display: grid; grid-template-columns: 210px minmax(0, 1fr) 270px;
    gap: var(--sp-8); align-items: start;
}
.main { min-width: 0; padding: 0; }

/* ══ 左栏 ══════════════════════════════════════════════════ */
.side-l { position: sticky; top: 88px; }
.side-title {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-12); font-weight: 600; color: var(--ink-70);
    margin: var(--sp-1) 0 var(--sp-3);
}
.side-item {
    display: block; font-size: var(--fs-14); font-weight: 500; color: var(--ink-70);
    padding: 9px var(--sp-4); border-radius: var(--r-md); margin-bottom: 2px;
    transition: background .12s, color .12s;
}
.side-item:hover { background: var(--bg-sub); color: var(--ink); }
.side-item.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
/* ⚠️ 这些都是 <a> 元素，必须显式 display:block —— <a> 默认 inline，
   不写就会和相邻项挤在一行、背景互相重叠（2026-09-12 左侧子项与右栏卡片都踩过） */
.side-item, .side-sub, .card-tint, .related-item, .stat-card, .block { display: block; }

.side-sub { font-size: var(--fs-13); color: var(--ink-50); padding: 7px var(--sp-4) 7px 24px; }
.side-sub:hover { color: var(--brand); }
.side-sub.on { color: var(--brand); font-weight: 600; }
.side-gap { height: var(--sp-4); }
.btn-submit {
    display: block; text-align: center;
    width: 100%; background: var(--brand); color: #fff; border: none; cursor: pointer;
    font-size: var(--fs-13); font-weight: 600; padding: 11px;
    border-radius: var(--r-md); margin-top: var(--sp-4);
}

/* ══ 中栏：页头 / 选项卡 / 筛选 ═══════════════════════════ */
.section-head { margin: 0 0 var(--sp-4); }
.section-title {
    font-size: var(--fs-24); font-weight: 600; letter-spacing: -0.015em;
    color: var(--ink); line-height: 1.3;
}
.section-title .accent { color: var(--brand); }
.section-sub { font-size: var(--fs-14); color: var(--ink-50); margin-top: var(--sp-1); }

/* 顶栏下方的榜单切换（原 tabbar 的位置） */
.tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.tabs .tab {
    display: inline-block; font-size: var(--fs-13); font-weight: 500; color: var(--ink-70);
    padding: 6px var(--sp-3); border-radius: var(--r-md);
}
.tabs .tab:hover { color: var(--ink); background: var(--bg-sub); }
.tabs .tab.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.tabs .tab-money { color: var(--cream-ink); }
.tabs .tab-money.active { background: var(--cream); color: var(--cream-ink); }

/* 筛选行（下拉式，替代原来的两行胶囊） */
.filters { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.cat-filter { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cat-chip {
    font-size: var(--fs-11); color: var(--ink-70); background: var(--panel);
    border: 1px solid var(--line); padding: 4px 10px;
    border-radius: var(--r-md); white-space: nowrap;
}
.cat-chip:hover { border-color: var(--brand); color: var(--brand); }
.cat-chip.active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); font-weight: 600; }

/* 榜单数据充足度角标 */
.cov-badge {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    padding: 2px var(--sp-2); border-radius: var(--r-xs);
    margin-left: var(--sp-2); vertical-align: 2px; white-space: nowrap;
}
.cov-badge.cov-ok { color: var(--ink-50); background: var(--bg-sub); }
.cov-badge.cov-warn { color: var(--cream-ink); background: var(--cream); }
.cov-badge.cov-bad { color: var(--danger); background: var(--danger-soft); }

.data-warn {
    font-size: var(--fs-12); color: var(--cream-ink); line-height: 1.6;
    background: var(--cream); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}

/* ══ 榜单行（发丝线分隔，不用卡片）═══════════════════════════ */
.card-list { display: block; }
.pcard {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 104px;
    gap: var(--sp-5); padding: 22px 4px 20px;
    border-bottom: 1px solid var(--line-soft);
    position: relative; transition: background .12s;
}
.pcard:hover { background: var(--bg-sub); }
.pcard-rank {
    width: 30px; height: 30px; border-radius: var(--r-sm);
    background: var(--bg-sub); border: 1px solid var(--line-soft);
    display: grid; place-items: center;
    font-size: var(--fs-13); font-weight: 600; color: var(--ink-50);
}
.pcard-rank.top { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.pcard-body { min-width: 0; }
.pcard-title {
    font-size: var(--fs-17); font-weight: 600; line-height: 1.5;
    letter-spacing: -0.005em; margin: 0 0 var(--sp-2);
}
.pcard-title a:hover { color: var(--brand); }
.pcard-title .cn-flag { font-size: var(--fs-12); margin-left: var(--sp-1); }
.pcard-desc {
    font-size: var(--fs-12); color: var(--ink-50); line-height: 1.6;
    margin: 0 0 var(--sp-2);
}
.pcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pcard-meta, .pcard-foot {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-12); color: var(--ink-50);
}
.pcard-foot .name, .pcard-meta .name { font-family: var(--mono); font-size: var(--fs-12); color: var(--ink-70); }
.pcard-foot .lang::before, .pcard-meta .lang::before {
    content: "·"; margin-right: var(--sp-1); color: var(--ink-40);
}
.pcard-heat { text-align: right; }
.heat-num {
    font-size: var(--fs-17); font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.heat-num::before { content: "⭐ "; font-size: var(--fs-12); }
.heat-label { font-size: var(--fs-11); color: var(--ink-40); }
.heat-up {
    font-size: var(--fs-12); font-weight: 600; color: var(--mint);
    font-variant-numeric: tabular-nums; margin-top: var(--sp-1);
}

/* 分享按钮：hover 才出现，避免每行都吵 */
.share-btn {
    position: absolute; right: var(--sp-3); top: var(--sp-3);
    font-size: var(--fs-11); color: var(--ink-50); background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 3px var(--sp-2); cursor: pointer;
    opacity: 0; transition: opacity .15s, border-color .15s, color .15s;
}
.pcard:hover .share-btn { opacity: 1; }
.share-btn:hover { color: var(--brand); border-color: var(--brand); }

/* ══ 标签体系（底色只用两种：中性 / 琥珀搞钱 / 长春花蓝中文）══ */
.cat-badge, .tag {
    font-size: var(--fs-11); color: var(--ink-70); background: var(--bg-sub);
    border: 1px solid var(--line-soft); border-radius: var(--r-xs);
    padding: 1px var(--sp-2); white-space: nowrap;
}
.mz-badge {
    font-size: var(--fs-11); font-weight: 600; color: var(--cream-ink);
    background: var(--cream); border: 1px solid var(--cream-line);
    border-radius: var(--r-xs); padding: 1px var(--sp-2); white-space: nowrap;
}
.gt-badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-size: var(--fs-11); font-weight: 500; color: var(--ink-50); white-space: nowrap;
}
.gt-badge::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; flex: none;
}
.gt-badge.gt-burst { color: var(--danger); }
.gt-badge.gt-steady { color: var(--brand); }
.gt-badge.gt-tail { color: var(--ink-40); }
.new-badge {
    font-size: var(--fs-10); font-weight: 700; color: var(--brand);
    background: var(--brand-soft); border: 1px solid var(--brand-line);
    border-radius: var(--r-xs); padding: 1px var(--sp-2);
    margin-left: var(--sp-2); vertical-align: 2px; white-space: nowrap;
    letter-spacing: .04em;
}
.cost-badge {
    font-size: var(--fs-11); font-weight: 500; color: var(--ink-70);
    background: var(--bg-sub); border: 1px solid var(--line-soft);
    border-radius: var(--r-xs); padding: 1px var(--sp-2); white-space: nowrap;
}
.cost-badge.cost-a { color: var(--mint); background: var(--mint-soft); border-color: transparent; }
.cost-badge.cost-b { color: var(--cream-ink); background: var(--cream); border-color: transparent; }
.cost-badge.cost-c { color: var(--danger); background: var(--danger-soft); border-color: transparent; }

/* ══ 右栏区块 ══════════════════════════════════════════════ */
.side-r { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--sp-5); }
.block {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--sp-5);
}
.block-label {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-11); font-weight: 600; letter-spacing: .08em;
    color: var(--ink-50); margin-bottom: var(--sp-3);
}
.block-label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand); flex: none;
}
.block-label.mint::before { background: var(--mint); }
.block-label.cream::before { background: var(--cream-ink); }
.kpi {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.kpi:last-child { border-bottom: none; }
.kpi-k { font-size: var(--fs-12); color: var(--ink-50); }
.kpi-v {
    font-size: var(--fs-16); font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.note { font-size: var(--fs-12); color: var(--ink-70); line-height: 1.65; }
.card-tint {
    background: var(--brand-soft); border-radius: var(--r-md);
    padding: var(--sp-3); margin-bottom: var(--sp-2);
    transition: filter .15s;
}
.card-tint:hover { filter: brightness(.97); }
.card-tint:last-child { margin-bottom: 0; }
.card-tint.mint { background: var(--mint-soft); }
.card-tint.cream { background: var(--cream); }
.card-tint b { font-size: var(--fs-13); font-weight: 600; display: block; margin-bottom: 2px; color: var(--ink); }
.card-tint span { display: block; font-size: var(--fs-11); color: var(--ink-70); line-height: 1.5; }

/* ══ 统计卡（旧模板兼容，改为紧凑行）═══════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); }
.stat-card { background: var(--panel); }
.stat-label { font-size: var(--fs-11); color: var(--ink-40); }
.stat-value {
    font-size: var(--fs-16); font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; margin-top: 2px;
}

/* 每日技术风向（旧组件，改为右栏风格） */
.trend-bar {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    background: var(--mint-soft); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.trend-icon { font-size: var(--fs-16); flex: none; line-height: 1.4; }
.trend-text { font-size: var(--fs-13); color: var(--ink); line-height: 1.65; }
.trend-text strong { color: var(--mint); }
.trend-loading { font-size: var(--fs-12); color: var(--ink-50); display: flex; align-items: center; gap: var(--sp-2); }

/* ══ 详情页 ═════════════════════════════════════════════════ */
.back-link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-13); color: var(--ink-50); margin-bottom: var(--sp-4); }
.back-link:hover { color: var(--brand); }
.detail-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--sp-6); margin-bottom: var(--sp-4);
}
.detail-title {
    font-size: var(--fs-28); font-weight: 600; line-height: 1.3;
    letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--sp-2);
}
.detail-reponame { font-size: var(--fs-13); color: var(--ink-40); font-family: var(--mono); margin-bottom: var(--sp-4); }
.detail-summary { font-size: var(--fs-14); color: var(--ink-70); line-height: 1.7; margin-bottom: var(--sp-4); }
.detail-orig {
    font-size: var(--fs-12); color: var(--ink-50); line-height: 1.65;
    padding: var(--sp-3) var(--sp-4); background: var(--bg-sub);
    border-radius: var(--r-md); margin-bottom: var(--sp-4);
}
.detail-orig::before { content: "原文 · "; font-weight: 600; }
.detail-stats { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; }
.dstat { display: flex; flex-direction: column; }
.dstat-num {
    font-size: var(--fs-16); font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.dstat-num.up { color: var(--mint); }
.dstat-label { font-size: var(--fs-11); color: var(--ink-40); }
.detail-actions { margin-left: auto; display: flex; gap: var(--sp-2); }
.btn {
    font-size: var(--fs-13); font-weight: 500; padding: 8px var(--sp-4);
    border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent;
    transition: opacity .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { opacity: .9; }
.btn-ghost { background: transparent; color: var(--ink-70); border-color: var(--line); }
.btn-ghost:hover { color: var(--brand); border-color: var(--brand); }

.friendliness-bar {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    font-size: var(--fs-13); margin-bottom: var(--sp-4);
    background: var(--bg-sub); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.friendliness-stars { font-size: var(--fs-14); color: var(--brand); letter-spacing: 2px; }
.friendliness-score { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.friendliness-label, .friendliness-reasons { font-size: var(--fs-11); color: var(--ink-40); }

.section-block {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.section-block-title { font-size: var(--fs-16); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-4); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.topic-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line-soft); }
.topic-tag {
    font-size: var(--fs-11); color: var(--ink-70); background: var(--bg-sub);
    border: 1px solid var(--line-soft); border-radius: var(--r-xs); padding: 2px var(--sp-2);
}

.insight-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.insight-col { background: var(--bg-sub); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.insight-col-label { font-size: var(--fs-11); color: var(--ink-40); margin-bottom: var(--sp-1); font-weight: 600; }
.insight-col-text { font-size: var(--fs-13); color: var(--ink); line-height: 1.65; }
.insight-alt {
    font-size: var(--fs-13); color: var(--cream-ink); line-height: 1.65;
    background: var(--cream); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.insight-alt::before { content: "🔄 替代谁 · "; font-weight: 600; }
.risk-warn {
    font-size: var(--fs-12); color: var(--danger); line-height: 1.65;
    background: var(--danger-soft); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); font-weight: 500;
}
.mz-pitch {
    font-size: var(--fs-13); color: var(--cream-ink); line-height: 1.65;
    background: var(--cream); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
}
.mz-pitch::before { content: "💡 搞钱思路 · "; font-weight: 600; }
.insight-list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.insight-item { font-size: var(--fs-13); color: var(--ink); line-height: 1.65; padding-left: var(--sp-5); position: relative; }
.insight-item::before { content: "—"; position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.insight-value {
    font-size: var(--fs-13); color: var(--ink-70); line-height: 1.7;
    background: var(--brand-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.insight-value::before { content: "💡 对你有什么用 · "; font-weight: 600; color: var(--brand); }
.insight-loading { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); color: var(--ink-50); padding: var(--sp-4) 0; }
.insight-loading-dot {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--brand);
    animation: insight-spin .8s linear infinite;
}
@keyframes insight-spin { to { transform: rotate(360deg); } }

/* 相关项目 */
.related-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft);
}
.related-item:last-child { border-bottom: none; }
.related-name { font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.related-summary { font-size: var(--fs-11); color: var(--ink-40); margin-top: 2px; }
.related-heat { font-size: var(--fs-12); color: var(--ink-70); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: var(--sp-4); }

/* ══ 收藏按钮 ══════════════════════════════════════════════ */
.fav-btn {
    font-size: var(--fs-14); line-height: 1; color: var(--ink-40);
    background: transparent; border: none; cursor: pointer;
    padding: var(--sp-1) var(--sp-2); margin-left: var(--sp-2); vertical-align: 2px;
    border-radius: var(--r-xs); transition: color .15s;
}
.fav-btn:hover { color: var(--brand); }
.fav-btn.faved { color: var(--brand); }
.fav-btn-lg { min-width: 88px; }
.fav-btn-lg.faved { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }

/* ══ 月度精选 ══════════════════════════════════════════════ */
.mp-hero { padding: var(--sp-4) 0 var(--sp-6); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); }
.mp-issue { font-size: var(--fs-12); color: var(--brand); font-weight: 600; letter-spacing: .12em; margin-bottom: var(--sp-2); }
.mp-title { font-size: var(--fs-28); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 var(--sp-2); }
.mp-sub { font-size: var(--fs-13); color: var(--ink-50); }

/* ══ 进度板 ════════════════════════════════════════════════ */
.pr-status { font-size: var(--fs-11); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--r-xs); margin-left: var(--sp-2); vertical-align: 2px; }
.pr-running { color: var(--brand); background: var(--brand-soft); }
.pr-done { color: var(--mint); background: var(--mint-soft); }
.pr-bar-wrap { height: 6px; background: var(--bg-sub); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-3); }
.pr-bar { height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width .8s ease; }
.pr-msg { font-size: var(--fs-12); color: var(--ink-70); margin-top: var(--sp-2); background: var(--bg-sub); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }

/* ══ 分页 / 空态 / Toast / 分享弹层 ════════════════════════ */
.pager { display: flex; justify-content: center; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.pager-btn {
    font-size: var(--fs-13); color: var(--ink-70); background: var(--panel);
    border: 1px solid var(--line); padding: 7px var(--sp-4); border-radius: var(--r-md);
}
.pager-btn:hover { border-color: var(--brand); color: var(--brand); }
.pager-info { font-size: var(--fs-13); color: var(--ink-40); }
.empty { text-align: center; padding: 72px var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); }
.empty-icon { font-size: 40px; margin-bottom: var(--sp-3); }
.empty-title { font-size: var(--fs-16); font-weight: 600; margin-bottom: var(--sp-2); }
.empty-desc { font-size: var(--fs-13); color: var(--ink-50); margin-bottom: var(--sp-4); }
.empty-btn { display: inline-block; font-size: var(--fs-13); color: #fff; background: var(--brand); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-md); }

.toast {
    position: fixed; bottom: var(--sp-8); left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--ink); color: var(--bg); font-size: var(--fs-13);
    padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); z-index: 200;
    opacity: 0; transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.share-modal-mask {
    position: fixed; inset: 0; background: rgba(16, 24, 40, .5);
    display: none; align-items: center; justify-content: center; z-index: 100;
}
.share-modal-mask.show { display: flex; }
.share-modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); width: min(480px, 90vw); }
.share-modal-title { font-size: var(--fs-16); font-weight: 600; margin: 0 0 var(--sp-4); }
.share-text-box {
    font-size: var(--fs-12); color: var(--ink-70); background: var(--bg-sub);
    border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4);
    line-height: 1.7; margin-bottom: var(--sp-4); white-space: pre-wrap; word-break: break-all;
}
.share-canvas-wrap { text-align: center; margin-bottom: var(--sp-4); }
#shareCanvas { max-width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); }
.share-modal-btns { display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ══ 页脚 ══════════════════════════════════════════════════ */
.footer { border-top: 1px solid var(--line); margin-top: var(--sp-8); background: var(--bg-sub); }
.footer-explainer {
    max-width: var(--shell); margin: 0 auto; padding: var(--sp-5) var(--sp-6) 0;
    font-size: var(--fs-12); color: var(--ink-50); line-height: 1.75;
}
.footer-meta {
    max-width: var(--shell); margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-6);
    font-size: var(--fs-11); color: var(--ink-40);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2);
}
.footer-meta a { color: var(--ink-40); }
.footer-meta a:hover { color: var(--brand); }

/* ══ 响应式 ════════════════════════════════════════════════ */
@media (max-width: 1180px) {
    .shell { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); }
    .side-r { display: none; }
}
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; padding: var(--sp-4); gap: var(--sp-4); }
    .side-l { position: static; display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
    .side-title, .side-gap, .btn-submit { display: none; }
    .side-item, .side-sub { padding: 6px var(--sp-3); white-space: nowrap; border: 1px solid var(--line); border-radius: var(--r-md); }
    .side-sub { padding-left: var(--sp-3); }
    .side-r { display: flex; position: static; }
    .topbar-row { height: auto; padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; gap: var(--sp-3); }
    .topbar-search { order: 3; width: 100%; flex-basis: 100%; }
    .brand-tagline, .nav-link { display: none; }
    .pcard { grid-template-columns: 28px minmax(0, 1fr); }
    .pcard-heat { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: var(--sp-2); }
    .pcard-heat .heat-num::before { content: ""; }
    .share-btn { display: none; }
    .insight-3col, .info-grid { grid-template-columns: 1fr; }
    .detail-title, .mp-title, .section-title { font-size: var(--fs-24); }
    .detail-actions { margin-left: 0; width: 100%; }
}