/**
 * VIP Chart Terminal — TV-style topbar overlay.
 *
 * 这是一层"覆盖样式"，通过 body.has-tv-topbar 触发生效；当配套 JS
 * (js/vip-chart-terminal-tv-topbar.js) 成功初始化后，会给 body 加上这个
 * class。任何时候关掉 JS 或设置 window.TdVipDisableTvTopbar = true，样式
 * 就自动回退到原始顶栏，不会影响现有行为。
 *
 * 改造目标（参考 mockup/topbar-compare.html 的 B 方案）：
 *   · 左半区只保留：Logo · 品种 · 周期组 · 指标 · AI · 回看 · 告警 · 分屏 · 截图
 *   · 右半区只保留：紧凑状态 pill · 设置齿轮 · 刷新 CTA
 *   · 把根数 / 刻度 / 量柱 / 均线 / 自刷 / 频率 六个运维控件折到设置 popover
 *   · 分屏 / 截图 / 告警 / 回看 / 设置 全部图标化
 *   · AI 按钮用 accent 蓝强调商业入口
 *   · 条件 primary 刷新：自刷开启时降为 ghost，关闭时升为实心
 */

/* ========================================================================
 * 1. 顶栏容器微调（仅在 has-tv-topbar 状态）
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-topbar {
    gap: 1px !important;
    padding: 0 8px !important;
}

body.td-vip-body.has-tv-topbar .td-vip-topbar-left {
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

body.td-vip-body.has-tv-topbar .td-vip-topbar-right {
    gap: 3px;
    flex: 0 0 auto;
}

/* ========================================================================
 * 2. 隐藏需要迁移到设置 popover 的运维控件（在顶栏里）
 *    注意：这些元素的 DOM 会被 JS 物理 appendChild 到 popover 里；
 *    popover 外的副本不存在，所以这里的 display:none 只作为兜底。
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-topbar > .td-vip-topbar-left > .td-vip-bar-count,
body.td-vip-body.has-tv-topbar .td-vip-topbar > .td-vip-topbar-left > .td-vip-price-scale-mode,
body.td-vip-body.has-tv-topbar .td-vip-topbar > .td-vip-topbar-right > #tdVipVolumeToggle,
body.td-vip-body.has-tv-topbar .td-vip-topbar > .td-vip-topbar-right > .td-vip-top-tool--moving-average,
body.td-vip-body.has-tv-topbar .td-vip-topbar > .td-vip-topbar-right > #tdVipLatestTime,
body.td-vip-body.has-tv-topbar .td-vip-topbar-refresh-cluster > #tdVipConnectionBadge,
body.td-vip-body.has-tv-topbar .td-vip-topbar-refresh-cluster > #tdVipAutoRefresh,
body.td-vip-body.has-tv-topbar .td-vip-topbar-refresh-cluster > .td-vip-refresh-frequency {
    display: none !important;
}

/* ========================================================================
 * 3. 图道菜单 Logo 按钮：收成 icon 风格（原来是带头像+文字）
 * ==================================================================== */
body.td-vip-body.has-tv-topbar #tdVipBrandToggle.td-vip-back-link--tv {
    gap: 6px;
    padding: 0 6px;
    height: 28px;
    min-height: 28px;
    border-radius: 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar #tdVipBrandToggle.td-vip-back-link--tv:hover {
    background: #f0f3fa;
}

body.td-vip-body.has-tv-topbar #tdVipBrandToggle .td-vip-back-link-avatar {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

body.td-vip-body.has-tv-topbar #tdVipBrandToggle .td-vip-back-link-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #131722;
}

/* ========================================================================
 * 4. 品种 pill TV 化
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-symbol-switcher-trigger.td-vip-market-pill {
    gap: 6px;
    height: 28px;
    min-height: 28px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 700;
    color: #131722;
    letter-spacing: -0.01em;
}

body.td-vip-body.has-tv-topbar .td-vip-symbol-switcher-trigger.td-vip-market-pill:hover {
    background: #f0f3fa;
}

body.td-vip-body.has-tv-topbar .td-vip-symbol-switcher-trigger .td-vip-market-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #089981;
    flex: 0 0 auto;
}

body.td-vip-body.has-tv-topbar .td-vip-symbol-switcher-caret {
    width: 10px;
    height: 10px;
    color: #787b86;
}

/* 品种 pill 涨跌幅 mini pill 已下线：宽度随价格位数变化会推动后续
   时间框/AI 等元素左右抖动。涨跌幅在右栏 watchlist + quote 面板
   已经能看到，顶栏不再重复展示。保留一条防御性 display:none，
   兼容历史版本里 JS 残留注入的节点。 */
