@charset "utf-8";
/* 论坛首页：财经门户风（仅首页加载）。
   浅色底 + 焦点大卡 + 数据面板 + 平台卡片墙 + 版块卡 + 信息流；金色只用于返佣金额，蓝色用于操作。 */

.hf { max-width: 1200px; margin: 0 auto; padding: 16px 16px 40px; font-size: 14px; line-height: 1.7; color: var(--ink-2);
	--gold: #a17207; --gold-bg: #fdf6e2; --gold-line: #efe0b6;
	--line: #e6edf6; --soft: #f6f9fe; --soft-2: #f2f7ff;
	--sh: 0 1px 2px rgba(10,30,60,.045);
	--sh-hover: 0 16px 30px -20px rgba(10,50,110,.42); }
.hf, .hf *, .hf *::before, .hf *::after { box-sizing: border-box; }
.hf a { text-decoration: none; }
.hf h1, .hf h2, .hf h3, .hf p, .hf dl, .hf ol, .hf ul { margin: 0; padding: 0; }
.hf h1, .hf h2, .hf h3 { font-weight: 700; color: var(--ink); }
.hf li { list-style: none; }

/* 主题 .wp 固定 1200px、body min-width 1200px 会在窄视口撑出整页横向滚动，这里让容器自适应 */
@media (max-width: 1240px) {
	body { min-width: 0 !important; }
	.wp { width: auto !important; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
	#hl_nv { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
	#hl_nv::-webkit-scrollbar { display: none; }
	#hl_nv ul { width: max-content; min-width: 100%; }
	#scbar_txt { width: 220px; }
}

/* ---------- 通用：卡片 / 面板头 / 按钮 ---------- */
.hf-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sh); }
.hf-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.hf-hd h2 { position: relative; padding-left: 11px; font-size: 15px; }
.hf-hd h2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px;
	background: linear-gradient(180deg, var(--cyan), var(--blue)); }
.hf-more { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.hf-more:hover { color: var(--blue); }
.hf-note { font: 12px/1.6 var(--mono); color: var(--ink-3); }
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 6px;
	border: 1px solid transparent; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
	color: #06192e !important; background: linear-gradient(100deg, #7fe0ff, #2ea6f0);
	box-shadow: 0 10px 22px -12px rgba(46,166,240,.85); transition: filter .15s, box-shadow .15s; }
