/* ========================================================================== MacroMargin 数据拆解 — 样式表 设计令牌集中在 :root，深浅色通过 切换 ========================================================================== */ :root { /* 字体 */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-display: "Arial Black", "Helvetica Neue", Impact, sans-serif; /* 尺寸 */ --wrap: 1220px; --radius: 4px; --card-pad: 18px 20px 20px; --header-h: 52px; /* 图表系列色定义在下方「涨跌语义」那一节（同一文件后面的 :root 会覆盖这里， 所以只保留一处，避免四份副本互相打架）。 */ /* 象限色 */ --q-heal: #2f9e6e; --q-worsen: #d9483b; --q-mild: #8b93a1; } /* ── 深色（默认） ── */ html.dark { --surface: #1e2533; --surface-2: #252e3f; --surface-3: #2c3648; --raised: #2a3446; --text: #e6ebf2; --text-strong: #ffffff; --muted: #98a3b3; --faint: #6d7889; --line: #35405230; --border: #3a465c; --border-soft: #313c50; --grid: #ffffff12; --grid-strong: #ffffff22; --accent: #d9483b; --accent-soft: #d9483b22; --up: #d9483b; --down: #2f9e6e; --emphasis: #d9483b; --shadow: 0 1px 2px #00000040; --band: #ffffff14; } /* ── 浅色 ── */ html.light { --surface: #f2f0eb; --surface-2: #ffffff; --surface-3: #f7f6f2; --raised: #ffffff; --text: #1c2430; --text-strong: #0a0a0a; --muted: #5d6875; --faint: #8b94a0; --line: #00000010; --border: #dcd8cf; --border-soft: #e6e2d9; --grid: #0000000f; --grid-strong: #0000001c; --accent: #c0392b; --accent-soft: #c0392b18; --up: #c0392b; --down: #1f8a5c; --emphasis: #c0392b; --shadow: 0 1px 2px #0000000d; --band: #00000010; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 13px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; } code, pre { font-family: var(--font-mono); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } /* ── 启动占位 ── */ .boot { padding: 80px 20px; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; } .boot.is-error { color: var(--accent); } /* ── 页头 ── */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 16px; } .brand { display: flex; flex-direction: column; gap: 2px; text-decoration: none; flex: none; } .brand-line { font-family: var(--font-display); font-size: 10px; font-weight: 900; letter-spacing: 0.42em; line-height: 1; color: var(--text-strong); } .brand-invert { background: var(--text-strong); color: var(--surface); padding: 2px 6px; letter-spacing: 0.30em; } .header-tagline { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; color: var(--muted); border-left: 1px solid var(--border); padding-left: 16px; } .header-utils { margin-left: auto; display: flex; gap: 8px; } .icon-btn { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); cursor: pointer; font-size: 13px; transition: color .15s, border-color .15s; } .icon-btn:hover { color: var(--text-strong); border-color: var(--faint); } /* ── 标题区 ── */ .page-head { padding: 26px 20px 4px; } .crumb { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; } .page-title { margin: 6px 0 8px; font-size: 25px; font-weight: 860; letter-spacing: -0.015em; color: var(--text-strong); line-height: 1.24; } .page-sub { margin: 0 0 12px; max-width: 800px; color: var(--muted); font-size: 13px; } .meta-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0 16px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--faint); } .meta-strip b { color: var(--text); font-weight: 720; } /* ── 概览卡片 ── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; padding: 18px 0 4px; } .kpi { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 13px 15px 14px; box-shadow: var(--shadow); } .kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--faint); margin-bottom: 7px; } .kpi-value { font-size: 23px; font-weight: 840; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; } .kpi-value .unit { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 3px; } .kpi-sub { margin-top: 6px; font-size: 11.5px; color: var(--muted); } .neg { color: var(--up); } .pos { color: var(--down); } /* ── 分栏 ── */ .tabs { display: flex; flex-wrap: nowrap; gap: 22px; margin: 22px 0 0; border-bottom: 1px solid var(--border); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .tab-group { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; } .tab-group-label { flex: 0 0 auto; margin-right: 6px; font-size: 11px; letter-spacing: 0.14em; color: var(--dim); } .tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px 10px; font-family: inherit; font-size: 13px; font-weight: 780; letter-spacing: 0.01em; color: var(--muted); cursor: pointer; flex: 0 0 auto; white-space: nowrap; transition: color .15s, border-color .15s; } .tab:hover { color: var(--text); } .tab.is-active { color: var(--text-strong); border-bottom-color: var(--accent); } .panel { display: none; padding: 20px 0 8px; } .panel.is-active { display: block; } /* ── 工具栏 ── */ .toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .toolbar-spacer { flex: 1 1 auto; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 10.5px; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } select { appearance: none; font-family: inherit; font-size: 12.5px; font-weight: 620; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 26px 6px 9px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } select.multi { min-width: 168px; height: 32px; padding: 4px 26px 4px 9px; overflow-y: auto; } select.multi option { padding: 2px 4px; border-radius: 2px; } .notice { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; color: var(--text); } /* ── 卡片 ── */ .card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--card-pad); margin-bottom: 12px; box-shadow: var(--shadow); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .card h2 { margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: -0.005em; color: var(--text-strong); } .card-sub { margin: 3px 0 0; font-size: 11.5px; color: var(--faint); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 12px; } .grid-2 .card { margin-bottom: 12px; } /* ── 图例 ── */ .legend { display: flex; flex-wrap: wrap; gap: 5px 10px; justify-content: flex-end; max-width: 62%; } .legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 640; color: var(--muted); cursor: pointer; user-select: none; padding: 1px 2px; border-radius: 2px; } .legend-item:hover { color: var(--text-strong); } .legend-item.is-off { opacity: 0.35; text-decoration: line-through; } .legend-swatch { width: 9px; height: 3px; border-radius: 2px; flex: none; } /* ── 图表 ── */ .chart-host { position: relative; width: 100%; } .chart-host svg { display: block; width: 100%; overflow: visible; } .chart-frame { fill: none; stroke: var(--grid); } .grid-line { stroke: var(--grid); stroke-width: 1; } .grid-line.zero { stroke: var(--grid-strong); } .axis-text { fill: var(--faint); font-size: 10px; font-weight: 620; font-family: var(--font-sans); } .axis-text.right { text-anchor: end; } .axis-title { fill: var(--faint); font-size: 10px; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; } .series-line { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .series-line.dim { stroke-width: 1.1; opacity: 0.42; } .series-line.emphasis { stroke-width: 2.4; } .band-area { stroke: none; } .zero-line { stroke: var(--grid-strong); stroke-width: 1; stroke-dasharray: 3 3; } .marker-dot { stroke: var(--surface-2); stroke-width: 1.4; } .quadrant-bg { opacity: 0.5; } .case-line { fill: none; stroke: var(--s-1); stroke-width: 1; opacity: 0.30; } .hover-line { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 2; } /* 空状态 */ .empty-card { text-align: left; } .empty-text { color: var(--muted); margin: 8px 0 16px; max-width: 760px; } .empty-hint { font-size: 12px; color: var(--muted); margin: 12px 0 8px; } .empty-hint code { background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: 3px; padding: 1px 5px; font-size: 11.5px; color: var(--text); } .schema { background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin: 0; font-size: 11.5px; line-height: 1.62; color: var(--text); overflow-x: auto; white-space: pre; } /* ── 表格 ── */ .table-host { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } th { text-align: left; font-size: 10.5px; font-weight: 780; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 0 10px 8px 0; border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; } th:hover { color: var(--text-strong); } th.num, td.num { text-align: right; padding-right: 14px; } td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); color: var(--text); } tbody tr:hover td { background: var(--surface-3); } .tag { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 760; border: 1px solid transparent; white-space: nowrap; } .tag-大 { color: var(--up); background: var(--accent-soft); border-color: var(--up); } .tag-小 { color: var(--s-3); background: #d98b2618; border-color: var(--s-3); } .tag-常 { color: var(--muted); background: var(--surface-3); border-color: var(--border-soft); } .tag-ongoing { color: var(--accent); font-weight: 800; } /* ── 提示框 ── */ .tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; font-size: 11.5px; line-height: 1.5; color: var(--text); box-shadow: 0 6px 20px #00000038; max-width: 260px; } .tooltip .tt-title { font-weight: 800; color: var(--text-strong); margin-bottom: 4px; font-size: 12px; } .tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; } .tooltip .tt-row b { font-variant-numeric: tabular-nums; font-weight: 720; } .tooltip .tt-swatch { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; } /* ── 页脚 ── */ .site-footer { margin-top: 34px; border-top: 1px solid var(--border); background: var(--surface-2); } .footer-inner { padding: 20px 20px 26px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--muted); } .footer-inner a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .footer-note { color: var(--faint); } @media (max-width: 720px) { .page-title { font-size: 20px; } .grid-2 { grid-template-columns: 1fr; } .legend { max-width: 100%; justify-content: flex-start; } .header-tagline { display: none; } } /* ── 卡片脚注（数据口径提示） ── */ .card-note { margin: 10px 0 0; padding: 9px 12px; background: var(--surface-2); border-left: 2px solid var(--warn, var(--border)); border-radius: 0 var(--radius) var(--radius) 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); } /* ── 图表水平参考线标签 ── */ .ref-line-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; opacity: 0.9; } /* ══ 美联储 / 宏观日历 ══════════════════════════════════════════════════ */ .fed-cal { display: flex; flex-direction: column; gap: 2px; } .fed-day { display: grid; grid-template-columns: 108px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); } .fed-day:last-child { border-bottom: none; } .fed-date { display: flex; flex-direction: column; line-height: 1.3; } .fed-date b { font-size: 13px; font-variant-numeric: tabular-nums; } .fed-date span { font-size: 11px; opacity: .62; } .fed-items { display: flex; flex-direction: column; gap: 3px; } .fed-item { display: grid; grid-template-columns: 46px 62px 1fr auto; gap: 8px; align-items: baseline; font-size: 12.5px; } .fed-time { font-variant-numeric: tabular-nums; opacity: .62; font-size: 11.5px; } .fed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fed-type { font-size: 11px; opacity: .5; } .fed-badge { display: inline-block; text-align: center; border-radius: 3px; padding: 1px 0; font-size: 11px; line-height: 1.5; } .fed-badge.fed-a { background: rgba(214, 69, 69, .16); color: #d64545; font-weight: 600; } .fed-badge.fed-b { background: rgba(214, 158, 46, .16); color: #b8860b; } .fed-badge.fed-c { background: rgba(128, 128, 128, .13); opacity: .72; } .fed-press { list-style: none; margin: 0; padding: 0; } .fed-press li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); font-size: 13px; } .fed-press li:last-child { border-bottom: none; } .fed-press .feed-date { font-size: 11.5px; opacity: .6; white-space: nowrap; } /* ══ 图表库 ══════════════════════════════════════════════════════════════ */ .fred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; } .fred-card { min-width: 0; } .fred-card .card-head { margin-bottom: 4px; } .fred-card h3 { font-size: 13.5px; margin: 0; font-weight: 600; } .fred-card .fred-stat { font-size: 11.5px; opacity: .66; margin-top: 2px; } .fred-note { font-size: 11.5px; opacity: .6; margin: 4px 0 0; } @media (max-width: 900px) { .fred-grid { grid-template-columns: 1fr; } } /* ══ 中国政策 ════════════════════════════════════════════════════════════ */ #policy-table td.pol-title { max-width: 560px; } #policy-table td.pol-title a { text-decoration: none; } #policy-table td.pol-title a:hover { text-decoration: underline; } #policy-table .pol-docno { font-size: 11.5px; opacity: .6; white-space: nowrap; } #policy-table .pol-muted { opacity: .5; } .policy-more { text-align: center; padding: 10px 0; } /* ══ 中美专题 ════════════════════════════════════════════════════════════ */ #uscn-pres td.u-title, #uscn-cab td.u-title { max-width: 600px; } #uscn-pres td.u-title a, #uscn-cab td.u-title a { text-decoration: none; } #uscn-pres td.u-title a:hover, #uscn-cab td.u-title a:hover { text-decoration: underline; } .uscn-badge { display: inline-block; border-radius: 3px; padding: 0 4px; font-size: 11px; } .uscn-badge.hi { background: rgba(214,69,69,.16); color: #d64545; font-weight: 600; } .uscn-badge.cn { background: rgba(214,158,46,.16); color: #b8860b; } .uscn-badge.pd { background: rgba(64,120,200,.14); color: #4078c8; } .uscn-x { font-variant-numeric: tabular-nums; font-weight: 600; } .uscn-muted { opacity: .5; } /* ══ 资讯评论 ════════════════════════════════════════════════════════════ */ .cm-list { display: flex; flex-direction: column; } .cm-item { padding: 9px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); } .cm-item:last-child { border-bottom: none; } .cm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .cm-plat { font-size: 11px; border-radius: 3px; padding: 0 5px; background: rgba(128,128,128,.14); } .cm-plat.community { background: rgba(64,150,110,.16); color: #2f8f63; } .cm-plat.research { background: rgba(64,120,200,.14); color: #4078c8; } .cm-plat.news { background: rgba(200,140,60,.16); color: #b8792b; } .cm-plat.ai { background: rgba(139,107,177,.16); color: #7a5aa0; } .cm-plat.interview { background: rgba(178,91,122,.16); color: #a14868; } .cm-ticker { font-weight: 600; font-variant-numeric: tabular-nums; } .cm-time { font-size: 11.5px; opacity: .55; margin-left: auto; } .cm-title { font-size: 13.5px; margin: 3px 0 2px; } .cm-title a { text-decoration: none; } .cm-title a:hover { text-decoration: underline; } .cm-text { font-size: 12.5px; opacity: .72; line-height: 1.55; white-space: pre-wrap; } /* ══ 外资观点 ════════════════════════════════════════════════════════════ */ .sa-warn { border-left: 3px solid #d64545; } .sa-warn p { margin: 0; font-size: 13px; line-height: 1.6; } .sa-item { padding: 9px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); } .sa-item:last-child { border-bottom: none; } .sa-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .sa-ent { font-weight: 600; font-variant-numeric: tabular-nums; } .sa-st { font-size: 11px; border-radius: 3px; padding: 0 5px; } .sa-st.bull { background: rgba(47,143,99,.16); color: #2f8f63; } .sa-st.bear { background: rgba(214,69,69,.16); color: #d64545; } .sa-st.neutral { background: rgba(128,128,128,.14); } .sa-vd { font-size: 11px; border-radius: 3px; padding: 0 5px; } .sa-vd.hit { background: rgba(47,143,99,.14); color: #2f8f63; } .sa-vd.miss { background: rgba(214,69,69,.14); color: #d64545; } .sa-vd.open { background: rgba(128,128,128,.12); opacity: .8; } .sa-th { font-size: 13.5px; margin: 3px 0 2px; line-height: 1.55; } .sa-meta { font-size: 11.5px; opacity: .6; } /* ══ 更新流 ══════════════════════════════════════════════════════════════ */ .tl-day { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); } .tl-day:last-child { border-bottom: none; } .tl-date { display: flex; flex-direction: column; line-height: 1.3; } .tl-date b { font-size: 13px; font-variant-numeric: tabular-nums; } .tl-date span { font-size: 11px; opacity: .6; } .tl-items { display: flex; flex-direction: column; gap: 4px; } .tl-item { display: flex; gap: 8px; align-items: baseline; font-size: 12.8px; } .tl-mod { font-size: 11px; border-radius: 3px; padding: 0 5px; white-space: nowrap; background: rgba(128,128,128,.14); } .tl-mod.m-feds { background: rgba(64,120,200,.15); color: #4078c8; } .tl-mod.m-policy { background: rgba(200,140,60,.16); color: #b8792b; } .tl-mod.m-uscn { background: rgba(214,69,69,.15); color: #d64545; } .tl-mod.m-housing { background: rgba(47,143,99,.15); color: #2f8f63; } .tl-mod.m-sa { background: rgba(139,107,177,.15); color: #7a5aa0; } .tl-agg { font-size: 10.5px; opacity: .55; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; } .tl-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-title a { text-decoration: none; } .tl-title a:hover { text-decoration: underline; } /* ══ 每日 / 每周简报 ══════════════════════════════════════════════════════ */ .bf-snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .bf-card { border: 1px solid var(--line, rgba(128,128,128,.18)); border-radius: 6px; padding: 9px 11px; } .bf-mod { font-size: 11px; opacity: .6; } .bf-lbl { font-size: 12.5px; margin: 2px 0 3px; } .bf-val { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .bf-per { font-size: 11px; opacity: .55; margin-top: 2px; } .bf-hl { padding: 7px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.16)); font-size: 13px; display: flex; gap: 8px; align-items: baseline; } .bf-hl:last-child { border-bottom: none; } .bf-hl .bf-mod { white-space: nowrap; } .bf-delta { font-size: 12.5px; padding: 4px 0; } .bf-delta b { font-variant-numeric: tabular-nums; } /* ══ 关于本站 ════════════════════════════════════════════════════════════ */ .about-p { font-size: 13.5px; line-height: 1.75; margin: 0 0 10px; } .about-p:last-child { margin-bottom: 0; } .about-ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.85; } .about-ul li { margin-bottom: 5px; } .about-ul code { font-size: 12px; } /* ══ AI 助手 ═════════════════════════════════════════════════════════════ */ .ask-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(128,128,128,.14); } .ask-status.on { background: rgba(47,143,99,.16); color: #2f8f63; } .ask-status.off { background: rgba(214,69,69,.14); color: #d64545; } .ask-input { display: flex; gap: 8px; } .ask-input input { flex: 1; padding: 8px 11px; font-size: 13.5px; border: 1px solid var(--line, rgba(128,128,128,.28)); border-radius: 6px; background: transparent; color: inherit; } .ask-suggests { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .ask-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 14px; cursor: pointer; border: 1px solid var(--line, rgba(128,128,128,.28)); background: transparent; color: inherit; } .ask-chip:hover { background: rgba(128,128,128,.1); } .ask-ans { font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; } .ask-cite { margin-top: 12px; } .ask-cite h4 { font-size: 12.5px; opacity: .7; margin: 0 0 6px; font-weight: 600; } .ask-cite-item { font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.14)); display: flex; gap: 8px; } .ask-cite-item:last-child { border-bottom: none; } .ask-cite-mod { font-size: 11px; opacity: .6; white-space: nowrap; } .ask-loading { font-size: 13px; opacity: .7; } /* ══════════════════════════════════════════════════════════════════════════ 视觉层：出版物 / 研报质感（暖纸色 + 楷体标题 + 墨色强调） ────────────────────────────────────────────────────────────────────────── ⚠️ 说明：本区块的色值与令牌**照抄自 ocmacro 的 CSS 变量**（用户明确要求 「先抄，后续自己改好再上线」）。数据、指标、组件实现均为本项目自建； 仅视觉层为复刻。替换时只改本区块即可，不动任何逻辑。 ══════════════════════════════════════════════════════════════════════════ */ :root { /* 字体：标题加楷体栈 —— 这是观感差异最大的一步 */ --font-kai: "Kaiti SC", "KaiTi", "STKaiti", "KaiTi_GB2312", "Noto Serif SC", serif; /* 浅色：暖纸色 */ --bg: #faf9f7; --surface: #faf9f7; --surface2: #f2f0eb; --border: #e0ddd6; --accent: #0a0a0a; --accent-light: #333333; --text: #0a0a0a; --text-strong: #0a0a0a; --muted: #444444; --dim: #999999; --green: #2a7a2a; /* 主按钮：墨底纸字 */ --btn-bg: #0a0a0a; --btn-fg: #faf9f7; /* 卡片：几乎看不见的边框 + 极轻阴影 */ --card-bg: #fffdfa; --card-border: rgba(10, 10, 10, 0.12); --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); --radius: 12px; --radius-sm: 8px; /* 表格 */ --row-border: rgba(10, 10, 10, 0.06); --row-hover: rgba(10, 10, 10, 0.035); --tag-bg: rgba(10, 10, 10, 0.035); --tag-border: rgba(10, 10, 10, 0.075); /* 高亮：黄 */ --hl: #f2c200; --hl-bg: rgba(255, 214, 64, 0.16); --hl-text: #8a6200; /* 涨跌语义（红绿仅用于数据，不再作强调色） */ --up: #b42318; --down: #047857; /* 图表分类色 —— ⚠️ 2026-09-21 重挑，**必须跑验证器，不能凭眼睛** （dataviz skill 的 validate_palette.js，参数带我们自己的底色）: node scripts/validate_palette.js "<8个色>" --mode light --surface "#f7f6f2" 为什么换掉上一版「去饱和」那组：初衷（纸底上原色太刺眼）是对的，但实测 **两个模式都不合格** —— 橄榄 #6f6a58 与青 #2f6f73 正常视力 ΔE 仅 8.1 （底线 15），全色觉读者也分不清；红绿色盲下更只有 4.3。 现在这组在「沉、不刺眼」和「分得开」之间取平衡，两模式全 PASS， 且 8 色对底色对比度**全部 ≥3:1**（比规范默认那组还好）。 ⚠️ 顺序固定不循环：第 9 条序列归入「其它」或改小倍数图，不要另造色相。 */ --s-1: #2a6fbf; /* 蓝 */ --s-2: #c85a2a; /* 橙 */ --s-3: #17845f; /* 青绿 */ --s-4: #b8860b; /* 金 */ --s-5: #b4517d; /* 品红 */ --s-6: #2f7a2f; /* 绿 */ --s-7: #4a3aa7; /* 紫 */ --s-8: #b3312f; /* 品牌红 */ --q-heal: #5d7f64; --q-worsen: #b65a4a; --q-mild: #8b8b8b; --line: rgba(10, 10, 10, 0.08); --grid: rgba(10, 10, 10, 0.06); --shadow: 0 8px 24px rgba(15, 23, 42, 0.04); --emphasis: #0a0a0a; } html.dark { /* 深色：冷蓝黑 */ --bg: #0d0f14; --surface: #161b25; --surface2: #1e2533; --border: #2a3348; --accent: #e2e8f0; --accent-light: #60a5fa; --text: #e2e8f0; --text-strong: #ffffff; --muted: #94a3b8; --dim: #64748b; --green: #10b981; --btn-bg: #e2e8f0; --btn-fg: #0d0f14; --card-bg: rgba(22, 27, 37, 0.88); --card-border: rgba(148, 163, 184, 0.24); --card-shadow: 0 12px 28px rgba(2, 6, 23, 0.34); --row-border: rgba(148, 163, 184, 0.13); --row-hover: rgba(148, 163, 184, 0.075); --tag-bg: rgba(148, 163, 184, 0.08); --tag-border: rgba(148, 163, 184, 0.17); --hl: #ffe36d; --hl-bg: rgba(255, 227, 109, 0.18); --hl-text: #ffeaa0; --up: #fca5a5; --down: #10b981; /* 深色底：同八色相**按深色底重新取步**，不是浅色的自动反转。 对 --surface #1e2533 实测五项全 PASS（亮度带这一项逼着把金色压到 #ad8418）。 */ --s-1: #4a8ad4; --s-2: #d26e3e; --s-3: #2fa87d; --s-4: #ad8418; --s-5: #c66a94; --s-6: #4fa34f; --s-7: #8f83e0; --s-8: #d95a54; --q-heal: #89a88d; --q-worsen: #d08a78; --q-mild: #a3a3a3; --line: rgba(148, 163, 184, 0.16); --grid: rgba(148, 163, 184, 0.14); --shadow: 0 12px 28px rgba(2, 6, 23, 0.34); --emphasis: #e2e8f0; } /* ── 组件层：让控件真正吃上面那套令牌 ─────────────────────────────────── */ /* 标题用楷体 —— 观感差异最大的一处 */ .card h2, .card h3, .panel h1, .panel h2, .card-head h2, .fred-card h3, .cm-title, .sa-th, .tl-title { font-family: var(--font-kai); letter-spacing: .02em; } .card h2 { font-weight: 600; } /* 数字与标签仍用无衬线，保证可读与对齐 */ .kpi-value, .data-table, .data-table td, .bf-val, .cm-text, .sa-meta, .tl-date b { font-family: var(--font-sans); } /* 卡片：大圆角 + 极轻阴影 + 极淡边框 */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); } .kpi, .bf-card, .fred-card { border-radius: var(--radius-sm); border-color: var(--card-border); } /* 主按钮：墨底纸字，hover 反转（照 ocmacro 的 .auth-submit） */ .btn-more { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: 999px; padding: 6px 18px; font-size: 12.5px; cursor: pointer; transition: background .15s, color .15s; } .btn-more:hover { background: var(--surface); color: var(--text); } /* 输入框：纸底 + 淡边，聚焦时边框转强调色 */ input[type="search"], input[type="text"], select, .ask-input input { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); outline: none; } input:focus, select:focus, .ask-input input:focus { border-color: var(--accent); } ::placeholder { color: var(--dim); opacity: 1; } /* 表格：行分隔极淡、hover 轻提亮 */ .data-table th { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--border); } .data-table td { border-bottom: 1px solid var(--row-border); } .data-table tbody tr:hover { background: var(--row-hover); } /* 徽章/chip：药丸形 + surface2 底 */ .cm-plat, .uscn-badge, .fed-badge, .sa-st, .sa-vd, .tl-mod, .tl-agg, .ask-chip { border-radius: 999px; border: 1px solid var(--tag-border); background: var(--tag-bg); font-weight: 600; } .ask-chip { font-weight: 500; } .ask-chip:hover { background: var(--surface2); border-color: var(--accent); } /* 标签页：更像目录栏 */ .tab { font-family: var(--font-kai); font-size: 14px; letter-spacing: .04em; } /* 链接：墨色下划线，不用蓝色 */ .cm-title a, .tl-title a, .sa-th a, .fed-item a, .ask-cite-item a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; } .cm-title a:hover, .tl-title a:hover, .sa-th a:hover { text-decoration-color: var(--accent); } /* 小道消息：便签纸质感（照 ocmacro 的 --rumor-note-* 思路） */ .panel[data-panel="gossip"] .cm-item { background: linear-gradient(180deg, #fffdf8, #f6f3ed); border: 1px solid rgba(28, 26, 23, 0.16); border-radius: var(--radius-sm); box-shadow: 0 9px 18px rgba(20, 18, 15, 0.13); padding: 10px 13px; margin-bottom: 8px; } html.dark .panel[data-panel="gossip"] .cm-item { background: linear-gradient(180deg, rgba(30,31,35,.96), rgba(23,25,31,.98)); border-color: rgba(148, 163, 184, 0.22); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.28); } /* 警示条：用墨色边框而非纯红，红色只留给语义 */ .sa-warn { border-left: 3px solid var(--up); background: var(--surface2); } /* ⚠️⚠️ **必须用 `html.light` 而不是 `:root`** —— 实测踩过： `html.light` 的特异性 (0,1,1) 高于 `:root` (0,1,0)， 所以文件里原有的 `html.light { --accent: #c0392b }` 会**赢过** 后加的 `:root { --accent: #0a0a0a }`，导致强调色改不动 （`--bg` 等没被 html.light 重复定义的变量则正常生效 → 表现很迷惑）。 同特异性下后者胜，所以这里重下一次。 */ html.light { --bg: #faf9f7; --surface: #faf9f7; --surface2: #f2f0eb; --surface-2: #f2f0eb; --surface-3: #f7f6f2; --border: #e0ddd6; --border-soft: #ebe8e1; --accent: #0a0a0a; --accent-light: #333333; --accent-soft: rgba(10, 10, 10, 0.06); --text: #0a0a0a; --text-strong: #0a0a0a; --muted: #444444; --faint: #999999; --dim: #999999; --line: rgba(10, 10, 10, 0.08); --grid: rgba(10, 10, 10, 0.06); --up: #b42318; --down: #047857; --emphasis: #0a0a0a; --raised: #fffdfa; --btn-bg: #0a0a0a; --btn-fg: #faf9f7; --card-bg: #fffdfa; --card-border: rgba(10, 10, 10, 0.12); --card-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); } /* ══════════════════════════════════════════════════════════════════════ 2026-09-20 视觉统一：把数据拆解页拉到与门面首页同一副面孔 ---------------------------------------------------------------------- 之前两页是两套设计系统（首页 Georgia 衬线 + 朱红 #b3312f + 3px 直角； 数据页楷体 + 近黑 #0a0a0a + 12px 圆角），从首页点进来像换了个网站。 这里只覆盖**令牌**，不动任何布局规则 —— 要回退把整段删掉即可。 ⚠️ 图表系列色（--s-1…--s-8）与象限色刻意不动：那是数据编码， 跟着品牌色走会让同一条曲线在两页变色。 ══════════════════════════════════════════════════════════════════════ */ :root { /* 与 home.css 同源的纸墨 */ --bg: #f7f6f2; --surface: #f7f6f2; --surface2: #efece4; --card-bg: #fffefb; --border: #ddd8cd; --card-border: #ddd8cd; --card-shadow: 0 6px 18px rgba(20, 24, 29, .05); --text: #14181d; --text-strong: #14181d; --muted: #454d57; --dim: #8a929c; /* 朱红作强调色（原来是近黑，与首页对不上） */ --accent: #b3312f; --accent-light: #d9a3a0; --btn-bg: #b3312f; --btn-fg: #ffffff; /* 直角化：首页是 3px */ --radius: 4px; --radius-sm: 3px; /* 标题字族与首页一致（原来是楷体/Arial Black 两套） */ --font-kai: Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; --font-display: Georgia, "Songti SC", "Noto Serif CJK SC", serif; } /* 深色模式：保持可读性，仅把强调色统一成同一支红 */ html.dark { --accent: #e0615c; --accent-light: #8f2725; --btn-bg: #b3312f; --btn-fg: #ffffff; --font-kai: Georgia, "Songti SC", "Noto Serif CJK SC", serif; --font-display: Georgia, "Songti SC", "Noto Serif CJK SC", serif; } .cm-orig { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--muted); } /* 外资观点：标题行 + 机器摘要标记 ─────────────────────────────────── ⚠️ 摘要是模型写的一句话，不是作者原话。徽章不是装饰，是口径声明，别删。 */ .sa-title { margin: 4px 0 2px; font-size: 14.5px; line-height: 1.5; } .sa-title a { color: var(--text); border-bottom: 1px solid var(--border); } .sa-title a:hover { color: var(--accent); border-bottom-color: var(--accent); } .sa-badge { display: inline-block; margin-right: 7px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface2); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); vertical-align: 1px; } .pol-excerpt { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pol-rule { display: inline-block; margin-right: 6px; padding: 0 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 10.5px; color: var(--muted); } /* ── 动效：进场揭示（配合 assets/motion.js）──────────────────────── ⚠️ 只动透明度与 8px 位移，且**只做一次** —— 数据站是拿来读的， 来回抖动会让正在看的行跑掉。 ⚠️ prefers-reduced-motion 下必须落到终态：关掉动画不等于让内容 停在 opacity:0（这是最常见的动效事故）。 */ .will-reveal { opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); } .will-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .will-reveal, .will-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── 地产高频：按当日成交排序的城市表 ────────────────────────────── ⚠️ 2026-09-21 取代原来「城市 × 口径」的等权重卡片墙（一屏 30 多张、无排序、 重叠口径并排、零值刷屏）。表格在这里比卡片强：能排序、能对齐数字、密度高。 ⚠️ 数字列一律 tabular-nums + 右对齐 —— 不等宽的数字列是没法竖着比大小的。 */ .hf-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; } .hf-table th, .hf-table td { padding: 8px 10px; border-bottom: 1px solid var(--row-border); } .hf-table thead th { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--dim); text-align: left; border-bottom: 1px solid var(--border); } .hf-table tbody th { font-weight: 650; text-align: left; white-space: nowrap; } .hf-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .hf-table .strong { font-size: 15px; font-weight: 700; } .hf-table .strong .unit { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; } .hf-table .dim { color: var(--muted); font-size: 12.5px; } .hf-table tbody tr:hover { background: var(--row-hover); } /* 零值弱化：还在表里（缺席和零是两回事），但不抢视线 */ .hf-table tr.is-zero th, .hf-table tr.is-zero td { opacity: .48; } /* ⚠️ 陈旧/临时值标记**不靠颜色**：色觉障碍读者看不到红字。用图标+文字。 */ .hf-flag { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; } .hf-spark { display: block; width: 72px; height: 20px; } .hf-spark path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-opacity: .65; } .hf-table tr.hf-sub td { padding-top: 0; border-bottom: 1px solid var(--row-border); } .hf-table tr.hf-sub summary { cursor: pointer; font-size: 11.5px; color: var(--dim); list-style: none; } .hf-table tr.hf-sub summary::-webkit-details-marker { display: none; } .hf-table tr.hf-sub summary::before { content: "▸ "; } .hf-table tr.hf-sub details[open] summary::before { content: "▾ "; } .hf-others { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted); } @media (max-width: 720px) { /* 窄屏砍掉面积与走势两列，保住「城市 / 口径 / 套数 / 时点」 */ .hf-table th:nth-child(4), .hf-table td:nth-child(4), .hf-table th:nth-child(5), .hf-table td:nth-child(5) { display: none; } } /* 窄屏只藏滚动条。不换行、横向滚动写在上面的 .tabs / .tab，桌面同样适用 （2026-09-22：1440px 下 16 个标签仍被压成逐字折行）。 */ @media (max-width: 720px) { .tabs { -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } } /* ── 2026-09-20 复核补的两条 ──────────────────────────────────────── ① .kpi-row：11 个面板（美联储/政策/中美专题/工具箱/小道消息…）都在用 这个类装指标卡，但样式表里**一条规则都没有** —— 于是每张卡各占一整行 竖着摊下去，只有 bubble/highfreq 用的 .cards 是对的。整站看着不像一 套东西，多半就是这里。补成与 .cards 同一套栅格。 ② [hidden] 在 display:flex 的元素上不生效（CSS 的 display 胜过该属性）， 导致 BIS 的口径条在别的面板上照样显示。补一条兜底。 ─────────────────────────────────────────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; padding: 18px 0 4px; } [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════════ 2026-09-20 复核：派生栏目暂时下线（简报 / 更新流 / 资讯评论 / 外资观点） 原因：这四栏把 LLM 生成或推算出来的内容摆在「一手数据」的位置上 —— · 资讯评论有 50 条访谈实为模型对 ASR 转写稿的二次概括，却挂 YouTube 链接 · 外资观点 37% 的论点是 60 字硬截断的残句，另有 4356 条模型抽取断言 （含 17 条上游已判定与事实冲突）、112 条 live:// 伪链接、179 条中文卖方研报 · 简报/更新流依赖上面两者 采集与入库继续跑，数据不断档；**只是先不示人**。 ⚠️ 恢复方式：删掉这条规则即可（HTML 里的 data-gated 属性可一并清掉）。 ══════════════════════════════════════════════════════════════════ */ [data-gated="1"] { display: none !important; } /* ── 政策：施行日期（2026-09-22）───────────────────────────────── ⚠️ 新增 class 必须同时写样式 —— 坑 55 就是加了类没加样式， 页面上什么都没变，看着像没生效。 */ .pol-upcoming{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line); border-left:3px solid var(--s-4);border-radius:6px;background:var(--surface-2)} .pol-up-t{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted); text-transform:none;margin-bottom:6px} .pol-up-row{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:13px} .pol-up-row+.pol-up-row{border-top:1px dashed var(--line)} .pol-up-d{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--s-4);font-weight:600} .pol-up-row a{color:var(--text);text-decoration:none} .pol-up-row a:hover{text-decoration:underline} .pol-eff{display:inline-block;margin-top:5px;padding:1px 7px;border-radius:3px; font-size:11px;font-variant-numeric:tabular-nums; background:var(--surface-2);color:var(--muted);border:1px solid var(--line)} .pol-eff.is-future{background:color-mix(in srgb,var(--s-4) 12%,transparent); color:var(--s-4);border-color:color-mix(in srgb,var(--s-4) 35%,transparent)} /* ── 可排序表头（2026-09-22）───────────────────────────────────────── */ /* ⚠️ 只给**装了排序按钮**的 th 去 padding —— 无条件写 th{padding:0} 会顺手把「近期走势」那个非排序列的内边距也清掉，表头就对不齐了。 :has 不支持时退化成「按钮外多一圈 padding」，不会错位到看不了。 */ .hf-table thead th:has(.hf-sort){padding:0} .hf-sort{display:flex;align-items:center;gap:4px;width:100%; padding:8px 10px;border:0;background:none;cursor:pointer; font:inherit;font-weight:600;color:var(--muted);text-align:inherit; letter-spacing:.02em} .hf-table th.num .hf-sort{justify-content:flex-end} .hf-sort:hover{color:var(--text);background:var(--surface-2)} .hf-sort:focus-visible{outline:2px solid var(--s-1);outline-offset:-2px} .hf-sort.is-on{color:var(--text)} .hf-sort-dir{font-size:10px;line-height:1;opacity:.75} /* ── 城市叠加对比（2026-09-22）─────────────────────────────────────── */ .hf-cmp-h{width:46px;text-align:center;font-size:11px} .hf-cmp{text-align:center;vertical-align:middle} .hf-cmp-box{width:15px;height:15px;cursor:pointer;accent-color:var(--s-1)} .hf-cmp-box:disabled{cursor:not-allowed;opacity:.3} .hf-cmp-clear{border:1px solid var(--line);background:var(--surface-2); color:var(--muted);border-radius:3px;padding:1px 7px;font:inherit;font-size:11px; cursor:pointer} .hf-cmp-clear:hover{color:var(--text)} /* ── 「有新数据」提示条（2026-09-22）──────────────────────────────── */ .fresh-banner{position:fixed;left:50%;transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60; display:flex;align-items:center;gap:10px;max-width:min(92vw,560px); padding:9px 12px;border:1px solid var(--line);border-radius:8px; background:var(--surface);color:var(--text);font-size:13px; box-shadow:0 6px 24px rgba(0,0,0,.14)} .fresh-banner button{border:1px solid var(--line);background:var(--surface-2); color:var(--text);border-radius:4px;padding:3px 10px;font:inherit;font-size:12px; cursor:pointer;white-space:nowrap} #fresh-reload{border-color:var(--s-1);color:var(--s-1);font-weight:600} .fresh-banner button:hover{background:var(--line)} #fresh-dismiss{padding:3px 8px;color:var(--muted)} /* ── 标签首次加载（2026-09-22）─────────────────────────────────────── 先切面板、再等数据：等待期间藏掉「未接入」空态卡（那是写给开发者的， 加载中显示它会让读者以为这一栏没有数据），换成一行「载入中」。 */ .panel.is-loading > .empty-card { display: none; } .panel.is-loading::before { content: "载入中…"; display: block; margin: 8px 0 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 13px; } /* ── 会员区卡片（公开版，2026-09-22）──────────────────────────────── */ .mm-lock { border-left: 3px solid var(--s-1); } .mm-lock-btn { display: inline-block; padding: 7px 16px; border-radius: 5px; background: var(--s-1); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; } .mm-lock-btn:hover { filter: brightness(1.08); } .mm-member { font-size: 12px; text-decoration: none; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; white-space: nowrap; } .mm-member:hover { color: var(--text); } .mm-member.is-in { color: var(--s-3); border-color: var(--s-3); } .tab.is-paid::after { content: "会员"; margin-left: 4px; font-size: 9.5px; font-weight: 600; padding: 0 4px; border-radius: 3px; vertical-align: 1px; color: var(--s-1); border: 1px solid color-mix(in srgb, var(--s-1) 45%, transparent); }