body.td-vip-body.has-tv-topbar .td-vip-tv-symbol-change {
    display: none !important;
}

/* ========================================================================
 * 5. 周期组 TV 化：分段紧凑按钮 + 浅分隔
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-timeframes-scroll {
    max-width: none;
    overflow: visible;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}

body.td-vip-body.has-tv-topbar .td-vip-timeframes {
    gap: 0;
    padding: 0 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar .td-vip-timeframe-btn {
    height: 24px;
    min-width: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #787b86;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

body.td-vip-body.has-tv-topbar .td-vip-timeframe-btn:hover {
    background: #f0f3fa;
    color: #131722;
}

body.td-vip-body.has-tv-topbar .td-vip-timeframe-btn.is-active,
body.td-vip-body.has-tv-topbar .td-vip-timeframe-btn[aria-selected="true"] {
    background: #f0f3fa;
    color: #131722;
    box-shadow: none;
}

/* ========================================================================
 * 6. 顶栏分隔线（JS 插入 .td-vip-tv-sep）
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-tv-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: #e0e3eb;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* ========================================================================
 * 7. 通用 TV 风按钮（JS 注入回看/告警/分屏/截图/设置齿轮时使用）
 * ==================================================================== */
.td-vip-tv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #131722;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
    transition: background-color 0.12s ease, color 0.12s ease;
    box-shadow: none;
}

.td-vip-tv-btn:hover,
.td-vip-tv-btn:focus-visible {
    background: #f0f3fa;
    outline: none;
}

.td-vip-tv-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.32);
}

.td-vip-tv-btn--icon {
    width: 28px;
    padding: 0;
    color: #131722;
}

.td-vip-tv-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.td-vip-tv-btn .tv-caret {
    width: 10px;
    height: 10px;
    color: #787b86;
    margin-left: -1px;
    flex: 0 0 auto;
}

.td-vip-tv-btn.is-active {
    background: #f0f3fa;
    color: #131722;
}

.td-vip-tv-btn[aria-pressed="true"] {
    background: #f0f3fa;
    color: #131722;
}

/* AI 按钮特殊高亮 */
.td-vip-tv-btn--ai {
    color: #2962ff;
    font-weight: 600;
}

.td-vip-tv-btn--ai:hover,
.td-vip-tv-btn--ai:focus-visible {
    background: rgba(41, 98, 255, 0.08);
    color: #2962ff;
}

.td-vip-tv-btn--ai svg {
    color: #2962ff;
}

/* ========================================================================
 * 8. VIP 指标按钮 TV 化：保持原按钮但换成 ghost + fx icon
 * ==================================================================== */
body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle {
    gap: 5px;
    height: 28px;
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #131722;
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle:hover {
    background: #f0f3fa;
}

body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle[aria-expanded="true"] {
    background: #f0f3fa;
}

body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-graph-icon {
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #131722;
}

body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-graph-icon svg {
    width: 16px;
    height: 16px;
    color: #131722;
}

body.td-vip-body.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-btn-label {
    font-size: 12px;
    font-weight: 500;
    color: #131722;
}

/* ========================================================================
 * 9. AI 按钮 TV 化：accent 蓝色
 * ==================================================================== */
body.td-vip-body.has-tv-topbar #tdVipAiToolbarBtn {
    height: 28px;
    min-height: 28px;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #2962ff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    gap: 5px;
}

body.td-vip-body.has-tv-topbar #tdVipAiToolbarBtn:hover,
body.td-vip-body.has-tv-topbar #tdVipAiToolbarBtn:focus-visible {
    background: rgba(41, 98, 255, 0.08);
    color: #2962ff;
    outline: none;
}

body.td-vip-body.has-tv-topbar #tdVipAiToolbarBtn .td-vip-ai-toolbar-icon {
    color: #2962ff;
    font-size: 13px;
}

body.td-vip-body.has-tv-topbar #tdVipAiToolbarBtn .td-vip-ai-toolbar-label {
    font-size: 12px;
    font-weight: 600;
}

/* ========================================================================
 * 10. 分屏按钮 TV 化：icon-only
 * ==================================================================== */
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #131722;
    justify-content: center;
    box-shadow: none;
    font-size: 0;
    gap: 0;
}

