/* EquationNews 网站 · 共用基础样式（字体、色板、重置）
 * 配色（2026-10-16 改版，用户要求「不用纯黑白、适当加颜色」）：
 *   - 中性色用带一点冷色相的石板灰；页面底色 --canvas 比卡片 --bg 深一档，内容放在白卡片上。
 *   - 品牌主色「灰蓝」--ac：链接、选中态、主按钮、焦点框、实时状态，全站（含 API 两页）统一这一个主色。logo 仍只用黑白。
 *     （2026-10-16 第二次换色：用户不要偏紫的 #3451E6，也不要 API 页单独配色；色值只在下面 --eq-accent* 三个变量里改）
 *   - 橙色 --hot 只做提醒小标记：频道「刚有新消息」的脉冲点、历史事件前三名（不用红 / 绿，免得和涨跌色混淆）。
 *   - 频道四组各有一个识别色 --cg-main / list / mkt / feed（主频道 = 主色、上新与公告 = 紫、行情异动 = 青、推文与宏观 = 琥珀）。
 *   - 涨跌色只表示价格方向，默认绿涨红跌，data-updown="cn" 切换为红涨绿跌。
 * 所有文字色在对应底色上 ≥ 4.5:1（小号辅助字 --fg-3 白底 4.97、卡片深底 5.94）。
 */

/* ---------- 字体（OFL）----------
 * 西文：Inter（界面）/ Source Serif 4（快讯正文，用户 10-23 定，和分享卡片英文行同一款）/ JetBrains Mono（数字）/ Space Grotesk（标题），
 *   每款按语种切成「基本拉丁」和「拉丁扩展 + 西里尔 + 符号」两片，浏览器按 unicode-range 只下载页面用得到的那片（中英文页面只拿第一片）。
 * 中文：不再下载网页字体（用户 10-26 定，原来的思源黑体子集每页 1 MB）：苹果用苹方、Windows 用微软雅黑、安卓 / Linux 用系统自带的思源黑体。 */
