* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } :root { --bg: #F1F5F9; --card: #FFFFFF; --border: #E2E8F0; --text: #0F172A; --sub: #475569; --dim: #94A3B8; --up: #DC2626; --down: #16A34A; --flat: #64748B; --accent: #F97316; --shadow: 0 4rpx 16rpx rgba(15,23,42,.06); --r: 16px; /* 表面/状态 token —— 同时供 [data-theme="dark"] 覆盖 */ --surface: #F1F5F9; /* 浅表面:trigger / closed-tag / 公式折叠条 */ --surface-2: #F8FAFC; /* 次浅表面:step / formula box */ --accent-surface: #FFF7ED; /* 强调表面:step-final / hero 渐变旁 */ --accent-border: #FED7AA; /* 强调描边 */ --modal-bg: #FFFFFF; /* 弹窗背景 */ --on-accent: #FFFFFF; /* 强调底色上的前景字 */ --up-surface: rgba(220,38,38,.08); /* 涨幅徽章底色 */ --down-surface: rgba(22,163,74,.08); /* 跌幅徽章底色 */ --flat-surface: rgba(100,116,139,.08); --err-bg: #FEF2F2; --err-border: #FECACA; --err-text: #B91C1C; --warn-bg: #FEF3C7; --warn-text: #92400E; --warn-accent: #F59E0B; --modal-overlay: rgba(0,0,0,.75); --footer-text: #64748B; /* footer 灰字(浅色模式: 与 --dim 等价) */ --footer-link: #475569; /* footer 链接(浅色模式: 与 --sub 等价) */ /* H5 专用 tokens(仅 @media max-width:1023px 引用,PC 不引用 → 零影响) */ --fs-base: 15px; /* 正文 14→15px,移动端可读性 */ --fs-2xl: clamp(40px, 13vw, 52px); /* hero-num 弹性字号 */ --fs-price: clamp(20px, 6vw, 26px); /* hk-price 弹性(qc-price 已改用 cqi 容器查询自适应,见 .qcard) */ --touch: 44px; /* 最小触控目标(无障碍) */ --shadow-h5: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.06); --shadow-fab: 0 6px 20px rgba(220,38,38,.35); } /* 深色主题 —— 用户切换后由 JS 设置 生效 */ [data-theme="dark"] { --bg: #0F172A; --card: #111C33; --border: #25324C; --text: #E2E8F0; --sub: #94A3B8; --dim: #64748B; --up: #F87171; --down: #34D399; --flat: #94A3B8; --accent: #FB923C; --shadow: 0 4rpx 16rpx rgba(0,0,0,.35); --surface: #1E293B; --surface-2: #16223A; --accent-surface: #2A1B12; --accent-border: #5A3825; --modal-bg: #111C33; --on-accent: #0F172A; --up-surface: rgba(248,113,113,.16); --down-surface: rgba(52,211,153,.16); --flat-surface: rgba(148,163,184,.16); --err-bg: #2A1414; --err-border: #5B2020; --err-text: #FCA5A5; --warn-bg: #2A1F0A; --warn-text: #FCD34D; --warn-accent: #D97706; --modal-overlay: rgba(0,0,0,.8); --footer-text: #94A3B8; /* 深色: 6.96:1 on #0F172A, 过 WCAG AA */ --footer-link: #CBD5E1; /* 深色: 12:1 on #0F172A */ --shadow-h5: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.35); } /* 深色下: chart 区/seo 公式 等浅表面在深色底上更醒目 */ [data-theme="dark"] .skip-link { background:#E2E8F0; color:#0F172A; } html,body { background: var(--bg); color: var(--text); font-family: -apple-system,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif; font-size: 14px; line-height:1.5; min-height: 100vh; -webkit-font-smoothing:antialiased; } .mono { font-family:"SF Mono","Menlo","DIN Alternate",monospace; font-variant-numeric:tabular-nums; } .up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--flat)} .dim{color:var(--dim)} .wrap { max-width:520px; margin:0 auto; padding:12px 14px 56px; position:relative; } /* 顶栏 */ .topbar { display:flex; align-items:center; position:relative; padding:4px 2px 12px; gap:8px; flex-wrap:wrap; } .topbar h1 { font-size:17px; font-weight:700; color:var(--text); min-width:0; } /* 更新时间跟随标题 */ .topbar .upd { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--dim); min-width:0; } .top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; } .language-trigger, .language-option, .share-btn { border:1px solid transparent; border-radius:8px; background:transparent; color:var(--sub); cursor:pointer; font-size:12px; font-weight:600; min-height:44px; padding:8px 11px; } .language-trigger { display:inline-flex; align-items:center; gap:5px; background:var(--surface); } .language-trigger .chevron { font-size:10px; transition:transform .2s ease; } .language-trigger[aria-expanded="true"] .chevron { transform:rotate(180deg); } .language-popover { position:absolute; top:48px; right:72px; z-index:100; display:none; min-width:140px; padding:6px; background:var(--modal-bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.14); } .language-popover.open { display:grid; gap:3px; animation:languageIn .16s ease-out; } .language-option { width:100%; text-align:left; } .language-option:hover, .language-option:focus-visible { background:var(--surface); outline:none; } .language-option.active { color:var(--on-accent); background:var(--accent); border-color:var(--accent); } @keyframes languageIn { from { opacity:0; transform:translateY(-4px) scale(.98); } to { opacity:1; transform:none; } } .language-trigger:focus-visible, .language-option:focus-visible, .share-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .language-trigger:active, .language-option:active, .share-btn:active { transform:scale(.96); } .share-btn { display:flex; align-items:center; gap:5px; border-color:var(--border); background:var(--modal-bg); } .share-btn svg { width:16px; height:16px; } @media (max-width:520px) { .top-actions { width:100%; margin-left:0; justify-content:flex-end; } .language-trigger { min-height:44px; } } /* en/ko 下隐藏中文专属板块(港股) */ .zh-only { } html:not([lang="zh-CN"]) .zh-only { display:none !important; } .dot { width:6px; height:6px; border-radius:50%; } .dot-live { background:var(--up); box-shadow:0 0 6px rgba(220,38,38,.4); animation:pulse 2s infinite; } .dot-stale { background:#F59E0B; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } /* 通用卡片 */ .card { background:var(--card); border-radius:var(--r); box-shadow: var(--shadow); margin-bottom:12px; overflow:hidden; position:relative; } /* 收盘小标签 */ .closed-tag { position:absolute; top:8px; right:8px; font-size:10px; padding:2px 7px; border-radius:4px; background:var(--surface); color:var(--dim); font-weight:500; display:none; z-index:2; } .closed-tag.show { display:inline-block; } /* 港股内联收盘标签(放标题后,不盖价格) */ .closed-inline { display:none; font-size:10px; padding:1px 6px; border-radius:4px; background:var(--surface); color:var(--dim); font-weight:500; vertical-align:middle; margin-left:4px; } .closed-inline.show { display:inline-block; } /* 溢价 Hero —— 大卡片,带彩色顶边 */ .hero { padding:18px 18px 16px; } .hero::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#DC2626 0%,#F97316 100%); } .hero-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; } .hero-label { font-size:13px; color:var(--sub); font-weight:500; } .hero-badge { font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600; background:var(--up-surface); color:var(--up); } .hero-badge.down { background:var(--down-surface); color:var(--down); } /* H5 专属 hero 按钮:默认隐藏(PC 不显示),H5 块内 display:flex 显示 */ .hero-actions-h5 { display:none; } .hero-num-row { display:block; } /* PC 下 hero-num-row 当普通块,数字独占一行 */ .hero-num { font-size:42px; font-weight:800; line-height:1; letter-spacing:-1px; } .hero-sub { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); } /* 折叠触发器 */ .formula-toggle { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sub); cursor:pointer; font-weight:500; user-select:none; -webkit-user-select:none; padding:8px 12px; margin:8px -12px 0; background:var(--surface); border-radius:8px; transition:background .2s; } .formula-toggle:active { background:var(--border); } .formula-toggle .arrow { transition:transform .3s ease; font-size:10px; display:inline-block; } .formula-toggle.open .arrow { transform:rotate(180deg); } /* 公式内容 —— max-height 过渡动画 */ .formula-content { max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease, margin-top .35s ease; } .formula-content.show { max-height:500px; opacity:1; margin-top:8px; } /* 分步推导 —— 每步两行 */ .steps { display:flex; flex-direction:column; gap:6px; } .step { display:flex; gap:10px; padding:10px 12px; background:var(--surface-2); border-radius:8px; border:1px solid var(--border); } .step-final { background:var(--accent-surface); border-color:var(--accent-border); } .step-num { font-size:13px; font-weight:700; color:var(--accent); flex-shrink:0; } .step-body { flex:1; } .step-title { font-size:12px; color:var(--sub); font-weight:500; margin-bottom:4px; } .step-line { font-size:11px; color:var(--dim); line-height:1.6; word-break:break-all; } .step-line .up { color:var(--up); font-weight:600; } .step-line .down { color:var(--down); font-weight:600; } .hero-sub-text { font-size:11px; color:var(--dim); margin-bottom:8px; } .hero-formula-box { padding:8px 10px; background:var(--surface-2); border:1px solid var(--accent-border); border-radius:8px; font-size:11px; color:var(--sub); line-height:1.7; word-break:break-all; white-space:normal; } /* 三市场 —— 横向2+1布局 */ .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; } .qcard { padding:14px 14px 12px; position:relative; container-type:inline-size; } .qcard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; } .qcard.up-card::before { background:var(--up); } .qcard.down-card::before { background:var(--down); } .qcard.flat-card::before { background:var(--border); } .qc-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .qc-flag { font-size:18px; } .qc-name { font-size:12px; font-weight:600; color:var(--sub); } .qc-code { font-size:10px; color:var(--dim); } .qc-price { font-size:20px; font-size:clamp(14px,12cqi,26px); font-weight:700; color:var(--text); line-height:1.1; white-space:nowrap; } .qc-chg { display:inline-block; margin-top:6px; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; } .qc-chg.up { background:var(--up-surface); } .qc-chg.down { background:var(--down-surface); } .qc-chg.flat { background:var(--flat-surface); } .quote-updated { margin-top:6px; font-size:10px; color:var(--dim); line-height:1.3; } /* 港股全宽卡 */ .hk-card { padding:14px 16px; } .hk-row { display:flex; justify-content:space-between; align-items:center; } .hk-left { display:flex; align-items:center; gap:8px; } .hk-price { font-size:22px; font-weight:700; white-space:nowrap; } .hk-detail { font-size:11px; color:var(--dim); margin-top:8px; padding-top:8px; border-top:1px solid var(--border); } /* 韩股价格:容器查询(cqi)随卡片宽度自适应字号,窄卡自动缩小以完整显示,绝不截断数字;不支持 cqi 的浏览器回落上方 20px */ /* 韩港偏离 */ .hk-deviation { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); } .dev-row { display:flex; justify-content:space-between; align-items:center; } .dev-row-left { display:flex; align-items:center; gap:6px; } .dev-label { font-size:12px; color:var(--sub); font-weight:500; } .dev-val { font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; } /* 风险提示标签(带文字+图标, 橙色底) */ .risk-icon { display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px; margin-left:6px; border-radius:11px; background:var(--warn-bg); color:var(--warn-text); font-size:11px; font-weight:600; line-height:1; cursor:pointer; flex-shrink:0; border:1px solid var(--warn-accent); transition:background .15s, transform .15s; -webkit-tap-highlight-color:transparent; } .risk-icon:active { background:var(--surface); transform:scale(.95); } .risk-icon svg { width:12px; height:12px; } .risk-point { width:14px; height:14px; flex-shrink:0; margin-left:4px; vertical-align:middle; } .dev-detail { font-size:10px; color:var(--dim); margin-top:4px; display:flex; gap:6px; align-items:center; } /* 公式框 */ .formula-box { margin-top:8px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; font-size:11px; color:var(--sub); line-height:1.7; word-break:break-all; white-space:normal; } /* 汇率 */ .fx-card { grid-column:1 / -1; padding:14px 8px; display:flex; align-items:center; justify-content:center; } .fx-item { text-align:center; } .fx-item .lbl { font-size:10px; color:var(--dim); display:block; margin-bottom:3px; } .fx-item .val { font-size:15px; font-weight:600; } /* 溢价提示 */ .premium-notice { font-size:10px; color:var(--warn-text); line-height:1.5; margin-top:6px; padding:5px 8px; background:var(--warn-bg); border-radius:6px; border-left:2px solid var(--warn-accent); } .footer { text-align:center; font-size:11px; color:var(--footer-text); padding:16px 0 0; } .footer a { color:var(--footer-link); } .footer a:hover { color:var(--accent); } .err { background:var(--err-bg); border:1px solid var(--err-border); color:var(--err-text); padding:8px 14px; margin-bottom:10px; border-radius:10px; font-size:12px; display:none; } /* 小屏微调 */ @media (max-width:360px){ .hero-num{font-size:36px} } /* 分享弹窗 */ .share-modal { position:fixed; inset:0; z-index:200; background:var(--modal-overlay); display:none; align-items:center; justify-content:center; padding:20px; } .share-modal.show { display:flex; } .share-modal-box { background:var(--modal-bg); border-radius:16px; padding:16px; max-width:360px; width:100%; text-align:center; } .share-modal-box img { width:100%; height:auto; border-radius:10px; display:block; } .share-modal-tip { font-size:13px; color:var(--sub); margin-top:12px; font-weight:500; } .share-modal-close { margin-top:12px; padding:9px 24px; background:var(--surface); color:var(--sub); border:none; border-radius:20px; font-size:14px; font-weight:600; cursor:pointer; } .share-modal-close:active { background:var(--border); } /* 二维码开关 */ .qr-toggle { display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; font-size:13px; color:var(--sub); margin:10px 0; } /* 风险提示弹窗 */ .risk-modal { position:fixed; inset:0; z-index:200; background:var(--modal-overlay); display:none; align-items:center; justify-content:center; padding:20px 20px 80px; opacity:0; transition:opacity .2s ease; } .risk-modal.show { display:flex; opacity:1; } .risk-modal-inner { position:relative; width:100%; max-width:400px; display:flex; flex-direction:column; align-items:center; } .risk-modal-box { background:transparent; border-radius:16px; width:100%; max-height:75vh; overflow-y:auto; position:relative; transform:scale(.92); transition:transform .2s ease; } .risk-modal.show .risk-modal-box { transform:scale(1); } .risk-modal-close { margin-top:16px; width:90%; max-width:300px; height:46px; border-radius:23px; background:linear-gradient(135deg,#F97316,#DC2626); color:var(--on-accent); font-size:16px; font-weight:600; border:none; cursor:pointer; box-shadow:0 4px 14px rgba(220,38,38,.35); transition:transform .15s; flex-shrink:0; } .risk-modal-close:active { transform:scale(.95); } .risk-modal-img { width:100%; border-radius:16px; display:block; } .risk-modal-caption { display:none; } /* ============ 响应式:平板 768-1023px 放宽 ============ */ @media (min-width:768px) { .wrap { max-width:680px; } .hero-num { font-size:52px; } .hk-price { font-size:26px; } } /* ============ H5 专属重设计(≤1023px) ============ */ /* max-width:1023px 与 PC 块 min-width:1024px 视口物理互斥,PC 零影响 */ /* 更新时刻仍在底部 footer 展示;导航链接在 seo-info 和 footer 亦有入口 */ @media (max-width:1023px) { /* —— 隐藏:整个顶栏(标题+更新时间+按钮) + SEO 导航(PC ≥1024px 保留) —— */ /* !important:覆盖共享层 .topbar .upd (L69) 和 .seo-nav (L382) 的 display:flex */ .topbar { display:none !important; } /* 整个顶栏:标题 + 更新时间 + 按钮 */ .seo-nav { display:none !important; } /* Premium Calc · ADR Guide · Methodology 导航 */ .hero-actions-h5 { display: flex !important; } /* H5 显示 hero 内按钮 */ /* —— 正文可读性 14→15px —— */ html, body { font-size: var(--fs-base); } /* 顶栏整体已隐藏(见上方 .topbar { display:none !important }), 以下 topbar 内元素样式无需再设,PC 端 topbar 由共享层样式控制 */ /* —— 语言/分享按钮:紧凑 + 分享按钮 H5 只显示图标(省空间) —— */ /* (顶栏按钮 H5 已隐藏,这些规则给 hero-actions-h5 内的按钮用) */ .hero-actions-h5 .language-trigger { min-height: auto; height: 28px; padding: 0 8px; font-size: 11px; } .hero-actions-h5 .share-btn { min-height: auto; height: 28px; width: 28px; padding: 0; justify-content: center; } .share-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .share-btn span { display: none; } /* H5 隐藏"分享海报"文字,只留图标 */ /* —— H5 hero-top:按钮推到最右(与「美韩溢价」标签同行) —— */ .hero-top .hero-actions-h5 { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; } .hero-top .hero-actions-h5 .language-trigger { min-height: auto; height: 28px; padding: 0 8px; font-size: 11px; } .hero-top .hero-actions-h5 .share-btn { min-height: auto; height: 28px; width: 28px; padding: 0; justify-content: center; } .hero-top .hero-actions-h5 .share-btn svg { width: 13px; height: 13px; } .hero-top .hero-actions-h5 .share-btn span { display: none; } .hero-top .hero-actions-h5 .language-popover { top: 34px; right: 0; } /* H5 主题切换按钮(纯图标,与 share 按钮等大) */ /* !important: 覆盖共享层 .theme-toggle-h5 { display:none }(L491), 与 .topbar/.hero-actions-h5 同手法 */ .hero-actions-h5 .theme-toggle-h5 { display:inline-flex !important; align-items:center; justify-content:center; min-height:auto; height:28px; width:28px; padding:0; flex-shrink:0; } .hero-actions-h5 .theme-toggle-h5 svg { width:14px; height:14px; } .hero-actions-h5 .theme-toggle-h5:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .hero-actions-h5 .theme-toggle-h5:active { transform:scale(.96); } /* —— 三市场价格 弹性字号 —— */ .hk-price { font-size: var(--fs-price); } /* —— 触控目标修复(原低于 44px) —— */ .formula-toggle { min-height: var(--touch); } .range-select { min-height: 36px; } .risk-icon { min-height: var(--touch); padding: 0 12px; } /* —— 图表高度弹性(原死值 240px) —— */ #premium-chart-host { height: clamp(200px, 56vw, 260px); min-height: 200px; } /* —— 卡片启用真实阴影(原 --shadow 用 rpx 被浏览器丢弃) —— */ .card { box-shadow: var(--shadow-h5); } /* —— fx-card 紧凑(移动端全宽) —— */ .fx-card { padding: 12px 8px; gap: 16px; } /* —— 汇率条目间距 —— */ .fx-item .val { font-size: 14px; } } .seo-nav { display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 2px 14px; font-size:12px; } .seo-nav a { position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0 2px; border-radius:6px; color:var(--sub); text-decoration:none; font-weight:600; cursor:pointer; transition:background .18s ease, color .18s ease; } .seo-nav a::after { content:''; position:absolute; right:2px; bottom:1px; left:2px; height:2px; border-radius:999px; background:transparent; transform:scaleX(.35); transition:background .18s ease, transform .18s ease; } .seo-nav a:hover { color:var(--text); background:var(--surface); } .seo-nav a[aria-current="page"] { color:var(--text); } .seo-nav a[aria-current="page"]::after { background:var(--accent); transform:scaleX(1); } .seo-nav a:focus-visible { outline:3px solid rgba(37,99,235,.28); outline-offset:2px; } .seo-info { padding:20px; margin-top:14px; } .seo-info h2 { font-size:20px; line-height:1.3; margin:0 0 10px; } .seo-info h3 { font-size:15px; margin:20px 0 6px; } .seo-info p, .seo-info li { color:var(--sub); line-height:1.7; } .seo-info ul { padding-left:20px; } .seo-info a { color:var(--accent); text-underline-offset:3px; } .about-adr-ssr { padding:20px; margin-top:14px; } .about-adr-ssr h2 { font-size:20px; line-height:1.3; margin:0 0 10px; } .about-adr-ssr h3 { font-size:15px; margin:20px 0 6px; } .about-adr-ssr p { color:var(--sub); line-height:1.7; } .seo-formula { margin:10px 0; padding:12px; border-radius:10px; background:var(--surface-2); overflow-wrap:anywhere; } .skip-link { position:absolute; left:-9999px; top:8px; z-index:300; background:#0F172A; color:#fff; padding:8px 12px; border-radius:6px; } .skip-link:focus { left:12px; } /* 主题切换 + PWA 安装控件 (与 share-btn 同样式) */ .theme-toggle, .install-btn { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--modal-bg); color:var(--sub); cursor:pointer; font-size:12px; font-weight:600; min-height:44px; padding:8px 11px; border-radius:8px; transition:transform .12s ease, background .18s ease; } .theme-toggle:focus-visible, .install-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .theme-toggle:active, .install-btn:active { transform:scale(.96); } .theme-toggle svg { width:16px; height:16px; } /* 日/月图标切换规则 —— 同时作用于 PC theme-toggle 和 H5 theme-toggle-h5 */ .theme-toggle .icon-sun, .theme-toggle-h5 .icon-sun { display:inline; } .theme-toggle .icon-moon, .theme-toggle-h5 .icon-moon { display:none; } [data-theme="dark"] .theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle-h5 .icon-sun { display:none; } [data-theme="dark"] .theme-toggle .icon-moon, [data-theme="dark"] .theme-toggle-h5 .icon-moon { display:inline; } /* H5 主题切换按钮:与 share/language 同尺寸(28×28 纯图标) */ .theme-toggle-h5 { display:none; } /* 默认隐藏安装按钮, 仅当浏览器抛出 beforeinstallprompt 时显示 */ .install-btn[hidden] { display:none !important; } /* iOS 安装提示卡片 —— 仅 iOS Safari 显示 */ .ios-install-hint { display:none; margin:0 2px 12px; padding:10px 12px; border:1px dashed var(--accent-border); background:var(--accent-surface); color:var(--sub); font-size:12px; line-height:1.5; border-radius:10px; } .ios-install-hint.show { display:block; } .ios-install-hint button { float:right; border:none; background:transparent; color:var(--dim); font-size:14px; cursor:pointer; padding:0 4px; line-height:1; } /* 韩语浏览器提示条:复用强调色 token,深色模式自动适配 */ .ko-banner { display:none; margin:0 2px 12px; padding:10px 12px; border:1px solid var(--accent-border); background:var(--accent-surface); color:var(--sub); font-size:13px; line-height:1.5; border-radius:10px; } .ko-banner.show { display:block; } .ko-banner button { float:right; border:none; background:transparent; color:var(--dim); font-size:16px; cursor:pointer; padding:0 4px; line-height:1; } .ko-banner a { color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .trend-card { padding:18px; } .trend-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; } .trend-head h2 { font-size:18px; margin:0; } .trend-head p { color:var(--dim); font-size:12px; margin-top:3px; } .range-select-wrap { display:flex; align-items:center; gap:6px; justify-content:flex-end; } .range-select-wrap label { color:var(--dim); font-size:11px; font-weight:600; } .range-select { min-height:32px; border:1px solid var(--border); background:var(--modal-bg); color:var(--text); border-radius:7px; padding:4px 24px 4px 8px; font-size:12px; font-weight:600; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 6px center; transition:border-color .18s ease, background-color .18s ease; } .range-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .range-select:hover { border-color:var(--text); } #premium-chart { margin-top:16px; border:1px solid var(--border); border-radius:10px; padding:10px; background:var(--surface-2); } #premium-chart-host { width:100%; height:240px; min-height:240px; } #premium-chart-canvas { width:100%; height:100%; display:block; } .chart-state { min-height:24px; margin:0 4px; color:var(--dim); font-size:12px; } .chart-state[data-state="error"] { color:var(--up); } .chart-state[data-state="empty"] { color:var(--sub); } .chart-retry { border:1px solid var(--border); background:var(--modal-bg); color:var(--sub); border-radius:6px; padding:4px 9px; font-size:11px; cursor:pointer; } .premium-chart-live { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .chart-summary { margin-top:8px; color:var(--sub); font-size:10px; line-height:1.4; } .data-table { width:100%; border-collapse:collapse; margin-top:12px; font-size:11px; } .data-table th, .data-table td { padding:6px 4px; border-top:1px solid var(--border); text-align:left; } .seo-questions h3 { font-size:15px; margin:20px 0 8px; } .seo-questions h4 { font-size:14px; margin:14px 0 3px; } .seo-questions p { margin:0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ============ 响应式:PC ≥1024px 双列网格(与 H5 max-width:1023px 互斥) ============ */ @media (min-width:1024px) { .wrap { max-width:1180px; } .hero-num { font-size:56px; } .dashboard-grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:16px; align-items:start; } .dashboard-main, .dashboard-side { min-width:0; } .grid2 { grid-template-columns:repeat(3,minmax(0,1fr)); } .fx-card { grid-column:auto; } .dashboard-side .trend-card { margin-bottom:16px; } /* —— 仅中文 PC: 汇率卡迁到右栏折线图下方, grid2 只剩美/韩两列; 汇率卡纵向布局拉高与港股等高 —— */ html[lang="zh-CN"] .grid2 { grid-template-columns:1fr 1fr; } html[lang="zh-CN"] .dashboard-side .fx-card { margin-top:16px; flex-direction:column; justify-content:center; align-items:stretch; padding:16px 14px; gap:14px; min-height:160px; } html[lang="zh-CN"] .dashboard-side .fx-item .val { font-size:17px; } html[lang="zh-CN"] .dashboard-side .fx-item { text-align:left; } } /* ============ 响应式:超宽屏 ≥1440px ============ */ @media (min-width:1440px) { .wrap { max-width:1180px; } .hero-num { font-size:56px; } }