body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle:hover,
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle[aria-pressed="true"] {
    background: #f0f3fa;
}

/* css/vip-chart-terminal-split.css 里在 span:first-child 上载
   了一对 ::before/::after（画一个 + 号 icon）。这里直接
   display:none 子元素，同时干掉"9E 字符 + “分屏”
   文字 + 原老 + 号 icon，避免三者在 TV 风下重叠。 */
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle > span {
    display: none !important;
}
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle > span::before,
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle > span::after {
    display: none !important;
}

/* 用 ::before 画一个 TV 风 2×2 图标。split.css 里 button::before
   是 position:absolute + left:-7px（原本在按钮外左侧画一条
   装饰竖线），需要全部重置为序庌布局才能在 flex 中
   居中渲染 grid 图标。 */
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle::before {
    content: "";
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    display: inline-block;
    margin: 0;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-color: transparent;
    /* 2x2 grid icon, stroke 1.7 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23131722' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

/* 也关掉原·左侧装饰竖线（split.css 里该 ::before 原本接了一个
   absolute pseudo 贴在 left:-7px）。这里::before 已被上面一条
   规则接管，不会再出现。下面补一条 ::after 反向防御，
   避免未来谁给 split.css 加了 ::after 合作渲染。 */
body.td-vip-body.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle::after {
    display: none !important;
}

/* ========================================================================
 * 11. 截图按钮 TV 化（原按钮已经是 icon 风，只微调）
 * ==================================================================== */
body.td-vip-body.has-tv-topbar #tdVipTopScreenshotBtn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar #tdVipTopScreenshotBtn:hover {
    background: #f0f3fa;
}

body.td-vip-body.has-tv-topbar #tdVipTopScreenshotBtn .td-vip-top-icon-svg svg {
    width: 16px;
    height: 16px;
    color: #131722;
    stroke-width: 1.7;
}

/* ========================================================================
 * 12. TV 风紧凑状态 pill（dot + 时间）— JS 注入 .td-vip-tv-status
 * ==================================================================== */
.td-vip-tv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    color: #787b86;
    font-size: 11px;
    line-height: 1;
    font-feature-settings: "tnum" on, "lnum" on;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    font-family: "Roboto Mono", "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
    white-space: nowrap;
}

.td-vip-tv-status .tv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #089981;
    box-shadow: 0 0 0 3px rgba(8, 153, 129, 0.14);
    flex: 0 0 auto;
}

.td-vip-tv-status--connecting .tv-dot {
    background: #787b86;
    box-shadow: 0 0 0 3px rgba(120, 123, 134, 0.14);
    animation: tdVipTvStatusPulse 1.2s ease-in-out infinite;
}

.td-vip-tv-status--stale .tv-dot {
    background: #ff9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.14);
}

.td-vip-tv-status--offline .tv-dot {
    background: #f23645;
    box-shadow: 0 0 0 3px rgba(242, 54, 69, 0.14);
}

@keyframes tdVipTvStatusPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

/* ========================================================================
 * 13. 刷新按钮 cluster TV 化 + 条件 primary
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-topbar-refresh-cluster {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

body.td-vip-body.has-tv-topbar #tdVipRefreshBtn.td-vip-primary-btn {
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: #2962ff;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar #tdVipRefreshBtn.td-vip-primary-btn:hover {
    background: #1a4cdb;
}

/* 条件 primary：自刷开启时降为 ghost（JS 切换 body.auto-refresh-on） */
body.td-vip-body.has-tv-topbar.auto-refresh-on #tdVipRefreshBtn.td-vip-primary-btn {
    background: transparent;
    color: #2962ff;
    box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.32);
}

body.td-vip-body.has-tv-topbar.auto-refresh-on #tdVipRefreshBtn.td-vip-primary-btn:hover {
    background: rgba(41, 98, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.56);
}

/* ========================================================================
 * 14. 设置齿轮 popover
 * ==================================================================== */
.td-vip-tv-settings-popover {
    position: fixed;
    /* 高于图表右栏、全屏浮层和主题 sticky 头部，避免点击齿轮后被盖住。 */
    z-index: 1000900;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 0;
    background: #ffffff;
    border: 1px solid #e0e3eb;
    border-radius: 10px;
    box-shadow: 0 16px 40px -20px rgba(15, 23, 42, 0.24), 0 0 0 1px rgba(15, 23, 42, 0.04);
    overflow: visible;
    transform-origin: top right;
    animation: tdVipTvSettingsIn 0.16s ease;
    font-family: inherit;
    color: #131722;
    isolation: isolate;
}