.hf-btn:hover { filter: brightness(1.06); color: #06192e !important; }
.hf-btn.ghost { background: #fff; color: var(--blue) !important; border-color: #cfe0f6; box-shadow: none; }
.hf-btn.ghost:hover { border-color: var(--blue); background: var(--soft-2); }
.hf-btn.lg { padding: 12px 26px; font-size: 15px; }

/* ---------- 页首一行：站名 + 动作 ---------- */
.hf-lead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 2px 2px 14px; }
.hf-lead h1 { font-size: 20px; letter-spacing: .3px; }
.hf-lead h1 span { margin-left: 10px; font-size: 12.5px; font-weight: 400; color: var(--ink-3); letter-spacing: .5px; }
.hf-leadact { display: flex; gap: 10px; }

/* ---------- 顶部两栏：焦点大卡 + 数据面板 ---------- */
.hf-top { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }

.hf-focus { padding: 18px 20px 14px; background: linear-gradient(180deg, #f3f8ff 0%, #fff 46%); }
.hf-ftags { display: flex; align-items: center; gap: 8px; }
.hf-chip { font: 700 10.5px/1 var(--mono); letter-spacing: 1px; color: #fff; padding: 5px 8px; border-radius: 4px;
	background: linear-gradient(100deg, #2b7fe0, #0a5bd3); }
.hf-ttag { font-size: 10.5px; color: var(--blue-d); background: #eaf2fc; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.hf-ttag:hover { background: #dcebfb; }
.hf-focus h2 { margin-top: 9px; font-size: 23px; line-height: 1.45; }
.hf-focus h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); }
.hf-focus h2 a:hover { color: var(--blue); }
.hf-fex { margin-top: 7px; font-size: 13px; line-height: 1.75; color: var(--ink-3);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hf-fmeta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font: 12px/1.6 var(--mono); color: var(--ink-3); }
.hf-fmeta b { color: var(--ink); }
.hf-fact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hf .hf-next { margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--line); counter-reset: hfn 1; }
.hf-next li { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px;
	padding: 6px; margin: 0 -6px; border-radius: 6px; transition: background .13s; }
.hf-next li:hover { background: var(--soft-2); }
.hf-next li::before { content: counter(hfn, decimal-leading-zero); counter-increment: hfn; font: 700 11.5px/1 var(--mono); color: #a5b7cb; }
.hf-next a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink-2); }
.hf-next a:hover { color: var(--blue); }
.hf-next i { font: 11px/1 var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }

.hf-stat { padding: 14px 20px 16px; }
.hf-stattt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 15px; }
.hf-today { font: 700 10.5px/1 var(--mono); color: var(--blue-d); background: #eaf2fc; border: 1px solid #d9e8f9;
	border-radius: 4px; padding: 4px 6px; white-space: nowrap; }
.hf-stattt.sm { margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.hf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.hf-tiles > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.hf-tiles dt { font-size: 12px; color: var(--ink-3); }
.hf-tiles dd { margin-top: 2px; font: 700 20px/1.25 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.hf-bars { display: grid; gap: 7px; margin-top: 9px; }
.hf-bar { display: grid; grid-template-columns: 86px minmax(0,1fr) 46px; align-items: center; gap: 8px; }
.hf-bar em { font-style: normal; font-size: 11.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hf-bart { height: 6px; border-radius: 3px; background: #eef3f9; overflow: hidden; }
.hf-bart i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #7fd8ff, #0a5bd3); }
.hf-barv { text-align: right; font: 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------- 平台卡片墙 ---------- */
.hf-wall { margin-top: 16px; }
.hf-pcs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 14px 20px 18px; }
.hf-pc { position: relative; display: grid; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px;
	background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s; }
.hf-pc:hover { border-color: #bcd8f6; box-shadow: var(--sh-hover); transform: translateY(-2px); }
.hf-pctop { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.hf-pava { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px;
	font: 700 12px/1 var(--mono); letter-spacing: -.2px; color: #fff; background: linear-gradient(135deg, #123557, #1a4a77); }
.hf-pclink { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hf-pc:hover .hf-pclink { color: var(--blue); }
/* 整卡可点：标题撑开透明点击层，底部按钮用 z-index 浮在上面 */
.hf-pclink::after { content: ""; position: absolute; inset: 0; }
.hf-pcbd { font: 700 10px/1 var(--mono); color: var(--gold); background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 4px; padding: 3px 5px; }
.hf-pcfy { display: flex; align-items: baseline; gap: 6px; }
.hf-pcfy i { font-style: normal; font-size: 11px; color: var(--ink-3); }
.hf-pcfy b { font: 700 17px/1.2 var(--mono); color: var(--gold); }
.hf-pcmeta { min-height: 17px; font-size: 11.5px; color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hf-pcbot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.hf-pcscore { font: 11.5px/1 var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-pcgo { position: relative; z-index: 2; font-size: 11.5px; font-weight: 700; color: var(--blue) !important;
	border: 1px solid #cfe0f6; border-radius: 5px; padding: 4px 10px; white-space: nowrap; }
.hf-pcgo:hover { background: #eaf2fc; }
.hf-pcall { align-content: center; justify-items: center; gap: 4px; border-style: dashed; background: #f7fafd; color: var(--ink-3); }
.hf-pcall b { font-size: 13.5px; color: var(--ink-2); }
.hf-pcall span { font-size: 11.5px; }
.hf-pcall:hover { border-color: var(--blue); background: var(--soft-2); color: var(--blue); }
.hf-pcall:hover b { color: var(--blue); }

/* ---------- 版块卡 ---------- */
.hf-boards { margin-top: 16px; }
.hf-bcs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; padding: 14px 20px 18px; }
.hf-bc { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 12px; border: 1px solid var(--line);
	border-radius: 9px; background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s; }
.hf-bc:hover { border-color: #bcd8f6; box-shadow: var(--sh-hover); transform: translateY(-2px); }
.hf-bctop { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 8px; }
.hf-bcava { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px;
	font: 700 13px/1 var(--mono); color: var(--blue-d); background: #eaf2fc; }
.hf-bcname { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hf-bc:hover .hf-bcname { color: var(--blue); }
.hf-bcgrp { font: 10.5px/1 var(--mono); color: var(--ink-3); }
.hf-bcstats { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 11px/1.5 var(--mono); color: var(--ink-3); }
.hf-bcstats > span { white-space: nowrap; }
.hf-bcstats b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hf-bclast { display: flex; align-items: baseline; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.hf-bclast b { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }
.hf-bc:hover .hf-bclast b { color: var(--blue); }
.hf-bclast i { flex: none; font: 10.5px/1.5 var(--mono); font-style: normal; color: var(--ink-3); }

/* ---------- 信息流 + 榜单 ---------- */
.hf-cols { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; margin-top: 16px; }
.hf-rail { display: grid; gap: 16px; min-width: 0; }

.hf .hf-rows { padding: 4px 20px 10px; }
.hf-rows li { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px;
	padding: 7px 8px; margin: 0 -8px; border-radius: 6px; border-bottom: 1px dashed var(--line); transition: background .13s; }
.hf-rows li:last-child { border-bottom: 0; }
.hf-rows.hf-notag li { grid-template-columns: minmax(0,1fr) auto auto; }
.hf-rows li:hover { background: var(--soft-2); }
.hf-rt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink-2); }
.hf-rt:hover { color: var(--blue); }
.hf-rn { font-size: 11px; color: var(--ink-3); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.hf-rn.hot { color: var(--blue-d); background: #e8f1fc; border-color: #d5e6f9; font-weight: 700; }
.hf-rd { font: 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.hf-rowsfoot { display: block; margin: 0 20px 16px; padding: 9px; border: 1px dashed var(--line); border-radius: 7px;
	text-align: center; font-size: 12.5px; color: var(--ink-3); background: #fafcff; }
.hf-rowsfoot:hover { color: var(--blue); border-color: #bcd8f6; background: var(--soft-2); }

.hf .hf-ranks { padding: 6px 20px 12px; counter-reset: hfr; }
.hf-ranks li { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 12px;
	padding: 7px 8px; margin: 0 -8px; border-radius: 6px; border-bottom: 1px dashed var(--line); transition: background .13s; }
.hf-ranks li:last-child { border-bottom: 0; }
.hf-ranks li:hover { background: var(--soft-2); }
.hf-ranks li::before { content: counter(hfr); counter-increment: hfr; width: 20px; text-align: center; border-radius: 5px;
	font: 700 11px/20px var(--mono); color: #fff; background: #c3cfdd; }
.hf-ranks li:nth-child(1)::before { background: linear-gradient(135deg, #f0b429, #d98b06); }
.hf-ranks li:nth-child(2)::before { background: linear-gradient(135deg, #b9c6d6, #93a4b8); }
.hf-ranks li:nth-child(3)::before { background: linear-gradient(135deg, #dda46f, #bf7f43); }
.hf-ranks a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.hf-ranks a:hover { color: var(--blue); }
.hf-ranks i { font: 11px/1 var(--mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }

.hf .hf-evs { padding: 6px 20px 12px; }
.hf-evs li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px;
	padding: 7px 8px; margin: 0 -8px; border-radius: 6px; border-bottom: 1px dashed var(--line); transition: background .13s; }
.hf-evs li:last-child { border-bottom: 0; }
.hf-evs li:hover { background: var(--soft-2); }
.hf-evs a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); }
.hf-evs a:hover { color: var(--blue); }
.hf-em { display: flex; align-items: center; gap: 6px; font: 10.5px/1.5 var(--mono); color: var(--ink-3); white-space: nowrap; }
.hf-pill { color: #9cabbd; }
.hf-pill.on { padding: 1px 6px; border-radius: 4px; background: #e2f0ff; color: var(--blue-d); font-weight: 700; }

/* ---------- 底部转化带 + 快捷入口 ---------- */
.hf-band { margin-top: 16px; overflow: hidden; }
.hf-bandtop { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px;
	background: linear-gradient(100deg, #eef6ff, #f9fcff); border-bottom: 1px solid var(--line); }
.hf-bandtop h3 { font-size: 17px; }
.hf-bandtop p { margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.hf-links { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; padding: 14px 20px 18px; }
.hf-links a { text-align: center; font-size: 12.5px; color: var(--ink-2); background: var(--soft); border: 1px solid var(--line);
	border-radius: 6px; padding: 8px 6px; transition: border-color .15s, background .15s, color .15s; }
.hf-links a:hover { color: var(--blue); border-color: #bcd8f6; background: var(--soft-2); }

/* ---------- 悬浮转化条 ---------- */
.hf-float { position: fixed; right: 22px; bottom: 26px; z-index: 999; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
	border-radius: 10px; background: rgba(255,255,255,.96); border: 1px solid #d7e5f5;
	box-shadow: 0 20px 44px -20px rgba(10,40,90,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
.hf-float.show { opacity: 1; transform: none; visibility: visible; }
.hf-float .hf-btn { padding: 9px 20px; font-size: 14px; }
.hf-float-x { font-size: 13px; color: var(--ink-3) !important; white-space: nowrap; }
.hf-float-x:hover { color: var(--blue) !important; }

/* 触屏：去掉点击高亮与 300ms 延迟 */
.hf a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* 键盘导航：只在 Tab 聚焦时显示焦点环，鼠标点击不出现 */
.hf a:focus-visible, .hf-float a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
	.hf, .hf *, .hf-float, .hf-float * { transition: none !important; animation: none !important; }
}

@media (max-width: 1024px) {
	.hf-top { grid-template-columns: minmax(0,1fr); }
	.hf-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.hf-bars { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 24px; }
	.hf-pcs { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.hf-bcs { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.hf-cols { grid-template-columns: minmax(0,1fr); }
	.hf-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.hf-links { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 860px) {
	.hf-pcs { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.hf-bcs { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.hf-bandtop { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 640px) {
	.hf { padding: 12px 12px 86px; }
	.hf-lead { flex-direction: column; align-items: flex-start; gap: 10px; }
	.hf-lead h1 { font-size: 18px; }
	.hf-lead h1 span { display: block; margin: 4px 0 0; }
	.hf-focus { padding: 14px 14px 10px; }
	.hf-focus h2 { font-size: 18px; }
	.hf-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.hf-bars { grid-template-columns: minmax(0,1fr); }
	.hf-pcs, .hf-bcs { grid-template-columns: minmax(0,1fr); }
	.hf-rail { grid-template-columns: minmax(0,1fr); }
	.hf-rows li, .hf-rows.hf-notag li { grid-template-columns: minmax(0,1fr) auto auto; }
	.hf-rows .hf-ttag { display: none; }
	.hf-rows .hf-rn:not(.hot) { display: none; }
	.hf-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.hf-links a { padding: 9px 6px; }
	.hf-float { right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: space-between; }
	.hf-float .hf-btn { flex: 1; text-align: center; }
	#scbar_txt { width: 120px; }
}