/* flow — 单列清爽信息流风 | 复用 .yubao-header/.yubao-footer 契约 */
:root { --flow-ink:#22252a; --flow-line:#eef0f2; --flow-muted:#9098a1; --flow-bg:#f6f7f9; }
* { box-sizing:border-box; }
html { background:var(--flow-bg); text-align:center; }
body {
  width:100%; max-width:720px; margin:0 auto; text-align:left; background:#fff;
  font:15px/1.7 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--flow-ink);
}
a { color:inherit; text-decoration:none; }
ul,ol,li { margin:0; padding:0; list-style:none; }
img { display:block; }

/* 头部：极简条形，主色背景 */
.yubao-header { background:var(--yubao-primary,#1a237e); color:#fff; padding:12px 16px; position:sticky; top:0; z-index:20; }
.yubao-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.yubao-slogan { display:none; }
.yubao-logo { color:#fff; font-size:20px; font-weight:700; letter-spacing:1px; }
.yubao-nav { display:flex; gap:14px; overflow-x:auto; flex:1; -webkit-overflow-scrolling:touch; }
.yubao-nav a { color:rgba(255,255,255,.85); font-size:14px; white-space:nowrap; padding:2px 0; }
.yubao-nav a:hover { color:#fff; }

.flow-main { padding:14px 14px 24px; }

/* 头条大卡 */
.flow-lead-box { position:relative; margin-bottom:16px; }
.flow-tag { position:absolute; top:10px; left:10px; z-index:2; background:var(--yubao-highlight,#c30); color:#fff; font-size:12px; padding:3px 9px; border-radius:4px; }
.flow-lead-a { display:block; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.flow-lead-img { width:100%; height:300px; object-fit:cover; opacity:.92; }
.flow-lead-cap { display:block; padding:14px 16px; background:#fff; }
.flow-lead-cap strong { display:block; font-size:20px; line-height:1.45; }
.flow-lead-cap em { display:block; margin-top:6px; font-style:normal; color:var(--flow-muted); font-size:14px; }

/* 分类快捷 chips */
.flow-chips { display:flex; gap:8px; overflow-x:auto; padding:4px 0 14px; }
.flow-chips a { flex:0 0 auto; background:var(--flow-bg); border:1px solid var(--flow-line); border-radius:16px; padding:6px 14px; font-size:13px; color:#555; }
.flow-chips a:hover { background:var(--yubao-primary,#1a237e); color:#fff; border-color:var(--yubao-primary,#1a237e); }

/* 分节标题 */
.flow-h2,.flow-topic h3 { font-size:16px; margin:22px 0 12px; padding-left:10px; border-left:4px solid var(--yubao-primary,#1a237e); }

/* 信息流卡片：左图右文 */
.flow-list { display:flex; flex-direction:column; gap:2px; }
.flow-card { border-bottom:1px solid var(--flow-line); }
.flow-card-a { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:14px 0; align-items:stretch; }
.flow-thumb { width:120px; height:84px; object-fit:cover; border-radius:8px; background:#eee; }
.flow-card-body { display:flex; flex-direction:column; min-width:0; }
.flow-card-title { font-size:16px; line-height:1.5; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.flow-card-sum { font-style:normal; color:var(--flow-muted); font-size:13px; margin-top:4px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.flow-card-date { margin-top:auto; font-size:12px; color:#b6bcc4; }
.flow-card-a:hover .flow-card-title { color:var(--yubao-primary,#1a237e); }

/* 纯文列表（混合栏目） */
.flow-list-text li { padding:12px 2px; border-bottom:1px solid var(--flow-line); font-size:15px; position:relative; padding-left:16px; }
.flow-list-text li::before { content:"›"; position:absolute; left:2px; color:var(--yubao-primary,#1a237e); font-weight:700; }

/* 专题 */
.flow-topic { margin-top:22px; background:var(--flow-bg); border-radius:10px; padding:14px 16px; }
.flow-topic h3 { margin-top:0; }
.flow-topic-list { display:flex; flex-wrap:wrap; gap:8px; }
.flow-topic-list li { background:#fff; border:1px solid var(--flow-line); border-radius:14px; padding:5px 12px; font-size:13px; }

/* 列表页 */
.flow-list-page { padding:6px 0; }
.flow-list-title { font-size:22px; margin:6px 0 4px; }
.flow-list-intro { color:var(--flow-muted); font-size:13px; margin-bottom:12px; }

/* 内容页 */
.flow-article { padding:6px 0 20px; }
.flow-art-title { font-size:23px; line-height:1.5; margin:8px 0 10px; }
.flow-art-meta { font-size:12px; color:var(--flow-muted); padding-bottom:14px; border-bottom:1px solid var(--flow-line); margin-bottom:18px; }
.flow-art-body { font-size:16px; line-height:1.9; }
.flow-art-body p { margin:0 0 18px; }
.flow-art-body img { max-width:100%; height:auto; border-radius:8px; margin:10px 0; }

.yubao-crumb { font-size:12px; color:var(--flow-muted); margin-bottom:12px; }
.yubao-pagination { margin-top:22px; text-align:center; }

/* 页脚 */
.yubao-footer { margin-top:28px; padding:22px 16px; text-align:center; font-size:12px; color:var(--flow-muted); background:var(--flow-bg); }
.yubao-footer a { color:#666; }
.yubao-topic-links { margin-bottom:8px; }

@media (min-width:721px) {
  .flow-lead-img { height:360px; }
}