.td-vip-tv-settings-popover.is-hidden,
.td-vip-tv-settings-popover[hidden] {
    display: none !important;
}

@keyframes tdVipTvSettingsIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.td-vip-tv-settings-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #e0e3eb;
    border-radius: 10px 10px 0 0;
    background: inherit;
}

.td-vip-tv-settings-head strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #131722;
    line-height: 1.2;
}

.td-vip-tv-settings-head span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #787b86;
    line-height: 1.4;
}

.td-vip-tv-settings-body {
    padding: 6px 0 8px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
    background: inherit;
}

.td-vip-tv-settings-section {
    padding: 2px 0;
}

.td-vip-tv-settings-section + .td-vip-tv-settings-section {
    border-top: 1px solid #edf1f7;
    margin-top: 4px;
    padding-top: 6px;
}

.td-vip-tv-settings-section-title {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ba2b0;
}

.td-vip-tv-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    min-height: 34px;
}

.td-vip-tv-settings-row + .td-vip-tv-settings-row {
    /* subtle separator only when rows stack */
    border-top: 1px solid rgba(226, 232, 240, 0.6);
}

.td-vip-tv-settings-row:hover {
    background: #f7f9fc;
}

.td-vip-tv-settings-row .td-vip-tv-settings-label {
    flex: 1 1 auto;
    color: #131722;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.td-vip-tv-settings-row .td-vip-tv-settings-label small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 400;
    color: #9ba2b0;
    letter-spacing: 0.01em;
}

.td-vip-tv-settings-row .td-vip-tv-settings-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
}

/* popover 内：让原来的容器和标签重置 */
.td-vip-tv-settings-popover .td-vip-bar-count,
.td-vip-tv-settings-popover .td-vip-price-scale-mode,
.td-vip-tv-settings-popover .td-vip-top-tool--moving-average,
.td-vip-tv-settings-popover .td-vip-refresh-frequency {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    height: auto;
    min-height: 0;
}

.td-vip-tv-settings-popover .td-vip-bar-count-label,
.td-vip-tv-settings-popover .td-vip-price-scale-mode-label,
.td-vip-tv-settings-popover .td-vip-refresh-frequency > span:first-child {
    display: none !important;
}

/* 原生 select / 自定义 select 在 popover 里统一尺寸 */
.td-vip-tv-settings-popover select,
.td-vip-tv-settings-popover .td-vip-bar-count-select,
.td-vip-tv-settings-popover .td-vip-price-scale-mode-select,
.td-vip-tv-settings-popover #tdVipRefreshFrequency {
    display: inline-flex;
    align-items: center;
    height: 28px;
    min-height: 28px;
    padding: 0 26px 0 10px;
    border: 1px solid #e0e3eb;
    border-radius: 4px;
    background: #ffffff;
    color: #131722;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    box-shadow: none;
    min-width: 88px;
}

.td-vip-tv-settings-popover .td-vip-price-scale-mode-select {
    gap: 4px;
}

.td-vip-tv-settings-popover .td-vip-price-scale-mode-caret {
    font-size: 10px;
    color: #787b86;
}

.td-vip-tv-settings-popover .td-vip-price-scale-mode-text {
    font-size: 12px;
}

.td-vip-tv-settings-popover select:hover,
.td-vip-tv-settings-popover .td-vip-price-scale-mode-select:hover {
    border-color: #cad1dd;
}

.td-vip-tv-settings-popover select:focus-visible,
.td-vip-tv-settings-popover .td-vip-price-scale-mode-select:focus-visible {
    outline: none;
    border-color: #2962ff;
    box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.18);
}

/* popover 内 toggle 按钮（量柱 / 自刷 / 均线）统一 TV 风 pill */
.td-vip-tv-settings-popover #tdVipVolumeToggle,
.td-vip-tv-settings-popover #tdVipAutoRefresh,
.td-vip-tv-settings-popover #tdVipMovingAverageToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 26px;
    min-height: 26px;
    padding: 0 12px;
    border: 1px solid #e0e3eb;
    border-radius: 999px;
    background: #ffffff;
    color: #131722;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    min-width: 0;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.td-vip-tv-settings-popover #tdVipVolumeToggle:hover,
.td-vip-tv-settings-popover #tdVipAutoRefresh:hover,
.td-vip-tv-settings-popover #tdVipMovingAverageToggle:hover {
    border-color: #cad1dd;
    background: #f7f9fc;
}