/* fonts:begin（backend/scripts/build_web_fonts.py 生成，别手改） */
@font-face { font-family: "EQ Grotesk"; src: url("fonts/SpaceGrotesk-VF.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "EQ Inter"; src: url("fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0,U+20-7E,U+A0-AC,U+AE-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20AC,U+2122,U+2190-2199,U+2212,U+221A,U+2248,U+2264-2265,U+25B2,U+25BC,U+FEFF; }
@font-face { font-family: "EQ Inter"; src: url("fonts/Inter-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+21A9-21AA,U+21B0-21B1,U+21B3-21B5,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+21DE-21DF,U+21E4-21E5,U+21E7,U+21EA,U+2202,U+2205-2206,U+220F,U+2211,U+221E,U+222B,U+2236,U+2260,U+2295-2298,U+2303-2305,U+2318,U+2325-2327,U+232B,U+2380,U+2387,U+238B,U+23CE-23CF,U+25A0-25A2,U+25AA,U+25B3,U+25B6-25B7,U+25BA-25BB,U+25BD,U+25C0-25C1,U+25C4-25C7,U+25CA-25CB,U+25CF,U+25E6,U+25EF,U+2600,U+2605-2606,U+263C,U+2661,U+2665,U+26A0,U+2B06,U+2B12-2B13,U+2B1C,U+2B24; }
@font-face { font-family: "EQ Serif"; src: url("fonts/SourceSerif4-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+20-7E,U+A0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2002-2007,U+2009-200B,U+2010,U+2012-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2026,U+202F-2030,U+2032-2033,U+2039-203A,U+203C,U+2044,U+2047-2049,U+20AC,U+2122,U+2190-2193,U+2196-2199,U+2212,U+2215,U+221A,U+2248,U+2264-2265,U+25B2,U+25BC; }
@font-face { font-family: "EQ Serif"; src: url("fonts/SourceSerif4-ext.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+100-12B,U+12E-130,U+134-151,U+154-165,U+168-17F,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1CD-1DC,U+1E6-1E7,U+1F8-1F9,U+218-21B,U+237,U+259,U+300-303,U+306-307,U+309-30C,U+31B,U+323-324,U+326-328,U+32E,U+331,U+400-45F,U+490-491,U+4B0-4B1,U+1E0C-1E0F,U+1E20-1E21,U+1E24-1E25,U+1E2A-1E2B,U+1E36-1E3B,U+1E3E-1E3F,U+1E42-1E49,U+1E5A-1E63,U+1E6C-1E6F,U+1E80-1E85,U+1E8E-1E8F,U+1E92-1E93,U+1E97,U+1E9E,U+1EA0-1EF9,U+2070-2071,U+2074-2079,U+207D-2089,U+208D-208E,U+20A1,U+20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF,U+2113,U+2116-2117,U+2120,U+2126,U+212E,U+2202,U+2206,U+220F,U+2211,U+2219,U+221E,U+222B,U+2260,U+25A0,U+25B3,U+25B6-25B7,U+25BD,U+25C0-25C1,U+25C6,U+25C9-25CA,U+2610-2611,U+266A; }
@font-face { font-family: "EQ Mono"; src: url("fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+D,U+20-7E,U+A0-FF,U+131,U+152-153,U+2BC,U+2C6,U+2DA,U+2DC,U+2010,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2024,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2190-2199,U+2212,U+2215,U+221A,U+2248,U+2264-2265,U+25B2,U+25BC,U+FEFF; }
@font-face { font-family: "EQ Mono"; src: url("fonts/JetBrainsMono-ext.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+2070,U+2074-207A,U+2080-2089,U+20AB,U+20AE,U+20BD,U+20BF,U+2113,U+2115-2116,U+212E,U+21E7,U+2200,U+2202-2203,U+2208-2209,U+220B-220C,U+220F-2211,U+2218-2219,U+221E,U+2223,U+2225,U+2227-2228,U+222B,U+2237,U+223C,U+2249,U+2260-2261,U+2282-2287,U+2302-2305,U+2318,U+2325,U+2374,U+23FB-23FE,U+25A0-25A1,U+25AA-25AB,U+25B3-25BB,U+25BD-25C7,U+25CA,U+25CC,U+25CE-25CF,U+25D4-25D5,U+25E7-25EB,U+25EF,U+26A0-26A1,U+2B58; }
/* fonts:end */

:root {
  /* 字体栈：拉丁字母在前，中文按系统字体逐字回落（苹方 → 冬青黑 → 微软雅黑 → 思源黑体） */
  --eq-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC";
  --eq-font-sans: "EQ Inter", var(--eq-cjk), system-ui, sans-serif;
  --eq-font-display: "EQ Grotesk", var(--eq-cjk), sans-serif;
  --eq-font-mono: "EQ Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, var(--eq-cjk), monospace;
  /* 快讯正文：西文 Source Serif 4，中文仍是黑体（逐字回落）；界面文字 / 数字 / 结构化数据不用它 */
  --eq-font-text: "EQ Serif", var(--eq-cjk), Georgia, serif;

  /* 中性色（冷灰） */
  --eq-n0: #FFFFFF;
  --eq-n25: #FAFBFD;
  --eq-n50: #F4F6FA;
  --eq-n100: #EEF1F6;
  --eq-n150: #E4E8EF;
  --eq-n200: #D3DAE4;
  --eq-n300: #B8C1CF;
  --eq-n400: #8B95A7;
  --eq-n500: #667085;   /* 白底上的最浅可读辅助文字（4.97:1） */
  --eq-n600: #4D5668;
  --eq-n700: #353C4B;
  --eq-n800: #222833;
  --eq-n850: #18202D;
  --eq-n900: #121722;
  --eq-n950: #0B0E14;

  /* 品牌主色「灰蓝」与强调色 */
  --eq-accent: #406282;     /* 浅底填充 / 文字：白底 6.39:1，白字 6.39:1，主色浅底上 5.63:1 */
  --eq-accent-d: #A2BED7;   /* 深底文字：9.29:1 */
  --eq-accent-df: #4D779D;  /* 深底上的填充（白字 4.73:1） */
  --eq-orange: #C2410C;   /* 提醒橙：白底 5.18:1，白字 5.18:1 */
  --eq-orange-d: #FF8A4C;
  --eq-violet: #7C3AED;   --eq-violet-d: #B79CFF;
  --eq-cyan: #0E7490;     --eq-cyan-d: #4CC9E0;
  --eq-amber: #A34A07;    --eq-amber-d: #F2B35B;

  /* 涨跌色：只用于价格方向。默认「绿涨红跌」（国际与币安默认） */
  --eq-green: #1A7F37;   /* 白底 5.1:1 */
  --eq-red: #CF222E;     /* 白底 5.4:1 */
  --eq-green-d: #3FB950; /* 深底 */
  --eq-red-d: #F85149;
  --eq-up: var(--eq-green);
  --eq-down: var(--eq-red);

  /* 语义变量（浅色默认） */
  --canvas: var(--eq-n50);       /* 页面底色 */
  --bg: var(--eq-n0);            /* 卡片 / 面板底色（组件默认铺在卡片上） */
  --bg-2: var(--eq-n25);
  --surface: var(--eq-n0);
  --surface-2: var(--eq-n25);    /* 悬停 */
  --surface-3: var(--eq-n100);   /* 芯片 / 输入框 / 分段控件轨道 */
  --fg: #111723;
  --fg-2: var(--eq-n600);
  --fg-3: var(--eq-n500);
  --line: var(--eq-n150);        /* 分隔线 */
  --line-2: var(--eq-n200);      /* 控件描边 */
  --line-strong: var(--eq-n700);
  --invert-bg: var(--eq-n900);   /* 提示条、跳转链接等小面积深色件 */
  --invert-fg: var(--eq-n0);
  --flash: color-mix(in srgb, var(--eq-accent) 9%, var(--bg));   /* 新消息到达时的闪烁底色 */

  --ac: var(--eq-accent);          /* 主色填充 */
  --ac-fg: #FFFFFF;              /* 主色上的文字 */
  --ac-text: var(--eq-accent);     /* 主色文字 / 链接 */
  --ac-soft: color-mix(in srgb, var(--eq-accent) 9%, var(--bg));
  --ac-line: color-mix(in srgb, var(--eq-accent) 32%, var(--bg));
  --hot: var(--eq-orange);
  --hot-text: #B43C0B;          /* 橙色浅底上的文字：比填充色深一档，保证 ≥ 4.5:1 */
  --hot-soft: color-mix(in srgb, var(--eq-orange) 10%, var(--bg));
  --cg-main: var(--eq-accent);
  --cg-list: var(--eq-violet);
  --cg-mkt: var(--eq-cyan);
  --cg-feed: var(--eq-amber);

  /* 尺寸与阴影 */
  --eq-radius: 6px;              /* 按钮、输入框、标签 */
  --eq-radius-lg: 12px;          /* 卡片 */
  --eq-radius-xl: 16px;          /* 弹层 */
  --eq-maxw: 1320px;
  --eq-ease: cubic-bezier(.2, .7, .2, 1);
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px -4px rgba(16, 24, 40, .08);
  --sh-3: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 40px -8px rgba(16, 24, 40, .18);
}

[data-theme="dark"] {
  /* 深色分层：页面 → 卡片 → 悬停 → 芯片，四级蓝灰 */
  --canvas: var(--eq-n950);
  --bg: var(--eq-n900);
  --bg-2: #141A26;
  --surface: var(--eq-n900);
  --surface-2: var(--eq-n850);
  --surface-3: #212A3A;
  --fg: #E6EAF2;
  --fg-2: #A9B2C3;
  --fg-3: var(--eq-n400);        /* 卡片底上 5.94:1 */
  --line: #252E40;
  --line-2: #334056;
  --line-strong: #C9D1DE;
  --invert-bg: #E6EAF2;
  --invert-fg: var(--eq-n900);
  --flash: color-mix(in srgb, var(--eq-accent-d) 12%, var(--bg));
  --ac: var(--eq-accent-df);
  --ac-text: var(--eq-accent-d);
  --ac-soft: color-mix(in srgb, var(--eq-accent-d) 13%, var(--bg));
  --ac-line: color-mix(in srgb, var(--eq-accent-d) 38%, var(--bg));
  --hot-text: var(--eq-orange-d);
  --hot-soft: color-mix(in srgb, var(--eq-orange-d) 13%, var(--bg));
  --cg-main: var(--eq-accent-d);
  --cg-list: var(--eq-violet-d);
  --cg-mkt: var(--eq-cyan-d);
  --cg-feed: var(--eq-amber-d);
  --eq-up: var(--eq-green-d);
  --eq-down: var(--eq-red-d);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -6px rgba(0, 0, 0, .45);
  --sh-3: 0 2px 8px rgba(0, 0, 0, .4), 0 20px 48px -8px rgba(0, 0, 0, .6);
}

[data-updown="cn"] { --eq-up: var(--eq-red); --eq-down: var(--eq-green); }
[data-theme="dark"][data-updown="cn"] { --eq-up: var(--eq-red-d); --eq-down: var(--eq-green-d); }

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--fg);
  font-family: var(--eq-font-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ---------- 小工具 ---------- */
.eq-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "zero" 0; }
.eq-mono { font-family: var(--eq-font-mono); font-variant-numeric: tabular-nums; }
.eq-up { color: var(--eq-up); }
.eq-down { color: var(--eq-down); }
.eq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-logo { display: inline-block; vertical-align: middle; color: currentColor; }
.eq-logo svg { height: 100%; width: auto; }

@keyframes eq-flash { from { background: var(--flash); } to { background: transparent; } }
.eq-new { animation: eq-flash 2.4s var(--eq-ease); }
@keyframes eq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.eq-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: eq-pulse 1.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  .eq-new, .eq-live-dot { animation: none; }
}