/* ============================================================
图表工作台 · Lightweight Charts 布局
============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; }
/* 100dvh:随手机浏览器动态工具栏自适应,避免底部糖哥指标栏被顶出可视区(vh 回退给老浏览器) */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* ---------- header ---------- */
.chart-header {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
height: 56px; flex-shrink: 0; padding: 0 16px;
border-bottom: 1px solid var(--line-soft); background: var(--bg-core);
}
.chart-header .header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.back-btn { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; transition: all var(--transition-fast); }
.back-btn:hover { color: var(--text-main); border-color: var(--text-main); }
.symbol-main { display: flex; align-items: baseline; gap: 12px; }
/* 币名前小胶囊(BTC)已下线(糖哥 2026-07-24):与右侧完整币名重复,占位无信息增量 */
.symbol-tk { display: none; }
.symbol-name { font-family: var(--font-display); font-size: calc(16px * var(--sv-font-scale, 1)); font-weight: 700; }
/* 币名旁搜索按钮:一键打开币种/美股全网搜索抽屉 */
.symbol-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin-left: 2px; align-self: center; border: 1px solid var(--line-strong, rgba(255,255,255,0.09)); border-radius: 8px; background: transparent; color: var(--text-muted, #8a8f9c); cursor: pointer; transition: all var(--transition-fast, .15s); }
.symbol-search-btn:hover { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); background: var(--accent-soft, rgba(240,185,11,.1)); }
/* 币名即切换入口:名称+下拉箭头一体成钮,hover 高亮暗示可点(打开与画线栏顶同款币种抽屉) */
.symbol-switch { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; margin-left: -6px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 8px; min-width: 0; }
.symbol-switch:hover { background: var(--accent-soft, rgba(240,185,11,.1)); }
.symbol-switch .ss-caret { flex: 0 0 auto; color: var(--text-muted, #8a8f9c); transition: transform .15s; }
.symbol-switch:hover .ss-caret { color: var(--warn, #f0b90b); }
/* 收藏激活态:实心金星 */
#favBtn.active { color: var(--warn, #f0b90b); }
#favBtn.active svg { fill: var(--warn, #f0b90b); }
.symbol-price { font-family: var(--font-mono); font-size: calc(18px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.symbol-change { font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; }
/* 全网搜索区(选币抽屉):精选之外的加密宇宙/全美股结果 */
.sp-net { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
.sp-net-title { padding: 6px 14px 4px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-muted); letter-spacing: 0.03em; }
.spr-net-tag { font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--warn, #f0b90b); border: 1px solid color-mix(in srgb, var(--warn, #f0b90b) 40%, transparent); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
/* 切非币安源且引擎信号开启时的「信号源 币安」角标 */
.signal-source-hint { position: absolute; left: 10px; bottom: 10px; z-index: 8; padding: 2px 8px; border-radius: 6px; font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--warn, #f0b90b); background: color-mix(in srgb, var(--warn, #f0b90b) 14%, var(--bg-panel, rgba(20,22,28,0.85))); border: 1px solid color-mix(in srgb, var(--warn, #f0b90b) 40%, transparent); pointer-events: none; }
/* 交易所数据源徽标(AICoin 式:币名旁点开切源) */
.exchange-switch-wrap { position: relative; display: inline-flex; }
.exchange-badge { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elevated, rgba(127,127,127,0.08)); color: var(--text-secondary); font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: border-color .15s, color .15s; }
.exchange-badge:hover { border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b); }
/* 数据源 logo(糖哥 2026-09-02「对应交易所使用对应logo,方便看」)。
用 ::before 背景图而不是插 ![]()
:徽标文字有 6 处在直接赋 textContent,
插进去的元素会被下一次赋值冲掉,背景图则完全不受影响。
图与市场页交易所专栏同一份本地资源(vendor/exchange-icons,零外链)。 */
.exchange-badge::before {
content: ''; flex: none; width: 13px; height: 13px; margin-right: 1px;
background: no-repeat center / contain; border-radius: 3px;
}
/* 默认币安:徽标文字默认也是 BN,首屏 data-ex 还没写上时不该是空白 */
.exchange-badge::before { background-image: url('../vendor/exchange-icons/bn.png'); }
.exchange-badge[data-ex="binance"]::before { background-image: url('../vendor/exchange-icons/bn.png'); }
.exchange-badge[data-ex="okx"]::before { background-image: url('../vendor/exchange-icons/ok.png'); }
.exchange-badge[data-ex="bitget"]::before { background-image: url('../vendor/exchange-icons/bg.png'); }
/* data-ex 写了但不是这三家(理论上不会有)才隐藏,避免出现空白方块;
没写 data-ex 的首屏走上面的默认币安图,不隐藏。 */
.exchange-badge[data-ex]:not([data-ex="binance"]):not([data-ex="okx"]):not([data-ex="bitget"])::before { display: none; }
.exchange-badge .ss-caret { opacity: 0.7; }
.exchange-menu { position: absolute; top: 26px; left: 0; z-index: 60; min-width: 176px; padding: 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel, var(--bg-elevated, #1a1d24)); box-shadow: 0 8px 28px rgba(0,0,0,0.28); }
.exm-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: none; color: var(--text-primary); font-size: calc(13px * var(--sv-font-scale, 1)); cursor: pointer; text-align: left; }
.exm-item:hover { background: color-mix(in srgb, var(--warn, #f0b90b) 12%, transparent); }
.exm-item.active { background: color-mix(in srgb, var(--warn, #f0b90b) 18%, transparent); color: var(--warn, #f0b90b); }
.exm-item b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px; border-radius: 5px; background: color-mix(in srgb, var(--warn, #f0b90b) 20%, transparent); color: var(--warn, #f0b90b); font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 800; }
.exm-item .exm-tag { margin-left: auto; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted); font-weight: 500; }
.exm-note { padding: 6px 10px 3px; font-size: calc(10px * var(--sv-font-scale, 1)); line-height: 1.4; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 3px; }
/* 美股盘市徽标:盘中绿/盘前盘后琥珀/休市灰 */
.session-badge { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 600; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.session-badge.sb-regular { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: color-mix(in srgb, var(--up) 12%, transparent); }
.session-badge.sb-pre, .session-badge.sb-post { color: var(--warn, #f0b90b); border-color: color-mix(in srgb, var(--warn, #f0b90b) 45%, transparent); background: color-mix(in srgb, var(--warn, #f0b90b) 10%, transparent); }
.session-badge.sb-closed { opacity: 0.75; }
.up { color: var(--up); } .down { color: var(--down); }
.symbol-meta { display: flex; gap: 16px; margin-top: 3px; font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.symbol-meta b { color: var(--text-secondary); font-weight: 500; }
/* min-width:0 + 横滚兜底:nowrap 之后导航不再靠"断行"缩高度,宽度不够时在自己这一行滚,
页面 body 不会被撑出横向滚动条(721-1023px 段另有更细的规则,见文件下方)。 */
.header-nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.header-nav::-webkit-scrollbar { height: 0; }
/* nowrap 必须写在主定义里,不能只写在窄屏媒体查询(下面 935 行那条)。
桌面段没有它 → CJK 没有词边界,导航项一被挤就逐字断行:实测 1024 视口
中文「首页」断成 2 行(高 35→56px)、日语「ホーム」断成 3 行(→76px),整条导航被撑高。
(糖哥 2026-09-02「有的文字被挤成竖条」) */
.header-nav a { padding: 7px 12px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 500; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--transition-fast); white-space: nowrap; }
.header-nav a:hover { color: var(--text-main); background: var(--accent-soft); }
.header-nav a.active { color: var(--text-main); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--text-main); }
.header-right { display: flex; gap: 8px; }
.header-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.header-btn:hover { color: var(--text-main); border-color: var(--line-strong); }
/* ---------- 顶部币种标签栏(AICoin 式,糖哥 2026-08-24):自选一排,点击切换 / ×移除 / +添加 ---------- */
.sym-tabbar { display: flex; align-items: center; flex-shrink: 0; height: 38px; padding: 0 8px; gap: 6px; background: var(--bg-core); border-bottom: 1px solid var(--line-soft); }
.sym-tabbar .stb-track { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.sym-tabbar .stb-track::-webkit-scrollbar { display: none; }
.stb-tab { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; flex-shrink: 0; white-space: nowrap; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text-secondary); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.stb-tab:hover { background: var(--accent-soft); color: var(--text-main); }
.stb-tab.active { background: var(--accent-soft); border-color: var(--line-strong); color: var(--text-main); }
.stb-tab .stb-name { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; letter-spacing: .02em; }
/* 数据来源标记(糖哥 2026-09-01「需要在标签币种页面体现出来来源所的数据,和现货或合约数据」)。
标签栏最左一枚、侧栏列表顶一条,各一次 —— 整排/整列价格本来就同源,逐条重复只是噪音。 */
.stb-source {
flex-shrink: 0;
align-self: center;
margin-right: 2px;
padding: 2px 7px;
border-radius: var(--radius-sm);
border: 1px solid var(--hair-stroke, rgba(140,140,150,.3));
background: var(--bg-panel);
font-family: var(--font-mono);
font-size: calc(10.5px * var(--sv-font-scale, 1));
font-weight: 700;
letter-spacing: .02em;
color: var(--text-muted);
cursor: default;
}
.sp-srcbar {
padding: 5px 12px;
font-family: var(--font-mono);
font-size: calc(10.5px * var(--sv-font-scale, 1));
font-weight: 700;
letter-spacing: .02em;
color: var(--text-muted);
border-bottom: 1px solid var(--hair-stroke, rgba(140,140,150,.18));
}
.stb-tab .stb-price { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stb-tab.active .stb-price { color: var(--text-main); }
.stb-tab .stb-chg { font-size: calc(11px * var(--sv-font-scale, 1)); font-variant-numeric: tabular-nums; }
.stb-tab .stb-chg.up { color: var(--up); }
.stb-tab .stb-chg.down { color: var(--down); }
/* 查不到行情的标的:置灰但仍可点(用户可能就是想看看它的图),× 常显把「怎么清掉它」直接摆在眼前 */
.stb-tab.dead .stb-name { opacity: .5; }
.stb-tab.dead .stb-price.stb-na { color: var(--text-muted); opacity: .7; }
.stb-tab.dead .stb-x { opacity: .5; }
.stb-tab .stb-x { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 1px; border-radius: 50%; font-size: calc(14px * var(--sv-font-scale, 1)); line-height: 1; color: var(--text-muted); opacity: 0; transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.stb-tab:hover .stb-x { opacity: .65; }
.stb-tab .stb-x:hover { opacity: 1; background: var(--line-strong); color: var(--text-main); }
.stb-add { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.stb-add:hover { color: var(--text-main); border-color: var(--text-main); background: var(--accent-soft); }
@media (max-width: 640px) { .sym-tabbar { height: 34px; padding: 0 6px; } .stb-tab { height: 26px; padding: 0 8px; gap: 5px; } .stb-tab .stb-price { display: none; } }
/* ---------- workspace ---------- */
.chart-workspace { position: relative; flex: 1; display: grid; grid-template-columns: 50px 1fr 300px; min-height: 0; }
.chart-workspace > * { min-height: 0; min-width: 0; }
/* col1 tools rail */
.tools-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-right: 1px solid var(--line-soft); background: var(--bg-core); z-index: 30; }
/* 移动端画线栏唤出浮钮:桌面隐藏,≤640 显示(样式见移动块) */
.sv-rail-fab { display: none; position: absolute; left: 8px; bottom: 10px; z-index: 29; width: 38px; height: 38px; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong, rgba(255,255,255,.14)); background: var(--bg-elevated, #16181f); color: var(--text-secondary, #b0b4bd); box-shadow: 0 4px 12px rgba(0,0,0,.3); cursor: pointer; }
.tools-rail .tool-btn, .rail-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast); }
.tools-rail .tool-btn:hover, .rail-toggle:hover { color: var(--text-main); background: var(--accent-soft); }
.tools-rail .tool-btn.active { color: var(--text-main); background: var(--accent-soft); border-color: var(--line-strong); }
.rail-toggle { color: var(--text-secondary); }
.rail-sep { width: 22px; height: 1px; background: var(--line-soft); margin: 4px 0; }
/* symbol drawer (pop-out) */
.symbol-drawer {
position: absolute; top: 0; left: 50px; z-index: 40;
width: 280px; height: 100%;
display: flex; flex-direction: column;
background: var(--bg-panel);
border-right: 1px solid var(--line-strong);
box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
transform: translateX(calc(-100% - 52px));
transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.symbol-drawer.open { transform: translateX(0); }
.drawer-scrim { position: absolute; inset: 0; z-index: 35; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; }
.drawer-scrim.show { opacity: 1; visibility: visible; }
/* ---------- 常驻左栏(AICoin 式,糖哥 2026-08-09)----------
同一份 DOM 两种形态:宽屏钉住成网格里的一列(选币不再遮挡盘面、切币不用先点开),
窄屏仍退回浮层抽屉(宽度不够时常驻会把主图挤没)。 */
body.sym-docked .chart-workspace { grid-template-columns: 50px 268px 1fr 300px; }
/* 左栏常驻 + 右栏收起是可以同时成立的(用户手动收、或进全屏时自动收)。
rp-collapsed 那条同特异性且定义在后面,会把上面这条压掉、只剩三列 ——
左栏的 grid-column:2 于是占到主图的位置,盘面被整块盖住。这里显式补上组合态。 */
body.sym-docked.rp-collapsed .chart-workspace { grid-template-columns: 50px 268px 1fr 0; }
body.sym-docked .symbol-drawer {
position: relative; top: auto; left: auto; z-index: 1;
width: auto; grid-column: 2; transform: none; box-shadow: none;
border-right: 1px solid var(--line-soft);
}
body.sym-docked .drawer-scrim { display: none; }
body.sym-docked .sd-close svg { transform: rotate(45deg); } /* 常驻态下这个按钮的语义是「收起左栏」 */
/* 列头:名称 / 最新价 / 今日涨幅,点一下换排序方向(AICoin 同款) */
.sp-sorts { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 6px 16px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sp-sort {
display: inline-flex; align-items: center; gap: 3px; padding: 2px 0;
font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); background: none; border: none; cursor: pointer; white-space: nowrap;
}
.sp-sort:hover { color: var(--text-main); }
.sp-sort.on { color: var(--text-main); font-weight: 700; }
.sp-sort i { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .7; }
.sp-sort:nth-child(2), .sp-sort:nth-child(3) { justify-content: flex-end; min-width: 62px; }
/* 表头三列:第一列(自选名)可压,后两列按内容取宽 —— 后两列原先被 grid 的 auto
算成"内容宽"却又被 1fr 抢走空间,末字被裁 2px(中文「最新价」49/47、德语更明显)。
把可压缩性明确交给第一列(它本来就有省略号),后两列 max-content 保证一个字都不裁。(2026-09-02) */
.sp-sorts { grid-template-columns: minmax(0, 1fr) max-content max-content; }
/* 底部动作条:添加自选 / 预警,贴住栏底不随列表滚动 */
.sp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line-soft); background: var(--bg-panel); }
.sp-foot a, .sp-foot button {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 7px 0; border-radius: var(--radius-sm); font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600;
color: var(--text-secondary); background: transparent; border: 1px solid var(--line-strong); cursor: pointer; text-decoration: none;
}
.sp-foot a:hover, .sp-foot button:hover { color: var(--text-main); background: var(--bg-hover); }
/* 左栏收起把手:与右栏 .rp-toggle 完全同款,镜像朝左贴在自选栏右缘。
只在常驻态出现 —— 浮层态本身就有 × 和遮罩可关,再挂一个把手是重复入口。 */
/* ⚠️ 两侧收起把手必须压在多窗之上(糖哥 + 用户 J0 2026-08-24:「开启多窗后,左右侧边栏的
收缩按钮不见了」)。它不是"不见了" —— 元素还在、还可见、位置也没变,只是多窗容器
#multiWrap 的 z-index 是 900 并且自成层叠上下文,把 z-index:30 的把手整个压在了下面,
鼠标点下去命中的是 IFRAME.mw-pane。用户看到的就是"按钮没了"。
(左把手当时没中招,只是因为它落在多窗容器的左边界之外 —— 换个分屏方案照样会被压住,
所以两个一起抬。)
950 的位置:高于多窗 900,低于确认弹窗 10050 与 toast 10055 —— 收起侧栏不该盖住这两者。 */
.sp-toggle {
display: none;
position: absolute; left: 318px; top: 50%; transform: translateY(-50%); z-index: 950;
width: 18px; height: 52px; border-radius: 0 8px 8px 0; cursor: pointer; font-size: calc(10px * var(--sv-font-scale, 1));
color: var(--text-muted, #8a8f9c); background: var(--bg-panel, #141a24);
border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.1)); border-left: none;
transition: left .18s ease;
}
.sp-toggle:hover { color: var(--accent, #f0b90b); }
/* 宽屏才有把手:窄屏是浮层态,已经有 × 和遮罩可关,再挂一个是重复入口。
收起后把手贴到工具栏右缘继续留着,充当「展开」入口 —— 与右栏收起后贴屏幕边同理。 */
@media (min-width: 1101px) { .sp-toggle { display: block; } }
body:not(.sym-docked) .sp-toggle { left: 50px; }
/* 窄屏没有富余宽度常驻(268px 一让,主图就只剩一条),强制退回浮层抽屉。
放在这里而不是 1100 那段里:.sym-docked 前缀特异性更高,不显式覆盖会压过媒体查询。 */
@media (max-width: 1100px) {
body.sym-docked .chart-workspace { grid-template-columns: 0 1fr; }
body.sym-docked .symbol-drawer {
position: absolute; top: 0; left: 50px; z-index: 40; width: 280px;
grid-column: auto; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
transform: translateX(calc(-100% - 52px)); border-right: 1px solid var(--line-strong);
}
body.sym-docked .symbol-drawer.open { transform: translateX(0); }
body.sym-docked .drawer-scrim { display: block; }
body.sym-docked .sd-close svg { transform: none; }
}
.sd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.sd-title { font-family: var(--font-display); font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; }
.sd-close { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.sd-close:hover { color: var(--text-main); border-color: var(--line-strong); }
.sp-search { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-muted); }
.sp-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-main); font-size: calc(13px * var(--sv-font-scale, 1)); }
.sp-tabs { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
/* 外语下七个标签放不下时横向滚动。滚动条藏起来 —— 侧栏只有 267px 宽，
一条常驻滚动条会再吃掉 8px 并把 tab 顶高。能滑就够了，不必看见它。 */
.sp-tabs::-webkit-scrollbar { display: none; }
/* 糖哥 2026-09-02 截图报「贵金属/交易所被压成竖排两行」。
实测(中文 1440/1280，本机 Chrome)：**根本没有换行**，.sp-tabs 是 flex-wrap:nowrap；
病根是 `flex: 1` 把 243px 可用宽**平均分**成每格 33px，而 3 字标签单行需要 38px，
于是在按钮**内部**折成「贵金/属」「交易/所」，把整排从 44px 顶到 50px。
七个标签单行总需求只有 206px < 243px —— 空间本来富余 37px，是"平均分配"这个写法把它挤爆的。
改成 `flex: 1 1 auto` + nowrap：flex-basis 从 0 改成 auto，
即**先按各自内容宽把每格装下**（3 字标签拿到它要的 38px），再把富余的那 37px 平分出去 ——
既不折字，整排也仍然填满、视觉整齐。水平 padding 保持 0：加了会把总需求从 206px 顶到 346px，反而放不下。
外语下（英文实测总需求 292px > 267px）确实放不下，那时由 overflow-x 横向滚动兜住，
不再靠折字硬塞 —— 折字是把"放不下"伪装成"放下了"，横滚至少是诚实的。 */
.sp-tab { flex: 1 1 auto; white-space: nowrap; padding: 7px 0; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); cursor: pointer; }
.sp-tab:hover { color: var(--text-main); }
.sp-tab.active { color: var(--bg-core); background: var(--text-main); border-color: var(--text-main); }
.sp-list { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.sp-row {
/* 图标独占左列、纵跨两行,右侧「名称/交易对」+「价格/涨跌」各一行(AICoin 同款)。
此前图标没指定位置,自动流把名称挤到了第三行,一行占三行高度还错位。 */
width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
gap: 2px 9px; align-items: center; padding: 9px 14px;
background: transparent; border: none; border-left: 2px solid transparent;
cursor: pointer; text-align: left; transition: background var(--transition-fast);
}
.sp-row:hover { background: var(--accent-soft); }
.sp-row.active { background: var(--accent-soft); border-left-color: var(--text-main); }
/* 当前数据源查不到的标的:置灰但**不隐藏** —— 它还在用户自选/目录里,
悄悄抹掉只会让人以为是没加载出来。与 .stb-tab.dead 同一套处置。 */
.sp-row.dead .spr-tk, .sp-row.dead .spr-pair, .sp-row.dead .spr-price { opacity: .45; }
.spr-ic { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; }
.spr-tk { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700; font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spr-pair { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spr-price { grid-column: 3; grid-row: 1; font-family: var(--font-mono); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main); text-align: right; }
.spr-chg { grid-column: 3; grid-row: 2; font-family: var(--font-mono); font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; text-align: right; }
.spr-chg.up { color: var(--up); } .spr-chg.down { color: var(--down); }
/* col2 main */
.main-area { display: flex; flex-direction: column; min-width: 0; background: var(--bg-core); position: relative; }
/* ---- 多窗分屏 ---- */
#multiWrap { position: absolute; inset: 46px 0 0 0; z-index: 900; display: grid; gap: 2px; background: var(--bg-page, #0b0e13); }
.mw-cell { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-core, #0f1319); }
.mw-cell-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--bg-elevated, #14181f); border-bottom: 1px solid var(--line, rgba(255,255,255,0.06)); }
.mw-sym-sel {
font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; padding: 2px 8px; border-radius: 6px; cursor: pointer;
color: var(--text-main, #f4f5f7); background: var(--bg-sunken, rgba(255,255,255,0.05));
border: 1px solid var(--line, rgba(255,255,255,0.1));
}
/* 下拉展开的候选面板:option 不显式配色时,浏览器可能用系统浅色面板渲染白字 —— 各币种整列看不清
(糖哥 2026-08-14 报)。背景/文字都钉在主题变量上,深浅主题下都可读。 */
.mw-sym-sel option {
background: var(--bg-elevated, #14181f);
color: var(--text-main, #f4f5f7);
font-weight: 500;
}
.mw-pane { flex: 1; width: 100%; border: none; background: var(--bg-core, #0f1319); min-width: 0; min-height: 0; }
#mwExit {
position: absolute; right: 10px; top: 8px; z-index: 910; padding: 4px 12px; border-radius: 999px; cursor: pointer;
font-size: calc(12px * var(--sv-font-scale, 1)); color: #f6465d; background: var(--bg-elevated, #14181f); border: 1px solid rgba(246,70,93,0.4);
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.mw-panel {
position: fixed; z-index: 1200; width: 336px; padding: 12px 14px; border-radius: 12px;
background: var(--bg-elevated, #14181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 14px 36px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 8px;
}
.mw-panel > b { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: #F0B90B; }
.mw-panel-sub { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.mw-lays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mw-lay {
display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 5px;
border-radius: 9px; cursor: pointer; background: rgba(255,255,255,0.03);
border: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.mw-lay:hover { border-color: rgba(240,185,11,0.6); background: rgba(240,185,11,0.07); }
.mw-lay em { font-style: normal; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); white-space: nowrap; }
.mw-lay:hover em { color: #F0B90B; }
.mw-mini { width: 52px; height: 34px; display: grid; gap: 2px; }
.mw-mini i { background: rgba(240,185,11,0.32); border: 1px solid rgba(240,185,11,0.55); border-radius: 2px; }
.mw-custom { display: flex; gap: 8px; align-items: center; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); flex-wrap: wrap; }
.mw-custom select {
padding: 4px 6px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.mw-custom .dm-btn { margin-left: auto; }
/* ---- 「更多」周期菜单:分组 + 自定义 ---- */
.tfm-group { display: flex; gap: 10px; align-items: flex-start; }
.tfm-title { flex: none; width: 18px; padding-top: 5px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; color: #F0B90B; }
.tfm-items { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tfm-chip {
padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1));
color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.04);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
display: inline-flex; align-items: center; gap: 4px;
}
.tfm-chip:hover { border-color: rgba(240,185,11,0.55); color: #F0B90B; }
.tfm-chip.custom { border-style: dashed; }
.tfm-chip.tfm-soon { opacity: 0.45; cursor: not-allowed; }
.tfm-note { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.tfm-del { font-style: normal; color: var(--text-muted, #8a8f9c); font-size: calc(12px * var(--sv-font-scale, 1)); padding: 0 1px; }
.tfm-del:hover { color: #f6465d; }
.tfm-custom { display: flex; gap: 8px; align-items: center; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); border-top: 1px dashed var(--line-soft, rgba(255,255,255,0.08)); padding-top: 9px; }
.tfm-custom input, .tfm-custom select {
padding: 4px 6px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1)); width: 64px;
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.tfm-custom select { width: auto; }
/* ---- 工具栏按钮悬停介绍 ---- */
.sv-btn-tip {
position: fixed; z-index: 1200; max-width: 260px; padding: 10px 12px; border-radius: 10px;
background: var(--bg-elevated, #14181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 12px 32px rgba(0,0,0,0.4); pointer-events: none;
display: flex; flex-direction: column; gap: 5px;
}
.sv-btn-tip b { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: #F0B90B; }
.sv-btn-tip span { font-size: calc(11.8px * var(--sv-font-scale, 1)); line-height: 1.65; color: var(--text-main, #f4f5f7); }
.tip-layouts { display: flex; gap: 14px; margin-top: 3px; }
.tip-layout { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tip-layout span { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.tl-grid { width: 44px; height: 30px; display: grid; gap: 2px; }
.tl-grid i { background: rgba(240,185,11,0.35); border: 1px solid rgba(240,185,11,0.6); border-radius: 2px; }
.tl-2 { grid-template-columns: 1fr 1fr; }
.tl-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tl-3 i.tall { grid-row: span 2; }
.tl-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* ---- 盘面截图弹窗 ---- */
/* 截图弹窗放大(糖哥 2026-07-24):图片占满近乎整屏,盘面看得清清楚楚。
用 .il-modal.snap-modal 提权,盖过 .il-modal 基类的 560px 宽 / 640px 高上限 */
.il-modal.snap-modal { width: min(1600px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); }
.snap-body { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.snap-body img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; border: 1px solid var(--line-strong, rgba(255,255,255,0.09)); background: var(--bg-core, #0b0e11); }
/* 微信式标注工具栏 */
.snap-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 10px; border-radius: 10px; background: var(--bg-core, #0b0e11); border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.snap-grp { display: flex; align-items: center; gap: 4px; }
.snap-sep { width: 1px; height: 20px; background: var(--line-soft, rgba(255,255,255,0.1)); margin: 0 3px; }
.snap-tool, .snap-act { min-width: 30px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-secondary, #c9cdd6); font-size: calc(14px * var(--sv-font-scale, 1)); cursor: pointer; transition: all var(--transition-fast, .15s); }
.snap-act { font-size: calc(12px * var(--sv-font-scale, 1)); }
.snap-tool:hover, .snap-act:hover { color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.06); }
.snap-tool.active { color: var(--warn, #f0b90b); background: var(--accent-soft, rgba(240,185,11,0.12)); border-color: var(--warn, #f0b90b); }
.snap-color { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset; cursor: pointer; }
.snap-color.active { border-color: var(--text-main, #f4f5f7); transform: scale(1.12); }
.snap-size { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.snap-size i { display: block; border-radius: 50%; background: var(--text-secondary, #c9cdd6); }
.snap-size:hover { background: rgba(255,255,255,0.06); }
.snap-size.active { background: var(--accent-soft, rgba(240,185,11,0.12)); border-color: var(--warn, #f0b90b); }
.snap-size.active i { background: var(--warn, #f0b90b); }
.snap-tool svg { display: block; }
/* 撑开:把「保存」推到工具栏最右;禁用态;顶部保存高亮 */
.snap-spacer { flex: 1 1 auto; min-width: 8px; }
.snap-act[disabled] { opacity: .38; cursor: not-allowed; pointer-events: none; }
.snap-save-top { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); background: var(--accent-soft, rgba(240,185,11,0.12)); font-weight: 600; }
.snap-save-top:hover { background: rgba(240,185,11,0.22); color: var(--warn, #f0b90b); }
/* 画布:等比适配,十字光标,便于精准标注 */
.snap-canvas-wrap { position: relative; display: flex; justify-content: center; max-height: 74vh; overflow: auto; border-radius: 10px; background: var(--bg-core, #0b0e11); border: 1px solid var(--line-strong, rgba(255,255,255,0.09)); }
#snapCanvas { max-width: 100%; max-height: 74vh; display: block; cursor: crosshair; touch-action: none; }
.snap-text-input { position: absolute; z-index: 5; min-width: 60px; padding: 1px 4px; background: rgba(0,0,0,0.35); border: 1px dashed currentColor; border-radius: 4px; outline: none; font-weight: 600; font-family: -apple-system, "PingFang SC", "Segoe UI", sans-serif; }
.snap-ops { display: flex; gap: 10px; align-items: center; }
.snap-hint { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* ---- AI 解读 ---- */
.ai-think { display: flex; flex-direction: column; gap: 10px; padding: 26px 8px 30px; align-items: center; }
.ai-think-stage { font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.ai-think-track { width: 78%; height: 8px; border-radius: 999px; background: rgba(128,131,141,0.15); overflow: hidden; }
.ai-think-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #F0B90B, #2ebd85); transition: width 0.12s linear; }
.ai-think-pct { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: 'JetBrains Mono', monospace; }
.ai-read-modal { width: min(560px, calc(100vw - 40px)); }
.ai-read-body { overflow-y: auto; padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.ai-sec > b { display: block; font-size: calc(13px * var(--sv-font-scale, 1)); color: #F0B90B; margin-bottom: 5px; }
.ai-sec p b { display: inline; color: inherit; }
.ai-sec p { margin: 0; font-size: calc(12.8px * var(--sv-font-scale, 1)); line-height: 1.8; color: var(--text-main, #f4f5f7); }
.ai-sec p b.ok { color: var(--up, #2ebd85); }
.ai-sec p b.bad { color: var(--down, #f6465d); }
.ai-sec .ai-dim { color: var(--text-muted, #8a8f9c); }
.ai-verdict { padding: 10px 12px; border-radius: 10px; background: rgba(240,185,11,0.05); border: 1px solid rgba(240,185,11,0.2); }
.ai-disclaim {
padding: 8px 12px; border-radius: 8px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.7;
color: var(--text-muted, #8a8f9c); background: rgba(255,255,255,0.02);
border: 1px dashed var(--line-strong, rgba(255,255,255,0.12));
}
/* ---- 嵌入精简模式(多窗内页):只留盘面与分时工具条 ---- */
.sv-embed .chart-header, .sv-embed .tools-rail, .sv-embed .right-panel, .sv-embed #tgIndbar,
.sv-embed .symbol-drawer, .sv-embed .drawer-scrim, .sv-embed #multiBtn,
.sv-embed #replayBtn, .sv-embed .rp-fab { display: none !important; }
.sv-embed .chart-workspace { grid-template-columns: 1fr !important; } /* 侧栏/右栏已藏,网格轨道同步收掉,盘面占满 */
.sv-embed .chart-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sv-embed .chart-legend > * { flex: none; white-space: nowrap; }
.sv-embed .chart-toolbar { overflow-x: auto; scrollbar-width: none; }
.chart-toolbar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; height: 46px; flex-shrink: 0; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
.chart-toolbar > .ind-group:last-child { margin-left: auto; } /* 全屏/横屏仍靠右;指标库+回放复盘迁到分时前靠左 */
/* 工具条按钮一律不许被压缩(糖哥 2026-09-02「有的文字被挤成竖条」)。
flex 子项默认 min-width:auto 之外还会被 shrink 到比一个字还窄 —— 实测日语
「⏪ リプレイ振り返り」被压到 18px 宽后逐字竖排成 12 行,像坏掉的一样。
⚠️不压缩就必须给出路,否则整条把页面顶出横向滚动条(实测 1024 视口撑到 1139px):
这里让工具条自己横向滚 —— 溢出关在这一条内部,页面 body 不动。 */
.chart-toolbar > * { flex: 0 0 auto; }
.chart-toolbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.chart-toolbar::-webkit-scrollbar { height: 0; }
.ind-lib-btn, .tf-btn, .ind-toggle, .sub-toggle { flex: 0 0 auto; white-space: nowrap; }
.tf-group, .ind-group { display: flex; align-items: center; gap: 2px; }
.tf-btn, .ind-toggle, .sub-toggle { padding: 6px 11px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; font-family: var(--font-body); color: var(--text-muted); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast); }
.ind-toggle, .sub-toggle { font-family: var(--font-mono); }
.tf-btn:hover, .ind-toggle:hover, .sub-toggle:hover { color: var(--text-main); }
/* 图标类按钮:SVG 走 block 消除内联基线下沿,盒高与文字周期按钮一致,竖直严格对齐(糖哥 2026-07-24) */
.ind-toggle svg, .sub-toggle svg { display: block; }
/* 测量尺子:图标略延长,按钮与周期栏同高居中对齐,不再显小浮起 */
.measure-btn { display: inline-flex; align-items: center; justify-content: center; height: 29px; padding: 0 9px; }
.tf-btn.active { color: var(--bg-core); background: var(--text-main); }
.ind-toggle.active, .sub-toggle.active { color: var(--text-main); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tb-div { width: 1px; height: 18px; background: var(--line-soft); margin: 0 6px; }
/* strategy dropdown */
.strat-select { position: relative; }
.strat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; font-family: var(--font-mono); color: var(--text-secondary); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.strat-btn:hover { color: var(--text-main); border-color: var(--text-main); }
.strat-btn b { color: var(--text-main); font-weight: 700; }
.strat-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 170px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.strat-menu button { display: block; width: 100%; padding: 9px 12px; text-align: left; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-secondary); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.strat-menu button:hover { background: var(--accent-soft); color: var(--text-main); }
.strat-menu button.danger { color: var(--down); border-top: 1px solid var(--line-soft); margin-top: 4px; }
/* chart stack */
.chart-stack { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* 盘面信息收拢开关:悬浮在图表左上角,点一下隐藏/显示 K 线 OHLC 与指标图注 */
.legend-toggle { position: absolute; top: 6px; left: 8px; z-index: 6; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-strong, rgba(255,255,255,0.14)); background: var(--bg-glass, rgba(8,9,12,0.72)); color: var(--text-secondary); font-size: calc(13px * var(--sv-font-scale, 1)); cursor: pointer; backdrop-filter: blur(4px); transition: color .12s, border-color .12s; }
.legend-toggle:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.legend-toggle.collapsed { color: var(--text-muted); opacity: .7; }
.chart-stack.legend-hidden .chart-legend { display: none; }
/* 图例行(币名·周期+指标名条)已下线(糖哥 2026-07-24):币名/周期与顶栏重复,指标增删走底部指标库与⚙详情;
OHLC 读数由引擎内置 tooltip 独立呈现,不受影响。多窗 embed 模式顶栏被隐藏,该行是每格唯一币名来源,予以保留 */
body:not(.sv-embed) .chart-stack > .chart-legend,
body:not(.sv-embed) .chart-stack > .legend-toggle { display: none; }
/* 价格轴显示模式(糖哥 2026-07-24,AICoin 式):停在图表右下角 X 轴与价格轴交汇处 */
.yaxis-mode { position: absolute; right: 8px; bottom: 6px; z-index: 6; display: flex; gap: 4px; }
.ym-btn {
/* 价格轴模式钮(对数/自动/%):日语「対数」「自動」在窄容器里被逐字断成竖条,
与导航同一个病 —— CJK 无词边界,不给 nowrap 就会断。(2026-09-02) */
white-space: nowrap; flex: 0 0 auto;
padding: 3px 8px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.5; border-radius: 6px; cursor: pointer;
border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
background: var(--bg-glass, rgba(8,9,12,0.72));
color: var(--text-secondary, #c9cdd6);
backdrop-filter: blur(4px); transition: all var(--transition-fast, .15s);
}
.ym-btn:hover { color: var(--text-main, #f4f5f7); border-color: var(--warn, #f0b90b); }
/* 时区基准标识(糖哥 2026-08-15:站内时区与本机对齐并可见化);非按钮,弱化配色 */
.ym-tz {
padding: 3px 7px; font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 1.5; border-radius: 6px; cursor: help;
border: 1px dashed var(--line-strong, rgba(255,255,255,0.14));
background: var(--bg-glass, rgba(8,9,12,0.72));
color: var(--text-muted, #8a93a3); font-family: var(--font-mono, ui-monospace, monospace);
backdrop-filter: blur(4px);
}
.ym-btn.active { color: var(--warn, #f0b90b); background: var(--accent-soft, rgba(240,185,11,0.14)); border-color: var(--warn, #f0b90b); font-weight: 600; }
@media (max-width: 640px) { .yaxis-mode { right: 4px; bottom: 4px; gap: 3px; } .ym-btn { padding: 2px 6px; font-size: calc(10px * var(--sv-font-scale, 1)); } }
/* 糖哥指标库:图表下方开关栏 */
.tg-indbar { flex: 0 0 auto; border-top: 1px solid var(--line-soft); background: var(--bg-panel, #08090c); padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tg-indbar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tg-indbar-title { font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: .04em; color: var(--text-secondary); }
.tg-indbar-title::before { content: ''; display: inline-block; width: 3px; height: 11px; background: var(--warn, #f0b90b); border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tg-indbar-new { font-size: calc(11px * var(--sv-font-scale, 1)); padding: 3px 10px; border-radius: 6px; cursor: pointer; color: var(--accent-contrast, #1c2530); background: var(--accent, #f0b90b); border: none; font-weight: 600; }
/* 单行排列(糖哥 2026-07-21,参考老网站):标题行撤下,一行放齐、放不下横向滚动 */
.tg-indbar-head { display: none; }
/* 底栏 v2 双行分区 + 常用钉选(糖哥 2026-08-06 拍板 C+B) */
.tg-indbar-chips { display: flex; flex-direction: column; gap: 5px; }
/* 链路状态条(糖哥 2026-08-17,对标 AICoin 右下角):底栏变成"指标区 + 右端状态区"两块,
状态区宽度按内容固定、指标区吃掉剩余宽度(min-width:0 才允许它内部横滚,否则会把状态条挤出去) */
.tg-indbar { display: flex; align-items: flex-end; gap: 12px; }
.tg-indbar-chips { flex: 1 1 auto; min-width: 0; position: relative; }
.sv-linkbar {
flex: 0 0 auto; display: flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary, #9aa0aa); padding-bottom: 3px;
font-variant-numeric: tabular-nums; /* 等宽数字:秒针逐秒跳动时整条不左右抖 */
}
.svlb-link { display: inline-flex; align-items: center; gap: 5px; cursor: default; }
.svlb-name { opacity: .7; } /* "行情"标签:说清这条状态说的是哪条链路(AICoin 那条写的是"线路N") */
.svlb-grade { font-weight: 700; }
/* WiFi 弧形信号图标(糖哥 2026-08-17:圆点看不出强弱,要能从图标本身读出信号比例)。
三段弧 + 底点全部用 currentColor,亮暗只差 opacity —— 一套色值同时管深浅两主题。 */
.svlb-sig { flex: 0 0 auto; color: var(--text-disabled, #555); overflow: visible; }
.svlb-sig .sg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: .2; }
.svlb-sig .sg-dot { fill: currentColor; stroke: none; opacity: .2; }
.svlb-sig .sg-slash { display: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
.svlb-link[data-tone="ok"] .svlb-sig { color: var(--up, #2ebd85); }
.svlb-link[data-tone="ok"] .svlb-grade { color: var(--up, #2ebd85); }
.svlb-link[data-tone="warn"] .svlb-sig { color: var(--warn, #f0b90b); }
.svlb-link[data-tone="warn"] .svlb-grade { color: var(--warn, #f0b90b); }
.svlb-link[data-tone="bad"] .svlb-sig { color: var(--down, #f6465d); }
.svlb-link[data-tone="bad"] .svlb-grade { color: var(--down, #f6465d); }
/* 亮几格:0=只亮底点 / 1=一段弧 / 2=两段 / 3=满格;-1=断开(全暗 + 打叉) */
.svlb-link[data-level="0"] .sg-dot,
.svlb-link[data-level="1"] .sg-dot, .svlb-link[data-level="1"] .sg1,
.svlb-link[data-level="2"] .sg-dot, .svlb-link[data-level="2"] .sg1, .svlb-link[data-level="2"] .sg2,
.svlb-link[data-level="3"] .sg-dot, .svlb-link[data-level="3"] .sg1,
.svlb-link[data-level="3"] .sg2, .svlb-link[data-level="3"] .sg3 { opacity: 1; }
.svlb-link[data-level="-1"] .sg-slash { display: block; opacity: 1; }
.svlb-rtt { opacity: .75; }
.svlb-sep { opacity: .4; }
.svlb-clock { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.svlb-tz { opacity: .7; }
.svlb-time { color: var(--text-main, #eaecef); }
.tgt-tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tgt-tabs::-webkit-scrollbar { display: none; }
.tgt-tab { appearance: none; background: none; border: none; cursor: pointer; flex: 0 0 auto; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-secondary); padding: 3px 10px; border-radius: 7px; white-space: nowrap; }
.tgt-tab:hover { color: var(--text-main); }
.tgt-tab.on { color: var(--warn, #f0b90b); background: rgba(240, 185, 11, 0.1); }
.tgt-n { margin-left: 5px; font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 700; background: var(--warn, #f0b90b); color: #1a1400; border-radius: 8px; padding: 0 5px; }
.tgt-tabs .tg-edit-chip { margin-left: auto; flex: 0 0 auto; }
.tg-new-ind { border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b); }
/* 钉选选择器:分组小标题 + 已选打勾(浮层主体复用 .tg-group-pop) */
.tgp-sub { font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-secondary, #9aa0aa); margin: 8px 0 5px; }
.tgp-sub:first-of-type { margin-top: 2px; }
.tgp-tick { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--up, #2ebd85); margin-left: 1px; }
.tg-group-pop[data-pin-picker], .tg-group-pop[data-all-ind] { max-height: 70vh; overflow-y: auto; }
.tg-group-pop[data-pin-picker] .tgp-grid, .tg-group-pop[data-all-ind] .tgp-grid { max-height: none; overflow: visible; }
/* 「全部指标」浮层(2026-08-13):真 chip 进换行网格,hover 工具(⚙/📌/🗑)沿用底栏交互 */
.tgp-chip-grid .tg-chip { flex: 0 0 auto; }
.tg-group-pop[data-all-ind] .tgp-search { margin-left: 8px; }
/* 分组标题区分色(糖哥 2026-08-13):每库一色,浮层里一眼分节;中饱和度色值深浅两主题都够对比 */
.tgp-sub[data-tone="tangge"] { color: var(--warn, #f0b90b); }
.tgp-sub[data-tone="std-main"] { color: #5b9dff; }
.tgp-sub[data-tone="std-sub"] { color: #b18cff; }
.tgp-sub[data-tone="msg"] { color: #2fc4c4; }
.tgp-sub[data-tone="chip"] { color: #f08a3c; }
.tgp-sub[data-tone="pattern"] { color: var(--up, #2ebd85); }
.tgp-sub[data-tone="mapattern"] { color: #b5cc4f; }
.tgp-sub[data-tone="mine"] { color: #ef7ea0; }
.tgt-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tgt-row::-webkit-scrollbar { display: none; }
/* 📌 只在 hover 出现(糖哥 2026-08-06:钉上后 chip 本身不常显图标,进常用栏即可);已钉 hover 时金色示意。
⚠️ opacity:0 时必须同时关 pointer-events —— 否则看不见却仍可点,触屏点 chip 右端会静默钉/取钉(审查确认) */
.tg-pin { font-size: calc(10px * var(--sv-font-scale, 1)); font-style: normal; cursor: pointer; opacity: 0; pointer-events: none; margin-left: 1px; transition: opacity .12s; }
.tg-chip:hover .tg-pin { opacity: .55; pointer-events: auto; }
.tg-pin:hover { opacity: 1 !important; }
.tg-chip:hover .tg-pin.on { color: var(--warn, #f0b90b); opacity: .9; }
.tg-pin-add { border-style: dashed; color: var(--text-disabled, #666); }
.tgt-empty { flex: 0 0 auto; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-disabled, #6b7280); padding: 4px 2px; white-space: nowrap; }
/* (2026-08-06 底栏 v2:旧单行容器样式移除,双行布局见 .tg-indbar-chips[column]/.tgt-tabs/.tgt-row) */
.tg-indbar-chips .tg-chip { font-size: calc(10.5px * var(--sv-font-scale, 1)); padding: 3px 8px; gap: 4px; flex: 0 0 auto; white-space: nowrap; }
/* 移动端:糖哥指标 chips 单行横向滚动,末尾留白避开右下角"盘口·信号"浮钮 */
@media (max-width: 640px) {
/* (2026-08-06 底栏 v2:旧 118px 右留白随悬浮编辑按钮一并退役,两行各自横滚见 .tgt-tabs/.tgt-row) */
.tgt-row { -webkit-overflow-scrolling: touch; }
.tg-chip { flex: 0 0 auto; }
/* 窄屏留不下延迟数字:等级点与时间才是要看的,数字进 hover/长按的说明里(AICoin 手机端同样只留状态与时间) */
.sv-linkbar { font-size: calc(10px * var(--sv-font-scale, 1)); gap: 4px; }
.svlb-rtt, .svlb-sep { display: none; }
}
.tg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: calc(11.5px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-secondary); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); user-select: none; transition: background .12s, border-color .12s, color .12s; }
.tg-chip:hover { border-color: var(--warn, #f0b90b); }
.tg-chip .tg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-disabled, #555); transition: background .12s; }
.tg-chip.on { color: var(--text-main); border-color: var(--up, #2ebd85); background: var(--up-soft, rgba(46,189,133,0.12)); }
.tg-chip.on .tg-dot { background: var(--up, #2ebd85); box-shadow: 0 0 6px var(--up, #2ebd85); }
.tg-chip .tg-edit { opacity: .55; font-size: calc(12px * var(--sv-font-scale, 1)); margin-left: 2px; }
.tg-chip .tg-edit:hover { opacity: 1; }
.tg-chip.disabled { opacity: .5; cursor: default; }
.tg-chip.disabled:hover { border-color: var(--line-strong, rgba(255,255,255,0.12)); }
/* 排列定版(糖哥 2026-07-21):首位"全部指标"入口 | 各库 5 槽虚框预留位 | 尾部"自主编辑指标" */
.tg-chip.tg-allind-chip { border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b); font-weight: 700; }
.tg-chip.tg-allind-chip:hover { background: color-mix(in srgb, var(--warn, #f0b90b) 12%, transparent); }
.tg-chip.reserve { border-style: dashed; opacity: .35; cursor: default; pointer-events: none; }
/* 自主编辑指标(糖哥 2026-07-21):钉在栏最右,醒目但不张扬——柔和金底实线框 */
.tg-chip.tg-edit-chip { margin-left: auto; font-weight: 700; color: var(--warn, #f0b90b); border: 1px solid color-mix(in srgb, var(--warn, #f0b90b) 45%, transparent); background: color-mix(in srgb, var(--warn, #f0b90b) 9%, transparent); }
.tg-chip.tg-edit-chip:hover { background: color-mix(in srgb, var(--warn, #f0b90b) 18%, transparent); border-color: var(--warn, #f0b90b); }
/* 指标详情浮层(⚙):介绍 + 按需调节 */
.tg-ind-info { max-width: min(460px, calc(100vw - 16px)); }
.tgi-body { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.tgi-row b { display: block; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--tx3, #8a8f9c); font-weight: 800; margin-bottom: 1px; }
.tgi-row span { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary); line-height: 1.6; }
.tgi-set { border-top: 1px solid var(--line-soft, rgba(148,163,184,.16)); padding-top: 8px; }
.tgi-set-title { font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--tx3, #8a8f9c); margin-bottom: 6px; }
.tgi-set-none { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--tx3, #8a8f9c); }
.tgi-set-opts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tgi-opt { font-size: calc(11px * var(--sv-font-scale, 1)); padding: 3px 10px; border-radius: 999px; cursor: pointer; color: var(--text-secondary); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); }
.tgi-opt:hover { border-color: var(--warn, #f0b90b); }
.tgi-opt.on { color: var(--text-main); border-color: var(--up, #2ebd85); background: var(--up-soft, rgba(46,189,133,0.12)); }
.tgi-input { width: 130px; font-size: calc(11.5px * var(--sv-font-scale, 1)); padding: 3px 8px; border-radius: 6px; color: var(--text-main, #e2e8f0); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.15)); }
.tg-chip .tg-soon { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: var(--warn-soft, rgba(240,185,11,0.14)); color: var(--warn, #f0b90b); }
.tg-indbar-empty { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted); padding: 2px 0; }
.pane { position: relative; min-height: 0; }
.pane-price { flex: 1; }
.pane-ind { height: 150px; border-top: 1px solid var(--line-soft); }
.lwc { position: absolute; inset: 0; }
.pane-tag { position: absolute; top: 6px; left: 10px; z-index: 3; font-family: var(--font-mono); font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted); pointer-events: none; }
/* AICoin 式指标图例:文档流内、画布上方,逐指标一枚 chip(名称+隐藏/编辑/移除) */
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 10px 4px 38px; border-bottom: 1px solid var(--line-soft); background: var(--bg-core); font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary); min-height: 28px; }
.chart-legend .lg-sym { color: var(--text-main); font-weight: 700; margin-right: 4px; }
.lgi { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--bg-panel, rgba(255,255,255,0.02)); }
.lgi.off { opacity: .45; }
.lgi.off .lgi-name { text-decoration: line-through; }
.lgi-name { color: var(--text-secondary); font-size: calc(10.5px * var(--sv-font-scale, 1)); }
/* 指标行上的状态小字(如控盘线「日线可看」):比指标名更弱一档,只作提示不抢注意力。
它替掉了原来盖在盘面上的浮层 —— 盘面留给行情,状态待在指标自己那一行(糖哥 2026-08-24)。 */
.lgi-note { color: var(--text-muted); font-size: calc(10px * var(--sv-font-scale, 1)); font-style: normal; margin-left: 4px; white-space: nowrap; }
.lgi-btn { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: calc(10px * var(--sv-font-scale, 1)); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; padding: 0; }
.lgi-btn:hover { color: var(--text-main); background: var(--accent-soft, rgba(255,255,255,0.08)); }
/* 图例样式编辑器 */
.lgi-editor { position: absolute; z-index: 40; min-width: 190px; padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong); box-shadow: var(--shadow-soft, 0 10px 30px rgba(0,0,0,.45)); }
.lge-title { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
.lge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lge-lb { flex: 0 0 44px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary); }
.lge-color { width: 34px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: transparent; cursor: pointer; }
.lge-size { flex: 1; font-size: calc(11px * var(--sv-font-scale, 1)); padding: 3px 6px; border-radius: 5px; background: var(--bg-tertiary, rgba(255,255,255,0.05)); color: var(--text-main); border: 1px solid var(--line-strong); }
.lge-params { flex: 1; font-size: calc(11px * var(--sv-font-scale, 1)); padding: 4px 8px; border-radius: 5px; background: var(--bg-tertiary, rgba(255,255,255,0.05)); color: var(--text-main); border: 1px solid var(--line-strong); font-family: var(--font-mono); }
.lge-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.lge-btn { font-size: calc(11px * var(--sv-font-scale, 1)); padding: 4px 12px; border-radius: 6px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--text-secondary); }
.lge-btn.primary { color: var(--accent-contrast, #1c2530); background: var(--accent, #f0b90b); border-color: var(--accent, #f0b90b); font-weight: 600; }
.strategy-banner { position: absolute; top: 30px; left: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(8, 9, 12, 0.85); border: 1px solid rgba(46, 189, 133, 0.4); border-radius: var(--radius-sm); font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-secondary); backdrop-filter: blur(6px); }
.strategy-banner[hidden] { display: none; }
.strategy-banner b { color: var(--text-main); }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
/* indicator / strategy library bar */
.lib-bar {
display: flex; align-items: center; gap: 12px;
height: 52px; flex-shrink: 0; padding: 0 12px;
border-top: 1px solid var(--line-soft); background: var(--bg-core);
overflow-x: auto; white-space: nowrap;
}
.lib-bar::-webkit-scrollbar { height: 0; }
.lib-group { display: inline-flex; align-items: center; gap: 6px; }
.lib-label { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: 0.04em; margin-right: 4px; }
.lib-label.tg { color: var(--up); }
.lib-label.msg { color: var(--ice); }
.lib-label.reg { color: var(--text-secondary); }
.lib-div { width: 1px; height: 20px; background: var(--line-soft); flex-shrink: 0; }
.lib-chip {
padding: 6px 12px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; font-family: var(--font-body);
color: var(--text-secondary); background: transparent;
border: 1px solid var(--line-soft); border-radius: 100px; cursor: pointer;
transition: all var(--transition-fast); flex-shrink: 0;
}
.lib-chip:hover { color: var(--text-main); border-color: var(--line-strong); }
.lib-chip.active { color: var(--bg-core); background: var(--text-main); border-color: var(--text-main); }
.lib-group:has(.lib-label.tg) .lib-chip.active { background: var(--up); border-color: var(--up); color: #04140c; }
.lib-group:has(.lib-label.msg) .lib-chip.active { background: var(--ice); border-color: var(--ice); color: #04101f; }
/* col3 right panel */
.right-panel { display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); background: var(--bg-panel); }
.rp-tabs { display: flex; gap: 2px; padding: 10px 10px; border-bottom: 1px solid var(--line-soft); }
.rp-tab { flex: 1; padding: 7px 0; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.rp-tab:hover { color: var(--text-main); }
.rp-tab.active { color: var(--text-main); background: var(--accent-soft); }
.rp-body { flex: 1; overflow-y: auto; padding: 12px; }
/* order book */
.ob-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 6px 4px; font-family: var(--font-mono); font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.ob-head span:nth-child(2), .ob-head span:nth-child(3) { text-align: right; }
.ob-side { display: flex; flex-direction: column; }
.ob-row { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 3px 4px; font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); }
.ob-bar { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; }
.ob-row.ask .ob-bar { background: rgba(246,70,93,0.1); }
.ob-row.bid .ob-bar { background: rgba(46,189,133,0.1); }
.ob-px, .ob-sz, .ob-cum { position: relative; z-index: 1; }
.ob-row.ask .ob-px { color: var(--down); }
.ob-row.bid .ob-px { color: var(--up); }
.ob-sz, .ob-cum { text-align: right; color: var(--text-secondary); }
.ob-mid { display: flex; align-items: baseline; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin: 4px 0; }
.obm-price { font-family: var(--font-mono); font-size: calc(18px * var(--sv-font-scale, 1)); font-weight: 700; }
.obm-price.up { color: var(--up); } .obm-price.down { color: var(--down); }
.obm-usd { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
/* right strategy tab */
.strat-empty { text-align: center; padding: 40px 16px; color: var(--text-secondary); font-size: calc(14px * var(--sv-font-scale, 1)); line-height: 2; }
.strat-empty span { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.strat-empty-ops { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.strat-empty-ops .btn-small { cursor: pointer; text-decoration: none; }
.rp-strat { display: flex; flex-direction: column; gap: 16px; }
.rs-head { display: flex; align-items: center; justify-content: space-between; }
.rs-name { font-family: var(--font-display); font-size: calc(16px * var(--sv-font-scale, 1)); font-weight: 700; }
.rs-badge { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); }
.rs-badge.up { color: var(--up); background: var(--up-soft); border: 1px solid rgba(46,189,133,0.3); }
.rs-badge.down { color: var(--down); background: var(--down-soft); border: 1px solid rgba(246,70,93,0.3); }
.rs-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-lv { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--bg-core); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.rs-lv span { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.rs-lv b { font-family: var(--font-mono); font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; }
.rs-lv b.up { color: var(--up); } .rs-lv b.down { color: var(--down); }
.rs-points { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rs-points li { position: relative; padding-left: 20px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-secondary); }
.rs-points li::before { position: absolute; left: 0; font-weight: 700; }
.rs-points li.pos::before { content: '✓'; color: var(--up); }
.rs-points li.warn::before { content: '!'; color: var(--warn); }
.rs-clear { padding: 10px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--down); background: transparent; border: 1px solid rgba(246,70,93,0.3); border-radius: var(--radius-sm); cursor: pointer; }
.rs-clear:hover { background: var(--down-soft); }
/* signals + brief */
.rp-list { display: flex; flex-direction: column; gap: 4px; }
.rp-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--radius-sm); }
.rp-item:hover { background: var(--accent-soft); }
.rpi-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 700; border: 1px solid var(--line-soft); }
.rpi-ic.up { color: var(--up); } .rpi-ic.warn { color: var(--warn); }
.rpi-t { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; }
.rpi-s { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); margin-top: 2px; }
.rp-block { margin-bottom: 18px; }
/* 盯盘台(糖哥 2026-07-21):盘口页签四模块 + 盯盘台/深度切换 */
.rp-bookbar { display: flex; gap: 6px; margin-bottom: 12px; }
.ob-depth-curve { display: block; width: 100%; margin: 4px 0 2px; }
/* 深度曲线价格条(糖哥 2026-07-25):曲线下方标出价格域,左=下界(买绿)/中=现价/右=上界(卖红) */
.ob-depth-axis { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; font-family: var(--font-mono); font-size: calc(10px * var(--sv-font-scale, 1)); line-height: 1; color: var(--text-muted); }
.ob-depth-axis .lo { color: var(--up, #2ebd85); }
.ob-depth-axis .hi { color: var(--down, #f6465d); }
.ob-depth-axis .mid { color: var(--text-main); font-weight: 600; }
/* 筹码峰面板(糖哥 2026-07-25) */
.chip-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 8px 10px 10px; }
.chip-note { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); line-height: 1.4; margin-bottom: 8px; }
.chip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 10px; }
.chip-stat { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(11.5px * var(--sv-font-scale, 1)); }
.chip-stat span { color: var(--text-muted, #8a8f9c); }
.chip-stat b { font-family: var(--font-mono, monospace); font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.chip-stat b.up { color: var(--rise-green, #2ebd85); }
.chip-stat b.down { color: var(--fall-red, #f6465d); }
.chip-chart { position: relative; flex: 1 1 auto; min-height: 220px; }
.chip-canvas { display: block; width: 100%; height: 100%; }
.chip-axis { position: absolute; right: 3px; top: 2px; bottom: 2px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; pointer-events: none; font-family: var(--font-mono, monospace); font-size: calc(9.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.chip-legend { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.chip-legend i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.chip-legend i.g { background: var(--rise-green, #2ebd85); }
.chip-legend i.r { background: var(--fall-red, #f6465d); }
.chip-legend i.c { background: var(--warn, #f0b90b); height: 2px; }
.chip-legend i.n { background: var(--text-muted, #8a8f9c); height: 2px; }
.rpbb { flex: 0 0 auto; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; padding: 4px 14px; border-radius: 999px; cursor: pointer; color: var(--text-secondary); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); }
.rpbb.on { color: var(--text-main); border-color: var(--warn, #f0b90b); background: color-mix(in srgb, var(--warn, #f0b90b) 10%, transparent); }
.wt-lights { display: flex; flex-wrap: wrap; gap: 6px; }
.wt-light { display: inline-flex; align-items: center; gap: 5px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); color: var(--text-secondary); }
.wt-light i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-disabled, #555); }
.wt-light.up { color: var(--up, #2ebd85); border-color: color-mix(in srgb, var(--up, #2ebd85) 45%, transparent); }
.wt-light.up i { background: var(--up, #2ebd85); box-shadow: 0 0 6px var(--up, #2ebd85); }
.wt-light.down { color: var(--down, #f6465d); border-color: color-mix(in srgb, var(--down, #f6465d) 45%, transparent); }
.wt-light.down i { background: var(--down, #f6465d); box-shadow: 0 0 6px var(--down, #f6465d); }
.wt-light.wl-big { font-size: calc(12px * var(--sv-font-scale, 1)); padding: 5px 12px; }
/* 关键位测距的行(糖哥 2026-09-02 报「文字和样式挤在一起」)。
实测:三项 259px + 两道 gap 16px = 275px，正好等于行宽，**零余量**。
两处一起松:标签里重复的价格已在 JS 侧剥掉(省下约 60px)，gap 收到 6px，
并给价格列一个固定宽度让三列对齐 —— 数字列不对齐是"挤"的另一半观感来源。 */
.wt-dist { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--line-soft, rgba(148,163,184,.12)); font-size: calc(11.5px * var(--sv-font-scale, 1)); }
.wtd-tag { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtd-tag.ctrl { color: #e064c7; }
.wtd-tag.buy { color: var(--up, #2ebd85); }
.wtd-tag.sell { color: var(--down, #f6465d); }
.wtd-px { flex: none; min-width: 66px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-main); }
.wtd-pct { flex: none; width: 58px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
/* 额度切换器:平时只占一枚 chip 的位置，点开才展开选项。
糖哥点名不要像大单成交带那样把选项一排摊开 —— 275px 的内容宽摊不下 5 个档位。 */
.wt-pick { position: relative; display: inline-flex; margin-left: 8px; vertical-align: middle; }
.wt-pick-btn {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 7px; border-radius: 999px; cursor: pointer;
font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 600; font-family: var(--font-mono);
color: var(--text-secondary); background: transparent;
border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
}
.wt-pick-btn:hover { color: var(--text-main); border-color: var(--warn, #f0b90b); }
.wt-pick-btn i { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .7; }
.wt-pick-menu {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
display: flex; flex-direction: column; min-width: 84px; padding: 4px;
border-radius: 8px; background: var(--bg-panel, #141a24);
border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.wt-pick-menu[hidden] { display: none; }
.wt-pick-opt {
padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer;
font-size: calc(11.5px * var(--sv-font-scale, 1)); font-family: var(--font-mono); text-align: right;
color: var(--text-secondary); background: transparent; white-space: nowrap;
}
.wt-pick-opt:hover { background: var(--accent-soft, rgba(255,255,255,.06)); color: var(--text-main); }
.wt-pick-opt.on { color: var(--text-main); background: var(--up-soft, rgba(46,189,133,.14)); }
.wtd-pct.up { color: var(--up, #2ebd85); }
.wtd-pct.down { color: var(--down, #f6465d); }
.wt-opts { float: right; display: inline-flex; gap: 4px; }
/* 大单成交带当前生效的数据源(糖哥 2026-09-01)。事件池只有币安一家、分现货/合约两池,
所以这里写「BN现 / BN永」,不写成看起来像多交易所聚合的样子。 */
.wt-src { font-family: var(--font-mono); font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted);
border: 1px solid var(--hair-stroke, rgba(140,140,150,.3)); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.wt-opts .tgi-opt { font-size: calc(10px * var(--sv-font-scale, 1)); padding: 1px 8px; }
.wt-tape { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: calc(11.5px * var(--sv-font-scale, 1)); border-bottom: 1px dashed var(--line-soft, rgba(148,163,184,.12)); font-variant-numeric: tabular-nums; }
.wt-tape .wtt-side { font-weight: 800; }
.wt-tape.up .wtt-side, .wt-tape.up .wtt-amt { color: var(--up, #2ebd85); }
.wt-tape.down .wtt-side, .wt-tape.down .wtt-amt { color: var(--down, #f6465d); }
.wtt-amt { font-weight: 700; min-width: 52px; }
.wtt-px { flex: 1; color: var(--text-secondary); }
.wtt-t { color: var(--tx3, #8a8f9c); font-size: calc(10.5px * var(--sv-font-scale, 1)); }
.wt-pulse { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: calc(11.5px * var(--sv-font-scale, 1)); border-bottom: 1px dashed var(--line-soft, rgba(148,163,184,.12)); cursor: pointer; }
.wt-pulse:hover .wtp-text { color: var(--text-main); }
.wtp-kind { flex: 0 0 auto; font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 800; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-strong, rgba(255,255,255,0.14)); color: var(--text-secondary); }
.wt-pulse.up .wtp-kind { color: var(--up, #2ebd85); border-color: color-mix(in srgb, var(--up, #2ebd85) 45%, transparent); }
.wt-pulse.down .wtp-kind { color: var(--down, #f6465d); border-color: color-mix(in srgb, var(--down, #f6465d) 45%, transparent); }
.wtp-text { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtp-meta { flex: 0 0 auto; color: var(--tx3, #8a8f9c); font-size: calc(10.5px * var(--sv-font-scale, 1)); font-variant-numeric: tabular-nums; }
.rpb-title { font-family: var(--font-mono); font-size: calc(11px * var(--sv-font-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.kp { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-secondary); margin-bottom: 10px; }
/* 空态行必须撑满整块(2026-09-02)。
实测:右栏「大单成交带」没有达标大单时,那句「暂无达到阈值的大单」被压成
**宽 2px、高 187px 的一列竖字**(中文可逐字换行,所以不溢出、就地竖排)。
⚠️ 根因没有定位到:.kp 是 275px block 容器里的 block 级 flex 容器,
按规范 width:auto 就该撑满,而 CSSOM 里命中它的规则只有 `*` 重置和 .kp 本身,
没有任何 width。HEAD 原版复跑同样是 2px,所以是既有问题,不是这次改出来的。
这里做的是把**本来就该成立的意图**显式写出来,并且只作用于右栏这一处,
不动别处在用的 .kp。实测 2px → 275px,文案恢复单行。 */
.rp-block > .kp { width: 100%; min-width: 0; }
.kp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* 大单成交带的「以下为最近成交」提示行(见 chart-workbench.js tapeKeepMerge)。
门槛调高时当前窗口常常一笔都没有,此时列表显示的是缓存里的历史成交 —— 必须说一声,
否则用户看到一排旧时间又会以为卡住了(这正是 2026-09-02 糖哥反馈的观感问题)。
⚠️ 宽度显式写死:同一块里的 .kp 曾被压成 2px 宽的竖排单字(见上面那段注释,根因未定位),
这行是同一个容器里的同类元素,照它的修法先把意图声明清楚,免得再踩一次。 */
.wt-tape-stale {
width: 100%;
min-width: 0;
font-size: calc(10.5px * var(--sv-font-scale, 1));
line-height: 1.5;
color: var(--tx3, #8a8f9c);
padding: 3px 0 5px;
border-bottom: 1px dashed var(--line-soft, rgba(148,163,184,.12));
}
.kp-dot.up { background: var(--up); } .kp-dot.down { background: var(--down); } .kp-dot.mid { background: var(--warn); }
/* 品种简介面板(糖哥 2026-08-10):加密/美股/贵金属各自的基本介绍 */
.pf-head { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft, rgba(148,163,184,.16)); }
.pf-name { display: flex; align-items: baseline; gap: 8px; }
/* 盘市徽标跟在名称后面:名称长了就把它挤到右边,但绝不换行、绝不被压扁(它是本行最该看清的那一块) */
.pf-name .pf-session { margin-left: auto; flex: none; font-style: normal; font-size: calc(10.5px * var(--sv-font-scale, 1)); padding: 1px 7px; }
.pf-name b { font-size: calc(17px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); }
.pf-name span { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pf-tag { padding: 2px 7px; border-radius: 999px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--warn, #f0b90b); background: color-mix(in srgb, var(--warn, #f0b90b) 13%, transparent); }
/* 简介正文:限高 + 展开,免得一段 600 字把下面的数据全顶下去 */
.pf-intro { font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.75; color: var(--text-secondary, #b0b4bd); max-height: 7.9em; overflow-y: auto; }
.pf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: calc(12px * var(--sv-font-scale, 1)); }
.pf-k { color: var(--text-muted, #8a8f9c); flex: 0 0 auto; }
.pf-v { color: var(--text-main, #eaecef); text-align: right; font-variant-numeric: tabular-nums; }
.pf-v.up { color: var(--up, #2ebd85); } .pf-v.down { color: var(--down, #f6465d); }
.pf-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-links a {
padding: 4px 10px; border-radius: 999px; font-size: calc(11.5px * var(--sv-font-scale, 1)); text-decoration: none;
color: var(--text-secondary, #b0b4bd); border: 1px solid var(--line-strong);
}
.pf-links a:hover { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); }
.ti { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: calc(13px * var(--sv-font-scale, 1)); }
.ti span { color: var(--text-muted); }
.ti b { font-family: var(--font-mono); font-weight: 600; }
.ti b.up { color: var(--up); }
/* responsive */
/* 桌面端:右栏为第三列;抽屉专属元素隐藏 */
.rp-grabber, .rp-sheet-close, .rp-fab, .rp-scrim { display: none; }
@media (max-width: 1100px) {
/* 画线栏移动端默认收起为抽屉(审查 C4):画线低频却常驻占一列,唤出按钮在图区左下 */
.chart-workspace { grid-template-columns: 0 1fr; }
.tools-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 50px; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 4px 0 14px rgba(0,0,0,.25); }
body.sv-rail-open .tools-rail { transform: none; }
.sv-rail-fab { display: grid; }
body.sv-rail-open .sv-rail-fab { color: var(--up, #2ebd85); border-color: var(--up, #2ebd85); }
/* 底栏 v2 左对齐后避让左下画线浮钮(浮钮只在本断点出现,宽屏不留白) */
.tg-indbar-chips { padding-left: 52px; }
/* 两行都可能横向溢出:右缘渐隐提示"还有内容"(审查确认:窄屏 tab 被切一半且无可滚线索)。
⚠️ 不加 transition —— 行情高频重渲会反复重启过渡,遮罩永远到不了 opacity:1(v2.28.1 踩过) */
.tgt-tabs, .tgt-row { position: relative; }
.tg-indbar-chips::after {
content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 26px; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--bg-panel, #08090c));
}
.tg-indbar { position: relative; }
/* 移动端右栏改底部上滑抽屉:默认藏在屏幕下方,浮动按钮唤出 */
.right-panel {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
height: min(74vh, 620px); border-left: none; border-top: 1px solid var(--line-strong);
border-radius: 16px 16px 0 0; transform: translateY(100%);
transition: transform .3s cubic-bezier(.16,1,.3,1); box-shadow: 0 -14px 44px rgba(0,0,0,.45);
}
body.rp-sheet-open .right-panel { transform: none; }
.rp-toggle { display: none; } /* 桌面折叠钮在移动端不用 */
.rp-grabber { display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--line-strong, rgba(255,255,255,0.22)); margin: 8px auto 2px; }
.rp-tabs { position: relative; }
.rp-sheet-close { display: block; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; flex: 0 0 auto; border: none; background: transparent; color: var(--text-muted); font-size: calc(20px * var(--sv-font-scale, 1)); line-height: 1; cursor: pointer; }
.rp-fab {
/* bottom 随底栏 v2 双行加高上调(68→86,审查确认原值会压住大类 tab 行) */
display: flex; align-items: center; gap: 6px; position: fixed; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 60;
padding: 9px 15px; border-radius: 999px; border: none; cursor: pointer;
background: var(--accent, #f0b90b); color: var(--accent-contrast, #1c2530); font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700;
box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.rp-fab::before { content: '📊'; font-size: calc(13px * var(--sv-font-scale, 1)); }
body.rp-sheet-open .rp-fab { display: none; }
.rp-scrim { position: fixed; inset: 0; z-index: 125; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */ }
.rp-scrim[hidden] { display: none; }
}
/* ---------- 中等宽度:导航不再把页面撑出横向滚动条(2026-08-26 体检) ----------
实测:.header-nav 恒宽 770px、不参与收缩,于是
768px 视口 → 页面 scrollWidth 1042(溢出 274)
900px 视口 → 页面 scrollWidth 1042(溢出 142)
1024px 视口 → 不溢出
也就是说既有的 720px 隐藏断点之上、到 1024px 之间**全都在溢出** ——
iPad 竖屏和小尺寸笔记本都会看到横向滚动条、右侧按钮被推出屏幕。
不采用"把隐藏断点从 720 提到 1024"的办法:那会让这一大片设备直接失去顶部导航。
改成让导航在自己那一行里横向滚动 —— 页面本身不再被撑破,导航也还在。
⚠️ 必须写在 .header-nav 主定义(文件上方)之后,否则会被主定义静默盖掉。 */
@media (min-width: 721px) and (max-width: 1023px) {
.chart-header { gap: 12px; overflow: hidden; }
.header-nav {
min-width: 0; /* flex 子项默认 min-width:auto,不给 0 就不会收缩 */
flex: 0 1 auto;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 旧 Edge */
}
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a { padding: 7px 9px; font-size: calc(12.5px * var(--sv-font-scale, 1)); white-space: nowrap; }
/* 工具条同理。720px 以下早就有这套横滑处理(见下方移动端区块),
但 721~1023 这一段一直漏着 —— 实测撑破页面的正是 .ind-group(right 1042)。
这里复用与移动端逐字相同的规则,行为一致、没有第二套口径。 */
.chart-toolbar {
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.chart-toolbar::-webkit-scrollbar { display: none; }
.chart-toolbar > .ind-group:last-child { margin-left: 0; }
.tf-group { flex: 0 0 auto; min-width: 0; overflow: visible; }
.tf-btn { flex: 0 0 auto; }
.ind-group { flex: 0 0 auto; }
}
/* ---------- 移动端图表布局 ---------- */
@media (max-width: 720px) {
.header-nav { display: none; }
/* 头部:价格/涨跌幅收敛,不再溢出遮挡按钮 */
.chart-header { height: 52px; gap: 8px; padding: 0 10px; }
.chart-header .header-left { gap: 8px; flex: 1; min-width: 0; }
.symbol-info { min-width: 0; overflow: hidden; }
.symbol-main { gap: 6px; flex-wrap: nowrap; min-width: 0; }
.symbol-tk { display: none; }
.symbol-name { font-size: calc(12.5px * var(--sv-font-scale, 1)); flex: 0 1 auto; min-width: 4.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); } /* 名称可缩但保底露多字,不再压成单字 */
/* 币对名保底 4.5em:一行只有 176px,价格(min-width:max-content)拿走硬份额后
余量会全压在这里 —— 实测被压到 7px,连一个字母都看不见。给个下限,
真放不下时由名称自己出省略号,而不是整块消失。(2026-09-02) */
.symbol-switch { flex: 0 1 auto; min-width: 4.5em; overflow: hidden; padding: 2px 3px; margin-left: -3px; gap: 2px; }
.symbol-switch .symbol-name { min-width: 0; }
/* 数据源徽标是三者里最可让的:有 logo 在,少两个字母也认得出。
但至少要留下 logo 本身(13px)+ 边框内距,否则缩成一条 4px 的缝,不如不显示。 */
.exchange-switch-wrap { flex: 0 1 auto; min-width: 24px; overflow: hidden; }
.symbol-switch .ss-caret { width: 10px; height: 10px; }
/* 价格完整不截断。flex:0 0 auto 单靠自己挡不住极限压缩(实测 390 视口被压到 9px,
只剩一个数字宽) —— 一行里还有币对名/搜索/数据源三个元素在抢 176px。
min-width:max-content 才是硬保底:价格是这一行最不能少看的数。(2026-09-02) */
.symbol-price { font-size: calc(15px * var(--sv-font-scale, 1)); flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
.symbol-change { font-size: calc(12px * var(--sv-font-scale, 1)); flex: 0 0 auto; }
.symbol-meta { gap: 10px; font-size: calc(10px * var(--sv-font-scale, 1)); margin-top: 2px; flex-wrap: wrap; }
.header-right { gap: 4px; flex: 0 0 auto; }
.header-right .header-btn { width: 30px; height: 30px; }
.header-controls { gap: 4px; }
/* 工具条:整条横向滑动,所有周期(含日/2日/周/更多)都够得到。
旧写法让 .tf-group 内部滚,但同排的指标库/回放等不收缩的组把它挤成 0 宽,滚不动
→ 靠后的周期被裁在屏外(糖哥 2026-07-24 报"移动端选不了多周期")。改成工具栏整体滚。 */
.chart-toolbar {
gap: 6px; padding: 0 8px;
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.chart-toolbar::-webkit-scrollbar { display: none; }
.chart-toolbar > .ind-group:last-child { margin-left: 0; } /* 靠右会和横滑打架,取消 */
.tf-group { flex: 0 0 auto; min-width: 0; overflow: visible; }
.tf-btn { flex: 0 0 auto; }
.ind-group { flex: 0 0 auto; }
}
@media (max-width: 420px) {
.symbol-meta { display: none; } /* 极窄屏 24h 行让位,价格在右栏「要点」可见 */
.symbol-change { display: none; } /* 真机窄屏让位给完整交易对,涨跌幅在右栏「要点」tab 可见 */
.symbol-name { min-width: 0; } /* 涨跌幅让位后,交易对可完整铺开 */
/* 右侧控件收窄(44→36),把省出的宽度让给交易对名称,BTC/USDT 不再截成 BTC/US…(审查 C1) */
.chart-header .icon-btn { width: 36px; height: 36px; padding: 0 6px; }
.chart-header .lang-toggle { min-width: 36px; }
}
/* ---- 真实盘口 ---- */
.ob-head, .ob-row { display: flex; justify-content: space-between; font-size: calc(12px * var(--sv-font-scale, 1)); padding: 3px 2px; font-family: 'JetBrains Mono', monospace; }
.ob-head { color: var(--text-muted, #8a8f9c); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.05)); margin-bottom: 4px; }
.ob-row.ask span:first-child { color: var(--down, #f6465d); }
.ob-row.bid span:first-child { color: var(--up, #2ebd85); }
.ob-row span:last-child { color: var(--text-muted, #8a8f9c); }
.ob-mid { text-align: center; padding: 6px 0; font-weight: 800; font-size: calc(14px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); border-top: 1px solid var(--line-soft, rgba(255,255,255,0.05)); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.05)); margin: 4px 0; font-family: 'JetBrains Mono', monospace; }
.ob-empty, .ob-time { padding: 14px 0; text-align: center; color: var(--text-muted, #8a8f9c); font-size: calc(12px * var(--sv-font-scale, 1)); }
.ob-time { padding: 8px 0 0; }
/* ---- 画图态光标 + 清除按钮 ---- */
#lwcMain.drawing { cursor: crosshair; }
.tool-clear { margin-top: auto; color: var(--down, #f6465d); }
/* ---- KLineCharts 引擎布局 ---- */
.pane-price { flex: 1 1 auto; min-height: 0; }
#lwcMain { height: 100%; }
/* 指标图例栏已启用(AICoin 式,见上方 .chart-legend);K线数值仍由引擎内置 tooltip 呈现 */
/* ---- 周期"更多"下拉 ---- */
.tf-more { position: relative; display: inline-flex; }
.tf-more-btn { display: inline-flex; align-items: center; gap: 4px; }
.tf-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 500;
display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px; border-radius: 10px; min-width: 300px;
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
/* ---- 指标库按钮 + 弹窗(TV 式) ---- */
.ind-lib-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: calc(12.5px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.04); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.ind-lib-btn:hover { border-color: var(--up, #2ebd85); }
.ind-lib-btn .fx { font-style: italic; font-weight: 800; color: var(--up, #2ebd85); }
.il-mask {
position: fixed; inset: 0; z-index: 3000;
display: flex; align-items: center; justify-content: center;
background: transparent; /* 遮罩全透明:开着弹窗也能看清背后 K 线(糖哥 2026-08-10) */
}
.il-modal {
width: min(560px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 80px));
display: flex; flex-direction: column; border-radius: 14px;
position: relative; /* 窗内弹层(盯盘选标的)的定位根:确认框必须居中在本窗格内 */
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.il-head {
display: flex; align-items: center; gap: 8px;
padding: 16px 20px; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--text-main, #f4f5f7);
border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.05));
}
.il-head .fx { font-style: italic; color: var(--up, #2ebd85); }
.il-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted, #8a8f9c); font-size: calc(20px * var(--sv-font-scale, 1)); line-height: 1; }
.il-body { overflow-y: auto; padding: 8px 20px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
/* 分列归属(糖哥 2026-07-24):左=平台自研系列(糖哥指标库/消息决策库/我的指标/我的盯盘/策略文件库),
右=迁移进来的常规指标(主图叠加/副图指标);显式两列容器,不靠 section 数量奇偶排布 */
.il-col { min-width: 0; display: flex; flex-direction: column; }
.il-section { padding-top: 10px; }
.il-title { font-size: calc(11.5px * var(--sv-font-scale, 1)); letter-spacing: 0.06em; color: var(--text-muted, #8a8f9c); margin-bottom: 6px; }
.il-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 2px; cursor: pointer; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.03));
}
.il-row.disabled { cursor: default; opacity: 0.55; }
.il-name { font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.il-note { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.il-switch {
position: relative; width: 34px; height: 18px; border-radius: 999px; flex: none; cursor: pointer;
background: rgba(255,255,255,0.10); transition: background .15s;
}
.il-switch i {
position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
background: var(--text-muted, #8a8f9c); transition: all .15s;
}
.il-switch.on { background: rgba(46,189,133,0.35); }
.il-switch.on i { left: 18px; background: var(--up, #2ebd85); }
@media (max-width: 640px) { .il-body { grid-template-columns: 1fr; } }
/* 修复:hidden 属性优先于展示布局 */
.tf-menu[hidden] { display: none; }
/* ---------- 周期面板两态(糖哥 2026-09-02,对标 AICoin)---------- */
/* 首选栏:纯容器,不能用 flex:1 —— 均分会把「15分」这类长标签在按钮内挤折行(站里踩过) */
.tf-fav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tfm-custom { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.tfm-custom-t { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main); margin-right: 2px; }
.tfm-custom input { width: 62px; padding: 4px 6px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main); background: var(--bg-elevated); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.tfm-custom select { padding: 4px 6px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main); background: var(--bg-elevated); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.tfm-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 2px; }
.tfm-head-t { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main); }
.tfm-edit, .tfm-reset { padding: 3px 10px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); cursor: pointer; }
.tfm-edit:hover, .tfm-reset:hover { color: var(--text-main); border-color: var(--text-muted); }
/* 档位按钮:编辑态要挂角标,所以给相对定位 */
.tfm-chip { position: relative; }
.tfm-chip.dim { opacity: .45; } /* 浏览态:没在首选栏上的档淡一档 */
.tfm-chip.cur { color: var(--bg-core); background: var(--text-main); }
.tfm-chip.on { outline: 1px solid var(--text-muted); }/* 编辑态:已在首选栏 */
.tfm-tog { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; line-height: 15px; text-align: center; font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; color: var(--bg-core); background: var(--text-muted); border-radius: 50%; cursor: pointer; }
.tfm-tog:hover { background: var(--text-main); }
/* 删除自定义周期(糖哥 2026-09-04):只自定义档编辑态出现,放左上角与 ⊖/＋ 分居两角,红底示删除 */
.tfm-del { position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; line-height: 15px; text-align: center; font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; color: #fff; background: #f6465d; border-radius: 50%; cursor: pointer; }
.tfm-del:hover { background: #ff5c6c; }
.tfm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 10px; border-top: 1px solid var(--line-soft); }
.tfm-foot-tip { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted); }
/* ---- 画线工具面板(AICOIN 式分组) ---- */
.dt-flyout {
position: absolute; left: calc(100% + 8px); top: 0; z-index: 600;
/* 2026-09-02 糖哥「该页面宽度不够,将字体露在外面」:210px 时右列整体探出面板
17~46px(实测),「斐波那契扩展」这类长名直接压在 K 线上。
加到 248 让中文两列都放得下;真放不下的(外语更长)由下面 minmax(0,1fr)
+ 换行兜住,绝不再溢出到面板外。 */
width: 248px; padding: 10px; border-radius: 12px;
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.dt-flyout[hidden] { display: none; }
.dt-group-title { font-size: calc(10.5px * var(--sv-font-scale, 1)); letter-spacing: 0.05em; color: var(--text-muted, #8a8f9c); margin: 8px 2px 4px; }
.dt-group-title:first-child { margin-top: 0; }
/* ⚠️ 必须 minmax(0,1fr) 而不是 1fr:1fr 等价 minmax(**auto**,1fr),
内容比列宽宽时会把列**撑破**、整个右列探出面板 —— 这正是上面那个溢出的根。
与「flex:1 会均分把长标签挤折」是同一类坑:轨道的最小尺寸默认跟着内容走。 */
.dt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.dt-item {
padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1)); text-align: left;
background: none; color: var(--text-main, #f4f5f7); border: 1px solid transparent;
display: flex; align-items: center; justify-content: space-between; gap: 4px;
min-width: 0; /* flex 子项同理:不给 0 下限,长名照样把 item 撑开 */
}
/* 长名(外语尤其)允许折到第二行,行内两端的书签/ⓘ 不跟着换行。
宁可这一项高一点,也不让字跑到面板外面去。 */
.dt-item .dt-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.dt-item:hover { background: rgba(255,255,255,0.05); border-color: var(--line-strong, rgba(255,255,255,0.09)); }
/* 每项右侧 ⓘ:点开该工具的功能与用法 */
.dt-info { font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1; color: var(--text-muted, #8a8f9c); opacity: 0.55; padding: 2px 3px; border-radius: 5px; flex: none; }
.dt-item:hover .dt-info { opacity: 1; }
.dt-info:hover { color: var(--accent, #f0b90b); background: rgba(240,185,11,0.12); }
/* 每项左侧书签:加入/移出收藏浮条(糖哥 2026-08-23,用户建议对标 TradingView) */
.dt-fav { display: inline-grid; place-items: center; flex: none; color: var(--text-muted, #8a8f9c); opacity: 0.32; padding: 1px; border-radius: 5px; cursor: pointer; transition: opacity .12s, color .12s; }
.dt-item:hover .dt-fav { opacity: 0.72; }
.dt-fav:hover { opacity: 1; color: var(--accent, #f0b90b); }
.dt-fav.on { opacity: 1; color: var(--accent, #f0b90b); }
.dt-fav.on svg path { fill: currentColor; }
/* 2026-09-02:原来是 nowrap+ellipsis —— 面板加宽后长名不再溢出到面板外了,
却全被截成「斐波那…」「涨跌幅…」,用户认不出是哪个工具,比溢出更糟。
改成允许折行:工具名必须完整可读,宁可这一项占两行。
⚠️ 这条写在 .dt-item .dt-name 之后,会盖掉那条的 overflow-wrap —— 所以两处
都得带上,别只改一处(改完请在四种语言下各看一眼)。 */
.dt-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
/* 收藏浮条:TV 式横排小浮窗,浮在主图顶部中央;只在有收藏时显示,超宽横向滚动 */
.dt-favbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 3px; max-width: calc(100% - 120px); padding: 3px 5px; border-radius: 9px; background: var(--bg-elevated, #14181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.10)); box-shadow: 0 6px 18px rgba(0,0,0,0.4); overflow-x: auto; }
.dt-favbar[hidden] { display: none; }
.dt-favbar-lead { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); padding: 0 4px 0 2px; flex: none; user-select: none; cursor: move; }
.dt-favbar.dragging { cursor: grabbing; user-select: none; box-shadow: 0 10px 26px rgba(0,0,0,0.55); }
/* 一键收起(糖哥 2026-08-24)。跟在图标后面、用一条竖线与工具分开,免得看着像又一个画线工具 */
.dt-favbar-close {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; margin-left: 3px; padding: 0;
border: 0; border-left: 1px solid var(--line-soft, rgba(255,255,255,0.10)); border-radius: 0 6px 6px 0;
background: transparent; color: var(--text-muted, #8a8f9c); cursor: pointer;
}
.dt-favbar-close:hover { color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.08); }
/* 浮层顶部的开关行:标题行右侧一个小按钮,收起后靠它找回来 */
.dt-fav-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-fav-sw {
border: 1px solid var(--line-strong, rgba(255,255,255,0.14)); border-radius: 6px;
background: transparent; color: var(--text-secondary, #b0b4bd);
font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 1; padding: 3px 8px; cursor: pointer;
}
.dt-fav-sw:hover:not(:disabled) { color: var(--text-main, #f4f5f7); border-color: var(--accent-line, rgba(255,255,255,0.28)); }
.dt-fav-sw:disabled { opacity: .45; cursor: default; }
.dt-favbtn { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted, #8a8f9c); cursor: pointer; transition: all var(--transition-fast, .15s); }
/* 收藏位的键位角标(糖哥 2026-09-02「增加用户收藏的快捷键」):
Alt+数字直呼第 N 个收藏工具。角标压在图标右下角,小而淡 ——
它是提示不是内容,别把工具图标本身盖住。 */
.dt-favbtn { position: relative; }
.dt-favkey {
position: absolute; right: 1px; bottom: 0;
font-size: calc(8px * var(--sv-font-scale, 1)); font-style: normal; line-height: 1;
color: var(--text-muted, #8a8f9c); opacity: .75; pointer-events: none;
}
.dt-favbtn:hover { color: var(--text-main, #f4f5f7); background: var(--accent-soft, rgba(240,185,11,0.12)); }
.dt-favbtn.active { color: var(--accent, #f0b90b); }
/* 工具用法卡 */
.dth-modal { width: min(360px, 92vw); }
.dth-body { padding: 12px 14px; }
.dth-sec { margin-bottom: 10px; }
.dth-sec b { display: inline-block; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--accent, #f0b90b); letter-spacing: 0.08em; margin-bottom: 3px; }
.dth-sec p { margin: 0; font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 1.7; color: var(--text-main, #f4f5f7); }
.dth-common { margin: 10px 0 12px; padding: 8px 10px; border-radius: 8px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.7; color: var(--text-muted, #8a8f9c); background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.dth-try { width: 100%; padding: 9px 0; border-radius: 8px; border: 1px solid var(--accent, #f0b90b); background: rgba(240,185,11,0.12); color: var(--accent, #f0b90b); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; cursor: pointer; }
.dth-try:hover { background: rgba(240,185,11,0.22); }
/* ---- 图表背景水印 ---- */
.pane-price { position: relative; }
.chart-watermark {
position: absolute; inset: 0; z-index: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
pointer-events: none; user-select: none;
}
.chart-watermark img { width: 56px; height: 56px; border-radius: 14px; opacity: 0.05; }
.chart-watermark span {
font-family: 'Archivo', sans-serif; font-weight: 900; font-size: calc(34px * var(--sv-font-scale, 1)); letter-spacing: 0.12em;
color: var(--text-main, #f4f5f7); opacity: 0.045; text-transform: uppercase;
}
#lwcMain { position: relative; z-index: 1; }
.scanner-chart-unavailable {
position: absolute;
inset: 0;
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
padding: 24px;
color: var(--text-main, #f4f5f7);
text-align: center;
background: rgba(11, 14, 17, 0.94);
}
.scanner-chart-unavailable strong { font-size: calc(15px * var(--sv-font-scale, 1)); }
.scanner-chart-unavailable span { max-width: 360px; color: var(--text-muted, #8a8f9c); font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.7; }
/* 绘制态提示:光标按钮呼吸提醒可退出 */
body.sv-drawing .tool-btn[data-tool="cursor"] { color: var(--up, #2ebd85); animation: sv-pulse 1.2s ease-in-out infinite; }
@keyframes sv-pulse { 50% { background: rgba(46,189,133,0.18); } }
/* ---- 工具栏即时悬浮名称(data-tip 自绘气泡,右侧弹出) ---- */
.tools-rail .tool-btn[data-tip] { position: relative; }
.tools-rail .tool-btn[data-tip]::after {
content: attr(data-tip);
position: absolute; left: calc(100% + 10px); top: 50%;
transform: translateY(-50%) translateX(-4px);
padding: 5px 9px; border-radius: 7px; white-space: nowrap;
font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.4; color: var(--text-main, #f4f5f7);
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
opacity: 0; pointer-events: none;
transition: opacity .12s ease, transform .12s ease;
z-index: 650;
}
.tools-rail .tool-btn[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
/* 移动端画线抽屉里不做悬浮(触屏无 hover) */
@media (hover: none) { .tools-rail .tool-btn[data-tip]::after { display: none; } }
/* 保险:抽屉遮罩仅在激活时接收事件,任何状态下都不得挡图表 */
.drawer-scrim { pointer-events: none; }
.drawer-scrim.show { pointer-events: auto; }
/* ---- 选中图形样式编辑面板(批次2) ---- */
#ovStylePanel {
position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 700;
display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
#ovStylePanel[hidden] { display: none; }
.osp-sep { width: 1px; height: 18px; background: var(--line-soft, rgba(255,255,255,0.08)); }
/* 颜色选择器(色板+明暗滑块下拉,迁移自旧版 draw-color-picker) */
.osp-color, .osp-line { position: relative; }
.osp-color-btn, .osp-line-btn {
display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; cursor: pointer;
border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); color: var(--text-main, #f4f5f7);
}
.osp-color-btn:hover, .osp-line-btn:hover { border-color: var(--line-strong, rgba(255,255,255,0.16)); }
.osp-color-btn i, .osp-line-btn i { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); opacity: 0.6; }
.osp-color-cur { width: 18px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.osp-line-btn { min-width: 52px; }
.osp-line-cur { display: inline-flex; align-items: center; width: 30px; }
.osp-color-menu, .osp-line-menu {
position: absolute; left: 0; top: 32px; display: none; padding: 10px; border-radius: 10px; z-index: 720;
background: var(--bg-elevated, #14181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.osp-color.open .osp-color-menu { display: grid; gap: 10px; }
.osp-line.open .osp-line-menu { display: grid; gap: 4px; min-width: 96px; }
.osp-palette { display: grid; grid-template-columns: repeat(5, 22px); gap: 7px; }
.osp-swatch { width: 22px; height: 22px; border-radius: 5px; cursor: pointer; border: 2px solid rgba(255,255,255,0.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16); }
.osp-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(110,168,254,0.4); }
.osp-shade { width: 100%; accent-color: var(--accent, #6ea8fe); }
.osp-ticks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.osp-tick { height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); }
.osp-line-opt { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid transparent; }
.osp-line-opt:hover { background: rgba(255,255,255,0.05); }
.osp-line-opt.active { border-color: var(--accent, #6ea8fe); }
.osp-line-opt em { font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.osp-sample { display: inline-block; width: 34px; min-height: 1px; border-radius: 2px; }
.osp-del { width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1)); color: #f6465d; background: rgba(246,70,93,0.10); border: 1px solid rgba(246,70,93,0.3); }
/* ---- 磁吸按钮激活态 ---- */
.tool-btn[data-tool="magnet"].active { color: #F0B90B; background: rgba(240,185,11,0.12); }
/* ---- 画线模板列表 ---- */
.dt-save-tpl { grid-column: 1 / -1; text-align: center; margin-bottom: 2px; }
.tpl-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; }
.tpl-name { flex: 1; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-apply { padding: 2px 8px; border-radius: 5px; font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--up, #2ebd85); background: rgba(46,189,133,0.10); border: 1px solid rgba(46,189,133,0.3); }
.tpl-del { padding: 2px 6px; border-radius: 5px; font-size: calc(12px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-muted, #8a8f9c); background: none; border: none; }
.tpl-del:hover { color: #f6465d; }
.tpl-empty { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); padding: 6px 2px; }
/* ---- 指标参数自定义 ---- */
.il-row-wrap { border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.03)); }
.il-row-wrap .il-row { border-bottom: none; }
.il-gear { background: none; border: none; cursor: pointer; color: var(--text-muted, #8a8f9c); font-size: calc(13px * var(--sv-font-scale, 1)); padding: 0 4px; }
.il-gear:hover { color: var(--up, #2ebd85); }
.il-params { display: flex; gap: 6px; padding: 0 2px 8px; }
.il-params[hidden] { display: none; }
.il-params-input {
flex: 1; padding: 5px 8px; border-radius: 6px; font-size: calc(12px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace;
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.il-params-apply {
padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1));
color: var(--up, #2ebd85); background: rgba(46,189,133,0.10); border: 1px solid rgba(46,189,133,0.3);
}
/* ---- K线回放控制条 ---- */
#replayBar {
position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 800; /* 抬离底部时间轴,不遮挡刻度 */
max-width: calc(100% - 16px);
display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 9px 14px; border-radius: 12px;
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 10px 28px rgba(0,0,0,0.5);
}
#replayBar .rp-tag { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 800; color: #F0B90B; letter-spacing: 0.08em; }
#rpSlider { width: 220px; accent-color: var(--up, #2ebd85); }
#rpPlay, #rpExit {
padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: calc(12.5px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
#rpExit { color: #f6465d; border-color: rgba(246,70,93,0.3); }
.rp-guess {
padding: 4px 12px; border-radius: 7px; cursor: pointer; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700;
background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.rp-guess.up { color: var(--up, #2ebd85); border-color: rgba(46,189,133,0.4); }
.rp-guess.up:hover { background: rgba(46,189,133,0.12); }
.rp-guess.down { color: var(--down, #f6465d); border-color: rgba(246,70,93,0.4); }
.rp-guess.down:hover { background: rgba(246,70,93,0.12); }
/* 押注战绩:预留固定宽度居中槽位,点涨/跌填入结果时整条不再撑宽,涨跌按钮位置钉死不动。
槽位宽度按最长文案「✗对 156胜162负 47.5% · 涨151/跌167」留(糖哥 2026-07-24 加胜率+方向分布后重算) */
#rpScore { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); white-space: nowrap; min-width: 236px; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 4px; }
#rpScore b { font-style: normal; margin-right: 0; }
#rpScore b.ok { color: var(--up, #2ebd85); }
#rpScore b.bad { color: var(--down, #f6465d); }
#rpScore .rp-rate { font-style: normal; font-weight: 700; color: var(--text-main, #f4f5f7); }
#rpScore .rp-dir { font-style: normal; color: var(--text-disabled, #6b7080); }
/* 窄屏先舍方向分布(明细仍在 title 里),保住胜负+胜率不换行 */
@media (max-width: 720px) {
#rpScore { min-width: 150px; }
#rpScore .rp-dir { display: none; }
}
#rpSpeed {
padding: 4px 6px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
#rpInfo { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: 'JetBrains Mono', monospace; min-width: 170px; }
#replayBtn.active { color: #F0B90B; border-color: rgba(240,185,11,0.4); }
/* ---- 画线管理面板 ---- */
.dm-modal { width: min(480px, calc(100vw - 40px)); }
.dm-actions { display: flex; gap: 8px; padding: 10px 20px 0; }
.dm-btn {
padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.dm-btn.danger { color: #f6465d; border-color: rgba(246,70,93,0.3); }
.dm-body { grid-template-columns: 1fr !important; }
.dm-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.04)); }
.dm-name { flex: 1; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.dm-time { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: 'JetBrains Mono', monospace; }
.dm-op { background: none; border: none; cursor: pointer; font-size: calc(13px * var(--sv-font-scale, 1)); padding: 2px 4px; }
.dm-op.danger { color: #f6465d; }
/* ---- 公式编辑器 ---- */
/* fe-body 必须是自己的滚动容器:它是 .il-modal(flex column + max-height) 的 flex 子项,
flex 子项默认 min-height:auto 会被内容顶破,展开「函数速查」就整段溢出到卡片外(糖哥 2026-07-24 报) */
.fe-modal { width: min(680px, calc(100vw - 40px)); max-height: min(760px, calc(100vh - 64px)); overflow: hidden; }
.fe-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.fe-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fe-name {
flex: 1; padding: 8px 10px; border-radius: 8px; font-size: calc(13px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-pane { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); display: flex; gap: 4px; align-items: center; cursor: pointer; white-space: nowrap; }
.fe-pane input { accent-color: var(--up, #2ebd85); }
.fe-tpl-row { display: flex; gap: 8px; align-items: flex-start; }
.fe-tpl-label { flex: none; padding-top: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); color: #F0B90B; letter-spacing: 0.05em; }
.fe-tpl-cards { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.fe-tpl-card {
flex: none; display: flex; align-items: stretch; overflow: hidden;
border-radius: 8px; font-size: calc(12px * var(--sv-font-scale, 1));
color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.04);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-tpl-apply {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-height: 44px; padding: 5px 10px; cursor: pointer; border: 0; background: transparent;
color: inherit; font: inherit; white-space: nowrap;
}
.fe-tpl-card i { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.fe-tpl-teach {
min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer; border: 0; border-left: 1px solid var(--line-soft, rgba(255,255,255,0.06));
background: rgba(110,168,254,0.05); color: #6EA8FE; font-size: calc(10.5px * var(--sv-font-scale, 1)); white-space: nowrap;
}
.fe-tpl-teach:hover, .fe-tpl-teach:focus-visible { background: rgba(110,168,254,0.14); color: #9bc2ff; outline: none; }
.fe-tpl-card:hover { border-color: rgba(240,185,11,0.5); }
.fe-tpl-card.active { border-color: #F0B90B; background: rgba(240,185,11,0.08); }
.fe-tpl-card.active i { color: #F0B90B; }
.fe-modal { position: relative; }
.fe-tut-btn {
padding: 2px 6px; border-radius: 6px; cursor: pointer; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 400;
color: var(--text-muted, #8a8f9c); background: none; border: none;
}
.fe-tut-btn:hover { color: #F0B90B; }
.fe-tut {
position: absolute; top: 53px; left: 0; right: 0; bottom: 0; z-index: 6;
overflow-y: auto; padding: 14px 20px 18px; border-radius: 0 0 14px 14px;
background: var(--bg-elevated, #14181f);
display: flex; flex-direction: column; gap: 12px;
}
.fe-tut[hidden] { display: none; }
.fe-tut-sec b { display: block; font-size: calc(13px * var(--sv-font-scale, 1)); color: #F0B90B; margin-bottom: 6px; }
.fe-tut-sec p { margin: 4px 0; font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 1.75; color: var(--text-main, #f4f5f7); }
.fe-tut-sec i { font-style: normal; color: #6EA8FE; font-weight: 600; }
.fe-tpl-tut .fe-tut-sec p { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
.fe-tpl-tut .fe-tut-sec p i { white-space: nowrap; }
.fe-tpl-tut-note {
padding: 9px 11px; border-radius: 8px; font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.65;
color: var(--text-muted, #8a8f9c); background: rgba(110,168,254,0.06); border: 1px solid rgba(110,168,254,0.18);
}
.fe-tpl-tut-close { align-self: flex-end; }
.fe-tut-sec code {
font-family: 'JetBrains Mono', monospace; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: #F0B90B;
background: rgba(240,185,11,0.08); padding: 1px 5px; border-radius: 4px;
}
.fe-tut-close { align-self: flex-end; margin-top: 4px; }
.fe-start { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-soft, rgba(255,255,255,0.06)); background: rgba(255,255,255,0.02); }
.fe-start-tabs { display: flex; gap: 8px; align-items: center; }
.fe-start-seg {
display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
background: rgba(128,131,141,0.10);
border: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.fe-start-tab {
padding: 4px 14px; border-radius: 999px; cursor: pointer; font-size: calc(12px * var(--sv-font-scale, 1)); white-space: nowrap;
color: var(--text-muted, #8a8f9c); background: none; border: none;
}
.fe-start-tab:hover { color: var(--text-main, #f4f5f7); }
.fe-start-tab.active { background: #F0B90B; color: #1b1f27; font-weight: 700; }
.fe-ai-row { display: flex; gap: 8px; align-items: stretch; }
.fe-ai-row textarea {
flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; font-size: calc(12.5px * var(--sv-font-scale, 1)); resize: none; line-height: 1.6;
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-ai-row .il-params-apply { align-self: center; white-space: nowrap; }
.fe-start-src { margin-left: auto; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-sig { display: flex; gap: 4px; align-items: center; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); cursor: pointer; white-space: nowrap; }
.fe-sig input { accent-color: var(--up, #2ebd85); }
.fe-confirm {
position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.38); border-radius: 14px;
}
.fe-confirm-box {
min-width: 240px; max-width: 78%; padding: 16px 20px; border-radius: 12px;
background: var(--bg-elevated, #14181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.fe-confirm-box p { margin: 0 0 14px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.fe-confirm-ops { display: flex; gap: 10px; justify-content: flex-end; }
/* 多标的扫描盯盘选标的(牌三) */
.fe-confirm-box.usm-pick { min-width: 340px; max-width: 92%; }
.usm-pick-tfs, .usm-pick-syms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.usm-pick-syms { max-height: 132px; overflow-y: auto; }
.usm-tf, .usm-sym {
padding: 4px 10px; border-radius: 999px; font-size: calc(12px * var(--sv-font-scale, 1)); cursor: pointer;
background: var(--bg-sunken, rgba(255,255,255,0.04)); color: var(--text-dim, #9aa4b2);
border: 1px solid var(--line, rgba(255,255,255,0.08));
}
.usm-tf:hover, .usm-sym:hover { color: var(--text-main, #f4f5f7); }
.usm-tf.on, .usm-sym.on {
background: var(--amber, #f0b90b); border-color: var(--amber, #f0b90b); color: #14181f; font-weight: 600;
}
.usm-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa4b2); }
.fe-start-pane { display: flex; flex-direction: column; gap: 6px; }
.fe-start-pane[hidden] { display: none; }
.fe-start-pane .il-new-btn { align-self: flex-start; margin-left: 0; }
.fe-doc-hint {
padding: 5px 10px; border-radius: 7px; font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.6;
color: var(--text-muted, #8a8f9c); background: rgba(110,168,254,0.06);
border: 1px solid rgba(110,168,254,0.22);
}
.fe-doc-hint b { color: #6EA8FE; font-family: 'JetBrains Mono', monospace; font-weight: 600; margin-right: 6px; }
.fe-doc-hint[hidden] { display: none; }
.fe-fork-sel {
flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-bld { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px dashed var(--line-strong, rgba(255,255,255,0.12)); }
.fe-bld-head { display: flex; gap: 8px; align-items: baseline; }
.fe-bld-hint { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.fe-bld-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fe-bld-word { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.fe-bld-row select, .fe-bld-row input {
padding: 5px 6px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1));
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-bld-row input { width: 74px; font-family: 'JetBrains Mono', monospace; }
.fe-bld-del { background: none; border: none; cursor: pointer; color: #f6465d; font-size: calc(14px * var(--sv-font-scale, 1)); padding: 0 4px; }
.fe-bld .il-new-btn { align-self: flex-start; margin-left: 0; }
.fe-code {
min-height: 180px; padding: 10px 12px; border-radius: 8px; resize: vertical;
font-family: 'JetBrains Mono', monospace; font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 1.7;
background: rgba(0,0,0,0.25); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.fe-error { padding: 8px 12px; border-radius: 8px; font-size: calc(12px * var(--sv-font-scale, 1)); color: #f6465d; background: rgba(246,70,93,0.08); border: 1px solid rgba(246,70,93,0.3); }
.fe-help { flex: none; }
.fe-help summary { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); cursor: pointer; }
/* 速查清单本身也很长:自带滚动条,展开时不把整个编辑器顶长 */
.fe-help pre {
font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.8; color: var(--text-muted, #8a8f9c);
white-space: pre-wrap; word-break: break-word; margin: 6px 0 0;
max-height: 220px; overflow-y: auto; overscroll-behavior: contain;
padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03);
}
/* 操作行吸底:矮屏/内容长时不用滚到最底才能点「保存并启用」 */
.fe-actions {
display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
position: sticky; bottom: -18px; z-index: 2;
margin: 0 -20px -18px; padding: 10px 20px 18px;
background: var(--bg-elevated, #14181f);
border-top: 1px solid var(--line-soft, rgba(255,255,255,0.05));
}
.fe-mine { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; margin-right: auto; }
.fe-mine-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.fe-mine-chip {
flex: none; padding: 3px 10px; border-radius: 999px; cursor: pointer; font-size: calc(11.5px * var(--sv-font-scale, 1));
color: var(--text-main, #f4f5f7); background: rgba(255,255,255,0.04);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09)); white-space: nowrap;
}
.fe-mine-chip:hover { border-color: rgba(240,185,11,0.5); }
.fe-mine-chip.active { color: #F0B90B; border-color: rgba(240,185,11,0.5); background: rgba(240,185,11,0.08); }
.fe-mine-empty { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); white-space: nowrap; }
.il-new-btn {
margin-left: 8px; padding: 1px 8px; border-radius: 999px; cursor: pointer; font-size: calc(11px * var(--sv-font-scale, 1));
color: var(--up, #2ebd85); background: rgba(46,189,133,0.10); border: 1px solid rgba(46,189,133,0.3);
}
/* ---- 回测报告 ---- */
.bt-modal { width: min(520px, calc(100vw - 40px)); }
.bt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 20px 6px; }
.bt-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft, rgba(255,255,255,0.05)); }
.bt-cell span { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.bt-cell b { font-size: calc(16px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); }
.bt-cell b.up { color: var(--up, #2ebd85); }
.bt-cell b.down { color: var(--down, #f6465d); }
.bt-note { padding: 8px 20px 12px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.7; color: var(--text-muted, #8a8f9c); }
.bt-btn { color: #F0B90B; border-color: rgba(240,185,11,0.35); }
@media (max-width: 560px) { .bt-grid { grid-template-columns: repeat(2, 1fr); } }
/* ---- v2.5:回测设置/逐笔明细/参数面板 ---- */
.bt-settings { display: flex; gap: 12px; align-items: center; padding: 12px 20px 0; flex-wrap: wrap; }
.bt-settings label { display: flex; gap: 6px; align-items: center; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.bt-settings input, .bt-settings select {
width: 84px; padding: 5px 8px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace;
background: rgba(255,255,255,0.05); color: var(--text-main, #f4f5f7);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
}
.bt-trades { max-height: 200px; overflow-y: auto; margin: 10px 20px 0; border: 1px solid var(--line-soft, rgba(255,255,255,0.05)); border-radius: 10px; }
.bt-tr { display: grid; grid-template-columns: 34px 40px 1fr 1fr 48px 76px; gap: 6px; padding: 6px 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.04)); }
.bt-tr:last-child { border-bottom: none; }
.bt-tr-head { color: var(--text-muted, #8a8f9c); position: sticky; top: 0; background: var(--bg-elevated, #14181f); }
.bt-tr .up { color: var(--up, #2ebd85); }
.bt-tr .down { color: var(--down, #f6465d); }
.fe-params-box { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border-radius: 8px; background: rgba(240,185,11,0.05); border: 1px solid rgba(240,185,11,0.2); }
.fe-params-box[hidden] { display: none; }
.fe-params-label { font-size: calc(11px * var(--sv-font-scale, 1)); color: #F0B90B; letter-spacing: 0.05em; }
.fe-param-item { display: flex; gap: 6px; align-items: center; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.fe-param-input { width: 76px; padding: 4px 8px; border-radius: 6px; font-size: calc(12px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace; background: rgba(255,255,255,0.06); color: var(--text-main, #f4f5f7); border: 1px solid var(--line-strong, rgba(255,255,255,0.09)); }
/* ---- 公式编辑器:代码高亮层 + 自动补全 ---- */
.fe-code-wrap { position: relative; background: rgba(0,0,0,0.25); border-radius: 8px; }
.fe-code-wrap .fe-code { background: transparent; }
.fe-code-wrap textarea.fe-code {
position: relative; z-index: 1; display: block; width: 100%;
color: transparent; caret-color: #f4f5f7;
}
.fe-code-wrap textarea.fe-code::placeholder { color: #5b6472; }
.fe-code-wrap textarea.fe-code::selection { background: rgba(110,168,254,0.28); }
.fe-hl {
position: absolute; inset: 0; z-index: 0; margin: 0; overflow: hidden;
border-color: transparent; pointer-events: none;
white-space: pre-wrap; overflow-wrap: break-word; color: #f4f5f7;
}
.fe-hl .t-kw { color: #e064c7; }
.fe-hl .t-fn { color: #6ea8fe; }
.fe-hl .t-sr { color: #f0b90b; }
.fe-hl .t-num { color: #2ebd85; }
.fe-hl .t-str { color: #e5a86b; }
.fe-hl .t-cmt { color: #5b6472; }
.fe-hl .t-op { color: #9aa3b2; }
.fe-hl .hl-ln { display: inline; }
.fe-hl .hl-err { background: rgba(246,70,93,0.20); border-radius: 3px; }
.fe-ac {
position: absolute; left: 10px; bottom: 8px; z-index: 4; min-width: 150px;
background: #1c2230; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45); overflow: hidden;
}
.fe-ac-item {
display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-size: calc(12px * var(--sv-font-scale, 1)); color: #d5dae4;
}
.fe-ac-item i { font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); width: 14px; text-align: center; color: #6ea8fe; opacity: 0.9; }
.fe-ac-item.sel, .fe-ac-item:hover { background: rgba(110,168,254,0.14); color: #fff; }
/* ---- 服务端盯盘列表 + 信号推送提示 ---- */
.usm-row { padding: 6px 2px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.usm-row:last-child { border-bottom: none; }
/* 多标的扫描盯盘:同策略成组,组内行缩进挂在组头下 */
.usm-group-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 2px 2px; }
.usm-row.in-group { padding-left: 12px; border-left: 2px solid var(--line, rgba(255,255,255,0.08)); margin-left: 2px; }
/* 载入起点后提示"还差保存这一步"(糖哥 2026-07-22:生成完以为就好了) */
.fe-save-cue {
margin-right: auto; padding-left: 4px;
font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--amber, #f0b90b); white-space: nowrap;
}
.fe-save-cue[hidden] { display: none; }
#feSave.cue { animation: feSavePulse 1.1s ease-in-out 3; }
@keyframes feSavePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(240, 185, 11, 0); }
50% { box-shadow: 0 0 0 5px rgba(240, 185, 11, 0.32); }
}
@media (prefers-reduced-motion: reduce) {
#feSave.cue { animation: none; box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.4); }
}
/* 组合条件盯盘 */
.il-mini {
margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer;
background: var(--bg-sunken, rgba(255,255,255,0.04)); color: var(--text-dim, #9aa4b2);
border: 1px solid var(--line, rgba(255,255,255,0.08));
}
.il-mini:hover { color: var(--amber, #f0b90b); border-color: var(--amber, #f0b90b); }
.usm-row.usm-combo { border-left: 2px solid var(--amber, #f0b90b); padding-left: 10px; margin-top: 4px; }
.usm-pick-mons { flex-direction: column; align-items: stretch; }
.usm-pick-mons .usm-sym { text-align: left; border-radius: 8px; }
.usm-pick-sep { width: 1px; align-self: stretch; background: var(--line, rgba(255,255,255,0.1)); margin: 0 2px; }
.usm-line { display: flex; align-items: center; gap: 8px; }
.usm-name { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); font-weight: 600; }
.usm-meta { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.usm-status { font-size: calc(10px * var(--sv-font-scale, 1)); padding: 1px 7px; border-radius: 999px; }
.usm-status.ok { color: #2ebd85; background: rgba(46,189,133,0.12); }
.usm-status.off { color: #8a8f9c; background: rgba(255,255,255,0.06); }
.usm-status.err { color: #f6465d; background: rgba(246,70,93,0.12); }
.usm-ops { margin-left: auto; display: flex; gap: 4px; }
.usm-sub { margin-top: 3px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
#svToastHost { position: fixed; top: 64px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.sv-toast {
max-width: 340px; padding: 10px 14px; border-radius: 10px; font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 1.5;
color: #f4f5f7; background: rgba(28,34,48,0.96); border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; transform: translateX(12px);
transition: opacity .3s ease, transform .3s ease;
}
.sv-toast.show { opacity: 1; transform: translateX(0); }
.sv-toast.ok { border-left: 3px solid #2ebd85; }
.sv-toast.warn { border-left: 3px solid #f6465d; }
/* ---- 自选空态 ---- */
.sp-empty { padding: 28px 14px; text-align: center; font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 2; color: var(--text-muted, #8a8f9c); }
.sp-empty a { color: var(--accent, #f0b90b); text-decoration: none; }
/* 抽屉行小图标 */
.spr-ic { display: inline-flex; margin-right: 6px; }
.spr-ic .coin-logo, .spr-ic .asset-icon { width: 22px; height: 22px; font-size: calc(8px * var(--sv-font-scale, 1)); }
.spr-ic .asset-icon.asset-metal { font-size: calc(10px * var(--sv-font-scale, 1)); }
/* ---- 盘口全深度 ---- */
.ob-controls { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; flex-wrap: wrap; }
.ob-ctl-lb { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.ob-dd { position: relative; }
.ob-dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-main); background: var(--bg-tertiary, rgba(255,255,255,0.06)); border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); font-variant-numeric: tabular-nums; }
.ob-dd-btn i { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .6; }
.ob-dd-btn:hover { border-color: var(--warn, #f0b90b); }
.ob-dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 84px; max-height: 240px; overflow-y: auto; background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,0.14)); border-radius: 8px; box-shadow: var(--shadow-soft, 0 8px 24px rgba(0,0,0,.4)); padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ob-dd-menu[hidden] { display: none; } /* 作者样式 display:grid 会盖掉 hidden 的 UA display:none —— 必须显式关 */
.ob-dd[data-dd="depth"] .ob-dd-menu { grid-template-columns: 1fr; }
.ob-dd-opt { text-align: center; padding: 5px 8px; border-radius: 5px; font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-secondary); background: transparent; border: none; font-variant-numeric: tabular-nums; }
.ob-dd-opt:hover { background: var(--accent-soft, rgba(255,255,255,0.08)); color: var(--text-main); }
.ob-dd-opt.sel { color: var(--accent-contrast, #1c2530); background: var(--accent, #f0b90b); font-weight: 600; }
.ob-ratio { padding: 6px 10px 2px; }
.ob-ratio-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--down, #f6465d); }
.ob-ratio-bar .bid { display: block; height: 100%; background: var(--up, #2ebd85); }
.ob-ratio-text { display: flex; justify-content: space-between; font-size: calc(10.5px * var(--sv-font-scale, 1)); margin-top: 3px; }
.ob-ratio-text .up { color: var(--up, #2ebd85); } .ob-ratio-text .down { color: var(--down, #f6465d); }
.ob-head { display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; padding: 6px 10px 3px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.ob-side { display: flex; flex-direction: column; }
.ob-row { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; padding: 2px 10px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-family: 'JetBrains Mono', monospace; line-height: 1.5; }
.ob-row .ob-bar { position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.10; pointer-events: none; }
.ob-row.ask .ob-p { color: var(--down, #f6465d); }
.ob-row.ask .ob-bar { background: var(--down, #f6465d); }
.ob-row.bid .ob-p { color: var(--up, #2ebd85); }
.ob-row.bid .ob-bar { background: var(--up, #2ebd85); }
.ob-row.ob-big .ob-u { color: var(--accent, #f0b90b); font-weight: 700; }
.ob-q, .ob-u { text-align: right; color: var(--text-main, #f4f5f7); }
.ob-mid { padding: 4px 10px; text-align: center; font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text-main, #f4f5f7); border-top: 1px dashed rgba(255,255,255,0.08); border-bottom: 1px dashed rgba(255,255,255,0.08); }
.ob-none { padding: 10px; text-align: center; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.ob-time { padding: 6px 10px; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); text-align: right; }
/* ---- 右栏折叠 ---- */
.rp-toggle {
/* 950:压过多窗容器 #multiWrap(900),低于弹窗 10050 —— 详见 .sp-toggle 上方那段 */
position: absolute; right: 300px; top: 50%; transform: translateY(-50%); z-index: 950;
width: 18px; height: 52px; border-radius: 8px 0 0 8px; cursor: pointer; font-size: calc(10px * var(--sv-font-scale, 1));
color: var(--text-muted, #8a8f9c); background: var(--bg-panel, #141a24);
border: 1px solid var(--line-strong, rgba(255,255,255,0.1)); border-right: none;
transition: right .18s ease;
}
.rp-toggle:hover { color: var(--accent, #f0b90b); }
body.rp-collapsed .rp-toggle { right: 0; }
body.rp-collapsed .chart-workspace { grid-template-columns: 50px 1fr 0; }
body.rp-collapsed .right-panel { display: none; }
/* 信号面板行 */
.rp-sig { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: calc(12px * var(--sv-font-scale, 1)); border-bottom: 1px dashed rgba(255,255,255,0.05); }
.rp-sig:last-child { border-bottom: none; }
.rps-tag { font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.rps-tag.up { color: var(--up, #2ebd85); background: rgba(46,189,133,0.12); }
.rps-tag.down { color: var(--down, #f6465d); background: rgba(246,70,93,0.12); }
.rps-name { font-weight: 600; color: var(--text-main, #f4f5f7); }
.rps-meta { color: var(--text-muted, #8a8f9c); font-size: calc(11px * var(--sv-font-scale, 1)); }
.rps-px { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
/* ===== v2.5 订单流与消息决策(自旧版迁移) ===== */
.sv-of-layer { position: absolute; inset: 0; pointer-events: none; z-index: 12; overflow: hidden; }
.sv-of-layer[hidden] { display: none; }
/* 消息泡:偏空压顶红、偏多托底绿(旧版视觉) */
.sv-msg-pin { position: absolute; pointer-events: auto; cursor: pointer; min-width: 96px; max-width: 190px; border-radius: 12px; padding: 7px 9px; border: 1px solid transparent; box-shadow: 0 12px 30px rgba(0,0,0,.32); backdrop-filter: blur(8px); text-align: left; z-index: 3; }
.sv-msg-pin strong { display: flex; justify-content: space-between; gap: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); margin-bottom: 3px; font-weight: 900; }
.sv-msg-pin strong em { font-style: normal; opacity: .88; font-weight: 700; }
.sv-msg-pin span { display: block; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.88); }
/* 主力大单气泡的价位行(糖哥 2026-08-19「气泡内容要做出来」):
把承诺过的「主图看具体价位」真的写在气泡上。等宽数字免得两个气泡的价位对不齐;
压一档字号与透明度,让「方向 + 金额」仍是第一眼读到的东西。 */
.sv-msg-pin .sv-msg-px { margin-top: 2px; font-size: calc(10.5px * var(--sv-font-scale, 1)); opacity: .9; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.sv-msg-pin.bearish { background: linear-gradient(180deg, rgba(127,29,29,.94), rgba(69,10,10,.9)); border-color: rgba(239,68,68,.52); color: #fee2e2; }
.sv-msg-pin.bullish { background: linear-gradient(180deg, rgba(20,83,45,.94), rgba(5,46,22,.9)); border-color: rgba(34,197,94,.52); color: #dcfce7; }
.sv-msg-pin.neutral { background: linear-gradient(180deg, rgba(30,64,175,.9), rgba(30,41,59,.9)); border-color: rgba(59,130,246,.48); color: #dbeafe; }
.sv-msg-pin.s-level { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 24px rgba(255,255,255,.12), 0 14px 34px rgba(0,0,0,.35); }
.sv-msg-pin.b-level { opacity: .8; }
.sv-msg-line { position: absolute; height: 1px; transform-origin: 0 0; pointer-events: none; opacity: .55; z-index: 2; }
.sv-msg-line.bearish { background: linear-gradient(90deg, rgba(246,70,93,.9), rgba(246,70,93,.15)); }
.sv-msg-line.bullish { background: linear-gradient(90deg, rgba(46,189,133,.9), rgba(46,189,133,.15)); }
.sv-msg-line.neutral { background: linear-gradient(90deg, rgba(110,168,254,.8), rgba(110,168,254,.15)); }
.sv-msg-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; box-shadow: 0 0 8px rgba(0,0,0,.3); }
.sv-msg-dot.bearish { background: #f6465d; }
.sv-msg-dot.bullish { background: #2ebd85; }
.sv-msg-dot.neutral { background: #6EA8FE; }
.sv-msg-popover { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(420px, 86%); border: 1px solid rgba(148,163,184,.35); border-radius: 16px; background: rgba(17,24,39,.96); color: #f8fafc; padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.sv-msg-popover[hidden] { display: none; }
.sv-msg-popover .sv-msg-pop-close { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #94a3b8; font-size: calc(22px * var(--sv-font-scale, 1)); cursor: pointer; }
.sv-msg-popover strong { display: block; padding-right: 26px; font-size: calc(15px * var(--sv-font-scale, 1)); line-height: 1.35; margin-bottom: 8px; }
/* 浮层正文:整句原文照原样断行(body 里逐条以 \n 分隔),条数多时自己滚,不把弹层撑到出屏。
糖哥转来的反馈「像这样的消息显示不完全」——正文此前既被截到 16 字,又没有换行与滚动。 */
.sv-msg-popover p { color: #cbd5e1; line-height: 1.65; font-size: calc(13px * var(--sv-font-scale, 1)); margin: 0; white-space: pre-line; overflow-wrap: anywhere; max-height: min(46vh, 320px); overflow-y: auto; }
.sv-msg-popover p[hidden] { display: none; }
/* 主力大单的详情摆成键值行(标签一列、事实一列),沿用站内 sg-perp-card-facts 的形态 */
.sv-msg-pop-rows { display: grid; gap: 6px; margin: 0; }
.sv-msg-pop-rows[hidden] { display: none; }
.sv-msg-pop-rows > div { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: baseline; }
.sv-msg-pop-rows dt { color: #94a3b8; font-size: calc(12px * var(--sv-font-scale, 1)); white-space: nowrap; }
.sv-msg-pop-rows dd { margin: 0; color: #e2e8f0; font-size: calc(13px * var(--sv-font-scale, 1)); line-height: 1.5; font-variant-numeric: tabular-nums; }
.sv-msg-pop-rows > div:last-child dd { color: #94a3b8; font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.55; }
/* 订单墙热力条:买墙绿/卖墙红,信息列右锚定价格轴,热力条向左伸缩 */
/* 订单墙热力条(v2.7.2):强度渐变、无描边无实底,颜色取主题涨跌色 var(--up/--down),
标签垫底用主题底色半透明渐变——三主题(夜间/白天/蓝黑)均自然融合,不再是旧版实心色块 */
.sv-wall-band { position: absolute; pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; width: 124px; border: 0; background: transparent; padding: 0; z-index: 2; }
.sv-wall-band i { position: absolute; right: 0; top: 1px; bottom: 1px; width: var(--heat-w, 24px); border-radius: 999px 0 0 999px; pointer-events: none; }
.sv-wall-band.bullish i {
background: linear-gradient(90deg, rgba(46,189,133,0), rgba(46,189,133,.35) 62%, rgba(46,189,133,.6)); /* 兼容不支持 color-mix 的旧浏览器 */
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--up, #2ebd85) var(--heat-pct, 35%), transparent) 62%, color-mix(in srgb, var(--up, #2ebd85) calc(var(--heat-pct, 35%) + 22%), transparent));
box-shadow: -8px 0 18px color-mix(in srgb, var(--up, #2ebd85) var(--glow-pct, 10%), transparent);
}
.sv-wall-band.bearish i {
background: linear-gradient(90deg, rgba(246,70,93,0), rgba(246,70,93,.35) 62%, rgba(246,70,93,.6));
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--down, #f6465d) var(--heat-pct, 35%), transparent) 62%, color-mix(in srgb, var(--down, #f6465d) calc(var(--heat-pct, 35%) + 22%), transparent));
box-shadow: -8px 0 18px color-mix(in srgb, var(--down, #f6465d) var(--glow-pct, 10%), transparent);
}
.sv-wall-band span {
position: relative; font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 900; padding: 0 6px; white-space: nowrap; border-radius: 999px; line-height: 13px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-core, #000) 72%, transparent));
text-shadow: 0 1px 3px color-mix(in srgb, var(--bg-core, #000) 85%, transparent);
}
.sv-wall-band.bullish span { color: var(--up, #2ebd85); }
.sv-wall-band.bearish span { color: var(--down, #f6465d); }
.sv-wall-band.tier-s i { filter: saturate(1.3) brightness(1.1); }
.sv-wall-band.tier-c { opacity: .68; }
/* 停靠态标签(糖哥 2026-07-21 四修定版):文字靠右显示在柱子里,只留"买墙/卖墙+金额"
基础信息(JS 侧极简化);三段式布局已弃用(更凌乱),价格区间/笔数看悬停备注 */
/* 控盘线悬停详情(v2.8-E3) */
.sv-ctrl-tip { position: absolute; z-index: 6; pointer-events: none; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-main, #e2e8f0); background: color-mix(in srgb, var(--bg-elevated, #16181f) 94%, transparent); border: 1px solid var(--line-soft, rgba(148,163,184,.2)); border-radius: 7px; padding: 4px 8px; white-space: nowrap; }
/* 大额标签条(v2.7.8 高周期锚定模式):文字外挂在锚定色带旁,无自带热力条 */
.sv-wall-band .wb-ct { font-style: normal; } /* 笔数用 em 只为窄屏可藏,不改字形 */
.sv-wall-band.flag { z-index: 3; }
.sv-wall-band.flag span { padding-right: 6px; }
/* 移动端:订单墙浮层收窄贴右缘,减少对本就窄的 K 线主体的遮挡 */
@media (max-width: 640px) {
.sv-wall-band { width: 72px; } /* 88→72:窄屏藏掉笔数后标签更短,给 K 线让位(审查 C3) */
.sv-wall-band span { font-size: calc(9.5px * var(--sv-font-scale, 1)); padding: 0 5px; }
.sv-wall-band .wb-ct { display: none; } /* 笔数细节悬停备注仍有 */
/* 窄屏图例只留指标名,数值随十字激活出现(body.sv-cross-on 由 onCrosshairChange 维护):
静态界面一行短名不截断,长按划十字时数值联动显示(AICoin 式移动端习惯) */
body:not(.sv-cross-on) .sv-pane-legend .spl-v { display: none; }
}
/* 订单墙悬停备注(悬停 1 秒即显,替代原生 title):主题变量取色,三主题自然融合 */
.sv-wall-tip { position: absolute; z-index: 15; max-width: 300px; padding: 6px 10px; border-radius: 8px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.55; pointer-events: none; white-space: normal; word-break: break-all; background: var(--bg-elevated, rgba(15,23,42,.95)); border: 1px solid var(--line-strong, rgba(148,163,184,.3)); color: var(--text-main, #e2e8f0); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
@media (max-width: 640px) { .sv-wall-tip { font-size: calc(10px * var(--sv-font-scale, 1)); max-width: 70vw; } }
.sv-wall-tip[hidden] { display: none; }
/* 订单墙评分卡(右上,旧版布局) */
.sv-wall-badge { position: absolute; z-index: 14; min-width: 168px; max-width: 240px; border-radius: 12px; padding: 8px 10px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.5; border: 1px solid var(--line-strong, rgba(148,163,184,.3)); background: color-mix(in srgb, var(--bg-elevated, #16181f) 90%, transparent); color: var(--text-main, #e2e8f0); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0,0,0,.16); overflow: hidden; }
.sv-wall-badge.mini { min-width: 0; max-width: none; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.sv-wall-badge.mini strong { margin: 0; font-size: calc(11px * var(--sv-font-scale, 1)); white-space: nowrap; }
.sv-wall-badge .sv-badge-min { border: 0; background: transparent; color: var(--text-muted, #8a8f9c); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 900; cursor: pointer; padding: 2px 6px; line-height: 1; border-radius: 6px; }
.sv-wall-badge .sv-badge-min:hover { color: var(--text-main, #f4f5f7); background: var(--bg-sunken, rgba(255,255,255,.08)); }
.sv-wall-badge[hidden] { display: none; }
.sv-wall-badge strong { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--sv-font-scale, 1)); margin-bottom: 2px; }
.sv-wall-badge.bullish strong { color: var(--up, #2ebd85); }
.sv-wall-badge.bearish strong { color: var(--down, #f6465d); }
.sv-wall-badge span, .sv-wall-badge em { display: block; font-style: normal; color: var(--text-secondary, rgba(226,232,240,.82)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-wall-badge em.chg { color: var(--text-muted, rgba(226,232,240,.6)); }
/* 数据口径行(2026-08-25):[口径按钮] 参与的所 · 最旧快照年龄。
⚠️必须写在下面那条 @media 之前 —— 媒体查询不加特异性,写在主定义前会被静默盖掉。 */
.sv-wall-badge em.src { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, rgba(226,232,240,.55)); }
.sv-wall-badge em.src > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-wall-badge .sv-venue { flex: 0 0 auto; border: 1px solid var(--line-strong, rgba(148,163,184,.4)); border-radius: 999px; background: transparent; color: inherit; font-size: calc(9px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: .02em; padding: 0 6px; line-height: 1.6; cursor: pointer; }
.sv-wall-badge .sv-venue:hover { color: var(--text-main, #f4f5f7); border-color: var(--text-muted, rgba(148,163,184,.7)); }
.sv-wall-badge strong .sv-venue { margin-left: auto; }
.sv-wall-badge .sv-sens { margin-left: auto; border: 1px solid var(--line-strong, rgba(148,163,184,.4)); border-radius: 999px; background: transparent; color: inherit; font-size: calc(10px * var(--sv-font-scale, 1)); padding: 1px 8px; cursor: pointer; }
@media (max-width: 640px) {
.sv-wall-badge { min-width: 0; max-width: 46vw; font-size: calc(10px * var(--sv-font-scale, 1)); padding: 6px 8px; }
.sv-wall-badge strong { font-size: calc(11px * var(--sv-font-scale, 1)); }
.sv-msg-pin { min-width: 88px; max-width: 150px; }
}
/* 底栏三段式分组标签 */
.tg-seg { flex: 0 0 auto; align-self: center; font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 900; letter-spacing: .04em; color: var(--tx3, #8a8f9c); padding: 2px 8px 2px 10px; border-left: 2px solid rgba(240,185,11,.55); margin-left: 6px; white-space: nowrap; }
.tg-seg:first-child { margin-left: 0; }
/* 库名真按钮(糖哥 2026-07-21,参考老网站):点开统属全部指标浮层 */
.tg-seg-btn { flex: 0 0 auto; font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 800; letter-spacing: .02em; padding: 3px 10px; margin-left: 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; color: var(--warn, #f0b90b); background: transparent; border: 1px solid color-mix(in srgb, var(--warn, #f0b90b) 55%, transparent); transition: background .12s, color .12s; }
.tg-seg-btn:hover { background: color-mix(in srgb, var(--warn, #f0b90b) 14%, transparent); }
.tg-seg-btn:first-of-type { margin-left: 2px; }
/* 库浮层:贴指标栏上方,统属全部指标+⚙设置位 */
.tg-group-pop { position: fixed; z-index: 30; max-width: min(720px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 10px; background: var(--bg-elevated, rgba(15,23,42,.97)); border: 1px solid var(--line-strong, rgba(148,163,184,.3)); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.tgp-title { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--warn, #f0b90b); margin-bottom: 8px; letter-spacing: .04em; }
.tgp-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 40vh; overflow-y: auto; }
.tgp-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: 999px; font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-secondary); border: 1px solid var(--line-strong, rgba(255,255,255,0.12)); user-select: none; }
.tgp-item:hover { border-color: var(--warn, #f0b90b); }
.tgp-item.on { color: var(--text-main); border-color: var(--up, #2ebd85); background: var(--up-soft, rgba(46,189,133,0.12)); }
.tgp-item.disabled { opacity: .5; cursor: default; }
.tgp-gear { border: 0; background: transparent; cursor: pointer; color: inherit; opacity: .55; font-size: calc(12px * var(--sv-font-scale, 1)); padding: 0 2px; }
.tgp-gear:hover { opacity: 1; }
.tg-chip.tg-docs-chip { border-style: dashed; opacity: .85; }
/* 钉选回执气泡(糖哥 2026-08-10:提示要贴在钉选项右上方,别飘去页面角落) */
.sv-pin-tip {
position: fixed; z-index: 9995; pointer-events: none;
padding: 5px 10px; border-radius: 8px; white-space: nowrap;
font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--text-main, #eaecef);
background: var(--bg-elevated, #16181f);
border: 1px solid var(--line-strong, rgba(255,255,255,.15));
border-left: 3px solid var(--text-muted, #8a8f9c);
box-shadow: 0 8px 22px rgba(0,0,0,.42);
opacity: 0; transform: translateY(4px);
transition: opacity .16s ease, transform .16s ease;
}
.sv-pin-tip.on { border-left-color: var(--warn, #f0b90b); }
.sv-pin-tip.show { opacity: 1; transform: none; }
/* 指标说明中心 */
.svdoc-mask { position: fixed; inset: 0; z-index: 200; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */ display: flex; align-items: center; justify-content: center; padding: 4vh 12px; }
.svdoc-panel { width: min(880px, 96vw); max-height: 88vh; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--bd1, #2a3142); background: var(--bg1, #10141f); color: var(--tx1, #eaecef); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.svdoc-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--bd1, #2a3142); }
.svdoc-head strong { font-size: calc(16px * var(--sv-font-scale, 1)); }
.svdoc-head span { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--tx3, #8a8f9c); }
.svdoc-head .svdoc-close { margin-left: auto; border: 0; background: transparent; color: var(--tx3, #8a8f9c); font-size: calc(22px * var(--sv-font-scale, 1)); cursor: pointer; }
.svdoc-body { overflow-y: auto; padding: 14px 18px 18px; }
.svdoc-body h2 { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--tx3, #8a8f9c); margin: 14px 0 8px; letter-spacing: .06em; }
.svdoc-body h2:first-child { margin-top: 0; }
.svdoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.svdoc-card { border: 1px solid var(--bd1, #2a3142); border-radius: 12px; padding: 12px; background: var(--bg2, #161b27); }
.svdoc-card.focus { border-color: rgba(240,185,11,.7); box-shadow: 0 0 0 1px rgba(240,185,11,.35); }
.svdoc-card h3 { font-size: calc(14px * var(--sv-font-scale, 1)); margin: 4px 0 8px; }
.svdoc-tag { font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 900; color: #f0b90b; border: 1px solid rgba(240,185,11,.4); border-radius: 999px; padding: 1px 8px; }
.svdoc-card dl { margin: 0; font-size: calc(12px * var(--sv-font-scale, 1)); }
.svdoc-card dt { color: var(--tx3, #8a8f9c); font-size: calc(10px * var(--sv-font-scale, 1)); margin-top: 6px; }
.svdoc-card dd { margin: 1px 0 0; line-height: 1.55; color: var(--tx2, #c8cdd8); }
.svdoc-note { margin: 14px 0 0; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--tx3, #8a8f9c); border-top: 1px dashed var(--bd1, #2a3142); padding-top: 10px; }
/* 图例编辑器里的指标简介 */
.lge-doc { max-width: 240px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--tx3, #8a8f9c); margin: 4px 0 8px; }
.lge-doc strong { color: var(--tx2, #c8cdd8); margin-right: 6px; }
.lge-doc-more { color: #f0b90b; text-decoration: none; white-space: nowrap; }
/* 移动端横屏看图(v2.7.4):rotBtn 仅小屏显示;不支持原生方向锁定的设备用整页 CSS 旋转 */
.sv-rot-btn { display: none; }
@media (max-width: 900px) { .sv-rot-btn { display: inline-flex; } }
body.sv-rotate { overflow: hidden; }
body.sv-rotate #app {
position: fixed; top: 0; left: 0;
width: 100vh; height: 100vw;
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
overflow: hidden;
}
/* 大屏专注模式(双击主图进出,糖哥 2026-08-30):副图已被压到 1px,它们的图例行必须一并收起
—— 否则几行小字会全叠在盘面底边上。主图那行(data-sp-main="1")照常显示,读数还要看。
⚠️ 用 display:none 而不是给行加 hidden 属性:UA 的 [hidden] 规则特异性最低,
.sv-pane-legend 那条 display:inline-flex 会直接压过去,属性加了也藏不住。 */
body.sv-chart-focus .sv-pane-legend[data-sp-main="0"] { display: none; }
/* 图表右键菜单(v2.7.4):主题变量取色,PC 右键 / 移动长按共用 */
.sv-ctx-menu { position: fixed; z-index: 300; min-width: 208px; max-width: 264px; padding: 5px; border-radius: 12px; border: 1px solid var(--line-strong, rgba(148,163,184,.3)); background: color-mix(in srgb, var(--bg-elevated, #16181f) 96%, transparent); color: var(--text-main, #e2e8f0); box-shadow: 0 14px 40px rgba(0,0,0,.28); backdrop-filter: blur(12px); font-size: calc(12px * var(--sv-font-scale, 1)); }
.sv-ctx-head { padding: 6px 10px 7px; border-bottom: 1px solid var(--line-soft, rgba(148,163,184,.15)); margin-bottom: 4px; }
.sv-ctx-head div { color: var(--text-secondary, #b0b4bd); font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-ctx-head div:first-child { color: var(--text-main, #e2e8f0); font-weight: 800; font-size: calc(12px * var(--sv-font-scale, 1)); }
.sv-ctx-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text-main, #e2e8f0); font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1; padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sv-ctx-item:hover { background: var(--accent-soft, rgba(255,255,255,.07)); }
.sv-ctx-item.disabled { color: var(--text-disabled, #40434b); cursor: default; }
.sv-ctx-item.disabled:hover { background: transparent; }
.sv-ctx-item em { margin-left: auto; font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #71757f); }
.sv-ctx-sep { height: 1px; margin: 4px 8px; background: var(--line-soft, rgba(148,163,184,.12)); }
@media (max-width: 640px) { .sv-ctx-menu { min-width: 188px; font-size: calc(13px * var(--sv-font-scale, 1)); } .sv-ctx-item { padding: 10px 10px; } }
/* 副图面板内控件条(v2.7.6,AICoin 式:隐藏/编辑/移除跟着自己的副图) */
#svSubCtrls { position: absolute; inset: 0; pointer-events: none; z-index: 12; }
/* 最新价标签 + 收线倒计时(TV 式):两行合成一整块,贴在价格轴上。
主图的最新价标签由站内接管(引擎那枚 text 已关,见 svOwnsLastPriceLabel),嵌入小窗仍交给引擎。
两行同底色、同左内边距 → 开头数字天然对齐(糖哥 2026-08-23:不然看着凌乱)。
宽度由内容撑、整块靠右贴轴 —— 价格位数多时向左生长,与引擎原来的右对齐标签落点一致。
pointer-events:none 是硬要求 —— 价格轴要能拖着缩放,这块绝不能挡手。 */
#svBarCountdown { position: absolute; z-index: 12; pointer-events: none; box-sizing: border-box;
width: max-content; right: auto; border-radius: 2px; overflow: hidden; background: var(--up, #2ebd85); }
#svBarCountdown.sv-cd-down { background: var(--down, #f6465d); }
#svBarCountdown .svcd-price,
#svBarCountdown .svcd-time { display: block; padding: 0 4px; color: #fff; white-space: nowrap; font-style: normal; }
#svBarCountdown .svcd-price { font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 20px; font-weight: 500; }
#svBarCountdown .svcd-time { font-family: var(--font-mono, ui-monospace, monospace);
font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 15px; font-weight: 600; padding-bottom: 2px; opacity: .95; }
#svBarCountdown[hidden] { display: none; }
.sv-sp-ctrl { position: absolute; display: inline-flex; gap: 2px; align-items: center; pointer-events: auto; padding: 1px 4px; border-radius: 7px; background: color-mix(in srgb, var(--bg-elevated, #16181f) 62%, transparent); opacity: .5; transition: opacity .15s ease; }
.sv-sp-ctrl:hover { opacity: 1; }
.sv-sp-ctrl.off { opacity: .8; }
.sv-sp-ctrl .lgi-btn { pointer-events: auto; }
.sv-sp-dock { position: absolute; right: 76px; bottom: 8px; display: inline-flex; gap: 6px; pointer-events: auto; }
.sv-sp-hidden { border: 1px dashed var(--line-strong, rgba(148,163,184,.35)); background: color-mix(in srgb, var(--bg-elevated, #16181f) 70%, transparent); color: var(--text-muted, #8a8f9c); font-size: calc(10px * var(--sv-font-scale, 1)); padding: 2px 9px; border-radius: 999px; cursor: pointer; }
.sv-sp-hidden:hover { color: var(--text-main, #f4f5f7); }
/* 副图 DOM 图例行(v2.7.6,AICoin 式:名称后紧跟控件图标,数值按线色着色、随十字线联动) */
.sv-pane-legend { position: absolute; display: inline-flex; align-items: center; gap: 5px; pointer-events: auto; z-index: 11; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 18px; padding: 0 4px; border-radius: 6px; white-space: nowrap; max-width: calc(100% - 90px); overflow: hidden; }
.sv-pane-legend .spl-name { font-weight: 800; color: var(--text-secondary, #b0b4bd); }
.sv-pane-legend .lgi-btn { opacity: .65; }
.sv-pane-legend:hover .lgi-btn { opacity: 1; }
.sv-pane-legend .spl-v { font-style: normal; font-family: var(--font-mono, monospace); font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); margin-left: 3px; }
/* 悬停才显图标(v2.7.6,AICoin 式):主图图例项收展式;副图图例浮层覆盖式(数值不位移) */
.lgi .lgi-btn { width: 0; opacity: 0; overflow: hidden; transition: width .12s ease, opacity .12s ease; }
.lgi:hover .lgi-btn, .lgi.off .lgi-btn { width: 18px; opacity: 1; }
.sv-pane-legend .spl-head { position: relative; display: inline-flex; align-items: center; }
.sv-pane-legend .spl-icons { display: none; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; padding: 1px 4px; gap: 2px; align-items: center; border-radius: 6px; border: 1px solid var(--line-soft, rgba(148,163,184,.18)); background: var(--bg-elevated, #16181f); z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.sv-pane-legend:hover .spl-icons { display: inline-flex; }
/* 图标浮层挂在 spl-head 右外侧,父级 overflow:hidden 会把它整片裁掉(窄屏必现,审查确认 high):
hover 时放开裁剪让「⚙ 设置 / ✕ 关闭」可点;静置仍裁剪,长图例不溢出窗格 */
.sv-pane-legend:hover { overflow: visible; }
/* 触屏无 hover:图标常显且可点,否则移动端永远调不了指标 */
@media (hover: none) {
.sv-pane-legend { overflow: visible; }
.sv-pane-legend .spl-icons { display: inline-flex; opacity: .75; }
}
.sv-pane-legend .lgi-btn { opacity: 1; width: 18px; }
/* ===== 指标设置窗(糖哥 2026-07-24):三个 ⚙ 入口共用。
z-index 必须高于指标库弹窗 .il-mask(3000),否则从库里点 ⚙ 会被压在下面 ===== */
.igs-mask {
position: fixed; inset: 0; z-index: 3200;
display: flex; align-items: center; justify-content: center; padding: 4vh 12px;
background: transparent; /* 设置时背景完全透明,边调边看背后 K 线实时联动(糖哥 2026-08-07) */
/* 糖哥 2026-08-10:改回拦截。开着设置卡时不需要操作背后 K 线,点框外即关卡片(与全站弹窗一致) */
}
.igs-modal {
width: min(460px, calc(100vw - 24px)); max-height: min(760px, calc(100vh - 8vh));
display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
background: var(--bg-elevated, #14181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.09));
box-shadow: 0 24px 64px rgba(0,0,0,.42);
}
.igs-head {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
padding: 14px 16px; font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--text-main, #f4f5f7);
border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.05));
}
.igs-reset { margin-left: auto; border: 0; background: transparent; color: var(--warn, #f0b90b); font-size: calc(11.5px * var(--sv-font-scale, 1)); cursor: pointer; padding: 0; }
.igs-close { background: none; border: none; cursor: pointer; color: var(--text-muted, #8a8f9c); font-size: calc(20px * var(--sv-font-scale, 1)); line-height: 1; padding: 0 2px; }
.igs-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 14px; }
.igs-sec {
display: flex; align-items: center; gap: 8px;
font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 900; letter-spacing: .06em; color: var(--text-muted, #71757f);
margin: 14px 0 6px; padding-left: 6px; border-left: 2px solid var(--warn, #f0b90b);
}
.igs-more { margin-left: auto; color: var(--warn, #f0b90b); text-decoration: none; font-weight: 700; letter-spacing: 0; }
.igs-copy { margin-left: auto; border: 1px solid var(--line-soft, rgba(148,163,184,.22)); background: transparent; color: var(--text-secondary, #b0b4bd); border-radius: 6px; font-size: calc(10px * var(--sv-font-scale, 1)); padding: 2px 8px; cursor: pointer; letter-spacing: 0; }
.igs-copy:hover { color: var(--text-main, #f4f5f7); border-color: var(--warn, #f0b90b); }
.igs-doc { font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-secondary, #b0b4bd); }
.igs-doc-row { display: flex; gap: 8px; padding: 3px 0; }
.igs-doc-row b { flex: 0 0 62px; color: var(--text-muted, #8a8f9c); font-weight: 600; }
/* 指标图例条(糖哥 2026-08-10:红绿柱/黄实线黄虚线光靠文字对不上图,给真实颜色的样例)。
⚠️色值必须走 CSS 类,不能在 innerHTML 里写内联 style —— 生产 CSP 无 unsafe-inline,内联样式会被整片废掉。
颜色变量与绘制代码同源(--rise-green/--fall-red/--warn),主题切换与涨跌色设置自动一致。 */
.tglg { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 1px; }
.tglg-i { display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
.tglg-sw { flex: 0 0 20px; height: 16px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
/* 名称列定宽且不折行:长短不一的名称("绿柱" vs "虚线轮廓 + 暗色")若各自换行,右侧含义列会参差不齐 */
.tglg-n { flex: 0 0 92px; font-weight: 600; color: var(--text-main, #f4f5f7); white-space: nowrap; }
.tglg-d { flex: 1 1 auto; color: var(--text-secondary, #b0b4bd); }
@media (max-width: 640px) { .tglg-n { flex-basis: auto; } .tglg-i { flex-wrap: wrap; } }
/* 样例形状:柱/空心柱/实线/虚线/圆点/三角/气泡/文字标注 */
.tglg-sw.sw-bar::before { content: ''; width: 18px; height: 9px; border-radius: 1px; background: currentColor; opacity: .85; }
.tglg-sw.sw-hollow::before { content: ''; width: 18px; height: 9px; border-radius: 1px; border: 1.5px solid currentColor; }
.tglg-sw.sw-line::before { content: ''; width: 20px; height: 0; border-top: 2px solid currentColor; }
.tglg-sw.sw-dash::before { content: ''; width: 20px; height: 0; border-top: 2px dashed currentColor; }
.tglg-sw.sw-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tglg-sw.sw-tri-up::before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; }
.tglg-sw.sw-tri-down::before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid currentColor; }
.tglg-sw.sw-bubble::before { content: ''; width: 18px; height: 10px; border-radius: 4px; background: currentColor; opacity: .55; border: 1px solid currentColor; }
.tglg-sw.sw-text::before { content: '9'; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 800; color: currentColor; font-family: "JetBrains Mono", monospace; }
.tglg-sw.sw-flag::before { content: '多'; font-size: calc(9px * var(--sv-font-scale, 1)); font-weight: 800; color: currentColor; }
.tglg-sw.sw-flag.c-red::before { content: '空'; }
/* 颜色:与图上取同一批变量/同一批色值(改图上配色时这里要同步改) */
.tglg-sw.c-green { color: var(--rise-green, #2ebd85); }
.tglg-sw.c-red { color: var(--fall-red, #f6465d); }
.tglg-sw.c-amber { color: var(--warn, #f0b90b); }
.tglg-sw.c-white { color: var(--text-main, #f4f5f7); }
.tglg-sw.c-blue { color: #6EA8FE; }
/* 跟随用户涨跌配色的图例色(2026-08-10 持仓量指标用):红涨绿跌/绿涨红跌切换时图例也跟着翻,
避免说明卡里写「涨色柱」而图例却固定成绿色 —— 那在红涨配色下就是错的 */
.tglg-sw.c-up { color: var(--up, #2ebd85); }
.tglg-sw.c-down { color: var(--down, #f6465d); }
.tglg-sw.c-pink { color: #E064C7; }
.tglg-sw.c-orange { color: #f59e0b; }
.tglg-sw.c-sky { color: #38bdf8; }
.tglg-sw.c-gray { color: #8a8f9c; }
.igs-line { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.igs-line .igs-lb { min-width: 54px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); }
.igs-line .igs-plb { min-width: 104px; flex: 1 1 auto; }
.igs-ck { display: flex; align-items: center; }
.igs-ck input { accent-color: var(--warn, #f0b90b); }
.igs-period, .igs-pv { width: 66px; background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.18)); color: var(--text-main, #f4f5f7); border-radius: 6px; font-size: calc(11.5px * var(--sv-font-scale, 1)); padding: 4px 7px; }
.igs-ls { background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.18)); color: var(--text-secondary, #b0b4bd); border-radius: 6px; font-size: calc(10.5px * var(--sv-font-scale, 1)); padding: 4px 2px; width: 68px; }
.igs-color { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line-soft, rgba(148,163,184,.18)); border-radius: 6px; background: transparent; cursor: pointer; }
/* 线粗控件:直接画出粗细,取代 1px/2px 术语(糖哥 2026-07-24) */
.igs-size-wrap { position: relative; width: 60px; flex: 0 0 auto; }
.igs-size-btn { display: flex; align-items: center; gap: 5px; width: 100%; height: 26px; padding: 0 7px; cursor: pointer;
background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.18)); border-radius: 6px; color: var(--text-secondary, #b0b4bd); }
.igs-size-btn:hover { border-color: var(--line-strong, rgba(255,255,255,.15)); }
.igs-size-car { flex: 0 0 auto; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .65; }
.igs-size-prev { flex: 1 1 auto; height: 0; border-top: var(--sw, 1px) solid currentColor; }
.igs-size-btn .igs-size-prev { color: var(--text-main, #f4f5f7); }
.igs-size-pop { position: fixed; z-index: 100000; display: flex; flex-direction: column; gap: 2px; padding: 4px;
background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.15)); border-radius: 8px;
box-shadow: var(--shadow-lift, 0 20px 60px rgba(0,0,0,.7)); }
.igs-size-opt { display: flex; align-items: center; width: 100%; min-width: 60px; height: 26px; padding: 0 9px; cursor: pointer;
background: none; border: 0; border-radius: 5px; color: var(--text-main, #f4f5f7); }
.igs-size-opt:hover { background: var(--accent-soft, rgba(255,255,255,.07)); }
.igs-size-opt.on { background: var(--accent-soft, rgba(255,255,255,.12)); }
.igs-size-opt .igs-size-prev { color: currentColor; }
.igs-empty { opacity: .58; }
/* 超出当前档位的均线槽位:只读展示(VIP 到期后老配置不丢,但改不动) */
.igs-locked { opacity: .38; pointer-events: none; }
.igs-vip { margin-top: 8px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.igs-vip a { color: var(--warn, #f0b90b); text-decoration: none; }
.igs-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.igs-opt { border: 1px solid var(--line-soft, rgba(148,163,184,.22)); background: transparent; color: var(--text-secondary, #b0b4bd); border-radius: 7px; font-size: calc(11.5px * var(--sv-font-scale, 1)); padding: 4px 10px; cursor: pointer; }
.igs-opt.on { border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b); }
.igs-code {
margin: 0; padding: 10px 12px; max-height: 200px; overflow: auto;
background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.14)); border-radius: 8px;
font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.65;
color: var(--text-secondary, #b0b4bd); white-space: pre; tab-size: 2;
}
.igs-code-tip, .igs-code-none { margin-top: 7px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--text-muted, #8a8f9c); }
.igs-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line-soft, rgba(255,255,255,0.05)); }
.igs-btn { border: 1px solid var(--line-soft, rgba(148,163,184,.22)); background: transparent; color: var(--text-secondary, #b0b4bd); border-radius: 8px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; padding: 6px 18px; cursor: pointer; }
.igs-btn.primary { border-color: var(--warn, #f0b90b); background: var(--warn, #f0b90b); color: #16181f; }
@media (max-width: 560px) {
.igs-modal { width: calc(100vw - 16px); max-height: calc(100vh - 6vh); }
.igs-line { flex-wrap: wrap; }
.igs-line .igs-lb { min-width: 46px; }
.igs-ls { width: 60px; }
}
/* AICoin 式参数设置面板 */
.lgi-editor { min-width: 250px; }
.lge-title { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 800; margin-bottom: 8px; color: var(--text-main, #f4f5f7); }
.lge-reset-link { margin-left: auto; border: 0; background: transparent; color: var(--warn, #f0b90b); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; padding: 0; }
.lge-sec { font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 900; letter-spacing: .06em; color: var(--text-muted, #71757f); margin: 8px 0 5px; padding-left: 6px; border-left: 2px solid var(--warn, #f0b90b); }
.lge-line { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.lge-line .lge-lb { min-width: 52px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); }
.lge-line .lge-plb { min-width: 88px; }
.lge-ck input { accent-color: var(--warn, #f0b90b); }
.lge-period, .lge-pv { width: 62px; background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.18)); color: var(--text-main, #f4f5f7); border-radius: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); padding: 3px 6px; }
.lge-ls { background: var(--bg-tertiary, #101217); border: 1px solid var(--line-soft, rgba(148,163,184,.18)); color: var(--text-secondary, #b0b4bd); border-radius: 6px; font-size: calc(10px * var(--sv-font-scale, 1)); padding: 3px 2px; width: 66px; }
.lge-empty { opacity: .55; }
.sv-pane-legend.off .spl-name { color: var(--text-disabled, #40434b); text-decoration: line-through; }
.sv-pane-legend .spl-restore { opacity: .9; width: 18px; }
.sv-wall-badge { cursor: grab; touch-action: none; user-select: none; }
.sv-wall-badge:active { cursor: grabbing; }
/* 订单墙设置(v2.7.7):指标库 chip 内齿轮 + 体量筛选浮层(评分卡随数据刷新重建,下拉迁出) */
/* ⚙ 与 📌 同为 hover 出现(糖哥 2026-08-06 方案A):静置时 chip 干净,悬停才出操作 */
.tg-gear { margin-left: 4px; font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1)); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .12s; }
.tg-chip:hover .tg-gear { opacity: .72; pointer-events: auto; }
.tg-gear:hover { opacity: 1 !important; color: var(--warn, #f0b90b); }
/* 自定义指标删除入口:hover 出现🗑,hover 变红警示(糖哥 2026-08-07) */
.tg-del { margin-left: 2px; font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .12s; }
.tg-chip:hover .tg-del { opacity: .5; pointer-events: auto; }
.tg-del:hover { opacity: 1 !important; }
/* 触屏无 hover:两个操作图标常显且可点(否则永远够不着),同时给足点击面积不误触 chip 本体 */
@media (hover: none) {
.tg-gear { opacity: .6; pointer-events: auto; padding: 0 2px; }
.tg-pin { opacity: .45; pointer-events: auto; padding: 0 2px; }
.tg-del { opacity: .5; pointer-events: auto; padding: 0 2px; }
}
.sv-wallset-menu { position: fixed; z-index: 300; min-width: 132px; padding: 5px; border-radius: 10px; border: 1px solid var(--line-strong, rgba(148,163,184,.3)); background: color-mix(in srgb, var(--bg-elevated, #16181f) 96%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.28); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 1px; }
.sv-wallset-menu .wsm-title { font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); padding: 3px 9px 5px; }
.sv-wallset-menu .wsm-opt { border: 0; background: transparent; color: var(--text-secondary, #b0b4bd); font-size: calc(12px * var(--sv-font-scale, 1)); text-align: left; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.sv-wallset-menu .wsm-opt:hover { background: var(--accent-soft, rgba(96,165,250,.14)); color: var(--text-main, #e2e8f0); }
.sv-wallset-menu .wsm-opt.on { color: var(--text-main, #e2e8f0); font-weight: 600; }
/* 最新成交(逐笔 tape,糖哥 2026-07-26:盘口下方显示真实成交) */
.ob-trades { margin-top: 8px; border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06)); padding-top: 6px; }
.ob-trades-title { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-secondary, #b0b4bd); padding: 2px 10px 4px; }
.ob-trades-head { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; padding: 2px 10px 4px; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-family: var(--font-mono); }
.ob-trades-head span:nth-child(2), .ob-trades-head span:nth-child(3) { text-align: right; }
.ob-trades-list { max-height: 260px; overflow-y: auto; }
.ob-trade { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; padding: 1px 10px; font-size: calc(11px * var(--sv-font-scale, 1)); font-family: var(--font-mono); line-height: 1.85; }
.ob-trade .ott { color: var(--text-muted, #8a8f9c); }
.ob-trade .otp, .ob-trade .otq { text-align: right; }
.ob-trade.buy .otp { color: var(--up, #2ebd85); }
.ob-trade.sell .otp { color: var(--down, #f6465d); }
.ob-trade .otq { color: var(--text-secondary, #b0b4bd); }
/* 筹码峰 hover 悬浮框(命中每一档柱子:价格区间 + 筹码占比 + 获利/套牢)。
样式全走 class,JS 只设 display/left/top(CSSOM),避开生产 CSP style-src 拦截内联 style="" 的坑。 */
.sv-chip-tip {
position: fixed; z-index: 60; pointer-events: none; display: none;
padding: 6px 9px; border-radius: 6px; white-space: nowrap;
font: 11px/1.5 system-ui, -apple-system, sans-serif;
/* 同 sv-pat-tip:暗底恒定,文字变量局部钉死,免得浅色主题下文字变深看不清(liu 2026-08-23) */
--text-primary: #e6e6e6; --text-secondary: #b0b4bd; --text-muted: #8a8f9c; --text-main: #e6e6e6;
background: rgba(20, 22, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text-primary, #e6e6e6); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.sv-chip-tip .r0 { font-weight: 600; margin-bottom: 2px; }
.sv-chip-tip .r1 { opacity: 0.85; }
.sv-chip-tip .r1 b { color: #fff; font-weight: 700; }
.sv-chip-tip .r2 { margin-top: 1px; }
.sv-chip-tip .tag { font-weight: 600; }
.sv-chip-tip .tag.up { color: var(--rise-green, #2ebd85); }
.sv-chip-tip .tag.down { color: var(--fall-red, #f6465d); }
/* 形态识别 hover 说明卡(糖哥 2026-08-09)。
图上只放得下「锤」「涨吞」这样的简称,光看标签没人知道是什么 —— 这张卡负责讲清楚
是什么、怎么形成的、在什么位置才算数。比筹码卡宽,因为要放整句说明(允许换行)。
同样样式全走 class,JS 只设 display/left/top,避开生产 CSP 拦内联 style 的坑。 */
.sv-pat-tip {
position: fixed; z-index: 60; pointer-events: none; display: none;
max-width: 320px; padding: 8px 10px; border-radius: 8px;
font: 11.5px/1.6 system-ui, -apple-system, sans-serif;
/* 背景恒为暗色 → 文字变量在此局部钉成暗底浅色,不随页面 Day/Night 翻转:
浅色主题下 --text-secondary=#485162(深灰)会落在写死暗底上看不清(liu 2026-08-23 反馈) */
--text-primary: #e6e6e6; --text-secondary: #b0b4bd; --text-muted: #8a8f9c; --text-main: #e6e6e6;
background: rgba(20, 22, 28, 0.96); border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--text-primary, #e6e6e6); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.sv-pat-tip .r0 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.sv-pat-tip .r0 b { font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; color: #fff; }
.sv-pat-tip .tag { font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.sv-pat-tip .tag.bull { color: var(--up, #f6465d); background: rgba(246, 70, 93, 0.14); }
.sv-pat-tip .tag.bear { color: var(--down, #0ecb81); background: rgba(14, 203, 129, 0.14); }
.sv-pat-tip .tag.neutral { color: var(--text-muted, #8a8f9c); background: rgba(138, 143, 156, 0.16); }
.sv-pat-tip .tf {
flex: none; margin-left: auto; padding: 1px 6px; border-radius: 999px;
font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 700; color: #6EA8FE;
background: rgba(110, 168, 254, 0.12); border: 1px solid rgba(110, 168, 254, 0.22);
}
.sv-pat-tip .sc { margin-left: 0; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sv-pat-tip .r1 { opacity: 0.9; }
.sv-pat-tip .r2 { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.82; }
.sv-pat-tip .r3 { margin-top: 4px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sv-pat-tip .r4 { margin-top: 5px; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); opacity: 0.75; }
/* 历史表现行:整张卡里最有分量的一句(本品种本周期的真实统计),给它一条独立底色带 */
.sv-pat-tip .r5 {
margin-top: 5px; padding: 4px 7px; border-radius: 5px;
font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.55;
background: rgba(240, 185, 11, 0.10); color: var(--text-secondary, #b0b4bd);
}
.sv-pat-tip .r5 b { color: var(--brand, #f0b90b); font-weight: 700; }
/* 图形形态:"尚未突破"必须比形态名更醒目 —— 用户最容易把形成中的形态当信号用 */
.sv-pat-tip .r5.warn { background: rgba(240, 185, 11, 0.16); color: var(--warn, #f0b90b); font-weight: 600; }
.sv-pat-tip .r5 i { font-style: normal; opacity: 0.85; } /* 「样本不足」是要用户看清的警示,别压太弱(liu 2026-08-23) */
/* 分层对比行:回答"这个形态什么时候才靠谱",比总胜率有用得多 */
.sv-pat-tip .r6 { margin-top: 3px; font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--text-muted, #8a8f9c); }
.sv-pat-tip .r6 b { color: var(--text-secondary, #b0b4bd); font-weight: 700; }
.sv-pat-tip .r6 i { font-style: normal; margin-left: 4px; opacity: 0.7; }
.sv-pat-tip .r6 u { text-decoration: none; margin-left: 3px; padding: 0 4px; border-radius: 3px; font-size: calc(9.5px * var(--sv-font-scale, 1)); color: var(--brand, #f0b90b); background: rgba(240,185,11,.16); }
/* 失效位与期望值行:整张卡里唯一**可以直接照着下单**的一行,所以单独一条分隔线拉开。
期望值正负必须分开 —— 胜率好看但期望为负的形态一抓一大把,只给胜率等于在误导人。
⚠️ 这里**不能**用涨跌色(--up/--down):期望正负是"划不划算",不是"涨还是跌",
而且涨跌色在东亚/国际配色下会翻转,套上去等于把两个无关的语义搅在一起。
负期望是一句警告,走警示色;正期望用普通强调色。 */
.sv-pat-tip .r7 {
margin-top: 5px; padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, 0.10);
font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-muted, #8a8f9c);
}
.sv-pat-tip .r7 b { color: var(--text-secondary, #b0b4bd); font-weight: 700; }
.sv-pat-tip .r7 i { font-style: normal; margin-left: 3px; opacity: 0.7; }
.sv-pat-tip .r7 b.good { color: var(--brand, #f0b90b); }
/* 「可以点」这件事必须写出来 —— 标记只有 8px,没人会想到它能点。
放在最后一行、用品牌色,与免责声明区分开。 */
/* 筹码/换手行:与失效位行同级的事实信息,用中性色,别抢期望值那行的注意力 */
.sv-pat-tip .r9 { margin-top: 4px; font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-muted, #8a8f9c); }
.sv-pat-tip .r9 b { color: var(--text-secondary, #b0b4bd); font-weight: 700; }
.sv-pat-tip .r9 i { font-style: normal; margin-left: 3px; opacity: .72; }
.sv-pat-tip .r8 { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07);
font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--brand, #f0b90b); opacity: .95; }
.sv-pat-tip .r7 i.tipwarn { display: block; margin: 3px 0 0 0; opacity: 1; color: var(--warn, #f0b90b); font-size: calc(10px * var(--sv-font-scale, 1)); }
.sv-pat-tip .r7 b.bad { color: var(--warn, #f0b90b); background: rgba(240,185,11,.16); padding: 0 4px; border-radius: 3px; }
/* ---- 常规指标库后的 3 个自选槽位(糖哥 2026-08-04) ---- */
/* 空位:虚线框但可点(与 .tg-chip.reserve 的纯占位不同,那个是 pointer-events:none) */
.tg-chip.tg-slot-empty {
border-style: dashed; opacity: .55; cursor: pointer;
color: var(--text-muted, #8a8f9c);
}
.tg-chip.tg-slot-empty:hover {
opacity: 1; border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b);
}
/* 已设置的槽位:右侧小齿轮换指标 */
.tg-chip.tg-slot .tg-slot-gear {
font-style: normal; font-size: calc(10px * var(--sv-font-scale, 1)); margin-left: 4px; opacity: .5; cursor: pointer;
padding: 0 1px; border-radius: 3px;
}
.tg-chip.tg-slot .tg-slot-gear:hover { opacity: 1; color: var(--warn, #f0b90b); }
/* 槽位选择浮层里的「清空此位」 */
.tg-group-pop .tgp-clear {
display: block; width: 100%; margin-top: 8px; padding: 6px 0;
font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; border-radius: 6px;
background: transparent; color: var(--text-muted, #8a8f9c);
border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
}
.tg-group-pop .tgp-clear:hover { color: var(--down, #f6465d); border-color: var(--down, #f6465d); }
/* 美股逐笔成交 tape(右面板「成交」页签;tick 规则着色,涨红跌绿随主题变量) */
.sv-tape { display: flex; flex-direction: column; font-size: calc(12px * var(--sv-font-scale, 1)); font-variant-numeric: tabular-nums; }
.tp-row { display: grid; grid-template-columns: 56px 1fr 52px 64px; gap: 6px; padding: 3px 8px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.04)); }
.tp-t { color: var(--text-dim, #9aa0aa); }
.tp-p.up { color: var(--up, #f6465d); }
.tp-p.down { color: var(--down, #0ecb81); }
.tp-q, .tp-u { text-align: right; color: var(--text-main, #eaecef); }
.tp-row.tp-big { background: rgba(240, 185, 11, .07); }
.tp-row.tp-big .tp-u { color: var(--warn, #f0b90b); font-weight: 600; }
.tp-row.tp-mega { background: rgba(240, 185, 11, .16); }
.tp-row.tp-mega .tp-u { color: var(--warn, #f0b90b); font-weight: 700; }
/* ============ 图表设置中心(js/chart-settings.js,设计稿 docs/product/chart-settings-center-plan.md) ============ */
/* z-index 9980:必须低于 #svToastHost(9999),否则改键冲突等 toast 会被遮罩压住 */
.svc-mask { position: fixed; inset: 0; z-index: 9980; display: none; align-items: center; justify-content: center; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */ }
.svc-mask.open { display: flex; }
.svc-dlg { width: min(880px, 96vw); height: min(640px, 88vh); display: grid; grid-template-columns: 196px 1fr; overflow: hidden; background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 14px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
.svc-hidden { display: none !important; }
/* 左栏导航 */
.svc-nav { background: var(--bg-panel, #101319); border-right: 1px solid var(--line-soft, rgba(255,255,255,.08)); padding: 14px 10px; overflow-y: auto; }
.svc-search { display: block; width: 100%; margin-bottom: 12px; padding: 7px 10px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-soft, rgba(255,255,255,.1)); border-radius: 9px; outline: none; }
.svc-search:focus { border-color: var(--warn, #f0b90b); }
.svc-grp { display: flex; align-items: center; gap: 7px; padding: 14px 8px 6px; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; letter-spacing: .05em; color: var(--text-main, #eaecef); }
.svc-grp::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--warn, #f0b90b); }
.svc-grp + .svc-nav-btn { margin-top: 2px; }
.svc-nav-btn { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 10px; font-size: calc(13px * var(--sv-font-scale, 1)); text-align: left; color: var(--text-secondary, #b0b4bd); background: none; border: 0; border-radius: 8px; cursor: pointer; font-family: inherit; }
.svc-nav-btn:hover { color: var(--text-main, #eaecef); background: var(--accent-soft, rgba(240,185,11,.08)); }
.svc-nav-btn.on { color: var(--text-main, #eaecef); background: var(--accent-soft, rgba(240,185,11,.08)); font-weight: 600; }
.svc-nav-btn.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--warn, #f0b90b); }
.svc-nav-btn.soon { opacity: .55; }
.svc-soon { margin-left: auto; font-size: calc(10px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 5px; padding: 1px 5px; }
/* 右栏 */
.svc-main { display: flex; flex-direction: column; min-width: 0; }
.svc-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.08)); }
.svc-head h2 { margin: 0; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #eaecef); }
.svc-head-btns { display: flex; align-items: center; gap: 12px; }
.svc-reset, .svc-close { background: none; border: 0; color: var(--text-muted, #99a1ac); cursor: pointer; font-size: calc(12.5px * var(--sv-font-scale, 1)); }
.svc-reset:hover, .svc-close:hover { color: var(--text-main, #eaecef); }
.svc-close { font-size: calc(15px * var(--sv-font-scale, 1)); line-height: 1; }
.svc-body { flex: 1; overflow-y: auto; padding: 16px 22px 24px; }
.svc-panel { display: none; }
.svc-panel.on { display: block; }
/* 行 */
.svc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 14px; margin-bottom: 10px; background: var(--bg-panel, #101319); border: 1px solid var(--line-soft, rgba(255,255,255,.06)); border-radius: 11px; }
.svc-lb { font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); }
.svc-lb small { display: block; margin-top: 2px; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.svc-note { margin: 14px 4px 0; font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-secondary, #99a1ac); }
/* 控件 */
.svc-select { padding: 6px 10px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 8px; }
.svc-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 8px; }
.svc-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 500; white-space: nowrap; color: var(--text-secondary, #b0b4bd); background: none; border: 0; border-radius: 6px; cursor: pointer; font-family: inherit; }
.svc-seg button.on { background: var(--warn, #f0b90b); color: #1a1400; font-weight: 600; }
.svc-ccdemo { display: inline-flex; gap: 3px; }
.svc-ccdemo i { width: 7px; height: 15px; border-radius: 2px; }
.svc-ccdemo.east i:nth-child(odd) { background: #f6465d; }
.svc-ccdemo.east i:nth-child(even) { background: #2ebd85; }
.svc-ccdemo.west i:nth-child(odd) { background: #2ebd85; }
.svc-ccdemo.west i:nth-child(even) { background: #f6465d; }
.svc-seg button.on .svc-ccdemo i { outline: 1px solid rgba(0, 0, 0, .35); }
.svc-sw { position: relative; flex: none; width: 38px; height: 22px; border: 0; border-radius: 999px; background: var(--line-strong, rgba(255,255,255,.2)); cursor: pointer; }
.svc-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .15s; }
.svc-sw.on { background: var(--warn, #f0b90b); }
.svc-sw.on::after { left: 18px; }
.svc-rangewrap { display: flex; align-items: center; gap: 10px; }
.svc-range { width: 170px; cursor: pointer; accent-color: var(--warn, #f0b90b); }
.svc-rangeval { min-width: 44px; text-align: right; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); font-variant-numeric: tabular-nums; }
/* 快捷键 */
.svc-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc-keys .svc-row { margin-bottom: 0; }
.svc-kbd { min-width: 72px; padding: 5px 10px; text-align: center; font-size: calc(12px * var(--sv-font-scale, 1)); font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-bottom-width: 2px; border-radius: 7px; cursor: pointer; }
.svc-kbd:hover { border-color: var(--warn, #f0b90b); }
.svc-kbd.listening { color: #1a1400; background: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); }
/* 窄屏:全屏抽屉,左栏收成横滑 chips */
@media (max-width: 768px) {
.svc-dlg { grid-template-columns: 1fr; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; grid-template-rows: auto 1fr; }
.svc-nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.08)); }
.svc-search, .svc-grp { display: none; }
.svc-nav-btn { width: auto; white-space: nowrap; }
.svc-nav-btn.on::before { display: none; }
.svc-keys { grid-template-columns: 1fr; }
.svc-row { min-height: 56px; flex-wrap: wrap; }
.svc-seg { flex-wrap: wrap; }
}
/* ===== 设置中心 · 二期控件 ===== */
.svc-sec { margin: 18px 4px 8px; font-size: calc(11px * var(--sv-font-scale, 1)); letter-spacing: .06em; color: var(--text-secondary, #99a1ac); text-transform: uppercase; }
.svc-btn { padding: 7px 14px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 8px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.svc-btn:hover { border-color: var(--warn, #f0b90b); color: var(--warn, #f0b90b); }
.svc-input { padding: 6px 10px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 8px; min-width: 150px; }
.svc-input:focus { outline: none; border-color: var(--warn, #f0b90b); }
.svc-input-num { min-width: 74px; width: 74px; }
.svc-status { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); max-width: 260px; }
.svc-time { padding: 5px 8px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 8px; }
.svc-timewrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.svc-timesep { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.svc-check { display: inline-flex; align-items: center; gap: 6px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); cursor: pointer; }
.svc-check input { accent-color: var(--warn, #f0b90b); }
.svc-ro { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.svc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.svc-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--bg-panel, #101319); border: 1px solid var(--line-soft, rgba(255,255,255,.06)); border-radius: 9px; }
.svc-list-title { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-list-time { flex: none; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); font-variant-numeric: tabular-nums; }
.svc-list-empty { padding: 10px 4px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 4px 10px; }
.svc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px 4px 11px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-panel, #101319); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 999px; }
.svc-chip b { font-weight: 600; }
.svc-chip-x { border: 0; background: none; color: var(--text-secondary, #99a1ac); font-size: calc(14px * var(--sv-font-scale, 1)); line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 50%; }
.svc-chip-x:hover { color: var(--down, #f6465d); }
.svc-kbd-ro { cursor: default; }
.svc-kbd-ro:hover { border-color: var(--line-strong, rgba(255,255,255,.14)); }
.svc-tbhide { display: none !important; }
/* ===== 设置中心 · Telegram 接入教程弹层(叠在设置对话框之上、toast 之下) ===== */
.svc-guide-btn { margin: 2px 0 10px; }
.svc-guide-mask { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */ }
.svc-guide { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; padding: 18px 22px 20px; background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 13px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.svc-guide-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.svc-guide-head b { font-size: calc(15px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); }
.svc-guide-bot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 13px; margin-bottom: 12px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main, #eaecef); background: var(--bg-panel, #101319); border: 1px solid var(--line-soft, rgba(255,255,255,.08)); border-radius: 10px; }
.svc-bot-chip { padding: 4px 11px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 600; font-family: var(--font-mono, ui-monospace, Menlo, monospace); color: #1a1400; background: var(--warn, #f0b90b); border: 0; border-radius: 7px; cursor: pointer; }
.svc-guide-copy { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.svc-guide-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.svc-guide-steps li { font-size: calc(13px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-secondary, #b0b4bd); }
.svc-guide-steps li::marker { color: var(--warn, #f0b90b); font-weight: 700; }
.svc-guide-steps li b { display: block; color: var(--text-main, #eaecef); font-size: calc(13.5px * var(--sv-font-scale, 1)); margin-bottom: 1px; }
.svc-guide-faq { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.svc-guide-faq li { font-size: calc(12.5px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-secondary, #99a1ac); }
/* 测量按钮进行中:金色点亮+脉冲,一眼可见(糖哥 2026-08-05) */
.measure-btn.active { color: var(--warn, #f0b90b); background: var(--warn-soft, rgba(240,185,11,.12)); box-shadow: inset 0 0 0 1px var(--warn, #f0b90b); animation: svMeasurePulse 1.2s ease-in-out infinite; }
@keyframes svMeasurePulse { 50% { box-shadow: inset 0 0 0 1px var(--warn, #f0b90b), 0 0 0 4px var(--warn-soft, rgba(240,185,11,.12)); } }
@media (prefers-reduced-motion: reduce) { .measure-btn.active { animation: none; } }
/* 美股逐笔:非交易时段沿用最近成交时的顶部标注 */
.tp-stale-note { padding: 6px 0; font-size: calc(11.5px * var(--sv-font-scale, 1)); }
/* ===== 美股成交面板:力道条 + 现价 + 价位成交分布(真逐笔聚合,非挂单深度)===== */
.tp-ratio { display: flex; height: 6px; margin: 10px 0 4px; border-radius: 3px; overflow: hidden; background: var(--down, #f6465d); }
.tp-ratio-buy { display: block; height: 100%; background: var(--up, #2ebd85); }
.tp-ratio-lb { display: flex; justify-content: space-between; font-size: calc(11.5px * var(--sv-font-scale, 1)); margin-bottom: 6px; }
.tp-ratio-lb .up { color: var(--up, #2ebd85); }
.tp-ratio-lb .down { color: var(--down, #f6465d); }
.tp-last { font-size: calc(20px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0 8px; }
.tp-last.up { color: var(--up, #2ebd85); }
.tp-last.down { color: var(--down, #f6465d); }
.tp-sec { font-size: calc(11px * var(--sv-font-scale, 1)); letter-spacing: .05em; color: var(--text-secondary, #99a1ac); margin: 10px 0 5px; }
.tp-dist { display: flex; flex-direction: column; gap: 3px; }
.tpd-row { display: flex; align-items: center; gap: 7px; height: 14px; }
.tpd-px { flex: 0 0 62px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); font-variant-numeric: tabular-nums; }
.tpd-bar { display: block; height: 8px; min-width: 2px; border-radius: 2px; overflow: hidden; background: var(--down-soft, rgba(246,70,93,.35)); }
.tpd-buy { display: block; height: 100%; background: var(--up, #2ebd85); opacity: .75; }
.tpd-u { margin-left: auto; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #8a93a3); font-variant-numeric: tabular-nums; }
/* 美股成交页:大额筛选控制行(对位加密盘口控制行) */
.ob-ctrl { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.ob-ctrl-lb { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-secondary, #99a1ac); }
.sp-foot button.on { color: var(--accent, #f0b90b); border-color: var(--accent, #f0b90b); }
/* ---------- 选币栏「涨跌时间段」浮层(与市场页同款,糖哥 2026-08-09 要求同步)----------
结构/类名/取数接口都与 markets 一致 —— 两处观感必须一样,数据也走同一个后端出口。 */
.chg-menu {
position: fixed; z-index: 10000; min-width: 178px; max-width: 260px; padding: 6px;
border-radius: 12px;
background: var(--bg-elevated, #16181f);
border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
.chg-menu .chg-mi-title { padding: 6px 8px 4px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted, #8a8f9c); }
.chg-menu .chg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px 2px 2px; }
.chg-cell {
padding: 8px 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
background: var(--accent-soft, rgba(255,255,255,0.05)); color: var(--text-main, #e8eaed);
font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 600; text-align: center; transition: background .12s, border-color .12s, color .12s;
}
.chg-cell:hover { background: var(--accent-soft, rgba(255,255,255,0.14)); }
.chg-cell.active { border-color: var(--accent, #f0b90b); color: var(--accent, #f0b90b); }
.chg-cus { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 4px 2px; margin-top: 6px; border-top: 1px solid var(--line-soft, rgba(255,255,255,0.06)); }
.chg-cus-lbl { flex: 0 0 100%; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-weight: 600; }
.chg-cus.active .chg-cus-lbl { color: var(--accent, #f0b90b); }
.chg-cus input, .chg-cus select {
height: 30px; border-radius: 7px; padding: 0 8px; font-size: calc(12.5px * var(--sv-font-scale, 1));
background: var(--bg-base, rgba(0,0,0,0.18)); color: var(--text-main, #e8eaed);
border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
}
.chg-dur-n { width: 56px; }
.chg-dur-u { width: 52px; }
.chg-range-inputs { display: flex; flex-direction: column; gap: 5px; flex: 1 1 100%; }
.chg-r-row { display: flex; align-items: center; gap: 6px; }
.chg-r-row > span { flex: 0 0 18px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.chg-r-row input { flex: 1 1 auto; min-width: 0; }
.chg-cus-go {
height: 30px; padding: 0 14px; border-radius: 7px; cursor: pointer; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700;
background: var(--accent, #0f1115); color: var(--bg-elevated, #fff); border: none; margin-left: auto;
}
.chg-cus-go:hover { filter: brightness(1.12); }
.chg-cus-go:active { transform: translateY(1px); }
/* 列头上的时段名(如 24H/5m/区间):非默认时点亮,一眼看出正在看哪个窗口 */
/* 「24H」与后面的「涨幅」在中文里紧贴即可,译成 Change/Änderung 后会粘成 24HChange —— 用间距而不是在文案里塞空格,中文观感不受影响。 */
.sp-sort .sp-win { color: var(--accent, #f0b90b); font-weight: 700; margin-right: .18em; }
/* ---------- 指标库 / 常用指标浮层的搜索框(糖哥 2026-08-09)---------- */
.il-head .il-search {
margin-left: auto; margin-right: 10px; width: 190px; max-width: 42vw; height: 30px;
padding: 0 10px; border-radius: 8px; font-size: calc(12.5px * var(--sv-font-scale, 1));
color: var(--text-main, #e8eaed); background: var(--bg-sunken, rgba(255,255,255,0.05));
border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
}
.il-head .il-search:focus { outline: none; border-color: var(--accent, #f0b90b); }
.il-head .il-search::placeholder { color: var(--text-muted, #8a8f9c); }
.tgp-title { display: flex; align-items: center; gap: 10px; }
.tgp-title .tgp-search {
margin-left: auto; width: 150px; max-width: 40vw; height: 26px;
padding: 0 9px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 400;
color: var(--text-main, #e8eaed); background: var(--bg-sunken, rgba(255,255,255,0.05));
border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
}
.tgp-title .tgp-search:focus { outline: none; border-color: var(--accent, #f0b90b); }
.tgp-item[hidden], .tgp-grid[hidden], .tgp-sub[hidden] { display: none; }
@media (max-width: 640px) {
.il-head .il-search { width: 130px; }
.tgp-title .tgp-search { width: 110px; }
}
/* ---------- 公式编辑器 · 发布槽位(糖哥 2026-08-09 先做位置)---------- */
.fe-publish { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line-strong, rgba(255,255,255,.16)); background: var(--surface-soft, rgba(255,255,255,.03)); }
.fe-pub-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fe-pub-soon { font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 700; padding: 1px 7px; border-radius: 999px; color: var(--warn, #f0b90b); background: rgba(240,185,11,.12); }
.fe-pub-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.fe-pub-field { display: flex; flex-direction: column; gap: 5px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa0aa); }
.fe-pub-field select, .fe-pub-field input {
height: 30px; padding: 0 8px; border-radius: 7px; font-size: calc(12.5px * var(--sv-font-scale, 1));
color: var(--text-main, #e8eaed); background: var(--bg-sunken, rgba(255,255,255,.05));
border: 1px solid var(--line-strong, rgba(255,255,255,.14));
}
.fe-pub-field select:focus, .fe-pub-field input:focus { outline: none; border-color: var(--accent, #f0b90b); }
.fe-pub-note { margin-top: 7px; font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-muted, #71757f); }
@media (max-width: 640px) { .fe-pub-row { grid-template-columns: 1fr; } }
/* ---------- 主动买卖强弱(与最新成交同源的真实逐笔统计)---------- */
.ob-taker { padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--surface-soft); border: 1px solid var(--line); }
.ob-taker-title { display: flex; align-items: baseline; gap: 8px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-secondary, #b0b4bd); margin-bottom: 6px; }
.ob-taker-span { margin-left: auto; font-size: calc(10.5px * var(--sv-font-scale, 1)); font-weight: 400; color: var(--text-muted, #71757f); }
.ob-taker-bar { height: 6px; border-radius: 3px; overflow: hidden; background: var(--fall-red, #f6465d); }
.ob-taker-bar .tk-buy { display: block; height: 100%; background: var(--rise-green, #2ebd85); }
.ob-taker-pcts { display: flex; justify-content: space-between; margin-top: 5px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 600; }
.ob-taker-pcts .up { color: var(--rise-green, #2ebd85); }
.ob-taker-pcts .down { color: var(--fall-red, #f6465d); }
.ob-taker-kv { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--text-muted, #71757f); }
.ob-taker-kv b { color: var(--text-main, #e8eaed); font-weight: 700; }
.ob-taker-kv b.up { color: var(--rise-green, #2ebd85); }
.ob-taker-kv b.down { color: var(--fall-red, #f6465d); }
/* ---------- 定位到:底栏按钮 + 弹层(对标 TradingView「前往到」)---------- */
.tg-goto {
display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: 6px;
padding: 4px 10px; border-radius: 8px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600; cursor: pointer;
color: var(--text-secondary, #b0b4bd); background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,.14));
}
.tg-goto:hover { color: var(--text-main, #e8eaed); background: var(--bg-hover); border-color: var(--accent, #f0b90b); }
.tg-goto svg { flex: none; }
.tg-goto-pop {
position: fixed; z-index: 10000; min-width: 268px; padding: 10px; border-radius: 12px;
background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.12));
box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.tgg-title { font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted, #8a8f9c); margin-bottom: 8px; }
.tgg-ranges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tgg-cell {
padding: 7px 4px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
background: var(--accent-soft, rgba(255,255,255,.05)); color: var(--text-main, #e8eaed);
font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600;
}
.tgg-cell:hover { border-color: var(--accent, #f0b90b); color: var(--accent, #f0b90b); }
.tgg-date { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.tgg-lbl { flex: 0 0 100%; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-weight: 600; }
.tgg-d, .tgg-t {
height: 30px; padding: 0 8px; border-radius: 7px; font-size: calc(12.5px * var(--sv-font-scale, 1));
color: var(--text-main, #e8eaed); background: var(--bg-sunken); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
}
.tgg-d { flex: 1 1 auto; min-width: 0; }
.tgg-t { width: 88px; }
.tgg-go {
height: 30px; padding: 0 14px; border-radius: 7px; cursor: pointer; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700;
background: var(--accent, #f0b90b); color: var(--bg-elevated, #1a1400); border: none;
}
.tgg-go:hover { filter: brightness(1.1); }
.tgg-note { margin-top: 8px; font-size: calc(11px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--text-muted, #71757f); }
/* 定位落点闪烁标记:跳转后在目标那根K线上闪几秒,数秒后自动消失 */
.sv-goto-flash { position: absolute; top: 0; bottom: 0; width: 0; z-index: 32; pointer-events: none; }
.sv-goto-flash .sgf-line {
position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
background: var(--warn, #f0b90b); animation: svGotoBlink .55s ease-in-out infinite;
}
.sv-goto-flash .sgf-dot {
position: absolute; top: var(--sgf-y, 40px); left: -5px; width: 10px; height: 10px; border-radius: 50%;
background: var(--warn, #f0b90b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn, #f0b90b) 35%, transparent);
animation: svGotoPulse .55s ease-in-out infinite;
}
@keyframes svGotoBlink { 0%, 100% { opacity: .12; } 50% { opacity: .95; } }
@keyframes svGotoPulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.sv-goto-flash .sgf-line, .sv-goto-flash .sgf-dot { animation: none; opacity: .9; }
}
/* ---- 形态盯盘(指标设置窗内)：勾形态 → 挂服务端 7×24 盯 ---- */
.igs-patwatch { padding: 8px 10px; border-radius: 8px; background: var(--bg-sunken, rgba(0,0,0,.16)); border: 1px solid var(--line, rgba(255,255,255,.08)); }
/* 说明里的加粗是关键词(颈线被突破/形成中不推),用品牌色让它跳出来 */
/* 密度滑块 */
.igs-patdense { padding: 2px 0 4px; }
.igs-dense-row { display: flex; align-items: center; gap: 10px; }
.igs-dense-row input[type=range] { flex: 1; accent-color: var(--warn, #f0b90b); }
.igs-dense-val { min-width: 26px; text-align: right; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--warn, #f0b90b); font-weight: 600; }
.igs-pw-note b { color: var(--warn, #f0b90b); font-weight: 600; }
.igs-pw-note { font-size: calc(11.5px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-muted, #8a8f9c); margin-bottom: 8px; }
.igs-pw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 4px 8px; max-height: 168px; overflow-y: auto; }
.igs-pw-item { display: flex; align-items: center; gap: 5px; font-size: calc(12px * var(--sv-font-scale, 1)); cursor: pointer; color: var(--text-secondary, #b0b4bd); }
.igs-pw-item input { cursor: pointer; }
.igs-pw-item span.bull { color: var(--up, #f6465d); }
.igs-pw-item span.bear { color: var(--down, #0ecb81); }
/* 失效通知开关:说明文字要能完整换行 —— 它解释的是"什么叫不成立",
一句话没说清用户就会把它当成买卖提示。 */
.igs-pw-inv { display: block; margin-top: 9px; padding: 7px 9px; border-radius: 6px;
background: rgba(255,255,255,.03); cursor: pointer; }
.igs-pw-inv input { vertical-align: middle; margin-right: 6px; }
.igs-pw-inv span { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); }
.igs-pw-inv i { display: block; margin-top: 4px; font-style: normal; font-size: calc(11px * var(--sv-font-scale, 1));
line-height: 1.6; color: var(--text-muted, #8a8f9c); }
.igs-pw-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); }
.igs-pw-count { font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.igs-pw-go {
margin-left: auto; appearance: none; cursor: pointer;
padding: 5px 12px; border-radius: 7px; font-size: calc(12px * var(--sv-font-scale, 1)); font-weight: 600;
color: #1a1400; background: var(--brand, #f0b90b); border: none;
}
.igs-pw-go:disabled { opacity: .45; cursor: not-allowed; }
.igs-pw-go:hover:not(:disabled) { filter: brightness(1.06); }
/* ===== 标的栏「交易所」分类(2026-08-13):所/组 chips + 与市场页同款所徽标 ===== */
.spx-bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 10px 0; }
.spx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.1)); background: transparent; color: var(--text-dim, #9aa0aa); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; }
.spx-chip:hover { color: var(--text-main, #eaecef); }
.spx-chip.active { color: var(--text-main, #eaecef); border-color: rgba(240, 185, 11, .6); background: rgba(240, 185, 11, .08); }
.spx-bar + .spx-bar { padding-top: 5px; padding-bottom: 4px; }
/* 所 logo(2026-08-17 与市场页交易所专栏同步:字母块换成各所真 logo,缺图才回落字母) */
.spx-chip .ex-logo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; overflow: hidden; font-style: normal; font-weight: 700; font-size: calc(9px * var(--sv-font-scale, 1)); }
.spx-chip .ex-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.spx-chip .ex-logo-bn { background: rgba(240, 185, 11, .16); color: #f0b90b; }
.spx-chip .ex-logo-ok { background: color-mix(in srgb, var(--text-main, #eaecef) 12%, transparent); color: var(--text-main, #eaecef); }
.spx-chip .ex-logo-bg { background: rgba(0, 194, 203, .14); color: #00c2cb; }
/* 有真 logo 时不要底衬:透明 PNG 压在品牌色块上会脏,底色只留给字母回落态 */
.spx-chip .ex-logo:has(img) { background: transparent; }
/* ===== 搜索结果「交易对」分区(糖哥 2026-08-19,AICoin 同款交易对表) =====
同一资产在 BN/OK/BG 各所、现货与永续各条线的真实价与量。
⚠️市场页 markets.css 有同名类的一份镜像(两页不共享样式表),改这里必须同步过去。 */
.sp-pair { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 4px; }
.sp-pair-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 2px 12px 6px; }
.spx-chip.sm { padding: 3px 8px; font-size: calc(10.5px * var(--sv-font-scale, 1)); }
.sp-pair-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--line, rgba(255,255,255,.12)); }
/* ===== 交易对行(与市场页同一套 DOM/类名,布局按容器宽度各自排) =====
市场页 560px 排成 AICoin 那样的五列表;这里侧栏只有 240px,五列会挤成一堆乱码,
所以同样的字段改成两行:交易对+平台 一行,价格+涨跌 一行,成交额那列收起(宽度实在不够)。
DOM 与类名保持一致 —— 形态一致指的是同一套结构与信息,不是把 560px 的表硬塞进 240px。 */
.sp-pair-row {
width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
gap: 2px 9px; align-items: center; padding: 8px 14px;
background: transparent; border: none; cursor: pointer; text-align: left;
}
.sp-pair-row:hover { background: var(--accent-soft); }
.sp-pair-row .ppr-ic { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; }
.sp-pair-row .ppr-pair { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-weight: 700; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-main); white-space: nowrap; }
.sp-pair-row .ppr-venue { grid-column: 2; grid-row: 2; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa0aa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pair-row .ppr-price { grid-column: 3; grid-row: 1; font-family: var(--font-mono); font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 600; color: var(--text-main); text-align: right; }
.sp-pair-row .ppr-chg { grid-column: 3; grid-row: 2; font-family: var(--font-mono); font-size: calc(11.5px * var(--sv-font-scale, 1)); text-align: right; }
.sp-pair-row .ppr-chg.up { color: var(--up); } .sp-pair-row .ppr-chg.down { color: var(--down); }
.sp-pair-row .ppr-vol { display: none; } /* 240px 放不下第五列:如实省略,不缩成看不清的字 */
/* 平台下拉(与市场页同款) */
.sp-venue-sel { position: relative; }
.sp-venue-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.1)); background: transparent; color: var(--text-dim, #9aa0aa); font-size: calc(10.5px * var(--sv-font-scale, 1)); line-height: 15px; cursor: pointer; }
.sp-venue-btn:hover { color: var(--text-main, #eaecef); }
.sp-venue-btn.active { color: var(--text-main, #eaecef); border-color: rgba(240,185,11,.6); background: rgba(240,185,11,.08); }
.sp-venue-caret { font-style: normal; font-size: calc(9px * var(--sv-font-scale, 1)); opacity: .7; }
.sp-venue-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 104px; padding: 4px; border-radius: 8px; border: 1px solid var(--line-strong, rgba(255,255,255,.14)); background: var(--bg-panel, #1a1d24); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.sp-venue-item { display: block; width: 100%; padding: 6px 9px; border: 0; border-radius: 6px; background: none; color: var(--text-dim, #9aa0aa); font-size: calc(11.5px * var(--sv-font-scale, 1)); text-align: left; cursor: pointer; }
.sp-venue-item:hover { background: var(--accent-soft, rgba(255,255,255,.06)); color: var(--text-main, #eaecef); }
.sp-venue-item.on { color: var(--warn, #f0b90b); }
/* 价差条:数值永远显示(常态就是 0.0x%),超阈值才高亮成暖色 */
/* 光标不用 help(问号):问号自己不解释自己,用户先愣一下才明白。
改成常规光标 + 行尾一个 ⓘ,一眼就知道「这里有说明」(糖哥 2026-08-19 问「那个问号是啥意思」)。 */
.sp-spread { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 0 12px 6px; padding: 5px 9px; border-radius: 7px; background: var(--accent-soft, rgba(255,255,255,.05)); border: 1px solid transparent; }
.sps-info { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text-dim, #9aa0aa); color: var(--text-dim, #9aa0aa); font-size: calc(9.5px * var(--sv-font-scale, 1)); font-style: normal; line-height: 1; cursor: pointer; }
.sps-info:hover { color: var(--warn, #f0b90b); border-color: var(--warn, #f0b90b); }
.sp-spread.hot { border-color: color-mix(in srgb, var(--warn, #f0b90b) 45%, transparent); background: color-mix(in srgb, var(--warn, #f0b90b) 10%, transparent); }
.sps-lbl { font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.sps-val { font-family: var(--font-mono); font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main); }
.sp-spread.hot .sps-val { color: var(--warn, #f0b90b); }
/* 高低两条线走独立一行:侧栏只有 240px,挤在数值后面必被截断成半句话 */
.sps-way { flex-basis: 100%; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa0aa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pair-more { width: 100%; padding: 6px 14px; background: none; border: none; color: var(--text-dim, #9aa0aa); font-size: calc(11px * var(--sv-font-scale, 1)); cursor: pointer; text-align: center; }
.sp-pair-more:hover { color: var(--text-main, #eaecef); }
.sp-pair-note { padding: 2px 14px 6px; font-size: calc(10.5px * var(--sv-font-scale, 1)); color: var(--text-muted); }
.sp-empty.sm { padding: 8px 14px; font-size: calc(11.5px * var(--sv-font-scale, 1)); }
/* 「最近看过」(与市场页共用同一份记录与类名) */
.sp-recent { padding: 4px 0 6px; border-bottom: 1px solid var(--border); }
.sp-recent .sp-net-title { display: flex; align-items: center; }
.sps-clear { margin-left: auto; padding: 0; border: 0; background: none; color: var(--text-muted); font-size: calc(10.5px * var(--sv-font-scale, 1)); cursor: pointer; }
.sps-clear:hover { color: var(--text-main, #eaecef); }
.sps-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 14px 4px; }
.sps-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line, rgba(255,255,255,.08)); background: var(--accent-soft, rgba(255,255,255,.04)); color: var(--text-main, #eaecef); font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 600; cursor: pointer; }
.sps-chip:hover { border-color: rgba(240,185,11,.5); }
.sps-chip i { font-style: normal; font-size: calc(9.5px * var(--sv-font-scale, 1)); color: var(--text-dim, #9aa0aa); }
/* ===== 搜索空态「站内速览」六块(与市场页同一套类名;侧栏 240px 排单列) ===== */
.sp-spot { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
.sps-block { padding: 6px 14px; }
.sps-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-muted); letter-spacing: .03em; }
/* 形态命中的 K 线级别徽标(糖哥 2026-09-01)。sps-head 是 flex,
徽标跟在标题后面;.sps-info(说明 i)自带 margin-left:auto 仍会被推到最右,不冲突。 */
/* 币种标签里的 K 线级别(糖哥 2026-09-02「比如:BTC(4H)」)。
比币名小一号、淡一档:级别是限定语不是主体,读的时候不该跟币名抢眼。
inherit 颜色 + 不换行,免得在窄侧栏里被拆到下一行。 */
.sps-tag .sps-tag-tf { font-size: calc(9px * var(--sv-font-scale, 1)); font-style: normal; opacity: .62; margin-left: 1px; white-space: nowrap; }
.sps-head .sps-tf {
font-size: calc(10px * var(--sv-font-scale, 1));
font-weight: 600;
letter-spacing: 0;
padding: 1px 6px;
border-radius: 4px;
border: 1px solid var(--hair-stroke, rgba(140,140,150,.35));
color: var(--text-muted, #8a8f9c);
}
.sps-head .sps-info { width: 13px; height: 13px; margin-left: auto; display: inline-grid; place-items: center; border: 1px solid var(--text-dim, #9aa0aa); border-radius: 50%; font-size: calc(9px * var(--sv-font-scale, 1)); font-style: normal; cursor: pointer; }
.sps-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; }
.sps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.sps-list { display: flex; flex-direction: column; }
.sps-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.sps-row.static { cursor: default; }
.sps-row:not(.static):hover .sps-sym { color: var(--warn, #f0b90b); }
.sps-sym { font-size: calc(11.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main); white-space: nowrap; }
/* 币种标签串(糖哥 2026-09-02「文字溢出框」)。这里装的是一串