.td-vip-tv-settings-popover #tdVipVolumeToggle[aria-pressed="true"],
.td-vip-tv-settings-popover #tdVipAutoRefresh[aria-pressed="true"] {
    background: #2962ff;
    color: #ffffff;
    border-color: #2962ff;
}

.td-vip-tv-settings-popover #tdVipVolumeToggle[aria-pressed="true"]:hover,
.td-vip-tv-settings-popover #tdVipAutoRefresh[aria-pressed="true"]:hover {
    background: #1a4cdb;
    border-color: #1a4cdb;
}

/* 均线 popover 从设置 popover 里打开时固定位置 */
.td-vip-tv-settings-popover .td-vip-ma-popover,
.td-vip-tv-settings-popover .td-vip-appearance-popover {
    position: fixed !important;
    top: 60px !important;
    right: calc(12px + 340px) !important;
    z-index: 1000910 !important;
}

/* 移动端 popover 贴底 */
@media screen and (max-width: 720px) {
    .td-vip-tv-settings-popover {
        position: fixed !important;
        top: auto !important;
        right: 12px !important;
        left: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
    }

    .td-vip-tv-settings-popover .td-vip-ma-popover,
    .td-vip-tv-settings-popover .td-vip-appearance-popover {
        right: 12px !important;
        left: 12px !important;
        top: auto !important;
        bottom: 220px !important;
        width: auto !important;
    }
}

/* ========================================================================
 * 15. 告警 / 回看 顶栏按钮：激活态用右栏或 modal 状态驱动
 *     - 告警按钮：body.td-vip-rail-panel-alerts 时点亮
 *     - 回看按钮：body.is-replay-mode 时点亮
 * ==================================================================== */
body.td-vip-body.has-tv-topbar.td-vip-rail-panel-alerts #tdVipTvAlertBtn,
body.td-vip-body.has-tv-topbar .td-vip-tv-btn--alerts[aria-pressed="true"] {
    background: #f0f3fa;
    color: #131722;
}

body.td-vip-body.has-tv-topbar.is-replay-mode #tdVipTvReplayBtn,
body.td-vip-body.has-tv-topbar .td-vip-tv-btn--replay[aria-pressed="true"] {
    background: rgba(41, 98, 255, 0.1);
    color: #2962ff;
}

/* ========================================================================
 * 16. 移动端：≤900px 保持原始堆叠布局，TV 顶栏降级
 * ==================================================================== */
@media screen and (max-width: 900px) {
    body.td-vip-body.has-tv-topbar .td-vip-topbar {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 40px !important;
        max-height: none !important;
    }

    body.td-vip-body.has-tv-topbar .td-vip-topbar-left,
    body.td-vip-body.has-tv-topbar .td-vip-topbar-right {
        flex-wrap: wrap;
    }
}

