/* JetBrains Mono (变量字体, 自托管, @font-face 注册名 "JBMono") — 数字声部, 见 --font-num（canonical 三声部） */ @font-face{font-family:"JBMono";src:url('/fonts/jetbrains-mono.woff2') format('woff2');font-weight:100 800;font-display:swap} /* ── 主题：默认夜间（与 /intro 一致），[data-theme="light"] 切换到白天 ── 琉璃 Liuli · Design System 2.0：变量名全沿用 1.x，值换介质（/design-system 为 single source of truth）。 新增材质 token：--glass*/--edge/--bevel/--well*/--num-g*/--font-display/--ease-pour/--nav-clearance。 */ @font-face{font-family:"Space Grotesk";src:url('/fonts/space-grotesk.woff2') format('woff2');font-weight:300 700;font-display:swap} :root { /* 三声部字体 token（canonical · 全站一致 · 见 TYPOGRAPHY.md / design-system「04 字体」）： display=英文标题/品牌(Space Grotesk·克制) · text=正文/控件/卡片小标题 · num=一切数字(JBMono·tabular)。 中文一律落 PingFang/系统中文字体；Latin webfont 只对英文+数字生效。改值要同步全站 :root。 */ --font-display: "Space Grotesk", "SF Pro Display", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-num: "JBMono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --bg: #06070D; /* 液态度调和（2026-06-11 用户两轮拍板）：v50 全按 .lg-s 曲线(0.935)太实、磨砂透感全无 → 卡面 tint 取旧 0.62 与 0.935 中点 ≈0.76（≈ design-system 滑杆 v70），高光/bevel 保留 QA-5 提亮值。 透明度给「磨砂感」，亮高光给「玻璃光泽」——两者并存才是要的效果 */ --card: rgba(17,20,31,0.68); --card2: rgba(29,34,51,0.72); --card2-solid: #1D2233; /* --card2 的不透明版。⚠️ 当前全仓无引用，且**别再拿它做列表行 hover**（旧注释这么写的）—— 它 B/R=1.76 偏蓝，正是 congyang 2026-08-07 打回的那版；列表 hover 用 --list-row-hover。 */ --card3: rgba(42,48,69,0.76); --inset: rgba(255, 255, 255, 0.035); --glass: rgba(16,19,30,0.69); --glass-grad: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.018) 34%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.045) 100%); --edge: rgba(255,255,255,0.10); --bevel: inset 0 1px 0 rgba(255,255,255,0.11); --card-solid: #11141F; /* 列表横滚冻结列填充色 = 真机(iOS)实测卡面渲染色 #12141D（congyang 截图像素采样）。 不用 --card-solid(#11141F)：二者亮度近同，但 --card-solid 偏蓝(B31 vs 29)，深色 UI 里那点冷蓝 被读成「深色一些」+ 透明↔填充切换时露出色差("变换")。直接取卡面确切色 → 滚动前后同色、无缝无变换。 */ --list-froz-bg: #14161D; /* 列表行 hover 底 = 上面那个色**等比例提亮**（20,22,29 → 28,31,41，B/R 都是 1.45）。 ⚠️ 不用 --card2（29,34,51 → B/R 1.76）：它比列表底蓝得多，hover 上去整行会「变个色」而不是 「亮一档」—— congyang 2026-08-07 就是这么报的（「金边可以留着，但可否不变蓝」）。同一条教训 上面 --list-froz-bg 拒 --card-solid、下面抽屉拒 --card2 已经各踩过一次，这是第三次。 取值口径：亮度对齐旧 hover（真实像素 26,31,45 → 28,31,41，luma 30.9→31.1 基本不变）， 只把色温掰回列表自己的 1.45 —— 用户要的是「别变蓝」，不是「别变亮」。 用不透明值：行体 + 两个冻结列(.prl-id/.prl-acts)各自都要刷底，同一个实色三处必然一致 （改成半透明前请先截图采样三处像素，别只看 computed style —— 那看不出真实叠加）。 */ --list-row-hover: #1C1F29; /* 实金渐变 + 金按钮深字（canonical · 全站金 CTA 引用 · 白天在 light 块改"抛光金"质感）。 夜间值 = 历史 §4 设计系统原值，零改动。 */ --gold-grad: linear-gradient(160deg, #F4D292 -12%, #E6B86A 40%, #C08F3D 118%); --gold-ink: #211402; --fill: rgba(255,255,255,0.045); --fill-2: rgba(255,255,255,0.085); --well: rgba(3,5,12,0.34); --well-sh: inset 0 1.5px 4px rgba(0,0,0,0.28); --scrim: rgba(3,5,11,0.52); --text: rgba(245,247,253,0.96); --sub: rgba(226,231,244,0.64); --dim: rgba(226,231,244,0.40); --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.15); /* `--border` 是 4 处历史引用留下的别名（`.rent-ms-badge.lock` / `.mb-session-weekend` 等）。 它从来没在 app.css 定义过 → 那 4 处一直退回 currentColor / transparent 在画错的东西。 别删：删了那 4 处又变回未定义。要清理的话是把引用改成 --line，然后连这条一起去掉。 */ --border: var(--line); --accent: #E8BC72; --accent-2: #C59440; --accent-light: #F6D9A2; --num-g1: #F8DCA2; --num-g2: #E0AE5C; /* 铜钱 icon mask（🪙 emoji → SVG 统一 · cost-pill ::after 用） */ --coin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19ZM9.8 8.8h4.4a1 1 0 0 1 1 1v4.4a1 1 0 0 1-1 1H9.8a1 1 0 0 1-1-1V9.8a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E"); --accent-tint: rgba(232,188,114,0.11); --accent-tint-strong: rgba(232,188,114,0.19); --accent-soft: rgba(232,188,114,0.45); --green: #3FDD9C; --red: #FF7E78; --red-rgb: 255,126,120; --red-cta: #DC2626; /* 🔄 Roll 平仓标注专属中性蓝（不与红/绿盈亏抢色） */ --roll: #6FA8FF; --roll-tint: rgba(111,168,255,0.14); --roll-soft: rgba(111,168,255,0.40); --accent-rgb: 232,188,114; /* 🏘 收租社区「空间色」靛紫（congyang 2026-08-14 在 /cpolish-pick 上拍：靛紫 · 导航层＋内容强调）。 为什么要有第二个强调色：两个空间共用一条顶栏，切换器是唯一的「我在哪」信号， 颜色是最省力的第二重提示 —— 但它只说「你在收租社区」，**不说别的**。 为什么是紫：app 里能用的颜色几乎被占满了 —— 绿＝赚 / 红＝亏 / 蓝 `--roll`＝Roll 平仓 / 橙黄 `--orange` `--yellow`＝板块图表色。紫这一档只在氛围光 `--au-2` 里出现过、没承担任何语义。 ⚠️ 它**不是第二个品牌色**。归它管的是**社区里所有「界面和动作」**（congyang 2026-08-14 拍 L2）： chrome + 主操作（说一句 FAB / 用这个思路找 / 发布 / 发送）+ 状态 + 通知 + 发帖器。 **留金的三类**：交易卡与正文里的合约代码·星级·来源标注（数据语义，且交易卡持仓页也在用、 两个空间必须长一样）· 帖子作者头像底（标的是「人」不是「重要」）· **头像那圈金边＋皇冠 （Gold 会员身份 —— 身份信号必须跨空间恒定，否则它就不再是信号）**。 反过来：**app 那半边一个 `--comm-*` 都不该出现**，侧栏那张社区入口卡长在 app 空间里、也保持金。 `--comm-ink` 亮暗共用深墨：白天档的渐变中段 #8B7BF0 上，深墨 5.5:1、白字只有 3.4:1。 */ --comm: #8B7BF0; --comm-light: #B9AEFB; --comm-rgb: 139,123,240; --comm-tint: rgba(139,123,240,0.12); --comm-tint-strong: rgba(139,123,240,0.20); --comm-soft: rgba(139,123,240,0.50); --comm-grad: linear-gradient(160deg, #C3B9FF -12%, #9E8DF6 40%, #6C56D9 118%); --comm-ink: #120E2E; /* 资金出租率温标（冷→暖→热 · /vacancy-color-pick G 方案）：闲置冷蓝 / 接近满载琥珀 / 满载红 */ --amber: #EBA13C; --amber-rgb: 235,161,60; /* = --amber，给需要 rgba(…, α) 平 tint 的 warn 卡用 */ --slate: #8EA6C8; --amber-grad: linear-gradient(160deg, #F2B860, #D6862A); --red-grad: linear-gradient(160deg, #FF9B96, #E5564F); --slate-grad: linear-gradient(160deg, #9DB2D0, #6E86AE); --orange: #E8BC72; --yellow: #E8BC72; --purple: #E8BC72; --teal: #3FDD9C; --payoff-today: #6BB6FF; --shadow: 0 2px 8px -2px rgba(1,3,9,0.45); --shadow-lg: 0 24px 60px -14px rgba(1,3,9,0.70), 0 4px 14px -4px rgba(1,3,9,0.45); /* ═══ 琉璃 2.0 · Animation tokens（v1.3 命名沿用 · spring 加过冲仅限 transform · 新增 pour）═══ */ --dur-instant: 70ms; --dur-quick: 140ms; --dur-normal: 240ms; --dur-modal: 360ms; --dur-slow: 600ms; --ease-spring: cubic-bezier(0.34, 1.45, 0.4, 1); --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1); --ease-in: cubic-bezier(0.45, 0.05, 0.7, 0.4); --ease-pour: cubic-bezier(0.32, 1.18, 0.35, 1); --header-bg: var(--bg); --chart-grid: rgba(255,255,255,0.06); /* PWA 悬浮 dock 净空（dock 高 ≈58 + 悬浮 12 + 呼吸 16）—— 全部底部留高统一引这个变量 */ --nav-clearance: calc(86px + env(safe-area-inset-bottom, 0px)); /* 底景琉璃光色斑 */ --au-1: rgba(232,188,114,0.16); --au-2: rgba(124,108,255,0.12); --au-3: rgba(64,205,190,0.08); /* IV-rank color ramp · 低→高，stripe + tile 共用 */ --iv-0: #4A2B2E; --iv-20: #6E3530; --iv-40: #826638; --iv-60: #C49846; --iv-80: #E6B86A; --iv-100: #F7D384; } :root[data-theme="light"] { /* ── 白天 · 净灰 + 抛光金（方向 A · 2026-06-20 用户拍板，Claude app 取向）： 底＝干净淡灰（不发黄）；金色＝"抛光金属"（亮高光顶→饱和中→干净底）。全 light-scoped，夜间零改动。 ⭐ 2026-08-15 可读性大修（congyang：「很多地方可读性差，有脏感，不现代，很多处用了灰色字体 对比度就差些」）。改之前先量，量出来的三件事： ① **灰阶塌陷** —— `--dim` 在卡上只有 **2.42:1**（用了 644 处）、`--sub` **4.31:1**（1353 处）， 两个都够不着 WCAG AA 4.5。这就是"灰色字体对比度差"的确切来源。 现在重建成 text 13.5 / sub 7.0 / dim 4.6（**白卡上**量；在 --bg 上仍全部 ≥4.5）。 三档拉开是刻意的：一起压黑就没有层级了，要的是"都读得清且仍分得出主次"。 ② **墨色发褐** —— 旧 ink rgba(35,33,27) 的 R 比 B 高 8，整屏文字带褐味，叠在暖底上就是"脏"。 改中性冷墨 (24,28,36)。**暖味只留给金**（品牌锚），底和字都走中性 —— 这样金才读成 "有意为之的品牌色"，而不是"整个界面泛黄"。 ③ **金色语义翻了** —— 见下面 --accent-light 那条。 ⚠️ 改这一段的人注意：三档灰的 α 是**解出来的**不是拍的（目标比值见上）， 想调请连着比值一起调，别只动数字。 */ --bg: #F1F2F4; /* 白天卡面：纯白 + 真 hairline + 紧接触影 三件套一起给分层。 ⚠️ 光靠"卡更白"是不够的 —— 卡压在底上只有 3.5 ΔL*（比 Stripe/GitHub 还宽）， 分层感其实一直是 --edge 那条描边在扛，所以这轮是把描边**加实**（见 --edge）。 */ --card: rgba(255,255,255,0.96); --card2: rgba(248,249,251,0.97); --card2-solid: #F4F5F8; /* --card2 的不透明版（白天）。⚠️ 同夜间：当前无引用，列表行 hover 走 --list-row-hover。 */ --card3: rgba(242,244,247,0.98); --inset: rgba(24, 28, 36, 0.045); --glass: rgba(255,255,255,0.94); --glass-grad: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.18) 40%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.32) 100%); /* ⚠️ 白天 --edge 用「暗 hairline」而非夜间那种白边：22 处 `border:1px solid var(--edge)` 在白底上若用白边＝完全隐形（用户报「按钮没有边、和底色融合」）。白光泽改由 --bevel 顶高光给。 2026-08-15：0.14 → 0.17 并转中性。**分层感是这条描边在扛，不是卡的底色** （卡压在底上只有 3.5 ΔL*，比 Stripe 2.2 / GitHub 2.5 还宽，所以问题从来不在"卡不够白"）。 嵌套三层卡（持仓明细 → 券商组 → 单个持仓）同色同边时会读成一堆同心矩形， 描边加实 + 下面 --line 拉开档次，才分得出里外。 */ --edge: rgba(24,28,36,0.17); --bevel: inset 0 1px 0 rgba(255,255,255,0.9); --card-solid: #FFFFFF; --list-froz-bg: var(--card-solid); /* 白天卡面≈纯白，冻结列填充用 --card-solid（#FFF）即可（白天模式无人反馈色差） */ --list-row-hover: #F4F6F9; /* 列表行 hover：比卡面暗一档的中性灰（跟着上面墨色一起转中性，不再发黄） */ /* 抛光金：亮顶高光 → 饱和金中段 → 干净深金底（无灰棕收尾），白天读起来是金属不是哑色 */ --gold-grad: linear-gradient(180deg, #F8DA98 0%, #E9B85E 46%, #C9923A 100%); --gold-ink: #2A1B02; --fill: rgba(24,28,36,0.05); --fill-2: rgba(24,28,36,0.085); --well: rgba(24,28,36,0.055); --well-sh: inset 0 1.5px 4px rgba(24,28,36,0.10); --scrim: rgba(20,24,32,0.38); /* 三档灰阶（α 是按目标比值解出来的，见本块顶部说明）： --text 13.5:1 · --sub 7.0:1 · --dim 4.6:1（均在白卡上量；在 --bg 上分别 12.2 / 6.6 / 4.5+） */ --text: rgba(24,28,36,0.918); --sub: rgba(24,28,36,0.730); --dim: rgba(24,28,36,0.635); --line: rgba(24,28,36,0.12); --line-2: rgba(24,28,36,0.20); /* ⭐ 三档金：白天必须**反着来** —— 这是 DESIGN §2.2 那条 --edge 教训的第二次现形。 夜间 --accent-light 是「更亮的金」＝在深底上更强调；白天照抄"更亮"就成了 #C28E2A， 当文字用在金 tint 上只有 **2.23:1**，探针在 **12 个界面**重复报同一条。 白天「更强调」＝**更暗**。所以白天三档按"越强调越暗"排： --accent（默认金） 4.8:1 · --accent-light（强调金，82 处当文字用）6.1:1 · --accent-2（最深）7.9:1 同时把 tint-strong 从 0.20 提亮到 0.15 —— 金字压金底两头都让一步，比只压黑字更保金的成色。 */ --accent: #9A690F; --accent-light: #855A0C; --accent-2: #6E4A08; --num-g1: #9A690F; --num-g2: #6E4A08; --accent-tint: rgba(154,105,15,0.10); --accent-tint-strong: rgba(154,105,15,0.15); --accent-soft: rgba(154,105,15,0.42); /* 盈亏色：白天压深。这两个是**钱**的颜色（+$647 / -$52），旧值在自家 tint 上只有 2.84 / 3.89:1 —— 最该看清的数字反而最模糊。压到在各自 tint 上 ≥4.5:1。 ⚠️ 只动"当文字/描边用"的这两个，--red-grad / --green 系的填充渐变不动（那是面不是字）。 */ --green: #0B7F55; --red: #D2262B; --red-rgb: 210,38,43; --red-cta: #B02328; /* 🔄 Roll 平仓标注专属中性蓝（白天更深，保对比） */ --roll: #2563EB; --roll-tint: rgba(37,99,235,0.10); --roll-soft: rgba(37,99,235,0.38); --accent-rgb: 154,105,15; /* 🏘 社区空间色 · 白天档：文字色要压得住淡底（`--comm-light` 当文字用，不是当高光用）—— #4B3BB4 压在 `--comm-tint-strong` 上 5.6:1；夜间那个 #B9AEFB 搬到白天只有 1.9:1。 */ --comm: #6C56D9; --comm-light: #4B3BB4; --comm-rgb: 108,86,217; --comm-tint: rgba(108,86,217,0.10); --comm-tint-strong: rgba(108,86,217,0.15); --comm-soft: rgba(108,86,217,0.42); --comm-grad: linear-gradient(160deg, #A99BF7 -12%, #8B7BF0 40%, #5B4BC4 118%); /* 资金出租率温标（白天 · 文字色加深保对比；渐变填充沿用饱和值，落在 well 上仍清晰） */ --amber: #B5781A; --amber-rgb: 181,120,26; /* = --amber，给需要 rgba(…, α) 平 tint 的 warn 卡用 */ --slate: #5C7398; --amber-grad: linear-gradient(180deg, #F0B864, #C98A2A); --red-grad: linear-gradient(180deg, #F08A86, #D43F44); --slate-grad: linear-gradient(180deg, #8AA0C2, #5C7398); --orange: #9A690F; --yellow: #9A690F; --purple: #9A690F; --teal: #0B7F55; --payoff-today: #2563EB; /* 分层投影（Claude 取向）：1px 接触影定边 + 大柔影抬卡 → 白瓷砖在淡灰/白底上都立得起来。 2026-08-15 转中性（原 rgba(45,40,25) 是褐影，压在白卡下也在给整屏加黄）。 */ --shadow: 0 1px 2px rgba(20,24,32,0.06), 0 8px 22px -8px rgba(20,24,32,0.16); --shadow-lg: 0 1px 3px rgba(20,24,32,0.09), 0 24px 56px -14px rgba(20,24,32,0.24), 0 0 0 0.5px rgba(20,24,32,0.05); --header-bg: var(--bg); --chart-grid: rgba(24,28,36,0.10); /* ⭐ 氛围底景 —— 白天"脏感"的第一来源，2026-08-15 重做。 旧值是 **去饱和的中间调**（tan 232,196,120 / taupe 208,184,150 / sage 180,202,184） 在 0.09-0.20 的浓度下 90px 模糊铺在近白底上。这套配方在深色底上是"光"， 在近白底上就是**污渍** —— 因为白底只能被"变暗"，而去饱和的中间调压上去只降明度、不给色相， 眼睛读到的就是一块脏。 口径改成：**高饱和色相 + 极低 α**（脏＝低饱和高浓度，光＝高饱和低浓度）。 同时 au-2/au-3 换回夜间那两个真正的色相（紫 / 青），不再用棕灰假装"克制"。 */ --au-1: rgba(232,188,114,0.10); --au-2: rgba(124,108,255,0.05); --au-3: rgba(64,205,190,0.04); /* ⭐ IV 色阶 · 白天档（此前**整条没翻译**，直接继承夜间的暗红→橄榄，板块热力图在白底上 是一片暗紫红/土黄的泥块 —— congyang 说的"脏感"里最刺眼的一处，截图可证）。 白天口径：同一条冷→暖→烫的语义，但换成**浅底色片**（低饱和高明度）， 让上面的深色文字读得清；不是把夜间那条按明度翻一下（那样只会得到脏棕）。 */ --iv-0: #E3E8F0; --iv-20: #EFE4DC; --iv-40: #F6E3C4; --iv-60: #F5D398; --iv-80: #EFBB6B; --iv-100: #E5A03F; /* `var(--border)` 在 app.css 被引用 4 处却**从未在此定义**（admin.html 等独立页各自定义过， 于是 check_css_vars 的跨文件扫描判它"有定义"= 假绿）。未定义的 var() 不带兜底 ⇒ 该属性退回初始值：border-color → currentColor（白天＝近黑，画出黑虚线框）、 background → transparent（.mb-session-weekend 直接没底）。补上定义，两个主题各给一份。 */ --border: var(--line); } * { box-sizing: border-box; margin: 0; padding: 0; } /* 触屏点击任意元素时不闪原生蓝色方块高亮（无论按钮是什么形状）。 全局透明，交互反馈交给各自的 :active / hover 态。 */ /* overflow-x:clip 防移动端横向右滑（与 intro.html / 其余落地页同一修法）。 .wrap 上的 clip 只盖得住 .wrap 内的内容；而 #nav-tabs(被挪到 直接子节点)、 全屏 tab-page modal(width:100vw !important)、toast 等都在 .wrap 之外 → 仍可能在 真机上撑出横向滚动让首页可右滑。把 clip 提到根 html 层一并兜住。 用 clip 而非 hidden：不创建滚动容器，position:sticky/fixed 不受影响（已 Playwright 验 scrollX 锁 0 且 nav-tabs/modal 正常）。 */ html { -webkit-tap-highlight-color: transparent; overflow-x: clip; } body { font-family: var(--font-text); background: var(--bg); color: var(--text); padding: 28px max(20px, 3vw); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; font-feature-settings: "ss01", "cv01", "cv11"; text-rendering: optimizeLegibility; } /* PWA standalone: iOS 状态栏 black-translucent 会覆盖内容，撑开顶部 */ @media (display-mode: standalone) { body { padding-top: calc(28px + env(safe-area-inset-top, 0px)); } } /* 移动端 (含 PWA): 持仓页 body 左右留白对齐各 tab-page 全屏内边距 (14px)。 推荐/简报/复盘/指南是 is-tab-page (position:fixed; left:0; right:0 + 14~16px 内边距), 而持仓页吃 body 的 max(20px,3vw) → 比其它 tab 多留白浪费横向空间。统一到 14px。 断点用 720px 跟全 app 移动布局一致 (600px 太窄, 不少手机 CSS 宽 601~720 漏掉)。 */ @media (max-width: 720px) { body { padding-left: 14px; padding-right: 14px; } } /* 全局禁用 iOS 双击 zoom 延迟 (维持 user-scalable=no 的同时让按钮响应更快) */ button, a, [role="button"], input, select, textarea { touch-action: manipulation; } /* 全局 button 基础过渡（B 方案弹出动效） */ button { transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s, border-color 0.15s; } /* 全局 focus ring — 仅键盘 focus 显示（鼠标点击不打扰） */ *:focus { outline: none; } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint-strong); border-color: var(--accent) !important; } /* 关键: 当 input 在 wrapper 内 (wrapper 自己有 :focus-within border), input 自己关掉 focus-visible 的 glow + border-color, 防"双圈"视觉. */ .rec-form .rec-goal-num input:focus, .rec-form .rec-goal-num input:focus-visible, .rec-form .ti-chips input:focus, .rec-form .ti-chips input:focus-visible, .account-modal .am-input-wrap input:focus, .account-modal .am-input-wrap input:focus-visible, .account-modal .sr-box input:focus, .account-modal .sr-box input:focus-visible, #coach-modal .coach-fld input:focus, #coach-modal .coach-fld input:focus-visible { box-shadow: none !important; border-color: transparent !important; } /* 已有 accent 背景的按钮 focus ring 反向（描边） */ .pos-toolbar button.add-btn:focus-visible, .rec-btn-large:focus-visible, .rec-form button.submit:focus-visible, .add-form .actions .submit:focus-visible, .compare-pill:focus-visible, .edit-form .ef-save:focus-visible, .migrate-modal .btn-import:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); } /* overflow-x:clip — 拦住绝对定位的 tooltip(如钱带 ⓘ hint 浮层, opacity:0 仍占布局、min-width:200px 在右列单元会探出视口) 造成的手机横向滚动。 用 clip 不用 hidden：不创建滚动容器，sticky/fixed 不受影响；tooltip 朝上弹故纵向不裁。 */ .wrap { max-width: 1620px; margin: 0 auto; overflow-x: clip; } /* 1480→1500（congyang 2026-07-23「桌面整体宽一点点」）→ 1620（2026-08-09 列表加了 104px 的账户列，不加宽的话本来刚好放得下的表会开始横滚）：大屏给主列更多宽度，持仓表更易全放不横滚 */ .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 1024px) { /* 侧栏收窄一档（400→372）→ 主列（持仓表所在）多拿 ~28px（congyang 2026-07-23 减少持仓表横滚） */ .layout { grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 372px); } } .main { min-width: 0; } /* 侧栏整体跟着页面流式滚动。 ⚠️ **`.side-pin` 不再 sticky**（congyang 2026-08-10：「这些按钮恢复为固定位置」）—— 这块曾经 sticky 钉在视口顶部跟着滚（他更早那次要求的），但那意味着它一路挡着侧栏 下面的内容（板块热力 / 社区卡 / 小白指南）：用户往下滚想看别的，它始终占着一屏顶部。 现在改回随页面自然滚走，整个侧栏一视同仁。改回 sticky 的话把 position 换回 sticky 即可， 但先想清楚上面这条 —— 侧栏下面的东西会不会又被它盖住。 */ .side-pin { position: static; } /* ─── 全局滚动条（D · 暖金浮窗）─ 应用到所有滚动容器：body / modal / .side / bottom-sheet 等 ─ */ * { scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-corner { background: transparent; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); border-radius: 999px; border: 3px solid var(--bg); background-clip: padding-box; box-shadow: 0 0 6px var(--accent-tint); transition: filter 0.18s; } *::-webkit-scrollbar-thumb:hover { filter: brightness(1.15); } .header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; position: relative; padding: 8px 0 4px; } /* 品牌左对齐：门标 + 名 + 暗色行内标语（B 左对齐单行） */ .header h1 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 11px; min-width: 0; } .header .brand-tag { color: var(--sub); font-size: 13px; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; min-width: 0; } .header .brand-tag .sep { color: var(--line-2); margin-right: 3px; } /* 右侧工具栏 cluster: 身份徽章 + admin + coin + lang + theme 一组 */ .header .header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .header h1 .brand-link { color: inherit; text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 10px; } .header h1 .brand-link:hover { color: var(--accent); } /* 品牌 mark — '包' 字字模, scales with font-size via 1em */ .bzg-mark { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; color: var(--accent); display: inline-block; filter: drop-shadow(0 0 10px rgba(230,184,106,0.18)); transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .header h1 .brand-link:hover .bzg-mark { filter: drop-shadow(0 0 14px rgba(230,184,106,0.45)); } .bzg-mark.size-lg { width: 1.1em; height: 1.1em; } /* Inline (in flowing text) — slightly smaller + no extra alignment */ .bzg-mark-inline { width: 0.95em; height: 0.95em; vertical-align: -0.08em; color: var(--accent); flex-shrink: 0; display: inline-block; margin-right: 4px; } /* 旧 .header .sub / .role-chip 样式已随 B 左对齐单行重构移除（行内标语样式见上方 .brand-tag） */ .theme-toggle { background: var(--card); border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text); transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle:hover { border-color: var(--accent); background: var(--card2); color: var(--accent); } .theme-toggle .t-icon { line-height: 1; } .theme-toggle svg.ico { width: 16px; height: 16px; stroke-width: 2.1; } /* 语言选择器（紧贴 theme-toggle 左侧）· 分段药丸 + 选中段金渐变浮起（参考款） */ .lang-selector { display: inline-flex; align-items: center; gap: 2px; background: var(--well); border: 1px solid var(--line); border-radius: 999px; height: 34px; padding: 3px; box-shadow: var(--well-sh); } .lang-selector button { background: transparent; border: none; padding: 0 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--sub); font-family: inherit; transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); min-width: 32px; height: 28px; border-radius: 999px; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; } .lang-selector button:hover { color: var(--text); } .lang-selector button.active { background: var(--gold-grad); color: var(--gold-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); } @media (max-width: 720px) { /* 移动端三语：保持接近桌面的横向呼吸感（实际生效值见 §header-right ≤720 聚合段， 两处需一致 —— 同特异性下源序在后者胜，写散了会出现「以为改了没生效」） */ .lang-selector button { padding: 0 9px; min-width: 30px; } } /* 用户身份徽章 — 镜像 theme toggle 但在左侧 */ .user-badge { grid-column: 1; grid-row: 1; background: var(--card); border: 1px solid var(--line); border-radius: 17px; height: 34px; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); font-weight: 500; transition: border-color 0.15s; max-width: 200px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-badge:hover { border-color: var(--accent); } .user-badge .icon { flex-shrink: 0; } .user-badge .name { overflow: hidden; text-overflow: ellipsis; max-width: 130px; } /* 未登录「登录 / 注册」响应式文案（/login-pick A）：桌面显全文，窄屏在 ≤720px 断点切短版防溢出 */ .user-badge .name-short { display: none; } .user-badge .user-avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } /* 默认头像（无 avatar_url）：22px 圆盘 + 名字首字母 · 与真实头像同尺寸（旧版是 14px 细线小人） */ .user-badge .av-default { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(150deg, #3b4051, #1d202b); box-shadow: inset 0 0 0 1px rgba(232,188,114,0.26), inset 0 1px 1px rgba(255,255,255,0.07); } .user-badge .av-default.av-ini { font-weight: 700; font-size: 11.5px; line-height: 1; color: #F3D79B; } /* Gold 会员：金渐变盘 + 深色首字母，更 VIP */ .user-badge.gold-tier .av-default { background: linear-gradient(150deg, #FFE7A8, #F5C451 55%, #C9962E); box-shadow: inset 0 -1px 2px rgba(120,80,10,0.35), inset 0 1px 1px rgba(255,255,255,0.55); } .user-badge.gold-tier .av-default.av-ini { color: #3a2c08; } /* 未登录 CTA（/login-pick A 方案 · congyang 2026-07-30 拍板）：实金渐变主操作， 和"主操作永远实金渐变"的按钮四阶规矩一致——这是未登录首屏唯一该被注意到的操作。 */ .user-badge.signed-out { border: none; background: var(--gold-grad); color: var(--gold-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); } .user-badge.signed-out:hover { filter: brightness(1.05); } /* ── Gold tier 尊贵标志（B 角标宝石 + D 流光金边）· 仅 gold 账户 ── */ .user-badge.gold-tier { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, repeating-linear-gradient(110deg, #C9962E 0px, #F5C451 42.29px, #FFE7A8 84.57px, #F5C451 126.86px, #C9962E 169.14px) border-box; background-repeat: no-repeat, repeat; background-size: auto, 180px 100%; animation: ubGoldSweep 3.2s linear infinite; } .user-badge.gold-tier:hover { border-color: transparent; } /* 像素级平铺(与药丸宽度无关) + 对角 110°(保留原斜向右流) + 首尾同色 → 循环无卡顿。 旧版用 -220% 百分比位移，实际距离随药丸宽(名字长短)变化 → 大多数宽度回到起点会跳一下(卡) */ @keyframes ubGoldSweep { to { background-position: 0 0, 180px 0; } } .user-badge.gold-tier .name { background: linear-gradient(90deg, #FFE7A8, #F5C451); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .user-badge.gold-tier .ut-avwrap { position: relative; width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .user-badge.gold-tier .ut-avwrap .icon { font-size: 16px; } /* Gold 徽章：头像左侧金皇冠前缀（congyang 2026-07-06 选 E · 替代原右下角标对勾）· 金边流光 + 皇冠双重会员信号；margin-right 负值收紧与头像间距（badge gap 6px → 有效 ~4px） */ .user-badge.gold-tier .ut-crown { width: 15px; height: 15px; color: #E6B86A; flex-shrink: 0; margin-right: -2px; } @media (prefers-reduced-motion: reduce) { .user-badge.gold-tier { animation: none; background-position: 0 0, 0 0; } } /* 金币徽章 — 右侧 cluster 内，pill 风格 */ /* 统一铜钱 icon（🪙 emoji → SVG · 全 app 视觉位） */ .ci-coin { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex: 0 0 auto; } .app-toast .ti .ci-coin { width: 15px; height: 15px; color: var(--accent); vertical-align: 0; } .welcome-coin svg { width: 56px; height: 56px; color: var(--accent); display: block; margin: 0 auto; } .coin-badge { background: var(--card); border: 1px solid var(--line); border-radius: 17px; height: 34px; padding: 0 14px 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); font-weight: 600; transition: border-color 0.15s, transform 0.2s; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; white-space: nowrap; } .coin-badge:hover { border-color: var(--accent); } .coin-badge .coin-icon { width: 14px; height: 14px; flex: 0 0 14px; } .coin-badge .coin-num { line-height: 1; } /* Gold ∞ 用 SVG 图标代替文字字形 —— 文字 ∞ 的垂直位置随字体在各平台漂移无法稳定居中； SVG 几何居中、跨平台一致。em 尺寸同时适配 header 徽章(12.5px)与提交按钮成本 pill(11px)。 */ .coin-inf { width: 1.25em; height: 1.25em; display: block; flex: 0 0 auto; } .coin-badge.deducting { animation: coin-pulse 0.5s ease; } @keyframes coin-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.18); color: var(--bad, #F87171); } 100% { transform: scale(1); } } /* 管理后台徽章 — 仅 admin 邮箱用户可见（body.is-admin） */ .admin-badge { width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: none; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--accent); transition: border-color 0.15s, background 0.15s; flex-shrink: 0; } .admin-badge:hover { border-color: var(--accent); background: rgba(230,184,106,0.08); } .admin-badge svg { width: 16px; height: 16px; display: block; } body.is-admin .admin-badge { display: inline-flex; } /* ⚗️ M2（preview 实验 · congyang 2026-08-13）：dock 第 5 格换成「社区」之后， 「问管家」在手机上的入口挪到 header 这颗。形状照 .admin-badge，不发明新尺寸。 ⚠️ 只在 `body.nav-enabled` 显示 —— 桌面右侧已经有一颗「问管家」按钮， 再加一颗就是第二个入口（同 §社区 D1 卡「桌面不做第二个入口」的口径）。 */ .ask-hd-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: none; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--sub); transition: border-color 0.15s, background 0.15s, color 0.15s; flex-shrink: 0; } .ask-hd-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(230,184,106,0.08); } .ask-hd-btn svg { width: 17px; height: 17px; display: block; } body.nav-enabled .ask-hd-btn { display: inline-flex; } /* 首次登录欢迎遮罩 */ .welcome-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,11,0.78); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .welcome-overlay.open { opacity: 1; pointer-events: auto; } .welcome-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px 28px; text-align: center; max-width: 380px; width: 100%; position: relative; overflow: hidden; transform: scale(0.92); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(230,184,106,0.12); } .welcome-overlay.open .welcome-card { transform: scale(1); } .welcome-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .welcome-confetti .confetti { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: confetti-fall 2.6s ease-in forwards; } .welcome-confetti .c0 { left: 8%; background: #E6B86A; animation-delay: 0s; transform: rotate(15deg); } .welcome-confetti .c1 { left: 22%; background: #F87171; animation-delay: 0.1s; transform: rotate(-10deg); } .welcome-confetti .c2 { left: 35%; background: #4ADE80; animation-delay: 0.05s; transform: rotate(8deg); } .welcome-confetti .c3 { left: 50%; background: #60A5FA; animation-delay: 0.15s; transform: rotate(-20deg); } .welcome-confetti .c4 { left: 65%; background: #E6B86A; animation-delay: 0.08s; transform: rotate(12deg); } .welcome-confetti .c5 { left: 80%; background: #F472B6; animation-delay: 0.18s; transform: rotate(-15deg); } .welcome-confetti .confetti:nth-child(n+7) { animation-delay: 0.25s; top: -40px; } .welcome-confetti .confetti:nth-child(n+13) { animation-delay: 0.4s; top: -60px; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: 0; } } .welcome-coin { font-size: 56px; line-height: 1; margin-bottom: 10px; animation: coin-bounce 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 12px rgba(230,184,106,0.4)); } @keyframes coin-bounce { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } .welcome-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: -0.01em; } .welcome-sub { color: var(--sub); font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; } .welcome-grant { /* center 比 baseline 更适合大字 + 小字混排，避免大数字下沉 */ display: inline-flex; align-items: center; gap: 8px; padding: 16px 24px; background: linear-gradient(135deg, rgba(230,184,106,0.12), rgba(230,184,106,0.04)); border: 1px solid rgba(230,184,106,0.3); border-radius: 12px; margin-bottom: 14px; } .welcome-num { font-size: 44px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-family: var(--font-num); line-height: 1; } .welcome-unit { color: var(--accent); font-size: 14px; font-weight: 500; } .welcome-line { color: var(--sub); font-size: 12.5px; line-height: 1.5; margin-bottom: 22px; } .welcome-btn { background: var(--accent); color: #0A0A0B; border: none; border-radius: 999px; padding: 12px 28px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .welcome-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(230,184,106,0.35); } .user-badge.signed-in .name { color: var(--accent); } /* ─── 用户菜单 popover ─── */ .user-menu { position: fixed; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index: 1470; /* 高于 tab-page(1440) + 自家遮罩(1465) · §12 */ min-width: 264px; max-width: 292px; max-height: calc(100vh - 72px); overflow-y: auto; /* overflow-y:auto 会把 overflow-x 隐式算成 auto（§5 坑）→ 任何子元素横向 bleed 就冒 底部横向滚动条。菜单是纵向列表，横向永远不该滚 → 显式 hidden 兜底。 */ overflow-x: hidden; padding: 6px; display: none; } .user-menu.show { display: block; } .user-menu .um-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .user-menu .um-email { font-size: 11.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu .um-status { font-size: 10px; color: var(--green); margin-top: 4px; /* 左 padding 4px：呼吸点(6px)中心与上一行房东等级 icon(14px)中心纵向对齐 · congyang 2026-07-06 */ padding-left: 4px; display: flex; align-items: center; gap: 5px; } .user-menu .um-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); } .user-menu .um-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 10px; transition: background 0.12s; } .user-menu .um-item:hover { background: var(--card2); } .user-menu .um-item.danger { color: var(--red); } .user-menu .um-item.danger:hover { background: rgba(239,68,68,0.06); } .user-menu .um-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sub); stroke-width: 1.75; } .user-menu .um-item.danger svg { color: var(--red); } /* 「安装 App」入口只给浏览器模式 — 已装 PWA 里看到它是噪声 */ @media (display-mode: standalone) { .user-menu #um-install { display: none !important; } } .user-menu .um-status svg { width: 11px; height: 11px; color: var(--green); } /* ─── 用户菜单 C 版：金币芯片 / 快捷宫格 / 三语条 / 分隔 / 危险 footer ─── */ .user-menu .um-coins { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); cursor: pointer; } .user-menu .um-coins:hover { background: var(--fill-2); } .user-menu .um-coins svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } .user-menu .um-coins .n { font-weight: 700; color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; } .user-menu .um-coins .invite { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--accent); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent-soft); white-space: nowrap; } /* Gold 不限次：芯片内容居中 + Unlimited 金渐变字（铜钱 icon 保留 = 用户认出这是金币模块 · congyang 2026-07-06） */ .user-menu .um-coins.is-unlimited { justify-content: center; } .user-menu .um-coins.is-unlimited .n { background: linear-gradient(90deg, #FFE7A8, #E6B86A 55%, #C08F3D); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .user-menu .um-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 2px 4px; } .user-menu .um-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 4px; border-radius: 11px; background: var(--fill); border: 1px solid var(--line); cursor: pointer; font-size: 10.5px; line-height: 1.2; color: var(--text); text-align: center; transition: background 0.12s; } /* 「收租社区」那格 2026-08-15 已从头像菜单移除（congyang 要求）→ 这两条规则跟着删， 不留只作用于不存在元素的死 CSS。入口现在在 app.spaceswitch.js 的双空间切换器上。 */ .user-menu .um-tile:hover { background: var(--card2); } .user-menu .um-tile svg { width: 19px; height: 19px; color: var(--accent); } .user-menu .um-tile span { display: block; max-width: 100%; } /* 月度复盘阅读器·新版一次性引导：呼吸金光（用户开过一次即熄 · JS 按 localStorage._mrSeen toggle um-tile--glow）*/ .user-menu .um-tile--glow { border-color: var(--accent-soft); animation: umTileGlow 2.4s var(--ease-out, ease-in-out) infinite; } @keyframes umTileGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,188,114,0); } 50% { box-shadow: 0 0 0 3px rgba(232,188,114,0.28), 0 0 14px 0 rgba(232,188,114,0.20); } } @media (prefers-reduced-motion: reduce) { .user-menu .um-tile--glow { animation: none; border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent-soft); } } /* ── 外观行（2026-08-16 congyang）：三语滑动胶囊 + 日夜拨钮开关 并到一行 ── 沿用 .pulse-wo-thumb 那套「well 底 + 弹簧滑块」范式。三语复用 .lang-selector 的 JS 接线 （setLang/boot 照旧切 .active），active 从「换按钮背景」升级为「一块金色滑块滑过去」。 */ .user-menu .um-row { display: flex; gap: 8px; align-items: stretch; margin: 8px 2px 0; } /* 三语滑动胶囊：吃满剩余宽（日夜开关定宽）。滑块位置由 :has(button.active) 驱动 = 零 JS 改动。 ⚠️ 不给外层加 width:100%（会 +margin 撑出横向滚动条，congyang 2026-07-06 报）——flex:1 自动填满。 */ .user-menu .um-langbar { position: relative; flex: 1; min-width: 0; display: flex; gap: 2px; background: var(--well); border: 1px solid var(--line); border-radius: 11px; padding: 3px; height: 38px; box-shadow: var(--well-sh); } .user-menu .um-langbar .lang-thumb { position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); transition: transform var(--dur-normal, .24s) var(--ease-spring, cubic-bezier(0.34,1.45,0.4,1)); } /* thumb 是第 1 个子元素 → 三个按钮各占 1/3；:has 命中哪个 .active 就把滑块滑过去 */ .user-menu .um-langbar:has(button[data-lang="zh_tw"].active) .lang-thumb { transform: translateX(100%); } .user-menu .um-langbar:has(button[data-lang="en"].active) .lang-thumb { transform: translateX(200%); } .user-menu .um-langbar button { position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; padding: 0 4px; background: none; border: none; border-radius: 8px; font-size: 12px; letter-spacing: 0; color: var(--sub); font-family: inherit; font-weight: 600; cursor: pointer; transition: color var(--dur-quick, .14s) var(--ease-out, ease); } /* active 的金底改由滑块承担 → 按钮本身只改字色（覆写基础 .lang-selector button.active 的金渐变背景） */ .user-menu .um-langbar button.active { background: none; color: var(--gold-ink); font-weight: 700; box-shadow: none; } /* 日夜拨钮开关（方案 B · iOS 风）：定宽圆钮左右滑，钮上带当前图标，轨道两端露幽灵图标提示方向。 钮位置 / 图标全由 CSS 键 :root[data-theme] 驱动（applyTheme 只同步 aria-checked）。 */ .user-menu .um-daynight { position: relative; box-sizing: border-box; flex: 0 0 62px; width: 62px; height: 38px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); box-shadow: var(--well-sh); cursor: pointer; padding: 0; } .user-menu .um-daynight .dn-rail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; pointer-events: none; } .user-menu .um-daynight .dn-rail svg { width: 13px; height: 13px; color: var(--dim); } .user-menu .um-daynight .dn-knob { position: absolute; z-index: 1; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 8px -2px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; transform: translateX(24px); transition: transform var(--dur-normal, .24s) var(--ease-spring, cubic-bezier(0.34,1.45,0.4,1)); } .user-menu .um-daynight .dn-knob svg { position: absolute; width: 16px; height: 16px; color: var(--gold-ink); transition: opacity var(--dur-quick, .14s) var(--ease-out, ease); } /* 默认夜间（:root[data-theme="dark"] 或未设）：钮在右、显月亮；轨道左端露太阳（= 点了会去的方向） */ .user-menu .um-daynight .dn-k-sun { opacity: 0; } .user-menu .um-daynight .dn-rail .dn-r-moon { opacity: 0; } /* 白天：钮滑到左、显太阳；轨道右端露月亮 */ :root[data-theme="light"] .user-menu .um-daynight .dn-knob { transform: translateX(0); } :root[data-theme="light"] .user-menu .um-daynight .dn-k-sun { opacity: 1; } :root[data-theme="light"] .user-menu .um-daynight .dn-k-moon { opacity: 0; } :root[data-theme="light"] .user-menu .um-daynight .dn-rail .dn-r-sun { opacity: 0; } :root[data-theme="light"] .user-menu .um-daynight .dn-rail .dn-r-moon { opacity: 1; } .user-menu .um-sep { height: 1px; background: var(--line); margin: 8px 6px; } .user-menu .um-foot { display: flex; gap: 6px; padding: 2px 2px 0; margin-top: 4px; } .user-menu .um-foot .um-signout { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border-radius: 9px; background: var(--fill); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); cursor: pointer; transition: background 0.12s; } .user-menu .um-foot .um-signout:hover { background: var(--card2); } .user-menu .um-foot .um-signout svg { width: 15px; height: 15px; color: var(--sub); } .user-menu .um-foot .um-del { display: flex; align-items: center; justify-content: center; padding: 9px 13px; border-radius: 9px; background: transparent; border: 1px solid rgba(var(--red-rgb), 0.35); color: var(--red); cursor: pointer; transition: background 0.12s; } .user-menu .um-foot .um-del:hover { background: rgba(var(--red-rgb), 0.08); } .user-menu .um-foot .um-del svg { width: 15px; height: 15px; color: var(--red); } /* 遮罩：**桌面也要**（congyang 2026-08-09 报「设置面板一直显示」）。 ⭐ 原来桌面靠 `_userMenuClickAway`（document 上的 click 监听）关菜单，但这个 app 里 大量元素的 inline onclick 第一句就是 `event.stopPropagation()`（持仓卡 / 账户单元格 / 各种 chip 和按钮）—— 点到那些地方事件**根本到不了 document**，菜单就关不掉。 换成「透明遮罩兜住外部点击」：遮罩自己 onclick=hideUserMenu，不依赖冒泡， 谁 stopPropagation 都拦不住它。桌面保持完全透明（观感一字不变）， 手机才加那层压暗 + 锁滚动。 ⚠️ 代价：菜单开着时第一次点击只用于关菜单、不会激活点到的东西 —— 这是 popover 的 标准行为，也是手机那条路一直以来的行为，比「关不掉」好。 */ .um-scrim { display: none; position: fixed; inset: 0; background: transparent; z-index: 1465; } .um-scrim.show { display: block; } @media (max-width: 720px) { .um-scrim.show { display: block; background: rgba(3,5,11,0.28); touch-action: none; overscroll-behavior: none; } html.um-open, html.um-open body { overflow: hidden; } .user-menu .um-tile { min-height: 70px; font-size: 11px; } } /* ─── 迁移确认 modal (替代 confirm()，OAuth 后浏览器会拦截 confirm) ─── */ .migrate-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 94vw); z-index: 1400; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } .migrate-modal.open { display: block; } .migrate-modal h3 { font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .migrate-modal .body { font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 18px; } .migrate-modal .body .counts { background: var(--card2); padding: 8px 12px; border-radius: 6px; margin: 10px 0; font-family: var(--font-num); font-size: 12px; color: var(--accent); } .migrate-modal .body .hint { font-size: 11.5px; color: var(--sub); margin-top: 8px; } .migrate-modal .actions { display: flex; gap: 8px; justify-content: flex-end; } .migrate-modal button { border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; letter-spacing: -0.005em; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .migrate-modal .btn-import { background: var(--accent); color: #0A0A0B; } .migrate-modal .btn-import:hover { background: var(--accent-light); transform: scale(1.03); box-shadow: 0 6px 20px rgba(230,184,106,0.32); } .migrate-modal .btn-import:active { transform: scale(0.97); box-shadow: none; } .migrate-modal .btn-skip { background: transparent; color: var(--sub); border: 1.5px solid var(--line); } .migrate-modal .btn-skip:hover { color: var(--text); transform: scale(1.02); } .migrate-modal .btn-skip:active { transform: scale(0.97); } /* ─── 通用对话框系统：toast / appConfirm / appPrompt （替代浏览器原生 alert/confirm/prompt）─── */ /* 顶部 toast — 信息/成功/错误，自动消失，非阻塞 */ .app-toast-host { position: fixed; top: calc(18px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); /* ⭐ toast 必须在**所有**浮层之上 —— 它是「刚才那一下成没成」的唯一回执，被盖住 等于没有。2026-08-11 congyang 实拍：发帖器 backdrop 是 1600，toast 1500 → 没勾「我已阅读」时点发布，提示在遮罩下面，看起来像按钮坏了。 现有最高的浮层：发帖器 1600 / 它的持仓选择器 1620 → 这里取 1700 留余量。 ⚠️ 以后新加浮层 z-index 不要 ≥ 1700。 */ z-index: 1700; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); } .app-toast { pointer-events: auto; cursor: pointer; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.45; min-width: 0; max-width: min(420px, calc(100vw - 32px)); animation: app-toast-in var(--dur-normal, 240ms) var(--ease-pour, cubic-bezier(0.32,1.18,0.35,1)) both; } .app-toast.leaving { animation: app-toast-out var(--dur-quick, 140ms) var(--ease-in, ease-in) both; } /* 琉璃: 图标 = DS sprite（icon B）15px 直接内联，无圆盘；语义靠 svg 着色（对齐 design-system #toast） */ .app-toast .ti { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .app-toast .ti .ico { width: 15px; height: 15px; display: block; color: var(--accent); } .app-toast .ct { flex: 1; word-break: break-word; } /* toast 里那颗「顺手做一下」的按钮（appToast opts.action · 2026-08-13 平仓后「说一句」）。 做**次级玻璃**不做实金：toast 本身已经是浮层，实金会让一条可以完全忽略的提议 看起来像必须处理的事（DESIGN 按钮四阶 —— 实金留给主操作）。 */ .app-toast-act { flex: 0 0 auto; appearance: none; font: inherit; font-size: 12.5px; font-weight: 600; height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; color: var(--accent-light); background: var(--accent-tint); border: 1px solid var(--accent-soft); } .app-toast-act:hover { background: var(--accent-tint-strong); } .app-toast-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .app-toast .ct .strong { color: var(--accent); font-weight: 600; } /* 琉璃: 玻璃胶囊统一 --edge 边框，语义靠图标色承载 — 不给左边框单独上色、不要圆盘 （旧矩形 toast 的「左色条」+ 圆盘遗物，在 999px 胶囊上会渲成左端绿/红弧。勿再加 border-left-color / .ic） */ .app-toast.success .ti .ico { color: var(--green); } .app-toast.success .ct .strong { color: var(--green); } .app-toast.error .ti .ico { color: var(--red); } .app-toast.error .ct .strong { color: var(--red); } @keyframes app-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes app-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } @media (max-width: 480px) { /* ⚠️ 这里**必须**带 env(safe-area-inset-top)。上面基础规则本来是对的，但这条窄屏覆盖 原先写的是裸 `top: 12px` —— 直接把安全区抹掉 → iPhone 灵动岛/刘海机在 **PWA 全屏态**下 toast 顶进状态栏，被灵动岛压掉一截（2026-08-08 congyang 真机实拍：「测试推送没发出去」 只露出半行）。浏览器态看不出来（那时安全区是 0，浏览器 chrome 自己占了顶部）—— **只有装到主屏的 PWA 才复现**，所以很容易漏。 14px 比基础值 18px 略紧是刻意的（窄屏寸土寸金），但绝不能省掉安全区那一项。 */ .app-toast-host { top: calc(14px + env(safe-area-inset-top, 0px)); } .app-toast { font-size: 12px; min-width: 0; } } /* appConfirm / appPrompt — 桌面正中 modal / 手机底部 sheet */ .app-modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1450; opacity: 0; transition: opacity 0.18s ease-out; } .app-modal-scrim.open { opacity: 1; } .app-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 12px)); width: min(440px, calc(100vw - 32px)); z-index: 1460; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; /* 内容超高时 modal 自身滚动，不再溢出视口上下（金币弹窗等长内容会顶破屏幕） */ max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s ease-out, transform 0.22s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } .app-modal.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; } .app-modal h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; letter-spacing: -0.005em; } .app-modal.danger h3 { color: var(--red); } .app-modal .body { font-size: 13px; line-height: 1.6; color: var(--text); margin-bottom: 16px; word-break: break-word; } .app-modal .body .strong { color: var(--accent); font-weight: 600; } .app-modal .body .hint { font-size: 11.5px; color: var(--sub); margin-top: 6px; line-height: 1.5; } .app-modal .field { margin-top: 10px; } .app-modal .field label { display: block; font-size: 11px; color: var(--sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .app-modal .field input { width: 100%; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 13.5px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; box-sizing: border-box; } .app-modal .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-strong); } /* 🔄 Roll 收尾：平旧腿 modal（买回价 + 张数 + 盈亏预览） */ .app-modal .rc-ctx { margin-top: 2px; font-size: 12.5px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .app-modal .rc-input-wrap { display: flex; align-items: center; gap: 8px; } .app-modal .rc-input-wrap input { flex: 1; min-width: 0; } .app-modal .rc-input-wrap input::-webkit-outer-spin-button, .app-modal .rc-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .app-modal .rc-input-wrap input[type=number] { -moz-appearance: textfield; } .app-modal .rc-chip { font-size: 10.5px; color: var(--accent); cursor: pointer; padding: 7px 10px; border: 1px solid rgba(184,134,11,0.30); border-radius: 999px; background: rgba(184,134,11,0.06); white-space: nowrap; font-weight: 500; font-family: inherit; transition: background 0.12s; font-variant-numeric: tabular-nums; } .app-modal .rc-chip:hover { background: rgba(184,134,11,0.14); } .app-modal .rc-sub { margin-top: 6px; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; } .app-modal .rc-pnl { margin-top: 14px; padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .app-modal .rc-pnl:empty { display: none; } .app-modal .rc-pnl-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .app-modal .rc-pnl-lbl { font-size: 11px; color: var(--sub); } .app-modal .rc-pnl-calc { font-size: 10.5px; color: var(--sub); font-family: var(--font-num); font-variant-numeric: tabular-nums; } .app-modal .rc-pnl-val { font-size: 15px; font-weight: 700; white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .app-modal .rc-pnl-val.good { color: var(--green); } .app-modal .rc-pnl-val.bad { color: var(--red); } .app-modal .actions { display: flex; gap: 8px; justify-content: flex-end; } .app-modal .actions.single { justify-content: stretch; } .app-modal .actions.single button { flex: 1; } .app-modal button { border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; letter-spacing: -0.005em; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .app-modal .btn-primary { background: var(--accent); color: #0A0A0B; } .app-modal .btn-primary:hover { background: var(--accent-light); transform: scale(1.03); box-shadow: 0 6px 20px rgba(230,184,106,0.32); } .app-modal .btn-primary:active { transform: scale(0.97); box-shadow: none; } .app-modal .btn-danger { background: var(--red); color: #fff; } .app-modal .btn-danger:hover { background: #FF8585; transform: scale(1.03); box-shadow: 0 6px 20px rgba(248,113,113,0.32); } .app-modal .btn-danger:active { transform: scale(0.97); box-shadow: none; } .app-modal .btn-secondary { background: transparent; color: var(--sub); border: 1.5px solid var(--line); } .app-modal .btn-secondary:hover { color: var(--text); transform: scale(1.02); } .app-modal .btn-secondary:active { transform: scale(0.97); } /* 手机：confirm/prompt 改 bottom sheet，拇指更顺手 */ @media (max-width: 560px) { .app-modal { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 88vh; overflow-y: auto; border-radius: 18px 18px 0 0; transform: translateY(100%); padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 12px)); } .app-modal.open { transform: translateY(0); } .app-modal::before { content: ""; display: block; width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: -8px auto 12px; } .app-modal .actions { flex-direction: column-reverse; gap: 8px; } .app-modal .actions button { width: 100%; padding: 12px 16px; font-size: 14px; } } /* ─── 金币 modal（app.coins.js · 设计 A 钱包式 · 复用 app-modal 容器）─── */ /* 钱包卡（设计 C）— 余额 + 换算 + 价目小字 */ .app-modal .cn-wallet { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-tint) 0%, var(--card2) 62%); border: 1px solid rgba(230,184,106,0.28); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; } .app-modal .cn-wtop { display: flex; align-items: baseline; gap: 10px; } .app-modal .cn-wnum { font-family: var(--font-num); font-size: 32px; font-weight: 700; color: var(--accent-light); letter-spacing: -0.02em; line-height: 1.1; display: inline-flex; align-items: center; gap: 8px; } .app-modal .cn-wnum svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; } .app-modal .cn-wcap { font-size: 11.5px; color: var(--sub); } .app-modal .cn-wconv { position: relative; font-size: 12px; color: var(--text); margin-top: 8px; line-height: 1.55; } .app-modal .cn-wconv b { color: var(--accent-light); font-weight: 650; font-variant-numeric: tabular-nums; } .app-modal .cn-wfoot { position: relative; font-size: 10.5px; color: var(--sub); margin-top: 7px; line-height: 1.6; } .app-modal .cn-wfoot .ci-coin { width: 10px; height: 10px; color: var(--accent); } .app-modal .cn-wmark { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; color: var(--accent); opacity: 0.09; pointer-events: none; } .app-modal .cn-balhero { text-align: center; padding: 4px 0 12px; } .app-modal .cn-num { font-family: var(--font-num); font-size: 34px; font-weight: 700; color: var(--accent-light); letter-spacing: -0.02em; line-height: 1.15; } .app-modal .cn-num .cn-coin { width: 22px; height: 22px; color: var(--accent); } .app-modal .cn-cap { font-size: 11.5px; color: var(--sub); margin-top: 2px; } .app-modal .cn-uses { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; } .app-modal .cn-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--sub); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 3.5px 11px; white-space: nowrap; } .app-modal .cn-price { display: inline-flex; align-items: center; gap: 2.5px; color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; } .app-modal .cn-price .ci-coin { width: 11.5px; height: 11.5px; } .app-modal .cn-per { color: var(--sub); font-weight: 400; } .app-modal .cn-sec { font-size: 11px; color: var(--sub); letter-spacing: 0.08em; margin: 14px 0 8px; } .app-modal .cn-item { display: flex; align-items: flex-start; gap: 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s; } .app-modal .cn-item:hover { border-color: var(--accent); } .app-modal .cn-item.cn-static { cursor: default; } .app-modal .cn-item.cn-static:hover { border-color: var(--line); } .app-modal .cn-body { flex: 1; min-width: 0; } .app-modal .cn-t { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; } .app-modal .cn-t .cn-ticon { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; } .app-modal .cn-s { font-size: 11.5px; color: var(--sub); margin-top: 2px; line-height: 1.55; } .app-modal .cn-arrow { color: var(--sub); font-size: 15px; align-self: center; transition: transform 0.18s var(--ease-out, ease); } .app-modal .cn-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(52,211,153,0.15); color: var(--green); margin-left: 6px; white-space: nowrap; } /* ── 新手任务内联下拉（点 header 展开 checklist，不再跳走，见 app.coins.js）── */ .app-modal .cn-task-block { margin-bottom: 10px; } .app-modal .cn-task-block > .cn-item { margin-bottom: 0; } .app-modal .cn-task-block.open > .cn-item .cn-arrow { transform: rotate(90deg); } .app-modal .cn-task-panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.28s var(--ease-out, ease), opacity 0.18s ease; } .app-modal .cn-task-block.open .cn-task-panel { max-height: 640px; opacity: 1; } .app-modal .cn-tasks { padding: 9px 2px 2px; } .app-modal .cn-task { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; } .app-modal .cn-task + .cn-task { margin-top: 6px; } .app-modal .cn-task.pending { background: var(--fill); border: 1px solid var(--line); } .app-modal .cn-task.done { opacity: 0.6; } .app-modal .cn-tk-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; } .app-modal .cn-tk-dot svg { width: 13px; height: 13px; } .app-modal .cn-task.pending .cn-tk-dot { background: var(--accent-tint-strong); color: var(--accent-light); } .app-modal .cn-task.done .cn-tk-dot { background: rgba(52,211,153,0.16); color: var(--green); font-size: 12px; font-weight: 800; } .app-modal .cn-tk-body { flex: 1; min-width: 0; } .app-modal .cn-tk-label { font-size: 12.5px; font-weight: 600; color: var(--text); } .app-modal .cn-task.done .cn-tk-label { font-weight: 500; color: var(--sub); } .app-modal .cn-tk-hint { font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.5; } .app-modal .cn-tasks-foot { text-align: center; margin: 4px 0 2px; } .app-modal .cn-tasks-foot button { background: none; border: 0; color: var(--accent); font: inherit; font-size: 11.5px; cursor: pointer; padding: 4px 8px; } .app-modal .cn-qr-wrap { display: flex; gap: 14px; align-items: center; margin-top: 10px; } .app-modal .cn-qr { flex: 0 0 140px; width: 140px; height: 140px; border-radius: 10px; background: #fff; padding: 8px; } .app-modal .cn-qr img { width: 100%; height: 100%; display: block; } .app-modal .cn-qr-side { flex: 1; min-width: 0; } .app-modal .cn-wxid-label { font-size: 10.5px; color: var(--sub); } .app-modal .cn-wxid-row { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin: 5px 0 6px; } .app-modal .cn-wxid { font-family: var(--font-num); font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .app-modal .cn-copy { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-2) 100%); color: #1A1410; border: none; border-radius: 999px; font-size: 11px; font-weight: 800; padding: 4px 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 1px 4px rgba(0,0,0,0.3); } .app-modal .cn-hint { font-size: 10.5px; color: var(--sub); line-height: 1.55; } /* 会员续订卡里的「有问题？加我微信」折叠条 —— 一行安静的次要出口， 不跟上面那颗实金续订按钮抢第一眼（展开后就是原样的 QR 块）。 */ .app-modal .cn-qr-fold { margin-top: 10px; } .app-modal .cn-qr-fold > summary { list-style: none; cursor: pointer; text-align: center; font-size: 11.5px; color: var(--sub); padding: 6px 0; transition: color var(--dur-quick) var(--ease-out); } .app-modal .cn-qr-fold > summary::-webkit-details-marker { display: none; } .app-modal .cn-qr-fold > summary::after { content: ' ›'; } .app-modal .cn-qr-fold[open] > summary::after { content: ' ⌄'; } .app-modal .cn-qr-fold > summary:hover { color: var(--accent); } .app-modal .cn-qr-fold .cn-qr-wrap { margin-top: 2px; } .app-modal .cn-mail { font-size: 11px; color: var(--sub); margin-top: 12px; text-align: center; } .app-modal .cn-mail a { color: var(--accent); text-decoration: none; } /* 免费卡底部那行里的微信号：点一下复制。虚下划线是在说「这个能点」—— 免费用户在这张卡上没有别的微信入口，所以它得看得出来是可交互的。 */ .app-modal .cn-mail-wx { font-family: var(--font-num); color: var(--text); border-bottom: 1px dashed var(--line-2); cursor: pointer; padding: 0 1px; } .app-modal .cn-mail-wx:hover { color: var(--accent); border-bottom-color: var(--accent); } /* 窄屏（mobile bottom-sheet）：QR 居中上、微信号行全宽下 — 防微信号被挤换行 */ @media (max-width: 560px) { .app-modal .cn-qr-wrap { flex-direction: column; align-items: center; } .app-modal .cn-qr-side { width: 100%; } .app-modal .cn-wxid-label { text-align: center; } .app-modal .cn-hint { text-align: center; } } /* ─── Watchlist modal — 列表项内复用 app-modal 容器 ─── */ .app-modal .wl-count { color: var(--sub); font-weight: 400; font-size: 12px; } .app-modal .wl-body { max-height: 60vh; overflow-y: auto; } .app-modal .wl-hint { font-size: 11.5px; color: var(--sub); margin-bottom: 12px; line-height: 1.5; } .app-modal .wl-empty { padding: 24px 12px; text-align: center; color: var(--sub); font-size: 12.5px; line-height: 1.6; background: var(--card2); border-radius: 10px; } .app-modal .wl-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; align-items: center; background: var(--card2); } .app-modal .wl-main { min-width: 0; } .app-modal .wl-ticker { font-size: 14px; font-weight: 700; color: var(--text); } .app-modal .wl-meta { font-size: 11px; color: var(--sub); margin-top: 2px; } .app-modal .wl-threshold { font-size: 11.5px; color: var(--text); text-align: right; } .app-modal .wl-thr-line strong { color: var(--accent); font-weight: 700; } .app-modal .wl-thr-sub { font-size: 10.5px; color: var(--sub); margin-top: 2px; } /* 提醒 = 关注行上的**开关**，所以这一栏是可点的（未设是描边、设了是金色实底）， 不是一行只读文字 —— 以前只能整条取消关注才能停掉提醒，等于把两层又绑回一个概念。 */ .app-modal .wl-thr-btn { font: inherit; font-size: 11.5px; line-height: 1.3; text-align: right; background: transparent; border: 1px dashed var(--line-2); color: var(--sub); border-radius: 8px; padding: 5px 9px; cursor: pointer; max-width: 100%; transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .app-modal .wl-thr-btn + .wl-thr-btn { margin-top: 5px; } .app-modal .wl-thr-btn:hover { color: var(--accent); border-color: var(--accent-soft); } .app-modal .wl-thr-btn.on { border-style: solid; border-color: var(--accent-soft); background: var(--accent-tint); color: var(--accent); font-weight: 600; } .app-modal .wl-del { background: transparent; border: 1px solid var(--line); color: var(--sub); border-radius: 8px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; transition: color 0.15s, border-color 0.15s, background 0.15s; } .app-modal .wl-del:hover { color: var(--red); border-color: var(--red); background: rgba(239,68,68,0.06); } @media (max-width: 560px) { .app-modal .wl-row { grid-template-columns: 1fr auto; gap: 8px; } .app-modal .wl-threshold { grid-column: 1 / 2; text-align: left; margin-top: 4px; } .app-modal .wl-del { grid-row: 1; grid-column: 2; } } /* ─── 月度报告 + 分享卡（app.report.js · 复用 app-modal 容器 · 琉璃 2.0，2026-06-12 /report-pick 拍板「鎏金回执」）─── */ .app-modal.report-modal h3 .rp-nav { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sub); font-weight: 400; } /* 月份切换：玻璃胶囊圆钮 ⚠️ rp 系按钮选择器必须带 .app-modal 前缀提权：`.app-modal button`(0,1,1) 的 radius 10 / padding 9px 18px / font-size 13 会压过裸类 (0,1,0) —— 2026-06-12 用户 截图「按钮还是方的」就是这个静默败给 specificity（QA-5 聚合段的 999px 同样输）。 */ .app-modal .rp-arrow { background: var(--fill); border: 1px solid var(--line); color: var(--text); width: 26px; height: 26px; border-radius: 999px; font-size: 15px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .app-modal .rp-arrow:disabled { opacity: 0.35; cursor: default; } .app-modal .rp-arrow:not(:disabled):hover { background: var(--fill-2); border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); } .rp-mo { min-width: 80px; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; } /* overflow-x:hidden 必带 —— 只设 overflow-y:auto 时浏览器把 overflow-x 也算成 auto， hero::before 氛围光 inset 左右各 bleed -20px → 卡片底部冒出一条横向滚动条（用户实锤）。裁掉。 */ .app-modal .rp-body { max-height: 64vh; overflow-y: auto; overflow-x: hidden; } .rp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 18px; text-align: center; color: var(--sub); font-size: 12.5px; line-height: 1.6; } .rp-empty-ico { width: 30px; height: 30px; color: var(--dim); } .rp-empty-ico use { stroke: currentColor; } .rp-hero { position: relative; text-align: left; margin-bottom: 4px; } /* hero 左上极淡金氛围（morning-brief 同配方） */ .rp-hero::before { content: ''; position: absolute; inset: -14px -20px -10px; pointer-events: none; background: radial-gradient(120% 130% at 0% 0%, rgba(var(--accent-rgb), 0.07) 0%, rgba(var(--accent-rgb), 0) 55%); } .rp-hero-lab { font-size: 12px; color: var(--sub); } .rp-hero-big { font-size: 34px; font-weight: 800; color: var(--green); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-family: var(--font-num); line-height: 1.12; margin-top: 2px; } .rp-hero-big.neg { color: var(--red); } .rp-hero-sub { font-size: 12.5px; color: var(--sub); margin-top: 4px; } .rp-dot { color: var(--dim); } .rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; } /* KPI 瓦片：fill 内层卡（真玻璃浮层内「玻璃不叠玻璃」QA-6 规则） */ .rp-kpi { background: var(--fill); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; } .rp-kpi .l { font-size: 11px; color: var(--sub); } .rp-kpi .v { font-size: 17px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; font-family: var(--font-num); display: flex; align-items: center; gap: 5px; } .rp-kpi .v.accent { color: var(--accent-light); } .rp-kpi .v.green { color: var(--green); } .rp-fire { width: 15px; height: 15px; color: var(--accent); } .rp-tk { margin-top: 16px; } .rp-tk-th { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .rp-tkrow { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 12.5px; } .rp-tkrow .sym { font-weight: 700; width: 50px; flex-shrink: 0; } /* 来源条：凹面 well 轨 + 实金渐变填充 */ .rp-tkrow .bar { flex: 1; height: 8px; border-radius: 999px; overflow: hidden; background: var(--well); border: 1px solid var(--line); box-shadow: var(--well-sh); } .rp-tkrow .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C08F3D, #E6B86A 55%, #F4D292); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32); } .rp-tkrow .amt { width: 62px; text-align: right; color: var(--accent-light); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; } .rp-tk-empty { font-size: 12px; color: var(--dim); padding: 4px 0; } /* KPI 注解副标：把「累计=全部历史 / 本年=当年 / 年化=在手仓位 / 连续=正收租月」一行说清楚 */ .rp-kpi .cap { font-size: 10px; color: var(--dim); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* 「其他 N 个标的」补足行：前 5 大 + 此行 = 本月落袋，来源数字对得上（无金条，虚线分隔，弱化样式） */ .rp-tkrow.rest { border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 3px; } .rp-tkrow.rest .sym { color: var(--sub); font-weight: 600; } .rp-tkrow .restmid { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); } .rp-tkrow.rest .amt { color: var(--sub); } /* 分享卡视图 */ .app-modal .rp-card-body { max-height: 70vh; overflow-y: auto; } .rp-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } /* 风格切换 / $%开关：凹槽轨 + 实金药丸（rec-mode-tabs 同配方） */ .rp-seg { display: flex; gap: 3px; background: var(--well); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--well-sh); } .rp-seg.rp-toggle { margin-left: auto; } .app-modal .rp-seg-btn { background: transparent; border: 0; color: var(--sub); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .app-modal .rp-seg-btn.active { background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); } .app-modal .rp-seg-btn:not(.active):hover { color: var(--text); } /* 展台：卡后金/紫极淡氛围光（纯渐变零 blur，仅 app 内，不进导出） */ .rp-card-stage { position: relative; display: flex; justify-content: center; padding: 10px 0 6px; cursor: pointer; } .rp-card-stage::before { content: ''; position: absolute; inset: -6px 10%; pointer-events: none; background: radial-gradient(58% 64% at 50% 44%, rgba(232,188,114,0.13), transparent 70%), radial-gradient(40% 48% at 78% 76%, rgba(124,108,255,0.09), transparent 70%); } .rp-card-stage .rp-sc { transition: transform var(--dur-quick) var(--ease-spring); } .rp-card-stage:active .rp-sc { transform: scale(0.985); } /* 保存按钮：实金渐变/阴影本体在「模块内部控件 2.0」聚合段（QA-5）； radius/padding/字重在此处带 .app-modal 前缀压过 `.app-modal button` 基础规则 */ .app-modal .rp-save-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; letter-spacing: -0.005em; transition: transform var(--dur-quick) var(--ease-spring), filter var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } .app-modal .rp-save-btn:not([disabled]):active { transform: scale(0.98); transition-duration: var(--dur-instant); } .rp-card-hint { text-align: center; font-size: 11px; color: var(--dim); margin-top: 10px; line-height: 1.5; } /* 卡片本体（竖版 3:4 ·「鎏金回执」· 导出物固定暗夜琉璃配色不随主题 —— 亮主题预览=导出，修掉旧版预览/导出错位） A 金印 / B 收租回执 / C 鎏金大字报；brand 全部走文档流 margin-top:auto，结构性杜绝 logo 与等级条重叠。 */ .rp-sc { width: min(300px, 100%); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; position: relative; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.3; color: rgba(245,247,253,0.96); border: 1px solid rgba(232,188,114,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 30px rgba(0,0,0,0.5); } /* 内嵌金细框（租契感）+ 噪点（噪点仅 DOM 预览；SVG 导出不画，3% 透明度差异不可见） */ .rp-sc::before { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(232,188,114,0.16); border-radius: 11px; pointer-events: none; } .rp-sc::after { content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .rp-sc .brand { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 11.5px; color: #C59440; letter-spacing: 0.02em; margin-top: auto; padding-top: 13px; } .rp-sc .brand svg { width: 14px; height: 14px; } .rp-sc .big { font-variant-numeric: tabular-nums; font-family: var(--font-num); } /* hero 大数字专用金渐变（--num-g 同值；卡片不随主题故写死暗版） */ .rp-sc .goldnum { background: linear-gradient(120deg, #F8DCA2, #E0AE5C); -webkit-background-clip: text; background-clip: text; color: transparent; } /* A 金印 */ .rp-scA { padding: 30px 26px 19px; align-items: center; text-align: center; background: radial-gradient(120% 80% at 50% -12%, rgba(232,188,114,0.15), transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.05), transparent 45%), #0A0805; } .rp-scA .mo { font-size: 11px; letter-spacing: 0.22em; color: rgba(226,231,244,0.55); } .rp-scA .sp { flex: 1; } .rp-scA .seal { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; border: 1.5px solid rgba(232,188,114,0.75); background: radial-gradient(circle at 50% 32%, rgba(232,188,114,0.16), rgba(232,188,114,0.03)); box-shadow: 0 0 0 4px rgba(232,188,114,0.10), inset 0 0 16px rgba(232,188,114,0.16); } .rp-scA .seal svg { width: 26px; height: 26px; color: #E8BC72; } .rp-scA .lab { font-size: 13px; color: #F6D9A2; margin-top: 15px; letter-spacing: 0.06em; } .rp-scA .big { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; margin-top: 5px; line-height: 1.05; } .rp-scA .meta { font-size: 12px; color: rgba(226,231,244,0.58); margin-top: 12px; padding: 0 4px; } .rp-scA .rp-rank { width: 100%; text-align: left; } /* B 收租回执（逐标的点线对账 + 撕票线 + 合计 + 已入账章） */ .rp-scB { padding: 24px 22px 16px; background: radial-gradient(110% 70% at 50% -10%, rgba(232,188,114,0.12), transparent 58%), linear-gradient(135deg, rgba(255,255,255,0.045), transparent 45%), #0A0805; } .rp-scB .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .rp-scB .hd .t { font-size: 15px; font-weight: 800; color: #E8BC72; letter-spacing: 0.05em; } .rp-scB .hd .e { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.30em; color: rgba(226,231,244,0.45); margin-top: 2px; } .rp-scB .hd .mo { font-size: 11px; color: rgba(226,231,244,0.58); padding-top: 3px; } .rp-scB .rows { margin-top: 15px; } .rp-scB .r { display: flex; align-items: baseline; font-size: 12.5px; margin-bottom: 8px; } .rp-scB .r .s { font-weight: 700; color: rgba(245,247,253,0.94); } .rp-scB .r i { flex: 1; border-bottom: 1px dotted rgba(232,188,114,0.30); margin: 0 8px; transform: translateY(-3px); } .rp-scB .r b { font-weight: 600; color: #F6D9A2; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .rp-scB .r.empty { color: rgba(226,231,244,0.45); font-size: 12px; justify-content: center; padding: 8px 0; } .rp-scB .tear { border-top: 1.5px dashed rgba(232,188,114,0.30); margin: 11px -8px 0; } /* flex-wrap + 数字 nowrap：长 EN 标签（Banked this month）下，金额整体掉到下一行而不会从中间断成 +$15,94/3 */ .rp-scB .total { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 10px; margin-top: 12px; position: relative; } .rp-scB .total .l { font-size: 12px; color: rgba(226,231,244,0.62); padding-bottom: 6px; } .rp-scB .total .v { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; } /* EN（长标签 Banked this month）：标签独占一行、金额掉到下一行铺开，避开右上「PAID」印章不再压字 */ .rp-scB .total.tstk .l { flex: 1 0 100%; } .rp-scB .stamp { position: absolute; right: 0; top: -12px; transform: rotate(-9deg); border: 1.5px solid rgba(232,188,114,0.55); color: #E8BC72; border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; background: rgba(232,188,114,0.06); } .rp-scB .sub { font-size: 11px; color: rgba(226,231,244,0.55); margin-top: 7px; } /* C 鎏金大字报（数字主角 + 对角鎏金光带 + 角章） */ .rp-scC { padding: 26px 22px 16px; background: linear-gradient(115deg, transparent 40%, rgba(232,188,114,0.075) 50%, transparent 60%), radial-gradient(130% 85% at 14% -10%, rgba(232,188,114,0.17), transparent 58%), linear-gradient(135deg, rgba(255,255,255,0.05), transparent 45%), #0A0805; } .rp-scC .kick { font-size: 11px; letter-spacing: 0.22em; color: rgba(226,231,244,0.55); } .rp-scC .corner { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1.25px solid rgba(232,188,114,0.40); display: flex; align-items: center; justify-content: center; background: rgba(232,188,114,0.05); } .rp-scC .corner svg { width: 16px; height: 16px; color: rgba(232,188,114,0.75); } .rp-scC .big { font-size: 50px; font-weight: 800; letter-spacing: -0.03em; margin-top: 36px; line-height: 1; } .rp-scC .line { font-size: 22px; font-weight: 800; margin-top: 12px; color: rgba(245,247,253,0.94); } .rp-scC .line em { font-style: normal; } .rp-scC .slogan { font-size: 12px; color: rgba(226,231,244,0.58); margin-top: 9px; } /* ─── 云同步状态指示 ─── */ .cloud-sync-status { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 10px; color: var(--sub); display: flex; align-items: center; gap: 6px; z-index: 50; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .cloud-sync-status.show { opacity: 1; } .cloud-sync-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sub); } .cloud-sync-status.syncing .dot { background: var(--accent); animation: pulse 1s infinite; } .cloud-sync-status.quotes .dot { background: var(--accent); animation: pulse 1s infinite; } .cloud-sync-status.synced .dot { background: var(--green); } .cloud-sync-status.error .dot { background: var(--red); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .summary { background: var(--glass-grad), var(--glass); border-radius: 14px; padding: 18px 22px 12px; margin-bottom: 18px; border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow); position: relative; /* 不能 overflow:hidden — 否则 ⓘ hint 浮层会被裁掉 */ } /* 3 大 + 3 小两层结构（/dash-pick 用户选定 · 2026-06-10）： 大行 = 当下状态（在手 / 已落袋 / 每日躺收），小行 = 累计流水与容量（权利金 / 买回成本 / 押金）。 教学 hint 不再常驻，全宽度统一收进 ⓘ 点按弹出。 */ .summary .sum-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .summary .sum-big .item:first-child { padding-left: 0; } .summary .sum-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; } @media (min-width: 1280px) { .summary { padding: 20px 26px 13px; } .summary .sum-big .item .val { font-size: 30px; } } /* summary 顶部一道极淡的金线，标记这是 "全局视图" */ .summary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-tint-strong) 20%, var(--accent-tint-strong) 80%, transparent 100%); opacity: 0.5; } .summary .item { text-align: left; padding: 6px 14px; position: relative; } /* 用伪元素画分隔线，避免 grid wrap 时边框错位 */ .summary .item + .item::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); } .summary .item .lab { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; font-weight: 600; } .summary .item .val { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; font-family: var(--font-num); letter-spacing: -0.035em; line-height: 1.05; } .summary .item .hint { display: none; font-size: 11px; color: var(--sub); line-height: 1.5; font-weight: 400; } /* ⓘ 点按 → hint 以浮层弹出（原 600-720px Fold 方案升级为全宽度统一行为） */ .summary .item.show-tip .hint { display: block; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 4px); z-index: 30; width: max-content; max-width: 240px; text-align: left; padding: 8px 11px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); } /* 标签 + ⓘ 同行（ⓘ 默认隐藏，仅 Fold/平板 600–720px 显示）。 wrapper 接管 label→value 的下间距（label 自身 margin 在 wrapper 内归 0）。 */ .summary .item .sum-lab { display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin-bottom: 8px; } .summary .item .sum-lab .lab { margin-bottom: 0; } /* ⓘ 字形本身自带圆圈，不要再加 border 圈（否则双圈）— 只上色 */ .summary .item .sum-i { display: inline-flex; color: var(--dim); font-size: 13px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; user-select: none; transition: color var(--dur-quick) var(--ease-out); } .summary .item .sum-i:hover { color: var(--accent); } .summary .item .val.accent { color: var(--accent-light); } /* （yield-tag 角标随 /panel-pick B+D 退役：年化升格为第三大格 t_yield_big，计算明细进 ⓘ hint） */ @media (max-width: 720px) { .summary .item + .item::before { display: none; } .summary .sum-sub { gap: 4px 16px; margin-top: 10px; padding-top: 8px; } .summary .sum-sub .item.funds-cell { margin-left: 0; } .summary .sum-sub .item.funds-cell.show-tip .hint { left: 50%; right: auto; transform: translateX(-50%); } } /* 收租 hero — income framing 方案 A：大数字 = 已落袋(realized 真落袋租金, 永不为负崩)；在手(unrealized) 放 meta 按符号上色 */ .rent-hero { background: linear-gradient(180deg, var(--accent-tint) 0%, transparent 100%); border: 1px solid var(--accent-2); border-radius: 14px; padding: 16px 22px; margin-bottom: 10px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .rent-hero .rh-lab { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; } .rent-hero .rh-ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; } .rent-hero .rh-big { font-size: 32px; font-weight: 700; color: var(--accent-light); font-variant-numeric: tabular-nums; font-family: var(--font-num); letter-spacing: -0.04em; line-height: 1; } .rent-hero .rh-big.red { color: var(--red); } .rent-hero .rh-meta { font-size: 12px; color: var(--sub); margin-left: auto; font-variant-numeric: tabular-nums; } .rent-hero .rh-meta b.rh-neg { color: var(--red); font-weight: 600; } .rent-hero .rh-meta b.rh-pos { color: var(--green); font-weight: 600; } .rent-hero .rh-dot { color: var(--dim); margin: 0 3px; } @media (max-width: 720px) { .rent-hero { padding: 13px 16px; gap: 8px 10px; } .rent-hero .rh-big { font-size: 26px; } .rent-hero .rh-meta { margin-left: 0; flex-basis: 100%; font-size: 11px; } } /* 🏠 房东面板（合体 · app.landlord.js 同源填两个 host）。 桌面 ≥1024 非 PWA → 右栏 #landlord-panel（竖排原样，本次不动）； 手机(<1024) + PWA → 主列 #landlord-panel-m（柱状图移数字右边 + 距下一级进标题行 · /level-pick E · 2026-06-21）， 替代分开的 rent-hero / rank-ladder / rent-ms 三块。 */ .landlord-panel { display: none; border: 1px solid var(--accent-soft); border-radius: 14px; background: var(--glass-grad), var(--card); box-shadow: var(--bevel), var(--shadow); overflow: hidden; margin-bottom: 14px; } @media (min-width: 1024px) { /* 桌面浏览器：右栏侧边合并面板（保持原样） */ body.lp-active:not(.nav-enabled) #landlord-panel { display: block; } body.lp-active:not(.nav-enabled) .rent-hero, body.lp-active:not(.nav-enabled) #rank-ladder, body.lp-active:not(.nav-enabled) #rent-ms { display: none !important; } /* ≥1024 PWA（平板横屏）：主列合并面板 */ body.lp-active.nav-enabled #landlord-panel-m { display: block; } body.lp-active.nav-enabled .rent-hero, body.lp-active.nav-enabled #rank-ladder, body.lp-active.nav-enabled #rent-ms { display: none !important; } } /* 手机浏览器(<1024) + PWA：主列合并面板替代分开三块 */ @media (max-width: 1023px) { body.lp-active #landlord-panel-m { display: block; } body.lp-active .rent-hero, body.lp-active #rank-ladder, body.lp-active #rent-ms { display: none !important; } } /* hero 内壳：桌面 display:contents（竖排原样）；手机 host 翻成 flex（柱状图在数字右边） */ .landlord-panel .lp-hero-main, .landlord-panel .lp-hero-bars { display: contents; } /* 距下一级：默认（桌面 host）隐藏，仍用下方 .lp-seg-sub；手机 host 在标题行显示 */ .landlord-panel .lp-seg-dist { display: none; font-size: 11px; color: var(--dim); white-space: nowrap; margin-left: auto; flex-shrink: 0; } #landlord-panel-m { margin-bottom: 10px; } #landlord-panel-m .lp-hero { padding: 12px 16px 11px; } #landlord-panel-m .lp-hero-main { display: flex; align-items: center; gap: 14px; margin: 4px 0 7px; } #landlord-panel-m .lp-big { font-size: 25px; margin: 0; flex-shrink: 0; } #landlord-panel-m .lp-hero-bars { display: flex; flex-direction: column; flex: 1; min-width: 0; } #landlord-panel-m .lp-spark-bars { height: 32px; margin: 0 0 3px; } #landlord-panel-m .lp-spark-cap { margin: 0; text-align: right; } #landlord-panel-m .lp-rows { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; } #landlord-panel-m .lp-rows div { justify-content: flex-start; gap: 5px; } #landlord-panel-m .lp-seg { padding: 10px 16px; } #landlord-panel-m .lp-seg-sub { display: none; } #landlord-panel-m .lp-seg-dist { display: block; } #landlord-panel-m .lp-seg-t.has-dist { flex: 0 1 auto; } .landlord-panel .lp-hero { padding: 14px 16px 12px; background: linear-gradient(160deg, var(--accent-tint-strong), transparent 65%); border-bottom: 1px solid var(--line); } .landlord-panel .lp-lab { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); } .landlord-panel .lp-lab svg { width: 16px; height: 16px; } .landlord-panel .lp-big { font-family: var(--font-num); font-size: 26px; font-weight: 700; color: var(--accent-light); margin: 2px 0 8px; } .landlord-panel .lp-rows { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sub); } .landlord-panel .lp-rows div { display: flex; justify-content: space-between; align-items: baseline; } .landlord-panel .lp-rows b { font-weight: 600; color: var(--text); font-family: var(--font-num); font-size: 12.5px; } .landlord-panel .lp-g { color: var(--green) !important; } .landlord-panel .lp-r { color: var(--red) !important; } .landlord-panel .lp-seg { padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; } .landlord-panel .lp-seg:last-child { border-bottom: 0; } .landlord-panel .lp-seg:hover { background: var(--inset); } .landlord-panel .lp-seg-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); } .landlord-panel .lp-seg-t { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .landlord-panel .lp-seg-t b { color: var(--accent); } .landlord-panel .lp-seg-t svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } .landlord-panel .lp-chev { width: 14px; height: 14px; color: var(--dim); transition: transform var(--dur-quick, 150ms) var(--ease-out, ease); flex-shrink: 0; } .landlord-panel .lp-seg.open .lp-chev { transform: rotate(180deg); } .landlord-panel .lp-pbar { height: 5px; border-radius: 3px; background: var(--card3); overflow: hidden; margin: 8px 0 6px; } .landlord-panel .lp-pbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent-light)); border-radius: 3px; } .landlord-panel .lp-seg-sub { font-size: 11px; color: var(--dim); } .landlord-panel .lp-spark i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--card3); margin-left: 3px; } .landlord-panel .lp-spark i.on { background: var(--accent); } /* 收租履历（/panel-pick B · 2026-06-12）：近 6 月每月落袋迷你柱 + 「本月已收/连续收租」行；无履历时 hero 走 slim */ .landlord-panel .lp-hero.slim .lp-big { margin-bottom: 2px; } .landlord-panel .lp-spark-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin: 2px 0 4px; } .landlord-panel .lp-spark-bars i { flex: 1; border-radius: 2.5px 2.5px 0 0; opacity: .5; background: linear-gradient(180deg, var(--accent-2), rgba(197,148,64,0.22)); } .landlord-panel .lp-spark-bars i.cur { opacity: 1; background: linear-gradient(180deg, var(--accent-light), var(--accent-2)); } .landlord-panel .lp-spark-bars i.nil { opacity: .28; background: var(--fill-2); } /* ⭐ 白天：空月的底座得**真的看得见**（congyang 2026-08-15）。 JS 那边早就给零月留了 8% 高度，注释也写着「不然 4 个空月 ≈ 隐形」—— 但白天 `--fill-2`(alpha .085) × `opacity:.28` ≈ **有效 2.4% 压在近白卡上 = 还是隐形**， 于是只有一个月有收入时，整张图 = 5 条看不见的线 + 1 根实心块，读起来像渲染坏了而不是数据。 深色底上 2.4% 的白够看，白底上不够 —— 又一个「同一个值在两个主题里效果不对等」。 改成不透明的中性浅灰：看得出「6 个月、5 个月空着」，又不会跟有收入的金柱抢。 */ :root[data-theme="light"] .landlord-panel .lp-spark-bars i.nil { opacity: 1; background: rgba(24,28,36,0.13); } /* 可交互：点/悬停某月柱 → 高亮 + caption 显示该月数据（_lpBar* · 2026-06-21） */ .landlord-panel .lp-spark-bars i { cursor: pointer; transition: opacity var(--dur-quick, .14s) var(--ease-out, ease); } .landlord-panel .lp-spark-bars i.sel { opacity: 1 !important; box-shadow: 0 0 0 1px var(--accent-soft); } .landlord-panel .lp-spark-cap { font-size: 10px; color: var(--dim); margin-bottom: 7px; } .landlord-panel .lp-spark-cap.lp-cap-act { color: var(--accent-light); font-weight: 600; } .landlord-panel .lp-rank-list, .landlord-panel .lp-ms-list { margin-top: 9px; border-top: 1px dashed var(--line); padding-top: 7px; } .landlord-panel .lp-tier { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 12px; color: var(--dim); } .landlord-panel .lp-tier svg { width: 14px; height: 14px; } .landlord-panel .lp-tier.done { color: var(--sub); } .landlord-panel .lp-tier.cur { color: var(--text); } .landlord-panel .lp-tier.cur .lt-name { color: var(--accent); font-weight: 600; } .landlord-panel .lp-tier.tier-top .lt-ico { color: var(--accent); } /* 顶两档荣誉档 icon 镀金 */ .landlord-panel .lt-ico { display: flex; } .landlord-panel .lt-name { flex: 1; } .landlord-panel .lt-thr { font-family: var(--font-num); font-size: 11px; } .landlord-panel .lt-mark { font-size: 11px; color: var(--accent); min-width: 28px; text-align: right; } .landlord-panel .lp-fam { font-size: 10.5px; color: var(--dim); letter-spacing: .5px; margin: 6px 0 3px; } .landlord-panel .lt-thr { white-space: nowrap; } /* ── 房东等级 cosmetic tier（app.rank.js · §10.3 #4 身份爽感 · C 等级进度条）── */ .rank-ladder { background: var(--glass-grad), var(--glass); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow); border-radius: 14px; padding: 15px 18px 13px; margin-bottom: 10px; } .rank-ladder .rl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .rank-ladder .rl-cur { font-size: 15px; font-weight: 700; color: var(--accent-light); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .rank-ladder .rl-cur svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; } .rank-ladder .rl-next { font-size: 11.5px; color: var(--sub); text-align: right; } .rank-ladder .rl-next.rl-max { color: var(--accent); font-weight: 600; } .rl-track { position: relative; display: flex; justify-content: space-between; } .rl-track::before { content: ""; position: absolute; top: 13px; left: 13px; right: 13px; height: 3px; background: var(--card3); border-radius: 2px; } .rl-track .rl-fill { position: absolute; top: 13px; left: 13px; height: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent-light)); border-radius: 2px; } .rl-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 44px; } .rl-node .rn-dot { width: 27px; height: 27px; border-radius: 50%; background: var(--card2); border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--dim); } .rl-node .rn-dot svg { width: 15px; height: 15px; } .rl-node.done .rn-dot { background: var(--accent-2); border-color: var(--accent); color: #1a1208; } .rl-node.cur .rn-dot { background: var(--accent); border-color: var(--accent-light); color: #1a1208; box-shadow: 0 0 0 4px var(--accent-tint-strong); } .rl-node .rn-lab { font-size: 9.5px; color: var(--dim); white-space: nowrap; } .rl-node.done .rn-lab, .rl-node.cur .rn-lab { color: var(--sub); } .rl-node.cur .rn-lab { color: var(--accent-light); font-weight: 600; } /* 顶两档 $50k/$100k 荣誉档（Design 2 · 镀金光环）：已达/当前镀金+柔光，未解锁仍锁定灰只戴金环 */ .rl-node.tier-top .rn-dot { box-shadow: 0 0 0 2.5px var(--accent-tint-strong); } .rl-node.tier-top .rn-lab { color: var(--accent-light); font-weight: 600; } .rl-node.tier-top.done .rn-dot, .rl-node.tier-top.cur .rn-dot { background: linear-gradient(160deg, #F4D292, #E6B86A 45%, #C08F3D); border-color: var(--accent-light); color: #211402; box-shadow: 0 0 0 3px var(--accent-tint-strong), 0 0 16px 3px rgba(232,188,114,.5); } .rl-node.tier-top:not(.done):not(.cur) .rn-dot { border-color: var(--accent-soft); color: var(--accent-soft); } @media (max-width: 720px) { .rank-ladder { padding: 13px 15px 11px; } .rl-track { padding-bottom: 16px; } .rl-node { width: 36px; } /* 8 档窄屏收窄防溢出（更窄屏 flex-shrink 再兜底） */ .rl-node .rn-lab { display: none; } .rl-node.cur .rn-lab { display: block; position: absolute; top: 32px; } } /* 头像菜单等级行 */ .user-menu .um-rank-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .user-menu .um-rank { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); } .user-menu .um-rank svg { width: 14px; height: 14px; color: var(--accent-light); flex-shrink: 0; } /* 会员 plan 标签（房东等级行右侧）· Gold 金渐变 / Basic 灰 · 始终显示 */ .user-menu .um-tier { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .user-menu .um-tier svg { width: 10px; height: 10px; } .user-menu .um-tier.gold { color: #3a2c08; background: linear-gradient(145deg, #FFE7A8, #F5C451 55%, #C9962E); box-shadow: 0 1px 3px rgba(245,196,81,.4); } .user-menu .um-tier.basic { color: var(--sub); background: var(--card2); border: 1px solid var(--line); } /* ── 里程碑系统（app.milestones.js · 金币章风格 · 可折叠 2 族）── */ .rent-ms { margin: -4px 0 6px; } .ms-card { border: 1px solid var(--edge); border-radius: 14px; background: var(--glass-grad), var(--glass); box-shadow: var(--bevel), var(--shadow); overflow: hidden; } .ms-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; text-align: left; } .ms-head:hover { background: var(--card2); } .ms-head .mh-ico { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; } .ms-head .mh-title { font-size: 13.5px; font-weight: 700; } .ms-head .mh-count { font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-tint-strong); padding: 2px 8px; border-radius: 10px; } .ms-head .mh-spark { margin-left: auto; display: flex; gap: 3px; align-items: center; } .ms-head .mh-spark i { width: 6px; height: 6px; border-radius: 50%; background: var(--card3); } .ms-head .mh-spark i.on { background: var(--accent); } .ms-head .mh-chev { width: 17px; height: 17px; color: var(--sub); transition: transform var(--dur-quick, .16s) var(--ease-out, ease); flex: 0 0 auto; margin-left: 8px; } .ms-card.collapsed .mh-chev { transform: rotate(-90deg); } .ms-body { padding: 2px 14px 13px; } .ms-card.collapsed .ms-body { display: none; } .ms-sec { min-width: 0; } /* 桌面: 两族(新手上路 / 收租里程)并排成两列, 填满宽屏 + 更矮; 手机维持上下堆叠 */ @media (min-width: 720px) { .ms-card:not(.collapsed) .ms-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 22px; align-items: start; } } .ms-fam { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--sub); text-transform: uppercase; margin: 10px 2px 9px; display: flex; align-items: center; gap: 7px; } .ms-fam .fc { color: var(--accent); font-weight: 800; } .ms-fam .ms-reward-pill { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--accent); background: var(--accent-tint-strong); border: 1px solid var(--accent-soft); padding: 2px 8px; border-radius: 9px; letter-spacing: 0; text-transform: none; white-space: nowrap; } .rent-ms-row { display: flex; gap: 13px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; } .rent-ms-row::-webkit-scrollbar { height: 0; } .rent-ms-badge { flex: 0 0 auto; width: 78px; text-align: center; } /* 收租里程 10 个 · 方案 A 单行铺满: 桌面收租独显(非 multi)时 space-between 撑满整行消除右白 —— 空间够则铺开, 不够(窄屏/双族列)则自动 packed + 横滑, 不会裁切; 手机始终横滑 + 右缘渐隐提示 */ @media (min-width: 720px) { .ms-body:not(.ms-multi) .rent-ms-row { justify-content: space-between; } } /* 右缘渐隐从「手机上常开的静态遮罩」换成全站通用 `.scroll-fade`（2026-08-07）：静态版 在**行放得下时照样糊掉最后一个徽章**（= 骗用户右边还有）、划到底也不撤。现在由 app.scrollfade.js 按真实溢出量挂 class，放得下就完全不加，两端都会随滑动收放。 */ .rent-ms-badge.cta { cursor: pointer; } .rent-ms-coin { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center; position: relative; } .rent-ms-coin svg { width: 25px; height: 25px; } .rent-ms-badge.done .rent-ms-coin { background: radial-gradient(circle at 35% 30%, var(--accent-light), var(--accent-2)); box-shadow: 0 2px 9px rgba(var(--accent-rgb), .3), inset 0 1px 2px rgba(255,255,255,.32); border: 2px solid var(--accent-light); } .rent-ms-badge.done .rent-ms-coin svg { color: #3a2c10; } .rent-ms-badge.lock .rent-ms-coin { background: var(--card2); border: 2px dashed var(--border); } .rent-ms-badge.lock .rent-ms-coin svg { color: var(--dim); } .rent-ms-badge.cta .rent-ms-coin { background: var(--card2); border: 2px dashed var(--accent-soft); } .rent-ms-badge.cta .rent-ms-coin svg { color: var(--accent); } .rent-ms-coin .ring { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p,0) * 1%), transparent 0); } .rent-ms-coin .ringinner { position: absolute; inset: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card2); } .rent-ms-badge.latest .rent-ms-coin { animation: rentMsPulse 2s ease-in-out infinite; } @keyframes rentMsPulse { 0%,100% { box-shadow: 0 2px 9px rgba(var(--accent-rgb), .3), inset 0 1px 2px rgba(255,255,255,.32); } 50% { box-shadow: 0 2px 18px rgba(var(--accent-rgb), .6), inset 0 1px 2px rgba(255,255,255,.32); } } .rent-ms-lab { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.2; } .rent-ms-badge.lock .rent-ms-lab, .rent-ms-badge.cta .rent-ms-lab { color: var(--sub); } .rent-ms-sub { font-size: 10px; color: var(--dim); margin-top: 2px; } .rent-ms-badge.done .rent-ms-sub { color: var(--accent-2); } .rent-ms-badge.cta .rent-ms-sub { color: var(--accent); } .onb-done-ico { width: 60px; height: 60px; margin: 0 auto 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, var(--accent-light), var(--accent-2)); color: #3a2c10; } @media (prefers-reduced-motion: reduce) { .rent-ms-badge.latest .rent-ms-coin { animation: none; } } /* 占用 / 可用 split 显示 + 整 cell 可点跳账户设置 */ .summary .item .val.split { font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.05; } .summary .item .val.split .used { color: var(--text); } .summary .item .val.split .sep { color: var(--dim); margin: 0 4px; font-weight: 400; } .summary .item .val.split .avail { color: var(--accent-light); } .summary .item .val.split .avail.cta { color: var(--accent); cursor: pointer; } .summary .item.funds-cell { cursor: pointer; transition: background var(--dur-quick) var(--ease-out); border-radius: 8px; } /* hover 高亮只给真有指针悬停的设备（桌面）。触屏上 :hover 会在点击后“粘住”， 让整行押金格染成琥珀色直到点别处 —— 用户报「点了出现一整行黄色色条」。 */ @media (hover: hover) { .summary .item.funds-cell:hover { background: var(--accent-tint); } } /* ── 三区资金仪表（空置率 C 方案 · app.vacancy.js · 2026-06-13）──────── 微条内联在押金格；点击格子展开 .vac-expand 详情（inline 推开，非 modal —— 不涉 §12 PWA 铁律）。 实金渐变与 DS 主操作同值；其余全走 token（亮色主题自动跟随）。 */ .vac-mini { position: relative; display: inline-block; width: 64px; height: 7px; border-radius: 999px; background: var(--well); box-shadow: var(--well-sh); flex-shrink: 0; } .vac-mini i { position: absolute; top: 0; bottom: 0; border-radius: 999px; } .vac-mini .vm-rent { left: 0; background: var(--gold-grad); } /* 超预算（>100%）已降权：muted 实红、无斜纹、低权重（预算手动输入，极少真超） */ .vac-mini .vm-hot { background: rgba(var(--red-rgb), 0.40); } .vac-mini .vm-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--red); opacity: 0.9; } .summary .item .val.split .vac-pct { color: var(--accent-light); font-variant-numeric: tabular-nums; } /* 出租预算分母（占用 / 预算）：弱化，占用仍是主体 · nowrap 防「/ $2.2M」被拆两行 */ .summary .item .val.split .vac-denom { color: var(--dim); font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; } /* 出租率温标 zone 文字色（冷蓝闲置→金健康→琥珀接近满→红满载 · /vacancy-color-pick G） */ .summary .item .val.split .vac-pct.vz-idle { color: var(--slate); } .summary .item .val.split .vac-pct.vz-healthy { color: var(--accent-light); } .summary .item .val.split .vac-pct.vz-near { color: var(--amber); } .summary .item .val.split .vac-pct.vz-full { color: var(--red); } .vac-expand { border-top: 1px solid var(--line); margin-top: 11px; padding-top: 11px; cursor: default; } .vacx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .vacx-title { font-size: 12px; color: var(--sub); } .vacx-title b { color: var(--accent-light); font-size: 13px; } .vacx-title b.vz-idle { color: var(--slate); } .vacx-title b.vz-healthy { color: var(--accent-light); } .vacx-title b.vz-near { color: var(--amber); } .vacx-title b.vz-full { color: var(--red); } /* zone 状态 chip（在标题行内联，紧跟百分比） */ .vacx-chip { font-size: 11px; padding: 1px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; } .vacx-chip.vz-idle { color: var(--slate); background: rgba(142,166,200,0.13); } .vacx-chip.vz-healthy { color: var(--accent-light); background: var(--accent-tint); } .vacx-chip.vz-near { color: var(--amber); background: rgba(235,161,60,0.14); } .vacx-chip.vz-full { color: var(--red); background: rgba(var(--red-rgb),0.14); } .vacx-close { color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 8px; margin-left: auto; } .vacx-close:hover { color: var(--text); background: var(--fill); } .vacx-track { position: relative; height: 12px; border-radius: 999px; background: var(--well); box-shadow: var(--well-sh); overflow: hidden; } .vacx-track i { position: absolute; top: 0; bottom: 0; } .vacx-track .vx-rent { left: 0; border-radius: 999px 0 0 999px; background: var(--gold-grad); } /* 闲置时：空置区淡蓝衬底，暗示「房子空着待租」（呼应图例空置蓝点） */ .vacx-track .vx-vac { left: 0; background: rgba(107,182,255,0.13); } .vacx-track .vx-hot { background: rgba(var(--red-rgb), 0.40); border-radius: 0 999px 999px 0; } .vacx-track .vx-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--red); border-radius: 2px; opacity: 0.9; } /* 温标 zone 填充（mini bar + 展开条 + 图例点共用） */ .vm-rent.z-idle, .vx-rent.z-idle, .vacx-legend .vd.z-idle { background: var(--slate-grad); } .vm-rent.z-healthy, .vx-rent.z-healthy, .vacx-legend .vd.z-healthy { background: var(--gold-grad); } .vm-rent.z-near, .vx-rent.z-near, .vacx-legend .vd.z-near { background: var(--amber-grad); } .vm-rent.z-full, .vx-rent.z-full, .vacx-legend .vd.z-full { background: var(--red-grad); } .vacx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11px; color: var(--sub); } .vacx-legend b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } .vacx-legend .hot, .vacx-legend .hot b { color: var(--red); } .vacx-legend .vd { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; } .vacx-legend .vd.g { background: linear-gradient(160deg, #F4D292, #C08F3D); } .vacx-legend .vd.b { background: rgba(107,182,255,0.55); } .vacx-legend .vd.r { background: var(--red); } .vacx-legend .vacx-bgt { color: var(--dim); margin-left: auto; } .vacx-actions { display: flex; gap: 8px; margin-top: 10px; } .vacx-btn { border: 0; border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; font-family: inherit; background: var(--gold-grad); color: var(--gold-ink); font-weight: 600; } .vacx-btn.ghost { background: var(--fill-2); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--bevel); font-weight: 400; } .vacx-note { font-size: 10.5px; color: var(--dim); margin-top: 9px; line-height: 1.55; } /* 缺风险数据的保守估算提示 —— 琥珀「需要你补一下」，不是红色报错（数字仍可用，只是偏保守） */ .vacx-warn { font-size: 11px; color: var(--amber); margin-top: 9px; line-height: 1.5; } /* ═══ 策略资金分布（app.stratmix.js · /stratmix-pick 方案 B · 组合条 + 明细）═══ 挂载点 .strat-mix 同时用在右栏卡 #strat-mix 和 vac-expand 里的 #vac-strat-mix。 --sm1..7 = 组件私有金色明度阶（非 :root token · 同 DESIGN 附录 A 那 11 个组件私有 var 的处理）： 同一个金色相、按占比大小排的明度阶，与段宽冗余编码占比 —— 不是彩虹分类色（DESIGN §2.1/§7.3）。 */ .strat-mix { --sm1:#EFCE8C; --sm2:#E3B368; --sm3:#CF9A4C; --sm4:#B27F38; --sm5:#8E6530; --sm6:#6E4E26; --sm7:#57401F; } :root[data-theme="light"] .strat-mix { --sm1:#D9A84E; --sm2:#C7942F; --sm3:#B0812A; --sm4:#946B22; --sm5:#79571C; --sm6:#634917; --sm7:#4E3A12; } .sm-total { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 10px; } .sm-total b { font-family: var(--font-num); font-size: 17px; font-weight: 600; color: var(--text); } .sm-total span { font-size: 10.5px; color: var(--dim); } .sm-strip { display: flex; height: 12px; border-radius: 999px; overflow: hidden; box-shadow: var(--well-sh); margin: 0 0 12px; } .sm-strip i { height: 100%; min-width: 2px; } .sm-strip i + i { box-shadow: inset 1px 0 0 rgba(0,0,0,0.22); } .sm-leg { display: flex; flex-direction: column; gap: 8px; } .sm-li { display: flex; align-items: center; gap: 9px; } .sm-li .sm-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; } .sm-li .sm-nm { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm-li .sm-pc { font-family: var(--font-num); font-size: 12.5px; font-weight: 600; color: var(--text); width: 38px; text-align: right; } .sm-li .sm-mo { font-family: var(--font-num); font-size: 11.5px; color: var(--dim); width: 54px; text-align: right; } .sm-single { font-size: 12px; color: var(--sub); line-height: 1.5; } .sm-single b { color: var(--text); font-weight: 600; } .sm-est { font-size: 11px; color: var(--amber); margin-top: 10px; line-height: 1.5; } .sm-note { font-size: 10.5px; color: var(--dim); margin-top: 10px; line-height: 1.55; } /* 右栏卡：PWA / 手机（body.nav-enabled）隐藏，镜像 sector-strip；内容改挂进下面的 vac-expand */ body.nav-enabled .strat-mix-card { display: none !important; } /* vac-expand 里那份：只在 nav-enabled（手机 / PWA）显示；桌面宽屏走右栏卡、这里不重复。 无数据时 renderStratMix 会把它自身 inline display:none 收掉。 */ .vac-strat-mix { display: none; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); } body.nav-enabled .vac-strat-mix { display: block; } /* 小字行（sum-sub）：标签 + 数值同行内联，无分隔竖线 */ .summary .sum-sub .item { display: inline-flex; align-items: baseline; gap: 7px; padding: 2px 0; } .summary .sum-sub .item + .item::before { display: none; } .summary .sum-sub .item .lab { margin-bottom: 0; font-size: 10.5px; } .summary .sum-sub .item .val { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; } .summary .sum-sub .item .val.split { font-size: 13.5px; } .summary .sum-sub .item.funds-cell { /* 移动端：padding-left 必须 0，否则比兄弟项（padding:2px 0）右偏 ~6px、 与上方「收到权利金」左缘对不齐（2026-06-13 用户二次反馈）。水平 padding 给桌面 */ padding: 2px 0; align-items: center; } /* 桌面：贴卡片右缘（右下角）+ 恢复水平 padding（hover/点击目标呼吸感）。 ⚠️ margin-left:auto 必须 min-width 限定 — 否则它源序在「≤720 margin-left:0」之后、 同特异性 → 盖掉移动端左对齐，funds-cell 在手机上会漂到右边、与上方左对齐的指标错位。 */ @media (min-width: 721px) { .summary .sum-sub .item.funds-cell { margin-left: auto; padding: 2px 6px; } /* 贴右缘时 hint 浮层改右对齐防溢出 */ .summary .sum-sub .item.funds-cell.show-tip .hint { left: auto; right: 0; transform: none; } } /* Ticker 区顶部工具条 — 「行情」标题 + 时间范围全局切换 (分段药丸组) */ .ticker-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ticker-bar-title { font-size: 13px; font-weight: 600; color: var(--sub); } .rtg { display: inline-flex; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; } .rtg button { border: 0; background: transparent; color: var(--sub); font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--dur-quick, 150ms), color var(--dur-quick, 150ms); } .rtg button:hover { color: var(--text); } .rtg button.on { background: var(--accent-tint-strong); color: var(--accent-light); } @media (max-width: 720px) { .ticker-bar { margin-bottom: 10px; } .rtg button { padding: 5px 9px; font-size: 11px; } } /* Ticker 卡片 — 动态生成，含当日 sparkline */ .tickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 16px; } .tk-card { background: var(--glass-grad), var(--glass); border-radius: 12px; padding: 16px 18px; border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow); transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s var(--ease-out); display: block; } .tk-card:hover { border-color: var(--line-2); box-shadow: var(--bevel), var(--shadow-lg); } .tk-card .tk-ext { opacity: 0; transition: opacity 0.15s; font-size: 10px; color: var(--sub); margin-left: 6px; } .tk-card:hover .tk-ext { opacity: 0.7; } /* head 区是唯一可点击 → Yahoo Finance · sparkline 区留给 hover 价格交互 */ a.tk-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; text-decoration: none; color: inherit; cursor: pointer; } .tk-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .tk-head .name { font-size: 14px; color: var(--text); font-weight: 600; letter-spacing: 0.02em; } .tk-head .chg { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; margin-top: 3px; } .tk-head .px { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .sparkline { width: 100%; height: 48px; display: block; } /* Hover crosshair + price tooltip on sparkline */ .tk-spark-wrap { position: relative; width: 100%; touch-action: pan-y; } .tk-spark-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sub); opacity: 0; pointer-events: none; transition: opacity 100ms; } .tk-spark-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity 100ms; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); } .tk-spark-tip { position: absolute; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity 100ms; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } .tk-spark-wrap.show .tk-spark-cross, .tk-spark-wrap.show .tk-spark-dot, .tk-spark-wrap.show .tk-spark-tip { opacity: 1; } .tk-times { display: flex; justify-content: space-between; font-size: 10px; color: var(--sub); margin-top: 2px; } /* 移动端 ticker 价格卡压缩: chart 太占地方, 一屏才放 ~2 张 */ @media (max-width: 720px) { .tk-card { padding: 10px 12px; } .tk-head { margin-bottom: 4px; align-items: center; } .tk-head .name { font-size: 13px; } .tk-head .chg { font-size: 11px; margin-top: 1px; } .tk-head .px { font-size: 18px; } .sparkline { height: 28px; } .tk-times { display: none; } /* "当日 1 分钟线" 文字信息冗余, 移动端隐藏 */ } .tk-empty { text-align: center; color: var(--sub); font-size: 11px; padding: 12px; } .card { background: var(--card); border-radius: 12px; padding: 20px; margin-bottom: 14px; border: 1px solid var(--line); } .card h3 { font-size: 13.5px; color: var(--text); margin-bottom: 16px; font-weight: 600; letter-spacing: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .card h3 > svg.ico { color: var(--text); flex-shrink: 0; } /* 桌面固定 2 列（congyang 2026-08-07）：原来是 auto-fit minmax(340px)，1500px 主列上会排到 3 列 → 单卡只剩 ~460px，多腿卡（PMCC / 价差 / 铁鹰 / collar 的双腿并排 + 右侧关键数）在这个宽度下挤到 文字互相压盖。多腿卡是持仓里最宽的内容，列数按它定：2 列 ≈ 715px/卡，双腿并排才放得下。 minmax(0,1fr) 的 0 下限同 §12009 注释——不可压缩 chip 不会把 track 撑出容器。 ≤720 单列 / 600-720 两列的窄屏覆写在下面，未受影响。 */ /* 列模板走 `--pos-cols` 变量而不是直接写死 —— 账户分组开着的时候，真正需要排成多列的是 每个 section 里的 `.acct-group-body`（`#positions` 的网格项已经变成 section 本身了）。 自定义属性会往下继承，所以断点只在这一处维护，body 跟着变，不用把三个断点抄两遍 （抄两遍必然有一天只改了一处 → 某个屏宽下分组视图和不分组视图列数不一样）。 */ .pos-grid { --pos-cols: repeat(2, minmax(0, 1fr)); display: grid; grid-template-columns: var(--pos-cols); gap: 14px; } /* ── 持仓卡（重新设计）───────────────────────────────────────────── */ .pos { background: var(--card); border-radius: 12px; padding: 0; border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1); /* overflow: visible — 让 ⋯ 下拉菜单能溢出 */ overflow: visible; cursor: pointer; /* 整张卡可点击切换选中 */ -webkit-tap-highlight-color: transparent; /* 触屏点子按钮时不闪整卡灰色高亮 */ } /* hover 视觉只给真·鼠标设备 — 折叠屏(Samsung)触屏会假报 hover:hover 但 pointer:coarse， 不加 pointer:fine 过滤的话，点卡内按钮后 :hover 会黏住，整卡呈现「被选中」错觉 */ @media (hover: hover) and (pointer: fine) { .pos:hover { border-color: var(--line-2); background: rgba(255,255,255,0.012); } .pos:not(.unchecked):hover { box-shadow: 0 0 0 1px rgba(230,184,106,0.72); } } /* 选中态：accent 金色细描边（box-shadow 不和 status 边色冲突）— 持久态，不依赖 hover */ .pos:not(.unchecked) { box-shadow: 0 0 0 1px rgba(230,184,106,0.55); } /* 新加 / 改完持仓后短暂的 stub 卡 — 等后端真实价格回来前的视觉提示。 半透明遮罩盖住整张卡 + 居中"同步中"提示，明确告诉用户这张卡还没完全就绪。 遮罩 pointer-events:none → 纯视觉、不挡平仓/删除等按钮点击。 */ .pos--pending { position: relative; } .pos--pending::before { content: ''; position: absolute; inset: 0; background: rgba(15,15,17,0.58); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); border-radius: inherit; z-index: 2; pointer-events: none; } .pos--pending::after { content: var(--sync-stage-text, '⏳ 同步中...'); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--bg); background: var(--accent); padding: 9px 20px; border-radius: 999px; pointer-events: none; z-index: 3; white-space: nowrap; box-shadow: 0 6px 22px rgba(0,0,0,0.45); animation: pos-pending-pulse 1.5s ease-in-out infinite; } @keyframes pos-pending-pulse { 0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 0 rgba(var(--accent-rgb), 0.5); } 50% { box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 10px rgba(var(--accent-rgb), 0); } } :root[data-theme="light"] .pos--pending::before { background: rgba(255,255,255,0.64); } /* 刚加入的持仓左上角 "NEW" 角标 — 持仓多时帮用户快速定位新加的那张，~30s 后自动消失 */ .pos-new-flag { position: absolute; top: -8px; left: 14px; z-index: 4; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--bg); background: var(--accent); padding: 3px 9px; border-radius: 7px; pointer-events: none; box-shadow: 0 2px 9px rgba(var(--accent-rgb), 0.45); animation: pos-new-pop 0.32s var(--ease-spring, cubic-bezier(0.16,1,0.3,1)); } @keyframes pos-new-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pos-new-flag.fading { opacity: 0; transform: scale(0.85); transition: opacity .4s ease, transform .4s ease; } /* 子元素恢复合适 cursor（防止 input/textarea 继承 pointer）*/ .pos input:not([type="checkbox"]), .pos textarea, .pos select { cursor: auto; } .pos button { cursor: pointer; } .pos.unchecked { opacity: 0.4; } /* 状态描边整体着色，取代左边粗条 */ .pos.danger-status { border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.025); } .pos.danger-status:hover { border-color: rgba(248,113,113,.50); } .pos.warn-status { border-color: rgba(230,184,106,.28); background: rgba(230,184,106,.025); } .pos.warn-status:hover { border-color: rgba(230,184,106,.50); } .pos-row1 { display: flex; align-items: center; gap: 9px; padding: 14px 14px 0 14px; } .pos input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .pos-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; overflow: hidden; /* 内容溢出时裁掉, 避免压到右侧 .pos-status (接近行权) 标签 */ } .pos-name .ticker, .pos-name .strike, .pos-name .type-badge { flex-shrink: 0; } .pos-name .side-pill { flex-shrink: 1; min-width: 0; } .pos-name .ticker { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; cursor: pointer; /* 不用 cursor:copy, 那是个丑绿加号 */ border-radius: 4px; padding: 2px 4px; margin: -2px -4px; transition: background 0.18s, color 0.18s, transform 0.12s; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .pos-name .ticker:active { transform: scale(0.94); } @media (hover: hover) { .pos-name .ticker:hover { background: rgba(255,255,255,0.04); } } /* 复制态: 短暂 accent 高亮闪 (toast 在顶部, 这里只做触觉确认) */ .pos-name .ticker.ticker-copied { background: var(--accent-tint); color: var(--accent); } .pos-name .strike { font-size: 14.5px; font-weight: 600; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.1; } .pos-name .type-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; font-family: var(--font-num); line-height: 1; display: inline-flex; align-items: center; } .pos-name .type-badge.call { background: rgba(52,211,153,0.14); color: var(--green); } .pos-name .type-badge.put { background: rgba(230,184,106,0.16); color: var(--accent); } /* 多腿结构种类标(SPREAD/CONDOR/PUT/CALL/STRANGLE) — 与单腁 PUT/CALL 同款风格、中性配色(结构非方向,不用红绿) */ .pos-name .type-badge.spread-kind { background: rgba(255,255,255,0.08); color: var(--sub); } /* 价差卡方向标(BULL/BEAR/NEUTRAL) — 唯一带色的一段,与单腿 SELL/BUY 同维度: 看涨绿 / 看跌红 / 中性灰 */ .pos-name .type-badge.sk-dir { font-weight: 700; } .pos-name .type-badge.sk-dir.bull { background: rgba(52,211,153,0.16); color: var(--green); } .pos-name .type-badge.sk-dir.bear { background: rgba(248,113,113,0.16); color: var(--red); } .pos-name .type-badge.sk-dir.neutral { background: rgba(255,255,255,0.08); color: var(--sub); } /* ⋯ 菜单按钮（OCC 一键复制） */ .pos-more { background: transparent; border: 1px solid transparent; color: var(--sub); font-size: 16px; padding: 2px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; line-height: 1; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .pos-more:hover { background: var(--card2); color: var(--text); } .pos-more.copied { color: var(--green); background: rgba(74,222,128,0.10); } .pos-more.copied::after { content: ' ✓'; font-size: 11px; } :root[data-theme="light"] .pos-more.copied { background: rgba(22,163,74,0.10); } /* ⋯ 下拉菜单 */ .pos-more-wrap { position: relative; flex-shrink: 0; } .pos-more-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-lg); min-width: 176px; padding: 5px; z-index: 100; font-family: inherit; animation: posMenuIn .16s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); transform-origin: top right; } @keyframes posMenuIn { from { opacity: 0; transform: scale(0.96) translateY(-3px); } to { opacity: 1; transform: none; } } .pos-more-menu.open { display: block; } .pos-more-menu .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; color: var(--text); font-size: 12.5px; font-weight: 500; padding: 8px 11px; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; line-height: 1.3; transition: background 0.12s, color 0.12s; } .pos-more-menu .menu-item:hover { background: var(--card2); } /* 分隔线（破坏性动作「删除」前一道） */ .pos-more-menu .menu-sep { height: 1px; background: var(--line); margin: 4px 9px; } /* SVG 图标（item-icon）— 默认 sub 灰，hover 跟随 menu-item 文字色；尺寸固定 */ .pos-more-menu .menu-item .ico.item-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--sub); transition: color 0.12s; } .pos-more-menu .menu-item:hover .ico.item-icon { color: var(--text); } .pos-more-menu .menu-item.del:hover .ico.item-icon { color: var(--red); } /* emoji 老式 item-icon（其它菜单复用同 class）保持原字号 */ .pos-more-menu .menu-item > .item-icon:not(.ico) { font-size: 14px; flex-shrink: 0; line-height: 1; } .pos-more-menu .menu-item .item-label { flex: 1; white-space: nowrap; } .pos-more-menu .menu-item .item-meta { font-size: 9.5px; color: var(--sub); font-family: var(--font-num); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* pos-pct: 已平仓卡片仍用（顶部右侧已实现盈亏） */ .pos-pct { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; letter-spacing: -0.02em; } .pos-meta { padding: 5px 14px 0 39px; font-size: 11px; color: var(--sub); line-height: 1.4; font-variant-numeric: tabular-nums; } .pos-meta .now-arr { margin: 0 4px; opacity: 0.7; } .pos-meta .now-px { font-weight: 600; color: var(--text); } .pos-meta .now-px.now-down { color: var(--green); } .pos-meta .now-px.now-up { color: var(--red); } .pos-meta .pm-und-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--line-2); transition: color 0.12s, border-color 0.12s; } .pos-meta .pm-und-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .pos-meta .pm-und-dist { color: var(--sub); } /* 简洁模式专用：到期日 + 标的现价单行。完整模式由 .pos-meta 承载 → 默认隐藏防重复， 仅 data-density="simple" 显示（见简洁模式块）。复用 .pos-meta 的字号/留白/对齐。 */ .pos-meta-simple { display: none; padding: 5px 14px 0 39px; font-size: 11px; color: var(--sub); line-height: 1.4; font-variant-numeric: tabular-nums; } .pos-meta-simple .psm-px { color: var(--text); font-weight: 600; } .pos-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 14px; background: var(--inset); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pos-hero .stat { display: flex; flex-direction: column; gap: 2px; } .pos-hero .stat .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1; } .pos-hero .stat .l { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } /* 双列主体 (H 风格 · E+G 综合) */ .pos-body { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 5.5fr); gap: 16px; padding: 8px 14px 10px; } .pos-body-left { display: flex; flex-direction: column; padding-right: 12px; border-right: 1px solid var(--line); min-width: 0; } .pos-pnl-block { display: flex; flex-direction: column; gap: 2px; } .pos-pnl-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 1; } .pos-pnl-pct { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.85; } /* 时间价值收尽（深 ITM / 临近到期）— 收租视角 topline 文案，非 $0 大字 */ .pos-rent-done { font-size: 14px; font-weight: 700; color: var(--sub); letter-spacing: -0.01em; line-height: 1.15; } .pos-pnl-label { font-size: 9.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-top: 6px; } /* 收租 ⇄ 盈亏 视角切换（hero 区可点） */ .pos-body-left.pv-toggle { cursor: pointer; } .pos-pnl-big .ppd { font-size: 11px; font-weight: 600; color: var(--sub); letter-spacing: 0; } .pv-swap { margin-left: 5px; color: var(--sub); opacity: .65; font-size: 10px; } .pos-body-left.pv-toggle:hover .pv-swap { color: var(--accent); opacity: 1; } /* Theta 子块 — 完整模式才显示 */ .pos-theta-row { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; } .pos-theta-row .k { font-size: 9.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; } .pos-theta-row .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .pos-body-right { display: flex; flex-direction: column; gap: 9px; min-width: 0; } /* 距行权价温度条 (水平 layout) */ .pos-bar { display: flex; align-items: center; gap: 8px; } .pos-bar .label { font-size: 9.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; width: 32px; flex-shrink: 0; font-weight: 500; } .pos-bar .track-wrap { flex: 1; position: relative; min-width: 0; } .pos-bar .track { position: relative; height: 4px; border-radius: 3px; background: linear-gradient(to right, rgba(248,113,113,0.55) 0%, rgba(250,204,21,0.55) 28%, rgba(74,222,128,0.55) 62%); } :root[data-theme="light"] .pos-bar .track { background: linear-gradient(to right, rgba(220,38,38,0.55) 0%, rgba(245,158,11,0.55) 28%, rgba(22,163,74,0.55) 62%); } .pos-bar .marker { position: absolute; top: -3px; width: 10px; height: 10px; background: var(--card); border: 2px solid var(--text); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--bg); transform: translateX(-50%); transition: left 0.3s; } .pos-bar .value { font-size: 10.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; width: 90px; text-align: right; flex-shrink: 0; } .pos-bar .value.bad { color: var(--red); } .pos-bar .value.ok { color: var(--green); } /* 时间进度条 (水平 layout) */ .pos-time { display: flex; align-items: center; gap: 8px; } .pos-time .label { font-size: 9.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; width: 32px; flex-shrink: 0; font-weight: 500; } .pos-time .track-wrap { flex: 1; position: relative; min-width: 0; } .pos-time .track { height: 4px; border-radius: 3px; background: var(--card3); overflow: hidden; } .pos-time .fill { height: 100%; background: var(--accent); transition: width 0.3s; } .pos-time .value { font-size: 10.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; width: 90px; text-align: right; flex-shrink: 0; } /* Extras (损益曲线 + 笔记) — 完整模式才显示 */ .pos-extras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 0 14px 12px; margin-top: auto; } .pos-extras > * { min-width: 0; } /* 损益曲线展开时占满整行 — 让 SVG 用上完整卡片宽度 */ .pos-extras .pos-payoff[open] { grid-column: 1 / -1; } /* Pos busy overlay — 操作（平仓 / 编辑 / 删除 / 撤销）执行时的视觉反馈 */ .pos { position: relative; } .pos-busy-overlay { position: absolute; inset: 0; background: rgba(15,15,17,0.74); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: inherit; display: flex; align-items: center; justify-content: center; z-index: 12; opacity: 0; transition: opacity 0.16s ease-out; pointer-events: none; } .pos-busy-overlay.show { opacity: 1; pointer-events: auto; } .pos-busy-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 18px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.45); } .pos-busy-spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: pos-busy-spin 0.7s linear infinite; } .pos-busy-label { font-size: 12px; color: var(--text); font-weight: 500; letter-spacing: 0.02em; } @keyframes pos-busy-spin { to { transform: rotate(360deg); } } :root[data-theme="light"] .pos-busy-overlay { background: rgba(255,255,255,0.78); } /* Action row — 胶囊按钮 */ .pos-actions { display: flex; gap: 8px; align-items: center; padding: 8px 14px 12px; border-top: 1px solid var(--line); margin-top: auto; } .pos-actions .primary { background: var(--text); color: var(--card); border: none; font-size: 12px; font-weight: 600; padding: 6px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: opacity 0.15s, transform 0.18s cubic-bezier(0.16,1,0.3,1); } .pos-actions .primary:hover { opacity: 0.88; transform: scale(1.03); } .pos-actions .primary:active { transform: scale(0.96); } .pos-actions .ghost { background: transparent; border: 1px solid var(--line); color: var(--sub); font-size: 11.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .pos-actions .ghost:hover { color: var(--text); border-color: var(--line-2); background: var(--card2); } .pos-actions .del-btn { margin-left: auto; border-color: rgba(248,113,113,0.30); color: var(--red); } .pos-actions .del-btn:hover { border-color: var(--red); background: rgba(248,113,113,0.08); } :root[data-theme="light"] .pos-actions .del-btn { border-color: var(--edge); } :root[data-theme="light"] .pos-actions .del-btn:hover { border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.08); } /* legacy danger-btn 兼容 */ .pos-actions button.danger-btn { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.35); color: var(--red); } /* ── 被行权红条触发器 ── */ .pos-banner { margin: 0; padding: 9px 14px; background: linear-gradient(90deg, rgba(226,106,106,0.18), rgba(226,106,106,0.08)); border-radius: 11px 11px 0 0; border-bottom: 1px solid rgba(226,106,106,0.35); color: #F2A8A8; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.15s; overflow: hidden; /* 固定容纳 2 行(lh 1.5 → 36px)+ 上下 padding 18px ≈ 54px，取 56px 留 1-2px 字体行盒舍入余量： 红/绿条永远等高，文案/数值/中英繁文长短再变也不破并排卡的 header 对齐（单行靠 align-items:center 垂直居中）。 实测 340px 最窄卡宽下全部 banner × 三语 ≤ 2 行，2 行预留足够。 */ min-height: 56px; } .pos-banner:hover { background: linear-gradient(90deg, rgba(226,106,106,0.25), rgba(226,106,106,0.12)); } .pos-banner .pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: pos-banner-pulse 1.6s ease-in-out infinite; } .pos-banner .pb-text { flex: 1; min-width: 0; } .pos-banner .pb-arrow { color: var(--red); font-size: 14px; } @keyframes pos-banner-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } :root[data-theme="light"] .pos-banner { color: #B23A3A; } /* ── 到期作废"安全收租"绿条（A · 克制薄荷）— 红条镜像，覆盖红→绿 ── */ .pos-banner-safe { background: linear-gradient(90deg, rgba(63,221,156,0.20), rgba(63,221,156,0.08)); border-bottom-color: rgba(63,221,156,0.38); color: #9FEFCF; } .pos-banner-safe:not(.pos-banner-info):hover { background: linear-gradient(90deg, rgba(63,221,156,0.28), rgba(63,221,156,0.13)); } /* 绿色指示灯 = 呼吸（柔和淡入淡出 + 微光晕，比红条的脉冲更平缓）*/ .pos-banner-safe .pb-dot { background: var(--green); animation: pos-dot-breathe 2.8s ease-in-out infinite; } @keyframes pos-dot-breathe { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px 1px rgba(63,221,156,0.45); } 50% { opacity: 0.45; transform: scale(0.85); box-shadow: 0 0 0 0 rgba(63,221,156,0); } } .pos-banner-safe .pb-arrow { color: var(--green); } /* 信息版（盘前/盘中）— 不可点、低调（指示灯仍呼吸）*/ .pos-banner-safe.pos-banner-info { cursor: default; background: linear-gradient(90deg, rgba(63,221,156,0.16), rgba(63,221,156,0.06)); border-bottom-color: rgba(63,221,156,0.30); color: #8DEBC4; } :root[data-theme="light"] .pos-banner-safe { color: #0B7A52; } :root[data-theme="light"] .pos-banner-safe.pos-banner-info { color: #0B7A52; } /* ── 提前行权预警琥珀条（congyang 2026-08-07 经 /assign-pick 拍板 A）── 红/绿之外的第三色档： 红 = 已经/即将被行权（到期日，已发生）· 绿 = 到期作废安全 · 琥珀 = 还没发生但可能提前发生。 必须和红条分得开，否则用户看到就以为已经被叫走了。指示灯用绿条那条更平缓的呼吸（不是红条的脉冲）。 */ .pos-banner-warn { background: linear-gradient(90deg, rgba(235,161,60,0.19), rgba(235,161,60,0.07)); border-bottom-color: rgba(235,161,60,0.36); color: #F3C689; } .pos-banner-warn:hover { background: linear-gradient(90deg, rgba(235,161,60,0.27), rgba(235,161,60,0.12)); } .pos-banner-warn .pb-dot { background: var(--amber); animation: pos-dot-breathe 2.8s ease-in-out infinite; } .pos-banner-warn .pb-arrow { color: var(--amber); } :root[data-theme="light"] .pos-banner-warn { color: #8A5A0C; } /* 列表模式压缩细条 —— 列表行本来完全没有 banner 概念（卡片 banner 只在卡片模式渲染）， 行高只加 ~26px；卡片 banner 的 min-height:56px 在列表里会把行撑爆，故单独一套。 */ /* ⚠️ congyang 2026-08-14（截图「今日到期这个模块…让用户能更直觉的看出来和哪一行是一体的」）： 细条本来就属于紧挨着它**下面**那一行，但在列表里读成了「分组标题」。四个成因，三个在这里改： ① 细条自己的 border-bottom 是附近最重的一条线，而且**方向切反了** —— 它把细条和自己那行切开。 卡片模式里这条线是「卡内分隔」（外框兜着），列表里没有外框兜 → 就成了分界线。**故去掉。** ② 上下等距 → 靠距离判断不出归属：改由 .pos-row 那侧加 padding-top 做「上疏下密」（见下方 :has 段）。 ③ 只有细条被染色、自己那行是白的 → 细条与行改用**同一块同色底**（同上）。 ④ 手机横滑之后细条整条滑走（#positions 单容器横滚，标的列 sticky 钉住、width:max-content 的 细条不钉）—— 滑到盈亏那几列时最该看见的提醒反而没了。→ 细条**内容**做 sticky（见下）。 圆角也去掉：11px 圆角是卡片时代留下的，现在细条与行共用一块底、通栏平铺，圆角只会切出小台阶。 ⚠️ 归属**不用左侧色轨**（congyang 明确：「A，但我不喜欢左轨的设计」）——靠共同区域 + 距离两条线索。 */ .prl-banner { display: flex; align-items: center; gap: 7px; padding: 6px 13px 5px 14px; /* 左 14 = 与 .prl-id 的 padding-left 同 → 指示灯和 ticker 左缘对齐 */ font-size: 11px; font-weight: 500; background: linear-gradient(90deg, rgba(235,161,60,0.16), rgba(235,161,60,0.05)); color: #F3C689; cursor: pointer; transition: background var(--dur-quick) var(--ease-out); } .prl-banner:hover { background: linear-gradient(90deg, rgba(235,161,60,0.24), rgba(235,161,60,0.09)); } /* 横滑保命（成因 ④）：细条盒子跟着行一起滚，但**内容**钉在可视边 —— left 值 = 各自的自然位置 （14 / 14+6+7），所以不横滑时位置零变化，横滑时才开始钉。箭头钉右边，顺带修好「横滑后箭头看不见」。 */ .prl-banner .pb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; animation: pos-dot-breathe 2.8s ease-in-out infinite; position: sticky; left: 14px; } /* ⚠️ `flex: 0 1 auto` 不是 `flex: 1` —— sticky **推不动一个几乎撑满容器的盒子**（它被自己的 containing block 夹住），第一版还写着 flex:1 时横滑之后只剩一个孤零零的指示灯、文字整条不见了 （实测截到）。让盒子收成文字实宽，sticky 才有位移余地；箭头改用 margin-left:auto 顶到最右， 和原来 flex:1 撑开的效果一样。窄容器下仍靠 min-width:0 + ellipsis 收长文案。 */ .prl-banner .pb-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 27px; } .prl-banner .pb-arrow { color: var(--amber); flex-shrink: 0; margin-left: auto; position: sticky; right: 13px; } :root[data-theme="light"] .prl-banner { color: #8A5A0C; } /* 红 / 绿两档（琥珀是基础态）—— 与卡片 banner 同一组语义色： 红 = 到期日已 ITM，接货/被叫走已成定局 · 绿 = 到期作废安全落袋 · 琥珀 = 还没发生但可能提前发生。 只覆写颜色，几何全继承 .prl-banner（细条 26px）。 */ .prl-banner-assign { background: linear-gradient(90deg, rgba(var(--red-rgb),0.17), rgba(var(--red-rgb),0.05)); color: #F5A3A3; } .prl-banner-assign:hover { background: linear-gradient(90deg, rgba(var(--red-rgb),0.25), rgba(var(--red-rgb),0.09)); } .prl-banner-assign .pb-dot { background: var(--red); animation: pos-banner-pulse 1.6s ease-in-out infinite; } .prl-banner-assign .pb-arrow { color: var(--red); } :root[data-theme="light"] .prl-banner-assign { color: #A32020; } .prl-banner-safe { background: linear-gradient(90deg, rgba(63,221,156,0.16), rgba(63,221,156,0.05)); color: #8DEBC4; } .prl-banner-safe:hover { background: linear-gradient(90deg, rgba(63,221,156,0.24), rgba(63,221,156,0.09)); } .prl-banner-safe .pb-dot { background: var(--green); } .prl-banner-safe .pb-arrow { color: var(--green); } :root[data-theme="light"] .prl-banner-safe { color: #0B7A52; } /* 信息版（盘前/盘中）— 不可点：价格还可能掉头回 ITM，不该给「已经落袋」的手感 */ .prl-banner.prl-banner-info { cursor: default; } .prl-banner.prl-banner-info:hover { background: linear-gradient(90deg, rgba(63,221,156,0.16), rgba(63,221,156,0.05)); } /* ⚠️ 这里以前有一条「多条预警叠同一行时只有最上面那条留圆角」的规则 —— 现在细条本身就没有圆角了 （见上方 .prl-banner 的说明），那条规则成了死代码，删掉。要是哪天圆角回来了，它也要一起回来。 */ /* ── 细条与它那一行 = 同一块（congyang 2026-08-14 拍板 A · 去掉左轨版）────────────── 成因 ②③ 在这里修：整行（含两个 sticky 冻结列）铺一层同色底，细条与摘要行之间没有任何分界， 再给细条上方留 5px —— 上疏（相邻行是 1px 分隔线 + 5px 留白）下密（细条紧贴自己那行）。 ⚠️ 冻结列 .prl-id / .prl-acts 是**不透明**实底（--list-froz-bg）会盖住行底 → 必须各自也铺一层， 否则染出来的是「中间一条带色、两头是白的」。用 background-image 叠在实底之上（不是换 background 简写：那会把实底一起冲掉）。 ⚠️ 同色 = 与细条自己的 background 用**同一组字面色**（绿/琥珀是字面 rgb、红走 --red-rgb）—— 跟着 .prl-banner-* 走，别换成别的绿，两块底一旦不同色就前功尽弃。 ⚠️ 用 :has() 而不是在 JS 里加 class：细条挂不挂由 _isLikelyAssigned / _isLikelyExpireSafe / _earlyAssignRisk 三个判据决定，写死一份 class 就多一处会漂的真相。:has() 不支持时只是没这层 底色（细条照常在）= 优雅降级。 */ [data-density="simple"] .pos-row:has(> .prl-banner) { --band-tint: rgba(235,161,60,0.055); /* 琥珀 = 基础态，与 .prl-banner 同 */ padding-top: 5px; background-image: linear-gradient(var(--band-tint), var(--band-tint)); } [data-density="simple"] .pos-row:has(> .prl-banner-safe) { --band-tint: rgba(63,221,156,0.055); } [data-density="simple"] .pos-row:has(> .prl-banner-assign) { --band-tint: rgba(var(--red-rgb),0.055); } [data-density="simple"] .pos-row:has(> .prl-banner) .prl-id, [data-density="simple"] .pos-row:has(> .prl-banner) .prl-acts, [data-density="simple"] .pos-row:has(> .prl-banner) .prl-drawer { background-image: linear-gradient(var(--band-tint), var(--band-tint)); } /* ── 接货复盘卡「事实行」（早行权：被指派张数 + 被行权日期 · 拍板 3A 放顶部）── 放顶部是因为改张数会实时改下面每一行数字（租金/总账/vs 裸持/合计）—— 先确认发生了什么再读账，读到哪行都可信。 */ .ar-facts { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 13px; margin: 0 0 6px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--well-sh); } .ar-fact { flex: 1 1 130px; min-width: 0; } .ar-fact label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; color: var(--dim); text-transform: uppercase; margin-bottom: 5px; } /* 张数格 —— 度量对齐日历按钮 .cal-btn（well 介质 / radius 12 / min-height 38）， 两格才像一对；日期格不套 .ctl，直接交给 app.cal.js 换成 .cal-btn（它自带这套外观， 再包一层 .ctl 就又是两层框了）。 */ .ar-fact .ctl { display: flex; align-items: center; gap: 6px; box-sizing: border-box; background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); padding: 0 8px; min-height: 38px; } /* app.cal.js 缺席时的原生 date 降级：全站 `#assigned-modal input` 已给 well 外观， 这里只补度量，让它和张数格等高 */ .ar-fact > input[type=date] { width: 100%; box-sizing: border-box; padding: 7px 10px; min-height: 38px; color: var(--text); font-family: var(--font-num); font-size: 13px; outline: none; } /* 张数那格收窄 + 数字居中 —— 否则 input flex:1 把 −/+ 顶到两端，中间一大片空 */ .ar-fact .ctl.stepper { max-width: 168px; } .ar-fact .ctl.stepper input { text-align: center; } /* 已有自绘 −/+，藏掉原生微调箭头（WebKit 上尤其显眼）— 同 .close-form / #coach-modal 做法 */ .ar-fact .ctl input::-webkit-outer-spin-button, .ar-fact .ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ar-fact .ctl input[type=number] { -moz-appearance: textfield; appearance: textfield; } .ar-fact .ctl .step { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--fill-2); color: var(--sub); display: grid; place-items: center; cursor: pointer; font-size: 14px; line-height: 1; user-select: none; flex-shrink: 0; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .ar-fact .ctl .step:hover { background: var(--accent-tint-strong); color: var(--accent-light); } /* ⚠️ 必须带 #assigned-modal 前缀：app.css 后面那条 `#assigned-modal input:not([type=checkbox])` 给 modal 内所有 input 套了 well 凹面（bg + border + radius:12px + inset shadow）， **id 特异性压过纯 class**，不盖住就会在 .ctl 外框里再画一层内框 （congyang 2026-08-07 截图「多了一层输入框」）。外框已经是 .ctl 在画，input 本身要全裸。 */ #assigned-modal .ar-fact .ctl input, .ar-fact .ctl input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; color: var(--text); font-family: var(--font-num); font-size: 13px; outline: none; } .ar-fact .hint { font-size: 10.5px; color: var(--dim); margin-top: 4px; line-height: 1.45; } .ar-fact .hint b { color: var(--amber); font-weight: 600; } /* 平仓表单底部引导：「不是买回，是被行权？」—— 防用户习惯性拿平仓凑，记错 reason */ .cf-hand { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--sub); } .cf-hand a { color: var(--amber); font-weight: 600; cursor: pointer; border-bottom: 1px dashed rgba(235,161,60,0.5); transition: color var(--dur-quick) var(--ease-out); } .cf-hand a:hover { color: var(--accent-light); } :root[data-theme="light"] .cf-hand a { color: #8A5A0C; border-bottom-color: rgba(138,90,12,0.45); } /* ── 被行权复盘 modal（账本叙事布局）── */ .ar-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ar-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(230,184,106,0.14); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .ar-title { font-size: 16px; font-weight: 600; margin: 0 0 3px; color: var(--text); } .ar-sub { color: var(--sub); font-size: 12px; margin: 0; line-height: 1.4; } .ar-close { margin-left: auto; cursor: pointer; color: var(--sub); font-size: 22px; line-height: 1; padding: 0 4px; align-self: flex-start; } .ar-line { padding: 9px 0; font-size: 13px; color: var(--text); border-bottom: 1px dashed var(--line); line-height: 1.6; } .ar-line:last-of-type { border-bottom: 0; } .ar-line .ar-who { color: var(--sub); font-size: 11px; margin-right: 8px; min-width: 48px; display: inline-block; } .ar-line b { font-weight: 600; } .ar-line b.g { color: var(--green); } .ar-line b.r { color: var(--red); } .ar-line b.a { color: var(--accent); } .ar-takeaway { background: rgba(82,168,121,0.10); border: 1px solid rgba(82,168,121,0.28); border-radius: 10px; padding: 11px 13px; margin-top: 14px; color: var(--green); font-size: 13px; line-height: 1.5; } .ar-takeaway.warn { background: rgba(240,178,84,0.10); border-color: rgba(240,178,84,0.30); color: #E6A140; } .ar-takeaway b { font-weight: 700; } .ar-note { margin-top: 14px; padding: 11px 13px; background: var(--card2); border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--sub); } .ar-note input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; /* 防被全局 #assigned-modal / .review-modal input 归零 */ width: 17px; height: 17px; flex: 0 0 auto; margin: 0; background: none; border: none; border-radius: 0; box-shadow: none; /* 清掉 well 残留 */ accent-color: var(--accent); cursor: pointer; } .ar-note label { cursor: pointer; flex: 1; } .ar-note label b { color: var(--text); font-weight: 500; } .ar-confirm-hint { margin-top: 12px; font-size: 11.5px; line-height: 1.55; color: var(--sub); } .ar-confirm-hint b { color: var(--text); font-weight: 600; } .ar-confirm-hint .g { color: var(--green); font-weight: 600; } .ar-foot { margin-top: 16px; display: flex; gap: 10px; } /* 琉璃 2.0：取消 = 玻璃胶囊 / 结账 = 实金胶囊（同 QA-5 动作钮配方） */ .ar-foot button { flex: 1; padding: 11px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); background: var(--fill-2); color: var(--text); cursor: pointer; font-family: inherit; transition: transform var(--dur-quick) var(--ease-spring), filter var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .ar-foot button:not(.primary):hover { background: var(--accent-tint-strong); color: var(--accent-light); border-color: rgba(var(--accent-rgb), 0.45); } .ar-foot button.primary { background: var(--gold-grad); color: var(--gold-ink); border: none; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); } .ar-foot button.primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .ar-foot button:active { transform: scale(0.98); } @media (max-width: 600px) { .ar-foot { flex-direction: column-reverse; } } /* ── 方案 B 新增：side-pill / 4 关键数侧块 / note callout / 全宽 meters ── */ .pos-name .side-pill { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-family: var(--font-num); line-height: 1; background: rgba(230,184,106,0.16); color: var(--accent); display: inline-flex; align-items: center; } /* ── 多头(买方/LEAPS) 持仓 · 阶段一 ── */ .pos-name .side-pill.buy { background: rgba(107,182,255,0.18); color: #6BB6FF; } .pos.is-long { border-color: rgba(107,182,255,0.35); } .pos.is-long:hover { border-color: rgba(107,182,255,0.55); } .pos-long-note { margin: 10px 14px 0; font-size: 11px; color: #6BB6FF; background: rgba(107,182,255,0.08); border: 1px solid rgba(107,182,255,0.22); border-radius: 7px; padding: 7px 9px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; } .pos-long-note .ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; } .pos-long-stats { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 11px 14px 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: 11.5px; } .pos-long-stats .lst { display: flex; flex-direction: column; gap: 2px; } .pos-long-stats .lst .k { color: var(--sub); font-size: 10.5px; } .pos-long-stats .lst .v { font-weight: 700; font-variant-numeric: tabular-nums; } .pos-long-stats .lst .v.g { color: var(--green); } .pos-long-stats .lst .v.r { color: var(--red); } .pos-long-stats .lst .v.b { color: #6BB6FF; } /* 右侧 4 行关键数（替代原 pos-body-right 的 bars+Greeks） */ .pos-stats-side { display: flex; flex-direction: column; font-size: 11.5px; min-width: 0; } .pos-stats-side .pss-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3.5px 0; border-bottom: 1px solid var(--line); gap: 8px; } .pos-stats-side .pss-row:last-child { border-bottom: none; } .pos-stats-side .k { color: var(--sub); font-size: 10.5px; letter-spacing: 0.01em; min-width: 0; } .pos-stats-side .v { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: -0.01em; text-align: right; white-space: nowrap; } .pos-stats-side .v.g { color: var(--green); } .pos-stats-side .v.r { color: var(--red); } .pos-stats-side .v.amber { color: var(--accent); } .pos-stats-side .v.dim { color: var(--dim); } /* note callout — 浮亏点醒 / 状态总结 */ .pos-note { margin: 0 14px 10px; padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.55; color: var(--text); } .pos-note.good { background: rgba(52,211,153,0.10); } .pos-note.warn { background: rgba(230,184,106,0.12); } .pos-note.info { background: rgba(96,165,250,0.12); } :root[data-theme="light"] .pos-note.good { background: rgba(22,163,74,0.10); } :root[data-theme="light"] .pos-note.warn { background: rgba(212,165,116,0.16); } :root[data-theme="light"] .pos-note.info { background: rgba(37,99,235,0.10); } .pos-note b.g { color: var(--green); font-weight: 600; } .pos-note b.r { color: var(--red); font-weight: 600; } .pos-note b.amber { color: var(--accent); font-weight: 600; } .pos-note b.blue { color: #60A5FA; font-weight: 600; } /* 全宽 meters: bars + Greeks（原 pos-body-right 内的内容外移到独立 block） */ .pos-meters { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; } /* ── B 压缩 · 持仓卡瘦身（仅标准短仓卡） ───────────────────── */ /* 行权 + 时间 两条进度条并一行；内容窄于 ~300px 自动回落单列 */ .pos-meters .bars2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 16px; } .pos-meters .bars2 .pos-bar .value, .pos-meters .bars2 .pos-time .value { width: auto; flex: 0 0 auto; } /* θ 在完整模式隐藏（右栏「每日 θ 收敛」已有同值）；简洁模式右栏隐藏时回显 */ .pos-stats .stat.full-hide { display: none; } [data-density="simple"] .pos-stats .stat.full-hide { display: inline-flex; } /* 次要 greeks 红绿语义全卡统一（CARD_PLAYBOOK 规则 #5）：Δ 蓝 · θ 收敛(≥0)绿/衰减(<0)红。 .green/.red 已是全局 !important 类；Δ 蓝复用 LEAP 卡同色 #6BB6FF。 */ .pos-stats .stat strong.dlt { color: #6BB6FF; } /* verdict(note) + 出场建议 合并成一个连体 box（外框一道边，中间一道分隔线） */ .pos-advice { margin: 0 14px 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .pos-advice .pos-note { margin: 0; border-radius: 0; padding: 7px 11px; line-height: 1.45; } .pos-advice .exit-plan.compact { margin: 0; border: none; border-radius: 0; padding: 7px 11px; border-top: 1px solid var(--line); } /* 损益曲线 + 我该怎么办 收进操作行（省 .pos-extras 一整行）。 按钮排成整齐网格：上行 损益曲线 + 我该怎么办?（各半），下行 平仓/Roll/编辑/删除（均分）。 桌面 auto-fit 多列时卡片可能很窄（min 340px）→ 换行也成组，绝不让「删除」孤零零一行（桌面/手机一致）。 */ .pos-actions--merged { flex-wrap: wrap; gap: 6px; } .pos-actions--merged > * { min-width: 0; } .pos-actions--merged .payoff-toggle { order: 1; flex: 1 1 calc(50% - 3px); } .pos-actions--merged .coach-btn { order: 2; flex: 1 1 calc(50% - 3px); } .pos-actions--merged .primary { order: 3; flex: 1 1 calc(25% - 5px); } .pos-actions--merged .roll-btn { order: 4; flex: 1 1 calc(25% - 5px); } .pos-actions--merged .edit-btn { order: 5; flex: 1 1 calc(25% - 5px); } .pos-actions--merged .del-btn { order: 6; flex: 1 1 calc(25% - 5px); } /* 损益曲线 = 留在按钮组/extras 里的 toggle（位置不变），图表是其后独立全宽抽屉 .payoff-drawer，从下方撑开。 视觉样式不限定 --merged，标准短仓卡 + 买方长仓卡 共用同一套。 */ .payoff-toggle { background: transparent; border: 1px solid rgba(var(--accent-rgb), 0.30); color: var(--sub); font-size: 11.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; transition: all 0.15s; } .payoff-toggle .ico { width: 14px; height: 14px; color: var(--accent); } .payoff-toggle:hover { background: var(--card2); color: var(--text); } .payoff-toggle.is-open { background: var(--card2); border-color: rgba(var(--accent-rgb), 0.55); color: var(--text); } .payoff-drawer { margin: 2px 14px 12px; /* --fill（白 4.5% overlay）而不是 --card2：列表抽屉里它和左栏「期权经济」.opt-strip 并排， .opt-strip 用 --fill(中性 B/R≈1.27)、这里用 --card2(偏蓝 B/R≈1.59) → 同一个抽屉里两块底 一冷一中，congyang 2026-08-07 指「损益曲线卡去蓝」。用半透明中性 overlay 还有个好处： 它跟着所在面的底走（hover 抬亮时自动一起抬），--card2 是固定色、抬不动。 */ background: var(--fill); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px 12px; animation: payoffDrawerIn var(--dur-normal, .22s) var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } .payoff-drawer[hidden] { display: none; } @keyframes payoffDrawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .pos-actions--merged .coach-btn { width: auto; padding: 5px 12px; border-radius: 999px; } /* 删除按钮的位置/换行由上方 --merged 网格统一处理（order:6 + 均分）， 不再 margin-left:auto 推到最右 → 窄卡换行不会让「删除」孤零零一行。 */ /* ⚠️ 旧「简洁模式」CSS（压缩完整卡局部）已于 2026-06-27 列表模式打磨时全删： simple 模式现永远渲染 renderPositionRow（新 .pos-row），完整 .pos 卡在 simple 下不再渲染， 这些 `[data-density="simple"] .pos .<完整卡内件>` 规则要么死代码、要么 leak 进新行/新抽屉 （新行也带 .pos class）→ 曾让列表抽屉里的「损益曲线」「4 关键数」「出场建议」全被 display:none。 列表模式完整样式在下方「列表模式」块（.prl-* 自包含）。 */ /* Inline edit-form — 改 contracts / sell_price / trade_date */ .edit-form { display: none; padding: 14px; border-top: 1px solid var(--line); background: var(--card2); flex-direction: column; gap: 10px; } .edit-form.open { display: flex; } .edit-form .ef-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .edit-form .ef-title { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: -0.005em; } .edit-form .ef-hint { font-size: 10.5px; color: var(--sub); } .edit-form .ef-row { display: grid; /* 张数/价格收窄，建仓日给足宽（否则日期被截成 2026-06-2…） */ grid-template-columns: 0.66fr 0.86fr 1.4fr; gap: 8px; } @media (max-width: 480px) { .edit-form .ef-row { grid-template-columns: minmax(0, 1fr); } } /* ── 分批次编辑 (lots)：同合约不同建仓日/价格逐批改 · 卡面汇总 ── */ .edit-form .ef-lots { display: flex; flex-direction: column; gap: 7px; } .edit-form .ef-lots-head, .edit-form .ef-lot-row { display: grid; grid-template-columns: 0.66fr 0.86fr 1.4fr 30px; gap: 8px; align-items: center; } .edit-form .ef-lots-head { margin-bottom: -2px; } .edit-form .ef-lots-head .ef-label { padding: 0 2px; } .edit-form .ef-lot-row input { width: 100%; } .edit-form .ef-lot-del { width: 30px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--line); border-radius: 8px; color: var(--sub); cursor: pointer; } .edit-form .ef-lot-del .ico { width: 15px; height: 15px; } .edit-form .ef-lot-del:not([disabled]):hover { color: var(--red); border-color: var(--red); transform: scale(1.05); } .edit-form .ef-lot-del:not([disabled]):active { transform: scale(0.95); } .edit-form .ef-lot-del[disabled] { opacity: 0.3; cursor: default; } .edit-form .ef-addlot { align-self: flex-start; margin-top: 1px; background: transparent; border: 1.5px dashed var(--line); color: var(--sub); border-radius: 8px; padding: 5px 12px; font-size: 11.5px; font-weight: 600; } .edit-form .ef-addlot:hover { color: var(--text); border-color: var(--accent-soft); transform: none; } .edit-form .ef-lots-sum { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; padding: 1px 2px; } .edit-form label { display: flex; flex-direction: column; gap: 3px; } .edit-form .ef-label { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } .edit-form input { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 5px; padding: 7px 10px; font-size: 13.5px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; width: 100%; } .edit-form input:focus { outline: none; border-color: var(--accent-soft); } .edit-form .ef-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; } .edit-form button { padding: 6px 14px; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; border: none; font-family: inherit; letter-spacing: -0.005em; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .edit-form .ef-save { background: var(--accent); color: #0A0A0B; } .edit-form .ef-save:hover { background: var(--accent-light); transform: scale(1.04); box-shadow: 0 4px 14px rgba(230,184,106,0.30); } .edit-form .ef-save:active { transform: scale(0.96); box-shadow: none; } .edit-form .ef-cancel { background: transparent; color: var(--sub); border: 1.5px solid var(--line); } .edit-form .ef-cancel:hover { color: var(--text); border-color: var(--line-2); transform: scale(1.03); } .edit-form .ef-cancel:active { transform: scale(0.97); } .edit-form .ef-note { font-size: 10.5px; color: var(--sub); line-height: 1.5; padding-top: 4px; border-top: 1px dashed var(--line); } /* edit 按钮 styling — 跟其他 pos-actions 按钮一致 */ .pos-actions .edit-btn { background: transparent; color: var(--sub); border: 1.5px solid var(--line); font-size: 11px; } .pos-actions .edit-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(230,184,106,0.06); transform: scale(1.04); } /* Inline close-form (Candidate C: context + 算式 strip) */ .close-form { display: none; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(230,184,106,0.06); } .close-form.open { display: block; } .close-form .cf-ctx { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed var(--line); font-size: 11.5px; } .close-form .cf-ctx-main { font-weight: 600; color: var(--text); font-size: 12.5px; } .close-form .cf-ctx-divider { color: var(--dim); } .close-form .cf-ctx-meta { color: var(--sub); } .close-form .cf-ctx-sold { color: var(--accent); font-weight: 500; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .close-form .cf-row { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .close-form .cf-field { display: flex; flex-direction: column; gap: 3px; } .close-form .cf-field label { font-size: 10px; color: var(--sub); font-weight: 500; letter-spacing: 0.03em; } .close-form .cf-input-wrap { display: flex; align-items: center; gap: 6px; } .close-form input { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px 10px; font-size: 13.5px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; width: 86px; } .close-form input.cf-contracts { width: 50px; } .close-form input.cf-date { width: auto; min-width: 140px; color-scheme: light dark; } .close-form .cf-field--date { flex: 0 0 auto; } /* 玻璃日历（app.cal.js）把原生 date input 换成 .cal-btn trigger（复用推荐面板 well 外观）。 close-form 无 .rec-form 祖先 → 命中通用兜底 .cal-btn（更深 well 底 / 12px 圆角 / inset 阴影 / min-height 38px）→ 日期框比左侧「买回价 / 张数」两栏更圆更深更高、对不齐（2026-07-24 用户截图）。 ① 压回和 .close-form input 一致的扁平卡面（card 底 / 6px 圆角 / 无阴影）。 ② 日期框文字含 CJK「（周五）」→ normal 行高实测 ~18px，比数字框纯拉丁行高 ~15px 高 3px， 即便去掉 well 样式盒子仍被撑高 3px（用户复检发现）→ 三栏统一 pin height:31px（border-box + flex 居中）：CJK/拉丁行高差异不再影响盒高，且跨 Chromium/WebKit 一致（原生降级的 .cf-date 也一并吃到这条）。日历打开时 .cal-btn[aria-expanded=true]（同 0,2,0、源码在后）仍覆写出 accent focus ring，和数字输入框 :focus 高亮一致。 */ .close-form .cf-row input { height: 31px; } .close-form .cal-btn { background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; min-height: 0; height: 31px; padding: 0 10px; font-size: 13.5px; /* min-height:0 必须留：压掉通用 .cal-btn 的 38px 下限，否则 height 无效 */ } /* 同源系统性修复（2026-07-24 audit · congyang「一次修全部」）：.cal-btn 通用兜底（well/12px 圆角/ 38px）在所有「非 .rec-form / 非 .close-form」的 flat-card modal 里都跟周围输入框不齐（更圆更深更高） → 按 context 压回扁平卡面 + pin 到该 context 输入框高度（同 .close-form 套路 · CJK 行高不再撑高盒子 · 跨 Chromium/WebKit 一致）。app-modal（双边收租/价差 加·平仓、编辑、PMCC、多腿、平仓记录 ch-ef）input≈34px； edit-form（批次行/建仓日）input 31px；add-form（登记持仓 交易日/到期日 · card2 底）input 31px。 .close-form 与这三者容器互斥（在持仓列表内联抽屉 + .open-pos-modal，不在 .app-modal 内）→ 无 specificity 冲突。 min-height:0 同样必须留（压掉通用 38px 下限）；打开态 .cal-btn[aria-expanded=true] 仍覆写 accent focus ring。 */ .app-modal .cal-btn { background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; min-height: 0; height: 34px; padding: 0 10px; font-size: 13.5px; } .edit-form .cal-btn { background: var(--card); border: 1px solid var(--line); border-radius: 5px; box-shadow: none; min-height: 0; height: 31px; padding: 0 10px; font-size: 13.5px; } .add-form .cal-btn { background: var(--card2); border: 1px solid var(--line); border-radius: 5px; box-shadow: none; min-height: 0; height: 31px; padding: 0 10px; font-size: 13.5px; } .close-form input:focus { outline: none; border-color: var(--accent-soft); } .close-form input::-webkit-outer-spin-button, .close-form input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .close-form input[type=number] { -moz-appearance: textfield; } .close-form .cf-chip { font-size: 10.5px; color: var(--accent); cursor: pointer; padding: 5px 9px; border: 1px solid rgba(184,134,11,0.30); border-radius: 999px; background: rgba(184,134,11,0.06); white-space: nowrap; font-weight: 500; transition: background 0.12s; font-variant-numeric: tabular-nums; } .close-form .cf-chip:hover { background: rgba(184,134,11,0.14); } .close-form .cf-summary { margin-top: 10px; padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; transition: border-color 0.18s; } .close-form .cf-summary.good { border-color: rgba(74,222,128,0.30); } .close-form .cf-summary.bad { border-color: rgba(239,68,68,0.30); } .close-form .cf-calc { font-size: 10.5px; color: var(--sub); font-family: var(--font-num); font-variant-numeric: tabular-nums; } .close-form .cf-calc strong { color: var(--text); font-weight: 600; } .close-form .cf-result { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; } .close-form .cf-result.good { color: var(--green); } .close-form .cf-result.bad { color: var(--red); } .close-form .cf-result .cf-amount { font-size: 15.5px; } .close-form .cf-result .cf-pct { font-size: 12px; opacity: 0.85; } .close-form .cf-result .cf-empty { color: var(--dim); font-weight: 500; font-size: 13px; } .close-form .cf-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } .close-form button.cf-primary { background: var(--accent); color: #0A0A0B; border: none; border-radius: 8px; padding: 8px 22px; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .close-form button.cf-primary:hover { background: var(--accent-light); transform: scale(1.03); box-shadow: 0 4px 14px rgba(230,184,106,0.30); } .close-form button.cf-primary:active { transform: scale(0.97); box-shadow: none; } .close-form button.cf-cancel { background: transparent; color: var(--sub); border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 18px; font-size: 13px; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .close-form button.cf-cancel:hover { color: var(--text); border-color: var(--line-2); } .close-form button.cf-cancel:active { transform: scale(0.97); } /* 部分平仓 chip — 卡片头部展示已平张数 + 已锁 P&L */ .partial-chip { display: inline-block; padding: 3px 9px; margin: 6px 14px 0; /* 左右 14px 对齐 .pos 各区块（.pos 本身 padding:0，内边距各区块自加）；否则 flex column 拉伸顶到卡片左右边 */ font-size: 11px; background: rgba(230,184,106,0.10); color: var(--accent); border: 1px solid rgba(230,184,106,0.24); border-radius: 999px; line-height: 1.4; } .partial-chip b { font-weight: 600; } /* 可点 chip → 打开平仓记录（撤销/编辑/撤销整次 Roll） */ .partial-chip.is-tappable { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out); } .partial-chip.is-tappable:hover { background: rgba(230,184,106,0.17); border-color: var(--accent-soft); transform: translateY(-1px); } .partial-chip .ch-chev { font-size: 14px; line-height: 1; opacity: 0.75; font-weight: 600; margin-left: 1px; } /* ── 平仓记录 modal（复用 .app-modal 外壳 = z-index 1460 + 移动端 bottom-sheet + 自滚动，§12 兼容）── */ .app-modal .ch-h-sub { font-size: 11.5px; color: var(--dim); font-weight: 400; margin-left: 4px; } .app-modal .ch-sum { font-size: 12px; color: var(--sub); background: var(--well); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin: 2px 0 12px; line-height: 1.5; } .app-modal .ch-sum b { color: var(--accent-light); font-variant-numeric: tabular-nums; } .app-modal .ch-list { display: flex; flex-direction: column; gap: 10px; } .app-modal .ch-row { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; } .app-modal .ch-row.is-roll { border-color: rgba(124,108,255,0.30); background: linear-gradient(180deg, rgba(124,108,255,0.06), var(--card2)); } .app-modal .ch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .app-modal .ch-date { margin-left: auto; font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; } .app-modal .ch-src { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 7px; letter-spacing: 0.02em; white-space: nowrap; } .app-modal .ch-src.roll { background: rgba(124,108,255,0.16); color: #B9AEFF; border: 1px solid rgba(124,108,255,0.34); } .app-modal .ch-src.manual { background: rgba(143,166,200,0.14); color: #AFC1DC; border: 1px solid rgba(143,166,200,0.30); } .app-modal .ch-src.expire { background: rgba(63,221,156,0.13); color: var(--green); border: 1px solid rgba(63,221,156,0.30); } .app-modal .ch-line { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; flex-wrap: wrap; } .app-modal .ch-line .ch-qty { font-weight: 700; } .app-modal .ch-line .ch-at { color: var(--dim); font-size: 12px; } .app-modal .ch-line .ch-pnl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .app-modal .ch-pnl.good { color: var(--green); } .app-modal .ch-pnl.bad { color: var(--red); } .app-modal .ch-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: #B9AEFF; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(124,108,255,0.25); } .app-modal .ch-link b { color: var(--accent-light); font-weight: 600; } .app-modal .ch-link .ch-gone { color: var(--dim); } .app-modal .ch-confirm { font-size: 12px; color: var(--sub); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); line-height: 1.5; } .app-modal .ch-act { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; } .app-modal .ch-btn { font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 10px; padding: 8px 13px; cursor: pointer; border: 1px solid var(--line-2); background: var(--fill); color: var(--text); transition: all var(--dur-quick) var(--ease-out); } .app-modal .ch-btn:hover { border-color: var(--accent-soft); } .app-modal .ch-btn.ch-ghost { background: transparent; color: var(--sub); } .app-modal .ch-btn.ch-warn { border-color: rgba(255,126,120,0.4); color: var(--red); } .app-modal .ch-btn.ch-warn:hover { background: rgba(255,126,120,0.12); } .app-modal .ch-btn.ch-primary { background: linear-gradient(135deg, rgba(124,108,255,0.92), rgba(99,84,222,0.94)); border-color: transparent; color: #fff; } .app-modal .ch-btn.ch-primary:hover { filter: brightness(1.08); border-color: transparent; } .app-modal .ch-edit { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .app-modal .ch-ef { flex: 1; min-width: 92px; } .app-modal .ch-ef label { display: block; font-size: 10.5px; color: var(--sub); margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; } .app-modal .ch-ef input { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; box-sizing: border-box; } .app-modal .ch-ef input:focus { outline: none; border-color: var(--accent); } .app-modal .ch-foot { margin-top: 16px; display: flex; justify-content: flex-end; } .app-modal .ch-btn.ch-close { background: var(--fill-2); } /* Closed position styling — modern minimal, 不再纸卡片质感 */ .pos.closed { background: var(--card); border-color: var(--line); } .pos.closed:hover { border-color: var(--line-2); } .pos.closed .pos-bar, .pos.closed .pos-time { display: none; } .pos.closed .pos-hero { background: var(--inset); } /* 已平仓状态徽章：mono chip 风（带 padding + 圆角，不再贴脸方框） */ .pos.closed .pos-status { background: var(--card2); color: var(--sub); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; font-family: var(--font-num); font-weight: 500; line-height: 1.4; } .pos.closed .pos-status.good { color: var(--green); border-color: rgba(74,222,128,0.30); } .pos.closed .pos-status.danger { color: var(--red); border-color: rgba(248,113,113,0.30); } /* 复盘块 */ .closed-review { border-top: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 12px; } .closed-review .cr-section { display: flex; flex-direction: column; gap: 4px; } .closed-review .cr-label { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; display: flex; align-items: center; gap: 6px; } .closed-review .cr-body { font-size: 12.5px; color: var(--text); line-height: 1.55; } .closed-review .cr-body.muted { color: var(--sub); } .closed-review .cr-body code { background: var(--card2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 3px; font-size: 11.5px; color: var(--text); } .closed-review .cr-trade-line { font-family: var(--font-num); font-size: 11.5px; color: var(--sub); padding: 6px 10px; background: var(--card2); border-radius: 5px; display: inline-block; width: fit-content; } .closed-review .cr-trade-line .change { margin-left: 8px; font-weight: 600; } /* 接货经济信息行：有效接货成本 / 接货收盘价（put）· 卖价 / 放弃上行（call）。 让卡片头部的净值"为什么是这个数"可见，不是凭空冒出。*/ .closed-review .cr-assign-info { margin-top: 5px; font-family: var(--font-num); font-size: 11px; color: var(--dim); line-height: 1.5; } .closed-review .cr-events { display: flex; flex-direction: column; gap: 5px; font-size: 12px; } .closed-review .cr-event { color: var(--sub); display: flex; gap: 8px; align-items: baseline; } .closed-review .cr-event .ev-date { font-family: var(--font-num); font-size: 10.5px; color: var(--dim); min-width: 60px; } /* 撤销平仓 button 钉到 closed card 右下角 — 锚到 .pos.closed 自身 bottom 不是 .closed-review bottom. 这样不管 grid 拉齐让卡变多高 / lessons + events 多寡, 撤销按钮永远在 card 右下角同一位置 (修 5-27 Z9d-9: 用户截图右卡 撤销在中下漂移因为 cr-actions 锚到 closed-review 而非 card 自身) */ .pos.closed { position: relative; padding-bottom: 48px; } .pos.closed .closed-review .cr-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px 14px; border-top: 1px solid var(--line); margin-top: 0; display: flex; justify-content: flex-end; background: inherit; } .pos.closed .closed-review { padding-bottom: 0; } .closed-review .cr-undo { background: transparent; border: none; color: var(--sub); text-decoration: underline; cursor: pointer; font-size: 11px; font-family: inherit; } .closed-review .cr-undo:hover { color: var(--accent); } /* Inline greeks row — 单行 chip 风（H 风格） */ .pos-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; font-size: 10.5px; color: var(--sub); font-variant-numeric: tabular-nums; } .pos-stats .stat { display: inline-flex; align-items: baseline; gap: 3px; cursor: help; white-space: nowrap; } .pos-stats .stat .k { color: var(--sub); flex-shrink: 0; } .pos-stats .stat strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; } /* 数据源色点（固定大小，不影响对齐） */ .src-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .src-dot.market { background: var(--green); } .src-dot.model { background: var(--orange); } .src-dot.closed { background: var(--sub); } .src-dot.expired { background: var(--sub); } /* Status — mono uppercase chip (typography-driven, no emoji) */ .pos-status { font-family: var(--font-num); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; border: 1px solid currentColor; background: rgba(255,255,255,0.02); line-height: 1.2; flex-shrink: 0; white-space: nowrap; } .pos-status.good { color: var(--green); background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.35); } .pos-status.warn { color: var(--yellow); background: rgba(250,204,21,0.06); border-color: rgba(250,204,21,0.35); } .pos-status.danger { color: var(--red); background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.35); } .pos-status.info { color: var(--accent); background: rgba(230,184,106,0.06); border-color: rgba(230,184,106,0.35); } :root[data-theme="light"] .pos-status.good { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.35); } :root[data-theme="light"] .pos-status.warn { background: rgba(202,138,4,0.08); border-color: rgba(202,138,4,0.35); } :root[data-theme="light"] .pos-status.danger { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.35); } .pos-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; flex-wrap: wrap; } .pos-toolbar button, .pos-toolbar select { background-color: var(--card); border: 1.5px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 11px; cursor: pointer; font-size: 12px; font-family: inherit; font-weight: 500; transition: border-color 0.15s, background-color 0.15s, transform 0.18s cubic-bezier(0.16,1,0.3,1); letter-spacing: -0.005em; min-height: 30px; line-height: 1.3; display: inline-flex; align-items: center; box-sizing: border-box; } .pos-toolbar button:hover, .pos-toolbar select:hover { border-color: var(--accent); background-color: var(--card2); transform: scale(1.04); } .pos-toolbar button:active, .pos-toolbar select:active { transform: scale(0.96); } .pos-toolbar button.add-btn { background: var(--accent); color: #0A0A0B; border-color: var(--accent); font-weight: 600; } .pos-toolbar button.add-btn:hover { background: var(--accent-light); box-shadow: 0 4px 14px rgba(230,184,106,0.30); transform: scale(1.05); } .pos-toolbar button.add-btn:active { transform: scale(0.96); box-shadow: none; } .pos-toolbar button.linked { background: rgba(74,222,128,0.12); border-color: var(--green); color: var(--green); font-weight: 600; } /* 工具栏分组 + 视觉分隔 */ .tb-group { display: inline-flex; align-items: center; gap: 4px; } .tb-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; } /* 桌面默认：长文案 button 内 .lbl-full 显示，.lbl-short 隐藏；mobile @media 反转 */ .pos-toolbar .lbl-full { display: inline; } .pos-toolbar .lbl-short { display: none; } /* spacer：桌面把 sel-count 推到右边 */ .pos-toolbar .tb-spacer { flex: 1; } /* .small 旧覆盖已移除——所有 toolbar 按钮统一尺寸 */ /* Dropdown 菜单 */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { display: none; /* 右对齐到按钮（right:0）而非左对齐：「数据」按钮在工具栏右端，左对齐 +220px min-width 会冲出视口右缘（手机上尤其，菜单项被截）。右锚 → 菜单右缘贴按钮右缘向左展开，恒在视口内。 */ position: absolute; top: calc(100% + 4px); right: 0; left: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; min-width: 220px; max-width: calc(100vw - 28px); box-shadow: var(--shadow-lg); z-index: 100; padding: 6px; } .dropdown.open > .dropdown-menu { display: block; } .dropdown-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; cursor: pointer; font-size: 12px; color: var(--text); border-radius: 5px; font-family: inherit; } .dropdown-menu button:hover { background: var(--card2); } .dropdown-menu .dd-label { font-size: 9px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 10px 2px; font-weight: 600; } .dropdown-menu .dd-hint { font-size: 10px; color: var(--sub); font-weight: 400; margin-top: 2px; } .dropdown-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; } /* 右侧"找最佳 Option"主按钮 — 暖金渐变 + D 方案双层光晕 (Glowing Halo Ring) */ .rec-btn-large { width: 100%; background: var(--gold-grad); color: var(--gold-ink); border: 1px solid transparent; border-radius: 10px; /* padding-right 给 ::after → 箭头留位，否则长文案会跟箭头贴住 */ padding: 16px 38px 16px 18px; cursor: pointer; text-align: left; transition: filter 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; letter-spacing: -0.01em; box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 0 4px var(--card), 0 0 0 5px rgba(230,184,106,0.30), 0 12px 32px rgba(230,184,106,0.28), 0 4px 12px rgba(230,184,106,0.22); } :root[data-theme="light"] .rec-btn-large { /* 抛光金 · 干净（去掉旧 halo 环：card 色 4px 圈 + 金 ring 在亮金上读成「暗线」）→ 只留亮顶高光 + 轻暗底 + 柔投影 */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(60,30,0,0.12), 0 6px 18px -6px rgba(214,166,86,0.42); } .rec-btn-large::after { content: '→'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 500; transition: transform 0.15s; } .rec-btn-large:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 0 0 4px var(--card), 0 0 0 6px rgba(230,184,106,0.45), 0 16px 40px rgba(230,184,106,0.38), 0 4px 12px rgba(230,184,106,0.28); } :root[data-theme="light"] .rec-btn-large:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(60,30,0,0.12), 0 10px 26px -6px rgba(214,166,86,0.52); } .rec-btn-large:active { filter: brightness(0.96); } /* 维护模式 — 置灰，不可点击的视觉 */ .rec-btn-large.maintenance { background: var(--card2); color: var(--sub); border-color: var(--line); cursor: not-allowed; } .rec-btn-large.maintenance:hover { background: var(--card2); transform: none; } .rec-btn-large.maintenance::after { content: '⏸'; color: var(--sub); font-size: 14px; } .rec-btn-large.maintenance:hover::after { transform: translateY(-50%); } .rec-btn-large.maintenance .rec-title { color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rec-btn-large.maintenance .maint-tag { font-family: var(--font-num); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(230,184,106,0.10); border: 1px solid rgba(230,184,106,0.30); padding: 2px 6px; border-radius: 3px; } .rec-btn-large:hover::after { transform: translateY(-50%) translateX(2px); } .rec-btn-large:active { transform: translateY(0); } .rec-btn-large::before { content: none; } .rec-btn-large .rec-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.01em; } .rec-btn-large .rec-sub { font-size: 12px; opacity: 0.75; line-height: 1.4; font-weight: 400; } .rec-btn-large .rec-text { flex: 1; min-width: 0; padding-right: 28px; } /* 复盘报告按钮 — 次级，描边款，扁平 */ .review-btn { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 18px; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; } .review-btn::before { content: none; } .review-btn::after { content: '→'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--sub); transition: transform 0.2s; opacity: 0.7; } .review-btn:hover { border-color: var(--accent); background: var(--accent-tint); } .review-btn:hover::after { transform: translateY(-50%) translateX(2px); color: var(--accent); } .review-btn .review-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; letter-spacing: -0.01em; } .review-btn .review-sub { font-size: 12px; color: var(--sub); line-height: 1.4; } .review-btn .review-text { flex: 1; min-width: 0; padding-right: 24px; } /* 月度复盘（Wrapped）入口 — 复盘 modal 顶部横幅（方案 D · 金环日历图钮 D3） */ .mr-entry { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; border: 1px solid var(--accent-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; overflow: hidden; cursor: pointer; text-align: left; background: radial-gradient(140% 130% at 88% 0%, rgba(232,188,114,0.20), transparent 55%), var(--card2); transition: transform .18s cubic-bezier(0.16,1,0.3,1), box-shadow .18s cubic-bezier(0.16,1,0.3,1); } .mr-entry:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(232,184,106,0.5); } .mr-entry:active { transform: translateY(0); } .mr-entry:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-tint-strong); } .mr-entry::before { content: ''; position: absolute; inset: 0; background: var(--glass-grad); pointer-events: none; } .mr-entry-glow { position: absolute; right: -20px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(246,217,162,0.26), transparent 65%); filter: blur(6px); pointer-events: none; } .mr-entry-ic { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(246,217,162,0.22), rgba(232,188,114,0.08)); border: 1.5px solid var(--accent-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -4px rgba(232,184,106,0.4); } .mr-entry-ic .ico { width: 20px; height: 20px; stroke: var(--accent-light); stroke-width: 1.75; } .mr-entry-body { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mr-entry-kick { font-family: var(--font-num); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .mr-entry-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .mr-entry-sub { font-size: 12px; color: var(--sub); line-height: 1.4; } .mr-entry-go { position: relative; flex: none; color: var(--accent); font-size: 18px; transition: transform .2s; } .mr-entry:hover .mr-entry-go { transform: translateX(2px); } /* 「整体复盘」分节标签 — 月度入口横幅之后，说明下方统计是全期累计（低调，不与金横幅抢焦点） */ .rm-section-label { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; } .rm-section-label .rm-section-t { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--sub); letter-spacing: 0.01em; } .rm-section-label .rm-section-t .ico { width: 14px; height: 14px; stroke: var(--sub); stroke-width: 1.75; flex: none; } /* 右侧渐隐细线 — 明确「这里起是新一段（全期）」，把月度与整体切开 */ .rm-section-label .rm-section-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); } /* 复盘 modal */ .review-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(820px, 94vw); max-height: 90vh; overflow-y: auto; z-index: 1001; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } .review-modal.open { display: block; } .review-modal h3 { font-size: 16px; color: var(--text); font-weight: 700; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; } .review-modal .x { cursor: pointer; color: var(--sub); font-size: 22px; } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .review-stat { background: var(--card2); border-radius: 8px; padding: 12px; text-align: center; } .review-stat .l { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.5px; } .review-stat .v { font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; } .review-table { width: 100%; border-collapse: collapse; font-size: 12px; } .review-table th, .review-table td { padding: 8px; text-align: left; border-bottom: 1px solid var(--line); } .review-table th { color: var(--sub); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .review-table th.rt-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--dur-quick) var(--ease-out); } .review-table th.rt-sort:hover { color: var(--text); } .review-table th.rt-sort.active { color: var(--accent); } .review-table th.rt-sort .rt-ind { margin-left: 3px; font-size: 9px; opacity: 0.32; } .review-table th.rt-sort.active .rt-ind { opacity: 1; } /* 🔄 Roll 平仓标注（复盘明细 C · 中性蓝，不与红/绿盈亏抢色） */ .rt-roll-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; white-space: nowrap; cursor: help; color: var(--roll, #6FA8FF); background: var(--roll-tint, rgba(111,168,255,0.14)); border: 1px solid var(--roll-soft, rgba(111,168,255,0.40)); padding: 1px 6px; border-radius: 999px; margin-left: 5px; vertical-align: middle; } .review-table tr.rt-roll-row td { border-bottom: none; } .review-table tr.rt-roll-link td { padding-top: 2px; padding-bottom: 9px; font-size: 11px; color: var(--roll, #6FA8FF); line-height: 1.5; } .rt-roll-arm { color: var(--roll-soft, rgba(111,168,255,0.55)); margin-right: 2px; } .rt-roll-net { cursor: help; border-bottom: 1px dotted var(--roll-soft, rgba(111,168,255,0.45)); } /* 复盘 · accordion 子模块 */ .review-acc { background: var(--card2); border-radius: 8px; margin-top: 10px; overflow: hidden; } .review-acc-head { padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12.5px; user-select: none; } .review-acc-head .ra-title { font-weight: 600; color: var(--accent); } .review-acc-head .ra-summary { color: var(--sub); font-size: 11.5px; margin-left: auto; text-align: right; line-height: 1.3; } .review-acc-head .ra-arrow { color: var(--sub); transition: transform 0.15s; font-size: 10px; width: 10px; text-align: center; } .review-acc.open .review-acc-head .ra-arrow { transform: rotate(90deg); } .review-acc-body { display: none; padding: 0 14px 14px; } .review-acc.open .review-acc-body { display: block; } /* outcome 卡片（无左侧色条 · 跟 strat/dur 卡风格统一） */ .review-oc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .review-oc { background: var(--card); border-radius: 7px; padding: 10px 11px; } .review-oc .ocl { font-size: 11px; color: var(--text); font-weight: 600; } .review-oc .ocp { font-size: 10px; color: var(--sub); margin-top: 2px; } .review-oc .ocv { font-size: 15px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; } .review-oc .ocv.up { color: var(--green); } .review-oc .ocv.down { color: var(--red); } .review-oc .ocs { font-size: 10px; color: var(--sub); margin-top: 2px; } /* ticker 排名 */ .review-rank { width: 100%; border-collapse: collapse; font-size: 12px; } .review-rank th, .review-rank td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .review-rank th { color: var(--sub); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .review-rank td.right { text-align: right; } .review-rank td.tk { font-weight: 700; color: var(--text); } .review-rank td.up { color: var(--green); } .review-rank td.down { color: var(--red); } .review-rank .wr-bar { display: inline-block; width: 50px; height: 5px; background: var(--card); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 6px; } .review-rank .wr-fill { height: 100%; background: var(--green); } /* strategy / duration 卡片 */ .review-strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } .review-strat { background: var(--card); border-radius: 7px; padding: 10px 12px; } .review-strat .sname { font-size: 11px; color: var(--text); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; } .review-strat .sname .sn-n { color: var(--sub); font-weight: 400; font-size: 10px; } .review-strat .smid { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; } .review-strat .smid .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .review-strat .smid .v.up { color: var(--green); } .review-strat .smid .v.down { color: var(--red); } .review-strat .smid .wr { font-size: 10.5px; color: var(--sub); } .review-dur-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .review-dur { background: var(--card); border-radius: 7px; padding: 11px 12px; } .review-dur .dl { font-size: 11px; color: var(--sub); } .review-dur .drow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; } .review-dur .drow .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .review-dur .drow .v.up { color: var(--green); } .review-dur .drow .v.down { color: var(--red); } .review-dur .drow .n { font-size: 10px; color: var(--sub); } /* 月度柱状图 */ .review-mc-wrap { background: var(--card); border-radius: 7px; padding: 14px 12px 8px; } .review-mc { display: flex; align-items: stretch; gap: 4px; height: 116px; padding-bottom: 2px; position: relative; } /* 双向柱 0 基线 — 居中横贯：赚钱周绿色朝上、亏损周红色朝下（红 = 负数一眼可见） */ .review-mc-zero { position: absolute; left: 0; right: 0; bottom: 50%; height: 0; border-top: 1px solid var(--line); z-index: 0; pointer-events: none; } .review-mc-col { flex: 1; height: 100%; position: relative; } .review-mc-bar { position: absolute; left: 50%; transform: translateX(-50%); width: 60%; min-height: 1px; z-index: 1; } .review-mc-bar.up { bottom: 50%; border-radius: 3px 3px 0 0; background: var(--green); } .review-mc-bar.down { top: 50%; border-radius: 0 0 3px 3px; background: var(--red); } .review-mc-col .mcv { position: absolute; top: -16px; font-size: 9.5px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .review-mc-labels { display: flex; gap: 4px; margin-top: 4px; } .review-mc-labels .mml { flex: 1; text-align: center; font-size: 9.5px; color: var(--sub); } /* 金额放到日期下方一行（congyang 2026-07-09）：默认显示；JS 测到会重叠时给 wrap 加 .mc-vals-off → 隐藏金额行、露出点按提示（柱子上方不再常显数字，防移动端多柱重叠）。 */ .review-mc-vals { display: flex; gap: 4px; margin-top: 2px; } .review-mc-vals .mvv { flex: 1; text-align: center; font-size: 9.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; /* 让 scrollWidth 反映真实文字宽度，供 _reviewFitMcVals 测重叠（overflow:visible 时 scrollWidth==clientWidth 测不出） */ } .review-mc-vals .mvv.up { color: var(--green); } .review-mc-vals .mvv.down { color: var(--red); } .review-mc-hint { display: none; margin-top: 6px; text-align: center; font-size: 10px; color: var(--sub); opacity: 0.7; } .review-mc-wrap.mc-vals-off .review-mc-vals { display: none; } .review-mc-wrap.mc-vals-off .review-mc-hint { display: block; } /* 复盘头条与首页「已累计收租」对账说明（复盘只算已平仓·差额=未平仓已实现） */ .review-reconcile { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.45; color: var(--sub); } /* 平均参考线 — dashed + 右侧标签, 颜色跟符号同 */ .review-mc-avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--sub); pointer-events: none; opacity: 0.6; z-index: 1; } .review-mc-avg.up { border-top-color: var(--green); } .review-mc-avg.down { border-top-color: var(--red); } .review-mc-avg-label { position: absolute; right: 2px; transform: translateY(-50%); background: var(--card); padding: 0 5px; font-size: 9px; font-variant-numeric: tabular-nums; color: var(--sub); letter-spacing: 0.02em; line-height: 1.3; border-radius: 3px; z-index: 2; white-space: nowrap; } .review-mc-avg-label.up { color: var(--green); } .review-mc-avg-label.down { color: var(--red); } /* 柱子 / 标签可点 — 移动端 tap 弹气泡看「第几周·日期区间」(桌面靠原生 title hover) */ .review-mc-col { cursor: pointer; -webkit-tap-highlight-color: transparent; } .review-mc-labels .mml { cursor: pointer; -webkit-tap-highlight-color: transparent; } .review-mc-col.active .review-mc-bar { filter: brightness(1.18); } /* tap 气泡 — 钉在图表顶部、水平居中于被点柱子, 不被柱高影响 */ .review-mc-tip { position: absolute; top: -6px; left: 0; transform: translate(-50%, -100%); background: var(--text); color: var(--bg); font-size: 10px; font-variant-numeric: tabular-nums; padding: 3px 7px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--dur-quick, .12s) var(--ease-out, ease); z-index: 5; } .review-mc-tip.show { opacity: 1; visibility: visible; } .review-mc-tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--text); } /* 周/月 toggle pill — 沿用 .ds-chip pattern (var(--bg) + var(--border)) */ .review-bucket-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px; font-size: 11px; margin-bottom: 10px; } .review-bucket-toggle button { background: transparent; border: 0; color: var(--sub); padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 11px; line-height: 1.4; font-family: inherit; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .review-bucket-toggle button.active { background: var(--accent); color: #1A1410; } .review-bucket-toggle button:not(.active):hover { color: var(--text); } /* 管家复盘卡 — DS palette (--accent 暖金), 跟 brief-preview / mb-refresh 一脉 */ .review-llm { background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; position: relative; } .review-llm.cta { text-align: center; } .review-llm-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .review-llm-title svg.ico { width: 14px; height: 14px; color: var(--accent); } .review-llm.cta .review-llm-title { justify-content: center; } /* 管家复盘结果卡可折叠 — 跟下方 .review-acc 六个 section 一致 */ .review-llm--collapsible .review-llm-title { cursor: pointer; user-select: none; margin-bottom: 0; } /* 标题行：左标题(可点折叠) + 右上角「重新分析」按钮(跟 mb-refresh 一脉，折叠也可见) */ .review-llm-head { display: flex; align-items: center; gap: 10px; } .review-llm--collapsible .review-llm-head .review-llm-title { flex: 1 1 auto; min-width: 0; } /* 右上角「重新分析」按钮 — 视觉同「刷新管家」mb-refresh（暗金描边 + 内嵌金币药丸） */ .review-llm-regen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 4px 5px 11px; background: linear-gradient(180deg, var(--accent-tint), rgba(0,0,0,0)); border: 1px solid var(--accent-tint-strong); border-radius: 999px; color: var(--text); font-size: 11px; font-weight: 600; font-family: inherit; line-height: 1; cursor: pointer; transition: transform var(--dur-quick) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .review-llm-regen:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(var(--accent-rgb), 0.22); } .review-llm-regen:active { transform: translateY(0); } .review-llm-regen svg.ico { width: 12px; height: 12px; flex-shrink: 0; color: var(--accent); transition: transform 600ms; } .review-llm-regen:hover svg.ico { transform: rotate(180deg); } .review-llm-regen .cost-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; margin-left: 2px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-2) 100%); color: #1A1410; font-weight: 800; font-size: 10.5px; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 1px 4px rgba(0,0,0,0.30); letter-spacing: -0.1px; } .review-llm-regen .cost-pill::after { content: ""; display: inline-block; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--coin-mask) no-repeat center / contain; mask: var(--coin-mask) no-repeat center / contain; filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); } .review-llm-arrow { color: var(--sub); font-size: 9px; width: 10px; text-align: center; transition: transform 0.15s; display: inline-block; } .review-llm--collapsible.open .review-llm-arrow { transform: rotate(90deg); } .review-llm-body { display: none; margin-top: 6px; } .review-llm--collapsible.open .review-llm-body { display: block; } .review-llm-sub { font-size: 11.5px; color: var(--sub); line-height: 1.5; margin-bottom: 12px; } .review-llm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 5px 7px 13px; background: linear-gradient(180deg, var(--accent-tint), rgba(0,0,0,0)); border: 1px solid var(--accent-tint-strong); border-radius: 999px; color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1; transition: transform var(--dur-quick) var(--ease-out), border-color var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .review-llm-btn:not(:disabled):hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(var(--accent-rgb), 0.22); } .review-llm-btn:active { transform: translateY(0); } .review-llm-btn:disabled { opacity: 0.45; cursor: not-allowed; } .review-llm-btn svg.ico { width: 13px; height: 13px; color: var(--accent); } .review-llm-btn .cost-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; margin-left: 4px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-2) 100%); color: #1A1410; font-weight: 800; font-size: 10.5px; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 1px 4px rgba(0,0,0,0.30); letter-spacing: -0.1px; } .review-llm-btn .cost-pill::after { content: ""; display: inline-block; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--coin-mask) no-repeat center / contain; mask: var(--coin-mask) no-repeat center / contain; filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); } .review-llm-btn:disabled .cost-pill { background: var(--card2); color: var(--sub); box-shadow: none; } /* 管家复盘 loading — 攻方「换一批」/ 守方「刷新」同款「思考」框架（旋转星芒 think-spark + 轮换短语呼吸 + 微光骨架条），取代旧的小圆环 spinner。.think-spark / thinkSparkSpin + oppPulse / oppThinkBreathe keyframes 都是全局；.oppc-skel / .opp-think 呼吸原作用域是 .morning-brief，这里为 .review-llm 复制一份（grep think-spark 同步四处）。 */ .review-llm .think-row { margin: 6px 0 2px; } .review-llm .oppc-skel { height: 11px; border-radius: 6px; background: var(--well); margin-top: 8px; animation: oppPulse 1.4s ease-in-out infinite; } .review-llm .oppc-skel-2 { width: 62%; } .review-llm .opp-think { font-size: 12.5px; color: var(--sub); transition: opacity .2s ease; animation: oppThinkBreathe 1.9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .review-llm .opp-think { animation: none; } } .review-llm-error { color: var(--red); font-size: 11.5px; padding: 8px 0; } /* stale 提示移到折叠 body 之外 → 折叠时仍可见「为什么该重新分析」 */ .review-llm-stale { display: flex; align-items: center; gap: 6px; background: var(--accent-tint); color: var(--text); font-size: 11.5px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; margin-top: 10px; } /* 展开时 stale 与下方正文之间留一点空隙 */ .review-llm--collapsible.open .review-llm-stale { margin-bottom: 2px; } .review-llm-stale svg.ico { width: 13px; height: 13px; color: var(--accent); flex: 0 0 auto; } .review-llm-verdict { font-size: 13.5px; font-weight: 500; color: var(--text); background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; } .review-llm-verdict .label { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; display: block; } .review-llm-block-label { font-size: 10.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 6px; font-weight: 500; } .review-llm-pattern { background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--line); } .review-llm-pattern .ptitle { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .review-llm-pattern .pevidence { font-size: 11.5px; color: var(--sub); line-height: 1.5; margin-bottom: 4px; } .review-llm-pattern .precommend { font-size: 11.5px; color: var(--text); line-height: 1.5; } .review-llm-pattern .precommend::before { content: '→ '; color: var(--accent); font-weight: 600; } .review-llm-advice { background: var(--card); padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--line); } .review-llm-advice .alabel { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .review-llm-advice .aadvice { font-size: 12px; color: var(--accent); font-weight: 500; margin-bottom: 3px; } .review-llm-advice .areasoning { font-size: 11.5px; color: var(--sub); line-height: 1.5; } .review-llm-foot { font-size: 10px; color: var(--sub); margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .review-llm-foot .regen-btn { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--line); color: var(--sub); padding: 4px 10px; border-radius: 999px; font-size: 10.5px; cursor: pointer; font-family: inherit; transition: border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .review-llm-foot .regen-btn:hover { border-color: var(--accent); color: var(--text); } .review-llm-foot .regen-btn svg.ico { width: 11px; height: 11px; color: var(--accent); } .review-llm-foot .regen-btn .cost-pill { display: inline-flex; align-items: center; gap: 1px; padding: 1px 6px; margin-left: 2px; border-radius: 999px; background: var(--accent-tint-strong); color: var(--accent); font-weight: 700; font-size: 9.5px; letter-spacing: -0.1px; } .review-llm-foot .regen-btn .cost-pill::after { content: ""; display: inline-block; width: 8.5px; height: 8.5px; background: currentColor; -webkit-mask: var(--coin-mask) no-repeat center / contain; mask: var(--coin-mask) no-repeat center / contain; } .review-llm-disclaimer { font-size: 9.5px; color: var(--sub); margin-top: 8px; line-height: 1.5; opacity: 0.85; } /* 数据稀疏时的友好提示 */ .review-empty { color: var(--sub); font-size: 12px; text-align: center; padding: 16px 12px; background: var(--card); border-radius: 7px; line-height: 1.5; } .review-note { color: var(--sub); font-size: 11px; text-align: center; padding: 8px 12px 2px; line-height: 1.45; } @media (max-width: 600px) { .review-oc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .review-strat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .review-dur-grid { grid-template-columns: minmax(0, 1fr); } .review-acc-head .ra-summary { font-size: 10.5px; } .review-acc-head { padding: 10px 12px; } .review-acc-body { padding: 0 12px 12px; } .review-mc { height: 100px; } } /* 模态遮罩 — backdrop blur 是 premium 感最大杠杆 */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); z-index: 1000; } .modal-backdrop.show { display: block; } :root[data-theme="light"] .modal-backdrop { background: rgba(20,20,18,0.25); } :root[data-theme="light"] .rec-form .opt-btn { background: rgba(255,255,255,0.6); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } :root[data-theme="light"] .rec-form .opt-btn:hover { background: rgba(230,184,106,0.10); box-shadow: 0 1px 3px rgba(0,0,0,0.08); } :root[data-theme="light"] .rec-form .opt-btn.selected { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 10px rgba(200,152,80,0.35); } /* ⭐ 顶边定死，不再垂直居中（congyang 2026-08-12「三个驱动选项页面跳跃比较大， 统一到一个位置」）。 根因是**居中**，不是切换器本身：三轨内容高度差一大截（严选 / 策略驱动撑满高度上限、 目标驱动只有 ~700px），垂直居中会把这个差值的一半摊到顶边 → 切一下轨，头部 + 保证金条 + 三轨切换器整体上下窜。实测 1728×1117：切换器 y 在 179 / 331 / 179 之间跳，位移 152px； 视口越高窜得越远（用户截图那台机器上肉眼看着近半屏）。 顶边固定后，切换器**上方**那两样（h4 标题 + .rec-ctx-strip）在三轨里高度完全一致， 于是切换器永远停在同一个像素 —— 内容只从它下面往下长。 top 用 clamp 不用定值：小屏别浪费高度，大屏别贴到天花板；max-height 对称扣掉两倍， 高度上限跟原来的 90vh 基本持平（1117 视口上两者都是 1005px），不丢可用空间。 ⚠️ 只管桌面浮层：手机（≤720）是 bottom-sheet、PWA tab-page 是全屏页，两者各自用 !important 覆盖了 top / transform / max-height。手机实测三轨位移本来就是 0 （三轨内容都超过 92vh 上限 → 一直贴着上限），故不动它，免得把 roll 那种短表单 撑成一屏空白。 */ .rec-form.modal { --rec-modal-top: clamp(16px, 5vh, 64px); position: fixed; top: var(--rec-modal-top); left: 50%; transform: translateX(-50%); width: min(820px, 94vw); max-height: calc(100vh - var(--rec-modal-top) * 2); max-height: calc(100dvh - var(--rec-modal-top) * 2); overflow-y: auto; z-index: 1001; margin: 0; /* v2.0.2: submit-row 不再 sticky，已在 form 流末端 + 负 margin 贴底。 去掉之前的 padding-bottom: 84px hack（之前为 sticky 底栏让位用的） */ background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } /* ── 推荐引擎表单 + 结果 ───────────────────────────────────────────── */ .rec-form { display: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; overflow-x: hidden; /* v2: 防御性 clip — preset pill 等 inner content 不撑破 panel */ } .rec-form.open { display: block; } .rec-form h4 { font-size: 14px; color: var(--accent); font-weight: 700; display: flex; justify-content: space-between; align-items: center; position: sticky; top: -18px; z-index: 10; background: var(--card); padding: 16px 0 10px; margin: -18px -20px 12px; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,0.10); } :root[data-theme="light"] .rec-form h4 { box-shadow: 0 3px 8px rgba(0,0,0,0.05); } /* 🩹 找合约 modal 头部 bug 修复（居中浮层 + 移动 bottom-sheet，非 tab-page）： ① 浮层底不再裸用半透 --card（设计系统纪律）→ 改不透明 glass-grad over card-solid： 滚动内容不再从 sticky 头部"透出"，并盖住 modal 顶部 1px bevel 高光（用户报"上方 ~1px 暴露"）。 ② 桌面经典滚动条：scrollbar-gutter 预留 12px gutter + 头部多吃 12px 负 margin/padding → 头部背景 + 下边框延伸封住右侧滚动条 gutter（用户报"右边没封住滚动条"）。X 关闭按钮视位不变。 tab-page（PWA 全屏，背景=var(--bg)，另有 safe-area 头部处理 ~7324）不动； 移动端 overlay 滚动条无 gutter → 只享 ①、不触发 ②（@media min-width:721 排除）。 */ body:not(.is-tab-page) #rec-form.rec-form.modal h4 { background: var(--glass-grad), var(--card-solid); } @supports (scrollbar-gutter: stable) { @media (min-width: 721px) { body:not(.is-tab-page) #rec-form.rec-form.modal { scrollbar-gutter: stable; } body:not(.is-tab-page) #rec-form.rec-form.modal h4 { margin-right: -32px; padding-right: 32px; } } } .rec-form h4 .x { /* line-height:1 让 20px 关闭 X 跟左侧 14px 标题在同一基线， 否则 X 会因为默认 line-height 显得偏低 */ cursor: pointer; color: var(--sub); font-size: 20px; line-height: 1; } .rec-form .row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; align-items: center; } /* v2: .row 默认 display:flex 压过 [hidden] 的 display:none → 强制 .row[hidden] 不可见 */ .rec-form .row[hidden], .rec-form .preset-row[hidden] { display: none !important; } /* v2 redesign · section divider 风格 (取代 inset card 包卡) */ .rec-form .row[data-section], .rec-form .row.preset-row { padding: 10px 0 12px; margin-bottom: 0; border-bottom: 1px solid var(--line); } .rec-form .row[data-section] .label, .rec-form .row.preset-row .label { color: var(--text); font-size: 11.5px; font-weight: 600; opacity: 0.85; margin-bottom: 8px; } /* v2 redesign · 横向并排 row-pair (ticker+preset / timeframe+risk) */ .rec-form .row-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 0; align-items: start; /* 两列顶对齐：列内容顺次贴顶，多出的高度留在底部（否则矮列被拉伸、wrap-flex 的行被 align-content 撑开成中缝） */ } .rec-form .row-pair > .row, .rec-form .row-pair > .row[data-section], .rec-form .row-pair > .row.preset-row { margin-bottom: 0; padding: 0; border-bottom: none; } .rec-form .row-pair.tf-risk { grid-template-columns: 1fr 1fr; } /* 50/50 对齐上方 toggles-pair（2026-07-26 congyang 定）*/ .rec-form .row-pair.ticker-preset { grid-template-columns: 1fr; } /* 限定风险 + 全扫描并排（2026-07-10 · 省一行）：都适用→2 列 · 只 1 个适用→独占整行 · 都不适用→整块收起（不留分隔线/空隙） · 限定风险展开保险宽度时占满整行 */ .rec-form .row-pair.toggles-pair { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } /* toggle 卡填满各自的列（.dr-toggle-wrap 在 flex 的 .row 里默认缩到内容宽 → 文字短的一侧不满列显丑）*/ .rec-form .row-pair.toggles-pair > .row { min-width: 0; } .rec-form .row-pair.toggles-pair .dr-toggle-wrap { width: 100%; box-sizing: border-box; } .rec-form .row-pair.toggles-pair:has(> .row[hidden]) { grid-template-columns: 1fr; } .rec-form .row-pair.toggles-pair:not(:has(> .row:not([hidden]))) { display: none; padding: 0; border-bottom: 0; } .rec-form .row-pair.toggles-pair > #rec-defined-risk-row.dr-expanded { grid-column: 1 / -1; } /* mobile fallback: 所有 row-pair 强制单列 (specificity 匹配 .tf-risk / .ticker-preset override) */ @media (max-width: 640px) { .rec-form .row-pair, .rec-form .row-pair.tf-risk, .rec-form .row-pair.ticker-preset, .rec-form .row-pair.toggles-pair, .rec-form .row-pair.toggles-pair:has(> .row[hidden]), .rec-form .row-pair.ticker-preset:has(.preset-row[hidden]) { grid-template-columns: 1fr; gap: 14px; } } /* 最后一个 section 无 divider */ .rec-form > .row[data-section]:last-of-type, .rec-form > .row.preset-row:last-of-type, .rec-form > .row-pair:last-of-type { border-bottom: none; } .rec-form .label { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; width: 100%; margin-bottom: 6px; } .rec-form .opt-btn { background: transparent; border: 1.5px solid var(--line-2); color: var(--text); border-radius: 10px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1); letter-spacing: -0.005em; line-height: 1.3; font-family: inherit; } .rec-form .opt-btn:hover { border-color: var(--accent); background: rgba(230,184,106,0.07); color: var(--text); } .rec-form .opt-btn.selected { background: var(--accent); color: #0A0A0B; border-color: var(--accent); font-weight: 600; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 4px 14px rgba(230,184,106,0.30); } /* Roll 模式：比当前到期更短的时长窗口物理上做不到 → 置灰禁用（往后展期约束一眼可见） */ .rec-form .opt-btn.tf-blocked { opacity: 0.34; cursor: not-allowed; pointer-events: none; text-decoration: line-through; text-decoration-thickness: 1px; } .rec-form .rec-roll-tf-hint { color: var(--accent); } /* 指定到期日：药丸 + 展开的真实到期日下拉 */ .rec-form .opt-btn.date-pill { display: inline-flex; align-items: center; gap: 5px; } .rec-form .opt-btn.date-pill .ico { width: 14px; height: 14px; } .rec-form .rec-date-wrap { width: 100%; margin-top: 2px; } .rec-form .rec-date-wrap[hidden] { display: none; } .rec-form .rec-date-input { width: 100%; max-width: 240px; box-sizing: border-box; background: var(--card2); border: 1.5px solid var(--line-2); color: var(--text); border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit; cursor: pointer; min-height: 42px; } .rec-form .rec-date-input:focus { outline: none; border-color: var(--accent); } .rec-form .rec-date-input:disabled { opacity: 0.5; cursor: not-allowed; } /* 原生日历弹窗 / 图标跟随主题 */ :root[data-theme="dark"] .rec-form .rec-date-input { color-scheme: dark; } :root[data-theme="light"] .rec-form .rec-date-input { color-scheme: light; } .rec-form .rec-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; } .rec-form .rec-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; } .rec-form .rec-date-hint { color: var(--sub); font-size: 11.5px; margin-top: 8px; } .rec-form .rec-date-hint b { color: var(--accent); } .rec-form .rec-date-hint.empty { color: var(--dim); } /* ── Section-typed layouts: 按 section 类型选择最佳控件布局 ── */ /* 方向（3 项互斥）：等宽 segmented-control 风格 */ .rec-form .row[data-section="direction"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 11px; align-items: stretch; } .rec-form .row[data-section="direction"] .label { grid-column: 1 / -1; } /* 策略意图：「出租收租 / LEAPS 买入」两族卡片分组 */ .rec-form .row[data-section="intent"] { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px 12px; align-items: start; margin-bottom: 11px; } /* label + 持股建议 hint 跨两列；两族卡在 grid 里去基类 margin-top（靠 gap 隔开 + 顶对齐）*/ .rec-form .row[data-section="intent"] > .label, .rec-form .row[data-section="intent"] > .rec-intent-hint { grid-column: 1 / -1; } .rec-form .row[data-section="intent"] > .strategy-card { margin-top: 0; } /* 窄屏（手机）回单列堆叠 */ @media (max-width: 600px) { .rec-form .row[data-section="intent"] { grid-template-columns: 1fr; } } .rec-form .row[data-section="intent"] .label { display: block; width: 100%; } .rec-form .strategy-card { border-radius: 10px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--line-2); } /* Smart intent suggestion chip — 当用户选了持股 ticker 时挂在 intent picker 上方 */ .rec-intent-hint { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(74,222,128,0.07); border: 1px solid rgba(74,222,128,0.22); font-size: 12.5px; line-height: 1.5; cursor: pointer; transition: background 0.18s, border-color 0.18s; } /* v2: hidden/empty 时彻底不占空间 (display:flex 优先级压过 [hidden] / :empty) */ .rec-intent-hint[hidden], .rec-intent-hint:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .rec-intent-hint:hover { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4); } .rec-intent-hint .rih-text { flex: 1; color: var(--text); } .rec-intent-hint .rih-text b { color: var(--green); } .rec-intent-hint .rih-action { color: var(--green); font-weight: 600; font-size: 11.5px; white-space: nowrap; } /* 「已全部出租」信息态：中性灰、不可点（区别于绿色「一键切换」可点提示） */ .rec-intent-hint.rih-info { background: var(--card-2, rgba(127,127,127,0.07)); border-color: var(--line-2, rgba(127,127,127,0.18)); cursor: default; } .rec-intent-hint.rih-info:hover { background: var(--card-2, rgba(127,127,127,0.07)); border-color: var(--line-2, rgba(127,127,127,0.18)); } .rec-intent-hint.rih-info .rih-text { color: var(--sub, var(--text)); } .rec-intent-hint.rih-info .rih-text b { color: var(--text); } /* 现金交割指数提示条：中性灰，非可点（区别于绿色「一键切换」CC 提示） */ .rec-index-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--card-2, rgba(127,127,127,0.07)); border: 1px solid var(--border, rgba(127,127,127,0.2)); font-size: 12.5px; line-height: 1.5; color: var(--sub); } .rec-index-note[hidden], .rec-index-note:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .rec-index-note b { color: var(--text); font-weight: 600; } .rec-index-note .ico { flex: none; color: var(--sub); } /* 指数不支持的意图按钮：灰掉、不可点（备兑/领口/PMCC on cash-settled index） */ .rec-form .intent-btn.intent-na { opacity: 0.4; pointer-events: none; filter: grayscale(0.6); position: relative; } .rec-form .intent-btn.intent-na::after { content: attr(data-na-tag); position: absolute; top: 6px; right: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--sub); opacity: 0.9; } .rec-form .strategy-card.sell { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.18); } /* ⭐ 白天：「出租收租」那一大片绿底改中性（congyang 2026-08-15 看真机后拍板）。 理由是**语义经济学**不是好不好看：绿在这个 app 里恒等于「赚」（+$647 / 盈利 / 安全区）， 红恒等于「亏」。把盈亏语义色拿去当一个 section 的 **chrome**， 等于把这枚信号的边际价值稀释掉 —— 满屏都是绿的时候，绿就不再是「赚」了。 （DESIGN §2.1 说的是反面：颜色不许单独承担意义；这是同一条的正面： **承担了意义的颜色，就不该再去当装饰。**） 绿只留给这张卡的**标题**（`.strategy-card.sell .card-title` 仍是 --green）和真正的盈亏数字； 面本身走中性卡面 + 常规 hairline，跟同屏别的分组一致。夜间不动 （深底上 6% 的绿是一层几乎看不见的辉光，不构成「一大片绿」）。 */ :root[data-theme="light"] .rec-form .strategy-card.sell { background: var(--card2); border-color: var(--line); } .rec-form .strategy-card .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; } .rec-form .strategy-card .card-title { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .rec-form .strategy-card.sell .card-title { color: var(--green); } .rec-form .strategy-card .card-hint { font-size: 10.5px; color: var(--sub); } .rec-form .strategy-card .btn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .rec-form .strategy-card .btn-grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .rec-form .strategy-card .btn-grid-2 .cc-full { grid-column: 1 / -1; } /* v2 redesign: 4 intent button 统一 2x2 grid + sub label */ .rec-form .strategy-card .intent-grid-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } /* 第 5 个 intent（持股保护 collar）独占一行，避免 2 列网格落单 */ .rec-form .strategy-card .intent-grid-4 .intent-btn[data-value="collar"] { grid-column: 1 / -1; } /* B2（2026-07-10）：出租收租按「想不想接货」分三组 · 每组一个 2 列网格 + 小组标题 */ .rec-form .strategy-card .intent-grp { margin-bottom: 9px; } .rec-form .strategy-card .intent-grp:last-child { margin-bottom: 0; } .rec-form .strategy-card .intent-grp-lab { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--sub); letter-spacing: 0.02em; margin: 2px 0 5px; } .rec-form .strategy-card .intent-grp-lab .ig-n { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--fill); border: 1px solid var(--line-2); font-size: 9px; font-weight: 800; color: var(--text); flex: none; } .rec-form .strategy-card .intent-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .rec-form .opt-btn.intent-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 10px; min-height: 50px; text-align: center; line-height: 1.25; } .rec-form .opt-btn.intent-btn .ib-title { font-size: 12.5px; font-weight: 500; } .rec-form .opt-btn.intent-btn .ib-sub { font-size: 10px; color: var(--sub); font-weight: 400; letter-spacing: 0.02em; } .rec-form .opt-btn.intent-btn.selected .ib-title { font-weight: 700; } .rec-form .opt-btn.intent-btn.selected .ib-sub { color: rgba(10,10,11,0.7); } /* 🎯 目标价「就地下拉」（2026-07-26）：挪进第②组正下方，选 CSP/CC 就地展开。 沿用 app 既有 max-height 手风琴 pattern（cf. .cn-task-panel · var(--ease-out)）。 collapsed 时 overflow 裁到 0 高度 → 对 ③「其它」组零占位。*/ .rec-form .rec-tp-slot { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.3s var(--ease-out, ease), opacity 0.2s ease; } .rec-form .rec-tp-slot.open { max-height: 200px; opacity: 1; } /* 素净行（方案 A）：与现有输入行同款，仅加一条淡虚线把它和上面两张卡分开 */ .rec-form .rec-tp-row { margin: 11px 0 0; padding-top: 11px; border-top: 1px dashed var(--line-2); } /* 🔄 roll 模式的落点（2026-08-12）：目标价那一行被 _recMoveTargetRow 搬到时长/风险下面 —— roll 时「选策略」整段是藏的，它待在原位就成了「看不见却在生效」的输入。 没搬东西进来时 :empty 不占位（普通推荐下这个 host 永远是空的）。*/ .rec-form #rec-roll-tp-host:empty { display: none; } .rec-form #rec-roll-tp-host { margin-top: 2px; } /* 「为什么风险偏好点不动」：单独一行，别跟上面那条 hint 挤在一条里。 .rec-form .row 是 flex + wrap → 要换行得给 flex-basis:100%，光 display:block 会被当 flex item 塞在同一行右边（桌面上实测就是顶到右边缘）。 左边距跟上一条 hint 对齐 → basis 要减掉它，否则 100%+10px 把整行顶出 10px 横向溢出。*/ .rec-form #rec-target-lock-hint { display: block; flex: 0 0 calc(100% - 10px); margin: 7px 0 0 10px; color: var(--accent); } .rec-form #rec-target-lock-hint[hidden] { display: none; } /* ⚡ 进阶 · 杠杆收租卡（C 方案 · 独立卡, 与「出租收租」平级 · PMCC · 2026-06-20）*/ .rec-form .strategy-card.advanced { background: rgba(230,184,106,0.06); border-color: rgba(230,184,106,0.22); position: relative; /* PMCC beta 骑边标签定位锚点 */ padding-top: 18px; /* 给左上骑边 BETA 标签让位 */ margin-top: 16px; /* 与上方「出租收租」卡拉开, 容纳骑边标签 */ } .rec-form .strategy-card.advanced .adv-note { margin: 8px 2px 0; font-size: 11px; line-height: 1.5; color: var(--sub); } :root[data-theme="light"] .rec-form .strategy-card.advanced { background: rgba(192,143,61,0.06); border-color: rgba(192,143,61,0.26); } .rec-form .strategy-card.advanced .card-title { color: var(--accent); } .rec-form .strategy-card.advanced .card-hint { color: var(--accent); opacity: 0.72; } /* 「需先了解」→ 超链接到 PMCC 文章 /pmcc（2026-06-21）；下划线让用户看出可点 */ .rec-form .strategy-card.advanced .card-hint .adv-learn-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* PMCC beta 标签 — ⚠️ 临时, 用户说去掉时通知即可删此 CSS + 卡内 + advanced 卡的 position/padding-top/margin-top */ /* 方案 A（2026-06-21 用户选定）: 实金胶囊骑在卡左上外框线上 */ .rec-form .strategy-card.advanced .beta-badge { position: absolute; top: 0; left: 16px; transform: translateY(-50%); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-grad); border-radius: 999px; padding: 2.5px 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } .pmcc-pair-card .leg-A .leg-tag.buy { background: rgba(230,184,106,0.16); color: var(--accent); } /* 时长（7 项）：4 列网格，LEAPS 占最后 2 列 */ .rec-form .row[data-section="timeframe"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 11px; align-items: stretch; } /* v2: mobile 简化 timeframe label — desktop 长 ("当月 14-30天"), mobile 短 ("14-30d") */ .rec-form .tf-short { display: none; } @media (max-width: 640px) { .rec-form .tf-full { display: none; } .rec-form .tf-short { display: inline; } } .rec-form .row[data-section="timeframe"] .label { grid-column: 1 / -1; } .rec-form .row[data-section="timeframe"] .opt-btn[data-value="400"] { grid-column: 3 / -1; } .rec-form .row[data-section="timeframe"] .rec-form-hint { grid-column: 1 / -1; font-size: 11px; color: var(--sub); margin-top: 4px; line-height: 1.45; } .rec-form .row[data-section="timeframe"] .rec-form-hint b { color: var(--accent); font-weight: 700; } /* 「指定日期」药丸 + 日期框各占整行（grid 里默认会被当相邻单元 + stretch 撑成大方块）*/ .rec-form .row[data-section="timeframe"] .opt-btn.date-pill { grid-column: 1 / -1; align-self: start; } .rec-form .row[data-section="timeframe"] .rec-date-wrap { grid-column: 1 / -1; } /* 方向 opt-btn 内部：emoji + 文字横排 */ .rec-form .row[data-section="direction"] .opt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .rec-form .row[data-section="direction"] .opt-icon { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; } /* 风险（3 项 + Δ 元数据）：等宽 card，emoji + 主副标题 grid 布局 */ .rec-form .row[data-section="risk"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; align-items: stretch; } .rec-form .row[data-section="risk"] .label { grid-column: 1 / -1; } .rec-form .row[data-section="risk"] .opt-btn { display: grid !important; grid-template-columns: auto auto; grid-template-areas: "icon title" "sub sub"; justify-content: center; column-gap: 6px; row-gap: 3px; align-items: center; text-align: center; padding: 11px 8px; min-height: 56px; } .rec-form .row[data-section="risk"] .opt-icon { grid-area: icon; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; opacity: 0.9; } .rec-form .row[data-section="risk"] .opt-title { grid-area: title; align-self: center; font-size: 13px; line-height: 1.15; overflow-wrap: anywhere; } .rec-form .row[data-section="risk"] .opt-sub { grid-area: sub; font-size: 10.5px; letter-spacing: 0.02em; } .rec-form .opt-title { font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .rec-form .opt-sub { font-size: 10.5px; color: var(--sub); font-family: var(--font-num); font-variant-numeric: tabular-nums; line-height: 1.2; } .rec-form .opt-btn.selected .opt-title, .rec-form .opt-btn.selected .opt-sub { color: #0A0A0B; } .rec-form .opt-btn.selected .opt-sub { opacity: 0.72; } .rec-form .risk-hint { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; color: var(--sub); line-height: 1.4; } .rec-form input[type="text"], .rec-form input[type="number"] { background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font-size: 13.5px; color: var(--text); font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; width: 120px; } /* ── 多 ticker chip 输入 ─────────────────────────────────────── */ .rec-form .row[data-section="ticker"] { display: block; } .rec-form .row[data-section="ticker"] .label { display: block; width: 100%; margin-bottom: 8px; } .rec-form .ti-chips { display: flex; flex-wrap: wrap; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-height: 38px; align-items: center; cursor: text; transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .rec-form .ti-chips.focused { border-color: var(--accent-soft); } .rec-form .ti-chips.full { border-color: rgba(245,165,36,0.45); } .rec-form .ti-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(230,184,106,0.12); color: var(--accent); border: 1px solid rgba(230,184,106,0.32); padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; user-select: none; } :root[data-theme="light"] .rec-form .ti-chip { background: rgba(184,146,85,0.10); color: var(--accent-2, #B89255); border-color: rgba(184,146,85,0.32); } .rec-form .ti-chip-x { width: 18px; height: 18px; border: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; background: transparent; color: inherit; opacity: 0.65; font-size: 14px; line-height: 1; padding: 0; font-family: inherit; } .rec-form .ti-chip-x:hover { opacity: 1; background: rgba(230,184,106,0.18); } .rec-form .ti-chips input#rec-ticker { background: transparent !important; border: none !important; outline: none !important; color: var(--text); font-family: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; flex: 1; min-width: 96px; padding: 4px 2px !important; width: auto !important; border-radius: 0 !important; } .rec-form .ti-chips input#rec-ticker:disabled { cursor: not-allowed; opacity: 0.5; } .rec-form .ti-meter { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--sub); } .rec-form .ti-meter .ti-hint { flex: 1; min-width: 0; } .rec-form .ti-meter .ti-count { font-variant-numeric: tabular-nums; margin-left: auto; } .rec-form .ti-meter .ti-count.warn { color: var(--amber, #F5A524); } .rec-form .ti-meter .ti-count.full { color: var(--red, #F87171); font-weight: 600; } @media (max-width: 720px) { /* viewport meta 已 maximum-scale=1.0 + user-scalable=no, 不需要 16px hack 防 iOS zoom · 跟其他字号对齐 */ .rec-form .ti-chips input#rec-ticker { font-size: 13px; } .rec-form .ti-chip { font-size: 12.5px; padding: 3px 4px 3px 11px; } .rec-form .ti-chip-x { width: 20px; height: 20px; font-size: 14px; } } /* ⚠️ 网格项默认 min-width:auto = 内容最小宽 —— 里面那行 nowrap 的快捷 chip 会把整个 .row 顶成内容宽（10 个 chip ≈660px）、溢出 1fr 轨道，再被 #rec-form 的 overflow-x:hidden 剪掉： 用户看到 chip 被切断**而且划不动**（.ti-quickpick 压根没变成 scroller，是直接长胖了）。 min-width:0 让 .row 缩回轨道宽 → 溢出重新落回 .ti-quickpick 自己的横滑。 同 .toggles-pair > .row 那条的同一个 flex/grid 陷阱。显 5 个时刚好不溢出所以一直没暴露， 2026-08-07 扩到 10 个当场在 390px 上现形（真浏览器量出来的，静态 grep 看不见）。 */ .rec-form .row-pair.ticker-preset > .row[data-section="ticker"] { min-width: 0; } /* ── 常用标的快捷选取（极简 ghost · 混合三源：最近用过→持仓→默认）──── 单行不换行（溢出横滑·藏滚动条）；只渲染「还能加的」，已在输入框里的不重复显示。 */ .rec-form .ti-quickpick { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; margin-top: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 1px; } .rec-form .ti-quickpick::-webkit-scrollbar { display: none; } .rec-form .ti-quickpick[hidden] { display: none; } /* 溢出 affordance 走全站通用的 `.scroll-fade`（规则见文件末「横滑渐隐」段 · app.scrollfade.js 挂 class）*/ .rec-form .qp-lead { display: inline-flex; align-items: center; color: var(--dim); opacity: 0.7; flex: none; } .rec-form .qp-lead .qp-ico { width: 13px; height: 13px; display: block; } .rec-form .qp-chip { flex: none; display: inline-flex; align-items: center; background: var(--fill); border: 1px solid var(--line-2); color: var(--sub); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; cursor: pointer; user-select: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .rec-form .qp-chip:hover { border-color: var(--accent-soft); color: var(--text); background: var(--accent-tint); } @media (max-width: 720px) { .rec-form .qp-chip { font-size: 12.5px; padding: 6px 12px; } } /* ── 双轨 tab ────────────────────────────────────────────────── */ .rec-form .rec-mode-tabs { /* ⚠️ 2026-08-11 从两轨变三轨（加了「严选」）。原来写死两列，第三个 tab 会折行、 还会跑进高亮胶囊里（preview 真机截图当场看到）。改成按实际 tab 数自动分列。 */ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 14px; gap: 0; } .rec-form .rmt-tab { /* 三轨之后每格更窄：中文四字 + icon 在 375px 屏上会挤 → 缩一点内边距和字号， 并禁止折行（折行是上面那个 bug 的表现形式之一）。 */ padding: 10px 6px; white-space: nowrap; min-width: 0; background: transparent; border: none; color: var(--sub); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1); } .rec-form .rmt-tab:hover { color: var(--text); } .rec-form .rmt-tab.active { background: var(--accent); color: #0A0A0B; box-shadow: 0 2px 8px rgba(230,184,106,0.28); } .rec-form .rmt-tab .ic { font-size: 14px; line-height: 1; } /* ⭐ 严选轨的 BETA 胶囊（占了原来 icon 的位）。congyang 2026-08-12： 「不用这么宽，可以窄一些，然后能否用带颜色的，我想吸引用户的注意力，因为是新产品」 → 做成**实色小胶囊**，两态都是填充色、只换配色： 未选中 = 金底深字（在深色轨上最跳，这是"看我"的那一下） 选中 = 深底金字（整格已经是金的，金上加金看不见 → 反过来） 窄：padding 收到 4px、去掉大部分字距。 */ .rec-form .rmt-tab .rmt-beta { font-size: 8px; font-weight: 800; letter-spacing: .04em; line-height: 1; padding: 3px 4.5px 2.5px; border-radius: 4px; border: none; background: var(--gold-grad); color: var(--gold-ink); transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1); } .rec-form .rmt-tab.active .rmt-beta { background: #0A0A0B; color: var(--accent); } /* 极窄屏（iPhone SE 一档）三个中文标签仍会顶到边 → 再降一档字号，icon 让位 */ @media (max-width: 380px) { .rec-form .rmt-tab { font-size: 11px; padding: 9px 3px; gap: 3px; } .rec-form .rmt-tab .ic { display: none; } } /* ── 🎯 目标驱动子表单 ───────────────────────────────────────── */ .rec-form .row[data-section="goal"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; align-items: stretch; } .rec-form .row[data-section="goal"] .label { grid-column: 1 / -1; } .rec-form .goal-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; background: transparent; border: 1.5px solid var(--line-2); border-radius: 10px; color: var(--text); cursor: pointer; font-family: inherit; transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .rec-form .goal-card:hover { border-color: var(--accent); background: rgba(230,184,106,0.07); } .rec-form .goal-card.selected { background: var(--accent); color: #0A0A0B; border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 4px 14px rgba(230,184,106,0.30); } .rec-form .goal-card .gc-ic { font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .rec-form .goal-card .gc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rec-form .goal-card .gc-t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } .rec-form .goal-card .gc-s { font-size: 11px; color: var(--sub); line-height: 1.35; } .rec-form .goal-card.selected .gc-s { color: rgba(10,10,11,0.72); } .rec-form .rec-goal-num { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card2); padding: 6px 12px; gap: 4px; width: fit-content; transition: border-color 0.18s; } .rec-form .rec-goal-num:focus-within { border-color: var(--accent-soft); } .rec-form .rec-goal-num .pre, .rec-form .rec-goal-num .post { color: var(--sub); font-size: 12px; } .rec-form .rec-goal-num input { border: none; background: transparent; outline: none; color: var(--text); font-size: 14px; font-weight: 700; width: 90px; padding: 2px 0; font-variant-numeric: tabular-nums; font-family: inherit; } .rec-form .rec-goal-num input::-webkit-outer-spin-button, .rec-form .rec-goal-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rec-form .goal-num-hint { font-size: 11px; color: var(--sub); margin-left: 10px; } .rec-form .rec-goal-preview { font-size: 12px; background: rgba(230,184,106,0.10); border: 1px solid var(--accent-2, rgba(184,146,85,0.6)); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; } .rec-form .rec-goal-preview .arrow { color: var(--accent); font-weight: 700; margin-right: 6px; } .rec-form .rec-goal-preview strong { color: var(--text); } /* 🔄 Roll 同类型锁定（2026-06-17）：roll 模式下隐掉所有能改「期权类型 / 标的」的控件， 把策略锁成旧腿类型，杜绝跨类型 / 跨标的乱算 net credit。ticker 仍在 chips 数据里 （CSS 隐藏不清值），submitRec 的 _recTickerList 照常读得到 → 提交不受影响。 */ .rec-form.is-rolling #rec-mode-tabs, .rec-form.is-rolling .ticker-preset, .rec-form.is-rolling #rec-goal-mode, .rec-form.is-rolling [data-section="intent"], .rec-form.is-rolling .toggles-pair { display: none !important; } /* :not([hidden]) 必须保留 — 作者级 display:flex 会盖过 UA 的 [hidden]{display:none}（作者样式优先于 UA，与特异性无关）→ 否则 banner 即便 hidden=true 仍渲染成空的金边框（推荐表单标的栏上方那个空框 bug） */ .rec-roll-lock:not([hidden]) { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; padding: 11px 13px; border-radius: 14px; background: var(--glass-grad), var(--accent-tint); border: 1px solid var(--accent-soft); box-shadow: var(--bevel); } .rec-roll-lock .rl-ic { flex: 0 0 auto; color: var(--accent); display: inline-flex; margin-top: 1px; } .rec-roll-lock .rl-ic .ico { width: 18px; height: 18px; } .rec-roll-lock .rl-body { min-width: 0; } .rec-roll-lock .rl-t { display: block; font-size: 13px; font-weight: 700; color: var(--text); } .rec-roll-lock .rl-d { display: block; font-size: 12px; color: var(--sub); line-height: 1.5; margin-top: 2px; } .rec-roll-lock .rl-d b { color: var(--text); font-weight: 600; } /* 🔄 展期口径条（roll 候选卡专属）：卖新腿 +X − 买回旧腿 Y = 净额，让净额不再凭空冒出来 */ .roll-econ { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 2px; padding: 9px 12px; border-radius: 12px; background: var(--glass-grad), var(--card2); border: 1px solid var(--edge); font-size: 12px; color: var(--sub); } .roll-econ .re-title { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text); } .roll-econ .re-title .ico { width: 14px; height: 14px; color: var(--accent); } .roll-econ .re-part b { font-weight: 700; } .roll-econ .re-eq { color: var(--dim); } .roll-econ .re-net { font-weight: 600; color: var(--text); } .roll-econ .re-net b { font-weight: 800; } /* 自有 up/down 类名，避免撞全局 .pos（持仓卡容器类 · 带边框/圆角/底色 → 会把数字渲成药丸） */ .roll-econ .re-up { color: var(--green); } .roll-econ .re-down { color: var(--red); } .rec-form .submit-row { /* v2.0.3: submit-row 现在在 candidates 之上（不再 modal 末端）。 场景：用户拿到 10 个候选想再换组合时，按钮不用滚到最底才能找到。 保留 -24px 横向负 margin 贴满 modal、border-top 作 form 与 result 的分隔。 */ display: flex; gap: 8px; justify-content: flex-end; margin: 18px -24px 16px; padding: 16px 24px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--card2); } .rec-form button.submit { background: var(--accent); color: #0A0A0B; border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .rec-form button.submit:hover { background: var(--accent-light); transform: scale(1.03); box-shadow: 0 6px 20px rgba(230,184,106,0.32); } .rec-form button.submit:active { transform: scale(0.97); box-shadow: none; } .rec-form button.submit:disabled { background: var(--card2); color: var(--sub); cursor: not-allowed; } .rec-form button.submit:disabled:hover { background: var(--card2); transform: none; box-shadow: none; } .rec-form button.submit .cost-pill { display: inline-flex; align-items: center; gap: 3px; background: #1A1410; color: var(--accent-light); padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: -0.1px; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset; } .rec-form button.submit .cost-pill::after { content: ""; display: inline-block; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--coin-mask) no-repeat center / contain; mask: var(--coin-mask) no-repeat center / contain; margin-left: 1px; } .rec-form button.submit:disabled .cost-pill { background: rgba(0,0,0,0.20); color: var(--sub); } .rec-form button.cancel { background: transparent; color: var(--sub); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), color 0.15s, border-color 0.15s; } .rec-form button.cancel:hover { color: var(--text); border-color: var(--line-2); transform: scale(1.02); } .rec-form button.cancel:active { transform: scale(0.97); } .rec-result { margin-top: 12px; } /* 推荐结果的 summary —— 不要继承持仓页 .summary 的 6 列 grid （那个 grid 会把内联 text+strong 错拆成 3 列）。回到普通流。 */ .rec-result .summary { display: block !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 10px; font-size: 12px; color: var(--sub); line-height: 1.7; } .rec-result .summary strong { color: var(--text); font-weight: 600; } .rec-result .summary .sm-line { display: block; font-size: 12.5px; color: var(--text); line-height: 1.55; } .rec-result .summary .sm-meta { display: block; font-size: 10.5px; color: var(--sub); line-height: 1.5; margin-top: 4px; opacity: 0.85; } .rec-result .summary .sm-meta strong { color: var(--sub); font-weight: 500; } /* 免责声明（醒目但不刺眼）*/ .disclaimer { background: rgba(250,204,21,0.12); border-radius: 6px; padding: 8px 12px; margin: 10px 0; font-size: 11px; line-height: 1.5; color: var(--text); } .disclaimer strong { color: var(--orange); } :root[data-theme="dark"] .disclaimer { background: rgba(250,204,21,0.06); } /* Tier filter pill row */ .tier-filter { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; } .tier-filter .tf-label { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; margin-right: 4px; } .tier-filter .tf-pill { background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 14px; padding: 5px 12px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; letter-spacing: -0.005em; transition: border-color 0.15s, background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 6px; } .tier-filter .tf-pill:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .tier-filter .tf-pill.active { background: var(--accent); color: #0A0A0B; border-color: var(--accent); } .tier-filter .tf-pill .tier-stars { color: var(--accent); } .tier-filter .tf-pill.active .tier-stars { color: #0A0A0B; } .tier-filter .tf-pill:disabled { opacity: 0.35; cursor: not-allowed; } .tier-filter .tf-n { font-family: var(--font-num); font-size: 11px; opacity: 0.75; font-variant-numeric: tabular-nums; } .tier-filter .tf-pill.active .tf-n { opacity: 0.9; } /* RENT 算法徽章 */ .algo-badge { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: linear-gradient(180deg, rgba(230,184,106,0.06) 0%, rgba(230,184,106,0.02) 100%); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; font-size: 12px; } .algo-badge .algo-name { color: var(--accent); font-weight: 600; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 6px; } .algo-badge .algo-tag { color: var(--sub); font-size: 11px; } /* Rent score components panel */ .rent-components { margin-top: 8px; padding: 8px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--sub); line-height: 1.7; } .rent-components .rc-row { display: flex; justify-content: space-between; gap: 8px; } .rent-components .rc-k { color: var(--sub); } .rent-components .rc-v { font-family: var(--font-num); color: var(--text); font-variant-numeric: tabular-nums; } .rent-components .rc-v.good { color: var(--green); } .rent-components .rc-v.bad { color: var(--red); } /* 包租公分不适用提示（买入期权） */ .rent-components.rent-na { border-style: dashed; background: transparent; } .rent-components.rent-na .rent-na-title { color: var(--accent); font-weight: 600; margin-bottom: 4px; font-size: 11.5px; } .rent-components.rent-na .rent-na-body { color: var(--sub); font-size: 11px; line-height: 1.55; } .rent-components.rent-na .rent-na-body code { background: var(--card3); padding: 1px 5px; border-radius: 3px; font-family: var(--font-num); font-size: 10.5px; color: var(--text); } /* ── 包租公 2.0 信号 box（EV / VRP / RV / 压测 / 资金占用）─────────── */ .v2-sigbox { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; } .v2-sigbox-head { font-size: 11px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .v2-sigbox-head::after { content: ''; flex: 1; height: 1px; background: var(--line); } .v2-sigrow { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; font-size: 13px; align-items: center; /* 标签换两行时右侧数字垂直居中（原 baseline 只对齐首行 → 数字贴顶）*/ position: relative; cursor: help; } @media (max-width: 600px) { .v2-sigrow { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 6px; font-size: 12.5px; } } .v2-sigrow-l { color: var(--sub); font-size: 12px; display: flex; align-items: center; gap: 4px; } .v2-sigrow-v { font-weight: 600; } .v2-sigrow-tag { font-size: 11px; padding: 2px 7px; border-radius: 4px; color: var(--sub); background: var(--card3); white-space: nowrap; } .v2-sigrow-v.good, .v2-sigrow-tag.good { color: var(--green); } .v2-sigrow-v.bad, .v2-sigrow-tag.bad { color: var(--red); } .v2-sigrow-v.warn, .v2-sigrow-tag.warn { color: var(--orange); } /* "偏贵 / 合理 / 偏便宜" verdict chip (EV / VRP 行专用) */ .v2-sigrow-tag.verdict-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--accent-tint-strong); background: var(--accent-tint); color: var(--accent); white-space: nowrap; line-height: 1.5; } .v2-sigrow-tag.verdict-pill.fair { background: var(--card); border-color: var(--line); color: var(--sub); } .v2-sigrow-tag.verdict-pill.cheap { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.4); color: var(--red); } @media (max-width: 600px) { .v2-sigrow-tag.verdict-pill { font-size: 10px; padding: 1px 6px; } } .v2-help { display: inline-block; font-size: 9px; font-weight: 700; color: var(--sub); background: var(--card3); border-radius: 50%; width: 13px; height: 13px; text-align: center; line-height: 13px; margin-left: 1px; transition: color 0.15s, background 0.15s; } .v2-sigrow:hover .v2-help, .v2-sigrow.show-tip .v2-help { color: var(--accent); background: var(--accent-tint-strong); } /* hover tooltip — 桌面 hover / 移动 tap toggle */ .v2-sigrow[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 100; background: var(--card3); color: var(--text); font-size: 11px; font-weight: 400; line-height: 1.55; padding: 8px 11px; border-radius: 6px; white-space: normal; box-shadow: 0 6px 20px rgba(0,0,0,0.45); border: 1px solid var(--line); opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; } /* tap toggle（移动端唯一入口）— 任何设备都生效 */ .v2-sigrow[data-tip].show-tip::after { opacity: 1; transform: translateY(0); } /* hover 仅限真·鼠标设备：iOS 触摸（含滚动经过）会误触发 :hover → tooltip 乱弹， 用 @media (hover: hover) 把 hover 入口关在触摸设备外（2026-06-21 用户报 iPhone PWA 滚动误开） */ @media (hover: hover) and (pointer: fine) { .v2-sigrow[data-tip]:hover::after { opacity: 1; transform: translateY(0); } } /* ── 50/50 split: 2.0 信号 + P&L 曲线（rec card candidate A 布局）────── */ .rec-pnl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 10px 0; } .rec-pnl-split .v2-sigbox, .rec-pnl-split .rec-pnl-wrap { margin: 0; } /* split 内 v2-sigbox 永远走紧凑布局（侧面 ~440px 宽放不下 130px label）*/ .rec-pnl-split .v2-sigrow { grid-template-columns: 128px minmax(0, 1fr) auto; /* 100→128：中文 VRP（波动率溢价）名称不再挤成两行 */ gap: 6px; font-size: 12.5px; } .rec-pnl-split .v2-sigrow-l { font-size: 11.5px; } .rec-pnl-split .v2-sigrow-tag { font-size: 10.5px; padding: 1px 6px; } .rec-pnl-split .v2-sigrow-tag.verdict-pill { font-size: 10.5px; padding: 1px 6px; } /* ── 登录解锁遮罩（匿名用户）─────────────────────────────────────── */ .rec-locked { position: relative; margin: 10px 0; } .rec-lock-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; margin: 0 !important; } .rec-lock-chart { width: 100%; height: 64px; display: block; } .rec-lock-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 10px; } .rec-lock-card { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; max-width: min(320px, 92%); box-shadow: 0 8px 28px rgba(0,0,0,0.32); } .rec-lock-icon { font-size: 22px; line-height: 1; margin-bottom: 7px; } .rec-lock-title { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 5px; } .rec-lock-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 13px; } .rec-lock-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #1a1407; border: none; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter var(--dur-quick, .12s) var(--ease-out, ease); } .rec-lock-btn svg { background: #fff; border-radius: 3px; padding: 1px; } .rec-lock-btn:hover { filter: brightness(1.07); } .rec-pnl-wrap { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; } .rec-pnl-head { font-size: 11px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .rec-pnl-head::after { content: ''; flex: 1; height: 1px; background: var(--line); order: 1; } /* 折叠 chevron：默认隐藏（桌面/移动浏览器不折叠），仅手机 PWA 显示 */ .rec-pnl-chev { display: none; order: 2; flex: 0 0 auto; width: 14px; height: 14px; margin-left: 4px; color: var(--sub); transition: transform var(--dur-quick, .12s) var(--ease-out, ease); } .rec-pnl-wrap.rec-pnl-open .rec-pnl-chev { transform: rotate(180deg); } .rec-pnl-svg { width: 100%; height: auto; display: block; } .rec-pnl-legend { font-size: 10px; color: var(--sub); display: flex; gap: 12px; padding: 4px 4px 0; margin-top: 2px; } .rec-pnl-legend span { display: inline-flex; align-items: center; gap: 4px; } /* 手机端 / 窄屏：stack 成上下 */ @media (max-width: 768px) { .rec-pnl-split { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* 手机 PWA：损益曲线默认收起（省竖向空间），点标题展开 */ body.nav-enabled .rec-pnl-wrap.rec-pnl-collapsible .rec-pnl-head { cursor: pointer; margin-bottom: 0; user-select: none; } body.nav-enabled .rec-pnl-wrap.rec-pnl-collapsible .rec-pnl-chev { display: inline-flex; } body.nav-enabled .rec-pnl-wrap.rec-pnl-collapsible.rec-pnl-open .rec-pnl-head { margin-bottom: 6px; } body.nav-enabled .rec-pnl-wrap.rec-pnl-collapsible:not(.rec-pnl-open) .pf-chart-wrap, body.nav-enabled .rec-pnl-wrap.rec-pnl-collapsible:not(.rec-pnl-open) .rec-pnl-legend { display: none; } } /* ── 🪜 Ladder 阶梯方案卡片（v2 #2，A+ 表格+楼梯色阶） ──────────────── */ .ld-card { background: linear-gradient(135deg, var(--card2), var(--card)); border: 1px solid var(--accent); border-radius: 14px; padding: 16px 18px; margin: 14px 0; box-shadow: 0 8px 28px rgba(230,184,106,0.08); } @media (max-width: 600px) { .ld-card { padding: 13px 12px; } } .ld-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .ld-title { font-size: 16px; font-weight: 700; color: var(--accent); } .ld-sub { color: var(--sub); font-size: 12px; } .ld-actions { margin-left: auto; display: flex; gap: 6px; } .ld-btn { padding: 6px 12px; border-radius: 8px; font-size: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--text); cursor: pointer; } .ld-btn.primary { background: var(--accent); color: #1A1A1A; border-color: transparent; font-weight: 600; } .ld-btn.primary:hover { background: var(--accent-light); } .ld-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } @media (max-width: 600px) { .ld-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ld-stat { background: var(--card3); border-radius: 8px; padding: 8px 10px; } .ld-stat-l { font-size: 11px; color: var(--sub); margin-bottom: 3px; } .ld-stat-v { font-size: 16px; font-weight: 700; } .ld-stat-v.good { color: var(--green); } .ld-stat-v.accent { color: var(--accent); } .ld-stat-v.bad { color: var(--red); } .ld-stat-sub { font-size: 10px; color: var(--sub); margin-top: 2px; } .ld-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card3); border-radius: 8px; overflow: hidden; } .ld-table th, .ld-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; position: relative; } .ld-table th { background: var(--card2); color: var(--sub); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } .ld-table th:first-child, .ld-table td:first-child { text-align: left; } .ld-table td.good { color: var(--green); } .ld-table tr:last-child td { border-bottom: none; } .ld-row { position: relative; } .ld-row .strike-cell { position: relative; padding-left: 14px !important; } .ld-bar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; } .ld-fill { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0; } .ld-row > td { position: relative; z-index: 1; } .ld-strike { font-weight: 700; font-size: 14px; } .ld-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; background: var(--card2); } /* 4 rung 配色 + 宽度（最安全 35% → 最激进 100%） */ .ld-row[data-rung="r0"] .ld-bar { background: var(--green); } .ld-row[data-rung="r0"] .ld-strike { color: var(--green); } .ld-row[data-rung="r0"] .ld-fill { width: 35%; background: linear-gradient(90deg, rgba(52,211,153,0.12), transparent); } .ld-row[data-rung="r0"] .ld-tag { color: var(--green); background: rgba(52,211,153,0.15); } .ld-row[data-rung="r1"] .ld-bar { background: var(--accent-light); } .ld-row[data-rung="r1"] .ld-strike { color: var(--accent-light); } .ld-row[data-rung="r1"] .ld-fill { width: 55%; background: linear-gradient(90deg, rgba(240,199,120,0.13), transparent); } .ld-row[data-rung="r2"] .ld-bar { background: var(--accent); } .ld-row[data-rung="r2"] .ld-strike { color: var(--accent); } .ld-row[data-rung="r2"] .ld-fill { width: 75%; background: linear-gradient(90deg, var(--accent-tint-strong), transparent); } .ld-row[data-rung="r3"] .ld-bar { background: var(--red); } .ld-row[data-rung="r3"] .ld-strike { color: var(--red); } .ld-row[data-rung="r3"] .ld-fill { width: 100%; background: linear-gradient(90deg, rgba(248,113,113,0.14), transparent); } .ld-row[data-rung="r3"] .ld-tag { color: var(--red); background: rgba(248,113,113,0.15); } /* 移动端：表格变 mini 卡 */ .ld-mobile-cards { display: none; } @media (max-width: 600px) { .ld-table { display: none; } .ld-mobile-cards { display: block; } } .ld-mrung { position: relative; background: var(--card3); border-radius: 8px; padding: 8px 10px 8px 14px; margin-bottom: 6px; overflow: hidden; } .ld-mrung .ld-mbar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; } .ld-mrung .ld-mfill { position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; } .ld-mrung > * { position: relative; z-index: 1; } .ld-mrung-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .ld-mrung-strike { font-weight: 700; font-size: 14px; } .ld-mrung-prob { font-size: 12px; } .ld-mrung-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; font-size: 11px; color: var(--sub); } .ld-mrung-body strong { color: var(--text); font-weight: 600; } .ld-mrung[data-rung="r0"] .ld-mbar { background: var(--green); } .ld-mrung[data-rung="r0"] .ld-mrung-strike { color: var(--green); } .ld-mrung[data-rung="r0"] .ld-mfill { width: 35%; background: linear-gradient(90deg, rgba(52,211,153,0.12), transparent); } .ld-mrung[data-rung="r1"] .ld-mbar { background: var(--accent-light); } .ld-mrung[data-rung="r1"] .ld-mrung-strike { color: var(--accent-light); } .ld-mrung[data-rung="r1"] .ld-mfill { width: 55%; background: linear-gradient(90deg, rgba(240,199,120,0.13), transparent); } .ld-mrung[data-rung="r2"] .ld-mbar { background: var(--accent); } .ld-mrung[data-rung="r2"] .ld-mrung-strike { color: var(--accent); } .ld-mrung[data-rung="r2"] .ld-mfill { width: 75%; background: linear-gradient(90deg, var(--accent-tint-strong), transparent); } .ld-mrung[data-rung="r3"] .ld-mbar { background: var(--red); } .ld-mrung[data-rung="r3"] .ld-mrung-strike { color: var(--red); } .ld-mrung[data-rung="r3"] .ld-mfill { width: 100%; background: linear-gradient(90deg, rgba(248,113,113,0.14), transparent); } /* 不可负担警告 */ .ld-warn { margin: 8px 0 0; padding: 8px 12px; border-radius: 6px; background: rgba(248,113,113,0.12); font-size: 12px; color: var(--red); } /* 自适应缩档提示（信息蓝） */ .ld-info { margin: 8px 0 0; padding: 8px 12px; border-radius: 6px; background: rgba(230,184,106,0.11); font-size: 12px; color: var(--accent); } /* 🔄 Roll banner & net_credit chip */ .roll-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: linear-gradient(135deg, rgba(230,184,106,0.10), rgba(184,146,85,0.04)); border: 1px solid var(--accent); border-radius: 10px; font-size: 13px; line-height: 1.5; } .roll-banner-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; } .roll-banner-body { flex: 1; } .roll-banner-body strong { color: var(--accent); } .roll-banner-hint { color: var(--sub); font-size: 11.5px; display: inline-block; margin-top: 2px; } .roll-credit { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 700; margin-left: 6px; } .roll-credit.good { background: rgba(52,211,153,0.18); color: var(--green); } .roll-credit.bad { background: rgba(248,113,113,0.18); color: var(--red); } /* Roll 按钮（持仓卡）*/ .pos-actions .roll-btn { color: var(--accent); } .pos-actions .roll-btn:hover { background: var(--accent-tint); border-color: var(--accent); } /* IV Rank 横幅 */ .iv-banner { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 14px 0; } /* 推荐上下文卡（策略 + IV + 回测三合一，方向 1 落地） */ .ctx-card { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 14px 0; } /* 「这只票在发生什么」面板（Form A/B） */ .pulse-card { background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin: 12px 0; } .pulse-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .pulse-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pulse-hd-tk { font-size: 13px; font-weight: 700; color: var(--text); min-width: 0; } .pulse-hd-co { font-weight: 500; font-size: 12px; color: var(--dim); } .pulse-hd-px { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .pulse-hd-chg { font-size: 12px; font-weight: 700; margin-left: 6px; } .pulse-hd-chg.up { color: var(--green); } .pulse-hd-chg.dn { color: var(--red); } .pulse-today { font-size: 10.5px; font-weight: 600; color: var(--dim); margin-right: 6px; vertical-align: 2px; } .pulse-spark-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; } .pulse-spark { flex: none; display: block; } .pulse-area-wrap { flex: 1 1 auto; min-width: 0; position: relative; height: 40px; } .pulse-area { display: block; width: 100%; height: 40px; } .pulse-area-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .pulse-area-anno { position: absolute; font-size: 9px; line-height: 1; color: var(--dim); font-family: var(--font-num); font-variant-numeric: tabular-nums; pointer-events: none; } /* 「近三个月」淡水印：移进图内的不明显范围标签（top-left）*/ .pulse-area-range { position: absolute; top: 1px; left: 2px; font-size: 8.5px; letter-spacing: 0.3px; line-height: 1; color: var(--sub); opacity: 0.5; pointer-events: none; } .pulse-spark-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: none; } .pulse-spark-lab { font-size: 10.5px; color: var(--sub); opacity: 0.78; } .pulse-trend-txt { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; } .pulse-ma-txt { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; } /* 走势图下方全宽数据行：近三个月区间的低/高价（价格移出图外，图内不再压字 = pulse 打磨方案 A） */ .pulse-axis { display: flex; align-items: baseline; gap: 14px; margin: 5px 0 0; font-size: 10.5px; color: var(--sub); font-variant-numeric: tabular-nums; letter-spacing: 0.2px; flex-wrap: wrap; } .pulse-axis .rng { color: var(--dim); font-weight: 600; letter-spacing: 0.4px; } .pulse-axis b { color: var(--text); font-weight: 700; } .pulse-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); } .pulse-title + .pulse-row, .pulse-spark-row + .pulse-row, .pulse-hd + .pulse-row { border-top: none; } .pulse-row-dim { opacity: 0.72; } .pulse-ic { flex: none; width: 18px; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .pulse-ic .ico { width: 15px; height: 15px; } .pulse-bd { flex: 1; min-width: 0; } .pulse-lab { font-size: 12.5px; color: var(--text); font-weight: 600; line-height: 1.45; } .pulse-det { font-size: 12px; color: var(--sub); margin-top: 2px; line-height: 1.5; } .pulse-why { font-size: 11.5px; color: var(--accent); margin-top: 3px; line-height: 1.5; } .pulse-up { color: var(--green); font-weight: 700; } .pulse-dn { color: var(--red); font-weight: 700; } .pulse-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; margin-left: 6px; font-weight: 600; white-space: nowrap; } .pulse-tag.warn { color: var(--red); background: rgba(210,102,79,0.14); } .pulse-tag.ok { color: var(--green); background: rgba(78,166,116,0.14); } .pulse-news { margin-top: 3px; } .pulse-news-it { display: flex; gap: 6px; font-size: 12px; color: var(--text); line-height: 1.45; padding: 2px 0; } .pulse-news-it a { color: var(--text); text-decoration: none; } .pulse-news-it a:hover { text-decoration: underline; } .pulse-dot { color: var(--dim); flex: none; } .pulse-news-meta { color: var(--sub); font-size: 10.5px; } /* 胶囊：inline-flex + align-items:center + vertical-align:middle → 文字在胶囊内居中 + 与相邻标题对齐。 inset 同色实边把半透明填充在圆角淡出的橄榄/金脏边压成一条干净绿/红线 —— **这条边才是真正的居中修复**： 脏底边曾让文字看着「偏上」（只加深填充治标不治本·见 .ch-src.expire 同款惯例·box-shadow 不占布局故尺寸不变）。 congyang PingFang 真机对照（/chip-pick）确认边修好后无需任何 translateY（Noto 沙盒里坐得更高才误加过·已撤）。 */ .pulse-sent { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 6px; border-radius: 999px; margin-right: 5px; vertical-align: middle; } .pulse-sent.pos { color: var(--green); background: rgba(63,221,156,0.14); box-shadow: inset 0 0 0 1px rgba(63,221,156,0.42); } .pulse-sent.neg { color: var(--red); background: rgba(255,126,120,0.13); box-shadow: inset 0 0 0 1px rgba(255,126,120,0.40); } /* 愿接清单两态分段控件（未定 ↔ 愿意接 · thumb 滑动 · 2026-07-26） */ .pulse-wo-seg { margin-top: 12px; } .pulse-wo-q { display: block; font-size: 12px; color: var(--sub); margin: 0 0 8px; line-height: 1.4; } .pulse-wo-track { position: relative; display: flex; gap: 4px; padding: 4px; background: var(--well); border: 1px solid var(--edge); border-radius: 12px; } .pulse-wo-track .pwo-btn { position: relative; z-index: 2; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--sub); background: none; border: none; border-radius: 9px; padding: 8px 10px; cursor: pointer; transition: color var(--dur-quick) var(--ease-out); } .pulse-wo-track .pwo-btn .ico { width: 14px; height: 14px; } .pulse-wo-track .pwo-btn.sel { color: var(--text); } .pulse-wo-seg.pick-on .pulse-wo-track .pwo-btn.sel { color: var(--green); } .pulse-wo-thumb { position: absolute; z-index: 1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 9px; background: var(--card3); border: 1px solid var(--edge); transition: transform var(--dur-normal) var(--ease-spring), background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .pulse-wo-seg.pick-on .pulse-wo-thumb { transform: translateX(calc(100% + 4px)); background: rgba(78,166,116,0.14); border-color: rgba(78,166,116,0.42); } /* ⭐ 标的态度三态（congyang 2026-08-13 拍板 A 案 · /watch-pick 留档）： 未定 / 关注 / 愿意接 —— 用户对一只票的三种态度，一个控件说完。 ⚠️ 递进关系是**语义上的**（愿意接 ⊃ 关注），显示上仍然三选一； 颜色也跟着递进：关注 = 金（--accent），愿意接 = 绿（--green，沿用老的两态口径）。 seg2 = 只有前两格的场景（卖 call / 收权利金：那里「被指派后愿意持有」没有意义）。 */ .wt-seg.seg3 .pulse-wo-thumb { width: calc(33.333% - 5.33px); } .wt-seg.seg2 .pulse-wo-thumb { width: calc(50% - 6px); } .wt-seg.pick-watch .pulse-wo-thumb { transform: translateX(calc(100% + 4px)); background: var(--accent-tint-strong); border-color: var(--accent-soft); } .wt-seg.seg3.pick-willing .pulse-wo-thumb { transform: translateX(calc(200% + 8px)); background: rgba(78,166,116,0.14); border-color: rgba(78,166,116,0.42); } .wt-seg.pick-watch .pulse-wo-track .pwo-btn.sel { color: var(--accent); } .wt-seg.pick-willing .pulse-wo-track .pwo-btn.sel { color: var(--green); } /* 「今天不肥？先关注上」—— 扫完没好货时的落点 */ .wt-lure { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fill); border: 1px solid var(--line); } .wt-lure-tx { font-size: 12.5px; color: var(--sub); line-height: 1.5; } .wt-lure-done { color: var(--accent); } .wt-lure-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--fill-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .wt-lure-btn:hover { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent); } .wt-lure-btn .ico { width: 14px; height: 14px; } /* ── 右栏「我关注的」卡（C 案三列表 · congyang 2026-08-13 在 /watch-pick 上选的）── ⚠️ 数字列**和表头一起**右对齐（DESIGN §7）—— 竖着扫「今天谁最肥」靠的就是这条。 */ /* ── B 案（congyang 2026-08-14 在 /watch2-pick 上选的）：一行拆成两句话 ── 上行「这只票现在怎么样」（价 · 涨跌 · 星级），下行「最肥的那张长什么样」 （卖 put $17 · 36天 ····· 年化 29.2%），中间点线连起来，像一张收据。 两个数字各自贴着自己那句话 —— 这正是他问的「29.2% 是谁的年化」。 */ /* hover 遮罩往**外**咬进卡片那 20px 内边距 10px，正文位置一格不动（congyang 2026-08-14： 「遮罩和文字没有留一个margin」）→ 遮罩离字 10px、离卡边还剩 10px，两头都有呼吸。 ⚠️ 反过来做（把字往里缩 10px）也能拉开这段距离，但那样标题 h3 和正文就成了两条左缘 —— 在一张 300px 的窄卡里，多一条左缘比挤一点更显脏，而且正文那两行本来就 nowrap，缩不起。 */ .watch-card .wt-row { display: block; width: calc(100% + 20px); margin: 0 -10px; text-align: left; font: inherit; position: relative; background: none; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: background var(--dur-quick) var(--ease-out); } /* 分隔线走 ::before 而不是 border-top：行已经往外伸了 10px，border 会跟着伸出去、 和正文左右缘错开一截。inset 10px 让它正好收在文字的两端。 */ .watch-card .wt-row::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1px solid var(--line); transition: opacity var(--dur-quick) var(--ease-out); } .watch-card .wt-row:first-child::before { display: none; } .watch-card .wt-row:hover { background: var(--fill); } /* hover 时把**自己头顶**和**下一行头顶**那两条线灭掉：不灭的话，两条分隔线正好横切过 圆角遮罩的上下边，看起来像遮罩被划了两刀。⚠️ 这个只有拿**真数据的真机截图**才看得出来 —— 我先用合成数据渲了一版，那里两条线跟遮罩边缘重合、根本分不出，差点就这么发出去了。 灭掉也不丢信息：遮罩本身已经把这一行圈出来了。用 opacity 不用 display，免得进出时抖一下。 */ .watch-card .wt-row:hover::before, .watch-card .wt-row:hover + .wt-row::before { opacity: 0; } .watch-card .wt-r1 { display: flex; align-items: baseline; gap: 5px; } .watch-card .wt-r2 { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; } .watch-card .wt-sp { flex: 1; } /* 点线引导：把左边那句话和右边那个数连起来（收据感）。⚠️ 这是**装饰**， 所以它是空 span 而不是一串「·····」字符 —— 别让读屏软件念一串点。 */ .watch-card .wt-lead { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); margin: 0 6px; } /* min-width 42px ≈ 五字母票名的宽度：票名短的行留白补齐，价格才从同一个 x 起 —— 没有它，DRAM / MRVL / F 三行的价格各起一个位置，一列价格是锯齿的。 跟 .wt-badge-off 那个空槽是**一对**，缺一个这列就还是歪的。 */ .watch-card .wt-tk { font-weight: 700; font-size: 13px; letter-spacing: -.01em; color: var(--text); min-width: 42px; } /* 「愿意接」徽标的空槽：占位不显形（见 app.watch.js `_wtCardHtml` 里的说明） */ .watch-card .wt-badge-off { visibility: hidden; } .watch-card .wt-px { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--sub); } .watch-card .wt-up { color: var(--green); } .watch-card .wt-dn { color: var(--red); } .watch-card .wt-deal { font-size: 10.5px; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; } .watch-card .wt-sub { font-size: 10.5px; color: var(--dim); margin-top: 2px; line-height: 1.4; } /* ⚠️ letter-spacing 会在**最后一颗星后面也加** .5px → 星级块的右缘比下一行的「年化」右缘 多出 .5px，两行右对齐差了半个像素。负 margin 把那半格吃回来（DESIGN §7：右对齐就要真齐）。 */ .watch-card .wt-stars { color: var(--accent); font-size: 11px; letter-spacing: .5px; margin-right: -.5px; white-space: nowrap; } .watch-card .wt-ann { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: 12px; white-space: nowrap; } .watch-card .wt-ann-dim { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sub); font-size: 12px; white-space: nowrap; } /* ⭐ align-self 是必需的，不是微调：这枚徽标是 inline-flex 且**只有一个图标没有文字** → 它在 `align-items: baseline` 的行里没有可用的文字基线，浏览器拿它的下外边缘当基线， 于是整枚胶囊整个吊在文字基线**之上**（NBIS 那行肉眼可见地偏高）。改按行高居中。 */ .watch-card .wt-badge { padding: 1px 5px; margin-left: 2px; align-self: center; } .watch-card .wt-badge .ico { width: 10px; height: 10px; } .watch-card .wt-hot { color: var(--green); } .watch-card .wt-cool { color: var(--sub); } .watch-card .wt-warn { color: var(--red); } .watch-card .wt-dim { color: var(--dim); } .watch-card .wt-sep { color: var(--line-2); } .watch-card .wt-manage { margin-top: 8px; font: inherit; font-size: 11.5px; color: var(--sub); background: none; border: none; padding: 4px 0; cursor: pointer; } .watch-card .wt-manage:hover { color: var(--accent); } .watch-card .wt-empty { font-size: 12px; color: var(--sub); line-height: 1.55; } .watch-card .wt-empty-s { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.5; } /* 「我关注的」列表里那枚「愿意接」标记（层② > 层①，标出来才看得出递进） */ .wt-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; font-size: 10.5px; font-weight: 600; color: var(--green); background: rgba(78,166,116,0.13); border: 1px solid rgba(78,166,116,0.34); border-radius: 999px; padding: 2px 7px; } .wt-badge .ico { width: 11px; height: 11px; } .ctx-card .ctx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ctx-card .ctx-ticker { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; } .ctx-card .ctx-price { font-size: 15px; color: var(--text); font-weight: 500; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .ctx-card .ctx-strat { margin-left: auto; font-size: 12px; color: var(--accent); font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(230,184,106,0.10); border: 1px solid rgba(230,184,106,0.30); } .ctx-card .ctx-meta { font-size: 11px; color: var(--sub); margin-top: 4px; } .ctx-card .ctx-meta strong { color: var(--text); font-weight: 500; } .ctx-card .ctx-divider { height: 1px; background: var(--line); margin: 12px 0; } .ctx-card .ctx-iv { display: flex; flex-direction: column; gap: 7px; } .ctx-card .ctx-iv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px; } .ctx-card .ctx-iv-rank { font-size: 22px; font-weight: 700; color: var(--text); font-family: var(--font-num); line-height: 1; } .ctx-card .ctx-iv-rank-lab { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 1px; } .ctx-card .ctx-iv-chip { margin-left: auto; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; } .ctx-card .ctx-iv-chip.low { background: rgba(74,222,128,0.14); color: var(--green); } .ctx-card .ctx-iv-chip.mid { background: rgba(250,204,21,0.14); color: var(--yellow); } .ctx-card .ctx-iv-chip.high { background: rgba(248,113,113,0.14); color: var(--red); } /* IV 到阈值提醒铃铛（头部 · A1 描边金基座 · 取代旧「接下来」块的提醒入口） */ .ctx-card .iv-bell-head { --bell-glow: rgba(232,188,114,0.34); /* 呼吸光晕色（随主题切换，见下 light 覆盖） */ display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer; line-height: 1; background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; transition: border-color .18s ease, background .18s ease; } :root[data-theme="light"] .ctx-card .iv-bell-head { --bell-glow: rgba(176,124,40,0.28); } .ctx-card .iv-bell-head .ico { width: 13px; height: 13px; } .ctx-card .iv-bell-head:hover { border-color: var(--accent); background: var(--accent-tint-strong); } .ctx-card .iv-bell-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ctx-card .iv-bell-head.is-set { border-color: var(--accent); background: var(--accent-tint-strong); font-weight: 700; } /* 呼吸：IV 不高（low/mid）时缓慢一呼一吸邀请设提醒；IV 偏高（high）静止（此刻直接卖即可） */ @keyframes iv-bell-breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--accent-soft); background: var(--accent-tint); } 50% { box-shadow: 0 0 7px 1px var(--bell-glow); border-color: var(--accent); background: var(--accent-tint-strong); } } .ctx-card .iv-bell-head.breathe { animation: iv-bell-breathe 3.2s ease-in-out infinite; } /* 无障碍：系统开「减少动态效果」→ 呼吸退化为静态描金强调（不依赖动效也看得见） */ @media (prefers-reduced-motion: reduce) { .ctx-card .iv-bell-head.breathe { animation: none; border-color: var(--accent); background: var(--accent-tint-strong); box-shadow: 0 0 0 1px var(--accent-soft); } } .ctx-card .ctx-iv-bar { position: relative; height: 5px; border-radius: 3px; background: linear-gradient(to right, rgba(74,222,128,0.45) 0%, rgba(250,204,21,0.45) 50%, rgba(248,113,113,0.45) 100%); } .ctx-card .ctx-iv-marker { position: absolute; top: -4px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--card2); box-shadow: 0 0 0 1px var(--accent); } .ctx-card .ctx-iv-stats { font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; display: flex; gap: 12px; flex-wrap: wrap; } .ctx-card .ctx-iv-stats strong { color: var(--text); font-weight: 600; font-family: var(--font-num); } .ctx-card .ctx-iv-advice { font-size: 11px; line-height: 1.45; opacity: 0.9; } .ctx-card .ctx-iv-advice.low { color: var(--green); } .ctx-card .ctx-iv-advice.mid { color: var(--yellow); } .ctx-card .ctx-iv-advice.high { color: var(--red); } .ctx-card .ctx-iv-bt { font-size: 10.5px; line-height: 1.5; margin-top: 2px; color: var(--sub); opacity: 0.85; } .ctx-card .ctx-iv-edge { font-size: 11px; line-height: 1.45; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); color: var(--text); opacity: 0.85; font-weight: 600; } .ctx-card .ctx-bt { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text); flex-wrap: wrap; } .ctx-card .ctx-bt-icon { font-size: 14px; } .ctx-card .ctx-bt-num { font-family: var(--font-num); font-weight: 700; color: var(--green); } .ctx-card .ctx-bt-vs { color: var(--sub); font-size: 11px; } .ctx-card .ctx-bt-judge { margin-left: auto; font-weight: 600; font-size: 11.5px; } .ctx-card .ctx-bt-judge.good { color: var(--green); } .ctx-card .ctx-bt-judge.warn { color: var(--red); } .ctx-card .ctx-footer { /* 原写 var(--sub-2)（不存在）→ color 是继承属性，失效时**继承父级颜色** = 这行脚注跟正文一样重，本意是更弱一档。--dim 才是比 --sub 更弱的那个 token。 */ font-size: 10px; color: var(--dim); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .ctx-card { padding: 12px 14px; } .ctx-card .ctx-ticker { font-size: 17px; } .ctx-card .ctx-iv-rank { font-size: 19px; } .ctx-card .ctx-strat { font-size: 11px; } .ctx-card .ctx-bt-judge { margin-left: 0; flex-basis: 100%; text-align: right; } } /* ─── 多标的扫描摘要（方案 A 信号对照表 · congyang 2026-07-26 选 A）─── */ /* 一票一行，按 IV 从高到低。复用 .ctx-iv-bar / .ctx-iv-chip / .tier-stars 视觉。 */ .ctx-card .rms-meta { color: var(--sub); font-size: 12.5px; margin-top: 6px; font-variant-numeric: tabular-nums; } .ctx-card .rms-meta .rms-sort { color: var(--dim); } .ctx-card .rms-wrap { margin-top: 12px; } .ctx-card .rms-table { width: 100%; border-collapse: collapse; } .ctx-card .rms-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--dim); font-weight: 700; padding: 0 8px 8px 0; white-space: nowrap; } .ctx-card .rms-table th.c, .ctx-card .rms-table td.c { text-align: center; } .ctx-card .rms-table th.r, .ctx-card .rms-table td.r { text-align: right; padding-right: 0; } .ctx-card .rms-table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; } .ctx-card .rms-table tbody tr:first-child td { border-top: 0; } .ctx-card .rms-tk { font-weight: 700; font-size: 13.5px; color: var(--text); } .ctx-card .rms-px { color: var(--sub); font-size: 11px; margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ctx-card .rms-px .rms-today { color: var(--dim); margin-right: 3px; } .ctx-card .rms-up { color: var(--green); } .ctx-card .rms-dn { color: var(--red); } .ctx-card .rms-n { color: var(--sub); font-variant-numeric: tabular-nums; } .ctx-card .rms-ivcell { min-width: 116px; } .ctx-card .rms-ivtop { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .ctx-card .rms-ivtop .ctx-iv-chip { margin-left: 0; } /* 覆写 .ctx-iv-chip 的 margin-left:auto（表内不推到最右） */ .ctx-card .rms-ivnum { font-size: 15px; font-weight: 700; font-family: var(--font-num); line-height: 1; } .ctx-card .rms-ivnum.na { color: var(--dim); font-size: 13px; } .ctx-card .rms-flags { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .ctx-card .rms-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; border-radius: 5px; padding: 2px 6px; white-space: nowrap; } .ctx-card .rms-flag.bad { background: rgba(248,113,113,0.16); color: var(--red); } .ctx-card .rms-flag.warn { background: rgba(235,161,60,0.16); color: var(--amber); } .ctx-card .rms-flag.dim { background: var(--fill); color: var(--sub); } .ctx-card .rms-flag.good { background: rgba(63,221,156,0.14); color: var(--green); } .ctx-card .rms-trend-na { color: var(--dim); font-size: 12px; } .ctx-card .rms-ok { color: var(--green); font-size: 12.5px; font-weight: 700; } /* 手机（≤720px）：表 → 堆叠卡（IV 条铺满一行） */ .ctx-card .rms-cards { display: none; } @media (max-width: 720px) { .ctx-card .rms-table { display: none; } .ctx-card .rms-cards { display: block; } .ctx-card .rms-row { padding: 11px 0; border-top: 1px solid var(--line); } .ctx-card .rms-row:first-child { border-top: 0; } .ctx-card .rms-row-top { display: flex; align-items: center; gap: 7px; } .ctx-card .rms-row-top .rms-tk { font-size: 14px; } .ctx-card .rms-row-iv { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .ctx-card .rms-row-bar { margin: 7px 0 6px; } .ctx-card .rms-row-bot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; } .ctx-card .rms-row-bot .rms-flags { margin-left: auto; } } /* Verdict block — 诊断 → 行动入口 · 解决"so what"困境（B2 落地） */ .ctx-card .verdict-block { margin-top: 14px; padding: 14px 16px; background: linear-gradient(180deg, rgba(230,184,106,0.09) 0%, rgba(230,184,106,0.02) 100%); border: 1px solid rgba(230,184,106,0.28); border-radius: 10px; } .ctx-card .verdict-block-title { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: 0.5px; text-transform: uppercase; } .ctx-card .verdict-block-text { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 14px; } .ctx-card .verdict-block-text strong { color: var(--accent-light); font-weight: 600; } /* D · 纯行动：主操作整条领衔 + 两个逃生口压成一窄行（解读已上移到 IV 块） */ .ctx-card .verdict-block-actions { display: flex; flex-direction: column; gap: 8px; } .ctx-card .vb-primary { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px; text-align: left; cursor: pointer; background: var(--accent-tint-strong); border: 1px solid var(--accent); border-radius: 9px; color: var(--text); font-family: inherit; font-size: inherit; transition: background 0.15s, transform 0.1s; } .ctx-card .vb-primary:hover { background: rgba(232,188,114,0.26); } .ctx-card .vb-primary:active { transform: scale(0.99); } .ctx-card .vb-primary .vb-ic { font-size: 17px; line-height: 1; color: var(--accent); flex-shrink: 0; } .ctx-card .vb-primary .vb-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .ctx-card .vb-primary .vb-t { font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--text); } .ctx-card .vb-primary .vb-s { font-size: 11px; color: rgba(232,188,114,0.82); line-height: 1.35; } .ctx-card .vb-primary .vb-arr { margin-left: auto; color: var(--accent); font-size: 15px; font-weight: 700; flex-shrink: 0; } .ctx-card .vb-mini-row { display: flex; gap: 8px; } .ctx-card .vb-mini { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; text-align: left; cursor: pointer; background: var(--card3); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .ctx-card .vb-mini:hover { border-color: var(--accent); background: var(--accent-tint); } .ctx-card .vb-mini:active { transform: scale(0.98); } .ctx-card .vb-mini .vb-ic { font-size: 14px; line-height: 1; color: var(--accent); flex-shrink: 0; } @media (max-width: 720px) { .ctx-card .verdict-block { padding: 12px 14px; } .ctx-card .vb-mini-row { flex-direction: column; } } /* Portfolio context — 透明度面板，不影响排序，仅展示同 ticker 敞口和压力情景 */ .pc-panel { background: rgba(91, 124, 245, 0.05); border: 1px solid rgba(91, 124, 245, 0.25); border-radius: 10px; padding: 11px 14px; margin: 10px 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--text); } .pc-panel .pc-title { font-weight: 600; color: var(--accent); margin-bottom: 5px; } .pc-panel .pc-row { color: var(--sub); } .pc-panel .pc-row strong { color: var(--text); } .pc-panel .pc-row.pc-stress { margin-top: 4px; } /* Wheel 闭环提示 — CSP 被指派 / 持有正股时建议卖 Covered Call */ .wheel-hint { background: rgba(91, 124, 245, 0.06); border: 1px solid rgba(91, 124, 245, 0.30); border-radius: 10px; padding: 11px 14px; margin: 8px 0 12px; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.5; flex-wrap: wrap; } .wheel-hint .wh-icon { display: flex; flex-shrink: 0; } .wheel-hint .wh-icon svg { width: 18px; height: 18px; color: var(--accent); } .wheel-hint .wh-close { background: none; border: none; color: var(--sub); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 7px; border-radius: 6px; transition: color 200ms; } .wheel-hint .wh-close:hover { color: var(--text); } .wheel-hint .wh-body { flex: 1; min-width: 200px; color: var(--text); } .wheel-hint .wh-body strong { color: var(--accent); } .wheel-hint .wh-cta { background: var(--gold-grad); color: var(--gold-ink); border: none; padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); transition: transform var(--dur-quick) var(--ease-spring), filter var(--dur-quick) var(--ease-out); } .wheel-hint .wh-cta:hover { filter: brightness(1.06); transform: translateY(-1px); } .wheel-hint .wh-cta:active { transform: scale(0.96); transition-duration: var(--dur-instant); } .wheel-hint .wh-source { color: var(--sub); font-size: 11.5px; } @media (max-width: 600px) { .wheel-hint { padding: 10px 12px; font-size: 12.5px; } .wheel-hint .wh-cta { padding: 8px 12px; } } /* 🚫 受限标的警示条（找合约顶部·不挡）— 红语义 + 平 tint + 同色边（DS warn 卡·无左竖条·仿 .wheel-hint） */ .rec-restricted-banner { background: rgba(var(--red-rgb), 0.08); border: 1px solid rgba(var(--red-rgb), 0.30); border-radius: 10px; padding: 11px 14px; margin: 0 0 12px; display: flex; align-items: center; gap: 11px; font-size: 12.5px; line-height: 1.5; } .rec-restricted-banner .rrb-ic { flex: none; display: flex; } .rec-restricted-banner .rrb-ic svg { width: 17px; height: 17px; color: var(--red); } .rec-restricted-banner .rrb-body { flex: 1; min-width: 0; color: var(--text); } .rec-restricted-banner .rrb-body strong { color: var(--red); font-weight: 700; } /* ⚠️ 非交易时段 IV 缺失 → 波动率为估算（Δ/概率/星级都受影响）。 amber 语义 + 平 tint + 同色边（DS warn 卡·无左竖条·与 .rec-restricted-banner 同族） */ .rec-iv-est-banner { background: rgba(var(--amber-rgb), 0.08); border: 1px solid rgba(var(--amber-rgb), 0.30); border-radius: 10px; padding: 11px 14px; margin: 0 0 12px; display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; line-height: 1.5; } .rec-iv-est-banner .rieb-ic { flex: none; display: flex; padding-top: 1px; } .rec-iv-est-banner .rieb-ic svg { width: 17px; height: 17px; color: var(--amber); } .rec-iv-est-banner .rieb-body { flex: 1; min-width: 0; color: var(--text); } .rec-iv-est-banner .rieb-body strong { color: var(--amber); font-weight: 700; } .rec-iv-est-banner .rieb-sub { color: var(--sub); font-size: 12px; margin-top: 2px; } /* Vol skew 信号 — put/call IV 偏度，提示卖方向是否有 vol edge */ .skew-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; margin: 8px 0 4px; } .skew-pill.put-skew { background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.35); color: var(--green); } .skew-pill.call-skew { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--red); } .skew-pill.neutral { background: var(--card2); border: 1px solid var(--line); color: var(--sub); } /* v2.3 个股趋势护栏（EMA50/200）· pill 4 态 + 警示条（安全边际，非预测）*/ .trend-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; margin: 8px 0 4px; } .trend-pill .ico { width: 13px; height: 13px; } .trend-pill.trend-good { background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.35); color: var(--green); } .trend-pill.trend-neutral { background: var(--card2); border: 1px solid var(--line); color: var(--sub); } .trend-pill.trend-warn { background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--orange); } .trend-pill.trend-bad { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--red); } .trend-strip { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; margin: 6px 0 4px; } .trend-strip .ts-ic { flex: 0 0 auto; display: inline-flex; margin-top: 1px; } .trend-strip .ts-ic .ico { width: 14px; height: 14px; } .trend-strip.knife { background: rgba(248, 113, 113, 0.09); border: 1px solid rgba(248, 113, 113, 0.32); color: var(--red); } .trend-strip.overheat { background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--orange); } /* 趋势护栏放进「在发生什么」pulse 卡（紧邻分析师目标价行）时：pill + strip 纵向堆叠、去自带外边距 */ .pulse-trend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .pulse-trend .trend-pill, .pulse-trend .trend-strip { margin: 0; } /* 飞刀/过热 pill 与「分析师目标价」左右同排（分析师左·pill 右·窄屏 flex-wrap 自动换行） */ .pulse-lab-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pulse-lab-row .trend-pill { margin: 0; flex: 0 0 auto; } /* v2.3 趋势护栏全宽色条（/metrics-pick B 方案 · congyang 2026-07-26）：紧贴分时图下方、随健康度变色。 措辞点出 50/200 结构（大白话·不用金叉死叉术语）；knife/overheat 下方再接 .trend-strip actionable 警示条。 */ .chart-trend-bar { display: flex; align-items: center; gap: 8px; width: 100%; border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 500; line-height: 1.4; margin: 9px 0 2px; } .chart-trend-bar .ico { width: 14px; height: 14px; flex: none; } .chart-trend-bar .ctb-txt { min-width: 0; } .chart-trend-bar .ctb-dist { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .chart-trend-bar.ctb-good { background: rgba(63,221,156,0.09); border: 1px solid rgba(63,221,156,0.32); color: var(--green); } .chart-trend-bar.ctb-bad { background: rgba(255,126,120,0.09); border: 1px solid rgba(255,126,120,0.32); color: var(--red); } .chart-trend-bar.ctb-warn { background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--orange); } .chart-trend-bar.ctb-neutral { background: var(--fill); border: 1px solid var(--line); color: var(--sub); } /* 飞刀「落稳提醒」铃铛（矿一#2 · 类比 IV 条铃铛 · currentColor 跟随飞刀红 · 带文字胶囊） */ .chart-trend-bar .ctb-bell { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; flex: none; cursor: pointer; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid currentColor; opacity: 0.9; transition: opacity .15s ease, background .15s ease; } .chart-trend-bar .ctb-bell .ico { width: 13px; height: 13px; flex: none; } .chart-trend-bar .ctb-bell:hover { opacity: 1; background: rgba(255,126,120,0.16); } .chart-trend-bar .ctb-bell:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .chart-trend-bar .ctb-bell.is-set { background: rgba(255,126,120,0.18); opacity: 1; font-weight: 700; } /* POP 校准 pill — 历史回测 vs 理论 BS POP 差异提示 */ .calib-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; margin: 4px 0; } .calib-pill.calib-warn { background: rgba(248, 113, 113, 0.07); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--orange, #f59e0b); } .calib-pill.calib-ok { background: rgba(74, 222, 128, 0.07); border: 1px solid rgba(74, 222, 128, 0.3); color: var(--green); } /* Exit plan — 出场计划 */ .exit-plan { background: rgba(212, 165, 116, 0.06); border: 1px solid rgba(212, 165, 116, 0.28); border-radius: 8px; padding: 8px 11px; margin: 8px 0 4px; font-size: 12px; line-height: 1.5; color: var(--text); } /* expanded（推荐卡用）：垂直列表 */ .exit-plan.expanded { display: block; } .exit-plan.expanded .ep-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--accent); font-weight: 600; } .exit-plan.expanded .ep-header .ep-icon { font-size: 14px; } .exit-plan.expanded .ep-item { display: flex; gap: 6px; padding: 3px 0 3px 18px; align-items: flex-start; } .exit-plan.expanded .ep-item .ic { font-size: 12px; width: 16px; flex-shrink: 0; line-height: 1.5; } .exit-plan.expanded .ep-item .body { flex: 1; } .exit-plan.expanded .ep-item .ep-action { font-weight: 600; color: var(--text); } .exit-plan.expanded .ep-item .ep-detail { color: var(--sub); margin-left: 4px; } .exit-plan.expanded .ep-item.profit .ep-action { color: var(--green); } .exit-plan.expanded .ep-item.stop .ep-action { color: var(--red); } .exit-plan.expanded .ep-item.assign .ep-action { color: var(--accent); } .exit-plan.expanded .ep-item.roll .body { color: var(--sub); font-size: 11.5px; } /* compact (持仓卡用) — Typography Tag 风：mono uppercase + colored tag pill */ .exit-plan.compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 5px; padding: 8px 11px; /* 跟 .pos-extras / .pos-actions / .earnings-warn 的 14px 卡片内缩齐 */ margin: 8px 14px 4px; font-size: 11.5px; align-items: center; /* C 方案：中性灰背景替代暖金 tint，更 mono */ background: var(--card2); border-color: var(--line); } :root[data-theme="light"] .exit-plan.compact { background: var(--inset); border-color: var(--line); } .exit-plan.compact .ep-prefix { display: inline-flex; align-items: center; grid-column: 1; min-width: 0; } .exit-plan.compact .ep-label { color: var(--accent); font-family: var(--font-num); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .exit-plan.compact .ep-style-mini { grid-column: 2; justify-self: end; font-family: var(--font-num); font-size: 9px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--inset); line-height: 1.3; white-space: nowrap; cursor: help; } .exit-plan.compact .ep-row { grid-column: 1 / -1; display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; } /* 桌面也显示 tag pill（C 方案核心） */ .exit-plan.compact .ep-tag { display: inline-flex; align-items: center; flex-shrink: 0; font-family: var(--font-num); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 3px; border: 1px solid currentColor; background: rgba(255,255,255,0.02); line-height: 1.3; } /* tag 配色 — 按触发线类型分 */ .exit-plan.compact .ep-tag.tag-red { color: var(--red); background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.35); } .exit-plan.compact .ep-tag.tag-warn { color: var(--accent); background: rgba(230,184,106,0.10); border-color: rgba(230,184,106,0.35); } .exit-plan.compact .ep-tag.tag-dte { color: var(--yellow); background: rgba(250,204,21,0.10); border-color: rgba(250,204,21,0.35); } .exit-plan.compact .ep-tag.tag-profit { color: var(--green); background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.35); } .exit-plan.compact .ep-tag.tag-assign { color: var(--accent); background: rgba(230,184,106,0.10); border-color: rgba(230,184,106,0.35); } .exit-plan.compact .ep-tag.tag-hold { color: var(--sub); background: rgba(255,255,255,0.04); border-color: var(--line-2); } :root[data-theme="light"] .exit-plan.compact .ep-tag.tag-red { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.35); } :root[data-theme="light"] .exit-plan.compact .ep-tag.tag-warn { background: rgba(212,165,116,0.14); border-color: rgba(212,165,116,0.40); } :root[data-theme="light"] .exit-plan.compact .ep-tag.tag-dte { background: rgba(202,138,4,0.10); border-color: rgba(202,138,4,0.35); } :root[data-theme="light"] .exit-plan.compact .ep-tag.tag-profit { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.35); } :root[data-theme="light"] .exit-plan.compact .ep-tag.tag-assign { background: rgba(212,165,116,0.14); border-color: rgba(212,165,116,0.40); } .exit-plan.compact .ep-body { min-width: 0; line-height: 1.5; } .exit-plan.compact .ep-body strong { color: var(--text); } .exit-plan.compact .ep-body.pf strong { color: var(--green); } .exit-plan.compact .ep-body.as strong { color: var(--accent); } @media (max-width: 600px) { .exit-plan { font-size: 11.5px; padding: 7px 9px; } .exit-plan.expanded .ep-item { padding-left: 12px; } /* 移动端 compact：保持 grid 结构，仅调 padding/字号 + body flex */ .exit-plan.compact { row-gap: 6px; padding: 8px 10px; } .exit-plan.compact .ep-row { gap: 6px; } .exit-plan.compact .ep-body { flex: 1; min-width: 0; line-height: 1.45; } /* 移动端 grid：1×4 单列 stack */ .exit-plan.grid .ep-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; } .exit-plan.grid .ep-cell { padding: 6px 9px; } .exit-plan.grid .ep-cell .ep-val { font-size: 12px; white-space: normal; } .exit-plan.grid .ep-cell .ep-sub { white-space: normal; } .exit-plan.grid .ep-cell .ep-act { white-space: normal; } } /* grid（推荐卡用 v2）：2×2 触发线 + 每 cell 4 行（top / val / sub / action） —— 包租公式 exit plan 渲染：每个 cell 是一条房东事件触发线 */ .exit-plan.grid { padding: 10px 11px; background: rgba(102,179,255,0.04); border: 1px solid rgba(102,179,255,0.20); } .exit-plan.grid .ep-grid-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(102,179,255,0.15); color: var(--accent); font-weight: 600; font-size: 12px; } .exit-plan.grid .ep-grid-header .ep-style-tag { margin-left: auto; font-size: 10.5px; color: var(--sub); font-weight: 500; background: rgba(0,0,0,0.20); padding: 2px 8px; border-radius: 99px; } .exit-plan.grid .ep-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .exit-plan.grid .ep-cell { background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 7px 9px; line-height: 1.4; min-width: 0; } .exit-plan.grid .ep-cell.dim { opacity: 0.45; } .exit-plan.grid .ep-cell.armed { border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.07); } .exit-plan.grid .ep-cell .ep-top { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .exit-plan.grid .ep-cell .ep-top .ic { font-size: 13px; line-height: 1; } .exit-plan.grid .ep-cell .ep-top .lbl { font-size: 10.5px; color: var(--sub); font-weight: 600; letter-spacing: 0.02em; } .exit-plan.grid .ep-cell .ep-val { font-size: 12.5px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exit-plan.grid .ep-cell.armed .ep-val { color: var(--red); } .exit-plan.grid .ep-cell .ep-sub { font-size: 10px; color: var(--sub); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exit-plan.grid .ep-cell .ep-act { font-size: 10px; color: var(--accent); margin-top: 3px; padding-top: 3px; border-top: 1px dotted rgba(255,255,255,0.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exit-plan.grid .ep-cell.dim .ep-act { display: none; } .exit-plan.grid .ep-cell.ok .ep-val { color: var(--green); } /* 数据源降级 pill（Schwab → Yahoo / yfinance 兜底时显示） */ .ds-pill { display: flex; align-items: center; gap: 8px; background: rgba(230, 184, 106, 0.08); border: 1px solid rgba(230, 184, 106, 0.35); color: var(--accent); padding: 8px 12px; border-radius: 8px; margin: 10px 0 14px; font-size: 12px; line-height: 1.4; } .ds-pill .ds-icon { font-size: 13px; } .ds-pill .ds-detail { color: var(--sub); font-size: 11px; } .iv-rank-bar { margin-bottom: 8px; } .iv-rank-track { position: relative; display: block; height: 8px; border-radius: 4px; background: linear-gradient(to right, rgba(74,222,128,0.4) 0%, rgba(250,204,21,0.4) 50%, rgba(248,113,113,0.4) 100%); } .iv-rank-fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(to right, var(--green), var(--yellow), var(--red)); border-radius: 4px; } .iv-rank-marker { position: absolute; top: -8px; transform: translateX(-50%); color: var(--accent); font-size: 14px; text-shadow: 0 0 4px var(--card); } .iv-text { font-size: 12px; color: var(--sub); line-height: 1.5; } .iv-text strong { color: var(--text); } /* 推荐卡片设计 */ .rec-cards { display: flex; flex-direction: column; gap: 10px; } .rec-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; transition: border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .rec-card:hover { border-color: var(--line-2); background: rgba(255,255,255,0.012); } /* 集中度警告条（评分后叠加层 · 仅登录 · 不进 rent_score / 不动星级） */ /* ⚠️ 2026-08-11 congyang 看 preview：「这个注释有些多余，最多变成一个小 pill 像这里其他的一样」→ 由整宽提示条改成 inline pill，跟同卡的 .acct-badge / .mb-chip 一个量级。**措辞一个字没改**（「超出你自己定的线」那条人称纪律是有意的）。 */ .conc-strip { margin: 8px 0 2px; padding: 3px 9px; border-radius: 999px; background: rgba(235,161,60,0.12); border: 1px solid rgba(235,161,60,0.40); color: var(--amber); font-size: 11px; line-height: 1.45; display: inline-flex; gap: 5px; align-items: center; max-width: 100%; } .conc-strip .ic { flex: none; width: 12px; height: 12px; } .conc-strip b { color: #F6C97A; font-weight: 700; } .conc-strip.ok { background: rgba(63,221,156,0.10); border-color: rgba(63,221,156,0.30); color: var(--green); } .conc-strip.ok b { color: var(--green); } .rec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .rec-rank { font-size: 11px; font-weight: 600; color: var(--sub); background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; align-self: flex-start; margin-top: 2px; } .rec-title { flex: 1; min-width: 0; } /* 包租公分视觉条 — 3px 细线，随 verdict 颜色变 */ .rec-score-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; } .rec-score-bar { flex: 1; height: 3px; background: var(--card3); border-radius: 2px; overflow: hidden; } .rec-score-fill { height: 100%; border-radius: 2px; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .rec-score-num { font-size: 10px; color: var(--sub); font-variant-numeric: tabular-nums; font-family: var(--font-num); flex-shrink: 0; min-width: 20px; text-align: right; } .rec-contract { font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .rec-contract .strike { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .rec-contract .type-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; } .rec-contract .type-tag.call { background: rgba(74,222,128,0.18); color: var(--green); } .rec-contract .type-tag.put { background: rgba(251,146,60,0.18); color: var(--orange); } .rec-contract .rec-exp { color: var(--sub); font-size: 11px; font-weight: 400; margin-left: 4px; } /* 多标的混排候选卡：ticker 中性徽标（C · congyang 2026-07-26 选）— 灰底方块把 ticker 框出来， 混排时眼睛好跟；金色留给主操作按钮，不抢。单标的仍用普通粗体（同票冗余）。 */ .rec-contract .rec-tktag { font-size: 12px; font-weight: 700; font-family: var(--font-num); padding: 2px 8px; border-radius: 6px; letter-spacing: 0.3px; background: var(--fill-2); color: var(--text); border: 1px solid var(--line); align-self: center; } .rec-verdict { font-size: 12px; margin-top: 2px; font-weight: 600; /* flex 容器: 让里面的 inline-flex 星星 wrapper 变成「按内容收缩」的 flex item， 绕开 iOS/WebKit「inline-flex 容器撑满父宽」的 bug (会把「别」甩到右边、「租」挤下一行)。 flex-wrap 兜底: 真挤不下时整块标签一起换行而非把「别租」拆成两行 (用户 2026-06-09 截图)。 */ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } /* 星星 wrapper 永不抢宽; verdict 文字 (如「别租」) 永不在字中间断行 */ .rec-verdict > span:first-child { flex: 0 0 auto; } .rec-verdict > strong { flex: 0 0 auto; white-space: nowrap; } .rec-card .add-btn { background: var(--accent); color: #0A0A0B; border: none; border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; font-weight: 600; flex-shrink: 0; letter-spacing: -0.005em; min-height: 30px; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .rec-card .add-btn:hover { background: var(--accent-light); transform: scale(1.04); box-shadow: 0 4px 14px rgba(230,184,106,0.28); } .rec-card .add-btn:active { transform: scale(0.96); box-shadow: none; } /* 「为什么 X 星」chip + 卡内展开解释（Part D · app.ask.js _whyScore 驱动·懒触发 LLM·全卡型通用） */ .why-chip { font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(230,184,106,0.10); border: 1px solid var(--warn-line, rgba(255,200,95,0.30)); border-radius: 999px; padding: 3px 9px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; transition: background 0.15s, border-color 0.15s; vertical-align: middle; } .why-chip:hover { background: rgba(230,184,106,0.18); border-color: var(--accent); } .why-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .why-chip .why-chev { transition: transform 0.15s; opacity: 0.7; font-size: 13px; line-height: 1; } .why-chip.open .why-chev { transform: rotate(90deg); } /* v2.3.1 财报去偏：卡面「🗓 财报跨期」pill（琥珀·与金色 why-chip 区分）*/ .rec-earn-pill { font-size: 11px; font-weight: 700; color: #E7A13C; background: rgba(235,161,60,0.14); border: 1px solid rgba(235,161,60,0.34); border-radius: 999px; padding: 3px 9px; vertical-align: middle; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: 0 0 auto; } .rec-earn-pill svg { width: 12px; height: 12px; flex: 0 0 auto; } .why-host { margin-bottom: 10px; } .why-panel { background: rgba(0,0,0,0.22); border: 1px solid var(--edge, rgba(255,255,255,0.09)); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.62; } .why-panel .why-dim { color: var(--sub); font-size: 11px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--edge, rgba(255,255,255,0.09)); } /* ============ 限定风险开关 + wing 段控（价差收租）============ */ #rec-defined-risk-row { flex-direction: column; align-items: stretch; gap: 10px; } .dr-toggle-wrap { display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 10px 12px; background: rgba(230,184,106,0.06); border: 1px solid var(--line); border-radius: 10px; transition: background var(--dur-quick,.15s) var(--ease-out,ease); } .dr-toggle-wrap:hover { background: rgba(230,184,106,0.10); } .dr-toggle { flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; border: none; padding: 0; background: var(--card3); position: relative; cursor: pointer; transition: background var(--dur-quick,.15s) var(--ease-out,ease); } .dr-toggle .dr-knob { position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--dur-quick,.15s) var(--ease-spring,ease); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .dr-toggle.on { background: var(--accent); } .dr-toggle.on .dr-knob { transform: translateX(17px); } .dr-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dr-title { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; color: var(--text); } .dr-title .ico { width: 14px; height: 14px; color: var(--accent); } .dr-sub { font-size: 11px; color: var(--sub); line-height: 1.35; } .dr-wing-wrap { display: flex; align-items: center; gap: 9px; padding-left: 2px; flex-wrap: wrap; } .dr-wing-label { font-size: 12px; color: var(--sub); font-weight: 600; } .wing-seg { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; flex: 1; min-width: 220px; } .wing-btn { padding: 6px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.15; text-align: center; } .wing-btn .ib-title { font-size: 12px; } .wing-btn .ib-sub { font-size: 9.5px; white-space: nowrap; } /* ============ 价差收租卡（信用价差 + 铁鹰）· 对齐 Design System v1.4.1 ============ */ /* DS token → 本 app 变量名: surface-2=--card2 / good=--green / bad=--red / text-dim=--sub / border=--line / accent=--accent(#E6B86A) · radius 12 card·6 banner·999 pill · 间距 4·8·12 · 字阶 tk16/chip12/banner13 · .spread-card 继承现有 .rec-card 卡底不重设 */ .spread-card .sc-head { display: flex; align-items: center; gap: 10px; } .spread-card .sc-tk { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spread-card .sc-tier { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 13px; letter-spacing: 0.04em; background: var(--accent-tint-strong); color: var(--accent); } .spread-card .sc-tier.t3 { opacity: 0.78; } .spread-card .sc-tier.t2 { color: var(--sub); background: var(--card3); } .spread-card .sc-tier.t1 { color: var(--sub); background: var(--card3); opacity: 0.7; } .spread-card .sc-head .rec-compare-check { flex: 0 0 auto; } .spread-card .sc-sub { font-size: 13px; color: var(--sub); margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .spread-card .sc-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.5; color: var(--text); margin-top: 12px; } .spread-card .sc-banner .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } .spread-card .sc-banner.success { background: rgba(52,211,153,0.11); } .spread-card .sc-banner.success .ico { color: var(--green); } .spread-card .sc-banner.warn { background: rgba(234,179,8,0.13); } .spread-card .sc-banner.warn .ico { color: #eab308; } .spread-card .sc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .spread-card .sc-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; } .spread-card .sc-chip .ico { width: 12px; height: 12px; color: var(--accent); } .spread-card .sc-chip.good { color: var(--green); } .spread-card .sc-chip.good .ico { color: var(--green); } .spread-card .sc-chip.bad { color: var(--red); } .spread-card .sc-chip.bad .ico { color: var(--red); } .spread-card .sc-payoff { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .spread-card .sc-po { display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px; } .spread-card .sc-po-l { font-size: 12px; color: var(--sub); } .spread-card .sc-po-track { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; } .spread-card .sc-po-track i { display: block; height: 100%; border-radius: 999px; } .spread-card .sc-po-track i.good { background: var(--green); } .spread-card .sc-po-track i.bad { background: var(--red); } .spread-card .sc-po b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .spread-card .sc-po b.good { color: var(--green); } .spread-card .sc-po b.bad { color: var(--red); } .spread-card .sc-legs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .spread-card .sc-legs.condor { flex-direction: column; align-items: stretch; gap: 8px; } .spread-card .sc-leg-grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .spread-card .sc-leg-t { font-size: 11px; letter-spacing: 0.04em; color: var(--sub); min-width: 44px; } .spread-card .sc-leg { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; } .spread-card .sc-leg em { font-style: normal; font-weight: 400; opacity: 0.65; font-size: 11px; margin-left: 5px; } .spread-card .sc-leg.sell { background: var(--accent-tint-strong); color: var(--accent); } .spread-card .sc-leg.buy { background: rgba(107,182,255,0.14); color: var(--payoff-today); } .spread-card .sc-leg-plus { color: var(--sub); font-weight: 700; } .spread-card .sc-action { display: flex; margin-top: 14px; } .spread-card .sc-action button { flex: 1; background: var(--accent); color: #1a1108; border: none; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } .spread-card .sc-action button[disabled] { background: var(--card3); color: var(--sub); cursor: not-allowed; } .spread-card .sc-action .ico { width: 14px; height: 14px; } /* 价差持仓卡 P&L 行 (复用 .pos DNA + .sc-* 子元素) */ .spread-pos .sp-pos-pnl { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; } .spread-pos .sp-pos-pnl-l { font-size: 12px; color: var(--sub); } .spread-pos .sp-pos-pnl-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .spread-pos .sp-pos-pnl-v small { font-size: 13px; font-weight: 600; } .spread-pos .sp-pos-pnl-v.gain { color: var(--green); } .spread-pos .sp-pos-pnl-v.loss { color: var(--red); } /* ============ 双边收租 strangle pair card (Layout A 双列并排) ============ */ .strangle-pair-card .pair-summary-A { background: linear-gradient(135deg, rgba(230,184,106,0.10) 0%, rgba(230,184,106,0.03) 100%); border: 1px solid rgba(230,184,106,0.25); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .strangle-pair-card .pair-summary-A .col { display: flex; flex-direction: column; gap: 2px; } .strangle-pair-card .pair-summary-A .lbl { color: var(--sub); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .strangle-pair-card .pair-summary-A .val { color: var(--accent); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; } .strangle-pair-card .pair-summary-A .secondary { color: var(--text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .strangle-pair-card .legs-grid-A { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .strangle-pair-card .leg-A { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .strangle-pair-card .leg-A-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; /* 窄列（手机双列 leg）挤不下时 strike 整块落第二行，元素内部不许断 */ margin-bottom: 10px; } .strangle-pair-card .leg-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; white-space: nowrap; /* 防「地板/天花板」CJK 拦腰折断 */ } .strangle-pair-card .leg-tag.put { background: rgba(244,114,114,0.16); color: #fc9b9b; } .strangle-pair-card .leg-tag.call { background: rgba(74,222,128,0.16); color: #7ce896; } .strangle-pair-card .leg-A-strike { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; /* $660 −8.5% 保持一体，不许 pct 掉行 */ } .strangle-pair-card .leg-A-strike .pct { font-size: 11px; color: var(--sub); margin-left: 4px; font-weight: 500; } .strangle-pair-card .leg-A-meta { display: flex; flex-wrap: wrap; gap: 4px; } .strangle-pair-card .leg-A-meta .leg-chip { background: var(--bg, var(--card)); border: 1px solid var(--line); padding: 3px 7px; border-radius: 999px; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; } .strangle-pair-card .leg-A-meta .leg-chip b { color: var(--text); font-weight: 600; } .strangle-pair-card .rec-spot { margin-left: auto; color: var(--sub); font-size: 11px; } .strangle-pair-card .rec-spot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 380px) { .strangle-pair-card .legs-grid-A { grid-template-columns: 1fr; } } /* Band tag (宽腿 / 标准 / 窄腿) — 紧贴 ticker · clickable info */ .strangle-pair-card .band-tag-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 6px 1px 6px; border-radius: 4px; border: none; background: rgba(230,184,106,0.12); color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; vertical-align: middle; text-transform: uppercase; cursor: pointer; font-family: inherit; white-space: nowrap; /* CJK badge 被挤窄时禁止逐字竖排 */ } .strangle-pair-card .band-tag-btn:hover { background: rgba(230,184,106,0.20); } .strangle-pair-card .band-tag-btn .band-i { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; font-size: 9px; font-weight: 700; font-style: italic; opacity: 0.8; } /* Info "i" button — 紧贴 label */ .strangle-pair-card .s-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--sub); font-size: 9px; font-weight: 700; font-style: italic; cursor: pointer; vertical-align: middle; padding: 0; line-height: 1; } .strangle-pair-card .s-info-btn:hover { color: var(--accent); border-color: var(--accent); } /* Action row (加入持仓 + 怎么下单) */ .strangle-pair-card .strangle-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; } .strangle-pair-card .strangle-add-btn { flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #1a1108; border: none; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.12s, box-shadow 0.18s; } .strangle-pair-card .strangle-add-btn:hover { transform: scale(1.02); box-shadow: 0 2px 10px rgba(230,184,106,0.30); } .strangle-pair-card .strangle-add-btn:active { transform: scale(0.97); } .strangle-pair-card .strangle-add-btn svg { width: 14px; height: 14px; } .strangle-pair-card .strangle-broker-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--fill-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; padding: 9px 12px; font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color 0.18s, color 0.18s; } .strangle-pair-card .strangle-broker-btn:hover { border-color: var(--accent); color: var(--accent); } .strangle-pair-card .strangle-broker-btn svg { width: 14px; height: 14px; } /* ============ 双边收租持仓 (.pos.strangle DNA · 复用标准持仓 visual) ============ */ /* strangle-tag in row1 */ .pos.strangle .strangle-tag { background: rgba(230,184,106,0.14); color: var(--accent); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .pos.strangle .band-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(230,184,106,0.10); color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* (旧 .strangle-legs-inline / .sl-leg 大盒已废弃 → 改用全局紧凑 .sp-leg pills) */ /* 安全区 progress bar (双 strike 范围视觉) */ .pos.strangle .strangle-safe-track { position: relative; } .pos.strangle .strangle-safe-track .safe-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(90deg, rgba(74,222,128,0.10), rgba(74,222,128,0.30), rgba(74,222,128,0.10)); border-radius: inherit; } .pos.strangle .strangle-safe-track .marker { position: absolute; top: -3px; width: 2px; height: calc(100% + 6px); background: var(--accent); border-radius: 1px; } /* (旧 .pos-status-banner / .strangle-exit 已废弃 → 改用单腿 .pos-advice(.pos-note + .exit-plan.compact)) */ /* ============ 价差/铁鹰 持仓 (.pos.spread-pos · 直接复用单腿 .pos DNA：pos-body / pos-meters / pos-advice / pos-note / exit-plan.compact / pos-actions--merged。本块只加 type tag + 紧凑腿 pills) ============ */ .pos.spread-pos .strangle-tag { background: rgba(230,184,106,0.14); color: var(--accent); padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } /* 紧凑腿 pills — 复用 rec 卡 .sc-leg 设计语言（卖=accent / 买=蓝），单行内联比大盒省空间 */ .pos .sp-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 14px 2px; } .pos .sp-legs.condor { flex-direction: column; align-items: stretch; gap: 6px; } .pos .sp-leg-grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pos .sp-leg-t { font-size: 11px; color: var(--sub); min-width: 42px; } .pos .sp-leg { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; } .pos .sp-leg.sell { background: var(--accent-tint-strong); color: var(--accent); } .pos .sp-leg.buy { background: rgba(107,182,255,0.14); color: var(--payoff-today); } .pos .sp-leg em { font-style: normal; font-weight: 400; opacity: 0.7; font-size: 11px; margin-left: 5px; } .pos .sp-leg-plus { color: var(--sub); font-weight: 700; } /* ============ PMCC 持仓卡（两腿不同到期 · 替身 LEAPS / 月租 short call） ============ */ /* PMCC 策略 chip：用蓝（呼应「替身·买 LEAPS」腿 + 标记进阶/杠杆身份，和其它金色策略 tag 区分） */ .pos.pmcc-pos .pmcc-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(107,182,255,0.14); color: var(--payoff-today); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .pos.pmcc-pos .pmcc-pos-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 8px 14px 2px; } .pos.pmcc-pos .pmcc-pos-leg { background: var(--card2); border: 1px solid rgba(255,255,255,0.06); border-radius: 11px; padding: 9px 11px; } .pos.pmcc-pos .pmcc-pos-leg-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; } .pos.pmcc-pos .pmcc-pos-leg .leg-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 8px; white-space: nowrap; } .pos.pmcc-pos .pmcc-pos-leg .leg-tag.pmcc-buy { background: rgba(107,182,255,0.16); color: var(--payoff-today); } .pos.pmcc-pos .pmcc-pos-leg .leg-tag.pmcc-sell { background: var(--accent-tint-strong); color: var(--accent); } .pos.pmcc-pos .pmcc-pos-strike { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .pos.pmcc-pos .pmcc-pos-exp { font-size: 10.5px; color: var(--sub); margin-bottom: 4px; } .pos.pmcc-pos .pmcc-pos-exp b { color: var(--text); font-variant-numeric: tabular-nums; } .pos.pmcc-pos .pmcc-pos-legrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--sub); margin-top: 2px; gap: 6px; } .pos.pmcc-pos .g { color: var(--green); } .pos.pmcc-pos .r { color: var(--red); } /* ============ Strangle 加入持仓 / 平仓 / 编辑 modal form ============ */ .app-modal .strangle-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .app-modal .strangle-add-leg { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .app-modal .strangle-add-leg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .app-modal .strangle-add-leg-head .leg-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .app-modal .strangle-add-leg-head .leg-tag.put { background: rgba(244,114,114,0.16); color: #fc9b9b; } .app-modal .strangle-add-leg-head .leg-tag.call { background: rgba(74,222,128,0.16); color: #7ce896; } .app-modal .strangle-add-leg-head .strike-val { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .app-modal .strangle-add-lbl { display: block; font-size: 11px; color: var(--sub); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .app-modal .strangle-add-input-wrap { position: relative; } .app-modal .strangle-add-input-wrap .prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 13px; pointer-events: none; } .app-modal .strangle-add-input-wrap input { width: 100%; padding: 8px 10px 8px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; font-variant-numeric: tabular-nums; } .app-modal .strangle-add-input-wrap input:focus { outline: none; border-color: var(--accent); } .app-modal .strangle-add-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .app-modal .strangle-add-field input, .app-modal .strangle-add-select { width: 100%; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; } /* 暗色下拉项（原生 select 弹层默认浅色，与暗色模态冲突 — Chrome/FF/Android 尊重 option 背景） */ .app-modal .strangle-add-select option { background: var(--card-solid); color: var(--text); } .app-modal .strangle-add-field input:focus, .app-modal .strangle-add-select:focus { outline: none; border-color: var(--accent); } .app-modal .strangle-add-total { background: linear-gradient(135deg, rgba(230,184,106,0.10) 0%, rgba(230,184,106,0.03) 100%); border: 1px solid rgba(230,184,106,0.25); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .app-modal .strangle-add-total .lbl { color: var(--sub); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .app-modal .strangle-add-total .val { color: var(--accent); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; } .app-modal .strangle-add-total .val.gain { color: var(--green, #4ade80); } .app-modal .strangle-add-total .val.loss { color: var(--red, #f87171); } .app-modal .strangle-add-actions { display: flex; gap: 10px; justify-content: flex-end; } .app-modal .strangle-add-actions button { padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; } @media (max-width: 440px) { .app-modal .strangle-add-grid, .app-modal .strangle-add-row2 { grid-template-columns: 1fr; } } /* Verdict bullets (pros / info / cons) */ .strangle-pair-card .strangle-verdict { list-style: none; margin: 0; padding: 0; } .strangle-pair-card .strangle-verdict-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text); padding: 5px 0; } .strangle-pair-card .strangle-verdict-row svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } .strangle-pair-card .strangle-verdict-row.pro svg { color: var(--good, #4ade80); } .strangle-pair-card .strangle-verdict-row.con svg { color: var(--bad, #f87171); } .strangle-pair-card .strangle-verdict-row.info svg { color: var(--accent); } /* PMCC: verdict（压缩字号·占 3/5）+ 损益曲线（占 2/5）左右分栏；手机堆叠 */ .pmcc-pair-card .pmcc-vp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 10px; } .pmcc-pair-card .pmcc-vp-split .strangle-verdict-row { font-size: 11.5px; line-height: 1.4; padding: 3px 0; gap: 6px; } .pmcc-pair-card .pmcc-vp-split .strangle-verdict-row svg { width: 13px; height: 13px; margin-top: 1px; } .pmcc-pair-card .pmcc-payoff-col { border-left: 1px solid rgba(255,255,255,0.08); padding-left: 16px; min-width: 0; } .pmcc-pair-card .pmcc-payoff-col .pf-head { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; } .pmcc-pair-card .pmcc-payoff-col .pf-head .pf-head-sub { color: var(--sub); font-weight: 400; font-size: 9.5px; margin-left: 4px; } .pmcc-pair-card .pmcc-payoff-col .pf-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 11px; } @media (max-width: 760px) { .pmcc-pair-card .pmcc-vp-split { grid-template-columns: 1fr; gap: 10px; } .pmcc-pair-card .pmcc-payoff-col { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 10px; } .pmcc-pair-card .pmcc-vp-split .strangle-verdict-row { font-size: 12.5px; padding: 4px 0; } .pmcc-pair-card .pmcc-vp-split .strangle-verdict-row svg { width: 14px; height: 14px; } .pmcc-pair-card .pmcc-payoff-col .pf-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* 双腿候选(strangle/价差/铁鹰/collar)损益曲线两列布局 — 与 .pmcc-vp-split 同概念，但通用不 scope 到某卡 */ .rec-vp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 4px; align-items: start; } .rec-payoff-col .pf-head { font-size: 11.5px; color: var(--sub); font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; } /* pf-strip 全部项挤一行（项数无关·覆盖全局 3 列 grid）— 现价/盈亏平衡/最大盈利/最大亏损 不再换行独占 */ .rec-payoff-col .pf-strip { display: flex; gap: 6px 10px; } .rec-payoff-col .pf-strip .item { flex: 1 1 0; min-width: 0; } @media (max-width: 560px) { .rec-vp-split { grid-template-columns: 1fr; gap: 10px; } } .rec-oneline { background: rgba(230,184,106,0.10); padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; margin-bottom: 10px; } /* 税务身份徽章（Section 1256）— 独立金边 pill，挂在 verdict 一句话下方。 优惠态实金边 / 提示态虚灰边。不进打分，纯信息。 */ .tax-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; background: var(--accent-tint); border: 1px solid var(--accent-soft); color: var(--accent-light); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 600; line-height: 1.4; } .tax-badge .ico { width: 15px; height: 15px; flex-shrink: 0; } .tax-badge .tax-sub { font-weight: 400; color: var(--sub); } .tax-badge.nudge { background: transparent; border: 1px dashed var(--line-2); color: var(--sub); font-weight: 500; } .tax-badge.nudge .ico { color: var(--sub); } /* 💰 资金独立提示（v2.0.2）— 不影响 tier 打分，单独 chip 显示 色调用 amber/orange 但比 cons.red 柔和，传达"提醒"而非"否决"。 */ .cap-blocker-chip { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(230,184,106,0.10), rgba(230,184,106,0.04)); border: 1px solid rgba(230,184,106,0.45); padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 12px; line-height: 1.45; } .cap-blocker-chip .cb-icon { font-size: 16px; flex-shrink: 0; } .cap-blocker-chip .cb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cap-blocker-chip .cb-text strong { color: var(--accent); } .cap-blocker-chip .cb-sub { font-size: 11px; color: var(--sub); } /* Covered Call「上行封顶」诚实提示：卖 call 把正股上行锁在行权价 —— 高 delta / 远期时大概率被叫走，别只看大租金。.bind = 封顶大概率触发（琉璃金强调）。 */ .cc-cap-chip { display: flex; align-items: center; gap: 10px; background: var(--card2); border: 1px solid var(--line); padding: 7px 12px; border-radius: 6px; margin: 8px 0; font-size: 12px; line-height: 1.45; } .cc-cap-chip .cb-icon { flex-shrink: 0; color: var(--sub); display: inline-flex; } .cc-cap-chip .cb-icon .ico { width: 15px; height: 15px; } .cc-cap-chip .cb-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .cc-cap-chip .cb-text strong { color: var(--text); font-weight: 600; } .cc-cap-chip .cb-sub { font-size: 11px; color: var(--sub); } .cc-cap-chip.bind { background: linear-gradient(135deg, rgba(230,184,106,0.12), rgba(230,184,106,0.04)); border-color: rgba(230,184,106,0.5); } .cc-cap-chip.bind .cb-icon { color: var(--accent); } .cc-cap-chip.bind .cb-text strong { color: var(--accent-light, var(--accent)); } .rec-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 8px; } .kmet { background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; text-align: center; position: relative; } .kmet-l { font-size: 10px; color: var(--sub); margin-bottom: 2px; display: inline-flex; align-items: center; gap: 3px; justify-content: center; } .kmet-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .kmet-v.green { color: var(--green); } .kmet-v.red { color: var(--red); } .kmet-v.accent { color: var(--accent); } .kmet-v.sub { color: var(--sub); font-size: 12px; } .kmet-sub { display: block; font-size: 9.5px; color: var(--sub); margin-top: 2px; line-height: 1.3; font-variant-numeric: normal; font-weight: 400; } /* ⓘ help icon (i18n-safe Latin 'i' in italic) */ .kmet-help { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border: 1px solid var(--sub); border-radius: 50%; font-size: 9px; font-weight: 600; color: var(--sub); cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-style: italic; line-height: 1; background: transparent; padding: 0; transition: color 0.15s, border-color 0.15s; } .kmet-help:hover, .kmet-help:focus { color: var(--accent); border-color: var(--accent); outline: none; } /* kmet popover (BS / 阈值 / 概率口径 解释) */ .kmet-pop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(0.98); transform-origin: top center; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 248px; font-size: 11px; line-height: 1.55; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 30; text-align: left; font-weight: 400; font-variant-numeric: normal; white-space: normal; } .kmet-pop.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); } .kmet-pop strong { color: var(--accent); } .kmet-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; } .kmet-pop .pop-row { color: var(--sub); } .kmet-pop .pop-row b { color: var(--text); font-weight: 500; } .rec-details summary { font-size: 11px; color: var(--sub); cursor: pointer; padding: 4px 0; user-select: none; } .rec-details summary:hover { color: var(--accent); } .rec-details[open] summary { color: var(--accent); } .rec-detail-body { padding: 8px 0 4px; } .rec-proscons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 8px; } .rec-proscons ul { list-style: none; padding: 0; font-size: 11px; } .rec-proscons .pros li { color: var(--green); } .rec-proscons .cons li { color: var(--red); } .rec-fullstat { font-size: 11px; color: var(--sub); background: var(--card2); padding: 6px 10px; border-radius: 4px; } .rec-fullstat code { font-family: var(--font-num); background: var(--card); padding: 1px 4px; border-radius: 3px; color: var(--text); } /* ─── 推荐卡：对比 + 预览 + 加入持仓 按钮组 ─── */ .rec-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .rec-actions .preview-btn { background: transparent; color: var(--sub); border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; transition: all 0.15s; font-family: inherit; letter-spacing: -0.005em; min-height: 30px; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .rec-actions .preview-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(230,184,106,0.06); } /* ⚖️ 对比控件 · 描边胶囊 + 自绘勾选框（/metrics-pick A 方案 · congyang 2026-07-26）： 原裸复选框跟「预览」不同级、易被忽略 → 做成与「预览」等重的描边胶囊，左侧自绘方框， 选中＝金框金底打勾。native input 视觉隐藏但保留（label 包裹 → 点胶囊即切换 + 键盘/无障碍）。全 rec 卡类型统一。 */ .rec-compare-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; line-height: 1.3; /* 对齐 .preview-btn，防文字行高把胶囊撑过 30px */ color: var(--sub); padding: 6px 11px 6px 9px; border: 1px solid var(--line); border-radius: 6px; min-height: 30px; box-sizing: border-box; user-select: none; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .rec-compare-check::before { /* 自绘勾选框（取代 native checkbox 外观）*/ content: ''; box-sizing: border-box; /* 15px 含边框，不撑高胶囊（否则 content-box 15+1.6×2=18.2px → 胶囊 32px 比邻按钮高 2px）*/ width: 15px; height: 15px; flex: none; border: 1.6px solid var(--dim); border-radius: 4px; background: center / 13px no-repeat; transition: background-color var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .rec-compare-check input[type="checkbox"] { /* 视觉隐藏、保留可切换 + a11y */ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .rec-compare-check:hover { color: var(--accent); border-color: var(--accent-soft); background: rgba(230,184,106,0.05); } .rec-compare-check:hover::before { border-color: var(--accent-soft); } .rec-compare-check:focus-within { border-color: var(--accent); } .rec-compare-check:has(input:checked) { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-tint); } .rec-compare-check:has(input:checked)::before { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23211402' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 L6.8 11.6 L12.5 5.2'/%3E%3C/svg%3E"); } /* ── 底部 tab 导航 (preview · ?nav=on / localStorage nav=1) · A 方案 ── */ /* 琉璃 2.0：通栏 tab bar → 悬浮胶囊 dock（真玻璃 chrome 名额 · /design-system §11） 净空统一走 --nav-clearance（86px + safe-area = dock 高 ~60 + 悬浮 10 + 呼吸 16）， 任何底部留高 / bottom-sheet 上抬一律引用变量，不再散落硬编码 72px。 */ #nav-tabs { position: fixed; /* 真机(iOS Safari/国产内核)对 body 外元素的 transform 居中不可靠 → left/right 锚定 + margin:auto + max-width 收浮窗，零 transform 依赖 */ left: 0; right: 0; bottom: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin: 0 auto; width: fit-content; max-width: calc(100vw - 24px); overflow: hidden; isolation: isolate; background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.018) 40%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.045) 100%), rgba(13,16,26,0.77); backdrop-filter: blur(28px) saturate(1.75); -webkit-backdrop-filter: blur(28px) saturate(1.75); border: 1px solid var(--edge); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 36px -10px rgba(1,3,9,0.70); /* 横向 11px：active 药丸外扩 5px 后边缘仍留 6px 呼吸（与上下一致），贴边不优雅（2026-06-11） */ padding: 6px 11px; display: none; gap: 2px; z-index: 1500; /* nav-tabs 在 JS 里被挪到 直接子节点 (body 外 — bug2 修法), 不再继承 body 的 color: var(--text)。.nt-item 的 color: var(--muted) 又因 --muted 未定义而 invalid → 回退到继承 color = html 默认黑 → 黑图标在黑 bg 上消失。 在 nav-tabs 上显式 set color, 让 .nt-item 继承到正确值。 同理 font-family 也不继承 body 的 var(--font-text) → 不显式 set 会回退 html 默认 serif (.nt-item 是 font-family:inherit) → 导航文字变衬线。一并显式 set。 */ color: var(--text); font-family: var(--font-text); } :root[data-theme="light"] #nav-tabs { background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.20) 45%, rgba(255,255,255,0) 70%), rgba(255,254,250,0.90); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 32px -10px rgba(72,56,30,0.24); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #nav-tabs { background: rgba(13,16,26,0.97); } :root[data-theme="light"] #nav-tabs { background: rgba(255,254,250,0.98); } } @media (prefers-reduced-transparency: reduce) { #nav-tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,16,26,0.97); } :root[data-theme="light"] #nav-tabs { background: rgba(255,254,250,0.98); } } #nav-tabs.show { display: flex; } .nt-item { /* 等宽 tab：CJK 2 字短、EN 词长不一（Position vs Find），content-size 会让长词的格子+药丸 撑宽 → 整条 nav 视觉失衡/被挤偏。固定等宽让任何语言下 5 格对称（标准底栏做法）。 */ position: relative; flex: none; width: 60px; min-width: 0; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--sub); font-size: 10px; font-weight: 500; padding: 7px 3px 6px; background: transparent; border: none; cursor: pointer; border-radius: 999px; font-family: inherit; letter-spacing: 0.02em; transition: color 0.18s, background var(--dur-normal) var(--ease-spring); -webkit-tap-highlight-color: transparent; } .nt-item .ico { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .nt-item .ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } /* 激活态: 金 soft 药丸点亮（dock 形态下不再用顶部指示条） 2026-06-11 用户两轮拍板：高度撑满不动，只往左右各拓 5px（更宽 = 视觉更扁）， 并给药丸玻璃立体感（135° 高光 + 顶倒角 + 金 glow） */ .nt-item.active { color: var(--accent); font-weight: 700; background: transparent; box-shadow: none; } .nt-item.active::before { content: ''; position: absolute; inset: 0 -5px; border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.01) 55%), var(--accent-tint-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(var(--accent-rgb), 0.30), 0 3px 10px -3px rgba(var(--accent-rgb), 0.35); pointer-events: none; } .nt-item.active .ico svg { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.35)); } .nt-item:active { transform: scale(0.94); } .nt-item:active .ico svg { transform: scale(0.94); } /* 导览：切到新 tab 时，选中底部导航项的金药丸「呼吸」——轻微缩放 + glow 一张一弛， 提示用户「导览刚切到这个 tab」。class 仅由 _navTab 在 _tourMode 下加到 active 项（正常使用不触发）。 */ .nt-item.nt-tour-pulse::before { animation: ntTourBreathe 1.8s ease-in-out infinite; } @keyframes ntTourBreathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(var(--accent-rgb), 0.30), 0 3px 10px -3px rgba(var(--accent-rgb), 0.35); transform: scale(1); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 0 0 1px rgba(var(--accent-rgb), 0.60), 0 5px 20px -2px rgba(var(--accent-rgb), 0.75); transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .nt-item.nt-tour-pulse::before { animation: none; } } /* CTA: 推荐 tab — 跟其他 item 同形同尺寸，仅常驻金色标识主打（2026-06-11 用户拍板： 去实金圆，icon/label 常金；选中走通用 .active 金药丸，跟其他 tab 行为完全一致） */ .nt-item.nt-cta { color: var(--accent); } /* nav 启用时, 给 body 留出底部空间（dock 净空统一变量） */ body.nav-enabled { padding-bottom: var(--nav-clearance); } /* nav 启用时, 隐藏原"找最佳合约"大按钮 (推荐 tab 代替) */ body.nav-enabled .rec-btn-large { display: none !important; } /* nav 启用时, 持仓 tab 只显示"持仓相关"内容 — 隐藏小白指南 / 右侧操作 pin (推荐+复盘按钮) 这些功能已由其他 tab 承担, 持仓页面应聚焦持仓本身。 小白指南挪到独立 guide tab — 跟 morning-brief 同 pattern, 平时 display:none, 激活时加 .tab-shown */ body.nav-enabled .edu-card:not(.tab-shown), body.nav-enabled .side-pin { display: none !important; } body.nav-enabled .edu-card.tab-shown { display: block !important; } /* guide tab 激活 → edu-card 升级成全屏 tab-page (沿用 morning-brief pattern) */ body.is-tab-page .edu-card.tab-shown { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px var(--nav-clearance) !important; z-index: 1440 !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; background: var(--bg) !important; } /* ── 问管家「问」tab（Stage 2·替代原「指南」nav tab）── */ /* nav 启用 → 「期权小白指南」不再独立成 tab；其内容 relocate 进「问」tab 顶部折叠区（in-ask-fold）。 edu-card 在 fold 内退成普通内容块（去全屏/去卡壳/隐藏自带标题，标题由 fold summary 代表）。 */ body.nav-enabled .edu-card.in-ask-fold { display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; z-index: auto !important; } body.nav-enabled .edu-card.in-ask-fold > h3 { display: none !important; } /* 「问」tab：默认隐藏；nav 启用 + tab-shown → 全屏 tab-page（沿用 edu-card/morning-brief pattern） */ #ask-tab { display: none; } body.nav-enabled #ask-tab:not(.tab-shown) { display: none !important; } body.nav-enabled #ask-tab.tab-shown { display: block !important; } body.is-tab-page #ask-tab.tab-shown { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: calc(18px + env(safe-area-inset-top, 0px)) 14px var(--nav-clearance) !important; z-index: 1440 !important; /* flex 列：折叠指南置顶 / thread 中间滚 / 输入·胶囊钉底（聊天 app 惯例·一进「问」就在底部） */ display: flex !important; flex-direction: column !important; overflow: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; background: var(--bg) !important; } body.is-tab-page #ask-tab.tab-shown > .ask-guide-fold { flex: 0 0 auto; } body.is-tab-page #ask-tab.tab-shown > #ask-tab-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* thread 吃掉中间所有空间并内部滚动；输入行/胶囊/免责声明自然高度 → 钉底 */ body.is-tab-page #ask-tab.tab-shown #ask-tab-body .ask-thread { flex: 1 1 auto; min-height: 0; max-height: none !important; overscroll-behavior: contain; } body.is-tab-page #ask-tab.tab-shown #ask-tab-body > :not(.ask-thread) { flex: 0 0 auto; } /* 进「问」tab 锁 documentElement 滚动 → 消除背后可滚的页面，杜绝触屏滑动穿透（#ask-tab 是内滚·非自身滚动面， 不同于其它 tab-page〔fixed 自身 overflow-y:auto〕，会让滑动穿透到背后 body·_navTab 进/离 toggle 本 class）*/ html.ask-scroll-lock, html.ask-scroll-lock body { overflow: hidden !important; } /* 桌面经典滚动条（占位式）下，上面的 overflow:hidden 会让文档滚动条消失 → 视口宽 ~10-15px → 居中的底部 dock (#nav-tabs left:0;right:0;margin:auto) 重新居中＝右移几个 px（congyang 2026-07-01 实锤「点问 icon 后下方 nav 向右 shift」）。stable gutter 把滚动条空位保留住， 锁滚前后视口宽不变、dock 不动。overlay 滚动条（手机 / Mac 默认）本就不占位，无影响。 */ html.ask-scroll-lock { scrollbar-gutter: stable; } /* 空态 intro 在高 thread 里垂直居中（欢迎页感·不顶部卡住）；有对话时 .ask-row 正常顶对齐 */ body.is-tab-page #ask-tab.tab-shown #ask-tab-body .ask-thread .ask-state { margin-top: auto; margin-bottom: auto; } /* 展开折叠指南时其内容内部滚动（封顶 52vh）→ 不把底部输入挤出屏 */ body.is-tab-page #ask-tab.tab-shown .ask-guide-body { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 移动「问」tab 顶部标题行（桌面用 side-pin/overlay 的 badge，故此行仅 nav-enabled 显示） */ #ask-tab .ask-tab-head { display: none; } body.nav-enabled #ask-tab.tab-shown .ask-tab-head { display: flex; align-items: flex-start; flex: 0 0 auto; font-size: 16px; font-weight: 700; color: var(--text); margin: 0 2px 12px; } /* 折叠「期权小白指南」行：置顶、准玻璃卡面、点击展开（展开≈原进指南交互） */ .ask-guide-fold { border: 1px solid var(--edge); border-radius: 14px; background: var(--glass-grad); background-color: var(--glass); margin-bottom: 16px; overflow: hidden; } .ask-guide-fold > summary.ask-guide-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-size: 14px; font-weight: 600; color: var(--text); } .ask-guide-fold > summary.ask-guide-sum::-webkit-details-marker { display: none; } .ask-guide-fold > summary .ico { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; } .ask-guide-fold > summary .ask-guide-chev { margin-left: auto; color: var(--sub); font-size: 17px; line-height: 1; transition: transform var(--dur-quick, .15s) var(--ease-out, ease); } .ask-guide-fold[open] > summary .ask-guide-chev { transform: rotate(90deg); } .ask-guide-fold[open] > summary.ask-guide-sum { color: var(--accent); border-bottom: 1px solid var(--edge); } .ask-guide-body { padding: 6px 14px 12px; } /* nav 启用时, morning-brief 不自动 inline 显示 — 仅在简报 tab 激活时由 .tab-shown 显示 */ body.nav-enabled #morning-brief:not(.tab-shown) { display: none !important; } body.nav-enabled #morning-brief.tab-shown { display: block !important; } /* nav 启用时, "展开管家"小 pill (mb-reopen) 也藏起 — 简报 tab 就是入口 */ body.nav-enabled #mb-reopen { display: none !important; } /* nav 启用时, "对比"浮按钮 (.compare-pill) 要避开底部 tab bar, 同时 z-index 要高于 tab-page modal */ body.nav-enabled .compare-pill { bottom: calc(var(--nav-clearance) + 8px) !important; z-index: 1450 !important; /* tab-page modal=1440, nav-tabs=1500, 夹在中间 */ } /* nav + tab-page 时, compare-modal 默认 z-index:1200 会被 rec-form (1440) 盖 → 看不见。 升到 1460, 同时藏掉其内部 X (统一: tab 模式无 X) */ body.is-tab-page .compare-modal { z-index: 1460 !important; } body.is-tab-page .compare-modal .x { display: none !important; } /* compare-modal / preview-modal 在 mobile 是 bottom-sheet (bottom:0 + max-height:92vh), nav 模式下 底部会被 tab bar 盖住 → 内部"返回推荐"/"确认加入持仓"等按钮看不到。把 modal 上抬到 tab bar 上方。 (加仓预览 #preview-modal 从推荐 tab 触发 = is-tab-page, 之前漏了这条 → PWA 上底部被 nav 遮, §12 铁律第 3 条) */ body.nav-enabled.is-tab-page .compare-modal, body.nav-enabled.is-tab-page .preview-modal { bottom: var(--nav-clearance) !important; max-height: calc(88vh - var(--nav-clearance)) !important; padding-bottom: 24px !important; /* 上抬后不再被 tab bar 压, 缩底部 padding */ overscroll-behavior: contain !important; /* 触底回弹不传到下层 */ -webkit-overflow-scrolling: touch; } /* tab-page 模式所有全屏 modal 加 overscroll-behavior:contain, 防 iOS 滚到顶/底后页面跟着动 */ body.is-tab-page #rec-form, body.is-tab-page .review-modal, body.is-tab-page .morning-brief { overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* 锁底层 body 整页滚动: tab-page 模式下 modal 是出口, 后面的持仓页不该跟着动 */ body.nav-enabled.is-tab-page { overflow: hidden !important; } /* 持仓 tab 的二级 bottom-sheet (coach / assigned / journal) 打开时也锁底层滚动, 防 "上层 modal 不动 下层持仓列表跟着滑" 的穿透。这些 modal 在持仓 tab 上 (非 is-tab-page), 不走上面那条 is-tab-page 锁。:has() 跟随 modal .open 自动开关, 关掉/切走即解锁不会卡死。 (PWA modal §12 铁律: 用户从某 tab 触发的交互必须 stay local on that tab) */ body.nav-enabled:has(#coach-modal.open), body.nav-enabled:has(#assigned-modal.open), body.nav-enabled:has(#journal-modal.open), /* ⬅ 账户设置**从来就不在这张名单里**（2026-08-11 congyang PWA 实机报「滑动时账户设置 界面不动，背景在移动」）。手指落在它的标题栏 / 底部「取消·保存」那条上时， `.am-body` 捕不到滚动 → 直接滚了背后的持仓页。⚠️ 它开的时候加的是 `.show` 不是 `.open` —— 照抄上面三行会写成一条永远不生效的规则。 ⭐ 这张名单是**逐个 id 手写**的，加新 modal 不会自动进来 → `scripts/modal_scrolllock_qa.mjs` 已把它钉成真浏览器断言。 */ body.nav-enabled:has(#account-modal.show), /* ⬅ 持仓资讯（app.qa.js · `.open` 打开）：套的是 `.review-modal` 的皮，但 `showNews()` **不设 `body.is-tab-page`** → 上面那条整页锁不覆盖它，这条名单里原本也没有它。 2026-08-11 modal_scrolllock_qa.mjs 第一次真跑就抓出来的第二个同类实例。 */ body.nav-enabled:has(#news-modal.open) { overflow: hidden !important; } /* is-tab-page: 把现有 modal 升级成全屏页 (无 backdrop / 边到边 / 顶部留 safe-area / 底部留 tab bar) */ body.is-tab-page #rec-form.rec-form.modal, body.is-tab-page #rec-form.rec-form, body.is-tab-page .review-modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important; padding-bottom: var(--nav-clearance) !important; z-index: 1440 !important; overflow-y: auto !important; } /* tab-page 模式: 隐藏 rec/review/brief 这类"全屏 tab-page"自己的 backdrop。 例外: open-pos / preview / account 是"叠在 tab-page 之上的二级 modal", 它们的 backdrop 仍要显示 */ body.is-tab-page .modal-backdrop:not(#open-pos-backdrop):not(#preview-backdrop):not(#account-backdrop) { display: none !important; } /* 教练/接货/笔记 modal 钉在持仓 tab: 它们是 .review-modal, 若在持仓 tab 打开后切到别 tab (is-tab-page), 会被上面 .review-modal 全屏规则拽到新 tab 上显示 → 用户看到"方案页跑别 tab"。 这里在 is-tab-page 时只 *隐藏* 它们(不关闭, .open 仍在), 切回持仓 tab 自动重现。 (它们的 backdrop 已被上面 :not() 规则隐藏; #review-modal 是 tab-page 自己故不点名) */ body.is-tab-page #coach-modal, body.is-tab-page #assigned-modal, body.is-tab-page #journal-modal { display: none !important; } /* tab-page 模式: open-pos / preview / account 这种"叠在 rec-form / review / brief 之上的二级 modal" z-index 必须高于 tab-page 全屏 modal (1440) 才不会被盖住。 不到 nav-tabs (1500), 让底部 tab 仍可见可点 */ body.is-tab-page #open-pos-modal, body.is-tab-page #preview-modal, body.is-tab-page #account-modal { z-index: 1460 !important; } body.is-tab-page #open-pos-backdrop, body.is-tab-page #preview-backdrop, body.is-tab-page #account-backdrop { z-index: 1455 !important; } /* tab-page 模式: 隐藏所有右上角 × 关闭按钮 — 底部 tab 才是导航出口 */ body.is-tab-page #rec-form .x, body.is-tab-page .review-modal .x, body.is-tab-page .morning-brief .mb-close { display: none !important; } /* tab-page 模式: 防止 modal 内部任何元素造成横向滚动 */ body.is-tab-page #rec-form, body.is-tab-page .review-modal, body.is-tab-page .morning-brief { overflow-x: hidden !important; } /* tab-page 模式: sticky h4 的 safe-area 归属修复 (用户 2026-06-09 截图: 滚动时上方 payoff 图 / 上条内容从 banner 顶上的 safe-area 缝里"穿"出来)。 根因: 容器 #rec-form 自己吃了 padding-top:calc(24px+safe), sticky 元素被限制在 容器 content box 内 → 配 top:-18px / 负 margin 时无法贴到视口最顶 → 状态栏带状区露白, 滚动内容从那条缝穿透。 修法: 把 safe-area 顶部留白从【容器】移到【header 自身的 padding-top】, header top:0 贴在 scrollport 顶、负 margin 归零 → header 永远盖住整条 safe-area, 内容只能从它下方滚过。 */ body.is-tab-page #rec-form.rec-form.modal, body.is-tab-page #rec-form.rec-form { padding-top: 0 !important; } body.is-tab-page #rec-form h4 { top: 0 !important; margin: 0 -14px 12px !important; padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 10px !important; } /* tab-page 模式: 隐藏 bottom-sheet 顶部拖把横杠 */ body.is-tab-page .rec-form.modal::before, body.is-tab-page .review-modal::before { display: none !important; } /* tab-page 模式: rec-form 内部 submit-row 不再 bottom-sheet 样式 */ body.is-tab-page .rec-form .submit-row { margin: 18px 0 0 !important; border-radius: 0 !important; padding-bottom: 16px !important; } /* 早安简报 tab 化 — padding-top 留出 safe-area + 一整行 greeting 高度, 让刷新按钮和 greeting 不打架 */ body.is-tab-page .morning-brief { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; /* 收租气候上线后刷新/关闭已移进 .mb-head（气候卡下方），不再 absolute 浮在右上 → 这里不必再为浮动按钮预留 58px，否则气候卡上方出现一截空占位。收到 20px 舒适留白即可。 */ padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important; padding-bottom: var(--nav-clearance) !important; z-index: 1440 !important; overflow-y: auto !important; } /* tab-page 全屏时, 把 mb-refresh 放在 safe-area 正下方一行的位置 (右上角的"操作区"), mb-close 因为 tab 模式不需要 (有底部 tab 切走), 直接藏掉 */ body.is-tab-page .morning-brief .mb-refresh { top: calc(env(safe-area-inset-top, 0px) + 14px) !important; right: 14px !important; } body.is-tab-page .morning-brief .mb-close { display: none !important; } /* ── 底部快捷栏 (preview: ?bar=1 启用 / localStorage qb=1 持久) ── */ #quick-bar { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(15,15,17,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); border-radius: 18px; padding: 8px 6px; display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; z-index: 1400; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } :root[data-theme="light"] #quick-bar { background: rgba(255,255,255,0.92); } #quick-bar.show { display: grid; } #quick-bar.show ~ .compare-pill { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); } .qb-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text); font-size: 11px; padding: 8px 4px; border-radius: 12px; background: transparent; border: none; cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.12s; } .qb-item:active { transform: scale(0.94); } .qb-item:hover { background: rgba(255,255,255,0.05); } .qb-item .ico { font-size: 20px; line-height: 1; } .qb-item.primary { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #0A0A0B; font-weight: 700; } .qb-item.primary:hover { filter: brightness(1.05); background: linear-gradient(135deg, var(--accent), var(--accent-light)); } /* 退出预览的小 × 按钮 */ #qb-exit { position: fixed; right: 14px; bottom: calc(95px + env(safe-area-inset-bottom, 0px)); width: 28px; height: 28px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 1401; } #quick-bar.show ~ #qb-exit { display: flex; } /* 浮动「对比」按钮 — sticky 底部，必须高于 rec-form modal (1001) */ .compare-pill { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--gold-grad); color: var(--gold-ink); border: none; border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 28px rgba(230,184,106,0.32), 0 1px 0 rgba(0,0,0,0.04); z-index: 1100; transition: filter 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; gap: 8px; font-family: inherit; letter-spacing: -0.01em; } .compare-pill:hover { filter: brightness(1.05); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 10px 36px rgba(230,184,106,0.46); } .compare-pill:active { filter: brightness(0.96); } .compare-pill .pill-count { background: rgba(0,0,0,0.18); border-radius: 10px; padding: 1px 7px; font-size: 11.5px; font-weight: 800; } .compare-pill .pill-x { color: rgba(0,0,0,0.45); font-weight: 400; font-size: 16px; margin-left: 4px; transition: color 0.15s; } .compare-pill .pill-x:hover { color: rgba(0,0,0,0.9); } /* ─── 加仓预览 modal ─── */ .preview-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, 94vw); max-height: 90vh; overflow-y: auto; z-index: 1200; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } /* 🏠 开仓 modal (Step 2) */ .open-pos-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, 94vw); max-height: 90vh; overflow-y: auto; z-index: 1200; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } .open-pos-modal.open { display: grid; gap: 14px; } .open-pos-modal h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; justify-content: space-between; align-items: center; } .open-pos-modal h3 .x { cursor: pointer; color: var(--sub); font-size: 22px; line-height: 1; } .open-pos-modal .op-contract { background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 13px; } .open-pos-modal .op-contract strong { font-weight: 700; } .open-pos-modal .op-contract .strike { color: var(--accent); font-weight: 600; } /* M (2026-06-10): delta 带替换提示 — 下单前校验生成时 Δ 是否漂出甜蜜带 */ .open-pos-modal .op-delta-hint { margin-top: 6px; padding: 7px 10px; border-radius: 6px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); background: var(--card2); border: 1px dashed var(--line); } .open-pos-modal .op-delta-hint code { font-family: var(--font-num); color: var(--accent); font-size: 11px; } .open-pos-modal .op-contract .type-tag { font-family: var(--font-num); font-size: 9.5px; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.05em; background: rgba(96,165,250,0.12); color: var(--blue); border: 1px solid rgba(96,165,250,0.3); } .open-pos-modal .op-contract .type-tag.call { background: rgba(248,113,113,0.10); color: var(--red); border-color: rgba(248,113,113,0.3); } .open-pos-modal .op-contract .exp { font-size: 11px; color: var(--sub); } .open-pos-modal .op-contract .mid { font-size: 11px; color: var(--sub); margin-left: auto; font-family: var(--font-num); } .open-pos-modal .op-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .open-pos-modal .op-field label { display: block; font-size: 11px; color: var(--sub); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .open-pos-modal .op-field input { width: 100%; padding: 8px 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 5px; color: var(--text); font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; } .open-pos-modal .op-field input:focus { outline: none; border-color: var(--accent-tint-strong); background: var(--card); } .open-pos-modal .op-field.with-suffix { position: relative; } .open-pos-modal .op-field.with-suffix .suffix { position: absolute; right: 10px; top: 28px; font-size: 11px; color: var(--sub); pointer-events: none; } /* 🔄 展期单 (Roll pair ticket) — 持仓卡点 Roll → 选候选 → 这张单同屏显示 买回旧腿 + 卖出新腿 + 净额/天数，一个「确认展期」原子完成（2026-06-16） */ .open-pos-modal .op-roll-ticket { display: flex; flex-direction: column; gap: 0; margin: 4px 0 2px; } .open-pos-modal .orl-leg { background: var(--glass-grad), var(--glass); border: 1px solid var(--edge); border-radius: 12px; padding: 11px 13px; } .open-pos-modal .orl-tag { font-size: 10.5px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 7px; } .open-pos-modal .orl-open .orl-tag { color: var(--accent-light); } .open-pos-modal .orl-contract { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 9px; font-size: 13px; margin-bottom: 9px; } .open-pos-modal .orl-contract .strike { color: var(--accent); font-weight: 700; } .open-pos-modal .orl-contract .exp { font-size: 11px; color: var(--sub); } .open-pos-modal .orl-contract .mid { font-size: 11px; color: var(--sub); margin-left: auto; font-family: "SF Mono", Menlo, monospace; } .open-pos-modal .orl-contract .type-tag { font-family: "SF Mono", Menlo, monospace; font-size: 9.5px; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.05em; background: rgba(96,165,250,0.12); color: var(--blue); border: 1px solid rgba(96,165,250,0.3); } .open-pos-modal .orl-contract .type-tag.call { background: rgba(248,113,113,0.10); color: var(--red); border-color: rgba(248,113,113,0.3); } .open-pos-modal .orl-arrow { text-align: center; color: var(--accent); line-height: 1; padding: 5px 0; display: flex; align-items: center; justify-content: center; } .open-pos-modal .orl-summary { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; } .open-pos-modal .orl-net { font-size: 13.5px; color: var(--text); } .open-pos-modal .orl-net strong { font-variant-numeric: tabular-nums; } .open-pos-modal .orl-net.good strong { color: var(--green); } .open-pos-modal .orl-net.bad strong { color: var(--red); } .open-pos-modal .orl-days { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; } .open-pos-modal .op-persona-label { font-size: 11px; color: var(--sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: baseline; gap: 6px; } .open-pos-modal .op-persona-label .hint { text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--accent); } .open-pos-modal .op-persona-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .open-pos-modal .op-pop { background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 7px; text-align: center; cursor: pointer; color: var(--text); font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: all 0.12s; } .open-pos-modal .op-pop:hover { background: var(--card); border-color: var(--accent-tint-strong); } .open-pos-modal .op-pop.active { background: var(--accent-tint); border-color: var(--accent-tint-strong); } .open-pos-modal .op-pop .ico { font-size: 17px; line-height: 1; } .open-pos-modal .op-pop .ttl { font-size: 11.5px; font-weight: 600; } .open-pos-modal .op-pop .sub { font-size: 10px; color: var(--sub); } .open-pos-modal .op-triggers { background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; } .open-pos-modal .op-triggers-h { font-size: 11px; color: var(--sub); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: baseline; gap: 6px; } .open-pos-modal .op-triggers-h .persona-mini { margin-left: auto; font-size: 10px; color: var(--accent-light); background: var(--accent-tint); padding: 2px 6px; border-radius: 3px; letter-spacing: 0; text-transform: none; font-weight: 600; } .open-pos-modal .op-triggers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .open-pos-modal .tg-cell { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 8px; } .open-pos-modal .tg-cell.dim { opacity: 0.42; } .open-pos-modal .tg-cell .tg-top { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; } .open-pos-modal .tg-cell .tg-lbl { font-size: 10px; color: var(--sub); } .open-pos-modal .tg-cell .tg-val { font-size: 12px; font-weight: 700; } .open-pos-modal .tg-cell .tg-act { font-size: 9.5px; color: var(--sub); margin-top: 2px; } .open-pos-modal .op-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .open-pos-modal .op-cancel { background: transparent; border: 1px solid var(--line); color: var(--sub); padding: 8px 14px; border-radius: 5px; font-size: 12.5px; cursor: pointer; } .open-pos-modal .op-submit { border: 0; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; /* 实金渐变 + 999px 胶囊由 §QA-5 琉璃层「主操作按钮」规则统一供给（见 ~11391）。 这里不再自带 background / border-radius / color，否则 (0,2,0) 特异性会盖掉琉璃层 (0,1,0) → 退回方角 5px + 平涂金（2026-06-16 用户截图发现）。hover 同理交给琉璃层。 */ } .open-pos-modal .op-submit:disabled { background: var(--card3); color: var(--sub); cursor: not-allowed; } /* 「加入持仓」成功反馈：合约小卡从按钮飞向「持仓」(PWA/手机=底部 nav-tab · 桌面=持仓列表) */ .add-flyer { position: fixed; z-index: 2000; pointer-events: none; background: var(--card3); border: 1px solid var(--accent-tint-strong); border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 8px 24px rgba(0,0,0,0.5); transition: transform 0.6s cubic-bezier(0.5,0,0.2,1), opacity 0.6s cubic-bezier(0.5,0,0.2,1); } /* 落地：持仓 nav-tab 跳一下 */ #nav-tabs .nt-item.nt-landed { animation: ntLanded 0.7s ease; } @keyframes ntLanded { 0% { transform: none; } 28% { transform: translateY(-5px) scale(1.16); } 100% { transform: none; } } /* 落地：桌面持仓列表金色高亮一下 */ .pos-grid.holdings-flash { animation: holdingsFlash 0.9s ease; border-radius: 12px; } @keyframes holdingsFlash { 0% { box-shadow: 0 0 0 0 rgba(230,184,106,0); } 25% { box-shadow: 0 0 0 3px var(--accent-tint-strong); } 100% { box-shadow: 0 0 0 0 rgba(230,184,106,0); } } @media (max-width: 600px) { /* 移动端：开仓 modal 由「居中」改「bottom-sheet 贴底滑上」。 居中时内容超长 + 底部 nav-tabs 会把「加入持仓」按钮截掉（iPhone 实测 bug）。 沿用 account-modal / compare-modal 的 bottom-sheet pattern（§12 铁律）。 */ .open-pos-modal { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 18px 18px 0 0; border-bottom: none; padding-bottom: 0; overflow-x: hidden; } /* 操作按钮固定在 sheet 底部，始终可见可点（不再随长内容滚出视口被遮） */ .open-pos-modal .op-actions { position: sticky; bottom: 0; background: var(--card); margin-top: 4px; padding: 12px 0 calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } /* PWA (nav-enabled)：sheet 贴底会被底部 nav bar (~72px + safe-area) 截住， 上抬到 nav bar 之上 → 「加入持仓」按钮不再被遮（§12 铁律第 3 条） */ body.nav-enabled .open-pos-modal { bottom: var(--nav-clearance); max-height: calc(90vh - var(--nav-clearance)); max-height: calc(90dvh - var(--nav-clearance)); } /* 上抬后 footer 不再被 tab bar 压，去掉双 safe-area */ body.nav-enabled .open-pos-modal .op-actions { padding-bottom: 12px; } .open-pos-modal .op-persona-opts { grid-template-columns: minmax(0, 1fr); } .open-pos-modal .op-pop { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; text-align: left; gap: 8px; padding: 9px 10px; } .open-pos-modal .op-pop .ico { grid-row: 1 / span 2; } .open-pos-modal .op-pop .ttl { margin-top: 0; } .open-pos-modal .op-triggers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 🪜 阶梯加仓 · 逐档卡片可编辑界面（B 方案 · 复用 open-pos modal 外壳 → 自带 §12 PWA bottom-sheet） */ .open-pos-modal .la-cards { display: grid; gap: 10px; } .open-pos-modal .la-rcard { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; } .open-pos-modal .la-rc-h { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; } .open-pos-modal .la-rc-strike { font-weight: 700; } .open-pos-modal .la-rc-strike.safe { color: var(--green); } .open-pos-modal .la-rc-strike.aggr { color: var(--accent-light); } .open-pos-modal .la-rc-h .type-tag { font-family: var(--font-num); font-size: 9.5px; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.05em; background: rgba(96,165,250,0.12); color: #6BA6F5; border: 1px solid rgba(96,165,250,0.3); } .open-pos-modal .la-rc-h .type-tag.call { background: rgba(248,113,113,0.10); color: var(--red); border-color: rgba(248,113,113,0.3); } .open-pos-modal .la-tag { font-size: 9.5px; padding: 2px 6px; border-radius: 3px; font-weight: 600; } .open-pos-modal .la-tag.safe { color: var(--green); background: rgba(63,221,156,0.15); } .open-pos-modal .la-tag.aggr { color: var(--accent-light); background: var(--accent-tint); } .open-pos-modal .la-rc-mid { margin-left: auto; font-size: 11px; color: var(--sub); font-family: var(--font-num); } .open-pos-modal .la-rc-prem { font-size: 11.5px; color: var(--sub); } .open-pos-modal .la-rc-prem b { color: var(--green); font-family: var(--font-num); font-size: 13px; font-weight: 600; } .open-pos-modal .la-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; } .open-pos-modal .la-foot .lbl { font-size: 10.5px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.05em; } .open-pos-modal .la-foot .val { font-size: 18px; font-weight: 700; font-family: var(--font-num); margin-top: 2px; } .open-pos-modal .la-foot .val.good { color: var(--green); } .open-pos-modal .la-foot .la-totay { font-size: 11px; color: var(--sub); font-weight: 500; } .open-pos-modal .la-note { font-size: 11px; color: var(--dim); line-height: 1.5; } /* 持仓卡 chip popover (Step 2 · Variant B 纵向) */ .exit-plan.compact .ep-chip-btn { background: var(--accent-tint); color: var(--accent-light); padding: 2px 7px; border-radius: 3px; font-weight: 600; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: inherit; transition: border-color 0.12s, background 0.12s; } .exit-plan.compact .ep-chip-btn:hover { border-color: var(--accent-tint-strong); } .exit-plan.compact .ep-chip-btn.overridden { background: rgba(96,165,250,0.10); color: var(--blue); border-color: rgba(96,165,250,0.25); } .exit-plan.compact .ep-chip-btn .chev { font-size: 8px; opacity: 0.6; } .persona-popover { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--card); border: 1px solid var(--accent-tint-strong); border-radius: 6px; padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.55); z-index: 1300; min-width: 218px; display: none; } /* 极窄屏：popover 不右溢出 */ @media (max-width: 480px) { .persona-popover { right: 0; left: auto; max-width: calc(100vw - 24px); } } .persona-popover.show { display: block; } .persona-popover .pp-opt { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 7px 8px; cursor: pointer; color: var(--text); display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; font-family: inherit; text-align: left; margin-bottom: 2px; } .persona-popover .pp-opt:hover { background: var(--card2); border-color: var(--line); } .persona-popover .pp-opt.active { background: var(--accent-tint); border-color: var(--accent-tint-strong); } .persona-popover .pp-opt .ico { font-size: 14px; line-height: 1; } .persona-popover .pp-opt .ttl { font-size: 11.5px; font-weight: 600; } .persona-popover .pp-opt .sub { grid-column: 2; font-size: 10px; color: var(--sub); } .persona-popover .pp-foot { padding: 4px 8px; font-size: 9.5px; color: var(--sub); border-top: 1px solid var(--line); margin-top: 4px; line-height: 1.4; } .persona-popover .pp-foot .reset-link { color: var(--accent); cursor: pointer; margin-left: 4px; } .persona-popover .pp-foot .reset-link:hover { text-decoration: underline; } .preview-modal.open { display: block; } .preview-modal h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; } .preview-modal .x { cursor: pointer; color: var(--sub); font-size: 22px; line-height: 1; } .preview-modal .preview-sub { color: var(--sub); font-size: 11.5px; margin-bottom: 16px; } .preview-section { background: var(--card2); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .preview-section .ps-title { font-size: 11px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .preview-section .ps-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12.5px; } .preview-section .ps-k { color: var(--sub); } .preview-section .ps-v { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } .preview-section .ps-arrow { color: var(--sub); font-size: 11px; margin: 0 4px; } .preview-section .ps-delta { font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-left: 6px; font-weight: 600; background: var(--card3); color: var(--sub); } .preview-section .ps-delta.up { color: var(--green); background: rgba(74,222,128,0.10); } .preview-section .ps-delta.down { color: var(--red); background: rgba(239,68,68,0.10); } .preview-section .ps-delta.warn { color: var(--orange); background: rgba(251,146,60,0.12); } .preview-warn { background: rgba(251,146,60,0.10); border: 1px solid var(--orange); border-radius: 6px; padding: 10px 12px; font-size: 11.5px; color: var(--orange); margin-bottom: 10px; line-height: 1.55; } .preview-warn b { color: var(--orange); } /* ─── 候选对比 modal ─── */ .compare-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(960px, 96vw); max-height: 90vh; overflow: auto; z-index: 1200; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } .compare-modal.open { display: block; } .compare-modal h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; } .compare-modal .x { cursor: pointer; color: var(--sub); font-size: 22px; line-height: 1; } .compare-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; } .compare-table th, .compare-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } .compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--sub); font-weight: 500; position: sticky; left: 0; background: var(--card); z-index: 1; } .compare-table thead th { font-size: 11px; color: var(--text); text-transform: none; font-weight: 700; background: var(--card); border-bottom: 2px solid var(--line-2); position: sticky; top: 0; z-index: 2; } .compare-table thead th:first-child { z-index: 3; } .compare-table .cmp-best { color: var(--green); font-weight: 700; } .compare-table .cmp-worst { color: var(--red); opacity: 0.85; } .compare-table .cmp-ticker-cell { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .compare-table .cmp-ticker-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.3px; } .compare-table .cmp-ticker-name { font-weight: 700; } .cmp-hint-banner { font-size: 11px; color: var(--text); margin-bottom: 10px; padding: 8px 12px; background: rgba(230,184,106,0.10); border-radius: 6px; line-height: 1.6; } .cmp-hint-banner > div + div { margin-top: 2px; } .compare-table .cmp-tag { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; margin-left: 4px; vertical-align: middle; } .compare-table .cmp-tag.call { background: rgba(74,222,128,0.18); color: var(--green); } .compare-table .cmp-tag.put { background: rgba(251,146,60,0.18); color: var(--orange); } .compare-empty { text-align: center; color: var(--sub); padding: 40px 16px; font-size: 13px; } /* ─── 候选对比 · v2 重做（分组卡片 + winner pill + head card 对子） ─── */ .compare-modal .cmp-modal-head { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: 12px; } .cmp-winner-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(52,211,153,0.14); color: var(--green); font-size: 12px; font-weight: 600; margin-bottom: 14px; border: 1px solid rgba(52,211,153,0.30); line-height: 1.4; } .cmp-winner-pill b { color: var(--green); font-weight: 700; } .cmp-winner-pill.cmp-winner-note { background: var(--fill, rgba(125,125,125,0.10)); color: var(--sub); border-color: var(--line); font-weight: 500; } .cmp-heads { display: grid; gap: 10px; margin-bottom: 14px; } .cmp-head-card { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; position: relative; } .cmp-head-card.winner { border-color: rgba(52,211,153,0.45); background: linear-gradient(180deg, rgba(52,211,153,0.07), rgba(52,211,153,0.02)); } /* 冠军角标：皇冠 · 玻璃质感 accent 圆角徽章，落在卡片内右上角（≠ tier 星星，语义不撞） */ .cmp-win-crown { position: absolute; top: 9px; right: 9px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: 0 1px 5px rgba(0,0,0,0.22); } .cmp-win-crown .ico { width: 14px; height: 14px; } /* 头卡右上角有角标 → 标题留出空间不被压 */ .cmp-head-card.winner .cmp-head-title { padding-right: 26px; } .cmp-head-title { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cmp-head-title .cmp-ticker-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } .cmp-head-title .cmp-tag { display: inline-block; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.6px; margin-left: 4px; } .cmp-head-title .cmp-tag.call { background: rgba(52,211,153,0.16); color: var(--green); } .cmp-head-title .cmp-tag.put { background: rgba(248,113,113,0.16); color: var(--red); } .cmp-head-title .cmp-tag.strangle { background: rgba(230,184,106,0.16); color: var(--accent); letter-spacing: 0.3px; } .cmp-head-strangle .cmp-head-strikes { margin-top: 5px; font-size: 12px; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .cmp-head-strangle .cmp-head-strikes .cmp-tag { margin-left: 0; margin-right: 2px; } .cmp-head-strangle .cmp-strike-sep { color: var(--sub); padding: 0 2px; } .cmp-error-banner { background: rgba(248,113,113,0.10) !important; border-left-color: var(--red) !important; color: var(--text); } .cmp-head-meta { font-size: 11px; color: var(--sub); margin-top: 4px; } .cmp-head-tier { margin-top: 6px; font-size: 13px; } .cmp-head-stars { margin-top: 6px; font-size: 13px; line-height: 1; } .cmp-head-score { margin-top: 3px; font-size: 12px; color: var(--sub); font-weight: 600; } .cmp-head-score b { color: var(--text); font-weight: 700; font-size: 14px; margin-left: 2px; } .cmp-head-premium { font-size: 17px; font-weight: 700; color: var(--accent); font-family: var(--font-num); margin-top: 4px; } .cmp-group { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; } .cmp-group-title { font-size: 10.5px; text-transform: uppercase; color: var(--sub); letter-spacing: 1.2px; margin-bottom: 4px; font-weight: 600; } .cmp-mrow { display: grid; align-items: center; padding: 4px 0; font-size: 12.5px; border-top: 1px solid rgba(255,255,255,0.02); gap: 8px; } .cmp-mrow:first-of-type { border-top: none; } .cmp-mlab { color: var(--text); font-size: 11.5px; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; } .cmp-mlab > .cmp-mwhy { display: inline; } .cmp-mwhy { font-size: 10.5px; color: var(--sub); font-weight: 400; opacity: 0.75; } .cmp-mwhy::before { content: '· '; } .cmp-mv { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; } .cmp-mv.best { color: var(--green); font-weight: 700; } .cmp-mv.worst { color: var(--red); opacity: 0.9; } /* ─── 分数差归因块（一句话 + Top 3 驱动条） ─── */ .sa-block { background: linear-gradient(180deg, rgba(52,211,153,0.05), rgba(52,211,153,0.01)); border: 1px solid rgba(52,211,153,0.22); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .sa-title { font-size: 10.5px; text-transform: uppercase; color: var(--green); letter-spacing: 1.2px; margin-bottom: 7px; font-weight: 700; opacity: 0.9; } .sa-title-sub { text-transform: none; letter-spacing: 0; color: var(--sub); font-weight: 500; margin-left: 6px; opacity: 0.95; } .sa-narrative { font-size: 12.5px; line-height: 1.55; color: var(--text); } .sa-narrative .sa-win { color: var(--green); font-weight: 700; } .sa-narrative .sa-lose { color: var(--sub); font-weight: 700; } .sa-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; background: rgba(230,184,106,0.09); border: 1px solid rgba(230,184,106,0.22); border-radius: 8px; font-size: 11.5px; line-height: 1.5; color: var(--sub); } .sa-note .ico { color: var(--accent); margin-top: 2px; } .sa-note .sa-win { color: var(--green); font-weight: 700; } .sa-note .sa-lose { color: var(--text); font-weight: 700; } .sa-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; } .sa-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .sa-fac { font-size: 11.5px; font-weight: 600; color: var(--text); } .sa-fav { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 5px; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; } .sa-fav-win { background: rgba(52,211,153,0.16); color: var(--green); } .sa-fav-lose { background: rgba(255,255,255,0.06); color: var(--sub); } .sa-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; } .sa-fill { display: block; height: 100%; border-radius: 999px; } .sa-fill-win { background: linear-gradient(90deg, rgba(52,211,153,0.5), var(--green)); } .sa-fill-lose { background: linear-gradient(90deg, rgba(148,163,184,0.4), var(--sub)); } .sa-detail { font-size: 10.5px; color: var(--sub); margin-top: 4px; font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 星级 vs 包租公分 口径澄清（头卡下方） */ .cmp-quality-note { margin: -4px 0 12px; padding: 8px 12px; background: var(--fill, rgba(125,125,125,0.06)); border: 1px solid var(--line); border-radius: 9px; font-size: 11px; line-height: 1.5; color: var(--sub); } .cmp-quality-note > div + div { margin-top: 5px; } .cmp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .cmp-btn-ghost { padding: 8px 14px; border-radius: 9px; background: transparent; color: var(--sub); border: 1.5px solid var(--line); font-size: 12px; font-weight: 600; cursor: pointer; } .cmp-btn-ghost:hover { color: var(--text); border-color: var(--line-2); } .cmp-cta-winner { padding: 8px 14px; border-radius: 9px; background: var(--green); color: #0A0A0B; border: none; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: transform 0.15s, filter 0.15s; } .cmp-cta-winner:hover { filter: brightness(1.08); transform: translateY(-1px); } .cmp-cta-winner:active { transform: scale(0.97); } /* 候选卡片闪光 — 跳转后短暂 outline 提示 */ .rec-card.rec-flash { animation: rec-flash-pulse 1.8s ease-out; } @keyframes rec-flash-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.65); } 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0.15); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } .rec-card.is-target-pin { /* ⚠️ 原来写的是 var(--accent-dim) —— 这个 token **从来没定义过**。 CSS 里 var() 指向未定义变量且没兜底 = invalid at computed-value time → border-color 退回初始值 currentColor = 近白色文字色 → 整张卡被框上一圈白边 （congyang 2026-08-10 截图问「这个白框是什么 bug」）。**不报错、只是画错**， 所以能活很久。同类由 scripts/check_css_vars.py 守。 */ border-color: var(--accent-soft); opacity: 0.9; } .target-pin-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 4px; padding: 2px 7px; margin-bottom: 6px; } .target-fit-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; border: 1px solid; margin-left: 8px; vertical-align: 1px; opacity: 0.9; } @media (max-width: 720px) { .cmp-head-title { font-size: 12px; } .cmp-head-premium { font-size: 15px; } .cmp-mrow { font-size: 11px; padding: 3px 0; gap: 6px; } .cmp-mlab { font-size: 10.5px; } .cmp-mwhy { font-size: 9.5px; } .cmp-group { padding: 7px 10px; } .cmp-actions .cmp-cta-winner { flex: 1; } .sa-block { padding: 10px 12px; } .sa-narrative { font-size: 11.5px; } .sa-note { font-size: 10.5px; } .sa-fac { font-size: 10.5px; } .sa-detail { font-size: 9.5px; } .cmp-quality-note { font-size: 10px; padding: 7px 10px; } .cmp-head-stars { font-size: 12px; } } @media (max-width: 720px) { .preview-modal, .compare-modal { border-radius: 16px 16px 0 0 !important; width: 100% !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; max-height: 92vh !important; padding: 18px 14px 40px !important; } .preview-modal::before, .compare-modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 12px; } .compare-pill { bottom: 18px; padding: 10px 18px; font-size: 13px; } .compare-table { font-size: 11px; } .compare-table th, .compare-table td { padding: 6px 7px; } .rec-actions { flex-wrap: wrap; gap: 4px; } /* preview-btn 移动尺寸由主移动 block 统一控制，删除冲突 override */ } /* 📊 Payoff Diagram */ .pos-payoff { border-radius: 8px; background: var(--accent-tint); border: 1px solid rgba(var(--accent-rgb), 0.30); overflow: hidden; transition: all 0.15s; } .pos-payoff:hover { border-color: var(--accent-soft); background: var(--accent-tint-strong); } .pos-payoff summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 11.5px; font-weight: 500; color: var(--accent); cursor: pointer; user-select: none; list-style: none; text-align: center; } .pos-payoff summary svg.ico { width: 14px; height: 14px; color: var(--accent); } .pos-payoff summary::-webkit-details-marker { display: none; } .pos-payoff summary:hover { color: var(--accent-light); } .pos-payoff[open] { background: var(--card2); border-color: var(--accent-soft); } .pos-payoff[open] summary { color: var(--accent); border-bottom: 1px solid rgba(var(--accent-rgb), 0.25); } .pos-payoff .payoff-body { padding: 10px 8px 12px; } .payoff-svg { width: 100%; height: auto; display: block; max-height: 280px; cursor: crosshair; touch-action: pan-y; } .pf-chart-wrap { position: relative; } .pf-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 10px 2px 0; font-size: 11px; } .pf-strip .item { display: flex; flex-direction: column; gap: 1px; } .pf-strip .lbl { color: var(--sub); font-size: 10px; } .pf-strip .val { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 500; } .pf-strip .val.gr { color: var(--green); } .pf-strip .val.rd { color: var(--red); } .pf-strip .val.ac { color: var(--accent); } /* 期权经济 strip（展开抽屉左栏顶部 · 镜像右图 .pf-strip · 方案 C · congyang 2026-07-06）*/ .opt-econ { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .opt-econ .oe-head { font-family: var(--font-num); font-size: 10.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; } .opt-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 10px 12px; border-radius: 9px; background: var(--fill); border: 1px solid var(--line); } .opt-strip .item { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .opt-strip .lbl { color: var(--sub); font-size: 9.5px; white-space: nowrap; } .opt-strip .val { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; white-space: nowrap; } .opt-strip .val.g { color: var(--green); } .opt-strip .val.r { color: var(--red); } .opt-strip .val.ac { color: var(--accent); } .opt-strip .val .src { color: var(--dim); font-size: 9px; font-weight: 500; margin-left: 4px; } .pf-legend-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 0; font-size: 10.5px; color: var(--sub); flex-wrap: wrap; gap: 6px; } .pf-legend-row .lg { display: inline-flex; gap: 12px; align-items: center; } .pf-legend-row .lg svg { vertical-align: middle; margin-right: 4px; } .pf-legend-row .merge-badge { background: rgba(107,182,255,0.12); color: var(--payoff-today); border: 1px solid rgba(107,182,255,0.35); border-radius: 4px; padding: 1px 6px; font-size: 10px; } .pf-legend-row .pf-hint { font-size: 10px; color: var(--dim); } .pf-tooltip { position: absolute; background: rgba(15,15,17,0.96); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 9px; font-size: 11px; pointer-events: none; opacity: 0; transition: opacity 0.1s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.5); z-index: 10; top: 6px; left: 0; } /* ⚠️ 白天底必须跟着主题翻白（congyang 2026-08-12 截图报的就是这个）： 里面 .ttp-price 用 --text、.ttp-row 用 --sub，白天都是近黑字 —— 压在上面写死的夜间深底上 ＝深字压深底，「若股价 / 到期盈亏 / 今天浮动」整行看不见，只剩绿/红数字浮出来。 口径照 §浮层 popover/menu（本文件 ~15155）：夜深底 / 白天白底；投影也换成 light 块调好的 --shadow-lg，硬黑 rgba(0,0,0,0.5) 落白卡上是一坨脏影。 全 app 就剩这一个浮层漏了 light override（#quick-bar / .app-toast / .cal-pane / 各 popover 都有）， 两个全屏 scrim 有意保持深色、且文字都落在 --card 卡里，不算漏。 */ :root[data-theme="light"] .pf-tooltip { background: rgba(255,254,250,0.94); box-shadow: var(--shadow-lg); } .pf-tooltip.show { opacity: 1; } .pf-tooltip .ttp-price { color: var(--text); font-weight: 500; margin-bottom: 3px; } .pf-tooltip .ttp-row { color: var(--sub); font-size: 10.5px; line-height: 1.5; } .pf-tooltip .ttp-row b { font-variant-numeric: tabular-nums; margin-left: 4px; } .pf-tooltip .ttp-row b.gr { color: var(--green); } .pf-tooltip .ttp-row b.rd { color: var(--red); } /* 📊 财报警告 */ .earnings-warn { margin: 0 14px 10px 14px; background: rgba(251,191,36,0.12); border-radius: 4px; padding: 6px 10px; font-size: 11px; line-height: 1.5; color: var(--text); } .earnings-warn strong { color: var(--orange); } /* ⚡ OPEX gamma 风险旗标（卡内联，可展开） */ .gamma-flag { margin: 0 14px 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--accent-soft); background: linear-gradient(135deg, var(--accent-tint), transparent 80%); } .gamma-flag.high { border-color: rgba(var(--red-rgb),0.45); background: linear-gradient(135deg, rgba(var(--red-rgb),0.12), transparent 82%); } .gf-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; } .gf-ic { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--accent); } .gamma-flag.high .gf-ic { color: var(--red); } .gf-ic svg { width: 14px; height: 14px; } .gf-t { font-size: 11.5px; font-weight: 700; color: var(--text); } .gf-t .gf-sub { font-weight: 400; color: var(--sub); } .gf-lvl { margin-left: auto; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-soft); } .gamma-flag.high .gf-lvl { color: var(--red); background: rgba(var(--red-rgb),0.12); border-color: rgba(var(--red-rgb),0.42); } .gf-chev { width: 13px; height: 13px; color: var(--dim); transition: transform .2s; flex: none; } .gamma-flag.open .gf-chev { transform: rotate(180deg); } .gf-body { display: none; padding: 0 10px 10px; } /* 展开动效与抽屉同一条（payoffDrawerIn）—— 旗标本来就是「行内可展开面板」， 两处展开的手感必须一样（congyang 2026-08-07：「gamma 展开应该跟抽屉展开效果一样」）。 */ .gamma-flag.open .gf-body { display: block; animation: payoffDrawerIn var(--dur-normal, .22s) var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } .gf-why { font-size: 11px; line-height: 1.55; color: var(--sub); margin-bottom: 9px; } .gf-why b { color: var(--text); } .gf-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding: 7px 8px 16px; background: var(--well); border-radius: 8px; } .gf-bar { flex: 1; background: var(--line-2); border-radius: 3px 3px 0 0; position: relative; min-height: 6px; } .gf-bar.spot { background: var(--accent); } .gf-bar.held { background: var(--red); } .gf-bar em { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 8px; font-style: normal; color: var(--dim); white-space: nowrap; } .gf-cap { font-size: 9.5px; color: var(--dim); text-align: center; margin: 6px 0 9px; } .gf-acts { display: flex; gap: 8px; } .gf-acts button { flex: 1; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 7px 10px; cursor: pointer; border: none; } .gf-roll { color: var(--gold-ink); background: var(--gold-grad); } .gf-close { color: var(--text); background: var(--fill-2); border: 1px solid var(--line-2) !important; } /* ── 列表模式的旗标（congyang 2026-08-07：顶部 banner「查看」在列表下点了不下展 —— 根因是 旗标当时只渲染在卡片里，列表行没有 .gamma-flag 可展开）。旗标本身就带折叠头，直接放进行里 即可，不必另做一条细条：收起态与 .prl-banner 同高（~26px），展开态照常给 OI 分布 + roll/买回。 卡片里它是行内嵌卡（左右留白 + 四角圆角）；行里要贴成通栏条，故外边距/圆角归零、只留上下边线。 ⚠️ 位置在**摘要行之下**（它是可展开面板不是预警条 —— 放上面展开会把上方内容顶走， congyang 实锤「抽屉出现在持仓行的上方了」）。 */ [data-density="simple"] .gamma-flag { margin: 0; border-radius: 0; border-width: 1px 0; border-top-color: var(--line); border-bottom-color: var(--accent-soft); /* 行盒 width:max-content（随中段横滚溢出）→ 旗标要跟抽屉一样钉在可视左， 否则右滑看数据列时它整块跑出屏；宽取容器视宽（#positions 是 container-type:inline-size）。 .gamma-flag 自身 overflow:hidden 只挡它的**后代**做 sticky，不挡它自己。 */ position: sticky; left: 0; width: 100cqw; box-sizing: border-box; z-index: 3; } [data-density="simple"] .gamma-flag.high { border-bottom-color: rgba(var(--red-rgb),0.32); } [data-density="simple"] .gf-head { padding: 6px 13px; gap: 7px; } [data-density="simple"] .gf-ic { width: 14px; height: 14px; } [data-density="simple"] .gf-ic svg { width: 12px; height: 12px; } [data-density="simple"] .gf-t { font-size: 11px; font-weight: 600; } [data-density="simple"] .gf-body { padding: 0 13px 10px; } /* 👻 「系统读不出来的记录」细提示条（持仓列表顶部 · congyang 2026-08-06 选 B） 复用 gamma-banner 同一套暖琥珀 token —— 语气是「待处理」不是「出错了」，不自创色。 */ .ghost-banner { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--accent-soft); background: var(--accent-tint); cursor: pointer; transition: background var(--dur-fast, .15s) var(--ease-out, ease); } .ghost-banner:hover { background: linear-gradient(135deg, var(--accent-tint), transparent 88%), var(--card); } .ghost-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ghb-ic { flex: none; width: 17px; height: 17px; color: var(--accent); } .ghb-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 660; color: var(--text); line-height: 1.45; } .ghb-link { flex: none; font-size: 12px; color: var(--sub); text-decoration: underline; } /* 详情 modal 内的逐条列表（外壳走 .app-modal → §12 PWA 规则已由外壳保证） */ .ghost-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .ghost-row:first-child { border-top: none; } .ghr-i { flex: 1; min-width: 0; } .ghr-n { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .ghr-w { font-size: 11.5px; color: var(--sub); margin-top: 2px; line-height: 1.45; } .ghr-del { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--fill-2); color: var(--text); cursor: pointer; } .ghr-del:hover { border-color: var(--accent-soft); } /* ⚡ 聚合预警 banner（持仓列表顶部） */ .gamma-banner { margin: 0 0 12px; border-radius: 12px; padding: 13px 14px; border: 1px solid var(--accent-soft); background: linear-gradient(135deg, var(--accent-tint), transparent 72%), var(--card); box-shadow: var(--shadow); } .gb-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; } .gb-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-soft); } .gb-ic svg { width: 15px; height: 15px; } .gb-ti { font-size: 12.5px; font-weight: 720; color: var(--text); } .gb-sub { font-size: 11px; color: var(--sub); line-height: 1.5; margin-bottom: 10px; } .gb-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--fill-2); border: 1px solid var(--line); border-radius: 10px; margin-top: 7px; flex-wrap: wrap; } .gb-tk { font-weight: 700; font-size: 12px; color: var(--text); flex: none; } .gb-tk em { font-style: normal; color: var(--dim); font-weight: 400; font-size: 10.5px; } .gb-meta { flex: 1; min-width: 90px; font-size: 10.5px; color: var(--sub); } .gb-lvl { flex: none; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-soft); } .gb-lvl.high { color: var(--red); background: rgba(var(--red-rgb),0.12); border-color: rgba(var(--red-rgb),0.42); } .gb-view { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--gold-ink); background: var(--gold-grad); border: none; border-radius: 999px; padding: 6px 11px; cursor: pointer; } .gb-view .gb-arr { width: 12px; height: 12px; flex: none; } .gamma-pulse { animation: gammaPulse 1.5s ease; } @keyframes gammaPulse { 0%, 100% { box-shadow: none } 30% { box-shadow: 0 0 0 2px var(--accent-soft) } } /* ☀️ Morning Brief — 每日重点，微金色暖光底 */ .morning-brief { background: radial-gradient(140% 100% at 0% 0%, rgba(230,184,106,0.07) 0%, rgba(230,184,106,0) 50%), var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 16px; position: relative; } /* 白天：去掉管家底色那层金色过渡（用户「没必要」）→ 纯净卡面 */ :root[data-theme="light"] .morning-brief { background: var(--card); } .morning-brief .mb-close { position: absolute; top: 12px; right: 14px; cursor: pointer; color: var(--sub); font-size: 16px; line-height: 1; } /* 付费刷新按钮 — 放在 close × 左侧（A · 暗金描边 + 内嵌金币药丸） */ .morning-brief .mb-refresh { position: absolute; top: 9px; right: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px 5px 11px; background: linear-gradient(180deg, var(--accent-tint), rgba(0,0,0,0)); border: 1px solid var(--accent-tint-strong); border-radius: 999px; color: var(--text); font-size: 11px; font-weight: 600; font-family: inherit; line-height: 1; cursor: pointer; transition: transform 160ms, box-shadow 200ms, border-color 200ms, opacity 200ms; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .morning-brief .mb-refresh:not(:disabled):hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 16px rgba(230,184,106,0.22); } .morning-brief .mb-refresh:disabled { opacity: 0.45; cursor: not-allowed; } .morning-brief .mb-refresh .mb-refresh-icon { width: 12px; height: 12px; flex-shrink: 0; transition: transform 600ms; } .morning-brief .mb-refresh:not(:disabled):hover .mb-refresh-icon { transform: rotate(180deg); } .morning-brief .mb-refresh .mb-refresh-cost { display: inline-flex; align-items: center; gap: 2px; padding: 3px 9px; margin-left: 2px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-2) 100%); color: #1A1410; font-weight: 800; font-size: 10.5px; box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 1px 4px rgba(0,0,0,0.30); letter-spacing: -0.1px; } .morning-brief .mb-refresh .mb-refresh-cost::after { content: ""; display: inline-block; width: 9px; height: 9px; background: currentColor; -webkit-mask: var(--coin-mask) no-repeat center / contain; mask: var(--coin-mask) no-repeat center / contain; filter: drop-shadow(0 0 1px rgba(0,0,0,0.3)); } .morning-brief .mb-refresh:disabled .mb-refresh-cost { background: var(--card2); color: var(--sub); box-shadow: none; } .morning-brief .mb-close { z-index: 5; } .morning-brief .mb-refresh { z-index: 5; } .morning-brief .mb-refresh.refreshing { pointer-events: none; opacity: 0.7; } .morning-brief .mb-refresh.refreshing .mb-refresh-icon { animation: mb-refresh-spin 0.8s linear infinite; transform-origin: center; transition: none; } @keyframes mb-refresh-spin { to { transform: rotate(360deg); } } /* 收租气候上线后：刷新/关闭按钮移到气候卡下方的标题行（.mb-head），不再 absolute 压住 hero */ .morning-brief .mb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .morning-brief .mb-head .mb-greeting { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .morning-brief .mb-actions { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } .morning-brief .mb-actions .mb-refresh { position: static; top: auto; right: auto; } .morning-brief .mb-actions .mb-close { position: static; top: auto; right: auto; } /* ── 「新鲜度 + 刷新」合并条（B 全宽 · 状态驱动 · /refresh-pick 2026-06-21）── 把"最后更新时间"从右下角弱显示（旧 .mb-stamp）提到标题正下方、紧贴刷新按钮： 新鲜=安静灰条；过时（≥3h 或跨天）=整条转金 + 刷新变实金大按钮，让用户一眼看出简报年龄。 */ .morning-brief .mb-fresh-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; padding: 9px 12px; border-radius: 12px; background: var(--fill); border: 1px solid var(--line); } .morning-brief .mb-fresh-bar.stale { background: linear-gradient(180deg, var(--accent-tint), rgba(0,0,0,0)); border-color: var(--accent-tint-strong); } .morning-brief .mb-fresh-txt { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .morning-brief .mb-fresh-bar.stale .mb-fresh-txt { color: var(--accent-light); } .morning-brief .mb-fresh-txt b { color: var(--text); font-weight: 700; } .morning-brief .mb-fresh-bar.stale .mb-fresh-txt b { color: var(--accent-light); } .morning-brief .mb-fresh-txt .mb-clk { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.85; } .morning-brief .mb-fresh-bar .mb-refresh { position: static; top: auto; right: auto; flex: 0 0 auto; } /* 过时 → 刷新变实金大按钮（最显眼 CTA） */ .morning-brief .mb-fresh-bar.stale .mb-refresh { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px -6px rgba(230,184,106,0.55); } .morning-brief .mb-fresh-bar.stale .mb-refresh .mb-refresh-cost { background: rgba(33,20,2,0.18); color: var(--gold-ink); box-shadow: none; } .morning-brief .mb-fresh-bar.stale .mb-refresh:not(:disabled):hover { border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 8px 22px -6px rgba(230,184,106,0.70); } @media (max-width: 600px) { /* 过时态手机：竖排 + 全宽实金按钮（最显眼）；新鲜态保持横排安静 */ .morning-brief .mb-fresh-bar.stale { flex-direction: column; align-items: stretch; gap: 9px; } .morning-brief .mb-fresh-bar.stale .mb-refresh { justify-content: center; } .morning-brief .mb-fresh-bar.stale .mb-refresh .mb-refresh-label { display: inline !important; } .morning-brief .mb-fresh-bar.stale .mb-fresh-txt { white-space: normal; } } /* ── 🎩 大佬动态卡（T1·进攻拼图）· 材质对齐管家既有卡（fresh-bar）· 无自创色条 ── */ .morning-brief .mb-trader-card { background: var(--fill); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 2px 0; display: flex; flex-direction: column; gap: 7px; } .morning-brief .mbtd-top { display: flex; align-items: center; gap: 7px; } .morning-brief .mbtd-emoji { font-size: 15px; line-height: 1; } .morning-brief .mbtd-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .01em; } .morning-brief .mbtd-handle { font-size: 12px; color: var(--text-dim); margin-left: 2px; } .morning-brief .mbtd-headline { font-size: 14px; line-height: 1.5; color: var(--text); } .morning-brief .mbtd-headline strong { font-weight: 700; } .morning-brief .mbtd-guide { font-size: 13px; line-height: 1.55; color: var(--text-dim); background: var(--well); border-radius: 9px; padding: 8px 10px; } .morning-brief .mbtd-guide strong { color: var(--text); font-weight: 700; } .morning-brief .mbtd-guide-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); margin-right: 6px; vertical-align: baseline; } .morning-brief .mbtd-more { align-self: flex-start; appearance: none; border: 1px solid var(--edge); background: var(--fill); color: var(--text); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; margin-top: 1px; } .morning-brief .mbtd-more:hover { background: var(--fill-2); } /* 攻守分段微标签（A·/gongshou 2026-06-21）— 守(绿)在上、攻(金)在下，靠渐隐细线分隔 */ .morning-brief .gs-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin: 4px 0 10px; } .morning-brief .gs-label .bar { width: 3px; height: 13px; border-radius: 2px; flex: none; } .morning-brief .gs-label.def { color: var(--green); } .morning-brief .gs-label.def .bar { background: var(--green); } .morning-brief .gs-label.atk { color: var(--accent); margin-top: 0; } .morning-brief .gs-label.atk .bar { background: var(--accent); } .morning-brief .gs-label .note { color: var(--sub); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; } .morning-brief .gs-rule { height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); margin: 4px 0 12px; } .morning-brief .mb-trader-section { display: flex; flex-direction: column; } /* ⚔️ 攻方入口脱钩：守方简报还没正文时渲染的「只含攻方段」最小外壳（congyang 2026-07-10 实锤 早上守方简报没生成好那段时间攻方按钮跟着消失）。攻段上方无守方内容 → 隐掉起始分隔线， 避免一条孤立的横线；守方正文到了后 renderMorningBrief 走完整路径正常接管。*/ .morning-brief .mb-attack-only .gs-rule { display: none; } /* ⚔️ 攻方管家 + 🎩 大佬动态（T4）— 概览行复用「守」段 mb-priority-* 卡（字号/交互一致）； 样板单为紧凑 tile，desktop 自适应 2-3 列省空间；攻段整体宽度 = 守段（grid 左栏，非铺满整行）*/ .morning-brief .opp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .morning-brief .opp-list + .opp-list { margin-top: 8px; } .morning-brief .opp-lead .mb-priority-desc.opp-lead-text { font-size: 13.5px; color: var(--text); line-height: 1.55; } .morning-brief .opp-guide { margin-top: 6px; } .morning-brief .opp-guide-tag { color: var(--accent); font-weight: 700; margin-right: 6px; } .morning-brief .mb-priority-chip.opp-star { background: rgba(var(--accent-rgb), 0.10); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.28); } /* 样板单 tile（自适应 grid：≥200px 一列 → 桌面 2-3 列 / 窄屏 1 列） */ .morning-brief .opp-orders { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .morning-brief .opp-order-tile { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .morning-brief .opp-tile-top { display: flex; align-items: center; gap: 7px; } .morning-brief .opp-tile-tkr { font-size: 13px; font-weight: 700; color: var(--accent-light); } .morning-brief .opp-tile-head { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; } .morning-brief .opp-tile-desc { font-size: 11.5px; color: var(--sub); line-height: 1.5; } /* 🎩 样板单「主要参考对象」标签（仅大佬动态卡有 source） */ .morning-brief .opp-tile-src { font-size: 10.5px; font-weight: 600; color: var(--accent-light, var(--accent)); opacity: .9; line-height: 1.4; margin-top: 1px; } /* 🎩 样板单「大佬纪律/时机一句话」备注（仅归因到大佬的那笔有 note） */ .morning-brief .opp-tile-note { font-size: 10.5px; color: var(--sub); line-height: 1.45; margin-top: 3px; padding-left: 7px; border-left: 2px solid var(--accent-light, var(--accent)); opacity: .92; } /* 🎩 大佬段数据窗口注释（扫描近 24h 公开推 · 与后端 _opp_kol_block hours=24 口径一致） */ .morning-brief .opp-trader-scope { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--sub); margin-top: 7px; opacity: .85; } .morning-brief .opp-trader-scope svg { flex: none; width: 12px; height: 12px; } .morning-brief .opp-tile-cta { align-self: flex-start; margin-top: 2px; } /* 「去找合约」= 副 CTA（比「看全文」=「查看持仓」更轻一档） */ .morning-brief .mb-priority-cta.opp-cta-ghost { color: var(--sub); border-color: var(--line-2); border-width: 1px; } .morning-brief .mb-priority-cta.opp-cta-ghost:hover { color: var(--accent); border-color: var(--accent-tint-strong); background: transparent; } /* 加载骨架 — 攻方「换一批」与守方「刷新」共用同一套呼吸/微光样式（congyang 2026-06-24：守方更新动画对齐攻方设计）。 攻方挂在 .opp-loading（#opp-card）上、守方挂在 .mb-loading（守方优先级列表）上 → 选择器并列复用，保证两边像素一致。 */ .morning-brief .opp-loading .oppc-skel, .morning-brief .mb-loading .oppc-skel { height: 11px; border-radius: 6px; background: var(--well); margin-top: 8px; animation: oppPulse 1.4s ease-in-out infinite; } .morning-brief .opp-loading .oppc-skel-2, .morning-brief .mb-loading .oppc-skel-2 { width: 62%; } @keyframes oppPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } } /* 「生成中」轮换短语：明暗 breathe 脉动（同问管家 .ask-bubble.think）+ 换句时 opacity 过渡 */ .morning-brief .opp-loading .opp-think, .morning-brief .mb-loading .opp-think { color: var(--sub); transition: opacity .2s ease; animation: oppThinkBreathe 1.9s ease-in-out infinite; } @keyframes oppThinkBreathe { 0%,100% { color: var(--sub); } 50% { color: var(--text); } } @media (prefers-reduced-motion: reduce) { .morning-brief .opp-loading .opp-think, .morning-brief .mb-loading .opp-think { animation: none; } } /* 旋转星芒思考态图标（Claude 同款 · /think-pick 拍板 A · 2026-06-24）：循环文字前的小动画。 攻方 _oppSkeleton / 守方 _mbThinkSkeletonHtml / 问管家 app.ask.js .ask-bubble.think 三处共用此类。 星芒是文字的 sibling（不进 .opp-think/.mb-think 文字节点）→ 短语轮换 textContent 不会刷掉它。 改星芒 path 要同步三处渲染处（grep think-spark）。 */ .think-row { display: flex; align-items: center; gap: 8px; } .think-spark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--accent); } .think-spark svg { width: 16px; height: 16px; transform-origin: center; animation: thinkSparkSpin 2.8s ease-in-out infinite; } @keyframes thinkSparkSpin { 0% { transform: rotate(0deg) scale(.78); } 50% { transform: rotate(180deg) scale(1); } 100% { transform: rotate(360deg) scale(.78); } } @media (prefers-reduced-motion: reduce) { .think-spark svg { animation: none; transform: scale(.92); } } /* ⚔️ 攻方管家手动生成 UI（2026-06-23 · /opp-pick 拍板 A 全宽实金 + R1 安静换一批）── */ /* 攻段 NEW 徽章 */ .morning-brief .gs-label .gs-new { font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 5px; background: var(--gold-grad); color: var(--gold-ink); margin-left: 1px; box-shadow: 0 1px 5px -1px rgba(230,184,106,0.55); text-transform: none; } /* 生成入口（未生成态）卡 */ .morning-brief .opp-empty { gap: 10px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); } .morning-brief .opp-empty-teaser { font-size: 12.5px; color: var(--text-dim, var(--sub)); line-height: 1.55; } .morning-brief .opp-empty-teaser strong { color: var(--text); font-weight: 700; } /* 账户未设置引导条 */ .morning-brief .opp-nudge { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); border-radius: 9px; font-size: 12px; color: var(--text); line-height: 1.45; cursor: pointer; transition: border-color 160ms; } .morning-brief .opp-nudge:hover { border-color: var(--accent); } .morning-brief .opp-nudge .opp-nudge-ic { width: 16px; height: 16px; flex: none; color: var(--accent); } .morning-brief .opp-nudge strong { color: var(--accent-light); font-weight: 700; } .morning-brief .opp-nudge .opp-nudge-arrow { margin-left: auto; color: var(--accent); font-weight: 700; white-space: nowrap; } /* 生成按钮 = 全宽实金主 CTA（变体 A） */ .morning-brief .opp-generate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; background: var(--gold-grad); color: var(--gold-ink); border: none; border-radius: 10px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px -6px rgba(230,184,106,0.55); transition: transform 160ms, box-shadow 200ms; } .morning-brief .opp-generate-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 8px 22px -6px rgba(230,184,106,0.70); } .morning-brief .opp-generate-btn .opp-gen-sub { font-weight: 600; opacity: .7; font-size: 11.5px; } .morning-brief .opp-generate-btn .opp-gen-ic { width: 15px; height: 15px; flex: none; } /* 已生成态底部「生成时间 + 换一批」行 */ .morning-brief .opp-fresh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 8px 12px; background: var(--fill); border: 1px solid var(--line); border-radius: 999px; } .morning-brief .opp-fresh-txt { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sub); min-width: 0; } .morning-brief .opp-fresh-txt .mb-clk { width: 13px; height: 13px; flex: none; opacity: .85; } /* 换一批 = 安静灰 ghost（刻意区别于守方金色刷新徽章） */ .morning-brief .opp-regen-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: transparent; color: var(--sub); border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: color 160ms, border-color 160ms; white-space: nowrap; flex: none; } .morning-brief .opp-regen-btn:hover { color: var(--accent); border-color: var(--accent-tint-strong); } .morning-brief .opp-regen-btn .opp-regen-ic { width: 12px; height: 12px; flex: none; } /* ── 攻守段头一行（candidate B · /refresh-scope）：标题 + 新鲜度 chip + 刷新/换一批 同行 ── */ .morning-brief .gs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 9px; } .morning-brief .gs-head .gs-label { margin: 0; flex: 1 1 auto; min-width: 0; } .morning-brief .gs-head .mb-refresh { position: static; top: auto; right: auto; flex: 0 0 auto; } .morning-brief .gs-head .opp-regen-btn { flex: 0 0 auto; } /* 新鲜度 chip（守方段头）*/ .morning-brief .gs-fresh-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: var(--fill); border: 1px solid var(--line); color: var(--sub); white-space: nowrap; flex: 0 0 auto; } .morning-brief .gs-fresh-chip.stale { background: var(--accent-tint); border-color: var(--accent-tint-strong); color: var(--accent-light); } .morning-brief .gs-fresh-chip .mb-clk { width: 11px; height: 11px; opacity: .85; flex: none; } /* 刷新过时 → 金按钮（段内 CTA，非整条 master bar；取代旧 .mb-fresh-bar.stale 整条转金）*/ .morning-brief .mb-refresh.is-stale { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px -6px rgba(230,184,106,0.55); } .morning-brief .mb-refresh.is-stale .mb-refresh-cost { background: rgba(33,20,2,0.18); color: var(--gold-ink); box-shadow: none; } /* section 总结话（守方 = 早安房东 / 攻方 = 余力大佬引子，与守方对位）*/ .morning-brief .gs-summary { font-size: 13.5px; color: var(--text); line-height: 1.62; margin: 0 0 12px; padding-left: 11px; } .morning-brief .gs-summary b { font-weight: 700; color: var(--text); } /* 攻段顶部总结字号对齐守方管家正文 .mb-text（15px/1.7）· 2026-06-24 */ .morning-brief .opp-summary { font-size: 15px; line-height: 1.7; } /* 卡面正文行夹行（看全文兜底全文）· 减轻阅读负担：余力 4 行 / 大佬 3 行，… 提示更多 */ .morning-brief .opp-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } .morning-brief .opp-clamp.c4 { -webkit-line-clamp: 4; } .morning-brief .opp-clamp.c3 { -webkit-line-clamp: 3; } /* 卡面正文没有 **粗体** 时（LLM 没标重点）→ 不用淡色（会糊成一片淡字），回退实色保可读 · 2026-06-24 */ .morning-brief .mb-priority-desc.opp-nobold { color: var(--text); } /* 大佬动态被关掉后的「恢复」入口（低调一行） */ .morning-brief .opp-restore { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sub); cursor: pointer; padding: 5px 2px; opacity: .72; transition: opacity 160ms, color 160ms; font-weight: 600; } .morning-brief .opp-restore:hover { opacity: 1; color: var(--accent); } .morning-brief .opp-restore svg { width: 13px; height: 13px; flex: none; } /* 余力 / 大佬 box（纯文字判断；样板单在两 box 之后共享一组）*/ .morning-brief .opp-box { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 13px; } .morning-brief .opp-box-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--accent-light); margin-bottom: 9px; } .morning-brief .opp-box-title .opp-box-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex: none; } .morning-brief .opp-box-body { font-size: 12.5px; color: var(--text); line-height: 1.55; } .morning-brief .opp-box-body.opp-box-quiet { color: var(--sub); } .morning-brief .opp-box .mb-priority-cta { margin-top: 9px; } .morning-brief .opp-box .opp-nudge { margin: 0; } /* 大佬 box 右上角「不想跟大佬」× */ .morning-brief .opp-box-x { margin-left: auto; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--sub); font-size: 15px; line-height: 1; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; } .morning-brief .opp-box-x:hover { color: var(--text); border-color: var(--line-2); background: var(--fill); } /* 「看全文」弹层 — tab-local（§12：z≥1460 / 自有 backdrop / PWA bottom-sheet 留 nav 高度）*/ .trader-full-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,10,11,0.55); z-index: 1465; align-items: center; justify-content: center; padding: 20px; overscroll-behavior: contain; } .trader-full-backdrop.show { display: flex; } body.is-tab-page .trader-full-backdrop.show { display: flex !important; z-index: 1465 !important; } .trader-full-modal { background: var(--card-solid, var(--card)); color: var(--text); border: 1px solid var(--edge); border-radius: 16px; /* 桌面加宽（congyang 2026-07-15）：攻方管家全文正文密（余力/样板单/大佬三节，含大量内联加粗数据）， 560px 单列太挤 → 720px。手机(≤600px) + PWA tab-page bottom-sheet 仍各自 max-width:none 走全宽，不受影响。 */ width: 100%; max-width: 720px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,0.4); } .trader-full-modal .tfm-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--edge); position: sticky; top: 0; background: var(--card-solid, var(--card)); } .trader-full-modal .tfm-title { font-size: 15px; font-weight: 700; flex: 1 1 auto; } .trader-full-modal .tfm-close { appearance: none; border: none; background: var(--fill); color: var(--text); width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: 14px; flex: 0 0 auto; } .trader-full-modal .tfm-close:hover { background: var(--fill-2); } .trader-full-modal .tfm-body { padding: 14px 18px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .trader-full-modal .mdh-h { font-weight: 700; color: var(--text); margin: 16px 0 5px; } .trader-full-modal .mdh-h1 { font-size: 18px; margin-top: 4px; } .trader-full-modal .mdh-h2 { font-size: 15px; } .trader-full-modal .mdh-h3 { font-size: 14px; } .trader-full-modal .mdh-p { font-size: 14px; line-height: 1.6; margin: 6px 0; color: var(--text); } .trader-full-modal .mdh-ul { margin: 4px 0; padding-left: 20px; } .trader-full-modal .mdh-ul li { font-size: 14px; line-height: 1.55; margin: 3px 0; } .trader-full-modal .mdh-hr { border: none; border-top: 1px solid var(--edge); margin: 16px 0; } .trader-full-modal strong { font-weight: 700; } /* PWA 已安装 + tab-page：bottom-sheet 贴底滑上，留出底部 nav-tabs 高度（§12 第三铁律）*/ body.nav-enabled.is-tab-page .trader-full-backdrop.show { align-items: flex-end; padding: 0; } body.nav-enabled.is-tab-page .trader-full-modal { max-width: none; width: 100%; border-radius: 16px 16px 0 0; max-height: calc(82vh - 72px - env(safe-area-inset-bottom, 0px)); margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* 手机浏览器（非 PWA）：也走 bottom-sheet 观感 */ @media (max-width: 600px) { .trader-full-backdrop.show { align-items: flex-end; padding: 0; } .trader-full-modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 86vh; } } /* 刷新中：守方更新动画已对齐攻方「换一批」= 就地呼吸骨架（守方优先级列表内渲染 .mb-loading， 复用上面 .opp-loading 的呼吸/微光样式 + _mbStartThinking 轮换短语）。旧的「暗遮罩 + 扫光线 + 静态提示」 已下线（congyang 2026-06-24）。这里只留刷新中卡片描边的轻微金色提示。 */ .morning-brief.mb-refreshing { border-color: rgba(230,184,106,0.25); transition: border-color 0.3s; } .morning-brief.collapsed { display: none; } /* ═══ 早安管家折叠（A·顶部抓手条 · /concierge-fold-pick 2026-06-20 拍板）═══ shell = 卡片视觉容器（border/bg/radius），morning-brief 在内透明化； rail 贴上边缘（抓手短杠 + label/摘要 + chevron），整条可点；fold 用 grid-rows 1fr↔0fr 顺滑收起。*/ .mb-shell { margin-bottom: 16px; background: var(--glass-grad), radial-gradient(140% 100% at 0% 0%, rgba(230,184,106,0.07) 0%, rgba(230,184,106,0) 50%), var(--glass); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--bevel), var(--shadow); overflow: hidden; } /* 白天：管家折叠壳去掉那层金色 radial（用户「渐变色底色没必要」）→ 纯净玻璃卡 */ :root[data-theme="light"] .mb-shell { background: var(--glass-grad), var(--glass); } /* 非 tab-page 下：模块卡视觉交给 shell，morning-brief 自身透明无边（tab-page 全屏仍保留自身底色）*/ body:not(.is-tab-page) .mb-shell .morning-brief { border: none !important; border-radius: 0 !important; background: transparent !important; margin-bottom: 0 !important; } .mb-rail { display: none; /* 仅成功渲染时 JS 置 display:flex */ align-items: center; gap: 12px; padding: 12px 16px 12px 18px; position: relative; cursor: pointer; user-select: none; border-bottom: 1px solid var(--line); transition: background var(--dur-quick) var(--ease-out); } .mb-rail:hover { background: var(--fill); } .mb-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } .mb-rail-grab { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 34px; height: 4px; border-radius: 999px; background: var(--line-2); transition: background var(--dur-quick), width var(--dur-quick); } .mb-rail:hover .mb-rail-grab { background: var(--accent-soft); width: 44px; } .mb-rail-ico { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } .mb-rail-label { font-size: 12.5px; font-weight: 600; color: var(--sub); display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; } .mb-rail-summary { display: none; font-size: 12.5px; color: var(--sub); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-rail-summary b { color: var(--accent-light); font-weight: 700; font-family: var(--font-num); } .mb-rail-chev { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sub); background: var(--fill); border: 1px solid var(--line); transition: color var(--dur-quick), border-color var(--dur-quick); } .mb-rail:hover .mb-rail-chev { color: var(--accent); border-color: var(--accent-tint-strong); } .mb-rail-chev svg { width: 15px; height: 15px; display: block; transition: transform var(--dur-normal) var(--ease-spring); } /* 展开态 chevron 朝上（提示「收起」）；折叠态朝下（提示「展开」）*/ .mb-shell:not(.is-collapsed) .mb-rail-chev svg { transform: rotate(180deg); } .mb-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-modal) var(--ease-pour); } .mb-shell.is-collapsed .mb-fold { grid-template-rows: 0fr; } .mb-fold-inner { overflow: hidden; min-height: 0; transition: opacity var(--dur-normal) var(--ease-out) 60ms; } .mb-shell.is-collapsed .mb-fold-inner { opacity: 0; transition: opacity 110ms var(--ease-in); } .mb-shell.is-collapsed .mb-rail { border-bottom-color: transparent; } .mb-shell.is-collapsed .mb-rail-label { display: none; } .mb-shell.is-collapsed .mb-rail-summary { display: block; } @media (prefers-reduced-motion: reduce) { .mb-fold, .mb-fold-inner, .mb-rail-chev svg { transition: none !important; } } /* ░ 管家小记 banner（收起态的脸 · /calm-pick B · 2026-06-20）───────────────────── mb-rail 复用为 banner：列布局，绿=平静日 / 琥珀=有事的一天（.mb-shell.evt）。 正文（head/sub/hero）收起+展开都显示 = 管家模块的"脸"；展开后 fold 在下方接完整简报。 */ .mb-rail.xj-face { display: block; align-items: initial; gap: 0; padding: 17px 19px 15px; border-bottom-color: transparent; } .mb-shell:not(.is-collapsed) .mb-rail.xj-face { border-bottom: 1px solid var(--line); } /* 平静日（默认绿）：shell 染绿调；有事的一天加 .evt → 琥珀 */ .mb-shell:has(.xj-face) { background: linear-gradient(135deg, rgba(63,221,156,0.10), rgba(63,221,156,0.02) 60%), var(--glass-grad), var(--glass); border-color: rgba(63,221,156,0.32); } .mb-shell.evt { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.03) 60%), var(--glass-grad), var(--glass); border-color: rgba(var(--accent-rgb),0.40); } /* 定局档 shell（VIGIL locked）：同 .evt 结构换红色系 */ .mb-shell.lkd { background: linear-gradient(135deg, rgba(var(--red-rgb),0.12), rgba(var(--red-rgb),0.03) 60%), var(--glass-grad), var(--glass); border-color: rgba(var(--red-rgb),0.38); } .xj-peek-card.lkd { background: linear-gradient(135deg, rgba(var(--red-rgb),0.12), rgba(var(--red-rgb),0.03) 60%), var(--glass-grad), var(--glass); border-color: rgba(var(--red-rgb),0.38); } /* 回退态（无 daily_verdict）：恢复中性 shell 底 + 旧细条摘要，藏 banner 正文 */ .mb-shell.xj-fallback { background: var(--glass-grad), radial-gradient(140% 100% at 0% 0%, rgba(230,184,106,0.07) 0%, rgba(230,184,106,0) 50%), var(--glass); border-color: var(--edge); } .mb-shell.xj-fallback .mb-rail.xj-face { display: flex; align-items: center; padding: 12px 16px 12px 18px; } .mb-shell.xj-fallback .xj-eyerow, .mb-shell.xj-fallback .xj-eye, .mb-shell.xj-fallback .xj-head, .mb-shell.xj-fallback .xj-sub, .mb-shell.xj-fallback .xj-hero, .mb-shell.xj-fallback .xj-clim { display: none !important; } .mb-shell.xj-fallback .xj-foot { margin: 0; padding: 0; border-top: none; flex: 1; } .mb-shell.xj-fallback .xj-foot::before { content: none; } /* 回退细条态：不画分隔线（D 把手的线只属于完整 banner）*/ .mb-shell.xj-fallback .mb-rail-summary { display: block; } .mb-shell:not(.xj-fallback) .mb-rail-summary { display: none !important; } /* 眉行：管家小记（左） + 收租天气 chip（右上角 · /foot-pick 2026-06-23）。chip 隐藏时 eye 自然靠左 */ .xj-face .xj-eyerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .xj-face .xj-eye { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 7px; min-width: 0; } .mb-shell.evt .xj-face .xj-eye { color: var(--accent); } .xj-face .xj-eye .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63,221,156,0.18); flex-shrink: 0; } .mb-shell.evt .xj-face .xj-eye .d { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); } .xj-face .xj-eye .lab { color: var(--sub); font-weight: 700; } .xj-face .xj-head { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 6px; color: var(--text); } .xj-face .xj-sub { font-size: 13px; color: var(--sub); line-height: 1.55; max-width: 560px; } .xj-face .xj-hero { display: flex; align-items: center; gap: 10px; margin: 11px 0 2px; padding: 11px 13px; border-radius: 10px; background: var(--card); border: 1px solid rgba(var(--accent-rgb),0.30); font-size: 13px; cursor: pointer; } .xj-face .xj-hero svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); } .xj-face .xj-hero .ht { font-weight: 700; color: var(--accent-light); } .xj-face .xj-hero .xj-hero-cta { margin-left: auto; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } /* 计划内接货预告行（calm 门脸 · 中性信息卡：--line 边框不用报警 accent 色，愿接=平静知会） */ .xj-face .xj-hero.xj-planned, .xj-peek-card .xj-hero.xj-planned { border-color: var(--line); cursor: default; flex-wrap: wrap; } .xj-face .xj-hero.xj-planned svg, .xj-peek-card .xj-hero.xj-planned svg { color: var(--sub); } .xj-face .xj-hero.xj-planned .ht, .xj-peek-card .xj-hero.xj-planned .ht { color: var(--text); flex-shrink: 0; } .xj-face .xj-hero.xj-planned .xd, .xj-peek-card .xj-hero.xj-planned .xd { color: var(--sub); min-width: 0; } /* 偏离知会按钮（VIGIL §5 路 C：知情不报警 → 中性小按钮） */ .xj-pl-btns { margin-left: auto; display: inline-flex; gap: 8px; flex-shrink: 0; } .xj-pl-btn { font-size: 11.5px; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.28); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-family: inherit; white-space: nowrap; } /* .xj-pl-btn.ghost（「知道了」中性变体）已随 ack 机制下线移除 · 2026-07-16 */ /* 定局档（VIGIL §3 locked · 红）：接货锁定/最后窗口 —— 结构同 .evt，红色系（默认 A 案，pick 后定稿） */ .mb-shell.lkd .xj-face .xj-eye { color: var(--red); } .mb-shell.lkd .xj-face .xj-eye .d { background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.18); } .mb-shell.lkd .xj-face .xj-hero, .xj-peek-card.lkd .xj-hero { border-color: rgba(var(--red-rgb),0.32); } .mb-shell.lkd .xj-face .xj-hero svg, .xj-peek-card.lkd .xj-hero svg { color: var(--red); } .mb-shell.lkd .xj-face .xj-hero .ht, .xj-peek-card.lkd .xj-hero .ht { color: var(--red); } .mb-shell.lkd .xj-face .xj-hero .xj-hero-cta, .xj-peek-card.lkd .xj-hero .xj-hero-cta { color: var(--red); } /* 计划内接货知情行在定局档保持中性（愿接免报警不免知情 · 2026-07-14）。放红档规则之后同 specificity 后者胜； 不能用 :not(.xj-planned) 改上面的规则——watch/locked 时 #xj-hero 容器自带 .xj-hero，:not 经容器 descendant 反而泄漏染红嵌套行 */ .mb-shell.lkd .xj-face .xj-hero.xj-planned, .xj-peek-card.lkd .xj-hero.xj-planned { border-color: var(--line); } .mb-shell.lkd .xj-face .xj-hero.xj-planned svg, .xj-peek-card.lkd .xj-hero.xj-planned svg { color: var(--sub); } .mb-shell.lkd .xj-face .xj-hero.xj-planned .ht, .xj-peek-card.lkd .xj-hero.xj-planned .ht { color: var(--text); } .xj-peek-card.lkd .xj-eye { color: var(--red); } .xj-peek-card.lkd .xj-eye .d { background: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb),0.18); } /* 多行 hero 清单：容器透明（去单卡外观），子行 .xj-hero 仍走上面的 card 样式 */ .xj-face .xj-hero.xj-list { display: block; background: none; border: none; padding: 0; cursor: default; } .xj-face .xj-hero.xj-list .xj-hero { margin: 11px 0 0; } .xj-face .xj-hero.xj-list .xj-hero:first-child { margin-top: 11px; } .xj-more { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .xj-more:hover { color: var(--accent-light); } /* 收租天气 chip（现居眉行右上角）：保留药丸样式，不换行、不被压缩 */ .xj-face .xj-clim { font-size: 11.5px; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; background: var(--fill); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; flex-shrink: 0; white-space: nowrap; } .xj-face .xj-clim b { color: var(--accent-light); font-family: var(--font-num); font-weight: 700; } /* foot · D 横跨分隔线的居中把手胶囊（/foot-pick 2026-06-23）：分隔线从背后穿过，胶囊压在正中 */ .xj-face .xj-foot { position: relative; display: flex; justify-content: center; margin-top: 18px; } .xj-face .xj-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); } .xj-face .xj-expand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 5px 15px 5px 6px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--sub); cursor: pointer; box-shadow: var(--shadow); transition: color var(--dur-quick), border-color var(--dur-quick); } .xj-face .xj-expand-chev { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--accent-rgb),0.16); color: var(--accent); flex-shrink: 0; } .xj-face .xj-expand svg { width: 14px; height: 14px; transition: transform var(--dur-normal) var(--ease-spring); } .mb-shell:not(.is-collapsed) .xj-face .xj-expand svg { transform: rotate(180deg); } /* 整条 banner 都可点 → hover 时把手点亮金色（呼应 grab 抓手 hover） */ .mb-rail.xj-face:hover .xj-expand { color: var(--accent); border-color: var(--accent-soft); } .mb-rail.xj-face:hover { background: rgba(255,255,255,0.025); } .phone .xj-face .xj-head { font-size: 19px; } /* ░ 管家小记·精简门脸 peek（PWA 持仓 tab · 默认隐藏，仅 nav-enabled 显示）*/ #mb-xiaoji-peek { display: none; } body.nav-enabled #mb-xiaoji-peek.has-content { display: block; margin-bottom: 14px; } .xj-peek-card { border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(63,221,156,0.10), rgba(63,221,156,0.02) 60%), var(--glass-grad), var(--glass); border: 1px solid rgba(63,221,156,0.32); box-shadow: var(--bevel), var(--shadow); padding: 16px 17px; } .xj-peek-card.evt { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.03) 60%), var(--glass-grad), var(--glass); border-color: rgba(var(--accent-rgb),0.40); } .xj-peek-card .xj-eye { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .xj-peek-card.evt .xj-eye { color: var(--accent); } .xj-peek-card .xj-eye .d { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(63,221,156,0.18); flex-shrink: 0; } .xj-peek-card.evt .xj-eye .d { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18); } .xj-peek-card .xj-eye .lab { color: var(--sub); font-weight: 700; } .xj-peek-card .xj-head { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 5px; color: var(--text); } .xj-peek-card .xj-sub { font-size: 12.5px; color: var(--sub); line-height: 1.5; } .xj-peek-card .xj-hero { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid rgba(var(--accent-rgb),0.30); font-size: 12.5px; cursor: pointer; } .xj-peek-card .xj-hero svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); } .xj-peek-card .xj-hero .ht { font-weight: 700; color: var(--accent-light); } /* CTA 样式只在 .xj-face 下定义过 → peek 卡里 .xj-hero-cta 退化成普通 span（可换行/不靠右） → 「看看怎么守」在窄屏断成两行（用户报）。补一份 peek 专属规则，与 face 同款不换行靠右。 */ .xj-peek-card .xj-hero .xj-hero-cta { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .xj-peek-card .xj-list { display: block; } .xj-peek-card .xj-list .xj-hero { margin: 10px 0 0; } .xj-peek-foot { display: flex; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); } .xj-peek-foot .xj-perm { font-size: 11.5px; color: var(--dim); display: flex; align-items: center; gap: 6px; } .xj-peek-foot .xj-perm svg { width: 13px; height: 13px; flex-shrink: 0; } .xj-peek-foot .xj-peek-link { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; } .xj-peek-foot .xj-peek-link svg { width: 13px; height: 13px; } /* PWA（nav-enabled）/ tab-page 全屏：管家=整页 tab，不显示 inline 折叠条；shell 去视觉、不裁剪 fixed 全屏 */ body.nav-enabled .mb-rail, body.is-tab-page .mb-rail { display: none !important; } body.nav-enabled .mb-shell, body.is-tab-page .mb-shell { margin-bottom: 0; background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; } body.nav-enabled .mb-fold, body.is-tab-page .mb-fold { display: block !important; } body.is-tab-page .mb-fold-inner { overflow: visible; } /* 折叠态 (.is-collapsed → fold-inner opacity:0) 是桌面 inline 布局的概念；tab-page 全屏下 #morning-brief 是 fixed 整页, 继承祖先 opacity:0 会整页隐形 —— 用户在桌面收起过管家 (mb_collapsed=1) 后点「简报」tab, 简报盖满全屏却看不见, 视觉上像"还停在持仓页" (2026-07-01 congyang 实锤·手机没 rail 收不了折叠所以只有桌面复现)。nav/tab-page 下无条件恢复可见。 */ body.nav-enabled .mb-fold-inner, body.is-tab-page .mb-fold-inner { opacity: 1 !important; } /* 关闭后的"重新展开"小药丸 */ .mb-reopen { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 6px 12px 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font-size: 12px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .mb-reopen:hover { color: var(--accent); border-color: var(--accent); background: rgba(230,184,106,0.06); } .mb-reopen .mb-reopen-icon { font-size: 13px; line-height: 1; } .mb-reopen .mb-reopen-label { line-height: 1; } /* 包租公管家 hero — 重点信息，hero 级 spotlight */ .morning-brief .mb-concierge { display: flex; gap: 16px; align-items: flex-start; padding: 4px 4px 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); position: relative; } .morning-brief .mb-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--accent-light), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 0 4px rgba(230,184,106,0.10), 0 0 24px rgba(230,184,106,0.35), inset 0 1px 0 rgba(255,255,255,0.3); } .morning-brief .mb-bubble { flex: 1; min-width: 0; } .morning-brief .mb-greeting { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase; opacity: 0.85; } .morning-brief .mb-text { font-size: 15px; line-height: 1.7; color: var(--text); font-weight: 450; } .morning-brief .mb-text .vix-up { color: var(--accent); font-weight: 600; } .morning-brief .mb-text strong { color: var(--accent-light); } /* 游客登录遮罩（复刻 rec-lock）：模糊骨架 + 居中 Google 登录卡 */ /* grid-column: 1/-1 — ≥900px 时 .morning-brief 基样式是 2 栏 grid(1fr 240px)，不跨栏会被塞进左栏=视觉偏左 */ .mb-lock { position: relative; min-height: 132px; grid-column: 1 / -1; width: 100%; box-sizing: border-box; } .mb-lock-blur { filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; padding: 2px 0; } .mb-lock-greeting { font-size: 13px; font-weight: 700; color: var(--accent-light); margin-bottom: 14px; } .mb-lock-greeting .mb-time { color: var(--text-dim); font-weight: 500; } .mb-lock-skel { height: 12px; border-radius: 6px; background: var(--card2); margin: 11px 0; } .mb-lock-skel-1 { width: 92%; } .mb-lock-skel-2 { width: 78%; } .mb-lock-skel-3 { width: 85%; } .mb-lock-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 10px; } .mb-lock-card { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; max-width: min(340px, 94%); box-shadow: 0 8px 28px rgba(0,0,0,0.32); } .mb-lock-icon { font-size: 22px; line-height: 1; margin-bottom: 7px; } .mb-lock-title { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 5px; } .mb-lock-sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 13px; } .mb-lock-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #1a1407; border: none; border-radius: 9px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter var(--dur-quick, .12s) var(--ease-out, ease); } .mb-lock-btn svg { background: #fff; border-radius: 3px; padding: 1px; } .mb-lock-btn:hover { filter: brightness(1.07); } /* 今日 N 件事 */ .mb-focus-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .mb-focus-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--card2); border-radius: 10px; border: 1px solid var(--line); } .mb-focus-icon { font-size: 18px; flex-shrink: 0; } .mb-focus-text { flex: 1; font-size: 13px; line-height: 1.45; min-width: 0; } .mb-focus-text strong { color: var(--accent-light); } .mb-focus-text .mb-detail { color: var(--sub); font-size: 11px; margin-top: 2px; } .mb-focus-action { background: var(--accent); color: #000; border: none; padding: 6px 11px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s; } .mb-focus-action:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(230,184,106,0.25); } a.mb-focus-action { text-decoration: none; display: inline-flex; align-items: center; line-height: 1; } .mb-focus-link { text-decoration: none; color: inherit; cursor: pointer; display: block; } .mb-focus-link:hover strong { color: var(--accent); } .mb-focus-item.is-news { cursor: default; } .mb-focus-item.is-news:hover { border-color: var(--line-2); } /* chips */ .mb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); /* 🐛 2026-08-11 congyang 报「未来 7 天到期 1 个」这个 pill 尺寸不对： flex 默认 align-items:stretch，同一 flex 行里只要有个更高的邻居（事件 chip 带 ⚠️ 图标 + 更长文案），矮 pill 就被拉到跟它一样高 → 跟上一行的 pill 明显不齐。 center = 各自保持自然高度、垂直居中。 */ align-items: center; } /* 矿一#3 持仓趋势摘要行（早安简报 context 区） */ .mb-trend-digest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 2px; font-size: 12px; } .mb-trend-digest .mb-td-label { color: var(--sub); font-weight: 600; margin-right: 2px; } .mb-trend-digest.all-ok { color: var(--green); font-weight: 500; } .mb-trend-digest.all-ok .ico { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; } .mb-td-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; } .mb-td-chip .ico { width: 12px; height: 12px; flex: none; } .mb-td-chip.knife { color: var(--red); background: rgba(255,126,120,0.12); border: 1px solid rgba(255,126,120,0.34); } .mb-td-chip.hot { color: var(--orange); background: var(--accent-tint); border: 1px solid var(--accent-soft); } .mb-td-chip.ok { color: var(--green); background: rgba(63,221,156,0.10); border: 1px solid rgba(63,221,156,0.30); } .mb-chip { /* inline-flex 不是多余的：作为 flex item 它本会被 blockify，但一旦被搬到 非 flex 容器里，纯 inline 的 span 会让上下 padding 不参与行高、pill 塌掉。 */ display: inline-flex; align-items: center; font-size: 11px; padding: 4px 9px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; color: var(--sub); white-space: nowrap; } .mb-chip strong { color: var(--text); font-weight: 600; margin-left: 4px; } .mb-chip.up strong { color: var(--green); } .mb-chip.down strong { color: var(--red); } .mb-chip.warn { border-color: var(--accent-tint-strong); } .mb-chip.warn strong { color: var(--accent); } /* 14 天日历 */ .mb-calendar { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); position: relative; } .mb-cal-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: var(--sub); margin-bottom: 8px; } .mb-cal-legend { font-size: 10px; font-weight: 500; } .mb-cal-legend > span { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; } .mb-cal-legend .swatch { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .mb-cal-track { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; } .mb-cal-day { height: 22px; background: var(--card2); border-radius: 3px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--sub); } .mb-cal-day.today { background: var(--accent-tint-strong); color: var(--accent); font-weight: 700; } .mb-cal-day.weekend { opacity: 0.45; background: transparent; border: 1px dashed var(--line); } .mb-cal-day.weekend.today { opacity: 1; background: var(--accent-tint-strong); border: none; } /* 单 marker 时绝对定位；多 marker（macro + earn/exp）时用 wrap flex 横排 */ .mb-cal-day .marker { position: absolute; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; } .mb-cal-day .marker.earn { background: var(--red); } .mb-cal-day .marker.exp { background: var(--accent); } .mb-cal-day .marker.macro { background: #6BB6FF; } /* Tier 3+: 宏观事件蓝点 */ .mb-cal-day .marker.event { background: #C9A0FF; } /* 用户标记的前瞻催化剂（紫点） */ .mb-cal-day .marker.both { background: linear-gradient(90deg, var(--red) 50%, var(--accent) 50%); } /* 节假日（市场休市日）: 视觉同 weekend（虚线 + 半透明），右上角加 H 标记 */ .mb-cal-day.holiday { opacity: 0.55; background: transparent; border: 1px dashed var(--line); } .mb-cal-day.holiday::before { content: "H"; position: absolute; top: 1px; right: 3px; font-size: 7px; font-weight: 700; color: var(--sub); line-height: 1; letter-spacing: 0; } .mb-cal-day.holiday.today { opacity: 1; background: var(--accent-tint-strong); border: none; } .mb-cal-day.holiday.today::before { color: var(--accent); } /* legend 的 H 小方块：虚线框 + 居中 H */ .mb-cal-legend .swatch.swatch-holiday { width: 9px; height: 9px; border-radius: 2px; background: transparent; border: 1px dashed var(--line); position: relative; } .mb-cal-legend .swatch.swatch-holiday::after { content: "H"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 700; color: var(--sub); line-height: 1; } .mb-cal-day .marker-wrap { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; } .mb-cal-day .marker-wrap .marker { position: static; width: 5px; height: 5px; } /* 日历事件 hover/tap 弹窗：点(或桌面悬停)有圆点的日子 → 看当天具体事件（用户 2026-06-08） */ .mb-cal-day.has-event { cursor: pointer; } .mb-cal-day.sel { outline: 1.5px solid var(--accent); outline-offset: 1px; z-index: 4; } .mb-cal-pop { position: absolute; z-index: 30; min-width: 118px; max-width: 220px; background: var(--card3, #16171b); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); font-size: 11px; line-height: 1.5; pointer-events: none; /* 纯信息浮层 — 不挡点击、悬停从格子移开即关 */ } .mb-cal-pop .pop-date { font-weight: 700; color: var(--text); margin-bottom: 5px; } .mb-cal-pop .pop-row { display: flex; align-items: center; gap: 6px; color: var(--sub); } .mb-cal-pop .pop-row .pd { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .mb-cal-pop .pop-row.macro .pd { background: #6BB6FF; } .mb-cal-pop .pop-row.expiry .pd { background: var(--accent); } .mb-cal-pop .pop-row.earnings .pd { background: var(--red); } .mb-cal-pop .pop-row.user_event .pd { background: #C9A0FF; } /* 用户标记的前瞻催化剂（与 cell 紫点一致）*/ .mb-cal-pop .pop-row b { color: var(--text); font-weight: 600; } /* Tier 3+: hero card 下方利率指标条 — 横向跟 .summary / .tickers 对齐到 .wrap 边缘 */ .rates-strip { margin: 0 0 14px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--sub); background: var(--card2); border-radius: 8px; border: 1px solid var(--line); } .rates-strip .rs-cell { display: inline-flex; gap: 6px; align-items: center; position: relative; cursor: help; /* hover/focus 状态强调，提示可交互 */ border-bottom: 1px dotted transparent; transition: border-color 0.15s, color 0.15s; } .rates-strip .rs-cell:hover, .rates-strip .rs-cell.show-tip { border-bottom-color: var(--sub); } .rates-strip .rs-lab { color: var(--sub); font-weight: 600; letter-spacing: 0.02em; } .rates-strip .rs-val { color: var(--text); font-weight: 700; } .rates-strip .rs-chg { font-size: 10px; padding: 1px 5px; border-radius: 3px; } .rates-strip .rs-chg.up { color: var(--red); background: rgba(231, 76, 60, 0.12); } .rates-strip .rs-chg.down { color: var(--green); background: rgba(46, 204, 113, 0.12); } .rates-strip .rs-chg.flat { color: var(--sub); } .rates-strip .rs-divider { color: var(--line); } /* Tier 3+: 每个 rs-cell hover/tap 显示大白话 tooltip (复用 v2-sigrow 模式) */ .rates-strip .rs-cell[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 100; min-width: 220px; max-width: 320px; background: var(--card3); color: var(--text); font-size: 11px; font-weight: 400; line-height: 1.55; padding: 9px 12px; border-radius: 6px; white-space: normal; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,0.45); border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; } .rates-strip .rs-cell[data-tip].show-tip::after { opacity: 1; transform: translateX(-50%) translateY(0); } @media (hover: hover) and (pointer: fine) { .rates-strip .rs-cell[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } } @media (max-width: 720px) { .rates-strip { padding: 6px 8px; gap: 8px 12px; font-size: 10px; } .rates-strip .rs-cell[data-tip]::after { min-width: 180px; max-width: 280px; font-size: 10.5px; } } /* ── 包租公管家 · 优先级清单（mode-priority） ── 当后端返回 concierge_brief 结构化数据时启用，替换 prose hero + focus list。 */ .morning-brief.mode-priority { padding: 16px 20px; display: block; } .mode-priority .mb-greeting { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; margin-bottom: 12px; text-transform: uppercase; } .mode-priority .mb-greeting .mb-time { color: var(--sub); font-weight: 500; text-transform: none; letter-spacing: 0; } /* 简报内容生成时刻戳 — 右下角弱显示 (vs greeting 的「现在时间」)。 mobile/PWA: in-flow 行尾, 不用 absolute 防被 nav-tabs 截住 (CLAUDE.md §5#12)。 */ .morning-brief .mb-stamp { margin-top: 8px; color: var(--sub); opacity: 0.7; font-size: 11px; text-align: right; line-height: 1.3; user-select: none; } .mb-session { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: none; vertical-align: 1px; } .mb-session-rth { background: rgba(52,211,153,0.16); color: var(--green); } .mb-session-pre { background: rgba(107,182,255,0.18); color: #6BB6FF; } .mb-session-post { background: rgba(167,139,250,0.16); color: #A78BFA; } .mb-session-weekend { background: var(--border); color: var(--sub); } /* ⭐ 白天档：pre/post 那两个色是**写死的夜间浅色**（#6BB6FF / #A78BFA），压在同样浅的 tint 上 白天只有 2.18:1（app_shots 探针在早安管家实测报的就是这条）。 翻译而不是新造：沿用同一族色相（蓝＝--roll 那支 · 紫＝夜间 --au-2 的 124,108,255 那支）， 只把明度按白天该有的方向压下去 → 5.7-5.8:1。绿的 tint 顺带提亮到 0.08 才够 4.5。 */ :root[data-theme="light"] .mb-session-rth { background: rgba(11,127,85,0.08); color: var(--green); } :root[data-theme="light"] .mb-session-pre { background: rgba(37,99,235,0.12); color: #1E52C4; } :root[data-theme="light"] .mb-session-post { background: rgba(124,108,255,0.13); color: #5B46C8; } .mb-priority-headline { font-size: 15px; line-height: 1.65; color: var(--text); margin-bottom: 4px; font-weight: 500; } .mb-priority-headline em { font-style: normal; color: var(--accent-light); font-weight: 700; } .mb-priority-headline strong { color: var(--accent-light); font-weight: 700; } .mb-priority-sub { font-size: 12px; color: var(--sub); margin-bottom: 14px; } .mb-priority-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mb-priority-item { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); position: relative; transition: box-shadow 180ms ease, transform 180ms ease; } /* urgent/root/cashflow 用 box-shadow ring 接管边框 */ .mb-priority-item.urgent, .mb-priority-item.root, .mb-priority-item.cashflow { border-color: transparent; } .mb-priority-item.urgent { box-shadow: 0 0 0 1px rgba(var(--red-rgb), 0.45), 0 6px 22px rgba(var(--red-rgb), 0.18); } .mb-priority-item.root { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.42), 0 6px 18px rgba(var(--accent-rgb), 0.12); } .mb-priority-item.cashflow { box-shadow: 0 0 0 1px rgba(76,175,130, 0.40), 0 6px 18px rgba(76,175,130, 0.10); } .mb-priority-tag { display: flex; flex-direction: column; align-items: center; gap: 4px; } .mb-priority-chip { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; } .mb-priority-chip.urgent { background: rgba(var(--red-rgb), 0.10); color: var(--red); border: 1px solid rgba(var(--red-rgb), 0.26); } .mb-priority-chip.cashflow { background: rgba(76,175,130, 0.10); color: var(--green); border: 1px solid rgba(76,175,130, 0.24); } .mb-priority-chip.root { background: rgba(var(--accent-rgb), 0.10); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.28); } .mb-priority-chip.watch { background: var(--card3); color: var(--sub); border: 1px solid var(--line-2); } .mb-priority-rank { font-size: 10px; color: var(--sub); font-weight: 600; opacity: 0.7; } .mb-priority-body { min-width: 0; } .mb-priority-head { font-size: 13px; font-weight: 600; margin-bottom: 3px; color: var(--text); line-height: 1.4; } .mb-priority-ticker { color: var(--accent-light); } .mb-priority-desc { font-size: 12px; line-height: 1.5; color: var(--sub); } .mb-priority-desc strong { color: var(--text); font-weight: 600; } .mb-priority-cta { flex-shrink: 0; font-size: 12px; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-weight: 600; white-space: nowrap; background: transparent; color: var(--accent); border: 1.5px solid var(--accent-tint-strong); transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1); font-family: inherit; } .mb-priority-cta:hover { border-color: var(--accent); background: var(--accent-tint); } .mb-priority-item.urgent .mb-priority-cta { background: var(--red-cta); color: white; border-color: var(--red-cta); box-shadow: 0 2px 6px rgba(var(--red-rgb), 0.22); } .mb-priority-item.urgent .mb-priority-cta:hover { transform: translateY(-1px); background: var(--red-cta); color: white; border-color: var(--red-cta); box-shadow: 0 4px 10px rgba(var(--red-rgb), 0.30); } .mb-priority-footer { margin: 10px 0 0; padding: 10px 12px; background: var(--card2); border-radius: 6px; font-size: 11.5px; color: var(--sub); line-height: 1.5; } /* ── 管家新闻条上下滚动（替换 footer 区域 · B 设计 · 终端 ticker）── */ .mb-news-ticker { margin-top: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .mb-news-ticker-head { padding: 8px 14px; background: rgba(230,184,106,0.06); border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .mb-news-ticker-head .live { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--sub); font-weight: 600; text-transform: uppercase; } .mb-news-ticker-head .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: mb-news-pulse 1.6s ease-in-out infinite; } @keyframes mb-news-pulse { 50% { opacity: 0.25; } } .mb-news-ticker-stage { height: 160px; /* 5 行 × 32px 同时可见（hero 下方有纵向空间） */ overflow: hidden; position: relative; } .mb-news-ticker-track { display: flex; flex-direction: column; transition: transform 500ms cubic-bezier(0.5, 0, 0.2, 1); } .mb-news-row { height: 32px; padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1; color: var(--sub); border-bottom: 1px dashed rgba(255,255,255,0.04); transition: color 300ms, background 300ms; text-decoration: none; } .mb-news-row.now { color: var(--text); background: rgba(230,184,106,0.04); } a.mb-news-row { cursor: pointer; } a.mb-news-row:hover { background: var(--accent-tint); color: var(--text); } .mb-news-row .ic { width: 16px; text-align: center; opacity: 0.7; flex-shrink: 0; font-size: 13px; } .mb-news-row .tag { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--card3); color: var(--dim); text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; transition: background 300ms, color 300ms; } .mb-news-row.now .tag.market { background: rgba(52,211,153,0.15); color: var(--green); } .mb-news-row.now .tag.cashflow { background: rgba(52,211,153,0.15); color: var(--green); } .mb-news-row.now .tag.calendar { background: var(--accent-tint-strong); color: var(--accent); } .mb-news-row.now .tag.news { background: rgba(248,113,113,0.12); color: var(--red); } /* Tier 3+: 利率 = 蓝调；倒计时 = 紫调，区别于既有 4 类 */ .mb-news-row.now .tag.rates { background: rgba(107,182,255,0.15); color: #6BB6FF; } .mb-news-row.now .tag.macro_countdown { background: rgba(167,139,250,0.15); color: #A78BFA; } .mb-news-row .body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mb-news-row .body strong { color: var(--accent-light); font-weight: 700; } :root[data-theme="light"] .mb-news-row .body strong { color: var(--accent-2); } @media (max-width: 600px) { .mb-news-row { font-size: 11.5px; padding: 0 12px; gap: 8px; } .mb-news-row .tag { font-size: 8.5px; padding: 2px 5px; } .mb-news-row .ic { font-size: 12px; } } /* mode-priority 下保留 chips 和 calendar，简洁堆叠 */ .mode-priority .mb-chips { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .mode-priority .mb-calendar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* mode-priority · 桌面宽屏 · Dashboard layout 左栏 (1fr) = P1-P5 决策清单 右栏 400px (固定) = 日历 + 实时动态 + chips (mb-right-stack) 固定 400px 而非 clamp — 让日历在任何 viewport 都能明确撑大； 与 app 下方 .layout 的 side 栏 clamp(320,28%,400) 在宽屏 (≥1480) 上自然对齐到 400 */ /* ── 收租气候 sky hero（早报顶部）· UI 2.0 视觉：日出/云天空面板 · 2026-06-07 ── 夜间=深空调（下方默认值）；白天=日间天空（见本段末 :root[data-theme="light"] 覆盖块 · 2026-06-20）。 */ .mb-climate { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 14px; background: radial-gradient(120% 140% at 78% 8%, #221d2b 0%, #14121a 42%, #0d0c11 100%); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -18px rgba(0,0,0,.8); } .mb-climate .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .mb-clim-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .mb-clim-sun { position: absolute; right: 12%; top: -34px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,234,184,.92) 0%, rgba(245,196,101,.5) 30%, rgba(230,184,106,0) 68%); filter: blur(3px); } .mb-clim-suncore { position: absolute; right: calc(12% + 68px); top: 36px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fff4dd, #f3c876 60%, #e0a847); box-shadow: 0 0 48px 8px rgba(245,196,101,.32); } .mb-clim-cloud { position: absolute; border-radius: 80px; filter: blur(11px); background: linear-gradient(180deg,#34333f,#1f1e27); will-change: transform; } .mb-clim-cloud.c1 { right: 5%; top: 58px; width: 230px; height: 60px; opacity: .96; animation: mbCloudA 26s ease-in-out infinite; } .mb-clim-cloud.c2 { right: 19%; top: 98px; width: 188px; height: 50px; opacity: .9; animation: mbCloudB 32s ease-in-out infinite; } .mb-clim-cloud.c3 { right: 2%; top: 112px; width: 144px; height: 42px; opacity: .8; animation: mbCloudA 38s ease-in-out infinite reverse; } @keyframes mbCloudA { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-14px); } } @keyframes mbCloudB { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } } @media (prefers-reduced-motion: reduce) { .mb-clim-cloud { animation: none !important; } } /* verdict 驱动的天空状态 */ .mb-climate.sky-sunny .mb-clim-cloud { opacity: 0; } .mb-climate.sky-sunny .mb-clim-sun { right: 15%; } .mb-climate.sky-cloudy .mb-clim-suncore { opacity: .85; } .mb-climate.sky-showers .mb-clim-suncore { opacity: .4; } .mb-climate.sky-showers .mb-clim-cloud { opacity: 1; } .mb-climate.sky-storm .mb-clim-suncore { display: none; } .mb-climate.sky-storm .mb-clim-sun { background: radial-gradient(circle at 50% 50%, rgba(150,152,170,.28) 0%, rgba(90,92,110,0) 66%); } .mb-climate.sky-storm .mb-clim-cloud { background: linear-gradient(180deg,#2b2a35,#15151e); opacity: 1; } .mb-clim-in { position: relative; padding: 22px 24px 20px; } .mb-clim-kick { font-size: 11px; letter-spacing: .08em; color: #9A9AA0; text-transform: uppercase; display: flex; align-items: center; gap: 7px; font-weight: 600; } .mb-clim-kick .ico { width: 15px; height: 15px; color: #E6B86A; flex-shrink: 0; } .mb-clim-row { display: flex; align-items: flex-end; gap: 22px; margin-top: 14px; } .mb-clim-score { flex-shrink: 0; } .mb-clim-big { font-size: 62px; font-weight: 800; line-height: .86; background: linear-gradient(160deg,#fff4dd,#e6b86a 72%); -webkit-background-clip: text; background-clip: text; color: transparent; } .mb-clim-lab { font-size: 10.5px; color: #9A9AA0; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; } .mb-clim-gauge { flex: 1; min-width: 0; } .mb-clim-verdict { font-size: 19px; font-weight: 700; margin-bottom: 6px; color: #F3F1EC; } .mb-clim-driver { font-size: 13px; color: #B6B6BC; line-height: 1.55; max-width: 460px; } /* ── 4 支柱（波动/趋势/利率/事件）+ 进攻/防守 + 推导分析（气候引擎升级 · 2026-06-07）── */ .mb-clim-stance { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; margin-left: 8px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; border: 1px solid currentColor; vertical-align: middle; } .mb-clim-stance.s-offense { color: #46D08A; } .mb-clim-stance.s-defense { color: #FF6B6B; } .mb-clim-stance.s-neutral { color: #F0C778; } .mb-clim-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 22px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); } .mb-clim-pil { min-width: 0; } .mb-clim-plab { font-size: 10.5px; color: #8A8A90; letter-spacing: .03em; display: flex; align-items: center; gap: 5px; } .mb-clim-pdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .mb-clim-pdot.d-good { background: #46D08A; } .mb-clim-pdot.d-watch { background: #E6B86A; } .mb-clim-pdot.d-stress { background: #FF6B6B; } .mb-clim-pdot.d-neutral { background: #8A8A90; } .mb-clim-pval { font-size: 14px; font-weight: 600; margin-top: 4px; color: #F3F1EC; line-height: 1.25; overflow-wrap: break-word; } .mb-clim-pval .num { color: #F3F1EC; } .mb-clim-pval small { white-space: nowrap; } .mb-clim-psub { font-size: 10.5px; color: #8A8A90; margin-top: 2px; line-height: 1.4; overflow-wrap: break-word; } .mb-clim-psub.mb-clim-pact { color: #E6B86A; } /* 支柱可点 → 就地展开「为什么是这个灯」（2026-07-10） */ .mb-clim-pil.tappable { cursor: pointer; border-radius: 9px; margin: -5px -7px; padding: 5px 7px; transition: background var(--dur-2, .18s) var(--ease-out, ease); -webkit-tap-highlight-color: transparent; } .mb-clim-pil.tappable:hover { background: rgba(255,255,255,.05); } .mb-clim-pil.tappable.act { background: rgba(255,255,255,.07); } .mb-clim-pq { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: #8A8A90; flex-shrink: 0; } .mb-clim-pq svg { width: 100%; height: 100%; display: block; } .mb-clim-pil.tappable.act .mb-clim-pq { border-color: #F0C778; color: #F0C778; } .mb-clim-explain { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); } .mb-clim-explain.show { display: block; animation: climExIn var(--dur-2, .18s) var(--ease-out, ease); } @keyframes climExIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .mb-clim-exhead { font-size: 12.5px; font-weight: 700; color: #F3F1EC; display: flex; align-items: center; gap: 4px; } .mb-clim-exhead .mb-clim-pdot { margin-left: 2px; } .mb-clim-exwhat, .mb-clim-exwhy { font-size: 12px; color: #B6B6BC; line-height: 1.55; margin-top: 7px; } .mb-clim-exwhat b, .mb-clim-exwhy b { color: #F3F1EC; font-weight: 600; } .mb-clim-extag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #F0C778; margin-right: 6px; } .mb-clim-analysis { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 6px; } .mb-clim-ins { font-size: 12.5px; color: #B6B6BC; line-height: 1.5; padding-left: 15px; position: relative; } .mb-clim-ins::before { content: ''; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: #6a6a72; } .mb-clim-ins.is-take { font-weight: 600; color: #F3F1EC; } .mb-clim-ins.is-take::before { background: #F0C778; } /* ── 早期预警行（领先指标层：信用利差 + VIX 期限结构）+ 防守桥按钮（2026-07）── */ .mb-clim-ew { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 13px; font-size: 12px; line-height: 1.45; flex-wrap: wrap; } .mb-clim-ew-lab { font-size: 10.5px; color: #8A8A90; letter-spacing: .03em; flex-shrink: 0; } .mb-clim-ew-txt { color: #B6B6BC; overflow-wrap: break-word; min-width: 0; } .mb-clim-ew.ew-watch .mb-clim-ew-txt { color: #E6B86A; } .mb-clim-ew.ew-stress .mb-clim-ew-txt { color: #FF6B6B; font-weight: 600; } /* 早期预警行可点开「为什么是这个灯」（对齐支柱 tappable）*/ /* tappable 高亮框上下 padding 对称 → 内容视觉居中（原 padding-top 13 来自 base 分隔间距，会把内容压低）*/ .mb-clim-ew.tappable { cursor: pointer; border-radius: 9px; margin: 16px -7px 0; padding: 8px 7px; transition: background var(--dur-2, .18s) var(--ease-out, ease); -webkit-tap-highlight-color: transparent; } .mb-clim-ew.tappable:hover { background: rgba(255,255,255,.05); } .mb-clim-ew.tappable.act { background: rgba(255,255,255,.07); } .mb-clim-ew .mb-clim-pq { margin-left: auto; } .mb-clim-ew.tappable.act .mb-clim-pq { border-color: #F0C778; color: #F0C778; } :root[data-theme="light"] .mb-clim-ew.tappable:hover { background: rgba(0,0,0,.04); } :root[data-theme="light"] .mb-clim-ew.tappable.act { background: rgba(0,0,0,.05); } :root[data-theme="light"] .mb-clim-ew.tappable.act .mb-clim-pq { border-color: var(--accent); color: var(--accent); } .mb-clim-defbtn { display: block; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(240,199,120,.4); background: rgba(240,199,120,.1); color: #F0C778; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; transition: background .15s, border-color .15s; } .mb-clim-defbtn:hover { background: rgba(240,199,120,.18); border-color: rgba(240,199,120,.6); } .mb-clim-defbtn:focus-visible { outline: 2px solid #F0C778; outline-offset: 2px; } :root[data-theme="light"] .mb-clim-ew-lab { color: var(--dim); } :root[data-theme="light"] .mb-clim-ew-txt { color: var(--sub); } :root[data-theme="light"] .mb-clim-ew.ew-watch .mb-clim-ew-txt { color: #B8842A; } :root[data-theme="light"] .mb-clim-ew.ew-stress .mb-clim-ew-txt { color: var(--red); } :root[data-theme="light"] .mb-clim-defbtn { border-color: rgba(184,132,42,.4); background: rgba(184,132,42,.08); color: #8F6112; } :root[data-theme="light"] .mb-clim-defbtn:hover { background: rgba(184,132,42,.14); } /* ── 白天 · 收租气候日间天空（2026-06-20）：把夜间深空翻成日间天空、文字翻深， 与暖奶白底同温。verdict 驱动的 sky-* 各给一档日间天色（晴→蓝、雷雨→阴灰）， 云改白色软云团，太阳保留暖光当真·太阳。 ── */ :root[data-theme="light"] .mb-climate { background: radial-gradient(120% 140% at 80% 8%, #C4DCF0 0%, #DCE7ED 42%, #EFECE4 100%); border-color: var(--line); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--shadow); } :root[data-theme="light"] .mb-climate.sky-sunny { background: radial-gradient(120% 140% at 80% 6%, #ABD3F4 0%, #D4E6F2 46%, #F1EEE6 100%); } :root[data-theme="light"] .mb-climate.sky-cloudy { background: radial-gradient(120% 140% at 80% 10%, #C1D4E3 0%, #DAE2E8 46%, #EEEBE3 100%); } :root[data-theme="light"] .mb-climate.sky-showers { background: radial-gradient(120% 140% at 80% 12%, #AEC2D1 0%, #CFD9DE 46%, #E9E7DF 100%); } :root[data-theme="light"] .mb-climate.sky-storm { background: radial-gradient(120% 140% at 80% 12%, #92A0AC 0%, #B5BEC4 46%, #DAD7CE 100%); } /* 云：白天用白色软云团（夜间是深灰）；雷雨白天用偏深灰云、太阳光晕转中性 */ :root[data-theme="light"] .mb-clim-cloud { background: linear-gradient(180deg,#ffffff,#dde6ec); } :root[data-theme="light"] .mb-climate.sky-storm .mb-clim-cloud { background: linear-gradient(180deg,#aab4be,#8b96a1); } :root[data-theme="light"] .mb-climate.sky-storm .mb-clim-sun { background: radial-gradient(circle at 50% 50%, rgba(118,126,138,.22) 0%, rgba(90,96,108,0) 66%); } /* 文字 / 数字 / 分隔线翻深 */ :root[data-theme="light"] .mb-clim-kick { color: var(--sub); } :root[data-theme="light"] .mb-clim-kick .ico { color: var(--accent); } :root[data-theme="light"] .mb-clim-big { background: linear-gradient(160deg,#B8842A,#8F6112 78%); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] .mb-clim-lab, :root[data-theme="light"] .mb-clim-plab, :root[data-theme="light"] .mb-clim-psub { color: var(--dim); } :root[data-theme="light"] .mb-clim-verdict, :root[data-theme="light"] .mb-clim-pval, :root[data-theme="light"] .mb-clim-pval .num { color: var(--text); } :root[data-theme="light"] .mb-clim-driver, :root[data-theme="light"] .mb-clim-ins { color: var(--sub); } :root[data-theme="light"] .mb-clim-ins.is-take { color: var(--text); } :root[data-theme="light"] .mb-clim-pillars, :root[data-theme="light"] .mb-clim-analysis { border-top-color: var(--line); } :root[data-theme="light"] .mb-clim-psub.mb-clim-pact { color: var(--accent-2); } :root[data-theme="light"] .mb-clim-pil.tappable:hover { background: rgba(0,0,0,.04); } :root[data-theme="light"] .mb-clim-pil.tappable.act { background: rgba(0,0,0,.05); } :root[data-theme="light"] .mb-clim-pq { border-color: rgba(0,0,0,.2); color: var(--dim); } :root[data-theme="light"] .mb-clim-pil.tappable.act .mb-clim-pq { border-color: var(--accent); color: var(--accent); } :root[data-theme="light"] .mb-clim-explain { background: rgba(255,255,255,.5); border-color: var(--line); } :root[data-theme="light"] .mb-clim-exhead { color: var(--text); } :root[data-theme="light"] .mb-clim-exwhat, :root[data-theme="light"] .mb-clim-exwhy { color: var(--sub); } :root[data-theme="light"] .mb-clim-exwhat b, :root[data-theme="light"] .mb-clim-exwhy b { color: var(--text); } :root[data-theme="light"] .mb-clim-extag { color: var(--accent-2); } :root[data-theme="light"] .mb-clim-stance.s-neutral { color: var(--accent-2); } :root[data-theme="light"] .mb-clim-stance.s-offense { color: var(--green); } :root[data-theme="light"] .mb-clim-stance.s-defense { color: var(--red); } :root[data-theme="light"] .mb-clim-pdot.d-watch { background: var(--accent); } :root[data-theme="light"] .mb-clim-pdot.d-neutral { background: var(--dim); } :root[data-theme="light"] .mb-clim-ins::before { background: var(--dim); } :root[data-theme="light"] .mb-clim-ins.is-take::before { background: var(--accent); } @media (max-width: 600px) { .mb-clim-in { padding: 18px 18px 16px; } .mb-clim-big { font-size: 50px; } .mb-clim-verdict { font-size: 16.5px; } .mb-clim-row { gap: 16px; } .mb-clim-sun { width: 150px; height: 150px; right: -8px; top: -22px; } .mb-clim-suncore { width: 58px; height: 58px; right: 18px; top: 26px; } .mb-clim-cloud.c1 { width: 150px; top: 44px; right: -4px; } .mb-clim-cloud.c2 { width: 116px; top: 74px; } .mb-clim-cloud.c3 { width: 86px; top: 88px; } .mb-clim-driver { max-width: none; } .mb-clim-pillars { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; } .mb-clim-pval { font-size: 13px; } .mb-clim-psub { font-size: 10px; } } @media (min-width: 900px) { .morning-brief.mode-priority { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "head head" "content right" "trader right"; /* trader 行用 1fr 吸收右栏(climate+日历)比左栏高时多出的高度——否则 grid 把这段 excess 平摊进 content 行，刷新时攻方卡塌成骨架(变矮)→content 行重新长高→攻方被往下顶到"居中"(congyang 2026-06-27 实锤的刷新跳位)。1fr 让 excess 只落在 trader 行底部留白、攻方始终贴着守方下方、刷新前后不跳。 */ grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 14px; padding: 20px 24px; } /* 收租气候不再占顶部整行 — JS(_mbPlaceClimate) 把它移进右栏(日历上方)，桌面下用 rail 紧凑版。 移走后这条 grid-area 不再 match（climate 已非直接子）；万一 JS 没跑到，退化为普通块也无碍。 */ .mode-priority .mb-right-stack > .mb-climate { margin-bottom: 0; /* right-stack 自带 gap，避免双重间距 */ } /* rail 紧凑版（≈手机观感）：2 列支柱 + 缩小分数/留白，适配 400px 右栏 */ .mode-priority .mb-right-stack > .mb-climate .mb-clim-in { padding: 16px 16px 14px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-big { font-size: 46px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-verdict { font-size: 16px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-row { gap: 14px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-driver { max-width: none; font-size: 12px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-sun { width: 150px; height: 150px; right: -8px; top: -22px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-suncore { width: 58px; height: 58px; right: 18px; top: 26px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-cloud.c1 { width: 150px; top: 44px; right: -4px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-cloud.c2 { width: 116px; top: 74px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-cloud.c3 { width: 86px; top: 88px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-pillars { grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin-top: 16px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-pval { font-size: 13px; } .mode-priority .mb-right-stack > .mb-climate .mb-clim-psub { font-size: 10px; } .mode-priority > .mb-head { grid-area: head; } .mode-priority > .mb-priority-content { grid-area: content; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .mode-priority > .mb-right-stack { grid-area: right; align-self: start; display: flex; flex-direction: column; gap: 14px; } /* 攻守(A): 大佬动态(攻)整段移到守方持仓下方 */ .morning-brief > .mb-trader-section { grid-area: trader; } .morning-brief > .mb-trader-card { grid-area: trader; } .mode-priority .mb-right-stack .mb-calendar { margin: 0; padding: 0; border-top: none; align-self: stretch; width: 100%; } .mode-priority .mb-right-stack .mb-chips { margin: 0; padding: 0; border-top: none; align-self: stretch; width: 100%; } /* 日历格子在 400px 右栏里：每格 ~53px wide × 48px tall，markers 留白 */ .mode-priority .mb-right-stack .mb-cal-day { height: 48px; font-size: 14px; } .mode-priority .mb-right-stack .mb-cal-track { gap: 6px; row-gap: 8px; } /* content 内部按文档顺序流式排：headline → sub → list → footer (news ticker / chips 已外迁) */ .mode-priority .mb-priority-headline, .mode-priority .mb-priority-sub, .mode-priority .mb-priority-list, .mode-priority .mb-priority-footer { margin: 0; padding-top: 0; border-top: none; } } /* mode-priority · 手机 */ @media (max-width: 600px) { .morning-brief.mode-priority { padding: 14px 16px; } .mb-priority-item { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 10px; padding: 11px 12px; } .mb-priority-tag { flex-direction: row; gap: 6px; align-self: start; grid-column: 1 / -1; } .mb-priority-body { grid-column: 1 / -1; } .mb-priority-cta { grid-column: 1 / -1; width: 100%; text-align: center; padding: 8px 12px; white-space: normal; line-height: 1.35; box-sizing: border-box; } .mb-priority-head { font-size: 12.5px; } .mb-priority-desc { font-size: 11.5px; } } /* 桌面宽屏 — 双栏 layout, 日历改 7x2 网格让 cells 大、空间均匀 */ @media (min-width: 900px) { .morning-brief { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "climate climate" "head head" "fresh fresh" "concierge concierge" "focus side" "chips side" "trader side"; column-gap: 28px; row-gap: 16px; padding: 22px 24px; } .morning-brief > .mb-climate { grid-area: climate; } .morning-brief > .mb-head { grid-area: head; } .morning-brief > .mb-fresh-bar { grid-area: fresh; margin: 0; } .morning-brief .mb-close { z-index: 5; } .morning-brief .mb-concierge { grid-area: concierge; margin-bottom: 0; padding: 6px 4px 18px; } .morning-brief .mb-text { font-size: 16px; line-height: 1.75; } .morning-brief .mb-avatar { width: 56px; height: 56px; font-size: 28px; } .mb-focus-list { grid-area: focus; margin-bottom: 0; align-items: stretch; } /* ≥1200px: focus 2 列 + 等高 cards (新闻 card 2 行 vs detail 单行不齐 fix) */ @media (min-width: 1200px) { .mb-focus-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; } .mb-focus-item { padding: 10px 12px; } .mb-focus-text { font-size: 12px; } .mb-focus-text .mb-detail { font-size: 10.5px; } } .mb-chips { grid-area: chips; padding-top: 0; border-top: none; align-self: start; } .mb-calendar { grid-area: side; padding: 0; margin: 0; border-top: none; align-self: start; } /* 14 天 → 7 列 2 行，每格更大更好读 */ .mb-cal-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 10px; } .mb-cal-track { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; row-gap: 6px; } .mb-cal-day { height: 36px; font-size: 11px; border-radius: 6px; } .mb-cal-day .marker { bottom: 4px; } .mb-cal-legend { margin-top: 8px; opacity: 0.8; } .mb-cal-legend > span { margin-left: 0; margin-right: 12px; } } /* 手机紧凑 */ @media (max-width: 600px) { .morning-brief { padding: 14px 16px; } .morning-brief .mb-avatar { width: 42px; height: 42px; font-size: 22px; box-shadow: 0 0 0 3px rgba(230,184,106,0.10), 0 0 16px rgba(230,184,106,0.30); } .morning-brief .mb-text { font-size: 14px; line-height: 1.65; } .mb-focus-text { font-size: 12px; } .mb-focus-action { padding: 5px 9px; font-size: 10px; } .mb-cal-day { height: 18px; font-size: 8px; } /* refresh 按钮：手机只显示图标 + 金币药丸，省空间避免和标题挤 */ .morning-brief .mb-refresh { right: 36px; top: 9px; padding: 5px 4px 5px 9px; gap: 5px; } .morning-brief .mb-refresh .mb-refresh-label { display: none; } /* 复盘卡「重新分析」按钮同理：手机只留图标 + 金币药丸 */ .review-llm-regen { padding: 5px 4px 5px 9px; gap: 5px; } .review-llm-regen .review-llm-regen-label { display: none; } } /* 📝 Trade Journal — extras 内 dashed button */ .journal-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent-tint); border: 1px solid rgba(var(--accent-rgb), 0.30); color: var(--accent); font-size: 11.5px; font-weight: 500; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s; width: 100%; } .journal-btn svg.ico { width: 14px; height: 14px; color: var(--accent); } .journal-btn:hover { color: var(--accent-light); border-color: var(--accent-soft); background: var(--accent-tint-strong); } .journal-btn.has-notes { background: var(--accent-tint-strong); color: var(--accent-2); border-color: var(--accent-soft); font-weight: 600; } .journal-btn.has-notes svg.ico { color: var(--accent-2); } /* 🎯 持仓教练 Position Coach */ .coach-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent-tint-strong); border: 1px solid var(--accent); color: var(--accent-light); font-size: 11.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s; width: 100%; } .coach-btn svg.ico { width: 14px; height: 14px; color: var(--accent); } .coach-btn:hover { background: var(--accent); color: #0A0A0B; } .coach-btn:hover svg.ico { color: #0A0A0B; } .coach-btn .coach-note-count { background: var(--accent); color: #0A0A0B; font-weight: 700; font-size: 9.5px; padding: 0 5px; border-radius: 999px; min-width: 16px; line-height: 15px; text-align: center; } .coach-btn:hover .coach-note-count { background: #0A0A0B; color: var(--accent); } #coach-modal .coach-sub { font-size: 11.5px; color: var(--sub); margin: -4px 0 14px; } #coach-modal .coach-detect { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 9px 12px; font-size: 11.5px; line-height: 1.5; margin-bottom: 16px; } #coach-modal .coach-detect svg.ico { width: 15px; height: 15px; flex: none; margin-top: 1px; } #coach-modal .coach-detect.ok { background: var(--accent-tint); border: 1px solid rgba(var(--accent-rgb),0.35); color: var(--accent-light); } #coach-modal .coach-detect.warn { background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.32); color: var(--text); } #coach-modal .coach-detect.none { background: var(--card2); border: 1px solid var(--line); color: var(--sub); } #coach-modal .coach-detect a { color: var(--accent); font-weight: 600; white-space: nowrap; } #coach-modal .coach-q { margin-bottom: 16px; } #coach-modal .coach-q-l { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text); } #coach-modal .coach-seg { display: flex; gap: 6px; flex-wrap: wrap; } #coach-modal .coach-opt { padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12px; color: var(--sub); background: var(--card2); cursor: pointer; font-family: inherit; transition: all 0.12s; } #coach-modal .coach-opt:hover { border-color: var(--accent-soft); } #coach-modal .coach-opt.on { border-color: var(--accent); color: var(--accent-light); background: var(--accent-tint); font-weight: 600; } #coach-modal .coach-fld { display: flex; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; width: 100%; transition: border-color 0.15s; } #coach-modal .coach-fld:focus-within { border-color: var(--accent-soft); } #coach-modal .coach-fld .pre { color: var(--sub); font-size: 14px; font-weight: 600; } #coach-modal .coach-fld input { background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; font-weight: 600; flex: 1; min-width: 0; font-family: inherit; font-variant-numeric: tabular-nums; padding: 0; } #coach-modal .coach-fld input::-webkit-outer-spin-button, #coach-modal .coach-fld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #coach-modal .coach-fld input[type=number] { -moz-appearance: textfield; appearance: textfield; } #coach-modal .coach-cta { background: var(--accent); color: #0A0A0B; font-weight: 700; border: none; border-radius: 9px; padding: 12px; width: 100%; text-align: center; font-size: 13.5px; margin-top: 4px; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 7px; transition: opacity 0.15s; } #coach-modal .coach-cta:hover { opacity: 0.9; } #coach-modal .coach-cta svg.ico { width: 16px; height: 16px; } #coach-modal .coach-cta .cost-pill { display: inline-flex; align-items: center; padding: 2px 8px; margin-left: 3px; border-radius: 999px; background: rgba(10,10,11,0.20); color: #0A0A0B; font-weight: 800; font-size: 10.5px; letter-spacing: -0.1px; } #coach-modal .coach-notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } #coach-modal .coach-notes-h { font-size: 12px; font-weight: 600; color: var(--accent-light); display: flex; align-items: center; gap: 6px; margin-bottom: 9px; } #coach-modal .coach-notes-h svg.ico { width: 14px; height: 14px; color: var(--accent); } #coach-modal .coach-notes-badge { background: var(--accent-tint); color: var(--accent-light); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } #coach-modal .coach-note-ta { width: 100%; min-height: 70px; padding: 10px; font-family: inherit; font-size: 13px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card2); color: var(--text); line-height: 1.55; resize: vertical; } #coach-modal .coach-note-ta:focus { outline: none; border-color: var(--accent-soft); } #coach-modal .coach-note-add { margin-top: 8px; background: transparent; border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; } #coach-modal .coach-note-add:hover { border-color: var(--accent); color: var(--accent-light); } #coach-modal .coach-notes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 260px; overflow-y: auto; } #coach-modal .coach-note-item { background: var(--card2); border-radius: 6px; padding: 9px 11px; } #coach-modal .coach-note-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--sub); margin-bottom: 4px; } #coach-modal .coach-note-del { cursor: pointer; color: var(--red); } #coach-modal .coach-note-text { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); } /* 教练方案区 */ #coach-modal .coach-diag { border-radius: 10px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; } #coach-modal .coach-diag.warn { background: rgba(248,113,113,0.12); } #coach-modal .coach-diag.ok { background: rgba(52,211,153,0.12); } #coach-modal .coach-diag.mix { background: var(--accent-tint); } #coach-modal .coach-diag a { color: var(--accent); font-weight: 600; } #coach-modal .coach-facts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } #coach-modal .coach-fact { display: flex; gap: 8px; font-size: 12px; color: var(--sub); line-height: 1.45; } #coach-modal .coach-fact .d { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex: none; } #coach-modal .coach-fact b { color: var(--text); } #coach-modal .coach-blk { margin-bottom: 15px; } #coach-modal .coach-blk-t { font-size: 12px; font-weight: 700; color: var(--accent-light); margin-bottom: 8px; } #coach-modal .coach-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; } #coach-modal .coach-tbl th { color: var(--sub); font-weight: 600; text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line-2); font-size: 11px; } #coach-modal .coach-tbl th:first-child, #coach-modal .coach-tbl td:first-child { text-align: left; } #coach-modal .coach-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; } #coach-modal .coach-tbl tr:last-child td { border-bottom: none; } #coach-modal .coach-tbl .num { font-variant-numeric: tabular-nums; } #coach-modal .coach-tbl .hl { background: var(--accent-tint); color: var(--accent-light); font-weight: 700; } #coach-modal .coach-tbl th.hl { color: var(--accent); } #coach-modal .coach-tbl .sub { color: var(--sub); } #coach-modal .coach-tbl .good { color: var(--green); } #coach-modal .coach-tbl .bad { color: var(--red); } #coach-modal .coach-tbl .pos { color: var(--green); font-weight: 700; } #coach-modal .coach-tbl .neg { color: var(--red); font-weight: 700; } /* ⚠️ .pos 是全局「持仓卡」类（卡片 border+圆角+background+flex）——教练表格 td 复用 .pos 当「正数绿」 会连卡片盒子样式一起吃进来 → 正数格套上金色圆角药丸（wheel 收 premium 列 / roll credit 档都会中）。 这里在 coach 表格 scope 清掉盒子样式，只保留上面那条的绿色。td.neg 一并覆盖以防将来加全局 .neg。*/ #coach-modal .coach-tbl td.pos, #coach-modal .coach-tbl td.neg { background: none; border-top: none; border-left: none; border-right: none; border-radius: 0; display: table-cell; cursor: default; box-shadow: none; } #coach-modal .coach-tbl tr.best td { background: rgba(52,211,153,0.10); } #coach-modal .coach-ck { list-style: none; counter-reset: cck; padding: 0; margin: 0; } #coach-modal .coach-ck li { counter-increment: cck; display: flex; gap: 9px; padding: 6px 0; font-size: 12px; align-items: baseline; color: var(--text); } #coach-modal .coach-ck li::before { content: counter(cck); background: var(--accent); color: #0A0A0B; font-weight: 800; font-size: 10px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; } #coach-modal .coach-back { margin-top: 2px; background: transparent; border: 1px solid var(--line-2); color: var(--sub); border-radius: 8px; padding: 8px 14px; font-size: 12px; cursor: pointer; font-family: inherit; transition: all 0.12s; } #coach-modal .coach-back:hover { border-color: var(--accent-soft); color: var(--text); } /* 教练 Phase 2 富版：chips / delta 触发表 / 检查点 / roll context / 免责 */ #coach-modal .coach-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } #coach-modal .coach-chip { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 11px; color: var(--sub); } #coach-modal .coach-chip b { color: var(--text); font-weight: 600; } #coach-modal .coach-chip.g b { color: var(--green); } #coach-modal .coach-chip.r b { color: var(--red); } #coach-modal .coach-blk-sub { font-weight: 400; color: var(--sub); font-size: 10.5px; margin-left: 8px; } #coach-modal .coach-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; } #coach-modal .coach-dtbl { min-width: 460px; } #coach-modal .coach-dtbl th, #coach-modal .coach-dtbl td { padding: 5px 7px; white-space: nowrap; } #coach-modal .coach-tbl th.hl, #coach-modal .coach-tbl td.hl { background: var(--accent-tint); } #coach-modal .coach-tbl td.hl { color: var(--accent-light); font-weight: 700; } #coach-modal .coach-tbl th.hl { color: var(--accent); } #coach-modal .coach-tbl tr.exp td { color: var(--green); border-top: 1px solid var(--line-2); } #coach-modal .coach-tag { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: var(--card3, var(--card2)); color: var(--sub); font-weight: 600; vertical-align: middle; } #coach-modal .coach-tag.today { background: var(--accent-tint-strong); color: var(--accent-light); } #coach-modal .coach-tag.earn { background: rgba(248,113,113,0.15); color: var(--red); } #coach-modal .coach-tag.pick { background: rgba(52,211,153,0.15); color: var(--green); } #coach-modal .coach-cp { padding: 9px 0; border-bottom: 1px solid var(--line); } #coach-modal .coach-cp:last-child { border-bottom: none; } #coach-modal .coach-cp-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 3px; } #coach-modal .coach-cp-h b { color: var(--text); font-weight: 600; } #coach-modal .coach-cp-dte { margin-left: auto; font-size: 10px; color: var(--sub); } #coach-modal .coach-cp-b { font-size: 11.5px; color: var(--sub); line-height: 1.55; padding-left: 17px; } #coach-modal .coach-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } #coach-modal .coach-dot.r { background: var(--red); } #coach-modal .coach-dot.a { background: var(--accent); } #coach-modal .coach-dot.g { background: var(--green); } #coach-modal .coach-roll-ctx { font-size: 11px; color: var(--sub); line-height: 1.5; background: var(--card2); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; } #coach-modal .coach-roll-ctx b { color: var(--text); font-weight: 600; } #coach-modal .coach-roll-take { font-size: 11px; color: var(--sub); line-height: 1.55; margin-top: 9px; padding-left: 2px; } #coach-modal .coach-roll-take b { color: var(--accent-light); } #coach-modal .coach-disc { font-size: 10px; color: var(--dim, var(--sub)); line-height: 1.5; margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); } /* 🎯 教练状态感知重设计：状态横幅 + 现价位置条 + 双路径决策 */ #coach-modal .coach-state { border-radius: 12px; padding: 13px 15px; margin-bottom: 16px; border: 1px solid var(--line); } #coach-modal .coach-state.safe { background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.30); } #coach-modal .coach-state.near { background: var(--accent-tint-strong); border-color: var(--accent-soft); } #coach-modal .coach-state.breached { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.38); } #coach-modal .coach-state-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } #coach-modal .coach-state-verdict { font-size: 13.5px; font-weight: 800; } #coach-modal .coach-state.safe .coach-state-verdict { color: var(--green); } #coach-modal .coach-state.near .coach-state-verdict { color: var(--accent-light); } #coach-modal .coach-state.breached .coach-state-verdict { color: var(--red); } #coach-modal .coach-state-dte { margin-left: auto; font-size: 11px; color: var(--sub); font-weight: 600; } #coach-modal .coach-state-facts { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 11.5px; color: var(--sub); margin-bottom: 4px; } #coach-modal .coach-state-facts b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } #coach-modal .coach-state-facts .live b { color: var(--accent-light); } #coach-modal .coach-gauge { position: relative; height: 6px; border-radius: 999px; background: var(--card3); margin: 15px 2px 6px; } #coach-modal .coach-gauge .strike { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--text); opacity: .85; } #coach-modal .coach-gauge .strike i { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--sub); font-style: normal; white-space: nowrap; } #coach-modal .coach-gauge .now { position: absolute; top: -4px; width: 11px; height: 14px; border-radius: 3px; transform: translateX(-50%); } #coach-modal .coach-gauge .now i { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-style: normal; white-space: nowrap; font-weight: 700; } #coach-modal .coach-gauge .now.safe { background: var(--green); } #coach-modal .coach-gauge .now.safe i { color: var(--green); } #coach-modal .coach-gauge .now.near { background: var(--accent); } #coach-modal .coach-gauge .now.near i { color: var(--accent-light); } #coach-modal .coach-gauge .now.breached { background: var(--red); } #coach-modal .coach-gauge .now.breached i { color: var(--red); } #coach-modal .coach-state-do { font-size: 12.5px; line-height: 1.55; color: var(--text); margin-top: 16px; } #coach-modal .coach-state-do b { font-weight: 700; color: var(--accent-light); } #coach-modal .coach-paths { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } #coach-modal .coach-path { border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; } #coach-modal .coach-path.rec { border-color: var(--accent); background: var(--accent-tint); } /* CTA 区：pin 到卡片底部（等高卡片下两按钮对齐） */ #coach-modal .coach-path-cta { margin-top: auto; padding-top: 12px; } #coach-modal .coach-cta-note { display: flex; gap: 6px; font-size: 10.5px; color: var(--sub); line-height: 1.5; margin-bottom: 9px; } #coach-modal .coach-cta-note b { color: var(--accent-light); font-weight: 700; } #coach-modal .coach-cta-note .ic { flex: none; } #coach-modal .coach-cta-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s; background: var(--accent-tint-strong); border: 1px solid var(--accent); color: var(--accent-light); } #coach-modal .coach-cta-btn:hover { background: var(--accent); color: #0A0A0B; } #coach-modal .coach-cta-btn .arr { font-size: 13px; } #coach-modal .coach-roll-loading { font-size: 11px; color: var(--sub); padding: 12px 4px; text-align: center; } #coach-modal .coach-roll-real-tag { font-size: 10px; color: var(--green); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; } #coach-modal .coach-roll-real-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); display: inline-block; } #coach-modal .coach-path-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; } #coach-modal .coach-path-h .tag { font-size: 9px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #0A0A0B; font-weight: 800; flex: none; } #coach-modal .coach-path-h .tag.b { background: var(--card3); color: var(--text); } #coach-modal .coach-path-b { font-size: 11.5px; color: var(--sub); line-height: 1.6; } #coach-modal .coach-path-b b { color: var(--text); font-weight: 600; } #coach-modal .coach-path-b .mi { color: var(--accent-light); font-weight: 700; } #coach-modal .coach-faded { font-size: 11px; color: var(--sub); background: var(--card2); border-radius: 8px; padding: 9px 11px; line-height: 1.5; margin-bottom: 15px; } #coach-modal .coach-faded b { color: var(--text); } @media (min-width: 640px) { #coach-modal .coach-paths.two { flex-direction: row; align-items: stretch; } #coach-modal .coach-paths.two .coach-path { flex: 1; min-width: 0; } } /* 📚 期权小白指南 — 分类折叠 */ .edu-card .edu-cat { border-top: 1px solid var(--line); margin: 0; } .edu-card .edu-cat:first-child { border-top: none; } .edu-card .edu-cat > summary.edu-cat-header { padding: 12px 4px; cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; transition: color 0.15s; } .edu-card .edu-cat > summary.edu-cat-header::-webkit-details-marker { display: none; } .edu-card .edu-cat > summary.edu-cat-header::before { content: '▸'; color: var(--sub); font-size: 10px; transition: transform 0.2s; display: inline-block; width: 10px; } .edu-card .edu-cat[open] > summary.edu-cat-header::before { transform: rotate(90deg); } .edu-card .edu-cat > summary.edu-cat-header:hover { color: var(--accent); } .edu-card .edu-cat[open] > summary.edu-cat-header { color: var(--accent); } .edu-card .edu-cat-name { flex: 1; } .edu-card .edu-cat-count { font-family: var(--font-num); font-size: 10px; color: var(--sub); font-weight: 400; } .edu-card .edu-cat-body { padding: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; } /* 单个术语项 */ .edu-card .edu-term { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card2); } .edu-card .edu-term[open] { border-color: var(--accent); } .edu-card .edu-term > summary { padding: 9px 12px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; list-style: none; display: flex; align-items: baseline; gap: 8px; } .edu-card .edu-term > summary::-webkit-details-marker { display: none; } .edu-card .edu-term > summary:hover { color: var(--accent); } .edu-card .edu-term[open] > summary { color: var(--accent); border-bottom: 1px solid var(--line); } .edu-card .edu-symbol { font-size: 12px; font-weight: 800; color: var(--accent); min-width: 28px; } .edu-card .edu-body { padding: 10px 12px; font-size: 11px; line-height: 1.6; color: var(--text); } .edu-card .edu-body .ex { background: rgba(230,184,106,0.10); padding: 6px 8px; margin-top: 6px; border-radius: 4px; font-size: 11px; } .edu-card .edu-body .care { margin-top: 6px; padding: 6px 8px; background: rgba(52,211,153,0.11); border-radius: 4px; font-size: 11px; } /* ═══ 指南目录（app.guides.js · /guide-pick 方案 A · 2026-08-10）═══ 旧版是「11 个一模一样的收起行」，现在分三段：情境块直显 → 5 组文章折叠 → 术语整块折叠。 .gcd-* 全部 scoped 在 .edu-card 下（这张卡在 PWA 下会被 app.ask.js 整节点搬进「问」tab， 搬的是 .edu-card 本身，所以选择器跟着走、不用为两个位置各写一份）。 */ /* 段落分隔标题（全部指南 / 术语速查）*/ .edu-card .gcd-sec-h { display: flex; align-items: center; gap: 7px; margin: 16px 4px 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .edu-card .gcd-sec-h .ico { width: 13px; height: 13px; flex: none; } .edu-card .gcd-sec-n { margin-left: auto; font-family: var(--font-num); font-size: 10px; color: var(--dim); font-weight: 400; letter-spacing: 0; text-transform: none; } /* 「现在对你有用」——整张卡唯一默认可读的一段 */ .edu-card .gcd-ctx-h { display: flex; align-items: center; gap: 6px; margin: 2px 4px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* 活数据指示灯 = 这一段唯一的 glyph（同 .coach-roll-real-tag .dot / .cloud-sync-status .dot 约定）。 占的是兄弟段落 icon 的那个位置（13px 槽），所以连 halo 一起量到 13px，三行标题左边缘才对齐； 点本身 6px（5px 在没有 icon 陪衬时太轻，压不住旁边 10.5px 的大写标题）。 */ .edu-card .gcd-live { width: 6px; height: 6px; border-radius: 50%; flex: none; margin: 0 3.5px; /* 6 + 3.5×2 = 13px = 兄弟段落 icon 槽宽，三行标题文字左边缘严格对齐 */ background: var(--green); box-shadow: 0 0 0 3.5px rgba(63,221,156,0.16); } .edu-card .gcd-ctx { display: flex; flex-direction: column; gap: 7px; } /* 一行指南（情境块和分组里共用）*/ .edu-card .gcd-row { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--card2); text-decoration: none; color: var(--text); transition: border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .edu-card .gcd-row:hover { border-color: var(--accent); background: var(--accent-tint); } .edu-card .gcd-row.hot { border-color: rgba(232,188,114,0.42); background: linear-gradient(180deg, var(--accent-tint), rgba(232,188,114,0.03)); } .edu-card .gcd-gi { width: 30px; height: 30px; flex: none; padding: 6px; box-sizing: border-box; border-radius: 9px; color: var(--accent); background: var(--accent-tint); border: 1px solid rgba(232,188,114,0.22); } .edu-card .gcd-tx { flex: 1; min-width: 0; } .edu-card .gcd-nm { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); } .edu-card .gcd-ds { display: block; font-size: 10.5px; color: var(--sub); margin-top: 1px; line-height: 1.45; } .edu-card .gcd-ar { width: 14px; height: 14px; flex: none; color: var(--accent); opacity: 0.65; } /* 「为什么推给你」原因 chip —— 默认中性描边。 ⚠️ 金色是品牌锚 + 主操作色（DESIGN.md §2/§3），同屏最多 1 个 .gold，别当装饰铺开。 */ .edu-card .gcd-why { display: inline-flex; align-items: center; margin-bottom: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; padding: 2px 7px; color: var(--sub); background: var(--fill); border: 1px solid var(--line); } .edu-card .gcd-why.gold { color: var(--gold-ink); background: var(--gold-grad); border-color: transparent; } .edu-card .gcd-why.r { color: var(--red); background: none; border-color: rgba(255,126,120,0.35); } .edu-card .gcd-why.g { color: var(--green); background: none; border-color: rgba(63,221,156,0.35); } /* 分组折叠（文章 5 组 + 术语整块）*/ .edu-card .gcd-grp { border-top: 1px solid var(--line); } .edu-card .gcd-grp:first-of-type { border-top: none; } .edu-card .gcd-grp > summary.gcd-grp-h { list-style: none; cursor: pointer; user-select: none; padding: 11px 4px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.02em; transition: color var(--dur-quick) var(--ease-out); } .edu-card .gcd-grp > summary.gcd-grp-h::-webkit-details-marker { display: none; } .edu-card .gcd-grp > summary.gcd-grp-h::before { content: '▸'; color: var(--sub); font-size: 10px; width: 10px; flex: none; display: inline-block; transition: transform var(--dur-quick) var(--ease-out); } .edu-card .gcd-grp[open] > summary.gcd-grp-h::before { transform: rotate(90deg); } .edu-card .gcd-grp > summary.gcd-grp-h:hover, .edu-card .gcd-grp[open] > summary.gcd-grp-h { color: var(--accent); } .edu-card .gcd-grp-h .ico { width: 14px; height: 14px; flex: none; } .edu-card .gcd-grp-nm { flex: 1; min-width: 0; } .edu-card .gcd-grp-ct { font-family: var(--font-num); font-size: 10px; color: var(--sub); font-weight: 400; } .edu-card .gcd-grp-b { padding: 2px 0 12px; display: flex; flex-direction: column; gap: 6px; } /* 术语折叠里装的是原来那 8 个 .edu-cat 分类，去掉它们自己的首行分隔线避免双线 */ .edu-card .gcd-terms .gcd-grp-b { gap: 0; } .edu-card .gcd-term-host { width: 100%; } .edu-card .gcd-more { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 500; color: var(--accent); text-decoration: none; border: 1px solid rgba(232,188,114,0.32); border-radius: 10px; padding: 9px 12px; } .edu-card .gcd-more:hover { background: var(--accent-tint); } .rec-result .rank { font-weight: 700; color: var(--accent); } .rec-result div.empty { /* ⚠️ 必须限定 div — 裸 .empty 会连坐 svg.tier-star.empty（空星）撑成 48px 大胶囊（2026-06-12 用户截图） */ text-align: center; color: var(--sub); padding: 24px; font-size: 12px; } /* IV 提醒邮件落地 banner — 让用户清楚"这是我刚才点邮件来的" */ .iv-alert-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(184, 134, 11, 0.10), rgba(184, 134, 11, 0.04)); border: 1px solid rgba(184, 134, 11, 0.35); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: var(--text); } .iv-alert-banner .ivab-ic { font-size: 15px; line-height: 1; } .iv-alert-banner .ivab-text strong { color: #B8860B; font-weight: 700; letter-spacing: 0.02em; } .rec-form .loading { text-align: center; padding: 32px 20px; color: var(--sub); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .rec-form .loading-spinner { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rec-spin 0.9s linear infinite; } .rec-form .loading-text { display: flex; align-items: center; gap: 6px; } .rec-form .loading-dots::after { content: '...'; display: inline-block; width: 18px; text-align: left; animation: rec-dots 1.2s steps(4, end) infinite; } @keyframes rec-spin { to { transform: rotate(360deg); } } @keyframes rec-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } .rec-form .loading-stages { font-size: 11px; color: var(--sub); opacity: 0.7; } /* ── 新建持仓表单 ────────────────────────────────────────────────── */ .add-form { display: none; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 12px; padding: 20px; margin-bottom: 14px; } .add-form.open { display: block; } .add-form h4 { font-size: 13px; color: var(--accent); margin-bottom: 4px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .add-form h4 .x { cursor: pointer; color: var(--sub); font-weight: 400; font-size: 18px; line-height: 1; } .add-form .form-subtitle { font-size: 12px; color: var(--sub); margin-bottom: 14px; line-height: 1.5; } /* OCC paste — 默认收成胶囊按钮，点击展开 */ .add-form .occ-row { margin-bottom: 14px; } .add-form .occ-row .occ-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(230,184,106,0.08); border: 1px dashed rgba(230,184,106,0.30); border-radius: 999px; color: var(--accent); font-size: 11.5px; cursor: pointer; transition: background 0.15s; } .add-form .occ-row .occ-chip:hover { background: rgba(230,184,106,0.14); } .add-form .occ-row .occ-chip .chev { font-size: 10px; opacity: 0.7; } .add-form .occ-row .occ-expanded { display: none; } .add-form .occ-row.expanded .occ-chip { display: none; } .add-form .occ-row.expanded .occ-expanded { display: block; background: rgba(230,184,106,0.06); border: 1px dashed rgba(230,184,106,0.30); border-radius: 8px; padding: 10px 12px; } .add-form .occ-row label { font-size: 11px; color: var(--accent); display: block; margin-bottom: 4px; } .add-form .occ-row input { width: 100%; background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px; font-size: 13.5px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); letter-spacing: 0.4px; } .add-form .occ-row input:focus { outline: none; border-color: var(--accent-soft); } .add-form .occ-row .hint { font-size: 10px; color: var(--sub); margin-top: 4px; } .add-form .occ-row .occ-collapse-btn { display: inline-block; margin-top: 6px; font-size: 10.5px; color: var(--sub); cursor: pointer; } /* OCC 识别确认条 + 缺失字段引导（方案 A） */ .add-form .add-recap { display: none; align-items: center; gap: 9px; background: rgba(61,220,132,0.10); border: 1px solid rgba(61,220,132,0.34); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; font-size: 12.5px; color: var(--text); animation: occRecapPop 0.25s ease; } .add-form.occ-recognized .add-recap { display: flex; } .add-form.occ-recognized .occ-row .occ-chip { opacity: 0.7; } .add-form .add-recap .ck { width: 19px; height: 19px; border-radius: 50%; flex: none; background: #3DDC84; color: #06280f; display: grid; place-items: center; font-weight: 900; font-size: 11px; } .add-form .add-recap b { color: var(--accent); font-weight: 700; } .add-form .add-recap .recap-edit { margin-left: auto; font-size: 10.5px; color: var(--accent); cursor: pointer; border: 1px solid var(--accent-soft); background: transparent; padding: 3px 9px; border-radius: 7px; white-space: nowrap; } @keyframes occRecapPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* 缺失必填字段高亮（张数 / 卖出价） */ /* 「必填」静态徽标 —— 张数 / 卖出价 两个最易漏的字段常驻提示（方案 B） */ .add-form .field-need .fld-lbl { display: flex; align-items: center; gap: 6px; } .add-form .field-need .req-badge { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; color: var(--gold-ink); background: var(--gold-grad); padding: 1px 6px; border-radius: 6px; vertical-align: 1px; } /* 方案 B 校验：「登记」永远可点 → 点了才校验 → 缺项字段红边 + 下方内联「必填」+ 聚焦第一个缺项 */ .add-form .field input.add-err-ring, .add-form .field select.add-err-ring { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.16); } .add-form .field input.add-err-ring:focus, .add-form .field select.add-err-ring:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.24); } .add-form .field .add-fld-err { font-size: 10.5px; font-weight: 600; color: var(--red); margin-top: 1px; letter-spacing: 0.1px; } .add-form .field .add-fld-err[hidden] { display: none; } .add-form .divider { text-align: center; font-size: 10px; color: var(--sub); margin: 8px 0 12px; letter-spacing: 1px; } /* 显式 2 行网格：行 1 (标的 / 类型 / Strike / 到期日) + 行 2 (张数 / 卖出价 / 交易日) 用 minmax(0, ...) 而非裸 fr — 否则 input min-content (placeholder 文本宽度) 超 fr 时 会撑爆容器, 在窄屏 (Samsung Fold 等) 把整个 card 推出 viewport */ .add-form .grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; } .add-form .grid.row-2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.3fr); margin-top: 12px; } @media (max-width: 720px) { .add-form .grid, .add-form .grid.row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .add-form .grid > .field:nth-child(1), .add-form .grid.row-2 > .field:nth-child(1) { grid-column: span 2; } } /* 表单打开时藏掉同 card 内的 "+ 登记持仓" 触发按钮 (重复 + 视觉竞争) */ .add-form.open ~ .pos-toolbar .add-btn { display: none !important; } .add-form .field { display: flex; flex-direction: column; gap: 4px; } .add-form .field label { font-size: 11px; color: var(--sub); letter-spacing: 0.2px; } /* 账户下拉（I14 S3-1）被 app.dd.js 接管成玻璃 .dd → 撑满字段行，与相邻 input 全宽视觉对齐 */ .add-form .field .dd { width: 100%; } .add-form .field .dd-btn { width: 100%; justify-content: space-between; } .add-form .field .dd-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 批次级账户列（I14 S3-1.5）：桌面 5 列；窄屏账户下拉换到第二行占满整行 */ .edit-form .ef-lots-head.has-acct, .edit-form .ef-lot-row.has-acct { grid-template-columns: 0.6fr 0.8fr 1.3fr 1fr 30px; } .edit-form .ef-lot-acct { background: var(--well); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--well-sh); color: var(--text); font-family: inherit; font-size: 12.5px; padding: 6px 8px; min-width: 0; width: 100%; box-sizing: border-box; height: 34px; } .edit-form .ef-lot-acct:focus { outline: none; border-color: var(--accent); } @media (max-width: 640px) { .edit-form .ef-lots-head.has-acct, .edit-form .ef-lot-row.has-acct { grid-template-columns: 0.66fr 0.86fr 1.4fr 30px; } .edit-form .ef-lots-head.has-acct .ef-lot-acct-h { display: none; } .edit-form .ef-lot-row.has-acct .ef-lot-acct { grid-column: 1 / -1; grid-row: 2; } .edit-form .ef-lot-row.has-acct .ef-lot-del { grid-column: 4; grid-row: 1; } } .add-form .field input, .add-form .field select { background: var(--card2); border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px; font-size: 13.5px; color: var(--text); font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; /* 防御性: input 默认 size=20 字符 (~150-180px), 在窄屏 grid 里会把 column 撑爆 —— 即使外层 grid 是 minmax(0, 1fr) 也救不了 (因为 input 自身 min-width 不为 0)。 强制 min-width:0 + width:100% 让 input 跟随 grid column 收缩 */ min-width: 0; width: 100%; box-sizing: border-box; } .add-form .field input:focus, .add-form .field select:focus { outline: none; border-color: var(--accent); } .add-form .type-radios { display: flex; gap: 8px; } .add-form .type-radios label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; } .add-form .type-radios input { display: none; } .add-form .type-radios input:checked + span { color: var(--accent); font-weight: 600; } .add-form .type-radios label:has(input:checked) { border-color: var(--accent); background: rgba(230,184,106,0.10); } .add-form .preview { margin-top: 14px; padding: 10px 12px; background: var(--inset); border-radius: 6px; font-size: 12px; line-height: 1.6; } .add-form .preview .lab { color: var(--sub); } .add-form .preview .v { font-weight: 700; font-family: var(--font-num); } .add-form .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .add-form .actions button { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 10px; cursor: pointer; border: none; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } .add-form .actions .submit { background: var(--accent); color: #0A0A0B; } .add-form .actions .submit:hover { background: var(--accent-light); transform: scale(1.03); box-shadow: 0 6px 20px rgba(230,184,106,0.32); } .add-form .actions .submit:active { transform: scale(0.97); box-shadow: none; } .add-form .actions .submit:disabled { opacity: 0.4; cursor: not-allowed; } .add-form .actions .cancel { background: transparent; color: var(--sub); border: 1.5px solid var(--line); } .add-form .actions .cancel:hover { color: var(--text); border-color: var(--line-2); transform: scale(1.02); } .add-form .actions .cancel:active { transform: scale(0.97); } .add-form .err { color: var(--red); font-size: 12px; margin-top: 8px; } /* 删除链接 */ .pos-actions .del-btn { background: transparent; color: var(--sub); border: 1.5px solid var(--line); margin-left: auto; font-size: 11px; } .pos-actions .del-btn:hover { color: var(--red); border-color: var(--red); background: rgba(248,113,113,0.05); transform: scale(1.04); } .pos-toolbar button.muted { color: var(--sub); } .pos-toolbar .label-tag { color: var(--sub); font-size: 11px; padding: 0 4px; } .pos-toolbar select { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; } /* ⚠️ 旧「简洁模式」隐藏规则（.pos-meta / pos-theta-row / pos-extras / del-btn / pos-meta-simple / 已平仓复盘 section）已于 2026-06-27 全删 —— 同上：simple 现永远渲染新 .pos-row，完整卡不渲染。 */ /* 推荐卡不受列表模式影响（2026-06-16）：列表＝持仓「监控面」的压缩；推荐是「决策面」， 权利金（每张收）/ 排名 / 一句话点评 / 对比 / 完整指标网格都要保留。密度按钮本身也只在 持仓工具栏 → 作用域收回持仓更符合心智。勿再给 .rec-card 加 data-density="simple" 隐藏规则。 */ /* ════ 列表模式（data-density="simple"）= 紧凑表格（2026-06-29 重构 v4）════ congyang 方向：① 尽量压低纵向 ② 手机像「列表」不是「卡片」→ 单行 + 横滑看更多列、标的列恒可见 ③ 表头可点排序。→ 桌面/手机【同一套表格】：宽屏整表铺满（中段放得下不滚）；窄屏整表横滑、标的/操作恒可见。 ⭐ 三版演进（都为同时满足「跟手横滑 + 冻结列不变色」）： · v2：#positions 单容器横滚 + 冻结列 sticky【不透明填充】遮内容 → 跟手，但纯色配不准半透玻璃卡面，滚动露色差（调 4 轮仍败）。 · v3：冻结列移出滚动层、每行中段 .prl-mid-scroll 各自 scroller + rAF JS 跨行同步 → 色对了（冻结透明露玻璃面）， 但 N 行每帧 setScrollLeft = 主线程卡顿「不跟手」+ 手指落冻结列「滑不动」（congyang 2026-06-29 报）。 · ⭐ v4（当前）：回 v2 的单容器横滚（跟手、零同步），用【整列表实底色】根治色差 —— #positions 底 = --list-froz-bg （≈卡面像素采样色），行/中段透明露此实底；冻结 sticky 同填 --list-froz-bg → 中段与冻结永远同一实色、 滚动零变换。再加 1px 竖分隔线（congyang 要）划出冻结/横滚区。代价：列表区由「透玻璃」变「实底」，但色≈卡面、几无差。 准玻璃零 blur（长列表禁 backdrop-filter）。container-type: inline-size 保留 → @container ≥760/≥900 按 #positions 宽切宽表模板。 */ /* v4（2026-06-29）：回到【单一原生横滚容器】= #positions 自身 overflow-x:auto，整表一个 scroller → 手指落在哪都能横滑（含冻结列）、原生跟手、零 JS 同步（v3 的 per-row scroller + rAF 同步 = 主线程每帧 给 N 行设 scrollLeft → 卡顿「不跟手」+ 手指落冻结列「滑不动」，congyang 2026-06-29 报）。 冻结列回 position:sticky；色块不回归靠【整列表实底色】：#positions 底 = --list-froz-bg（≈卡面像素采样色）， 行/中段透明 → 露 #positions 实底；冻结 sticky 同填 --list-froz-bg → 中段与冻结永远同一实色、滚动零变换。 再加 1px 竖分隔线（congyang 要）划出冻结/横滚区。⚠️ overflow-x:auto 会令 overflow-y 计算成 auto → #positions 成滚动容器；但 .main/.card 无高度约束 → 内容（含展开抽屉，in-flow）撑高、无纵向滚动条/不裁。 桌面 @container≥760 整表铺满不滚 → 在那里 reset 回 overflow:visible + sticky→static（保桌面 sticky 表头）。 */ [data-density="simple"] #positions { display: block; container-type: inline-size; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; background: var(--list-froz-bg); /* 中段 10 列宽（窄/手机，横滚）：张数 接货 距行权 价格 到期 盈亏 Δ Θ IV 状态。窄屏由 _fitListCols 量内容再覆写（表头
强制换行 → max-content 量到较短那段，列自动收窄）。外层三栏 froz-l / max-content / froz-r 见 .prl-summary。 */ --posmid-cols: 42px 66px 68px 88px 64px 92px 46px 58px 50px 132px; --posmid-min: 706px; /* 账户列（多账户用户才有 · 中段第一列）—— 由 `#positions.has-acct-col` 切到 11 列模板。 104px：装得下「Fidelity Roth 401k」这类长名（超出 ellipsis），又不至于把数字挤走。 ⚠️ 加/删中段列要**同时**改 --posmid-cols 和 --posmid-min，两者对不上会让表头与数据错列。 */ /* ⭐ 这个 token 现在**真的说话了**（2026-08-10）：`_fitListCols()` 以前把整条 `--posmid-cols` 按内容实测覆写掉，token 只在量测失败时才生效 —— 所以 congyang 那次 128 → 118 改完毫无反应。现在账户列被钉在这个值上（不参与内容量测、也不吃富余摊分）， **想调宽窄就改这一处，改完立刻看得到**。内容超宽靠 `.ac-nm` 的 ellipsis 收（长账户名截断，不撑破格子）。 ⭐ **118px 是 congyang 2026-08-10 明确要的**（「账户列还原到 118」）。方案 B 的内容 （小标 18 + gap 6 + 序号 ~14 + padding 11 ≈ 49）只占一半，剩下的是有意留的空 —— 他先前嫌 98px 挤，现在 token 真生效了就按他要的数来。**别再自作聪明改回 56。** */ --posacct-w: 118px; --posfroz-l: 120px; --posfroz-r: 76px; /* congyang 2026-07-10：操作冻结列 [教练按钮 pill][⋯]（配合 ⋯ 右 padding 收窄·贴合内容不留大富余） */ /* ≥900 内联操作列宽（仅「怎么办」+⋯·平仓已收进 ⋯ 菜单 congyang 2026-06-30 省空间）： 中文「怎么办」+⋯ ≈112 → 118；英文「What now?」+⋯ ≈146 → html[lang=en] 覆写 150。两语都贴合不留大留白。 */ --posacts-w: 118px; } /* lang 与 data-density 同在 上 → 必须同元素复合选择（descendant 永不命中：html 不是 html 的后代）。 */ /* ⚠️ 这里**不再覆写 `--posacct-w`** —— 基准值 118px 本就容得下 EN 表头「Account」(~58px)， 再写一个更小的数（曾经是 68px）反而让英文比中文窄，方向是反的。`--posacts-w` 保留： 那条是内容驱动的（中文「怎么办」vs 英文「What now?」），两码事。 */ html[lang="en"][data-density="simple"] #positions { --posacts-w: 150px; } /* 多账户用户：中段变 11 列（账户在最前）。min 同步 +104，否则窄屏下列宽摊分会算错。 */ [data-density="simple"] #positions.has-acct-col { --posmid-cols: var(--posacct-w) 42px 66px 68px 88px 64px 92px 46px 58px 50px 132px; --posmid-min: 824px; } [data-density="simple"] #positions::-webkit-scrollbar { display: none; } /* v4：中段不再是各自的 scroller（横滚已收到 #positions 容器层）→ 纯透传包装，overflow visible、宽随内容。 */ [data-density="simple"] .prl-mid-scroll, [data-density="simple"] .head-mid-scroll { min-width: 0; overflow: visible; } [data-density="simple"] .prl-mid, [data-density="simple"] .head-mid { display: grid; grid-template-columns: var(--posmid-cols); min-width: var(--posmid-min); align-items: center; column-gap: 10px; padding-left: 10px; padding-right: 14px; /* 首列离左分隔线 10 · 末列(状态)离右分隔线 14（congyang 2026-07-10 要 padding，不贴分隔线）· gap 12→10（2026-07-23 省横向空间·须与 _fitListCols 同步） */ } [data-density="simple"] .prl-mid > .rt { text-align: right; } /* ── 表头（三栏：持仓 / 中段 / 操作 · 与行同栅格；可点排序）── v4：与行同为【单容器横滚】→ 表头 width:max-content（随中段实宽溢出）+ min-width:100%（窄时至少铺满）； 冻结表头列 sticky（下方规则），列宽用 max-content 让 froz-l/froz-r 实测对齐行。column-gap 收 0（靠竖线+cell padding 分隔，省横向空间）。 */ [data-density="simple"] .pos-list-head { display: grid; grid-template-columns: var(--posfroz-l) max-content var(--posfroz-r); width: max-content; min-width: 100%; align-items: center; gap: 0; padding: 7px 10px 8px 0; font-size: 10px; color: var(--sub); font-family: var(--font-num); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--line-2); } [data-density="simple"] .pos-list-head .rt { text-align: right; } /* 表头非排序 span（持仓/状态/价格）不换行；排序 span 的换行交给内层 .hd-lbl（见下） */ [data-density="simple"] .pos-list-head > span:not(.sortable) { white-space: nowrap; } /* 可排序表头：hover 提示 + 当前排序高亮 + ▲▼ 指示。sortable 保持 inline-flex（label/箭头/ⓘ 三 flex 子）。 */ [data-density="simple"] .pos-list-head .sortable { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 3px; transition: color .12s; } /* 表头文字块：inline-block 让内含
（如「接货/
被叫走」）能强制换 2 行；右对齐。 congyang 2026-07-10：列按内容收窄，长表头（尤其 EN「Assign / Call」「Cushion」）在「/」后
堆 2 行、不再撑宽列。 _fitListCols 用 max-content 量：
是强制换行 → 量到较短那行宽 → 列真收窄（ 软换行会被当一行量，故用
）。 */ [data-density="simple"] .pos-list-head .hd-lbl { display: inline-block; white-space: normal; word-break: keep-all; line-height: 1.16; text-align: right; } [data-density="simple"] .pos-list-head .rt.sortable { justify-content: flex-end; } /* `lt` = 左对齐的表头变体（目前只有账户列用）。数字列右对齐是为了小数点对齐， 文字列右对齐反而难扫 —— 且表头与单元格对齐方式必须一致，否则那列看着像错位。 */ [data-density="simple"] .pos-list-head .lt { text-align: left; } [data-density="simple"] .pos-list-head .lt.sortable { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-start; } [data-density="simple"] .pos-list-head .sortable:hover { color: var(--text); } [data-density="simple"] .pos-list-head .sortable.active { color: var(--accent); } [data-density="simple"] .pos-list-head .sort-ind { font-size: 8px; opacity: 0; transition: opacity .12s; } [data-density="simple"] .pos-list-head .sortable.active .sort-ind { opacity: 1; } /* 表头 ⓘ 说明按钮（接货/被叫走 怎么算）— 小圆圈 i，点开 appAlert 解释 */ [data-density="simple"] .pos-list-head .hd-info { flex-shrink: 0; width: 13px; height: 13px; margin-left: 1px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--sub); font-family: var(--font-num); font-size: 8.5px; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; } [data-density="simple"] .pos-list-head .hd-info:hover { color: var(--text); border-color: var(--accent); background: rgba(232,184,106,0.1); } /* 标的表头列：v4 sticky-left 冻结 + 实底 + 1px 竖分隔线（与行 .prl-id 同），横滚时钉在可视左。 */ [data-density="simple"] .pos-list-head > :first-child { display: flex; align-items: center; padding-right: 8px; padding-left: 14px; min-width: 0; position: sticky; left: 0; z-index: 5; background: var(--list-froz-bg); border-right: 1px solid var(--line); align-self: stretch; } /* 「持仓」表头排序变体（congyang 2026-07-23 可点排序）：左对齐（覆盖 .hd-lbl 默认右对齐 + .rt.sortable 的 flex-end）， 排序箭头紧跟标签右侧；hover/active/箭头显隐复用通用 .sortable 规则。 */ [data-density="simple"] .pos-list-head > .pos-hd-id { gap: 4px; justify-content: flex-start; } [data-density="simple"] .pos-list-head > .pos-hd-id .hd-lbl { text-align: left; white-space: nowrap; } /* 操作表头列（空 span）：sticky-right 冻结 + 实底 + 左竖线，与行 .prl-acts 对齐。 */ [data-density="simple"] .pos-list-head > :last-child { position: sticky; right: 0; z-index: 5; background: var(--list-froz-bg); border-left: 1px solid var(--line); align-self: stretch; } /* ── 行容器（扁平 · 细分隔线 · 不再每行金描边卡）—— 必须显式 reset 基础 .pos 卡片 chrome ── v4：行盒 width:max-content（随中段实宽溢出 #positions）+ min-width:100%（窄时至少铺满）→ border-bottom 分隔线 横跨整可滚宽度（不会只到可视宽就断）。冻结列 sticky 在行内（下方 .prl-id/.prl-acts）。 */ [data-density="simple"] .pos-row { border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin: 0; box-shadow: none; width: max-content; min-width: 100%; transition: opacity .15s, background .15s; } [data-density="simple"] .pos-row:last-child { border-bottom: none; } [data-density="simple"] .pos-row.unchecked { opacity: 0.45; } /* 选中靠 checkbox + 满透明；未选淡出 */ @media (hover: hover) and (pointer: fine) { /* 行体 hover 底（桌面）。v4 冻结列是 sticky 实底格 → hover 时连冻结列一起染，整行同色。 ⭐ .prl-drawer 也必须一起染（congyang 2026-08-07：「hover 上之后，还是有一层颜色变化」）—— 抽屉自己是**不透明**底(--list-froz-bg)，只染摘要行的话，展开态一 hover 就被横切成 「上半亮 / 下半暗」两截，正好破掉下面那条「展开面板内部单一色面」的不变量 （实测底色种类 3 → 4）。.prl-forms / .gamma-flag 不用管：前者透明、后者是半透明 tint 叠在行底上，都会自己跟着抬。 ⚠️ 用 background-**color** 不用 background 简写：带预警细条的行靠 background-image 铺同色底 （上面那段 :has），简写会把那层 image 一起冲掉 → hover 上去整块同色底当场消失、细条又变回 「孤立的一条」。改成 color 之后 hover 是「抬亮一档 + 保留那层底色」。 */ [data-density="simple"] .pos-row:hover { background-color: var(--list-row-hover); } [data-density="simple"] .pos-row:hover .prl-id, [data-density="simple"] .pos-row:hover .prl-acts, [data-density="simple"] .pos-row:hover .prl-drawer { background-color: var(--list-row-hover); } } /* ── 行摘要：三栏（标的 / 中段横滚 / 操作）── v4：grid froz-l / max-content / froz-r，宽随中段；column-gap 0（靠竖线分隔）。 */ [data-density="simple"] .prl-summary { display: grid; grid-template-columns: var(--posfroz-l) max-content var(--posfroz-r); align-items: stretch; column-gap: 0; padding: 8px 10px 8px 0; cursor: pointer; /* 左 padding 移到 .prl-id（冻结列内）→ 横滚态也不贴边 */ } /* 标的列 / 操作列 = v4【sticky 冻结列】：position:sticky 钉在可视边 + 实底 --list-froz-bg（与 #positions 底同色 → 中段透明露同一实色、滚动零变换，根治「冻结部分变色」）+ 1px 竖分隔线划界（congyang 要）。 z-index 高于中段 → 中段横滚时从冻结列底下穿过、被实底盖住。 */ [data-density="simple"] .prl-id { display: flex; align-items: center; gap: 6px; min-width: 0; position: sticky; left: 0; z-index: 2; background: var(--list-froz-bg); border-right: 1px solid var(--line); padding-right: 8px; padding-left: 14px; /* 左 padding：内容不贴卡片边（横滚态也一致，congyang 2026-06-29）*/ } [data-density="simple"] .prl-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; position: sticky; right: 0; z-index: 2; background: var(--list-froz-bg); border-left: 1px solid var(--line); padding-left: 8px; } /* congyang 2026-07-23：内容放得下（不横滚）时，让整表【铺满卡片宽度】——中段数据列均匀撑开、操作列钉在最右， 消除右侧死空白。此前 2026-07-10「操作静态紧跟状态列」把列全挤到左边、右侧留一条死空白（congyang 指「不优雅」）： 行盒 min-width:100% 撑满，但中段是 max-content 内容宽 + 靠左 → 尾部一大条空。 修：行/表头 width:100%（撑满卡）+ 外层中段轨改 minmax(0,1fr)（吃满剩余宽·操作 froz-r 随之钉最右） + 中段网格 justify-content:space-between（固定列宽不变、把多余宽均摊进列间距·数据列自然铺开）。 JS _fitListCols 量「整行总宽 ≤ 容器宽」时挂 .list-fits；放不下 → 去掉 → 恢复 max-content + sticky 钉右横滚（横滚态不铺满）。 */ [data-density="simple"] #positions.list-fits .pos-row, [data-density="simple"] #positions.list-fits .pos-list-head { width: 100%; min-width: 0; } [data-density="simple"] #positions.list-fits .prl-summary, [data-density="simple"] #positions.list-fits .pos-list-head { grid-template-columns: var(--posfroz-l) minmax(0, 1fr) var(--posfroz-r); } [data-density="simple"] #positions.list-fits .prl-mid, [data-density="simple"] #positions.list-fits .head-mid { min-width: 0; width: 100%; } /* 列宽由 _fitListCols 按比例撑满（固定 px 轨·表头行同轨对齐）·不用 space-between（会按内容宽不均摊→表头/数据错位） */ [data-density="simple"] #positions.list-fits .prl-acts, [data-density="simple"] #positions.list-fits .pos-list-head > :last-child { position: static; } [data-density="simple"] .prl-prob { justify-self: end; display: inline-flex; align-items: baseline; gap: 4px; } [data-density="simple"] .prl-prob-noun { display: none; } /* 表头已标注「接货/被叫走」，行内不重复名词 */ /* 状态 cell：stretch 撑满轨道宽（配 text-align:right 右对齐内容）→ 超长状态省略号收在轨道内， 不再因 justify-self:end 让 cell 撑到内容宽、溢出盖邻列（EN「TARGET HIT · READY TO CLOSE」） */ /* 状态 cell：stretch 撑满轨道宽（配 text-align:right 右对齐内容）→ 超长状态省略号收在轨道内， 不再因 justify-self:end 让 cell 撑到内容宽、溢出盖邻列（EN「TARGET HIT · READY TO CLOSE」）。 ⚠️ congyang 2026-06-29：chip 前的留白是 fixed 列宽的固有代价（短 chip < 列宽），他选「保留列宽不动」→ 维持右对齐（不左对齐）。 */ [data-density="simple"] .prl-status { justify-self: stretch; min-width: 0; overflow: hidden; } /* ── 身份 cell：ticker + 行权 + 类型 pill ── */ [data-density="simple"] .prl-id .ticker { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; flex-shrink: 0; } /* 行权可省略号收缩（多腿 legs 较长时优先压它，绝不截类型 pill） */ [data-density="simple"] .prl-id .strike { font-size: 12.5px; font-weight: 600; color: var(--sub); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } [data-density="simple"] .prl-id .strike.prl-legs { font-size: 11px; letter-spacing: -0.01em; } /* 类型 pill（PUT 金 / CALL 绿 / 多腿中性）— .pos-name 那套 pill 样式 scoped 不到 .prl-id，补一份 */ [data-density="simple"] .prl-id .type-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 4px; border-radius: 4px; font-family: var(--font-num); line-height: 1; display: inline-flex; align-items: center; flex-shrink: 0; } [data-density="simple"] .prl-id .type-badge.call { background: rgba(52,211,153,0.14); color: var(--green); } [data-density="simple"] .prl-id .type-badge.put { background: rgba(230,184,106,0.16); color: var(--accent); } [data-density="simple"] .prl-id .type-badge.spread-kind { background: rgba(255,255,255,0.08); color: var(--sub); } [data-density="simple"] .prl-id .side-pill { flex-shrink: 0; } [data-density="simple"] .prl-check { display: inline-flex; align-items: center; flex-shrink: 0; } [data-density="simple"] .prl-check input { width: 14px; height: 14px; accent-color: var(--accent); margin: 0; cursor: pointer; } /* 张数列：中性数字（同 Δ/IV 灰），部分平仓的「/总张数」走 .prl-unit 小字 */ [data-density="simple"] .prl-count { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 12px; white-space: nowrap; } [data-density="simple"] .prl-prob .asg-pct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } [data-density="simple"] .prl-cush { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; } /* nowrap：内容偏窄时整体右对齐溢出 1px，不让「安全/SAFE」中途断字到第二行 */ [data-density="simple"] .prl-cush .ok { color: var(--green); } [data-density="simple"] .prl-cush .bad { color: var(--red); } /* 价格列：开仓价（灰）→ 现价（绿=权利金跌你赚 / 红=涨）·单行 */ [data-density="simple"] .prl-price { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; color: var(--sub); } [data-density="simple"] .prl-price .prl-p-from { color: var(--sub); } [data-density="simple"] .prl-price .prl-p-arw { color: var(--sub); opacity: 0.55; margin: 0 2px; font-size: 10px; } [data-density="simple"] .prl-price .ok { color: var(--green); font-weight: 600; } [data-density="simple"] .prl-price .bad { color: var(--red); font-weight: 600; } [data-density="simple"] .prl-dte { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 12px; white-space: nowrap; } [data-density="simple"] .prl-dte0 { color: var(--red); font-weight: 600; } /* 到期日历日期小字（剩余天数为主 · 日期作副标·同一行） */ [data-density="simple"] .prl-dte-date { color: var(--sub); font-size: 10px; opacity: 0.72; } /* 已平仓行：该列改显到期日 M/D/YY（剩余天数无意义），作主内容、比副标略大可读 */ [data-density="simple"] .prl-dte-closed { color: var(--sub); font-size: 11px; opacity: 0.85; white-space: nowrap; font-variant-numeric: tabular-nums; } [data-density="simple"] .prl-pnl { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; } [data-density="simple"] .prl-pnl .prl-pct { font-size: 10px; opacity: 0.75; margin-left: 3px; } [data-density="simple"] .prl-delta { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 12px; } /* Θ 每日租金：白底数字 + 内层 .green/.red 着色（正=收租绿 / 负=付时间价值红），同 .prl-pnl 不固定色 */ [data-density="simple"] .prl-theta { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; } /* IV 隐含波动率：中性数字（同 Δ 灰），% 单位小字 */ [data-density="simple"] .prl-iv { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 12px; } [data-density="simple"] .prl-status .pos-status { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } [data-density="simple"] .prl-na { color: var(--dim); } [data-density="simple"] .prl-unit { font-size: 9.5px; color: var(--sub); font-weight: 400; } /* ── 行操作（窄屏只 ⋯；≥760 外露 平仓+教练）── */ [data-density="simple"] .prl-act-inline { display: inline-flex; align-items: center; font-family: inherit; font-size: 11px; font-weight: 600; border-radius: 999px; cursor: pointer; padding: 3px 10px; white-space: nowrap; border: 1px solid var(--line); background: transparent; color: var(--text); transition: all 0.15s; } /* congyang 2026-07-10：教练按钮全宽度外露（原仅 ≥900 外露）→ 冻结操作列内 [教练][⋯] 好点 */ [data-density="simple"] .prl-act-inline.primary { border-color: rgba(232,184,106,0.45); color: var(--accent); } [data-density="simple"] .prl-act-inline.primary:hover { background: rgba(232,184,106,0.12); border-color: var(--accent); } [data-density="simple"] .prl-act-inline.ghost { color: var(--sub); } [data-density="simple"] .prl-act-inline.ghost:hover { color: var(--text); border-color: var(--line-2); background: var(--card2); } /* 教练外露 = 保留按钮形态（pill 描边·congyang 2026-07-10：不要无边框 ghost）·只留灯泡图标 */ [data-density="simple"] .prl-coach { padding: 3px 8px; align-items: center; gap: 4px; } [data-density="simple"] .prl-coach .ico { width: 15px; height: 15px; } [data-density="simple"] .prl-coach-txt { display: none; } /* 只留灯泡图标（省宽·好点）·文字进 title/aria */ [data-density="simple"] .prl-menu-mobile { display: none; } /* 怎么办已外露成图标 → 从 ⋯ 菜单移除避免重复（平仓/Roll/编辑/删除 仍在菜单） */ /* ⋯ ghost 图标按钮（congyang：去掉描边+底色那块「浮起」感）— 静止只剩 ⋯ 字形（略放大补足可点感）， hover（桌面）/ 按下（手机）才浮起一枚圆底；border 留 transparent 占位防 hover 时尺寸跳。 */ [data-density="simple"] .pos-more.prl-more { font-size: 17px; line-height: 1; padding: 4px 5px; color: var(--sub); /* 右 padding 8→5 收窄 ⋯ 右侧留白（congyang 2026-07-10）·hover 圆底仍够 */ border: 1px solid transparent; background: transparent; border-radius: 999px; transition: all .12s; } [data-density="simple"] .pos-more.prl-more:hover { color: var(--text); background: var(--card2); } [data-density="simple"] .pos-more.prl-more:active { color: var(--text); background: var(--card3); } /* 接货概率四档（绿→金→琥珀→红 · 皆现有 token；app 调色板无真正黄/橙，故 mid 用金、high 用琥珀） */ .asg-low { color: var(--green) !important; } .asg-mid { color: var(--accent) !important; } .asg-high { color: var(--amber, #EBA13C) !important; } .asg-terminal { color: var(--red) !important; } /* ── 展开抽屉（点行展开 · 底色比行略深区隔）── v4 行盒随容器横滚 → 抽屉 sticky-left + 100cqw（容器视宽） 钉在可视左、不随横滚跑掉（旧 v2 同款做法）。background 实底盖住下方可能透出的横滚内容。 */ [data-density="simple"] .prl-drawer { /* 底色与列表同底（原为 --card2「比行略深做区隔」）：聚焦方案靠其他行淡出来区隔， 不需要抽屉自己变色；而且 --card2 的 B/R=1.76 远蓝于列表底的 1.45，暗色 UI 里那点冷蓝 会被读成「变了个色」—— congyang 2026-08-07 实锤「不喜欢这个蓝色调」。同 app.css 顶部 当初特意不用 --card-solid 当冻结列底的那条教训。 */ border-top: none; background: var(--list-froz-bg); position: sticky; left: 0; width: 100cqw; box-sizing: border-box; z-index: 3; } [data-density="simple"] .prl-drawer[hidden] { display: none; } [data-density="simple"] .prl-drawer-inner { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 11px; animation: payoffDrawerIn var(--dur-normal, .22s) var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } /* ══ 展开态 = 聚焦（congyang 2026-08-07 经 §9 /list-pick 三选一拍板 B）════════════ 打开的行**什么装饰都不加** —— 不抬起、不描边、不换底色 —— 反过来把其他行连同表头淡出。 「这一行和它的抽屉是一起的」不靠边框圆角说明：屏幕上亮着的就只有它俩。 为什么最后是「不加装饰」：前两版试过 3px 实金竖轨 / --card2 蓝底 / 抬起玻璃卡 / 标的列单独刷色当脊柱，congyang 逐个否掉（「太丑」「怎么又出现黄色条」「色块很奇怪」）。 根因不是深浅调错，是**面板内部被分成好几块颜色** —— 围着 ticker 冒出一个孤零零的灰方块， 把本该横向连贯的一行切碎。聚焦这条路零装饰 → 天然不可能分块，而且密度一点不损失。 ⭐ 落地不变量（改这块前先读）：**展开面板内部单一色面**。行盒 / 冻结标的列 / 冻结操作列 / 抽屉全部同一个底（都是 --list-froz-bg，所以下面几乎不用写规则）；面板内部**不划通栏线** —— 那条线的作用就是「把两块分开」，跟目标正相反。scripts/check_list_mode_parity.mjs 守着。 */ [data-density="simple"] #positions:has(.pos-row.row-open) .pos-row:not(.row-open), /* 账户组头也要一起淡 —— 不淡的话展开一行之后，屏幕上最亮的反而是各账户的组头 （账户名 + BP + 收租那一排），比展开的那行还抢眼，跟本块「亮着的只有它」的 不变量直接矛盾（2026-08-09 审计发现）。 */ [data-density="simple"] #positions:has(.pos-row.row-open) .acct-group-head, [data-density="simple"] #positions:has(.pos-row.row-open) .pos-list-head { opacity: .34; filter: saturate(.6); transition: opacity var(--dur-normal) var(--ease-out), filter var(--dur-normal) var(--ease-out); } /* :has() 不支持的老浏览器 → 不淡出，退回展开前的观感，不会坏（渐进增强） */ [data-density="simple"] .pos-row.row-open { border-bottom-color: transparent; } [data-density="simple"] .prd-pills { display: flex; gap: 18px; } [data-density="simple"] .prd-pills .pill { font-size: 11.5px; color: var(--sub); font-variant-numeric: tabular-nums; } [data-density="simple"] .prd-pills .pill b { color: var(--text); font-weight: 600; } [data-density="simple"] .prd-hint { font-size: 12px; color: var(--sub); } /* 部分平仓 chip 进列表抽屉：抹掉卡片模式的 6px 14px 0 外边距（对齐 .pos 各区块用）， 改由抽屉 flex gap + padding 定位，靠左置顶 */ [data-density="simple"] .prl-drawer-inner > .partial-chip { margin: 0; align-self: flex-start; } /* 多腿腿位摘要（表格身份列藏了 legs，抽屉补回）— 中性 pill 列出每条腿 */ [data-density="simple"] .prd-legs { display: flex; flex-wrap: wrap; gap: 6px; } [data-density="simple"] .prd-leg { font-size: 11.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; } /* 腿位明细（app.multileg.js `_mlLegPills`）：复用价差卡 .sp-leg 的 卖=金/买=蓝 pill，末尾挂该腿浮盈亏。 .sp-leg.sell/.buy 本身设了 color，故这里的盈亏色要靠更高特异度盖过去 */ [data-density="simple"] .prd-legs .sp-leg b { font-weight: 700; margin-left: 6px; } [data-density="simple"] .prd-legs .sp-leg b.g { color: var(--green); } [data-density="simple"] .prd-legs .sp-leg b.r { color: var(--red); } [data-density="simple"] .prl-drawer .pos-advice { margin: 0; } [data-density="simple"] .prl-drawer .pos-stats-side { font-size: 12px; } [data-density="simple"] .prl-payoff-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: inherit; font-size: 11.5px; font-weight: 500; border-radius: 999px; cursor: pointer; padding: 6px 14px; border: 1px solid var(--line); background: var(--card); color: var(--sub); transition: all .15s; } [data-density="simple"] .prl-payoff-btn:hover, [data-density="simple"] .prl-payoff-btn.is-open { color: var(--text); border-color: var(--line-2); } [data-density="simple"] .prl-payoff-btn .ico { width: 14px; height: 14px; } [data-density="simple"] .prd-col-r .payoff-drawer { margin: 8px 0 0; } /* 窄屏：点开后与按钮留 8px；桌面常显时下方覆盖为 0 */ /* ══ A 双列抽屉（congyang 2026-06-28 选定）══ 单腿短仓抽屉：左 数字+出场建议 / 右 损益曲线。 默认（窄屏 / 手机）= 单列：col-l、col-r 顺次堆叠；右栏只露「损益曲线」按钮，点开才展图（chart-head 藏）。 桌面（容器 ≥760 = 宽表模式同阈值）= 两列：曲线常显于右栏、藏按钮、一道分隔线。曲线 DOM 里只有一份，纯 CSS 切显隐。 */ [data-density="simple"] .prl-drawer-2col .prd-col-l { display: flex; flex-direction: column; gap: 11px; min-width: 0; } [data-density="simple"] .prl-drawer-2col .prd-chart-head { display: none; } /* 窄屏隐藏标题，曲线走按钮 */ @container (min-width: 760px) { [data-density="simple"] .prl-drawer-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; } [data-density="simple"] .prl-drawer-2col .prd-col-r { border-left: 1px solid var(--line); padding-left: 22px; min-width: 0; } [data-density="simple"] .prl-drawer-2col .prd-chart-head { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; font-family: var(--font-num); font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; } [data-density="simple"] .prl-drawer-2col .prd-chart-head .ico { width: 13px; height: 13px; } [data-density="simple"] .prl-drawer-2col .prl-payoff-btn { display: none; } /* 桌面曲线常显 → 不需要切换按钮 */ [data-density="simple"] .prl-drawer-2col .prd-col-r .payoff-drawer[hidden] { display: block; } /* 无视 hidden，常显 */ [data-density="simple"] .prl-drawer-2col .prd-col-r .payoff-drawer { margin: 0; } } /* 多腿身份列：legs 在窄屏（横滚表格）也藏（标的列只 124px），腿位走抽屉；ticker + 种类 pill 干净 */ [data-density="simple"] .prl-id .strike.prl-legs { display: none; } /* 行内平仓/编辑表单（_renderRowForms·单腿短仓）：v4 行盒随容器横滚 → 同抽屉 sticky-left + 100cqw 钉在可视左。 表单本体 .close-form/.edit-form 默认 display:none，打开才撑高 → 平时 .prl-forms 0 高无副作用。 */ [data-density="simple"] .prl-forms { box-sizing: border-box; position: sticky; left: 0; width: 100cqw; z-index: 3; } /* v4 桌面 reset（overflow 部分）：整表铺满不横滚 → #positions 回 overflow:visible。 ⚠️ 不能写进下面 @container 块：容器查询匹配不了容器自身 #positions（块头注释的同款坑）—— 原版就写在块里 = 死规则、从未生效 → 基础规则的 overflow-x:auto 把 overflow-y 隐式算成 auto → #positions 恒为滚动容器 → 持仓少（容器矮）时行内 ⋯ 下拉超出容器上下缘被裁（congyang 2026-07-07 截图， 行多时容器够高看不出来）。开关改由 JS _fitListCols 按实测 clientWidth<760 同步 .list-wide class （与 togglePosMenu 的 narrow 判定同阈值）。背景刻意不跟着 reset 成 transparent：死规则期间线上一直 显示 --list-froz-bg（≈卡面采样色），维持现状不引入视觉 delta。 */ [data-density="simple"] #positions.list-wide { overflow-x: visible; overflow-y: visible; } /* ════ 容器 ≥760px：整表 fr 弹性铺满（中段放得下不滚）════ ⚠️ 容器查询【不能匹配容器自身 #positions】(HANDOFF 旧坑) → 列模板必须定义在【后代】.prl-summary / .pos-list-head（外层三栏）+ .prl-mid / .head-mid（中段 9 列）上，它们是 #positions 后代、能被 @container 命中。 #positions 自身的宽屏 overflow reset 见上方 .list-wide（JS 挂 class 才能命中自身）。 ⚠️ 表头与行是独立 grid → 外层三栏 + 中段 9 列【两层都同模板】才列对齐（fixed/fr 才对齐，auto/max-content 各自算→错位）。 ── 列宽策略：外层 标的 2.2fr / 中段 6.4fr / 操作 fixed；中段内 9 列 min+fr 均匀呼吸。 ── 操作列双断点（避免 760-900 横滚）：760-900 操作 52（⋯ 菜单含平仓/怎么办，内联藏）；≥900 操作 206、内联外露。 ⚠️ congyang 2026-07-10：桌面「fr 铺满不滚」整块停用（断点抬到 100000px 永不命中）——改为全宽度都「列按内容宽 + 中段横滑」（标的+⋯ 冻结·⋯ 走锚定弹出·JS _fitListCols 全宽度量内容）。旧桌面模型（fr 铺满 / 页面级 sticky 表头 / 内联操作按钮 / 桌面 legs 显示 / 加大字号）随之不生效；要回退把两个断点改回 760/900 即可。 */ @container (min-width: 100000px) { [data-density="simple"] .prl-id, [data-density="simple"] .prl-acts, [data-density="simple"] .pos-list-head > :first-child, [data-density="simple"] .pos-list-head > :last-child { position: static; background: transparent; border: none; padding-left: 0; /* 桌面回退：左 padding 走行 padding（窄屏才把它移进冻结列）*/ } [data-density="simple"] .prl-drawer, [data-density="simple"] .prl-forms { position: static; width: auto; } [data-density="simple"] .prl-mid, [data-density="simple"] .head-mid { padding-left: 0; } [data-density="simple"] .pos-row { width: auto; min-width: 0; } /* 宽屏整表铺满（中段放得下不滚）：外层三栏 fr 分配（标的 2.2fr / 中段 6.4fr / 操作 52） + 中段 9 列各自 min+fr 填满（fr 按比例填中段 track，与权重绝对值无关）；表头与行【同模板】→ 列对齐。标的:中段 = 2.2:6.4 同旧比例。 */ [data-density="simple"] .prl-summary, [data-density="simple"] .pos-list-head { grid-template-columns: minmax(150px,2.2fr) minmax(0,6.4fr) 52px; width: auto; min-width: 0; column-gap: 6px; } /* 标的列「按内容缩」（congyang 2026-06-29：固定 2.2fr 在简单持仓时浪费空间）：JS _fitListCols 判定 【全简单单腿持仓】时给 #positions 加 .id-fit + 量 --pos-id-w → 标的 hug 内容、中段 1fr 吃掉余量 （距行权/盈亏更宽）。有多腿宽 chip（legs/价差）或 JS 没跑 → var 回退 2.2fr/6.4fr（legs 在 ≈240px 放得下全宽）。 */ [data-density="simple"] #positions.id-fit .prl-summary, [data-density="simple"] #positions.id-fit .pos-list-head { grid-template-columns: var(--pos-id-w, minmax(150px,2.2fr)) minmax(0,1fr) 52px; } [data-density="simple"] .prl-mid-scroll, [data-density="simple"] .head-mid-scroll { overflow: visible; } /* 中段 9 列纯 fr（无 px-min）→ 永远精确填满中段 track、绝不溢出（避免 ≥900 操作 206 时 track 比 px-min 和略小 → 中段假性「可滚」+ 缘提示线误现）。桌面 track 够宽，各列实宽 ≈ 内容；状态靠 ellipsis 收长 EN。 ⭐ 2026-06-29 按内容重配权重（congyang 报「盈亏/距行权 留的不够」）：距行权 0.85→1.05 / 盈亏 1→1.15 （内容偏宽 "+27.3% 安全" / "-$3,480 -150%"，原 fr 在 ~900-1100px 容器临界换行/挤）；slack 从严重超配的 定宽数字列 Δ 0.5→0.4 / Θ 0.6→0.45 / IV 0.55→0.45 挪出（它们需求远小于配额）。 2026-06-30 列首加「张数」：起初 0.4fr 太窄 → 排序时表头「张数▼」（含▼箭头）挤进「接货/被叫走」(congyang 报「重叠了」)。 改 0.55fr（容下 张数+▼ 留余量），从最宽的 状态 1.4→1.25 挪 0.15 补（接货/距行权/盈亏/Δ/Θ/IV 全不动→不再加剧挤）。 9 列权重和 = 0.55+1+1.05+0.5+1.15+0.4+0.45+0.45+1.25 = 6.8。fr 按比例填满中段 track（对齐靠表头/行【同模板】，与权重绝对值无关）。 */ [data-density="simple"] .prl-mid, [data-density="simple"] .head-mid { min-width: 0; column-gap: 10px; /* 6→10 congyang 2026-06-29 中段数字列别挤 */ grid-template-columns: minmax(0,0.55fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,0.5fr) minmax(0,1.15fr) minmax(0,0.4fr) minmax(0,0.45fr) minmax(0,0.45fr) minmax(0,1.25fr); } /* 实底 --list-froz-bg 不是半透 --card：overflow reset 复活后（上方 .list-wide）sticky 真会钉视口顶， 行从底下滚过，半透卡面底会叠影（浮层底不裸用半透 --card · DESIGN 纪律）。 */ [data-density="simple"] .pos-list-head { position: sticky; top: 0; z-index: 4; background: var(--list-froz-bg); padding: 8px 10px 9px; } [data-density="simple"] .prl-summary { padding: 9px 10px; column-gap: 6px; } [data-density="simple"] .prl-id .ticker { font-size: 15px; } [data-density="simple"] .prl-id .strike { font-size: 13px; } /* 多腿 legs 桌面显示（标的列 2.2fr/按内容 hug 有空间）；窄屏仍隐藏走抽屉（见全局 display:none）。congyang 2026-06-29 */ [data-density="simple"] .prl-id .strike.prl-legs { display: inline; } [data-density="simple"] .prl-prob .asg-pct { font-size: 13.5px; } [data-density="simple"] .prl-count, [data-density="simple"] .prl-cush, [data-density="simple"] .prl-dte, [data-density="simple"] .prl-price, [data-density="simple"] .prl-pnl, [data-density="simple"] .prl-delta, [data-density="simple"] .prl-theta, [data-density="simple"] .prl-iv { font-size: 12.5px; } } /* ════ 容器 ≥900px：操作列加宽容英文内联按钮 —— 同上 2026-07-10 停用（断点抬到 100001px 永不命中） ════ */ @container (min-width: 100001px) { [data-density="simple"] .prl-summary, [data-density="simple"] .pos-list-head { grid-template-columns: minmax(150px,2.2fr) minmax(0,6.4fr) var(--posacts-w); } /* 标的「按内容缩」同 ≥760（中段 1fr 吃余量），仅操作列宽 var(--posacts-w)（中文 168 / 英文 206） */ [data-density="simple"] #positions.id-fit .prl-summary, [data-density="simple"] #positions.id-fit .pos-list-head { grid-template-columns: var(--pos-id-w, minmax(150px,2.2fr)) minmax(0,1fr) var(--posacts-w); } /* 表格模式：平仓/怎么办外露，菜单里的隐藏 */ [data-density="simple"] .prl-act-inline { display: inline-flex; align-items: center; } [data-density="simple"] .prl-menu-mobile { display: none; } } /* ════ 窄屏 ⋯ → body 级【锚定下拉】（JS `_openPosMenuAnchored` 注入 body + 定位在 ⋯ 按钮处， 逃离 #positions 横滚 overflow 裁剪 + container-type containment）。congyang：要电脑那种下拉、 就在该行弹出，不要从底部。z 高于 nav-tabs(1500)；手机大点触目标。════ */ .pos-anchored.pos-more-menu { position: fixed; top: 0; left: 0; /* JS 设实际 top/left */ min-width: 196px; max-width: 280px; border-radius: 13px; padding: 6px; z-index: 1560; box-shadow: var(--shadow-lg); transform-origin: top right; animation: posAnchorIn .15s var(--ease-out, cubic-bezier(0.16,1,0.3,1)); } .pos-anchored .menu-item { padding: 12px 13px; font-size: 14px; gap: 11px; border-radius: 10px; } .pos-anchored .menu-item .ico.item-icon { width: 18px; height: 18px; } .pos-anchored .menu-sep { margin: 4px 12px; } @keyframes posAnchorIn { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: none; } } .card h3 .h-hint { display: block; font-size: 11px; color: var(--sub); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; line-height: 1.4; flex-basis: 100%; min-width: 100%; } .tk-card .hint { font-size: 10px; color: var(--sub); margin-top: 2px; } .green { color: var(--green) !important; } .red { color: var(--red) !important; } .orange { color: var(--orange) !important; } .yellow { color: var(--yellow) !important; } .sug { margin-bottom: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: border-color 0.15s, background 0.15s; } .sug:hover { border-color: var(--line-2); } .sug.portfolio { background: var(--card); } .sug-head { padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; user-select: none; } /* 状态色点：标题前的小圆，替代原来的左边粗条 */ .sug-head .ttl::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sub); margin-right: 8px; vertical-align: 1px; flex-shrink: 0; } .sug-head .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .sug-head .ttl { font-size: 13px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sug-head .pnl-tag { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; } .sug-head .row2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; line-height: 1.4; } /* status 是最重要的告警信息，单独占一行避免长中文挤成单字竖排 */ .sug-head .status { flex: 1 1 100%; min-width: 0; } .sug-head .sub { color: var(--sub); font-weight: 400; flex: 1 1 auto; min-width: 0; } .sug-head .arr { font-size: 9px; opacity: 0.5; flex-shrink: 0; margin-left: auto; transition: transform 0.2s; } .sug.expanded .sug-head .arr { transform: rotate(90deg); } .sug-detail { display: none; padding: 10px 12px 12px 12px; font-size: 12px; line-height: 1.55; color: var(--text); border-top: 1px solid var(--line); } .sug.expanded .sug-detail { display: block; } .sug-detail .section-h { font-size: 10px; color: var(--sub); text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px 0; font-weight: 600; } .sug-detail .section-h:first-child { margin-top: 0; } .sug-detail ul { list-style: none; padding: 0; } .sug-detail ul li { padding: 3px 0 3px 12px; position: relative; } .sug-detail ul li::before { content: "•"; position: absolute; left: 0; color: var(--sub); } .sug-detail ol { list-style: none; padding: 0; counter-reset: opt; } .sug-detail ol li { padding: 4px 0 4px 22px; position: relative; counter-increment: opt; } .sug-detail ol li::before { content: counter(opt) "."; position: absolute; left: 0; top: 4px; width: 16px; color: var(--accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-num); } /* 状态：细描边整体着色 + 标题前的色点；不再用左边粗条 */ .sug.danger { background: rgba(248,113,113,.04); border-color: rgba(248,113,113,.28); } .sug.danger:hover { border-color: rgba(248,113,113,.50); } .sug.danger .sug-head { color: var(--red); } .sug.danger .sug-head .ttl::before { background: var(--red); } .sug.warn { background: rgba(230,184,106,.04); border-color: rgba(230,184,106,.28); } .sug.warn:hover { border-color: rgba(230,184,106,.50); } .sug.warn .sug-head { color: var(--orange); } .sug.warn .sug-head .ttl::before { background: var(--orange); } .sug.caution { background: rgba(230,184,106,.03); border-color: rgba(230,184,106,.22); } .sug.caution:hover { border-color: rgba(230,184,106,.42); } .sug.caution .sug-head { color: var(--yellow); } .sug.caution .sug-head .ttl::before { background: var(--yellow); } .sug.good { background: rgba(52,211,153,.03); border-color: rgba(52,211,153,.22); } .sug.good:hover { border-color: rgba(52,211,153,.42); } .sug.good .sug-head { color: var(--green); } .sug.good .sug-head .ttl::before { background: var(--green); } .sug.info { background: rgba(230,184,106,.03); border-color: rgba(230,184,106,.22); } .sug.info:hover { border-color: rgba(230,184,106,.42); } .sug.info .sug-head { color: var(--accent); } .sug.info .sug-head .ttl::before { background: var(--accent); } .footer { text-align: center; color: var(--sub); font-size: 11px; margin-top: 18px; } @media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } /* （原本这里要把 .side-pin 的 sticky 在窄屏解掉；2026-08-10 起它在桌面就已经是 static， 这条成了重复声明，删掉免得后来人以为桌面默认还是 sticky。） */ } @media (max-width: 720px) { /* iOS focus 时不再 zoom-in：所有「文本/数字/日期」输入字段字号 ≥ 16px 不包括 select（toolbar 下拉会比同行按钮大一截，且 select picker 是模态弹层 而不是粘性 zoom，影响小） */ /* viewport meta 已 user-scalable=no, 16px hack 多余 + 让 input 视觉跟周围字号不一致 */ input[type="text"], input[type="number"], input[type="date"], .rec-form input[type="text"], .rec-form input[type="number"], textarea { font-size: 14px; } /* rec-form 移动端布局全面重做 */ .rec-form .row { row-gap: 8px; } /* 所有 opt-btn：Apple HIG 最小触控目标 44px，居中对齐 */ .rec-form .opt-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: normal; text-align: center; font-size: 13px; padding: 9px 12px; border-radius: 10px; } /* timeframe：移动端回退 3 列 grid（桌面 4 列） */ .rec-form .row[data-section="timeframe"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rec-form .row[data-section="timeframe"] .opt-btn[data-value="400"] { grid-column: 1 / -1; } /* intent 已用 .strategy-card 卡片 + 内部 grid 处理， 不再需要 mobile 上的 flex 规则 */ /* 工具栏：移动端两行重排（去掉持仓 checkbox 后）— 行 1 [登记]+[切换组]+[⋯]；行 2 排序+标的 */ .pos-toolbar { flex-wrap: wrap; gap: 6px; align-items: stretch; } .pos-toolbar button, .pos-toolbar select { min-height: 36px; } /* 隐藏分隔符 / spacer / sel-count（mobile 不需要） */ .pos-toolbar .tb-sep, .pos-toolbar .tb-spacer, .pos-toolbar #sel-count { display: none; } /* 行 1（去掉持仓 checkbox 后收紧为 2 行）：登记 CTA 内容宽（不再撑满整行）+ 切换组 （隐藏已平仓 / 密度，删全选/全不选后仅剩 2 个）+ 数据下拉；靠 .tb-break（flex-basis:100% 的隐形断点）把排序 + 标的可靠压到行 2 —— flex-grow 元素不会自己换行，必须有 100% 断点。 */ .pos-toolbar .add-btn { flex: 0 0 auto; order: 1; } .pos-toolbar .tb-group-toggles { order: 2; flex: 0 1 auto; flex-basis: auto; display: flex; grid-template-columns: none; gap: 6px; } .pos-toolbar .tb-group-toggles button { padding: 7px 10px; font-size: 11px; min-height: 34px; justify-content: center; width: auto; flex: 0 0 auto; letter-spacing: -0.02em; } /* ⭐「数据」跟账户筛选同一行（congyang 2026-08-10 截图问「为什么数据 filter 不能跟 账户 filter 同行」）。原来它是 `order: 3 + margin-left: auto` —— 被钉在 `.tb-break` 那个硬断点**之前**，于是永远独占一行、还靠右孤零零一个，而它右边那一整条是空的。 改成 order 6（= 跟账户筛选同组），DOM 里账户就在它前面 → 自然并排。 margin-left 也要清掉，否则它被推到最右、和账户之间裂一条空白。 */ .pos-toolbar > .dropdown { order: 6; flex: 0 0 auto; margin-left: 0; } /* 隐形断点：把排序 + 标的可靠挤到行 2（高 0 不占视觉，等效 2 行） */ .pos-toolbar .tb-break { display: block !important; order: 4; flex-basis: 100%; width: 100%; height: 0; margin: 0; padding: 0; } /* 行 3：排序 + 标的 同一行（order 相同→按源序排，sort 先 ticker 后）。 排序选项最长（如「盈亏 % · 高→低」），给它更多份额一行放下；标的取剩余、 不再固定半宽留白（/filter-pick 方案 A · 2026-06-24）。 */ .pos-toolbar .tb-group-sort, .pos-toolbar .tb-group-ticker { order: 5; min-width: 0; gap: 6px; } /* ⚠️ flex-basis 用**百分比**不是 0（2026-08-10）：basis:0 的项永远「放得下」， 于是排序 / 标的 / 账户 / 数据 四个会全挤进同一行、各自被压成一小截。 百分比让换行由宽度真正决定：排序 42% + 标的 26% = 68% 占满第 2 行， 账户 42% 加不进去（68+42>100）→ 落到第 3 行，数据（内容宽 ~17%）跟着它同行。 这就是「数据和账户同行」的实现方式 —— 不靠再加一个硬断点，也不用改 DOM。 */ .pos-toolbar .tb-group-sort { flex: 1.7 1 42%; } .pos-toolbar .tb-group-ticker { flex: 1 1 26%; } /* select 被 app.dd.js 接管成玻璃 .dd → 让 .dd 撑满该组、按钮占满、长选项 nowrap+省略 */ .pos-toolbar .tb-group-sort .dd, .pos-toolbar .tb-group-ticker .dd { flex: 1; min-width: 0; } .pos-toolbar .tb-group-sort .dd-btn, .pos-toolbar .tb-group-ticker .dd-btn { width: 100%; justify-content: space-between; font-size: 11.5px; } .pos-toolbar .tb-group-sort .dd-val, .pos-toolbar .tb-group-ticker .dd-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* select 已 display:none（被接管），保留旧字号声明无害；不接管时回退仍有效 */ .pos-toolbar .tb-group-sort select, .pos-toolbar .tb-group-ticker select { flex: 1; min-width: 0; font-size: 11.5px; } /* 行 4（I14 S3-1 多账户 · 仅在有账户归属持仓时显示）：账户筛选独占一行全宽。 不加 order 会落到 flex order 0 = 跳到登记按钮前面 → 必须排在 sort/ticker(5) 之后 */ /* ⚠️ 曾经是 `flex: 1 1 100%`（独占整行）—— 那正是「数据挤不进来」的另一半原因。 改 42%：与排序 42% + 标的 26% 加不到一行里 → 自己起一行，但**留得下右边的「数据」**。 flex-grow 保 1 → 那一行的富余归它，不会在中间裂一条空白。 */ .pos-toolbar .tb-group-account { order: 6; min-width: 0; gap: 6px; flex: 1 1 42%; } .pos-toolbar .tb-group-account .dd { flex: 1; min-width: 0; } .pos-toolbar .tb-group-account .dd-btn { width: 100%; justify-content: space-between; font-size: 11.5px; } .pos-toolbar .tb-group-account .dd-val { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-toolbar .tb-group-account select { flex: 1; min-width: 0; font-size: 11.5px; } /* lbl-full / lbl-short 切换：移动端用短版 */ .pos-toolbar .lbl-full { display: none; } .pos-toolbar .lbl-short { display: inline; } /* 持仓副标：mobile 减字号 + 折不下就 ellipsis（防极端长 ticker） */ .pos-meta, .pos-meta-simple { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* flex/grid 子项 min-width:auto = nowrap 内容的 min-content（标的价加长后 ~420px）， 会把整张卡撑过视口 → 手机横向可滑。min-width:0 让 ellipsis 真正生效、卡片不溢出。 */ min-width: 0; max-width: 100%; } /* 持仓卡 Greeks 行：mobile 在窄的 pos-body-right 栏（~165px）里用 2 列 grid，5 项分 3 行 2 列对齐；简洁模式藏 Mark/$P 剩 3 项 = 2 行 */ .pos-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; font-size: 10px; } .pos-stats .stat { min-width: 0; } .pos-stats .stat strong { gap: 2px; } .pos-stats .src-dot { width: 4px; height: 4px; } /* pos-extras：mobile 单列，每行 button 占满，文案完整不折 */ .pos-extras { /* 2 列与标准短仓卡的「第一行 损益曲线 + 我该怎么办?」保持一致； strangle 卡的 coach 自带 grid-column:1/-1 不受影响 */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .summary { padding: 14px 12px 10px; } .summary .sum-big { gap: 4px; } .summary .sum-big .item { padding: 4px 8px; } .summary .sum-big .item:first-child { padding-left: 0; } .summary .sum-big .item .val { font-size: 19px; } .summary .item .lab { font-size: 9.5px; } .summary .sum-sub .item .val { font-size: 12px; } /* minmax(0,1fr) — 不是 1fr：1fr ≡ minmax(auto,1fr)，auto 等于 min-content； 而 .pos-status (flex-shrink:0 + nowrap) 等不可压缩 chip 拼起来会把卡片 min-content 撑到 ~315px+，超过手机 grid 容器宽度 (~296px)，导致卡片整体往右溢出几十 px。 显式 0 floor 允许 track 收到容器宽。 */ .pos-grid { --pos-cols: minmax(0, 1fr); } .tickers { flex-direction: column; } /* 侧边 0：左右留白只由 body 的 14px 提供，避免 wrap 再叠 12px → 持仓页内容对齐其它 tab。 (上 12 / 下 32 保留，跟 header 间距 + 底部 nav 留白) */ .wrap { padding: 12px 0 32px; } /* ─── Header 压缩（B 左对齐单行）─── */ /* 移动端同样单行：品牌左 / 工具组右；行内标语隐藏，登录态徽章收成头像（保留未登录「登录」CTA） */ .header { gap: 8px; margin-bottom: 18px; padding: 4px 0 2px; } .header h1 { font-size: 18px; } .header h1 .brand-link { gap: 6px; } .header .brand-tag { display: none; } .header .header-right { gap: 5px; } /* 手机端也显示头像全名（金币徽章下线后 header 腾出空间 · congyang 2026-07-06）： 原「.user-badge.signed-in .name { display:none }」在移动端隐藏名字，现放开显示， 靠 name 的 max-width + 省略号兜底控制超长名。 */ .theme-toggle { width: 30px; height: 30px; font-size: 12px; } .theme-toggle svg.ico { width: 14px; height: 14px; } .user-badge { padding: 0 9px; height: 30px; max-width: 220px; font-size: 11px; } .user-badge .name { max-width: 168px; font-size: 11px; } /* gold 用户 badge 有宝石头像 + 金渐变粗体名，稍加宽给足空间；超长仍省略号兜底 */ .user-badge.gold-tier { max-width: 240px; } .user-badge.gold-tier .name { max-width: 168px; } /* 未登录「登录 / 注册」窄屏防溢出：≤720px 只留短版「登录」 */ .user-badge.signed-out .name-full { display: none; } .user-badge.signed-out .name-short { display: inline; } .coin-badge { padding: 0 9px 0 8px; height: 30px; font-size: 11px; } .coin-badge .coin-icon { font-size: 12px; } .admin-badge { width: 30px; height: 30px; } .admin-badge svg { width: 14px; height: 14px; } .lang-selector { height: 30px; border-radius: 999px; } .lang-selector button { padding: 0 9px; min-width: 30px; font-size: 12px; height: 24px; border-radius: 999px; } /* card 内 padding 全员缩 */ .card { padding: 16px 14px; } .rec-card { padding: 12px !important; } .rec-cards { gap: 8px !important; } /* 推荐结果 metrics grid → 3 列 2 行（省一整行高度）*/ .rec-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin-bottom: 8px !important; } .kmet { padding: 5px 6px !important; border-radius: 5px !important; } .kmet-l { font-size: 9px !important; margin-bottom: 1px !important; } .kmet-v { font-size: 13px !important; } .kmet-sub { font-size: 8.5px !important; line-height: 1.25 !important; } .kmet-help { width: 11px !important; height: 11px !important; font-size: 8.5px !important; } /* 手机端 popover 收窄 — JS clamp 兜底位置 */ .kmet-pop { width: min(220px, calc(100vw - 32px)) !important; font-size: 10.5px !important; } /* 推荐卡 head: rank+title 左，actions 竖排右，不换行 */ .rec-head { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 8px !important; margin-bottom: 6px !important; } /* 双腿卡（双边收租/Collar）标题更长：head 放开换行，星标/现价落第二行（防「标准领口」badge 竖排） rec-title basis 0% 永远“装得下”不触发 wrap → 用 min-width 占满首行（44px = rank ~28 + gap 8 + 余量）强制换行 */ .strangle-pair-card .rec-head { flex-wrap: wrap !important; } .strangle-pair-card .rec-head .rec-title { min-width: calc(100% - 44px); } .strangle-pair-card .rec-spot { white-space: nowrap; } .rec-actions { flex-direction: column !important; flex-wrap: nowrap !important; gap: 4px !important; } .rec-card .add-btn, .rec-actions .preview-btn { flex: unset !important; padding: 6px 10px !important; font-size: 11px !important; white-space: nowrap !important; min-height: 30px !important; } .rec-actions .preview-btn { text-align: center !important; } .rec-contract { gap: 4px; flex-wrap: wrap; } .rec-contract .rec-exp { font-size: 10.5px !important; margin-left: 0 !important; } .rec-head .rec-rank { margin-top: 3px !important; } /* 一句话评价：tighter */ .rec-oneline { padding: 6px 10px !important; font-size: 11.5px !important; line-height: 1.4 !important; margin-bottom: 8px !important; } /* 对比胶囊：compact（在 rec-actions 列内，与 preview-btn 同款尺寸） */ .rec-actions .rec-compare-check { padding: 4px 9px !important; font-size: 11px !important; gap: 5px !important; min-height: 30px !important; } .rec-compare-check::before { width: 14px !important; height: 14px !important; } /* algo-badge：紧凑，减少结果区顶部空白 */ .algo-badge { padding: 7px 10px !important; gap: 8px !important; margin-bottom: 8px !important; font-size: 11px !important; } .algo-badge .algo-tag { font-size: 10px !important; } /* iv-banner：缩 */ .iv-banner { padding: 10px 12px !important; margin: 8px 0 !important; } .iv-rank-bar { margin-bottom: 6px !important; } .iv-text { font-size: 11px !important; line-height: 1.4 !important; } /* disclaimer：缩 */ .disclaimer { padding: 6px 10px !important; font-size: 10.5px !important; margin: 8px 0 !important; } /* tier-filter：缩 */ .tier-filter { margin: 10px 0 8px !important; gap: 6px !important; } .tier-filter .tf-pill { padding: 4px 10px !important; font-size: 11px !important; } /* rec-result summary 文字行 */ .rec-result .summary { font-size: 11px !important; margin-bottom: 6px !important; } /* 推荐表单 grid 收成单列 */ .rec-form .rf-grid { grid-template-columns: minmax(0, 1fr) !important; } /* fullstat 行：手机上换行，别拉横向滚 */ .rec-fullstat { font-size: 10.5px !important; line-height: 1.7 !important; word-spacing: -1px; } /* 持仓卡 actions：平仓 占整行（primary CTA 突出），Roll/编辑/删除 共享下一行 */ .pos-actions { flex-wrap: wrap; gap: 6px; } .pos-actions .primary { flex: 1 1 100%; padding: 8px 18px; font-size: 12px; } .pos-actions .ghost { flex: 1 1 calc(33% - 4px); min-width: 0; font-size: 11px; text-align: center; padding: 6px 8px; } .pos-actions .del-btn { margin-left: 0; } /* 标准短仓卡 (--merged) 手机双排：第一行 损益曲线 + 我该怎么办?（各半宽）， 第二行 平仓 / Roll / 编辑 / 删除（各 1/4）。用 order 重排（markup 顺序不变， 桌面仍一行）。须排在上面通用 .pos-actions 移动规则之后才能 override（同特异度靠源序）。 */ .pos-actions--merged .payoff-toggle { order: 1; flex: 1 1 calc(50% - 4px); min-width: 0; } .pos-actions--merged .coach-btn { order: 2; flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; font-size: 11px; } .pos-actions--merged .primary { order: 3; flex: 1 1 calc(25% - 6px); min-width: 0; padding: 8px 6px; } .pos-actions--merged .roll-btn { order: 4; flex: 1 1 calc(25% - 6px); min-width: 0; } .pos-actions--merged .edit-btn { order: 5; flex: 1 1 calc(25% - 6px); min-width: 0; } .pos-actions--merged .del-btn { order: 6; flex: 1 1 calc(25% - 6px); min-width: 0; margin-left: 0; } /* 损益曲线图表是 .pos-actions 之后的独立全宽抽屉（.payoff-drawer），按钮原地不动、图表从下方撑开 */ /* pros/cons 改单列 */ .rec-proscons { grid-template-columns: minmax(0, 1fr) !important; } .rec-proscons ul { font-size: 11.5px !important; } /* 详情区拉满 modal 上下边 */ .rec-form, .rec-form.modal { border-radius: 16px 16px 0 0 !important; width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; max-height: 92vh !important; padding: 16px 14px 0 !important; /* submit-row 自带 padding 紧贴底 */ margin: 0 !important; } /* 手机上 submit-row 负 margin 对齐 14px 内边距 */ .rec-form .submit-row { margin: 18px -14px 0 !important; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; border-radius: 0 !important; } /* 提交行（取消 / 找最佳合约）右缘对齐表单字段：full-bleed -14 + 内边距 14（手机 content 也是 14）。 第二选择器特异性 = is-tab-page 那条(6802)，靠源序压过它的 margin:0 → tab-page（推荐 tab）也对齐。*/ .rec-form .submit-row, body.is-tab-page .rec-form .submit-row { margin-left: -14px !important; margin-right: -14px !important; padding-left: 14px !important; padding-right: 14px !important; } /* review-modal / edit modal / journal modal 一同 bottom-sheet 化 */ .review-modal { border-radius: 16px 16px 0 0 !important; width: 100% !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; max-height: 92vh !important; padding: 18px 14px 60px !important; } /* bottom-sheet 顶部小拖把 */ .rec-form.modal::before, .review-modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 14px; } /* PWA / mobile nav (非 is-tab-page): coach / assigned / journal 这类从持仓 tab 触发的 .review-modal bottom-sheet, 默认 bottom:0 会被底部 nav bar (~72px + safe-area) 截住, 底部按钮 (生成方案 / 平仓 / 返回 等) 看不到点不到 → 上抬到 nav bar 之上 + overscroll-behavior:contain 防触底回弹滚动穿透到下层持仓页。 (沿用 account-modal pattern @9268 + §12 PWA modal 铁律; review-modal 本身是 tab-page 走 is-tab-page 全屏规则, 故这里按 id 只点名持仓 tab 的三个二级 modal) */ body.nav-enabled #coach-modal, body.nav-enabled #assigned-modal, body.nav-enabled #journal-modal { bottom: var(--nav-clearance) !important; max-height: calc(92vh - var(--nav-clearance)) !important; max-height: calc(92dvh - var(--nav-clearance)) !important; padding-bottom: 24px !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* PWA / mobile nav (非 is-tab-page)：rec-form 从持仓 tab 触发（如持仓卡点 Roll）时是 bottom:0 的 bottom-sheet，底部约一个 nav 的高被底部 nav bar 截住 →「找最佳合约」按钮 + 候选列表底部看不到点不到（2026-06-16 用户截图）。上抬到 nav bar 之上（§12 铁律第 3 条， 沿用 open-pos / coach pattern）。推荐 tab 自身 (is-tab-page) 走全屏规则、已自带 --nav-clearance，故 :not(.is-tab-page) 排除掉、不重复上抬。 */ body.nav-enabled:not(.is-tab-page) #rec-form.rec-form.modal { bottom: var(--nav-clearance) !important; max-height: calc(92vh - var(--nav-clearance)) !important; max-height: calc(92dvh - var(--nav-clearance)) !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* 上抬后 submit-row 不再贴视口底，去掉给 home 指示条留的 safe-area 双留白 */ body.nav-enabled:not(.is-tab-page) #rec-form.rec-form.modal .submit-row { padding-bottom: 16px !important; } /* 让 rec-form modal 内部的 grid 折成单列 */ .rec-form .rf-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } } /* ══ Fold 展开 / 小平板 (600–720px)：恢复宽屏密度 ══ 这个中间宽度此前掉进 ≤720 移动规则（hero 2 列 / 持仓 1 列 / 工具栏 3 行）， 横向空间全浪费。下面只在 600–720 覆盖那几条，桌面 (>720) 与小手机 (<600) 不受影响。 必须排在上面 @media (max-width:720px) 之后才能 override。 */ @media (min-width: 600px) and (max-width: 720px) { /* ① Summary hero：hint→ⓘ 弹出已升级为全宽度统一基础行为，这里只调字号 */ .summary { padding: 16px 14px 10px; } .summary .sum-big .item { padding: 6px 8px; } .summary .sum-big .item:first-child { padding-left: 0; } .summary .sum-big .item .val { font-size: 20px; } .summary .item .sum-lab { margin-bottom: 7px; } /* ② 工具栏：撤销移动端三行重排，恢复单行（不足时 flex-wrap 优雅折行，不溢出） */ .pos-toolbar { flex-wrap: wrap; align-items: center; } .pos-toolbar .tb-sep { display: inline-block; align-self: stretch; } .pos-toolbar .tb-spacer { display: block; } .pos-toolbar .add-btn { flex: 0 0 auto; order: 0; } .pos-toolbar .tb-break { display: none !important; } .pos-toolbar .tb-group-toggles { order: 0; flex-basis: auto; display: flex; gap: 6px; grid-template-columns: none; } .pos-toolbar .tb-group-toggles button { width: auto; flex: 0 0 auto; padding: 7px 10px; } .pos-toolbar .tb-group-sort, .pos-toolbar .tb-group-ticker { order: 0; flex: 0 0 auto; } /* ⭐ 这两条是「撤销移动端重排」漏掉的两半（congyang 2026-08-10 实拍：Fold 展开下工具栏 第 2 行只有一个右对齐的「数据」、第 3 行整行只放一个账户筛选，两行大半是空的）。 上面把 add-btn / toggles / sort / ticker 都拉回 order:0 了，但 ≤720 那块还给 「数据」下拉留着 order:3 + margin-left:auto、给账户筛选留着 order:6 + flex:1 1 100% —— 于是这两个控件被踢到所有 order:0 之后、各自独占一行（账户那条还撑满宽）。 本范围是 content-sized 单行布局 → 一并拉回 order:0 + 内容宽，跟其它筛选一起自然折行。 ⚠️ 改 ≤720 那块里这两条的 order/flex 时，记得同步这里，否则又会各自飞出去一行。 */ .pos-toolbar > .dropdown { order: 0; margin-left: 0; } .pos-toolbar .tb-group-account { order: 0; flex: 0 0 auto; } .pos-toolbar .tb-group-account .dd, .pos-toolbar .tb-group-account select { flex: 0 0 auto; } .pos-toolbar .tb-group-account .dd-btn { width: auto; justify-content: center; } .pos-toolbar .tb-group-sort select, .pos-toolbar .tb-group-ticker select { flex: 0 0 auto; min-width: 0; } /* 撤销 ≤720 窄屏行 3 的撑满（本范围是单行 content-sized 布局，方案 A 不适用） */ .pos-toolbar .tb-group-sort .dd, .pos-toolbar .tb-group-ticker .dd { flex: 0 0 auto; } .pos-toolbar .tb-group-sort .dd-btn, .pos-toolbar .tb-group-ticker .dd-btn { width: auto; justify-content: center; } .pos-toolbar .tb-group-sort .dd-val, .pos-toolbar .tb-group-ticker .dd-val { white-space: nowrap; } /* ③ 持仓卡：一排 2 张（撤销 ≤720 强制单列）。不设 align-items:start — 默认 stretch 让同排两卡等高 + .pos-actions{margin-top:auto} 把操作行钉到底部对齐， 否则两卡内容高度不同会出现「按钮/分区错位」(用户反馈的对齐问题)。 */ .pos-grid { --pos-cols: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } } @media (max-width: 480px) { .header h1 { font-size: 16px; } .summary .sum-big .item .val { font-size: 17px; } .pos-actions button { font-size: 10.5px; padding: 6px 4px; } /* 窄屏 ≤480px：右侧 cluster 4 个 chip 容易拥挤，缩一缩 */ .header .header-right { gap: 4px; } .user-badge { max-width: 152px; padding: 0 8px; font-size: 10.5px; } .user-badge .name { max-width: 110px; font-size: 10.5px; } /* gold 用户 badge 有宝石头像 + 金渐变粗体名，窄屏也给足空间；超长仍省略号兜底 */ .user-badge.gold-tier { max-width: 178px; } .user-badge.gold-tier .name { max-width: 120px; } .user-badge .user-avatar { width: 20px; height: 20px; } .user-badge .icon { font-size: 11px; } .coin-badge { padding: 0 8px 0 7px; font-size: 10.5px; } .coin-badge .coin-icon { font-size: 11px; } .admin-badge { width: 30px; height: 30px; } .admin-badge svg { width: 13px; height: 13px; } .lang-selector button { padding: 0 7px; min-width: 27px; font-size: 11.5px; } .theme-toggle { width: 28px; height: 28px; font-size: 11px; } .theme-toggle svg.ico { width: 13px; height: 13px; } } /* ─── 账户设置 modal ─── */ /* backdrop 浮在 rec-form 上层 */ #account-backdrop { z-index: 1099 !important; } /* 推荐表单顶部账户状态薄行 */ .rec-acct-hint { font-size: 12px; line-height: 1.5; color: var(--sub); padding: 8px 12px; background: rgba(91,124,245,0.05); border: 1px solid rgba(91,124,245,0.20); border-radius: 8px; margin: -4px 0 14px; } .rec-acct-hint:empty { display: none; } .rec-acct-hint a { color: var(--accent); text-decoration: none; } .rec-acct-hint a:hover { text-decoration: underline; } /* ⭐ 「照 @作者 的思路」预填上下文条（社区「用这个思路找」进来时 · _recRenderAdoptCtx）。 准玻璃口径：accent 浅染底 + 描边、零 blur（DESIGN.md：blur 只给 chrome）。 */ .rec-adopt-ctx { padding: 10px 12px; margin: -2px 0 12px; background: rgba(91,124,245,0.07); border: 1px solid rgba(91,124,245,0.26); border-radius: 10px; } .rec-adopt-ctx[hidden], .rec-adopt-ctx:empty { display: none !important; } .rec-adopt-ctx .rac-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .rec-adopt-ctx .rac-ic { width: 15px; height: 15px; color: var(--accent); flex: none; } .rec-adopt-ctx .rac-lead { font-size: 12.5px; font-weight: 600; color: var(--text); } .rec-adopt-ctx .rac-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rec-adopt-ctx .rac-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: rgba(91,124,245,0.10); border: 1px solid rgba(91,124,245,0.20); color: var(--text); font-variant-numeric: tabular-nums; } .rec-adopt-ctx .rac-chip.rac-tk { font-weight: 700; color: var(--accent); letter-spacing: 0.02em; } .rec-adopt-ctx .rac-chip.rac-dr svg.ico { width: 11px; height: 11px; } .rec-adopt-ctx .rac-x { margin-left: auto; flex: none; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--sub); font-size: 18px; line-height: 1; border-radius: 6px; } .rec-adopt-ctx .rac-x:hover { color: var(--text); background: rgba(91,124,245,0.10); } .rec-adopt-ctx .rac-sub { font-size: 11px; color: var(--sub); margin-top: 5px; line-height: 1.45; } .rec-adopt-ctx .rac-note { font-size: 11px; color: var(--amber); margin-top: 5px; line-height: 1.45; } /* v2 redesign: ctx-strip 包 acct-hint + regime-banner desktop 横向并排 */ .rec-form .rec-ctx-strip { display: flex; gap: 8px; margin: -4px 0 12px; align-items: stretch; } .rec-form .rec-ctx-strip > * { flex: 1; margin: 0 !important; min-width: 0; } .rec-form .rec-ctx-strip > [hidden] { display: none !important; } .rec-form .rec-ctx-strip:has(> :only-child:not([hidden])) > * { /* 单 child 时仍占满 */ } @media (max-width: 640px) { .rec-form .rec-ctx-strip { flex-direction: column; gap: 6px; } } /* 市场 regime banner · SPY 200d MA · 仅当 |trend| ≥ 5% 时显示 */ .rec-regime-banner { font-size: 12px; line-height: 1.5; color: var(--sub); padding: 8px 12px; border-radius: 8px; margin: -4px 0 14px; border: 1px solid; } .rec-regime-banner .rb-icon { margin-right: 4px; } .rec-regime-banner .rb-num { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .rec-regime-banner .rb-tag { font-weight: 700; } .rec-regime-banner .rb-tip { display: block; margin-top: 2px; opacity: 0.8; font-size: 11px; } .rec-regime-banner.bull { background: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.22); } .rec-regime-banner.bull .rb-tag { color: #4ade80; } .rec-regime-banner.bear { background: rgba(245,176,66,0.06); border-color: rgba(245,176,66,0.25); } .rec-regime-banner.bear .rb-tag { color: var(--accent); } /* 账户设置 modal (V1: rail + detail · settings page pattern) */ .account-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1100; width: min(1000px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 40px)); max-height: min(720px, calc(100dvh - 40px)); background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; padding: 0; overflow: hidden; display: none; flex-direction: column; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 80px rgba(0,0,0,0.55), 0 4px 24px rgba(0,0,0,0.3); } .account-modal.show { display: flex; } /* Header — hero 标题 + 副标 inline */ .account-modal .am-header { padding: 24px 28px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .account-modal .am-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .account-modal .am-title { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; } .account-modal .am-subtitle { font-size: 12.5px; color: var(--sub); margin-top: 5px; line-height: 1.5; max-width: 380px; } .account-modal .am-close { background: none; border: none; cursor: pointer; color: var(--sub); font-size: 22px; padding: 2px 6px; border-radius: 6px; line-height: 1; margin: -2px -4px 0 0; flex-shrink: 0; } .account-modal .am-close:hover { color: var(--text); background: var(--card2); transform: none; } /* Body — V1 grid: 290px rail + 1fr detail (desktop), 单列 (mobile) */ .account-modal .am-body { flex: 1; overflow: hidden; padding: 0; display: grid; grid-template-columns: 290px 1fr; min-height: 0; } /* ── Rail (left sidebar) ─────────────────────────────────────────────── */ .account-modal .am-rail { background: rgba(255,255,255,0.02); border-right: 1px solid var(--line); padding: 14px 10px 18px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; min-height: 0; } .account-modal .am-rail-header { font-size: 10px; font-weight: 700; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px 4px; } .account-modal .am-rail-header:not(:first-child) { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .account-modal .am-rail-item { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px 8px 12px; text-align: left; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; color: inherit; font-family: inherit; transition: background 0.12s, border-color 0.12s; width: 100%; box-sizing: border-box; } .account-modal .am-rail-item:hover { background: var(--card2); } .account-modal .am-rail-item.active { background: var(--accent-tint); border-color: var(--accent-tint-strong); } .account-modal .am-rail-item .ri-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .account-modal .am-rail-item .ri-line1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .account-modal .am-rail-item .ri-line1 .num { flex-shrink: 0; } .account-modal .am-rail-item .ri-line1 .ri-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* tier chip — cash / L2 / L3+ 视觉阶梯, 统一宽度对齐右边 */ .account-modal .am-rail-item .ri-type-chip { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; font-family: var(--font-num); letter-spacing: 0.04em; line-height: 1.3; white-space: nowrap; border: 1px solid; background: transparent; flex-shrink: 0; justify-self: end; min-width: 42px; text-align: center; box-sizing: border-box; } .account-modal .am-rail-item .ri-type-chip.tier-cash { color: var(--sub); border-color: var(--line-2); } .account-modal .am-rail-item .ri-type-chip.tier-l2 { color: var(--accent); border-color: var(--accent-tint-strong); } .account-modal .am-rail-item .ri-type-chip.tier-l3 { color: var(--bg); border-color: var(--accent); background: var(--accent); } .account-modal .am-rail-item.with-icon { display: flex; flex-direction: row; align-items: center; gap: 10px; } .account-modal .am-rail-item.with-icon .info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .account-modal .am-rail-item .num { font-size: 9.5px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; font-family: var(--font-num); } .account-modal .am-rail-item .ri-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-modal .am-rail-item.with-icon .ri-name { font-size: 12.5px; } .account-modal .am-rail-item .ri-meta { font-size: 10.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; } .account-modal .am-rail-item .ri-meta .dot { color: var(--dim); margin: 0 3px; } .account-modal .am-rail-item .label-ico { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .account-modal .am-rail-item .label-ico svg { width: 14px; height: 14px; } .account-modal .am-add-account-rail { background: transparent; border: 1px dashed var(--line-2); color: var(--sub); border-radius: 8px; padding: 7px 12px; font-size: 12px; cursor: pointer; margin-top: 4px; font-family: inherit; transition: border-color 0.12s, color 0.12s; width: 100%; box-sizing: border-box; } .account-modal .am-add-account-rail:hover { border-color: var(--accent); color: var(--accent); } /* ── Detail (right pane) ─────────────────────────────────────────────── */ .account-modal .am-detail { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 24px 6px; min-height: 0; } /* 默认隐藏所有 detail section, JS 通过 .is-active 切显示 */ .account-modal .am-detail [data-detail-section] { display: none; } .account-modal .am-detail [data-detail-section].is-active { display: block; } /* mobile 的 add-account fallback 默认在 desktop 隐藏 */ .account-modal .am-add-account-inline { display: none; } /* 账户卡片 — V1 detail pane 内，去边线 */ .account-modal .am-account-card { padding: 0; background: transparent; border-radius: 0; margin-bottom: 0; border-bottom: none; position: relative; } .account-modal .am-account-card:first-of-type { padding-top: 0; } .account-modal .am-acard-head { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; } .account-modal .am-acct-num { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; font-family: var(--font-num); } /* ⭐ 账户名 = 正经 well 输入框（congyang 2026-08-10 拍板 B「补全 well 材质」， 跟下面「现金 / 可用 BP」完全同一种材质 —— 一眼看出能改）。 ⚠️ 这里**故意不写 background / border / border-radius / box-shadow** —— 让上面那条通用 well 规则（`.account-modal input`，见 §「输入/文本域 → 凹面 well」） 整份生效。这条以前写的是 `background: transparent; border: none` 却**没同时归零 圆角和内阴影** → 剩一个「没有底、没有边，只有一圈凹陷阴影」的幽灵框，而 padding 是 `4px 0` → 名字正好贴在幽灵框的左内壁上（congyang 真机报「UI 怪怪的，是因为左侧没有 设置 margin 吗」）。这跟 2026-06-11「框中框」那轮是同一个坑：旁边 `.am-input-wrap` / `.sr-box` 当时补齐了四件套（底色+边框+圆角+阴影全归零），唯独账户名漏了。 👉 **教训：要么四件套全归零、要么一件都别动。只盖一半必出幽灵框。** 高度 34px 与右边券商下拉 / 下面 $ 输入框对齐（padding 5+5 + 16px 行高 + 2px 边框）。 */ .account-modal .am-acard-name { flex: 1; min-width: 0; color: var(--text); font-size: 16px; font-weight: 600; padding: 5px 12px; min-height: 34px; outline: none; letter-spacing: -0.01em; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .account-modal .am-acard-name::placeholder { color: var(--dim); font-weight: 500; } /* 聚焦态沿用 `.am-input-wrap:focus-within` 那套（金边 + 外扩柔光），别另发明一种 */ .account-modal .am-acard-name:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3.5px rgba(var(--accent-rgb), 0.20); } .account-modal .am-acard-broker { background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 0 28px 0 10px; font-size: 12px; font-family: inherit; cursor: pointer; min-width: 140px; height: 34px; /* 跟 type seg-btn + input-wrap 同高 (34px) 视觉对齐 */ } .account-modal .am-acard-broker:focus { border-color: var(--accent); outline: none; } /* 删除账户 — danger zone 在 card 底部 (Stripe/Linear 通用 pattern) */ .account-modal .am-acard-danger { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; } .account-modal .am-acard-del-link { background: transparent; border: none; color: var(--sub); font-size: 11.5px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; transition: color 0.12s, background 0.12s; } .account-modal .am-acard-del-link:hover { color: var(--red); background: rgba(248,113,113,0.08); } .account-modal .am-acard-del-link .ico { width: 12.5px; height: 12.5px; } /* 字段行 — grid 56px label + 1fr input */ .account-modal .am-acard-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 12px; } .account-modal .am-acard-row.stack { align-items: flex-start; } .account-modal .am-mini-label { font-size: 10.5px; color: var(--dim); font-weight: 500; text-transform: none; letter-spacing: 0.02em; min-width: 0; } .account-modal .am-mini-label.top { margin-top: 8px; } /* 类型 ⓘ 退休账户提示（复用 show-tip 点按浮层 pattern · §5 outside-click/Esc 全局收起已覆盖） */ .account-modal .am-type-row { position: relative; } .account-modal .am-mini-label.has-tip { display: inline-flex; align-items: center; gap: 4px; } .account-modal .am-mini-i { display: inline-flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; line-height: 1; cursor: pointer; flex: 0 0 auto; user-select: none; transition: color var(--dur-quick) var(--ease-out); } .account-modal .am-mini-i:hover { color: var(--accent); } .account-modal .am-type-tip { display: none; } .account-modal .am-type-row.show-tip .am-type-tip { display: block; position: absolute; left: 0; top: calc(100% + 2px); z-index: 30; width: max-content; max-width: 260px; text-align: left; padding: 9px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); font-size: 11.5px; color: var(--sub); line-height: 1.55; font-weight: 400; } .account-modal .am-acard-stocks { display: flex; flex-direction: column; gap: 6px; } /* type segmented — 3 button 等宽 + 等高 34px */ .account-modal .am-seg { display: flex; gap: 6px; grid-column: 2; } .account-modal .am-seg-3 { grid-column: 2; } .account-modal .am-seg-mini .am-seg-btn { padding: 7px 4px; font-size: 11.5px; } .account-modal .am-seg-btn { flex: 1; text-align: center; background: var(--card2); border: 1px solid var(--line); color: var(--sub); border-radius: 7px; padding: 7px 4px; font-size: 11.5px; font-weight: 500; cursor: pointer; font-family: inherit; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1.15; transition: border-color 0.15s, background 0.15s, color 0.15s; } .account-modal .am-seg-btn .ico { width: 13px; height: 13px; flex-shrink: 0; } .account-modal .am-seg-btn:hover { border-color: var(--accent); color: var(--text); } .account-modal .am-seg-btn.active { background: var(--accent); color: #0A0A0B; border-color: var(--accent); font-weight: 600; } /* 保证金 input */ .account-modal .am-input-wrap { display: flex; align-items: center; background: var(--card2); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; height: 34px; transition: border-color 0.15s; } .account-modal .am-input-wrap:focus-within { border-color: var(--accent-soft); } .account-modal .am-currency { padding: 0 10px; color: var(--sub); font-size: 12.5px; font-family: inherit; font-weight: 500; user-select: none; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; } .account-modal .am-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); padding: 0 10px; font-size: 13.5px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; } /* paired fields (现金 + 可用 BP 并排) */ .account-modal .am-pair-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .account-modal .am-pair-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .account-modal .am-pair-label { font-size: 10.5px; color: var(--dim); font-weight: 500; letter-spacing: 0.02em; } /* 现金 / 可用 BP 下方一行说明（填一个就行 · 防重复填） ⚠️ am-acard-row 是 2 列 grid（56px 标签 + 1fr）；hint 是第 3 个子 → 不指定列会被自动塞进 第 2 行第 1 列（56px 标签槽）→ 文字挤成一窄条。grid-column:2 钉到内容列、对齐输入框下方。 */ .account-modal .am-pair-hint { grid-column: 2; margin-top: 6px; font-size: 10.5px; color: var(--dim); line-height: 1.5; font-weight: 400; } /* 正股行 — 列头副标题 + 均衡 grid + .sr-box 包裹 (含 avg_cost) */ .stock-head, .stock-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.5fr) 24px; gap: 8px; align-items: center; } .stock-head { margin-bottom: 5px; } .stock-head span { font-size: 10.5px; color: var(--dim); font-weight: 500; letter-spacing: 0.02em; padding-left: 2px; min-width: 0; } .stock-row .sr-box { display: flex; align-items: center; min-width: 0; height: 34px; overflow: hidden; background: var(--card2); border: 1px solid var(--line); border-radius: 7px; transition: border-color 0.15s; } .stock-row .sr-box:focus-within { border-color: var(--accent-soft); } .stock-row .sr-box .sr-pre { padding: 0 9px; color: var(--sub); font-size: 12px; font-weight: 500; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; user-select: none; } .stock-row .sr-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); padding: 0 10px; font-size: 13px; font-family: inherit; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.005em; } .stock-row .rm-btn { background: transparent; border: none; color: var(--dim); font-size: 14px; width: 24px; height: 34px; cursor: pointer; border-radius: 6px; line-height: 1; } .stock-row .rm-btn:hover { background: rgba(248,113,113,0.10); color: var(--red); } /* 加正股 link 风 */ .add-stock-btn { margin-top: 2px; background: transparent; border: none; color: var(--sub); font-size: 11.5px; padding: 4px 0; width: auto; text-align: left; cursor: pointer; font-family: inherit; transition: color 0.15s; } .add-stock-btn:hover { color: var(--accent); background: transparent; border: none; transform: none; } /* 🏠 默认房东人设 (Step 1) */ .account-modal .am-persona-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .account-modal .am-persona-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .account-modal .am-persona-opt { background: var(--card2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 8px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: all 0.12s; color: var(--text); font-family: inherit; } .account-modal .am-persona-opt:hover { border-color: var(--accent-tint-strong); background: var(--card3); } .account-modal .am-persona-opt.active { background: var(--accent-tint); border-color: var(--accent-tint-strong); } .account-modal .am-persona-opt .ico { font-size: 18px; line-height: 1; } .account-modal .am-persona-opt .ttl { font-size: 12.5px; font-weight: 600; } .account-modal .am-persona-opt .sub { font-size: 10.5px; color: var(--sub); } @media (max-width: 600px) { .account-modal .am-persona-opts { grid-template-columns: minmax(0, 1fr); } .account-modal .am-persona-opt { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; text-align: left; padding: 9px 10px; } .account-modal .am-persona-opt .ico { grid-row: 1 / span 2; grid-column: 1; align-self: center; } .account-modal .am-persona-opt .ttl { grid-column: 2; grid-row: 1; } .account-modal .am-persona-opt .sub { grid-column: 2; grid-row: 2; } } /* 🎯 愿意接货清单 (v2 #4) */ .account-modal .am-willing-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .account-modal .am-section-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; } .account-modal .am-section-hint { font-size: 11.5px; color: var(--sub); margin-bottom: 12px; line-height: 1.5; } /* ── 🎩 追踪 KOL 面板（app.kol.js · 大佬动态 digest 名单自助管理）── */ .kol-status { font-size: 11.5px; color: var(--sub); margin: -4px 0 12px; display: flex; align-items: center; gap: 6px; line-height: 1.45; } .kol-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--dim); } .kol-status.ok::before { background: #16a34a; } .kol-status.warn { color: var(--accent); } .kol-status.warn::before { background: var(--accent); } /* 🔄 立即生成（仅 founder 可见 · 远程触发 GitHub Action） */ .kol-actions { margin: 0 0 12px; } .kol-actions:empty { display: none; } .kol-gen-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card2); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, opacity .15s ease; } .kol-gen-btn:hover { border-color: var(--accent); } .kol-gen-btn:disabled { opacity: .55; cursor: default; } .kol-gen-hint { font-size: 10.5px; color: var(--sub); margin-top: 5px; line-height: 1.4; } .kol-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .kol-empty { font-size: 12.5px; color: var(--sub); padding: 16px; text-align: center; background: var(--card2); border: 1px dashed var(--line-2); border-radius: 10px; } .kol-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line-2); border-radius: 10px; transition: opacity .15s ease; } .kol-row.off { opacity: .5; } .kol-cb { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); border: none; position: relative; cursor: pointer; margin: 0; transition: background .16s ease; } .kol-cb::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .16s ease; } .kol-cb:checked { background: var(--accent); } .kol-cb:checked::after { transform: translateX(16px); } .kol-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kol-handle { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kol-handle:hover { color: var(--accent); text-decoration: underline; } .kol-del { flex-shrink: 0; width: 26px; height: 26px; border: none; background: transparent; color: var(--dim); font-size: 19px; line-height: 1; cursor: pointer; border-radius: 7px; padding: 0; } .kol-del:hover { background: var(--bg); color: var(--red); } .kol-add { display: flex; gap: 8px; } .kol-input { flex: 1; min-width: 0; padding: 9px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 14px; } .kol-input:focus, .kol-input:focus-visible { outline: none; border-color: var(--accent); } .kol-add-btn { flex-shrink: 0; padding: 9px 16px; border: none; border-radius: 9px; background: var(--accent); color: #1a1205; font-weight: 700; font-size: 14px; cursor: pointer; transition: filter .15s ease; } .kol-add-btn:hover { filter: brightness(1.07); } /* 📬 邮件订阅 modal（头像菜单 → showSubscriptionsModal · 2026-06-07）*/ .app-modal .sub-hint { font-size: 12px; color: var(--sub); line-height: 1.5; margin-bottom: 6px; } .app-modal .sub-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); } .app-modal .sub-row:first-of-type { border-top: none; } /* 分组小标题（推送通知 / 邮件订阅 · 2026-08-08 加推送后这个 modal 变成两段）。 ⚠️ 第二个分组标题上面要有分隔，但 .sub-row:first-of-type 那条 reset 只对第一组生效 → 用 :not(:first-child) 给后续分组补上分隔线 + 更大的上间距。 */ .app-modal .sub-group-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--sub); text-transform: none; margin-bottom: 6px; } .app-modal .sub-group-label:not(:first-child) { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } /* 分组标题之后紧跟的第一行不要再画一条线（上面那条已经是分隔） */ .app-modal .sub-group-label + .sub-hint + .sub-row { border-top: none; } .app-modal .sub-switch.disabled, .app-modal .sub-switch:disabled { opacity: .45; cursor: not-allowed; } /* 「发一条测试」这类行内文字按钮。⚠️ 别用裸 ：浏览器默认蓝会直接撞出设计系统之外 （2026-08-08 congyang 实拍过一次蓝链接）。用 button 而不是 a 也省掉 href="#" 的跳顶副作用。 */ .app-modal .sub-linkbtn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-soft); } .app-modal .sub-linkbtn:hover { color: var(--accent-light); text-decoration-color: var(--accent); } .app-modal .sub-info { min-width: 0; } .app-modal .sub-title { font-size: 14px; font-weight: 600; color: var(--text); } .app-modal .sub-sub { font-size: 11.5px; color: var(--sub); margin-top: 3px; line-height: 1.45; } .app-modal .sub-switch { position: relative; width: 46px; height: 26px; border-radius: 999px; flex-shrink: 0; background: var(--line-2); border: none; cursor: pointer; padding: 0; transition: background var(--dur-quick, .15s) var(--ease-out, ease); } .app-modal .sub-switch.on { background: var(--green); } .app-modal .sub-switch .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left var(--dur-quick, .15s) var(--ease-out, ease); } .app-modal .sub-switch.on .knob { left: 23px; } .account-modal #am-willing-list { margin-bottom: 10px; } .account-modal .am-willing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--card2); border-radius: 6px; margin-bottom: 4px; font-size: 13px; } .account-modal .am-willing-ticker { font-weight: 700; font-family: var(--font-num); letter-spacing: 0.3px; } /* 共享 pill 样式 — row toggle 和 add 按钮视觉一致 */ .account-modal .am-willing-state, .account-modal .am-willing-add button { padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); background: var(--card3); color: var(--sub); font-weight: 600; line-height: 1.2; transition: all 0.12s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .account-modal .am-willing-state.on, .account-modal .am-willing-add button.add-on { background: rgba(52,211,153,0.15); color: var(--green); border-color: rgba(52,211,153,0.35); } .account-modal .am-willing-state.off, .account-modal .am-willing-add button.add-off { background: rgba(248,113,113,0.14); color: var(--red); border-color: rgba(248,113,113,0.35); } .account-modal .am-willing-state:hover, .account-modal .am-willing-add button:hover { filter: brightness(1.15); } .account-modal .am-willing-remove { color: var(--sub); cursor: pointer; padding: 4px 8px; background: transparent; border: none; font-size: 14px; line-height: 1; } .account-modal .am-willing-remove:hover { color: var(--red); } .account-modal .am-willing-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-top: 8px; align-items: stretch; } .account-modal .am-willing-add input { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--text); font-family: var(--font-num); text-transform: uppercase; line-height: 1.2; } .account-modal .am-willing-add input:focus { outline: none; border-color: var(--accent); } .account-modal .am-willing-empty { color: var(--sub); font-size: 12px; padding: 14px 10px; text-align: center; background: var(--card2); border-radius: 6px; font-style: italic; } /* 🚫 受限标的 (员工 trading window) */ .account-modal .am-restricted-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .account-modal #am-restricted-list { margin-bottom: 10px; } .account-modal .am-restricted-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--card2); border-radius: 6px; margin-bottom: 4px; font-size: 13px; } .account-modal .am-restricted-ticker { font-weight: 700; font-family: var(--font-num); letter-spacing: 0.3px; } .account-modal .am-restricted-tag, .account-modal .am-restricted-add button { padding: 6px 12px; border-radius: 999px; font-size: 12px; background: rgba(248,113,113,0.14); color: var(--red); border: 1px solid rgba(248,113,113,0.35); font-weight: 600; line-height: 1.2; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: all 0.12s; } .account-modal .am-restricted-add button { cursor: pointer; } .account-modal .am-restricted-add button:hover { filter: brightness(1.15); } .account-modal .am-restricted-remove { color: var(--sub); cursor: pointer; padding: 4px 8px; background: transparent; border: none; font-size: 14px; line-height: 1; } .account-modal .am-restricted-remove:hover { color: var(--red); } .account-modal .am-restricted-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; align-items: stretch; } .account-modal .am-restricted-add input { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--text); font-family: var(--font-num); text-transform: uppercase; line-height: 1.2; } .account-modal .am-restricted-add input:focus { outline: none; border-color: var(--accent); } .account-modal .am-restricted-empty { color: var(--sub); font-size: 12px; padding: 14px 10px; text-align: center; background: var(--card2); border-radius: 6px; font-style: italic; } /* Desktop only: 偏好 section 各自独立 pane, 去除原本的顶部分割线 */ @media (min-width: 641px) { .account-modal .am-persona-section, .account-modal .am-willing-section, .account-modal .am-restricted-section { margin-top: 0; padding-top: 0; border-top: none; } } @media (max-width: 500px) { .account-modal .am-header { padding: 20px 20px 14px; } .account-modal .am-body { padding: 16px 20px; } .account-modal .am-foot { padding: 12px 20px; } .account-modal .am-acard-broker { min-width: 80px; font-size: 11px; } .account-modal .am-acard-row { gap: 8px; grid-template-columns: 38px minmax(0, 1fr); } .account-modal .am-mini-label { font-size: 10.5px; } /* 标签列 56→38px 时漏算了一件事：全部标签里**只有「类型」额外带一个 ⓘ** （.has-tip = inline-flex，文字 + 4px gap + 12px 图标）→ 留给文字的只剩 21.8px，而「类型」两个字在 10.5px 下正好要 21px → 折成「类/型」上下两行。 「资产」「正股」没图标所以独善其身，于是同一列里一个标签竖着两个横着， 更显得是坏的。390px PWA 截图实测（scripts/app_shots.mjs）。 21(字) + 4(gap) + 12(图标) = 37px，仍在 38px 列内，不会挤到右边那列。 */ .account-modal .am-mini-label.has-tip { white-space: nowrap; } /* 类型 3 段窄屏收一行：隐图标 + 缩字 10px + 不换行（标签已含 401K，小图标可省；label 列 56→38px 给按钮腾位）· 探针实测 375/390px 中英皆单行 */ .account-modal .am-seg { gap: 4px; } .account-modal .am-seg-mini .am-seg-btn .ico { display: none; } .account-modal .am-seg-mini .am-seg-btn { gap: 0; white-space: nowrap; font-size: 10px; padding: 7px 3px; } } /* Footer — sticky bottom */ .account-modal .am-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 28px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--card); flex-shrink: 0; } .account-modal .am-cancel { background: transparent; color: var(--sub); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 18px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; } .account-modal .am-cancel:hover { color: var(--text); border-color: var(--line); transform: scale(1.02); } .account-modal .am-cancel:active { transform: scale(0.97); } /* 主按钮 — 黑底白字胶囊（跟持仓卡片的"平仓"按钮同款） */ .account-modal .am-save { background: var(--text); color: var(--card); border: none; border-radius: 999px; padding: 7px 22px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; letter-spacing: -0.005em; transition: opacity 0.15s, transform 0.18s cubic-bezier(0.16,1,0.3,1); } .account-modal .am-save:hover { opacity: 0.88; transform: scale(1.03); } .account-modal .am-save:active { transform: scale(0.97); } /* ─── 账户设置 modal · 移动端 / PWA · bottom-sheet 模式 ─── */ @media (max-width: 640px) { .account-modal { top: auto; left: 0; bottom: 0; transform: none; width: 100%; max-width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 -12px 32px rgba(0,0,0,0.45), 0 -2px 8px rgba(0,0,0,0.25); } /* 顶部拖把 handle */ .account-modal::before { content: ""; display: block; width: 36px; height: 4px; background: var(--line-2); border-radius: 3px; margin: 8px auto 0; flex-shrink: 0; } .account-modal .am-header { padding-top: 12px; } /* mobile: 折叠 rail + 所有 detail section 同显 inline (回到 stacked vertical) */ .account-modal .am-body { display: block; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .account-modal .am-rail { display: none !important; } .account-modal .am-detail { padding: 0; overflow: visible; } .account-modal .am-detail [data-detail-section] { display: block !important; } /* mobile: section 之间加细线分隔 + 留白（标题不再贴上一块）· desktop 单 section 显示不需要 */ .account-modal .am-detail .am-persona-section, .account-modal .am-detail .am-willing-section, .account-modal .am-detail .am-posrules-section, .account-modal .am-detail .am-restricted-section, .account-modal .am-detail .am-calm-section, .account-modal .am-detail .am-kol-section, /* ⬇ 既有遗漏，2026-08-11 被 check_account_sections.py 第一次跑就抓到： 手机上 MCP 那节一直没有上边距和分隔线，和「追踪 KOL」糊在一起 */ .account-modal .am-detail .am-mcp-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } /* mobile: 账户卡之间恢复细线分隔 (desktop pane 时不要) */ .account-modal .am-detail .am-account-card { padding: 18px 0 4px; border-bottom: 1px solid var(--line); } .account-modal .am-detail .am-account-card:first-of-type { padding-top: 6px; } .account-modal .am-detail .am-account-card:last-of-type { border-bottom: none; } /* mobile: 加 + 添加账户 inline button (desktop 这个 hidden) */ .account-modal .am-add-account-inline { display: block; width: 100%; background: transparent; border: 1px dashed var(--line-2); color: var(--sub); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit; margin: 12px 0 4px; } .account-modal .am-actions { padding: 12px 18px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } /* 移动端紧凑：减字号 / 减 padding */ .account-modal .am-acct-num { font-size: 10px; } .account-modal .am-acard-name { font-size: 14.5px; } .account-modal .am-acard-broker { font-size: 11px; min-width: 84px; } .account-modal .am-pair-fields { gap: 8px; } .account-modal .am-pair-label { font-size: 10px; } .account-modal .am-input { font-size: 12.5px; padding: 0 8px; } .account-modal .am-currency { padding: 0 8px; font-size: 11.5px; } .stock-head, .stock-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.4fr) 22px; gap: 5px; } .stock-head span { font-size: 10px; } .stock-row .sr-box { height: 32px; } .stock-row .sr-box input { font-size: 12px; padding: 0 8px; } .stock-row .sr-box .sr-pre { padding: 0 7px; font-size: 11px; } .stock-row .rm-btn { height: 32px; } /* PWA (nav-enabled): bottom-sheet 默认 bottom:0 会被底部 nav bar (~72px + safe-area) 截住, 保存按钮看不见点不到 → 上抬到 nav bar 之上 (沿用 compare-modal pattern at line 4644) */ body.nav-enabled .account-modal { bottom: var(--nav-clearance); max-height: calc(90vh - var(--nav-clearance)); max-height: calc(90dvh - var(--nav-clearance)); } /* PWA: 上抬后 footer 不再被 tab bar 压, 缩底部 padding 不要双 safe-area */ body.nav-enabled .account-modal .am-actions { padding-bottom: 14px; } } /* 账户 context badge 行（显示在推荐卡片上） */ .acct-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .acct-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; background: var(--card2); color: var(--sub); font-size: 11px; white-space: nowrap; } .acct-badge.covered { background: rgba(34,197,94,0.12); color: var(--green); } .acct-badge.cash { background: rgba(156,163,175,0.14); color: var(--sub); } .acct-badge.leveraged { background: rgba(251,146,60,0.14); color: var(--orange); } .acct-badge.naked { background: rgba(239,68,68,0.10); color: var(--red); } .acct-badge.caution { background: rgba(234,179,8,0.12); color: var(--yellow); } /* v2.1 WTO chip — 可点 toggle override */ .acct-badge.wto { user-select: none; transition: background 0.15s, color 0.15s; } .acct-badge.wto:hover { filter: brightness(1.15); } .acct-badge.wto-on { background: rgba(34,197,94,0.12); color: var(--green); } .acct-badge.wto-off { background: rgba(239,68,68,0.10); color: var(--red); } .acct-badge.wto-unset { background: rgba(156,163,175,0.10); color: var(--sub); } /* 1c · CC vs avg_cost 被 call 走盈亏行（仅 covered candidate） */ .cost-line { margin-top: 6px; font-size: 11.5px; color: var(--sub); line-height: 1.55; font-variant-numeric: tabular-nums; } .cost-line b { color: var(--text); font-weight: 600; } .cost-line .gain { color: var(--green); font-weight: 600; } .cost-line .loss { color: var(--red); font-weight: 600; } /* 🎯 顶部预算 banner */ .goal-banner { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: rgba(230,184,106,0.06); border: 1px solid rgba(230,184,106,0.3); font-size: 12.5px; line-height: 1.55; } .goal-banner.ok { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.35); } .goal-banner.warn { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.40); } .goal-banner .gb-acct { color: var(--sub); font-size: 11.5px; margin-bottom: 4px; } .goal-banner .gb-line { display: flex; align-items: flex-start; gap: 6px; color: var(--text); } .goal-banner .gb-line .ic { font-size: 14px; line-height: 1.4; flex-shrink: 0; } .goal-banner .gb-line strong { color: var(--text); } .goal-banner.ok .gb-line .ic { color: var(--green); } .goal-banner.warn .gb-line .ic { color: var(--yellow); } /* 🎯 目标达成度（仅目标驱动 mode 显示） */ .goal-progress { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px; border-radius: 8px; font-size: 12px; line-height: 1.5; background: rgba(230,184,106,0.08); } .goal-progress.ok { background: rgba(52,211,153,0.10); border-left-color: var(--green); } .goal-progress.warn { background: rgba(234,179,8,0.10); border-left-color: var(--yellow); } .goal-progress.miss { background: rgba(248,113,113,0.08); border-left-color: var(--red); } .goal-progress .ic { font-size: 14px; line-height: 1; } .goal-progress strong { color: var(--text); } .goal-progress .delta { color: var(--sub); margin-left: 4px; } /* ── share view (只读快照) — 保留所有 UI，只让推荐指数能点（跳首页） ─── */ /* hide 接收方上下文里完全无意义的元素 */ body.share-view .cloud-sync-status, body.share-view #add-form, body.share-view .add-form, body.share-view .modal-backdrop:not(#share-modal) { display: none !important; } /* 默认整页所有元素都禁交互（无 hover 弹 / 无 click） */ body.share-view * { pointer-events: none !important; cursor: default !important; } /* 例外：banner、share-modal、推荐指数大按钮 — 这些保留 pointer-events */ body.share-view #share-banner, body.share-view #share-banner *, body.share-view #share-modal, body.share-view #share-modal *, body.share-view .rec-btn-large, body.share-view .rec-btn-large * { pointer-events: auto !important; } body.share-view .rec-btn-large { cursor: pointer !important; } /* 推荐指数加视觉暗示 — 描金边稍亮，提示"可点击" */ body.share-view .rec-btn-large { box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(230,184,106,0.25); } /* ── share modal（点"生成只读链接"后弹的复制框）按钮 — 与项目主按钮规范一致 */ #share-modal .share-btn { background: var(--accent); color: #0A0A0B; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1), background 0.15s; } #share-modal .share-btn:hover { background: var(--accent-light); transform: scale(1.04); box-shadow: 0 4px 14px rgba(230,184,106,0.30); } #share-modal .share-btn:active { transform: scale(0.96); box-shadow: none; } #share-modal .share-btn.cancel { background: transparent; color: var(--sub); border: 1.5px solid var(--line); } #share-modal .share-btn.cancel:hover { color: var(--text); border-color: var(--line-2); box-shadow: none; background: var(--card2); } #share-modal .share-btn.cancel:active { transform: scale(0.97); } /* ─────────────────────── Sector heatmap β.2 ─────────────────────── */ /* Title 更显眼 (scoped · 不影响其他 card 的小灰 h3) */ .sector-strip-card > h3 { font-size: 13px; color: var(--text); font-weight: 700; letter-spacing: 0.04em; } .sector-strip-legend { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .sector-strip-legend .label { flex: 1; } .sector-strip-legend .bar { width: 50px; height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--iv-0), var(--iv-100)); } .sector-stripes { display: flex; flex-direction: column; gap: 2px; } .sector-stripe { display: flex; align-items: center; padding: 0 10px; border-radius: 6px; cursor: pointer; transition: transform 0.15s, outline-color 0.15s; position: relative; background: var(--card2); overflow: hidden; min-height: 16px; color: rgba(255,255,255,0.92); } .sector-stripe:hover { transform: translateX(2px); } .sector-stripe .name { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; } .sector-stripe .weight { font-size: 9.5px; opacity: 0.7; font-weight: 600; margin-left: 5px; font-variant-numeric: tabular-nums; } .sector-stripe .stripe-spacer { flex: 1; } .sector-stripe .iv { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .sector-stripe .iv .pct { font-size: 8.5px; opacity: 0.7; font-weight: 600; } .sector-stripe .delta { font-size: 10px; opacity: 0.85; margin-left: 6px; font-variant-numeric: tabular-nums; } .sector-stripe.short { padding: 0 8px; } .sector-stripe.short .name { font-size: 10.5px; max-width: 70px; } .sector-stripe.short .weight { font-size: 9px; } .sector-stripe.short .iv { font-size: 12px; } .sector-stripe.short .delta { display: none; } .sector-stripe.iv-low { background: linear-gradient(90deg, var(--iv-0) 0%, var(--iv-20) 100%); } .sector-stripe.iv-mid { background: linear-gradient(90deg, var(--iv-20) 0%, var(--iv-40) 100%); } .sector-stripe.iv-warm { background: linear-gradient(90deg, var(--iv-40) 0%, var(--iv-60) 100%); } .sector-stripe.iv-hot { background: linear-gradient(90deg, var(--iv-60) 0%, var(--iv-80) 100%); color: #1c1408; } .sector-stripe.iv-fire { background: linear-gradient(90deg, var(--iv-80) 0%, var(--iv-100) 100%); color: #1c1408; } .sector-stripe.active { outline: 2px solid var(--accent); outline-offset: -2px; } /* ─── Treemap tile (Phase 2.4 · squarified) ────── */ .sector-treemap { position: relative; width: 100%; background: var(--bg); border-radius: 6px; overflow: hidden; } .sector-tile { position: absolute; border: 1px solid rgba(0,0,0,0.32); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px; transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: pointer; color: #1c1408; } .sector-tile:hover { transform: scale(1.02); z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } .sector-tile.active { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 5; } .sector-tile-name { font-size: 13px; font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sector-tile-iv { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .sector-tile-iv .pct { font-size: 11px; opacity: 0.7; margin-left: 1px; } .sector-tile-aum { font-size: 10px; font-weight: 500; opacity: 0.65; line-height: 1; margin-top: 3px; } /* 小方块 ≤ 45px 短边: 只 ticker + IV */ .sector-tile.tiny { padding: 4px 5px; } .sector-tile.tiny .sector-tile-name { font-size: 10px; opacity: 0.7; } .sector-tile.tiny .sector-tile-iv { font-size: 13px; } .sector-tile.tiny .sector-tile-aum { display: none; } /* 中方块 ≤ 75px: 隐藏 AUM */ .sector-tile.mid .sector-tile-name { font-size: 11.5px; } .sector-tile.mid .sector-tile-iv { font-size: 15px; } .sector-tile.mid .sector-tile-aum { display: none; } /* 极扁的块 (< 36px 高): 名字 + IV 两行叠起来就是 8+13+15=36px, 装不下会裁字。 补到 11 个板块后材料 (XLB ~2%) 在手机上只有 21px 高 —— 改前最矮的一块还有 40px， 所以这一档是这次加板块**加出来的**，不是原来就有的 (2026-08-11)。 只留名字 (没名字的色块点都不知道点什么)，IV 数字退到 title tooltip，颜色本来就编码着 IV。 */ .sector-tile.xtiny { padding: 2px 5px; justify-content: center; } .sector-tile.xtiny .sector-tile-name { font-size: 9.5px; opacity: 0.85; } .sector-tile.xtiny .sector-tile-iv, .sector-tile.xtiny .sector-tile-aum { display: none; } /* IV 等级背景 · 复用 production --iv-* 渐变 · 默认/"current" theme */ /* 还没有真 IV 的板块（新加的 / live 取不到）：灰底 + 「—」，绝不拿编的数字充数。 2026-08-11 补 XLC/XLI/XLB 时，第一版给它们填了 mock IV，preview 真机截图当场 显示成 52% —— 后端还在吃 6h 缓存，我编的数字被当成实时行情了。 */ .sector-tile.iv-na { background: linear-gradient(135deg, var(--card2) 0%, var(--card3) 100%); color: var(--muted); } .sector-tile.iv-na .sector-tile-iv { opacity: 0.55; } .sector-tile.iv-low { background: linear-gradient(135deg, var(--iv-0) 0%, var(--iv-20) 100%); color: #e7eaf0; } .sector-tile.iv-mid { background: linear-gradient(135deg, var(--iv-20) 0%, var(--iv-40) 100%); color: #f0e0c0; } .sector-tile.iv-warm { background: linear-gradient(135deg, var(--iv-40) 0%, var(--iv-60) 100%); } .sector-tile.iv-hot { background: linear-gradient(135deg, var(--iv-60) 0%, var(--iv-80) 100%); } .sector-tile.iv-fire { background: linear-gradient(135deg, var(--iv-80) 0%, var(--iv-100) 100%); } /* ── Theme C · hollow + 圆角 + 3px gap (default, set via _SECTOR_HEATMAP_THEME) ── */ .sector-treemap.theme-c { border-radius: 12px; } .sector-treemap.theme-c .sector-tile { border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); } /* 没有真 IV 的板块：中性虚线框，与「有数据」的色阶明显区分（不参与冷→烫渐变） */ .sector-treemap.theme-c .sector-tile.iv-na { background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--muted); } .sector-treemap.theme-c .sector-tile.iv-low { background: rgba(74, 43, 46, 0.05); border-color: rgba(74, 43, 46, 0.35); color: var(--text); } .sector-treemap.theme-c .sector-tile.iv-mid { background: rgba(110, 53, 48, 0.08); border-color: rgba(110, 53, 48, 0.45); color: var(--text); } .sector-treemap.theme-c .sector-tile.iv-warm { background: rgba(130, 102, 56, 0.12); border-color: rgba(130, 102, 56, 0.55); color: var(--text); } .sector-treemap.theme-c .sector-tile.iv-hot { background: rgba(196, 152, 70, 0.18); border-color: rgba(196, 152, 70, 0.65); color: #e6b86a; } .sector-treemap.theme-c .sector-tile.iv-fire { background: rgba(230, 184, 106, 0.25); border-color: rgba(230, 184, 106, 0.75); color: #f3cf85; } /* ── Theme E · C + 烫端 radial 内辉光 ── */ .sector-treemap.theme-e { border-radius: 12px; } .sector-treemap.theme-e .sector-tile { border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); } /* 没有真 IV 的板块：中性虚线框，与「有数据」的色阶明显区分（不参与冷→烫渐变） */ .sector-treemap.theme-e .sector-tile.iv-na { background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--muted); } .sector-treemap.theme-e .sector-tile.iv-low { background: rgba(74, 43, 46, 0.05); border-color: rgba(74, 43, 46, 0.35); color: var(--text); } .sector-treemap.theme-e .sector-tile.iv-mid { background: rgba(110, 53, 48, 0.08); border-color: rgba(110, 53, 48, 0.45); color: var(--text); } .sector-treemap.theme-e .sector-tile.iv-warm { background: rgba(130, 102, 56, 0.12); border-color: rgba(130, 102, 56, 0.55); color: var(--text); } .sector-treemap.theme-e .sector-tile.iv-hot { background: radial-gradient(ellipse at center, rgba(196, 152, 70, 0.32) 0%, rgba(196, 152, 70, 0.10) 100%); border-color: rgba(196, 152, 70, 0.7); color: #e6b86a; } .sector-treemap.theme-e .sector-tile.iv-fire { background: radial-gradient(ellipse at center, rgba(230, 184, 106, 0.44) 0%, rgba(230, 184, 106, 0.15) 100%); border-color: rgba(230, 184, 106, 0.85); color: #f3cf85; box-shadow: inset 0 0 14px rgba(230, 184, 106, 0.18); } /* ── Theme F · v5 D + 外框补线 (锐角 tile · 外圆角线条闭合) ── */ .sector-treemap.theme-f { border-radius: 12px; border: 1px solid var(--line-2); } .sector-treemap.theme-f .sector-tile { border: 1px solid var(--line-2); color: var(--text); } .sector-treemap.theme-f .sector-tile.iv-low { background: rgba(74, 43, 46, 0.05); border-color: rgba(74, 43, 46, 0.35); color: var(--text); } .sector-treemap.theme-f .sector-tile.iv-mid { background: rgba(110, 53, 48, 0.08); border-color: rgba(110, 53, 48, 0.45); color: var(--text); } .sector-treemap.theme-f .sector-tile.iv-warm { background: rgba(130, 102, 56, 0.12); border-color: rgba(130, 102, 56, 0.55); color: var(--text); } .sector-treemap.theme-f .sector-tile.iv-hot { background: radial-gradient(ellipse at center, rgba(196, 152, 70, 0.30) 0%, rgba(196, 152, 70, 0.10) 100%); border-color: rgba(196, 152, 70, 0.7); color: #e6b86a; } .sector-treemap.theme-f .sector-tile.iv-fire { background: radial-gradient(ellipse at center, rgba(230, 184, 106, 0.42) 0%, rgba(230, 184, 106, 0.15) 100%); border-color: rgba(230, 184, 106, 0.85); color: #f3cf85; box-shadow: inset 0 0 14px rgba(230, 184, 106, 0.18); } /* ⚠️ 白天：最烫两档跟上其余四档，统一用 var(--text)（congyang 2026-08-12 挑的 B 案 · /iv-heat-pick） 上面 theme-c / e / f 三份里，iv-na→--muted、iv-low/mid/warm→var(--text) 都跟着主题翻， 只有 iv-hot / iv-fire 把字色**写死成夜间亮金**（#e6b86a / #f3cf85）—— 那是给夜间深底配的， 压在白天那层 18%/25% 的浅金 tint 上实测只有 1.56:1 / 1.28:1，名字和 IV 数字基本看不见 （夜间完全正常，所以只在夜间跑的检查永远发现不了 —— 同 .pf-tooltip 那条）。 热度本身由**背景 tint + 边框色**编码（四个兄弟档全靠这个），最烫两档没有任何理由自己另用一个字色。 → 白天收回 var(--text)：12.3:1，正好和 iv-warm 同档，六档字色统一，零新颜色。 故意不写 .theme-c/e/f 三份而只按 .sector-treemap 收：将来加新 theme 时这条自动覆盖， 不会重新长回来。特异性 5 类 > 那三份的 4 类，所以不依赖书写顺序。夜间零改动。 */ :root[data-theme="light"] .sector-treemap .sector-tile.iv-hot, :root[data-theme="light"] .sector-treemap .sector-tile.iv-fire { color: var(--text); } /* ⭐ 白天板块热力图：色阶整条改走 --iv-* token（2026-08-15）。 在此之前 theme-e/f 的 tile 底是**写死的夜间色低透明度**——rgba(74,43,46) 暗红 / (110,53,48) 砖 / (130,102,56) 橄榄，压在白卡上就是一片暗紫红和土黄的泥块。congyang 说"脏感"， 板块图是全 app 最刺眼的一处（截图可证）：它是唯一**大面积铺色**的组件，别处的脏是薄雾，这里是实心的。 ⚠️ 根因是"低饱和中间调 + 白底"这条配方（同氛围光那条），不是透明度调错了 —— 所以不是调 α，是换色。 沿用上面那条既有写法：只按 `.sector-treemap` 收（5 类特异性 > theme-e/f 的 4 类）， 将来加新 theme 自动覆盖，不用再补一遍。文字全部 ≥6:1（最烫那格 6.06:1）。 */ :root[data-theme="light"] .sector-treemap .sector-tile.iv-low { background: var(--iv-0); border-color: rgba(24,28,36,0.10); color: var(--text); } :root[data-theme="light"] .sector-treemap .sector-tile.iv-mid { background: var(--iv-20); border-color: rgba(24,28,36,0.10); color: var(--text); } :root[data-theme="light"] .sector-treemap .sector-tile.iv-warm { background: var(--iv-40); border-color: rgba(154,105,15,0.22); color: var(--text); } :root[data-theme="light"] .sector-treemap .sector-tile.iv-hot { background: var(--iv-60); border-color: rgba(154,105,15,0.34); box-shadow: none; } :root[data-theme="light"] .sector-treemap .sector-tile.iv-fire { background: var(--iv-100); border-color: rgba(154,105,15,0.50); box-shadow: none; } /* AUM 副标在最烫那两格上会被 0.65 的 opacity 拖到 3:1 以下 → 白天提一档 */ :root[data-theme="light"] .sector-tile-aum { opacity: 0.8; } /* Legend bar 底部 · "高=AUM | 冷 [bar] 烫" */ .sector-legend-bar { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); } .sector-legend-bar .label { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; } .sector-legend-bar .bar { height: 5px; flex-shrink: 0; width: 60px; border-radius: 3px; background: linear-gradient(to right, var(--iv-0), var(--iv-20), var(--iv-40), var(--iv-60), var(--iv-80), var(--iv-100)); } /* Sector drill modal · desktop center / mobile bottom-sheet */ .sector-drill-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); width: 92vw; max-width: 480px; max-height: 80vh; overflow-y: auto; background: var(--card); border: 1px solid var(--accent); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 6px rgba(230,184,106,0.06); padding: 18px 20px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; } .sector-drill-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } @media (max-width: 600px) { .sector-drill-modal { top: auto; left: 0; right: 0; bottom: 0; transform: translateY(8px); width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; padding: 16px 18px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom, 0)); max-height: 78vh; } .sector-drill-modal.open { transform: translateY(0); } .sector-drill-modal::before { content: ''; display: block; width: 36px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 0 auto 10px; } } .sector-drill-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .sector-drill-head .swatch { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--iv-60) 0%, var(--iv-80) 100%); flex-shrink: 0; } .sector-drill-head .name { font-size: 14px; font-weight: 700; color: var(--text); } .sector-drill-head .iv { font-size: 20px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin-left: auto; } .sector-drill-head .iv .pct { font-size: 11px; color: var(--sub); margin-left: 1px; } .sector-drill-head .close { width: 24px; height: 24px; border-radius: 50%; background: var(--card2); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--sub); margin-left: 8px; cursor: pointer; } .sector-drill-head .close:hover { background: var(--card3); color: var(--text); } /* ══ 包租公严选（Our Shortlist）· 找合约第三条轨 ══════════════════════════ 设计见 FEATURED_PLAYBOOK.md。这一屏的纪律：敢于少给（今天没货就空屏 + 漏斗）， 年化永远不是主角（排第三个格子），每一行都带判断。 */ .rec-featured { padding: 2px 0 4px; } /* 严选轨下把表单其余部分整个收起来（标的输入 / 参数 / 提交 / 结果） */ .rec-form.is-featured > .row, .rec-form.is-featured > .row-pair, .rec-form.is-featured > .rec-goal-mode, .rec-form.is-featured > .rec-strategy-mode, .rec-form.is-featured > .submit-row, .rec-form.is-featured > #rec-result { display: none !important; } /* 时间戳：一行事实，不是小字免责 —— 字号别再缩了 */ .ft-stamp { font-size: 12px; color: var(--sub); font-family: var(--font-num); padding: 2px 0 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } .ft-why-time { color: var(--accent); cursor: pointer; border-bottom: 1px dotted var(--accent-2); font-family: var(--font-text); } .ft-clim { border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; border: 1px solid; } /* 数字行用等宽 + 更实；判断行退一档（数字是事实，判断是判断，视觉上分开） */ .ft-clim-n { font-family: var(--font-num); font-size: 13px; } .ft-clim-n b { font-weight: 800; } .ft-clim-s { font-size: 12px; opacity: .85; margin-top: 2px; } .ft-clim-n + .ft-clim-s { margin-top: 3px; } /* ⚠️ 三档跟引擎的 verdict 走，不是「不是防守就绿」。sunny=绿 / cloudy=中性 / showers·storm=警示。**没 verdict 时只敢中性，绝不默认绿**（2026-08-12： score 33 + 明天 CPI 还画成绿的，congyang 当场问颜色规则是什么）。 */ .ft-clim.good { background: rgba(63,221,156,.08); border-color: rgba(63,221,156,.28); color: var(--green); } .ft-clim.mid { background: var(--fill); border-color: var(--line); color: var(--sub); } .ft-clim.warn { background: rgba(230,184,106,.09); border-color: rgba(230,184,106,.30); color: var(--accent); } .ft-clim.bad { background: rgba(255,126,120,.08); border-color: rgba(255,126,120,.30); color: var(--red); } /* 公司名：同「在发生什么」那张卡的处理（代码为主，名字退一档） */ .ft-co { font-size: 11px; color: var(--dim); font-weight: 500; margin-left: -3px; } .ft-ring { margin-bottom: 13px; } .ft-ring-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; } .ft-ring-i { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-family: var(--font-num); background: var(--fill-2); color: var(--sub); } .ft-ring-t { font-size: 13.5px; font-weight: 700; } .ft-ring-s { font-size: 11px; color: var(--dim); margin-left: auto; } .ft-ring-note { font-size: 11.5px; color: var(--dim); margin: -4px 0 10px; } /* ⭐ 桌面一行两张（congyang 2026-08-12「是否可以更紧凑」）。 ⚠️ 断点按**弹窗宽度**取 860px：低于它两列每张不到 ~410px，四个数格会挤成 两位数换行。手机 / PWA 永远单列（§12：窄屏两列一定横滚）。 */ .ft-cards { display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 860px) { .ft-cards { grid-template-columns: 1fr 1fr; } } body.nav-enabled .ft-cards { grid-template-columns: 1fr; } /* ⭐ 准玻璃（DESIGN.md §1「准玻璃 = 给列表卡面 / 内容卡：--glass-grad + --edge + --bevel，零 blur」）。 2026-08-13 congyang 贴发布帖那张 mockup 对比线上，报「实际产品没有用我们设计稿的凹陷设计」—— 查下来数格那条他其实是对着 mockup 说的（线上 .ft-n 一直是 --fill，和走过 §9 的 /featured-pick 一致， 他拍板「线上不动、改 mockup」），但**卡面这条是线上真欠的**：这三样一个都没有， 所以同一张卡在 mockup 里明显更立体。这才是「那张精致得多」的主因，不是凹陷。 ⚠️ 用 --edge 不用 --line（准玻璃的边就是 --edge；白天 --edge 是暗 hairline，见 §2.2）。 ⚠️ 零 blur —— 这是列表里会铺很多张的内容卡，不许上 backdrop-filter（真玻璃只给 chrome）。 */ .ft-card { background: var(--card2); background-image: var(--glass-grad); border: 1px solid var(--edge); border-radius: 11px; box-shadow: var(--bevel), var(--shadow); padding: 9px 11px; cursor: pointer; min-width: 0; transition: border-color .15s ease, transform .12s ease; } .ft-card:hover { border-color: var(--accent-2); } .ft-card:active { transform: scale(0.995); } .ft-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ft-sym { font-size: 15px; font-weight: 800; } .ft-leg { font-family: var(--font-num); font-size: 12px; color: var(--sub); margin-top: 3px; } .ft-stars { margin-left: auto; color: var(--accent); font-size: 11px; letter-spacing: .5px; } /* 4★ 也会上屏（CC 段放宽）→ 空星要看得见「少了一颗」，不能只是短一截 */ .ft-stars .off { color: var(--line-2); } /* ☆ 关注入口：在严选里看到一只票就能收进层① —— 卡整块可点，所以这颗自己 stopPropagation。 未关注 = 描边（不抢戏，星级才是这张卡的主角）· 已关注 = 实金 · 已是愿接 = 🏠 且不可点。 */ .ft-fav { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; flex: none; background: transparent; border: 0; border-radius: 7px; cursor: pointer; color: var(--dim); align-self: center; transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .ft-fav .ico { width: 14px; height: 14px; } .ft-fav:hover { color: var(--accent); background: var(--accent-tint); } /* ⚠️ 「已关注 = 实心星」这条**做不到**：Icon style B 的 sprite 在 path 上写死了 `fill="none"`，presentation attribute 压过 CSS 的 fill，所以第一版 on 态和未关注态 肉眼几乎分不出来（离线渲一张才看见的，断言全绿）。改成**金色描边 + 金色底片**—— 既在 icon 系统内（不伪造实心），一眼也认得出开着。 */ .ft-fav.on { color: var(--accent); background: var(--accent-tint); } .ft-fav.on:hover { background: var(--accent-soft); } .ft-fav.is-willing { color: var(--green); cursor: default; } .ft-fav.is-willing:hover { background: transparent; color: var(--green); } /* 「你有股闲着」那段空着时的兜底：股在、只是今天没够格的 Call。 ⚠️ 不用 dashed 空态框 —— 这不是空态，是一条确凿的事实（他确实有这些股）。 */ .ft-gap { background: var(--fill); border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; margin-bottom: 12px; } .ft-gap-t { font-size: 13px; font-weight: 700; } .ft-gap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 7px; } .ft-gap-chip { display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; transition: border-color .15s ease; } .ft-gap-chip:hover { border-color: var(--accent-2); } .ft-gap-chip b { font-family: var(--font-num); font-weight: 700; color: var(--sub); } .ft-gap-chip i { font-style: normal; font-size: 10.5px; color: var(--dim); font-weight: 500; } .ft-gap-s { font-size: 11.5px; color: var(--dim); line-height: 1.5; } /* 四个数：权利金/张 和 年化 是 hero（更大更亮），概率/垫子退一档。 ⚠️ 口径抄「找合约」候选卡，别自造一套（congyang 2026-08-11 打回）。 */ .ft-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 7px 0 6px; } @media (max-width: 420px) { .ft-nums { grid-template-columns: repeat(2, 1fr); } } /* ⭐ 凹面 well（congyang 2026-08-13 在 /ftn-pick 上选的方案 D）：四格**同一个凹面底**， 层级只靠数字本身 —— 年化 / 权利金放大到 15.5px + 金色，安全率 / 安全垫 13px 素字。 为什么不给 hero 再加一层金 tint（那是方案 C）：一种底色就够，第二种底色对层级没有 额外贡献（DESIGN.md §8「删掉会损失意义吗」）。 ⚠️ 四个数**不许全用金色**（那是发布帖 mockup 那版）—— 实测白天只有 2.49:1 对比度， 远低于 AA 4.5，按 §0.5「看得懂 > 是不是琉璃」不许上。金色只给放大的那两个 （15.5px / 700 = WCAG 大字号，3:1 门槛，实测 3.97 过关）。 ⚠️ 白天的凹陷本来就轻（`--fill` 5% 黑 vs `--well` 5.5% 黑几乎同值，全靠 `--well-sh` 那道 1.5px 内阴影撑）—— 别按夜间效果去判白天（DESIGN.md §2.2）。 */ .ft-n { background: var(--well); box-shadow: var(--well-sh); border-radius: 7px; padding: 5px 7px; min-width: 0; } .ft-n .k { display: block; font-size: 9.5px; color: var(--dim); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-n .v { font-family: var(--font-num); font-size: 13px; font-weight: 700; } .ft-n.hero .v { font-size: 15.5px; color: var(--accent); } .ft-kind { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; font-weight: 700; } .ft-kind.cc { background: rgba(63,221,156,.14); color: var(--green); } .ft-kind.csp { background: var(--accent-tint); color: var(--accent); } .ft-why-list { list-style: none; margin: 0; padding: 0; } .ft-why-list li { font-size: 11.5px; color: var(--sub); line-height: 1.5; padding-left: 13px; position: relative; } .ft-why-list li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--green); } .ft-why-list li.n::before { background: var(--red); } /* 中性事实（同板块 / 板块龙头）—— 既不是优点也不是缺点。 以前它跟真缺点共用红点，一整段全红 → congyang 2026-08-12「看起来让人担心」。 */ .ft-why-list li.m::before { background: var(--sub); opacity: .55; } .ft-why { font-size: 12px; color: var(--sub); display: flex; gap: 6px; align-items: flex-start; } .ft-why + .ft-why { margin-top: 3px; } .ft-why .tag { flex: none; font-size: 9.5px; padding: 1px 6px; border-radius: 5px; margin-top: 2px; } .ft-why .tag-y { background: rgba(63,221,156,.13); color: var(--green); } .ft-why .tag-n { background: rgba(255,126,120,.13); color: var(--red); } /* 空屏 + 漏斗：不能长得像坏了 */ .ft-empty { background: var(--card); border: 1px dashed var(--line-2); border-radius: 11px; padding: 16px 14px; text-align: center; } .ft-empty .ttl { font-size: 14px; font-weight: 700; margin-bottom: 3px; } .ft-empty .sub { font-size: 12.5px; color: var(--sub); margin-bottom: 12px; } .ft-fbar { display: flex; gap: 8px; font-size: 12px; padding: 5px 0; text-align: left; border-bottom: 1px solid var(--line); max-width: 330px; margin: 0 auto; } .ft-fbar:last-of-type { border-bottom: none; } .ft-fbar .lab { flex: 1; color: var(--sub); } .ft-fbar .cnt { font-family: var(--font-num); font-weight: 700; } .ft-cta { margin-top: 12px; font-size: 12.5px; color: var(--accent); } .ft-retry { margin-top: 10px; font-size: 12.5px; color: var(--accent); cursor: pointer; } .ft-load { padding: 22px; text-align: center; color: var(--dim); font-size: 13px; } /* 免费档遮罩：几行糊掉的**空骨架**压在下面（真数据后端根本不发，前端糊只是视觉）。 渐隐到底 → 「下面还有」的观感，而不是硬生生截断。 */ .ft-ghosts { position: relative; margin-top: 2px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 60%, transparent 100%); pointer-events: none; user-select: none; filter: blur(2.5px); } .ft-ghost { background: var(--card2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; margin-bottom: 8px; } .ft-ghost .g-top { display: flex; align-items: center; gap: 8px; } .ft-ghost .g-sym { width: 52px; height: 13px; border-radius: 4px; background: var(--fill-2); } .ft-ghost .g-kind { width: 66px; height: 11px; border-radius: 5px; background: var(--fill); } /* ⚠️ 占位的星级用**灰条**不画真星 —— 画 ★★★★★ 等于暗示「锁住的都是 5 星」， 而且会被「星级不许写死」那条守卫抓到（那次它抓对了）。 */ .ft-ghost .g-stars { margin-left: auto; width: 54px; height: 10px; border-radius: 4px; background: var(--fill-2); } .ft-ghost .g-leg { width: 62%; height: 9px; border-radius: 4px; background: var(--fill); margin: 7px 0 8px; } .ft-ghost .g-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } /* 占位格跟真格同材质（凹面）—— 糊掉的骨架要读成「下面还有同样的卡」， 材质不一样会读成「另一种东西」。 */ .ft-ghost .g-nums span { height: 30px; border-radius: 7px; background: var(--well); box-shadow: var(--well-sh); } @media (min-width: 860px) { .ft-ghosts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } } body.nav-enabled .ft-ghosts { display: block; } .ft-lock { text-align: center; padding: 12px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; } .ft-lock .t { font-size: 13px; font-weight: 700; } .ft-lock .s { font-size: 11.5px; color: var(--dim); margin: 2px 0 9px; } .ft-lock-btn { padding: 8px 22px; border: none; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 700; background: var(--gold-grad); color: var(--gold-ink); } .ft-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--dim); line-height: 1.5; } .sector-drill-tiks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 12px; } /* live 取不到 + 无 mock 兜底时的说明行（2026-08-11 新板块会走这条）。 跨满 3 列, 免得孤零零一个格子看着像渲染坏了。 */ .sector-drill-empty { grid-column: 1 / -1; padding: 18px 12px; text-align: center; color: var(--muted); font-size: 12px; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; } .sector-drill-tik { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 10.5px; color: var(--text); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .sector-drill-tik:hover { border-color: var(--accent); background: rgba(245, 176, 66, 0.06); } .sector-drill-tik:active { transform: scale(0.97); } .sector-drill-tik.hot:hover { background: rgba(245, 176, 66, 0.22); } .sector-drill-tik .sym { font-weight: 700; font-size: 11.5px; margin-bottom: 2px; } .sector-drill-tik .iv-row { display: flex; justify-content: space-between; color: var(--sub); } .sector-drill-tik .iv-row .v { color: var(--text); font-weight: 600; } .sector-drill-tik.hot { background: var(--accent-tint); border-color: var(--accent); } .sector-drill-tik.hot .sym { color: var(--accent); } /* Phase 2.4: hot pick 小火苗 SVG 角标 (今日热点, 跟 anchor 锚定区分) */ .sector-drill-tik.hot-pick { border-color: var(--accent); } .sector-drill-tik .hot-pick-badge { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; color: var(--accent); opacity: 0.7; cursor: inherit; /* hover badge 出自己 title; click 默认冒泡到父 tile */ } .sector-drill-action-title { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .sector-drill-action { background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.5; } .sector-drill-action .row1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; } .sector-drill-action .row1 .what { font-weight: 700; color: var(--accent); } .sector-drill-action .row1 .yield { font-weight: 800; font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .sector-drill-action .row2 { color: var(--sub); font-size: 11.5px; } .sector-drill-action[onclick] { cursor: pointer; transition: transform 0.1s ease; } .sector-drill-action[onclick]:hover { transform: translateY(-1px); } /* Phase 2.2: drill modal loading + live state */ .sector-drill-loading { text-align: center; color: var(--sub); font-size: 12px; padding: 32px 16px; font-style: italic; } .sector-drill-mock-note { font-size: 10px; color: var(--dim); margin-top: 10px; text-align: center; font-style: italic; } .sector-drill-mock-note.live { color: var(--accent); opacity: 0.7; } /* Phase 1 banner: 数据是 mock */ .sector-strip-mock-note { font-size: 10px; color: var(--dim); margin-top: 4px; text-align: center; font-style: italic; } /* ─────── β.2 PWA: Strip 搬到简报 tab ─────── Desktop: side panel 显示 Strip (现状) · 简报 tab 内 strip-brief 隐藏 PWA (nav-enabled): side panel Strip 隐藏 · 简报 tab 内 strip-brief 显示 */ .sector-strip-brief-wrap { display: none; } body.nav-enabled .sector-strip-card { display: none !important; } body.nav-enabled .sector-strip-brief-wrap { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 8px 0 14px; } body.nav-enabled .sector-strip-brief-wrap .sector-strip-mock-note { margin-top: 8px; } /* ≥900px PWA tablet 横屏 · mode-priority 是 grid · 刷新已收进守方段头(content 内) · strip 放最底跨两列 */ @media (min-width: 900px) { body.nav-enabled .morning-brief.mode-priority { grid-template-areas: "climate climate" "head head" "trader trader" "content right" "strip strip"; } body.nav-enabled .morning-brief.mode-priority > .sector-strip-brief-wrap { grid-area: strip; min-width: 0; } /* PWA tablet 保留收租气候顶部整行（桌面浏览器才移右栏）— 补回 climate grid-area （桌面非 PWA 的那条已删，climate 由 _mbPlaceClimate 移进右栏） */ body.nav-enabled .morning-brief.mode-priority > .mb-climate { grid-area: climate; } } /* tab-page 模式: drill modal 必须高于 brief 全屏 modal (z-index 1440) · 否则点 sector 后 modal 被 brief 盖住, 用户切回 positions 才看到 */ body.is-tab-page .sector-drill-modal { z-index: 1460 !important; } body.is-tab-page #sector-drill-backdrop.show { display: block !important; z-index: 1455 !important; } /* PWA + tab-page: bottom-sheet 默认 bottom:0 会被底部 nav bar (~72px + safe-area) 截住, 上抬到 nav bar 之上 (沿用 compare-modal pattern at line 4633) */ body.nav-enabled.is-tab-page .sector-drill-modal { bottom: var(--nav-clearance) !important; max-height: calc(78vh - var(--nav-clearance)) !important; padding-bottom: 24px !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch; } /* ═══ 包租公 · Design System v1 · Icon Sprite Sizing ═══ */ /* svg.ico = 默认尺寸跟随父字号 (1em); 上下文里有 explicit size override */ /* 注意: 选择器 svg.ico 而非 .ico — 避免跟已有 span.ico 冲突 */ svg.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; line-height: 1; } svg.ico-sm { width: 0.85em; height: 0.85em; vertical-align: -0.1em; } svg.ico-md { width: 1.15em; height: 1.15em; vertical-align: -0.2em; } svg.ico-lg { width: 1.4em; height: 1.4em; vertical-align: -0.25em; } /* status circles 需要语义色 (覆盖 currentColor) */ svg.ico.good, svg.ico-good { color: var(--green); } svg.ico.bad, svg.ico-bad { color: var(--red); } /* Tier star helper — ★ emoji → SVG sprite (design-system B 风格) */ .tier-stars { display: inline-flex; gap: 1px; align-items: center; vertical-align: middle; line-height: 1; } .tier-stars.ts-sm { font-size: 0.85em; } .tier-stars.ts-lg { font-size: 1.2em; } /* display:inline-block 必须显式声明 — 与 svg.ico 同理 (见上方注释): iOS/WebKit 下只用 CSS width/height 约束的 inline SVG 会错算尺寸, 导致 verdict 里星星 + 文字 (如「别租」) 被撑开 / 拆行 (用户 2026-06-09 截图反馈)。 */ .tier-star { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; } .tier-star.empty { opacity: 0.25; } .tier-stars-na { color: var(--sub, #888); } /* ════════════════════════════════════════════════════════════════ 琉璃 Liuli · Design System 2.0 材质层（覆盖段 · 集中可审 · /design-system 为准） 纪律：真玻璃（backdrop-filter）只给 chrome —— dock(#nav-tabs 已改) / 浮层 / 用户菜单； 列表卡片一律「准玻璃」（tint+高光+倒角，零 blur 开销）。同屏真玻璃 ≤6（移动 ≤4）。 ════════════════════════════════════════════════════════════════ */ /* ── 氛围底景（默认开 · body.no-ambience 关 = 素底）── */ #liuli-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } #liuli-bg i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } #liuli-bg .a { width: 560px; height: 520px; left: -7%; top: -13%; background: var(--au-1); } #liuli-bg .b { width: 640px; height: 560px; right: -11%; top: 5%; background: var(--au-2); } #liuli-bg .c { width: 520px; height: 470px; left: 14%; bottom: -17%; background: var(--au-3); } @media (min-width: 1024px) { #liuli-bg .a { animation: liuli-d1 64s ease-in-out infinite alternate; } #liuli-bg .b { animation: liuli-d2 76s ease-in-out infinite alternate; } #liuli-bg .c { animation: liuli-d3 58s ease-in-out infinite alternate; } } @keyframes liuli-d1 { to { transform: translate(8vw, 6vh) scale(1.10); } } @keyframes liuli-d2 { to { transform: translate(-6vw, 9vh) scale(0.94); } } @keyframes liuli-d3 { to { transform: translate(7vw, -5vh) scale(1.08); } } #liuli-noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.02; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ⭐ 白天不铺噪点（2026-08-15）。这层在深色底上是"胶片颗粒"，在近白底上是**污渍**： `mix-blend-mode: multiply` 只能把白底往暗里压，于是每个噪点都变成一粒灰麻点， 整屏读起来就是"没擦干净"。congyang 报的"脏感"里，这是唯一一处**逐像素**的脏。 质感白天改由 --bevel 顶高光 + --edge 描边 + 接触影去给，不靠颗粒。 */ [data-theme="light"] #liuli-noise { display: none; } body.no-ambience #liuli-bg, body.no-ambience #liuli-noise { display: none; } @media (prefers-reduced-motion: reduce) { #liuli-bg i { animation: none !important; } } @media (prefers-reduced-transparency: reduce) { #liuli-bg { opacity: 0.5; } } /* ── 准玻璃聚合（主卡面：对角高光 + tint + 外缘 + 顶缘倒角 + 浮起影）── */ .card, .pos, .rec-card, .landlord-panel, .edu-card, .summary, .rank-ladder, .ms-card { background: var(--glass-grad), var(--glass); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow); } .card, .pos, .rec-card { border-radius: 16px; } .landlord-panel { border-color: var(--accent-soft); } .morning-brief { background: radial-gradient(140% 100% at 0% 0%, rgba(var(--accent-rgb), 0.07) 0%, rgba(var(--accent-rgb), 0) 50%), var(--glass-grad), var(--glass); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--bevel), var(--shadow); } @media (hover: hover) and (pointer: fine) { .pos:hover, .rec-card:hover { border-color: var(--line-2); box-shadow: var(--bevel), var(--shadow-lg); } } /* tab-page 全屏态不要卡片光学细节（它是页面不是卡） */ body.is-tab-page .morning-brief.tab-shown, body.is-tab-page .edu-card.tab-shown, body.is-tab-page #rec-form.rec-form, body.is-tab-page .review-modal { background: var(--bg) !important; border: none !important; box-shadow: none !important; } /* ── 真玻璃浮层（lg-3 厚琉璃：center modal / bottom-sheet / 用户菜单）── */ .app-modal, .user-menu, .open-pos-modal, .account-modal, #coach-modal, #assigned-modal, #journal-modal, .compare-modal, .sector-drill-modal, #preview-modal, .migrate-modal, .review-modal, .rec-form.modal { background: var(--glass-grad), rgba(16,19,30,0.80); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow-lg); } :root[data-theme="light"] .app-modal, :root[data-theme="light"] .user-menu, :root[data-theme="light"] .open-pos-modal, :root[data-theme="light"] .account-modal, :root[data-theme="light"] #coach-modal, :root[data-theme="light"] #assigned-modal, :root[data-theme="light"] #journal-modal, :root[data-theme="light"] .compare-modal, :root[data-theme="light"] .sector-drill-modal, :root[data-theme="light"] #preview-modal, :root[data-theme="light"] .migrate-modal, :root[data-theme="light"] .review-modal, :root[data-theme="light"] .rec-form.modal { background: var(--glass-grad), rgba(255,254,250,0.92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .app-modal, .user-menu, .open-pos-modal, .account-modal, #coach-modal, #assigned-modal, #journal-modal, .compare-modal, .sector-drill-modal, #preview-modal, .migrate-modal, .review-modal, .rec-form.modal { background: var(--card-solid); } } @media (prefers-reduced-transparency: reduce) { .app-modal, .user-menu, .open-pos-modal, .account-modal, #coach-modal, #assigned-modal, #journal-modal, .compare-modal, .sector-drill-modal, #preview-modal, .migrate-modal, .review-modal, .rec-form.modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); } } .app-modal { border-radius: 22px; transition: opacity var(--dur-modal) var(--ease-out), transform var(--dur-modal) var(--ease-pour); } /* scrim 统一色 + 把世界推远 */ .modal-backdrop, .app-modal-scrim { background: var(--scrim); } /* ── 按钮：胶囊化 + 实金「确定」── */ .app-modal .btn-primary, .app-modal .btn-danger, .app-modal .btn-secondary { border-radius: 999px; } .app-modal .btn-primary, .rec-card .add-btn { background: var(--gold-grad); color: var(--gold-ink); border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); transition: transform var(--dur-quick) var(--ease-spring), filter var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } .app-modal .btn-primary:hover, .rec-card .add-btn:hover { background: var(--gold-grad); filter: brightness(1.06); transform: translateY(-1px); } .rec-card .add-btn { border-radius: 999px; } .app-modal .btn-danger { background: linear-gradient(160deg, #FF9A93 -16%, #F06560 38%, #C73E45 118%); color: #fff; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(80,0,0,0.16), 0 5px 16px -6px rgba(220,90,90,0.38); } .app-modal .btn-primary:not([disabled]):active, .app-modal .btn-danger:not([disabled]):active, .rec-card .add-btn:not([disabled]):active { transform: scale(0.96); transition-duration: var(--dur-instant); } /* ── 表单：凹面 well ── */ .app-modal .field input, .app-modal .field select, .app-modal .field textarea, .am-input { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } .app-modal .field input:focus, .app-modal .field select:focus, .app-modal .field textarea:focus, .am-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3.5px rgba(var(--accent-rgb), 0.20); } /* ── 字体声部：品牌/大数字 ── */ .header h1 { font-family: var(--font-display); } .summary .item .val { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ── 推荐大按钮（桌面主 CTA）：实金琉璃 · 圆角矩形（2026-06-11 用户拍板：与复盘报告同形和谐）── */ .rec-btn-large { background: var(--gold-grad); color: var(--gold-ink); border: none; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 6px 18px -6px rgba(214,166,86,0.42); } .rec-btn-large:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 10px 26px -6px rgba(214,166,86,0.52); } .rec-btn-large:not([disabled]):active { transform: scale(0.98); } /* ── 浮层透视 audit：sticky/fixed「遮挡面」不许半透（--card 已转 tint）── */ .rec-form h4, .cloud-sync-status, #qb-exit, .add-flyer, .compare-table th:first-child, .compare-table td:first-child, .compare-table thead th { background: var(--card-solid); } /* ── 模块内部控件 2.0（coach / open-pos / journal / account / report / coins —— CSS 全在本文件，聚合升级）── */ /* 选项 chips → 胶囊 */ #coach-modal .coach-opt { border-radius: 999px; background: var(--fill); border-color: var(--line); } #coach-modal .coach-opt.on { background: var(--accent-tint); border-color: rgba(var(--accent-rgb), 0.55); } /* 主操作按钮 → 实金胶囊（生成防守方案 / 开仓提交 / 保存）*/ #coach-modal .coach-cta, .op-submit, .am-save, .rp-save-btn, .jr-save, #preview-modal .add-btn, .strangle-pair-card .strangle-add-btn { background: var(--gold-grad); color: var(--gold-ink); border: none; border-radius: 999px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); transition: transform var(--dur-quick) var(--ease-spring), filter var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } #coach-modal .coach-cta:hover, .op-submit:hover, .am-save:hover, .rp-save-btn:hover, .jr-save:hover, #preview-modal .add-btn:hover, .strangle-pair-card .strangle-add-btn:hover { background: var(--gold-grad); opacity: 1; filter: brightness(1.06); transform: translateY(-1px); } #coach-modal .coach-cta:not([disabled]):active, .op-submit:not([disabled]):active, .am-save:not([disabled]):active, #preview-modal .add-btn:not([disabled]):active, .strangle-pair-card .strangle-add-btn:not([disabled]):active { transform: scale(0.97); transition-duration: var(--dur-instant); } /* 次级按钮 → 玻璃胶囊 */ .coach-btn { border-radius: 999px; background: var(--fill-2); border: 1px solid var(--line-2); color: var(--text); } .coach-btn:hover { background: var(--accent-tint-strong); color: var(--accent-light); border-color: rgba(var(--accent-rgb), 0.45); } /* 输入/文本域 → 凹面 well（modal 域内通用，含 coach 目标价 / journal 备注 / open-pos 数字） ⚠️ checkbox 排除：well 化 + 下方 appearance:none 会把 #assigned-modal 的勾选框变成空白凹槽（无对勾）*/ #coach-modal .coach-fld, #coach-modal textarea, #journal-modal textarea, #assigned-modal input:not([type=checkbox]), .open-pos-modal input, .open-pos-modal select, .review-modal input:not([type=checkbox]), .review-modal select, .account-modal input, .account-modal select { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } #coach-modal .coach-fld input { background: transparent; box-shadow: none; } /* 分段按钮（account / report）→ 凹槽 + 浮起选中 */ .am-seg-btn, .rp-seg-btn { border-radius: 999px; } /* coach 诊断 chips 已是胶囊 → 换 fill 介质 */ #coach-modal .coach-chip { background: var(--fill); } /* ── QA-6（2026-06-11 用户连报）：加仓预览 / strangle 候选卡 / 对比 modal 内层卡 · 账户复合输入 ── */ /* 真玻璃浮层内层卡：玻璃不叠玻璃 → fill 介质 + 14px（preview 分区 / 对比分组卡 / 对比头卡 / strangle 双腿卡） */ .preview-section, .cmp-group, .cmp-head-card, .strangle-pair-card .leg-A { background: var(--fill); border: 1px solid var(--line); border-radius: 14px; } .cmp-head-card.winner { background: linear-gradient(180deg, rgba(52,211,153,0.10), rgba(52,211,153,0.03)); } .strangle-pair-card .pair-summary-A { border-radius: 14px; } .strangle-pair-card .leg-A-meta .leg-chip { background: var(--fill); } .preview-warn { border-radius: 12px; border-color: rgba(251,146,60,0.45); } /* 对比「去看 winner」CTA → 胶囊（绿 = winner 语义色保留）+ 玻璃高光 */ .cmp-cta-winner { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 5px 14px -6px rgba(52,211,153,0.45); } .cmp-cta-winner:hover { filter: brightness(1.06); transform: translateY(-1px); } /* 账户复合输入（$ 前缀 .am-input-wrap / 正股行 .sr-box）：well 上到 wrap、内层 input 还原透明 —— 防「框中框」（.account-modal input 一刀切 well 化把 wrap 里的 input 又凹了一层，2026-06-11 用户报） */ .account-modal .am-input-wrap, .account-modal .stock-row .sr-box { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .account-modal .am-input-wrap:focus-within, .account-modal .stock-row .sr-box:focus-within { border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3.5px rgba(var(--accent-rgb), 0.20); } .account-modal .am-input-wrap input, .account-modal .stock-row .sr-box input, .account-modal .am-input-wrap input:focus, .account-modal .stock-row .sr-box input:focus { background: transparent; border: none; border-radius: 0; box-shadow: none; } /* Safari：appearance 不归零会保留原生输入内饰（凹面 well 上叠出内框 — design-system .in 同步修）。select 除外（原生箭头） */ .app-modal .field input, .app-modal .field textarea, .am-input, #coach-modal textarea, #journal-modal textarea, #assigned-modal input:not([type=checkbox]), .open-pos-modal input, .review-modal input:not([type=checkbox]), .account-modal input, .stock-row .sr-box input { appearance: none; -webkit-appearance: none; } /* ── QA-7 全面补审（2026-06-11「剩下的你继续审计」）：散落平面金主按钮 → 实金 · seg 选中 · drill 内卡 ── */ .welcome-btn, .migrate-modal .btn-import, .edit-form .ef-save, .close-form button.cf-primary { background: var(--gold-grad); color: var(--gold-ink); border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); } .welcome-btn:hover, .migrate-modal .btn-import:hover, .edit-form .ef-save:hover, .close-form button.cf-primary:hover { filter: brightness(1.06); } .am-seg-btn.active, .rp-seg-btn.active, .review-bucket-toggle button.active { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 8px -2px rgba(214,166,86,0.40); } .sector-drill-action { border-radius: 14px; border-color: rgba(var(--accent-rgb), 0.35); } /* 对比候选浮动 pill → 实金配方（QA-6 续：用户截图 — 老平面金渐变） */ .compare-pill { background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 8px 24px -6px rgba(214,166,86,0.50); } .compare-pill:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 12px 30px -6px rgba(214,166,86,0.60); } .compare-pill .pill-count { background: rgba(33,20,2,0.16); border-radius: 999px; } .compare-pill .pill-x { color: rgba(33,20,2,0.55); } .compare-pill .pill-x:hover { color: rgba(33,20,2,0.95); } /* 加仓预览：取消 → 玻璃胶囊（确认按钮进下方实金聚合） */ #preview-modal .pv-cancel { background: var(--fill-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 999px; cursor: pointer; font-weight: 600; } #preview-modal .pv-cancel:hover { background: var(--accent-tint-strong); color: var(--accent-light); border-color: rgba(var(--accent-rgb), 0.45); } /* ── 复盘 tab 内部卡片（stat 格 / accordion / 策略分布 / 周期分布）→ 准玻璃 ── box-shadow 由「只有 bevel」补上 --shadow：原先白天白卡在白模态上无投影 → 全融成平面（用户报「可读性低」）。 bevel(顶高光) + shadow(抬起) 一起，白天读成抬起的白瓷砖、夜间维持原观感（--shadow 暗调很轻）。 */ .review-stat, .review-acc, .review-strat, .review-dur { background: var(--glass-grad), var(--glass); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--bevel), var(--shadow); } /* 白天给准玻璃卡补一道暗 hairline 描边：白边(--edge)在白底上看不见 → 卡边界靠它定形 */ :root[data-theme="light"] .review-stat, :root[data-theme="light"] .review-acc, :root[data-theme="light"] .review-strat, :root[data-theme="light"] .review-dur, :root[data-theme="light"] .review-llm { border: 1px solid var(--line); } .review-llm { border-radius: 14px; box-shadow: var(--bevel), var(--shadow); } /* ⭐ 白天：管家复盘不再铺整片金 tint（congyang 2026-08-15 真机截图 → 我采样量过： 那块底 R−B = **+11（偏暖）**，而同屏每一张白卡都是 −3（中性）—— 上一轮把整体调中性之后， 它成了**全页唯一的暖色面**，读起来就是「这块脏了」。 它要表达的是「这块特别」，不是「这块是黄的」→ 改成白卡 + **金色 hairline**， 沿用本仓已有的先例 `.landlord-panel { border-color: var(--accent-soft) }`（不新造做法）。 「特别」的信号交给标题那枚金图标 + 这圈金边，不靠一整片填充。夜间不动（深底上那层暖光是对的）。 */ :root[data-theme="light"] .review-llm { background: var(--card); border-color: var(--accent-soft); } .review-stat .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* ── toast：玻璃胶囊 ── */ .app-toast { border-radius: 999px; background: var(--glass-grad), rgba(16,19,30,0.86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow-lg); } :root[data-theme="light"] .app-toast { background: var(--glass-grad), rgba(255,254,250,0.92); } /* ════════════════════════════════════════════════════════════════ ⭐ 白天 · 写死夜间浅色的文字，逐条翻译（2026-08-15） ──────────────────────────────────────────────────────────────── 这是 `check_theme_overrides.py` 那条守卫的**镜像失效模式**： 那条查的是「底写死深色 + 文字随主题翻」； 这里是「**文字写死夜间浅色** + 底随主题翻」—— 白天＝浅字压浅底，一样看不见。 两边单看都对，合起来只坏白天那一半，所以夜间怎么看都发现不了。 全部命中项都是**同一个成因**：写这些行时只有夜间一个主题，浅蓝/浅紫/浅金/浅红绿 在深底上是对的，白天却掉到 1.5–2.7:1。做法是**翻译不是新造**—— 一律映射到已有语义 token（它们的白天值这一轮已经按 ≥4.5:1 调过）， 不引入任何新色（DESIGN §8.1「别自创色」）。夜间零改动。 ⚠️ 加新组件时如果又写死了一个夜间浅色，请回到这里补一条， 或者一开始就用 token —— `scripts/check_light_text.py` 会当场拦你。 */ /* Δ / 多头蓝 → --roll（白天 #2563EB，5.1:1） */ :root[data-theme="light"] .pos-stats .stat strong.dlt, :root[data-theme="light"] .pos-name .side-pill.buy, :root[data-theme="light"] .pos-long-note, :root[data-theme="light"] .pos-long-stats .lst .v.b, :root[data-theme="light"] .pos-note b.blue, :root[data-theme="light"] .open-pos-modal .la-rc-h .type-tag, :root[data-theme="light"] .mb-news-row.now .tag.rates { color: var(--roll); } /* Roll 来源 / 链接紫 → 同属 Roll 语义，走 --roll；手工来源灰蓝 → --slate（4.8:1） */ :root[data-theme="light"] .app-modal .ch-src.roll, :root[data-theme="light"] .app-modal .ch-link { color: var(--roll); } :root[data-theme="light"] .app-modal .ch-src.manual { color: var(--slate); } /* 宏观倒计时紫：app 空间不许用 --comm-*（DESIGN 空间色纪律）， 故沿用夜间 --au-2 那支紫 (124,108,255) 压暗到白天档，与 .mb-session-post 同色 */ :root[data-theme="light"] .mb-news-row.now .tag.macro_countdown { color: #5B46C8; } /* 琥珀 / 金一族 → --accent（4.8:1）；财报 pill 走 --amber 保住「第三色档」的区分 */ :root[data-theme="light"] .ar-takeaway.warn, :root[data-theme="light"] .conc-strip b, :root[data-theme="light"] .spread-card .sc-banner.warn .ico { color: var(--accent); } :root[data-theme="light"] .rec-earn-pill { color: var(--amber); } /* 双边收租腿标 put 红 / call 绿 → --red / --green（均已压到 ≥4.5:1） */ :root[data-theme="light"] .strangle-pair-card .leg-tag.put, :root[data-theme="light"] .app-modal .strangle-add-leg-head .leg-tag.put { color: var(--red); } :root[data-theme="light"] .strangle-pair-card .leg-tag.call, :root[data-theme="light"] .app-modal .strangle-add-leg-head .leg-tag.call, :root[data-theme="light"] .rec-regime-banner.bull .rb-tag { color: var(--green); } /* 浅金字压金 tint → --accent */ :root[data-theme="light"] .ctx-card .vb-primary .vb-s { color: var(--accent); } /* ⚠️⚠️ 修一个**上一轮自己引入的回归**（congyang 2026-08-15 看真机截图后让我细看各页才发现）。 上一轮把 `--accent-light` 在白天改暗（它 82 处当**强调文字**用，白天「更强调」＝更暗，那条是对的）。 但它还有 10 处是**金色填充渐变的亮端**，写法都是 `gradient(var(--accent-light) → var(--accent-2))`。 `--accent-2` 本来就暗 → 亮端一改暗，整条渐变变成 **暗→更暗 = 一块闷死的实色板**： · 「已累计收租」那条 6 个月柱状图 → 从有光泽的金柱变成一坨深褐色方块（截图可证） · 金币价签 / 管家头像 / 里程碑币 / 收租进度条 —— 同一个病 ⭐ 更要命的是**对比度**：价签上压着 `#1A1410` 深墨，实测 **6.25 → 3.01:1**， 等于我一边在修可读性、一边把这几处的可读性弄坏了。 ⭐ 教训（值得记）：**一个 token 同时兼「文字色」和「填充亮端」两个角色时， 两个主题的要求是相反的** —— 文字要更暗、填充亮端要更亮。上一轮我数了「82 处文字 vs 28 处填充， 按多数改」就动手了，**但少数派不是可以牺牲的，它只是需要单独安置**。 修法：这 10 处本来就该用 `--gold-grad` —— 它是 DESIGN 里**金色实填的 canonical token** （「主操作永远实金渐变」），本身就是按「金底 + 深墨」调好的，白天两端 #F8DA98 → #C9923A， 深墨压上去 13.4 / 9.6 / 6.7:1 全程达标。**不新造 token**（附录 A 白名单已有现成的）。 全部 light-scoped ⇒ **夜间逐字节不变**（本轮仍守「夜间零改动」）。 */ :root[data-theme="light"] .app-modal .cn-copy, :root[data-theme="light"] .landlord-panel .lp-pbar i, :root[data-theme="light"] .landlord-panel .lp-spark-bars i.cur, :root[data-theme="light"] .rl-track .rl-fill, :root[data-theme="light"] .review-llm-regen .cost-pill, :root[data-theme="light"] .review-llm-btn .cost-pill, :root[data-theme="light"] .morning-brief .mb-refresh .mb-refresh-cost, :root[data-theme="light"] .morning-brief .mb-avatar, /* ⭐ `.qb-item.primary` 是守卫比我的手工 grep 多找出来的两处之一（另一处是它的 :hover）： 写法是 `gradient(var(--accent), var(--accent-light))` —— 两个 token **顺序反过来**， 我那条正则只盯 accent-light 在前的形态就漏了。它上面压着 `color:#0A0A0B` 近黑字， 漏掉的话白天就是近黑字压深金底。**手工 grep 会按你想到的形态去找，守卫按规则找。** */ :root[data-theme="light"] .qb-item.primary, :root[data-theme="light"] .qb-item.primary:hover { background: var(--gold-grad); } /* 两处是 radial，拿不了 --gold-grad（那是 linear）→ 用它同一组色停写一份径向的。 改这里记得跟着上面 --gold-grad 的白天值走，别让两处漂开。 */ :root[data-theme="light"] .rent-ms-badge.done .rent-ms-coin, :root[data-theme="light"] .onb-done-ico { background: radial-gradient(circle at 35% 30%, #F8DA98, #C9923A); } :root[data-theme="light"] .rent-ms-badge.done .rent-ms-coin { border-color: #E9B85E; } /* ⚠️ 板块细条：底是 --iv-* 渐变，本轮把那条色阶从「夜间暗红→橄榄」换成了白天的浅色片， 于是原来压在暗底上正确的白字（rgba(255,255,255,0.92)）当场掉到 1.2:1。 ——**这条是本轮自己改出来的回归**，也是 check_light_text.py 补 rgba() 那半的由来 （第一版只查 #hex，正好漏掉它）。白天统一改深字，与上面 tile 同一口径。 */ :root[data-theme="light"] .sector-stripe { color: var(--text); } /* ════════════════════════════════════════════════════════════════ 琉璃 2.0 · QA-5 补完层（2026-06-11 全面 QA：控件全胶囊 / 实金选中 / 浮层下拉真玻璃 / well 表单 / 里程碑环 —— /design-system 为 single source of truth） ════════════════════════════════════════════════════════════════ */ /* ── 里程碑进度改回外圈环：mask 挖洞成环。coin 面转半透后，垫底 conic 整饼透出 （半透 token 透视回归同类），mask 让 .ring 只保留外缘 5px 环带，与内面透明度解耦 ── */ .rent-ms-coin .ring { -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); } /* ── 持仓卡操作行（27 卡同屏 → 准玻璃零 blur）：全行统一沿用「我该怎么办」(coach-btn) 的玻璃光影 （135° 渐变 + inset 顶/底高光 + 柔投影，逐字一致 → 整行光影统一，不自创新材质）· 全行同高（line-height 1.35 + 纵向 padding 统一 → 平仓不独高 / Roll 不显扁）· 平仓 = 同款玻璃、字金色（与 Roll 同金 var(--accent)）· 删除 = 去掉最外圈红框只留红字 ── */ .pos-actions .ghost, .pos-actions .primary { background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.015) 55%), rgba(16,19,30,0.52); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.04), 0 4px 12px -7px rgba(1,3,9,0.60); } :root[data-theme="light"] .pos-actions .ghost, :root[data-theme="light"] .pos-actions .primary { background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20) 55%), rgba(255,254,251,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px -7px rgba(72,56,30,0.18); } /* 全行同高：纵向 padding + 字号 + 行盒统一（line-height 显式，消除 Latin「Roll」比 CJK 行盒矮 → 显扁） */ .pos-actions .ghost, .pos-actions .primary, .pos-actions .coach-btn, .pos-actions .payoff-toggle { padding-top: 6px; padding-bottom: 6px; font-size: 11.5px; line-height: 1.35; } .pos-actions .ghost:active, .pos-actions .primary:active { transform: scale(0.96); transition-duration: var(--dur-instant); } .pos-actions .ghost:hover { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-light); } /* 平仓 = 玻璃胶囊（同 ghost），字金色（与 Roll 同金）；轻微加粗保留主操作辨识，无金底/金框 */ .pos-actions .primary { color: var(--accent); font-weight: 600; } .pos-actions .primary:hover { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-light); transform: none; opacity: 1; } .pos-actions .roll-btn { color: var(--accent); } .pos-actions .roll-btn:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); } /* 删除 = 去掉红外框（留红字）；hover 才回一点红 */ .pos-actions .del-btn { border-color: var(--edge); color: var(--red); } .pos-actions .del-btn:hover { border-color: rgba(var(--red-rgb), 0.45); background: rgba(var(--red-rgb), 0.08); color: var(--red); } /* coach-btn 维持玻璃胶囊（--fill-2 本次已真正定义进 :root —— 之前 token 缺失退化透明） */ /* ── strangle/spread 推荐卡「加入持仓」→ 实金胶囊 ── */ .spread-card .sc-action button { border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); } .spread-card .sc-action button[disabled] { background: var(--card3); color: var(--sub); box-shadow: none; } /* ── 持仓工具栏（全选/简洁模式/排序）：玻璃填充胶囊；新增持仓 + 实金 ── */ .pos-toolbar button, .pos-toolbar select { border-radius: 999px; background-color: var(--fill); border: 1px solid var(--line-2); } .pos-toolbar button.add-btn { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px -4px rgba(214,166,86,0.40); } .pos-toolbar button.add-btn:hover { background: var(--gold-grad); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px -4px rgba(214,166,86,0.50); } /* ── 复盘报告侧栏按钮：与找合约同形圆角矩形 + 玻璃填充 ── */ .review-btn { border-radius: 16px; background: var(--fill); } /* 白天：次级 CTA 卡（复盘报告/读报 同族）用裸 --fill 会和浅底融合（用户反馈「按钮和背景融合了」）→ 给白卡身 + 描边 + 柔投影，与「找合约」同形立体、不再隐形 */ :root[data-theme="light"] .review-btn { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); } /* ── 等级阶梯 modal 按钮 ── */ .ld-btn { border-radius: 999px; background: var(--fill); border-color: var(--line-2); } .ld-btn.primary { background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); } .ld-btn.primary:hover { background: var(--gold-grad); filter: brightness(1.06); } /* ── rec-form 找合约 modal 内部控件 2.0（方块→胶囊 / 平面金选中→实金渐变 / 输入→凹面 well）── */ .rec-form .rec-mode-tabs { background: var(--well); border-color: var(--line); border-radius: 999px; box-shadow: var(--well-sh); } .rec-form .rmt-tab { border-radius: 999px; } .rec-form .rmt-tab.active { background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); } .rec-form .opt-btn { border-radius: 12px; background: var(--fill); border-color: var(--line-2); } .rec-form .opt-btn:hover { background: var(--accent-tint); border-color: var(--accent-soft); } .rec-form .opt-btn.selected, :root[data-theme="light"] .rec-form .opt-btn.selected { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(60,30,0,0.12), 0 4px 14px -4px rgba(214,166,86,0.40); } /* 白天：金色选项卡只留亮顶高光，去掉外发光金投影——这些卡嵌在绿色 strategy-card 容器里， 金投影的上沿模糊压在绿底上＝发暗的「暗顶线」（用户两次报「选项暗顶线」的真凶）。 卡靠金色本身就和白色兄弟卡区分，不需要外投影。 */ :root[data-theme="light"] .rec-form .opt-btn.selected { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); } .rec-form .opt-btn.selected .opt-title, .rec-form .opt-btn.selected .ib-title, .rec-form .opt-btn.intent-btn.selected .ib-title { color: var(--gold-ink); } .rec-form .opt-btn.selected .opt-sub, .rec-form .opt-btn.selected .ib-sub, .rec-form .opt-btn.intent-btn.selected .ib-sub { color: rgba(33,20,2,0.72); opacity: 1; } .rec-form .row[data-section="direction"] .opt-btn { border-radius: 999px; } .rec-form .opt-btn.date-pill { border-radius: 999px; } .rec-form .opt-btn.intent-btn { border-radius: 14px; } .rec-form .row[data-section="risk"] .opt-btn { border-radius: 14px; } .rec-form .strategy-card { border-radius: 16px; background: var(--fill); } .rec-form .goal-card { border-radius: 14px; background: var(--fill); } .rec-form .goal-card:hover { background: var(--accent-tint); border-color: var(--accent-soft); } .rec-form .goal-card.selected { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(60,30,0,0.12), 0 4px 14px -4px rgba(214,166,86,0.40); } .rec-form .goal-card.selected .gc-s { color: rgba(33,20,2,0.72); } .rec-form input[type="text"], .rec-form input[type="number"] { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .rec-form .rec-date-input { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .rec-form .rec-goal-num { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .rec-form .rec-goal-num input { background: transparent; border: none; box-shadow: none; border-radius: 0; } .rec-form .ti-chips { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .rec-form button.submit { border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); } .rec-form button.submit:hover { background: var(--gold-grad); filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 8px 22px -6px rgba(214,166,86,0.52); } .rec-form button.submit:disabled { background: var(--card2); color: var(--sub); box-shadow: none; filter: none; transform: none; } .rec-form button.cancel { border-radius: 999px; background: var(--fill); border: 1px solid var(--line); } .rec-intent-hint { border-radius: 12px; } .rec-form .rec-goal-preview { border-radius: 12px; } .disclaimer { border-radius: 12px; } /* ── 持仓卡 inline 表单族 2.0（登记 add-form / 编辑 edit-form / 平仓 close-form —— QA-5 漏网， 2026-06-11 用户截图「这个模块还是老设计」）：容器准玻璃 / 输入凹面 well / Call·Put 双轨 well+实金药丸 / 主操作实金胶囊 + 次级凸玻璃胶囊（同 rec-form/QA-5 配方）── */ .add-form { background: var(--glass-grad), var(--card); border: 1px solid var(--edge); /* 统一四边 edge —— 老设计的金顶条（border-top accent）随 2.0 移除 */ border-radius: 16px; box-shadow: var(--bevel), var(--shadow); } .add-form .field input, .add-form .field select, .add-form .occ-row input, .edit-form input, .close-form input { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .add-form .field input:focus, .add-form .field select:focus, .add-form .occ-row input:focus, .edit-form input:focus, .close-form input:focus { border-color: var(--accent-soft); } /* Call/Put 类型双轨：well 凹槽 + 选中实金药丸（同 rec-mode-tabs 配方） */ .add-form .type-radios { background: var(--well); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--well-sh); padding: 3px; gap: 3px; } .add-form .type-radios label { background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; color: var(--sub); transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .add-form .type-radios label:has(input:checked) { background: var(--gold-grad); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); } .add-form .type-radios input:checked + span { color: var(--gold-ink); font-weight: 700; } /* OCC 粘贴展开区 + 预览条：圆角对齐 token（dashed 金胶囊触发器保留 — 辨识度即功能）；摘要走 well */ .add-form .occ-row.expanded .occ-expanded { border-radius: 12px; } .add-form .preview { background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); } .close-form .cf-summary { background: var(--well); border-radius: 12px; box-shadow: var(--well-sh); } /* 主操作 实金胶囊：登记 / 保存 / 确认平仓（同 rec-form submit 配方） */ .add-form .actions .submit, .edit-form .ef-save, .close-form button.cf-primary { border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 5px 16px -6px rgba(214,166,86,0.42); } .add-form .actions .submit:hover, .edit-form .ef-save:hover, .close-form button.cf-primary:hover { background: var(--gold-grad); filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 8px 22px -6px rgba(214,166,86,0.52); } .add-form .actions .submit:disabled { background: var(--card2); color: var(--sub); box-shadow: none; filter: none; transform: none; } /* 次级 凸玻璃胶囊：取消（QA-5 动作钮配方 · 暗/亮双主题） */ .add-form .actions .cancel, .edit-form .ef-cancel, .close-form button.cf-cancel { border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.015) 55%), rgba(16,19,30,0.52); border: 1px solid var(--edge); color: var(--sub); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.04), 0 4px 12px -7px rgba(1,3,9,0.60); } .add-form .actions .cancel:hover, .edit-form .ef-cancel:hover, .close-form button.cf-cancel:hover { color: var(--text); border-color: var(--edge); transform: translateY(-1px); } :root[data-theme="light"] .add-form .actions .cancel, :root[data-theme="light"] .edit-form .ef-cancel, :root[data-theme="light"] .close-form button.cf-cancel { background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20) 55%), rgba(255,254,251,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px -7px rgba(72,56,30,0.18); } /* ═══════════════════════════════════════════════════════════════════════ 分段控件「实金药丸」左右滑动（2026-06-16 · 用户：Call/Put 这类切换做成滑动动画） 手感 = C 液态（设计系统 --ease-pour · 260ms · 用户从 /seg-pick 三候选里拍板）。 把「凹槽轨 + 实金药丸」族的选中高亮从「直接换位置」改成单个药丸用 ::before 滑过去 —— 纯 CSS / :has() 定位 / GPU transform / 零 JS / 不动任何 markup。 覆盖 5 个控件：Call/Put · 目标·策略驱动 · 回执卡样式 A/B/C(3 段) · 回执卡 $%开关 · 复盘 按月/按周。段宽统一等宽，药丸位移按选中项 nth 计算。 （账户类型 .am-seg = 分立按钮带间距的另一种样式，不属此族，未改。） ═══════════════════════════════════════════════════════════════════════ */ /* 轨：定位上下文 + 关段间隙（连续轨药丸才滑得齐） */ .add-form .type-radios, .rec-form .rec-mode-tabs, .rp-seg, .review-bucket-toggle { position: relative; isolation: isolate; } .add-form .type-radios, .rp-seg { gap: 0; } /* 药丸本体（::before）：实金渐变 + 液态滑动 */ .add-form .type-radios::before, .rec-form .rec-mode-tabs::before, .rp-seg::before, .review-bucket-toggle::before { content: ''; position: absolute; z-index: 0; pointer-events: none; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 10px -2px rgba(214,166,86,0.45); transform: translateX(0); transition: transform 260ms var(--ease-pour); } .review-bucket-toggle::before { top: 2px; bottom: 2px; left: 2px; } /* 该轨 padding=2px */ /* 段：抬到药丸之上（+ 2 段族等宽） */ .add-form .type-radios label, .rec-form .rmt-tab, .app-modal .rp-seg-btn, .review-bucket-toggle button { position: relative; z-index: 1; } .add-form .type-radios label, .app-modal .rp-seg-btn { flex: 1; justify-content: center; text-align: center; } /* 选中段：金底交给 ::before → 段本身透明（深色文字保留，落在金药丸上） */ .add-form .type-radios label:has(input:checked) { background: transparent; box-shadow: none; border-color: transparent; } .rec-form .rmt-tab.active { background: transparent; box-shadow: none; } .app-modal .rp-seg-btn.active { background: transparent; box-shadow: none; } .review-bucket-toggle button.active { background: transparent; box-shadow: none; } /* 白天：装金色滑动药丸的分段轨道改「平」（去掉 --well-sh 暗内阴影）—— 凹槽暗内阴影压在亮金药丸上 = 用户看到的「金按钮顶上的深色线」。轨道扁平后金药丸自带柔投影即可立体。 注意：只改这几条「装药丸的轨道」，真·输入 well（日期/数字/备注框）仍保留凹陷不动。 */ :root[data-theme="light"] .rec-form .rec-mode-tabs, :root[data-theme="light"] .rec-form .seg-axis, :root[data-theme="light"] .rp-seg, :root[data-theme="light"] .review-bucket-toggle, :root[data-theme="light"] .add-form .type-radios { box-shadow: none; background: var(--fill); border-color: var(--line); } /* 2 段族：药丸占一半，选中第 2 段时滑到右半 */ .add-form .type-radios::before, .rp-seg.rp-toggle::before { width: calc(50% - 3px); } .review-bucket-toggle::before { width: calc(50% - 2px); } .add-form .type-radios:has(label:nth-of-type(2) input:checked)::before, .rp-seg.rp-toggle:has(.rp-seg-btn:nth-of-type(2).active)::before, .review-bucket-toggle:has(button:nth-of-type(2).active)::before { transform: translateX(100%); } /* 3 段族：药丸占 1/3，按选中位移 0 / 100% / 200% ⚠️ 找合约的 mode-tabs 2026-08-11 从两轨变三轨（加了「严选」），**从 2 段族搬到这里**。 漏搬的症状：药丸仍是 50% 宽 → 盖住第二个 tab 的字，而且永远滑不到第三格 （preview 真机截图当场看到）。加/删任何一条轨，记得跟着换族。 */ /* ⭐ 宽度按**实际段数**算，别写死 /3（congyang 2026-08-12 折叠屏 PWA 截图）： 那次是这个坑的**镜像版** —— 上面记的是「2 段 CSS 配 3 段 HTML」，他撞到的是 「**3 段 CSS 配 2 段 HTML**」：药丸 1/3 宽停在 33%-66%，而两段布局的字在 25%/75% → 药丸既盖不住任何字、看起来还是个空壳（他说的「残留」）。 成因：`index.html` 引 CSS 是裸 `/app.css` 没版本号，而 `sw.js` 对 HTML 是 network-first + **cache fallback** → 一次导航取失败 / PWA 从后台恢复旧文档， 就会出现「旧 HTML（两轨）+ 新 app.css（三段几何）」。缓存我们控不住， 但**可以让几何不怕它**：段数从 DOM 数出来，2 段就 50%、3 段就 33%。 `translateX(100%)` 是相对**药丸自身宽度**的 → 宽度一对，位置自动跟着对。 附带好处：将来加第四轨不用再「记得跟着换族」（上面那句提醒本身就是个警报 —— 需要人记住的几何，早晚会有人忘）。 */ .rp-seg:not(.rp-toggle), .rec-form .rec-mode-tabs { --seg-n: 3; } .rp-seg:not(.rp-toggle):not(:has(.rp-seg-btn:nth-of-type(3))), .rec-form .rec-mode-tabs:not(:has(.rmt-tab:nth-of-type(3))) { --seg-n: 2; } .rp-seg:not(.rp-toggle):has(.rp-seg-btn:nth-of-type(4)), .rec-form .rec-mode-tabs:has(.rmt-tab:nth-of-type(4)) { --seg-n: 4; } .rp-seg:not(.rp-toggle)::before, .rec-form .rec-mode-tabs::before { width: calc(100% / var(--seg-n) - 2px); } .rp-seg:not(.rp-toggle):has(.rp-seg-btn:nth-of-type(2).active)::before, .rec-form .rec-mode-tabs:has(.rmt-tab:nth-of-type(2).active)::before { transform: translateX(100%); } .rp-seg:not(.rp-toggle):has(.rp-seg-btn:nth-of-type(3).active)::before, .rec-form .rec-mode-tabs:has(.rmt-tab:nth-of-type(3).active)::before { transform: translateX(200%); } /* 无障碍：系统「减弱动态效果」→ 不滑，直接到位 */ @media (prefers-reduced-motion: reduce) { .add-form .type-radios::before, .rec-form .rec-mode-tabs::before, .rp-seg::before, .review-bucket-toggle::before { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ 语义滑轨（风险偏好 / 方向看法 · 2026-06-17 · 用户：做成滑动 + 变色交互） 凹槽轨 + 实金药丸，但药丸颜色按位置走「安全/看涨绿 → 平衡/震荡金 → 激进/看跌红」， 滑过去时颜色随之渐变（手感 = --ease-pour 液态 260ms）。纯 CSS / :has() 定位 / 零 JS。 方向已重排成 看涨 / 震荡 / 看跌（中性居中，颜色左→右连续）。 ═══════════════════════════════════════════════════════════════════════ */ /* 行：标签 / 轨 / 明细 竖排（覆盖原 3 列 grid） */ .rec-form .row[data-section="direction"], .rec-form .row[data-section="risk"] { display: block; } .rec-form .row[data-section="direction"] > .label, .rec-form .row[data-section="risk"] > .label { display: block; margin-bottom: 8px; } /* 轨 */ .rec-form .seg-axis { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--well); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--well-sh); } /* 药丸（::before）：默认金（位置 0），按 :has 改色改位 */ .rec-form .seg-axis::before { content: ''; position: absolute; z-index: 0; pointer-events: none; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 12px -3px rgba(214,166,86,0.5); transform: translateX(0); transition: transform 260ms var(--ease-pour), background 260ms ease, box-shadow 260ms ease; } /* 段：抬到药丸之上 + 等宽居中（高特异性 + !important 压过原 risk/direction opt-btn 规则） */ .rec-form .row[data-section="direction"] .seg-axis .opt-btn, .rec-form .row[data-section="risk"] .seg-axis .opt-btn { position: relative; z-index: 1; display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; /* 允许换行（而非 nowrap）：超窄屏 / 放大模式下长 EN 词（Long-term Bullish）才不会穿透药丸； 有空间时仍单行。配合下方 ≤480px 收起 icon 给文字更多横向空间。 */ white-space: normal; line-height: 1.12; font-size: 12px; grid-template-columns: none !important; grid-template-areas: none !important; min-height: 0 !important; padding: 9px 5px !important; border-radius: 999px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--sub); } .rec-form .row[data-section="direction"] .seg-axis .opt-btn:hover, .rec-form .row[data-section="risk"] .seg-axis .opt-btn:hover { background: transparent !important; border-color: transparent !important; color: var(--text); } /* 选中段：文字 + icon 统一深墨（跟 .rp-seg-btn.active 一致）。section-scoped 提特异性， 压过上面同 scope 的 color:var(--sub) 基础规则（否则 icon/文字仍是灰的）。*/ .rec-form .row[data-section="direction"] .seg-axis .opt-btn.selected, .rec-form .row[data-section="risk"] .seg-axis .opt-btn.selected { color: var(--gold-ink); font-weight: 600; } .rec-form .seg-axis .opt-btn .ico, .rec-form .seg-axis .opt-btn .opt-icon { width: 15px; height: 15px; } /* 位置 + 颜色：绿（保守/看涨）→ 金（平衡/震荡）→ 红（激进/看跌） */ .rec-form .seg-axis:has(.opt-btn:nth-of-type(1).selected)::before { transform: translateX(0%); background: linear-gradient(160deg, #6FE9BE -12%, #3FDD9C 42%, #1FA877 118%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 12px -3px rgba(63,221,156,0.5); } .rec-form .seg-axis:has(.opt-btn:nth-of-type(2).selected)::before { transform: translateX(100%); background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 12px -3px rgba(214,166,86,0.55); } .rec-form .seg-axis:has(.opt-btn:nth-of-type(3).selected)::before { transform: translateX(200%); background: linear-gradient(160deg, #FFB0AB -12%, #FF7E78 42%, #E0524C 118%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 12px -3px rgba(255,126,120,0.5); } /* 明细行（方向）+ 风险 hint 里的彩色 chip */ .rec-form .seg-axis-detail { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; color: var(--sub); line-height: 1.4; } .rec-form .seg-axis-detail:empty { display: none; } .rec-form .seg-axis-detail .seg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .rec-form .seg-axis-detail .seg-chip { font-family: var(--font-num); font-weight: 700; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; } .rec-form .seg-axis-detail b { color: var(--text); font-weight: 700; } .rec-form .seg-axis ~ .risk-hint { display: block; margin-top: 9px; } @media (prefers-reduced-motion: reduce) { .rec-form .seg-axis::before { transition: none; } } /* 手机 / 超窄屏：方向·风险段收起 icon，把全部横向空间留给文字（长 EN 标签不挤、基本回到单行） */ @media (max-width: 480px) { .rec-form .row[data-section="direction"] .seg-axis .opt-btn .opt-icon, .rec-form .row[data-section="risk"] .seg-axis .opt-btn .opt-icon { display: none; } .rec-form .row[data-section="direction"] .seg-axis .opt-btn, .rec-form .row[data-section="risk"] .seg-axis .opt-btn { gap: 0; padding-left: 3px !important; padding-right: 3px !important; } } /* EN：风险段长标签（Conservative/Aggressive）在「2 列 tf-risk」窄 modal（视口 641–820px，风险列 ~246–345px）下会撞出药丸 → 换行成「Conservativ / e」。EN 全程收起风险段 icon，把横向空间全给 文字（保 12px 不缩字号，比缩字更清晰）。药丸绿→金→红渐变已编码保守→激进语义，icon 冗余；ZH/繁中 标签短保留 icon（单用户只见一种语言，无不一致观感）。同 ≤480px icon-hide 先例。 */ html[lang="en"] .rec-form .row[data-section="risk"] .seg-axis .opt-btn .opt-icon { display: none; } html[lang="en"] .rec-form .row[data-section="risk"] .seg-axis .opt-btn { gap: 0; padding-left: 3px !important; padding-right: 3px !important; } /* ── 浮层 popover/menu（指标 ⓘ / 出场人设 / 简报日历 / 持仓 ⋯ 菜单 / 工具栏下拉）： 厚琉璃 —— 半透 --card 当浮层底是透视回归 ── */ .kmet-pop, .persona-popover, .mb-cal-pop, .pos-more-menu, .dropdown-menu { background: var(--glass-grad), rgba(16,19,30,0.86); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--bevel), var(--shadow-lg); } :root[data-theme="light"] .kmet-pop, :root[data-theme="light"] .persona-popover, :root[data-theme="light"] .mb-cal-pop, :root[data-theme="light"] .pos-more-menu, :root[data-theme="light"] .dropdown-menu { background: var(--glass-grad), rgba(255,254,250,0.92); } .persona-popover .pp-opt { border-radius: 9px; } .persona-popover .pp-opt:hover { background: var(--fill-2); border-color: var(--line); } .pos-more-menu .menu-item { border-radius: 9px; } .pos-more-menu .menu-item:hover { background: var(--fill-2); } .dropdown-menu button { border-radius: 9px; } .dropdown-menu button:hover { background: var(--fill-2); } .user-menu .um-item:hover { background: var(--fill-2); } /* ── 玻璃下拉 .dd：原生 select 弹板无法样式化（系统白菜单）→ 自定义 listbox（/design-system §表单）── */ .dd { position: relative; display: inline-flex; } .dd > select { display: none !important; } .dd-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--well-sh); color: var(--text); font-size: 12px; font-weight: 500; font-family: inherit; padding: 6px 12px; cursor: pointer; transition: border-color var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); } .dd.open .dd-btn { border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3px rgba(var(--accent-rgb), 0.18); } .dd-btn .dd-chev { width: 14px; height: 14px; color: var(--sub); flex: none; transition: transform var(--dur-quick) var(--ease-out); } .dd.open .dd-btn .dd-chev { transform: rotate(180deg); } .dd-pane { position: fixed; z-index: 1600; min-width: 178px; max-width: min(320px, calc(100vw - 24px)); max-height: min(80vh, 520px); overflow-y: auto; overscroll-behavior: contain; /* 够高：排序 14 项在桌面/常规手机一屏全显示不出滚动条；超长（标的筛选多票）才滚，且滚动不再误关（app.dd.js） */ padding: 6px; border-radius: 16px; background: var(--glass-grad), rgba(16,19,30,0.86); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-4px) scale(0.98); transform-origin: top left; transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-normal) var(--ease-pour); } .dd.open .dd-pane, .dd-pane.open { opacity: 1; pointer-events: auto; transform: none; } /* .dd-pane.open = portal 到 body 后的开态（app.dd.js） */ :root[data-theme="light"] .dd-pane { background: var(--glass-grad), rgba(255,254,250,0.92); } .dd-opt { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; cursor: pointer; color: var(--sub); font-size: 12.5px; font-family: inherit; text-align: left; padding: 8px 11px; border-radius: 10px; transition: background var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .dd-opt:hover { background: var(--fill-2); color: var(--text); } .dd-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .dd-opt.on { color: var(--accent); font-weight: 600; } .dd-opt .dd-ck { width: 14px; height: 14px; margin-left: auto; flex: none; color: var(--accent); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-quick), transform var(--dur-quick) var(--ease-spring); } .dd-opt.on .dd-ck { opacity: 1; transform: scale(1); } /* ── 📅 玻璃日历 app.cal.js（推荐「指定日期」原生 input 替换 · /calpick 用户拍 A · 2026-06-12）── */ .cal-host { display: block; width: 100%; } input.cal-enhanced { display: none !important; } /* 原生 input 退居 value 真源 */ /* 通用 trigger 底样式（凹面 well）——edit-form 等非 .rec-form / 非 .app-modal 场景兜底； .rec-form .rec-date-input (0,2,0) 与 .app-modal .cal-btn (0,2,0) 仍各自覆写 */ .cal-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); background: var(--well); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--well-sh); padding: 7px 10px; min-height: 38px; cursor: pointer; } .rec-form .cal-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; } .cal-btn .cal-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-btn .cal-val.ph { color: var(--dim); } .cal-btn .cal-ico { width: 16px; height: 16px; color: var(--sub); flex: none; } .cal-btn[aria-expanded="true"] { border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3px rgba(var(--accent-rgb), 0.18); } /* ⭐ 关着时 display:none —— pane 只在「portal 到 body」期间才可见，关掉会被塞回宿主（可能在 modal 里）。 以前关着的 pane 仍参与布局：318px 宽 + 上次开时留下的 viewport 坐标 left/top，落在 modal 的 containing block 里就撑出横向滚动 → 用户能把 modal 往右滑出一段空白（congyang 2026-08-06 截图）。 .cal-backdrop 本来就是 display:none/.show，这里对齐。open() 里先加 .cal-live 再量尺寸/加 .open。 */ .cal-pane { display: none; } .cal-pane.cal-live, .cal-pane.open { display: block; } .cal-pane { position: fixed; z-index: 1600; width: 318px; max-width: calc(100vw - 24px); padding: 12px; border-radius: 16px; background: var(--glass-grad), rgba(16,19,30,0.86); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--edge); box-shadow: var(--bevel), var(--shadow-lg); opacity: 0; pointer-events: none; transform: translateY(-4px) scale(0.98); transform-origin: top left; transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-normal) var(--ease-pour); } .cal-pane.open { opacity: 1; pointer-events: auto; transform: none; } :root[data-theme="light"] .cal-pane { background: var(--glass-grad), rgba(255,254,250,0.92); } .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .cal-title { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; letter-spacing: 0.2px; color: var(--text); } .cal-nav { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--fill); color: var(--sub); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .cal-nav:hover { background: var(--fill-2); color: var(--text); } .cal-nav[disabled] { opacity: 0.3; cursor: default; } .cal-nav svg { width: 15px; height: 15px; } .cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; } .cal-wd span { text-align: center; font-size: 10px; color: var(--dim); padding: 4px 0; font-weight: 600; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-pane .c { position: relative; height: 36px; border-radius: 11px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--sub); padding: 0; font-family: inherit; } .cal-pane button.c { cursor: pointer; } .cal-pane button.c:hover { background: var(--fill-2); color: var(--text); } .cal-pane .c.x { visibility: hidden; } .cal-pane .c.past, .cal-pane .c.we { color: var(--dim); opacity: 0.38; } .cal-pane .c.exp { color: var(--text); font-weight: 600; } .cal-pane .c.exp::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; width: 4px; height: 4px; border-radius: 99px; background: var(--accent); } .cal-pane .c.exp.mly::after { width: 12px; height: 3.5px; } .cal-pane .c.exp.zd::after { background: var(--red); } .cal-pane .c.today { box-shadow: inset 0 0 0 1.5px var(--line-2); } .cal-pane .c.sel { background: var(--gold-grad); color: var(--gold-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 10px -3px rgba(214,166,86,0.55); } .cal-pane .c.sel::after { background: var(--gold-ink); } .cal-pane .c.sel.zd { background: linear-gradient(160deg, #FFA59F -10%, #E2554E 60%, #B23830 120%); color: #2A0604; } .cal-pane .c.sel.zd::after { background: #2A0604; } .cal-legend { display: flex; gap: 13px; margin: 9px 2px 0; flex-wrap: wrap; } .cal-legend .lg { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--dim); } .cal-legend i { display: inline-block; flex: none; } .cal-legend .dot { width: 4px; height: 4px; border-radius: 99px; background: var(--accent); } .cal-legend .dot.mly { width: 12px; height: 3.5px; } .cal-legend .dot.zd { background: var(--red); } .cal-legend .ring { width: 10px; height: 10px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line-2); } .cal-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .cal-fmain { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .cal-chip { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--well); box-shadow: var(--well-sh); color: var(--sub); font-family: var(--font-num); } .cal-chip.zd { background: rgba(var(--red-rgb), 0.14); color: var(--red); box-shadow: none; font-family: inherit; font-weight: 600; } .cal-fsnap { font-size: 11px; color: var(--accent); } .cal-fsnap b { color: var(--accent); } .cal-fwarn { margin-top: 5px; font-size: 11px; color: var(--red); } .cal-fhint { font-size: 11px; color: var(--dim); } .rec-form .rec-date-zd { color: var(--red); font-weight: 600; } /* sheet（≤720px · 含 PWA）：§12 三铁律 — z≥1460 / backdrop override / nav-enabled 让出 dock */ .cal-backdrop { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 1455; } .cal-backdrop.show { display: block; } body.is-tab-page .cal-backdrop.show { display: block !important; z-index: 1455 !important; } .cal-pane.cal-sheet { left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; border-radius: 22px 22px 0 0; z-index: 1460; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(12px); background: var(--glass-grad), rgba(16,19,30,0.92); } :root[data-theme="light"] .cal-pane.cal-sheet { background: var(--glass-grad), rgba(250,251,255,0.94); } .cal-pane.cal-sheet.open { transform: none; } /* nav-tabs（z1500 浮 dock）存在的一切场景都让出净空 — 不只 is-tab-page（e2e 实测 modal 流也会被 dock 盖确认钮） */ body.nav-enabled .cal-pane.cal-sheet { bottom: var(--nav-clearance); max-height: calc(80vh - var(--nav-clearance)); border-radius: 22px 22px 18px 18px; padding-bottom: 18px; } .cal-pane.cal-sheet .c { height: 42px; font-size: 14px; } .cal-grab { width: 38px; height: 4px; border-radius: 4px; background: var(--dim); opacity: 0.5; margin: 3px auto 9px; } .cal-sh-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; } .cal-sh-head b { font-size: 14.5px; font-family: var(--font-display); color: var(--text); } .cal-tkr { font-size: 10.5px; padding: 2px 9px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-weight: 600; font-family: var(--font-num); } .cal-x { margin-left: auto; width: 26px; height: 26px; border-radius: 999px; border: none; background: var(--fill); color: var(--sub); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cal-actions { display: flex; gap: 10px; margin-top: 11px; } .cal-ok { flex: 1; border: none; cursor: pointer; border-radius: 999px; padding: 11px 0; font-size: 13.5px; font-weight: 700; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px -4px rgba(214,166,86,0.40); } .cal-cancel { flex: none; padding: 11px 18px; border-radius: 999px; cursor: pointer; background: var(--fill); border: 1px solid var(--line-2); color: var(--text); font-size: 13px; } /* ── 🗃 「数据」菜单对齐排序下拉（/calpick D 方案）：解除 11435 .pos-toolbar button 连坐 ── */ .pos-toolbar .dropdown > button { display: inline-flex; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--well-sh); } .pos-toolbar .dropdown > button:hover { background: var(--well); border-color: var(--line-2); transform: none; } .pos-toolbar .dropdown.open > button { border-color: rgba(var(--accent-rgb), 0.50); box-shadow: var(--well-sh), 0 0 0 3px rgba(var(--accent-rgb), 0.18); } .pos-toolbar .dropdown > button .dd-chev { width: 14px; height: 14px; color: var(--sub); flex: none; transition: transform var(--dur-quick) var(--ease-out); } .pos-toolbar .dropdown.open > button .dd-chev { transform: rotate(180deg); } .pos-toolbar .dropdown-menu { border-radius: 16px; padding: 6px; min-width: 212px; } /* ⚠️ 必须 shorthand background + box-shadow:none：下方「按钮立体感」层（11917）给 .pos-toolbar button 上了 background-image 渐变 + bevel 阴影，background-color 长属性压不住 */ .pos-toolbar .dropdown-menu button { background: transparent; border: none; box-shadow: none; border-radius: 10px; -webkit-appearance: none; appearance: none; display: flex; align-items: center; gap: 9px; padding: 8px 11px; font-size: 12.5px; color: var(--sub); min-height: 0; } :root[data-theme="light"] .pos-toolbar .dropdown-menu button { background: transparent; box-shadow: none; } .pos-toolbar .dropdown-menu button:hover { background: var(--fill-2); color: var(--text); border-color: transparent; transform: none; } .pos-toolbar .dropdown-menu button:active { transform: none; } .pos-toolbar .dropdown-menu button .mi { width: 15px; height: 15px; color: var(--sub); flex: none; } .pos-toolbar .dropdown-menu hr { display: none; } /* ── 等级梯子 / 里程碑卡（独立主列卡，已并入上方玻璃聚合）：内部 hover 换 fill 介质 ── */ .ms-head:hover { background: var(--fill-2); } /* ── 简报 tab 内部：锁卡 CTA / 今日事项行 / P 卡 CTA 胶囊化 + fill 介质 ── */ .mb-lock-btn { border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px -4px rgba(214,166,86,0.40); } .mb-focus-item { background: var(--fill); border-radius: 12px; } .mb-focus-action { border-radius: 999px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40); } .mb-priority-cta { border-radius: 999px; } /* ── 金币 modal：chips/items fill 介质 ── */ .app-modal .cn-chip { background: var(--fill); } .app-modal .cn-item { background: var(--fill); } /* ── compare 对比 modal 按钮胶囊 + watchlist 行 fill 介质 ── */ .cmp-btn-ghost { border-radius: 999px; background: var(--fill); } .cmp-cta-winner { border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 14px -5px rgba(63,221,156,0.45); } .app-modal .wl-row { background: var(--fill); border-radius: 12px; } .app-modal .wl-del { border-radius: 999px; } /* ── 🏠 欢迎引导 ·「样板间」（app.welcome.js · /welcome-pick 用户拍板 B 空状态英雄卡）── */ #welcome-hero { margin-bottom: 14px; } .wl-hero { border: 1px solid var(--accent-soft); border-radius: 18px; background: linear-gradient(150deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.015) 52%), var(--glass-grad), var(--card); box-shadow: var(--bevel), var(--shadow-lg); padding: 28px 24px 22px; text-align: center; } .wl-mark { display: block; width: 42px; height: 42px; color: var(--accent); margin: 0 auto 8px; } .wl-mark svg { width: 100%; height: 100%; } .wl-h1 { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); } .wl-h2 { color: var(--sub); font-size: 13.5px; margin: 7px auto 18px; max-width: 520px; } .wl-entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; text-align: left; } .wl-entry { display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; border: 1px solid var(--edge); border-radius: 14px; padding: 13px 14px; background: var(--glass-grad), var(--card2); color: var(--text); box-shadow: var(--bevel), var(--shadow); transition: transform var(--dur-quick) var(--ease-spring), border-color var(--dur-quick) var(--ease-out), filter var(--dur-quick) var(--ease-out); } .wl-entry:hover { border-color: var(--accent-soft); transform: translateY(-1px); } .wl-entry:active { transform: scale(0.98); transition-duration: var(--dur-instant); } .wl-entry.gold { background: var(--gold-grad); border-color: transparent; color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), inset 0 -1px 0 rgba(60,30,0,0.14), 0 6px 18px -6px rgba(214,166,86,0.5); } .wl-entry.gold:hover { filter: brightness(1.06); } .wl-entry[disabled] { opacity: 0.6; pointer-events: none; } .wl-et { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; } .wl-et svg { width: 16px; height: 16px; flex: none; } .wl-ed { display: block; font-size: 11.5px; margin-top: 4px; opacity: 0.85; } .wl-entry:not(.gold) .wl-ed { color: var(--sub); } .wl-foot { font-size: 11.5px; color: var(--dim); margin-top: 14px; } .wl-dismiss { color: var(--dim); text-decoration: underline; cursor: pointer; margin-left: 6px; } .wl-dismiss:hover { color: var(--sub); } @media (max-width: 720px) { .wl-entries { grid-template-columns: 1fr; } .wl-hero { padding: 22px 16px 18px; } } /* sim-bar：有模拟持仓时的常驻细条（清空入口必须始终可见） */ .wl-simbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--accent-soft); border-radius: 12px; padding: 8px 14px; background: var(--accent-tint); font-size: 12px; color: var(--sub); } .wl-simbar b { color: var(--accent); } .wl-simbar-sub { flex: 1 1 200px; } .wl-btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-weight: 600; font-size: 11.5px; line-height: 1; color: var(--sub); height: 28px; padding: 0 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.015) 55%), rgba(16,19,30,0.52); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.04), 0 4px 12px -7px rgba(1,3,9,0.60); transition: transform var(--dur-quick) var(--ease-spring), color var(--dur-quick) var(--ease-out); } .wl-btn-ghost:hover { transform: translateY(-1px); color: var(--text); } .wl-btn-ghost:active { transform: scale(0.96); transition-duration: var(--dur-instant); } :root[data-theme="light"] .wl-btn-ghost { background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20) 55%), rgba(255,254,251,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px -7px rgba(72,56,30,0.18); } /* 持仓卡「模拟」chip */ .paper-chip { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-tint); border-radius: 999px; padding: 1px 8px; flex: none; } /* 欢迎卡出现时：隐藏重复占位文案（避免双横幅） */ body.welcome-active .tk-empty { display: none; } /* ── tour 模式 tooltip：硬编码旧暗面 → token 化（light 主题同步正确）+ 控件胶囊 ── */ #tour-tooltip { background: var(--card-solid); border-color: var(--accent-soft); border-radius: 14px; color: var(--text); box-shadow: var(--bevel), var(--shadow-lg); } #tour-tooltip .tt-step, #tour-tooltip .tt-title, #tour-tooltip .tt-body b { color: var(--accent); } #tour-tooltip .tt-body { color: var(--text); } #tour-tooltip .tt-ctrl { border-top: 1px dashed var(--line-2); } #tour-tooltip .tt-btn { border-radius: 999px; color: var(--sub); border: 1px solid var(--line-2); background: var(--fill); } #tour-tooltip .tt-btn:hover { color: var(--text); border-color: var(--accent-soft); } #tour-tooltip .tt-btn.primary { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); } #tour-tooltip .tt-btn.primary:hover { background: var(--gold-grad); filter: brightness(1.06); } #tour-tooltip .tt-arrow { background: var(--card-solid); border-color: var(--accent-soft); } /* ── 按钮立体感（2026-06-11 用户「app 按钮太平面，没有 ds 页那种按钮感」）： design-system .b-gls 配方落地 = 玻璃体(暗 tint 0.52)+135° 高光+亮顶倒角+投影，零 blur 列表安全。 范围=动作按钮；表单选择 chips（opt-btn/preset 等）按 DS 保持平 fill（凹/平/凸三层语义） ── */ .coach-btn, .pos-toolbar button, .rec-form button.cancel, .ld-btn, .cmp-btn-ghost, .review-btn, .mb-priority-cta, #tour-tooltip .tt-btn, .app-modal .wl-del, .app-modal .btn-secondary { background: linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.015) 55%), rgba(16,19,30,0.52); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(255,255,255,0.04), 0 4px 12px -7px rgba(1,3,9,0.60); } :root[data-theme="light"] .coach-btn, :root[data-theme="light"] .pos-toolbar button, :root[data-theme="light"] .rec-form button.cancel, :root[data-theme="light"] .ld-btn, :root[data-theme="light"] .cmp-btn-ghost, :root[data-theme="light"] .review-btn, :root[data-theme="light"] .mb-priority-cta, :root[data-theme="light"] #tour-tooltip .tt-btn, :root[data-theme="light"] .app-modal .wl-del, :root[data-theme="light"] .app-modal .btn-secondary { background: linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.20) 55%), rgba(255,254,251,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px -7px rgba(72,56,30,0.18); } /* urgent CTA 是实心红警示按钮（白字）——上面的浅色玻璃通用覆写会把它的红底盖成白底， 而 color:white 没被盖 → 白字白底=隐形（只剩红描边）。白天模式下显式夺回红底实心样式。 */ :root[data-theme="light"] .mb-priority-item.urgent .mb-priority-cta { background: var(--red-cta); color: white; border-color: var(--red-cta); box-shadow: 0 2px 6px rgba(var(--red-rgb), 0.22); } .coach-btn:active, .pos-toolbar button:active, .rec-form button.cancel:active, .ld-btn:active, .cmp-btn-ghost:active, .mb-priority-cta:active, #tour-tooltip .tt-btn:active, .app-modal .wl-del:active { transform: scale(0.96); transition-duration: var(--dur-instant); } /* 排序玻璃下拉 trigger 保持凹面 well（凹=输入选择 / 凸=动作，三层介质语义不混） */ .pos-toolbar .dd-btn { background: var(--well); border: 1px solid var(--line); box-shadow: var(--well-sh); } .pos-toolbar .dd-btn:active { transform: none; } /* 新增持仓 实金按钮的金 shadow 优先级重申（上面组选择器 (0,1,1) 会盖 (0,2,1) 之外的属性） */ .pos-toolbar button.add-btn { background: var(--gold-grad); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px -4px rgba(214,166,86,0.40); } /* ── PWA 下 app-modal bottom-sheet 让出 dock 净空（§12 铁律 · 2026-06-11 金币页被遮）── */ @media (max-width: 560px) { body.nav-enabled .app-modal { bottom: calc(var(--nav-clearance) - 12px); border-radius: 18px; padding-bottom: 18px; max-height: calc(94vh - var(--nav-clearance)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* PWA 平板/宽屏（≥561px 仍是居中 modal，非 bottom-sheet）：上移 + 限高让出底部悬浮 dock， 否则 nav-tabs(z1500) 会盖住居中 app-modal(z1460) 的底部按钮（§12 · 2026-06-18 交代管家被遮）*/ @media (min-width: 561px) { body.nav-enabled .app-modal { max-height: calc(100vh - 48px - var(--nav-clearance)); transform: translate(-50%, calc(-50% + 12px - var(--nav-clearance) / 2)); } body.nav-enabled .app-modal.open { transform: translate(-50%, calc(-50% - var(--nav-clearance) / 2)); } } /* 降级：无 backdrop-filter / 用户降低透明度 → 浮层一律实色 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .kmet-pop, .persona-popover, .mb-cal-pop, .pos-more-menu, .dropdown-menu, .dd-pane { background: var(--card-solid); } } @media (prefers-reduced-transparency: reduce) { .kmet-pop, .persona-popover, .mb-cal-pop, .pos-more-menu, .dropdown-menu, .dd-pane { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid); } } /* ── API / MCP 访问（账户设置 · Gold-only · Phase A 2026-07-31）───────────── */ .account-modal .gold-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: linear-gradient(135deg, #E8BC72, #C99A4E); color: #2a1e0a; } .am-mcp-section .am-mcp-gen { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 14px; padding: 9px 16px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; font-size: 14px; background: linear-gradient(135deg, #E8BC72, #C99A4E); color: #2a1e0a; } .am-mcp-section .am-mcp-gen:hover { filter: brightness(1.05); } .am-mcp-section .am-mcp-gen .ico { width: 16px; height: 16px; } .am-mcp-empty { color: var(--sub); font-size: 13px; padding: 14px 4px; text-align: center; } .am-mcp-list { display: flex; flex-direction: column; gap: 8px; } .am-mcp-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card2); } .am-mcp-key.revoked { opacity: 0.5; } .am-mcp-key .k-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .am-mcp-key .k-prefix { font-family: ui-monospace, monospace; font-size: 13px; color: var(--text); } .am-mcp-key .k-name { font-size: 12px; color: var(--sub); } .am-mcp-key .k-meta { font-size: 11px; color: var(--sub); } .am-mcp-key .k-revoke { flex-shrink: 0; padding: 5px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--red); background: transparent; color: var(--red); font-size: 12px; font-weight: 600; } .am-mcp-key .k-revoke:hover { background: rgba(239, 68, 68, 0.1); } .am-mcp-new { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--accent-tint-strong); background: var(--accent-tint); } .am-mcp-new .nk-warn { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 8px; } .am-mcp-new .nk-key { padding: 8px 10px; border-radius: 8px; background: var(--card-solid); overflow-x: auto; margin-bottom: 8px; } .am-mcp-new .nk-key code { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; } .am-mcp-new .nk-copy { padding: 6px 14px; border-radius: 8px; cursor: pointer; border: none; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; } .am-mcp-config { margin-top: 16px; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border); background: var(--card2); } .am-mcp-config .cfg-title { font-size: 12px; color: var(--sub); margin-bottom: 8px; font-weight: 600; } .am-mcp-config code { display: block; font-family: ui-monospace, monospace; font-size: 12px; color: var(--text); padding: 3px 0; overflow-x: auto; white-space: nowrap; } /* MCP 使用说明链接（账户设置 MCP 节）*/ .am-mcp-guide-link { margin: 2px 0 12px; } .am-mcp-guide-link a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); text-decoration: none; } .am-mcp-guide-link a:hover { text-decoration: underline; } .am-mcp-guide-link .ico { width: 15px; height: 15px; } /* ── 账户归属下拉：label 与控件同一行（S3-2 · congyang 2026-08-06 报「怎么换行」）── `.op-field label`（app.css:8150）和 `.strangle-add-lbl`（7226）都是 display:block + margin-bottom:4px —— 那是给「上标签 + 全宽输入框」设计的。账户这一项标签短、控件是 hug 宽度的琉璃胶囊，堆两行纯属浪费一整行且视觉断裂。这里就地改回一行， 不动那两条通用 label 规则（别的字段仍要上标签 + 全宽输入框）。 */ .acct-pick-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .open-pos-modal .op-field.acct-pick-row label, .app-modal .strangle-add-field.acct-pick-row .strangle-add-lbl, .acct-pick-row > label { display: inline-block; margin-bottom: 0; flex: 0 0 auto; white-space: nowrap; } .acct-pick-row .dd, .acct-pick-row > select { flex: 0 1 auto; min-width: 0; } /* ══════════════════════════════════════════════════════════════ 账户归属展示层（app.acct.js · 1A/2A/2D/1D+4A/3A） —— 一份 markup 两种形态：卡片模式 = name 行玻璃胶囊； 列表模式（[data-density=simple]）= 标的列第二行小灰字（在冻结列内，横滚也看得见）。 ══════════════════════════════════════════════════════════════ */ /* 1A · 卡片：name 行玻璃胶囊（沿用房东人设 chip 的语言：准玻璃卡面、零 blur） */ .acct-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5; font-weight: 500; color: var(--text); background: var(--card2); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis; transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), color var(--dur-fast, .15s) var(--ease-out, ease); } .acct-chip:hover, .acct-chip:focus-visible { border-color: var(--accent); color: var(--accent); } .acct-chip.is-none { color: var(--sub); border-style: dashed; } /* 2A · 列表：降级成标的列**第二行**小字（副标题感）。 ⚠️ `.prl-id` 是 display:flex（app.css:11427）→ 光给 chip 设 display:block 它仍是 flex 项、 跟 ticker 挤在同一行（congyang 2026-08-06 截图）。要让它真的换行：容器 flex-wrap + chip 占满一行。 */ [data-density="simple"] .prl-id { flex-wrap: wrap; } html[data-density="simple"] .acct-chip, .prl-id .acct-chip { flex: 0 0 100%; width: 100%; order: 9; display: block; margin-top: 1px; padding: 0; border: 0; background: none; font-size: 10.5px; line-height: 1.35; color: var(--sub); max-width: 100%; } html[data-density="simple"] .acct-chip:hover { color: var(--accent); } html[data-density="simple"] .acct-chip.is-none { border: 0; opacity: .72; } /* 工具栏开关按钮（按账户分组 / 分配账户）—— 与 .label-tag 同一密度 */ .tb-toggle { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-family: inherit; color: var(--sub); background: var(--card2); border: 1px solid var(--line); cursor: pointer; } .tb-toggle:hover { color: var(--text); border-color: var(--accent); } .tb-toggle.is-on { color: var(--accent); border-color: var(--accent); font-weight: 600; } /* 账户分组 section（常态布局）+ 拖放 + 行内下拉 ───────────────────────── 持仓页直接按账户分段：配过的账户**全部**列出（含 0 仓的，否则没法把卡片拖进去）， 未分配垫底。卡片视图和列表视图共用同一套容器。 */ /* ⭐ D 琉璃托盘（congyang 2026-08-09 从 /acct-hier-pick 四个方向里选的：「D，我很满意」）—— 账户是一块**抬起来的琉璃板**，持仓卡摞在板上压下去的槽里。 为什么是这个形状：改之前账户头是 12px 淡扁条、紧挨着大字+金边+玻璃面的持仓卡 → 视线先落在重的那个上，扁条被读成「挂在卡片上的说明」而不是「装着卡片的容器」， 层级读反了（congyang 原话「显得他是在持仓层级之下，这样就反了」）。 **层级改用深度表达、不靠字号去争**：页面 → 抬起的板 → 压下的槽 → 浮在槽里的卡片。 材质走 DESIGN.md §1 的**准玻璃**（--glass-grad + --glass + --edge + --bevel，**零 blur**）。 ⚠️ 别改成 backdrop-filter：真玻璃是 chrome 专用、同屏 ≤6，而账户容器是列表层级的面， 6 个账户就 6 块，铺上去会卡。 ⚠️ 左边那条金色 border 已去掉且别加回来：金是品牌锚 + 主操作色，用在纯组织性的分隔上 等于给一个不需要注意力的东西发最高优先级（congyang 直接点名「左边还有一个黄条，视觉不满意」）。 */ .acct-group { --acct-tray: rgba(0, 0, 0, .20); --acct-tray-sh: inset 0 1px 3px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(255, 255, 255, .035); background: var(--glass-grad), var(--glass); border: 1px solid var(--edge); /* bevel = 板的上棱高光；中间那条深投影 = 把板从页面上抬起来（「更立体」就靠它） */ box-shadow: var(--bevel), 0 20px 40px -26px rgba(0, 0, 0, .9), var(--shadow); border-radius: 16px; padding: 0 12px 12px; margin-bottom: 18px; /* 卡片视图下 #positions 是多列网格 → section 不占满整行的话，空账户会跟别的账户并排 排成两列，读起来像坏了（congyang 截图）。section 是分组容器，永远占满一行。 */ grid-column: 1 / -1; transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), background var(--dur-fast, .15s) var(--ease-out, ease); } /* 白天：凹槽不能用纯黑（会脏），用暖灰 + 白色底高光。 ⚠️ 别图省事直接用 `--inset` —— 它在暗色主题里是 rgba(255,255,255,.035)，是**提亮**的， 拿来做凹陷会把槽做成凸起（两个主题都要各自截图核过再说做好了）。 */ :root[data-theme="light"] .acct-group { --acct-tray: rgba(45, 40, 25, .045); --acct-tray-sh: inset 0 1px 3px rgba(45, 40, 25, .10), inset 0 -1px 0 rgba(255, 255, 255, .7); } /* 未分配：同一块板，只是边框虚线（不是换成另一种东西） */ .acct-group.is-none { border-style: dashed; } /* ⭐ 卡片视图：真正的多列网格在这一层。`#positions` 的网格项已经被 section 顶掉了 （section 占满整行），所以卡片要在 body 里重新排列 —— 少了这条，一开分组每行就只剩 一张卡（congyang 2026-08-09 真机报「不再显示两列了，被强制一列」）。 列模板复用 `#positions` 继承下来的 `--pos-cols`，断点只在 .pos-grid 一处维护。 列表模式（[data-density=simple]）是横滚表格不是网格 → 保持块流。 */ /* 卡片区 = 压下去的槽（板抬起、槽压下、卡片再浮在槽里 = 三层深度）。 同时这里也是真正的多列网格：#positions 的网格项已经被 section 顶掉了（section 占满整行）， 少了这条一开分组每行就只剩一张卡（congyang 2026-08-09 真机报「被强制一列」）。 列模板复用 #positions 继承下来的 --pos-cols，断点只在 .pos-grid 一处维护。 */ .acct-group-body { display: grid; grid-template-columns: var(--pos-cols); gap: 14px; background: var(--acct-tray); box-shadow: var(--acct-tray-sh); border-radius: 12px; padding: 11px; } /* 列表模式是横滚表格不是网格，且表格自己有边界 → 不做槽、也不缩进（否则冻结列被推歪） */ [data-density="simple"] .acct-group-body { display: block; background: none; box-shadow: none; padding: 0; border-radius: 0; } /* 板的顶栏：不是一条独立的扁条，是板自己的头（靠 --edge 一条细线跟槽断开） */ .acct-group-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 11px; padding: 14px 4px 12px; border-bottom: 1px solid var(--edge); font-size: 12px; color: var(--sub); } .acct-group-head .ag-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); } /* 券商小标（账户名左边）—— 字母 + **莫兰迪化品牌色** （congyang 2026-08-09 从 /broker-logo-pick 拍板：「忠于品牌色相，饱和 22 明度 62」）。 色相由 app.acct.js 内联给（`--acct-mark-h`），**饱和/明度在这里统一** —— 同一色调家族 里只变色相，这是它成体系而不是「一堆各自调淡的颜色」的原因。想整体调浓淡改这两个值即可。 为什么是字母不是简化 logo，见 app.acct.js `_ACCT_BROKER_MARK` 上面那段。 固定 18×18 + tabular 字面 → 一列账户的名字左缘永远对齐（1 字母和 2 字母不会错开）。 */ :root { --acct-mark-s: 40%; --acct-mark-l: 62%; } /* ⚠️ 白天要单独给一组：62% 明度是在**夜间**调出来的，直接搬到白底上会糊成一片浅色看不清。 同一套思路（低饱和 + 统一家族），只是把明度压下去、饱和略提以在白底上站得住。 ⭐ congyang 拍板时看的是夜间；白天这组是我按同一原则推的，他要是觉得不对就调这里。 */ :root[data-theme="light"] { --acct-mark-s: 48%; --acct-mark-l: 40%; } /* ⚠️ 基础样式**不挂在 .acct-group-head 下面** —— 卡片模式的账户栏和列表模式的账户列 共用同一个 `.acct-bmark`，作用域收窄会让列表那份没样式（一堆裸字母）。 */ .acct-bmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; color: hsl(var(--acct-mark-h, 210) var(--acct-mark-s) var(--acct-mark-l)); background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid currentColor; font-family: var(--font-display); font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: -.02em; overflow: hidden; } /* 未知 / 未填券商：没有品牌可依 → 回中性色，不硬凑一个颜色 */ .acct-bmark.is-generic { color: var(--sub); opacity: .75; background: var(--fill); border-color: var(--line); } /* 未分配：不画标记，但**占同样的位** —— 不占位的话有标记和没标记的行名字左缘对不齐， 一列扫下来是锯齿状（列表里对齐比省那 18px 重要）。 */ .acct-bmark.is-blank { background: none; border-color: transparent; } .acct-group-head .acct-bmark .ico { width: 11px; height: 11px; } /* 列表模式那块板更薄 → 小标也收一档，别把冻结列的账户名推出去 */ .acct-group-head .ag-sold { font-variant-numeric: tabular-nums; } .acct-group-head .ag-pnl { font-variant-numeric: tabular-nums; } /* ⚠️ 修饰类不能叫 `pos` / `neg` —— **`.pos` 是持仓卡本身的类名**，套上去会把整张卡的 样式（圆角 + 金边 + 卡面底色）串到这个数字上，渲染成一个莫名其妙的胶囊 （congyang 2026-08-06 截图）。而且 app 里多处 `querySelectorAll('.pos')` 会误选它。 在这个项目里给「涨/跌」做修饰类，一律用 is-up / is-down。 */ .acct-group-head .ag-pnl.is-up { color: var(--good, #4ade80); } .acct-group-head .ag-pnl.is-down { color: var(--bad, #f87171); } .acct-group-head .ag-empty { margin-left: auto; opacity: .6; font-size: 11.5px; } .acct-group-head .ag-type { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; background: var(--card); border: 1px solid var(--line); color: var(--sub); } .acct-group-head .ag-type.margin_l3, .acct-group-head .ag-type.margin_l2 { color: var(--accent); } .acct-group-head .ag-bp, .acct-group-head .ag-cash { font-size: 11.5px; opacity: .8; font-variant-numeric: tabular-nums; } .acct-group-head .ag-n { margin-left: auto; } .acct-group-head .ag-sold { margin-left: 0; } /* 空账户：折叠成一行细条（不占版面）—— 它现在纯粹是「这个账户还没有仓」的告知。 否则 6 个账户里只有 2 个有仓时，页面上会挂 4 段空区域，很吵。 ⚠️ #positions 在卡片模式是带 gap 的网格 → 空 section 光把 body 藏了还不够， margin 和 grid gap 会把细条之间撑出大片空白（congyang 2026-08-06 截图）。 所以空 section 一律 margin:0 + 极扁的 head，靠 :not(:last-child) 的细分隔线断句。 */ /* D：空账户塌成一条**同材质的薄板**（不是换成另一种东西）—— 常态 6 个账户 4 个空时， 一串薄板读起来还是「同一类东西的不同状态」，不会突然变成一串异物。 */ .acct-group.is-empty { margin: 0; padding: 0 12px; opacity: .62; box-shadow: var(--bevel), var(--shadow); } /* ⚠️ 上面必须 margin:0 —— #positions 是带 14px gap 的网格，再叠 margin 就把细条之间撑出 大片空白（J11 守卫盯着这条；D 改版时我加了 margin-bottom:8px，当场被它拦下来了）。 薄板之间的呼吸由网格 gap 给，够了。 */ .acct-group.is-empty .acct-group-head { margin: 0; padding: 8px 4px; font-size: 11.5px; border-bottom: 0; } .acct-group.is-empty .acct-group-head .ag-name { font-size: 13px; font-weight: 600; color: var(--sub); } .acct-group.is-empty .ag-empty { display: none; } /* 折叠态只留账户名 —— 空组不需要再挂一句提示 */ .acct-group.is-empty .acct-group-body { display: none; } /* ── 列表模式为什么**不分组**（2026-08-09 · 别再往回做）───────────────────── congyang：「列表模式下我们把账户作为一个 column 吧，这样比如我最常用的就是按到期排序， 这样我可以一下看到所有的持仓的排列」。**分组和排序互斥** —— 分了组，「按到期排序」就 退化成「每个账户内部各自按到期」，全局顺序没了。所以列表模式改成一列（`.prl-acct`， 中段第一列、表头可点排序），分组只留给卡片模式（那边没有跨卡的全局排序心智）。 这里原本有一整套「列表模式下的账户分组」CSS（玻璃板 → 改成玻璃组头条），已随之删除 —— 代码不可达了就该删，留着会让下一个人以为它还在生效。删之前**踩实过的五个坑**记在这儿， 哪天真要在列表模式恢复分组，先读完再动手： ① 板宽 = 可视宽，而行是 `width: max-content`（可 2-3 屏宽）→ 右滑过一屏板就到头， 一条竖边框从表格中间穿过去 ② 板加 padding 会让数据行整体右移，而表头 `.pos-list-head` 是 `#positions` 的直接 子节点、不在板里 → 表头与数据列固定错开 ③ `.list-fits` 分支下行是 `width: 100%`，百分比遇到 `width: max-content` 的祖先会 回退成 max-content → 行比容器宽十几 px，桌面凭空多一条横滚 ④ ⭐ 冻结列靠「行透明 → 透出 #positions 实底」保证与中段同色；行一旦透出板的玻璃 渐变，色差就回来了 —— 正是 v2 时期调四轮没调好、最后靠整表实底色才根治的那个 ⑤ 组头 `position: sticky; left: 0` 在**块级**盒上是空操作（宽度 == 包含块宽度， 可位移范围恒为 0）；要生效得 `inline-flex` + 组跟行同宽 ────────────────────────────────────────────────────────────────── */ /* 多账户提示条（持仓区上方 · 可关闭 · 拖动移除后的「去哪儿分配」指路）。 刻意做得比持仓卡轻一档：它是一次性的说明，不该跟数据抢注意力。 */ .acct-hint { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--card2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--sub); } .acct-hint .ico { flex: 0 0 auto; width: 15px; height: 15px; opacity: .8; } .acct-hint .ah-txt { flex: 1 1 auto; min-width: 0; } /* 提示条里的「去账户设置」—— 是个