/* ========================================================================
 * 17. 夜间主题微调
 *     原主样式在 is-night-mode 下把顶栏改成深色；这里沿用同一套 token 风
 *     新 TV 按钮颜色需要在暗色下切到浅色字。
 * ==================================================================== */
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--icon {
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn:hover,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn svg,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--icon svg {
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn .tv-caret {
    color: #787b86;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--ai {
    color: #58a6ff;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--ai svg {
    color: #58a6ff;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--ai:hover {
    background: rgba(88, 166, 255, 0.12);
    color: #58a6ff;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-sep {
    background: rgba(255, 255, 255, 0.08);
}

body.td-vip-body.is-night-mode.has-tv-topbar #tdVipBrandToggle .td-vip-back-link-text,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-symbol-switcher-trigger.td-vip-market-pill,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-btn-label,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-graph-icon,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipIndicatorToggle .td-vip-menu-graph-icon svg,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipTopScreenshotBtn .td-vip-top-icon-svg svg {
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d1d4dc' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

body.td-vip-body.is-night-mode.has-tv-topbar #tdVipBrandToggle.td-vip-back-link--tv:hover,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-symbol-switcher-trigger.td-vip-market-pill:hover,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipIndicatorToggle:hover,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipSplitToggle.td-vip-split-toggle:hover,
body.td-vip-body.is-night-mode.has-tv-topbar #tdVipTopScreenshotBtn:hover,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-timeframe-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-timeframe-btn {
    color: #787b86;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-timeframe-btn.is-active,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-timeframe-btn[aria-selected="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* 夜间设置 popover */
body.td-vip-body.is-night-mode .td-vip-tv-settings-popover {
    background: #1e222d;
    border-color: rgba(255, 255, 255, 0.08);
    color: #d1d4dc;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-head {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-head strong {
    color: #ffffff;
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-head span,
body.td-vip-body.is-night-mode .td-vip-tv-settings-section-title {
    color: #787b86;
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-section + .td-vip-tv-settings-section {
    border-top-color: rgba(255, 255, 255, 0.04);
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-row .td-vip-tv-settings-label {
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-row .td-vip-tv-settings-label small {
    color: #787b86;
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-popover select,
body.td-vip-body.is-night-mode .td-vip-tv-settings-popover .td-vip-price-scale-mode-select {
    background: #131722;
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode .td-vip-tv-settings-popover #tdVipVolumeToggle,
body.td-vip-body.is-night-mode .td-vip-tv-settings-popover #tdVipAutoRefresh,
body.td-vip-body.is-night-mode .td-vip-tv-settings-popover #tdVipMovingAverageToggle {
    background: #131722;
    border-color: rgba(255, 255, 255, 0.1);
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode.has-tv-topbar #tdVipRefreshBtn.td-vip-primary-btn {
    background: #2962ff;
    color: #ffffff;
}

body.td-vip-body.is-night-mode.has-tv-topbar.auto-refresh-on #tdVipRefreshBtn.td-vip-primary-btn {
    background: transparent;
    color: #58a6ff;
    box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.4);
}

body.td-vip-body.is-night-mode.has-tv-topbar.auto-refresh-on #tdVipRefreshBtn.td-vip-primary-btn:hover {
    background: rgba(88, 166, 255, 0.12);
}

body.td-vip-body.is-night-mode .td-vip-tv-status {
    color: #787b86;
}

/* ========================================================================
 * 15. 图表上方 OHLC Bar 压扁（TV 风）
 *   TV 在图表上方有一行紧凑的 "SYMBOL · TF · SOURCE  O H L C  Δ (%)"，
 *   高度 ~26-28px，**无独立背景**，贴图表顶端。我们原先这条是 ~40px
 *   的独立横梁 + H1 大标题 + inline-status 小字，比较粗糙。这里把它
 *   整体压扁、透明化，并把 H1 收成 13px 的 pill 文案。
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-chart-bar {
    min-height: 0;
    height: 28px;
    padding: 2px 6px 0;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    gap: 8px;
    align-items: center;
}

body.td-vip-body.has-tv-topbar .td-vip-chart-heading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* H1 不要 "品种 / 周期" 那么大的字；收缩成 13px 的正文文案，等比贴齐 OHLC 行 */
body.td-vip-body.has-tv-topbar .td-vip-chart-heading h1,
body.td-vip-body.has-tv-topbar #tdVipChartTitle {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: inherit;
    text-transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    white-space: nowrap;
}

body.td-vip-body.has-tv-topbar .td-vip-ohlc {
    gap: 10px;
    font-size: 11.5px;
    line-height: 1;
    letter-spacing: 0;
    color: #787b86;
}

body.td-vip-body.has-tv-topbar .td-vip-ohlc > span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

body.td-vip-body.has-tv-topbar .td-vip-ohlc strong {
    font-weight: 600;
    color: inherit;
    font-family: "Roboto Mono", "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
    font-feature-settings: "tnum" on, "lnum" on;
    font-variant-numeric: tabular-nums;
}

body.td-vip-body.has-tv-topbar .td-vip-chart-inline-status {
    margin-left: auto;
    font-size: 11px;
    color: #787b86;
    line-height: 1;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 夜间模式 — 和 TV 官方暗色保持一致 */
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-ohlc,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-chart-inline-status {
    color: #787b86;
}

body.td-vip-body.is-night-mode.has-tv-topbar #tdVipChartTitle {
    color: #d1d4dc;
}

/* ========================================================================
 * 16. 底部状态栏紧凑化（TV 风状态条）
 *   原来 4 张 label/value 纵向卡片，高度 ~44-52px。TV 底部是一条
 *   极细的单行状态条，24-28px，只列关键信息。
 *   - label 用 " · " 分隔替代独立 badge
 *   - Proxy 下方冗余小字删除
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-bottom-bar {
    min-height: 0;
    height: 26px;
    padding: 0 12px;
    gap: 14px;
    background: transparent !important;
    border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    color: #787b86;
}

body.td-vip-body.has-tv-topbar .td-vip-bottom-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0;
}

body.td-vip-body.has-tv-topbar .td-vip-bottom-item + .td-vip-bottom-item {
    position: relative;
    padding-left: 14px;
}

body.td-vip-body.has-tv-topbar .td-vip-bottom-item + .td-vip-bottom-item::before {
    content: "·";
    position: absolute;
    left: 4px;
    color: #787b86;
    opacity: 0.6;
}

body.td-vip-body.has-tv-topbar .td-vip-bottom-label {
    font-size: 11px;
    font-weight: 400;
    color: #787b86;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    opacity: 0.85;
}

body.td-vip-body.has-tv-topbar .td-vip-bottom-item strong {
    font-size: 11px;
    font-weight: 600;
    color: #131722;
    line-height: 1;
    font-family: "Roboto Mono", "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
    font-feature-settings: "tnum" on, "lnum" on;
    font-variant-numeric: tabular-nums;
}

/* Proxy 那块下方的冗余小字删除 — 技术细节不外露 */
body.td-vip-body.has-tv-topbar .td-vip-bottom-item--proxy small {
    display: none !important;
}

/* 夜间模式 */
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-bottom-bar {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-bottom-item strong {
    color: #d1d4dc;
}

/* ========================================================================
 * 17. 防御：隐藏原 action-bar
 *   app-ui.php 已经把 .td-vip-action-bar 移入了 hidden holder。
 *   但 action-bar 这套 class 别处可能有老代码注入新按钮，加一条
 *   保底规则避免它再冒出来。
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-action-bar {
    display: none !important;
}

body.td-vip-body.has-tv-topbar .td-vip-hidden-actions {
    display: none !important;
}

/* ========================================================================
 * 18. 顶栏新增"交易计划"按钮样式（与回看共享 td-vip-tv-btn）
 *   主要是 icon 间距 + active 态。现有 .td-vip-tv-btn--replay 规则里的
 *   通用 hover/press 样式会覆盖这里共用部分；plan 再加一条
 *   press=true 情况下淡色高亮，让 modal 打开时用户能感知。
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-tv-btn--plan[aria-pressed="true"],
body.td-vip-body.has-tv-topbar .td-vip-tv-btn--plan.is-active {
    background: #f0f3fa;
    color: #131722;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--plan[aria-pressed="true"],
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-tv-btn--plan.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d4dc;
}

/* ========================================================================
 * 19. 右侧工具栏 Unicode → Lucide SVG（mask-image + currentColor）
 *   原 HTML 里 9 个按钮的图标是 Unicode 字符（≣ 📅 ⇱ ✺ ⌘ ◫ ⏰ ✎ ⚖），
 *   渲染依赖系统字体、emoji/线性混搭、风格不统一。这里用 mask-image
 *   盖掉文本字符，改用 lucide 线性 SVG。
 *   - mask-image + background-color:currentColor → 跟随按钮 color 自动
 *     切换 light/night 模式色（#374151 / #94a3b8 / accent）。
 *   - AI 按钮 (.td-vip-right-tool-btn--ai) 保留原 gradient 特殊样式，
 *     不强行替换（✺ 在 lucide 风里最接近 sparkles，但原 gradient
 *     商业化感更强）。
 * ==================================================================== */
body.td-vip-body.has-tv-topbar .td-vip-right-tool-btn:not(.td-vip-right-tool-btn--ai) .td-vip-right-tool-icon {
    font-size: 0 !important;
    line-height: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 18px 18px;
}

/* 隐藏所有 emoji 可能带来的颜色 */
body.td-vip-body.has-tv-topbar .td-vip-right-tool-btn:not(.td-vip-right-tool-btn--ai) .td-vip-right-tool-icon::before,
body.td-vip-body.has-tv-topbar .td-vip-right-tool-btn:not(.td-vip-right-tool-btn--ai) .td-vip-right-tool-icon::after {
    display: none !important;
}

/* lucide: list */
body.td-vip-body.has-tv-topbar #tdVipRightWatchlistToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

/* lucide: calendar-days */
body.td-vip-body.has-tv-topbar #tdVipRightCalendarToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
}

/* lucide: trending-up */
body.td-vip-body.has-tv-topbar #tdVipRightTrendToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

/* lucide: crosshair (SMC) */
body.td-vip-body.has-tv-topbar #tdVipRightSmcToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E");
}

/* lucide: wrench (tools) */
body.td-vip-body.has-tv-topbar #tdVipRightToolsToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* lucide: bell (alerts) */
body.td-vip-body.has-tv-topbar #tdVipRightAlertsToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

/* lucide: edit-3 (journal / pencil) */
body.td-vip-body.has-tv-topbar #tdVipRightJournalToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}

/* lucide: clipboard-list (交易 / 交易计划) */
body.td-vip-body.has-tv-topbar #tdVipRightPlanToggle .td-vip-right-tool-icon,
body.td-vip-body.has-tv-topbar #tdVipRightTradeToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
}

/* lucide: shield-check (risk) */
body.td-vip-body.has-tv-topbar #tdVipRightRiskToggle .td-vip-right-tool-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

/* ========================================================================
 * 20. 左侧绘图工具栏 TV 化
 *   当前实现已经是 SVG 线性图标（见 app-ui.php:491+），但保留了
 *   "选择/线类/测量/..." 中文 2 字标签，每个按钮 38×~54px。对照
 *   TradingView 真实产品（图 2）：
 *     · 仅图标、无文字
 *     · 宽度 ~48px
 *     · 圆角 4px，不带 gradient / translate 动效
 *     · active 态是单色柔化蓝背景 + 左侧 3px 短条，而不是 gradient
 *   这里把 has-tv-topbar 作用域下的 rail 统一压成 TV 风。原 light-mode
 *   的 gradient / translateY hover / 文字标签全部收起。
 *   若以后要恢复 gradient / 文字：直接 dequeue 这个 CSS 即可。
 * ==================================================================== */

/* 1) 去掉中文标签 + 改纯图标布局 */
body.td-vip-body.has-tv-topbar .td-vip-rail-btn-name {
    display: none !important;
}

/* 2) 按钮尺寸收紧到 TV 风 */
body.td-vip-body.has-tv-topbar .td-vip-rail-btn {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border-radius: 4px;
    gap: 0;
    /* 禁掉 hover 时的 translateY，TV 是 flat 的 */
    transition: background-color 0.12s ease, color 0.12s ease;
}

body.td-vip-body.has-tv-topbar .td-vip-rail-btn:hover,
body.td-vip-body.has-tv-topbar .td-vip-rail-btn:focus-visible {
    background: #f0f3fa;
    color: #131722;
    transform: none;
}

/* 3) active 态：单色柔化蓝背景 + 保留原左侧 3px 短条（短条是好设计不动） */
body.td-vip-body.has-tv-topbar .td-vip-rail-btn.is-active,
body.td-vip-body.has-tv-topbar .td-vip-rail-category-btn.is-active,
body.td-vip-body.has-tv-topbar .td-vip-rail-category-btn.is-open {
    background: rgba(41, 98, 255, 0.10);
    color: #2962ff;
    box-shadow: none;
}

body.td-vip-body.has-tv-topbar .td-vip-rail-btn-glyph svg {
    width: 18px;
    height: 18px;
}

/* hover 时不要 scale 放大，避免与相邻按钮视觉打架 */
body.td-vip-body.has-tv-topbar .td-vip-rail-btn:hover .td-vip-rail-btn-glyph svg,
body.td-vip-body.has-tv-topbar .td-vip-rail-btn:focus-visible .td-vip-rail-btn-glyph svg {
    transform: none;
}

/* 4) left rail 容器：按钮之间间距更紧凑 */
body.td-vip-body.has-tv-topbar .td-vip-left-rail-main {
    gap: 2px;
    padding: 6px 0;
}

/* 5) 夜间模式：对齐 TV dark */
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-btn {
    color: #787b86;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-btn:hover,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #d1d4dc;
}

body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-btn.is-active,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-category-btn.is-active,
body.td-vip-body.is-night-mode.has-tv-topbar .td-vip-rail-category-btn.is-open {
    background: rgba(41, 98, 255, 0.18);
    color: #58a6ff;
}

/* 6) 响应式 / 窄屏里原先会强制宽度 58px，TV 化后统一回收到 42px */
@media (max-width: 1100px) {
    body.td-vip-body.has-tv-topbar .td-vip-rail-btn {
        width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
}

/* ========================================================================
 * 21. 指标 popover 兜底：技术指标入口已下线，永远隐藏旧 classic tab。
 * ==================================================================== */
.td-vip-indicator-popover .td-vip-indicator-category-tab[data-tab-group="classic"] {
    display: none !important;
}